/* KARDTRCKR — Thème sombre premium · direction artistique 2026
   Application flottante · navigation horizontale · identité collection.
   Chargé en dernier : surcharge tous les thèmes précédents. */

/* ═══════════════════════════════════════════════════════
   1. DESIGN TOKENS — palette sombre premium
   ═══════════════════════════════════════════════════════ */
:root {
  /* Hiérarchie des fonds */
  --app-bg: #0f0f11;
  --app-surface: #18181b;
  --app-surface-elevated: #1f1f23;
  --app-card: #27272a;
  --app-card-hover: #2f2f33;

  /* Textes */
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #8b8b94;
  --text-muted: #6e6e78;

  /* UI accents (neutres, jamais bleus pour les éléments d'interface) */
  --ui-border: rgba(255, 255, 255, 0.06);
  --ui-border-strong: rgba(255, 255, 255, 0.10);
  --ui-hover: rgba(255, 255, 255, 0.04);
  --ui-active: rgba(255, 255, 255, 0.08);

  /* Couleurs sémantiques (financières) */
  --positive: #22c55e;
  --positive-bg: rgba(34, 197, 94, 0.10);
  --negative: #ef4444;
  --negative-bg: rgba(239, 68, 68, 0.10);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.10);

  /* Couleurs identitaires des collections */
  --col-151: #e8543b;
  --col-151-muted: rgba(232, 84, 59, 0.15);
  --col-sv03: #8b5cf6;
  --col-sv03-muted: rgba(139, 92, 246, 0.15);
  --col-sv01: #06b6d4;
  --col-sv01-muted: rgba(6, 182, 212, 0.15);
  --col-sv02: #10b981;
  --col-sv02-muted: rgba(16, 185, 129, 0.15);
  --col-sv04: #f97316;
  --col-sv04-muted: rgba(249, 115, 22, 0.15);
  --col-swsh11: #a855f7;
  --col-swsh11-muted: rgba(168, 85, 247, 0.15);
  --col-swsh12.5: #eab308;
  --col-swsh12.5-muted: rgba(234, 179, 8, 0.15);
  --col-sv06: #14b8a6;
  --col-sv06-muted: rgba(20, 184, 166, 0.15);
  --col-sv07: #ec4899;
  --col-sv07-muted: rgba(236, 72, 153, 0.15);
  --col-sv08: #3b82f6;
  --col-sv08-muted: rgba(59, 130, 246, 0.15);
  --col-swsh7: #8b5cf6;
  --col-swsh7-muted: rgba(139, 92, 246, 0.15);
  --col-sm12: #06b6d4;
  --col-sm12-muted: rgba(6, 182, 212, 0.15);
  --col-base1: #f59e0b;
  --col-base1-muted: rgba(245, 158, 11, 0.15);
  --col-sv05: #22c55e;
  --col-sv05-muted: rgba(34, 197, 94, 0.15);

  /* Rayons et ombres */
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Application flottante */
  --app-radius: 20px;
  --app-border: rgba(255, 255, 255, 0.04);
  /* Le filet du cadre est volontairement plus clair que les filets internes :
     c'est lui qui dit où s'arrête l'application et où commence la scène. */
  --app-edge: rgba(255, 255, 255, 0.075);
  --app-frame-max: 1340px;
  --app-shadow: 0 40px 120px rgba(0, 0, 0, .62), 0 2px 0 rgba(255, 255, 255, .03) inset;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════
   2. GLOBAL — reset, html, body
   ═══════════════════════════════════════════════════════ */
