/* ═══════════════════════════════════════════════════════════════
   OH FRÈRE ! — Landing Page · Vintage Affiche Marseillaise
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:         #EDD898;
  --bg-2:       #E2CC80;
  --bg-alt:     #F4ECC0;
  --bg-card:    #1C2E4A;
  --bg-card-h:  #253C62;

  --bordeaux:   #7A1515;
  --bordeaux-l: #A82828;
  --bordeaux-d: #4E0C0C;
  --navy:       #1C2E4A;
  --navy-l:     #2A4266;
  --olive:      #4A5E1A;
  --olive-l:    #6A7E2A;

  --gold:       #C8A040;
  --gold-l:     #DDB844;
  --gold-d:     #8A6A18;
  --copper:     #C85020;
  --copper-l:   #E07040;

  --cream:      #F4EAC8;
  --cream-m:    #D4B878;
  --text:       #28180A;
  --text-m:     #6A4020;
  --text-s:     #9A7040;

  --border:     rgba(28,46,74,.16);
  --border-b:   rgba(28,46,74,.40);
  --border-g:   rgba(200,160,64,.35);

  --sh:         rgba(20,8,0,.28);
  --glow-b:     rgba(122,21,21,.30);
  --glow-n:     rgba(28,46,74,.35);

  --font-s:  'Playfair Display', Georgia, serif;
  --font-b:  'Crimson Pro', Georgia, serif;
  --font-st: 'Special Elite', 'Courier New', monospace;

  --r:    10px;
  --r-lg: 18px;
  --nh:   62px;
  --sp:   clamp(64px, 9vw, 128px);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-b);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{border:none;background:none;cursor:pointer}

/* ── Canvas + Grain ─────────────────────────────────────────── */
#particles-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.28;
  mix-blend-mode:multiply;
}
.grain{
  position:fixed;top:-50%;left:-50%;width:200%;height:200%;
  pointer-events:none;z-index:999;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .5s steps(2) infinite;
}
@keyframes grain{
  0%  {transform:translate(0,0)}
  25% {transform:translate(-2%,-3%)}
  50% {transform:translate(3%,1%)}
  75% {transform:translate(-1%,3%)}
  100%{transform:translate(2%,-2%)}
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-s);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:6px;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .22s,box-shadow .22s;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 55%);
  transform:translateX(-110%) skewX(-18deg);
  transition:transform .45s;
}
.btn:hover::after{transform:translateX(110%) skewX(-18deg)}

.btn--primary{
  background:linear-gradient(140deg,var(--bordeaux-d) 0%,var(--bordeaux) 45%,var(--bordeaux-l) 100%);
  color:var(--cream);padding:14px 28px;font-size:16px;
  border:1px solid rgba(220,180,100,.22);
  box-shadow:0 0 0 2px rgba(200,160,64,.22),0 6px 28px rgba(78,12,12,.5),0 2px 8px var(--sh);
}
.btn--primary:hover{
  transform:translateY(-3px) scale(1.025);
  box-shadow:0 0 0 2px rgba(200,160,64,.4),0 12px 44px rgba(78,12,12,.65),0 4px 14px var(--sh);
}
.btn--primary:active{transform:translateY(0) scale(.97)}

.btn--nav{
  background:linear-gradient(135deg,var(--bordeaux-d),var(--bordeaux));
  color:var(--cream);padding:8px 18px;font-size:13px;letter-spacing:.07em;
  box-shadow:0 2px 14px rgba(122,21,21,.35);
  border:1px solid rgba(200,160,64,.2);
}
.btn--nav:hover{transform:translateY(-1px);box-shadow:0 4px 22px rgba(122,21,21,.55)}
.btn--xl {padding:18px 38px;font-size:18px;border-radius:8px}
.btn--xxl{padding:22px 50px;font-size:20px;border-radius:10px}

/* ── Nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nh);z-index:200;
  transition:background .3s,box-shadow .3s,backdrop-filter .3s;
}
.nav.scrolled{
  background:rgba(237,216,152,.93);
  backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 var(--border),0 2px 14px rgba(20,8,0,.1);
}
.nav__inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  height:100%;display:flex;align-items:center;gap:28px;
}
.nav__logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-s);font-weight:700;font-size:19px;color:var(--navy);
  white-space:nowrap;
}
.nav__logo-ball{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%,#FFE080,#9A6000);
  box-shadow:0 0 14px rgba(200,160,64,.6);
  animation:spin-slow 10s linear infinite;
}
@keyframes spin-slow{to{transform:rotate(360deg)}}

.nav__links{
  display:flex;gap:28px;flex:1;justify-content:center;
}
.nav__links a{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-m);transition:color .2s;position:relative;
  font-family:var(--font-st);
}
.nav__links a::after{
  content:'';position:absolute;bottom:-3px;left:0;right:0;height:2px;
  background:var(--bordeaux);transform:scaleX(0);transition:transform .3s;
  transform-origin:left;
}
.nav__links a:hover{color:var(--bordeaux)}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__burger{
  display:none;flex-direction:column;gap:5px;padding:8px;
}
.nav__burger span{
  display:block;width:24px;height:2px;
  background:var(--navy);transition:transform .3s,opacity .3s;border-radius:2px;
}
.nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{
  min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding:calc(var(--nh) + 48px) 24px 72px;
  background:#EDD898;
}

.hero__bg{position:absolute;inset:0;z-index:0}

/* Sunburst affiche vintage */
.hero__terrain{
  position:absolute;inset:0;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 42%,
      rgba(200,160,64,.2) 0deg 9deg,
      rgba(220,185,90,.08) 9deg 18deg
    ),
    radial-gradient(ellipse 100% 65% at 50% 100%,rgba(180,100,20,.16) 0%,transparent 65%),
    linear-gradient(180deg,#F4ECC0 0%,#E4CC80 100%);
}
.hero__terrain::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:35%;
  background:linear-gradient(to top,rgba(140,80,20,.1),transparent);
}
.hero__glow-left{
  position:absolute;top:20%;left:-10%;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,160,64,.1) 0%,transparent 70%);
  filter:blur(60px);
}
.hero__glow-right{
  position:absolute;bottom:10%;right:-5%;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(122,21,21,.08) 0%,transparent 70%);
  filter:blur(40px);
}

/* Orbiting boules */
.hero__orbit-wrap{
  position:absolute;top:50%;right:-60px;
  transform:translateY(-50%);
  width:560px;height:560px;
  display:none;
}
@media(min-width:900px){.hero__orbit-wrap{display:block}}
.orbit{
  position:absolute;top:50%;left:50%;
  border:1px dashed rgba(28,46,74,.14);
  border-radius:50%;
  animation:orbit-rot linear infinite;
}
.orbit--1{width:180px;height:180px;margin:-90px 0 0 -90px;animation-duration:7s}
.orbit--2{width:310px;height:310px;margin:-155px 0 0 -155px;animation-duration:14s;animation-direction:reverse}
.orbit--3{width:450px;height:450px;margin:-225px 0 0 -225px;animation-duration:22s}
@keyframes orbit-rot{to{transform:rotate(360deg)}}

