/* ============ BASE (thème WordPress) ============ */
:root {
  --bg: #0d0c0a;
  --bg-2: #171512;
  --ink: #f2ede4;
  --ink-2: #c4bdb0;
  --muted: #877f72;
  --line: rgba(242,237,228,0.12);
  --accent: oklch(0.68 0.07 150); /* sage — accent par défaut (surchargé par le Personnalisateur) */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body { cursor: none; }
@media (max-width: 900px), (pointer: coarse) { body { cursor: auto; } }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
::selection { background: var(--accent); color: #14110d; }

.container { max-width: 1560px; margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 56px); }

/* Typographic utilities */
.label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 12px;
}
.label::before { content: ''; width: 28px; height: 1px; background: var(--accent); }
.serif-em { font-style: italic; font-weight: 400; color: color-mix(in oklab, var(--accent) 75%, var(--ink)); }

/* Grain overlay */
.page-grain {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.56 0 0 0 0 0.5 0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Ambient background */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ambient .glow {
  position: absolute; width: 65vmax; height: 65vmax; border-radius: 50%;
  filter: blur(110px); opacity: 0.14; mix-blend-mode: screen; will-change: transform;
}
.ambient .g1 { background: radial-gradient(circle at 35% 35%, var(--accent), transparent 62%); top: -22%; left: -14%; animation: gDrift1 34s ease-in-out infinite alternate; }
.ambient .g2 { background: radial-gradient(circle at 60% 45%, oklch(0.52 0.06 250), transparent 62%); bottom: -28%; right: -16%; animation: gDrift2 42s ease-in-out infinite alternate; opacity: 0.1; }
@keyframes gDrift1 { to { transform: translate(16vw, 12vh) scale(1.15); } }
@keyframes gDrift2 { to { transform: translate(-14vw, -10vh) scale(0.92); } }

/* Conteneur de page (au-dessus de l'ambient/grain) */
#page { position: relative; z-index: 1; }

/* Custom cursor */
.cursor {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px;
  background: var(--ink); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px;
  border: 1px solid var(--ink); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s;
  mix-blend-mode: difference;
}
.cursor-ring.hover { width: 60px; height: 60px; }
@media (max-width: 900px), (pointer: coarse) { .cursor, .cursor-ring { display: none; } }

/* Reveal primitives */
.reveal {
  opacity: 0; transform: translateY(44px); filter: blur(5px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.mask-line { display: block; overflow: hidden; }
.mask-line > span { display: inline-block; transform: translateY(112%); transition: transform 1.2s var(--ease); }
.in .mask-line > span, .mask-line.in > span { transform: translateY(0); }

/* Menu plein écran — révélation en cascade des liens (piloté par .in via JS) */
.menu-overlay .menu-link .mask-line > span { transition-duration: 0.9s; }
.menu-overlay.open .menu-links .menu-link:nth-child(1) .mask-line > span { transition-delay: 0.25s; }
.menu-overlay.open .menu-links .menu-link:nth-child(2) .mask-line > span { transition-delay: 0.32s; }
.menu-overlay.open .menu-links .menu-link:nth-child(3) .mask-line > span { transition-delay: 0.39s; }
.menu-overlay.open .menu-links .menu-link:nth-child(4) .mask-line > span { transition-delay: 0.46s; }
.menu-overlay.open .menu-links .menu-link:nth-child(5) .mask-line > span { transition-delay: 0.53s; }

/* Barre d'admin WordPress : ne pas masquer la nav fixe */
body.admin-bar nav.top { top: 32px; }
@media (max-width: 782px) { body.admin-bar nav.top { top: 46px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mask-line > span { transform: none !important; }
}