/* 
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.0
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
*/

/* Add your custom styles here */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.2;
}
h1 { font-size: 3.5rem; }   /* 56px */
h2 { font-size: 2.75rem; }  /* 44px */
h3 { font-size: 1.125rem; } /* 18px */
h4 { font-size: 1.0625rem; }/* 17px */
h5 { font-size: 1rem; }     /* 16px */
h6 { font-size: 0.875rem; } /* 14px */

/* Variante 1 */
.hfe-nav-menu__layout-horizontal li:first-child{
    display: none !important;
}
.nav-accueil .hfe-nav-menu__layout-horizontal:not(.menu-is-active){
    li:last-child{
        display: none !important;  
    }
}
.logo-site a img[src$=".svg"]{
    width:100%;
    height: auto;
}

/*
header{
    h1 {
        font-size: 5.5rem;
    }
    h2 {
        font-weight: 300;
        font-size: 2.5rem;
        line-height: 3rem !important;
    }
}*/

header{
    .elementor-widget-image{
        position:absolute;
    }
}
.hfe-nav-menu-icon svg,
.hfe-nav-menu__toggle svg{
    fill: #fff;
}

/* Sous-menu transparent */
body nav.hfe-dropdown .hfe-nav-menu .menu-item a.hfe-sub-menu-item,
body nav.hfe-dropdown .hfe-nav-menu .menu-item a.hfe-menu-item {
    background-color: transparent !important;
}

/* Item actif en horizontal avec flèche */
.hfe-nav-menu__layout-horizontal .hfe-nav-menu__submenu-arrow .hfe-dropdown .menu-is-active {
    background-color: #4968c3 !important;
}
.hfe-nav-menu__layout-horizontal .hfe-nav-menu__submenu-arrow .hfe-dropdown .menu-is-active .menu-item a.hfe-menu-item {
    background-color: transparent !important;
}

/* Menu actif horizontal */
.hfe-nav-menu__layout-horizontal.menu-is-active {
    background-color: #4968c3 !important;
    color: #fff;
    height: 100%;
    width: 100%;
}
.hfe-nav-menu__layout-horizontal.menu-is-active nav.hfe-dropdown li.menu-item,
.hfe-nav-menu__layout-horizontal.menu-is-active nav.hfe-dropdown li.menu-item > *,
.hfe-nav-menu__layout-horizontal.menu-is-active nav.hfe-dropdown li.menu-item a.hfe-menu-item {
    background-color: #4968c3 !important;
}
nav.hfe-dropdown li.menu-item:not(:last-child){
    border-bottom-color: #282b60!important;
}
nav.hfe-dropdown li.menu-item:hover{
    transition: all 0.5s ease-in-out;
    &:hover{
        background-color: #282b60!important;
    }
}
.hfe-nav-menu__layout-horizontal:not(.menu-is-active) li.menu-item{
    border-bottom:solid 3px transparent;
    transition: all 0.5s ease-in-out;
    &:hover{
        border-bottom:solid 3px  #4968c3;
    }
}

.e-con:not(.projets){
    h2{
        margin-bottom:60px!important;
    }
    h2::after {
    content: "";
        display: inline-block;
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 89px;
        height: 4px;
        margin-top: 12px;
        background-image: repeating-linear-gradient(
            to right,
            #4A6CC9 0px,
            #4A6CC9 16px,
            transparent 12px,
            transparent 18px
        );
    }
}

.title-center{
    h2{
        text-align: center;
        width:100%;
        &::after{
            left:calc(50% - (89px / 2))!important;
        }
    }
}

.compteur{
    color: white;
    h2{
        text-align: center;
        width:100%;
        &::after{
            left:calc(50% - (89px / 2))!important;
        }
    }
    .counter-item{
        @media (max-width: 767px) { 
            width:100%;
        }
    }
    .counter-value{
        color: white;
        @media (min-width: 767px) { 
            font-size: 3rem;
        }
        @media (min-width: 768px) { 
            font-size: 5.5rem;
        }
    }
    .counter-label{
        font-weight: 300;
        font-size: 1.125rem;
        color: white;
    }
    .counters{
        display:flex;
        justify-content: space-between;
    }
}

.bridge{
    color: white;
    h2{
        text-align: center;
        width:100%;
        &::after{
            left:calc(50% - (89px / 2))!important;
        }
    }
}


.e-con.projets h2{
    margin-bottom: unset !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}

.e-con.projets h2::after{
    content: "" !important;
    position: relative !important; 
    display:block !important;
    flex: 1 1 auto !important;
    width:100% !important;
    height: 4px !important;
    /*background-color: white !important;
    background-image: none!important;*/
    background-image: repeating-linear-gradient(
        to right,
        #fff 0px,
        #fff 150px,
        transparent 150px,
        transparent 160px 
    ) !important;
}

.text-right{
    padding-left:100px;
}
.text-left{
    @media (min-width: 1025px) { 
        padding-right:100px;
    }
}
.picto2 img{
    @media (max-width: 1024px) { 
        scale:.9;
    }
}
.reset-padding{
    padding:0!important;
}

