/* Pour masquer les champs "Pays" des 2 forms "Particulier" et "Professionnel" : */
#frm_field_124-country_container, #frm_field_115-country_container {
 /*   display: none;  */
 visibility: hidden;
}

/* Début de : Styliser les listes déroulantes d'autosuggestion d'adresse Google, et masquer le logo Google en bas de la liste : */
.pac-container {
    font-family: inherit;
    background-color: #0cd2df;
    box-shadow: 0 2px 4px #0cd2df66;
    border-radius: 10px;
    position: relative;
    margin-bottom: -15px; /* Déplace le conteneur vers le haut */
}

.pac-container::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background-color: #0cd2df;
    z-index: 1;
}
/* Fin de : Styliser les listes déroulantes d'autosuggestion d'adresse Google, et masquer le logo Google en bas de la liste. */



/* Pour rendre "scrollable" la div de droite (addition) : */
/* V1 :
.fixed-scrollable {
    overflow-y: auto;
    max-height: calc(100vh - 50px); /* ajusté pour tenir compte du top offset * /
    transition: top 0.3s ease-in-out;
}
*/
/* V2 : */
.fixed-scrollable {
    max-height: calc(100vh - 50px); /* visible sur l'écran */
    overflow-y: auto;
    transition: top 0.2s ease-in-out;
    z-index: 10; /* évite d’être cachée */
	
	pointer-events: auto;
}



/* Pour retirer la largeur maxi sur les blocs de textes explicatifs des étapes du devis personnalisé : */
.aux-modern-heading-description {
    max-width: none !important;
}

/* Pour ne pas avoir les titres secondaires enfermés dans une petite div et donc sur plusieurs lignes : */
.aux-modern-heading-secondary {
    max-width: none !important;
}



/* Pour réduire l'espace entre les icônes (images) et les textes (section 2) : */
.aux-ico-box {
    padding: 0px 0px 25px 0px !important;
}

/* Début de : CSS permettant de placer les icones des infobulles après les labels : */
.checkbox_container {
    display: flex;
    align-items: center; /* Aligne les éléments verticalement */
    margin-bottom: 0; /* Espacement entre les conteneurs, ajustez selon vos besoins */
}

.frm_form_field .frm_checkbox, .frm_form_field .frm_radio {
    margin-top: 3px;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center; /* Aligne la case et le label verticalement */
}

label {
    display: flex;
    align-items: center;
  /*  margin-right: 2px; /* Espace entre le texte du label et l'icône */
}

input[type="checkbox"] {
    margin-right: 5px; /* Espace entre la case à cocher et le texte */
}

.tooltipsall {
   /* display: flex;*/
    align-items: center; /* Aligne l'icône verticalement avec le texte du label */
    margin-left: 0; /* Espace entre le label et l'icône */
    border-bottom: 0 !important;
}

.tooltip-icon-wrapper {
   /* display: flex;*/
    align-items: center; /* Centre l'icône verticalement */
    margin-left: 10px; /* Ajustez la marge selon vos besoins */
}
/* Fin de : CSS permettant de placer les icones des infobulles après les labels : */

/* Style de l'icone : */
.tooltip-icon {
    cursor: pointer;
    /* margin-left: 10px !important; /* Marge gauche de 10 pixels */
    font-size: 12px;
    /* Taille de l'icône */
    color: #0f346a;
    /* Couleur de l'icône */
}
/* Grossir le bouton de fermeture des Tooltips : */
.qtip-icon .ui-icon {
    width: 28px;
    height: 24px;
    font: 700 14px/19px Tahoma,sans-serif;
}
/* Correction du fond noir placé sous les icones d'infobulles personnalisées. N'utilisant pas les paramêtres par défaut : */
.tooltip_post_id_1323 {
    background-color: #fff0 !important;
}
/* Correction de la couleur de la croix de fermeture de l'infobulle pour les infobulles personnalisées. N'utilisant pas les paramêtres par défaut : */
.tooltip_popup_post_class_1323  .qtip-icon {
    color: #1e355a !important;
}


