/* Les trucs utiles */

	/* Pour tout */

	.pleine-largeur {
	width: 100%;
	}

	.largeur-50 {
	width: 50%;
	}

	.largeur-20 {
	width: 20%;
	}

	.centre {
	margin: auto;
	}

	p {
		font-family: "Open Sans", sans-serif;
		font-size: 1.3em;
	    color: white;
	}

	a {
		color: #e55E5b;
	}


	h1 {
		margin: 0;
		font-family: "Baskerville Old Face", serif;
		font-size: 5em;
	    color: #e55E5b;
	}



/* Media Queries : Structure du site */

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

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

	header {
		width: 98%;
		padding: 1%;
		display: flex;
		justify-content: center;
    }

	footer {
		width: 98%;
		padding: 1%;
		padding-bottom: 2%;
		justify-content: space-evenly;
	}



	#footer-2 {
		margin: 1%;
		padding: 1%;
		    border-top: 2px solid #e55E5b;
		justify-content: space-evenly;	  
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}


	.footer-3a {
		width: 100%;
		text-align: left;	  
	}


	.footer-3b {
		width: 100%;
		text-align: center;	  
	}


	.footer-3c {
		width: 100%;
		text-align: right;	  
	}


	#img-lunes-footer {
	width: 50%;
	height: auto;
	}

	section {
		width: 100%;
		margin: 0;
		padding: 0;
		display: block;
		justify-content: center;
   	}


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

	#article-accueil-1 {
		margin: 0;
		padding-left: 3%;
		padding-top: 1%;
		padding-bottom: 1%;
		width: 100%;
		display: flex;
		justify-content: left;
		background-image: url("/img/livre-d-occasion-pas-cher-lecture-enfant-livre-conte-cambrai.jpg");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.fb-page {
				width: 500px;
		display: flex;
		    border: 2px solid #e55E5b;
	}

	#article-accueil-2 {
		margin: 1%;
		padding-left: 3%;
		padding-right: 3%;
		width: 100%;
		display: block;
		justify-content: center;
	}

	#article-accueil-bientot {
		margin: 1%;
		padding-left: 3%;
		padding-right: 3%;
		width: 100%;
		display: block;
		justify-content: center;
	}

	#article-accueil-bientot p {
		    color: #e55E5b;
		    text-align: center;
		    font-size: 2em;
	}

	#article-accueil-bientot h1 {
		text-align: center;
	}

	#article-accueil-bientot3 {
		margin: 1%;
		padding: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.article-accueil-bientot4 {
		margin-left: 5%;
		margin-right: 5%;
		padding: 3%;
		width: 25%;
		justify-content: space-around;
				    border: 2px solid #e55E5b;
	}

	#img-logo-facebook {
		display: block;
		width: 30%;
		margin: auto;
	}

	#img-slogan-header {
	width: 15%;
	margin: auto;
	justify-content: center;
	border: none;
	}

	#img-logo-corps {
	width: 100%;
	height: 100%;
	margin: 0;
	}



		/* -----MENU------ */

		nav{
		    font-family: Baskerville;
		    width: 100%;
		    margin: 0px auto 40px auto;
		    position: sticky;
		    top: 0px;

    }
		}

		nav ul{
		    list-style-type: none;
		    	justify-content: space-evenly;
		}

		nav li{
		    float: left;
		    width: 12.5%;/*100% divisé par le nombre d'éléments de menu*/
		    text-align: center;/*Centre le texte dans les éléments de menu*/
		}

		/*Evite que le menu n'ait une hauteur nulle*/
		nav ul::after{
		    content: "";
		    display: table;
		    clear: both;
		}

		nav a{
		    display: block; /*Toute la surface sera cliquable*/
		    text-decoration: underline;
		    text-underline-offset: 10px;
		    color: white;
		    font-weight: bold;
		    font-size: 1em;
		    border-bottom: 2px solid transparent;/*Evite le décalage des éléments sous le menu à cause de la bordure en :hover*/
		    padding: 1% 0px;/*Agrandit le menu et espace la bordure du texte*/
		}

		nav a:hover {
					    text-decoration: none;
		    color: #e55E5b;
		    border-bottom: 2px solid #e55E5b;
		}

	nav #img-slogan-header a:hover {
					    text-decoration: none;
	}

	#logo-Marque_Thes_Pages {
		display: block;
		text-align: center
	}

			}

}





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

	body {
		background-color: #264A67;
		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;
	}

 }

 /* Media Queries : Boutons */

	/* Ecran de base : Ordinateur */

@media screen and (orientation: landscape)
{


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

}

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


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

	#bouton_message:active {
		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:active {
		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:active {
		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:active {
		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:active {
		background: url('img/bout/Nott_icone_linkedin_2.png') no-repeat center;
		background-size: cover;
	}

}