/*SOMMAIRE*/

/* REGLES GENERALE */
    /* font */
        @font-face {
            font-family:"poppins";
            src: url(../font/poppins-regular.ttf);
        }
    /* fin font */
    /* theme  */
  
    /* fin theme  */
    .mobile{
        display: none;
    }
    .tablette{
        display: none ;
    }
    .icone{
        width: 30px ; 
        margin: 0 10px;
    }
    .current_page_item>a{
        color: var(--color3);
        background: var(--color2);
    }
    /* 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(--color3); /* color of the tracking area */ 
        }
        body::-webkit-scrollbar-thumb,#result_realisation>div::-webkit-scrollbar-thumb{
            border: 2px solid rgba(255, 255, 255, 0.16);
            background: linear-gradient(318deg, #fff 0%, rgba(255, 255, 255, 0.40) 105.18%), rgba(255, 255, 255, 0.50);
            background-blend-mode: soft-light, normal;
            box-shadow: 20px 20px 24px -2px #A1A1A1 inset, -20px -20px 40px 0px #F6F6F6 inset;  
            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: 3%;
            bottom: 5%;
            z-index: 3;
            transform: rotate(90deg);
            padding: 5px;   
            background: var(--color1);
            border-radius: 50%;
        }
        #scrall_top:hover{
           opacity: .9;
        }
        #scrall_top>img{
            width: 50px;
        }

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

.fade-in h2{
    font-size: 2.5rem;
}
/* FIN REGLES GENERALE */

/* HEADER */
    header nav{
        font-family: var(--font2);
        letter-spacing: 3px;
    }
    header{
        padding: 15px 5%;
        background-color: #f6f6f6;
        z-index: 1000;
    }
    header ul li a,header ul li,footer nav ul li,footer nav ul li a{
        padding: 5px; 
        /* font-size: 15px; */
        color: var(--color1);
        border-radius: 5px;
        font-weight: bold;
    }
    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 ul .ctn_single_icon,footer ul .ctn_single_icon{
        width: 25px;
    }    
    header nav li a:hover { 
        color: var(--color3);
        background: var(--color2);
    }
    header #ctn_contact_header ul li,footer #contact ul li{
        padding: 0;
    }
/* 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;
    }
    #nav_footer{
        padding-bottom: 15px;
    }
    /* nav */
    footer ul li a{
        padding: 5px 10px;
        color: var(--color1); 
        transition: all ease-in-out .2s;
        font-weight: bold;
    }
    footer ul{
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
    }
    footer li{
        font-family: var(--font2);
        /* font-size: 1rem; */
        color: var(--color1);
        letter-spacing: 3px;
        padding: 5px 0;
    }
    #reseau_footer .ctn_single_icon:hover > img, #reseau_header .ctn_single_icon:hover > img{
    transform: translateY(-5px);
    }
    footer #ctn_icon{
        margin-top: 15px;
    }
    footer #contact ul li a{
        font-size: 1.2rem;
    }
    #reseau_footer.tablette{
        padding-bottom: 30px;
    }
  
/* 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);
}
.title_section{
    padding-bottom: 30px;
    text-align: center;
}
.title_section,h3,h4{

    color: var(--color2);
}
.bottom_title,.child_bottom{
    width: 50%;
    min-width: 250px;
    height: 4.5px;
    background: var(--color1);
    margin: 0 auto 60px;
    border-radius: 50%;
}
.child_bottom{
    position: absolute;
    height: 2.5px;
    background: var(--color3);
    filter: blur(2px); 
    top: 25%;
    bottom: 25%;
    animation: translate 20s linear infinite;
}
#propo .portrait{
    max-width: 70%;
}
#propo .landscape{
    max-width: 500px;
}
#propo .portrait,#propo .landscape{
    min-width: 250px;
}
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
}
.service-grid, .pricing-grid,.galerie-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 30px 0;
}
.service, .price-box{
    flex: 1 1 300px;
    box-shadow: 0 0 10px var(--color4);
    z-index: 1;
} 
.service, .price-box,.item_projet_box {
    padding: 1rem;
    border-radius: 5px;
    background: var(--color3);
    text-align: center;
    height:max-content;
}
.service:hover{
   transform: translateY(-10px); 
}
.bg_service,.bg_pricing,.bg_section_propo,.bg_section_service,.bg_section_compteur,.bg_section_galerie,.bg_section_avi_google,.bg_section_contact,.bg_section_faq,.bg_section_client,.bg_section_certification,.bg_section_partenaire{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: .5;
}
.price-box:hover{
    transform: scale(1.020);
}

.item_projet_box{
    flex:0 1 300px
}
.price-box span {
    font-size: 1.8rem;
    padding: 10px 0;
}
.img_btn_open_projet{
    transform: rotate(-90deg);
    width: 15px;
    margin-left: 10px;
}
.img_item_service{
    max-width: 100px;
}
.service h3, .info_section{
    padding: 10px 0;
}
#ctn_client,#certif,#ctn_partenaire{
gap: 20px;
}
.item_client img,.item_partenaire img{
    width: 100px;
}
#certif img{
    max-width: 200px;
    margin: 10px auto;
}
/* #certif figcaption{
   font-size: 1rem;
} */
#contact .info_section{
    padding-bottom: 30px ;
}
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
input, textarea, button {
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#ctn_contact{
    align-items: flex-start;
    width: max-content;
}
#ctn_contact li{
    padding: 10px 0;
}
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
iframe{
    width: 70%;
    margin: 30px auto;
}

