/*
 Theme Name: NFCarte
 Theme URI: https://nfcarte.fr/
 Description: Theme for NFCarte
 Author: Elegant Themes
 Author URI: https://www.webspot.fr
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */
.nf_button-container {
    display: flex;
    justify-content: space-between; /* Espacement entre les boutons */
    align-items: center; /* Aligner verticalement les boutons */
    gap: 10px; /* Espacement horizontal entre les boutons */
}

.ws_button {
    padding: 10px 20px; /* Taille des boutons */
    text-align: center; /* Centre le texte */
    text-decoration: none; /* Supprime le soulignement */
    border: 1px solid #ddd; /* Bordure pour les boutons */
    border-radius: 5px; /* Coins arrondis */
    background-color: ##104464!important; /* Fond */
    color: #333; /* Couleur du texte */
    transition: background-color 0.3s ease;
}

.ws_button:hover {
    background-color: #e0e0e0; /* Couleur au survol */
}


.nfc_position {
	color:black;
	display:grid !important;
	justify-content:center;
	font-size:medium;
	font-style:italic;
}

.nfc_societe {
	display:grid !important;
	justify-content:center;
}

.um-field {
	padding:2px 0 0 0 !important;
}

/* Remove title on all pages */
.entry-title{
	display: none;
}

/* Put Code postal and city on same line */
/* BEGIN */
div#um_field_17_c_codePostal {
	width:fit-content;
	margin-right:10px;
	display:inline-block;
}

div#um_field_17_c_ville {
	width:fit-content;
	display:inline-block;
}
/* END */

.qr-code-container {
    display: flex; /* Active Flexbox */
    align-items: center; /* Centre verticalement les éléments */
    gap: 10px; /* Espacement entre le texte et l'image */
    height: 150px; /* Ajustez la hauteur du conteneur si nécessaire */
    text-align: center; /* Centre le texte si nécessaire */
}

.qr-code-container p {
    margin: 0; /* Supprime les marges par défaut */
    font-size: 14px; /* Ajustez la taille du texte si nécessaire */
}

.qr-code-container img {
    max-width: 100px; /* Limite la largeur de l'image */
    height: auto; /* Assure une proportion correcte de l'image */
}
/* enlever email de l'entete*/
/*
div.um-meta>span {
display:none;
}


*/

#um_field_17_phone_number, 
#um_field_17_c_mobile, 
#um_field_17_user_email, 
#um_field_17_user_url, 
#um_field_17_whatsapp,
#um_field_17_twitter, 
#um_field_17_linkedin,
#um_field_17_facebook,
#um_field_17_telegram,
#um_field_17_discord,
#um_field_17_skype,
#um_field_846_phone_number, 
#um_field_846_c_mobile, 
#um_field_846_user_email, 
#um_field_846_user_url, 
#um_field_846_whatsapp,
#um_field_846_twitter, 
#um_field_846_linkedin,
#um_field_846_facebook,
#um_field_846_telegram,
#um_field_846_discord,
#um_field_846_skype {
    display: flex;
    align-items: center; /* Centre verticalement les éléments */
justify-content: flex-start; /* Aligne horizontalement (optionnel) */
}

/* Applique un espacement entre le label et l'aire */
#um_field_17_phone_number .um-field-label, 
#um_field_17_c_mobile .um-field-label, 
#um_field_17_user_email .um-field-label, 
#um_field_17_user_url .um-field-label, 
#um_field_17_whatsapp .um-field-label,
#um_field_17_twitter .um-field-label, 
#um_field_17_linkedin .um-field-label,
#um_field_17_facebook .um-field-label,
#um_field_17_telegram .um-field-label,
#um_field_17_discord .um-field-label,
#um_field_17_skype .um-field-label,
#um_field_846_phone_number .um-field-label, 
#um_field_846_c_mobile .um-field-label, 
#um_field_846_user_email .um-field-label, 
#um_field_846_user_url .um-field-label, 
#um_field_846_whatsapp .um-field-label, 
#um_field_846_twitter .um-field-label, 
#um_field_846_linkedin .um-field-label, 
#um_field_846_facebook .um-field-label, 
#um_field_846_telegram .um-field-label, 
#um_field_846_discord .um-field-label, 
#um_field_846_skype  .um-field-label {
    padding-right: 10px!important; /* Espacement entre les éléments */
    display: flex;
    align-items: center; /* Centre le contenu du label */
    border-bottom: none!important;
    padding-bottom: 0!important;
    margin : unset!important;
}

