/*SOMMAIRE*/

/* REGLES GENERALE */
    /* font */
        @font-face {
            font-family:"poppins";
            src: url(../font/poppins-regular-webfont.woff);
        }
     
    /* fin font */
    /* theme  */
  
    /* fin theme  */
    .mobile{
        display: none;
    }
    .tablette{
        display: none ;
    }
    .icone{
        width: 30px ; 
        margin: 0 10px;
    }

    /* Bg bouton */
    .bg_btn_1{
        background-image: var(--degrade1);/*btn bleu*/
    }
    .bg_btn_2{
        background-image: var(--degrade2);/*btn vert*/
    }
    .bg_btn_3{
        background-image: var(--degrade3);/*btn jaune*/
    }
    .bg_btn_4{
        background-image: var(--degrade4);/*btn rouge*/
    }
    /* fin bg bouton */



    /* Bg bandeau */
    .bg_bandeau_1{
        background-image: var(--degradebandeau1);/*bleu*/
    }
    .bg_bandeau_2{
        background-image: var(--degradebandeau2);/*vert*/
    }
    .bg_bandeau_3{
        background-image: var(--degradebandeau3);/*jaune*/
    }
    .bg_bandeau_4{
        background-image: var(--degradebandeau4);/*rouge*/
    }
    /* fin bg bandeau */

    .icon{
        width: 30px;
    }
    .space_icon{
        margin: 0 10px;
    }

    div[role="button"]:active{
        transform: scale(.98);
    }
    .pad_bandeau{
        padding: 5px 0;
    }
    .pad_bandeau_h1{
        padding: 15px 0;
        line-height: 40px;
    }
    .index_1{
        z-index: 0;
    }

    /* personnalisation de la barre de scroll */
        body::-webkit-scrollbar,#result_realisation>div::-webkit-scrollbar  {
            width: 10px; /* width of the entire scrollbar */   
        }
        body::-webkit-scrollbar-track,#result_realisation>div::-webkit-scrollbar   {
            background: var(--color2); /* color of the tracking area */ 
        }
        body::-webkit-scrollbar-thumb,#result_realisation>div::-webkit-scrollbar-thumb{
            /* border: 1px solid var(--color1); */
            background: linear-gradient( to top, transparent, var(--color4),var(--color4), transparent);
            background-blend-mode: soft-light, normal;
          
            border-radius: 20px; 
        }
    /* fin personnalisation de la barre de scroll */

    /* lien qui scroll en haut de la page avec js */
        #scrall_top{
            position:fixed ;
            right: 1%;
            bottom: 5%;
            z-index: 2;
            padding: 5px;   
        }
        #scrall_top>img{
            width: 50px;
        }

    /* fin lien qui scroll en haut de la page avec js */



/* bouton de demande rappel  */
	#ctn_form_rappel{
		opacity: 0;
		z-index: -1;
		left: 0; 
		width: 200px;
		transform: translateY(-10px);
	}
	#btn_rappel{
		/* padding: 5px 15px; */
		margin: 20px 0; 
	}
	/* #btn_rappel:hover{
		background-color: var(--color2);
	} */
	#btn_rappel img{
		width: 30px;
		margin-right: 10px;
		border-radius: 50%;
	}
	#rappel:checked + #ctn_form_rappel{
		opacity: 1;
		z-index: 3;
		 border: solid 1px var(--color1);
		border-top: none ;
		border-bottom-left-radius: 15px;  
		border-bottom-right-radius: 15px;  
		background-color: var(--color6);
		transform: translateY(0);
		top:100%;
	}
	#form_rappel {
		padding:10px 3%;
        border: none;
	}
	#form_rappel .erreur_form{
		font-size: 1.2rem;
	}
	#form_rappel input{
		padding: initial;
	}
	#form_rappel input[type="submit"]{
		white-space: initial;
		margin-top: 15px;
		padding:5px;
	}

	/* fin bouton de demande rappel  */



/* liseret du header et footer annimé  */
  header::before,footer::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: url(../img/bg_header.webp) no-repeat center;
        background-size: cover;
        z-index: -1;
    }
    header::after,footer::after{
        content: '';
        position: absolute;
        left: 0;
        height: 3px;
        width: 100%;
        background: linear-gradient( to right, var(--color3),var(--color4),var(--color5),var(--color2));
        z-index: 0;
        background-size: 200% 200%;
        animation: bg_color 6.5s ease infinite;
    }
    header::after{
        bottom: 0;
    }
    footer::after{
        top: 0;
    }
    footer nav ul{
        flex-direction: row;
        flex-wrap: wrap;
    }
    footer nav ul li{
       text-align: center;
    }

