/* ════════════════════════════════════════════════════════════════════
   Win'Event — base.css
   Reset moderne, polices auto-hébergées, styles d'éléments de base.
   Les .woff2 se placent dans assets/fonts/ (voir README « Polices »).
   ════════════════════════════════════════════════════════════════════ */

/* ── Polices (font-display: swap, RGPD-friendly, aucun CDN) ───────── */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-600-italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Parisienne";
  src: url("../fonts/parisienne-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html:focus-within { scroll-behavior: smooth; }
  body {
    min-height: 100svh;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  :where(h1, h2, h3, h4) { text-wrap: balance; }
  p { text-wrap: pretty; }
  hr { border: none; border-top: 1px solid var(--line-chalk); }
}

@layer base {
  body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    background-color: var(--chalk);
    color: var(--graphite);
    overflow-x: hidden;
  }

  /* Titres — Cormorant, généreux */
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
  }
  h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }

  /* Corps */
  p { font-size: var(--fs-body); }
  strong, b { font-weight: 500; }
  em { font-style: italic; }

  /* Liens de contenu : soulignement au trait doré */
  a:not([class]) {
    color: var(--bronze);
    text-decoration: underline;
    text-decoration-color: rgba(138,107,31,.4);
    text-underline-offset: 0.18em;
    transition: text-decoration-color var(--dur-fast) var(--ease-out);
  }
  a:not([class]):hover { text-decoration-color: var(--gold); }

  /* ── Focus visible : anneau doré, jamais retiré sans remplacement ── */
  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--gold); color: var(--ink); }

  /* ── Skip link ─────────────────────────────────────────────────── */
  .skip-link {
    position: fixed;
    top: 0; left: 50%;
    transform: translate(-50%, -120%);
    z-index: var(--z-skip);
    padding: 0.7rem 1.2rem;
    background: var(--ink);
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 0 0 var(--r-md) var(--r-md);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    font-size: var(--fs-small);
    transition: transform var(--dur-mid) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translate(-50%, 0); }

  /* Cache-image de secours si une police tarde : conserve le layout */
  .no-js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── prefers-reduced-motion : tout neutralisé, contenu visible ────── */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}