/* Zone de contenu prend l'espace restant, si nécessaire */
#um_field_17_phone_number .um-field-area, 
#um_field_17_c_mobile .um-field-area, 
#um_field_17_user_email .um-field-area, 
#um_field_17_user_url .um-field-area, 
#um_field_17_whatsapp .um-field-area,
#um_field_17_twitter .um-field-area, 
#um_field_17_linkedin .um-field-area,
#um_field_17_facebook .um-field-area,
#um_field_17_telegram .um-field-area,
#um_field_17_discord .um-field-area,
#um_field_17_skype .um-field-area,
#um_field_846_phone_number .um-field-area, 
#um_field_846_c_mobile .um-field-area, 
#um_field_846_user_email .um-field-area, 
#um_field_846_user_url .um-field-area, 
#um_field_846_whatsapp .um-field-area,
#um_field_846_twitter .um-field-area, 
#um_field_846_linkedin .um-field-area,
#um_field_846_facebook .um-field-area,
#um_field_846_telegram .um-field-area,
#um_field_846_discord .um-field-area,
#um_field_846_skype .um-field-area {
    flex: 1; /* Permet de prendre plus d'espace */
}


.NF_optionBody {
    max-height: 400px; /* Limite la hauteur (ajustez si nécessaire) */
    overflow-y: auto; /* Ajoute un scroll vertical si le contenu dépasse */
    width: 100%; /* Prend toute la largeur du parent */
    box-sizing: border-box; /* Inclut les bordures dans la largeur totale */
}

.NF_optionBody table {
    width: 100%; /* Table prend toute la largeur */
    border-collapse: collapse; /* Supprime les espaces entre les cellules */
}

.NF_optionBody th, .NF_optionBody td {
    padding: 8px; /* Ajoute de l'espace dans les cellules */
    text-align: left; /* Aligne le texte à gauche */
    border: 1px solid #ddd; /* Ajoute une bordure autour des cellules */
}

.NF_optionBody th {
    background-color: #f2f2f2; /* Couleur de fond des en-têtes */
    position: sticky; /* Les en-têtes restent visibles en haut lors du scroll */
    top: 0;
    z-index: 1;
}


/* Style de base */
.NF_profile_option {
    border: 1px solid #ddd;
    margin: 10px 0;
    border-radius: 5px;
    overflow: hidden;
}

.NF_optionTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f7f7f7;
    cursor: pointer;
    font-weight: bold;
}

.NF_optionBody {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    font-size:clamp(11px, 1vw, 18px)!important;
}

/* Flèche */
.toggle-arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Contenu visible */
.NF_profile_option.open .NF_optionBody {
/*    max-height: 1000px;  Grande valeur pour afficher le contenu */
    max-height: 400px; /* Limite la hauteur (ajustez si nécessaire) */
    overflow-y: auto; /* Ajoute un scroll vertical si le contenu dépasse */
    width: 100%; /* Prend toute la largeur du parent */
    box-sizing: border-box; /* Inclut les bordures dans la largeur totale */

    transition: max-height 0.3s ease-in;
}

.NF_profile_option.open .toggle-arrow {
    transform: rotate(180deg); /* Flèche orientée vers le bas */
}

/* formulaire contact */
.hidden {
    display: none;
}

#send-my-detail-form {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}
#send-my-detail-form label {
    display: block;
    margin: 5px 0 2px;
}
#send-my-detail-form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#send-my-detail-form button {
    margin-right: 10px;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#send-my-detail-form #cancel-btn {
    background-color: #f44336;
    color: white;
}
#send-my-detail-form #submit-btn {
    background-color: #4CAF50;
    color: white;
}
#send-my-detail-form #pick-contact-btn {
    background-color: #007BFF;
    color: white;
    margin-top:10px;
}
/* formulaire contact */