/* ==========================================================================
   base.css : variables de design, remise à zéro, typographie, utilitaires
   ========================================================================== */

:root {
  /* Marque (couleurs relevées sur le logo) */
  --blue: #1769c8;
  --blue-d: #0e4a96;
  --blue-t: #e6f0fb;
  --teal: #0dbdca;

  /* Couleurs sémantiques */
  --green: #17784a;
  --green-t: #e2f4ea;
  --amber: #8a5700;
  --amber-t: #fdf0d0;
  --red: #b3261e;
  --red-t: #fbe9e7;
  --gray: #4d5766;
  --gray-t: #eceff3;

  /* Neutres */
  --ink: #2b2828;
  --mut: #5b6677;
  --faint: #8a94a3;
  --line: #e2e6ec;
  --bg: #f3f5f8;
  --card: #ffffff;

  /* Formes et dimensions */
  --radius: 12px;
  --radius-s: 10px;
  --headh: 56px;
  --navh: 64px;   /* barre de navigation du bas (mobile) */
  --navw: 0px;    /* largeur du menu latéral (desktop) */
  --shadow: 0 8px 24px rgba(20, 30, 50, .15);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 15px/1.45 var(--font);
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3, h4, p, ul { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Utilitaires */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.muted { color: var(--mut); }
.hide-m { display: none !important; }

@media (min-width: 720px) {
  .show-m { display: none !important; }
  .hide-m { display: inline-flex !important; }
}

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