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

nav.menu-mobile, div.menu-mobile-fermeture{
	display: none;
}

nav.principale{
	position: absolute; 
	left: 1152px; 
	top: 130px;
}

nav ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

nav a, div#piedpage p{
	font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 32px;
	font-weight: 300;
	letter-spacing: 7px;
	text-decoration: none;
	margin: 18px 0;
	color: #141414;
}

nav a:hover{
	text-decoration: underline;
}

nav a#actif{
	font-weight: 800;
}


/* ==================================================== */
/* ------- NAVIGATION DU PIED-DE-PAGE ------- */

div#piedpage{
	position: relative; 
	top: -30px;
	display: flex;
	justify-content: space-between;
	margin: 0 100px;
}

div#piedpage div nav{
	margin-top: 38px;
}

div#piedpage div ul{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	flex-direction: column;
	width: 248px;
}

div#piedpage div p,
div#piedpage div ul li{
	width: 104px;
}

div#piedpage div p{
	margin: 6px 0;
}

div#piedpage div ul li#be,
div#piedpage div ul li#fb,
div#piedpage div ul li#arch,
div#piedpage div ul li#index{
	align-self: flex-end;
}

div#fin{
	display: flex;
	margin: 0 100px;
}

div#fin div{
	display: flex;
	background: url(../images/motif-pied.svg) repeat-x top left;
	width: auto;
	height: 39px;
	width: 960px;
	margin-left: 144px;
	background-size: contain;
	background-size: 60px 39px;
	z-index: 50;
}


/* ==================================================== */
/* ------- PAGE À PROPOS ------- */

div#page-a-propos,
div#page-me-joindre{
	display: none;
	background-color: rgb(253,253,252);
	background-color: rgba(253,253,252, 0.97);
	overflow: hidden;
	position: fixed;
	top: 5px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	z-index: 9998;
}

div#page-a-propos div.page-texte{
	position: fixed;
	top: 50%;
	left: 5px;
	padding: 25%;
	transform: translateY(-50%);
}

div#page-me-joindre div.page-texte{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

div#page-me-joindre h1{
	text-transform: inherit;
	letter-spacing: 3px;
	/*letter-spacing: 7px;*/
	text-align: center;
}

div#page-a-propos div.menu-mobile-fermeture,
div#page-me-joindre div.menu-mobile-fermeture{
	position: absolute;
	background: url(../images/menu-x.svg) no-repeat; 
	top: 87px;
	right: 62px;
	background-size: 39px 40px;
	display: block;
	cursor: pointer;
	width: 39px;
	height: 40px;
	margin-bottom: 10px;
	transition: 0.15s;
	transform: translate(0%, 0%);
	z-index: 9999;
}

div#page-a-propos div.menu-mobile-fermeture:hover,
div#page-me-joindre div.menu-mobile-fermeture:hover{
	transform: scale(1.25);
}

/* ---------------------------------------------------- */
/* ====================== MOBILE ====================== */
/* ---------------------------------------------------- */


@media only screen and (max-width: 1600px) {

	/* ============================================================= */
	/* CONTENU : 1600PX à 1024PX --- */
	/* ============================================================= */

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

	nav.principale{
		left: calc(77.77vw - 92.4444px);
		top: calc(13.19vw - 81.1111px);
	}

	nav a, div#piedpage p{
		font-size: calc(0.173611vw + 13.2222px);
		line-height: calc(0.8681vw + 18.1111px);
		letter-spacing: calc(0.1736vw + 4.2222px);
		margin: calc(0.520833vw + 9.6666px) 0;
	}


	/* ------- NAVIGATION DU PIED-DE-PAGE ------- */

	div#piedpage{
		margin: 0 calc(2.7777vw + 55.5555px);
	}

	div#piedpage div nav{
		margin-top: calc(0.8681vw + 24.1111px);
	}

	div#piedpage div ul{
		width: calc(16.6666vw - 18.6666px);
	}

	div#piedpage div p,
	div#piedpage div ul li{
		width: calc(1.0417vw + 87.3333px);
	}

	div#fin{
		margin: 0 calc(2.7777vw + 55.5555px);
	}

	div#fin div{
		width: 915px;
		height: 40px;
		margin-left: 137px;
		background-size: 61px 40px;
	}
}

/* ============================================================= */