.orbit__ball{
  position:absolute;top:-12px;left:50%;
  transform:translateX(-50%);
  width:24px;height:24px;border-radius:50%;
}
.orbit__ball--gold{background:radial-gradient(circle at 35% 30%,#FFE080,#9A6800);box-shadow:0 0 16px rgba(200,160,64,.6)}
.orbit__ball--red {background:radial-gradient(circle at 35% 30%,#FF9090,#AA0000);box-shadow:0 0 16px rgba(200,20,0,.6)}
.orbit__ball--blue{background:radial-gradient(circle at 35% 30%,#90B8FF,#0820CC);box-shadow:0 0 16px rgba(20,60,200,.6)}
.orbit__cochonnet{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE060,#C87000);
  box-shadow:0 0 18px rgba(200,140,0,.8),0 0 6px rgba(200,140,0,1);
  animation:jack-pulse 2s ease-in-out infinite alternate;
}
@keyframes jack-pulse{
  from{box-shadow:0 0 14px rgba(200,140,0,.6),0 0 5px rgba(200,140,0,.8)}
  to  {box-shadow:0 0 28px rgba(200,140,0,.9),0 0 12px rgba(200,140,0,1)}
}

.hero__content{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr;gap:56px;align-items:center;
}
@media(min-width:900px){.hero__content{grid-template-columns:1fr 1fr}}

.hero__text{display:flex;flex-direction:column;gap:22px}

/* Stamp — style tampon vintage navy */
.hero__stamp{
  display:inline-flex;flex-direction:column;align-items:center;
  padding:10px 22px;width:fit-content;
  border:2px solid var(--navy);border-radius:4px;
  font-family:var(--font-st);
  transform:rotate(-1.8deg);
  background:rgba(28,46,74,.06);
}
.stamp__top{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--navy);opacity:.7}
.stamp__main{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);line-height:1.3}
.stamp__year{font-size:9px;letter-spacing:.2em;color:var(--navy);opacity:.5}

/* Title */
.hero__title{font-family:var(--font-s);font-weight:900;line-height:1.05}
.hero__title-main{
  display:block;
  font-size:clamp(52px,8.5vw,100px);
  background:linear-gradient(135deg,var(--navy) 0%,var(--bordeaux) 38%,var(--navy-l) 68%,var(--bordeaux-l) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:220%;
  animation:shimmer 5s ease-in-out infinite;
  filter:drop-shadow(0 2px 6px rgba(122,21,21,.12));
}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hero__title-sub{
  display:block;
  font-size:clamp(22px,4vw,46px);
  font-style:italic;color:var(--bordeaux);min-height:1.2em;
}
.cursor{
  display:inline-block;width:3px;height:.85em;
  background:var(--bordeaux);margin-left:2px;vertical-align:baseline;
  animation:blink .9s step-end infinite;
}
@keyframes blink{50%{opacity:0}}

.hero__desc{font-size:17px;color:var(--text-m);line-height:1.85}
.hero__cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero__cta-meta{font-size:12px;color:var(--text-s);font-family:var(--font-st);letter-spacing:.1em}

.hero__pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;
  background:rgba(28,46,74,.07);
  border:1px solid var(--border);border-radius:4px;
  font-size:13px;color:var(--text-m);
  font-family:var(--font-st);
  transition:background .25s,border-color .25s;
}
.pill:hover{background:rgba(28,46,74,.14);border-color:var(--border-b)}

/* Phone mockup */
.hero__phone-wrap{
  display:flex;justify-content:center;align-items:center;
  position:relative;
}
.hero__phone-glow{
  position:absolute;inset:-60px;
  background:radial-gradient(ellipse at center,rgba(28,46,74,.1) 0%,transparent 70%);
  animation:glow-breathe 3.5s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes glow-breathe{
  from{opacity:.5;transform:scale(.92)}
  to  {opacity:1;transform:scale(1.06)}
}
.phone{
  position:relative;z-index:2;
  animation:float 5s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-14px)}
}
.phone__frame{
  width:245px;
  background:#0A0608;
  border-radius:42px;
  border:7px solid #1C2E4A;
  box-shadow:
    0 0 0 1px #2A4060,
    0 0 0 3px #0C1420,
    0 50px 120px rgba(0,0,0,.45),
    0 0 40px rgba(28,46,74,.18);
  overflow:hidden;
  position:relative;
}
.phone__notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:88px;height:26px;
  background:#0A0608;border-radius:0 0 16px 16px;z-index:10;
}
.phone__screen{
  aspect-ratio:9/19.5;overflow:hidden;position:relative;
  background:#0A1020;
}
.phone__screen img{width:100%;height:100%;object-fit:cover;z-index:2;position:relative}
.phone__screen-placeholder{
  position:absolute;inset:0;z-index:1;overflow:hidden;
}
.placeholder__terrain{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(to bottom,transparent 0,transparent 29px,rgba(180,130,60,.08) 30px),
    linear-gradient(180deg,#1A2840 0%,#0E0A04 100%);
}
.placeholder__ball{
  position:absolute;border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.placeholder__ball--red{
  width:28px;height:28px;bottom:38%;left:35%;
  background:radial-gradient(circle at 35% 30%,#FF8888,#990000);
}
.placeholder__ball--blue{
  width:24px;height:24px;bottom:52%;left:55%;
  background:radial-gradient(circle at 35% 30%,#88AAFF,#0818AA);
}
.placeholder__ball.b2{bottom:58%;left:62%}
.placeholder__jack{
  width:14px;height:14px;border-radius:50%;
  position:absolute;bottom:65%;left:48%;
  background:radial-gradient(circle at 35% 30%,#FFE060,#C07000);
  box-shadow:0 0 12px rgba(200,140,0,.8);
}
.placeholder__aim{
  position:absolute;bottom:42%;left:42%;
  width:60px;height:60px;
  border:1.5px solid rgba(122,21,21,.55);
  border-radius:50%;animation:aim-pulse 1.4s ease-in-out infinite;
}
.placeholder__aim::after{
  content:'';position:absolute;inset:8px;
  border:1px solid rgba(160,40,40,.35);border-radius:50%;
}
@keyframes aim-pulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.05);opacity:1}}
.phone__chin{height:10px;background:#0A0608}

/* ── Scroll hint ────────────────────────────────────────────── */
.hero__scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text-s);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.hero__scroll-line{
  width:1px;height:44px;
  background:linear-gradient(to bottom,transparent,var(--navy));
  animation:scroll-drip 2s ease-in-out infinite;
}
@keyframes scroll-drip{
  0%  {transform:scaleY(0);transform-origin:top}
  50% {transform:scaleY(1);transform-origin:top}
  51% {transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ── Section head ───────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section-head{text-align:center;margin-bottom:clamp(44px,5.5vw,80px)}
.ornament{
  font-size:17px;letter-spacing:.35em;color:var(--bordeaux);margin-bottom:14px;
}
.section-head h2{
  font-family:var(--font-s);font-size:clamp(30px,5vw,56px);
  font-weight:700;color:var(--navy);margin-bottom:10px;line-height:1.1;
}
.section-head__sub{font-size:17px;font-style:italic;color:var(--text-m)}

/* ── Features ───────────────────────────────────────────────── */
.features{
  padding:var(--sp) 24px;position:relative;z-index:2;
  background:linear-gradient(180deg,#EDD898 0%,#E4CC80 100%);
}
/* Séparateur haut de section */
.features::before{
  content:'';display:block;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--bordeaux) 20%,var(--bordeaux) 80%,transparent);
  margin-bottom:0;
  position:absolute;top:0;left:10%;right:10%;
}

.features__grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;
}

/* Feature cards — navy dark, texte crème */
.feat-card{
  background:var(--bg-card);
  border:1px solid rgba(200,160,64,.22);
  border-radius:var(--r-lg);padding:32px 26px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
  transform-style:preserve-3d;
}
.feat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-d),transparent);
}
.feat-card:hover{
  border-color:rgba(200,160,64,.42);
  box-shadow:0 12px 44px rgba(20,8,0,.4),0 0 0 1px rgba(200,160,64,.14);
}
.feat-card--hero{
  border-color:rgba(122,21,21,.32);
  background:linear-gradient(140deg,var(--bg-card),#2A1828);
}
.feat-card--hero::before{background:linear-gradient(90deg,transparent,var(--bordeaux),transparent)}

.feat-card__glow{
  position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:220px;height:220px;border-radius:50%;
  filter:blur(55px);opacity:0;
  transition:opacity .5s;pointer-events:none;
}
.feat-card:hover .feat-card__glow{opacity:1}
.feat-card__glow--red   {background:rgba(200,30,0,.2)}
.feat-card__glow--orange{background:rgba(122,21,21,.22)}
.feat-card__glow--gold  {background:rgba(200,160,64,.18)}
.feat-card__glow--blue  {background:rgba(20,80,200,.18)}

.feat-icon{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.feat-icon--red   {background:rgba(200,30,0,.15);box-shadow:0 0 20px rgba(200,30,0,.2)}
.feat-icon--orange{background:rgba(122,21,21,.2);box-shadow:0 0 20px rgba(122,21,21,.3)}
.feat-icon--gold  {background:rgba(200,160,64,.14);box-shadow:0 0 20px rgba(200,160,64,.2)}
.feat-icon--blue  {background:rgba(20,80,200,.15);box-shadow:0 0 20px rgba(20,80,200,.2)}

.feat-card h3{
  font-family:var(--font-st);font-size:18px;letter-spacing:.16em;color:var(--gold-l);
}
.feat-card p{font-size:14.5px;color:var(--cream-m);line-height:1.72;flex:1}
.feat-card__badge{
  display:inline-block;width:fit-content;
  padding:4px 12px;
  border:1px solid rgba(200,160,64,.28);border-radius:4px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-family:var(--font-st);
}
.feat-card__badge--highlight{
  border-color:rgba(200,160,64,.5);color:var(--gold-l);
  background:rgba(200,160,64,.08);
}

/* ── Screenshots ────────────────────────────────────────────── */
.screenshots{
  padding:var(--sp) 0;position:relative;z-index:2;overflow:hidden;
  background:linear-gradient(180deg,#E4CC80 0%,#F0E0B0 100%);
}

.ss-wrap{position:relative;padding:24px 0 44px}
.ss-track{
  display:flex;gap:26px;
  overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x mandatory;
  padding:24px clamp(24px,6vw,120px);
  cursor:grab;
}
.ss-track:active{cursor:grabbing}
.ss-track::-webkit-scrollbar{display:none}

.ss-item{flex:0 0 auto;scroll-snap-align:center;display:flex;align-items:flex-end}
.ss-item--center{align-items:center}

.ss-phone{
  width:155px;
  background:#070401;border-radius:28px;
  border:5px solid #1C2E4A;
  box-shadow:0 20px 64px rgba(0,0,0,.42),0 0 0 1px #2A4060;
  overflow:hidden;position:relative;
  transition:transform .4s cubic-bezier(.22,.8,.3,1),box-shadow .4s;
}
.ss-phone:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 34px 88px rgba(0,0,0,.5),0 0 32px rgba(28,46,74,.2);
}
.ss-phone--featured{
  width:178px;border-color:var(--gold-d);
  box-shadow:0 28px 78px rgba(0,0,0,.45),0 0 32px rgba(200,160,64,.2);
}
.ss-phone--featured:hover{transform:translateY(-10px)}
.ss-phone img{
  width:100%;aspect-ratio:9/19.5;object-fit:cover;display:block;
}
.ss-phone.empty{
  aspect-ratio:9/19.5;
  background:linear-gradient(160deg,#1A2436 0%,#0C0A06 100%);
}
.ss-phone.empty::before{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-s);font-size:12px;font-style:italic;
  color:var(--cream-m);text-align:center;padding:16px;
}
.ss-label{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
  color:var(--cream-m);font-size:10.5px;text-align:center;
  padding:18px 8px 7px;
  font-family:var(--font-st);letter-spacing:.1em;
}

.ss-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border-b);
  background:rgba(237,216,152,.9);
  color:var(--navy);font-size:26px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);z-index:10;
  transition:background .2s,transform .2s;line-height:1;
  box-shadow:0 2px 12px var(--sh);
}
.ss-arrow:hover{background:rgba(28,46,74,.1);transform:translateY(-50%) scale(1.08)}
.ss-arrow--prev{left:12px}
.ss-arrow--next{right:12px}

