/* =========================================================================
   Système de design — SOURCE UNIQUE de vérité pour toute l'interface.
   Servi par le serveur à /theme.css et lié par toutes les pages
   (app de consultation + pages rendues côté serveur).

   Principe : on ne recopie plus les couleurs/rayons/typo dans chaque
   fichier. Tout part d'ici — changer un jeton (token) se répercute partout.

   Structure :
     1. Jetons (tokens)  — variables CSS, thème clair + sombre
     2. Base « classless » — éléments HTML nus stylés d'emblée (esprit Pico)
     3. Composants partagés — en-tête, cartes, badges, statuts, tableaux…
     4. Impression
   ========================================================================= */

/* ------------------------------------------------------------------ 1. Jetons */
:root {
  color-scheme: light;

  /* surfaces & texte */
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #fbfcfe;      /* surface légèrement en retrait (détails, encarts) */
  --ink: #1a2332;
  --muted: #5c6b80;
  --line: #e3e7ee;
  --line-soft: #eef0f4;
  --field: #cfd6e0;        /* bordure de champ */

  /* primaire */
  --accent: #1d4ed8;
  --accent-ink: #ffffff;   /* texte posé SUR l'accent */
  --accent-soft: #eef3ff;  /* fond « conteneur » teinté accent */

  /* statuts (paires fond doux / couleur forte) */
  --ok: #157347;   --ok-soft: #e6f4ec;
  --warn: #b45309; --warn-soft: #fdf3e3;
  --err: #b91c1c;  --err-soft: #fdecec;
  --info: #0e7490; --info-soft: #e5f6fa;

  /* deltas (hausse = défavorable, baisse = favorable) */
  --up: var(--err);
  --down: var(--ok);

  /* surlignage des passages commentés */
  --surligne: #fdf3d0;
  --surligne-line: #f0c36d;
  --surligne-ink: #8a6d1a;
  --surligne-actif: #fce9a8;

  /* neutres, formes */
  --neutral-soft: #eef0f4;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-pop: 0 4px 14px rgba(16, 24, 40, .18);

  /* police & largeur de contenu */
  --font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  --largeur: 1240px;
}

/* Thème sombre — appliqué par le système OU forcé via [data-theme="dark"].
   [data-theme="light"] force le clair même si le système est en sombre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f141b;   --panel: #161d27; --panel-2: #1b232f;
    --ink: #e6ecf3;  --muted: #93a1b3; --line: #28313d;
    --line-soft: #222a35; --field: #3a4552;
    --accent: #6f9bff; --accent-ink: #0b1220; --accent-soft: #1a2540;
    --ok: #4ade80;   --ok-soft: #12331f;
    --warn: #fbbf24; --warn-soft: #3a2c11;
    --err: #f87171;  --err-soft: #3a1b1b;
    --info: #38bdf8; --info-soft: #0d2a33;
    --surligne: #3a3113; --surligne-line: #b9902f;
    --surligne-ink: #f0d492; --surligne-actif: #4d4016;
    --neutral-soft: #222a35;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-pop: 0 4px 16px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f141b;   --panel: #161d27; --panel-2: #1b232f;
  --ink: #e6ecf3;  --muted: #93a1b3; --line: #28313d;
  --line-soft: #222a35; --field: #3a4552;
  --accent: #6f9bff; --accent-ink: #0b1220; --accent-soft: #1a2540;
  --ok: #4ade80;   --ok-soft: #12331f;
  --warn: #fbbf24; --warn-soft: #3a2c11;
  --err: #f87171;  --err-soft: #3a1b1b;
  --info: #38bdf8; --info-soft: #0d2a33;
  --surligne: #3a3113; --surligne-line: #b9902f;
  --surligne-ink: #f0d492; --surligne-actif: #4d4016;
  --neutral-soft: #222a35;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------- 2. Base « classless » */
* { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 20px; margin: 0 0 6px; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 16px 0 6px; }
h4 { font-size: 13.5px; margin: 12px 0 6px; }

table { border-collapse: collapse; width: 100%; font-size: 13.5px; margin: 8px 0; }
th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em;
}
th, td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

input, textarea, select {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--field); border-radius: var(--radius-sm);
  padding: 9px 11px; box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 3px; }

button, .btn {
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--radius-sm);
  padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: filter .12s;
}
button:hover, .btn:hover { filter: brightness(1.06); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em; background: var(--neutral-soft);
  padding: 1px 5px; border-radius: 5px;
}
hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

details summary { cursor: pointer; color: var(--accent); font-size: 13.5px; }

/* ------------------------------------------------- 3. Composants partagés */

/* --- mise en page --- */
.contenu { max-width: var(--largeur); margin: 0 auto; padding: 20px 24px 60px; }
.etroit { max-width: 620px; }

.carte {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}