@media only screen and (max-width: 1528px) { 
	div#fin div{ 
		width: 868px;
		height: 40px;
		margin-left: 130px;
		background-size: 62px 40px;
	}
}

@media only screen and (max-width: 1456px) { 
	div#fin div{ 
		width: 819px;
		height: 41px;
		margin-left: 123px;
		background-size: 63px 41px;
	}
}

@media only screen and (max-width: 1384px) { 
	div#fin div{ 
		width: 780px;
		height: 42px;
		margin-left: 116px;
		background-size: 65px 42px;
	}
}

@media only screen and (max-width: 1312px) { 
	div#fin div{ 
		width: 726px;
		height : 43px;
		margin-left: 109px;
		background-size: 66px 43px;
	}
}

@media only screen and (max-width: 1240px) { 
	div#fin div{ 
		width: 680px;
		height : 44px;
		margin-left: 102px;
		background-size: 68px 44px;
	}
}

@media only screen and (max-width: 1168px) { 
	div#fin div{ 
		width : 639px;
		height: 46px;
		margin-left: 95px;
		background-size: 71px 46px;
	}
}

@media only screen and (max-width: 1096px) { 
	div#fin div{ 
		width: 592px;
		height: 48px;
		margin-left: 88px;
		background-size: 74px 48px;
	}
}

@media only screen and (max-width: 1023px) { 

	/* ============================================================= */
	/* CONTENU : 1024PX à 580PX --- */
	/* ============================================================= */

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

	nav.menu-mobile{
		position: absolute;
		top: 52px;
		left: calc(100vw - 171px);
		background: url(../images/menu-mobile.svg) no-repeat; 
		background-size: 47px 40px; 
		display: block;
		cursor: pointer;
		width: 47px;
		height: 40px;
	}

	div.menu-mobile-couverture{
		height: 100%;
		width: 0%;
		position: fixed;
		/* z-index: 0; */ /* Effet intéressant */
		z-index: 25; /* Si problème, cette version est « safe » pour la compatibilité */
		top: 0;
		right: 0;
		background-color: rgb(253,253,252);
  		background-color: rgba(253,253,252, 0.97);
  		overflow: hidden;
  		transition: 0.5s;
	}

	nav.principale{
		position: relative;
		left: calc(67vw - 324px);
		top: 92px;
		text-align: left;
		width: 100%;
	}

	nav.principale div.menu-mobile-fermeture{
		position: relative;
		background: url(../images/menu-x.svg) no-repeat; 
		left: 218px;
		background-size: 39px 40px;
		display: block;
		cursor: pointer;
		width: 39px;
		height: 40px;
		margin-bottom: 10px;
		transition: 0.15s;
	}

	nav.principale div.menu-mobile-fermeture:hover{
		transform: scale(1.25);
	}

	nav.principale ul li a{
		font-size: 32px;
		line-height: 64px;
		margin-right: 57px;
	}

	nav a, div#piedpage p{
		font-size: 16px;
		line-height: 27px;
		letter-spacing: 7px;
		margin: 15px 0;
	}

	/* ------- NAVIGATION DU PIED-DE-PAGE ------- */

	div#piedpage{
		top: 0;
		margin: 18px 67px 47px;
	}

	div#piedpage div nav{
		margin-top: 31px;
	}

	div#piedpage div ul{
		width: 102px;
	}

	div#piedpage div p,
	div#piedpage div ul li{
		width: 102px;
	}

	div#fin{
		margin: 0 67px;
	}

	div#fin div{
		width: 594px;
		height: 35px;
		margin-left: 114px;
		background-size: contain;
		background-size: 54px 35px;
	}

	/* --- ABRÉVIATION --- */

	li#in a, li#be a, li#fb a, li#arch a, li#index a{
		position: relative;
		visibility: hidden;
	}

	li#in a::after{
		position: absolute;
		top: 0;
		left: 0;
		visibility: visible;
		content: "in";
	}

	li#be a::after{
		position: absolute;
		top: 0;
		right: 0;
		visibility: visible;
		content: "be";
	}

	li#fb a::after{
		position: absolute;
		top: 0;
		right: 0;
		visibility: visible;
		content: "fb";
	}

	li#arch a::after{
		position: absolute;
		top: 0;
		right: 0;
		visibility: visible;
		content: "arv";
	}

	li#index a::after{
		position: absolute;
		top: 0;
		right: 0;
		visibility: visible;
		content: "index";
	}

	li#in a:hover::after, li#be a:hover::after, li#fb a:hover::after, li#arch a:hover::after, li#index a:hover::after{
		text-decoration: underline;
	}
}

