@charset="UTF-8";

body {
	margin: 0px;
	padding: 0px;
	background: url("img/seigaiha.jpg") repeat; 
}

h1, h2, h3, p, a {
	font-family: 'fontastique';
	color: #171717;
}

/* ---------------- FONTS ---------------- */
@font-face {
	font-family: 'fontastique';
    src: url('Font/fontastique-webfont.eot');
	src: url('Fontfontastique.otf') format('truetype'),	
		 url('Font/fontastique-webfont.woff') format('woff'), 
    	 url('Fontfontastique-webfont.eot?#iefix') format('embedded-opentype'), 
         url('Fontfontastique-webfont.svg#fontastique') format('svg');     
    font-weight: normal;
    font-style: normal;
}

/* -------- CLASS -------- */
.responsive {
	width: 100%;
	height: auto;
}

/* -------- HEADER -------- */
header {
	height: 289px;
	background: url("img/header-mobile.png") top center no-repeat; 
}
.logoP {
	display: block;
	width: 40%;
}
.logoG {
	display: none;
}

/* -------- MEMO -------- */
.memo {
	display: flex;
	margin: auto;
	padding: 10px; 
	width: 85%;
	justify-content: center;
	align-items: flex-start;
	background-color: #fff;
	box-shadow: 0px 3px 25px #8e8e8e;
	border-radius: 0px 0px 15px 15px;
}
.memo h3 {
	margin: 0px;
	text-align: center;
	color: #e27795;
}

/* --------------- PAGE ACCUEIL --------------- */
/* -------- SECTION -------- */
section {
	margin: 40px auto;
	padding: 10px;
	width: 85%;
	background-color: #fff;
	box-shadow: 0px 3px 25px #8e8e8e;
	border-radius: 15px;
}
section h1 {
	text-align: center;
}
section p {
	font-size: 116%;
}
.description {
	display: none;
}

/* -------- DIV INFO -------- */
.info {
	display: flex;
	margin: 40px auto;
	padding: 10px;
	width: 85%;
	flex-wrap: wrap;
	align-content: center;
	background-color: #fff;
	box-shadow: 0px 3px 25px #8e8e8e;
	border-radius: 15px;
}
.info h1 {
	margin: 20px auto 10px;
	width: 100%;
	text-align: center;
}
.info h2 {
	margin: 5px auto;
}
.info p {
	margin: 5px auto 15px;
	width: 100%;
	font-size: 112%;
	font-weight: bold;
	text-align: center;
}
.info div {
	display: flex;
	width: 50%;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}

/* -------- IMAGES -------- */
.images {
	display: block;
	margin: 40px 0px;
}
.villes {
	display: none;
}

/* -------- ASIDE -------- */
#asideHaut {
	display: none;
}
#asideBas {
	margin: 40px auto;
	padding: 5px 10px 20px;
	width: 85%;
	background-color: #fff;
	box-shadow: 0px 3px 25px #8e8e8e;
	border-radius: 15px;
}
#asideBas h1, h3 {
	text-align: center;
}
#asideBas form {
	text-align: center;
}
form input, textarea {
	margin-bottom: 25px; 
	padding: 10px;
	width: 85%;
	border: 3px solid #b54354;
	border-radius: 15px;
}
.formButton {
	padding: 10px 0px;
	width: 40%;
	font-size: 130%;
	font-weight: bold;
	color: #fff;
	border: 3px solid #b54354;
	background-color: #b54354; 
	border-radius: 15px;
}
.formButton:hover {
	color: #b54354;
	border: 3px solid #b54354;
	background-color: #fff; 
}

/* -------- EMPLOYER -------- */
.employer {
	display: flex;
	padding: 10px;
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.employer div {
	margin: auto;
	width: 70%;
}

/* -------- FOOTER -------- */
footer {
	padding: 15px;
	text-align: center;
	background-color: #232323;
}
footer h2 {
	color: #fff;
}
footer p {
	color: #fff;
}
.hautFooter {
	margin: 0px;
	height: 280px;
	background: url(img/decoFooter-mobile.png) bottom center no-repeat;
}
#menu2 {
	display: flex;
	height: auto;
	flex-direction: column;
}
#menu2 a {
	padding: 5px 0px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}
