/* ════════════════════════════════════════════════════════════════════
   33 LAB — BASE
   Reset moderne + typographie + layout primitives.
   Charger après tokens.css.
   ════════════════════════════════════════════════════════════════════ */

/* ─── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--amber-on-dark); }

ul, ol { list-style: none; }

/* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-weight: 600; }

p { color: var(--text-muted); line-height: var(--leading-relaxed); }

strong, b { font-weight: 600; color: var(--text); }
em, i { font-style: normal; color: var(--amber-on-dark); }

::selection { background: var(--amber); color: var(--text-on-amber); }

/* ─── 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;
}

/* ─── PAGE LOADER ───────────────────────────────────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: var(--bg);
  pointer-events: all;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.6s;
}
.page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 50% 30%, rgba(196,129,61,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 70%, rgba(232,201,160,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.page-loader-logo {
  position: relative;
  width: clamp(180px, 32vw, 320px);
  height: clamp(180px, 32vw, 320px);
  animation: loaderPulse 1.4s var(--ease-out) infinite;
}
.page-loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-loader-bar {
  position: relative;
  width: clamp(160px, 24vw, 220px);
  height: 2px;
  background: rgba(232, 201, 160, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.page-loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent 0%, var(--amber) 50%, transparent 100%);
  animation: loaderSlide 1.4s var(--ease-out) infinite;
}
@keyframes loaderPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}
@keyframes loaderSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(380%); }
}
.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .page-loader-logo,
  .page-loader-bar::after { animation: none; }
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--space-4);
  z-index: 10000;
  padding: var(--space-3) var(--space-5);
  background: var(--amber);
  color: var(--text-on-amber);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-4);
  color: var(--text-on-amber);
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--amber-on-dark);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── LAYOUT PRIMITIVES ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

.section { padding-block: var(--space-9); }
.section-sm { padding-block: var(--space-7); }
.section-lg { padding-block: var(--space-10); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

main { min-height: 60vh; }

/* ─── REVEAL ANIMATIONS (signature visuelle préservée) ──────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-snap), transform 0.8s var(--ease-snap);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* ─── ASPECT RATIOS ─────────────────────────────────────────────── */
.r-16-9 { aspect-ratio: 16 / 9; }
.r-4-3  { aspect-ratio: 4 / 3; }
.r-3-4  { aspect-ratio: 3 / 4; }
.r-1-1, .r-sq { aspect-ratio: 1 / 1; }
.r-4-5  { aspect-ratio: 4 / 5; }
.r-21-9 { aspect-ratio: 21 / 9; }
.r-2-3  { aspect-ratio: 2 / 3; }