/* FIN REGLES GENERALE */

/* HEADER */
    .current_page_item>a{
        background-color: var(--color3);
        color: var(--color6);
    }

    header nav{
        /* font-family: var(--font2); */
        letter-spacing: 3px;
        font-weight: bold;
    }
    header{
        padding: 8px 5%;
        /* background-color: #f6f6f6d7; */
        flex-direction: column;
        z-index: 1;
    }
    header ul li a,header ul li{
        padding: 10px 5px; 
        font-size: 15px;
        color: var(--color1);
    }
    header li a{
        transition: all ease-in-out .2s;
    }
    header ul li{
      position: relative;
    }
    .menu-item-has-children{
        position: relative;
    }
    #first_menu .sub-menu{
        top: 60%;
        left: -23px;
        height: max-content;
        opacity: 0;
        text-align: center;
        z-index: -1;
        background-color: var(--color3);
        padding-bottom: 10px;
        display: flex;
        flex-direction: column;
        position: absolute;
        transition: all ease-in-out .3s;
    }
    #first_menu .menu-item-has-children:hover>a+.sub-menu{
        opacity: 1;
        z-index: 1;
        top: 100%;
    }
    #first_menu .sub-menu li:nth-child(2)>a {
       padding: 0;
    }
    header li a:hover { 
        color: var(--color1);
        background: var(--color4);
    }
    
/* FIN HEADER */

/* MAIN */

    /* blog */  
    .post-thumbnail{
        display: none;
    }
	.wp-post-image{
		width:80px;
		max-width:80px;
		background-color: var(--color5);
	}
    /* fin blog */

/* FIN MAIN */

/* FOOTER*/
    footer{
        padding-top:30px;
   
    }
    footer > div{
        padding: 0 5% 15px;
    }
    #coyrate a:hover{
        color: var(--color1);
    }
    footer h2{
        font-size: initial;
    }

    /* nav */
    footer ul li a{
        padding: 5px 10px;
        color: var(--color1); 
        transition: all ease-in-out .2s;
    }
    footer ul{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    footer li{
        font-size: 1rem;
        color: var(--color1);
        letter-spacing: 3px;
        padding: 5px 0;
    }
    footer #partenaire {
        width: 25%;
        padding: 20px 0;
    }
    footer #mail{
        padding: 10px 0;
    }
    footer #partenaire img{
        width: 25%;
        min-width: 200px;
    }
  
  
/* FIN FOOTER*/

/* page des harchives articles de blog */
.entry-header{
    background: var(--color2);
	padding:15px 5%;
}
.page-header{
    border: solid 1px var(--color2);
    text-align: center;
    background: var(--color8);
    color: var(--color2);
}
.entry-header,.entry-header a{
   color: var(--color7);
}
.entry-footer,.entry-footer a{
    color: var(--color2);
}
.entry-header a:hover,.entry-footer a:hover{
   color: var(--color6);
}
/* fin page des harchives articles de blog */

/* contact du header */
header #ctn_contact div.flex:first-child a:hover{
    color: var(--color3v2);
}
header #ctn_contact div.flex{
  padding:8px 0;
}
header #ctn_contact div[role="button"]{
  margin: 0 4px;
}
/* fincontact du header */


/* bouton latérale fixe */
#aside_btn{
    top:35vh; 
    border-top: solid 1px var(--color5); 
    border-bottom: solid 1px var(--color5); 
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    padding: 10px;
    background: var(--color7);
    z-index: 1;
    box-shadow: 0 0 5px 1px #c0c0c0;
    transition: ease-in-out .4s;
}
.init_asid_btn{
    right:-40px;
    opacity: 0;
}
.display_asid_btn{
    right:0;
    opacity: 1;
}
#aside_btn span{
    font-size: .8rem;
    display: block;
    width: 50px;
    line-height: 20px;
    padding-top: 10px;
}
#aside_btn::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 5px;
    left:0;
    top:0;
    background: linear-gradient( to bottom, var(--color3),var(--color4),var(--color5), var(--color2) );
    z-index: 0;
    background-size: 250% 250%;
    animation: bg_colorv2 5s ease infinite;
}
.item_btn_asid{
    padding: 10px 0;
}
/* fin bouton latérale fixe */

