/* =========================================================
 * Thème : ÉMERAUDES ET OR PERSAN (Inspiration Enluminure)
 * Basé sur fond sombre, accents Or (#c9a04a) et Émeraude (#00776b)
 * ========================================================= */

/* Importation des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Lato:wght@300;400;700&display=swap');

/* === Variables Globales (Couleurs et Typographie) === */
:root {
    /* Couleurs de l'enluminure */
    --bg: #0b1a2a; /* Fond : Noir Jais / Encre */
    --panel: #223548; /* Panneaux / Cartes : Gris Saphir Sombre */
    --muted: #93a9af; /* Texte secondaire : Gris-Bleu Pâle (Craie) */
    --accent: #c9a04a; /* Accent principal : Or Mat */
    --accent-light: #00776b; /* Accent secondaire : Vert Émeraude Profond */
    --text-dark: #f0f0f0; /* Texte principal : Ivoire / Très clair */

    --font-heading: 'Cormorant Garamond', serif; /* Titres : Élégance et caractère calligraphique */
    --font-body: 'Lato', sans-serif; /* Corps : Conservé pour la lisibilité */
}

/* ----------------------------------------------------
 * GÉNÉRAL & STRUCTURE
 * ---------------------------------------------------- */
body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text-dark);
    line-height: 1.6;
    
    /* Dégradé subtil existant pour éviter le noir plat */
    /*background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.05)),*/
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;

    /* 🤩 NOUVEAU : Ajouter l'image d'archive en fond TEXTUREL ! */
    /*
     * Pour utiliser l'image, vous devez l'uploader sur votre serveur
     * et remplacer 'chemin/vers/votre_image_archive.jpg' par le chemin réel.
     * J'utilise une version légèrement assombrie et floutée pour qu'elle ne gêne pas la lecture.
     */
    background-image: 
        linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), /* Superposer une couche sombre pour la lisibilité */
        url('/design/fondpersan.jpg'); /* ⬅️ REMPLACER CE CHEMIN */
    
    background-size: cover, cover; /* Ajuster la taille pour couvrir */
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed; /* Rester fixe au scroll */
}

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--accent); /* Titres en Or */
    font-weight: 700;
}

/* --- Boutons Général (Or et Émeraude) --- */
.btn, button[type="submit"] {
    background: linear-gradient(45deg, var(--accent), #e8c67d); 
    color: var(--bg); /* Texte bouton très sombre */
    box-shadow: 0 4px 15px rgba(201, 160, 74, 0.5); /* Ombre Or */
    border: none;
    transition: all 0.4s ease;
}

/* 🤩 Effet "Lueur Chaleureuse" sur le bouton */
.btn:hover, button[type="submit"]:hover {
    background: linear-gradient(45deg, #e8c67d, var(--accent));
    box-shadow: 0 0 25px rgba(201, 160, 74, 0.8), 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: scale(1.03); 
}

/* ----------------------------------------------------
 * HEADER & NAVIGATION
 * ---------------------------------------------------- */

.site-header {
    background: var(--bg); /* Très sombre */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); 
    border-bottom: 1px solid var(--accent-light); /* Ligne Émeraude */
}

.site-title {
    color: var(--accent); /* Titre en Or */
    letter-spacing: 2px;
}

.main-nav a { 
    color: var(--muted); /* Liens grisés */
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    transition: all 0.4s ease;
}

/* 🤩 Effet "Souligné Or" sur les liens de navigation */
.main-nav a:hover {
    color: var(--text-dark); 
    background: transparent;
    box-shadow: inset 0 -2px 0 0 var(--accent); /* Ligne Or */
}

#menu-toggle {
    background: var(--accent-light); /* Bouton Émeraude */
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
#menu-toggle:hover {
    background: var(--accent); /* Devient Or */
    box-shadow: 0 0 15px var(--accent), 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------
 * SIDEBAR & NEWS FEED
 * ---------------------------------------------------- */

.sidebar {
    background: var(--panel); /* Gris Saphir Sombre */
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5); 
    border-radius: 4px;
    border-right: 1px solid rgba(201, 160, 74, 0.1); /* Bordure Or subtile */
}

