/**
 * CMS Source - CSS Variables
 * Design System Foundation
 * @version 1.0.0
 */

:root {
    /* =========================================================================
       COULEURS PRIMAIRES (Palette Site Nature)
       ========================================================================= */
    --primary: #A8BBA3;
    --primary-light: #c4d4c0;
    --primary-dark: #5e7a57;
    --primary-darker: #3d5236;
    --primary-rgb: 168, 187, 163;

    --secondary: #B87C4C;
    --secondary-light: #d4a07a;
    --secondary-dark: #8b5a2e;
    --secondary-rgb: 184, 124, 76;

    /* Stats (chiffres mis en avant : compteurs, montants, etc.) */
    --stat-value-color: #A2B49D;
    --stat-value-shadow: #3d5a38 1px 0 10px;

    /* =========================================================================
       COULEURS SÉMANTIQUES
       ========================================================================= */
    --success: #10b981;
    --success-light: #34d399;
    --success-dark: #059669;
    
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-dark: #d97706;
    
    --danger: #ef4444;
    --danger-light: #f87171;
    --danger-dark: #dc2626;
    
    --info: #3b82f6;
    --info-light: #60a5fa;
    --info-dark: #2563eb;
    
    /* =========================================================================
       COULEURS NEUTRES
       ========================================================================= */
    --white: #ffffff;
    --black: #000000;
    
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* RGB triplets (pour rgba() dynamiques) */
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --gray-100-rgb: 243, 244, 246;
    --gray-500-rgb: 107, 114, 128;
    --gray-900-rgb: 17, 24, 39;
    --success-rgb: 16, 185, 129;
    --warning-rgb: 245, 158, 11;
    --danger-rgb: 239, 68, 68;
    --info-rgb: 59, 130, 246;
    
    /* =========================================================================
       COULEURS DE FOND
       ========================================================================= */
    --bg-primary: var(--white);
    --bg-secondary: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    --bg-dark: var(--gray-900);

    /* =========================================================================
       SURFACES (Système d'élévation)
       Chaque niveau représente une "hauteur" perçue. Utilisé pour les cards,
       modals, popovers et dropdowns. Ces tokens garantissent une hiérarchie
       visuelle cohérente en light ET dark mode.
       ========================================================================= */
    --surface-0: var(--gray-50);           /* page background */
    --surface-1: var(--white);             /* cards par défaut */
    --surface-2: var(--white);             /* cards élevées / dropdowns */
    --surface-3: var(--white);             /* modals / popovers */
    --surface-overlay: rgba(var(--black-rgb), 0.5);  /* backdrops */
    --surface-sunken: var(--gray-100);     /* inputs, code blocks */

    /* =========================================================================
       ÉTATS INTERACTIFS (overlays uniformes pour hover/active/disabled)
       ========================================================================= */
    --state-hover-overlay: rgba(var(--black-rgb), 0.04);
    --state-active-overlay: rgba(var(--black-rgb), 0.08);
    --state-selected-overlay: rgba(var(--primary-rgb), 0.1);
    --state-disabled-opacity: 0.5;
    --state-disabled-bg: var(--gray-100);
    
    /* =========================================================================
       COULEURS DE TEXTE
       ========================================================================= */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-muted: var(--gray-500);
    --text-light: var(--gray-400);
    --text-inverse: var(--white);
    
    /* =========================================================================
       BORDURES
       ========================================================================= */
    --border-color: var(--gray-200);
    --border-light: var(--gray-100);
    --border-dark: var(--gray-300);

    /* =========================================================================
       FOCUS RING (Accessibilité WCAG 2.2 — contraste minimum 3:1)
       ========================================================================= */
    --focus-ring-color: var(--primary-dark);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    --focus-ring-inset: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    
    /* =========================================================================
       TYPOGRAPHIE
       ========================================================================= */
    --font-family-heading: 'Bryndan Write', 'Georgia', cursive;
    --font-family-subtitle: 'Quicksand', 'Segoe UI', sans-serif;
    --font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.75rem;   /* 60px */

    /* Échelle fluide pour titres (clamp: min, fluide, max) */
    --font-size-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);  /* hero / h1 */
    --font-size-h1: clamp(2rem, 3.5vw + 1rem, 3rem);         /* titres de page */
    --font-size-h2: clamp(1.625rem, 2.5vw + 0.75rem, 2.25rem);
    --font-size-h3: clamp(1.375rem, 1.75vw + 0.75rem, 1.75rem);
    --font-size-h4: clamp(1.125rem, 1vw + 0.75rem, 1.375rem);
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-heading: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* =========================================================================
       TRAITEMENT DES TITRES (Bryndan Write + Quicksand)
       Stratégie :
         - texte EN COULEURS (jamais noir) : échelle de verts normalisée par
           niveau H1→H6 si aucun header de section ne définit --heading-color
         - TRAIT BLANC épais (~3px) autour via text-shadow multi-couches
           (cf. reset.css — -webkit-text-stroke fusionne les traits d'une
           police manuscrite, inutilisable sur Bryndan Write)
         - drop-shadow pour le relief (dégradé vers le fond)

       Tokens overrideables :
         - --heading-color : couleur unique forcée pour TOUS les h de la
           section (ex: .community-header définit --heading-color: #FFF2C5)
         - --heading-color-hN : couleur spécifique par niveau (fallback)
         - --heading-stroke-color : couleur du trait (blanc par défaut)
         - --heading-stroke : alias historique (rgba) conservé pour compat
         - --heading-drop-shadow : ombre de relief
       ========================================================================= */
    /* Échelle de verts normalisée — TOUTES clairement vertes (jamais
       perçues comme noir). H1 le plus foncé, H6 le plus clair. Teintes
       tirées de la gamme sage primary (#A8BBA3). Combiné au gros halo
       blanc, chaque niveau reste lisible sur fond clair. */
    --heading-color-h1: #3d5236;  /* primary-darker — sage profond */
    --heading-color-h2: #4e6645;  /* entre primary-darker et primary-dark */
    --heading-color-h3: #5e7a57;  /* primary-dark */
    --heading-color-h4: #6f8d66;  /* plus clair */
    --heading-color-h5: #8ba37f;  /* vert doux */
    --heading-color-h6: #a8bba3;  /* primary sage */

    --heading-stroke-color: #ffffff;
    --heading-stroke: rgba(255, 255, 255, 0.98); /* alias legacy */
    --heading-drop-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);

    /* =========================================================================
       ESPACEMENTS
       ========================================================================= */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    --spacing-24: 6rem;     /* 96px */
    
    /* =========================================================================
       BORDURES RADIUS
       ========================================================================= */
    --border-radius-none: 0;
    --border-radius-sm: 0.25rem;
    --border-radius: 0.5rem;
    --border-radius-md: 0.75rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    --border-radius-full: 9999px;
    
    /* =========================================================================
       OMBRES (Design épuré, léger et moderne)
       ========================================================================= */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
    
    /* =========================================================================
       TRANSITIONS & EASING
       Durées conformes à la recommandation UX (150-300ms pour micro-interactions)
       ========================================================================= */
    --ease-linear: linear;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);           /* entrées fluides */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);               /* sorties rapides */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);         /* standard Material */
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --duration-instant: 75ms;
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;

    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition: var(--duration-base) var(--ease-out);
    --transition-slow: var(--duration-slow) var(--ease-out);
    --transition-bounce: var(--duration-slow) var(--ease-bounce);
    
    /* =========================================================================
       Z-INDEX
       ========================================================================= */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-toast: 700;
    
    /* =========================================================================
       CONTENEURS
       ========================================================================= */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* =========================================================================
       HEADER/FOOTER
       ========================================================================= */
    --header-height: 100px;
    --header-brandbar-height: 56px;
    --header-navbar-height: 44px;
    --footer-min-height: 300px;
    --sidebar-width: 260px;
    
    /* =========================================================================
       GRADIENTS
       ========================================================================= */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, #94A48D 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-info: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
    --gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-dark: linear-gradient(135deg, #232526 0%, #414345 100%);

    /* =========================================================================
       COULEURS PERMATHÈQUE (Palette Nature)
       ========================================================================= */
    --color-sage: #A8BBA3;
    --color-sage-light: #c4d4c0;
    --color-sage-dark: #5e7a57;
    --color-terracotta: #B87C4C;
    --color-terracotta-dark: #8b5a2e;
    --color-sand: #C4A484;
    --color-cream: #F7F1DE;

    /* RGB triplets pour rgba() dynamiques */
    --color-sage-rgb: 168, 187, 163;
    --color-terracotta-rgb: 184, 124, 76;
    --color-sand-rgb: 196, 164, 132;
    --color-cream-rgb: 247, 241, 222;
}