/* CSS des listes déroulantes : */
.with_frm_style select {
    color: var(--text-color);
    background-color: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    border-width: var(--field-border-width) !important;
    border-style: var(--field-border-style) !important;
    border-radius: var(--border-radius) !important;
    width: var(--field-width);
    max-width: 100%;
    font-size: var(--field-font-size);
    padding: var(--field-pad) !important;
    box-sizing: border-box;
    outline: none;
    font-weight: var(--field-weight);
    /*background-image: url(https://prestigeweb.agency/wp-content/themes/phlox-pro/css/images/controls/arrows/small-arrow-down.svg);*/
    background-image: url(../wp-content/themes/phlox-pro/css/images/controls/arrows/small-arrow-down.svg);
    background-repeat: no-repeat;
    background-position: right center;
}

label {
    margin-bottom: 0 !important;
}

/* Début de : Style spécifique pour la liste de cases à cocher de "Choisissez les pages à ajouter" :
Permettant l'affichage de cette longue liste sur 3 colonnes sur les grands écrans */
.three-column-checkboxes .frm_opt_container {
    display: flex;
    flex-wrap: wrap;
}

/* Mise en 3 colonnes par défaut (grands écrans) */
.three-column-checkboxes .checkbox_container {
    width: 33.33%; /* Chaque case occupera un tiers de la largeur totale */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
   /* padding: 5px; /* Un peu d'espace autour des cases */
}

/* Optionnel : assurez-vous que les cases sont alignées */
.three-column-checkboxes .checkbox_container label {
    /*display: block;*/
}

/* Styles pour petits écrans */
@media (max-width: 1024px) {
    .three-column-checkboxes .checkbox_container {
        width: 50%; /* Deux colonnes pour les écrans moyens */
    }
}

/* Styles pour très petits écrans */
@media (max-width: 768px) {
    .three-column-checkboxes .checkbox_container {
        width: 100%; /* Une colonne pour les petits écrans */
    }
}
/* Fin de : Style spécifique pour la liste de cases à cocher de "Choisissez les pages à ajouter" :
Permettant l'affichage de cette longue liste sur 3 colonnes sur les grands écrans */




/* Début de : CSS du champ "Autre" des "pages personnalisées à ajouter" avec quantité et prix : */
/* 100% pour le champ texte "Autre" (page) : */
.frm_style_style-formidable.with_frm_style input.frm_other_input:not(.frm_other_full) {
    width: 100% !important;
}
/* 100% pour le champ texte "Prix" (page) : */
.other_43_price {
    max-width: 50% !important;
	margin-left: 2%;
    max-width: 49% !important;
    }
/* 100% pour le champ texte "Quantité" (page) : */
.other_43_qtite {
   /* max-width: 50% !important;*/
	max-width: 49% !important;
    }
.frm_other_input_otext {
    display: block !important;
    width: 100% !important;
}
/* Ajouter une class à ce contenair pour les toucher tous 1, 2, 3... : */
#frm_checkbox_298-other_1{
    display: block !important;
    width: 50% !important;
}

/* Ne pas afficher le champ "Autres" dans "Choisissez les pages à ajouter :" : */
#frm_checkbox_291-other_43 {
    display: none !important;
}
/* Ne pas afficher le champ "Choix du style de la page :" dans "Options Administrateur" : */
#frm_field_228-267-0_container {
    display: none !important;
}

/* Fin de : CSS du champ "Autre" des pages personnalisées à ajouter avec quantité et prix : */


/* Pour réduire l'espace entre le label "Nombre d’échéances pour le solde restant :" et sa liste déroulante : */
#nb_echeances {
    margin-top: -20px !important;
}