.etiquette{
    padding: 10px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    animation: alerte 1.2s steps(1, end) infinite;
  font-size: 1.3rem;}
#acroche{
    font-size: 1.1rem; 
    padding: 5px 0;
}
#section_une > article > div:first-of-type{
    padding: 13px;
    border: solid 1px var(--color1);
}
#section_une > article{
   align-items: stretch;/*garde la meme hauteru sur les deux div*/
}
#section_une p,#propo p{
    padding: 20px 15px;
}
#section_une img{
    object-fit: cover;
    height: 100%;
    width: 100%;
} 
#propo article img,#contact_section img{
    width: 50%;
    min-width: 250px;
}

#propo::before{
    background: url(../img/bg_propos.webp) no-repeat center;
}
#product::before,#content_product:before{
    background: url(../img/courbe_simple.webp) no-repeat center;
}
#avis::before{
    background: url(../img/bg_stars.webp) no-repeat center;
}
#energy_team_page:before{
    background: url(../img/losange_bg.webp) no-repeat center;
    background-size:contain !important;
}


.item_actu h3,.item_event h3,.item_product h3{
    font-size: 1.5rem;
    padding: 5px 0;
}
.item_actu::before,#single_actu:before{
    background: url(../img/bg_item_actu.webp) no-repeat center;
}
.item_event::before,#content_event::before{
    background: url(../img/logo_losange.webp) no-repeat center;
}
.item_event::before{
    background-size: 270% !important;
}
.item_modele::after{
    background: url(../img/angle_rond_color.webp) no-repeat center;
}
.item_review_user_product::after{
    background: url(../img/star.webp) no-repeat center;
}

.item_actu::before,.item_event::before,#content_event::before,.item_review_user_product:after{
    content: '';
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .2;
    z-index: -1;
}
#propo::before,#product:before,#avis:before,#product::before,#energy_team::before,#contact_section article::before,#energy_team_page:before,#content_product:before,#single_actu:before,#content_contact::before,#content_contact::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-size: cover;
    opacity: .2;
    z-index: -1;
}
.item_actu,.item_event,.item_product {
    width: 290px; 
    height: auto;
    padding: 15px 15px 35px;
    text-align: center;
    height: max-content;
}
.item_actu .portrait,.item_event .portrait,.item_product .portrait{
    width: 120px;
    margin: -70px auto 15px;
}
.item_actu .landscape,.item_event .landscape,.item_product .paysage{
    width: 200px;
    margin: -60px auto 15px;
}
.item_product .paysage,.item_product .portrait{
    margin: 0 auto;
}
.item_actu p,.item_product p{
    padding: 10px 0 20px;
}
#actu div:nth-child(2),#event div:nth-child(2).grid{
    margin-top: 50px;
}
#event div[role="button"]>.btn{
    white-space: wrap ;
}
#event ul,.item_adress{
    align-items: start;
}
.item_adress span{
    text-align: start;
}
#event li{
    padding: 10px 0;
}

.item_product{
    box-shadow: 1px 1px 5px var(--color1);
}
#avis p{
    padding-bottom:30px;
}
#showroom{
    background-size: cover;
    background-attachment: fixed;
}
#showroom h2,#energy_team h2{
    font-size: 3rem;
    line-height: 60px;
}
#showroom span{
    font-size: 1.5rem;
    padding: 20px 0 30px;
}
#showroom p{
  color: var(--color6);
  padding: 0 var(--pad-l) 30px;
}
.double_btn div{
    margin: 15px;
}
#energy_team{
    /* background: url(../img/bg_energy.webp) no-repeat top; */
    /* background-size: cover; */
}
.margin_top_energy_team{
    margin-top: 60px;
}
 #energy_team:before{
    background: linear-gradient(to bottom,var(--color4),var(--color5));
}
#contact_section article::before,#content_contact::before{
    background: linear-gradient(to right,var(--color4),transparent);
}
#contact_section article::before,#energy_team:before{
    opacity: .8; 
    background-attachment: initial; 
}
#contact_section article,#content_contact:after{
    background: url(../img/bg_contact.webp) no-repeat center;
    background-attachment: fixed;
    background-size: cover;
    padding: 30px 0;
}
#energy_team p{
    padding: var(--pad-h) var(--pad-l);
    color: var(--color6);
}
#contact_section p{
    padding: 15px 30px;
}

