/* ============================================================
   base.css - Pedromation v3
   Typo    : Fraunces (serif organique) + Space Grotesk (corps)
   Palette : Anthracite + Violet TFC + Orange + Crème
   ============================================================ */

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

:root {
  --violet:      #7C6EF5;
  --violet-dark: #5a4fd4;
  --violet-lt:   #a99ff8;
  --violet-glow: rgba(124,110,245,.18);
  --orange:      #F05A2A;
  --orange-lt:   #ff7a4d;
  --anthracite:  #1A1C22;
  --surface:     #21242D;
  --surface-lt:  #2C303C;
  --border:      rgba(255,255,255,.07);
  --border-v:    rgba(124,110,245,.22);
  --cream:       #F5F0E8;
  --muted:       #7a7f92;
  --white:       #ffffff;

  --font-display: 'Fraunces', serif;
  --font-body:    'Space Grotesk', sans-serif;

  --section-pad: 120px 72px;
  --max-w:       1240px;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--anthracite); color: var(--white); overflow-x: hidden; }

/* ── UTILITAIRES ─────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--violet-lt); display: inline-block; margin-bottom: 14px;
}
.rule { width: 36px; height: 3px; background: linear-gradient(90deg, var(--violet), var(--orange)); margin-bottom: 24px; border-radius: 2px; }

/* ── BOUTONS ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--violet); color: var(--white);
  padding: 14px 32px; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 600;
  font-family: var(--font-body); border-radius: 4px;
  text-decoration: none; border: none; cursor: pointer; transition: all .25s;
}
.btn-primary:hover { background: var(--violet-dark); box-shadow: 0 8px 32px rgba(124,110,245,.4); transform: translateY(-2px); }

.btn-orange {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: var(--white);
  padding: 14px 32px; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 600;
  font-family: var(--font-body); border-radius: 4px;
  text-decoration: none; border: none; cursor: pointer; transition: all .25s;
}
.btn-orange:hover { background: var(--orange-lt); box-shadow: 0 8px 32px rgba(240,90,42,.4); transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-v); color: var(--violet-lt);
  padding: 14px 32px; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 600;
  font-family: var(--font-body); border-radius: 4px;
  text-decoration: none; background: transparent; cursor: pointer; transition: all .25s;
}
.btn-ghost:hover { background: rgba(124,110,245,.1); border-color: var(--violet); color: var(--white); }

/* ── SLIDERS ────────────────────────────────────────────── */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--surface-lt); outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(124,110,245,.2), 0 4px 12px rgba(124,110,245,.4); cursor: pointer; transition: all .2s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 0 7px rgba(124,110,245,.2), 0 4px 20px rgba(124,110,245,.5); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--violet); cursor: pointer; }

/* ── ANIMATIONS ──────────────────────────────────────────── */
.fi { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.fi.on { opacity: 1; transform: translateY(0); }
.fi:nth-child(2) { transition-delay: .1s; }
.fi:nth-child(3) { transition-delay: .2s; }
.fi:nth-child(4) { transition-delay: .3s; }

@keyframes float   { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-10px);} }
@keyframes pulse   { 0%,100%{opacity:.3;}                50%{opacity:1;} }
@keyframes blink   { 0%,100%{opacity:1;}                 50%{opacity:.15;} }
@keyframes marquee { from{transform:translateX(0);}      to{transform:translateX(-50%);} }
@keyframes spin    { to{transform:rotate(360deg);} }