@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root,
[data-theme="dark"] {
    --bg:        #0e0e10;
    --bg-1:      #161618;
    --bg-2:      #1e1e22;
    --bg-card:   #131315;
    --border:    rgba(255,255,255,0.06);
    --border-2:  rgba(255,255,255,0.11);
    --border-3:  rgba(255,255,255,0.19);
    --accent:    #ffffff;
    --accent-2:  #ffffff;
    --accent-bg: rgba(255,255,255,0.06);
    --text:      #ffffff;
    --text-2:    #7c7a96;
    --text-3:    #4a4860;
    --green:     #4ade80;
    --green-bg:  rgba(74,222,128,0.07);
    --amber:     #fbbf24;
    --amber-bg:  rgba(251,191,36,0.07);
    --nav-h:     60px;
    --r:         4px;
    --r-lg:      8px;
    --max:       1020px;
}

[data-theme="light"] {
    --bg:        #faf9f7;
    --bg-1:      #f2f0ec;
    --bg-2:      #e8e4de;
    --bg-card:   #ffffff;
    --border:    rgba(0,0,0,0.07);
    --border-2:  rgba(0,0,0,0.13);
    --border-3:  rgba(0,0,0,0.22);
    --accent:    #1a1a1e;
    --accent-2:  #0a0a0e;
    --accent-bg: rgba(26,26,30,0.06);
    --text:      #111114;
    --text-2:    #55536a;
    --text-3:    #a0a0b8;
    --green:     #16a34a;
    --green-bg:  rgba(22,163,74,0.07);
    --amber:     #d97706;
    --amber-bg:  rgba(217,119,6,0.07);
    --nav-h:     60px;
    --r:         4px;
    --r-lg:      8px;
    --max:       1020px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    font-family:'Plus Jakarta Sans', -apple-system, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    font-size:15px;
}


a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
main { position:relative; z-index:1; }
.w { max-width:var(--max); margin:0 auto; padding:0 40px; }

header {
    position:fixed;
    top:0; width:100%;
    height:var(--nav-h);
    z-index:1000;
    background:rgba(13,13,15,0.88);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
}

[data-theme="light"] header { background:rgba(250,249,247,0.92); }