.items_filtre{
    margin: 10px;
    padding: 5px;
    /* background-color: aqua; */
}
#ctn_filtre{
    animation: shadow 4s linear infinite;
    padding: 15px ;
    opacity: 0;
    height: 0; 
}
#ctn_filtre *{
    opacity: 0;
}
#check_filtre:checked + #ctn_filtre{
    opacity: 1;
    height: auto;
    margin-top: 15px;
}
#check_filtre:checked + #ctn_filtre *{
    opacity: 1;
}


    .projet-liste{
        row-gap: 50px;
        height: auto !important;
        justify-content: center; 
    }
    .projet-item{
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 57px;
    }




#result_product{
    background: url(../img/bg_product.webp) no-repeat center; 
    background-attachment: fixed;
    background-size: 80%;
}
#energy_team_page h3{
    padding: 30px 0 5px;
}
#modele_eco p{
    padding: 30px 0 ;
}
.item_modele,.item_user_review,.item_review_user_product{
    min-width: 300px;
    min-height: 300px;
    max-height: max-content;
}
#modele_eco .item_modele p,#user_review .item_user_review p{
   padding:15px;
}
#energy_team_page h3.head_modele{
    padding: 15px;
}
.item_modele::after{
    content: '';
    transform: rotate(90deg);
    background-size: cover;
    width: 200px;
    height: 200px;
    bottom:0 !important;
    left: 0;
    opacity: .5;
    position: absolute;
    background-size: cover;
    z-index: -1;
    
}
#energy_team_page #energy_team div[role="button"]{
    padding: var(--pad-h) 0;
}
#energy_team_page #energy_team {
     background-attachment:fixed; 
}
.item_user_review video{
    width: 100%;
    height: auto;
    margin: 30px auto 0;
}

/*  page single baniere */
.baniere_single{
    height: 50vh;
}

.after_baniere_single::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--color4), transparent );
    z-index: -1;
    opacity: .7;
}

.baniere_single img{
    object-position: center center;
    object-fit: cover;
    height: 100%; 
    z-index: -1;
}
.baniere_single h1::before,.befor_color1:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .9;
    z-index: -1;
}
.baniere_single h1::before{
    background: var(--degradebandeau2);
}
.baniere_single h1.befor_color1::before{
    background: var(--degradebandeau1);
}
  


/* bouton de partage avec popup */

#popup_partage{
    position: fixed;
    /* background-color: red; */
    width: 100%;
    height: 100vh;
    z-index: -2;
    top:0;
    left: 0;
    opacity: 0;    
}
#popup_partage .content_partage{
    position: fixed;
    background-color: var(--color7);
    border: solid 1px var(--color1);
    animation: shadow 4s linear infinite;
    width: 40%;
    min-width: 300px;
    padding: 15px;
    opacity: 0;
    transition: ease-in-out .4s;
}
#popup_partage .content_partage ul{
    width: 200px;
    padding: 30px 0;
}
#popup_partage .content_partage a{
    padding: 10px 0;
}
#popup_partage .content_partage h4{
    width: 200px;
}

#popup_partage.open_partage{
    opacity: 1;
    z-index: 10;
}

#popup_partage.open_partage .content_partage{
    opacity: 1;
}  

#close_popup_partage{
    top: 15px;
    right: 10px;
    padding: 5px;
    box-shadow: 0 0 5px 1px var(--color2);
}
#close_popup_partage:hover{
    box-shadow: 0 0 5px 1px var(--color3);
}

/*  page single event */
.beandeau_single_event{
    padding: 0 var(--pad-l);
}
.beandeau_single_event li{
    justify-content: center;
}
.beandeau_single_event .icon{
width: 40px;
}
.beandeau_single_event li,.ctn_btn_action_single .btn{
    margin: 15px 0;
}
#content_event::before{
    background-size: 60%;
    background-attachment: fixed;
}
.ctn_iframe{
    padding: 15px;
}
.detail_event a{
    color: var(--color2v2);
    font-weight: bold;
    transition: ease-in-out .3s;
}
.detail_event a:hover{
    color: var(--color3);
}

