/* 11Simulator — Landing V2 « Nuit de match » (chargé après seo.css) */
:root{--bg:#0a1020;--ink:#EEF3FB;--paper:#0a1020;--red:#9BE564;--muted:#8F9CB6;--line:rgba(160,185,230,.14);--serif:"Outfit","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--lime:#9BE564}
html,body{background:#0a1020!important;color:var(--ink)!important;font-family:var(--sans)!important}
body::before,body::after{display:none!important}
a{color:var(--lime)}
.wrap{max-width:1180px}
.top{position:sticky;top:0;z-index:20;background:rgba(10,16,32,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)!important;padding:.8rem 0!important}
.brand{font-family:var(--serif)!important;font-weight:800!important;color:var(--ink)!important}
.brand img{filter:none!important;border-radius:10px}
.langs a{border-radius:999px!important;border:1px solid var(--line)!important;color:var(--ink)!important;padding:.3rem .7rem}
.langs a[aria-current]{background:var(--lime)!important;color:#0a1020!important;border-color:var(--lime)!important}
h1,h2,h3{font-family:var(--serif)!important;color:var(--ink)!important;letter-spacing:-.02em}
h1{font-weight:800!important}
h2,h3{font-weight:700!important}
p,li,.lead{color:#C3CDE0!important}
.eyebrow{color:var(--lime)!important;font-family:var(--sans)!important;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}
/* Hero */
.hero{position:relative;isolation:isolate;margin:0 calc(50% - 50vw)!important;padding:clamp(4rem,10vw,8rem) calc(50vw - 50% + 1.25rem)!important;min-height:min(86vh,760px);display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:2rem;border:0!important;
  background:linear-gradient(90deg,#0a1020 0%,rgba(10,16,32,.86) 38%,rgba(10,16,32,.2) 100%),url('/assets/art/hero-stadium.webp') center right/cover no-repeat #0a1020!important}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(180deg,transparent,#0a1020);z-index:-1}
.hero h1{font-size:clamp(2.6rem,6vw,4.8rem)!important;line-height:1!important;max-width:14ch}
.lead{font-size:1.12rem!important;max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.6rem 0 1.2rem}
.cta{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px!important;background:linear-gradient(180deg,#b1f27e,#74C63E)!important;color:#0a1020!important;font-weight:700;padding:.95rem 1.5rem!important;text-decoration:none;border:0!important;box-shadow:0 14px 34px -14px rgba(155,229,100,.9);transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(155,229,100,1)}
.cta::after{content:"→"}
.cta.secondary{background:rgba(255,255,255,.06)!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:none}
.cta.secondary::after{content:""}
.trust{display:flex;flex-wrap:wrap;gap:.5rem}
.trust span{border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font-size:.82rem;color:#C3CDE0;background:rgba(10,16,32,.5)}
.trust span::before{content:"✓ ";color:var(--lime)}
/* Maquette d'interface en CSS à la place du logo */
.hero .mark{position:relative;aspect-ratio:4/3;border-radius:20px;border:1px solid rgba(160,185,230,.22);background:linear-gradient(180deg,rgba(22,35,60,.92),rgba(12,20,38,.92));box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(155,229,100,.08);overflow:hidden;transform:perspective(1200px) rotateY(-8deg) rotateX(3deg);animation:floaty 6s ease-in-out infinite}
.hero .mark img{position:absolute;top:14px;left:16px;width:34px!important;height:34px!important;opacity:1;filter:none!important}
.hero .mark::before{content:"";position:absolute;left:16px;right:16px;top:64px;height:42%;border-radius:12px;background:
 radial-gradient(circle at 50% 50%,transparent 17%,rgba(255,255,255,.35) 17.5%,transparent 18.5%),
 linear-gradient(90deg,transparent 49.6%,rgba(255,255,255,.35) 49.6% 50.4%,transparent 50.4%),
 repeating-linear-gradient(90deg,#16583c 0 10%,#1a6646 10% 20%)}
.hero .mark::after{content:"";position:absolute;left:16px;right:16px;bottom:16px;height:30%;border-radius:12px;background:
 linear-gradient(90deg,rgba(155,229,100,.9) 0 62%,rgba(255,255,255,.08) 62%) 0 18%/100% 8px no-repeat,
 linear-gradient(90deg,rgba(92,200,255,.85) 0 44%,rgba(255,255,255,.08) 44%) 0 50%/100% 8px no-repeat,
 linear-gradient(90deg,rgba(245,196,81,.85) 0 78%,rgba(255,255,255,.08) 78%) 0 82%/100% 8px no-repeat,
 rgba(10,16,32,.6)}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){.hero .mark{animation:none}}
/* Sections & cartes */
.section{padding:clamp(2.5rem,6vw,4.5rem) 0!important;border:0!important}
.section.alt{background:linear-gradient(180deg,rgba(15,59,46,.25),rgba(10,16,32,0))!important;border-radius:24px}
.grid{gap:1rem!important}
.card,.guide,.faq details,.stat{background:linear-gradient(180deg,rgba(22,35,60,.75),rgba(14,23,42,.75))!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:0 20px 40px -24px rgba(0,0,0,.7);transition:transform .25s,border-color .25s}
.card:hover,.guide:hover{transform:translateY(-3px);border-color:rgba(155,229,100,.4)!important}
.card{padding:1.4rem!important}
.card h2{font-size:1.25rem!important}
.stats{gap:1rem!important;border:0!important}
.stat{padding:1.2rem!important;text-align:left}
.stat strong{color:var(--lime)!important;font-family:var(--serif)!important;font-weight:800!important;font-size:2.1rem!important}
.steps li::marker{color:var(--lime);font-weight:700}
.guide{color:var(--ink)!important;text-decoration:none;padding:1rem 1.1rem!important}
.faq details{padding:1rem 1.2rem!important;margin-bottom:.6rem}
.faq summary{font-weight:600;cursor:pointer;color:var(--ink)}
.button-section{text-align:center;padding:3rem 1rem!important;border-radius:24px;background:radial-gradient(circle at 80% 100%,rgba(155,229,100,.18),transparent 55%),linear-gradient(180deg,#0f1a33,#0a1020)!important;border:1px solid var(--line)}
footer,.footer-grid,.legal{color:var(--muted)!important;border-color:var(--line)!important}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:3rem!important;background:linear-gradient(180deg,rgba(10,16,32,.55),#0a1020 70%),url('/assets/art/hero-stadium-m.webp') center top/cover no-repeat #0a1020!important}
  .hero .mark{transform:none;max-width:420px;width:100%;margin:0 auto}
  .cta{width:100%;justify-content:center}
}
/* Animations V2 */
.js-v2 .hero{background:#0a1020!important}
.hero-kb{position:absolute;inset:-6% 0 0 0;z-index:-3;background:url('/assets/art/hero-stadium.webp') center right/cover no-repeat;transform:scale(1.08);will-change:transform;animation:kb 28s ease-in-out infinite alternate}
.hero-kb::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a1020 0%,rgba(10,16,32,.86) 38%,rgba(10,16,32,.15) 100%)}
@keyframes kb{from{background-position:60% 50%;scale:1}to{background-position:80% 40%;scale:1.07}}
.hero-beams{position:absolute;inset:0;z-index:-2;pointer-events:none;background:conic-gradient(from 200deg at 78% -10%,transparent 0 6deg,rgba(220,235,255,.10) 8deg,transparent 12deg 20deg,rgba(220,235,255,.07) 23deg,transparent 27deg);mix-blend-mode:screen;animation:shimmer 7s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.55}50%{opacity:1}}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.mini-match{position:absolute;left:16px;right:16px;top:58px;bottom:16px;display:grid;grid-template-rows:auto 1fr auto;gap:8px}
.js-v2 .hero .mark::before,.js-v2 .hero .mark::after{display:none}
.mm-score{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 .72rem var(--sans);color:#C3CDE0;background:rgba(10,16,32,.6);border-radius:10px;padding:6px 10px}
.mm-score b{font:800 1.05rem var(--serif);color:#fff}
.mm-score i{font-style:normal;color:var(--lime)}
.mini-match.goal .mm-score{box-shadow:0 0 0 2px var(--lime),0 0 24px rgba(155,229,100,.6)}
.mini-match canvas{width:100%;height:100%;border-radius:12px;background:repeating-linear-gradient(90deg,#16583c 0 10%,#1a6646 10% 20%)}
.mm-bars{display:grid;gap:6px;background:rgba(10,16,32,.6);border-radius:10px;padding:8px 10px}
.mm-bars span{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--lime) var(--w),rgba(255,255,255,.08) var(--w));animation:bar 4s ease-in-out infinite alternate}
.mm-bars span:nth-child(2){filter:hue-rotate(90deg)}.mm-bars span:nth-child(3){filter:hue-rotate(-50deg)}
@keyframes bar{from{opacity:.7}to{opacity:1}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.card,.guide{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(155,229,100,.12),transparent 45%),linear-gradient(180deg,rgba(22,35,60,.75),rgba(14,23,42,.75))!important;transition:transform .2s ease,border-color .25s,box-shadow .25s}
@media (max-width:860px){.hero-kb{background-image:url('/assets/art/hero-stadium-m.webp');background-position:center top}.hero-kb::after{background:linear-gradient(180deg,rgba(10,16,32,.5),#0a1020 70%)}}
@media (prefers-reduced-motion:reduce){.hero-kb,.hero-beams,.mm-bars span{animation:none}.reveal{opacity:1;transform:none}}
.top{border-image:none!important;background-image:none!important}
.top::before,.top::after{display:none!important}
.langs a{background:transparent!important}
h1,h2,.brand,.cta{text-transform:none!important}
.cta{transform:none!important;font-style:normal!important;letter-spacing:0!important}
.cta:hover{transform:translateY(-2px)!important}
@media (max-width:860px){.hero h1{font-size:clamp(2.1rem,9vw,2.8rem)!important}}
.hero{overflow:hidden}
.steps li{background:rgba(22,35,60,.7)!important;border:1px solid var(--line)!important;border-radius:12px!important;color:#C3CDE0!important}
.steps li::before{background:var(--lime)!important;color:#0a1020!important}
.prose,.prose p{color:#C3CDE0!important}
.faq details,.faq summary{color:var(--ink)!important}