/* =========================================================
   CYBERDETECTIVE MARKETPLACE
   Corporate / Cyber / Directory
   Aucun framework externe
   ========================================================= */

:root {

    --bg:#050b14;
    --bg2:#07111f;

    --panel:rgba(11,25,43,.82);
    --panel2:#0d1c30;
    --panel3:#101f33;

    --text:#f4f8ff;
    --muted:#aebed2;
    --muted2:#8297ac;

    --cyan:#48e4ff;
    --cyan2:#a2f4ff;
    --blue:#598bff;
    --violet:#a779ff;
    --green:#56e8ae;
    --orange:#ffbd67;

    --border:rgba(133,190,255,.17);
    --borderStrong:rgba(72,228,255,.34);

    --radius:24px;
    --radiusSmall:14px;

    --shadow:0 25px 80px rgba(0,0,0,.38);

    --container:1200px;
}


* {
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {

    margin:0;

    overflow-x:hidden;

    color:var(--text);

    background:

        radial-gradient(
            circle at 13% 7%,
            rgba(69,139,255,.14),
            transparent 31%
        ),

        radial-gradient(
            circle at 88% 24%,
            rgba(167,121,255,.09),
            transparent 29%
        ),

        var(--bg);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:1.65;
}


body::before {

    content:"";

    position:fixed;

    inset:0;

    z-index:-10;

    pointer-events:none;

    opacity:.15;

    background-image:

        linear-gradient(
            rgba(72,228,255,.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(72,228,255,.07) 1px,
            transparent 1px
        );

    background-size:48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 90%
        );
}


a {
    color:inherit;
}


img {
    display:block;
    max-width:100%;
}


button,
input,
select {
    font:inherit;
}


.container {

    width:min(
        calc(100% - 3rem),
        var(--container)
    );

    margin-inline:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    position:sticky;

    top:0;

    z-index:100;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(5,11,20,.80);

    backdrop-filter:blur(18px);
}


.navbar {

    min-height:76px;

    display:flex;

    align-items:center;

    gap:26px;
}


.logo {

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

    color:#fff;

    text-decoration:none;

    font-weight:800;

    letter-spacing:-.02em;
}


.logo-mark {

    width:38px;

    height:38px;

    display:grid;

    place-items:center;

    border:
        1px solid var(--borderStrong);

    border-radius:11px;

    color:var(--cyan);

    background:
        linear-gradient(
            135deg,
            rgba(72,228,255,.20),
            rgba(89,139,255,.05)
        );

    box-shadow:
        inset 0 0 22px
        rgba(72,228,255,.08);

    font-size:.85rem;
}


.nav-links {

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:3px;
}


.nav-links a {

    padding:10px;

    border-radius:9px;

    color:#c2d0de;

    text-decoration:none;

    font-size:.84rem;

    font-weight:650;

    transition:.2s ease;
}


.nav-links a:hover,
.nav-links a:focus-visible {

    color:#fff;

    background:
        rgba(255,255,255,.06);
}


.nav-links .active {
    color:var(--cyan2);
}


.nav-cta {

    margin-left:6px;

    padding:
        10px 16px !important;

    color:
        #031017 !important;

    background:
        var(--cyan) !important;
}


.menu-toggle {

    display:none;

    margin-left:auto;

    width:44px;

    height:44px;

    border:
        1px solid var(--border);

    border-radius:12px;

    color:#fff;

    background:var(--panel);

    font-size:1.2rem;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb {

    padding-top:26px;

    color:#72879c;

    font-size:.78rem;
}


.breadcrumb a {

    color:#91a7bb;

    text-decoration:none;
}


.breadcrumb span {
    margin:0 8px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    position:relative;

    overflow:hidden;
}


.hero-grid {

    padding:
        70px 0 105px;

    display:grid;

    grid-template-columns:
        1.04fr .96fr;

    gap:65px;

    align-items:center;
}


.eyebrow {

    margin-bottom:20px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--cyan2);

    font-size:.76rem;

    font-weight:850;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.eyebrow::before {

    content:"";

    width:34px;

    height:1px;

    background:var(--cyan);

    box-shadow:
        0 0 12px var(--cyan);
}


h1,
h2,
h3 {

    margin-top:0;

    line-height:1.08;
}


h1 {

    max-width:850px;

    margin-bottom:25px;

    font-size:
        clamp(3rem,6vw,5.7rem);

    letter-spacing:-.06em;
}


.gradient {

    color:transparent;

    background:
        linear-gradient(
            90deg,
            #fff,
            var(--cyan2),
            #9eb9ff
        );

    background-clip:text;

    -webkit-background-clip:text;
}


.hero-lead {

    max-width:760px;

    margin:
        0 0 28px;

    color:#c0cede;

    font-size:
        clamp(
            1.04rem,
            1.6vw,
            1.21rem
        );
}


.hero-note {

    max-width:720px;

    margin-bottom:31px;

    padding-left:17px;

    border-left:
        2px solid var(--cyan);

    color:#91a7ba;

    font-size:.9rem;
}


.hero-actions {

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}


.btn {

    min-height:51px;

    padding:
        0 21px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:12px;

    text-decoration:none;

    font-weight:760;

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.btn:hover {
    transform:translateY(-2px);
}


.btn-primary {

    color:#021017;

    background:var(--cyan);

    box-shadow:
        0 10px 35px
        rgba(72,228,255,.18);
}


.btn-secondary {

    border:
        1px solid var(--border);

    color:#eaf5ff;

    background:
        rgba(255,255,255,.035);
}


/* =========================================================
   MARKETPLACE MOCKUP
   ========================================================= */

.market-window {

    position:relative;

    min-height:570px;

    overflow:hidden;

    border:
        1px solid var(--border);

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(13,30,50,.97),
            rgba(5,14,26,.98)
        );

    box-shadow:var(--shadow);
}


.market-top {

    height:54px;

    padding:
        0 18px;

    display:flex;

    align-items:center;

    gap:7px;

    border-bottom:
        1px solid var(--border);
}


.market-dot {

    width:7px;

    height:7px;

    border-radius:50%;

    background:#526c82;
}


.market-dot.on {

    background:var(--green);

    box-shadow:
        0 0 12px var(--green);
}


.market-status {

    margin-left:auto;

    color:#70889f;

    font-family:monospace;

    font-size:.66rem;
}


.market-body {
    padding:23px;
}


.fake-search {

    margin-bottom:19px;

    padding:15px;

    display:flex;

    gap:10px;

    align-items:center;

    border:
        1px solid var(--borderStrong);

    border-radius:13px;

    color:#70869a;

    background:
        rgba(0,0,0,.18);

    font-size:.8rem;
}


.search-symbol {

    color:var(--cyan);

    font-size:1.1rem;
}


.fake-filters {

    margin-bottom:18px;

    display:flex;

    flex-wrap:wrap;

    gap:7px;
}


.fake-filter {

    padding:
        6px 9px;

    border:
        1px solid var(--border);

    border-radius:8px;

    color:#8198ac;

    background:
        rgba(255,255,255,.025);

    font-size:.65rem;
}


.fake-filter.active {

    color:var(--cyan2);

    border-color:
        rgba(72,228,255,.28);

    background:
        rgba(72,228,255,.06);
}


.result-label {

    margin-bottom:11px;

    color:#6f879b;

    font-family:monospace;

    font-size:.65rem;
}


.fake-results {

    display:grid;

    gap:10px;
}


.fake-profile {

    padding:14px;

    display:grid;

    grid-template-columns:
        44px 1fr auto;

    gap:12px;

    align-items:center;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:13px;

    background:
        rgba(255,255,255,.025);
}


.avatar {

    width:44px;

    height:44px;

    display:grid;

    place-items:center;

    border:
        1px solid
        rgba(72,228,255,.19);

    border-radius:50%;

    color:var(--cyan);

    background:
        rgba(72,228,255,.06);

    font-size:.68rem;

    font-weight:800;
}


.fake-profile strong {

    display:block;

    margin-bottom:2px;

    color:#eaf3fb;

    font-size:.78rem;
}


.fake-profile small {

    display:block;

    color:#71899e;

    font-size:.64rem;
}


.profile-tag {

    padding:
        5px 7px;

    border-radius:6px;

    color:#9be6ca;

    background:
        rgba(86,232,174,.08);

    font-size:.59rem;

    white-space:nowrap;
}


.market-bottom {

    position:absolute;

    left:23px;

    right:23px;

    bottom:22px;

    padding-top:14px;

    display:flex;

    justify-content:space-between;

    border-top:
        1px solid rgba(255,255,255,.06);

    color:#6e8397;

    font-size:.65rem;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section {

    padding:
        105px 0;
}


.section-muted {

    border-top:
        1px solid rgba(255,255,255,.05);

    border-bottom:
        1px solid rgba(255,255,255,.05);

    background:
        rgba(255,255,255,.018);
}


.section-head {

    max-width:790px;

    margin-bottom:48px;
}


.kicker {

    margin-bottom:13px;

    color:var(--cyan);

    font-size:.76rem;

    font-weight:850;

    letter-spacing:.13em;

    text-transform:uppercase;
}


.section h2 {

    margin-bottom:19px;

    font-size:
        clamp(
            2.1rem,
            4vw,
            3.65rem
        );

    letter-spacing:-.045em;
}


.section-head p {

    margin:0;

    color:var(--muted);

    font-size:1.06rem;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-panel {

    padding:28px;

    border:
        1px solid var(--border);

    border-radius:24px;

    background:var(--panel);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.18);
}


.search-grid {

    display:grid;

    grid-template-columns:
        2fr 1fr 1fr auto;

    gap:11px;
}


.field label {

    display:block;

    margin-bottom:7px;

    color:#8da3b6;

    font-size:.72rem;

    font-weight:700;
}


.field input,
.field select {

    width:100%;

    min-height:49px;

    padding:
        0 14px;

    border:
        1px solid var(--border);

    border-radius:10px;

    outline:none;

    color:#e7f0f9;

    background:#081523;
}


.field input:focus,
.field select:focus {

    border-color:var(--cyan);

    box-shadow:
        0 0 0 3px
        rgba(72,228,255,.06);
}


.search-button-wrap {

    display:flex;

    align-items:flex-end;
}


.search-button {

    min-height:49px;

    padding:
        0 20px;

    border:0;

    border-radius:10px;

    cursor:pointer;

    color:#031017;

    background:var(--cyan);

    font-weight:800;
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.categories {

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;
}


.category {

    min-height:210px;

    padding:26px;

    border:
        1px solid var(--border);

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(16,35,58,.88),
            rgba(7,17,30,.94)
        );

    text-decoration:none;

    transition:.22s ease;
}


.category:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--borderStrong);
}


.category-code {

    margin-bottom:35px;

    color:var(--cyan);

    font-family:monospace;

    font-size:.7rem;
}


.category h3 {

    margin-bottom:9px;

    font-size:1.08rem;
}


.category p {

    margin:0;

    color:var(--muted);

    font-size:.85rem;
}


/* =========================================================
   REAL LISTINGS
   ========================================================= */

.directory-layout {

    display:grid;

    grid-template-columns:
        270px 1fr;

    gap:30px;

    align-items:start;
}


.sidebar {

    padding:23px;

    border:
        1px solid var(--border);

    border-radius:19px;

    background:var(--panel);
}


.sidebar-title {

    margin-bottom:18px;

    color:#e4eef8;

    font-size:.9rem;

    font-weight:800;
}


.filter-group {

    padding:
        17px 0;

    border-top:
        1px solid rgba(255,255,255,.06);
}


.filter-group strong {

    display:block;

    margin-bottom:10px;

    color:#a8bacb;

    font-size:.75rem;
}


.checkbox {

    margin:
        8px 0;

    display:flex;

    gap:8px;

    align-items:center;

    color:#849aae;

    font-size:.77rem;
}


.checkbox input {
    accent-color:var(--cyan);
}


.listings-head {

    margin-bottom:18px;

    display:flex;

    justify-content:space-between;

    gap:20px;

    align-items:center;
}


.listings-head strong {
    font-size:1rem;
}


.listings-head span {

    color:#71889d;

    font-size:.75rem;
}


.listings {

    display:grid;

    gap:15px;
}


.listing {

    position:relative;

    padding:25px;

    display:grid;

    grid-template-columns:
        70px 1fr auto;

    gap:20px;

    align-items:start;

    border:
        1px solid var(--border);

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(15,33,55,.87),
            rgba(7,17,30,.94)
        );
}


