/* =====================================================================
   Exavéris — gbl_styles.css
   Conventions alignées sur vae-horizon (préfixes gbl_/sgbl_, variables
   --cl-* / --theme-*, boutons buttonstructure-* + buttonstyle-*).
   Deux thèmes : clair (défaut, :root) et sombre (.theme-sombre).
   ===================================================================== */

/* MULTILINGUE : voile anti-flash pendant l'application des traductions
   (classe posée puis levée par sgbl_i18n.js, filet de 400 ms côté JS). */
html.i18n-attente body { visibility: hidden; }

/* TYPOGRAPHIES */
@font-face {
    font-family: 'Inter';
    src: url('assets/typographies/Inter-VariableFont_opsz\,wght.ttf');
}
@font-face {
    font-family: 'Intertight';
    src: url('assets/typographies/InterTight-VariableFont_wght.ttf');
}

:root {
    /*---COULEURS---*/
    --cl-blanc: rgb(255, 255, 255);
    --cl-noir: rgb(0, 0, 0);

    --cl-blanc-i1: rgb(253, 253, 255);
    --cl-blanc-i2: rgb(249, 249, 252);
    --cl-blanc-i3: rgb(245, 245, 247);
    --cl-blanc-i4: rgb(240, 240, 244);
    --cl-border-blanc-i1: hsla(210, 7%, 11%, 0.08);
    --cl-border-blanc-i2: hsla(210, 7%, 11%, 0.12);

    --cl-galax-i1: hsl(60 2.1% 18.4%);
    --cl-galax-i2: hsl(60, 2.7%, 14.5%);
    --cl-galax-i3: hsl(30 3.3% 11.8%);
    --cl-galax-i4: hsl(60 2.6% 9.6%);
    --cl-border-galax-i1: hsla(51, 16.5%, 74.5%, 0.15);
    --cl-border-galax-i2: hsla(51, 16.5%, 84.5%, 0.3);

    /* Couleurs d'état / finance */
    --cl-data-manquant: rgb(255, 193, 7);
    --cl-data-valide: rgb(40, 167, 69);
    --cl-data-invalide: rgb(220, 53, 69);
    --cl-positif: hsl(140, 55%, 42%);
    --cl-negatif: hsl(0, 65%, 52%);

    --cl-transparent-blanc-i1: rgba(255, 255, 255, 0.9);
    --cl-transparent-blanc-i2: rgba(255, 255, 255, 0.85);
    --cl-transparent-blanc-i4: rgba(255, 255, 255, 0.5);
    --cl-transparent-blanc-i5: rgba(255, 255, 255, 0.3);

    --cl-transparent-noir-i1: rgba(0, 0, 0, 0.90);
    --cl-transparent-noir-i2: rgba(0, 0, 0, 0.85);
    --cl-transparent-noir-i3: rgba(0, 0, 0, 0.70);
    --cl-transparent-noir-i4: rgba(0, 0, 0, 0.5);
    --cl-transparent-noir-i6: rgba(0, 0, 0, 0.08);

    --cl-blue: hsl(210, 65%, 50%);
    --cl-blue-hover: hsl(210, 65%, 45%);
    --cl-blue-active: hsl(210, 65%, 48%);

    --cl-lightgrey: hsl(0, 0%, 88%);
    --cl-lightgrey-hover: hsl(0, 0%, 81%);
    --cl-lightgrey-active: hsl(0, 0%, 81%);

    /* Accent de marque — actions primaires, soulignés de nav actifs */
    --cl-accent: hsl(357, 73%, 49%);
    --cl-accent-hover: hsl(357, 73%, 43%);
    --cl-accent-active: hsl(357, 73%, 46%);



    /* Palette graphiques (séries) */
    --cl-serie-1: hsl(210, 65%, 50%);
    --cl-serie-2: hsl(28, 80%, 52%);
    --cl-serie-3: hsl(140, 50%, 45%);
    --cl-serie-4: hsl(280, 45%, 55%);
    --cl-serie-5: hsl(0, 60%, 55%);

    /*---TEXTES---*/
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    --ht-texte-19: 1.9rem;
    --ht-texte-13: 1.3rem;
    --ht-texte-115: 1.15rem;
    --ht-texte-10: 1rem;
    --ht-texte-09: 0.9rem;
    --ht-texte-08: 0.8rem;
    --ht-texte-07: 0.7rem;
    --wg-texte-thin: 300;
    --wg-texte-regular: 410;
    --wg-texte-medium: 520;
    --wg-texte-semibold: 600;
    --wg-texte-bold: 700;
    --ls-texte-regular: 0.003rem;
    --lh-texte-regular: 1.1;

    /*---DIMENSIONS---*/
    --border-radius-classic: 3px;
    --border-radius-extra: 7px;
    --dynamic-padding: 20px;
    --gbl-header-height: 28px;   /* ruban 1 (barre de compte, sombre) */
    --gbl-mainbar-height: 54px;  /* ruban 2 (logo + nav) */

    /*---NORME D'ADAPTABILITÉ (rails partagés header/contenu, exploite la largeur desktop)---*/
    --exv-content-max: 1760px;             /* largeur max de contenu sur grand écran */
    --exv-gutter: clamp(16px, 4vw, 72px);  /* marge latérale responsive (mobile -> desktop) */

    /*---THEME CLAIR (défaut)---*/
    --theme-bg-primaire: var(--cl-blanc-i3);
    --theme-bg-secondaire: var(--cl-blanc-i2);
    --theme-bg-tertiaire: var(--cl-blanc-i1);
    --theme-bg-quaterniaire: var(--cl-blanc-i4);
    --theme-bg-opposite: var(--cl-galax-i4);

    --theme-texte-primaire: var(--cl-noir);
    --theme-texte-secondaire: var(--cl-transparent-noir-i2);
    --theme-texte-tertiaire: var(--cl-transparent-noir-i4);

    --theme-border-color: var(--cl-border-blanc-i1);
    --theme-border-color-hover: var(--cl-border-blanc-i2);

    --theme-button-cl-blue: var(--cl-accent);
    --theme-button-cl-blue-hover: var(--cl-accent-hover);
    --theme-button-cl-blue-active: var(--cl-accent-active);

    --theme-grid-color: rgba(0, 0, 0, 0.08);
}

