/* ==========================================================================
   TIBZ — socle : fontes auto-hebergees, reset, elements
   ========================================================================== */

/* --- Fontes ---------------------------------------------------------------
   Auto-hebergees en woff2 variable : pas d'appel a fonts.gstatic.com.
   Un site francais qui n'envoie rien a Google est plus rapide et evite le
   sujet RGPD des Google Fonts. */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../assets/fonts/martianmono-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
}

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

* { margin: 0; }

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

/* Lenis pilote le defilement : on neutralise le smooth natif quand il est actif,
   sinon les deux se combattent. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

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

p, h1, h2, h3, h4, li { overflow-wrap: break-word; }

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

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

/* --- Typographie d'elements ----------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}

/* Les titres de plaque : Archivo pousse en largeur. C'est la signature
   typographique du site, l'equivalent d'une signaletique de hangar.
   L'axe de chasse est reduit sur petit ecran : un mot long comme NOUVELLES
   deborderait la gouttiere a 118%. */
.plate {
  font-stretch: 104%;
  text-transform: uppercase;
}
@media (min-width: 48rem) { .plate { font-stretch: 112%; } }
@media (min-width: 64rem) { .plate { font-stretch: 118%; } }

p { text-wrap: pretty; }

strong, b { font-weight: 700; }

/* --- Accessibilite -------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 999;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-3) var(--s-5);
  background: var(--acid);
  color: var(--carbon-900);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out-expo);
}
.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

::selection { background: var(--acid); color: var(--carbon-900); }

/* --- Mouvement reduit -----------------------------------------------------
   Pas de degradation de contenu : tout ce qui devait apparaitre est deja
   visible, on coupe seulement le mouvement. */
@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;
    scroll-behavior: auto !important;
  }
  /* [data-split] autant que [data-reveal] : les titres partent a opacity 0 et
     c'est le JS qui les revele. Sans cette regle, un chargement lent ou un JS
     en echec laisserait tous les titres invisibles. */
  [data-reveal], [data-split] { opacity: 1 !important; transform: none !important; }
}