/*==============================================================
1. Configuration Root (Variables globales)
 =============================================================*/

:root {
    --primary-color: #0092b3;       /* Bleu principal */
    --primary-hover: #026d85;
    --white: #ffffff;               /* Fond des cartes */    
    --white2: #f7fafc;              /* Fond général */
    --white3: #e2e8f0; 
    --grey1: #cbd5e0; 
    --grey2: #a0aec0;
    --grey3: #718096;          /* Texte secondaire */     
    --grey4: #2d3748;          /* Texte principal */
    --color-ot1:#D5DA31;
    --color-ot2:#8DC048;
    --color-ot3:#00974A;
    --color-ot4:#0092B3;
    --color-ot5:#0E0F0E;
    --radius: 8px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/*====================================================
2. Reset Scoped (Localisé)
 ======================================================*/
/* On cible uniquement ton composant et la modale */
.cc4v-wrap, 
.cc4v-modal-box {
    box-sizing: border-box;
}

.cc4v-wrap * , 
.cc4v-modal-box * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit; /* Hérite de la police du site */
}

/* Nettoyage des styles par défaut des éléments HTML */
.cc4v-wrap ul, .cc4v-modal-box ul {
    list-style: none;
}

.cc4v-wrap a, .cc4v-modal-box a {
    text-decoration: none;
    color: inherit;
}

/* réintroduit un espacement minimal et propre uniquement là où on le veut */
.cc4v-wrap p, .cc4v-modal-box p,
.cc4v-wrap h2, .cc4v-modal-box h2,
.cc4v-wrap h3, .cc4v-modal-box h3 {
    margin-bottom: 1rem; /* gère l'espacement en dessous*/
    line-height: 1.5;
}

/*====================================================================================
  RESET STRICT DU BOUTON POPUP (ANTI-INTERFÉRENCE THÈME WP)
=======================================================================================*/
button.view-detail-btn,
.map-popup-layout .view-detail-btn {
    /* Écrasement des dimensions forcées par le thème */
    display: inline-block !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px 12px !important; /* Taille propre et fixe */
    margin-top: 8px !important;
    
    /* Typographie et alignement */
    font-size: 0.85em !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    
    /* Couleurs d'origine (Bleu Bootstrap standard ou à adapter selon tes besoins) */
    background: #007bff !important;
    color: #ffffff !important;
    
    /* Bordures et arrondis */
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    
    /* Comportement */
    cursor: pointer !important;
    transition: background 0.2s ease-in-out !important;
    transform: none !important; /* Bloque les effets de zoom/déplacement du thème */
}

/* Blocage complet du hover jaune et des déformations du thème */
button.view-detail-btn:hover,
.map-popup-layout .view-detail-btn:hover {
    background: #0056b3 !important; /* Un bleu plus foncé propre pour le survol */
    color: #ffffff !important;
    
    /* Sécurité contre les changements de taille au survol */
    padding: 6px 12px !important; 
    font-size: 0.85em !important;
    transform: none !important; 
    outline: none !important;
}

/* Sécurité en cas de focus/active */
button.view-detail-btn:focus,
button.view-detail-btn:active {
    background: #0056b3 !important;
    transform: none !important;
    box-shadow: none !important;
}
/*====================================================================================
  MODIFICATION DE LA TAILLE DU TEXTE SELECT2
=======================================================================================*/

/* 1. Modifie la taille du texte de l'élément sélectionné (le bouton visible) */
.select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 0.9rem !important; /* Ajuste la valeur ici (ex: 14px, 0.85rem...) */
}

/* 2. Modifie la taille du texte de toutes les options dans la liste déroulante */
.select2-container .select2-results__option {
    font-size: 0.9rem !important; /* Ajuste la valeur ici pour l'aligner sur le bouton */
}
/*====================================================================================
  RESET STRICT DES OPTIONS SELECT2 (ANTI-HOVER JAUNE WORDPRESS)
=======================================================================================*/

/* 1. L'option survolée ou mise en avant (highlighted) */
.select2-container--default .select2-results__option--selectable.select2-results__option--highlighted,
li.select2-results__option--highlighted[aria-selected],
li.select2-results__option--highlighted {
    background-color: var(--primary-color) !important; /* On utilise ton bleu */
    color: var(--white) !important;                    /* Texte blanc */
    transform: none !important;
    transition: none !important;
}

