/* ============================================================
   DistrictLife Theme v3 — LIGHT
   Police   : Roboto (sans-serif)
   Palette  : blanc #FFFFFF · gris clair #F5F6FA · or #E3BB6A
   Style    : light moderne, bords arrondis, splash blobs dorés
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --juste-blanc: #FFFFFF;
    /* Fonds */
    --dl-bg:            #F5F6FA;
    --dl-bg-2:          #ECEEF5;
    --dl-surface:       #FFFFFF;
    --dl-surface-2:     #F0F2F8;
    --dl-nav:           #1F252F;

    /* Gold / brand */
    --dl-gold:          #E3BB6A;
    --dl-gold-light:    #F0CE8A;
    --dl-gold-dark:     #C49A44;
    --dl-gold-glow:     rgba(227, 187, 106, 0.35);
    --dl-gold-dim:      rgba(227, 187, 106, 0.18);
    --dl-gold-subtle:   rgba(227, 187, 106, 0.09);

    /* Texte */
    --dl-text:          #1A1E2E;
    --dl-text-soft:     #3D4461;
    --dl-text-muted:    #7A83A0;

    /* Bordures */
    --dl-border:        rgba(0, 0, 0, 0.08);
    --dl-border-gold:   rgba(227, 187, 106, 0.45);

    /* Status */
    --dl-online:        #16A34A;
    --dl-offline:       #DC2626;
    --dl-discord:       #5865F2;

    /* Border radius */
    --r-xs:   8px;
    --r-sm:   12px;
    --r:      20px;
    --r-lg:   28px;
    --r-xl:   36px;
    --r-pill: 100px;

    /* Bootstrap overrides */
    --bs-border-radius:    var(--r-sm);
    --bs-border-radius-sm: var(--r-xs);
    --bs-border-radius-lg: var(--r);
    --bs-primary:          #E3BB6A;
    --bs-primary-rgb:      227, 187, 106;
    --bs-link-color:       #C49A44;
    --bs-link-hover-color: #A07830;
    --bs-body-bg:          #F5F6FA;
    --bs-body-color:       #1A1E2E;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 400;
    background-color: var(--dl-bg);
    color: var(--dl-text);
}

#app { flex-grow: 1; }

a { text-decoration: none; color: var(--dl-gold-dark); }
a:hover { color: var(--dl-gold); }

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: var(--dl-text);
}
h1, .h1 { text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }

.content { margin-top: 2.5rem; margin-bottom: 5rem; }

/* ── Blobs / Splash ─────────────────────────────────────────── */
/* ── Paint Splashes (SVG) ───────────────────────────────────── */
.dl-splash {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}
.dl-splash svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 18px rgba(196,154,68,0.18));
}

/* Grand splash or — coin haut-droit */
.dl-splash-1 {
    width: 520px;
    height: 520px;
    top: -80px;
    right: -100px;
    animation: splash-float 14s ease-in-out infinite alternate;
}

/* Splash secondaire — coin bas-gauche */
.dl-splash-2 {
    width: 340px;
    height: 400px;
    bottom: 80px;
    left: -60px;
    animation: splash-float 18s ease-in-out infinite alternate-reverse;
}

@keyframes splash-float {
    0%   { transform: translate(0, 0)    rotate(0deg)   scale(1); }
    40%  { transform: translate(8px, -12px) rotate(1.5deg) scale(1.02); }
    70%  { transform: translate(-6px, 8px)  rotate(-1deg)  scale(0.98); }
    100% { transform: translate(10px, 6px)  rotate(2deg)   scale(1.01); }
}

/* Blob features section (conservé en radial doux) */
.dl-blob-features {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 800px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
        rgba(227,187,106,0.10) 0%,
        transparent 65%);
    filter: blur(80px);
    border-radius: 50%;
}