html { color-scheme: dark; background: #0a0a0b; }
html body {
  margin: 0;
  min-height: 100vh;
  background: #0a0a0b;
  color: var(--text-primary);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   3. APP FRAME — effet application posée sur une scène
   ═══════════════════════════════════════════════════════
   Le contenu ne s'étale pas jusqu'aux bords de l'écran : il tient dans un
   cadre borné, centré, dont on voit les deux côtés. Ce qui dépasse de part
   et d'autre n'est pas du vide — c'est l'arrière-plan, qui défile plus
   lentement et donne au cadre l'épaisseur d'une fenêtre d'application.

   Trois choses font l'effet, et aucune n'est décorative :
   — une largeur maximale plus courte que l'écran, pour que les côtés
     existent ;
   — un filet clair sur chaque bord, plus une ombre portée large, qui
     détachent la surface du fond ;
   — une parallaxe discrète, qui transforme ces côtés en profondeur plutôt
     qu'en marge morte.                                                    */
.app-frame {
  position: relative;
  z-index: 1;
  max-width: var(--app-frame-max, 1340px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--app-surface);
  border-left: 1px solid var(--app-edge);
  border-right: 1px solid var(--app-edge);
  box-shadow: var(--app-shadow);
  display: flex;
  flex-direction: column;
}

/* Dès qu'il y a de la place sur les côtés, le cadre décolle : marges
   verticales, coins arrondis, et l'arrière-plan visible tout autour. La
   barre du haut reprend les mêmes arrondis, sinon elle déborderait du
   cadre au premier pixel de défilement. */
@media (min-width: 1040px) {
  .app-frame {
    margin: 18px auto 26px;
    min-height: calc(100vh - 44px);
    border-radius: var(--app-radius);
    border: 1px solid var(--app-edge);
  }
  .app-topbar {
    border-radius: var(--app-radius) var(--app-radius) 0 0;
  }
  .site-footer {
    border-radius: 0 0 var(--app-radius) var(--app-radius);
  }
}

/* ── L'arrière-plan de scène ──────────────────────────────────────────
   Fixé au repère de l'écran et posé sous tout le reste. Chaque calque se
   déplace d'une fraction du défilement : la grille à peine, les halos un
   peu plus. `--sy` est écrit par frame.js et vaut 0 si le système demande
   des mouvements réduits — auquel cas la scène est simplement immobile. */
.app-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -10%, #131318 0%, #0a0a0b 58%, #070708 100%);
}
.app-backdrop > span {
  position: absolute;
  display: block;
  will-change: transform;
}
/* Trame régulière : elle ne se lit pas, elle donne une matière au fond et
   rend le décalage de la parallaxe perceptible. */
.app-backdrop .bd-grid {
  inset: -25% -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .038) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: translate3d(0, calc(var(--sy, 0px) * -0.05), 0);
}
.app-backdrop .bd-glow {
  border-radius: 50%;
  filter: blur(8px);
}
.app-backdrop .bd-glow-a {
  top: -22vh; left: -12vw; width: 74vw; height: 74vw;
  background: radial-gradient(circle at 50% 50%, rgba(140, 221, 191, .12), rgba(140, 221, 191, 0) 62%);
  transform: translate3d(0, calc(var(--sy, 0px) * -0.14), 0);
}
.app-backdrop .bd-glow-b {
  bottom: -34vh; right: -16vw; width: 66vw; height: 66vw;
  background: radial-gradient(circle at 50% 50%, rgba(122, 186, 172, .10), rgba(122, 186, 172, 0) 64%);
  transform: translate3d(0, calc(var(--sy, 0px) * -0.22), 0);
}
/* Voile du bas : il éteint la scène sous le pied de page pour que le cadre
   reste l'élément le plus clair de l'écran. */
.app-backdrop .bd-veil {
  inset: 40% 0 0;
  background: linear-gradient(180deg, rgba(7, 7, 8, 0) 0%, rgba(7, 7, 8, .72) 100%);
  transform: translate3d(0, calc(var(--sy, 0px) * -0.03), 0);
}

@media (prefers-reduced-motion: reduce) {
  .app-backdrop > span { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════
   4. TOP NAVIGATION HORIZONTALE
   ═══════════════════════════════════════════════════════ */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--app-surface);
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 8px;
}
.app-brand span { color: var(--text-tertiary); font-weight: 400; }

.app-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.app-nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.app-nav-item:hover { background: var(--ui-hover); color: var(--text-secondary); }
.app-nav-item[data-on="1"] { background: var(--ui-active); color: var(--text-primary); }
.app-nav-item svg { flex-shrink: 0; }