/* 2. L'option qui est actuellement sélectionnée ET survolée */
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
li.select2-results__option--selected.select2-results__option--highlighted {
    background-color: var(--primary-hover) !important; /* Bleu survol plus foncé */
    color: var(--white) !important;
    transform: none !important;
}

/* 3. L'option sélectionnée au repos (dans la liste déroulante) */
.select2-container--default .select2-results__option[aria-selected="true"],
li.select2-results__option--selected {
    background-color: var(--white3) !important;       /* Ton gris clair de fond */
    color: var(--grey4) !important;                   /* Ton texte principal */
}

/* 4. Sécurité pour le texte à l'intérieur des options au survol */
li.select2-results__option--highlighted * {
    color: var(--white) !important;
}


/*==========================================================
3. Base & Layout Mobile-First
============================================================*/
.cc4v-wrap {
    font-family: sans-serif;
    color: var(--grey4);
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

/*============================================================
4. --- Filtres ---
==============================================================*/
.cc4v-filters {
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap; /* Sécurité si beaucoup de filtres */
    gap: 8px; /* Espace entre les éléments */
    background: var(--white2);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--white3);
}

/* Style des groupes de filtres */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    max-height: 100px; /* Scrollable si beaucoup de catégories */
    overflow-y: auto;
    background: white;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Forcer le rendu propre des inputs et selects contre les thèmes WP tout en gardant tes variables */
.cc4v-filters input.cc4v-search-input,
.cc4v-filters select.cc4v-commune-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important; /* Supprime le style natif forcé par WP */
    background-color: #ffffff !important;
    border: 1px solid var(--grey2) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    height: 42px !important; /* Force une hauteur harmonieuse */
    font-size: 0.9rem !important;
    color: var(--grey4) !important;
    box-shadow: none !important;
    min-width: 300px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Redonner du style au focus */
.cc4v-filters input.cc4v-search-input:focus,
.cc4v-filters select.cc4v-commune-select:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 146, 179, 0.15) !important;
}

/* Flèche personnalisée pour le select (car appearance:none retire la flèche native) */
.cc4v-filters select.cc4v-commune-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.1em !important;
    padding-right: 2.5rem !important;
}

.cc4v-search-input {
    flex: 0;
    max-width: 250px;
}

.cc4v-commune-select {
    flex: 0;
    max-width: 250px;
}

.cc4v-checkbox-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.cc4v-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    background: #f5f5f5;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}

.cc4v-checkbox-label:hover {
    background: #ebebeb;
}

/* Style optionnel si la case est cochée pour la mettre en valeur */
.cc4v-checkbox-label:has(input:checked) {
    background: #e3f2fd;
    border-color: #2196f3;
    color: #0d47a1;
}

.cc4v-checkbox-label input {
    cursor: pointer;
}

/* Conteneur du groupe filtre */
.cc4v-filter-group {
    position: relative;
    display: inline-block;
}

.filter-popup {
    display: none;    
    /* Centrage mobile (Fixed) */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    
    width: 90vw;
    max-width: 400px;
    background: white;
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--white3);
}

.filter-popup.is-open {
    display: block;
}
/* Header de la popup */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 0.9em;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    color: var(--grey3);
}

.close-btn:hover {
    color: var(--grey4);
}

/* Bouton Reset - Mobile First */
.cc4v-reset-btn {
    background: var(--white);
    border: 1px solid var(--white3);
    border-radius: var(--radius);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--primary-color);
}

.cc4v-reset-btn:hover {
    background: var(--white3);
}
/*==================================================================
5. Composants et Cards (DESIGN CORRIGÉ)
==================================================================*/
#cc4v-main-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.3s ease;
}