/* Blob accent card serveur */
.dl-blob-card {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 200px;
    height: 180px;
    top: -40px;
    right: -40px;
    background: radial-gradient(ellipse,
        rgba(227,187,106,0.14) 0%,
        transparent 70%);
    filter: blur(30px);
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.dl-navbar {
    background-color: var(--dl-nav) !important;
    border-bottom: 1px solid var(--dl-border);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.09em;
    padding: 0.75rem 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 1px 12px rgba(0,0,0,0.06);
}

.dl-navbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, var(--dl-gold) 30%, var(--dl-gold) 70%, transparent 100%);
    opacity: 0.6;
}

.dl-navbar .navbar-nav .nav-link {
    color: rgba(255,255,255,0.75) !important;
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-sm);
    transition: color 0.2s, background 0.2s;
}
.dl-navbar .navbar-nav .nav-link:hover {
    color: var(--dl-gold) !important;
    background: rgba(255,255,255,0.06);
}
.dl-navbar .navbar-nav .nav-link.active {
    color: var(--dl-gold) !important;
    background: var(--dl-gold-dim);
}

.navbar-logo img { height: 64px; }

@media (min-width: 992px) {
    .navbar-brand {
        position: absolute;
        top: 6px; left: 50%;
        width: 160px;
        transform: translateX(-50%);
        z-index: 50;
        margin-right: 0;
    }
    .navbar-logo img { max-width: 100%; height: auto; }
    .dl-navbar .navbar-collapse .navbar-nav {
        width: calc((100% - 160px) / 2);
    }
}

/* Dropdown */
.dl-dropdown {
    background: var(--dl-surface) !important;
    border: 1px solid var(--dl-border) !important;
    border-radius: var(--r) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
    padding: 0.5rem !important;
}
.dl-dropdown .dropdown-item {
    color: var(--dl-text-soft) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.55rem 0.9rem;
    border-radius: var(--r-sm) !important;
    transition: background 0.15s, color 0.15s;
}
.dl-dropdown .dropdown-item:hover,
.dl-dropdown .dropdown-item.active {
    background: var(--dl-gold-dim) !important;
    color: var(--dl-gold-dark) !important;
}
.dropdown-divider { border-color: var(--dl-border) !important; margin: 0.4rem 0 !important; }

.navbar-toggler { border-color: var(--dl-border-gold) !important; border-radius: var(--r-sm) !important; }
.navbar-toggler:focus { box-shadow: none !important; }
.navbar-toggler-icon { filter: invert(1); }

/* ============================================================
   BARRE SECONDAIRE
   ============================================================ */