.listing.partner {

    border-color:
        rgba(72,228,255,.29);
}


.listing-avatar {

    width:70px;

    height:70px;

    display:grid;

    place-items:center;

    border:
        1px solid
        rgba(72,228,255,.20);

    border-radius:18px;

    color:var(--cyan);

    background:
        rgba(72,228,255,.06);

    font-weight:850;
}


.listing-top {

    margin-bottom:5px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    align-items:center;
}


.listing h3 {

    margin:0;

    font-size:1.13rem;
}


.badge {

    padding:
        4px 7px;

    border-radius:6px;

    color:#9ee8cf;

    background:
        rgba(86,232,174,.09);

    font-size:.58rem;

    font-weight:800;

    letter-spacing:.05em;

    text-transform:uppercase;
}


.badge.partner-badge {

    color:var(--cyan2);

    background:
        rgba(72,228,255,.08);
}


.listing-speciality {

    margin-bottom:10px;

    color:#90a7ba;

    font-size:.79rem;
}


.listing p {

    max-width:650px;

    margin:
        0 0 13px;

    color:var(--muted);

    font-size:.86rem;
}


.skills {

    display:flex;

    flex-wrap:wrap;

    gap:6px;
}


.skills span {

    padding:
        5px 8px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:7px;

    color:#7f96a9;

    background:
        rgba(255,255,255,.025);

    font-size:.63rem;
}


