/* ═══════════════════════════════════════════════════════════════
   BRVM Stock Ticker — Frontend Styles
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* ── Wrapper ──────────────────────────────────────────────────── */
.brvm-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--brvm-font-size, 13px);
    color: #1e293b;
    border: 1px solid var(--brvm-border-color, #dde4ee);
    border-radius: var(--brvm-radius, 10px);
    overflow: visible;
    margin: 1.5rem 0;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    padding-bottom: 0;
}

/* ── Table scroller — barre de défilement toujours visible ─────── */
.brvm-table-scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.brvm-table-scroller::-webkit-scrollbar        { height: 5px; }
.brvm-table-scroller::-webkit-scrollbar-track  { background: #f1f5f9; border-radius: 4px; }
.brvm-table-scroller::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 4px; }
.brvm-table-scroller::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Topbar ───────────────────────────────────────────────────── */
.brvm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1.25rem;
    background: var(--brvm-header-bg, #1b3049);
    color: var(--brvm-header-color, #fff);
}
/* Variante alignée à gauche : titre + date sur la même ligne */
.brvm-topbar.brvm-topbar-left {
    justify-content: space-between;
}
.brvm-topbar-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .5rem;
}
.brvm-topbar-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.brvm-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #f59e0b;
    animation: brvm-pulse 2s infinite;
}
@keyframes brvm-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.brvm-topbar-date { font-size: .83em; opacity: .8; }