.dl-sub-navbar {
    background: var(--dl-nav);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Tous les boutons dans la zone droite du sub-navbar (theme-selector, notifications…) */
.dl-sub-navbar .btn,
.dl-sub-navbar button:not(.navbar-toggler) {
    background: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    color: var(--dl-nav) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.76rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.32rem 0.9rem !important;
    border-radius: var(--r-pill) !important;
    box-shadow: none !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.dl-sub-navbar .btn:hover,
.dl-sub-navbar button:not(.navbar-toggler):hover {
    background: var(--dl-gold) !important;
    border-color: var(--dl-gold) !important;
    color: #FFFFFF !important;
}
/* theme-selector + notifications forcés en blanc */
.dl-sub-white .btn,
.dl-sub-white button,
.dl-sub-white a {
    background: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    color: var(--dl-nav) !important;
    border-radius: var(--r-pill) !important;
    padding: 0.32rem 0.75rem !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.dl-sub-white .btn *,
.dl-sub-white button *,
.dl-sub-white a * {
    color: var(--dl-nav) !important;
}
.dl-sub-white .btn:hover,
.dl-sub-white button:hover,
.dl-sub-white a:hover {
    background: var(--dl-gold) !important;
    border-color: var(--dl-gold) !important;
    color: #FFFFFF !important;
}
.dl-sub-white .btn:hover *,
.dl-sub-white button:hover *,
.dl-sub-white a:hover * {
    color: #FFFFFF !important;
}

/* Exception : bouton Rejoindre reste doré */
.dl-sub-navbar .dl-btn-join {
    background: var(--dl-gold) !important;
    border-color: var(--dl-gold) !important;
    color: #FFFFFF !important;
}
.dl-sub-navbar .dl-btn-join:hover {
    background: var(--dl-gold-dark) !important;
    border-color: var(--dl-gold-dark) !important;
}

.dl-sub-icon { color: var(--dl-gold); }
.dl-sub-server-name { color: #FFFFFF; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.dl-sub-status { display: flex; align-items: center; gap: 7px; }

.dl-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dl-online { color: var(--dl-online); }
.dl-online .dl-status-dot { background: var(--dl-online); box-shadow: 0 0 8px rgba(22,163,74,0.4); animation: pulse 2s infinite; }
.dl-offline { color: var(--dl-offline); }
.dl-offline .dl-status-dot { background: var(--dl-offline); }

@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.45;} }

.dl-copy-address {
    background: var(--dl-surface);
    color: var(--dl-gold-dark);
    border: 1px solid var(--dl-border-gold);
    padding: 3px 12px;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.2s;
}
.dl-copy-address:hover { background: var(--dl-gold-subtle); }

.dl-btn-join {
    background: var(--dl-gold);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.32rem 1rem;
    border-radius: var(--r-pill);
    font-family: 'Roboto', sans-serif;
    transition: background 0.2s, transform 0.15s;
}
.dl-btn-join:hover { background: var(--dl-gold-dark); transform: translateY(-1px); }

.dl-btn-login, .dl-btn-register, .dl-btn-user {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    color: var(--dl-nav);
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.32rem 0.9rem;
    border-radius: var(--r-pill);
    font-family: 'Roboto', sans-serif;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dl-btn-login:hover, .dl-btn-register:hover, .dl-btn-user:hover {
    background: var(--dl-gold);
    border-color: var(--dl-gold);
    color: #FFFFFF;
}

/* ============================================================
   HERO
   ============================================================ */
.dl-hero {
    position: relative;
    min-height: 600px;
    background-color: #FFFFFF;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5rem 0 8rem;
}

/* Overlay léger sur fond photo */
/* .dl-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(160deg,
        rgba(255,255,255,0.82) 0%,
        rgba(245,246,250,0.92) 65%,
        rgba(236,238,245,1) 100%);
    z-index: 1;
} */

.dl-hero-content { position: relative; z-index: 3; }

/* ── Card dernière actualité dans le hero ── */
.dl-hero-news-card {
    display: block;
    background: rgba(31, 37, 47, 0.62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-xl);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.dl-hero-news-card:hover {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    border-color: var(--dl-border-gold);
}

.dl-hero-news-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dl-gold);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 1rem 1.4rem 0.6rem;
}

.dl-hero-news-thumb {
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.dl-hero-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.dl-hero-news-card:hover .dl-hero-news-thumb img { transform: scale(1.06); }

.dl-hero-news-body {
    padding: 1.2rem 1.4rem 1.4rem;
}

.dl-hero-news-title {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.dl-hero-news-excerpt {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.dl-hero-news-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--dl-gold);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: gap 0.2s;
}
.dl-hero-news-card:hover .dl-hero-news-cta { gap: 0.65rem; }

.dl-hero-panel {
    background: rgba(31, 37, 47, 0.62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 2.8rem 2.5rem;
}

/* Blason watermark */
.dl-crest-watermark {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    height: 370px;
    opacity: 0.06;
    color: var(--dl-gold-dark);
    z-index: 2;
    pointer-events: none;
}
.dl-crest-watermark svg { width: 100%; height: 100%; }

/* Badge joueurs */
.dl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dl-surface);
    border: 1px solid var(--dl-border-gold);
    color: var(--dl-gold-dark);
    padding: 6px 18px;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    box-shadow: 0 2px 12px rgba(227,187,106,0.15);
}
.dl-live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dl-online);
    box-shadow: 0 0 10px rgba(22,163,74,0.5);
    animation: pulse 2s infinite;
}

/* Titre hero */
.dl-hero-title { line-height: 0.9; margin-bottom: 1.2rem; user-select: none; }

/* Ligne 1 : "VIS TA VIE," — blanc, taille moyenne */
.dl-title-line1 {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    color: rgba(255,255,255,0.70);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    margin-bottom: 0.2em;
}

