/* Proposer un compte : arène « extrême droite vs la gauche » (public/proposer.html). */
.vs-page{--vs-red:#ff4b55;--vs-red-deep:#c42a35;--vs-green:#5fd38d;--vs-green-deep:#1f7a4a;overflow-x:hidden}
.vs-main{max-width:1180px;margin:0 auto;padding:34px 20px 64px}
.vs-hero{text-align:center;margin:0 auto 34px;max-width:760px}
.vs-kicker{margin:0 0 10px;font:800 12px var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--redlight)}
.vs-hero h1{margin:0;font:800 clamp(46px,9vw,104px)/.88 var(--font-display);text-transform:uppercase;letter-spacing:.01em}
.vs-hero h1 .vs-left{color:var(--vs-red);text-shadow:0 0 40px #ff4b5555}
.vs-hero h1 .vs-right{color:var(--vs-green);text-shadow:0 0 40px #5fd38d55}
.vs-hero h1 .vs-mid{display:inline-block;margin:0 .18em;font-size:.55em;color:#f8f5ef;vertical-align:.32em;animation:vs-title 2.4s ease-in-out infinite}
.vs-hero p{margin:18px auto 0;max-width:620px;font-size:16px;line-height:1.6;color:#c9cace}

.vs-arena{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:520px;isolation:isolate}
.vs-side{position:relative;display:flex;flex-direction:column;padding:42px 52px 40px;overflow:hidden;color:#fff;animation:vs-in-left .8s cubic-bezier(.2,.9,.2,1) both}
.vs-side--left{border-radius:28px 0 0 28px;background:radial-gradient(circle at 20% 15%,#ff4b5566,transparent 55%),linear-gradient(160deg,#3a1117 0%,#1a0b0e 70%);clip-path:polygon(0 0,100% 0,88% 100%,0 100%);padding-right:96px;box-shadow:inset 0 0 0 2px #ff4b5540}
.vs-side--right{border-radius:0 28px 28px 0;background:radial-gradient(circle at 80% 15%,#5fd38d55,transparent 55%),linear-gradient(200deg,#10301f 0%,#0a1610 70%);clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);padding-left:96px;box-shadow:inset 0 0 0 2px #5fd38d40;animation-name:vs-in-right;text-align:right;align-items:flex-end}
.vs-side::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff06 0 2px,transparent 2px 4px);pointer-events:none;z-index:0}
.vs-side::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(60px);opacity:.35;z-index:-1;animation:vs-glow 4s ease-in-out infinite}
.vs-side--left::after{left:-120px;bottom:-160px;background:var(--vs-red)}
.vs-side--right::after{right:-120px;bottom:-160px;background:var(--vs-green);animation-delay:-2s}
.vs-side>*{position:relative;z-index:1}
.vs-team{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 14px;border-radius:999px;font:800 12px var(--font-ui);letter-spacing:.16em;text-transform:uppercase}
.vs-side--left .vs-team{background:#ff4b5526;color:#ff8a90;border:1px solid #ff4b5566}
.vs-side--right .vs-team{align-self:flex-end;background:#5fd38d22;color:#8fe3b0;border:1px solid #5fd38d66}
.vs-team i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;animation:vs-blink 1.2s steps(2,start) infinite}
.vs-side h2{margin:0;font:800 clamp(44px,6vw,76px)/.9 var(--font-display);text-transform:uppercase}
.vs-side--left h2{color:var(--vs-red);text-shadow:0 0 30px #ff4b5566}
.vs-side--right h2{color:var(--vs-green);text-shadow:0 0 30px #5fd38d55}
.vs-score{display:flex;align-items:baseline;gap:10px;margin:18px 0 22px;font:600 14px var(--font-ui);color:#c9cace}
.vs-side--right .vs-score{justify-content:flex-end}
.vs-score b{font:800 52px/1 var(--font-display);color:#fff}
.vs-side p.vs-pitch{margin:0 0 22px;max-width:360px;font-size:16px;line-height:1.55;color:#e4e1dc}
.vs-rules{display:grid;gap:8px;margin:0 0 30px;padding:0;list-style:none;font-size:14px;color:#d5d5da}
.vs-rules li{display:flex;align-items:center;gap:10px}
.vs-side--right .vs-rules li{flex-direction:row-reverse}
.vs-rules li::before{content:"";flex:0 0 8px;height:8px;border-radius:2px;transform:rotate(45deg)}
.vs-side--left .vs-rules li::before{background:var(--vs-red)}
.vs-side--right .vs-rules li::before{background:var(--vs-green)}
.vs-rules li.vs-warn{color:#ff8a90;font-weight:800}
.vs-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:auto;min-height:64px;padding:0 30px;border:0;border-radius:16px;color:#fff;font:800 26px/1 var(--font-display);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .2s}
.vs-cta::after{content:"";position:absolute;inset:-60% -40%;background:linear-gradient(115deg,transparent 40%,#ffffff55 50%,transparent 60%);transform:translateX(-70%);animation:vs-shine 3.2s ease-in-out infinite}
.vs-cta svg{width:24px;height:24px}
.vs-side--left .vs-cta{background:linear-gradient(180deg,#e8434c,var(--vs-red-deep));box-shadow:0 6px 0 #6b1219,0 0 40px #ff4b5555}
.vs-side--right .vs-cta{background:linear-gradient(180deg,#38b46d,var(--vs-green-deep));box-shadow:0 6px 0 #0d3a22,0 0 40px #5fd38d44}
.vs-cta:hover{transform:translateY(-2px) scale(1.02)}
.vs-cta:active{transform:translateY(4px);box-shadow:0 2px 0 #0008}
.vs-cta:focus-visible{outline:3px solid #fff;outline-offset:4px}

.vs-badge{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:150px;height:150px;transform:translate(-50%,-50%);animation:vs-drop .9s .35s cubic-bezier(.2,1.6,.4,1) both}
.vs-badge span{position:relative;z-index:2;display:grid;place-items:center;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2b2c33,#0b0c0e 70%);border:3px solid #f8f5ef;box-shadow:0 0 0 6px #0b0c0e,0 0 50px #ffffff40,-30px 0 60px #ff4b5566,30px 0 60px #5fd38d55;font:800 58px/1 var(--font-display);letter-spacing:-.02em;color:#fff;animation:vs-pulse 1.6s ease-in-out infinite}
.vs-badge::before,.vs-badge::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #ffffff55;animation:vs-ring 2.4s ease-out infinite}
.vs-badge::after{animation-delay:1.2s}
.vs-bolt{position:absolute;z-index:1;width:46px;height:120px;color:#ffd166;filter:drop-shadow(0 0 12px #ffd166aa);animation:vs-bolt 2.8s steps(1) infinite}
.vs-bolt--top{top:-74px;left:50%;transform:translateX(-50%) rotate(8deg)}
.vs-bolt--bottom{bottom:-74px;left:50%;transform:translateX(-50%) rotate(188deg);animation-delay:1.4s}

.vs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:44px 0 0;padding:0;list-style:none;counter-reset:vs}
.vs-steps li{position:relative;padding:22px 22px 22px 70px;border:1px solid var(--line);border-radius:18px;background:#121317;font-size:14px;line-height:1.5;color:#c9cace;counter-increment:vs}
.vs-steps li::before{content:counter(vs);position:absolute;left:20px;top:18px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#1d1e22;border:1px solid #3a3b42;font:800 20px/1 var(--font-display);color:#fff}
.vs-steps strong{display:block;margin-bottom:4px;font-size:15px;color:#fff}

@keyframes vs-in-left{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
@keyframes vs-in-right{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:none}}
@keyframes vs-drop{0%{opacity:0;transform:translate(-50%,-50%) scale(3) rotate(-25deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes vs-drop-m{0%{opacity:0;transform:scale(3) rotate(-25deg)}100%{opacity:1;transform:none}}
@keyframes vs-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes vs-ring{from{transform:scale(.8);opacity:.9}to{transform:scale(1.6);opacity:0}}
@keyframes vs-bolt{0%,8%,14%,100%{opacity:0}4%,11%{opacity:1}}
@keyframes vs-glow{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.45;transform:scale(1.15)}}
@keyframes vs-shine{0%,60%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
@keyframes vs-blink{to{visibility:hidden}}
@keyframes vs-title{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.12)}}

@media(max-width:860px){
 .vs-main{padding:24px 16px 56px}
 .vs-arena{grid-template-columns:1fr;gap:0;min-height:0}
 .vs-side{padding:30px 24px;border-radius:24px!important;clip-path:none!important;text-align:left!important;align-items:flex-start!important}
 .vs-side--left{padding-right:24px}.vs-side--right{padding-left:24px}
 .vs-side--right .vs-team{align-self:flex-start}.vs-side--right .vs-score{justify-content:flex-start}.vs-side--right .vs-rules li{flex-direction:row}
 .vs-badge{position:relative;left:auto;top:auto;justify-self:center;width:120px;height:120px;margin:-30px 0;transform:none;animation-name:vs-drop-m}.vs-badge span{width:92px;height:92px;font-size:44px}
 .vs-bolt{display:none}
 .vs-cta{width:100%;font-size:24px}
 .vs-steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.vs-page *,.vs-page *::before,.vs-page *::after{animation:none!important}.vs-badge{opacity:1}}