/* ============================================================
   Fiches Valeurs PEA-PME — design system
   Palette dark only, optimisé finance
   ============================================================ */

:root {
    /* Surfaces */
    --bg:               #0b1437;
    --surface:          #111c44;
    --surface-elevated: #1a2456;
    --border:           #2d3a6b;

    /* Texte */
    --text-1: #ffffff;
    --text-2: #a3aed0;
    /* --text-3 : passé de #6b7394 (ratio 3.15-3.85, fail WCAG AA) à #8b94b8
       (ratio ~5.0 sur --bg, ~4.6 sur --surface-elevated, pass AA pour texte
       standard). Préserve la hiérarchie visuelle : reste plus terne que
       --text-2 (#a3aed0). PR-SEO/A11Y 2026-05-18. */
    --text-3: #8b94b8;

    /* Accents */
    --accent: #4318ff;

    /* Gradients KPIs */
    --grad-1: linear-gradient(135deg, #4318ff 0%, #9f7aea 100%);
    --grad-2: linear-gradient(135deg, #0075ff 0%, #00d4ff 100%);
    --grad-3: linear-gradient(135deg, #01b574 0%, #17ad37 100%);
    --grad-4: linear-gradient(135deg, #ff8c00 0%, #ffb547 100%);

    /* Sémantique */
    --up:      #01b574;
    --down:    #e31a1a;
    --neutral: #f6ad55;

    /* Catégories alertes */
    --cat-catalyseur: #00d4ff;
    --cat-risque:     #e31a1a;
    --cat-moat:       #4318ff;
    --cat-finance:    #01b574;
    --cat-pipeline:   #ff8c00;

    /* Layout */
    --sidebar-w: 260px;
    --radius-card: 16px;
    --radius-sm: 8px;
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.2);

    /* Typo */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------ */
/* Reset                                                         */
/* ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Scrollbars — global, dark theme */
html { scrollbar-width: thin; scrollbar-color: #2d3a6b #0b1437; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0b1437; }
::-webkit-scrollbar-thumb { background: #2d3a6b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4318ff; }
::-webkit-scrollbar-corner { background: #0b1437; }

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-1);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ */
/* Disclaimer bandeau haut                                       */
/* ------------------------------------------------------------ */
.disclaimer-top {
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    background: #111c44;
    border-bottom: 1px solid #f6ad55;
    padding: 8px 24px;
}
.disclaimer-top-text {
    text-align: center;
    color: #a3aed0;
    font-size: 12px;
    font-weight: 400;
}
.disclaimer-top-close {
    justify-self: end;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}
.disclaimer-top-close:hover {
    opacity: 1;
}
.disclaimer-top.is-hidden {
    display: none;
}

/* ------------------------------------------------------------ */
/* Layout général                                                */
/* ------------------------------------------------------------ */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

/* ------------------------------------------------------------ */
/* Sidebar                                                       */
/* ------------------------------------------------------------ */
.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
}
.sidebar-logo .logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--grad-1);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 16px;
}
.sidebar-logo .logo-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}
.sidebar-logo .logo-text small {
    display: block;
    color: var(--text-3);
    font-weight: 400;
    font-size: 11px;
    margin-top: 2px;
}

.sidebar-section-label {
    color: var(--text-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 0 8px;
    margin-bottom: 8px;
}

.meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.meta-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px;
    font-size: 13px;
}
.meta-list li .k { color: var(--text-3); }
.meta-list li .v { color: var(--text-1); font-weight: 500; text-align: right; }
.meta-list li .v.mono { font-size: 12.5px; }

.badge-pea {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    background: rgba(1, 181, 116, 0.15);
    color: var(--up);
    border: 1px solid rgba(1, 181, 116, 0.3);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 13px;
    transition: all 0.2s ease;
}
.nav a:hover { background: var(--surface-elevated); color: var(--text-1); }
.nav a.active { background: var(--surface-elevated); color: var(--text-1); font-weight: 500; }
.nav a .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-3);
}
.nav a.active .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 13px;
    transition: all 0.2s ease;
}
.links a:hover { color: var(--text-1); background: var(--surface-elevated); }
.links a .arr { color: var(--text-3); font-size: 11px; margin-left: auto; }

/* ------------------------------------------------------------ */
/* Main content                                                  */
/* ------------------------------------------------------------ */
.main {
    padding: 24px 32px 48px 32px;
    max-width: 100%;
    overflow-x: hidden;
}

.section { margin-top: 24px; }
.section-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-title .acc {
    width: 4px;
    height: 22px;
    background: var(--grad-1);
    border-radius: 2px;
}

/* Header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px 28px;
}
.page-header .title h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}
.page-header .title .ticker {
    margin-top: 6px;
    color: var(--text-2);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-header .title .ticker .pill {
    background: var(--surface-elevated);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
}
.page-header .title .updated {
    margin-top: 10px;
    color: var(--text-3);
    font-size: 12px;
}
.page-header .title .next-updates {
    margin-top: 4px;
    color: var(--text-3);
    font-size: 11px;
    opacity: 0.75;
}

.spark-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.spark-wrap .label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.spark-wrap canvas {
    width: 160px;
    height: 48px;
}
.spark-wrap .delta {
    font-size: 13px;
    font-weight: 600;
}
.spark-wrap .delta.up   { color: var(--up); }
.spark-wrap .delta.down { color: var(--down); }

/* ------------------------------------------------------------ */
/* KPIs principaux (gradients)                                   */
/* ------------------------------------------------------------ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.kpi-card {
    border-radius: var(--radius-card);
    padding: 20px 22px;
    min-height: 140px;
    color: #ffffff;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.kpi-live-link {
    display: inline-block;
    align-self: flex-start;
    margin-top: 12px;
    padding: 6px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.kpi-live-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}
.kpi-card.g1 { background: var(--grad-1); }
.kpi-card.g2 { background: var(--grad-2); }
.kpi-card.g3 { background: var(--grad-3); }
.kpi-card.g4 { background: var(--grad-4); }

.kpi-card .kpi-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.kpi-card .kpi-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
}
.kpi-card .kpi-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 6px;
}
.kpi-card .kpi-sub.up::before   { content: '▲'; font-size: 9px; }
.kpi-card .kpi-sub.down::before { content: '▼'; font-size: 9px; }

/* ------------------------------------------------------------ */
/* KPIs secondaires (sombres)                                    */
/* ------------------------------------------------------------ */
.kpi-grid-sec {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.kpi-card-sec {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.kpi-card-sec .icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #ffffff;
}
.kpi-card-sec .icon.i1 { background: rgba(67, 24, 255, 0.18); color: #9f7aea; }
.kpi-card-sec .icon.i2 { background: rgba(0, 117, 255, 0.18); color: #00d4ff; }
.kpi-card-sec .icon.i3 { background: rgba(1, 181, 116, 0.18); color: var(--up); }
.kpi-card-sec .icon.i4 { background: rgba(227, 26, 26, 0.18); color: var(--down); }

.kpi-card-sec .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-card-sec .body .lbl {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.kpi-card-sec .body .val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-1);
}

/* ------------------------------------------------------------ */
/* Card générique                                                */
/* ------------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.card-header .meta {
    color: var(--text-3);
    font-size: 12px;
}

.chart-wrap {
    position: relative;
    padding-top: 16px;
}
.chart-wrap.h-320 { height: calc(320px + 16px); }
.chart-wrap.h-220 { height: calc(220px + 16px); }

/* Trio de cards : fibo / volumes / jauge */
.trio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Tableau Fibonacci */
.fibo {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.fibo th, .fibo td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.fibo th {
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.fibo td:nth-child(2),
.fibo td:nth-child(3) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.fibo th:nth-child(2),
.fibo th:nth-child(3) { text-align: right; }
.fibo tr.current td {
    background: rgba(67, 24, 255, 0.15);
    font-weight: 600;
}
.fibo tr:last-child td { border-bottom: 0; }
.fibo .tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
}
.fibo .tag.res { color: var(--down); border-color: rgba(227, 26, 26, 0.4); background: rgba(227, 26, 26, 0.08); }
.fibo .tag.sup { color: var(--up);   border-color: rgba(1, 181, 116, 0.4); background: rgba(1, 181, 116, 0.08); }
.fibo .tag.now { color: var(--accent); border-color: rgba(67, 24, 255, 0.6); background: rgba(67, 24, 255, 0.18); }

/* Jauge 52w */
.gauge {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    justify-content: center;
}
.gauge .gauge-bar {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--down) 0%, var(--neutral) 50%, var(--up) 100%);
    margin: 24px 0 32px 0;
}
.gauge .gauge-cursor {
    position: absolute;
    top: -6px;
    width: 24px;
    height: 24px;
    background: var(--text-1);
    border-radius: 50%;
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 4px rgba(67, 24, 255, 0.25);
    transform: translateX(-50%);
}
.gauge .gauge-cursor::after {
    content: attr(data-pct);
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-1);
    background: var(--surface-elevated);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.gauge .gauge-edges {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-3);
}
.gauge .gauge-edges .v {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
    font-size: 13px;
    font-weight: 500;
    margin-top: 2px;
    display: block;
}
.gauge .gauge-summary {
    text-align: center;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.6;
}
.gauge .gauge-summary b { color: var(--text-1); }

