/*
Theme Name: Mon Thème Cartes
Theme URI: https://example.com/mon-theme-cartes/
Author: Votre Nom
Author URI: https://example.com/
Description: Thème basé sur un design de grille de cartes numériques représentant des articles, avec une page article en deux colonnes.
Version: 1.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monthemecartes
Tags: grid, cards, posts, featured-image, tailwind, two-column, slider

Ce thème utilise Tailwind CSS et Font Awesome via CDN.
*/

/* ==========================================================================
   Styles Généraux
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #ffe845; /* Couleur de fond générale */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #000000; /* Couleur de texte par défaut */
    font-family: sans-serif; /* Police par défaut, à personnaliser */
}

/* Conteneur principal (utilisé dans single.php et page.php) */
.container {
    width: 100%;
    max-width: 1200px; /* Largeur maximale du contenu */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Espacement sur les côtés */
    padding-right: 1rem;
}

/* ==========================================================================
   Header / Barre de Navigation
   ========================================================================== */
.site-header {
    /* Pas de style spécifique ici pour l'instant */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 0; /* Padding vertical, pas horizontal car géré par nav-left/right */
    background-color: #ffe845;
    border-bottom: 3px solid black;
}

.nav-left, .nav-right {
    display: flex;
    gap: 2rem; /* Espace entre les liens du menu */
    padding: 0 2rem; /* Espacement gauche/droite pour les groupes de menu */
}

/* Ciblage des menus WordPress générés */
.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
}
.navbar .menu-item a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    /* MODIFIÉ: Texte plus gros */
    font-size: 1.1rem; /* Ajustez (ex: 1.2rem, 18px) */
    font-weight: bold; /* Peut être mis ici ou seulement au survol */
}
.navbar .menu-item a:hover {
     transform: scale(1.05);
     /* MODIFIÉ: Texte en gras au survol */
     font-weight: bold; /* Assure qu'il est gras au survol */
}


/* Centre de la navbar (Logo) */
.nav-center {
    flex-grow: 1;
    text-align: center;
}

.logo { /* Style pour le conteneur si besoin */
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1;
}
.logo a, /* Style pour le lien du logo texte */
.site-title a {
    color: inherit;
    text-decoration: none;
}
.custom-logo-link img { /* Style pour le logo image */
    max-height: 50px; /* Hauteur max */
    width: auto;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   Sous-menu / Filtres (Sous la navbar)
   ========================================================================== */
.submenu {
    background-color: #ffe845;
    padding: 0.5rem 2rem;
    border-bottom: 3px solid black;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Style de base du bouton filtre */
.filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 20px; /* Coins arrondis */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    /* MODIFIÉ: Bordure noire, fond transparent, texte noir */
    background-color: transparent;
    border: 2px solid black;
    color: black;
}

/* Style pour le select dans le filter-btn */
.filter-btn select {
     appearance: none; -webkit-appearance: none; -moz-appearance: none;
     background-color: transparent; border: none;
     padding: 0 0.5rem 0 0; margin: 0;
     cursor: pointer; font-size: inherit; color: inherit; line-height: inherit;
}
.filter-btn select:focus { outline: none; }
.filter-btn:has(select) {
    padding-right: 0.5rem;
    /* MODIFIÉ: Assurer que le conteneur du select ne change pas au survol/actif */
    background-color: transparent !important;
    color: black !important;
    border-color: black !important; /* Maintient la bordure */
}
/* Note: :has() n'est pas supporté par tous les navigateurs encore. */
/* Alternative si :has() pose problème : ajoutez une classe spécifique au div du select */
/* .filter-btn-select-wrapper { ... styles de base ... } */
/* .filter-btn-select-wrapper:hover { ... pas de changement ... } */


/* MODIFIÉ: Style au survol et pour le bouton actif */
.filter-btn:hover:not(:has(select)), /* Ne s'applique pas au conteneur du select */
.filter-btn.active:not(:has(select)) {
    background-color: black;  /* Fond devient noir */
    color: #ffe845;        /* Texte devient jaune */
    border-color: black;      /* La bordure reste noire */
}



/* ==========================================================================
   Bannière d'information (placée entre le menu et les filtres)
   ========================================================================== */
.info-banner {
    background-color: #ffe845;
    border-bottom: 3px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Hauteur, taille de police et famille de police sont définies dynamiquement
       dans le CSS injecté par monthemecartes_add_banner_styles() */
}

.info-banner-content {
    text-align: center;
    padding: 10px 20px;
    max-width: 1200px;
    font-weight: bold;
}

/* Responsive pour la bannière */
@media (max-width: 768px) {
    .info-banner {
        padding: 10px 0;
    }
    .info-banner-content {
        padding: 5px 15px;
    }
}

/* ==========================================================================
   Grille de Cartes (Page d'accueil / Archives - index.php)
   ========================================================================== */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    width: 100%;
    gap: 0; /* Effet "collé" */
    flex-grow: 1;
    background-color: #ffe845; /* Fond pour voir les bordures */
}