.cc4v-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.cc4v-card {
    background: var(--white);
    border: 1px solid var(--white3);
    border-radius: var(--radius);
    overflow: hidden; /* Important pour arrondir l'image en haut */
    box-shadow: var(--shadow);
    transition: transform 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.cc4v-card:hover {
    transform: translateY(-5px);
}

/* Container Image + Overlay */
.card-image-wrapper {
    position: relative;
    height: 180px;
    background: var(--grey2);
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay Dates/Prix */
.card-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.tag {
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Contenu Texte */
.card-content {
    padding: 12px;
}

.card-title {
    margin: 10px 10px 0 10px;
    color: var(--primary-color); /* Titre coloré */
    font-size: 1.1rem;
    line-height: 1.3;
    min-height: 3em; /* Assure une hauteur minimale pour les titres courts */
    text-align: center;
}

.card-location {
    margin: auto;
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 0.9rem;
    color: var(--grey3);
    display: flex;
    align-items: center;
}

/*====================================================================================
6. Logique d'affichage (Toggle Map)
=======================================================================================*/
.cc4v-toggle-map {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espace entre l'icône et le texte */
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px;
    color: var(--primary-color);
}

.icon-inline {
    width: 18px;    /* Un peu plus petit que 20px pour mieux s'intégrer */
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0; /* Empêche l'icône de s'écraser si le texte est long */
    vertical-align: middle;
}

.cc4v-toggle-map:hover {
    color: #2d3748; /* Assombrir au survol */
}

.map-hidden #agenda-map-container {
    display: none;
}

/* Supprimer le cadre noir par défaut au clic */
.cc4v-toggle-map:focus {
    outline: none;
    box-shadow: none;
}

/* Optionnel : Ajouter un effet visuel discret au clic (pour le côté "pro") */
.cc4v-toggle-map:active {
    transform: translateY(1px); /* Le bouton s'enfonce légèrement */
    opacity: 0.8; /* Le bouton devient un peu plus clair */
}

/*
Carte popups Leaflet - Nettoyage anti-interférence WP
*/
.leaflet-marker-icon {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Conteneur Flex pour aligner image (gauche) et texte (droite) */
.map-popup-layout {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    min-width: 250px; /* Assure une largeur minimale correcte */
}

/* Image à gauche : taille fixe */
.map-popup-layout .iG {
    flex: 0 0 90px; /* Largeur fixe de l'image */
}

.map-popup-layout .iG img {
    width: 90px;
    height: 90px;
    object-fit: cover; /* Recadre l'image proprement sans déformation */
    border-radius: 4px;
}

/* Contenu à droite : prend l'espace restant */
.map-popup-layout .content {
    flex: 1;
    min-width: 0; /* Important pour éviter que le texte ne déborde */
}

/* Style rapide pour le bouton */
.view-detail-btn {
    cursor: pointer;
    background: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
}

/*==================================================================================
7. Modale
====================================================================================*/
.cc4v-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important; /* Ajouté pour garantir que l'overlay couvre l'écran */
    width: 100% !important;       
    height: 100% !important;
    background: rgba(0,0,0,0.6) !important; /* TON contour noir transparent préservé */
    display: none;     /* Sera activé en 'flex' par le JS */
    
    /* Changement technique : Aligne TA boîte à droite sur grand écran, annule le centrage WP */
    justify-content: flex-end !important; 
    align-items: center !important;     
    z-index: 9999 !important; 
    margin: 0 !important;         
    transform: none !important;
}

/* Bouton de fermeture Sticky (Mobile First par défaut) */
.cc4v-modal-close-sticky {
    position: fixed !important;   /* Reste collé à la fenêtre */
    top: 15px !important;
    right: 15px !important;
    z-index: 10000 !important;    /* Assure qu'il est au-dessus de tout */
    
    /* Design */
    background: rgba(0, 0, 0, 0.6) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 44px !important;       /* Taille idéale pour le tactile */
    height: 44px !important;
    font-size: 24px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    
    /* Centrage de la croix */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s !important;
}

.cc4v-modal-close-sticky:hover {
    background: rgba(0, 0, 0, 0.9) !important;
}

.cc4v-modal-box {
    background: var(--white) !important;
    padding: 20px !important;
    border-radius: var(--radius) !important;
    width: 90% !important;
    max-height: 90% !important;
    overflow-y: auto !important;
    max-width: 700px !important;
    margin: 1rem !important;
    margin-top: 60px !important; /* Ajoute un peu d'espace en haut pour le bouton */
    
    /* Sécurité anti-centrage absolu des thèmes WP */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Navigation interne de la modale */
.modal-nav {
    position: sticky;
    bottom: 0;                /* Fixée en bas */
    background: white;        /* Fond blanc pour masquer le texte derrière */
    padding: 15px 0 5px 0;    /* Un peu plus d'espace en haut */
    border-top: 1px solid var(--grey1); /* Bordure en haut maintenant */
    border-bottom: none;      /* Suppression de la bordure du bas */
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 999;
    margin-top: 20px;         /* Espacement avec le contenu précédent */
}

.modal-nav a {
    font-size: 0.85rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    padding: 5px 10px;
    border: 1px solid var(--primary-color);
    border-radius: 20px;
}

.modal-nav a:hover {
    background: var(--primary-color);
    color: white;
}

/* Séparateurs entre sections */
.modal-section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--white3);
}

/* Bloc coloré pour Contact + Localisation */
.modal-highlight-box {
    background: var(--color-ot1) !important; /* Ton fond jaune d'origine préservé */
    padding: 15px;
    border-radius: var(--radius);
    border: 1px solid var(--white3);
}


/* Classes pour la modale */
.modal-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.cc4v-modal-box h3 {
    font-size: 0.9em;
    margin-top: 0;
    color: var(--color-ot4);
    text-transform: uppercase;
    text-align: center;
}

.cc4v-modal-box h2 {
    margin-top: 15px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}

.modal-section p, .modal-section ul, .modal-highlight-box p {
    font-size: 0.75em;
    line-height: 1.5;
    color: var(--grey4);
}

.modal-credit {
    font-size: 0.4em;
    color: var(--grey3);
    margin-top: 10px;
    margin-bottom: 15px;
}

.dates-horaires-box {
    margin: 10px 0;
    padding: 10px;
    background: var(--white3);
    border-radius: 5px;
}

.modal-map {
    height: 250px; 
    width: 100%; 
    margin-top: 20px;
    z-index: 50; /* Assure que la carte est derrière les autres éléments de la modale */
}

/* Container des badges en haut de la modale */
.modal-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.modal-badge i {
    width: 14px;
    height: 14px;
}

.modal-badge.badge-stars {
    background-color: #fef9c3;
    color: #854d0e;
}

/* Grille Équipements & Services */
.modal-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.feature-col h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #1e293b;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 4px;
}