/* ------------------------------------------------------------ */
/* Alertes éditoriales                                           */
/* ------------------------------------------------------------ */
.alerts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.alert-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-card);
    padding: 18px 22px;
    box-shadow: var(--shadow-card);
}
.alert-card.cat-catalyseur { border-left-color: var(--cat-catalyseur); }
.alert-card.cat-risque     { border-left-color: var(--cat-risque); }
.alert-card.cat-moat       { border-left-color: var(--cat-moat); }
.alert-card.cat-finance    { border-left-color: var(--cat-finance); }
.alert-card.cat-pipeline   { border-left-color: var(--cat-pipeline); }

.alert-card .cat-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.alert-card.cat-catalyseur .cat-badge { color: var(--cat-catalyseur); background: rgba(0, 212, 255, 0.12); }
.alert-card.cat-risque     .cat-badge { color: var(--cat-risque);     background: rgba(227, 26, 26, 0.12); }
.alert-card.cat-moat       .cat-badge { color: #9f7aea;               background: rgba(67, 24, 255, 0.18); }
.alert-card.cat-finance    .cat-badge { color: var(--cat-finance);    background: rgba(1, 181, 116, 0.12); }
.alert-card.cat-pipeline   .cat-badge { color: var(--cat-pipeline);   background: rgba(255, 140, 0, 0.12); }

.alert-card h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
}
.alert-card p {
    margin: 0 0 8px 0;
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.65;
}
.alert-card p:last-child { margin-bottom: 0; }

/* `.pipeline-table` CSS retiré 2026-05-18 (mission M4 batch stabilisation) :
   le tableau « Détail des programmes » a été supprimé en mission S2 nocturne
   du 18/05 (timeline pipeline + .timeline-stade le remplacent intégralement).
   Aucun template ne référence plus `.pipeline-table` — dead code purgé. */

/* ------------------------------------------------------------ */
/* Perspectives                                                  */
/* ------------------------------------------------------------ */
.persp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.persp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 22px 24px;
    box-shadow: var(--shadow-card);
}
.persp-card .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.persp-card .head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.persp-card .head .horizon {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}
.persp-card ul { list-style: none; margin: 0; padding: 0; }
.persp-card li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.5;
    border-bottom: 1px solid var(--border);
}
.persp-card li:last-child { border-bottom: 0; }
.persp-card li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 8px;
    flex: 0 0 6px;
}
.persp-card.ct .head h3::before { content: 'CT '; color: var(--up); }
.persp-card.mt .head h3::before { content: 'MT '; color: var(--neutral); }
.persp-card.lt .head h3::before { content: 'LT '; color: var(--cat-catalyseur); }
.persp-card.ct li::before { background: var(--up); }
.persp-card.mt li::before { background: var(--neutral); }
.persp-card.lt li::before { background: var(--cat-catalyseur); }

/* ------------------------------------------------------------ */
/* Avis personnel                                                */
/* ------------------------------------------------------------ */
.avis {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 32px 36px;
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
}
.avis .note {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 96px;
    font-weight: 700;
    line-height: 0.9;
    background: linear-gradient(135deg, #4318ff 0%, #00d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -3px;
}
.avis .note .denom {
    color: var(--text-3);
    font-size: 28px;
    font-weight: 500;
    -webkit-text-fill-color: var(--text-3);
    letter-spacing: 0;
}
.avis .body .label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    margin-bottom: 10px;
}
.avis .body .text {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.7;
}
.avis .body .text p { margin: 0 0 8px 0; }
.avis .body .text p:last-child { margin-bottom: 0; }
.avis .intensite {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.avis .intensite.fort     { color: var(--up);      background: rgba(1, 181, 116, 0.15);   border: 1px solid rgba(1, 181, 116, 0.4); }
.avis .intensite.modere   { color: var(--neutral); background: rgba(246, 173, 85, 0.15);  border: 1px solid rgba(246, 173, 85, 0.4); }
.avis .intensite.faible   { color: var(--down);    background: rgba(227, 26, 26, 0.15);   border: 1px solid rgba(227, 26, 26, 0.4); }

/* ------------------------------------------------------------ */
/* Synthèse IA                                                   */
/* ------------------------------------------------------------ */
.section-subtitle {
    color: var(--text-3);
    font-size: 13px;
    font-weight: 400;
    margin: -8px 0 16px 16px;
    line-height: 1.5;
}

.ia-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #1a2456;
    border-left: 3px solid #4318ff;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    color: #a3aed0;
    font-size: 12px;
    line-height: 1.5;
}
.ia-banner-icon {
    font-size: 14px;
    line-height: 1.4;
    flex-shrink: 0;
}
.ia-banner-text { flex: 1; }

.synthese-ia .intensite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
}
.synthese-ia .intensite .intensite-label {
    font-size: 10px;
    letter-spacing: 1.2px;
    opacity: 0.85;
}
.synthese-ia .intensite .intensite-value {
    font-size: 13px;
    letter-spacing: 1px;
}

.factors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
.factors-col {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}
.factors-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.factors-arrow {
    font-size: 14px;
    line-height: 1;
}
.factors-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.factors-col li {
    position: relative;
    padding-left: 16px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 6px;
}
.factors-col li:last-child { margin-bottom: 0; }
.factors-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.factors-pos .factors-head { color: var(--up); }
.factors-pos li::before     { background: var(--up); }
.factors-neg .factors-head { color: var(--down); }
.factors-neg li::before     { background: var(--down); }