.sidebar h3 {
    color: var(--text-dark); /* Titres en Ivoire */
    border-bottom: 1px solid var(--accent-light); /* Ligne Émeraude */
    padding-bottom: 5px;
}

.sidebar ul li a {
    color: var(--muted); 
    transition: all 0.4s ease;
}

/* 🤩 Effet "Onde Émeraude" sur les liens de sidebar */
.sidebar ul li a:hover {
    background: rgba(0, 119, 107, 0.2); 
    color: var(--accent-light); /* Couleur Émeraude */
    transform: translateX(4px); 
}

/* --- News Feed (Timeline) --- */
.news-feed li strong {
    color: var(--accent); /* Heure/Date en Or */
}
.news-feed li p {
    color: var(--muted);
}
/* Le point de la timeline (Or/Bronze) */
.news-feed li::before {
    /* Si vous utilisez un pseudo-élément pour le point, stylisez-le ici */
    content: "•";
    color: var(--accent); 
    position: absolute;
    left: 0;
    font-size: 1.5em;
    line-height: 0.8;
}

/* ----------------------------------------------------
 * CARTES ARTICLES & CONTENU PRINCIPAL
 * ---------------------------------------------------- */

.card {
    background: var(--panel); 
    color: var(--text-dark); 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); 
    border-radius: 4px;
    border: 1px solid rgba(201, 160, 74, 0.2); 
    transition: all 0.4s ease;
}

/* 🤩 Effet "Profondeur" */
.card:hover {
    transform: translateY(-2px); 
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7); 
}

.meta { color: var(--muted); }

/* --- TITRES D'ARTICLE (Focus Or) --- */
.card h3 {
    color: var(--accent); 
    font-family: var(--font-heading); 
    transition: all 0.5s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Effet relief */
}
/* --- TITRES D'ARTICLE (Focus Or) --- */
.card h3 a { /* ⬅️ AJOUTER le sélecteur 'a' ici */
    color: var(--accent) !important; /* Forcer la couleur Or */
    text-decoration: none !important; /* Supprimer le soulignement par défaut */
    font-family: var(--font-heading); 
    transition: all 0.5s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Effet relief */
}

.card h3 a:hover { /* ⬅️ Modifier pour cibler le lien au survol */
    color: var(--text-dark) !important; /* Forcer la couleur Ivoire au survol */
    transform: translateY(-1px); 
    text-shadow: 0 0 10px var(--accent), 0 0 15px rgba(255, 255, 255, 0.1); 
}
/* Style pour les liens de titres déjà visités */
.card h3 a:visited {
    color: var(--accent) !important; /* Garder la couleur Or même après la visite */
    text-decoration: none !important;
}
/* ----------------------------------------------------
 * ARTICLE COMPLET (.article-full)
 * ---------------------------------------------------- */

.article-full {
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    border-radius: 4px;
    border: 1px solid rgba(201, 160, 74, 0.1);
}

.article-full h1 {
    color: var(--accent);
}
.article-full .result-meta {
    color: var(--muted);
}

/* Style pour les Blockquotes (Citations / Poésie) */
blockquote {
    font-style: italic;
    padding: 20px 25px;
    margin: 25px 0;
    color: var(--text-dark);
    border-radius: 0 4px 4px 0;

    border-left: 4px solid var(--accent-light); /* Ligne Émeraude */
    background-color: #1a2c3d; /* Fond légèrement moins sombre que le panel */

    /* 🤩 Effet de bordure interne illuminée */
    box-shadow: inset 0 0 10px rgba(201, 160, 74, 0.1), 
                5px 5px 15px rgba(0, 0, 0, 0.6); 
    
    /* Motif subtil d'enluminure */
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9a04a' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Partage social (Discret) --- */
.social-share a {
    color: var(--text-dark);
    background-color: var(--panel);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--muted);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-radius: 4px;
}
/* 🤩 Effet "Élargissement Subtil" */
.social-share a:hover {
    transform: scale(1.1); 
    box-shadow: 0 0 10px var(--accent), 0 5px 15px rgba(0, 0, 0, 0.4);
    background-color: var(--accent-light); /* Émeraude au survol */
    color: var(--panel);
}

