:root {
    /* PALETTE PREMIUN "FINANCE / BLOOMBERG" */
    --tbz-bg: #0B1120;       /* Fond ardoise ultra-profond (reposant, sérieux) */
    --tbz-header: #0F172A;   /* Header légèrement détaché */
    --tbz-accent: #38BDF8;   /* Bleu clair pro pour garder l'identité de ton logo */
    --tbz-red: #EF4444;      /* Rouge d'alerte vif */
    --tbz-green: #10B981;    /* Vert financier (gains) */
    --tbz-gold: #F59E0B;     /* Or sourd pour les valeurs sûres */

    /* Typographie Haute Lisibilité */
    --text-main: #F8FAFC;    /* Blanc cassé (évite l'éblouissement du blanc pur) */
    --text-muted: #94A3B8;   /* Gris neutre pour les infos secondaires (musique, driver) */
    --row-border: #1E293B;   /* Bordures très discrètes pour ne pas polluer l'oeil */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, sans-serif; }

#live-dashboard-wrapper {
    background-color: var(--tbz-bg);
    color: var(--text-main);
    width: 100%;
    min-height: 80vh; /* Prend au moins 80% de la hauteur de l'écran */
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Garde le contenu propre à l'intérieur */
    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
    border-radius: 8px; /* Un petit arrondi sympa pour l'intégration web */
    margin-bottom: 30px;
}

/* On s'assure que le conteneur interne prend bien tout l'espace */
#live-dashboard-wrapper .broadcast-container {
    display: flex; flex-direction: column; height: 100%; flex-grow: 1;
}

/* LE MONOPOLE DES ENJEUX */
.monopoly-stake { color: var(--tbz-gold) !important; font-weight: 900; text-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }

/* LE RENIFLEUR (Couleurs chaudes/or pour le chien) */
.feed-item.ia-agent { border-left-color: #d97706; color: #fcd34d; background: rgba(217, 119, 6, 0.15); font-style: italic; font-size: 18px; font-weight: bold; }

.broadcast-container { display: flex; flex-direction: column; height: 100%; }

/* HEADER SYMÉTRIQUE */
/* HEADER TV BROADCAST */
.header {
    height: 120px; background: linear-gradient(135deg, #003635 0%, var(--tbz-header) 100%);
    display: flex; align-items: center; justify-content: space-between; padding: 0 30px;
    border-bottom: 4px solid var(--tbz-accent); box-shadow: 0 8px 25px rgba(0,0,0,0.5); z-index: 10;
}
.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne tout à gauche */
    gap: 15px;
    width: 350px;
}
.logo { height: 45px; object-fit: contain; }
.live-badge { display: flex; align-items: center; background-color: var(--tbz-red); color: white; padding: 4px 12px; border-radius: 6px; font-size: 16px; font-weight: 900; letter-spacing: 2px; line-height: 1; }
.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #fff !important; /* Force le blanc pour le contraste */
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 0 0 10px #fff;
    animation: blink 0.8s infinite;
}

