/* ── Tinkisso — Dark mode ─────────────────────────────── */

:root {
    /* Surfaces */
    --bg-body: #0b0d14;
    --bg-surface: #13161f;
    --bg-card: #1a1e2b;
    --bg-card-hover: #1f2433;
    /* Bordures — uniquement ces deux niveaux blancs */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(99, 102, 241, 0.35);
    /* Texte */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    /* Marque — réservé au logo, CTA primaires, nav active (max 2 usages/écran) */
    --brand-violet: #7c3aed;
    --brand-blue: #3b82f6;
    /* Accents "caméléon" — remplissages de barres de score, bordures de pills,
       glows au hover. JAMAIS pour du texte. */
    --chameleon-gain: linear-gradient(135deg, #10b981, #2dd4bf);
    --chameleon-neutral: linear-gradient(135deg, #f59e0b, #fbbf24);
    --chameleon-risk: linear-gradient(135deg, #ef4444, #f97316);
    /* Accent interactif — liens, focus, boutons secondaires */
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-solid: #6366f1;
    --accent-deep: #4f46e5;
    /* Accent en opacité — 3 niveaux seulement : subtil / moyen / fort */
    --accent-soft: rgba(99, 102, 241, 0.1);
    --accent-medium: rgba(99, 102, 241, 0.18);
    --accent-strong: rgba(99, 102, 241, 0.3);
    --accent-blue: #3b82f6;
    --accent-violet: #8b5cf6;
    --accent-gradient: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 45%, #6d28d9 100%);
    /* Sémantique gain / perte */
    --positive: #22c55e;
    --positive-text: #4ade80;
    --positive-bg: rgba(34, 197, 94, 0.12);
    --positive-border: rgba(34, 197, 94, 0.3);
    --negative: #ef4444;
    --negative-text: #f87171;
    --negative-bg: rgba(239, 68, 68, 0.12);
    --negative-border: rgba(239, 68, 68, 0.3);
    --neutral: #94a3b8;
    /* Scores */
    --score-excellent: #22c55e;
    --score-good: #14b8a6;
    --score-neutral: #eab308;
    --score-poor: #f97316;
    --score-bad: #ef4444;
    /* Ombres */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 40px var(--accent-medium);
    /* Rayons */
    --radius-lg: 1rem;
    --radius-md: 0.75rem;
    --radius-sm: 0.5rem;
    --header-height: 56px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--bg-body);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-medium), transparent),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(139, 92, 246, 0.1), transparent);
    color: var(--text-primary);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Typographie numérique ────────────────────────────────────
   Chiffres financiers TOUJOURS en chiffres tabulaires pour que
   les colonnes (prix, %, scores, volumes…) s'alignent. */

.num,
.price-value,
.change-chip,
.metric-value,
.metric-item,
.key-metric-value,
.score-badge,
.asset-price,
.asset-global-score,
.criterion-value,
.fng-score,
.fng-badge-score,
.stat-pill,
.stocks-table td,
.portfolio-table td,
.portfolio-lots-table td,
.portfolio-summary-value,
.dividends-table td,
.dividend-yield-badge,
.compare-table td,
.bi-table td,
.admin-table td,
.admin-metric-value,
.macro-indicator-value,
.macro-indicator-change,
.dash-macro-strip,
.landing-stat-card,
.landing-counter-value,
.landing-mockup-price,
.landing-mockup-score,
.landing-mockup-stat {
    font-variant-numeric: tabular-nums;
}

/* ── Header ───────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

/* Filet dégradé violet→bleu : la signature de marque remplace
   l'ancien bandeau plein. */
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-violet), var(--brand-blue));
    pointer-events: none;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    min-height: var(--header-height);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.brand-logo-img {
    display: block;
    width: 160px;
    height: 36px;
    max-width: 100%;
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 1.35rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.brand-text h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.brand-text span {
    font-size: 0.72rem;
    opacity: 0.7;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Wordmark : seul usage du dégradé de marque dans le header,
   en texte clippé sur la surface sombre. */
.brand-wordmark {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    background: linear-gradient(90deg, var(--brand-violet), var(--brand-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    margin-right: 0.75rem;
}

/* Sous le desktop uniquement (tablette 768-1023px) : une seule rangée
   garantie, la nav rétrécit et défile horizontalement plutôt que de
   passer à la ligne. Sous 768px, le menu hamburger du header prend le
   relais (la nav y est masquée) et le pattern défilable existant à
   <= 767px reste en place. Ce comportement ne s'applique plus JAMAIS
   au desktop : il coupait silencieusement les derniers liens
   (Portefeuille, Tarifs) sans aucune indication visuelle. */
@media (max-width: 1023px) {
    .header-nav {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .header-nav::-webkit-scrollbar {
        display: none;
    }
}

/* Desktop (>= 1024px) : la nav ne masque JAMAIS de liens.
   - flex: 1 → la nav prend tout l'espace disponible ; min-width reste
     à sa valeur auto, donc elle ne peut pas rétrécir sous la largeur
     de son contenu : les 8 liens restent visibles et cliquables.
   - overflow visible : plus aucun défilement caché.
   - pilules resserrées (padding 0.4rem 0.65rem, gap 0.2rem) pour que
     l'ensemble tienne confortablement. */
@media (min-width: 1024px) {
    .header-nav {
        flex: 1;
        gap: 0.2rem;
        overflow: visible;
    }

    .header-nav .nav-link {
        padding: 0.4rem 0.65rem;
    }

    /* La zone de droite (chip email, boutons) peut céder de l'espace :
       la nav est prioritaire sur l'affichage complet de l'email. */
    .header-auth {
        min-width: 0;
    }

    .header-user-email {
        max-width: 96px;
    }
}

/* Largeurs intermédiaires (1024-1280px) : on gagne la place nécessaire
   sans masquer aucun lien — icônes des pilules masquées (le texte est
   conservé, le compteur watchlist aussi), police légèrement réduite,
   email tronqué encore plus tôt. */
@media (min-width: 1024px) and (max-width: 1280px) {
    .header-nav .nav-link {
        font-size: 0.78rem;
    }

    .header-nav .nav-link i {
        display: none;
    }

    .header-user-email {
        max-width: 72px;
    }
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--accent-soft);
}

.nav-link.active {
    color: var(--accent-hover);
    background: var(--accent-medium);
}

/* ── Mode débutant / expert ───────────────────────────────── */

.header-mode-toggle {
    flex-shrink: 0;
}

.mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.55rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.mode-toggle:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
}

.mode-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.mode-toggle-label {
    opacity: 0.55;
    transition: opacity 0.25s ease, color 0.25s ease;
    user-select: none;
}

.mode-toggle-label.active {
    opacity: 1;
    color: var(--text-primary);
}

.mode-toggle-track {
    position: relative;
    width: 2.2rem;
    height: 1.15rem;
    background: var(--bg-body);
    border-radius: 999px;
    border: 1px solid var(--border-hover);
}

.mode-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

html.mode-expert .mode-toggle-thumb {
    transform: translateX(1.05rem);
}

.expert-only,
.beginner-only {
    transition: opacity 0.28s ease, max-height 0.35s ease, margin 0.25s ease, padding 0.25s ease;
}

html.mode-beginner .expert-only {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    pointer-events: none;
    visibility: hidden;
}

html.mode-expert .beginner-only {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
    visibility: hidden;
}

html.mode-beginner tr.expert-only,
html.mode-beginner .metric-item.expert-only,
html.mode-beginner .key-metric-card.expert-only {
    display: none !important;
}

html.mode-expert tr.expert-only {
    display: table-row;
}

html.mode-expert .key-metric-card.expert-only {
    display: flex;
}

html.mode-beginner .expert-only.mode-keep-slot,
html.mode-expert .beginner-only.mode-keep-slot {
    visibility: visible;
}

.beginner-score-explainer {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.criterion-beginner-hint {
    margin: 0.2rem 0 0.5rem;
    font-size: 0.8rem;
    color: var(--accent-hover);
    font-style: italic;
}

.metric-label-with-tip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
}

.metric-tip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: help;
    font-size: 0.82rem;
    line-height: 1;
    transition: color 0.2s;
}

.metric-tip-trigger:hover,
.metric-tip-trigger:focus-visible {
    color: var(--accent-hover);
}

.metric-tip-popup {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 50;
    min-width: 200px;
    max-width: 260px;
    padding: 0.55rem 0.7rem;
    background: #1a1e2b;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-secondary);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

.metric-label-with-tip:hover .metric-tip-popup,
.metric-label-with-tip:focus-within .metric-tip-popup,
.metric-tip-trigger:hover + .metric-tip-popup,
.metric-tip-trigger:focus-visible + .metric-tip-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.watchlist-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 2rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 700;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* ── Hero & search ────────────────────────────────────────── */

.hero-block {
    padding: 2rem 0 1.25rem;
}

.hero-header-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.hero-header-main {
    flex: 1;
    min-width: min(100%, 280px);
}

.hero-header-main h2 {
    margin-bottom: 0.35rem;
}

.hero-header-main p {
    margin-bottom: 1.25rem;
}

.hero-block h2 {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.35rem;
}

.hero-block p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    max-width: 560px;
}

.hero-block .compare-disclaimer,
.hero-block .dividends-disclaimer {
    margin-top: -0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stat-pill strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Fear & Greed widget (CNN) ────────────────────────────── */

.fear-greed-widget {
    flex-shrink: 0;
    width: min(100%, 280px);
    padding: 1rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.fng-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.65rem;
}

.fng-title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fng-title-row i {
    color: #f59e0b;
}

.fng-source {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
}

.fng-value-row {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-bottom: 0.25rem;
}

.fng-score {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.fng-label {
    font-size: 0.88rem;
    font-weight: 600;
}

.fng-change {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.fng-change-up {
    color: var(--positive-text);
}

.fng-change-down {
    color: var(--negative-text);
}

.fng-gauge {
    position: relative;
    height: 14px;
    margin-bottom: 0.35rem;
}

.fng-gauge-zones {
    display: flex;
    height: 100%;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.fng-zone-seg {
    height: 100%;
}

.fng-seg-extreme-fear {
    width: 25%;
    background: #ef4444;
}

.fng-seg-fear {
    width: 20%;
    background: #f97316;
}

.fng-seg-neutral {
    width: 10%;
    background: #eab308;
}

.fng-seg-greed {
    width: 20%;
    background: #86efac;
}

.fng-seg-extreme-greed {
    width: 25%;
    background: #22c55e;
}

.fng-gauge-marker {
    position: absolute;
    top: 50%;
    width: 4px;
    height: 22px;
    margin-left: -2px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
    transform: translateY(-50%);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.fng-gauge-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.fng-updated {
    margin: 0;
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* ── Contexte Macro FRED ──────────────────────────────────── */

.macro-context-panel {
    margin: 0 0 1.5rem;
    padding: 1.15rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid #0ea5e9;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.macro-context-header {
    margin-bottom: 1rem;
}

.macro-context-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.macro-context-title i {
    color: #0ea5e9;
    font-size: 1.1rem;
}

.macro-context-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.macro-source {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
}

.macro-summary {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md);
}

.macro-summary i {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.macro-env-favorable {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: var(--positive-text);
}

.macro-env-neutral {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
}

.macro-env-unfavorable {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: var(--negative-text);
}

.macro-indicators-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.macro-indicator-card {
    padding: 0.85rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
}

.macro-signal-favorable {
    border-color: var(--positive-border);
}

.macro-signal-unfavorable {
    border-color: var(--negative-border);
}

.macro-indicator-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.macro-indicator-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.macro-direction {
    font-size: 1rem;
    line-height: 1;
}

.macro-dir-up {
    color: var(--positive-text);
}

.macro-dir-down {
    color: var(--negative-text);
}

.macro-dir-flat {
    color: var(--text-muted);
}

.macro-indicator-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.macro-indicator-change {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.macro-change-up {
    color: var(--positive-text);
}

.macro-change-down {
    color: var(--negative-text);
}

.macro-indicator-date {
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.macro-updated {
    margin: 0.75rem 0 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: right;
}

@media (max-width: 1100px) {
    .macro-indicators-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .macro-indicators-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .macro-indicators-grid {
        grid-template-columns: 1fr;
    }
}

.fng-zone-extreme_fear,
.fng-zone-extreme-fear {
    color: var(--negative-text);
}

.fng-zone-fear {
    color: #fb923c;
}

.fng-zone-neutral {
    color: #facc15;
}

.fng-zone-greed {
    color: #86efac;
}

.fng-zone-extreme_greed,
.fng-zone-extreme-greed {
    color: var(--positive-text);
}

.search-wrapper {
    position: relative;
    max-width: 520px;
}

.search-wrapper i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-input:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-medium);
}

.search-count {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.search-count span {
    color: var(--accent-violet);
    font-weight: 600;
}

/* ── Risk profile filter ──────────────────────────────────── */

.risk-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.risk-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

.risk-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}

.risk-filter-btn:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.risk-filter-btn.active {
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.risk-prudent {
    border-color: var(--positive-border);
    color: var(--positive-text);
}

.risk-prudent.active {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border-color: var(--positive-text);
}

.risk-moderate {
    border-color: rgba(234, 179, 8, 0.35);
    color: #facc15;
}

.risk-moderate.active {
    background: linear-gradient(135deg, #ca8a04, #eab308);
    border-color: #fde047;
    color: #1a1a1a;
}

.risk-aggressive {
    border-color: var(--negative-border);
    color: var(--negative-text);
}

.risk-aggressive.active {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border-color: #fca5a5;
}

.risk-filter-hint {
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 576px) {
    .risk-filter-bar {
        justify-content: center;
    }

    .risk-filter-label {
        width: 100%;
        justify-content: center;
        margin-bottom: 0.25rem;
    }

    .risk-filter-btn {
        flex: 1;
        justify-content: center;
        min-width: 0;
        padding: 0.45rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ── Symbol search (unlimited) ────────────────────────────── */

.symbol-search-panel {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--accent-blue);
}

.symbol-search-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.symbol-search-header > i {
    font-size: 1.35rem;
    color: var(--accent-blue);
    margin-top: 0.15rem;
}

.symbol-search-header h3 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
}

.symbol-search-header p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.symbol-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

.symbol-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.symbol-search-input-wrap > i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.symbol-search-input-wrap .search-input {
    padding-left: 2.75rem;
}

.autocomplete-wrap {
    position: relative;
}

.search-autocomplete-list {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 1050;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.search-autocomplete-item {
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.15s ease;
}

.search-autocomplete-item:last-child {
    border-bottom: none;
}

.search-autocomplete-item.is-highlighted,
.search-autocomplete-item:hover,
.search-autocomplete-item:focus {
    background: var(--accent-soft);
}

.ac-row-main {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.ac-symbol {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.ac-name {
    font-size: 0.82rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* flex: 1 + min-width: 0 : le nom absorbe l'espace restant et
       s'ellipse proprement quand le bloc prix/score est présent. */
    flex: 1;
    min-width: 0;
}

/* Bloc prix + variation + score, aligné à droite de la ligne principale. */
.ac-quote {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.ac-price {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.ac-change {
    font-size: 0.74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ac-change-up {
    color: var(--positive);
}

.ac-change-down {
    color: var(--negative);
}

/* Variante compacte du badge de score du dashboard pour le dropdown. */
.score-badge.ac-score {
    min-width: 2rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
}

.ac-row-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ac-type {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.ac-type-equity {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.25);
}

.ac-type-crypto {
    color: #fdba74;
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.25);
}

.ac-type-etf {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.25);
}

.ac-type-other {
    color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.2);
}

.ac-country {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.ac-country i {
    font-size: 0.68rem;
}

.symbol-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.2rem;
    background: linear-gradient(135deg, var(--accent-blue), #2563eb);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.symbol-search-btn:hover {
    opacity: 0.92;
}

.symbol-search-feedback {
    display: none;
    margin-top: 0.85rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.symbol-search-feedback.visible {
    display: block;
}

.symbol-search-feedback.info {
    background: var(--accent-soft);
    border: 1px solid var(--accent-strong);
    color: var(--accent-hover);
}

.symbol-search-feedback.error {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: var(--negative-text);
}

.search-result-section {
    margin-bottom: 1.5rem;
}

.search-result-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.search-result-title i {
    color: var(--accent-blue);
    margin-right: 0.35rem;
}

.search-result-grid {
    padding-bottom: 0;
}

.search-temp-item {
    position: relative;
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-lg);
    padding: 0.35rem;
    background: var(--accent-soft);
}

.search-temp-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-blue);
}

.search-cache-tag {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 576px) {
    .symbol-search-form {
        flex-direction: column;
    }

    .symbol-search-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Alerts panel ─────────────────────────────────────────── */

.alerts-panel {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--accent-violet);
}

.alerts-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.alerts-panel-header > i {
    font-size: 1.35rem;
    color: var(--accent-violet);
    margin-top: 0.15rem;
}

.alerts-panel-header h3 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
}

.alerts-panel-header p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.alerts-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

.alerts-input-group {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.alerts-input-group > i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.alerts-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.alerts-input:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-medium);
}

.alerts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
}

.alerts-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
}

.alerts-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.alerts-btn.loading span {
    opacity: 0.7;
}

.alerts-feedback {
    display: none;
    margin-top: 0.85rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.4;
}

.alerts-feedback.visible {
    display: block;
}

.alerts-feedback.success {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: var(--positive-text);
}

.alerts-feedback.error {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: var(--negative-text);
}

.alerts-feedback.info {
    background: var(--accent-soft);
    border: 1px solid var(--accent-strong);
    color: var(--accent-hover);
}

@media (max-width: 576px) {
    .alerts-form {
        flex-direction: column;
    }

    .alerts-btn {
        width: 100%;
    }
}

/* ── Stock cards grid ─────────────────────────────────────── */

.stocks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    padding-bottom: 2rem;
    justify-content: start;
    justify-items: stretch;
    align-content: start;
    align-items: start;
    width: 100%;
}

.stocks-grid-item {
    min-width: 0;
    width: 100%;
    margin: 0;
}

.stocks-grid-item.is-hidden {
    display: none;
}

.stock-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    max-width: none;
}

.stock-card {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stock-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card), var(--shadow-glow);
    background: var(--bg-card-hover);
}

.stock-card.is-hidden {
    display: none;
}

.stock-card.positive-border {
    border-left: 3px solid var(--positive);
}

.stock-card.negative-border {
    border-left: 3px solid var(--negative);
}

.stock-card.neutral-border {
    border-left: 3px solid var(--neutral);
}

/* Card header */
.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.sector-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
}

.card-symbol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.card-name {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.sector-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.68rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.crypto-tag {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.35);
    color: #fb923c;
}

.crypto-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.12rem 0.45rem;
    border-radius: 2rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border: 1px solid rgba(251, 146, 60, 0.5);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.35);
}

.regime-mutation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.35rem;
    padding: 0.12rem 0.45rem;
    border-radius: 2rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    color: #fef3c7;
    background: linear-gradient(135deg, #b45309, #f59e0b);
    border: 1px solid rgba(251, 191, 36, 0.55);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
    animation: regime-pulse 2s ease-in-out infinite;
}

@keyframes regime-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.35); }
    50% { box-shadow: 0 0 22px rgba(245, 158, 11, 0.65); }
}

