/* =========================================================
   PRO TRADER — D.A. calquée sur protradersdct.nl
   Palette : #090806 · or #d4b97a · creme #f0ede4
   Typo    : Cinzel (titres) · Poppins (corps)
   ========================================================= */

:root{
  --black:#090806;
  --black-card:#111009;
  --black-soft:#171510;
  --cream:#f0ede4;
  --cream-dim:#b8b0a0;
  --gold:#d4b97a;
  --gold-light:#e8d49a;
  --gold-dark:#8a6030;
  --line:#2a2620;
  --grad-gold:linear-gradient(135deg,#e8d49a 0%,#d4b97a 50%,#8a6030 100%);
  --grad-gold-btn:linear-gradient(120deg,#e8d49a 0%,#d4b97a 55%,#9a7040 100%);
  --glow-gold:rgba(212,185,122,0.15);
  --glow-gold-strong:rgba(212,185,122,0.25);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
body{
  background-color:var(--black);
  color:var(--cream);
  font-family:Poppins,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- layout ---------- */
.padding-global{ padding-left:2.5rem; padding-right:2.5rem; }
.container-medium{ width:100%; max-width:82rem; margin:0 auto; }
@media (max-width:767px){ .padding-global{ padding-left:1.25rem; padding-right:1.25rem; } }

.gradient-line{
  height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--gold) 40%,var(--gold-light) 50%,var(--gold) 60%,transparent);
}

/* ---------- typographie ---------- */
.text-color-gradient{
  background-image:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

h1.hero-title{
  font-family:Cinzel,serif; font-weight:700;
  font-size:80px; line-height:1.05; letter-spacing:-1px;
  text-align:center;
}
.section-heading{
  font-family:Cinzel,serif; font-weight:700;
  font-size:52px; line-height:1.15; letter-spacing:-0.5px;
  text-align:center; text-transform:uppercase;
}
.step-eyebrow{
  text-transform:uppercase; letter-spacing:6px;
  font-size:12px; font-weight:700; color:var(--gold);
  margin-bottom:14px;
}
@media (max-width:991px){
  h1.hero-title{ font-size:56px; }
  .section-heading{ font-size:38px; }
}
@media (max-width:600px){
  h1.hero-title{ font-size:40px; line-height:1.1; }
  .section-heading{ font-size:28px; letter-spacing:0; }
}

/* ---------- navbar ---------- */
.navbar{
  position:sticky; top:0; width:100%; z-index:9999;
  background:rgba(9,8,6,0.92);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(212,185,122,0.12);
}
.navbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:13px 0;
}
.brand{
  font-family:Cinzel,serif; font-weight:700; font-size:21px;
  letter-spacing:2px; white-space:nowrap;
}
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-link{
  font-size:13px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(240,237,228,0.65);
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav-link:hover{ color:var(--cream); }
.nav-link.current{
  background-image:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  border-bottom:1px solid var(--gold-light);
}
@media (max-width:600px){
  .nav-links{ gap:20px; }
  .nav-link{ font-size:11px; }
  .brand{ font-size:16px; }
  .navbar .button.is-small{ padding:9px 16px; font-size:.8rem; }
}

/* ---------- boutons ---------- */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background-image:var(--grad-gold-btn);
  border:none; border-radius:100px;
  padding:15px 38px; font-size:1rem; font-weight:700;
  font-family:Poppins,sans-serif; letter-spacing:.2px;
  color:#0a0806; cursor:pointer;
  box-shadow:0 4px 24px -4px rgba(212,185,122,0.4);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.button:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 40px -6px rgba(212,185,122,0.55);
}
.button.is-small{ padding:10px 24px; font-size:.88rem; }
.button.is-full{ width:100%; }
.button.is-outline{
  background-image:none; background-color:transparent;
  border:1.5px solid var(--gold); color:var(--cream);
  box-shadow:none;
}
.button.is-outline:hover{
  background-image:var(--grad-gold-btn);
  color:#0a0806;
  box-shadow:0 8px 30px -8px rgba(212,185,122,0.4);
}

/* ---------- hero ---------- */
.section_hero{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; padding-top:160px; padding-bottom:60px;
}
.section_hero.is-short{ min-height:76vh; padding-top:130px; }

/* vidéo background */
.hero_video{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero_video video{ width:100%; height:100%; object-fit:cover; }

/* overlay sombre */
.hero_overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(9,8,6,0.55) 0%, rgba(9,8,6,0.4) 50%, rgba(9,8,6,0.75) 100%);
}

/* halos CSS purs — au-dessus de l'overlay pour être visibles */
.hero_halo{
  position:absolute; border-radius:50%; pointer-events:none; z-index:3;
}
.hero_halo.is-tr{
  width:1000px; height:1000px;
  top:-20%; right:-22%;
  background:radial-gradient(circle at center, rgba(212,185,122,0.28) 0%, rgba(212,185,122,0.10) 35%, transparent 65%);
  animation:haloBreath 8s ease-in-out infinite;
}
.hero_halo.is-bl{
  width:850px; height:850px;
  bottom:-28%; left:-18%;
  background:radial-gradient(circle at center, rgba(212,185,122,0.22) 0%, rgba(212,185,122,0.07) 35%, transparent 65%);
  animation:haloBreath 10s ease-in-out infinite reverse;
}
@keyframes haloBreath{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.08); opacity:1; }
}
@media (max-width:767px){
  .hero_halo.is-tr{ width:500px; height:500px; }
  .hero_halo.is-bl{ width:420px; height:420px; }
}

