/* ============================================================
   base.css — Reset, typographie fluide, conteneur,
              focus-visible, prefers-reduced-motion
   ============================================================ */

/* ── Reset moderne ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
}

html, body {
  max-width: 100%;
  overflow-x: clip;
}

html {
  /* Empêche le redimensionnement auto du texte sur iOS */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Couleur d'accentuation native synchronisée avec le thème */
  accent-color: var(--color-accent);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  /* Pas de défilement horizontal */
  overflow-x: clip;
  /* Transition douce lors du changement de thème */
  transition:
    background-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
}

/* ── Images & médias responsive ── */
img, video, svg, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Listes & liens ── */
ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Boutons & formulaires ── */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
}

/* ── Titres — typographie fluide ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-title);
  text-wrap: balance;
  color: var(--color-text);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* ── Corps du texte ── */
p {
  max-width: 62ch;
  line-height: var(--lh-body);
}

/* ── Conteneur centré ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-8);
  }
}

/* ── Focus visible — jamais masqué ── */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-s);
}

/* Supprime l'outline pour les clics souris */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Lien d'évitement (skip-link) ── */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-btn-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  border-radius: var(--radius-s);
  /* Hors écran par défaut */
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 2px;
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Thème sombre : taches lumineuses ambiantes (max 3) ── */
[data-theme="dark"] body::before,
[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  opacity: .35;
  pointer-events: none;
}

[data-theme="dark"] body::before {
  width: 480px;
  height: 480px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, #FF8A5B 0%, transparent 70%);
}

[data-theme="dark"] body::after {
  width: 360px;
  height: 360px;
  bottom: 10%;
  left: -60px;
  background: radial-gradient(circle, #C4B8F0 0%, transparent 70%);
}

/* ── Utilitaires ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-mute {
  color: var(--color-text-mute);
}

.text-accent {
  color: var(--color-accent);
}