/* Pop-up d'agrandissement des graphiques (2026-09-11, static/js/graph_popup.js).
   Chargée partout par navbar.html : tout graphique ApexCharts du site s'ouvre
   en grand au clic, s'y zoome au cliquer-glisser, jamais à la molette. */

/* Le graphique de la page annonce qu'il est cliquable. */
.gp-cliquable { cursor: zoom-in; }

.gp-modal { position: fixed; inset: 0; z-index: 4000; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.gp-modal[hidden] { display: none; }
.gp-modal-fond { position: absolute; inset: 0; background: rgba(10, 20, 30, .55); }
.gp-modal-boite {
  position: relative; z-index: 1; width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px); overflow: auto;
  background: var(--surface, #fff); color: var(--text, #1f2937);
  border: 1px solid var(--border, #e2e7ec); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .45); padding: 16px 18px 20px;
}
.gp-modal-tete { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.gp-modal-titre { font-size: 1.02rem; font-weight: 800; color: var(--text); }
.gp-modal-aide { font-size: .76rem; color: var(--text-3); flex: 1; }
.gp-modal-fermer {
  flex: 0 0 auto; font-family: inherit; font-size: 1.5rem; line-height: 1;
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.gp-modal-fermer:hover { background: var(--bg); color: var(--text); }
.gp-modal-corps { min-height: 320px; }
.gp-modal-err { font-size: .86rem; color: var(--text-2); }
/* La barre d'outils d'ApexCharts reste ACTIVE (sans son outil zoom, le glisser
   ne sélectionne rien) mais MASQUÉE : le geste et le double-clic suffisent. */
.gp-modal-corps .apexcharts-toolbar { display: none !important; }
.gp-modal-corps .apexcharts-canvas { cursor: crosshair; }
/* Pas de défilement de la page derrière la pop-up. */
body.gp-modal-ouverte { overflow: hidden; }

@media (max-width: 700px) {
  .gp-modal { padding: 10px; }
  .gp-modal-boite { width: calc(100vw - 20px); padding: 12px 12px 16px; }
  .gp-modal-aide { display: none; }
}