nav {
    max-width:var(--max);
    margin:0 auto;
    height:100%;
    padding:0 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.logo {
    display:flex; align-items:center; gap:10px;
    font-size:1.05rem; font-weight:700;
    color:var(--text); flex-shrink:0;
    letter-spacing:-0.02em;
}
.logo img { width:32px; height:32px; border-radius:6px; }

.nav-links {
    display:flex; align-items:center;
    list-style:none; flex:1;
    justify-content:center; gap:0;
}

.nav-links > li > a {
    display:flex; align-items:center; gap:5px;
    padding:5px 12px; border-radius:var(--r);
    color:var(--text-2); font-size:0.83rem; font-weight:500;
    transition:color 0.12s, background 0.12s;
    white-space:nowrap;
}

.nav-links > li > a:hover { color:var(--text); background:var(--bg-1); }
.nav-links > li.nav-active > a { color:#fff; }
[data-theme="light"] .nav-links > li.nav-active > a { color:var(--accent-2); }

.nav-links li.dropdown { position:relative; }

.nav-links li.dropdown > a { padding-bottom:8px; margin-bottom:0; }
.nav-links li.dropdown > ul {
    display:none;
    position:absolute; top:calc(100% + 8px); left:50%;
    transform:translateX(-50%);
    background:var(--bg-1); border:1px solid var(--border-2);
    border-radius:var(--r-lg); padding:4px; list-style:none;
    min-width:210px; box-shadow:0 20px 60px rgba(0,0,0,0.7); z-index:1001;
}
/* Ouverture via JS (click) — plus de hover */
.nav-links li.dropdown.dd-open > ul { display:block; }
.nav-links li.dropdown ul li a {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border-radius:var(--r);
    color:var(--text-2); font-size:0.83rem;
    transition:color 0.12s, background 0.12s;
}
.nav-links li.dropdown ul li a:hover { color:var(--text); background:var(--bg-2); }

.nav-right { display:flex; align-items:center; gap:8px; }
.nav-theme-row { display:none; } /* visible uniquement dans le menu mobile ouvert */

.menu-btn {
    display:none; align-items:center; justify-content:center;
    background:transparent; border:none; cursor:pointer;
    color:var(--text-2); font-size:1.05rem;
    padding:6px 8px; border-radius:var(--r);
    transition:color 0.12s; line-height:1;
}
.menu-btn:hover { color:var(--text); }


.theme-seg {
    display:flex; align-items:center;
    background:var(--bg-1); border:1px solid var(--border-2);
    border-radius:99px; padding:3px; gap:1px;
}
.theme-seg-btn {
    display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:99px; border:none;
    background:transparent; color:var(--text-2);
    font-size:0.7rem; cursor:pointer; opacity:0.35;
    transition:background 0.15s, color 0.15s, opacity 0.15s;
}
.theme-seg-btn:hover { opacity:0.7; }
.theme-seg-btn.active {
    background:var(--bg-card); color:var(--text);
    opacity:1; box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:calc(var(--nav-h) + 40px);
    padding-bottom:80px;
    position:relative; z-index:1;
}

.hero > .w { width:100%; }

.hero-pills {
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:24px;
}

.hero-pill {
    font-size:0.75rem;
    font-weight:500;
    color:var(--text-2);
    border:1px solid var(--border-2);
    border-radius:99px;
    padding:5px 14px;
    letter-spacing:0.01em;
}

.hero h1 {
    font-size:clamp(3.5rem, 8.5vw, 7rem);
    font-weight:800;
    letter-spacing:-0.05em;
    line-height:0.95;
    color:var(--text);
    max-width:780px;
    margin-bottom:28px;
}

.hero > .w > p {
    font-size:0.97rem;
    color:var(--text-2);
    line-height:1.75;
    max-width:440px;
    margin:0 auto 40px;
}

.hero-sub-row {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    max-width:780px;
}

.hero > .w > .hero-sub-row > p {
    font-size:0.95rem;
    color:var(--text-2);
    line-height:1.78;
    max-width:300px;
    flex-shrink:0;
}

.hero-btns {
    display:flex; gap:8px; flex-wrap:wrap;
    justify-content:flex-end;
    flex-shrink:0;
}

.btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:10px 20px; border-radius:var(--r);
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:0.84rem; font-weight:600;
    border:none; cursor:pointer; text-decoration:none;
    transition:all 0.15s ease; white-space:nowrap;
}

.btn-filled {
    background:var(--text); color:var(--bg);
    box-shadow:none;
}
.btn-filled:hover { background:var(--accent-2); transform:translateY(-1px); color:var(--bg); }
.btn-filled:active { transform:translateY(0); }

.btn-outline {
    background:transparent; color:var(--text-2);
    border:1px solid var(--border-2);
}
.btn-outline:hover { color:var(--text); background:var(--bg-1); border-color:var(--border-3); }

.btn-ghost-sm {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 13px; border-radius:var(--r);
    background:transparent; color:var(--text-2);
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:0.81rem; font-weight:500;
    border:1px solid var(--border);
    cursor:pointer; text-decoration:none;
    transition:all 0.15s;
}
.btn-ghost-sm:hover { color:var(--text); border-color:var(--border-2); background:var(--bg-1); }

.sep { height:1px; background:var(--border); position:relative; z-index:1; }

.section { padding:80px 0; position:relative; z-index:1; }

.sec-head { margin-bottom:40px; }

.sec-label {
    font-size:0.68rem; font-weight:700;
    letter-spacing:0.18em; text-transform:uppercase;
    color:var(--text-2); margin-bottom:10px; display:block;
}

.sec-title {
    font-size:1.7rem; font-weight:800;
    letter-spacing:-0.04em; color:var(--text);
    line-height:1.12; margin-bottom:10px;
}

.sec-sub {
    font-size:0.88rem; color:var(--text-2);
    max-width:none; line-height:1.72;
}

.products-grid {
    display:flex;
    flex-direction:column;
    gap:0;
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    overflow:hidden;
}

.product-card {
    display:flex;
    align-items:center;
    gap:20px;
    padding:22px 28px;
    background:var(--bg-card);
    border-bottom:1px solid var(--border);
    text-decoration:none; color:inherit;
    opacity:0; transform:translateX(-12px);
    transition:opacity 0.5s ease, transform 0.5s ease, background 0.15s;
    position:relative;
}

.product-card:last-child { border-bottom:none; }
.product-card.visible { opacity:1; transform:translateX(0); }
.product-card.live:hover { background:var(--bg-1); }
.product-card.upcoming { opacity:0.3 !important; cursor:default; pointer-events:none; }

.products-grid .product-card:nth-child(2) { transition-delay:0.07s; }
.products-grid .product-card:nth-child(3) { transition-delay:0.14s; }

.product-icon {
    width:42px; height:42px; border-radius:10px;
    background:var(--bg-2); border:1px solid var(--border-2);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex-shrink:0;
}
.product-icon img { width:100%; height:100%; object-fit:cover; border-radius:9px; }

.product-card-body { flex:1; min-width:0; }

.product-card h3 {
    font-size:0.92rem; font-weight:700;
    color:var(--text); letter-spacing:-0.01em;
    margin-bottom:4px;
}

.product-card p {
    font-size:0.83rem; color:var(--text-2);
    line-height:1.55;
}

.product-card-right {
    display:flex; align-items:center; gap:12px; flex-shrink:0;
}

.badge {
    font-size:0.63rem; font-weight:700;
    letter-spacing:0.07em; text-transform:uppercase;
    padding:3px 8px; border-radius:3px;
}
.badge-live { background:var(--green-bg); color:var(--green); border:1px solid rgba(74,222,128,0.18); }
.badge-soon { background:var(--amber-bg); color:var(--amber); border:1px solid rgba(251,191,36,0.18); }

.product-type {
    font-size:0.72rem; color:var(--text-3);
    font-weight:500; letter-spacing:0.03em;
}

.contrib-badge {
    display:inline-block; font-size:0.58rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    padding:2px 7px; border-radius:3px; vertical-align:middle;
    margin-left:6px; position:relative; top:-1px;
}
.contrib-badge-bot {
    background:rgba(88,101,242,0.15); color:#8a9ef5;
    border:1px solid rgba(88,101,242,0.3);
}
.contrib-badge-web {
    background:rgba(34,211,238,0.12); color:#22d3ee;
    border:1px solid rgba(34,211,238,0.25);
}
.contrib-badge-plugin {
    background:rgba(192,132,252,0.12); color:#c084fc;
    border:1px solid rgba(192,132,252,0.25);
}
.contrib-badge-other {
    background:var(--bg-2); color:var(--text-2);
    border:1px solid var(--border-2);
}

.new-badge {
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.5rem; font-weight:900;
    letter-spacing:0.14em; text-transform:uppercase;
    padding:2px 7px 2px calc(7px + 0.14em); border-radius:99px;
    vertical-align:middle; margin-left:8px; position:relative; top:-1px;
    background:var(--text); color:var(--bg);
    box-shadow:0 0 8px rgba(255,255,255,0.15);
}

.card-arrow {
    font-size:0.85rem; color:var(--text-3);
    transition:color 0.15s, transform 0.18s;
}
.product-card.live:hover .card-arrow { color:var(--text); transform:translateX(4px); }

/* ── Service cards unifié ───────────────────────────────────── */
.svc-unified {
    background:var(--bg-card);
    border:1px solid var(--border-2);
    border-radius:var(--r-lg);
    overflow:hidden;
    opacity:0; transform:translateY(12px);
    transition:opacity 0.5s ease, transform 0.5s ease;
}
.svc-unified.visible { opacity:1; transform:translateY(0); }

.svc-top-bar {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:13px 24px;
    border-bottom:1px solid var(--border);
    background:var(--bg-1);
}
.svc-top-label {
    font-size:0.63rem; font-weight:700; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--text-3);
}
.svc-devis-tag {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:99px;
    border:1px solid var(--border-2);
    font-size:0.67rem; font-weight:600; color:var(--text-3);
}
.svc-devis-tag i { font-size:0.58rem; opacity:0.7; }

