/* DEBUT - Bloc Filtres (cibler un arrondissement, cibler un quartier) et ajouter une adresse */
.wpe-search-container {
    background-color: #f8f9fa;
    padding: 20px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    font-family: 'Nunito', sans-serif; 
}

.wpe-search-content {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 1140px;
    padding: 0 20px;
    box-sizing: border-box;
}

.wpe-left-panel {
    display: grid;
    grid-template-columns: max-content 220px;
    row-gap: 25px;
    column-gap: 15px;
    align-items: left;
}

.wpe-left-panel label,
.wpe-right-panel label {
    color: #4a5568 !important;
    font-size: 12px !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    line-height:1.4em;
    vertical-align: middle;
}

.wpe-select-wrapper {
    position: relative;
    cursor: pointer;
    margin-top: -0.8em;
}

.wpe-select-wrapper select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    background-color: #ffffff !important;
    color: #4a5568;
    font-size: 12px;
    font-family: 'Nunito', sans-serif;
    pointer-events: none; 
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    opacity: 1 !important; 
}

.wpe-select-wrapper::after {
    content: '▼';
    font-size: 10px;
    color: #a0aec0;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.wpe-vertical-divider {
    width: 1px;
    background-color: #cbd5e0;
    height: 60px;
}

.wpe-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wpe-input-wrapper {
    cursor: pointer;
    width: 100%;
}

.wpe-input-wrapper input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e0 !important;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Nunito', sans-serif;
    color: #4a5568 !important;
    box-sizing: border-box;
    
    /* Maintient le fond blanc forcé précédemment */
    background-color: #ffffff !important; 
    opacity: 1 !important; 
    
    pointer-events: none;
}

/* Ciblage ultra-spécifique du placeholder pour forcer les 12px Nunito */
.wpe-input-wrapper input[type="text"]::placeholder {
    font-size: 12px !important; /* Force la taille à 12px */
    font-family: 'Nunito', sans-serif !important; /* Force la police */
    color: #a0aec0 !important;
    opacity: 1 !important;
}

/* Par sécurité, cible aussi les prefixes spécifiques à certains navigateurs */
.wpe-input-wrapper input[type="text"]::-webkit-input-placeholder {
    font-size: 12px !important;
}
.wpe-input-wrapper input[type="text"]::-moz-placeholder {
    font-size: 12px !important;
}
.wpe-input-wrapper input[type="text"]:-ms-input-placeholder {
    font-size: 12px !important;
}
/* On cible les écrans mobiles */
@media (max-width: 768px) {
    /* 1. Le conteneur principal (gris) prend toute la largeur de l'écran */
    .wpe-search-container {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 2. NOUVEAU : On empile les deux grands panneaux (Arrondissements ET Adresse) verticalement */
    .wpe-search-content {
        display: flex;
        flex-direction: column;
    }

    /* 3. On transforme les panneaux en colonnes flexibles pleine largeur */
    .wpe-left-panel, 
    .wpe-right-panel {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .wpe-left-panel {
        align-items: left;
    }

    /* 4. On s'assure que les labels prennent 100% de la largeur disponible */
    .wpe-left-panel label, 
    .wpe-right-panel label {
        display: block;
        margin-bottom: 5px; /* Petit espace entre le label et l'input */
    }

    /* 5. On ajoute un peu d'espace entre chaque groupe pour aérer la vue mobile */
    .wpe-select-wrapper, 
    .wpe-input-wrapper {
        margin-bottom: 15px;
        width: 100%;
    }

    /* NOUVEAU : Force les champs internes à bien s'étirer jusqu'au bout de leur wrapper */
    .wpe-select-wrapper select, 
    .wpe-input-wrapper input {
        width: 100%;
        box-sizing: border-box;
    }

    /* 6. Masquer le séparateur vertical sur mobile */
    .wpe-vertical-divider {
        display: none; 
    }
}
/* --- Responsive Mobile pour le conteneur de recherche --- */
@media (max-width: 768px) {
    
    /* 1. La div grise prend toute la largeur */
    .wpe-search-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. On empile les éléments verticalement (Arrondissements puis Adresse) */
    .wpe-search-content {
        display: flex;
        flex-direction: column !important;
        gap: 15px; /* Crée un bel espace entre le select quartier et l'input adresse */
    }

    /* 3. Les panneaux internes s'étirent sur toute la largeur de l'écran */
    .wpe-left-panel, 
    .wpe-right-panel {
        width: 100% !important;
    }

    /* (Optionnel) Assure que les champs prennent aussi 100% */
    .wpe-left-panel select, 
    .wpe-right-panel input {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 4. On cache la ligne de séparation verticale qui n'a plus de sens sur mobile */
    .wpe-vertical-divider {
        display: none !important;
    }
}
/* FIN - Bloc Filtres (cibler un arrondissement, cibler un quartier) et ajouter une adresse */

/* Animation fluide et continue de la baguette magique */
@keyframes umWandWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    50% { transform: rotate(20deg); }
    75% { transform: rotate(-10deg); }
}

.um-magic-wand-anim {
    animation: umWandWiggle 2s ease-in-out infinite;
    transform-origin: bottom left;
}

/* Le conteneur du texte */
.um-magic-caption-wrapper {
    display: flex;
    justify-content: center;     /* Centrage horizontal */
    align-items: center;         /* Centrage vertical de l'icône et du texte */
    gap: 8px;
    height: 0;                   /* Hauteur zéro pour ne rien repousser */
    overflow: visible;
    opacity: 0;
    transform: translateY(-5px); /* Position masquée de départ */
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: #64748b;
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    cursor: pointer;
    pointer-events: none;        /* Inactif quand invisible */
    position: relative;
    z-index: 10;
}

/* Le bloc de contenu interne qui reçoit le fond blanc */
.um-magic-caption-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.9); /* Fond blanc semi-transparent */
    padding: 4px 10px;                          /* Espacement interne autour du texte */
    border-radius: 20px;                        /* Bords bien arrondis style "pilule" */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);  /* Ombre très légère pour décoller du graphique */
    border: 1px solid rgba(226, 232, 240, 0.8); /* Bordure subtile grise */
}

