/* ═════════════════════════════════════════════════════════════════════
   Numeri gestion — la feuille de style.

   Les jetons reprennent EXACTEMENT ceux de `site/assets/css/numeri.css`
   (fond clair, accent #0B34E6). Ils sont recopiés et non importés : la
   gestion vit sur un autre nom d'hôte, un @import inter-domaine serait une
   requête tierce — et Numeri n'en fait aucune, c'est ce qui lui évite un
   bandeau cookies.

   ⚠️ Si la charte du site bouge, ce bloc de jetons bouge avec. C'est le seul
   endroit à reprendre.

   Écrit le 30/08/2026.
   ═════════════════════════════════════════════════════════════════════ */

:root {
  --n-bg:            #FFFFFF;
  --n-bg-soft:       #F6F7F9;
  --n-surface-1:     #FFFFFF;
  --n-surface-2:     #F5F6F8;
  --n-surface-3:     #EDEFF2;
  --n-text:          #0F1216;
  --n-text-muted:    #4A5158;
  --n-text-faint:    #5D656C;
  --n-accent:        #0B34E6;
  --n-accent-hi:     #0026B8;
  --n-accent-soft:   rgba(11, 52, 230, 0.08);
  --n-ok:            #0E7A46;
  --n-warn:          #8A5A00;
  --n-warn-soft:     rgba(138, 90, 0, 0.10);
  --n-danger:        #B3261E;
  --n-danger-soft:   rgba(179, 38, 30, 0.10);
  --n-line:          rgba(15, 18, 22, 0.12);
  --n-line-grid:     rgba(15, 18, 22, 0.055);
  --n-r-md:    4px;
  --n-r-lg:    6px;
  --n-r-xl:   10px;
  --n-shadow-2: 0 1px 2px rgba(15,18,22,.06), 0 2px 6px -2px rgba(15,18,22,.06);

  /* ── LES SÉRIES ──────────────────────────────────────────────────────
     Ordre FIXE, jamais recyclé : la couleur suit l'entité, pas son rang.
     Un filtre qui retire une série ne repeint pas les autres.
     Validé (band de clarté, plancher de chroma, séparation daltonienne,
     plancher vision normale, contraste) sur fond clair. */
  --s1: #0B34E6;   /* Encaissé      — l'accent de la marque */
  --s2: #B45309;   /* Coût en jetons */
  --s3: #7C3AED;   /* Commissions Mollie */
  --s4: #059669;   /* Bénéfice */

  --hausse: #0E7A46;
  --baisse: #B3261E;

  --police: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --chiffres: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--n-bg-soft); color: var(--n-text);
  font: 14px/1.5 var(--police);
}

/* ── L'EN-TÊTE ──────────────────────────────────────────────────────── */
.g-tete {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 20px; background: var(--n-surface-1);
  border-bottom: 1px solid var(--n-line); position: sticky; top: 0; z-index: 20;
}
.g-tete__marque { font-weight: 700; letter-spacing: -0.01em; font-size: 16px; }
.g-tete__marque span { color: var(--n-text-faint); font-weight: 500; }
.g-tete__qui { margin-left: auto; display: flex; align-items: center; gap: 14px;
  color: var(--n-text-muted); font-size: 13px; }
.g-onglets { display: flex; gap: 4px; flex-wrap: wrap; }
.g-onglet {
  border: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; color: var(--n-text-muted); padding: 6px 12px; border-radius: var(--n-r-lg);
}
.g-onglet:hover { background: var(--n-surface-2); color: var(--n-text); }
.g-onglet.is-actif { background: var(--n-accent-soft); color: var(--n-accent-hi); font-weight: 600; }
.g-onglet:focus-visible, .g-filtre:focus-visible, .g-bouton:focus-visible,
.g-lien:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--n-accent); outline-offset: 2px;
}
.g-lien { color: var(--n-accent); text-decoration: none; }
.g-lien:hover { text-decoration: underline; }

.g-page { max-width: 1180px; margin: 0 auto; padding: 22px 20px 80px; }
.g-vue { display: none; }
.g-vue.is-actif { display: block; }

