/* =========================================================
   Forzer Modding — Panel d'administration
   Mêmes couleurs que le site public (assets/css/style.css)
   ========================================================= */
:root {
  --navy-950: #070d1a;
  --navy-900: #0b1426;
  --navy-850: #0f1b32;
  --navy-800: #13223f;
  --navy-700: #1a365d;
  --navy-600: #24477a;
  --red: #c53030;
  --red-light: #e04848;
  --red-glow: rgba(197, 48, 48, .35);
  --white: #ffffff;
  --text: #e8edf6;
  --muted: #94a3b8;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --card: rgba(19, 34, 63, .55);
  --card-solid: #111d36;
  --success: #22c55e;
  --warning: #f59e0b;
  --info: #60a5fa;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sidebar: 252px;
  --focus: 0 0 0 3px rgba(96, 165, 250, .55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  background: var(--navy-950);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(36, 71, 122, .4), transparent 60%),
    radial-gradient(700px 400px at 100% 0%, rgba(197, 48, 48, .1), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
}
img { max-width: 100%; }
a { color: #9ec5ff; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3, h4 { color: #fff; line-height: 1.25; margin: 0; }
p { margin: 0; }
code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 6px; font-size: .88em; }
::selection { background: var(--red); color: #fff; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.xs { font-size: .76rem; }
.strong { font-weight: 700; color: #fff; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .85em; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.tricolor { height: 3px; background: linear-gradient(90deg, #1a56db 0 33.3%, #fff 33.3% 66.6%, var(--red) 66.6%); position: relative; z-index: 60; }
svg.i { width: 18px; height: 18px; flex: none; }
svg.i-sm { width: 15px; height: 15px; flex: none; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 700; font-size: .88rem; letter-spacing: .01em; line-height: 1.2;
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
  white-space: nowrap; text-decoration: none !important; color: #fff;
}
.btn:active { transform: translateY(1px); }
.btn-red { background: linear-gradient(180deg, var(--red-light), var(--red)); box-shadow: 0 10px 30px -12px var(--red-glow); }
.btn-red:hover { box-shadow: 0 14px 34px -8px var(--red-glow); }
.btn-ghost { background: rgba(255,255,255,.04); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(255,255,255,.09); }
.btn-navy { background: var(--navy-700); border-color: rgba(255,255,255,.1); }
.btn-navy:hover { background: var(--navy-600); }
.btn-danger { background: rgba(197,48,48,.14); border-color: rgba(224,72,72,.45); color: #ffb4b4; }
.btn-danger:hover { background: rgba(197,48,48,.28); color: #fff; }
.btn-success { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.45); color: #a7f3c4; }
.btn-success:hover { background: rgba(34,197,94,.26); color: #fff; }
.btn-link { background: none; border: none; color: var(--muted); padding: 6px; font-weight: 600; }
.btn-link:hover { color: #fff; }
.btn-sm { padding: 7px 12px; font-size: .8rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .spinner { width: 15px; height: 15px; border-width: 2px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #fff; flex: none;
}
.icon-btn:hover { background: rgba(255,255,255,.1); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 8px; }
.icon-btn.danger:hover { background: rgba(197,48,48,.3); border-color: rgba(224,72,72,.5); }

/* ---------- Formulaires ---------- */
label { font-size: .82rem; font-weight: 600; color: #cbd5e1; }
.form-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search],
input[type=datetime-local], input[type=date], input[type=month], input:not([type]), select, textarea {
  width: 100%; min-width: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(7,13,26,.6); border: 1px solid var(--line-strong); color: #fff;
  font: inherit; font-size: .9rem; transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
textarea.code { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; min-height: 260px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(127,176,255,.6); box-shadow: var(--focus); }
select option { background: var(--navy-900); }
input::placeholder, textarea::placeholder { color: #64748b; }
input[type=file] { font-size: .85rem; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.hint { font-size: .76rem; color: var(--muted); }
.form-error { color: #ffb4b4; background: rgba(197,48,48,.12); border: 1px solid rgba(224,72,72,.35); border-radius: 10px; padding: 9px 12px; font-size: .85rem; }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--text); }
.check input { width: 18px; height: 18px; accent-color: var(--red); margin: 0; flex: none; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.checks .check { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.search { position: relative; flex: 1; min-width: 180px; max-width: 360px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { padding-left: 36px; }

/* Interrupteur */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 44px; height: 24px; border-radius: 99px; background: rgba(255,255,255,.14); position: relative; transition: background .2s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.switch input:checked + .track { background: var(--success); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { box-shadow: var(--focus); }
.switch input:disabled + .track { opacity: .45; }
.switch.big .track { width: 62px; height: 34px; }
.switch.big .track::after { width: 26px; height: 26px; top: 4px; left: 4px; }
.switch.big input:checked + .track { background: var(--red); }
.switch.big input:checked + .track::after { transform: translateX(28px); }

/* ---------- Chargement ---------- */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; }
.boot img { border-radius: 50%; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--red-light); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.skel { border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skel-line { height: 14px; margin: 10px 0; }
.skel-card { height: 110px; }
@media (prefers-reduced-motion: reduce) { .skel, .spinner { animation-duration: 3s; } * { transition: none !important; } }

/* ---------- Connexion ---------- */
.login { min-height: calc(100vh - 3px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 16px; }
.login-card { width: min(420px, 100%); padding: 30px 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-strong); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.login-brand img { border-radius: 50%; }
.login-brand strong { display: block; font-size: 1.2rem; font-weight: 900; color: #fff; }
.login-brand strong b { color: var(--red-light); }
.login-brand span { color: var(--muted); font-size: .85rem; }
.login-title { font-size: 1.35rem; font-weight: 800; }
.code-input { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-weight: 800; }

/* ---------- Structure ---------- */
.app { display: flex; min-height: calc(100vh - 3px); }
.sidebar {
  width: var(--sidebar); flex: none; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; background: rgba(7,13,26,.75); border-right: 1px solid var(--line);
  backdrop-filter: blur(12px); z-index: 40;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 12px; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none !important; font-weight: 900; font-size: 1.02rem; }
.brand img { border-radius: 50%; }
.brand b { color: var(--red-light); }
.brand small { display: block; font-size: .68rem; color: var(--muted); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-close { display: none; }
.nav { flex: 1; overflow-y: auto; padding: 6px 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-group { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #64748b; padding: 14px 10px 6px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: .9rem; text-decoration: none !important; position: relative;
  transition: background .15s, color .15s;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav a.active { color: #fff; background: linear-gradient(90deg, rgba(197,48,48,.22), rgba(197,48,48,.04)); }
.nav a.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red-light); }
.nav .count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.sidebar-foot { padding: 12px 14px 18px; border-top: 1px solid var(--line); }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 39; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  height: 64px; padding: 0 24px; background: rgba(7,13,26,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.burger { display: none; }
.page-title { font-size: 1.15rem; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.user-btn:hover { background: rgba(255,255,255,.09); }
.user-name { font-weight: 700; font-size: .86rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-600), var(--red)); color: #fff; font-weight: 800; font-size: .8rem;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px; border-radius: 14px;
  background: var(--card-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow); z-index: 70;
}
.menu-head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; background: none; border: none; color: var(--text); font-weight: 600; font-size: .88rem; text-decoration: none; }
.menu a:hover, .menu button:hover { background: rgba(255,255,255,.07); }
.view-root { padding: 24px; flex: 1; min-width: 0; outline: none; }
.view { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Cartes ---------- */
.card { border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); padding: 20px; min-width: 0; }
.card-title { font-size: 1rem; font-weight: 800; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: 16px 20px 0; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.kpi { display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.kpi .label { font-size: .74rem; font-weight: 800; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.kpi .value { font-size: 1.65rem; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.kpi .sub { font-size: .8rem; color: var(--muted); }
.kpi .up { color: #86efac; } .kpi .down { color: #fca5a5; }
.kpi.accent { background: linear-gradient(140deg, rgba(197,48,48,.22), rgba(19,34,63,.55) 60%); border-color: rgba(224,72,72,.3); }
.progress { height: 9px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 4px; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--red-light)); transition: width .6s ease; }
.progress.ok > span { background: linear-gradient(90deg, #16a34a, var(--success)); }

.stat-link {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none !important; text-align: left; width: 100%;
  transition: border-color .2s, transform .15s;
}
a.stat-link:hover, button.stat-link:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.stat-link .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(96,165,250,.12); color: var(--info); }
.stat-link .ico.red { background: rgba(224,72,72,.14); color: var(--red-light); }
.stat-link .ico.amber { background: rgba(245,158,11,.14); color: var(--warning); }
.stat-link .ico.green { background: rgba(34,197,94,.14); color: var(--success); }
.stat-link strong { display: block; font-size: 1.4rem; font-weight: 900; color: #fff; line-height: 1.1; }
.stat-link span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.chart-box { position: relative; height: 290px; }
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-list .bl-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; font-size: .86rem; }
.bar-list .bl-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar-list .bl-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--navy-600), var(--info)); border-radius: inherit; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; background: rgba(255,255,255,.08); color: #cbd5e1; }
.badge.green { background: rgba(34,197,94,.13); color: #86efac; border-color: rgba(34,197,94,.3); }
.badge.red { background: rgba(224,72,72,.14); color: #fca5a5; border-color: rgba(224,72,72,.35); }
.badge.amber { background: rgba(245,158,11,.13); color: #fcd34d; border-color: rgba(245,158,11,.3); }
.badge.blue { background: rgba(96,165,250,.13); color: #93c5fd; border-color: rgba(96,165,250,.3); }
.badge.navy { background: rgba(36,71,122,.5); color: #c7d7f0; border-color: rgba(127,176,255,.25); }
.badge.gray { background: rgba(148,163,184,.12); color: #cbd5e1; border-color: rgba(148,163,184,.25); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-light); display: inline-block; flex: none; box-shadow: 0 0 8px var(--red-light); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.table th { text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover td { background: rgba(255,255,255,.03); }
.table tbody tr.is-blacklisted td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.table td.actions { white-space: nowrap; text-align: right; }
.table td.actions .row { justify-content: flex-end; flex-wrap: nowrap; }
.table-foot { padding: 12px 18px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; }
.table-foot strong { color: #fff; }

/* ---------- Onglets / segments ---------- */
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); flex-wrap: wrap; max-width: 100%; }
.tabs button { border: none; background: none; padding: 7px 12px; border-radius: 9px; font-weight: 700; font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.tabs button:hover { color: #fff; }
.tabs button[aria-selected="true"], .tabs button.active { background: var(--navy-700); color: #fff; }
.tabs .n { font-size: .7rem; padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.1); }
.tabs button[aria-selected="true"] .n { background: var(--red); }

/* ---------- États vides ---------- */
.empty { text-align: center; padding: 42px 18px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty svg { width: 42px; height: 42px; color: #475569; }
.empty strong { color: #fff; font-size: 1rem; }

/* ---------- Modales / tiroir ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(2,6,15,.7); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s ease; }
.modal {
  width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.modal.wide { width: min(860px, 100%); }
.modal.xwide { width: min(1080px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 1.08rem; font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-backdrop.drawer-mode { justify-content: flex-end; padding: 0; }
.modal.drawer { width: min(620px, 100%); height: 100vh; max-height: 100vh; border-radius: 0; border-width: 0 0 0 1px; animation: slidein .22s cubic-bezier(.2,.8,.2,1); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.kv { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 8px 14px; font-size: .88rem; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.section-title { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 6px 0 2px; }
.list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.list > * { padding: 11px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .87rem; }
.list > *:last-child { border-bottom: none; }
.list a.list-link { color: var(--text); text-decoration: none; }
.list a.list-link:hover { background: rgba(255,255,255,.04); }
.alert { padding: 12px 14px; border-radius: 12px; font-size: .86rem; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; }
.alert.red { background: rgba(197,48,48,.12); border-color: rgba(224,72,72,.35); color: #fecaca; }
.alert.amber { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #fde68a; }
.alert.blue { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.3); color: #bfdbfe; }
.alert.green { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #bbf7d0; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px); width: 360px; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--card-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: .88rem;
  animation: toastin .25s cubic-bezier(.2,.8,.2,1); border-left: 4px solid var(--info);
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--red-light); }
.toast .grow { overflow-wrap: anywhere; }
.toast button { background: none; border: none; color: var(--muted); padding: 0 2px; font-size: 1.1rem; line-height: 1; }
.toast.out { opacity: 0; transform: translateY(8px); transition: .2s; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Clients ---------- */
.client-head { display: flex; gap: 14px; align-items: center; }
.client-head h3 { font-size: 1.2rem; overflow-wrap: anywhere; }

/* ---------- Factures (création) ---------- */
.lines { display: flex; flex-direction: column; gap: 10px; }
.line { display: grid; grid-template-columns: minmax(0, 2.2fr) 80px 120px 38px; gap: 8px; align-items: end; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.line .desc { grid-column: 1 / -1; }
.picker { position: relative; }
.picker-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow-y: auto; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: 12px; z-index: 5; box-shadow: var(--shadow); }
.picker-list button { display: block; width: 100%; text-align: left; padding: 9px 12px; background: none; border: none; border-bottom: 1px solid var(--line); }
.picker-list button:hover, .picker-list button:focus-visible { background: rgba(255,255,255,.07); }
.picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); }
.total-box { display: flex; justify-content: flex-end; gap: 20px; font-size: .9rem; flex-wrap: wrap; }
.total-box strong { font-size: 1.15rem; color: #fff; }

/* ---------- Tickets ---------- */
.inbox { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; height: calc(100vh - 64px - 48px - 3px); min-height: 480px; }
.inbox-list, .inbox-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.inbox-tools { padding: 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.inbox-tools .tabs { width: 100%; }
.inbox-tools .tabs button { flex: 1; justify-content: center; padding: 7px 6px; }
.inbox-tools .search { max-width: none; }
.ticket-items { overflow-y: auto; flex: 1; }
.ticket-item { display: block; width: 100%; text-align: left; padding: 12px 14px; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-decoration: none !important; position: relative; }
.ticket-item:hover { background: rgba(255,255,255,.035); }
.ticket-item.active { background: rgba(197,48,48,.1); box-shadow: inset 3px 0 0 var(--red-light); }
.ticket-item .t-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ticket-item .t-subj { font-weight: 700; color: #fff; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ticket-item .t-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-size: .76rem; color: var(--muted); }
.chat-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.chat-head h2 { font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
.chat-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.chat-msgs { flex: 1; min-height: 140px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: min(78%, 640px); display: flex; flex-direction: column; gap: 4px; }
.msg .meta { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.msg .bubble { padding: 11px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.5; }
.msg.client { align-self: flex-start; }
.msg.client .bubble { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-top-left-radius: 5px; }
.msg.staff, .msg.ai { align-self: flex-end; align-items: flex-end; }
.msg.staff .bubble { background: linear-gradient(180deg, #c53030, #a32626); color: #fff; border-top-right-radius: 5px; }
.msg.ai .bubble { background: linear-gradient(180deg, #1f3f6e, #1a365d); border: 1px solid rgba(127,176,255,.25); color: #fff; border-top-right-radius: 5px; }
.msg.ai .meta { color: #93c5fd; }
.msg .attach { display: block; margin-top: 2px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); max-width: 240px; }
.msg .attach img { display: block; width: 100%; max-height: 220px; object-fit: cover; background: rgba(255,255,255,.04); }
.day-sep { align-self: center; font-size: .7rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.05); }
.reply { border-top: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: rgba(7,13,26,.35); }
.reply textarea { min-height: 84px; max-height: min(300px, 32vh); overflow-y: auto; resize: vertical; padding-right: 48px; transition: height .12s ease; }
/* Rédaction assistée : intentions en un clic, dictée au micro */
.reply-intents { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reply-intents .ri-lbl { font-size: .74rem; font-weight: 700; color: var(--muted); margin-right: 2px; }
.reply-intents .ri { font: inherit; font-size: .76rem; font-weight: 600; color: var(--text); background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; white-space: nowrap; }
.reply-intents .ri:hover { border-color: var(--red-light); background: rgba(197, 48, 48, .12); }
.reply-intents .ri:active { transform: scale(.97); }
.reply-intents .ri[aria-busy="true"], .reply-intents .ri:disabled { opacity: .6; cursor: progress; }
.reply-intents .ri-undo { border-style: dashed; color: var(--muted); }
.reply-box { position: relative; }
.reply-box textarea { width: 100%; }
.mic-btn { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--card-solid); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; }
.mic-btn:hover { border-color: var(--red-light); }
.mic-btn .mic-dot { display: none; }
.mic-btn.rec { background: var(--red); border-color: var(--red-light); color: #fff; box-shadow: 0 0 0 0 var(--red-glow); animation: micPulse 1.4s ease-out infinite; }
@keyframes micPulse { 0% { box-shadow: 0 0 0 0 var(--red-glow); } 100% { box-shadow: 0 0 0 12px rgba(197, 48, 48, 0); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.rec { animation: none; } }
/* Barre d'envoi : outils à gauche (passent à la ligne si besoin), envoi toujours à droite */
.reply-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.rb-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.rb-send { display: flex; align-items: center; gap: 6px; flex: none; }
.faq-auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; font-size: .84rem; }

/* Thèmes de saison */
.sea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.sea-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font-size: .84rem; margin-bottom: 10px; }
.sea-card.live { box-shadow: 0 0 0 2px rgba(34, 197, 94, .45); }
.sea-body { display: flex; flex-direction: column; gap: 8px; }
.sea-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sea-prev { align-self: flex-start; margin-top: auto; font-size: .74rem; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; text-decoration: none; }
.sea-prev:hover { color: var(--text); }

.sea-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.sea-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--sea, var(--line-strong)); opacity: .5; }
.sea-card.on { border-color: color-mix(in srgb, var(--sea) 55%, transparent); box-shadow: 0 10px 30px -18px var(--sea); }
.sea-card.on::before { opacity: 1; }
.sea-card.sea-nouvel_an { --sea: #facc15; } .sea-card.sea-epiphanie { --sea: #f59e0b; } .sea-card.sea-chandeleur { --sea: #fbbf24; } .sea-card.sea-saint_valentin { --sea: #fb7185; } .sea-card.sea-carnaval { --sea: #a78bfa; } .sea-card.sea-poisson_avril { --sea: #38bdf8; } .sea-card.sea-paques { --sea: #f472b6; } .sea-card.sea-muguet { --sea: #4ade80; } .sea-card.sea-musique { --sea: #c084fc; } .sea-card.sea-quatorze_juillet { --sea: #3b82f6; } .sea-card.sea-octobre_rose { --sea: #f472b6; } .sea-card.sea-halloween { --sea: #f97316; } .sea-card.sea-black_friday { --sea: #eab308; } .sea-card.sea-noel { --sea: #ef4444; }
.sea-head { display: flex; align-items: flex-start; gap: 10px; }
.sea-head .grow { min-width: 0; }
.sea-head .switch { flex: none; margin-top: 4px; }
.sea-head small .badge { white-space: normal; }
.sea-head b { display: block; font-size: .95rem; }
.sea-head small { display: block; color: var(--muted); font-size: .74rem; margin-top: 2px; }
.sea-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.25rem; background: color-mix(in srgb, var(--sea) 16%, transparent); flex: none; }
.sea-card [hidden] { display: none !important; }
.sea-card .seg { align-self: stretch; display: flex; }
.sea-card .seg button { flex: 1; white-space: nowrap; }
.sea-head small.pending { color: #fde68a; }
.sea-card .btn { align-self: flex-start; }
@media (max-width: 600px) { .sea-dates { grid-template-columns: 1fr; } }

/* Performance du SAV */
.ss-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ss-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); min-width: 0; }
.ss-kpi small { font-size: .74rem; color: var(--muted); font-weight: 700; }
.ss-kpi b { font-size: 1.45rem; line-height: 1.1; }
.ss-kpi span { font-size: .72rem; color: var(--muted); }
.ss-kpi.green { border-color: rgba(34, 197, 94, .4); } .ss-kpi.green b { color: #86efac; }
.ss-kpi.amber { border-color: rgba(234, 179, 8, .4); } .ss-kpi.amber b { color: #fde68a; }
.ss-kpi.red { border-color: rgba(239, 68, 68, .45); } .ss-kpi.red b { color: #fca5a5; }
.ss-mb { display: inline-flex; align-items: center; gap: 8px; }
.ss-mb img, .ss-mb > span { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: rgba(197, 48, 48, .2); font-weight: 800; font-size: .8rem; }
.ss-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--muted); }
.ss-dot.green { background: #22c55e; } .ss-dot.amber { background: #eab308; } .ss-dot.red { background: #ef4444; }
.ss-bars { display: flex; flex-direction: column; gap: 6px; }
.ss-bar { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; font-size: .78rem; }
.ss-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-bar i { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.ss-bar em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--red-light)); }
.ss-bar b { text-align: right; }
.ss-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 110px; align-items: end; }
.ss-h { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.ss-h i { width: 100%; border-radius: 4px 4px 0 0; background: rgba(96, 165, 250, .6); }
.ss-h span { font-size: .62rem; color: var(--muted); height: 12px; }
@media (max-width: 1250px) { .ss-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ss-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-theme="light"] .ss-kpi { background: #fff; }

/* Paniers en direct */
.lc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lc-live { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .1); color: #bbf7d0; font-size: .92rem; }
.lc-live b { font-size: 1.1rem; color: #fff; }
.lc-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: lcPulse 1.6s ease-out infinite; }
@keyframes lcPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .lc-dot { animation: none; } }
.lc-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.lc-kpi { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); min-width: 0; }
.lc-kpi > span { font-size: 1.3rem; }
.lc-kpi b { display: block; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-kpi small { color: var(--muted); font-size: .72rem; }
.lc-kpi.gold { border-color: rgba(234, 179, 8, .35); }
.lc-kpi.green { border-color: rgba(34, 197, 94, .35); }
.lc-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.lc-list { display: flex; flex-direction: column; gap: 8px; }
.lc-row { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid #3b82f6; border-radius: 12px; background: rgba(255, 255, 255, .02); }
.lc-line { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(170px, 1.2fr) minmax(0, 1.6fr) auto; gap: 12px; align-items: center; cursor: pointer; border-radius: 8px; }
.lc-line:focus-visible { outline: 2px solid var(--red-light); outline-offset: 3px; }
.lc-row:hover { border-color: var(--line-strong); }
.lc-chev { color: var(--muted); font-size: .8rem; }
.lc-facts { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 43px; font-size: .7rem; color: var(--muted); }
.lc-facts span { padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); white-space: nowrap; }
.lc-detail { margin: 2px 0 2px 43px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line-strong); background: rgba(0, 0, 0, .15); display: flex; flex-direction: column; gap: 8px; }
.lc-cust { font-size: .8rem; }
.lc-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.lc-j { display: grid; grid-template-columns: 44px 22px 1fr; align-items: baseline; gap: 4px; font-size: .78rem; padding: 3px 0; position: relative; }
.lc-jt { color: var(--muted); font-variant-numeric: tabular-nums; }
.lc-jl em { font-style: normal; color: var(--muted); }
.lc-j.add .lc-jl { color: #fde68a; }
.lc-j.remove .lc-jl { color: #fca5a5; }
.lc-j.checkout .lc-jl { color: #86efac; }
.lc-rec .lc-line { display: flex; cursor: pointer; }
.lc-rec .lc-detail { margin-left: 0; }
.lc-row.lc-cart { border-left-color: #eab308; background: linear-gradient(90deg, rgba(234, 179, 8, .07), transparent 60%); }
.lc-row.lc-checkout { border-left-color: #22c55e; background: linear-gradient(90deg, rgba(34, 197, 94, .1), transparent 60%); }
.lc-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lc-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(197, 48, 48, .2); color: #fecaca; overflow: hidden; }
.lc-av img { width: 100%; height: 100%; object-fit: cover; }
.lc-av.anon { background: rgba(255, 255, 255, .06); color: var(--muted); }
.lc-name { display: flex; flex-direction: column; min-width: 0; }
.lc-name b, .lc-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-name small { color: var(--muted); font-size: .72rem; }
.lc-where { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lc-step { align-self: flex-start; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line-strong); }
.lc-step.blue { color: #93c5fd; border-color: rgba(59, 130, 246, .4); }
.lc-step.gold { color: #fde68a; border-color: rgba(234, 179, 8, .45); }
.lc-step.green { color: #86efac; border-color: rgba(34, 197, 94, .45); }
.lc-page { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-cart { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lc-items { display: flex; gap: 5px; flex-wrap: wrap; min-width: 0; flex: 1; }
.lc-item { display: inline-flex; gap: 5px; align-items: baseline; font-size: .72rem; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); max-width: 100%; }
.lc-item em { font-style: normal; color: var(--muted); }
.lc-total { font-size: .95rem; white-space: nowrap; color: #fde68a; }
.lc-checkout .lc-total { color: #86efac; }
.lc-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.lc-top-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.lc-top-list li { display: flex; flex-direction: column; }
.lc-tn { font-weight: 600; font-size: .86rem; }
.lc-recent { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.lc-rec { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 5px; }
.green-txt { color: #86efac; }
@media (max-width: 1250px) { .lc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lc-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .lc-line { grid-template-columns: 1fr; gap: 8px; } .lc-meta { flex-direction: row; align-items: center; justify-content: space-between; } .lc-facts, .lc-detail { padding-left: 0; margin-left: 0; } }
@media (max-width: 600px) { .lc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-theme="light"] .lc-kpi, html[data-theme="light"] .lc-row { background: #fff; }

/* Ventes flash : étapes, cartes avec compte à rebours */
.fs-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1 1 560px; min-width: 0; }
.fs-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.fs-step > span { font-size: 1.2rem; line-height: 1.2; }
.fs-step b { display: block; font-size: .84rem; }
.fs-step small { display: block; color: var(--muted); font-size: .74rem; line-height: 1.35; margin-top: 2px; }
.fs-group { margin: 6px 0 2px; font-size: .9rem; display: flex; gap: 6px; align-items: baseline; }
.fs-card { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.fs-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line-strong); }
.fs-running { border-color: rgba(34, 197, 94, .35); background: linear-gradient(135deg, rgba(34, 197, 94, .08), transparent 55%), var(--card); }
.fs-running::before { background: #22c55e; }
.fs-scheduled::before { background: #3b82f6; }
.fs-ended, .fs-cancelled { opacity: .78; }
.fs-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fs-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.fs-running .fs-ic { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .4); }
.fs-scheduled .fs-ic { background: rgba(59, 130, 246, .14); border-color: rgba(59, 130, 246, .4); }
.fs-body { flex: 1; min-width: 0; }
.fs-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-title strong { font-size: 1rem; }
.fs-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.fs-code { display: inline-flex; align-items: center; gap: 5px; font: 600 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--text);
  padding: 3px 8px; border-radius: 7px; border: 1px dashed var(--line-strong); background: rgba(255, 255, 255, .03); cursor: pointer; }
.fs-code:hover { border-color: var(--red-light); }
.fs-pct { font-weight: 800; font-size: .8rem; color: #fca5a5; background: rgba(197, 48, 48, .16); border: 1px solid rgba(197, 48, 48, .4); padding: 2px 8px; border-radius: 99px; }
.fs-when { text-align: right; flex: none; }
.fs-count { font-weight: 800; font-size: .95rem; }
.fs-running .fs-count { color: #86efac; }
.fs-scheduled .fs-count { color: #93c5fd; }
.fs-bar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.fs-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--muted); transition: width .6s ease; }
.fs-running .fs-bar > span { background: linear-gradient(90deg, #22c55e, #86efac); }
.fs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fs-chip { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); }
.fs-chip.on { color: var(--text); background: rgba(255, 255, 255, .05); }
.fs-chip.off { color: var(--muted); text-decoration: line-through; opacity: .7; }
.fs-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.fs-stop { color: #fca5a5; border-color: rgba(239, 68, 68, .45); }
.fs-log { font-size: .74rem; color: var(--muted); display: flex; gap: 6px; align-items: center; border-top: 1px dashed var(--line); padding-top: 8px; }
@media (max-width: 760px) {
  .fs-steps { grid-template-columns: 1fr; }
  .fs-hero .btn { width: 100%; justify-content: center; }
  .fs-main { flex-wrap: wrap; }
  .fs-when { text-align: left; width: 100%; padding-left: 56px; }
}
html[data-theme="light"] .fs-step, html[data-theme="light"] .fs-card { background: #fff; }
.reply-bar select { width: auto; max-width: 200px; padding: 7px 10px; font-size: .8rem; }
.rb-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.rb-btn:hover { background: rgba(255, 255, 255, .05); border-color: var(--muted); }
.rb-btn[aria-busy="true"], .rb-btn:disabled { opacity: .6; cursor: progress; }
.rb-close { color: #86efac; border-color: rgba(34, 197, 94, .35); }
.rb-close:hover { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .6); }
.reply-intents .ri-main { color: #fff; border: 0; background: linear-gradient(135deg, #7c3aed, #a855f7); }
.reply-intents .ri-main:hover { filter: brightness(1.1); background: linear-gradient(135deg, #7c3aed, #a855f7); }
@media (max-width: 1250px) { .rb-tools .rb-btn span { display: none; } .rb-tools .rb-btn { padding: 0 9px; } }
.file-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 4px 6px 4px 10px; border-radius: 99px; background: rgba(255,255,255,.07); max-width: 220px; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { background: none; border: none; color: var(--muted); padding: 0 4px; }
.chat-empty { flex: 1; display: grid; place-items: center; }
.back-btn { display: none; }
.ai-note { font-size: .76rem; color: var(--muted); }

/* ---------- Avis ---------- */
.review-card { display: flex; flex-direction: column; gap: 10px; }
.stars { color: #fbbf24; letter-spacing: 2px; font-size: 1rem; }
.stars .off { color: #475569; }

/* ---------- Produits ---------- */
.product-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.product-card .media { aspect-ratio: 16/9; background: var(--navy-800); position: relative; }
.product-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card .media .badge { position: absolute; top: 10px; left: 10px; }
.product-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card h3 { font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.product-card .foot { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.upload-progress { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.upload-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--navy-600), var(--success)); transition: width .15s; }

/* ---------- Contenu ---------- */
.update-card { display: grid; grid-template-columns: 120px minmax(0,1fr) auto; gap: 14px; align-items: start; }
.update-card .thumb { width: 120px; aspect-ratio: 16/10; border-radius: 10px; object-fit: cover; background: var(--navy-800); display: block; }
.update-card h3 { font-size: .98rem; font-weight: 800; overflow-wrap: anywhere; }
.faq-item { display: flex; gap: 12px; align-items: flex-start; }
.faq-item .order { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.06); font-weight: 800; font-size: .82rem; flex: none; }

/* ---------- Réglages ---------- */
.preview-frame { width: 100%; height: 340px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }
.maint-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); flex-wrap: wrap; }
.maint-box.on { border-color: rgba(224,72,72,.5); background: rgba(197,48,48,.12); }
.maint-box strong { font-size: 1.05rem; color: #fff; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: .84rem; font-weight: 600; }

/* ---------- Équipe ---------- */
.staff-card { display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; transform: translateX(-102%); transition: transform .25s cubic-bezier(.2,.8,.2,1); background: var(--navy-900); width: min(290px, 86vw); }
  .sidebar.open { transform: none; box-shadow: var(--shadow); }
  .sidebar-close { display: inline-grid; }
  .burger { display: inline-grid; }
  .topbar { padding: 0 14px; gap: 10px; height: 58px; }
  .view-root { padding: 16px; }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .inbox { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 58px - 32px - 3px); }
  .inbox.has-ticket .inbox-list { display: none; }
  .inbox:not(.has-ticket) .inbox-chat { display: none; }
  .back-btn { display: inline-grid; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .user-name, .user-btn .chev { display: none; }
  .user-btn { padding: 3px; }
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .kpi .value { font-size: 1.4rem; }
  .card { padding: 16px; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal, .modal.wide, .modal.xwide { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .modal.drawer { height: 100%; max-height: 100%; border-radius: 0; }
  .modal-backdrop.drawer-mode { align-items: stretch; }
  .search { max-width: none; min-width: 0; flex-basis: 100%; }
  .kv { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .msg { max-width: 90%; }
  .line { grid-template-columns: minmax(0,1fr) 70px 38px; }
  .line .price { grid-column: 1 / 3; }
  .update-card { grid-template-columns: minmax(0,1fr); }
  .update-card .thumb { width: 100%; }
  .toasts { left: 16px; right: 16px; width: auto; }
  .chart-box { height: 230px; }

  /* Tableaux -> cartes */
  table.table.responsive thead { display: none; }
  table.table.responsive, table.table.responsive tbody, table.table.responsive tr, table.table.responsive td { display: block; width: 100%; }
  table.table.responsive tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.table.responsive td { border: none; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; overflow-wrap: anywhere; }
  table.table.responsive td::before { content: attr(data-label); color: var(--muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; text-align: left; flex: none; padding-top: 2px; }
  table.table.responsive td[data-label=""]::before { content: none; }
  table.table.responsive td.actions { justify-content: flex-end; padding-top: 8px; }
  table.table.responsive td.primary { font-size: .95rem; justify-content: flex-start; text-align: left; }
  table.table.responsive td.primary::before { content: none; }
  table.table.responsive tbody tr.is-blacklisted td:first-child { box-shadow: none; }
  table.table.responsive tbody tr.is-blacklisted { box-shadow: inset 3px 0 0 var(--red); }
}

/* ---------- Compléments ---------- */
.grid-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.avatar { position: relative; }
.avatar img { position: absolute; inset: 0; }
.thumb-wrap { display: block; }
.btn-link.xs { font-size: .76rem; color: #9ec5ff; font-weight: 600; }
@media (max-width: 900px) { .grid-main { grid-template-columns: minmax(0, 1fr); } }
.inbox-tools .tabs { flex-wrap: nowrap; }
.inbox-tools .tabs button { white-space: nowrap; font-size: .75rem; padding: 7px 4px; gap: 4px; min-width: 0; }
.msg .attach img { height: 160px; width: auto; max-width: 100%; }
@media (max-width: 640px) {
  .reply .hint { display: none; }
  .reply textarea { min-height: 60px; }
  .chat-head { padding: 10px 12px; gap: 8px; }
  .chat-msgs { padding: 12px; }
  .inbox { min-height: 560px; }
}

/* Case « Rester connecté » */
.remember-row { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted, #94a3b8); cursor: pointer; }
.remember-row input { width: 18px; height: 18px; accent-color: #c53030; flex: none; }

/* Filtres de la boîte de tickets : grille 2 × 2 lisible, quelle que soit la largeur */
.inbox-tools .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; flex-wrap: nowrap; }
.inbox-tools .tabs button { justify-content: center; gap: 8px; padding: 8px 10px; font-size: .82rem; white-space: nowrap; min-width: 0; }
.inbox-tools .tabs .n { min-width: 22px; text-align: center; }

/* ---- Statistiques ---- */
.fn-step { display: flex; flex-direction: column; gap: 5px; }
.fn-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.fn-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #608cd2, #e04848); }
/* ---- Réponses types ---- */
.cn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
/* Fiche produit : produit relié à Tebex */
.pf-tebex-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .86rem; color: #bfdbfe; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25); }
.pf-tebex-note[hidden] { display: none; }
.pf-tebex-note .i-sm { flex: none; margin-top: 2px; }
.product-card .media .pbadge { position: absolute; top: 10px; right: 10px; left: auto; }
.ue-ai { padding: 12px 14px; }
.ue-ai summary { cursor: pointer; font-weight: 700; }
/* Annonce Discord : vidéo jointe */
.an-vid { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.dc-video { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; padding: 0 16px; height: 120px; max-width: 420px; border-radius: 8px; background: linear-gradient(135deg, #1e293b, #0f172a); color: #e2e8f0; font-weight: 700; font-size: 1.4rem; }
.dc-video span { font-size: .9rem; font-weight: 600; color: #94a3b8; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cr-grid[hidden] { display: none; }
.cr-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .86rem; color: #fcd34d; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); }
.cr-warn .i-sm { flex: none; margin-top: 2px; }
.cn-txt { display: flex; flex-direction: column; min-width: 0; }
.cn-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Aperçu du bandeau promo ---- */
.bn-preview { display: flex; flex-direction: column; gap: 6px; }
.bn-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: #fff; font-size: .88rem; text-align: center; }
.bn-bar.off { opacity: .45; }
.bn-bar b { text-transform: uppercase; font-weight: 900; }
.bn-bar code { padding: 2px 8px; border: 1.5px dashed rgba(255,255,255,.7); border-radius: 6px; background: rgba(0,0,0,.2); color: #fff; }
.bn-bar em { font-style: normal; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.22); }
.bn-bar i { font-style: normal; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: #fff; color: #111827; }
.bn-bar.t-red { background: linear-gradient(90deg, #7f1d1d, #c53030, #7f1d1d); }
.bn-bar.t-rose { background: linear-gradient(90deg, #9d174d, #ec4899, #9d174d); }
.bn-bar.t-blue { background: linear-gradient(90deg, #1e3a8a, #2563eb, #1e3a8a); }
.bn-bar.t-green { background: linear-gradient(90deg, #14532d, #16a34a, #14532d); }
.bn-bar.t-gold { background: linear-gradient(90deg, #78350f, #d97706, #78350f); }
.bn-bar.t-dark { background: linear-gradient(90deg, #0b1426, #1a365d, #0b1426); }

/* ---- Centre de notifications ---- */
.notif-menu { position: relative; }
.notif-btn { position: relative; }
.notif-count { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--navy-950); animation: nc-pop .3s ease; }
@keyframes nc-pop { from { transform: scale(.4); } }
.notif-panel { position: absolute; right: -60px; top: calc(100% + 10px); width: 400px; max-height: min(620px, 80vh); display: flex; flex-direction: column; border-radius: 16px; background: var(--card-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow); z-index: 70; overflow: hidden; }
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.np-head strong { font-size: 1rem; }
.np-head .btn-link { display: inline-flex; align-items: center; gap: 5px; }
.np-push { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 12px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.25); font-size: .82rem; }
.np-push > span { flex: 1; min-width: 180px; display: inline-flex; align-items: center; gap: 6px; }
.np-push.on { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); color: #86efac; }
.np-push.warn { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); color: #fcd34d; }
.np-list { overflow-y: auto; padding: 0 6px 8px; border-top: 1px solid var(--line); }
.np-item { display: flex; gap: 12px; padding: 11px 10px; border-radius: 12px; color: var(--text); text-decoration: none !important; position: relative; }
.np-item:hover { background: rgba(255,255,255,.05); }
.np-item.unread { background: rgba(197,48,48,.08); }
.np-item.unread::after { content: ""; position: absolute; right: 12px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-light); }
.np-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
.np-ico.green { background: rgba(34,197,94,.14); color: #4ade80; }
.np-ico.blue { background: rgba(96,165,250,.14); color: #93c5fd; }
.np-ico.red { background: rgba(197,48,48,.18); color: #fca5a5; }
.np-ico.amber { background: rgba(245,158,11,.14); color: #fcd34d; }
.np-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 14px; }
.np-txt strong { font-size: .86rem; line-height: 1.3; }
.np-txt span { font-size: .8rem; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-txt em { font-style: normal; font-size: .72rem; color: var(--muted); opacity: .8; }
.np-list .empty { padding: 30px 10px; }
@media (max-width: 640px) {
  .notif-panel { position: fixed; left: 8px; right: 8px; top: calc(64px + env(safe-area-inset-top)); width: auto; max-height: calc(100vh - 90px - env(safe-area-inset-top)); }
}
/* ---- Aide d'installation ---- */
.ih-hero { display: flex; gap: 14px; align-items: center; }
.ih-hero img { border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.ih-hero div { display: flex; flex-direction: column; gap: 4px; }
.ih-steps { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.ih-steps h3 { margin: 0 0 8px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.ih-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .9rem; }
.ih-steps svg { vertical-align: -3px; }
/* ---- Application installée (plein écran iPhone) ---- */
@media (display-mode: standalone) {
  .topbar { height: calc(64px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .sidebar { padding-top: env(safe-area-inset-top); }
  .view-root { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---- Suivi des mises à jour ---- */
.upd-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.upd-col { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--line); min-height: 220px; }
.upd-col header { display: flex; align-items: center; gap: 8px; }
.upd-col header .dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.upd-col.st-in_progress header .dot { background: #60a5fa; box-shadow: 0 0 10px #60a5fa; }
.upd-col.st-testing header .dot { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }
.upd-col.st-published header .dot { background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.upd-col header .n { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .75rem; font-weight: 800; text-align: center; }
.upd-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--card-solid); border: 1px solid var(--line-strong); transition: border-color .2s, transform .2s; }
.upd-card:hover { border-color: rgba(255,255,255,.25); transform: translateY(-1px); }
.upd-prod { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fca5a5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-prod.site { color: #93c5fd; }
.upd-prod.panel { color: #fcd34d; }
.upd-ver { font-size: .72rem; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: rgba(96,165,250,.15); color: #93c5fd; white-space: nowrap; }
.upd-title { font-size: .92rem; line-height: 1.35; }
.upd-progress { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.upd-progress span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #60a5fa, #22c55e); }
.upd-card .late { color: #fca5a5; }
.upd-actions { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.upd-empty { padding: 18px 8px; border: 1px dashed var(--line-strong); border-radius: 12px; text-align: center; color: var(--muted); font-size: .8rem; }
.upd-timeline { padding: 8px 18px; }
.ut-item { display: grid; grid-template-columns: 110px 16px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ut-item:last-child { border-bottom: 0; }
.ut-date { font-size: .8rem; color: var(--muted); padding-top: 2px; }
.ut-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.ut-body .row { gap: 8px; flex-wrap: wrap; }
.upd-publish { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.upd-log summary { cursor: pointer; font-weight: 700; font-size: .88rem; }
.upd-log .stack-sm { margin-top: 8px; }
.ul-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
@media (max-width: 1100px) { .upd-board { grid-template-columns: repeat(4, 260px); } }
@media (max-width: 640px) { .ut-item { grid-template-columns: 1fr; gap: 4px; } .ut-dot { display: none; } }

/* ---- Appareils connectés ---- */
.dev-list { display: flex; flex-direction: column; gap: 8px; }
.dev-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.dev-row.cur { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.05); }
.dev-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(96,165,250,.12); color: #93c5fd; }
.dev-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dev-txt strong { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .9rem; }
.dev-hist summary { cursor: pointer; font-weight: 700; font-size: .88rem; margin-top: 4px; }
.dev-hist .table-wrap { margin-top: 10px; }

/* ---- Import Tebex ---- */
.imp-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
.imp-row img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; }

/* ---- Version du site ---- */
.ver-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ver-hero h2 { margin: 2px 0 6px; font-size: 1.3rem; }
.ver-hero p { margin: 0 0 4px; }
.ver-hero.ok { border-color: rgba(34,197,94,.4); background: linear-gradient(135deg, rgba(34,197,94,.1), transparent 60%), var(--card); }
.ver-hero.warn { border-color: rgba(245,158,11,.45); background: linear-gradient(135deg, rgba(245,158,11,.12), transparent 60%), var(--card); }
.ver-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.ver-hero.ok .ver-ico { background: rgba(34,197,94,.15); color: #4ade80; }
.ver-hero.warn .ver-ico { background: rgba(245,158,11,.15); color: #fcd34d; }
.ver-ico svg { width: 28px; height: 28px; }
.ok-txt { color: #86efac; }
.ver-changes { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.ver-files { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-height: 340px; overflow: auto; }
.ver-files li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.025); font-size: .82rem; }
.ver-files code { word-break: break-all; }
.ver-timeline { display: flex; flex-direction: column; }
.vt-item { display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.vt-item:last-child { border-bottom: 0; }
.vt-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: #94a3b8; }
.vt-dot.green { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.vt-dot.amber { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.vt-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vt-dot.blue { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.15); }

/* ---- Préférences de notifications ---- */
.np-prefs td, .np-prefs th { vertical-align: middle; }
.np-prefs .center { text-align: center; }
.np-prefs .switch { justify-content: center; }
.np-prefs select { min-width: 150px; }
.np-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.np-card { display: flex; flex-direction: column; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); overflow: hidden; }
.np-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.np-card-head strong { display: block; font-size: .95rem; }
.np-card-head .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-card-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; }
.np-card-ic.moon { background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(30,27,75,.6)); }
.np-card-ic.sound { background: linear-gradient(135deg, rgba(34,197,94,.3), rgba(20,83,45,.5)); }
.np-card-body { display: flex; flex-direction: column; gap: 14px; padding: 16px; transition: opacity .2s; }
.np-card.off .np-card-body { opacity: .4; pointer-events: none; }
.nq-times { display: flex; align-items: center; gap: 10px; }
.nq-time { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px solid var(--line-strong); cursor: pointer; }
.nq-time:focus-within { border-color: rgba(129,140,248,.7); }
.nq-time > span { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nq-time input { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; font-size: 1.5rem; font-weight: 800; color: #fff; width: 100%; color-scheme: dark; font-variant-numeric: tabular-nums; }
.nq-arrow { color: var(--muted); font-size: 1.2rem; }
.nq-line { position: relative; height: 10px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.nq-line i { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #6366f1, #818cf8); border-radius: 99px; }
.nq-line b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fbbf24; }
.nq-hours { display: flex; justify-content: space-between; margin-top: -8px; font-size: .66rem; color: var(--muted); }
.np-field { display: flex; flex-direction: column; gap: 7px; }
.np-label { font-size: .74rem; font-weight: 800; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.nq-seg { display: flex; }
.nq-seg button { flex: 1; padding: 8px 10px; }
.seg.nq-seg button.on { background: #6366f1; color: #fff; }
.np-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.15); border: 1px solid var(--line); cursor: pointer; }
.np-row .grow { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.ni-vol { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px solid var(--line-strong); }
.ni-vol input[type=range] { flex: 1; accent-color: #22c55e; }
.ni-vol output { min-width: 46px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Campagne e-mail ---- */
.cp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 20px; align-items: start; }
.cp-preview { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 10px; }
.cp-inbox { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.cp-from { font-size: .78rem; font-weight: 800; color: #fca5a5; }
.cp-frame-wrap { display: flex; justify-content: center; background: #eef1f6; border-radius: 12px; overflow: hidden; }
#cp-frame { width: 100%; max-width: 600px; height: 72vh; border: 0; background: #eef1f6; transition: max-width .25s; }
.cp-ai { border-color: rgba(168,85,247,.35); background: linear-gradient(135deg, rgba(168,85,247,.12), transparent 60%), var(--card); }
.cp-ai-ico { font-size: 1.6rem; }
.cp-ai textarea { min-height: 80px; }
.chip-btn { font: inherit; font-size: .78rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; }
.chip-btn:hover { background: rgba(255,255,255,.09); }
.cp-blocks { display: flex; flex-direction: column; gap: 10px; }
.cp-block { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.cp-block-head { display: flex; align-items: center; gap: 6px; }
.cp-block-head .badge { display: inline-flex; align-items: center; gap: 5px; }
.cp-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cp-img { display: flex; gap: 12px; align-items: flex-start; }
.cp-img img, .cp-img-empty { width: 150px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: rgba(0,0,0,.3); flex: none; }
.cp-img-empty { display: grid; place-items: center; align-content: center; gap: 4px; color: var(--muted); font-size: .75rem; border: 1px dashed var(--line-strong); }
.cp-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 280px; overflow: auto; }
.cp-prod { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-size: .78rem; position: relative; }
.cp-prod.on { border-color: var(--red-light); background: rgba(197,48,48,.1); }
.cp-prod input { position: absolute; top: 8px; left: 8px; }
.cp-prod img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
@media (max-width: 1200px) { .cp-layout { grid-template-columns: 1fr; } .cp-preview { position: static; } }
@media (max-width: 640px) { .cp-img { flex-direction: column; } .cp-img img, .cp-img-empty { width: 100%; } }

/* ---- Annonce Discord ---- */
.an-layout { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 20px; align-items: start; }
.an-preview { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; background: #313338; border-color: #1e1f22; max-height: calc(100vh - 110px); overflow: auto; }
.dc-msg { display: flex; gap: 14px; font-family: "gg sans", "Noto Sans", Inter, sans-serif; color: #dbdee1; font-size: .92rem; }
.dc-av { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.dc-main { min-width: 0; flex: 1; }
.dc-name { font-weight: 600; color: #f2f3f5; display: flex; align-items: center; gap: 6px; }
.dc-bot { background: #5865f2; color: #fff; font-size: .62rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.dc-time { font-size: .72rem; color: #949ba4; font-weight: 400; }
.dc-content { margin: 2px 0 4px; }
.dc-mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-embed { margin-top: 4px; background: #2b2d31; border-left: 4px solid #c53030; border-radius: 4px; padding: 10px 14px 12px 12px; max-width: 440px; }
.dc-embed-body { display: flex; gap: 12px; }
.dc-embed-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dc-title { font-weight: 700; color: #00a8fc; font-size: 1rem; }
.dc-desc, .dc-fval { font-size: .86rem; line-height: 1.38; color: #dbdee1; word-wrap: break-word; }
.dc-fname { font-weight: 700; font-size: .86rem; color: #f2f3f5; margin-bottom: 2px; }
.dc-thumb { width: 80px; height: 80px; border-radius: 4px; object-fit: contain; flex: none; }
.dc-image { display: block; width: 100%; border-radius: 4px; margin-top: 12px; }
.dc-footer { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .72rem; color: #b5bac1; }
.dc-footer img { width: 18px; height: 18px; border-radius: 50%; }
.dc-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-btn { background: #4e5058; color: #fff; padding: 6px 14px; border-radius: 4px; font-size: .84rem; font-weight: 500; }
@media (max-width: 1200px) { .an-layout { grid-template-columns: 1fr; } .an-preview { position: static; max-height: none; } }

/* ---- Aperçu Discord : en-tête, titres, encadrés, colonnes ---- */
.dc-author { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: #f2f3f5; }
.dc-author img { width: 24px; height: 24px; border-radius: 50%; }
.dc-h1 { display: block; font-size: 1.35rem; font-weight: 800; color: #f2f3f5; margin: 6px 0 4px; }
.dc-h2 { display: block; font-size: 1.12rem; font-weight: 800; color: #f2f3f5; margin: 4px 0 4px; }
.dc-quote { display: block; border-left: 4px solid #4e5058; padding: 2px 0 2px 10px; margin: 6px 0; }
.dc-link { color: #00a8fc; }
.dc-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.dc-field { grid-column: 1 / -1; }
.dc-field.inline { grid-column: auto; }

.dc-fields { gap: 12px 14px; }
.dc-fval { line-height: 1.5; }

/* ---- Images de l'assistant IA ---- */
.ai-img-th { width: 64px; height: 40px; object-fit: cover; border-radius: 8px; background: #000; flex: none; }
.ai-img-th.pdf { display: grid; place-items: center; background: linear-gradient(135deg, #b91c1c, #7f1d1d); color: #fff; font-weight: 900; font-size: .78rem; letter-spacing: .06em; text-decoration: none; }
.attach-pdf { display: flex; align-items: center; gap: 12px; max-width: 420px; margin-top: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: var(--text); text-decoration: none; }
.attach-pdf:hover { background: rgba(255,255,255,.08); }
.attach-pdf .grow { display: flex; flex-direction: column; min-width: 0; }
.pdf-ic { flex: none; display: grid; place-items: center; width: 40px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #dc2626, #991b1b); color: #fff; font-weight: 900; font-size: .72rem; }
.ai-img-form { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 8px; align-items: center; }
@media (max-width: 900px) { .ai-img-form { grid-template-columns: 1fr; } }

/* ---- Boîte mail (webmail) ---- */
.mail-app { display: grid; grid-template-columns: 220px minmax(320px, 400px) minmax(0, 1fr); gap: 14px; height: calc(100vh - 118px); min-height: 560px; }
.mail-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.mail-new { justify-content: center; padding: 12px 16px; border-radius: 14px; font-size: .95rem; box-shadow: 0 8px 22px rgba(197,48,48,.28); }
.mail-folders { display: flex; flex-direction: column; gap: 2px; }
.mail-folders button { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; border: 1px dashed transparent; background: none; color: var(--muted); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.mail-folders button:hover { background: rgba(255,255,255,.05); color: var(--text); }
.mail-folders button.active { background: rgba(197,48,48,.16); color: #fff; }
.mail-folders button.active svg { color: #f87171; }
.mail-folders .fl { flex: 1; }
.mail-folders .n { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--red); color: #fff; font-size: .72rem; text-align: center; }
.mail-folders .n:empty { display: none; }
.mail-folders button[data-folder="spam"] .n { background: rgba(255,255,255,.14); }
.mail-app.dragging .mail-folders button:not(.active):not([data-folder="sent"]) { border-color: rgba(96,165,250,.35); }
.mail-folders button.drop { background: rgba(96,165,250,.18) !important; border-color: #60a5fa !important; color: #fff; }
.mail-side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.mail-side-foot .btn-link { display: inline-flex; align-items: center; gap: 6px; }

.mail-list { display: flex; flex-direction: column; min-height: 0; border-radius: 16px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.mail-tools { border-bottom: 1px solid var(--line); background: var(--card-solid); }
.mail-bar { display: flex; gap: 8px; align-items: center; padding: 10px 10px 6px 14px; }
.ml-master { display: grid; place-items: center; width: 22px; flex: none; cursor: pointer; }
.ml-master input, .mi-check input { width: 16px; height: 16px; accent-color: var(--red); margin: 0; cursor: pointer; }
.mail-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted); }
.mail-search:focus-within { border-color: rgba(96,165,250,.55); }
.mail-search input { flex: 1; min-width: 0; border: 0 !important; background: none !important; padding: 9px 0 !important; box-shadow: none !important; color: var(--text); }
.mail-filters { display: flex; align-items: center; gap: 4px; padding: 2px 12px 9px 44px; }
.mail-filters button { border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; cursor: pointer; }
.mail-filters button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.mail-filters button.on { background: rgba(255,255,255,.1); color: #fff; }
.mail-bulk { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; min-height: 76px; background: rgba(96,165,250,.08); flex-wrap: wrap; }
.mail-bulk-acts { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.mail-bulk .tb { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.mail-bulk .tb:hover { background: rgba(255,255,255,.09); }
.mail-bulk .tb.danger { color: #fca5a5; border-color: rgba(248,113,113,.35); }
.mail-bulk .tb.danger:hover { background: rgba(248,113,113,.12); }

.mail-items { flex: 1; overflow-y: auto; outline: none; }
.mail-group { position: sticky; top: 0; z-index: 1; padding: 7px 14px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--card-solid); border-bottom: 1px solid var(--line); }
.mail-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 10px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; transition: background .12s; }
.mail-item:hover { background: rgba(255,255,255,.04); }
.mail-item.unread { background: rgba(255,255,255,.025); }
.mail-item.unread::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.mail-item.unread .mi-from, .mail-item.unread .mi-subj { color: #fff; font-weight: 800; }
.mail-item.active { background: rgba(96,165,250,.12); }
.mail-item.sel { background: rgba(96,165,250,.16); }
.mi-check { display: grid; place-items: center; width: 22px; height: 30px; flex: none; cursor: pointer; }
.mi-star { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: rgba(255,255,255,.28); cursor: pointer; }
.mi-star:hover { color: #fbbf24; background: rgba(251,191,36,.1); }
.mi-star.on, .mr-star.on { color: #fbbf24; }
.mi-star.on svg, .mr-star.on svg { fill: #fbbf24; }
.mi-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .92rem; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 220) 55% 42%), hsl(calc(var(--h, 220) + 40) 60% 34%)); }
.mi-av.lg { width: 46px; height: 46px; font-size: 1.15rem; }
.mi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mi-top { display: flex; align-items: center; gap: 6px; }
.mi-from { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; color: var(--text); }
.mi-tag { flex: none; display: inline-grid; place-items: center; color: var(--muted); font-size: .8rem; }
.mi-date { flex: none; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.mail-item.unread .mi-date { color: #fca5a5; font-weight: 800; }
.mi-subj { font-size: .84rem; color: var(--muted); }
.mi-hover { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--card-solid); border: 1px solid var(--line-strong); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.mi-hover button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.mi-hover button:hover { background: rgba(255,255,255,.08); color: #fff; }
.mi-hover button[data-quick="delete"]:hover { color: #fca5a5; background: rgba(248,113,113,.14); }
@media (hover: hover) { .mail-item:hover .mi-hover { display: flex; } }
.mail-pager { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); background: var(--card-solid); }
.mail-pager:empty { display: none; }
.mail-ghost { position: fixed; top: -100px; left: -100px; padding: 8px 14px; border-radius: 10px; background: #2563eb; color: #fff; font: 700 13px/1.2 system-ui, sans-serif; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mail-read { min-height: 0; overflow-y: auto; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.mail-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; padding: 30px; }
.mail-empty svg { width: 48px; height: 48px; opacity: .45; }
.mail-empty strong { color: var(--text); }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: rgba(255,255,255,.05); font: 700 .75rem/1.5 ui-monospace, Consolas, monospace; color: var(--text); text-align: center; }
.mr-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--card-solid); }
.mr-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--line-strong); }
.mr-back { display: none; }
.mr-head { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 6px; }
.mr-head h2 { margin: 0; font-size: 1.3rem; line-height: 1.3; word-wrap: break-word; }
.mr-meta { display: flex; gap: 12px; align-items: center; }
.mr-client { font-size: .84rem; padding: 9px 12px; border-radius: 10px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); color: #bbf7d0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mr-lang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px; background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.28); font-size: .86rem; color: #bfdbfe; }
.mr-lang.subtle { background: none; border: 0; padding: 0; }
.mr-lang.subtle .btn-link { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.mr-trbox { margin: 12px 24px 0; padding: 14px 16px; border-radius: 12px; background: rgba(96,165,250,.06); border: 1px solid rgba(96,165,250,.25); display: flex; flex-direction: column; gap: 8px; }
.mr-trhead { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .82rem; color: #93c5fd; }
.ai-btn { border-color: rgba(168,85,247,.45) !important; color: #e9d5ff !important; }
.ai-btn:hover { background: rgba(168,85,247,.15) !important; }
.ai-solid { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; border: 0; white-space: nowrap; }
.ai-solid:hover { filter: brightness(1.1); }
.mr-atts { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px 0; }
.mr-att { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); color: var(--text); text-decoration: none; font-size: .82rem; }
.mr-att:hover { background: rgba(255,255,255,.07); }
.mr-body { padding: 16px 24px; }
.mr-body iframe { display: block; width: 100%; min-height: 200px; border: 0; border-radius: 12px; background: #fff; }
.mr-text { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; font-size: .93rem; line-height: 1.65; margin: 0; }
.mr-reply { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 24px 24px; margin-top: auto; }

.mail-compose { display: flex; flex-direction: column; gap: 12px; }
.mc-fields { border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.mc-line { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.mc-line:last-child { border-bottom: 0; }
.mc-line > span { width: 48px; flex: none; font-size: .8rem; font-weight: 700; color: var(--muted); }
.mc-line input { flex: 1; min-width: 0; border: 0 !important; background: none !important; box-shadow: none !important; padding: 11px 0 !important; }
.mc-ai { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(168,85,247,.05)); border: 1px solid rgba(168,85,247,.3); }
.mc-ai-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-ai-row input { flex: 1; min-width: 200px; }
.mc-ai-ic { font-size: 1.1rem; }
.mc-langs { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.2); }
.mc-langs button { border: 0; background: none; color: var(--muted); font: inherit; font-size: .76rem; font-weight: 700; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.mc-langs button.on { background: rgba(168,85,247,.35); color: #fff; }
.mc-ai .btn-link { display: inline-flex; align-items: center; gap: 5px; color: #d8b4fe; }
.mc-body { min-height: 240px; font-size: .95rem; line-height: 1.6; resize: vertical; }
.mc-sig { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mc-sig summary { cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.mc-sig[open] summary { margin-bottom: 10px; }
.mc-sig textarea { width: 100%; }
.mc-files { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-files:empty { display: none; }
.mc-file { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 5px 6px 5px 10px; border-radius: 9px; border: 1px solid var(--line-strong); font-size: .8rem; }
.mc-file button { border: 0; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 0 4px; }
.mc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.bounce-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.bounce-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bounce-row:last-child { border-bottom: 0; }
.bounce-row > :first-child { flex: 1; min-width: 0; }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; }
.keys > div { display: flex; align-items: center; gap: 10px; font-size: .88rem; }
.keys kbd { min-width: 74px; }
.code-block { margin: 0; padding: 14px; border-radius: 12px; background: #050a14; border: 1px solid var(--line-strong); font-size: .82rem; overflow-x: auto; }

@media (max-width: 1280px) { .mail-app { grid-template-columns: 64px minmax(300px, 360px) minmax(0, 1fr); }
  .mail-new span, .mail-folders .fl, .mail-side-foot { display: none; }
  .mail-new { padding: 12px 0; }
  .mail-folders button { justify-content: center; position: relative; padding: 11px 0; }
  .mail-folders .n { position: absolute; top: 2px; right: 2px; min-width: 18px; padding: 0 5px; font-size: .64rem; } }
@media (max-width: 900px) {
  .mail-app { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .mail-side { flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; }
  .mail-new { padding: 10px 14px; flex: none; }
  .mail-folders { flex-direction: row; gap: 4px; }
  .mail-folders button { padding: 9px 11px; }
  .mail-list { height: calc(100vh - 190px); min-height: 420px; }
  .mail-read { display: none; position: fixed; inset: 0; z-index: 60; border-radius: 0; border: 0; }
  .mail-read.open { display: flex; }
  .mr-back { display: inline-grid; }
  .mr-head, .mr-body, .mr-atts, .mr-reply { padding-left: 16px; padding-right: 16px; }
  .mr-trbox { margin-left: 16px; margin-right: 16px; }
  .mail-bulk .tb span { display: none; }
  .mail-filters { padding-left: 14px; }
}

/* ---- Audience ---- */
.au-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.au-online { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #bbf7d0; font-size: .92rem; }
.au-online strong { font-size: 1.2rem; color: #fff; }
.au-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: au-pulse 1.8s infinite; }
@keyframes au-pulse { 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .au-dot { animation: none; } }
.au-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.au-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.au-kpi .label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.au-kpi .value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: #fff; }
.au-kpi .sub { font-size: .74rem; color: var(--muted); }
.au-trend { position: absolute; top: 14px; right: 14px; font-size: .7rem; font-weight: 800; padding: 2px 7px; border-radius: 99px; }
.au-trend.up { background: rgba(34,197,94,.14); color: #86efac; }
.au-trend.down { background: rgba(248,113,113,.14); color: #fca5a5; }
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.seg button { border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--red); color: #fff; }
.au-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.au-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .95rem; }
.au-bars { display: flex; flex-direction: column; gap: 10px; }
.au-bar { font-size: .86rem; display: flex; flex-direction: column; gap: 5px; }
.au-track { height: 7px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.au-track i { display: block; height: 100%; border-radius: 99px; background: var(--red); }
.au-split { height: 12px; border-radius: 99px; background: #608cd2; overflow: hidden; }
.au-split i { display: block; height: 100%; background: #e04848; }
.au-sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.au-top { margin: 0; padding: 0; list-style: none; counter-reset: au; display: flex; flex-direction: column; gap: 2px; }
.au-top li { counter-increment: au; display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.au-top li::before { content: counter(au); width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.07); font-size: .7rem; font-weight: 800; }
.au-top li span { flex: 1; min-width: 0; }
@media (max-width: 1300px) { .au-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .au-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .au-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .au-kpi .value { font-size: 1.5rem; } }

/* ---- Annonce Discord : rédaction par l'IA ---- */
.an-ai { background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(168,85,247,.04)); border-color: rgba(168,85,247,.35); }
.an-ai textarea { min-height: 84px; }
.an-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.an-ideas .chip { border: 1px solid rgba(168,85,247,.35); background: rgba(168,85,247,.08); color: #e9d5ff; font: inherit; font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: 99px; cursor: pointer; }
.an-ideas .chip:hover { background: rgba(168,85,247,.2); }

.ni-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px dashed var(--line-strong); }
.ni-file { flex: 1; font-weight: 700; font-size: .86rem; color: #86efac; }

.au-funnel { display: flex; flex-direction: column; font-size: .84rem; }
.au-fhead, .au-frow { display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px 46px 58px; gap: 6px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.au-fhead { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.au-fhead span:not(:first-child), .au-frow b, .au-conv { text-align: right; }
.au-conv { font-weight: 800; color: var(--muted); } .au-conv.good { color: #86efac; }

/* ---- Santé du site ---- */
.hl-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hl-head.hl-ok { border-color: rgba(34,197,94,.35); } .hl-head.hl-warn { border-color: rgba(245,158,11,.4); } .hl-head.hl-error { border-color: rgba(248,113,113,.5); }
.hl-big { font-size: 2rem; }
.hl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.hl-row { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.hl-row.hl-error { border-color: rgba(248,113,113,.45); background: rgba(197,48,48,.08); }
.hl-row.hl-warn { border-color: rgba(245,158,11,.35); }
.hl-fix { margin-top: 6px; font-size: .82rem; color: #fcd34d; }

.specs-fs { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 4px; }
.specs-fs legend { font-weight: 800; padding: 0 6px; }

/* ---- Tickets pro ---- */
.t-pro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 4px; }
.t-assign { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.t-assign select { padding: 5px 8px; font-size: .82rem; min-width: 150px; }
.t-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: var(--muted); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
button.tag-chip:hover { color: var(--text); }
.tag-chip.on { background: rgba(96,165,250,.18); border-color: rgba(96,165,250,.5); color: #bfdbfe; }
.tag-chip.add { border-style: dashed; }
.msg.note { align-self: stretch; max-width: none; }
.msg.note .bubble { background: rgba(250,204,21,.08); border: 1px dashed rgba(250,204,21,.45); color: #fde68a; }
.msg.note .meta { color: #fcd34d; }

/* ---- Fiche client unifiée ---- */
.cl-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cl-kpis div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); text-align: center; }
.cl-kpis b { font-size: 1.05rem; color: #fff; } .cl-kpis span { font-size: .7rem; color: var(--muted); }
.cl-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.cl-timeline li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.cl-timeline a { color: inherit; }
.cl-ic { flex: none; width: 24px; text-align: center; }
@media (max-width: 560px) { .cl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cp-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; font-size: .78rem; color: var(--muted); }
.cp-stats b { color: #86efac; }

/* ---- Codes promo ---- */
.cpn-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; max-height: 180px; overflow-y: auto; padding: 8px; border-radius: 10px; border: 1px solid var(--line); }
.cpn-code { flex: none; padding: 6px 10px; border-radius: 8px; background: rgba(197,48,48,.16); border: 1px dashed rgba(248,113,113,.5); font: 800 .85rem ui-monospace, Consolas, monospace; letter-spacing: .04em; color: #fecaca; }

.loy-step { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); }
.loy-step input { width: 64px; padding: 5px 8px; }

/* ---- Traductions ---- */
.tr-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tr-group { margin: 10px 0 0; font-size: .95rem; color: var(--muted); }
.tr-item { padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.tr-item.locked { border-color: rgba(34,197,94,.35); }
.tr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tr-lbl { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; }
.tr-fr { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: .88rem; max-height: 380px; overflow: auto; }
.tr-item textarea { width: 100%; font-size: .88rem; }
@media (max-width: 900px) { .tr-cols { grid-template-columns: 1fr; } }

/* =================== Panel : menu rangé, recherche rapide, réglages en onglets =================== */
.nav-search { display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; }
.nav-search:hover { color: #fff; border-color: rgba(127,176,255,.45); }
.nav-search span { flex: 1; text-align: left; }
.nav-search kbd { font-size: .64rem; }
.nav-sec { margin-bottom: 2px; }
button.nav-group { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 8px; }
button.nav-group:hover { color: #cbd5e1; }
button.nav-group span:first-child { flex: 1; }
.nav-group .chev { font-size: 1rem; transition: transform .2s; }
.nav-sec.open .nav-group .chev { transform: rotate(90deg); }
.nav-sec:not(.open) .nav-items { display: none; }
.nav-group .count { font-size: .62rem; padding: 0 6px; }
.palette { position: fixed; inset: 0; z-index: 300; display: grid; place-items: start center; padding-top: 12vh; background: rgba(2,6,23,.6); backdrop-filter: blur(4px); }
.palette-box { width: min(620px, 92vw); border-radius: 18px; background: var(--card-solid); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0,0,0,.55); overflow: hidden; }
.palette-box input { width: 100%; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 18px 20px !important; font-size: 1.05rem; background: none !important; box-shadow: none !important; }
.palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.palette-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.palette-list a.on, .palette-list a:hover { background: rgba(197,48,48,.16); color: #fff; }
.palette-foot { padding: 8px 14px; border-top: 1px solid var(--line); font-size: .72rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.set-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.set-tabs button { flex: 1; min-width: 120px; padding: 10px 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; }
.set-tabs button:hover { color: #fff; background: rgba(255,255,255,.05); }
.set-tabs button.on { background: var(--red); color: #fff; }
section.card[hidden], .grid[hidden] { display: none !important; }

/* =================== Tickets : nouvelle présentation =================== */
.inbox-tools .tabs { display: flex !important; overflow-x: auto; gap: 4px; scrollbar-width: none; }
.inbox-tools .tabs::-webkit-scrollbar { display: none; }
.inbox-tools .tabs button { flex: none !important; padding: 6px 10px !important; font-size: .76rem !important; }
.t-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.t-summary > * { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font: inherit; color: var(--text); cursor: pointer; }
.t-summary > div { cursor: default; }
.t-summary b { font-size: 1.15rem; color: #fff; } .t-summary span { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.t-summary .on { border-color: rgba(248,113,113,.6); background: rgba(197,48,48,.12); }
.t-summary .hot b { color: #fca5a5; }
.ticket-item { display: flex !important; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px !important; }
.ticket-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.ticket-item.st-ouvert::before { background: #f59e0b; } .ticket-item.st-repondu::before { background: #60a5fa; } .ticket-item.is-late::before { background: #ef4444; }
.ticket-item.st-ferme { opacity: .72; }
.ticket-item.picked { background: rgba(96,165,250,.14); }
.t-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 220) 55% 42%), hsl(calc(var(--h, 220) + 40) 60% 32%)); }
.t-pick { flex: none; width: 34px; text-align: center; font-size: 1.2rem; color: #93c5fd; }
.t-body { flex: 1; min-width: 0; }
.t-cat { padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-size: .68rem; font-weight: 700; }
.t-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--card-solid); }
.t-foot .spacer { flex: 1; }
.danger-link { color: #fca5a5 !important; display: inline-flex; align-items: center; gap: 4px; }
.chat-head { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.chat-msgs { background: radial-gradient(ellipse at top, rgba(31,63,110,.12), transparent 60%); }
.msg .bubble { box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* =================== Centre de notifications =================== */
.notif-panel { width: 420px !important; }
.np-head { align-items: center; gap: 10px; padding: 14px 16px 8px !important; border-bottom: 0; }
.np-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(197,48,48,.2); color: #fca5a5; font-size: .7rem; font-weight: 800; }
.np-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.np-head .btn-link { display: inline-flex; align-items: center; gap: 4px; position: static; white-space: nowrap; }
.np-filters { display: flex; gap: 4px; padding: 0 12px 10px; align-items: center; }
.np-filters button { border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: .74rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; cursor: pointer; }
.np-filters button.on { background: rgba(255,255,255,.1); color: #fff; border-color: var(--line-strong); }
.np-filters .np-install { margin-left: auto; padding: 4px 8px; }
.np-day { padding: 10px 12px 4px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.np-item { border: 1px solid transparent; margin: 2px 0; }
.np-item.unread { background: rgba(197,48,48,.07) !important; border-color: rgba(197,48,48,.18); }
.np-item.unread .np-txt strong { color: #fff; }
.np-item:not(.unread) { opacity: .82; }
@media (max-width: 520px) { .notif-panel { width: calc(100vw - 20px) !important; right: -50px; } }
/* Webmail : images masquées */
.mr-imgs { margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.3); font-size: .82rem; color: #fde68a; }

/* Version du site : pages pour Google */
.ver-seo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ver-seo .ver-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(34,197,94,.12); color: #4ade80; flex-shrink: 0; }
.ver-seo .ver-ico.warn { background: rgba(245,158,11,.12); color: #fbbf24; }
.ver-seo p { margin: 4px 0 0; }
.red-txt { color: #f87171; }

/* Santé : incidents publics */
.st-adm-comps { display: flex; flex-wrap: wrap; gap: 8px; }
.st-adm-c { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: .8rem; }
.st-adm-c .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.st-adm-c .dot.amber { background: #f59e0b; } .st-adm-c .dot.red { background: #ef4444; } .st-adm-c .dot.blue { background: #60a5fa; }
.st-adm-inc { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid #f59e0b; border-radius: 12px; }
.st-adm-inc.done { border-left-color: #22c55e; opacity: .8; }
/* Réglages : assistant public */
.chat-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.chat-usage div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.chat-usage b { display: block; font-size: 1.15rem; color: #fff; }
.chat-usage span { font-size: .75rem; color: var(--muted); }
.chat-log { max-height: 320px; overflow-y: auto; display: grid; gap: 8px; }
.chat-log div { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: .82rem; }
.chat-log em { color: var(--muted); font-style: normal; font-size: .72rem; }

/* Santé : « Tout retester » */
.ht-list { display: grid; gap: 6px; }
.ht-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ht-row.ko { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.06); }
.ht-row.ok { border-color: rgba(34,197,94,.25); }
.ht-row.skip { opacity: .7; }
.ht-ico { font-size: 1.1rem; }

/* Recherche globale : groupes */
.palette-group { padding: 10px 14px 4px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
/* Export comptable */
.chip-btn { border: 1px solid var(--line-strong); background: none; color: var(--text); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.chip-btn:hover { border-color: var(--red-light); }
/* Envois programmés */
.sched-pick { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--muted); }
.sched-pick input { border: 0; background: transparent; padding: 8px 6px; color: var(--text); min-width: 0; }
.sched-box { display: grid; gap: 6px; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.sched-row { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
/* Tableau de bord personnalisable */
.dash-bar { display: flex; justify-content: flex-end; margin-bottom: -6px; }
.dash-block { display: grid; gap: 16px; }
.dc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }

/* Bande de compteurs (Clients, Factures, Avis, Produits) */
.page-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.page-stats .ps { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.page-stats a.ps:hover { border-color: var(--line-strong); text-decoration: none; }
.page-stats .ps b { font-size: 1.25rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.page-stats .ps span { font-size: .74rem; color: var(--muted); font-weight: 600; }
.page-stats .ps.green { border-left: 3px solid #22c55e; } .page-stats .ps.red { border-left: 3px solid #ef4444; }
.page-stats .ps.amber { border-left: 3px solid #f59e0b; } .page-stats .ps.blue { border-left: 3px solid #60a5fa; }

/* Guides : éditeur */
.ge-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.ge-side { position: sticky; top: 80px; }
.ge-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.ge-tools button, .ge-imgup { border: 1px solid var(--line-strong); background: none; color: var(--text); border-radius: 8px; padding: 4px 9px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.ge-tools button:hover, .ge-imgup:hover { border-color: var(--red-light); }
#ge-content { min-height: 380px; font-size: .85rem; line-height: 1.55; }
.ge-prev { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #0b1426; }
@media (max-width: 1000px) { .ge-layout { grid-template-columns: 1fr; } .ge-side { position: static; } }

/* Équipe */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tm-card { display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.tm-card.is-admin::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #1a56db 0 33%, #fff 33% 66%, #c53030 66%); opacity: .8; }
.tm-head { display: flex; align-items: center; gap: 12px; }
.tm-av { position: relative; flex: none; }
.tm-av .avatar { width: 48px; height: 48px; font-size: 1.1rem; }
.tm-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: #64748b; border: 2px solid var(--card-solid); }
.tm-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.tm-name { font-weight: 800; font-size: 1.02rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-mail { display: block; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.tm-seen { margin: 0; font-size: .8rem; color: var(--muted); }
.tm-seen.on { color: #4ade80; font-weight: 700; }
.tm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tm-kpis div { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); text-align: center; }
.tm-kpis b { display: block; font-size: 1.25rem; color: #fff; font-variant-numeric: tabular-nums; }
.tm-kpis span { font-size: .68rem; color: var(--muted); line-height: 1.25; display: block; }
.tm-last { margin: 0; font-size: .8rem; color: var(--muted); }
.tm-perms { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; }

/* Menu « Mon compte » */
#user-dropdown { min-width: 290px; padding: 8px; }
#user-dropdown .menu-head { padding: 10px; margin-bottom: 6px; }
.um-id { display: flex; align-items: center; gap: 12px; }
.um-id .avatar.lg { width: 48px; height: 48px; }
.um-name { font-weight: 800; font-size: 1rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-mail { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; }
.um-group { padding: 4px 0; border-bottom: 1px solid var(--line); }
.um-group:last-child { border-bottom: 0; padding-bottom: 0; }
.menu .um-item { display: flex; align-items: center; gap: 10px; }
.menu .um-item svg { color: var(--muted); flex: none; }
.menu .um-item:hover svg { color: var(--text); }
.um-hint { font-size: .7rem; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.menu .um-item.danger { color: #f87171; }
.menu .um-item.danger svg { color: #f87171; }
.um-label { padding: 6px 12px 4px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.um-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 2px 6px 6px; }
.menu .um-theme button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font-size: .78rem; text-align: center; }
.menu .um-theme button span { font-size: 1.05rem; }
.menu .um-theme button.on { border-color: rgba(224,72,72,.6); background: rgba(197,48,48,.14); color: #fff; }

.tr-group.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Produits : images */
.pimg-main { display: flex; gap: 12px; align-items: flex-start; }
.pimg-prev { position: relative; width: 140px; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.03); display: grid; place-items: center; flex: none; }
.pimg-prev img { width: 100%; height: 100%; object-fit: cover; }
.pimg-bad { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 6px; background: #b91c1c; color: #fff; font-size: .68rem; font-weight: 800; }
.pimg-bad.big { left: 10px; right: 10px; bottom: 10px; text-align: center; font-size: .78rem; padding: 6px; }
.pgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 8px; border: 1px dashed var(--line-strong); border-radius: 12px; min-height: 90px; transition: border-color .15s, background .15s; }
.pgal.drop { border-color: var(--red-light); background: rgba(197,48,48,.08); }
.pgal-item { position: relative; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.pgal-item.bad { border-color: #ef4444; }
.pgal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgal-tools { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.pgal-item:hover .pgal-tools, .pgal-item:focus-within .pgal-tools { opacity: 1; }
.pgal-tools button { width: 24px; height: 24px; border-radius: 6px; border: 0; background: rgba(7,13,26,.85); color: #fff; font-size: .7rem; cursor: pointer; }
.pgal-tools button.danger { background: #b91c1c; }
.pgal-tools button:disabled { opacity: .35; cursor: default; }
.pgal-empty { grid-column: 1 / -1; display: grid; place-items: center; color: var(--muted); font-size: .85rem; padding: 18px; }
@media (hover: none) { .pgal-tools { opacity: 1; } }

/* Ventes flash, statistiques produits */
.fl-fs { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 14px; margin: 0; }
.fl-fs legend { padding: 0 6px; }
.ps-bar { width: 80px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 3px; }
.ps-bar span { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); border-radius: 99px; }

/* ===== MODE CLAIR (généré par outils/generer-theme-clair.py, ne pas modifier à la main) ===== */
html[data-theme="light"] {
  --navy-950: #f3f5f9; --navy-900: #ffffff; --navy-850: #f7f9fc; --navy-800: #eef2f7; --navy-700: #dfe7f3; --navy-600: #c9d5e8;
  --text: #1e293b; --muted: #5b6b82; --white: #0f172a;
  --line: rgba(15, 23, 42, .09); --line-strong: rgba(15, 23, 42, .16);
  --card: #ffffff; --card-solid: #ffffff; --shadow: 0 14px 40px -22px rgba(15, 23, 42, .35);
  --red-glow: rgba(197, 48, 48, .18);
  color-scheme: light;
}
html[data-theme="light"] body { background: #f3f5f9; color: #1e293b; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #fff; color: #1e293b; border-color: rgba(15, 23, 42, .16); }
html[data-theme="light"] .btn-red, html[data-theme="light"] .badge.red, html[data-theme="light"] .np-badge { color: #fff; }
html[data-theme="light"] iframe { background: #fff; }
html[data-theme="light"] .kpi.accent { background: linear-gradient(140deg, rgba(197, 48, 48, .12), #ffffff 65%); }
html[data-theme="light"] .sidebar { background: #ffffff; }
html[data-theme="light"] body::before { background: radial-gradient(900px 500px at 10% -10%, rgba(59, 130, 246, .10), transparent 60%), radial-gradient(700px 400px at 100% 0%, rgba(197, 48, 48, .06), transparent 60%), #f3f5f9; }
html[data-theme="light"] a { color: #1d4ed8; }
html[data-theme="light"] a { color: #004ab8; }
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4 { color: #0f172a; }
html[data-theme="light"] code { background: rgba(15, 23, 42, 0.072); }
html[data-theme="light"] ::selection { color: #0f172a; }
html[data-theme="light"] .strong { color: #0f172a; }
html[data-theme="light"] .btn { color: #0f172a; }
html[data-theme="light"] .btn-ghost { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .btn-ghost:hover { background: rgba(15, 23, 42, 0.081); }
html[data-theme="light"] .btn-navy { border-color: rgba(15, 23, 42, 0.09); }
html[data-theme="light"] .btn-danger { color: #b80000; }
html[data-theme="light"] .btn-danger:hover { color: #0f172a; }
html[data-theme="light"] .btn-success { color: #16a24b; }
html[data-theme="light"] .btn-success:hover { color: #0f172a; }
html[data-theme="light"] .btn-link:hover { color: #0f172a; }
html[data-theme="light"] .icon-btn { background: rgba(15, 23, 42, 0.045); color: #0f172a; }
html[data-theme="light"] .icon-btn:hover { background: rgba(15, 23, 42, 0.09); }
html[data-theme="light"] label { color: #435a74; }
html[data-theme="light"] input[type=text], html[data-theme="light"] input[type=email], html[data-theme="light"] input[type=password], html[data-theme="light"] input[type=number], html[data-theme="light"] input[type=url], html[data-theme="light"] input[type=search], html[data-theme="light"] input[type=datetime-local], html[data-theme="light"] input[type=date], html[data-theme="light"] input[type=month], html[data-theme="light"] input:not([type]), html[data-theme="light"] select, html[data-theme="light"] textarea { background: rgba(255, 255, 255, 0.6); color: #0f172a; }
html[data-theme="light"] input[type=file]::file-selector-button { background: rgba(15, 23, 42, 0.054); color: #0f172a; }
html[data-theme="light"] .form-error { color: #b80000; }
html[data-theme="light"] .checks .check { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .switch .track { background: rgba(15, 23, 42, 0.126); }
html[data-theme="light"] .spinner { border: 3px solid rgba(15, 23, 42, 0.135); }
html[data-theme="light"] .skel { background: linear-gradient(90deg, rgba(15, 23, 42, 0.036) 25%, rgba(15, 23, 42, 0.081) 37%, rgba(15, 23, 42, 0.036) 63%); }
html[data-theme="light"] .login-brand strong { color: #0f172a; }
html[data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.75); }
html[data-theme="light"] .brand { color: #0f172a; }
html[data-theme="light"] .nav a:hover { color: #0f172a; background: rgba(15, 23, 42, 0.045); }
html[data-theme="light"] .nav a.active { color: #0f172a; }
html[data-theme="light"] .nav .count { color: #0f172a; }
html[data-theme="light"] .scrim { background: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.72); }
html[data-theme="light"] .user-btn { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .user-btn:hover { background: rgba(15, 23, 42, 0.081); }
html[data-theme="light"] .avatar { color: #0f172a; }
html[data-theme="light"] .menu a:hover, html[data-theme="light"] .menu button:hover { background: rgba(15, 23, 42, 0.063); }
html[data-theme="light"] .kpi .value { color: #0f172a; }
html[data-theme="light"] .kpi .up { color: #15a248; }
html[data-theme="light"] .kpi .down { color: #b20606; }
html[data-theme="light"] .kpi.accent { background: linear-gradient(140deg, rgba(197,48,48,.22), rgba(255, 255, 255, 0.55) 60%); }
html[data-theme="light"] .progress { background: rgba(15, 23, 42, 0.072); }
html[data-theme="light"] .stat-link strong { color: #0f172a; }
html[data-theme="light"] .bar-list .bl-bar { background: rgba(15, 23, 42, 0.063); }
html[data-theme="light"] .badge { background: rgba(15, 23, 42, 0.072); color: #435a74; }
html[data-theme="light"] .badge.green { color: #15a248; }
html[data-theme="light"] .badge.red { color: #b20606; }
html[data-theme="light"] .badge.amber { color: #b58b03; }
html[data-theme="light"] .badge.blue { color: #0357b4; }
html[data-theme="light"] .badge.navy { color: #275091; }
html[data-theme="light"] .badge.gray { color: #435a74; }
html[data-theme="light"] .table tbody tr.clickable:hover td { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .table-foot strong { color: #0f172a; }
html[data-theme="light"] .tabs { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .tabs button:hover { color: #0f172a; }
html[data-theme="light"] .tabs button[aria-selected="true"], html[data-theme="light"] .tabs button.active { color: #0f172a; }
html[data-theme="light"] .tabs .n { background: rgba(15, 23, 42, 0.09); }
html[data-theme="light"] .empty strong { color: #0f172a; }
html[data-theme="light"] .modal-backdrop { background: rgba(255, 255, 255, 0.7); }
html[data-theme="light"] .list a.list-link:hover { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .alert.red { color: #b40303; }
html[data-theme="light"] .alert.amber { color: #b59103; }
html[data-theme="light"] .alert.blue { color: #0352b5; }
html[data-theme="light"] .alert.green { color: #13a446; }
html[data-theme="light"] .line { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .picker-list button:hover, html[data-theme="light"] .picker-list button:focus-visible { background: rgba(15, 23, 42, 0.063); }
html[data-theme="light"] .total-box strong { color: #0f172a; }
html[data-theme="light"] .ticket-item:hover { background: rgba(15, 23, 42, 0.032); }
html[data-theme="light"] .ticket-item .t-subj { color: #0f172a; }
html[data-theme="light"] .msg.client .bubble { background: rgba(15, 23, 42, 0.063); }
html[data-theme="light"] .msg.staff .bubble { color: #0f172a; }
html[data-theme="light"] .msg.ai .bubble { color: #0f172a; }
html[data-theme="light"] .msg.ai .meta { color: #0357b4; }
html[data-theme="light"] .msg .attach img { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .day-sep { background: rgba(15, 23, 42, 0.045); }
html[data-theme="light"] .reply { background: rgba(255, 255, 255, 0.35); }
html[data-theme="light"] .file-chip { background: rgba(15, 23, 42, 0.063); }
html[data-theme="light"] .stars { color: #b48303; }
html[data-theme="light"] .upload-progress { background: rgba(15, 23, 42, 0.072); }
html[data-theme="light"] .faq-item .order { background: rgba(15, 23, 42, 0.054); }
html[data-theme="light"] .maint-box { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .maint-box strong { color: #0f172a; }
html[data-theme="light"] .status-pill { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .btn-link.xs { color: #004ab8; }
html[data-theme="light"] .remember-row { color: var(--muted, #475569); }
html[data-theme="light"] .fn-bar { background: rgba(15, 23, 42, 0.054); }
html[data-theme="light"] .cn-row { border: 1px solid rgba(15, 23, 42, 0.063); background: rgba(15, 23, 42, 0.018); }
html[data-theme="light"] .pf-tebex-note { color: #0352b5; }
html[data-theme="light"] .an-vid { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .dc-video { background: linear-gradient(135deg, #1e293b, #f1f5f9); color: #3f5879; }
html[data-theme="light"] .dc-video span { color: #475569; }
html[data-theme="light"] .cr-warn { color: #b58b03; }
html[data-theme="light"] .bn-bar { color: #0f172a; }
html[data-theme="light"] .bn-bar code { border: 1.5px dashed rgba(15, 23, 42, 0.63); color: #0f172a; }
html[data-theme="light"] .bn-bar.t-dark { background: linear-gradient(90deg, #f1f5f9, #1a365d, #f1f5f9); }
html[data-theme="light"] .notif-count { color: #0f172a; }
html[data-theme="light"] .np-push.on { color: #15a248; }
html[data-theme="light"] .np-push.warn { color: #b58b03; }
html[data-theme="light"] .np-item:hover { background: rgba(15, 23, 42, 0.045); }
html[data-theme="light"] .np-ico.green { color: #1c9b4b; }
html[data-theme="light"] .np-ico.blue { color: #0357b4; }
html[data-theme="light"] .np-ico.red { color: #b20606; }
html[data-theme="light"] .np-ico.amber { color: #b58b03; }
html[data-theme="light"] .ih-steps { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .upd-col { background: rgba(15, 23, 42, 0.023); }
html[data-theme="light"] .upd-col header .n { background: rgba(15, 23, 42, 0.072); }
html[data-theme="light"] .upd-card:hover { border-color: rgba(15, 23, 42, 0.225); }
html[data-theme="light"] .upd-prod { color: #b20606; }
html[data-theme="light"] .upd-prod.site { color: #0357b4; }
html[data-theme="light"] .upd-prod.panel { color: #b58b03; }
html[data-theme="light"] .upd-ver { color: #0357b4; }
html[data-theme="light"] .upd-progress { background: rgba(15, 23, 42, 0.072); }
html[data-theme="light"] .upd-card .late { color: #b20606; }
html[data-theme="light"] .dev-row { background: rgba(15, 23, 42, 0.023); }
html[data-theme="light"] .dev-ico { color: #0357b4; }
html[data-theme="light"] .imp-row img { background: #ffffff; }
html[data-theme="light"] .ver-hero.ok .ver-ico { color: #1c9b4b; }
html[data-theme="light"] .ver-hero.warn .ver-ico { color: #b58b03; }
html[data-theme="light"] .ok-txt { color: #15a248; }
html[data-theme="light"] .ver-files li { background: rgba(15, 23, 42, 0.023); }
html[data-theme="light"] .np-card { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .np-card-head { background: rgba(15, 23, 42, 0.018); }
html[data-theme="light"] .np-card-ic.moon { background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(255, 255, 255, 0.6)); }
html[data-theme="light"] .nq-time input { color: #0f172a; }
html[data-theme="light"] .nq-line { background: rgba(15, 23, 42, 0.063); }
html[data-theme="light"] .seg.nq-seg button.on { color: #0f172a; }
html[data-theme="light"] .cp-inbox { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .cp-from { color: #b20606; }
html[data-theme="light"] .chip-btn { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .chip-btn:hover { background: rgba(15, 23, 42, 0.081); }
html[data-theme="light"] .cp-block { background: rgba(15, 23, 42, 0.023); }
html[data-theme="light"] .dc-msg { color: #0f172a; }
html[data-theme="light"] .dc-name { color: #0f172a; }
html[data-theme="light"] .dc-bot { color: #0f172a; }
html[data-theme="light"] .dc-time { color: #475569; }
html[data-theme="light"] .dc-mention { color: #0d19ab; }
html[data-theme="light"] .dc-desc, html[data-theme="light"] .dc-fval { color: #0f172a; }
html[data-theme="light"] .dc-fname { color: #0f172a; }
html[data-theme="light"] .dc-footer { color: #334155; }
html[data-theme="light"] .dc-btn { color: #0f172a; }
html[data-theme="light"] .dc-author { color: #0f172a; }
html[data-theme="light"] .dc-h1 { color: #0f172a; }
html[data-theme="light"] .dc-h2 { color: #0f172a; }
html[data-theme="light"] .ai-img-th { background: #ffffff; }
html[data-theme="light"] .ai-img-th.pdf { color: #0f172a; }
html[data-theme="light"] .attach-pdf { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .attach-pdf:hover { background: rgba(15, 23, 42, 0.072); }
html[data-theme="light"] .pdf-ic { color: #0f172a; }
html[data-theme="light"] .mail-folders button:hover { background: rgba(15, 23, 42, 0.045); }
html[data-theme="light"] .mail-folders button.active { color: #0f172a; }
html[data-theme="light"] .mail-folders button.active svg { color: #af0909; }
html[data-theme="light"] .mail-folders .n { color: #0f172a; }
html[data-theme="light"] .mail-folders button[data-folder="spam"] .n { background: rgba(15, 23, 42, 0.126); }
html[data-theme="light"] .mail-folders button.drop { color: #0f172a; }
html[data-theme="light"] .mail-side-foot { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .mail-search { background: rgba(15, 23, 42, 0.045); }
html[data-theme="light"] .mail-filters button:hover { background: rgba(15, 23, 42, 0.045); }
html[data-theme="light"] .mail-filters button.on { background: rgba(15, 23, 42, 0.09); color: #0f172a; }
html[data-theme="light"] .mail-bulk .tb { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .mail-bulk .tb:hover { background: rgba(15, 23, 42, 0.081); }
html[data-theme="light"] .mail-bulk .tb.danger { color: #b20606; }
html[data-theme="light"] .mail-item:hover { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .mail-item.unread { background: rgba(15, 23, 42, 0.023); }
html[data-theme="light"] .mail-item.unread .mi-from, html[data-theme="light"] .mail-item.unread .mi-subj { color: #0f172a; }
html[data-theme="light"] .mi-star { color: rgba(15, 23, 42, 0.28); }
html[data-theme="light"] .mi-star:hover { color: #b48303; }
html[data-theme="light"] .mi-star.on, html[data-theme="light"] .mr-star.on { color: #b48303; }
html[data-theme="light"] .mi-star.on svg, html[data-theme="light"] .mr-star.on svg { fill: #b48303; }
html[data-theme="light"] .mi-av { color: #0f172a; }
html[data-theme="light"] .mail-item.unread .mi-date { color: #b20606; }
html[data-theme="light"] .mi-hover button:hover { background: rgba(15, 23, 42, 0.072); color: #0f172a; }
html[data-theme="light"] .mi-hover button[data-quick="delete"]:hover { color: #b20606; }
html[data-theme="light"] .mail-ghost { color: #0f172a; }
html[data-theme="light"] kbd { background: rgba(15, 23, 42, 0.045); }
html[data-theme="light"] .mr-client { color: #13a446; }
html[data-theme="light"] .mr-lang { color: #0352b5; }
html[data-theme="light"] .mr-trhead { color: #0357b4; }
html[data-theme="light"] .ai-btn { color: #5700b8 !important; }
html[data-theme="light"] .ai-solid { color: #0f172a; }
html[data-theme="light"] .mr-att { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .mr-att:hover { background: rgba(15, 23, 42, 0.063); }
html[data-theme="light"] .mc-langs button.on { color: #0f172a; }
html[data-theme="light"] .mc-ai .btn-link { color: #5902b5; }
html[data-theme="light"] .code-block { background: #ffffff; }
html[data-theme="light"] .au-online { color: #13a446; }
html[data-theme="light"] .au-online strong { color: #0f172a; }
html[data-theme="light"] .au-kpi .value { color: #0f172a; }
html[data-theme="light"] .au-trend.up { color: #15a248; }
html[data-theme="light"] .au-trend.down { color: #b20606; }
html[data-theme="light"] .seg { background: rgba(15, 23, 42, 0.045); }
html[data-theme="light"] .seg button.on { color: #0f172a; }
html[data-theme="light"] .au-track { background: rgba(15, 23, 42, 0.054); }
html[data-theme="light"] .au-top li::before { background: rgba(15, 23, 42, 0.063); }
html[data-theme="light"] .an-ideas .chip { color: #5700b8; }
html[data-theme="light"] .ni-file { color: #15a248; }
html[data-theme="light"] .au-conv.good { color: #15a248; }
html[data-theme="light"] .hl-fix { color: #b58b03; }
html[data-theme="light"] .tag-chip { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .tag-chip.on { color: #0352b5; }
html[data-theme="light"] .msg.note .bubble { color: #b59103; }
html[data-theme="light"] .msg.note .meta { color: #b58b03; }
html[data-theme="light"] .cl-kpis div { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .cl-kpis b { color: #0f172a; }
html[data-theme="light"] .cp-stats b { color: #15a248; }
html[data-theme="light"] .cpn-code { color: #b40303; }
html[data-theme="light"] .tr-fr { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .nav-search { background: rgba(15, 23, 42, 0.036); }
html[data-theme="light"] .nav-search:hover { color: #0f172a; }
html[data-theme="light"] button.nav-group:hover { color: #435a74; }
html[data-theme="light"] .palette { background: rgba(255, 255, 255, 0.6); }
html[data-theme="light"] .palette-list a.on, html[data-theme="light"] .palette-list a:hover { color: #0f172a; }
html[data-theme="light"] .set-tabs button:hover { color: #0f172a; background: rgba(15, 23, 42, 0.045); }
html[data-theme="light"] .set-tabs button.on { color: #0f172a; }
html[data-theme="light"] .t-summary > * { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .t-summary b { color: #0f172a; }
html[data-theme="light"] .t-summary .hot b { color: #b20606; }
html[data-theme="light"] .t-av { color: #0f172a; }
html[data-theme="light"] .t-pick { color: #0357b4; }
html[data-theme="light"] .t-cat { background: rgba(15, 23, 42, 0.054); }
html[data-theme="light"] .danger-link { color: #b20606 !important; }
html[data-theme="light"] .chat-head { background: linear-gradient(180deg, rgba(15, 23, 42, 0.023), transparent); }
html[data-theme="light"] .np-badge { color: #b20606; }
html[data-theme="light"] .np-filters button.on { background: rgba(15, 23, 42, 0.09); color: #0f172a; }
html[data-theme="light"] .np-item.unread .np-txt strong { color: #0f172a; }
html[data-theme="light"] .mr-imgs { color: #b59103; }
html[data-theme="light"] .ver-seo .ver-ico { color: #1c9b4b; }
html[data-theme="light"] .ver-seo .ver-ico.warn { color: #b48303; }
html[data-theme="light"] .red-txt { color: #af0909; }
html[data-theme="light"] .chat-usage b { color: #0f172a; }
html[data-theme="light"] .chat-log div { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .page-stats .ps b { color: #0f172a; }
html[data-theme="light"] .ge-prev { background: #f1f5f9; }
html[data-theme="light"] .tm-name { color: #0f172a; }
html[data-theme="light"] .tm-seen.on { color: #1c9b4b; }
html[data-theme="light"] .tm-kpis div { background: rgba(15, 23, 42, 0.018); }
html[data-theme="light"] .tm-kpis b { color: #0f172a; }
html[data-theme="light"] .um-name { color: #0f172a; }
html[data-theme="light"] .menu .um-item.danger { color: #af0909; }
html[data-theme="light"] .menu .um-item.danger svg { color: #af0909; }
html[data-theme="light"] .menu .um-theme button { background: rgba(15, 23, 42, 0.018); }
html[data-theme="light"] .menu .um-theme button.on { color: #0f172a; }
html[data-theme="light"] .pimg-prev { background: rgba(15, 23, 42, 0.027); }
html[data-theme="light"] .pimg-bad { color: #0f172a; }
html[data-theme="light"] .pgal-tools button { background: rgba(255, 255, 255, 0.85); color: #0f172a; }
html[data-theme="light"] .ps-bar { background: rgba(15, 23, 42, 0.072); }
/* ===== FIN DU MODE CLAIR ===== */

/* Bugs signalés (Discord) */
.bug-card { cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s; }
.bug-card:hover, .bug-card:focus-visible { border-color: rgba(248,113,113,.45); transform: translateY(-1px); }
.bug-thumb { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; background: rgba(255,255,255,.04); }
.bug-excerpt { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bug-av { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; }
.bug-av.ph { display: inline-grid; place-items: center; background: #5865f2; color: #fff; font-size: .72rem; font-weight: 700; }
.bug-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bug-files img, .bug-files video { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; display: block; background: #000; }
.bug-log { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; padding-right: 4px; }
.bug-msg { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: .9rem; }
.bug-msg.ai { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.25); margin-left: 24px; }
.bug-msg.staff { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); margin-left: 24px; }
.bug-ev { font-size: .75rem; color: var(--muted); text-align: center; }
[data-theme="light"] .bug-msg { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .bug-msg.ai { background: #eff6ff; border-color: #bfdbfe; }
[data-theme="light"] .bug-msg.staff { background: #f0fdf4; border-color: #bbf7d0; }

/* Pages regroupées : onglets en haut de la page */
.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.hub-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; color: var(--muted); font-weight: 800; font-size: .86rem; text-decoration: none; }
.hub-tabs a:hover { color: #fff; background: rgba(255,255,255,.05); }
.hub-tabs a.on { background: var(--red); color: #fff; }
html[data-theme="light"] .hub-tabs a:hover { color: #0f172a; background: rgba(15, 23, 42, 0.045); }
@media (max-width: 640px) { .hub-tabs { flex-wrap: nowrap; overflow-x: auto; } .hub-tabs a { white-space: nowrap; } }
/* Coûts de l'IA */
.aic-chart { display: flex; align-items: flex-end; gap: 3px; height: 70px; padding: 6px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.aic-chart span { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #f87171, #b91c1c); }
.aic-budget .ps-bar { margin-top: 6px; }
html[data-theme="light"] .aic-chart { background: #f8fafc; }

/* Suggestions de FAQ (bugs corrigés) */
.faq-sugg { margin-bottom: 14px; border-color: rgba(245,158,11,.4); }
.faq-sugg-item { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.hub-tabs a .count { margin-left: 2px; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #ef4444; color: #fff; font-size: .7rem; line-height: 18px; text-align: center; }
/* Aperçu de l'e-mail aux acheteurs : liste des destinataires */
.up-rcpt { max-height: 260px; overflow: auto; }

/* Lancements */
.launch-img { width: 120px; height: 68px; object-fit: cover; border-radius: 10px; flex: none; }
.launch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.launch-part { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
html[data-theme="light"] .launch-part { background: #f8fafc; }
@media (max-width: 640px) { .launch-img { width: 84px; height: 48px; } }

/* Choix de la vente Tebex d'une facture */
.tbx-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.tbx-opt:has(input:checked) { border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.06); }
.tbx-opt.off { opacity: .55; cursor: default; }

/* Bot Discord : listes de rôles / salons à cocher, graphique d'activité */
.db-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 190px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.db-checks .check { font-size: .82rem; }
.db-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 6px; }
.db-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.db-bar span { display: block; width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #f472b6, #db2777); min-height: 2px; }
.db-bar:hover span { filter: brightness(1.2); }

/* Bot Discord v2 : interrupteur général, concepteur de messages, permissions */
.db-tabs { flex-wrap: wrap; }
.db-master { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; border-left: 4px solid var(--success); }
.db-master.off { border-left-color: var(--warning); background: linear-gradient(90deg, rgba(245,158,11,.10), transparent 60%); }
.dc-title.plain { color: #f2f3f5; }
.dc-h3 { display: block; font-size: 1rem; font-weight: 800; color: #f2f3f5; margin: 4px 0 2px; }
.dc-sub { display: block; font-size: .72rem; color: #949ba4; }
.dc-code { background: #1e1f22; border-radius: 3px; padding: 0 4px; font-size: .82em; }
.dc-btn { display: inline-flex; align-items: center; gap: 6px; }
.dc-emo { font-size: 1rem; line-height: 1; }
.dc-ext { width: 14px; height: 14px; opacity: .8; }
.dbd-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dbd-vars .chip { font-family: var(--mono, monospace); font-size: .74rem; padding: 2px 8px; }
.dbd-img input { flex: 1; min-width: 0; }
.db-msgs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.db-mgroup { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.db-mitem { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; background: none; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.db-mitem:hover { background: rgba(255,255,255,.04); }
.db-mitem.on { background: rgba(197,48,48,.14); border-color: rgba(197,48,48,.4); }
.db-cmd { border-bottom: 1px solid var(--line); padding: 6px 0; }
.db-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 4px 0; }
.db-rule.sub { padding-left: 18px; }
.db-rule-name { min-width: 190px; display: flex; flex-direction: column; gap: 2px; }
.db-rule-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1; }
.db-rule-ctl.inherit { opacity: .4; pointer-events: none; }
.db-rule-ctl select { max-width: 230px; }
.r-groups { display: flex; flex-wrap: wrap; gap: 4px 10px; }
@media (max-width: 1100px) { .db-msgs { grid-template-columns: 1fr; } }
.r-groups.off { opacity: .35; pointer-events: none; }

/* Bot Discord : sélecteurs à étiquettes (rôles, salons, membres, mots) */
.dbp { position: relative; }
.dbp-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--navy-950, #070d1a); cursor: text; }
.dbp-box:focus-within { border-color: rgba(197,48,48,.6); box-shadow: 0 0 0 3px rgba(197,48,48,.15); }
.dbp-q { flex: 1; min-width: 140px; border: 0 !important; background: none !important; box-shadow: none !important; padding: 4px !important; outline: none; color: inherit; }
.dbp-chip { --c: #94a3b8; display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font-size: .8rem; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, #fff); max-width: 100%; }
.dbp-chip img { width: 18px; height: 18px; border-radius: 50%; }
.dbp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #94a3b8); flex: none; }
.dbp-x { border: 0; background: rgba(255,255,255,.08); color: inherit; width: 18px; height: 18px; border-radius: 50%; line-height: 1; cursor: pointer; font-size: .9rem; display: grid; place-items: center; padding: 0; }
.dbp-x:hover { background: rgba(239,68,68,.5); color: #fff; }
.dbp-menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow: auto; background: var(--navy-850, #0f1b32); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); padding: 4px; }
.dbp-opt { --c: #94a3b8; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; font-size: .86rem; padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.dbp-opt:hover { background: rgba(255,255,255,.06); }
.dbp-opt img { width: 22px; height: 22px; border-radius: 50%; }
.dbp-opt .grow { color: color-mix(in srgb, var(--c) 55%, #fff); }
.dbp-hint { padding: 10px; font-size: .8rem; color: var(--muted); }
.dbp.single .dbp-chip ~ .dbp-q { min-width: 60px; }

/* Bot Discord : cartes de protection, phrases, barre d'enregistrement */
.db-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.db-sec-col { display: flex; flex-direction: column; gap: 12px; }
.db-sec-col .section-title { margin: 0 0 2px; }
.db-feat { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; transition: opacity .2s; }
.db-feat-head { display: flex; align-items: flex-start; gap: 12px; }
.db-feat-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; font-size: 1.15rem; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.db-feat.off .db-feat-body { opacity: .4; pointer-events: none; }
.db-feat.off .db-feat-ic { filter: grayscale(1); opacity: .6; }
.db-feat-body { padding-left: 50px; display: flex; flex-direction: column; gap: 10px; }
.db-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; }
.db-inline { padding: 6px 8px !important; text-align: center; font-weight: 700; }
.db-inline-sel { width: auto !important; padding: 6px 10px !important; }
.db-seg { flex-wrap: wrap; }
.db-savebar { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--navy-900, #0b1426) 92%, transparent); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
@media (max-width: 1000px) { .db-sec { grid-template-columns: 1fr; } .db-feat-body { padding-left: 0; } }

/* Tickets : catégories, questions, aperçu du menu Discord */
.tk-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px dashed var(--line); border-radius: 9px; }
.tk-q input[type=text], .tk-q .tkq-l, .tk-q .tkq-p { min-width: 150px; }
.dc-select { margin-top: 6px; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 6px; font-family: "gg sans", "Noto Sans", Inter, sans-serif; color: #dbdee1; font-size: .86rem; overflow: hidden; }
.dc-select-ph { display: flex; justify-content: space-between; padding: 10px 12px; color: #949ba4; border-bottom: 1px solid #1e1f22; }
.dc-select-opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; }
.dc-select-opt:hover { background: #35373c; }
.dc-select-opt .muted { color: #949ba4 !important; }
.t-cat.t-dc { background: rgba(88,101,242,.22); color: #c9cdfb; border-color: rgba(88,101,242,.45); }
.db-msgs .an-layout { grid-template-columns: minmax(0, 1fr) 400px; } @media (max-width: 1500px) { .db-msgs .an-layout { grid-template-columns: 1fr; } .db-msgs .an-preview { position: static; max-height: none; } }


/* Giveaways */
.dc-btn.primary { background: #5865f2; }
.gw-card.done { opacity: .85; }
.gw-img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.gw-img.ph { display: grid; place-items: center; font-size: 1.3rem; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.gw-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.gw-bar span { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #e04848); border-radius: 99px; }
.gw-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gw-step button { width: 34px; height: 34px; border: 0; background: rgba(255,255,255,.05); color: inherit; font-size: 1.1rem; cursor: pointer; }
.gw-step button:hover { background: rgba(255,255,255,.1); }
.gw-step b { min-width: 38px; text-align: center; }
.gw-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; max-height: 460px; overflow: auto; padding-right: 2px; }
.gw-person { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.gw-person:hover { background: rgba(255,255,255,.04); }
.gw-person[hidden] { display: none; }
.gw-person.win { border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.08); }
.gw-person .avatar { width: 34px; height: 34px; flex: none; }
.gw-person-n { width: 22px; flex: none; text-align: center; font-size: .72rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.gw-person-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gw-person-t b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-person-t span { font-size: .68rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-person .icon-btn { opacity: .5; }
.gw-person:hover .icon-btn { opacity: 1; }

/* Sanctions */
.sa-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) 2fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.sa-row:hover { background: rgba(255,255,255,.02); }
.sa-meta { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 800px) { .sa-row { grid-template-columns: 1fr; } }

/* Apparence */
.ap-img { display: flex; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.ap-thumb { width: 96px; height: 60px; flex: none; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #1e1f22; border: 1px solid var(--line); }
.ap-thumb.round { width: 60px; border-radius: 50%; }
.ap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ap-sw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-swc { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.ap-swc.on { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent); }
.ap-swc.custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.ap-swc.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ap-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ap-st { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: none; color: inherit; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.ap-st.on { border-color: rgba(197,48,48,.6); background: rgba(197,48,48,.12); }
.ap-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ap-profile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: #232428; color: #f2f3f5; }
.ap-av { position: relative; width: 52px; height: 52px; flex: none; }
.ap-av img { width: 52px; height: 52px; border-radius: 50%; }
.ap-dot.big { position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border: 3px solid #232428; }
@media (max-width: 700px) { .ap-status { grid-template-columns: repeat(2, 1fr); } }


/* Équipe v2 */
.tm-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.tm-act { display: flex; flex-direction: column; gap: 6px; }
.tm-spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; padding: 4px 6px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.tm-spark i { flex: 1; min-width: 4px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #f87171, #c53030); opacity: .9; }
.tm-spark i.z { background: rgba(255,255,255,.08); }
.tm-spark i:hover { opacity: 1; filter: brightness(1.25); }
.tm-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tm-tl li { display: flex; align-items: center; gap: 8px; font-size: .8rem; min-width: 0; }
.tm-tl li b { font-weight: 700; color: var(--text); }
.tm-tl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #64748b; }
.tm-tl-dot.red { background: #ef4444; } .tm-tl-dot.blue { background: #3b82f6; } .tm-tl-dot.green { background: #22c55e; }
.tm-more { border: 0; background: none; color: var(--muted); font: inherit; font-size: .76rem; font-weight: 700; padding: 6px 0 0; cursor: pointer; }
.tm-more:hover { color: var(--text); }
.tm-add { align-items: center; justify-content: center; text-align: center; gap: 8px; border-style: dashed; background: none; color: inherit; font: inherit; cursor: pointer; min-height: 220px; }
.tm-add:hover { border-color: rgba(197,48,48,.6); background: rgba(197,48,48,.05); }
.tm-add-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(197,48,48,.15); color: #f87171; }
.tm-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tm-perm, .tm-role { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.tm-perm:hover, .tm-role:hover { background: rgba(255,255,255,.03); }
.tm-perm:has(input:checked), .tm-role:has(input:checked) { border-color: rgba(197,48,48,.6); background: rgba(197,48,48,.08); }
.tm-perm > span, .tm-role > span { display: flex; flex-direction: column; gap: 2px; }
.tm-perm input, .tm-role input { margin-top: 3px; accent-color: #c53030; }
.tm-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-role:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.tm-sec { padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .tm-roles { grid-template-columns: 1fr; } }


/* Giveaways : conditions */
.gw-cond { display: flex; flex-direction: column; gap: 8px; }
.gw-cond-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); transition: border-color .15s, background .15s; }
.gw-cond-row.on { border-color: rgba(197,48,48,.45); background: rgba(197,48,48,.06); }
.gw-cond-row:first-child { align-items: flex-start; }
.gw-cond-row:first-child.on { border-color: var(--line); background: rgba(255,255,255,.015); }
.gw-cond-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 1.05rem; }
.gw-cond-val { display: flex; align-items: center; gap: 6px; flex: none; transition: opacity .15s; }
.gw-cond-row:not(.on) .gw-cond-val { opacity: .45; }
.gw-quick.on { border-color: rgba(34,197,94,.6); background: rgba(34,197,94,.12); color: #86efac; }
@media (max-width: 560px) { .gw-cond-row { flex-wrap: wrap; } .gw-cond-val { margin-left: 46px; } }

@media (max-width: 700px) { .gw-people { max-height: none; overflow: visible; } }


/* Mots interdits : listes toutes faites */
.bw-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.bw-pack { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); transition: border-color .15s, background .15s; }
.bw-pack.on { border-color: rgba(197,48,48,.55); background: rgba(197,48,48,.08); }
.bw-pack-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.05); }
.link-btn { border: 0; background: none; padding: 0; color: #93c5fd; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bw-words { display: flex; flex-wrap: wrap; gap: 6px; max-height: 420px; overflow: auto; }
.bw-word { padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: .78rem; }


/* Bot Discord : aperçu */
.ov-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(88,101,242,.16), rgba(197,48,48,.08) 60%, transparent); }
.ov-hero.paused { background: linear-gradient(135deg, rgba(245,158,11,.14), transparent 70%); }
.ov-av { position: relative; flex: none; }
.ov-av img, .ov-av-ph { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: #1e1f22; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.ov-dot { position: absolute; right: 1px; bottom: 1px; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; border: 3px solid var(--card-solid); box-shadow: 0 0 10px rgba(34,197,94,.6); }
.ov-hero.paused .ov-dot { background: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,.5); }
.ov-name { margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff; }
.ov-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: .84rem; color: var(--muted); }
.ov-sub img { width: 18px; height: 18px; border-radius: 6px; }
.ov-lat { font-weight: 700; } .ov-lat.green { color: #4ade80; } .ov-lat.amber { color: #fbbf24; } .ov-lat.red { color: #f87171; }
.ov-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 14px 0; }
.ov-kpi { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; min-width: 0; }
a.ov-kpi:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.ov-kpi-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.05); font-size: 1.1rem; }
.ov-kpi.green .ov-kpi-ic { background: rgba(34,197,94,.13); } .ov-kpi.red .ov-kpi-ic { background: rgba(239,68,68,.13); } .ov-kpi.blue .ov-kpi-ic { background: rgba(59,130,246,.13); }
.ov-kpi.amber .ov-kpi-ic { background: rgba(245,158,11,.13); } .ov-kpi.pink .ov-kpi-ic { background: rgba(236,72,153,.13); }
.ov-kpi b { display: block; font-size: 1.25rem; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ov-kpi div > span { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ov-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-bottom: 14px; }
.ov-grid > .card { margin: 0; }
.ov-bars { height: 150px; }
.ov-axis { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: -4px; }
.ov-empty { display: flex; align-items: center; gap: 14px; padding: 22px 16px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.ov-empty > span { font-size: 1.8rem; opacity: .7; }
.ov-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ov-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); }
.ov-checks li.ko { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.07); }
.ov-checks li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ov-checks b { font-size: .84rem; } .ov-checks li > div > span { font-size: .76rem; color: var(--muted); }
.ov-ck { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 900; background: rgba(34,197,94,.16); color: #4ade80; }
.ko .ov-ck { background: rgba(245,158,11,.2); color: #fbbf24; }
.ov-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ov-mod { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; font-size: .86rem; background: rgba(255,255,255,.015); }
.ov-mod > span:first-child { font-size: 1.05rem; }
.ov-mod b { flex: 1; font-weight: 700; }
a.ov-mod:hover { border-color: var(--line-strong); background: rgba(255,255,255,.04); }
.ov-mod.off { opacity: .5; }
.ov-go { color: var(--muted); font-size: 1.1rem; }
.ov-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1200px) { .ov-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .ov-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ov-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ov-hero > .grow { flex: 1 1 calc(100% - 84px); } .ov-hero > .btn { width: 100%; justify-content: center; } .ov-sub > span:nth-of-type(odd) { display: none; } .ov-sub { gap: 4px 10px; } }


/* Bugs signalés */
.tabs .n.zero, .tabs button[aria-selected="true"] .n.zero { background: rgba(255,255,255,.08); color: var(--muted); }
.bg-chan { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; }
.bg-chan .grow { display: flex; flex-direction: column; gap: 2px; }
.bg-chan-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.bg-chan-dot.on { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.bg-chan-dot.off { background: #64748b; box-shadow: none; }
.amber-txt { color: #fbbf24; }
.bg-how { display: flex; flex-direction: column; gap: 16px; }
.bg-how-head { display: flex; gap: 14px; align-items: center; }
.bg-how-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: rgba(34,197,94,.12); color: #4ade80; }
.bg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; counter-reset: st; }
.bg-steps li { counter-increment: st; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 14px 52px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.bg-steps li::before { content: counter(st); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; background: rgba(197,48,48,.18); color: #fca5a5; }
.bg-steps b { font-size: .88rem; } .bg-steps span { font-size: .78rem; color: var(--muted); }
@media (max-width: 1100px) { .bg-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bg-steps { grid-template-columns: 1fr; } }


/* Avis clients */
.rv-sum { display: grid; grid-template-columns: auto 1.4fr 1.6fr; gap: 22px; align-items: center; margin-bottom: 14px; }
.rv-score { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-right: 22px; border-right: 1px solid var(--line); }
.rv-score > b { font-size: 2.4rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.rv-dist { display: flex; flex-direction: column; gap: 4px; }
.rv-row { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font: inherit; font-size: .78rem; padding: 2px 4px; border-radius: 6px; cursor: pointer; text-align: left; }
.rv-row:hover, .rv-row.on { background: rgba(255,255,255,.05); }
.rv-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.rv-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.rv-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rv-kpis div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.rv-kpis div.warn { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.08); }
.rv-kpis b { display: block; font-size: 1.15rem; color: #fff; } .rv-kpis span { font-size: .72rem; color: var(--muted); }
.rv-count { margin: 0 0 8px 2px; }
.rv-card.pending { border-color: rgba(245,158,11,.45); }
.rv-head { display: flex; align-items: center; gap: 10px; }
.rv-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, #c53030, #7c3aed); color: #fff; }
.rv-head .grow { display: flex; flex-direction: column; }
.rv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-text { margin: 0; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv-text.open { display: block; }
@media (max-width: 1000px) { .rv-sum { grid-template-columns: 1fr 1fr; } .rv-kpis { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); } .rv-score { border: 0; padding: 0; } }
@media (max-width: 560px) { .rv-sum { grid-template-columns: 1fr; } .rv-kpis { grid-template-columns: repeat(2, 1fr); } }


/* ===== Passe visuelle globale ===== */
/* compteurs en haut des pages */
.page-stats .ps { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; transition: border-color .15s, transform .15s; }
.page-stats a.ps:hover { transform: translateY(-1px); }
.page-stats .ps-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.05); font-size: 1.05rem; }
.page-stats .ps.green .ps-ic { background: rgba(34,197,94,.13); } .page-stats .ps.red .ps-ic { background: rgba(239,68,68,.13); }
.page-stats .ps.amber .ps-ic { background: rgba(245,158,11,.13); } .page-stats .ps.blue .ps-ic { background: rgba(59,130,246,.13); }
.page-stats .ps-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.page-stats .ps-t b { line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-stats .ps-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* pages vides */
.empty { gap: 8px; padding: 46px 18px; }
.empty-ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; margin-bottom: 4px;
  background: radial-gradient(circle at 30% 25%, rgba(197,48,48,.22), rgba(88,101,242,.12) 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.empty .empty-ic svg { width: 30px; height: 30px; color: #cbd5e1; }
.empty > .small { max-width: 460px; line-height: 1.5; }
/* tableaux */
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: rgba(255,255,255,.025); }
.table td.cl-mail { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* tickets : les 6 onglets visibles (2 lignes) */
.inbox-tools .tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); overflow: visible; }
.inbox-tools .tabs button { justify-content: center; }
.tk-home { display: flex; flex-direction: column; gap: 18px; padding: 28px; max-width: 640px; margin: 0 auto; width: 100%; justify-content: center; min-height: 100%; }
.tk-home-head { display: flex; align-items: center; gap: 14px; }
.tk-home-head strong { font-size: 1.1rem; color: #fff; }
.tk-home-head .empty-ic { margin: 0; width: 52px; height: 52px; border-radius: 16px; } .tk-home-head .empty-ic svg { width: 24px; height: 24px; color: #cbd5e1; }
.tk-ks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tk-k { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.tk-k > span { font-size: 1rem; } .tk-k b { font-size: 1.3rem; color: #fff; font-variant-numeric: tabular-nums; } .tk-k small { font-size: .72rem; color: var(--muted); }
.tk-k.warn { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.07); } .tk-k.hot { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.07); }
.tk-wait { display: flex; flex-direction: column; gap: 6px; }
.tk-wait-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; color: inherit; text-decoration: none; font-size: .84rem; min-width: 0; }
.tk-wait-row:hover { border-color: var(--line-strong); background: rgba(255,255,255,.03); text-decoration: none; }
.tk-wait-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .tk-ks { grid-template-columns: repeat(2, 1fr); } .tk-home { padding: 16px; } }


/* Barres d'onglets (hubs) : alignées sur le contenu, onglet actif plus doux */
.hub-tabs { max-width: 1400px; margin-left: auto; margin-right: auto; }
.hub-tabs a { transition: background .15s, color .15s; }
.hub-tabs a.on { background: linear-gradient(180deg, rgba(197,48,48,.32), rgba(197,48,48,.16)); box-shadow: inset 0 0 0 1px rgba(239,68,68,.55); color: #fff; }
.hub-tabs a.on svg { color: #fca5a5; }
/* Réglages : onglets avec icône et contenu */
.set-tabs button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; transition: background .15s; }
.set-tabs button.on { background: linear-gradient(180deg, rgba(197,48,48,.32), rgba(197,48,48,.16)); box-shadow: inset 0 0 0 1px rgba(239,68,68,.55); }
.set-tabs .st-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.06); }
.set-tabs button.on .st-ic { background: rgba(239,68,68,.25); color: #fecaca; }
.set-tabs .st-t { display: flex; flex-direction: column; min-width: 0; }
.set-tabs .st-t b { font-size: .86rem; } .set-tabs .st-t small { font-size: .7rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-tabs button.on .st-t small { color: #fecaca; }
@media (max-width: 900px) { .set-tabs .st-t small { display: none; } .set-tabs button { min-width: 0; justify-content: center; } }
/* Journal d'activité */
.chip-btn.on { border-color: rgba(239,68,68,.6); background: rgba(197,48,48,.16); color: #fff; }
.au-day + .au-day { margin-top: 14px; }
.au-day-h { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; text-transform: capitalize; }
.au-rows { display: flex; flex-direction: column; }
.au-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 6px; border-radius: 10px; }
.au-row:hover { background: rgba(255,255,255,.03); }
.au-row.danger .au-act { color: #fca5a5; }
.au-time { width: 42px; flex: none; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 6px; }
.au-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #c53030, #7c3aed); }
.au-main { min-width: 0; flex: 1; font-size: .86rem; padding-top: 3px; }
.au-act { font-weight: 600; }
.au-det { margin-top: 2px; overflow-wrap: anywhere; }

/* Audience : autant de colonnes que de cartes */
.au-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }


/* Publications */
.pb-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pb-new-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02);
  color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.pb-new-btn:hover { border-color: rgba(239,68,68,.5); background: rgba(197,48,48,.07); transform: translateY(-1px); }
.pb-new-btn > span { font-size: 1.4rem; } .pb-new-btn b { font-size: .92rem; } .pb-new-btn small { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.pb-list { display: flex; flex-direction: column; gap: 8px; }
.pb-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.pb-row .grow { display: flex; flex-direction: column; }
.pb-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 1.1rem; }
.pb-opt { display: grid; grid-template-columns: minmax(170px, 1.3fr) 80px minmax(140px, 1.2fr) minmax(110px, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.pb-opt > * { min-width: 0; }
@media (max-width: 800px) { .pb-opt { grid-template-columns: 1fr 80px; } .pb-opt > :nth-child(3), .pb-opt > :nth-child(4) { grid-column: 1 / -1; } }
.pb-sel { display: flex; justify-content: space-between; align-items: center; max-width: 420px; padding: 10px 12px; border-radius: 8px; background: #1e1f22; color: #b5bac1; font-size: .86rem; border: 1px solid #111214; }
.dc-btn.st-primary { background: #5865f2; } .dc-btn.st-success { background: #248046; } .dc-btn.st-danger { background: #da373c; }
.pb-imp { max-height: 360px; overflow: auto; padding: 12px; border-radius: 12px; background: #313338; }


/* Échelle de sanctions */
.lad-step { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); }
.lad-step select { width: auto; }
.lad-n { font-size: .84rem; color: var(--muted); }
#lad-card.lad-off #lad-steps { opacity: .5; }


/* Suggestions */
.sg-list { display: flex; flex-direction: column; gap: 10px; }
.sg-card { display: flex; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.015); }
.sg-card.is-hidden { opacity: .65; }
.sg-votes { width: 58px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.04); text-align: center; }
.sg-votes b { font-size: 1.2rem; color: #fff; } .sg-votes b.pos { color: #4ade80; } .sg-votes b.neg { color: #f87171; }
.sg-votes small { font-size: .68rem; color: var(--muted); line-height: 1.4; }
.sg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.sg-edit { display: grid; grid-template-columns: 170px 1fr 1fr auto auto; gap: 8px; align-items: center; }
.sg-edit > * { min-width: 0; }
@media (max-width: 1000px) { .sg-edit { grid-template-columns: 1fr 1fr; } }


/* Aperçu Discord : émojis du serveur */
.dc-emoji { width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -.3em; margin: 0 .05em; }
.dc-h1 .dc-emoji, .dc-h2 .dc-emoji, .dc-h3 .dc-emoji { width: 1.2em; height: 1.2em; vertical-align: -.22em; }
.dc-emo .dc-emoji { width: 1.1rem; height: 1.1rem; vertical-align: -.2em; margin: 0; }


/* Menu de rôles par réaction */
.pb-reacts { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-react { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; background: rgba(88,101,242,.15); border: 1px solid rgba(88,101,242,.6); font-size: .9rem; }
.pb-react b { font-size: .78rem; color: #c9cdfb; } .pb-react.bad { border-color: rgba(239,68,68,.6); background: rgba(239,68,68,.1); }
.pb-react .dc-emoji, .pb-ic .dc-emoji { width: 1.2rem; height: 1.2rem; vertical-align: middle; margin: 0; }
.pb-pairs { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }


/* Bot Discord : menu par thème */
.db-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.db-main { min-width: 0; }
.db-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; padding: 12px 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.db-nav-g { display: flex; flex-direction: column; gap: 2px; }
.db-nav-h { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 10px 4px; opacity: .8; }
.db-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--muted);
  font: inherit; font-size: .86rem; font-weight: 700; text-align: left; cursor: pointer; position: relative; transition: background .15s, color .15s; }
.db-nav button svg { flex: none; opacity: .85; }
.db-nav button:hover { background: rgba(255,255,255,.05); color: #fff; }
.db-nav button.on { background: linear-gradient(90deg, rgba(197,48,48,.26), rgba(197,48,48,.08)); color: #fff; }
.db-nav button.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #ef4444; }
.db-nav button.on svg { color: #fca5a5; opacity: 1; }
@media (max-width: 1100px) {
  .db-shell { grid-template-columns: 1fr; gap: 12px; }
  .db-nav { position: static; flex-direction: row; gap: 10px; overflow-x: auto; padding: 8px; scrollbar-width: thin; }
  .db-nav-g { flex-direction: row; align-items: center; gap: 2px; flex: none; padding-right: 10px; border-right: 1px solid var(--line); }
  .db-nav-g:last-child { border-right: 0; }
  .db-nav-h { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0 4px; font-size: .58rem; }
  .db-nav button { width: auto; white-space: nowrap; padding: 8px 10px; }
  .db-nav button.on::before { left: 8px; right: 8px; top: auto; bottom: 2px; width: auto; height: 2px; border-radius: 2px; }
}

/* Bot Discord : menu remis en haut (groupes côte à côte) */
.db-shell { grid-template-columns: 1fr; gap: 14px; }
.db-nav { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding: 6px 8px; overflow: visible; }
.db-nav-g { flex-direction: row; align-items: center; gap: 2px; flex: none; padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--line); }
.db-nav-g:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.db-nav-h { writing-mode: horizontal-tb; transform: none; padding: 0 6px 0 4px; font-size: .58rem; }
.db-nav button { width: auto; white-space: nowrap; padding: 8px 10px; }
.db-nav button.on::before { left: 10px; right: 10px; top: auto; bottom: 1px; width: auto; height: 2px; border-radius: 2px; }
@media (max-width: 1100px) {
  .db-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .db-nav-h { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0 4px; }
}

@media (min-width: 1101px) { .db-nav-h { display: none; } .db-nav button { padding: 8px 9px; gap: 7px; font-size: .84rem; } .db-nav-g { padding-right: 6px; margin-right: 2px; } }
@media (min-width: 1101px) { .db-nav { gap: 6px 2px; padding: 5px 6px; } .db-nav button { padding: 7px 7px; gap: 6px; font-size: .8rem; } .db-nav button svg { width: 15px; height: 15px; } .db-nav-g { padding-right: 4px; margin-right: 2px; gap: 0; } }

/* Bot Discord : barre sur une seule ligne (défile si l'écran est trop étroit) */
.db-nav { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
@media (min-width: 1101px) { .db-nav { gap: 0; padding: 5px 6px; justify-content: space-between; } .db-nav-g { gap: 0; padding-right: 3px; margin-right: 3px; } .db-nav button { padding: 7px 6px; gap: 5px; font-size: .78rem; } .db-nav button svg { width: 14px; height: 14px; } }
@media (min-width: 1101px) { .db-nav button { padding: 7px 5px; gap: 4px; } .db-nav-g { padding-right: 2px; margin-right: 2px; } .db-nav-g + .db-nav-g { padding-left: 2px; } }
@media (min-width: 1101px) { .db-nav { padding: 5px 2px; } }
@media (min-width: 1101px) { .db-nav { justify-content: flex-start; } .db-nav-g { flex-shrink: 0; flex-basis: auto; } .db-nav-g button { flex: 1 1 auto; justify-content: center; } }


/* Suggestions : interrupteur propre + message d'accueil */
.sg-switch, .sg-welcome { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.sg-switch .grow, .sg-welcome .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-switch.on { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.07); }
.sg-w-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.05); }


/* Menu par réactions : indication de l'émoji */
.pb-rhint { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); white-space: nowrap; }
.pb-rhint .dc-emo { font-size: 18px; line-height: 1; }
.pb-rhint.bad { color: #f87171; }


/* Concepteur de messages : boutons liens sur une ligne, réordonnables */
.dbd-btns { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
.dbd-btn { display: grid; grid-template-columns: 22px 56px minmax(120px, 1fr) minmax(160px, 1.6fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.dbd-btn input { min-width: 0; }
.dbd-bemo { text-align: center; font-size: 18px; padding-left: 6px !important; padding-right: 6px !important; }
.dbd-bnum { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--muted); font-size: 11px; font-weight: 700; }
.dbd-bact { display: flex; gap: 4px; }
.dbd-bact .icon-btn:disabled { opacity: .3; cursor: default; }
@container (max-width: 640px) {
  .dbd-btn { grid-template-columns: 22px 56px 1fr; }
  .dbd-burl { grid-column: 2 / -1; }
  .dbd-bact { grid-column: 2 / -1; justify-content: flex-end; }
}


/* Version : carte du bot Discord */
.ver-bot-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 4px 0 2px; }
.ver-bot-head .grow { min-width: 220px; }
.ver-bot:has(.ver-bot-head.ok) { border-color: rgba(34,197,94,.35); background: linear-gradient(135deg, rgba(34,197,94,.08), transparent 60%), var(--card); }
.ver-bot:has(.ver-bot-head.warn) { border-color: rgba(245,158,11,.4); background: linear-gradient(135deg, rgba(245,158,11,.08), transparent 60%), var(--card); }
.ver-bot:has(.ver-bot-head.info) { border-color: rgba(59,130,246,.4); background: linear-gradient(135deg, rgba(59,130,246,.08), transparent 60%), var(--card); }
.ver-bot .ver-ico { background: rgba(255,255,255,.06); color: var(--muted); }
.ver-bot-head.ok .ver-ico { background: rgba(34,197,94,.15); color: #4ade80; }
.ver-bot-head.warn .ver-ico { background: rgba(245,158,11,.15); color: #fcd34d; }
.ver-bot-head.info .ver-ico { background: rgba(59,130,246,.15); color: #93c5fd; }
.ver-bot-head h2 { font-size: 1.3rem; }
.ver-bot .grid-2 { border-top: 1px solid var(--line); padding-top: 14px; }

.vt-dot.gray { background: #6b7280; box-shadow: 0 0 0 4px rgba(107,114,128,.15); }


/* Version du bot : hébergement (Pterodactyl) */
.ver-host-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ver-host-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.ver-host-stats b { font-size: 1.05rem; }
.ver-host-stats .green-txt { color: #4ade80; } .ver-host-stats .red-txt { color: #f87171; } .ver-host-stats .blue-txt { color: #93c5fd; } .ver-host-stats .amber-txt { color: #fcd34d; } .ver-host-stats .gray-txt { color: var(--muted); }


/* Hébergement du bot : étapes d'un redémarrage / arrêt */
.ver-host-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid rgba(59,130,246,.35); border-radius: 12px; background: rgba(59,130,246,.07); }
.ver-host-steps .vhs { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.04); }
.ver-host-steps .vhs.on { color: #93c5fd; background: rgba(59,130,246,.16); }
.ver-host-steps .vhs.done { color: #4ade80; background: rgba(34,197,94,.12); }
.ver-host-steps .muted { margin-left: auto; }
.vhs-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: vhs-spin .8s linear infinite; display: inline-block; }
@keyframes vhs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vhs-spin { animation: none; } }


/* Réglages › IA & coûts : cartes des assistants */
.ai-card { display: flex; flex-direction: column; gap: 16px; }
.ai-head { display: flex; align-items: flex-start; gap: 14px; }
.ai-head-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-head-t p { margin: 0; max-width: 820px; }
.ai-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, rgba(220,38,38,.22), rgba(220,38,38,.06)); color: #fca5a5; border: 1px solid rgba(220,38,38,.25); }
.ai-ic svg { width: 22px; height: 22px; }
.ai-head > .switch { margin-top: 4px; }
.ai-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ai-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ai-cols { grid-template-columns: 1fr; } }
.ai-sec { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.015); min-width: 0; }
.ai-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-sec-h b { font-size: .92rem; }
.ai-sec textarea { min-height: 220px; }
.ai-limits { display: flex; flex-direction: column; }
.ai-lim { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); cursor: default; }
.ai-lim:last-child { border-bottom: 0; }
.ai-lim span { font-size: .88rem; display: flex; flex-direction: column; }
.ai-lim small { color: var(--muted); font-size: .74rem; }
.ai-lim input { width: 96px; flex: none; text-align: right; }
.ai-en { background: linear-gradient(135deg, rgba(59,130,246,.08), transparent 70%); border-color: rgba(59,130,246,.25); }
.ai-abuse { background: linear-gradient(135deg, rgba(239,68,68,.07), transparent 70%); border-color: rgba(239,68,68,.22); }
.ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-card .chat-usage div { position: relative; background: rgba(255,255,255,.02); }
.cu-bar { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.cu-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #f59e0b); }
.ai-logbox .chat-log { max-height: 460px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.ai-logbox .chat-log > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.ai-logbox .chat-log > div.hors_sujet { border-color: rgba(245,158,11,.3); }
.ai-logbox .chat-log > div.pause { border-color: rgba(239,68,68,.3); opacity: .85; }
.ai-logbox .cl-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ai-logbox .cl-a { margin: 4px 0; font-size: .86rem; color: var(--muted); }
.ai-logbox em { font-size: .74rem; color: var(--muted); font-style: normal; }
.seg-sm button { padding: 4px 10px; font-size: .78rem; }
.seg-sm small { opacity: .7; margin-left: 2px; }


/* Réglages : mêmes cartes partout (en-tête, options, pied) */
.ai-head > .seg, .ai-head > .btn, .ai-head > a.btn { flex: none; align-self: center; }
@media (max-width: 760px) { .ai-head { flex-wrap: wrap; } .ai-head > .seg { width: 100%; } }
.ai-foot:has(> .muted:empty) { justify-content: flex-end; }
.set-logo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.015); }
.set-logo img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.05); border: 1px solid var(--line); flex: none; }
.set-steps summary { cursor: pointer; }
.set-steps ol { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.set-steps code { word-break: break-all; }


/* Bandeau promo : modèles en vignettes */
.bn-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.bn-pre { display: flex; flex-direction: column; gap: 4px; padding: 8px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); color: inherit; cursor: pointer; transition: border-color .15s, transform .15s, background .15s; }
.bn-pre:hover { border-color: var(--line-strong, rgba(255,255,255,.2)); transform: translateY(-1px); }
.bn-pre.on { border-color: rgba(220,38,38,.6); background: rgba(220,38,38,.08); box-shadow: 0 0 0 1px rgba(220,38,38,.35) inset; }
.bn-pre-bar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 9px; border-radius: 9px; color: #fff; font-size: .7rem; margin-bottom: 4px; overflow: hidden; }
.bn-pre-bar b { text-transform: uppercase; font-weight: 900; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-pre-bar i { font-style: normal; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: #fff; color: #111827; white-space: nowrap; font-size: .65rem; }
.bn-pre-bar.t-red { background: linear-gradient(90deg, #7f1d1d, #c53030, #7f1d1d); }
.bn-pre-bar.t-rose { background: linear-gradient(90deg, #9d174d, #ec4899, #9d174d); }
.bn-pre-bar.t-blue { background: linear-gradient(90deg, #1e3a8a, #2563eb, #1e3a8a); }
.bn-pre-bar.t-green { background: linear-gradient(90deg, #14532d, #16a34a, #14532d); }
.bn-pre-bar.t-gold { background: linear-gradient(90deg, #78350f, #d97706, #78350f); }
.bn-pre-bar.t-dark { background: linear-gradient(90deg, #0b1426, #1a365d, #0b1426); }
.bn-pre-t { font-weight: 700; font-size: .86rem; padding: 0 2px; }
.bn-pre-d { font-size: .74rem; color: var(--muted); padding: 0 2px; }


/* ===== Téléphone : corrections d'affichage du panel ===== */
/* Champs date / heure : sur iPhone ils gardaient une largeur fixe et débordaient de la carte */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { -webkit-appearance: none; appearance: none; width: 100%; text-align: left; }
  /* Onglets des réglages : une seule ligne qui défile, plus de libellés coupés en morceaux ni de page élargie */
  .set-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-tabs button { flex: none; min-width: 0; padding: 7px 10px; gap: 8px; }
  .set-tabs .st-ic { width: 28px; height: 28px; }
  .set-tabs .st-t b { white-space: nowrap; font-size: .82rem; }
  /* Mode maintenance : interrupteur à droite du texte, pas en dessous */
  .maint-box { flex-wrap: nowrap; padding: 14px; gap: 12px; }
  /* Chiffres clés : libellés sur deux lignes au lieu d'être coupés (« Relances (3… ») */
  .page-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-stats .ps { padding: 10px 12px; gap: 10px; }
  .page-stats .ps-t span { white-space: normal; overflow: visible; line-height: 1.25; }
  .page-stats .ps-ic { width: 30px; height: 30px; }
  /* Cartes des réglages plus compactes */
  .ai-card { gap: 12px; }
  .ai-head { gap: 10px; }
  .ai-ic { width: 38px; height: 38px; border-radius: 11px; }
  .ai-sec { padding: 12px; }
  .ai-foot { justify-content: stretch; }
  .ai-foot > .row { width: 100%; }
  .ai-foot > .row > .btn { flex: 1; justify-content: center; }
  .ai-lim input { width: 80px; }
  /* Tableaux en cartes : le contenu de droite peut passer à la ligne proprement */
  table.table.responsive td > div { min-width: 0; text-align: right; }
}


/* ===== Ticket : en-tête plus lisible, gestion repliable sur téléphone ===== */
.t-meta { margin-top: 3px; overflow-wrap: anywhere; }
.t-meta b { color: var(--text); font-weight: 700; }
.t-client { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 9px; border-radius: 99px; border: 1px solid rgba(96,165,250,.35); background: rgba(59,130,246,.1); color: #9ec5ff; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.t-client:hover { background: rgba(59,130,246,.18); }
.t-human { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.1); color: #fecaca; font-size: .84rem; }
.t-manage > summary { display: none; }
.t-manage-body { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) {
  .reply-intents { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .reply-intents::-webkit-scrollbar { display: none; }
  .reply-intents .ri-lbl { display: none; }
}
@media (max-width: 900px) {
  .inbox { height: calc(100dvh - 58px - 32px - 3px); }
  .t-manage { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
  .t-manage > summary { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; cursor: pointer; list-style: none; }
  .t-manage > summary::-webkit-details-marker { display: none; }
  .t-manage-l { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .84rem; }
  .t-manage-l::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .15s; }
  .t-manage[open] .t-manage-l::after { transform: rotate(180deg); }
  .t-sum { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-manage[open] .t-sum { display: none; }
  .t-manage-body { padding: 4px 12px 12px; }
  .chat-head h2 { font-size: .98rem; }
  /* Zone de réponse : modèles, pièce jointe et « Envoyer » sur une ligne ; les autres actions en dessous, en pastilles */
  .reply { padding: 10px; gap: 8px; }
  .reply-bar { gap: 6px; flex-wrap: wrap; }
  .rb-tools { flex-wrap: nowrap; }
  .reply-bar select { max-width: none; flex: 1; min-width: 0; }
  .rb-send { width: 100%; justify-content: flex-end; }
  .rb-close span { display: none; }
}


/* Codes promo : mode modification et codes expirés */
section.cpn-editing { border-color: rgba(59,130,246,.45); box-shadow: 0 0 0 1px rgba(59,130,246,.25) inset; }
#cpn-title .cpn-code { font-size: .85rem; vertical-align: middle; }
.dev-row.cpn-past { opacity: .6; }

/* Liens dans les messages des tickets : lisibles sur toutes les bulles */
.msg .bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; overflow-wrap: anywhere; }
.msg .bubble a:hover { opacity: .85; }


/* Tickets : modifier / supprimer un message (administrateurs) */
.msg .meta { position: relative; }
.msg-tools { display: inline-flex; gap: 2px; margin-left: 6px; opacity: 0; transition: opacity .15s; vertical-align: middle; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
@media (hover: none) { .msg-tools { opacity: .7; } }
.msg-tool { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer; padding: 0; }
.msg-tool:hover { color: #fff; background: rgba(255,255,255,.1); }
.msg-tool.danger:hover { color: #fecaca; background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.4); }
.msg-tool svg { width: 13px; height: 13px; }
.msg-edited { color: var(--muted); font-style: italic; cursor: help; }
.msg-editbox { display: flex; flex-direction: column; gap: 6px; width: min(640px, 100%); }
.msg.staff .msg-editbox, .msg.ai .msg-editbox { align-self: flex-end; }
.msg-editbox textarea { width: 100%; }
.msg-editbox { width: 100%; max-width: 720px; }
.msg-editbox > .row { flex-wrap: wrap; }
.msg-editbox > .row > .grow { flex: 1 1 100%; }


/* Coûts de l'IA : choix du modèle */
.aic-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding: 12px; border: 1px solid rgba(96,165,250,.3); border-radius: 12px; background: rgba(59,130,246,.06); }


/* Publicités : estimation */
.ads-sl { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.ads-sl small { color: var(--muted); }
.ads-sl input[type=range] { width: 100%; accent-color: #ef4444; }
.ads-est { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ads-est > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 2px; }
.ads-est b { font-size: 1.1rem; color: #fff; }
.ads-est span { font-size: .74rem; color: var(--muted); }

/* ================= Retexture IA ================= */
.rx-list { display: grid; gap: 8px; }
.rx-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.rx-item:hover { border-color: var(--line-strong); background: rgba(255,255,255,.04); }
.rx-item img, .rx-noimg { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: #6e6e78; flex: none; display: grid; place-items: center; }
.rx-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; }
.rx-brief-a p { margin: 4px 0 0; white-space: pre-wrap; }
.rx-ref { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 4px 8px 4px 4px; border-radius: 8px; border: 1px solid var(--line); }
.rx-ref img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.rx-texs-a { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; margin-top: 14px; }
.rx-src { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #6e6e78; }
.rx-compare { position: relative; width: 100%; max-height: 75vh; border-radius: 10px; overflow: hidden; background: #6e6e78; user-select: none; }
.rx-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.rx-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.rx-after::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.6); z-index: 1; }
.rx-compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.rx-lbl { position: absolute; top: 8px; padding: 3px 9px; border-radius: 99px; background: rgba(7,13,26,.75); color: #fff; font-size: .72rem; font-weight: 700; pointer-events: none; }
.rx-lbl.l { left: 8px; } .rx-lbl.r { right: 8px; }
.rx-changes ul { margin: 6px 0 0; padding-left: 18px; font-size: .8rem; }
.amber-txt { color: #fcd34d; }
html[data-theme="light"] .amber-txt { color: #b45309; }
.rx-wh { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.08); }
.rx-wh.ok { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.07); }
.rx-qa { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.06); }
.rx-qa.ko { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.08); }
.rx-qa ul { margin: 6px 0 0; padding-left: 18px; }

/* Liens morts (404) */
.dl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.dl-kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.dl-kpi b { font-size: 24px; font-weight: 900; }
.dl-kpi span { color: var(--muted); font-size: 12.5px; }
.dl-kpi.hot { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); }
.dl-kpi.hot b { color: #f87171; }
.dl-path { font-size: 12.5px; word-break: break-all; }
.dl-hot { color: #f87171; }
.dl-ref { display: inline-flex; gap: 4px; align-items: center; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,.06); }
.dl-ref em { font-style: normal; color: var(--muted); }
.dl-last { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-act { white-space: nowrap; text-align: right; }
.dl-builtin { margin-top: 12px; }
.dl-bl { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; }
@media (max-width: 900px) { .dl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Bot Discord › Commandes personnalisées */
.cc-name { display: flex; align-items: center; border: 1px solid var(--line, #2a3550); border-radius: 10px; overflow: hidden; }
.cc-name span { padding: 0 4px 0 12px; font-weight: 800; color: var(--muted, #8a94ad); }
.cc-name input { border: 0 !important; box-shadow: none !important; padding-left: 2px; font-family: ui-monospace, Consolas, monospace; }
.pb-row.cc-off { opacity: .6; }
.cc-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-act > .dbp { flex: 1 1 220px; min-width: 0; }
.cc-act > .db-seg { flex: none; }
/* Avis : produit concerné (étoiles Google) */
.rv-kpis div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rv-prod { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.rv-prod select { flex: 1; min-width: 0; padding: 5px 8px; font-size: .8rem; }

/* Mon profil : double authentification */
.tf-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; }
.tf-qr { display: grid; place-items: center; min-height: 216px; padding: 8px; border-radius: 14px; background: #fff; width: 216px; margin: 0 auto; }
.tf-qr img, .tf-qr canvas { display: block; }
.tf-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tf-codes code { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); text-align: center; font-size: .95rem; letter-spacing: .04em; user-select: all; }

/* Santé du site › Sauvegardes */
.bk-list { display: grid; gap: 6px; }
.bk-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.bk-row .grow { display: grid; }
.bk-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.05); flex: none; }

/* Bot Discord › Membres : fiche d'un membre */
.mb-search { display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 12px; border: 1px solid var(--line); border-radius: 12px; }
.mb-search input { flex: 1; border: 0 !important; box-shadow: none !important; background: none; }
.mb-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.mb-hit { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: inherit; text-align: left; cursor: pointer; }
.mb-hit:hover { border-color: var(--line-strong, #3a4560); background: rgba(255,255,255,.05); }
.mb-hit img { width: 34px; height: 34px; border-radius: 50%; }
.mb-hit span { display: grid; min-width: 0; }
.mb-hit small { color: var(--muted); }
.mb-head { display: flex; gap: 16px; align-items: center; }
.mb-av { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.mb-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mb-role { --c: #99aab5; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: .75rem; font-weight: 700; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.mb-role::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; }
.mb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.mb-kpis div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card, rgba(255,255,255,.02)); display: grid; }
.mb-kpis b { font-size: 1.25rem; }
.mb-kpis span { color: var(--muted); font-size: .78rem; }
.mb-list { display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.mb-list > * { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: inherit; }
@media (max-width: 640px) { .mb-head { flex-direction: column; text-align: center; } .mb-roles { justify-content: center; } }
/* Bot › Aperçu : graphique 30 jours (jours vides discrets, le graphique occupe la hauteur de la carte) */
.db-bar.zero span { background: rgba(255,255,255,.08); }
.ov-grid > .card .ov-bars { flex: 1; min-height: 150px; height: auto; }

/* Codes promo & fidélité : onglets, recherche et filtres */
.cpn-tabs { margin-bottom: 14px; flex-wrap: wrap; }
.cpn-sec { max-width: 980px; }
.cpn-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cpn-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 12px; border: 1px solid var(--line); border-radius: 10px; }
.cpn-search input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: none; }
.cpn-list { max-height: 640px; overflow: auto; }
.cpn-list .dev-row[hidden] { display: none; }

/* Santé du site › résultat de la tâche planifiée */
.cron-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 60vh; overflow: auto; font-size: .85rem; }
.cron-out li { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.03); }
.cron-out li.bad { background: rgba(239,68,68,.12); color: #fca5a5; }
/* Codes promo : filtre Actifs / Expirés / Tous (contrôle segmenté) */
.cpn-seg { flex: none; }
.cpn-seg button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; transition: background .15s, color .15s; }
.cpn-seg button:not(.on):hover { background: rgba(255,255,255,.05); }
.cpn-seg button.on { background: linear-gradient(180deg, #e04848, #c53030); box-shadow: 0 4px 14px rgba(197,48,48,.35); }
.cpn-n { min-width: 22px; padding: 1px 7px; border-radius: 99px; font-size: .72rem; font-weight: 800; text-align: center; background: rgba(255,255,255,.08); color: var(--text); }
.cpn-seg button.on .cpn-n { background: rgba(255,255,255,.22); color: #fff; }
.cpn-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cpn-dot.green { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.cpn-dot.gray { background: #64748b; }
.cpn-seg button.on .cpn-dot { background: #fff; box-shadow: none; }

/* Liens morts : tentatives de piratage bloquées */
.dl-scans { margin: 12px 0; padding: 0; overflow: hidden; border-color: rgba(34,197,94,.3); background: linear-gradient(90deg, rgba(34,197,94,.08), transparent 70%); }
.dl-scans summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
.dl-scans summary::-webkit-details-marker { display: none; }
.dl-shield { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(34,197,94,.15); font-size: 1.2rem; flex: none; }
.dl-scan-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.dl-scan-list span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border-radius: 8px; border: 1px solid var(--line); font-size: .76rem; }
.dl-scan-list code { color: var(--muted); }
.dl-scan-list em { font-style: normal; font-weight: 800; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.07); }
.dl-scan-kpis { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; font-size: .78rem; }
.dl-scan-kpis > span { padding: 2px 9px; border-radius: 99px; background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.22); color: var(--muted); }
.dl-scan-kpis b { color: #fff; }
.dl-scan-kpis > span.muted { background: none; border-color: transparent; }

/* Système › Tentatives bloquées */
.sl-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sl-bars { height: 90px; }
.sl-bars .db-bar span { background: linear-gradient(180deg, #4ade80, #16a34a); }
.sl-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.sl-kchip { position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; text-align: left; }
.sl-kchip b { margin-left: auto; position: relative; z-index: 1; }
.sl-kchip i { position: absolute; left: 0; bottom: 0; height: 3px; background: #22c55e; opacity: .7; }
.sl-kchip:hover { border-color: rgba(34,197,94,.45); }
.sl-kchip.on { border-color: #22c55e; background: rgba(34,197,94,.12); }
.sl-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.sl-table td { vertical-align: top; }
.sl-path { word-break: break-all; font-size: .78rem; }
.sl-ip, .sl-kind { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-size: .8rem; cursor: pointer; text-align: left; }
.sl-ip { font-family: ui-monospace, Consolas, monospace; color: #93c5fd; }
.sl-ip:hover, .sl-kind:hover { text-decoration: underline; }
.sl-ips { display: grid; gap: 6px; }
.sl-iprow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sl-iprow span { grid-column: 1; }
.sl-iprow b { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.sl-iprow:hover, .sl-iprow.on { border-color: rgba(147,197,253,.5); background: rgba(147,197,253,.06); }
@media (max-width: 1000px) { .sl-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Scripts FiveM (licences FPhone / FTablet) */
.fv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fv-head h2 { margin: 0; font-size: 1.25rem; } .fv-head p { margin: 4px 0 0; font-size: .88rem; }
.fv-prod { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(148,163,184,.12); color: var(--text); white-space: nowrap; }
.fv-prod.fphone { background: rgba(56,189,248,.14); color: #7dd3fc; } .fv-prod.ftablet { background: rgba(129,140,248,.16); color: #a5b4fc; }
.fv-ev { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.fv-ev i { font-style: normal; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: .78rem; background: rgba(148,163,184,.12); }
.fv-ev.green i { background: rgba(34,197,94,.14); } .fv-ev.red i { background: rgba(224,72,72,.15); } .fv-ev.amber i { background: rgba(245,158,11,.15); } .fv-ev.blue i { background: rgba(96,165,250,.14); }
.fv-empty { padding: 34px 16px; } .fv-empty svg { width: 30px; height: 30px; opacity: .5; } .fv-empty strong { color: var(--text); } .fv-empty span { font-size: .85rem; max-width: 420px; }
.fv-dash-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.fv-pcard { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(148,163,184,.04); display: grid; gap: 10px; }
.fv-pnums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fv-pnums div { display: grid; } .fv-pnums b { font-size: 1.2rem; font-weight: 900; color: var(--text); } .fv-pnums span { font-size: .72rem; color: var(--muted); }
.fv-bar { display: flex; height: 7px; border-radius: 99px; overflow: hidden; background: rgba(148,163,184,.14); }
.fv-bar.thin { height: 5px; flex: 1; }
.fv-bar i, .fv-legend i { display: block; height: 100%; } .fv-bar i.a, .fv-legend i.a { background: #22c55e; } .fv-bar i.u, .fv-legend i.u { background: #60a5fa; } .fv-bar i.r, .fv-legend i.r { background: #64748b; }
.fv-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .74rem; color: var(--muted); } .fv-legend span { display: inline-flex; align-items: center; gap: 6px; } .fv-legend i { width: 9px; height: 9px; border-radius: 3px; }
.fv-todo { display: grid; gap: 8px; }
.fv-todo-it { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(148,163,184,.04); }
.fv-todo-it > div { flex: 1; display: grid; gap: 2px; min-width: 0; } .fv-todo-it b { font-size: .88rem; color: var(--text); } .fv-todo-it small { font-size: .78rem; color: var(--muted); }
.fv-todo-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(148,163,184,.12); color: var(--muted); }
.fv-todo-ico.blue { background: rgba(96,165,250,.14); color: #60a5fa; } .fv-todo-ico.amber { background: rgba(245,158,11,.15); color: #f59e0b; } .fv-todo-ico.green { background: rgba(34,197,94,.14); color: #22c55e; }
.fv-ok { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(34,197,94,.08); color: #22c55e; font-weight: 700; font-size: .9rem; } .fv-ok svg { width: 20px; height: 20px; }
.fv-mini { display: grid; gap: 6px; }
.fv-mini-it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.fv-mini-it:hover { border-color: var(--line-strong); } .fv-mini-it code { font-size: .78rem; } .fv-mini-it .muted { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fv-tl li { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fv-tl li:last-child { border-bottom: 0; }
.fv-tl li > div { display: grid; gap: 2px; min-width: 0; font-size: .85rem; } .fv-tl small { color: var(--muted); font-size: .74rem; } .fv-tl code { font-size: .76rem; }
.fv-tl.compact li { grid-template-columns: minmax(140px, auto) 1fr; padding: 6px 0; }
.fv-link { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .fv-link:hover code { text-decoration: underline; }
.fv-more { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--info); text-decoration: none; }
.fv-vers { display: grid; gap: 8px; }
.fv-vers-it { display: grid; grid-template-columns: minmax(200px, 260px) 1fr 44px; gap: 12px; align-items: center; font-size: .85rem; }
.fv-vers-l { display: inline-flex; align-items: center; gap: 8px; } .fv-vers-n { text-align: right; }
.fv-vers-b { height: 10px; border-radius: 99px; background: rgba(148,163,184,.12); overflow: hidden; } .fv-vers-b i { display: block; height: 100%; border-radius: 99px; background: #f59e0b; } .fv-vers-b i.ok { background: #22c55e; }
.fv-tools { padding: 12px 14px; margin-bottom: 0; display: grid; gap: 10px; }
.fv-search { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; max-width: 460px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(148,163,184,.06); color: var(--muted); }
.fv-search input { border: 0 !important; background: none !important; box-shadow: none !important; padding: 9px 0 !important; flex: 1; min-width: 0; }
.fv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.fv-chip span { font-size: .72rem; padding: 1px 7px; border-radius: 99px; background: rgba(148,163,184,.14); }
.fv-chip:hover { color: var(--text); border-color: var(--line-strong); } .fv-chip.on { background: var(--red); border-color: var(--red); color: #fff; } .fv-chip.on span { background: rgba(255,255,255,.22); }
#fvl-bulk:empty { display: none; }
.fv-bulk { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--card-solid); border: 1px solid rgba(224,72,72,.45); box-shadow: var(--shadow); }
.fv-bulk b { font-size: .88rem; } .fv-bulk-acts { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.btn.danger { color: #f87171; } .btn.danger:hover { border-color: rgba(224,72,72,.5); }
.fv-table-card { padding: 0; overflow: hidden; }
.fv-table td { vertical-align: middle; } .fv-table tbody tr { cursor: pointer; transition: background .12s; }
.fv-table tbody tr:hover { background: rgba(148,163,184,.05); } .fv-table tbody tr.sel { background: rgba(224,72,72,.08); }
.fv-cb { width: 34px; } .fv-cb input { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.fv-keycell { display: flex; align-items: center; gap: 10px; } .fv-keycell > div { display: grid; gap: 2px; min-width: 0; }
.fv-keycell code { font-size: .8rem; letter-spacing: .02em; color: var(--text); white-space: nowrap; background: none; border: 0; padding: 0; } .fv-keycell small { font-size: .74rem; color: var(--muted); }
.fv-src { display: block; font-size: .72rem; color: var(--muted); margin-top: 3px; } .fv-src.warn { color: #f59e0b; font-weight: 700; }
.fv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #64748b; margin-right: 7px; vertical-align: 1px; } .fv-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.fv-skip { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .85rem; }
.fv-seg { flex-wrap: wrap; } .fv-seg label { position: relative; cursor: pointer; } .fv-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fv-seg span { display: block; font-size: .82rem; font-weight: 700; padding: 7px 13px; border-radius: 7px; color: var(--muted); }
.fv-seg label:hover span { color: var(--text); } .fv-seg input:checked + span { background: var(--red); color: #fff; } .fv-seg input:focus-visible + span { box-shadow: var(--focus); }
.fv-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fv-pick-it { position: relative; cursor: pointer; } .fv-pick-it input { position: absolute; opacity: 0; }
.fv-pick-it > span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); transition: border-color .15s, background .15s; }
.fv-pick-it small { color: var(--muted); font-size: .78rem; } .fv-pick-it input:checked + span { border-color: var(--red); background: rgba(224,72,72,.08); } .fv-pick-it input:focus-visible + span { box-shadow: var(--focus); }
.fv-keys-out { padding: 12px 14px; border-radius: 12px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); display: grid; gap: 8px; }
.fv-keys-out pre { margin: 0; font-size: .85rem; white-space: pre-wrap; user-select: all; }
.fv-d-key { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(148,163,184,.08); border: 1px solid var(--line); }
.fv-d-key code { flex: 1; font-size: 1rem; letter-spacing: .05em; overflow-wrap: anywhere; color: var(--text); }
.fv-d-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; } .fv-d-acts { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fv-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 16px 0; }
.fv-d-grid dt { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.fv-d-grid dd { margin: 0; font-size: .88rem; overflow-wrap: anywhere; } .fv-d-grid small { display: block; color: var(--muted); font-size: .75rem; margin-top: 2px; }
.fv-d-h { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 18px 0 8px; }
.fv-d-others { display: grid; gap: 6px; }
.fv-d-other { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.fv-d-other code { flex: 1; font-size: .8rem; } .fv-d-other:hover { border-color: var(--line-strong); }
.fv-split { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); align-items: start; }
.fv-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.fv-gift { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(148,163,184,.04); display: grid; gap: 9px; } .fv-gift.off { opacity: .62; }
.fv-gift-h, .fv-gift-f, .fv-gift-u { display: flex; align-items: center; gap: 8px; } .fv-gift .spacer { flex: 1; }
.fv-gift-h code { font-size: .95rem; font-weight: 700; letter-spacing: .05em; color: var(--text); } .fv-gift-m { font-size: .82rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fv-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.fv-review { display: grid; gap: 10px; align-content: start; } .fv-review .spacer, .fv-discord .spacer { flex: 1; }
.fv-review-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fv-review-h > div { display: grid; } .fv-review-h small { color: var(--muted); font-size: .75rem; }
.fv-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--red), #6366f1); color: #fff; flex: none; }
.fv-stars { color: #fbbf24; font-size: 1.1rem; letter-spacing: 2px; } .fv-stars span { color: rgba(148,163,184,.35); }
.fv-review h3 { margin: 0; font-size: .98rem; } .fv-review p { margin: 0; font-size: .88rem; white-space: pre-wrap; line-height: 1.5; }
#fvr-f button[data-n]::after { content: attr(data-n); margin-left: 6px; font-size: .7rem; opacity: .75; }
.fv-vcard { gap: 14px; border-top: 3px solid #38bdf8; } .fv-vcard.ftablet { border-top-color: #818cf8; }
.fv-minv { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(148,163,184,.06); }
.fv-minv > div { flex: 1; display: grid; gap: 2px; } .fv-minv small { color: var(--muted); font-size: .76rem; } .fv-minv input { width: 110px; text-align: center; font-family: Consolas, monospace; }
.fv-vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fv-vlist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; } .fv-vlist li.cur { background: rgba(34,197,94,.07); }
.fv-vlist li > div { flex: 1; display: grid; } .fv-vlist small { color: var(--muted); font-size: .74rem; }
.fv-discord { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fv-discord > div { display: grid; gap: 2px; } .fv-discord small { color: var(--muted); font-size: .8rem; }
.fv-launch { display: flex; align-items: center; gap: 16px; border-color: rgba(96,165,250,.3); background: linear-gradient(135deg, rgba(96,165,250,.1), transparent 60%), var(--card); }
.fv-launch.on { border-color: rgba(34,197,94,.4); background: linear-gradient(135deg, rgba(34,197,94,.12), transparent 60%), var(--card); }
.fv-launch > div:nth-child(2) { flex: 1; display: grid; gap: 4px; } .fv-launch small { color: var(--muted); font-size: .84rem; }
.fv-launch-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(96,165,250,.15); color: #60a5fa; flex: none; } .fv-launch.on .fv-launch-ico { background: rgba(34,197,94,.15); color: #22c55e; }
.fv-launch-links { display: flex; gap: 14px; margin-top: 4px; } .fv-launch-links a { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--info); text-decoration: none; }
@media (max-width: 1100px) { .fv-dash-main, .fv-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .fv-d-grid, .fv-pick { grid-template-columns: 1fr; } .fv-vers-it { grid-template-columns: 1fr 40px; } .fv-vers-b { grid-column: 1 / -1; grid-row: 2; }
  .fv-tl li, .fv-tl.compact li { grid-template-columns: 1fr; gap: 4px; } .fv-reviews { grid-template-columns: 1fr; } .fv-search { max-width: none; }
  .fv-table td.fv-cb { position: absolute; right: 14px; } .fv-table tr { position: relative; } .fv-launch { flex-wrap: wrap; }
}
html[data-theme="light"] .fv-prod.fphone { color: #0369a1; } html[data-theme="light"] .fv-prod.ftablet { color: #4338ca; }
html[data-theme="light"] .btn.danger { color: #c53030; }

.fv-who { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.fv-who small { font-size: .74rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.fv-actor { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(148,163,184,.12); color: var(--text); white-space: nowrap; }
.fv-actor.staff { background: rgba(224,72,72,.14); color: #fca5a5; } .fv-actor.customer { background: rgba(96,165,250,.14); color: #93c5fd; }
.fv-actor.server { background: rgba(34,197,94,.13); color: #86efac; } .fv-actor.tebex { background: rgba(245,158,11,.14); color: #fcd34d; } .fv-actor.legacy { background: rgba(167,139,250,.15); color: #c4b5fd; }
html[data-theme="light"] .fv-actor.staff { color: #b91c1c; } html[data-theme="light"] .fv-actor.customer { color: #1d4ed8; } html[data-theme="light"] .fv-actor.server { color: #15803d; }
html[data-theme="light"] .fv-actor.tebex { color: #b45309; } html[data-theme="light"] .fv-actor.legacy { color: #6d28d9; }
.fv-who-c { display: inline-flex; align-items: center; gap: 4px; }
.fv-who-c .fv-link { color: var(--info); font-weight: 700; } .fv-cl { color: var(--info); text-align: left; }
.fv-filt { border: 0; background: none; color: var(--muted); padding: 2px; border-radius: 6px; cursor: pointer; opacity: .55; display: inline-grid; place-items: center; }
.fv-filt:hover { opacity: 1; color: var(--text); background: rgba(148,163,184,.12); } .fv-filt svg { width: 13px; height: 13px; }
.fv-active { display: flex; gap: 6px; flex-wrap: wrap; } .fv-active:empty { display: none; } .fv-active .fv-chip svg { width: 12px; height: 12px; }
.fv-date { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); } .fv-date input { width: auto; padding: 6px 8px; }
.fv-journal td { vertical-align: top; }
.fv-d-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fv-legacy tr.done { opacity: .6; }

/* FShield : protection des serveurs FiveM */
.sh-ids { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sh-ids code { font-size: .72rem; padding: 1px 6px; border-radius: 6px; background: rgba(148,163,184,.12); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-pre { white-space: pre-wrap; word-break: break-all; padding: 10px 12px; border-radius: 10px; background: rgba(148,163,184,.1); border: 1px solid var(--line); font-size: .8rem; margin: 8px 0; user-select: all; }
#sh-f .field, #sh-e .field, .modal .field { display: flex; flex-direction: column; gap: 6px; }
.sh-mini-kpi > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(148,163,184,.06); }
.sh-mini-kpi span { font-size: .72rem; color: var(--muted, #94a3b8); }
.sh-mini-kpi b { font-size: 1rem; }
.sh-sheet .fv-d-h { margin: 10px 0 2px; }
.sh-tok { display: inline-flex; align-items: center; gap: 8px; }
.sh-row { align-items: stretch; }
.sh-row > .card { display: flex; flex-direction: column; }
.sh-setup { border-color: rgba(245,158,11,.45); background: linear-gradient(180deg, rgba(245,158,11,.07), transparent 60%); display: flex; flex-direction: column; gap: 10px; }
.sh-wait { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: #f5b14a; }
.sh-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.sh-steps li { padding-left: 4px; line-height: 1.5; }
.sh-steps .sh-pre { margin: 8px 0; }
.sh-sec { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: rgba(148,163,184,.04); }
.sh-sec > summary { cursor: pointer; font-weight: 700; padding: 2px 0; }
.sh-sec[open] > summary { margin-bottom: 10px; }
.sh-sec > .grid, .sh-sec > .row, .sh-sec > .check, .sh-sec > p { margin-top: 8px; }
.sh-tagbox { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; font-weight: 600; cursor: pointer; }
.sh-tag input { width: 14px; height: 14px; margin: 0; accent-color: var(--red); }
.sh-tag:has(input:checked) { background: rgba(224,72,72,.12); border-color: rgba(224,72,72,.5); }
.sh-notes { display: flex; flex-direction: column; gap: 8px; }
.sh-note { padding: 8px 12px; border-radius: 10px; background: rgba(148,163,184,.08); border-left: 3px solid #f5b14a; }
.sh-note p { margin: 0 0 4px; white-space: pre-wrap; font-size: .88rem; }
.sh-note small { color: var(--muted, #94a3b8); font-size: .74rem; }
.sh-meter { display: block; width: 90px; height: 6px; border-radius: 6px; background: rgba(148,163,184,.18); overflow: hidden; }
.sh-meter i { display: block; height: 100%; background: #94a3b8; }
.sh-meter i.a { background: #f59e0b; } .sh-meter i.r { background: #e04848; }
.sh-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-rank li { display: flex; align-items: center; gap: 10px; }
.sh-rank li > :last-child { margin-left: auto; }
.sh-rank-n { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 800; background: rgba(148,163,184,.15); }
.sh-rank li:nth-child(1) .sh-rank-n { background: rgba(245,177,74,.3); } .sh-rank li:nth-child(2) .sh-rank-n { background: rgba(203,213,225,.25); } .sh-rank li:nth-child(3) .sh-rank-n { background: rgba(180,120,70,.3); }
.sh-diagwarn { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #f5b14a; font-size: .74rem; font-weight: 600; }
.sh-diag { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.sh-diag li { display: grid; grid-template-columns: 24px 210px 1fr; gap: 8px; align-items: baseline; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.sh-diag li.ko b { color: #f5b14a; }
@media (max-width: 640px) { .sh-diag li { grid-template-columns: 24px 1fr; } .sh-diag li > :last-child { grid-column: 2; } }
.sh-click { cursor: pointer; } .sh-click:hover td { background: rgba(148,163,184,.05); }
/* FShield 1.3 : cartes serveur, activité en direct, journal par jour */
.sh-srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.sh-srv { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(148,163,184,.07), rgba(148,163,184,.02) 55%); overflow: hidden; }
.sh-srv::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: #64748b; }
.sh-srv.on::before { background: linear-gradient(90deg, #22c55e, #16a34a); }
.sh-srv.new::before { background: linear-gradient(90deg, #f59e0b, #f5b14a); }
.sh-srv header { display: flex; align-items: center; gap: 10px; }
.sh-srv-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sh-srv-t b { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-srv-t small { color: var(--muted, #94a3b8); font-size: .74rem; }
.sh-dot { width: 10px; height: 10px; border-radius: 50%; background: #64748b; flex: none; }
.sh-srv.on .sh-dot { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: shPulse 2s infinite; }
.sh-srv.new .sh-dot { background: #f59e0b; }
@keyframes shPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.sh-srv-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sh-srv-n { display: flex; flex-direction: column; }
.sh-srv-n b { font-size: 2.1rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.sh-srv-n span { font-size: .78rem; color: var(--muted, #94a3b8); margin-top: 4px; }
.sh-srv-n small { font-size: .72rem; color: var(--muted, #94a3b8); }
.sh-spark { width: 168px; height: 46px; flex: none; }
.sh-spark .a { fill: rgba(224,72,72,.16); } .sh-spark .l { fill: none; stroke: #e04848; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sh-srv.on .sh-spark .a { fill: rgba(34,197,94,.14); } .sh-srv.on .sh-spark .l { stroke: #22c55e; }
.sh-spark.empty { display: grid; place-items: center; font-size: .72rem; color: var(--muted, #94a3b8); border: 1px dashed var(--line); border-radius: 10px; }
.sh-srv-health { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; padding: 7px 10px; border-radius: 10px; }
.sh-srv-health.ok { color: #4ade80; background: rgba(34,197,94,.08); }
.sh-srv-health.ko { color: #f5b14a; background: rgba(245,158,11,.08); }
.sh-srv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-chip { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(148,163,184,.12); }
.sh-chip.amber { background: rgba(245,158,11,.15); color: #f5b14a; } .sh-chip.blue { background: rgba(96,165,250,.15); color: #93c5fd; }
.sh-srv footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
.sh-srv footer .spacer { flex: 1; }
.sh-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e04848; margin-right: 6px; vertical-align: middle; animation: shBlink 1.4s infinite; }
@keyframes shBlink { 50% { opacity: .25; } }
.sh-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 420px; overflow: auto; }
.sh-feed li { display: grid; grid-template-columns: 42px auto 1fr auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: .84rem; }
.sh-feed li time { color: var(--muted, #94a3b8); font-size: .74rem; font-variant-numeric: tabular-nums; }
.sh-feed-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-feed li.sh-new { animation: shNew 2.4s ease-out; }
@keyframes shNew { 0% { background: rgba(224,72,72,.22); } 100% { background: transparent; } }
.sh-quick { margin-top: 10px; flex-wrap: wrap; }
.fv-journal tr.sh-day td { background: rgba(148,163,184,.07); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #94a3b8); padding: 8px 14px; }
.fv-journal tr.sh-sev td:first-child { box-shadow: inset 3px 0 0 transparent; }
.fv-journal tr.sh-sev.red td:first-child { box-shadow: inset 3px 0 0 #e04848; }
.fv-journal tr.sh-sev.amber td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.fv-journal tr.sh-sev.green td:first-child { box-shadow: inset 3px 0 0 #22c55e; }
.fv-journal tr.sh-sev.blue td:first-child { box-shadow: inset 3px 0 0 #60a5fa; }
@media (max-width: 640px) { .sh-srv-grid { grid-template-columns: 1fr; } .sh-feed li { grid-template-columns: 38px 1fr; } .sh-feed li > small { display: none; } .sh-spark { width: 120px; } }
.sh-srv.off .sh-spark .a, .sh-srv.new .sh-spark .a { fill: rgba(148,163,184,.12); } .sh-srv.off .sh-spark .l, .sh-srv.new .sh-spark .l { stroke: #94a3b8; }

/* FShield 1.4 : fiche joueur, en direct, statistiques */
.sh-ava { --h: 210; display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; font-weight: 800; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 65% 52%), hsl(calc(var(--h) + 40) 60% 38%)); box-shadow: 0 6px 18px hsla(var(--h), 70%, 40%, .35); }
.sh-ava.sm { width: 34px; height: 34px; border-radius: 10px; font-size: .78rem; box-shadow: none; }
.sh-p { display: flex; flex-direction: column; gap: 14px; }
.sh-p-head { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(148,163,184,.08), rgba(148,163,184,.02)); }
.sh-p-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sh-p-id h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.01em; }
.sh-p-st { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--muted, #94a3b8); }
.sh-p-st i { width: 8px; height: 8px; border-radius: 50%; background: #64748b; flex: none; }
.sh-p-st.on i { background: #22c55e; animation: shPulse 2s infinite; } .sh-p-st.on { color: #cbd5e1; }
.sh-p-st.con i { background: #60a5fa; animation: shBlink 1.2s infinite; }
.sh-p-tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sh-gauge { position: relative; width: 84px; flex: none; display: flex; flex-direction: column; align-items: center; }
.sh-gauge svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.sh-gauge circle { fill: none; stroke-width: 6; }
.sh-gauge .t { stroke: rgba(148,163,184,.15); } .sh-gauge .v { stroke-linecap: round; transition: stroke-dasharray .5s; }
.sh-gauge.g .v { stroke: #22c55e; } .sh-gauge.a .v { stroke: #f59e0b; } .sh-gauge.r .v { stroke: #e04848; }
.sh-gauge b { position: absolute; top: 20px; width: 64px; text-align: center; font-size: 1.05rem; }
.sh-gauge small { font-size: .7rem; font-weight: 700; color: var(--muted, #94a3b8); margin-top: 2px; white-space: nowrap; }
.sh-p-banner { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; }
.sh-p-banner div { flex: 1; display: flex; flex-direction: column; } .sh-p-banner span { font-size: .78rem; opacity: .85; }
.sh-p-banner.red { background: rgba(224,72,72,.12); border: 1px solid rgba(224,72,72,.35); color: #fca5a5; }
.sh-p-banner.green { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #86efac; }
.sh-p-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sh-p-actions .spacer { flex: 1; }
.sh-p-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sh-p-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(148,163,184,.05); }
.sh-p-kpis span { font-size: .74rem; color: var(--muted, #94a3b8); } .sh-p-kpis b { font-size: 1.15rem; } .sh-p-kpis small { font-size: .7rem; color: var(--muted, #94a3b8); }
.sh-p-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); }
.sh-p-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-pill { border: 1px solid var(--line); background: transparent; color: var(--muted, #94a3b8); border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.sh-pill:hover { border-color: rgba(148,163,184,.5); color: #e2e8f0; }
.sh-pill.on.red { background: rgba(224,72,72,.16); border-color: rgba(224,72,72,.5); color: #fca5a5; }
.sh-pill.on.amber { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.5); color: #fcd34d; }
.sh-pill.on.green { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.45); color: #86efac; }
.sh-pill.on.blue { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.45); color: #93c5fd; }
.sh-pill.on.gray { background: rgba(148,163,184,.18); color: #e2e8f0; }
.sh-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 600; cursor: pointer; }
.sh-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sh-switch span { position: relative; width: 36px; height: 20px; border-radius: 999px; background: rgba(148,163,184,.25); transition: background .2s; flex: none; }
.sh-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sh-switch input:checked + span { background: #f59e0b; } .sh-switch input:checked + span::after { transform: translateX(16px); }
.sh-switch input:focus-visible + span { outline: 2px solid #60a5fa; outline-offset: 2px; }
.sh-why { display: flex; flex-wrap: wrap; gap: 6px; } .sh-why span { font-size: .72rem; padding: 3px 9px; border-radius: 8px; background: rgba(245,158,11,.1); color: #fcd34d; }
.sh-p-tabs { align-self: flex-start; }
.sh-cnt { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: .68rem; background: rgba(148,163,184,.2); margin-left: 2px; }
.sh-p-panel { display: flex; flex-direction: column; gap: 10px; }
.sh-p-h { margin: 6px 0 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #94a3b8); }
.sh-compose { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .sh-compose textarea { width: 100%; }
.sh-empty-line { margin: 0; padding: 10px 0; }
.sh-tl { list-style: none; margin: 0; padding: 0 0 0 6px; display: flex; flex-direction: column; }
.sh-tl li { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 9px 0 9px 14px; border-left: 2px solid rgba(148,163,184,.2); }
.sh-tl li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #64748b; border: 2px solid #0b1220; }
.sh-tl li.red::before { background: #e04848; } .sh-tl li.amber::before { background: #f59e0b; } .sh-tl li.green::before { background: #22c55e; } .sh-tl li.blue::before { background: #60a5fa; }
.sh-tl li div { display: flex; flex-direction: column; gap: 2px; font-size: .86rem; } .sh-tl li small { color: var(--muted, #94a3b8); font-size: .72rem; }
.sh-idgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.sh-idc { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(148,163,184,.05); color: inherit; cursor: pointer; min-width: 0; }
.sh-idc:hover { border-color: rgba(148,163,184,.45); } .sh-idc.static { cursor: default; }
.sh-idc span { font-size: .72rem; font-weight: 700; color: var(--muted, #94a3b8); } .sh-idc code { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-linked { display: flex; flex-direction: column; gap: 6px; }
.sh-link-it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; text-align: left; }
.sh-link-it div { flex: 1; display: flex; flex-direction: column; } .sh-link-it small { font-size: .72rem; color: var(--muted, #94a3b8); }
.sh-link-it.ban { border-color: rgba(224,72,72,.4); background: rgba(224,72,72,.06); }
.sh-wait-state { height: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 18px; border-radius: 12px; background: repeating-linear-gradient(135deg, rgba(148,163,184,.03) 0 12px, transparent 12px 24px); }
.sh-wait-state.small { min-height: 110px; }
.sh-wait-ic { font-size: 1.7rem; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: rgba(148,163,184,.1); margin-bottom: 4px; }
.sh-wait-state b { font-size: .95rem; } .sh-wait-state span:last-child { font-size: .8rem; color: var(--muted, #94a3b8); max-width: 380px; }
.sh-kpi { position: relative; overflow: hidden; } .sh-kpi-ic { position: absolute; right: 14px; top: 12px; font-size: 1.3rem; opacity: .8; }
.sh-select { width: auto; min-width: 170px; }
.sh-rank-card .sh-rank li { padding: 6px 0; }
.sh-rank-b { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-rank-bar { height: 5px; border-radius: 4px; background: rgba(148,163,184,.12); overflow: hidden; } .sh-rank-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #22c55e, #60a5fa); }
.sh-rank-v { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.sh-rank-card .sh-rank-n { background: transparent; font-size: .95rem; }
.sh-live-card { display: flex; flex-direction: column; gap: 10px; }
.sh-live-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-dot.on { background: #22c55e; animation: shPulse 2s infinite; }
.sh-live-list { display: flex; flex-direction: column; gap: 6px; }
.sh-live-row { display: grid; grid-template-columns: 44px minmax(220px, 1.6fr) minmax(120px, 1fr) 110px 86px auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(148,163,184,.04); transition: background .15s; }
.sh-live-row:hover { background: rgba(148,163,184,.08); }
.sh-src { display: inline-grid; place-items: center; height: 26px; border-radius: 8px; background: rgba(148,163,184,.12); font-weight: 800; font-size: .78rem; font-variant-numeric: tabular-nums; }
.sh-live-who { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 0; min-width: 0; }
.sh-live-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sh-live-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sh-live-who small { font-size: .72rem; color: var(--muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-live-who:hover b { text-decoration: underline; }
.sh-live-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.sh-live-time { font-size: .82rem; font-variant-numeric: tabular-nums; }
.sh-ping { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-ping i { width: 8px; height: 8px; border-radius: 50%; } .sh-ping.g i { background: #22c55e; } .sh-ping.a i { background: #f59e0b; } .sh-ping.r i { background: #e04848; }
.sh-live-act { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 900px) { .sh-live-row { grid-template-columns: 40px 1fr auto; } .sh-live-badges, .sh-live-time { grid-column: 2; } .sh-ping { grid-column: 3; grid-row: 1; } .sh-live-act { grid-column: 1 / -1; justify-content: flex-start; }
  .sh-p-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-tl li { grid-template-columns: 1fr; } .sh-p-head { flex-wrap: wrap; } }

.sh-tl li:has(.sh-del) { grid-template-columns: 170px 1fr auto; align-items: start; }
.sh-del { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(224,72,72,.35); background: rgba(224,72,72,.08); color: #fca5a5; font-size: .76rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sh-del:hover { background: rgba(224,72,72,.18); border-color: rgba(224,72,72,.6); }
@media (max-width: 900px) { .sh-tl li:has(.sh-del) { grid-template-columns: 1fr; } .sh-del { justify-self: start; } }