/*---THEME SOMBRE---*/
.theme-sombre {
    --theme-bg-primaire: var(--cl-galax-i3);
    --theme-bg-secondaire: var(--cl-galax-i2);
    --theme-bg-tertiaire: var(--cl-galax-i1);
    --theme-bg-quaterniaire: var(--cl-galax-i4);
    --theme-bg-opposite: var(--cl-blanc-i3);

    --theme-texte-primaire: var(--cl-transparent-blanc-i2);
    --theme-texte-secondaire: var(--cl-transparent-blanc-i4);
    --theme-texte-tertiaire: var(--cl-transparent-blanc-i5);

    --theme-border-color: var(--cl-border-galax-i1);
    --theme-border-color-hover: var(--cl-border-galax-i2);

    --theme-button-cl-blue: color-mix(in srgb, var(--cl-blue) 90%, var(--cl-blanc));
    --theme-button-cl-blue-hover: color-mix(in srgb, var(--cl-blue-hover) 93%, var(--cl-blanc));
    --theme-button-cl-blue-active: color-mix(in srgb, var(--cl-blue-active) 92%, var(--cl-blanc));

    --theme-grid-color: rgba(255, 255, 255, 0.10);
}

* { box-sizing: border-box; padding: 0; margin: 0; }

p, h1, h2, h3 {
    font-weight: var(--wg-texte-regular);
    letter-spacing: var(--ls-texte-regular);
    color: var(--theme-texte-primaire);
}

html { scrollbar-gutter: stable; }
body {
    min-height: 100vh;
    background-color: var(--theme-bg-primaire);
    color: var(--theme-texte-primaire);
}

a { color: var(--theme-button-cl-blue); }

