/* Trading AI Dashboard -- theme "liquid glass" : panneaux translucides avec
   flou d'arriere-plan (backdrop-filter), reflets subtils sur les bords,
   poses sur un fond degrade anime de taches de couleur floues. Coherent
   avec les couleurs TICKER_COLORS existantes. */

:root {
  /* Fond degrade (taches de couleur) derriere les panneaux de verre --
     palette doree, coherente avec le logo/nom Kvasir. Seulement 2 taches
     (haut-gauche + bas-droite) pour un fond plus sobre. */
  --blob-1: rgba(212, 165, 74, 0.85);
  --blob-2: rgba(189, 130, 40, 0.75);
  --page-bg: #0d0a05;

  /* Panneaux de verre : fond semi-transparent + flou + bordure translucide. */
  --glass-bg: rgba(20, 26, 36, 0.38);
  --glass-bg-strong: rgba(20, 26, 36, 0.55);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-blur: 26px;

  --bg-0: var(--page-bg);
  --bg-1: var(--glass-bg);
  --bg-2: var(--glass-bg-strong);
  --bg-3: rgba(255, 255, 255, 0.08);
  --border: var(--glass-border);
  --text-0: #eef2f7;
  --text-1: #a9b6c6;
  --text-muted: #7c8898;
  --accent: #3b9ae0;
  --accent-hover: #2c7fbd;
  --accent-rgb: 59, 154, 224;
  --green: #4ade80;
  --green-bg: rgba(74, 222, 128, 0.14);
  --orange: #fbbf24;
  --orange-bg: rgba(251, 191, 36, 0.14);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.14);
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glass-glint: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Mode clair -- active via [data-theme="light"] sur <html>, pose par
   theme.js (bouton navbar + auto-detection prefers-color-scheme). */
html[data-theme="light"] {
  --blob-1: rgba(212, 165, 74, 0.9);
  --blob-2: rgba(189, 130, 40, 0.8);
  --page-bg: #f8f1e3;

  --glass-bg: rgba(255, 255, 255, 0.42);
  --glass-bg-strong: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-highlight: rgba(255, 255, 255, 0.55);

  --bg-0: var(--page-bg);
  --bg-1: var(--glass-bg);
  --bg-2: var(--glass-bg-strong);
  --bg-3: rgba(255, 255, 255, 0.45);
  --border: rgba(20, 30, 45, 0.10);
  --text-0: #1a222c;
  --text-1: #4b5563;
  --text-muted: #6b7280;
  --accent: #1f77b4;
  --accent-hover: #16587f;
  --accent-rgb: 31, 119, 180;
  --green: #16803c;
  --green-bg: rgba(22, 128, 60, 0.12);
  --orange: #b45309;
  --orange-bg: rgba(180, 83, 9, 0.12);
  --red: #c0392b;
  --red-bg: rgba(192, 57, 43, 0.12);
  --shadow: 0 8px 28px rgba(20, 30, 45, 0.12);
  --glass-glint: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

* { box-sizing: border-box; }

/* Fond degrade fixe : grandes taches de couleur floues, visibles derriere
   les panneaux translucides (l'effet "liquid" du liquid glass). Pose sur
   un pseudo-element plutot que le body pour ne pas etre affecte par le
   flux du contenu ni par le scroll. */
html {
  background: var(--page-bg);
}
body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--text-0);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  position: relative;
  transition: color 0.3s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 50% at 12% 8%, var(--blob-1), transparent 70%),
    radial-gradient(ellipse 55% 50% at 88% 62%, var(--blob-2), transparent 70%),
    var(--page-bg);
  filter: blur(50px) saturate(180%);
  transform: scale(1.05);
  transition: background 0.4s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Effet "metal brosse" avec reflet qui suit la souris, applique au
   logo et au nom Kvasir. Le SVG d'origine sert de masque (mask-image) :
   seule sa silhouette est peinte. Deux couches superposees :
   1) un degrade metallique de base (toujours visible, donne le relief
      "brosse" meme loin du curseur) ;
   2) un reflet radial dont la position (--px/--py, en PIXELS reels
      relatifs au coin de l'element -- pas de pourcentage borne, donc pas
      de "palier" visible quand le curseur sort du cadre) et l'intensite
      (--intensity, 0 a 1 selon la distance REELLE souris/forme) sont
      mises a jour en JS a chaque mousemove. Melangees en "screen" pour
      que le reflet illumine sans jamais assombrir. */