/* Ligne 2 : "FORGE TON DESTIN." — or, grande, impactante */
.dl-title-line2 {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 7vw, 6rem);
    color: var(--dl-gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 0.92;
    text-shadow:
        0 0 60px rgba(227,187,106,0.35),
        0 2px 12px rgba(0,0,0,0.4);
}

.dl-hero-subtitle {
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.74rem;
    font-weight: 400;
    margin-top: 1.2rem;
}

.dl-hero-offline-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.25);
    color: var(--dl-offline);
    padding: 0.7rem 1.8rem;
    border-radius: var(--r-pill);
    font-size: 0.85rem;
    font-weight: 600;
}

/* CTA buttons */
.dl-hero-ctas { display: flex; gap: 1rem; justify-content: flex-start; flex-wrap: wrap; }

.dl-btn-cta-primary {
    background: var(--dl-gold);
    border: 2px solid var(--dl-gold);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.85rem 2.4rem;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 6px 24px rgba(227,187,106,0.40);
    transition: all 0.25s ease;
}
.dl-btn-cta-primary:hover {
    background: var(--dl-gold-dark);
    border-color: var(--dl-gold-dark);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(196,154,68,0.45);
}

.dl-btn-cta-secondary {
    background: var(--dl-surface);
    border: 1px solid var(--dl-border);
    color: var(--dl-text-soft);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.85rem 2.4rem;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
}
.dl-btn-cta-secondary:hover {
    border-color: var(--dl-border-gold);
    color: var(--dl-gold-dark);
    transform: translateY(-3px);
    background: var(--dl-gold-subtle);
}

/* Skyline */
.dl-hero-skyline {
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    z-index: 2;
    line-height: 0;
}
.dl-hero-skyline svg { display: block; width: 100%; height: 110px; }

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.dl-features-section {
    background: var(--dl-surface);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--dl-border);
    border-bottom: 1px solid var(--dl-border);
}

.dl-feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--dl-bg);
    border: 1px solid var(--dl-border);
    border-radius: var(--r-lg);
    padding: 2rem 1.8rem 1.6rem;
    color: var(--dl-text);
    height: 100%;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    position: relative;
    overflow: hidden;
}

.dl-feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dl-gold-dark), var(--dl-gold), var(--dl-gold-light));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    opacity: 0;
    transition: opacity 0.25s;
}

.dl-feature-card:hover {
    color: var(--dl-text);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08), 0 0 0 1px var(--dl-border-gold);
    border-color: var(--dl-border-gold);
    background: var(--dl-surface);
}
.dl-feature-card:hover::before { opacity: 1; }

.dl-feature-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    flex-shrink: 0;
}
.dl-feature-icon-gold {
    background: var(--dl-gold-subtle);
    color: var(--dl-gold-dark);
    box-shadow: 0 0 20px rgba(227,187,106,0.15);
}
.dl-feature-icon-discord {
    background: rgba(88,101,242,0.10);
    color: var(--dl-discord);
}

.dl-feature-title {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dl-text);
    margin-bottom: 0.6rem;
}

.dl-feature-desc {
    font-size: 0.84rem;
    color: var(--dl-text-muted);
    line-height: 1.65;
    flex-grow: 1;
    margin: 0 0 1.2rem;
}

.dl-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--dl-gold-dark);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 16px;
    border-radius: var(--r-pill);
    background: var(--dl-gold-subtle);
    border: 1px solid var(--dl-border-gold);
    transition: background 0.2s, gap 0.2s;
}
.dl-feature-card:hover .dl-feature-cta { background: var(--dl-gold-dim); gap: 0.5rem; }

