/**
 * ========================================
 * DARK-MODE.CSS - Variables CSS pour mode clair/sombre
 * PlaneteAfrique - Blog System
 * Fichier générique réutilisable par tous les templates
 * ========================================
 */

/* ========================================
   VARIABLES CSS - MODE CLAIR (défaut)
   ======================================== */

:root {
    /* --- COULEURS PRINCIPALES --- */
    --color-primary: #b67127;           /* Doré/Orange principal */
    --color-primary-light: #dbb15d;     /* Doré clair */
    --color-primary-dark: #84481f;      /* Doré foncé */
    
    --color-secondary: #134f3b;         /* Vert foncé */
    --color-secondary-light: #1a6b4f;   /* Vert moyen */
    --color-secondary-dark: #0a2f1c;    /* Vert très foncé */
    
    --color-accent: #d0781a;            /* Orange accent */
    --color-accent-hover: #b06015;      /* Orange foncé au survol */
    
    /* --- BACKGROUNDS --- */
    --bg-body: #ffffff;                 /* Fond général du body */
    --bg-header: #dbb15d;               /* Fond header */
    --bg-header-gradient-start: #b67127;
    --bg-header-gradient-end: #611e01;
    --bg-menu: #134f3b;                 /* Fond menu navigation */
    --bg-main: #fef8ec;                 /* Fond zone principale */
    --bg-footer: #000000;               /* Fond footer */
    
    --bg-card: #fef8ec;                 /* Fond des cartes */
    --bg-card-header: #0a2f1c;          /* Fond titre carte */
    --bg-card-hover: #fff5e6;           /* Fond carte au survol */
    
    --bg-form: #ffffff;                 /* Fond formulaires */
    --bg-input: #ffffff;                /* Fond champs input */
    --bg-button: #28a745;               /* Fond boutons */
    --bg-button-hover: #218838;         /* Fond boutons survol */
    --bg-button-primary: #17260d;       /* Bouton primaire */
    --bg-button-primary-hover: #314720; /* Bouton primaire survol */
    
    --bg-newsletter: #f4cc7a;           /* Fond newsletter */
    --bg-search: #ffffff;               /* Fond recherche */
    
    /* --- TEXTES --- */
    --text-primary: #333333;            /* Texte principal */
    --text-secondary: #613603;          /* Texte secondaire */
    --text-light: #666666;              /* Texte clair */
    --text-white: #ffffff;              /* Texte blanc */
    --text-footer: #cccccc;             /* Texte footer */
    --text-link: #613603;               /* Liens */
    --text-link-hover: #84481f;         /* Liens survol */
    
    /* --- BORDURES & LIGNES --- */
    --border-color: #fdf1d7;            /* Bordure générale */
    --border-card: #fdf1d7;             /* Bordure carte */
    --border-input: #ccc;               /* Bordure input */
    --border-gallery: #57ea62;          /* Bordure galerie */
    
    /* --- OMBRES --- */
    --shadow-card: 0px 0px 8px #3366994A;           /* Ombre carte */
    --shadow-button: 0 2px 5px rgba(0,0,0,0.1);     /* Ombre bouton */
    --shadow-light: 0 0 10px rgba(0, 0, 0, 0.1);    /* Ombre légère */
    
    /* --- SCROLL ARROW --- */
    --scroll-arrow-bg: #b67127;         /* Fond flèche scroll */
    --scroll-arrow-color: #ffffff;      /* Couleur icône flèche */
    
    /* --- TRANSITIONS --- */
    --transition-speed: 0.3s;           /* Vitesse transitions */
}

/* ========================================
   VARIABLES CSS - MODE SOMBRE
   ======================================== */

