/* ═══════════════════════════════════════════════════════════════════════════
   kpi.css — LA PROFONDEUR.

   ⚠️ CE PANNEAU VIT HORS DES MODULES. Il est accroché à `document.body` pour
   passer par-dessus n'importe quel écran — donc il n'hérite PAS des jetons
   scopés à `#mod-sante`. Ils sont redéfinis ici, aux mêmes valeurs : les gris
   CHAUDS du médaillon, relevés pixel par pixel. Un gris froid trahit tout de
   suite qu'on a changé de maison.

   ⛔ LA COULEUR EST RÉSERVÉE AU STATUT. Rien de vert, d'ambre ou de rouge
   n'est décoratif ici : vert = ça va dans le bon sens, rouge = dans le mauvais,
   ambre = attention à ce que tu lis.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⛔ L'ACCENT VIT À LA RACINE, PAS SUR LE PANNEAU. Les portes (`.kp-porte`)
   sont posées DANS les écrans (`#mod-sante`), pas dans le panneau : un jeton
   défini sur `.kp-voile` ne les atteindrait jamais, et elles seraient restées
   grises pendant que le panneau, lui, serait coloré. Un jeton se déclare là
   où vivent TOUS ceux qui le lisent. */
:root {
  --kp-accent: #5ec2d4;
  --kp-accent-voile: rgba(94, 194, 212, .13);
  --kp-accent-faible: rgba(94, 194, 212, .30);
}
:root[data-theme="clair"] {
  --kp-accent: #2f8599;
  --kp-accent-voile: rgba(47, 133, 153, .11);
  --kp-accent-faible: rgba(47, 133, 153, .34);
}

.kp-voile {
  --encre: var(--m-arete);
  --encre-2: #9d9992;
  --encre-3: #6d6a65;
  --encre-4: #4a4744;
  --filet-s: rgba(224, 219, 213, .075);
  --filet-s-fort: rgba(224, 219, 213, .14);
  --plaque-s: linear-gradient(180deg, #131312, #0b0b0b);
  --creux-s: #0f0f0e;
  --r-sm: 5px; --r-md: 8px; --r-lg: 11px;
  --dt: cubic-bezier(.16, 1, .3, 1);

  /* ⬛ L'ACCENT — la seule couleur de ce système qui ne soit pas un statut.
     Elle dit « ceci s'ouvre » et « il n'y a pas de verdict ici », jamais
     « ça va » ni « ça va mal ». Le choix n'est pas esthétique : mesuré,
     ce cyan reste à ΔE 14,8 du vert, de l'ambre et du rouge de statut MÊME
     pour un daltonien, et tient 9,5 de contraste sur la plaque noire.
     ⛔ Quatre teintes de famille avaient été essayées d'abord : deux
     d'entre elles tombaient à ΔE 1,0 l'une de l'autre en vision daltonienne.
     Une seule couleur bien choisie vaut mieux que quatre à l'œil. */
  --kp-accent: #5ec2d4;
  --kp-accent-voile: rgba(94, 194, 212, .13);
  --kp-accent-faible: rgba(94, 194, 212, .30);

  /* ⛔ JAMAIS `display: none` POUR CACHER CE PANNEAU. Un display qui bascule
     coupe toute transition : le voile apparaissait d'un coup et la boîte
     sautait. Avec visibility + opacity, l'ouverture ET la fermeture
     s'animent, et la boîte garde un rectangle mesurable — c'est ce qui
     permet de viser le chiffre cliqué comme origine du mouvement. */
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: start center;
  padding: 3vh 2vw;
  background: rgba(6, 6, 7, .74);
  backdrop-filter: blur(0px);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--dt), backdrop-filter .4s var(--dt), visibility 0s .3s;
  font-family: var(--f-txt); color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="clair"] .kp-voile {
  --encre: #201f1d; --encre-2: #4e5853; --encre-3: #75726c; --encre-4: #a29e97;
  --filet-s: rgba(0, 0, 0, .09); --filet-s-fort: rgba(0, 0, 0, .16);
  --plaque-s: #ffffff; --creux-s: #f2f1ef;
  /* Sur blanc, le même cyan tomberait à 2,1 de contraste : il faut le
     foncer. Même famille, même sens, lisibilité conservée (4,3). */
  --kp-accent: #2f8599;
  --kp-accent-voile: rgba(47, 133, 153, .11);
  --kp-accent-faible: rgba(47, 133, 153, .34);
  background: rgba(240, 238, 235, .8);
}
.kp-voile.ouvert {
  visibility: visible; opacity: 1; pointer-events: auto;
  backdrop-filter: blur(4px);
  transition: opacity .26s var(--dt), backdrop-filter .45s var(--dt), visibility 0s 0s;
}
/* Le fond ne défile plus : sinon on fouille un graphe et c'est l'écran du
   dessous qui bouge. */
