/* Styles pour l'effet flouté */
.blurry-text {
    filter: blur(4px); /* Rend le texte flou */
    cursor: default;
    user-select: none;
    display: inline-block;
    padding: 2px 5px;
    background-color: #eee;
}

/* Styles pour la Modale (Pop-up) */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
    padding: 5px;
}

.close-btn:hover,
.close-btn:focus {
    color: #333;
    text-decoration: none;
}

/* 1. Conteneur principal : Empiler verticalement et centrer horizontalement */
/* On utilise un sélecteur plus spécifique pour garantir la priorité */
#club-results-container #freedive-search-form {
    /* Utilisation de Flexbox pour le centrage */
    display: flex;
    /* Force l'empilement vertical (input, puis button-group, puis p) */
    flex-direction: column; 
    /* Centre chaque élément (input et button-group) horizontalement */
    align-items: center; 
    /* Espace vertical entre les lignes */
    gap: 15px; 
    padding: 15px 0; 
}

/* 2. Barre de recherche : Définir la largeur et le comportement */
#club-results-container #freedive-search-form #search-address {
    /* Limite la taille pour ne pas être trop longue */
    max-width: 400px; 
    /* Force la barre à prendre 100% de la largeur du conteneur parent (limité à 400px) */
    width: 100%; 
    padding: 10px;
    box-sizing: border-box; 
    /* Assure que la barre est traitée comme un bloc si jamais le Flexbox échoue */
    display: block; 
}

/* 3. Groupe de boutons : Centrer et espacer entre eux */
#club-results-container .button-group {
    display: flex;
    gap: 10px; /* Espace entre les deux boutons */
}

/* 4. Message d'état : Centré sous les éléments */
#club-results-container #search-status {
    max-width: 400px; 
    text-align: center;
}


/*TABLEAU ////////////////////////////////////////////*/
.scroll-hint-mobile {
    display: none;
    text-align: center;
    font-style: italic;
    padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
    /* Affiche l'indication textuelle sur mobile */
    .scroll-hint-mobile {
        display: block;
        font-size: 20px;
        color: #ff0000;
    }
}

/* Règle pour le conteneur de défilement des résultats de clubs */
.club-results-scroll-wrap {
    overflow-x: auto; /* Active la barre de défilement horizontale si le contenu déborde */
    -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */
    margin-top: 15px; /* Optionnel : Ajoute un peu d'espace au-dessus */
    position: relative; 
    overflow-x: auto; 
}

/* Optionnel : Assure que le tableau a une largeur minimale pour forcer le défilement */
.club-results-scroll-wrap .club-results-table {
    min-width: 650px; /* Ajustez cette valeur si nécessaire pour bien voir toutes les colonnes */
    border-collapse: collapse;
}

/*FORMULAIRE DE CAPTURE ////////////////////////////////////////////*/
/* 1. Conteneur du formulaire de capture : Centrage global */
.lead-capture-form-container {
    /* Assurez que le formulaire n'est pas trop large s'il est un bloc */
    max-width: 500px; /* Largeur max pour la modale elle-même (ajustez si besoin) */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Centrer le texte dans le conteneur principal (titres et paragraphes) */
}


/* 2. Titres et paragraphes (pour être sûrs qu'ils ne débordent pas) */
#lead-capture-section h4,
#lead-capture-section p {
    /* Hérite de text-align: center du conteneur parent */
    max-width: 450px; /* Laissez-les un peu plus larges que les inputs (350px) */
    margin-left: auto;
    margin-right: auto;
}

/* 3. Cible les champs INPUT et le bouton (reprise des règles précédentes pour référence) */
#lead-capture-form input[type="text"],
#lead-capture-form input[type="email"],
#lead-capture-form button[type="submit"] {
    max-width: 550px; 
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px; 
    box-sizing: border-box; 
    display: block; 
}

/* 4. Centrage du Bloc de Consentement (La Case à Cocher) */
.consent-check {
    display: flex; /* Utilise Flexbox pour l'alignement interne */
    align-items: center; /* Aligne la case et le texte verticalement */
    max-width: 350px; /* Limite la largeur du bloc à celle des inputs */
    margin-left: auto; /* Centre le bloc entier */
    margin-right: auto;
    margin-bottom: 20px;
    padding: 5px 0;
    color: rgba(255, 255, 255, 0.7);
}

/* 5. Ajustement de la case à cocher pour l'espace */
.consent-check input[type="checkbox"] {
    margin-right: 10px; /* Ajoute un espace entre la case et le label */
    /* Assure que la case elle-même ne subit pas de max-width intempestif */
    max-width: none; 
    width: auto;
    display: inline-block;
}

/* 6. Ajustement du label pour le texte */
.consent-check label {
    text-align: left; /* Assure que le texte du label ne soit pas coupé ou centré bizarrement */
}

#lead-capture-form label[for="consent-form"] {
    /* Définit la couleur du texte en blanc */
    color: rgba(255, 255, 255, 0.7);
}