/*  Theme Name: Astra Child  Theme URI: [https://buginformatique13.fr/]  Description: Thème Enfant pour Astra.  Author: Krea-numerique  Author URI: [https://buginformatique13.fr/]  Template: astra  Version: 1.0.0  Text Domain: astra-child */ /* Ajoutez ici le CSS spécifique à votre thème enfant... */ /* général tout le site */ .site-logo-img img { border-radius:50px !important; } /* menu en gras */ .main-navigation ul li a { font-weight:bold; } /* couleur lien pied de page */ .site-footer a, .site-footer ul li a { text-decoration: none !important; color: #040935; font-weight: bold; } /* couleur lien pied de page */ .site-footer a:hover, .site-footer ul li a:hover { color: #f4a630 !important; } .uagb-button__wrapper a .uagb-button__link { color: #040935; font-weight: bold; } .uagb-button__wrapper a .uagb-button__link:hover { color: #ffffff !important; } /*** PAGE ACCUEIL ***/ /* Cibler le lien du titre et supprimer le soulignement */ .site-branding .site-title a { text-decoration: none !important; } /***** modale du site *****/ div.popmake button.popmake-close { margin-top: 10px; margin-right: 10px; } .glsr-review-avatar img { border-radius:30px; } /***** Avis du site *****/ /* Style des avis façon carte Google */ /* 1. Style des avis individuels (les "cartes") */ .glsr-review { /* Fond blanc */ background-color: #ffffff; /* Légère ombre pour donner un effet de carte qui ressort */ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); /* Bords légèrement arrondis */ border-radius: 8px; /* Ajoute de l'espace à l'intérieur de la carte (très important) */ padding: 25px; /* Marge entre chaque avis s'ils sont empilés verticalement */ margin-bottom: 20px; /* Assure la boîte est bien définie */ box-sizing: border-box; border: 1px solid #e0e0e0; } /* CONFIGURE LA GRILLE EN 5 COLONNES */ /**********************************************/ /* 1. DISPOSITION DES CARTES (GRILLE 5 COLONNES) */ /**********************************************/ /* Affichage en grille de cinq colonnes sur les grands écrans */ .glsr-reviews { display: grid !important; /* Crée 5 colonnes de largeur égale (5 x 1fr). Utilisation de !important en cas de conflit */ grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important; gap: 10px !important; /* Réduction de l'espace entre les cartes pour que tout rentre */ margin-bottom: 0 !important; align-items: start !important; } /* S'assurer que les cartes individuelles n'ont pas de marge verticale superflue */ .glsr-reviews .glsr-review { margin-bottom: 0 !important; } /* GESTION DU RESPONSIVE (TABLETTE) */ @media (min-width: 1024px) and (max-width: 1400px) { .glsr-reviews { /* Entre 1024px et 1400px de large, on passe à 4 colonnes pour l'équilibre */ grid-template-columns: 1fr 1fr 1fr 1fr !important; } } @media (min-width: 769px) and (max-width: 1023px) { .glsr-reviews { /* Sur les tablettes plus petites, on passe à 3 colonnes */ grid-template-columns: 1fr 1fr 1fr !important; } } /* Ajustement pour les très petits écrans (smartphones) */ @media (max-width: 768px) { .glsr-reviews { grid-template-columns: 1fr !important; /* Revertit à une seule colonne */ } } /************************************/ /* 2. STYLE DE LA CARTE INDIVIDUELLE */ /************************************/ .glsr-review { /* Fond blanc et bordure (pour éviter la confusion avec l'arrière-plan) */ background-color: #ffffff !important; border: 1px solid #e0e0e0; /* Bordure fine et claire */ /* Ombre de boîte (légèrement prononcée) */ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); /* Coins arrondis */ border-radius: 8px; /* Espace intérieur (padding) */ padding: 20px; box-sizing: border-box; /* Ajout d'une hauteur minimale pour un affichage uniforme si les avis sont courts */ min-height: 180px; } /*************************************************/ /* 3. DISPOSITION INTERNE "PAYSAGE" (Titre/Étoiles) */ /*************************************************/ /* Conteneur pour le Titre et les Étoiles - La CLÉ de l'effet "Paysage" */ .glsr-review > div:first-child { display: flex; /* Active l'alignement horizontal */ justify-content: space-between; /* Écarte le titre à gauche et les étoiles à droite */ align-items: flex-start; /* Alignement en haut */ } /* Positionnement du Titre */ .glsr-review-title { margin-right: 15px; flex-basis: 70%; /* Le titre prend 70% de la largeur */ } .glsr-review-title h4 { margin-top: 0 !important; margin-bottom: 0 !important; font-size: 1.1em; /* Taille légèrement plus grande */ } /* Positionnement des Étoiles */ .glsr-review-rating { flex-basis: 30%; /* Les étoiles prennent 30% de la largeur */ display: flex; justify-content: flex-end; /* Aligner les étoiles à droite */ margin-top: 0 !important; margin-bottom: 0 !important; } /* Masquer la date par défaut pour le style minimaliste */ .glsr-review-date { display: none; } /* Style de l'auteur et de l'avatar (si activé dans le plugin) */ .glsr-review-author { display: flex; align-items: center; font-size: 0.9em; color: #555; font-weight: bold; } .glsr-review-author img { border-radius: 50%; /* Rendre l'avatar rond */ margin-right: 10px; width: 35px; height: 35px; object-fit: cover; } /*** PAGE CONTACT ***/ /* Placement picto */ #post-100 .uagb-block-9145a363, #post-100 .uagb-block-46a636c7 { right: 20px; } /* Cache l'élément badge reCAPTCHA */ .grecaptcha-badge { display: none; } @media screen and (max-width: 768px) { #post-100 .uagb-block-9145a363, #post-100 .uagb-block-46a636c7 { right: 0px; } .titre-zone-intervention { text-align:center !important; } } /*** PAGE NOS SERVICE ***/ .uagb-buttons__wrap.uagb-buttons-layout-wrap { display:flex; justify-content: center; } div.pum-container.popmake { border: solid 3px #d75e09 !important; border-radius: 20px !important; max-width: 50%; padding: 30px; } .pum-content h3, .pum-content h4 { margin: 20px; } .pum-content p, .pum-content ul li { line-height: 24px; } /* Ciblage spécifique pour les écrans de moins de 768px (smartphones et petites tablettes) */ @media screen and (max-width: 768px) { /* 1. Rendre le conteneur flexible sur toute la largeur de l'écran */ .pum-container { /* Permet au conteneur de prendre 95% de la largeur, laissant une petite marge */ width: 95% !important; max-width: 95% !important; /* 2. Désactiver le centrage par transformation qui cause le décalage */ left: 50% !important; /* Maintient le point de départ au centre */ transform: translateX(-50%) !important; /* Force le centrage horizontal seulement (la transformation verticale peut rester si nécessaire) */ /* 3. Assurer que la modale est bien positionnée verticalement */ top: 50% !important; /* Maintient le point de départ vertical au centre */ /* Option de centrage : si le transform ci-dessus ne suffit pas, essayez : */ /* margin-left: auto !important; margin-right: auto !important; */ } /* S'assurer qu'aucun élément de contenu ne force le débordement horizontal */ .pum-container * { max-width: 100%; box-sizing: border-box; /* S'assurer que le padding/border n'ajoute pas de largeur */ } /*#post-77 .wp-block-uagb-info-box .uagb-ifb-content { text-align:center; }*/ #post-77 .entry-content .wp-block-uagb-container .uagb-container-inner-blocks-wrap { margin-top: 90px; } #post-78 .entry-content .wp-block-uagb-container .wp-block-uagb-container { margin-top: 100px; } .wp-block-uagb-container.uagb-block-8de9c239 { top: 19px; } } /* === NOUVEAU : EMPÊCHER LE DÉFILEMENT HORIZONTAL === */ /* Empêche le conteneur principal de la modale de déborder horizontalement */ .pum-container { overflow-x: hidden !important; } /* Ciblage spécifique pour les écrans de moins de 768px */ @media screen and (max-width: 768px) { /* === RÈGLES EXISTANTES (MAINTENUES) === */ body { overflow-x: hidden !important; } .pum-container { width: 95% !important; max-width: 95% !important; left: 50% !important; transform: translateX(-50%) !important; overflow-x: hidden !important; } .pum-container .uagb-block-wrapper, .pum-container div, .pum-container * { max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .pum-container .uagb-separator { max-width: 100% !important; width: 100% !important; } /* === NOUVEAU : GÉRER LE DÉBORDEMENT DE TEXTE === */ .pum-container p, .pum-container h1, .pum-container h2, .pum-container h3, .pum-container h4, .pum-container h5, .pum-container h6, .pum-container li, .pum-container span { word-wrap: break-word !important; /* Force les mots longs à se couper */ overflow-wrap: break-word !important; /* Version moderne de word-wrap */ white-space: normal !important; /* Assure que le texte se retourne normalement */ max-width: 100% !important; /* Répète pour une sécurité maximale */ } /* Pour les listes à puces (