/* particules flottantes */
.hero-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.particle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(232,212,154,0.9) 0%, rgba(232,212,154,0) 65%);
  animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:.7; }
  100%{ transform:translateY(-120px) scale(.6); opacity:0; }
}

/* contenu hero */
.hero_wrapper{
  position:relative; z-index:10;
  display:flex; flex-direction:column; align-items:center;
  gap:16px; text-align:center;
}
.hero_sub{
  max-width:580px; font-size:1.12rem; line-height:1.75;
  color:rgba(240,237,228,0.82); margin-top:4px;
}
.hero_cta{ margin-top:24px; }
.hero_trust{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-top:48px;
}
.trust-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(212,185,122,0.3);
  border-radius:100px; background:rgba(9,8,6,0.7);
  padding:9px 20px; font-size:.88rem; font-weight:500;
  color:var(--cream);
}
.trust-chip svg{ color:var(--gold); flex:none; }

/* scroll arrow */
.hero_scroll{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:10; color:var(--gold); opacity:.75;
  animation:scrollBob 2.5s ease-in-out infinite;
}
@keyframes scrollBob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(9px); }
}

/* entrées hero */
.anim-load{ opacity:0; transform:translateY(22px); animation:heroIn .85s cubic-bezier(.22,1,.36,1) forwards; }
.anim-load.d1{ animation-delay:.18s; }
.anim-load.d2{ animation-delay:.34s; }
.anim-load.d3{ animation-delay:.5s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* ---------- marquee ---------- */
.marquee_wrapper{
  width:100%; background:var(--black-soft);
  padding:28px 0; overflow:hidden;
  border-top:1px solid rgba(212,185,122,0.1);
  border-bottom:1px solid rgba(212,185,122,0.1);
}
.marquee_container{
  display:flex; flex:none; align-items:center; gap:0;
  animation:marquee 32s linear infinite;
  white-space:nowrap;
}
.marquee-text{
  font-family:Cinzel,serif; font-size:22px; font-weight:600;
  text-transform:uppercase; letter-spacing:2px; padding:0 20px;
  color:rgba(240,237,228,0.55);
}
.marquee-text.text-color-gradient{ color:transparent; }
.marquee-sep{ color:var(--gold); font-size:16px; opacity:.7; flex:none; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:600px){ .marquee-text{ font-size:16px; } .marquee_wrapper{ padding:18px 0; } }

/* ---------- sections étapes ---------- */
.section_steps{ padding:120px 0 80px; position:relative; }
.section_steps::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:600px; height:400px; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse, rgba(212,185,122,0.07) 0%, transparent 70%);
}
.section-intro{
  text-align:center; max-width:600px; margin:20px auto 0;
  color:var(--cream-dim); font-size:1rem;
}
.steps-grid{
  display:flex; flex-direction:column; gap:64px; margin-top:80px;
}

/* carte bordure dégradée or */
.gradient-border{
  background:linear-gradient(135deg, rgba(212,185,122,0.5) 0%, rgba(232,212,154,0.25) 50%, rgba(138,96,48,0.4) 100%);
  border-radius:28px; padding:1.5px;
  box-shadow:0 0 60px -20px rgba(212,185,122,0.12);
  transition:box-shadow .4s;
}
.gradient-border:hover{
  box-shadow:0 0 80px -15px rgba(212,185,122,0.2);
}
.card-inner{
  background:var(--black-card);
  border-radius:26px; padding:48px 44px;
}
@media (max-width:600px){ .card-inner{ padding:30px 22px; } }

/* grille 2 colonnes */
.step-row{
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
}
.step-row.is-reverse .step-media{ order:-1; }
@media (max-width:900px){
  .step-row{ grid-template-columns:1fr; gap:36px; }
  .step-row.is-reverse .step-media{ order:0; }
}

.step-copy h2{
  font-family:Cinzel,serif; font-size:36px; font-weight:700;
  line-height:1.25; letter-spacing:-.3px; text-align:left;
  text-transform:none;
}
@media (max-width:600px){ .step-copy h2{ font-size:26px; } }
.step-copy .desc{ color:var(--cream-dim); margin-top:14px; font-size:.97rem; line-height:1.75; }

