/* ============================================================
   VOLUMEAL — Site marketing (landing + légal)
   Identité reprise de l'app : sombre, accent menthe + cyan.
   Mobile-first, sans framework.
   ============================================================ */

:root{
  /* Palette (reprise app) */
  --bg-top:#101522; --bg-bot:#05070c; --bg:#080a11;
  --accent:#4ce69e; --accent-ink:#04150d; --accent2:#33c0e0;
  --prot:#5cb3ff; --carb:#ffc24d; --fat:#ff8a8a;
  --conf-low:#ff9166;

  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.08);
  --hairline:rgba(255,255,255,.10);
  --hairline-2:rgba(255,255,255,.16);

  --txt:#ffffff;
  --txt2:rgba(255,255,255,.64);
  --txt3:rgba(255,255,255,.42);

  /* Rayons */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-full:999px;

  /* Espacements de section */
  --pad-x:20px; --maxw:1140px;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,sans-serif;
  --num:"SF Pro Rounded",-apple-system,BlinkMacSystemFont,var(--font);

  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px rgba(0,0,0,.4);
  --shadow-float:0 30px 80px rgba(0,0,0,.55);
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); color:var(--txt); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:-.01em}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* Fond ambiant : halos menthe/cyan diffus */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(60% 50% at 78% -8%, rgba(76,230,158,.16), transparent 60%),
    radial-gradient(50% 45% at 8% 8%, rgba(51,192,224,.12), transparent 60%),
    linear-gradient(178deg,var(--bg-top),var(--bg-bot) 70%);
}
body::after{ /* grain subtil */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.35));
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x)}

/* ============================================================
   En-tête / nav
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px);
  background:color-mix(in oklab,var(--bg-bot),transparent 22%);
  border-bottom:1px solid var(--hairline);
}
.nav{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.02em}
.brand .mark{
  width:30px; height:30px; border-radius:9px; flex:none; position:relative;
  background:radial-gradient(130% 120% at 28% 18%, #1a2233, #0a0f1a 70%, #05070c);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.brand .mark svg{width:19px; height:19px; stroke:var(--accent); fill:none; stroke-width:1.6; stroke-linecap:round}
.nav .links{display:none; gap:26px; margin-left:14px}
.nav .links a{font-size:14px; color:var(--txt2); font-weight:500; transition:color .15s}
.nav .links a:hover{color:var(--txt)}
.nav .spacer{margin-left:auto}

/* Boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; border-radius:var(--r-md); font-weight:700; font-size:15px;
  cursor:pointer; border:1px solid transparent; transition:transform .12s, background .15s, border-color .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn.accent{background:var(--accent); color:var(--accent-ink)}
.btn.accent:hover{background:color-mix(in oklab,var(--accent),#fff 10%)}
.btn.ghost{background:var(--surface); color:var(--txt); border-color:var(--hairline-2)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:9px 15px; font-size:13.5px; border-radius:var(--r-sm)}

/* Bouton App Store (noir, logo Apple) */
.appstore{
  display:inline-flex; align-items:center; gap:11px;
  background:#000; color:#fff; border:1px solid rgba(255,255,255,.22);
  padding:11px 18px 11px 16px; border-radius:var(--r-md); cursor:pointer;
  transition:border-color .15s, transform .12s;
}
.appstore:hover{border-color:rgba(255,255,255,.4)}
.appstore:active{transform:translateY(1px)}
.appstore svg{width:24px; height:24px; fill:#fff; flex:none}
.appstore .t{text-align:left; line-height:1.1}
.appstore .t small{display:block; font-size:10px; color:rgba(255,255,255,.7); letter-spacing:.02em}
.appstore .t b{font-size:17px; font-weight:600; letter-spacing:-.01em}

/* Menu mobile */
.menu-btn{
  margin-left:auto; width:42px; height:42px; border-radius:var(--r-sm); flex:none;
  background:var(--surface); border:1px solid var(--hairline); color:var(--txt);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.menu-btn svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}
.mobile-menu{
  display:none; flex-direction:column; gap:4px; padding:8px var(--pad-x) 16px;
  border-bottom:1px solid var(--hairline);
  background:color-mix(in oklab,var(--bg-bot),transparent 8%); backdrop-filter:blur(18px);
}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 10px; border-radius:var(--r-sm); color:var(--txt2); font-weight:500}
.mobile-menu a:hover{background:var(--surface); color:var(--txt)}

/* ============================================================
   Primitives de section
   ============================================================ */
section{position:relative}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{content:""; width:18px; height:1.5px; background:var(--accent); border-radius:2px}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{display:none}

