/* ==========================================================================
   Zouaf KPI — feuille unique.
   Encre pin, papier froid, un seul accent safran par page.
   Aucune carte, aucune ombre : l'espace et un filet suffisent a separer.
   ========================================================================== */

:root {
  --ink-900: #0e2b29;
  --ink-700: #24463f;
  --ink-500: #4d6b66;
  --ink-300: #8ba49f;
  --paper:   #f0f3f2;
  --surface: #fbfcfc;
  --hairline: #d3dcda;
  --saffron: #de9426;
  --saffron-ink: #4a2f05;
  --alert:   #8f2f1d;

  --text:     var(--ink-900);
  --text-dim: var(--ink-500);
  --ground:   var(--paper);
  --panel:    var(--surface);
  --line:     var(--hairline);

  --step: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
  --font: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text:     #e2ebe8;
    --text-dim: #93aaa5;
    --ground:   #081a19;
    --panel:    #0f2523;
    --line:     #21403c;
    --alert:    #e8836d;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-variation-settings: 'wght' 400, 'wdth' 100, 'opsz' 14;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.875em;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* --- Signature ----------------------------------------------------------- */

.wordmark {
  margin: 0;
  font-size: 1.375rem;
  font-variation-settings: 'wght' 700, 'wdth' 88, 'opsz' 20;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

/* « kpi » se distingue par la largeur et la graisse, non par la couleur. */
.wordmark__tail {
  font-variation-settings: 'wght' 300, 'wdth' 100, 'opsz' 20;
  color: var(--text-dim);
  margin-left: 0.4ch;
}

.wordmark--small { font-size: 1.0625rem; }

/* --- Page de connexion --------------------------------------------------- */

.gate {
  display: grid;
  place-items: center;
  padding: var(--step);
}

.gate__panel {
  width: 100%;
  max-width: 21rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: calc(var(--step) * 1.6) calc(var(--step) * 1.4);
}

.gate__panel .wordmark { margin-bottom: calc(var(--step) * 1.6); }

.form { display: grid; gap: var(--step); }

.field { display: grid; gap: 0.4rem; }

.field label {
  font-size: 0.8125rem;
  font-variation-settings: 'wght' 500, 'wdth' 100, 'opsz' 12;
  color: var(--text-dim);
}

.field input {
  font: inherit;
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  width: 100%;
  transition: border-color 120ms ease;
}

.field input:hover { border-color: var(--text-dim); }

.field input:focus-visible,
.button:focus-visible,
.linkish:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
}

/* Le safran n'apparait qu'ici sur la page de connexion. */
.button {
  font: inherit;
  font-variation-settings: 'wght' 600, 'wdth' 100, 'opsz' 14;
  color: var(--saffron-ink);
  background: var(--saffron);
  border: 1px solid color-mix(in srgb, var(--saffron) 80%, black);
  border-radius: 4px;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: filter 120ms ease;
}

.button:hover { filter: brightness(1.06); }
.button:active { filter: brightness(0.96); }

.button--quiet {
  color: var(--text);
  background: transparent;
  border-color: var(--line);
  margin-top: var(--step);
}

.notice {
  margin: 0;
  font-size: 0.875rem;
  color: var(--alert);
  border-left: 2px solid var(--alert);
  padding-left: 0.7rem;
}

/* --- Tableau de bord ----------------------------------------------------- */

.board { display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step);
  padding: calc(var(--step) * 0.85) var(--step);
  border-bottom: 1px solid var(--line);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.8125rem;
}

.topbar__user { color: var(--text-dim); }

.topbar form { margin: 0; }

.linkish {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-dim);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 1px;
  cursor: pointer;
}

.linkish:hover { color: var(--text); border-bottom-color: currentColor; }

.board__main {
  width: 100%;
  max-width: 40rem;
  padding: calc(var(--step) * 2.4) var(--step) calc(var(--step) * 2);
  margin: 0 auto;
}

.dateline {
  margin: 0 0 calc(var(--step) * 0.5);
  font-size: 0.9375rem;
  font-variation-settings: 'wght' 500, 'wdth' 100, 'opsz' 14;
  color: var(--text-dim);
}

/* Le chiffre du jour : l'unique element bruyant de la page. */
.figure {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* Une unite `ch` se resoudrait sur la police du conteneur (1 rem) et
     donnerait 4 px a cote d'un numeral de 144 px. */
  gap: 0 clamp(0.6rem, 1.4vw, 1.15rem);
  line-height: 0.9;
}

.figure__value {
  font-size: clamp(4.5rem, 17vw, 9rem);
  font-variation-settings: 'wght' 700, 'wdth' 82, 'opsz' 96;
  /* Pas de tabular-nums ici : a cette taille, des chiffres a largeur fixe
     font flotter le nombre. Les figures alignees verticalement — graduations
     d'axe, lignes de tableau — les gardent. */
  letter-spacing: -0.035em;
}

.figure__unit {
  font-size: clamp(1.1rem, 3.2vw, 1.5rem);
  font-variation-settings: 'wght' 400, 'wdth' 100, 'opsz' 24;
  color: var(--text-dim);
}

