@charset "UTF-8";
/* CSS Document */

html{font-size: 62.5%;}
body{margin: 0 auto;padding: 0;overflow-x:hidden;position: relative;width:100%;background:#000;font-family: 'Montserrat', sans-serif;font-weight:300;color:#8b8d8e;}

.container, .contDemi, .smlCont, .contPad, .contTroisQuart, .contQuart, .contEquipe{position:relative;display:block;margin:0 auto;padding:0 80px;width:100%;}
.container{max-width:1200px;}
.contEquipe{max-width:900px;}
.contDemi{max-width:600px;}
.contTroisQuart{max-width:700px;}
.contQuart{max-width:350px;}

.smlCont{max-width:1000px}
.contPad {max-width: 100%;padding:0 40px}

.pad{padding-top:40px;padding-bottom:40px} .pad.home01{padding-top:10px;padding-bottom:10px}
.bigPad{padding-top:80px;padding-bottom:80px}

a[href^=tel]{color:inherit;text-decoration:none;} a{text-decoration:none;color:inherit;cursor:pointer}a:focus{outline:0;}
img{max-width:100%;}
hr{border:0;border-bottom:1px dotted #ccc;margin:40px 0}

.ancre{padding-top:50px;margin-top:-50px;}/* hauteur du header*/

.center{text-align:center;} .left{text-align:left;} .right{text-align:right;} .justify{text-align:justify;} .uppercase{text-transform:uppercase;}
.none{display:none;} .block{display:block;}
.down{margin-bottom:30px;}.up{margin-top:30px;}
.flt-left{float:left}.flt-right{float:right}.clear{clear:both;}


/* COULEUR */

.blanc{color:#fff;}
.turquoise{color:#0093a3;}
.jaune{color:#FFCD00;}
.noir{color:#000;}

.bckJaune{background:#FFCD00;}
.bckNoir{background:#000;}
.bckGris01{background:#3b3b41;}
.bckGris02{background:#323237;}
.bckGris03{background:#28282c;}
.bckBlanc{background-color:#fff;}

.bckJaune p{color:#000}
.bckNoir .blanc h1, .bckNoir .blanc h2{color:#fff}
.bold{font-weight:700}

/* TEXTE */
h1, h2, h3, h4, h5, h6{margin:0;line-height:1.1;text-transform:uppercase;color:#000}
h1{font-size:50px;font-weight:700;}
h2{font-size:24px;font-family: 'Rock Salt', cursive;text-transform: none;font-weight: 400} h2 + h1{margin-top:7px}
h3{font-size:20px;font-weight:700;text-transform: none}
h4{font-size:20px;font-weight:300;color:#fff;text-transform: none;margin-bottom: 20px}
h5{font-size:16px;font-weight:300;text-transform: none;color:#8b8d8e;margin-top:5px}

h1 + p, h3 + p, h4 + p, h5 + p, h6 + p, h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul{margin-top:15px}
h2 + p{margin-top:30px}

p, li{font-size:16px;line-height:1.5;margin:0 0 20px}
ul{list-style-type:square} ul li{margin:0 0 0 15px}

.bt{line-height:1;z-index:99;position:relative;margin:50px 0 0;display:block;}
.bt a {padding:28px 40px;color:#000;display:inline-block;font-weight: 700; -moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;text-transform: uppercase}

.bt.blanc a{background: #000;color:#fff;}
.bt.blanc:hover a{background: #fff;color:#000;}

.bt.turquoise a{background: #FFCD00;color:#fff;}
.bt.turquoise:hover a{background: #000000;}

.politique-btn{
    display: inline-block;
    border: 2px solid #FFCD00;
    padding: 12px;
    margin: 12px!important;
}
.poltique-list{
    list-style: num;
}
.page main{margin-top:180px}
.page #navMenu{top:36px}
.page header .logo{margin-top:0px}

header{width:100%;height:150px;z-index:100;background:rgba(0, 0, 0, 0); position: fixed;top: 0;-moz-transition:all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
header.sticky{background:rgba(0, 0, 0, 0.85)} header.nav-up {top: -200px;}
header .logo{float:left;margin:50px 0 0 40px;width:auto}header .logo img{moz-transition:all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}

#navMenu {position:absolute;top:70px;right:40px;}
#navMenu ul li{display:inline-block;font-size:15px;line-height:1;margin:0;padding:0 25px 0 0;background:none;font-weight:500;text-transform: uppercase}
#navMenu ul li a{padding:3px 16px 0 0;color:#fff;}
#navMenu ul li.fb{padding-right:20px;}#navMenu ul li.fb:before,#navMenu ul li.lk:before{content:'';height:0;background:transparent}
#navMenu ul li.fb a, #navMenu ul li.lk a{padding:0;width:25px;height:25px;display: inline-block}
#navMenu ul li.fb a{background: url(../img/picto/facebook.svg) no-repeat center top / 25px auto;}
#navMenu ul li.lk a{background: url(../img/picto/linkedin.svg) no-repeat center top / 25px auto;}
#navMenu ul li.fb a:hover, #navMenu ul li.lk a:hover{background-position: center bottom;border:0}
#navMenu ul li:last-child{padding:0}
#navMenu ul li a.active{border-top:2px solid #FFCD00;moz-transition:all 0.1s ease-in-out;transition: all 0.1s ease-in-out;}
span#menuMob, .closebtn {display:none}

#navMenu ul li:before  {
	content: '';
    display: block;
    width: 0;
    height: 2px;
	margin-bottom:5px;
    background: #FFCD00;
    transition: width .3s;
}

#navMenu ul li:hover:before , #navMenu ul li a.active{
    width: 100%;
    transition: width .3s;
}


.home #navMenu ul li.fb, .home #navMenu ul li.lk{position:absolute;}
.home #navMenu ul li.fb{top:200px;right:0px;}
.home #navMenu ul li.lk{top:250px;right:17px}

.home header.nav-up #navMenu ul li.fb, .home header.nav-up #navMenu ul li.lk{right:-100px}

header.sticky.nav-down .logo{margin-top:10px}
header.sticky.nav-down .logo img{width:200px}
header.sticky.nav-down #navMenu{top:20px}


video{background: url(../img/slider/fond.jpg) no-repeat center center / cover}
#headhome{position:relative;background:#000;z-index:0;height:800px}
#myVideo {position: absolute;right: 0;bottom:0;z-index:-3;min-width: 100%; min-height: 100%;-webkit-filter: grayscale(100%);filter: grayscale(100%);opacity: 0.4}
#headhome .content {position: absolute;color: #fff;width: 100%;padding: 20px;text-align: center;}
#headhome .content h1{font-size:80px;color:#fff;padding-top:330px}
#headhome .content p{font-family: 'Rock Salt', cursive;font-size:24px;text-transform: none}
#headhome .engrenageHome {position:absolute;right: -130px;bottom:-130px;}


/* FLÈCHE BOUNCE */
.animated-infinite { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } 
.bounce { -webkit-animation-name: bounce; animation-name: bounce; }
@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);} 60% {-webkit-transform: translateY(-15px);} } 
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} } 

.fleche{width:100%;position:absolute;bottom:140px;left:0;z-index:999;display: block}
.fleche a{width:100px;height:100px;display: block;cursor: pointer;margin:0 auto}
.fleche img{width:15px;margin:0 auto;display:block;z-index:101}

.fondService{position:relative;background:#000;z-index:0;overflow: hidden;padding-bottom:260px; }
.fondService .call h1{padding-bottom:120px;}
.fondService video{position: absolute;right: 0;bottom:0;z-index:-3;min-width: 100%; min-height: 100%;-webkit-filter: grayscale(100%);filter: grayscale(100%);opacity: 0.4}

.fondService.pageService{padding-bottom: 0;padding-top: 60px}
.fondService.pageService .call h1{padding-bottom: 0;font-size:80px}

.blocService{transform:translateY(-160px);margin-bottom:-140px;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.blocService h3{color:#fff}
.blocService .container{padding-right:20px;padding-left:20px}
.blocService .no_4_of_12:hover{background-color: #FFCD00;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.blocService .no_4_of_12 p{-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}.blocService .no_4_of_12:hover p{color:#000}
.blocService .picto svg{width:90px;margin-bottom: 20px;fill:#fff;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.blocService .no_4_of_12:hover .picto svg{fill: #000;}


.imgLeft img{margin:0px 0 0 -250px; min-height: 100%;z-index: 0; max-width:1000px; width: 800px;}
 img.boulon {margin:0 0 -100px -215px;z-index: 99;position:relative}
 

.fondReal{background: url(../img/6.png) no-repeat left -120px bottom -180px / 400px;padding-bottom: 100px}
.realHome .grid-container{margin-top:100px}


.grid-container {display: grid;grid-gap: 30px;}.grid-container .up{margin-top:80px}
.grid-container > div{overflow:hidden;position:relative;grid-template-rows: auto auto auto;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.grid-container > div img{display:block;margin:0 auto;opacity:0;}

.thumb a{height:100%;}
.thumb p{width:100%;background:#FFCD00;padding:10px;font-size:14px;position:absolute;bottom:-100px;text-align:center;color:#fff;margin:0;text-transform: uppercase;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out}
.thumb:hover p{bottom:0} 


.bloc01,.bloc02, .bloc03, .bloc04, .bloc05, .bloc06, .bloc07{margin:30px 0}

/* -------------------------------------- */
/* 1. Base Grid Setup (REQUIRED)          */
/* -------------------------------------- */

/* Define the base grid properties for ALL containers */
.grid-container {
    display: grid;
    /* Set a default column structure for all blocks. 
       A 3-column explicit grid is common for these complex layouts. */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Space between all grid items */
}

/* Ensure blocks have proper vertical spacing */
.bloc01, .bloc02, .bloc03, .bloc04, .bloc05, .bloc06, .bloc07, .bloc08 {
    margin: 50px 0; /* Increased margin for better separation */
}

/* -------------------------------------- */
/* 2. Item Placement Definitions (Your original code, now functional) */
/* -------------------------------------- */

/* PAGE D'ACCUEIL - Assume grid-container class is .realHome */
.realHome .item1 {grid-column: 1 / span 1; grid-row: 1 / span 1;}
.realHome .item2 {grid-column: 2 / span 1; grid-row: 1 / span 1;}
.realHome .item3 {grid-column: 1 / span 1; grid-row: 2 / span 1;}
.realHome .item4 {grid-column: 2 / span 1; grid-row: 2 / span 1;}
.realHome .item5 {grid-column: 3 / span 1; grid-row: 1 / span 2;}
.realHome .item6 {grid-column: 1 / span 2; grid-row: 3 / span 2;}
.realHome .item7 {grid-column: 3 / span 1; grid-row: 3 / span 1;}
.realHome .item8 {grid-column: 3 / span 1; grid-row: 4 / span 1;}


/* bloc01 */
.bloc01 .item1 {grid-column: 1 / span 1; grid-row: 1 / span 1;}
.bloc01 .item2 {grid-column: 2 / span 1; grid-row: 1 / span 1;}
.bloc01 .item3 {grid-column: 1 / span 1; grid-row: 2 / span 1;}
.bloc01 .item4 {grid-column: 2 / span 1; grid-row: 2 / span 1;}
.bloc01 .item5 {grid-column: 3 / span 1; grid-row: 1 / span 2;}

/* bloc02 */
.bloc02 .item1 {grid-column: 1 / span 2; grid-row: 1 / span 2;}
.bloc02 .item2 {grid-column: 3 / span 1; grid-row: 1 / span 1;}
.bloc02 .item3 {grid-column: 1 / span 1; grid-row: 3 / span 1;}
.bloc02 .item4 {grid-column: 2 / span 1; grid-row: 3 / span 1;}
.bloc02 .item5 {grid-column: 3 / span 1; grid-row: 2 / span 2;}

/* bloc03 */
.bloc03 .item1 {grid-column: 1 / span 1; grid-row: 1 / span 1;}
.bloc03 .item2 {grid-column: 2 / span 1; grid-row: 1 / span 1;}

/* bloc04 */
.bloc04 .item1 {grid-column: 1 / span 1; grid-row: 1 / span 2;}
.bloc04 .item2 {grid-column: 2 / span 1; grid-row: 1 / span 1;}
.bloc04 .item3 {grid-column: 3 / span 1; grid-row: 1 / span 1;}
.bloc04 .item4 {grid-column: 1 / span 1; grid-row: 3 / span 1;}
.bloc04 .item5 {grid-column: 2 / span 2; grid-row: 2 / span 2;}

/* bloc05 */
.bloc05 .item1 {grid-column: 1 / span 2; grid-row: 1 / span 2;}
.bloc05 .item2 {grid-column: 3 / span 1; grid-row: 1 / span 2;}
.bloc05 .item3 {grid-column: 1 / span 1; grid-row: 3 / span 1;}
.bloc05 .item4 {grid-column: 2 / span 1; grid-row: 3 / span 1;}
.bloc05 .item5 {grid-column: 3 / span 1; grid-row: 3 / span 1;}

/* bloc06 */
.bloc06 .item1 {grid-column: 1 / span 1; grid-row: 1 / span 1;}
.bloc06 .item2 {grid-column: 2 / span 1; grid-row: 1 / span 1;}

/* bloc07 */
.bloc07 .item1 {grid-column: 1 / span 1; grid-row: 1 / span 1;}
.bloc07 .item2 {grid-column: 2 / span 1; grid-row: 1 / span 1;}
.bloc07 .item3 {grid-column: 3 / span 1; grid-row: 1 / span 1;}
.bloc07 .item4 {grid-column: 1 / span 1; grid-row: 3 / span 1;}
.bloc07 .item5 {grid-column: 2 / span 2; grid-row: 2 / span 2;}
.bloc07 .item6 {grid-column: 1 / span 2; grid-row: 4 / span 2;}
.bloc07 .item7 {grid-column: 3 / span 1; grid-row: 4 / span 1;}
.bloc07 .item8 {grid-column: 3 / span 1; grid-row: 5 / span 1;}

/* bloc08 */
/* Container Setup (Assuming it's inside a 3-column grid-container) */
.bloc08 {
    /* Ensure the container is defined as a grid if it hasn't been already */
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
}

/* Item 1: Wide item, takes up two columns in the first row */
.bloc08 .item1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
}

/* Item 2: Sits next to Item 1, taking the third column in the first row */
.bloc08 .item2 {
    grid-column: 3 / span 12;
    grid-row: 1 / span 1;
}

/* Item 3: A standard single cell in the second row */
.bloc08 .item3 {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}

/* Item 4: Sits next to Item 3, taking the second column in the second row */
.bloc08 .item4 {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}

/* Item 5: Sits in the third column in the second row */
.bloc08 .item5 {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
}

/* -------------------------------------- */
/* 3. Basic Responsiveness for Mobile     */
/* -------------------------------------- */

@media (max-width: 768px) {
    /* On smaller screens, force all containers to a single-column layout */
    .grid-container {
        grid-template-columns: 1fr;
    }
    /* Reset all custom grid spans for items on mobile so they stack naturally */
    .grid-container .thumb {
        grid-column: 1 / -1 !important; /* Forces all items to span the full width */
        grid-row: auto !important; /* Allows items to stack one after the other */
    }
}


.split .item1 {grid-column: 1 /  span 1;grid-row: 1 / span 1;}
.split .item2 {grid-column: 2 /  span 1;grid-row: 1 / span 1;}

.fiche > img{margin:30px auto 0}
.fiche .split{margin-top:30px}


/* SERVICE  */

.title .col:first-child{margin-right:20px}

.comm{position:absolute;bottom:0px;left:0;z-index: -1}
.commUp{position:absolute;top:-20px;left:0;z-index: -1}
.avantageImg{position:absolute;top:-20px;z-index: -1}
.avantage p{margin-bottom:0}
.avantage .row{margin-bottom:17px}

.contactImg {position:absolute;top:-10px;right:-60px;width:68%;margin-bottom: 40px}
.space{display:block;height:80px}
.contactRoue{position:absolute;bottom:-180px;left:-180px}


img.homard{transform: translate(0,-15px)}
.liste li{list-style-type: none;text-align: left;}
.liste li:before{content:" \f105 ";font-weight:900;color:#FFCD00;display:block;float:left;height:100%;font-size:22px;margin:-6px 0 0 -20px;font-family: "Font Awesome\ 5 Free";}
.cache .fondReal {padding-bottom:0}

/* FOOTER */

footer{width:100%;background: #FFCD00;color:#000;padding-bottom:10px}
footer .bigPad{padding-bottom: 20px}
.imgFooter{margin:-30px 0 0}
.demandeBt:hover{color:#fff;}

#credits{background:#000;padding:10px 30px;}
#credits p, #credits a{margin:0;font-size:16px;color:#aaa}


@media only screen and (max-width: 1024px) {

.container, .contDemi, .contPad, .contEquipe{padding-left:60px;padding-right:60px}
header .logo{margin-left:20px}
header .logo img{width:190px}
#navMenu {right:20px;top:53px}
#navMenu ul li{font-size:12.5px;padding:0 10px 0 0;}
.page #navMenu{top:23px}

header.sticky.nav-down .logo{margin-top:10px}
header.sticky.nav-down .logo img{width:180px}
header.sticky.nav-down #navMenu{top:12px}

#headhome{height:600px}
#headhome .content h1{font-size:70px;padding-top:220px}

.contactImg img{min-width: 100%;max-width: 100%;}

}


@media only screen and (max-width: 768px) {	


.container, .contDemi, .contPad, .contTroisQuart, .contEquipe{padding:0 40px;}
.pad{padding-top:30px;padding-bottom:30px}.pad.home01{padding-top:30px;padding-bottom:30px}
.bigPad, .bckJaune .pad{padding-top:60px;padding-bottom:60px}
.contTroisQuart, .contDemi{max-width: 100%}


h1{font-size:38px;}
h2{font-size:22px;}
h3, h4{font-size:18px;}
h5{font-size: 14px}


p, li{font-size:14px;margin:15px 0;}
li{margin:5px 0}


header .logo{margin-top:30px}

span#menuMob {position:absolute;right:20px;top:40px;width:40px;height:40px;display:block;background: url("../img/menu-mobile.svg") no-repeat center center / 35px;cursor:pointer}
header.sticky.nav-down span#menuMob {top:20px}
.open .overlay{width:100%} .overlay{height:100%;width:0;position:fixed;z-index:1;top:0;left:0;background: rgba(0,0,0, 0.9);overflow-x: hidden;transition: 0.3s;}
.overlay .closebtn {display:block;position: absolute;top:20px;right: 45px;font-size: 60px;} .overlay-content {position: relative;top: 25%;width: 100%;text-align: center;}

#navMenu nav{position:relative;width:100%;height:100%;padding-right:50px}
#navMenu ul li{display:block;text-align:right;padding:0;transition: 0.3s;padding:10px 0;font-size:20px}
#navMenu ul li a{padding:0}
#navMenu ul li.fb{padding:10px 0}

.bt a {padding:20px 30px;}

#headhome{height:450px}
#headhome .content h1{font-size:60px;padding-top:120px}
#headhome .content p{font-size:20px}
#headhome .engrenageHome img{width:300px}
#headhome .engrenageHome {right: -60px;bottom: -120px;}


.smlServiceHome{transform: translate(0,-60px)}

.imgLeft img{margin:20px 0 0 -60px;}
img.boulon {margin: 0 0 -100px -87%;}


.grid-container {grid-gap: 10px;}
.realHome .grid-container{margin-top:50px}
.grid-container .thumb p{font-size:12px}

.bloc02, .bloc03, .bloc04, .bloc05, .bloc06, .bloc07{margin-top:10px}
.bloc07{margin-bottom:30px}

.fiche > img{margin:10px auto 0}
.fiche .split{margin-top:10px}

.page main {margin-top: 120px;}

.fondService.pageService .call h1{font-size:60px}
.comm, .commUp, .contactImg, .avantageImg{position:relative;top:auto;bottom:auto;left:auto;right:auto}
.space{display:none;}


.fondReal {background: transparent url(../img/meublage/engrenage-footer.svg) no-repeat left -85px bottom -120px / 300px;}
 footer{text-align:center}
.imgFooter{margin:0px 0 0;width:150px}


.row.title{display: flex;text-align: left;-webkit-align-items: center;align-items: center;}
.row.title .col{margin-bottom:0}
.row.title .col:first-child{width:20%;}
.row.title h1, .row.title h2{text-align: left!important;padding-left:20px}
.row.title img{min-width:60px}


.equipe{text-align: center}

}


@media only screen and (max-width: 480px) {

.container, .contDemi, .contPad, .contEquipe, .contTroisQuart{padding:0 25px;}
.pad{padding-top:25px;padding-bottom:25px}
.bigPad, .bckJaune .pad{padding-top:50px;padding-bottom:50px}


h1{font-size:30px;}
h2{font-size:20px;}
h3, h4{font-size:16px;}
h5{font-size: 12px}

p, li{font-size:12px;}

#headhome{height:400px}
#headhome .content h1{font-size:40px;padding-top:120px}
#headhome .content p{font-size:16px}
.fleche{bottom:5%}

.thumb p{display: none}

.fondService.pageService .call h1{font-size:40px}

.row.title h1{font-size:26px}

img.boulon {margin: 0 0 0 -100px;width: 170px;}

.grid-container {display: block;grid-gap:10px;}
.grid-container > div{margin:10px auto}