/* ===== Accueil : finitions ===== */
.launch-hero h1{letter-spacing:-.05em}
.launch-hero h1 span{background:linear-gradient(100deg,#ff6a6a,#ff2d3a 60%,#ff5a5a);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hp-shine 6s linear infinite}
@keyframes hp-shine{to{background-position:200% center}}
.hero-pill{box-shadow:0 0 24px #ff2d3a26;transition:transform .25s,box-shadow .25s}
.hero-pill:hover{transform:translateY(-2px);box-shadow:0 0 34px #ff2d3a55}
.hero-pill i{animation:hp-dot 1.8s ease-in-out infinite}
@keyframes hp-dot{50%{transform:scale(1.6);opacity:.6}}
.launch-hero .primary,.final-invite .primary{position:relative;overflow:hidden;transition:transform .2s,box-shadow .3s}
.launch-hero .primary::after,.final-invite .primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff40 50%,transparent 65%);transform:translateX(-130%);transition:transform .6s}
.launch-hero .primary:hover,.final-invite .primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 40px #ff2d3a88}
.launch-hero .primary:hover::after,.final-invite .primary:hover::after{transform:translateX(130%)}
.secondary-link{transition:transform .2s,border-color .2s,background .2s}
.secondary-link:hover{transform:translateY(-3px);border-color:#ff4a4a88;background:#ff2d3a12}
.hero-capabilities{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hero-capabilities span{padding:8px 14px;border:1px solid #ffffff1a;border-radius:99px;background:#ffffff06;transition:transform .2s,border-color .2s,background .2s}
.hero-capabilities span:hover{transform:translateY(-3px);border-color:#ff4a4a77;background:#ff2d3a14}

/* cartes possibilités */
.feature-stack article{position:relative;overflow:hidden;border:1px solid #ffffff14!important;border-radius:20px!important;background:linear-gradient(180deg,#ffffff08,#ffffff02),#0a0a0c!important;transition:transform .3s cubic-bezier(.22,.8,.22,1),border-color .3s,box-shadow .3s}
.feature-stack article::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0 0,#ff2d3a24,transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none}
.feature-stack article:hover{transform:translateX(-8px) translateY(-3px);border-color:#ff4a4a77!important;box-shadow:0 18px 44px #0009,0 0 34px #ff2d3a26}
.feature-stack article:hover::before{opacity:1}
.feature-icon{transition:transform .4s cubic-bezier(.22,1.4,.4,1),box-shadow .3s}
.feature-stack article:hover .feature-icon{transform:rotate(-8deg) scale(1.15);box-shadow:0 0 22px #ff2d3a77}
.feature-number{letter-spacing:.14em}
.text-cta{transition:transform .2s,gap .2s}
.text-cta:hover{transform:translateX(5px)}

/* FAQ de l'accueil */
.faq-list details{border:1px solid #ffffff14!important;border-radius:16px;margin-bottom:10px;padding:0 18px;background:linear-gradient(180deg,#ffffff07,#ffffff02),#0a0a0c;transition:border-color .3s,box-shadow .3s,background .3s}
.faq-list details:hover{border-color:#ff4a4a55!important}
.faq-list details[open]{border-color:#ff4a4a88!important;background:radial-gradient(ellipse at 100% 0,#ff2d3a1a,transparent 55%),#0c0a0c;box-shadow:0 0 30px #ff2d3a1f}
.faq-list summary{cursor:pointer;padding:18px 0;list-style:none;font-weight:650}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff22;border-radius:50%;transition:transform .35s cubic-bezier(.22,1.3,.4,1),background .25s}
.faq-list details[open] summary span{transform:rotate(135deg);background:#ff4a4a;border-color:#ff4a4a}
.faq-list details[open] p{animation:hp-open .4s ease}
@keyframes hp-open{from{opacity:0;transform:translateY(-8px)}}
.faq-list p{padding-bottom:18px;margin:0;line-height:1.7}

/* invitation finale */
.final-invite h2 span{background:linear-gradient(100deg,#ff6a6a,#ff2d3a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.invite-orbit{animation:hp-spin 40s linear infinite}
@keyframes hp-spin{to{transform:rotate(360deg)}}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:no-preference-off){.launch-hero h1 span,.hero-pill i,.invite-orbit{animation:none}}

/* ===== FX v2 ===== */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#ff2d3a,#ff8a8a,#ff2d3a);box-shadow:0 0 14px #ff2d3a;pointer-events:none}
.fx-spot{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,#ff2d3a22,transparent 65%);opacity:0;transition:opacity .4s;will-change:transform}
.fx-spot.on{opacity:1}
.fx-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:-1;animation:fx-float 12s ease-in-out infinite alternate}
.fx-orb.a{width:340px;height:340px;left:4%;top:8%;background:#ff2d3a;opacity:.18}
.fx-orb.b{width:280px;height:280px;right:6%;top:30%;background:#ff7a4a;opacity:.12;animation-delay:-5s}
@keyframes fx-float{to{transform:translate(50px,-40px) scale(1.2)}}
.launch-hero{position:relative}
.launch-hero>*:not(.fx-orb){will-change:transform}

/* tilt 3D */
[data-tilt]{transform-style:preserve-3d;transition:transform .15s ease-out,border-color .3s,box-shadow .3s}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),#ffffff1c,transparent 60%)}
[data-tilt].tilting::after{opacity:1}
.feature-stack article[data-tilt]:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px)}

/* apparition en cascade */
.reveal .feature-stack article,.reveal .faq-list details,.reveal .create-intro>*{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .8s cubic-bezier(.22,.8,.22,1),transform .8s cubic-bezier(.22,.8,.22,1),filter .8s,border-color .3s,box-shadow .3s;transition-delay:calc(var(--k,0)*110ms)}
.reveal.visible .feature-stack article,.reveal.visible .faq-list details,.reveal.visible .create-intro>*{opacity:1;transform:none;filter:none}
.reveal.visible .feature-stack article:hover{transition-delay:0s}
.faq-section.reveal>div:first-child{opacity:0;transform:translateX(-30px);transition:all .8s cubic-bezier(.22,.8,.22,1)}
.faq-section.reveal.visible>div:first-child{opacity:1;transform:none}

/* titres de section : trait animé */
.section-kicker{position:relative;display:inline-block}
.section-kicker::after{content:"";display:block;height:1px;margin-top:8px;width:0;background:linear-gradient(90deg,#ff4a4a,transparent);transition:width 1.1s .3s cubic-bezier(.22,.8,.22,1)}
.reveal.visible .section-kicker::after,.hero-pill+*{--x:0}
.reveal.visible .section-kicker::after{width:100%}
.final-invite h2{transition:letter-spacing 1.2s cubic-bezier(.22,.8,.22,1)}
.final-invite:not(.visible) h2{letter-spacing:.08em}

/* modèles : tuiles vivantes */
.model-tile{transition:transform .3s cubic-bezier(.22,1.4,.4,1),filter .3s}
.model-tile:hover{transform:translateY(-6px) scale(1.08);filter:drop-shadow(0 8px 20px var(--model-color,#ff2d3a))}

/* bouton retour en haut */
.fx-top{position:fixed;right:20px;bottom:20px;z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid #ff4a4a66;background:#0b0b0dcc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:20px;cursor:pointer;opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.22,1.4,.4,1),background .2s,box-shadow .3s}
.fx-top.show{opacity:1;transform:none;pointer-events:auto;animation:fx-bob 2.4s ease-in-out infinite}
.fx-top:hover{background:#ff2d3a;box-shadow:0 0 26px #ff2d3a99}
@keyframes fx-bob{50%{margin-bottom:5px}}

/* boutons magnétiques */
.mag{transition:transform .2s ease-out,box-shadow .3s}
@media(hover:none){.fx-spot{display:none}}
@media(prefers-reduced-motion:no-preference-off){.fx-orb,.fx-top.show{animation:none}}

/* iframes de démo : même schéma de couleurs que leur contenu => fond réellement transparent */
.free-mode-section iframe,.animated-demo-frame,.animated-experience iframe{color-scheme:dark!important;background:transparent!important}