/* Charte graphique Prysmatic — voir docs/charte-graphique.md.
   Aucune couleur en dur hors de ce bloc de tokens et des sémantiques
   documentées (règle d'or n°1). */

:root {
  /* Fondations */
  --paper: #0a1526;  --card: #0f1d33;  --surface: #14243d;
  --ink: #eef4fb;    --muted: #8ba0bd; --line: #1e3253;
  /* Accent et dérivées */
  --clay: #00e8ff;
  --clay-deep: color-mix(in srgb, var(--clay) 65%, white);
  --clay-tint: color-mix(in srgb, var(--clay) 12%, transparent);
  /* Fonctionnel */
  --grey: #26374f;   --grey-deep: #32475f;
  --rec: #ff4d6a;    --ok: #00f9c3;    --moteur: #8542ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .45);
  /* Dimensions */
  --field-h: 36px;   --action-l: 190px;
  /* Typographie et arrondi */
  --font-titre: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-corps: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-scale: 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 22px 24px 14px;
}

/* `hidden` doit toujours cacher : sans cette règle, n'importe quel `display`
   explicite le neutralise en silence. */
[hidden] { display: none !important; }

/* ---------- Mise en page ---------- */

.wrap { flex: 1; max-width: 1400px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; min-height: 0; }
.app { display: flex; gap: 24px; margin-bottom: 16px; flex: 1; min-height: 0; }

.sidebar { width: 208px; flex: 0 0 208px; display: flex; flex-direction: column; gap: 18px; }
.sidebar-head { height: 44px; display: flex; flex-direction: column; justify-content: center; }
.marque { display: flex; align-items: center; gap: 8px;
  font-family: var(--font-titre); font-size: 20px; font-weight: 600;
  letter-spacing: -.01em; }
.marque svg { width: 21px; height: 21px; color: var(--clay); flex: 0 0 21px; }
.tagline { font-size: 12.5px; color: var(--muted); }

.tabs { display: flex; flex-direction: column; gap: 4px; padding: 4px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: calc(13px * var(--radius-scale)); }
.tab { display: inline-flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-weight: 600; font-size: 14px; padding: 10px 14px;
  border-radius: calc(9px * var(--radius-scale)); text-decoration: none;
  transition: background .15s ease, color .15s ease; }
.tab:hover:not(.active) { color: var(--clay); }
.tab.active { background: var(--clay); color: #06121f; }
.tab-compteur { margin-left: auto; font-size: 11.5px; font-weight: 700;
  background: var(--clay-tint); color: var(--clay-deep);
  border-radius: 20px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.tab.active .tab-compteur { background: rgba(6, 18, 31, .22); color: inherit; }

.tabs-pied { margin-top: auto; font-size: 11px; color: var(--muted); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.col-head { min-height: 44px; display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; }
.col-head h1 { font-family: var(--font-titre); font-size: 20px; font-weight: 600;
  letter-spacing: -.01em; margin: 0; }
.col-head .droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.columns { display: flex; gap: 18px; flex: 1; min-height: 0; }
.col-principale { flex: 3; display: flex; flex-direction: column; min-width: 0; }
.col-laterale { flex: 2; display: flex; flex-direction: column; min-width: 0; }

footer { font-size: 11px; color: var(--muted); text-align: center; }

/* Écrans sans barre latérale : connexion, administration. La carte est posée
   au centre, sa hauteur suivant son contenu. */
.wrap-centre { justify-content: center; align-items: center; gap: 18px; }
.wrap-centre .card { flex: 0 0 auto; width: 360px; max-width: 100%; }
.wrap-centre .card-corps { overflow: visible; }

/* ---------- Carte ---------- */

.card { background: var(--card); border: 1px solid var(--line);
  border-radius: calc(16px * var(--radius-scale)); box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 0; flex: 1; }
.card-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 16px 18px 0; }
.card-head h2 { font-family: var(--font-titre); font-size: 17px; font-weight: 600;
  margin: 0; }
.card-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px;
  scrollbar-width: none; padding-right: 4px; }
.card-corps::-webkit-scrollbar { width: 0; height: 0; }
.card-pied { border-top: 1px solid var(--line); padding: 12px 18px 14px;
  display: flex; gap: 10px; }
.card-pied .btn { flex: 1; }

/* ---------- Boutons ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600;
  padding: 12px 20px; border-radius: calc(12px * var(--radius-scale));
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .05s ease; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }

.btn-primaire { background: var(--clay); color: #06121f; }
.btn-primaire:hover:not(:disabled) { background: var(--clay-deep); }
.btn-secondaire { background: var(--grey); color: var(--ink); }
.btn-secondaire:hover:not(:disabled) { background: var(--grey-deep); }
.btn-danger { background: var(--rec); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(.9); }
.btn-compact { height: var(--field-h); padding: 0 16px; font-size: 14px; }

/* ---------- Champs ---------- */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 12px; color: var(--muted); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; }

/* Tous les champs de saisie, pas seulement ceux qu'on utilise aujourd'hui :
   un type oublié réapparaît avec le style blanc du navigateur, illisible ici. */
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale));
  height: var(--field-h); padding: 0 12px; font: inherit; font-size: 14px;
  color: var(--ink); width: 100%;
}
input::placeholder { color: var(--muted); opacity: .7; }
select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 0 30px 0 12px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 8l3-3.5' fill='none' stroke='%238ba0bd' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
}
input[type="file"] { padding: 5px 10px; cursor: pointer; font-size: 13px; }
/* Sans cette règle, le navigateur dessine le bouton interne avec son propre
   style — un aplat blanc à texte sombre, illisible sur le fond de la charte. */