.stock-card.has-regime-mutation {
    border-color: rgba(245, 158, 11, 0.35);
}

.stock-card.has-regime-mutation:hover {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: var(--shadow-card), 0 0 36px rgba(245, 158, 11, 0.15);
}

.stock-card.is-crypto {
    border-color: rgba(249, 115, 22, 0.2);
}

.stock-card.is-crypto:hover {
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: var(--shadow-card), 0 0 40px rgba(249, 115, 22, 0.12);
}

.card-top-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.watchlist-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
    flex-shrink: 0;
}

.watchlist-star:hover {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
    transform: scale(1.08);
}

.watchlist-star.active {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.15);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

.watchlist-star:disabled {
    opacity: 0.5;
    cursor: wait;
}

.watchlist-star-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.15rem;
}

.asset-hero {
    position: relative;
}

.asset-hero-watchlist {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.watchlist-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

.watchlist-empty > i {
    font-size: 3rem;
    color: #fbbf24;
    opacity: 0.6;
    display: block;
    margin-bottom: 1rem;
}

.watchlist-empty h3 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.watchlist-empty p {
    color: var(--text-secondary);
    max-width: 420px;
    margin: 0 auto 1.5rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.watchlist-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.35rem;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    border-radius: var(--radius-md);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
}

.watchlist-empty-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    color: #fff;
}

