/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset des ancres = hauteur EXACTE du header fixe (.nav), sans marge en
     plus : la section cible démarre pile sous la barre → son propre fond
     remplit l'espace. Tout ajout ferait déborder le bas de la section
     précédente (ex. le lime de .labo au-dessus de .methode). La respiration
     sous le titre vient du padding interne de .section (--sp-section).
     --nav-h suit la bascule burger (820px) du nav : 62px desktop, 72px burger. */
  --nav-h: 62px;
  scroll-padding-top: var(--nav-h);
}
@media (max-width: 820px) { html { --nav-h: 72px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Conteneur ───────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-section); }

/* ── Titres & labels ─────────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.0;
  letter-spacing: -0.024em;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding-inline: 26px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ink   { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: #24272e; }
.btn--lime  { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-2); }
.btn--sm { height: 34px; padding-inline: 18px; font-size: 12px; }

/* ── Apparition au scroll ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.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;
}
/* Saut de ligne visible sur mobile uniquement (inerte au-dessus de 760px) */
.br-mobile { display: none; }
@media (max-width: 760px) { .br-mobile { display: inline; } }
/* Saut de ligne visible sur desktop uniquement (neutralisé sous 760px : le
   texte reflue au lieu de casser sur une ligne trop courte) */
.br-desktop { display: inline; }
@media (max-width: 760px) { .br-desktop { display: none; } }
/* E-mail anti-moissonnage : le « @ » ne figure jamais dans le HTML, il est
   injecté ici (\0040 = @) entre les deux moitiés de l'adresse. L'humain voit
   l'adresse complète ; un bot qui lit le HTML brut ne voit aucun « @ ». */
.mail__u::after { content: "\0040"; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 8px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }