.elementor-26404 .elementor-element.elementor-element-5195f659{--display:flex;}.elementor-26404 .elementor-element.elementor-element-7e3df5b1 > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-26404 .elementor-element.elementor-element-7e3df5b1{text-align:left;}/* Start custom CSS for container, class: .elementor-element-5195f659 *//* =========================================================
   DESIGN BULLE SMASH BALLOON REVIEWS
   ========================================================= */

/* 1. Nettoyage du conteneur parent pour faire de la place en bas ET créer l'espace latéral */
#sb-reviews-container-1 .sb-post-item-wrap {
    background: transparent !important;
    /* 5px à gauche + 5px à droite = 10px d'espace total entre chaque bulle */
    padding: 0 5px 70px 5px !important; 
}

/* 2. La Bulle (Carte Principale) */
#sb-reviews-container-1 .sb-post-item {
    background-color: #2D3A63 !important; /* Le bleu sombre de votre image */
    border-radius: 12px !important;
    padding: 30px 25px 25px 25px !important;
    display: flex !important;
    flex-direction: column !important; /* Active le mode Flexbox vertical */
    position: relative !important;
    height: 100% !important;
    overflow: visible !important; /* Indispensable pour laisser sortir la pointe et le nom */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
}

/* 3. La pointe de la bulle (Triangle en bas à gauche) */
#sb-reviews-container-1 .sb-post-item::after {
    content: '' !important;
    position: absolute !important;
    bottom: -14px !important; /* Fait dépasser le triangle en bas */
    left: 45px !important; /* Position de la pointe */
    border-width: 15px 15px 0 15px !important;
    border-style: solid !important;
    border-color: #2D3A63 transparent transparent transparent !important;
}

/* 4. Réorganisation de l'ordre des éléments dans la bulle avec Flexbox */

/* A. Les Étoiles (En haut) */
#sb-reviews-container-1 .sb-item-rating {
    order: 1 !important;
    margin: 0 0 15px 0 !important;
}
#sb-reviews-container-1 .sb-item-rating-icon svg {
    fill: #FFC107 !important; /* Couleur Jaune/Or */
    width: 20px !important;
    height: 20px !important;
}

/* B. Le Texte du commentaire (Au milieu) */
#sb-reviews-container-1 .sb-item-text {
    order: 2 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    line-height: 1.6em !important;
    margin: 0 0 20px 0 !important;
}

/* C. Le lien "Lire plus" */
#sb-reviews-container-1 .sb-expand-on-click {
    color: #44A0FF !important; /* Bleu clair */
    font-weight: bold !important;
    text-transform: none !important;
}

/* D. Le Logo Google (Forcé tout en bas de la bulle) */
#sb-reviews-container-1 .sb-item-provider-icon {
    order: 3 !important;
    position: static !important; /* Enlève la position par défaut du plugin */
    margin-top: auto !important; /* Pousse le logo tout en bas */
    display: block !important;
    padding-top: 15px !important;
}
#sb-reviews-container-1 .sb-item-provider-icon img {
    max-width: 75px !important;
}

/* 5. Le Profil de l'Auteur (Extrait de la bulle et placé en dessous) */
#sb-reviews-container-1 .sb-item-author-date-ctn {
    position: absolute !important;
    bottom: -65px !important; /* Positionné sous la bulle */
    left: 20px !important; /* Aligné avec la pointe de la bulle */
    width: auto !important;
    margin: 0 !important;
}

#sb-reviews-container-1 .sb-item-name-date {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Nom de l'auteur */
#sb-reviews-container-1 .sb-item-author-name {
    color: #FFFFFF !important; /* Mettez la couleur du texte de votre page si le fond n'est pas sombre */
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
}

/* Date (ex: "5 mois il y a") */
#sb-reviews-container-1 .sb-item-author-date {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 12px !important;
}

/* Photo de profil (Si vous l'activez dans les réglages Smash Balloon) */
#sb-reviews-container-1 .sb-item-author-img {
    margin-right: 12px !important;
}
#sb-reviews-container-1 .sb-item-author-img img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid #FFFFFF !important;
}

/* --- FORCER DES HAUTEURS ÉGALES (Écrase le mode "Masonry" du plugin) --- */

/* 1. Transforme le conteneur principal en grille parfaite aux largeurs forcées */
#sb-reviews-container-1 .sb-feed-posts {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* C'est ici la magie : force des largeurs 100% égales */
    gap: 10px !important; 
    height: auto !important; 
    position: relative !important;
}

/* 2. Annule le placement figé et gère la largeur des cartes */
#sb-reviews-container-1 .sb-post-item-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important; /* Empêche le texte de déformer la colonne */
    display: flex !important;
    padding: 0 0 70px 0 !important; 
}

/* S'assure que la bulle bleue prend toute la largeur de sa propre colonne */
#sb-reviews-container-1 .sb-post-item {
    width: 100% !important;
}

/* 3. Adaptation responsive (Tablette et Mobile) */
@media (max-width: 1024px) {
    #sb-reviews-container-1 .sb-feed-posts {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes sur tablette */
    }
}

@media (max-width: 768px) {
    #sb-reviews-container-1 .sb-feed-posts {
        grid-template-columns: 1fr !important; /* 1 colonne sur téléphone */
    }
}/* End custom CSS */