Modèle:ColorScheme/styles.css

/* =============================================================================
   COLOR SCHEME - Système de variables compatibles Citizen Skin
   Compatible dark/light mode automatique
   ============================================================================= */

:root {
    /* =========================================================================
       RÉSEAUX SOCIAUX
       ========================================================================= */
    --color-bluesky: #0085ff;
    --color-bluesky-hover: #006dd1;
    
    --color-discord: #5865f2;
    --color-discord-hover: #4752c4;
    
    --color-twitter: #1da1f2;
    --color-twitter-hover: #1a8cd8;
    
    --color-youtube: #ff0000;
    --color-youtube-hover: #cc0000;
    
    --color-mastodon: #6364ff;
    --color-mastodon-hover: #4f50cc;
    
    --color-twitch: #9146ff;
    --color-twitch-hover: #7635cc;
    
    --color-reddit: #ff4500;
    --color-reddit-hover: #cc3700;
    
    --color-linkedin: #0077b5;
    --color-linkedin-hover: #005e8f;
    
    --color-instagram-start: #f09433;
    --color-instagram-mid1: #e6683c;
    --color-instagram-mid2: #dc2743;
    --color-instagram-mid3: #cc2366;
    --color-instagram-end: #bc1888;
    
    --color-threads: #000000;
    --color-threads-hover: #1a1a1a;
    
    --color-tiktok: #000000;
    --color-tiktok-hover: #1a1a1a;
    
    --color-facebook: #1877f2;
    --color-facebook-hover: #1464c4;
    
    --color-snapchat: #fffc00;
    --color-snapchat-hover: #e6e300;

    /* =========================================================================
       PLATEFORMES MINECRAFT/PLUGINS
       ========================================================================= */
    --color-paper: #1a8cff;
    --color-purpur: #a855f7;
    --color-spigot: #ed8106;
    --color-bukkit: #f7931e;
    --color-modrinth: #1bd96a;
    --color-curseforge: #f16436;
    --color-polymart: #2196f3;
    --color-hangar: #0089ff;
    
    /* Modloaders */
    --color-minecraft: #62b47a;
    --color-forge: #1e2c42;
    --color-fabric: #dbd3c8;
    --color-quilt: #8b5cf6;
    --color-neoforge: #ff6b35;

    /* =========================================================================
       HÉBERGEMENT CODE / DEV TOOLS
       ========================================================================= */
    --color-github: #24292e;
    --color-github-hover: #1a1e21;
    --color-github-releases: #238636;
    
    --color-gitlab: #fc6f23;
    --color-gitlab-hover: #e85e1c;
    
    --color-stackoverflow: #f48024;
    --color-jenkins: #d24939;
    --color-docker: #2496ed;
    --color-kubernetes: #326ce5;
    --color-codepen: #ffffff;
    --color-npm: #cb3837;
    --color-maven: #c71a36;
    --color-gradle: #02303a;

    /* =========================================================================
       FINANCEMENT / DONATIONS
       ========================================================================= */
    --color-patreon: #ff424d;
    --color-buymeacoffee: #ffdd00;
    --color-kofi: #ff5e5b;
    --color-liberapay: #f6c915;
    --color-opencollective: #7fadf2;
    --color-stripe: #635BFF;
    
    /* PayPal (gradient) */
    --color-paypal-from: #0070ba;
    --color-paypal-to: #1546a0;
    --color-paypal-hover-from: #005ea6;
    --color-paypal-hover-to: #003087;

    /* =========================================================================
       COULEURS SÉMANTIQUES (Bootstrap-like)
       ========================================================================= */
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-light: #f8f9fa;
    --color-dark: #343a40;

    /* =========================================================================
       COULEURS DE BASE (Modèle:Font)
       ========================================================================= */
    --color-rouge: #dc3545;
    --color-bleu: #0d6efd;
    --color-vert: #198754;
    --color-jaune: #ffc107;
    --color-orange: #fd7e14;
    --color-violet: #6f42c1;
    --color-rose: #d63384;
    --color-cyan: #0dcaf0;
    --color-blanc: #ffffff;
    --color-gris: #6c757d;
    --color-noir: #000000;
    
    /* Métalliques */
    --color-or: #ffd700;
    --color-or-light: #ffed4e;
    --color-or-dark: #b8860b;
    
    --color-argent: #c0c0c0;
    --color-argent-light: #f0f0f0;
    --color-argent-dark: #808080;
    
    --color-bronze: #cd7f32;
    --color-bronze-light: #e8a75c;
    --color-bronze-dark: #8b5a2b;
}

