@import url('https://fonts.googleapis.com/css2?family=Phudu:wght@400..900&family=Unbounded:wght@200..900&display=swap');

:root{
  --anthracite: #1a1a23;
  --gris: #2e2e44;
  --lime: #cdff68;
  --violet: #723ac9;
  --violet-deep: #4d2694;
  --lavande: #cca9ff;
  --aqua: #66efbb;
  --blanc: #f6f5f1;
  --muted: #9d9db0;
  --muted-on-violet: #d8c4f7;

  --font-display: "Phudu", sans-serif;
  --font-label: "Unbounded", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max-w: 1320px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--anthracite);
  color: var(--blanc);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
.wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
section{ position: relative; }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(26,26,35,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height: 82px; }
.nav-logo img{ height: 22px; width: auto; }
.nav-links{
  display:flex; align-items:center; gap: 36px;
  font-family: var(--font-label); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.nav-links a{ color: var(--muted); transition: color .2s; }
.nav-links a:hover, .nav-links a.active{ color: var(--blanc); }
.btn{
  font-family: var(--font-label); font-size: 12.5px; letter-spacing:.04em;
  text-transform: uppercase; padding: 13px 26px; border-radius: 999px;
  display:inline-block; border: 1px solid transparent; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background: var(--lime); color: var(--anthracite);
  font-family: var(--font-display); font-weight: 700; text-transform: none; font-size: 15px; letter-spacing: 0;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(205,255,104,.55); }
.btn-ghost{ border-color: rgba(255,255,255,.18); color: var(--blanc); }
.btn-ghost:hover{ border-color: var(--lime); color: var(--lime); }

/* ---------- HERO (full-bleed, Macadam-style split headline + mockup) ---------- */
.hero{
  padding: 100px 0 110px;
  min-height: 640px;
  overflow: hidden;
  position: relative;
  background-image:
    linear-gradient(100deg, rgba(26,26,35,0.97) 0%, rgba(26,26,35,0.88) 32%, rgba(26,26,35,0.55) 60%, rgba(26,26,35,0.25) 100%),
    url('assets/hero-photo.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.hero .wrap{ width: 100%; }
.hero-inner{
  display:grid; grid-template-columns: 1fr; gap: 40px; align-items: end;
  position: relative;
}
.hero-copy{ padding-bottom: 90px; max-width: 620px; }
.eyebrow{
  font-family: var(--font-label); font-size: 12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--lavande); display:inline-flex; align-items:center; gap:10px; margin-bottom: 24px;
}
h1.display{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(50px, 7vw, 108px); line-height: .94; letter-spacing: -0.01em;
  margin-bottom: 30px;
}
h1.display .accent{ color: var(--lime); }
h1.display .outline{
  -webkit-text-stroke: 1.5px var(--blanc);
  color: transparent;
}
.lead{ font-size: 19px; color: var(--muted); max-width: 46ch; margin-bottom: 36px; }
.hero-ctas{ display:flex; gap: 14px; flex-wrap: wrap; }
.store-badge{
  border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 11px 20px;
  font-family: var(--font-label); font-size: 11.5px; letter-spacing:.03em;
  display:flex; flex-direction:column; min-width: 148px; transition: background .2s;
}
.store-badge small{ opacity:.65; font-size: 9.5px; text-transform: uppercase; }
.store-badge span{ font-size: 14px; margin-top: 2px; }
.store-badge:hover{ background: rgba(255,255,255,.08); }

/* phone mockup with real screen asset */
.hero-phone{
  position: relative;
  justify-self: end;
}
.hero-phone::before{
  content: "";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(114,58,201,.35), transparent 68%);
  filter: blur(30px);
  z-index: -1;
}
.phone-frame{
  width: 100%; max-width: 340px; aspect-ratio: 375/812;
  border-radius: 42px; overflow: hidden;
  border: 6px solid #0d0d13;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  background: var(--anthracite);
}
.phone-frame img{ width:100%; height:100%; object-fit: cover; }
.device-screen-svg{ flex: 1; width: 100%; height: 100%; }
.device-screen-svg svg{ width: 100%; height: 100%; display: block; }
.phone-frame-svg{ width: 100%; height: 100%; }
.phone-frame-svg svg{ width: 100%; height: 100%; display: block; }
.hero-blob{
  position:absolute; z-index:-1; border-radius: 50%;
  background: radial-gradient(circle, rgba(114,58,201,.55), transparent 70%);
  width: 520px; height: 520px; right: -120px; top: -80px; filter: blur(10px);
}
.hero-icon-ghost{
  position:absolute; width: 380px; opacity: .06; right: 60%; top: -30px; pointer-events:none;
}

/* ---------- Marquee ticker (Macadam "Aller, dehors!" mid break) ---------- */
.marquee{
  background: var(--lime); color: var(--anthracite);
  padding: 22px 0; overflow: hidden; white-space: nowrap;
  transform: rotate(-1.4deg); margin: 70px 0 0;
}
.marquee-track{ display:inline-flex; gap: 40px; animation: scroll 26s linear infinite; }
.marquee span{
  font-family: var(--font-display); font-size: 26px; text-transform: uppercase;
  display:inline-flex; align-items:center; gap: 40px; letter-spacing: .01em;
}
.marquee span::after{ content: "◆"; font-size: 14px; opacity: .5; margin-left: 40px; }
@keyframes scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Stat band ---------- */
.stats{ padding: 110px 0; background: var(--lime); }
.stats-row{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 22px;
}
.stat{
  background: transparent;
  border: 1.5px solid rgba(26,26,35,.18);
  border-radius: 20px;
  padding: 42px 28px;
  display:flex; flex-direction: column; justify-content: flex-end;
  min-height: 230px;
}
.stat .num{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 5vw, 80px); line-height: .85; letter-spacing: -0.01em;
  color: var(--violet);
}
.stat .label{
  font-family: var(--font-label); font-size: 12px; text-transform:uppercase; letter-spacing:.06em;
  margin-top: 14px; max-width: 17ch;
  color: var(--anthracite);
}