.svc-cols { display:grid; grid-template-columns:1fr 1fr; }

.svc-col {
    padding:30px 28px 28px;
    position:relative;
    transition:background 0.18s;
    cursor:default;
}
.svc-col:hover { background:var(--bg-1); }
.svc-col:first-child { border-right:1px solid var(--border); }
.svc-col::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
    opacity:0; transition:opacity 0.2s;
}
.svc-col:hover::before { opacity:1; }

.svc-col-header {
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.svc-col-icon {
    width:34px; height:34px; border-radius:var(--r);
    background:var(--accent-bg); border:1px solid var(--border-2);
    display:flex; align-items:center; justify-content:center;
    font-size:0.82rem; color:var(--text-2); flex-shrink:0;
    transition:background 0.18s, border-color 0.18s;
}
.svc-col:hover .svc-col-icon { background:rgba(255,255,255,0.08); border-color:var(--border-3); }
.svc-col-tag {
    font-size:0.6rem; font-weight:800; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--text-3); display:block;
}

.svc-col h3 {
    font-size:1rem; font-weight:800; letter-spacing:-0.025em;
    color:var(--text); margin-bottom:8px;
}
.svc-col > p {
    font-size:0.82rem; color:var(--text-2); line-height:1.75; margin-bottom:20px;
}

