/* =====================================================================
   KAVIVA – Fondations : charte, typographie, réinitialisation
   Palette : bleu foncé (confiance), beige (chaleur), blanc (clarté)
   ===================================================================== */

:root {
  /* Bleu foncé */
  --bleu-950: #08182b;
  --bleu-900: #0c2340;
  --bleu-800: #12325a;
  --bleu-700: #1b4475;
  --bleu-600: #2a5a92;
  --bleu-100: #e3eaf3;
  --bleu-50:  #f1f5fa;

  /* Beige */
  --beige-700: #8a6d3f;
  --beige-500: #b89b6a;
  --beige-300: #dccaa6;
  --beige-200: #e9dec6;
  --beige-100: #f3ece0;
  --beige-50:  #faf7f1;

  --blanc: #ffffff;

  /* Neutres (texte) */
  --encre:       #17212e;
  --encre-douce: #4a5566;
  --encre-pale:  #7a8494;
  --trait:       #e4ddd0;
  --trait-fort:  #cfc5b3;

  /* Statuts (sobres, contrastés AA sur blanc) */
  --succes: #1f7a4d;  --succes-bg: #e5f3ec;
  --info:   #1b4475;  --info-bg:   #e3eaf3;
  --alerte: #8a5a00;  --alerte-bg: #fbf0d9;
  --danger: #a3302a;  --danger-bg: #f8e4e2;
  --livre:  #5b3f8c;  --livre-bg:  #ece6f5;
  --neutre: #4a5566;  --neutre-bg: #eeebe5;

  /* Rôles d'interface */
  --fond:         var(--beige-50);
  --surface:      var(--blanc);
  --primaire:     var(--bleu-900);
  --primaire-hover: var(--bleu-800);
  --accent:       var(--beige-500);
  --focus:        #2a5a92;

  --rayon-s: 6px;
  --rayon:   10px;
  --rayon-l: 14px;
  --ombre-s: 0 1px 2px rgba(12, 35, 64, .06);
  --ombre:   0 1px 3px rgba(12, 35, 64, .08), 0 4px 14px rgba(12, 35, 64, .05);
  --ombre-l: 0 10px 40px rgba(8, 24, 43, .18);

  --police: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-chiffres: "Inter", "Segoe UI", system-ui, sans-serif;

  --sidebar-l: 264px;
  --topbar-h: 60px;
}

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

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

body {
  margin: 0;
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; color: var(--bleu-950); font-weight: 650; }
h1 { font-size: 1.375rem; letter-spacing: -.01em; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 1rem; }

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

img, svg { max-width: 100%; }
svg { flex-shrink: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

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

.num, .montant { font-variant-numeric: tabular-nums; font-family: var(--police-chiffres); white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.muted { color: var(--encre-pale); }
.small { font-size: .8125rem; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 1rem; } .mb-2 { margin-bottom: 1rem; }
.stack > * + * { margin-top: 1rem; }
.hidden { display: none !important; }

@media (min-width: 768px) {
  h1 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}