#menu2 a:hover {
	color: #e27795;
}
.basFooter {
	padding: 10px;
	color: #fff;
	background-color: #151515;
}
.basFooter div {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}
.logo {
	margin: auto;
	width: 60%;
}
.copyright {
	color: #fff;
	text-align: center;
}

/* --------------- PAGE DESTINATION --------------- */
article {
	margin: 40px auto;
	width: 85%;
	background-color: #fff;
	box-shadow: 0px 3px 25px #8e8e8e;
	border-radius: 15px;
}
article img {
	border-radius: 15px 15px 0px 0px;
}
.texte {
	padding: 15px;
}
.infoVoyage {
	display: flex;
	padding: 10px;
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.texte p {
	text-align: justify;
}
.infoVoyage div {
	margin: auto;
	width: 40%;
}
.infoVoyage p {
	font-size: 114%;
	color: #b54354;
}

/* ------- En haut de 640px (ipad petit) ------- */
@media screen and (max-width: 427px) {
	/* -------- INFO -------- */
	.info div {
		margin: auto;
		width: 60%;
	}
}

/* ------- En haut de 640px (ipad petit) ------- */
@media screen and (min-width: 640px) {
	/* -------- HEADER -------- */
	header {
		height: 334px;
		background: url("img/header-ipadPetit.png") top center no-repeat; 
	}

	/* --------------- PAGE ACCUEIL --------------- */
	section, .info, #asideBas {
		padding: 20px;
	}

	/* -------- INFO -------- */
	.info div {
		margin: auto;
		width: 35%;
	}

	/* -------- EMPLOYER -------- */
	.employer div {
		margin: auto;
		width: 50%;
	}
	
	/* -------- FOOTER -------- */
	.hautFooter {
		margin: 0px;
		height: 334px;
		background: url(img/decoFooter-ipadPetit.png) bottom center no-repeat;
	}
}

/* -------------- En bas de 768px -------------- */
@media screen and (max-width: 767px) {
	.topnav a:not(:first-child) {
	  	display: none;
	}
	.topnav a.icon {
		position: absolute;
		display: flex;
	    right: 0;
	    top: 0;
	    padding: 10px;
	    width: 50px;
		justify-content: flex-end;
		align-items: flex-end;
		flex-wrap: wrap;
		text-decoration: none;
	}
}

@media screen and (max-width: 767px) {
    .topnav.responsive {
  		position: relative;
    }
    .topnav.responsive .icon {
    	position: absolute;
    	right: 0;
    	top: 0;
    	padding: 10px;
    	width: 50px;
    }
    .topnav.responsive a {
    	float: none;
    	display: block;
    	padding: 20px 0px;
    	font-size: 130%;
		color: #fff;
    	text-align: center;
    	text-decoration: none;
    	background: rgba(212, 72, 91, 0.8);
    }
    .topnav a:hover {
		color: #ffcbd3;
	}
}