.feature-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-col ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.4;
}

.feature-col ul li i {
    margin-top: 3px;
    flex-shrink: 0;
}

/* Correction icône Lucide inline */
.icon-inline.current-color {
    color: currentColor;
    width: 16px;
    height: 16px;
}


/*=====================================================================
8. Responsive : Desktop (> 768px)
=======================================================================*/
@media (min-width: 768px) {
    
    #cc4v-main-layout {
        flex-direction: row;
        align-items: flex-start;
    }
    

    /* On utilise la classe .cc4v-grid au lieu de l'ID #agenda-grid */
    .cc4v-grid {
        flex: 2;
        display: grid; /* On garde grid */
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes par défaut sur desktop */
    }

    /* Tu dois ajouter cette classe sur tes conteneurs de carte dans le PHP */
    .cc4v-map-container {
        flex: 1;
        position: sticky;
        top: 20px;
        height: 80vh;
        display: block !important; /* Force l'affichage si caché par défaut */
    }

    .cc4v-filters {
        align-items: flex-end;
        flex-wrap: nowrap;
    }

    .filter-popup {
        position: absolute;
        top: 100%;
        left: 0;
        transform: none;
        width: 300px;
        margin-top: 8px;
    }
    .cc4v-reset-btn {
        margin-left: auto;
    }

    /* Changement technique : Plaque l'overlay et transforme ta boîte en panneau droit sur grand écran */
    .cc4v-modal-overlay {
        justify-content: flex-end !important;
        align-items: stretch !important;
    }

    .cc4v-modal-box {
        height: 100vh !important;
        max-height: 100vh !important;
        width: 500px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

@media (min-width: 1024px) {
    .cc4v-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur grand écran */
    }
}