/************************************************************/
/*		La Campagne de JDR Grace&Gracen							*/
/*		http://laelith.fr/JDR					*/
/************************************************************/

body {
				background-color:#fff;
				--bgcolor: #fff;
}


a:hover { color: #f22; }


/*		Titre 		*/

#Titre {	width: 45% ;
	float:left;
	Padding:10px;
	margin-top:10px;
	text-align:left;
	border: 1px solid black;
	background-color:var(--bgcolor);
}
@media screen and (max-width: 800px) {#Titre {	width: 100% ; float:none;}}
#Titre h1 { font-size:200%; text-align:left; }
#Titre span { font-style:bold; font-size:1.6em; float:left; }

.at {height:1em; margin:0px; vertical-align: text-top;}


/*		   Le cartouche en haut  de la pagede garde		*/
#cartouche {
	float:right;
	width: 50% ;
	height: 350px ;

	text-align:left;
	border: 1px solid black;
	margin:10px ;
}

/*  @media screen and (max-width: 800px) {#cartouche { 	display:none;  }}  */

#cartouche img {	float:right;}


/*******************************/
/*		Menu Horizontal 		*/
/*******************************/
.menuh { 
 float:left;
 width:32%;
 text-align: center;
 margin-bottom:20px;
 margin-right:10px;
 padding:2px;
/*border: 1px solid red;  debug mode*/
}
@media screen and (max-width: 1200px) { .menuh {			font-size:100%;			margin-right:4px;	}}
@media screen and (max-width: 800px) { .menuh {    width:100%;			font-size:70%;		}}




.MenuList  { 
 /*border:1px solid #fee;*/
 margin:0px;
 padding: 0px;
 text-align: center;
}

.MenuList li {
 list-style: none;
 text-align: left;
	border: 1px solid grey;
 border-radius: 10px;
	background-color:var(--bgcolor); 
 margin-top:5px;
	font-size:20px;
}
@media screen and (max-width: 1200px) {
.MenuList li {
		font-size:16px;
		margin-top:2px;

	}
}
@media screen and (max-width: 800px) {
.MenuList li {
		font-size: 17px ;
		margin-top:2px;
	}
}

.MenuList li:hover {
  background-color:#fff6f6;
}
.MenuList li a {
 display:block;
}



.MenuHeader {
 display:block;
 border: 2px solid black;
	background-color:var(--bgcolor); 
 border-radius: 20px;
 margin: 0px 0px 10px 0px ;
 padding: 0px;
 color:#000;
}
@media screen and (max-width: 1200px) {
.MenuHeader {
			margin: 0px ;	
			height:110px;
			margin-top: 20px ;
	}
}
@media screen and (max-width: 800px) {
.MenuHeader {
		font-size:165%;
		height:90px;
	}
}

.MenuHeader a {
	display:block;
	height:110px;
}
.MenuHeader a .valueT {
	font-size: 170%;
	font-weight: bold;
}
.MenuHeader a .keyT {
	font-size: 100%;
 color:black;
}



.MenuHeader > a > img {
	height:120px ;
	float:left ;
}
@media screen and (max-width: 1200px) {
	.MenuHeader > a > img {height:90px ;}
}

.MenuHeader p { margin:10px 0px 15px 0px ; }
@media screen and (max-width: 1200px) {
	.MenuHeader p { margin:0px 0px 15px 0px ; }
}

.MenuHeader:hover {
  background-color:#fff6f6;
} 


/***************************/
/*      Menu vertical      */
/***************************/

.menuv  { 
 margin: 0px;
 padding: 0px;
 width:300px;
 float:left;
}
@media screen and (max-width: 1200px) {
 .menuv  { 
  width:250px;
 }}
@media screen and (max-width: 800px) {
.menuv  { 
  width:350px;
		display:none;
 }}

.menuv  h2 { 
 background-color: #333;
 color: #fff;
 font-size: 2em;
 font-weight: bold;
 padding:10px 0px;
 margin:0px;
}

.menuv p {
 font-family: sans-serif;
 padding:3px 0px;
 margin:0px;
}

.menuv ul {
	border: 0px solid black;
	margin:0px;
	padding:0px;
}

.menuv li {
	list-style: none;
	text-align:left;
 border-top : 0px solid black;

}
.menuv li > a {
	display: block;
	font-size:110%;
	font-family : "Arial Unicode MS", Arial ;
	width: 100%;
 margin: 0px ;
 color:#000;	
}
.menuv li.border {
	border : 1px solid black; 
	border-top: 0px;
}
.menuv li.noborder a {
 height:70px;
	vertical-align: middle;
}
.menuv li a:hover {
  background-color:#f9eeee;
} 



.menuv li.subtype {
	border: 0px solid #000;
	border-bottom : 1px solid black;
	padding-top:8px;
 background-color:#fff;
	font-family:sans-serif;
	color:#999;
}
/**/




/*****************************/
/* Le formulaire de connexion  */
/****************************
.titre input {
	background-color:#555;
	color:#999;
	border:1px solid #999;
}*/

/*****************************/
/*         L'article         */
/*****************************/
.catdesc {
	float:left;
	font-family:sans-serif;
	color:#999;
	padding:3px;
	width:300px;
	margin:80px 0px 0px 50px;
}
article {
	width:880px; 
	border: 1px solid black;
	background-color:var(--bgcolor);
	font-family:sans-serif;
 font-weight:normal;
	text-align:left;
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float:left;    
}
@media screen and (max-width: 1200px) {
 article {
  width:537px;  
 }}
@media screen and (max-width: 800px) {
 article {
  width:99%;
  border: 1px solid #fee;
  border-radius: 0px;
  margin:5px;
}}
article .titre {
	height:20px;
	text-align:right;
	font-weight:normal;
	font-size: 80%;
	background-color:#333;
	color:#999;
	padding:3px;
}

