/* ── Stats desktop (≥1024px) — grande card globale + grille 3x2 ───────────
   #screen-stats prend en charge sa propre disposition plein format (comme
   #screen-today/#screen-config/#screen-atelier/#screen-history, voir
   layout-desktop.css) plutôt que le simple fond glass générique des autres
   écrans : une seule grande card (.stats-global-panel, liseret dégradé animé
   comme le reste du redesign) contient le sélecteur réseau centré en haut,
   puis les 6 cadrans (mêmes données que la liste mobile plate #stats-body,
   voir stats.js _renderStatsBody) en grille 3x2 — cadrans "plats" (pas leur
   propre liseret, pour ne pas empiler deux bordures dégradées l'une dans
   l'autre). Masquées par défaut (mobile) : la liste plate reste la seule vue
   sur mobile. */
/* On masque LE PANNEAU ENTIER, et non plus une liste de ses enfants.
   L'ancienne regle nommait trois selecteurs (.stats-grid, #stats-network-select-desktop,
   .stats-alex-summary) ; les deux rangees .stats-duo, ajoutees a la refonte du 24/08/2026,
   n'y ont jamais ete ajoutees. Sur mobile, le resume de la situation et le score de sante
   s'affichaient donc UNE SECONDE FOIS, hors card, entre les tendances et les angles morts.
   Une liste qu'il faut penser a completer a chaque ajout finit toujours par etre oubliee :
   masquer le conteneur couvre aussi ce qu'on y mettra demain. */
.stats-global-panel { display: none; }
/* Conserve de l'ancienne regle : #stats-alex-summary n'existe plus dans index.html (le
   resume vit dans [data-resume-card]), mais la classe reste referencee par stats.js en
   repli. On la masque encore, au cas ou un rendu la ferait reapparaitre hors panneau. */