.svc-feat-sep { height:1px; background:var(--border); margin-bottom:16px; }

.svc-feat-list {
    list-style:none; display:flex; flex-direction:column;
    gap:8px; margin-bottom:28px;
}
.svc-feat-list li {
    display:flex; align-items:flex-start; gap:9px;
    font-size:0.81rem; color:var(--text-2); line-height:1.55;
}
.svc-feat-list li::before {
    content:''; width:3px; height:3px; border-radius:50%;
    background:var(--text-3); flex-shrink:0; margin-top:7px;
}

.svc-col-link {
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.79rem; font-weight:600; color:var(--text-2);
    border-bottom:1px solid transparent; padding-bottom:1px;
    transition:color 0.12s, border-color 0.12s;
}
.svc-col-link:hover { color:var(--text); border-color:var(--border-3); }
.svc-col-link i { font-size:0.62rem; transition:transform 0.15s; }
.svc-col-link:hover i { transform:translateX(3px); }

.svc-bottom-bar {
    padding:20px 28px;
    border-top:1px solid var(--border);
    background:var(--bg-1);
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
}
.svc-bottom-eyebrow {
    font-size:0.6rem; font-weight:700; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:2px;
}
.svc-bottom-text { font-size:0.82rem; color:var(--text-2); }

.btn-discord {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 22px; background:#5865F2; color:#fff;
    border-radius:var(--r); font-size:0.84rem; font-weight:600;
    transition:opacity 0.15s, transform 0.15s;
    box-shadow:0 4px 20px rgba(88,101,242,0.3);
    white-space:nowrap; flex-shrink:0;
}
.btn-discord:hover { opacity:0.88; transform:translateY(-1px); color:#fff; }

.page-404 {
    min-height:100vh; display:flex;
    align-items:center; justify-content:center;
    text-align:center; padding:40px 24px;
    position:relative; z-index:1;
}

.page-404-code {
    font-size:clamp(6rem, 18vw, 12rem);
    font-weight:800; letter-spacing:-0.06em;
    color:var(--bg-2); line-height:1;
    display:block; margin-bottom:16px;
}

.page-404 h2 { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.page-404 p { font-size:0.88rem; color:var(--text-2); line-height:1.7; margin-bottom:32px; }
.page-404-btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

.site-footer {
    border-top:1px solid var(--border);
    padding:48px 0 28px;
    position:relative; z-index:1;
}

.footer-grid {
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
    gap:48px; margin-bottom:32px;
}

.footer-brand { display:flex; flex-direction:column; gap:12px; }

.footer-logo {
    display:flex; align-items:center; gap:8px;
    font-size:0.92rem; font-weight:700;
    color:var(--text); width:fit-content;
}
.footer-logo img { width:24px; height:24px; border-radius:4px; }

.footer-desc { font-size:0.8rem; color:var(--text-3); line-height:1.65; max-width:200px; }
.footer-copy { font-size:0.75rem; color:var(--text-3); }

.footer-col h4 {
    font-size:0.63rem; font-weight:700;
    letter-spacing:0.18em; text-transform:uppercase;
    color:var(--text); margin-bottom:14px;
}

.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }

.footer-col a {
    font-size:0.83rem; color:var(--text-2);
    display:inline-flex; align-items:center; gap:7px;
    transition:color 0.12s;
}
.footer-col a:hover { color:var(--text); }

.footer-bottom {
    padding-top:20px; border-top:1px solid var(--border);
    display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap; gap:8px;
}
.footer-bottom span { font-size:0.74rem; color:var(--text-3); }

.reveal { opacity:0; transform:translateY(12px); transition:opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

.legal-page {
    padding-top:calc(var(--nav-h) + 64px);
    padding-bottom:100px; position:relative; z-index:1;
}
.legal-page .w { max-width:700px; }

.legal-header {
    margin-bottom:44px; padding-bottom:24px;
    border-bottom:1px solid var(--border);
}

.legal-header h1 {
    font-size:2rem; font-weight:800;
    letter-spacing:-0.04em; color:var(--text); margin-bottom:8px;
}

.legal-meta { display:flex; gap:20px; flex-wrap:wrap; }
.legal-meta span { font-size:0.78rem; color:var(--text-3); }
.legal-meta strong { color:var(--text-2); font-weight:500; }

.legal-toc {
    background:var(--bg-1) !important;
    border:1px solid var(--border) !important;
    border-left:2px solid var(--text) !important;
    border-radius:0 var(--r) var(--r) 0 !important;
    padding:18px 22px !important;
    margin-bottom:44px !important;
    display:block !important; position:static !important;
    height:auto !important; max-width:100% !important;
    backdrop-filter:none !important; z-index:auto !important;
}

.legal-toc-title {
    font-size:0.63rem; font-weight:700;
    letter-spacing:0.18em; text-transform:uppercase;
    color:var(--text-3); margin-bottom:12px; display:block;
}

.legal-toc ol {
    list-style:decimal; padding-left:18px;
    display:flex; flex-direction:column; gap:5px; margin:0;
}
.legal-toc ol li { padding:0; background:none; border:none; }
.legal-toc ol li a {
    font-size:0.85rem; color:var(--text-2);
    transition:color 0.12s; display:inline;
    padding:0; background:none; border-radius:0;
}
.legal-toc ol li a:hover { color:var(--text); background:none; }

.legal-section { margin-bottom:40px; scroll-margin-top:calc(var(--nav-h) + 28px); }

.legal-section h2 {
    font-size:0.95rem; font-weight:700; color:var(--text);
    margin-bottom:12px;
    padding-bottom:10px; border-bottom:1px solid var(--border);
}

.legal-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:3px;
    background:var(--bg-2); border:1px solid var(--border-2);
    font-size:0.68rem; font-weight:700; color:var(--text-2); flex-shrink:0;
}

.legal-section p { font-size:0.875rem; color:var(--text-2); line-height:1.82; }
.legal-section p + p { margin-top:11px; }

.legal-section ul {
    list-style:none; margin-top:11px;
    display:flex; flex-direction:column; gap:6px;
}
.legal-section ul li {
    font-size:0.875rem; color:var(--text-2); line-height:1.72;
    padding-left:16px; position:relative;
}
.legal-section ul li::before {
    content:''; position:absolute; left:0; top:10px;
    width:3px; height:3px; border-radius:50%;
    background:var(--text-3);
}

.legal-link { color:var(--text); border-bottom:1px solid var(--border-2); transition:border-color 0.12s; }
.legal-link:hover { border-color:var(--text); }

.legal-info-box {
    background:var(--bg-1); border:1px solid var(--border);
    border-left:2px solid var(--border-3);
    border-radius:0 var(--r) var(--r) 0;
    padding:16px 20px; margin-top:4px;
}
.legal-info-box p { font-size:0.875rem; color:var(--text-2); line-height:2; }
.legal-info-box strong { color:var(--text); font-weight:600; }
.legal-placeholder { color:var(--amber); font-style:italic; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.28); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:#ffffff; box-shadow:0 0 10px rgba(255,255,255,0.7); }
html { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.28) transparent; }