/* --- en-tête & navigation (commune à toutes les pages) --- */
.marque { font-size: 12px; color: var(--muted); letter-spacing: .02em; margin-bottom: 2px; }
.entete {
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 12px 24px 0; position: sticky; top: 0; z-index: 10;
}
.entete .interieur { max-width: var(--largeur); margin: 0 auto; }
.gnav-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gnav-nav { display: flex; gap: 7px; flex-wrap: wrap; }
a.gnav, button.gnav {
  border: 1.5px solid var(--line); background: var(--panel);
  padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  border-radius: var(--radius); text-decoration: none; cursor: pointer;
}
a.gnav:hover, button.gnav:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
  text-decoration: none;
}
a.gnav.actif { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.snav-nav {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 9px;
  border-top: 1px solid var(--line-soft); padding: 8px 0;
}
a.snav {
  padding: 4px 11px; font-size: 13px; color: var(--muted);
  border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
}
a.snav:hover { color: var(--accent); background: var(--accent-soft); text-decoration: none; }
a.snav.actif { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* bascule de thème clair / sombre */
.theme-toggle {
  background: transparent; border: 1.5px solid var(--line); color: var(--muted);
  border-radius: var(--radius); padding: 5px 10px; font-size: 15px; line-height: 1;
  cursor: pointer; font-weight: 600;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* --- texte utilitaire --- */
.muted { color: var(--muted); }
.petit { font-size: 12.5px; }
.barre { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.legende { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* --- pastilles & badges --- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--neutral-soft); color: var(--muted);
}
.pill {
  display: inline-block; padding: 2px 11px; border-radius: 999px;
  font-weight: 700; font-size: 13px; white-space: nowrap;
}
.pill-up { background: var(--err-soft); color: var(--err); }
.pill-down { background: var(--ok-soft); color: var(--ok); }
.pill-zero { background: var(--neutral-soft); color: var(--muted); }

.b-ok { background: var(--ok-soft); color: var(--ok); }
.b-ecart { background: var(--err-soft); color: var(--err); }
.b-info { background: var(--info-soft); color: var(--info); }
.b-warn { background: var(--warn-soft); color: var(--warn); }
.b-neutre { background: var(--neutral-soft); color: var(--muted); }

.delta-up { color: var(--up); font-weight: 600; }
.delta-down { color: var(--down); font-weight: 600; }
.delta-zero { color: var(--muted); }

/* --- encarts de statut --- */
.avert { background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-sm); padding: 7px 11px; font-size: 13.5px; }
.erreur { background: var(--err-soft); color: var(--err); border-radius: var(--radius-sm); padding: 8px 12px; }
.info { background: var(--info-soft); color: var(--info); border-radius: var(--radius-sm); padding: 8px 12px; }
.flag { background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-sm); padding: 6px 10px; margin: 6px 0; font-size: 13px; }
.q { border-left: 3px solid var(--accent); padding-left: 12px; margin: 14px 0; }

/* --- boutons secondaires --- */
.btn-sec {
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-sec:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* --- statistiques --- */
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.stat .valeur { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .libelle { color: var(--muted); font-size: 12.5px; }

/* --- surlignage & marge de commentaires (pages documents) --- */
.deux-col { display: flex; gap: 20px; align-items: flex-start; }
.texte-col { flex: 1; min-width: 0; }
.marge-col { width: 230px; flex: none; border-left: 1px solid var(--line-soft); padding-left: 14px; }
@media (max-width: 920px) { .deux-col { flex-direction: column; } .marge-col { width: auto; border-left: none; padding-left: 0; } }
.carte-comm { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; }
.carte-comm.resolu { opacity: .55; }
.carte-comm.actif { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.citation-marge { border-left: 3px solid var(--surligne-line); padding-left: 6px; color: var(--surligne-ink); margin-bottom: 4px; }
#bulle-citation {
  position: absolute; z-index: 50; background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px;
  font-weight: 600; cursor: pointer; box-shadow: var(--shadow-pop);
}
mark.surligne { background: var(--surligne); border-bottom: 2px solid var(--surligne-line); cursor: pointer; padding: 0 1px; }
mark.surligne.resolu { background: var(--neutral-soft); border-bottom-color: var(--field); }
mark.surligne.actif { background: var(--surligne-actif); }

/* ------------------------------------------------- 4. Impression */
@media print {
  /* toujours imprimer en clair, quel que soit le thème écran */
  :root {
    --bg: #fff; --panel: #fff; --panel-2: #fff; --ink: #000; --muted: #333;
    --line: #ccc; --line-soft: #ddd;
  }
  .no-print, .theme-toggle, .entete .snav-nav, button { display: none !important; }
  body { background: #fff; }
  .carte { border: none; box-shadow: none; padding: 6px 0; margin: 6px 0; }
  .entete { position: static; border: none; }
}