```css
/* =========================================================
   ELITE TRADING DASHBOARD – CSS COMPLET OPTIMISÉ
   VERSION CORRIGÉE AVEC MINI-GRAPHIQUES PLUS GRANDS
   H1 + H4 + D
   ========================================================= */


/* =========================================================
   RESET / BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 12px;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f8fafc;
  color: #0f172a;
  overflow-x: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.title {
  font-size: 18px;
}

.subtitle {
  font-size: 14px;
  color: #475569;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* =========================================================
   MARCHÉS OUVERTS
   ========================================================= */

.market.open {
  background: rgba(34,197,94,0.1);
  padding: 2px 6px;
  border-radius: 6px;
}

.last-update {
  font-size: 12px;
  opacity: 0.7;
  text-align: center;
  margin-top: 6px;
}


/* =========================================================
   INFO PANEL
   ========================================================= */

.panel-info {
  margin-top: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #e0f2fe;
  color: #1e3a8a;
  font-weight: 600;
  font-size: 13px;
}


/* =========================================================
   DASHBOARD GLOBAL
   ========================================================= */

.dashboard {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  width: 100%;
  align-items: stretch;
}


/* =========================================================
   COLONNE GAUCHE : GRAPHIQUES
   ========================================================= */

.charts-column {

  /* largeur fixe */
  flex: 0 0 430px;

  display: flex;
  flex-direction: column;

  gap: 12px;

  /* hauteur écran */
  height: 100vh;

  box-sizing: border-box;
}


/* =========================================================
   PANELS GRAPHIQUES
   ========================================================= */

.charts-column .panel {

  background: #ffffff;

  border-radius: 12px;

  padding: 8px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

  overflow: hidden;

  display: flex;
  flex-direction: column;

  flex: none;
}


/* =========================================================
   HAUTEUR DES 3 MINI-GRAPHIQUES
   H1 / H4 / D
   ========================================================= */

/*
   On a maintenant 3 panels seulement :
   - H1 principal
   - H4
   - D

   Donc on répartit proprement l’espace vertical.
*/

.charts-column .panel:nth-child(-n+3) {

  height: calc((100vh - 2 * 12px - 24px) / 3);

}


/* =========================================================
   TITRES DES PANELS
   ========================================================= */

.charts-column .panel h3 {

  font-size: 12px;

  color: #64748b;

  margin: 0 0 6px 0;

  flex: 0 0 auto;

  font-weight: 600;

  letter-spacing: 0.3px;
}


/* =========================================================
   CANVAS GRAPHIQUES
   ========================================================= */

.charts-column canvas {

  width: 100% !important;

  display: block;

  flex: 1 1 auto;
}


/* =========================================================
   HAUTEUR CANVAS DES MINI-GRAPHIQUES
   ========================================================= */

.charts-column .panel:nth-child(-n+3) canvas {

  height: calc((100vh - 2 * 12px - 24px) / 3 - 30px) !important;

}


/* =========================================================
   COLONNE CENTRALE : TABLEAU ELITE
   ========================================================= */

.table-column {

  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 12px;

  min-width: 0;
}


/* =========================================================
   TITRES
   ========================================================= */

.signal-title {

  font-size: 12px;

  font-weight: 600;

  opacity: 0.8;

  margin-bottom: 4px;

  text-transform: uppercase;

  letter-spacing: 1px;
}


/* =========================================================
   TABLEAU ELITE
   ========================================================= */

.signal-live,
.elite-table,
#bougie-count {

  width: 100%;

  overflow-x: auto;
}

.elite-table {

  background: #ffffff;

  border-radius: 12px;

  padding: 14px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.elite-table h3 {

  font-size: 14px;

  margin-bottom: 10px;

  font-weight: 700;

  text-align: left;
}

.elite-table table {

  width: 100%;

  border-collapse: collapse;

  font-size: 13px;
}

.elite-table th {

  background: #f1f5f9;

  padding: 8px;

  text-align: left;
}

.elite-table td {

  padding: 8px;

  border-bottom: 1px solid #e5e7eb;

  text-align: left;
}


/* =========================================================
   SÉPARATEUR DE BLOCS
   ========================================================= */

.block-separator td {

  background-color: #f1f5f9;

  font-weight: 700;

  text-align: left;
  
  padding-left: 12px;

  font-size: 13px;

  border-bottom: 2px solid #cbd5e1;

  border-top: 1px solid #cbd5e1;
}


/* =========================================================
   STATUS DOTS
   ========================================================= */

.status-dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  display: inline-block;
}

.dot-buy {
  background: #16a34a;
}

.dot-sell {
  background: #dc2626;
}

.dot-neutral {
  background: #f59e0b;
}

.dot-orange {
  background-color: #f59e0b;
}

.dot-provisional {
  background-color: #999999;
}


/* =========================================================
   SIGNAL LIVE
   ========================================================= */

.signal-live {

  margin-top: 10px;

  padding: 16px;

  border-radius: 14px;

  text-align: center;

  font-weight: 700;
}

.signal-main {

  font-size: 22px;
}

.signal-sub {

  font-size: 13px;

  display: flex;

  justify-content: center;

  gap: 12px;
}


/* =========================================================
   COULEURS SIGNALS
   ========================================================= */

.signal-live.buy {
  background:#052e16;
  color:#22c55e;
}

.signal-live.sell {
  background:#3f0d0d;
  color:#ef4444;
}

.signal-live.neutral {
  background:#1e293b;
  color:#94a3b8;
}

.signal-live.trend-up {
  background-color: #d4fbe2;
  color: #166534;
}

.signal-live.trend-down {
  background-color: #ffe0e0;
  color: #991b1b;
}

.signal-live.trend-neutral {
  background-color: #fff4db;
  color: #92400e;
}


/* =========================================================
   COLONNE DROITE : INFOS
   ========================================================= */

.info-column {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 12px;

  min-width: 0;
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .dashboard {

    flex-direction: column;

    gap: 16px;
  }

  .charts-column {

    flex: none;

    width: 100%;

    height: auto;
  }

  .table-column {

    order: 2;

    width: 100%;

    min-width: 0;

    margin-top: 12px;
  }

  .info-column {

    order: 3;

    width: 100%;
  }

  .charts-column .panel {

    height: auto;
  }

  .charts-column .panel canvas {

    height: 320px !important;
  }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .dashboard {

    flex-direction: column;
  }

  .charts-column .panel {

    height: auto;
  }

  .charts-column .panel canvas {

    height: 260px !important;
  }
}
```