/* ---------------------------------------------------------------------------
   Direction artistique propre à ce service — volontairement différente de la
   charte « crème & pastel » commune aux autres services maison (homelab §8.7).
   Monochrome : fond gris très clair, cartes blanches sans bordure, ombres douces,
   noir plein pour les états actifs. La couleur ne sert qu'au sens : gain / perte.
   --------------------------------------------------------------------------- */
:root {
  --fond: #F0F1F3;
  --carte: #FFFFFF;
  --texte: #111214;
  --doux: #8A8F98;
  --trait: #EDEEF0;
  --encre: #111214;          /* remplissages « pleins » : pilules actives, courbes */
  --sur-encre: #FFFFFF;
  --grille: rgba(17, 18, 20, .07);
  --vert: #3E9B6D;
  --rouge: #D2586E;
  --ombre: 0 1px 2px rgba(17, 18, 20, .04), 0 8px 24px rgba(17, 18, 20, .05);
  --ombre-basse: 0 1px 3px rgba(17, 18, 20, .10);
  --rail: #111214;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0E0F11;
    --carte: #191A1D;
    --texte: #F2F3F5;
    --doux: #8A8F98;
    --trait: #252629;
    --encre: #F2F3F5;
    --sur-encre: #111214;
    --grille: rgba(242, 243, 245, .09);
    --vert: #55B98A;
    --rouge: #E8788C;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --ombre-basse: 0 1px 3px rgba(0, 0, 0, .5);
    --rail: #191A1D;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 2.5rem 1.5rem 5rem 6.5rem;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 1120px; margin: 0 auto; }

/* --- rail de navigation ------------------------------------------------- */
.rail {
  position: fixed; left: 1.25rem; top: 50%; transform: translateY(-50%);
  z-index: 20; display: flex; flex-direction: column; gap: .35rem;
  padding: .75rem .5rem; border-radius: 26px;
  background: var(--rail); box-shadow: var(--ombre);
}
.rail button {
  width: 42px; height: 42px; border: 0; border-radius: 14px; cursor: pointer;
  background: transparent; color: #8E939C;
  display: grid; place-items: center; transition: color .15s, background .15s;
}
.rail button:hover { color: #FFF; background: rgba(255, 255, 255, .08); }
.rail button[aria-current="true"] { color: #111214; background: #FFF; }
@media (prefers-color-scheme: dark) {
  .rail button[aria-current="true"] { color: #111214; background: #F2F3F5; }
}
.rail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }

/* --- en-tête ------------------------------------------------------------- */
header { margin-bottom: 2rem; }
h1 { font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; margin: 0 0 .3rem; }
.sous { color: var(--doux); margin: 0 0 1.4rem; font-size: .95rem; }
.filtres { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.filtres > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtres button {
  font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
  padding: .5rem 1rem; border-radius: 999px; border: 0;
  background: var(--carte); color: var(--doux); box-shadow: var(--ombre-basse);
  transition: color .15s, background .15s;
}
.filtres button:hover { color: var(--texte); }
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); }
.filtres .separateur { width: 1px; height: 22px; background: var(--trait); margin: 0 .5rem; }

/* --- sections ------------------------------------------------------------ */
section { margin-top: 2.75rem; scroll-margin-top: 1.5rem; }
h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; margin: 0 0 1rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .9rem; letter-spacing: -.01em; }
.note { color: var(--doux); font-size: .82rem; margin: .7rem 0 0; }

.carte { background: var(--carte); border-radius: 22px; padding: 1.4rem; box-shadow: var(--ombre); }
.grille { display: grid; gap: .85rem; }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; }

/* --- tuiles -------------------------------------------------------------- */
.tuile { background: var(--carte); border-radius: 20px; padding: 1.15rem 1.25rem; box-shadow: var(--ombre); }
.tuile b { display: block; font-size: 1.95rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.tuile > span { display: block; color: var(--doux); font-size: .78rem; margin-top: .3rem; font-weight: 500; }
.tuile em { font-style: normal; color: var(--doux); font-size: .78rem; }
.pos { color: var(--vert); } .neg { color: var(--rouge); }

/* --- tableaux ------------------------------------------------------------ */
.enveloppe { overflow-x: auto; background: var(--carte); border-radius: 22px; box-shadow: var(--ombre); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th {
  text-align: left; font-weight: 500; color: var(--doux); font-size: .76rem;
  padding: 1rem .95rem .7rem; white-space: nowrap;
}
td { padding: .7rem .95rem; border-top: 1px solid var(--trait); white-space: nowrap; }
tbody tr:first-child td { border-top: 1px solid var(--trait); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td:first-child { font-weight: 500; }
.jauge { position: relative; min-width: 96px; }
.jauge i { display: block; height: 5px; border-radius: 3px; background: var(--encre); margin-top: .3rem; }

/* --- graphiques ---------------------------------------------------------- */
svg { display: block; width: 100%; height: auto; overflow: visible; }
.axe { fill: var(--doux); font-size: 10px; }
.ligne-grille { stroke: var(--grille); stroke-width: 1; }
.pastille { fill: var(--carte); filter: drop-shadow(0 1px 2px rgba(17, 18, 20, .12)); }
.pastille-texte { fill: var(--texte); font-size: 10px; font-weight: 600; }
.legende { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--doux); font-size: .78rem; margin-top: .8rem; }
.legende i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }

/* --- calendrier ---------------------------------------------------------- */
.calendrier { display: flex; gap: 3px; overflow-x: auto; padding-bottom: .3rem; }
.calendrier .semaine { display: flex; flex-direction: column; gap: 3px; }
.calendrier .jour { width: 13px; height: 13px; border-radius: 4px; background: var(--grille); }
.mois { display: flex; gap: 3px; color: var(--doux); font-size: .7rem; margin-bottom: .35rem; }

/* --- heatmap ------------------------------------------------------------- */
.onglets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.onglets button {
  font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; padding: .4rem .9rem;
  border-radius: 999px; border: 0; background: var(--carte); color: var(--doux); box-shadow: var(--ombre-basse);
}
.onglets button[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); }
/* Le plan officiel est un aplat gris moyen : on l'atténue pour qu'il reste un fond et non
   le sujet. Surtout pas d'`invert` en thème sombre — le gris ressort très bien sur fond
   noir, alors que l'inversion vire les zones de plantation olive au bleu. */
.plan { opacity: .5; }
@media (prefers-color-scheme: dark) { .plan { opacity: .42; } }

.vide { padding: 3.5rem; text-align: center; color: var(--doux); }
footer { margin-top: 3.5rem; color: var(--doux); font-size: .78rem; text-align: center; }

/* --- mobile : le rail passe en barre basse ------------------------------- */
@media (max-width: 820px) {
  body { padding: 1.75rem 1rem 6rem; }
  h1 { font-size: 2.1rem; }
  .rail {
    left: .75rem; right: .75rem; top: auto; bottom: .75rem; transform: none;
    flex-direction: row; justify-content: space-between; border-radius: 22px; padding: .5rem;
  }
}