/* Les trucs utiles */

	/* Pour tout */

	.pleine-largeur {
	width: 100%;
	}

	.largeur-50 {
	width: 50%;
	}

	.largeur-20 {
	width: 20%;
	}

	.centre {
	margin: auto;
	}

/* Boutons */

	#bouton_message {
		background: url('img/bout/Nott_messagerie_1.png') no-repeat; center;
		background-size: cover;
	}

	#bouton_message:hover {
		background: url('img/bout/Nott_messagerie_2.png') no-repeat; center;
		background-size: cover;
	}

	#bouton_facebook {
		background: url('img/bout/Nott_icone_facebook_1.png') no-repeat center;
		background-size: cover;
	}

	#bouton_facebook:hover {
		background: url('img/bout/Nott_icone_facebook_2.png') no-repeat center;
		background-size: cover;
	}

	#bouton_instagram {
		background: url('img/bout/Nott_icone_instagram_1.png') no-repeat center;
		background-size: cover;
	}

	#bouton_instagram:hover {
		background: url('img/bout/Nott_icone_instagram_2.png') no-repeat center;
		background-size: cover;
	}

	#bouton_twitter {
		background: url('img/bout/Nott_icone_tweeter_1.png') no-repeat center;
		background-size: cover; 
	}

	#bouton_twitter:hover {
		background: url('img/bout/Nott_icone_tweeter_2.png') no-repeat center;
		background-size: cover;
	}

	#bouton_linkedin {
		background: url('img/bout/Nott_icone_linkedin_1.png') no-repeat center;
		background-size: cover;
	}

	#bouton_linkedin:hover {
		background: url('img/bout/Nott_icone_linkedin_2.png') no-repeat center;
		background-size: cover;
	}

/* Media Queries : Structure du site */

	/* Ecran de base : Ordinateur */
@media screen and (orientation: landscape)
{

	body {
		background-color: #0F2C38;
		height: 100%;
		margin: 0;
		padding: 1%;
		min-height: 100vh;
		display: grid;
		grid-template-rows: auto 1fr auto;
	}

	header {
		width: 98%;
		height: auto;
		padding: 1%;
		display: flex;
    }

	footer {
		width: 98%;
		padding: 1%;
		padding-bottom: 2%;
		display: flex;
		justify-content: center;
	}

	section {
		width: 96%;
		margin: 2%;
		display: flex;
		justify-content: center;
   	}

	#BodyLeft {
		width: 8%;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	#BodyLeft img {
		width: 100%;
	}

	article {
		margin: 0;
		width: 84%;
		display: flex;
		justify-content: center;
	}

	#BodyRight {
		width: 8%;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	#BodyRight img {
		width: 100%;
	}

	#img-slogan-header {
	width: 50%;
	margin: auto;
	}

	#img-logo-corps {
	width: 50%;
	margin: auto;
	}

	#img-lunes-footer {
	width: 20%;
	margin: auto;
	}

}

	/* -------------------------------- Ecran de base : Smartphone */
@media screen and (orientation: portrait)
{

	body {
		background-color: #0F2C38;
		height: 100%;
		margin: 0;
		padding: 1%;
		min-height: 100vh;
		display: grid;
		grid-template-rows: auto 1fr auto;
	}

	header {
		width: 98%;
		height: auto;
		padding: 1%;
		padding-top: 2%;
		display: flex;
    }

	footer {
		width: 98%;
		padding: 1%;
		padding-bottom: 2%;
		display: flex;
		justify-content: center;
	}

	section {
		width: 100%;
		margin-top: 10%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
   	}

	#BodyLeft {
		order: 3;
		width: 100%;
		margin: auto;
		display: flex;
		justify-content: space-around;
	}

	#BodyLeft img {
		width: 100%;
	}

	article {
		order: 1;
		margin: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	#BodyRight {
		order: 2;
		width: 100%;
		margin: auto;
		display: flex;
		justify-content: space-around;
	}

	#BodyRight img {
		width: 100%;
	}

	#img-slogan-header {
	width: 90%;
	margin: auto;
	}

	#img-logo-corps {
	width: 70%;
	margin: auto;
	}

	#img-lunes-footer {
	width: 40%;
	margin: auto;
	}

 }