/* ── LES ALERTES — avant les chiffres, jamais après ──────────────────── */
.g-alertes:not(:empty) { display: grid; gap: 8px; margin-bottom: 20px; }
.g-alerte {
  padding: 11px 14px; border-radius: var(--n-r-lg); font-size: 13px;
  border: 1px solid var(--n-line); background: var(--n-surface-1); margin: 0;
}
.g-alerte strong { display: block; margin-bottom: 2px; }
.g-alerte--critique { border-color: rgba(179,38,30,.35); background: var(--n-danger-soft); color: #7A1A14; }
.g-alerte--attention { border-color: rgba(138,90,0,.3); background: var(--n-warn-soft); color: #5E3E00; }

/* ── LES TUILES ─────────────────────────────────────────────────────── */
.g-tuiles { display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.g-tuile {
  background: var(--n-surface-1); border: 1px solid var(--n-line);
  border-radius: var(--n-r-xl); padding: 14px 16px; box-shadow: var(--n-shadow-2);
}
.g-tuile h2 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--n-text-faint); }
.g-tuile__chiffre { margin: 0; font: 600 26px/1.15 var(--chiffres); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; }
.g-tuile--phare .g-tuile__chiffre { font-size: 34px; color: var(--n-accent-hi); }
.g-tuile__note { margin: 5px 0 0; font-size: 12px; color: var(--n-text-faint); }

/* ── LES CADRES ─────────────────────────────────────────────────────── */
.g-cadre {
  background: var(--n-surface-1); border: 1px solid var(--n-line);
  border-radius: var(--n-r-xl); padding: 16px; margin-bottom: 18px; box-shadow: var(--n-shadow-2);
}
.g-cadre__tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.g-cadre__tete h2 { margin: 0; font-size: 15px; font-weight: 600; }
.g-cadre__note { margin: 10px 0 0; font-size: 12px; color: var(--n-text-faint); max-width: 76ch; }

/* Les filtres, en une seule ligne AU-DESSUS du graphique. */
.g-filtres { margin-left: auto; display: flex; gap: 4px; }
.g-filtre {
  border: 1px solid var(--n-line); background: var(--n-surface-1); cursor: pointer;
  font: inherit; font-size: 12px; color: var(--n-text-muted);
  padding: 4px 10px; border-radius: var(--n-r-md);
}
.g-filtre.is-actif { background: var(--n-accent-soft); border-color: rgba(11,52,230,.3);
  color: var(--n-accent-hi); font-weight: 600; }

/* ── LES GRAPHIQUES ─────────────────────────────────────────────────── */
.g-graphe { width: 100%; min-height: 240px; }
.g-graphe svg { display: block; width: 100%; height: auto; }
.g-vide { padding: 34px 8px; text-align: center; color: var(--n-text-faint); font-size: 13px; }

/* La légende est TOUJOURS là dès deux séries : l'identité ne tient jamais
   à la seule couleur. */
.g-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px;
  font-size: 12px; color: var(--n-text-muted); }
.g-legende__item { display: inline-flex; align-items: center; gap: 6px; }
.g-legende__puce { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ── L'INFOBULLE ────────────────────────────────────────────────────── */
.g-infobulle {
  position: fixed; z-index: 60; pointer-events: none;
  background: #0F1216; color: #fff; padding: 8px 10px; border-radius: var(--n-r-lg);
  font-size: 12px; line-height: 1.45; box-shadow: 0 6px 24px -8px rgba(0,0,0,.5);
  max-width: 280px;
}
.g-infobulle b { font-variant-numeric: tabular-nums; }
.g-infobulle .g-ib-ligne { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.g-infobulle .g-legende__puce { width: 8px; height: 8px; }

/* ── LES TABLEAUX ───────────────────────────────────────────────────── */
.g-tableau-enveloppe { overflow-x: auto; }
.g-tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.g-tableau th, .g-tableau td { padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--n-line-grid); white-space: nowrap; }
.g-tableau th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--n-text-faint); font-weight: 600; }
.g-tableau td.n, .g-tableau th.n { text-align: right; font-family: var(--chiffres);
  font-variant-numeric: tabular-nums; }
.g-tableau tbody tr:hover { background: var(--n-surface-2); }
.g-pastille { display: inline-flex; align-items: center; gap: 5px; }
.g-pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.g-statut--actif { color: var(--n-ok); }
.g-statut--en_retard, .g-statut--en_attente { color: var(--n-warn); }
.g-statut--suspendu, .g-statut--resilie, .g-statut--annule { color: var(--n-danger); }
.g-neg { color: var(--n-danger); }

