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

@media screen and (max-width: 1000px)
{
	/*Affichage reduit*/
	section { padding-bottom: 30px;}
	nav.generale { bottom: 0px;width: 100%; background-color: none;}
	nav p { text-align: center; font-size: 1.8em;}	
	nav a:link, nav a:visited { color: #000000;}
	nav a:hover, nav a:active { color: #000000;}
	header h1{ font-size: 4.2em; }
	header h2{ font-size: 2.6em; }
	input.champ_recherche {
		font-size: 2.8em;
		width: 90%;
		margin-top: 30px;
		border: 3px solid #A0522D;
	}
}

@media screen and (min-width: 1001px)
{
	/*Affichage large*/
	#table_rubriques { flex-direction: row; justify-content: space-around;}
	div.colonne { width: 24.5%;}
	nav.generale { top: 0px; width: 115px; background-color: #00008B;}
	nav p { text-align: right; font-size: 0.75em;}
	nav a:link, nav a:visited { color: #FFFFFF;}
	nav a:hover, nav a:active { color: #FFD700;}	
	header h1{ font-size: 2.3em; }
	header h2{ font-size: 1.2em; }
	#zrech {position: relative; display: block; width: 100%; margin: auto; }
	#zrech input.chsearchgen { margin: 0.5em auto 0 auto;  width: 98%; display: block; height: 2em; font-size: 1.1em; padding: 0.2em 3% 0.2em 3%; border: 1px solid #A0522D; }
	div.suggestion {position: absolute; top: 2em; width: 100%; background-color: #F5F5DC; box-shadow: 3px 3px 5px #000000; z-index:10;}
	p.ppslk {padding: 0 3% 0 3%; margin: 0; cursor: pointer; text-align: left; line-height: 1.6em; font-size: 1.2em;}
	p.ppslk:hover, p.result_focus  {background-color: #FFD700;}
}

html {
	top : 0;
	margin: 0;
	padding: 0;	
}

body {
	font: 1em georgia, sans-serif;
	color: #555753;
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	/*border: 1px solid #006400;*/
	overflow-y: scroll;
}
p, li, td {
	font-size: 0.9em;
	color: #000000;
	line-height: 1.2em;
}
a:link, a:visited {
	color: #D2691E;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:focus {
	outline:0;
}
.erreur {
	font-weight: bold;
	color: #FF0000;
}
.validation {
	font-weight: bold;
	color: #000000;
}
.small {
	font-size: 0.9em;
}
.centre {text-align: center;}
/*------ Formulaire------*/
.champs {position: relative; margin: 0.5em 0 0.5em 0; padding: 0.5em 1.5% 0.5em 1.5%; line-height: 1.3em; font-size: 1.15em; border: 1px solid #000000; border-radius: 0.5em;}
.shortField {width: 45%;}
.longField {width: 80%;}
.Field100 {width: 100%;}
/*Zone message js*/
#res_add_frss {display: block; position: absolute; min-width: 30%; top: 0; left: 35%;  padding: 0; z-index: 3;}
#messRes {min-height: 2.4em; padding: 0.5em 2% 0.5em 2%; margin: 5em 0 0 0; background-color: #FFFFFF; border: 5px solid #D2B48C; border-radius: 1em; }
#messRes p {padding: 0; margin: 0; line-height: 1.2em; text-align: center; cursor: pointer;}
/*Communication JS*/
#incjs {display: block; position: absolute; min-width: 100%; top: 6em;  padding: 0; z-index: 5; /*background-color: #FFFFFF; border: 1px solid #000000;*/}
#closeincjs {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	width: 2em;
	
	font-weight: bold; 
	font-size: 1.2em;
	line-height: 1.2em;
	text-align: center;
	color: #FFFFFF;
	
	background-color: #D2B48C;
	border-radius: 1.5em;
	cursor: pointer;
}
#closeincjs:hover {
	color: #000000;	
	background-color: #FF0000;
}
#ResultMessArea {}



button {cursor: pointer;}


button.bt_new_elmt {
	display: inline-block;
	min-width: 5%;
	padding: 0.5em 2% 0.5em 2%;
	margin: 0.5em 2.5% 0.5em 2.5%;
	line-height: 1em;
	border: 2px solid #000000;
	border-radius: 0.5em;
	cursor: pointer;
	white-space: nowrap;
}

button.bt_new_elmt:hover {
	background-color: #A7A37E;
	color: #FFFFFF;
}

header {
	display: block;
	position: relative;
	width: 100%;
	top: 0;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	z-index:4;	
}

div.hctntGen {width: 100%; border-bottom: 1px solid #000000;}

div.header_content {
	display: flex;
	position: relative;
	width: 100%;
	background-color: #191970;
}

.hztitle {width: 25%; height: 3em; padding: 0.25em 0 0.25em 0; /*background-color: #87CEEB;*/}
.zone_recherche {display: block; width: 35%;}
div.hzmenu {
	display: block;
	position: relative;
	width: 40%;
	padding: 0;
	margin: 0;
	height: 3.5em;
	
}

header h1{
	color: #FFFFFF;
	font-size: 1.5em;
	font-style: italic;
	text-shadow: 3px 3px 2px #2F4F4F;
	margin: 0 5% 0 5%;
}

header h2{
	color: #FFFFFF;
	font-style: normal;
	font-size: 1em;
	margin: 0 0 0 15%;
}

header a {
	color: #D2691E;
	font-style: italic;	
}

/*Zone affichage générale*/
section.gen {
	position: relative;
	top: 0;
	margin: 0;
	padding: 0;
	z-index: 1;
}
/*section contenant la colonne d'outils et la colonne d'affichage (note + photos)*/
section.genPortal {position: relative; display: flex; width: 100%; /*background-color: #FF0000;*/}
div.ZmenuTools {display: block; position: relative; width: 4%; /*height: 100%; float: left;top: 0; */padding: 0 0 0.5em 0; text-align: center; background-color: #D2B48C; border-right: 1px solid #000000; z-index: 2;}
section.displayArea {display: block: relative; width: 96%; min-height: 1000px; /*background-color: #FFFF00;*/}


.flex {display: flex; position: relative; padding: 0; justify-content: center; flex-wrap: wrap;}

/*Section générale*/





/*------------- Menu général --------*/
nav.navgen {
	display: flex;
	justify-content: right;
	margin: 0;
	padding: 0;
}

nav.navgen a {
	display: block;
	position: relative;
	width: 24%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	line-height: 3.5em;
	text-decoration: none;
}
nav.navgen a.prm { width: 4%;}

nav.navgen a:hover {
	background-color: #000000;
}

/*Form log mini*/
#form_log_mini { position: relative; padding: 0; margin: 0; background-color: #D2B48C;}
#form_log_mini p {margin: 0;}
#form_log_mini .chtext {width: 10%;}
#form_log_mini .champs, #form_log_mini button.bt_new_elmt {margin: 0; padding: 0.25em 1% 0.25em 1%; line-height: 1.5em; font-size: 0.9em;}
.cxmode {display: inline-block; background-color: #000000; color: #FFFFFF; font-weight: bold; line-height: 2.5em; padding: 0 1% 0 1%; margin-right: 1%;}

/*Menu outils*/

div.ZmenuTools a.lktools {position: relative; display: block; height: 3.2em; line-height: 3.2em; cursor: pointer; 
	color: #000000;
	font-size: 1em;
	font-style: italic;
	padding: 0;
	margin: 0.5em 0 0 0;
}
div.ZmenuTools a.lktools img {height: 3.2em; z-index: 5;}
span.comTools {display: none; z-index: 0; transition: 1s linear left; left: -5em; position: absolute; width: 10em; text-align: left; overflow: hidden; background-color: #D2B48C; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000;}


div.ZmenuTools a.lktools:hover span.comTools { left: 5em;}


div.ZmenuTools a.lktools:hover {text-decoration: none; background-color: #D2B48C;}
div.ZmenuTools a.lkgal {background: url(../01_Fond/image-photo-icone-6295-128.png) no-repeat left,#FFFFFF; background-size: 3.2em; }
div.ZmenuTools a.lkrctlau {background: url(../01_Fond/gateau_128.png) no-repeat left,#FFFFFF; background-size: 3.2em; }
div.ZmenuTools a.lkmap {background: url(../01_Fond/gps-carte-icone-8212-128.png) no-repeat left,#FFFFFF; background-size: 3.2em; }
div.ZmenuTools a.lkcave {background: url(../01_Fond/verre_128.png) no-repeat left,#FFFFFF; background-size: 3.2em; }

button.bttools {position: relative; width: 100%; margin: 1em 0 0 0; border: none; background-color: #D2B48C; cursor: pointer;}
button.bttools img { width: 100%;}

/*Sphere favoris*/
#MenuSphereAre {position: relative; padding-top: 0; /*background-color: #808000;*/ transition: 0.5s linear margin-top;}

/*Cadre images*/
#ContentSphere {/*border-top: 1em solid #D2B48C;*/ position: relative; display: flex; width: 99.5%; padding: 0.25%; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: flex-start; /*background-color: #FFFF00;*/ overflow: hidden;   }
.zoneImage {display: block; position: relative; width: 32.5%; margin: 0.25%; border: 1px solid #000000; text-align: center; overflow: hidden; }
.zoneImage img {display: block; margin: auto; width: 100%;}
.zoneImage img:hover {width: 120%; margin: -10% 0 0 -10%; }
div.zoomimg {z-index: 5; display: inline-block; position: fixed; top: 0; margin: 2em 0 2em 0; border: 5px solid #FFFFFF; box-shadow: 0.25em 0.25em 20px #000000, -0.25em -0.25em 20px #000000; border-radius: 1em; overflow: hidden;}
div.zoomimg img {display: block; width: 100%;}
button.btPhFavo {display: block; position: absolute; top: 2%; right: 2%;width: 64px; height: 64px; background-color: #FFFFFF; border: none; cursor: pointer; border-radius: 10px;}
/*Menu bulle*/
#MenuSphere {/*display: none;*/ position: absolute; width: 100%; text-align: center; bottom: 0; /*background-color: #000000;*/}
#MenuSphere button.OptSphere {
	width: 8em;
	height: 8em;
	border-radius: 50%;
	border: 2px solid #D2B48C;
	
	margin: 0.5em; 
	vertical-align: middle;
	background-color: #8B0000;
	color: #FFFF00;
	font-style: italic;
	font-size: 1.2em;
	cursor: pointer;
	
	opacity: 0;
	transition: 0.25s linear opacity;
}
#MenuSphere button.OptSphere:hover {background-color: #000000; box-shadow: 0.5em 0.5em 0.5em #000000;}
#MenuSphere button.bt1 {margin-top: -8em;}
#MenuSphere button.bt2 {margin-top: -2em;}
/*Bouton affichage sphere*/
#btSphereShow {position: absolute; bottom: -3em; padding: 0; text-align: left; }
#btSphereShow button {transition: 0.25s linear letter-spacing; font-size: 1.5em; padding: 0.5em 5% 0.5em 5%; background-color: #D2B48C; border: none; border-radius: 0 0 1em 0; box-shadow: 0.1em 0.1em 0.25em #000000; cursor: pointer;}
#btSphereShow button:hover {letter-spacing: 0.25em; color: #FFFFFF;}
/*Mozaic sélection rubrique*/
#zoneListRubrique {margin-top: 4em; }
#mozaicRubrique {position: relative; display: flex; justify-content: flex-start; flex-wrap: wrap; /*background-color: #800080;*/}
#zoneListRubrique h2 {font-size: 2.5em; line-height: 2.5em; min-height: 2em; color: #000000; margin: 0; padding: 0 2% 0 2%; text-align: center; font-family: allura; font-weight: normal;}
#zoneListRubrique button.rubriqueSelector {display: block; font-size: 1.2em; width: 20%; height: 8em;margin:0; padding: 1%; background-color: rgba(0,0,0,0.3); border: none; cursor: pointer;}
#zoneListRubrique button.rubriqueSelector:hover {background-color: #D2B48C;}
/*Détail rubrique cadre gauche*/
.zoneDetailRubrique{padding-bottom: 0.5em; border-bottom: 1px solid #D2B48C;}
.zoneDetailRubrique h3 {font-style: italic; color: #FFFFFF; padding: 0.25em 2% 0.25em 2%; background-color: #191970; margin: 0 0 0.5em 0;}
.zoneDetailRubrique p {font-size: 1.1em; padding: 0.25em 2% 0.25em 2%; margin: 0;}
.zoneDetailRubrique a {font-weight: bold;}
.zoneDetailRubrique span.cmtLien {font-size: 1em; color: #8B0000; }

/*Article*/
article.gen {display: block; width: 36%; padding: 2%; font-size: 1.1em; font-style: italic; }
article.gen p {line-height: 1.8em; text-align: justify;}


article.popup{margin: 0 auto 0 auto; border: 5px solid #D2B48C; background-color: #FFFFFF; box-shadow: 0.25em 0.25em 0.5em #000000;}
article.popup p.resmes { padding: 0.25em 3.5% 0.25em 3.5%; font-size: 1.1em;}

article.quartInfo {
	display: block;
	position: relative;
	width: 24%;
	padding: 0;
	margin: 0.5%;
	border: 1px solid #000000;
}

div.contentArticle {position: relative; width: 96%; padding: 2%; /*background-color: #000000;*/}
label {margin: 0; padding: 0;/* border: 1px solid #000000;*/}


div.colonneGaucheOutils {padding: 0; width:30%; margin:0; border: none;}
#ColRightToolArea {padding: 0; width:70%; margin:0; border: none;}

.larg30 {width: 30%;}

#cadreNotes, #cadreActu { height: 0; overflow: hidden; transition: 0.5s linear height;}
button.hideSphereTool {position: absolute; top: 1em; right: 1em; cursor: pointer;}
article.znotes {
	display: block;
	position: relative;
	padding: 0;
	background-color: #FFFFFF;
}
article.znotesCol {
border-bottom: 1px solid #D2B48C;
	overflow: hidden;
}
article.znotes h2, article.popup h2 {
	/*background-color: #000000;*/
	border-bottom: 5px double #191970;
	font-size: 2em;
	line-height: 2em;
	height: 8%;
	min-height: 2em;
	color: #000000;
	margin: 0;
	padding: 0 2% 0 2%;
	font-family: allura;
	font-weight: normal;
}
article.znotes a{color: #000000; font-size: bold;}
article.znotes a.infoznote {color: #A0522D; }
article.znotes div.btadd, article.znotes div.btactu {position: absolute; display: inline-block; right: 0; top: 0;}
article.znotes div.btadd button {font-size: 1.2em; font-weight: bold; color: #FFFFFF; background: none; border: none; cursor: pointer;}
article.znotes div.btadd button:hover {color: #FFD700;}
div.enteteCtnNotes {position: relative; min-height: 2.4em; margin: 0; padding: 0; /*background-color: #D2B48C;*/}
div.enteteCtnNotes p {margin: 0; padding: 0 2% 0 2%; color: #000000; line-height: 1.2em;}
div.enteteCtnNotes button {display: inline-block; position: relative; margin: 0.25em 1% 0.25em 1%; height: 100%; line-height: 2.4em; border-radius: 2.4em; border: none; cursor: pointer;}
div.enteteCtnNotes button:hover {background-color: #000000; color: #FFFFFF;}
div.ctntnotes {position: relative; height: 23em; margin: 0; padding: 0; /*background-color: #8FBC8F;*/ overflow-y: auto; overflow-x: hidden;}
/*div.ctntnotesH24 {height: 92%;}*/
/*NEWS*/
#zoneNews a {color: #A0522D; }
/*NOTES*/
div.memo {position: relative; padding:0 0 0 35px; margin: 0.5em 0 0.5em 0; min-height: 2.4em;}
div.memostd {background: url(../01_Fond/horloge-icone-4046-32.png) no-repeat 4px 4px;}
div.memolink {background: url(../01_Fond/terre-main-icone-32.png) no-repeat 4px 4px;}
div.memo p.pnote { margin: 0; line-height: 1.2em; padding: 0.25em 3% 0.25em 3%; cursor: pointer;}
div.done { text-decoration: line-through; background-color: #C0C0C0;}
article.znotes p.vide {text-align: center; font-size: 1.2em; font-weight: bold; }
div.editNote {position: absolute; top: 0; right: 0; display: none;}
div.editNote button {display: inline-block; width: 25px; height: 25px; background-color: none; border: none; cursor: pointer;}
div.memo:hover {background-color: #D2B48C;}
div.memo:hover div.editNote {display: block;}
li.liens:hover div.editNote {display: block;}
/*EMAILS*/
article.znotes div.btactu button {font-size: 2.5em; line-height: 0.8em; color: #FFFFFF; background: none; border: none; cursor: pointer; padding: 0;}
article.znotes div.btactu button:hover {color: #FFD700;}
div.maildtupdt {position: absolute; display: inline-block; padding: 0.25em 2% 0.25em 2%; top: 0; right: 0; font-size: 0.8em; color: #FFFFFF; text-align: center;}
p.pmaillist {padding: 0.5em 2% 0.5em 2%; margin: 0;}
p.pmaillist:hover {background-color: #F5F5F5; box-shadow: 5px 0 5px #000000;}
span.mailsender {font-weight: bold; color:#483D8B;}
span.mailtitle{color: #696969;}
/*Mail preview*/
#previewMail {width: 75%; margin: 0.5em auto 2em auto;}
#previewMail h2 {margin: 0; padding: 0.5em 3% 0 3%;}
#previewMail p {margin: 0; padding: 0.5em 3% 0.5em 3%;}
div.detailfrommail {background-color: #F5F5F5;}
div.detailcorpmail {margin-top: 1em; border-bottom: 1px solid #000000;}