/** Theme Name: bkg Author: Vertuoz Author URI: https://www.vertuoz.fr/ Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme! Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bkg Template: astra */ /* =========================================================================== Flèche « retour en haut » Cotes relevées au getComputedStyle sur bkgfrance.com (#scroll-top) : cercle 56px, fond #276AB2, ombre rgba(0,0,0,.1) 0 3px 24px, transition .5s, bas 91px / droite 15px, longue flèche fine blanche de 22px, aucun survol. Astra sort par défaut un carré de 32px en #046BD2 sans ombre : on l'habille plutôt que de le remplacer, pour conserver sa logique d'apparition au scroll. =========================================================================== */ #ast-scroll-top { width: 56px; height: 56px; line-height: 56px; padding: 0; bottom: 91px; right: 15px; border-radius: 50px; background-color: #276AB2; box-shadow: rgba(0, 0, 0, .1) 0 3px 24px; transition: .5s ease-in-out; text-align: center; } /* le chevron d'Astra cède la place à la longue flèche fine de l'original */ #ast-scroll-top .ast-arrow-svg { display: none; } #ast-scroll-top::before { content: ""; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 19.5V5.5M5.5 12L12 5.5 18.5 12'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 22px; } /* =========================================================================== Cartes d'articles (page Actualités) — cotes relevées sur bkgfrance.com (.blog-item) ombre rgba(0,0,0,.05) 0 0 40px 5px, angles droits, image 350px en cover, bloc info 23/30/20, date #0D6EFD, titre 20/500 noir, extrait 16 lh 28.8, bouton "LIRE L'ARTICLE" : pilule bordée #276AB2, fond blanc, MAJ. Survols de l'original : carte translateY(-10px), bouton -> #00699F blanc, liens du bloc info -> #1E64B4. =========================================================================== */ .bkg-actus .elementor-post__card { border: 0; border-radius: 0; box-shadow: rgba(0, 0, 0, .05) 0 0 40px 5px; overflow: visible; transition: transform .3s ease-in-out; } .bkg-actus .elementor-post__card:hover { transform: translateY(-10px); } .bkg-actus .elementor-post__thumbnail__link { margin: 0; order: 0; } .bkg-actus .elementor-post__thumbnail { padding-bottom: 0 !important; height: 350px; } /* !important : la feuille du widget force height:auto sur l image */ .bkg-actus .elementor-post__thumbnail img { position: static; height: 350px !important; object-fit: cover; width: 100%; } /* Elementor rend la date en pied de carte, apres le bouton ; l original la place entre l image et le titre. La carte etant en flex, on la remonte avec order. */ .bkg-actus .elementor-post__meta-data { order: 1; margin: 0; padding: 23px 30px 0; border: 0; font-size: 16px; line-height: 28.8px; color: #0D6EFD; } /* la carte occupe toute la hauteur de sa rangee et le bloc texte prend le reste, pour que "Lire l article" tombe en bas quel que soit la longueur de l extrait. */ .bkg-actus .elementor-post { display: flex; } .bkg-actus .elementor-post__card { height: 100%; width: 100%; } .bkg-actus .elementor-post__text { order: 2; padding: 0 30px 20px; margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .bkg-actus .elementor-post__read-more { margin-top: auto; align-self: flex-start; } /* l'original précède la date d'une icône calendrier ; Font Awesome n'étant pas chargé ici, on la pose en SVG de fond. */ .bkg-actus .elementor-post__meta-data .elementor-post-date::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%230D6EFD'%3e%3cpath d='M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 15px; } .bkg-actus .elementor-post__title { margin: 0 0 25px; font-size: 20px; line-height: 24px; } .bkg-actus .elementor-post__title a { color: #000; font-weight: 500; } .bkg-actus .elementor-post__excerpt p { margin: 20px 0 25px; font-size: 16px; line-height: 28.8px; color: #000; } .bkg-actus .elementor-post__text a:hover, .bkg-actus .elementor-post__title a:hover { color: #1E64B4; } .bkg-actus .elementor-post__read-more { display: inline-block; padding: 8px 14px; border: 1px solid #276AB2; border-radius: 30px; background: #fff; color: #276AB2; font-size: 16px; font-weight: 400; text-transform: uppercase; text-decoration: none; transition: .3s ease-in-out; } /* !important + :visited : sans ca, la couleur des liens deja visites (violet) l emporte et le libelle devient illisible sur le fond bleu. L original a le meme !important. */ .bkg-actus .elementor-post__read-more, .bkg-actus .elementor-post__read-more:visited { color: #276AB2; } .bkg-actus .elementor-post__read-more:hover, .bkg-actus .elementor-post__read-more:visited:hover, .bkg-actus .elementor-post__read-more:focus { background: #00699F; color: #fff !important; border-color: #00699F; } /* =========================================================================== Pagination Actualités — cotes relevées sur bkgfrance.com : pastilles rondes 40x40 (radius 50px), 16px/400, espacées de 10px. « (precedent, inactif) : texte #6C757D, bord #DEE2E6, fond blanc page active : fond #276AB2, texte blanc, bord #0D6EFD autres pages et » : texte et bord #017DBD, fond blanc =========================================================================== */ .bkg-actus .elementor-pagination { display: flex; justify-content: center; align-items: center; margin-top: 10px; } .bkg-actus .elementor-pagination .page-numbers { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 10px 0 0; padding: 0; border: 1px solid #017DBD; border-radius: 50px; background: #fff; color: #017DBD; font-size: 16px; font-weight: 400; line-height: 28px; text-decoration: none; transition: .3s ease-in-out; } .bkg-actus .elementor-pagination .page-numbers.current { background: #276AB2; border-color: #0D6EFD; color: #fff; } /* la flèche « est grisée sur l'original */ .bkg-actus .elementor-pagination .page-numbers.prev { color: #6C757D; border-color: #DEE2E6; } .bkg-actus .elementor-pagination .page-numbers:hover:not(.current) { background: #017DBD; border-color: #017DBD; color: #fff; } .bkg-actus .elementor-pagination .page-numbers.prev:hover { background: #6C757D; border-color: #6C757D; color: #fff; } /* =========================================================================== Pagination — cotes relevées sur bkgfrance.com : pastilles rondes 40x40, border-radius 50px, 10px d'écart, 16px/400. Actif : fond #276AB2, texte blanc, bordure #0D6EFD Numéro : fond blanc, texte + bordure #017DBD « : texte #6C757D, bordure #DEE2E6 (état inactif sur la 1re page) =========================================================================== */ .bkg-actus .elementor-pagination { display: flex; justify-content: center; align-items: center; margin-top: 35px; } .bkg-actus .elementor-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 10px 0 0; padding: 0; border: 1px solid #017DBD; border-radius: 50px; background: #fff; color: #017DBD; font-size: 16px; font-weight: 400; line-height: 28px; text-decoration: none; transition: .3s ease-in-out; } .bkg-actus .elementor-pagination .page-numbers.current { background: #276AB2; border-color: #0D6EFD; color: #fff; } /* les chevrons « et » : gris quand ils ne mènent nulle part */ .bkg-actus .elementor-pagination .page-numbers.prev, .bkg-actus .elementor-pagination .page-numbers.next { color: #6C757D; border-color: #DEE2E6; } .bkg-actus .elementor-pagination .page-numbers:hover:not(.current) { background: #017DBD; border-color: #017DBD; color: #fff; } /* =========================================================================== Liste à coches — classe « bkg-liste-coche » posée sur un widget Éditeur de texte d'Elementor (onglet Avancé > Classes CSS). Le client écrit sa liste à puces dans l'éditeur visuel ; chaque ligne reçoit sa coche ici, il n'a donc rien d'autre à faire qu'appuyer sur Entrée. Puce de bkgfrance.com : Font Awesome check-circle plein, 20px, #276AB2, à 4px du haut, texte décalé de 30px. Dessinée en SVG : Font Awesome n'est pas chargé sur toutes les pages. =========================================================================== */ .bkg-liste-coche ul { list-style: none; margin: 0; padding: 0; } .bkg-liste-coche li { position: relative; padding-left: 30px; margin: 0 0 var(--bkg-liste-ecart, 18px); } /* L'espace sous la liste se règle sur le widget (Avancé > Marges internes), l'écart entre les lignes par --bkg-liste-ecart (Avancé > CSS personnalisé). */ .bkg-liste-coche li:last-child { margin-bottom: 0; } .bkg-liste-coche li::before { content: ""; position: absolute; left: 0; top: 3px; top: calc((1lh - 20px) / 2); /* centrée sur la 1re ligne, quel que soit l'interligne */ width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23276AB2' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") no-repeat center / contain; } /* =========================================================================== Trombinoscope (À propos) — chaque fiche est un conteneur Elementor à la classe « bkg-equipe-carte » (Avancé > Classes CSS) : Flip Box en fondu (photo devant, bio derrière), puis prénom et rôle en titres. Fond, arrondi, ombres normale et au survol sont des réglages natifs du conteneur ; ici seulement ce qu'Elementor ne sait pas exprimer : la fiche qui se soulève, la barre bleue inclinée, la photo carrée quelle que soit la largeur, et la bio qui apparaît au survol de TOUTE la fiche (comme avant), pas seulement de la photo. =========================================================================== */ .bkg-equipe-carte { transition: transform .4s ease, box-shadow .4s ease; } .bkg-equipe-carte:hover { transform: translateY(-4px); } .bkg-equipe-carte::after { content: ""; position: absolute; right: 16px; bottom: 14px; width: 8px; height: 42px; background: #276AB2; transform: skewX(-18deg); border-radius: 1px; pointer-events: none; } .bkg-equipe-carte .elementor-flip-box { height: auto; aspect-ratio: 1 / 1; cursor: default; } @media (prefers-reduced-motion: no-preference) { .bkg-equipe-carte .elementor-flip-box__layer { transition-duration: .4s; } /* .6s par défaut, .4s avant */ } .bkg-equipe-carte:hover .elementor-flip-box__back { opacity: 1; } /* =========================================================================== Sur-titre à trait bleu — classe « bkg-eyebrow » sur un widget Titre d'Elementor (Avancé > Classes CSS). Le trait était un vide écrit à la main dans un bloc de texte : l'éditeur visuel de WordPress supprime les vides à l'enregistrement, il aurait disparu à la première retouche. Longueur et espace réglables par widget (CSS personnalisé) : selector { --bkg-trait: 40px; --bkg-trait-espace: 14px; } =========================================================================== */ .bkg-eyebrow .elementor-heading-title::before { content: ""; display: inline-block; width: var(--bkg-trait, 34px); height: 2px; background: #276AB2; vertical-align: middle; margin-right: var(--bkg-trait-espace, 12px); } /* =========================================================================== Correctifs responsive (contrôle du 2026-10-14) =========================================================================== */ /* Trombinoscope : entre 1025 et 1079 px, la grille passe à 4 colonnes et les carrés tombent à ~223 px. La bio la plus longue débordait alors de 17 px et sa dernière ligne était rognée (la Flip Box est en overflow:hidden). Marge intérieure ramenée de 22 à 14 px sur cette seule plage : elle tient, avec 21 px de reste au pire. Sélecteur (0,5,1) pour passer devant celui qu'Elementor génère (0,5,0), sans !important. */ @media (min-width: 1025px) and (max-width: 1079px) { body .elementor .bkg-equipe-carte .elementor-flip-box .elementor-flip-box__back .elementor-flip-box__layer__overlay { padding: 14px; } } /* Liens écrits en toutes lettres dans un bloc de texte (adresse EcoTree sur la démarche RSE) : un mot plus large que la colonne déborde et se fait rogner (body{overflow-x:hidden} d'Astra). break-word ne coupe QUE ce qui ne tient pas sur la ligne : aucun effet sur les liens ordinaires. */ .elementor-widget-text-editor a { overflow-wrap: break-word; } /* Titre d'article (bandeau du modèle « BKG — Article ») : un titre sans espace (« 💨59min45sec💨 ») est d'un seul tenant et se faisait rogner sur téléphone. break-word ne coupe que ce qui ne tient pas sur la ligne. */ .bkg-article-hero .elementor-heading-title { overflow-wrap: break-word; }