/* checklist */
.ck-list{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.ck-item{ display:flex; align-items:flex-start; gap:12px; font-size:.96rem; }
.ck-item svg{ flex:none; margin-top:3px; color:var(--gold); }
.ck-item strong{ color:var(--gold-light); }

/* notes */
.note{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid rgba(212,185,122,0.2); border-radius:14px;
  background:rgba(212,185,122,0.06); padding:14px 18px;
  font-size:.91rem; line-height:1.65; margin-top:22px;
}
.note svg{ flex:none; margin-top:2px; color:var(--gold); }
.note strong{ color:var(--gold-light); }
.note.is-alert{
  border-color:rgba(212,185,122,0.5);
  background:rgba(212,185,122,0.1);
}

/* badge étape */
.step-index{
  display:block; text-transform:uppercase; letter-spacing:5px;
  font-size:12px; font-weight:700; margin-bottom:10px; color:var(--gold);
}

/* chip temps */
.chip-time{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(212,185,122,0.25); border-radius:100px;
  color:var(--cream-dim); padding:7px 16px; font-size:.83rem; margin-top:22px;
}
.chip-time svg{ color:var(--gold); }

/* vidéos */
.step-media .gradient-border{ border-radius:24px; }
.vid-tag{
  display:inline-flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:3px;
  font-size:11.5px; font-weight:700; color:var(--gold);
  margin-bottom:14px;
}
.vid{ position:relative; aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:#000; }
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid-btn{
  position:absolute; inset:0; width:100%; height:100%;
  background:transparent; border:0; padding:0; cursor:pointer;
}
.vid-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid-shade{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(9,8,6,.85)); }
.vid-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center;
  background-image:var(--grad-gold-btn); color:#0a0806;
  box-shadow:0 8px 40px -8px rgba(212,185,122,0.6);
  transition:transform .3s, box-shadow .3s;
}
.vid-btn:hover .vid-play{
  transform:translate(-50%,-50%) scale(1.1);
  box-shadow:0 12px 50px -6px rgba(212,185,122,0.7);
}
.vid-label{
  position:absolute; bottom:16px; left:18px; right:18px;
  font-weight:600; font-size:.92rem; color:var(--cream); text-align:left;
}

/* code bonus */
.code-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:20px; }
.code-pill{
  display:inline-flex; align-items:center; gap:12px;
  border:1px dashed rgba(212,185,122,0.5); border-radius:12px;
  background:rgba(212,185,122,0.08); padding:11px 18px;
}
.code-pill code{
  font-family:Inter,monospace; font-weight:800; font-size:1.1rem;
  letter-spacing:3px; color:var(--gold-light);
}
.code-copy{
  display:inline-flex; align-items:center; gap:7px;
  border:1.5px solid var(--gold); border-radius:100px;
  background:transparent; color:var(--cream);
  padding:7px 16px; font-size:.83rem; font-weight:600; cursor:pointer;
  transition:all .25s;
}
.code-copy:hover,.code-copy.copied{
  background-image:var(--grad-gold-btn); color:#0a0806; border-color:transparent;
}

/* tiers bonus */
.tier-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
@media (max-width:600px){ .tier-grid{ grid-template-columns:1fr; } }
.tier{
  border:1px solid rgba(212,185,122,0.2); border-radius:20px;
  background:rgba(212,185,122,0.05); padding:24px; text-align:center;
}
.tier-badge{ text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:700; color:var(--gold); }
.tier-big{ font-family:Cinzel,serif; font-size:46px; font-weight:700; line-height:1.15; margin-top:8px; }
.tier-sub{ color:var(--cream-dim); font-size:.88rem; margin-top:4px; }

.bonus-callout{
  margin-top:24px; text-align:center; font-weight:700; font-size:1.05rem;
  border:1px solid rgba(212,185,122,0.3); border-radius:16px;
  background:rgba(212,185,122,0.08); padding:15px 18px;
}

/* carte finale */
.final-card{ text-align:center; padding:56px 40px; }
.final-card h2{ font-family:Cinzel,serif; font-size:38px; font-weight:700; }
@media (max-width:600px){ .final-card{ padding:36px 20px; } .final-card h2{ font-size:26px; } }

/* pager */
.pager{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:80px; }

/* ---------- footer ---------- */
.footer{ margin-top:100px; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:36px 0 44px;
  color:var(--cream-dim); font-size:.88rem;
}
.footer a{ color:var(--gold); }
.footer a:hover{ text-decoration:underline; }

/* ---------- reveals (visibles par défaut, animation au scroll) ---------- */
.reveal{ opacity:1; transform:none; }
.js-reveal{ opacity:0; transform:translateY(30px); transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.js-reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .anim-load,.reveal{ opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
  .marquee_container,.hero_scroll,.hero_halo,.particle{ animation:none !important; }
}