/* galerie avec contenu déroulant */

.item_projet_box{
    height: max-content;
    background-color: #eeeeee;
    height: 450px;
}
.item_projet_box div[role="button"]{
 width: 100%;
 left: 0;
 bottom: -10px;
}
.title_projet{
    padding: 15px 0;
}
.item_projet_box div[role="button"]>a{
 background:var(--color1);
 color: var(--color3);
 padding: 15px;
}
.item_projet_box div[role="button"]>a:hover{
 background:var(--color2);
}
.item_projet_box .ctn_img img{
    max-width: 200px;
}
.item_projet_box .ctn_miniature{
    height: 0;
    opacity: 0;
    transition: height 1s ease, opacity 1s ease; 
}
.ctn_miniature .miniature{
    width: 80px;
}
.open_projet:checked + .item_projet_box {
   height: auto;
   flex: 1 1 70%;
} 
 .open_projet:checked + .item_projet_box div[role="button"] {
  display: none;
}  
.open_projet:checked + .item_projet_box .ctn_miniature{
    opacity: 1;
    height: auto;
    padding: 30px 0;
} 
.item_projet_box p,.item_projet_box ul,.item_projet_box ol {
    padding: 15px 0;
}
.item_projet_box .link_item_produit {
    margin: 30px 0 30px;
}

.ctn_miniature{
    gap: 10px;
}
.lightbox {
    position: fixed; /* reste sur l'écran */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* tout devant */
    overflow: hidden;
    transition: opacity 0.3s;
}
.lightbox.hidden {
    display: none;
}
.lightbox-content {
    max-width: 90%;
    max-height: 80%;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.lightbox-nav button {
    background: none;
    border: none;
    color: var(--color3);
    font-size: 50px;
    cursor: pointer;
}
.close {
    position: absolute;
    top: 30px;
    right: 50px;
    color: var(--color3);
    font-size: 40px;
    cursor: pointer;
}
 
/* responssive 
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }
    nav a {
        display: block;
        margin: 0.5rem 0;
    }
    .service-grid, .pricing-grid,.galerie-grid {
        flex-direction: column;
        align-items: center;
    }
}
   
*/

/* FAQ */
#ctn_faq{
    width: 70%;
}
.avweb_faq::after{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    background: url(../img/bgbleufaq.svg) no-repeat bottom right;
    background-size: contain;
    background-attachment: fixed;
    z-index: -1;
}
.avweb_faq div:first-child{
   flex-grow: 1;
   width: 25%;
}
.avweb_faq div:first-child h2{
   font-size: 2.5rem; 
}
.avweb_faq div:last-child{
   flex-grow: 2; 
}
summary{
    font-size: 1.5rem;
    width: 100%;
    padding:15px;
    cursor: pointer;
    cursor: pointer;
    transition: 150ms ease-out;
}
details{
    background-color: #d9d9d9d3;
}
details:hover{
 background-color: var(--color2);
}
details:hover summary{
 color: var(--color3);
}
details[open]{
    background-color: initial;
    padding-bottom: var(--pad-h);  
    background: #d9d9d9d3; 
}
details[open] summary {
    margin-bottom: 30px;
}
details[open]:hover summary {
    color: var(--color2);
}
details{
    border: solid 1px var(--color1);
    margin: 10px 0;
}
summary::after,details[open] summary::after{
    padding:10px;
    opacity: 1;
    transition: all .3s;
    width: 45px;
}
summary::after,details[open] summary::after{
    content: ">";
    transform: rotate(90deg);
    display: flex;
    justify-content: center;
    margin-right: 20px;
    font-size: 1.5rem;
}
details[open] summary::after {
    transform: rotate(270deg);
}
details[open] summary:hover::after,summary:hover::after {
    cursor: pointer;
}
details p,details ol,details ul{
    padding: 5px 5%;
}
/* fin FAQ */

/* Gtranslate */

.gtranslate_wrapper{
    text-align: end;
}
.gtranslate_wrapper a{
    margin: 0 5px;
}
.gtranslate_wrapper a>img {
    width: 30px;
}
/* fin Gtranslate */