@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --bg:        #07080f;
    --bg2:       #0a0c15;
    --card:      #0e1020;
    --card-h:    #131526;
    --red:       #c8293a;
    --red-l:     #e03545;
    --red-dim:   rgba(200,41,58,.08);
    --red-dim2:  rgba(200,41,58,.14);
    --red-glow:  rgba(200,41,58,.3);
    --red-brd:   rgba(200,41,58,.22);
    --grad:      linear-gradient(135deg,#c8293a,#e8404f);
    --grad-h:    linear-gradient(135deg,#e03545,#f05060);
    --white:     #eef0f8;
    --t1:        #c0c5de;
    --t2:        #848aaa;
    --t3:        #50546e;
    --brd:       #161828;
    --brd2:      #1d2035;
    --nav-h:     58px;
    --radius:    14px;
    --radius-lg: 20px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body {
    font-family:'Inter',sans-serif;
    background:
        radial-gradient(ellipse 900px 520px at 72% 18%, rgba(200,41,58,.075), transparent 68%),
        radial-gradient(ellipse 650px 420px at 12% 88%, rgba(200,41,58,.04), transparent 70%),
        linear-gradient(180deg, #080914 0%, #07080f 52%, #05060c 100%);
    color:var(--white);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}

/* FOND LISSE — grain supprimé */
body::after {
    content:none;
}

/* AMBIENT */
body::before {
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    background:
        radial-gradient(ellipse 900px 560px at 78% 12%, rgba(200,41,58,.045), transparent 72%),
        radial-gradient(ellipse 760px 460px at 8% 92%, rgba(200,41,58,.025), transparent 72%),
        linear-gradient(135deg, rgba(255,255,255,.015), transparent 42%);
    pointer-events:none;
}

section, nav, footer, main, header { position:relative; z-index:1 }

/* SCROLLBAR */
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--brd2); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--red-brd) }
::selection { background:var(--red); color:#fff }

/* ════ NAV ════ */
nav {
    position:fixed; top:0; width:100%; height:var(--nav-h);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 clamp(1.5rem,5vw,4rem);
    background:rgba(7,8,15,.88);
    backdrop-filter:blur(24px) saturate(1.8);
    -webkit-backdrop-filter:blur(24px) saturate(1.8);
    border-bottom:1px solid var(--brd);
    z-index:200; transition:border-color .4s, background .4s;
}
nav.scrolled { border-color:var(--red-brd); background:rgba(7,8,15,.95) }

.nav-brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--white) }
.nav-brand img { height:38px; width:auto }
.nav-brand-name { font-family:'Outfit',sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:-.02em }
.nav-brand-name span { color:var(--red-l) }

.nav-links { display:flex; align-items:center; gap:1.8rem; list-style:none }
.nav-links a {
    color:var(--t2); text-decoration:none; font-size:.84rem;
    font-weight:500; letter-spacing:.01em; transition:color .25s;
    position:relative; padding-bottom:2px;
}
.nav-links a::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0;
    height:1px; background:var(--red-l);
    transform:scaleX(0); transform-origin:left;
    transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover { color:var(--white) }
.nav-links a:hover::after,
.nav-links a.active::after { transform:scaleX(1) }
.nav-links a.active { color:var(--white) }

.nav-cta {
    padding:.48rem 1.2rem; background:var(--grad); color:#fff;
    text-decoration:none; border-radius:8px; font-size:.81rem;
    font-weight:600; letter-spacing:.02em; transition:all .3s;
    box-shadow:0 2px 14px rgba(200,41,58,.3); white-space:nowrap;
}
.nav-cta:hover { background:var(--grad-h); transform:translateY(-1px); box-shadow:0 6px 22px var(--red-glow) }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px }
.hamburger span { width:22px; height:2px; background:var(--white); display:block; transition:all .3s }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

/* ════ LAYOUT ════ */
.page-wrap { padding-top:var(--nav-h) }
.section { padding:5.5rem clamp(1.5rem,5vw,4rem) }
.section-sm { padding:3.5rem clamp(1.5rem,5vw,4rem) }
.ct { max-width:1080px; margin:0 auto; width:100% }