h1,h2,h3{letter-spacing:-.025em; line-height:1.08; font-weight:800}
.sec-head{max-width:620px}
.sec-head h2{font-size:clamp(28px,5.2vw,40px); margin:14px 0 12px}
.sec-head p{font-size:clamp(15px,2.4vw,17px); color:var(--txt2); line-height:1.6}
.sec-head.center{margin:0 auto; text-align:center}

.card{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:54px 0 30px}
.hero .grid{display:grid; gap:40px; align-items:center}
.hero-copy .tag{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  padding:7px 13px 7px 9px; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--hairline); font-size:12.5px; color:var(--txt2);
}
.hero-copy .tag .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent)}
.hero-copy h1{font-size:clamp(34px,8.5vw,58px); letter-spacing:-.035em}
.hero-copy h1 .grad{
  background:linear-gradient(96deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-copy .lede{font-size:clamp(16px,3vw,19px); color:var(--txt2); margin:18px 0 28px; max-width:480px; line-height:1.6}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.hero-trust{display:flex; align-items:center; gap:16px; margin-top:24px; flex-wrap:wrap; color:var(--txt3); font-size:13px}
.hero-trust .stars{color:var(--carb); letter-spacing:2px}
.hero-trust .sep{width:1px; height:14px; background:var(--hairline-2)}

/* Mockup iPhone (reprise app) */
.hero-phone{justify-self:center; position:relative}
.hero-phone::before{ /* lueur derrière le tel */
  content:""; position:absolute; inset:-8% -14%; z-index:0;
  background:radial-gradient(50% 45% at 50% 38%, rgba(76,230,158,.28), transparent 62%);
  filter:blur(20px);
}
.phone{
  position:relative; z-index:1;
  width:288px; height:600px; border-radius:46px; padding:10px; flex:none;
  background:linear-gradient(160deg,#23252e,#0b0c10);
  box-shadow:var(--shadow-float), 0 0 0 1px rgba(255,255,255,.05);
}
.phone .screen{
  width:100%; height:100%; border-radius:37px; overflow:hidden; position:relative;
  background:linear-gradient(178deg,var(--bg-top),var(--bg-bot));
  display:flex; flex-direction:column;
}
.phone .dyn{position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:74px; height:22px; background:#000; border-radius:13px; z-index:7}
.phone .pstatus{height:44px; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 22px 7px; font-size:13px; font-weight:600}
.phone .pstatus .r{display:flex; gap:5px; align-items:center; color:#fff}
.phone .pscroll{flex:1; overflow:hidden; padding:6px 16px 16px}

/* Contenu mock : carte résultat honnête */
.mk-photo{height:130px; border-radius:var(--r-lg); position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 9px, rgba(255,255,255,.018) 9px 18px),
  color-mix(in oklab,var(--bg-top),#fff 3%); border:1px solid var(--hairline)}
.mk-photo .chip{position:absolute; left:10px; bottom:10px; font-size:10px; font-weight:600;
  padding:5px 9px; border-radius:var(--r-full); background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16)}
.mk-title{display:flex; align-items:baseline; justify-content:space-between; margin:14px 2px 3px}
.mk-title b{font-size:17px; font-weight:800; letter-spacing:-.02em}
.mk-conf{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  color:var(--accent); padding:3px 8px; border-radius:var(--r-full);
  background:color-mix(in oklab,var(--accent),transparent 88%); border:1px solid color-mix(in oklab,var(--accent),transparent 66%)}
.mk-conf .d{width:6px; height:6px; border-radius:50%; background:currentColor}
.mk-est{font-family:var(--num); margin:2px 2px 12px}
.mk-est .big{font-size:30px; font-weight:800; letter-spacing:-.03em}
.mk-est .rng{font-size:13px; color:var(--txt2); margin-left:6px}
.mk-int{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:11px 12px; margin-bottom:12px}
.mk-int .lab{display:flex; justify-content:space-between; font-size:10px; color:var(--txt2);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px}
.mk-int .track{height:7px; border-radius:var(--r-full); background:rgba(255,255,255,.08); position:relative; overflow:hidden}
.mk-int .fill{position:absolute; top:0; bottom:0; left:24%; right:30%; border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--accent),var(--accent2))}
.mk-macros{display:flex; gap:7px}
.mk-macro{flex:1; text-align:center; padding:9px 3px; border-radius:var(--r-md); border:1px solid; font-family:var(--num)}
.mk-macro b{display:block; font-size:14px; font-weight:800}
.mk-macro small{font-size:9px; color:var(--txt2)}
.mk-macro.p{border-color:color-mix(in oklab,var(--prot),transparent 55%); background:color-mix(in oklab,var(--prot),transparent 88%)} .mk-macro.p b{color:var(--prot)}
.mk-macro.c{border-color:color-mix(in oklab,var(--carb),transparent 55%); background:color-mix(in oklab,var(--carb),transparent 88%)} .mk-macro.c b{color:var(--carb)}
.mk-macro.f{border-color:color-mix(in oklab,var(--fat),transparent 55%); background:color-mix(in oklab,var(--fat),transparent 88%)} .mk-macro.f b{color:var(--fat)}

/* ============================================================
   Bandeau logos / confiance
   ============================================================ */
.strip{border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:26px 0}
.strip .row{display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center; justify-content:center; color:var(--txt3)}
.strip .item{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600}
.strip .item svg{width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ============================================================
   Comment ça marche (3 étapes)
   ============================================================ */
.section{padding:64px 0}
.steps{display:grid; gap:18px; margin-top:40px}
.step{padding:26px 24px; position:relative; overflow:hidden}
.step .n{
  width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-family:var(--num); font-weight:800; font-size:18px;
  background:color-mix(in oklab,var(--accent),transparent 86%); color:var(--accent);
  border:1px solid color-mix(in oklab,var(--accent),transparent 66%); margin-bottom:18px;
}
.step h3{font-size:19px; margin-bottom:8px}
.step p{font-size:14.5px; color:var(--txt2); line-height:1.55}
.step .ic{width:22px; height:22px; stroke:var(--accent2); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  position:absolute; top:28px; right:24px; opacity:.5}

/* ============================================================
   Différenciateur — La mesure honnête
   ============================================================ */
.honest{padding:64px 0}
.honest .grid{display:grid; gap:34px; align-items:center; margin-top:36px}
.compare{display:grid; gap:14px}
.cmp{padding:20px 20px; border-radius:var(--r-lg); border:1px solid var(--hairline); background:var(--surface)}
.cmp .h{display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:12px}
.cmp .h .ti{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none}
.cmp.bad{opacity:.85}
.cmp.bad .h{color:var(--conf-low)}
.cmp.bad .ti{background:color-mix(in oklab,var(--conf-low),transparent 84%); color:var(--conf-low)}
.cmp.bad .val{font-family:var(--num); font-size:34px; font-weight:800; color:var(--txt2); text-decoration:line-through; text-decoration-color:var(--conf-low); text-decoration-thickness:2px}
.cmp.bad .note{font-size:13px; color:var(--txt3); margin-top:6px}
.cmp.good{border-color:color-mix(in oklab,var(--accent),transparent 60%); box-shadow:0 0 0 1px color-mix(in oklab,var(--accent),transparent 78%), 0 18px 40px rgba(0,0,0,.4)}
.cmp.good .h{color:var(--accent)}
.cmp.good .ti{background:color-mix(in oklab,var(--accent),transparent 82%); color:var(--accent)}
.cmp.good .val{font-family:var(--num); font-size:34px; font-weight:800}
.cmp.good .val .u{font-size:15px; color:var(--txt2); font-weight:700; margin-left:4px}
.cmp.good .bar{height:8px; border-radius:var(--r-full); background:rgba(255,255,255,.08); position:relative; overflow:hidden; margin:14px 0 8px}
.cmp.good .bar i{position:absolute; top:0; bottom:0; left:22%; right:28%; border-radius:var(--r-full); background:linear-gradient(90deg,var(--accent),var(--accent2))}
.cmp.good .ticks{display:flex; justify-content:space-between; font-family:var(--num); font-size:11px; color:var(--txt3)}
.cmp.good .note{font-size:13px; color:var(--txt2); margin-top:10px; line-height:1.5}

/* ============================================================
   Grille fonctionnalités
   ============================================================ */
.features{display:grid; gap:16px; margin-top:40px}
.feature{padding:24px 22px}
.feature .fi{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  background:color-mix(in oklab,var(--accent2),transparent 86%); border:1px solid color-mix(in oklab,var(--accent2),transparent 70%);
}
.feature .fi svg{width:23px; height:23px; stroke:var(--accent2); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.feature h3{font-size:17px; margin-bottom:7px}
.feature p{font-size:14px; color:var(--txt2); line-height:1.55}

/* ============================================================
   Tarifs
   ============================================================ */
.pricing{padding:64px 0}
.plans{display:grid; gap:18px; margin-top:40px; max-width:760px; margin-left:auto; margin-right:auto}
.plan{padding:28px 26px; position:relative}
.plan .pn{font-size:14px; font-weight:700; color:var(--txt2); letter-spacing:.02em}
.plan .price{font-family:var(--num); margin:14px 0 4px; display:flex; align-items:baseline; gap:6px}
.plan .price .a{font-size:42px; font-weight:800; letter-spacing:-.03em}
.plan .price .per{font-size:14px; color:var(--txt2)}
.plan .alt{font-size:13px; color:var(--txt3); min-height:18px}
.plan ul{list-style:none; margin:22px 0 24px; display:grid; gap:12px}
.plan li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--txt2)}
.plan li svg{width:18px; height:18px; flex:none; margin-top:1px; stroke:var(--accent); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.plan.featured{
  border-color:color-mix(in oklab,var(--accent),transparent 55%);
  background:linear-gradient(180deg, color-mix(in oklab,var(--accent),transparent 92%), var(--surface));
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent),transparent 72%), 0 24px 60px rgba(0,0,0,.45);
}
.plan .badge{position:absolute; top:22px; right:22px; font-size:11px; font-weight:800; letter-spacing:.04em;
  padding:5px 11px; border-radius:var(--r-full); background:var(--accent); color:var(--accent-ink)}

/* ============================================================
   CTA final
   ============================================================ */
.cta{padding:30px 0 76px}
.cta-box{
  text-align:center; padding:56px 28px; border-radius:var(--r-2xl); overflow:hidden; position:relative;
  border:1px solid color-mix(in oklab,var(--accent),transparent 64%);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(76,230,158,.22), transparent 60%),
    var(--surface);
}
.cta-box h2{font-size:clamp(26px,5vw,40px); margin-bottom:14px}
.cta-box p{color:var(--txt2); max-width:480px; margin:0 auto 28px; font-size:16px}
.cta-box .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ============================================================
   Footer commun
   ============================================================ */
.site-footer{border-top:1px solid var(--hairline); padding:48px 0 38px}
.foot{display:grid; gap:28px}
.foot .brand-col{max-width:300px}
.foot .brand-col p{color:var(--txt3); font-size:13.5px; margin-top:14px; line-height:1.6}
.foot nav{display:flex; flex-wrap:wrap; gap:14px 28px}
.foot nav a{color:var(--txt2); font-size:14px; transition:color .15s}
.foot nav a:hover{color:var(--accent)}
.foot-bottom{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; justify-content:space-between;
  margin-top:34px; padding-top:22px; border-top:1px solid var(--hairline); color:var(--txt3); font-size:12.5px}

/* ============================================================
   Pages légales
   ============================================================ */
.legal{padding:48px 0 80px}
.legal-head{max-width:720px; margin-bottom:14px}
.legal-head .eyebrow{margin-bottom:14px}
.legal-head h1{font-size:clamp(30px,6vw,46px)}
.legal-head .upd{color:var(--txt3); font-size:13.5px; margin-top:14px}
.legal-layout{display:grid; gap:36px; margin-top:40px}
.toc{align-self:start}
.toc .card{padding:18px 18px}
.toc .lbl{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--txt3); margin-bottom:12px}
.toc ol{list-style:none; counter-reset:t; display:grid; gap:3px}
.toc li{counter-increment:t}
.toc a{display:flex; gap:10px; padding:8px 10px; border-radius:var(--r-sm); font-size:13.5px; color:var(--txt2); transition:background .15s,color .15s}
.toc a::before{content:counter(t,decimal-leading-zero); font-family:var(--num); color:var(--txt3); font-weight:700}
.toc a:hover{background:var(--surface); color:var(--txt)}