.ss-dots{
  display:flex;justify-content:center;gap:9px;padding-top:18px;
}
.ss-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--text-s);transition:all .3s;cursor:pointer;border:none;
}
.ss-dot.active{background:var(--bordeaux);transform:scale(1.45)}

/* ── Steps ──────────────────────────────────────────────────── */
.steps{
  padding:var(--sp) 24px;position:relative;z-index:2;
 /* background:linear-gradient(180deg,#F0E0B0 0%,#EAD498 100%); */
 background-image: url("/img/bg_commentjouer.png"); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.steps__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column}
.step{
  display:grid;grid-template-columns:76px 1fr;gap:22px;
  align-items:start;padding:30px 0;
}
.step+.step{border-top:1px solid rgba(28,46,74,.12)}
.step__num{
  font-family:var(--font-s);font-size:52px;font-weight:900;
  color:var(--bordeaux);opacity:.42;line-height:1;
}
.step__body h3{
  font-family:var(--font-s);font-size:21px;color:var(--navy);margin-bottom:8px;
}
.step__body p{font-size:15.5px;color:var(--text-m);line-height:1.72}

/* ── Stats — bande navy ─────────────────────────────────────── */
.stats{
  padding:64px 24px;position:relative;z-index:2;
  background:var(--navy);
  border-top:3px solid var(--gold);
  border-bottom:3px solid var(--gold);
}
.stats::before{
  content:'';position:absolute;inset:0;
  background:repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(200,160,64,.04) 0deg 9deg,
    transparent 9deg 18deg
  );
  pointer-events:none;
}
.stats__grid{
  max-width:1000px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:32px;text-align:center;
  position:relative;z-index:1;
}
.stat__n{
  font-family:var(--font-s);font-size:clamp(52px,7vw,80px);font-weight:900;
  line-height:1;margin-bottom:8px;
  background:linear-gradient(135deg,var(--gold-l),var(--cream));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat__l{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-m);font-family:var(--font-st);
}

