/* ==========================================================
   WIDE VISION — base.css
   Reset · Typographie · Grain · Curseur · Utilitaires layout
   ========================================================== */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  background-color: var(--bg);
  color: var(--offwhite);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: none; /* curseur custom actif sur desktop */
}

@media (hover: none) {
  body { cursor: auto }
}

img, video, svg { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
ul, ol { list-style: none }
button { cursor: none; border: none; background: none; font-family: inherit; color: inherit }
input, select, textarea { font-family: inherit; font-size: inherit }

/* ── Accessibilité ──────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

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

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb {
  background: var(--gold-border-hi);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold) }

/* ── Sélection ──────────────────────────────────────────── */
::selection {
  background: rgba(201, 168, 76, 0.22);
  color: var(--offwhite);
}

/* ── Grain overlay ──────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.028;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-move 8s steps(10) infinite;
}

@keyframes grain-move {
  0%  { transform: translate(0, 0) }
  10% { transform: translate(-2%, -3%) }
  20% { transform: translate(3%, 2%) }
  30% { transform: translate(-1%, 4%) }
  40% { transform: translate(4%, -2%) }
  50% { transform: translate(-3%, 1%) }
  60% { transform: translate(2%, -4%) }
  70% { transform: translate(-4%, 3%) }
  80% { transform: translate(1%, -1%) }
  90% { transform: translate(3%, 4%) }
  100%{ transform: translate(0, 0) }
}

/* ── Curseur custom ─────────────────────────────────────── */
.c-dot {
  position: fixed;
  top: 0; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: opacity 200ms, width 200ms var(--ease-spring), height 200ms var(--ease-spring);
  will-change: transform;
}

.c-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold-border-hi);
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition:
    width   300ms var(--ease-spring),
    height  300ms var(--ease-spring),
    border-color 200ms,
    background   200ms;
  will-change: transform;
}

.c-ring.is-hover {
  width: 50px; height: 50px;
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.06);
}

.c-ring.is-click {
  width: 24px; height: 24px;
  background: rgba(201, 168, 76, 0.15);
}

@media (hover: none) {
  .c-dot, .c-ring { display: none }
}

/* ── Container ──────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ── Section base ───────────────────────────────────────── */
.section {
  padding: var(--sp-32) 0;
  position: relative;
}

.section--alt {
  background: var(--bg-2);
}

/* ── Section header ─────────────────────────────────────── */
.s-head {
  text-align: center;
  margin-bottom: var(--sp-16);
}

/* Label eyebrow style ReachFlow */
.s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-full);
  background: var(--gold-dim);
}

.s-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1)   }
  50%       { opacity: 0.4; transform: scale(0.7) }
}

/* Titre de section */
.s-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  letter-spacing: -0.015em;
}
.s-title em { font-style: italic; color: var(--gold) }

/* Sous-titre */
.s-sub {
  margin-top: var(--sp-4);
  color: var(--text-mid);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Dividers ───────────────────────────────────────────── */
.gold-line {
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: var(--radius-full);
  margin: var(--sp-6) auto;
}

.h-divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

/* ── Page hero (pages intérieures) ─────────────────────── */
.page-hero {
  padding-top: calc(var(--nav-h) + var(--sp-24));
  padding-bottom: var(--sp-24);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(201,168,76,.09) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-6);
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-full);
  background: var(--gold-dim);
}

.page-hero-title {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: var(--sp-6);
}
.page-hero-title em { font-style: italic; color: var(--gold) }

.page-hero-sub {
  font-size: 1.1rem;
  color: var(--text-mid);
  max-width: 560px;
  margin: 0 auto var(--sp-10);
  line-height: 1.75;
}

/* ── Utilitaires ────────────────────────────────────────── */
.text-gold  { color: var(--gold) }
.text-mid   { color: var(--text-mid) }
.text-hi    { color: var(--text-hi) }
.text-mono  { font-family: var(--f-mono) }
.text-center{ text-align: center }

.flex       { display: flex }
.flex-center{ display: flex; align-items: center; justify-content: center }
.gap-4      { gap: var(--sp-4) }
.gap-6      { gap: var(--sp-6) }