/* ValEye — site public, espace client et admin (même identité que l'appli) */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#06080c; --bg2:#0a0d14; --panel:#0f131b; --panel2:#151a25; --line:#1d2333; --line2:#283048;
  --text:#eef0f6; --muted:#9097aa; --faint:#5d6579;
  --accent:#ff4655; --accent2:#ff8a70; --cyan:#3ee6d0; --ally:#3ddc97; --enemy:#ff5d6c; --warn:#f5b94a; --info:#6ea8ff;
  --font:"Inter","Segoe UI",system-ui,sans-serif; --disp:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --r:18px; --glass:linear-gradient(180deg,#121722e6,#0c1018e6); --edge:inset 0 1px 0 #ffffff12;
  --shadow:0 30px 60px -30px #000,0 2px 8px -2px #0008;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:.4px;margin:0;line-height:1.08}
::selection{background:#ff465566}
::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-thumb{background:#232a3a;border-radius:10px;border:3px solid var(--bg)}
.wrap{width:min(1200px,100% - 40px);margin:0 auto}
.grad{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)} .faint{color:var(--faint)} .good{color:var(--ally)} .bad{color:var(--enemy)}
.mono{font-variant-numeric:tabular-nums}
.hidden{display:none!important}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--line2);
  background:linear-gradient(180deg,#171c28,#121722);color:#dfe3ec;font:600 14px var(--font);cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;box-shadow:var(--edge)}
.btn:hover{border-color:#3a4560;color:#fff;transform:translateY(-1px)}
.btn.primary{border:0;background:linear-gradient(180deg,#ff5866,#e0303f);color:#fff;box-shadow:0 14px 34px -12px #ff4655,inset 0 1px 0 #ffffff40;position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff45 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s}
.btn.primary:hover::after{transform:translateX(100%)}
.btn.primary:hover{box-shadow:0 18px 40px -12px #ff4655,inset 0 1px 0 #ffffff40}
.btn.ghost{background:transparent;box-shadow:none}
.btn.lg{height:54px;padding:0 28px;font-size:16px;border-radius:14px}
.btn.sm{height:34px;padding:0 13px;font-size:13px;border-radius:10px}
.btn.danger{color:#ffb3ba;border-color:#ff5d6c55}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:7px;font-size:11.5px;font-weight:700;background:#ffffff0a;border:1px solid var(--line2)}
.tag.acc{color:#fff;background:#ff465526;border-color:#ff465566} .tag.cy{color:var(--cyan);border-color:#3ee6d055;background:#3ee6d014}
.tag.ok{color:var(--ally);border-color:#3ddc9755;background:#3ddc9714} .tag.warn{color:var(--warn);border-color:#f5b94a55;background:#f5b94a14}

/* ---------- navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.solid{background:#06080cd9;backdrop-filter:blur(14px);border-color:#ffffff0d}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.brand svg{width:34px;height:34px;filter:drop-shadow(0 0 12px #ff465588);transition:transform .4s}
.brand:hover svg{transform:rotate(-10deg) scale(1.06)}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:8px 12px;border-radius:9px;color:var(--muted);font-weight:600;font-size:14px;transition:color .2s,background .2s}
.nav-links a:hover{color:#fff;background:#ffffff08}
.nav .grow{flex:1}
.nav-user{display:flex;align-items:center;gap:10px}
.av{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font:700 14px var(--disp);color:#fff;background:linear-gradient(135deg,var(--av1,#ff4655),var(--av2,#7c3aed));overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){ .nav-links{display:none} }

/* ---------- sections ---------- */
section{position:relative;padding:120px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--font);letter-spacing:2.4px;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.sec-h{max-width:720px;margin-bottom:56px}
.sec-h h2{font-size:clamp(32px,4.2vw,52px);text-transform:uppercase;margin:14px 0 14px}
.sec-h p{color:var(--muted);font-size:17px;margin:0}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* apparition au défilement */
[data-rv]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
[data-rv].in{opacity:1;transform:none}
[data-rv="left"]{transform:translateX(-50px)} [data-rv="right"]{transform:translateX(50px)} [data-rv="zoom"]{transform:scale(.92)}
[data-rv].in{transform:none}

/* ---------- héros ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.hero canvas#hero3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(900px 600px at 15% 40%,#06080cf2 0%,#06080cb3 40%,transparent 75%),linear-gradient(180deg,transparent 60%,var(--bg))}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(46px,7vw,96px);text-transform:uppercase;line-height:.95;max-width:820px}
.hero h1 .l{display:block;overflow:hidden} .hero h1 .l span{display:inline-block;animation:lineUp 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
@keyframes lineUp{from{transform:translateY(110%)}}
.hero .lead{font-size:19px;color:#c4c9d6;max-width:560px;margin:26px 0 36px;animation:fadeUp .9s .5s both}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .9s .65s both}
.hero .meta{display:flex;gap:28px;margin-top:46px;animation:fadeUp .9s .8s both;flex-wrap:wrap}
.hero .meta b{display:block;font:700 28px var(--disp)} .hero .meta span{font-size:13px;color:var(--muted)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}
.scroll-hint{position:absolute;left:50%;bottom:28px;z-index:2;transform:translateX(-50%);width:26px;height:42px;border-radius:14px;border:2px solid #ffffff44}
.scroll-hint::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:wheel 1.6s infinite}
@keyframes wheel{to{transform:translateY(12px);opacity:0}}

/* ---------- bandeau défilant ---------- */
.marquee{border-block:1px solid var(--line);background:#0a0d14;overflow:hidden;padding:18px 0}
.marquee .tr{display:flex;gap:56px;width:max-content;animation:mq 40s linear infinite}
.marquee span{font:600 15px var(--disp);letter-spacing:2px;text-transform:uppercase;color:var(--faint);white-space:nowrap;display:flex;align-items:center;gap:14px}
.marquee span::before{content:"◆";color:var(--accent);font-size:10px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- présentation des pages de l'appli ---------- */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:64px;align-items:center;margin-bottom:150px}
.feat.rev{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} .feat.rev .ft{order:2}
.feat:last-child{margin-bottom:0}
.ft h3{font-size:clamp(28px,3vw,40px);text-transform:uppercase;margin:12px 0 16px}
.ft p{color:var(--muted);font-size:16.5px;margin:0 0 20px}
.ft ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ft li{display:flex;gap:12px;align-items:flex-start;color:#cfd3dd}
.ft li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:6px;background:#ff46551f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4655' stroke-width='3'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1px #ff465555}
.shot{position:relative;perspective:1400px}
.shot .frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid #ffffff1a;box-shadow:0 50px 100px -40px #000,0 0 0 1px #000,0 30px 80px -50px var(--glow,#ff4655);
  transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,4deg));transition:transform .25s ease-out;background:#0b0e14}
.feat.rev .shot .frame{--ry:8deg}
.shot .frame::before{content:"";display:block;height:28px;background:linear-gradient(180deg,#161b27,#10141d);border-bottom:1px solid #ffffff10}
.shot .frame::after{content:"";position:absolute;left:14px;top:10px;width:9px;height:9px;border-radius:50%;background:#ff5f57;box-shadow:14px 0 #febc2e,28px 0 #28c840}
.shot .glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#ffffff12 50%,transparent 60%);background-size:250% 100%;background-position:var(--gx,100%) 0;mix-blend-mode:screen}
.shot .badge{position:absolute;z-index:3;padding:10px 14px;border-radius:14px;background:#0d1119f2;border:1px solid #ffffff1c;box-shadow:0 20px 40px -14px #000;font-size:13px;display:flex;gap:10px;align-items:center;animation:float 5s ease-in-out infinite}
.shot .badge b{font-family:var(--disp);font-size:20px}
.shot .badge.a{left:-26px;bottom:40px} .shot .badge.b{right:-22px;top:60px;animation-delay:-2.5s}
@keyframes float{50%{transform:translateY(-10px)}}
@media (max-width:960px){ .feat,.feat.rev{grid-template-columns:1fr;gap:34px} .feat.rev .ft{order:0} .shot .badge{display:none} }

/* ---------- chiffres ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:28px;border-radius:var(--r);background:var(--glass);border:1px solid #ffffff0f;box-shadow:var(--shadow),var(--edge)}
.stat b{display:block;font:700 44px var(--disp);background:linear-gradient(180deg,#fff,#aab0c0);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:14px}
@media (max-width:860px){ .stats{grid-template-columns:1fr 1fr} }

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:st}
.step{position:relative;padding:30px;border-radius:var(--r);background:var(--glass);border:1px solid #ffffff0f;overflow:hidden}
.step::before{counter-increment:st;content:"0" counter(st);position:absolute;right:18px;top:6px;font:700 72px var(--disp);color:#ffffff08}
.step .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:24px;background:#ff465518;box-shadow:inset 0 0 0 1px #ff465544;margin-bottom:18px}
.step h4{font-size:20px;text-transform:uppercase;margin-bottom:8px} .step p{margin:0;color:var(--muted);font-size:14.5px}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }

/* ---------- offres ---------- */
.bill{display:inline-flex;padding:5px;border-radius:14px;background:#0b0e15;border:1px solid var(--line2);margin:0 auto 46px;position:relative}
.bill button{position:relative;z-index:1;height:40px;padding:0 22px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:700 14px var(--font);cursor:pointer;transition:color .2s}
.bill button.on{color:#fff}
.bill i{position:absolute;top:5px;bottom:5px;left:5px;border-radius:10px;background:linear-gradient(180deg,#262e40,#1b2130);transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s}
.bill em{font-style:normal;font-size:11px;color:var(--ally);margin-left:6px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:32px 30px;border-radius:22px;background:var(--glass);border:1px solid #ffffff10;box-shadow:var(--shadow),var(--edge);transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-6px)}
.plan.best{background:linear-gradient(180deg,#1d1219f2,#0f0b11f2);border-color:#ff465577;box-shadow:0 40px 90px -40px #ff4655,var(--edge)}
.plan.best::before{content:attr(data-best);position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:999px;background:linear-gradient(90deg,#ff4655,#ff8a70);font:800 11px var(--font);letter-spacing:1.2px;text-transform:uppercase;color:#fff;white-space:nowrap}
.plan h3{font-size:24px;text-transform:uppercase}
.plan .desc{color:var(--muted);font-size:14px;margin:6px 0 22px;min-height:44px}
.plan .price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.plan .price b{font:700 54px var(--disp);line-height:1}
.plan .price span{color:var(--muted)}
.plan .per{font-size:12.5px;color:var(--faint);min-height:20px;margin-bottom:22px}
.plan ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:11px;flex:1}
.plan li{display:flex;gap:10px;font-size:14.5px;color:#cfd3dd}
.plan li::before{content:"✓";color:var(--ally);font-weight:900}
@media (max-width:960px){ .plans{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{border-radius:16px;background:var(--glass);border:1px solid #ffffff0f;padding:0 22px;transition:background .2s}
.faq details[open]{background:linear-gradient(180deg,#151a27,#0f131b)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:700;font-size:16px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px var(--disp);color:var(--accent);transition:transform .3s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 20px;color:var(--muted)}

/* ---------- appel final + pied de page ---------- */
.final{padding:110px 0;text-align:center;overflow:hidden}
.final .box{position:relative;padding:80px 30px;border-radius:30px;background:radial-gradient(600px 300px at 50% 0,#ff46553a,transparent 70%),linear-gradient(180deg,#121722,#0a0d14);border:1px solid #ffffff14;overflow:hidden}
.final h2{font-size:clamp(34px,5vw,62px);text-transform:uppercase}
.final p{color:var(--muted);font-size:17px;margin:16px auto 34px;max-width:520px}
footer{border-top:1px solid var(--line);padding:56px 0 40px;color:var(--muted);font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:30px}
footer h5{margin:0 0 14px;font:700 12px var(--font);letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
footer a{display:block;padding:4px 0;transition:color .2s} footer a:hover{color:#fff}
footer .legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media (max-width:860px){ footer .cols{grid-template-columns:1fr 1fr} }

/* ---------- formulaires (connexion, compte, admin) ---------- */
.card{background:var(--glass);border:1px solid #ffffff10;border-radius:var(--r);box-shadow:var(--shadow),var(--edge)}
.f{display:block;margin-bottom:14px}
.f>span{display:block;font-size:12px;font-weight:650;color:var(--muted);margin-bottom:6px}
.inp{width:100%;height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:#080b11;color:var(--text);font:inherit;font-size:14.5px;transition:border-color .2s,box-shadow .2s}
.inp:focus{outline:none;border-color:#ff465599;box-shadow:0 0 0 3px #ff46551f}
textarea.inp{height:auto;min-height:90px;padding:12px 14px;resize:vertical}
.f.bad .inp{border-color:var(--enemy);box-shadow:0 0 0 3px #ff5d6c22}
.err{display:none;padding:10px 14px;border-radius:11px;background:#ff5d6c14;border:1px solid #ff5d6c44;color:#ffb3ba;font-size:13.5px;margin:4px 0 12px}
.err.on{display:block;animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.toast{position:fixed;left:50%;bottom:28px;z-index:99;transform:translate(-50%,20px);opacity:0;padding:12px 18px;border-radius:12px;background:#171c29f2;border:1px solid #323b52;box-shadow:0 20px 40px #000a;transition:all .3s;font-size:14px}
.toast.on{opacity:1;transform:translate(-50%,0)} .toast.er{border-color:#ff5d6c88;color:#ffd0d4}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid #ffffff44;border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} [data-rv]{opacity:1;transform:none} }

.lang-sw{display:flex;padding:3px;border-radius:10px;background:#0b0e15;border:1px solid var(--line2);margin-right:4px}
.lang-sw button{height:28px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:700 12px var(--font);cursor:pointer}
.lang-sw button.on{background:linear-gradient(180deg,#262e40,#1b2130);color:#fff}
/* sobriété (pages compte, paiement, admin) */
.card,.kpi,.plan{box-shadow:none!important}
.btn.primary{box-shadow:0 8px 20px -12px #ff4655,inset 0 1px 0 #ffffff33}

/* ===== header v2 : toujours lisible, plus net ===== */
.nav,.nav.solid{background:linear-gradient(180deg,#05070bf2,#06080ce0);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid #ffffff10}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#ff465566 30%,#3ee6d055 70%,transparent);opacity:.7}
.nav .wrap{height:64px;gap:22px;width:min(1800px,100% - 40px)}
.brand svg{width:30px;height:30px}
.nav-links a{position:relative;padding:8px 11px;font-size:13.5px}
.nav-links a:hover{background:none}
.nav-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;border-radius:2px;background:var(--accent,#ff4655);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover::after{transform:scaleX(1)}
.lang-sw{align-items:center;gap:2px;padding:3px 3px 3px 9px;border-radius:999px;background:#ffffff07;border:1px solid #ffffff14}
.lang-sw::before{content:"";width:14px;height:14px;margin-right:4px;opacity:.6;background:currentColor;color:#aab1c2;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") center/contain no-repeat}
.lang-sw button{height:26px;padding:0 11px;border-radius:999px;transition:color .2s,background .2s}
.lang-sw button:hover{color:#fff}
.lang-sw button.on{background:#f1f3f7;color:#0b0d12}
.nav-user .btn.sm{height:36px}

/* ===== zoom 80 % par défaut sur tout le site ===== */
html{zoom:.8}
/* les fenêtres plein écran annulent le zoom pour garder leur taille réelle */
.aw-back,.aw:not(.inline){zoom:1.25}
.hero{min-height:125vh}
/* ===== boutons v2 : plats, nets ===== */
.btn{height:42px;padding:0 18px;border-radius:10px;border:1px solid #ffffff1c;background:#ffffff08;color:#e9ecf2;font-weight:700;letter-spacing:.1px;box-shadow:none;
  transition:background .18s,border-color .18s,color .18s,transform .12s}
.btn:hover{background:#ffffff12;border-color:#ffffff33;color:#fff;transform:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid #3ee6d0;outline-offset:2px}
.btn svg{transition:transform .2s} .btn:hover svg{transform:translateY(1px)}
.btn.primary,.btn.primary:hover{background:#ff4655;border:1px solid #ff6b77;color:#fff;box-shadow:inset 0 1px 0 #ffffff38,0 1px 2px #0008}
.btn.primary:hover{background:#ff5a68}
.btn.primary::after{display:none}
a.btn.try,button.btn.try{background:#3ee6d0;border:1px solid #7ff3e3;color:#03141a;box-shadow:inset 0 1px 0 #ffffff70,0 1px 2px #0008}
a.btn.try:hover,button.btn.try:hover{background:#5ef0dc;color:#03141a;box-shadow:inset 0 1px 0 #ffffff70,0 1px 2px #0008}
.btn.ghost{background:transparent;border-color:#ffffff26}
.btn.ghost:hover{background:#ffffff0d}
.btn.lg{height:50px;padding:0 24px;font-size:15.5px;border-radius:12px}
.btn.sm{height:34px;padding:0 13px;font-size:13px;border-radius:9px}
.nav-user .btn.sm{height:36px}

/* ===== boutons v3 : relief léger, icônes animées, bouton de téléchargement sur deux lignes ===== */
.btn{position:relative;background:linear-gradient(180deg,#ffffff0f,#ffffff06);border:1px solid #ffffff1f;box-shadow:inset 0 1px 0 #ffffff12;
  transition:background .2s,border-color .2s,box-shadow .25s,transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:hover{background:linear-gradient(180deg,#ffffff17,#ffffff0a);border-color:#ffffff3a;transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{flex:none} .btn:hover svg{transform:none}
.btn .ar{transition:transform .25s cubic-bezier(.2,.8,.2,1)} .btn:hover .ar{transform:translateX(3px)}
.btn.primary,.btn.primary:hover{background:linear-gradient(180deg,#ff6370,#e93444);border:1px solid #ff7d88;color:#fff;
  box-shadow:inset 0 1px 0 #ffffff55,inset 0 -1px 0 #0000002e,0 8px 22px -10px #ff4655cc}
.btn.primary:hover{background:linear-gradient(180deg,#ff707c,#f03d4d);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -1px 0 #0000002e,0 14px 30px -12px #ff4655}
a.btn.try,button.btn.try{background:linear-gradient(180deg,#5ef0dc,#2fd3c0);border:1px solid #8af6e8;color:#03141a;box-shadow:inset 0 1px 0 #ffffff80,inset 0 -1px 0 #0000001f,0 8px 22px -10px #3ee6d0aa}
a.btn.try:hover,button.btn.try:hover{background:linear-gradient(180deg,#72f4e2,#38dcc8);box-shadow:inset 0 1px 0 #ffffff80,inset 0 -1px 0 #0000001f,0 14px 30px -12px #3ee6d0}
.btn.ghost{background:transparent;box-shadow:none}
.btn.lg{height:52px;padding:0 24px;gap:10px}
/* téléchargement : pastille d'icône + titre + sous-titre */
.btn.dl{height:auto;min-height:56px;padding:7px 22px 7px 8px;gap:12px;text-align:left;justify-content:flex-start}
.btn.dl .bi{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#00000026;box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff1f;overflow:hidden}
.btn.dl .bi svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn.dl:hover .bi svg{animation:dlBob .9s cubic-bezier(.2,.8,.2,1)}
@keyframes dlBob{40%{transform:translateY(5px)}41%{transform:translateY(-16px)}100%{transform:translateY(0)}}
.btn.dl .bt{display:flex;flex-direction:column;line-height:1.15}
.btn.dl b{font:800 15px var(--font);letter-spacing:.1px}
.btn.dl small{margin-top:3px;font:600 11.5px var(--font);opacity:.78;letter-spacing:.2px}
.live-h .btn.lg{height:56px}
.live-h .btn.dl{height:56px;min-height:0}

/* ===== boutons v4 : tous flottants comme « Plein écran » (contour fin, fond transparent) ===== */
.btn,.btn.primary,a.btn.try,button.btn.try,.btn.ghost{background:#ffffff05;border:1px solid #ffffff2b;color:#fff;box-shadow:none;backdrop-filter:blur(6px)}
.btn:hover,.btn.primary:hover,a.btn.try:hover,button.btn.try:hover,.btn.ghost:hover{background:#ffffff10;border-color:#ffffff55;color:#fff;box-shadow:none;transform:translateY(-1px)}
/* l'action principale garde un rappel de couleur discret : liseré + icône */
.btn.primary{border-color:#ff465599} .btn.primary:hover{border-color:#ff6b77;background:#ff465514}
.btn.primary svg{color:#ff6b77}
a.btn.try,button.btn.try{border-color:#3ee6d080} a.btn.try:hover,button.btn.try:hover{border-color:#5ef0dc;background:#3ee6d012}
.btn.try svg,.btn.try .pulse{color:#3ee6d0}
.btn.dl .bi{background:#ff46551a;box-shadow:inset 0 0 0 1px #ff465555}
.btn.dl .bi svg{color:#ff6b77}
.btn.dl small{color:#aab1c2;opacity:1}

/* contact Discord (pied de page + FAQ) */
footer .dc-contact{display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 10px;border-radius:10px;border:1px solid #5865f255;background:#5865f20f;color:#d6dae5;transition:border-color .2s,background .2s}
footer .dc-contact:hover{border-color:#5865f2;background:#5865f21f;color:#fff}
footer .dc-contact svg{color:#8b95ff;flex:none}
footer .dc-contact span{display:flex;flex-direction:column;line-height:1.2} footer .dc-contact b{font-weight:700;color:#fff} footer .dc-contact small{font-size:11px;color:var(--faint)}
.dc-inline{color:#8b95ff;font-weight:700;margin-left:4px} .dc-inline:hover{color:#fff}
/* bouton de téléchargement : flèche seule, sans pastille */
.btn.dl{padding:7px 22px 7px 18px;gap:12px}
.btn.dl .bi{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;overflow:visible}
.btn.dl .bi svg{color:#ff6b77;width:20px;height:20px}