/* Pilotage Jira — système de design.
   Thème clair assumé : l'outil est consulté le matin, dans un bureau éclairé.
   Neutres teintés chauds (papier), un seul accent olive sourd.
   Aucune dépendance, aucun JavaScript. */

:root {
  /* Papier : neutres teintés chauds. Jamais de blanc ni de noir purs. */
  --paper:        oklch(98.4% 0.005 85);
  --surface:      oklch(99.2% 0.003 85);
  --surface-sunk: oklch(96.2% 0.007 85);
  --line:         oklch(89% 0.008 85);
  --line-strong:  oklch(78% 0.011 85);
  --ink:          oklch(25% 0.014 80);
  --ink-muted:    oklch(44% 0.012 80);
  /* 50 % = ~4,6:1 sur le papier : le texte le plus estompe reste lisible (WCAG AA). */
  --ink-faint:    oklch(50% 0.010 80);

  /* Accent : olive sourd. Ni bleu Atlassian, ni vert terminal. */
  --accent:       oklch(45% 0.085 128);
  --accent-deep:  oklch(37% 0.090 128);
  --accent-line:  oklch(76% 0.055 128);
  --accent-wash:  oklch(95.5% 0.028 128);

  /* États. L'ambre signale « à traiter », jamais une faute. */
  --attention:      oklch(58% 0.115 72);
  --attention-wash: oklch(95.5% 0.045 78);
  --danger:         oklch(50% 0.150 25);

  /* Espacement, base 4pt. Nommé par relation, pas par valeur. */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  --radius: 3px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  font-synthesis-weight: none;
}

/* Les nombres sont tabulaires partout : dans un tableau de 55 projets,
   l'alignement des chiffres est fonctionnel. */
.num, td.num, th.num, .stat-value, .cell {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── En-tête ─────────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-md) var(--space-lg);
  padding: var(--space-md) var(--space-lg) 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.wordmark {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 620;
  letter-spacing: -0.005em;
}
.wordmark span { color: var(--ink-faint); font-weight: 400; }

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-inline-start: auto;
}

.masthead nav a {
  position: relative;
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  color: var(--ink-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}
.masthead nav a::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-2xs);
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
.masthead nav a[aria-current="page"] { color: var(--ink); font-weight: 560; }
.masthead nav a[aria-current="page"]::after { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .masthead nav a:hover { color: var(--ink); }
  .masthead nav a:hover::after { opacity: 0.35; }
}

/* Cible tactile de 44px sans grossir le visuel */
.masthead nav a::before { content: ""; position: absolute; inset: -6px 0; }

/* ── Structure ───────────────────────────────────────────── */

main { padding: var(--space-xl) var(--space-lg) var(--space-2xl); max-width: 1180px; }

