/*
Theme Name: ListingHive Child
Description: Thème enfant personnalisé pour Balama
Author: Balama
Template: listinghive
Version: 1.0
*/

/* BLOC CATEGORIE/
/* Image */
.hp-listing-category__image img {
    border-radius: 0;
    width: 100%;
    display: block;
}

/* Header */		
.hp-listing-category__item-count {
  border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.2);
}

/*BARRE DE RECHERCHE*/
.hp-form__footer {
    border-radius: 10px;
    overflow: hidden;
}

/*WIDGET*/
.widget.widget--sidebar.widget_elementor-library {
    border-radius: 10px;    /* arrondi des coins */
    overflow: hidden;       /* empêche tout contenu de dépasser */
    background: #fff;       /* fond blanc pour un rendu propre */
    padding: 10px;          /* espace interne */
    box-shadow: 0 3px 8px rgba(0,0,0,0.1); /* légère ombre */
}

/*BLOC AVIS*/
.hp-review--view-block{
    border-radius: 10px;    /* coins arrondis */
    overflow: hidden;       /* empêche le contenu de dépasser */
    background: #fff;       /* fond blanc pour uniformiser le rendu */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* légère ombre optionnelle */
    padding: 10px;          /* espace interne optionnel */
}


/*BLOC LISTE*/
/* Bloc listing entier */
.hp-listing.hp-listing--view-block {
    border-radius: 10px;    /* coins arrondis */
    overflow: hidden;       /* empêche le contenu de dépasser */
    background: #fff;       /* fond blanc pour uniformiser */
    box-shadow: 0 4px 12px rgba(0,0,0,0.20); /* légère ombre */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Effet hover pour moderniser */
.hp-listing.hp-listing--view-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.20);
}

/* BLOC VIERGE */
.bloc-vierge {
    position: relative;
    border-radius: 10px;
    overflow: hidden; /* Pour que les bords arrondis s'appliquent à l'image */
	}

	/*CADRE PUBLICATIONS*/
.elementor-posts .elementor-post__card {
    border-radius: 10px;
  }


/*ARRONDI MEMBREPLAN*/
.hp-membership-plan.hp-membership-plan--view-block {
    border-radius: 10px;
}

/*PRODUIT BOUTIQUE*/
/* Cadre produit avec arrondi et ombre */
.woocommerce ul.products li.product {
    border-radius: 10px; 
    overflow: hidden;     
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    text-align: center; /* centre le texte : titre, prix, bouton */
    display: flex;
    flex-direction: column; /* empile image, titre, bouton verticalement */
    align-items: center; /* centre horizontalement tous les éléments */
    justify-content: flex-start; /* début de colonne verticalement */
    padding: 15px; /* espace interne */
    transition: all 0.3s ease; /* pour hover futur */
}

/* Option hover pour effet moderne */
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/*BOUTON PANIER*/
.woocommerce ul.products li.product .button {
    background-color: #F17764; /* couleur de fond */
    color: #fff;               /* texte blanc */
    border-radius: 10px;       /* coins arrondis */
    padding: 10px 20px;        /* padding interne */
    margin-bottom: 20px;       /* espace entre le bouton et le bas du bloc */
    text-transform: uppercase; /* texte en majuscules */
    font-weight: 600;
    transition: all 0.3s ease; /* transition hover fluide */
    display: inline-block;     /* pour que padding et margin fonctionnent proprement */
}

/* Hover */
.woocommerce ul.products li.product .button:hover {
    background-color: #F17764; /* même couleur au survol */
    color: #fff;               /* texte blanc même sur hover */
    transform: translateY(-2px); /* léger décalage vers le haut */
}

/* IMAGE PRODUIT */
.woocommerce ul.products li.product img {
    height: 50%;           /* réduit la hauteur à 50% de la valeur originale */
    max-height: 200px;     /* limite maximale pour plus de contrôle */
    width: 100%;           /* garde la largeur responsive */
    object-fit: cover;     /* garde l'image centrée et recadrée si nécessaire */
    display: block;
    margin: 0 auto;        /* centre l'image horizontalement */
    border-radius: 10px 10px 0 0; /* arrondi si tu veux sur le haut du bloc */
}

/* IMAGE PRODUIT */

/* Conteneur de l'image produit limité à 300px */
.woocommerce div.product div.images {
    display: flex;               /* centre horizontalement et verticalement */
    justify-content: center;
    align-items: center;
    overflow: hidden;            /* empêche que l'image dépasse */
    border-radius: 10px;         /* arrondi du bloc */
    max-height: 500px;           /* hauteur maximale du bloc */
    height: 500px;               /* fixe la hauteur pour uniformité */
}

/* Image produit */
.woocommerce div.product div.images img {
    border-radius: 10px;         /* arrondi coins de l'image */
    max-height: 100%;            /* l'image ne dépassera jamais la hauteur du bloc */
    width: auto;                 /* largeur naturelle conservée */
    height: auto;                /* garde proportions */
    object-fit: cover;           /* recadrage si nécessaire */
    display: block;
}

/*BOUTON REPONDRE*/
.hp-listing--view-page .hp-listing__actions--primary button {
    color: #fff;               /* texte blanc */
    border-radius: 10px;       /* coins arrondis */
    padding: 10px 20px;        /* padding interne */
    margin-bottom: 20px;       /* espace entre le bouton et le bas du bloc */
    text-transform: uppercase; /* texte en majuscules */
    font-weight: 600;
    transition: all 0.3s ease; /* transition hover fluide */
    display: inline-block;     /* pour que padding et margin fonctionnent proprement */
}

