/*****
 * Fichier : custom-style-adr.css
 * Description : Styles spécifiques pour la gestion de la recherche d'adresses.
 *
 * Couleurs :
 * 
 *	#d9d4b7 : Couleur Principale boutons RGB - 217,212,183 (Couleur beige principale du thème) -- color000
 *	#d9d4b7 : Texte Couleur Principale RGB - 217,212,183 (Couleur beige principale du thème) --color016
 *	#efeae6 : Couleur secondaire RGB - 239,234,230 (gris rose) --color007
 *	#ffffff : Fond d'écran RGB - 255,255,255 (Blanc) --color001 
 *	#ffffff : Menu RGB - 255,255,255 (Blanc) --color002 
 *	#5f6368 : Texte Menu RGB - 255,255,255 (Gris clair) --color003
 *	#f5f5f7 : Pied de Page RGB - 245,245,247 (Gris trés clair) --color013
 *	#000000 : Texte indication page RGB - 0,0,0 (Noir) --color008
 *	#000000 : Texte Pied de Page - 0,0,0 (Noir) --color015
 *	#000000 : Ligne de séparation - 0,0,0 (Noir) --color005
 *  #000000 : Entourage Shadow - rgba(0,0,0,0.1) --color011
 *	#e0e0e0 : Desected Item RGB - 224,224,224 (Gris clair)
 *
 * 
 *
 * Auteur : Forme Carrée
 * Dernière modification : 2025-04-11
 *****/
 
 
 
  
/*******************************************************/
/*            Les STYLES Surchargés du CMS             */
/*******************************************************/



 
/*******************************************************/
/*          Les STYLES spécifiques de l'écran          */
/*******************************************************/


/* Spécificité de la classe container pour l'adresse search */


#addressEncart {
	max-width: 700px;
	transition: margin-bottom 0.2s ease-in-out;
}

/* Wrapper pour aligner le champ et le bouton */
.address-search-wrapper {
    display: flex;
    justify-content: start;
    align-items: center; /* Assure un alignement vertical parfait */
    gap: 5px; /* Réduit l'espacement entre le champ et le bouton */
    width: 100%; /* Occupe toute la largeur */
	padding-top:3px;
}

.autocomplete {
    width: 100%;
    position: relative; /* important pour limiter la largeur des suggestions à la largeur de l'input */
}

.autocomplete input {
    width: 100%; /* Le champ occupe toute la largeur */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #eee;
    box-sizing: border-box;
    font-size: 1rem;
    height: 40px; /* Hauteur standardisée pour correspondre au bouton */
}


/* Focus sur l'input */
#addressInput:focus {
    border: 2px solid #d9d4b7; /* Beige clair - couleur principale */
    outline: none; /* Supprime la bordure bleue par défaut */
}

/* Etat desactivé de l'input */
#addressInput:disabled {
    background-color: #e0e0e0; /* Gris clair */
    color: #bbb; /* Gris plus foncé */
    cursor: not-allowed;
}


/* Suggestions parfaitement alignées avec le champ */
#suggestions {
    width: calc(100% - 2px); /* S'aligne parfaitement avec le champ */
    position: absolute; /* Position flottante sous le champ */
	top: 100%;
    z-index: 10;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: none; /* 1px solid #ddd;*/
    border-radius: 5px;
    box-shadow: none; /* Supprime toute ombre */
}

/* Affiche la liste uniquement si elle contient des éléments */
#suggestions.visible {
    display: block; /* La liste devient visible uniquement si elle est activée */
    border: 1px solid #ddd; /* Bordure visible uniquement lorsque la liste est affichée */
    box-shadow: 0 4px 6px rgba(217, 212, 183, 0.5); /* Ajoute une ombre lorsqu'elle est affichée */
}


#suggestions li {
    padding: 8px 12px;
    cursor: pointer;
}

#suggestions li:hover {
    background-color: #e0e0e0; /* Gris clair */
}

/* Bouton spécifique pour "Rechercher" */
.search-button {
    padding: 0 20px;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    height: 40px; /* Correspond exactement à la hauteur de l'input */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal; /* Assure que le texte reste centré */
    border-radius: 9999px; /* Bouton arrondi */
    white-space: nowrap; /* Empêche le texte de se couper */
}

/* État non sélectionné */
.search-button.deselected {
    background-color: #e0e0e0; /* Gris clair */
    color: #bbb; /* Gris plus foncé */
    cursor: not-allowed;
}

.search-button.deselected:hover {
    background-color: #e0e0e0; /* Aucun changement au survol */
    color: #bbb;
}

/* État sélectionné */
.search-button.selected {
    background-color: #d9d4b7; /* Beige clair */
    color: #000; /* Noir */
    font-weight: normal;
    cursor: pointer;
}

.search-button.selected:hover {
    background-color: #c0b78c; /* Beige plus foncé au survol */
}



/* Boutons ovales de sélection rapide de commune */

.commune-shortcut-wrap {
    display: flex;
    justify-content: center;
    align-items: center; /* Assure un alignement vertical parfait */
    gap: 12px; /* Réduit l'espacement entre le champ et le bouton */
    width: 100%; /* Occupe toute la largeur */
    margin: 20px 0 20px;
	padding-top:30px;
}

.commune-badge {
    padding: 18px 32px;
    font-size: 1.1rem;
    border: none;
	background-color: rgb(217, 212, 183); /* Beige clair */
    color: #000; /* Noir */
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.2s;
    min-height: 64px; 
    min-width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal; /* Assure que le texte reste centré */
    border-radius: 9999px; /* Bouton arrondi */
    white-space: nowrap; /* Empêche le texte de se couper */
    box-shadow: 0 14px 32px rgba(217,212,183,0.22);
}


.commune-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(192,183,140,0.12); /* Beige plus foncé au survol */
}

.commune-badge:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(217,212,183,0.16);
}

.commune-badge:focus-visible {
    outline: 2px solid rgb(217, 212, 183);
    outline-offset: 3px;
}



/*******************************************************/
/*               RESPONSIVITE des Ecrans               */
/*******************************************************/


@media (max-width: 1024px) {



}

@media (max-width: 768px) {
    .address-search-wrapper {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: stretch; /* Étire les éléments pour occuper toute la largeur */
        gap: 10px; /* Ajoute un espacement vertical */
    }

    .autocomplete input {
        width: 100%; /* Champ occupe toute la largeur */
        font-size: 0.9rem; /* Taille de police réduite */
    }

    .search-button {
        width: 100%; /* Bouton occupe toute la largeur */
        font-size: 0.9rem; /* Taille de police réduite */
        padding: 10px; /* Ajout de padding pour un meilleur confort */
    }

    /* Shortcut : pleine largeur et taille réduite sur petits écrans */
    .commune-shortcut-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 10px;
    }
    .commune-badge {
        width: 100%;
        min-width: 0;
        padding: 14px 16px;
        font-size: 1rem;
        box-shadow: 0 10px 22px rgba(217,212,183,0.18);
    }
    .arr-block {
        width: 100%;
    }
    .arr-toggle {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 480px) {
    /* Bouton shortcut : réduire taille, autoriser retour à la ligne */
    .commune-badge {
        padding: 10px 12px;
        font-size: 0.95rem;
        line-height: 1.25;
        font-weight: 600;
        min-height: 0;
        height: auto;
        white-space: normal;
        text-align: center;
    }

    /* Alignement des contrôles associés */
    .arr-block {
        width: 100%;
        gap: 8px;
    }
    .arr-toggle {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.95rem;
    }

}