/* ── LES PARTS ──────────────────────────────────────────────────────── */
.g-parts__grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.g-part {
  border: 1px solid var(--n-line); border-radius: var(--n-r-lg);
  padding: 12px 14px; background: var(--n-surface-2);
}
.g-part h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.g-part__chiffre { margin: 0; font: 600 22px/1.2 var(--chiffres); font-variant-numeric: tabular-nums; }
.g-part__note { margin: 4px 0 0; font-size: 12px; color: var(--n-text-faint); }

/* ── LES FORMULAIRES ────────────────────────────────────────────────── */
.g-form { display: grid; gap: 12px; margin-top: 14px; }
.g-form--ligne { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.g-champ { display: grid; gap: 4px; font-size: 12px; color: var(--n-text-muted); }
.g-champ--large { grid-column: span 2; }
.g-champ input, .g-champ select {
  font: inherit; font-size: 14px; color: var(--n-text); padding: 8px 10px;
  border: 1px solid var(--n-line); border-radius: var(--n-r-md); background: var(--n-surface-1);
  min-width: 0;
}
.g-bouton {
  font: inherit; font-weight: 600; cursor: pointer; padding: 9px 16px;
  border: 1px solid var(--n-accent); background: var(--n-accent); color: #fff;
  border-radius: var(--n-r-md);
}
.g-bouton:hover { background: var(--n-accent-hi); border-color: var(--n-accent-hi); }
.g-bouton--discret { background: var(--n-surface-1); color: var(--n-accent-hi);
  border-color: var(--n-line); font-weight: 500; padding: 6px 12px; font-size: 13px; }
.g-bouton--discret:hover { background: var(--n-accent-soft); }
.g-bouton[disabled] { opacity: .55; cursor: default; }

.g-controle { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ── L'ÉCRAN DE CONNEXION ───────────────────────────────────────────── */
.g-login-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.g-login { width: 100%; max-width: 380px; background: var(--n-surface-1);
  border: 1px solid var(--n-line); border-radius: var(--n-r-xl); padding: 28px;
  box-shadow: var(--n-shadow-2); }
.g-login__marque { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }
.g-login__marque span { color: var(--n-text-faint); font-weight: 500; }
.g-login__sous { margin: 0 0 20px; font-size: 13px; color: var(--n-text-faint); }
.g-login .g-bouton { width: 100%; }

/* ── MOBILE ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .g-page { padding: 16px 12px 60px; }
  .g-tete { padding: 12px; gap: 12px; }
  .g-tete__qui { width: 100%; margin-left: 0; }
  .g-tuile--phare .g-tuile__chiffre { font-size: 28px; }
  .g-champ--large { grid-column: auto; }
}

/* ── MOUVEMENT ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Le total se distingue de ses parts : même carte, encre plus affirmée et un
   filet à l'accent. Sans ce repère, trois cartes de même poids se lisent
   comme trois chiffres de même nature — or l'un contient les deux autres. */
.g-part--total { background: var(--n-surface-1); border-left: 3px solid var(--n-accent); }
.g-part--total .g-part__chiffre { color: var(--n-accent-hi); }

/* ── LE MOUVEMENT DU MOIS ────────────────────────────────────────────
   Des compteurs, pas un graphique : à ces ordres de grandeur (« 3 entrées,
   1 sortie »), un camembert ou des barres feraient un dessin pour trois
   chiffres qu'on lit plus vite écrits. */
.g-mouvement { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.g-mvt { border: 1px solid var(--n-line); border-radius: var(--n-r-lg); padding: 10px 12px;
  background: var(--n-surface-2); }
.g-mvt__n { margin: 0; font: 600 22px/1.15 var(--chiffres); font-variant-numeric: tabular-nums; }
.g-mvt__l { margin: 2px 0 0; font-size: 12px; color: var(--n-text-faint); }
.g-mvt--plus  .g-mvt__n { color: var(--n-ok); }
.g-mvt--moins .g-mvt__n { color: var(--n-danger); }
.g-mvt--net { background: var(--n-surface-1); border-left: 3px solid var(--n-accent); }
.g-mvt--net .g-mvt__n { color: var(--n-accent-hi); }
.g-mvt--zero .g-mvt__n { color: var(--n-text-disabled, #A3ABB3); }