:root{
--bg0:#050814; /* fond très sombre */
--bg1:#0b1430; /* bleu nuit */
--ink:#e9ecff;

--muted:rgba(233,236,255,.72);

--glass:rgba(255,255,255,.06);
--glass2:rgba(255,255,255,.08);
--stroke:rgba(255,255,255,.14);

--accent:#ff2f55; /* rouge alarme */
--accent2:#3b82f6; /* bleu néon */

--radius:18px;
--shadow: 0 18px 50px rgba(0,0,0,.45);
--shadow2: 0 10px 24px rgba(0,0,0,.35);

--max:1100px;
--gap:18px;

--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family:var(--font);
color:var(--ink);
background:
radial-gradient(1200px 800px at 18% -10%, rgba(255,47,85,.28), transparent 60%),
radial-gradient(900px 700px at 85% 10%, rgba(59,130,246,.22), transparent 62%),
linear-gradient(180deg, var(--bg0), var(--bg1));

overflow-x:hidden;
}

/* Futur “space” background (no images) */
.fx-bg{
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
opacity:1;
background:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35), transparent 60%),
radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.26), transparent 60%),
radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,.26), transparent 60%),
radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,.18), transparent 60%),
radial-gradient(700px 420px at 20% 60%, rgba(124,58,237,.18), transparent 65%),
radial-gradient(820px 520px at 85% 65%, rgba(255,77,109,.16), transparent 68%),
linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.35));
filter:saturate(1.05);
}

.container{
width: min(var(--max), calc(100% - 28px));
margin: 22px auto 60px;
}

.topbar{
width: min(var(--max), calc(100% - 28px));
margin: 16px auto 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.backlink{
display:inline-flex;
gap:10px;
align-items:center;
color:rgba(233,236,255,.85);
text-decoration:none;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
backdrop-filter: blur(10px);
}
.backlink:hover{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06); }
.back-ico{ font-size:18px; line-height:1; }

.brand{
display:flex;
align-items:center;
gap:10px;
color:rgba(233,236,255,.92);
}
.brand-dot{
width:10px; height:10px; border-radius:99px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
box-shadow:0 0 18px rgba(255,77,109,.32);
}
.brand-name{ font-weight:650; letter-spacing:.2px; }

.hero h1{
margin: 10px 0 6px;
font-size: clamp(28px, 4vw, 42px);
letter-spacing:-.6px;
}
.sub{
margin:0 0 14px;
color: var(--muted);
max-width: 720px;
}

.trust-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin: 10px 0 18px;
}
.trust-pill{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
backdrop-filter: blur(10px);
color: rgba(233,236,255,.88);
font-size: 13px;
}
.mini-ico svg{
width:18px;
height:18px;
color: rgba(233,236,255,.85);
}

.grid{
display:grid;
grid-template-columns: 1.35fr .85fr;
gap: var(--gap);
align-items:start;
}

.card{
border-radius: var(--radius);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(12px);
box-shadow: var(--shadow2);
overflow:hidden;
}

.card-head{
padding:18px 18px 6px;
}
.card-head h2{
margin:0;
font-size:18px;
letter-spacing:-.2px;
}
.hint{
margin:6px 0 0;
color:rgba(233,236,255,.70);
font-size:13px;
}

.card-plans{ padding-bottom: 16px; }
.plan-list{ display:flex; flex-direction:column; gap:12px; padding: 12px 18px 16px; }

.plan{
cursor:pointer;
display:block;
}
.plan input{ position:absolute; opacity:0; pointer-events:none; }

.plan-inner{
border-radius: 16px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.18);
padding: 14px 14px 12px;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.plan:hover .plan-inner{
border-color: rgba(255,255,255,.18);
transform: translateY(-1px);
}
.plan input:checked + .plan-inner{
border-color: rgba(255,77,109,.55);
box-shadow: 0 0 0 1px rgba(255,77,109,.22) inset, 0 18px 45px rgba(0,0,0,.35);
}

/* TOP row = no overlap possible */
.plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.plan-right{
display:flex;
align-items:flex-end;
gap:10px;
flex-shrink:0;
}
.plan-title .plan-name{
font-weight:750;
font-size:16px;
}
.plan-desc{
color: rgba(233,236,255,.68);
font-size:12.5px;
margin-top:2px;
}