/*CARTE MAP ANNONCE*/
.hp-listing__map {
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/*CARTE MAP RESULTAT*/
.hp-map {
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/*CADRE PROFESSIONNEL*/
/* Modifier l'arrondi du bloc vendeur */
.hp-vendor--view-block {
    border-radius: 10px !important;
    overflow: hidden !important; 
}

/*BOUTON ANNONCE*/
.bouton-annonce {
  background: #547d51;
  color: #ffffff;
  height: 60px;
  padding: 0 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.bouton-annonce:hover {
  color: #ffd86b;
  transform: scale(1.07);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* LOG */
#user_login_modal {
    border-radius: 10px;
}

#user_login_modal .hp-modal__container {
    background: #547d51;
    color: white;
}


/*BLOC ROLES*/
.only-customer {
    display: none;
}

.role-customer .only-customer {
    display: block;
}
.only-admin {
    display: none;
}

.role-administrator .only-admin {
    display: block;
}
.only-subscriber {
    display: none;
}

.role-subscriber .only-subscriber {
    display: block;
}
.only-guest {
    display: none;
}

.role-guest .only-guest {
    display: block;
}

/*NAVIGATION PERSO*/
.cadre-blanc {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  text-align: left;
  color: #333333; /* noir léger */
  transition: color 0.3s ease;
}

.cadre-blanc:hover {
  color: #0073aa; /* couleur au survol (modifiable) */
}

/*BOUTON A LA UNE*/
.bloc-une,
.bloc-une:link,
.bloc-une:visited {
  background: linear-gradient(135deg, #FCB900, #9B51E0);
  border-radius: 10px;
  height: 80px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff !important;
  font-size: 35px;
  font-weight: 600;
  text-align: center;

  text-decoration: none !important;
  font-family: 'Roboto', sans-serif;

  transition: all 0.3s ease;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.bloc-une:hover {
  color: #ffffff !important;

  background: linear-gradient(135deg, #e6a800, #7a3fc2);

  transform: translateY(-3px) scale(1.02);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/*BURGER MODERNE*/
.elementor-menu-toggle {
  width: 40px;
  height: 40px;

  background: #55a0a3;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.elementor-menu-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}


/* ETIQUETTE ANNONCE */
.hp-listing__categories a,
.hp-listing__category a {
  display: inline-flex;
  align-items: center;

  padding: 6px 14px;

  background-color: #9f564b !important; /* plus foncé que #AF6256 */
  color: #ffffff !important;

  border-radius: 10px !important;

  font-size: 16px;
  font-weight: 700;

  text-decoration: none !important;

  transition: all 0.2s ease;
}

/* Hover */
.hp-listing__categories a:hover,
.hp-listing__category a:hover {
  background-color: #7f443c; /* encore plus foncé */
  color: #ffffff !important;

  transform: translateY(-1px);
}

/* ==========================================================================
   CADRE À LA UNE (CORRIGÉ)
   ========================================================================== */

.hp-listing__featured-badge,
.hp-listing__featured {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background-color: #AF6256;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  border-radius: 0 10px 10px 0 !important;
  white-space: nowrap;
}

/* Masquer UNIQUEMENT l'icône propre au badge À la Une */
.hp-listing__featured-badge > i,
.hp-listing__featured > i {
  display: none !important;
}

/* Texte injecté */
.hp-listing__featured-badge::after,
.hp-listing__featured::after {
  content: "À la Une";
}

/*ICONE ENVOI MESSAGE*/
.hp-icon.fas.fa-comment {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  background-color: #ac258a;
  border-radius: 10px;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* On cache totalement l’icône d’origine */
.hp-icon.fas.fa-comment i,
.hp-icon.fas.fa-comment svg,
.hp-icon.fas.fa-comment:before {
  display: none !important;
}

/* Icône enveloppe */
.hp-icon.fas.fa-comment::after {
  content: "\f0e0"; /* enveloppe */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;

  font-size: 16px;
  color: #ffffff;
}

/* Hover */
.hp-icon.fas.fa-comment:hover {
  background-color: #8e1f72;
  transform: translateY(-1px);
}

/*ICONE COEUR FAVORI*/
.hp-icon.fas.fa-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  background-color: #55a0a3;
  color: #ffffff !important;

  border-radius: 10px;

  font-size: 16px;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.hp-icon.fas.fa-heart:hover {
  background-color: #3f7f82;
  transform: translateY(-1px);
}

/*ICONE SIGNALER DRAPEAU*/
.hp-icon.fas.fa-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  background-color: #db3131;
  color: #ffffff !important;

  border-radius: 10px;

  font-size: 16px;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.hp-icon.fas.fa-flag:hover {
  background-color: #b82828;
  transform: translateY(-1px);
}




/*ICONE CARTE PROFIL*/
.hp-icon.fas.fa-fw.fa-map-marked {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  background-color: #ffffff; /* fond blanc */
  color: #ed7e2b !important; /* icône orange */

  border: 2px solid #ed7e2b; /* contour */

  border-radius: 10px;

  font-size: 16px;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.hp-icon.fas.fa-fw.fa-map-marked:hover {
  background-color: #ed7e2b;
  color: #ffffff !important;
}


/* BADGE CERTIFIÉ BALAMA */
.hp-vendor__verified-badge.hp-icon.fas.fa-check-circle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 24px !important;
  height: 24px !important;

  /* Injection directe du SVG Balama */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 2L14.5 3.8L17.5 3.2L18.8 6L21.5 7.5L21.2 10.6L23 13L21.2 15.4L21.5 18.5L18.8 20L17.5 22.8L14.5 22.2L12 24L9.5 22.2L6.5 22.8L5.2 20L2.5 18.5L2.8 15.4L1 13L2.8 10.6L2.5 7.5L5.2 6L6.5 3.2L9.5 3.8L12 2Z" fill="%23ff9800"/><path d="M8.5 12.5L10.8 14.8L15.5 9.5" stroke="%23ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;

  vertical-align: middle !important;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* Masquer la coche FontAwesome native */
.hp-vendor__verified-badge.hp-icon.fas.fa-check-circle::before {
  display: none !important;
}

.hp-vendor__verified-badge.hp-icon.fas.fa-check-circle:hover {
  transform: scale(1.08);
}

/*FLECHE RETOUR ANNONCE*/
.hp-icon.fas.fa-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  background-color: #7a7a7a; /* gris */
  color: #ffffff !important; /* icône blanche */

  border-radius: 10px;

  font-size: 16px;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.hp-icon.fas.fa-share:hover {
  background-color: #5f5f5f;
  transform: translateY(-1px);
}

/*ICONE MASQUER ANNONCE*/
.hp-icon.fas.fa-eye-slash {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  background-color: #ffffff; /* fond blanc */
  color: #ed7e2b !important; /* icône orange */

  border: 2px solid #ed7e2b;

  border-radius: 10px;

  font-size: 16px;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.hp-icon.fas.fa-eye-slash:hover {
  background-color: #ed7e2b;
  color: #ffffff !important;
}

/*ICONE CROIX*/
.hp-icon.fas.fa-times {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  background-color: #ffffff; /* fond blanc */
  color: #db3131 !important; /* icône rouge */

  border: 2px solid #db3131;

  border-radius: 10px;

  font-size: 16px;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.hp-icon.fas.fa-times:hover {
  background-color: #db3131;
  color: #ffffff !important;
}

/*OEUIL*/
/* 👁️ Bouton vue */
.hp-icon.fas.fa-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  background-color: #f28b82; /* rouge léger */
  color: #ffffff !important; /* icône blanche */

  border-radius: 10px;

  font-size: 16px;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.hp-icon.fas.fa-eye:hover {
  background-color: #e57373; /* rouge un peu plus soutenu */
  transform: translateY(-1px);
}

/*BOUTON MESSAGE*/
.hp-vendor__action.hp-vendor__action--message.button.button--large.button--primary.alt {
  border-radius: 10px;
}

/*CADRE ATTRIBUT ANNONCEUR*/
.hp-block.hp-vendor__attributes.hp-vendor__attributes--primary.widget.hp-widget {
  border-radius: 10px;
  height: 100%;
}


/*ICONE MODIFIER*/
.fas.fa-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 35px;
  height: 35px;

  background-color: white;
  border: 2px solid black;
  border-radius: 10px;

  color: black;
  font-size: 18px;

  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover */
.fas.fa-edit:hover {
  background-color: black;
  color: white;
}

/*BADGE PUBLICATION*/
.elementor-post__badge {
  background-color: #F17764 !important;
  border-radius: 10px !important;
}

/*ETIQUETTE CADRE*/
.tag-cloud-link {
  background-color: white;
  color: #F17764;

  border: 1px solid #F17764!important;
  border-radius: 10px!important;

  padding: 5px 10px;
  margin: 3px;

  display: inline-block;
  text-decoration: none;

  transition: all 0.3s ease;
}

/* Hover */
.tag-cloud-link:hover {
  background-color: #F17764!important;
  color: white!important;
  font-weight: bold!important;
}



/* ==========================================================================
   BALAMA - Alignement du menu principal sur ordinateur (sans casser les sous-menus)
   ========================================================================== */

/* Cible uniquement la liste de premier niveau */
.elementor-nav-menu--main > ul.elementor-nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* Éléments de premier niveau uniquement */
.elementor-nav-menu--main > ul.elementor-nav-menu > li {
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Liens de premier niveau uniquement */
.elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}


/* ARRONDI ET CADRE DU DIAPORAMA *//* ARRONDI ET CADRE DU DIAPORAMA */
.arrondi-diapo {
    position: relative !important;
    max-height: 250px !important;
    margin: 5px !important;
    border-radius: 10px !important;
    overflow: hidden !important; /* Indispensable pour que le zoom reste DANS le cadre */
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* 1. PRÉPARATION DE L'IMAGE POUR L'EFFET */
.arrondi-diapo img {
    max-height: 250px !important;
    object-fit: cover !important; /* Évite la déformation */
    
    /* Transition douce : définit la vitesse et la fluidité de l'animation */
    transition: transform 0.6s ease-in-out !important; /* 0.6 secondes pour un effet très fluide */
}

/* 2. L'EFFET DE ZOOM AU SURVOL */
.arrondi-diapo:hover img {
    /* Transform: scale(1.08) agrandit l'image de 8% */
    transform: scale(1.08) !important; 
}

/* 3. LÉGENDE (Pour qu'elle reste lisible par-dessus) */
.arrondi-diapo figcaption, 
.arrondi-diapo .wp-block-image__caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !important;
    color: #ffffff !important;
    padding: 15px 10px 10px 10px !important;
    font-size: 18px !important;
    text-align: center !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    z-index: 2 !important; /* Reste au premier plan */
}





/*------CADRE VIERGE---------*/

/*CADRE VIERGE LIBRE*/
.cadre-vierge-libre {
    border-radius: 10px;
    border: 0,5px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	
    /* Centrage du contenu */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff; 
   	padding: 15px;  
}

/*CADRE VIERGE 80*/
.cadre-vierge-80 {
    width: 100%;
    height: 80px;
    border: none;
    border-radius: 10px;
    border: 0,5px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	
    /* Centrage du contenu */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff; 
   	padding: 15px;  
}

/*CADRE VIERGE MENU*/
.cadre-vierge-menu {
    width: 100%;
    height: 80px;
    border: none;
    border-radius: 10px;
    border: 0,5px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	
    /* Centrage du contenu */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff; 
   	padding: 15px;  
}

/*CADRE VIERGE SIMPLE*/
.cadre-vierge-simple {
    border-radius: 10px;
    border: 0,5px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff; 
   	padding: 15px;  
}

/*------BOUTON------*/

/*BOUTON VIERGE CADRE*/
/* Style : bouton-cadre-vierge */
.bouton-cadre-vierge {
    /* Couleurs et Fond */
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    
    /* Bordure et Arrondi */
    border: 1.5px solid #eeeeee !important;
    border-radius: 10px !important;
    
    /* Structure et Texte */
    padding: 12px 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    
    /* Animation et Ombre */
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
}

/* Effet au survol */
.bouton-cadre-vierge:hover {
    background-color: #ffffff !important;
    border-color: #dddddd !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08) !important;
    filter: none !important;
    color: #000000 !important;
}

/* Effet au clic */
.bouton-cadre-vierge:active {
    transform: translateY(0) !important;
}

/* Nettoyage technique */
.bouton-cadre-vierge::before, 
.bouton-cadre-vierge::after {
    display: none !important;
}

/*----CADRE HIVEPRESS THEME---*/

/* Le style s'applique QUE si la page possède la classe "est-une-publication" */
.est-une-publication .hp-listing__attributes--primary {
    background-color: #ffffff !important;
    border: none !important; /* Bordure supprimée */
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* --- CADRE A LA UNE 
/* 1. Cadre Standard (Pas à la une) */
.cadre-pas-a-la-une {
    border-radius: 10px;
    border: 0.5px solid rgba(0, 0, 0, 0.1); /* Trait léger */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* L'ombre demandée */
    background-color: #ffffff; 
    padding: 15px;
}

/* 2. Cadre À LA UNE (Premium) */
.cadre-a-la-une {
    border-radius: 10px;
    border: 1px solid #f97316; /* Trait orange pour se distinguer */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Même ombre pour l'harmonie */
    background-color: #fff7ed; /* Fond orangé léger */
    padding: 15px;
}


/*-----LIEN MENU PRO---*/
/* --- EFFET FOND ORANGE AU SURVOL --- */
.bloc-orange-hover {
    transition: background-color 0.3s ease !important;
    padding: 10px !important; /* Ajoute un peu d'espace autour du texte */
    border-radius: 8px !important; /* Adoucit les angles */
    cursor: pointer;
}

.bloc-orange-hover:hover {
    background-color: #fff7ed !important; /* Orange très clair */
}

/*-----SOUS MENU PRO---*/
/* --- MENU PRO : PLEINE LARGEUR --- */
.menu-pro-style ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* C'est ça qui force l'étalement */
    align-items: center !important;     
    width: 100% !important;             /* Force le menu à remplir tout le bloc */
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.menu-pro-style li {
    display: inline-block !important;
    margin: 0 !important;
    text-align: center;
    flex: 1; /* Force chaque élément à prendre la même taille pour un équilibre parfait */
}

/* Style des liens */
.menu-pro-style a {
    text-decoration: none !important;
    color: #333333 !important;
    font-size: 18px !important;         
    font-weight: 600 !important;        
    padding: 15px 0 !important;         /* Plus de hauteur pour le clic */
    transition: all 0.3s ease !important;
    display: block !important;
}

/* Effet orange au survol */
.menu-pro-style a:hover {
    color: #f97316 !important;
    transform: scale(1.05) !important; 
}


/*----STATS DES PROS-----*/
/* --- 1. Cadre et structure générale --- */
.stats-container {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden; /* Garantit que le tableau respecte les coins arrondis */
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.stats-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-family: sans-serif; 
    margin: 0;
}

.stats-table th, .stats-table td { 
    padding: 15px; 
    border-bottom: 1px solid #eee; 
    text-align: left; 
}

/* --- 2. Alignements et largeurs --- */
/* Éloigne le texte du bord gauche */
.stats-table td:first-child, .stats-table th:first-child { 
    padding-left: 25px; 
    width: 50%; 
}

/* Centre la colonne Statut (3ème colonne) */
.stats-table td:nth-child(3), .stats-table th:nth-child(3) { 
    text-align: center; 
}

/* --- 3. Couleurs et En-têtes --- */
.stats-table th { 
    background-color: #f97316; 
    color: #ffffff; 
    font-weight: 600; 
}

/* Lien de l'annonce */
.stats-table td a { 
    text-decoration: none; 
    color: #333; 
    transition: color 0.3s ease;
}
.stats-table td a:hover { 
    color: #f97316; 
}

/* --- 4. Styles de lignes (Featured / Expiré) --- */
/* Ligne "À la une" */
.featured-row { background-color: #fff7ed; }

/* Ligne "Expiré/Inactif" (grisé) */
.expired-row { background-color: #f2f2f2 !important; color: #888; }
.expired-row a { color: #888 !important; pointer-events: none; } /* Désactive le clic */

/* --- 5. Pagination Horizontale --- */
.pagination-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}
.pagination-links a, .pagination-links span {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-decoration: none;
    border-radius: 4px;
    color: #f97316;
}
.pagination-links span.current { 
    background-color: #f97316; 
    color: white; 
    border-color: #f97316; 
}

/* --- 6. Bouton "Mettre en avant" --- */
.mini-btn { 
    display: inline-block; 
    background-color: #f97316; 
    color: white !important; 
    padding: 5px 10px; 
    border-radius: 4px; 
    font-size: 12px; 
    text-decoration: none; 
    transition: background 0.3s;
}
.mini-btn:hover { 
    background-color: #ea580c; 
}

/* Badge "À la une" */
.featured-status {
    background-color: #22c55e !important; /* Vert pour le badge actif */
    cursor: default !important;
}

/* ==========================================================================
   STRUCTURES INTERNES (Sans cadres/boîtes)
   ========================================================================== */

/* Alignement Photo et couple Nom/Note */
.author-block-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px; /* Remplace le gap du conteneur supprimé */
}

/* Photo de profil en carré arrondi 10px */
.author-block-avatar img {
  width: 75px;
  height: 75px;
  border-radius: 10px !important; 
  object-fit: cover;
  border: 2px solid #ccd01a; 
  display: block;
}

.author-block-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.author-block-name {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #333333;
}

/* Style commun des bandeaux d'accroche/attributs */
.author-block-tagline {
  margin: 0 0 12px 0 !important; /* Ajoute un espace en bas si plusieurs à la suite */
  font-size: 14px;
  color: #555555;
  line-height: 1.5;
  background-color: #fcfcfc;
  padding: 10px 14px;
  border-left: 3px solid #ccd01a; 
  border-radius: 0 6px 6px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Icônes */
.author-block-tagline i {
  color: #ccd01a !important; 
  margin-right: 8px;
  font-size: 15px;
}

.custom-author-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffffff; /* Couleur de fond */
    border: 1px solid #ccd01a; /* Couleur de la bordure */
    color: #333333; /* Couleur du texte */
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
	  margin: 0 auto;
	  display: block;
	  width: fit-content;
}

.custom-author-btn:hover {
    background-color: #ccd01a; /* Couleur au survol */
    color: #ffffff;
}

/*==================================TABLEUA STATS ===*/
/* Force le texte blanc et supprime le soulignement par défaut */
.sort-link {
    color: #ffffff !important;
    text-decoration: none !important;
    display: block;
    width: 100%;
}

/* Effet au survol pour montrer que c'est cliquable */
.sort-link:hover {
    color: #f0f0f0 !important;
    text-decoration: underline !important;
}

/* S'assure que les en-têtes de table sont bien blancs */
.stats-table thead th {
    color: #ffffff !important;
}

/*==============================BOUON RETOUR SITE JAVA====================*/
/* Classe globale réutilisable pour le bouton retour Balama */
.bouton-retour-global {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    background-color: transparent !important;
}

.bouton-retour-global .wp-block-button__link {
    background-color: transparent !important;
    color: #333333 !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important; /* Mis en GRAS */
    text-decoration: none !important;
    display: inline-block !important;
}

/* Effet au survol global */
.bouton-retour-global:hover {
    background-color: #F17764 !important; /* Ton orange au survol */
    border-color: #F17764 !important;
    transform: translateX(-3px) !important; /* Décalage à gauche */
}

.bouton-retour-global:hover .wp-block-button__link {
    color: #ffffff !important; /* Texte blanc au survol */
}


/*==============================BOUTON LIEN SITE PRO=====================*/
/* Base commune pour tous les boutons */
.attr-lien-pro, .attr-lien-std {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 20px;
    border-radius: 10px; /* Arrondi 10px constant */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 18px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Ombre portée commune */
}

/* Ajustement de l'icône */
.attr-lien-pro svg, .attr-lien-std svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

/* Style Partenaire */
.attr-lien-pro {
    background-color: #F17764;
    color: #ffffff !important;
}

.attr-lien-pro:hover {
    background-color: #6EC1E4;
    color: #000000 !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Style Standard (Plus vivant avec ombre) */
.attr-lien-std {
    background-color: #f0f0f0;
    color: #444444 !important;
}

.attr-lien-std:hover {
    background-color: #e0e0e0;
    color: #000000 !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/*==============================CADRE LIEN FICHE PRO==============*/
.balama-ui-lien {
    display: flex;
    flex-direction: column;
    padding: 12px 15px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px; /* Ton arrondi habituel */
    text-decoration: none !important;
    transition: 0.3s;
    margin-bottom: 10px;
}

.balama-ui-lien:hover {
    border-color: #6EC1E4; /* Rappel du bleu de tes boutons */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.lien-label {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.lien-url-mini {
    font-size: 12px;
    color: #888;
    text-transform: lowercase;
}

/*==============================ETAT ATTRIBUT MANQUANT FICHE PRO====*/
/* Style quand le contenu est présent (plus dynamique) */
.etat-present {
    color: #F17764; /* La couleur de ton bouton */
    font-weight: 600;
    font-size: 24px;
}

/* Style quand c'est vide (plus discret) */
.etat-vide {
    color: #999999;
    font-style: italic;
    font-size: 24px;
}

/*===================================================================================CODE=AOUT=2026==0826===========================0826===============================0826========================0826=======================*/





/* ==========================================================================
   b0826 - CADRE DE MENU BLANC (Roboto 18px, Padding 10px, Couleurs globales)
   ========================================================================== */
.b0826-cadre-menu {
    font-family: 'Roboto', sans-serif !important;
    width: 100%;
    min-height: 80px;
    
    /* Fond blanc pur + bordure fine quasi invisible */
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 10px !important;
    
    /* Ombre harmonisée avec l'en-tête */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), 
                0 2px 7px rgba(0, 0, 0, 0.05) !important;
    
    /* Centrage du contenu */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* Marge interne (padding) stricte de 10px */
    padding: 10px !important;
    box-sizing: border-box;
}

/* 1. TEXTE AU REPOS -> Roboto 18px & Couleur globale texte */
.b0826-cadre-menu,
.b0826-cadre-menu h1,
.b0826-cadre-menu h2,
.b0826-cadre-menu h3,
.b0826-cadre-menu p,
.b0826-cadre-menu a {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--e-global-color-text, inherit) !important; /* Couleur globale texte */
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

/* 2. SURVOL (HOVER) -> Couleur globale principale */
.b0826-cadre-menu a:hover {
    color: var(--e-global-color-primary, #fe7e13) !important; /* Couleur globale principale */
}

/* 3. ACTIF / PAGE EN COURS -> Couleur globale accentuée */
.b0826-cadre-menu a:active,
.b0826-cadre-menu .active > a,
.b0826-cadre-menu .current-menu-item > a,
.b0826-cadre-menu .current_page_item > a {
    color: var(--e-global-color-accent, #61CE70) !important; /* Couleur globale accentuée */
    font-weight: 700 !important;
}

/* 4. DISPOSITION POUR MENU UL/LI */
.b0826-cadre-menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   b0826 - CADRE TEXTE SEUL (Padding 20px haut/bas, 10px côtés)
   ========================================================================== */
.b0826-cadre-texte {
    width: 100%;
    
    /* Fond blanc pur + bordure fine quasi invisible */
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 10px !important;
    
    /* Ombre identique */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), 
                0 2px 7px rgba(0, 0, 0, 0.05) !important;
    
    /* Marge intérieure : 20px en haut/bas et 10px à gauche/droite */
    padding: 20px 10px !important;
    
    /* Marge extérieure : 10px uniquement en bas */
    margin: 0 0 10px 0 !important;
    
    box-sizing: border-box;
}

/* ==========================================================================
   b0826 - CADRE IMAGE (Centré, Padding 15px haut/bas, Marge bas 10px)
   ========================================================================== */
.b0826-cadre-image {
    width: 100%;
    
    /* Fond blanc pur + bordure fine quasi invisible */
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 10px !important;
    
    /* Ombre identique */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), 
                0 2px 7px rgba(0, 0, 0, 0.05) !important;
    
    /* Marge intérieure : 15px en haut/bas, 0 sur les côtés */
    padding: 15px 0 !important;
    
    /* Marge extérieure : 10px uniquement en bas */
    margin: 0 0 10px 0 !important;
    
    /* Centrage du contenu (image) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Empêche l'image de dépasser des coins arrondis */
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Ajustement propre de l'image à l'intérieur */
.b0826-cadre-image img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}











/* ==========================================================================
   b0826 - CADRE DE MENU LIBRE (Aligné au milieu verticalement sans pousser à gauche)
   ========================================================================== */
.b0826-cadre-menu-libre {
    font-family: 'Roboto', sans-serif !important;
    width: 100%;
    min-height: 80px;
    
    /* Fond blanc + bordure fine */
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 10px !important;
    
    /* Ombre standard */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), 
                0 2px 7px rgba(0, 0, 0, 0.05) !important;
    
    /* Centrage vertical uniquement (via Grid) */
    display: grid !important;
    align-content: center !important;
    
    /* Padding interne */
    padding: 10px !important;
    box-sizing: border-box;
}

/* 1. TEXTE AU REPOS -> Couleur globale texte */
.b0826-cadre-menu-libre,
.b0826-cadre-menu-libre h1,
.b0826-cadre-menu-libre h2,
.b0826-cadre-menu-libre h3,
.b0826-cadre-menu-libre p,
.b0826-cadre-menu-libre a {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--e-global-color-text, inherit) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

/* 2. SURVOL (HOVER) -> Couleur principale Elementor */
.b0826-cadre-menu-libre a:hover,
.b0826-cadre-menu-libre a:hover *,
.b0826-cadre-menu-libre li:hover > a {
    color: var(--e-global-color-primary) !important;
}

/* 3. PAGE ACTIVE / LIEN ACTIF -> Couleur d'accentuation Elementor */
.b0826-cadre-menu-libre a:active,
.b0826-cadre-menu-libre .active > a,
.b0826-cadre-menu-libre .current-menu-item > a,
.b0826-cadre-menu-libre .current_page_item > a {
    color: var(--e-global-color-accent, #61CE70) !important;
    font-weight: 700 !important;
}

/* 4. NETTOYAGE DES LISTES */
.b0826-cadre-menu-libre ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*==============================B0826 BOUTON LOGOUT =======================*/
/* --- BOUTON DÉCONNEXION (Style Ghost & Centrage Absolu) --- */
.btn-logout {
    border: 2px solid #f97316 !important;
    color: #f97316 !important;
    padding: 8px 20px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    cursor: pointer;

    /* Centrage horizontal et vertical */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    margin: auto !important;
}

.btn-logout:hover {
    background-color: #f97316 !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}




/*==============================B0826 CADRE CONTENU COMPTE ==================*/
/* CADRE FONCTIONNEL - Inspiré de ton header */
.b26_contenu_compte {
    font-family: 'Roboto', sans-serif !important;
    margin: 10px 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    
    /* Les mêmes propriétés d'espace et de relief qui fonctionnent chez toi */
    padding: 18px 25px !important; 
    border: 1px solid #fcd2be !important;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04) !important;
    background: #ffffff !important; /* Fond blanc propre ou change-le si besoin */
}

/*==============================B0826 cCADRE VIERGE =====================*/
/*CADRE VIERGE*/
.cadre-vierge {
    border-radius: 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    background-color: #fff; 
   	padding: 15px;  
}

/*==============================B0826 STAT PROS ===============*/
/* ==========================================================================
   TABLEAU DE STATISTIQUES - ESPACE PRO
   ========================================================================== */

/* --- 1. CONTENEUR GLOBAL --- */
.stats-container {
    width: 100%;
    margin: 20px 0;
    overflow-x: auto; /* Permet le défilement horizontal sur mobile */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- 2. STRUCTURE DU TABLEAU --- */
.stats-container .stats-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #334155;
}

/* --- 3. EN-TÊTE DU TABLEAU (Bleu moderne uni) --- */
.stats-container .stats-table thead th {
    font-family: 'Roboto', sans-serif !important;
    background-color: #5484a1!important; 
    border-bottom: none !important; /* Retire le trait sous l'en-tête */
    padding: 15px 20px !important;
    text-align: left;
}

/* Texte et liens de tri en blanc */
.stats-container .stats-table thead th,
.stats-container .stats-table thead th a.sort-link {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Survol des liens en bleu azur clair */
.stats-container .stats-table thead th a.sort-link:hover {
    color: #93c5fd !important;
}

/* --- 4. CORPS DU TABLEAU (Lignes et cellules) --- */
.stats-container .stats-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
}

.stats-container .stats-table tbody tr:last-child {
    border-bottom: none;
}

/* Effet de survol doux sur les lignes */
.stats-container .stats-table tbody tr:hover {
    background-color: #f8fafc;
}

/* Cellules du corps */
.stats-container .stats-table tbody td {
    padding: 14px 20px;
    vertical-align: middle;
}

/* Mise en valeur du texte et des chiffres */
.stats-container .stats-table tbody td strong {
    color: #0f172a;
}

/*============================== B0826 CHAMPS FORM SOUMMISION ===============*/
/* ================================================================= */
/* Formulaire HivePress Pro : Fonds de champs et détails             */
/* ================================================================= */

/* 1. Structure globale et conteneur des champs */
form.hp-form {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 5px 0;
}

form.hp-form .hp-form__field {
    width: 100% !important;
    margin-bottom: 22px !important;
    box-sizing: border-box !important;
}

/* 2. Étiquettes (Labels) */
form.hp-form .hp-form__field label,
form.hp-form .hp-form__field .hp-form__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

/* 3. Champs de saisie standards (EXCLUANT les blocs spéciaux du bas) */
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) input[type="text"],
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) input[type="email"],
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) input[type="url"],
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) input[type="number"],
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) input[type="password"],
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) select,
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) textarea {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #fafaf9 !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    transition: all 0.2s ease-in-out;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* 4. Survol et Focus standards */
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) input:hover,
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) select:hover,
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) textarea:hover {
    border-color: #d6d3d1 !important;
}

form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) input:focus,
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) select:focus,
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) textarea:focus {
    background-color: #fffaf5 !important;
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12) !important;
    outline: none !important;
}

/* 5. Textarea standard */
form.hp-form .hp-form__field:not(.hp-field--sponsorise):not(.hp-field--liensup):not(.hp-field--facultatif) textarea {
    min-height: 120px;
    line-height: 1.5;
}

/* 6. Descriptions */
form.hp-form .hp-form__description,
form.hp-form .hp-field__description {
    font-size: 12px;
    color: #64748b;
    margin-top: 6px;
    line-height: 1.4;
}

/* 7. Bouton de soumission orange */
form.hp-form .hp-form__footer button[type="submit"],
form.hp-form .hp-form__actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    background-color: #f97316 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 13px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.25);
    margin-top: 15px;
    box-sizing: border-box !important;
}

form.hp-form .hp-form__footer button[type="submit"]:hover,
form.hp-form .hp-form__actions button:hover {
    background-color: #ea580c !important;
}

/* 8. Conditions de publication */
form.hp-form .hp-field--terms,
form.hp-form .hp-form__field--checkbox {
    width: 100% !important;
    background-color: #fafaf9;
    border: 1px solid #e7e5e4;
    padding: 14px;
    border-radius: 8px;
    margin-top: 10px;
    box-sizing: border-box !important;
}

/* ================================================================= */
/* 9. STYLISATION DES BLOCS DU BAS (OPTIONS & FACULTATIFS)            */
/* ================================================================= */

/* --- Options (Tous en Orange unifié) --- */
form.hp-form .hp-form__field.hp-field--sponsorise,
form.hp-form .hp-form__field.hp-field--liensup {
    background-color: #fff4ed !important;
    border: 1.5px solid #fdba74 !important;
    padding: 16px !important;
    border-radius: 10px !important;
    margin-bottom: 25px !important;
}

form.hp-form .hp-form__field.hp-field--sponsorise input,
form.hp-form .hp-form__field.hp-field--sponsorise select,
form.hp-form .hp-form__field.hp-field--liensup input,
form.hp-form .hp-form__field.hp-field--liensup select {
    background-color: #ffffff !important;
    border-color: #fed7aa !important;
}

/* --- Les Champs Facultatifs (Description & Tags) --- */
form.hp-form .hp-form__field.hp-field--facultatif {
    background-color: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 16px !important;
    border-radius: 10px !important;
}

/* ================================================================= */
/* 10. STYLE DES CHAMPS INTERNES QUAND ILS SONT DÉSACTIVÉS           */
/* ================================================================= */

form.hp-form input:disabled,
form.hp-form select:disabled,
form.hp-form textarea:disabled {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.9;
}

form.hp-form .hp-field__description strong {
    color: #f97316 !important;
}


/*============================== B0826 CARTE A LA UNE PUBICATION PRO ======*/
/* ==========================================================================
   CARTE A LA UNE (Shortcode feature_button)
   ========================================================================== */

/* 1. Conteneur principal (Orange par défaut / cliquable) */
.clickable-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    background-color: #ffffff;
    border: 1px solid #ffd8a8; /* Bordure fine orange */
    border-radius: 10px;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.clickable-card:hover {
    border-color: #ffaa00;
    background-color: #fffaf0;
    box-shadow: 0 6px 16px rgba(255, 170, 0, 0.15);
    transform: translateY(-2px);
}

/* 2. Variation : Statut Validé (Vert) */
.clickable-card.status-validated {
    border-color: #bbf7d0;
    background-color: #f0fdf4;
    cursor: default;
}

.clickable-card.status-validated:hover {
    border-color: #bbf7d0;
    background-color: #f0fdf4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transform: none;
}

/* 3. Zone de l'icône SVG */
.clickable-card .stats-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.clickable-card .stats-icon svg {
    width: 100%;
    height: 100%;
    stroke: #ffaa00; /* Icône orange */
}

.clickable-card.status-validated .stats-icon svg {
    stroke: #16a34a; /* Icône verte si validé */
}

/* 4. Zone de contenu textuel */
.clickable-card .stats-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* 5. Sub-elements (Label & Title) */
.clickable-card .stats-label {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 2px;
}

.clickable-card .stats-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.clickable-card.status-validated .stats-title {
    color: #15803d;
}

/* ==========================================================================
   CARTE STATS PUBLICATION PROS
   ========================================================================== */

.modern-stats-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
}

