/* 1.9.5 · habillage professionnel : profondeur 3D, animations d'entrée, dégradés. Aucun contenu n'est modifié. */
:root{--indigo:#5b4bff;--cyan:#22d3ee;--aur1:#1a5cff;--aur2:#7c3aed;--aur3:#14b8a6;--glass:#ffffff1a;--shadow-3d:0 40px 80px -20px #050c2099}
body{background:#f4f7ff;font-family:Manrope,system-ui,sans-serif}
h1,h2{font-weight:800}
/* En-tête verre dépoli */
.header{background:#0a1530cc;backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 #ffffff14,0 12px 30px -18px #000a;transition:background .3s}
.header.scrolled{background:#0a1530f2}
.nav a{position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--aur1),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after{transform:scaleX(1)}
.button{border-radius:14px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s}
.button.primary{background:linear-gradient(135deg,#2a6bff,#5b4bff);box-shadow:0 14px 34px -8px #3b5bff99,inset 0 1px 0 #ffffff55}
.button.primary:hover{background:linear-gradient(135deg,#1f5df0,#4a3af0);transform:translateY(-3px);box-shadow:0 22px 40px -10px #3b5bffcc,inset 0 1px 0 #ffffff55}
.button.ghost{backdrop-filter:blur(8px)}
.button.white{box-shadow:0 18px 40px -12px #0008}
.button.white:hover{transform:translateY(-3px) scale(1.02)}
.js-apk svg{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* Héros : aurore animée, grille en perspective, téléphones 3D */
.hero{position:relative;isolation:isolate;background:radial-gradient(900px 500px at 85% -10%,#5b4bff66,transparent 60%),radial-gradient(800px 520px at 0% 100%,#14b8a640,transparent 60%),linear-gradient(160deg,#07122b,#0e1f4d 55%,#16206b);padding-bottom:70px}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 18s ease-in-out infinite}
.hero::before{width:480px;height:480px;left:-120px;top:-80px;background:var(--aur2)}
.hero::after{width:520px;height:520px;right:-160px;bottom:-140px;background:var(--aur1);animation-delay:-9s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.15)}}
.hero-grid{position:relative}
.hero-grid::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-60px;height:260px;z-index:-1;background:linear-gradient(#ffffff12 1px,transparent 1px) 0 0/100% 38px,linear-gradient(90deg,#ffffff12 1px,transparent 1px) 0 0/54px 100%;transform:perspective(500px) rotateX(62deg);transform-origin:bottom;mask-image:linear-gradient(transparent,#000 70%);-webkit-mask-image:linear-gradient(transparent,#000 70%);animation:grid 7s linear infinite}
@keyframes grid{to{background-position:0 38px,54px 0}}
.hero::marker{content:none}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:70px;background:#f4f7ff;clip-path:ellipse(75% 100% at 50% 100%)}
.pill{background:#ffffff18;backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #ffffff33}
.dot{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #34d39988}100%{box-shadow:0 0 0 12px #34d39900}}
h1{background:linear-gradient(120deg,#fff 30%,#bcd0ff 70%,#9ee7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-visual{perspective:1400px;min-height:500px}
.hero-stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.phone{border-color:#0a1427;border-radius:36px;box-shadow:var(--shadow-3d),inset 0 0 0 2px #ffffff22;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.phone::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#ffffff3a 0%,transparent 35%,transparent 70%,#ffffff14);pointer-events:none}
.phone-back{transform:translateZ(0) rotateY(24deg) rotateZ(-6deg);animation:bob 7s ease-in-out infinite}
.phone-front{transform:translateZ(80px) rotateY(-16deg) rotateZ(5deg);animation:bob 6s ease-in-out -2s infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
.glow{background:radial-gradient(circle,#5b4bffaa,transparent 65%);animation:pulseGlow 5s ease-in-out infinite}
@keyframes pulseGlow{50%{opacity:.6;transform:scale(1.12)}}
.float-card{backdrop-filter:blur(14px);background:#ffffffee;border:1px solid #ffffffaa;transform:translateZ(130px);animation:bob 5s ease-in-out infinite}
.fc-2{animation-delay:-2.5s}
/* Bandeau en verre */
.strip{background:transparent;border:0;margin-top:-46px;position:relative;z-index:2}
.strip-inner{background:#ffffffd9;backdrop-filter:blur(16px);border:1px solid #fff;border-radius:24px;box-shadow:0 30px 60px -28px #12307a66;padding:26px 28px}
.strip-inner>div{position:relative;padding-left:16px}
.strip-inner>div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:4px;background:linear-gradient(var(--aur1),var(--cyan))}
/* Fonctionnalités : cartes 3D */
.features{perspective:1200px}
.feature{border:1px solid #e3e9f8;background:linear-gradient(160deg,#fff,#f5f8ff);border-radius:22px;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;overflow:hidden}
.feature::after{content:"";position:absolute;inset:auto -30% -60% auto;width:220px;height:220px;background:radial-gradient(circle,#5b4bff22,transparent 70%);pointer-events:none}
.feature:hover{box-shadow:0 36px 60px -26px #1f3a9a66}
.feature::before{width:48px;height:48px;border-radius:15px;box-shadow:0 14px 24px -10px #3b5bffaa,inset 0 1px 0 #ffffff66;transform:translateZ(30px);background:linear-gradient(135deg,#2a6bff,#7c3aed)}
.feature:nth-child(3n+2)::before{background:linear-gradient(135deg,#14b8a6,#2a6bff)}
.feature:nth-child(3n)::before{background:linear-gradient(135deg,#f59e0b,#ef4444)}
/* Confiance */
.trust{position:relative;isolation:isolate;background:linear-gradient(160deg,#07122b,#0e1f4d 60%,#1b1f70);overflow:hidden}
.trust::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(circle,#5b4bff77,transparent 65%);animation:drift 20s ease-in-out infinite}
.trust-list li{backdrop-filter:blur(10px);transition:transform .3s,background .3s}
.trust-list li:hover{transform:translateX(6px);background:#ffffff16}
.verify{transform:perspective(1000px) rotateY(-6deg);transition:transform .5s;box-shadow:var(--shadow-3d)}
.verify:hover{transform:perspective(1000px) rotateY(0)}
/* Installation */
.steps{counter-reset:s;position:relative}
.steps li{border-radius:22px;transition:transform .3s,box-shadow .3s;background:linear-gradient(160deg,#fff,#f3f6ff)}
.steps li:hover{transform:translateY(-6px);box-shadow:0 28px 46px -26px #1f3a9a77}
.steps li::before{width:44px;height:44px;background:linear-gradient(135deg,#2a6bff,#7c3aed);box-shadow:0 12px 22px -8px #4a3affaa}
.update-note{border-left:4px solid var(--blue);background:#eaf0ff}
/* Tarifs */
.pricing-section{background:linear-gradient(180deg,#fff,#f1f5ff)}
.plan{border-radius:26px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;background:#fff}
.plan:hover{transform:translateY(-8px) rotateX(2deg);box-shadow:0 36px 60px -30px #1f3a9a77}
.plan.featured{background:linear-gradient(160deg,#1a2e7a,#5b4bff);box-shadow:0 40px 70px -28px #5b4bffaa}
.news-list li{border-radius:16px;border-left:4px solid var(--aur3)}
/* FAQ */
.faq-list details{border-radius:18px;transition:box-shadow .3s,border-color .3s}
.faq-list details[open]{box-shadow:0 22px 40px -28px #1f3a9a77;border-color:#c9d6fb}
.faq-list summary::after{transition:transform .3s}
.faq-list details[open] summary::after{transform:rotate(180deg)}
/* Communauté */
.community-card{background:linear-gradient(135deg,#e6edff,#e3f8f3);border:1px solid #fff;box-shadow:0 30px 60px -36px #1f3a9a66}
.social{border-radius:14px;transition:transform .25s,box-shadow .25s}
.social:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 28px -14px #0007}
/* Téléchargement : anneaux animés */
.download{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#2a52ff,#5b4bff 55%,#0e1f4d)}
.download::before,.download::after{content:"";position:absolute;z-index:-1;border-radius:50%;border:1px solid #ffffff2e;animation:ring 9s ease-out infinite}
.download::before{width:420px;height:420px;right:6%;top:-120px}
.download::after{width:620px;height:620px;right:-6%;top:-220px;animation-delay:-4s}
@keyframes ring{0%{transform:scale(.8);opacity:0}30%{opacity:1}100%{transform:scale(1.25);opacity:0}}
.footer{background:#fff}
/* Apparition au défilement (activée seulement si le script s'exécute) */
.fx .rv{opacity:0;transform:translateY(32px) scale(.98);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.fx .rv.in{opacity:1;transform:none}
.fx .hero-copy>*{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.fx .hero-copy>*:nth-child(2){animation-delay:.1s}.fx .hero-copy>*:nth-child(3){animation-delay:.2s}.fx .hero-copy>*:nth-child(4){animation-delay:.3s}.fx .hero-copy>*:nth-child(5){animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:none}}
.scroll-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),var(--indigo))}
@media(max-width:959px){.hero-visual{min-height:440px}.verify{transform:none}.phone-back{transform:rotateY(14deg) rotateZ(-6deg)}.phone-front{transform:translateZ(40px) rotateY(-10deg) rotateZ(5deg)}}
@media(prefers-reduced-motion:reduce){
  .fx .rv,.fx .hero-copy>*{opacity:1!important;transform:none!important;animation:none!important}
  .hero::before,.hero::after,.hero-grid::before,.phone,.float-card,.glow,.download::before,.download::after,.dot,.js-apk svg,.trust::before{animation:none!important}
}

/* 1.9.5 — trois vrais téléphones (captures réelles 4K) : cadre fin, contour métal, caméra poinçon, boutons latéraux. */
.phone{width:min(232px,46%);border:0;border-radius:42px;padding:7px;background:linear-gradient(145deg,#2b3550,#0a0f1c 40%,#05070d);
  box-shadow:0 0 0 1.5px #3d4a6b,0 0 0 3px #070b14,var(--shadow-3d);overflow:visible}
.phone img{display:block;width:100%;height:auto;aspect-ratio:576/1280;object-fit:cover;border-radius:35px;background:#eef3ff}
.phone::before{content:"";position:absolute;right:-4px;top:22%;width:3px;height:12%;border-radius:0 3px 3px 0;background:linear-gradient(#3d4a6b,#1a2238);box-shadow:0 70px 0 #2a3350}
.phone::after{inset:7px;border-radius:35px;background:linear-gradient(118deg,#ffffff30 0%,#ffffff08 28%,transparent 42%,transparent 72%,#ffffff12)}
.phone .cam{position:absolute;z-index:2;left:50%;top:15px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2d3d66,#05070d 60%);box-shadow:0 0 0 2px #05070d}
.phone-front{left:50%;top:8px;margin-left:min(-116px,-23%);transform:none;z-index:3;animation:bob 6s ease-in-out -2s infinite}
.phone-left{left:0;top:58px;width:min(206px,40%);transform:translateZ(0) rotateY(26deg) rotateZ(-7deg);animation:bob 7s ease-in-out infinite;filter:saturate(.95) brightness(.94)}
.phone-right{right:0;top:58px;width:min(206px,40%);transform:translateZ(0) rotateY(-26deg) rotateZ(7deg);animation:bob 7.5s ease-in-out -3s infinite;filter:saturate(.95) brightness(.94)}
.hero-visual{min-height:560px;max-width:600px}
.fc-1{z-index:4;bottom:18px}.fc-2{z-index:4;bottom:0}
@media(max-width:959px){.hero-visual{min-height:470px}.phone-front{transform:none}.phone-left{transform:rotate(-7deg) scale(.96)}.phone-right{transform:rotate(7deg) scale(.96)}.phone-left,.phone-right{filter:none}.hero-stage{transform:none!important}}
@media(max-width:520px){.hero-visual{min-height:430px}.fc-1,.fc-2{bottom:-18px}.phone{padding:5px;border-radius:30px}.phone img,.phone::after{border-radius:25px}.phone::after{inset:5px}.phone .cam{top:10px;width:8px;height:8px;margin-left:-4px}}
@media (prefers-reduced-motion: reduce){.phone-left,.phone-right{animation:none!important}}