/*===== STYLES GENERAUX =====*/
/*       Polices de caractères        */

/*H1 header*/
@font-face {
    font-family: 'HarabaraHand';
   src: url('../02_Polices/HarabaraHand/harabarahand.eot');
    src: url('../02_Polices/HarabaraHand/harabarahand.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/HarabaraHand/harabarahand.woff') format('woff'),
         url('../02_Polices/HarabaraHand/harabarahand.ttf') format('truetype'),
         url('../02_Polices/HarabaraHand/harabarahand.svg#HarabaraHand') format('svg');
    font-weight: normal;
    font-style: normal;
	
}

/*H2 header*/
@font-face {
    font-family: 'Aaargh';
	src: url('../02_Polices/Aaargh/aaargh.eot');
    src: url('../02_Polices/Aaargh/aaargh.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Aaargh/aaargh.woff') format('woff'),
         url('../02_Polices/Aaargh/aaargh.ttf') format('truetype'),
         url('../02_Polices/Aaargh/aaargh.svg#Aaargh') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Menu*/
@font-face {
    font-family: 'Palitoon';
	src: url('../02_Polices/Palitoon/palitoon.eot');
    src: url('../02_Polices/Palitoon/palitoon.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Palitoon/palitoon.woff') format('woff'),
         url('../02_Polices/Palitoon/palitoon.ttf') format('truetype'),
         url('../02_Polices/Palitoon/palitoon.svg#Palitoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*H1 main section*/
@font-face {
    font-family: 'CaviarDreams';
	src: url('../02_Polices/CaviarDreams/caviardreams_italic.eot');
    src: url('../02_Polices/CaviarDreams/caviardreams_italic.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/CaviarDreams/caviardreams_italic.woff') format('woff'),
         url('../02_Polices/CaviarDreams/caviardreams_italic.ttf') format('truetype'),
         url('../02_Polices/CaviarDreams/caviardreams_italic.svg#CaviarDreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*H2 main section*/
@font-face {
    font-family: 'Cantarell';
	src: url('../02_Polices/Cantarell/cantarell-oblique.eot');
    src: url('../02_Polices/Cantarell/Cantarell-oblique.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Cantarell/Cantarell-oblique.woff') format('woff'),
         url('../02_Polices/Cantarell/Cantarell-oblique.ttf') format('truetype'),
         url('../02_Polices/Cantarell/Cantarell-oblique.svg#CaviarDreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*p main section*/
@font-face {
    font-family: 'Alegreya-Regular';
	src: url('../02_Polices/Alegreya/alegreya-regular-webfont.eot');
    src: url('../02_Polices/Alegreya/alegreya-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Alegreya/alegreya-regular-webfont.woff') format('woff'),
         url('../02_Polices/Alegreya/alegreya-regular-webfont.ttf') format('truetype'),
         url('../02_Polices/Alegreya/alegreya-regular-webfont.svg#CaviarDreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*---------- Balises standards HTML ----------*/
html {
	margin: 0px;
	padding: 0px;
	background-color: #000000;
}

body {
	margin: 0 auto 0 auto;
	padding: 0px;
	width: 100%;
}

/*---------- Balises et classes générales ----------*/

/*Tailles et polices*/
h1 {
	font-size: 2.2em;
	font-family: 'CaviarDreams',sans-serif;
	color: #000000;
	text-align: center;
}

h2 {
	font-size: 1.5em;
	font-family: 'Cantarell',sans-serif;
	color: #FFFFFF;
}

p, li, td, th, input, textarea, select {
	font-family: 'Alegreya-Regular',sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: #FFFFFF;
}

input, textarea, select {
	color: #000000;
	padding: 5px;
	border-radius: 3px;
	font-size: 1.1em;
	line-height: 1.1em;
}

/*Paragraphes*/
p {
	padding: 0 3% 0 3%;
	text-align: justify;
}

em, strong {
	color: #FFFFFF;
	font-style: italic;
	font-weight: bold;
}

button {cursor: pointer; border: none; padding: 0; margin: 0;}

/*Liens*/
a:link, a:visited {
	color: #9932CC;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

a:active {
	color: #000000;
	text-decoration: none;
}

/*Listes*/
ul {
	margin-left: 5%;
}

/*Tableaux*/
table {
	margin: 0 auto 0 auto;
	width: 95%;
}

td {
	padding-top: 1%;
	padding-bottom: 1%;
}

/*Fromulaires*/
input.bouton {
	background: none;
	font-weight: normal;
	cursor: pointer;
	font-style: italic;
	color: #FFFFFF;
	padding: 0.35em;
	border-radius: 0.35em;
	background-color: #8B4513;
}

/*Cadres texte*/
div.cadre_centre {
	width: 70%;
	text-align: center;
	margin: 40px auto 40px auto;
}

.colonne {
	display: -webkit-flex; /* Safari */
	-webkit-justify-content: space-around;
    -webkit-flex-direction: row; /* Safari 6.1+ */
	
	display: flex;
	justify-content: space-around;
	flex-direction: row;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.erreur {
	color: #DC143C;
}

/*Lien detail maquette*/


a.lien_maquette, a.lien_site {
	padding: 0 15px 0 45px;
	margin: 0;
	color: #FFFFFF;
	display: inline-block;
	width: auto;
	min-width: 0;
	max-width: 50%;
	line-height: 35px;
	height: 35px;
	text-decoration: none;
}

a.lien_maquette {
	background: url(../01_Fond/vue_maquette.png) no-repeat left;
	background-color: rgb(184,179,156);
}

a.lien_site  {	
	background: url(../01_Fond/navigateur-terre-internet-reel-que-ce-soit-monde-icone-8900-32.png) no-repeat left;
	background-color: rgb(184,179,156);
}

a.lien_maquette:hover, a.lien_site:hover  {
	color: #000000;
	background-color: rgb(255,140,0);
}



/*---------- HEADER ----------*/
header {
	display: block;
	position: relative;
	padding: 0;	
	border-top: 3px solid #32CD32;
	/*background-color: #000000;*/
	
}

/*.img_titre {position: relative; top: 80px; height: 3em; }*/


header h2.titre_gen {
	
	font-size: 3em;
	font-family: 'HarabaraHand',"Comic Sans MS",cursive;
	color: #FFFFFF;
	text-align: center;
	margin: 0 auto 0 auto;
	padding: 0.5em 0 0.5em 0;
	text-shadow: 0px 0px 10px #D02090;
}

header a:link {text-decoration: none;}

h1.ss_titre_gen {
	font-style: italic;
	font-family: 'Aaargh',arial,sans-serif;
	font-size: 1.2em;
	color: #0000CD;
	margin: -15px 0 0 200px;
	padding: 0;
	text-shadow: 2px 2px 5px #000000;
}

/*---------- Menu de navigation ----------*/
button.ico_menu { display: block; position: absolute; bottom: -1.1em; left: 5%; padding: 0; margin: 20px 30px 0 0;
	background: url(../01_Fond/ico_small_menu.png) no-repeat center;
	background-color: #32CD32;
	font-size: 1.2em;
    font-family: 'HarabaraHand',arial,sans-serif;
    font-weight: bold;
    color: #000000;
    padding: 0.5em;
    line-height: 1.2em;
    border: none;
    border-radius: 10px 0 10px 10px;
}

#menu_gen { display: none; position: absolute; width: 20%; min-width: 280px; padding: 0; margin: 1.2em 0 0 0; left: 6%;}
#menu_gen li, #menu_gen a {color: #8B0000; text-decoration: none; font-weight: normal;}
#menu_gen li {display: block;list-style-type:none; background-color: rgb(205,133,63); padding: 0px; margin: 10px 0 0 0; line-height: 50px; border: 1px solid #FFFFFF; border-radius: 10px; /*box-shadow: 0px 0px 10px rgb(255,255,255);*/ overflow: hidden;}
#menu_gen li div.fond {background-color: rgba(255,255,255,0.3); padding: 7px;}
#menu_gen li:hover div.fond  { background-color: rgba(255,255,255,0);}
#menu_gen li:hover a  { color: #FFFFFF;}
#menu_gen a:link {font-size: 1.2em; display: block; padding-left: 60px; line-height: 50px;}

#menu_gen a.lfav {background: url(../01_Fond/00_Fond_de_page/bouton-favoris-perspective--icone-7004-48.png) no-repeat;}
#menu_gen a.lall {background: url(../01_Fond/00_Fond_de_page/bouton-perspective-redemarrage-icone-9500-48.png) no-repeat;}
#menu_gen a.lnew {background: url(../01_Fond/00_Fond_de_page/bouton-aide-perspective--icone-6877-48.png) no-repeat;}
#menu_gen a.lparam {background: url(../01_Fond/00_Fond_de_page/bouton-infos-perspective-icone-8541-48.png) no-repeat;}
#menu_gen a.llog {background: url(../01_Fond/00_Fond_de_page/bouton-perspective-veille--icone-6392-48.png) no-repeat;}

#menu_gen form.lsearch {display: block; margin: 0; padding: 0 0 0 60px; line-height: 50px; background: url(../01_Fond/00_Fond_de_page/bouton-perspective-recherche-icone-7805-48.png) no-repeat;}
#menu_gen form.lsearch input {font-size: 1.2em; margin: 0; border: none; background:none; color: #FFFFFF; width: 95%; }
#menu_gen form.lsearch input:focus {background-color: #FFFFFF; color: #000000;}
#menu_gen form.lsearch input::placeholder {color: #FFFFFF;}

/*---------- CORPS PAGE ----------*/

section.main_content {
	width: 70%;
	margin: 3em auto 0 auto;
	position: relative;
	top: 0;
	padding: 0;
	/*border: 1px solid #FFFFFF;*/
	}

section.main_content_flex {	
	position: relative;
	display: -webkit-flex; /* Safari */
	-webkit-justify-content: space-around;
    -webkit-flex-direction: row; /* Safari 6.1+ */
	
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	background-color: #FFFFFF;
	width: 70%;
	margin: auto;
	position: relative;
	top: 0px;
	padding: 1% 2% 4% 2%;
	border: solid 1px #000000;	
	border-bottom: none;
	border-radius: 20px 20px 0 0;	
}

section.cadre_general {
	position: relative;
	display: -webkit-flex; /* Safari */
	-webkit-justify-content: space-around;
    -webkit-flex-direction: row; /* Safari 6.1+ */
	
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	
	width: 80%;
	margin: 0 auto 0 auto;
}

article#LeftColumn {
	display: block;
	position: relative;
	width: 35%;
	min-height: 1000px;
	padding: 0;
	background: url(../01_Fond/00_Fond_de_page/img_rideau.gif) no-repeat center 6em;
	background-size: 100%;
}

article#RightColumn {
	display: block;
	position: relative;
	width: 65%;
	background-color: #FFFFFF;
}

article#RightColumn p {color: #000000;}

h1.main_content_title1 {
	/*font-size: 2.2em;
	font-family: 'CaviarDreams',sans-serif;*/
	color: rgb(184,179,156);
	text-align: right;
	text-shadow: 2px 1px 0 #000000;
}

section.main_content h2 {
	/*font-size: 1.5em;
	font-family: 'Cantarell',sans-serif;*/
	margin-top: 50px;
	text-align: left;
}

/*---------- FOOTER ----------*/

footer {
	position: relative;
	width: 80%;
	margin: 0 auto 0 auto;	
	min-width: 700px;
	min-height: 80px;
	font-size: 0.85em;
	
	border-top: 2px solid #FFFFFF;
}

footer p {
	color: #FFFFFF;
	text-align: center;
}

footer a.lieno2i {color: #FFFFFF; text-decoration: none;}
footer a.lieno2i:hover {text-decoration: underline;}


/*Article illustres*/
div.pres_vignettes {
	position: relative;
	display: -webkit-flex; /* Safari */
	-webkit-justify-content: space-around; /* Safari */
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 0;
}
article.presentation_vins {
	display: block;
	position: relative;
	font-size: 0.95em;
	padding: 7px;
	margin: 1em 1.5% 1em 1.5%;
	width: 97%;
	border-radius: 0px;
}

article.presentation_vins:hover {background-color: #BDB76B;}

article.vinRouge {border-left: 5px solid #8B0000;}
article.vinBlanc {border-left: 5px solid #EEE8AA;}
article.vinRose {border-left: 5px solid #FF1493;}
article.vinMousse {border-left: 5px solid #FFA500;}
article.vinDefaut {border-left: 5px solid #8B008B;}


article.presentation_vins div.zone_favori {position: absolute; top: 0; right: 0; }
article.presentation_vins div.zone_favori button {background: none;}

article.presentation_vins div.zcolonne{
	display: flex;
	display: -webkit-flex; /* Safari */
	position: relative;
	margin: 0;
	padding: 0;
}

article.presentation_vins div.illustration {
	position: relative;
	padding: 0;
	margin: 0;
	width: 20%;
	/*background-color: #FF0000;*/
}

article.presentation_vins div.zone_modif_qte {display: flex; justify-content: right; align-items: center; background-color: #FFFFFF; width: 55%; padding: 10%; border-radius: 50%;}
article.presentation_vins div.zone_modif_qte button.lqte {background-color: #BDB76B; font-size: 1.5em; font-weight: bold; width: 1.5em; height: 1.5em; margin: 0.15em 0.15em 0.15em 0.5em; border-radius: 50%; }
article.presentation_vins div.zone_modif_qte button.lqte:hover {background-color: #000000; color: #FFFFFF;}

article.presentation_vins div.ztexte {
	position: relative;
	width: 80%;
	padding: 0;
	margin: 0;
	/*background-color: #0000FF;*/
}

article.presentation_vins h1 {
	margin: 0.5em 2% 1em 2%;
	padding: 0;
	text-align: left;
	font-size: 1.5em;
	color: #000000;
	border: none;
	letter-spacing: 0.2em;
}
article.presentation_vins p {
	display: block;
	margin: 0;
	padding: 0;
	color: #000000;
}
article.presentation_vins p.pres_descrip {font-size: 1.2em; padding-left: 1em;}
article.presentation_vins p.pnombre {font-size: 4em; line-height: 1em; font-style: bold; text-align: center; padding: 0; margin: 0;}


article.presentation_vins a {
	display: inline-block;
	position: relative;
	padding: 0;
	margin: 0;
	background-color: #FFFFFF;
	border: none;	
	border-radius: 0px 0 5px 5px;
}

div.zone_modif_fiche {display: block; position: relative;}
div.zone_modif_fiche p {text-align: right;}
div.zone_modif_fiche a {text-decoration: none; font-size: 1.8em; font-weight: bold; color: #8B4513; padding: 0 10px 0.5em 10px; border-radius: 10px;}
div.zone_modif_fiche a:hover {background-color: #8B4513; color: #FFFFFF;}

/*==== LISTE PAGES ====*/
p.page_index {
	display: inline-block;
	font-weight: bold;
	font-style: italic;
	background-color: rgb(101,71,35);
	margin: 0;
	padding: 5px 20px 5px 20px;
	border-radius: 0 10px 0px 10px;
}

.liste_pages {
	text-align: center;
	padding: 0 10% 0 10%;
	margin: 1% 0 1% 0;
}

.liste_pages a {
	display: inline-block;
	min-width: 30px;
	font-size: 1.3em;
	line-height: 2em;
	text-align: center;
	margin: 0.5%;
	padding: 0.4%;
	text-decoration: none;
	border: 1px solid rgb(123,144,51);
	border-radius: 10px;
}

.liste_pages a.page_active { font-weight: 'bold'; font-size: 1.5em;}

.liste_pages a:link, .liste_pages a:visited {
	color: #000000;
	background-color: #E6E6FA;
}

.liste_pages a:hover, .liste_pages a:active{
	color: #FFFFFF;
	background-color: #000000;
}

/*Affichage mobiles*/
@media screen and (max-device-width: 480px) {
	/*Fond*/
	h1 { font-size: 4em; }
	h2 { font-size: 2.7em; }
	p, li { font-size: 2.3em; line-height: 2.1em; }
	
	input, textarea, select {
		padding: 1%;
		border-radius: 3px;
		font-size: 1.2em;
		line-height: 1.2em;
		width: 90%;
	}
	
	.colonne {
		display: -webkit-flex; /* Safari */
		-webkit-justify-content: space-around;
		-webkit-flex-direction: column; /* Safari 6.1+ */
		
		display: flex;
		justify-content: space-around;
		flex-direction: column;
	}
	
	
	
	header {
		margin-top: -4em;
		margin-bottom: 6em;

		
	}
	
	/*Menu*/
	button.ico_menu { display: block; position: absolute; bottom: -2.2em; left: 0; padding: 0; margin: 20px 30px 0 0;
		font-size: 2.3em;
		padding: 0.5em;
		line-height: 1.2em;
		border-radius: 0;
	}
	#menu_gen { width: 80%; margin-top: 4.3em;}
	#menu_gen li {margin: 20px 0 0 0; line-height: 80px; border: 2px solid #FFFFFF; border-radius: 15px; /*box-shadow: 0px 0px 10px rgb(255,255,255);*/ overflow: hidden;}
	#menu_gen a:link {padding-left: 90px; line-height: 80px;}
	#menu_gen a.lfav {background: url(../01_Fond/00_Fond_de_page/bouton-favoris-perspective--icone-7004-64.png) no-repeat;}
	#menu_gen a.lall {background: url(../01_Fond/00_Fond_de_page/bouton-perspective-redemarrage-icone-9500-64.png) no-repeat;}
	#menu_gen a.lnew {background: url(../01_Fond/00_Fond_de_page/bouton-aide-perspective--icone-6877-64.png) no-repeat;}
	#menu_gen a.lparam {background: url(../01_Fond/00_Fond_de_page/bouton-infos-perspective-icone-8541-64.png) no-repeat;}
	#menu_gen a.llog {background: url(../01_Fond/00_Fond_de_page/bouton-perspective-veille--icone-6392-64.png) no-repeat;}
	#menu_gen form.lsearch {padding: 0 0 0 90px; line-height: 80px; background: url(../01_Fond/00_Fond_de_page/bouton-perspective-recherche-icone-7805-64.png) no-repeat;}
	
	.img_titre {position: relative; top: 80px; height: 2.1em; }



h1.titre_gen {
	font-size: 5em;

	text-shadow: 0px 0px 10px #D02090;
}
	
	
	
	section.main_content { width: 100%; }
	section.main_content_flex {	width: 100%; }
	
	/*Articles*/
	div.pres_vignettes {
		-webkit-flex-direction: column; /* Safari 6.1+ */
		flex-direction: column;
	}
	article.presentation { margin: 2em 2.5% 2em 2.5%; width: 90%; }
	article.presentation h1 { font-size: 2.7em; letter-spacing: 0.1em; }
	article.presentation p.pres_descrip {border-left: 8px solid #8B0000;}
	
	
	article.presentation p.pnombre {font-size: 8em;}


	article.presentation a {
		display: inline-block;
		position: relative;
		padding: 0;
		margin: 0;
		background-color: #FFFFFF;
		border: none;	
		border-radius: 0px 0 5px 5px;
	}


	a.lqte:link { font-size: 1.5em; border-radius: 10px; }

	div.zone_modif_fiche {display: block; position: absolute; right: 10px; bottom: 10px; text-decoration: none;}
	div.zone_modif_fiche a {text-decoration: none; font-size: 1.8em; font-weight: bold; color: #8B4513; padding: 0 10px 0.5em 10px; border-radius: 10px;}
	div.zone_modif_fiche a:hover {background-color: #8B4513; color: #FFFFFF;}
		
	

}