body.kpi-ouvert { overflow: hidden }

.kp-boite {
  width: min(1180px, 100%); max-height: 94vh; overflow-y: auto;
  background: var(--plaque-s);
  border: 1px solid var(--filet-s-fort); border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), var(--ombre-plaque, none);
  /* `transform-origin` est posé en JS sur le centre du chiffre cliqué. */
  transform: scale(.965) translateY(10px); opacity: 0;
  transition: transform .34s cubic-bezier(.18, .9, .22, 1), opacity .22s ease;
  outline: none;
  scrollbar-width: thin; scrollbar-color: var(--filet-s-fort) transparent;
}
.kp-voile.ouvert .kp-boite { transform: none; opacity: 1 }
.kp-boite::-webkit-scrollbar { width: 10px }
.kp-boite::-webkit-scrollbar-thumb {
  background: var(--filet-s-fort); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
.kp-boite::-webkit-scrollbar-track { background: transparent }

/* ── LA CASCADE : les sections arrivent dans l'ordre où on les lit ──── */
@keyframes kp-arrive { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } }
.kp-arrive { animation: kp-arrive .34s var(--dt) both }

/* ── « ÇA TRAVAILLE » : un filet, pas un écran blanc ─────────────────
   Changer de période ne doit rien effacer. Ce trait passe sous la barre de
   temps pendant la lecture de la série, et le contenu reste lisible. */
@keyframes kp-file { 0% { transform: translateX(-100%) } 100% { transform: translateX(300%) } }
.kp-boite.travaille .kp-barre { position: relative; overflow: hidden }
.kp-boite.travaille .kp-barre::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--kp-accent), transparent);
  width: 33%; animation: kp-file 1.1s linear infinite;
}
.kp-boite.travaille .kp-plot { opacity: .45; transition: opacity .2s }

@media (prefers-reduced-motion: reduce) {
  .kp-voile, .kp-boite { transition: none }
  .kp-boite { transform: none }
  .kp-arrive { animation: none }
  .kp-boite.travaille .kp-barre::after { animation: none; width: 100%; opacity: .5 }
}

/* ── la tête ───────────────────────────────────────────────────────────── */
.kp-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 22px 26px 18px; border-bottom: 1px solid var(--filet-s);
  position: relative;
  background: linear-gradient(180deg, var(--kp-accent-voile), transparent 72%);
}
/* un filet d'accent en haut de la boîte : on sait tout de suite qu'on a
   changé de plan, sans avoir à lire le titre. */
