/**
 * ============================================
 * INSTITUTIONAL BASE
 * Variables CSS + Reset + Typography
 * ============================================
 */

/* === VARIABLES CSS INSTITUTIONNELLES === */
:root {
  /* Couleurs de base (anciennes - à supprimer progressivement) */
  --bg: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #ffffff;
  
  --card: #ffffff;
  --card-soft: #fcfdfd;
  
  --ink: #111111;
  --ink-soft: #1e293b;
  --muted: #3a3a3a;
  --muted-2: #3a3a3a;
  
  /* Palette de la charte municipale : vert forêt, bleu Nimba, latérite.
     Les variantes claires gardent la clarté de l'ancienne palette pour
     ne pas dégrader les contrastes, mais sont fortement désaturées. */
  --brand: #2e3d37;
  --brand-2: #232d29;
  --brand-3: #7b8580;
  --brand-4: #1c2622;
  --brand-soft: #eef2f0;

  --accent: #8c9892;
  --accent-2: #2e3d37;
  --accent-3: #b2bab6;

  --blue: #2c4a6b;
  --blue-2: #223a54;
  --blue-soft: rgba(44, 74, 107, 0.08);
  --blue-soft-2: rgba(44, 74, 107, 0.12);
  --blue-border: rgba(44, 74, 107, 0.14);

  --line: #e3e7e9;
  --line-soft: #f2f4f6;
  --line-strong: #cfd6da;

  --success: #2e3d37;
  --warning: #b9542b;
  --danger: #a3261d;
  
  --shadow: 0 0 0 1px rgba(22,32,43,.09);
  --shadow-soft: 0 0 0 1px rgba(22,32,43,.07);
  --shadow-strong: 0 0 0 1px rgba(22,32,43,.14);
  
  --radius: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  
  --max: min(1200px, 92vw);
  --pad: 24px;
  
  /* Header institutionnel */
  --header-bg: #171c22;
  --header-border: #2e3d37;
  --header-text: #ffffff;
  --header-muted: rgba(255, 255, 255, 0.7);
}

/* === RESET CSS === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: var(--ink);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.mobile-nav-open {
  overflow: hidden;
  touch-action: none;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

label {
  display: block;
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

/* === UTILITAIRES ACCESSIBILITÉ === */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  background: var(--brand);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 900;
  text-decoration: none;
}

.skip-nav:focus {
  left: 8px;
}