/* ══════════════════════════════════════════════════════════════════════════
   Panel Hébergement — couche applicative au-dessus du design-system Nocturne.
   styles.css reste la source de vérité des tokens ; ici on n'ajoute QUE :
   la base de page, le thème clair, la barre (--panel-dark), les animations,
   et le SKIN (statuts sémantiques + couleurs de graphes). Rien qui redéfinit
   un token du DS autrement que via le thème clair.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Barre haute + navigation : une surface légèrement plus profonde que le fond */
  --panel-dark: #101120;
  --panel-dark-fg: var(--color-text);
  --panel-line: color-mix(in srgb, var(--color-text) 10%, transparent);
  --panel-raise: #1c1e2c;               /* carte survolée / sur-surface */

  /* SKIN — statuts sémantiques (tenue correcte sur fond sombre ET clair) */
  --ok: #5bb98c;   --ok-soft: color-mix(in srgb, #5bb98c 16%, transparent);
  --warn: #d8a24a; --warn-soft: color-mix(in srgb, #d8a24a 16%, transparent);
  --bad: #d97070;  --bad-soft: color-mix(in srgb, #d97070 16%, transparent);
  --sample: #d8a24a;                     /* indicateur « données d'exemple » */

  /* Graphes */
  --chart-line: var(--color-accent);
  --chart-fill: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --chart-grid: color-mix(in srgb, var(--color-text) 8%, transparent);
  --chart-2: var(--color-accent-2);
  --chart-3: #6f9bd8;
  --chart-4: #5bb98c;
}

/* Thème clair — on ne redéfinit QUE des tokens ; tout le reste en hérite. */
:root[data-theme="light"] {
  --color-bg: #eceef8;
  --color-surface: #ffffff;
  --color-text: #292b31;
  --color-accent: #5d5294;               /* accent assombri : contraste sur clair */
  --color-accent-2: #7972a9;
  --color-divider: color-mix(in srgb, #292b31 12%, transparent);

  --panel-dark: #f3f5fe;
  --panel-dark-fg: #292b31;
  --panel-line: color-mix(in srgb, #292b31 10%, transparent);
  --panel-raise: #f3f5fe;

  --shadow-sm: 0 0 0 1px #d3d7ea;
  --shadow-md: 0 0 0 1px #cfd3e5, 0 6px 18px rgba(41, 43, 49, 0.10);
  --shadow-lg: 0 0 0 1px #b2b6ca, 0 16px 40px rgba(41, 43, 49, 0.16);

  --chart-grid: color-mix(in srgb, #292b31 8%, transparent);
}

/* — base de page — */
html { height: 100%; }
body {
  min-height: 100%;
  font-size: 13px;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }

/* barre de défilement discrète, cohérente avec le thème */
* { scrollbar-width: thin; scrollbar-color: var(--color-neutral-700) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-text) 30%, transparent); background-clip: padding-box; }

/* — animations — */
@keyframes revealUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dropIn   { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ══════════════════════ Barre haute (2 rangées ≤ 94px @1024) ══════════════ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--panel-dark) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--panel-line);
  color: var(--panel-dark-fg);
}
.topbar-inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* rangée 1 — logo, recherche, pastilles, thème, compte */
.topbar-row1 {
  height: 50px; display: flex; align-items: center; gap: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; flex: none; }
.brand-mark {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--color-accent-700); border-radius: 7px; color: var(--color-accent);
}
.brand-name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand-name small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; color: var(--color-neutral-500); margin-top: -2px; }