.modern-stats-card .stats-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    flex-shrink: 0;
}

.modern-stats-card .stats-content {
    display: flex;
    flex-direction: column;
}

.modern-stats-card .stats-label {
    font-size: 13px;
    color: #64748b;
}

.modern-stats-card .stats-wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.modern-stats-card .stats-number {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.modern-stats-card .stats-title {
    font-size: 14px;
    color: #334155;
}

/* ==========================================================================
   MODULE DE MESSAGERIE BALAMA (Shortcodes 1 et 2) ===================== */
/* ==========================================================================
   MODULE DE MESSAGERIE BALAMA (Shortcodes 1 et 2)
   ========================================================================== */

/* --- 1. SHORTCODE 1 : BANDEAU HORIZONTAL (Doux & Pastel) --- */
.balama-msg-banner-link {
    text-decoration: none !important;
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.balama-msg-banner {
    background-color: #fffaf0;
    border: 1px solid #ffe0b2;
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease-in-out;
}

.balama-msg-banner:hover {
    background-color: #fff5e6;
    border-color: #ffaa00;
    box-shadow: 0 6px 16px rgba(255, 170, 0, 0.15);
    transform: translateY(-2px);
}

.balama-msg-banner-left,
.balama-msg-banner-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.balama-msg-banner-left .balama-msg-user {
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
}

.balama-msg-banner-right .balama-msg-badge-pill {
    background-color: #f17764;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    padding: 2px 9px;
    line-height: 1;
}

.balama-msg-banner-right .balama-msg-text {
    font-size: 14px;
    color: #475569;
}


/* --- 2. SHORTCODE 2 : BLOC / CARTE (Vif & Dynamique) --- */
.balama-msg-card-link {
    text-decoration: none !important;
    display: flex;
    width: 100%;
    height: 100%;
}

.balama-msg-card {
    background-color: #f17764;
    color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(241, 119, 100, 0.2);
    transition: all 0.25s ease-in-out;
}

.balama-msg-card:hover {
    background-color: #e26350;
    box-shadow: 0 8px 20px rgba(241, 119, 100, 0.35);
    transform: translateY(-2px);
}

.balama-msg-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.balama-msg-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.balama-msg-card-body {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.balama-msg-card-count {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
}

.balama-msg-card-label {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.95;
    color: #ffffff;
}


/* --- RESPONSIVE MOBILE --- */
@media (max-width: 600px) {
    .balama-msg-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/*==================================================*/
/*ETOILE COMMENTAIRE ET NOTE*/
/* ⭐ Bouton étoile */
.hp-icon.fas.fa-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background-color: #ff9800;
  color: #ffffff !important;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.hp-icon.fas.fa-star:hover {
  background-color: #e68a00;
  transform: translateY(-1px);
}

/* ⭐ État actif (à la une) */
.hp-listing--featured .hp-icon.fas.fa-star {
  background-color: transparent !important; /* plus de fond */
  color: #ff9800 !important; /* étoile orange */
  border: 2px solid #ff9800; /* contour orange */
  transform: none; /* enlève l'effet zoom */
}



/* ==========================================================================
   CADRE ESPACE PRO (Bordure fine, fond nuancé, effet fixe, coins arrondis)
   Classe Gutenberg : Pro_cadre_menu
   ========================================================================== */

.Pro_cadre_menu {
    background-color: #fff9f6 !important;
    border: 1px solid #b39b96 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    
    box-shadow: 0 4px 15px rgba(145, 118, 113, 0.10) !important;
    transition: none !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.Pro_cadre_menu:hover {
    background-color: #fff9f6 !important;
    border-color: #b39b96 !important;
    box-shadow: 0 4px 15px rgba(145, 118, 113, 0.10) !important;
    transform: none !important;
}

.Pro_cadre_menu h1,
.Pro_cadre_menu h2,
.Pro_cadre_menu h3,
.Pro_cadre_menu h4,
.Pro_cadre_menu h5,
.Pro_cadre_menu p {
    margin: 0 !important;
}


/* ==========================================================================
   EN-TÊTE PRO : AVATAR & BOUTONS D'ACTION
   ========================================================================== */

.Pro_cadre_menu.balama-profil-header-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    width: 100% !important;
}

.balama-profil-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    position: relative !important;
}

.balama-avatar-trigger-wrap {
    cursor: pointer !important;
    position: relative !important;
}

.balama-profil-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    border: 2px solid #b39b96 !important;
}

.balama-profil-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.balama-profil-name {
    font-weight: 800 !important;
    font-size: 19px !important;
    color: #222222 !important; 
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
}

.balama-profil-role {
    font-size: 13px !important;
    color: #61CE70 !important;
    margin-top: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Partie Droite : Boutons d'action */
.balama-profil-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Style de base des boutons d'action (standard) */
.Pro_cadre_menu.balama-profil-header-card a.balama-action-btn,
.balama-gros-boutons-wrap .balama-flex-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    background-color: #ffffff !important;
    border: 1px solid #d4c4bf !important;
    border-radius: 12px !important;
    color: #5c4a47 !important;
    font-size: 18px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.Pro_cadre_menu.balama-profil-header-card a.balama-action-btn i,
.balama-gros-boutons-wrap .balama-flex-btn i {
    font-size: 18px !important;
    line-height: 1 !important;
    color: #5c4a47 !important;
}

/* Survol classique des autres boutons */
.Pro_cadre_menu.balama-profil-header-card a.balama-action-btn:hover,
.balama-gros-boutons-wrap .balama-flex-btn:hover {
    background-color: #F37353 !important;
    border-color: #F37353 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(243, 115, 83, 0.3) !important;
}

.Pro_cadre_menu.balama-profil-header-card a.balama-action-btn:hover i,
.balama-gros-boutons-wrap .balama-flex-btn:hover i {
    color: #ffffff !important;
}


/* ==========================================================================
   BOUTON AJOUTER (Fond vert clair au repos, vert plus foncé au survol)
   ========================================================================== */

.Pro_cadre_menu.balama-profil-header-card a.balama-action-btn.balama-btn-highlight,
.balama-gros-boutons-wrap a.balama-flex-btn.balama-btn-highlight {
    background: rgba(97, 206, 112, 0.25) !important;
    border-color: #61CE70 !important;
}

.Pro_cadre_menu.balama-profil-header-card a.balama-action-btn.balama-btn-highlight i,
.balama-gros-boutons-wrap a.balama-flex-btn.balama-btn-highlight i {
    color: #61CE70 !important;
}

/* Survol du bouton Ajouter : Vert plus foncé et icône blanche */
.Pro_cadre_menu.balama-profil-header-card a.balama-action-btn.balama-btn-highlight:hover,
.balama-gros-boutons-wrap a.balama-flex-btn.balama-btn-highlight:hover {
    background: #4ab759 !important;
    border-color: #4ab759 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(74, 183, 89, 0.3) !important;
}

.Pro_cadre_menu.balama-profil-header-card a.balama-action-btn.balama-btn-highlight:hover i,
.balama-gros-boutons-wrap a.balama-flex-btn.balama-btn-highlight:hover i {
    color: #ffffff !important;
}


/* ==========================================================================
   BADGES ET CONTENEURS FLEXIBLES
   ========================================================================== */

.Pro_cadre_menu.balama-profil-header-card .balama-action-btn.has-msgs .balama-msg-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background-color: #e74c3c !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 3px 6px !important;
    border-radius: 12px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
}

.balama-gros-boutons-wrap {
    width: 90% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.balama-gros-boutons-wrap .balama-flex-btn {
    flex: 1 !important;
    box-shadow: 0 2px 8px rgba(145, 118, 113, 0.08) !important;
}


/* ==========================================================================
   MENUS DÉROULANTS (PC & MOBILE)
   ========================================================================== */

.balama-dropdown-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    min-width: 180px;
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 1px solid #e2d7d4;
    z-index: 99999;
    overflow: hidden;
    text-align: left;
}

.balama-dropdown-menu a,
.balama-profil-solo-dropdown a {
    display: block;
    padding: 12px 16px;
    color: #5c4a47 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1px solid #f0eae8;
}

.balama-dropdown-menu a.balama-logout-link,
.balama-profil-solo-dropdown a.balama-logout-link {
    color: #e74c3c !important;
    border-bottom: none;
}

.balama-dropdown-profil-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.balama-profil-avatar-solo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important; /* <--- Augmente cette valeur (ex: 20px, 24px) ou mets "50%" pour un cercle parfait */
    object-fit: cover;
    border: 2px solid #b39b96;
    box-shadow: 0 4px 10px rgba(145, 118, 113, 0.15);
    display: block;
}