/* Début du CSS de la div "autocomplete-suggestions" qui permet la saisie semi-automatique (suggestion) du Nom de la ville : */
        .autocomplete-suggestions {
            border: 1px solid transparent; /* Border invisible by default */
            background-color: #fff;
       /*     max-height: 150px;
            overflow-y: auto;
            position: absolute;
            z-index: 1000;
            width: 100%;
            top: 100%;*/
        }
        .autocomplete-suggestion {
            padding: 2px;
            cursor: pointer;
        }
        .autocomplete-suggestion:hover {
            background-color: #f0f0f0;
        }
        /* Add border when suggestions are present */
        .autocomplete-suggestions.has-suggestions {
            border-color: #ccc; /* Makes the border visible */
        }
/* Fin du CSS de la div "autocomplete-suggestions" qui permet la saisie semi-automatique (suggestion) du Nom de la ville. */


/* CSS qui fixe l'addition dans la page Site WordPress sur Mesure : */
.fixed, .absolute {
    transition: top 1s ease-in-out; /* 300ms transition for a smooth effect */
}

/* Début des CSS de l'addition des pages de calculateurs de coût. */
.item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.item p {
    margin: 0;
}

.total,
.subtotal,
.separator {
    font-weight: bold;
}

.separator {
    text-decoration: underline;
}

.subsubtotal {
    margin-left: 27px;
    font-size: 13px;
    color: #444;
    font-weight: normal;
    line-height: 1.3;
}

.separateur-totaux {
    height: 1px;
    background-color: #000;
    margin-bottom: 6px;
}

.les-totaux {
    font-weight: bold;
    text-align: center;
    margin-top: 7px;
}

.price {
    white-space: nowrap;
    /* Pour forcer le signe € à rester à côté du prix  et ne pas sauter à la ligne dans certains cas ou la désignation de la prestation est trop longue */
    margin-left: 4px;
}
/* Fin des CSS de l'addition des pages de calculateurs de coût. */


/* Pour réduire les marges sous les formulaires intégrés : */
#frm_field_146-149-0_container,
#frm_field_148_container,
#frm_field_149_container,
#frm_field_208_container,
#frm_field_207_container {
    margin-bottom: 0px;
}

/* Pour supprimer toutes les marges inutiles sur et sous les formulaires intégrés : */
.with_frm_style .frm_repeat_sec {
    margin-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    border-bottom: 0px;
    border-bottom-width: 0px;
}

/* Permet d'afficher ou masquer les formulaires intégrés avec Javascript : */
.hidden-form {
    display: none !important;
}



/* Désactivation des boutons submit des formulaires embarqués sur "Site Wordpress Basic : */
/* Options administrateur : */
#frm_field_227-231-0_container {
    display: none !important;
}

/* Nom de Domaine / Hébergeur : */
#frm_field_135-148-0_container {
    display: none !important;
}

/* Base et contenu de base : */
#frm_field_143-149-0_container {
    display: none !important;
}

/* Abonnement et maintenance : */
#frm_field_164-165-0_container {
    display: none !important;
}

/* Infos Particulier : */
#frm_field_130-207-0_container {
    display: none !important;
}

/* Infos Pro : */
#frm_field_121-131-0_container {
    display: none !important;
}

/* Référencement : */
#frm_field_211-214-0_container {
    display: none !important;
}

/* Désactivation des boutons submit des formulaires embarqués sur "Site Wordpress sur Mesure : */
/* Options administrateur : */
#frm_field_227-267-0_container {
    display: none !important;
}

/* Nom de Domaine / Hébergeur : */
#frm_field_135-268-0_container {
    display: none !important;
}

/* Base et contenu de base : */
#frm_field_286-269-0_container {
    display: none !important;
}

/* Les contenus en options : */
#frm_field_287-289-0_container {
    display: none !important;
}

/* Abonnement et maintenance : */
#frm_field_164-271-0_container {
    display: none !important;
}

/* Infos Particulier : */
#frm_field_130-275-0_container {
    display: none !important;
}