/* ---------- Store buttons (badge blanc façon App Store / Google Play) ---------- */
.store-btn{
  background: #fff; color: #111;
  border-radius: 14px; padding: 10px 18px 10px 14px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .2s ease;
}
.store-btn:hover{ transform: translateY(-2px); }
.store-btn svg{ width: 26px; height: 26px; flex-shrink: 0; }
.store-btn .txt{ display:flex; flex-direction: column; line-height: 1.15; }
.store-btn .txt small{ font-size: 10px; color: #555; }
.store-btn .txt span{ font-family: var(--font-label); font-size: 14.5px; font-weight: 600; }
.gplay-tri{
  width: 24px; height: 24px; border-radius: 5px;
  background: conic-gradient(from 45deg, #00d4ff 0deg 90deg, #00e676 90deg 180deg, #ffcc00 180deg 270deg, #ff3d57 270deg 360deg);
  clip-path: polygon(20% 5%, 20% 95%, 85% 50%);
}

.qr-badge{
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 16px; padding: 10px 18px 10px 10px;
  margin-top: 18px;
}
.qr-badge img{ width: 62px; height: 62px; border-radius: 6px; }
.qr-badge span{
  font-family: var(--font-label); font-size: 12.5px; color: #222; line-height: 1.35;
  max-width: 14ch;
}


.device{
  position: relative;
  width: 320px; max-width: 100%; aspect-ratio: 375/812;
  background: #0b0b10;
  border-radius: 54px;
  padding: 14px;
  box-shadow: 0 45px 100px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07);
}
.device::before{
  content:""; position:absolute; top: 28px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 26px; background: #000; border-radius: 20px; z-index: 5;
}
.device-screen{
  position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden;
  background: linear-gradient(165deg, #2c1f4a 0%, #1a1a23 55%, #0d0d13 100%);
  display: flex; flex-direction: column;
}
.device-statusbar{
  display:flex; justify-content: space-between; align-items:center;
  padding: 18px 26px 0; font-size: 13px; font-weight: 700; color: #fff;
}
.device-status-icons{ display:flex; align-items:center; gap: 5px; opacity: .9; }
.device-status-icons .batt{ width: 20px; height: 10px; border: 1.4px solid #fff; border-radius: 3px; position:relative; }
.device-status-icons .batt::after{ content:""; position:absolute; right:-3px; top:2px; width:2px; height:5px; background:#fff; border-radius:1px; }
.device-status-icons .batt::before{ content:""; position:absolute; inset: 1.5px; background:#fff; border-radius:1px; width: 70%; }
.device-content{ padding: 60px 26px 0; flex: 1; }
.device-eyebrow{
  font-family: var(--font-label); font-size: 11.5px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--lime); margin-bottom: 16px;
}
.device-headline{
  font-family: var(--font-display); font-size: clamp(30px,3.4vw,38px); line-height: 1.06; font-weight: 600; color: #fff;
}
.device-headline .lime{ color: var(--lime); }
.device-buttons{ margin-top: 46px; display:flex; flex-direction: column; gap: 14px; }
.device-btn{
  border-radius: 999px; padding: 16px 20px; text-align:center;
  font-family: var(--font-label); font-size: 12.5px; text-transform: uppercase; letter-spacing:.04em; font-weight: 700;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.device-btn.spot{ background: var(--lime); color: var(--anthracite); }
.device-btn.impro{ background: var(--violet); color: #fff; }
.device-home{
  position:absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 5px; background: rgba(255,255,255,.5); border-radius: 3px;
}

/* ---------- Transition line (plein lime, gros texte violet) ---------- */
.transition-line{
  background: var(--lime); padding: 110px 0; text-align: center;
  min-height: 40vh; display: flex; align-items: center; justify-content: center;
}
.transition-line p{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 6.5vw, 84px); line-height: 1.16; color: var(--violet);
  max-width: 1040px; margin: 0 auto;
}


.no-natch{ padding: 100px 0; background: linear-gradient(150deg, var(--violet), var(--violet-deep)); }
.no-natch-head{ max-width: 720px; margin: 0 0 56px; }
.no-natch-head h2{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px,3.6vw,46px); line-height: 1.05; color: var(--lime);
}
.timeline-h{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  position: relative;
}
.timeline-h::before{
  content: ""; position: absolute; top: 14px; left: 0; right: 0;
  border-top: 2px dotted rgba(246,245,241,0.4);
  z-index: 0;
}
.tlh-step{
  position: relative; padding-right: 28px; z-index: 1;
}
.tlh-time{
  position: relative; z-index: 2;
  display: inline-block; background: var(--anthracite); color: var(--blanc);
  font-family: var(--font-label); font-size: 14px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; margin-bottom: 18px;
}
.tlh-step p{ font-size: 15px; color: var(--blanc); line-height: 1.5; }
.tlh-step p b{ color: var(--lime); }

@media (max-width: 980px){
  .timeline-h{ grid-template-columns: 1fr; gap: 32px; }
  .timeline-h::before{ display: none; }
}


/* ---------- Transition line between sections ---------- */
.feature-row{
  padding: 110px 0;
}
.feature-row:nth-child(odd){ background: var(--gris); }
.feature-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center;
}
.feature-row.reverse .feature-grid{ direction: rtl; }
.feature-row.reverse .feature-grid > *{ direction: ltr; }
.feature-tag{
  font-family: var(--font-label); font-size: 11.5px; text-transform:uppercase; letter-spacing:.1em;
  margin-bottom: 18px; color: var(--lavande);
}
.feature-grid h2{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px,3.6vw,48px); line-height: 1.05; margin-bottom: 22px;
  color: var(--blanc);
}
.feature-grid p{ color: var(--muted); font-size: 16.5px; max-width: 46ch; margin-bottom: 26px; }
.feature-list{ list-style:none; }
.feature-list li{
  display:flex; align-items: flex-start; gap: 14px; padding: 10px 0; font-size: 17px; color: var(--blanc);
}
.feature-list li::before{
  content: "→";
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(205,255,104,.12);
  border: 1.5px solid var(--lime);
  color: var(--lime);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  margin-top: 1px;
}
.feature-visual{
  display:flex; justify-content:center;
  position: relative;
}
.feature-visual::before{
  content: "";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(114,58,201,.65), transparent 68%);
  filter: blur(30px);
  z-index: 0;
}
.feature-visual .phone-frame{ max-width: 300px; box-shadow: 0 30px 60px -16px rgba(0,0,0,.5); position: relative; z-index: 1; }

/* ---------- Modes (Calé / Impro) big split ---------- */
.modes{ padding: 0; display:grid; grid-template-columns: 1fr 1fr; }
.mode-panel{
  padding: 110px 56px; position: relative; overflow:hidden;
}
.mode-panel.plan{ background: var(--anthracite); }
.mode-panel.impro{ background: linear-gradient(160deg, var(--violet), var(--violet-deep)); }
.mode-panel .eyebrow{ margin-bottom: 20px; }
.mode-panel.plan .eyebrow{ color: var(--aqua); }
.mode-panel.impro .eyebrow{ color: var(--lime); }
.mode-panel h3{
  font-family: var(--font-display); font-weight:600; font-size: clamp(30px,3.4vw,44px);
  margin-bottom: 20px; line-height: 1.05;
}
.mode-panel p{ font-size: 16px; max-width: 38ch; }
.mode-panel.plan p{ color: var(--muted); }
.mode-panel.impro p{ color: var(--muted-on-violet); }
.mode-panel .ghost-mark{
  position:absolute; width: 300px; opacity: .08; bottom: -40px; right: -40px; pointer-events:none;
}

/* ---------- Testimonials (Macadam-style quote cards) ---------- */
.testi{ padding: 110px 0; background: var(--gris); }
.testi-head{ max-width: 640px; margin-bottom: 56px; }
.testi-head .eyebrow{ color: var(--aqua); }
.testi-head h2{ font-family: var(--font-display); font-weight:600; font-size: clamp(30px,3.6vw,46px); }
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.testi-card{
  background: var(--anthracite); border-radius: 22px; padding: 30px 26px;
  border: 1px solid rgba(255,255,255,.06);
}
.testi-card .quote{ font-size: 16px; margin-bottom: 22px; }
.testi-card .who{ display:flex; align-items:center; gap: 12px; }
.testi-card .avatar{
  width: 38px; height: 38px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-label); font-size: 13px; font-weight: 700; color: var(--anthracite);
}
.testi-card:nth-child(1) .avatar{ background: var(--lime); }
.testi-card:nth-child(2) .avatar{ background: var(--lavande); }
.testi-card:nth-child(3) .avatar{ background: var(--aqua); }
.testi-card .who small{ display:block; color: var(--muted); font-family: var(--font-body); font-size: 12.5px; }

