/* ==========================================================================
   ZAIN.MA — Socle : réinitialisation, éléments, utilitaires
   Dépend de tokens.css, qui doit être chargé avant.
   ========================================================================== */

/* ---------- Réinitialisation ---------- */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre-2);
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  line-height: var(--interligne-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Une seule règle pour tous les contrôles : évite les divergences de police. */
input, button, textarea, select { font: inherit; color: inherit; }

/* ---------- Accessibilité ---------- */

/* Focus visible partout. Corrige le constat « focus clavier invisible » de la Phase 1. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* On ne retire le contour par défaut que là où :focus-visible prend le relais. */
:focus:not(:focus-visible) { outline: none; }

/* Lien d'évitement — première tabulation de la page. */
.evitement {
  position: absolute;
  left: var(--e-3);
  top: calc(-1 * var(--e-6));
  z-index: 999;
  background: var(--accent);
  color: var(--sur-accent);
  padding: var(--e-2) var(--e-3);
  font-weight: var(--graisse-demi);
  text-decoration: none;
  transition: top var(--transition);
}
.evitement:focus { top: var(--e-3); }

/* Contenu réservé aux lecteurs d'écran. */
.lecteur-seul {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.lecteur-seul:focus { clip-path: none; width: auto; height: auto; margin: 0; }

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

/* ---------- Typographie ---------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--e-3);
  color: var(--encre);
  line-height: var(--interligne-titre);
  text-wrap: balance;
  font-weight: var(--graisse-demi);
}
h1 { font-size: var(--t-1); font-weight: var(--graisse-forte); letter-spacing: -0.026em; }
h2 { font-size: var(--t-2); letter-spacing: -0.02em; }
h3 { font-size: var(--t-3); letter-spacing: -0.01em; }

p { margin: 0 0 var(--e-3); }

/* Le texte courant ne dépasse jamais 65 caractères — décision Phase 4. */
.prose { max-width: var(--largeur-texte); }
.prose > * + * { margin-top: var(--e-3); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-fonce); }

strong, b { font-weight: var(--graisse-demi); color: var(--encre); }

code, kbd, samp, .donnee {
  font-family: var(--police-donnee);
  font-size: 0.875em;
}

/* Étiquette : petites capitales espacées, en accent. */
.etiquette {
  font-family: var(--police-donnee);
  font-size: var(--t-etiquette);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Partout où des chiffres s'alignent en colonne. */
table, .chiffres { font-variant-numeric: tabular-nums; }

/* ---------- Mise en page ---------- */

.contenant {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
@media (max-width: 575px) {
  .contenant { padding-inline: var(--e-3); }
}

.section { padding-block: var(--e-6); }
.section--surface { background: var(--surface); }
.section--accent  { background: var(--accent-pale); }

/* Espacement par le conteneur, jamais par des marges individuelles :
   les marges fusionnent ou se doublent silencieusement. */
.pile { display: flex; flex-direction: column; gap: var(--e-4); }
.rangee { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.grille { display: grid; gap: var(--e-4); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Tout contenu large défile dans son propre conteneur :
   le corps de la page ne doit jamais défiler horizontalement. */
.debordement { overflow-x: auto; }

/* ---------- Logo ---------- */

.logo { display: inline-block; }
.logo svg { width: auto; height: 40px; }
/* Le SVG consomme --logo-encre et --logo-accent : il bascule seul avec le thème. */

/* ---------- Impression ---------- */

@media print {
  .evitement, .site-entete nav, .site-pied { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}