.metallic-shine {
  --px: 50%;
  --py: 30%;
  --intensity: 0.35;
  display: inline-block;
  background-image:
    radial-gradient(circle 130px at var(--px) var(--py),
      rgba(255, 244, 214, var(--intensity)) 0%,
      rgba(250, 230, 180, calc(var(--intensity) * 0.75)) 30%,
      rgba(240, 210, 150, calc(var(--intensity) * 0.35)) 65%,
      rgba(240, 210, 150, 0) 100%),
    linear-gradient(135deg,
      #4a3a1a 0%,
      #8a6c34 20%,
      #d4a54a 38%,
      #5c481f 52%,
      #b08c46 68%,
      #4a3a1a 85%,
      #6b5326 100%);
  /* La couche de reflet couvre TOUJOURS la totalite de l'element
     (background-size: 100% 100%, position fixe a 0 0) : c'est le "at
     var(--px) var(--py)" a l'interieur meme du radial-gradient qui
     positionne le centre du reflet en coordonnees pixel absolues dans
     cette boite. Avant, background-position appliquait un DEUXIEME
     decalage avec les memes variables, ce qui cumulait les deux et
     desynchronisait le reflet du curseur (toujours decale en bas/droite) ;
     et la tuile de fond, plus petite que le degrade, coupait son bord net
     (effet "carre"). Ici le degrade s'etale sur toute la boite et son
     dernier stop (alpha 0) est atteint EN DOUCEUR avant le bord -- plus
     de coupure nette. */
  background-blend-mode: screen, normal;
  background-size: 100% 100%, 260% 260%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 20% 20%;
  color: #b08c46;
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
@property --intensity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.35;
}

/* --- Accessibilite : focus visible clavier --- */
a:focus-visible, button:focus-visible, input:focus-visible,
.ticker-toggle:focus-visible, .theme-switcher-panel button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 12px 0;
}
.skip-link:focus {
  left: 0;
}

h1 { font-size: 1.6rem; margin: 0 0 4px 0; font-weight: 600; }
h2 { font-size: 1.15rem; margin: 0 0 14px 0; font-weight: 600; color: var(--text-0); }

.subtitle { color: var(--text-1); margin: 4px 0; }
.caption { color: var(--text-muted); font-size: 0.9rem; }

/* --- Verre commun : fond translucide + flou + reflet de bordure --- */
.navbar,
.section, .chart-box, .metric-card, .toolbar, .card,
.login-card, .user-menu-dropdown-inner, .theme-switcher-icon-btn,
.theme-switcher-panel, .user-menu-toggle, .confirm-box, .flash, .alert,
.health-badge, .btn-secondary, .ticker-toggle {
  background: var(--bg-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--border);
  box-shadow: var(--glass-glint);
}

/* --- Navbar --- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-radius: 0 0 20px 20px;
  border-top: none;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: var(--glass-glint), 0 4px 24px rgba(0, 0, 0, 0.12);
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  color: var(--text-0);
}
.navbar-brand:hover { text-decoration: none; }
.brand-logo { height: 46px; aspect-ratio: 495 / 640; }
.brand-wordmark { height: 24px; aspect-ratio: 640 / 190; }
@media (max-width: 640px) {
  .brand-wordmark { display: none; }
}
.navbar-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; row-gap: 8px; }
.navbar-links a { color: var(--text-1); font-weight: 500; padding: 6px 4px; border-bottom: 2px solid transparent; }
.navbar-links a:hover { color: var(--text-0); text-decoration: none; }

@media (max-width: 640px) {
  .navbar { padding: 12px 16px; border-radius: 0 0 16px 16px; }
  .navbar-links { gap: 12px; font-size: 0.9rem; }
  .navbar-user { display: none; }
}

/* --- Selecteur de theme : une seule icone qui se divise en 3 icones sur
   place (au survol ou au clic/tactile), sans menu deroulant separe --- */