.reset-gap{
    gap:0!important;
}

.img{
    position:relative;
    &::before {
        @media (max-width: 767px) { 
            left: -145px;
            bottom: -330px;
        }
        @media (min-width: 768px) { 
            left: calc(-145px / 2);
            bottom: calc(-330px / 2);
        }
        position: absolute;
        width: 145px;
        height: 330px;
        content: "";
        background-image: url(https://www.marchand-construction.com/wp-content/uploads/2026/06/effect-fixed.svg);
    }
}
@media (max-width: 767px) { 
    .cmplz-cookiebanner{
        width:400px;
    }
}

.hfe-nav-menu__toggle{
    display:flex!important;
    justify-content: flex-end!important;
}

.bloc{
    position:relative;
    overflow: visible;
    &::after {
        @media (min-width: 768px) { 
            left: calc(50% - (300px / 2));
            width: 300px;
            height: 50px;
            bottom: calc(-50px / 2);
        }
        @media (max-width: 767px) { 
            left: calc(50% - (150px / 2));
            width: 150px;
            height: 25px;
            bottom: calc(-25px / 2);
        }
        position: absolute;
        z-index: 1;
        content: "";
        background-color: #4968c3;
    }
}

.bg{
    position:relative;
    > *{
       position:relative;
       z-index: 2; 
    }
    &::before{
        position: absolute;
        content: "";
        background-image: url(https://www.marchand-construction.com/wp-content/uploads/2026/06/deco-fixed.svg);
        background-size: cover;
        opacity:.3;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.bg2{
    position:relative;
    > *{
       position:relative;
       z-index: 2; 
    }
    &::before{
        position: absolute;
        content: "";
        background-image: url(https://www.marchand-construction.com/wp-content/uploads/2026/06/deco-fixed.svg);
        background-size: cover;
        opacity:.1;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        filter:grayscale(100);
    }
}


.projets{
    .elementor-widget-image{
        position: relative;
        line-height: 0;
        overflow: hidden;

        &::after{
            content:"";
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height: 100%;
            background-color: #4968c3;
            opacity:.4;
            z-index:0;
            transition: opacity 0.5s ease-in-out;
            pointer-events: none;
        }

        .wp-caption{
            line-height: 0;
        }

        img{
            transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
            filter: brightness(.5);
        }

        .widget-image-caption{
            font-family: var(--e-global-typography-primary-font-family);
            font-size: 1.125rem;
            font-style: normal;
            font-weight: bold;
            position: absolute;
            z-index: 2;
            color: white;
            bottom: 20px;
            left: 20px;
            height: 40px;
            width: calc(100% - 40px);
            background-color: #4968c3;
            pointer-events: none;
            line-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: bottom 0.5s ease-in-out;

            a{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 3;
                pointer-events: auto;
            }
        }

        &:hover{
            &::after{
                opacity: 0;
            }
            img{
                filter: blur(10px) brightness(1);
                transform: scale(1.2);
            }
            .widget-image-caption{
                bottom: calc(50% - 20px);
                background-color:#282b60;
            }
        }
    }
}

.bloc-images{
    .elementor-widget-image{
        position: relative;
        line-height: 0;
        overflow: hidden;
        transition: all 0.2s ease-in-out;
        &:hover{
            img{
                transform: scale(1.2);
            }
        }
    }
}

footer {
    h2{
        font-size:2rem;
        &::after{
            background-image: repeating-linear-gradient(
                to right,
                #5e5d5f 0px,
                #5e5d5f 16px,
                transparent 12px,
                transparent 18px
            )!important;
        }
    }
    .elementor-widget-image.studio110 a img[src$=".svg"]{
        width:110px;
        padding:10px;
        border-radius: 9999px;
        background-color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08);
    }
}

.elementor-widget-button a{
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: bold;
    background-color: #4968c3;
    transition: all 0.2s ease-in-out;
    &:hover{
        color: #4968c3;
        background-color: #fff;
    }
}

.elementor-widget-button.secondaire a{
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: bold;
    background-color: transparent;
    border:solid 2px #fff;
    transition: all 0.2s ease-in-out;
    &:hover{
        color: #4968c3;
        background-color: #fff;
    }
}

.is-full{
    width:100%!important;
    > *{
        width:100%!important;
    }
}

.liseret {
  position: absolute;   /* au lieu de absolute */
  bottom: -7px;
  left: 0;
  height: 14px;
  width: calc(var(--progress, 0) * 100%);
  background: #4968c3;
  z-index: 9999;
}

.liseret {
  transition: width 0.05s linear;
  /* évite un effet trop "saccadé" sans introduire de retard perceptible */
}

/* Nouvelle classe, dédiée au liseret */
.liseret-zone {
    position: relative; /* si l'élément n'a pas déjà un positionnement */
}

.header-site{
    justify-content: flex-end;
    .elementor-widget-image{
        position: absolute;
        left: 0;
        top: 0;
    }
    .nav-accueil{
        text-align: right;
    }
    .nav-pages{
        text-align: right;
    }
}

.white{
    filter:brightness(100);
}