/* ═══════════════════════════════════════════════
   ODYSSÉE SPORTS — Design System
   Marque mère : bleu nautique + orange loisirs
   ═══════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  /* Brand */
  --navy:        #092052;
  --navy-mid:    #12326b;
  --navy-light:  #1a4299;
  --orange:      #FE6D1C;
  --orange-mid:  #e55a0e;
  --orange-dark: #b84408;

  /* Neutral */
  --white:   #ffffff;
  --snow:    #F8F9FC;
  --fog:     #EEF1F7;
  --mist:    #D5DCEB;
  --slate:   #8899BB;
  --ink:     #1a2540;
  --ink-mid: #2e3f63;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii */
  --r-sm:  .375rem;
  --r-md:  .75rem;
  --r-lg:  1.25rem;
  --r-xl:  2rem;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(9,32,82,.08), 0 1px 2px rgba(9,32,82,.05);
  --shadow-md:  0 4px 16px rgba(9,32,82,.12), 0 2px 6px rgba(9,32,82,.07);
  --shadow-lg:  0 12px 40px rgba(9,32,82,.16), 0 4px 12px rgba(9,32,82,.08);
  --shadow-xl:  0 24px 64px rgba(9,32,82,.22), 0 8px 24px rgba(9,32,82,.12);

  /* Transitions */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.4,0,1,1);
  --t-fast:   150ms;
  --t-base:   250ms;
  --t-slow:   400ms;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }

/* ── Container ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px)  { .container { padding-inline: var(--space-10); } }
@media (min-width: 1200px) { .container { padding-inline: var(--space-12); } }

/* ── Typography ── */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.02em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.02em;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--space-5);
}
.section-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.section-label--navy  { color: var(--navy); }
.section-label--navy::before  { background: var(--navy); }
.section-label--orange { color: var(--orange); }
.section-label--orange::before { background: var(--orange); }
.section-label--white  { color: rgba(255,255,255,.8); }
.section-label--white::before  { background: rgba(255,255,255,.8); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .875rem var(--space-8);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: all var(--t-base) var(--ease-out);
  cursor: pointer;
  border: 2px solid transparent;
}
.btn--navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn--navy:hover {
  background: var(--navy-mid);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.btn--orange {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(254,109,28,.35);
}
.btn--orange:hover {
  background: var(--orange-mid);
  box-shadow: 0 8px 28px rgba(254,109,28,.4);
  transform: translateY(-2px);
}
.btn--ghost-white {
  background: rgba(255,255,255,.12);
  color: var(--white);
  border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
}
.btn--ghost-white:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.7);
  transform: translateY(-2px);
}
.btn--ghost-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--mist);
}
.btn--ghost-navy:hover {
  background: var(--fog);
  border-color: var(--navy);
  transform: translateY(-2px);
}
.btn--lg { padding: 1.0625rem var(--space-10); font-size: 1rem; }
.btn--sm { padding: .625rem var(--space-6); font-size: .875rem; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--t-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ── Scroll progress ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--navy), var(--orange));
  z-index: 9999;
  transition: width .1s linear;
}