[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.18); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.55); box-shadow:none; }
[data-theme="light"] { scrollbar-color:rgba(0,0,0,0.18) transparent; }

@media (max-width:860px) {
    .footer-grid { grid-template-columns:1fr 1fr 1fr; }
    .footer-brand { grid-column:1/-1; }
    .hero-sub-row { flex-direction:column; align-items:flex-start; gap:24px; }
    .hero-btns { justify-content:flex-start; }
    .section { padding:64px 0; }
}

@media (max-width:680px) {
    .w { padding:0 18px; }
    nav { padding:0 18px; }
    .menu-btn { display:flex; }
    nav .nav-links { display:none; }

    /* ── Panneau menu mobile (style card) ─────────────────── */
    .nav-right .theme-seg { display:none; } /* thème dans le menu mobile à la place */

    header.nav-open .nav-links {
        display:flex !important; flex-direction:column;
        position:absolute; top:var(--nav-h); left:0; right:0;
        background:var(--bg-1);
        border-bottom:1px solid var(--border-2);
        border-radius:0 0 12px 12px;
        box-shadow:0 24px 60px rgba(0,0,0,0.55);
        padding:0; gap:0; overflow-y:auto;
        max-height:calc(90vh - var(--nav-h));
        z-index:10;
    }

    /* Trigger accordéon (ex: "Bots") — cliquable sur mobile */
    header.nav-open .nav-links li.dropdown > a {
        display:flex; align-items:center; justify-content:space-between;
        padding:12px 20px; font-size:0.9rem; font-weight:500;
        color:var(--text-2); cursor:pointer; pointer-events:auto;
        border-top:1px solid var(--border); width:100%;
        transition:background 0.12s, color 0.12s; background:none;
    }
    header.nav-open .nav-links > li.dropdown:first-child > a { border-top:none; padding-top:14px; }
    header.nav-open .nav-links li.dropdown > a:hover { color:var(--text); background:var(--bg-2); }
    header.nav-open .nav-links li.dropdown > a .fa-chevron-down {
        font-size:0.6rem; opacity:0.4;
        transition:transform 0.2s; flex-shrink:0;
    }
    header.nav-open .nav-links li.dropdown.accordion-open > a .fa-chevron-down {
        transform:rotate(180deg); opacity:0.8;
    }

    /* Sous-menu — fermé par défaut, ouvert via JS */
    header.nav-open .nav-links li.dropdown > ul {
        display:none; position:static; transform:none;
        box-shadow:none; border:none; background:var(--bg-2);
        min-width:unset; padding:4px 0; list-style:none;
    }
    header.nav-open .nav-links li.dropdown.accordion-open > ul { display:block; }
    header.nav-open .nav-links li.dropdown > ul li a {
        display:flex; align-items:center; gap:10px;
        padding:10px 20px 10px 32px; font-size:0.87rem; font-weight:500;
        color:var(--text-2); border-radius:0; width:100%;
        transition:background 0.12s, color 0.12s;
    }
    header.nav-open .nav-links li.dropdown > ul li a:hover { color:var(--text); background:rgba(255,255,255,0.05); }

    /* Lien top-level — Rejoins-nous */
    header.nav-open .nav-links > li:not(.dropdown):not(.nav-theme-row) > a {
        display:flex; align-items:center; gap:10px;
        padding:12px 20px; font-size:0.9rem; font-weight:500;
        color:var(--text-2); width:100%; border-radius:0;
        border-top:1px solid var(--border);
        transition:background 0.12s, color 0.12s;
    }
    header.nav-open .nav-links > li:not(.dropdown):not(.nav-theme-row) > a:hover { color:var(--text); background:var(--bg-2); }

    /* Ligne thème — couleurs alignées avec les autres items */
    header.nav-open .nav-links .nav-theme-row {
        display:flex; align-items:center; justify-content:space-between;
        padding:14px 20px; border-top:1px solid var(--border); gap:12px;
    }
    .nav-theme-label {
        font-size:0.9rem; font-weight:500;
        color:var(--text-2); display:flex; align-items:center; gap:8px;
        flex-shrink:0;
    }

    .hero {
        min-height:100vh;
        min-height:100dvh;
        padding-top:calc(var(--nav-h) + 52px);
        padding-bottom:60px;
        text-align:center;
    }
    .hero h1 { font-size:clamp(2.2rem, 10vw, 3rem); letter-spacing:-0.04em; }
    .hero > .w > p { margin-left:auto; margin-right:auto; }
    .hero-btns { justify-content:center; }

    .products-grid { border-radius:var(--r); }
    .product-card { padding:16px 18px; gap:14px; }
    .product-card p { display:none; }
    .product-card h3 { font-size:0.9rem; }
    .product-card-right { flex-wrap:wrap; gap:6px; justify-content:flex-end; }

    /* Carte externe : layout colonne propre */
    .product-card.externe {
        flex-wrap:wrap; align-items:flex-start;
    }
    .product-card.externe .product-card-body { width:calc(100% - 42px - 14px); }
    .product-card.externe p {
        display:block;
        font-size:0.78rem; color:var(--text-2);
        line-height:1.55; margin-top:4px;
    }
    .product-card.externe .product-card-right {
        width:100%;
        padding-left:0;
        justify-content:flex-start;
        flex-wrap:wrap;
        gap:8px;
        margin-top:10px;
    }

    .svc-cols { grid-template-columns:1fr; }
    .svc-col:first-child { border-right:none; border-bottom:1px solid var(--border); }
    .svc-col:hover { background:transparent; }
    .svc-col { padding:24px 20px; }

    .legal-header h1 { font-size:1.6rem; }
    .legal-toc { padding:16px 18px !important; }

    .footer-grid { grid-template-columns:1fr; gap:24px; }
    .footer-brand { grid-column:unset; }
    .footer-bottom { flex-direction:column; align-items:flex-start; }
    .site-footer { padding:40px 0 24px; }

    .section { padding:52px 0; }
    .sec-title { font-size:1.5rem; }
}

