/* =====================================================================
   Charte graphique SAMS — jetons & composants (référence design commune)
   D'après charte-graphique-sams-fichier-unique.html
   ===================================================================== */
:root{
  /* Marque */
  --marine:#1B2185;
  --secours:#1236F6;
  --urgence:#E4000F;
  --sceau:#8C1007;
  --andreas:#808080;
  --valide:#12664A;
  --ambre:#B07500;
  /* Neutres sombres */
  --nuit:#0A0E2A;
  --anthracite:#141A38;
  --ardoise:#5A6280;
  --perle:#C7CBDD;
  /* Neutres clairs */
  --blanc-casse:#F4F5FA;
  --encre:#16182A;
  --fond-clair:#F4F5F8;
  --ligne:#E2E5EE;
  --carte:#FFFFFF;
  --paper:#EDEEF3;
  --muted:#5A6280;
  /* Accent dynamique (couleur du panel / de la division active) */
  --accent:#1B2185;
  /* Typo */
  --display:'Montserrat',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--encre);
  background:var(--paper);
  line-height:1.55;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.eyebrow{font-family:var(--display)}
a{color:var(--secours);text-decoration:none}
a:hover{text-decoration:underline}

/* Filet signature marine -> secours */
.rule{height:3px;border:none;background:linear-gradient(90deg,var(--marine),var(--secours));border-radius:2px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:14px;
  padding:10px 20px;border-radius:8px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:filter .15s ease, background .15s ease;
  line-height:1.1;
}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn:disabled,.btn.is-disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-primary{background:var(--marine);color:#fff}
.btn-secondary{background:var(--secours);color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn-urgence{background:var(--urgence);color:#fff}
.btn-ghost{background:transparent;border-color:var(--marine);color:var(--marine)}
.btn-sm{padding:6px 13px;font-size:12.5px}
.btn-block{width:100%;justify-content:center}

/* ---------- Cartes / panneaux ---------- */
.card{
  background:var(--carte);border:1px solid var(--ligne);border-radius:12px;
  box-shadow:0 2px 10px rgba(20,25,45,.05);
}
.card-pad{padding:22px}
.panel{border:1px solid var(--ligne);border-radius:12px;padding:24px;background:var(--carte)}

/* ---------- Badges / pilules ---------- */
.tag,.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:4px 10px;border-radius:20px;color:#fff;text-transform:uppercase;white-space:nowrap;
}
.pill-ghost{background:transparent;border:1px solid var(--ligne);color:var(--muted)}
.badge-ok{background:var(--valide);color:#fff}
.badge-warn{background:var(--ambre);color:#fff}
.badge-danger{background:var(--urgence);color:#fff}
.badge-muted{background:var(--andreas);color:#fff}

/* ---------- Eyebrow / titres de section ---------- */
.eyebrow{
  color:var(--accent);letter-spacing:.2em;text-transform:uppercase;
  font-size:11px;font-weight:600;display:block;margin-bottom:10px;
}
.lead{color:var(--muted);font-size:15.5px;max-width:660px}

/* ---------- Formulaires ---------- */
label.lab{display:block;font-family:var(--display);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
input[type=text],input[type=date],input[type=time],input[type=number],
input[type=email],input[type=search],select,textarea{
  width:100%;background:var(--carte);border:1.5px solid var(--ligne);color:var(--encre);
  padding:9px 11px;border-radius:8px;font-family:var(--body);font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--secours);
  box-shadow:0 0 0 3px rgba(18,54,246,.12)}
textarea{resize:vertical;min-height:70px}
.field{margin-bottom:14px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

/* ---------- Tableaux ---------- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table thead th{
  font-family:var(--display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  text-align:left;color:#fff;background:var(--marine);padding:10px 12px;font-weight:600;
}
.table tbody td{padding:10px 12px;border-bottom:1px solid var(--ligne);vertical-align:middle}
.table tbody tr:hover{background:var(--fond-clair)}
.table .num{font-variant-numeric:tabular-nums}

/* ---------- Divers ---------- */
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--ligne);border:none;margin:20px 0}

/* ---------- Thème sombre ---------- */
body.dark{
  --encre:var(--perle);
  --carte:var(--anthracite);
  --paper:var(--nuit);
  --ligne:#242C50;
  --fond-clair:#1B2246;
  --muted:#8A93B4;
  background:var(--nuit);
}
body.dark .btn-primary{background:var(--secours)}
body.dark .btn-ghost{border-color:var(--secours);color:#6E92FF}
body.dark .table thead th{background:#111A4A}
body.dark input,body.dark select,body.dark textarea{background:#0E1330;border-color:#2A3160;color:var(--perle)}

/* Toast */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--encre);color:#fff;padding:11px 20px;border-radius:10px;font-size:14px;
  opacity:0;pointer-events:none;transition:.25s ease;z-index:200;box-shadow:0 8px 30px rgba(0,0,0,.25);
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
body.dark #toast{background:#000}