body.dark-mode {
    /* --- COULEURS PRINCIPALES --- */
    --color-primary: #d4a574;           /* Doré plus clair pour contraste */
    --color-primary-light: #e8c9a0;     /* Doré très clair */
    --color-primary-dark: #a67c52;      /* Doré moyen */
    
    --color-secondary: #1a6b4f;         /* Vert visible sur fond sombre */
    --color-secondary-light: #2d8f6b;   /* Vert clair */
    --color-secondary-dark: #0f4830;    /* Vert foncé */
    
    --color-accent: #e89850;            /* Orange plus clair */
    --color-accent-hover: #f0b070;      /* Orange clair au survol */
    
    /* --- BACKGROUNDS --- */
    --bg-body: #0d0d0d;                 /* Fond body très sombre */
    --bg-header: #2d2416;               /* Header gris-brun foncé */
    --bg-header-gradient-start: #3d3426;
    --bg-header-gradient-end: #1d1410;
    --bg-menu: #0a2f1c;                 /* Menu vert très sombre */
    --bg-main: #1a1a1a;                 /* Zone principale gris anthracite */
    --bg-footer: #0d0d0d;               /* Footer noir profond */
    
    --bg-card: #2d2d2d;                 /* Carte gris foncé */
    --bg-card-header: #1a3d2e;          /* Titre carte vert foncé */
    --bg-card-hover: #353535;           /* Carte survol gris moyen */
    
    --bg-form: #2d2d2d;                 /* Formulaire gris foncé */
    --bg-input: #3a3a3a;                /* Input gris moyen */
    --bg-button: #2d6b3f;               /* Bouton vert foncé */
    --bg-button-hover: #3d8b5f;         /* Bouton survol vert moyen */
    --bg-button-primary: #1a3d2e;       /* Bouton primaire vert foncé */
    --bg-button-primary-hover: #2d6b4f; /* Bouton primaire survol */
    
    --bg-newsletter: #3d3426;           /* Newsletter brun foncé */
    --bg-search: #3a3a3a;               /* Recherche gris moyen */
    
    /* --- TEXTES --- */
    --text-primary: #e0e0e0;            /* Texte principal clair */
    --text-secondary: #d4a574;          /* Texte secondaire doré */
    --text-light: #a0a0a0;              /* Texte clair gris */
    --text-white: #f5f5f5;              /* Texte blanc cassé */
    --text-footer: #a0a0a0;             /* Texte footer gris clair */
    --text-link: #e8c9a0;               /* Liens dorés clairs */
    --text-link-hover: #f0d5b0;         /* Liens survol plus clairs */
    
    /* --- BORDURES & LIGNES --- */
    --border-color: #404040;            /* Bordure générale gris */
    --border-card: #404040;             /* Bordure carte */
    --border-input: #555555;            /* Bordure input */
    --border-gallery: #2d8f6b;          /* Bordure galerie vert */
    
    /* --- OMBRES --- */
    --shadow-card: 0px 0px 12px rgba(0,0,0,0.5);    /* Ombre carte renforcée */
    --shadow-button: 0 2px 8px rgba(0,0,0,0.4);     /* Ombre bouton renforcée */
    --shadow-light: 0 0 15px rgba(0, 0, 0, 0.3);    /* Ombre légère */
    
    /* --- SCROLL ARROW --- */
    --scroll-arrow-bg: #d4a574;         /* Flèche doré clair */
    --scroll-arrow-color: #1a1a1a;      /* Icône sombre pour contraste */
}

/* ========================================
   APPLICATION DES VARIABLES - ÉLÉMENTS COMMUNS
   ======================================== */

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease;
}

/* --- HEADER --- */
header {
    background-color: var(--bg-header);
    background-image: linear-gradient(305deg, 
        var(--bg-header-gradient-start) 0%, 
        var(--bg-header-gradient-start) 45%,
        rgba(31, 31, 31, 0.04) 45%, 
        rgba(31, 31, 31, 0.04) 100%),
        linear-gradient(173deg, 
            rgba(190, 190, 190, 0.04) 0%, 
            rgba(190, 190, 190, 0.04) 59%,
            rgba(10, 10, 10, 0.04) 59%, 
            rgba(10, 10, 10, 0.04) 100%),
        linear-gradient(229deg, 
            rgba(168, 168, 168, 0.04) 0%, 
            rgba(168, 168, 168, 0.04) 29%,
            rgba(86, 86, 86, 0.04) 29%, 
            rgba(86, 86, 86, 0.04) 100%),
        linear-gradient(306deg, 
            rgba(51, 51, 51, 0.04) 0%, 
            rgba(51, 51, 51, 0.04) 17%,
            rgba(64, 64, 64, 0.04) 17%, 
            rgba(64, 64, 64, 0.04) 100%),
        linear-gradient(90deg, 
            var(--bg-header-gradient-start), 
            var(--bg-header-gradient-end));
    transition: background-color var(--transition-speed) ease;
}

.titre_site,
.titre_site h1 {
    color: var(--text-primary);
    transition: color var(--transition-speed) ease;
}

/* --- MENU --- */
#menu {
    background-color: var(--bg-menu);
    transition: background-color var(--transition-speed) ease;
}

nav a {
    color: var(--text-white);
}

/* --- MAIN --- */
main {
    background: var(--bg-main);
    transition: background-color var(--transition-speed) ease;
}

main h1 {
    color: var(--text-primary);
}