/* ── Download — affiche bordeaux ─────────────────────────────── */
.dl-section{
  padding:var(--sp) 24px;position:relative;z-index:2;
  background:linear-gradient(180deg,#EAD498 0%,#E4CC80 100%);
}
.dl-poster{
  max-width:820px;margin:0 auto;
  position:relative;
  background:linear-gradient(160deg,var(--bordeaux-d) 0%,var(--bordeaux) 52%,#8A1C1C 100%);
  border:1px solid rgba(200,160,64,.32);
  border-radius:12px;
  overflow:hidden;
}
.dl-poster::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 0%,
      rgba(200,160,64,.07) 0deg 9deg,
      transparent 9deg 18deg
    ),
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(200,160,64,.1) 0%,transparent 70%);
  pointer-events:none;
}
.dl-poster__corner{
  position:absolute;width:48px;height:48px;
  border-color:var(--gold);border-style:solid;
}
.dl-poster__corner--tl{top:16px;left:16px;border-width:2px 0 0 2px;border-radius:4px 0 0 0}
.dl-poster__corner--tr{top:16px;right:16px;border-width:2px 2px 0 0;border-radius:0 4px 0 0}
.dl-poster__corner--bl{bottom:16px;left:16px;border-width:0 0 2px 2px;border-radius:0 0 0 4px}
.dl-poster__corner--br{bottom:16px;right:16px;border-width:0 2px 2px 0;border-radius:0 0 4px 0}

