@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap');

body{
  background-color: floralwhite; 
    margin:0;
    font-family: 'Montserrat', sans-serif;
}
.header{
   width:100%; 
    height:100vh;
    background-color: floralwhite; 
    background-image: url("IMG/header1.jpg");
    background-size: cover; 
    background-position: center top;
    background-repeat: no-repeat; 
    background-attachment: fixed;
    position: relative; /* position de référence */
    

}

h1 {
    color:aliceblue;
    position: absolute; /* permet de positionner l'élément par rapport à la relative */
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 30px;
    font-weight: 600; 
    text-transform:uppercase;
    letter-spacing: 3px;
    background-color: rgba(0,0,0,0.5);
    padding: 10px 25px; 
    
}

/* on cible une classe en ajoutant un point devant son nom */
.nav {
    width: 100%;
    height: 80px; 
    background-color: #FFFFFF; 
    position: fixed; /* fixed=absolute sauf que ça ne bouge pas au scroll */
    top:0;
    left:0; 
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2) ;
    z-index:10; 
    
}

/* on cible la balise ul contenue dans la nav */
.nav ul {
    margin:0;
    padding:0;
    list-style-type: none; 
    text-align : center; 
}

.nav ul li {
    display:inline-block; /* display : block = éléments les uns au dessus des autres et display : inline-block = éléments les uns au dessous des autres */
    margin-left: 20px;
    margin-right: 20px; 
    margin: 0px 20px 0px 20px; 
    margin: 0 20px; /* 3 manières d'écrire des marges */
    line-height: 80px; /* un interlugne de la même valeur que la hauteur du bloc permet de centrer verticalement le texte */ 
    font-size: 15px; 
    color: #666666;
    font-weight: 500; 
    text-transform: none;
    letter-spacing: 2px; 
    cursor: pointer; /* obligatoire lorsque l'on veut faire comprendre qu'un élément est cliquable */
    transition: all ease-in-out 0.3s; 
}

.nav ul li:hover {
    color: #E1C699; 
}

.roll {
    width: 0%;
    height: 3px;
    background-color: #e5d5be; 
    margin-top: -25px; 
    transition: all ease-in-out 0.3s;
    margin-left:50%;
    transform: translateX(-50%); 
}

.nav ul li:hover .roll {
    width:100%;
}

.social {
    position: absolute; 
    top: 0;
    right: 20px; 
}

.social .fab {
    line-height: 80px; 
    margin: 0px 10px; 
    font-size: 22px; 
    color: #666666; 
    transition: all ease-in-out 0.3s;
}

.fa-facebook-square:hover {
    color:#3b5998;
}

.fa-instagram:hover {
    color:#c32aa3; 
}

.fa-linkedin:hover {
    color:#007bb5; 
}

a {
    text-decoration:none;
}

.container {
    width: 1000px;
    /* height: 400px; à supprimer */
    /* background-color: lime; à supprimer */
    margin: auto; /* permet de centrer un bloc dans une page ou un autre bloc */
    padding: 100px 0px; /* 100 en haut et en base et 0 sur les côtés */
}

.info {
    width: 180px; /*220px=180px+2x20px, le padding s'ajoute aux dimensions du bloc */
    text-align: center;
    min-height: 200px; 
    background-color: #FFFFFF; 
    float: left;
    margin-right: 40px; 
    border-radius: 8px;
    padding: 20px; 
    transition: all ease-in-out 0.3s;
    box-shadow: 0px 0px 0px transparent;
}
.info:nth-child(4) { /* seul le dernier bloc enfant des blocs info est impacté par la donnée suivante */
    margin-right: 0;
}

.clear {
    clear:both; /* pour annuler la flotaison de float en réalignant tout lors du scroll */
}

.info .fas {
    font-size:30px;
    color: #666666;
    background-color: floralwhite;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 50%; 
}

.info .far {
    font-size:30px;
    color: #666666;
    background-color: floralwhite;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 50%; 
}

.info h3 {
    color:#666666;
    font-size:18px; 
    font-weight: 500; 
    letter-spacing: 1px; 
}

.info p {
    color:#666666;
    font-size: 14px;
}

.info button { 
      padding: 10px 20px;
      border: 0px;
      border-radius: 6px; 
      background-color: floralwhite; 
      color: #666666; 
      font-weight: 500;
      text-transform: uppercase;
      font-size: 11px;
      outline:0;
      cursor:pointer;
      margin-top: 20px; 
      transition: all ease-in-out 0.2s;
}

.info button:hover {
    /*background-color: #77B5FE;*/
    background-color: #88b1ea;
    color: #FFF;
}


.info:hover {
    transform: scale(1.04); 
    box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
}

.altbg {
	background-color:#FFFFFF;
}

h2 {
	text-align: center;
    text-transform: uppercase;
    font-weight: 400;
    color: #666666;
}