.dl-feature-cta-discord { color: var(--dl-discord); background: rgba(88,101,242,0.07); border-color: rgba(88,101,242,0.2); }
.dl-feature-card-discord:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.08), 0 0 0 1px rgba(88,101,242,0.3); border-color: rgba(88,101,242,0.3); }
.dl-feature-card-discord::before { background: linear-gradient(90deg, #4752C4, var(--dl-discord), #8891F2); }
.dl-feature-card-discord:hover .dl-feature-cta-discord { background: rgba(88,101,242,0.12); }

/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */
.dl-main-content { padding-top: 4rem; padding-bottom: 5rem; }

.dl-section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.dl-section-header h2 {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--dl-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.dl-section-header h2::before,
.dl-section-header h2::after {
    content: '';
    display: block;
    width: 40px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--dl-gold));
}
.dl-section-header h2::after { background: linear-gradient(90deg, var(--dl-gold), transparent); }

/* ============================================================
   CARDS SERVEURS
   ============================================================ */
.dl-server-card {
    background: var(--dl-surface);
    border: 1px solid var(--dl-border);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.dl-server-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.09), 0 0 0 1px var(--dl-border-gold);
    border-color: var(--dl-border-gold);
}

.dl-server-card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.dl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dl-dot-online  { background: var(--dl-online);  box-shadow: 0 0 10px rgba(22,163,74,0.4);  animation: pulse 2s infinite; }
.dl-dot-offline { background: var(--dl-offline); }

.dl-server-name {
    font-size: 0.98rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dl-gold-dark);
    margin: 0;
    position: relative;
    z-index: 1;
}

.dl-progress {
    height: 6px;
    background: var(--dl-bg);
    border-radius: var(--r-pill);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.dl-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--dl-gold-dark), var(--dl-gold), var(--dl-gold-light));
    border-radius: var(--r-pill);
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

.dl-player-count {
    color: var(--dl-text-muted);
    font-size: 0.82rem;
    margin: 0;
    position: relative;
    z-index: 1;
}
.dl-offline-label {
    color: var(--dl-offline);
    font-size: 0.82rem;
    margin: 0;
    position: relative;
    z-index: 1;
}

.dl-ip-badge {
    display: flex;
    align-items: center;
    background: var(--dl-bg);
    border: 1px solid var(--dl-border-gold);
    border-radius: var(--r-pill);
    padding: 0.5rem 1.2rem;
    color: var(--dl-gold-dark);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    z-index: 1;
}
.dl-ip-badge:hover { background: var(--dl-gold-subtle); }

/* Bouton primaire */
.dl-btn-primary, .btn-primary {
    background: var(--dl-gold) !important;
    border: 2px solid var(--dl-gold) !important;
    color: #fff !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.65rem 1.5rem !important;
    border-radius: var(--r-pill) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    box-shadow: 0 4px 16px rgba(227,187,106,0.30) !important;
    transition: all 0.2s !important;
}
.dl-btn-primary:hover, .btn-primary:hover {
    background: var(--dl-gold-dark) !important;
    border-color: var(--dl-gold-dark) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(196,154,68,0.40) !important;
}

/* ============================================================
   POSTS / ACTUALITÉS
   ============================================================ */
.dl-post-card {
    display: block;
    background: var(--dl-surface);
    border: 1px solid var(--dl-border);
    border-radius: var(--r-lg);
    color: var(--dl-text);
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.dl-post-card:hover {
    color: var(--dl-text);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.09), 0 0 0 1px var(--dl-border-gold);
    border-color: var(--dl-border-gold);
}

.dl-post-thumb { position: relative; overflow: hidden; }
.dl-post-thumb img {
    width: 100%; height: 210px;
    object-fit: cover; display: block;
    transition: transform 0.45s ease;
}
.dl-post-card:hover .dl-post-thumb img { transform: scale(1.06); }

.dl-post-tag {
    display: inline-block;
    position: absolute;
    top: 0.75rem; left: 0.75rem;
    background: var(--dl-gold);
    color: #fff;
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    border-radius: var(--r-pill);
}
.dl-post-tag-inline { position: static; }

.dl-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    gap: 0.75rem;
    border-top: 1px solid var(--dl-border);
}

.dl-post-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dl-text);
    margin: 0;
    flex-grow: 1;
    transition: color 0.2s;
    line-height: 1.4;
}
.dl-post-card:hover .dl-post-title { color: var(--dl-gold-dark); }

.dl-post-text {
    padding: 1.4rem 1.2rem;
    min-height: 210px;
    display: flex;
    flex-direction: column;
}