input[type="file"]::file-selector-button {
  background: var(--grey); color: var(--ink); border: none; cursor: pointer;
  border-radius: calc(8px * var(--radius-scale));
  height: 26px; padding: 0 12px; margin-right: 10px;
  font: inherit; font-size: 13px; font-weight: 600;
  transition: background .15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--grey-deep); }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--clay); cursor: pointer; }

:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-tint); }
:focus:not(:focus-visible) { box-shadow: none; }
:focus-visible { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-tint); }

/* ---------- Tableau ---------- */

/* `separate` et non `collapse` : Chrome ne peint aucune ombre sur une cellule
   de tableau aux bordures fusionnées, et l'en-tête collante en a besoin pour
   masquer la bande de rembourrage. Les filets sont identiques — seul
   `border-top` est posé, donc rien ne se dédouble. */
table { width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12.5px; }
th { text-align: center; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--clay-deep); font-weight: 700;
  padding: 0 10px 8px; white-space: nowrap; }
td { padding: 7px 10px; border-top: 1px solid var(--line); text-align: center;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
thead th { position: sticky; top: 0; background: var(--card); z-index: 2;
  /* La zone défilante a 16px de rembourrage haut, et une cellule collante se
     fixe SOUS ce rembourrage : les lignes qui remontaient restaient visibles
     dans cette bande. L'ombre la peint de la même couleur, sans rien changer
     à la mise en page au repos. */
  box-shadow: 0 -16px 0 var(--card); }

/* ---------- Capsules et badges ---------- */

.capsule { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 9px; border-radius: 20px;
  display: inline-block; white-space: nowrap; }
.capsule-creation { color: var(--clay-deep); background: var(--clay-tint); }
.capsule-maj { color: #f0c274; background: rgba(224, 169, 79, .16); }
.capsule-inchange { color: var(--muted); background: var(--surface); }
.capsule-absent { color: #a9cdf2; background: rgba(91, 143, 208, .18); }
.capsule-erreur { color: #fff; background: var(--rec); }

.badge { font-size: 11.5px; font-weight: 600; color: var(--clay-deep);
  background: var(--clay-tint); border-radius: 20px; padding: 1px 8px;
  font-variant-numeric: tabular-nums; }

/* ---------- Lignes de liste ---------- */

.ligne { background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--clay); border-radius: calc(10px * var(--radius-scale));
  padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center;
  gap: 12px; text-decoration: none; color: inherit;
  transition: border-color .15s ease; }
a.ligne { cursor: pointer; }
a.ligne:hover { border-color: var(--clay); }
/* Une ligne qui porte à la fois un lien et un bouton : le lien ne peut plus
   être la ligne elle-même, un formulaire ne s'imbriquant pas dans un <a>. */
.ligne-lien { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; }
.ligne:has(.ligne-lien:hover) { border-color: var(--clay); }
.ligne-titre { font-size: 14px; font-weight: 600; }
.ligne-meta { font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.ligne .droite { margin-left: auto; text-align: right; }

/* ---------- Statut ---------- */

.statut { display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--muted); }
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--muted);
  flex: 0 0 9px; }
.led-ok { background: var(--ok); }
.led-erreur { background: var(--rec); }
.led-attente { width: 11px; height: 11px; border-radius: 50%; background: none;
  border: 2px solid var(--line); border-top-color: var(--clay);
  animation: rot .7s linear infinite; }

@keyframes rot { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Encarts ---------- */

.encart { border-radius: calc(12px * var(--radius-scale)); padding: 12px 14px;
  font-size: 13.5px; margin-bottom: 12px; }
/* La charte fixe les trois sémantiques et interdit de les dériver de la
   couleur d'accent : menthe = succès, orange = à vérifier, rouge = alerte.
   « attention » portait le rouge d'alerte, ce qui affichait une réussite en
   rouge — corrigé le 2026-09-01 sur les valeurs exactes du document. */
.encart-erreur { border: 1px solid var(--rec); background: rgba(255, 77, 106, .10); }
.encart-erreur strong { color: #ff8fa3; }
.encart-attention { border-left: 3px solid #e0a94f;
  background: rgba(224, 169, 79, .10); border-radius: calc(8px * var(--radius-scale)); }
.encart-attention strong { color: #f0c274; }
.encart-ok { border-left: 3px solid var(--ok);
  background: rgba(0, 249, 195, .08); border-radius: calc(8px * var(--radius-scale)); }
.encart-ok strong { color: var(--ok); }

/* ---------- État vide ---------- */

.vide { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; text-align: center; }
.vide svg { width: 48px; height: 48px; color: #33496b; }
.vide p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- Tuiles de statistique ---------- */

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 10px; }
.tuile { background: var(--surface); border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale)); min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px; }
.tuile-nom { font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); text-align: center; }
.tuile-valeur { font-size: 19px; font-weight: 650;
  font-variant-numeric: tabular-nums; }
.tuile-avant .tuile-valeur { color: var(--clay-deep); }

/* ---------- Écran étroit ---------- */

@media (max-width: 820px) {
  body { height: auto; overflow: auto; }
  .app { flex-direction: column; }
  .sidebar { width: 100%; flex: none; }
  .tabs { flex-direction: row; flex-wrap: wrap; }
  .tab { width: auto; }
  .columns { flex-direction: column; }
  .card-corps { max-height: 60vh; }
}

/* ---------- Mouvement ---------- */

@media (prefers-reduced-motion: reduce) {
  .led-attente { animation-duration: 2.4s; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .led-attente { animation-duration: 2.4s !important; }
}