/* =========================================================================
   DARK MODE — surcharges complètes
   On définit les tokens dans un bloc partagé (`--dark-tokens`) puis on l'applique
   via `prefers-color-scheme: dark` ET via `[data-theme="dark"]` (bascule manuelle).
   Cible aussi bien les surfaces, bordures, ombres, texte, focus, états, que les
   couleurs de marque recalibrées pour garder le contraste WCAG AA.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* Backgrounds & surfaces (hiérarchie d'élévation) */
        --bg-primary: var(--gray-900);
        --bg-secondary: var(--gray-800);
        --bg-tertiary: var(--gray-700);
        --surface-0: var(--gray-950);
        --surface-1: var(--gray-900);
        --surface-2: var(--gray-800);
        --surface-3: var(--gray-700);
        --surface-sunken: var(--gray-950);
        --surface-overlay: rgba(var(--black-rgb), 0.7);

        /* Texte */
        --text-primary: var(--gray-100);
        --text-secondary: var(--gray-300);
        --text-muted: var(--gray-400);
        --text-light: var(--gray-500);

        /* Bordures */
        --border-color: var(--gray-700);
        --border-light: var(--gray-800);
        --border-dark: var(--gray-600);

        /* Marque recalibrée (plus lumineuse sur fond sombre) */
        --primary: var(--primary-light);
        --primary-dark: var(--primary);
        --secondary: var(--secondary-light);

        /* États interactifs (overlays clairs sur fond sombre) */
        --state-hover-overlay: rgba(var(--white-rgb), 0.06);
        --state-active-overlay: rgba(var(--white-rgb), 0.12);
        --state-disabled-bg: var(--gray-800);

        /* Focus ring plus lumineux pour respecter le contraste 3:1 sur fond sombre */
        --focus-ring-color: var(--primary-light);

        /* Ombres plus prononcées (ombre noire sur sombre = presque invisible) */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5);
        --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.4), 0 2px 12px rgba(0, 0, 0, 0.5);
        --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
        --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.4);

        /* Dark : on garde le trait blanc (contraste fort sur fond sombre),
           mais on éclaircit la gamme de verts pour qu'elle reste lisible
           au sein du halo blanc et du fond noir. */
        --heading-color-h1: #5e7a57;
        --heading-color-h2: #759068;
        --heading-color-h3: #8aa47e;
        --heading-color-h4: #9cb58f;
        --heading-color-h5: #b0c5a4;
        --heading-color-h6: #c4d4c0;
        --heading-stroke-color: #ffffff;
        --heading-stroke: rgba(255, 255, 255, 0.95);
        --heading-drop-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
    }
}

