/* ============================================================
   REFONTE V3.2 — Systèmes (Blueprint) — complète labo-v3.css
   ============================================================ */
.sys-page {
    background:
        radial-gradient(1100px 550px at 85% -5%, rgba(61,180,220,.18), transparent 60%),
        radial-gradient(800px 450px at -5% 15%, rgba(168,224,74,.15), transparent 55%),
        linear-gradient(180deg, #F3F6F4 0%, #FAF9F5 100%);
}
.sys-article { max-width: 860px; margin: 0 auto; }

.sys-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem; font-weight: 700; letter-spacing: .16em;
    color: #0E5A2E;
    background: rgba(61,220,132,.14);
    border: 1px solid rgba(61,220,132,.35);
    display: inline-block;
    padding: .35rem .8rem; border-radius: 999px;
    margin: 0 0 1.1rem;
}

/* chips de niveau */
.sys-niv { font-weight: 700; }
.sys-niv-debutant      { border-color: rgba(31,157,85,.45); background: rgba(61,220,132,.12); color: #0E5A2E; }
.sys-niv-intermediaire { border-color: rgba(217,119,6,.45); background: rgba(251,191,36,.14); color: #7C4A03; }
.sys-niv-avance        { border-color: rgba(185,28,28,.45); background: rgba(248,113,113,.12); color: #7A1210; }

/* ---------- STACK ---------- */
.sys-stack { padding: 1rem 0 0; }
.sys-stack h2 { font-weight: 800; letter-spacing: -.01em; }
.sys-stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-top: 1rem; }
.sys-stack-item {
    background: #fff; border: 1px solid rgba(20,23,19,.08);
    border-radius: 16px; padding: 1.1rem 1.2rem;
    box-shadow: 0 6px 20px -10px rgba(20,23,19,.15);
    transition: transform .18s ease, box-shadow .18s ease;
}
.sys-stack-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(20,23,19,.2); }
.sys-stack-required { border-color: rgba(31,157,85,.4); box-shadow: 0 6px 20px -10px rgba(31,157,85,.3); }
.sys-stack-tool { font-weight: 700; margin: 0 0 .5rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.sys-stack-tool em { font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .62rem; font-weight: 700; letter-spacing: .1em; padding: .2rem .5rem; border-radius: 999px; }
.sys-req { background: linear-gradient(120deg, #1F9D55, #3DDC84); color: #06210F; }
.sys-opt { background: rgba(20,23,19,.08); color: rgba(20,23,19,.6); }
.sys-stack-link { font-size: .9rem; font-weight: 600; color: #0E5A2E !important; text-decoration: none; }
.sys-stack-link:hover { text-decoration: underline; }

/* ---------- BONUS EMAIL ---------- */
.sys-bonus {
    margin-top: 2.6rem;
    padding: 2.2rem 2rem;
    border-radius: 24px;
    background: linear-gradient(145deg, #101511 0%, #0E2A18 100%);
    color: #F4F7F2;
    position: relative; overflow: hidden;
    box-shadow: 0 24px 60px -18px rgba(11,14,12,.4);
}
.sys-bonus::before {
    content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
    background: rgba(61,220,132,.3); filter: blur(70px);
    right: -80px; top: -100px; pointer-events: none;
}
.sys-bonus > * { position: relative; z-index: 1; }
.sys-bonus-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem; font-weight: 700; letter-spacing: .16em;
    color: #A8E04A; margin: 0 0 .6rem;
}
.sys-bonus h2 { color: #fff; font-weight: 800; margin: 0 0 1.2rem; }
.sys-bonus-note { font-size: .88rem; color: rgba(244,247,242,.65); margin: 1rem 0 0; }
/* FluentForm dans le bonus */
.sys-bonus .ff-el-form-bottom, .sys-bonus .fluent_form { color: #F4F7F2; }
.sys-bonus input[type="text"], .sys-bonus input[type="email"] {
    border-radius: 10px !important; border: 1px solid rgba(255,255,255,.2) !important;
    background: rgba(255,255,255,.08) !important; color: #fff !important;
}
.sys-bonus input::placeholder { color: rgba(255,255,255,.5); }
.sys-bonus button, .sys-bonus .ff-btn {
    background: linear-gradient(120deg, #3DDC84, #A8E04A) !important;
    color: #06210F !important; font-weight: 700 !important;
    border-radius: 10px !important; border: 0 !important;
    box-shadow: 0 10px 26px -8px rgba(61,220,132,.6);
}

@media (max-width: 640px) { .sys-bonus { padding: 1.8rem 1.4rem; } }

/* ---------- Glow signature sur les cartes stack ---------- */
.sys-stack-item { position: relative; overflow: hidden; }
.sys-stack-item::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 0%), rgba(61,180,220,.12), transparent 40%);
    opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.sys-stack-item:hover::before { opacity: 1; }