.theme-switcher {
  position: relative;
  width: 34px;
  height: 34px;
}
.theme-switcher-icon-btn {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  color: var(--text-1);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}
.theme-switcher-icon-btn:hover { color: var(--text-0); border-color: rgba(var(--accent-rgb), 0.55); background: var(--bg-2); }
.theme-switcher-icon-btn svg { display: none; }
/* Affiche uniquement l'icone du theme actuellement actif sur le bouton. */
.theme-switcher-icon-btn[data-active-theme="light"] .icon-sun,
.theme-switcher-icon-btn[data-active-theme="dark"] .icon-moon,
.theme-switcher-icon-btn[data-active-theme="auto"] .icon-auto {
  display: block;
}

/* Le panneau occupe le meme emplacement que l'icone (ancre a droite) et
   se contente de s'elargir sur place pour reveler les 3 choix : effet de
   "division" de l'icone plutot qu'un menu qui apparait en dessous. */
.theme-switcher-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 34px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  border-radius: 999px;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: width 0.25s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.15s ease, visibility 0.2s, padding 0.2s ease;
  z-index: 1;
}
/* Ouverture au survol (souris) ET via la classe .open (clic/clavier/tactile) :
   l'icone se cache pendant que le panneau s'elargit a sa place. Largeur
   calculee exactement pour le contenu (3 boutons de 28px + 2 espaces de
   2px + le padding de 3px de chaque cote = 94px) -- une valeur plus large
   laissait un excedent de fond translucide vide qui debordait a droite du
   bouton et apparaissait comme un rectangle sombre flottant (bug corrige). */
.theme-switcher:hover .theme-switcher-panel,
.theme-switcher.open .theme-switcher-panel,
.theme-switcher-icon-btn:focus-visible ~ .theme-switcher-panel {
  width: 94px;
  padding: 3px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.theme-switcher:hover .theme-switcher-icon-btn,
.theme-switcher.open .theme-switcher-icon-btn {
  opacity: 0;
  pointer-events: none;
}
.theme-switcher-panel button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-1);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-switcher-panel button:hover { color: var(--text-0); background: rgba(var(--accent-rgb), 0.16); }
.theme-switcher-panel button.active { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset; }
.theme-switcher-login {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 200;
}

/* --- Menu utilisateur (icone -> pseudo / deconnexion), ouverture au
   survol de la souris (comme le selecteur de theme) + support clic/clavier
   pour le tactile et l'accessibilite --- */
.navbar-actions { display: flex; align-items: center; gap: 10px; }
.user-menu { position: relative; }
.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  color: var(--text-1);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.user-menu-toggle:hover { color: var(--text-0); border-color: rgba(var(--accent-rgb), 0.55); background: var(--bg-2); }
.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 170px;
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.2s;
  z-index: 150;
}
.user-menu-dropdown-inner {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--glass-glint), var(--shadow);
  transform: translateY(-4px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}
/* Ouverture au survol (souris) ET via la classe .open (clic/clavier/tactile).
   .user-menu-dropdown couvre deja l'espace entre l'icone et le menu (padding-top),
   ce qui evite que le survol se coupe en deplacant la souris vers le bas. */