.photo {
    width: 460px;
    height: 250px;
    background-color:#555555;
    float:left;
    background-image: url("image1.jpg");
    background-size: 100%;
    margin-top: 50px;
    transition: all ease-in-out 0.2s;
    position:relative;
    overflow:hidden;
}

.photo+.photo {
	float:right;
    background-image: url("image2.jpg");
}

.photo:hover {
	background-size:120%;
}

.photo h3 {
	position:absolute;
	left:0;
	bottom:0;
    width:100%;
    background-color:rgba(0,0,0,0.5);
    color:floralwhite;
    text-align:center;
    padding: 10px 0px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing:1px;
    text-transform: uppercase;
    margin: 0;
    transform: translateY(100%);
    transition: all ease-in-out 0.2s;
}

.photo:hover h3 {
	   transform:translateY(0%);
}

.popinbg {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.75);
    display:none;
}

.popin {
	position:fixed;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	width:500px;
	min-height:350px;
	background-color:white;
	text-align:center;
    box-shadow:0px 0px 20px rgba(0,0,0,0.45);
    display:none;
}

.popin img {
	width:100%;
}

.popin button {
	padding:10px 20px;
	border:0; 
    border-radius:6px;
	background-color:#666666;
	color:floralwhite;
	font-weight:500;
	text-transform: uppercase;
	font-size:12px;
	outline:0;
	cursor:pointer;
	transition: all ease-in-out 0.2s;
	margin:20px 0;
 }

.popin i {
	position:absolute;
	top:15px;
	right:15px;
	color:floralwhite;
	font-size:20px;
	cursor:pointer;
    text-shadow:0px 0px 20px rgba(0,0,0,0.2);
}

.popinenabled {
	overflow:hidden;
}

.popinenabled .popinbg {
	display:block;
}
.popinenabled .popin {
	display:block;
}
.gallery {
	padding:0;
}
.gallery li {
	list-style-type:none;
	width:33.2%;
	height:210px;
	background-color:#000000;
	float:left;
	margin-right:0.2%;
	margin-bottom:2px;
    overflow:hidden;
	position:relative;
}
.gallery img {
	width:100%;
	opacity:0.8;
}
.gallery li:nth-child(3n) {
	margin-right:0;
}
.gallery li div {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
    transform:translateY(-100%);
	transition:all ease-in-out 0.3s;
}

.gallery li:hover div {
	transform:translateY(0);
}
.gallery li div p {
	padding:0px 18px;
	margin-top:20px;
	color:white;
	font-weight:700;
	font-size:14px;
	text-transform:uppercase;
    opacity:0;
	transition:0.3s all ease-in-out 0.3s;
}
.gallery li div .date {
	font-weight:400;
	font-size:12px;
}
.gallery li:hover div p {
	opacity:1;
}

/* Responsive design */

@media screen and (max-width:1000px) {
    .nav ul {
		display:none;
    }
    h1 {
		text-align:center;
		font-size:40px;
	}
    .container {
        width:98%;
        margin:0 1%;
    }
    .info {
	   width:calc(48% - 40px); /* On soustrait les 2x20px de padding à la largeur de 48% */
	   margin-right:4%;
	   margin-bottom:10px;
    }

    /* On cible le deuxième et le quatrième bloc et on retire la marge à droite */
    .info:nth-child(2n) {
        margin-right:0;
    }
    .photo {
        width: 46%;
		height: 170px;
	}
	.photo h3 {
		transform:translateY(0);
	}
	.gallery li {
		height:100px;
	}
}
    
/* Responsive design smartphone */
@media screen and (max-width:550px) {
	.info {
		width:calc(100% - 40px);
	}
	.photo {
		width: 100%;
	}
	.gallery li {
	   width:49.9%;
	}
	/* on réapplique la marge au troisième et sixième bloc */
	.gallery li:nth-child(3n) {
		margin-right:0.2%;
	}
	/* et on force les multiples de 2 à perdre leur marge */
	.gallery li:nth-child(2n) {
		margin-right:0;
	}
    form, iframe {
    float: none;
    width: 100%;
    }
}

.about {
	margin-top: 50px;
    color: #AAAAAA;
    text-align: center;
}
.contact {
	width:45%;
	display:inline-block;
}
.contact input:not([type="radio"]):not([type="checkbox"]), textarea, select {
	display:block;
	width:100%;
	margin:10px 0;
	padding:10px;
	border-radius:6px;
	border:1px solid #CCC;
	outline:0;
	color:#333333;
	background-color:white;
	font-family:"Lato", sans serif;
}
input[type="submit"] {
    width: auto !important;
    margin-top: 30px !important;
    background-color: #555 !important;
    color: white !important;
    font-weight: 700;
    padding: 10px 25px !important;
    text-transform: uppercase;
    font-size: 12px;
}
iframe {
	width: 50%;
    float: right;
    margin-top: 10px;
}