/* © 2026 AutoFUT Trader — logiciel propriétaire, tous droits réservés. Voir le fichier LICENSE. */
:root {
  --af-v: #8b5cf6; --af-v2: #a78bfa; --af-v3: #c4b5fd; --af-au: #e2c06b; --af-gd: #3ddc97; --af-ink: #08060d;
  --orange: #7c3aed; --orange-2: #a78bfa; --display: Cinzel, "Space Grotesk", serif;
}
html { scroll-behavior: smooth; }
body { background: var(--af-ink) !important; }
#af-silk { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.af-noise { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .065; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.af-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 15%, rgba(124,58,237,.16), transparent 55%), radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.7)); }
main, footer, .foot, .site-foot, section.hero, .layout { position: relative; z-index: 1; }
header.nav, header.topnav, .topnav { z-index: 50 !important; }

.af-gate { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.af-gate .d { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(90deg, #15101f, #221836 70%, #2a1d44); box-shadow: inset 0 0 120px rgba(0,0,0,.8); transition: transform .9s cubic-bezier(.7,0,.2,1); }
.af-gate .d::after { content: ""; position: absolute; top: 8%; bottom: 8%; right: 28px; width: 1px; background: linear-gradient(transparent, var(--af-au), transparent); opacity: .5; }
.af-gate .l { left: 0; } .af-gate .r { right: 0; transform: scaleX(-1); }
.af-gate img { position: absolute; left: 50%; top: 50%; width: 104px; transform: translate(-50%, -50%); transition: transform .8s cubic-bezier(.7,0,.2,1), opacity .5s; filter: drop-shadow(0 0 36px rgba(139,92,246,.8)); }
.af-gate.open .l { transform: translateX(-102%); }
.af-gate.open .r { transform: scaleX(-1) translateX(-102%); }
.af-gate.open img { transform: translate(-50%, -50%) scale(2.3); opacity: 0; }

h1, h2 { font-family: Cinzel, serif !important; font-weight: 800 !important; letter-spacing: .02em !important; }
h1 { background: linear-gradient(180deg, #fff 30%, #b6abd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 .accent, h2 .accent, h1 em, h2 em, .hero h1 span, .page-hero h1 span { background: linear-gradient(180deg, var(--af-v3), var(--af-v) 55%, #5b21b6); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-style: normal; }
h3 { font-family: Cinzel, serif !important; letter-spacing: .02em; }
.eyebrow, .kicker, .crumbs, .tagline { font-family: Cinzel, serif !important; letter-spacing: .32em !important; color: var(--af-au) !important; text-transform: uppercase; font-size: 11px !important; }
.crumbs a { color: var(--af-au) !important; opacity: .75; }

.topnav .nav-shell, header.nav .nav-shell, .nav-shell { background: rgba(10,8,16,.66) !important; border: 1px solid rgba(167,139,250,.18) !important; }
.brand { font-family: Cinzel, serif !important; letter-spacing: .1em; }
.brand span { color: var(--af-v2) !important; }
.nav-links a { position: relative; font-family: Cinzel, serif; letter-spacing: .14em; font-size: 12px !important; text-transform: uppercase; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--af-au); transform: scaleX(0); transition: transform .4s cubic-bezier(.2,.9,.2,1); }
.nav-links a:hover::after, .nav-links a.on::after { transform: scaleX(1); }

.btn { position: relative; overflow: hidden; transition: transform .25s ease-out, box-shadow .3s !important; }
.btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,240,200,.34) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s; }
.btn:hover::after { transform: translateX(120%); }
.btn-primary { background: linear-gradient(135deg, #7c3aed, #4c1d95) !important; color: #fff !important; border: 1px solid rgba(226,192,107,.45) !important; box-shadow: 0 0 30px rgba(124,58,237,.38); }
.btn-primary:hover { box-shadow: 0 0 52px rgba(167,139,250,.65) !important; }
.btn-ghost { border-color: rgba(167,139,250,.32) !important; }

.tile, .teaser, .fact, .plan, .dl-card, .card, .post, .q, .step, .flow-row, .tip, .help, .final, .video-frame, .faq details, .shot, .tile-shot {
  border-color: rgba(167,139,250,.18) !important;
}
.tile, .teaser, .fact, .plan, .dl-card, .card, .post, .step, .help {
  position: relative; overflow: hidden; background: linear-gradient(165deg, rgba(31,24,50,.82), rgba(14,11,22,.88)) !important; backdrop-filter: blur(6px);
  transition: border-color .4s, transform .25s ease-out, box-shadow .4s !important;
}
.tile::before, .teaser::before, .fact::before, .plan::before, .dl-card::before, .card::before, .post::before, .step::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(280px circle at var(--mx, -300px) var(--my, -300px), rgba(167,139,250,.15), transparent 70%);
}
.tile:hover, .teaser:hover, .fact:hover, .plan:hover, .dl-card:hover, .card:hover, .post:hover, .step:hover {
  border-color: rgba(226,192,107,.42) !important; box-shadow: 0 26px 60px rgba(0,0,0,.45), 0 0 40px rgba(124,58,237,.14);
}
.plan.hl { border-color: rgba(226,192,107,.6) !important; background: linear-gradient(170deg, rgba(62,38,110,.85), rgba(20,15,32,.9)) !important; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 60px rgba(124,58,237,.3); }
.plan.hl::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--af-a, 0deg), transparent 0 70%, var(--af-au) 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: afSpin 5s linear infinite; }
@property --af-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes afSpin { to { --af-a: 360deg; } }
.price, .num, .plan .price b { font-family: Cinzel, serif !important; background: linear-gradient(180deg, #fff, var(--af-v2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.faq details summary, .q summary { font-family: Cinzel, serif; letter-spacing: .02em; }
.faq details[open], .q[open] { border-color: rgba(226,192,107,.45) !important; }

.reveal { transition: opacity .9s, transform .9s cubic-bezier(.2,.9,.2,1) !important; }
.af-rv { opacity: 0; transform: translateY(28px); transition: opacity .9s, transform .9s cubic-bezier(.2,.9,.2,1); }
.af-rv.in { opacity: 1; transform: none; }
.af-tilt { transform-style: preserve-3d; }

.foot, .site-foot { border-top: 1px solid rgba(167,139,250,.15) !important; }

.af-crown { position: relative; z-index: 2; height: 260vh; }
.af-crown .st { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.af-crown .em { position: relative; width: 240px; height: 300px; }
.af-crown .em .s { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.af-crown .em .c { position: absolute; left: 50%; width: 46%; top: 0; transform: translate(-50%, var(--cy, -62vh)) rotate(var(--cr, -12deg)); filter: drop-shadow(0 0 20px rgba(226,192,107,.4)); }
.af-crown .sh { position: absolute; inset: 0; -webkit-mask: url(brand/bouclier-seul.png) bottom / 100% auto no-repeat; mask: url(brand/bouclier-seul.png) bottom / 100% auto no-repeat; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); background-size: 260% 100%; background-position: var(--sp, 130%) 0; mix-blend-mode: overlay; }
.af-crown .fl { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; transform: translate(-50%, -50%) scale(var(--fs, 0)); border-radius: 50%; background: radial-gradient(circle, rgba(255,243,196,.9), rgba(167,139,250,.5) 25%, transparent 60%); opacity: var(--fo, 0); pointer-events: none; mix-blend-mode: screen; }
.af-crown .cap { position: absolute; bottom: 9vh; left: 0; right: 0; text-align: center; }
.af-crown .cap .t1 { font: 900 clamp(46px, 8vw, 110px)/1 Cinzel, serif; letter-spacing: .07em; opacity: var(--to, 0); transform: translateY(calc((1 - var(--to, 0)) * 40px)); }
.af-crown .cap .t1 .s { background: linear-gradient(180deg, #fff 25%, #a99fc6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.af-crown .cap .t1 .v { background: linear-gradient(180deg, var(--af-v3), var(--af-v) 55%, #5b21b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.af-crown .cap .t2 { font: 700 15px Cinzel, serif; letter-spacing: .9em; color: #9a93ad; opacity: var(--to, 0); margin-top: 10px; }
.af-crown .hint { position: absolute; top: 17vh; left: 0; right: 0; text-align: center; font: 600 13px Cinzel, serif; letter-spacing: .35em; color: #9a93ad; opacity: var(--ho, 1); }
.af-crown .hint b { display: block; font: 700 clamp(20px, 3vw, 32px) Cinzel, serif; letter-spacing: .06em; color: #f2eef9; margin-top: 10px; }
.af-crown .arrow { position: absolute; bottom: 4vh; left: 50%; width: 22px; height: 36px; margin-left: -11px; border: 1px solid rgba(226,192,107,.6); border-radius: 12px; opacity: var(--ho, 1); }
.af-crown .arrow::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--af-au); animation: afWheel 1.6s ease-in-out infinite; }
@keyframes afWheel { 60% { transform: translateY(10px); opacity: 0; } 61% { transform: none; opacity: 0; } }
@media (max-width: 700px) { .af-crown { height: 200vh; } .af-crown .em { width: 180px; height: 225px; } }