/* ---------- Big closing CTA (icône géante en filigrane) ---------- */
.cta-final{
  padding: 150px 0 130px;
  min-height: 680px;
  text-align:center;
  position: relative;
  overflow: hidden;
  background: var(--anthracite);
}
.cta-bg-mark{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 960px; max-width: 108vw;
  z-index: 0; pointer-events: none;
  opacity: 1;
}
.cta-final .wrap{ position: relative; z-index: 1; }
.cta-final h2{
  font-family: var(--font-display); font-weight:800; font-size: clamp(44px,7vw,90px);
  line-height: .98; margin-bottom: 26px;
}
.cta-final h2 .lime{ color: var(--lime); }
.cta-final p{ color: var(--blanc); font-size: 17px; margin: 0 auto 40px; max-width: 42ch; }
.cta-final .hero-ctas{ justify-content:center; }


/* ---------- Footer ---------- */
footer{ border-top: 1px solid rgba(255,255,255,.07); padding: 56px 0 34px; background: var(--gris); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; margin-bottom: 34px; }
.footer-tagline{ color: var(--muted); font-size: 14px; max-width: 32ch; margin-top: 14px; }
.footer-links{ display:flex; gap: 48px; flex-wrap: wrap; }
.footer-col h4{ font-family: var(--font-label); font-size: 11px; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); margin-bottom: 14px; }
.footer-col a{ display:block; font-size: 14px; color: var(--blanc); opacity:.85; margin-bottom: 10px; }
.footer-col a:hover{ color: var(--lime); opacity:1; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size: 12.5px; color: var(--muted); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07);
}