/* ── Inputs & Selects ─────────────────────────────────────────── */
.brvm-input {
    height: 34px;
    padding: 0 .75rem;
    background: #fff !important;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: var(--brvm-font-size, 13px);
    color: #1e293b;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}
.brvm-input:focus {
    border-color: var(--brvm-header-bg, #1b3049);
    box-shadow: 0 0 0 3px rgba(26,58,92,.12);
}
select.brvm-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M8 10.5l-4-4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 16px;
    padding-right: 2rem;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   BARRE DE CONTRÔLES — Recherche + 3 filtres + pills sur 1 ligne
   ══════════════════════════════════════════════════════════════ */
.brvm-controls {
    padding: .6rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee);
}
.brvm-controls-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Recherche : prend l'espace disponible */
.brvm-search-input {
    flex: 1;
    min-width: 160px;
    background: #fff !important;
}

/* Filtres : largeur fixe, s'adaptent */
.brvm-filter-select {
    width: 140px;
    flex-shrink: 0;
}

/* Pills : poussées à droite automatiquement */
.brvm-pills {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}
.brvm-pill {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .78em;
    font-weight: 600;
    white-space: nowrap;
}
.brvm-pill.up      { background: #dcfce7; color: var(--brvm-positive, #194131); }
.brvm-pill.down    { background: #fee2e2; color: var(--brvm-negative, #dd3333); }
.brvm-pill.neutral { background: #f1f5f9; color: var(--brvm-neutral,  #6b7280); }
.brvm-pill.total   { background: #e0eaff; color: #3b5bdb; }

/* ── Tableau ──────────────────────────────────────────────────── */

.brvm-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--brvm-font-size, 13px);
    margin-bottom: 0;
}
.brvm-tbl thead tr {
    background: var(--brvm-header-bg, #1b3049);
    color: var(--brvm-header-color, #fff);
}
.brvm-tbl th {
    padding: .6rem .9rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}
.brvm-tbl th:hover { background: rgba(255,255,255,.1); }
.brvm-tbl th.sorted-asc::after  { content: ' ▲'; font-size: .7em; opacity: .8; }
.brvm-tbl th.sorted-desc::after { content: ' ▼'; font-size: .7em; opacity: .8; }

.brvm-tbl tbody tr {
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee);
    transition: background .1s;
}
.brvm-tbl tbody tr:last-child { border-bottom: none !important; }
.brvm-tbl tbody tr:hover          { background: #eef4ff !important; }
.brvm-tbl tbody tr.brvm-hidden    { display: none !important; }

.brvm-tbl td { padding: .5rem .9rem; white-space: nowrap; }

.brvm-sym {
    font-weight: 700;
    color: var(--brvm-header-bg, #1b3049);
    letter-spacing: .02em;
}

.brvm-company { max-width: 160px; white-space: normal; line-height: 1.3; }
.brvm-country { color: #475569; font-size: .9em; }

.brvm-trend-up   .brvm-price { color: var(--brvm-positive, #194131); font-weight: 700; }
.brvm-trend-down .brvm-price { color: var(--brvm-negative, #dd3333); font-weight: 700; }
.brvm-muted { color: #94a3b8; }
.brvm-cap   { color: #475569; font-size: .88em; }

/* Badges variation */
.brvm-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: .14rem .48rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .82em;
    white-space: nowrap;
}
.brvm-badge.brvm-up      { background: #dcfce7; color: var(--brvm-positive, #194131); }
.brvm-badge.brvm-down    { background: #fee2e2; color: var(--brvm-negative, #dd3333); }
.brvm-badge.brvm-neutral { background: #f1f5f9; color: var(--brvm-neutral,  #6b7280); }

/* ── Couleurs variation directes (sans badge) ───────────────── */
.brvm-up     { color: var(--brvm-positive, #16a34a) !important; }
.brvm-down   { color: var(--brvm-negative, #dc2626) !important; }
.brvm-neutral{ color: var(--brvm-neutral,  #6b7280) !important; }

/* ── Pagination ───────────────────────────────────────────────── */
.brvm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .65rem 1rem;
    background: #f8fafc;
    border-top: 1px solid var(--brvm-border-color, #dde4ee);
}
.brvm-pagination:empty { display: none; }

.brvm-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 .5rem;
    border: 1px solid #dde4ee;
    border-radius: 6px;
    background: #fff;
    font-size: .85em;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    color: #475569;
}
.brvm-page-btn:hover  { background: #e0eaff; border-color: #93b0ff; color: #1e3a8a; }
.brvm-page-btn.active { background: var(--brvm-btn-bg, #1b3049) !important; color: var(--brvm-btn-color, #fff) !important; border-color: var(--brvm-btn-bg, #1b3049) !important; }
.brvm-page-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.brvm-page-info { font-size: .82em; color: #64748b; padding: 0 .4rem; }

/* ── Erreur ───────────────────────────────────────────────────── */
.brvm-error {
    padding: 1rem 1.25rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--brvm-radius, 10px);
    color: #b91c1c;
    font-size: .93em;
}

/* ══════════════════════════════════════════════════════════════
   WIDGET [brvm_stock_detail]
   ══════════════════════════════════════════════════════════════ */
.brvm-sd-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1.25rem;
    background: var(--brvm-header-bg, #1b3049);
}
.brvm-sd-sel-group {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: 1;
}
.brvm-sd-sel-label {
    color: rgba(255,255,255,.8);
    font-size: .85em;
    font-weight: 600;
    white-space: nowrap;
}
.brvm-sd-select {
    flex: 1;
    max-width: 440px;
    height: 36px;
    font-size: .88em;
}
.brvm-sd-refresh-btn {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 7px;
    color: #ffffff;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
    line-height: 0;
}
.brvm-sd-refresh-btn:hover { background: rgba(255,255,255,.28); }
.brvm-sd-refresh-btn svg {
    display: block;
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    stroke-width: 2.2px;
    fill: none;
}
.brvm-sd-refresh-btn svg polyline,
.brvm-sd-refresh-btn svg path {
    stroke: #ffffff;
    stroke-width: 2.2px;
    fill: none;
}

/* État vide */
.brvm-sd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 2rem;
    gap: .75rem;
    color: #94a3b8;
}
.brvm-sd-empty-icon { font-size: 3rem; opacity: .4; }
.brvm-sd-empty p    { font-size: .95em; margin: 0; }

/* Chargement */
.brvm-sd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem;
    gap: .75rem;
    color: #64748b;
    font-size: .9em;
}
.brvm-sd-loading[hidden] { display: none; }

/* Spinner */
.brvm-spinner {
    width: 36px; height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--brvm-header-bg, #1b3049);
    border-radius: 50%;
    animation: brvm-spin .7s linear infinite;
}
@keyframes brvm-spin { to { transform: rotate(360deg); } }

/* Layout split gauche / droite */
.brvm-sd-content {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 340px;
}
.brvm-sd-content[hidden] { display: none; }

/* Panneau gauche — stats */
.brvm-sd-left {
    padding: 1.25rem 1rem;
    border-right: 1px solid var(--brvm-border-color, #dde4ee);
    background: #fafbfd;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.brvm-sd-price-row {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .1rem;
}
.brvm-sd-cours {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--brvm-header-bg, #1b3049);
    line-height: 1;
}
.brvm-sd-var-badge .brvm-badge { font-size: .9em; }

.brvm-sd-stats-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .84em;
}
.brvm-sd-stats-tbl tr   { border-bottom: 1px solid #f0f5fb; }
.brvm-sd-stats-tbl tr:last-child { border-bottom: none; }
.brvm-sd-stats-tbl td   { padding: .3rem .1rem; vertical-align: top; }
.brvm-sd-stats-tbl td:first-child  { color: #64748b; width: 58%; }
.brvm-sd-stats-tbl td:last-child   { text-align: right; font-weight: 600; color: #1e293b; }
.brvm-sd-sep { height: 1px; background: var(--brvm-border-color, #dde4ee); margin: .2rem 0; }

/* Panneau droit — graphique */
.brvm-sd-right {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
}
.brvm-sd-chart-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.brvm-sd-chart-title { font-size: .93em; font-weight: 700; color: #0f172a; margin: 0; }
.brvm-sd-chart-sub   { font-size: .78em; color: #64748b; margin: .15rem 0 0; }

.brvm-sd-periods { display: flex; gap: .22rem; flex-shrink: 0; }
.brvm-sd-period {
    padding: .2rem .58rem;
    border: 1px solid #dde4ee;
    border-radius: 5px;
    background: #fff;
    font-size: .8em;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}
.brvm-sd-period:hover  { background: #f0f5fb; border-color: #94a3b8; }
.brvm-sd-period.active { background: var(--brvm-btn-bg, #1b3049) !important; color: var(--brvm-btn-color, #fff) !important; border-color: var(--brvm-btn-bg, #1b3049) !important; }

.brvm-sd-canvas-wrap {
    position: relative;
    flex: 1;
}
.brvm-sd-canvas-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   MODAL HISTORIQUE (popup tableau)
   ══════════════════════════════════════════════════════════════ */
.brvm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: brvm-fade-in .18s ease;
}
.brvm-modal-overlay[hidden] { display: none; }
@keyframes brvm-fade-in { from{opacity:0;} to{opacity:1;} }

.brvm-modal-box {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 1000px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    animation: brvm-slide-up .22s ease;
}
@keyframes brvm-slide-up { from{transform:translateY(20px);opacity:0;} to{transform:translateY(0);opacity:1;} }

.brvm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.2rem 1.5rem .9rem;
    border-bottom: 1px solid #f0f5fb;
    position: sticky; top: 0;
    background: #fff; z-index: 1;
}
.brvm-modal-title    { font-size: 14px !important; font-weight: 700; color: #0f172a; margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.brvm-modal-subtitle { font-size: .83rem; color: #64748b; margin: .2rem 0 0; }
.brvm-modal-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: #f1f5f9; border-radius: 50%;
    font-size: 1rem; cursor: pointer; transition: background .15s; color: #475569;
}
.brvm-modal-close:hover { background: #fee2e2; color: #dc2626; }

.brvm-modal-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1px;
    background: #f0f5fb;
    border-bottom: 1px solid #f0f5fb;
}
.brvm-modal-stat      { flex: 1; min-width: 80px; padding: .65rem .9rem; background: #fff; text-align: center; }
.brvm-modal-stat-val  { font-size: 1rem; font-weight: 700; color: #0f172a; }
.brvm-modal-stat-lbl  { font-size: .72rem; color: #64748b; margin-top: .12rem; text-transform: uppercase; letter-spacing: .03em; }

.brvm-modal-tabs { display: flex; border-bottom: 1px solid #f0f5fb; padding: 0 1.5rem; }
.brvm-tab {
    padding: .65rem 1rem;
    border: none; background: none;
    font-size: .88rem; font-weight: 500;
    color: #64748b; cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}
.brvm-tab:hover  { color: var(--brvm-header-bg, #1b3049); }
.brvm-tab.active { color: var(--brvm-header-bg, #1b3049); border-bottom-color: var(--brvm-header-bg, #1b3049); font-weight: 700; }

.brvm-modal-body { padding: 1.25rem 1.5rem; }
.brvm-tab-panel  { display: none; }
.brvm-tab-panel.active { display: block; }
.brvm-chart-wrap { position: relative; height: 380px; width: 100%; }
.brvm-chart-wrap canvas { max-height: 100%; }

.brvm-modal-loading {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 3rem; gap: 1rem;
    color: #64748b; font-size: .9rem;
}
.brvm-modal-loading[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════
   TICKER DÉFILANT
   ══════════════════════════════════════════════════════════════ */
.brvm-ticker-wrap {
    display: flex;
    align-items: center;
    background: var(--brvm-ticker-bg, #1b3049);
    color: var(--brvm-ticker-color, #fff);
    border-radius: var(--brvm-radius, 10px);
    overflow: hidden;
    margin: 1rem 0;
    height: 40px;
    font-size: var(--brvm-font-size, 13px);
}
.brvm-ticker-label {
    flex-shrink: 0;
    padding: 0 1rem;
    font-weight: 800; font-size: .95em; letter-spacing: .08em;
    border-right: 2px solid rgba(255,255,255,.2);
    height: 100%; display: flex; align-items: center;
    background: rgba(0,0,0,.2);
}
.brvm-ticker-track   { flex: 1; overflow: hidden; }
.brvm-ticker-content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: brvm-scroll var(--brvm-ticker-dur, 60s) linear infinite;
    will-change: transform;
}
.brvm-ticker-content:hover { animation-play-state: paused; }
@keyframes brvm-scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }

.brvm-ti {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0 1.15rem;
    border-right: 1px solid rgba(255,255,255,.15);
    font-size: .88em;
}
.brvm-ti b { letter-spacing: .03em; }
.brvm-ti .brvm-badge { background: rgba(255,255,255,.12); color: inherit; padding: .08rem .35rem; font-size: .8em; }
.brvm-ti.brvm-up   .brvm-badge { background: rgba(22,163,74,.35); }
.brvm-ti.brvm-down .brvm-badge { background: rgba(220,38,38,.35); }

/* ══════════════════════════════════════════════════════════════
   CARTES Top / Flop
   ══════════════════════════════════════════════════════════════ */
.brvm-cards { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.25rem; }
.brvm-card {
    display: flex; align-items: stretch;
    border: 1px solid var(--brvm-border-color, #dde4ee);
    border-radius: 8px; overflow: hidden;
    flex: 1; min-width: 150px; max-width: 210px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
    transition: transform .15s, box-shadow .15s;
}
.brvm-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.brvm-card-rank {
    width: 32px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #fff;
}
.brvm-trend-up      .brvm-card-rank { background: var(--brvm-positive, #194131); }
.brvm-trend-down    .brvm-card-rank { background: var(--brvm-negative, #dd3333); }
.brvm-trend-neutral .brvm-card-rank { background: var(--brvm-neutral,  #6b7280); }
.brvm-card-body  { padding: .65rem .85rem; flex: 1; }
.brvm-card-sym   { font-weight: 800; font-size: 1.05em; color: var(--brvm-header-bg, #1b3049); }
.brvm-card-name  { font-size: .78em; color: #64748b; margin: .1rem 0 .3rem; }
.brvm-card-meta  { font-size: .72em; color: #94a3b8; margin-bottom: .3rem; }
.brvm-card-price { font-weight: 700; font-size: 1em; }
.brvm-card-price small { font-weight: 400; font-size: .75em; color: #94a3b8; }
.brvm-card-var   { margin-top: .3rem; }

/* ══════════════════════════════════════════════════════════════
   RÉSUMÉ MARCHÉ
   ══════════════════════════════════════════════════════════════ */
.brvm-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--brvm-border-color, #dde4ee);
}
.brvm-scard { padding: 1.2rem 1rem; text-align: center; background: #fff; }
.brvm-scard-num { font-size: 1.9em; font-weight: 800; line-height: 1; }
.brvm-scard-lbl { font-size: .78em; color: #64748b; margin-top: .2rem; text-transform: uppercase; letter-spacing: .03em; }
.brvm-scard.up      .brvm-scard-num { color: var(--brvm-positive, #194131); }
.brvm-scard.down    .brvm-scard-num { color: var(--brvm-negative, #dd3333); }
.brvm-scard.neutral .brvm-scard-num { color: var(--brvm-neutral,  #6b7280); }
.brvm-scard.total   .brvm-scard-num { color: var(--brvm-header-bg, #1b3049); }

.brvm-idx-mini { display: flex; flex-wrap: wrap; border-top: 1px solid var(--brvm-border-color, #dde4ee); }
.brvm-idx-item {
    flex: 1; min-width: 180px;
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem 1.25rem;
    border-right: 1px solid var(--brvm-border-color, #dde4ee);
}
.brvm-idx-item:last-child { border-right: none; }
.brvm-idx-name { font-size: .82em; color: #475569; flex: 1; }
.brvm-idx-val  { font-weight: 700; }


/* ── 2-column controls (for brvm_indices) ────────────────────── */
/* ── Contrôles 2 colonnes (ex: Obligations — recherche + filtre) */
.brvm-controls-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    align-items: center;
}
.brvm-controls-2col .brvm-input {
    width: 100%;
    min-width: 0; /* évite le débordement dans le grid */
}

.brvm-idx-name-cell {
    font-weight: 600;
    color: #1e293b;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .brvm-sd-content { grid-template-columns: 1fr; }
    .brvm-sd-left    { border-right: none; border-bottom: 1px solid var(--brvm-border-color, #dde4ee); }
}
@media (max-width: 640px) {
    .brvm-wrap                     { overflow: hidden; border-radius: var(--brvm-radius, 10px); }
    .brvm-table-scroller           { overflow: hidden; }
    .brvm-tbl                      { border-radius: 0; table-layout: auto; width: 100%; }
    /* Textes mobile : 10px général, 9px pour majuscules (thead) */
    .brvm-wrap .brvm-tbl tbody td,
    .brvm-wrap .brvm-tbl tbody td * { font-size: 10px !important; white-space: normal; word-break: break-word; }
    .brvm-wrap .brvm-tbl thead th   { font-size: 9px !important; white-space: normal; word-break: break-word; }
    /* Largeur auto selon contenu */
    .brvm-wrap .brvm-tbl td,
    .brvm-wrap .brvm-tbl th         { width: auto; }
    .brvm-controls-row  { flex-wrap: wrap; }
    .brvm-controls-2col { grid-template-columns: 1fr; }
    .brvm-search-input  { width: 100%; flex-basis: 100%; }
    .brvm-filter-select { flex: 1; min-width: 100px; }
    .brvm-pills         { margin-left: 0; }
    .brvm-summary-grid  { grid-template-columns: repeat(2, 1fr); }
    .brvm-modal-stats   { grid-template-columns: repeat(2, 1fr); }
    .brvm-sd-chart-hdr  { flex-direction: column; }
    .brvm-cards         { justify-content: center; }
    .brvm-idx-mini      { flex-direction: column; }
    .brvm-idx-item      { border-right: none; border-bottom: 1px solid var(--brvm-border-color, #dde4ee); }
    .brvm-col-hide-mobile { display: none !important; }

    /* Obligations — nom obligation plus petit */
    .brvm-obl-nom       { font-size: .74em; line-height: 1.3; }

    /* Indices — nom indice plus petit */
    .brvm-idx-name-cell { font-size: .74em; line-height: 1.3; }

    /* Capitalisations — société plus petit, secteur plus large */
    .brvm-cap-wrap .brvm-company { font-size: .74em; line-height: 1.3; }
    .brvm-cap-wrap .brvm-sector  { font-size: calc(var(--brvm-font-size, 13px) + 3px); }
}

/* ── Alignement à droite colonnes numériques ─────────────────── */
.brvm-th-right { text-align: right !important; }
.brvm-td-right { text-align: right !important; }

/* ── Secteur : retour à la ligne automatique ─────────────────── */
.brvm-sector {
    color: #475569;
    font-size: .9em;
    max-width: 130px !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35;
}

/* ── Ligne cliquable ─────────────────────────────────────────── */
.brvm-clickable-row {
    cursor: pointer;
    transition: background .12s;
}
.brvm-clickable-row:hover {
    background: #eef4ff !important;
}
.brvm-clickable-row:hover .brvm-sym {
    color: var(--brvm-header-bg, #1b3049);
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   MODAL INDICE
   ══════════════════════════════════════════════════════════════ */

/* Tableau de détail dans la popup */
.brvm-idx-detail-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .92em;
}
.brvm-idx-detail-tbl thead tr {
    background: var(--brvm-header-bg, #1b3049);
    color: var(--brvm-header-color, #fff);
}
.brvm-idx-detail-tbl th {
    padding: .55rem 1rem;
    font-weight: 600;
    text-align: left;
}
.brvm-idx-detail-tbl tbody tr {
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee);
    transition: background .1s;
}
.brvm-idx-detail-tbl tbody tr:nth-child(even) {
    background: var(--brvm-row-alt-bg, #ffffff);
}
.brvm-idx-detail-tbl tbody tr:last-child {
    border-bottom: none;
}
.brvm-idx-dt-lbl {
    padding: .6rem 1rem;
    color: #475569;
    font-size: .88em;
}
.brvm-idx-dt-val {
    padding: .6rem 1rem;
    font-weight: 600;
    color: #0f172a;
}

/* Ligne cliquable pour l'indices table */
.brvm-idx-clickable {
    cursor: pointer;
    transition: background .12s;
}
.brvm-idx-clickable:hover {
    background: #eef4ff !important;
}
.brvm-idx-clickable:hover .brvm-idx-name-cell {
    color: var(--brvm-header-bg, #1b3049);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   OBLIGATIONS [brvm_obligations]
   ══════════════════════════════════════════════════════════════ */
.brvm-obl-sym {
    font-weight: 700;
    color: var(--brvm-header-bg, #1b3049);
    font-size: .88em;
    letter-spacing: .04em;
}
.brvm-obl-nom {
    max-width: 260px;
    white-space: normal;
    line-height: 1.35;
    font-size: .88em;
}
.brvm-obl-cours {
    font-weight: 600;
    color: var(--brvm-header-bg, #1b3049);
}
.brvm-obl-taux {
    font-weight: 600;
    color: var(--brvm-positive, #194131);
}
.brvm-obl-periode {
    font-size: .82em;
    color: #64748b;
}

/* ── Obligations : badges catégorie ─────────────────────────── */
.brvm-obl-cat {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 4px;
    font-size: .78em;
    font-weight: 600;
    white-space: nowrap;
}
.brvm-obl-cat--etat       { background: #dbeafe; color: #1e40af; }
.brvm-obl-cat--regionales { background: #dcfce7; color: #166534; }
.brvm-obl-cat--privees    { background: #fef9c3; color: #854d0e; }
.brvm-obl-cat--sukuk      { background: #ede9fe; color: #6d28d9; }


/* ── Modal graphique — selects contrôles ────────────────────── */
#brvm-chart-period-sel:disabled { opacity: .45; cursor: not-allowed; }

/* ── Detail widgets ── */
.brvm-detail-wrap { overflow: hidden; }
.brvm-detail-left-hdr {
    padding: .65rem 1rem;
    background: var(--brvm-header-bg, #1b3049);
    color: var(--brvm-header-color, #fff);
    font-weight: 700;
    font-size: .88em;
    letter-spacing: .03em;
    flex-shrink: 0;
}
.brvm-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}
.brvm-detail-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem .85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee);
    transition: background .12s;
}
.brvm-detail-item:hover,
.brvm-detail-item.active {
    background: #f0f5fb;         /* même couleur hover et active */
    color: #0f172a;
}
.brvm-detail-item.active { font-weight: 600; }
.brvm-detail-item-name {
    font-size: .82em;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brvm-detail-item.active .brvm-detail-item-name { color: #0f172a; }

/* CTA bouton en bas de colonne gauche */
.brvm-detail-cta {
    display: block;
    margin: .6rem .75rem;
    padding: .45rem .75rem;
    background: var(--brvm-btn-bg, #1b3049);
    color: var(--brvm-btn-color, #fff) !important;
    border-radius: 6px;
    font-size: .78em;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    transition: opacity .15s;
    flex-shrink: 0;
}
.brvm-detail-cta:hover { opacity: .82; }


.brvm-detail-right-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee);
    background: #f8fafc;
    flex-shrink: 0;
}
.brvm-detail-right-title {
    font-weight: 700;
    font-size: .9em;
    color: #0f172a;
}
.brvm-detail-loading {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem;
    color: #64748b;
    font-size: .88em;
}
.brvm-detail-chart-wrap {
    flex: 1;
    padding: .75rem 1rem;
    min-height: 200px;
}
.brvm-detail-recap {
    flex: 1;
    overflow: auto;
}

/* Tableau récap — même style que brvm-tbl via brvm-table-scroller */
.brvm-detail-recap .brvm-table-scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.brvm-detail-recap-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .88em;
    white-space: nowrap;
}
.brvm-detail-recap-tbl thead th {
    padding: .55rem 1rem;
    background: var(--brvm-header-bg, #1b3049);
    color: var(--brvm-header-color, #fff);
    font-weight: 600;
    text-align: left;
    position: sticky;
    top: 0;
}
.brvm-detail-recap-tbl thead th:last-child { text-align: right; }
.brvm-detail-recap-tbl tbody tr {
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee);
}
.brvm-detail-recap-tbl tbody tr               { background: var(--brvm-row-bg, #ffffff) !important; }
.brvm-detail-recap-tbl tbody tr:nth-child(even){ background: var(--brvm-row-alt-bg, #ffffff) !important; }
.brvm-detail-recap-label {
    padding: .55rem 1rem;
    color: #475569;
    font-size: .87em;
}
.brvm-detail-recap-val {
    padding: .55rem 1rem;
    text-align: right;
    font-weight: 600;
    color: #0f172a;
}

/* Mobile : empile gauche / droite */
@media (max-width: 640px) {
    .brvm-detail-layout          { flex-direction: column !important; gap: .75rem !important; }
    .brvm-detail-layout .brvm-detail-left,
    .brvm-detail-layout .brvm-detail-left-wide,
    .brvm-detail-layout .brvm-detail-right {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .brvm-detail-list { max-height: 160px; }
}

/* ── Synthèse : indices + stats côte à côte ──────────────────── */
.brvm-synth-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
}
.brvm-synth-half  { border-bottom: none; overflow: hidden; }
.brvm-synth-half .brvm-table-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.brvm-synth-half .brvm-tbl { min-width: 340px; }
.brvm-synth-half:first-child { border-right: 1px solid var(--brvm-border-color, #dde4ee); }

@media (max-width: 768px) {
    .brvm-synth-two-col          { grid-template-columns: 1fr; }
    .brvm-synth-half:first-child { border-right: none; border-bottom: 1px solid var(--brvm-border-color, #dde4ee); }
}

/* ── Detail widgets : colonne gauche 22%, séparées ───────────── */
.brvm-detail-layout {
    display: flex;
    gap: 1.25rem;
    min-height: 340px;
    align-items: stretch;
}
.brvm-detail-left {
    flex: 0 0 22%;
    width: 22%;
    border: 1px solid var(--brvm-border-color, #dde4ee);
    border-radius: var(--brvm-radius, 10px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.brvm-detail-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--brvm-border-color, #dde4ee);
    border-radius: var(--brvm-radius, 10px);
    overflow: hidden;
}
.brvm-synth-section {
    padding: 0;
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee);
    overflow: hidden;
}
.brvm-synth-section .brvm-synth-title {
    padding: .75rem 1.25rem .5rem;
}
.brvm-synth-title {
    font-size: .88rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 .85rem;
    letter-spacing: .02em;
}
.brvm-synth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .65rem;
}
.brvm-synth-card {
    background: #f8fafc;
    border: 1px solid var(--brvm-border-color, #dde4ee);
    border-radius: 8px;
    padding: .7rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.brvm-synth-card-label {
    font-size: .72em;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.brvm-synth-card-val {
    font-size: 1.15em;
    font-weight: 700;
    color: #0f172a;
}
.brvm-synth-card-var {
    font-size: .8em;
    font-weight: 600;
}
.brvm-synth-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .88em;
    table-layout: fixed;
}
.brvm-synth-tbl tr {
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee);
}
.brvm-synth-tbl tr                 { background: var(--brvm-row-bg, #ffffff) !important; }
.brvm-synth-tbl tr:nth-child(even) { background: var(--brvm-row-alt-bg, #ffffff) !important; }
.brvm-synth-tbl td {
    padding: .5rem .85rem;
    word-break: break-word;
}
.brvm-synth-tbl td:first-child { color: #475569; width: 65%; }
.brvm-synth-tbl td:last-child  { text-align: right; font-weight: 600; color: #0f172a; width: 35%; }

/* Champs uniquement disponibles via le BOC */
.brvm-boc-field {
    color: #94a3b8 !important;
    font-style: italic;
    font-size: .8em !important;
    font-weight: 400 !important;
}

/* ── Carte Top/Flop — symbole + variation sur la même ligne ─── */
.brvm-card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .2rem;
}
.brvm-card-top-row .brvm-card-sym {
    font-weight: 700;
    font-size: .92em;
    letter-spacing: .04em;
}

/* ── Detail left 30% pour obligations/indices/cap/volumes ───── */
.brvm-detail-left-wide {
    flex: 0 0 30%;
    width: 30%;
}

/* ── Titres de section synthèse plus petits ──────────────────── */
.brvm-synth-title-sm {
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b !important;
    font-weight: 600;
    margin-bottom: .6rem;
}

/* ── [brvm_top_jour] / [brvm_flop_jour] ─────────────────────── */
.brvm-jour-wrap {
    border-radius: 0 !important;
    overflow: hidden;
    border: 1px solid var(--brvm-border-color, #dde4ee);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.brvm-jour-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem 1rem;
    color: var(--brvm-header-color, #fff);
    background: var(--brvm-header-bg, #1b3049);
}
.brvm-jour-label {
    font-weight: 800;
    font-size: .9em;
    letter-spacing: .06em;
}
.brvm-jour-date {
    font-size: .75em;
    opacity: .85;
}
.brvm-jour-tbl {
    width: 100%;
    border-collapse: collapse;
}
.brvm-jour-tbl thead tr {
    background: var(--brvm-header-bg, #1b3049);
    color: var(--brvm-header-color, #fff);
}
.brvm-jour-tbl thead th {
    padding: .5rem .85rem;
    text-align: left;
    font-size: .78em;
    font-weight: 700;
    white-space: nowrap;
}
.brvm-jour-th-right { text-align: right !important; }
.brvm-jour-row {
    background: var(--brvm-row-bg, #ffffff);
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee);
    cursor: pointer;
    transition: background .1s;
}
.brvm-jour-tbl tbody tr:nth-child(even){ background: var(--brvm-row-alt-bg, #ffffff); }
.brvm-jour-tbl tbody tr:last-child     { border-bottom: none !important; }
.brvm-jour-row:hover { background: #eef4ff !important; }
.brvm-jour-row td {
    padding: .55rem .85rem;
    font-size: .88em;
}
.brvm-jour-td-titre {
    color: #1e293b;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brvm-jour-td-sector {
    color: #64748b;
    font-size: .82em !important;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brvm-jour-td-right {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}
.brvm-jour-var {
    font-weight: 700;
    font-size: .9em;
}
.brvm-jour-var.brvm-up   { color: var(--brvm-positive, #16a34a); }
.brvm-jour-var.brvm-down { color: var(--brvm-negative, #dc2626); }

/* ── [brvm_actions_detail] — pas de bordure sur le widget ───── */
.brvm-actions-detail-wrap {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Hidden always */
.brvm-col-hidden { display: none !important; }

.brvm-table-scroller { margin-bottom: 0; padding-bottom: 0; }
.brvm-tbl tbody tr:last-child td { border-bottom: none; }
.brvm-jour-row:last-child { border-bottom: none !important; }

/* ── [brvm_indices_boursiers] — colonne Indice compacte ─────── */
.brvm-idx-col-name {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 640px) {
    /* Colonne Indice : texte 10px, prend plus de place */
    .brvm-idx-col-name        { font-size: 10px !important; width: 60% !important; max-width: none; }
    .brvm-idx-col-name strong { font-weight: 600; white-space: normal; word-break: break-word; }
    /* Colonnes numériques : plus compactes */
    .brvm-wrap .brvm-tbl th:not(.brvm-idx-col-name),
    .brvm-wrap .brvm-tbl td:not(.brvm-idx-col-name) { width: auto; }
}

/* ── Graphique : textes axe X ───────────────────────────────── */
.brvm-chart-wrap canvas {
    /* Les labels sont stylés via Chart.js options, mais on surcharge ici */
}

/* ── Écrase la couleur #5b5b5b imposée par le thème WordPress ── */
.brvm-wrap,
.brvm-wrap *,
.brvm-wrap table td,
.brvm-wrap table th,
.brvm-wrap table td *,
.brvm-wrap table th * {
    color: inherit;
}
.brvm-wrap table tbody td,
.brvm-wrap table tbody th {
    color: #475569 !important;
}
/* Surcharger les couleurs spécifiques du plugin par-dessus */
.brvm-wrap .brvm-up     { color: var(--brvm-positive, #16a34a) !important; }
.brvm-wrap .brvm-down   { color: var(--brvm-negative, #dc2626) !important; }
.brvm-wrap .brvm-neutral{ color: var(--brvm-neutral,  #6b7280) !important; }
.brvm-wrap .brvm-price,
.brvm-wrap .brvm-price strong { color: #0f172a !important; font-weight: 700; }
.brvm-wrap .brvm-sym    { color: #1b3049 !important; font-weight: 700; }
.brvm-wrap .brvm-muted  { color: #94a3b8 !important; }
.brvm-wrap .brvm-tbl thead th,
.brvm-wrap .brvm-tbl thead th *,
.brvm-wrap table thead tr th,
.brvm-wrap table thead tr th * { color: var(--brvm-header-color, #fff) !important; }
.brvm-wrap .brvm-topbar { color: inherit; }

/* ── [brvm_perf_annuelle] — bordure bas sur la dernière ligne ── */
.brvm-perf-tbl tbody tr:last-child,
.brvm-perf-tbl tbody tr:last-child td,
.brvm-perf-tbl tbody tr:last-child th {
    border-bottom: 1px solid var(--brvm-border-color, #dde4ee) !important;
}
/* Assurer le border-radius du wrap autour du tableau sur mobile */
.brvm-perf-tbl { overflow: hidden; }