@charset "utf-8";
body, html {height: 100%;margin: 0;background-color: #f2f2f2;}
html{scroll-behavior: smooth;}
h1{font-size:4em;margin:0;font-weight: 700;font-family: "Poppins", sans-serif;}
h2{font-size:2em;font-weight: 700;padding:1%;font-family: "Lato", sans-serif;}
h3{font-size: 1.5em;color:#1a1a1a;font-family: "Lato", sans-serif;padding-left:1%;}
h4{font-size: 2em;color:#1a1a1a;font-family: "Lato", sans-serif;}
main{background:white;}
section{padding:5%;}
p{font-family: "Lato", sans-serif;color:#1a1a1a;}
nav{font-family: "Lato", sans-serif;}
ul{font-family: "Lato", sans-serif;}
.button1{font-family: "Lato", sans-serif;text-align: center;font-weight: bold;font-size: 1.2em;background: #765137;padding:2% 5%;border-radius:10px;transition:all 0.6s ease;text-decoration: none;color:#f2f2f2;}
.button1:hover {background:#2D2D2B;cursor: pointer;}

@media screen and (max-width: 1600px) /*pink*/  {
	.sous-titre{width:80%;padding-bottom:10%;}
	.intro-prestations-right{padding-left:5%;}
}

@media screen and (max-width: 1200px) /*yellow*/ {
	.sous-titre{width:100%;padding-bottom:10%;}
	.intro-prestations{display:block;}
	.intro-prestations-left, .intro-prestations-right{width:100%;padding:0;}
}

@media screen and (max-width: 950px) /*blue*/ {
	.sous-titre{width:100%;padding-bottom:10%;}
	.button1{padding:3% 5%;}
}

@media screen and (max-width: 720px) /*purple*/ {
	.sous-titre{width:100%;padding-bottom:10%;}
	h2{font-size: 3em;}
	.button1{padding:5%;}
}

/* ----------- NAVIGATION ----------- */

nav{margin:auto;position:fixed;background-color:#f2f2f2;width:100%;z-index:1;}
nav img{width:20%;padding:1% 5%;}
nav img:hover{padding:1% 7%;transition: all 0.6s ease;}

nav ul{list-style:none;overflow:hidden;padding-right:5%;}
nav ul a{display:block;padding:20px;font-size:1em;text-decoration:none;color:#2D2D2B;border-radius:10px;}
nav ul a:hover{background:#242939;color:#f2f2f2;transition: all 0.6s ease;}

nav .menu-icon{padding: 28px 20px;position:relative;float:right;cursor: pointer;}
nav .menu-icon .nav-icon{background:#333;display:block;height:2px;width:18px;position:relative;transition:background .2s ease-out;}
nav .menu-icon .nav-icon:before{background:#333;content:"";display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out;top:5px;}
nav .menu-icon .nav-icon:after{background:#333;content:"";display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out;top:-5px;}

nav .menu-btn{display:none;}
nav .menu-btn:checked ~ .menu{max-height:3000px;}
nav .menu-btn:checked ~ .menu-icon .nav-icon{background:transparent;}
nav .menu-btn:checked ~ .menu-icon .nav-icon:before{transform: rotate(-45deg);top:0;}
nav .menu-btn:checked ~ .menu-icon .nav-icon:after{transform: rotate(45deg);top:0;}

nav .menu{clear:both;max-height:0;transition:max-height .2s ease-out;text-align: right;font-weight: bold;}

@media (min-width:1600px){
    nav li{float:left;}
    nav li a{padding:20px 30px;}
    nav .menu{clear:none;float:right;max-height:none;}
    nav .menu-icon{display:none;}
}

@media screen and (max-width: 1600px) /*pink*/  {
	nav img{width:40%;padding:1% 5%;}
}

@media screen and (max-width: 1200px) /*yellow*/ {
	nav img{width:40%;padding:1% 5%;}
}

@media screen and (max-width: 950px) /*blue*/ {
	nav img{width:50%;padding:1% 5%;}
}


@media screen and (max-width: 720px) /*purple*/ {
	nav img{width:60%;padding:5% 0;}
}

/* ----------- HEADER ----------- */

.home1 {background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/bureau-blanc-webdesign.jpg");height:60%;padding:0 5%;background-position:top;background-repeat: no-repeat;background-size: cover;}
.home2 {background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/rouages-strategie.jpg");height:60%;padding:0 5%;background-position: top;background-repeat: no-repeat;background-size: cover;}
.home3{background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/ecran-ordinateur-seo.jpg");height:60%;padding:0 5%;background-position: top;background-repeat: no-repeat;background-size: cover;}
.home4{background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/maisons-ciel.jpg");height:60%;padding:0 5%;background-position: top;background-repeat: no-repeat;background-size: cover;}
.home5{background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/hero-notebook-herbe.jpg");height:60%;padding:0 5%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.home6{background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/hero-binary.jpg");height:60%;padding:0 5%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.home7{background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/hero-cms.jpg");height:60%;padding:0 5%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.home8{background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/hero-web-neon.jpg");height:60%;padding:0 5%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.home9{background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/hero-accessibilite-web.jpg");height:60%;padding:0 5%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.home10{background-image: linear-gradient(rgba(23, 23, 29, 0.9), rgba(23, 23, 29, 0.6)), url("../media/actualites/hero-ia-webdesign.jpg");height:60%;padding:0 5%;background-position: center;background-repeat: no-repeat;background-size: cover;}

.article{display:flex;}

@media screen and (max-width: 1600px) /*pink*/ {
	.hero-text{margin-top:24%;}
	h1{font-size:3em;}
	.hero-text p{font-size:1.2em;}
}

@media screen and (max-width: 1200px) /*yellow*/ {
	.hero-text{margin-top:34%;}
}

@media screen and (max-width: 950px) /*blue*/ {
	.hero-buttons{display:block;}
}

@media screen and (max-width: 720px) /*purple*/ {
	.hero-text{margin:auto;margin-top:44%;width:80%;padding-left:5%;}
	h1{font-size:2.5em;margin:auto;padding-bottom:10%;}
	.hero-text p{font-size:1.1em;}
}

/* ----------- ARTICLE LEFT ----------- */

.article-left{width:5%;}

.social-share {display: block;}
.social-share a {color: #1a1a1a;text-decoration: none;border-radius: 50%;display: flex;justify-content: center;align-items: center;width: 40px;height: 40px;}
.social-share a:hover{-webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3);transition:all .6s ease;}
.facebook {background:transparent;border:1px solid #1a1a1a;margin-bottom: 15%;}
.instagram {background: transparent;border:1px solid #1a1a1a;margin-bottom: 15%;}
.twitter {background: transparent;border:1px solid #1a1a1a;margin-bottom: 15%;}
.linkedin {background: transparent;border:1px solid #1a1a1a;margin-bottom: 15%;}

@media screen and (max-width: 1200px) /*yellow*/ {
	.article{display:block;}
	.social-share {display: flex;margin-left: 100%;margin-bottom: 100%;}
	.social-share a{min-width:40px;height: 40px;margin-right: 155%;}
}

/* ----------- ARTICLE MIDDLE ----------- */

.article-middle{width:75%;padding:0 5%;text-align: left;}

.date{font-size:1.2em;color:#C6595D;font-weight: 700;}
.article-middle p{font-size: 1.2em;line-height: 1.7em;padding:1%;}
.article-middle ul{border-left:4px solid #C6595D;margin:2%;margin-left:5%;}
.article-middle ul li{font-size: 1.2em;line-height: 1.7em;}
.article-middle img{width: 100%;margin:4% 0;}

@media screen and (max-width: 1200px) /*yellow*/ {
	.article-middle{width:90%;}
	h1{font-size:3.5em;}
}

@media screen and (max-width: 950px) /*blue*/ {
	h1{font-size:3em;}
}

@media screen and (max-width: 720px) /*purple*/ {
	h1{font-size:2.5em;}
}

/* ----------- ARTICLE RIGHT ----------- */

.article-right{width:20%;}

.tendances{font-size:2em;font-weight: 700;padding:1%;}
.article-right a{text-decoration: none;}
.article-right a:hover{transform: scale(1.05);transition:all .6s ease;}
.flux-block{background:#f2f2f2;padding:5%;margin:5% 0;}
.flux-block:hover{transform: scale(1.05);transition:all .6s ease;}
.flux-block img{width:100%;}
.article-right h4{text-align: left;color:#1a1a1a;font-size:1.2em;margin:0;}
.flux-article{font-weight: 500;color:#999999;text-transform: uppercase;font-size: 0.8em;padding-top:5%;}
.flux-resume{text-align: left;color:#1a1a1a;font-size:1em;line-height: 1.5em;}

@media screen and (max-width: 1200px) /*yellow*/ {
	.article-right{display:flex;width:100%;}
	.tendances, .article-right a{width: 33.33%;}
	.article-right a{margin:1%;}
}

@media screen and (max-width: 950px) /*blue*/ {
	.article-right{width:100%;display: block;}
}

/* ----------- ENSEMBLE ----------- */

.ensemble-block{display: flex;background:#f2f2f2;z-index:99;}
.ensemble-left{width:40%;}
.ensemble-left img{width: 100%;height: 100%;}
.ensemble-right{width: 60%;padding:5%;z-index:99;}
.ensemble-right p{margin-bottom:5%;}
#ensemble h2{font-size: 2.5em;z-index:99;}

@media screen and (max-width: 1600px) /*pink*/ {
	.ensemble-left img{min-width: 150%;height: 100%;}
	.ensemble-right{background: #f2f2f2;z-index: 1;}
}

@media screen and (max-width: 950px) /*blue*/ {
	.ensemble-left img{min-width: 250%;height: 100%;}
	.ensemble-right .primary{width:200px;}
}

@media screen and (max-width: 720px) /*purple*/ {
	.ensemble-block{display: block;}
	.ensemble-left{display: none;}
	.ensemble-right{width:100%;}
}

/* ----------- FOOTER ----------- */

footer{background: #f2f2f2;}

.footer-cards{padding:2% 5%;display: flex;}
.footer-card-03{width:33.33%;}

.social{width:100%;display: flex;}
.social a {font-size: 1.2em;padding-right:5%;color:#765137;}
.social a:hover{-webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3);transition:all .6s ease;color:#2D2D2B;}

.copyright{text-align:center;}

.mentions{text-align: right;}
.mentions:hover{color:#8D6C4B;font-weight: 700;transition:all .6s ease;}

@media screen and (max-width: 950px) /*blue*/ {
	.footer-cards{display: block;}
	.footer-card-03{width:100%;}
	.copyright{text-align:left;}
	.mentions{text-align: left;}
	.social{display: block;}
	.social ion-icon {margin:auto;text-align: center;}
}