/* ==========================================================================
   Mantara V3 — base : réinitialisation, papier millimétré, typographie, utilitaires
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body, .grid-paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:
    calc(var(--cell) * 5) calc(var(--cell) * 5),
    calc(var(--cell) * 5) calc(var(--cell) * 5),
    var(--cell) var(--cell),
    var(--cell) var(--cell);
  background-position: -1px -1px;
}
body {
  margin: 0;
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.grid-night {
  background-color: var(--night);
  background-image:
    radial-gradient(70% 70% at 70% 50%, rgba(13, 51, 66, 0.65), transparent 70%),
    linear-gradient(var(--night-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--night-grid) 1px, transparent 1px);
  background-size: 100% 100%, var(--cell) var(--cell), var(--cell) var(--cell);
  background-position: 0 0, -1px -1px, -1px -1px;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 3px; }
.night :focus-visible, .on-ink :focus-visible { outline-color: var(--glint); }
::selection { background: var(--signal); color: var(--white); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-split] { display: block; } /* partie découpée par SplitText, à côté de sa copie .sr-only (voir splitReadable, core.js) */
/* Cible d'une ancre (lien d'évitement, sommaire) : elle reçoit le focus pour la tabulation suivante, sans cadre */
[tabindex="-1"]:focus:not(a, button, input, select, textarea) { outline: none; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--ink); color: var(--white); font-weight: 600; transition: top 0.3s; }
.skip-link:focus { top: 16px; }

.anim .js-hide { visibility: hidden; animation: reveal-safety 0s 6s forwards; }
@keyframes reveal-safety { to { visibility: visible; } }
.rm *, .rm *::before, .rm *::after { animation: none !important; transition-duration: 0.01ms !important; }

/* ---------- Typographie ---------- */
.display, .h2, .h3 { margin: 0; font-family: var(--f-sans); }
.display { font-weight: 650; font-size: var(--t-display); line-height: 0.94; letter-spacing: -0.035em; }
.h2 { font-weight: 600; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.03em; }
.h3 { font-weight: 600; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }
.light { font-weight: 320; }
.lead { margin: 0; font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); }
.label { font: 500 var(--t-label)/1.35 var(--f-mono); letter-spacing: 0.01em; color: var(--ink-2); }
.ln-mask, .line-mask { padding-block: 0.08em 0.16em; margin-block: -0.08em -0.16em; }

.night { color: var(--on-night); }
.night .label { color: var(--on-night-2); }
.night .lead { color: var(--on-night-2); }

/* ---------- Coins de repérage ---------- */
.ticks { position: relative; }
.ticks::after {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  --t: var(--ink);
  background:
    linear-gradient(var(--t), var(--t)) top left / 11px 1px, linear-gradient(var(--t), var(--t)) top left / 1px 11px,
    linear-gradient(var(--t), var(--t)) top right / 11px 1px, linear-gradient(var(--t), var(--t)) top right / 1px 11px,
    linear-gradient(var(--t), var(--t)) bottom left / 11px 1px, linear-gradient(var(--t), var(--t)) bottom left / 1px 11px,
    linear-gradient(var(--t), var(--t)) bottom right / 11px 1px, linear-gradient(var(--t), var(--t)) bottom right / 1px 11px;
  background-repeat: no-repeat;
  transition: inset 0.6s var(--ease-snap);
}