.header-center { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.race-id { color: var(--tbz-accent); font-size: 38px; font-weight: 900; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); line-height: 1; margin-bottom: 5px; }
.race-details { display: flex; align-items: center; justify-content: center; gap: 12px; }
.race-name { font-size: 22px; font-weight: 700; text-transform: uppercase; color: #fff; }
.separator { color: var(--text-muted); font-size: 20px; }
.race-conditions { background: rgba(0,0,0,0.4); padding: 4px 12px; border-radius: 6px; font-size: 18px; color: var(--tbz-accent); border: 1px solid var(--tbz-accent); }

.header-right { display: flex; gap: 15px; width: 450px; justify-content: flex-end; }
.panel { background: rgba(0,0,0,0.5); border: 2px solid var(--tbz-accent); padding: 10px 15px; border-radius: 8px; text-align: center; min-width: 180px; }
.panel-label { color: var(--text-muted); font-size: 14px; font-weight: 800; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; }
.countdown { color: var(--tbz-gold); font-family: monospace; font-size: 32px; font-weight: 900; line-height: 1; }
.countdown.imminent { color: var(--tbz-red); animation: pulse 1s infinite; }
.next-race-info { color: #fff; font-size: 26px; font-weight: 900; line-height: 1.2; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.feed-item.ia-agent { border-color: #9b59b6; color: #e0b0ff; background: rgba(155, 89, 182, 0.15); font-style: italic; font-size: 18px; }

.main-layout {
    flex-grow: 1; display: flex; padding: 10px; gap: 10px;
    /* Plus de hauteur fixe en 1080px */
}
.table-section {
    flex: 3; /* Utilise les ratios flex au lieu des % stricts */
    display: flex; flex-direction: column;
    overflow-x: auto; /* Permet le scroll horizontal du tableau sur petit écran */
}
.market-feed {
    flex: 1; min-width: 250px; background: rgba(0,0,0,0.4);
    border: 2px solid var(--row-border); border-radius: 8px;
    display: flex; flex-direction: column; overflow: hidden;
}

/* TABLEAU EXTRÊME LISIBILITÉ */
.market-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.market-table thead { height: 40px; }
.market-table th { color: var(--tbz-accent); text-align: left; padding: 5px 10px; border-bottom: 3px solid var(--tbz-accent); font-size: 18px; font-weight: 800; text-transform: uppercase; }
.market-table td { border-bottom: 1px solid var(--row-border); padding: 0 10px; vertical-align: middle; white-space: nowrap; overflow: hidden; }
.market-table tbody tr { height: calc(100% / 18); /* Force la répartition sur 18 lignes max */ }

/* COLONNES & TYPOGRAPHIE SENIOR */
.center { text-align: center !important; }
.right { text-align: right !important; }

.col-num { font-size: 38px !important; font-weight: 900; color: #fff; text-align: center; width: 70px; background: rgba(39, 197, 231, 0.12); }
.col-nom { width: auto; overflow: hidden; text-overflow: ellipsis; }
.horse-name-wrapper { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 800; text-transform: uppercase; }
.sub-info { font-size: 18px; color: var(--text-muted); display: flex; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.musique { color: #aaa; font-family: monospace; }
.badge-gp { background: var(--tbz-red); color: white; padding: 2px 8px; border-radius: 4px; font-size: 16px; font-weight: bold; animation: pulse 1s infinite; }

.col-ia { width: 110px; font-size: 26px; font-weight: 900; color: #f1c40f; }
.col-valeur { width: 150px; }
.col-enjeux { width: 160px; font-family: monospace; font-size: 28px; font-weight: 800; color: #cbd5e1; }
.col-cote { width: 140px; font-family: monospace; font-size: 44px !important; font-weight: 900; color: #fff; }
.col-trend { width: 120px; }

/* JAUGE INDICE DE VALEUR */
.heat-container { width: 100%; height: 28px; background: #01151b; border-radius: 6px; overflow: hidden; position: relative; border: 1px solid var(--tbz-accent); }
.heat-bar { height: 100%; transition: width 0.6s ease; }
.heat-label { position: absolute; width: 100%; text-align: center; top: 0; font-size: 18px; font-weight: 900; line-height: 28px; color: #fff; text-shadow: 1px 1px 2px #000; }

/* SPARKLINE */
.sparkline-canvas { width: 100%; height: 35px; }

/* FLASH TRADING ANIMATIONS */
.flash-up { animation: flashGreen 4.5s ease-out; }
.flash-down { animation: flashRed 4.5s ease-out; }

@keyframes flashGreen { 0% { background-color: rgba(46, 204, 113, 0.8); color: #fff; } 10% { background-color: rgba(46, 204, 113, 0.4); } 100% { background-color: transparent; } }
@keyframes flashRed { 0% { background-color: rgba(231, 76, 60, 0.8); color: #fff; } 10% { background-color: rgba(231, 76, 60, 0.4); } 100% { background-color: transparent; } }

/* SIDEBAR DIRECT MARCHÉ */
.feed-header { background: var(--tbz-header); padding: 12px; text-align: center; border-bottom: 2px solid var(--tbz-accent); }
.feed-list { list-style: none; padding: 10px; overflow-y: hidden; flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }
.feed-item { padding: 10px; border-radius: 6px; font-size: 17px; background: rgba(255,255,255,0.05); border-left: 5px solid var(--tbz-accent); line-height: 1.3; }
.feed-time { font-weight: bold; color: var(--tbz-accent); margin-right: 5px; font-size: 15px; }
.feed-item.gp { border-color: var(--tbz-gold); color: var(--tbz-gold); background: rgba(255,215,0,0.1); font-weight: bold; }

/* TICKER */
.ticker-wrapper { height: 60px; background-color: var(--tbz-accent); display: flex; align-items: center; color: #000; font-size: 28px; font-weight: 900; z-index: 10; }
.ticker-title { background: #fff; height: 100%; padding: 0 25px; display: flex; align-items: center; white-space: nowrap; }
.ticker-content { flex-grow: 1; padding: 0 20px; text-transform: uppercase; }

/* OVERLAY ALERTE ADMIN */
#flash-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(231, 76, 60, 0.98); color: white; padding: 60px;
    border: 15px solid #fff; font-size: 90px; font-weight: 900; text-align: center;
    z-index: 9999; display: none; width: 85%; box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}
#flash-overlay.active { display: block; animation: alertPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes alertPop { from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* DESIGN DU FAVORI PMU */
.cote-favorite {
    background-color: var(--tbz-gold);
    color: #000 !important;
    padding: 2px 10px;
    border-radius: 6px;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* COULEURS DYNAMIQUES IA (Typographie) */
.col-note { width: 130px; font-size: 26px; font-weight: 900; }
.txt-green { color: var(--tbz-green) !important; text-shadow: 0 0 8px rgba(16, 185, 129, 0.3); }
.txt-orange { color: #f39c12 !important; }
.txt-red { color: var(--tbz-red) !important; }
.txt-gray { color: var(--text-muted) !important; font-weight: 700; }

/* CORRECTION DU RENIFLEUR (Plus doux) */
.feed-item.ia-agent {
    border-left-color: #d97706;
    color: #fde68a; /* Jaune pastel très doux */
    background: rgba(217, 119, 6, 0.15);
    font-style: italic;
    font-size: 18px;
    font-weight: normal; /* On supprime le bold agressif */
    letter-spacing: 0.5px;
}

/* MODE DENSE (S'active automatiquement au-delà de 13 partants) */
.market-table.dense-mode td { padding: 0 5px; }
.market-table.dense-mode .col-num { font-size: 28px !important; width: 60px; }
.market-table.dense-mode .horse-name-wrapper { font-size: 20px; }
.market-table.dense-mode .sub-info { font-size: 14px; }
.market-table.dense-mode .col-note, .market-table.dense-mode .col-ia { font-size: 22px; width: 100px; }
.market-table.dense-mode .col-enjeux { font-size: 22px; width: 130px; }
.market-table.dense-mode .col-cote { font-size: 34px !important; width: 120px; }
.market-table.dense-mode .sparkline-canvas { height: 25px; }
.market-table.dense-mode .heat-container { height: 22px; }
.market-table.dense-mode .heat-label { font-size: 15px; line-height: 22px; }
.market-table.dense-mode .badge-gp { font-size: 13px; padding: 1px 5px; }

/* MESSAGE DE PRÉVENTION LÉGALE */
.feed-item.prevention {
    border-left: 5px solid #f1c40f;
    background: rgba(241, 196, 15, 0.1);
    color: #f1c40f;
    font-size: 14px; /* Un peu plus petit pour ne pas prendre trop de place */
    line-height: 1.4;
    font-weight: 600;
    text-transform: none; /* On garde les minuscules pour la lisibilité du texte long */
}
.feed-item.prevention b {
    color: #fff;
    text-decoration: underline;
}

/* =========================================
   RESPONSIVE DESIGN (Web Adaptation)
   ========================================= */

@media (max-width: 1200px) {
    /* On passe le tableau en mode dense automatiquement sur PC portables/Tablettes */
    .market-table th, .market-table td { font-size: 14px !important; padding: 5px; }
    .col-num { font-size: 20px !important; width: 50px; }
    .horse-name-wrapper { font-size: 16px; }
    .col-cote, .col-enjeux, .col-ia { font-size: 20px !important; }
    .header { padding: 0 15px; height: auto; min-height: 90px; }
    .race-id { font-size: 24px; }
    .countdown { font-size: 22px; }
}

@media (max-width: 992px) {
    /* Empilement du tableau et du chat de l'IA sur tablette portrait / mobile */
    .main-layout { flex-direction: column; }
    .market-feed { min-height: 300px; max-height: 400px; margin-top: 15px; }

    /* Réduction du header */
    .header { flex-direction: column; text-align: center; gap: 10px; padding: 15px; }
    .header-left, .header-right { width: 100%; justify-content: center; align-items: center; }
    .header-right { flex-wrap: wrap; }
}