/*Styles de mise en page du faire-part*/

/*H1 header*/
@font-face {
    font-family: 'Architects-daughter';
	src: url('../02_Polices/Architects-daughter/architectsdaughter-webfont.eot');
    src: url('../02_Polices/Architects-daughter/architectsdaughter-webfont.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Architects-daughter/architectsdaughter-webfont.woff') format('woff'),
         url('../02_Polices/Architects-daughter/architectsdaughter-webfont.ttf') format('truetype'),
         url('../02_Polices/Architects-daughter/architectsdaughter-webfont.svg#Architects-daughter') format('svg');
}

html {
	/*font-size: 100%;
    line-height: 100%;*/
	background-color: #dedab3;
}

body {
	margin: 0px auto 0px auto;
	padding: 0;
	width: 100%;
	overflow-y: scroll;
}



p, a, li, button {
	font-family: 'Architects-daughter',sans-serif;
}

p, button {font-size: 1.1em;}

p.standard {
	font-family: sans-serif;
	font-size: 1.1em;
	text-align: left;
}
.centre {text-align: center;}
.erreur {color: #FF0000;}

ul.zone_liste_event {
	text-align: left;
	margin: 0;
	padding: 0;
	width: 100%;
}

li.liste_event {
	display: inline-block;
	padding: 10px;
	margin: 1.5%;
	width: 20%;
	vertical-align: top;
}

li.liste_event, li.liste_event a {
	font-family: sans-serif;
	font-size: 1.1em;
	text-align: left;
	text-decoration: none;
}

li.liste_event a:link, li.liste_event a:active, li.liste_event a:hover, li.liste_event a:visited { color: rgb(200,0,150); text-decoration: none; }

li.liste_event:hover {
	background-color: rgba(255,255,255,0.5);
	border-radius: 10px;
}

.date {font-weight: bold;}

/*Formulaire*/
form {position: relative; margin: 0 auto 0 auto; padding: 0 2% 1em 2%; text-align: left;}
label {display: inline-block; width: 20%;}
.cadre_form {border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; padding: 0.5em 1% 0.5em 1%;}

.champs { position: relative; margin: 0.5em 2% 0.5em 2%; padding: 0.25em 1% 0.25em 1%; line-height: 1em; font-size: 1.15em; border: 2px solid #000000; border-radius: 0.5em;}
.chtext:focus { border-color: rgb(200,0,150); }
.chtitre { width: 50%;}
.dynjs {border-radius: 0.5em 0 0 0.5em;}

div.artInfoCompte {width: 50%; margin: 1em auto 1em auto; padding: 1em 3% 1em 3%; border: 1px solid #000000;}
div.artInfoCompte p, div.artInfoCompte ul, div.artInfoCompte li {text-align: left;}

/*Definition des cadre des pages*/
header.gen {
	position: relative;
	display: flex;
	justify-content: space-between;
	background-color: #A7A37E;
	padding: 0;
	margin: 0;
	height: 6em;
}
header.gen div.zone_logo {width: 70%;}
header.gen h2 {
	color: #FFFFFF;
	margin: 0;
	padding: 0 0 0 5%;
	line-height: 2em;
	font-size: 3em;
	font-style: italic;
	/*background-color: #000088;*/
}

header.gen div.zone_menu {
	position: relative;
	width: 30%;
	
}


/*Menu gen*/
ul.menu_gen {
	display: block;
	position: relative;
	width: 100%;
	height: 6em;
	text-align: right;
	padding: 0;
	margin: 0;
	z-index: 2;
}
ul.menu_gen a:link, ul.menu_gen a:visited {
	display: block;
	width: 100%;
	color: rgb(101,71,35);
	color: #000000;
	text-decoration: none;
	pointer: cursor;
}
ul.menu_gen a:hover, ul.menu_gen a:active {
	color: #FFFFFF;
}
li.pn0 {
	display: inline-block;
	position: relative;
	width: 50%;
	height: 6em;
	line-height: 6em;
	color: rgb(101,71,35);
	color: #000000;
	text-align: center;
	margin: 0;	
	padding: 0;
	overflow: none;
}

li.pn0:hover{
	color: #FFFFFF;
	background-color: rgb(101,71,35);
}
li.pn0:hover a {
	color: #FFFFFF;
}
li.pn0:hover ul.ss_menu_gen {
	display: block;
	height: auto;
	transition: height 2s linear;
}
ul.ss_menu_gen {
	display: none;
	position: absolute;
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;	
}

ul.ss_menu_gen a{
	display: block;
	width: 90%;
	padding-left: 5%;
	line-height: 3em;
}

ul.ss_menu_gen a:link, ul.ss_menu_gen a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
ul.ss_menu_gen a:hover, ul.ss_menu_gen a:active {
	color: #000000;
	background-color: #A7A37E;
}
li.pn1 {
	position: relative;
	color: #FFFFFF;
	text-align: left;
	background-color: rgb(101,71,35);
	list-style:none;
}

/*Menu édition*/
#ZoneEditElmt {display: bock; position: absolute; width: 100%; top: 0; left: 0; /*border: 1px solid #000000;*/}
button.bt_medit {display: block; position: absolute; top: 0; left: 0; font-size: 4em; color: #FFFFFF; background-color: #000000; text-decoration: none; border: none; border-radius: 0 0 5em 0; padding: 0 2% 0 0; line-height: 1em; cursor: pointer;}
ul#MenuEditElmt {display: none; margin: 0; padding: 4em 0 0 5%; text-align: left; overflow: hidden;}
ul#MenuEditElmt li { list-style: none; margin: 0.3em; padding: 0.5em;}
ul#MenuEditElmt li button {cursor: pointer; font-size: 0.95em; color: #000000; background-color: #A7A37E; padding: 0.5em; border-radius: 0.5em; box-shadow: 0.25em 0.25em 10px #000000; border: 2px solid #FFFFFF;}
ul#MenuEditElmt li button:hover { color: #FFFFFF; background-color: #000000;}
span.lienElmtConfirmEdit, a.lienElmtConfirmEdit, a.lienElmtConfirmEdit:hover {display: block; line-height: 2.1em; font-size: 2em; margin: 1em auto 1em auto; padding: 0.5em; background-color: #00FF00; color: #FFFFFF; text-decoration: none; border-radius: 1em;}
/*Bouton ajout centrale dans corps affichage*/
div.cadreBtAjout {width: 100%;}
button.btajout {height: 128px; padding: 0.5em 1em 0.5em 135px; margin: 2.5em auto 1.5em auto; cursor: pointer; border-radius: 1em;}
button.PlusPhotos {background: url(../01_Fond/icone_ajout_photos.png) no-repeat left; background-size: 128px 128px;}
button.PlusVideos {background: url(../01_Fond/icone_ajout_videos.png) no-repeat left; background-size: 128px 128px;}
button.PlusEvent {background: url(../01_Fond/icone_ajout_evenement.png) no-repeat left; background-size: 128px 128px;}
button.btajout:hover {background-color: #000000; color: #FFFFFF;}

/*Formulaire ajout élément*/
button.bt_new_elmt, input.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;
}


article.menu_elmt {
	position: relative;
	width: 90%;
	padding: 1em 5% 1em 5%;
	background-color: rgba(255,255,255,0.5);
}

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




header.entete_galerie {
	position: relative;
	display: block;
	width: 21%;
	min-height: 800px;
	margin: 0 0 0 0;
	padding: 1em 2% 1em 2%;
	background-color: #FFFFFF;
}

header.entete_galerie h1.titreg, article.galerie_mini h2.titreg {
	font-family: 'Architects-daughter',sans-serif;
	font-size: 2.5em;
	color: rgb(200,0,150);
	text-shadow: 3px 3px 0px #000000;
	margin: 0;
	padding: 0;
	background-color: none;
}
header.entete_galerie h1.titreg {text-align: left;}


header.entete_galerie h2 {
	position: relative;

	left: 80px;
	font-size: 1.8em;
	color: #000000;
	text-align: left;
	margin: 0;
	padding: 0;
}

header.entete_galerie a, article.galerie_mini a {text-decoration: none;}

header.entete_galerie img {display: block; width: 70%; margin: 1em auto 1em auto;}

article.galerie_mini {display: block; position: relative; width: 19%; background-color: #FFFFFF; padding: 1em 2% 1em 2%; margin: 0.5em 0.5% 0.5em 0.5%; border-radius: 1.5em;}

article.galerie_mini img {display: block; width: 50%; margin: 0 auto 0 auto;}

section.flex, article.flex, div.flex, p.flex {
	position: relative;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

section.flexcenter, article.flexcenter, div.flexcenter, p.flexcenter {
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	/*border: 1px solid #000000;*/
}

.main_content {
	position: relative;
	text-align: center;
	/*padding-bottom: 4em;*/
}

.liste_gal {padding-bottom: 6em;}

.main_content h1.ttheme, .main_content h2.ttheme {
	display: inline-block;
	padding: 0.25em 5% 0.25em 5%;
	margin: 0.5em auto 0.5em auto;
	color: #FFFFFF;
	font-size: 2.15em;
	font-style: italic;
	text-shadow: 2px 2px 0px #000000;
	background-color: rgb(200,0,150);
	border-radius: 2em;
}

/*===== AFFICHAGE ACTUALITE GALERIES ====*/
article.actugal { position: relative; text-align: left; padding: 0.25em 0 0 3%; background-color: rgba(255,255,255,1); border-bottom:  3px solid #A7A37E; overflow: hidden; 
	
	
	
}
article.actugal p {}
article.actugal p.first {border-bottom: 2px solid #dedab3; padding-bottom: 0.5em; margin-right: 3%; margin-bottom: -0.25em}
article.actugal .date_news { font-weight: bold;}
article.actugal .lien_messages { text-align: right; }
article.actugal a:hover { text-decoration: none; }
button.icoplus {display: inline-block; cursor: pointer; position: absolute; top: 0; right: 0; padding: 0 2% 0 2%; margin: 0; border: none; color: #FFFFFF; text-decoration: none; background-color: #A7A37E; border-radius: 0 0 0 1em;}
button.icoplus:hover {background-color: #dedab3; color: #000000;}
div#all_coms{height: 1px; padding-right: 3%; overflow-y: scroll; -webkit-transition: height 2s; /* Safari */
    transition: height 2s;

	}
/*====== AFFICHAGE ELEMENTS =====*/
#elmtctnt {padding: 0; margin: 0;}
article.galery_content {
	display: block;
	position: relative;
	width: 75%;
	padding-bottom: 5em;
}

div.elmnt_tree {
	position: relative;
	background-color: #000000;
	border-bottom: 3px solid #A7A37E;
}
div.elmnt_tree p { text-align: left; margin: 0; color: #FFFFFF; }
div.elmnt_tree a:link, div.elmnt_tree a:visited  {
	text-decoration: none;
	color: #FFFFFF;
	padding: 0.25em 0.5% 0.25em 0.5%;
}

div.elmnt_tree a:hover, div.elmnt_tree a:active{
	color: #FFA500;
}

div.liste_elmnt {}

div.art_theme {
	position: relative;
	width: 28%;
	padding: 0.5em 1% 0.5em 1%;
	margin: 1em 1.5% 0.5em 1.5%;
	background-color: rgba(255,255,255,0.5);
	border-radius: 1em;
}

a.art_event {
	position: relative;
	display: block;
	width: 17%;
	padding: 0 1% 0.5em 1%;
	margin: 2em 0.5% 0.5em 0.5%;
	background-color: rgba(240,240,250);
	border-radius: 1em;
	text-decoration: none;
	color: rgb(200,0,150);
	/*overflow: hidden;*/
}
p.date_event {width: 110%; top: 0; margin: 0 auto 0 -5%; background-color: #000000; color: #FFFFFF;}

p.newtag {display: block; position: absolute; top: 0.5em; right: 0.5em; margin: 0 auto 0 auto; padding: 0; width: 15px; height: 15px; border: 1px solid #000000; background-color: #00FF00; border-radius: 10px; cursor: pointer;}

p.zone_ico_media {
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
}
a.lmedphot, a.lmedvid {
	display: block;
	height: 2em;
	width: 25%;
	font-size: 1em;
	text-align: left;
	text-decoration: none;
	color: #000000;
	padding: 0.5em 0 0 60px;
}

a.lmedphot {background: url(../01_Fond/image-photo-icone-6295-48.png) no-repeat;}
a.lmedvid {background: url(../01_Fond/appareil-photo-video-icone-6186-48.png) no-repeat;}

div.lmedphot, div.lmedvid {
	display: block;
	position: absolute;
	top: -1em;
	left: 0;
	height: 4em;
	width: 4em;
	color: #000000;
	padding: 0;
	background-size: contain;
	border-radius: 25% 25% 25% 0;
}

div.lmedphot {background: url(../01_Fond/image-photo-icone-6295-48.png) no-repeat center, rgba(240,240,250); background-size: 70%;}
div.lmedvid {background: url(../01_Fond/appareil-photo-video-icone-6186-48.png) no-repeat center, rgba(240,240,250); background-size: 70%;}

p.com_event {width: 90%; margin: 0 auto 1.5em auto;}

article.ctnstd {width: 70%; margin: 1em auto 1em auto; padding: 0 0 1em 0; background-color: rgba(255,255,255,0.5); border-radius: 1em; }
article.ctnstdcadre {width: 70%; margin: 1em auto 1em auto; padding: 1em 0 1em 0; background-color: rgba(255,255,255,0.5); border-radius: 1em; }
article.colmajeur {margin-left: 0; margin-right: 0;}
article.ctnstd h2 {padding: 1em 0 0.5em 0; margin: 0 auto 1.5em 0; border-bottom: 2px double #FFFFFF;}

table.tbl_form {width :80%; margin: 1em auto 1em auto; background-color: #A7A37E; margin-bottom: 1em;}

table.tbl_form td {padding: 0.5em 2% 0.5em 2%;}

td.trlabel {width: 30%;}

/*Liste de contact*/
div.annuaire {
    position: relative;
    /*width: 12em;*/
	margin: 1em 0.5% 1em 0.5%;
    background-color: #FAEBD7;
    border: 1px solid #A0522D;
    border-radius: 1em 1em 0 0;
    padding: 0;
	overflow: hidden;
}

div.annuaire .cadre_ctc {margin: 0; padding: 0 1% 0.5em 1%;}
div.annuaire h2 { font-size: 1.2em; color: #FFFFFF; text-align: center; margin: 0; padding: 0.25em 0 0.25em 0; background-color: #A0522D;}
div.annuaire p{ font-size: 0.95em; text-align: left; padding: 0.25em 5% 0.25em 5%; border-radius: 0.5em; cursor: pointer;}
div.annuaire p.p25 {display: block; width: 23%; font-size: 0.9em; font-family: sans-serif; padding: 0.25em 1% 0.25em 1%; word-wrap: break-word;}
div.annuaire p.ctcnamefield:hover { background-color: rgba(255,255,255,1); }
div.annuaire span.ctc_name { font-weight: bold; font-size: 0.95em;}
div.annuaire span.ctc_email {font-style: italic; font-size: 0.85em;}
p.ctcSelect {background-color: #00FF00;}
span.suppctc {cursor: pointer; color: #FFFFFF; background-color: #000000; border-radius: 1em 1em 1em 1em; padding: 0 1% 0 1%; line-height: 1em; font-size: 1.1em; margin: 0 0 0 -1%; top: -0.25em;}
span.suppctc:hover {color: #FF0000; background-color: #FFFFFF;}
div.zmailctc {display: inline;}

footer {
	width: 100%;
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 1em 0;
	border-top: 3px solid rgba(75,48,42,255);
	background-color: #696969;
	z-index: 3;
}
div.titrefooter {text-align: center;}
div.flexfooter {display: flex; justify-content: space-around; padding: 0; margin: 0;}

footer article.artfoot {display: block; width: 25%; padding: 0 3% 5em 3%; margin: 0; background-color: rgba(255,255,255,0.3);}
footer p, footer h2 {color: #FFFFFF; padding: 0;}
footer h2 {text-align: center; margin-bottom: 2em; font-style: italic;}
footer p {font-size: 1.1em;}

footer a {padding: 0; margin: 0;}
footer a:link, footer a:visited{ color: #000000; text-decoration: underline; }
footer a:hover, footer a:active { color: #000000; text-decoration: none; }



/*Affichage mobile*/
@media screen and (max-width: 1000px) {
	p, button {font-size: 1.8em;}
	ul.menu_gen {display: none;}
	header.entete_galerie { display: none;}
	article.galery_content { width: 100%;}
	div.elmnt_tree { border-bottom: 6px solid #A7A37E; }
	div.elmnt_tree p { font-size: 1.8em; line-height: 2.2em;}
	
	
	div.art_theme {
	width: 45%;



}

a.art_event {

	width: 45%;


	
}

}