/* Styles de la carte individuelle (lien <a>) */
.card {
    aspect-ratio: 1 / 1.5;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    border: 3px solid black;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s ease 0s;
    background-size: cover; background-position: center;
    background-color: #cccccc; /* Fallback */
    color: transparent;
}

.card:hover {
    transform: scale(1.02);
    z-index: 10;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
}

/* Superposition dégradé (optionnel) */
.card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05));
    z-index: 1; pointer-events: none;
}

/* Titre au survol (sur la grille) */
.card .card-title-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background-color: rgba(0, 0, 0, 0.75); color: white;
    padding: 0.75rem; text-align: center; font-size: 1rem; font-weight: bold;
    opacity: 0; transition: opacity 0.3s ease-in-out;
    z-index: 2; pointer-events: none;
    max-height: 5em; line-height: 1.3; overflow: hidden;
}

.card:hover .card-title-overlay {
    opacity: 1;
}

/* ==========================================================================
   Mise en Page Article Unique (single.php) - 2 Colonnes
   ========================================================================== */
.single-article-container {
    /* Pas de style spécifique ici, utilise .container de Tailwind si besoin */
}

/* Structure Grid pour les 2 colonnes DANS la zone de contenu principale */
.product-layout-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Image Gauche (50%) / Texte Droite (50%) */
    gap: 2.5rem; /* Espace entre colonnes */
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Responsive pour single.php: 1 colonne sur petits écrans */
@media (max-width: 768px) { /* Ajustez le breakpoint */
    .product-layout-container {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap: 1.5rem;
    }
    /* L'ordre par défaut est OK (image avant texte dans le HTML) */
}

/* Colonne de gauche (Galerie) */
.product-gallery {
    position: relative; /* Pour positionnement interne (flèches slider) */
}

/* Colonne de droite (Texte) */
.product-content {
    /* Pas de style spécifique à la colonne ici pour l'instant */
}

/* Styles de base pour le slider d'images (Exemple SwiperJS, à adapter !) */
.image-slider-wrapper {
    width: 100%; border: 3px solid black; box-sizing: border-box;
}
.swiper-container {
    width: 100%; height: auto; aspect-ratio: 1/1; /* Ratio carré par défaut */
}
.swiper-slide {
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; background-color: #f0f0f0;
}
.swiper-slide img {
    display: block; width: 100%; height: 100%; object-fit: contain;
}

/* Styles flèches SwiperJS (Exemple) */
.product-gallery .swiper-button-prev,
.product-gallery .swiper-button-next {
    color: #000; background-color: rgba(255, 232, 69, 0.8); /* Jaune */
    border: 2px solid black; border-radius: 50%;
    width: 40px; height: 40px; top: 50%; transform: translateY(-50%);
    transition: background-color 0.3s ease;
    --swiper-navigation-size: 20px;
}
.product-gallery .swiper-button-prev:hover,
.product-gallery .swiper-button-next:hover { background-color: rgba(255, 232, 69, 1); }
.product-gallery .swiper-button-prev { left: 15px; }
.product-gallery .swiper-button-next { right: 15px; }
.product-gallery .swiper-pagination-bullet-active { background: black; }

/* Placeholder si pas d'image galerie */
.no-image-placeholder {
    aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center;
    background-color: #f0f0f0; color: #888; border: 3px solid black; min-height: 300px;
}

