/*
Theme Name: Vérités Cachées
Description: Un thème WordPress élégant et mystique pour révéler les vérités cachées de l'histoire. Design sombre avec des accents dorés, parfait pour les sites de contenu alternatif, mystères historiques et recherches ésotériques.
Author: Votre Nom
Version: 1.0
Text Domain: verites-cachees
Domain Path: /languages
Tags: dark, mystery, blog, responsive, custom-header, custom-menu, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Variables globales */
:root {
    --primary-color: #8b0000; /* bordeaux profond */
    --secondary-color: #c9a959; /* or antique */
    --dark-color: #1a1a2e; /* bleu nuit */
    --light-color: #f0e6d2; /* parchemin clair */
    --accent-color: #3a5a78; /* bleu mystique */
    --text-color: #333;
    --body-bg: #000;
}

/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--light-color);
    background-color: var(--body-bg);
    line-height: 1.6;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231a1a2e" /><path d="M0 10 L100 10 M0 30 L100 30 M0 50 L100 50 M0 70 L100 70 M0 90 L100 90" stroke="%232a2a3e" stroke-width="0.5" /><path d="M10 0 L10 100 M30 0 L30 100 M50 0 L50 100 M70 0 L70 100 M90 0 L90 100" stroke="%232a2a3e" stroke-width="0.5" /></svg>');
    background-attachment: fixed;
    overflow-x: hidden;
}

/* WordPress Core Styles */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Screen reader text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* En-tête */
header {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--secondary-color);
    transition: all 0.3s ease;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-symbol {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}

/* Custom logo WordPress */
.logo-symbol .custom-logo-link {
    display: block;
    width: 100%;
    height: 100%;
}

.logo-symbol .custom-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.logo-symbol svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 5px var(--secondary-color));
    transition: all 0.5s ease;
}

.logo:hover .logo-symbol svg {
    transform: rotate(180deg);
    filter: drop-shadow(0 0 8px var(--secondary-color));
}

.site-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: normal;
    text-decoration: none;
}

.site-title:hover {
    color: var(--secondary-color);
}

.site-subtitle {
    font-size: 0.9rem;
    color: var(--light-color);
    letter-spacing: 2px;
    opacity: 0.8;
}

/* Navigation */
nav ul {
    display: flex;
    list-style: none;
}

nav li {
    margin-left: 2rem;
    position: relative;
}

nav a {
    color: var(--light-color);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.3s ease;
}