.user-menu:hover .user-menu-dropdown,
.user-menu.open .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.user-menu:hover .user-menu-dropdown-inner,
.user-menu.open .user-menu-dropdown-inner,
.user-menu:focus-within .user-menu-dropdown-inner {
  transform: translateY(0) scale(1);
}
.user-menu-dropdown a {
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-0);
  font-size: 0.9rem;
}
.user-menu-dropdown a:hover { background: rgba(var(--accent-rgb), 0.14); text-decoration: none; }
.user-menu-username { font-weight: 600; border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0 !important; margin-bottom: 2px; }
.user-menu-logout { color: var(--red) !important; }
.user-menu-logout:hover { background: var(--red-bg) !important; }
.navbar-links a.active { color: var(--text-0); border-bottom-color: var(--accent); }
.navbar-user { color: var(--text-muted); font-size: 0.85rem; }
.logout-link { color: var(--red) !important; }

/* --- Page container --- */
.page-container { max-width: 1200px; margin: 0 auto; padding: 24px 28px 60px; }

/* --- Flash / alerts --- */
.flash-container { margin-bottom: 16px; }
.flash, .alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 0.92rem;
}
.alert-error, .flash-error { background: var(--red-bg); color: var(--red); border-color: rgba(248, 113, 113, 0.35); }
.alert-warning, .flash-warning { background: var(--orange-bg); color: var(--orange); border-color: rgba(251, 191, 36, 0.35); }
.alert-success, .flash-success { background: var(--green-bg); color: var(--green); border-color: rgba(74, 222, 128, 0.35); }
.alert-info, .flash-info { background: var(--bg-3); color: var(--text-1); }

/* --- Login --- */
.login-wrapper { display: flex; justify-content: center; align-items: center; min-height: 80vh; }
.login-card {
  border-radius: 22px;
  padding: 36px 40px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--glass-glint), var(--shadow);
}
.login-card h1 { text-align: center; }
.login-card .subtitle { text-align: center; margin-bottom: 20px; }
.login-logo {
  display: block;
  height: 110px;
  aspect-ratio: 495 / 640;
  margin: 0 auto 18px;
}

form label { display: block; margin: 14px 0 6px; font-size: 0.85rem; color: var(--text-1); }
form input[type="text"], form input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-0);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
form input:focus { outline: none; border-color: var(--accent); background: var(--bg-2); }

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
  margin-top: 18px;
  width: 100%;
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-secondary { color: var(--text-0); }
.btn-secondary:hover { background: var(--bg-2); }
.error-page .btn-primary { width: auto; }

