/* =============================================================
   Rééquilibrage BVA — feuille de style de base

   Palette reprise de la charte BVA, identique à celle de l'outil de
   rééquilibrage (voir le bloc :root de src/Views/outil/index.php). Les
   deux doivent rester alignées : une personne qui se connecte puis entre
   dans l'outil ne doit pas avoir l'impression de changer d'application.

   Toutes les couleurs sont regroupées ici. Un changement de charte se
   fait dans ce bloc, nulle part ailleurs dans le fichier.
   ============================================================= */

:root {
  /* Bleus BVA, du logo */
  --brand-primary: #002a4a;    /* titres, marque, boutons foncés */
  --brand-primary-2: #004a7a;  /* liens, focus */
  --brand-accent: #016aab;     /* action principale, accents */
  --brand-tint: #e6f1fb;       /* fonds d'information */
  --brand-tint-2: #cce3f7;     /* bordures d'information */

  /* Neutres */
  --ink: #0f1a2c;
  --ink-soft: #4a5468;
  --paper: #ffffff;
  --paper-2: #f7f8fb;
  --rule: #e8ebf0;

  /* Sémantique */
  --err: #b91c1c;
  --err-bg: #fef2f2;
  --err-rule: #fca5a5;
  --ok: #047857;
  --ok-bg: #ecfdf5;
  --ok-rule: #6ee7b7;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(0,42,74,0.05), 0 4px 12px rgba(0,42,74,0.05);
  --shadow-fort: 0 2px 6px rgba(0,42,74,0.08), 0 8px 20px rgba(0,42,74,0.06);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Monaco, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper-2);
  line-height: 1.5;
  font-size: 15px;
}

a { color: var(--brand-primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* --------- Barre supérieure --------- */
.top {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.top .wrap {
  display: flex; align-items: center; gap: 24px;
  padding-top: 14px; padding-bottom: 14px;
}
.brand {
  font-weight: 600; font-size: 16px; color: var(--brand-primary);
}
.nav { display: flex; gap: 16px; margin-left: 20px; flex: 1; }
.nav a { color: var(--ink-soft); font-size: 14px; }
.nav a:hover { color: var(--brand-primary); }
.userbar { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-soft); }
.userbar .user { display: inline-block; }
.userbar .role { text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; padding: 2px 6px; background: var(--paper-2); border-radius: 3px; }
.inline { display: inline; }
.lien { background: none; border: 0; color: var(--brand-primary-2); cursor: pointer; padding: 0; font: inherit; }
.lien:hover { text-decoration: underline; }

/* --------- Contenu principal --------- */
.main { padding: 32px 20px 64px; }

.hero { margin-bottom: 24px; }
.hero h1 { margin: 0 0 4px; font-size: 24px; }
.lead { color: var(--ink-soft); margin: 0; }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
}

.card.action { display: block; transition: transform .1s ease, box-shadow .1s ease; }
.card.action:hover { transform: translateY(-1px); box-shadow: var(--shadow-fort); text-decoration: none; }
.card.action h2 { margin: 8px 0 6px; font-size: 18px; color: var(--brand-primary); }
.card.action p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.card.notice { margin-top: 24px; border-left: 4px solid var(--brand-accent); background: var(--brand-tint); border-color: var(--brand-tint-2); }

.kicker { text-transform: uppercase; letter-spacing: .5px; font-size: 11px; color: var(--ink-soft); font-weight: 600; }

/* --------- Formulaires --------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.field input, .field select, .field textarea {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand-primary-2);
  outline-offset: 1px;
  border-color: var(--brand-primary-2);
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--brand-primary); border-color: var(--brand-primary); text-decoration: none; }
/* L'action principale porte le bleu vif de la charte : elle doit se
   distinguer des boutons ordinaires, restés sur le neutre foncé. */
.btn.primary { background: var(--brand-accent); border-color: var(--brand-accent); }
.btn.primary:hover { background: var(--brand-primary-2); border-color: var(--brand-primary-2); }
.btn.ghost { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }
.btn.ghost:hover { background: var(--brand-primary); color: #fff; }

/* --------- Alertes --------- */
.alert {
  border: 1px solid var(--rule);
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--paper-2);
  font-size: 14px;
}
.alert.err { background: var(--err-bg); border-color: var(--err-rule); color: var(--err); }
.alert.ok  { background: var(--ok-bg); border-color: var(--ok-rule); color: var(--ok); }

/* --------- Auth --------- */
.auth-body { background: linear-gradient(180deg, var(--paper-2), var(--brand-tint)); }
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-header { text-align: center; margin-bottom: 20px; }
.auth-marque { display: block; margin: 0 auto 10px; }
.auth-header h1 { margin: 0 0 4px; font-size: 20px; color: var(--brand-primary); }
.auth-help { color: var(--ink-soft); font-size: 13px; text-align: center; margin: 16px 0 0; }

/* --------- Pied de page --------- */
.foot { border-top: 1px solid var(--rule); background: var(--paper); margin-top: 40px; }
.foot .wrap { display: flex; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; color: var(--ink-soft); font-size: 13px; }

/* --------- Erreur --------- */
.err-card { text-align: center; max-width: 560px; margin: 40px auto; }
.err-code { font-family: var(--font-mono); font-size: 48px; color: var(--brand-primary); font-weight: 700; }

/* --------- Tableaux de données (historique, administration) --------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.table tbody tr:hover { background: var(--paper-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .mono { font-family: var(--font-mono); font-size: 13px; }

.pastille { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.pastille.ok { background: var(--ok-bg); color: var(--ok); }
.pastille.alerte { background: var(--err-bg); color: var(--err); }
.pastille.neutre { background: var(--paper-2); color: var(--ink-soft); }

.vide { text-align: center; color: var(--ink-soft); padding: 32px 16px; }

/* --------- Administration --------- */
.admin-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
.admin-nav a {
  padding: 8px 14px; font-size: 14px; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-nav a:hover { color: var(--brand-primary); text-decoration: none; }
.admin-nav a.actif { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: 600; }

.filtres { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filtres .field { min-width: 160px; }

.entete-section { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

.actions-compte { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.mdp-temporaire {
  font-family: var(--font-mono); font-size: 18px; letter-spacing: 1px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px;
  padding: 10px 14px; display: inline-block; margin: 0; user-select: all;
}