/* ── Historique desktop (≥1024px) — grande card du mois en cours + graphique ──
   #screen-history prend en charge sa propre disposition plein format (comme
   #screen-today/#screen-config/#screen-atelier, voir layout-desktop.css)
   plutôt que le simple fond glass générique des autres écrans : une grande
   card en haut pour le mois en cours (scroll interne), une card plus petite
   en bas avec le graphique du rythme de publication (mois en cours vs mois
   passé, voir history.js _renderHistoryPubChart). La grande card réutilise
   les mêmes cards que la liste mobile plate (#history-list, voir history.js
   _histCardHtml) — seul le regroupement par mois change, pas le contenu des
   cards. Masquées par défaut (mobile) : la liste plate reste la seule vue
   sur mobile. Même liseret dégradé animé que le reste du redesign. */
.history-month-col { display: none; }

@media (min-width: 1024px) {
  #history-mobile-section { display: none; }

  #screen-history.screen.active {
    overflow: hidden;
    padding: 0;
    margin: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
  }

  /* Colonne unique (liste + graphique) resserrée à une largeur de lecture confortable
     plutôt que de s'étirer sur toute la largeur de la fenêtre desktop — sur un grand
     écran, une liste de cards texte/vignette pleine largeur devenait trop aérée et le
     graphique trop plat pour se lire correctement. */
  .history-month-col, .history-chart-panel {
    width: 100%;
    max-width: 760px;
  }

  .history-month-col {
    position: relative;
    /* La card du mois en cours prend plus de place que celle du graphique
       (flex-grow 2.2 vs 1) — "grande card" pour la liste, plus compacte pour
       le graphique juste en dessous. */
    flex: 2.2;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 16px;
  }
  .history-chart-panel { flex: 1; }

  /* Même liseret dégradé animé que .dash-panel::before (dashboard.css) —
     réutilise l'angle/keyframe déjà déclarés là-bas. */
  .history-month-col::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--dash-border-angle),
      var(--card-border-base) 0%, var(--card-border-base) 42%,
      var(--card-border-shine) 50%, var(--card-border-base) 58%, var(--card-border-base) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: dash-border-spin 12s linear infinite;
    pointer-events: none;
  }

  .history-month-title {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    text-transform: capitalize;
  }

  .history-month-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .history-chart-panel #history-pub-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .history-chart-panel .stats-chart-svg { flex: 1; min-height: 0; height: auto; }
  .history-chart-legend { display: flex; gap: 16px; margin-top: 8px; flex-shrink: 0; }
  .history-chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(var(--text-rgb),0.6); }
  .history-chart-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
  .history-chart-dot-dashed {
    background: none; width: 12px; height: 0; border-top: 2px dashed rgba(var(--text-rgb),0.4);
    border-radius: 0;
  }
}