.search { position: relative; flex: 1 1 auto; max-width: 420px; margin-inline: auto; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-neutral-500); pointer-events: none; }
.search input {
  width: 100%; height: 34px; padding: 0 12px 0 32px; font: inherit; font-size: 13px;
  color: var(--color-text); background: color-mix(in srgb, var(--color-text) 5%, transparent);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.search input::placeholder { color: var(--color-neutral-500); }
.search input:hover { border-color: color-mix(in srgb, var(--color-text) 30%, transparent); }
.search input:focus-visible { border-color: var(--color-accent); outline: none; }

.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden;
  animation: dropIn 0.12s ease; max-height: 60vh; overflow-y: auto;
}
.search-results .sr-empty { padding: 14px; font-size: 12px; color: var(--color-neutral-400); }
.search-results .sr-group { padding: 8px 12px 4px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500); }
.sr-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; background: none; border: 0; cursor: pointer; color: var(--color-text); font: inherit; font-size: 13px; }
.sr-item:hover, .sr-item.hl { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.sr-item .sr-kind { margin-left: auto; font-size: 11px; color: var(--color-neutral-500); }
.sr-item svg { color: var(--color-neutral-400); flex: none; }

.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* bouton icône générique de la barre */
.ibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 8px; cursor: pointer;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-size: 12px;
}
.ibtn:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.ibtn.on { color: var(--color-accent); }

/* commutateur de langue segmenté */
.lang { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.lang button { padding: 5px 9px; font: inherit; font-size: 11px; background: none; border: 0; cursor: pointer; color: var(--color-neutral-400); }
.lang button + button { border-left: 1px solid var(--color-divider); }
.lang button.on { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

/* bouton compte + menu */
.account { position: relative; }
.account-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 6px; cursor: pointer; background: transparent; border: 1px solid var(--color-divider); border-radius: 999px; color: var(--color-text); font: inherit; font-size: 12px; }
.account-btn:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--color-accent-100); background: var(--color-accent-700); flex: none; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 6px; animation: dropIn 0.12s ease;
}
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--color-divider); margin-bottom: 6px; }
.menu-head b { display: block; font-family: var(--font-heading); font-size: 13px; }
.menu-head span { font-size: 11px; color: var(--color-neutral-500); }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); font: inherit; font-size: 13px; text-decoration: none; }
.menu button:hover, .menu a:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.menu svg { color: var(--color-neutral-400); flex: none; }

/* rangée 2 — onglets avec menus déroulants */
.topnav { height: 44px; display: flex; align-items: stretch; gap: 2px; }
.tab { position: relative; display: inline-flex; align-items: center; }
.tab > button {
  display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px;
  background: none; border: 0; cursor: pointer; color: var(--color-neutral-300);
  font: inherit; font-size: 13px; font-family: var(--font-heading); font-weight: 500;
  border-bottom: 2px solid transparent;
}
.tab > button:hover { color: var(--color-text); }
.tab > button svg { color: currentColor; }
.tab > button .chev { transition: transform 0.15s ease; color: var(--color-neutral-500); }
.tab.open > button .chev { transform: rotate(180deg); }
.tab.active > button { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* méga-menu */
.dropdown {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 55; min-width: 300px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 6px; animation: dropIn 0.13s ease;
}
.dd-item { display: flex; gap: 11px; width: 100%; text-align: left; padding: 9px 10px; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); font: inherit; }
.dd-item:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.dd-item .dd-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.dd-item .dd-tx b { display: block; font-size: 13px; font-family: var(--font-heading); font-weight: 500; }
.dd-item .dd-tx span { display: block; font-size: 11px; color: var(--color-neutral-500); margin-top: 1px; }
.dd-item.active .dd-tx b { color: var(--color-accent); }

/* ══════════════════════ Corps ═══════════════════════════════════════════ */
.view { max-width: 1440px; width: 100%; margin: 0 auto; padding: 22px 20px 56px; flex: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; margin: 0; letter-spacing: -0.02em; }
.page-head .sub { font-size: 13px; color: var(--color-neutral-400); margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; align-items: center; }

.grid { display: grid; gap: 14px; }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.span-2 { grid-column: span 2; }
.stack { display: flex; flex-direction: column; gap: 14px; }

.panel { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px; }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel > header h2 { font-size: 15px; margin: 0; }
.panel > header .hint { font-size: 12px; color: var(--color-neutral-500); }
.panel.reveal { animation: revealUp 0.3s ease both; }

