/* ============================================================================
   BASE — reset, document defaults, editorial typography, layout primitives,
   motion primitives (reveals), grain, custom cursor, a11y.
   ========================================================================== */
@layer base {
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 7rem;
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
    overflow-x: hidden;
  }

  /* --- Display headings (sans-serif premium, hiérarchie forte) ----------- */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 640;
    color: var(--ink-deep);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-heading);
    text-wrap: balance;
  }
  h3, h4 { font-weight: 600; letter-spacing: var(--tracking-snug); }
  /* Accent par défaut : même sans, simplement coloré bleu plus clair — discret.
     (Pas de serif italique généralisée ; voir BRAND.md.) */
  h1 em, h2 em, h3 em, .em-accent {
    font-style: normal;
    font-weight: inherit;
    color: var(--c-blue);
  }
  p { text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; }
  img, svg { display: block; max-width: 100%; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

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

  :focus-visible { outline: 2px solid var(--highlight); outline-offset: 4px; border-radius: 2px; }

  /* --- Layout primitives ------------------------------------------------- */
  .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
  .container--wide { max-width: var(--container-wide); }
  .section { padding-block: var(--section-y); position: relative; }
  .section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
  .section--line { border-top: 1px solid var(--line); }
  .bg-subtle { background: var(--bg-subtle); }
  .bg-ink { background: var(--accent); color: var(--on-accent); }

  /* Editorial measure for body copy */
  .measure { max-width: 56ch; }
  .measure-sm { max-width: 42ch; }

  /* --- Subtle film grain overlay (très léger, light par défaut) ---------- */
  body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.4;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  }
  [data-theme='dark'] body::after { mix-blend-mode: screen; opacity: 0.4; }

  /* --- Scroll progress bar (top) ----------------------------------------- */
  .scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--c-blue-deep), var(--highlight));
    z-index: var(--z-progress); pointer-events: none;
  }

  /* --- Ambient soft shapes (gradients bleus très subtils) ---------------- */
  .glow { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(10px); }
  .glow--gold { background: var(--glow-gold); }
  .glow--cool { background: var(--glow-cool); }
  .glow--soft { background: var(--glow-soft); }

  /* --- Accessibility ----------------------------------------------------- */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip-link { position: absolute; left: var(--space-4); top: -100%; z-index: 1000; background: var(--accent); color: var(--on-accent); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); transition: top var(--dur-fast); }
  .skip-link:focus { top: var(--space-4); }

  /* --- Scroll reveals (progressive enhancement) -------------------------- */
  /* Fade + rise. JS toggles .is-visible when the element enters the viewport. */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Line/word mask reveal — each [data-line] rises from under a clip. */
  .reveal-lines [data-line] { display: block; overflow: hidden; }
  .reveal-lines [data-line] > span { display: inline-block; transform: translateY(105%); transition: transform 0.9s var(--ease-out); transition-delay: calc(var(--line-i, 0) * 0.08s); }
  .reveal-lines.is-visible [data-line] > span { transform: none; }

  /* Generic stagger children */
  .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .stagger.is-visible > * { opacity: 1; transform: none; }
  .stagger.is-visible > *:nth-child(2) { transition-delay: 0.07s; }
  .stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
  .stagger.is-visible > *:nth-child(4) { transition-delay: 0.21s; }
  .stagger.is-visible > *:nth-child(5) { transition-delay: 0.28s; }
  .stagger.is-visible > *:nth-child(6) { transition-delay: 0.35s; }

  /* --- Custom cursor (desktop, fine pointer, JS-enabled only) ------------ */
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; border-radius: 50%; mix-blend-mode: difference; will-change: transform; }
  .cursor-dot { width: 7px; height: 7px; background: #fff; margin: -3.5px 0 0 -3.5px; }
  .cursor-ring { width: 38px; height: 38px; border: 1px solid #fff; margin: -19px 0 0 -19px; transition: width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), opacity 0.25s; }
  body.cursor-on.is-hovering .cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  @media (pointer: fine) { body.cursor-on { cursor: none; } body.cursor-on a, body.cursor-on button { cursor: none; } }
  @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .stagger > *, .reveal-lines [data-line] > span { opacity: 1 !important; transform: none !important; transition: none !important; }
    body::after { display: none; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }
}