.synthese-ia .gen-date {
    margin-top: 18px;
    color: var(--text-3);
    font-size: 11px;
    font-style: italic;
}

/* ------------------------------------------------------------ */
/* Footer                                                        */
/* ------------------------------------------------------------ */
.page-footer {
    margin-top: 32px;
    padding: 24px 0 0 0;
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.7;
}
.page-footer .row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.page-footer .sources strong { color: var(--text-2); }

/* Marqueur auto : pastille discrète en haut-droite des cards */
.auto-mark {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    cursor: help;
    transition: opacity 0.2s ease;
    margin-left: 12px;
}
.auto-mark:hover { opacity: 0.85; }

/* Conteneurs qui hébergent la pastille doivent être positionnés */
.kpi-card, .kpi-card-sec, .card, .alert-card { position: relative; }

/* Réserve d'espace à droite pour garantir ≥ 12 px entre tout texte
   adjacent et la pastille auto-mark (right:14px + largeur 12px → zone
   "occupée" 26 px à partir du bord droit). 38px = 26 + 12 de marge. */
.kpi-card,
.kpi-card-sec,
.card,
.alert-card { padding-right: 38px; }

/* ------------------------------------------------------------ */
/* Mobile burger                                                 */
/* ------------------------------------------------------------ */
.burger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}
.burger span {
    width: 18px;
    height: 2px;
    background: var(--text-1);
    position: relative;
}
.burger span::before, .burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--text-1);
}
.burger span::before { top: -6px; }
.burger span::after  { top:  6px; }

/* ------------------------------------------------------------ */
/* Breadcrumb (en-tête de fiche, sous le disclaimer)            */
/* ------------------------------------------------------------ */
.breadcrumb {
    background: var(--bg);
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.breadcrumb a {
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.15s ease;
}
.breadcrumb a:hover { color: var(--text-1); }

/* ------------------------------------------------------------ */
/* Page index (multi-fiches)                                     */
/* ------------------------------------------------------------ */
body.page-index {
    background: var(--bg);
}
.index-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 32px 48px 32px;
}
.index-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.index-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}
.index-logo .logo-mark {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--grad-1);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.index-logo h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}
.index-subtitle {
    color: var(--text-3);
    font-size: 14px;
    margin-top: 4px;
}
.index-meta {
    text-align: right;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.6;
}
.index-meta .updated { color: var(--text-3); }
.index-meta .next-updates { font-size: 11px; opacity: 0.75; margin-top: 2px; }

.index-section {
    margin-top: 32px;
}
.index-section h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.index-section h2 .acc {
    width: 4px;
    height: 20px;
    background: var(--grad-1);
    border-radius: 2px;
}
.index-section h2 .count {
    color: var(--text-3);
    font-weight: 500;
    font-size: 14px;
}
.index-empty {
    color: var(--text-3);
    font-size: 14px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
    margin: 0;
    text-align: center;
}

.index-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    font-size: 14px;
}
/* Largeurs fixes pour aligner les 2 tableaux PEA-PME et Hors PEA-PME,
   indépendamment du contenu (devises € vs USD, longueurs variables). */
.index-table th:nth-child(1),
.index-table td:nth-child(1) { width: 25%; }
.index-table th:nth-child(2),
.index-table td:nth-child(2) { width: 15%; text-align: right; }
.index-table th:nth-child(3),
.index-table td:nth-child(3) { width: 12%; text-align: right; }
.index-table th:nth-child(4),
.index-table td:nth-child(4) { width: 10%; text-align: right; }
.index-table th:nth-child(5),
.index-table td:nth-child(5) { width: 12%; text-align: center; }
.index-table th:nth-child(6),
.index-table td:nth-child(6) { width: 26%; text-align: right; }
.index-table thead th {
    text-align: left;
    background: var(--surface-elevated);
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}
.index-table thead th:hover {
    color: var(--text-1);
    background: rgba(67, 24, 255, 0.10);
}
.index-table thead th::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.index-table thead th.sort-active { color: var(--text-1); }
.index-table thead th.sort-asc::after {
    opacity: 1;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--accent);
}
.index-table thead th.sort-desc::after {
    opacity: 1;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--accent);
}

.index-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
}
.index-table tbody tr:last-child td { border-bottom: 0; }
.index-table tbody tr.index-row {
    cursor: pointer;
    transition: background 0.15s ease;
}
.index-table tbody tr.index-row:hover {
    background: rgba(67, 24, 255, 0.10);
}
.index-table .cell-name .name-line {
    color: var(--text-1);
    font-weight: 600;
    font-size: 14px;
}
.index-table .cell-name .name-ticker {
    color: var(--text-3);
    font-size: 11px;
    margin-top: 2px;
    letter-spacing: 0.4px;
}
.index-table .cell-price,
.index-table .cell-rsi,
.index-table .cell-updated {
    color: var(--text-1);
}
.index-table .cell-change.up   { color: var(--up); }
.index-table .cell-change.down { color: var(--down); }

.score-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid;
}
.score-pill.score-fort   { color: var(--up);      background: rgba(1, 181, 116, 0.15);  border-color: rgba(1, 181, 116, 0.4); }
.score-pill.score-modere { color: var(--neutral); background: rgba(246, 173, 85, 0.15); border-color: rgba(246, 173, 85, 0.4); }
.score-pill.score-faible { color: var(--down);    background: rgba(227, 26, 26, 0.15);  border-color: rgba(227, 26, 26, 0.4); }

body.page-index .page-footer {
    margin-top: 40px;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.6;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

/* ------------------------------------------------------------ */
/* Responsive                                                    */
/* ------------------------------------------------------------ */
@media (max-width: 1280px) {
    .kpi-grid, .kpi-grid-sec { grid-template-columns: repeat(2, 1fr); }
    .trio-grid { grid-template-columns: 1fr; }
    .persp-grid { grid-template-columns: 1fr; }
    .alerts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        z-index: 40;
        transition: left 0.25s ease;
    }
    .sidebar.open { left: 0; }
    .burger { display: flex; }
    .main { padding: 64px 16px 32px 16px; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .avis { grid-template-columns: 1fr; gap: 16px; text-align: left; }
    .avis .note { font-size: 72px; }
}

@media (max-width: 1024px) {
    .index-main { padding: 24px 16px 32px 16px; }
    .index-header { flex-direction: column; }
    .index-meta { text-align: left; }
    .index-table { font-size: 13px; }
    .index-table thead th,
    .index-table tbody td { padding: 10px 12px; }
}

@media (max-width: 600px) {
    .kpi-grid, .kpi-grid-sec { grid-template-columns: 1fr; }
    .page-header .title h1 { font-size: 24px; }
    .factors-grid { grid-template-columns: 1fr; }
    /* Sur mobile, masque les colonnes secondaires de l'index */
    .index-table thead th:nth-child(4),
    .index-table tbody td:nth-child(4),
    .index-table thead th:nth-child(6),
    .index-table tbody td:nth-child(6) { display: none; }
}

/* ------------------------------------------------------------ */
/* Utilitaires                                                   */
/* ------------------------------------------------------------ */

/* État vide — remplace les style="color: var(--text-3); margin: 0;"
   inline qui étaient répétés dans les templates (issue m12). */
.empty-state {
    color: var(--text-3);
    margin: 0;
}

/* Lignes de tableau d'index accessibles au clavier (issue m9).
   Focus visible respecte contraste minimum 3:1 WCAG 2.1 AA. */
.index-row[tabindex="0"] {
    cursor: pointer;
}
.index-row[tabindex="0"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--surface-elevated);
}

