/*
Theme Name: Agence Anthalia Theme
Theme URI: http://www.agenceanthalia.com
Author: Votre Nom / Agence Anthalia
Author URI: http://www.agenceanthalia.com
Description: Thème WordPress sur mesure pour l'agence immobilière de luxe Agence Anthalia à Cannes.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agence-anthalia
Tags: custom-background, custom-header, custom-menu, featured-images, flexible-header, full-width-template, light, one-column, responsive-layout, rtl-language-support, sticky-post, theme-options, translation-ready

Ce fichier est le fichier de style principal pour le thème Agence Anthalia.
Il contient les informations de base du thème requises par WordPress.
Les styles Tailwind CSS sont chargés via CDN dans header.php.
*/

/* Définition des couleurs personnalisées Tailwind pour une meilleure gestion */
:root {
    --color-bleu-azur-profond: #0A2E59;
    --color-bleu-mediterranee-clair: #6BAEDC;
    --color-gris-galet-doux: #CCCCCC;
    --color-gris-galet-doux-doux: #F0F0F0;
    --color-or-rose: #BB7D7A;
}

/* Styles pour le carrousel (simplifié) - ajustements pour le défilement */
.carousel-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Pour un défilement fluide sur iOS */
    scrollbar-width: none; /* Masque la barre de défilement pour Firefox */
    -ms-overflow-style: none;  /* Masque la barre de défilement pour IE/Edge */
}

.carousel-container::-webkit-scrollbar {
    display: none; /* Masque la barre de défilement pour Chrome, Safari, Opera */
}

.carousel-item {
    flex: 0 0 100%; /* Chaque élément prend 100% de la largeur du conteneur */
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .carousel-item {
        flex: 0 0 50%; /* 2 éléments par ligne sur tablette */
    }
}

@media (min-width: 1024px) {
    .carousel-item {
        flex: 0 0 33.33%; /* 3 éléments par ligne sur desktop */
    }
}

/* Styles pour les formulaires */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    @apply p-3 rounded-md border border-bleu-mediterranee-clair focus:outline-none focus:ring-2 focus:ring-or-rose;
}

/* Styles pour les boutons principaux */
.btn-primary {
    @apply bg-bleu-azur-profond text-white font-montserrat font-semibold py-3 px-6 rounded-md transition-all duration-300 hover:bg-or-rose hover:shadow-lg;
}

.btn-secondary {
    @apply bg-bleu-mediterranee-clair text-white font-montserrat font-semibold py-3 px-6 rounded-md transition-all duration-300 hover:bg-bleu-azur-profond hover:shadow-lg;
}

.btn-outline-or-rose {
    @apply border-2 border-or-rose text-or-rose font-montserrat font-semibold py-3 px-6 rounded-md transition-all duration-300 hover:bg-or-rose hover:text-white;
}

/* Styles pour les cartes de biens */
.property-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105;
}

.property-card img {
    @apply w-full h-48 object-cover;
}

.property-card-content {
    @apply p-4;
}

.property-card-title {
    @apply font-montserrat text-lg font-semibold text-bleu-azur-profond mb-2;
}

.property-card-location {
    @apply font-open-sans text-sm text-gris-galet-doux mb-2;
}

.property-card-price {
    @apply font-montserrat text-xl font-bold text-or-rose mb-4;
}

.property-card-features {
    @apply flex items-center text-sm text-bleu-azur-profond mb-4;
}

.property-card-features i {
    @apply mr-2 text-bleu-mediterranee-clair;
}

/* Styles pour les sections de page */
.page-section {
    padding: 4rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Styles pour les liens de navigation */
.nav-link {
    @apply text-white uppercase font-montserrat font-semibold px-4 py-2 rounded-md transition-colors duration-300 hover:text-or-rose;
}

/* Styles généraux pour le corps */
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-bleu-azur-profond); /* Couleur de texte par défaut */
    background-color: #FFFFFF; /* Fond blanc par défaut */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Empêche le défilement horizontal */
}

