/* ==========================================================================
   Synthé Santé — fondations communes à toutes les pages (hors admin)
   --------------------------------------------------------------------------
   Ordre de chargement dans le <head> :
     1. bootstrap.min.css   (uniquement les pages avec la navbar)
     2. css/base.css        (ce fichier : police, couleurs, espacements)
     3. css/navbar.css      (uniquement les pages avec la navbar)
     4. css/pages/<page>.css
   Une seule police (DM Sans) : la hiérarchie passe par la taille, la graisse,
   l'interlignage et l'espacement des lettres, jamais par une autre police.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&display=swap');

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de la charte */
  --bg: #f7f8fc;
  --surface: #ffffff;
  --border: #e4e8f1;
  --border-strong: #c7d2fe;
  --text: #1a1f36;
  --muted: #5d6589;
  --accent: #3b6cf5;
  --accent-hover: #2d5ae0;
  --accent-soft: #eef2ff;
  --accent-glow: rgba(59, 108, 245, .15);
  --mint: #34d399;
  --mint-soft: #ecfdf5;

  /* Couleurs d'état (texte / fond / bordure) */
  --success: #15803d;
  --success-soft: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --warning-border: #fde68a;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;

  /* Typographie */
  --font: 'DM Sans', sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-base: 1.6;
  --ls-tight: -.025em;
  --ls-wide: .06em;

  /* Espacements */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Formes */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 31, 54, .04), 0 4px 14px rgba(26, 31, 54, .04);
  --shadow-md: 0 8px 24px rgba(26, 31, 54, .06);
  --shadow-lg: 0 1px 3px rgba(0, 0, 0, .04), 0 24px 68px rgba(26, 31, 54, .08);
  --shadow-modal: 0 32px 80px rgba(26, 31, 54, .18);
  --shadow-accent: 0 6px 20px var(--accent-glow);
  --overlay: rgba(26, 31, 54, .45);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --duration: .2s
}

/* --------------------------------------------------------------------------
   Socle
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased
}

/* Les champs de formulaire n'héritent pas de la police par défaut */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit
}

h1,
h2,
h3,
h4 {
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight)
}

img {
  max-width: 100%
}

/* Focus clavier visible partout */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px
}

/* Respect du réglage « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}