/* =====================================================================
   base.css — Reset léger, typographie, conteneurs, utilitaires.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* garde-fou anti-débordement horizontal */
}

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
.display { font-family: var(--font-display); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--forest-500); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }

/* Accessibilité : focus visible */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.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;
}

/* Conteneur centré */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

/* Grille utilitaire */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Utilitaires d'espacement et de texte */
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--sp-2)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.text-secondary{color:var(--text-secondary)}
.text-sm{font-size:var(--fs-sm)}
.text-lg{font-size:var(--fs-lg)}
.fw-medium{font-weight:var(--fw-medium)}
.fw-semibold{font-weight:var(--fw-semibold)}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}
.flex-wrap{flex-wrap:wrap}
.w-full{width:100%}
.hide-mobile{}
@media (max-width: 640px){ .hide-mobile{display:none !important;} }
.hide-desktop{display:none !important;}
@media (max-width: 640px){ .hide-desktop{display:revert !important;} }

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