/*SOMMAIRE*/

/* REGLES GENERALE */
    /* font */
        @font-face {
            font-family:"sansation";
            src: url(../font/Sansation-Regular.ttf);
        }
     
    /* fin font */
    /* theme  */
  
    /* fin theme  */
    .mobile{
        display: none;
    }
    .tablette{
        display: none ;
    }
    .icone{
        width: 30px ; 
        margin: 0 10px;
    }
    header.no_home .current_page_item>a{
        color: var(--color3);
        position: relative;
        z-index: 1;
        padding:10px;
        background: var(--linear-v1-right);
    }
    header.no_home .sub-menu .current_page_item>a{
        display: inline-block;    
    }
    .current_page_item>a:hover{
       opacity: 1;
    }
    section li{
     position: relative;
     margin: 5px 0 0 30px;

    }
    section li::before{
        content: '';
        position: absolute;
        top: 0;
        left:-30px;
        height: 20px;
        width: 20px;
        background: url(../img/befor_li.webp) no-repeat center;
        background-size: contain;
        transform: rotate(-90deg);
    }
   
    /* 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;
            padding: 5px;   
        }
        #scrall_top>img{
            width: 50px;
        }

        /* les boutons */
        .btn1 {
            background: var(--linear-v1-right);
        }
        .btn2 {
            background: var(--linear-v2-right);
        }
        .btn3 {
            background: var(--linear-v3-right);
        }
        .btn4 {
            background: var(--linear-v4-right);
        }
        .btn5 {
            background: var(--linear-v5-right);
        }

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


/* FIN REGLES GENERALE */

/* HEADER */
    header nav{
        letter-spacing: 3px;
    }
    header{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
        padding: 15px 5%;
        transition: ease-in-out .5s;
    }
    header ul li a,header ul li{
        padding: 5px; 
        font-size: 15px;
        
    }
    header.home_page ul li a,header.home_page ul li{
        color: var(--color3);
    } 
    header li a{
        transition: all ease-in-out .2s;
        /* font-weight: bold; */
    }
    header ul li{
      position: relative;
    }
    .menu-item-has-children{
        position: relative;
    }
    #first_menu .sub-menu{
        top: 60%;
        left: -20%;
        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;
        width: 150%;
        margin: 0;
        overflow: hidden;
        visibility: hidden; 
        /* padding-top: 15px;    */
    }
    #first_menu .menu-item-has-children:hover>a+.sub-menu{
        opacity: 1;
        z-index: 1; 
        top: 140%;
        color: var(--color3);
        visibility: initial; 
    }
    /* affichage de la ligne en dessous des li */
    header li a:after {    
        top: 0;
        content: "";
        display: block;
        height: 100%;
        left: 50%;
        position: absolute;
        background: var(--linear-v3-right) ;
        transition: width 0.2s ease 0s, left 0.2s ease 0s;
        width: 0;
        clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
        z-index: -1;
    } 
    header li a:hover:after { 
        width: 120%; 
        left: -10px; 
    }
    #first_menu .menu-item-has-children:hover>a+.sub-menu li a:after,#first_menu .current-menu-item > a:hover::after {
        display: none;   
    }
    #first_menu .menu-item-has-children:hover>a+.sub-menu li a:hover {
        background: var(--linear-v3-right); 
    }

    header li a:hover, header.home_page .sub-menu a:hover { 
        color: var(--color3);
    }
    .fixed_header{
        background: var(--color3);
        box-shadow: 0 1px 5px #00000049;
    } 
    .fixed_header .sub-menu{
        color: var(--color1);
        background: var(--color3);
        /* box-shadow: 0 1px 5px #00000049; */
    } 
    #first_menu .sub-menu a::after{
        clip-path: none;
    }
    #first_menu .sub-menu a{
        display: inline-block; 
    }
    header.home_page .sub-menu a{
        color: var(--color1);
    }

/* FIN HEADER */

/* MAIN */