/* -------------- En haut de 768px -------------- */
@media screen and (min-width: 768px) {
	/* -------- HEADER -------- */
	header {
		height: 580px;
		background: url("img/header-ipad.png") bottom center no-repeat, url("img/dégraderRose.png") top center repeat-x; 
	}
	.logoP {
		display: none;
	}
	.logoG {
		display: block;
		margin: 30px auto;
		width: 40%;
		max-width: 368px;
		max-height: 335px;
	}

	/* -------- MENU -------- */
	.topnav {
		display: flex;
		margin: auto;
		width: 100%;
		height: 40px;
		justify-content: space-around;
		flex-direction: initial;
		flex-wrap: wrap;
	}
	.topnav a {
		padding: 15px 0px;
		font-size: 122%;
		color: #fff;
		text-decoration: none;
	}
	.topnav a:hover {
		color: #ffcbd3;
	}
	.active {
	  display: none;
	}
	.topnav .icon {
	  display: none;
	}

	/* --------------- PAGE ACCUEIL --------------- */
	/* -------- IMG MEMO -------- */
	.memo h3 {
		font-size: 150%;
	}

	/* -------- SECTION -------- */
	section {
		padding: 30px;
	}
	.description {
		display: block;
	}
	.description p {
		text-align: justify;
	}

	/* -------- IMAGES -------- */
	.villes {
		display: block;
		margin: 40px 0px;
	}
	.images {
		display: none;
	}

	/* -------- IMG EMPLOYER -------- */
	.employer h1 {
		margin: 20px auto 10px;
		width: 100%;
		text-align: center;
	}
	.employer div {
		margin: auto;
		width: 40%;
	}

	/* -------- FOOTER -------- */
	.hautFooter {
		margin: 0px;
		height: 400px;
		background: url(img/decoFooter-ipad.png) bottom center no-repeat;
	}
	footer {
		display: flex;
		padding: 20px 40px;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	footer h2 {
		width: 100%;
		text-align: left;
	}
	footer p {
		width: 100%;
		text-align: left;
	}
	footer div {
		display: flex;
		width: 30%;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.basFooter {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
	}
	.basFooter div {
		display: flex;
		width: 40%;
		justify-content: center;
		flex-wrap: wrap;
	}
	.basFooter img {
		max-width: 280px;
		max-height: 118px;
	}
	.copyright {
		text-align: center;
	}
}

/* ------- En haut de 1200px ------- */
@media screen and (min-width: 1200px) {
	/* -------- HEADER -------- */
	header {
		height: 640px;
		background: url("img/header-bureau.png") bottom center no-repeat, url("img/dégraderRose.png") top center repeat-x; 
	}

	/* --------------- PAGE ACCUEIL --------------- */
	/* -------- SECTION ET ASIDE -------- */
	#deuxColumn {
		display: flex;
		margin: 40px auto;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	section {
		display: flex;
		margin: 0px 20px;
		width: 50%;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	section h1, p {
		width: 100%;
		text-align: left;	
	}
	section, #asideHaut {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	#asideHaut {
		display: block;
		margin: 0px 20px;
		padding: 5px 10px 20px;
		width: 30%;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		background-color: #fff;
		box-shadow: 0px 3px 25px #8e8e8e;
		border-radius: 15px;
	}
	#asideHaut h1, h3 {
		text-align: center;
	}
	#asideHaut form {
		text-align: center;
	}
	#asideBas {
		display: none;
	}

	/* -------- INFO -------- */
	.info div {
		margin: auto;
		width: 20%;
	}

	/* -------- IMG EMPLOYER -------- */
	.employer div {
		margin: auto;
		width: 25%;
	}
	
	/* -------- FOOTER -------- */
	.hautFooter {
		margin: 0px;
		height: 400px;
		background: url(img/decoFooter-sol.png) bottom center no-repeat, url(img/dégraderRosePale.png) bottom center repeat-x, url(img/decoFooter-montagne.png) bottom center no-repeat;
	}

	/* --------------- PAGE DESTINATION --------------- */
	article {
		display: flex;
		margin: 40px auto;
		width: 85%;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		background-color: #fff;
		box-shadow: 0px 3px 25px #8e8e8e;
		border-radius: 15px;
	}
	article div {
		display: flex;
		width: 50%;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	article img {
		border-radius: 15px 0px 0px 15px;
	}
	.texte {
		margin: auto;
		width: 45%;
	}
	.infoVoyage {
		display: flex;
		padding: 10px;
		text-align: center;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.infoVoyage div {
		margin: auto;
		width: 20%;
	}
	.infoVoyage p {
		font-size: 114%;
		color: #b54354;
		text-align: center;
	}
}