article #corps  {
	padding:5px;
}



article h2 {
	font-family: "Merriweather", Georgia, "Times New Roman", serif;
	font-size: 180%;
	font-style:italic;
	text-align:center;
	margin: 0px 0px 10px 0px;	padding: 0px;
}

article h3 {
	font-family: "Merriweather", Georgia, "Times New Roman", serif;
	font-size: 160%;
	margin: 0px 0px 0px 0px; 	padding: 0px;
}

article h4 {  
	font-family: "Merriweather", Georgia, "Times New Roman", serif;
	font-size: 120%;
	margin: 0px 0px 0px 0px;	padding: 0px;
}

article iframe {
	border: 1px solid #000 ;
	width:100%; height:500px; overflow:auto;
}

iframe .small {	width:50%; height:250px; overflow:auto;}


 
article .icone {
 height:30px; vertical-align: middle;
}






/*  		Les images  							 */
article figure {
	float:right;
	margin:0px 0px 0px 10px; 
}
@media screen and (max-width: 1200px) {
	article figure {float:none;}}
	
.puce  {width:54px;}
@media screen and (max-width: 800px) {.puce  {width:40px;} }

article img 	{ margin-left:5px;}
.fullimg 		{ margin:auto; width:97%; clear:both;}	
.responsive30 	{ float:right; width:30%;}
.responsive50 	{ float:right; width:49%;}
@media screen and (max-width: 800px) {
	.responsive30, .responsive50 { width:97%; clear:both; margin-bottom:10px;}
	.v { width:50%;}
}
.clear {display:block; clear:both; margin-bottom:10px;} 




/*    			Un Article						*/
Article section {
	float:right;
	width:30%;
	color:#559;
	border: 1px solid #cce ;
	background-color:#f9f9ff;
	font-size: 80%;
	margin:10px;
	padding:10px;
}

Article section a {
	color:#57c;
	text-decoration:underline;
}
Article section a:hover {
	color:#55f;
}


/*    Les citations en bleu		*/
Article blockquote {
	float:left;
	width:48%;
	color:#559;
	border : 1px solid #cce ;
	background-color:#f9f9ff;
	padding:5px;
	margin:0px 0px 0px 5px;
	font-size:0.9em;
}
Article blockquote span {
font-size:150%;
}

@media screen and (max-width: 12000px) {
		Article blockquote  {font-size:0.8em; }}
@media screen and (max-width: 800px) {
		Article blockquote  {font-size:0.65em; }}

Article q {
	display:block;
	overflow:hidden;
	quotes : none;
	color:#369;
	border : 2px solid #369 ;
	padding:3px;
	background-color:#f0f9ff;
}

Article q em {
 color:#039;
}

Article q i {
	color:#000;
}
Article q i em {
 color:#321;
}

Article cite {
	font-weight:600;
 color:#039;
	border : 1px solid #9df ;
	background-color:#f0f9ff;
}
Article strong {
	display:inline;
	font-weight:600;
 color:#930;
 font-family: "Merriweather", Georgia, "Times New Roman", serif;
	border : 1px solid #fd9 ;
	background-color:#fff9f0;
}
Article em {
 color:#631;
	font-weight:600;
	font-style: normal;
 font-family: "Merriweather", Georgia, "Times New Roman", serif;
	}

Article c {	
 font-weight:600;
 color:#039;
	border : 1px solid #9df ;
	background-color:#f0f9ff;
}

small {
	color:#666;
}


.blink {
  animation: blink 1s infinite;
}
@keyframes blink { 
  0% { opacity:0; }
  50% { opacity:1; } 
  100% { opacity:0; }
}


/*		les lignes de séparations			*/
article hr {clear:both;}


/*		Warning : Article en travau 		*/
article .warning {
	color:#ea7;
	background-color:#ffc;
	margin:0px;
	text-align:center;
	padding:5px;
}
article .warning img {
	margin:0px;
}



/*   L'illustration automatique */
article .illus {
	width:100%;
}

/* Quelques classes utiles en toute circonstances */
.floatright {float:right}


/*   La description du concept de la boite a outil (page de garde) */
.desc {
 font-family: sans-serif;
 margin: 0px auto 10px auto;
 text-align: center;
	clear:both ;
}


/************************************/
/*    Le lecteur audio     */
/************************************/

audio { height:24px; vertical-align:middle; background-color:#fff; margin:3px 6px 3px 0px;}
audio:hover {transform: scale(1.01);filter: drop-shadow(2px 2px 2px #aaa);}


/************************************/
/*    Le Footer     */
/************************************/
footer {
	clear:both;
	font-family:sans-serif;
	color:#ccc;
	width:100%;
	height:100px;
}



/************************************/
/*    L'edition en frontOffice     */
/************************************/



a.edit {
	float:right;
	margin:5px;
	font-family: Sans-Serif;
	color:#090;
	font-weight:bold;
	/*font-size:6px;*/
}



.order {
	float:left;
}

.order a.edit {
	float:none;
	margin:0px;
}

.info {
	font-familly:Arial; 
	font-size:20px;
	color:grey;
}



.form {
	font-size : 200% ;
}

.form h1{
	margin:0px;
}
.form td:first-child {
	text-align:right;
	font-weight :bold;
	width:150px;
}
.form td{
	text-align:left;
	vertical-align:top;
	margin:0px;
	padding:5px;
}

select, input, textarea {
		font-size : 100% ;

}


/* La fonction print_a   */
.joli {
	margin: 5px ; 
}

.joli td {
	border: 1px solid black ; 
}