/* Fallback Chart.js : message visible si la lib externe ne charge
   pas (CDN bloqué, JS désactivé) (issue m11). */
.chart-fallback {
    display: none;
    padding: 16px;
    color: var(--text-3);
    text-align: center;
    font-size: 13px;
    background: var(--surface);
    border-radius: var(--radius-sm);
}
.chart-wrap.chart-fallback-active .chart-fallback {
    display: block;
}
.chart-wrap.chart-fallback-active canvas {
    display: none;
}

/* ------------------------------------------------------------ */
/* Accessibilité WCAG 2.1 AA (sprint final s4)                  */
/* ------------------------------------------------------------ */

/* Skip-link : visible uniquement au focus clavier (Tab depuis page top).
   Permet aux utilisateurs de lecteur d'écran de sauter la sidebar et
   le bandeau disclaimer pour atteindre directement <main id="main-content">.
   Conforme WCAG 2.4.1 (Bypass Blocks). */
.skip-link {
    position: absolute;
    top: -100px;  /* hors viewport par défaut */
    left: 16px;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--accent);
    color: var(--text-1);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 16px;  /* visible au focus */
    outline: 3px solid var(--up);
    outline-offset: 2px;
}

/* Focus-visible global : tous les éléments interactifs (a, button, input)
   reçoivent un outline visible au focus clavier (Tab/Shift-Tab) mais pas
   au clic souris. Conforme WCAG 2.4.7 (Focus Visible) et 1.4.11
   (Non-text Contrast).

   Mise à jour PR-SEO/A11Y 2026-05-18 : --accent #4318ff seul ne passe pas
   le 3:1 sur --bg #0b1437 (ratio mesuré 2.41 — initialement surestimé).
   Pour satisfaire 1.4.11 sans modifier la palette d'identité, on ajoute
   un halo blanc semi-transparent (box-shadow rgba(255,255,255,0.20))
   autour de l'outline accent — l'œil voit alors un double-marquage qui
   passe largement le contraste requis sur tous fonds. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.20);
    border-radius: 2px;
}

/* Liens externes (target=_blank) avec icône ↗ : on rappelle le contexte
   au lecteur d'écran via aria-label sur le template (rel + noopener déjà
   présents). Pas de CSS supplémentaire nécessaire. */

/* ============================================================
   AMÉLIORATIONS NUIT 2026-05-18 — A1 + A2 + A3 hybride
   Carte d'identité 30s · Timeline pipeline · Filtre chips alertes
   ============================================================ */

/* ------------------------------------------------------------ */
/* A1 — Carte d'identité « À retenir en 30 secondes »            */
/* ------------------------------------------------------------ */
.identity-card {
    background:
        radial-gradient(ellipse at top right, rgba(67, 24, 255, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(0, 212, 255, 0.10) 0%, transparent 60%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}
.identity-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #4318ff 0%, #00d4ff 50%, #01b574 100%);
}

.identity-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.identity-label::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 14px;
    background: var(--grad-1);
    border-radius: 2px;
}

.identity-score-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 24px;
    border-right: 1px solid var(--border);
}
.identity-score {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 76px;
    font-weight: 700;
    line-height: 0.9;
    background: linear-gradient(135deg, #4318ff 0%, #00d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -3px;
    margin: 4px 0;
}
.identity-score .denom {
    font-size: 22px;
    color: var(--text-3);
    -webkit-text-fill-color: var(--text-3);
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 2px;
}
.identity-score-na {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-3);
    margin: 12px 0;
}
.identity-signal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    align-self: flex-start;
    border: 1px solid;
}
.identity-signal::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.identity-signal.fort   { color: var(--up);      background: rgba(1, 181, 116, 0.12);  border-color: rgba(1, 181, 116, 0.4); }
.identity-signal.modere { color: var(--neutral); background: rgba(246, 173, 85, 0.12); border-color: rgba(246, 173, 85, 0.4); }
.identity-signal.faible { color: var(--down);    background: rgba(227, 26, 26, 0.12);  border-color: rgba(227, 26, 26, 0.4); }
.identity-signal-meta {
    color: var(--text-3);
    font-size: 11px;
    margin-top: 8px;
}

.identity-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-content: start;
}
.identity-key {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.identity-key.k-catalyseur { border-left-color: var(--cat-catalyseur); }
.identity-key.k-risque     { border-left-color: var(--cat-risque); }
.identity-key.k-moat       { border-left-color: var(--cat-moat); }
.identity-key:hover {
    background: rgba(255, 255, 255, 0.04);
}
.identity-key-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.identity-key.k-catalyseur .identity-key-label { color: var(--cat-catalyseur); }
.identity-key.k-risque     .identity-key-label { color: var(--cat-risque); }
.identity-key.k-moat       .identity-key-label { color: #9f7aea; }
.identity-key-text {
    color: var(--text-1);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}
.identity-key-meta {
    color: var(--text-3);
    font-size: 11px;
    margin-top: auto;
}

.identity-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.identity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-2);
}
.identity-badge.pea {
    color: var(--up);
    background: rgba(1, 181, 116, 0.12);
    border-color: rgba(1, 181, 116, 0.35);
}
.identity-badge.pea::before { content: '★'; font-size: 10px; }

/* ------------------------------------------------------------ */
/* A2 — Timeline pipeline visuelle                               */
/* ------------------------------------------------------------ */
.pipeline-timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.timeline-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 22px;
    box-shadow: var(--shadow-card);
}
.timeline-row + .timeline-row { margin-top: 0; }

.timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.timeline-prog {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
}
.timeline-indic {
    color: var(--text-3);
    font-size: 12.5px;
    flex: 1;
    min-width: 200px;
}