@media (max-width:400px) {
    .hero h1 { font-size:2rem; }
    .hero-btns { flex-direction:column; align-items:center; }
    .hero-btns .btn { width:100%; justify-content:center; }
}

.hero-inner {
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:56px;
    align-items:center;
}

.hero-left { display:flex; flex-direction:column; gap:24px; }

.hero-console {
    background:#111115;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    overflow:hidden;
    flex-shrink:0;
}

.hc-bar {
    background:#1a1a1f;
    padding:9px 14px;
    display:flex;
    align-items:center;
    gap:6px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.hc-dot { width:9px; height:9px; border-radius:50%; }
.hc-dot-r { background:#ff5f57; }
.hc-dot-y { background:#febc2e; }
.hc-dot-g { background:#28c840; }
.hc-title { font-size:10px; color:rgba(255,255,255,0.25); margin-left:6px; font-family:monospace; }

.hc-tabs {
    display:flex;
    background:#161619;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.hc-tab {
    padding:5px 14px;
    font-size:10px;
    font-family:monospace;
    color:rgba(255,255,255,0.3);
    border-right:1px solid rgba(255,255,255,0.05);
}

.hc-tab.active {
    color:#f0ece4;
    background:#111115;
}

.hc-editor {
    padding:14px 16px;
    font-family:'Courier New', monospace;
    font-size:11.5px;
    display:flex;
    flex-direction:column;
}

.hc-line {
    line-height:1.65;
    opacity:0;
    white-space:pre;
    transition:opacity 0.1s;
}

.hc-line.on { opacity:1; }

.hc-ln { color:rgba(255,255,255,0.18); display:inline-block; width:18px; text-align:right; margin-right:14px; font-size:10px; user-select:none; }
.hc-kw  { color:#569cd6; }
.hc-fn  { color:#dcdcaa; }
.hc-str { color:#ce9178; }
.hc-cm  { color:#6a9955; }
.hc-var { color:#9cdcfe; }
.hc-op  { color:#d4d4d4; }

.hc-cursor {
    display:none;
    width:6px; height:12px;
    background:#aeafad;
    animation:hc-blink 0.8s step-end infinite;
    vertical-align:middle;
}
@keyframes hc-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hc-terminal {
    border-top:1px solid rgba(255,255,255,0.06);
    background:#0d0d10;
    padding:10px 14px;
    font-family:'Courier New', monospace;
    font-size:11px;
    flex-direction:column;
    gap:4px;
    display:none;
}

.hc-tline { opacity:0; }
.hc-tline.on { opacity:1; }

.hc-tp { color:#3fb950; }
.hc-tw { color:#f0ece4; }
.hc-td { color:rgba(255,255,255,0.3); }
.hc-tg { color:#3fb950; }
.hc-tb { color:#79c0ff; }

.hc-tcursor {
    display:inline-block;
    width:6px; height:11px;
    background:#3fb950;
    animation:hc-blink 1s step-end infinite;
    vertical-align:middle;
}

.hc-discord {
    border-top:1px solid rgba(255,255,255,0.06);
    background:#2f3136;
    padding:12px 14px;
    display:none;
    align-items:center;
    gap:10px;
    min-height:48px;
}

.hc-dc-av {
    width:26px; height:26px; border-radius:50%;
    background:#5865f2;
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:700; color:#fff;
    flex-shrink:0; position:relative;
    font-family:'Plus Jakarta Sans', sans-serif;
}

.hc-dc-status {
    position:absolute; bottom:-1px; right:-1px;
    width:8px; height:8px; border-radius:50%;
    border:2px solid #36393f;
    background:rgba(255,255,255,0.15);
    transition:background 0.3s;
}

.hc-dc-status.online { background:#3fb950; }

.hc-dc-text {
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:11px;
    color:rgba(255,255,255,0.7);
    opacity:0;
    transition:opacity 0.3s;
}

.hc-dc-text.on { opacity:1; }

.hc-dc-tag {
    font-size:8px; background:#5865f2; color:#fff;
    padding:1px 4px; border-radius:3px;
    margin-left:4px; font-weight:600;
}

@media (max-width:860px) {
    .hero-inner { grid-template-columns:1fr; gap:40px; }
    .hero-left .hero-btns { justify-content:center; }
}