/* ════ TYPOGRAPHY ════ */
.s-eyebrow {
    font-family:'JetBrains Mono',monospace; font-size:.67rem;
    color:var(--red-l); letter-spacing:.16em; text-transform:uppercase;
    display:flex; align-items:center; gap:.65rem; margin-bottom:.85rem;
}
.s-eyebrow::before { content:''; display:block; width:20px; height:1px; background:var(--grad); border-radius:1px }
.s-title {
    font-family:'Outfit',sans-serif; font-size:clamp(1.6rem,3.5vw,2.4rem);
    font-weight:800; letter-spacing:-.04em; line-height:1.18;
    padding-bottom:.06em; color:var(--white); margin-bottom:.75rem;
}
.s-title em { font-style:normal; color:var(--red-l) }
.s-sub { color:var(--t2); font-size:.91rem; max-width:500px; line-height:1.82 }
.s-header { margin-bottom:3.5rem }
.s-header-center { text-align:center }
.s-header-center .s-eyebrow { justify-content:center }
.s-header-center .s-eyebrow::before { display:none }
.s-header-center .s-sub { margin:0 auto }

/* ════ DIVIDER ════ */
.divider {
    height:1px;
    background:linear-gradient(90deg, transparent, var(--brd2) 30%, var(--brd2) 70%, transparent);
    position:relative;
}
.divider::after {
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:80px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(200,41,58,.4), transparent);
}

/* ════ CARD ════ */
.card {
    background:var(--card); border:1px solid var(--brd2);
    border-radius:var(--radius); padding:2rem;
    transition:all .4s cubic-bezier(.16,1,.3,1);
    position:relative; overflow:visible;
}
.card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:var(--grad); border-radius:var(--radius) var(--radius) 0 0;
    transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.card:hover {
    background:var(--card-h); border-color:var(--red-brd);
    transform:translateY(-4px);
    box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 1px var(--red-brd), 0 0 30px rgba(200,41,58,.07);
}
.card:hover::before { transform:scaleX(1) }

/* ════ BADGE ════ */
.badge {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.28rem .78rem; border-radius:50px;
    font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.04em;
    background:var(--red-dim2); color:var(--red-l); border:1px solid var(--red-brd);
}
.badge-dot { width:5px; height:5px; border-radius:50%; background:var(--red-l); animation:pulse 2s infinite }
@keyframes pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(200,41,58,.5) }
    50% { box-shadow:0 0 0 4px rgba(200,41,58,0) }
}

/* ════ BUTTONS ════ */
.btn {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.8rem 1.6rem; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:.86rem; font-weight:600;
    text-decoration:none; transition:all .3s cubic-bezier(.16,1,.3,1);
    cursor:pointer; border:none; letter-spacing:.01em;
}
.btn svg { flex-shrink:0; width:15px; height:15px }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 4px 18px rgba(200,41,58,.3) }
.btn-primary:hover { background:var(--grad-h); transform:translateY(-2px); box-shadow:0 8px 28px var(--red-glow) }
.btn-outline { background:transparent; color:var(--t1); border:1px solid var(--brd2) }
.btn-outline:hover { border-color:var(--red-brd); color:var(--red-l); background:var(--red-dim) }
.btn-ghost { background:var(--red-dim); color:var(--red-l); border:1px solid var(--red-brd) }
.btn-ghost:hover { background:var(--red-dim2); transform:translateY(-1px) }

/* ════ GRID ════ */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem }

/* ════ REVEAL ════ */
.rv { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) }
.rv.v { opacity:1; transform:translateY(0) }

/* ════ FOOTER ════ */
footer {
    background:var(--bg2); padding:3rem clamp(1.5rem,5vw,4rem) 2rem;
    position:relative;
}
footer::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--red-brd) 50%, transparent);
}
.footer-inner {
    max-width:1080px; margin:0 auto;
    display:grid; grid-template-columns:1fr auto;
    align-items:start; gap:2rem;
}
.footer-brand-block { display:flex; flex-direction:column; gap:.5rem }
.footer-brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; width:fit-content }
.footer-brand img { height:26px; opacity:.6 }
.footer-brand-name { font-family:'Outfit',sans-serif; font-weight:800; font-size:.95rem; color:var(--t1); letter-spacing:-.01em }
.footer-tagline { font-size:.77rem; color:var(--t3); line-height:1.5 }
.footer-links { display:flex; gap:1.2rem; margin-top:.4rem }
.footer-links a { font-size:.74rem; color:var(--t3); text-decoration:none; transition:color .2s }
.footer-links a:hover { color:var(--red-l) }

