body
{
	width: 860px;
	margin: auto;
	background-color: rgb(133, 109, 77);
	overflow-y: scroll;
}
.bloc_page
{
	background-color: rgb(253, 241, 184);
	font-family: "Comic Sans MS", "Trebuchet MS", serif;
	color: rgb(133, 109, 77);
}
nav
{
	position: relative;
}
.banniere2
{
	display: none;
}
.banniere3
{
	display: none;
}
.banniere4
{
	display: none;
}
.banniere5
{
	display: none;
}
.banniere6
{
	display: none;
}
.ul_banniere
{	
	position: absolute;
	bottom: 0%;
	right: 1%;
}
.li_nav
{
	display: inline-block;
	background-image: url("creme.png");
	padding: 5px;
	margin-right: 5px;
	margin-left: 5px;
	border-radius: 5px;
	box-shadow: 6px 6px 5px black;
	width: 110px;
	text-align: center;
}
a
{
	text-decoration: none;
	color: rgb(133, 109, 77);
}
a:hover
{
	color: rgb(255, 228, 54);
}
section
{
	text-align: justify;
	padding: 20px;
	font-size: 95%;
}
img
{
	border: none;
}
.note
{
	font-size: 85%;
}
footer
{
	padding-bottom: 2px;
	text-align: center;
	font-size: 0.8em;
	clear: both;
}



/*Caractéristiques générales propres aux pages autres que l'index*/
h1
{
	font-size: 200%;
	text-align: center;
	background-image: url("creme2.png");
	border-radius: 5px;
	border: 1px black solid;
	margin-top: 0px;
	box-shadow: 6px 6px 5px black;
}



/*Caractéristiques propres à la page "personnages"*/
.h2_personnages1
{
	text-align: center;
	margin-top: 40px;
	margin-bottom: 40px;
	background-image: url("creme.png");
	border-radius: 5px;
	box-shadow: 6px 6px 5px black;
	border: 1px black solid;
}
.h2_personnages2
{
	text-align: center;
	margin-top: 30px;
	margin-bottom: 40px;
	background-image: url("creme.png");
	border-radius: 5px;
	box-shadow: 6px 6px 5px black;
	border: 1px black solid;
}
.div_personnages1
{
	display: inline-block;
	margin-left: 43px;
	margin-right: 15px;
	text-align: center;
}
.div_personnages2
{
	display: inline-block;
	margin-left: 15px;
	margin-right: 15px;
	text-align: center;
}
.personnages
{
	background-image: url("gris.png");
	color: rgb(253, 241, 184);
	border-radius: 5px;
	box-shadow: 6px 6px 5px black;
	width: 148px;
	padding: 5px;
	margin-top: -4.2px;
}



/*Caractéristiques propres aux pages des personnages*/
.image_flottante1
{
	float: left;
	margin: 0px 10px 0px 0px;
}
.image_flottante2
{
	float: right;
	margin: 0px 0px 0px 10px;
}
.p_nevant
{
	height: 140px;
}



/*Caractéristiques propres à la page "épisodes"*/
.h2_episodes1
{
	text-align: center;
	margin-top: 30px;
	margin-bottom: 40px;
	background-image: url("creme.png");
	border-radius: 5px;
	box-shadow: 6px 6px 5px black;
	border: 1px black solid;
}
.h2_episodes
{
	text-align: center;
	margin-top: 0px;
	margin-bottom: 40px;
	background-image: url("creme.png");
	border-radius: 5px;
	box-shadow: 6px 6px 5px black;
	border: 1px black solid;
}
.div_episodes
{
	display: inline-block;
	margin-right: 5.6px;
	margin-left: 5.6px;
	font-size: 1em;
	vertical-align: top;
	text-align: center;
	margin-bottom: 20px;
}
.episodes
{
	margin-top: 1px;
}



/*Caractéristiques propres aux pages des épisodes*/
.div_titre_episode
{
	display: inline-block;
	vertical-align: middle;
	width: 320px;
	text-align: center;
}
.h1_episodes
{
	width: 300px;
	height: 80px;
	background-image: url("creme4.png");
	box-shadow: 6px 6px 5px black;
	padding: 5px;
	margin-top: 15px;
	margin-bottom: 0px;
}
.div_images_episode
{
	display: inline-block;
	vertical-align: middle;
}
.div_distribution1
{
	display: inline-block;
	vertical-align: top;
	width: 50%;
	text-align: left;
}
.div_distribution2
{
	display: inline-block;
	vertical-align: top;
	width: 49%;
	text-align: right;
}