.app-topbar-search {
  flex: 1;
  min-width: 200px;
  max-width: 480px;
  position: relative;
  margin: 0 12px;
}
.app-topbar-search input {
  width: 100%;
  height: 34px;
  padding: 0 14px 0 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-border);
  background: var(--app-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s var(--ease-out);
}
.app-topbar-search input::placeholder { color: var(--text-tertiary); }
.app-topbar-search input:focus { border-color: var(--ui-border-strong); }
.app-topbar-search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}
.app-topbar-search kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--app-surface-elevated);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--ui-border);
  pointer-events: none;
}

.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.app-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-border);
  background: var(--app-card);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out);
}
.app-user-chip:hover { border-color: var(--ui-border-strong); }
.app-user-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--positive), var(--negative));
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════
   5. VIEWPORT — contenu principal
   ═══════════════════════════════════════════════════════ */
.app-content {
  flex: 1;
  padding: 28px 32px 48px;
  min-height: 0;
}

@media (max-width: 767px) {
  .app-content { padding: 20px 16px 32px; }
  .app-topbar { padding: 0 12px; gap: 8px; height: 56px; }
  .app-nav-item { padding: 0 8px; font-size: 12px; }
  .app-topbar-search { max-width: none; }
  .app-topbar-search kbd { display: none; }
}

/* ═══════════════════════════════════════════════════════
   6. SURFACES — panels & cards redesign
   ═══════════════════════════════════════════════════════ */
.surface-card {
  border-radius: var(--radius-lg);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
  transition: border-color 0.2s var(--ease-out);
}

.surface-elevated {
  border-radius: var(--radius-lg);
  background: var(--app-surface-elevated);
  border: 1px solid var(--ui-border);
}

.surface-panel {
  border-radius: var(--radius-xl);
  background: var(--app-surface-elevated);
  border: 1px solid var(--ui-border);
  padding: 24px;
}

/* ═══════════════════════════════════════════════════════
   7. TYPOGRAPHY & KPIs
   ═══════════════════════════════════════════════════════ */
.page-heading { margin-bottom: 24px; }
.page-heading h1 {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin: 0;
}
.page-heading p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 70ch;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.kpi-card {
  border-radius: var(--radius-lg);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
  padding: 18px;
  min-width: 0;
}
.kpi-card .kpi-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  display: block;
}
.kpi-card .kpi-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-delta {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-note {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════
   8. BADGES & TAGS (avec couleurs sémantiques)
   ═══════════════════════════════════════════════════════ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.tag-up { background: var(--positive-bg); color: var(--positive); }
.tag-down { background: var(--negative-bg); color: var(--negative); }
.tag-warn { background: var(--warning-bg); color: var(--warning); }
.tag-neutral { background: var(--ui-hover); color: var(--text-tertiary); }
.tag-solid { background: var(--positive); color: #fff; }

/* ═══════════════════════════════════════════════════════
   9. COLLECTION COLORS — identité visuelle propriétaire
   ═══════════════════════════════════════════════════════ */
.col-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.col-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   10. FORECAST — prévisions visibles
   ═══════════════════════════════════════════════════════ */
.forecast-block {
  border-radius: var(--radius-lg);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
  padding: 20px;
}
.forecast-block .forecast-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.forecast-block .forecast-price {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}
.forecast-periods {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.forecast-period {
  flex: 1;
  border-radius: var(--radius-md);
  background: var(--app-surface-elevated);
  border: 1px solid var(--ui-border);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out);
}
.forecast-period:hover { border-color: var(--ui-border-strong); }
.forecast-period[data-on="1"] { border-color: var(--text-secondary); }
.forecast-period span:first-child {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.forecast-period strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.forecast-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-border);
  font-size: 12px;
  color: var(--text-tertiary);
}
.forecast-range span { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════
   11. SEARCH PAGE
   ═══════════════════════════════════════════════════════ */
.search-page { display: flex; flex-direction: column; gap: 20px; }

.search-big {
  position: relative;
  max-width: 640px;
}
.search-big input {
  width: 100%;
  height: 52px;
  padding: 0 20px 0 48px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--ui-border);
  background: var(--app-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s var(--ease-out);
}
.search-big input::placeholder { color: var(--text-tertiary); }
.search-big input:focus { border-color: rgba(255, 255, 255, 0.16); }
.search-big .search-big-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.search-filter-group {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
}
.search-filter-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: calc(var(--radius-md) - 2px);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.search-filter-btn:hover { color: var(--text-secondary); }
.search-filter-btn[data-on="1"] { background: var(--app-surface); color: var(--text-primary); }
.search-filter-btn.active { background: var(--app-surface); color: var(--text-primary); }

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* ═══════════════════════════════════════════════════════
   12. ASSET TILES — cartes & sealed
   ═══════════════════════════════════════════════════════ */
.asset-tile {
  border-radius: var(--radius-lg);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
  overflow: hidden;
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  cursor: pointer;
}
.asset-tile:hover {
  border-color: var(--ui-border-strong);
  transform: translateY(-2px);
}
.asset-tile a { color: inherit; text-decoration: none; }
.asset-tile .product-art {
  height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.03), transparent 70%);
}
.asset-tile .card-art img {
  height: 170px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
  transition: transform 0.25s var(--ease-out);
}
.asset-tile:hover .card-art img { transform: translateY(-3px); }
.asset-tile .asset-copy { padding: 14px 16px 12px; }
.asset-tile .asset-set {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.asset-tile h4 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.asset-tile .asset-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.asset-tile .asset-price strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.asset-tile .asset-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--ui-border);
  color: var(--text-tertiary);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.02);
}