/*---BOUTONS (conventions vae-horizon)---*/
.buttonstructure-classic, .buttonstructure-tight, .buttonstructure-wide {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid; border-radius: var(--border-radius-classic);
    font-size: var(--ht-texte-09); cursor: pointer;
}
.buttonstructure-wide { font-weight: var(--wg-texte-medium); padding: 15px 25px; }
.buttonstructure-classic { font-weight: var(--wg-texte-medium); padding: 12px 29px; }
.buttonstructure-tight { font-weight: var(--wg-texte-thin); padding: 8px 21px; }

.buttonstyle-simplefill {
    background-color: var(--theme-button-cl-blue);
    color: var(--cl-blanc-i1);
    border-color: var(--theme-button-cl-blue);
    text-decoration: none; transition: all 0.15s;
}
.buttonstyle-simplefill:hover { background-color: var(--theme-button-cl-blue-hover); border-color: var(--theme-button-cl-blue-hover); }
.buttonstyle-simplefill:active { background-color: var(--theme-button-cl-blue-active); border-color: var(--theme-button-cl-blue-active); }

.buttonstyle-simpleoutline {
    background-color: transparent;
    border-color: var(--theme-button-cl-blue);
    color: var(--theme-button-cl-blue);
    text-decoration: none; transition: all 0.1s ease-in-out;
}
.buttonstyle-simpleoutline:hover { border-color: var(--theme-button-cl-blue-hover); color: var(--theme-button-cl-blue-hover); }

/* Action primaire « marque » — même structure, style accentué */
.buttonstyle-accentfill {
    background-color: var(--cl-accent);
    color: var(--cl-blanc-i1);
    border-color: var(--cl-accent);
    text-decoration: none; transition: all 0.15s;
}
.buttonstyle-accentfill:hover { background-color: var(--cl-accent-hover); border-color: var(--cl-accent-hover); }
.buttonstyle-accentfill:active { background-color: var(--cl-accent-active); border-color: var(--cl-accent-active); }

/*---SCROLLBAR---*/
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--theme-bg-secondaire); }
::-webkit-scrollbar-thumb { background-color: var(--theme-bg-opposite); border-radius: 4px; border: 2px solid var(--theme-bg-secondaire); }

/*==============================*/
/* GLOBAL HEADER */
/*==============================*/
.gbl-header { width: 100%; user-select: none; }
.gbl-header-spacer { height: calc(var(--gbl-header-height) + var(--gbl-mainbar-height)); }