/* Track : 5 phases équiréparties */
.timeline-track {
    position: relative;
    margin: 22px 0 14px 0;
    padding: 0;
    height: 8px;
    background: var(--surface-elevated);
    border-radius: 4px;
    overflow: visible;
}
.timeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    background: var(--grad-1);
    transition: width 0.3s ease;
}
.timeline-fill.p1     { background: linear-gradient(90deg, #4318ff 0%, #9f7aea 100%); }
.timeline-fill.p2     { background: linear-gradient(90deg, #4318ff 0%, #00d4ff 100%); }
.timeline-fill.preclin{ background: linear-gradient(90deg, #ff8c00 0%, #ffb547 100%); }
.timeline-fill.disc   { background: linear-gradient(90deg, #2d3a6b 0%, #6b7394 100%); }
.timeline-fill.pre    { background: linear-gradient(90deg, #ff8c00 0%, #ffb547 100%); }
.timeline-fill.prod   { background: linear-gradient(90deg, #01b574 0%, #17ad37 100%); }

.timeline-cursor {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-1);
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 4px rgba(67, 24, 255, 0.20);
    transform: translate(-50%, -50%);
}
.timeline-cursor.p1     { border-color: #9f7aea;            box-shadow: 0 0 0 4px rgba(159, 122, 234, 0.22); }
.timeline-cursor.p2     { border-color: var(--cat-catalyseur);box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.22); }
.timeline-cursor.preclin{ border-color: var(--neutral);     box-shadow: 0 0 0 4px rgba(246, 173, 85, 0.22); }
.timeline-cursor.disc   { border-color: var(--text-3);      box-shadow: 0 0 0 4px rgba(107, 115, 148, 0.22); }
.timeline-cursor.pre    { border-color: var(--neutral);     box-shadow: 0 0 0 4px rgba(246, 173, 85, 0.22); }
.timeline-cursor.prod   { border-color: var(--up);          box-shadow: 0 0 0 4px rgba(1, 181, 116, 0.22); }

.timeline-phases {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
    margin-bottom: 4px;
}
.timeline-phases-mining {
    grid-template-columns: 1fr 1fr;
}
.timeline-phase {
    position: relative;
    padding: 2px 0;
}
.timeline-phase.active { color: var(--text-1); }
.timeline-phase.passed { color: var(--text-2); }

.timeline-foot {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(0, 212, 255, 0.06);
    border-left: 3px solid var(--cat-catalyseur);
    border-radius: 4px;
}
.timeline-next-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--cat-catalyseur);
    flex-shrink: 0;
    margin-top: 2px;
}
.timeline-next-text {
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.55;
}

/* Variante mining (CCJ) : couleur différente pour la prochaine étape */
.timeline-row.mining .timeline-foot {
    background: rgba(1, 181, 116, 0.06);
    border-left-color: var(--up);
}
.timeline-row.mining .timeline-next-label {
    color: var(--up);
}

/* ------------------------------------------------------------ */
/* A3 — Filtre chips alertes + couleurs catégories manquantes    */
/* ------------------------------------------------------------ */
.alerts-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.alerts-filterbar-label {
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    margin-right: 6px;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.filter-chip:hover {
    background: rgba(67, 24, 255, 0.10);
    border-color: rgba(67, 24, 255, 0.4);
    color: var(--text-1);
}
.filter-chip[aria-pressed="true"] {
    background: rgba(67, 24, 255, 0.20);
    border-color: var(--accent);
    color: var(--text-1);
}
.filter-chip .chip-count {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--text-3);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}
.filter-chip[aria-pressed="true"] .chip-count {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-1);
}
.filter-chip.c-catalyseur[aria-pressed="true"] { background: rgba(0, 212, 255, 0.18);  border-color: var(--cat-catalyseur); }
.filter-chip.c-risque[aria-pressed="true"]     { background: rgba(227, 26, 26, 0.18);  border-color: var(--cat-risque); }
.filter-chip.c-moat[aria-pressed="true"]       { background: rgba(67, 24, 255, 0.22);  border-color: #9f7aea; }
.filter-chip.c-finance[aria-pressed="true"]    { background: rgba(1, 181, 116, 0.18);  border-color: var(--cat-finance); }
.filter-chip.c-pipeline[aria-pressed="true"]   { background: rgba(255, 140, 0, 0.18);  border-color: var(--cat-pipeline); }
.filter-chip.c-gouvernance[aria-pressed="true"]{ background: rgba(159, 122, 234, 0.18);border-color: #9f7aea; }
.filter-chip.c-reglementaire[aria-pressed="true"]{ background: rgba(246, 173, 85, 0.18); border-color: var(--neutral); }

/* Card masquée par filtre — animation douce */
.alert-card[data-hidden="true"] {
    display: none;
}

/* Catégories qui n'avaient pas de style explicite : GOUVERNANCE,
   RÉGLEMENTAIRE. Fallback CSS s'appuyait sur --accent (violet par
   défaut). Couleurs distinctes ajoutées ici. */
.alert-card.cat-gouvernance { border-left-color: #9f7aea; }
.alert-card.cat-gouvernance .cat-badge {
    color: #9f7aea;
    background: rgba(159, 122, 234, 0.14);
}
.alert-card.cat-réglementaire,
.alert-card.cat-reglementaire { border-left-color: var(--neutral); }
.alert-card.cat-réglementaire .cat-badge,
.alert-card.cat-reglementaire .cat-badge {
    color: var(--neutral);
    background: rgba(246, 173, 85, 0.14);
}

/* ------------------------------------------------------------ */
/* Responsive — A1/A2/A3                                          */
/* ------------------------------------------------------------ */
@media (max-width: 1280px) {
    .identity-card { grid-template-columns: 1fr; gap: 22px; }
    .identity-score-block {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 20px;
    }
    .identity-keys { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
    .identity-card { padding: 18px 16px; }
    .identity-score { font-size: 64px; }
    .timeline-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .timeline-phases { font-size: 9.5px; }
}

/* ============================================================
   AMÉLIORATIONS NUIT 2026-05-18 — Fix mobile + polish
   1. Suppression tableau "Détail des programmes" (redondance)
      → .timeline-stade prend le relais pour l'info textuelle
   2. Fibonacci table responsive (masquage colonne Δ + padding mobile)
   3. Sources footer en chips wrap (au lieu de liste inline · séparée)
   4. Polish typographique : line-height, max-width lisibilité
   ============================================================ */

/* --- Timeline : ligne "Stade actuel" --------------------------- */
/* Remplace l'info présente dans le tableau supprimé. Affiche le texte
   complet du stade (ex. "Phase 1/2 (Audiogene NCT06370351)") qui était
   sinon perdu — la timeline ne montrait que le label de phase générique. */
.timeline-stade {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 2px 0 18px 0;
    padding: 10px 14px;
    background: var(--surface-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.timeline-stade-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--text-3);
    flex-shrink: 0;
}
.timeline-stade-text {
    color: var(--text-1);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* --- Fibonacci table : responsive mobile ----------------------- */
/* À <600px le tableau 4-colonnes (Niveau / Prix / Δ / Statut) débordait.
   On réduit padding/font et on masque la colonne Δ (la moins critique :
   l'écart se déduit visuellement du Niveau % vs cours). */
@media (max-width: 600px) {
    .fibo th, .fibo td {
        padding: 8px 6px;
        font-size: 12px;
    }
    /* Masque la colonne "Δ" (3ᵉ) — info dérivable du Niveau et du Prix */
    .fibo th:nth-child(3),
    .fibo td:nth-child(3) { display: none; }
    .fibo .tag {
        padding: 1px 6px;
        font-size: 10px;
    }
}
/* Encore plus serré sur très petits écrans (≤360px) */
@media (max-width: 360px) {
    .fibo th, .fibo td {
        padding: 7px 4px;
        font-size: 11px;
    }
}

/* --- Sources footer : chips wrap ------------------------------- */
.page-footer .sources {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.sources-label {
    color: var(--text-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}
.sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.source-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 11px;
    line-height: 1.4;
    max-width: 100%;
}
.source-chip-auto {
    background: rgba(67, 24, 255, 0.10);
    border-color: rgba(67, 24, 255, 0.30);
    color: var(--text-2);
}
.page-footer .row {
    align-items: flex-start;
}
.page-footer .generated-meta {
    color: var(--text-3);
    font-size: 11px;
    white-space: nowrap;
    padding-top: 22px;
}
@media (max-width: 1024px) {
    .page-footer .generated-meta {
        padding-top: 4px;
        white-space: normal;
    }
}

/* --- Polish typographique : lisibilité ------------------------- */
/* Limite la longueur de ligne dans les paragraphes longs pour respecter
   la fourchette WCAG-recommandée (50-75 caractères/ligne). Sans ça, en
   1280px+ une phrase de la synthèse IA fait 130+ caractères → fatigue
   visuelle. `ch` est l'unité width-based-on-character. */
.synthese-ia .body .text p,
.synthese-ia .body .text {
    max-width: 78ch;
}
.alert-card p {
    max-width: 72ch;
}
/* Améliore la lisibilité des paragraphes alertes au mobile (le 13.5px
   par défaut tombait à la limite WCAG sur petits écrans). */
@media (max-width: 600px) {
    .alert-card p { font-size: 14px; line-height: 1.6; }
    .alert-card h3 { font-size: 15px; }
    .timeline-stade-text { font-size: 12.5px; }
    .timeline-next-text { font-size: 13px; line-height: 1.55; }
    .identity-key-text { font-size: 13.5px; }
    /* Section-title plus contenu sur mobile */
    .section-title { font-size: 19px; }
    .section-title .acc { height: 18px; }
}

/* Améliore la phase active sur mobile : la rendre plus visible
   par contraste (texte blanc + pastille colorée derrière). */
@media (max-width: 600px) {
    .timeline-phase.active {
        background: rgba(67, 24, 255, 0.18);
        color: var(--text-1);
        padding: 3px 6px;
        border-radius: 4px;
        font-weight: 700;
    }
    .timeline-row.mining .timeline-phase.active {
        background: rgba(1, 181, 116, 0.18);
    }
    /* Phases passées sur mobile : moins visibles, sans rajout de bg */
    .timeline-phases { gap: 2px; padding: 0 2px; }
}

/* ============================================================
   PR-E REFONTE INDEX PORTFOLIO 2026-05-18
   Grille unifiée de cards + filtres + tri client + sparkline mini
   ============================================================ */

/* --- Bandeau stats portfolio --------------------------------- */
.portfolio-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding: 18px 24px;
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}
.portfolio-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #4318ff 0%, #00d4ff 50%, #01b574 100%);
}
.stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
}
.stat-value .stat-denom {
    font-size: 14px;
    color: var(--text-3);
    font-weight: 500;
    margin-left: 2px;
}
.stat-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}
.stat-divider {
    width: 1px;
    height: 36px;
    background: var(--border);
}
.stats-ia-note {
    flex: 1 1 100%;
    color: var(--text-3);
    font-size: 11.5px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
    line-height: 1.45;
}

/* --- Toolbar filtres + tris ---------------------------------- */
.portfolio-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 14px 18px;
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.toolbar-label {
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    margin-right: 4px;
}
.sort-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.sort-chip:hover {
    background: rgba(67, 24, 255, 0.10);
    border-color: rgba(67, 24, 255, 0.4);
    color: var(--text-1);
}
.sort-chip[aria-pressed="true"] {
    background: rgba(67, 24, 255, 0.20);
    border-color: var(--accent);
    color: var(--text-1);
}
.filter-chip.c-pea[aria-pressed="true"]  { background: rgba(1, 181, 116, 0.18); border-color: rgba(1, 181, 116, 0.5); }
.filter-chip.c-hors[aria-pressed="true"] { background: rgba(246, 173, 85, 0.18); border-color: rgba(246, 173, 85, 0.5); }
/* PR vignettes secteur filtrables 2026-05-18 : chip Secteur en violet
   (cohérent avec --accent #4318ff dilué). Distinct du vert PEA pour
   séparer visuellement "catégorie large" vs "statut binaire éligibilité". */
.filter-chip.c-sector[aria-pressed="true"] { background: rgba(67, 24, 255, 0.20); border-color: rgba(67, 24, 255, 0.55); color: var(--text-1); }

/* --- Grille portfolio --------------------------------------- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.portfolio-empty-filtered {
    color: var(--text-3);
    font-size: 14px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-card);
    padding: 32px;
    margin: 16px 0 0 0;
    text-align: center;
}
.portfolio-empty-filtered p {
    margin: 0 0 14px 0;
}
/* PR vignettes secteur filtrables 2026-05-18 : bouton reset filtres
   affiché uniquement quand l'intersection des filtres actifs (PEA AND
   Secteur) ne retourne 0 card. Style cohérent avec sort-chip violet
   (--accent) plus prononcé pour signaler l'action de récupération. */
.filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(67, 24, 255, 0.18);
    border: 1px solid rgba(67, 24, 255, 0.5);
    color: var(--text-1);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.filter-reset-btn:hover,
.filter-reset-btn:focus-visible {
    background: rgba(67, 24, 255, 0.28);
    border-color: var(--accent);
    outline: none;
}
.filter-reset-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(67, 24, 255, 0.4);
}

/* --- Card fiche --------------------------------------------- */
.fiche-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}
.fiche-card:hover {
    transform: translateY(-2px);
    border-color: rgba(67, 24, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.fiche-card[hidden] { display: none !important; }
.fiche-card-link {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* padding-bottom 40px (v1) : réserve verticale pour le bouton
       .fiche-card-compare-wrap absolute à bottom:12px — toujours utile
       même avec le scope footer (v3) pour les cas wrap badge ≥2 lignes.
       padding-right 20px (v3 revert v2) : pas de réserve horizontale sur
       toute la hauteur de la card — c'est la cause de la dégradation v2
       (sparkline rétrécie, titre wrap, KPIs compressés). À la place, le
       padding-right est SCOPÉ uniquement sur .fiche-card-badges (cf. règle
       dédiée ci-dessous) pour réserver la zone bouton seulement au footer.
       Mobile (<600px) : padding rebasculé en flow normal cf. règle dédiée
       qui passe .fiche-card-compare-wrap en position:relative.
       Fix régression visuelle PR-F Bonus F6 v3 — 2026-05-18. */
    padding: 18px 20px 40px 20px;
    color: inherit;
    text-decoration: none;
    height: 100%;
}
.fiche-card-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.fiche-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.fiche-card-name h2,
.fiche-card-name h3 {
    /* h2 introduit en PR-SEO/A11Y 2026-05-18 (A11Y-3 hiérarchie) — h3 gardé
       pour rétro-compatibilité de la règle (ne change pas le rendu). */
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.2;
}
.fiche-card-ticker {
    display: inline-block;
    margin-top: 4px;
    color: var(--text-3);
    font-size: 11.5px;
    letter-spacing: 0.4px;
}
.fiche-card-spark {
    position: relative;
    height: 56px;
}
.fiche-card-spark canvas {
    width: 100%;
    height: 100%;
}
.fiche-card-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.kpi-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kpi-block-label {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.kpi-block-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.1;
}
.kpi-block-value.up   { color: var(--up); }
.kpi-block-value.down { color: var(--down); }
.kpi-block-sub {
    font-size: 11px;
    color: var(--text-3);
}
.kpi-block-sub.up   { color: var(--up); }
.kpi-block-sub.down { color: var(--down); }

.fiche-card-catalyst {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 212, 255, 0.06);
    border-left: 3px solid var(--cat-catalyseur);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.45;
}
.catalyst-icon {
    color: var(--cat-catalyseur);
    flex-shrink: 0;
    font-size: 13px;
}
.catalyst-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fiche-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
    margin-top: auto;
    /* padding-right 130px (v3 2026-05-18) : scope la réserve de la zone
       du bouton .fiche-card-compare-wrap absolute (right:14 + width ~135
       = 149px de zone, avec marge de sécurité 130px) au footer badges
       UNIQUEMENT. Pas au link parent (v2 amputait toute la card).
       Ainsi sparkline, header avec titre, KPIs et catalyst conservent
       leur pleine largeur, et seul le badge en bas wrap si trop long. */
    padding-right: 130px;
}
/* Force le wrap interne du texte d'un badge sectoriel trop long pour
   sa zone parente (préservé de v2 — toujours nécessaire avec v3 car
   .identity-badge en inline-flex prend max-content par défaut et
   déborderait au-delà du padding-right: 130px du parent). Ciblé sur
   .fiche-card-badges uniquement pour ne pas affecter l'identity-card
   30s de la fiche où les badges sont sur 1 ligne large. */
.fiche-card-badges .identity-badge {
    max-width: 100%;
    /* Finition esthétique 2026-05-18 (post-v3) : retire le cartouche
       pill-shape (background + border + padding) du badge sectoriel
       dans le footer des cards index. Sur les fiches à secteur long
       (CCJ "Énergie nucléaire / Mines d'uranium", LEU "Nucléaire /
       Enrichissement uranium / HALEU"), le cartouche wrappé sur 2
       lignes créait un effet "bulle déséquilibrée" avec espace vide
       à droite. Le secteur devient un label informatif sobre ; le
       badge PEA-PME conserve son cartouche vert (cf. règle suivante,
       specificity 0,3,0 supérieure). Scope strict : ne s'applique
       PAS à l'identity-card 30s de la fiche (badges en cartouche
       préservés là-bas). */
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-3);
    font-weight: 500;
}
.fiche-card-badges .identity-badge.pea {
    /* Réintroduit le cartouche vert PEA-PME éligible (specificity 0,3,0
       supérieure à 0,2,0 de la règle ci-dessus). L'étoile ★ du
       pseudo-element ::before de .identity-badge.pea reste appliquée
       par la règle initiale, non touchée. */
    background: rgba(1, 181, 116, 0.12);
    border: 1px solid rgba(1, 181, 116, 0.35);
    padding: 5px 11px;
    color: var(--up);
    font-weight: 600;
}
/* PR vignettes secteur filtrables 2026-05-18 : vignette catégorie secteur
   en cartouche violet (3e couleur identitaire : vert PEA / violet secteur /
   gris dépouillé pour les autres badges). Override spécifique sur la classe
   .sector (specificity 0,3,0) avec curseur pointer car cliquable —
   filtre la grille par cette catégorie via index.js. Le tooltip `title`
   conserve le libellé descriptif long (ex. "Énergie nucléaire / Mines
   d'uranium" pour CCJ catégorie "Nucléaire"). */
.fiche-card-badges .identity-badge.sector {
    background: rgba(67, 24, 255, 0.12);
    border: 1px solid rgba(67, 24, 255, 0.35);
    padding: 5px 11px;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.fiche-card-badges .identity-badge.sector:hover,
.fiche-card-badges .identity-badge.sector:focus-visible {
    background: rgba(67, 24, 255, 0.22);
    border-color: rgba(67, 24, 255, 0.55);
    outline: none;
}
.fiche-card-badges .identity-badge.sector:focus-visible {
    box-shadow: 0 0 0 2px rgba(67, 24, 255, 0.4);
}
/* État "actif" — vignette correspondant au filtre secteur courant.
   Toggled en JS par .is-active sur les vignettes dont
   data-sector-filter === currentSecteur. */
.fiche-card-badges .identity-badge.sector.is-active {
    background: rgba(67, 24, 255, 0.28);
    border-color: var(--accent);
    color: #ffffff;
}

/* --- Nav prev/next entre fiches (CC-1) ---------------------- */
.fiche-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.fiche-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    transition: color 0.15s ease, background 0.15s ease;
}
.fiche-nav a:hover {
    color: var(--text-1);
    background: var(--surface-elevated);
}
.fiche-nav-prev { justify-self: start; }
.fiche-nav-next { justify-self: end; }
.fiche-nav-kbd {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-3);
}

/* --- Responsive ---------------------------------------------- */
@media (max-width: 1280px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-stats { gap: 16px; padding: 14px 16px; }
    .stat-value { font-size: 22px; }
    .stat-divider { display: none; }
    .stats-ia-note { padding-top: 10px; font-size: 11px; }
    .portfolio-toolbar { padding: 12px 14px; gap: 12px 16px; }
    /* Mobile : padding-bottom préservé à 36px pour la zone du bouton
       .fiche-card-compare-wrap (bottom:10px à <600px, cf. règle dédiée). */
    .fiche-card-link { padding: 16px 18px 36px 18px; }
    .fiche-nav { padding: 4px 16px; font-size: 11px; }
    .fiche-nav-kbd { display: none; }
}
@media (max-width: 600px) {
    .fiche-card-name h3 { font-size: 16px; }
    .kpi-block-value { font-size: 16px; }
}

/* ============================================================
   PR-F MODE COMPARAISON 2026-05-18
   /compare-X-Y.html — layout par sections empilées 2-col mixtes
   ============================================================ */

/* --- Layout général --------------------------------------- */
body.page-compare {
    background: var(--bg);
}
.compare-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 32px 48px 32px;
}
.compare-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}
.compare-header h1 {
    margin: 0 0 8px 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-1);
}
.compare-vs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-2);
    font-size: 15px;
}
.compare-vs a {
    color: var(--text-2);
    transition: color 0.15s ease;
}
.compare-vs a:hover { color: var(--text-1); }
.compare-vs a strong { color: var(--text-1); font-weight: 600; }
.compare-vs a .mono { font-size: 12px; color: var(--text-3); margin-left: 4px; }
.compare-vs-sep {
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    padding: 0 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Sélecteurs A/B --------------------------------------- */
.compare-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.compare-selector-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.compare-select {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.compare-select:hover, .compare-select:focus {
    border-color: var(--accent);
    outline: none;
}
.compare-go-btn {
    background: var(--accent);
    color: var(--text-1);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.compare-go-btn:hover { background: #5a2eff; }
.compare-go-btn:disabled {
    background: var(--surface-elevated);
    border-color: var(--border);
    color: var(--text-3);
    cursor: not-allowed;
}

/* --- Sections empilées ----------------------------------- */
.compare-section {
    margin-top: 28px;
}
.compare-section-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.compare-section-title .acc {
    width: 4px;
    height: 20px;
    background: var(--grad-1);
    border-radius: 2px;
}

/* --- Grid 2-col (stacking vertical mobile pour identity + timelines + counts) --- */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .compare-grid-stack-mobile { grid-template-columns: 1fr; }
}

/* --- Identity card (PR-F section 1) ----------------------- */
.compare-identity-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.compare-card-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
}
.compare-identity-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.1;
}
.compare-identity-ticker {
    color: var(--text-3);
    font-size: 12px;
    letter-spacing: 0.4px;
}
.compare-identity-score {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 56px;
    font-weight: 700;
    line-height: 0.9;
    background: linear-gradient(135deg, #4318ff 0%, #00d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
    margin: 6px 0;
}
.compare-identity-score .denom {
    font-size: 18px;
    color: var(--text-3);
    -webkit-text-fill-color: var(--text-3);
    font-weight: 500;
    margin-left: 2px;
}
.compare-identity-score-na {
    font-size: 28px;
    color: var(--text-3);
    margin: 6px 0;
}
.compare-identity-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* --- Winner highlight (F4) -------------------------------- */
.winner-card {
    border-left: 3px solid var(--up);
}
.winner-cell {
    color: var(--up) !important;
    font-weight: 700;
}
.winner-mark {
    color: var(--up);
    font-size: 11px;
    margin-left: 4px;
    vertical-align: 2px;
}

/* --- Tableau KPIs (PR-F section 2) ------------------------ */
.compare-kpi-table {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 14px;
}
.compare-kpi-table thead th {
    background: var(--surface-elevated);
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    text-align: left;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}
.compare-kpi-table thead th:not(:first-child) {
    color: var(--text-1);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
.compare-kpi-table tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text-1);
    vertical-align: middle;
}
.compare-kpi-table tbody tr:last-child td { border-bottom: 0; }
.compare-kpi-table .kpi-label {
    color: var(--text-3);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    width: 32%;
}
.compare-kpi-table .kpi-sub {
    color: var(--text-3);
    font-size: 11px;
    margin-left: 6px;
    font-family: var(--font-sans);
    text-transform: lowercase;
}
.compare-kpi-table td.mono.up   { color: var(--up); }
.compare-kpi-table td.mono.down { color: var(--down); }
.compare-winner-legend {
    margin: 12px 4px 0 4px;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.5;
}

/* --- Pipeline compact (PR-F section 3) -------------------- */
.compare-pipeline-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.compare-pipeline-row {
    background: var(--surface-elevated);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.compare-pipeline-row .cp-prog {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
}
.compare-pipeline-row .cp-track {
    position: relative;
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    margin: 4px 0;
}
.compare-pipeline-row .cp-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--grad-1);
}
.compare-pipeline-row .cp-fill.p1     { background: linear-gradient(90deg, #4318ff 0%, #9f7aea 100%); }
.compare-pipeline-row .cp-fill.p2     { background: linear-gradient(90deg, #4318ff 0%, #00d4ff 100%); }
.compare-pipeline-row .cp-fill.preclin{ background: linear-gradient(90deg, #ff8c00 0%, #ffb547 100%); }
.compare-pipeline-row .cp-fill.disc   { background: linear-gradient(90deg, #2d3a6b 0%, #6b7394 100%); }
.compare-pipeline-row .cp-fill.pre    { background: linear-gradient(90deg, #ff8c00 0%, #ffb547 100%); }
.compare-pipeline-row .cp-fill.prod   { background: linear-gradient(90deg, #01b574 0%, #17ad37 100%); }
.compare-pipeline-row .cp-cursor {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-1);
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 3px rgba(67, 24, 255, 0.18);
    transform: translate(-50%, -50%);
}
.compare-pipeline-row .cp-cursor.p1     { border-color: #9f7aea; }
.compare-pipeline-row .cp-cursor.p2     { border-color: var(--cat-catalyseur); }
.compare-pipeline-row .cp-cursor.preclin{ border-color: var(--neutral); }
.compare-pipeline-row .cp-cursor.disc   { border-color: var(--text-3); }
.compare-pipeline-row .cp-cursor.pre    { border-color: var(--neutral); }
.compare-pipeline-row .cp-cursor.prod   { border-color: var(--up); }
.compare-pipeline-row .cp-stade-line {
    font-size: 11.5px;
    color: var(--text-2);
    line-height: 1.4;
}
.compare-pipeline-row .cp-phase-label {
    color: var(--text-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10.5px;
}
.compare-pipeline-row .cp-stade-text {
    color: var(--text-3);
    margin-left: 4px;
}

/* --- Compteurs alertes (PR-F section 4) ------------------- */
.compare-counts-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.compare-counts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.compare-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11.5px;
}
.compare-count-cat {
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    font-size: 10.5px;
}
.compare-count-value {
    color: var(--text-1);
    font-weight: 700;
}

/* --- Bouton "Comparer avec..." sur cards index (Bonus F6) - */
.fiche-card { position: relative; }
.fiche-card-compare-wrap {
    position: absolute;
    bottom: 12px;
    right: 14px;
    z-index: 3;
}
.fiche-card-compare-btn {
    padding: 4px 10px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.fiche-card-compare-btn:hover,
.fiche-card-compare-btn[aria-expanded="true"] {
    background: rgba(67, 24, 255, 0.18);
    border-color: var(--accent);
    color: var(--text-1);
}
.fiche-card-compare-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    min-width: 200px;
    max-height: 240px;
    overflow-y: auto;
}
.fiche-card-compare-menu a {
    display: block;
    padding: 8px 14px;
    color: var(--text-2);
    font-size: 12.5px;
    transition: background 0.15s ease, color 0.15s ease;
}
.fiche-card-compare-menu a:hover {
    background: rgba(67, 24, 255, 0.12);
    color: var(--text-1);
}
.fiche-card-compare-menu a .mono {
    color: var(--text-3);
    font-size: 10.5px;
    margin-left: 4px;
}

/* --- Responsive PR-F -------------------------------------- */
@media (max-width: 1024px) {
    .compare-main { padding: 16px 18px 32px 18px; }
    .compare-header { flex-direction: column; }
    .compare-selector { width: 100%; }
}
@media (max-width: 768px) {
    .compare-header h1 { font-size: 22px; }
    .compare-identity-score { font-size: 48px; }
    .compare-kpi-table { font-size: 13px; }
    .compare-kpi-table thead th,
    .compare-kpi-table tbody td { padding: 10px 12px; }
    .compare-kpi-table .kpi-label { width: 38%; font-size: 11px; }
}
@media (max-width: 600px) {
    /* Mobile <600px (1 card / ligne, viewport ~360-390px) : pas de
       padding-right desktop sur .fiche-card-link (v3 : il n'y a plus
       de réservation horizontale à scoper out de toute façon). Et on
       bascule .fiche-card-compare-wrap en position:relative (flux normal)
       sous les badges. Pattern responsive standard "absolute desktop →
       static mobile". Le wrap reste en position:relative (pas static)
       pour servir de containing block au menu déroulant .compare-menu
       toujours en position:absolute bottom:calc(100% + 6px) right:0.
       padding-right scopé sur .fiche-card-badges (130px desktop) reset
       à 0 ici car le bouton n'est plus en absolute. */
    .fiche-card-link { padding: 16px 18px 16px 18px; }
    .fiche-card-badges { padding-right: 0; }
    .fiche-card-compare-wrap {
        position: relative;
        bottom: auto;
        right: auto;
        text-align: right;
        margin: 10px 18px 14px 18px;
    }
    .compare-section-title { font-size: 18px; }
}