.kp-tete::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--kp-accent), transparent 62%);
}
.kp-sur { color: var(--kp-accent) !important; opacity: .85 }
.kp-sur {
  margin: 0 0 4px; font-family: var(--f-num); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-4);
}
.kp-tete h2 {
  margin: 0; font-family: var(--f-aff); font-size: 23px; font-weight: 500;
  letter-spacing: -.01em;
  background: var(--poli); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--encre);
}
.kp-gros { margin: 10px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.kp-gros b { font-family: var(--f-num); font-size: 40px; font-weight: 500; color: var(--encre); line-height: 1 }
.kp-gros i { font-style: normal; font-family: var(--f-num); font-size: 17px; color: var(--encre-3) }
.kp-gros u { text-decoration: none; font-size: 12px; color: var(--encre-4); margin-left: 4px }

.kp-x {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--creux-s); color: var(--encre-3);
  border: 1px solid var(--filet-s-fort); cursor: pointer; font-size: 14px;
  transition: color .15s, border-color .15s;
}
.kp-x:hover { color: var(--kp-accent); border-color: var(--kp-accent-faible) }
.kp-x:focus-visible { outline: 2px solid var(--m-arete); outline-offset: 2px }

/* ── la barre de temps ─────────────────────────────────────────────────── */
.kp-barre {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 26px; border-bottom: 1px solid var(--filet-s); background: var(--creux-s);
}
.kp-rac { display: flex; gap: 6px; flex-wrap: wrap }
.kp-b {
  font-family: var(--f-num); font-size: 11.5px; padding: 6px 11px;
  border-radius: var(--r-sm); border: 1px solid var(--filet-s-fort);
  background: transparent; color: var(--encre-3); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.kp-b:hover { color: var(--encre); border-color: var(--kp-accent-faible) }
/* Le raccourci actif porte l'accent : c'est une commande, pas un verdict. */
.kp-b.on {
  color: var(--noir, #0b0b0b); background: var(--kp-accent);
  border-color: transparent; box-shadow: 0 1px 12px rgba(94, 194, 212, .22);
}
.kp-b:active { transform: translateY(1px) }
:root[data-theme="clair"] .kp-b.on { color: #fff; background: var(--kp-accent) }
.kp-b:focus-visible { outline: 2px solid var(--m-arete); outline-offset: 2px }

.kp-dates { display: flex; gap: 10px; margin-left: auto }
.kp-date { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--encre-4) }
.kp-date input:focus { border-color: var(--kp-accent); outline: none }
.kp-date input {
  font-family: var(--f-num); font-size: 11.5px; padding: 5px 8px;
  border-radius: var(--r-sm); border: 1px solid var(--filet-s-fort);
  background: var(--plaque-s); color: var(--encre-2); color-scheme: dark;
}
:root[data-theme="clair"] .kp-date input { color-scheme: light }

.kp-note { margin: 0; flex-basis: 100%; font-size: 11.5px; color: var(--encre-4) }
.kp-att { color: var(--l-attente) }

/* ── les sections ──────────────────────────────────────────────────────── */
.kp-sec { padding: 20px 26px; border-bottom: 1px solid var(--filet-s) }
.kp-sec:last-child { border-bottom: 0 }

.kp-plot { position: relative }
.kp-plot svg { width: 100%; height: auto; display: block; overflow: visible }
.kp-tip {
  position: absolute; transform: translate(-50%, -140%); pointer-events: none;
  opacity: 0; transition: opacity .12s;
  background: var(--creux-s); border: 1px solid var(--filet-s-fort);
  border-radius: var(--r-sm); padding: 6px 9px; white-space: nowrap;
  font-family: var(--f-num); font-size: 11.5px; color: var(--encre-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.kp-tip b { color: var(--encre); font-weight: 500 }

.kp-leg { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--encre-3) }
.kp-leg span { display: inline-flex; align-items: center; gap: 7px }
.kp-leg i { width: 16px; height: 2.5px; border-radius: 2px; flex: none }
.kp-leg i.pointille {
  height: 0; border-top: 2.5px dashed currentColor; background: none !important;
  color: var(--m);
}

/* ── le bilan : quatre cases ───────────────────────────────────────────── */
.kp-bil { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.kp-case {
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--creux-s); border: 1px solid var(--filet-s);
}
.kp-case.bon { border-left: 2px solid var(--l-bon) }
.kp-case.mal { border-left: 2px solid var(--l-mal) }
.kp-lab {
  margin: 0 0 6px; font-family: var(--f-num); font-size: 10px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--encre-4);
}
.kp-n { margin: 0; font-family: var(--f-num); font-size: 24px; color: var(--encre); line-height: 1.1 }
.kp-sous { margin: 6px 0 0; font-size: 11.5px; color: var(--encre-4) }

/* ── la définition ─────────────────────────────────────────────────────── */
.kp-def { display: grid; gap: 14px; background: var(--creux-s) }
.kp-dl { padding-left: 12px; border-left: 2px solid var(--filet-s-fort) }
.kp-dl.att { border-left-color: var(--l-attente) }
.kp-dl p:last-child { margin: 0; font-size: 13px; line-height: 1.55; color: var(--encre-2) }

.kp-vide { padding: 48px 26px; text-align: center; position: relative }
.kp-vide .kp-x { position: absolute; top: 14px; right: 14px }
.kp-mal { color: var(--l-mal) }

/* ── UNE PORTE : ce qui rend un chiffre cliquable ────────────────────────
   🔴 06/10 — « quand je veux agrandir les widgets c'est compliqué ». Le
   soulignement pointillé seul ne se voyait qu'en le cherchant. Le repère ⤢
   est maintenant un VRAI élément, posé en bas à droite, visible en
   permanence à 40 % — assez pour être trouvé, assez discret pour que quinze
   chiffres n'en fassent pas un champ d'icônes. Il s'allume sous le curseur,
   en même temps que la surface se lève.
   ⛔ EN BAS À DROITE, PAS EN HAUT : le coin haut-droit des grandes tuiles
   porte déjà la pastille de statut (« À REGARDER »), et une flèche posée là
   la chevauchait. */
.kp-porte {
  cursor: pointer; position: relative; border-radius: var(--r-sm);
  transition: background-color .16s var(--dt), box-shadow .16s var(--dt);
}
/* ⛔ `.kp-porte > .kp-ag`, PAS `.kp-ag` SEUL. Mesuré le 06/10 : cinq repères
   sur quinze sortaient en gris. `sante.css` porte `.sa-m span` et
   `.sa-f span` — un sélecteur classe+élément (0,0,1,1) qui bat une classe
   seule (0,0,1,0) — et son raccourci `font` écrasait aussi la taille.
   Deux classes (0,0,2,0) passent devant, et la police est redite en entier
   parce qu'un raccourci `font` remet TOUT à sa valeur par défaut, pas
   seulement ce qu'il nomme. */
.kp-porte > .kp-ag {
  position: absolute; right: 6px; bottom: 5px;
  font: 400 11px/1 var(--f-num); margin: 0;
  color: var(--kp-accent);
  opacity: .4; pointer-events: none; user-select: none;
  transition: opacity .16s var(--dt), transform .16s var(--dt);
}
.kp-porte::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 0;
  border-bottom: 1px dashed var(--kp-accent-faible); pointer-events: none;
  transition: border-color .18s;
}
.kp-porte:hover, .kp-porte:focus-visible {
  background-color: var(--kp-accent-voile);
  box-shadow: 0 0 0 5px var(--kp-accent-voile);
}
.kp-porte:hover > .kp-ag, .kp-porte:focus-visible > .kp-ag {
  opacity: 1; transform: scale(1.18);
}
.kp-porte:hover::after, .kp-porte:focus-visible::after { border-bottom-color: var(--kp-accent) }
.kp-porte:active { transform: translateY(1px) }
.kp-porte:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 4px }
@media (prefers-reduced-motion: reduce) {
  .kp-porte, .kp-porte > .kp-ag { transition: none }
  .kp-porte:active { transform: none }
  .kp-porte:hover > .kp-ag { transform: none }
}