/**
 * Base — reset léger + typographie de base.
 * Charge après tokens.css (dépendance déclarée dans inc/enqueue.php).
 * Ne contient aucun composant (boutons, cartes...) : voir components.css.
 */

*, *::before, *::after{
  box-sizing: border-box;
}

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

/* Respect du confort visuel : pas de scroll fluide forcé pour qui le refuse. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* BUG CORRIGÉ (revue de code) : layout.css utilise "width: 100vw" pour faire
     déborder les images éditoriales (.prose img) de leur conteneur centré.
     100vw inclut la largeur de la scrollbar sur les navigateurs desktop qui la
     réservent, ce qui provoque un débordement horizontal et une barre de
     défilement fantôme. overflow-x: hidden neutralise ce débordement sans
     changer le rendu visuel voulu. */
  overflow-x: hidden;
}

img, picture, svg{
  max-width: 100%;
  display: block;
}

/* Toute image doit avoir un alt côté gabarit (cf. 07-DESIGN-SYSTEM Partie C, accessibilité) ;
   ce reset ne fait qu'assurer un rendu propre par défaut. */
img{ height: auto; }

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

ul, ol{
  margin: 0;
  padding: 0;
  list-style: none;
}

button, input, select, textarea{
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button{
  cursor: pointer;
  background: none;
  border: none;
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--taupe);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

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

@media (min-width: 1024px){
  h1{ font-size: var(--text-h1-desktop); }
  h2{ font-size: var(--text-h2-desktop); }
  h3{ font-size: var(--text-h3-desktop); }
}

p{
  margin: 0 0 var(--space-4);
  color: var(--taupe-soft);
}

.eyebrow{
  display: inline-block;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  color: var(--accent-deep);
}

/* --- Accessibilité clavier : jamais de outline: none sans remplacement --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Classe utilitaire pour masquer visuellement sans retirer du flux d'accessibilité
   (labels de formulaire nécessaires aux lecteurs d'écran mais redondants visuellement). */
.screen-reader-text{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus{
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
}