/* Styles contenu texte single.php */
.product-content .entry-header .entry-title { margin-bottom: 0.5rem; }
.product-content .entry-meta { margin-bottom: 1.5rem; font-size: 0.9em; color: #555; }
.product-content .entry-meta .cat-links a { color: inherit; text-decoration: none; border-bottom: 1px dotted; }
.product-content .entry-meta .cat-links a:hover { text-decoration: none; border-bottom: 1px solid; }
.product-content .entry-content h1, .product-content .entry-content h2, .product-content .entry-content h3 { margin-top: 1.5em; margin-bottom: 0.6em; font-weight: bold; line-height: 1.3; }
.product-content .entry-content h1 { font-size: 2em; } .product-content .entry-content h2 { font-size: 1.75em; } .product-content .entry-content h3 { font-size: 1.5em; }
.product-content .entry-content p { margin-bottom: 1.2em; line-height: 1.7; }
.product-content .entry-content ul, .product-content .entry-content ol { margin-bottom: 1.2em; margin-left: 1.5em; }
.product-content .entry-content li { margin-bottom: 0.5em; }
.product-content .entry-content a { color: #000; text-decoration: underline; }
.product-content .entry-content a:hover { text-decoration: none; }
.product-content .prose { max-width: none; } /* Annule max-width de Tailwind prose */

/* Zone de commentaires sous les colonnes */
.comments-area {
    margin-top: 3rem; /* Espace après les colonnes */
    padding-top: 2rem;
    border-top: 3px solid black;
}


/* ==========================================================================
   Styles pour les Pages Statiques (page.php)
   ========================================================================== */
.page-container {
     /* Ex: Limiter largeur pour pages standard */
     max-width: 800px; /* Ajustez cette valeur */
     margin: 2rem auto; /* Centre et ajoute marge verticale */
}

.page .entry-header {
    border-bottom: 2px solid black;
    padding-bottom: 1rem;
    margin-bottom: 2rem; /* Espace après l'en-tête */
}

.page .entry-title {
    /* Styles titre page */
}

.page .page-thumbnail img {
    max-width: 100%; height: auto; margin: 0 auto 2rem auto; display: block;
}

.page .entry-content {
    /* Styles contenu page */
}
/* Réutiliser les styles .entry-content de single.php si possible ou ajouter des spécifiques */
/* .page .entry-content p { ... } */


/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { /* Utilise #colophon généré par WP */
    background-color: #ffe845; color: black;
    padding: 2rem 1rem; text-align: center;
    width: 100%; border-top: 3px solid black;
    margin-top: auto; /* Pousse en bas */
}

.footer-content {
    display: flex; justify-content: space-around; flex-wrap: wrap;
    max-width: 1200px; margin: 0 auto; text-align: left;
}

.footer-section {
    margin: 1rem; min-width: 200px; flex-basis: 300px; flex-grow: 1;
}
.footer-section ul { list-style: none; padding: 0; margin: 0; }
.footer-section ul li { margin-bottom: 0.5em; }
.footer-section ul li a { color: inherit; text-decoration: none; }
.footer-section ul li a:hover { color: #000; text-decoration: underline; }

.footer-section h3 {
    border-bottom: 1px solid black; padding-bottom: 0.5rem; margin-bottom: 1rem;
    font-weight: bold; font-size: 1.1rem;
}

.social-icons {
    display: flex; justify-content: flex-start; gap: 1rem; margin-top: 1rem;
}
.social-icons a { color: black; font-size: 1.5rem; transition: all 0.3s ease; }
.social-icons a:hover { color: #000; transform: scale(1.2); }

.copyright { /* Utilise .site-info généré par WP */
    margin-top: 2rem; padding-top: 1rem; border-top: 1px solid black;
    text-align: center; font-size: 0.9rem; color: #333;
}
.site-info a { color: #000; font-weight: bold; text-decoration: none; }
.site-info a:hover { text-decoration: underline; }

/* ==========================================================================
   Utilitaires WordPress
   ========================================================================== */
.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;
}

/* Alignements Gutenberg (optionnel) */
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignwide { margin-left: -100px; margin-right: -100px; max-width: calc(100% + 200px); width: calc(100% + 200px); } /* Ajustez */

/* Styles Commentaires (basiques) */
.comments-area { /* Styles pour la section commentaires globale */
    margin-top: 3rem; padding-top: 2rem; border-top: 3px solid black;
}
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem 0; }
.comment-list li { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #eee; }
.comment-list li:last-child { border-bottom: none; }
.comment-author .avatar { float: left; margin: 0 10px 5px 0; border-radius: 50%; }
.comment-meta { font-size: 0.9em; color: #666; margin-bottom: 0.5rem; display: block; }
.comment-meta a { color: #333; text-decoration: none; }
.comment-meta a:hover { text-decoration: underline; }
.comment-content { clear: both; padding-top: 0.5rem; }
.comment-content p { margin-bottom: 1em; }
.reply a { font-size: 0.9em; font-weight: bold; text-decoration: none; color: #000; border-bottom: 1px dotted; }
.reply a:hover { text-decoration: underline; border-bottom: none; }
#respond { margin-top: 2rem; }
#respond h3 { margin-bottom: 1rem; font-size: 1.3rem; }
/* Ajoutez plus de styles pour le formulaire si besoin */