/* ---------- Legal / CGV (reuse from v1, restyled tokens) ---------- */
.legal-hero{ padding: 70px 0 44px; border-bottom: 1px solid rgba(255,255,255,.07); }
.legal-hero h1{ font-family: var(--font-display); font-size: clamp(36px,4.6vw,56px); font-weight:600; }
.legal-hero p{ color: var(--muted); margin-top: 14px; max-width: 60ch; }
.legal-layout{ display:grid; grid-template-columns: 260px 1fr; gap: 60px; padding: 60px 0 110px; align-items:start; }
.legal-toc{ position: sticky; top: 100px; }
.legal-toc h4{ font-family: var(--font-label); font-size: 11px; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); margin-bottom: 16px; }
.legal-toc ol{ list-style:none; counter-reset: toc; border-left: 1px solid rgba(255,255,255,.08); }
.legal-toc li{ counter-increment: toc; }
.legal-toc a{ display:block; padding: 8px 0 8px 18px; margin-left:-1px; border-left: 1px solid transparent; font-size: 13.5px; color: var(--muted); transition: color .2s, border-color .2s; }
.legal-toc a::before{ content: counter(toc, decimal-leading-zero) " "; color: var(--lime); font-family: var(--font-label); margin-right:6px; font-size: 11px; }
.legal-toc a:hover{ color: var(--blanc); border-left-color: var(--lime); }
.legal-body article{ margin-bottom: 46px; scroll-margin-top: 100px; }
.legal-body h2{ font-family: var(--font-label); font-size: 17px; color: var(--blanc); margin-bottom: 16px; display:flex; align-items:baseline; gap:10px; }
.legal-body h2 .n{ color: var(--lime); font-size: 13px; }
.legal-body p{ color: #cfcfdb; font-size: 15px; margin-bottom: 14px; max-width: 74ch; }
.legal-body ul{ margin: 0 0 14px 20px; color: #cfcfdb; font-size: 15px; }
.legal-body li{ margin-bottom: 8px; }
.legal-note{ background: var(--gris); border: 1px solid rgba(255,255,255,.06); border-left: 3px solid var(--lavande); border-radius: 12px; padding: 18px 22px; font-size: 13.5px; color: var(--muted); margin-bottom: 40px; }
.legal-note b{ color: var(--lavande); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-phone{ justify-self: center; margin-top: 50px; }
  .stats-row{ grid-template-columns: repeat(2,1fr); }
  .stat{ min-height: 190px; padding: 34px 24px; }
  .feature-grid{ grid-template-columns: 1fr; gap: 40px; }
  .feature-row.reverse .feature-grid{ direction: ltr; }
  .feature-visual{ order: -1; }
  .modes{ grid-template-columns: 1fr; }
  .testi-grid{ grid-template-columns: 1fr; }
  .legal-layout{ grid-template-columns: 1fr; }
  .legal-toc{ position: static; margin-bottom: 20px; }
  .nav-links{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}