/* KPI */
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi .k-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-500); }
.kpi .k-val { font-family: var(--font-heading); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .k-val small { font-size: 13px; font-weight: 500; color: var(--color-neutral-400); margin-left: 3px; }
.kpi .k-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-neutral-400); }
.k-trend { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.k-trend.up { color: var(--ok); } .k-trend.down { color: var(--bad); }

/* jauge / quota */
.gauge { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 10%, transparent); overflow: hidden; }
.gauge > span { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); transition: width 0.5s ease; }
.gauge.ok > span { background: var(--ok); } .gauge.warn > span { background: var(--warn); } .gauge.bad > span { background: var(--bad); }
.gauge-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.gauge-row b { font-variant-numeric: tabular-nums; }

/* statut sous forme de pastille */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok); background: var(--ok-soft); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.pill.bad { color: var(--bad); background: var(--bad-soft); }
.pill.mute { color: var(--color-neutral-400); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.pill.plain::before { display: none; }

/* étiquette produit discrète */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 3px 9px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-neutral-300); }
.chip svg { color: var(--color-accent); }

/* bandeau « données d'exemple » */
.sample-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; color: var(--sample); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--sample) 40%, transparent); }
.sample-flag svg { color: var(--sample); }

.source-card { display: flex; align-items: flex-start; gap: 12px; }
.source-card .sc-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--sample); background: var(--warn-soft); }
.source-card .sc-tx b { font-family: var(--font-heading); font-size: 14px; }
.source-card .sc-tx p { margin: 3px 0 0; font-size: 12.5px; color: var(--color-neutral-400); }

/* tableaux (rails de colonnes cohérents) */
.tbl-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-neutral-500); font-weight: 600; padding: 9px 12px; white-space: nowrap; }
table.data td { padding: 11px 12px; border-top: 1px solid var(--color-divider); vertical-align: middle; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .primary { font-weight: 500; }
table.data .muted { color: var(--color-neutral-500); }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.mini { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: none; border: 1px solid transparent; cursor: pointer; color: var(--color-neutral-400); }
.mini:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.mini.danger:hover { color: var(--bad); background: var(--bad-soft); }

/* barre de filtres */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }
.segbar { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.segbar button { padding: 6px 12px; font: inherit; font-size: 12px; background: none; border: 0; cursor: pointer; color: var(--color-neutral-400); }
.segbar button + button { border-left: 1px solid var(--color-divider); }
.segbar button.on { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

/* état vide */
.empty { text-align: center; padding: 40px 16px; color: var(--color-neutral-500); }
.empty svg { color: var(--color-neutral-600); margin-bottom: 8px; }
.empty b { display: block; font-family: var(--font-heading); font-size: 15px; color: var(--color-text); margin-bottom: 4px; }

/* liste d'activité */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 11px; padding: 10px 0; border-top: 1px solid var(--color-divider); }
.feed-item:first-child { border-top: 0; }
.feed-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.feed-ic.ok { color: var(--ok); background: var(--ok-soft); } .feed-ic.warn { color: var(--warn); background: var(--warn-soft); } .feed-ic.bad { color: var(--bad); background: var(--bad-soft); }
.feed-tx { flex: 1; }
.feed-tx b { font-weight: 500; font-size: 13px; }
.feed-tx p { margin: 2px 0 0; font-size: 12px; color: var(--color-neutral-400); }
.feed-tx time { font-size: 11px; color: var(--color-neutral-500); }

/* graphes */
.chart { width: 100%; display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--color-neutral-400); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut-center { text-align: center; }
.donut-center b { font-family: var(--font-heading); font-size: 20px; font-variant-numeric: tabular-nums; }
.donut-center span { display: block; font-size: 11px; color: var(--color-neutral-500); }

/* dialogue */
.backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #05060c 62%, transparent); animation: fadeIn 0.12s ease; }
.modal { width: min(480px, 100%); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px; animation: revealUp 0.18s ease both; max-height: 88vh; overflow-y: auto; }
.modal h3 { font-size: 18px; margin: 0 0 4px; }
.modal .m-sub { font-size: 12.5px; color: var(--color-neutral-400); margin-bottom: 16px; }
.modal .m-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 12px; color: var(--color-neutral-300); margin-bottom: 5px; }
.form-row .hlp { font-size: 11px; color: var(--color-neutral-500); margin-top: 5px; }
.opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-card { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); cursor: pointer; }
.opt-card:hover { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.opt-card.on { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.opt-card .oc-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.opt-card b { display: block; font-size: 13px; font-family: var(--font-heading); font-weight: 500; }
.opt-card span { display: block; font-size: 11px; color: var(--color-neutral-500); margin-top: 2px; }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); font-size: 13px; animation: revealUp 0.2s ease; max-width: 340px; }
.toast svg { flex: none; }
.toast.ok svg { color: var(--ok); } .toast.err svg { color: var(--bad); } .toast.info svg { color: var(--color-accent); }