.balama-profil-solo-dropdown {
    display: none;
    position: fixed;
    left: 10%;
    width: 80% !important;
    max-width: 500px;
    background: #ffffff !important;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    border: 1px solid #e2d7d4;
    z-index: 99999;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}



/* ==========================================================================
   STYLE COMMUN BOUTONS (Compte & Recherche)
   ========================================================================== */
.btn-compte-icone, 
.btn-recherche-icone {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: transparent;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    border-radius: 10px;
    transition: all 0.25s ease;
    text-decoration: none !important;
}

/* Configuration des bulles de texte (Tooltips) */
.btn-compte-icone::after,
.btn-recherche-icone::after {
    content: attr(data-label);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    color: white;
    z-index: 100;
}

/* Déclenchement du texte au survol */
.btn-compte-icone:hover::after,
.btn-recherche-icone:hover::after {
    opacity: 1;
    visibility: visible;
}


/* ==========================================================================
   COMPORTEMENT AU HOVER : ÉTAT NOIR (Déconnecté / Recherche par défaut)
   ========================================================================== */
.btn-compte-icone.not-connected:hover,
.btn-recherche-icone.not-connected:hover,
.btn-recherche-icone:not(.connected):hover {
    background: #000000 !important;
    border-color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.btn-compte-icone.not-connected:hover::after,
.btn-recherche-icone.not-connected:hover::after,
.btn-recherche-icone:not(.connected):hover::after { 
    background: #000000 !important; 
}


/* ==========================================================================
   COMPORTEMENT AU HOVER : ÉTAT VERT (Connecté / Recherche active)
   ========================================================================== */
.btn-compte-icone.connected:hover,
.btn-recherche-icone.connected:hover {
    background: #61CE70 !important;
    border-color: #61CE70 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(97, 206, 112, 0.4);
}
.btn-compte-icone.connected:hover::after,
.btn-recherche-icone.connected:hover::after { 
    background: #61CE70 !important; 
}


/* ==========================================================================
   ADAPTATION MOBILE & TABLETTE (Écrans inférieurs à 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
    .btn-compte-icone::after,
    .btn-recherche-icone::after,
    .btn-compte-icone:hover::after,
    .btn-recherche-icone:hover::after {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .btn-compte-icone:hover,
    .btn-recherche-icone:hover {
        transform: none !important;
    }
}




/* ==========================================================================
   b0826 - STYLE GLOBAL DES EN-TÊTES BALAMA (Blocs intacts + Titre recentré)
   ========================================================================== */

/* 1. CONTENEURS DE BASE (Pas de flex global, blocs internes totalement libres) */
.b0826-balama-header-balamag,
.b0826-balama-header-publication,
.b0826-balama-header-service,
.b0826-balama-header-pro,
.b0826-balama-header-espace-pro,
.b0826-balama-header-compte-pro,
.b0826-balama-header-chezvous,
.b0826-balama-header-commune {
    font-family: 'Roboto', sans-serif !important;
    width: 100%;
    min-height: 80px !important;
    margin: 10px 0 !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06), 
                0 1px 3px rgba(16, 24, 40, 0.04) !important;
    padding: 18px 25px !important; /* Ajusté pour centrer naturellement les titres */
    box-sizing: border-box !important;
}