/* page single produit */

#single_actu h2,#content_product h2{
   margin:15px 0 15px 30px;
   position: relative;
   z-index: 1;
}
#single_actu li,#content_product li{
   margin:5px 0 5px 30px;
}


#single_actu h2::before,#content_product h2:before,#single_actu li::before,#content_product li::before{
    content: '';
    position: absolute;
}
#single_actu li::before,#content_product li::before{
    top: 20%;
    left: -20px;
    width: 15px;
    height: 15px;
}
#single_actu h2::before{
    top: 2%;
    left: -30px;
    width: 25px;
    height: 25px;
}
#content_product h2::before{
    top: 2%;
    left: -30px;
    width: 25px;
    height: 25px;  
    background: url(../img/before_cube.webp) no-repeat center;
    background-size: cover;
}
#single_actu h2::before{
    background: url(../img/before_puce.webp) no-repeat center;
    background-size: cover;
}
#single_actu li::before,#content_product li::before{
    background: url(../img/before_list.webp) no-repeat center;
    background-size: cover;
}
#single_actu li,#content_product li{
    position: relative;
}
#single_actu article a,#content_product article a{
	color:var(--color2v2);
	transition: ease-in-out .3s
}
#single_actu article a:hover,#content_product article a:hover{
	opacity:.7;
}
.item_review_user_product:after{
    background-size: contain;
}
.item_review_user_product p{
  padding: 15px;
}
.head_item_review_user_product{
    padding: 10px 5%;
    box-shadow: 1px 1px 5px var(--color1);
}
.star_filled svg {
    fill:var(--color4); 
} 
.star_pitch{
    background: transparent;
    /* border: solid 1px var(--color2);  */
    fill: transparent;
    stroke: var(--color1);
    stroke-width: .5;
} 
.ctn_map_w1 iframe{
    width: 100%;
}

/* single article */


#single_actu article{
    padding: 15px;
}
#single_actu article iframe{
    margin: 50px 0;
    width: 100%;
}
#single_actu:before{
    opacity: .05;
}


/* commentaires page single article */

.form-submit input[type="submit"]{
    background: var(--degrade3);
    color: var(--color5);
    border: none;
    transition: ease-in-out .3s;
}
#comments{
    padding: var(--pad-h) var(--pad-l);
}
.comment-list footer::before{
    background: var(--color7);
}
.comment-list li::before,.comment-list footer::after{
    display: none;
}
#comments form{
    /* border: solid 1px var(--color2); */
    border: none;
    box-shadow: none;
    width: 100%;
    background:var(--color7); 
    padding: var(--pad-h) var(--pad-l);
    animation: shadow 4s linear infinite;
    margin-top: 15px;
}
#comments form .logged-in-as{
    padding-bottom: 20px;
}
#comments textarea{
    /* border: solid 1px var(--color2); */
    box-shadow: none;
    width: 100%;
    min-width: 100%;
    background:none;
    color: inherit;
}
#comments label{
position: initial;
opacity: 1;
}
#comments a{
    color: var(--color2);
} 
.comment-form .comment-form-author,.comment-form .comment-form-email{
    width: 500px;
}
.comment-form .comment-form-url{
    display: none;
}
#wp-comment-cookies-consent {
    display: initial;
    width: 20px;
    box-shadow: none;
    margin-right: 15px;
    height: 36px;
}
.comment-form .comment-form-cookies-consent{
    display: flex;
}

/* contact */

#content_contact ul{
    padding: 15px 0;
}
#content_contact ul li,#content_contact article .ctn_map_w1,#content_contact article #contact_form{
    padding: 10px;
}
#page_404 h1{
    margin-bottom: 50px;
    line-height: 50px;
} 
#page_404 div.w2{
    padding: 30px;
} 
#page_404 div .btn{
     white-space: wrap;     
} 
/* #page_404 div .btn,#page_404 div[role="button"]{
    width: max-content;
}  */

header .gtranslate_wrapper {
    position: absolute;
    right:.8%;
    top: 5px;
    display: flex;
    flex-direction: column;
}
header a.glink img {
    width: 35px;
    box-shadow: 1px 1px 3px var(--color1);
    margin-top: 15px ;
}