/*design1.css*/


:root
{	
	--fond1: #999999;
	--fond2: #aaaaaa;
	--fond3: #cccccc;
	--fond4: #330000;
	
	--motif: url("img/motif.png");
	
	
	--titres: #eef8f8;
	--parag: #3B3E4A;
	--liens1: #021d47;
	--liens2: #021d47;
	
	--arrondi1: 0.5vh;
	--arrondi2: 1vh;
	--arrondi3: 1.5vh;
	--arrondi4: 5vh;
}

body
{
	width: 99vw;
	background-image: var(--motif);
	/*background-color: var(--fond4);*/
	display: flex;
	
	justify-content: center;
	margin: 0;
}

#fond
{	
	width: 95%;
	height: 100%;
	
	margin-top: 0;
	margin-bottom: 0;
}

#err
{
	color: red;
	text-align: center;
	width: 100%;
}

/************************************************************************************************************************************************************************************************************/

h1
{
	border-bottom: 3px solid var(--titres);
	border-top: 3px solid var(--titres);
	color: var(--titres);
	font-size: 2.6em;
	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	
	width: 100%;
	text-align: center;
	
	background-color: var(--fond3);
}

h2
{
	text-decoration: underline;
	color: var(--titres);
	font-size: 1.8em;
	
	
}

p, ul
{
	color: var(--parag);
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
}


/*********************************************************************************************************************************/



header
{
	width: 100%;
	text-align: center;
	max-height: 14vw;
	overflow: hidden;
	margin-bottom: 2vh;
	border-bottom-left-radius: var(--arrondi4);
	border-bottom-right-radius: var(--arrondi4);
	
	display: flex;
	
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-end;
}

nav
{
	width: 21%;
	float: left;
	
	display: flex;
	
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
	
	
}
nav .groupe_menu
{
	width: 95%;
	margin-bottom: 1vh;

	border-radius: var(--arrondi1);
	
	border-right: 1px solid var(--fond1);
	border-left: 1px solid var(--fond1);
	border-bottom: 1px solid var(--fond1);
	background-color: var(--fond2);
	
	display: flex;
	
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
}

nav #profil_bienvenue
{
	width: 100%;
	
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-wrap;
}

nav p
{
	width: 80%;
	text-align: center;
	
}
nav ul
{
	width: 100%;
}

nav li
{
	width: 100%;
	text-align: center;
	
}

nav .activepage
{
	background-color: var(--fond3);
}

nav a, nav a:visited
{
	color: var(--liens1);
	text-decoration: none;
	font-size: 1.1em;
	font-weight: bold;
	
	/*text-decoration: underline;*/
}

nav a:hover
{
	color: var(--liens2);
	font-size: 1.1em;
	text-decoration: underline;
	font-weight: bold;
}

/***********************************************************************************************************************************************/

section
{
	width: 79%;
	background-color: var(--fond2);
	margin-bottom: 2vh;
	padding-top: 5vh;
	padding-bottom: 30px;
	
	margin-left: 21%;
	
	display: flex;
	flex-wrap: wrap;
	
	flex-direction: row;
	justify-content: space-around;
	align-items: space-around;
	border-radius: var(--arrondi1);
	
}

section a, section a:visited
{
	color: var(--liens1);
	text-decoration: none;
	font-size: 1.1em;
	font-weight: bold;
	
	/*text-decoration: underline;*/
}

section a:hover
{
	color: var(--liens2);
	font-size: 1.1em;
	text-decoration: underline;
	font-weight: bold;
}

.encadre_corps
{
	width: 90%;
	min-height: 30vh;
	background-color: var(--fond1);
	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-start;
	
	overflow: hidden;
	
	border: 1px solid var(--fond1);
	border-radius: var(--arrondi3);
	
	
	margin-top: 5vh;
	margin-bottom: 20px;
}
.encadre_photo
{
	max-width: 90%;
}

section h2
{
	width: 100%;
	height: 6vh;
	min-height: 2em;
	margin: auto;
	margin-top: 0;
	
	text-align: center;
	border-bottom: 1px solid var(--fond1);
	background-image: var(--motif);
	/*background-color: var(--fond4);*/
	
	padding-top: 0.5vh;
	padding-bottom: 0.5vh;
}

section p, section ul
{
	text-align: center;
	
	margin-top: 1vh;
	margin-bottom: 1vh;
}



section .groupe_parag
{
	margin-top: 1.5vh;
	margin-bottom: 1.5vh;
	width: 90%;
}

section .pellicule
{	
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	
	overflow: auto;
	
}
section .PhotoPellicule
{
	margin-left: 3px;
	margin-right: 3px;
}
section .PhotoPellicule p
{
	text-align: center;
}

section #modif_photo_profil
{
	float: left;
	max-width: 220px;
}

section form
{
	margin: auto;
	max-width: 100%;
}

section form p
{
	margin-top: 2vh;
	text-align: center;
	max-width: 100%;
}
section .form_droite
{
	margin: auto;
	max-width: 50%;
}

section .form_droite p
{
	margin-top: 2vh;
	text-align: right;
	max-width: 100%;
}

section textarea
{
	width: 100%;
}
section input, section select
{
	max-width: 20%
}
.radio
{
	width: 7%;
}

section form img
{
	margin-top: 0;
}

section #img_captcha
{
	max-width: 50%;
}

section #div_pages
{
	width: 90%;
	margin: auto;
	height: 7vh;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	
	justify-content: space-between;
}
section #div_pages p
{
	max-width: 30%;
	font-size: 2em;
}
section #div_pages img
{
	max-height: 5vh;
	max-width: 5vh;
	background-color: var(--fond1);
	border-radius: var(--arrondi3);
	border: 1px solid black;
}
section #resultats
{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	
	flex-direction: row;
	justify-content: space-around;
	align-items: space-around;
}

section .groupe_annonceur
{
	width: 100%;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	
	justify-content: space-between;
}

section .photo_profil_annonceur
{
	width: 25%;
}

section .description_annonceur
{
	width: 70%;
	
}


/********************************************************************************************************************************************************/

footer
{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
	background-color: var(--fond2);
	
	border-top-right-radius: var(--arrondi3);
	border-top-left-radius: var(--arrondi3);
}

footer p
{
	width: 48%;
	border-left: 2px solid var(--fond1);
	border-right: 2px solid var(--fond1);
	text-align: center;
}

footer a, footer a:visited
{
	color: var(--liens1);
	text-decoration: none;
	font-size: 1.0em;
	
	/*text-decoration: underline;*/
}

footer a:hover
{
	color: var(--liens2);
	font-size: 1.0em;
	text-decoration: underline;
	
}