/* GENERAL */
body{margin:0px; padding:0px; color:#080C31; font-family: 'Inter'; background:#F2EFE8;}
h1{font-family:"Bebas Neue", sans-serif; margin-bottom: 40px; color:#F2EFE8;}
h3{margin-bottom:0px;}
ul li {display:inline; }
ul{padding-left:0px;}
a{text-decoration:none; color:#080C31;}
a:hover{text-decoration:underline;}
.bold{font-weight: bold;}
.italic{font-style: italic;}
.underline{text-decoration: underline;}




/*MENU*/
menu{width:100%; height:150px; margin:0; padding:0; font-weight:bold; font-family:"Bebas Neue", sans-serif; background-color: #F2EFE8; }
menu ul li a {margin-right:2em; font-size:1.6em;}
menu .nav{width:57%; height:150px; float:right; line-height:150px; text-align:center; }
menu .logo{width:15%; height:150px; float:left; }
menu .logo img{height:120px; margin-top:15px;}
menu .contact{width:25%; height:150px; float:right; line-height:161px; text-align:right;}
menu .contact img {height:35px;}
.hamburger { display: none;}

/*FOND D'ECRAN INDEX*/
p{margin:0px;}
#wrapper {background:#F2EFE8;}
#content {width:100%; margin-top:50px; font-size:35px; background:#F2EFE8; }
#contentindex {width:100%; margin:auto; padding-top:41%; background-image: url("img/bgindex.jpg"); background-attachment: fixed; background-size: cover;}
#contentindex .text {width:100%; background-color: #F2EFE8; }

/*CONTENT*/
.section{display:grid; grid-template-columns: repeat(4, 1fr); padding-top:30px; background-color:#F2EFE8; min-height: 30vw;}
.title-bloc{background-color:#8c8a7D; position:relative; max-height: 40vw;}
.title-bloc a{color:#F2EFE8; text-decoration:none;}
.title-bloc a:hover{color:#F2EFE8; text-decoration:none; }
.banner img{ width: 100%; max-height: 40vw; object-fit: cover; filter: grayscale(100); transition: filter 1s; }
.banner img:hover{  filter: grayscale(0);}

.left .title-bloc{grid-column: 1;  padding-left:30px; padding-right:30px; grid-row: 1;}
.left .banner{grid-column: 3 / 5; grid-row: 1; }


.right .title-bloc{grid-column:4; padding-left:30px; padding-right:30px; grid-row: 1; text-align:right;}
.right .banner{grid-column:1 / 3;  grid-row: 1;}


.title-bloc h1{display:block; font-size:2.4rem; text-transform:uppercase;}
.title-bloc .more{display:block; font-size:6rem; font-weight: bold; position:absolute; bottom:20px;}
.right .title-bloc .more{display:block; font-size:6rem; font-weight: bold; position:absolute; bottom:20px; right:30px;}
.title-bloc .more a{ transition: font-size 1s;}
.title-bloc .more a:hover{font-size:7rem; font-weight:bold;}

.title-bloc ul li{display:block; color:#F2EFE8; font-size:1.2rem; margin-bottom:2.4rem;}
.title-bloc ul li img{height:53px;}
.title-bloc ul li a:hover{text-decoration:underline;}

.content{font-size:1.2rem; color:#8c8a7D; padding-left:20px; padding-right:20px; text-align:justify;}
.contactezmoi {display:inline-block; background-color:#080C31; color:#F2EFE8; padding:10px; font-weight:bold;margin-top:5px; text-decoration:underline;}
.avant-travaux{text-transform:uppercase; color:#080C31;}
.sous-menu {text-transform:uppercase; font-weight:bold;}




/*CONTENT 4 PRESTATIONS.PHP & LEGAL.PHP*/
.content-type-longtext{grid-column:2 / 4;  grid-row: 1; font-size:1.2rem; color:#8c8a7D; padding-left:40px; text-align:justify; padding-right:60px;}

/* LISTE MINIATURE PROJET.PHP*/
#list-miniat{margin:auto; text-align:center; width:80%;}
.miniat {display:inline-block; margin-top:25px; margin-right:25px; padding:25px; }
.miniat img{width:200px; height:250px;}

/*Carousel*/
.carousel { width: 100%; height:100%; grid-column: span  2;  position: relative; overflow: hidden;}
.slide { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; filter: grayscale(100%);}
.slide.active { opacity: 1; filter: grayscale(0%);}
.prev,
.next { position: absolute; top: 50%; transform: translateY(-50%); background: #8C8A7D; color: #F2EFE8; border: none; padding: 15px; cursor: pointer; font-size: 24px; z-index: 10;}
.prev { left: 10px;}
.next { right: 10px;}
.prev:hover,
.next:hover { background: #8c8a7D;}
.carousel img{height:630px; filter:grayscale(100%); transition: filter 1s;}
.carousel img:hover{height:630px; filter:grayscale(0%);}

/*FOOTER*/
footer {width:100%; height:10%; position:relative;  color:#8c8a7D; text-align:center; margin-top:100px; margin-bottom:20px;}
footer a {color:#8c8a7D; margin-right:20px;}
footer a:hover {text-decoration: none;}
footer span{margin-right:20px;}
footer img {height:20px;}
.mentionslegales {text-decoration:underline;}

/* ------------
   RESPONSIVE 
---------------*/

@media screen and (max-width: 48rem) {
  
/*MENU*/
menu { position: relative; width: 100%; height: 140px; padding: 0; margin: 0; box-sizing: border-box;}
menu .logo { position: absolute; top: 0; left: 0; width: 100%; height: 95px; float: none; text-align: center;}
menu .logo img { height: 80px; margin-top: 8px;}
.hamburger { display: flex; position: absolute; z-index: 100; left: 20px; top: 32px; width: 30px; height: 24px; padding: 0; margin: 0; border: none; background: none; flex-direction: column; justify-content: space-between; cursor: pointer;}
.hamburger span { display: block; width: 30px; height: 2px; background-color: #080C31; transition: 0.3s ease; }
menu .contact { display: block; position: absolute; top: 92px; left: 0; width: 100%; height: 40px; float: none; line-height: normal; text-align: center; margin-top:10px;}
menu .contact ul { margin: 0; padding: 0;}
menu .contact ul li { display: inline;}
menu .contact ul li a { margin-right: 10px;}
menu .contact ul li:last-child a { margin-right: 0;}
menu .contact img { height: 24px; vertical-align: middle;}
menu .nav { display: none; position: absolute; z-index: 90; top: 140px; left: 0; width: 100%; height: auto; float: none; background-color: #F2EFE8; line-height: normal; text-align: center; border-top: 1px solid #080C31; }
menu .nav.open { display: block;}
menu .nav ul { margin: 0; padding: 20px 0;}
menu .nav ul li { display: block; margin: 15px 0;}
menu .nav ul li a { display: block; margin-right: 0; font-size: 1.5em;}
    
/*Animation Hamburger*/
.hamburger.active span:nth-child(1) {transform: translateY(11px) rotate(45deg);}
.hamburger.active span:nth-child(2) {opacity: 0;}
.hamburger.active span:nth-child(3) {transform: translateY(-11px) rotate(-45deg);}

/* FOND D'ECRAN INDEX*/
#wrapper {background:#F2EFE8;}
#content {width:100%; margin-top:50px; font-size:35px; background:#F2EFE8; }
#contentindex {width:100%; margin:auto; padding-top:99%; background-image: url("img/bgindex-mobile.jpg"); background-attachment: fixed; background-size: cover;}
    
/*GRID MOBILE*/
.more{visibility:hidden;}
.section{ display:flex; flex-direction: column;}
.section .title-bloc{order:1; max-height:none;}
.section .title-bloc h1{margin-top:10px; margin-bottom:10px; text-align:center;}
.section .banner img {max-height: 80vw;}
.section .content{order:2; margin-top:20px; margin-bottom:20px;}
.section .banner{order : 3; }
.section .title-bloc .sous-menu{display:none;}
.section .content-type-longtext {order:2;}
    .carousel {display:none;}


/* Effet N&B / COULEUR MOBILE */
.banner img, .zoombox img {filter: grayscale(100%);transition: filter 1s;}
.banner.is-centered img, .zoombox.is-centered img {filter: grayscale(0%);}
    
/*FOOTER*/
.footer-mobile{display:block; width:90%; margin:auto;}    
}