.listing-action {

    min-width:120px;

    padding:
        9px 11px;

    border:
        1px solid var(--border);

    border-radius:9px;

    color:#dce9f4;

    text-align:center;

    text-decoration:none;

    font-size:.72rem;

    font-weight:750;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.workflow {

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:16px;
}


.workflow-card {

    min-height:260px;

    padding:28px;

    border:
        1px solid var(--border);

    border-radius:21px;

    background:var(--panel);
}


.workflow-number {

    margin-bottom:38px;

    color:var(--cyan);

    font-family:monospace;

    font-size:.7rem;
}


.workflow-card h3 {

    margin-bottom:11px;

    font-size:1.15rem;
}


.workflow-card p {

    margin:0;

    color:var(--muted);

    font-size:.88rem;
}


/* =========================================================
   PARTNERS
   ========================================================= */

.partner-box {

    padding:55px;

    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:55px;

    border:
        1px solid var(--borderStrong);

    border-radius:29px;

    background:

        radial-gradient(
            circle at 100% 0,
            rgba(72,228,255,.10),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            rgba(13,31,52,.96),
            rgba(7,15,28,.98)
        );
}


.partner-box p {
    color:var(--muted);
}


.partner-points {

    display:grid;

    gap:11px;
}


.partner-point {

    padding:18px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:13px;

    background:
        rgba(0,0,0,.13);
}


.partner-point strong {

    display:block;

    margin-bottom:3px;

    color:#edf6ff;
}


.partner-point span {

    color:#8fa4b7;

    font-size:.83rem;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.disclaimer {

    padding:36px;

    border:
        1px solid rgba(255,189,103,.22);

    border-radius:22px;

    background:
        rgba(67,44,23,.21);
}


.disclaimer-label {

    margin-bottom:10px;

    color:var(--orange);

    font-size:.72rem;

    font-weight:850;

    letter-spacing:.1em;

    text-transform:uppercase;
}


.disclaimer h3 {

    margin-bottom:14px;

    font-size:1.4rem;
}


.disclaimer p {

    margin-bottom:0;

    color:#c5b9ab;
}


/* =========================================================
   PROFESSIONAL CTA
   ========================================================= */

.pro-cta {

    text-align:center;
}


.pro-box {

    padding:
        70px 30px;

    border:
        1px solid var(--border);

    border-radius:30px;

    background:

        radial-gradient(
            circle at 50% 0,
            rgba(167,121,255,.12),
            transparent 43%
        ),

        var(--panel);
}


.pro-box h2 {

    max-width:750px;

    margin:
        0 auto 19px;
}


.pro-box p {

    max-width:690px;

    margin:
        0 auto 29px;

    color:var(--muted);
}


/* =========================================================
   FAQ
   ========================================================= */

.faq {
    max-width:900px;
}


details {

    margin-bottom:10px;

    border:
        1px solid var(--border);

    border-radius:15px;

    background:
        rgba(255,255,255,.025);
}


summary {

    padding:
        20px 22px;

    cursor:pointer;

    color:#e6f0fa;

    font-weight:700;
}


details p {

    margin:0;

    padding:
        0 22px 22px;

    color:var(--muted);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

    padding:
        68px 0 28px;

    border-top:
        1px solid rgba(255,255,255,.07);

    background:#030810;
}


.footer-grid {

    display:grid;

    grid-template-columns:
        1.5fr repeat(3,1fr);

    gap:45px;
}


.footer-intro {
    max-width:430px;
}


.footer-intro p,
.footer-column a {

    color:#8396a9;

    font-size:.85rem;
}


.footer-column h3 {

    margin-bottom:17px;

    color:#dbe8f4;

    font-size:.8rem;

    letter-spacing:.07em;

    text-transform:uppercase;
}


.footer-column a {

    display:block;

    margin:9px 0;

    text-decoration:none;
}


.legal-notice {

    margin-top:50px;

    padding:24px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:15px;

    color:#8293a4;

    background:
        rgba(255,255,255,.025);

    font-size:.8rem;
}


.legal-notice strong {
    color:#c8d5e2;
}


.copyright {

    margin-top:24px;

    display:flex;

    justify-content:space-between;

    gap:20px;

    color:#627589;

    font-size:.75rem;
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal {

    opacity:0;

    transform:
        translateY(22px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.reveal.visible {

    opacity:1;

    transform:none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1050px) {

    .nav-links {

        display:none;

        position:absolute;

        top:76px;

        left:1rem;

        right:1rem;

        padding:14px;

        flex-direction:column;

        align-items:stretch;

        border:
            1px solid var(--border);

        border-radius:16px;

        background:#081321;

        box-shadow:var(--shadow);
    }


    .nav-links.open {
        display:flex;
    }


    .menu-toggle {
        display:block;
    }


    .hero-grid,
    .partner-box {

        grid-template-columns:1fr;
    }


    .categories {

        grid-template-columns:
            1fr 1fr;
    }


    .search-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .directory-layout {

        grid-template-columns:1fr;
    }


    .sidebar {

        display:none;
    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width:680px) {

    .container {

        width:min(
            calc(100% - 2rem),
            var(--container)
        );
    }


    .hero-grid {

        padding:
            55px 0 70px;
    }


    h1 {

        font-size:
            clamp(
                2.65rem,
                14vw,
                4rem
            );
    }


    .market-window {

        min-height:600px;
    }


    .section {

        padding:
            75px 0;
    }


    .categories,
    .workflow,
    .search-grid {

        grid-template-columns:1fr;
    }


    .listing {

        grid-template-columns:
            55px 1fr;
    }


    .listing-avatar {

        width:55px;

        height:55px;
    }


    .listing-action {

        grid-column:
            1 / -1;
    }


    .partner-box {

        padding:30px;
    }


    .footer-grid {

        grid-template-columns:1fr;
    }


    .copyright {

        flex-direction:column;
    }

}


@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }


    .reveal {

        opacity:1;

        transform:none;
    }

}