.view-head { margin-bottom: var(--space-xl); }
.view-head h2 {
  margin: 0 0 var(--space-xs);
  font-size: 1.5rem;
  font-weight: 620;
  letter-spacing: -0.015em;
}
.view-head p {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

section + section, .ledger + section { margin-top: var(--space-2xl); }

h3 {
  margin: 0 0 var(--space-md);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Bandeau de chiffres : un registre, pas des cartes ──── */

.ledger {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  border-block: 1px solid var(--line);
}

.ledger > div {
  flex: 1 1 180px;
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
}
.ledger > div + div {
  padding-inline-start: var(--space-lg);
  border-inline-start: 1px solid var(--line);
}

.ledger dt {
  margin-bottom: var(--space-xs);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.ledger dd { margin: 0; }

.stat-value { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; }
/* Un chiffre sans son dénominateur est un mensonge : les deux termes, toujours. */
.denom { color: var(--ink-faint); font-size: 1.125rem; font-weight: 400; }
/* Unite en police sans : le monospace creuse l'espace avant le « h ». */
.unit { margin-inline-start: 0.18em; font-family: var(--sans); font-size: 1.0625rem; color: var(--ink-muted); }
.stat-note { display: block; margin-top: var(--space-2xs); font-size: 0.8125rem; color: var(--ink-muted); }

/* ── Tableaux ────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

caption { text-align: start; padding-bottom: var(--space-sm); color: var(--ink-muted); font-size: 0.8125rem; }

th {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: start;
  white-space: nowrap;
}
th.num, td.num { text-align: end; }

td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--line); }

tbody tr { transition: background-color 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  tbody tr:hover { background: var(--surface-sunk); }
}

.key { font-family: var(--mono); font-size: 0.875rem; }
.muted { color: var(--ink-faint); }

/* Barre de proportion dans une cellule : lit mieux qu'un pourcentage seul. */
.bar { display: block; height: 4px; background: var(--surface-sunk); border-radius: 2px; }
/* Minimum visible : une couverture de 0,6 % ne doit pas se confondre avec zero. */
.bar > span { display: block; min-width: 2px; height: 100%; background: var(--accent-line); border-radius: 2px; }
.bar.zero > span { min-width: 0; background: var(--line-strong); }

/* ── Heatmap personne × jour ─────────────────────────────── */

/* Pas d'etirement : avec cinq colonnes, des cases larges de 90px sonnent faux. */
.heatmap { width: auto; }
.heatmap th[scope="row"] { border-bottom: 1px solid var(--line); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.875rem; }
.heatmap td { padding: var(--space-2xs); border: none; }

.cell {
  display: block;
  min-width: 34px;
  padding: var(--space-xs) var(--space-2xs);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-sunk);
  color: var(--ink-faint);
  font-size: 0.75rem;
  text-align: center;
}
.cell[data-filled] {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-weight: 500;
}
/* L'etat est une observation sur la periode, pas un jugement : pas de couleur. */
.state { color: var(--ink-muted); font-size: 0.8125rem; white-space: nowrap; }
.day-label { font-size: 0.6875rem; font-weight: 500; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
/* Un samedi vide ne doit pas se lire comme un mardi vide. */
td.weekend .cell { background: transparent; border-color: var(--line); border-style: dashed; }
th.day-label.weekend { color: var(--ink-faint); font-style: italic; }

/* ── Courbe d'adoption ───────────────────────────────────── */

/* Largeur naturelle : trois barres ne doivent pas s'etirer sur toute la page. */
.spark { display: block; max-width: 100%; height: 120px; overflow: visible; }
.spark .axis { stroke: var(--line-strong); stroke-width: 1; }
.spark .bar-mark { fill: var(--accent); }
.spark .tick { fill: var(--ink-faint); font-family: var(--mono); font-size: 9px; }

/* ── États vides : ils enseignent, ils ne s'excusent pas ── */

.empty {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--line);
  max-width: 62ch;
}
.empty p { margin: 0 0 var(--space-sm); color: var(--ink-muted); font-size: 0.9375rem; }
.empty p:last-child { margin-bottom: 0; }
.empty strong { color: var(--ink); font-weight: 560; }

code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  font-family: var(--mono);
  font-size: 0.8125em;
}

/* ── Signal d'attention (ambre, jamais rouge) ───────────── */

.notice {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid oklch(84% 0.060 78);
  border-radius: var(--radius);
  background: var(--attention-wash);
  max-width: 74ch;
}
.notice h3 { margin-bottom: var(--space-xs); color: oklch(42% 0.095 65); }
.notice p { margin: 0; font-size: 0.9375rem; }
.notice p + p { margin-top: var(--space-xs); }

/* ── Formulaires et boutons ──────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); margin-bottom: var(--space-lg); }
.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field label { font-size: 0.75rem; font-weight: 500; color: var(--ink-muted); }

input, select {
  min-height: 36px;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 400 0.9375rem var(--sans);
}
input:disabled, select:disabled { background: var(--surface-sunk); color: var(--ink-faint); }

button {
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius);
  background: var(--accent);
  color: oklch(98% 0.010 128);
  font: 500 0.875rem var(--sans);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 150ms var(--ease-out);
}
button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  button:hover { background: var(--accent-deep); }
}

button.quiet {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink-muted);
}
@media (hover: hover) and (pointer: fine) {
  button.quiet:hover { background: var(--surface-sunk); color: var(--ink); }
}

/* ── Pied de page : fraîcheur et mention d'information ──── */

.footer {
  margin-top: var(--space-2xl);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.8125rem;
  max-width: 84ch;
}
.footer p { margin: 0 0 var(--space-xs); }
.footer p:last-child { margin-bottom: 0; }

/* ── Connexion ───────────────────────────────────────────── */

.login {
  max-width: 340px;
  margin: 14vh auto var(--space-2xl);
  padding: 0 var(--space-lg);
}
.login h1 { margin: 0 0 var(--space-2xs); font-size: 1.25rem; font-weight: 620; letter-spacing: -0.01em; }
.login .sub { margin: 0 0 var(--space-xl); color: var(--ink-muted); font-size: 0.875rem; }
.login form { display: flex; flex-direction: column; gap: var(--space-md); }
.login button { margin-top: var(--space-xs); }
.login .error {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid oklch(80% 0.090 25);
  border-radius: var(--radius);
  background: oklch(96% 0.035 25);
  color: oklch(38% 0.130 25);
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  main { padding: var(--space-lg) var(--space-md) var(--space-xl); }
  .masthead { padding-inline: var(--space-md); }
  .masthead nav { margin-inline-start: 0; width: 100%; }
  .ledger > div + div { padding-inline-start: 0; border-inline-start: none; border-top: 1px solid var(--line); }
  .ledger > div { flex-basis: 100%; padding-inline-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
  button:active { transform: none; }
}

/* ── Bandeau d'instance non protégée ─────────────────────── */

.unguarded {
  margin: 0;
  padding: var(--space-xs) var(--space-lg);
  border-bottom: 1px solid oklch(80% 0.090 25);
  background: oklch(96% 0.035 25);
  color: oklch(38% 0.130 25);
  font-size: 0.8125rem;
}
.unguarded strong { font-weight: 620; }

/* ── Anomalies ───────────────────────────────────────────── */

.anomaly-count {
  margin: 0 0 var(--space-xs);
  font-size: 1.25rem;
  font-weight: 500;
}
.anomaly-count .num { font-size: 1.75rem; letter-spacing: -0.02em; }

.anomaly-why {
  margin: 0 0 var(--space-md);
  max-width: 72ch;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

td form { margin: 0; }

/* ── Bandeau de peremption des donnees ───────────────────── */

.stale {
  margin: 0;
  padding: var(--space-xs) var(--space-lg);
  border-bottom: 1px solid oklch(84% 0.060 78);
  background: var(--attention-wash);
  color: oklch(40% 0.095 65);
  font-size: 0.8125rem;
}

/* ── Cibles tactiles ─────────────────────────────────────── */

@media (pointer: coarse) {
  button, input, select { min-height: 44px; }
  .masthead nav a::before { inset: -10px 0; }
}

/* ── Intitulés de tâches et de projets ───────────────────── */

/* Tronqués avec points de suspension : l'intitulé complet est dans le title.
   max-width borne la colonne pour que les tableaux restent lisibles. */
td.summary {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-name { color: var(--ink-muted); font-weight: 400; font-size: 1.125rem; }

/* ── Refonte : nav en deux groupes ───────────────────────── */

.masthead nav { align-items: baseline; }
.nav-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); }
.nav-group.data { margin-inline-start: var(--space-lg); padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--line); }
.nav-group.data a { color: var(--ink-faint); font-size: 0.8125rem; }
.nav-group.data a[aria-current="page"] { color: var(--ink); }

/* ── Réponses-actions de la vue d'ensemble ───────────────── */

.answers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.answers li { flex: 1 1 240px; }
.answers a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.45;
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.answers a .num { display: block; font-size: 1.75rem; font-weight: 560; letter-spacing: -0.02em; margin-bottom: var(--space-2xs); }
.answers a .go { display: block; margin-top: var(--space-xs); color: var(--accent-deep); font-weight: 520; font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) {
  .answers a:hover { border-color: var(--accent-line); background: var(--accent-wash); }
}

/* ── Raccourcis de période ───────────────────────────────── */

.presets { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.presets a {
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.presets a[aria-current="true"] { border-color: var(--accent); color: var(--accent-deep); font-weight: 560; }
@media (hover: hover) and (pointer: fine) {
  .presets a:hover { border-color: var(--line-strong); color: var(--ink); }
}

/* ── Pastilles d'initiales ───────────────────────────────── */

.initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-inline-end: var(--space-xs);
  border-radius: 50%;
  background: var(--surface-sunk);
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.legend { max-width: 60ch; }

/* Projets vides dans la liste complete : presents mais en retrait. */
tr.dimmed td, tr.dimmed td a { color: var(--ink-faint); }