/* =====================================================================
   Hub de pilotage — thème « Néon doux »
   Rétro synthwave tamisé : nuit prune, néons rose / cyan adoucis,
   lueurs réservées à l'élément actif. Texte en police système (lisible),
   titres et chiffres en Chakra Petch, logo en Audiowide (SIL OFL, locales).
   ===================================================================== */
@font-face { font-family: "Audiowide"; src: url("fonts/audiowide.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-600.woff") format("woff"); font-weight: 600 700; font-display: swap; }
:root {
  color-scheme: dark;
  --night: #15112A;
  --bg: #15112A;
  --surface: #1D1838;
  --surface-2: #272046;
  --border: #352C5A;
  --grid: #2B2350;
  --text: #EEE9FF;
  --text-2: #D2CAF0;
  --muted: #A39AC9;
  /* Néons adoucis */
  --accent: #FF7AD1;
  --accent-2: #FFA6E0;
  --accent-ink: #2A0A22;
  --accent-soft: rgba(255, 122, 209, .12);
  --magenta: #FF7AD1;
  --cyan: #7DE3F4;
  --violet: #A98BFF;
  --sunset: #FFB86B;
  --sun: #FFD27A;
  /* États */
  --good: #6EE7B7;
  --warning: #FCD34D;
  --serious: #FB923C;
  --critical: #FB7185;
  --good-ink: #86EFC4;
  --critical-ink: #FF9AAA;
  --glow-magenta: 0 0 10px rgba(255, 122, 209, .45);
  --glow-cyan: 0 0 10px rgba(125, 227, 244, .4);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 24px -16px rgba(0, 0, 0, .7);
  --radius: 12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --logo: "Audiowide", "Chakra Petch", ui-sans-serif, sans-serif;
  --sidebar: 248px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
form.inline { display: inline; margin: 0; }

/* ---------- Structure : barre latérale verticale + contenu */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: #120E26;
  border-right: 1px solid var(--border);
}
.sidebar-top { padding: 22px 20px 10px; display: flex; align-items: center; justify-content: space-between; }

/* Logo : pastille émeraude (même dessin que le favicon) + mot « Hub » */
.logo { display: inline-flex; align-items: center; gap: 10px; height: 40px; text-decoration: none !important; color: var(--text); }
.logo-mark { width: 32px; height: 32px; flex: none; display: block; }
.logo-word { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1; color: #F7F3FF; }

.menu-toggle { display: none; }
.side-nav { flex: 1; display: flex; flex-direction: column; padding: 14px 12px 0; overflow-y: auto; position: relative; z-index: 1; }
.side-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-group { margin: 18px 12px 6px; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.side-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--text-2); font-weight: 600; font-size: 15px; text-decoration: none !important;
  border: 1px solid transparent; position: relative;
}
.side-link .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-link:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.side-link.is-active {
  color: #F7F3FF; background: rgba(255, 122, 209, .12);
  border-color: transparent;
}
.side-link.is-active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--magenta); box-shadow: var(--glow-magenta);
}
.side-link.is-active .ico { stroke: var(--accent-2); }
.side-link.is-soon { color: var(--muted); opacity: .55; cursor: default; }
.side-link.is-soon:hover { background: none; }
.side-bottom { margin-top: auto !important; padding: 14px 0 16px !important; border-top: 1px solid rgba(255, 255, 255, .06); }
.side-button { width: 100%; background: none; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }


@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: sticky; height: auto; z-index: 20; overflow: visible; }
  .sidebar-top { padding: 10px 16px; }
  .logo { height: 40px; }
  .logo-mark { width: 28px; height: 28px; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--text); border: 1px solid var(--border); font: inherit; font-weight: 600;
  }
  .menu-toggle .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .side-nav { display: none; padding: 4px 16px 12px; }
  .sidebar.is-open .side-nav { display: flex; }
  .side-link.is-active::before { left: -8px; }
}

/* ---------- Page */
.page { max-width: 1280px; margin: 0 auto; padding: 24px 16px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.h1 { font-size: 26px; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.02em; font-weight: 650; }
.h2 { font-size: 20px; margin: 0 0 8px; font-weight: 650; }
.h3 { font-size: 15px; margin: 0; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.strong { font-weight: 600; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.back { display: inline-block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.empty { color: var(--muted); padding: 8px 0; margin: 0; }
.clamp { max-width: 340px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Cartes */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; min-width: 0;
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.card-narrow { max-width: 420px; margin: 0 auto; }
.card-left { margin: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.grid-2 > .card { margin-bottom: 0; }
.grid-2-wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 900px) { .grid-2, .grid-2-wide { grid-template-columns: 1fr; } }

/* ---------- Indicateurs */
.tiles { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; min-width: 0;
}
.tile-label { color: var(--text-2); font-size: 13px; }
.tile-value { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; white-space: nowrap; }
.tile-value.hero { font-size: 44px; line-height: 1.1; }
@media (max-width: 520px) { .tile-value.hero { font-size: 36px; } }
.tile-delta { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.delta { font-weight: 600; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta-up { color: var(--good-ink); }
.delta-down { color: var(--critical-ink); }
.delta-flat { color: var(--muted); }

/* ---------- Puces de période */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 500;
}
.chip:hover { text-decoration: none; color: var(--text); }
.chip.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }

/* ---------- Graphique */
.chart { position: relative; height: 260px; width: 100%; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--accent); }
.chart .bar.is-hover { fill: var(--text); }
.chart .baseline { stroke: var(--border); stroke-width: 1; }
.chart-tip {
  position: absolute; pointer-events: none; background: var(--text); color: var(--surface);
  padding: 6px 9px; border-radius: 6px; font-size: 12px; line-height: 1.35; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px)); opacity: 0; transition: opacity .08s;
}
.chart-tip.is-on { opacity: 1; }
.chart-tip strong { display: block; font-size: 13px; }
.table-toggle { margin-top: 10px; }
.table-toggle summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.table-toggle table { margin-top: 8px; }

/* ---------- Alertes & statuts */
.alerts { list-style: none; margin: 0; padding: 0; }
.alert { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border); justify-items: start; }
.alert:first-child { border-top: 0; padding-top: 0; }
.alert-title { font-weight: 500; }
.alert-title a { color: var(--text); font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--text-2); }
.status-icon {
  width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #F7F3FF;
}
.status-good .status-icon { background: var(--good); }
.status-warning .status-icon { background: var(--warning); color: #3a2a00; }
.status-serious .status-icon { background: var(--serious); }
.status-critical .status-icon { background: var(--critical); }

/* ---------- Badges d'état */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap;
}
.badge-ok { color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.badge-ok::before { content: "● "; color: var(--good); }
.badge-error { color: var(--critical-ink); border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); }
.badge-error::before { content: "● "; color: var(--critical); }
.badge-importing::before, .badge-pending::before { content: "◐ "; color: var(--accent); }
.badge-todo { border-style: dashed; }
.badge-off { opacity: .7; }