/* utilitaires */
.mono { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.dim { color: var(--color-neutral-500); }
.two-line b { display: block; font-weight: 500; }
.two-line span { display: block; font-size: 11.5px; color: var(--color-neutral-500); }

/* ══════════════════════ Écran de connexion / amorçage ═══════════════════ */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--color-bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; animation: dropIn 0.16s ease; }
.auth-brand { display: flex; align-items: center; gap: 8px; color: var(--color-text); font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.auth-brand .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.auth-card h1 { font-family: var(--font-heading); font-size: 21px; margin: 8px 0 0; letter-spacing: -0.01em; }
.auth-sub { margin: 0 0 6px; font-size: 13px; color: var(--color-neutral-400); }
.auth-card label { font-size: 12px; color: var(--color-neutral-300); margin-bottom: -4px; }
.auth-card .btn { margin-top: 8px; justify-content: center; }
.auth-err { min-height: 16px; font-size: 12.5px; color: var(--bad); }
.auth-err:empty { display: none; }

.spinner { display: block; width: 22px; height: 22px; margin: 0 auto 10px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--color-text) 15%, transparent); border-top-color: var(--color-accent); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════ Chip service / bandeau alerte ═══════════════════ */
.chip.ok-chip svg { color: var(--ok); }
.source-card.warn .sc-ic { color: var(--bad); background: var(--bad-soft); }

/* ══════════════════════ Gestionnaire de fichiers ════════════════════════ */
.fm-site { display: inline-flex; align-items: center; gap: 8px; }
.fm-body { display: flex; flex-direction: column; gap: 12px; }
.fm-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.crumb { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-neutral-300); font: inherit; font-size: 12.5px; }
.crumb:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.crumb svg { color: var(--color-neutral-400); }
.crumb-sep { color: var(--color-neutral-500); padding: 0 1px; }
.fm-list { min-height: 60px; }
.fm-name { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; font: inherit; color: var(--color-text); cursor: default; text-align: left; }
.fm-name.link { cursor: pointer; }
.fm-name.link:hover { color: var(--color-accent); }
.fm-name svg { color: var(--color-neutral-400); flex: none; }
.fm-name.link:hover svg { color: var(--color-accent); }
tr.fm-up { cursor: pointer; }
tr.fm-up:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
textarea.input, .fm-editor { display: block; width: 100%; padding: 9px 11px; background: color-mix(in srgb, var(--color-text) 4%, transparent); border: 1px solid var(--color-divider); border-radius: var(--radius-md); color: var(--color-text); font: inherit; }
textarea.input:focus-visible, .fm-editor:focus-visible { outline: none; border-color: var(--color-accent); }
.fm-editor { min-height: 220px; resize: vertical; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }

/* ══════════════════════ Journal (conteneurs) ════════════════════════════ */
.logwrap { min-height: 60px; }
.logview { margin: 0; max-height: 62vh; overflow: auto; padding: 12px 14px; background: #0d0f15; color: #cdd3e0; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; white-space: pre; }

/* ══════════════════════ Responsive ══════════════════════════════════════ */
@media (max-width: 1180px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
  .topbar-inner { padding: 0 14px; }
  .view { padding: 18px 14px 48px; }
  .topnav { overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
}
@media (max-width: 900px) {
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .span-2 { grid-column: auto; }
  .search { max-width: none; }
}
@media (max-width: 680px) {
  .cards-4, .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .search { display: none; }               /* la recherche passe en second plan sur mobile */
  .brand-name small { display: none; }
  .lang { display: none; }
  .page-head h1 { font-size: 20px; }
}