/*
Theme Name: Blomig Child
Theme URI: https://blomig.com
Template: twentytwentyfive
Author: BLOMIG
Description: Child theme optimisé - Design System + corrections
Version: 1.4
Text Domain: blomig-child
*/

/* =============================================
   1. VARIABLES GLOBALES
   ============================================= */
:root {
    --font-primary: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
    --fs-base: 1.1rem;
    --fs-large: 1.25rem;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    --bg: #ffffff;
    --text: #000000;
    --text-light: #555555;
    --text-medium: #736d66;
    --accent: #F5AD27;
    --accent-hover: #f9b957;
    --link-bg: #FEF6E6;
    --link-hover-bg: #fde9b8;
    --exergue-bg: #fef8f0;
    --exergue-border: #928E85;
}

.dark {
    --bg: #0f0f0f;
    --text: #dddddd;
    --text-light: #aaaaaa;
    --text-medium: #bbbbbb;
    --accent: #f9b957;
    --accent-hover: #ffb340;
    --link-bg: #1A1A1A;
    --link-hover-bg: #252525;
    --exergue-bg: #1e1e1e;
    --exergue-border: #444444;
}

/* =============================================
   2. BASE
   ============================================= */
html {
    font-size: 75%;   /* Taille globale comme avant */
}

@font-face {
    font-family: "JetBrains Mono";
    font-display: swap;
}

body, .wp-block-post-content, .entry-content, p, li, blockquote, ol, ul, pre {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

/* Liens restaurés à l'identique */
.entry-content a {
    text-decoration: none;
    color: #000000;
    display: inline-block;
    padding: 1px 4px;
    background: var(--link-bg);
    border-radius: 3px;
    transition: background 0.25s ease, color 0.2s ease;
}

.entry-content a:hover {
    background: var(--link-hover-bg);
}

.entry-content a:active {
    background: #000000;
    color: #FEF6E6;
}

/* =============================================
   3. STYLES SPÉCIFIQUES (tout conservé)
   ============================================= */

/* IMAGE PROFIL */
.image-profil {
    border: 2px solid #36454F;
    border-radius: 50%;
    float: left;
    margin-right: 25px;
    width: 150px;
    height: 150px;
}
.chapeau { font-size: 150%; color: var(--text-medium); line-height: 1.2; margin-bottom: 20px; }

.lettrine {
    font-size: 300%; line-height: 0.8; float: left; margin: 0 0.1em 0 0;
    padding-top: 8px; vertical-align: top;
}

table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 1px solid #808080; }
sup { color: #ABABAB; font-size: 90%; font-weight: bold; }

/* Exergues, blocklong, citations */
.exergue_droite, .exergue_gauche, .blocklong, .blockquote p, .citation,
.testimonial-quote blockquote p {
    background: var(--exergue-bg);
    border-color: var(--exergue-border);
    color: var(--text-medium);
}

.exergue_droite { float: right; width: 200px; text-align: center; margin: 10px 15px 5px 20px; }
.exergue_gauche { float: left; width: 200px; text-align: center; margin: 10px 20px 5px 15px; }

.blocklong { border-left: 2px solid var(--exergue-border); margin: 25px 30px 10px 15px; padding: 10px 20px; }

/* Textmarge */
.textmarge {
    float: left; font-size: 1em; color: #bbbbbb; background: #FFF;
    width: 200px; padding: 15px; text-align: right; margin-left: -250px;
}

/* Testimonial Quote (complet) */
.testimonial-quote blockquote p {
    padding: 20px; margin: 10px; text-align: right;
}
.testimonial-quote img {
    border: 2px solid #c0b6aa; border-radius: 50%; float: left;
    width: 150px; height: 150px; margin: 20px 30px 0 30px; object-fit: cover;
}
.testimonial-quote cite { text-align: right; color: gray; font-size: 0.9em; }
.testimonial-quote cite span { color: #F19D39; font-weight: 700; }

/* Commentaires */
.commentaires-section .commentaires-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; max-width: 1200px; margin: 0 auto; padding: 20px 0;
}

.commentaires-section .comment-box {
    display: flex; align-items: flex-start; padding: 20px;
    border: 1px solid #ddd; border-radius: 10px; background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.3s ease;
}

.commentaires-section .comment-box:hover {
    transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-color: #007cba;
}

/* Accueil */
.section-title { font-size: 1.5em; font-weight: 900; margin: 4em 0 2.8em 0; }
.home-entry-date { font-size: 0.5em; color: var(--text-light); text-transform: uppercase; }

/* Bouton Dark Mode - restauré */
#theme-toggle {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-size: 1.2em; opacity: 0.65; z-index: 100;
    background-color: rgba(0,0,0,0.05) !important; border-radius: 50% !important;
    color: var(--text) !important; padding: 6px !important;
    width: 36px !important; height: 36px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border: none !important;
}

.dark #theme-toggle { background-color: rgba(255,255,255,0.05) !important; }

/* Responsive */
@media (max-width: 768px) {
    .textmarge {
        float: none !important; width: 100% !important; margin: 24px 0 !important;
        padding: 18px 20px !important; background: #f6f6f6 !important; text-align: left !important;
    }
}

/* Dark mode adaptations */
.dark .entry-content a { color: #ffffff; background: #5B5B5B; }
.dark .entry-content a:hover { background: #333333; }

.dark .exergue_droite, .dark .exergue_gauche, .dark .blocklong, .dark .citation,
.dark .testimonial-quote blockquote p, .dark .textmarge, .dark .comment-box {
    background: var(--exergue-bg); border-color: var(--exergue-border);
}

// =============================================
// BOUTON TOGGLE DARK MODE - Version finale propre
// =============================================
function blomig_theme_toggle_button() {
    ?>
    <button id="theme-toggle" aria-label="Basculer en mode sombre" 
            style="position:fixed; top:65px; right:25px; z-index:99999; 
                   width:48px; height:48px; font-size:1.55em; background:#fff; 
                   color:#000; border:2px solid #F5AD27; border-radius:50%; 
                   cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.2); 
                   display:flex; align-items:center; justify-content:center;">
        ☽
    </button>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const toggle = document.getElementById('theme-toggle');
        if (!toggle) return;

        function setTheme(isDark) {
            if (isDark) {
                document.documentElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
                toggle.innerHTML = '☼';
            } else {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
                toggle.innerHTML = '☽';
            }
        }

        // État initial
        const savedTheme = localStorage.getItem('theme');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        setTheme(savedTheme === 'dark' || (!savedTheme && prefersDark));

        // Clic
        toggle.addEventListener('click', function() {
            const isDark = document.documentElement.classList.contains('dark');
            setTheme(!isDark);
        });
    });
    </script>
    <?php
}
add_action('wp_body_open', 'blomig_theme_toggle_button', 5);

