/* ==========================================================================
   Base : variables, police, remise à zéro, typographie, utilitaires
   Toutes les couleurs du site sont définies ici.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-600-800-latin.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs (contrastes vérifiés AA sur fond blanc pour le texte) */
  --c-white: #ffffff;
  --c-sky-50: #f1f7fd;      /* fond des sections alternées */
  --c-sky-100: #ddeefb;     /* bordures, badges, sélection */
  --c-sky-300: #8cc3ec;     /* décoratif uniquement, jamais pour du texte */
  --c-blue-700: #1d5fa3;    /* titres, boutons principaux (6,5:1) */
  --c-blue-900: #0f2f52;    /* survol, fond du pied de page */
  --c-text: #1f2937;        /* texte courant (14:1) */
  --c-text-muted: #4b5563;  /* texte secondaire (7,5:1) */
  --c-whatsapp: #0e7a4f;    /* boutons WhatsApp, texte blanc (5,3:1) */
  --c-whatsapp-dark: #0a5c3b;
  --c-focus: #1d5fa3;
  --c-error: #b42318;       /* messages d'erreur (6,6:1) */
  --c-error-bg: #fef3f2;

  /* Typographie */
  --font-title: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h3: 1.1875rem;
  --fs-h2: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
  --fs-h1: clamp(2rem, 1.4rem + 3vw, 3.25rem);

  /* Espacements et formes */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgb(15 47 82 / 0.06), 0 4px 16px rgb(15 47 82 / 0.08);
  --container: 72rem;
  --header-height: 4.25rem;
}

/* ---- Remise à zéro ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
ul[role='list'] { list-style: none; padding: 0; }
a { color: var(--c-blue-700); text-underline-offset: 0.15em; }
a:hover { color: var(--c-blue-900); }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }

/* ---- Typographie ---- */
h1, h2, h3 { font-family: var(--font-title); color: var(--c-blue-900); line-height: 1.2; font-weight: 800; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { text-wrap: pretty; }

/* ---- Mise en page ---- */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.container--narrow { max-width: 44rem; }
.section { padding-block: var(--space-8); }
.section--tinted { background: var(--c-sky-50); }
.section__header { max-width: 44rem; margin-bottom: var(--space-6); }
.section__title { color: var(--c-blue-700); display: flex; align-items: center; gap: var(--space-3); }
.section__intro { margin-top: var(--space-3); color: var(--c-text-muted); font-size: var(--fs-lg); }
.section__action { margin-top: var(--space-6); }

/* ---- Icônes ---- */
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0.75rem 1.25rem;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--font-title); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-blue-700); color: var(--c-white); }
.btn--primary:hover { background: var(--c-blue-900); color: var(--c-white); }
.btn--whatsapp { background: var(--c-whatsapp); color: var(--c-white); }
.btn--whatsapp:hover { background: var(--c-whatsapp-dark); color: var(--c-white); }
.btn--outline { background: var(--c-white); color: var(--c-blue-700); border-color: var(--c-blue-700); }
.btn--outline:hover { background: var(--c-blue-700); color: var(--c-white); }
.btn--ghost { background: transparent; color: var(--c-blue-700); }
.btn--ghost:hover { background: var(--c-sky-100); }
.btn--sm { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.9375rem; }
.btn--lg { min-height: 56px; padding: 0.9rem 1.6rem; font-size: 1.0625rem; }

/* ---- Utilitaires ---- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--c-blue-900); color: var(--c-white); padding: var(--space-3) var(--space-4); border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-4); color: var(--c-white); }
[hidden] { display: none !important; }
.noscript { padding-block: var(--space-7); }