/* iZiFlash — cockpit web.
   Reprend les jetons de design de design/iZi Cockpit WEB.dc.html : navy #33417c, Space Grotesk pour
   l'interface, IBM Plex Mono pour les chiffres, vert/rouge porteurs du SENS MÉTIER (pas du signe).
   Les styles de la maquette sont en ligne ; ils sont regroupés ici en classes. */

:root {
  --bg: #f2f4f9;
  --navy: #33417c;
  --navy-dark: #26305e;
  --ink: #1e2740;
  --card: #ffffff;
  /* Fond appuyé, réservé pour l'instant à l'historique 12 mois : la carte porte 24 barres et une
     colonne de montants, elle gagne à se détacher des cartes blanches voisines. Assez sombre pour
     se voir, assez clair pour que le navy des barres et l'encre restent lisibles dessus. */
  --card-deep: #dde3f1;
  --line: #e3e7f2;
  --line-strong: #dde2ef;
  --muted: #7c86a8;
  --muted-soft: #9aa3c0;
  --on-navy-soft: #aeb8e0;
  --positive: #3f8a48;
  --negative: #c0463d;
  --series-n1: #c3cade;
  --sector-down: #d98b7f;
  --caution-bg: #fcf3e3;
  --caution-ink: #5c3d0a;
  --caution-line: #edd9b4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.page { min-height: 100vh; padding: 0 clamp(12px, 3vw, 32px) 48px; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; }

/* ---------- Barre haute ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: clamp(16px, 2.5vw, 26px) 0 0; flex-wrap: wrap;
}
.topbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* La marque est un SVG (cf. index.html) qui dessine lui-même son fond et son filet : ici il ne
   reste que l'encombrement et la typographie.
   Filet à 6/512, soit 0,52 px à 44 px — plus fin que l'original izibio, qui est à 8. Le navy le
   permet : en vert, un trait aussi ténu se serait perdu sur le fond presque blanc de la page.
   « FLASH » est au même poids que « iZi » (500). Le système d'origine met le mot du bas en gras ;
   ici les deux moitiés se répondent, et le mot pèse moins que la contreforme blanche qui le porte.
   44 px depuis que le mot « iZiFlash » a quitté la barre : la marque y est seule à porter
   l'identité, et « FLASH » gagne les deux pixels qui le sortent de la texture. */
.logo { width: 44px; height: 44px; display: block; flex: 0 0 auto; }
.logo-izi, .logo-nom { text-anchor: middle; font-family: 'Space Grotesk', system-ui, sans-serif; }
.logo-izi { font-size: 210px; font-weight: 500; fill: #fff; }
.logo-nom { font-size: 122px; font-weight: 500; fill: var(--navy); letter-spacing: 4px; }
/* L'heure du dernier rafraîchissement. À 11 px elle était présente sans être lisible — or c'est
   elle qui dit si le chiffre affiché date de trente secondes ou d'une heure, la première question
   qu'on se pose devant un cockpit. Elle passe à 15 px et quitte le gris le plus pâle : à cette
   taille, --muted-soft aurait paru délavé plutôt que discret. */
.refresh {
  font-size: 15px; color: var(--muted); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Sélecteur de magasin */
.store { position: relative; }
.store-btn {
  display: flex; align-items: center; gap: 8px; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 13px;
  font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; user-select: none;
  font-family: inherit;
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--positive); }
.dot.off { background: var(--muted-soft); }
.caret { color: var(--muted-soft); font-weight: 700; }
.store-menu {
  position: absolute; top: 44px; left: 0; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 16px 34px -12px rgba(30, 40, 80, 0.3);
  padding: 6px; min-width: 230px; max-height: 60vh; overflow-y: auto; z-index: 60;
}
.store-opt {
  padding: 9px 13px; border-radius: 8px; font-size: 13px; cursor: pointer;
  font-weight: 500; color: #4a5578; display: flex; align-items: center; gap: 8px;
}
.store-opt:hover { background: #f4f6fc; }
.store-opt.active { font-weight: 700; color: var(--navy); background: #eef1fa; }

/* Chips de période */
.chips {
  display: flex; flex-wrap: wrap; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 3px;
}
.chip {
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; background: transparent; color: var(--muted);
  border: 0; font-family: inherit;
}
.chip.active { background: var(--navy); color: #fff; }

/* ---------- Bandeau « donnée qualifiée » ---------- */
.banner {
  margin-top: clamp(14px, 2vw, 20px); background: var(--caution-bg);
  border: 1px solid var(--caution-line); border-radius: 12px;
  padding: 12px 16px; font-size: 13px; line-height: 1.5; color: var(--caution-ink);
}
.banner p { margin: 0; }
.banner p + p { margin-top: 8px; }

/* ---------- Ligne 1 : CA + KPI ---------- */
.row1 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(14px, 2vw, 20px); align-items: stretch;
}
.ca-card {
  grid-column: 1 / -1; background: var(--navy); border-radius: 18px;
  padding: clamp(20px, 2.6vw, 32px); color: #fff;
  box-shadow: 0 12px 30px -14px rgba(47, 60, 110, 0.5);
}
.ca-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ca-label {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--on-navy-soft); font-weight: 700;
}
.pill {
  background: rgba(255, 255, 255, 0.14); padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; color: #c5cceb; white-space: nowrap;
}
.ca-date {
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 600; color: #fff;
  font-family: inherit; cursor: pointer; color-scheme: dark;
}
.ca-body {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 38px);
  margin-top: 16px; flex-wrap: wrap;
}
.ca-main { flex: 1 1 260px; min-width: 0; }
.ca-value {
  font-size: clamp(38px, 5.5vw, 64px); font-weight: 700; letter-spacing: -1.5px;
  line-height: 1;
}
.ca-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.delta-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  border-radius: 8px; font-weight: 700; font-size: 15px;
}
.ca-ref { font-size: 13px; color: var(--on-navy-soft); }

/* Jauge de période. Elle répond d'un coup d'œil à la question que la pastille « 18 j · 16 en N-1 »
   posait en petits caractères sans y répondre : ce CA couvre combien de jours, et la référence
   combien ? Deux barres à la même échelle suffisent — l'écart se voit avant d'être lu.
   Fond légèrement éclairci plutôt qu'un filet vertical : la jauge passe SOUS le montant sur écran
   étroit, où un filet orphelin serait sale. */
.pgauge {
  flex: 0 0 auto; width: min(236px, 100%);
  display: flex; flex-direction: column; gap: 7px;
  background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 13px 15px;
}
/* L'unité en tête, parce qu'elle change avec le périmètre : des jours pour un magasin, des
   jours × magasins pour le parc. Sans ce titre, « 522 » sur une quinzaine serait illisible. */
.pg-title {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--on-navy-soft); margin-bottom: 1px;
}
.pg-row { display: grid; grid-template-columns: 30px 1fr 56px; align-items: center; gap: 9px; }
.pg-key {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--on-navy-soft);
}
.pg-track { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); }
.pg-bar { display: block; height: 100%; border-radius: 99px; background: #fff; }
.pg-bar.n1 { background: rgba(255, 255, 255, 0.42); }
.pg-val { font-size: 12px; font-weight: 600; color: #fff; text-align: right; }
.pg-note { font-size: 11px; line-height: 1.4; color: var(--on-navy-soft); margin-top: 2px; }
/* L'écart n'est mis en garde que s'il pèse : un jour sur douze mois ne change rien, deux jours sur
   seize en changent le sens. Le seuil est dans app.js — 5 % de la plus longue des deux périodes. */
.pg-note.warn { color: #f0cf94; }

.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: clamp(16px, 1.8vw, 22px); }
.kpi-label {
  font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; line-height: 1.4;
}
.kpi-value { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; margin-top: 12px; }
.kpi-delta { font-size: 13px; font-weight: 600; margin-top: 8px; }

/* ---------- Ligne 2 : secteurs + 12 mois ---------- */
.row2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(12px, 1.6vw, 18px);
}
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px, 2vw, 24px); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.card-note { font-size: 11px; color: var(--muted-soft); }