/* Infos Pro : */
#frm_field_121-276-0_container {
    display: none !important;
}

/* Référencement : */
#frm_field_211-270-0_container {
    display: none !important;
}

/* Messages d'erreur et de succès du champ "Code Promo" : */
#reportOK {
    max-width: 100%;
    font-size: 15px;
    font-size: var(--font-size);
    color: green;
    font-weight: normal;
    font-weight: var(--weight);
    text-align: left;
    text-align: var(--align);
    padding: 0 0 3px 0;
    padding: var(--label-padding);
    margin: 0;
    width: auto;
    display: block;
}

#reportError {
    max-width: 100%;
    font-size: 15px;
    font-size: var(--font-size);
    color: red;
    font-weight: normal;
    font-weight: var(--weight);
    text-align: left;
    text-align: var(--align);
    padding: 0 0 3px 0;
    padding: var(--label-padding);
    margin: 0;
    width: auto;
    display: block;
}

/* Messages d'erreur et de succès du champ "Nom de Domaine choisi" : */
#reportDomaineOK, #reportDomaineOK2 {
    max-width: 100%;
    font-size: 15px;
    font-size: var(--font-size);
    color: green;
    font-weight: normal;
    font-weight: var(--weight);
    text-align: left;
    text-align: var(--align);
    padding: 0 0 3px 0;
    padding: var(--label-padding);
    margin: 0;
    width: auto;
    display: block;
}

#reportDomaineError, #reportDomaineError2, #other_1_PriceErrorMessage {
    max-width: 100%;
    font-size: 15px;
    font-size: var(--font-size);
    color: red;
    font-weight: normal;
    font-weight: var(--weight);
    text-align: left;
    text-align: var(--align);
    padding: 0 0 3px 0;
    padding: var(--label-padding);
    margin: 0;
    width: auto;
    display: block;
	/* Ajouts : */
	transition: opacity 5s ease-in-out;
    opacity: 1; /* La div est complètement visible par défaut */
}

/* Le titre de la page : */
.entry-title {
    text-align: center;
    /* margin-left: 25px;
    margin-right: 25px;
    margin-top: 35px;
    margin-bottom: 35px;
    font-family: "Futura LT W01 Book",sans-serif;
    color: #0f346a;
    font-size: 35px;
    font-weight: bold;*/
}

/* Pour les messages d'erreur du formulaire : */
.error-message {
    color: red;
    font-size: 0.875em;
    margin-top: 0.25em;
}
/* Pour le message d'erreur "Veuillez corriger les erreurs ci-dessus avant de soumettre le formulaire." en bas du formulaire : */
.global-error {
    font-weight: 700;
    text-align: center;
    color: red;
    font-size: 1.3em;
    margin-bottom: 1em;
    opacity: 1;
    transition: opacity 1s ease;
}

.global-error.hide {
    opacity: 0;
}
/* Pour le message de succès "Formulaire validé. Veuillez patienter un instant…" en bas du formulaire : */
.global-success {
    font-weight: 700;
    text-align: center;
    color: green;
    font-size: 1.3em;
    margin-bottom: 1em;
    opacity: 1;
    transition: opacity 1s ease;
}

.global-success.hide {
    opacity: 0;
}


/* Masquer les messages d'erreur par défaut générés par le formulaire */
.frm_error {
    /*	display: none !important;*/
}

/* Début de : Pour aligner correctement le texte https:// à gauche du champ de saisie URL choisie : */
.url-input-container {
    display: flex;
    align-items: center;
}
.url-prefix {
    margin-right: 5px; /* Ajustez l'espacement si nécessaire */
    white-space: nowrap;
}
.url-input-container input[type="url"] {
    flex-grow: 1;
    min-width: 200px; /* Ajustez la largeur minimale de l'input si nécessaire */
}
/* Fin de : Pour aligner correctement le texte https:// à gauche du champ de saisie URL choisie */