@charset "utf-8";
body, html {height: 100%;margin: 0;background-color: #f2f2f2;color:#2D2D2B;}
html{scroll-behavior: smooth;}
section{padding:5% 10%;}
h1{text-align: center;font-size:5em;line-height: 1.2em; font-weight: 700;font-weight: 500;font-family: "Noto Sans", sans-serif;}
h2{font-size: 4em;line-height: 1.2em;font-family: "Noto Sans", sans-serif;margin-bottom: 10%;color:#2D2D2B;}
h3{font-size: 2em;line-height: 1.2em;font-family: "Noto Sans", sans-serif;}
.sous-titre{font-size:1.5em;line-height: 1.8em;width:70%;font-family: "Merriweather Sans", sans-serif;margin-bottom: 5%;}
p{font-family: "Noto Sans", sans-serif;font-size: 1.1em;line-height: 1.8em;}
nav{font-family: "Noto Sans", sans-serif;}
ul{font-family: "Noto Sans", 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/mains-clavier-portable.jpg");height:80%;padding:0 5%;background-position: bottom;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/ordinateur-canape-soleil.jpg");height:80%;padding:0 5%;background-position: bottom;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/bureau-lampe.jpg");height:80%;padding:0 5%;background-position: bottom;background-repeat: no-repeat;background-size: cover;}

.hero-text{position:absolute;width:70%;color:#f2f2f2;margin:14% 0 0 10%;}
.hero-text p{font-size:1.5em;line-height: 1.5em; width:80%;text-align: center;margin:auto;background:#f2f2f2;color:#1a1a1a;padding:1%;}

@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;}
}

/* ----------- INTRODUCTION ----------- */

#intro p{font-size: 1.5em;text-align: center;padding:0 15%;line-height: 1.5em;font-weight: 700;}

@media screen and (max-width: 1600px) /*pink*/ {
	#intro p{padding:0 10%;}
}

@media screen and (max-width: 1200px) /*yellow*/ {
	#intro p{padding:0 5%;}
}

@media screen and (max-width: 950px) /*blue*/ {
	#intro p{font-size: 1.2em;padding:0 %;}
}

@media screen and (max-width: 720px) /*purple*/ {
	
}

/* ----------- PAGE REALISATIONS ----------- */

#realisations{background:white;}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
	width:100%;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 33.33%;
  max-width: 33.33%;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 95%;transition:all 0.6s ease;border-radius: 10px;
}

.column img:hover{transform: scale(1.1);}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

/* ----------- PAGE ACTUALITES ----------- */

#news{background: white;}

.top-story{display: flex;margin-bottom:5%;}

.top-story-left{width:50%;height:auto;}
.top-story-left img{max-width:150%;min-height:100%;}

.top-story-right{border-radius: 10px; background:#f2f2f2;width:50%;padding:5%;height:auto;margin: 2% 0 2% -10%;}
.top-story-right a{text-decoration: none;}
.top-story-right:hover{transform: scale(1.05);transition:all .6s ease;}
.top-story-right h2{text-align: left;font-size:1.8em;}
.top-story-right p{text-align: left;font-size:1.2em;color:#1a1a1a;line-height: 1.5em;}
.top-story-right .date-article{font-weight: 500;}
.resume{margin-top:-5%;}

.flux{display:flex;flex-wrap: wrap;}
.flux > * {flex: 1 1 460px;}
.flux a{text-decoration: none;width:33.33%;}
.flux a:hover{transform: scale(1.05);transition:all .6s ease;}
.flux-block{background: #f2f2f2; padding:5%;border-radius: 10px;margin:3%;}
.flux-block img{width:100%;}
.flux h3{text-align: left;color:#1a1a1a;font-size:1.5em;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*/ {
	.top-story{display: block;}
	.top-story-left{width: 100%;z-index: 2;margin: 0;}
	.top-story-left img{width: 100%;}
	.top-story-right{width: 90%;margin: -5% 0;}
	.flux{margin-top:10%;}
}

@media screen and (max-width: 950px) /*blue*/ {
	.top-story-right h2{font-size:1.5em;}
}

/* ----------- PAGE MENTIONS ----------- */

#mentions{background:white;}

/* ----------- PAGE 404 ----------- */

.error-text{position:absolute;width:80%;margin:auto;margin:8% 0 0 10%;display: flex;}
.error-left{width:50%;}
.error-left img{width:80%;border-radius: 10px;}
.error-right{width:50%;}
.error-right p{font-size: 1.5em;line-height: 1.5em;}
.error-right .primary, .error-right .secondary{margin:auto;margin-top:5%;}

@media screen and (max-width: 1600px) /*pink*/ {
	.error-right .secondary{margin:auto;margin-top:5%;width:auto;}
	.error-left{padding-top:10%;width:50%;}
}

@media screen and (max-width: 1200px) /*yellow*/ {
	.error-text{display: block;}
	.error-left{display: none;}
	.error-right{width:100%;padding-top: 15%;}
}

@media screen and (max-width: 720px) /*purple*/ {
	.error-right{width:100%;padding-top: 35%;}
}

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

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

@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: 1200px) /*yellow*/ {
	
}

@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: white;}

.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;}
}