/* ============================================================================
   VLEENO — Design System (marketing site + web app)
   White-label: brand color & logo are overridden at runtime from Paramètres
   via CSS variables on :root (see store.js applyTheme()).
   ========================================================================== */
:root {
  --ink: #0b1020;
  --ink-2: #121a2e;
  --slate-900: #0e1525;
  --slate-800: #16203a;
  --slate-700: #1f2c4d;

  --brand: #7c5cff;          /* overridable */
  --brand-2: #22d3ee;        /* overridable */
  --brand-ink: #0a0716;
  --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #f43f5e;
  --info: #38bdf8;

  --text: #0d142a;
  --text-soft: #475069;
  --muted: #7a849c;
  --line: #e7ebf3;
  --line-2: #eef1f7;
  --paper: #ffffff;
  --canvas: #f4f6fb;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --sh-sm: 0 1px 2px rgba(13,20,42,.06), 0 4px 12px rgba(13,20,42,.05);
  --sh-md: 0 10px 28px rgba(13,20,42,.10);
  --sh-lg: 0 30px 60px -22px rgba(11,16,32,.40);
  --ring: 0 0 0 4px rgba(124,92,255,.18);

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --container: 1200px;
}

* { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} html{scroll-behavior:auto} }
body { font-family: var(--font); color: var(--text); background: var(--canvas); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
h1,h2,h3,h4 { line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; line-height: 1.05; }
.gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- Buttons (shared) ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; border-radius:999px; font-weight:700; font-size:.95rem; border:1px solid transparent; transition:transform .2s, box-shadow .2s, background .2s, border-color .2s; white-space:nowrap; }
.btn svg { width:18px; height:18px; }
.btn--primary { background: var(--grad); color:#fff; box-shadow: 0 12px 26px -12px rgba(124,92,255,.8); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--dark { background: var(--slate-900); color:#fff; }
.btn--dark:hover { transform: translateY(-2px); background: var(--slate-800); }
.btn--ghost { background: rgba(255,255,255,.06); color:#fff; border-color: rgba(255,255,255,.22); }
.btn--ghost:hover { background: rgba(255,255,255,.14); }
.btn--light { background:#fff; color: var(--slate-900); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--soft { background: rgba(124,92,255,.1); color: var(--brand); }
.btn--soft:hover { background: rgba(124,92,255,.16); }
.btn--lg { padding:16px 30px; font-size:1.05rem; }
.btn--sm { padding:8px 14px; font-size:.85rem; }
.btn--block { width:100%; }
.btn--danger { background: rgba(244,63,94,.1); color: var(--danger); }

.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:.76rem; font-weight:700; letter-spacing:.02em; }
.badge--ok { background: rgba(16,185,129,.12); color:#047857; }
.badge--warn { background: rgba(245,158,11,.14); color:#b45309; }
.badge--info { background: rgba(56,189,248,.14); color:#0369a1; }
.badge--danger { background: rgba(244,63,94,.12); color:#be123c; }
.badge--muted { background: #eef1f7; color: var(--muted); }
.badge--brand { background: rgba(124,92,255,.12); color: var(--brand); }

/* ============================================================================
   MARKETING SITE
   ========================================================================== */
.container { width:100%; max-width: var(--container); margin-inline:auto; padding-inline: clamp(20px,5vw,56px); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color: var(--brand); }
.eyebrow::before { content:""; width:24px; height:2px; background: var(--grad); border-radius:2px; }
.eyebrow--light { color: var(--brand-2); }

.site-nav { position: fixed; inset:0 0 auto 0; z-index:100; padding:18px 0; transition: all .3s; }
.site-nav.scrolled { background: rgba(11,16,32,.72); backdrop-filter: blur(16px); padding:12px 0; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.site-nav__inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { display:inline-flex; align-items:center; gap:10px; font-weight:800; color:#fff; }
.logo__mark { width:38px; height:38px; border-radius:11px; background: var(--grad); display:grid; place-items:center; flex:none; }
.logo__mark svg { width:22px; height:22px; color:#fff; }
.logo__name { font-size:1.2rem; letter-spacing:-.01em; }
.site-nav__links { display:flex; gap:30px; align-items:center; }
.site-nav__links a { color: rgba(255,255,255,.78); font-weight:600; font-size:.95rem; transition: color .2s; }
.site-nav__links a:hover { color:#fff; }
.site-nav__cta { display:flex; gap:12px; align-items:center; }

.hero { position:relative; padding: clamp(140px,18vh,210px) 0 clamp(70px,9vw,120px); color:#fff; overflow:hidden; background: radial-gradient(120% 120% at 50% -10%, #1a2348 0%, #0b1020 60%); }
.hero__aurora { position:absolute; inset:-15% -10% auto; height:120%; z-index:0; filter: blur(70px); opacity:.85; }
.hero__aurora span { position:absolute; border-radius:50%; }
.hero__aurora .a { width:520px; height:520px; background: radial-gradient(circle, rgba(124,92,255,.6), transparent 65%); top:-10%; left:-5%; animation: f1 18s ease-in-out infinite; }
.hero__aurora .b { width:480px; height:480px; background: radial-gradient(circle, rgba(34,211,238,.5), transparent 65%); top:6%; right:-6%; animation: f2 20s ease-in-out infinite; }
.hero__aurora .c { width:420px; height:420px; background: radial-gradient(circle, rgba(16,185,129,.35), transparent 65%); bottom:-22%; left:36%; animation: f1 24s ease-in-out infinite reverse; }
@keyframes f1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,40px)} }
@keyframes f2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,30px)} }
.hero__grid { position:absolute; inset:0; z-index:0; opacity:.3; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:60px 60px; mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); }
.hero__inner { position:relative; z-index:1; text-align:center; max-width:880px; margin-inline:auto; }
.hero__pill { display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 7px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); font-size:.85rem; font-weight:600; margin-bottom:26px; }
.hero__pill b { background: var(--grad); padding:4px 10px; border-radius:999px; font-size:.72rem; }
.hero h1 { font-size: clamp(2.6rem,6.2vw,5rem); color:#fff; margin-bottom:22px; }
.hero h1 em { font-style:italic; background: var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p.sub { font-size: clamp(1.05rem,1.7vw,1.3rem); color: rgba(255,255,255,.82); max-width:640px; margin:0 auto 34px; }
.hero__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:46px; }
.hero__stats { display:flex; gap:clamp(24px,5vw,60px); justify-content:center; flex-wrap:wrap; }
.hero__stat strong { display:block; font-family: var(--font-display); font-size:2.2rem; }
.hero__stat span { color: rgba(255,255,255,.6); font-size:.9rem; }

/* App preview mockup under hero */
.hero-shot { position:relative; z-index:1; max-width:1060px; margin: 56px auto -120px; border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--sh-lg); border:1px solid rgba(255,255,255,.12); }
.hero-shot img { width:100%; }
.hero-shot__fallback { aspect-ratio:16/9; background: linear-gradient(160deg,#16203a,#0b1020); display:grid; place-items:center; color:rgba(255,255,255,.4); }

.section { padding: clamp(70px,9vw,130px) 0; }
.section--pad-top { padding-top: clamp(140px,16vw,200px); }
.section-head { max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head h2 { font-size: clamp(2rem,4.2vw,3.2rem); margin:16px 0 14px; }
.section-head p { font-size:1.12rem; color: var(--text-soft); }

.mods { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.mod { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); padding:26px 22px; box-shadow: var(--sh-sm); transition: transform .3s, box-shadow .3s; }
.mod:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.mod__ic { width:50px; height:50px; border-radius:14px; background: linear-gradient(160deg, rgba(124,92,255,.14), rgba(34,211,238,.14)); display:grid; place-items:center; margin-bottom:16px; }
.mod__ic svg { width:26px; height:26px; color: var(--brand); }
.mod h3 { font-size:1.12rem; margin-bottom:7px; }
.mod p { font-size:.94rem; color: var(--text-soft); }

.feature-row { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,80px); align-items:center; }
.feature-row + .feature-row { margin-top: clamp(60px,8vw,110px); }
.feature-row.rev .feature-row__media { order:2; }
.feature-row__media { border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--sh-lg); border:1px solid var(--line); aspect-ratio:4/3; background: linear-gradient(160deg,#eef0fb,#e6f6fb); position:relative; }
.feature-list { display:grid; gap:14px; margin-top:22px; }
.feature-list li { display:flex; gap:12px; color: var(--text-soft); }
.feature-list svg { width:22px; height:22px; color: var(--success); flex:none; }

.dark { background: radial-gradient(120% 140% at 50% -20%, #1a2348, #0b1020); color:#fff; }
.dark .section-head p { color: rgba(255,255,255,.7); }

.pricing { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; max-width:1000px; margin-inline:auto; }
.price { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-xl); padding:34px 28px; position:relative; }
.price.featured { border-color: transparent; box-shadow: var(--sh-lg); transform: scale(1.03); background: linear-gradient(180deg,#fff,#fbfaff); }
.price.featured::before { content:"Le plus choisi"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: var(--grad); color:#fff; font-size:.72rem; font-weight:800; padding:5px 14px; border-radius:999px; letter-spacing:.06em; }
.price h3 { font-size:1.2rem; }
.price__amt { font-family: var(--font-display); font-size:3rem; margin:14px 0 2px; }
.price__amt small { font-size:1rem; color: var(--muted); font-family: var(--font); font-weight:600; }
.price ul { display:grid; gap:11px; margin:22px 0 26px; }
.price li { display:flex; gap:10px; color: var(--text-soft); font-size:.94rem; }
.price li svg { width:20px; height:20px; color: var(--success); flex:none; }

.cta-band { padding: clamp(50px,7vw,90px) 0; }
.cta-card { background: radial-gradient(120% 140% at 50% -20%, #20294f, #0b1020); color:#fff; border-radius: var(--r-xl); padding: clamp(40px,6vw,72px); text-align:center; box-shadow: var(--sh-lg); position:relative; overflow:hidden; }
.cta-card::before { content:""; position:absolute; inset:0; background: radial-gradient(500px circle at 18% 12%, rgba(124,92,255,.35), transparent 55%), radial-gradient(500px circle at 88% 88%, rgba(34,211,238,.3), transparent 55%); }
.cta-card > * { position:relative; }
.cta-card h2 { font-size: clamp(2rem,4vw,3rem); margin-bottom:14px; }
.cta-card p { color: rgba(255,255,255,.8); max-width:540px; margin:0 auto 28px; font-size:1.1rem; }

.site-footer { background: var(--ink); color: rgba(255,255,255,.62); padding:60px 0 30px; }
.site-footer__top { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer h5 { color:#fff; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; }
.site-footer a { display:block; margin-bottom:10px; font-size:.93rem; transition: color .2s; }
.site-footer a:hover { color: var(--brand-2); }
.site-footer__bottom { padding-top:24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.85rem; }

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}[data-reveal][data-delay="2"]{transition-delay:.16s}[data-reveal][data-delay="3"]{transition-delay:.24s}

@media (max-width: 980px){
  .mods{grid-template-columns:1fr 1fr}
  .feature-row{grid-template-columns:1fr}
  .feature-row.rev .feature-row__media{order:0}
  .pricing{grid-template-columns:1fr; max-width:420px}
  .price.featured{transform:none}
  .site-nav__links{display:none}
  .site-footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){ .mods{grid-template-columns:1fr} .site-footer__top{grid-template-columns:1fr} }