/* ═══════════════════════════════════════════════════════════════
   Ve.Line — Landing · chaleureux & humain (léger, sans glassmorphism)
   Crème chaud, vert forêt, or. Clash Display + General Sans. Icônes monoline.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --forest-900:#07301f; --forest-800:#0b3d28; --forest-700:#15573a;
  --forest-600:#1b6b45; --forest:#3d9970; --forest-300:#7fd0a4; --forest-100:#e3f1e8;
  --gold:#ffb800; --gold-600:#d99a00; --gold-bg:#fff6dc;
  --cream:#f7f3ea; --cream-2:#fdfbf6; --line:#ece4d4;
  --ink:#102019; --ink-soft:#52615a;
  --shadow-sm:0 8px 22px -12px rgba(7,48,31,.22);
  --shadow:0 22px 48px -24px rgba(7,48,31,.32);
  --r:20px; --r-lg:28px;
  --font-display:"Clash Display","Times New Roman",serif;
  --font-body:"General Sans",-apple-system,system-ui,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.06; letter-spacing:-.02em; }
em { font-style:normal; color:var(--gold-600); }
a { text-decoration:none; color:inherit; }
.ic { width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ic--fill { fill:currentColor; stroke:none; }
.ic--inline { width:1em; height:1em; vertical-align:-2px; }

/* ── Boutons ──────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:.95rem;
  padding:.8rem 1.3rem; border-radius:100px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s; white-space:nowrap; }
.btn .ic { width:18px; height:18px; }
.btn--lg { padding:1rem 1.7rem; font-size:1.02rem; }
.btn:active { transform:scale(.97); }
.btn--gold { background:var(--gold); color:#3a2600; box-shadow:0 12px 26px -10px rgba(255,184,0,.6); }
.btn--gold:hover { transform:translateY(-3px); box-shadow:0 18px 34px -12px rgba(255,184,0,.7); }
.btn--dark { background:var(--forest-800); color:#fff; }
.btn--dark:hover { transform:translateY(-3px); background:var(--forest-700); }
.btn--soft { background:var(--forest-100); color:var(--forest-700); }
.btn--soft:hover { transform:translateY(-3px); background:#d4ebdd; }

/* ── NAV ──────────────────────────────────────────────────────── */
.nav { position:fixed; z-index:1000; top:0; left:0; right:0; display:flex; align-items:center; gap:1.4rem;
  padding:1.05rem clamp(1.1rem,4vw,3.2rem); transition:background .3s, box-shadow .3s, padding .3s; }