/* Dark mode manuel — surcharge explicite via [data-theme="dark"] */
[data-theme="dark"] {
    color-scheme: dark;

    --bg-primary: var(--gray-900);
    --bg-secondary: var(--gray-800);
    --bg-tertiary: var(--gray-700);
    --surface-0: var(--gray-950);
    --surface-1: var(--gray-900);
    --surface-2: var(--gray-800);
    --surface-3: var(--gray-700);
    --surface-sunken: var(--gray-950);
    --surface-overlay: rgba(var(--black-rgb), 0.7);

    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-300);
    --text-muted: var(--gray-400);
    --text-light: var(--gray-500);

    --border-color: var(--gray-700);
    --border-light: var(--gray-800);
    --border-dark: var(--gray-600);

    --primary: var(--primary-light);
    --primary-dark: #A8BBA3;
    --secondary: var(--secondary-light);

    --state-hover-overlay: rgba(var(--white-rgb), 0.06);
    --state-active-overlay: rgba(var(--white-rgb), 0.12);
    --state-disabled-bg: var(--gray-800);

    --focus-ring-color: var(--primary-light);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.4), 0 2px 12px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.4);

    /* Dark manuel : même logique que le media query — trait blanc conservé,
       verts éclaircis pour rester lisibles dans le halo. */
    --heading-color-h1: #5e7a57;
    --heading-color-h2: #759068;
    --heading-color-h3: #8aa47e;
    --heading-color-h4: #9cb58f;
    --heading-color-h5: #b0c5a4;
    --heading-color-h6: #c4d4c0;
    --heading-stroke-color: #ffffff;
    --heading-stroke: rgba(255, 255, 255, 0.95);
    --heading-drop-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

/* =========================================================================
   DARK MODE — Overrides composants spécifiques aux pages
   Headers : overlay foncé semi-transparent sur les gradients colorés
   Cards / sections blanches : surface sombre
   ========================================================================= */
[data-theme="dark"] .page-header,
[data-theme="dark"] .events-header,
[data-theme="dark"] .discussions-header,
[data-theme="dark"] .shop-header,
[data-theme="dark"] .posts-header-banner,
[data-theme="dark"] .marche-header,
[data-theme="dark"] .publier-header,
[data-theme="dark"] .members-header,
[data-theme="dark"] .resources-header,
[data-theme="dark"] .wiki-header,
[data-theme="dark"] .crowdfunding-header,
[data-theme="dark"] .community-header,
[data-theme="dark"] .feed-header {
    position: relative;
}