/*Caractéristiques propres à la page "acteurs"*/
.presentation_acteurs
{
	margin-top: 30px;
	margin-bottom: 30px;
}
.acteurs
{
	margin-left: 27px;
	margin-right: 27px;
	margin-top: 5px;
	margin-bottom: 5px;
}



/*Caractéristiques propres aux pages des acteurs*/
.h1_acteurs
{
	display: inline-block;
	vertical-align: top;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 4px;
	margin-right: 4px;
	width: 250px;
	height: 170px;
	background-image: url("creme5.png");
	padding: 5px;
	box-shadow: 0px 0px 0px black;
}
.h1_acteurs_positionnement
{
	position: relative;
	top: 38px;
}
.photo_acteurs
{
	display: inline-block;
	vertical-align: top;
	width: 262px;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-right: 4px;
	margin-left: 4px;	
}
.intro_acteurs
{
	display: inline-block;
	vertical-align: top;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-right: 4px;
	margin-left: 4px;
	width: 250px;
	height: 170px;
	background-image: url("creme5.png");
	padding: 5px;
	text-align: center;
	border-radius: 5px;
	border: 1px black solid;
}
.div_acteurs1
{
	display: inline-block;
	vertical-align: top;
	width: 234px;
	font-size: 85%;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 20px;
}
.div_acteurs2
{
	display: inline-block;
	vertical-align: top;
	width: 234px;
	font-size: 85%;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-right: 34px;
	margin-left: 34px;
}
.div_acteurs3
{
	display: inline-block;
	vertical-align: top;
	width: 234px;
	font-size: 85%;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-right: 20px;
}



/*Caractéristiques propres à la page "Paris"*/
.paris1_petit
{
	float: right;
	margin: 0px 0px 0px 10px;
}
.paris2_petit
{
	display: none;
}
.paris
{
	margin-left: 17.5px;
	margin-right: 17.5px;
	margin-top: 8px;
	margin-bottom: 8px;
}



/*Caractéristiques propres aux pages des arrondissements*/
.h2_paris
{
	text-align: center;
	background-image: url("creme.png");
	border-radius: 5px;
	box-shadow: 6px 6px 5px black;
	border: 1px black solid;
	margin-top: 30px;
	margin-bottom: 20px;
}
.div_paris1
{
	display: inline-block;
	vertical-align: top;
	text-align: center;
	font-size: 1em;
	margin-top: 30px;
	margin-left: 75px;
}
.div_paris2
{
	display: inline-block;
	vertical-align: top;
	text-align: center;
	font-size: 1em;
	margin-top: 30px;	
	margin-right: 75px;
}
.div_paris3
{
	display: inline-block;
	vertical-align: top;
	text-align: center;
	font-size: 1em;
	margin-top: 30px;
	margin-left: 66px;
}