/* groupe */
    .title_section{
        padding-bottom: 30px;
    }
    .pad_btn{
        padding-top: 30px;
    }
    #a_propos figure img{
        width: 40%;
        min-width: 200px;
    }
    .pad_contour{
        padding: 2%;
    }
    #section_services_home p{
        text-align: center;
    }
    .bg_img_section{
        position: absolute;
        top: -135px;
        left: 0;
        object-fit: cover;
        object-position: center;
        opacity: .15;
        z-index: -5;
    }
    .margin_p p{
        margin: 15px 0;
    }
    .items_service figure > img {
        width: 150px;
        min-width: 100px;
        margin: 15px auto;
    }
    .baniere_page {
        position: relative;
        height: 35vh;
        margin-top: 117px;
        overflow: hidden;
    }

    .baniere_page img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover; 
        object-position: center;
        z-index: -1;
    }
    .baniere_page h1 {
      z-index: 1;
    }

    #section_content_a_propos ul{
        width: max-content;
        max-width: 90%;
        margin: 0 auto;
        padding: 15px 0;
    }
    .chapeau {
        box-shadow: 1px 1px 5px var(--color1);
    }

    .chapeau p{
        text-align: center;
    }
    .items_objectif{
        width: 250px;
        min-height: 200px;
        color: var(--color2v1);
        background: var(--color5);
        box-shadow: 2px 2px 5px var(--color1);
        margin: 15px;
    }
    .items_objectif h3{
        font-size: 1.1rem;
    }
    .items_img_objectif.landscape,.items_img_objectif.portrait,.items_img_objectif.carre{
        margin-bottom: 15px;
    }
    .items_img_objectif.portrait{
        width: 100px;
    }
    .items_img_objectif.landscape{
        width: 160px;
    }
    .items_img_objectif.carre{
        width: 130px;
    }
    .goutte{
        border-top-left-radius: 300px;
        border-bottom-right-radius: 300px;
    }

    .beandeau_metier{
        background: var(--color4);
    }
    .beandeau_metier ul{
        width: max-content;
        margin: 0 auto;
    }
    .beandeau_metier img,.img_bottom_section_metier{
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 0;
    }
    .beandeau_metier img{
        opacity: .4 !important;
    }
    .img_bottom_section_metier{
        opacity: .11;
    }
    .txt_beandeau_metier {
        z-index: 2;
    }
    .bottom_section_metier{
        align-items: stretch;
    }
    .bottom_section_metier .btn{
        white-space: wrap;
    }

    .items_service_metier>div{
        display: flex;
        align-items: stretch;
    } 
    .item_img_service{
        height: 100%;
        object-fit: cover;
    } 





    /* Page home */
    /* baniere */
        #baniere_home{
            height: 100vh;
            z-index: 0;
        }
        #baniere_home::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, transparent ,var(--color1v2), var(--color1)   );
            z-index: 0;
            opacity: .83;
        }
        #baniere_home img{
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            object-fit: cover;
            object-position: center;
        }
        #baniere_home h1{
            font-size: 5rem;
            padding-bottom: 30px;
            animation: blur_bottom linear .8s;
        }
        #baniere_home h2{
            font-size: 3rem;
            font-weight: 100;
            opacity: 0;
            animation: blur_top linear .8s forwards;
            animation-delay: .5s;
        }
        #btn_baniere_home{
            opacity: 0;
            animation: blur_top linear 1s forwards;
            animation-delay: .8s;

        }
        #content_baniere{
            z-index: 1;
        }
        #content_title_baniere_home{
            padding: 60px 0
        }
        #scrall_bottom {
            left: 0;
            bottom: 30px;
            width: 100%;
            height: max-content;
            z-index: 1;
        }
        #scrall_bottom img{
            width: 30px;
        }

        /* a propos */

        .befor_propos{
            padding-left: 100px;
        }

        .befor_propos::before{
            content: '';
            position: absolute;
            top: 0;
            left: -11px;
            width: 100px;
            height: 100%;
            background: url(../img/befor_a_propos.png) no-repeat;
            background-size: 100%;
        }

        /* les services */

        .items_service{
            width: 300px;
            height: max-content;
            border: solid 2px var(--color2);
            padding: 15px;
        }
        .link_item_service_home {
            height: max-content;
        }
        .link_item_service_home h3{
            padding-bottom: 15px;       
        }
        .link_item_service_home img.landscap{
            width: 150px;
        }
        .link_item_service_home img.portrait{
            width: 120px;
        }
        .corner_btn{
            bottom: -5px;
            right: 0px;
            background: var(--color2);
            padding: 10px;
            border-top-left-radius: 20px;
            text-align: end;
        }
        .corner_btn>img{
            width: 15px;
        }
        .link_item_service_home:hover{
            transform: scale(1.05);
            box-shadow: 0 0 10px 1px var(--color1);
        }


        /* secteur d'activité */
        #secteur_activite{
            padding: var(--pad-h) var(--pad-l) ;
        }
        #secteur_activite article{
            margin-bottom: 60px;
        }
        .radius_right{
            border-top-right-radius: 100px;
            border-bottom-right-radius: 100px;
        }
        /* .radius_left{
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            flex-direction: row-reverse;
        } */
        .befor_after_title > h3{
            margin: 0 15px;
        }
        .befor_after{
            height: 3px;
            width: 50px;
            background:var(--color2);
        }
        #item_secteur1 figure{
            width: max-content;
            height: max-content;
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

        }
     
        #item_secteur2 img,#item_secteur3 figure, #item_secteur1 figure img{
            width: 350px;
            height: 350px;
        }
        #item_secteur3 figure{
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            width: 530px;
            height: 350px;
       } 
        #item_secteur3 img{
            height: 500px;
       } 
        #item_secteur1::before,#item_secteur2::before,#item_secteur3::before{
            content: '';
            position: absolute;
            top:0 ;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        #item_secteur1::before{
            background: linear-gradient(to top , var(--color2v1), var(--color2) );
            opacity: .3;
        }
        #item_secteur2::before{
            background: linear-gradient(to top , var(--color2v1), var(--color1v1) );
            opacity: .3
        }
        #item_secteur3::before{
            background: linear-gradient(to top , #ADADAD, var(--color3) );
            opacity: .5;
        }
        .befor_bg::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(../img/1003581_oiu9j11.webp) no-repeat center;
            background-attachment: fixed;
            background-size: cover;
            opacity: .12;
            z-index: -1;
        }
        #content_secteur article:nth-child(even){
            flex-direction: row-reverse;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        #content_secteur article:nth-child(even) figure{
            border-radius: 50%;
        }

        /* Section engagement */
        #section_engagement{
            background: linear-gradient(to top, transparent , #233265bd, transparent,transparent) ;
        }
        #section_engagement article{
            margin: 15px 0 ;
        }
        #section_engagement article:nth-child(2){
            margin: 15px 30px ;
        }
        .items_engagement img.landscape,.items_engagement img.portrait {
            min-width: 100px;
        }
        .items_engagement img.landscape {
            width: 150px;
        }
        .items_engagement img.portrait {
            width: 125px;
        }
        .items_engagement figure{
            height: 165px;
        }
         #before_left,#before_right{
            position: absolute;
            z-index: -1;
        }
        #before_left{
            top: -60px;
            left: 5%;
            width: 452px;
            height: 500px;;
        }
        #before_right{
            top: 25%;
            right: 5%;
            width: 300px;
        }
        .items_engagement{
            background: var(--color3);
            width: 300px;
        }
        .items_engagement p,.items_engagement h3{
            text-align: center;
        }
        .items_engagement p{
            padding: 10px 0;
        }
        #bottom_ligne{
            bottom: 0;
            left: 0;
            width: 100%;
            transform: translateY(-30px);
            z-index: 1;
        }
        #bottom_ligne>div{
            width: 80%;
            height: 2px;
            background: linear-gradient(to right, var(--color1), var(--color2), var(--color1));
        }

        /* section chiffre */

        .items_chiffre{
            width: 200px;
            height: max-content;
        }

        .items_img.landscape,.items_img.portrait{
            position: absolute;
            opacity: .15;
            z-index: -1;
            top: 20%;
        }
        .items_img.landscape{
            width: 180px;
        }
        .items_img.portrait{
            width: 100px;
        }
        .items_number{
            font-size: 5rem;
        }
        /* section clients */
        #slider-auto{
            box-shadow: -5px 26px 24px #23326591;
        }
        /* section recrutement */
        #recrutement::before{
            content: '';
            position: absolute;
            top:0;
            left: -100px;
            width: 500px;
            height: 100%;
            background: url(../img/before_rejoindre.webp)no-repeat center;
            background-size: contain;
            z-index: -1;
        }

        #recrutement::after{
            content: '';
            position: absolute;
            top:0;
            right: -100px;
            width: 500px;
            height: 100%;
            background: url(../img/after_rejoindre.webp)no-repeat center;
            background-size: contain;
            z-index: -1;
        }
    /* Fin Page home */


    /* Page nous rejoindre */
        .bg_baniere_page_rejoindre::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:linear-gradient(to right,transparent,var(--color1v2) ,var(--color1v2), var(--color1)    );
            z-index: 0;
            opacity: .8;
        }
        #section_content_rejoindre p{
            text-align: center;
        }

    /* Fin Page nous rejoindre */
   

    /* Page A propos */
        .reveal h2{
            padding: 30px 0;
        }
        #section_content_a_propos >article::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: .1;
            background: url(../img/logo_big.webp) no-repeat center;
            background-attachment: fixed;
            background-size: contain;
        }
    
    /* Page contact */
        .bg_baniere_page_contact::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:linear-gradient(to right, var(--color1v1), var(--color1)    );
            z-index: 0;
            opacity: .7;
        }
        #contact_adresse h2{
            padding: 15px 0;
        }
        #contact_adresse span,#contact_adresse a{
            padding: 5px 0;
        }
        #contact_adresse a{
            text-align: center;
        }
        #bg_content_contact::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:url(../img/bg_contact.webp) no-repeat center;
            background-size: 100%;
            background-attachment: fixed;
            opacity: .1;
            z-index: -1;    
        }
        #contact_adresse iframe{
            width: 100%;
        }
    /* fin Page contact */

    /* page achat */
        #goutte_achat{
            box-shadow: 3px 3px 5px var(--color1);
        }
        .text_content{
            justify-content: space-evenly;
        } 
        .items_service_metier{
            align-items: stretch;
        }
        .service_achat .text_content{
            background: linear-gradient(to right, var(--color1), var(--color1v2));
        }
        .section_service .items_service_metier:nth-last-child(odd){
            flex-direction: row-reverse;
        }
        .section_service .items_service_metier:nth-last-child(odd) .text_content{
            background: linear-gradient(to left, var(--color1), var(--color1v2));
        }
        .beandeau_metier_achat::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 1;
            background: var(--linear-v1-top);
            opacity: .5;
        }
    /* fin page contract achat */

    /* page gestion  */
        .bg_baniere_page_gestion::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:linear-gradient(to right,var(--color1) ,var(--color1), var(--color2v1)    );
            z-index: 0;
            opacity: .65;
        }
        #goutte_gestion{
            box-shadow: 3px 3px 5px var(--color2v1);
        }
        .beandeau_metier_gestion::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 1;
            background: var(--linear-v5-top);
            opacity: .5;
        }
        .beandeau_metier_gestion img{
            opacity: .2;
        }
        .service_gestion .text_content{
            background: linear-gradient(to right, var(--color2v1), var(--color1));
        }
        .section_service .items_service_metier:nth-last-child(odd){
            flex-direction: row-reverse;
        }
        .service_gestion .items_service_metier:nth-last-child(odd) .text_content{
            background: linear-gradient(to left, var(--color2v1), var(--color1));
        }
        .final_section figure>img{
            width: 300px;
            margin: 0 auto 30px;
        } 
    /* Fin page gestion  */


    /* page contract management */

        .bg_baniere_page_contract::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:linear-gradient(to right ,var(--color2), var(--color2v1)    );
            z-index: 0;
            opacity: .65;
        }
        #goutte_contract{
            box-shadow: 3px 3px 5px var(--color2);
        }
        .service_contract .text_content{
            background: linear-gradient(to right, var(--color2), var(--color2v1));
        }
        .section_contract .items_service_metier:nth-last-child(odd){
            flex-direction: row-reverse;
        }
        .service_contract .items_service_metier:nth-last-child(odd) .text_content{
            background: linear-gradient(to left, var(--color2), var(--color2v1));
        }
        .beandeau_metier_contract::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 1;
            background: var(--linear-v3-top);
            opacity: .5;
        }
        .beandeau_metier_contract img{
            opacity: .2;
        }
        #final_section_contract figure img{
            width: 500px;
        }

    /* fin page contract management */

    /* 404 */
        .error404_v2{
            background: var(--color3);
            overflow: hidden;
        }

        .error_indus{
            min-height:100vh;
            background:#1a1a1a;
            overflow:hidden;
            position:relative;
        }

        .plate{
            position:relative;
            width:90%;
            max-width:900px;
            padding:80px 40px;
            text-align:center;
            background: linear-gradient(120deg,#2a2a2a,#3a3a3a,#1f1f1f);
            box-shadow:inset 0 0 40px rgba(0,0,0,0.8), 0 40px 80px rgba(0,0,0,0.8);
            overflow:hidden;
        }

        /* effet acier brossé */
        .plate::before{
            content:"";
            position:absolute;
            width:200%;
            height:100%;
            top:0;
            left:-50%;
            background: repeating-linear-gradient(
                90deg,
                rgba(255,255,255,0.03),
                rgba(255,255,255,0.03) 2px,
                transparent 2px,
                transparent 6px
            );
            animation: metalLight 6s linear infinite;
        }
        .plate div[role="button"]{
            position: relative;
            z-index: 1;
        }
        .plate div[role="button"] a{
            background: linear-gradient(to right,#a17e00,#ffc801);
        }

        .cut{
            font-size:10rem;
            font-weight:bold;
            color:#ffc800;
            text-shadow: -2px -2px 2px rgba(255,255,255,0.1),2px 2px 5px rgba(0,0,0,0.8);
            margin-bottom:20px;
        }
        .msg{
            color:#ffc800;;
            letter-spacing:2px;
            margin-bottom:30px;
        }

        .btn_back{
            border:2px solid #f2b705;
            color:#f2b705;
            background:transparent;
        }

        .btn_back:hover{
            background:#f2b705;
            color:#000;
        }

        .rivets::before,
        .rivets::after{
            content:"";
            position:absolute;
            width:12px;
            height:12px;
            background:#111;
            border-radius:50%;
            box-shadow: inset 0 2px 3px rgba(255,255,255,0.2);
        }
        /* coins */
        .rivets::before{
            top:10px;
            left:10px;
        }
        .rivets::after{
            bottom:10px;
            right:10px;
        }

        .error_indus::before{
            content:"";
            position:absolute;
            width:200%;
            height:60px;
            background: repeating-linear-gradient(
                45deg,
                #f2b705,
                #f2b705 20px,
                #000 20px,
                #000 40px
            );
            top:10%;
            left:-20%;
            transform:rotate(-5deg);
            opacity:0.2;
        }
        .smoke{
            position:absolute;
            width:200%;
            height:200%;
            background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
            animation: smokeMove 1s linear infinite;
        }

    /* fin 404  */

    


    /* 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;
        font-size: 1rem;
        z-index: 0;
    }
    footer::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/architec.png) no-repeat;
    background-size: 153%;
    opacity: .05;
    background-position: 22% 70%;
    z-index: -1;
    }

    footer>div{
        padding: 0 5% 30px;
    }
  
    /* 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-family: var(--font2);
        font-size: 1rem;
        color: var(--color1);
        letter-spacing: 3px;
        padding: 5px 0;
    }
    #coyrate{
    background: linear-gradient( to right, var(--color1v1),var(--color1v1), var(--color1),var(--color1v1),var(--color1v1));
}
/* 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);
}