/* ----------------------------------------------------
 * FORMULAIRE DE CONTACT
 * ---------------------------------------------------- */

.contact, form {
    background: var(--panel);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 160, 74, 0.1);
    color: var(--text-dark);
}

.contact h2 {
    color: var(--accent);
}

input[type="text"],
input[type="email"],
textarea {
    background: var(--bg); /* Champs d'entrée en Noir Jais */
    color: var(--text-dark);
    border: 1px solid var(--muted);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 4px;
}

input:focus, textarea:focus {
    border-color: var(--accent-light); /* Focus en Émeraude */
    box-shadow: 0 0 10px rgba(0, 119, 107, 0.6);
    outline: none;
}

/* ----------------------------------------------------
 * FOOTER & PAGINATION
 * ---------------------------------------------------- */

.site-footer {
    background: var(--bg);
    color: var(--muted);
    border-top: 1px solid var(--accent); /* Ligne Or */
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.5);
}
.footer-links a { color: var(--accent-light); }
.footer-links a:hover { text-decoration: underline; color: var(--accent); }

/* --- Pagination (Pastilles Précieuses) --- */
.pagination a, .pagination span { 
    transition: all 0.4s ease; 
    border-radius: 4px; 
    padding: 8px 12px; 
    font-family: var(--font-heading);
    font-weight: 600;
}

.pagination a {
    background: var(--panel);
    color: var(--text-dark);
    border: 1px solid var(--accent-light); /* Bordure Émeraude */
}
/* 🤩 Effet "Reflet Or" */
.pagination a:hover {
    background: var(--accent);
    color: var(--bg); /* Texte noir sur Or */
    box-shadow: 0 0 15px var(--accent-light), 0 5px 10px rgba(0, 0, 0, 0.4);
    transform: scale(1.05); 
}
.pagination .current {
    background: var(--accent-light); /* Page actuelle en Émeraude */
    color: white;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 119, 107, 0.5);
}
/* =========================================================
 * NUAGE DE TAGS : MÉDAILLONS PRÉCIEUX
 * ========================================================= */
#tags h2 {
    color: var(--accent); /* Titre du nuage en Or */
    font-family: var(--font-heading);
    font-weight: 700;
}

.tag-cloud a {
    /* Style de base : Fond sombre avec texte Émeraude */
    display: inline-block;
    padding: 6px 14px;
    margin: 5px;
    border-radius: 4px; /* Forme de médaillon */
    background: var(--panel); /* Fond sombre (Gris Saphir) */
    
    /* 🏆 Correction des couleurs des liens */
    color: var(--accent-light) !important; /* Couleur du texte en Émeraude */
    text-decoration: none !important;
    border: 1px solid var(--accent-light); /* Bordure Émeraude fine */

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0.9;
}

/* 🏆 Correction de la couleur visitée (pour éviter le violet/bleu) */
.tag-cloud a:visited {
    color: var(--accent-light) !important;
}

/* 🤩 Effet "Éclat Or" au survol */
.tag-cloud a:hover {
    /* Inversion des couleurs au survol (devient Or) */
    color: var(--bg) !important; /* Texte Noir Jais sur fond Or */
    background: var(--accent); /* Fond Or */
    border-color: var(--accent); /* Bordure Or */
    
    /* Effet Lueur/Éclat spectaculaire */
    box-shadow: 0 0 15px var(--accent), 0 5px 15px rgba(0, 0, 0, 0.5); 
    transform: scale(1.1); /* Zoom légèrement pour l'effet de jeton */
    opacity: 1;
}