/* ═══ CARTES DE STATISTIQUES ═══ */
.stat-card { position: relative; background: var(--plate); border-top: 3px solid var(--accent, var(--cobalt)); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); flex:1;}
.stat-card__label { font: 800 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.stat-card__value { font: 800 34px var(--font-data); color: var(--ink); margin-top: var(--s-2); }

/* ═══ TABLEAUX DE STATISTIQUES ═══ */
.stats-table { width: 100%; border-collapse: collapse; font: 500 14px var(--font-data); }
.stats-table th { text-align: left; padding: var(--s-2) 6px; color: var(--ink-faint); font: 800 11px var(--font-ui); text-transform: uppercase; border-bottom: 2px solid var(--seam); }
.stats-table td { padding: var(--s-2) 6px; border-bottom: 1px solid var(--seam); white-space: nowrap; }
.stats-table__name {font-size: 15px !important; font-weight: 600; color: var(--ink); cursor:pointer;}
.stats-table__name:hover {color: var(--cobalt); text-decoration:underline;}

/* ═══ BARRE DE TAUX ═══ */
.rate-bar { width: 70px; background: var(--plate-raised); height: 6px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: var(--s-2); }
.rate-bar__fill { display: block; height: 100%; border-radius: 3px; }
.rate-bar__value { font-weight: 800; }
.rate-bar__value--up { color: var(--verdigris); }
.rate-bar__value--down { color: var(--coral); }

/* ═══ EN-TÊTE DE RAPPORT ═══ */
.report-header { border-bottom: 3px solid var(--seam); padding-bottom: var(--s-3); margin-bottom: var(--s-5); }
.report-header__top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--s-2); }
.report-title { font: 800 48px var(--font-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); margin: 0; line-height: 0.9; }
.report-title em { font-style: normal; color: var(--cobalt); }
.report-title__sep { color: var(--ink); margin: 0 var(--s-2); font-weight: 400; }
.report-title__context { color: var(--rust); }
.report-period { font: 800 20px var(--font-data); color: var(--ink-dim); text-transform: uppercase; }
.report-subtitle { font-size: 16px; color: var(--ink-dim); margin: 0; }
.report-section-title { color: var(--ink); font: 800 18px var(--font-ui); text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--s-3); }

/* ═══ BOUTONS ═══ */
.btn { display: inline-block; padding: var(--s-1) var(--s-3); border-radius: var(--radius); background: var(--rust); color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; border: none; cursor: pointer; text-transform:uppercase; font-family: var(--font-ui);}
.btn--ghost { background: transparent; border: 1px solid var(--seam); color: var(--ink-dim); }
.btn--active { background: var(--rust); color: #fff; border-color: var(--rust); }
.btn--cobalt { background: var(--cobalt); color: var(--void); }

/* ═══ AJOUTS SPÉCIFIQUES NAVIGATION (SPA) ═══ */
.view { display: none; }
.view.active { display: block; }
.content { flex: 1; padding: var(--s-5) var(--s-6); overflow-y: auto; scroll-behavior: smooth; }
.table-wrapper { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font: 500 14px var(--font-ui); }
.data-table th { text-align: left; padding: var(--s-2) 6px; color: var(--ink-faint); font: 800 11px var(--font-ui); text-transform: uppercase; border-bottom: 2px solid var(--seam); }
.data-table td { padding: var(--s-2) 6px; border-bottom: 1px solid var(--seam); }
.badge--active { background: var(--verdigris); color: var(--hull); padding: 2px 6px; border-radius: 4px; font-weight: bold; font-size: 11px;}

/* ═══ GRAPHIQUE TRENDS ═══ */
.chart-wrapper {
  background: var(--plate);
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--seam);
  height: 600px;
  width: 100%;
  position: relative;
}

/* ==========================================
   ADAPTATION MOBILE (RESPONSIVE DESIGN)
   ========================================== */
@media (max-width: 768px) {
  /* 1. La structure principale passe de gauche/droite à haut/bas */
  .shell { flex-direction: column; }

  /* 2. La barre latérale devient un menu collé en haut */
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--seam);
    padding: var(--s-3);
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: none;
    z-index: 100;
  }

  .sidebar__brand { font-size: 20px; margin-bottom: 0; width: 100%; text-align: center; margin-bottom: 10px;}
  .sidebar__section { display: none; }

  .sidebar__nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: 100%;
  }

  .sidebar__nav a { padding: 6px 10px; font-size: 12px; margin-bottom: 0; text-align: center;}

  /* 3. Ajustement des marges et des textes pour petits écrans */
  .content { padding: var(--s-3); width: 100vw; box-sizing: border-box; }
  .page-title, .report-title { font-size: 28px; line-height: 1; margin-bottom: var(--s-3);}
  .stat-card__value { font-size: 28px; }

  /* 4. Les grilles à colonnes multiples passent sur 1 seule colonne */
  div[style*="display:grid"] { grid-template-columns: 1fr !important; gap: var(--s-4) !important;}
  div[style*="column-count"] { column-count: 1 !important; }

  /* 5. Les cartes de statistiques s'empilent au lieu d'être côte à côte */
  div[style*="display:flex; gap: var(--s-4); margin-bottom: var(--s-6);"] {
    flex-direction: column;
    gap: var(--s-3) !important;
    margin-bottom: var(--s-4) !important;
  }

  /* 6. Optimisation stricte des tableaux pour Mobile */
  .table-wrapper {
    width: 100vw; /* Prend toute la largeur de l'écran */
    margin-left: calc(-1 * var(--s-3)); /* Annule la marge gauche pour coller au bord */
    padding-left: var(--s-3);
    padding-right: var(--s-3);
    box-sizing: border-box;
    overflow-x: auto; /* Active le défilement horizontal */
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur iPhone */
  }

  /* On empêche le tableau de s'écraser : il fera au moins 700px, forçant le scroll */
  .stats-table, .data-table {
    min-width: 700px !important;
  }

  .stats-table th, .data-table th,
  .stats-table td, .data-table td {
    font-size: 12px !important;
    padding: 10px 8px !important;
    white-space: nowrap; /* Empêche les retours à la ligne laids (1 mot par ligne) */
  }

  /* Sauf pour les colonnes de Détachements (qui sont très longues), on les autorise à revenir à la ligne */
  td[style*="white-space:normal"] {
    min-width: 250px;
  }

  .stats-table__name { font-size: 13px !important; }

  /* 7. Le graphique s'adapte à l'écran mobile */
  .chart-wrapper {
    height: 400px;
    padding: var(--s-2);
  }
}