.dl-post-excerpt {
    color: var(--dl-text-muted);
    font-size: 0.82rem;
    line-height: 1.7;
    flex-grow: 1;
    margin: 0.4rem 0 0.8rem;
}

.dl-post-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--dl-gold-dark);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: gap 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}
.dl-post-card:hover .dl-post-cta { gap: 0.65rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.dl-footer {
    background: var(--dl-nav) !important;
    border-top: none;
    position: relative;
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
}

.dl-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%, var(--dl-gold) 25%, var(--dl-gold-light) 50%, var(--dl-gold) 75%, transparent 100%);
    opacity: 0.8;
}

/* Blob déco footer */
.dl-footer::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 500px; height: 400px;
    background: radial-gradient(ellipse, rgba(227,187,106,0.06) 0%, transparent 65%);
    filter: blur(60px);
    pointer-events: none;
    border-radius: 50%;
}

.dl-footer-brand img { max-height: 60px; }

.dl-footer-desc {
    color: rgba(255,255,255,0.45);
    font-size: 0.84rem;
    line-height: 1.8;
    margin-top: 0.75rem;
    max-width: 300px;
}

.dl-footer-title {
    color: var(--dl-gold);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.68rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dl-footer-title-bar {
    display: inline-block;
    width: 18px; height: 2px;
    background: linear-gradient(90deg, var(--dl-gold), var(--dl-gold-light));
    border-radius: 2px;
    flex-shrink: 0;
}

.dl-footer-links { list-style: none; padding: 0; margin: 0; }
.dl-footer-links li { margin-bottom: 0.55rem; }
.dl-footer-links a {
    color: rgba(255,255,255,0.50);
    font-size: 0.83rem;
    transition: color 0.2s, padding-left 0.2s;
    display: inline-flex;
    align-items: center;
}
.dl-footer-links a:hover { color: var(--dl-gold); padding-left: 5px; }
.dl-chevron { color: var(--dl-gold-dark); font-size: 0.6rem; margin-right: 0.4rem; flex-shrink: 0; }
.dl-footer-text { color: rgba(255,255,255,0.50); font-size: 0.83rem; display: inline-flex; align-items: center; }

/* Statut en pied de liste Serveur */
.dl-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.40);
    margin-top: 0.25rem;
}
.dl-footer-online { color: var(--dl-online); }
.dl-footer-offline { color: var(--dl-offline); }
.dl-footer-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}
.dl-footer-status.dl-footer-online .dl-footer-dot { box-shadow: 0 0 8px var(--dl-online); animation: pulse 2s infinite; }

/* Social links */
.dl-social-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dl-social-links a {
    color: rgba(255,255,255,0.50);
    width: 40px; height: 40px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: color 0.2s, border-color 0.2s, transform 0.2s, background 0.2s;
}
.dl-social-links a:hover {
    color: var(--dl-gold);
    border-color: var(--dl-border-gold);
    background: var(--dl-gold-subtle);
    transform: translateY(-3px);
}

/* Bas de footer */
.dl-footer-divider { height: 1px; background: rgba(255,255,255,0.07); }
.dl-footer-copy { color: rgba(255,255,255,0.30); font-size: 0.74rem; }

/* Badge statut bas de footer */
.dl-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.45);
    padding: 4px 14px;
    border-radius: var(--r-pill);
    font-size: 0.74rem;
    font-weight: 600;
}
.dl-footer-badge .dl-footer-dot.online  { background: var(--dl-online);  box-shadow: 0 0 8px var(--dl-online);  animation: pulse 2s infinite; }
.dl-footer-badge .dl-footer-dot.offline { background: var(--dl-offline); }

/* ============================================================
   BOOTSTRAP OVERRIDES
   ============================================================ */

/* Cards */
.card {
    background: var(--dl-surface) !important;
    border: 1px solid var(--dl-border) !important;
    border-radius: var(--r) !important;
    color: var(--dl-text) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05) !important;
}
.card-header, .card-footer {
    background: var(--dl-bg) !important;
    border-color: var(--dl-border) !important;
    color: var(--dl-text) !important;
}