@media only all and (max-width: 900px)
{
	body
	{
		width: auto;
		overflow-x: hidden;
	}
	
	.banniere1
	{
		display: none;
	}
	
	.banniere2
	{
		display: block;
	}
	
	.banniere3
	{
		display: none;
	}
	
	.banniere4
	{
		display: none;
	}
	
	.banniere5
	{
		display: none;
	}
	
	.banniere6
	{
		display: none;
	}
	
	.ul_banniere
	{	
		position: absolute;
		left: 109px;
		top: 112px;
	}
	
	.li_nav
	{
		margin-top: 10px;
		margin-bottom: 10px;
		width: 102px;
	}
	
	footer
	{
		padding: 10px;
	}
	
	
	
	/*Caractéristiques propres à la page "personnages"*/
	.div_personnages1
	{
	display: block;
	margin: auto;
	}
	
	.div_personnages2
	{
	display: block;
	margin: auto;
	}
	
	.personnages
	{
	display: block;
	margin: auto;
	margin-top: -4.5px;
	margin-bottom: 20px;
	}
	
	
	
	/*Caractéristiques propres à la page "épisodes"*/
	.div_episodes
	{
	display: block;
	margin: auto;	
	}
	
	
	
	/*Caractéristiques propres à la page "acteurs"*/
	.acteurs
	{
	display: block;
	margin: auto;
	margin-top: 20px;
	}
	
	
	
	/*Caractéristiques propres aux pages des acteurs*/
	.h1_acteurs
	{
	display: block;
	margin: auto;
	}

	.photo_acteurs
	{
	display: block;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	}
	
	.intro_acteurs
	{
	display: block;
	margin: auto;
	}
	
	.div_acteurs1
	{
	display: block;
	margin: auto;
	}
	
	.div_acteurs2
	{
	display: block;
	margin: auto;
	}
	
	.div_acteurs3
	{
	display: block;
	margin: auto;
	}
	
	
	
	/*Caractéristiques propres à la page "Paris"*/
	.paris
	{
	display: block;
	margin: auto;
	}
	
	
	
	/*Caractéristiques propres aux pages des arrondissements*/
	.div_paris1
	{
		display: block;
		margin: auto;
	}
	
	.div_paris2
	{
		display: block;
		margin: auto;
	}
	
	.div_paris3
	{
		display: block;
		margin: auto;
	}	
}



@media only all and (max-width: 800px)
{
	.banniere1
	{
		display: none;
	}
	
	.banniere2
	{
		display: none;
	}
	
	.banniere3
	{
		display: block;
	}
	
	.banniere4
	{
		display: none;
	}
	.banniere5
	{
		display: none;
	}
	.banniere6
	{
		display: none;
	}
}



@media only all and (max-width: 670px)
{
	.div_distribution1
	{
		display: block;
		width: 100%;
	}
	.div_distribution2
	{
		display: block;
		text-align: left;
		width: 100%;
	}
}



@media only all and (max-width: 640px)
{
	.banniere1
	{
		display: none;
	}
	
	.banniere2
	{
		display: none;
	}
	
	.banniere3
	{
		display: none;
	}
	
	.banniere4
	{
		display: block;
	}
	
	.banniere5
	{
		display: none;
	}
	
	.banniere6
	{
		display: none;
	}
}



@media only all and (max-width: 582px)
{
	.paris1_petit
	{
		display: none;
	}
	
	.paris2_petit
	{
		display: block;
		margin: auto;
	}
}



@media only all and (max-width: 550px)
{
	.banniere1
	{
		display: none;
	}
	
	.banniere2
	{
		display: none;
	}
	
	.banniere3
	{
		display: none;
	}
	
	.banniere4
	{
		display: none;
	}
	.banniere5
	{
		display: block;
	}
	.ul_banniere
	{	
	position: absolute;
	top: 200px;
	left: 120px;
	}
	.banniere6
	{
		display: none;
	}
}



@media only all and (max-width: 506px)
{
	.p_nevant
	{
	height: 100%;
	}
}



@media only all and (max-width: 506px)
{
	.image_flottante1
	{
		float: none;
		display: block;
		margin: auto;
	}
}



@media only all and (max-width: 458px)
{
	.image_flottante2
	{
		float: none;
		display: block;
		margin: auto;
	}
}



@media only all and (max-width: 442px)
{
	.h1_paris
	{
	background-image: url("creme3.png");
	}
}



@media only all and (max-width: 430px)
{
	.div_images_episode img
	{
		display: block;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}



@media only all and (max-width: 430px)
{
	.banniere1
	{
		display: none;
	}
	
	.banniere2
	{
		display: none;
	}
	
	.banniere3
	{
		display: none;
	}
	
	.banniere4
	{
		display: none;
	}
	.banniere5
	{
		display: none;
	}
	.banniere6
	{
		display: block;
	}
	.ul_banniere
	{	
	position: absolute;
	top: 160px;
	left: 140px;
	}
}



@media only all and (max-width: 350px)
{
	.h1_faroux
	{
	background-image: url("creme3.png");
	}
}



@media only all and (max-width: 348px)
{
	.h1_arrondissement
	{
	background-image: url("creme3.png");
	}
}