/* =============================================
   DARK MODE - VERSION COMPLÈTE ET RIGOUREUSE
   (tous les styles de ton ancien CSS additionnel sont repris ici)
   ============================================= */

html, body,
.wp-site-blocks,
.site-wrapper,
.entry-content,
.wp-block-post-content {
    background: var(--bg) !important;
    color: var(--text) !important;
    transition: background 0.4s ease, color 0.4s ease;
}

/* Liens */
.dark .entry-content a {
    color: #ffffff !important;
    background: var(--link-bg) !important;
}

.dark .entry-content a:hover {
    background: var(--link-hover-bg) !important;
}

/* Exergues, blocklong, citations, testimonial, textmarge */
.exergue_droite, .exergue_gauche, .blocklong, .blockquote p, .citation,
.testimonial-quote blockquote p, .textmarge {
    background: var(--exergue-bg) !important;
    border-color: var(--exergue-border) !important;
    color: var(--text-medium) !important;
}

/* Boutons "Répondre" */
.dark .wp-block-comment-reply-link .comment-reply-link,
.dark .comment-reply-link {
    color: #f9b957 !important;
    background: #1e1e1e !important;
}

.dark .wp-block-comment-reply-link .comment-reply-link:hover {
    color: #ffffff !important;
    background: #f9b957 !important;
}

/* Commentaires */
.dark .commentaires-section .comment-box {
    background: #1e1e1e !important;
    border-color: #444444 !important;
    color: #dddddd !important;
}

/* Recherche footer, latest-tweet, etc. (tes anciens styles) */
.dark .wp-block-search__inside-wrapper,
.dark .latest-tweet-band {
    background: var(--link-bg) !important;
    border-color: var(--exergue-border) !important;
    color: var(--text-medium) !important;
}

/* Archives grille mensuelle (tes anciens styles) */
.dark .month-grid-container { background: var(--bg) !important; }
.dark .day-square.has-posts { background: #f9b957 !important; }