/* --- Ruban 1 : barre de compte (sombre, étroite) --- */
.gbl-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1101;
    height: var(--gbl-header-height);
    background-color: var(--cl-transparent-noir-i1); backdrop-filter: blur(15px);
}
.gbl-topbar-inner {
    height: 100%; max-width: var(--exv-content-max); margin: 0 auto; padding: 0 var(--exv-gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.gbl-topbar-right { display: flex; align-items: center; gap: 6px; }

/* --- Composant MENU déroulant unifié (statut, Technologies, Mon compte) — style IBKR --- */
.gbl-menu { position: relative; }
.gbl-menu-trigger {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: none; cursor: pointer;
    color: var(--cl-transparent-blanc-i2); font-family: inherit;
    font-size: var(--ht-texte-08); font-weight: var(--wg-texte-regular);
    padding: 4px 8px; border-radius: var(--border-radius-classic); line-height: 1;
}
.gbl-menu-trigger:hover { color: var(--cl-blanc); background: var(--cl-transparent-blanc-i5); }
.gbl-menu-trigger-icon { padding: 4px 6px; }
.gbl-menu-trigger-icon svg { width: 16px; height: 16px; display: block; }
.gbl-menu-caret { width: 11px; height: 11px; opacity: 0.8; }
.gbl-status-badge { font-weight: var(--wg-texte-semibold); letter-spacing: 0.02em; }

.gbl-menu-panel {
    position: absolute; top: calc(100% + 8px); min-width: 230px; z-index: 1200;
    background: var(--theme-bg-tertiaire); color: var(--theme-texte-primaire);
    border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-classic);
    box-shadow: 0 12px 34px var(--cl-transparent-noir-i6); padding: 6px; overflow: hidden;
}
.gbl-menu-left .gbl-menu-panel { left: 0; }
.gbl-menu-right .gbl-menu-panel { right: 0; }
.gbl-menu-head { padding: 9px 11px 7px; }
.gbl-menu-title { font-size: var(--ht-texte-09); font-weight: var(--wg-texte-semibold); }
.gbl-menu-sub { font-size: var(--ht-texte-07); color: var(--theme-texte-tertiaire); margin-top: 2px; }
.gbl-menu-sep { height: 1px; background: var(--theme-border-color); margin: 5px 0; }
.gbl-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    background: transparent; border: none; cursor: pointer; text-align: left; text-decoration: none;
    padding: 8px 11px; border-radius: var(--border-radius-classic);
    font-size: var(--ht-texte-08); font-family: inherit; color: var(--theme-texte-secondaire);
}
.gbl-menu-item:hover { background: var(--theme-bg-quaterniaire); color: var(--theme-texte-primaire); }
.gbl-menu-row { cursor: default; }
.gbl-menu-disabled { opacity: 0.55; cursor: default; }
.gbl-menu-disabled:hover { background: transparent; color: var(--theme-texte-secondaire); }
.gbl-menu-cta { color: var(--cl-accent); font-weight: var(--wg-texte-medium); }
.gbl-theme-state { color: var(--theme-texte-tertiaire); }
.gbl-soon { font-size: var(--ht-texte-07); color: var(--theme-texte-tertiaire); border: 1px solid var(--theme-border-color); border-radius: 999px; padding: 1px 7px; }
.gbl-lang-choices { display: inline-flex; gap: 4px; }
.gbl-lang-choice {
    background: transparent; border: 1px solid var(--theme-border-color); border-radius: 999px;
    padding: 1px 8px; cursor: pointer; font-family: inherit;
    font-size: var(--ht-texte-07); color: var(--theme-texte-tertiaire);
}
.gbl-lang-choice:hover { color: var(--theme-texte-primaire); border-color: var(--theme-border-color-hover); }
.gbl-lang-choice.active { color: var(--theme-texte-primaire); border-color: var(--theme-button-cl-blue); font-weight: var(--wg-texte-medium); }