.figure__caption {
  margin: calc(var(--step) * 0.7) 0 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
}

/* Le filet safran : separateur et accent unique du tableau de bord. */
.rule {
  width: 4.5rem;
  height: 4px;
  margin: calc(var(--step) * 1.9) 0 calc(var(--step) * 1.6);
  border: 0;
  background: var(--saffron);
  border-radius: 2px;
}

.context {
  margin: 0;
  font-size: 1.0625rem;
  max-width: 34ch;
  color: var(--text);
}

.context strong {
  font-variation-settings: 'wght' 700, 'wdth' 92, 'opsz' 20;
  font-variant-numeric: tabular-nums;
}

.context--lead { max-width: 42ch; }

.footnote {
  margin: calc(var(--step) * 1.4) 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  max-width: 46ch;
  color: var(--text-dim);
}

.footnote--quiet { color: var(--ink-300); }

@media (prefers-color-scheme: dark) {
  .footnote--quiet { color: #5f7a75; }
}

/* --- Le seul moment de mouvement de l'application ----------------------- */

@media (prefers-reduced-motion: no-preference) {
  .figure__value {
    animation: settle 420ms cubic-bezier(0.16, 0.8, 0.3, 1) both;
  }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(0.14em); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Graphiques
   --------------------------------------------------------------------------
   Palette validee par scripts/validate_palette.js du skill dataviz, contre
   les surfaces reelles de cette page (#f0f3f2 en clair, #081a19 en sombre) :

     clair  : teal #00918a + safran #b06f10
              bande de clarte OK, chroma OK, ecart CVD 13,8 (cible >= 8),
              vision normale 19,9 (plancher >= 15), contraste >= 3:1
     sombre : teal #2aa99d + safran #bd8620
              tous les controles passent, ecart CVD 14,5

   Les pas sombres sont choisis pour la bande sombre, pas obtenus en
   inversant les clairs.

   La rampe de la grille horaire est sequentielle : son palier le plus clair
   signifie « proche de zero » et se fond volontairement vers le fond. Les
   cellules gardent un filet pour que la grille reste lisible comme grille.
   ========================================================================== */

:root {
  --viz-s1: #00918a;
  --viz-s2: #b06f10;
  --viz-trait: #b4c4c1;
  --viz-filet: #dbe3e1;
  --viz-case-0: #e8edec;
  --viz-case-1: #dcefec;
  --viz-case-2: #b3ded8;
  --viz-case-3: #84cbc2;
  --viz-case-4: #4fb3a8;
  --viz-case-5: #00918a;
  --viz-case-6: #00706b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --viz-s1: #2aa99d;
    --viz-s2: #bd8620;
    --viz-trait: #2d514c;
    --viz-filet: #1b3835;
    --viz-case-0: #0e2321;
    --viz-case-1: #14312e;
    --viz-case-2: #1b4a45;
    --viz-case-3: #22665f;
    --viz-case-4: #28857c;
    --viz-case-5: #2aa99d;
    --viz-case-6: #5ec4ba;
  }
}

.fig {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.fig__titre {
  margin: 0;
  font-size: 0.9375rem;
  font-variation-settings: 'wght' 600, 'wdth' 100, 'opsz' 16;
  color: var(--text);
}

.fig__dessin { overflow-x: auto; }

.viz {
  display: block;
  width: 100%;
  height: auto;
  /* Le cadre inclut la bande des etiquettes d'axe : le conteneur ne peut
     donc pas rogner l'axe en un mini-defilement vertical. */
}

.viz-grille-h { min-width: 34rem; }

.fig__legende {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 62ch;
}

.fig__table > summary {
  font-size: 0.8125rem;
  color: var(--text-dim);
  cursor: pointer;
  width: fit-content;
}

.fig__table > summary:hover { color: var(--text); }
.fig__table > summary:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; }

.fig__table-scroll { overflow-x: auto; margin-top: 0.6rem; }

.fig__table table {
  border-collapse: collapse;
  font-size: 0.78125rem;
  font-variant-numeric: tabular-nums;
}

.fig__table th, .fig__table td {
  text-align: right;
  padding: 0.28rem 0.7rem 0.28rem 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.fig__table thead th { color: var(--text-dim); font-variation-settings: 'wght' 600; }
.fig__table th[scope="row"] { text-align: left; font-variation-settings: 'wght' 500; }

/* --- Marques ------------------------------------------------------------- */

.viz-grille { stroke: var(--viz-filet); stroke-width: 1; }
.viz-base   { stroke: var(--viz-trait); stroke-width: 1; }

.viz-barre { fill: var(--viz-s1); }
.viz--s2 .viz-barre { fill: var(--viz-s2); }
.viz-barre--partiel { fill: var(--viz-s1); opacity: 0.42; }

.viz-trace {
  fill: none;
  stroke: var(--viz-s1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viz--s2 .viz-trace { stroke: var(--viz-s2); }

/* Anneau de surface de 2 px : deux points qui se touchent restent distincts
   sans qu'on ait a les contourer d'un trait. */
.viz-point { fill: var(--viz-s1); stroke: var(--ground); stroke-width: 2; }
.viz--s2 .viz-point, .viz-point--s2 { fill: var(--viz-s2); stroke: var(--ground); stroke-width: 2; }

/* Le texte porte des jetons de texte, jamais une couleur de serie :
   l'identite est portee par la marque coloree posee a cote. */
.viz-tick {
  fill: var(--text-faint, var(--text-dim));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.viz-libelle { fill: var(--text-dim); font-size: 11.5px; }

.viz-valeur {
  fill: var(--text);
  font-size: 11.5px;
  font-variation-settings: 'wght' 600;
  font-variant-numeric: tabular-nums;
}

.viz-valeur--dedans { fill: var(--ground); }
.viz-vide { fill: var(--text-dim); font-size: 13px; }

.viz-case { stroke: var(--viz-filet); stroke-width: 1; }
.viz-case--0 { fill: var(--viz-case-0); }
.viz-case--1 { fill: var(--viz-case-1); }
.viz-case--2 { fill: var(--viz-case-2); }
.viz-case--3 { fill: var(--viz-case-3); }
.viz-case--4 { fill: var(--viz-case-4); }
.viz-case--5 { fill: var(--viz-case-5); }
.viz-case--6 { fill: var(--viz-case-6); }

/* --- Legende de series -------------------------------------------------- */

.viz-legende {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.viz-cle {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-left: 0.6rem;
}

.viz-legende > .viz-cle:first-child { margin-left: 0; }
.viz-cle--s1 { background: var(--viz-s1); }
.viz-cle--s2 { background: var(--viz-s2); }

/* ==========================================================================
   Mise en page du tableau de bord
   ========================================================================== */

.board__main--large { max-width: 62rem; }

/* Un seul rang de filtres, au-dessus de tout ce qu'il cadre. */
.periodes {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 calc(var(--step) * 1.6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px;
  width: fit-content;
}

.periode {
  font-size: 0.8125rem;
  font-variation-settings: 'wght' 500, 'wdth' 100, 'opsz' 12;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.32rem 0.75rem;
  border-radius: 3px;
  white-space: nowrap;
}

.periode:hover { color: var(--text); background: var(--ground); }
.periode:focus-visible { outline: 2px solid var(--saffron); outline-offset: 1px; }

.periode--actif {
  color: var(--saffron-ink);
  background: var(--saffron);
  font-variation-settings: 'wght' 600, 'wdth' 100, 'opsz' 12;
}

.periode--actif:hover { color: var(--saffron-ink); background: var(--saffron); }

.bloc {
  padding-top: calc(var(--step) * 1.9);
  margin-top: calc(var(--step) * 1.9);
  border-top: 1px solid var(--line);
  display: grid;
  gap: calc(var(--step) * 1.4);
}

.bloc:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }

.bloc__titre {
  margin: 0;
  font-size: 1.375rem;
  font-variation-settings: 'wght' 650, 'wdth' 88, 'opsz' 24;
  letter-spacing: -0.015em;
  color: var(--text);
}

.bloc__chapeau {
  margin: calc(var(--step) * -1.1) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 68ch;
}

.bloc__chapeau code { font-size: 0.85em; }

/* --- Tuiles de chiffres -------------------------------------------------- */

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.tuile {
  background: var(--panel);
  padding: 0.85rem 0.95rem 0.9rem;
  display: grid;
  gap: 0.15rem;
  align-content: start;
}

.tuile__valeur {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.1;
  font-variation-settings: 'wght' 650, 'wdth' 92, 'opsz' 24;
  letter-spacing: -0.02em;
  color: var(--text);
  /* Proportionnel, pas tabulaire : ces valeurs ne s'alignent pas en colonne. */
}

.tuile__libelle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text-dim);
}

.tuile__note {
  margin: 0.1rem 0 0;
  font-size: 0.71875rem;
  line-height: 1.35;
  color: var(--ink-300);
}

@media (prefers-color-scheme: dark) {
  .tuile__note { color: #5f7a75; }
}

/* Le chiffre du jour et son filet vivent dans un bloc qui a deja son propre
   `gap` : sans ces reprises, marges et gap se cumulent et le bloc respire
   deux fois trop. */
.board__main--large .dateline { margin-bottom: calc(var(--step) * -0.5); }
.board__main--large .figure { margin-top: 0; }
.board__main--large .rule { margin: calc(var(--step) * 0.4) 0 calc(var(--step) * 0.1); }

/* Le segment et le marqueur du mois en cours, attenues comme sa barre. */
.viz-trace--partiel { opacity: 0.42; }
.viz-point--partiel { opacity: 0.42; }

/* Sur ecran etroit, le dessin defile plutot que de se reduire : mis a
   l'echelle, les etiquettes d'axe se chevauchent et deviennent illisibles.
   .fig__dessin porte deja overflow-x: auto. */
.viz { min-width: 30rem; }
.viz-grille-h { min-width: 34rem; }