/* Forms */
.form-control, .form-select {
    background: var(--dl-surface) !important;
    border: 1px solid var(--dl-border) !important;
    color: var(--dl-text) !important;
    border-radius: var(--r-sm) !important;
    padding: 0.65rem 1rem !important;
    font-family: 'Roboto', sans-serif !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--dl-border-gold) !important;
    box-shadow: 0 0 0 3px var(--dl-gold-subtle) !important;
    background: var(--dl-surface) !important;
    color: var(--dl-text) !important;
}
.form-control::placeholder { color: var(--dl-text-muted) !important; }
.form-label { color: var(--dl-text-soft); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.input-group-text { background: var(--dl-bg) !important; border-color: var(--dl-border) !important; color: var(--dl-text-muted) !important; border-radius: var(--r-sm) !important; }

/* Buttons */
.btn { border-radius: var(--r-pill) !important; font-family: 'Roboto', sans-serif !important; font-weight: 700 !important; }
.btn-outline-primary { border-color: var(--dl-gold) !important; color: var(--dl-gold-dark) !important; }
.btn-outline-primary:hover { background: var(--dl-gold) !important; color: #fff !important; }
.btn-secondary { background: var(--dl-bg) !important; border-color: var(--dl-border) !important; color: var(--dl-text) !important; }
.btn-danger { border-radius: var(--r-pill) !important; }

/* Badges */
.badge { border-radius: var(--r-pill) !important; font-family: 'Roboto', sans-serif !important; font-weight: 700 !important; }
.bg-primary { background: var(--dl-gold) !important; color: #fff !important; }
.text-primary { color: var(--dl-gold-dark) !important; }
.bg-success { background: #DCFCE7 !important; color: #15803D !important; }
.bg-danger  { background: #FEE2E2 !important; color: #B91C1C !important; }

/* Alerts */
.alert {
    border: 1px solid;
    border-radius: var(--r) !important;
    font-family: 'Roboto', sans-serif !important;
    padding: 1rem 1.25rem !important;
}
.alert-success { background: #F0FDF4 !important; border-color: #BBF7D0 !important; color: #15803D !important; }
.alert-danger  { background: #FFF1F2 !important; border-color: #FECDD3 !important; color: #B91C1C !important; }
.alert-warning { background: var(--dl-gold-subtle) !important; border-color: var(--dl-border-gold) !important; color: #92400E !important; }
.alert-info    { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1D4ED8 !important; }

/* Table */
.table {
    --bs-table-bg: var(--dl-surface);
    --bs-table-color: var(--dl-text);
    --bs-table-border-color: var(--dl-border);
    --bs-table-striped-bg: var(--dl-bg);
}
.table > :not(caption) > * > * { color: var(--dl-text) !important; }

/* Pagination */
.page-link {
    background: var(--dl-surface) !important;
    border-color: var(--dl-border) !important;
    color: var(--dl-text-soft) !important;
    border-radius: var(--r-sm) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
}
.page-link:hover { background: var(--dl-gold-subtle) !important; color: var(--dl-gold-dark) !important; border-color: var(--dl-border-gold) !important; }
.page-item.active .page-link { background: var(--dl-gold) !important; border-color: var(--dl-gold) !important; color: #fff !important; }
.page-item.disabled .page-link { background: var(--dl-bg) !important; color: var(--dl-text-muted) !important; }

/* Breadcrumb */
.breadcrumb-item { color: var(--dl-text-muted); font-size: 0.82rem; }
.breadcrumb-item a { color: var(--dl-gold-dark); }
.breadcrumb-item.active { color: var(--dl-text-soft); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--dl-text-muted); }

/* Scrollbar */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--dl-bg); }
::-webkit-scrollbar-thumb { background: var(--dl-bg-2); border-radius: var(--r-pill); border: 1px solid var(--dl-border); }
::-webkit-scrollbar-thumb:hover { background: var(--dl-gold-dim); }

/* Utilitaires */
.border-primary { border-color: var(--dl-gold) !important; }
.text-muted { color: var(--dl-text-muted) !important; }
.bg-light { background: var(--dl-bg) !important; }
.bg-white { background: #FFFFFF !important; }