/* --- Ruban 2 : barre principale --- */
.gbl-mainbar {
    position: fixed; top: var(--gbl-header-height); left: 0; right: 0; z-index: 1100;
    height: var(--gbl-mainbar-height);
    background-color: var(--theme-bg-tertiaire);
    border-bottom: 1px solid var(--theme-border-color);
}
.gbl-mainbar-inner {
    height: 100%; max-width: var(--exv-content-max); margin: 0 auto; padding: 0 var(--exv-gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.gbl-brand { display: inline-flex; align-items: center; text-decoration: none; }
.gbl-brand-logo { height: 26px; width: auto; display: block; }
.gbl-brand-text {
    font-family: 'Intertight', sans-serif; font-size: var(--ht-texte-115);
    font-weight: var(--wg-texte-semibold); color: var(--theme-texte-primaire); letter-spacing: 0.12em;
}
.gbl-mainbar-right { display: flex; align-items: center; gap: 22px; }
.gbl-nav { display: flex; align-items: center; gap: 18px; }
.gbl-nav-link {
    font-size: var(--ht-texte-09); font-weight: var(--wg-texte-regular);
    color: var(--theme-texte-secondaire); text-decoration: none; white-space: nowrap;
    padding: 4px 0; border-bottom: 2px solid transparent;
}
.gbl-nav-link:hover { color: var(--theme-texte-primaire); }
.gbl-nav-link.active { color: var(--theme-texte-primaire); border-bottom-color: var(--cl-accent); }
.gbl-nav-actions { display: flex; align-items: center; gap: 10px; }
.gbl-premium-only { display: none; } /* géré par gbl_script.js */
.gbl-auth-only { display: none; }    /* géré par gbl_script.js (visible si connecté) */

/* (rails latéraux désormais pilotés par --exv-gutter / --exv-content-max, cf. norme d'adaptabilité) */

/* --- Formulaires d'authentification (pages dédiées /compte) --- */
.gbl-auth-page { min-height: calc(100vh - var(--gbl-header-height) - var(--gbl-mainbar-height)); display: flex; align-items: flex-start; justify-content: center; padding: 8vh var(--dynamic-padding) var(--dynamic-padding); }
.gbl-auth-card {
    width: min(94vw, 400px);
    background: var(--theme-bg-tertiaire); color: var(--theme-texte-primaire);
    border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-extra);
    box-shadow: 0 16px 50px var(--cl-transparent-noir-i6); padding: 28px;
}
.gbl-auth-card h1 { font-family: 'Intertight', sans-serif; font-size: var(--ht-texte-13); font-weight: var(--wg-texte-semibold); margin: 0 0 6px; }
.gbl-auth-card .gbl-auth-intro { font-size: var(--ht-texte-08); color: var(--theme-texte-tertiaire); margin: 0 0 18px; }
.gbl-auth-msg { font-size: var(--ht-texte-08); border-radius: var(--border-radius-classic); padding: 8px 10px; margin: 0 0 12px; }
.gbl-auth-msg.error { color: var(--cl-negatif); background: hsla(0, 65%, 52%, 0.1); }
.gbl-auth-msg.success { color: var(--cl-positif); background: hsla(140, 55%, 42%, 0.12); }
.gbl-auth-form { display: flex; flex-direction: column; gap: 12px; }
.gbl-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--ht-texte-08); color: var(--theme-texte-secondaire); }
.gbl-field input {
    padding: 10px 12px; font-size: var(--ht-texte-09); font-family: inherit;
    background: var(--theme-bg-primaire); color: var(--theme-texte-primaire);
    border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-classic);
}
.gbl-field input:focus { outline: none; border-color: var(--cl-accent); }
.gbl-auth-form button[type="submit"] { margin-top: 6px; }
.gbl-auth-switch { font-size: var(--ht-texte-08); color: var(--theme-texte-tertiaire); text-align: center; margin: 16px 0 0; }
.gbl-auth-switch a { color: var(--cl-accent); }
.exv-sub-list { font-size: var(--ht-texte-08); color: var(--theme-texte-secondaire); margin: 0 0 14px; padding-left: 18px; line-height: 1.7; }

/*==============================*/
/* LAYOUT */
/*==============================*/
.exv-page { width: 100%; max-width: var(--exv-content-max); margin: 0 auto; padding: var(--dynamic-padding) var(--exv-gutter); }
.exv-page-title { font-family: 'Intertight', sans-serif; font-size: var(--ht-texte-19); font-weight: var(--wg-texte-semibold); margin-bottom: 4px; }
.exv-page-subtitle { font-size: var(--ht-texte-09); color: var(--theme-texte-secondaire); margin-bottom: 24px; }
.exv-section-title { font-family: 'Intertight', sans-serif; font-size: var(--ht-texte-115); font-weight: var(--wg-texte-semibold); margin: 28px 0 12px; }

/* Grille de cartes */
.exv-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.exv-card {
    background-color: var(--theme-bg-secondaire);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--border-radius-extra);
    padding: 18px 20px;
}
.exv-card h3 { font-size: var(--ht-texte-09); font-weight: var(--wg-texte-medium); color: var(--theme-texte-secondaire); margin-bottom: 8px; }
.exv-metric { font-family: 'Intertight', sans-serif; font-size: var(--ht-texte-13); font-weight: var(--wg-texte-semibold); }
.exv-metric.small { font-size: var(--ht-texte-115); }
.exv-metric-sub { font-size: var(--ht-texte-08); color: var(--theme-texte-tertiaire); margin-top: 4px; }
.exv-positif { color: var(--cl-positif); }
.exv-negatif { color: var(--cl-negatif); }