.plan-price{
display:flex;
align-items:baseline;
gap:6px;
white-space:nowrap;
}
.price{
font-weight:800;
font-size:16px;
letter-spacing:-.2px;
}
.per{
color: rgba(233,236,255,.62);
font-size:12px;
}

.badge{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
font-size:12px;
font-weight:650;
color: rgba(255,255,255,.92);
background: linear-gradient(135deg, rgba(255,77,109,.95), rgba(124,58,237,.92));
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 12px 24px rgba(0,0,0,.25);
white-space:nowrap;
}

.plan-feats{
list-style:none;
padding: 12px 0 0;
margin: 0;
display:grid;
gap:8px;
}
.plan-feats li{
display:flex;
gap:10px;
align-items:flex-start;
color: rgba(233,236,255,.86);
font-size: 13.5px;
line-height:1.35;
}
.feat-ico svg{
width:16px; height:16px;
color: rgba(233,236,255,.72);
margin-top:2px;
}

.divider{
height:1px;
background: rgba(255,255,255,.10);
margin: 0 18px 14px;
}

.form-row{
padding: 0 18px 10px;
display:grid;
grid-template-columns: 1fr 1fr;
gap:12px;
}
.field label{
display:block;
margin:0 0 6px;
font-size:12px;
color: rgba(233,236,255,.72);
}
.field input{
width:100%;
padding: 12px 12px;
border-radius: 12px;
border:1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.22);
color: rgba(233,236,255,.92);
outline:none;
}
.field input:focus{
border-color: rgba(255,77,109,.55);
box-shadow: 0 0 0 3px rgba(255,77,109,.12);
}

.micro{
margin: 8px 18px 0;
color: rgba(233,236,255,.62);
font-size: 12px;
}

.card-summary{
position: sticky;
top: 14px;
}

.summary-box{
margin: 10px 18px 12px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.18);
padding: 14px;
}

.row{
display:flex;
justify-content:space-between;
gap:12px;
padding: 10px 0;
border-bottom: 1px dashed rgba(255,255,255,.12);
}
.row:last-of-type{ border-bottom:none; }
.k{
color: rgba(233,236,255,.64);
font-size: 12.5px;
}
.v{
font-weight: 700;
font-size: 13.5px;
}

.summary-bullets{
margin-top: 12px;
display:grid;
gap:8px;
}
.sb{
display:flex;
align-items:center;
gap:10px;
color: rgba(233,236,255,.82);
font-size: 13px;
}
.dot{
width:8px; height:8px; border-radius:99px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
box-shadow:0 0 12px rgba(255,77,109,.25);
}

.cta-stack{
padding: 0 18px 10px;
display:grid;
gap:10px;
}
.btn{
display:inline-flex;
justify-content:center;
align-items:center;
height: 46px;
border-radius: 14px;
text-decoration:none;
font-weight:750;
letter-spacing:.1px;
border: 1px solid rgba(255,255,255,.12);
transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}

.btn-primary{
color: rgba(255,255,255,.95);
background: linear-gradient(135deg, rgba(255,77,109,.98), rgba(124,58,237,.92));
box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.02); }

.btn-ghost{
color: rgba(233,236,255,.90);
background: rgba(255,255,255,.05);
}
.btn-ghost:hover{
transform: translateY(-1px);
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.07);
}

/* Responsive */
@media (max-width: 980px){
.grid{ grid-template-columns: 1fr; }
.card-summary{ position: relative; top:auto; }
}
@media (max-width: 680px){
.form-row{ grid-template-columns: 1fr; }
}

:root{
--bg0: #05060a; /* noir profond */
--bg1: #0a0c12; /* noir bleuté très léger */
--ink: #f2f4ff; /* texte */
--muted: rgba(242,244,255,.70);

--accent: #ff1f3d; /* rouge alarme */
--accent2: #7a0b18; /* rouge profond (PAS violet) */

--glass: rgba(255,255,255,.05);
--glass2: rgba(255,255,255,.07);
--stroke: rgba(255,255,255,.12);
}

/* Fond global : noir + glow rouge (on enlève le délire violet) */
html, body{
background:
radial-gradient(900px 520px at 50% 62%, rgba(255,31,61,.18), transparent 60%),
radial-gradient(700px 420px at 20% 20%, rgba(255,31,61,.10), transparent 60%),
linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
color: var(--ink) !important;
}