.watchlist-unavailable-card {
    width: 100%;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.watchlist-unavailable-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.watchlist-unavailable-card-top .portfolio-asset-link {
    min-width: 0;
}

.watchlist-unavailable-card-top .watchlist-star {
    flex: 0 0 auto;
}

.watchlist-unavailable-state {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.78rem;
}

.watchlist-companion-page {
    padding-bottom: 2.5rem;
}

.watchlist-operation-message {
    margin: 0 0 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: var(--radius-md);
    background: rgba(59, 130, 246, 0.09);
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.watchlist-companion-list {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.watchlist-companion-card {
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

.watchlist-companion-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.watchlist-companion-card-header .portfolio-asset-link {
    min-width: 0;
}

.watchlist-market-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 0;
}

.watchlist-market-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
}

.watchlist-market-facts span,
.watchlist-context-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.watchlist-market-facts strong {
    color: var(--text-primary);
    font-size: 0.9rem;
    text-align: right;
}

.watchlist-change-positive {
    color: var(--positive) !important;
}

.watchlist-change-negative {
    color: var(--negative) !important;
}

.watchlist-change-flat {
    color: var(--text-secondary) !important;
}

.watchlist-market-unavailable {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.watchlist-context-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    padding: 0 0 1rem;
}

.watchlist-context-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.watchlist-context-meta strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.watchlist-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.watchlist-context-grid section {
    min-width: 0;
    padding: 0.85rem;
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.32);
}

.watchlist-context-grid h3 {
    margin: 0 0 0.4rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.watchlist-context-grid p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.watchlist-context-editor {
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.watchlist-context-editor > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.watchlist-context-editor > summary::-webkit-details-marker {
    display: none;
}

.watchlist-context-editor[open] > summary > .bi-chevron-down {
    transform: rotate(180deg);
}

.watchlist-context-form {
    display: grid;
    gap: 0.85rem;
    padding-top: 1rem;
}

.watchlist-context-form label {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.watchlist-context-form label > span {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
}

.watchlist-context-form textarea,
.watchlist-context-form select,
.watchlist-context-form input[type="date"] {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(8, 15, 30, 0.72);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.86rem;
}

.watchlist-context-form textarea {
    padding: 0.75rem;
    line-height: 1.45;
    resize: vertical;
}

.watchlist-context-form select,
.watchlist-context-form input[type="date"] {
    min-height: 2.65rem;
    padding: 0.6rem 0.7rem;
}

.watchlist-context-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.watchlist-context-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.watchlist-context-form-footer > span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.watchlist-context-form-footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.95rem;
    border: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 720px) {
    .watchlist-companion-card {
        padding: 1rem;
    }

    .watchlist-market-facts,
    .watchlist-context-grid,
    .watchlist-context-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .watchlist-context-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .watchlist-context-form-footer button {
        width: 100%;
    }
}

/* Portfolio */
.portfolio-page {
    padding-bottom: 2.5rem;
}

.portfolio-positions-surface,
.portfolio-table-panel,
.portfolio-chart-panel,
.portfolio-ai-panel {
    margin-bottom: 1.5rem;
}

.portfolio-disclosure {
    margin-bottom: 1.5rem;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.portfolio-disclosure > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.portfolio-disclosure > summary::-webkit-details-marker {
    display: none;
}

.portfolio-disclosure > summary > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.portfolio-disclosure > summary > span:first-child i {
    color: var(--accent-blue);
}

.portfolio-disclosure-chevron {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.portfolio-disclosure[open] .portfolio-disclosure-chevron {
    transform: rotate(180deg);
}

.portfolio-disclosure-content {
    padding: 0 1.1rem 1rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.55;
}

.portfolio-disclosure-content p {
    margin: 0;
}

.portfolio-disclosure-content p + p {
    margin-top: 0.45rem;
}

.portfolio-coverage-details {
    margin-top: -0.65rem;
    background: transparent;
}

.portfolio-coverage-details > summary {
    padding-block: 0.75rem;
    color: var(--text-secondary);
}

.portfolio-management > summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.portfolio-management-summary-copy {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.portfolio-management-content {
    padding: 0 0.85rem 0.85rem;
}

.portfolio-management-content .portfolio-layout {
    margin-bottom: 0;
    max-width: none;
}

.portfolio-management-content .portfolio-form-panel {
    border-color: rgba(255, 255, 255, 0.05);
}

.portfolio-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.portfolio-section-heading h3 {
    margin-bottom: 0;
}

.portfolio-section-kicker {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.portfolio-section-count {
    flex: 0 0 auto;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.portfolio-feedback {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.portfolio-feedback.success {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: #86efac;
}

.portfolio-feedback.error {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: #fca5a5;
}

.portfolio-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.portfolio-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.portfolio-summary-card.positive {
    border-color: var(--positive-border);
    background: linear-gradient(135deg, var(--positive-bg), var(--bg-card));
}

.portfolio-summary-card.negative {
    border-color: var(--negative-border);
    background: linear-gradient(135deg, var(--negative-bg), var(--bg-card));
}

.portfolio-summary-main {
    border-color: var(--border-accent);
    background: linear-gradient(135deg, var(--accent-soft), var(--bg-card));
}

.portfolio-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.portfolio-summary-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.portfolio-summary-sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.portfolio-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.portfolio-layout-single {
    grid-template-columns: 1fr;
    max-width: 640px;
    width: 100%;
    min-width: 0;
}

.portfolio-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.35rem;
    min-width: 0;
}

.portfolio-panel h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
}

.portfolio-panel h3 i {
    color: var(--accent-blue);
}

.portfolio-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.portfolio-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.portfolio-field span {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portfolio-field input {
    padding: 0.7rem 0.85rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.portfolio-field input:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-medium);
}

.portfolio-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.portfolio-submit-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.portfolio-form-hint {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.portfolio-import-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 1.35rem 0;
}

.portfolio-import-section h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
}

.portfolio-import-section h4 i {
    color: #22c55e;
}

.portfolio-import-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0 0 0.85rem;
    line-height: 1.5;
}

.portfolio-import-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.portfolio-import-heading h4 {
    margin: 0;
}

.csv-formats-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid var(--border-accent);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.csv-formats-info-btn:hover,
.csv-formats-info-btn.active {
    background: var(--accent-medium);
    border-color: var(--border-accent);
    color: #c7d2fe;
}

.csv-formats-help {
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--accent-soft);
    border: 1px solid var(--accent-medium);
    border-radius: var(--radius-md);
}

.csv-formats-auto {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
}

.csv-formats-auto i {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.csv-detect-status {
    margin-top: 0.85rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.csv-detect-status.detected {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: #86efac;
}

.csv-detect-status.manual {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.csv-detect-status.error {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: #fca5a5;
}

.csv-detect-status > span {
    min-width: 0;
}

.csv-mapping-panel {
    margin-top: 0.85rem;
    padding: 0.9rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.csv-mapping-title {
    margin: 0 0 0.75rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.csv-mapping-title i {
    color: #fbbf24;
}

.csv-mapping-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.csv-mapping-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.csv-mapping-field span {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.csv-mapping-field select {
    padding: 0.55rem 0.65rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}

.csv-mapping-field select:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-medium);
}

.csv-mapping-optional {
    grid-column: 1 / -1;
}

.csv-preview-table-wrap {
    margin-top: 0.85rem;
}

.csv-preview-label {
    margin: 0 0 0.45rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.csv-preview-scroll {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.csv-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.csv-preview-table th,
.csv-preview-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    white-space: nowrap;
}

.csv-preview-table th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-weight: 600;
}

.csv-preview-table td {
    color: var(--text-secondary);
}

.portfolio-import-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* Comparateur d'actifs */
.compare-page {
    padding-bottom: 2.5rem;
}

.compare-form-panel,
.compare-table-panel,
.compare-chart-panel,
.compare-ai-panel,
.compare-error-panel {
    margin-bottom: 1.25rem;
}

.compare-form-panel h3 i,
.compare-table-panel h3 i {
    color: var(--accent-solid);
}

.compare-form {
    margin-top: 1rem;
}

.compare-inputs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.compare-input-group label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.compare-input-group .required {
    color: var(--negative-text);
}

.compare-symbol-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.compare-symbol-input:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.compare-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.15rem;
    background: linear-gradient(135deg, var(--accent-solid), var(--accent-deep));
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.compare-submit-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.compare-table-wrap {
    overflow-x: auto;
    margin-top: 1rem;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.compare-table th,
.compare-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: middle;
}

.compare-table thead th {
    background: rgba(255, 255, 255, 0.03);
    font-weight: 600;
    color: var(--text-primary);
}

.compare-metric-col {
    min-width: 160px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* COMPARE-UX-1a — séparateur discret avant les repères de score : les
   données factuelles priment, le score est cadré comme repère descriptif. */
.compare-score-separator td {
    padding-top: 1.1rem;
}

.compare-score-separator-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.compare-score-separator-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    white-space: normal;
}

.compare-asset-link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: inherit;
}

.compare-asset-link:hover .compare-asset-symbol {
    color: var(--accent-hover);
}

.compare-asset-symbol {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.compare-asset-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-range-cell {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 120px;
}

.compare-range-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.compare-range-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-solid), #8b5cf6);
    border-radius: 999px;
}

.compare-range-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.compare-horizon-row td:first-child {
    padding-left: 1.25rem;
    font-size: 0.84rem;
}

.compare-chart-panel {
    border-left: 3px solid var(--accent-solid);
}

.compare-chart-container {
    height: 340px;
    margin-top: 1rem;
}

.compare-ai-panel {
    grid-column: unset;
}

.compare-error-panel {
    border-left: 3px solid #ef4444;
}

.compare-error-msg {
    margin: 0;
    color: var(--negative-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.compare-error-list {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .compare-inputs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .compare-inputs {
        grid-template-columns: 1fr;
    }
}

/* Radar d'opportunités */
.radar-page {
    padding-bottom: 2.5rem;
}

.radar-section {
    margin-bottom: 2rem;
}

.radar-section-featured {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.06), var(--accent-soft));
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.35rem;
}

.radar-section-header {
    margin-bottom: 1rem;
}

.radar-section-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.radar-section-header h3 i {
    color: #f97316;
}

.radar-section-header p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.radar-grid {
    display: grid;
    gap: 0.85rem;
}

.radar-grid-compact {
    grid-template-columns: 1fr;
}

.radar-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.radar-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.radar-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    color: inherit;
}

.radar-card-pick {
    border-color: rgba(249, 115, 22, 0.45);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), var(--bg-card));
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.12);
}

.radar-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.radar-card-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}

.radar-rank {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent-medium);
    border: 1px solid var(--border-accent);
    color: var(--accent-hover);
    font-size: 0.72rem;
    font-weight: 700;
}

.radar-card-pick .radar-rank {
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-color: transparent;
    color: #fff;
}

.radar-card-symbol {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.radar-card-name {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.radar-pick-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #dc2626);
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.45);
    animation: regime-pulse 2s ease-in-out infinite;
}

.radar-card-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.radar-interpretation {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.radar-reason {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.radar-empty {
    margin: 0;
    padding: 1rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-subtle);
}

@media (max-width: 1100px) {
    .radar-columns {
        grid-template-columns: 1fr;
    }
}

.portfolio-import-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.portfolio-import-section {
    min-width: 0;
}

.portfolio-import-replace {
    flex: 1 0 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    background: rgba(245, 158, 11, 0.08);
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
    cursor: pointer;
}

.portfolio-import-replace input {
    margin-top: 0.15rem;
    accent-color: #22c55e;
}

.portfolio-import-replace strong {
    display: block;
    margin-top: 0.25rem;
    color: #fcd34d;
}

@media (max-width: 520px) {
    .portfolio-panel {
        padding: 1rem;
    }

    .portfolio-file-name {
        max-width: 140px;
    }
}

.portfolio-file-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    margin: 0;
}

.portfolio-file-label input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.portfolio-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--bg-surface);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: border-color 0.2s, color 0.2s;
}

.portfolio-file-label:hover .portfolio-file-btn {
    border-color: var(--positive-border);
    color: #86efac;
}

.portfolio-file-name {
    font-size: 0.82rem;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-import-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.1rem;
    background: linear-gradient(135deg, #15803d, #22c55e);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.portfolio-import-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.portfolio-dca-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent-hover);
    background: var(--accent-medium);
    border: 1px solid var(--accent-strong);
}

.portfolio-actions-cell {
    white-space: nowrap;
}

.portfolio-history-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    background: var(--accent-soft);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    color: var(--accent-hover);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.portfolio-history-btn:hover,
.portfolio-history-btn.active {
    background: var(--accent-medium);
    color: #c7d2fe;
}

.portfolio-history-row > td {
    padding: 0 !important;
    border-bottom: 1px solid var(--border-subtle);
}

.portfolio-history-panel {
    padding: 0.85rem 1rem 1rem;
    background: rgba(0, 0, 0, 0.18);
}

.portfolio-history-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.portfolio-lots-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.portfolio-lots-table th {
    text-align: left;
    padding: 0.5rem 0.65rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.portfolio-lots-table td {
    padding: 0.6rem 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.portfolio-lots-table tbody tr:last-child td {
    border-bottom: none;
}

.portfolio-chart-wrap {
    position: relative;
    height: 280px;
    max-width: 520px;
    margin-inline: auto;
}

.portfolio-empty {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-top: 0.5rem;
}

.portfolio-empty > i {
    font-size: 2.75rem;
    color: var(--accent-solid);
    opacity: 0.55;
    display: block;
    margin-bottom: 0.85rem;
}

.portfolio-empty h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.portfolio-empty p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.92rem;
}

.portfolio-table-wrap {
    overflow-x: auto;
}

.portfolio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.portfolio-table th {
    text-align: left;
    padding: 0.65rem 0.75rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.portfolio-table td {
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    vertical-align: middle;
}

.portfolio-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.portfolio-position-meta {
    white-space: nowrap;
}

.portfolio-asset-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.asset-identity-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.asset-identity-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.portfolio-asset-link .asset-identity-symbol {
    color: var(--text-primary);
    font-weight: 600;
}

.portfolio-asset-link .asset-identity-name,
.portfolio-asset-link .asset-identity-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-asset-link .asset-identity-meta {
    font-size: 0.72rem;
}

.portfolio-asset-link:hover .asset-identity-symbol {
    color: var(--accent-blue);
}

.pnl-positive {
    color: #22c55e;
    font-weight: 600;
}

.pnl-negative {
    color: #ef4444;
    font-weight: 600;
}

.portfolio-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 0.35rem;
    color: #fff;
}

.portfolio-score-badge.score-neutral {
    color: #1a1a1a;
}

.portfolio-score-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.portfolio-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--negative-border);
    border-radius: var(--radius-md);
    background: var(--negative-bg);
    color: #fca5a5;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.portfolio-delete-btn:hover {
    background: var(--negative-border);
    color: #fecaca;
}

.portfolio-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .portfolio-layout {
        grid-template-columns: 1fr;
    }

    .portfolio-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .portfolio-management > summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .portfolio-management-summary-copy {
        display: none;
    }

    .portfolio-table-wrap {
        overflow: visible;
    }

    .portfolio-table,
    .portfolio-table > tbody,
    .portfolio-table > tbody > tr,
    .portfolio-table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .portfolio-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .portfolio-table .portfolio-group-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .portfolio-table .portfolio-group-row:hover {
        background: transparent;
    }

    .portfolio-table .portfolio-group-row > td {
        padding: 0;
        border: 0;
    }

    .portfolio-position-identity {
        grid-column: 1 / -1;
    }

    .portfolio-table .portfolio-position-meta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        grid-column: 1 / -1;
        white-space: normal;
    }

    .portfolio-table .portfolio-position-meta::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .portfolio-actions-cell {
        grid-column: 1 / -1;
    }

    .portfolio-history-row:not([hidden]) {
        display: block;
    }

    .portfolio-history-row > td {
        padding: 0 0 1rem;
        border-bottom: 1px solid var(--border-subtle);
    }

    .portfolio-history-panel {
        overflow-x: auto;
    }
}

.rank-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
}

.rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a1a; }
.rank-2 { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: #1a1a1a; }
.rank-3 { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
.rank-default { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); border: 1px solid var(--border-subtle); }

/* Price row */
.price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.price-value {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.change-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.3rem 0.65rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.change-positive {
    color: var(--positive);
    background: var(--positive-bg);
}

.change-negative {
    color: var(--negative);
    background: var(--negative-bg);
}

.change-neutral {
    color: var(--neutral);
    background: rgba(148, 163, 184, 0.1);
}

/* Metrics */
html.mode-beginner .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    transition: grid-template-columns 0.3s ease;
}

.metric-item {
    padding: 0.55rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    text-align: center;
}

.metric-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.metric-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Score */
.score-section {
    padding-top: 0.25rem;
}

.score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.score-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.score-interpretation {
    margin: 0.45rem 0 0;
    font-size: 0.72rem;
    font-style: italic;
    line-height: 1.35;
}

.signal-strong { color: #22c55e; }
.signal-good { color: var(--positive-text); }
.signal-neutral { color: #eab308; }
.signal-weak { color: #f97316; }
.signal-risky { color: #ef4444; }

.score-confidence {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.3rem 0 0;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.3;
}

.score-confidence i {
    font-size: 0.78rem;
}

.confidence-high { color: #22d3ee; }
.confidence-medium { color: #eab308; }
.confidence-low { color: #f97316; }

/* ── Horizon tabs ─────────────────────────────────────────── */

.horizon-score-block {
    width: 100%;
}

.horizon-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.65rem;
    padding: 0.2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.horizon-tab {
    flex: 1;
    padding: 0.35rem 0.4rem;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.horizon-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.horizon-tab.active {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px var(--accent-strong);
}

.horizon-score-compact .horizon-tab {
    font-size: 0.62rem;
    padding: 0.3rem 0.25rem;
}

.asset-global-score .horizon-tabs {
    max-width: 280px;
    margin-left: auto;
}

.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.2rem 0.55rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
}

.score-excellent { background: var(--score-excellent); }
.score-good { background: var(--score-good); }
.score-neutral { background: var(--score-neutral); color: #1a1a1a; }
.score-poor { background: var(--score-poor); }
.score-bad { background: var(--score-bad); }

.score-bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* News */
.card-news {
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.75rem;
    margin-top: auto;
}

.news-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-list li {
    padding: 0.3rem 0;
}

.news-list li + li {
    border-top: 1px solid var(--border-subtle);
}

.news-list a {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
    line-height: 1.35;
    transition: color 0.15s;
}

.news-list a:hover {
    color: var(--accent-blue);
}

.news-list a i {
    font-size: 0.65rem;
    margin-right: 0.25rem;
    opacity: 0.6;
}

.no-news {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Empty states */
.stocks-grid-empty,
.empty-state,
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--bg-surface);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}

.empty-state i,
.no-results i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.no-results {
    display: none;
}

.no-results.visible {
    display: block;
}

/* Info panels */
.info-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    padding-bottom: 2.5rem;
}

.info-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.info-panel h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.info-panel h3 i {
    color: var(--accent-violet);
}

.info-panel p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.legend-items .score-badge {
    font-size: 0.72rem;
    min-width: auto;
    padding: 0.15rem 0.45rem;
}

/* ── Asset detail page ────────────────────────────────────── */

.asset-page {
    padding-bottom: 2.5rem;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1.25rem 0 1.5rem;
    padding: 0.55rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.back-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-accent);
    background: var(--bg-card);
}

.asset-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.5rem;
}

.asset-hero-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.asset-hero-icon {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
}

.asset-title {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.asset-subtitle {
    margin: 0 0 0.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.asset-hero-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.asset-price {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.asset-price small {
    font-size: 0.5em;
    opacity: 0.6;
}

.asset-global-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    margin-top: 0.25rem;
    min-width: 180px;
}

.asset-global-score-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.score-bar-hero {
    width: 100%;
    max-width: 180px;
}

.asset-global-score .score-interpretation,
.asset-global-score .score-confidence {
    text-align: right;
    width: 100%;
    max-width: 220px;
    justify-content: flex-end;
}

.asset-companion {
    margin-bottom: 1.5rem;
}

.asset-companion-header {
    margin-bottom: 0.75rem;
}

.asset-companion-eyebrow {
    margin: 0 0 0.2rem;
    color: var(--accent-violet);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.asset-companion-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 650;
}

.asset-companion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.asset-companion-card {
    min-width: 0;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.asset-companion-card-header {
    margin-bottom: 0.7rem;
}

.asset-companion-card-header h3 {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 650;
}

.asset-companion-entries {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.asset-companion-entry {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.asset-companion-primary {
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.asset-companion-account,
.asset-companion-secondary,
.asset-companion-unknown,
.asset-companion-source {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.asset-companion-unknown {
    color: var(--text-secondary);
}

.asset-companion-link {
    color: inherit;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition: color 0.2s, text-decoration-color 0.2s;
}

.asset-companion-link:hover {
    color: var(--accent-violet);
    text-decoration-color: currentColor;
}

.asset-companion-link:focus-visible {
    border-radius: 0.2rem;
    outline: 2px solid var(--accent-violet);
    outline-offset: 3px;
}

.asset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.asset-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
}

.asset-panel h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.asset-panel h3 i {
    color: var(--accent-violet);
}

.panel-desc {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.chart-panel {
    grid-column: 1 / -1;
}

/* SCORE-SURFACE-2 : les styles du panneau « Repère de score » de la fiche actif
   (.score-summary-panel / .asset-score-secondary / .score-criteria-*) sont
   retirés avec le panneau. Les styles partagés du bloc horizon (score-badge,
   score-bar, .beginner-score-explainer…) restent : la watchlist les utilise. */

/* ── ASSET-UX-3 — contexte observé regroupé ─────────────────────────
   Chapeau pleine largeur + corps des modules Stocktwits / initiés / Congrès
   repliés (<details>).
   Trends reste ouvert : #trends-chart est un canvas Chart.js initialisé au
   chargement (cf. ASSET-UX-3-AUDIT, option C). */

.context-observed-heading {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
}

.context-observed-heading h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.context-observed-heading h3 i {
    color: var(--accent-violet);
}

.context-observed-heading .panel-desc {
    margin-bottom: 0;
}

.context-observed-details {
    margin-top: 0.25rem;
}

.context-observed-summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.85;
    padding: 0.3rem 0;
}

.context-observed-summary::-webkit-details-marker {
    display: none;
}

.context-observed-details[open] .context-observed-summary {
    margin-bottom: 0.6rem;
}

/* ── UX-1 — bloc « Et ensuite ? » (boucle MVP, suites neutres) ──────
   Wayfinding non prescriptif en fin de fiche : suivre / comparer / revenir. */

.next-step-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.next-step-action {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: border-color 0.2s, color 0.2s;
}

a.next-step-action:hover {
    border-color: var(--border-accent);
    color: var(--text-primary);
}

/* Indication non interactive (suivre via l'étoile du hero) : ton atténué. */
.next-step-hint {
    color: var(--text-muted);
}

/* ── READINGS-2b — « Questions utiles à se poser » (statique, transversal) ──
   Prolonge la lecture sans conclure ; liste neutre, distincte des 3 questions
   internes des lectures (.reading-questions). */

.useful-questions-list {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.useful-questions-list li {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ── Lectures pédagogiques (READINGS-2) ────────────────────────
   Le label est secondaire et neutre (pas de couleur de score) ; l'explication
   en 3 questions est l'artefact principal. */

.readings-panel {
    grid-column: 1 / -1;
    border-left: 3px solid var(--accent-violet);
}

.readings-list {
    display: grid;
    gap: 0.85rem;
}

.reading-card {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.reading-card-unavailable {
    opacity: 0.85;
}

.reading-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.reading-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.reading-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.reading-questions {
    margin: 0;
}

.reading-questions dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.reading-questions dt:first-child {
    margin-top: 0;
}

.reading-questions dd {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.reading-note {
    margin: 0.7rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

/* ── Google Trends panel ───────────────────────────────────── */

.trends-panel {
    border-left: 3px solid #22c55e;
}

.trends-panel h3 i {
    color: #22c55e;
}

.trends-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0.85rem 0 0.75rem;
}

.trends-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
}

.trends-rising {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: var(--positive-text);
}

.trends-stable {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #cbd5e1;
}

.trends-falling {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: var(--negative-text);
}

.trends-change {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.trends-change-up {
    color: var(--positive-text);
}

.trends-change-down {
    color: var(--negative-text);
}

.trends-chart-container {
    height: 110px;
    margin-top: 0.25rem;
}

/* ── Stocktwits panel ──────────────────────────────────────── */

.stocktwits-panel {
    border-left: 3px solid #3b82f6;
}

.stocktwits-panel h3 i {
    color: #3b82f6;
}

.stocktwits-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0.85rem 0 1rem;
}

.stocktwits-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
}

.stocktwits-bullish {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: var(--positive-text);
}

.stocktwits-bearish {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: var(--negative-text);
}

.stocktwits-neutral {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #cbd5e1;
}

.stocktwits-stats {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stocktwits-bull {
    color: var(--positive-text);
}

.stocktwits-bear {
    color: var(--negative-text);
}

.stocktwits-messages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stocktwits-message {
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.stocktwits-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
}

.stocktwits-username {
    font-weight: 600;
    color: #93c5fd;
}

.stocktwits-date {
    color: var(--text-muted);
}

.stocktwits-sentiment-badge {
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.stocktwits-sentiment-bullish {
    background: var(--positive-bg);
    color: var(--positive-text);
}

.stocktwits-sentiment-bearish {
    background: var(--negative-bg);
    color: var(--negative-text);
}

.stocktwits-sentiment-neutral {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

.stocktwits-body {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-secondary);
    word-break: break-word;
}

/* ── Insider trading (Form 4) ───────────────────────────────── */

/* ASSET-UX-1b — libellé neutre partagé (initiés / Congrès) : factuel, non
   directionnel, sans pastille colorée bullish / bearish. Remplace les anciens
   badges/indicateurs directionnels retirés du hero et des panneaux. */
.context-summary {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.insider-panel {
    border-left: 3px solid #a855f7;
}

.insider-panel h3 i {
    color: #a855f7;
}

.insider-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0.85rem 0 1rem;
}

.insider-stats {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.insider-table-wrap {
    overflow-x: auto;
}

.insider-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.insider-table th,
.insider-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: middle;
}

.insider-table thead th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.02);
}

.insider-tx-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.insider-tx-buy {
    background: var(--positive-bg);
    color: var(--positive-text);
}

.insider-tx-sell {
    background: var(--negative-bg);
    color: var(--negative-text);
}

/* ── Congress trading panel ─────────────────────────────────── */

.congress-panel {
    border-left: 3px solid #3b82f6;
}

.congress-panel h3 i {
    color: #3b82f6;
}

.congress-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0.85rem 0 1rem;
}

.congress-stats {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.congress-table-wrap {
    overflow-x: auto;
}

.congress-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.congress-table th,
.congress-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: middle;
}

.congress-table thead th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.02);
}

/* ── Dividend scanner ─────────────────────────────────────── */

.dividends-panel {
    border-left: 3px solid var(--positive-text);
}

.dividends-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.dividends-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 150px;
}

.dividends-filter-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.dividends-filter-input,
.dividends-filter-select {
    padding: 0.55rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.88rem;
}

.dividends-filter-group:first-child {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.dividends-filter-group:first-child .dividends-filter-input {
    width: 90px;
}

.dividends-filter-suffix {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-bottom: 0.55rem;
}

.dividends-filter-count {
    margin: 0 0 0 auto;
    font-size: 0.82rem;
    color: var(--text-muted);
    align-self: center;
}

.dividends-table-wrap {
    overflow-x: auto;
}

.dividends-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.dividends-table th,
.dividends-table td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: middle;
}

.dividends-table thead th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}

.dividends-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.dividends-table th.sortable:hover {
    color: var(--accent-blue);
}

.dividends-table th .sort-icon {
    font-size: 0.72rem;
    margin-left: 0.2rem;
    opacity: 0.65;
}

.dividends-table tbody tr:hover {
    background: var(--accent-soft);
}

.dividend-ticker-link {
    font-weight: 700;
    color: var(--accent-blue);
    text-decoration: none;
}

.dividend-ticker-link:hover {
    text-decoration: underline;
}

.dividend-name-cell {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dividend-yield-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.28);
    color: var(--positive-text);
}

.dividend-freq-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.dividend-freq-mensuel {
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
}

.dividend-freq-trimestriel {
    background: rgba(139, 92, 246, 0.14);
    color: #c4b5fd;
}

.dividend-freq-annuel {
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
}

.dividend-freq-inconnu {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
}

.dividend-score-badge {
    min-width: 2.2rem;
    text-align: center;
}

.dividend-watchlist-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: var(--radius-sm);
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dividend-watchlist-btn:hover {
    background: rgba(251, 191, 36, 0.18);
}

.dividend-watchlist-btn.active {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fde68a;
}

.dividend-watchlist-label {
    display: inline;
}

.dividends-empty {
    margin: 1rem 0 0;
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
}

@media (max-width: 900px) {
    .dividends-filter-count {
        margin-left: 0;
        width: 100%;
    }

    .dividend-watchlist-label {
        display: none;
    }
}

.congress-party {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.congress-party-democrat {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.congress-party-republican {
    background: var(--negative-bg);
    color: var(--negative-text);
    border: 1px solid var(--negative-border);
}

.congress-party-independent,
.congress-party-other {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

.congress-tx-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.congress-tx-buy {
    background: var(--positive-bg);
    color: var(--positive-text);
}

.congress-tx-sell {
    background: var(--negative-bg);
    color: var(--negative-text);
}

.key-metrics-panel {
    grid-column: 1 / -1;
}

.key-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.key-metric-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
}

.key-metric-card:hover {
    border-color: var(--border-accent);
}

.key-metric-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.key-metric-label i {
    font-size: 0.85rem;
    opacity: 0.7;
}

.key-metric-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.key-metric-positive {
    color: var(--positive);
}

.key-metric-negative {
    color: var(--negative);
}

.chart-container {
    position: relative;
    height: 320px;
    margin-top: 0.75rem;
}

.chart-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
    font-size: 0.9rem;
}

.criteria-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.criterion-item {
    padding-bottom: 0.25rem;
}

.criterion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
}

.criterion-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

.criterion-weight {
    font-size: 0.72rem;
    color: var(--accent-violet);
    background: rgba(139, 92, 246, 0.12);
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
}

.criterion-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.criterion-desc {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.asset-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.asset-news-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.asset-news-item {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.asset-news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.asset-news-title {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    margin-bottom: 0.35rem;
    transition: color 0.15s;
}

.asset-news-title:hover {
    color: var(--accent-blue);
}

.asset-news-title i {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    opacity: 0.5;
}

.asset-news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.asset-news-meta i {
    margin-right: 0.25rem;
    opacity: 0.7;
}

/* Badge de provenance des actualités — partagé fiche actif + /actualites
   (D-NEWS-1). Style unique volontairement neutre : la classe de provenance
   (news-provenance-<classe>) ne change pas la couleur, aucun jugement visuel. */
.news-provenance-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    background: var(--bg-card-hover);
}

.news-panel {
    grid-column: 1 / -1;
}

/* ── Portfolio AI analysis ────────────────────────────────── */

.portfolio-ai-panel {
    margin-bottom: 1.5rem;
    border-left: 3px solid #8b5cf6;
}

.portfolio-ai-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.portfolio-ai-header h3 i {
    color: #a78bfa;
}

.portfolio-ai-desc {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.portfolio-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.15rem;
    background: linear-gradient(135deg, #7c3aed, var(--accent-deep));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.25);
}

.portfolio-ai-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
}

.portfolio-ai-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.portfolio-ai-loading {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    margin-top: 0.75rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius-md);
    color: var(--accent-hover);
    font-size: 0.88rem;
}

.portfolio-ai-spinner {
    width: 1.35rem;
    height: 1.35rem;
    border: 2px solid rgba(165, 180, 252, 0.25);
    border-top-color: var(--accent-hover);
    border-radius: 50%;
    animation: portfolio-ai-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes portfolio-ai-spin {
    to { transform: rotate(360deg); }
}

.portfolio-ai-error {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    border-radius: var(--radius-md);
    color: var(--negative-text);
    font-size: 0.88rem;
}

.portfolio-ai-stream-wrap {
    margin-top: 0.85rem;
    padding: 1rem 1.15rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.portfolio-ai-stream {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-secondary);
    white-space: pre-wrap;
    min-height: 2rem;
}

.portfolio-ai-stream::after {
    content: "▋";
    display: inline;
    color: #a78bfa;
    animation: portfolio-ai-blink 1s step-end infinite;
    margin-left: 2px;
}

.portfolio-ai-stream-wrap.done .portfolio-ai-stream::after {
    display: none;
}

@keyframes portfolio-ai-blink {
    50% { opacity: 0; }
}

/* Flux d'analyse par actif (lot streaming SSE) : texte brut au fil de l'eau,
   reformaté en sections à la fin. Réutilise tokens + caret du flux portefeuille. */
.ai-stream {
    margin-top: 0.85rem;
    padding: 1rem 1.15rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    min-height: 2.5rem;
}

.ai-stream.streaming::after {
    content: "▋";
    color: #a78bfa;
    animation: portfolio-ai-blink 1s step-end infinite;
    margin-left: 2px;
}

.portfolio-ai-accordion {
    margin-top: 0.85rem;
}

.portfolio-ai-accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.portfolio-ai-accordion-item + .portfolio-ai-accordion-item {
    border-top: none;
}

.portfolio-ai-accordion .accordion-button {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    gap: 0.55rem;
    box-shadow: none;
}

.portfolio-ai-accordion .accordion-button:not(.collapsed) {
    background: rgba(139, 92, 246, 0.12);
    color: #e9d5ff;
}

.portfolio-ai-accordion .accordion-button::after {
    filter: invert(0.85);
}

.portfolio-ai-section-icon {
    color: #a78bfa;
    font-size: 1rem;
}

.portfolio-ai-accordion-body {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.portfolio-ai-accordion-body p {
    margin: 0 0 0.75rem;
}

.portfolio-ai-accordion-body p:last-child {
    margin-bottom: 0;
}

.portfolio-ai-accordion-body ul {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
}

.portfolio-ai-accordion-body li {
    margin-bottom: 0.35rem;
}

.portfolio-ai-accordion-body strong {
    color: var(--text-primary);
}

/* ── Auth & pricing ─────────────────────────────────────────── */

.header-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.header-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 220px;
}

.header-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.header-plan-badge {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.plan-free { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; }
.plan-premium { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
.plan-premium_plus { background: rgba(251, 191, 36, 0.2); color: #fde68a; }

.header-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    /* Langage "pill" cohérent avec la nav et le chip utilisateur. */
    border-radius: 2rem;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--bg-card);
}

.header-auth-btn:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
    border-color: var(--border-accent);
}

.header-auth-register {
    background: linear-gradient(135deg, var(--accent-solid), var(--accent-deep));
    border-color: transparent;
    color: #fff;
}

.auth-page {
    display: flex;
    justify-content: center;
    padding: 2rem 0 3rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 1.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.auth-card h2 {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
}

.auth-subtitle {
    margin: 0 0 1.25rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.auth-field span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.auth-field input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.auth-submit-btn {
    margin-top: 0.35rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--accent-solid), var(--accent-deep));
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.auth-feedback {
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.auth-feedback.error {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: var(--negative-text);
}

.auth-feedback.success {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: var(--positive-text);
}

.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.auth-inline-link {
    font-size: 0.85rem;
    color: var(--accent-blue);
    white-space: nowrap;
}

.auth-footer-link {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.auth-footer-link a {
    color: var(--accent-blue);
}

.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.auth-google-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.auth-google-icon {
    flex-shrink: 0;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.auth-feedback.success {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: var(--positive-text);
}

.page-banner {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.pricing-page {
    padding-bottom: 3rem;
}

.pricing-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-hero h2 {
    margin-bottom: 0.5rem;
}

.pricing-hero p {
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 320px));
    justify-content: center;
    gap: 1.25rem;
    max-width: 700px;
    margin-inline: auto;
}

.pricing-card {
    position: relative;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.pricing-card-popular {
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.15);
}

.pricing-badge {
    position: absolute;
    top: -0.65rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.65rem;
    background: linear-gradient(135deg, #7c3aed, var(--accent-deep));
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.pricing-card h3 {
    margin: 0.5rem 0 0.35rem;
    font-size: 1.2rem;
}

.pricing-price {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0 1rem;
}

.pricing-price span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pricing-features i {
    color: var(--positive-text);
    margin-top: 0.1rem;
}

.pricing-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.pricing-btn-outline {
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    background: transparent;
}

.pricing-btn-primary {
    background: linear-gradient(135deg, #7c3aed, var(--accent-deep));
    color: #fff;
}

.pricing-btn-accent {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.pricing-current {
    display: block;
    text-align: center;
    padding: 0.65rem;
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    border-radius: var(--radius-md);
    color: var(--positive-text);
    font-weight: 600;
    font-size: 0.85rem;
}

.pricing-note {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.pricing-feedback {
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-feedback.success {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: var(--positive-text);
}

.pricing-feedback.error {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: var(--negative-text);
}

.pricing-checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.pricing-checkout-overlay[hidden] {
    display: none !important;
}

.pricing-checkout-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.pricing-checkout-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(165, 180, 252, 0.25);
    border-top-color: var(--accent-hover);
    border-radius: 50%;
    animation: portfolio-ai-spin 0.8s linear infinite;
}

.pricing-checkout-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.upgrade-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.upgrade-modal .modal-header {
    border-bottom-color: var(--border-subtle);
}

.upgrade-modal .modal-footer {
    border-top-color: var(--border-subtle);
}

.upgrade-modal-plan {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #c4b5fd;
    font-size: 0.78rem;
    font-weight: 600;
}

.upgrade-modal-cta {
    background: linear-gradient(135deg, #7c3aed, var(--accent-deep));
    border: none;
    color: #fff;
    font-weight: 600;
}

.ai-panel-locked {
    opacity: 0.92;
}

@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Sous 1400px, l'email du chip utilisateur disparaît (le titre du chip
   le conserve au survol) pour préserver la rangée unique du header. */
@media (max-width: 1400px) {
    .header-user-email {
        display: none;
    }
}

/* ── AI analysis panel ────────────────────────────────────── */

.ai-panel {
    grid-column: 1 / -1;
    border-left: 3px solid var(--accent-violet);
}

.ai-panel-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.ai-panel-header h3 i {
    color: var(--accent-violet);
}

/* Avant-goût IA gratuit : compteur « X analyses restantes » / libellé de relecture. */
.ai-quota-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--accent-hover);
}

.ai-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.15rem;
    background: linear-gradient(135deg, #7c3aed, var(--accent-deep));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.25);
}

.ai-generate-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(124, 58, 237, 0.35);
}

.ai-generate-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ai-generate-btn.loading span {
    opacity: 0.75;
}

.ai-feedback {
    display: none;
    margin: 0.75rem 0;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.ai-feedback.visible {
    display: block;
}

.ai-feedback.info {
    background: var(--accent-soft);
    border: 1px solid var(--accent-strong);
    color: var(--accent-hover);
}

.ai-feedback.success {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: var(--positive-text);
}

.ai-feedback.error {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: var(--negative-text);
}

.ai-result {
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    line-height: 1.7;
}

.ai-section-title {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-violet);
    letter-spacing: -0.01em;
}

.ai-result .ai-section-title:first-child {
    margin-top: 0;
}

.ai-result p {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.ai-result p:last-child {
    margin-bottom: 0;
}

.ai-result strong {
    color: var(--text-primary);
}

/* ── Asset chat panel ─────────────────────────────────────── */

.asset-chat-panel {
    margin-top: 1.25rem;
    border-left: 3px solid var(--accent-violet);
}

.asset-chat-header h3 i {
    color: var(--accent-violet);
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.chat-suggestion-btn {
    padding: 0.45rem 0.85rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-strong);
    border-radius: 999px;
    color: var(--accent-hover);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.chat-suggestion-btn:hover:not(:disabled) {
    background: var(--accent-medium);
    border-color: var(--border-accent);
    color: #c7d2fe;
}

.chat-suggestion-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 180px;
    max-height: 420px;
    overflow-y: auto;
    padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.chat-empty-hint {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 2rem 1rem;
}

.chat-bubble {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    line-height: 1.6;
    word-break: break-word;
}

.chat-bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--border-accent), rgba(79, 70, 229, 0.25));
    border: 1px solid var(--border-accent);
    color: var(--text-primary);
    border-bottom-right-radius: 4px;
}

.chat-bubble-assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    border-bottom-left-radius: 4px;
}

.chat-bubble-assistant strong {
    color: var(--text-primary);
}

.chat-bubble-assistant em {
    display: block;
    margin-top: 0.65rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.chat-bubble-loading {
    opacity: 0.85;
}

.chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-violet);
    font-size: 0.85rem;
}

.chat-form {
    margin-top: 0.25rem;
}

.chat-input-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.chat-input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.chat-input:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.chat-input:disabled {
    opacity: 0.6;
}

.chat-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    background: linear-gradient(135deg, var(--accent-solid), var(--accent-deep));
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.chat-send-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
}

.chat-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Bouton de repli du chat IA (mobile/tablette). Réutilise les tokens accent
   existants (mêmes que .chat-send-btn). Pleine largeur. */
.chat-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.15rem;
    background: linear-gradient(135deg, var(--accent-solid), var(--accent-deep));
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.chat-toggle-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* Mobile/tablette (<1024px) : le chat est replié par défaut.
   - zone chat masquée tant que le panneau n'a pas la classe .chat-open ;
   - le bouton disparaît une fois le chat ouvert. */
@media (max-width: 1023px) {
    #asset-chat-panel:not(.chat-open) .asset-chat-body {
        display: none;
    }

    #asset-chat-panel.chat-open .chat-toggle-btn {
        display: none;
    }
}

/* Desktop (>=1024px) : comportement inchangé — chat visible directement,
   bouton de repli jamais affiché. */
@media (min-width: 1024px) {
    .chat-toggle-btn {
        display: none;
    }
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Avertissement réglementaire : texte secondaire, sous le badge. */
.site-footer-legal {
    max-width: 760px;
    margin: 1rem auto 0;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.site-footer-legal-links {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.site-footer-legal-links a {
    color: var(--text-secondary);
    text-decoration: none;
}

.site-footer-legal-links a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Badge de provenance des données : de l'information, pas du chrome —
   il vit à côté du disclaimer, plus dans le header. */
.data-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.data-source-badge .pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--positive-text);
    animation: pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .data-source-badge .pulse-dot {
        animation: none;
    }
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 767px) {
    .hero-header-row {
        flex-direction: column;
    }

    .fear-greed-widget {
        width: 100%;
    }

    .header-inner {
        flex-wrap: wrap;
    }

    .header-mode-toggle {
        order: 2;
    }

    .mode-toggle-label {
        display: none;
    }

    .header-nav {
        order: 3;
        width: 100%;
        margin: 0.5rem 0 0;
        justify-content: center;
    }

    .nav-link {
        font-size: 0.78rem;
        padding: 0.4rem 0.7rem;
    }
}

@media (max-width: 992px) {
    .stocks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .asset-companion-grid {
        grid-template-columns: 1fr;
    }

    .asset-grid {
        grid-template-columns: 1fr;
    }

    .asset-hero-right {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .stocks-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        justify-content: start;
    }

    .key-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-container {
        height: 260px;
    }

    .asset-title {
        font-size: 1.4rem;
    }

    .asset-price {
        font-size: 1.6rem;
    }

    .stock-card {
        padding: 1rem;
    }

    .price-value {
        font-size: 1.4rem;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.35rem;
    }

    .metric-item {
        padding: 0.45rem 0.35rem;
    }

    .metric-value {
        font-size: 0.78rem;
    }

    .card-name {
        max-width: 140px;
    }

    .hero-block {
        padding: 1.25rem 0 1rem;
    }
}

@media (max-width: 380px) {
    /* Métriques des cartes (Volume/Cap./PER) : repli final en 1 colonne sur
       téléphone étroit, pour les DEUX modes. On cible aussi la variante
       html.mode-beginner .metrics-grid (spécificité supérieure) afin que le
       mode débutant tombe lui aussi à 1 colonne ici. Paliers (jamais auto-fit) :
       le couplage au toggle Débutant/Expert et son animation restent intacts. */
    .metrics-grid,
    html.mode-beginner .metrics-grid {
        grid-template-columns: 1fr;
    }

    .brand-logo-img {
        width: 132px;
        height: auto;
    }

    .brand-text h1 {
        font-size: 1.15rem;
    }

    .brand-logo {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
}

/* ── Dashboard redesign ───────────────────────────────────── */

.dashboard-page {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.dash-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dash-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.dash-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.fng-badge-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.78rem;
    color: var(--text-secondary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    transition: border-color 0.15s;
    flex-shrink: 0;
}

.fng-badge-compact:hover {
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.fng-badge-score {
    font-weight: 700;
    font-size: 0.9rem;
}

.fng-badge-label {
    font-weight: 500;
}

.dash-macro-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.55rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 0.82rem;
    color: var(--text-secondary);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
    transition: border-color 0.15s;
}

.dash-macro-strip:hover {
    border-color: var(--accent-strong);
    color: var(--text-primary);
}

.dash-macro-strip strong {
    color: var(--text-primary);
    font-weight: 600;
}

.dash-macro-sep {
    color: var(--text-muted);
    opacity: 0.5;
}

.dash-macro-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.5;
}

.dash-macro-strip-muted code {
    font-size: 0.75rem;
}

.dash-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.dash-search-form {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: min(100%, 280px);
    gap: 0.35rem;
}

.dash-search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.dash-search-input-wrap > .bi-search {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    pointer-events: none;
}

.dash-search-input {
    width: 100%;
    padding: 0.6rem 0.85rem 0.6rem 2.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.88rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.dash-search-input:focus {
    outline: none;
    border-color: var(--border-accent);
}

.dash-search-btn {
    padding: 0 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.dash-search-btn:hover {
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.dash-search-feedback {
    width: 100%;
    margin-top: -0.75rem;
    margin-bottom: 0.5rem;
}

.dash-controls-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dash-risk-bar {
    margin: 0;
    padding: 0.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.dash-risk-bar .risk-filter-btn {
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
}

.dash-horizon-picker {
    display: flex;
    padding: 0.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.dash-horizon-btn {
    padding: 0.4rem 0.55rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dash-horizon-btn.active {
    background: var(--accent-medium);
    color: var(--accent-hover);
}

.dash-view-toggle {
    display: flex;
    padding: 0.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.dash-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.65rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dash-view-btn.active {
    background: var(--accent-medium);
    color: #c7d2fe;
}

.dash-view-hidden {
    display: none !important;
}

.dash-section-label {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.dash-table-wrap {
    margin-bottom: 2rem;
}

.stocks-table-scroll {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.28);
}

.stocks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.stocks-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.stocks-table th {
    padding: 0.7rem 0.85rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.stocks-th-num {
    text-align: right;
}

.stocks-th-star {
    width: 48px;
    text-align: center;
}

.stocks-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.stocks-th-sortable:hover {
    color: var(--text-primary);
}

.stocks-th-sortable.sort-asc::after,
.stocks-th-sortable.sort-desc::after {
    margin-left: 0.25rem;
    font-size: 0.65rem;
    opacity: 0.7;
}

.stocks-th-sortable.sort-asc::after {
    content: "▲";
}

.stocks-th-sortable.sort-desc::after {
    content: "▼";
}

.stocks-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.stocks-table tbody tr {
    transition: background 0.12s;
}

.stocks-table tbody tr:hover {
    background: var(--accent-soft);
}

.stocks-table-row.is-hidden,
.stocks-table-row.is-paginated-hidden {
    display: none;
}

.stocks-td-ticker {
    font-weight: 600;
    white-space: nowrap;
}

.stocks-ticker-link {
    color: var(--text-primary);
    text-decoration: none;
}

.stocks-ticker-link:hover {
    color: var(--accent-hover);
}

.stocks-ticker-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border-radius: 999px;
    vertical-align: middle;
}

.stocks-td-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.stocks-evidence {
    display: block;
    margin-top: 0.2rem;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    text-overflow: ellipsis;
}

.market-universe-stale {
    color: var(--score-poor);
    font-weight: 600;
}

.market-universe-status {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1rem 0 2rem;
    padding: 0.85rem 1rem;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.card-evidence {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.stocks-td-price,
.stocks-td-change,
.stocks-td-score {
    text-align: right;
    white-space: nowrap;
}

.stocks-change {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    font-weight: 600;
    font-size: 0.82rem;
}

.stocks-change-up {
    color: var(--positive-text);
}

.stocks-change-down {
    color: var(--negative-text);
}

.stocks-change-flat {
    color: var(--text-muted);
}

.stocks-td-score .score-badge {
    min-width: 2.2rem;
    text-align: center;
}

.stocks-signal {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.stocks-horizon-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.stocks-td-star {
    text-align: center;
}

.stocks-td-star .watchlist-star {
    margin: 0 auto;
}

.stocks-table-empty td {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.dash-cards-view {
    margin-bottom: 2rem;
}

.dash-no-results {
    margin: 1rem 0 2rem;
}

.dash-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.dash-page-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.dash-page-btn:hover,
.dash-page-btn.active {
    border-color: var(--border-accent);
    color: #c7d2fe;
}

.dash-page-ellipsis {
    color: var(--text-muted);
    padding: 0 0.25rem;
}

.dash-footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}

.dash-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.dash-legend .score-badge {
    font-size: 0.68rem;
    padding: 0.1rem 0.35rem;
    margin-right: 0.2rem;
}

.dash-settings-link {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.dash-settings-link:hover {
    color: var(--accent-blue);
}

.macro-page {
    padding: 2rem 0 3rem;
}

.macro-page-header {
    margin-bottom: 1.5rem;
}

.macro-page-header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
}

.macro-page-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.macro-page-header .macro-page-disclaimer {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.macro-page .macro-context-panel {
    margin-top: 0;
}

.macro-page-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.settings-page {
    padding: 2rem 0 3rem;
    max-width: 720px;
}

.settings-flash-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.settings-flash {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.45;
}

.settings-flash-success {
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
    color: #86efac;
}

.settings-flash-error {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: #fca5a5;
}

.settings-flash-info {
    background: var(--accent-soft);
    border: 1px solid var(--accent-medium);
    color: var(--accent-hover);
}

.settings-info-grid {
    margin: 0 0 1.25rem;
    display: grid;
    gap: 0.65rem;
}

.settings-info-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.875rem;
}

.settings-info-row dt {
    margin: 0;
    color: var(--text-muted);
    font-weight: 500;
}

.settings-info-row dd {
    margin: 0;
    color: var(--text-primary);
    word-break: break-all;
}

.settings-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    background: var(--accent-soft);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--accent-hover);
}

.settings-form {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.settings-form-title {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.settings-field {
    margin-bottom: 0.85rem;
}

.settings-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.settings-field label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-field input[type="email"],
.settings-field input[type="password"],
.settings-field input[type="text"],
.settings-field input[type="number"] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.settings-field input:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--accent-medium);
}

.settings-hint,
.settings-hint-inline {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.settings-hint-inline {
    margin-top: 0.15rem;
}

.settings-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.settings-plan-badge {
    display: inline-flex;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.settings-plan-badge-free {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.settings-plan-badge-premium {
    background: var(--accent-medium);
    color: var(--accent-hover);
    border: 1px solid var(--border-accent);
}

.settings-plan-badge-premium_plus {
    background: rgba(124, 58, 237, 0.15);
    color: #c4b5fd;
    border: 1px solid rgba(124, 58, 237, 0.35);
}

.settings-plan-badge-admin {
    background: rgba(250, 204, 21, 0.12);
    color: #fde047;
    border: 1px solid rgba(250, 204, 21, 0.3);
}

.settings-plan-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-plan-price small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.settings-actions {
    margin-top: 0.75rem;
}

.settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.settings-btn-primary {
    background: linear-gradient(135deg, var(--accent-solid), #7c3aed);
    color: #fff;
}

.settings-btn-primary:hover {
    filter: brightness(1.08);
    color: #fff;
}

.settings-btn-outline {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.settings-btn-outline:hover {
    border-color: var(--border-accent);
    color: var(--accent-hover);
}

.settings-btn-danger {
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    color: #fca5a5;
}

.settings-btn-danger:hover:not(:disabled) {
    background: var(--negative-border);
}

.settings-btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.settings-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.settings-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
}

.settings-toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.settings-toggle input:checked + .settings-toggle-slider {
    background: var(--accent-solid);
}

.settings-toggle input:checked + .settings-toggle-slider::before {
    transform: translateX(20px);
}

.settings-panel-danger {
    border-color: var(--negative-border);
}

.settings-panel-danger .settings-panel-head > i {
    color: var(--negative-text);
}

.settings-danger-text {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.settings-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.settings-modal[hidden] {
    display: none !important;
}

.settings-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.settings-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--negative-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.settings-modal-dialog h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: #fca5a5;
}

.settings-modal-dialog p {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.settings-modal-dialog label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.settings-modal-dialog input[type="text"] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    margin-bottom: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.settings-modal-dialog code {
    color: #fca5a5;
    font-weight: 600;
}

.settings-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

body.settings-modal-open {
    overflow: hidden;
}

@media (max-width: 576px) {
    .settings-field-row {
        grid-template-columns: 1fr;
    }

    .settings-info-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

.settings-header {
    margin-bottom: 1.5rem;
}

.settings-header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
}

.settings-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.settings-panel {
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

.settings-panel-head {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.settings-panel-head > i {
    font-size: 1.25rem;
    color: var(--accent);
    margin-top: 0.15rem;
}

.settings-panel-head h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.settings-panel-head p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.settings-alerts-form {
    max-width: 100%;
}

.settings-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-medium);
    border-radius: var(--radius-md);
    color: var(--accent-hover);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

@media (max-width: 992px) {
    .dash-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-controls-right {
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .dash-topbar {
        flex-direction: column;
    }

    .fng-badge-compact {
        align-self: flex-start;
    }

    .dash-macro-strip {
        font-size: 0.78rem;
    }

    .dash-footer-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .stocks-td-name,
    .stocks-td-signal {
        display: none;
    }

}

/* ── Landing page ─────────────────────────────────────────── */

.landing-page {
    background: var(--bg-body);
}

/* Le header landing conserve (pour l'instant) son bandeau dégradé
   historique — la refonte slim ne concerne que le header applicatif.
   À retirer lors de la session dédiée à la landing. */
.landing-header {
    background: var(--accent-gradient);
    border-bottom: 1px solid var(--border-hover);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.landing-header::after {
    display: none;
}

.landing-header .header-inner {
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 72px;
    padding: 0.875rem 0;
}

.landing-header .nav-link {
    color: rgba(255, 255, 255, 0.75);
}

.landing-header .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.landing-header .header-auth-btn {
    border-radius: var(--radius-sm);
}

.landing-nav {
    margin-left: auto;
}

.landing-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 4rem;
}

.landing-hero-glow {
    position: absolute;
    inset: -20% -10% auto;
    height: 70%;
    background:
        radial-gradient(ellipse at 30% 20%, var(--accent-medium), transparent 55%),
        radial-gradient(ellipse at 70% 10%, rgba(124, 58, 237, 0.18), transparent 50%);
    pointer-events: none;
}

.landing-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 2.5rem;
    align-items: center;
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.35rem 0.75rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-medium);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-hover);
}

.landing-hero-title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #f8fafc 0%, #c7d2fe 55%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-hero-subtitle {
    margin: 0 0 1.75rem;
    max-width: 520px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.35rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.landing-btn:hover {
    transform: translateY(-1px);
    color: inherit;
}

.landing-btn-primary {
    background: linear-gradient(135deg, var(--accent-solid), var(--accent-deep));
    color: #fff;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
}

.landing-btn-primary:hover {
    color: #fff;
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.45);
}

.landing-btn-ghost {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.landing-btn-ghost:hover {
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.landing-hero-banner {
    margin-bottom: 1rem;
}

.landing-mockup {
    perspective: 1200px;
    animation: landing-mockup-float 6s ease-in-out infinite;
}

@keyframes landing-mockup-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.landing-mockup-window {
    transform: rotateY(-8deg) rotateX(4deg);
    background: var(--bg-card);
    border: 1px solid var(--accent-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), var(--shadow-glow);
    overflow: hidden;
}

.landing-mockup-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.landing-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.35);
}

.landing-mockup-dot:nth-child(1) { background: #ef4444; }
.landing-mockup-dot:nth-child(2) { background: #eab308; }
.landing-mockup-dot:nth-child(3) { background: #22c55e; }

.landing-mockup-title {
    margin-left: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.landing-mockup-body {
    padding: 1rem;
}

.landing-mockup-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.landing-mockup-stat {
    padding: 0.55rem 0.65rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    color: var(--text-muted);
}

.landing-mockup-stat strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.landing-mockup-stat.positive strong {
    color: var(--positive-text);
}

.landing-mockup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.landing-mockup-card {
    padding: 0.65rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.landing-mockup-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.landing-mockup-symbol {
    font-weight: 700;
    font-size: 0.82rem;
}

.landing-mockup-score {
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.landing-mockup-score.score-excellent {
    background: var(--positive-bg);
    color: var(--positive-text);
}

.landing-mockup-score.score-good {
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
}

.landing-mockup-score.score-neutral {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
}

.landing-mockup-name {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-mockup-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
}

.landing-mockup-price em {
    font-style: normal;
    font-weight: 600;
}

.landing-mockup-price em.up { color: var(--positive-text); }
.landing-mockup-price em.down { color: var(--negative-text); }

.landing-mockup-chart {
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--accent-soft);
}

.landing-mockup-chart svg {
    width: 100%;
    height: 100%;
}

.landing-stats {
    padding: 2rem 0 3rem;
}

.landing-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.landing-stat-card {
    text-align: center;
    padding: 1.35rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s, transform 0.2s;
}

.landing-stat-card:hover {
    border-color: var(--accent-strong);
    transform: translateY(-2px);
}

.landing-stat-card i {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.35rem;
    color: var(--accent);
}

.landing-stat-card strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.2rem;
}

.landing-stat-card span {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.landing-features,
.landing-pricing {
    padding: 3.5rem 0;
}

.landing-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.landing-section-head h2 {
    margin: 0 0 0.65rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.landing-section-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.landing-feature-card {
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.landing-feature-card:hover {
    border-color: var(--accent-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.landing-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-medium);
    border-radius: var(--radius-md);
    color: var(--accent-hover);
    font-size: 1.2rem;
}

.landing-feature-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.landing-feature-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.landing-pricing .pricing-note {
    margin-top: 1.5rem;
}

.landing-footer {
    margin-top: 1rem;
    padding: 2.5rem 0 2rem;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}

.landing-footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1.5rem 2rem;
    align-items: start;
}

.landing-footer-logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.landing-footer-brand .brand-tagline {
    font-size: 0.72rem;
    opacity: 0.7;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    line-height: 1.4;
    max-width: 220px;
}

.landing-footer-brand .brand-text span {
    max-width: 220px;
    line-height: 1.3;
}

.landing-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.landing-footer-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.15s;
}

.landing-footer-nav a:hover {
    color: var(--text-primary);
}

.landing-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.landing-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.15s;
}

.landing-footer-contact a:hover {
    color: var(--accent-blue);
}

.landing-footer-copy {
    grid-column: 1 / -1;
    margin: 0.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

.landing-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.landing-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 992px) {
    .landing-hero-inner {
        grid-template-columns: 1fr;
    }

    .landing-mockup {
        max-width: 560px;
        margin: 0 auto;
    }

    .landing-mockup-window {
        transform: none;
    }

    .landing-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .landing-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .landing-hero {
        padding: 2.5rem 0 3rem;
    }

    .landing-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-features-grid {
        grid-template-columns: 1fr;
    }

    .landing-mockup-grid,
    .landing-mockup-stats {
        grid-template-columns: 1fr;
    }

    .landing-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .landing-footer-nav,
    .landing-footer-contact {
        align-items: center;
    }

    .landing-nav {
        display: none;
    }
}

/* ── Admin ──────────────────────────────────────────────────── */

.header-admin-link {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}

.header-admin-link:hover {
    opacity: 1;
}

.admin-page {
    padding: 2rem 0 3rem;
}

.admin-header {
    margin-bottom: 1.75rem;
}

.admin-header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.4rem;
}

.admin-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.admin-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.admin-metric-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.admin-metric-card > i {
    font-size: 1.35rem;
    color: var(--accent);
    margin-top: 0.15rem;
}

.admin-metric-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.admin-metric-value {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.admin-metric-value small {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.admin-metric-plans {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.78rem;
}

.plan-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.plan-admin {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.admin-panel {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

.admin-panel h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-panel-head h3 {
    margin: 0;
}

.admin-search-wrap {
    position: relative;
    min-width: min(100%, 260px);
}

.admin-search-wrap > i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.admin-search-input {
    width: 100%;
    padding: 0.55rem 0.75rem 0.55rem 2.1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.admin-table-scroll {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.admin-table th {
    padding: 0.65rem 0.75rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.admin-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: var(--accent-soft);
}

.admin-user-row.is-filtered-hidden,
.admin-user-row.is-page-hidden {
    display: none;
}

.admin-td-email {
    font-weight: 500;
}

.admin-td-stripe {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.admin-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.admin-plan-btn {
    padding: 0.35rem 0.65rem;
    background: var(--accent-medium);
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius-sm);
    color: var(--accent-hover);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.admin-plan-btn:hover {
    background: var(--accent-medium);
}

.admin-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    background: var(--accent-medium);
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius-sm);
    color: var(--accent-hover);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.admin-export-btn:hover {
    background: var(--accent-medium);
    color: #c7d2fe;
}

.admin-maintenance-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    vertical-align: middle;
}

.admin-maintenance-badge.on {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.35);
    color: #fdba74;
}

.admin-delete-btn {
    padding: 0.35rem 0.65rem;
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
    border-radius: var(--radius-sm);
    color: #fca5a5;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.admin-delete-btn:hover {
    background: var(--negative-border);
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.admin-page-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
}

.admin-page-btn.active,
.admin-page-btn:hover {
    border-color: var(--border-accent);
    color: #c7d2fe;
}

.admin-page-ellipsis {
    color: var(--text-muted);
}

.admin-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.admin-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-activity-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
}

.admin-activity-list li time {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.admin-activity-email {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-activity-empty {
    color: var(--text-muted);
}

.admin-health-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.admin-health-card {
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.admin-health-card h4 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-health-card p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.admin-health-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--accent-blue);
}

.admin-env-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
}

.admin-env-list li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    color: var(--text-secondary);
}

.admin-env-ok {
    color: var(--positive-text);
}

.admin-env-missing {
    color: var(--negative-text);
}

/* PRIVATE-1B1 — sauvegarde vieillissante (≥ 48 h) : avertissement, pas une
   panne. amber — même repère que .heading-icon-amber (pas de token scalaire). */
.admin-env-stale {
    color: #fbbf24;
}

.admin-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.admin-modal .modal-header,
.admin-modal .modal-footer {
    border-color: var(--border-subtle);
}

.admin-modal-email {
    margin: 0 0 1rem;
    font-weight: 600;
}

.admin-modal-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.admin-modal-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.admin-modal-cancel,
.admin-modal-confirm {
    padding: 0.55rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
}

.admin-modal-cancel {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.admin-modal-confirm {
    background: linear-gradient(135deg, var(--accent-solid), var(--accent-deep));
    border: none;
    color: #fff;
}

.admin-modal-feedback {
    margin-top: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}

.admin-modal-feedback.success {
    background: var(--positive-bg);
    color: var(--positive-text);
}

.admin-modal-feedback.error {
    background: var(--negative-bg);
    color: var(--negative-text);
}

@media (max-width: 992px) {
    .admin-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-two-col,
    .admin-health-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .admin-metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Pages d'erreur ─────────────────────────────────────────── */

.error-page {
    background: #0f0f1a;
    min-height: 100vh;
}

.error-page-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    padding: 2rem 1rem 3rem;
}

.error-page-card {
    width: 100%;
    max-width: 520px;
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.error-page-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

.error-page-404 .error-page-icon {
    color: var(--accent);
}

.error-page-500 .error-page-icon {
    color: var(--negative-text);
}

.error-page-403 .error-page-icon {
    color: #fb923c;
}

.error-code {
    margin: 0 0 0.5rem;
    font-size: clamp(5rem, 18vw, 8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error-code-404 {
    background-image: linear-gradient(135deg, #7c3aed 0%, var(--accent-solid) 50%, #38bdf8 100%);
}

.error-code-500 {
    background-image: linear-gradient(135deg, #ef4444 0%, #f97316 60%, #fb923c 100%);
}

.error-code-403 {
    background-image: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fbbf24 100%);
}

.error-code-animate {
    animation: error-code-float 4s ease-in-out infinite;
}

.error-code-pulse {
    animation: error-code-pulse 2.5s ease-in-out infinite;
}

@keyframes error-code-float {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-6px);
        opacity: 0.92;
    }
}

@keyframes error-code-pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.03);
        filter: brightness(1.12);
    }
}

.error-page-title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.error-page-message {
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
}

.error-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

/* OBS-9 — « ID incident » discret sur les pages d'erreur (corrèle au header
   X-Request-ID / aux logs). Petite ligne sobre, sans refonte. */
.error-page-incident {
    margin: 1.5rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.error-page-incident-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-secondary);
    word-break: break-all;
}

.error-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.15rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.15s, border-color 0.15s, background 0.15s;
}

.error-btn-primary {
    background: linear-gradient(135deg, var(--accent-solid), #7c3aed);
    color: #fff;
    border: none;
}

.error-btn-primary:hover {
    filter: brightness(1.08);
    color: #fff;
}

.error-btn-outline {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.error-btn-outline:hover {
    border-color: var(--border-accent);
    color: var(--accent-hover);
}

/* ── Notifications in-app ───────────────────────────────────── */

.header-notifications {
    position: relative;
}

.notif-bell-btn {
    position: relative;
}

.notif-bell-btn.dropdown-toggle::after {
    display: none;
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--negative);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

.notif-badge-hidden {
    display: none !important;
}

.notif-badge-pop {
    animation: notif-badge-pop 0.45s ease;
}

@keyframes notif-badge-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.notif-dropdown {
    width: min(360px, calc(100vw - 2rem));
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.notif-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.85rem;
}

.notif-mark-all-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
}

.notif-mark-all-btn:hover {
    text-decoration: underline;
}

.notif-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.notif-dropdown-item {
    display: flex;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.12s;
}

.notif-dropdown-item:hover {
    background: var(--accent-soft);
}

.notif-dropdown-item-unread {
    background: var(--accent-soft);
}

.notif-dropdown-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.95rem;
}

.notif-type-score_alert .notif-dropdown-icon,
.notif-type-score_alert.notif-item-icon {
    background: var(--positive-bg);
    color: var(--positive-text);
}

.notif-type-regime_change .notif-dropdown-icon,
.notif-type-regime_change.notif-item-icon {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.notif-type-new_feature .notif-dropdown-icon,
.notif-type-new_feature.notif-item-icon {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

.notif-type-payment .notif-dropdown-icon,
.notif-type-payment.notif-item-icon {
    background: var(--accent-medium);
    color: var(--accent);
}

.notif-dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.notif-dropdown-text strong {
    font-size: 0.82rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-dropdown-text span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-dropdown-text time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.notif-dropdown-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.notif-dropdown-foot {
    padding: 0.65rem 1rem;
    text-align: center;
    border-top: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.15);
}

.notif-dropdown-foot a {
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
}

.notif-dropdown-foot a:hover {
    text-decoration: underline;
}

.notifications-page {
    padding: 2rem 0 3rem;
    max-width: 720px;
}

.notifications-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.notifications-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
}

.notifications-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.notifications-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.notif-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s;
}

.notif-filter:hover,
.notif-filter.active {
    border-color: var(--border-accent);
    color: var(--accent-hover);
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    margin-bottom: 0.65rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    position: relative;
}

.notif-item:hover {
    border-color: var(--border-accent);
}

.notif-item-unread {
    border-color: var(--accent-medium);
    background: var(--accent-soft);
}

.notif-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.notif-item-title {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.notif-item-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.notif-item-message {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.notif-item-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.notif-unread-dot {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-solid);
}

.notif-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.notif-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.notif-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.notif-btn-outline {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.notif-btn-outline:hover {
    border-color: var(--border-accent);
    color: var(--accent-hover);
}

@media (max-width: 480px) {
    .error-page-card {
        padding: 2rem 1.25rem;
    }

    .error-page-actions {
        flex-direction: column;
        width: 100%;
    }

    .error-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ════════════════════════════════════════════════════════════
   Audit responsive mobile (juin 2026) — correctifs 320px–768px.
   Toutes les règles ci-dessous sont confinées à des media
   queries max-width : le rendu desktop reste inchangé.
   ════════════════════════════════════════════════════════════ */

/* [HIGH] Navbar applicative : pas de menu hamburger, et les 8
   liens (.header-nav est en flex SANS flex-wrap, liens en
   white-space: nowrap) débordaient de l'écran sous 768px — le
   justify-content: center existant coupait même les premiers
   liens. Correctif CSS pur : la nav devient une rangée de
   pilules défilable horizontalement (pattern app mobile),
   barre de défilement masquée. */
@media (max-width: 767px) {
    .header-nav {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.35rem;
    }

    .header-nav::-webkit-scrollbar {
        display: none;
    }

    .header-nav .nav-link {
        flex-shrink: 0;
    }
}

/* [HIGH] Tableau du dashboard : sous 768px les cellules Nom et
   Signal sont masquées (.stocks-td-name / .stocks-td-signal dans
   la règle existante plus haut) mais leurs en-têtes <th> ne
   l'étaient pas, ce qui décalait tous les titres de colonnes par
   rapport aux données. On masque les <th> correspondants
   (Nom = 2e colonne, Signal = 6e). */
@media (max-width: 768px) {
    .stocks-table th:nth-child(2),
    .stocks-table th:nth-child(6) {
        display: none;
    }
}

/* [MEDIUM] Zone compte de l'en-tête sur petits écrans : email +
   cloche + réglages + déconnexion débordaient sur 320–480px. On
   masque l'email (l'icône personne et le badge de plan restent
   visibles) et on compacte les boutons. S'applique aussi à
   l'en-tête landing (mêmes classes .header-auth-btn). */
@media (max-width: 576px) {
    .header-user-email {
        display: none;
    }

    .header-user-chip {
        padding: 0.35rem 0.5rem;
    }

    .header-auth {
        gap: 0.35rem;
    }

    .header-auth-btn {
        padding: 0.4rem 0.55rem;
        font-size: 0.72rem;
    }
}

/* [MEDIUM] Tableau du dashboard sous 480px : les 6 colonnes
   restantes imposaient encore un défilement horizontal. On masque
   la colonne Horizon (7e <th> + cellules .stocks-td-horizon),
   l'information restant disponible sur la fiche actif, et on
   resserre les cellules. */
@media (max-width: 480px) {
    .stocks-table th:nth-child(7),
    .stocks-td-horizon {
        display: none;
    }

    .stocks-table {
        font-size: 0.8rem;
    }

    .stocks-table th {
        padding: 0.6rem 0.5rem;
    }

    .stocks-table td {
        padding: 0.55rem 0.5rem;
    }
}

/* [MEDIUM] Contrôles du dashboard sous 480px : les groupes
   horizon (1S/1M/6M) et vue (Tableau/Cartes) se répartissent sur
   la largeur disponible au lieu de s'agglutiner à gauche
   (le filtre de risque a déjà sa propre règle à 576px). */
@media (max-width: 480px) {
    .dash-controls-right {
        gap: 0.4rem;
    }

    .dash-horizon-picker,
    .dash-view-toggle {
        flex: 1;
        justify-content: center;
    }
}

/* [MEDIUM] Mockup du hero landing : sous 768px la règle existante
   empilait les 3 mini-stats verticalement, rendant ce bloc
   décoratif très haut avant le vrai contenu. On les garde sur une
   rangée de 3 (assez compactes pour tenir à 320px). */
@media (max-width: 768px) {
    .landing-mockup-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .landing-mockup-stat {
        padding: 0.45rem 0.5rem;
        font-size: 0.62rem;
    }

    .landing-mockup-stat strong {
        font-size: 0.85rem;
    }
}

/* ============================================================================
   Pages légales : conditions, confidentialité, sources, méthodologie
   ----------------------------------------------------------------------------
   Mise en page partagée des pages .legal-page (terms / privacy / data_sources,
   et à venir methodology). Centralisé ici depuis les blocs <style> jadis
   dupliqués dans chaque template. Variables CSS du thème sombre uniquement,
   aucune couleur en dur. Largeur de lecture limitée (760px) pour le confort.
   ============================================================================ */
.legal-page {
    max-width: 760px;
    padding: 3rem 1rem 4rem;
}

/* En-tête : titre avec icône, date de mise à jour discrète, intro. */
.legal-head h2 {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.legal-head h2 i {
    color: var(--accent-violet);
    margin-right: 0.4rem;
}

.legal-updated {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.legal-intro {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Sections : cartes sombres avec bordure subtile, comme le reste du site. */
.legal-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    margin-top: 1.25rem;
}

.legal-section h3 {
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.legal-section p,
.legal-section li {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.legal-section ul {
    padding-left: 1.2rem;
}

.legal-section li + li {
    margin-top: 0.5rem;
}

.legal-section strong {
    color: var(--text-primary);
}

.legal-section a {
    color: var(--accent-blue);
}

/* Liens croisés vers les autres pages légales, centrés en bas de page. */
.legal-cross-links {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.legal-cross-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.92rem;
}

.legal-cross-links a:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-accent);
}

/* Tableau des pondérations (page Méthodologie) : lisible sur fond sombre,
   défilement horizontal sur mobile. Variables du thème uniquement. */
.legal-table-wrap {
    margin-top: 1rem;
    overflow-x: auto;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--border-subtle);
    padding: 0.6rem 0.8rem;
    text-align: left;
}

.legal-table thead th {
    color: var(--text-primary);
    background: var(--bg-card);
}

.legal-table tbody th {
    color: var(--text-primary);
    font-weight: 600;
}

.legal-table td {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   SEC-1g-b — Migration des attributs style="..." STATIQUES vers des classes.
   Remplace uniquement des styles inline 100% statiques (aucune expression
   Jinja). Les styles dynamiques (style="...{{ ... }}...") restent inline et
   seront traités dans SEC-1g-c. La CSP n'est pas modifiée par ce ticket.
   =========================================================================== */

/* Icônes de titre (<h2>) décoratives, une classe par couleur.
   On réutilise les tokens du design system quand la couleur en possède un
   (discipline test_design_tokens : pas de hex accent/sémantique hors :root). */
.heading-icon-indigo { color: var(--accent-solid); }   /* portfolio.html, compare.html */
.heading-icon-amber  { color: #fbbf24; }                /* amber — watchlist.html (pas de token scalaire) */
.heading-icon-green  { color: var(--positive-text); }   /* dividends.html */
.heading-icon-orange { color: var(--score-poor); }      /* radar.html */

/* Icônes des cartes de profil d'onboarding (couleurs de score du thème). */
.profile-icon-good    { color: var(--score-good); }
.profile-icon-neutral { color: var(--score-neutral); }
.profile-icon-poor    { color: var(--score-poor); }

/* Ligne de tableau cliquable (macros.html : stock_table_row). */
.cursor-pointer { cursor: pointer; }

/* Symbole monétaire discret à côté d'un prix (macros.html). */
.price-unit { font-size: 0.55em; opacity: 0.6; }

/* Logotype texte « TINKISSO » du header landing (header_landing.html). */
.landing-brand-text {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    background: linear-gradient(90deg, #a855f7, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===========================================================================
   SEC-1g-c-a — Fallback de largeur pour les barres migrées vers data-dynamic-width.
   Ces barres n'ont plus de style="width: …%" inline : avant exécution de
   static/dynamic_width.js (ou si le JS échoue), leur largeur vaudrait `auto`,
   ce qui peut rendre visuellement à 100 %. On force donc 0 par défaut ; le JS
   applique ensuite la valeur réelle bornée via CSSOM (transition inchangée).
   =========================================================================== */
.score-bar-fill[data-dynamic-width],
.compare-range-fill[data-dynamic-width] {
    width: 0;
}