/* --- Dashboard header --- */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.dashboard-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px 0;
  flex-wrap: wrap;
}
.dashboard-wordmark {
  height: 42px;
  aspect-ratio: 640 / 190;
}
.health-badge {
  padding: 7px 14px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: normal;
  max-width: 420px;
  text-align: right;
  line-height: 1.4;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.health-badge:hover, .health-badge:focus-visible {
  filter: brightness(1.15);
}
.health-badge[aria-busy="true"] {
  cursor: wait;
  opacity: 0.8;
}
.health-green { background: var(--green-bg); color: var(--green); border-color: rgba(74, 222, 128, 0.4); }
.health-orange { background: var(--orange-bg); color: var(--orange); border-color: rgba(251, 191, 36, 0.4); }
.health-red { background: var(--red-bg); color: var(--red); border-color: rgba(248, 113, 113, 0.4); }

/* --- Toolbar --- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
}
.toolbar-item { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text-1); }

/* --- Metrics grid --- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.metric-card {
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--glass-glint), var(--shadow); }
.metric-label { color: var(--text-1); font-size: 0.82rem; }
.metric-value { font-size: 1.5rem; font-weight: 700; }
.metric-sublabel { color: var(--text-muted); font-size: 0.78rem; }

/* --- Sections --- */
.section {
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: none; border: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.chart-box { border-radius: var(--radius); padding: 20px 22px; }
@media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }

.plotly-chart { width: 100%; min-height: 350px; }
.chart-tall { min-height: 450px; }

/* --- Data table --- */
.data-table-wrapper { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.data-table th { color: var(--text-1); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; }
.ticker-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 6px currentColor; }

/* --- Ticker toggles --- */
.ticker-toggles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ticker-toggle {
  border-color: var(--ticker-color, var(--border));
  color: var(--text-0);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ticker-toggle.active { background: var(--ticker-color, var(--accent)); color: #fff; }
.ticker-toggle:hover { transform: translateY(-1px); }
.ticker-toggle .toggle-icon { font-size: 0.75rem; }

/* --- Text summaries (accessibility) --- */
.text-summary, .text-summary-live { margin-top: 12px; color: var(--text-1); font-size: 0.88rem; }
.text-summary summary { cursor: pointer; color: var(--text-1); }
.text-summary ul, .text-summary-live ul { margin: 8px 0 0 18px; }

/* --- Recalc actions --- */
.actions-section .btn { margin-right: 10px; }
.confirm-box {
  margin-top: 14px;
  padding: 14px;
  background: var(--orange-bg);
  border-color: rgba(251, 191, 36, 0.4);
  border-radius: var(--radius);
  color: var(--orange);
}
.confirm-box .btn { margin-top: 10px; }
.recalc-result { margin-top: 14px; white-space: pre-wrap; font-family: monospace; font-size: 0.85rem; }

/* --- Profile page --- */
.back-link { display: inline-block; margin-bottom: 14px; color: var(--text-1); }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.card { border-radius: var(--radius); padding: 22px; }
@media (max-width: 800px) { .profile-grid { grid-template-columns: 1fr; } }
.field-error { color: var(--red); font-size: 0.85rem; min-height: 1.2em; }

/* --- Page d'erreur --- */
.error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; gap: 10px; }
.error-page h1 { font-size: 2.4rem; }
.error-page .btn { margin-top: 14px; width: auto; }

/* --- Portal (tool chooser) --- */
.portal { max-width: 960px; margin: 0 auto; }
.portal__title { margin-bottom: 1.5rem; }
.portal__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; }
.tool-card {
  display: flex; flex-direction: column; gap: 0.75rem; height: 100%; padding: 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass-bg, transparent);
  color: inherit; transition: transform 200ms ease, border-color 200ms ease;
}
.tool-card:hover, .tool-card:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.tool-card__logo { width: 3rem; height: 3rem; }
.tool-card__initial { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.4rem; font-weight: 700; }
.tool-card__name { margin: 0; font-size: 1.25rem; }
.tool-card__desc { margin: 0; color: var(--text-1); line-height: 1.5; }

/* Reduction de mouvement : desactive les transitions de "ressort" pour les
   utilisateurs qui demandent moins d'animations. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Usage page (streamgraph) */
.usage { max-width: 1100px; margin: 0 auto; display: grid; gap: 1.25rem; }
.usage__intro { color: var(--text-muted); max-width: 70ch; }
.usage__controls { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0.75rem 1.25rem; }
.usage__group { border: 0; margin: 0; padding: 0; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.usage__group legend { float: left; margin-right: 0.5rem; font-weight: 600; }
.usage__chart { position: relative; padding: 1rem; }
.usage__status:empty { display: none; }
.usage__svg { width: 100%; height: auto; display: block; }
.usage__band { opacity: 0.85; stroke: var(--page-bg); stroke-width: 0.5; }
.usage__band:hover { opacity: 1; }
.usage__axis text { fill: var(--text-muted); font-size: 13px; }
.usage__grid { stroke: var(--border); stroke-width: 1; }
.usage__cursor { stroke: currentColor; stroke-width: 1; opacity: 0.5; pointer-events: none; }
.usage__tooltip { position: absolute; top: 1rem; right: 1rem; margin: 0; padding: 0.5rem 0.75rem; white-space: pre; font-size: 0.8rem; border-radius: 8px; background: var(--glass-bg-strong); border: 1px solid var(--border); pointer-events: none; }
.usage__legend { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.85rem; }
.usage__swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.35rem; vertical-align: -0.1rem; background: var(--swatch); }
.usage__table { width: 100%; border-collapse: collapse; }
.usage__table caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; }
.usage__table th, .usage__table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); }
.usage__table td:not(:first-child), .usage__table th:not(:first-child) { text-align: right; }