.nav.scrolled { background:rgba(247,243,234,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(16,32,25,.07); padding-top:.7rem; padding-bottom:.7rem; }
.brand { display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--ink); }
.brand .dot { color:var(--gold-600); }
.brand__logo { width:32px; height:32px; border-radius:9px; box-shadow:var(--shadow-sm); }
.nav__links { display:flex; align-items:center; gap:1.5rem; margin-left:auto; font-weight:500; }
.nav__links a { color:var(--ink-soft); transition:color .2s; }
.nav__links a:hover { color:var(--forest-600); }
.nav__cta { padding:.55rem 1.15rem; font-size:.9rem; }
.burger { display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.burger span { width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* ── HERO ─────────────────────────────────────────────────────── */
.hero { position:relative; padding:8.5rem clamp(1.1rem,4vw,3.2rem) clamp(2rem,5vw,3.5rem); overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:-1; background:
  radial-gradient(50% 45% at 88% 8%, rgba(255,184,0,.14), transparent 60%),
  radial-gradient(46% 42% at 6% 4%, rgba(61,153,112,.16), transparent 60%),
  linear-gradient(180deg, #fbf8f1, var(--cream)); }
.hero__inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.82rem; padding:.5rem .9rem; border-radius:100px; background:#fff; border:1px solid var(--line); color:var(--forest-700); box-shadow:var(--shadow-sm); }
.eyebrow .flag { border-radius:3px; }
.hero h1 { font-size:clamp(2.6rem,6vw,4.6rem); margin:1.3rem 0 1.1rem; }
.hero__sub { font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--ink-soft); max-width:31rem; line-height:1.55; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.9rem; margin:2rem 0 1.4rem; }
.hero__trust { list-style:none; display:flex; flex-wrap:wrap; gap:1.3rem; font-size:.9rem; color:var(--ink-soft); font-weight:500; }
.hero__trust li { display:flex; align-items:center; gap:.4rem; }
.ic--ok { width:16px; height:16px; color:var(--forest); stroke-width:2.4; }
.hero__art { position:relative; display:grid; place-items:center; }
.hero__halo { position:absolute; width:84%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(127,208,164,.32), transparent 68%); filter:blur(8px); z-index:-1; }
.hero__art lottie-player { width:min(100%,440px); aspect-ratio:1/1; }

/* ── STRIP stats ──────────────────────────────────────────────── */
.strip { padding:0 clamp(1.1rem,4vw,3.2rem); }
.strip__inner { max-width:1120px; margin:0 auto; background:linear-gradient(120deg,var(--forest-800),var(--forest-600)); color:#fff; border-radius:var(--r-lg); padding:2rem clamp(1.4rem,3vw,2.6rem); display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; box-shadow:var(--shadow); }
.stat { text-align:center; }
.stat b { display:block; font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.4rem); color:#fff; }
.stat span { font-size:.9rem; color:rgba(255,255,255,.78); line-height:1.35; display:block; margin-top:.2rem; }

/* ── Sections ─────────────────────────────────────────────────── */
.section-head { max-width:720px; margin:0 auto clamp(2.3rem,5vw,3.4rem); text-align:center; }
.kicker { font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--forest-600); }
.section-head h2 { font-size:clamp(2rem,4.4vw,3.2rem); margin:.7rem 0 .9rem; }
.section-head p { color:var(--ink-soft); font-size:1.08rem; line-height:1.5; }

/* ── HOW ──────────────────────────────────────────────────────── */
.how { padding:clamp(4rem,8vw,6.5rem) clamp(1.1rem,4vw,3.2rem); }
.how-grid { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.how-step { position:relative; background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:2.4rem 1.8rem 2rem; box-shadow:var(--shadow-sm); }
.how-step__n { position:absolute; top:-18px; left:1.8rem; width:42px; height:42px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:#fff; background:linear-gradient(135deg,var(--forest-600),var(--forest)); border-radius:14px; box-shadow:var(--shadow-sm); }
.how-step h3 { font-size:1.25rem; color:var(--forest-800); margin:.6rem 0 .5rem; }
.how-step p { color:var(--ink-soft); line-height:1.55; }

/* ── FEATURES ─────────────────────────────────────────────────── */
.features { padding:clamp(3rem,7vw,6rem) clamp(1.1rem,4vw,3.2rem); }
.feat-grid { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.feat { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem 1.7rem; box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.feat:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.feat__ic { display:inline-grid; place-items:center; width:54px; height:54px; border-radius:16px; margin-bottom:1.1rem; color:var(--forest-700); background:var(--forest-100); }
.feat__ic .ic { width:26px; height:26px; }
.feat__ic--gold { color:var(--gold-600); background:var(--gold-bg); }
.feat h3 { font-size:1.3rem; margin-bottom:.5rem; color:var(--forest-800); }
.feat p { color:var(--ink-soft); line-height:1.55; font-size:.97rem; }
.feat--pro { background:linear-gradient(160deg,#fff7e0,#ffedb6); border-color:#f1d98c; }

/* ── WHO ──────────────────────────────────────────────────────── */
.who { padding:clamp(3rem,7vw,6rem) clamp(1.1rem,4vw,3.2rem); }
.who-grid { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.who-card { border-radius:var(--r-lg); padding:2rem 1.7rem; color:#fff; min-height:200px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.who-card h3 { font-size:1.5rem; margin-bottom:.5rem; }
.who-card p { color:rgba(255,255,255,.85); line-height:1.5; }
.who-card--buy { background:linear-gradient(160deg,#1b6b45,#2f8c5f); }
.who-card--sell { background:linear-gradient(160deg,#15573a,#3d9970); }
.who-card--deliver { background:linear-gradient(160deg,#b9810a,#ffb800); }
.who-card--deliver p { color:rgba(255,255,255,.92); }

/* ── INSTALL ──────────────────────────────────────────────────── */
.install { padding:clamp(3rem,7vw,6rem) clamp(1.1rem,4vw,3.2rem); }
.steps-grid { max-width:1060px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; align-items:start; }
.card-os { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem 1.7rem; box-shadow:var(--shadow-sm); }
.card-os--featured { border:2px solid var(--forest); transform:translateY(-10px); box-shadow:var(--shadow); }
.card-os__tag { position:absolute; top:-12px; left:1.7rem; background:linear-gradient(135deg,var(--forest-600),var(--forest)); color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.35rem .8rem; border-radius:100px; }
.card-os__ic { display:inline-grid; place-items:center; width:50px; height:50px; border-radius:15px; margin-bottom:1rem; color:var(--forest-700); background:var(--forest-100); }
.card-os__ic .ic { width:26px; height:26px; }
.card-os h3 { font-size:1.35rem; color:var(--forest-800); margin-bottom:1rem; }
.card-os ol { list-style:none; counter-reset:s; display:grid; gap:.8rem; margin-bottom:1.2rem; }
.card-os li { counter-increment:s; position:relative; padding-left:2.2rem; color:var(--ink-soft); line-height:1.45; font-size:.95rem; }
.card-os li::before { content:counter(s); position:absolute; left:0; top:-2px; width:1.55rem; height:1.55rem; display:grid; place-items:center; background:linear-gradient(135deg,var(--forest-600),var(--forest)); color:#fff; border-radius:50%; font-weight:600; font-size:.78rem; font-family:var(--font-display); }
.card-os b { color:var(--ink); }
.card-os .btn { width:100%; justify-content:center; }
.card-os__hint { margin-top:.7rem; font-size:.8rem; color:var(--gold-600); line-height:1.4; }
.card-os.is-current { outline:2.5px solid var(--gold); outline-offset:5px; }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq { padding:clamp(3rem,7vw,6rem) clamp(1.1rem,4vw,3.2rem); }
.faq-list { max-width:760px; margin:0 auto; display:grid; gap:.8rem; }
.faq-item { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.4rem; box-shadow:var(--shadow-sm); }
.faq-item summary { font-family:var(--font-display); font-weight:500; font-size:1.08rem; color:var(--forest-800); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:1.5rem; color:var(--forest); line-height:1; transition:transform .3s; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { color:var(--ink-soft); line-height:1.55; margin-top:.7rem; }

/* ── DOWNLOAD ─────────────────────────────────────────────────── */
.download { padding:clamp(3rem,7vw,6rem) clamp(1.1rem,4vw,3.2rem) clamp(4rem,8vw,6rem); }
.download__card { position:relative; max-width:920px; margin:0 auto; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.download__bg { position:absolute; inset:0; z-index:0; background:radial-gradient(60% 90% at 82% 6%, rgba(255,184,0,.28), transparent 58%), linear-gradient(150deg,#0b3d28,#1b6b45); }
.download__content { position:relative; z-index:1; padding:clamp(2.5rem,6vw,4rem); text-align:center; display:grid; justify-items:center; gap:.5rem; color:#fff; }
.download__content h2 { font-size:clamp(1.9rem,4vw,2.9rem); }
.download__content p { color:rgba(255,255,255,.85); font-size:1.08rem; max-width:34rem; margin-bottom:1.1rem; }
.download__actions { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.download__actions .btn--soft { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); }
.download__actions .btn--soft:hover { background:rgba(255,255,255,.24); }
.download__note { margin-top:1rem; font-size:.85rem; color:rgba(255,255,255,.65); }

/* ── FOOTER ───────────────────────────────────────────────────── */
.footer { background:linear-gradient(180deg,#0b3d28,#07301f); color:rgba(255,255,255,.7); padding:clamp(2.5rem,5vw,3.5rem) clamp(1.1rem,4vw,3.2rem) 2rem; }
.footer__top { max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between; padding-bottom:1.7rem; border-bottom:1px solid rgba(255,255,255,.1); }
.brand--dark { color:#fff; } .brand--dark .dot { color:var(--gold); }
.footer__links { display:flex; flex-wrap:wrap; gap:1.4rem; font-weight:500; }
.footer__links a:hover { color:var(--gold); }
.footer__bottom { max-width:1120px; margin:1.4rem auto 0; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; font-size:.85rem; }

/* ── Reveal ───────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;} }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ order:2; } .hero__art{ order:1; }
  .hero__art lottie-player{ width:min(72%,320px); }
  .hero__cta,.hero__trust{ justify-content:center; } .hero__sub{ margin-inline:auto; }
  .strip__inner{ grid-template-columns:1fr 1fr; }
  .how-grid,.feat-grid,.who-grid{ grid-template-columns:1fr 1fr; }
  .steps-grid{ grid-template-columns:1fr; max-width:460px; }
  .card-os--featured{ transform:none; }
}
@media (max-width:640px){
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:flex; }
  .nav__links.open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:1rem; padding:1.2rem clamp(1.1rem,4vw,3.2rem) 1.6rem; background:rgba(247,243,234,.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); }
  .how-grid,.feat-grid,.who-grid,.strip__inner{ grid-template-columns:1fr; }
}