nav a:hover {
    color: var(--secondary-color);
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: var(--light-color);
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Hero section */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 5%;
    position: relative;
    overflow: hidden;
    background-color: #000;
    /* Les propriétés background-size, position, repeat, attachment sont maintenant dynamiques */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.7) 50%,
        rgba(0, 0, 0, 0.9) 100%
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.hero h1 {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.hero p {
    font-size: 1.3rem;
    color: var(--light-color);
    margin-bottom: 2rem;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.hero-btn {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: var(--secondary-color);
    color: var(--dark-color);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.hero-btn:hover {
    background-color: var(--primary-color);
    color: var(--light-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Articles et pages */
.post-content,
.page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background-color: rgba(26, 26, 46, 0.7);
    border: 1px solid rgba(201, 169, 89, 0.3);
    border-radius: 5px;
    margin-top: 6rem;
    margin-bottom: 2rem;
}

.post-content h1,
.post-content h2,
.post-content h3,
.page-content h1,
.page-content h2,
.page-content h3 {
    color: var(--secondary-color);
    font-family: 'Cinzel', serif;
    margin-bottom: 1rem;
}

.post-content p,
.page-content p {
    margin-bottom: 1.5rem;
    color: var(--light-color);
}

.post-content a,
.page-content a {
    color: var(--secondary-color);
    text-decoration: underline;
}

.post-content a:hover,
.page-content a:hover {
    opacity: 0.8;
}

/* Section principale */
main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 5%;
}

.section-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background-color: var(--secondary-color);
}

/* Section découvertes récentes */
.recent-posts {
    padding: 6rem 0;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.post-card {
    background-color: rgba(26, 26, 46, 0.7);
    border: 1px solid rgba(201, 169, 89, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease;
    transform: translateY(50px);
    opacity: 0;
    animation: fadeInUp 0.8s forwards;
}

.post-card:nth-child(2) {
    animation-delay: 0.2s;
}

.post-card:nth-child(3) {
    animation-delay: 0.4s;
}

.post-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(201, 169, 89, 0.2);
}

.post-img {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.post-card:hover .post-img img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

.post-content-card {
    padding: 1.5rem;
}

.post-category {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background-color: var(--primary-color);
    color: var(--light-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    border-radius: 3px;
}

.post-title {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.post-title a {
    color: var(--secondary-color);
    text-decoration: none;
}

.post-title a:hover {
    opacity: 0.8;
}

.post-excerpt {
    color: var(--light-color);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    opacity: 0.9;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--light-color);
    opacity: 0.7;
}

.read-more {
    color: var(--secondary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.read-more:hover {
    opacity: 0.8;
}

.read-more span {
    margin-left: 5px;
    transition: all 0.3s ease;
}

.read-more:hover span {
    transform: translateX(5px);
}

/* Pied de page */
footer {
    background-color: rgba(0, 0, 0, 0.8);
    border-top: 1px solid var(--secondary-color);
    padding: 3rem 0 1rem;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.footer-column {
    padding: 2rem;
    background-color: rgba(26, 26, 46, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(201, 169, 89, 0.1);
    transition: all 0.3s ease;
}

.footer-column:hover {
    background-color: rgba(26, 26, 46, 0.5);
    border-color: rgba(201, 169, 89, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.footer-column h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: var(--secondary-color);
}

.footer-column p {
    color: var(--light-color);
    opacity: 0.7;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    color: var(--light-color);
    text-decoration: none;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--secondary-color);
    opacity: 1;
}

.social-links {
    display: flex;
    margin-top: 1.5rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(240, 230, 210, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    background-color: var(--secondary-color);
}

.social-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--light-color);
    transition: all 0.3s ease;
}

.social-icon:hover svg {
    fill: var(--dark-color);
}

.copyright {
    text-align: center;
    padding-top: 2rem;
    margin-top: 3rem;
    border-top: 1px solid rgba(201, 169, 89, 0.2);
    color: var(--light-color);
    opacity: 0.5;
    font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

/* Étoiles scintillantes sur fond sombre */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
}

.star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    animation: twinkle var(--duration) infinite ease-in-out;
    opacity: 0;
}

@keyframes twinkle {
    0% { opacity: 0; }
    50% { opacity: var(--opacity); }
    100% { opacity: 0; }
}

/* Media queries */
@media screen and (max-width: 992px) {
    .hero h1 {
        font-size: 2.8rem;
    }

    .hero p {
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 768px) {
    .header-content {
        padding: 1rem 5%;
    }

    .logo-symbol {
        width: 40px;
        height: 40px;
    }

    .site-title {
        font-size: 1.5rem;
    }

    .site-subtitle {
        font-size: 0.8rem;
    }

    nav {
        position: absolute;
        right: 0;
        top: 100%;
        background-color: rgba(0, 0, 0, 0.95);
        width: 100%;
        padding: 1rem 0;
        clip-path: circle(0px at 90% -10%);
        transition: all 0.8s ease-out;
        pointer-events: none;
    }

    nav.active {
        clip-path: circle(1500px at 90% -10%);
        pointer-events: all;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav li {
        margin: 1rem 0;
    }

    .hamburger {
        display: block;
    }

    .hamburger.active div:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .hamburger.active div:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active div:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    .section-title {
        font-size: 2rem;
    }

    .posts-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }

    .post-content,
    .page-content {
        padding: 1rem;
        margin: 6rem 1rem 1rem;
    }
}

/* Media queries pour le footer */
@media screen and (max-width: 992px) {
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .footer-column h3 {
        font-size: 1.1rem;
    }
    
    .footer-column p,
    .footer-links {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    
    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .social-links {
        justify-content: center;
    }
}

/* Animation pour les éléments au scroll */
.scroll-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
}

.scroll-animation.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================
   Styles pour les blocs Gutenberg
   =================================== */

/* Blocs de base */
.entry-content .wp-block-quote {
    border-left: 4px solid var(--secondary-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    background-color: rgba(201, 169, 89, 0.1);
    padding: 1.5rem;
    border-radius: 5px;
}

.entry-content .wp-block-image {
    margin: 2rem 0;
}

.entry-content .wp-block-image img {
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    height: auto;
}

/* Boutons Gutenberg */
.entry-content .wp-block-button__link {
    background-color: var(--secondary-color);
    color: var(--dark-color);
    padding: 0.8rem 2rem;
    border-radius: 5px;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.entry-content .wp-block-button__link:hover {
    background-color: var(--primary-color);
    color: var(--light-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Colonnes */
.entry-content .wp-block-columns {
    margin: 2rem 0;
    gap: 2rem;
}

/* Groupe */
.entry-content .wp-block-group {
    padding: 2rem;
    margin: 2rem 0;
}

.entry-content .wp-block-group.has-background {
    padding: 3rem;
    border-radius: 10px;
}

/* Séparateur */
.entry-content .wp-block-separator {
    border-color: var(--secondary-color);
    opacity: 0.3;
    margin: 3rem auto;
}

/* Cover Block */
.entry-content .wp-block-cover {
    margin: 2rem 0;
    border-radius: 10px;
    overflow: hidden;
}

/* Tables */
.entry-content .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    margin: 2rem 0;
}

.entry-content .wp-block-table td,
.entry-content .wp-block-table th {
    border: 1px solid rgba(201, 169, 89, 0.3);
    padding: 0.75rem;
    background-color: rgba(26, 26, 46, 0.3);
}

.entry-content .wp-block-table th {
    background-color: rgba(201, 169, 89, 0.2);
    font-weight: 600;
    color: var(--secondary-color);
}

/* Alignements larges */
.entry-content .alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.entry-content .alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

/* Code Block */
.entry-content .wp-block-code {
    background-color: rgba(26, 26, 46, 0.7);
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    padding: 1rem;
    color: var(--light-color);
    overflow-x: auto;
}

/* ===================================
   Page d'accueil Gutenberg
   =================================== */

.home-gutenberg-content {
    margin-top: 2rem;
}

.home-gutenberg-content .page-content-full {
    background: none;
    border: none;
    margin-top: 0;
    max-width: 100%;
}

.home-gutenberg-content .entry-content {
    padding: 0;
}

/* Sections dans la page d'accueil */
.home-gutenberg-content .wp-block-group {
    margin: 0;
    padding: 4rem 5%;
}

.home-gutenberg-content .wp-block-group.alignfull {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.home-gutenberg-content .wp-block-group.has-background {
    margin-top: 0;
    margin-bottom: 0;
}

/* Titre de section style */
.home-gutenberg-content h2 {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: var(--secondary-color);
    text-align: center;
    margin: 3rem 0 2rem;
    position: relative;
    padding-bottom: 1rem;
}

.home-gutenberg-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
}

/* Conteneur pour largeur maximale */
.home-gutenberg-content .wp-block-group:not(.alignfull) .wp-block-group__inner-container,
.home-gutenberg-content > *:not(.alignfull) {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5%;
}

/* Bloc derniers articles personnalisé */
.home-gutenberg-content .wp-block-latest-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    list-style: none;
    padding: 0;
}

.home-gutenberg-content .wp-block-latest-posts li {
    background-color: rgba(26, 26, 46, 0.7);
    border: 1px solid rgba(201, 169, 89, 0.3);
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.home-gutenberg-content .wp-block-latest-posts li:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: var(--secondary-color);
}