.sectors { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.sector { display: grid; grid-template-columns: minmax(90px, 120px) 1fr auto; align-items: center; gap: 14px; }
.sector-label { font-size: 13px; font-weight: 600; color: #4a5578; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sector-track { height: 12px; border-radius: 99px; background: #f0f2f9; }
.sector-bar { height: 100%; border-radius: 99px; background: var(--navy); }
.sector-bar.down { background: var(--sector-down); }
.sector-vals { display: flex; align-items: baseline; gap: 10px; }
.sector-v { font-size: 13px; font-weight: 600; min-width: 78px; text-align: right; }
.sector-p { font-size: 12px; font-weight: 600; color: var(--muted-soft); min-width: 38px; text-align: right; }
.sector-d { font-size: 12px; font-weight: 700; min-width: 52px; text-align: right; }

.legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; }

.months { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 150px; margin-top: 20px; }
/* min-width: 0 — sans lui, un item flex refuse de descendre sous la largeur de son texte : les
   douze colonnes additionnaient leurs libellés en `nowrap` et le graphique sortait de la carte. */
.month { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.month-pct { font-size: 10px; font-weight: 700; white-space: nowrap; }
.month-ca { font-size: 9px; font-weight: 600; color: var(--ink); white-space: nowrap; letter-spacing: -0.2px; }
.month-bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.bar { width: 11px; border-radius: 2px 2px 0 0; }
.bar.n1 { background: var(--series-n1); }

/* Profil horaire : une seule série, donc la couleur est portée par la feuille et non par le JS
   comme dans l'historique. Le créneau encore vide garde une amorce grise — il occupe sa place
   dans le cadre fixe 8 h-20 h sans jamais se lire comme une vente. */
#hours .bar { background: var(--navy); }
#hours .bar.vide { background: #e3e7f2; }
.month-label { font-size: 10px; color: var(--muted-soft); font-weight: 700; }

/* Sur le fond appuyé, trois teintes calibrées pour le blanc deviennent illisibles : la barre N-1,
   les libellés de mois et les textes d'en-tête. Elles sont redescendues d'un cran ici seulement. */
.card.deep { background: var(--card-deep); border-color: #cdd5e9; }
.card.deep .bar.n1 { background: #9aa5c6; }
.card.deep .month-label { color: #5f6a90; }
.card.deep .card-title { color: #5f6a90; }

.positive { color: var(--positive); }
.negative { color: var(--negative); }

/* ---------- Écrans étroits ---------- */
/* Première media query de la feuille : jusqu'ici les grilles en `auto-fit minmax(min(N, 100%))`
   se repliaient seules. L'historique 12 mois est l'exception, parce que sa largeur minimale ne
   vient pas d'une grille mais du texte : douze colonnes portant « 128 k€ » et « +12 % » en
   `nowrap` réclament ~500 px, un téléphone en offre ~300 dans la carte, et le graphique
   débordait de la différence — hors de l'encart.

   On renonce aux libellés dans l'ordre inverse de leur utilité : le CA du mois d'abord, l'écart
   ensuite. Restent les barres et l'initiale du mois, c'est-à-dire la forme de l'année — ce que
   cette carte sert à voir. Le chiffre annuel ne bouge pas : il est dans l'en-tête (#monthsTrend).

   Les hauteurs suivent : PLOT vaut 95 px côté JS, plus les libellés restants et les gaps. Le
   profil horaire partage ces classes mais garde ses libellés — sa seule valeur lisible est le
   nombre de passages — donc les retraits sont portés par #monthsCard, pas par .months. */

@media (max-width: 720px) {
  .months { gap: 5px; }
  .bar { width: 9px; }
  #monthsCard .months { height: 138px; }
  #monthsCard .month-ca { display: none; }
}

@media (max-width: 480px) {
  .months { gap: 3px; }
  .month-bars { gap: 2px; }
  .bar { width: 7px; }
  #monthsCard .months { height: 124px; }
  #monthsCard .month-pct { display: none; }

  /* Le secteur passe sur deux lignes : libellé et chiffres, puis la barre sur toute la largeur.
     Sur une seule ligne, les trois valeurs réclamaient 188 px de gouttières fixes et le libellé
     90 : la barre héritait de ce qui restait, soit 9 px sur un écran de 375 px — et rien du tout
     en dessous de 366 px, où la ligne débordait. Or c'est elle qui porte l'information de la
     carte, le poids relatif du rayon. Sur sa propre ligne elle reprend toute la largeur.

     Les `min-width` sont réduites, pas supprimées : ce sont elles qui alignent verticalement les
     trois colonnes de chiffres d'un rayon à l'autre. À zéro, chaque ligne se recalerait sur la
     largeur de son propre montant et la colonne partirait en escalier.

     Les trois cellules sont placées explicitement : la barre demandant toute la largeur, le
     placement automatique l'aurait renvoyée en ligne 2 puis les chiffres en ligne 3 — le curseur
     de grille ne revient jamais en arrière. */
  .sectors { gap: 18px; }
  .sector { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .sector-label { grid-column: 1; grid-row: 1; }
  .sector-vals { grid-column: 2; grid-row: 1; gap: 8px; }
  .sector-track { grid-column: 1 / -1; grid-row: 2; }
  .sector-v { min-width: 62px; }
  .sector-p { min-width: 30px; }
  .sector-d { min-width: 42px; }
}

/* ---------- États ---------- */
.state { padding: 64px 0; text-align: center; color: var(--muted); }
.state h2 { font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.btn {
  margin-top: 16px; background: var(--navy); color: #fff; border: 0; border-radius: 10px;
  padding: 11px 20px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.btn:hover { background: var(--navy-dark); }
[hidden] { display: none !important; }