/* Checkbox personnalisée (globale, intégrée au thème) */
.exv-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ht-texte-08);
    color: var(--theme-texte-secondaire);
    cursor: pointer;
    user-select: none;
}
.exv-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--theme-border-color);
    border-radius: 5px;
    background: var(--theme-bg-tertiaire);
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.exv-checkbox input[type="checkbox"]:hover { border-color: var(--theme-button-cl-blue); }
.exv-checkbox input[type="checkbox"]:checked {
    background: var(--theme-button-cl-blue);
    border-color: var(--theme-button-cl-blue);
}
.exv-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Cartes graphiques */
.exv-chart-card { background-color: var(--theme-bg-secondaire); border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-extra); padding: 18px 20px; margin-bottom: 18px; }
.exv-chart-card h3 { font-size: var(--ht-texte-10); font-weight: var(--wg-texte-medium); margin-bottom: 12px; }
.exv-chart-wrap { position: relative; width: 100%; height: 300px; }
.exv-chart-wrap canvas { width: 100%; height: 100%; display: block; }
.exv-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: var(--ht-texte-08); color: var(--theme-texte-secondaire); }
.exv-legend-item { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.exv-legend-swatch { width: 12px; height: 3px; border-radius: 2px; }
.exv-legend-item.disabled { opacity: 0.4; }

/* Tables */
.exv-table-wrap { overflow-x: auto; border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-extra); }
.exv-table { width: 100%; border-collapse: collapse; font-size: var(--ht-texte-08); }
.exv-table th, .exv-table td { padding: 10px 14px; text-align: right; white-space: nowrap; }
.exv-table th:first-child, .exv-table td:first-child { text-align: left; }
.exv-table thead th { font-weight: var(--wg-texte-medium); color: var(--theme-texte-secondaire); border-bottom: 1px solid var(--theme-border-color); background: var(--theme-bg-tertiaire); }
.exv-table tbody tr { border-bottom: 1px solid var(--theme-border-color); cursor: pointer; }
.exv-table tbody tr:hover { background: var(--theme-bg-tertiaire); }

/* Badges */
.exv-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--ht-texte-07); font-weight: var(--wg-texte-medium); }
.exv-badge.neutral { background: var(--theme-bg-quaterniaire); color: var(--theme-texte-secondaire); }
.exv-badge.success { background: color-mix(in srgb, var(--cl-positif) 18%, transparent); color: var(--cl-positif); }
.exv-badge.danger { background: color-mix(in srgb, var(--cl-negatif) 18%, transparent); color: var(--cl-negatif); }
.exv-badge.info { background: color-mix(in srgb, var(--cl-blue) 18%, transparent); color: var(--theme-button-cl-blue); }

/* Contrôle segmenté (sélecteurs de vue/résolution) — partagé entre pages. */
.exv-segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-classic); overflow: hidden; }
.exv-segmented button {
    background: var(--theme-bg-tertiaire);
    color: var(--theme-texte-secondaire);
    border: none;
    border-left: 1px solid var(--theme-border-color);
    padding: 5px 14px;
    font-size: var(--ht-texte-08);
    font-weight: var(--wg-texte-medium);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.exv-segmented button:first-child { border-left: none; }
.exv-segmented button.active { background: var(--theme-button-cl-blue); color: var(--cl-blanc-i1); }

/* Aperçu temps réel (NLV en direct) */
.exv-live-value { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; margin-bottom: 12px; border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-classic); background: var(--theme-bg-tertiaire); font-size: var(--ht-texte-08); color: var(--theme-texte-secondaire); }
.exv-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cl-positif); flex-shrink: 0; animation: exv-pulse 2s infinite; }
.exv-live-dot.closed { background: var(--cl-negatif); animation: none; } /* NYSE fermé : rouge, statique */
@keyframes exv-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cl-positif) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
/* Flash de la variation NLV à chaque actualisation (fade out vert/rouge) */
.exv-flash-up, .exv-flash-down { border-radius: 4px; padding: 0 4px; }
.exv-flash-up { animation: exv-flash-up 1.2s ease-out; }
.exv-flash-down { animation: exv-flash-down 1.2s ease-out; }
@keyframes exv-flash-up   { from { background: color-mix(in srgb, var(--cl-positif) 35%, transparent); } to { background: transparent; } }
@keyframes exv-flash-down { from { background: color-mix(in srgb, var(--cl-negatif) 35%, transparent); } to { background: transparent; } }