/* --- POST CARDS --- */
.post_card,
.post_card_other {
    background: var(--bg-card);
    border-color: var(--border-card);
    box-shadow: var(--shadow-card);
    transition: background-color var(--transition-speed) ease,
                transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.post_card:hover,
.post_card_other:hover {
    background: var(--bg-card-hover);
}

.post_card span {
    background: var(--bg-card-header);
    color: var(--text-white);
}

.post_resume,
.post_other_resume {
    color: var(--text-primary);
}

.post_resume a,
.post_resume a:visited {
    color: var(--text-link);
    transition: color var(--transition-speed) ease;
}

.post_resume a:hover {
    color: var(--text-link-hover);
}

.post_date,
.post_other_date {
    color: var(--text-primary);
}

.post_read_more,
.post_other_read_more {
    background: var(--color-accent);
    color: var(--text-white);
    transition: background-color var(--transition-speed) ease;
}

.post_read_more:hover,
.post_other_read_more:hover {
    background: var(--color-accent-hover);
}

/* --- FORMULAIRES --- */
.Formcontainer,
.newletter_form,
.contact_form {
    background-color: var(--bg-form);
    transition: background-color var(--transition-speed) ease;
}

.form-group label {
    color: var(--text-primary);
}

.form-group input,
.form-group textarea {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
    transition: background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                color var(--transition-speed) ease;
}

.search_form,
.search_form input[type=text] {
    background: var(--bg-search);
    color: var(--text-primary);
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease;
}

#Search_blog {
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* --- BOUTONS --- */
.btn {
    background-color: var(--bg-button);
    transition: background-color var(--transition-speed) ease;
}

.btn:hover {
    background-color: var(--bg-button-hover);
}

.submit_newsletter_btn,
.unsuscribe_btn {
    background-color: var(--bg-button-primary);
    transition: background-color var(--transition-speed) ease;
}

.submit_newsletter_btn:hover,
.unsuscribe_btn:hover {
    background-color: var(--bg-button-primary-hover);
}

/* --- FOOTER --- */
footer {
    background: var(--bg-footer);
    color: var(--text-footer);
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease;
}

/* --- NEWSLETTER --- */
.newsletter_title {
    color: var(--text-secondary);
}

.newsletter_title p {
    color: var(--text-secondary);
}

.post_comments_title,
.post_comments_author {
    background: var(--bg-newsletter);
    color: var(--text-primary);
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease;
}

.post_comments_content {
    background: var(--bg-main);
    color: var(--text-primary);
}

/* --- GALERIES --- */
.galerythumbnail {
    border-color: var(--border-gallery);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.galerythumbnail span {
    color: var(--text-white);
}

.imagethumbnail {
    border-color: var(--border-card);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

/* --- LIGHTBOX --- */
.lightbox {
    background: rgba(0, 0, 0, 0.9); /* Toujours sombre pour lisibilité */
}

.lightbox .filename {
    color: var(--text-white);
}

.lightbox .nav {
    color: var(--text-white);
}

/* --- PAGINATION --- */
.pagination a {
    background: var(--color-accent);
    color: var(--text-primary);
    transition: background-color var(--transition-speed) ease;
}

.pagination a:hover {
    background: var(--color-accent-hover);
}

/* --- SCROLL ARROW --- */
.scroll-arrow {
    background-color: var(--scroll-arrow-bg);
    color: var(--scroll-arrow-color);
    transition: background-color var(--transition-speed) ease,
                transform var(--transition-speed) ease;
}

/* --- RÉSULTATS DE RECHERCHE --- */
.search_result_item {
    color: var(--text-primary);
}

.search_result_item:nth-child(even) {
    background-color: var(--bg-card);
}

.search_result_item a,
.search_result_item a:visited {
    color: var(--text-primary);
}

/* --- LIKES --- */
.NbrLikes span {
    color: var(--text-primary);
}

/* --- INPUT UNSUSCRIBE --- */
.unsuscribe_form input[type=text] {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* ========================================
   TRANSITIONS GLOBALES POUR DARK MODE
   ======================================== */

* {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: var(--transition-speed);
    transition-timing-function: ease;
}

/* Exceptions : ne pas animer ces propriétés */
*:where(:not(body):not(header):not(main):not(footer):not(.post_card):not(.post_card_other)) {
    transition-property: none;
}

/* Réappliquer pour les éléments qui doivent être animés */
body,
header,
main,
footer,
.post_card,
.post_card_other,
.Formcontainer,
.form-group input,
.form-group textarea,
.btn,
.submit_newsletter_btn,
.search_form,
#Search_blog {
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
}

/* ========================================
   FIN DU FICHIER
   ======================================== */