/* ODANIE — charte : fond clair institutionnel, matière titane, touche d'or ; thème nuit */
:root, [data-theme="light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --surface-3: #e9edf1;
  --text: #16191d;
  --muted: #5f6873;
  --border: #d6dbe0;
  --border-strong: #8d96a0;
  --accent: #2e3a47;          /* titane profond */
  --accent-hover: #18202a;
  --accent-soft: #e4e8ec;
  --on-accent: #ffffff;
  --gold: #c9a46a;
  --gold-2: #a8875a;
  --red: #c8102e;
  --red-soft: #fbeaec;
  --green: #1d6b45;
  --green-soft: #d5f0e1;
  --orange: #9a4a10;
  --orange-soft: #fcebdc;
  --blue: #3f5468;
  --blue-soft: #e7ecf1;
  --shadow: 0 2px 10px rgba(20, 26, 33, .12);
  --metal: linear-gradient(135deg, #fbfcfd 0%, #dfe3e8 28%, #f5f7f9 46%, #c9cfd6 68%, #eef1f4 86%, #d7dce2 100%);
  --metal-dark: linear-gradient(180deg, #6a7480 0%, #48525e 18%, #333c46 55%, #262d35 100%);
  --metal-line: linear-gradient(90deg, #8e98a3 0%, #e9edf1 22%, #6d7782 45%, #f4f6f8 63%, #7c8691 82%, #cfd5db 100%);
  --gold-grad: linear-gradient(135deg, #f2d29a, #c9a46a 45%, #a8875a 75%, #d9b47f);
  --brushed: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.025) 1px 3px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --maxw: 1240px;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0f1216;
  --surface: #161b21;
  --surface-2: #1c222a;
  --surface-3: #252c35;
  --text: #e6e9ed;
  --muted: #9aa4ae;
  --border: #2c343e;
  --border-strong: #56616d;
  --accent: #c9d2dc;
  --accent-hover: #ffffff;
  --accent-soft: #252c35;
  --on-accent: #11151a;
  --red-soft: #3a1820;
  --green: #4fc386;
  --green-soft: #173528;
  --orange: #f0a35e;
  --orange-soft: #3a2817;
  --blue: #9bb3cc;
  --blue-soft: #1e2a36;
  --shadow: 0 2px 12px rgba(0, 0, 0, .5);
  --metal: linear-gradient(135deg, #1f252d 0%, #2a323c 30%, #1b2027 50%, #303945 70%, #1c2128 100%);
  --metal-dark: linear-gradient(180deg, #e3e8ee 0%, #c3cbd4 40%, #a9b3be 100%);
  --metal-line: linear-gradient(90deg, #3a434d 0%, #8e98a3 25%, #2f363f 50%, #a9b3be 70%, #3a434d 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); font-size: 16px; line-height: 1.5; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .75rem; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 2px solid #4a8cf0; outline-offset: 2px; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); } .small { font-size: .875rem; } .xs { font-size: .75rem; } .center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mb-1 { margin-bottom: 1rem; }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stack > * + * { margin-top: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.layout > aside { position: sticky; top: 120px; }
.push-right { margin-left: auto; }
.upper { text-transform: uppercase; letter-spacing: .06em; }
.breadcrumb { font-size: .8rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--muted); }
.hidden { display: none !important; }

/* ---------------- En-tête ---------------- */
.header { background: var(--surface); position: sticky; top: 0; z-index: 50; }
.header::after { content: ""; display: block; height: 3px; background: var(--metal-line); }
.header-top { display: flex; align-items: center; gap: 1rem; padding: .6rem 0; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--text); }
.brand .emblem { width: 50px; height: 50px; }
.wordmark { height: 26px; width: auto; display: block; }
.wordmark.on-dark, [data-theme="dark"] .wordmark.on-light { display: none; }
[data-theme="dark"] .wordmark.on-dark { display: block; }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: .45rem; }
.search { display: flex; border-bottom: 2px solid var(--accent); background: var(--surface-2); border-radius: 4px 4px 0 0; }
.search input { border: 0; background: transparent; padding: .5rem .75rem; font: inherit; width: 200px; color: var(--text); }
.search button { border: 0; background: var(--metal-dark); color: var(--on-accent); padding: 0 .8rem; cursor: pointer; border-radius: 0 4px 0 0; }
.icon-btn { position: relative; border: 1px solid var(--border); background: var(--surface); color: var(--accent); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; border-radius: 6px; }
.icon-btn:hover { background: var(--surface-2); }
.dot { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; border-radius: 10px; font-size: .68rem; padding: 0 5px; font-weight: 700; min-width: 18px; text-align: center; line-height: 18px; }
.account { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); padding: .2rem .55rem .2rem .25rem; border: 1px solid var(--border); border-radius: 30px; }
.account:hover { background: var(--surface-2); color: var(--text); }
.nav { border-top: 1px solid var(--border); background: var(--surface); }
.nav ul { list-style: none; display: flex; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.nav a { display: block; padding: .8rem 1rem; text-decoration: none; color: var(--text); font-size: .95rem; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; border-bottom-color: var(--gold); }
.notice { background: var(--metal); color: var(--muted); font-size: .82rem; border-bottom: 1px solid var(--border); }
.notice .container { padding-top: .35rem; padding-bottom: .35rem; display: flex; gap: .5rem; align-items: center; }

main { min-height: 60vh; padding: 1.75rem 0 3rem; }
main.full { padding: 0; }

/* ---------------- Composants ---------------- */
.card { background: var(--surface); border: 1px solid var(--border); padding: 1.15rem 1.35rem; border-radius: 10px; }
.card.flat { background: var(--surface-2); border-color: transparent; }
.card.accent { position: relative; }
.card.accent::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px; background: var(--gold-grad); border-radius: 0 0 10px 10px; }
.card-link { text-decoration: none; color: inherit; display: block; transition: background .15s; }
.card-link:hover { background: var(--surface-2); color: inherit; }
.card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; color: var(--accent); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-weight: 500; font-size: .95rem; line-height: 1.4; padding: .5rem 1.15rem; min-height: 38px; border: 1px solid #20272e; background: var(--metal-dark); color: var(--on-accent); cursor: pointer; text-decoration: none; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.btn:hover { filter: brightness(1.12); color: var(--on-accent); }
.btn.secondary { background: var(--surface); color: var(--accent); border-color: var(--border-strong); box-shadow: none; }
.btn.secondary:hover { background: var(--surface-2); filter: none; color: var(--accent); }
.btn.tertiary { background: transparent; border-color: var(--border); color: var(--accent); box-shadow: none; }
.btn.tertiary:hover { background: var(--surface-2); filter: none; }
.btn.danger { background: var(--surface); border-color: var(--red); color: var(--red); box-shadow: none; }
.btn.danger:hover { background: var(--red-soft); filter: none; }
.btn.gold { background: var(--gold-grad); color: #2b2111; border-color: #a8875a; }
.btn.sm { font-size: .84rem; padding: .25rem .7rem; min-height: 30px; }
.btn.lg { font-size: 1.05rem; padding: .7rem 1.6rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.btn-link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

.badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; padding: .1rem .45rem; border-radius: 4px; background: var(--surface-3); color: var(--muted); white-space: nowrap; letter-spacing: .02em; }
.badge.l2 { background: var(--metal); color: var(--accent); border: 1px solid var(--border); }
.badge.l3 { background: var(--metal-dark); color: var(--on-accent); }
.badge.fn { background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.04) 1px 3px), linear-gradient(115deg, #2e3a47, #6d7884 45%, #c3cad1 52%, #5b6570 62%, #2e3a47); color: #fff; border: 1px solid #2e3a47; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.badge.ok { background: var(--green-soft); color: var(--green); }
.badge.ko { background: var(--red-soft); color: var(--red); }
.badge.warn { background: var(--orange-soft); color: var(--orange); }
.badge.live { background: var(--red); color: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.tag { display: inline-block; font-size: .78rem; padding: .12rem .7rem; border-radius: 1rem; background: var(--surface-3); color: var(--accent); text-decoration: none; border: 1px solid var(--border); }
.alert { border: 1px solid; border-left-width: 5px; padding: .7rem 1rem; margin-bottom: 1rem; border-radius: 6px; }
.alert.info { border-color: var(--blue); background: var(--blue-soft); }
.alert.success { border-color: var(--green); background: var(--green-soft); }
.alert.error { border-color: var(--red); background: var(--red-soft); }
.alert.warning { border-color: var(--orange); background: var(--orange-soft); }

label.lbl { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .92rem; }
.hint { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; }
.input, textarea.input, select.input { width: 100%; font: inherit; padding: .5rem .7rem; background: var(--surface-2); border: 1px solid var(--border); border-bottom: 2px solid var(--border-strong); border-radius: 6px 6px 0 0; color: var(--text); }
textarea.input { min-height: 100px; resize: vertical; }
.field { margin-bottom: 1.1rem; }
.check { display: flex; gap: .5rem; align-items: flex-start; }
.check input { margin-top: .3rem; width: 17px; height: 17px; }
input[type=color] { width: 44px; height: 34px; border: 1px solid var(--border); background: var(--surface); padding: 2px; border-radius: 6px; }

/* Avatars, noms, cadres et cosmétiques */
.av { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; overflow: hidden; }
.av.frame-or { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #c9a46a; }
.av.frame-titane { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #8e98a3; }
.name-or { background: linear-gradient(90deg, #b8893f, #e9c27f, #a8752f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-aurore { background: linear-gradient(90deg, #e2437e, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-ocean { background: linear-gradient(90deg, #0ea5e9, #1e40af); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-tricolore { background: linear-gradient(90deg, #1d4ed8 0 33%, #94a3b8 33% 66%, #dc2626 66%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.who { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); min-width: 0; }
.who strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who:hover strong { text-decoration: underline; }
.online-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2f9e62; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem .2rem .2rem; border: 1px solid var(--border); border-radius: 2rem; text-decoration: none; color: var(--text); font-size: .87rem; background: var(--surface); }
.chip:hover { border-color: var(--gold); color: var(--text); }
.chain { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.chain .arrow { color: var(--gold-2); font-weight: 700; }

/* Publications */
.post { border: 1px solid var(--border); padding: 1rem 1.25rem; background: var(--surface); border-radius: 10px; }
.post + .post { margin-top: .75rem; }
.post-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.post-body { white-space: pre-wrap; word-wrap: break-word; margin: .6rem 0; }
.post-img { margin: .5rem 0; max-height: 480px; border-radius: 8px; }
.post-actions { display: flex; gap: 1.1rem; font-size: .875rem; }
.post-actions button, .post-actions a { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; display: inline-flex; gap: .3rem; align-items: center; text-decoration: none; padding: 0; }
.post-actions button:hover, .post-actions a:hover { color: var(--accent); }
.post-actions .on { color: var(--red); }
.composer { border: 1px solid var(--border); padding: .9rem 1.1rem; background: var(--surface); margin-bottom: 1.25rem; border-radius: 10px; }
.tabs { display: flex; gap: .4rem; margin-bottom: 1.1rem; overflow-x: auto; }
.tabs button, .tabs a { background: var(--surface-3); color: var(--accent); border: 0; padding: .45rem .95rem; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; white-space: nowrap; border-radius: 20px; }
.tabs [aria-selected="true"] { background: var(--metal-dark); color: var(--on-accent); }
.comment { display: flex; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--border); }
.comment .body { white-space: pre-wrap; word-wrap: break-word; }
table.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th { text-align: left; background: var(--surface-2); padding: .55rem .7rem; border-bottom: 2px solid var(--border-strong); font-size: .82rem; }
.table td { padding: .55rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rank { font-weight: 800; color: var(--gold-2); width: 2.5rem; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.gauge { height: 12px; background: var(--surface-3); position: relative; overflow: hidden; border-radius: 6px; }
.gauge > span { display: block; height: 100%; background: var(--metal-dark); transition: width .6s ease; border-radius: 6px; }
.gauge.ok > span { background: linear-gradient(180deg, #3f9b6b, #1d6b45); }
.gauge.gold > span { background: var(--gold-grad); }
.empty { padding: 2rem; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; }
.loading { padding: 3rem; text-align: center; color: var(--muted); }

/* Accueil */
.hero { background: var(--brushed), var(--metal); border-bottom: 1px solid var(--border); padding: 3.2rem 0; margin-top: -1.75rem; margin-bottom: 2rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.hero h1 { font-size: 2.4rem; }
.hero .lead { font-size: 1.15rem; max-width: 42ch; }
.onair { display: block; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(20,26,33,.15); border-radius: 10px; overflow: hidden; }
.onair:hover { color: var(--text); }
.onair-bar { display: flex; gap: .75rem; align-items: center; padding: .75rem 1rem; }
.onair-bar strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pic-line { display: grid; grid-template-columns: 1fr 180px 5rem; gap: 1.5rem; align-items: center; padding: .9rem .25rem; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.pic-line:hover { background: var(--surface-2); color: var(--text); }
.pl-title { font-weight: 600; }
.pl-score { text-align: right; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; font-size: .9rem; }

/* Écrans vidéo */
.tv-screen { background: radial-gradient(ellipse at 30% 20%, #3a434d, #0d1014 70%); color: #fff; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.tv-screen iframe { width: 100%; height: 100%; border: 0; }
.tv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #000; }
.tv-split .tv-screen { aspect-ratio: 4/3; }
.tv-placeholder { text-align: center; padding: 1rem; }
.tv-placeholder img.emblem { width: 72px; opacity: .9; }
.tv-label { position: absolute; left: .5rem; bottom: .5rem; background: rgba(0,0,0,.6); padding: .15rem .5rem; font-size: .78rem; border-radius: 4px; }
.tv-speaking { outline: 4px solid var(--red); outline-offset: -4px; }

/* Profil */
.profile-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.banner { height: 190px; background-size: cover; background-position: center; position: relative; }
.banner.style-titane { background: var(--brushed), linear-gradient(120deg, #2a3139 0%, #5b6570 35%, #c9cfd6 55%, #6d7782 75%, #2e3a47 100%); }
.banner.style-nuit { background: radial-gradient(ellipse at 70% 30%, #2b3a55, #0b0f17 70%); }
.banner.style-ardoise { background: linear-gradient(135deg, #3b4652, #1e252d); }
.banner.style-aube { background: linear-gradient(120deg, #f6d6b8, #e7b7c8, #b7c6e7); }
.banner.style-or-brosse { background: var(--brushed), linear-gradient(120deg, #6d5530, #d9b47f 35%, #f4e1b9 50%, #b8893f 70%, #5b4626); }
.banner.style-nebuleuse { background: radial-gradient(circle at 20% 40%, #7c3aed88, transparent 40%), radial-gradient(circle at 75% 60%, #db277788, transparent 45%), linear-gradient(135deg, #0b1023, #1b1446); }
.banner.style-tricolore { background: linear-gradient(110deg, #1d3fae 0 34%, #f1f3f6 34% 66%, #c8102e 66%); }
.profile-main { padding: 0 1.5rem 1.25rem; }
.profile-id { display: flex; align-items: flex-end; gap: 1.1rem; margin-top: -48px; flex-wrap: wrap; position: relative; z-index: 2; }
.profile-id .av { border: 4px solid var(--surface); box-sizing: content-box; }
.profile-id h1 { margin: 0; font-size: 1.7rem; }
.profile-id .names { padding-bottom: .35rem; min-width: 0; }
.profile-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; padding-bottom: .35rem; }
.pstats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .9rem; color: var(--muted); font-size: .95rem; }
.pstats b { color: var(--text); font-size: 1.05rem; }
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.1rem; }
.support-box { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; background: var(--metal); min-width: 0; }
.support-box .lab { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; display: flex; justify-content: space-between; gap: .5rem; }
.support-box .target { display: flex; gap: .55rem; align-items: center; text-decoration: none; color: var(--text); line-height: 1.25; min-width: 0; }
.support-box .target strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Carte des pyramides */
.map-wrap { position: relative; height: calc(100vh - 165px); min-height: 520px; background: radial-gradient(ellipse at center, #1f262f 0%, #0c0f13 75%); overflow: hidden; border-top: 1px solid var(--border); }
[data-theme="light"] .map-wrap.light { background: radial-gradient(ellipse at center, #ffffff 0%, #e2e7ec 80%); }
.map-wrap canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.map-wrap canvas.dragging { cursor: grabbing; }
.map-ui { position: absolute; z-index: 2; }
.map-top { top: .75rem; left: .75rem; right: .75rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; pointer-events: none; }
.map-top > * { pointer-events: auto; }
.map-tabs { display: flex; background: rgba(18,22,27,.82); border: 1px solid #3a434d; border-radius: 30px; padding: 3px; backdrop-filter: blur(6px); }
.map-tabs button { background: transparent; border: 0; color: #c8d0d8; padding: .4rem .9rem; border-radius: 30px; font: inherit; font-size: .88rem; cursor: pointer; }
.map-tabs button[aria-selected="true"] { background: var(--gold-grad); color: #2b2111; font-weight: 700; }
.map-pill { background: rgba(18,22,27,.82); color: #dfe5ea; border: 1px solid #3a434d; border-radius: 30px; padding: .35rem .8rem; font-size: .85rem; backdrop-filter: blur(6px); }
.map-pill input { background: transparent; border: 0; color: #fff; font: inherit; width: 180px; outline: none; }
.map-zoom { right: .75rem; bottom: .75rem; display: flex; flex-direction: column; gap: .35rem; }
.map-zoom button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #3a434d; background: rgba(18,22,27,.85); color: #fff; font-size: 1.2rem; cursor: pointer; }
.map-feed { left: .75rem; bottom: .75rem; width: 300px; max-height: 40%; overflow: hidden; display: flex; flex-direction: column; gap: .3rem; pointer-events: none; }
.map-feed div { background: rgba(18,22,27,.8); color: #dfe5ea; border-left: 3px solid var(--gold); padding: .3rem .6rem; font-size: .78rem; border-radius: 4px; animation: slide .3s ease; }
.map-feed div.out { border-left-color: var(--red); }
.map-panel { right: .75rem; top: 4rem; width: 300px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; box-shadow: var(--shadow); }
.map-tip { pointer-events: none; background: rgba(12,15,19,.92); color: #fff; padding: .35rem .6rem; border-radius: 6px; font-size: .8rem; white-space: nowrap; border: 1px solid #3a434d; }
.trio-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.trio-card { border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; background: var(--surface); position: relative; overflow: hidden; }
.trio-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #c3cad1, #5b6570); }
.tree-box { overflow: auto; border: 1px solid var(--border); background: var(--brushed), var(--surface-2); border-radius: 10px; }
.tree-box svg { display: block; margin: 0 auto; }
.tree-box text { font-family: var(--font); fill: var(--text); }

/* ---------------- Espaces (façon Discord, sobre) ---------------- */
.dsc { display: grid; grid-template-columns: 210px 250px minmax(0, 1fr) 230px; height: calc(100dvh - var(--app-top, 158px)); min-height: 520px; border-top: 1px solid var(--border); background: var(--surface); }
.dsc-servers { background: var(--surface-2); border-right: 1px solid var(--border); overflow-y: auto; padding: .6rem .5rem; }
.dsc-servers h2 { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: .3rem .4rem .5rem; }
.srv-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 10px; text-decoration: none; color: var(--text); position: relative; margin-bottom: 2px; }
.srv-item:hover { background: var(--surface-3); color: var(--text); }
.srv-item[aria-current="true"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--gold), 0 1px 3px rgba(0,0,0,.08); }
.srv-item img, .srv-item .srv-ini { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--metal-dark); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.srv-item .srv-txt { min-width: 0; flex: 1; line-height: 1.2; }
.srv-item .srv-txt strong { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-item .srv-txt span { font-size: .72rem; color: var(--muted); }
.srv-item .dot { position: static; }
.srv-sep { height: 1px; background: var(--border); margin: .5rem .4rem; }
.dsc-side { background: var(--surface-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.dsc-head { padding: .8rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.dsc-head strong { font-size: 1.02rem; display: block; }
.dsc-head .xs { display: block; margin-top: .15rem; }
.dsc-join { margin: .6rem .7rem .2rem; }
.dsc-join .btn { width: 100%; }
.dsc-scroll { overflow-y: auto; flex: 1; padding-bottom: .5rem; }
.cat { margin-top: .55rem; }
.cat-toggle { width: 100%; display: flex; align-items: center; gap: .45rem; background: none; border: 0; padding: .4rem .8rem; font: inherit; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; text-align: left; }
.cat-toggle:hover { color: var(--text); }
.cat-toggle .chev { transition: transform .15s; display: inline-block; width: .8rem; }
.cat[data-open="true"] .chev { transform: rotate(90deg); }
.cat-toggle .cat-name { flex: 1; }
.cat-toggle .grad { -webkit-background-clip: text; background-clip: text; color: transparent; }
.cat-salons { display: none; }
.cat[data-open="true"] .cat-salons { display: block; }
.salon-link { display: flex; align-items: center; gap: .5rem; margin: 1px .5rem; padding: .38rem .6rem; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: .95rem; }
.salon-link:hover { background: var(--surface-3); color: var(--text); }
.salon-link[aria-current="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.salon-link.unread { color: var(--text); font-weight: 700; }
.salon-ico { width: 1.15rem; text-align: center; flex-shrink: 0; font-size: .95rem; opacity: .85; }
.salon-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.salon-name.grad { -webkit-background-clip: text; background-clip: text; color: transparent; }
.font-serif { font-family: "Century Gothic", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif; letter-spacing: .01em; } .font-mono { font-family: ui-monospace, Consolas, monospace; }
.font-arrondie { font-family: "Trebuchet MS", "Segoe UI Rounded", system-ui, sans-serif; } .font-capitales { text-transform: uppercase; letter-spacing: .08em; font-size: .85em; }
.font-manuscrite { font-family: "Segoe Print", "Bradley Hand", "Segoe UI", Arial, sans-serif; }
.count { font-size: .68rem; background: var(--red); color: #fff; border-radius: 10px; padding: 0 .4rem; font-weight: 700; }
.count.grey { background: var(--surface-3); color: var(--muted); }
.dot-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.18); animation: pulse 1.6s infinite; }
.dsc-me { display: flex; gap: .55rem; align-items: center; padding: .55rem .8rem; border-top: 1px solid var(--border); background: var(--surface-3); }
.dsc-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dsc-top { display: flex; align-items: center; gap: .7rem; padding: .6rem 1.1rem; border-bottom: 1px solid var(--border); min-height: 50px; }
.dsc-title { font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.dsc-topic { color: var(--muted); font-size: .85rem; padding-left: .75rem; border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dsc-body { flex: 1; display: flex; min-height: 0; }
.dsc-col { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dsc-stage { background: #0d1014; border-bottom: 1px solid var(--border); }
.dsc-stage .tv-screen { aspect-ratio: auto; height: min(36vh, 360px); }
.stage-bar { display: flex; align-items: center; gap: .75rem; padding: .45rem 1rem; background: var(--surface); flex-wrap: wrap; border-bottom: 1px solid var(--border); font-size: .85rem; }
.points-pill { display: inline-flex; gap: .35rem; align-items: center; background: var(--gold-grad); color: #2b2111; border-radius: 20px; padding: .1rem .6rem; font-weight: 700; font-size: .8rem; }
.msgs { flex: 1; overflow-y: auto; padding: .9rem 1.1rem; }
.msg { display: flex; gap: .7rem; padding: .3rem .5rem; margin: 0 -.5rem; border-radius: 6px; position: relative; }
.msg + .msg:not(.grouped) { margin-top: .5rem; }
.msg:hover { background: var(--surface-2); }
.msg.grouped { padding-left: calc(.5rem + 38px + .7rem); }
.msg .body { white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; }
.msg-meta { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.msg-meta a { color: var(--text); text-decoration: none; }
.msg-del { position: absolute; right: .5rem; top: .25rem; border: 1px solid var(--border); background: var(--surface); border-radius: 4px; cursor: pointer; opacity: 0; color: var(--muted); }
.msg:hover .msg-del { opacity: 1; }
.msg.annonce { border-left: 3px solid var(--gold); background: var(--surface-2); padding: .55rem .8rem; margin: .5rem 0; }
.msg.recompense { border-left: 3px solid #b06ad9; background: rgba(176,106,217,.1); }
.msg.question { border-left: 3px solid var(--blue); background: var(--blue-soft); }
.msg.question.answered { opacity: .6; }
.welcome { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; margin: .6rem 0; border-radius: 10px; background: var(--metal); border: 1px solid var(--border); }
.welcome .grow { flex: 1; min-width: 0; }
.sticker { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-radius: 16px; background: var(--gold-grad); color: #2b2111; font-weight: 700; box-shadow: 0 4px 12px rgba(168,135,90,.35); }
.sticker .wave { font-size: 1.8rem; display: inline-block; animation: wave 1.4s ease-in-out 2; transform-origin: 70% 70%; }
@keyframes wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(14deg); } }
.compose { display: flex; gap: .5rem; padding: .7rem 1.1rem .9rem; }
.compose .input { border-radius: 8px; border-bottom-width: 1px; }
.join-banner { margin: .6rem 1.1rem 1rem; padding: .7rem 1rem; border: 1px dashed var(--border-strong); border-radius: 10px; display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.dsc-members { background: var(--surface-2); border-left: 1px solid var(--border); overflow-y: auto; padding: .4rem 0 1rem; }
.mem-group { padding: .9rem .9rem .25rem; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mem-role { padding: .35rem .9rem .1rem 1.5rem; font-size: .76rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.mem-role i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.member { display: flex; align-items: center; gap: .55rem; margin: 1px .5rem; padding: .25rem .5rem; border-radius: 6px; text-decoration: none; color: var(--text); font-size: .88rem; }
.member.indent { padding-left: 1.6rem; }
.member:hover { background: var(--surface-3); color: var(--text); }
.member .st { position: relative; display: inline-flex; }
.member .st i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface-2); background: #a3abb4; }
.member .st i.on { background: #2f9e62; }
.threads .thread { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); margin-bottom: .5rem; background: var(--surface); }
.threads .thread:hover { border-color: var(--gold); color: var(--text); }
.conf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; flex: 1; }
.conf-q { border-left: 1px solid var(--border); overflow-y: auto; padding: .8rem; background: var(--surface-2); }
.voice-grid { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.5rem; justify-content: center; }
.voice-peer { width: 130px; text-align: center; }
.voice-peer .ring { display: inline-flex; padding: 4px; border-radius: 50%; transition: box-shadow .1s; }
.voice-peer .ring.speaking { box-shadow: 0 0 0 3px #2f9e62, 0 0 18px rgba(47,158,98,.6); }
.voice-peer .nm { font-size: .85rem; margin-top: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-bar { display: flex; gap: .6rem; justify-content: center; padding: .9rem; border-top: 1px solid var(--border); }

/* Messagerie */
.dock { position: fixed; right: 1rem; bottom: 0; z-index: 70; display: flex; gap: .75rem; align-items: flex-end; flex-direction: row-reverse; }
.dock-contacts { width: 260px; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: var(--shadow); }
.dock-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; cursor: pointer; font-weight: 700; font-size: .9rem; }
.dock-list { max-height: 50vh; overflow-y: auto; border-top: 1px solid var(--border); padding: .3rem 0; }
.dock-list .member { margin: 0 .3rem; cursor: pointer; }
.chatwin { width: 310px; height: 420px; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.chatwin.min { height: auto; }
.chatwin.min .cw-body, .chatwin.min .cw-form { display: none; }
.cw-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
.cw-head button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: .1rem .3rem; }
.cw-body { flex: 1; overflow-y: auto; padding: .6rem; display: flex; flex-direction: column; gap: .3rem; background: var(--surface-2); }
.bubble { max-width: 78%; padding: .45rem .7rem; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; font-size: .92rem; background: var(--surface); border: 1px solid var(--border); align-self: flex-start; }
.bubble.mine { align-self: flex-end; background: var(--metal-dark); color: var(--on-accent); border: 0; }
.bubble time { display: block; font-size: .65rem; opacity: .65; margin-top: .1rem; text-align: right; }
.cw-form { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--border); }
.wa { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100dvh - var(--app-top, 158px)); min-height: 520px; border-top: 1px solid var(--border); }
.wa-list { border-right: 1px solid var(--border); overflow-y: auto; background: var(--surface); }
.wa-item { display: flex; gap: .7rem; align-items: center; padding: .7rem .9rem; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); }
.wa-item:hover, .wa-item[aria-current="true"] { background: var(--surface-2); color: var(--text); }
.wa-item .grow { min-width: 0; flex: 1; }
.wa-item .last { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chat { display: flex; flex-direction: column; min-height: 0; background: var(--surface-2); }
.wa-chat .cw-body { padding: 1rem 1.5rem; }

/* Justice */
.steps { display: flex; gap: .3rem; flex-wrap: wrap; margin: .5rem 0 1.25rem; }
.steps span { font-size: .74rem; padding: .25rem .6rem; border-radius: 20px; background: var(--surface-3); color: var(--muted); }
.steps span.done { background: var(--metal-dark); color: var(--on-accent); }
.steps span.now { background: var(--gold-grad); color: #2b2111; font-weight: 700; }
.evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.evidence figure { margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.evidence img { display: block; width: 100%; height: 130px; object-fit: cover; cursor: zoom-in; }
.evidence figcaption { font-size: .78rem; padding: .35rem .5rem; color: var(--muted); }
.debate .dm { padding: .6rem .8rem; border-radius: 10px; margin-bottom: .5rem; max-width: 85%; }
.debate .dm.plaignant { background: var(--blue-soft); }
.debate .dm.defense { background: var(--green-soft); margin-left: auto; }
.debate .dm.presidence { background: var(--metal); border: 1px solid var(--border); margin: .5rem auto; text-align: center; max-width: 90%; }
.vote-opt { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 10px; margin-bottom: .5rem; cursor: pointer; background: var(--surface); width: 100%; text-align: left; font: inherit; color: var(--text); }
.vote-opt:hover { border-color: var(--gold); }
.vote-opt.mine { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }

/* Modale, toasts, notifications */
.modal-back { position: fixed; inset: 0; background: rgba(10,12,16,.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modal { background: var(--surface); color: var(--text); max-width: 600px; width: 100%; padding: 1.6rem; box-shadow: 0 8px 30px rgba(0,0,0,.35); max-height: 90vh; overflow: auto; border-radius: 12px; }
.modal.wide { max-width: 860px; }
.modal-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; }
.toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 5px solid var(--green); padding: .65rem 1rem; box-shadow: var(--shadow); max-width: 420px; animation: slide .25s ease; border-radius: 8px; }
.toast.error { border-left-color: var(--red); }
@keyframes slide { from { transform: translateY(10px); opacity: 0; } }
.notif { display: flex; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.notif.unread { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--gold); }
.notif:hover { background: var(--surface-2); color: var(--text); }
.pick-pyr { display: grid; gap: .5rem; }
.pick-pyr label { display: flex; gap: .7rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.pick-pyr label:has(input:checked) { border-color: var(--gold); background: var(--surface-2); }
.manage-list .item { display: flex; align-items: center; gap: .5rem; padding: .45rem .2rem; border-bottom: 1px solid var(--border); }
.manage-list .item .grow { flex: 1; min-width: 0; }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.shop .card { display: flex; flex-direction: column; gap: .4rem; }
.shop .preview { height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; background: var(--surface-2); }

/* Pied de page */
.footer { background: var(--surface-2); padding: 0 0 1rem; margin-top: 2rem; }
.footer::before { content: ""; display: block; height: 3px; background: var(--metal-line); margin-bottom: 1.6rem; }
.footer-top { display: flex; gap: 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; padding: 0; margin: 1rem 0 0; font-size: .88rem; }
.footer-bottom { border-top: 1px solid var(--border); margin-top: 1.2rem; padding-top: .9rem; font-size: .75rem; color: var(--muted); }
body.app-mode .footer { display: none; }

.mnav { display: none; }

@media (max-width: 1180px) {
  .dsc { grid-template-columns: 72px 230px minmax(0, 1fr); }
  .dsc-members { display: none; }
  .dsc-servers h2, .srv-item .srv-txt { display: none; }
  .srv-item { justify-content: center; padding: .4rem; }
  .srv-item .dot { position: absolute; top: 0; right: 2px; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > aside { position: static; }
  .grid-3, .trio-bar { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .search { display: none; }
  .support-grid { grid-template-columns: 1fr; }
  .conf { grid-template-columns: minmax(0, 1fr); }
  .conf-q { border-left: 0; border-top: 1px solid var(--border); max-height: 35vh; }
  .wa { grid-template-columns: minmax(0, 1fr); }
  .wa.has-chat .wa-list { display: none; }
  .wa:not(.has-chat) .wa-chat { display: none; }
}
@media (max-width: 720px) {
  h1 { font-size: 1.5rem; }
  .hero { padding: 2rem 0; } .hero h1 { font-size: 1.8rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .brand .emblem { width: 40px; height: 40px; } .wordmark { height: 20px; }
  .account > span { display: none; } .account { border: 0; padding: 0; }
  .nav { display: none; }
  main { padding-bottom: 5rem; }
  .pic-line { grid-template-columns: 1fr 4.5rem; gap: .4rem 1rem; }
  .pic-line .gauge { grid-column: 1 / -1; grid-row: 2; }
  .dsc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: calc(100vh - 170px); }
  .dsc-servers { display: flex; gap: .3rem; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: .35rem; }
  .dsc-servers h2, .srv-sep { display: none; }
  .srv-item { margin: 0; }
  .dsc-side { border-right: 0; border-bottom: 1px solid var(--border); max-height: 34vh; }
  .dsc-head .xs, .dsc-me { display: none; }
  .dsc-topic { display: none; }
  .dsc-stage .tv-screen { height: 200px; }
  .profile-id { margin-top: -40px; }
  .profile-actions { margin-left: 0; width: 100%; }
  .banner { height: 130px; }
  .map-wrap { height: calc(100vh - 130px); }
  .map-feed { display: none; }
  .map-panel { left: .75rem; right: .75rem; width: auto; top: auto; bottom: 4.5rem; }
  .dock { display: none; }
  .mnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); z-index: 60; padding-bottom: env(safe-area-inset-bottom); }
  .mnav a { flex: 1; text-align: center; font-size: .66rem; padding: .45rem 0 .4rem; text-decoration: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .mnav a[aria-current="page"] { color: var(--accent); font-weight: 700; box-shadow: inset 0 3px 0 var(--gold); }
  .toasts { bottom: 4.5rem; }
  .modal-back { align-items: flex-end; padding: 0; }
  .modal { border-radius: 16px 16px 0 0; }
}

/* Compléments v3 */
.st { position: relative; display: inline-flex; flex: none; }
.st i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); background: #a3abb4; }
.st i.on { background: #2f9e62; }
.dot-online { width: 9px; height: 9px; border-radius: 50%; background: #2f9e62; display: inline-block; }
.dock-head .count { margin-left: .2rem; }
.dock .member { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; border-radius: 8px; text-decoration: none; color: var(--text); }
.dock .member:hover { background: var(--surface-2); }
.dock .member .grow { flex: 1; min-width: 0; }
.wa-back { display: none; font-size: 1.6rem; text-decoration: none; margin-right: .2rem; }
body.wa-mode .footer, body.wa-mode .notice { display: none; }
.msg.question.answered { opacity: .6; }
.grow { flex: 1; min-width: 0; }
.case-row { display: flex; gap: .9rem; align-items: center; padding: .8rem 1rem; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); }
.case-row:hover { background: var(--surface-2); color: var(--text); }
.case-row:first-of-type { border-top: 0; }
.parties { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; }
.parties .vs { align-self: center; }
.parties .vs { font-weight: 800; color: var(--muted); }
.sentence { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; background: var(--surface-2); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.share-url { font-family: ui-monospace, Menlo, monospace; font-size: 1rem; padding: .6rem .8rem; background: var(--surface-2); border: 1px dashed var(--gold); border-radius: 8px; word-break: break-all; }
.tally { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; display: flex; }
.tally span { display: block; height: 100%; }
@media (max-width: 720px) {
  .wa-back { display: inline-block; }
  .parties { grid-template-columns: 1fr; text-align: center; }
}
.step-list { padding-left: 1.2rem; }
.step-list li { margin-bottom: .7rem; }
.prose { max-width: 820px; }
.prose .lead { font-size: 1.12rem; }
.auth-box { max-width: 520px; margin: 0 auto; }

.dsc-top .btn { white-space: nowrap; }
/* « Amis en ligne » et EALIONE : même largeur partout, collées aux bords de l'écran */
:root { --dock-w: 270px; }
.dock { right: 0; } .dock-contacts { width: var(--dock-w); border-radius: 12px 0 0 0; border-right: 0; }
#account-zone { flex-wrap: nowrap; }
@media (max-width: 720px) {
  .header-tools, #account-zone { gap: .3rem !important; }
  .icon-btn { width: 34px; height: 34px; }
  .brand { gap: .45rem; }
  .brand .emblem { width: 34px; height: 34px; } .wordmark { height: 17px; }
  .dsc, .wa { height: calc(100dvh - var(--app-top, 120px) - 56px); min-height: 0; }
}
.grid-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .grid-main { grid-template-columns: minmax(0, 1fr); } }

/* Onglets métallisés des espaces */
.cat { margin: .5rem .5rem 0; }
.cat-toggle.metal { width: 100%; border-radius: 8px; padding: .55rem .7rem; font-size: .76rem; letter-spacing: .07em;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 42%, rgba(0,0,0,.14)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.035) 1px 3px),
    linear-gradient(115deg, var(--tab2) 0%, var(--tab1) 38%, var(--tab-hi) 50%, var(--tab1) 62%, var(--tab2) 100%);
  border: 1px solid rgba(0,0,0,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.15); text-shadow: 0 1px 0 var(--tab-shadow); }
.cat-toggle.metal:hover { filter: brightness(1.06); color: inherit; }
.cat-toggle.metal .cat-n { font-size: .68rem; opacity: .7; font-weight: 700; letter-spacing: 0; }
.cat-toggle.metal .count { text-shadow: none; }
.cat[data-open="true"] .cat-toggle.metal { border-radius: 8px 8px 0 0; }
.cat[data-open="true"] .cat-salons { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px; background: var(--surface); padding: .3rem 0; margin-bottom: .2rem; }
.cat-salons .salon-link { margin: 1px .3rem; }
.cat-salons .salon-link[aria-current="true"] { background: var(--surface-3); }
.sup-group { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.btn.sup-on { border-color: var(--green); color: var(--green); }
.tv-main .card-link strong { font-size: 1.15rem; }
.salon-ico { width: auto; min-width: 1.15rem; white-space: nowrap; }
.tv-main .tv-screen { aspect-ratio: auto; height: min(56vh, 540px); }
.salon-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); opacity: .9; }
.salon-link[aria-current="true"] .salon-ico, .salon-link:hover .salon-ico { color: var(--text); }
.salon-emoji { color: var(--text); -webkit-text-fill-color: var(--text); }
.salon-lock { color: var(--muted); display: inline-flex; opacity: .8; }
.dsc-title .ico { color: var(--muted); }
/* Occupants des salons vocaux (dépliables) */
.voice-row { display: flex; align-items: center; }
.voice-row .salon-link { flex: 1; min-width: 0; }
.vo-toggle { border: 0; background: none; color: var(--muted); cursor: pointer; padding: .2rem .35rem; font-size: .8rem; margin-right: .3rem; border-radius: 4px; }
.vo-toggle:hover { background: var(--surface-3); color: var(--text); }
.voice-occ { margin: 0 .5rem .25rem 2.1rem; }
.voice-occ .vo { display: flex; align-items: center; gap: .45rem; padding: .18rem .3rem; font-size: .84rem; color: var(--text); text-decoration: none; border-radius: 6px; }
.voice-occ .vo:hover { background: var(--surface-3); }
.voice-occ .vo .av { box-shadow: 0 0 0 2px var(--surface); }
.voice-occ .vo.talk .av { box-shadow: 0 0 0 2px #2f9e62; }
.voice-occ .vo .m { margin-left: auto; font-size: .75rem; opacity: .7; }
/* Messagerie : tri et courriels */
.msg-sort { margin: 0; padding: .55rem .9rem; border-bottom: 1px solid var(--border); align-items: center; gap: .35rem; }
.msg-sort > span { margin-right: .2rem; }
.msg-sort button { padding: .3rem .75rem; font-size: .82rem; }
.mail-av { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-3); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cw-head .mail-av { width: 40px; height: 40px; }
.wa-item.unread strong { font-weight: 800; }
.mail-read { padding: 1.4rem 1.8rem; overflow-y: auto; flex: 1; background: var(--surface); }
.mail-read h2 { margin-top: 0; }
.mail-body { white-space: pre-wrap; line-height: 1.6; max-width: 70ch; }
.map-wrap canvas.orbiting { cursor: ew-resize; }
.msg-sort { flex-wrap: wrap; overflow: visible; }
.msg-sort button { padding: .28rem .6rem; font-size: .78rem; }
.map-br { right: 4.2rem; bottom: 3.4rem; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; pointer-events: none; }
.map-legend { display: flex; flex-direction: column; gap: .25rem; background: rgba(18,22,27,.72); color: #dfe5ea; padding: .45rem .7rem; border-radius: 8px; font-size: .74rem; pointer-events: none; }
.map-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: .45rem; vertical-align: middle; }
@media (max-width: 720px) { .map-legend { display: none; } .map-br { right: .75rem; left: .75rem; } .map-help { max-width: none; } }

/* Vocal : vidéo (caméra, écran) et petits ronds pour ceux sans caméra */
.vroom { background: #0f1317; color: #e8edf2; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; }
.vroom.has-video { min-height: min(62vh, 560px); }
.vtiles { display: none; gap: .5rem; padding: .6rem; flex: 1; min-height: 0; }
.vroom.has-video .vtiles { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); grid-auto-rows: minmax(140px, 1fr); }
.vroom.has-screen .vtiles { grid-template-columns: minmax(0, 3fr) minmax(160px, 1fr); grid-auto-flow: row dense; }
.vroom.has-screen .vtile.screen { grid-column: 1; grid-row: span 3; }
.vroom.has-screen .vtile.cam { grid-column: 2; }
.vtile { position: relative; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s; min-height: 0; }
.vtile video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; } /* jamais déformée ni rognée */
.vtile.screen video { object-fit: contain; }
.vtile video.mirror { transform: scaleX(-1); }
.vtile.speaking { box-shadow: 0 0 0 3px #2f9e62; }
.vlabel { position: absolute; left: .5rem; bottom: .45rem; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; padding: .15rem .5rem; border-radius: 6px; }
.vfull { position: absolute; right: .45rem; top: .45rem; background: rgba(0,0,0,.5); color: #fff; border: 0; border-radius: 6px; cursor: pointer; padding: .15rem .45rem; opacity: 0; transition: opacity .15s; }
.vtile:hover .vfull { opacity: 1; }
.vstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; padding: 1.4rem 1rem .6rem; }
.vroom.has-video .vstrip { gap: .6rem; padding: .35rem .8rem .2rem; justify-content: flex-start; }
.vcirc { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 84px; }
.vroom.has-video .vcirc { flex-direction: row; width: auto; background: rgba(255,255,255,.06); padding: .2rem .6rem .2rem .2rem; border-radius: 30px; }
.vcirc .av { border-radius: 50%; box-shadow: 0 0 0 3px transparent; transition: box-shadow .12s; }
.vcirc.speaking .av { box-shadow: 0 0 0 3px #2f9e62, 0 0 14px rgba(47,158,98,.6); }
.vcirc .nm { font-size: .8rem; color: #d7dee6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vbar { display: flex; justify-content: center; align-items: center; gap: .6rem; padding: .7rem; }
.vctl { display: inline-flex; gap: .55rem; }
.vbtn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #2a323b; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vbtn .ico { color: #fff; }
.vbtn:hover { background: #38424d; }
.vbtn.on { background: #e8edf2; } .vbtn.on .ico { color: #111; }
.vbtn.off { background: #c8102e; }
.vbtn.leave { background: #c8102e; }
@media (max-width: 720px) {
  .vroom.has-screen .vtiles { grid-template-columns: 1fr; }
  .vroom.has-screen .vtile.screen, .vroom.has-screen .vtile.cam { grid-column: auto; grid-row: auto; }
}
.cat-owner { display: inline-flex; } .cat-owner .av { box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }

/* Vocal : salle + chat du vocal à droite */
.vlayout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 0; }
.vlayout.chat-hidden { grid-template-columns: minmax(0, 1fr) 0; }
.vlayout.chat-hidden .vchat { display: none; }
.vlayout .vroom { border-bottom: 0; min-height: 0; overflow: auto; justify-content: center; }
.vlayout .vroom.has-video { min-height: 0; }
.vchat { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--surface); }
.vchat-head { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; border-bottom: 1px solid var(--border); }
.vchat .msgs { flex: 1; }
.vchat .compose { padding: .5rem; }
.vbtn.chat { margin-left: .6rem; }
@media (max-width: 1100px) { .vlayout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(220px, 1fr); } .vlayout.chat-hidden { grid-template-rows: 1fr; } .vchat { border-left: 0; border-top: 1px solid var(--border); } }
.mp-group { border-top: 1px solid var(--border); margin-top: .7rem; padding-top: .6rem; }
.mp-group.collectif .av { box-shadow: 0 0 0 2px #e04848; }
.mp-group.coalition .av { box-shadow: 0 0 0 2px #9b5de5; }

/* ===== v0.4 : paramètres, sons, mentions, mini-profil, rôles, amis, EALIONE ===== */
.oda-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border); background: var(--metal); color: var(--text); font-weight: 700; font-size: .85rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.oda-pill:hover { border-color: var(--gold); color: var(--text); }
.oda-ico { width: 1.15em; height: 1.15em; vertical-align: -.22em; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.oda-pill .oda-ico { width: 20px; height: 20px; }
.oda-amount { display: inline-flex; align-items: center; gap: .2rem; }
.role-name.grad { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.rbadge { display: inline-block; margin-left: .25rem; font-size: .9em; line-height: 1; vertical-align: -1px; }
img.rbadge { width: 15px; height: 15px; object-fit: contain; vertical-align: -2px; border-radius: 3px; }
.mem-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-role .rbadge { margin: 0 .1rem 0 0; }
.mention { background: rgba(77, 141, 255, .14); color: #3767c9; border-radius: 4px; padding: 0 .2rem; font-weight: 600; text-decoration: none; }
[data-theme="dark"] .mention { color: #a9c4ff; background: rgba(77, 141, 255, .2); }
.mention.me, .mention.all { background: rgba(201, 164, 106, .25); color: var(--gold-2); }
[data-theme="dark"] .mention.me, [data-theme="dark"] .mention.all { color: #f2d29a; }
.mention.salon { background: var(--surface-3); color: var(--text); }
.msg.pinged { background: linear-gradient(90deg, rgba(201, 164, 106, .16), transparent 70%); box-shadow: inset 3px 0 0 var(--gold); }
.mention-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: .25rem; z-index: 60; max-height: 260px; overflow-y: auto; }
.mention-pop.hidden { display: none; }
.mp-item { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: transparent; padding: .35rem .5rem; border-radius: 6px; text-align: left; cursor: pointer; color: var(--text); font: inherit; font-size: .88rem; }
.mp-item.on, .mp-item:hover { background: var(--surface-3); }
.mp-ico { width: 22px; text-align: center; font-weight: 800; color: var(--muted); }

/* Mini-profil */
.mini-profile { position: fixed; z-index: 120; width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.28); overflow: visible; animation: pop .14s ease-out; }
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.mini-profile .banner { height: 74px; border-radius: 0; }
.mini-load { padding: 2rem; text-align: center; color: var(--muted); }
.mini-body { padding: 0 1rem 1rem; position: relative; }
.mini-av { margin-top: -38px; display: inline-block; border-radius: 50%; border: 4px solid var(--surface); background: var(--surface); }
.mini-name { margin-top: .2rem; font-size: 1.05rem; }
.mini-bio { color: var(--muted); }
.mini-stats { display: flex; gap: .8rem; margin-top: .6rem; font-size: .8rem; color: var(--muted); }
.mini-stats b { color: var(--text); }
.mini-roles { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.mini-roles p { width: 100%; }
.role-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: .1rem .45rem; font-size: .76rem; font-weight: 600; }
.role-chip i { width: 9px; height: 9px; border-radius: 50%; }
.role-chip .rbadge { margin: 0; }
.mini-mod { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--border); display: grid; gap: .3rem; }
.input.sm, select.input.sm { padding: .25rem .45rem; font-size: .8rem; width: auto; }

/* Paramètres */
.settings { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2rem; padding: 1.5rem 0 3rem; align-items: start; }
.settings-nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { display: flex; gap: .6rem; align-items: center; padding: .5rem .7rem; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 500; font-size: .93rem; }
.settings-nav a:hover { background: var(--surface-2); color: var(--text); }
.settings-nav a[aria-current="true"] { background: var(--metal); box-shadow: inset 0 0 0 1px var(--border); font-weight: 700; }
.settings-nav .sep { height: 1px; background: var(--border); margin: .6rem 0; }
.settings-nav .btn-link { text-align: left; padding: .4rem .7rem; color: var(--red); }
.settings-main h1 { margin-top: 0; }
.set-card { margin-bottom: 1rem; }
.set-card h2 { font-size: 1.02rem; margin: 0 0 .4rem; }
.set-row { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--border); }
.set-row:first-of-type { border-top: 0; }
.set-row .grow { display: flex; flex-direction: column; gap: .1rem; }
.switch { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch:checked { background: #2f9e62; }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.meter { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f9e62, #c9a46a); transition: width .08s; }
.cam-preview { width: 100%; max-height: 300px; background: #000; border-radius: 10px; object-fit: contain; margin-top: .5rem; transform: scaleX(-1); }
.sound-list .set-row .btn { flex: none; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
html.compact .msg { padding-top: .15rem; padding-bottom: .15rem; }
html.compact .msg .av { width: 28px !important; height: 28px !important; }

/* Gestion : rôles façon Discord */
.manage-modal { max-width: 980px; }
.roles-ed { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; margin-top: .8rem; min-height: 360px; }
.roles-list { border-right: 1px solid var(--border); padding-right: .8rem; display: flex; flex-direction: column; gap: 2px; }
.role-item { display: flex; align-items: center; gap: .45rem; padding: .4rem .5rem; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.role-item:hover { background: var(--surface-2); }
.role-item.on { background: var(--surface-3); font-weight: 700; }
.role-item > i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.role-item .mv { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 .15rem; font-size: .8rem; }
.role-item .mv:disabled { opacity: .25; cursor: default; }
.roles-main { min-width: 0; }
.perm-group { margin-top: .8rem; }
.perm-row { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--border); }
.perm-row .grow { display: flex; flex-direction: column; gap: .1rem; }
.perm-row.soon { opacity: .7; }
.perm-row .grow > .badge, .perm-row .grow .badge { align-self: flex-start; display: inline-flex; width: auto; }
.tri { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: none; }
.tri button { border: 0; background: var(--surface); padding: .25rem .6rem; cursor: pointer; font-weight: 800; color: var(--muted); }
.tri button + button { border-left: 1px solid var(--border); }
.tri button.on { background: var(--surface-3); color: var(--text); }
.tri button.on.deny { background: #c8102e; color: #fff; }
.tri button.on.allow { background: #2f9e62; color: #fff; }
.role-preview { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; background: var(--surface-2); border-radius: 8px; margin-top: .4rem; }

/* Amis : catégories */
.fg-head { display: flex; align-items: center; gap: .35rem; padding: .35rem .8rem .15rem; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); cursor: pointer; user-select: none; }
.fg-head .chev { width: 10px; }
.fg { border-radius: 8px; margin: 0 .2rem; }
.fg.drop-on { background: rgba(77, 141, 255, .1); box-shadow: inset 0 0 0 1px rgba(77, 141, 255, .5); }
.fg.dragging, .member.dragging { opacity: .45; }
.fg-empty { padding: .2rem .9rem .4rem; margin: 0; }
.dock-head .btn-link { padding: 0 .3rem; font-size: 1.1rem; line-height: 1; }
.pf-group { margin-top: .7rem; }
.pf-friends { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .35rem; align-items: center; }
.pf-friends a { display: flex; flex-direction: column; align-items: center; width: 52px; font-size: .72rem; color: var(--text); text-decoration: none; text-align: center; }
.pf-friends a span:last-child { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-friends .st { position: relative; }
.pf-friends .st i { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); background: #a3abb4; }
.pf-friends .st i.on { background: #2f9e62; }

/* EALIONE : en bas à gauche, en face des amis */
.ealione { position: fixed; left: 1rem; bottom: 0; z-index: 70; width: 290px; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ea-head { display: flex; align-items: center; gap: .45rem; padding: .55rem .8rem; cursor: pointer; font-size: .9rem; }
.ea-logo { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gold-grad); color: #2a2110; font-size: .8rem; }
.ea-body { height: 260px; overflow-y: auto; border-top: 1px solid var(--border); padding: .7rem; display: flex; flex-direction: column; gap: .4rem; background: var(--surface-2); }
.ealione .cw-form { border-top: 1px solid var(--border); }
body.wa-mode .ealione { display: none; }
.ealione { left: 0; width: var(--dock-w); border-radius: 0 12px 0 0; border-left: 0; }
body.app-mode .map-feed { bottom: 52px; }
body.app-mode .dsc-side { padding-bottom: 40px; }
@media (max-width: 900px) { .settings { grid-template-columns: 1fr; } .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; } .roles-ed { grid-template-columns: 1fr; } .roles-list { border-right: 0; } .ealione { display: none; } }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.card.stat { display: flex; flex-direction: column; gap: .2rem; }
.card.stat strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.admin-btn { color: var(--accent); }
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Visionneuse et albums */
.pf-banner, .pf-avatar { cursor: zoom-in; display: block; }
.pf-avatar { display: inline-block; border-radius: 50%; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6, 8, 11, .94); display: flex; align-items: center; justify-content: center; animation: pop .15s ease-out; }
.lb-fig { margin: 0; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.lb-fig img { max-width: 94vw; max-height: 78vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 50px rgba(0,0,0,.6); }
.lb-fig figcaption { color: #e4e9ee; font-size: .95rem; text-align: center; }
.lb-x { position: absolute; top: 1rem; right: 1.2rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.2rem; cursor: pointer; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.lb-nav.prev { left: 1.2rem; } .lb-nav.next { right: 1.2rem; }
.lb-x:hover, .lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-count { position: absolute; top: 1.4rem; left: 1.4rem; color: #c9d2dc; font-size: .85rem; }
.lb-actions { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; }
.album { display: flex; flex-direction: column; gap: .2rem; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: .5rem; cursor: pointer; color: var(--text); font: inherit; }
.album:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.album img, .album-empty { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.album-name { font-weight: 700; margin-top: .3rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.photo { border: 0; padding: 0; background: var(--surface-2); border-radius: 6px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.photo:hover img { transform: scale(1.04); }
.fg-add { font-size: 1.15rem; line-height: 1; padding: 0 .35rem; text-decoration: none; }
.fg-edit { border: 0; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; padding: 0 .2rem; }
.fg-head:hover .fg-edit { opacity: 1; }
.drag-ghost { position: fixed; z-index: 300; pointer-events: none; opacity: .92; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.3); border-radius: 8px; transform: rotate(-1.5deg); }
body.dragging-now, body.dragging-now * { cursor: grabbing !important; user-select: none; }
.dock-list [data-friend], .fg-head { touch-action: pan-y; user-select: none; }
/* EALIONE en grand */
.ea-page { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: calc(100vh - var(--app-top, 160px)); background: var(--bg); }
.ea-side { border-right: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: .5rem; padding: .8rem; min-height: 0; }
.ea-new { width: 100%; }
.ea-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ea-bucket { margin: .7rem .4rem .2rem; }
.ea-item { display: flex; align-items: center; gap: .3rem; padding: .45rem .55rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .9rem; }
.ea-item .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-item:hover, .ea-item[aria-current="true"] { background: var(--surface-3); color: var(--text); }
.ea-mini { border: 0; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; padding: 0 .15rem; }
.ea-item:hover .ea-mini { opacity: 1; }
.ea-main { display: flex; flex-direction: column; min-height: 0; }
.ea-scroll { flex: 1; overflow-y: auto; padding: 1.5rem 1rem; }
.ea-thread { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; }
.ea-msg { display: flex; gap: .7rem; align-items: flex-start; }
.ea-msg.me { justify-content: flex-end; }
.ea-bubble { line-height: 1.6; max-width: 85%; }
.ea-msg.me .ea-bubble { background: var(--surface-3); padding: .6rem .9rem; border-radius: 16px; }
.ea-msg .ea-logo { flex: none; margin-top: .15rem; }
.ea-dots { display: inline-flex; gap: 4px; padding-top: .5rem; }
.ea-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: eadot 1s infinite; }
.ea-dots i:nth-child(2) { animation-delay: .15s; } .ea-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes eadot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ea-welcome { max-width: 760px; margin: 8vh auto 0; text-align: center; }
.ea-big-logo { width: 84px; height: 84px; object-fit: contain; margin-bottom: .6rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.ea-welcome h1 { font-size: 1.6rem; }
.ea-sugg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.4rem; }
.ea-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: .8rem 1rem; text-align: left; cursor: pointer; color: var(--text); font: inherit; font-size: .92rem; }
.ea-chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ea-compose { max-width: 780px; width: calc(100% - 2rem); margin: 0 auto; display: flex; gap: .5rem; align-items: flex-end; border: 1px solid var(--border-strong); border-radius: 18px; padding: .45rem .45rem .45rem .9rem; background: var(--surface); box-shadow: var(--shadow); }
.ea-compose textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; line-height: 1.5; padding: .35rem 0; max-height: 220px; }
.ea-compose .btn { border-radius: 50%; width: 40px; height: 40px; padding: 0; }
@media (max-width: 760px) { .ea-page { grid-template-columns: 1fr; } .ea-side { display: none; } .ea-sugg { grid-template-columns: 1fr; } }
/* l'arborescence garde ses commandes au-dessus des fenêtres « Amis en ligne » et EALIONE */
body.app-mode .map-zoom { bottom: 3.6rem; }
body.app-mode .map-br { bottom: 3.6rem; }
/* Vocal ouvert pendant la navigation : pastille à côté de l'onglet Espaces */
.nav li { position: relative; display: flex; align-items: center; }
.voice-live { display: inline-flex; align-items: center; gap: 3px; margin-left: .3rem; padding: 2px; border-radius: 999px; background: rgba(47,158,98,.14); box-shadow: 0 0 0 1px rgba(47,158,98,.5); transition: box-shadow .15s; }
.voice-live.talk { box-shadow: 0 0 0 2px #2f9e62; }
.voice-live button { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; padding: 0; }
.vl-mic { background: var(--surface); }
.vl-mic.off { background: var(--red-soft); }
.vl-hang { background: #d6263b; color: #fff; }
.vl-hang:hover { background: #b51a2e; }
.mnav a { position: relative; }
.mnav .voice-live { position: absolute; top: -6px; right: -4px; margin: 0; transform: scale(.8); }
/* Dégradés de rôle qui glissent au survol (pseudo, message ou ligne du membre) */
.role-name.grad { display: inline-block; }
@keyframes gslide { from { background-position-x: 0; } to { background-position-x: var(--gx, 100%); } }
.role-name.slide:hover, .msg:hover .role-name.slide, .member:hover .role-name.slide, .mini-name:hover .role-name.slide, .role-preview .role-name.slide { animation: gslide 2.6s linear infinite; }
html.reduce-motion .role-name.slide { animation: none !important; }
.role-chip.toggle { cursor: pointer; font: inherit; font-size: .76rem; font-weight: 600; color: var(--text); }
.role-chip.toggle.on { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.role-chip.toggle:disabled { opacity: .5; cursor: not-allowed; }
.mem-role { color: var(--muted); }
.bot-badge { background: #5865f2; color: #fff; }
.cmd-row { display: flex; gap: .4rem; margin-bottom: .4rem; align-items: center; }
.cmd-row .input:first-child { width: 130px; flex: none; }
.cmd-row select.input { width: 190px; flex: none; }
.code-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; font-size: .78rem; overflow-x: auto; white-space: pre; }
.dev-hero { display: flex; gap: 1.2rem; align-items: center; margin-top: 1rem; }
.dev-logo { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.api-list { margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.api-group summary { cursor: pointer; padding: .4rem .2rem; }
.api-row { display: flex; align-items: center; gap: .6rem; padding: .25rem .4rem; font-size: .85rem; border-top: 1px solid var(--border); }
.api-m { font-size: .7rem; font-weight: 800; width: 56px; text-align: center; border-radius: 4px; padding: .1rem 0; color: #fff; background: #6b7785; }
.m-get { background: #2f9e62; } .m-post { background: #3767c9; } .m-patch, .m-put { background: #b57a17; } .m-delete { background: #c8102e; }
.set-card.done { opacity: .6; }
/* EALIONE v2 */
.ea-mark { object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(90,60,200,.35)); }
.ea-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); padding: .2rem .2rem .4rem; }
.ea-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.ea-nav { display: block; padding: .5rem .6rem; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.ea-nav:hover, .ea-nav.on { background: var(--surface-3); color: var(--text); }
.ea-me { display: flex; gap: .5rem; align-items: center; border-top: 1px solid var(--border); padding-top: .6rem; }
.ea-offline { margin: .6rem auto 0; max-width: 780px; width: calc(100% - 2rem); background: rgba(155,93,229,.1); border: 1px solid rgba(155,93,229,.35); border-radius: 10px; padding: .5rem .8rem; font-size: .85rem; }
.ea-compose { flex-direction: column; align-items: stretch; }
.ea-clip { cursor: pointer; font-size: 1.2rem; padding: .3rem; border-radius: 8px; }
.ea-clip:hover { background: var(--surface-3); }
.ea-atts { display: flex; flex-wrap: wrap; gap: .4rem; }
.ea-atts:empty { display: none; }
.ea-att { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: .25rem .5rem; font-size: .8rem; position: relative; }
.ea-att.img { padding: 0; overflow: hidden; }
.ea-att.img img { width: 72px; height: 72px; object-fit: cover; display: block; cursor: zoom-in; }
.ea-att button { border: 0; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: .65rem; cursor: pointer; line-height: 1; }
.ea-att.img button { position: absolute; top: 3px; right: 3px; }
.ea-msg.me .ea-atts { margin-bottom: .4rem; justify-content: flex-end; }
.ea-bubble.md p { margin: 0 0 .6rem; } .ea-bubble.md p:last-child { margin-bottom: 0; }
.ea-bubble.md h3, .ea-bubble.md h4 { margin: .6rem 0 .3rem; font-size: 1rem; }
.ea-bubble.md ul, .ea-bubble.md ol { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.ea-bubble.md code { background: var(--surface-3); padding: 0 .25rem; border-radius: 4px; font-size: .88em; }
.bubble.md p { margin: 0 0 .3rem; } .bubble.md ul, .bubble.md ol { margin: .2rem 0; padding-left: 1.1rem; }
.ea-main.drop { box-shadow: inset 0 0 0 3px rgba(155,93,229,.6); }
.ea-chip.idea { grid-column: 1 / -1; text-decoration: none; background: linear-gradient(90deg, rgba(155,93,229,.12), transparent); }
.ea-wide { max-width: 860px; margin: 0 auto; }
.ea-icg { display: flex; gap: 1rem; align-items: center; }
.ea-icg-v { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ea-gauge { margin-top: .6rem; }
.ea-gauge .meter i { background: linear-gradient(90deg, #7c5ce5, #c3a6ff); }
.ea-idea summary { display: flex; align-items: center; gap: .7rem; cursor: pointer; list-style: none; }
.ea-idea summary::-webkit-details-marker { display: none; }
.ea-idea { margin-bottom: .7rem; }
.ea-score { width: 46px; height: 46px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--surface-3); color: var(--muted); }
.ea-score.ok { background: linear-gradient(135deg, #7c5ce5, #b28dff); color: #fff; }
.ea-quote { border-left: 3px solid #9b5de5; margin: 0 0 1rem; padding: .4rem 0 .4rem 1rem; color: var(--muted); font-style: italic; }
.table tr.me td { background: rgba(155,93,229,.1); }
/* Mini-profil : rôles avec ✕ et ＋ */
.mini-rlist { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; align-items: center; }
.role-chip .rc-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .7rem; padding: 0 0 0 .15rem; line-height: 1; opacity: 0; transition: opacity .15s; }
.role-chip:hover .rc-x, .role-chip .rc-x:focus-visible { opacity: 1; }
.role-chip .rc-x:hover { color: var(--danger, #c0392b); }
.rc-add-w { position: relative; }
.role-chip.rc-add { cursor: pointer; padding: .1rem .5rem; font-weight: 800; }
.role-chip.rc-add:hover { background: var(--surface-3); }
.rc-menu { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: .4rem; }
.rc-menu .input { width: 100%; margin-bottom: .3rem; }
.rc-items { max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
.rc-items button { display: flex; align-items: center; gap: .4rem; border: 0; background: none; padding: .35rem .45rem; border-radius: 6px; cursor: pointer; text-align: left; color: var(--text); font-size: .85rem; }
.rc-items button:hover { background: var(--surface-2); }
.rc-items i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mini-profile > :first-child { border-radius: 14px 14px 0 0; overflow: hidden; }
/* Profil : roue dentée unique et onglets CG / JG / CE empilés à droite */
.profile-actions { align-items: center; }
.pf-gear { width: 42px; height: 42px; border-radius: 50%; }
.pstats { align-items: center; }
.pf-gear.sm { width: 32px; height: 32px; margin-left: -.6rem; }
.pf-gear.sm svg { width: 16px; height: 16px; }
.pf-gear.sm:hover svg { transform: rotate(60deg); transition: transform .3s; }
.mini-link { color: inherit; text-decoration: none; }
.mini-link:hover strong { text-decoration: underline; }
a.mini-av { cursor: pointer; }
.profile-main { position: relative; }
.pf-body { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 1.25rem; align-items: start; margin-top: .4rem; }
.pf-spatial { margin-top: .8rem; }
.pf-tabs { display: flex; flex-direction: column; gap: .5rem; margin-top: -.2rem; }
/* onglets des pyramides : dégradé de deux couleurs + reflet métallisé réglable (Administration › Général) */
.pyr-tab { --pc: #6b7785; --pc2: #39424d; --metal: .35; position: relative; overflow: hidden; isolation: isolate; padding: .6rem .85rem .65rem;
  border: 1px solid color-mix(in srgb, var(--pc2) 70%, #000); background: linear-gradient(115deg, var(--pc), var(--pc2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,calc(var(--metal) * .9)), 0 2px 6px rgba(0,0,0,.12); }
.pyr-tab::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--metal);
  background: linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,.35) 46%, rgba(255,255,255,0) 60%, rgba(0,0,0,.18) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 3px); mix-blend-mode: overlay; }
.pyr-tab .lab { letter-spacing: .03em; font-size: .66rem; color: var(--pc-txt); margin-bottom: .3rem; }
.pyr-tab .lab a, .pyr-tab a, .pyr-tab .btn-link { color: inherit; }
.pyr-tab .xs.muted, .pyr-tab .muted { color: var(--pc-txt) !important; }
.pyr-tab-name { text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pyr-tab-name:hover { text-decoration: underline; }
.pyr-tab .lab > a.xs { white-space: nowrap; flex: none; }
.pyr-tab-name b { display: inline-block; padding: 0 .38rem; margin-right: .35rem; border-radius: 4px; color: #fff; background: var(--pc); letter-spacing: .05em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.25); }
.pyr-tab .target strong { font-size: .95rem; }
.pyr-tab-demo { --pc: #777; --pc2: #444; display: inline-block; padding: .35rem .8rem; border-radius: 8px; font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(115deg, var(--pc), var(--pc2)); }
@media (max-width: 860px) { .pf-body { grid-template-columns: 1fr; } }
/* Menus déroulants de l'en-tête */
button.account { font: inherit; background: var(--surface); cursor: pointer; }
.acc-caret { font-size: .7rem; color: var(--muted); margin-left: .1rem; }
button.icon-btn { font: inherit; }
.hdr-drop { position: fixed; z-index: 140; width: 340px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 44px rgba(0,0,0,.22); padding: .45rem; animation: pop .14s ease-out; }
.hdr-drop.hdk-account { width: 290px; }
.hd-title { font-weight: 800; margin: .3rem .5rem; font-size: 1rem; }
.hd-head { display: flex; align-items: center; justify-content: space-between; padding-right: .5rem; }
.hd-sep { height: 1px; background: var(--border); margin: .35rem .2rem; }
.hd-me { display: flex; align-items: center; gap: .7rem; padding: .5rem; border-radius: 10px; text-decoration: none; color: var(--text); }
.hd-me > span { display: flex; flex-direction: column; }
.hd-me:hover { background: var(--surface-2); color: var(--text); }
.hd-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .6rem; border: 0; background: none; border-radius: 8px; text-decoration: none; color: var(--text); font: inherit; font-size: .92rem; cursor: pointer; text-align: left; }
.hd-item > span { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; flex: none; }
.hd-item:hover { background: var(--surface-2); color: var(--text); }
.hd-list { max-height: min(60vh, 460px); overflow: auto; }
.hd-notif, .hd-dm { display: flex; gap: .6rem; align-items: center; width: 100%; padding: .55rem .6rem; border: 0; background: none; border-radius: 8px; text-decoration: none; color: var(--text); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.hd-notif .xs, .hd-dm > .xs { white-space: nowrap; text-align: right; }
.hd-dm .grow { display: flex; flex-direction: column; min-width: 0; }
.hd-dm .grow .xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-notif:hover, .hd-dm:hover { background: var(--surface-2); color: var(--text); }
.hd-notif.unread, .hd-dm.unread { background: rgba(91,141,239,.08); }
.hd-notif.unread::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #5b8def; flex: none; }
.dot-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger, #c8102e); color: #fff; font-size: .7rem; text-align: center; margin-top: 2px; }
.hd-foot { display: block; text-align: center; padding: .55rem; border-top: 1px solid var(--border); margin-top: .3rem; font-size: .86rem; font-weight: 600; }
.faq { border-bottom: 1px solid var(--border); }
.faq:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: .8rem 0; font-weight: 600; }
.faq p { margin: 0 0 .9rem; }
/* Son des vocaux : sections et vumètres */
.set-sec { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 1.2rem 0 .2rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.set-card > .set-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vxm { display: grid; gap: .35rem; margin-top: .7rem; }
.vxm-row { display: grid; grid-template-columns: 82px 1fr 64px; align-items: center; gap: .6rem; font-size: .8rem; }
.vxm-row em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.vxm-bar { position: relative; height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.vxm-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: #2f9e62; transition: width .05s linear; }
.vxm-bar.gr i { left: auto; right: 0; background: #e08a3a; }
.vxm-bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: .6; }
.vxm-gate { justify-self: start; font-size: .72rem; font-weight: 700; padding: .1rem .55rem; border-radius: 10px; background: var(--surface-3); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.vxm-gate.open { background: rgba(47,158,98,.18); color: #2f9e62; }
/* Son des vocaux : modules avec courbes */
.vx-mod { border-top: 1px solid var(--border); padding-top: .2rem; margin-top: .6rem; }
.vx-mod-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.vx-mod-v { position: sticky; top: 1rem; padding-top: .5rem; }
.vx-mod-v canvas { width: 100%; height: 190px; display: block; border-radius: 10px; border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: inset 0 1px 3px rgba(0,0,0,.08); }
.vx-form .set-row input[type=range] { width: 130px !important; }
.vx-test { position: sticky; top: .5rem; z-index: 5; }
@media (max-width: 1000px) { .vx-mod-in { grid-template-columns: 1fr; } .vx-mod-v { position: static; } }

/* Pastilles des espaces : blanc = non lus, rouge = mentions */
.count.wht, .dot.wht { background: #fff; color: #1d2329; box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.15); }
.count.men, .dot.men { background: var(--red); color: #fff; }
.count.wht + .count.men { margin-left: .2rem; }
.srv-dots { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.srv-dots:empty { display: none; }
@media (max-width: 720px) { .srv-item .dot.wht.has-men { display: none; } }
/* Barre de navigation : mentions des espaces et direct de la chaîne officielle */
.nav-men { display: inline-block; min-width: 1.15rem; margin-left: .3rem; padding: 0 .32rem; border-radius: 10px; background: var(--red); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.15rem; text-align: center; vertical-align: 1px; }
.nav-rec { display: inline-block; width: 8px; height: 8px; margin-left: .4rem; border-radius: 50%; background: #e5484d; vertical-align: 2px; box-shadow: 0 0 0 0 rgba(229,72,77,.6); animation: rec 1.6s ease-out infinite; }
@keyframes rec { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); opacity: 1; } 70% { box-shadow: 0 0 0 7px rgba(229,72,77,0); opacity: .75; } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); opacity: 1; } }
.dock a .nav-men { position: absolute; top: 2px; left: 55%; margin: 0; }
.dock a .nav-rec { position: absolute; top: 6px; left: 60%; margin: 0; }
.dock a { position: relative; }
@media (prefers-reduced-motion: reduce) { .nav-rec { animation: none; } }
.pyr-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .6rem 0 .4rem; }
.pyr-preview .target { display: flex; gap: .55rem; align-items: center; }
.pyr-preview .target > span:last-child { display: flex; flex-direction: column; }
@media (max-width: 720px) { .pyr-preview { grid-template-columns: 1fr; } }
/* Profil : onglets sous « Vue spatiale » */
.pf-tabs { position: sticky; top: .8rem; align-self: start; }
.pf-tabbar { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.1rem 0 .8rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }
.pf-tabbar button { font: inherit; font-size: .9rem; font-weight: 600; border: 1px solid transparent; background: transparent; color: var(--muted); padding: .38rem .8rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.pf-tabbar button:hover { background: var(--surface-2); color: var(--text); }
.pf-tabbar button[aria-selected="true"] { background: var(--text); color: var(--surface); }
.pf-tabbar .n { font-size: .72rem; opacity: .7; font-weight: 700; }
.pf-tabs-edit { margin-left: auto; letter-spacing: .1em; }
.pf-panel { min-height: 120px; }
.pf-panel > .card:first-child { margin-top: 0; }
.tabs-ed { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .35rem; user-select: none; }
.tabs-ed-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); touch-action: none; cursor: grab; }
.tabs-ed-row.fixed { cursor: default; background: var(--surface-2); }
.tabs-ed-row.dragging { cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,.18); border-color: var(--text); position: relative; z-index: 2; }
.tabs-ed-h { color: var(--muted); font-size: 1.05rem; width: 1.2rem; text-align: center; }
.follow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .5rem; margin-top: .5rem; }
.follow-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.follow-item > :first-child { min-width: 0; overflow: hidden; }
.about-text { margin-top: .6rem; line-height: 1.6; max-width: 70ch; }
.about-list { margin-top: .9rem; display: grid; gap: .45rem; }
.about-row { display: grid; grid-template-columns: 1.6rem 9.5rem 1fr; align-items: center; gap: .4rem; font-size: .92rem; }
.about-ico { text-align: center; }
@media (max-width: 560px) { .about-row { grid-template-columns: 1.6rem 1fr; } .about-row > span:last-child { grid-column: 2; } }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.video-card { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.vid-frame { aspect-ratio: 16 / 9; background: #0d1014; }
.vid-frame video, .vid-frame iframe { width: 100%; height: 100%; display: block; border: 0; background: #000; }
.vid-poster { width: 100%; height: 100%; border: 0; cursor: pointer; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.vid-poster span { width: 60px; height: 42px; border-radius: 12px; background: rgba(0,0,0,.72); color: #fff; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.vid-poster:hover span { transform: scale(1.08); background: #e5484d; }
.video-card figcaption { display: flex; gap: .5rem; align-items: center; padding: .55rem .7rem; font-size: .9rem; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg button { font: inherit; font-size: .88rem; border: 0; background: var(--surface); color: var(--muted); padding: .4rem .9rem; cursor: pointer; }
.seg button.on { background: var(--text); color: var(--surface); }
.profile-card { overflow: clip; overflow: visible; }
.profile-card > .pf-banner { border-radius: 14px 14px 0 0; overflow: hidden; }
/* Espaces en plein écran (façon Discord) */
.dsc-servers { position: relative; }
.dsc-max { display: flex; align-items: center; justify-content: center; width: 30px; height: 22px; margin: 0 auto .35rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.dsc-max:hover { color: var(--text); border-color: var(--text); }
.dsc-max svg { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
body.spaces-max .dsc-max svg { transform: rotate(180deg); }
body.spaces-max .dsc { position: fixed; left: 0; right: 0; bottom: 0; top: 0; height: auto; z-index: 80; border-top: 0; }
body.spaces-max { overflow: hidden; }
.dsc.dsc-up { animation: dscUp .5s cubic-bezier(.2,.8,.2,1) both; will-change: transform; }
.dsc.dsc-down { animation: dscDown .45s cubic-bezier(.4,0,.2,1) both; will-change: transform; }
@keyframes dscUp { from { transform: translateY(var(--dsc-from, 160px)); } to { transform: none; } }
@keyframes dscDown { from { transform: none; } to { transform: translateY(var(--dsc-from, 160px)); } }
/* Arborescence en plein écran */
.map-fs .fs-out { display: none; }
.map-wrap:fullscreen .map-fs .fs-in, body.map-max .map-fs .fs-in { display: none; }
.map-wrap:fullscreen .map-fs .fs-out, body.map-max .map-fs .fs-out { display: inline; }
.map-wrap:fullscreen { width: 100vw; height: 100vh; background: #0b0e13; }
body.map-max .map-wrap { position: fixed; inset: 0; height: auto !important; z-index: 80; }
body.map-max { overflow: hidden; }
.map-wrap:fullscreen .map-zoom, .map-wrap:fullscreen .map-legend, body.map-max .map-zoom, body.map-max .map-legend { bottom: 1rem !important; }
/* Plaquettes CG / JG / CE aux couleurs des pyramides */
.badge.pyr-badge { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, var(--pc), var(--pc2)); border-color: color-mix(in srgb, var(--pc2) 70%, #000); color: #fff; }
.badge.pyr-badge::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: var(--metal); pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 48%, rgba(255,255,255,0) 62%, rgba(0,0,0,.2) 100%), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.05) 1px 3px); }
/* pseudo en blanc dans les encarts de soutien colorés */
.pyr-tab .target { color: inherit !important; }
.pyr-tab .target strong, .pyr-tab .target strong * { color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; }
/* Choix des périphériques pendant un appel */
.dev-pop { position: fixed; z-index: 110; width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.25); padding: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.dev-row { display: flex; flex-direction: column; gap: .25rem; font-size: .84rem; font-weight: 600; }
.dev-row select { width: 100%; font-weight: 400; }

/* Colonne des espaces : logos seuls, le nom apparaît en surimpression au survol */
.dsc { grid-template-columns: 72px 250px minmax(0, 1fr) 230px; }
.dsc-servers { padding: .6rem .45rem; scrollbar-width: none; }
.dsc-servers::-webkit-scrollbar { display: none; }
.dsc-servers h2, .srv-item .srv-txt { display: none; }
.srv-item { justify-content: center; padding: .35rem; }
.srv-item img, .srv-item .srv-ini { width: 44px; height: 44px; border-radius: 14px; transition: border-radius .18s; }
.srv-item:hover img, .srv-item:hover .srv-ini, .srv-item[aria-current="true"] img, .srv-item[aria-current="true"] .srv-ini { border-radius: 10px; }
.srv-item[aria-current="true"] { box-shadow: inset 3px 0 0 var(--gold); background: transparent; }
.srv-dots { position: absolute; top: -2px; right: 0; }
.srv-dots .dot { position: static; font-size: .62rem; min-width: 16px; line-height: 16px; padding: 0 4px; }
.srv-tip { position: fixed; z-index: 130; pointer-events: none; background: #14181d; color: #fff; padding: .45rem .7rem; border-radius: 8px; font-size: .85rem; box-shadow: 0 6px 18px rgba(0,0,0,.3); max-width: 260px; opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s; }
.srv-tip.on { opacity: 1; transform: none; }
.srv-tip strong { display: block; }
.srv-tip span { font-size: .74rem; opacity: .75; }
.srv-tip::before { content: ''; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: #14181d; }
@media (max-width: 1180px) { .dsc { grid-template-columns: 72px 230px minmax(0, 1fr); } }
@media (max-width: 720px) { .dsc { grid-template-columns: minmax(0, 1fr); } .dsc-max { display: none; } }
/* Arborescence : commandes en haut (les panneaux « Amis en ligne » et EALIONE, en bas, ne les cachent plus) */
@media (min-width: 721px) {
  .map-zoom, body.app-mode .map-zoom { top: 4.1rem; bottom: auto !important; }
  .map-legend, body.app-mode .map-legend { top: 4.1rem; bottom: auto !important; }
  .map-feed, body.app-mode .map-feed { top: 4.1rem; bottom: auto; }
}
/* Fonds d'écran des espaces : voile clair le jour, sombre la nuit (lisibilité des messages) */
:root { --bg-veil: rgba(255,255,255,.62); }
[data-theme="dark"] { --bg-veil: rgba(10,12,16,.72); }
.dsc-main.has-bg { background: linear-gradient(var(--bg-veil), var(--bg-veil)), var(--space-bg); background-size: cover; background-position: center; }
.dsc-main.has-bg .msgs, .dsc-main.has-bg .dsc-top, .dsc-main.has-bg .composer, .dsc-main.has-bg .dsc-compose { background: transparent; }
.dsc-main.has-bg .dsc-top { backdrop-filter: blur(6px); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.bg-tile { --tile: var(--surface); height: 64px; border-radius: 10px; border: 2px solid var(--border); background: var(--tile); background-size: cover; cursor: pointer; position: relative; display: flex; align-items: flex-end; padding: 0; overflow: hidden; }
.bg-tile span { width: 100%; font-size: .72rem; font-weight: 600; padding: .2rem .35rem; background: rgba(0,0,0,.45); color: #fff; text-align: left; }
.bg-tile.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.bg-custom { margin-top: .7rem; padding: .7rem; border: 1px dashed var(--border); border-radius: 10px; }
.bg-col { display: inline-flex; align-items: center; gap: .15rem; }
.bg-col input[type=color] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.bg-col button { border: 0; background: none; color: var(--muted); cursor: pointer; }
.bg-preview { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bg-preview > div { height: 70px; border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; }
.bg-prev-light { background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), var(--space-bg, none); color: #1b2128; background-size: cover; }
.bg-prev-dark { background: linear-gradient(rgba(10,12,16,.72), rgba(10,12,16,.72)), var(--space-bg, none); color: #e8edf2; background-size: cover; }
.bgad-list { display: flex; flex-direction: column; gap: .45rem; }
.bgad-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 10px; }
.bgad-sw { width: 72px; height: 40px; border-radius: 8px; border: 1px solid var(--border); flex: none; }
.bgad-row input[type=color], #nb-c input[type=color] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
/* Images transparentes : logos, photos de profil, bannières */
.banner-img { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: inherit; }
.srv-item img, img.av { background: transparent; }
/* Création rapide de salons : ＋ sur l'onglet, clic droit */
.cat { position: relative; }
.cat-add { position: absolute; top: 7px; right: 2.1rem; width: 22px; height: 22px; border-radius: 6px; border: 0; background: rgba(255,255,255,.85); color: #1b2128; font-weight: 800; font-size: .85rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; display: flex; align-items: center; justify-content: center; }
.cat > .cat-toggle { position: relative; }
.cat:hover .cat-add, .cat-add:focus-visible { opacity: 1; }
@media (hover: none) { .cat-add { opacity: .9; } }
.cat-add:hover { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.ctx-menu { position: fixed; z-index: 9000; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.22); padding: .3rem; display: flex; flex-direction: column; }
.ctx-menu button { font: inherit; font-size: .88rem; text-align: left; border: 0; background: none; color: var(--text); padding: .5rem .7rem; border-radius: 7px; cursor: pointer; }
.ctx-menu button:hover { background: var(--surface-2); }
.qs-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; }
.qs-kind { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: .88rem; }
.qs-kind:has(input:checked) { border-color: var(--text); background: var(--surface-2); }
.qs-kind input { margin: 0; }
.mini-map { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .2rem; }
#mp-extra:empty { display: none; }
.mini-map #mp-extra { margin-top: .3rem; }
.mini-profile { max-height: calc(100vh - 16px); overflow-y: auto; }
/* Espace gelé : panneau à gauche, n'interrompt pas l'animation */
.side-offer { position: fixed; left: 1rem; top: 50%; z-index: 95; width: 330px; max-width: calc(100vw - 2rem); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.28); padding: 1rem; transform: translate(-120%, -50%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.side-offer.on { transform: translate(0, -50%); }
.pyr-logo { display: inline-block; vertical-align: -3px; margin-right: .3rem; object-fit: contain; flex: none; }
.btn .pyr-logo { vertical-align: -3px; }
.pyr-tab-name b .pyr-logo { margin-right: .25rem; vertical-align: -2px; }
.cfg-img-w { width: 44px; height: 44px; border-radius: 8px; border: 1px dashed var(--border); display: inline-flex; align-items: center; justify-content: center; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; }
.cfg-img { max-width: 40px; max-height: 40px; object-fit: contain; }
.pyr-logo { display: inline-block; vertical-align: -3px; margin-right: .3rem; object-fit: contain; flex: none; }
.pyr-tab-name b .pyr-logo { margin-right: .25rem; vertical-align: -2px; }
.cfg-img-w { width: 44px; height: 44px; border-radius: 8px; border: 1px dashed var(--border); display: inline-flex; align-items: center; justify-content: center; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; }
.cfg-img { max-width: 40px; max-height: 40px; object-fit: contain; }
/* « R-terminal » : relais terminal (blanc), doré métallisé quand il tient le poste clé de la pyramide */
.r-term { color: #fff; letter-spacing: .02em; font-size: 1rem; }
.gold-metal { background: linear-gradient(100deg, #8a6a2f 0%, #f3dc9a 22%, #c9a46a 40%, #fff2c4 52%, #b8863b 70%, #f1d48a 88%, #8a6a2f 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); animation: goldShine 5s linear infinite; }
@keyframes goldShine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .gold-metal { animation: none; } }
/* Arborescence : commandes en ligne tout en haut à droite, légende juste dessous (au-dessus du panneau « Amis en ligne ») */
@media (min-width: 721px) {
  .map-top { right: 15.8rem; }
  .map-zoom, body.app-mode .map-zoom { top: .75rem; right: .75rem; flex-direction: row; }
  .map-legend, body.app-mode .map-legend { top: 3.75rem; right: .75rem; }
  .map-feed, body.app-mode .map-feed { top: 7.4rem; }
}
.pf-duels { margin-top: .5rem; padding: .8rem .9rem; }
.duel-row { padding: .55rem 0; border-top: 1px solid var(--border); }
.duel-row:first-of-type { border-top: 0; }
.badge.live { background: #e5484d; color: #fff; }
/* Photo de profil sans anneau (une image transparente n'a aucun rond autour) */
.profile-id .av { border: 0; box-sizing: border-box; }
.profile-id .av:not([class*="frame-"]) { box-shadow: none; }
.mini-av { border: 0 !important; background: transparent !important; }
.pf-avatar.drop .av, .pf-banner.drop { outline: 3px dashed var(--gold); outline-offset: 3px; }
/* Recadrage */
.crop-modal { width: min(760px, 96vw); }
.crop-stage { position: relative; overflow: hidden; border-radius: 12px; touch-action: none; cursor: grab; user-select: none; margin: .5rem auto 0;
  background: repeating-conic-gradient(#d9dde2 0 25%, #f4f6f8 0 50%) 0 0 / 18px 18px; }
.crop-stage:active { cursor: grabbing; }
.crop-stage.av { width: min(360px, 80vw); aspect-ratio: 1; }
.crop-stage.ban { width: 100%; aspect-ratio: 6 / 1; }
.crop-stage img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; pointer-events: none; }
.crop-stage.av .crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgba(10,12,16,.45); outline: 2px solid rgba(255,255,255,.9); }
.crop-stage.ban .crop-mask { position: absolute; inset: 0; pointer-events: none; outline: 2px solid rgba(255,255,255,.9); outline-offset: -2px; border-radius: 12px; }
.crop-stage.drop { outline: 3px dashed var(--gold); outline-offset: 3px; }
.crop-tools { gap: .5rem; align-items: center; flex-wrap: wrap; }
.crop-tools input[type=range] { min-width: 160px; }
.crop-modal { max-width: 760px; }
.crop-stage { display: block; margin-left: auto !important; margin-right: auto !important; align-self: center; }
/* Photo de profil (profil et miniature) : jamais d'anneau, même avec un cadre de la boutique */
.profile-id .av, .mini-av .av { box-shadow: none !important; border: 0 !important; }
/* Liens intégrés */
.embeds { display: flex; flex-direction: column; gap: .5rem; margin-top: .55rem; max-width: 560px; }
.emb { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.emb iframe { display: block; width: 100%; height: 100%; border: 0; }
.emb.video { aspect-ratio: 16 / 9; background: #000; }
.emb.video.vertical { aspect-ratio: 9 / 16; max-width: 320px; }
.emb.video video { width: 100%; height: 100%; display: block; background: #000; }
.emb-poster { width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #000 center / cover no-repeat; position: relative; display: block; }
.emb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 14px; background: rgba(0,0,0,.72); color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.emb-poster:hover .emb-play { background: #e5484d; transform: translate(-50%, -50%) scale(1.06); }
.emb-src { position: absolute; left: .6rem; bottom: .5rem; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); padding: .1rem .45rem; border-radius: 6px; }
.emb.image img { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; }
.emb.social { background: var(--surface); }
.emb.tweet iframe { height: 560px; }
.emb.insta iframe { height: 640px; }
.emb.tiktok { max-width: 340px; } .emb.tiktok iframe { height: 740px; }
.emb.fb iframe { height: 560px; } .emb.fb.video { aspect-ratio: auto; } .emb.fb.video iframe { height: 420px; }
.emb.threads iframe { height: 560px; }
.emb.reddit iframe { height: 520px; }
.emb.audio.short iframe { height: 152px; } .emb.audio.tall iframe { height: 352px; }
.emb.audio { border: 0; background: transparent; border-radius: 12px; }
.emb.lp { display: flex; text-decoration: none; color: var(--text); background: var(--surface); min-height: 64px; }
.emb.lp:hover { border-color: var(--text); color: var(--text); }
.emb.lp.has-img { flex-direction: column; }
.lp-img { display: block; aspect-ratio: 1.91 / 1; background: var(--surface-3) center / cover no-repeat; border-bottom: 1px solid var(--border); }
.lp-txt { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem; min-width: 0; }
.lp-host { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: .3rem; text-transform: lowercase; }
.lp-host img { width: 14px; height: 14px; border-radius: 3px; }
.lp-t { font-weight: 700; font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-d { font-size: .82rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.emb.lp:not(.has-img):not(.plain) .lp-txt { padding: .6rem .8rem; }
.emb.lp.plain { flex-direction: column; padding: .55rem .8rem; gap: .1rem; } .emb.lp.plain .lp-t { font-weight: 500; font-size: .85rem; word-break: break-all; }
.emb.lp:empty, .emb.lp:not([data-done]) { min-height: 0; }
.bubble .embeds { max-width: 320px; margin-top: .4rem; }
.bubble .emb.tweet iframe, .bubble .emb.insta iframe, .bubble .emb.fb iframe, .bubble .emb.threads iframe, .bubble .emb.reddit iframe { height: 460px; }
.compose-link { padding-left: .6rem; padding-right: .6rem; }
/* Textes mis en forme (publications, commentaires, salons, messagerie, PIC) */
:root { --link: #1f7ae0; } [data-theme="dark"] { --link: #5aa9ff; }
.post-body a:not(.mention), .comment .body a:not(.mention), .msg .body a:not(.mention), .bubble a:not(.mention), .mail-body a, .md-body a, .msg-text a:not(.mention) { color: var(--link); text-decoration: none; }
.post-body a:not(.mention):hover, .comment .body a:not(.mention):hover, .msg .body a:not(.mention):hover, .bubble a:not(.mention):hover, .mail-body a:hover, .md-body a:hover { text-decoration: underline; }
.bubble.mine a { color: inherit; text-decoration: underline; }
.md-body { white-space: normal; }
.md-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: .05rem .35rem; }
.md-pre { margin: .35rem 0; padding: .6rem .8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; white-space: pre; font-size: .85rem; line-height: 1.45; max-width: 100%; }
.md-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.md-quote { margin: .3rem 0; padding: .1rem 0 .1rem .75rem; border-left: 4px solid var(--border); color: var(--text); white-space: normal; }
.md-list { margin: .25rem 0; padding-left: 1.4rem; white-space: normal; }
.md-list li { margin: .1rem 0; }
.md-h { font-weight: 800; line-height: 1.25; margin: .35rem 0 .15rem; white-space: normal; }
.md-h1 { font-size: 1.45rem; } .md-h2 { font-size: 1.22rem; } .md-h3 { font-size: 1.06rem; }
.md-sub { font-size: .78rem; color: var(--muted); }
.md-hr { border: 0; border-top: 1px solid var(--border); margin: .5rem 0; }
.md-spoiler { background: var(--text); color: transparent; border-radius: 4px; padding: 0 .2rem; cursor: pointer; transition: color .15s, background .15s; }
.md-spoiler * { visibility: hidden; }
.md-spoiler.shown { background: var(--surface-3); color: inherit; } .md-spoiler.shown * { visibility: visible; }
.fmt-pop { position: fixed; z-index: 150; display: flex; align-items: center; gap: 2px; padding: 3px; background: #15191e; border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.fmt-pop button { min-width: 30px; height: 30px; border: 0; background: transparent; color: #e8edf2; border-radius: 6px; cursor: pointer; font: inherit; font-size: .9rem; padding: 0 .4rem; }
.fmt-pop button:hover { background: rgba(255,255,255,.12); }
.fmt-sep { width: 1px; height: 18px; background: rgba(255,255,255,.18); margin: 0 3px; }
/* Zone d'écriture des salons */
.compose { align-items: flex-end; }
.compose-box { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.compose-box:focus-within { border-color: var(--border); }
.compose-box textarea:focus, .compose-box textarea:focus-visible { outline: none; box-shadow: none; }
.compose > .btn.sr-send { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.compose-row { display: flex; align-items: flex-end; gap: .15rem; padding: .2rem .3rem; }
.compose-row textarea { flex: 1; min-width: 0; resize: none; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: .5rem .4rem; line-height: 1.4; max-height: 260px; min-height: 2.3rem; }
.ctool { flex: none; width: 34px; height: 34px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; }
.ctool:hover { background: var(--surface-2); color: var(--text); }
.gif-ico { font-size: .62rem; font-weight: 800; border: 1.5px solid currentColor; border-radius: 4px; padding: 0 .2rem; line-height: 1.25; }
/* Pièces jointes */
.atts { display: flex; flex-direction: column; gap: .4rem; margin-top: .45rem; max-width: 560px; white-space: normal; }
.att-imgs { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; }
.att-imgs.n1 { grid-template-columns: 1fr; max-width: 440px; }
.att-imgs.n2 { grid-template-columns: 1fr 1fr; }
.att-imgs.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .att-imgs.n3 .att-img:first-child { grid-row: span 2; }
.att-imgs.n4 { grid-template-columns: 1fr 1fr; }
.att-img { border: 0; padding: 0; background: var(--surface-3); cursor: zoom-in; display: block; min-height: 90px; max-height: 420px; overflow: hidden; }
.att-imgs:not(.n1) .att-img { aspect-ratio: 1; }
.att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-imgs.n1 .att-img img { object-fit: contain; max-height: 420px; background: var(--surface-2); }
.att-media video { width: 100%; max-height: 420px; border-radius: 12px; background: #000; display: block; }
.att-audio { display: flex; flex-direction: column; gap: .3rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: .85rem; }
.att-audio audio { width: 100%; }
.att-file { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; max-width: 420px; }
.att-file:hover { border-color: var(--text); color: var(--text); }
.att-fi { font-size: 1.5rem; flex: none; }
.att-fn { display: flex; flex-direction: column; min-width: 0; flex: 1; } .att-fn strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.att-dl { color: var(--muted); }
.att-tray { display: flex; flex-wrap: wrap; gap: .4rem; padding: .45rem .5rem 0; }
.att-tray[hidden] { display: none; }
.att-chip { position: relative; display: flex; align-items: center; gap: .4rem; max-width: 220px; padding: .3rem .5rem; padding-right: 1.6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: .8rem; }
.att-chip img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.att-chip .att-fi { font-size: 1.2rem; }
.att-cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.att-pg { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.att-pg b { display: block; height: 100%; background: var(--text); transition: width .1s; }
.att-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: .65rem; cursor: pointer; }
.composer.drop-on, .compose.drop-on .compose-box, .cw-form.drop-on { outline: 2px dashed var(--gold); outline-offset: 3px; }
.cw-form .ctool { width: 30px; height: 30px; font-size: 1rem; }
.bubble .atts { max-width: 280px; }
/* Sélecteur émojis / GIF / stickers */
.pick-pop { position: fixed; z-index: 140; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.28); overflow: hidden; }
.pick-tabs { display: flex; gap: .25rem; padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
.pick-tabs button { flex: 1; border: 0; background: transparent; padding: .4rem; border-radius: 8px; font: inherit; font-size: .85rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.pick-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--text); }
.pick-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.emo-cats { display: flex; gap: 2px; padding: .3rem .4rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.emo-cats button { border: 0; background: none; font-size: 1.1rem; padding: .2rem .3rem; border-radius: 6px; cursor: pointer; }
.emo-cats button:hover { background: var(--surface-2); }
.emo-grid { flex: 1; overflow-y: auto; padding: .2rem .5rem .6rem; }
.emo-h { position: sticky; top: 0; background: var(--surface); margin: 0; padding: .4rem 0 .2rem; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.emo-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.emo-set button { border: 0; background: none; font-size: 1.45rem; height: 38px; border-radius: 8px; cursor: pointer; line-height: 1; }
.emo-set button:hover { background: var(--surface-2); transform: scale(1.12); }
.gif-q { margin: .5rem .5rem .3rem; width: calc(100% - 1rem); }
.gif-grid { flex: 1; overflow-y: auto; padding: 0 .5rem .5rem; columns: 2; column-gap: .4rem; }
.gif-it { display: block; width: 100%; margin: 0 0 .4rem; border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface-3); break-inside: avoid; }
.gif-it img { width: 100%; display: block; }
.gif-it:hover { outline: 2px solid var(--text); }
.gif-attr { margin: 0; padding: .25rem .6rem .4rem; text-align: right; }
.stk-grid { flex: 1; overflow-y: auto; padding: .6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; align-content: start; }
.stk-it { border: 1px solid transparent; background: none; border-radius: 10px; padding: .3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 92px; }
.stk-it:hover { border-color: var(--border); background: var(--surface-2); }
.stk-it img { max-width: 100%; max-height: 96px; }
/* stickers ODANIE intégrés : grand émoji + étiquette en relief */
.stk { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; transform: rotate(-3deg); }
.stk-e { font-size: 3rem; line-height: 1; filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.stk-l { font-weight: 900; font-size: .78rem; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #2d3a48, #5b6b7d); padding: .12rem .55rem; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); white-space: nowrap; }
.md-stk { display: inline-block; margin: .3rem .2rem; }
.md-stk .stk-e { font-size: 4rem; } .md-stk .stk-l { font-size: .9rem; }
.stk-img { max-width: 160px; max-height: 160px; display: block; }
.md-gif { display: block; max-width: min(320px, 100%); max-height: 300px; border-radius: 10px; margin: .3rem 0; }
.stk-grid.adm { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .stk-grid.adm .stk-it { position: relative; border-color: var(--border); }
/* Colonnes des espaces : largeurs réglables */
.dsc { grid-template-columns: 72px var(--w-sal, 260px) minmax(0, 1fr) var(--w-mem, 290px); }
.dsc-side, .dsc-members { position: relative; }
.col-rs { position: absolute; top: 0; bottom: 0; width: 8px; z-index: 6; cursor: col-resize; touch-action: none; }
.dsc { position: relative; } .col-rs[data-rs=sal] { left: calc(72px + var(--w-sal, 260px) - 4px); } .col-rs[data-rs=mem] { right: calc(var(--w-mem, 290px) - 4px); }
@media (max-width: 1180px) { .col-rs[data-rs=mem] { display: none; } }
.col-rs::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.col-rs:hover::after, .col-rs.on::after { background: var(--gold); }
body.col-resizing { cursor: col-resize; user-select: none; }
@media (max-width: 1180px) { .dsc { grid-template-columns: 72px var(--w-sal, 230px) minmax(0, 1fr); } }
@media (max-width: 720px) { .dsc { grid-template-columns: minmax(0, 1fr); } .col-rs { display: none; } }
/* Bannière de l'espace */
.dsc-banner { height: 120px; background: center / cover no-repeat; flex: none; position: relative; }
.dsc-banner.sm { height: 84px; margin: -.4rem 0 .4rem; }
.dsc-head.on-banner { border-top: 0; }
.crop-stage.ban.sp { aspect-ratio: 12 / 5; max-width: 560px; }
/* Micro / son en bas de la colonne des espaces */
.dsc-servers { display: flex; flex-direction: column; }
.srv-foot { position: sticky; bottom: 0; margin-top: auto; padding: .45rem 0 3.1rem; /* au-dessus du dock EALIONE */ display: flex; flex-direction: column; align-items: center; gap: .3rem; background: linear-gradient(transparent, var(--surface-2) 30%); }
.vs-btn { width: 40px; height: 36px; border: 0; border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.vs-btn:hover { background: var(--surface-3); }
.vs-btn.off { color: #e5484d; background: rgba(229,72,77,.12); }
@media (max-width: 720px) { .srv-foot { position: static; flex-direction: row; margin: 0 0 0 auto; padding: 0; background: none; } }

/* ---- Fond d'écran sur tout l'espace (colonnes en verre dépoli) ---- */
.dsc.has-bg { background: linear-gradient(var(--bg-veil), var(--bg-veil)), var(--space-bg); background-size: cover; background-position: center; background-attachment: local; }
.dsc.has-bg .dsc-main { background: transparent; }
.dsc.has-bg .dsc-main .msgs, .dsc.has-bg .dsc-main .compose { background: transparent; }
.dsc.has-bg .dsc-main .dsc-top { backdrop-filter: blur(6px); background: color-mix(in srgb, var(--surface) 50%, transparent); }
.dsc.has-bg .dsc-servers, .dsc.has-bg .dsc-side, .dsc.has-bg .dsc-members { background: color-mix(in srgb, var(--surface-2) 52%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dsc.has-bg .dsc-head { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.dsc.has-bg .dsc-me { background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.dsc.has-bg .srv-foot { background: linear-gradient(transparent, color-mix(in srgb, var(--surface-2) 60%, transparent) 30%); }
.dsc.has-bg .member .st i { border-color: transparent; }

/* ---- Liste des membres : pseudos en ligne en gras, hors ligne estompés ---- */
.member.online .mem-n { font-weight: 700; }
.member.offline { opacity: .55; }
.member.offline:hover { opacity: 1; }

/* ---- Messages : barre d'actions (répondre, ⌄), réponses, transferts ---- */
.msg { cursor: default; }
.msg-tools { position: absolute; right: .6rem; top: -.85rem; display: flex; gap: 1px; padding: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 3; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; pointer-events: auto; }
.msg-tools button { border: 0; background: none; color: var(--muted); width: 30px; height: 28px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.msg-tools button:hover { background: var(--surface-2); color: var(--text); }
@media (hover: none) { .msg-tools { opacity: .85; pointer-events: auto; top: .1rem; } }
.msg.grouped .msg-tools { top: -.95rem; }
.msg.replying { background: color-mix(in srgb, #5b8def 14%, transparent); box-shadow: inset 3px 0 0 #5b8def; }
.msg.flash { animation: msgFlash 1.8s ease-out; }
@keyframes msgFlash { 0%, 30% { background: color-mix(in srgb, #f0b429 30%, transparent); } 100% { background: transparent; } }
.msg-ref { display: flex; align-items: center; gap: .35rem; max-width: 100%; margin: 0 0 .15rem -6px; padding: 0 .2rem; border: 0; background: none; font: inherit; font-size: .8rem; color: var(--muted); cursor: pointer; position: relative; text-align: left; min-width: 0; }
.msg-ref::before { content: ''; position: absolute; left: -32px; top: 50%; width: 28px; height: 13px; border-left: 2px solid var(--border-strong, #b9c0c8); border-top: 2px solid var(--border-strong, #b9c0c8); border-top-left-radius: 7px; }
.msg-ref .av, .msg-ref img { flex: none; }
.msg-ref strong { font-weight: 600; white-space: nowrap; }
.msg-ref .ref-x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msg-ref:hover .ref-x { color: var(--text); }
.msg-ref.deleted { cursor: default; font-style: italic; }
.msg-fwd { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--muted); margin-bottom: .15rem; flex-wrap: wrap; }
.msg-fwd a { color: var(--link, #2f7de1); }
.fwd-body { border-left: 3px solid var(--border-strong, #b9c0c8); padding-left: .7rem; }
.ctx-menu button.danger { color: #d93b41; }
.ctx-menu button.danger:hover { background: rgba(217,59,65,.1); }
.reply-bar { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: 10px 10px 0 0; font-size: .82rem; color: var(--muted); }
.reply-bar[hidden] { display: none; }
.reply-bar .rb-ico { display: inline-flex; color: #5b8def; }
.reply-bar .rb-txt { flex: 1; min-width: 0; display: flex; gap: .45rem; align-items: baseline; overflow: hidden; }
.reply-bar .rb-txt strong { color: var(--text); white-space: nowrap; }
.reply-bar .rb-x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.reply-bar .rb-close { border: 0; background: var(--surface-3); color: var(--text); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: .75rem; flex: none; }
.fwd-modal { max-width: 520px; }
.fwd-prev { margin-top: .6rem; padding: .5rem .7rem; border-left: 3px solid var(--border-strong, #b9c0c8); background: var(--surface-2); border-radius: 0 8px 8px 0; max-height: 5.5em; overflow: hidden; }
.fwd-list { max-height: 320px; overflow-y: auto; margin-top: .5rem; display: flex; flex-direction: column; gap: 1px; }
.fwd-srv { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .6rem .3rem .2rem; }
.fwd-srv img { width: 18px; height: 18px; border-radius: 5px; object-fit: contain; }
.fwd-sal { display: flex; align-items: center; gap: .45rem; border: 0; background: none; font: inherit; color: var(--text); padding: .45rem .6rem; border-radius: 7px; cursor: pointer; text-align: left; }
.fwd-sal:hover { background: var(--surface-2); }
.fwd-sal .xs { opacity: 0; } .fwd-sal:hover .xs { opacity: 1; }

/* ---- Rôles classés par glisser ---- */
.roles-sort { display: flex; flex-direction: column; gap: 2px; margin-top: .4rem; user-select: none; touch-action: pan-y; }
.roles-sort .grip { color: var(--muted); cursor: grab; font-size: .8rem; opacity: .6; }
.roles-sort .role-item { cursor: grab; }
.rc-head { display: flex; align-items: center; gap: .35rem; padding: .45rem .45rem .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: grab; border-top: 1px solid var(--border); margin-top: .3rem; }
.rc-head:first-child { border-top: 0; margin-top: 0; }
.rc-head.loose { cursor: default; }
.roles-sort .dragging { opacity: .55; background: var(--surface-3); border-radius: 6px; }
.roles-sort .role-item.dragging, .roles-sort .rc-head.dragging { cursor: grabbing; }
.msg.has-ref > :first-child { margin-top: 1.3rem; }
.msg-ref::before { left: -24px; width: 20px; height: 12px; top: 50%; }

/* ---- Transparence réglable (Administration › Espaces) : colonnes et zone de discussion ---- */
.dsc.has-bg { background: var(--space-bg); background-size: cover; background-position: center; }
.dsc.has-bg .dsc-servers, .dsc.has-bg .dsc-side, .dsc.has-bg .dsc-members { background: color-mix(in srgb, var(--surface-2) var(--a-cols, 35%), transparent); }
.dsc.has-bg .dsc-head { background: color-mix(in srgb, var(--surface) var(--a-cols, 35%), transparent); }
.dsc.has-bg .dsc-me { background: color-mix(in srgb, var(--surface-3) calc(var(--a-cols, 35%) + 15%), transparent); }
.dsc.has-bg .cat[data-open="true"] .cat-salons { background: color-mix(in srgb, var(--surface) var(--a-cols, 35%), transparent); border-color: color-mix(in srgb, var(--border) 60%, transparent); }
.dsc.has-bg .cat-salons .salon-link[aria-current="true"] { background: color-mix(in srgb, var(--surface-3) 75%, transparent); }
.dsc.has-bg .srv-foot { background: none; }
.dsc.has-bg .dsc-main { background: color-mix(in srgb, var(--surface) var(--a-chat, 45%), transparent); }
.dsc.has-bg .dsc-main .dsc-top { background: color-mix(in srgb, var(--surface) calc(var(--a-chat, 45%) + 20%), transparent); }
.dsc.has-bg .member:hover { background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.dsc.has-bg .msg:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* ---- Émojis en grand (ligne d'émojis seuls) et émojis personnalisés ---- */
.md-jumbo { font-size: 2.75rem; line-height: 1.2; margin: .1rem 0; }
.md-jumbo .cemo { width: 3rem; height: 3rem; }
.cemo { width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -.3em; display: inline-block; }

/* ---- Réactions ---- */
.reacts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.reacts:empty { display: none; }
.react { display: inline-flex; align-items: center; gap: .3rem; height: 26px; padding: 0 .45rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: .95rem; cursor: pointer; line-height: 1; transition: border-color .12s, background .12s; }
.react:hover { border-color: var(--muted); }
.react .rn { font-size: .78rem; font-weight: 700; color: var(--muted); min-width: .6em; }
.react.me { background: color-mix(in srgb, #5b8def 16%, var(--surface)); border-color: #5b8def; }
.react.me .rn { color: #3f6fd8; }
.react .cemo { width: 1.15rem; height: 1.15rem; vertical-align: middle; }
.react.add { opacity: 0; color: var(--muted); padding: 0 .35rem; transition: opacity .12s; }
.msg:hover .react.add, .react.add:focus-visible { opacity: 1; }
.react.pop { animation: reactPop .42s cubic-bezier(.3, 1.6, .5, 1); }
.react.bump .rn { display: inline-block; animation: reactBump .35s ease-out; }
@keyframes reactPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
@keyframes reactBump { 0% { transform: translateY(-60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .react.pop, .react.bump .rn { animation: none; } }
.msg-tools [data-mreact] svg { width: 17px; height: 17px; }
.emo-set button .cemo { width: 26px; height: 26px; vertical-align: middle; }
.emo-cats button .cemo { width: 20px; height: 20px; }
[data-theme="dark"] .dsc.has-bg { background: linear-gradient(rgba(6,8,12,.5), rgba(6,8,12,.5)), var(--space-bg); background-size: cover; background-position: center; }
.emo-cat-row { display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .3rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.emo-cat-row .grip { cursor: grab; color: var(--muted); padding-top: .45rem; user-select: none; touch-action: none; }
.emo-cat-row.dragging { opacity: .6; background: var(--surface-2); }
.emo-ta { margin-top: .35rem; font-size: 1.25rem; line-height: 1.5; resize: vertical; }
.cemo-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.cemo-it { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; width: 96px; }
.cemo-it img { width: 40px; height: 40px; object-fit: contain; }
.cemo-it code { font-size: .7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cemo-it .att-x { position: absolute; top: 2px; right: 2px; }

/* =====================================================================
   Votes du CG — sur le direct : façon jeu télévisé, version « tech »
   ===================================================================== */
.tv-screen { container-type: inline-size; }
.vov { position: absolute; inset: 0; pointer-events: none; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; font-family: inherit; --vov-fs: clamp(10px, 2.15cqw, 19px); font-size: var(--vov-fs); color: #eaf2ff; }
.vov > * { pointer-events: auto; }
.vov-top { align-self: center; width: min(78%, 760px); margin-top: 2.2%; padding: .45em 1.6em .4em; background: linear-gradient(180deg, rgba(14,26,64,.78), rgba(4,9,28,.82)); clip-path: polygon(1.1em 0, calc(100% - 1.1em) 0, 100% 50%, calc(100% - 1.1em) 100%, 1.1em 100%, 0 50%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: vovDown .5s cubic-bezier(.2,1.2,.4,1); }
.vg { display: flex; align-items: center; gap: .7em; }
.vg-s { font-weight: 800; letter-spacing: .06em; white-space: nowrap; font-size: .9em; }
.vg-s b { font-variant-numeric: tabular-nums; font-size: 1.15em; }
.vg-s.y { color: #5ff0a8; } .vg-s.n { color: #ff7b8a; }
.vg-bar { position: relative; flex: 1; height: .8em; border-radius: 99px; overflow: hidden; display: flex; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(143,211,255,.35); }
.vg-bar i { display: block; height: 100%; transition: width .8s cubic-bezier(.3,1,.4,1); }
.vg-bar i.y { background: linear-gradient(90deg, #0f9d63, #42e39b); box-shadow: 0 0 10px rgba(66,227,155,.6); }
.vg-bar i.n { background: linear-gradient(90deg, #e2394f, #9e1830); box-shadow: 0 0 10px rgba(226,57,79,.5); }
.vg-bar i.c0 { background: linear-gradient(90deg, #f7b733, #fc9a1a); } .vg-bar i.c1 { background: linear-gradient(90deg, #36c6f4, #2483ff); } .vg-bar i.cx { background: rgba(200,215,240,.35); border-left: 1px solid rgba(4,9,28,.6); }
.vg-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; opacity: .85; }
.vg.multi { flex-direction: column; align-items: stretch; gap: .3em; }
.vg.multi .vg-bar { flex: none; }
.vg-leg { display: flex; gap: 1em; justify-content: center; font-size: .82em; flex-wrap: wrap; }
.vg-leg em { font-style: normal; font-weight: 800; color: #ffd36b; margin-right: .2em; }
.vg-leg .c1 em { color: #7fd8ff; } .vg-leg b { font-variant-numeric: tabular-nums; } .vg-leg .more { opacity: .7; }
.vg-meta { text-align: center; font-size: .7em; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-top: .15em; }
.vov-bottom { margin: 0 2.5% 2.6%; display: flex; flex-direction: column; gap: .5em; animation: vovUp .55s cubic-bezier(.2,1.2,.4,1); }
.vov-q { position: relative; display: flex; align-items: center; gap: .8em; padding: .7em 2.2em; min-height: 2.6em; background: linear-gradient(180deg, rgba(20,38,92,.86), rgba(5,11,34,.9)); clip-path: polygon(1.5em 0, calc(100% - 1.5em) 0, 100% 50%, calc(100% - 1.5em) 100%, 1.5em 100%, 0 50%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.vov-q::after { content: ''; position: absolute; inset: 0; clip-path: inherit; background: linear-gradient(90deg, transparent, rgba(126,200,255,.18), transparent); background-size: 200% 100%; animation: vovSheen 4s linear infinite; pointer-events: none; }
.vov-tag { font-size: .68em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffd36b; white-space: nowrap; padding: .2em .6em; border: 1px solid rgba(255,211,107,.5); border-radius: 4px; }
.vov-qt { flex: 1; font-weight: 700; font-size: 1.12em; line-height: 1.25; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vov-clock { font-variant-numeric: tabular-nums; font-weight: 800; color: #0b1430; background: radial-gradient(circle at 35% 30%, #fff3c4, #f7b733); border-radius: 99px; padding: .25em .7em; box-shadow: 0 0 12px rgba(247,183,51,.6); white-space: nowrap; }
.vov-ans { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .45em 1.2em; filter: drop-shadow(0 0 1px #9fdcff) drop-shadow(0 0 6px rgba(80,170,255,.35)); }
.vov-ans::before { content: ''; position: absolute; left: -3%; right: -3%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, rgba(159,220,255,.75) 12%, rgba(159,220,255,.75) 88%, transparent); z-index: -1; }
.vov-a { position: relative; display: flex; align-items: center; gap: .55em; width: 100%; min-height: 2.5em; padding: .55em 2em; border: 0; font: inherit; font-weight: 700; color: #eaf2ff; text-align: left; cursor: pointer; background: linear-gradient(180deg, rgba(22,40,96,.9), rgba(6,12,38,.92)); clip-path: polygon(1.3em 0, calc(100% - 1.3em) 0, 100% 50%, calc(100% - 1.3em) 100%, 1.3em 100%, 0 50%); transition: background .2s, color .2s, transform .12s; }
.vov-a:hover { background: linear-gradient(180deg, rgba(40,70,150,.95), rgba(12,24,70,.95)); }
.vov-a:active { transform: scale(.98); }
.vov-a:focus-visible { outline: none; background: linear-gradient(180deg, rgba(50,90,180,.95), rgba(16,30,86,.95)); }
.vov-l { color: #ffd36b; font-weight: 800; }
.vov-a.yes .vov-l { color: #42e39b; } .vov-a.no .vov-l { color: #ff6b7d; }
.vov-a.yes, .vov-a.no { justify-content: center; font-size: 1.15em; letter-spacing: .12em; }
.vov-a.sel { background: linear-gradient(180deg, #ffcf5a, #f08a00); color: #1a1100; text-shadow: none; }
.vov-a.sel .vov-l { color: #1a1100; }
.vov-a.yes.sel { background: linear-gradient(180deg, #6ff5b4, #0e9a5e); } .vov-a.no.sel { background: linear-gradient(180deg, #ff8c9a, #c3203a); color: #fff; } .vov-a.no.sel .vov-l { color: #fff; }
.vov-a.via { background: linear-gradient(180deg, rgba(40,150,200,.9), rgba(10,70,120,.92)); }
.vov-a.via::after { content: 'relais'; position: absolute; right: 2.2em; top: 50%; transform: translateY(-50%); font-size: .6em; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.vov-dd { position: relative; grid-column: 1 / -1; }
.vov-a.dd { justify-content: center; }
.vov-car { margin-left: auto; transition: transform .2s; }
.vov-dd.open .vov-car { transform: rotate(180deg); }
.vov-menu { position: absolute; left: 6%; right: 6%; bottom: calc(100% + .5em); display: none; grid-template-columns: 1fr 1fr; gap: .4em .9em; padding: .2em 0; }
.vov-dd.open .vov-menu { display: grid; animation: vovUp .3s ease-out; }
.vov-mine { align-self: center; font-size: .78em; padding: .3em 1em; border-radius: 99px; background: rgba(4,9,28,.72); color: #d5e4ff; backdrop-filter: blur(4px); text-align: center; }
.vov-mine strong { color: #ffd36b; }
.vov-follow { border: 0; background: none; color: #8fd3ff; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.vov-res { align-self: center; font-weight: 800; font-size: 1.25em; padding: .5em 2.5em; color: #1a1100; background: linear-gradient(180deg, #ffe08a, #f5a524); clip-path: polygon(1.2em 0, calc(100% - 1.2em) 0, 100% 50%, calc(100% - 1.2em) 100%, 1.2em 100%, 0 50%); animation: vovPop .5s cubic-bezier(.2,1.6,.4,1); }
.vov.closed .vov-top { display: none; }
/* Vote nuancé −5 à +5 (sur le direct) */
.vov-nu { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(11, 1fr); gap: .3em; }
.vov-a.nu { justify-content: center; padding: .55em 0; font-size: 1.05em; font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: center; }
.vov-a.nu.neg { color: #ff8a98; } .vov-a.nu.pos { color: #6ff5b4; } .vov-a.nu.zero { color: #d5e4ff; }
.vov-a.nu.sel { color: #1a1100; } .vov-a.nu.via { color: #fff; } .vov-a.nu.via::after { display: none; }
.vov-nu-leg { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: .68em; letter-spacing: .08em; text-transform: uppercase; opacity: .75; padding: 0 .4em; }
.vov-nu-leg span:first-child { color: #ff8a98; } .vov-nu-leg span:last-child { color: #6ff5b4; }
@keyframes vovUp { from { transform: translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vovDown { from { transform: translateY(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vovPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes vovSheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@container (max-width: 520px) { .vov-tag, .vg-meta { display: none; } .vov-ans { gap: .3em .6em; } .vov-a { padding: .45em 1.5em; } .vov-mine { font-size: .9em; } }
@media (prefers-reduced-motion: reduce) { .vov-top, .vov-bottom, .vov-res, .vov-q::after { animation: none; } }

/* ---- Fenêtre des votes à délai de réflexion (en haut à gauche) ---- */
.vote-float { position: fixed; left: 12px; top: calc(var(--app-top, 158px) + 10px); width: 330px; max-width: calc(100vw - 24px); z-index: 70; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; animation: vovDown .4s ease-out; }
.vote-float .vf-head { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.vote-float .vf-title { flex: 1; display: flex; align-items: center; gap: .35rem; border: 0; background: none; font: inherit; font-size: .88rem; color: var(--text); cursor: pointer; text-align: left; padding: 0; }
.vote-float .vf-chev { margin-left: auto; transition: transform .2s; color: var(--muted); }
.vote-float.min .vf-chev { transform: rotate(-90deg); }
.vote-float.min .vf-body { display: none; }
.vote-float.min { width: auto; }
.vote-float .vf-nav { display: inline-flex; align-items: center; gap: .15rem; }
.vote-float .vf-nav button { border: 0; background: var(--surface-3); border-radius: 6px; width: 22px; height: 22px; cursor: pointer; color: var(--text); }
.vote-float .vf-body { padding: .6rem .7rem .7rem; max-height: 60vh; overflow-y: auto; }
body.spaces-max .vote-float, body.map-max .vote-float, :fullscreen ~ .vote-float { display: none; }
@media (max-width: 720px) { .vote-float { top: auto; bottom: 70px; } }

/* ---- Cartes de vote (thème du site) ---- */
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.vote-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; }
.vote-float .vote-card { border: 0; padding: 0; background: none; }
.vote-q { font-weight: 700; font-size: 1.05rem; margin: .5rem 0 .6rem; line-height: 1.3; }
.vote-card.compact .vote-q { font-size: .95rem; }
.vt-ans { display: flex; flex-direction: column; gap: .35rem; }
.vt-ans.bin { flex-direction: row; }
.vt-ans.bin .vt-a { flex: 1; justify-content: center; }
.vt-a { position: relative; display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; overflow: hidden; text-align: left; transition: border-color .15s; }
.vt-a > i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--muted) 16%, transparent); transition: width .6s ease; z-index: 0; }
.vt-a > span { position: relative; z-index: 1; }
.vt-a .vt-l { font-weight: 800; color: var(--muted); }
.vt-a .vt-t { flex: 1; font-weight: 600; }
.vt-a .vt-p { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.vt-a:hover { border-color: var(--text); }
.vt-a.yes .vt-t { color: #15935c; } .vt-a.no .vt-t { color: #cf2f45; }
.vt-a.sel { border-color: #15935c; box-shadow: 0 0 0 2px color-mix(in srgb, #22b36a 40%, transparent); }
.vt-a.sel > i { background: color-mix(in srgb, #22b36a 28%, transparent); }
.vt-a.via { border-color: #e8700c; border-style: dashed; }
.vt-a.via > i { background: color-mix(in srgb, #f5a524 26%, transparent); }
.vres { display: flex; flex-direction: column; gap: .3rem; margin: .4rem 0; }
/* Vote nuancé : boutons avec répartition, histogramme des résultats */
.vt-nu { display: grid; grid-template-columns: repeat(11, 1fr); gap: .25rem; }
.vt-n { position: relative; height: 2.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; overflow: hidden; padding: 0; }
.vt-n > i { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--muted) 18%, transparent); transition: height .6s ease; }
.vt-n > span { position: relative; z-index: 1; }
.vt-n.neg { color: #cf2f45; } .vt-n.pos { color: #15935c; }
.vt-n.neg > i { background: color-mix(in srgb, #cf2f45 18%, transparent); } .vt-n.pos > i { background: color-mix(in srgb, #15935c 18%, transparent); }
.vt-n:hover { border-color: var(--text); }
.vt-n.sel { border-color: #15935c; box-shadow: 0 0 0 2px color-mix(in srgb, #22b36a 40%, transparent); }
.vt-n.via { border-color: #e8700c; border-style: dashed; }
.vt-nu-leg { display: flex; justify-content: space-between; gap: .5rem; margin-top: .3rem; }
.vnu-hist { display: grid; grid-template-columns: repeat(11, 1fr); gap: .25rem; align-items: end; margin: .4rem 0; }
.vnu-col { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .75rem; font-variant-numeric: tabular-nums; }
.vnu-b { width: 100%; height: 56px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.vnu-b i { display: block; width: 100%; background: var(--muted); transition: height .6s ease; }
.vnu-col.neg .vnu-b i { background: #cf2f45; } .vnu-col.pos .vnu-b i { background: #15935c; }
.vnu-col.neg .vnu-l { color: #cf2f45; } .vnu-col.pos .vnu-l { color: #15935c; }
.vnu-l { font-weight: 700; } .vnu-n { color: var(--muted); }
.vres-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 92px; gap: .5rem; align-items: center; font-size: .86rem; }
.vres-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vres-b { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.vres-b i { display: block; height: 100%; background: var(--muted); border-radius: 99px; }
.vres-row.win .vres-l { font-weight: 800; } .vres-row.win .vres-b i { background: linear-gradient(90deg, #f7b733, #e38b00); }
.vres-row.next .vres-b i { background: #2a9fd6; }
.vres-p { text-align: right; font-variant-numeric: tabular-nums; }
.vote-arch .vote-q { margin: .4rem 0; }

/* ---- Interface du CG ---- */
.cg-grid { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .cg-grid { grid-template-columns: 1fr; } }
.cg-form-card { position: sticky; top: calc(var(--app-top, 158px) + 10px); }
.cg-h { font-size: .95rem; margin: 1rem 0 .4rem; }
.cg-h:first-child { margin-top: 0; }
.cg-item { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: .5rem; }
.cg-acts { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: .45rem .8rem; font-size: .88rem; font-weight: 600; color: var(--muted); }
.seg input:checked + span { background: var(--text); color: var(--surface); }
.seg input:focus-visible + span { outline: 2px solid #5b8def; outline-offset: -2px; }
.vopt-list { display: flex; flex-direction: column; gap: .35rem; }
.vopt { display: flex; gap: .4rem; align-items: center; }
.vopt-l { width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--surface-3); font-weight: 800; font-size: .8rem; flex: none; }
.vopt .input { flex: 1; }
.cg-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); z-index: 150; background: var(--bg, var(--surface)); border-left: 1px solid var(--border); box-shadow: -14px 0 36px rgba(0,0,0,.2); padding: 1rem 1.1rem; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; }
.cg-drawer.on { transform: none; }
.cg-drawer .cg-grid { grid-template-columns: 1fr; }
.cg-drawer .cg-form-card { position: static; }
.vov-menu { left: 4%; right: 4%; padding: .7em .9em; background: rgba(4,9,28,.9); border: 1px solid rgba(159,220,255,.45); border-radius: .8em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); filter: none; }
.vov-bottom:has(.vov-dd.open) .vov-q { visibility: hidden; }
.vov-a.dd.via::after, .vov-menu .vov-a.via::after { content: none; }
.vov.closed { justify-content: flex-end; }

/* =====================================================================
   Verre (glassmorphism) — réglé dans Administration › Apparence (verre)
   ===================================================================== */
/* Barre de défilement fine, sans flèches (tout le site) */
::-webkit-scrollbar { width: var(--sb-w, 8px); height: var(--sb-w, 8px); background: transparent; }
::-webkit-scrollbar-track { background: var(--sb-track, transparent); border-radius: var(--sb-r, 8px); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb, rgba(138,148,163,.55)); border-radius: var(--sb-r, 8px); }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-h, rgba(138,148,163,.85)); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb, rgba(138,148,163,.55)) var(--sb-track, transparent); } }

/* Mentions : couleur (ou dégradé) choisie par l'administration */
.msg.pinged { background: var(--men-bg, linear-gradient(90deg, rgba(245,197,66,.3), rgba(245,197,66,.1))); box-shadow: inset 3px 0 0 var(--men-bar, #f5c542); }

/* Messages des espaces : une plaque de verre par message */
body.glass-msg .dsc .msgs { display: flex; flex-direction: column; gap: var(--msg-gap, 8px); }
body.glass-msg .dsc .msgs > * { flex-shrink: 0; }
body.glass-msg .dsc .welcome { margin: 0; }
body.glass-msg .dsc .msg {
  margin: 0; padding: var(--msg-pad, 10px) calc(var(--msg-pad, 10px) + 6px); border-radius: var(--g-radius, 14px);
  background: var(--g-tint, rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(var(--g-blur, 14px)) saturate(var(--g-sat, 140%)); backdrop-filter: blur(var(--g-blur, 14px)) saturate(var(--g-sat, 140%));
  border: 1px solid var(--g-border, rgba(255,255,255,.4));
  box-shadow: 0 8px 26px var(--g-shadow, rgba(11,16,32,.22)), inset 0 1px 0 var(--g-border, rgba(255,255,255,.4));
  transition: background .2s, box-shadow .2s, transform .2s;
}
body.glass-msg .dsc .msg.grouped { padding-left: calc(var(--msg-pad, 10px) + 6px + 38px + .7rem); }
body.glass-msg .dsc .msg:hover { background: var(--g-tint, rgba(255,255,255,.42)); box-shadow: 0 10px 30px var(--g-shadow, rgba(11,16,32,.22)), inset 0 1px 0 var(--g-border, rgba(255,255,255,.4)), inset 0 0 0 999px rgba(255,255,255,.06); }
body.glass-msg .dsc .msg.pinged { background: var(--men-bg), var(--g-tint, rgba(255,255,255,.42)); box-shadow: 0 8px 26px var(--g-shadow, rgba(11,16,32,.22)), inset 3px 0 0 var(--men-bar, #f5c542), inset 0 1px 0 var(--g-border, rgba(255,255,255,.4)); }
body.glass-msg .dsc .msg.replying { background: linear-gradient(90deg, rgba(91,141,239,.22), rgba(91,141,239,.06)), var(--g-tint, rgba(255,255,255,.42)); }
body.glass-msg .dsc .msg .msg-tools { top: -.7rem; }
[data-theme="dark"] body.glass-msg .dsc .msg { background: var(--g-tint-d, rgba(22,27,36,.42)); border-color: var(--g-border-d, rgba(255,255,255,.14)); box-shadow: 0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 var(--g-border-d, rgba(255,255,255,.14)); }
[data-theme="dark"] body.glass-msg .dsc .msg.pinged { background: var(--men-bg), var(--g-tint-d, rgba(22,27,36,.42)); }
[data-theme="dark"] body.glass-msg .dsc .msg.replying { background: linear-gradient(90deg, rgba(91,141,239,.25), rgba(91,141,239,.06)), var(--g-tint-d, rgba(22,27,36,.42)); }
body.glass-msg .dsc .compose-box { background: var(--g-tint, rgba(255,255,255,.42)); -webkit-backdrop-filter: blur(var(--g-blur, 14px)) saturate(var(--g-sat, 140%)); backdrop-filter: blur(var(--g-blur, 14px)) saturate(var(--g-sat, 140%)); border-color: var(--g-border, rgba(255,255,255,.4)); border-radius: var(--g-radius, 14px); }
[data-theme="dark"] body.glass-msg .dsc .compose-box { background: var(--g-tint-d, rgba(22,27,36,.42)); border-color: var(--g-border-d, rgba(255,255,255,.14)); }

/* Colonnes en verre (avec un fond d'espace) */
.dsc.has-bg .dsc-servers, .dsc.has-bg .dsc-side, .dsc.has-bg .dsc-members { -webkit-backdrop-filter: blur(var(--gc-blur, 16px)) saturate(130%); backdrop-filter: blur(var(--gc-blur, 16px)) saturate(130%); }
.dsc.has-bg .dsc-side { border-right: 1px solid var(--gc-border, rgba(255,255,255,.3)); }
.dsc.has-bg .dsc-members { border-left: 1px solid var(--gc-border, rgba(255,255,255,.3)); }
.dsc.has-bg .dsc-servers { border-right: 1px solid var(--gc-border, rgba(255,255,255,.3)); }
.dsc.has-bg .cat[data-open="true"] .cat-salons { border-color: var(--gc-border, rgba(255,255,255,.3)); -webkit-backdrop-filter: blur(calc(var(--gc-blur, 16px) / 2)); backdrop-filter: blur(calc(var(--gc-blur, 16px) / 2)); }

/* Fond de nuit propre à l'espace (sinon le fond du jour, assombri) */
[data-theme="dark"] .dsc.has-bg.has-night { background: var(--space-bg-n); background-size: cover; background-position: center; }
.dsc.glass-demo { display: grid; grid-template-columns: 180px 1fr; height: 300px; min-height: 0; border-radius: 14px; overflow: hidden; margin-bottom: .8rem; border: 1px solid var(--border); }
.dsc.glass-demo .dsc-side { overflow-y: auto; padding: .4rem; display: block; }
.dsc.glass-demo .dsc-main { padding: 1rem; overflow-y: auto; }
.dsc.glass-demo .msgs { padding: 0; overflow: visible; }
.cfg-swatch { position: relative; display: inline-flex; width: 52px; height: 38px; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; background: repeating-conic-gradient(#c9ced6 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.cfg-swatch::after { content: ''; position: absolute; inset: 0; background: var(--sw); pointer-events: none; }
.cfg-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* ---- Mentions holographiques : le verre est éclairé d'un seul côté ---- */
body.men-holo .msg.pinged { background: var(--men-bg); box-shadow: var(--men-edge) var(--men-bar), var(--men-inner) var(--men-glow), var(--men-spill) var(--men-glow); }
body.men-holo.glass-msg .dsc .msg.pinged { background: var(--men-bg), var(--g-tint, rgba(255,255,255,.42)); box-shadow: var(--men-edge) var(--men-bar), var(--men-inner) var(--men-glow), var(--men-spill) var(--men-glow), 0 8px 26px var(--g-shadow, rgba(11,16,32,.22)), inset 0 1px 0 var(--g-border, rgba(255,255,255,.4)); }
[data-theme="dark"] body.men-holo.glass-msg .dsc .msg.pinged { background: var(--men-bg), var(--g-tint-d, rgba(22,27,36,.42)); }
body.men-holo .msg.pinged::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; opacity: .7; }
body.men-holo.men-shimmer .msg.pinged::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: var(--men-sheen); background-size: 260% 100%; background-repeat: no-repeat; mix-blend-mode: screen; animation: menSheen 5.5s cubic-bezier(.4,0,.2,1) infinite; }
body.men-holo .msg.pinged > * { position: relative; z-index: 1; }
body.men-holo .msg.pinged > .msg-tools { position: absolute; z-index: 3; }
@keyframes menSheen { 0% { background-position: 130% 0; } 45%, 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { body.men-holo.men-shimmer .msg.pinged::after { animation: none; opacity: 0; } }

/* ---- Couleur + opacité (tout l'administration) ---- */
.ca { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: nowrap; padding: 3px 8px 3px 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ca.off .ca-sw, .ca.off .ca-a { opacity: .35; }
.ca-sw { position: relative; display: inline-flex; width: 34px; height: 28px; border-radius: 7px; overflow: hidden; flex: none; background: repeating-conic-gradient(#c9ced6 0 25%, #fff 0 50%) 0 0 / 10px 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.ca-sw::after { content: ''; position: absolute; inset: 0; background: var(--sw); pointer-events: none; }
.ca-sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.ca-a { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--muted); }
.ca-a input { width: 78px; accent-color: var(--text); }
.ca-v { min-width: 2.7em; text-align: right; font-variant-numeric: tabular-nums; }
.ca-on { width: 16px; height: 16px; margin: 0 0 0 4px; }

/* ---- Onglets des espaces : styles réglables (métal, verre, plat, néon) ---- */
.cat-toggle.metal { border-radius: var(--tab-r, 8px);
  background: linear-gradient(180deg, rgba(255,255,255,calc(.42 * var(--tab-sheen, 1))), rgba(255,255,255,0) 42%, rgba(0,0,0,calc(.14 * var(--tab-sheen, 1)))),
    repeating-linear-gradient(90deg, rgba(255,255,255,calc(.07 * var(--tab-sheen, 1))) 0 1px, rgba(0,0,0,calc(.035 * var(--tab-sheen, 1))) 1px 3px),
    linear-gradient(var(--tab-angle, 115deg), var(--tab2) 0%, var(--tab1) 38%, var(--tab-hi) 50%, var(--tab1) 62%, var(--tab2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,calc(.55 * var(--tab-sheen, 1))), 0 1px 3px rgba(0,0,0,.15), 0 0 calc(var(--tab-glow, 0) * 22px) calc(var(--tab-glow, 0) * 2px) color-mix(in srgb, var(--tab1) 70%, transparent); }
.cat[data-open="true"] .cat-toggle.metal { border-radius: var(--tab-r, 8px) var(--tab-r, 8px) 0 0; }
.cat[data-open="true"] .cat-salons { border-radius: 0 0 var(--tab-r, 8px) var(--tab-r, 8px); }
.cat-toggle.metal.tab-plat { background: linear-gradient(var(--tab-angle, 115deg), var(--tab1), var(--tab2)); text-shadow: none; border-color: transparent;
  box-shadow: 0 0 calc(var(--tab-glow, 0) * 22px) calc(var(--tab-glow, 0) * 2px) color-mix(in srgb, var(--tab1) 70%, transparent); }
.cat-toggle.metal.tab-verre { background: linear-gradient(var(--tab-angle, 115deg), color-mix(in srgb, var(--tab1) 55%, transparent), color-mix(in srgb, var(--tab2) 45%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,calc(.35 * var(--tab-sheen, 1))), rgba(255,255,255,0) 55%);
  -webkit-backdrop-filter: blur(var(--fw-blur, 12px)) saturate(var(--fw-sat, 140%)); backdrop-filter: blur(var(--fw-blur, 12px)) saturate(var(--fw-sat, 140%)); border: 1px solid var(--fw-border, rgba(255,255,255,.4)); text-shadow: none;
  box-shadow: inset 0 1px 0 var(--fw-border, rgba(255,255,255,.6)), 0 4px 14px rgba(0,0,0,.12), 0 0 calc(var(--tab-glow, 0) * 22px) calc(var(--tab-glow, 0) * 2px) color-mix(in srgb, var(--tab1) 70%, transparent); } /* même verre que les fenêtres du site */
.cat-toggle.metal.tab-neon { background: linear-gradient(var(--tab-angle, 115deg), rgba(8,10,16,.92), rgba(16,20,30,.88)); border: 1px solid var(--tab1);
  text-shadow: 0 0 8px var(--tab1), 0 0 2px var(--tab1);
  box-shadow: 0 0 calc(6px + var(--tab-glow, 0) * 20px) -2px var(--tab1), inset 0 0 12px -5px var(--tab1); }
.cat-toggle.metal.tab-neon .cat-n { opacity: .85; }
.cat-toggle.metal.nocaps { text-transform: none; letter-spacing: .01em; font-size: .86rem; }
.tab-prev-wrap { padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 1rem; background: var(--space-bg, linear-gradient(135deg, var(--surface-2), var(--surface-3))); background-size: cover; border: 1px solid var(--border); }
.tab-prev-wrap .cat { margin: 0; max-width: 300px; }
.tab-prev-wrap .cat-salons { display: block !important; background: color-mix(in srgb, var(--surface) 70%, transparent) !important; padding: .3rem 0; border: 1px solid var(--border); border-top: 0; }
.tab-prev-wrap .salon-link { display: block; padding: .3rem .8rem; font-size: .88rem; }
.tab-rgs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.2rem; margin: .2rem 0 .8rem; }
.tab-rg { display: grid; grid-template-columns: 90px 1fr 54px; align-items: center; gap: .5rem; font-size: .85rem; }
.tab-rg b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) { .tab-rgs { grid-template-columns: 1fr; } }

/* ---- Onglets des pyramides : style réglable (Administration › Pyramides) ---- */
.pyr-tab { border-radius: var(--pr, 10px); background: linear-gradient(var(--pa, 115deg), var(--pc), var(--pc2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,calc(var(--metal) * .9)), 0 2px 6px rgba(0,0,0,.12), 0 0 calc(var(--pglow, 0) * 24px) calc(var(--pglow, 0) * 2px) color-mix(in srgb, var(--pc) 70%, transparent); }
body.pyr-plat .pyr-tab::after { display: none; }
body.pyr-plat .pyr-tab { box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 0 calc(var(--pglow, 0) * 24px) calc(var(--pglow, 0) * 2px) color-mix(in srgb, var(--pc) 70%, transparent); }
body.pyr-verre .pyr-tab { background: linear-gradient(var(--pa, 115deg), color-mix(in srgb, var(--pc) 60%, transparent), color-mix(in srgb, var(--pc2) 45%, transparent)); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border-color: rgba(255,255,255,.4); }
body.pyr-verre .pyr-tab::after { mix-blend-mode: soft-light; }
body.pyr-neon .pyr-tab { background: linear-gradient(var(--pa, 115deg), rgba(8,10,16,.94), rgba(18,22,32,.9)); border: 1px solid var(--pc); color: #f3f6fa;
  box-shadow: 0 0 calc(8px + var(--pglow, 0) * 22px) -2px var(--pc), inset 0 0 14px -6px var(--pc); }
body.pyr-neon .pyr-tab::after { display: none; }
body.pyr-neon .pyr-tab-name b { box-shadow: 0 0 10px var(--pc); }

/* =====================================================================
   Administration (site et espaces) — navigation rangée, recherche, rubriques en cartes, barre d'enregistrement
   ===================================================================== */
.adm-v2 { grid-template-columns: 250px minmax(0, 1fr); }
.adm-nav { top: calc(var(--app-top, 158px) - 40px); max-height: calc(100vh - 120px); overflow-y: auto; padding-right: .3rem; }
.adm-nav a { font-size: .9rem; padding: .42rem .7rem; }
.adm-nav a span[aria-hidden] { width: 1.4em; text-align: center; flex: none; }
.adm-cat { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: .9rem .7rem .25rem; }
.adm-search { position: relative; margin-bottom: .5rem; }
.adm-search .input { width: 100%; border-radius: 10px; font-size: .88rem; padding: .5rem .7rem; }
.adm-results { position: absolute; left: 0; right: -120px; top: calc(100% + 4px); z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: .3rem; max-height: 60vh; overflow-y: auto; }
.adm-results a { display: flex; gap: .6rem; align-items: center; padding: .45rem .6rem; border-radius: 8px; text-decoration: none; color: var(--text); }
.adm-results a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.adm-results a:hover, .adm-results a:focus { background: var(--surface-2); }
.adm-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; }
.adm-head h1 { margin: 0; font-size: 1.75rem; }
.adm-ico { width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; flex: none;
  background: linear-gradient(145deg, var(--surface), var(--surface-3)); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.08); }
.adm-ico .oda-ico { width: 28px; height: 28px; }
.adm-crumb { margin: 0 0 .1rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.adm-chips { position: sticky; top: 0; z-index: 20; display: flex; gap: .35rem; flex-wrap: wrap; padding: .55rem 0 .7rem; margin-bottom: .2rem; background: linear-gradient(var(--bg) 75%, transparent); }
.adm-chips a { padding: .32rem .75rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: .82rem; font-weight: 600; transition: background .15s, color .15s; }
.adm-chips a:hover { background: var(--surface-2); }
.adm-chips a.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.adm-sec { scroll-margin-top: 4.5rem; border-radius: 16px; padding: 1.1rem 1.3rem .6rem; }
.adm-sec-h { font-size: 1.05rem !important; margin: 0 0 .3rem !important; display: flex; align-items: center; gap: .5rem; }
.adm-sec .set-row:last-child { border-bottom: 0; }
.adm-preview { border-radius: 16px; }
.set-row.adm-flash { animation: admFlash 2.2s ease-out; border-radius: 10px; }
@keyframes admFlash { 0%, 35% { background: color-mix(in srgb, #f5c542 28%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, #f5c542 28%, transparent); } 100% { background: transparent; box-shadow: none; } }
.adm-savebar { position: sticky; bottom: .8rem; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem .7rem .6rem 1rem; margin-top: .4rem;
  border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.adm-savebar .adm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2f9e62; margin-right: .5rem; vertical-align: middle; }
.adm-savebar.dirty { border-color: #e2a12b; }
.adm-savebar.dirty .adm-dot { background: #e2a12b; box-shadow: 0 0 0 4px rgba(226,161,43,.2); }
.adm-form .vx-mod { margin-bottom: .5rem; }
@media (max-width: 860px) { .adm-v2 { grid-template-columns: 1fr; } .adm-nav { position: static; max-height: none; } .adm-results { right: 0; } }

/* ---- Gérer un espace : menu latéral + pages ---- */
.manage-modal { max-width: 1120px; width: min(1120px, 96vw); padding: 0; overflow: hidden; height: min(860px, 92vh); display: flex; }
.mg-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); width: 100%; height: 100%; }
.mg-nav { background: var(--surface-2); border-right: 1px solid var(--border); padding: 1rem .7rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mg-nav button { display: flex; align-items: center; gap: .55rem; width: 100%; border: 0; background: none; font: inherit; font-size: .9rem; color: var(--text); padding: .45rem .65rem; border-radius: 8px; cursor: pointer; text-align: left; }
.mg-nav button span { width: 1.4em; text-align: center; }
.mg-nav button:hover { background: var(--surface-3); }
.mg-nav button[aria-current="true"] { background: var(--metal); box-shadow: inset 0 0 0 1px var(--border); font-weight: 700; }
.mg-srv { display: flex; align-items: center; gap: .55rem; padding: .2rem .5rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .2rem; }
.mg-srv img, .mg-srv .srv-ini { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; flex: none; }
.mg-srv strong { font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mg-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.4rem .8rem; border-bottom: 1px solid var(--border); }
.mg-top h2 { font-size: 1.35rem; }
.mg-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 1rem; color: var(--text); flex: none; }
.mg-x:hover { background: var(--surface-2); }
.mg-body { padding: 1.1rem 1.4rem 1.6rem; overflow-y: auto; flex: 1; min-height: 0; }
.mg-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.mg-h { font-size: 1rem; margin: 0 0 .4rem; }
.mg-ident { display: flex; gap: 1.2rem; align-items: flex-start; }
.mg-logo { position: relative; width: 104px; height: 104px; border-radius: 26px; overflow: hidden; flex: none; cursor: pointer; border: 1px solid var(--border); background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; }
.mg-logo img { width: 100%; height: 100%; object-fit: contain; }
.mg-logo em { position: absolute; inset: auto 0 0 0; padding: .25rem; font-style: normal; font-size: .72rem; text-align: center; background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .2s; }
.mg-logo:hover em, .mg-logo:focus-within em { opacity: 1; }
@media (max-width: 760px) { .mg-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .mg-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); max-height: 34vh; } .mg-nav .adm-cat, .mg-srv { display: none; } .mg-nav button { width: auto; } .mg-ident { flex-direction: column; } }
.cs-list { display: flex; flex-direction: column; gap: 3px; margin: .5rem 0 1rem; user-select: none; touch-action: pan-y; }
.cs-head { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; margin-top: .55rem; border-radius: 10px; background: var(--surface-2); cursor: grab; }
.cs-head:first-child { margin-top: 0; }
.cs-head .cs-tab { width: auto; min-width: 150px; max-width: 280px; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; cursor: inherit; }
.cs-item { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem .35rem 1.6rem; border-radius: 8px; cursor: grab; }
.cs-item:hover, .cs-head:hover { background: var(--surface-3); }
.cs-list .grip { color: var(--muted); opacity: .7; width: 1em; text-align: center; }
.cs-list .grip.off { opacity: .2; }
.cs-list .locked { cursor: default; }
.cs-list .dragging { opacity: .55; outline: 2px dashed var(--border); }
.tab-rg { grid-template-columns: 78px minmax(0, 1fr) 46px; }

/* ——— Textes des espaces (couleurs jour / nuit) ——— */
.dsc .salon-link { color: var(--salon-txt, #262c34); }
[data-theme="dark"] .dsc .salon-link { color: var(--salon-txt-d, #e6ebf1); }
.dsc .salon-link:hover, .dsc .salon-link[aria-current="true"] { color: var(--salon-txt, #262c34); filter: brightness(.85); }
[data-theme="dark"] .dsc .salon-link:hover, [data-theme="dark"] .dsc .salon-link[aria-current="true"] { color: var(--salon-txt-d, #e6ebf1); filter: brightness(1.12); }
.dsc .member .mem-n, .dsc .msg-meta a > strong > span:not(.role-name) { color: var(--member-txt, #1f252c); }
[data-theme="dark"] .dsc .member .mem-n, [data-theme="dark"] .dsc .msg-meta a > strong > span:not(.role-name) { color: var(--member-txt-d, #eef2f6); }
.dsc .member.offline .mem-n { opacity: .62; }

/* ——— Nom de l'espace dans la bannière ——— */
.dsc-banner-name { position: absolute; left: .75rem; top: .6rem; right: 4.5rem; font-weight: 800; font-size: 1.12rem; color: #fff; letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 12px rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsc-head.on-banner .dsc-name { display: none; }

/* ——— Onglets : opacité, textures, effets ——— */
.cat-toggle.metal { position: relative; overflow: hidden; isolation: isolate; }
.cat-toggle.metal > * { position: relative; z-index: 2; }
.cat-toggle.metal::before, .cat-toggle.metal::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.cat-toggle.metal::before { z-index: 1; opacity: var(--tab-tx, .6); mix-blend-mode: overlay; }
.cat-toggle.metal.tx-aucune::before { display: none; }
.cat-toggle.metal.tx-brosse::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, rgba(0,0,0,.14) 1px 2px, transparent 2px 4px); }
.cat-toggle.metal.tx-carbone::before { background: linear-gradient(45deg, rgba(0,0,0,.45) 25%, transparent 25% 75%, rgba(0,0,0,.45) 75%), linear-gradient(45deg, rgba(0,0,0,.45) 25%, transparent 25% 75%, rgba(0,0,0,.45) 75%), rgba(255,255,255,.08); background-size: 6px 6px; background-position: 0 0, 3px 3px; mix-blend-mode: multiply; }
.cat-toggle.metal.tx-grain::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cat-toggle.metal.tx-hex::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24'%3E%3Cpath d='M7 0l7 4v8l-7 4-7-4V4zM7 16v8' fill='none' stroke='white' stroke-opacity='.55' stroke-width='.8'/%3E%3C/svg%3E"); background-size: 10px 17px; }
.cat-toggle.metal.tx-lignes::before { background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.cat-toggle.metal.tx-points::before { background: radial-gradient(rgba(255,255,255,.7) .7px, transparent 1.2px) 0 0 / 5px 5px; }
.cat-toggle.metal.tx-diagonales::before { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 2px, transparent 2px 8px); }
.cat-toggle.metal.tx-grille::before { background: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px) 0 0 / 8px 8px; }
.cat-toggle.metal.tx-ondes::before { background: repeating-radial-gradient(circle at 0 50%, rgba(255,255,255,.3) 0 1px, transparent 1px 6px); }
.cat-toggle.metal.tx-holo::before { background: linear-gradient(105deg, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #7fffd4, #ffe29a, #ff6ad5); background-size: 200% 100%; mix-blend-mode: soft-light; }
.cat-toggle.metal.tx-paillettes::before { background: radial-gradient(circle at 20% 30%, #fff .6px, transparent 1.2px) 0 0 / 11px 9px, radial-gradient(circle at 70% 60%, #fff .5px, transparent 1.1px) 0 0 / 7px 13px, radial-gradient(circle at 40% 80%, rgba(255,255,255,.8) .5px, transparent 1px) 0 0 / 17px 11px; mix-blend-mode: screen; }
.cat-toggle.metal::after { z-index: 1; display: none; }
.cat-toggle.metal.fx-reflet::after { display: block; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); background-size: 300% 100%; animation: tabReflet var(--tab-fx-ms, 4s) ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes tabReflet { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
.cat-toggle.metal.fx-pulse { animation: tabPulse var(--tab-fx-ms, 4s) ease-in-out infinite; }
@keyframes tabPulse { 0%, 100% { box-shadow: var(--tab-shadow, none); } 50% { box-shadow: var(--tab-shadow, 0 0 0 transparent), 0 0 14px 1px var(--tab-solid, #c9cfd6); } }
.cat-toggle.metal.fx-bordure::after { display: block; inset: 0; padding: 1.5px; background: conic-gradient(from var(--tab-rot, 0deg), transparent 0 70%, var(--tab-hi, #fff) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: tabRot var(--tab-fx-ms, 4s) linear infinite; }
@property --tab-rot { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes tabRot { to { --tab-rot: 360deg; } }
.cat-toggle.metal.fx-aurore::after { display: block; background: linear-gradient(120deg, rgba(120,255,214,.0), rgba(120,255,214,.35), rgba(140,160,255,.35), rgba(255,120,220,.3), rgba(120,255,214,0)); background-size: 300% 100%; mix-blend-mode: soft-light; animation: tabAurore var(--tab-fx-ms, 4s) ease-in-out infinite alternate; }
@keyframes tabAurore { from { background-position: 0 0; } to { background-position: 100% 0; } }
.cat-toggle.metal.fx-scan::after { display: block; background: linear-gradient(180deg, transparent 0 40%, rgba(255,255,255,.45) 50%, transparent 60% 100%); background-size: 100% 300%; animation: tabScan var(--tab-fx-ms, 4s) linear infinite; mix-blend-mode: overlay; }
@keyframes tabScan { from { background-position: 0 100%; } to { background-position: 0 -200%; } }
.cat-toggle.metal.tab-holo { background: linear-gradient(var(--tab-angle, 115deg), var(--tab1), var(--tab2)); border: 1px solid rgba(255,255,255,.35); color: #1b2128; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.cat-toggle.metal.tab-holo::before { display: block; opacity: calc(.35 + var(--tab-tx, .6) * .65); background: linear-gradient(105deg, #ff6ad5, #ad8cff, #94d0ff, #7fffd4, #ffe29a, #ff6ad5); background-size: 250% 100%; mix-blend-mode: color; animation: tabAurore calc(var(--tab-fx-ms, 4s) * 1.5) linear infinite alternate; }
[data-theme="dark"] .cat-toggle.metal.tab-holo { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .cat-toggle.metal, .cat-toggle.metal::before, .cat-toggle.metal::after { animation: none !important; } }

.lk-sec { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem .8rem; margin: 0 0 .8rem; }
.lk-sec legend { font-weight: 700; font-size: .85rem; padding: 0 .3rem; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1rem; align-items: start; }
.lk-rg input[type=range] { width: 100%; } .lk-rg output { font-weight: 700; color: var(--muted); margin-left: .3rem; }

/* ——— Compresseur de luminosité (filtres SVG #lc-n / #lc-d générés par applyLook) ——— */
html[data-theme="dark"] body.lc-n { --lc: url(#lc-n); }
html:not([data-theme="dark"]) body.lc-d { --lc: url(#lc-d); }
/* sous le verre : la compression passe en dernier (après flou et saturation), le plafond est donc garanti */
body.lc-verre.glass-msg .dsc.has-bg .msg, body.lc-verre.glass-msg .dsc.has-bg .compose-box {
  -webkit-backdrop-filter: blur(var(--g-blur, 14px)) saturate(var(--g-sat, 140%)) var(--lc, ); backdrop-filter: blur(var(--g-blur, 14px)) saturate(var(--g-sat, 140%)) var(--lc, ); }
body.lc-verre .dsc.has-bg .dsc-servers, body.lc-verre .dsc.has-bg .dsc-side, body.lc-verre .dsc.has-bg .dsc-members {
  -webkit-backdrop-filter: blur(var(--gc-blur, 16px)) saturate(130%) var(--lc, ); backdrop-filter: blur(var(--gc-blur, 16px)) saturate(130%) var(--lc, ); }
body.lc-verre .dsc.has-bg .dsc-main .dsc-top { -webkit-backdrop-filter: blur(6px) var(--lc, ); backdrop-filter: blur(6px) var(--lc, ); }
body.lc-verre:not(.glass-msg) .dsc.has-bg .dsc-main .msgs { -webkit-backdrop-filter: var(--lc, none); backdrop-filter: var(--lc, none); }
/* tout le fond : le fond est redessiné dans une couche filtrée (fonctionne dans tous les navigateurs) */
body.lc-fond .dsc.has-bg { isolation: isolate; }
body.lc-fond .dsc.has-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: inherit; filter: var(--lc, none); }

/* Graphique du compresseur (administration) */
.lc-viz { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: .4rem 0 1rem; }
.lc-card { border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem .8rem; background: var(--surface-2); }
.lc-card h3 { margin: 0 0 .4rem; font-size: .9rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.lc-card svg { width: 100%; height: auto; display: block; }
.lc-ramp { height: 14px; border-radius: 4px; margin-top: .35rem; border: 1px solid var(--border); }
.lc-warn { color: var(--red, #c0392b); font-weight: 700; }
.lc-ok { color: #2e9d5b; font-weight: 700; }
.lc-bgs { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin: .2rem 0 .5rem; }
.lc-bgs button { border: 1px solid var(--border); border-radius: 99px; background: var(--surface); padding: .15rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; color: var(--text); }
.lc-bgs button[aria-pressed="true"] { background: var(--text); color: var(--surface); }

.cat-toggle.metal::after, .cat-toggle.metal.fx-pulse { animation-direction: var(--tab-fx-dir, normal) !important; }
.bg-tile[data-bg="def"] span { font-weight: 700; }
.bgad-def { display: flex; gap: .3rem; }
.bgad-def button { border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: .15rem .55rem; font: inherit; font-size: .76rem; cursor: pointer; color: var(--muted); }
.bgad-def button[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }

/* Les cartes « vient de rejoindre » et la barre du direct suivent aussi le verre */
body.glass-msg .dsc .welcome { padding: var(--msg-pad, 10px) calc(var(--msg-pad, 10px) + 6px); border-radius: var(--g-radius, 14px); background: var(--g-tint, rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(var(--g-blur, 14px)) saturate(var(--g-sat, 140%)) var(--lc, ); backdrop-filter: blur(var(--g-blur, 14px)) saturate(var(--g-sat, 140%)) var(--lc, );
  border: 1px solid var(--g-border, rgba(255,255,255,.4)); box-shadow: 0 8px 26px var(--g-shadow, rgba(11,16,32,.22)), inset 0 1px 0 var(--g-border, rgba(255,255,255,.4)); }
[data-theme="dark"] body.glass-msg .dsc .welcome { background: var(--g-tint-d, rgba(22,27,36,.42)); border-color: var(--g-border-d, rgba(255,255,255,.14)); box-shadow: 0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 var(--g-border-d, rgba(255,255,255,.14)); }
.dsc.has-bg .stage-bar { background: color-mix(in srgb, var(--surface) var(--a-chat, 45%), transparent); -webkit-backdrop-filter: blur(var(--gc-blur, 16px)) var(--lc, ); backdrop-filter: blur(var(--gc-blur, 16px)) var(--lc, ); }

/* Rôles : couleurs de jour / de nuit */
[data-theme="dark"] .rn-d, html:not([data-theme="dark"]) .rn-n { display: none; }
.rd-pv { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 8px; margin-right: .4rem; font-weight: 700; }
.rd-pv.day { background: #f4f6f8; color: #1b2128; } .rd-pv.night { background: #141920; color: #eef2f6; }

/* Plein écran des espaces : les boutons du compte (jour/nuit → pseudo) restent visibles par-dessus la barre du salon */
body.spaces-max-on .header { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: none; pointer-events: none; }
body.spaces-max-on .header::after, body.spaces-max-on .header .brand, body.spaces-max-on .header .nav, body.spaces-max-on #search-form { display: none; }
body.spaces-max-on .header-top { padding: 0; }
body.spaces-max-on .header-tools { position: fixed; top: 6px; right: var(--tools-r, 300px); pointer-events: auto; gap: .3rem; }
body.spaces-max-on .dsc-main .dsc-top { padding-right: calc(var(--tools-w, 420px) + 22px); }
.dsc-title > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dsc-top .push-right { flex-shrink: 0; }

/* Barre du salon : nom en haut, sujet dessous (place pour les boutons du compte en plein écran) */
.dsc-top { min-height: 62px; padding-top: .45rem; padding-bottom: .45rem; }
.dsc-ttl { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; gap: .05rem; }
.dsc-ttl .dsc-title { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 1.02rem; line-height: 1.25; }
.dsc-ttl .dsc-title > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dsc-ttl .dsc-topic { padding-left: 0; border-left: 0; font-size: .8rem; line-height: 1.3; }
body.spaces-max-on .header-tools { top: 7px; }

/* pendant le glissement de la zone : compresseur coupé (le filtre SVG est recalculé à chaque image) */
html body.lc-n.dsc-anim, html body.lc-d.dsc-anim { --lc: ; }

/* ——— Profil v2 : identité et soutiens posés en verre sur la bannière (réglages : Administration › Profils) ——— */
.pf-v2 .pf-hero { position: relative; border-radius: 14px 14px 0 0; overflow: hidden; isolation: isolate; }
.pf-v2 .pf-hero > .pf-banner { position: absolute; inset: 0; z-index: 0; }
.pf-v2 .pf-hero > .pf-banner .banner { height: 100%; }
.pf-v2 .pf-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--pf-veil-bg, rgba(0,0,0,var(--pf-veil, .12))); }
.pf-v2 .pf-hero-in { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: var(--pf-pad, 16px); pointer-events: none; }
body.pf-gauche .pf-v2 .pf-hero-in { flex-direction: row-reverse; }
.pf-v2 .pf-hero-in > * { pointer-events: auto; }
/* le cadre d'identité prend la largeur du pseudo ou de la ligne des chiffres (bouton ⚙ compris) ; bio et boutons s'y plient */
.pf-v2 .pf-leftcol { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; min-width: 0; max-width: calc(100% - 380px - 1rem); }
.pf-v2 .pf-idcard { width: fit-content; min-width: 260px; max-width: min(var(--pf-card-max, 560px), 100%); }
.pf-v2 .pf-idcard > p, .pf-v2 .pf-idcard .profile-actions { width: 0; min-width: 100%; }
.pf-v2 .pf-hero .pf-tabs { position: static; margin: 0; gap: .5rem; width: 380px; flex: none; }
.pf-v2 .pf-hero .pf-tabs .support-box { -webkit-backdrop-filter: blur(var(--pf-sup-blur, 12px)) var(--lc, ); backdrop-filter: blur(var(--pf-sup-blur, 12px)) var(--lc, ); }
/* cadres en verre : le verre est dessiné par ::before (ce qui permet de le découper autour de la photo) */
.pf-glass { position: relative; padding: .9rem 1.05rem; border-radius: var(--pf-g-radius, 16px); }
.pf-glass > * { position: relative; z-index: 1; }
.pf-glass::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: var(--pf-g-tint, rgba(255,255,255,.45));
  -webkit-backdrop-filter: blur(var(--pf-g-blur, 14px)) saturate(var(--pf-g-sat, 140%)) var(--lc, ); backdrop-filter: blur(var(--pf-g-blur, 14px)) saturate(var(--pf-g-sat, 140%)) var(--lc, );
  border: 1px solid var(--pf-g-border, rgba(255,255,255,.35)); box-shadow: inset 0 1px 0 var(--pf-g-border, rgba(255,255,255,.35)), 0 10px 30px var(--g-shadow, rgba(11,16,32,.22)); }
[data-theme="dark"] .pf-glass::before { background: var(--pf-g-tint-d, rgba(22,27,36,.45)); border-color: var(--pf-g-border-d, rgba(255,255,255,.14)); box-shadow: inset 0 1px 0 var(--pf-g-border-d, rgba(255,255,255,.14)), 0 10px 30px rgba(0,0,0,.35); }
/* photo dans l'angle (légèrement en retrait des bords) : le verre est entaillé en arrondi autour d'elle */
.pf-v2 .pf-idcard { --pi: clamp(0px, var(--pf-cut-inset, 5px), calc(var(--pf-cut-gap, 8px) - 3px)); --cr: calc(var(--pf-av, 88px) / 2 + var(--pf-cut-gap, 8px)); --cc: calc(var(--pi) + var(--pf-av, 88px) / 2); }
body.pf-cut .pf-v2 .pf-idcard::before { -webkit-mask: radial-gradient(circle at var(--cc) var(--cc), transparent var(--cr), #000 calc(var(--cr) + .6px));
  mask: radial-gradient(circle at var(--cc) var(--cc), transparent var(--cr), #000 calc(var(--cr) + .6px)); }
body.pf-cut .pf-v2 .pf-idcard .pf-avatar { position: absolute; top: var(--pi); left: var(--pi); z-index: 2; }
body.pf-cut .pf-v2 .pf-idcard .profile-id { padding-left: calc(var(--pi) + var(--pf-av, 88px) + var(--pf-cut-gap, 8px) - .45rem); min-height: calc(var(--pi) + var(--pf-av, 88px) + var(--pf-cut-gap, 8px) - .9rem); align-items: center; }
body.pf-nolc .pf-glass, body.pf-nolc .pf-v2 .pf-hero .pf-tabs .support-box { --lc: ; }
.pf-v2 .profile-id { margin-top: 0; align-items: center; flex-wrap: nowrap; gap: .9rem; }
.pf-v2 .profile-id .av { width: var(--pf-av, 88px) !important; height: var(--pf-av, 88px) !important; font-size: calc(var(--pf-av, 88px) * .4) !important; }
.pf-v2 .profile-id .names { white-space: nowrap; }
.pf-v2 .profile-id .names h1 { font-size: 1.6rem; }
.pf-v2 .pf-idcard .pstats { margin-top: .6rem; color: inherit; gap: 1.1rem; flex-wrap: nowrap; white-space: nowrap; }
.pf-v2 .pf-idcard .muted { color: inherit; opacity: .78; }
.pf-v2 .pf-idcard > p { margin-top: .6rem !important; }
.pf-v2 .pf-idcard .pf-spatial { margin-top: .6rem; }
.pf-v2 .pf-idcard .profile-actions { margin: .6rem 0 0; padding: 0; justify-content: flex-start; }
.pf-v2 .profile-main { padding-top: .2rem; }
.pf-v2 .pf-body { grid-template-columns: minmax(0, 1fr) 380px; }
.pf-v2 .pf-body:has(#pf-duels:empty) { grid-template-columns: minmax(0, 1fr); }
.pf-v2 .pf-side { position: sticky; top: .8rem; align-self: start; margin-top: 1.1rem; }
/* disposition classique, et petits écrans : la bannière en haut, les cadres dessous */
body.pf-classique .pf-v2 .pf-hero > .pf-banner { position: relative; height: 200px; }
body.pf-classique .pf-v2 .pf-hero::after { display: none; }
body.pf-classique .pf-v2 .pf-hero-in { padding: 1rem 1.25rem 0; }
body.pf-classique .pf-v2 .pf-glass { padding: 0; } body.pf-classique .pf-v2 .pf-glass::before, body.pf-classique .pf-v2 .pf-idcard .pf-avatar::after { display: none; }
@media (max-width: 960px) {
  .pf-v2 .pf-hero > .pf-banner { position: relative; height: 180px; }
  .pf-v2 .pf-hero-in, body.pf-gauche .pf-v2 .pf-hero-in { flex-direction: column; align-items: stretch; padding: 0 .8rem .8rem; margin-top: -60px; }
  .pf-v2 .pf-idcard { width: auto; max-width: none; }
  .pf-v2 .pf-hero .pf-tabs { width: auto; }
  .pf-v2 .pstats { flex-wrap: wrap !important; white-space: normal !important; }
  .pf-v2 .profile-id .names { white-space: normal; }
  .pf-v2 .pf-body { grid-template-columns: 1fr; }
}
body.pf-cut .pf-v2 .pf-idcard > .profile-id { position: static; }
body.pf-cut .pf-v2 .pf-idcard > .profile-id > .names { position: relative; z-index: 1; }

/* soutiens en verre teinté de la couleur de la pyramide */
body.pf-supglass .pf-v2 .pf-hero .pf-tabs .support-box { background: linear-gradient(var(--pa, 115deg), color-mix(in srgb, var(--pc) var(--pf-sup-tint, 45%), transparent), color-mix(in srgb, var(--pc2) var(--pf-sup-tint, 45%), transparent)) !important;
  -webkit-backdrop-filter: blur(var(--pf-sup-blur, 12px)) saturate(var(--pf-g-sat, 140%)) var(--lc, ) !important; backdrop-filter: blur(var(--pf-sup-blur, 12px)) saturate(var(--pf-g-sat, 140%)) var(--lc, ) !important;
  border: 1px solid var(--pf-g-border, rgba(255,255,255,.35)) !important; border-radius: var(--pf-g-radius, 16px) !important; box-shadow: inset 0 1px 0 var(--pf-g-border, rgba(255,255,255,.35)), 0 8px 24px var(--g-shadow, rgba(11,16,32,.22)) !important; }
[data-theme="dark"] body.pf-supglass .pf-v2 .pf-hero .pf-tabs .support-box { border-color: var(--pf-g-border-d, rgba(255,255,255,.14)) !important; }
body.pf-supglass .pf-v2 .pf-hero .pf-tabs .support-box::after { display: none; }
body.pf-nolc.pf-supglass .pf-v2 .pf-hero .pf-tabs .support-box { --lc: ; }
/* texte choisi d'après la luminosité réelle derrière le verre */
.pf-v2 .pf-tx-light { color: #f6f8fb !important; --pc-txt: rgba(246,248,251,.8) !important; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pf-v2 .pf-tx-dark { color: #12161b !important; --pc-txt: rgba(18,22,27,.72) !important; text-shadow: 0 1px 1px rgba(255,255,255,.3); }
.pf-v2 .pf-tx-light a:not(.btn), .pf-v2 .pf-tx-dark a:not(.btn), .pf-v2 .pf-tx-light .names .row, .pf-v2 .pf-tx-dark .names .row { color: inherit; }
.pf-v2 .pf-tx-light .btn, .pf-v2 .pf-tx-dark .btn, .pf-v2 .pf-tx-light .badge, .pf-v2 .pf-tx-dark .badge { text-shadow: none; }

/* le texte automatique vaut aussi pour les chiffres, la bio, @pseudo et les liens du cadre */
.pf-v2 .pf-tx-light .pstats, .pf-v2 .pf-tx-light .pstats *, .pf-v2 .pf-tx-dark .pstats, .pf-v2 .pf-tx-dark .pstats *, .pf-v2 .pf-tx-light > p, .pf-v2 .pf-tx-dark > p { color: inherit !important; }
.pf-v2 .pf-tx-light .pstats .icon-btn, .pf-v2 .pf-tx-dark .pstats .icon-btn, .pf-v2 .pf-tx-light .pstats .icon-btn *, .pf-v2 .pf-tx-dark .pstats .icon-btn * { color: var(--text) !important; }

/* plaque d'actions : en bas à droite, sous les soutiens (de droite à gauche : Soutenir, S'abonner, Duel, Amis, Vue spatiale, Message) */
.pf-v2 .pf-hero-act { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding: 0 var(--pf-pad, 16px) var(--pf-pad, 16px); margin-top: calc(.6rem - var(--pf-pad, 16px)); pointer-events: none; }
body.pf-gauche .pf-v2 .pf-hero-act { justify-content: flex-start; }
.pf-v2 .pf-actbar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem; padding: .5rem .6rem; pointer-events: auto; max-width: 100%; }
.pf-v2 .pf-actbar .btn { white-space: nowrap; }
.pf-sup-dd { position: relative; display: inline-flex; }
.pf-sup-menu { position: absolute; right: 0; bottom: calc(100% + .55rem); z-index: 6; display: flex; flex-direction: column; gap: .35rem; padding: .55rem; min-width: 270px; }
.pf-sup-menu[hidden] { display: none; }
.pf-sup-menu .btn { width: 100%; justify-content: flex-start; }
body.pf-gauche .pf-sup-menu { right: auto; left: 0; }
/* boutons transparents : leur texte suit le choix noir / blanc du verre */
.pf-v2 .pf-tx-light .btn.tertiary, .pf-v2 .pf-tx-light .btn-link { color: inherit !important; border-color: rgba(255,255,255,.5) !important; background: rgba(255,255,255,.08) !important; }
.pf-v2 .pf-tx-dark .btn.tertiary, .pf-v2 .pf-tx-dark .btn-link { color: inherit !important; border-color: rgba(18,22,27,.35) !important; background: rgba(255,255,255,.22) !important; }
.pf-v2 .pf-tx-light .btn.tertiary:hover { background: rgba(255,255,255,.18) !important; } .pf-v2 .pf-tx-dark .btn.tertiary:hover { background: rgba(255,255,255,.38) !important; }
.pf-v2 .pf-tx-light .btn[disabled].tertiary, .pf-v2 .pf-tx-dark .btn[disabled].tertiary { opacity: .6; }
@media (max-width: 960px) { .pf-v2 .pf-hero-act { justify-content: stretch; margin-top: 0; padding: 0 .8rem .8rem; } .pf-v2 .pf-actbar { justify-content: flex-start; width: 100%; } }

/* Profil : « Vue spatiale » aligné sur les autres boutons de la plaque */
.pf-v2 .pf-actbar .pf-spatial { margin: 0; }
.pf-v2 .pf-actbar > .btn, .pf-v2 .pf-actbar .pf-sup-dd { align-self: center; }
.pf-v2 .pf-actbar .btn { display: inline-flex; align-items: center; gap: .3rem; line-height: 1.2; vertical-align: middle; }

/* Fenêtre étroite : les boutons de l'en-tête passent dans le menu du compte */
.hd-cmp-g, .acc-dot { display: none; }
.hd-cnt { margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; border-radius: 10px; background: var(--red, #d64545); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; }
.hd-cmp-g .oda-ico { width: 18px; height: 18px; }
button.account { position: relative; }
.acc-dot { position: absolute; top: -4px; right: -4px; }
@media (max-width: 1100px) {
  #theme-btn, #account-zone > .icon-btn, #account-zone > .oda-pill { display: none !important; }
  .hd-cmp-g { display: block; } .acc-dot { display: inline-block; }
}
@media (max-width: 1400px) {
  body.spaces-max-on #theme-btn, body.spaces-max-on #account-zone > .icon-btn, body.spaces-max-on #account-zone > .oda-pill { display: none !important; }
  body.spaces-max-on .hd-cmp-g { display: block; } body.spaces-max-on .acc-dot { display: inline-block; }
}
.hd-item .hd-cnt, .hd-item > span.hd-cnt { width: auto; height: auto; margin-left: auto; padding: .05rem .45rem; border-radius: 10px; background: var(--red, #d64545) !important; color: #fff !important; font-size: .72rem; font-weight: 700; line-height: 1.4; display: inline-block; }

/* ——— Appels et visios privés ——— */
.call-btn { border: 1px solid var(--border); background: var(--surface); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: .95rem; flex: none; padding: 0; }
.call-btn:hover { border-color: var(--text); }
.cw-head .call-btn { width: 26px; height: 26px; font-size: .8rem; border: 0; background: none; }
.wa-calls { display: inline-flex; gap: .35rem; }
.call-dial { padding: .6rem .9rem .7rem; border-bottom: 1px solid var(--border); display: grid; gap: .3rem; }
.call-dial .input { flex: 1; min-width: 0; }
.call-win { position: fixed; right: 18px; bottom: 70px; z-index: 300; width: 340px; border-radius: 18px; overflow: hidden; background: #0d1117; color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: callIn .25s ease-out; }
.call-win.big { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: min(92vw, 1100px); }
.call-win.call-out { opacity: 0; transition: opacity .25s; }
@keyframes callIn { from { opacity: 0; transform: translateY(14px); } }
.call-win.big { animation: none; }
.call-stage { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(ellipse at 50% 35%, #2b3a55, #07090f 75%); display: flex; align-items: center; justify-content: center; }
.call-win.big .call-stage { aspect-ratio: 16 / 9; }
.call-remote { width: 100%; height: 100%; object-fit: contain; background: #000; }
.call-self { position: absolute; right: 10px; bottom: 10px; width: 30%; border-radius: 10px; border: 2px solid rgba(255,255,255,.6); object-fit: cover; aspect-ratio: 4 / 3; background: #000; }
.call-who { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.call-who .av { box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 0 0 14px rgba(255,255,255,.05); }
.call-who .xs { opacity: .7; }
.call-top { position: absolute; left: 10px; right: 10px; top: 8px; display: flex; gap: .6rem; align-items: center; font-size: .8rem; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.call-st { opacity: .8; } .call-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.call-bar { display: flex; justify-content: center; gap: .55rem; padding: .7rem; background: #12171f; }
.call-bar button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #2a3240; color: #fff; font-size: 1.15rem; cursor: pointer; }
.call-bar button:hover:not([disabled]) { background: #3a4456; }
.call-bar button.off { background: #f3f5f8; color: #111; } .call-bar button.on { background: #3f7bf0; }
.call-bar button.end { background: #e0263f; transform: rotate(135deg); }
.call-bar button[disabled] { opacity: .4; cursor: default; }
.call-ring { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 310; display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem .7rem .9rem; min-width: min(94vw, 430px);
  border-radius: 18px; background: rgba(13,17,23,.92); color: #fff; box-shadow: 0 16px 50px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: ringIn .3s ease-out; }
.call-ring .grow { display: flex; flex-direction: column; min-width: 0; } .call-ring .xs { opacity: .75; }
.call-ring .av { animation: ringPulse 1.2s ease-in-out infinite; }
.call-ring button { width: 46px; height: 46px; border-radius: 50%; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; flex: none; }
.cr-no { background: #e0263f; } .cr-yes, .cr-vid { background: #23a55a; }
@keyframes ringIn { from { opacity: 0; transform: translate(-50%, -14px); } }
@keyframes ringPulse { 50% { box-shadow: 0 0 0 8px rgba(35,165,90,.35); } }
@media (max-width: 560px) { .call-win { right: 8px; left: 8px; width: auto; bottom: 64px; } }

/* fenêtre de discussion réduite : toute la barre rouvre la discussion */
.chatwin.min .cw-head { cursor: pointer; }
.chatwin .cw-name { color: inherit; text-decoration: none; } .chatwin:not(.min) .cw-name:hover strong { text-decoration: underline; }

/* ——— Directs personnels ——— */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e0263f; margin-right: .4rem; box-shadow: 0 0 0 0 rgba(224,38,63,.6); animation: liveDot 1.4s infinite; vertical-align: 1px; }
@keyframes liveDot { 70% { box-shadow: 0 0 0 7px rgba(224,38,63,0); } 100% { box-shadow: 0 0 0 0 rgba(224,38,63,0); } }
.pf-v2 .pf-live { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; align-items: center; text-align: left; font: inherit; cursor: pointer; border: 0; min-width: 260px; max-width: min(var(--pf-card-max, 560px), 100%); padding: .6rem .9rem; color: inherit; }
.pf-live-b { grid-row: span 2; font-weight: 800; font-size: .78rem; letter-spacing: .08em; background: #e0263f; color: #fff; padding: .3rem .55rem; border-radius: 8px; display: inline-flex; align-items: center; }
.pf-live-b .live-dot { background: #fff; }
.pf-live-t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-live-m { font-size: .78rem; opacity: .8; }
.pf-v2 .pf-live:hover::before { box-shadow: inset 0 0 0 2px rgba(224,38,63,.7), 0 10px 30px rgba(224,38,63,.25); }
.live-pop { position: absolute; z-index: 220; border-radius: 14px; overflow: hidden; background: #07090f; color: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.45); animation: callIn .2s ease-out; pointer-events: none; }
.live-pop-v { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #2b3a55, #07090f 75%); }
.live-pop-v video, .live-pop-v iframe, .live-player video, .live-player iframe { width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; display: block; }
.live-pop-wait { display: flex; flex-direction: column; align-items: center; gap: .4rem; opacity: .85; }
.live-pop-c { padding: .4rem .7rem; background: #12171f; opacity: .9; }
.live-player { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
.live-host { position: fixed; left: 18px; bottom: 70px; z-index: 290; display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 14px; background: rgba(13,17,23,.94); color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.4); max-width: min(94vw, 460px); }
.live-host video { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; }
.live-host .grow { display: flex; flex-direction: column; } .live-host .xs { opacity: .8; }
@media (max-width: 960px) { .pf-v2 .pf-leftcol { max-width: none; align-items: stretch; } .pf-v2 .pf-live { max-width: none; } }

/* appels de groupe : une tuile par participant */
.call-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(min(var(--n, 1), 2), 1fr); gap: 4px; padding: 4px; }
.call-win:not(.grp) .call-grid { padding: 0; gap: 0; }
.call-win.big .call-grid { grid-template-columns: repeat(min(var(--n, 1), 3), 1fr); }
.call-tile { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; min-height: 0; background: radial-gradient(ellipse at 50% 35%, #2b3a55, #07090f 80%); }
.call-win:not(.grp) .call-tile { border-radius: 0; }
.call-tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.call-win:not(.grp) .call-tile video { object-fit: contain; }
.call-tag { position: absolute; left: 6px; bottom: 6px; font-size: .72rem; padding: .1rem .4rem; border-radius: 6px; background: rgba(0,0,0,.45); }
.call-tag:empty { display: none; } .call-tag i { font-style: normal; opacity: .85; }
.call-win.grp { width: 420px; }
.call-win .call-self { z-index: 2; }

/* ——— Messages vocaux ——— */
.vrec-btn.rec { background: #e0263f !important; color: #fff !important; border-color: #e0263f !important; position: relative; animation: recPulse 1.2s infinite; }
.vrec-btn.rec::after { content: attr(data-t); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: #e0263f; color: #fff; font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 6px; white-space: nowrap; }
@keyframes recPulse { 50% { box-shadow: 0 0 0 6px rgba(224,38,63,.25); } }
.att-audio.vocal { display: flex !important; flex-direction: row !important; width: fit-content; max-width: 100%; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 12px; background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.att-audio.vocal span { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.att-audio.vocal audio { height: 34px; width: 260px; max-width: 60vw; flex: none; }
/* ——— Sondages ——— */
.poll { margin: .4rem 0; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 85%, transparent); max-width: 460px; display: grid; gap: .35rem; }
.poll-q { display: flex; flex-direction: column; margin-bottom: .2rem; }
.poll-opt { position: relative; display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; font: inherit; font-size: .92rem; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; overflow: hidden; }
.poll-opt > * { position: relative; z-index: 1; }
.poll-opt i { position: absolute; inset: 0 auto 0 0; z-index: 0; background: color-mix(in srgb, #5b8def 22%, transparent); transition: width .4s; }
.poll-opt.on { border-color: #5b8def; } .poll-opt.on i { background: color-mix(in srgb, #5b8def 34%, transparent); }
.poll-opt:hover:not([disabled]) { border-color: var(--text); } .poll-opt[disabled] { cursor: default; }
.poll-mark { color: #5b8def; } .poll-opt b { font-size: .82rem; }

/* ——— Délibération (salons vocaux) ——— */
.delib-wrap:empty { display: none; }
.delib { margin: .6rem; padding: .7rem .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(24,29,36,.82); color: #eef1f4; backdrop-filter: blur(10px); display: grid; gap: .5rem; }
.delib .muted { color: rgba(238,241,244,.62); }
.delib .btn-link { color: #eef1f4; }
.dl-head { display: flex; align-items: center; gap: .6rem; }
.dl-topic { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.delib .dl-chip { background: rgba(255,255,255,.08); color: #eef1f4; border-color: rgba(255,255,255,.18); }
.dl-bar { background: rgba(255,255,255,.14) !important; }
.dl-spk { display: flex; align-items: center; gap: .7rem; }
.dl-spk.me b { color: #2e9d5b; }
.dl-spk.empty { padding: .4rem 0; }
.dl-time { font: 800 2rem/1 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.dl-time.low { color: #e0263f; animation: recPulse 1s infinite; border-radius: 8px; }
.dl-bar { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.dl-bar b { display: block; height: 100%; background: linear-gradient(90deg, #c9cfd6, #8a96a6); transition: width .25s linear; }
.dl-q { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.dl-chip { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: .82rem; padding: .15rem .55rem .15rem .2rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.dl-chip[disabled] { cursor: default; } .dl-chip.me { border-color: #2e9d5b; }
.dl-n { font-size: .7rem; font-weight: 800; opacity: .6; padding-left: .3rem; }
.dl-act { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.dl-stats summary { cursor: pointer; } .dl-stats .row { padding: .15rem 0; }
#vdelib.on { background: color-mix(in srgb, #c9cfd6 40%, transparent); }

/* compositeurs étroits (chat du vocal…) : on garde la place pour écrire */
.compose-box { container-type: inline-size; }
.compose-row textarea { flex: 1 1 auto; min-width: 90px; }
@container (max-width: 420px) { .compose-row [data-poll-for], .compose-row [data-tab="sticker"] { display: none; } }
.delib .btn.tertiary { color: #eef1f4; border-color: rgba(255,255,255,.3); background: transparent; }
.vbar { flex-wrap: wrap; }
.vctl { flex-wrap: wrap; justify-content: center; }

/* ——— Agenda ——— */
.ag-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ag-filt { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.ag-f { padding: .3rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; color: var(--text); text-decoration: none; background: var(--surface); }
.ag-f.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.ag-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .ag-wrap { grid-template-columns: 1fr; } }
.ag-mnav { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .ag-mnav h2 { margin: 0; text-transform: capitalize; min-width: 10ch; text-align: center; }
.ag-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ag-wd { background: var(--surface-2, var(--surface)); text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: .35rem 0; color: var(--muted); }
.ag-cell { background: var(--surface); min-height: 92px; padding: .25rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-cell.out { opacity: .45; } .ag-cell.today .ag-dn { background: var(--text); color: var(--bg); }
.ag-dn { font-size: .78rem; font-weight: 700; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; }
.ag-ev { display: block; font-size: .72rem; line-height: 1.25; padding: .12rem .3rem; border-radius: 5px; background: color-mix(in srgb, #8a96a6 22%, transparent); color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ev.going { background: color-mix(in srgb, #2e9d5b 25%, transparent); }
.ag-ev:hover { background: color-mix(in srgb, #8a96a6 40%, transparent); }
@media (max-width: 600px) { .ag-cell { min-height: 58px; } .ag-ev { font-size: 0; height: 6px; padding: 0; } }
.ag-side h2 { margin: 0 0 .5rem; }
.ag-card { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; margin-bottom: .45rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.ag-card:hover { border-color: var(--text); } .ag-card.going { border-left: 3px solid #2e9d5b; }
.ag-card strong { display: block; line-height: 1.25; } .ag-card .xs { display: block; }
.ag-date { display: grid; justify-items: center; min-width: 2.8rem; padding: .25rem .2rem; border-radius: 9px; background: linear-gradient(160deg, #e3e7ec, #a9b3bf); color: #1b2128; line-height: 1; }
.ag-date b { font-size: 1.25rem; } .ag-date span { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
.ag-n { text-align: right; white-space: nowrap; } .ag-my { font-weight: 700; color: var(--text); }
.ag-detail h1 { margin: .2rem 0 .4rem; } .ag-detail.cancelled h1 { text-decoration: line-through; opacity: .6; }
.ag-when { font-size: 1.05rem; font-weight: 600; }
.ag-desc { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.ag-rsvp { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ag-ppl { display: flex; flex-wrap: wrap; gap: .3rem; }
.dsc-agenda { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); text-decoration: none; transition: background .15s, color .15s; }
.dsc-agenda:hover { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
/* ——— EALIONE : traduction, résumés, transcription ——— */
.spin { display: inline-block; width: .9em; height: .9em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tr-out { margin-top: .35rem; padding: .35rem .55rem; border-left: 3px solid #8a96a6; border-radius: 0 8px 8px 0; background: color-mix(in srgb, #8a96a6 12%, transparent); white-space: normal; }
.tr-bar { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: .15rem; }
.tr-lang { font: inherit; font-size: .72rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); padding: 0 .2rem; }
.bubble { position: relative; }
.bb-tr { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: .75rem; cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; padding: 0; }
.bubble:hover .bb-tr, .bb-tr:focus-visible { opacity: 1; }
@media (hover: none) { .bb-tr { opacity: .7; } }
.att-tr { margin-top: .25rem; max-width: 420px; } .att-tr summary { cursor: pointer; } .att-tr p { margin: .2rem 0 0; white-space: pre-wrap; }
.ea-sum .md h1, .ea-sum .md h2, .ea-sum .md h3 { font-size: 1rem; margin: .8rem 0 .3rem; }
.vbtn.cc { font: 800 .78rem/1 system-ui, sans-serif; letter-spacing: .02em; }
.vbtn.cc.on { background: #eef1f4; color: #0f1317; }
.vcc-box { margin: .4rem auto; width: min(760px, calc(100% - 1.2rem)); display: flex; align-items: flex-end; gap: .5rem; }
.vcc-lines { flex: 1; min-width: 0; background: rgba(0,0,0,.72); color: #fff; border-radius: 10px; padding: .45rem .7rem; font-size: 1.02rem; line-height: 1.35; max-height: 7.5em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.vcc-lines b { color: #c9cfd6; font-weight: 700; margin-right: .3rem; } .vcc-lines .live { opacity: .75; } .vcc-lines .muted { color: rgba(255,255,255,.6); font-size: .85rem; }
.vcc-sum { flex: none; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55); color: #fff; border-radius: 10px; padding: .45rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; }
.vcc-sum:hover { background: rgba(0,0,0,.75); }
/* ——— Identité citoyenne ——— */
.verif-badge { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-left: .3em; border-radius: 50%; font-size: .62em; font-weight: 900; color: #1b2128; vertical-align: .25em;
  background: linear-gradient(145deg, #f4f6f8, #b9c2cc 55%, #8a96a6); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.35); }
.verif-badge.sm { font-size: .7rem; width: 1.15rem; height: 1.15rem; vertical-align: .05em; }
.id-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.id-shot { aspect-ratio: 1.58; border: 2px dashed var(--border); border-radius: 12px; display: grid; place-items: center; cursor: pointer; background: center / cover no-repeat var(--surface); text-align: center; }
.id-shot:hover { border-color: var(--text); } .id-shot.has { border-style: solid; } .id-shot.has .id-ph { display: none; }
.id-ph { display: grid; gap: .1rem; font-size: 1.6rem; } .id-ph b { font-size: .9rem; }
.idv-dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: .7rem 0; font-size: .92rem; } .idv-dl dt { color: var(--muted); } .idv-dl dd { margin: 0; }
.idv-files { display: flex; gap: .6rem; flex-wrap: wrap; } .idv-files a { display: grid; gap: .2rem; text-decoration: none; color: var(--text); }
.idv-files img { height: 160px; max-width: 260px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.ag-filt button.ag-f { font: inherit; font-size: .85rem; cursor: pointer; }
/* ——— Fenêtres flottantes en verre : amis en ligne, discussions, EALIONE (Administration › Verre et effets) ——— */
body.fw-glass .dock-contacts, body.fw-glass .chatwin, body.fw-glass .ealione {
  background: var(--fw-tint, rgba(255,255,255,.6)); -webkit-backdrop-filter: blur(var(--fw-blur, 18px)) saturate(var(--fw-sat, 150%)); backdrop-filter: blur(var(--fw-blur, 18px)) saturate(var(--fw-sat, 150%));
  border-color: var(--fw-border, rgba(255,255,255,.4)); border-radius: var(--fw-radius, 14px) var(--fw-radius, 14px) 0 0;
  box-shadow: 0 10px 34px var(--fw-shadow, rgba(11,16,32,.28)), inset 0 1px 0 var(--fw-border, rgba(255,255,255,.4)); }
[data-theme="dark"] body.fw-glass .dock-contacts, [data-theme="dark"] body.fw-glass .chatwin, [data-theme="dark"] body.fw-glass .ealione {
  background: var(--fw-tint-d, rgba(22,27,36,.65)); border-color: var(--fw-border-d, rgba(255,255,255,.14)); box-shadow: 0 10px 34px rgba(0,0,0,.45), inset 0 1px 0 var(--fw-border-d, rgba(255,255,255,.14)); }
body.fw-glass .cw-body, body.fw-glass .ea-body { background: color-mix(in srgb, var(--surface-2) var(--fw-inner, 15%), transparent); }
body.fw-glass .cw-head, body.fw-glass .cw-form, body.fw-glass .dock-list, body.fw-glass .ea-body, body.fw-glass .ealione .cw-form { border-color: color-mix(in srgb, var(--border) 55%, transparent); }
body.fw-glass .cw-body .bubble:not(.mine), body.fw-glass .ea-body .bubble:not(.mine) { background: color-mix(in srgb, var(--surface) var(--fw-bubble, 70%), transparent); border-color: color-mix(in srgb, var(--border) 60%, transparent); }
body.fw-glass .cw-form .input, body.fw-glass .ealione .cw-form .input { background: color-mix(in srgb, var(--surface) 55%, transparent); }
body.fw-glass .dock .member:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
body.fw-glass .ealione { border-radius: 0 var(--fw-radius, 14px) 0 0; } body.fw-glass .dock-contacts { border-radius: var(--fw-radius, 14px) 0 0 0; }

/* ——— Arborescence : tutoriel des commandes ——— */
.map-help { pointer-events: auto; width: 430px; max-width: calc(100vw - 2rem); max-height: 54vh; overflow: auto; background: rgba(18,22,27,.86); color: #dfe5ea; border: 1px solid #3a434d; border-radius: 12px; padding: .55rem .75rem .65rem; font-size: .8rem; backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.map-help.hidden { display: none; }
.mh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.mh-x { background: none; border: 0; color: inherit; cursor: pointer; font-size: .9rem; opacity: .7; } .mh-x:hover { opacity: 1; }
.map-help table { border-collapse: collapse; width: 100%; } .map-help td, .map-help th { padding: .18rem .3rem; vertical-align: top; text-align: left; }
.map-help th { font-weight: 600; white-space: nowrap; color: #fff; } .map-help td:first-child { opacity: .75; width: 1.2em; } .map-help td:last-child { color: #b9c3cd; }
.map-help kbd { display: inline-block; min-width: 1.5em; padding: 0 .3em; border: 1px solid #56616d; border-bottom-width: 2px; border-radius: 5px; background: #262d35; font: 600 .74rem/1.45 ui-monospace, Consolas, monospace; text-align: center; color: #eef1f4; }
#map-help.on, #t-help.on { background: rgba(238,241,244,.9); color: #12161b; }

/* ——— Effets allégés (Paramètres › Apparence) : aucun flou d'arrière-plan, aucun reflet animé, pas de compresseur ——— */
html.fx-lite *, html.fx-lite *::before, html.fx-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.fx-lite .msg.pinged::after { animation: none !important; }
html.fx-lite body.lc-fond .dsc.has-bg::before { filter: none !important; }
/* ——— Verre précalculé (espaces) : l'image floutée est calculée une fois, chaque plaque l'affiche à sa place ——— */
body.glass-baked .dsc.baked { --gt: var(--g-tint, rgba(255,255,255,.42)); }
[data-theme="dark"] body.glass-baked .dsc.baked { --gt: var(--g-tint-d, rgba(22,27,36,.42)); }
body.glass-baked .dsc.baked .dsc-servers, body.glass-baked .dsc.baked .dsc-side, body.glass-baked .dsc.baked .dsc-members,
body.glass-baked .dsc.baked .dsc-main .dsc-top, body.glass-baked.glass-msg .dsc.baked .msg, body.glass-baked.glass-msg .dsc.baked .compose-box,
body.glass-baked.glass-msg .dsc.baked .welcome, body.glass-baked .dsc.baked .cat-salons {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-repeat: no-repeat !important; }
body.glass-baked .dsc.baked .dsc-servers, body.glass-baked .dsc.baked .dsc-side, body.glass-baked .dsc.baked .dsc-members {
  --t: color-mix(in srgb, var(--surface-2) var(--a-cols, 35%), transparent);
  background-image: linear-gradient(var(--t), var(--t)), var(--gb-cols) !important; background-attachment: scroll, fixed !important;
  background-size: auto, var(--gb-size) !important; background-position: 0 0, var(--gb-pos) !important; }
body.glass-baked .dsc.baked .dsc-main .dsc-top {
  --t: color-mix(in srgb, var(--surface) calc(var(--a-chat, 45%) + 20%), transparent);
  background-image: linear-gradient(var(--t), var(--t)), var(--gb-top) !important; background-attachment: scroll, fixed !important;
  background-size: auto, var(--gb-size) !important; background-position: 0 0, var(--gb-pos) !important; }
body.glass-baked.glass-msg .dsc.baked .msg, body.glass-baked.glass-msg .dsc.baked .compose-box, body.glass-baked.glass-msg .dsc.baked .welcome {
  background-image: linear-gradient(var(--gt), var(--gt)), var(--gb-msgs) !important; background-attachment: scroll, fixed !important;
  background-size: auto, var(--gb-size) !important; background-position: 0 0, var(--gb-pos) !important; }
body.glass-baked.glass-msg .dsc.baked .msg.pinged {
  background-image: var(--men-bg), linear-gradient(var(--gt), var(--gt)), var(--gb-msgs) !important; background-attachment: scroll, scroll, fixed !important;
  background-size: auto, auto, var(--gb-size) !important; background-position: 0 0, 0 0, var(--gb-pos) !important; }
body.glass-baked.glass-msg .dsc.baked .msg.replying {
  background-image: linear-gradient(90deg, rgba(91,141,239,.22), rgba(91,141,239,.06)), linear-gradient(var(--gt), var(--gt)), var(--gb-msgs) !important; background-attachment: scroll, scroll, fixed !important;
  background-size: auto, auto, var(--gb-size) !important; background-position: 0 0, 0 0, var(--gb-pos) !important; }
body.glass-baked .dsc.baked.baked-fond::before { filter: none !important; background: var(--gb-full) center / cover no-repeat !important; }

/* ——— Bannières de pseudo : onglet des discussions, membres en ligne des espaces (Administration › Boutique et bannières) ——— */
.has-plate { position: relative; isolation: isolate; overflow: hidden; }
.has-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) var(--plate-veil, 55%), transparent) 0%, color-mix(in srgb, var(--surface) calc(var(--plate-veil, 55%) * .55), transparent) 50%, transparent 85%), var(--plate) center / cover no-repeat; }
.member.has-plate { margin-top: 2px; margin-bottom: 2px; padding-top: .35rem; padding-bottom: .35rem; }
.member.has-plate .mem-n { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--surface) 80%, transparent)); }
.chatwin .cw-head.has-plate { border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.chatwin .cw-head.has-plate .cw-name strong, .chatwin .cw-head.has-plate .xs { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--surface) 85%, transparent)); }
/* boutique : aperçus des bannières et arrière-plans */
.shop-sec { margin-top: 1.6rem; } .shop-sec h2 { margin-bottom: .2rem; }
.art-prev { width: 100%; border-radius: 10px; background: center / cover no-repeat; border: 1px solid var(--border); }
.art-prev.plaque { aspect-ratio: 5 / 1; display: flex; align-items: center; gap: .5rem; padding: 0 .6rem; position: relative; isolation: isolate; overflow: hidden; }
.art-prev.fond { aspect-ratio: 3 / 1; }
.shop .card .equipped { font-size: .75rem; font-weight: 700; }
.art-adm { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.art-adm .card { display: grid; gap: .4rem; } .art-adm .card.off { opacity: .55; }
.cw-head.has-plate button, .cw-head.has-plate .call-btn { background: color-mix(in srgb, var(--surface) 62%, transparent); border-radius: 50%; color: var(--text); }
/* ——— Catégories d'amis : poignée, trait d'insertion, couleurs ——— */
.fg-grip { cursor: grab; opacity: .45; padding: 0 .2rem 0 0; font-size: .8rem; user-select: none; touch-action: none; }
.fg-head:hover .fg-grip, .pf-group-h:hover .fg-grip { opacity: .9; }
.fg-head .fg-edit { opacity: 0; transition: opacity .15s; } .fg-head:hover .fg-edit { opacity: .8; }
@media (hover: none) { .fg-head .fg-edit { opacity: .6; } }
.fg.drop-before, .pf-group.drop-before { box-shadow: inset 0 3px 0 -1px #5b8def; }
.fg.drop-after, .pf-group.drop-after { box-shadow: inset 0 -3px 0 -1px #5b8def; }
.fg-name { font-weight: 700; }
.fg-colors { display: grid; grid-template-columns: auto 44px; gap: .4rem .8rem; align-items: center; justify-content: start; }
.fg-colors input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; }
.pf-group-h { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.pf-group.dragging { opacity: .5; }
/* amis glissés : trait d'insertion, rien de sélectionné pendant le glisser */
.dock .member.drop-before { box-shadow: inset 0 2px 0 #5b8def; } .dock .member.drop-after { box-shadow: inset 0 -2px 0 #5b8def; }
.pf-friends a.drop-before { box-shadow: -3px 0 0 #5b8def; } .pf-friends a.drop-after { box-shadow: 3px 0 0 #5b8def; }
.pf-friends a[data-friend] { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.pf-friends a[data-friend] img { -webkit-user-drag: none; pointer-events: none; }
.pf-group.drop-on { background: color-mix(in srgb, #5b8def 10%, transparent); border-radius: 10px; }
.dock [data-friend] { cursor: grab; }
body.dragging-now, body.dragging-now * { cursor: grabbing !important; user-select: none; }
/* rangement des amis : la photo se prend, le pseudo se clique */
.dock [data-friend] { cursor: pointer; } .dock [data-friend] .st { cursor: grab; }
.fg-pick { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: .25rem; }
.fg-pk { display: flex; align-items: center; gap: .5rem; padding: .25rem .4rem; border-radius: 8px; cursor: pointer; }
.fg-pk:hover { background: var(--surface-2); } .fg-pk[hidden] { display: none; }
/* barre d'actions du profil : partager / direct / vue spatiale à gauche, le reste à droite ; boutons arrondis */
.pf-v2 .pf-hero-act { justify-content: space-between; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
body.pf-gauche .pf-v2 .pf-hero-act { justify-content: space-between; }
.pf-v2 .pf-actbar-l { justify-content: flex-start; }
.pf-v2 .pf-actbar .btn, .pf-v2 .pf-actbar .pf-sup-btn { border-radius: 999px; padding-left: .85rem; padding-right: .85rem; }
.pf-v2 .pf-actbar { border-radius: 999px; }
@media (max-width: 960px) { .pf-v2 .pf-actbar { border-radius: 18px; } .pf-v2 .pf-actbar-l { width: auto; } }
/* soutiens du profil : compacts (qui il soutient directement, sans la chaîne) — bannière moins haute */
.pf-v2 .pf-hero .pf-tabs { gap: .35rem; }
.pf-v2 .pf-hero .pf-tabs .support-box { padding: .4rem .7rem .45rem; }
.pf-v2 .pf-hero .pf-tabs .support-box .lab { margin-bottom: .15rem; }
.pf-v2 .sup-row { display: flex; align-items: center; gap: .5rem; min-height: 30px; }
.pf-v2 .sup-row .target { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.pf-v2 .sup-row .target strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-v2 .sup-row .xs { margin-left: .2rem; }
.sup-x { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: transparent; color: inherit; font-size: .7rem; cursor: pointer; opacity: .6; }
.sup-x:hover { opacity: 1; background: rgba(224,38,63,.75); color: #fff; border-color: transparent; }
.shop-help { margin: 0 0 1rem; padding: .6rem .9rem; border-radius: 12px; background: color-mix(in srgb, #5b8def 10%, transparent); border: 1px solid color-mix(in srgb, #5b8def 30%, transparent); font-size: .9rem; }
.art-prev.plaque strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* détourage : damier sous la photo pour voir la transparence */
.crop-stage.cut { background: repeating-conic-gradient(#c9cfd6 0 25%, #eef1f4 0 50%) 0 0 / 18px 18px; }

/* ——— Fond des espaces : couche fixe à l'échelle de l'écran (l'espace la dévoile, sans jamais la redimensionner) ——— */
#sbg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#sbg, .sbg-probe { background: var(--space-bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
[data-theme="dark"] #sbg, [data-theme="dark"] .sbg-probe { background: linear-gradient(rgba(6,8,12,.5), rgba(6,8,12,.5)), var(--space-bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
[data-theme="dark"] #sbg.has-night, [data-theme="dark"] .sbg-probe.has-night { background: var(--space-bg-n); background-size: cover; background-position: center; background-repeat: no-repeat; }
html.th-origine #sbg.has-ori, html.th-origine .sbg-probe.has-ori { background: var(--space-bg-o); background-size: cover; background-position: center; background-repeat: no-repeat; }
html.th-origine #sbg.no-ori { background: none; }
body.sbg-on .dsc.has-bg, [data-theme="dark"] body.sbg-on .dsc.has-bg, [data-theme="dark"] body.sbg-on .dsc.has-bg.has-night { background: transparent !important; }
body.sbg-on.lc-fond .dsc.has-bg::before { display: none; }
body.sbg-on.lc-fond #sbg { filter: var(--lc, none); }
body.sbg-on.lc-fond.dsc-anim #sbg { filter: none; }
body.glass-baked.sbg-on .dsc.baked.baked-fond ~ #sbg, body.glass-baked.sbg-on.gb-fond #sbg { filter: none; background: var(--gb-full-root) center / cover no-repeat; }
.danger-zone { border: 2px solid #e0263f !important; background: color-mix(in srgb, #e0263f 7%, var(--surface)) !important; }
.danger-zone .card-title { color: #e0263f; }
/* soutiens sur une ligne ; actions sous les soutiens, alignées à droite (le haut du profil est moins haut) */
.pf-v2 .pf-hero .pf-tabs .support-box.sup-one { display: flex; align-items: center; gap: .55rem; padding: .35rem .6rem .35rem .45rem; }
.pf-v2 .support-box.sup-one .lab { margin: 0; flex: none; }
.pf-v2 .support-box.sup-one .sup-row { flex: 1; min-width: 0; min-height: 30px; }
.pf-v2 .support-box.sup-one .sup-xy { flex: none; white-space: nowrap; opacity: .8; }
.pf-v2 .pf-hero .pf-tabs { display: flex; flex-direction: column; align-self: stretch; }
.pf-v2 .pf-tabs .pf-hero-act { position: static; margin: auto 0 0; padding-top: 1rem !important; padding: 0; align-self: flex-end; width: max-content; max-width: calc(100vw - 3rem); display: flex; justify-content: flex-end; pointer-events: auto; }
.pf-v2 .pf-tabs .pf-actbar { flex-wrap: nowrap; }
.pf-v2 .pf-actbar .pf-ico { padding-left: .6rem; padding-right: .6rem; }
.pf-act-sep { width: 1px; align-self: stretch; margin: .2rem .15rem; background: color-mix(in srgb, currentColor 25%, transparent); }
@media (max-width: 960px) { .pf-v2 .pf-tabs .pf-hero-act { align-self: stretch; width: auto; } .pf-v2 .pf-tabs .pf-actbar { flex-wrap: wrap; } }
.live-pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e0263f; margin-right: .35rem; vertical-align: .1em; box-shadow: 0 0 0 0 rgba(224,38,63,.6); animation: liveDot 1.6s infinite; }
.pf-v2 .sup-one .r-term { white-space: nowrap; } .pf-v2 .sup-one .sup-row .xs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.switch.switch-red { background: color-mix(in srgb, #d63c3c 35%, var(--border-strong)); }
.switch.switch-red:checked { background: #d63c3c; }
.danger-zone .dz-title { color: #d63c3c; display: block; }

/* ——— Style de bannière derrière le pseudo (membres en ligne des espaces, quand pas de bannière de pseudo) ——— */
.has-plate.bs-nuit { --plate: radial-gradient(ellipse at 70% 30%, #2b3a55, #0b0f17 70%); }
.has-plate.bs-ardoise { --plate: linear-gradient(135deg, #3b4652, #1e252d); }
.has-plate.bs-aube { --plate: linear-gradient(120deg, #f6d6b8, #e7b7c8, #b7c6e7); }
.has-plate.bs-or-brosse { --plate: var(--brushed), linear-gradient(120deg, #6d5530, #d9b47f 35%, #f4e1b9 50%, #b8893f 70%, #5b4626); }
.has-plate.bs-nebuleuse { --plate: radial-gradient(circle at 20% 40%, #7c3aed88, transparent 40%), radial-gradient(circle at 75% 60%, #db277788, transparent 45%), linear-gradient(135deg, #0b1023, #1b1446); }
.has-plate.bs-tricolore { --plate: linear-gradient(110deg, #1d3fae 0 34%, #f1f3f6 34% 66%, #c8102e 66%); }
/* ——— Menus déroulants et miniatures en verre (Administration › Verre et effets) ——— */
body.menu-glass .hdr-drop, body.menu-glass .mini-profile, body.menu-glass .ctx-menu, body.menu-glass .rc-menu, body.menu-glass .mention-pop, body.menu-glass .pick-pop, body.menu-glass .vov-menu {
  background: var(--fw-tint, rgba(255,255,255,.6)); -webkit-backdrop-filter: blur(var(--fw-blur, 18px)) saturate(var(--fw-sat, 150%)); backdrop-filter: blur(var(--fw-blur, 18px)) saturate(var(--fw-sat, 150%));
  border-color: var(--fw-border, rgba(255,255,255,.4)); box-shadow: 0 14px 40px var(--fw-shadow, rgba(11,16,32,.28)), inset 0 1px 0 var(--fw-border, rgba(255,255,255,.4)); }
[data-theme="dark"] body.menu-glass .hdr-drop, [data-theme="dark"] body.menu-glass .mini-profile, [data-theme="dark"] body.menu-glass .ctx-menu, [data-theme="dark"] body.menu-glass .rc-menu, [data-theme="dark"] body.menu-glass .mention-pop, [data-theme="dark"] body.menu-glass .pick-pop, [data-theme="dark"] body.menu-glass .vov-menu {
  background: var(--fw-tint-d, rgba(22,27,36,.65)); border-color: var(--fw-border-d, rgba(255,255,255,.14)); box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 var(--fw-border-d, rgba(255,255,255,.14)); }
body.menu-glass .mini-profile .mini-body { background: transparent; }

/* ——— Voile derrière le pseudo posé sur une bannière (Administration › Boutique et bannières) : ombre ou lumière,
   intensité (jusqu'à opaque), portée et fondu ; liseré lumineux et reflet en option ——— */
.has-plate.nfx-t-clair, .has-plate.nfx-t-auto { --nfx-bg: 255,255,255; --nfx-fg: #10141b; }
.has-plate.nfx-t-sombre, [data-theme="dark"] .has-plate.nfx-t-auto, [data-theme="dark"].has-plate.nfx-t-auto { --nfx-bg: 6,8,12; --nfx-fg: #f4f6f9; }
.has-plate.nfx-holo { --member-txt: var(--nfx-fg); --member-txt-d: var(--nfx-fg); color: var(--nfx-fg); }
.has-plate.nfx-holo::before { background:
    linear-gradient(90deg, rgba(var(--nfx-bg), var(--nfx, .75)) 0, rgba(var(--nfx-bg), var(--nfx, .75)) calc(var(--nfx-n, 45%) + var(--nfx-sh, 0px)), rgba(var(--nfx-bg), var(--nfx-res)) calc(var(--nfx-n, 45%) + var(--nfx-sh, 0px) + var(--nfx-w, 90px)), rgba(var(--nfx-bg), var(--nfx-res)) 100%),
    var(--plate) center / cover no-repeat; }
.has-plate.nfx-holo.nfx-edge { box-shadow: inset 3px 0 0 var(--nfx-c), inset 34px 0 34px -22px color-mix(in srgb, var(--nfx-c) 70%, transparent), -8px 0 22px -12px color-mix(in srgb, var(--nfx-c) 70%, transparent); }
.has-plate.nfx-holo.nfx-edge::before { background:
    linear-gradient(90deg, color-mix(in srgb, var(--nfx-c) 45%, transparent) 0%, color-mix(in srgb, var(--nfx-c) 12%, transparent) calc(var(--nfx-r, .7) * 25%), transparent calc(var(--nfx-r, .7) * 50%)),
    linear-gradient(90deg, rgba(var(--nfx-bg), var(--nfx, .75)) 0, rgba(var(--nfx-bg), var(--nfx, .75)) calc(var(--nfx-n, 45%) + var(--nfx-sh, 0px)), rgba(var(--nfx-bg), var(--nfx-res)) calc(var(--nfx-n, 45%) + var(--nfx-sh, 0px) + var(--nfx-w, 90px)), rgba(var(--nfx-bg), var(--nfx-res)) 100%),
    var(--plate) center / cover no-repeat; }
.has-plate.nfx-holo.nfx-sh::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 38%, rgba(127,227,255,.3) 44%, rgba(255,255,255,.6) 50%, color-mix(in srgb, var(--nfx-c) 50%, transparent) 56%, transparent 62% 100%);
  background-size: 260% 100%; background-repeat: no-repeat; animation: nfxSheen 6s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes nfxSheen { 0% { background-position: 120% 0; } 55%, 100% { background-position: -20% 0; } }
.member.has-plate.nfx-sh:nth-child(3n+2)::after { animation-delay: -2s; } .member.has-plate.nfx-sh:nth-child(3n)::after { animation-delay: -4s; }
.has-plate.nfx-holo :is(.mem-n, .cw-name > strong, .cw-name .xs), .art-prev.has-plate.nfx-holo > strong {
  /* ombre portée en filtre (et non text-shadow) : les pseudos en dégradé de la boutique restent intacts, sans voile sombre dessus */
  text-shadow: none; filter: drop-shadow(0 0 calc(1px + var(--nfx, .75) * 4px) rgba(var(--nfx-bg), calc(.3 + var(--nfx, .75) * .6))) drop-shadow(0 1px 1px rgba(var(--nfx-bg), calc(var(--nfx, .75) * .7))); }
.has-plate.nfx-holo :is(.mem-n, .cw-name > strong) * { text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .has-plate.nfx-sh::after { animation: none; opacity: 0; } }
html.fx-lite .has-plate.nfx-sh::after { animation: none; opacity: 0; }
.nfx-prev { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.nfx-col { display: grid; gap: .3rem; padding: .5rem; border-radius: 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.nfx-col .member { pointer-events: none; border-radius: 8px; }

/* ——— Menu ▾ à côté du nom de l'espace ——— */
.dsc-nm { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.dsc-nm .dsc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsc-caret { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; opacity: .75; transition: background .15s, opacity .15s, transform .15s; }
.dsc-caret:hover, .dsc-caret[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); opacity: 1; }
.dsc-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.dsc-caret svg { transition: transform .15s; }
.ctx-sep { height: 1px; margin: .25rem .4rem; background: var(--border); }

/* ——— #espace/salon : salon d'un autre espace, accès restreint ——— */
a.mention.xref { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; vertical-align: baseline; }
a.mention.xref .xr-h { opacity: .7; font-weight: 700; }
a.mention.xref .xr-sv { display: inline-flex; align-items: center; gap: .2rem; margin-left: .15rem; padding-left: .35rem; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: .8em; opacity: .75; }
.xr-logo { width: 14px; height: 14px; border-radius: 4px; object-fit: cover; vertical-align: -2px; }
a.mention.xref.locked { background: color-mix(in srgb, #d93b41 12%, var(--surface-3)); }
a.mention.xref.missing { opacity: .6; cursor: default; text-decoration: line-through; }
.xref-pop { position: fixed; z-index: 150; width: 300px; max-width: calc(100vw - 16px); padding: .8rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 40px rgba(0,0,0,.25); animation: pop .14s ease-out; }
.xref-pop .xp-t { margin: 0 0 .3rem; font-weight: 700; }
.xref-pop .xp-sv { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .45rem .1rem .15rem; margin-top: .2rem; border-radius: 999px; background: var(--surface-3); color: var(--text); text-decoration: none; }
.xref-pop .xp-sv img, .xref-pop .xp-ph { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; display: inline-grid; place-items: center; background: var(--surface-2); font-size: .75rem; }
body.menu-glass .xref-pop { background: var(--fw-tint, rgba(255,255,255,.6)); -webkit-backdrop-filter: blur(var(--fw-blur, 18px)) saturate(var(--fw-sat, 150%)); backdrop-filter: blur(var(--fw-blur, 18px)) saturate(var(--fw-sat, 150%)); border-color: var(--fw-border, rgba(255,255,255,.4)); }
[data-theme="dark"] body.menu-glass .xref-pop { background: var(--fw-tint-d, rgba(22,27,36,.65)); border-color: var(--fw-border-d, rgba(255,255,255,.14)); }

/* ——— Cosmétiques intégrés de la boutique (src/cosmetics.js) ——— */
.name-braise { background: linear-gradient(90deg, #f97316, #dc2626); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-menthe { background: linear-gradient(90deg, #10b981, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-lavande { background: linear-gradient(90deg, #8b5cf6, #e879f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-glace { background: linear-gradient(90deg, #38bdf8, #7dd3fc 50%, #0284c7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-couchant { background: linear-gradient(90deg, #f59e0b, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-foret { background: linear-gradient(90deg, #166534, #65a30d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-chrome { background: linear-gradient(180deg, #e5e7eb 0%, #6b7280 45%, #f9fafb 55%, #4b5563 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-galaxie { background: linear-gradient(90deg, #4338ca, #c026d3 50%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-cyber { background: linear-gradient(90deg, #06b6d4, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name-cyber { filter: drop-shadow(0 0 4px rgba(168,85,247,.45)); }
.name-neon { color: #ff3bd4; text-shadow: 0 0 4px rgba(255,59,212,.75), 0 0 12px rgba(255,59,212,.45); }
[data-theme="light"] .name-neon, :root:not([data-theme]) .name-neon { color: #d6189f; }
.name-pixel { color: #16a34a; font-family: ui-monospace, 'Courier New', monospace; letter-spacing: .02em; text-shadow: 1px 1px 0 rgba(0,0,0,.25); }
[data-theme="dark"] .name-pixel { color: #4ade80; }
.name-arc { background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nameArc 6s linear infinite; }
.name-holo { background: linear-gradient(110deg, #7dd3fc, #c4b5fd, #f0abfc, #fde68a, #86efac, #7dd3fc); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nameArc 5s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px rgba(196,181,253,.5)); }
@keyframes nameArc { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .name-arc, .name-holo { animation: none; } }
.av.frame-argent { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #cbd5e1, 0 0 6px 2px rgba(203,213,225,.5); }
.av.frame-bronze { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #b0703c; }
.av.frame-double-or { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #c9a46a, 0 0 0 6px var(--surface), 0 0 0 8px #e9c27f; }
.av.frame-tricolore { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #1d4ed8, 0 0 0 6px #f1f5f9, 0 0 0 8px #dc2626; }
.av.frame-neon-cyan { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #22d3ee, 0 0 10px 3px rgba(34,211,238,.6); }
.av.frame-neon-rose { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #f472b6, 0 0 10px 3px rgba(244,114,182,.6); }
.av.frame-givre { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #bae6fd, 0 0 12px 4px rgba(186,230,253,.7); }
.av.frame-feuille { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #4ade80; }
.av.frame-braise { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #f97316, 0 0 10px 3px rgba(249,115,22,.55); }
.av.frame-arc { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px #ef4444, 0 0 0 4px #f59e0b, 0 0 0 5px #22c55e, 0 0 0 6px #06b6d4, 0 0 0 7px #8b5cf6; }
.av.frame-pixel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #16a34a, 4px 4px 0 2px rgba(22,163,74,.35); }
.av.frame-braise { animation: frBraise 2.4s ease-in-out infinite; } @keyframes frBraise { 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #fb923c, 0 0 16px 5px rgba(249,115,22,.7); } }
@media (prefers-reduced-motion: reduce) { .av.frame-braise { animation: none; } }
.banner.style-aurore-boreale { background: radial-gradient(ellipse 60% 80% at 25% 100%, rgba(52,211,153,.75), transparent 60%), radial-gradient(ellipse 50% 70% at 70% 90%, rgba(167,139,250,.7), transparent 60%), linear-gradient(180deg, #050816, #0f1f3a); }
.has-plate.bs-aurore-boreale { --plate: radial-gradient(ellipse 60% 80% at 25% 100%, rgba(52,211,153,.75), transparent 60%), radial-gradient(ellipse 50% 70% at 70% 90%, rgba(167,139,250,.7), transparent 60%), linear-gradient(180deg, #050816, #0f1f3a); }
.banner.style-galaxie { background: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 35%, #fff, transparent), radial-gradient(1px 1px at 80% 60%, #fff, transparent), radial-gradient(1px 1px at 90% 15%, #fff, transparent), radial-gradient(circle at 70% 50%, rgba(192,38,211,.55), transparent 45%), radial-gradient(circle at 30% 60%, rgba(67,56,202,.6), transparent 50%), #070a1a; }
.has-plate.bs-galaxie { --plate: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 35%, #fff, transparent), radial-gradient(1px 1px at 80% 60%, #fff, transparent), radial-gradient(1px 1px at 90% 15%, #fff, transparent), radial-gradient(circle at 70% 50%, rgba(192,38,211,.55), transparent 45%), radial-gradient(circle at 30% 60%, rgba(67,56,202,.6), transparent 50%), #070a1a; }
.banner.style-synthwave { background: linear-gradient(transparent 62%, rgba(244,114,182,.0) 62%), repeating-linear-gradient(90deg, rgba(236,72,153,.55) 0 1px, transparent 1px 34px), radial-gradient(circle at 50% 62%, #fbbf24 0 14%, #f472b6 14.5% 22%, transparent 22.5%), linear-gradient(180deg, #1e1b4b 0%, #7c3aed 45%, #db2777 62%, #12082c 62%); }
.has-plate.bs-synthwave { --plate: linear-gradient(transparent 62%, rgba(244,114,182,.0) 62%), repeating-linear-gradient(90deg, rgba(236,72,153,.55) 0 1px, transparent 1px 34px), radial-gradient(circle at 50% 62%, #fbbf24 0 14%, #f472b6 14.5% 22%, transparent 22.5%), linear-gradient(180deg, #1e1b4b 0%, #7c3aed 45%, #db2777 62%, #12082c 62%); }
.banner.style-ocean { background: radial-gradient(ellipse at 30% 0%, rgba(56,189,248,.5), transparent 60%), linear-gradient(180deg, #0c4a6e, #082f49 60%, #020617); }
.has-plate.bs-ocean { --plate: radial-gradient(ellipse at 30% 0%, rgba(56,189,248,.5), transparent 60%), linear-gradient(180deg, #0c4a6e, #082f49 60%, #020617); }
.banner.style-foret { background: radial-gradient(ellipse at 70% 10%, rgba(253,230,138,.45), transparent 50%), linear-gradient(160deg, #14532d, #166534 45%, #052e16); }
.has-plate.bs-foret { --plate: radial-gradient(ellipse at 70% 10%, rgba(253,230,138,.45), transparent 50%), linear-gradient(160deg, #14532d, #166534 45%, #052e16); }
.banner.style-braise { background: radial-gradient(ellipse at 50% 120%, #fbbf24, transparent 55%), linear-gradient(180deg, #450a0a, #b91c1c 60%, #f97316); }
.has-plate.bs-braise { --plate: radial-gradient(ellipse at 50% 120%, #fbbf24, transparent 55%), linear-gradient(180deg, #450a0a, #b91c1c 60%, #f97316); }
.banner.style-glace { background: linear-gradient(160deg, #f0f9ff, #bae6fd 40%, #7dd3fc 70%, #e0f2fe); }
.has-plate.bs-glace { --plate: linear-gradient(160deg, #f0f9ff, #bae6fd 40%, #7dd3fc 70%, #e0f2fe); }
.banner.style-sakura { background: radial-gradient(circle at 15% 30%, rgba(255,255,255,.8) 0 2px, transparent 3px), radial-gradient(circle at 60% 20%, rgba(255,255,255,.7) 0 2px, transparent 3px), radial-gradient(circle at 80% 70%, rgba(255,255,255,.8) 0 2px, transparent 3px), linear-gradient(135deg, #fbcfe8, #f9a8d4 50%, #fce7f3); }
.has-plate.bs-sakura { --plate: radial-gradient(circle at 15% 30%, rgba(255,255,255,.8) 0 2px, transparent 3px), radial-gradient(circle at 60% 20%, rgba(255,255,255,.7) 0 2px, transparent 3px), radial-gradient(circle at 80% 70%, rgba(255,255,255,.8) 0 2px, transparent 3px), linear-gradient(135deg, #fbcfe8, #f9a8d4 50%, #fce7f3); }
.banner.style-automne { background: linear-gradient(120deg, #78350f, #c2410c 35%, #ca8a04 65%, #7c2d12); }
.has-plate.bs-automne { --plate: linear-gradient(120deg, #78350f, #c2410c 35%, #ca8a04 65%, #7c2d12); }
.banner.style-marbre { background: linear-gradient(115deg, transparent 40%, rgba(148,163,184,.35) 42%, transparent 46%), linear-gradient(70deg, transparent 60%, rgba(148,163,184,.3) 61%, transparent 64%), linear-gradient(135deg, #f8fafc, #e2e8f0); }
.has-plate.bs-marbre { --plate: linear-gradient(115deg, transparent 40%, rgba(148,163,184,.35) 42%, transparent 46%), linear-gradient(70deg, transparent 60%, rgba(148,163,184,.3) 61%, transparent 64%), linear-gradient(135deg, #f8fafc, #e2e8f0); }
.banner.style-carbone { background: repeating-linear-gradient(45deg, #1f2937 0 6px, #111827 6px 12px), #111827; }
.has-plate.bs-carbone { --plate: repeating-linear-gradient(45deg, #1f2937 0 6px, #111827 6px 12px), #111827; }
.banner.style-hexagones { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 30%, transparent 32%) 0 0 / 28px 24px, radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 30%, transparent 32%) 14px 12px / 28px 24px, linear-gradient(120deg, #374151, #6b7280 50%, #1f2937); }
.has-plate.bs-hexagones { --plate: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 30%, transparent 32%) 0 0 / 28px 24px, radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 30%, transparent 32%) 14px 12px / 28px 24px, linear-gradient(120deg, #374151, #6b7280 50%, #1f2937); }
.banner.style-damier { background: conic-gradient(#111 25%, #f5f5f5 0 50%, #111 0 75%, #f5f5f5 0) 0 0 / 32px 32px, #f5f5f5; }
.has-plate.bs-damier { --plate: conic-gradient(#111 25%, #f5f5f5 0 50%, #111 0 75%, #f5f5f5 0) 0 0 / 32px 32px, #f5f5f5; }
.banner.style-arcade { background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px), radial-gradient(circle at 20% 40%, rgba(34,211,238,.55), transparent 35%), radial-gradient(circle at 80% 60%, rgba(244,114,182,.55), transparent 35%), linear-gradient(135deg, #0f172a, #312e81); }
.has-plate.bs-arcade { --plate: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px), radial-gradient(circle at 20% 40%, rgba(34,211,238,.55), transparent 35%), radial-gradient(circle at 80% 60%, rgba(244,114,182,.55), transparent 35%), linear-gradient(135deg, #0f172a, #312e81); }
.banner.style-feu-artifice { background: radial-gradient(circle at 25% 35%, rgba(250,204,21,.9) 0 2px, rgba(250,204,21,.25) 3px 24px, transparent 25px), radial-gradient(circle at 70% 30%, rgba(244,114,182,.9) 0 2px, rgba(244,114,182,.25) 3px 30px, transparent 31px), radial-gradient(circle at 55% 70%, rgba(56,189,248,.9) 0 2px, rgba(56,189,248,.25) 3px 22px, transparent 23px), linear-gradient(180deg, #020617, #1e1b4b); }
.has-plate.bs-feu-artifice { --plate: radial-gradient(circle at 25% 35%, rgba(250,204,21,.9) 0 2px, rgba(250,204,21,.25) 3px 24px, transparent 25px), radial-gradient(circle at 70% 30%, rgba(244,114,182,.9) 0 2px, rgba(244,114,182,.25) 3px 30px, transparent 31px), radial-gradient(circle at 55% 70%, rgba(56,189,248,.9) 0 2px, rgba(56,189,248,.25) 3px 22px, transparent 23px), linear-gradient(180deg, #020617, #1e1b4b); }

/* ——— Boutique ODA (shop.js) ——— */
.shop2 { --r-c: #94a3b8; }
.shop2 .r-commun, .sh-detail.r-commun, .sh-chip.r-commun { --r-c: #94a3b8; } .shop2 .r-rare, .sh-detail.r-rare, .sh-chip.r-rare { --r-c: #3b82f6; }
.shop2 .r-epique, .sh-detail.r-epique, .sh-chip.r-epique { --r-c: #a855f7; } .shop2 .r-legendaire, .sh-detail.r-legendaire, .sh-chip.r-legendaire { --r-c: #f97316; }
.sh-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.sh-bal { font-size: 1.05rem; padding: .45rem .9rem; }
.sh-tabs { display: flex; gap: .3rem; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.sh-tabs [role=tab] { font: inherit; font-weight: 600; border: 0; background: none; color: var(--muted); padding: .55rem .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.sh-tabs [role=tab][aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.sh-tabs [role=tab] em, .sh-cats em, .sh-chip em { font-style: normal; font-size: .75em; padding: 0 .4rem; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
.sh-ftoggle { display: none; margin-left: auto; }
.sh-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.sh-side { position: sticky; top: .8rem; display: grid; gap: .35rem; max-height: calc(100vh - 1.6rem); overflow-y: auto; padding-right: .3rem; }
.sh-h { margin: .7rem 0 .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sh-cats { display: grid; gap: 2px; }
.sh-cats button { font: inherit; font-size: .9rem; display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; text-align: left; }
.sh-cats button span { width: 1.3em; text-align: center; } .sh-cats button em { margin-left: auto; }
.sh-cats button:hover { background: var(--surface-2); } .sh-cats button[aria-current="true"] { background: var(--surface-3); font-weight: 600; }
.sh-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.sh-chip { font: inherit; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.sh-chip:hover { border-color: var(--border-strong); } .sh-chip[aria-pressed="true"], .sh-chip.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.sh-chip[aria-pressed="true"] em { background: color-mix(in srgb, var(--surface) 25%, transparent); color: inherit; }
.sh-rdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--r-c); box-shadow: 0 0 6px var(--r-c); flex: none; }
.sh-price-f { display: flex; align-items: center; gap: .5rem; } .sh-price-f input { flex: 1; min-width: 0; }
.sh-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.sh-on { display: flex; flex-wrap: wrap; gap: .3rem; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.sh-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 210px); gap: .8rem; overflow-x: auto; padding: .2rem .1rem .7rem; scroll-snap-type: x proximity; }
.sh-row > * { scroll-snap-align: start; }
.sh-shelf { margin-bottom: 1.2rem; } .sh-shelf-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .sh-shelf h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.sh-card { position: relative; font: inherit; text-align: left; color: var(--text); display: grid; grid-template-rows: auto 1fr auto; gap: .45rem; padding: .55rem; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s, border-color .15s; }
.sh-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 14px 14px 0 0; background: var(--r-c); opacity: .8; }
.sh-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.12), 0 0 0 1px color-mix(in srgb, var(--r-c) 45%, transparent); border-color: color-mix(in srgb, var(--r-c) 45%, var(--border)); }
.sh-card.owned { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.sh-info { display: grid; gap: .1rem; min-width: 0; } .sh-name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-meta { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--muted); }
.sh-foot { display: flex; align-items: center; justify-content: space-between; }
.sh-price { font-weight: 700; font-size: .9rem; } .sh-own { font-size: .78rem; font-weight: 600; color: #2f9e62; }
.sh-badge { position: absolute; top: .8rem; right: .8rem; z-index: 2; font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; background: var(--text); color: var(--surface); letter-spacing: .02em; }
.sh-badge.eq { background: #2f9e62; color: #fff; }
.shp { height: 96px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); }
.shp-name { font-size: 1.15rem; font-weight: 800; padding: 0 .5rem; text-align: center; } .shp-name span { display: inline-block; }
.shp-style { border-radius: 10px; } .shp-fond { background-size: cover; background-position: center; }
.shp-plate { padding: 0 .4rem; } .shp-plate .member { width: 100%; pointer-events: none; border-radius: 8px; }
.sh-feature { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }
.sh-feat { position: relative; font: inherit; color: var(--text); text-align: left; display: grid; border: 1px solid color-mix(in srgb, var(--r-c) 40%, var(--border)); border-radius: 16px; overflow: hidden; cursor: pointer; padding: 0; background: var(--surface);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--r-c) 18%, transparent); transition: transform .15s; }
.sh-feat:hover { transform: translateY(-3px); }
.sh-feat .shp { height: 130px; border-radius: 0; } .sh-feat .shp-name { font-size: 1.5rem; }
.sh-feat-t { display: grid; gap: .15rem; padding: .7rem .85rem .85rem; background: linear-gradient(180deg, color-mix(in srgb, var(--r-c) 10%, transparent), transparent); }
.sh-feat-t strong { font-size: 1.05rem; }
.sh-equipped { margin-bottom: 1.2rem; } .sh-equipped h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.sh-eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.sh-eq { display: grid; gap: .3rem; align-content: start; padding: .55rem; border: 1px dashed var(--border-strong); border-radius: 12px; }
.sh-eq-it { font: inherit; color: var(--text); text-align: left; display: grid; gap: .3rem; border: 0; padding: 0; background: none; cursor: pointer; } .sh-eq-it .shp { height: 64px; }
.sh-empty { text-align: center; padding: 3rem 1rem; } .sh-empty-ico { font-size: 2.6rem; margin: 0; }
.sh-detail { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.sh-d-x { position: absolute; top: -.4rem; right: -.4rem; }
.sh-d-prev { padding: 1rem; border-radius: 16px; background: radial-gradient(circle at 30% 0%, color-mix(in srgb, var(--r-c) 22%, transparent), transparent 60%), var(--surface-2); }
.sh-d-card { border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.sh-d-card .banner { height: 110px; }
.sh-d-id { display: flex; align-items: flex-end; gap: .7rem; padding: 0 .9rem; position: relative; } .sh-d-id > .av { margin-top: -36px; } .sh-d-id .av { box-shadow: 0 0 0 4px var(--surface); }
.sh-d-id .av[class*="frame-"] { box-shadow: none; } .sh-d-id > div { display: grid; padding-bottom: .2rem; } .sh-d-name { font-size: 1.15rem; }
.sh-d-plate { display: grid; gap: .3rem; padding: .8rem .9rem .9rem; } .sh-d-plate .member { pointer-events: none; border-radius: 8px; }
.sh-d-info { display: grid; gap: .55rem; align-content: start; padding-top: .3rem; }
.sh-d-act { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .4rem; }
@media (max-width: 900px) {
  .sh-body { grid-template-columns: 1fr; } .sh-ftoggle { display: inline-flex; }
  .sh-side { display: none; position: static; max-height: none; padding: .8rem; border: 1px solid var(--border); border-radius: 12px; } .sh-side.open { display: grid; }
  .sh-detail { grid-template-columns: 1fr; }
  .sh-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ——— Collectifs : gestion de la page ——— */
.coll-mtabs { display: flex; gap: .35rem; flex-wrap: wrap; } .coll-mtabs [aria-selected="true"] { background: var(--text); color: var(--surface); }
.coll-bank { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; max-height: 52vh; overflow-y: auto; padding: .2rem; }
.coll-bn { font: inherit; color: var(--text); text-align: left; display: grid; gap: .35rem; padding: .4rem; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; }
.coll-bn .banner { height: 54px; border-radius: 8px; } .coll-bn[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 15%, transparent); }

/* ——— Réglages de l'effet holographique (Paramètres › Profil et boutique) ——— */
.nfx-ed { display: grid; gap: .8rem; }
.nfx-ctl { display: grid; gap: .55rem; }
.nfx-row { display: grid; grid-template-columns: 90px auto auto 1fr; align-items: center; gap: .6rem; }
.nfx-row > input[type=range] { width: min(260px, 100%); }
.nfx-row output { font-size: .82rem; font-variant-numeric: tabular-nums; min-width: 3.2em; }
.nfx-l { font-size: .85rem; font-weight: 600; }
.nfx-row.off { opacity: .4; pointer-events: none; }
.nfx-seg { display: inline-flex; flex-wrap: wrap; gap: .3rem; grid-column: 2 / -1; }
.nfx-seg button { font: inherit; font-size: .84rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.nfx-seg button[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.nfx-sw { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; grid-column: 2 / -1; }
.nfx-sw button, .nfx-cust { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); background: var(--sw); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.nfx-sw button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.nfx-cust { position: relative; overflow: hidden; background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); }
.nfx-cust input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.nfx-hint { grid-column: 4; }
@media (max-width: 640px) { .nfx-row { grid-template-columns: 80px 1fr auto; } .nfx-hint { grid-column: 2 / -1; } }
.sh-studio { display: grid; grid-template-columns: minmax(220px, 300px) 1fr auto; align-items: center; gap: 1rem; padding: .8rem 1rem; margin-bottom: 1.2rem; border-radius: 16px;
  background: linear-gradient(110deg, color-mix(in srgb, #a855f7 12%, var(--surface)), color-mix(in srgb, #22d3ee 10%, var(--surface)) 60%, var(--surface)); border: 1px solid var(--border); }
.sh-studio-prev .member { pointer-events: none; border-radius: 10px; }
.sh-studio-t { display: grid; gap: .15rem; }
.sh-studio-link { font: inherit; font-size: .88rem; font-weight: 600; text-align: left; margin-top: .5rem; padding: .55rem .7rem; border-radius: 10px; cursor: pointer; color: var(--text);
  border: 1px solid color-mix(in srgb, #a855f7 35%, var(--border)); background: linear-gradient(110deg, color-mix(in srgb, #a855f7 12%, var(--surface)), color-mix(in srgb, #22d3ee 10%, var(--surface))); }
@media (max-width: 760px) { .sh-studio { grid-template-columns: 1fr; } }

/* nom de l'espace sur sa bannière : la flèche du menu juste à droite */
.dsc-banner-name { display: inline-flex; align-items: center; gap: .2rem; right: 3rem; }
.dsc-banner > .dsc-caret { position: absolute; top: .45rem; right: .45rem; width: 30px; height: 30px; background: rgba(0,0,0,.28); }
.dsc-bn-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dsc-banner > .dsc-caret { color: #fff; opacity: .95; }
.dsc-banner > .dsc-caret:hover, .dsc-banner > .dsc-caret[aria-expanded="true"] { background: rgba(0,0,0,.5); }
.nfx-adm-prev { display: grid; gap: .4rem; margin: .2rem 0 .8rem; }
.nfx-adm-prev .nfx-col { gap: .4rem; }

.dsc-head .dsc-agenda + .dsc-caret { margin-left: .15rem; width: 30px; height: 30px; }

/* Arborescence : légende en haut à droite, sous les commandes ; la miniature d'un membre s'ouvre juste dessous */
.map-legend-w { right: .75rem; top: 3.75rem; pointer-events: none; }
@media (max-width: 720px) { .map-legend-w { display: none; } }

/* ——— Administration › Démonstration : photos des faux comptes ——— */
.dav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6rem; margin-top: .6rem; }
.dav-it { position: relative; aspect-ratio: 1; } .dav-it img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); background: repeating-conic-gradient(#c9ced6 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.dav-x { position: absolute; top: 0; right: 0; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: .7rem; }
.dav-add { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--border-strong); display: grid; place-items: center; align-content: center; cursor: pointer; font-size: 1.4rem; color: var(--muted); }
.dav-add:hover { border-color: var(--text); color: var(--text); }
.dav-cut { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--text); color: var(--surface); cursor: pointer; font-size: .8rem; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.dav-cut:disabled { opacity: .6; cursor: wait; }
.dav-crop { position: absolute; bottom: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: .85rem; box-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* ——— Bandeau LED au pied des fenêtres flottantes (Administration › Verre et effets › Bandeau LED) ———
   Lumière holographique FIXE posée à la base (comme le verre éclairé des mentions, mais par le bas). Elle est portée par le
   corps de la fenêtre, sous l'onglet : en se déroulant, la fenêtre la dévoile peu à peu ; fermée, l'onglet fait bouchon. */
body.led-on .dock-contacts .dock-list, body.led-on .ealione .ea-wrap, body.led-on.led-members .dsc-members {
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--led-c1) calc(var(--led-a) * 100%), transparent) 0%, color-mix(in srgb, var(--led-c2) calc(var(--led-a) * 55%), transparent) 35%, color-mix(in srgb, var(--led-c2) calc(var(--led-a) * 12%), transparent) 75%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,var(--led-scan, .06)) 0 1px, transparent 1px 3px);
  background-size: 100% var(--led-px, 220px), 100% var(--led-px, 220px);
  background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  box-shadow: inset 0 calc(-1 * var(--led-h, 3px)) 0 var(--led-c1), inset 0 -22px 26px -18px color-mix(in srgb, var(--led-c1) calc(var(--led-a) * 120%), transparent); }
body.led-on .ealione .ea-wrap { display: flex; flex-direction: column; }
body.led-on .ealione .ea-body { background: color-mix(in srgb, var(--surface-2) 25%, transparent); }
body.led-on .ealione .cw-form { background: transparent; }
/* déroulé : la fenêtre monte depuis sa base (et redescend à la fermeture), la lumière fixe se dévoile */
.ealione .ea-wrap, .dock-contacts .dock-list { overflow: hidden auto; }
.ealione .ea-wrap { overflow: hidden; }
body.led-open-anim .led-opening .dock-list, body.led-open-anim .led-opening .ea-wrap { animation: ledUnroll var(--led-ms, 420ms) cubic-bezier(.22,.8,.25,1) both; }
body.led-open-anim .led-closing .dock-list, body.led-open-anim .led-closing .ea-wrap { animation: ledRoll var(--led-ms, 420ms) cubic-bezier(.55,0,.75,.2) both; }
.dock-contacts .dock-list { --led-full: 50vh; } .ealione .ea-wrap { --led-full: 360px; }
@keyframes ledUnroll { from { max-height: 0; } to { max-height: var(--led-full); } }
@keyframes ledRoll { from { max-height: var(--led-full); } to { max-height: 0; } }
@media (prefers-reduced-motion: reduce) { .led-opening .dock-list, .led-opening .ea-wrap, .led-closing .dock-list, .led-closing .ea-wrap { animation: none !important; } }
/* points de chaîne : en haut à droite de la colonne des membres, sur sa bannière */
.dsc-pts { position: sticky; top: .5rem; float: right; z-index: 3; margin: .5rem .55rem -2.2rem 0; padding: .22rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap;
  color: #2a2110; background: var(--gold-grad, linear-gradient(135deg, #f4dfa8, #c99a4a)); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
/* écran tactile (téléphone, ou simulateur) : la carte reste à plat, on la tourne à deux doigts */
@media (max-width: 720px) { #map-relief { display: none; } }
html.sim-touch #map-relief { display: none; }
html.sim-touch, html.sim-touch * { -webkit-touch-callout: none; }

/* boutons du téléphone (retour aux salons, membres) : cachés sur ordinateur, sinon ils décalent la grille des espaces */
.dsc > .m-back, .dsc > .m-mem { display: none; }
/* ——— Téléphone ——— */
@media (max-width: 720px) {
  .header-top { padding: .5rem 1rem; }
  .sh-feature { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
  .sh-feature > * { scroll-snap-align: start; }
  .sh-row { grid-auto-columns: 46%; }
  .pf-tabbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .pf-tabbar::-webkit-scrollbar { display: none; }
  .pf-tabbar > * { flex: none; }

  /* Espaces façon Discord : liste (logos à gauche, salons à droite) ou discussion plein écran */
  .dsc { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; height: var(--m-h, calc(100dvh - 190px)) !important; position: relative; overflow: hidden; }
  .dsc .dsc-servers { display: flex !important; flex-direction: column !important; align-items: center; gap: .45rem; overflow: hidden auto; padding: .5rem 0 .8rem; border-right: 1px solid var(--border); border-bottom: 0; grid-column: 1; grid-row: 1; width: 72px; }
  .dsc .dsc-servers h2, .dsc .dsc-max { display: none; }
  .dsc .dsc-servers .srv-sep { display: block; width: 32px; height: 2px; margin: .1rem auto; background: var(--border); }
  .dsc .srv-item { margin: 0 auto; position: relative; }
  .dsc .srv-foot { position: static; flex-direction: column; margin: auto 0 0; }
  .dsc .dsc-side { display: flex !important; flex-direction: column; grid-column: 2; grid-row: 1; max-height: none !important; border: 0; overflow: hidden; min-height: 0; }
  .dsc .dsc-side .dsc-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 1rem; }
  .dsc .dsc-head .xs { display: block; }
  .dsc .dsc-main, .dsc .dsc-members { display: none !important; }
  .dsc .salon-link { padding-top: .6rem; padding-bottom: .6rem; font-size: 1rem; }
  /* discussion */
  .dsc.m-chat .dsc-servers, .dsc.m-chat .dsc-side { display: none !important; }
  .dsc.m-chat .dsc-main { display: flex !important; flex-direction: column; grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  .dsc.m-chat .dsc-top { padding-left: 3.1rem !important; padding-right: 3.1rem !important; min-height: 52px; }
  .m-back, .m-mem { display: none; }
  .dsc.m-chat .m-back, .dsc.m-chat .m-mem { display: grid; place-items: center; position: absolute; top: .4rem; z-index: 25; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); font-size: 1.5rem; line-height: 1; text-decoration: none; cursor: pointer; backdrop-filter: blur(8px); }
  .dsc.m-chat .m-back { left: .4rem; } .dsc.m-chat .m-mem { right: .4rem; font-size: 1.05rem; }
  .dsc.m-chat.m-mem-open .dsc-members { display: block !important; position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); z-index: 30; background: var(--surface-2); box-shadow: -12px 0 30px rgba(0,0,0,.25); animation: memIn .22s ease-out; }
  @keyframes memIn { from { transform: translateX(100%); } to { transform: none; } }
  .m-list .m-back, .m-list .m-mem { display: none !important; }
}
@media (max-width: 720px) {
  .dsc.m-chat .dsc-top > :not(.dsc-ttl) { display: none !important; }
  .dsc.m-chat .dsc-top .dsc-ttl { min-width: 0; flex: 1; } .dsc.m-chat .dsc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sh-feature > * { min-width: 0; overflow: hidden; }
}
.sh-body > *, .sh-main { min-width: 0; }
/* jauge de vitesse de la caméra libre (arborescence) */
.fly-g { display: inline-flex; align-items: center; gap: .45rem; font-variant-numeric: tabular-nums; }
.fly-g .fly-bar { width: 84px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.fly-g .fly-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #38d6ff, #c86bff 70%, #ff6b8a); transition: width .12s; }
.fly-g b { min-width: 3.2em; font-size: .8rem; }
.fly-g { gap: .8rem; } .fly-g .fly-it { display: inline-flex; align-items: center; gap: .35rem; } .fly-g .fly-bar { width: 64px; }
/* soutiens dans les trois pyramides : S · J · E */
.sup3 { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.sup3-i { display: inline-flex; align-items: center; gap: .28rem; white-space: nowrap; }
.sup3-k { display: inline-grid; place-items: center; min-width: 1.25em; height: 1.25em; padding: 0 .2em; border-radius: 5px; font: 800 .68rem/1 system-ui, sans-serif; font-style: normal; color: #fff;
  background: linear-gradient(135deg, var(--pc, #4f6f96), var(--pc2, #24364f)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 1px 1px rgba(0,0,0,.35); vertical-align: 1px; }
.nowrap { white-space: nowrap; }
.sup3.sm { gap: .4rem; } .sup3.sm .sup3-k { font-size: .6rem; height: 1.15em; min-width: 1.15em; }
.dim { opacity: .5; }
/* fonctions du membre : empilées, pour ne pas élargir le panneau de verre au-delà du contenu */
.pf-fns { display: flex; flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; gap: .3rem; margin-top: .35rem; }
.relay-p { padding: .5rem 0 .2rem; border-top: 1px solid var(--border); } .relay-p:first-of-type { border-top: 0; }
.relay-h { margin: 0 0 .2rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
/* étiquettes de fonction d'une publication : regroupées à droite (plus d'étalement sur toute la largeur) */
.post-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; max-width: 60%; }
/* espaces : la fenêtre « Amis en ligne » (en bas à droite) et EALIONE (en bas à gauche) ne cachent plus les derniers membres / salons */
body.app-mode .dsc-members { padding-bottom: calc(1rem + 64px); }
body.app-mode .dsc-side .dsc-scroll { padding-bottom: 64px; }
/* onglets des espaces : contour et ombre du texte désactivables (Administration › Verre et effets › Onglets des espaces) */
body.tab-nobd .cat-toggle.metal { border-color: transparent !important; box-shadow: none !important; }
body.tab-nobd .cat-toggle.metal::before, body.tab-nobd .cat-toggle.metal::after { box-shadow: none !important; }
body.tab-notxs .cat-toggle.metal, body.tab-notxs .cat-toggle.metal * { text-shadow: none !important; }
.emo-field-btn { margin-left: .35rem; padding: .25rem .5rem; font-size: 1rem; line-height: 1; vertical-align: middle; }
/* ——— Onglets des espaces : verre réglable (flou, opacité, teinte, reflet, dégradé) + hologramme superposé, comme les mentions ———
   Réglages : Administration › Onglets des espaces (variables --tg-*, posées par applyLook) */
.cat-toggle.metal.tab-verre, .cat-toggle.metal.tab-holo {
  --tg-c1: color-mix(in srgb, var(--tab-solid, #c9cfd6) var(--tg-color, 20%), transparent);
  --tg-c2: color-mix(in srgb, var(--tab2, #6e7782) var(--tg-color, 20%), transparent);
  -webkit-backdrop-filter: blur(var(--tg-blur, 14px)) saturate(var(--tg-sat, 140%)); backdrop-filter: blur(var(--tg-blur, 14px)) saturate(var(--tg-sat, 140%));
  border: 1px solid var(--tg-edge, rgba(255,255,255,.4)); border-radius: var(--tg-radius, 14px); text-shadow: none; color: var(--text);
  --tg-grad: linear-gradient(var(--tg-gang, 90deg), var(--tg-c1), transparent var(--tg-gend, 75%));
  background: var(--tg-sheen-bg, none), var(--tg-grad), var(--tg-tint, rgba(255,255,255,.42));
  box-shadow: 0 8px 26px var(--tg-shadow, rgba(11,16,32,.22)), inset 0 1px 0 var(--tg-edge, rgba(255,255,255,.4)); }
body.tg-g-deux .cat-toggle.metal.tab-verre, body.tg-g-deux .cat-toggle.metal.tab-holo { --tg-grad: linear-gradient(var(--tg-gang, 90deg), var(--tg-c1), var(--tg-c2) var(--tg-gend, 75%)); }
body.tg-g-uni .cat-toggle.metal.tab-verre, body.tg-g-uni .cat-toggle.metal.tab-holo { --tg-grad: linear-gradient(var(--tg-c1), var(--tg-c1)); }
[data-theme="dark"] .cat-toggle.metal.tab-verre, [data-theme="dark"] .cat-toggle.metal.tab-holo { border-color: var(--tg-edge-d, rgba(255,255,255,.18));
  background: var(--tg-sheen-bg-d, none), var(--tg-grad), var(--tg-tint-d, rgba(22,27,36,.42)); }
/* hologramme : la lumière des mentions (couleur, côté éclairé) superposée au verre, avec lignes de balayage et reflet animé */
.cat-toggle.metal.tab-holo { --tg-glow-c: color-mix(in srgb, var(--men-glow, rgba(245,197,66,.7)) calc(var(--tg-glow, 1) * 100%), transparent);
  box-shadow: var(--men-edge, inset 2px 0 0) color-mix(in srgb, var(--men-bar, #f5c542) calc(var(--tg-glow, 1) * 100%), transparent), var(--men-inner, inset 18px 0 26px -16px) var(--tg-glow-c), 0 8px 26px var(--tg-shadow, rgba(11,16,32,.22)), inset 0 1px 0 var(--tg-edge, rgba(255,255,255,.4)); }
.cat-toggle.metal.tab-verre::before, .cat-toggle.metal.tab-verre::after { display: none; }
.cat-toggle.metal.tab-holo::before { display: block; background: repeating-linear-gradient(0deg, var(--tg-scan, rgba(255,255,255,.08)) 0 1px, transparent 1px 3px), var(--men-bg, none); mix-blend-mode: normal; opacity: var(--tg-glow, 1); animation: none; }
.cat-toggle.metal.tab-holo::after { display: none; }
body.tg-shine .cat-toggle.metal.tab-holo::after { display: block; background: var(--tg-sheen, var(--men-sheen)); background-size: 200% 100%; background-repeat: no-repeat; mix-blend-mode: screen; opacity: var(--tg-glow, 1); } /* animation : tgSheenX (vitesse, rythme, sens réglés), générée par applyLook */
@media (prefers-reduced-motion: reduce) { body.tg-shine .cat-toggle.metal.tab-holo::after { animation: none !important; opacity: 0; } }
.cat[data-open="true"] .cat-toggle.metal.tab-verre, .cat[data-open="true"] .cat-toggle.metal.tab-holo { border-radius: var(--tg-radius, 14px) var(--tg-radius, 14px) 0 0; }
body.tab-nobd .cat-toggle.metal.tab-holo { box-shadow: var(--men-inner, inset 18px 0 26px -16px) var(--tg-glow-c) !important; }
/* en-tête d'un espace : l'agenda sur la même ligne que « Géré par » */
.dsc-head .dsc-sub { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.dsc-head .dsc-sub > .xs { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsc-head .dsc-sub .dsc-agenda { width: 26px; height: 26px; margin: -4px -4px -4px auto; }
.dsc-head .row-between:has(> .dsc-nm:empty:only-child) { display: none; }
.dsc-head .row-between > .dsc-caret { margin-left: auto; }
/* logos des types de salon : taille et épaisseur réglables (Administration › Textes des espaces) */
.salon-ico .ico, .dsc-title > .ico, .cs-item .salon-ico .ico { width: var(--salon-ico, 16px); height: var(--salon-ico, 16px); stroke-width: var(--salon-ico-w, 1.9); }
.salon-ico { min-width: calc(var(--salon-ico, 16px) + 2px); }
.salon-ico .dot-live { width: calc(var(--salon-ico, 16px) / 2); height: calc(var(--salon-ico, 16px) / 2); }
/* polices supplémentaires (salons et onglets) */
.font-classique { font-family: Georgia, "Times New Roman", serif; } .font-impact { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif; letter-spacing: .02em; }
.font-large { letter-spacing: .14em; }
/* typo du nom des onglets d'espace (choisie par le gestionnaire) */
.cat-toggle.tf-serif .cat-name { font-family: "Century Gothic", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif; }
.cat-toggle.tf-mono .cat-name { font-family: ui-monospace, Consolas, monospace; }
.cat-toggle.tf-arrondie .cat-name { font-family: "Trebuchet MS", "Segoe UI Rounded", system-ui, sans-serif; }
.cat-toggle.tf-capitales .cat-name { text-transform: uppercase; letter-spacing: .1em; }
.cat-toggle.tf-manuscrite .cat-name { font-family: "Segoe Print", "Bradley Hand", "Segoe UI", Arial, sans-serif; text-transform: none; letter-spacing: 0; font-size: 1.12em; }
.cat-toggle.tf-classique .cat-name { font-family: Georgia, "Times New Roman", serif; letter-spacing: .05em; }
.cat-toggle.tf-impact .cat-name { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif; font-weight: 400; letter-spacing: .06em; font-size: 1.1em; }
.cat-toggle.tf-large .cat-name { letter-spacing: .22em; }
/* texte des messages des espaces : couleur réglable jour / nuit (Administration › Salons et textes) */
.dsc .msg .body { color: var(--msg-txt, var(--text)); }
[data-theme="dark"] .dsc .msg .body { color: var(--msg-txt-d, var(--text)); }
/* caméra libre : focale (curseur) et fish-eye */
.fly-g .fly-rg { width: 84px; height: 6px; accent-color: #c86bff; cursor: pointer; margin: 0; }
.fly-g .fly-fish { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: inherit; border-radius: 999px; padding: .12rem .55rem; font: inherit; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.fly-g .fly-fish[aria-pressed="true"] { background: linear-gradient(90deg, #38d6ff55, #c86bff66); border-color: #c86bff; }
/* pyramide isolée en 3D dans la carte */
.map-iso { display: inline-flex; align-items: center; gap: .4rem; background: linear-gradient(90deg, rgba(201,168,92,.28), rgba(201,168,92,.1)); border-color: rgba(201,168,92,.6) !important; }
.map-iso[hidden] { display: none; }
.map-iso-x { border: 0; background: rgba(255,255,255,.14); color: inherit; border-radius: 50%; width: 20px; height: 20px; line-height: 1; cursor: pointer; font-size: .75rem; }
.map-iso-x:hover { background: rgba(255,255,255,.3); }
/* arborescence : les messages (caméra libre / orbite, isolement…) sur le côté gauche, au-dessus d'EALIONE, pas au milieu de la carte */
body:has(.map-wrap) .toasts, .map-wrap > .toasts { left: 16px; right: auto; transform: none; align-items: flex-start; bottom: 3.6rem; max-width: min(380px, calc(100vw - 32px)); }
.map-wrap > .toasts { bottom: 1rem; }
/* espaces gelés : dossier repliable en bas de la liste */
.srv-folder > summary { list-style: none; cursor: pointer; opacity: .75; }
.srv-folder > summary::-webkit-details-marker { display: none; }
.srv-folder > summary:hover, .srv-folder[open] > summary { opacity: 1; }
.srv-folder .srv-fz-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, #7fc8ff 16%, transparent); border: 1px dashed color-mix(in srgb, #7fc8ff 55%, transparent); font-size: 1.1rem; }
.srv-folder .fz-n { background: color-mix(in srgb, #7fc8ff 35%, var(--surface-3)); color: var(--text); }
.srv-folder-in { margin: 2px 4px 6px; padding: 3px 0; border-radius: 12px; background: color-mix(in srgb, #7fc8ff 7%, transparent); }
.srv-folder-in .srv-item { opacity: .8; }
.srv-folder-in .srv-item:hover, .srv-folder-in .srv-item[aria-current="true"] { opacity: 1; }

/* r191 · « … écrit », réactions de la messagerie privée */
.compose { position: relative; }
.typing-ind { position: absolute; left: 1.2rem; bottom: .05rem; font-size: .72rem; color: var(--muted); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 2.4rem); }
.typing-ind:empty, .cw-typ:empty { display: none; }
.cw-typ { padding: .1rem .7rem; }
.typ-dots { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: .15rem; }
.typ-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: typDot 1.2s infinite ease-in-out; }
.typ-dots i:nth-child(2) { animation-delay: .15s; } .typ-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .typ-dots i { animation: none; opacity: .7; } }
.bubble .dm-rx { margin-top: .25rem; }
.bubble .dm-rx .react { height: 22px; font-size: .85rem; padding: 0 .35rem; }
.bubble.mine .dm-rx .react { background: color-mix(in srgb, #fff 18%, transparent); border-color: color-mix(in srgb, #fff 30%, transparent); color: inherit; }
.bubble.mine .dm-rx .react .rn { color: inherit; }
.bubble:hover .react.add { opacity: 1; }
.bb-rx { position: absolute; bottom: -9px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; padding: 0; }
.bubble .bb-rx { right: -10px; } .bubble.mine .bb-rx { right: auto; left: -10px; }
.bb-rx svg { width: 14px; height: 14px; }
.bubble:hover .bb-rx, .bb-rx:focus-visible { opacity: 1; }
@media (hover: none) { .bb-rx { opacity: .55; } }

/* r191 · PIC en deux parties */
.pic-part { margin-top: 1.1rem; }
.pic-part h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.12rem; margin-bottom: .45rem; }
.pic-part-n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--metal-dark); color: var(--on-accent); font-size: .9rem; flex: none; }
.pic-kind { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.pic-kind-o { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface); }
.pic-kind-o:has(input:checked) { border-color: var(--gold, #c9a227); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #c9a227) 30%, transparent); }
.pic-kind-o > span { display: flex; flex-direction: column; gap: .1rem; }
.pic-arts { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-direction: column; gap: .6rem; }
.pic-art .pic-art-n { font-weight: 700; font-size: .9rem; }
.pic-art textarea { min-height: 90px; margin-top: .2rem; }
.pic-cc { border-left: 3px solid var(--gold, #c9a227); padding-left: .8rem; margin-top: .6rem; }
.pic-law-a + .pic-law-a { border-top: 1px solid var(--border); margin-top: .7rem; padding-top: .7rem; }
.pic-law-a h3 { font-size: .95rem; margin: 0 0 .25rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* r191 · Constitution amendable (forum façon Discord + panneau de droite) */
.cst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.cst.panel-open { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
.cst-head { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: .8rem; }
.cst-head h1 { margin: .1rem 0 .4rem; font-size: 1.55rem; }
.cst-stats { display: flex; gap: .5rem; flex-wrap: wrap; }
.cst-stats span { padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; background: var(--surface); }
.cst-tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; position: sticky; top: 0; z-index: 3; padding: .45rem 0; background: var(--bg); }
.cst-tools #cst-q { flex: 1 1 220px; max-width: 360px; }
.cst-n { display: inline-grid; place-items: center; min-width: 1.3em; padding: 0 .3em; border-radius: 999px; background: var(--gold, #c9a227); color: #1b1b1b; font-size: .75rem; margin-left: .25rem; }
.cst-list { display: flex; flex-direction: column; gap: .55rem; }
.cst-sep { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 .2rem; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.cst-sep::before, .cst-sep::after { content: ''; flex: 1; border-top: 1px dashed var(--border); }
.cst-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; scroll-margin-top: 4rem; }
.cst-card:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--border)); }
.cst-card.sel { border-color: var(--gold, #c9a227); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #c9a227) 25%, transparent); }
.cst-card.opt { background: color-mix(in srgb, var(--surface) 92%, #c9a227 8%); }
.cst-card-h { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .8rem 1rem; cursor: pointer; border-radius: 12px; }
.cst-card-h:focus-visible { outline: 2px solid #5b8def; outline-offset: -2px; }
.cst-num { font-weight: 800; font-size: .85rem; padding: .3rem .55rem; border-radius: 8px; background: var(--metal-dark); color: var(--on-accent); white-space: nowrap; }
.cst-t { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cst-tags { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.cst-tags .tag { font-size: .7rem; padding: .05rem .5rem; }
.tag.warn { color: #9a6200; border-color: color-mix(in srgb, #c9a227 50%, var(--border)); }
.cst-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-card.open .cst-prev { display: none; }
.cst-meta { display: flex; gap: .6rem; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.cst-chev { transition: transform .2s; color: var(--muted); display: grid; }
.cst-card.open .cst-chev { transform: rotate(180deg); }
.cst-body { display: none; padding: 0 1rem .9rem 1rem; }
.cst-card.open .cst-body { display: block; }
.cst-cl { position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .4rem; margin: 0; padding: .45rem .3rem; border-radius: 8px; line-height: 1.55; scroll-margin-top: 4rem; }
.cst-cl + .cst-cl { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.cst-cl:hover { background: var(--surface-2); }
.cst-cl-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.cst-cl-ed { border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity .15s; padding: 0 .2rem; font-size: .95rem; }
.cst-cl:hover .cst-cl-ed, .cst-cl-ed:focus-visible { opacity: 1; }
@media (hover: none) { .cst-cl-ed { opacity: .6; } }
.cst-card-f { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
mark { background: color-mix(in srgb, #f5c542 55%, transparent); color: inherit; border-radius: 3px; }
.cst-panel { position: sticky; top: .6rem; max-height: calc(100dvh - 1.2rem); overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 10px 30px rgba(10, 16, 32, .12); }
.cst-ph { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: .75rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.cst-ph .btn-link { font-size: 1.35rem; line-height: 1; padding: 0 .25rem; }
.cst-pb { padding: .9rem; }
.cst-props { display: flex; flex-direction: column; gap: .45rem; margin-top: .6rem; }
.cst-pc { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .6rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; background: var(--surface); }
.cst-pc:hover { border-color: var(--gold, #c9a227); }
.cst-pc-s { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-2); }
.cst-pc-s b { font-size: 1.15rem; }
.cst-pc-m { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cst-old, .cst-diff, .cst-new { margin: .4rem 0 .8rem; padding: .6rem .7rem; border-radius: 8px; background: var(--surface-2); line-height: 1.55; }
.cst-diff del { background: color-mix(in srgb, #e5484d 22%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, #e5484d 70%, transparent); }
.cst-diff ins { background: color-mix(in srgb, #30a46c 26%, transparent); text-decoration: none; }
.cst-diff del, .cst-diff ins { padding: 0 .12em; border-radius: 3px; } .cst-diff del + ins { margin-left: .2em; }
.cst-support { display: flex; align-items: center; gap: .8rem; margin: .9rem 0 .5rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; }
.cst-support > div { display: flex; flex-direction: column; align-items: center; min-width: 3.5rem; }
.cst-sn { font-size: 1.6rem; line-height: 1; }
.cst-sups { margin-bottom: .6rem; }
.cst-h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
@media (max-width: 900px) {
  .cst.panel-open { grid-template-columns: minmax(0, 1fr); }
  .cst-panel { position: fixed; inset: 0; z-index: 60; max-height: none; border-radius: 0; padding-bottom: 70px; }
  .cst-card-h { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cst-meta { grid-column: 2; }
  .cst-chev { display: none; }
  .cst-cl { grid-template-columns: 2.8rem minmax(0, 1fr) auto; }
}

/* r191 · Tuto Démocratie Ascendante (images animées en SVG ; « .still » ou mouvement réduit : images fixes) */
.tuto { --tt-node: #8a96a6; --tt-me: #5b8def; --tt-gold: #e0b43a; --tt-ok: #30a46c; --tt-bad: #e5484d; max-width: 980px; margin: 0 auto; }
[data-theme="dark"] .tuto { --tt-node: #9aa6b8; }
.tuto-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tuto-head h1 { margin: .1rem 0 .3rem; }
.tuto-dots { display: flex; gap: .4rem; justify-content: center; margin: .4rem 0 1rem; }
.tuto-dots button { width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0; background: var(--border); cursor: pointer; transition: transform .2s, background .2s; }
.tuto-dots button[aria-selected="true"] { background: var(--tt-gold); transform: scale(1.35); }
.tuto.all-on .tuto-dots, .tuto.all-on .tuto-nav { display: none; }
.tuto-step { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.2rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); margin-bottom: 1rem; animation: ttIn .35s ease-out; }
.tuto-fig { margin: 0; border-radius: 12px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tt-gold) 10%, var(--surface-2)), var(--surface-2)); padding: .6rem; color: var(--text); }
.tuto-fig svg { width: 100%; height: auto; display: block; }
.tuto-txt h2 { margin: .2rem 0 .5rem; }
.tuto-nav { display: flex; justify-content: space-between; gap: .6rem; }
@keyframes ttIn { from { opacity: 0; transform: translateY(8px); } }
.tuto .tt-link { stroke: var(--tt-node); stroke-width: 3; fill: none; stroke-linecap: round; opacity: .75; }
.tuto .tt-l { font-size: 12px; fill: var(--muted); font-family: inherit; }
.tuto .tt-h { font-size: 14px; font-weight: 700; fill: var(--text); font-family: inherit; }
.tuto .tt-big { font-size: 22px; font-weight: 800; fill: #fff; font-family: inherit; }
.tuto .tt-ring { fill: none; stroke: var(--border); stroke-width: 3; } .tuto .tt-ring.on { stroke: var(--tt-gold); }
.tuto .tt-arrow { stroke: var(--muted); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tuto .tt-doc { fill: var(--surface); stroke: var(--border); stroke-width: 2; }
.tuto .tt-lines { stroke: var(--border); stroke-width: 5; stroke-linecap: round; }
.tuto .tt-gauge { fill: var(--surface); stroke: var(--border); }
.tuto .tt-fill { fill: var(--tt-ok); transform-box: fill-box; transform-origin: left; animation: ttFill 4s ease-in-out infinite; }
.tuto .tt-adopt { fill: var(--tt-ok); animation: ttAdopt 4s ease-in-out infinite; }
.tuto .tt-ins { fill: var(--tt-ok); font-weight: 700; animation: ttAdopt 4s ease-in-out infinite; }
.tuto .tt-strike path { stroke-dasharray: 60; animation: ttStrike 4s ease-in-out infinite; }
.tuto .tt-draw { stroke-dasharray: 260; animation: ttDraw 3s ease-out infinite; }
.tuto .tt-pop { transform-box: fill-box; transform-origin: center; animation: ttPop 4s ease-out infinite; animation-delay: var(--d, 0s); }
.tuto .tt-crown { transform-box: fill-box; transform-origin: bottom; animation: ttCrown 4s ease-out infinite; animation-delay: var(--d, 0s); }
.tuto .tt-cut { animation: ttCut 4s ease-in-out infinite; } .tuto .tt-swap { stroke: var(--tt-me); stroke-dasharray: 150; animation: ttSwap 4s ease-in-out infinite; }
.tuto .tt-old circle { animation: ttOld 4s ease-in-out infinite; } .tuto .tt-new circle { animation: ttNew 4s ease-in-out infinite; }
.tuto .tt-x { opacity: 0; animation: ttX 4s ease-in-out infinite; } .tuto .tt-x2 { animation-delay: .4s; }
.tuto .tt-loop { stroke: var(--tt-bad); stroke-dasharray: 8 6; animation: ttLoop 4s linear infinite; }
.tuto .tt-top circle { animation: ttGlow 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ttDraw { 0% { stroke-dashoffset: 260; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes ttPop { 0% { opacity: 0; transform: scale(.6); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes ttCrown { 0%, 20% { opacity: 0; transform: translateY(-14px) scale(.6); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes ttFill { 0% { transform: scaleX(.05); } 60%, 100% { transform: scaleX(.62); } }
@keyframes ttAdopt { 0%, 55% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes ttStrike { 0%, 20% { stroke-dashoffset: 60; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes ttCut { 0%, 30% { opacity: .75; } 45%, 100% { opacity: 0; } }
@keyframes ttSwap { 0%, 45% { stroke-dashoffset: 150; opacity: 0; } 50% { opacity: 1; } 80%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ttOld { 0%, 35% { opacity: 1; } 55%, 100% { opacity: .35; } }
@keyframes ttNew { 0%, 55% { fill: var(--tt-node); } 80%, 100% { fill: var(--tt-me); } }
@keyframes ttX { 0%, 25% { opacity: 0; } 35%, 60% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes ttLoop { to { stroke-dashoffset: -56; } }
@keyframes ttGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.tuto.still *, .tuto.still *::before { animation: none !important; }
.tuto.still .tt-pulse { display: none; }
.tuto.still .tt-fill { transform: scaleX(.62); }
.tuto.still .tt-x { opacity: 1; } .tuto.still .tt-cut { opacity: .2; stroke-dasharray: 6 6; } .tuto.still .tt-new circle { fill: var(--tt-me); }
@media (prefers-reduced-motion: reduce) { .tuto:not(.anim-forced) .tuto-step { animation: none; } }
@media (max-width: 720px) { .tuto-step { grid-template-columns: minmax(0, 1fr); padding: .9rem; } }

/* r191 · statuts */
.st-chip { display: inline-flex; align-items: center; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid var(--border); }
.st-chip.cit { color: #1f7a4d; border-color: color-mix(in srgb, #30a46c 55%, var(--border)); background: color-mix(in srgb, #30a46c 12%, transparent); }
.st-chip.mem { color: var(--muted); }
[data-theme="dark"] .st-chip.cit { color: #6fdba4; }

/* r191 · profil : manifeste, onglets personnels, galerie des propositions constitution */
.pf-manif-b { margin-top: .6rem; line-height: 1.65; }
.pf-manif-b h1, .pf-manif-b h2, .pf-manif-b h3 { margin: 1rem 0 .4rem; }
.cg-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; touch-action: pan-y; }
.cg-card { display: flex; flex-direction: column; gap: .4rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; min-height: 150px; transition: transform .15s, border-color .15s, box-shadow .15s; user-select: none; }
.cg-card:hover { border-color: var(--gold, #c9a227); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(10, 16, 32, .1); }
.cg-card.dragging { opacity: .6; transform: scale(.97); cursor: grabbing; }
.cg-card.st-adoptee { border-color: color-mix(in srgb, #30a46c 60%, var(--border)); }
.cg-card.st-retiree, .cg-card.st-rejetee { opacity: .7; }
.cg-top { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.cg-top .cst-num { font-size: .72rem; padding: .15rem .45rem; }
.cg-mot { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-foot { margin-top: auto; display: flex; gap: .7rem; align-items: center; font-size: .85rem; }
.pf-tabs-add { border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .3rem .55rem; border-radius: 8px; }
.pf-tabs-add:hover { background: var(--surface-2); color: var(--text); }
.pf-tabbar .pf-tabs-add { margin-left: auto; } .pf-tabbar .pf-tabs-add + .pf-tabs-edit { margin-left: 0; }

/* r191 · Faire connaître ODANIE */
.ref-page { display: flex; flex-direction: column; gap: 1rem; }
.ref-page .grid-3, .ref-page .grid-2 { gap: 1rem; }
.ref-hero { background: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--gold, #c9a227) 18%, transparent), transparent 55%), var(--surface); }
.ref-hero h1 { margin-top: 0; }
.ref-link { margin-top: .6rem; }
.ref-share { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.ref-n { font-size: 2rem; font-weight: 800; line-height: 1.1; display: inline-flex; align-items: center; gap: .3rem; }
.ref-n .oda-ico { width: 1.4rem; height: 1.4rem; }
.ref-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem; }
.oda-grid { width: 100%; border-collapse: collapse; font-size: .92rem; }
.oda-grid td { padding: .35rem .3rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: top; }
.oda-grid td:first-child { width: 1.6rem; }
.oda-grid .num { text-align: right; white-space: nowrap; color: #1f7a4d; }
[data-theme="dark"] .oda-grid .num { color: #6fdba4; }

/* r193 · confort numérique : trois versions du site */
.ux-e-only { display: none !important; }
.ux-essentiel .ux-e-only { display: revert !important; }
.mnav a.ux-e-only { display: none !important; }
.ux-essentiel .mnav a.ux-e-only { display: flex !important; }
.ux-essentiel .ux-e-hide { display: none !important; }
.ux-essentiel #ealione { display: none !important; }
.ux-pick { max-width: 980px; margin: 0 auto; text-align: center; }
.ux-pick h1 { margin: .3rem 0 .4rem; }
.ux-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.4rem; text-align: left; }
.ux-card { display: flex; flex-direction: column; gap: .45rem; padding: 1.3rem 1.2rem; border: 2px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.ux-card:hover, .ux-card:focus-visible { transform: translateY(-3px); border-color: var(--gold, #c9a227); box-shadow: 0 10px 26px rgba(10, 16, 32, .12); outline: none; }
.ux-card.on { border-color: var(--tt-ok, #30a46c); }
.ux-ico { font-size: 2.2rem; line-height: 1; }
.ux-n { font-size: 1.35rem; }
.ux-who { font-style: italic; font-weight: 600; }
.ux-card .badge { align-self: flex-start; }
/* « Ma voix » (Essentiel) */
.ess { max-width: 720px; margin: 0 auto; }
.ess h1 { font-size: 2rem; margin-bottom: .3rem; }
.ess-lead { font-size: 1.1rem; line-height: 1.55; }
.ess-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0 1.2rem; }
.ess-tabs button { display: flex; gap: .55rem; align-items: center; text-align: left; padding: .8rem .9rem; border: 2px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.ess-tabs button > span { display: flex; flex-direction: column; }
.ess-tabs button[aria-selected="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.ess-chain { display: flex; flex-direction: column; align-items: stretch; }
.ess-arrow { text-align: center; color: var(--muted); font-size: 1.1rem; line-height: 1.6; }
.ess-p { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.ess-p.me { border: 2px solid #5b8def; background: color-mix(in srgb, #5b8def 7%, var(--surface)); }
.ess-av { flex: none; }
.ess-who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ess-who strong { font-size: 1.2rem; }
.ess-role { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ess-n { font-size: 1rem; font-weight: 600; }
.ess-tag { align-self: flex-start; margin-top: .2rem; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: color-mix(in srgb, #c9a227 22%, transparent); }
.ess-none { padding: 1rem 1.1rem; border-radius: 14px; background: var(--surface-2); margin-bottom: .8rem; }
.ess-find { margin-top: 1.2rem; }
.ess-find .input.lg { font-size: 1.15rem; padding: .8rem 1rem; }
.ess-res { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; }
.ess-pick { display: flex; gap: .8rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ess-more { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.6rem; }
@media (max-width: 600px) { .ess-tabs button { padding: .6rem .5rem; justify-content: center; text-align: center; } .ess-tabs button .xs { display: none; } .ess-pick { flex-wrap: wrap; } .ess-pick .btn { width: 100%; } }
.ux-essentiel .btn { min-height: 44px; }

/* r193 · Configuration : application d'administration (réglages à gauche, aperçus du site en direct à droite) */
body.studio-on { overflow: hidden; }
body.studio-on > header, body.studio-on .notice, body.studio-on .footer, body.studio-on .mnav, body.studio-on #dock, body.studio-on #ealione { display: none !important; }
.studio { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--text); }
.st-top { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.st-brand { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font-size: 1.02rem; white-space: nowrap; }
.st-draft { display: flex; align-items: center; gap: .4rem; font-size: .88rem; margin-left: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; background: #e2a33a; box-shadow: 0 0 0 4px color-mix(in srgb, #e2a33a 25%, transparent); animation: stPulse 1.6s ease-in-out infinite; }
@keyframes stPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #e2a33a 5%, transparent); } }
.st-grid { display: grid; grid-template-columns: minmax(0, var(--st-split, 50%)) 6px minmax(0, 1fr); min-height: 0; }
.studio.no-sim .st-grid { grid-template-columns: minmax(0, 1fr) 0 0; }
.studio.no-sim .st-sim, .studio.no-sim .st-split { display: none; }
.st-left { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }
.st-nav { overflow: auto; padding: .6rem .5rem 2rem; border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 1px; }
.st-nav a { display: flex; align-items: center; gap: .5rem; padding: .38rem .55rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .88rem; }
.st-nav a:hover { background: var(--surface-2); }
.st-nav a[aria-current="true"] { background: var(--text); color: var(--surface); }
.st-nav .adm-cat { margin: .8rem .5rem .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.st-nav .adm-search { margin-bottom: .4rem; position: relative; }
.st-main { overflow: auto; padding: 1rem 1.2rem 4rem; min-width: 0; }
.st-main .adm-head h1 { font-size: 1.35rem; }
.studio .adm-savebar { display: none !important; }
.studio .adm-sticky-prev { position: static; }
.st-split { cursor: col-resize; background: var(--border); transition: background .15s; }
.st-split:hover, .st-dragging .st-split { background: var(--gold, #c9a227); }
.st-dragging iframe { pointer-events: none; }
.st-sim { display: grid; grid-template-rows: auto minmax(0, 1.15fr) minmax(0, 1fr); min-height: 0; background: color-mix(in srgb, var(--bg) 70%, #000 30%); }
[data-theme="dark"] .st-sim { background: #07090d; }
.st-simbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .45rem .6rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.st-simbar .input.sm { max-width: 190px; }
.st-simbar .seg span { padding: .3rem .55rem; font-size: .8rem; }
.st-desk, .st-mob { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding: .4rem .6rem .6rem; }
.st-mobs { display: grid; grid-template-columns: 1.55fr 1fr; min-height: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.st-cap { font-size: .75rem; color: #c7cfdb; padding: 0 .2rem .3rem; }
.st-fit { position: relative; overflow: hidden; min-height: 0; }
.st-fit iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: var(--bg); }
.st-fit.desk { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); background: #fff; }
.st-fit.phone::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--bz-w, 0px) + 18px); height: calc(var(--bz-h, 0px) + 18px); transform: translate(-50%, -50%); border-radius: 26px; background: #111; box-shadow: 0 12px 30px rgba(0, 0, 0, .45), inset 0 0 0 2px #333; }
.st-fit.phone iframe { border-radius: 16px; }
.st-srv { font-size: .7rem; font-weight: 600; color: #9a6200; background: color-mix(in srgb, #e2a33a 18%, transparent); border-radius: 999px; padding: .02rem .45rem; white-space: nowrap; }
.studio .set-row.st-dirty { box-shadow: inset 3px 0 0 #e2a33a; background: color-mix(in srgb, #e2a33a 7%, transparent); }
@media (max-width: 1100px) {
  .st-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .st-split { display: none; }
  .st-sim { position: fixed; inset: 52px 0 0 0; z-index: 2; }
  .studio:not(.no-sim) .st-left { display: none; }
  .st-left { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .st-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: .4rem; }
  .st-nav .adm-cat, .st-nav .adm-search { display: none; }
  .st-nav a { white-space: nowrap; }
  .st-draft .xs { display: none; }
  .st-mobs { grid-template-columns: minmax(0, 1fr); }
  .st-mob:first-child { display: none; }
}
/* aperçus : pas de boutons « installer », ni de demandes de notifications */
.is-preview .pwa-install, .is-preview #push-ask { display: none !important; }

/* r194 · tutos : sommaire, éléments de dessin supplémentaires */
.tuto-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; margin-top: 1rem; }
.tuto-card { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.tuto-card:hover { transform: translateY(-2px); border-color: var(--gold, #c9a227); box-shadow: 0 8px 22px rgba(10, 16, 32, .1); }
.tuto-card > span:last-child { display: flex; flex-direction: column; gap: .2rem; }
.tuto-card-i { font-size: 2rem; line-height: 1; }
.tuto .tt-l2 { font-size: 13px; fill: var(--text); font-family: inherit; }
.tuto .tt-bw { font-size: 12px; font-weight: 700; fill: #fff; font-family: inherit; }
.tuto .tt-ico { font-size: 18px; }
.tuto .tt-ico-l { font-size: 30px; }
.tuto .tt-okbig { font-size: 22px; font-weight: 800; fill: var(--tt-ok); }
.tuto .tt-coin-t { font-size: 7px; font-weight: 800; fill: #3a2a00; text-anchor: middle; }
.tuto .tt-tabon { fill: var(--text); }
.tuto .tt-meb { fill: color-mix(in srgb, var(--tt-me) 12%, var(--surface)); stroke: var(--tt-me); stroke-width: 2; }
.tuto .tt-ar path { stroke: var(--muted); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tuto .tt-ar.tt-warn path { stroke: var(--tt-bad); }
.tuto .tt-grow { transform-box: fill-box; transform-origin: left; animation: ttGrow 4s ease-out infinite; }
@keyframes ttGrow { 0% { transform: scaleX(0); } 35%, 100% { transform: none; } }
.tuto .tt-susp { animation: ttSusp 4s ease-in-out infinite; }
@keyframes ttSusp { 0%, 30% { opacity: 1; filter: none; } 45%, 100% { opacity: .35; filter: grayscale(1); } }
.tuto .tt-pan { animation: ttPan 3s ease-in-out infinite; }
@keyframes ttPan { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(14px); } }
.tuto .tt-zoom { transform-box: view-box; animation: ttZoom 4s ease-in-out infinite; }
@keyframes ttZoom { 0%, 100% { transform: scale(.75); } 50% { transform: scale(1.15); } }
.tuto .tt-sel { animation: ttGlow 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tuto .tt-rise { transform-box: fill-box; transform-origin: bottom; animation: ttRise 4s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes ttRise { 0% { transform: scaleY(0); opacity: 0; } 30%, 100% { transform: none; opacity: 1; } }
.tuto .tt-orb { animation: ttOrb 4s linear infinite; transform-origin: 110px 112px; }
@keyframes ttOrb { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.tuto .tt-walk { animation: ttWalk 4s ease-in-out infinite; }
@keyframes ttWalk { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(90px, -10px); } }
.tuto .tt-fadeout { animation: ttFadeout 4s ease-in-out infinite; }
@keyframes ttFadeout { 0%, 25% { opacity: 1; } 50%, 100% { opacity: .12; } }
.tuto .tt-ring2 { animation: ttRing 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ttRing { 50% { opacity: .35; transform: scale(1.08); } }
.tuto .tt-coin { animation: ttCoin 2.4s ease-in infinite; animation-delay: var(--d, 0s); }
@keyframes ttCoin { 0% { transform: translateY(20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }
.tuto.still .tt-orb, .tuto.still .tt-walk, .tuto.still .tt-pan, .tuto.still .tt-zoom { transform: none; }
.tuto.still .tt-susp { opacity: .35; filter: grayscale(1); }
.tuto.still .tt-fadeout { opacity: .12; }
.tuto.still .tt-coin { opacity: 1; transform: translateY(-40px); }

/* r195 · PIC « choix » */
.pic-choix { display: flex; flex-direction: column; gap: .8rem; }
.pc-opt { padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px; }
.pc-opt.mine { border-color: #5b8def; background: color-mix(in srgb, #5b8def 6%, transparent); }
.pc-opt.win { border-color: var(--green, #30a46c); }

.tuto-prog { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin: -.5rem 0 .8rem; }
.tuto-prog i { display: block; height: 100%; width: 0; background: var(--tt-gold, #e0b43a); }

/* r196 · EALIONE parmi les amis en ligne (plus de fenêtre à part) */
.ea-av { border-radius: 50%; object-fit: cover; background: transparent; display: block; }
.dock-list .ea-row { position: relative; margin: .35rem .45rem .5rem; border-radius: 12px; cursor: pointer;
  background: linear-gradient(115deg, color-mix(in srgb, #8a6cff 16%, transparent), color-mix(in srgb, #3fd0ff 14%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a6cff 40%, transparent); }
.dock-list .ea-row:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a6cff 70%, transparent), 0 4px 14px rgba(110, 90, 255, .18); }
.dock-list .ea-row .ea-name { background: linear-gradient(90deg, #7b5cff, #23b4e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ea-ia { display: inline-grid; place-items: center; padding: 0 .4rem; height: 1.15rem; border-radius: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .05em; color: #fff; background: linear-gradient(90deg, #7b5cff, #23b4e8); vertical-align: middle; }
.ea-mini-btn { border: 0; background: none; padding: 0 .1rem 0 0; cursor: pointer; display: grid; place-items: center; }
.ea-mini-btn .ea-av { box-shadow: 0 0 0 2px color-mix(in srgb, #8a6cff 60%, transparent); }
.ea-win .cw-head { background: linear-gradient(115deg, color-mix(in srgb, #8a6cff 14%, var(--surface)), color-mix(in srgb, #3fd0ff 10%, var(--surface))); }
.ea-card .ea-banner { background: linear-gradient(120deg, #2b1f6b, #5b3fd6 45%, #23b4e8); }
.ea-card .mini-av .ea-av { border: 3px solid var(--surface); }
.ea-prev { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); margin-bottom: .8rem; height: 120px; }
.ea-prev-b { height: 70px; background: linear-gradient(120deg, #2b1f6b, #5b3fd6 45%, #23b4e8); }
.ea-prev img { position: absolute; left: 14px; top: 40px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); background: #fff; }
.ea-prev strong { position: absolute; left: 90px; top: 80px; }
.ea-wait { opacity: .7; }

/* r197 · Espace EALIONE réglable (Configuration › EALIONE) : lisibilité d'abord, boutons sobres par défaut */
.ea-page { font-size: var(--eap-font, 112%); font-family: var(--eap-ff, inherit); background: var(--eap-bg, transparent); grid-template-columns: var(--eap-sw, 290px) minmax(0, 1fr); }
[data-theme="dark"] .ea-page { background: var(--eap-bg-d, transparent); }
.ea-page .ea-side { background: var(--eap-side, var(--surface-2)); }
[data-theme="dark"] .ea-page .ea-side { background: var(--eap-side-d, var(--surface-2)); }
.ea-page .ea-item, .ea-page .ea-nav { font-size: .95em; }
.ea-page .ea-thread, .ea-page .ea-compose, .ea-page .ea-offline, .ea-page .ea-welcome { max-width: var(--eap-w, 820px); }
.ea-page .ea-bubble { line-height: var(--eap-line, 1.7); font-size: 1em; }
.ea-page .ea-msg.me .ea-bubble { background: var(--eap-ub, var(--surface-3)); border-radius: var(--eap-r, 16px); padding: .7em 1em; }
[data-theme="dark"] .ea-page .ea-msg.me .ea-bubble { background: var(--eap-ub-d, var(--surface-3)); }
.eap-ai-bubble .ea-page .ea-msg:not(.me) .ea-bubble { background: var(--eap-ab, transparent); border-radius: var(--eap-r, 16px); padding: .7em 1em; }
[data-theme="dark"].eap-ai-bubble .ea-page .ea-msg:not(.me) .ea-bubble { background: var(--eap-ab-d, transparent); }
.ea-page .ea-welcome h1 { font-size: 1.7em; }
.ea-page .ea-compose { border-radius: calc(var(--eap-r, 16px) + 4px); }
.ea-page .ea-compose:focus-within { border-color: var(--eap-acc, #6d5bd0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--eap-acc, #6d5bd0) 18%, transparent); }
.ea-page .ea-compose textarea { font-size: 1em; line-height: var(--eap-line, 1.7); }
.ea-page .ea-bubble a { color: var(--eap-acc, #6d5bd0); }
/* boutons : sobres (contour) · couleur d'accent · ceux du site */
.eap-btn-sobre .ea-page .btn:not(.tertiary) { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong, var(--border)); box-shadow: none; text-shadow: none; background-image: none; }
.eap-btn-sobre .ea-page .btn:not(.tertiary):hover { background: var(--surface-2); border-color: var(--eap-acc, #6d5bd0); }
.eap-btn-sobre .ea-page .ea-compose .btn { background: var(--eap-acc, #6d5bd0); color: #fff; border-color: transparent; }
.eap-btn-accent .ea-page .btn:not(.tertiary):not(.secondary) { background: var(--eap-acc, #6d5bd0); color: #fff; border: 0; background-image: none; box-shadow: none; text-shadow: none; }
.eap-btn-accent .ea-page .btn.secondary { border-color: var(--eap-acc, #6d5bd0); color: var(--eap-acc, #6d5bd0); background: transparent; }
.ea-page .btn { border-radius: min(var(--eap-r, 16px), 12px); }
.ea-page .ea-compose .btn { border-radius: 50%; }
/* suggestions de l'accueil */
.ea-page .ea-chip { border-radius: var(--eap-r, 16px); font-size: .95em; line-height: 1.45; }
.eap-chips-contour .ea-page .ea-chip { background: transparent; }
.eap-chips-texte .ea-page .ea-chip { background: transparent; border-color: transparent; padding: .4rem .2rem; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--eap-acc, #6d5bd0) 45%, transparent); text-underline-offset: 4px; }
.ea-page .ea-chip:hover { border-color: var(--eap-acc, #6d5bd0); }
.ea-page .ea-chip.idea { background: color-mix(in srgb, var(--eap-acc, #6d5bd0) 7%, transparent); }

/* r199 · dans les espaces : plus de liste « Amis en ligne » (les discussions ouvertes restent) ; EALIONE en tête des membres */
body.in-spaces #dock .dock-contacts { display: none; }
.dsc-members .ea-srow { margin: 0 .3rem .3rem; border-radius: 10px; cursor: pointer; background: linear-gradient(115deg, color-mix(in srgb, #8a6cff 16%, transparent), color-mix(in srgb, #3fd0ff 12%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a6cff 35%, transparent); }
.dsc-members .ea-srow:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a6cff 65%, transparent); }
.dsc-members .ea-srow .ea-name { background: linear-gradient(90deg, #7b5cff, #23b4e8); -webkit-background-clip: text; background-clip: text; color: transparent; }

.cst-adopt { margin: .8rem 0; padding: .7rem .8rem; border: 1px dashed var(--border); border-radius: 10px; }

/* plein écran des espaces : l'en-tête et le bandeau sortent de l'écran ; seuls les boutons du compte (notifications, messages, ODA…) restent, en haut à droite de la barre du salon */
body.spaces-max-on > .notice { display: none !important; }

/* r207 : mode cinéma de l'arborescence (touche H) */
.map-cine-b { display: none; }
.map-wrap:fullscreen .map-cine-b, body.map-max .map-cine-b { display: inline-flex; align-items: center; justify-content: center; }
.map-wrap.map-cine .map-ui { opacity: 0 !important; pointer-events: none !important; transition: opacity .35s ease; }
.map-wrap.map-cine.cine-idle, .map-wrap.map-cine.cine-idle canvas { cursor: none !important; }
.map-cine-hint { position: absolute; left: 50%; top: 1.2rem; transform: translateX(-50%); z-index: 30; padding: .45rem .9rem; border-radius: 999px; background: rgba(10,12,16,.7); color: #fff; font-size: .85rem; pointer-events: none; transition: opacity .8s ease; backdrop-filter: blur(6px); }
.map-cine-hint.out { opacity: 0; }

/* r208 : mention visible avant l'envoi (calque sous la zone de saisie) */
.mi-mirror { position: absolute; z-index: 0; pointer-events: none; overflow: hidden; color: transparent !important; border-color: transparent !important; border-style: solid; word-wrap: break-word; overflow-wrap: break-word; margin: 0; }
.mi-input { position: relative; z-index: 1; background: transparent !important; background-image: none !important; }
.mi-tok { border-radius: 4px; transition: box-shadow .2s ease; }
.mi-fx-off .mi-tok { background: none; box-shadow: none; }
.mi-fx-pastille .mi-tok { background: color-mix(in srgb, var(--mi-c) var(--mi-a), transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mi-c) var(--mi-a), transparent); }
.mi-fx-souligne .mi-tok { border-radius: 0; background: linear-gradient(var(--mi-c), var(--mi-c)) left bottom / 100% 3px no-repeat, color-mix(in srgb, var(--mi-c) calc(var(--mi-a) / 3), transparent); }
.mi-fx-halo .mi-tok { background: color-mix(in srgb, var(--mi-c) calc(var(--mi-a) / 2), transparent); animation: mi-breathe 2.2s ease-in-out infinite; }
.mi-fx-reflet .mi-tok { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%) -150% 0 / 250% 100% no-repeat, color-mix(in srgb, var(--mi-c) var(--mi-a), transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mi-c) var(--mi-a), transparent); animation: mi-sheen 2.6s ease-in-out infinite; }
.mi-fx-neon .mi-tok { background: color-mix(in srgb, var(--mi-c) calc(var(--mi-a) / 3), transparent); box-shadow: 0 0 0 1.5px var(--mi-c), 0 0 10px color-mix(in srgb, var(--mi-c) 70%, transparent), inset 0 0 6px color-mix(in srgb, var(--mi-c) 40%, transparent); }
.mi-fx-degrade .mi-tok { background: linear-gradient(90deg, color-mix(in srgb, var(--mi-c) var(--mi-a), transparent), color-mix(in srgb, var(--mi-c2) var(--mi-a), transparent), color-mix(in srgb, var(--mi-c) var(--mi-a), transparent)) 0 0 / 200% 100%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mi-c) var(--mi-a), transparent); animation: mi-flow 3s linear infinite; }
.mi-tok.mi-salon { --mi-c: var(--mi-c2); }
.mi-pop .mi-tok.mi-new { animation: mi-pop .45s cubic-bezier(.3,1.6,.5,1) 1; }
.mi-fx-halo.mi-pop .mi-tok.mi-new { animation: mi-pop .45s cubic-bezier(.3,1.6,.5,1) 1, mi-breathe 2.2s ease-in-out .45s infinite; }
.mi-bad .mi-bad { text-decoration: underline wavy #e04848; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@keyframes mi-pop { 0% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--mi-c) 0%, transparent); } 40% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mi-c) 55%, transparent); } 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mi-c) var(--mi-a), transparent); } }
@keyframes mi-breathe { 0%, 100% { box-shadow: 0 0 4px 1px color-mix(in srgb, var(--mi-c) 35%, transparent); } 50% { box-shadow: 0 0 14px 4px color-mix(in srgb, var(--mi-c) 70%, transparent); } }
@keyframes mi-sheen { 0% { background-position: -150% 0, 0 0; } 60%, 100% { background-position: 250% 0, 0 0; } }
@keyframes mi-flow { to { background-position: 200% 0; } }
html.reduce-motion .mi-tok { animation: none !important; }

/* r211 : fenêtre « Gérer l'espace » plus grande (la règle .modal.wide la bridait à 860 px) */
.modal.manage-modal { max-width: min(1480px, 96vw); width: min(1480px, 96vw); height: min(980px, 94vh); max-height: 94vh; }

.perm-warn { display: block; margin-top: .45rem; padding: .55rem .7rem; border-radius: 8px; border: 1px solid color-mix(in srgb, #e04848 45%, transparent); background: color-mix(in srgb, #e04848 10%, transparent); font-size: .78rem; line-height: 1.45; color: var(--text); font-weight: 400; }

/* r212 : barre « modifications non enregistrées » */
.savebar { position: fixed; left: 50%; bottom: 18px; z-index: 400; width: min(760px, calc(100vw - 24px)); display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem .6rem 1rem; border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text); border: 1px solid var(--border); box-shadow: 0 10px 34px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.2,.9,.3,1.15), opacity .25s ease; }
.savebar.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.savebar .sb-txt { font-size: .9rem; font-weight: 600; }
.savebar .sb-reset { font-size: .88rem; }
.savebar .sb-save { background: #2fa05a; border-color: #2fa05a; color: #fff; }
.savebar.busy .sb-save { opacity: .6; pointer-events: none; }
@media (max-width: 600px) { .savebar .sb-txt { font-size: .8rem; } .savebar .sb-save { padding-inline: .6rem; } }

.savebar.nag { background: #c93a3a; color: #fff; border-color: #c93a3a; animation: sb-shake .45s cubic-bezier(.36,.07,.19,.97) 1; }
.savebar.nag .sb-reset { color: #fff; }
@keyframes sb-shake { 10%, 90% { transform: translate(calc(-50% - 2px), 0); } 20%, 80% { transform: translate(calc(-50% + 4px), 0); } 30%, 50%, 70% { transform: translate(calc(-50% - 8px), 0); } 40%, 60% { transform: translate(calc(-50% + 8px), 0); } }
.savebar .sb-save, .savebar .sb-reset { white-space: nowrap; flex-shrink: 0; }

/* r214 : salons — survol et salon ouvert personnalisables (Configuration › Salons) */
html .dsc .salon-link { border-radius: var(--sl-r, 7px); transition: background var(--sl-ms, 150ms) ease, box-shadow var(--sl-ms, 150ms) ease, transform var(--sl-ms, 150ms) ease, color var(--sl-ms, 150ms) ease; position: relative; }
html .dsc .salon-link:hover:not([aria-current="true"]) { filter: none; }
html.sl-h-fond .dsc .salon-link:hover:not([aria-current="true"]) { background: color-mix(in srgb, var(--slh-c) var(--slh-a), transparent); }
html.sl-h-verre .dsc .salon-link:hover:not([aria-current="true"]) { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)), color-mix(in srgb, var(--slh-c) var(--slh-a), transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.sl-h-barre .dsc .salon-link:hover:not([aria-current="true"]) { background: color-mix(in srgb, var(--slh-c) calc(var(--slh-a) / 2), transparent); box-shadow: inset 3px 0 0 var(--slh-c); }
html.sl-h-decal .dsc .salon-link:hover:not([aria-current="true"]) { transform: translateX(5px); background: color-mix(in srgb, var(--slh-c) calc(var(--slh-a) / 2), transparent); }
html.sl-h-lueur .dsc .salon-link:hover:not([aria-current="true"]) { background: color-mix(in srgb, var(--slh-c) calc(var(--slh-a) / 2), transparent); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--slh-c) calc(var(--slh-a) * 2.5), transparent); }
html.sl-h-souligne .dsc .salon-link:hover:not([aria-current="true"]) { background: none; text-decoration: underline; text-decoration-color: var(--slh-c); text-decoration-thickness: 2px; text-underline-offset: 4px; }
html.sl-h-aucun .dsc .salon-link:hover:not([aria-current="true"]) { background: none; }
html.sl-htxt .dsc .salon-link:hover:not([aria-current="true"]), html.sl-htxt .dsc .salon-link:hover:not([aria-current="true"]) .salon-ico { color: var(--slh-c) !important; }
/* salon ouvert */
html .dsc .salon-link[aria-current="true"] { filter: none; }
html.sl-a-couleur .dsc .cat-salons .salon-link[aria-current="true"] { background: color-mix(in srgb, var(--sla-c) var(--sla-a), transparent); box-shadow: none; }
html.sl-a-barre .dsc .cat-salons .salon-link[aria-current="true"] { background: color-mix(in srgb, var(--sla-c) calc(var(--sla-a) / 2), transparent); box-shadow: inset 3px 0 0 var(--sla-c); }
html.sl-a-degrade .dsc .cat-salons .salon-link[aria-current="true"] { background: linear-gradient(90deg, color-mix(in srgb, var(--sla-c) var(--sla-a), transparent), color-mix(in srgb, var(--sla-c2) var(--sla-a), transparent)); box-shadow: none; }
html.sl-a-neon .dsc .cat-salons .salon-link[aria-current="true"] { background: color-mix(in srgb, var(--sla-c) calc(var(--sla-a) / 3), transparent); box-shadow: 0 0 0 1px var(--sla-c), 0 0 12px color-mix(in srgb, var(--sla-c) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--sla-c) 30%, transparent); }
html.sl-a-verre .dsc .cat-salons .salon-link[aria-current="true"] { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08)), color-mix(in srgb, var(--sla-c) var(--sla-a), transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 10px rgba(0,0,0,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.sl-a-pastille .dsc .cat-salons .salon-link[aria-current="true"], html.sl-a-pastille .dsc .cat-salons .salon-link[aria-current="true"] .salon-ico { background: var(--sla-c); color: #fff !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--sla-c) 45%, transparent); }
html.sl-a-pastille .dsc .cat-salons .salon-link[aria-current="true"] .salon-ico { background: none; }
html.sl-atxt .dsc .salon-link[aria-current="true"], html.sl-atxt .dsc .salon-link[aria-current="true"] .salon-ico { color: var(--sla-c) !important; }
html.sl-abold .dsc .salon-link[aria-current="true"] { font-weight: 700; }
html:not(.sl-abold) .dsc .salon-link[aria-current="true"] { font-weight: 500; }

/* r215 : dossier « Espaces gelés » — image réglable, fenêtre au survol */
button.srv-folder { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; opacity: .8; }
button.srv-folder:hover, button.srv-folder[aria-expanded="true"], button.srv-folder.cur { opacity: 1; }
.srv-fz-img { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.fz-pop { position: fixed; z-index: 140; max-height: calc(100vh - 16px); overflow-y: auto; padding: .7rem; border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: fz-in .18s ease-out; }
@keyframes fz-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.fz-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .1rem .3rem .55rem; font-weight: 700; font-size: .92rem; }
.fz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .4rem; }
.fz-card { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem; border-radius: 10px; text-decoration: none; color: var(--text); background: color-mix(in srgb, #7fc8ff 7%, transparent); border: 1px solid transparent; position: relative; }
.fz-card:hover, .fz-card.cur { background: color-mix(in srgb, #7fc8ff 16%, transparent); border-color: color-mix(in srgb, #7fc8ff 35%, transparent); }
.fz-card img, .fz-card .srv-ini { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.fz-t { display: flex; flex-direction: column; min-width: 0; font-size: .74rem; color: var(--muted); }
.fz-t strong { font-size: .88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* r216 : barre d'écriture modernisée (icônes au trait au lieu des émojis) */
.ctool { color: color-mix(in srgb, var(--muted) 85%, var(--text)); transition: color .15s ease, background .15s ease, transform .12s ease; }
.ctool:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.ctool:active { transform: scale(.92); }
.ctool .ct-svg { width: 20px; height: 20px; display: block; }
.cw-form .ctool .ct-svg { width: 18px; height: 18px; }
.ctool.rec { color: #e04848; }
.cw-send { display: inline-flex; align-items: center; justify-content: center; padding-inline: .55rem; }
.cw-send .ct-svg { width: 18px; height: 18px; }

.bt-ico { display: inline-flex; vertical-align: -4px; margin-right: .3rem; }
.bt-ico:only-child { margin-right: 0; }
.bt-ico .ct-svg { width: 17px; height: 17px; }

/* r217 : message de bienvenue de l'équipe (fil citoyen) */
.welcome-card { position: relative; margin: .8rem 0; padding: 1.1rem 1.2rem; border: 1px solid color-mix(in srgb, #c9a46a 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #c9a46a 12%, var(--surface)), var(--surface) 55%); }
.welcome-card .wc-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: var(--surface-2); padding: 4px; }
.welcome-card .wc-title { font-size: 1.25rem; margin: .8rem 0 .4rem; }
.welcome-card .wc-body { font-size: .95rem; line-height: 1.55; }
.welcome-card .wc-body ul { margin: .4rem 0; padding-left: 1.2rem; }
.welcome-card .wc-sign { margin: .5rem 0 0; font-weight: 600; }
.welcome-card .wc-x { position: absolute; top: .6rem; right: .6rem; border: 0; background: transparent; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.welcome-card .wc-x:hover { background: var(--surface-2); color: var(--text); }

/* r218 : « Constitution » rangée tout à droite du menu, sous le pseudo */
.nav ul { width: 100%; }

/* r219 : couleurs de mention choisies par le membre */
.men-demo { padding: .7rem .9rem; border-radius: 10px; margin-bottom: .6rem; }
.men-cols.off { opacity: .45; pointer-events: none; }
.men-cols input[type=color] { width: 44px; height: 30px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: var(--surface); cursor: pointer; }

/* r220 : teinte, saturation et luminosité des fonds d'espace */
#sbg { filter: var(--sbg-fx, none); }
body.sbg-on.lc-fond #sbg { filter: var(--sbg-fx2, ) var(--lc, none); }
body.glass-baked.sbg-on .dsc.baked.baked-fond ~ #sbg, body.glass-baked.sbg-on.gb-fond #sbg { filter: var(--sbg-fx, none); }

.sbg-demo-old { height: 70px; border-radius: 10px; margin-bottom: .6rem; background: var(--space-bg, linear-gradient(135deg, #4f6f96, #c9a46a, #9a6248)); background-size: cover; background-position: center; filter: var(--sbg-fx, none); border: 1px solid var(--border); }

/* r225 : aperçu du fond d'espace jour / nuit (Paramètres › Apparence) */
.sbg-prev { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .7rem; }
.sbg-prev figure { margin: 0; }
.sbg-prev figcaption { font-size: .78rem; color: var(--muted); text-align: center; margin-top: .25rem; }
.sbg-pv { position: relative; height: 120px; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; }
.sbg-pv-ui { position: absolute; inset: 12px auto 12px 12px; width: 32%; border-radius: 7px; background: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.sbg-pv.dark .sbg-pv-ui { background: rgba(22,27,36,.5); }
.sbg-pv-bg { position: absolute; inset: 0; }

/* r226 : mode allégé — sans flou, menus et fenêtres flottantes deviennent opaques pour rester lisibles */
html.fx-lite body.menu-glass .hdr-drop, html.fx-lite body.menu-glass .mini-profile, html.fx-lite body.menu-glass .ctx-menu, html.fx-lite body.menu-glass .rc-menu, html.fx-lite body.menu-glass .mention-pop, html.fx-lite body.menu-glass .pick-pop, html.fx-lite body.menu-glass .vov-menu,
html.fx-lite body.fw-glass .dock-contacts, html.fx-lite body.fw-glass .chatwin, html.fx-lite body.fw-glass .ealione, html.fx-lite .fz-pop, html.fx-lite .savebar { background: var(--surface) !important; }
.call-btn .ct-svg { width: 18px; height: 18px; display: block; }
.wa-online { scrollbar-width: thin; }

/* r230 : liste des conversations plus large, et réglable en faisant glisser sa bordure */
.wa { grid-template-columns: var(--wa-w, 400px) minmax(0, 1fr); position: relative; }
.wa-rs { position: absolute; top: 0; bottom: 0; left: calc(var(--wa-w, 400px) - 4px); width: 8px; cursor: col-resize; z-index: 5; touch-action: none; }
.wa-rs::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.wa-rs:hover::after, .wa-dragging .wa-rs::after { background: var(--accent, #c9a46a); }
.wa-dragging { user-select: none; cursor: col-resize; }
@media (max-width: 900px) { .wa { grid-template-columns: minmax(0, 1fr); } .wa-rs { display: none; } }

/* r233 : voile de la bannière de pseudo — calé sur le nom lui-même (aucune mesure : stable pendant les réglages).
   La bannière garde un voile résiduel uniforme ; le nom porte un voile complémentaire, plein sous lui, dont le fondu
   est centré sur sa dernière lettre (+ décalage). Les deux se combinent pour donner l'intensité réglée sous le pseudo. */
.has-plate.nfx-holo { --nfx-res: var(--nfx-after, calc(var(--nfx, .75) * (1 - var(--nfx-f, 1)))); }

.mail-new-row { padding: .5rem .9rem; border-bottom: 1px solid var(--border); gap: .5rem; }
.mail-box { display: inline-block; font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 6px; background: color-mix(in srgb, #c9a46a 22%, transparent); color: var(--text); margin-right: .2rem; }

/* r240 : étiquettes @pseudo réglables (Configuration › Mentions) */
.mention { color: var(--mt-c, #3767c9); background: var(--mt-bg, rgba(77,141,255,.14)); font-weight: var(--mt-w, 600); }
[data-theme="dark"] .mention { color: var(--mt-c, #a9c4ff); background: var(--mt-bg, rgba(77,141,255,.2)); }
.mention.me, .mention.all, [data-theme="dark"] .mention.me, [data-theme="dark"] .mention.all { color: var(--mt-me, #f2d29a); background: var(--mt-me-bg, rgba(201,164,106,.25)); }
.mention.salon, [data-theme="dark"] .mention.salon { background: var(--surface-3); color: var(--text); }

/* r242 : visiteurs (sans compte) : ni espaces ni votes dans les menus (seuls les directs restent accessibles via ODANIE TV) */
html.is-visitor .auth-only { display: none !important; }
.why-verif { margin: .4rem 0 .8rem; padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.why-verif summary { cursor: pointer; }
.why-verif ul { margin: .4rem 0 .6rem; padding-left: 1.2rem; }
.why-verif li { margin-bottom: .3rem; }

/* r244 : vidéo de vérification d'identité */
.id-video { padding: .7rem .8rem; border: 1px dashed var(--border); border-radius: 10px; display: grid; gap: .5rem; }
.id-vtext { margin: 0; padding: .6rem .8rem; border-radius: 8px; background: var(--surface-2); font-weight: 600; font-size: 1.02rem; }
.id-vbox { position: relative; width: 100%; max-width: 360px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #0b0e13; }
.id-vbox video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.id-vbox video[controls] { transform: none; }
.id-vrec { position: absolute; top: 8px; left: 8px; padding: .15rem .5rem; border-radius: 6px; background: rgba(220,38,38,.9); color: #fff; font-size: .78rem; font-weight: 700; }
.idv-video { display: grid; gap: .25rem; max-width: 320px; } .idv-video video { width: 100%; border-radius: 8px; background: #000; }
.verif-tip { position: fixed; z-index: 400; width: 280px; padding: .7rem .8rem; border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(0,0,0,.28); font-size: .85rem; animation: fz-in .15s ease-out; }
.verif-tip p { margin: .35rem 0 .55rem; line-height: 1.45; color: var(--muted); }
.verif-tip strong { font-size: .9rem; }

/* r249 : fenêtre Partager */
.share-modal { max-width: 460px; }
.share-link { display: flex; gap: .4rem; margin: .8rem 0; } .share-link .input { flex: 1; min-width: 0; font-size: .85rem; }
.share-acts { display: grid; gap: .35rem; }
.share-act { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.share-act:hover { background: var(--surface-2); }
.share-ic { display: inline-flex; color: var(--muted); } .share-ic .ct-svg { width: 18px; height: 18px; }
.share-ext { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.share-net { padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--border); font-size: .82rem; text-decoration: none; color: var(--text); background: var(--surface-2); }
.share-net:hover { background: var(--surface-3); }

/* ===== r252 : onglets du profil groupés (menus déroulants), glisser-déposer façon favoris, lecteur PDF du manifeste ===== */
.pf-tabbar { position: relative; }
.pf-tabs-sp { flex: 1 1 auto; }
.pf-tabbar .pf-tabs-add { margin-left: 0; }
.pf-tg { position: relative; display: inline-flex; }
.pf-tg-b .pf-tg-cur { font-weight: 600; opacity: .85; }
.pf-tg-ch { margin-left: .1rem; transition: transform .18s ease; opacity: .7; }
.pf-tg.open .pf-tg-ch { transform: rotate(180deg); }
.pf-tg.open > .pf-tg-b:not([aria-selected="true"]) { background: var(--surface-2); color: var(--text); }
.pf-tg.drop-in > .pf-tg-b { outline: 2px dashed var(--accent, #3b82f6); outline-offset: 2px; }
.pf-tg-m { position: fixed; z-index: 400; min-width: 210px; max-width: min(320px, calc(100vw - 16px)); padding: .35rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 2px; animation: pfTgIn .14s ease-out; }
.pf-tg-m[hidden] { display: none; }
@keyframes pfTgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pf-tabbar .pf-tg-m button { width: 100%; justify-content: space-between; border-radius: 9px; padding: .5rem .7rem; text-align: left; }
.pf-tabbar .pf-tg-m button[aria-selected="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--text); }
.pf-tab-ghost { position: fixed; z-index: 9999; pointer-events: none; font: inherit; font-size: .9rem; font-weight: 600; padding: .38rem .8rem; border-radius: 999px; background: var(--text); color: var(--surface); box-shadow: 0 10px 28px rgba(0,0,0,.25); opacity: .92; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.pf-tab-ghost .pf-tg-ch { display: none; }
.pf-dragsrc { opacity: .35; }
.pf-drop-mark { position: fixed; z-index: 9998; pointer-events: none; background: var(--accent, #3b82f6); border-radius: 3px; display: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3b82f6) 25%, transparent); }
body:has(.pf-tab-ghost) { cursor: grabbing; user-select: none; }
/* éditeur « ⋯ » : groupes */
.tabs-ed-grp { list-style: none; border: 1px solid var(--border); border-radius: 12px; padding: .35rem .4rem .45rem; margin: .35rem 0; background: var(--surface-2); }
.tabs-ed-grp.dragging { opacity: .6; }
.tabs-ed-gh { display: flex; align-items: center; gap: .45rem; padding: .1rem .2rem .35rem; }
.tabs-ed-gh .tabs-ed-h { cursor: grab; }
.tabs-ed-gh .input { flex: 1; font-weight: 700; padding: .3rem .55rem; min-width: 0; }
.tabs-ed-sub { list-style: none; margin: 0; padding: 0 0 0 .7rem; min-height: 2.2rem; border-left: 2px solid var(--border); }
.tabs-ed-sub:empty::after { content: 'Glissez un onglet ici'; display: block; padding: .55rem .5rem; font-size: .8rem; color: var(--muted); }
/* lecteur PDF */
.pf-manif.drop { outline: 2px dashed var(--accent, #3b82f6); outline-offset: 3px; }
.pdfv { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.pdfv-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .35rem; padding: .4rem .55rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.pdfv-t { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .88rem; min-width: 0; }
.pdfv-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; }
.pdfv-p, .pdfv-zv { color: var(--muted); white-space: nowrap; }
.pdfv-zv { min-width: 3.4em; text-align: center; }
.pdfv-pages { --pdfz: 1; max-height: min(78vh, 980px); overflow: auto; padding: .9rem; display: flex; flex-direction: column; align-items: safe center; gap: .8rem; }
.pdfv-pg { position: relative; width: calc(min(100%, 820px) * var(--pdfz)); flex: none; background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.14); overflow: hidden; }
.pdfv-pages:has(.pdfv-pg) { align-items: safe center; }
.pdfv-pg canvas { display: block; width: 100%; height: 100%; }
.pdfv-pn { position: absolute; right: .45rem; bottom: .35rem; color: #888; background: rgba(255,255,255,.85); padding: 0 .35rem; border-radius: 6px; }
.pdfv-if { width: 100%; height: 75vh; border: 0; background: #fff; }
.pdfv:fullscreen { border-radius: 0; display: flex; flex-direction: column; }
.pdfv:fullscreen .pdfv-pages { max-height: none; flex: 1; }
.pdfv:fullscreen .pdfv-pg { width: calc(min(100%, 980px) * var(--pdfz)); }
@media (max-width: 640px) { .pdfv-t span { max-width: 12ch; } .pdfv-pages { padding: .5rem; } }

/* ===== r253 : partage au survol (boutons simples), citation d'un message d'espace dans une publication ===== */
.share-pop { position: fixed; z-index: 1200; width: 240px; padding: .35rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 40px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 2px; animation: pfTgIn .14s ease-out; }
.share-b { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; text-align: left; }
.share-b:hover, .share-b:focus-visible { background: var(--surface-2); }
.share-b .ct-svg { width: 19px; height: 19px; color: var(--muted); flex: none; }
.share-b:hover .ct-svg { color: var(--text); }
.share-nets { display: flex; flex-wrap: wrap; gap: .3rem; padding: .45rem .3rem .25rem; margin-top: .2rem; border-top: 1px solid var(--border); }
.share-pop .share-net { padding: .28rem .6rem; font-size: .78rem; }
.share-back { align-self: flex-start; border: 0; background: none; color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; padding: .2rem .4rem .35rem; }
.share-back:hover { color: var(--text); }
.share-pop .input.sm { padding: .4rem .6rem; font-size: .88rem; margin-bottom: .25rem; }
.share-list { max-height: 260px; overflow: auto; }
.share-pop .fwd-it { justify-content: flex-start; gap: .45rem; }
[data-share-post].sharing, [data-mshare].sharing { color: var(--text); }
.post-actions [data-share-post] .ct-svg { width: 18px; height: 18px; }
.msg-tools [data-mshare] .ct-svg { width: 17px; height: 17px; }
.post-quote { margin: .55rem 0 .35rem; padding: .6rem .75rem; border-left: 3px solid var(--muted); border-radius: 4px 12px 12px 4px; background: var(--surface-2); }
.post-quote .pq-h { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .88rem; }
.post-quote .pq-h a { color: inherit; text-decoration: none; }
.post-quote .pq-b { margin-top: .3rem; font-size: .93rem; }
.post-quote .pq-l { display: inline-block; margin-top: .3rem; }
/* r254 : logos des réseaux dans la fenêtre de partage */
.share-nets { justify-content: space-between; gap: .25rem; padding: .5rem .35rem .3rem; }
.share-logo { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: transform .12s ease, filter .12s ease; }
.share-logo:hover { transform: translateY(-1px) scale(1.06); filter: brightness(1.08); }
.sl-whatsapp { background: #25D366; } .sl-x { background: #111; } .sl-facebook { background: #0866FF; } .sl-telegram { background: #26A5E4; } .sl-linkedin { background: #0A66C2; }
.sl-linkedin svg { width: 16px; height: 16px; }
.sl-courriel { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
:root[data-theme="dark"] .sl-x { background: #fff; color: #000; }

/* ===== r256 : menus Paramètres et Affichage ===== */

.hdr-drop .hd-plain { padding-left: .9rem; }
.hdr-drop .hd-item.on { background: var(--surface-2); font-weight: 600; }
.hd-th { gap: .6rem; }
.th-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong); flex: none; }
.th-light { background: #ffffff; } .th-dark { background: #161b21; } .th-auto { background: linear-gradient(90deg, #ffffff 50%, #161b21 50%); }
.hdr-drop.hdk-settings, .hdr-drop.hdk-theme { width: 240px; }

/* r257 : Constitution — onglets « Constitution » / « Propositions citoyennes » */
.cst-tabs { display: flex; gap: .3rem; margin: .2rem 0 .7rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.cst-tabs button { font: inherit; font-size: .92rem; font-weight: 600; border: 1px solid transparent; background: transparent; color: var(--muted); padding: .4rem .9rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.cst-tabs button:hover { background: var(--surface-2); color: var(--text); }
.cst-tabs button[aria-selected="true"] { background: var(--text); color: var(--surface); }
.cst-tabs .cst-n { font-size: .72rem; }
.cps-list { display: grid; gap: .45rem; }

/* r260 : menu « Démocratie » de la barre principale (Constitution, Propositions, Votes) */
.nav-grp-b { display: inline-flex; align-items: center; gap: .25rem; padding: .8rem 1rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--text); font: inherit; font-size: .95rem; white-space: nowrap; cursor: pointer; }
.nav-grp-b:hover, .nav-grp.open .nav-grp-b { background: var(--surface-2); }
.nav-grp-b[data-cur] { color: var(--accent); font-weight: 600; border-bottom-color: var(--gold); }
.nav-grp-cur { font-weight: 600; }
.nav-grp-ch { opacity: .65; transition: transform .18s ease; margin-left: .1rem; }
.nav-grp.open .nav-grp-ch { transform: rotate(180deg); }
.nav .nav-sub { position: fixed; z-index: 300; display: flex; flex-direction: column; min-width: 190px; padding: .35rem; margin: 0; list-style: none; overflow: visible; background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 12px 12px; box-shadow: 0 14px 34px rgba(0,0,0,.16); animation: pfTgIn .14s ease-out; }
.nav .nav-sub[hidden] { display: none; }
.nav .nav-sub li { display: block; }
.nav .nav-sub a { border-bottom: 0; border-radius: 8px; padding: .55rem .8rem; }
.nav .nav-sub a[aria-current="page"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--gold); }
.nav ul.nav-sub { width: auto; }
.nav .nav-sub .nav-sub-sep { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .3rem; }
/* r262 : mode Essentiel — aide au choix (débats TV, programme) */
.ess-help { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: .8rem 0; padding: .9rem 1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-size: 1.02rem; }
.ess-pick-b { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

/* r263 : mode Essentiel — l'espace en version simple : la chaîne (vidéo) et son chat, sans colonnes autour */
.ess-sp-bar { display: none; }
.ux-essentiel .dsc { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr); max-width: 1100px; margin: 0 auto; }
.ux-essentiel .dsc > .dsc-servers, .ux-essentiel .dsc > .dsc-side, .ux-essentiel .dsc > .dsc-members, .ux-essentiel .dsc > .col-rs, .ux-essentiel .dsc > .m-back, .ux-essentiel .dsc > .m-mem { display: none !important; }
.ux-essentiel .ess-sp-bar { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface); font-size: 1.1rem; }
.ux-essentiel .dsc-main { display: flex !important; }
.ux-essentiel .msgs { font-size: 1.06rem; }
.ux-essentiel .msg-tools [data-mtr], .ux-essentiel .msg-tools [data-mmenu] { display: none; }
/* r263 : rôles automatiques */
.role-auto { display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 6px; font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--surface-3); color: var(--muted); vertical-align: 1px; }
.role-auto-box { display: flex; flex-direction: column; gap: .25rem; padding: .7rem .85rem; margin-bottom: .8rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }

/* r264 : miniature vidéo flottante du vocal (quand on navigue ailleurs) */
.vmini { position: fixed; z-index: 900; width: 320px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b0e12; box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06); cursor: grab; touch-action: none; user-select: none; transition: box-shadow .15s ease; }
.vmini.moving { cursor: grabbing; }
.vmini.talk { box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 2px #3fbf7f; }
.vmini video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0e12; pointer-events: none; }
.vmini.mirror video { transform: scaleX(-1); }
.vmini-top, .vmini-bar { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: .3rem; padding: .35rem .45rem; color: #fff; opacity: 0; transition: opacity .15s ease; }
.vmini-top { top: 0; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); }
.vmini-bar { bottom: 0; justify-content: center; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent); padding-bottom: .5rem; }
.vmini:hover .vmini-top, .vmini:hover .vmini-bar, .vmini:focus-within .vmini-top, .vmini:focus-within .vmini-bar { opacity: 1; }
.vmini-n { flex: 1; min-width: 0; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.vmini-live { width: 8px; height: 8px; border-radius: 50%; background: #3fbf7f; flex: none; }
.vmini-b { width: 32px; height: 32px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.vmini-b:hover { background: rgba(255,255,255,.28); }
.vmini-b.off { background: rgba(229,72,77,.85); }
.vmini-b.on { background: rgba(255,255,255,.9); color: #111; }
.vmini-b.hang { background: #e5484d; }
.vmini-b.hang:hover { background: #ff5b60; }
.vmini-top .vmini-b { width: 26px; height: 26px; }
.vmini-rs { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.5) 58%, transparent 58%, transparent 70%, rgba(255,255,255,.5) 70%, rgba(255,255,255,.5) 78%, transparent 78%); opacity: 0; }
.vmini:hover .vmini-rs { opacity: 1; }
/* repliée : simple pastille avec la vidéo en rond */
.vmini.collapsed { width: 64px !important; aspect-ratio: 1; border-radius: 50%; }
.vmini.collapsed .vmini-top, .vmini.collapsed .vmini-bar, .vmini.collapsed .vmini-rs { display: none; }
@media (max-width: 640px) { .vmini { width: 190px; } }
/* r265 : suppression rapide des rôles (×) */
.role-item .role-x { border: 0; background: none; color: var(--muted); font-size: 1.05rem; line-height: 1; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; opacity: 0; flex: none; }
.role-item:hover .role-x, .role-item.on .role-x, .role-item .role-x:focus-visible { opacity: 1; }
.role-item .role-x:hover { background: var(--red-soft); color: var(--red); }
.id-parent { padding: .8rem .9rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }

/* ===== r267 : régie des directs — surimpressions interactives sur la vidéo ===== */
.stg { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.stg-z { position: absolute; pointer-events: auto; border-radius: 10px; box-sizing: border-box; }
.stg-p { cursor: pointer; transition: box-shadow .15s ease, background .15s ease; }
.stg-p:hover { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 1px rgba(0,0,0,.25); background: rgba(255,255,255,.06); }
.stg-tag { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4rem; max-width: 96%; padding: .22rem .65rem; border-radius: 999px; background: rgba(12,15,20,.72); color: #fff; font-size: clamp(.62rem, 1.6cqi, .95rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); }
.stg-tag b { font-weight: 800; color: #f2d29a; font-size: .85em; }
.stg-p:hover .stg-tag { background: rgba(255,255,255,.92); color: #111; }
.stg-p:hover .stg-tag b { color: #8a6a35; }
.stg-l, .stg-t { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; font-weight: 700; font-size: clamp(.65rem, 1.7cqi, 1rem); text-align: center; padding: .2rem .5rem; }
.stg-l.stg-discret span, .stg-t.stg-discret span { opacity: 0; transition: opacity .15s ease; background: rgba(12,15,20,.75); padding: .2rem .6rem; border-radius: 999px; }
.stg-l.stg-discret:hover, .stg-t.stg-discret:hover { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.stg-l.stg-discret:hover span, .stg-t.stg-discret:hover span { opacity: 1; }
.stg-l.stg-bouton { background: linear-gradient(135deg, #f2d29a, #c9a46a 55%, #a8875a); color: #1a1408; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.stg-l.stg-bouton:hover { filter: brightness(1.08); transform: translateY(-1px); }
.stg-t.stg-bouton { background: rgba(12,15,20,.78); border-radius: 10px; border-left: 4px solid #c9a46a; justify-content: flex-start; }
.stg-cadre { border: 2px solid rgba(255,255,255,.8); background: rgba(0,0,0,.18); }
.stg-fs { position: absolute; right: .5rem; top: .5rem; pointer-events: auto; width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(12,15,20,.6); color: #fff; font-size: 1rem; cursor: pointer; opacity: 0; transition: opacity .15s; }
.tv-screen:hover .stg-fs { opacity: 1; }
.tv-screen:fullscreen { aspect-ratio: auto; }
/* mini-fiche d'un intervenant */
.stg-card { position: fixed; z-index: 1300; width: 300px; max-width: calc(100vw - 16px); padding: .85rem; border-radius: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: .55rem; animation: pfTgIn .14s ease-out; }
.stg-card-h { display: flex; gap: .65rem; align-items: center; }
.stg-card-h .grow { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.stg-card-s { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; }
.stg-card-b { display: flex; flex-direction: column; gap: .3rem; }
.stg-card-b .btn { width: 100%; justify-content: flex-start; }
/* bandeau des intervenants sous la vidéo */
.stage-spk { display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--border); background: var(--surface); }
.stage-spk-l { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); flex: none; }
.stage-spk-u { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem .25rem .3rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; flex: none; text-align: left; }
.stage-spk-u > span { display: flex; flex-direction: column; line-height: 1.15; font-size: .85rem; }
.stage-spk-u:hover { border-color: var(--gold); background: var(--surface); }

/* ===== tableau de bord de la chaîne ===== */
.container:has(> .chd) { max-width: 1520px; }
.chd-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: 1rem 0 .9rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.chd-head h1 { margin: 0; font-size: 1.5rem; }
.chd-logo { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; }
.chd-kpis { display: flex; gap: .4rem; }
.chd-kpi { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .85rem; }
.chd-kpi i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.chd-kpi.on i { background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.25); }
#chd-save.pulse { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent); }
.chd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.1rem; align-items: start; }
@media (max-width: 1100px) { .chd-grid { grid-template-columns: 1fr; } }
.chd-main { min-width: 0; }
.chd-scenes { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.chd-sc { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.chd-sc .xs { font-weight: 700; }
.chd-sc.sel { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.chd-sc.air { background: color-mix(in srgb, #e5484d 12%, var(--surface)); border-color: #e5484d; }
.chd-sc.add { border-style: dashed; color: var(--muted); }
.chd-air-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: rec 1.6s ease-out infinite; }
.chd-onair { margin-bottom: .6rem; }
.chd-air { color: #e5484d; font-weight: 800; font-size: .8rem; letter-spacing: .05em; }
.chd-go { background: #e5484d; border-color: #e5484d; color: #fff; }
.chd-prev { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.18); background: #0b0e12; }
.chd-prev .tv-screen { border-radius: 0; }
.stg-ed { pointer-events: auto; cursor: crosshair; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 10% 10%; touch-action: none; }
.stg-ed .stg-z { cursor: move; border: 2px dashed rgba(255,255,255,.75); background: rgba(91,141,239,.14); }
.stg-ed .stg-z.sel { border: 2px solid #f2d29a; background: rgba(242,210,154,.16); box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.stg-ed .stg-l span, .stg-ed .stg-t span { opacity: 1 !important; }
.stg-h { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; border-radius: 4px; background: #f2d29a; border: 2px solid #1a1408; cursor: nwse-resize; }
.chd-side { display: flex; flex-direction: column; gap: .8rem; }
.chd-card { padding: .9rem 1rem; }
.chd-card .card-title { margin-bottom: .35rem; }
.chd-find { position: relative; }
.chd-res { display: flex; flex-direction: column; gap: 2px; margin-top: .3rem; }
.chd-pick { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.chd-pick:hover { background: var(--surface-2); }
.chd-who { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border-radius: 10px; background: var(--surface-2); }
.chd-who .grow { display: flex; flex-direction: column; }
.chd-spk { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.chd-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .3rem .2rem .25rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .85rem; }
.chd-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; }
.chd-chip button:hover { color: var(--red); }
.chd-obs-s { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); }
.chd-obs-s i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.chd-obs-s i.wait { background: #e6a23c; } .chd-obs-s i.on { background: #3fbf7f; }
/* r267 : espaces des collectifs (paliers) */
.coll-tier { margin: .45rem .55rem; padding: .55rem .7rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: .15rem; }
.cs-card .cs-facts { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; }
.cs-facts li { display: flex; justify-content: space-between; gap: .5rem; } .cs-facts li span { color: var(--muted); }
.cs-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: .6rem 0 .3rem; }
.cs-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-radius: inherit; }
/* r269 : guide de la régie */
.rg-dots { display: flex; gap: .35rem; margin-bottom: .8rem; }
.rg-dot { flex: 1; height: 5px; border: 0; border-radius: 999px; background: var(--surface-3); cursor: pointer; padding: 0; }
.rg-dot.done { background: var(--gold-2); } .rg-dot.on { background: var(--gold); }
.rg-txt { font-size: .97rem; line-height: 1.6; min-height: 220px; }
.rg-txt ol, .rg-txt ul { padding-left: 1.2rem; } .rg-txt li { margin: .3rem 0; }
.rg-tip { padding: .6rem .8rem; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--gold); font-size: .9rem; }
.rg-check { list-style: none; padding-left: 0 !important; } .rg-check li::before { content: '☐ '; color: var(--gold-2); font-weight: 700; }
.rg-txt kbd { padding: .05rem .35rem; border-radius: 4px; border: 1px solid var(--border-strong); font-size: .85em; }
.rg-spot { outline: 3px solid var(--gold) !important; outline-offset: 4px; border-radius: 10px; animation: rgSpot 1s ease-in-out 3; }
@keyframes rgSpot { 50% { outline-color: transparent; } }
/* r270 : espace et chaîne personnels (seuils) */
.pp-card { margin-bottom: .8rem; }
.pp-row { padding: .7rem 0; border-top: 1px solid var(--border); }
.pp-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .35rem; }
@media (max-width: 640px) { .pp-gauges { grid-template-columns: 1fr; } }
.pp-gauges .cs-bar { margin: .3rem 0 0; }
.pp-rank { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 .4rem; } .pp-rank b { font-size: 1.4rem; }
/* r274 : onglet Média du profil (espace et chaîne) */
.pf-media-h { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.pf-media-logo { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex: none; }
.pf-media-logo.ini { display: inline-flex; align-items: center; justify-content: center; background: var(--metal-dark); color: #fff; font-weight: 800; font-size: 1.6rem; }
.pf-media-h .grow { display: flex; flex-direction: column; min-width: 0; }
.pf-media-n { font-size: 1.15rem; }
.pf-chan .tv-screen { border-radius: 12px; }
.pf-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; margin-left: .3rem; vertical-align: 1px; }

/* r276 : votes en direct — choix du relais en orange, vote direct en vert verrouillé (« Changer mon vote ») */
.vov-a.via, .vov-a.yes.via, .vov-a.no.via { background: linear-gradient(180deg, #ffbe55, #e8700c); color: #2a1300; text-shadow: none; box-shadow: 0 0 0 2px rgba(255,190,85,.55), 0 6px 22px rgba(232,112,12,.45); }
.vov-a.via .vov-l, .vov-a.yes.via .vov-l, .vov-a.no.via .vov-l { color: #2a1300; }
.vov-a.via::after { content: attr(data-via); text-transform: none; letter-spacing: 0; font-size: .58em; font-weight: 700; opacity: .85; }
.vov-a.sel, .vov-a.yes.sel, .vov-a.no.sel { background: linear-gradient(180deg, #74f2b6, #0d9a5d); color: #032112; text-shadow: none; box-shadow: 0 0 0 2px rgba(116,242,182,.6), 0 6px 22px rgba(13,154,93,.45); }
.vov-a.sel .vov-l, .vov-a.yes.sel .vov-l, .vov-a.no.sel .vov-l { color: #032112; }
.vov-a.sel::after { content: '✓ votre vote'; position: absolute; right: 2.2em; top: 50%; transform: translateY(-50%); font-size: .58em; font-weight: 800; opacity: .8; }
.vov.locked .vov-a:not(.sel) { opacity: .42; filter: saturate(.5); cursor: not-allowed; }
.vov.locked .vov-a:not(.sel):hover { background: linear-gradient(180deg, rgba(23,44,104,.9), rgba(8,17,52,.92)); }
.vov-mine strong.ok { color: #74f2b6; } .vov-mine strong.or { color: #ffbe55; }
.vov-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .4em; vertical-align: .05em; } .vov-dot.or { background: #ffbe55; box-shadow: 0 0 8px #ffbe55; }
.vov-change { margin-left: .5em; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: #fff; font: inherit; font-weight: 700; font-size: .95em; padding: .15em .8em; border-radius: 99px; cursor: pointer; }
.vov-change:hover { background: rgba(255,255,255,.24); }
.vov-change.nudge { animation: vovNudge .5s ease; } @keyframes vovNudge { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* r277 : abstention discrète, relais de vote (bouton Soutenir en deux parties, pastilles) */
.vov-abs { border: 0; background: none; color: rgba(213,228,255,.7); font: inherit; font-size: .92em; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; padding: 0 .2em; }
.vov-abs:hover { color: #fff; }
.vr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; vertical-align: .05em; }
.vr-dot.g { background: #22b36a; box-shadow: 0 0 0 2px rgba(34,179,106,.22); } .vr-dot.r { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.24); }
.sup-split { display: inline-flex; align-items: stretch; vertical-align: middle; }
.sup-split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; gap: .4rem; }
.sup-split > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: .55rem; padding-right: .55rem; margin-left: 1px; }
.sup-split .sup-g { box-shadow: inset 0 -3px 0 #22b36a; }
.sup-split .sup-r { box-shadow: inset 0 -3px 0 #3b82f6; }
.sup-split .sup-vr { min-width: 2.2rem; justify-content: center; }
.sup-tip { position: fixed; z-index: 1400; width: 270px; padding: .65rem .8rem; border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(0,0,0,.22); font-size: .84rem; pointer-events: none; animation: pfTgIn .12s ease-out; }
.sup-tip p { margin: 0 0 .25rem; display: flex; align-items: center; gap: .45rem; } .sup-tip span { color: var(--muted); line-height: 1.45; }
.vt-ind { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .5rem .05rem .35rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.vt-ind.on { background: color-mix(in srgb, #22b36a 15%, transparent); color: #1b8f55; } .vt-ind.off { background: color-mix(in srgb, #3b82f6 14%, transparent); color: #2563c9; }
:root[data-theme="dark"] .vt-ind.on { color: #5fd69a; } :root[data-theme="dark"] .vt-ind.off { color: #7fb0ff; }

/* Soutien depuis la miniature d'un membre */
.mini-sup { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.mini-sup > p { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.mini-sup-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.mini-sup-more { display: none; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.mini-sup.all .mini-sup-more { display: flex; }
.vt-ind.mine { cursor: pointer; } .vt-ind.mine:hover, .vt-ind.mine:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.vt-pop { pointer-events: auto; } .vt-pop .vt-pop-act { margin: .55rem 0 .35rem; } .vt-pop .vt-pop-act .btn { gap: .4rem; } .vt-pop > span.xs { display: block; font-size: .74rem; }
.sn-grid { display: grid; gap: .5rem; }
.sn-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; }
.sn-in { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-size: .85rem; } .sn-in input { width: 7.5rem; }
@media (max-width: 560px) { .sn-row { flex-direction: column; align-items: flex-start; } }
.dsc-join:empty { display: none; }
/* menu « ＋ » des onglets du profil */
.pf-add-m { display: flex; flex-direction: column; gap: 1px; min-width: 250px; }
.pf-add-m .pf-add-h { margin: .25rem .6rem .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-add-m button { display: flex; width: 100%; text-align: left; border: 0; background: none; color: var(--text); font: inherit; padding: .5rem .7rem; border-radius: 9px; cursor: pointer; }
.pf-add-m button:hover, .pf-add-m button:focus-visible { background: var(--surface-2); outline: none; }
.pf-add-m .ctx-sep { margin: .25rem .3rem; }
/* Administration › Profils : aperçu de la silhouette par défaut */
.av-prev { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .4rem 0 .8rem; padding: .5rem; border-radius: 14px; background: var(--surface); box-shadow: 0 8px 20px rgba(0,0,0,.12); border: 1px solid var(--border); }
.av-prev-p { border-radius: 10px; padding: .4rem .45rem .5rem; min-width: 0; }
.av-prev-p > .xs { display: block; margin-bottom: .35rem; opacity: .75; }
.av-prev-p.dark { background: #161b24; color: #e8edf3; } .av-prev-p.light { background: #f3f5f8; color: #1a1f27; }
.av-prev-p.map { background: radial-gradient(circle at 50% 40%, #2a3546, #121821 70%); color: #dfe8f3; }
.av-prev-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.av-prev-row img { border-radius: 50%; display: block; }
.av-prev-m { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; line-height: 1.25; }
.av-prev-orb { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(160,200,255,.18), rgba(10,16,26,.1) 70%); box-shadow: 0 0 0 2px rgba(169,181,194,.6); }
.av-prev-orb img { width: 86%; height: 86%; } .av-prev-orb.sm { width: 30px; height: 30px; }
@media (max-width: 520px) { .av-prev { grid-template-columns: 1fr; position: static; } }
/* salon Direct à part, au-dessus des onglets de l'espace (couleur et intensités : Administration › Espaces et chaînes) */
.chan-pin { --cp: #3b82f6; margin: .35rem .5rem .6rem; padding: .35rem .3rem .3rem; border-radius: var(--cp-r, 12px); background: color-mix(in srgb, var(--cp) var(--cp-bg, 10%), var(--surface)); border: 1px solid color-mix(in srgb, var(--cp) var(--cp-bd, 35%), var(--border)); }
.chan-pin-h { margin: 0 .45rem .2rem; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--cp) 75%, var(--text)); cursor: help; }
.dsc.has-bg .chan-pin { background: color-mix(in srgb, var(--cp) calc(var(--cp-bg, 10%) + 4%), rgba(0,0,0,.25)); backdrop-filter: blur(8px); }
.chan-pin.plain, .dsc.has-bg .chan-pin.plain { background: none; border-color: transparent; backdrop-filter: none; padding: 0; }
/* pied de page : liens rangés par catégorie (colonnes) */
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.2rem 2rem; margin: 1.2rem 0 .4rem; }
.footer-h { margin: 0 0 .45rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.footer-cols .footer-links { flex-direction: column; flex-wrap: nowrap; gap: .4rem; margin: 0; }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; } }
/* espace public en sursis / archivé : conditions pour le garder */
.keep-wrap { margin: .5rem; }
.keep-box { padding: .6rem .75rem; border-radius: 10px; font-size: .82rem; line-height: 1.45; background: color-mix(in srgb, #f5a524 12%, var(--surface)); border: 1px solid color-mix(in srgb, #f5a524 45%, var(--border)); margin-top: .5rem; }
.keep-box ul { margin: .3rem 0 .35rem; padding-left: 1.1rem; } .keep-box li { margin: .15rem 0; }
.tv-placeholder .tv-slogo { width: 104px; height: 104px; object-fit: contain; border-radius: 22%; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }

/* ===== Mode « Origine » : bleu anthracite légèrement canard, texte ivoire, touche d’or (charte du dossier ODANIE) ===== */
html.th-origine[data-theme="dark"] {
  --bg: #15202b;
  --surface: #1b2836;
  --surface-2: #213040;
  --surface-3: #293a4b;
  --text: #f5f3ee;
  --muted: #9fb0c0;
  --border: #2c3d4e;
  --border-strong: #587083;
  --accent: #e9ecef;
  --accent-hover: #ffffff;
  --accent-soft: #263749;
  --on-accent: #15202b;
  --gold: #d9b27c;
  --gold-2: #b88c52;
  --blue: #a9c1d6;
  --blue-soft: #1f3142;
  --green-soft: #183a31;
  --red-soft: #3c2128;
  --orange-soft: #3a2c1c;
  --bg-veil: rgba(21,32,43,.72);
  --shadow: 0 2px 12px rgba(4, 10, 16, .45);
  --metal: linear-gradient(135deg, #1c2a38 0%, #26384a 30%, #19252f 50%, #2c4052 70%, #1b2834 100%);
  --metal-line: linear-gradient(90deg, #2c3d4e 0%, #7d93a6 25%, #22313f 50%, #9fb0c0 70%, #2c3d4e 100%);
}
.th-dot.th-origine { background: #15202b; box-shadow: inset 0 0 0 3px #15202b, inset 0 0 0 5px #d9b27c; }
/* Mode Origine : le compteur d'ODA garde un fond sobre, quelle que soit la teinte choisie (sinon le reflet du « titane » le rend illisible) */
html.th-origine .oda-pill { --oda-b: color-mix(in srgb, var(--surface) 82%, #000 18%); background: linear-gradient(135deg, var(--oda-b) 0%, color-mix(in srgb, var(--oda-b) 91%, #fff 9%) 30%, var(--oda-b) 50%, color-mix(in srgb, var(--oda-b) 88%, #fff 12%) 70%, var(--oda-b) 100%); border-color: color-mix(in srgb, var(--gold) 35%, var(--border)); color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
html.th-origine .oda-pill:hover { border-color: var(--gold); }

/* vidéo de citoyen rendue, à partager */
.vshare-v { display: block; width: 100%; max-height: 420px; background: #0e141c; border-radius: 12px; object-fit: contain; }
.vs-nets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0; }
.mem-more { padding: .3rem .8rem .6rem; }

/* fenêtres de discussion ouvertes avant d'entrer dans les espaces : cachées tant qu'on y est */
.chatwin.cw-park { display: none !important; }

/* validation de la Constitution : jauge vers 50 % + 1 de la population de référence */
.ratif { display: flex; flex-direction: column; gap: .55rem; }
.ratif-bar { height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ratif-bar i { display: block; height: 100%; min-width: 0; background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-radius: inherit; }
#cst-ratif { margin: .8rem 0 1rem; }