/* ==========================================================
   CAForum — Mode sombre
   Ajout indépendant : ne modifie pas la disposition existante.
   ========================================================== */

:root {
    --cf-theme-bg: #f4f6f8;
    --cf-theme-surface: #ffffff;
    --cf-theme-surface-2: #eef2f6;
    --cf-theme-text: #172033;
    --cf-theme-muted: #607086;
    --cf-theme-border: rgba(23, 32, 51, .12);
}

html[data-theme="dark"] {
    --cf-theme-bg: #333;  /* #0d131c; */
    --cf-hero-bg: #333;;
    --cf-hero-border: #222;;
    --cf-theme-surface: #151e2a;
    --cf-theme-surface-2: #1b2634;
    --cf-theme-text: #edf2f7;
    --cf-theme-muted: #aab7c6;
    --cf-theme-border: rgba(255,255,255,.12);
}

html[data-theme="dark"] body {
    background: var(--cf-theme-bg);
    color-color: var(--cf-theme-text);
}

html[data-theme="dark"] .cf-hero {
    background: var(--cf-hero-bg);
    border: var(--cf-hero-border);
}

html[data-theme="dark"] .cf-site {
    background: var(--cf-theme-bg);
}

html[data-theme="dark"] .cf-header,
html[data-theme="dark"] .cf-nav {
    background: var(--cf-theme-surface);
    color: var(--cf-theme-text);
    border: none;
}

html[data-theme="dark"] .cf-nav a,
html[data-theme="dark"] .cf-brand strong {
    color: var(--cf-theme-text);
}

html[data-theme="dark"] .cf-brand small {
    color: var(--cf-theme-muted);
}

html[data-theme="dark"] .cf-section:not(.cf-resources),
html[data-theme="dark"] .cf-service-card {
    color: var(--cf-theme-text);
}

html[data-theme="dark"] .cf-service-card {
    background: var(--cf-theme-surface);
    border-color: var(--cf-theme-border);
}

html[data-theme="dark"] .cf-service-card p,
html[data-theme="dark"] .cf-section-heading > p {
    color: var(--cf-theme-muted);
}

html[data-theme="dark"] .cf-footer {
    background: #0a0f16;
}

html[data-theme="dark"] .cf-footer a,
html[data-theme="dark"] .cf-footer p,
html[data-theme="dark"] .cf-footer span {
    color: var(--cf-theme-muted);
}

.cf-button-secondary { background: none; color: #fff}

/* Bouton */
.cf-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid rgba(23,32,51,.12);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

html[data-theme="dark"] .cf-theme-toggle {
    border-color: rgba(255,255,255,.14);
    color: #fff;
}