/* Cartes : glass clean */
.card, .panel, .box, .checkout-card, .summary, .plan-card{
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
}

/* Bordures "sélection" en rouge (plus prop firm) */
.selected, .is-selected, .active, .plan-card.selected{
border-color: rgba(255,31,61,.55) !important;
box-shadow: 0 0 0 1px rgba(255,31,61,.35), 0 22px 70px rgba(0,0,0,.55) !important;
}

/* CTA / Boutons : rouge alarme + glow (plus de rose/violet) */
button, .btn, .button, a.button, .btn-primary, .primary, .checkout-btn, .pay-btn{
background: linear-gradient(180deg, rgba(255,31,61,.95), rgba(140,10,28,.95)) !important;
border: 1px solid rgba(255,31,61,.45) !important;
color: #fff !important;
box-shadow: 0 14px 34px rgba(255,31,61,.20) !important;
}
button:hover, .btn:hover, .button:hover, .btn-primary:hover, .primary:hover, .checkout-btn:hover, .pay-btn:hover{
filter: brightness(1.06) saturate(1.06) !important;
}

/* Bouton secondaire (PayPal) neutre */
.btn-secondary, .secondary, .paypal-btn{
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.12) !important;
color: rgba(242,244,255,.92) !important;
box-shadow: none !important;
}

/* Badge "Meilleur choix" : rouge clean */
.best-choice, .best, .tag, .pill, .badge{
background: rgba(255,31,61,.16) !important;
border: 1px solid rgba(255,31,61,.40) !important;
color: rgba(255,240,244,.95) !important;
}

/* Petits points / puces : rouge discret (sans changer la police) */
li::marker{
color: rgba(255,31,61,.85) !important;
}
/* Checkout: cacher PayPal */
#paypalBtn, .btn-paypal, .pay-paypal, .paypal-button, a[href*="paypal"]{
display: none !important;
}
/* === CTA FINAL : Payer et activer === */
.btn-primary {
color: #fff;
background: linear-gradient(
180deg,
rgba(255,60,60,1),
rgba(185,20,20,1)
);
border: 1px solid rgba(255,80,80,.6);
box-shadow:
0 0 0 rgba(255,0,0,0),
0 12px 35px rgba(255,0,0,.35);
transition:
transform .12s ease,
box-shadow .12s ease,
filter .12s ease;
}

.btn-primary:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow:
0 0 18px rgba(255,0,0,.45),
0 18px 45px rgba(255,0,0,.55);
}

.btn-primary:active {
transform: translateY(0);
box-shadow:
0 0 8px rgba(255,0,0,.35),
0 10px 25px rgba(255,0,0,.4);
}
/* === OVERRIDE BOUTON CTA (checkout) === */
button,
button[type="submit"],
input[type="submit"],
.btn-primary,
a.btn-primary {
color: #fff !important;
background: linear-gradient(180deg, #ff3c3c, #b91414) !important;
border: 1px solid rgba(255,80,80,.65) !important;
box-shadow: 0 12px 35px rgba(255,0,0,.35) !important;
}

button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-primary:hover,
a.btn-primary:hover {
transform: translateY(-1px) !important;
filter: brightness(1.05) !important;
box-shadow: 0 0 18px rgba(255,0,0,.45), 0 18px 45px rgba(255,0,0,.55) !important;
}

button:active,
button[type="submit"]:active,
input[type="submit"]:active,
.btn-primary:active,
a.btn-primary:active {
transform: translateY(0) !important;
box-shadow: 0 0 8px rgba(255,0,0,.35), 0 10px 25px rgba(255,0,0,.4) !important;
}
.card-summary .btn-primary,
.card-summary a.btn-primary,
.card-summary button.btn-primary,
.card-summary button[type="submit"],
.card-summary .pay-btn,
.card-summary .checkout-btn{
background: linear-gradient(180deg, rgba(255,35,61,.95), rgba(175,10,28,.95)) !important;
border: 1px solid rgba(255,60,90,.55) !important;
color: rgba(255,255,255,.96) !important;
border-radius: 14px !important;
box-shadow: 0 14px 40px rgba(0,0,0,.40), 0 0 0 1px rgba(255,60,90,.16) inset !important;
transition: transform .12s ease, filter .12s ease, box-shadow .12s ease !important;
}

.card-summary .btn-primary:hover,
.card-summary a.btn-primary:hover,
.card-summary button.btn-primary:hover,
.card-summary button[type="submit"]:hover,
.card-summary .pay-btn:hover,
.card-summary .checkout-btn:hover{
transform: translateY(-1px) !important;
filter: brightness(1.06) !important;
box-shadow: 0 18px 55px rgba(0,0,0,.50), 0 0 26px rgba(255,35,61,.22) !important;
}

.card-summary .btn-primary:active,
.card-summary a.btn-primary:active,
.card-summary button.btn-primary:active,
.card-summary button[type="submit"]:active,
.card-summary .pay-btn:active,
.card-summary .checkout-btn:active{
transform: translateY(0px) !important;
filter: brightness(.98) !important;
}
.card-summary a.btn-primary,
.card-summary button.btn-primary,
.card-summary button[type="submit"],
.card-summary .checkout-btn,
.card-summary .pay-btn,
#btnStripe.btn-primary{
background: linear-gradient(180deg, rgba(255,60,60,.72), rgba(150,10,10,.85)) !important;
border: 1px solid rgba(255,90,90,.38) !important;
box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,80,80,.12) inset !important;
color: rgba(255,255,255,.96) !important;
filter: saturate(.95) !important;
}

