/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.6
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* =========================================================
SOMMAIRE
---------------------------------------------------------
1. CORRECTIONS ELEMENTOR DE BASE
1.1 Marge text-editor
1.2 Titres avec lien (héritage font-weight)
2. MENU DE NAVIGATION
2.1 Item actif en gras
2.2 Navbar custom Logia (desktop)
2.3 Sous-menus (dropdown)
2.4 Menu responsive (< 1024px)
2.5 Bouton Contact (visible en mobile uniquement)
3. HEADER — Z-index & bannière icônes
4. WIDGETS D'ICÔNES
4.1 Widget Icône / Liste d'icônes
4.2 Widget Icon Box (titre, description, icône SVG)
4.3 Icône dans un bouton (pastille ronde + flèche)
5. BOUTONS — Animations & survol
6. WIDGET DE PARTAGE — Icônes custom
7. TABLE DES MATIÈRES (TOC)
8. CONTENU D'ARTICLE
8.1 Mise en forme (#article-content)
8.2 Extrait tronqué (.mg-article-content)
8.3 Fil d'Ariane Rank Math
9. UTILITAIRES & MARQUE
9.1 Titre Mg+ (hero)
9.2 Classes utilitaires diverses
10. SWIPER — Débordement des slides
11. CHEVAUCHEMENTS FOOTER (CTA & logos)
12. AVIS CLIENTS — Voir plus / Voir moins
13. SINGLE RÉALISATION — Image collante
========================================================= */
/* =========================================================
1. CORRECTIONS ELEMENTOR DE BASE
========================================================= */
/* 1.1 Supprime la marge en bas du dernier élément (Éditeur de texte + Extrait d'article) */
.elementor-widget-text-editor .elementor-widget-container > *:last-child,
.elementor-widget-text-editor .elementor-widget-container > *:last-child > *:last-child,
.elementor-widget-theme-post-excerpt .elementor-widget-container > *:last-child,
.elementor-widget-theme-post-excerpt .elementor-widget-container > *:last-child > *:last-child {
margin-bottom: 0;
margin-block-end: 0;
}
/* 1.2 Un titre contenant un lien hérite du font-weight du heading */
.elementor-widget-heading .elementor-heading-title[class*=elementor-size-] > a {
font-weight: inherit;
}
/* 1.3 Ancres : le header sticky (73-80 px selon l'écran) ne doit pas masquer la cible.
:where() = spécificité nulle -> les règles à 140 px (articles, sommaire) gardent la main. */
:where(.elementor [id]) {
scroll-margin-top: 120px;
}
/* =========================================================
2. MENU DE NAVIGATION
========================================================= */
/* 2.1 Élément de menu actif en gras */
.elementor-nav-menu .elementor-item-active {
font-weight: 600 !important;
}
/* 2.2 Navbar custom Logia — style desktop */
.customNavbar a {
line-height: 1.6rem !important;
}
/* 2.3 Sous-menus (dropdown) */
.customNavbar ul.sub-menu {
padding: 5px !important;
}
.customNavbar ul.sub-menu li a {
border-radius: 5px;
}
.customNavbar ul.sub-menu li.menu-item {
margin-bottom: 5px;
}
.customNavbar ul.sub-menu li.menu-item:last-child {
margin-bottom: 0;
}
/* 2.4 Menu responsive (mobile/tablette < 1024px) */
@media (max-width: 1024px) {
.customNavbar ul {
padding: 5px !important;
}
.customNavbar ul li a {
border-radius: 5px;
}
.customNavbar ul li.menu-item {
margin-bottom: 5px;
}
.customNavbar ul li.menu-item:last-child {
margin-bottom: 0;
}
}
/* 2.5 Bouton Contact — masqué sur desktop (≥ 1025px), visible en mobile.
Breakpoint aligné sur le menu responsive (< 1024px = mobile) : l'ancien
min-width: 1024px masquait le bouton à 1024px pile, alors que le menu
mobile y est encore actif. */
@media (min-width: 1025px) {
.customNavbar .menuContact,
.contact-menu-item {
display: none !important;
}
}
/* =========================================================
3. HEADER — Z-index & bannière icônes
========================================================= */
header[data-elementor-type="header"] {
position: relative;
z-index: 999;
}
.banner-icon-list {
transition: opacity 0.2s ease-in-out;
}
/* Masque la bannière quand un popup/dialog bloque le scroll */
body.dialog-prevent-scroll .banner-icon-list {
opacity: 0;
}
/* =========================================================
4. WIDGETS D'ICÔNES
========================================================= */
/* 4.1 Widget Icône / Liste d'icônes (.elementor-icon-wrapper) */
/* Reset du wrapper pour éviter les espaces parasites */
.elementor-icon-wrapper {
line-height: 0;
font-size: 0;
}
/* Centrage et affichage correct de l'icône */
.elementor-icon-wrapper .elementor-icon {
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.elementor-icon-wrapper .elementor-icon i {
display: block;
line-height: 1;
}
/* Classe utilitaire : supprime la marge icône/texte dans une liste d'icônes */
.elementor-widget.elementor-widget-icon-list.no-icon-margin {
--e-icon-list-icon-margin: 0;
}
/* 4.2 Widget Icon Box (titre, description, icône SVG)
---------------------------------------------------------
Le thème applique ses marges de heading au h3 du titre, ce
qui fausse le centrage vertical de l'icône par rapport au
contenu. On neutralise les marges verticales : l'espacement
titre/description se pilote via le contrôle natif du widget
(Style → Contenu → Espacement). */
.elementor-icon-box-title,
.elementor-icon-box-description {
margin-block: 0;
}
/* Recalage du SVG calendrier (export Figma : viewBox 39×39 plus
grand que le tracé, glyphe décalé en haut/gauche). Correctif
temporaire — la vraie solution est de corriger le viewBox du
fichier SVG dans la médiathèque (viewBox="0 0.74 37.88 36"). */
.elementor-icon-box-icon .elementor-icon svg {
transform: translate(0.5px, 1px);
}
/* La position "Haut" (tablette/mobile) injecte un align-items: unset
!important qui casse le centrage : on le réécrase. Classe doublée
pour gagner la guerre de spécificité quel que soit l'ordre de
chargement des feuilles. */
@media (max-width: 1024px) {
.elementor-widget-icon-box.elementor-widget-icon-box.elementor-tablet-position-block-start .elementor-icon-box-wrapper,
.elementor-widget-icon-box.elementor-widget-icon-box.elementor-mobile-position-block-start .elementor-icon-box-wrapper {
align-items: center !important;
}
}
/* 4.3 Icône dans un bouton (.elementor-button-icon)
Le span wrapper hérite d'un line-height (~1.2) qui le rend plus haut
que l'icône (16 → 19.2px) et ajoute des pixels parasites verticaux.
On le passe en flex pour coller à la hauteur réelle du glyphe et le
centrer, puis on lui donne une pastille ronde. */
.elementor-button .elementor-button-icon {
width: 36px;
height: 36px;
flex: 0 0 auto;
background-color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Le glyphe FontAwesome garde son line-height (~1.2) qui impose la hauteur
du span : on le réinitialise et on applique la couleur de la flèche. */
.elementor-button .elementor-button-icon i {
display: block;
line-height: 1;
font-size: 14px;
color: var(--e-global-color-secondary); /* flèche bleue par défaut */
}
/* Centrage texte + pastille dans le bouton */
.elementor-button .elementor-button-content-wrapper {
align-items: center;
}
/* Variante "Lire l'actu" — pastille beige, flèche blanche */
.btn-lire-actu .elementor-button-icon {
background-color: #B8B89C;
}
.btn-lire-actu .elementor-button-icon i {
color: #fff;
}
/* Variante secondaire (beige) — flèche en couleur primary */
.btn-secondaire .elementor-button-icon i {
color: var(--e-global-color-primary);
}
/* =========================================================
5. BOUTONS — Animations & survol
========================================================= */
.elementor-button {
transition: transform 0.3s ease;
}
.elementor-button:hover {
transform: scale(1.05);
}
.elementor-animation-grow:active,
.elementor-animation-grow:focus,
.elementor-animation-grow:hover {
transform: scale(1.05) !important;
}
/* =========================================================
6. WIDGET DE PARTAGE — Icônes custom
========================================================= */
/* Garde la hauteur du glyphe natif, mais le masque */
.elementor-share-btn__icon i {
visibility: hidden;
}
/* Base commune pour les 3 icônes custom */
.elementor-share-btn__icon {
background-repeat: no-repeat;
background-position: center;
display: block; /* au lieu de inline-block */
}
/* Facebook */
.elementor-share-btn_facebook .elementor-share-btn__icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* LinkedIn */
.elementor-share-btn_linkedin .elementor-share-btn__icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Copier le lien (bouton "print" détourné) */
.elementor-share-btn_print .elementor-share-btn__icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Boutons de partage : fond blanc + bordure + survol */
.elementor-share-btn {
background-color: #fff;
border: 1px solid #C7EDF9 !important;
transition: transform 0.3s ease;
}
.elementor-share-btn:hover {
transform: scale(0.9);
border-color: var(--e-global-color-primary) !important;
}
/* =========================================================
7. TABLE DES MATIÈRES (TOC)
========================================================= */
.elementor-toc__header {
padding-bottom: 20px;
}
.elementor-toc__body {
padding-top: 20px;
}
/* =========================================================
8. CONTENU D'ARTICLE
========================================================= */
/* 8.1 Mise en forme (#article-content) */
/* Titres en noir */
#article-content h2,
#article-content h3 {
color: #000;
font-family: "Raleway", Sans-serif;
font-weight: 700;
line-height: 1.2em;
scroll-margin-top: 140px;
}
#article-content h2 {
font-size: 1.8rem;
margin: 32px 0 16px;
}
#article-content h3 {
font-size: 1.3rem;
margin: 24px 0 12px;
}
/* Décalage ancre sommaire — header sticky */
[id^="elementor-toc__heading-anchor-"] {
scroll-margin-top: 140px;
}
/* Paragraphes */
#article-content p {
margin-bottom: 16px;
line-height: 1.7em;
}
/* Images pleine largeur en cover */
#article-content img {
width: 100% !important;
height: 400px !important;
object-fit: cover;
border-radius: 16px;
margin: 24px 0;
display: block;
}
/* 8.2 Extrait tronqué (.mg-article-content) — 3 lignes max */
.mg-article-content {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
line-height: clamp(1.5, 1.45 + 0.3vw, 1.75);
color: #333;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.mg-article-content p {
margin-block-end: clamp(1rem, 0.8rem + 1vw, 1.75rem);
}
.mg-article-content p:last-child {
margin-block-end: 0;
}
/* 8.3 Fil d'Ariane Rank Math — séparateurs "+" */
.rank-math-breadcrumb p {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.rank-math-breadcrumb .separator {
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
}
/* Le dernier "+" en couleur secondary */
.rank-math-breadcrumb .separator:last-of-type {
color: var(--e-global-color-secondary);
}
/* Le "+" précédant l'élément courant en couleur accent */
.rank-math-breadcrumb .separator:has(+ .last) {
color: var(--e-global-color-accent);
}
/* Titre (dernier maillon) en couleur primary */
.rank-math-breadcrumb .last {
color: var(--e-global-color-primary);
}
/* =========================================================
9. UTILITAIRES & MARQUE
========================================================= */
/* 9.1 Titre Mg+ (hero)
---------------------------------------------------------
Le « Mg » utilise la couleur secondaire, le « + » la couleur
accentuée (couleurs globales Elementor). La baseline reprend
la typographie globale dédiée et s'affiche en blanc sous le titre.
Structure HTML attendue dans le champ Heading (H1) :
Mg+
Votre installateur photovoltaïque…
--------------------------------------------------------- */
.mg {
color: var(--e-global-color-secondary);
}
.plus {
color: var(--e-global-color-accent);
}
.baseline_h1 {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-size: var(--e-global-typography-primary-font-size);
font-weight: var(--e-global-typography-primary-font-weight);
line-height: var(--e-global-typography-primary-line-height);
letter-spacing: var(--e-global-typography-primary-letter-spacing);
text-transform: none; /* Annule le text-transform de la variable globale */
display: block;
color: #fff;
}
/* 9.2 Classes utilitaires diverses */
/* Texte en couleur primary */
.txt-primary {
color: var(--e-global-color-primary);
}
/* Texte en couleur accent */
.txt-accent {
color: var(--e-global-color-accent);
}
/* Note de tarif (petit, gras, sur sa propre ligne) */
.note-tarif {
font-size: 12px;
font-weight: 700;
display: block;
}
/* =========================================================
10. SWIPER — Débordement des slides
========================================================= */
/* Laisse déborder les slides hors du conteneur (toutes tailles) */
.swiper {
overflow: visible !important;
}
/* Mobile : marge à droite pour laisser entrevoir la slide suivante */
@media (max-width: 767px) {
.swiper {
padding-right: 10% !important;
}
}
/* =========================================================
11. CHEVAUCHEMENTS FOOTER (CTA & logos)
---------------------------------------------------------
Sections dont la moitié basse "déborde" sur le footer via
un ::after arrondi. Seule la couleur de fond diffère.
========================================================= */
/* Base commune — classes : cta-realisations-overlap /
cta-footer-overlap / logos-footer-overlap */
.cta-realisations-overlap,
.cta-footer-overlap,
.logos-footer-overlap {
position: relative;
isolation: isolate;
}
.cta-realisations-overlap::after,
.cta-footer-overlap::after,
.logos-footer-overlap::after {
content: "";
position: absolute;
inset: 50% 0 0 0;
border-radius: 50px 50px 0 0;
z-index: -1;
}
.cta-footer-overlap::after {
background: #000;
}
.cta-realisations-overlap::after {
background-color: var(--e-global-color-c826c72);
}
.logos-footer-overlap::after {
background-color: var(--e-global-color-c826c72);
}
/* Conteneur enfant (boîte CTA) — classe : cta-footer-box
Overlay bleu multiplié par-dessus l'image de fond */
.cta-footer-box::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%),
linear-gradient(0deg, #80C6E9 0%, #80C6E9 100%);
background-blend-mode: normal, multiply;
mix-blend-mode: multiply;
pointer-events: none;
}
.cta-footer-box > .elementor-container {
position: relative;
z-index: 1;
}
/* =========================================================
12. AVIS CLIENTS — Voir plus / Voir moins
========================================================= */
/* Texte de l'avis : tronqué à 4 lignes tant que .open n'est pas posé */
.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container {
overflow: hidden;
transition: max-height 0.4s ease;
}
.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container:not(.open) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
max-height: calc(4 * 1.5em);
}
.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container:not(.open) p {
margin: 0;
}
.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container.open p {
margin: 0 0 0.8em 0;
}
.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container.open p:last-child {
margin-bottom: 0;
}
/* Bouton "Voir plus / Voir moins" */
button.avis-toggle,
button.avis-toggle:hover,
button.avis-toggle:focus {
background: none !important;
border: none !important;
border-radius: 0;
box-shadow: none;
padding: 0;
display: block;
margin-left: auto;
margin-top: 0.5em;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
transition: color 0.2s ease;
}
button.avis-toggle {
color: var(--e-global-color-accent);
}
button.avis-toggle:hover {
color: var(--e-global-color-primary);
}
/* COOKIES – PASSER LA BANNIÈRE AU-DESSUS DE LA FLOATING BAR (mobile) */
@media (max-width: 1024px) {
#cc-main {
z-index: 2147483647 !important;
}
}
/* ════════════════════════════════════════
XX. LIGHTBOX ELEMENTOR – PASSAGE AU-DESSUS BARRE FLOTTANTE
════════════════════════════════════════ */
.elementor-lightbox,
#elementor-lightbox-slideshow,
.dialog-lightbox-widget {
z-index: 100000 !important;
}
/* === Reveal texte + flèche au survol === */
.loop-realisations .e-loop-item .mg-card-reveal {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
.loop-realisations .e-loop-item:hover .mg-card-reveal,
.loop-realisations .e-loop-item:focus-within .mg-card-reveal {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Toujours visible quand pas de hover (tactile) */
@media all and (max-width: 1024px) {
.loop-realisations .e-loop-item .mg-card-reveal {
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
}
.phantom {
z-index: 0 !important;
pointer-events: none;
user-select: none;
}
/* =========================================================
13. SINGLE RÉALISATION — Image collante
========================================================= */
/* logia-ok: le sticky natif Elementor est casse par la barre flottante
(floating-bars.min.js, handleStickyElements) : a son init, elle reecrit
en "bottom: " tout element .elementor-sticky qui a
"bottom: 0px" -- c'est l'etat d'une image sticky en butee de colonne.
L'image remontait de 68 px sur le fil d'Ariane (template 1342, 2026-09-30).
position: sticky n'a ni champ natif ni script : rien ne peut le dérégler.
Classe posee sur le widget Image mise en avant (Avance > Classes CSS) ;
le parent du collage est son conteneur (Image (parent du sticky)).
Desktop seulement, comme le reglage natif d'origine (sticky_on: desktop). */
@media (min-width: 1025px) {
.logia-sticky-image {
position: sticky;
top: 200px;
}
}
/* =========================================================
14. SIMULATEUR SOLTEO — Hauteur de l'iframe en mobile
========================================================= */
/* logia-ok: un widget HTML n'a aucun reglage natif de hauteur pour l'iframe
qu'il contient. L'iframe Solteo (attribut height="870px") depassait l'ecran
(844 px) : le doigt restait toujours dessus, l'iframe defilait en interne et
la page ne defilait plus (relecture client, 2026-10-01). Cause cote Solteo :
carte figee a 870 px avec defilement interne, et overscroll-behavior: none
sur html/body, que Chrome Android respecte (le geste ne passe pas a la page).
Safari iOS laisse passer le geste : teste OK sur iPhone, on n'y touche pas.
A 70 % de l'ecran, il reste toujours une zone de page a saisir.
Solteo n'envoie pas sa hauteur (aucun postMessage) : pas d'ajustement auto.
Classe posee sur le widget HTML (Avance > Classes CSS), page 3491.
vh = repli pour les navigateurs sans svh. */
@media (max-width: 767px) {
.logia-simulateur iframe {
height: 70vh;
height: min(870px, 70svh);
}
/* Safari iOS (seul a comprendre -webkit-touch-callout) : hauteur d'origine */
@supports (-webkit-touch-callout: none) {
.logia-simulateur iframe {
height: 870px;
}
}
}
/* =========================================================
15. BARRE FLOTTANTE — Encart entièrement cliquable en mobile
========================================================= */
/* logia-ok: le widget Floating Bar ne propose qu'un lien sur son bouton.
Le script logia-floating-bar-click.js étend ce lien à tout l'encart.
Le document 3525 borne la règle à la barre « Estimez votre projet ». */
@media (max-width: 767px) {
.elementor-3525 .e-floating-bars {
position: fixed !important;
cursor: pointer;
}
}