/* =============================================================================
   ADAPTATIONS DARK MODE (Citizen)
   ============================================================================= */

.skin-theme-clientpref-night {
    /* Ajustements pour dark mode si nécessaire */
    --color-light: #2a2a2a; /* Inversé pour dark mode */
    --color-dark: #e8e8e8; /* Inversé pour dark mode */
    
    /* Adoucir certaines couleurs trop vives en dark mode */
    --color-youtube: #ff3333;
    --color-snapchat: #f0e900;
}

/* Support prefers-color-scheme pour utilisateurs sans JS */
@media (prefers-color-scheme: dark) {
    :root:not(.skin-theme-clientpref-day) {
        --color-light: #2a2a2a;
        --color-dark: #e8e8e8;
        --color-youtube: #ff3333;
        --color-snapchat: #f0e900;
    }
}

/* =============================================================================
   COLOR SCHEME VIEWER - Interface de visualisation
   ============================================================================= */

.color-scheme-viewer {
    background: var(--color-surface-1, #fff);
    border: 1px solid var(--border-color-base, #ccc);
    border-radius: 8px;
    padding: 24px;
    margin: 24px 0;
}

.skin-theme-clientpref-night .color-scheme-viewer {
    background: var(--color-surface-1, #1a1a1a);
    border-color: var(--border-color-subtle, #3a3a3a);
}

.color-scheme-header {
    margin-bottom: 32px;
    text-align: center;
}

.color-scheme-header h2 {
    margin: 0 0 8px 0;
    color: var(--color-base, #000);
}

.skin-theme-clientpref-night .color-scheme-header h2 {
    color: var(--color-base, #fff);
}

.color-scheme-header p {
    margin: 0;
    color: var(--color-subtle, #666);
    font-size: 0.95rem;
}

.color-scheme-section {
    margin-bottom: 32px;
}

.color-scheme-section:last-child {
    margin-bottom: 0;
}

.color-scheme-section h3 {
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color-base, #e0e0e0);
    color: var(--color-base, #000);
}

.skin-theme-clientpref-night .color-scheme-section h3 {
    border-color: var(--border-color-subtle, #3a3a3a);
    color: var(--color-base, #fff);
}

.color-scheme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.color-swatch {
    background: var(--color-surface-2, #f5f5f5);
    border: 1px solid var(--border-color-base, #ddd);
    border-radius: 8px;
    padding: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.skin-theme-clientpref-night .color-swatch {
    background: var(--color-surface-2, #252525);
    border-color: var(--border-color-subtle, #3a3a3a);
}

.color-swatch:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.swatch-color {
    width: 100%;
    height: 60px;
    background: var(--demo-color);
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.swatch-info {
    text-align: center;
}

.swatch-info strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-base, #000);
    font-size: 0.9rem;
}

.skin-theme-clientpref-night .swatch-info strong {
    color: var(--color-base, #fff);
}

.swatch-info code {
    display: block;
    font-size: 0.75rem;
    color: var(--color-subtle, #666);
    background: var(--color-surface-3, #e0e0e0);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.skin-theme-clientpref-night .swatch-info code {
    color: var(--color-subtle, #aaa);
    background: var(--color-surface-3, #1a1a1a);
}

/* Swatch gradient (pour Instagram, PayPal) */
.color-swatch--gradient .swatch-color {
    background: var(--demo-gradient) !important;
}

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

@media (max-width: 768px) {
    .color-scheme-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .color-scheme-viewer {
        padding: 16px;
    }
    
    .swatch-color {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .color-scheme-grid {
        grid-template-columns: 1fr;
    }
}