/* 2. FONDS SPÉCIFIQUES DE CHAQUE EN-TÊTE */
.b0826-balama-header-balamag {
    background: radial-gradient(circle at 15% 20%, #f0f2f5 0%, transparent 65%), radial-gradient(circle at 85% 80%, #e4e7ec 0%, transparent 65%), #f8f9fa !important;
}
.b0826-balama-header-publication {
    background: radial-gradient(circle at 15% 20%, #fbd5f4 0%, transparent 65%), radial-gradient(circle at 85% 80%, #f8c1ee 0%, transparent 65%), #fdf2fb !important;
}
.b0826-balama-header-service {
    background: radial-gradient(circle at 15% 20%, #ffebd9 0%, transparent 65%), radial-gradient(circle at 85% 80%, #ffe4d0 0%, transparent 65%), #fff6f0 !important;
}
.b0826-balama-header-pro {
    background: radial-gradient(circle at 15% 20%, #d1f4ed 0%, transparent 65%), radial-gradient(circle at 85% 80%, #b8ece1 0%, transparent 65%), #f0faf8 !important;
}
.b0826-balama-header-espace-pro {
    background: radial-gradient(circle at 15% 20%, #e2e8f0 0%, transparent 65%), radial-gradient(circle at 85% 80%, #cbd5e1 0%, transparent 65%), #f1f5f9 !important;
    margin: 10px 0 20px 0 !important;
}
.b0826-balama-header-compte-pro {
    background: radial-gradient(circle at 15% 20%, rgba(243, 115, 83, 0.45) 0%, transparent 70%), radial-gradient(circle at 85% 80%, rgba(145, 118, 113, 0.40) 0%, transparent 70%), #f7e8e4 !important;
    margin: 10px 0 20px 0 !important;
}
.b0826-balama-header-chezvous {
    background: radial-gradient(circle at 15% 20%, #d4f4f2 0%, transparent 65%), radial-gradient(circle at 85% 80%, #b5eaea 0%, transparent 65%), #f0fbfb !important;
}
.b0826-balama-header-commune {
    background: radial-gradient(circle at 15% 20%, #ebd6d0 0%, transparent 65%), radial-gradient(circle at 85% 80%, #dec0b8 0%, transparent 65%), #f7f1ef !important;
}


/* 3. TYPOGRAPHIE GLOBALE & CENTRAGE HARMONIEUX */
[class*="b0826-balama-header-"] h1,
[class*="b0826-balama-header-"] .elementor-heading-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    margin: 0 auto !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

[class*="b0826-balama-header-"] h2 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    margin: 0 auto !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

[class*="b0826-balama-header-"] h3 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    margin: 0 auto !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

[class*="b0826-balama-header-"] h4 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin: 0 auto !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

[class*="b0826-balama-header-"] p,
[class*="b0826-balama-header-"] span,
[class*="b0826-balama-header-"] a {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    margin: 0 auto !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-align: center !important;
}


/* 4. COULEURS SPÉCIFIQUES PAR EN-TÊTE */

/* Balamag */
.b0826-balama-header-balamag h1, .b0826-balama-header-balamag .elementor-heading-title { color: #1d2939 !important; }
.b0826-balama-header-balamag h2 { color: #344054 !important; }
.b0826-balama-header-balamag p, .b0826-balama-header-balamag span, .b0826-balama-header-balamag a { color: #475467 !important; }
.b0826-balama-header-balamag a:hover { color: #1d2939 !important; }

/* Publication */
.b0826-balama-header-publication h1, .b0826-balama-header-publication .elementor-heading-title, .b0826-balama-header-publication h2, .b0826-balama-header-publication p, .b0826-balama-header-publication span, .b0826-balama-header-publication a { color: #5a5757 !important; }
.b0826-balama-header-publication a:hover { color: #d12ea6 !important; }

/* Service */
.b0826-balama-header-service h1, .b0826-balama-header-service .elementor-heading-title, .b0826-balama-header-service h2, .b0826-balama-header-service p, .b0826-balama-header-service span, .b0826-balama-header-service a { color: #5a5757 !important; }
.b0826-balama-header-service a:hover { color: #f27210 !important; }

/* Pro */
.b0826-balama-header-pro h1, .b0826-balama-header-pro .elementor-heading-title, .b0826-balama-header-pro h2, .b0826-balama-header-pro p, .b0826-balama-header-pro span, .b0826-balama-header-pro a { color: #5a5757 !important; }
.b0826-balama-header-pro a:hover { color: #05a485 !important; }

/* Espace Pro */
.b0826-balama-header-espace-pro h1, .b0826-balama-header-espace-pro .elementor-heading-title { color: #0f172a !important; }
.b0826-balama-header-espace-pro h2 { color: #1e293b !important; }
.b0826-balama-header-espace-pro p, .b0826-balama-header-espace-pro span, .b0826-balama-header-espace-pro a { color: #334155 !important; }
.b0826-balama-header-espace-pro a:hover { color: #2563eb !important; }

/* Compte Pro */
.b0826-balama-header-compte-pro h1, .b0826-balama-header-compte-pro .elementor-heading-title, .b0826-balama-header-compte-pro h2, .b0826-balama-header-compte-pro p, .b0826-balama-header-compte-pro span, .b0826-balama-header-compte-pro a { color: #4a4545 !important; }
.b0826-balama-header-compte-pro a:hover { color: #f37353 !important; }

/* Chezvous */
.b0826-balama-header-chezvous h1, .b0826-balama-header-chezvous .elementor-heading-title, .b0826-balama-header-chezvous h2, .b0826-balama-header-chezvous p, .b0826-balama-header-chezvous span, .b0826-balama-header-chezvous a { color: #5a5757 !important; }
.b0826-balama-header-chezvous a:hover { color: #20b2aa !important; }

/* Commune */
.b0826-balama-header-commune h1, .b0826-balama-header-commune .elementor-heading-title, .b0826-balama-header-commune h2, .b0826-balama-header-commune p, .b0826-balama-header-commune span, .b0826-balama-header-commune a { color: #5a5757 !important; }
.b0826-balama-header-commune a:hover { color: #9b604d !important; }


/* 5. ADAPTATION RESPONSIVE MOBILE (< 768px) */
@media screen and (max-width: 768px) {
    [class*="b0826-balama-header-"] {
        padding: 12px 15px !important;
        min-height: auto !important;
    }
    [class*="b0826-balama-header-"] h1,
    [class*="b0826-balama-header-"] .elementor-heading-title {
        font-size: 22px !important;
    }
    [class*="b0826-balama-header-"] h2 {
        font-size: 18px !important;
    }
    [class*="b0826-balama-header-"] p,
    [class*="b0826-balama-header-"] span,
    [class*="b0826-balama-header-"] a {
        font-size: 15px !important;
    }
}


/* ==========================================================================
   BALAMA - Style fil d'Ariane (PC & Mobile avec marges ajustées)
   ========================================================================== */

.balama-breadcrumb {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    margin-bottom: 20px; /* Marge par défaut sur ordinateur */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Les liens cliquables ("Tous les services" et "Rubrique principale") */
.balama-breadcrumb a {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.balama-breadcrumb a:hover {
    color: #ed7e2b; /* Couleur orange Balama au survol */
}

/* Éléments intermédiaires sans lien */
.balama-breadcrumb .balama-item {
    color: #64748b;
    white-space: nowrap;
}

/* Séparateur */
.balama-breadcrumb .balama-sep {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 300;
    user-select: none;
}

/* Dernière catégorie active (où l'on se trouve) */
.balama-breadcrumb .balama-current {
    color: #0f172a;
    font-weight: 500;
    white-space: nowrap;
}

/* --- ADAPTATION MOBILE (15px en haut, 10px en bas, scroll horizontal) --- */
@media screen and (max-width: 768px) {
    .balama-breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        
        /* Tes marges spécifiques sur mobile */
        margin-top: 15px !important;
        margin-bottom: 10px !important;
    }

    /* Masque la barre de défilement sur mobile */
    .balama-breadcrumb::-webkit-scrollbar {
        display: none;
    }
    .balama-breadcrumb {
        scrollbar-width: none;
    }
}

/* ==========================================================================
   BADGES DE MESSAGES EN LISTE (ORANGE COMPACT)
   ========================================================================== */

/* 1. Base commune du petit badge (26px) */
.hp-icon.fas.fa-envelope,
.hp-icon.fas.fa-envelope-open,
.hp-icon.fa-envelope,
.hp-icon.fa-envelope-open {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;
  border-radius: 8px;

  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
}

/* Masquer l'icône brute par défaut */
.hp-icon.fas.fa-envelope::before,
.hp-icon.fas.fa-envelope-open::before,
.hp-icon.fa-envelope::before,
.hp-icon.fa-envelope-open::before {
  display: none !important;
}

/* Typographie FontAwesome */
.hp-icon.fas.fa-envelope::after,
.hp-icon.fas.fa-envelope-open::after,
.hp-icon.fa-envelope::after,
.hp-icon.fa-envelope-open::after {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}


/* --------------------------------------------------------------------------
   2. ÉTAT : NON LU (fa-envelope) - Orange vif + Enveloppe FERMÉE
   -------------------------------------------------------------------------- */
.hp-icon.fas.fa-envelope,
.hp-icon.fa-envelope {
  background-color: #f97316;
  box-shadow: 0 2px 5px rgba(249, 115, 22, 0.25);
}

.hp-icon.fas.fa-envelope::after,
.hp-icon.fa-envelope::after {
  content: "\f0e0" !important; /* Code FontAwesome Enveloppe Fermée */
  color: #ffffff;
}

.hp-icon.fas.fa-envelope:hover,
.hp-icon.fa-envelope:hover {
  background-color: #ea580c;
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 8px rgba(249, 115, 22, 0.35);
}


/* --------------------------------------------------------------------------
   3. ÉTAT : LU (fa-envelope-open) - Orange pastel + Enveloppe OUVERTE
   -------------------------------------------------------------------------- */
.hp-icon.fas.fa-envelope-open,
.hp-icon.fa-envelope-open,
.hp-icon.fas.fa-envelope.is-read,
.hp-icon.fas.fa-envelope.read {
  background-color: #fff7ed;
  border: 1px solid #ffedd5;
  box-shadow: none;
}

.hp-icon.fas.fa-envelope-open::after,
.hp-icon.fa-envelope-open::after,
.hp-icon.fas.fa-envelope.is-read::after,
.hp-icon.fas.fa-envelope.read::after {
  content: "\f2b6" !important; /* Code FontAwesome Enveloppe Ouverte */
  color: #fb923c;
}

.hp-icon.fas.fa-envelope-open:hover,
.hp-icon.fa-envelope-open:hover,
.hp-icon.fas.fa-envelope.is-read:hover,
.hp-icon.fas.fa-envelope.read:hover {
  background-color: #ffedd5;
  border-color: #fed7aa;
  transform: translateY(-1px);
}