/* ===========================================================
   LiquidViewer — site vitrine
   Palette reprise de l application : bleu nuit, accent bleu clair.
   =========================================================== */

:root{
  --bg:#060d18;
  --bg2:#0a1626;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --txt:#eaf2fb;
  --muted:#93a6bd;
  --brand:#4fa3f7;
  --brand-2:#2c5f8d;
  --brand-3:#7fc4ff;
  --up:#34d399;
  --warn:#ffcf3d;
  --radius:20px;
  --shadow:0 30px 80px rgba(0,0,0,.55);
  --max:1180px;
  --font:system-ui,-apple-system,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* The tokens and the glass cards deliberately overflow the phone's
   frame. With no clipping here, the phone could be dragged to the left
   and shifted the whole page, navigation bar included.
   `clip` rather than `hidden`: the latter makes <body> a scrolling
   area, which brought the problem back through another door. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:16px;line-height:1.6;letter-spacing:-.011em;
  overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.03em;font-weight:800}
h1{font-size:clamp(2.4rem,6.2vw,4.35rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.95rem)}
p{margin:0}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}
.center{justify-content:center;text-align:center}

/* ---------- Background decor: gradients and grid ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
    background:radial-gradient(120% 90% at 50% -10%,#12293f 0%,var(--bg2) 45%,var(--bg) 100%)}
.grid{position:absolute;inset:-2px;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 75%);
          mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 75%);
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.orb-a{width:640px;height:640px;top:-220px;left:-140px;
  background:radial-gradient(circle at 35% 35%,#3c86d6,#12365c 60%,transparent 72%)}
.orb-b{width:520px;height:520px;top:520px;right:-180px;
  background:radial-gradient(circle at 40% 40%,#1f6fb2,#0d2b48 60%,transparent 72%)}
.orb-c{width:700px;height:700px;bottom:-260px;left:35%;opacity:.35;
  background:radial-gradient(circle at 45% 45%,#2b8f8a,#0d2b48 58%,transparent 72%)}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:22px;
  padding:14px max(24px,calc((100vw - var(--max))/2 + 24px));
  transition:background .25s,border-color .25s,backdrop-filter .25s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(6,13,24,.78);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line);
}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.brand-mark{width:34px;height:34px;display:block;filter:drop-shadow(0 6px 14px rgba(79,163,247,.4))}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-name b{color:var(--brand-3);font-weight:800}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{
  padding:9px 14px;border-radius:11px;color:var(--muted);font-size:.94rem;font-weight:500;
  transition:color .18s,background .18s;
}
.nav-links a:hover{color:var(--txt);background:var(--panel)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:8px}

/* Selecteur de langue */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--txt);
  font:inherit;font-size:.9rem;font-weight:600;transition:border-color .18s,background .18s;
}
.lang-btn:hover{border-color:var(--line-2);background:var(--panel-2)}
/* The flags are SVGs: the round comes from here, not from a mask. */
.lang-flag{display:block;width:22px;height:22px}
.lang-flag svg,.mini-flag svg,.flag-chip em svg{
  width:100%;height:100%;display:block;border-radius:50%;overflow:hidden;
}
.mini-flag{display:block;width:20px;height:20px;flex:none}
.chev{width:15px;height:15px;opacity:.6;transition:transform .2s}
.lang.open .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;width:270px;padding:8px;
  display:none;grid-template-columns:1fr 1fr;gap:2px;
  background:rgba(11,22,38,.97);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);
}
.lang.open .lang-menu{display:grid}
.lang-menu button{
  display:flex;align-items:center;gap:9px;padding:9px 10px;cursor:pointer;
  background:none;border:0;border-radius:10px;color:var(--muted);
  font:inherit;font-size:.87rem;text-align:left;transition:background .15s,color .15s;
}
.lang-menu button:hover{background:var(--panel-2);color:var(--txt)}
.lang-menu button.on{background:rgba(79,163,247,.16);color:#fff}

/* Boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:14px;font-weight:700;font-size:.98rem;
  border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .22s,background .2s;
}
.btn-sm{padding:10px 18px;font-size:.92rem;border-radius:12px}
.btn-primary{
  color:#04101d;background:linear-gradient(135deg,var(--brand-3),var(--brand));
  box-shadow:0 12px 30px rgba(79,163,247,.32);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(79,163,247,.42)}
.btn-ghost{background:var(--panel);border-color:var(--line-2);color:var(--txt)}
.btn-ghost:hover{background:var(--panel-2);transform:translateY(-2px)}

.burger{display:none;width:42px;height:40px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;cursor:pointer;padding:0;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger span{width:17px;height:2px;background:var(--txt);border-radius:2px;transition:transform .2s,opacity .2s}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Hero ---------- */
.hero{padding:clamp(48px,7vw,96px) 0 40px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}
.pill{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;margin-bottom:26px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:999px;
  font-size:.83rem;font-weight:600;color:var(--muted);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--up);
  box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.grad{
  background:linear-gradient(100deg,#7fc4ff 0%,#4fa3f7 40%,#39d3a7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{margin:22px 0 32px;max-width:36em;font-size:clamp(1.03rem,1.5vw,1.19rem);color:var(--muted)}
.fineprint{font-size:.85rem;color:#7d8fa6}
.fineprint.center{text-align:center;max-width:60ch;margin:28px auto 0}

/* Bannieres de telechargement */
.stores{display:flex;flex-wrap:wrap;gap:14px}
.store{
  display:flex;align-items:center;gap:12px;padding:11px 20px 11px 17px;
  background:#0b1524;border:1px solid var(--line-2);border-radius:14px;
  transition:transform .18s,border-color .18s,box-shadow .22s;
}
.store:hover{transform:translateY(-3px);border-color:rgba(127,196,255,.55);box-shadow:0 16px 34px rgba(0,0,0,.45)}
.store-ico{width:26px;height:26px;color:#fff;flex:none}
.store-txt{display:flex;flex-direction:column;line-height:1.15}
.store-txt small{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.store-txt b{font-size:1.06rem;font-weight:700}
.stores.center{justify-content:center;margin-top:30px}

/* --- 3D scene of the hero --- */
.hero-visual{position:relative;display:flex;justify-content:center;perspective:1400px}
.stage{position:relative;width:min(100%,420px);padding:30px 0}
.halo{
  position:absolute;inset:-14% -22%;border-radius:50%;filter:blur(60px);opacity:.75;
  background:radial-gradient(circle at 50% 45%,rgba(79,163,247,.55),rgba(45,110,180,.16) 45%,transparent 70%);
}

/* Phone: frame in CSS, real screenshot inside */
.phone{position:relative;margin:0 auto;width:min(100%,300px);transform-style:preserve-3d;
  transform:rotateY(-13deg) rotateX(5deg) rotate(-1.5deg);animation:floatY 7s ease-in-out infinite}
.phone.sm{width:min(100%,268px);transform:rotateY(-9deg) rotateX(4deg);animation:none}
.feat.reverse .phone.sm{transform:rotateY(9deg) rotateX(4deg)}
.phone-body{
  position:relative;border-radius:38px;padding:9px;overflow:hidden;
  background:linear-gradient(150deg,#33405a,#131c2c 40%,#0a111c);
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.09) inset,
             0 2px 0 rgba(255,255,255,.22) inset;
}
.phone-body img{border-radius:30px;width:100%;height:auto}
.phone-notch{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:2;
  width:34%;height:22px;background:#080d16;border-radius:0 0 14px 14px;
}
.phone-glow{position:absolute;inset:6% 12%;border-radius:50%;filter:blur(46px);z-index:-1;
  background:radial-gradient(circle,rgba(79,163,247,.7),transparent 70%)}
@keyframes floatY{0%,100%{transform:rotateY(-13deg) rotateX(5deg) rotate(-1.5deg) translateY(0)}
                  50%{transform:rotateY(-13deg) rotateX(5deg) rotate(-1.5deg) translateY(-16px)}}

/* Jetons 3D */
.coin{position:absolute;width:78px;height:78px;transform-style:preserve-3d;z-index:3;
  animation:coinFloat 8s ease-in-out infinite}
.coin-face{
  position:relative;width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  font-size:2rem;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35);
  box-shadow:0 18px 34px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.25) inset,
             0 -10px 18px rgba(0,0,0,.35) inset,0 10px 16px rgba(255,255,255,.28) inset;
}
.coin-side{position:absolute;inset:0;border-radius:50%;transform:translateZ(-10px) scale(.97);
  background:rgba(0,0,0,.5);filter:blur(3px)}
.coin-btc{top:2%;right:-4%;animation-delay:-1s}
.coin-btc .coin-face{background:linear-gradient(145deg,#ffc24d,#f7931a 45%,#a35c05)}
.coin-eth{bottom:16%;left:-9%;width:66px;height:66px;animation-delay:-3.5s}
.coin-eth .coin-face{background:linear-gradient(145deg,#a4b4ff,#627eea 45%,#2f3f8f);font-size:1.7rem}
.coin-sol{top:38%;right:-9%;width:54px;height:54px;animation-delay:-5.5s}
.coin-sol .coin-face{background:linear-gradient(145deg,#7ef0d0,#14f195 40%,#9945ff);font-size:1.4rem;color:#04101d}
@keyframes coinFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(6deg)}}

/* Small glass cards */
.chip{
  position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:11px 15px;
  background:rgba(12,24,40,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:15px;box-shadow:0 18px 40px rgba(0,0,0,.5);
  animation:floatY2 6.5s ease-in-out infinite;
}
.chip-txt{display:flex;flex-direction:column;line-height:1.25}
.chip b{font-size:.95rem}
.chip small{font-size:.72rem;color:var(--muted)}
.chip-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;font-size:.8rem}
.chip-ico.up{background:rgba(52,211,153,.16);color:var(--up)}
.chip-ico.bell{background:rgba(255,207,61,.16)}
.chip-up{top:14%;left:-12%;animation-delay:-2s}
.chip-alert{bottom:9%;right:-10%;animation-delay:-4.5s}
@keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* Chiffres cles */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:clamp(48px,6vw,84px);
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.stat{display:flex;flex-direction:column;gap:4px;padding:26px 22px;background:rgba(9,18,31,.72);text-align:center}
.stat b{font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff,#8fc7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.86rem;color:var(--muted)}

/* ---------- Bandeau de sources ---------- */
.strip{padding:56px 0 12px;text-align:center}
.strip-title{font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;color:#6d7f95}
.strip-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:22px}
.strip-logos span{font-size:1.02rem;font-weight:700;color:#61748c;letter-spacing:-.02em;transition:color .2s}
.strip-logos span:hover{color:#b8cde4}

/* ---------- Sections ---------- */
.section{padding:clamp(60px,7vw,100px) 0}
.head{max-width:720px;margin:0 auto clamp(36px,4.5vw,58px);text-align:center}
.head p{margin-top:18px;font-size:1.06rem;color:var(--muted)}
.kicker{
  display:inline-block;margin-bottom:16px;padding:6px 13px;border-radius:999px;
  background:rgba(79,163,247,.12);border:1px solid rgba(79,163,247,.3);
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-3);
}

/* Blocs fonctionnalites */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,84px);align-items:center;
  padding:clamp(34px,5vw,58px) 0}
.feat.reverse .feat-text{order:2}
.feat-shot{display:flex;justify-content:center;perspective:1300px}
.tag{
  display:inline-block;margin-bottom:14px;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-3);
}
.feat-text p{margin:16px 0 24px;color:var(--muted);font-size:1.04rem}
.ticks li{position:relative;padding:9px 0 9px 32px;color:#c3d3e5;font-size:.98rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:14px;width:19px;height:19px;border-radius:6px;
  background:rgba(52,211,153,.14);
  box-shadow:0 0 0 1px rgba(52,211,153,.3) inset;
}
.ticks li::after{
  content:"";position:absolute;left:6px;top:19px;width:7px;height:4px;
  border-left:2px solid var(--up);border-bottom:2px solid var(--up);transform:rotate(-45deg);
}

/* ---------- Securite ---------- */
.sec-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:center}
.sec-visual{display:flex;justify-content:center;perspective:1000px}
.shield{width:min(100%,280px);animation:floatY2 8s ease-in-out infinite;
  filter:drop-shadow(0 34px 60px rgba(31,111,178,.45))}
.shield svg{width:100%;height:auto;display:block}
.sec-text h2{margin-top:4px}
.sec-text > p{margin:18px 0 32px;color:var(--muted);font-size:1.06rem}
.sec-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sec-card{
  display:flex;flex-direction:column;gap:7px;padding:20px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line);transition:border-color .2s,transform .2s,background .2s;
}
.sec-card:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-3px)}
.sec-card b{font-size:1rem}
.sec-card span{font-size:.9rem;color:var(--muted);line-height:1.55}

/* ---------- Langues ---------- */
.flags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:34px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
}
.flag-chip{
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);cursor:pointer;
  font:inherit;font-size:.94rem;font-weight:600;color:var(--txt);
  transition:transform .18s,border-color .18s,background .18s;
}
.flag-chip:hover{transform:translateY(-3px);border-color:rgba(127,196,255,.5);background:rgba(79,163,247,.1)}
.flag-chip.on{border-color:var(--brand);background:rgba(79,163,247,.16)}
.flag-chip em{display:block;width:26px;height:26px;flex:none}

/* ---------- Tarifs ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;padding:34px 28px 30px;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);transition:transform .25s,border-color .25s,box-shadow .25s;
}
.plan:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.plan.popular{
  border-color:rgba(79,163,247,.5);
  background:linear-gradient(180deg,rgba(79,163,247,.16),rgba(79,163,247,.03) 55%,rgba(255,255,255,.02));
  box-shadow:0 30px 70px rgba(24,80,140,.4);
}
.badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:6px 16px;border-radius:999px;
  background:linear-gradient(135deg,var(--brand-3),var(--brand));color:#04101d;
  font-size:.73rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 24px rgba(79,163,247,.4);
}
.plan-head{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.plan-price{display:flex;align-items:baseline;gap:5px;margin:14px 0 10px}
.plan-price b{font-size:2.9rem;font-weight:800;letter-spacing:-.04em}
.plan-price small{font-size:.95rem;color:var(--muted)}
.plan-note{font-size:.92rem;color:var(--muted)}
.plan-list{flex:1;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.plan-list li{display:flex;align-items:baseline;gap:8px;font-size:.97rem;color:#c9d8e8}
.plan-list li b{min-width:26px;font-weight:800;color:#fff}
.plan-list li.off{color:#7d8fa6}
.plan .btn{width:100%}

/* Tableau comparatif */
.table-wrap{margin-top:clamp(44px,6vw,72px);overflow-x:auto;border-radius:22px;
  border:1px solid var(--line);background:rgba(9,18,31,.6)}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:.97rem}