/* ============================================================= */

@media only screen and (max-width: 969px) { 
	div#fin div{ 
		width: 540px;
		height: 35px;
		margin-left: 114px;
		background-size: 54px 35px;
	}
}

@media only screen and (max-width: 913px) { 
	div#fin div{ 
		width: 486px;
		height: 35px;
		margin-left: 114px;
		background-size: 54px 35px;
	}
}

@media only screen and (max-width: 858px) { 
	div#fin div{ 
		width: 432px;
		height: 35px;
		margin-left: 114px;
		background-size: 54px 35px;
	}
}

@media only screen and (max-width: 802px) { 
	div#fin div{ 
		width: 378px;
		height: 35px;
		margin-left: 114px;
		background-size: 54px 35px;
	}
}

@media only screen and (max-width: 747px) { 
	div#fin div{ 
		width: 324px;
		height: 35px;
		margin-left: 114px;
		background-size: 54px 35px;
	}
}

@media only screen and (max-width: 691px) { 
	div#fin div{ 
		width: 270px;
		height: 35px;
		margin-left: 114px;
		background-size: 54px 35px;
	}
}

@media only screen and (max-width: 636px) { 
	div#fin div{ 
		width: 216px;
		height: 35px;
		margin-left: 114px;
		background-size: 54px 35px;
	}
}

@media only screen and (max-width: 579px) { 

	/* ============================================================= */
	/* CONTENU : 580PX à 320px --- */
	/* ============================================================= */

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

	nav.menu-mobile{
		top: 32px;
		left: calc(100vw - 59px);
		background-size: 30px 20px; 
		width: 30px;
		height: 20px;
	}

	div.menu-mobile-couverture{
		background-color: rgba(253,253,252, 0.97);
		height: 100%;
		position: fixed;
	}

	nav.principale{
		position: relative;
		left: calc(67vw - 188px);
		/* left: 37px; */
		top: 50px;
	}

	nav.principale div.menu-mobile-fermeture{
		left: 147px;
		/* left: calc(100vw - 74px); */
		background-size: 20px 20px;
		width: 20px;
		height: 20px;
		margin-bottom: 12px;
	}

	nav.principale ul li a{
		font-size: 14px;
		line-height: 28px;
		margin-right: 21px;
	}

	nav a, div#piedpage p{
		font-size: 14px;
		line-height: 24px;
		margin: 10px 0;
	}

	/* ------- NAVIGATION DU PIED-DE-PAGE ------- */

	div#piedpage{
		top: 0;
		margin: 78px 21px 22px;
	}

	div#piedpage div nav{
		margin-top: 28px;
	}

	div#piedpage div ul{
		width: 102px;
	}

	div#piedpage div p,
	div#piedpage div ul li{
		width: 102px;
	}

	div#fin{
		margin: 0 21px;
	}

	div#fin div{
		width: 270px;
		height: 29px;
		margin-left: 113px;
		background-size: contain;
		background-size: 45px 29px;
	}

	/* ------- PAGE À PROPOS ------- */

	div#page-a-propos div.page-texte{
		padding: 12%;
	}

	div#page-a-propos div.menu-mobile-fermeture,
	div#page-me-joindre div.menu-mobile-fermeture{
		top: 45px;
		right: 16px;
		background-size: 20px 20px;
		width: 20px;
		height: 20px;
		margin-bottom: 12px;
	}
}

/* ============================================================= */

@media only screen and (max-width: 515px) { 
	div#fin div{ 
		width: 225px;
		height: 29px;
		margin-left: 113px;
		background-size: 45px 29px;
	}
}

@media only screen and (max-width: 450px) { 
	div#fin div{ 
		width: 180px;
		height: 29px;
		margin-left: 113px;
		background-size: 45px 29px;
	}
}

@media only screen and (max-width: 385px) { 
	div#fin div{ 
		width: 135px;
		height: 29px;
		margin-left: 113px;
		background-size: 45px 29px;
	}
}