.stats-alex-summary { display: none; }

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

  #screen-stats.screen.active {
    overflow-y: auto;
    padding: 0;
    margin: 16px 20px 20px;
    display: flex;
  }

  .stats-global-panel {
    position: relative;
    flex: 1;
    min-width: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow: hidden;
    /* filter: drop-shadow, pas box-shadow — clippé par overflow:hidden sinon (cf.
       --shadow-card-filter, theme.css). */
    filter: var(--shadow-card-filter);
  }

  /* Même liseret dégradé animé que .dash-panel::before (dashboard.css) —
     réutilise l'angle/keyframe déjà déclarés là-bas. */
  .stats-global-panel::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;
  }

  /* Intérieur défilant de la grande card. Avant le sprint D, le contenu tenait toujours dans
     la hauteur disponible (grille 3x2 en flex:1) et rien ne débordait ; depuis que le bilan
     d'Alex s'y ajoute, il faut pouvoir descendre — sans quoi les chiffres devenaient
     inatteignables et le contenu passait par-dessus la card (overflow:hidden du parent). */
  .stats-scroll {
    /* padding-top : l'icone de reseau active porte un outline offset de 3px, peint hors de
       l'element. Sans marge en haut, le conteneur defilant le rognait. */
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;   /* respire à côté de la barre de défilement */
  }

  #stats-network-select-desktop { display: flex; justify-content: center; gap: 20px; flex-shrink: 0; }

  /* Bannière de synthèse "Alex" au-dessus de la grille 3x2 — condense les 6 cadrans en un seul
     constat + LA priorité à traiter, voir _renderStatsAlexSummaryCard (stats.js) et
     SYS_STATS_SUMMARY (prompts.py). Centrée horizontalement, largeur limitée pour rester lisible
     même sur un panneau très large. */
  .stats-alex-summary {
    display: flex; align-items: center; gap: 16px;
    align-self: center;
    max-width: 720px; width: 100%;
    flex-shrink: 0;
    background: rgba(var(--accent-rgb),0.07);
    border: 1px solid rgba(var(--accent-rgb),0.25);
    border-radius: 12px;
    padding: 14px 20px;
  }
  .stats-alex-summary-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .stats-alex-summary-text { font-size: 12.5px; line-height: 1.55; color: rgba(var(--text-rgb),0.85); white-space: pre-wrap; }
  /* Tous les réseaux listés ici sont déjà connectés (_statsConnectedNetworks ne liste que
     ceux-là) — en couleur, pas grisés comme sur mobile ; seul le sélectionné se distingue via
     le liseret rose offset de 3px ci-dessous. */
  #stats-network-select-desktop .stats-network-icon { filter: none; opacity: 1; }
  #stats-network-select-desktop .stats-network-icon.active {
    outline: 2px solid var(--accent-pink);
    outline-offset: 3px;
    border-radius: 10px;
  }

  /* Deux colonnes égales pour les rangées de tête. Les cards s'alignent sur la plus haute des
     deux plutôt que de flotter à des hauteurs différentes. */
  .stats-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: stretch;
    flex-shrink: 0;   /* meme raison que .stats-grid ci-dessous */
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Rangées auto depuis que le bilan du mois est sorti de la grille et que celle-ci vit dans
       un <details> : figer 2 rangées en 1fr étirait les cadrans sur toute la hauteur restante,
       et laissait un vide quand le repli était fermé. */
    grid-auto-rows: auto;
    gap: 16px;
    /* flex-shrink:0 — la grille est un enfant flex de .stats-scroll. Avec le min-height:0 qui
       etait ici, elle pouvait etre comprimee sous la hauteur de son contenu : les rangees se
       tassaient et le contenu d'un panneau debordait par-dessus celui du dessous (constate en
       prod sur « Ce qui fonctionne le mieux » a cheval sur « Tendances »). */
    flex-shrink: 0;
  }

  /* Les 4 cards de chiffres restent en flux : l'utilisateur fait défiler, il n'a pas à
     déplier quoi que ce soit pour les voir (le repli précédent les rendait invisibles). */
  /* Pendant le chargement, .card-loading est seul dans la grille (voir _renderStatsBody,
     stats.js) — il doit occuper les 6 cases plutôt que se retrouver coincé dans la 1re. */
  .stats-grid .card-loading { grid-column: 1 / -1; grid-row: 1 / -1; }

  .stats-panel {
    background: rgba(var(--text-rgb),0.03);
    border: 1px solid rgba(var(--text-rgb),0.1);
    border-radius: 12px;
    padding: 16px 18px;
    min-width: 0;
    /* visible et non auto : une infobulle d'aide depasse forcement de son panneau, un
       overflow interne la decouperait. Le defilement se fait desormais au niveau de la page,
       les panneaux s'adaptent a leur contenu. */
    overflow: visible;
  }

  .stats-panel-title {
    font-family: var(--font-display); font-size: 13px; font-weight: 700;
    color: var(--text); margin-bottom: 14px; letter-spacing: .02em;
  }

  /* Card identité (1er cadran) : logo+nom, puis onglets Abonnés/Engagement/Portée, puis la
     courbe de l'onglet actif remplit le reste de la card (voir _renderStatsIdentityCard,
     stats.js) — flex column pour que .stats-identity-chart absorbe tout l'espace vide restant. */
  .stats-identity-panel { display: flex; flex-direction: column; }
  .stats-identity-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-shrink: 0; }
  .stats-identity-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-shrink: 0; }
  .stats-identity-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: transparent; border: 1px solid rgba(var(--text-rgb),0.1); border-radius: 10px;
    padding: 8px 4px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
  }
  .stats-identity-tab:hover { background: rgba(var(--accent-rgb),0.06); }
  .stats-identity-tab.active { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.4); }
  .stats-identity-tab-val { font-size: 15px; font-weight: 700; color: var(--accent); }
  .stats-identity-tab-lbl { font-size: 10px; color: rgba(var(--text-rgb),0.5); text-transform: uppercase; letter-spacing: .04em; }
  .stats-identity-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  .stats-identity-chart .stats-chart-svg { flex: 1; min-height: 0; height: auto; }

  /* Card récap d'Alex (3e cadran, 1re ligne) : avatar centré en haut, puis le texte du récap
     remplit le reste de la card (voir _renderStatsRecapCard, stats.js). */
  .stats-recap-panel { display: flex; flex-direction: column; }
  .stats-recap-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; flex-shrink: 0; text-align: center; }
  .stats-recap-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
  .stats-recap-text { flex: 1; min-height: 0; overflow-y: auto; font-size: 12px; line-height: 1.6; color: rgba(var(--text-rgb),0.8); white-space: pre-wrap; }
}