.prose{max-width:720px; color:var(--txt2); font-size:15.5px; line-height:1.7}
.prose h2{color:var(--txt); font-size:23px; margin:38px 0 12px; scroll-margin-top:80px}
.prose h2:first-child{margin-top:0}
.prose h3{color:var(--txt); font-size:17px; margin:24px 0 8px; font-weight:700}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px; padding-left:4px; list-style:none; display:grid; gap:9px}
.prose ul li{display:flex; gap:11px; align-items:flex-start}
.prose ul li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-top:9px; flex:none}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-color:color-mix(in oklab,var(--accent),transparent 55%)}
.prose strong{color:var(--txt)}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width:720px){
  :root{--pad-x:32px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .honest .grid{grid-template-columns:1fr 1fr}
  .compare{grid-template-columns:1fr; gap:14px}
  .plans{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1.4fr 1fr; align-items:start}
  .legal-layout{grid-template-columns:240px 1fr; gap:48px}
  .toc{position:sticky; top:80px}
}
@media (min-width:960px){
  .nav .links{display:flex}
  .menu-btn{display:none}
  .hero{padding:74px 0 40px}
  .hero .grid{grid-template-columns:1.05fr .95fr}
  .hero-copy{padding-right:10px}
  .features{grid-template-columns:repeat(4,1fr)}
  .phone{width:300px; height:626px}
}