/* ═══════════════════════════════════════════════════════
   13. TABLES
   ═══════════════════════════════════════════════════════ */
.tablewrap { overflow-x: auto; }
table.k {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
table.k th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  padding: 10px 14px;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  border-bottom: 1px solid var(--ui-border);
}
table.k td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ui-border);
  white-space: nowrap;
}
.rowlink { cursor: pointer; }
.rowlink:hover { background: var(--ui-hover); }

/* ═══════════════════════════════════════════════════════
   14. CHARTS — premium, épuré
   ═══════════════════════════════════════════════════════ */
.chart-wrap { position: relative; width: 100%; }
.chart-svg { display: block; width: 100%; overflow: visible; }
.chart-cross { opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.chart-wrap:hover .chart-cross { opacity: 1; }
.chart-tip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -110%);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--app-surface-elevated);
  border: 1px solid var(--ui-border-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  min-width: 150px;
  color: var(--text-primary);
}
.chart-wrap:hover .chart-tip { opacity: 1; }
.spark { display: block; width: 100%; }

/* ═══════════════════════════════════════════════════════
   15. SEGMENTED CONTROLS
   ═══════════════════════════════════════════════════════ */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
}
.seg button {
  height: 28px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.seg button:hover { color: var(--text-secondary); }
.seg button[data-on="1"] { background: var(--app-surface); color: var(--text-primary); }
.seg-pill { display: none; }

/* ═══════════════════════════════════════════════════════
   16. BUTTONS
   ═══════════════════════════════════════════════════════ */
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.action-button:hover { background: var(--ui-hover); border-color: var(--ui-border-strong); color: var(--text-primary); }
.action-button.primary { background: var(--positive); border-color: var(--positive); color: #fff; }
.action-button.primary:hover { background: #16a34a; border-color: #16a34a; }

/* ═══════════════════════════════════════════════════════
   17. MODAL
   ═══════════════════════════════════════════════════════ */
dialog { border: 0; padding: 0; background: transparent; }
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
}
dialog .sheet {
  background: var(--app-surface-elevated);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════
   18. LINKS
   ═══════════════════════════════════════════════════════ */
.entity-link {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.15s var(--ease-out);
}
.entity-link:hover { color: var(--text-secondary); }
.quiet-link {
  color: var(--text-tertiary);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.15s var(--ease-out);
}
.quiet-link:hover { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════
   19. MISC — scrollbars, selection, transitions
   ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: var(--radius-full); border: 2px solid var(--app-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

::selection { background: rgba(255, 255, 255, 0.12); }

/* Override styles.css light theme defaults */
/* NB : `html body` est volontairement exclu de cette liste — lui donner --app-card
   repeignait le canvas en #27272a et coupait le fond au défilement. */
html #view,
html .glass,
html .surface-1,
html .surface-2,
html .surface-3,
html .panel,
html .softcard,
html .kpi,
html .feature-card,
html .overview-card,
html .asset-tile,
html .holding-tile,
html .premium-panel,
html .mock-stat,
html .journal-panel { background: var(--app-card); }
html .glass,
html .topbar-row { background: var(--app-surface); backdrop-filter: none; }
html .topbar-row { min-height: auto; }
html #view { max-width: none; padding: 28px 32px 48px; }
html body:not([data-mode="pro"]) #view { max-width: none; }
html .site-footer { border-color: var(--ui-border); background: var(--app-surface); }
html dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html .chart-tip { background: var(--app-surface-elevated); border-color: var(--ui-border-strong); }
html .search-results { background: var(--app-surface-elevated); border-color: var(--ui-border-strong); }
html table.k th,
html table.k td { border-color: var(--ui-border); }
html table.k th { background: var(--app-card); color: var(--text-tertiary); }
html .rowlink:hover { background: var(--ui-hover); }
html .verdict { border-color: var(--ui-border); }
/* Force all old white-surface elements to use dark cards */
html .portfolio-chart-panel,
html .portfolio-insights,
html .analysis-workspace,
html .analysis-main,
html .analysis-side,
html .compare-workspace,
html .portfolio-hero { background: var(--app-surface-elevated); }
html .empty-state { border-color: var(--ui-border); color: var(--text-tertiary); background: transparent; }
html .holding-tile,
html .holding-copy,
html .tile-actions,
html .asset-details { background: var(--app-card); }
/* Fix select dropdown backgrounds */
html select option { background: var(--app-surface); color: var(--text-primary); }

.fade-in { animation: fi 0.35s var(--ease-out) both; }
@keyframes fi { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.skeleton {
  background: linear-gradient(90deg, var(--app-card) 25%, var(--app-surface-elevated) 37%, var(--app-card) 63%);
  background-size: 400% 100%;
  animation: sk 1.4s ease infinite;
  border-radius: var(--radius-md);
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ═══════════════════════════════════════════════════════
   20. MARKET PAGE
   ═══════════════════════════════════════════════════════ */
.market-page { display: flex; flex-direction: column; gap: 20px; }

.market-hero-chart {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: 16px;
}

.market-pulse-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.collection-leader-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
}

.mover-panel { display: flex; flex-direction: column; gap: 2px; }

.mover-row {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  transition: background 0.15s var(--ease-out);
}
.mover-row:hover { background: var(--ui-hover); }
.mover-row .mover-rank { font-size: 11px; color: var(--text-tertiary); min-width: 18px; }
.mover-row .mover-name { flex: 1; min-width: 0; }
.mover-row .mover-name strong { display: block; font-size: 13px; font-weight: 500; }
.mover-row .mover-name small { display: block; font-size: 11px; color: var(--text-tertiary); }
.mover-row .mover-price { text-align: right; font-variant-numeric: tabular-nums; }
.mover-row .mover-price strong { display: block; font-size: 13px; font-weight: 500; }

.mover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ═══════════════════════════════════════════════════════
   21. COMPARE PAGE
   ═══════════════════════════════════════════════════════ */
.compare-page { display: flex; flex-direction: column; gap: 20px; }
.compare-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px 0 10px;
  border-radius: var(--radius-md);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════
   22. VERDICT BLOCKS
   ═══════════════════════════════════════════════════════ */
.verdict {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid var(--ui-border);
}
.verdict-up { background: var(--positive-bg); border-color: var(--positive-bg); }
.verdict-down { background: var(--negative-bg); border-color: var(--negative-bg); }
.verdict-warn { background: var(--warning-bg); border-color: var(--warning-bg); }

/* ═══════════════════════════════════════════════════════
   23. SEALED / EV ANALYSIS
   ═══════════════════════════════════════════════════════ */
.ev-layout {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 240px);
  gap: 32px;
  align-items: start;
}
.ev-bars { display: flex; flex-direction: column; gap: 16px; }
.ev-bar-row { display: flex; flex-direction: column; gap: 6px; }
.ev-bar-row .ev-label { font-size: 12px; color: var(--text-tertiary); }
.ev-bar-row .ev-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-bar { height: 8px; border-radius: var(--radius-full); background: var(--app-card); overflow: hidden; }
.ev-bar i { display: block; height: 100%; border-radius: var(--radius-full); }
.ev-upside {
  padding: 22px 18px;
  border-radius: var(--radius-lg);
  background: var(--app-card);
  border: 1px solid var(--ui-border);
  text-align: center;
}
.ev-upside .ev-upside-label { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.02em; font-weight: 500; }
.ev-upside .ev-upside-number { font-size: 30px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin: 8px 0 6px; }
.ev-upside .ev-upside-sub { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--text-tertiary); }
.ev-main { display: flex; flex-direction: column; min-width: 0; }

@media (max-width: 760px) {
  .ev-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ═══════════════════════════════════════════════════════
   24. SET / COLLECTION HERO
   ═══════════════════════════════════════════════════════ */
.set-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-xl);
  background: var(--app-surface-elevated);
  border: 1px solid var(--ui-border);
}
.set-emblem {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
}

/* ═══════════════════════════════════════════════════════
   25. PORTFOLIO
   ═══════════════════════════════════════════════════════ */
.portfolio-hero {
  padding: 28px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--app-surface-elevated), var(--app-card));
  border: 1px solid var(--ui-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* ═══════════════════════════════════════════════════════
   26. DISCLOSURE / DETAILS
   ═══════════════════════════════════════════════════════ */
.disclosure {
  border-radius: var(--radius-lg);
  border: 1px solid var(--ui-border);
  padding: 16px 18px;
  background: var(--app-card);
}
.disclosure summary {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   27. RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .market-hero-chart { grid-template-columns: 1fr; }
  .mover-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .search-results-grid { grid-template-columns: repeat(2, 1fr); }
  .market-pulse-row { grid-template-columns: repeat(2, 1fr); }
  .ev-layout { grid-template-columns: 1fr; }
  .set-hero { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .search-results-grid { grid-template-columns: 1fr; }
}

/* Mobile bottom nav */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--app-surface);
  border-top: 1px solid var(--ui-border);
  z-index: 50;
  padding: 4px 8px;
  justify-content: space-around;
  align-items: center;
}
.mobile-nav .app-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: auto;
  padding: 6px 8px;
  font-size: 10px;
  border-radius: var(--radius-md);
}
.mobile-nav .app-nav-item svg { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .mobile-nav { display: flex; }
  .app-content { padding-bottom: 76px; }
}

/* ═══════════════════════════════════════════════════════
   28. MARKET REFINEMENT — organic, human, visual-first (2026)
   ═══════════════════════════════════════════════════════ */
/* La boîte `.mkt` ne porte plus que sa STRUCTURE. Son dimensionnement —
   largeur, marges, padding, gap — appartient à `dashboard.css`, qui décrit la
   carte du tableau de bord. Cette règle portait un `max-width: 1200px` et un
   `margin: 0 auto` hérités de l'ancienne page marché : sur un enfant de
   conteneur flex, une marge automatique sur l'axe transversal annule
   l'étirement, et la carte se dimensionnait sur son contenu au lieu de suivre
   la colonne de ses voisines. Corrigé par surcharge dans `dashboard.css` —
   puis retiré ici, pour que le piège ne se referme pas si l'ordre des feuilles
   change un jour. */
.mkt { display: flex; flex-direction: column; }

/* Solid, high-contrast sealed badges — never blend into the card */
.seal-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.22); }
.seal-keep { background: #14532d; color: #fff; }
.seal-open { background: #7f1d1d; color: #fff; }
.seal-na { background: #27272a; color: #d4d4d8; border-color: var(--ui-border-strong); }

/* Sealed visual: fanned 3-card collage reads as a pack, not a single */
.sealed-collage { position: relative; width: 148px; height: 150px; flex-shrink: 0; }
.sealed-collage-img { position: absolute; bottom: 18px; height: 118px; width: auto; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); background: #101013; }
.sealed-collage-img.pos-0 { left: 0; transform: rotate(-9deg); opacity: .92; }
.sealed-collage-img.pos-1 { left: 38px; transform: rotate(0deg) translateY(-4px); z-index: 2; height: 126px; }
.sealed-collage-img.pos-2 { left: 76px; transform: rotate(9deg); opacity: .92; }
.sealed-collage-pack { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.sealed-collage-fallback { display: grid; place-items: center; border: 1px dashed var(--ui-border-strong); border-radius: 12px; color: var(--text-tertiary); font-size: 11px; text-align: center; }

/* Trending — price + delta are the heroes */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.trend-card { border-radius: var(--radius-xl); background: var(--app-surface-elevated); border: 1px solid var(--ui-border); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.trend-card:hover { border-color: var(--ui-border-strong); transform: translateY(-2px); }
.trend-visual { display: block; background: radial-gradient(110% 100% at 50% 0%, rgba(255,255,255,.05), transparent 60%), var(--app-card); padding: 20px 20px 0; }
.trend-img { height: 230px; width: 100%; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(0,0,0,.5)); }
.trend-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.trend-set { font-size: 11px; color: var(--text-tertiary); }
.trend-name { font-size: 13.5px; font-weight: 550; line-height: 1.35; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trend-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.trend-price { font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
.trend-delta { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 7px; }
.trend-delta.up { background: rgba(34,197,94,.14); color: #4ade80; }
.trend-delta.down { background: rgba(239,68,68,.14); color: #f87171; }
.trend-spark-row { display: flex; align-items: center; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ui-border); }
.trend-spark { flex: 1; height: 34px; min-width: 0; }

/* ═══════════════════════════════════════════════════════
   29. SEARCH REFINEMENT — segmented + chips
   ═══════════════════════════════════════════════════════ */
.srch { gap: 14px; }
.srch-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.srch-bar { flex: 1; min-width: 220px; max-width: none; }
.srch-bar input { height: 44px; font-size: 14px; }
.srch-seg { flex-shrink: 0; padding: 3px; border-radius: 999px; }
.srch-seg button { height: 32px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 550; }
.srch-seg button[data-on="1"] { background: var(--ui-active); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--ui-border-strong); }
.set-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.set-chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--ui-border); background: var(--app-card); color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color .15s var(--ease-out), background .15s var(--ease-out), color .15s var(--ease-out); }
.chip:hover { border-color: var(--ui-border-strong); color: var(--text-primary); }
.chip[data-on="1"] { background: var(--text-primary); border-color: var(--text-primary); color: #09090b; font-weight: 600; }
.chip[data-on="1"] .chip-dot { box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.chip-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.srch-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.srch-count { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.srch-reset { font-size: 11px; }

/* Results: price + delta scannable */
#marketObjects .asset-tile .asset-price strong { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
#marketObjects .asset-tile .asset-price .tnum { font-weight: 700; }
#marketObjects .asset-tile h4 { font-size: 13.5px; }

@media (max-width: 767px) {
  /* `.mkt { gap: 22px }` vivait ici : `dashboard.css` pose `gap: 0` sur la même
     carte, donc la déclaration ne s'appliquait jamais. Retirée avec le reste du
     dimensionnement de `.mkt`. */
  .srch-top { flex-direction: column; align-items: stretch; }
  .srch-seg { align-self: flex-start; }
  .sealed-collage { width: 124px; }
  .sealed-collage-img.pos-2 { display: none; }
}
/* ═══════════════════════════════════════════════════════
   99. GARDE-FOUS DE LISIBILITÉ (dernier bloc du dernier fichier)
   ═══════════════════════════════════════════════════════ */

/* — Bouton d'action vert : texte sombre sur #22c55e (2.28:1 → ~10:1).
     Le préfixe `html` et le `!important` sont nécessaires : le vert est
     parfois posé en style inline par le JS (color:#fff). — */
.action-button.primary,
html .action-button[style*="--positive"],
html .action-button[style*="22c55e"] { color: #08140c !important; }
.action-button.primary:hover,
html .action-button[style*="--positive"]:hover { background: #16a34a !important; border-color: #16a34a !important; color: #08140c !important; }
.action-button.primary:disabled,
.action-button:disabled { opacity: .45; cursor: not-allowed; }
html .action-button.secondary {
  background: transparent;
  border-color: var(--ui-border);
  color: var(--text-secondary);
}
html .action-button.secondary:hover { background: var(--ui-hover); border-color: var(--ui-border-strong); color: var(--text-primary); }

/* — Palette Tailwind remappée : certaines utilitaires `text-*` retombent sur
     des gris de FOND (#18181b … #71717a) et deviennent illisibles sur sombre.
     On ne force que la couleur du texte : les classes `bg-*` sont intactes.
     Le préfixe `html` (spécificité 0,1,1) passe devant l'utilitaire Tailwind
     sans recourir à `!important`, quel que soit l'ordre d'injection du CDN. — */
html .text-zinc-100,
html .text-zinc-200 { color: var(--text-primary); }
html .text-zinc-300,
html .text-zinc-400 { color: var(--text-secondary); }
html .text-zinc-500,
html .text-zinc-600 { color: var(--text-tertiary); }

/* — Badges de grading posés en style inline par le JS (#5856d6, 2.64:1).
     On garde l'indigo mais on prend la teinte du thème, lisible sur sombre. — */
html [style*="color:#5856d6"],
html [style*="color: #5856d6"] { color: var(--col-sv03) !important; }

/* ═══════════════════════════════════════════════════════
   30. BARRE SUPÉRIEURE — repli responsive
   Sous 1024 px la navigation horizontale ne tient plus :
   on bascule sur la barre du bas et on laisse la recherche se comprimer.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .app-nav { display: none; }
  .mobile-nav { display: flex; }
  .app-content { padding-bottom: 76px; }
  .app-topbar { padding: 0 16px; gap: 10px; }
  .app-topbar-search { min-width: 0; margin: 0 4px; max-width: none; }
  .app-user-chip { padding: 0 6px; }
  .app-user-chip > span:not(.app-user-avatar) { display: none; }
}

@media (max-width: 560px) {
  .app-topbar { padding: 0 12px; gap: 8px; height: 56px; }
  .app-brand { font-size: 14px; margin-right: 0; }
  .app-topbar-search kbd { display: none; }
}

/* Aucun défilement horizontal, quelle que soit la largeur.
   `clip` plutôt que `hidden` : `hidden` sur un seul axe force l'autre axe en
   `auto`, ce qui fait du corps de page un conteneur de défilement et laisse
   passer le débordement au lieu de le couper. `clip` coupe sans rien créer. */
html, html body { overflow-x: clip; }
.app-content, .app-topbar { max-width: 100%; }
.app-frame { min-width: 0; }

/* ═══════════════════════════════════════════════════════
   31. GRILLES DE PAGE PRODUIT / EXTENSION — repli mobile
   ═══════════════════════════════════════════════════════ */
.product-hero-grid {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 32px;
  align-items: start;
  padding: 28px;
}
.grading-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-size: 12px; }
.vmc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-width: 0; }
.vmc-cols > div { min-width: 0; }
.set-deltas {
  border-top: 1px solid var(--ui-border);
  padding-top: 12px; margin-top: 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}

@media (max-width: 860px) {
  .grading-grid { grid-template-columns: repeat(2, 1fr); }
  .vmc-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 680px) {
  .product-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .set-deltas { grid-template-columns: repeat(2, 1fr); }
  .set-hero { flex-wrap: wrap; padding: 18px; }
}

/* Très petits écrans : les trois horizons de prévision et les cartes
   d'arbitrage passent sur deux colonnes plutôt que de déborder. */
@media (max-width: 420px) {
  .forecast-periods { flex-wrap: wrap; }
  .forecast-period { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 10px 8px; }
  .forecast-period strong { font-size: 15px; }
  .grading-grid { grid-template-columns: minmax(0, 1fr); }
  .forecast-range { font-size: 10px; }
}
.forecast-period { min-width: 0; }
.forecast-period > * { min-width: 0; overflow-wrap: anywhere; }

/* Les en-têtes de panneau (titre + verdict) se replient au lieu de déborder. */
.surface-panel > div[style*="justify-content:space-between"],
.surface-panel > div[style*="justify-content: space-between"] { flex-wrap: wrap; }
.tag { max-width: 100%; }