/* Styles pour la superposition de la carte avec le cercle */
.map-container {
    position: relative;
    width: 100%;
    /* Ratio 16:9 pour l'iframe, ou ajustez selon vos besoins */
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (h/w = 9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
    border-radius: 0.5rem; /* rounded-lg de Tailwind */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none; /* Empêche toute interaction avec l'iframe */
}

/* Style du cercle modernisé */
.map-overlay-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%; /* Ajustez la taille du cercle */
    height: 60%; /* Doit être la même que la largeur pour un cercle parfait */
    border: 4px solid var(--color-or-rose); /* Couleur du cercle */
    border-radius: 50%;
    pointer-events: none; /* Permet d'interagir avec la carte en dessous */
    /* Suppression du box-shadow pour enlever le halo */
    /* box-shadow: 0 0 0 10px rgba(var(--color-or-rose-rgb), 0.2); */
}

/* Styles spécifiques pour Contact Form 7 */

/* Conteneur de chaque champ */
.form-group {
    margin-bottom: 1.5rem; /* Espace entre les groupes de champs */
}

/* Labels des champs */
.form-group label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Semi-bold */
    color: var(--color-bleu-azur-profond);
    margin-bottom: 0.5rem; /* Espace entre le label et l'input */
    font-size: 0.875rem; /* text-sm de Tailwind */
}

/* Champs de saisie (input, select, textarea) */
.form-control {
    width: 100%;
    padding: 0.75rem; /* p-3 de Tailwind */
    border-radius: 0.375rem; /* rounded-md de Tailwind */
    border: 1px solid var(--color-bleu-mediterranee-clair); /* border de Tailwind */
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: var(--color-bleu-azur-profond);
    transition: all 0.2s ease-in-out;
}

.form-control::placeholder {
    color: #a0aec0; /* Gris plus clair pour les placeholders */
    opacity: 1; /* Assure la visibilité du placeholder */
}

.form-control:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--color-or-rose-rgb), 0.5); /* ring-2 et ring-or-rose */
    border-color: var(--color-or-rose);
}

/* Le bouton d'envoi */
.wpcf7-submit {
    /* Utilise la classe btn-primary déjà définie dans votre style.css */
    /* Assurez-vous que cette classe applique bien les styles souhaités */
    width: 100%; /* Le bouton doit prendre toute la largeur */
    display: block; /* S'assurer qu'il est un bloc pour width: 100% */
    text-align: center; /* Centrer le texte si c'est un bloc */
}

/* Ajustements pour les messages de validation/erreur de CF7 */
div.wpcf7-response-output {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    text-align: center;
}

div.wpcf7-mail-sent-ok {
    background-color: #d4edda; /* Vert clair */
    border-color: #c3e6cb;
    color: #155724; /* Vert foncé */
}

div.wpcf7-mail-sent-ng {
    background-color: #f8d7da; /* Rouge clair */
    border-color: #f5c6cb;
    color: #721c24; /* Rouge foncé */
}

div.wpcf7-validation-errors {
    background-color: #fff3cd; /* Jaune clair */
    border-color: #ffeeba;
    color: #856404; /* Jaune foncé */
}

span.wpcf7-not-valid-tip {
    color: #dc3545; /* Rouge pour les erreurs sous les champs */
    font-size: 0.75rem;
    display: block;
    margin-top: 0.25rem;
}

.wpcf7-list-item-label {
    font-family: 'Open Sans', sans-serif; /* Pour les checkboxes/radios si vous en ajoutez */
    color: var(--color-bleu-azur-profond);
}

/* Assurez-vous que votre bouton btn-primary a un 'display: block;' ou 'width: 100%;' si vous le voulez plein largeur */
.btn-primary {
    display: block; /* Ajouté pour s'assurer que le bouton prend toute la largeur */
}
.property-card .property-img-box{
    height: 233px;
    width: 375px;
}
.property-card .property-img-box img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/* Dans style.css, sous la section "Styles généraux pour le corps" ou "Styles spécifiques pour Contact Form 7" */

.content-area p {
    margin-bottom: 1em; /* Espace entre les paragraphes */
}

.content-area ul,
.content-area ol {
    margin-left: 1.5rem; /* Indentation pour les listes */
    margin-bottom: 1em;
}

.content-area li {
    margin-bottom: 0.5em; /* Espace entre les éléments de liste */
}

.content-area h2,
.content-area h3,
.content-area h4 {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-bleu-azur-profond);
    margin-top: 2em; /* Espace au-dessus des sous-titres */
    margin-bottom: 1em;
}

.content-area h2 { font-size: 1.75rem; font-weight: 700; } /* text-3xl, font-bold */
.content-area h3 { font-size: 1.5rem; font-weight: 600; }  /* text-2xl, font-semibold */
/* etc. pour les autres niveaux de titres si vous les utilisez dans le contenu */