/* ==========================================================================
   02-BASE.CSS — Remise à zéro et styles de fond
   --------------------------------------------------------------------------
   Éléments HTML nus uniquement. Aucune classe de composant ici.
   ========================================================================== */

/* === REMISE A ZERO ======================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Décale l'ancre sous l'en-tête collant au lieu de la cacher dessous. */
  scroll-padding-top: calc(var(--h-barre-nav) + var(--e-5));
}

body {
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

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

table { border-collapse: collapse; width: 100%; }


/* === TITRES =============================================================== */
/* Interlignage serré et approche négative : c'est ce qui donne le poids
   éditorial. Sans cela, de grands titres paraissent mous. */

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-l);  line-height: 1.15; letter-spacing: -0.02em; }
h4 { font-size: var(--t-m);  line-height: 1.25; letter-spacing: -0.015em; }

p { text-wrap: pretty; }


/* === LIENS ================================================================ */
/* Le soulignement se déploie de la gauche au survol plutôt que d'apparaître
   d'un coup : c'est le mouvement le plus présent du site, et le plus discret. */

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

a:not([class]) {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--d-court) var(--ease),
              color var(--d-instant) var(--ease);
  padding-bottom: 1px;
}
a:not([class]):hover {
  color: var(--accent);
  background-size: 100% 1px;
}


/* === FOCUS ================================================================ */
/* Jamais supprimé. Contour net, hors du flux, visible sur blanc comme sur noir. */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.section-inv :focus-visible { outline-color: var(--blanc); }


/* === SELECTION ============================================================ */

::selection {
  background: var(--accent);
  color: var(--blanc);
}


/* === LIEN D'EVITEMENT ===================================================== */

.evitement {
  position: fixed;
  top: var(--e-2);
  left: -9999px;
  z-index: 300;
  background: var(--noir);
  color: var(--blanc);
  padding: var(--e-3) var(--e-5);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.evitement:focus { left: var(--e-4); }