.dl-poster__inner{
  position:relative;z-index:1;
  text-align:center;
  padding:clamp(52px,7vw,88px) clamp(28px,5vw,80px);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.dl-eyebrow{
  font-family:var(--font-st);font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-l);
}
.dl-title{
  font-family:var(--font-s);font-size:clamp(40px,7vw,78px);
  font-weight:900;line-height:1.1;color:var(--cream);
}
.dl-title em{
  font-style:italic;
  background:linear-gradient(135deg,var(--gold-l),#FFE090);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.dl-sub{font-size:16px;color:var(--cream-m);max-width:480px;line-height:1.7}
.dl-version{font-size:12px;color:var(--cream-m);font-family:var(--font-st);letter-spacing:.1em;margin-top:4px;opacity:.75}
.dl-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--cream-m);opacity:.6}

/* Bouton doré sur fond bordeaux */
.dl-poster .btn--primary{
  background:linear-gradient(140deg,#C89A30 0%,var(--gold-l) 50%,#F0D060 100%);
  color:var(--bordeaux-d);
  border:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 8px 32px rgba(0,0,0,.4);
}
.dl-poster .btn--primary:hover{
  box-shadow:0 0 0 2px rgba(255,255,255,.28),0 14px 44px rgba(0,0,0,.5);
}

/* ── Footer — navy ───────────────────────────────────────────── */
.footer{
  background:var(--navy);
  border-top:3px solid var(--gold);
  padding:52px 24px;text-align:center;
  position:relative;z-index:2;
}
.footer__inner{
  max-width:600px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.footer__logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-s);font-weight:700;font-size:22px;color:var(--gold-l);
}
.footer__ball{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%,#FFE080,#9A6000);
  box-shadow:0 0 12px rgba(200,160,64,.5);
}
.footer__tag{font-style:italic;font-size:16px;color:var(--cream-m)}
.footer__links{display:flex;gap:24px;font-size:13px;color:var(--cream-m)}
.footer__links a{transition:color .2s}
.footer__links a:hover{color:var(--gold-l)}
.footer__copy{font-size:11px;color:var(--cream-m);opacity:.45;font-family:var(--font-st);letter-spacing:.06em}

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Sparkle ────────────────────────────────────────────────── */
.sparkle{
  position:fixed;border-radius:50%;pointer-events:none;z-index:9998;
  animation:sparkle-out .75s forwards;
}
@keyframes sparkle-out{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:1}
  100%{transform:translate(-50%,-50%) scale(3);opacity:0}
}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:768px){
  .nav__links{
    display:none;position:absolute;top:var(--nh);left:0;right:0;
    flex-direction:column;gap:14px;
    background:rgba(237,216,152,.97);backdrop-filter:blur(14px);
    padding:16px 24px 24px;
    border-bottom:1px solid var(--border);
  }
  .nav__links.open{display:flex}
  .nav__burger{display:flex}
  .hero__phone-wrap{display:none}
  .ss-arrow{display:none}
  .step{grid-template-columns:58px 1fr}
  .step__num{font-size:38px}
}
@media(max-width:480px){
  .btn--xxl{padding:18px 32px;font-size:17px}
  .hero__cta-row{flex-direction:column;align-items:flex-start}
}