/* Logo d'entreprise / produit (composant ExvLogo) — carré à bords arrondis, partagé dans toute l'app.
   Pastille initiales en fond ; l'<img> du logo réel la recouvre s'il charge, sinon il se retire (onerror). */
.exv-logo {
    position: relative; display: inline-flex; flex: 0 0 auto; vertical-align: middle;
    width: 28px; height: 28px; border-radius: var(--border-radius-classic); overflow: hidden;
    background: var(--theme-bg-tertiaire); line-height: 1;
}
.exv-logo-fb {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: var(--wg-texte-bold, 700); color: var(--cl-blanc-i1, #fff); letter-spacing: 0.02em;
}
.exv-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* Cellule « logo + libellé entreprise » (tables et listes). */
.exv-cell-co { display: flex; align-items: center; gap: 9px; min-width: 0; }
.exv-cell-co > span:not(.exv-logo), .exv-cell-co > div { min-width: 0; }

/* Saisie du taux de taxe (simulation P&L) */
.exv-tax-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: var(--ht-texte-08); color: var(--theme-texte-secondaire); }
.exv-tax-control input { width: 72px; padding: 4px 8px; border: 1px solid var(--theme-border-color); border-radius: var(--border-radius-classic); background: var(--theme-bg-tertiaire); color: var(--theme-texte-primaire); }

/* Divers */
.exv-loader { color: var(--theme-texte-tertiaire); font-size: var(--ht-texte-09); padding: 12px 0; }
.exv-error { color: var(--cl-negatif); font-size: var(--ht-texte-09); }
.exv-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.exv-summary-text { font-size: var(--ht-texte-09); line-height: 1.5; color: var(--theme-texte-secondaire); }

/* Frise calendaire de sélection de période */
.exv-timeline { position: relative; height: 56px; margin-top: 10px; user-select: none; touch-action: none; }
.exv-tl-ticks { position: absolute; left: 0; right: 0; top: 8px; height: 18px; pointer-events: none; }
.exv-tl-tick { position: absolute; top: 0; width: 1px; height: 18px; background: var(--theme-border-color-hover); transform: translateX(-50%); }
.exv-tl-track { position: absolute; left: 0; right: 0; top: 12px; height: 10px; background: var(--theme-bg-quaterniaire); border: 1px solid var(--theme-border-color); border-radius: 999px; cursor: crosshair; }
.exv-tl-selection { position: absolute; top: 9px; height: 16px; background: color-mix(in srgb, var(--theme-button-cl-blue) 22%, transparent); border: 2px solid var(--theme-button-cl-blue); border-radius: 999px; cursor: grab; box-sizing: border-box; }
.exv-tl-selection:active { cursor: grabbing; }
.exv-tl-handle { position: absolute; top: 50%; width: 14px; height: 14px; background: var(--theme-button-cl-blue); border: 2px solid var(--theme-bg-secondaire); border-radius: 50%; transform: translateY(-50%); cursor: ew-resize; box-sizing: border-box; }
.exv-tl-handle.left { left: -7px; }
.exv-tl-handle.right { right: -7px; }
.exv-tl-labels { position: absolute; left: 0; right: 0; top: 30px; display: flex; justify-content: space-between; gap: 12px; font-size: var(--ht-texte-07); color: var(--theme-texte-tertiaire); }
.exv-tl-sel { color: var(--theme-texte-secondaire); font-weight: var(--wg-texte-medium); }

@media (max-width: 800px) {
    :root { font-size: 15.5px; --dynamic-padding: 15px; }
    .exv-chart-wrap { height: 240px; }
}