/* État visible */
.um-magic-caption-wrapper.is-visible {
    opacity: 1;
    transform: translateY(-15px); /* Remontée de 15px */
    pointer-events: auto;        /* Redevient cliquable */
}

/* Soulignement et assombrissement au survol de la légende */
.um-magic-caption-wrapper:hover span {
    text-decoration: underline;
    color: #1e293b;
}

/* Légère accentuation du fond blanc au survol */
.um-magic-caption-wrapper:hover .um-magic-caption-box {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* La légende sous la photo (alignée à droite, masquée par défaut) */
.um-magic-caption {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: #64748b;
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.um-magic-caption svg {
    width: 14px;
    height: 14px;
    color: #EA5863;
}

/* Apparition au survol de l'image, du conteneur, OU de la légende elle-même */
.magic-freemium:hover + .um-magic-caption,
.magic-freemium:hover .um-magic-caption,
.um-magic-caption:hover {
    opacity: 1;
    transform: translateY(0);
}

/* Soulignement au survol */
.um-magic-caption:hover span {
    text-decoration: underline;
    color: #1e293b;
}

/* DEBUT mode plein écran images */
/* ==========================================================================
   MODE PLEIN ÉCRAN (ICÔNE ET MODALE)
   ========================================================================== */

/* L'icône plein écran (en bas à droite de l'image) */
.um-fullscreen-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: rgba(30, 41, 59, 0.7); /* Fond sombre semi-transparent */
    color: white;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.um-fullscreen-icon:hover {
    background-color: rgba(30, 41, 59, 1);
    transform: scale(1);
}

/* Apparition de l'icône au survol de l'image ou de son conteneur */
.magic-freemium:hover .um-fullscreen-icon,
.magic-freemium-img-container:hover .um-fullscreen-icon,
a:hover > .um-fullscreen-icon {
    opacity: 1;
    transform: scale(1);
}

/* La Modale Plein Écran */
.um-fullscreen-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 999999; /* Par-dessus le header Elementor */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.um-fullscreen-modal.is-active {
    display: flex;
    opacity: 1;
}

/* L'image dans la modale */
.um-fullscreen-modal img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain; /* Garde les proportions sans couper l'image */
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}

/* Le bouton Fermer (Croix) */
.um-fullscreen-close {
    position: absolute;
    top: 25px;
    right: 35px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 40px;
    font-family: sans-serif;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
    z-index: 10;
}

.um-fullscreen-close:hover {
    color: #EA5863; /* Ta couleur rouge d'accentuation */
}
/* FIN mode plein écran images */