.cmp th,.cmp td{padding:17px 20px;text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{
  position:sticky;top:0;background:rgba(11,22,38,.96);backdrop-filter:blur(10px);
  padding-top:22px;padding-bottom:20px;font-weight:700;
}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:#c9d8e8;font-weight:600;min-width:230px}
.cmp thead th:first-child{font-size:1.05rem;letter-spacing:-.02em}
.th-name{display:block;font-size:1.08rem;font-weight:800}
.th-price{display:block;margin-top:3px;font-size:.85rem;font-weight:600;color:var(--muted)}
.cmp .hi{background:rgba(79,163,247,.08)}
.cmp thead .hi{background:rgba(79,163,247,.14)}
.cmp thead .hi .th-name{color:var(--brand-3)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover td{background:rgba(255,255,255,.03)}
.cmp tbody tr:hover td.hi{background:rgba(79,163,247,.13)}
.cmp .yes{color:var(--up);font-weight:800}
.cmp .no{color:var(--warn);font-weight:700}
.cmp .inf{font-size:1.25rem;font-weight:800;color:var(--brand-3)}
.cmp td{font-weight:700;color:#e3edf8}

/* ---------- Avis ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  display:flex;flex-direction:column;gap:16px;padding:26px;border-radius:20px;
  background:var(--panel);border:1px solid var(--line);
  transition:transform .22s,border-color .22s,background .22s;
}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--panel-2)}
.stars{display:flex;gap:3px;color:var(--warn)}
.stars svg{width:17px;height:17px}
.card q{quotes:none;font-size:1rem;line-height:1.65;color:#d5e2f0}
.who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.avatar{
  width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.95rem;color:#04101d;
  background:linear-gradient(135deg,var(--brand-3),var(--brand-2));
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.who b{display:block;font-size:.95rem}
.who span{font-size:.83rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.acc{display:flex;flex-direction:column;gap:12px}
.qa{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;
  transition:border-color .2s,background .2s}
.qa.open{border-color:rgba(79,163,247,.45);background:rgba(79,163,247,.07)}
.qa button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 22px;background:none;border:0;cursor:pointer;
  color:var(--txt);font:inherit;font-size:1.03rem;font-weight:700;text-align:left;letter-spacing:-.015em;
}
.qa .sign{position:relative;width:20px;height:20px;flex:none}
.qa .sign::before,.qa .sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--brand-3);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .25s,opacity .25s;
}
.qa .sign::before{width:14px;height:2px}
.qa .sign::after{width:2px;height:14px}
.qa.open .sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans > div{overflow:hidden}
.qa .ans p{padding:0 22px 22px;color:var(--muted);font-size:.99rem}

/* ---------- Appel final ---------- */
.cta-final{padding:0 0 clamp(72px,9vw,120px)}
.cta-box{
  position:relative;padding:clamp(48px,7vw,84px) 32px;border-radius:32px;text-align:center;overflow:hidden;
  background:linear-gradient(150deg,rgba(79,163,247,.2),rgba(20,45,75,.5) 55%,rgba(255,255,255,.03));
  border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.cta-orb{position:absolute;width:560px;height:560px;top:-260px;left:50%;transform:translateX(-50%);
  border-radius:50%;filter:blur(80px);opacity:.6;
  background:radial-gradient(circle,rgba(79,163,247,.7),transparent 68%)}
.cta-box h2{position:relative;max-width:17ch;margin:0 auto}
.cta-box p{position:relative;max-width:52ch;margin:20px auto 0;color:#c2d3e6}
.cta-box .stores{position:relative}

/* ---------- Pied de page ---------- */
.foot{border-top:1px solid var(--line);background:rgba(5,11,20,.7);padding:52px 0 26px}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-start}
/* The signature fits on one line: split in two, it looked like a
   paragraph when it is a brand sentence. */
.foot-tag{margin-top:14px;font-size:.93rem;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 26px}
.foot-links a{font-size:.93rem;color:var(--muted);transition:color .18s}
.foot-links a:hover{color:var(--brand-3)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.85rem;color:#66788f}

/* ---------- Adaptatif ---------- */
@media (max-width:1020px){
  .nav-links{
    position:fixed;top:70px;left:16px;right:16px;flex-direction:column;gap:2px;padding:12px;
    background:rgba(11,22,38,.97);backdrop-filter:blur(20px);border:1px solid var(--line-2);
    border-radius:18px;box-shadow:var(--shadow);display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 14px;font-size:1rem}
  .burger{display:flex}
  .hide-sm{display:none}
  .hero-grid{grid-template-columns:1fr;gap:56px;text-align:center}
  .hero-copy .pill,.hero-copy .stores{justify-content:center}
  .hero-copy .stores{justify-content:center}
  .lead{margin-left:auto;margin-right:auto}
  .feat,.sec-grid{grid-template-columns:1fr;gap:44px}
  .feat.reverse .feat-text{order:0}
  .feat-text{text-align:center}
  .ticks li{text-align:left;max-width:34em;margin:0 auto}
  .sec-text{text-align:center}
  .plans{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  /* The table fits whole: with a minimum width, the Premium column
     went out of frame and nothing indicated it had to be dragged to
     be seen. */
  .cmp{min-width:0;font-size:.86rem}
  .cmp th,.cmp td{padding:12px 6px}
  .cmp th:first-child,.cmp td:first-child{min-width:0;padding-left:12px}
  .cmp thead th:first-child{font-size:.9rem}
  .th-name{font-size:.95rem}
  .th-price{font-size:.75rem}
  /* Two flags per row: stacked, the list ran to ten rows. */
  .flags{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px}
  .flag-chip{padding:12px 12px;gap:9px;font-size:.9rem}
  .flag-chip em{width:22px;height:22px}
  .cards{grid-template-columns:1fr}
  .sec-cards{grid-template-columns:1fr}
  .coin-btc{width:60px;height:60px;font-size:1.5rem}
  .chip-up{left:-4%}
  .chip-alert{right:-2%}
  .lang-menu{width:236px;grid-template-columns:1fr}
}
@media (max-width:420px){
  .stores{flex-direction:column}
  .store{justify-content:center}
  .coin-eth,.coin-sol{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}