/* ---------- Tableaux */
.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-weight: 500; color: var(--text-2); font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-compact td { padding: 6px 10px; }
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[data-sort]:hover { color: var(--text); }
.table th[aria-sort="descending"]::after { content: " ↓"; }
.table th[aria-sort="ascending"]::after { content: " ↑"; }
.table tr.is-off td { opacity: .55; }
.shop-name { display: block; color: var(--text); font-weight: 600; }

/* ---------- Formulaires */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: 14px; }
.form label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.hint { color: var(--muted); font-weight: 400; font-size: 12px; }
input[type="text"], input[type="url"], input[type="password"], input[type="tel"] {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit;
}
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.segmented { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.segmented legend { font-weight: 500; font-size: 14px; margin-bottom: 6px; padding: 0; }
.segmented label {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-weight: 500;
}
.segmented label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-weight: 600;
  font-size: 14px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-danger { background: transparent; color: var(--critical-ink); border-color: color-mix(in srgb, var(--critical) 50%, var(--border)); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Messages */
.notice { border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--border); background: var(--surface); }
.notice-ok { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); background: color-mix(in srgb, var(--good) 8%, var(--surface)); }
.notice-error { border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); background: color-mix(in srgb, var(--critical) 7%, var(--surface)); }
.notice-info { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.code-block { display: block; margin-top: 8px; padding: 8px 10px; background: var(--surface-2); border-radius: 6px; overflow-x: auto; white-space: nowrap; }

/* ---------- Commandes */
.chips-views { margin-bottom: 14px; }
.chip-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.chip.is-active .chip-count { background: color-mix(in srgb, var(--surface) 25%, transparent); color: var(--surface); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filters input[type="search"] { flex: 1 1 260px; min-width: 0; }
input[type="search"], select {
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; max-width: 100%;
}
.card-flush { padding: 0 20px; }
.card-flush .table-wrap { margin: 0 -20px; padding: 0 20px; }
.pad { padding: 18px 0; }
.orders-table td { font-size: 14px; }
.orders-table .items { min-width: 220px; max-width: 360px; }
.orders-table .items > div { margin-bottom: 2px; }
.qty { font-weight: 600; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.tracking { min-width: 170px; }
.mark { position: relative; display: inline-block; text-align: left; }
.mark summary { list-style: none; }
.mark summary::-webkit-details-marker { display: none; }
.mark[open] summary { filter: brightness(.9); }
.mark-form {
  margin-top: 8px; width: 230px;
  display: grid; gap: 10px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px;
}
.mark[open] { display: block; }
.mark[open] summary { margin-left: auto; width: max-content; }
.mark-form label { display: grid; gap: 4px; font-weight: 500; }
.mark-form input { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; }
.catchup { padding: 12px 18px; }
.catchup summary { cursor: pointer; }
.catchup-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 6px; }
.catchup-form label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
input[type="date"] { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 10px; }
.bulk-bar .check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.col-check { width: 28px; padding-right: 0 !important; }
.col-check input, .bulk-bar input[type="checkbox"] { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }

/* ---------- Produits */
.products-table .thumb { width: 60px; }
.products-table .thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--surface-2); display: block; }
.products-table td { font-size: 14px; }
.ali-cell { min-width: 260px; }
.ali-form { display: flex; gap: 6px; }
.ali-form input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
.ok-dot { color: var(--good); }
.no-dot { color: var(--muted); }
.btn-link { background: none; border: 0; padding: 0 0 0 4px; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
.hint-block { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 14px; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; }

/* Champs de clés : masqués sans être des champs « mot de passe » (sinon le navigateur y colle ses mots de passe) */
input.masked { -webkit-text-security: disc; text-security: disc; font-family: ui-monospace, Menlo, Consolas, monospace; }
input.masked::placeholder { font-family: var(--font); }

/* ---------- Sécurité / double authentification */
.h4 { font-size: 14px; margin: 0; font-weight: 600; }
.input-code { font-size: 20px; letter-spacing: .25em; font-variant-numeric: tabular-nums; max-width: 220px; }
.setup-2fa { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .setup-2fa { grid-template-columns: 1fr; } }
.qr-box { background: #F7F3FF; border-radius: 8px; padding: 6px; border: 1px solid var(--border); line-height: 0; justify-self: start; }
.qr-box svg { width: 200px; height: 200px; }
.steps { padding-left: 20px; margin: 0 0 16px; display: grid; gap: 10px; }
.secret { display: inline-block; margin-top: 6px; padding: 4px 8px; background: var(--surface-2); border-radius: 6px; font-size: 15px; letter-spacing: .05em; word-break: break-all; }
.recovery { border: 1px solid color-mix(in srgb, var(--warning) 60%, var(--border)); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.recovery p { margin: 0 0 10px; }
.recovery-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 720px) { .recovery-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recovery-codes code { display: block; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; text-align: center; font-size: 15px; }
.subcard { border: 1px solid var(--border); border-radius: 8px; padding: 14px; align-content: start; }
.grid-2-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-narrow { max-width: 420px; }
.form-cancel { margin-top: 10px; }

.help ol { padding-left: 20px; margin: 12px 0; display: grid; gap: 8px; }
.danger-zone { border-style: dashed; }
.danger-zone .h3 { margin-bottom: 12px; }

/* ---------- Pages sans menu */
.bare-main { max-width: 460px; margin: 10vh auto 40px; padding: 0 16px; }
.bare .card-narrow { max-width: none; }

/* Affichage par plateforme sur la fiche boutique */
[data-platform="woocommerce"] [data-only="shopify"],
[data-platform="shopify"] [data-only="woocommerce"] { display: none; }

@media (max-width: 720px) {
  .h1 { font-size: 24px; }
}

/* ---------- Tuiles de CA par période (Vue d'ensemble) */
.ca-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
@media (max-width: 1100px) { .ca-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ca-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ca-tile { display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; transition: border-color .1s; }
.ca-tile:hover { text-decoration: none; border-color: var(--accent); }
.ca-tile.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: rgba(255, 122, 209, .08); }
.ca-tile .tile-value { font-size: 26px; }
@media (max-width: 640px) { .ca-tile .tile-value { font-size: 21px; } }
.section-title { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .tiles-3 { grid-template-columns: 1fr; } }
.ca-tile .ttc { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; font-family: var(--font); }
.tile-ht { font-size: 15px; font-weight: 600; color: var(--cyan); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles-4 { grid-template-columns: 1fr; } }

/* Mise en page du contenu (à côté du menu) */
.page { max-width: 1320px; margin: 0; padding: 32px 36px 72px; width: 100%; min-width: 0; }
@media (max-width: 900px) { .page { padding: 20px 16px 56px; } }
.h3, .h4 { font-weight: 600; color: #F7F3FF; }

.delta-up { color: var(--good-ink); }
.delta-down { color: var(--critical-ink); }

/* Boutons */
.btn { border-radius: 10px; font-family: var(--font); letter-spacing: .01em; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-2); filter: none; }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: #30285A; border-color: #4A3F78; }
.btn-ghost { color: var(--text-2); border-color: var(--border); }
.btn-danger { color: var(--critical-ink); border-color: rgba(244, 63, 94, .55); }

/* Puces de filtre */
.chip { background: rgba(255, 255, 255, .03); border-color: var(--border); color: var(--text-2); }
.chip:hover { color: #F7F3FF; border-color: #4A3F78; }
.chip.is-active { background: rgba(255, 122, 209, .14); border-color: rgba(255, 122, 209, .55); color: #FFB3E6; box-shadow: none; }
.chip-count { background: rgba(255, 255, 255, .08); color: var(--text-2); }
.chip.is-active .chip-count { background: rgba(255, 122, 209, .22); color: #FFD1EE; }

/* Champs */
input[type="text"], input[type="url"], input[type="password"], input[type="tel"], input[type="search"], input[type="date"], select,
.mark-form input, .ali-form input {
  background: rgba(14, 10, 30, .55); border-color: var(--border); color: var(--text); font-family: var(--font);
}
input:focus, select:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px rgba(125, 227, 244, .18); }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
::placeholder { color: #7A70A3; }
.segmented label { background: rgba(14, 10, 30, .45); }
.segmented label:has(input:checked) { border-color: var(--magenta); background: rgba(255, 122, 209, .14); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--magenta); }

/* Tableaux */
.table th { color: var(--muted); border-bottom-color: var(--border); }
.table td { border-bottom-color: rgba(53, 44, 90, .6); }
.table tbody tr:hover td { background: rgba(169, 139, 255, .05); }
.shop-name { color: #F7F3FF; }
.alert-title a, .strong { color: #F7F3FF; }

/* Badges & messages */
.badge { background: rgba(255, 255, 255, .04); border-color: var(--border); color: var(--text-2); }
.badge-ok { color: var(--good-ink); border-color: rgba(110, 231, 183, .45); }
.badge-error { color: var(--critical-ink); border-color: rgba(244, 63, 94, .5); }
.badge-importing::before, .badge-pending::before { color: var(--cyan); }
.notice { background: rgba(30, 24, 56, .8); border-color: var(--border); }
.notice-ok { border-color: rgba(110, 231, 183, .5); background: rgba(110, 231, 183, .07); }
.notice-error { border-color: rgba(244, 63, 94, .55); background: rgba(244, 63, 94, .08); }
.notice-info { border-color: rgba(125, 227, 244, .4); background: rgba(125, 227, 244, .06); }
.code-block, .secret, .recovery-codes code { background: rgba(14, 10, 30, .6); }
.recovery { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .5); }
.status-warning .status-icon { color: #2a1600; }

/* Graphique : barres émeraude, survol plus clair */
.chart .grid-line { stroke: rgba(169, 139, 255, .12); }
.chart .baseline { stroke: var(--border); }
.chart .axis-label { fill: var(--muted); font-family: var(--font); }
.chart .bar { fill: var(--accent); }
.chart .bar.is-hover { fill: var(--accent-2); }
.chart-tip { background: #110D24; color: #F7F3FF; border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* Pages sans menu (connexion, installation) */
.bare { min-height: 100vh; overflow-x: hidden; }
.bare-main { position: relative; z-index: 1; text-align: left; }
.bare-logo { width: 56px; height: 56px; margin: 0 auto 12px; }
.bare-logo .logo-mark { width: 56px; height: 56px; }
.brand-lg { display: block; text-align: center; margin-bottom: 22px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #F7F3FF; }

/* Confort visuel : bouton contour (rempli au survol) */
.btn-outline { background: transparent; color: var(--accent-2); border: 1px solid rgba(255, 122, 209, .5); box-shadow: none; }
.btn-outline:hover, details[open] > .btn-outline { background: var(--magenta); color: var(--accent-ink); border-color: var(--magenta); }


/* =====================================================================
   SAV
   ===================================================================== */
input[type="email"], textarea {
  box-sizing: border-box; max-width: 100%;
  width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(14, 10, 30, .55); color: var(--text); font: inherit; font-size: 14px;
}
textarea { line-height: 1.55; resize: vertical; min-height: 80px; }
input[type="email"]:focus, textarea:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px rgba(125, 227, 244, .18); }
.head-actions, .row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.link-quiet { color: var(--text-2); }
.side-badge {
  margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--magenta); color: var(--accent-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sav-setup { max-width: 640px; }
.sav-setup .btn { margin-top: 6px; }

.sav { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.sav-list { padding: 0; overflow: hidden; position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.sav-list .empty { padding: 18px; }
.sav-bulk { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.check-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.threads { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.thread-item { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px 12px 14px; border-bottom: 1px solid rgba(53, 44, 90, .6); }
.thread-item:hover { background: rgba(255, 255, 255, .03); }
.thread-item.is-current { background: rgba(255, 122, 209, .09); box-shadow: inset 3px 0 0 var(--magenta); }
.thread-item input { margin-top: 3px; flex: none; }
.thread-link { display: grid; gap: 2px; min-width: 0; flex: 1; color: var(--text-2); text-decoration: none !important; }
.thread-top { display: flex; justify-content: space-between; gap: 8px; }
.thread-who { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-unread .thread-who::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--cyan); vertical-align: 2px; }
.thread-when { flex: none; font-size: 12px; color: var(--muted); }
.thread-when.is-late { color: var(--sunset); font-weight: 600; }
.thread-subject { color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-snippet { font-size: 13px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.thread-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.sav-list .pager { padding: 10px 14px; margin: 0; }

.sav-placeholder { display: grid; place-items: center; min-height: 240px; }
.sav-back { display: none; }
.thread-head { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; align-items: flex-start; }
.thread-title { min-width: 0; }
.thread-title .h2 { font-size: 20px; margin: 0 0 4px; overflow-wrap: anywhere; }
.thread-title p { margin: 0; overflow-wrap: anywhere; }
.thread-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.menu-pop { position: relative; }
.menu-pop summary { list-style: none; }
.menu-pop summary::-webkit-details-marker { display: none; }
.menu-pop .pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 270px; display: grid; gap: 10px; padding: 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7);
}
.menu-pop .pop p { margin: 0; }
.menu-pop .pop label { display: flex; gap: 6px; align-items: center; }

.thread-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.messages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.msg { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: rgba(30, 24, 56, .75); max-width: 92%; }
.msg-in { justify-self: start; border-left: 3px solid #5A4F86; }
.msg-out { justify-self: end; background: rgba(255, 122, 209, .07); border-color: rgba(255, 122, 209, .35); border-right: 3px solid var(--magenta); }
.msg-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 15px; color: var(--text); }
.msg-att { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--border); font-size: 13px; display: grid; gap: 2px; }
.msg-att li:not(.muted)::before { content: "📎 "; }
.msg-quoted { margin-top: 10px; }
.msg-quoted summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.msg-quoted .msg-text { font-size: 13px; color: var(--text-2); margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--border); }

.reply { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; scroll-margin-top: 16px; }
.reply-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.reply-tpl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); flex: 1; min-width: 0; }
.reply-tpl select { flex: 1; min-width: 0; max-width: 360px; }
.reply textarea { min-height: 240px; font-size: 15px; }
.reply-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

.order-panel { position: sticky; top: 16px; display: grid; gap: 8px; padding: 16px; }
.order-panel .h4 { margin: 0; font-weight: 650; color: #F7F3FF; }
.order-panel p { margin: 0; }
.order-num a { font-weight: 650; font-size: 18px; }
.state { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid; }
.state-good { color: var(--good); border-color: rgba(110, 231, 183, .45); background: rgba(110, 231, 183, .08); }
.state-warn { color: var(--sun); border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); }
.state-bad { color: var(--sunset); border-color: rgba(249, 115, 22, .45); background: rgba(249, 115, 22, .08); }
.order-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.order-change summary { cursor: pointer; color: var(--text-2); }
.inline-form { display: flex; gap: 6px; margin-top: 8px; }
.inline-form input { flex: 1; min-width: 0; }
.order-others { margin-top: 8px !important; font-size: 14px; }

.tpl-list { display: grid; gap: 8px; }
.tpl { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: rgba(255, 255, 255, .02); }
.tpl summary { cursor: pointer; font-weight: 600; }
.tpl[open] summary { margin-bottom: 12px; }
.tpl-new summary { color: var(--cyan); }
.ignored-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ignored-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(53, 44, 90, .6); }

@media (max-width: 1280px) {
  .thread-body { grid-template-columns: minmax(0, 1fr); }
  .order-panel { position: static; order: -1; }
}
@media (max-width: 900px) {
  .sav { grid-template-columns: minmax(0, 1fr); }
  .sav-list { position: static; max-height: none; }
  .sav.has-thread .sav-list { display: none; }
  .sav.has-thread .sav-back { display: inline-block; }
  .msg { max-width: 100%; }
}
.chips-sep { align-self: center; margin: 0 2px 0 10px; font-size: 12px; color: var(--muted); }
.chip-check:not(.is-active) { border-style: dashed; }
.check-intro { margin: -4px 0 12px; }
.thread-reason { display: block; color: var(--muted); font-size: 12px; }
.thread-body.is-aside { grid-template-columns: minmax(0, 1fr); }
.thread-head { position: relative; z-index: 4; }
/* SAV : panneau d'infos, brouillons, suppression */
.info-block { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(53, 44, 90, .6); }
.info-block:last-child { border-bottom: 0; padding-bottom: 0; }
.info-label { margin: 0 0 2px; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--muted); }
.info-main { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.order-panel { gap: 12px; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; overflow-wrap: anywhere; }
.item img, .item-ph { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); }
.item-var { display: block; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.track-link { overflow-wrap: anywhere; }
.draft-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--cyan); border: 1px solid rgba(125, 227, 244, .45); }
.draft-note { margin: 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--text); background: rgba(125, 227, 244, .07); border: 1px solid rgba(125, 227, 244, .3); }
.reply-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-actions { display: flex; gap: 6px; }
.btn-danger:hover:not(:disabled) { color: #FB7185; border-color: rgba(251, 113, 133, .6); }
.msg-att { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--border); list-style: none; }
.msg-att li::before { content: none; }
.att-thumb { display: block; width: 120px; height: 120px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-thumb:hover { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.att-file { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; text-decoration: none !important; color: var(--text); }
.att-file:hover { border-color: var(--cyan); }

/* Bénéfice */
.is-pos { color: var(--good); }
.is-neg { color: #FB7185; }
.tile-value.is-pos, .tile-value.is-neg { -webkit-text-fill-color: currentColor; }
.calc { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.calc th, .calc td { padding: 9px 0; border-bottom: 1px solid rgba(53, 44, 90, .6); text-align: left; font-weight: 400; }
.calc td { text-align: right; white-space: nowrap; padding-left: 16px; }
.calc .calc-base th, .calc .calc-base td { font-weight: 600; color: #F7F3FF; }
.calc .calc-total th, .calc .calc-total td { border-bottom: 0; border-top: 2px solid var(--magenta); padding-top: 12px; font-weight: 650; font-size: 20px; }
.refund-kv dd { font-variant-numeric: tabular-nums; }
.profit-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.profit-grid { align-items: start; }
.ca-tiles.ca-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .ca-tiles.ca-tiles-3 { grid-template-columns: minmax(0, 1fr); } }
.ship-address { font-style: normal; font-size: 13px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; user-select: all; }
.item-link { display: block; overflow-wrap: anywhere; margin-top: 2px; }

/* Surveillance */
.side-badge-alert { background: var(--sunset); }
.watch-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
@media (max-width: 760px) { .watch-summary { grid-template-columns: minmax(0, 1fr); } }
.watch-tile { display: grid; gap: 4px; text-decoration: none !important; color: var(--text); }
.watch-tile .tile-value { font-size: 22px; }
.watch-tile.is-fine .tile-value { color: var(--good); }
.watch-tile.is-alert { border-color: rgba(249, 115, 22, .7); box-shadow: 0 0 0 1px rgba(249, 115, 22, .5) inset; }
.watch-tile.is-alert .tile-value { color: var(--sunset); }
.state-muted { color: var(--muted); border-color: var(--border); }
.table tr.row-alert td { background: rgba(251, 113, 133, .06); }
.table tr.row-done td { opacity: .55; }
.watch-banner { display: block; text-decoration: none !important; color: var(--text); }
.sub-head { margin: 20px 0 8px; font-size: 15px; }
.pay-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.pay-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid rgba(53, 44, 90, .6); }
.pay-list .state { margin-left: 6px; }
.pay-forms { gap: 12px; align-items: start; }

/* Menu par usage */
.side-nav > .side-group:first-child { margin-top: 4px; }
.side-badge-soft { background: rgba(125, 227, 244, .18); color: var(--cyan); }
.settings-tabs { align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.settings-title { font-weight: 650; font-size: 15px; color: #F7F3FF; margin-right: 8px; }

/* Vue d'ensemble : à faire aujourd'hui */
.today { margin-bottom: 26px; }
.today-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1280px) { .today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.today-item { display: grid; gap: 2px; align-content: start; text-decoration: none !important; color: var(--text); min-height: 104px; }
.today-count { font-weight: 650; font-size: 30px; line-height: 1.1; color: #F7F3FF; }
.today-label { font-weight: 600; font-size: 14px; }
.today-item.is-done .today-count { color: var(--good); }
.today-item.is-pending .today-count { color: var(--cyan); }
.today-item.is-urgent { border-color: rgba(245, 158, 11, .4); box-shadow: inset 0 3px 0 rgba(245, 158, 11, .85); }
.today-item.is-urgent .today-count { color: var(--sunset); }
.today-profit .today-count { font-size: 24px; }
.today-item:hover { border-color: #4A3F78; background: var(--surface-2); }

/* Fiche commande */
.ext-link { margin-left: 4px; font-size: 12px; color: var(--muted); text-decoration: none !important; }
.ext-link:hover { color: var(--cyan); }
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .order-layout { grid-template-columns: minmax(0, 1fr); } .order-side { order: -1; } }
.order-main, .order-side { display: grid; gap: 16px; min-width: 0; }
.order-side .card { display: grid; gap: 6px; }
.order-side .card p { margin: 0; }
.items-lg .item { grid-template-columns: 56px minmax(0, 1fr); font-size: 14px; }
.items-lg .item img, .items-lg .item-ph { width: 56px; height: 56px; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.link-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid rgba(53, 44, 90, .6); }
.link-list li:last-child { border-bottom: 0; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.form-inline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-items: end; margin-top: 10px; }
.watch-foot { margin: 4px 0 24px; }

/* ---- Vue d'ensemble allégée ---- */
.today-clear { display: flex; align-items: center; gap: 14px; }
.today-clear .today-count { color: var(--good); font-weight: 650; font-size: 28px; }
.today-ok { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; }
.today-ok a { color: var(--muted); text-decoration: none; }
.today-ok a span { color: var(--good); }
.today-ok a:hover { color: var(--text); }
.today-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (max-width: 640px) { .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.period-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.period-head .section-title { margin: 0; }
.period-dates { margin: 6px 0 12px; }
.kpis .tile { min-height: 128px; }
.kpi-main { border-color: rgba(255, 122, 209, .55); }
.kpi-link { color: var(--text); text-decoration: none !important; }
.kpi-link:hover { border-color: var(--cyan); }
.dash-notes { display: grid; gap: 4px; margin: 0 0 20px; color: var(--muted); }
.shops-table:not(.is-open) .row-extra { display: none; }
.dash-foot { margin-top: 18px; }
@media (max-width: 640px) { .hide-sm { display: none; } }
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpis .tile { min-height: 0; padding: 14px; }
  .kpis .tile-value { font-size: 22px; }
  .kpis .tile-delta { font-size: 12px; }
  .shops-table .hide-xs { display: none; }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpis .tile { min-height: 0; padding: 14px; }
  .kpis .tile-value { font-size: 22px; }
  .kpis .tile-delta { font-size: 12px; }
}
/* ---- Frais réels ---- */
.calc-sub th, .calc-sub td { font-size: 13px; color: var(--muted); font-weight: 400; padding-top: 2px; padding-bottom: 2px; }
.calc-sub th { padding-left: 18px; }
.fee-sources { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.fee-sources li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
/* ---- Dépenses ---- */
.exp-summary { margin-bottom: 20px; }
.exp-top { font-size: 20px; }
.exp-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
.exp-form .exp-label { grid-column: span 2; }
.exp-actions { display: flex; align-items: end; }
@media (max-width: 900px) { .exp-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .exp-form { grid-template-columns: minmax(0, 1fr); } .exp-form .exp-label { grid-column: auto; } }
.nowrap { white-space: nowrap; }
.exp-form label { min-width: 0; } .exp-form select, .exp-form input { width: 100%; min-width: 0; max-width: 100%; }
.exp-shops summary { cursor: pointer; color: var(--cyan); } .exp-shops[open] { max-width: 280px; } .exp-group-note { grid-column: span 2; align-self: center; margin: 0; }

/* AliExpress : test d’une commande */
.ae-probe-title { margin: 1.75rem 0 .5rem; }
.ae-probe { max-width: 34rem; }
.ae-probe-result { margin-top: 1.25rem; }

/* Commander sur AliExpress */
.notice-warn { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); }
.notice-warn ul { margin: 6px 0 0; padding-left: 18px; }
.ali-lines { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.ali-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.ali-line.has-problem { border-color: rgba(249, 115, 22, .6); }
.ali-line-ali { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ali-line-ali img { border-radius: 8px; object-fit: cover; flex: none; }
.ali-line-ali > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ali-sku { color: var(--cyan); }
.ali-ship { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.ali-ship select { max-width: 100%; }
.ali-address { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 14px; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.ali-address legend { padding: 0 6px; }
.ali-address .span-2 { grid-column: 1 / -1; }
.ali-order .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ali-order .order-change { margin-top: 16px; }
@media (max-width: 720px) {
  .ali-line, .ali-address { grid-template-columns: 1fr; }
}
/* Variantes boutique ↔ AliExpress */
.map-link { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.map-link label { flex: 1 1 320px; }
.map-ali { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.map-ali img { border-radius: 10px; object-fit: cover; }
.map-refresh { margin-left: auto; }
.map-select { width: 100%; max-width: 560px; }
.map-select.is-suggested { border-color: var(--sunset); box-shadow: 0 0 0 1px rgba(249, 115, 22, .35); }
/* Trouver sur AliExpress */
.find-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.find-head .card { display: flex; align-items: center; gap: 14px; margin: 0; }
.find-head img { border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2); }
.find-current.is-gone { border-color: rgba(244, 63, 94, .5); }
.find-modes { margin-bottom: 12px; }
.find-form { margin-bottom: 16px; }
.find-photo-note { flex: 1 1 260px; align-self: center; }
.find-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.find-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.find-card.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.find-img { display: block; aspect-ratio: 1; background: rgba(255, 255, 255, .04); }
.find-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.find-body { padding: 10px 12px 4px; display: grid; gap: 4px; flex: 1; }
.find-title { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.find-price { display: flex; align-items: baseline; gap: 8px; }
.find-choose, .find-badge { margin: 8px 12px 12px; }
.find-badge { align-self: flex-start; }
.find-foot { margin-top: 16px; }
.ali-change { flex-basis: 100%; }
@media (max-width: 720px) { .find-head { grid-template-columns: 1fr; } }
.ali-line-ali > span.ali-change { display: block; }
.ali-debug { margin: 0 0 14px; }
.ali-debug pre { max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.sent-mail { margin: 8px 0; }
.mail-preview { white-space: pre-wrap; font-family: var(--font); background: rgba(255,255,255,.06); color: var(--text); padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); margin: 8px 0; max-width: 560px; }
/* Remboursement */
.refund-box { margin-top: 10px; }
.refund-box > summary { cursor: pointer; }
.refund-title { color: var(--critical-ink); font-weight: 600; }
.refund-form { display: grid; gap: 10px; margin-top: 10px; }
.refund-form input[type="text"] { width: 100%; }
.refund-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.refund-quick .chip { cursor: pointer; font: inherit; }
.refund-form .btn { justify-self: start; }
.alert-info .alert-level { opacity: .7; }
/* Produits à relier en priorité */
.urgent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.urgent-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 0; border-top: 1px solid var(--border); }
.urgent-list li:first-child { border-top: 0; }
.urgent-list img, .urgent-list .item-ph { border-radius: 8px; object-fit: cover; flex: none; width: 44px; height: 44px; }
.urgent-name { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; }

/* =====================================================================
   Néon doux — habillage (placé en dernier : surcharge les règles ci-dessus)
   Une seule « signature » : l'horizon synthwave au pied du menu et de la
   page de connexion. Le reste reste calme ; la lueur marque l'élément actif.
   ===================================================================== */
body {
  background:
    radial-gradient(1100px 520px at 85% -12%, rgba(255, 122, 209, .07), transparent 62%),
    radial-gradient(900px 480px at 10% 112%, rgba(125, 227, 244, .05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Menu : dégradé nuit → crépuscule, horizon en perspective tout en bas */
.sidebar { background: linear-gradient(180deg, #120E26 0%, #171032 60%, #22113A 100%); }
.horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 170px; pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, #171032 0%, transparent 40%),
    repeating-linear-gradient(90deg, rgba(255, 122, 209, .5) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(180deg, rgba(255, 122, 209, .5) 0 1px, transparent 1px 22px);
  transform: perspective(220px) rotateX(58deg); transform-origin: bottom; opacity: .32;
  -webkit-mask: linear-gradient(180deg, transparent, #000 65%); mask: linear-gradient(180deg, transparent, #000 65%);
}
@media (max-width: 900px) { .horizon { display: none; } }

.logo-mark { filter: drop-shadow(0 0 6px rgba(255, 122, 209, .35)); }
.logo-word {
  font-family: var(--logo); font-weight: 400; font-size: 24px; letter-spacing: .02em;
  background: linear-gradient(180deg, #FFFFFF 20%, #FFC2E9 65%, #FF8FD8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 122, 209, .3));
}
.side-group { font-family: var(--display); letter-spacing: .06em; }
.side-link.is-active { background: linear-gradient(90deg, rgba(255, 122, 209, .16), rgba(255, 122, 209, .03)); }
.side-link.is-active .ico { stroke: var(--magenta); filter: drop-shadow(0 0 3px rgba(255, 122, 209, .55)); }

/* Titres et chiffres en Chakra Petch */
.h1, .h2, .h3, .h4, .section-title, .tile-value, .today-count, .order-num a, .settings-title, .brand-lg {
  font-family: var(--display);
}
.h1 {
  font-weight: 700; font-size: 28px; letter-spacing: .005em;
  background: linear-gradient(180deg, #FFFFFF 35%, #FFD3EF 75%, #FF9EDC);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h2, .section-title { font-weight: 600; letter-spacing: .01em; }
.tile-value { font-weight: 600; letter-spacing: 0; }

/* Panneaux : verre prune, très léger reflet en haut */
.card, .tile { background: linear-gradient(180deg, rgba(39, 32, 70, .78), rgba(29, 24, 56, .9)); }
.ca-tile.is-active {
  border-color: rgba(255, 122, 209, .75);
  box-shadow: 0 0 0 1px rgba(255, 122, 209, .5) inset, 0 0 22px -8px rgba(255, 122, 209, .55);
  background: linear-gradient(180deg, rgba(255, 122, 209, .12), rgba(29, 24, 56, .92));
}
.ca-tile:hover { border-color: rgba(125, 227, 244, .55); }

/* Boutons : dégradé rose → violet, lueur douce au survol */
.btn-primary { background: linear-gradient(135deg, #FF8AD6, #B592FF); color: #1E0A26; border-color: transparent; }
.btn-primary:hover { background: linear-gradient(135deg, #FF9EDD, #C2A6FF); box-shadow: 0 0 16px -2px rgba(255, 122, 209, .5); }
.btn-secondary { background: rgba(125, 227, 244, .05); color: var(--cyan); border-color: rgba(125, 227, 244, .38); }
.btn-secondary:hover { background: rgba(125, 227, 244, .11); border-color: rgba(125, 227, 244, .6); }
.btn-outline { color: var(--magenta); }

/* Puce active : contour néon rose */
.chip.is-active { box-shadow: 0 0 12px -4px rgba(255, 122, 209, .6); }

/* Graphique : barres dégradé rose → violet, survol cyan */
.chart .bar { fill: url(#bar-neon); }
.chart .bar.is-hover { fill: var(--cyan); filter: drop-shadow(0 0 5px rgba(125, 227, 244, .6)); }
.chart .grid-line { stroke: rgba(255, 122, 209, .1); }
.chart-tip { border-color: rgba(125, 227, 244, .55); }

/* SAV : messages entrants cyan, sortants rose */
.msg-in { border-left-color: rgba(125, 227, 244, .7); }
.is-unread .thread-who::before { background: var(--cyan); box-shadow: 0 0 6px rgba(125, 227, 244, .7); }

/* Tuiles « À faire » urgentes : liseré soleil couchant */
.today-item.is-urgent { border-color: rgba(255, 184, 107, .4); box-shadow: inset 0 3px 0 rgba(255, 184, 107, .85); }
.today-item.is-urgent .today-count { color: var(--sunset); }

/* Connexion : soleil à bandes derrière le logo + horizon */
.bare-logo { position: relative; width: 120px; height: 92px; margin: 0 auto 4px; display: grid; place-items: end center; }
.bare-logo::before {
  content: ""; position: absolute; left: 10px; top: 0; width: 100px; height: 100px; border-radius: 50%; z-index: 0;
  background: linear-gradient(180deg, var(--sun) 0%, var(--sunset) 45%, var(--magenta) 100%);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 10px) bottom / 100% 50% no-repeat, linear-gradient(#000, #000) top / 100% 50% no-repeat;
          mask: repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 10px) bottom / 100% 50% no-repeat, linear-gradient(#000, #000) top / 100% 50% no-repeat;
  opacity: .85; filter: drop-shadow(0 0 18px rgba(255, 122, 209, .35));
}
.bare-logo .logo-mark { position: relative; z-index: 1; width: 52px; height: 52px; margin-bottom: 2px; }
.brand-lg { font-weight: 600; font-size: 24px; color: #F7F3FF; text-shadow: 0 0 14px rgba(255, 122, 209, .35); }
.bare-grid {
  position: fixed; left: -10%; right: -10%; bottom: 0; height: 40vh; z-index: 0; pointer-events: none; opacity: .4;
  background:
    repeating-linear-gradient(90deg, rgba(255, 122, 209, .45) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(180deg, rgba(255, 122, 209, .45) 0 1px, transparent 1px 36px);
  transform: perspective(300px) rotateX(60deg); transform-origin: bottom;
  -webkit-mask: linear-gradient(180deg, transparent, #000 70%); mask: linear-gradient(180deg, transparent, #000 70%);
}

@media (forced-colors: active) {
  .horizon, .bare-grid, .bare-logo::before { display: none; }
  .h1, .logo-word { color: CanvasText; background: none; }
}

/* Bénéfice estimé avant de payer sur AliExpress (onglet « À payer sur Ali ») */
.pay-profit { display: grid; grid-template-columns: minmax(200px, auto) minmax(0, 1fr); gap: 8px 32px; align-items: center; }
.pay-profit-value { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.pay-profit-calc { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 20px; }
.pay-profit-calc div { display: grid; gap: 2px; }
.pay-profit-calc dt { font-size: 12px; color: var(--muted); }
.pay-profit-calc dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-profit-note { grid-column: 1 / -1; margin: 4px 0 0; }
@media (max-width: 720px) { .pay-profit { grid-template-columns: 1fr; } .pay-profit-value { font-size: 28px; } }

/* La page ne doit jamais s’élargir à cause d’un tableau large (il défile dans son cadre) */
.app > .page, main.page { min-width: 0; }

/* Fiche variantes : la variante de la commande d'où l'on vient, et ce que les clients ont commandé */
.map-from-order td { background: rgba(255, 122, 209, .08); }
.map-from-order td:first-child { box-shadow: inset 3px 0 0 var(--magenta); }
.map-order-badge { margin-left: 6px; color: var(--accent-2); border-color: rgba(255, 122, 209, .5); }
.map-seen { color: var(--cyan); margin-top: 2px; }

/* Fiche commande : écrire au client */
.write-client { margin-top: 14px; }
.write-client > summary { list-style: none; display: inline-flex; cursor: pointer; }
.write-client > summary::-webkit-details-marker { display: none; }
.write-client[open] > summary { margin-bottom: 12px; }
.write-form textarea { min-height: 260px; }
.write-form .reply-tpl { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.write-form .reply-tpl select { flex: 1; min-width: 0; }
.ali-notfound { margin: 0 0 12px; color: var(--muted); }

/* Commande retirée de « À commander » */
.refund-noship { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.refund-noship form { display: inline; }
.mark-noship { border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 10px; }

/* Commander une partie des articles */
.ali-skip { display: flex; margin-top: 6px; font-weight: 400; color: var(--text-2); }
.ali-line.is-skipped .ali-line-ali, .ali-line.is-skipped .ali-ship { opacity: .4; }
.ali-line.is-skipped .ali-line-shop > strong, .ali-line.is-skipped .ali-line-shop { text-decoration-color: var(--muted); }

/* Modifier l'adresse de livraison (SAV et fiche commande) */
.address-edit { margin-top: 8px; }
.address-edit > summary { cursor: pointer; color: var(--cyan); }
.address-form { gap: 8px; margin-top: 10px; }
.address-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.address-form input { padding: 7px 10px; }