.footer-right { text-align:right; display:flex; flex-direction:column; gap:.3rem }
.footer-right p { color:var(--t3); font-size:.71rem; line-height:1.8 }
.footer-right a { font-family:'JetBrains Mono',monospace; font-size:.63rem; color:var(--red-l); text-decoration:none; transition:color .2s }
.footer-right a:hover { color:var(--white) }

.footer-copy {
    max-width:1080px; margin:1.8rem auto 0;
    padding-top:1.2rem; border-top:1px solid var(--brd);
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:.5rem;
}
.footer-copy p { font-size:.67rem; color:var(--t3); font-family:'JetBrains Mono',monospace; letter-spacing:.03em }

/* ════ FORMS ════ */
.form-group { margin-bottom:1rem }
.form-group label {
    display:block; font-family:'JetBrains Mono',monospace;
    font-size:.67rem; color:var(--t3); letter-spacing:.08em;
    margin-bottom:.4rem; text-transform:uppercase;
}
.form-group input, .form-group textarea, .form-group select {
    width:100%; padding:.8rem 1rem;
    background:rgba(7,8,15,.6); border:1px solid var(--brd2);
    border-radius:10px; color:var(--white);
    font-family:'Inter',sans-serif; font-size:.9rem;
    transition:all .3s; outline:none; -webkit-appearance:none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color:var(--red-brd); background:rgba(7,8,15,.9);
    box-shadow:0 0 0 3px var(--red-dim);
}
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--t3) }
.form-group textarea { height:130px; resize:vertical }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem }

/* ════ PAGE HERO ════ */
.page-hero {
    padding:4.5rem clamp(1.5rem,5vw,4rem) 3.5rem;
    position:relative; overflow:hidden;
    border-bottom:1px solid var(--brd);
}
.page-hero::before {
    content:''; position:absolute; top:-40%; right:-5%;
    width:700px; height:700px;
    background:var(--red); filter:blur(160px); opacity:.04;
    pointer-events:none;
}
.page-hero::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--brd2) 40%, var(--brd2) 60%, transparent);
}
.page-hero-inner { max-width:1080px; margin:0 auto }
.page-hero-crumb {
    font-family:'JetBrains Mono',monospace; font-size:.65rem; color:var(--t3);
    letter-spacing:.08em; margin-bottom:1.2rem;
    display:flex; align-items:center; gap:.5rem;
}
.page-hero-crumb a { color:var(--t3); text-decoration:none; transition:color .2s }
.page-hero-crumb a:hover { color:var(--red-l) }
.page-hero-crumb span:last-child { color:var(--t2) }
.page-hero h1 {
    font-family:'Outfit',sans-serif;
    font-size:clamp(2rem,4.5vw,3.2rem); font-weight:800;
    letter-spacing:-.05em; line-height:1.15;
    padding-bottom:.1em; margin-bottom:.8rem;
}
.page-hero p { color:var(--t2); font-size:.92rem; max-width:520px; line-height:1.82 }

/* ════ RESPONSIVE ════ */
@media(max-width:900px) {
    .grid-3 { grid-template-columns:1fr 1fr }
    .grid-4 { grid-template-columns:1fr 1fr }
    .footer-inner { grid-template-columns:1fr }
    .footer-right { text-align:left }
}
@media(max-width:640px) {
    nav { padding:0 1rem }
    .nav-links {
        display:none; position:absolute; top:var(--nav-h); left:0; right:0;
        background:rgba(7,8,15,.98); backdrop-filter:blur(24px);
        flex-direction:column; gap:0; border-bottom:1px solid var(--brd);
    }
    .nav-links.open { display:flex }
    .nav-links li a { padding:.9rem 1.5rem; display:block; border-bottom:1px solid var(--brd) }
    .nav-links a::after { display:none }
    .hamburger { display:flex }
    .nav-cta { display:none }
    .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr }
    .form-row { grid-template-columns:1fr }
    .section { padding:3.5rem 1.25rem }
    .page-hero { padding:2.5rem 1.25rem 2.5rem }
    .footer-copy { flex-direction:column; gap:.4rem }
}