[data-theme="dark"] .page-header::after,
[data-theme="dark"] .events-header::after,
[data-theme="dark"] .discussions-header::after,
[data-theme="dark"] .shop-header::after,
[data-theme="dark"] .posts-header-banner::after,
[data-theme="dark"] .marche-header::after,
[data-theme="dark"] .publier-header::after,
[data-theme="dark"] .members-header::after,
[data-theme="dark"] .resources-header::after,
[data-theme="dark"] .wiki-header::after,
[data-theme="dark"] .crowdfunding-header::after,
[data-theme="dark"] .community-header::after,
[data-theme="dark"] .feed-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] .page-header > *,
[data-theme="dark"] .events-header > *,
[data-theme="dark"] .discussions-header > *,
[data-theme="dark"] .shop-header > *,
[data-theme="dark"] .posts-header-banner > *,
[data-theme="dark"] .marche-header > *,
[data-theme="dark"] .publier-header > *,
[data-theme="dark"] .members-header > *,
[data-theme="dark"] .resources-header > *,
[data-theme="dark"] .wiki-header > *,
[data-theme="dark"] .crowdfunding-header > *,
[data-theme="dark"] .community-header > *,
[data-theme="dark"] .feed-header > * {
    position: relative;
    z-index: 1;
}

/* Cards et sections blanches → surface sombre */
[data-theme="dark"] .post-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .feed-card,
[data-theme="dark"] .event-card-grid,
[data-theme="dark"] .wiki-card,
[data-theme="dark"] .campaign-card,
[data-theme="dark"] .sidebar-section,
[data-theme="dark"] .sidebar-featured-post,
[data-theme="dark"] .sidebar-featured-product {
    background: var(--surface-1, #111827);
    color: var(--text-primary, #f3f4f6);
    border-color: var(--border-color, #374151);
}

/* Stats cards (crowdfunding, dashboard) */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .crowdfunding-stat {
    background: var(--surface-2, #1f2937);
    color: var(--text-primary, #f3f4f6);
}

/* Form sections */
[data-theme="dark"] .form-section,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select {
    background: var(--surface-1, #111827);
    color: var(--text-primary, #f3f4f6);
    border-color: var(--border-color, #374151);
}

/* Sidebar sections sur fond sombre */
[data-theme="dark"] .sidebar-right .sidebar-section {
    background: var(--surface-1, #111827);
    border-color: var(--border-color, #374151);
}

/* Marché : fond crème → sombre */
[data-theme="dark"] .page-marche .marche-content,
[data-theme="dark"] .page-marche {
    background: #1f2937;
}

/* Posts sidebar / catégories */
[data-theme="dark"] .posts-sidebar,
[data-theme="dark"] .category-list a {
    color: var(--text-secondary, #d1d5db);
}

[data-theme="dark"] .category-list a:hover,
[data-theme="dark"] .category-list a.active {
    color: var(--primary-light, #c4d4c0);
}

/* Crowdfunding sections blanches */
[data-theme="dark"] .crowdfunding-section,
[data-theme="dark"] .crowdfunding-how-it-works,
[data-theme="dark"] .crowdfunding-cta-section {
    background: var(--surface-1, #111827);
    color: var(--text-primary, #f3f4f6);
}

/* Financement : stat-card + empty state */
[data-theme="dark"] .financement-empty {
    background: var(--surface-1, #111827);
    color: var(--text-primary, #f3f4f6);
}

/* Texte dans les cards qui reste noir */
[data-theme="dark"] .post-card .post-content h3 a,
[data-theme="dark"] .product-card .product-name,
[data-theme="dark"] .product-card .product-info,
[data-theme="dark"] .feed-card__title a,
[data-theme="dark"] .wiki-card-title a,
[data-theme="dark"] .event-card-grid h3 a,
[data-theme="dark"] .campaign-card h3 a,
[data-theme="dark"] .campaign-content h3 {
    color: var(--text-primary, #f3f4f6);
}

/* Badges et texte muted */
[data-theme="dark"] .post-category,
[data-theme="dark"] .product-category,
[data-theme="dark"] .wiki-card-badge {
    background: var(--surface-2, #1f2937);
    color: var(--text-secondary, #d1d5db);
}

/* Light explicite — pour permettre au dark `prefers-color-scheme` d'être outrepassé */
[data-theme="light"] {
    color-scheme: light;
}