.card-summary a.btn-primary:hover,
.card-summary button.btn-primary:hover,
.card-summary button[type="submit"]:hover,
.card-summary .checkout-btn:hover,
.card-summary .pay-btn:hover,
#btnStripe.btn-primary:hover{
background: linear-gradient(180deg, rgba(255,80,80,.78), rgba(170,15,15,.88)) !important;
box-shadow: 0 12px 30px rgba(0,0,0,.48), 0 0 0 1px rgba(255,90,90,.16) inset !important;
transform: translateY(-1px);
}
/* PRO = plan par défaut */
.plan-card.pro {
border: 1px solid rgba(255, 31, 61, .9);
box-shadow: 0 0 0 1px rgba(255, 31, 61, .4),
0 20px 50px rgba(255, 31, 61, .25);
background: linear-gradient(
180deg,
rgba(255, 31, 61, .12),
rgba(0, 0, 0, .25)
);
}

/* STARTER désactivé visuellement */
.plan-card.starter {
opacity: .55;
filter: grayscale(.25);
border: 1px solid rgba(255,255,255,.08);
}
{
border: 1px solid rgba(255, 31, 61, .85) !important;
box-shadow: 0 0 0 1px rgba(255, 31, 61, .35),
0 18px 55px rgba(255, 31, 61, .22) !important;
background: linear-gradient(180deg,
rgba(255, 31, 61, .10),
rgba(0, 0, 0, .18)
) !important;
}

.plan-dim{
opacity: .55 !important;
filter: grayscale(.15) !important;
border-color: rgba(255,255,255,.08) !impo

body{
position: relative;
background: #07090f;
overflow-x: hidden;
}

/* couche nebula / glow */
body::before{
content:"";
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(900px 520px at 52% 18%, rgba(255, 38, 90, .22), transparent 60%),
radial-gradient(700px 420px at 82% 52%, rgba(255, 70, 70, .16), transparent 62%),
radial-gradient(760px 460px at 18% 62%, rgba(255, 105, 60, .10), transparent 65%),
radial-gradient(1200px 900px at 50% 60%, rgba(120, 60, 255, .06), transparent 70%),
linear-gradient(180deg, #05060a 0%, #070910 40%, #05060a 100%);
filter: saturate(1.15) contrast(1.05);
}

/* grain / particules */
body::after{
content:"";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 1px, transparent 2px),
radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 0 1px, transparent 2px),
radial-gradient(circle at 40% 80%, rgba(255,255,255,.04) 0 1px, transparent 2px),
radial-gradient(circle at 55% 40%, rgba(255,255,255,.05) 0 1px, transparent 2px);
background-size: 220px 220px, 260px 260px, 300px 300px, 340px 340px;
opacity: .35;
mix-blend-mode: screen;
}