@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import url(//fonts.googleapis.com/css2?family=Open+Sans&display=swap);


 *{ margin:0; padding:0; box-sizing: border-box;} 
 
html {width: 100%; background-color: #0F079C;} 
.espace{margin-top: 0px; margin-bottom: 0.1px;}

#badge { margin-left:15px; color:yellow; padding:4px;
  width: 150px;
  height: 150px;
  background: red;
  border-radius: 50%;
}
 
body {display:flex; flex-flow: row wrap;  justify-content: center; width: 98%; background-color: #0F079C;
  	font-family: "Helvetica Neue", Helvetica, Serif, Arial, Monospace, curcive,;
 /* font-size: 12px;  font-size: 3em; margin-left:1%; margin-right:1%; background: #87CEEB; */ color: black;
  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
  
  /* icon_burger 
  transition-property:translateX();
  transition-duration:0.3s;
  */
} 

#icone_burger {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 3em;
}

/* Headings */

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.83rem; }
h6 { font-size: 0.67rem; } 
 
h1, h2, h3, h4, h5, h6 {
            color: blue;
       /*     text-align: left;   */
	 
}

h1 {
   font-size: 4rem;
  font-family: serif;
  text-align: center;
  color: black;
  
  /* Text Shadow Property */
  text-shadow: -1px -1px 0 White, 1px -1px 0 White, 1px 1px 0 White,
    1px 1px 0 White;

}

.ecriture1 {text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
			   }
			 
.ecriture2 {text-shadow:
  1px 1px 2px red,
  0 0 1em blue,
  0 0 0.2em blue;}
/* https://html-css-js.com/css/generator/box-shadow */  
#demotext1{
text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 2px 2px 2px rgba(206,89,55,0);
color: #bc2e1e;
background: #edde9c;
}
#demotext2{
color: #202c2d;
background: #FFFFFF;
text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5;
color: #202c2d;
background: #FFFFFF;
}
#demotext3{
color: #92a5de;
background: #FF0000;
text-shadow: 0px 0px 0 #899CD5, 1px 1px 0 #8194CD, 2px 2px 0 #788BC4, 3px 3px 0 #6F82BB, 4px 4px 0 #677AB3, 5px 5px 0 #5E71AA, 6px 6px 0 #5568A1, 7px 7px 0 #4C5F98, 8px 8px 0 #445790, 9px 9px 0 #3B4E87, 10px 10px 0 #32457E, 11px 11px 0 #2A3D76, 12px 12px 0 #21346D, 13px 13px 0 #182B64, 14px 14px 0 #0F225B, 15px 15px 0 #071A53, 16px 16px 0 #02114A, 17px 17px 0 #0B0841, 18px 18px 0 #130039, 19px 19px 0 #1C0930, 20px 20px 0 #251227, 21px 21px 20px rgba(0,0,0,1), 21px 21px 1px rgba(0,0,0,0.5), 0px 0px 20px rgba(0,0,0,.2);
color: #92a5de;
background: #FF0000;
}
#demo {
-webkit-box-shadow: 5px 5px 0px 0px #289FED, 10px 10px 0px 0px #5FB8FF, 15px 15px 0px 0px #A1D8FF, 20px 20px 0px 0px #CAE6FF, 25px 25px 0px 0px #E1EEFF, 5px 5px 15px 5px rgba(0,0,0,0); 
box-shadow: 5px 5px 0px 0px #289FED, 10px 10px 0px 0px #5FB8FF, 15px 15px 0px 0px #A1D8FF, 20px 20px 0px 0px #CAE6FF, 25px 25px 0px 0px #E1EEFF, 5px 5px 15px 5px rgba(0,0,0,0);
}

  
label {
  display: inline-block;
  color:black;
  margin-left: 10px;
  word-wrap : break-word ;
  white-space : pre-line ;
  
}
	
p {
color:black;
line-height : 1.3 ;
word-wrap : break-word ;
white-space : pre-line ;
padding-right: 10px;
padding-left: 10px;
font-size: 14px; 
}


dfn {
  font-style: italic;
}
audio, canvas, video {
  display: inline-block;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

	a{	display: inline-block;
        color:blue;
	   padding:4px 10px;
	   /* text-transform: uppercase; */
        text-decoration: none;
		list-style:none;
	}
	
/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video {
		max-width: 100%;
	}	
	
	/* gestion des mots longs */

	textarea,code,pre,samp,span,div {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé  */
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
code, kbd, pre, samp {
  font-size: 1em;
}

	table{margin-bottom:10px; width: 100%;}
	table, tr, td, th{border-collapse: collapse; border: 2px solid black;}
	td, th{padding:3px; text-align:left; margin: auto; color: black;}
			
	tr:hover{background-color: white;}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong, em {
  font-weight: bold;
}

ul ul, ol ul, ul ol, ol ol {

}

li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}


nput[type="file"] {
  font-size: 0.9em;
  padding-top: 0.35rem;
  color:black;
}
input[type=date]{
  background-color: yellow;
}
input[type=checkbox], input[type=radio] {
  vertical-align: middle;
}
input[type=checkbox],
 input[type=radio],
input[type=date],
input[type=time],
input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=tel]{
  display: inline-block;
  max-width:96%;	
  margin-left: 5px;
  padding: 5px 10px;
  transition: 180ms box-shadow ease-in-out;
  color: black;
  background-color:white;
  border: 1px solid #CCC;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius:10px;
  outline: none;
  
}

input[readonly] {
  border-style: dotted;
  cursor: not-allowed;
  color: #777;
}

input:required {
background: hsl(180, 50%, 90%);
border: 1px solid #999;
}

input[type=submit]:hover {
  background-color: #006666;
  color: #fff;
  border-color: #10c45c;
  box-shadow: none;
}

input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  height:2em;
}

input[type=text]:active,
input[type=number]:active,
input[type=email]:active,
input[type=password]:active,
input[type=tel]:active{
  border-color: #f0f2f5;
  outline: none;

}

input[type=date]:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus{
  background-color: gold;
 outline: 1px solid red;
 border-color: rgba(225, 1, 1, 0.75);
-moz-box-shadow: rgba(225, 1, 1, 0.75);
-webkit-box-shadow: rgba(225, 1, 1, 0.75);
box-shadow: rgba(225, 1, 1, 0.75);
}

input { line-height: normal;}

select {
	border-radius:10px;
    display: inline-block;
text-transform: none;
  max-width:96%;	
  margin-left: 5px;
  padding: 5px 10px;
  transition: 180ms box-shadow ease-in-out;
  color: black;
  background-color:white;
  border: 1px solid #CCC;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius:10px;
  outline: none;
}
select option {
	 padding:4px 10px;
    color:black;
    font-size:14px;
    font-weight:normal;
    background-color:white;
}

select:before {
    background-color:gray;
    font-size: 14px;
}

code {
 padding:4px 10px;
  font-size: 90%;
  color: #c7254e;
  white-space: nowrap;
  background-color: #f9f2f4;
  border-radius: 4px;
}

pre {
  display: block;
 padding:4px 10px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.428571429;
  color: #333333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  border-radius: 4px;
   white-space: pre-wrap;
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  border-left: 5px solid #eeeeee;
}

blockquote p {
  font-size: 17.5px;
  font-weight: 300;
  line-height: 1.25;
}

address {
  display: block;
  margin-bottom: 10px;
  font-style: normal;
  line-height: 1.428571429;
}


/*  hr:after {
    background: #fff;
    content: '§';
    padding: 0 4px;
    position: relative;
}
*/

/* Headings */

	/* conserver le ratio des images */
img {
		/* background-size: cover; height: auto;
		 background-size: cover;
		 max-width : 100%;
		 display : block ;
		 */
	}
	
img {
  vertical-align: middle;
}

/* Description Générale */
./* entete{position: relative; float:left; text-align:center; height:auto; width:calc(100% - 320px); padding-top:5px; margin-bottom: 1px;} */

.entetelogo{position: relative; float:left; height:140px; width: 170px; text-align:center; padding-top:5px; margin-bottom: 1px;}
.enteteslogan{position: relative; float:left; height:140px; width:calc(100% - 1200px); text-align:center; padding-top:5px; margin-bottom: 1px;}
.entetestruc{position: relative; float:right; height:140px; width:900px; text-align:center; padding-top:5px; margin-bottom: 1px;}
.entetestruc img { float: right;}
#slideshow { height:130px; width:130px;
		/*    padding: 10px;
		    box-shadow: 0 0 20px rgba(10,20,0,0.4);
			border:2px solid #0000FF;	*/
		}
#slidestruc { height:130px; width:867px;
			border:2px solid #0000FF;	
		}
.entete { display:flex; flex-flow: row wrap; width: 98%;  padding: 10px; background-color: white; border:2px solid black; margin-left:2px; margin-right:2px; }
.slogan{font-family: cursive; font-style: italic; font-size: 26px; padding:0px 20px; width:100%;}
.ombretext{position: relative; float:left; height:auto; width:100%;
  margin-bottom: 3px; padding: 10px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  color:#0F079C; /*  Bleu */
  text-align: center;
  letter-spacing: 5px;
  text-shadow: 0 2px 2px white, 
      -2px 5px 1px black, 
      -4px 8px 0px yellow; /*
     -6px 11px 0px #747474,  
      -8px 14px 0px #565656,
     -10px 17px 0px #343434,
      -12px 20px 0px #171717,
      -14px 23px 0px #000;
	  
  background: linear-gradient(to left top, black, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

	  */
}


		
.header {display:flex; flex-flow: row wrap; width:98%; padding: 10px; background-color: orange; border:2px solid transparent; /* justify-content: center; */ margin-left:2px; margin-right:2px; /* */ }
.container {display:flex; flex-flow: row wrap;  justify-content: center; align-items: stretch; gap: 20px; width:98%;  height: auto; padding: 10px; background-color: white; border:2px solid black; /* margin-left:2px; margin-right:2px;  */ }
.containerwhite {display:flex; flex-flow: row wrap;  justify-content: center; align-items: stretch; gap: 20px; width:98%;  height: auto; padding: 10px; background-color: white; border:2px solid black; /* margin-left:2px; margin-right:2px;  */ }
.containerblue {display:flex; flex-flow: row wrap;  justify-content: center; align-items: stretch; gap: 20px; width:98%;  height: auto; padding: 10px;  background-color: #0F079C; border:2px solid black; /* margin-left:2px; margin-right:2px;  */ }
.containeryellow {display:flex; flex-flow: row wrap;  justify-content: center; align-items: stretch; gap: 20px; width:98%;  height: auto; padding: 10px; background-color: #F7F055; border:2px solid black; /* margin-left:2px; margin-right:2px;  */ }
.containerlightgreen{display:flex; flex-flow: row wrap;  justify-content: center; align-items: stretch; gap: 20px; width:98%;  height: auto; padding: 10px; background-color: #98FF98; border:2px solid black; /* margin-left:2px; margin-right:2px;  */ }

.footer {display:flex; flex-flow: row wrap;  justify-content: space-around; align-items: stretch; gap: 20px; width:98%;  height: auto; padding: 10px; background-color: white; border:2px solid black; /* margin-left:2px; margin-right:2px;  */ }

.pensee{position: relative; float:left; color:black; width: 46%; height: 145px; background-color: white; border:5px solid #CCCCCC; padding-left: 10px; padding-top: 10px; margin-right: 10px;}
.pensee #buttonpense {position: absolute; top: 5px; left: 185px; width: 150px; height: 40px; line-height: 1px;text-align: center;}

.infos{position: relative; float:left; width: 47%; padding-left: 5px;  padding-right: 5px; margin-bottom: 10px; margin-left:10px; height: auto; border:2px solid #00BFFF;
	background: #6495ED;
    background: -moz-linear-gradient(#6495ED,  white);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, #6495ED));
    background: -webkit-linear-gradient(#6495ED,  white);
    background: -o-linear-gradient(#6495ED,  white);
    background: -ms-linear-gradient(#6495ED,  white);
    background: linear-gradient(#6495ED,  white);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999; }
/*********************** menugauche ****************************************/

/* The side navigation menu */

/*    */

 ul #nav { display:block; width:98%;
  list-style: none inside;
  text-align: center;
}

#nav li {
  display: inline-block;
  position: relative;
  float: left;
  border:2px solid white;
  background: #6495ED;
  /* menu background color */
}

#nav li a { 
  display: block;
  padding: 0;
  text-decoration: none;
  list-style:none;
  width: 140px;
  text-align:center;
  /* this is the width of the menu items */
  line-height: 35px;
  /* this is the hieght of the menu items */
  color: #ffffff;
  /* list item font color */
}


/* smaller font size for sub menu items */

#nav li:hover {
  background: black;
    border:2px solid yellow; /* tout ce qui est li à l'intérieur de #nav au survol*/
}


/* highlights current hovered list item and the parent list items when hovering over sub menues */


/* hides sub-sublists car il n'existe pas de sous-menu */

#nav li:hover ul ul {
  display: none;
  
}

#nav li:hover ul {
  display: none;
}


/* shows sublist on hover 

#nav li:hover ul {
  display: block;
 shows sub-sublist on hover 
  margin-left: 210px;
  this should be the same width as the parent list item 
  margin-top: -35px;
  aligns top of sub menu with top of list item 
}
  
#nav li li:hover ul {
  display: block;
  shows sub-sublist on hover 
  margin-left: 210px;
  this should be the same width as the parent list item 
  margin-top: -35px;
   aligns top of sub menu with top of list item 
}
  */
  /*     ******************************************************************************    */
  
.gauche, .principale, .droite {
			 display: flex;
			 flex-flow: column wrap;
			 padding: 10px; background-color: transparent; border:2px solid transparent; margin:2px;
			}
.gauche, .principale{ border-right:2px solid black;}

.gauche, .droite { width: 22%;}	
.principale { width: 49%;}

.div100 {position: relative; float: left; width: 100%;}
.div75 {position: relative; float: left; width: 70%; }
.div50 {position: relative; float: left; width: 48%;}
.div25 {position: relative; float: left; width: 24%;}


button {display: inline; padding: 4px 10px; margin-right: 8px; border: 1px solid #777; background: #ddd; color:#d04; border-radius: 5px;
  cursor: pointer;
  text-transform: none; line-height: normal; font-weight: bold;
  -webkit-appearance: button;
  box-shadow: 2px 2px 2px #888;
	-moz-box-shadow: 2px 2px 2px #888;
	-webkit-box-shadow: 2px 2px 2px #888;
	}
	
button:hover { color: black; }

.cmdr input{ padding: auto; margin-left:1em; margin-right:1em; width:7em; cursor:hand; display:inline-block; font-weight: bold; color: white; background-color: red; border: 2px solid white; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999;}
.cmd input{ padding: auto; margin-left:1em; margin-right:1em; width:7em; cursor:hand; display:inline-block; font-weight: bold; color: white; background-color: #566573; border: 2px solid white; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999;}
.cmdpanier input{ padding: auto; margin-left:1em; margin-right:1em; width:7em; cursor:hand; display:inline-block; font-weight: bold; color: white; background-color: #009973; border: 2px solid white; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999;}
.cmdremb input{ padding: auto; margin-left:1em; margin-right:1em; width:10em; cursor:hand; display:inline-block; font-weight: bold; color: white; background-color: #566573; border: 2px solid white; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999;}

.rouge{position: relative; float:left; padding:0 5px;   width: 95%; height: auto; color:white; border:1px solid black;  background-color:#d9534f; text-align:center; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999}
.vert {position: relative; float:left; padding:0 5px;  width: 95%; height: auto; color:white; border:1px solid black;  background-color:green; text-align:center; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999}
	
.presentation {display:flex; flex-flow: row wrap; width:98%; padding: 10px; background-color: white; border:2px solid white; /* justify-content: center; */ /* margin-left:2px; margin-right:2px; */ }
.profil {display:flex; flex-flow: row wrap;  justify-content: center; width:400px; padding: 10px; background-color: #00BFFF; border:2px solid green; /* justify-content: center; */ /* margin-left:2px; margin-right:2px; */ }

		/* Centrer l'image */
.imagemodele {display: flex; justify-content: center; }
.imagemodele img{height: 160px; width: 140px; margin-bottom:10px;}

.placeholder img{height: 80px; width: 80px; border-radius: 50%; display: inline-block;}
.placeholderfooter img{height: 30px; width: 30px; border-radius: 50%; display: inline-block;}
	
/* CONCEPTEUR */
.structure { position: relative; float:left; width: 48%; height: auto; padding: 4px 10px; margin-left:10px; margin-bottom:10px; color:black;  
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, green),color-stop(1, #2082AA)); 	
	background: #2082AA;
    background: -moz-linear-gradient(#2082AA,  green);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, green),color-stop(1, #2082AA));
    background: -webkit-linear-gradient(#2082AA,  green);
    background: -o-linear-gradient(#2082AA,  green);
    background: -ms-linear-gradient(#2082AA,  green);
    background: linear-gradient(#2082AA,  green);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999}   
.premieradmin{ position: relative; float:left; width: 32%; height: auto; padding: 4px 10px; margin-left:10px; margin-bottom:10px; color:black;  
				border:2px solid green; background-color:#2082AA; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999}  	

.premierconcepteur{ position: relative; float:left; padding-left: 5px; padding-right: 5px; margin-right: 15px; width: 33%; height: 250px; border:2px solid green; background-color:#DAF7A6; color: black;   border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999}  	


.para{  display:flex; flex-flow: row wrap; flex-basis: 47%;  gap: 20px;/*width: 47%; float:left; height: auto; margin:10px;*/   
border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, orange ),color-stop(1, #1E8449));
    color:black;
	background: orange;
    background: -moz-linear-gradient(orange,  lightgray );
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, lightgray ),color-stop(1, orange));
    background: -webkit-linear-gradient(orange,  lightgray );
    background: -o-linear-gradient(orange,  lightgray );
    background: -ms-linear-gradient(orange,  lightgray );
    background: linear-gradient(orange,  lightgray );
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; 
}
.personnel { position: relative; float:left; width: 48%; height: auto; padding: 4px 10px; margin-left:10px; margin-bottom:10px; border:2px solid #00BFFF; background-color:white; color: black;
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, Coral)); 
	background: Coral;
    background: -moz-linear-gradient(Coral,  white);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, Coral));
    background: -webkit-linear-gradient(Coral,  white);
    background: -o-linear-gradient(Coral,  white);
    background: -ms-linear-gradient(Coral,  white);
    background: linear-gradient(Coral,  white);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999; }   
.personnel label{ color: black; } 

.fonctions{   display:block; width: 47%; margin:10px;  float:left;/* flex-flow: row wrap;  flex-basis: 47%;  flex-grow: 1;flex-shrink: 1;  gap: 20px;  margin:10px; height: auto; */ 
border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, darkblue ),color-stop(1, #1E8449));
    color:black;
	background: darkblue;
    background: -moz-linear-gradient(darkblue,  lightgray );
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, lightgray ),color-stop(1, darkblue));
    background: -webkit-linear-gradient(darkblue,  lightgray );
    background: -o-linear-gradient(darkblue,  lightgray );
    background: -ms-linear-gradient(darkblue,  lightgray );
    background: linear-gradient(darkblue,  lightgray );
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; 
}

.abonnements{   display:block; width: 47%; margin:10px;  float:left;/* flex-flow: row wrap;  flex-basis: 47%;  flex-grow: 1;flex-shrink: 1;  gap: 20px;  margin:10px; height: auto; */ 
border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, orange ),color-stop(1, #1E8449));
    color:black;
	background: orange;
    background: -moz-linear-gradient(orange,  lightgray );
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, lightgray ),color-stop(1, orange));
    background: -webkit-linear-gradient(orange,  lightgray );
    background: -o-linear-gradient(orange,  lightgray );
    background: -ms-linear-gradient(orange,  lightgray );
    background: linear-gradient(orange,  lightgray );
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; 
}

.mandat{   display:block; width: 47%; margin:10px;  float:left;/* flex-flow: row wrap;  flex-basis: 47%;  flex-grow: 1;flex-shrink: 1;  gap: 20px;  margin:10px; height: auto; */ 
border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, green ),color-stop(1, #1E8449));
    color:black;
	background: green;
    background: -moz-linear-gradient(green,  lightgray );
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, lightgray ),color-stop(1, green));
    background: -webkit-linear-gradient(green,  lightgray );
    background: -o-linear-gradient(green,  lightgray );
    background: -ms-linear-gradient(green,  lightgray );
    background: linear-gradient(green,  lightgray );
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; 
}

.bleu {  position: relative; float:left; width: 47%; margin:10px;  color:black; border:2px solid #00BFFF;
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, Coral)); 
	background: #6495ED;
    background: -moz-linear-gradient(#6495ED,  white);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, #6495ED));
    background: -webkit-linear-gradient(#6495ED,  white);
    background: -o-linear-gradient(#6495ED,  white);
    background: -ms-linear-gradient(#6495ED,  white);
    background: linear-gradient(#6495ED,  white);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999; }  


.adminsuper {  position: relative; float:left; width: 47%; margin:10px;  color:black; border:2px solid #00BFFF;
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, Coral)); 
	background: #DAF7A6;
    background: -moz-linear-gradient(#DAF7A6,  white);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, #DAF7A6));
    background: -webkit-linear-gradient(#DAF7A6,  white);
    background: -o-linear-gradient(#DAF7A6,  white);
    background: -ms-linear-gradient(#DAF7A6,  white);
    background: linear-gradient(#DAF7A6,  white);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999; }  

	
/*  ADMINISTRATEUR  */

.categorie {  position: relative; float:left; width: 47%; margin:10px;  color:black; border:2px solid #00BFFF;
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, Coral)); 
	background: #DAF7A6;
    background: -moz-linear-gradient(#DAF7A6,  white);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, #DAF7A6));
    background: -webkit-linear-gradient(#DAF7A6,  white);
    background: -o-linear-gradient(#DAF7A6,  white);
    background: -ms-linear-gradient(#DAF7A6,  white);
    background: linear-gradient(#DAF7A6,  white);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999; }  
.categorieliste {  position: relative; float:left; width: 47%; margin:10px;  color:black; border:2px solid #00BFFF; 
	background: white;
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999; }  


.clients {  position: relative; float:left; width: 47%; margin:10px;  color:black; border:2px solid #00BFFF;
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, Coral)); 
	background: #449ADF;
    background: -moz-linear-gradient(#449ADF,  white);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, #449ADF));
    background: -webkit-linear-gradient(#449ADF,  white);
    background: -o-linear-gradient(#449ADF,  white);
    background: -ms-linear-gradient(#449ADF,  white);
    background: linear-gradient(#449ADF,  white);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999; }  
.clientsliste {  position: relative; float:left; width: 98%; margin:10px;  color:black; border:2px solid #00BFFF; 
	background: white;
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999; }  

.prix{ font-size:0.8em; margin-bottom:15px; text-align: center; color: black; padding-left: 5px; width: auto; height: auto; border:2px solid #1C6EA4; background-color:yellow;  border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999}  	
.prixdel{ font-size:0.8em; margin-bottom:15px; text-align: center; color: black; padding-left: 5px; width: auto; height: auto;}  	

.articles {  position: relative; float:left; width: 47%; margin:10px;  color:black; border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, #FFD700 ),color-stop(1, #1E8449));
    color:black;
	background: #FFD700;
    background: -moz-linear-gradient(#FFD700,  gray );
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, gray ),color-stop(1, #FFD700));
    background: -webkit-linear-gradient(#FFD700,  gray );
    background: -o-linear-gradient(#FFD700,  gray );
    background: -ms-linear-gradient(#FFD700,  gray );
    background: linear-gradient(#FFD700,  gray );
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999;
	}  
.articlesliste {  position: relative; float:left; width: 47%; margin:10px;  color:black; border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, #FFD700 ),color-stop(1, #1E8449));
	background: transparent;
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999; }  

.cadre {display:flex; flex-flow: row wrap;  justify-content: space-around; align-items: stretch; width: 100%;}
.catalogueaccueilnew {position: relative; float:left;  width: 48%; padding-left: 10px; margin-bottom:1em; border-left:3px dashed blue; border-bottom:2px solid blue;}
.catalogueaccueilnew:hover {background: lightgray;  border:2px solid yellow; /* tout ce qui est li à l'intérieur de #nav au survol*/ }

.catalogueaccueil {position: relative; float:left;  width: 48%; padding-left: 10px; margin-bottom:1em; border-left:3px dashed blue; border-bottom:2px solid blue;}
.catalogueaccueil:hover {background: #4DA6FF;  border:2px solid yellow; /* tout ce qui est li à l'intérieur de #nav au survol*/ }

.catalogue {position: relative; float:left;  width: 24%; padding-left: 10px; margin-bottom:1em; border-left:3px dashed blue; border-bottom:2px solid blue;}
.catalogue:hover {
  background: #4DA6FF;
    border:2px solid yellow; /* tout ce qui est li à l'intérieur de #nav au survol*/
}

.textunique{position: relative; float: left; line-height:16px; width: 100%; border-left:0px solid #FFF; 
background: transparent;
/*background: #FFF;
background: -moz-linear-gradient(left, #FFF 0%, #FFF 100%, #FFF 100%);
background: -webkit-linear-gradient(left, #FFF 0%, #FFF 100%, #FFF 100%);
background: linear-gradient(to right, #FFF 0%, #FFF 100%, #FFF 100%;)*/}
/*.textunique:hover{background: lightgray;
background: -moz-linear-gradient(left, lightgray 0%, lightgray 100%, lightgray 100%);
background: -webkit-linear-gradient(left, lightgray 0%, lightgray 100%, lightgray 100%);
background: linear-gradient(to right, lightgray 0%, lightgray 100%, lightgray 100%;)}
*/
.texthomme{position: relative; float: left; margin-left: 5px; line-height:16px; width: calc(100% - 180px); border-left:15px solid #C9FFE5; background: #339900;
background: -moz-linear-gradient(left, #7CB9E8 0%, #FFF 100%, #FFF 100%);
background: -webkit-linear-gradient(left, #7CB9E8 0%, #FFF 100%, #FFF 100%);
background: linear-gradient(to right, #7CB9E8 0%, #FFF 100%, #FFF 100%;)}

.textflash{position: relative; float: left; margin-left: 5px; line-height:16px; width: calc(100% - 180px); border-left:15px solid #C9FFE5; background: #339900;
background: -moz-linear-gradient(left, #7CB9E8 0%, #FFF 100%, #FFF 100%);
background: -webkit-linear-gradient(left, #7CB9E8 0%, #FFF 100%, #FFF 100%);
background: linear-gradient(to right, #7CB9E8 0%, #FFF 100%, #FFF 100%;)}

.textsolde{position: relative; float: left; margin-left: 5px; line-height:16px; width: calc(100% - 180px); border-left:15px solid #FFC95C; background: #339900;
background: -moz-linear-gradient(left, #C46210 0%, #FFF 100%, #FFF 100%);
background: -webkit-linear-gradient(left, #C46210 0%, #FFF 100%, #FFF 100%);
background: linear-gradient(to right, #C46210 0%, #FFF 100%, #FFF 100%;)}

.textpromotion{position: relative; float: left; margin-left: 5px; line-height:16px; width: calc(100% - 180px); border-left:15px solid #C9FFE5; background: #339900;
background: -moz-linear-gradient(left, #1C6EA4 0%, #FFF 100%, #FFF 100%);
background: -webkit-linear-gradient(left, #1C6EA4 0%, #FFF 100%, #FFF 100%);
background: linear-gradient(to right, #1C6EA4 0%, #FFF 100%, #FFF 100%;)}

.textarrivage{position: relative; float: left; margin-left: 5px; line-height:16px; width: calc(100% - 180px); border-left:15px solid #C9FFE5; background: #339900;
background: -moz-linear-gradient(left, #006600 0%, #FFF 100%, #FFF 100%);
background: -webkit-linear-gradient(left, #006600 0%, #FFF 100%, #FFF 100%);
background: linear-gradient(to right, #006600 0%, #FFF 100%, #FFF 100%;)}


.articlecadre1 {background: #CE5937;
background: -moz-linear-gradient(top, #CE5937 0%, #1C6EA4 100%, #C59237 100%);
background: -webkit-linear-gradient(top, #CE5937 0%, #1C6EA4 100%, #C59237 100%);
background: linear-gradient(to bottom, #CE5937 0%, #1C6EA4 100%, #C59237 100%);}   
/* bleu : #1C6EA4   ;   orange : #C59237  ; Rouge : #CE5937    */
.articlecadre2 {background: #CE5937;
background: -moz-linear-gradient(top, #CE5937 0%, #1C6EA4 0%, #C59237 100%);
background: -webkit-linear-gradient(top, #CE5937 0%, #1C6EA4 0%, #C59237 100%);
background: linear-gradient(to bottom, #CE5937 0%, #1C6EA4 0%, #C59237 100%);}  
.articlecadre3 {background: #CE5937;
background: -moz-linear-gradient(left, #CE5937 0%, #1C6EA4 100%, #C59237 100%);
background: -webkit-linear-gradient(left, #CE5937 0%, #1C6EA4 100%, #C59237 100%);
background: linear-gradient(to right, #CE5937 0%, #1C6EA4 100%, #C59237 100%);}  

.iepp { position: relative; float:left; width: 47%; height: auto; margin:5px; color: #0F079C; 
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, #0F079C),color-stop(1, #00BFFF)); 	
	background: #6495ED;
    background: -moz-linear-gradient(#6495ED,  #0F079C);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #0F079C),color-stop(1, #6495ED));
    background: -webkit-linear-gradient(#6495ED,  #0F079C);
    background: -o-linear-gradient(#6495ED,  #0F079C);
    background: -ms-linear-gradient(#6495ED,  #0F079C);
    background: linear-gradient(#6495ED,  #0F079C);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999;}   
.iepp label{ color: white; }

.activite { position: relative; float:left; width: 47%; height: auto; margin:5px; color: black; 
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, black),color-stop(1, #00BFFF)); 	
	background: white;
    background: -moz-linear-gradient(white,  black);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, black),color-stop(1, white));
    background: -webkit-linear-gradient(white,  black);
    background: -o-linear-gradient(white,  black);
    background: -ms-linear-gradient(white,  black);
    background: linear-gradient(white,  black);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999;}   
.activite label{ color: white; }


.admin{position: relative; float:left; margin-right: 10px; margin-bottom: 10px; width: 47%; height: auto; background-color:white; color: black; }  
	
.facturecliappercu{ display:flex; flex-flow: row wrap;  justify-content: center; align-items: stretch; width: 47%; margin:10px;  color:black; border:2px solid #00BFFF; 
	background: white;
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999;} 
	
.factureclient{position: relative; float:left; padding-left: 5px;  padding-right: 5px; margin-bottom: 10px; margin-left: 5px; width: 47%; height: auto; color: black;  
	border:2px solid #00BFFF; 
	background:#4169E1; 
    background: -moz-linear-gradient(#4169E1,  black);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, black),color-stop(1, #4169E1));
    background: -webkit-linear-gradient(#4169E1,  black);
    background: -o-linear-gradient(#4169E1,  black);
    background: -ms-linear-gradient(#4169E1,  black);
    background: linear-gradient(#4169E1,  black);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999} 
.factureclient label{ color: white; }
.factureremrapercu{ position: relative; float:left; padding-left: 5px;  padding-right: 5px; margin:10px; width: 47%;  color:black; border:2px solid #00BFFF; 
	background: white;
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
	box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999; -o-box-shadow:2px 4px 4px #999; -ms-box-shadow:2px 4px 4px #999;} 
	
.factureremb{position: relative; float:left; padding-left: 5px;  padding-right: 5px; margin: 10px; width: 47%; height: auto; color: black;  
	border:2px solid #00BFFF; 
	background:#99ffcc; 
    background: -moz-linear-gradient(#99ffcc,  #00cc66);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #00cc66),color-stop(1, #99ffcc));
    background: -webkit-linear-gradient(#99ffcc,  #00cc66);
    background: -o-linear-gradient(#99ffcc,  #00cc66);
    background: -ms-linear-gradient(#99ffcc,  #00cc66);
    background: linear-gradient(#99ffcc,  #00cc66);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999} 
.factureremb label{ color: black; }
	
.depensesagent{position: relative; float:left; padding-left: 5px;  padding-right: 5px; margin-bottom: 10px; margin-left: 5px; width: 47%; height: auto; color: black;  
	border:2px solid #00BFFF; 
	background:white; 
    background: -moz-linear-gradient(white1,  orange);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, orange),color-stop(1, white));
    background: -webkit-linear-gradient(white,  orange);
    background: -o-linear-gradient(white,  orange);
    background: -ms-linear-gradient(white,  orange);
    background: linear-gradient(white,  orange);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999} 
.depensesagent label{ color: black; }
 	
.donnees{position: relative; float:left; padding-left: 5px;  padding-right: 5px; margin-bottom: 10px; margin-left: 5px; width: 47%; height: auto; border:2px solid #00BFFF; background-color:#4169E1; color: black;   border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999}  	
.titre{ position: relative; float:left; text-align: center; color: white; padding-left: 5px; padding-right: 5px; margin-bottom: 10px; width: 97%; height: auto; border:2px solid #B40404; background-color:black;  border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999}  	
.soustitre{text-align: center; color: white; width: 98% }


.rapport {  position: relative; float:left; width: 47%; height: auto; margin:5px; color: #0F079C; 
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, #0F079C),color-stop(1, #00BFFF)); 	
	background: #6495ED;
    background: -moz-linear-gradient(#6495ED,  #0F079C);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #0F079C),color-stop(1, #6495ED));
    background: -webkit-linear-gradient(#6495ED,  #0F079C);
    background: -o-linear-gradient(#6495ED,  #0F079C);
    background: -ms-linear-gradient(#6495ED,  #0F079C);
    background: linear-gradient(#6495ED,  #0F079C);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999;} 

.factureachat {  position: relative; float:left; width: 47%; height: auto; margin:5px; color: #0F079C; 
    border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, #228B22 ),color-stop(1, #1E8449));
    color:black;
	background: #228B22;
    background: -moz-linear-gradient(#228B22,  gray );
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, gray ),color-stop(1, #228B22));
    background: -webkit-linear-gradient(#228B22,  gray );
    background: -o-linear-gradient(#228B22,  gray );
    background: -ms-linear-gradient(#228B22,  gray );
    background: linear-gradient(#228B22,  gray );
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; box-shadow:2px 4px 4px #999; -moz-box-shadow:3 4px 4px #999; -webkit-box-shadow:2px 4px 4px #999;} 
	
.periode { position: relative; float:left; width: 98%; padding: 4px 10px;color:black; margin-top: 20px; 
	border:2px solid -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, #4287f5)); 
	background: #4287f5;
    background: -moz-linear-gradient(#4287f5,  white);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, white),color-stop(1, #4287f5));
    background: -webkit-linear-gradient(#4287f5,  white);
    background: -o-linear-gradient(#4287f5,  white);
    background: -ms-linear-gradient(#4287f5,  white);
    background: linear-gradient(#4287f5,  white);
	border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;
}	
	

.hamburger {position: absolute; background-color:blue; top:0; right:0; line-height: 1.42857143; color:#999; padding: 6px 12px;   border: 1px solid transparent; 
	 font-size: 14px; font-weight: normal; cursor: pointer; white-space: nowrap; vertical-align: middle; border-radius: 4px;
	 outline:none; background-color:#0F079C;
}
#hamburger {position: absolute; background-color:blue; top:0; right:0; line-height: 1.42857143; color:#999; padding: 6px 12px;   border: 1px solid transparent; 
	 font-size: 14px; font-weight: normal; cursor: pointer; white-space: nowrap; vertical-align: middle; border-radius: 4px;
	 outline:none; background-color:#0F079C;
}
.cross {position: absolute; width:100%; background-color:orange; top:0; right:0; line-height: 1.42857143; color:#999; padding: 6px 12px;   border: 1px solid transparent; 
	 font-size: 14px; font-weight: normal; text-align: center; cursor: pointer; white-space: nowrap; vertical-align: middle; border-radius: 4px;
	 outline:none; background-color:#0F079C;
}


/* RECHERCHE   font-family: Papyrus, fantasy; */
.header ul li ul{ display: none; }   /*  cacher le sous menu */
.header li:hover>ul{display:block; width: auto;}   /*  au survol afficher le sous menu  */
/* .header li :hover { color:red; } */

/* header #20B2AA */


.header {
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  z-index: 3;
  background-color:#0F079C;
}

.header ul {
  list-style: none;
  overflow: hidden;
  background-color:#0F079C;
  width: 100%;
}

.header li a {
  display: block;
  padding: 5px 5px;
  border-right: 1px solid #f4f4f4;  /*  a : la couleur du bord droit: blanc */
  text-decoration: none;

}

.header li a:hover,
.header .hamburger:hover { /*  au survol changer la couleur  */
  background-color: #00BFFF;
    /* background-color: lightblue; */
}

/* menu */

.header .menu { background-color:#0F079C;
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu {
 height:auto;   background-color: #0F079C;
 }
 
.header .menu ul {
 list-style-type:none;
 text-align:center;

 }
.header .menu li {
 float:left;
 margin:auto;
 background-color:black;
 }
.header .menu li a {
 display:block;
 width:135px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
.header .menu li a:hover {
 color:black;
 }
 
 /* menugauche  : Cacher au chargement */
.header .menu ul li ul {
 display:none;
 }
 
 /*  au survol , afficher le sous-menu */
.header .menu ul li:hover ul {
 display:block;
 }
.header .menu li:hover ul li {
 float:none;
 }
 
 
.header .menu li ul {
 position:absolute;
 }
 

/* menu icon */

.header .cross {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 10px 15px;
  position: relative;
  user-select: none;
  
}

.header .cross .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  float: right;
  transition: background .2s ease-out;
  width: 18px;
  background-color: yellow;
}

.header .cross .navicon:before,
.header .cross .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 98%;
    background-color: yellow;
}

.header .cross .navicon:before {
  top: 5px;
}

.header .cross .navicon:after {
  top: -5px;
}

/* menu btn */

.header .hamburger {
  display: none;
}

.header .hamburger:checked ~ .menu {
  max-height: 240px;
}

.header .hamburger:checked ~ .cross .navicon {
  background: transparent;
}

.header .hamburger:checked ~ .cross .navicon:before {
  transform: rotate(-45deg);
}

.header .hamburger:checked ~ .cross .navicon:after {
  transform: rotate(45deg);
}

.header .hamburger:checked ~ .cross:not(.steps) .navicon:before,
.header .hamburger:checked ~ .cross:not(.steps) .navicon:after {
  top: 0;
}



@media (max-width:320px){
		html {font-size :1rem ; background-color: yellow; opacity:0; filter:Alpha(opacity=0);/* 16px   */}
		body {
		  font-size: 2em;
		  line-height: 1.3em;
		width : 100% ;
		max-width : 320px ;
		margin : Auto ;
		
		}	


		/* h1, .h1 { font-size: 1.25em; line-height: 1.25em;}  20px  */
		/* h2, .h2 {font-size: 1.125em; line-height: 1.25em;}  18px  */
		 /* h3, .h3 {font-size: 1em; line-height: 1.25em;} 16px  */
		/*  h4, .h4 {font-size: 0.875em; line-height: 1.22em;} 14px  */
		/* h5, .h5 {font-size: 0.75em; line-height: 1.22em;}  12px  */
		/* h6, .h6 {font-size: 0.625em; line-height: 1.22em;}  10px  */
		
		h1, .h1 { font-size: 1rem; line-height: 20/16em;} /*  24px  */
		h2, .h2 {font-size: 1.25rem; line-height: 18/16em;} /*  20px  */
		h3, .h3 {font-size: 1.125rem; line-height: 16/16em;} /*  18px  */
		h4, .h4 {font-size: 1rem; line-height: 14/16em;} /*  16px  */
		h5, .h5 {font-size: 0.875rem; line-height: 12/16em;} /*  14px  */
		h6, .h6 {font-size: 0.75rem; line-height: 10/16em;} /*  12px  Mais dans ce media h6= 1.0625*16*0.75=12.75 car unité est em */
	
/*  DEBUT FORMAT MOBILE  */

label {
  display: inline-block;
  margin-bottom: 5px;

}

ul #nav{	
			 width:98%;
		}
			 
			.container, .entete, .menu, .footer, .gauche, .principale, .fonctions, .abonnements, .mandat, .bleu, .adminsuper, .categorie, .categorieliste, .factureachat, .facturecliappercu, .factureclient, .clients, .clientsliste, .articles, .articlesliste, .infos, .rapport {
			 display: flex;
			 flex-flow: column wrap;
			 width:98%;
			}
		.droite {
			 display: none;
			}	

.catalogue { width: 48%;}

.textunique { width: 100%; margin-top:10px;}
.texthomme { width: 100%; margin-top:10px;}
.textflash { width: 100%; margin-top:10px;}
.textarrivage { width: 100%; margin-top:10px;}
.textsolde { width: 100%; margin-top:10px;}
.textpromotion { width: 100%; margin-top:10px;}

.prix{width:100%;}
.prixdel{width:100%;}

.ombretext{width:100%;}
.entete{width:100%;}
.entetelogo{height:140px; width:48%; order: 2;}
.entetestruc{ height:140px; width:98%; order: 1;}
.enteteslogan{ height:140px; width:48%; order: 3;}
#slideshow { height:130px; width: 130px;}	
#slidestruc { height:130px; width:867px;}
		
}

@media screen and (max-width:480px){
		html {width : 100% ; font-size :1rem ; background-color: red; /* 17px   */}
		body {
		  font-size: 1.0625rem;
		  line-height: 1.5;
		width : 98% ;
		margin-left : 1% ; margin-right : 1% ;
		
		}

ul #nav{
			 width:98%;
		}
		
.container, .header .footer {
			 display: flex;
			 flex-flow: column wrap;
			 width:98%;
			}	
.gauche, .principale {
			 display: flex;
			 flex-flow: column wrap;
			 width:94%;
			}
 .droite {
			 display: none;

			}	
.para { width: 94%;}
.fonctions { width: 94%;}
.abonnements { width: 94%;}
.mandat { width: 94%;}
.bleu { width: 94%;}
.adminsuper { width: 94%;}
.categorie { width: 94%;}
.categorieliste { width: 94%;}
.factureachat { width: 94%;}
.facturecliappercu { width: 94%;}
.factureclient { width: 94%;}
.depensesagent { width: 94%;}
.articles, .articlesliste { width: 94%;}
.clients { width: 94%;}
.infos { width: 94%;}
.rapport { width: 94%;}

.catalogue { width: 48%;}

.prix{width:100%;}
.prixdel{width:100%;}

.textunique { width: 100%; margin-top:10px;}
.texthomme { width: 100%; margin-top:10px;}
.textflash { width: 100%; margin-top:10px;}
.textarrivage { width: 100%; margin-top:10px;}
.textsolde { width: 100%; margin-top:10px;}
.textpromotion { width: 100%; margin-top:10px;}


		h1, .h1 { font-size: 1rem; line-height: 24/17em;} /*  24px  */
		h2, .h2 {font-size: 1.25rem; line-height: 20/17em;} /*  20px  */
		h3, .h3 {font-size: 1.125rem; line-height: 18/17em;} /*  18px  */
		h4, .h4 {font-size: 1rem; line-height: 16/18em;} /*  16px  */
		h5, .h5 {font-size: 0.875rem; line-height: 14/18em;} /*  14px  */
		h6, .h6 {font-size: 0.75rem; line-height: 12/18em;} /*  12px  Mais dans ce media h6= 1.0625*16*0.75=12.75 car unité est em */
	
#logo { height:265px; width: width:98%;}
#siege { height:265px; width: width:98%;}

.ombretext{width:100%;}

.entete{display:flex; flex-flow: row wrap;  justify-content: center; width:100%;}

.entetelogo{width: 48%; order:1;}
.entetestruc{width:48%;  order:2;}
.enteteslogan{width:100%;  order:3;}


#slideshow { height:130px; width: 130px;}	
#slidestruc { height:130px; width:867px;}
	
}

/* 48em = 768px ------------------*************************************************************************************************************************             */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 10px 15px;
  }
  .header .menu {
    clear: none;
    float: left;
    max-height: none;
	display:block;
  }
  .header .cross {
    display: none;
	
  }

.header .cross .navicon {
   float: right;
}

}
/*    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++   */
@media (min-width:480px) and (max-width:768px){
			html {font-size : 1rem ;  background-color: green;/* 18px */}
			body {
			  font-size: 1.125rem;
			  line-height: 1.25;
			max-width : 768px ;
			margin : Auto ;
			
			}
ul #nav{
			 width:98%;
		}
		
.catalogueaccueil { width: 23%;}	
.catalogueaccueilnew { width: 23%;}	

.gauche { width: 44%; order:1;}	
.droite { width: 44%; order:2;}	
.principale { width: 98%; order:3;}

.para { width: 44%;}
.fonctions { width: 94%;}
.abonnements { width: 94%;}
.mandat { width: 94%;}
.bleu { width: 94%;}
.adminsuper { width: 94%;}
.categorie { width: 94%;}
.categorieliste { width: 94%;}
.factureachat { width: 94%;}
.facturecliappercu { width: 94%;}
.factureclient { width: 94%;}
.depensesagent { width: 94%;}
.articles, .articlesliste { width: 94%;}
.clients { width: 94%;}
.iepp { width: 94%;}
.rapport { width: 94%;}


.textunique { width: 100%; margin-top:10px;}
.texthomme { width: 100%; margin-top:10px;}
.textflash { width: 100%; margin-top:10px;}
.textarrivage { width: 100%; margin-top:10px;}
.textsolde { width: 100%; margin-top:10px;}
.textpromotion { width: 100%; margin-top:10px;}

		/*	h1, .h1 { font-size: 1.75em; line-height: 1.25em;}   28px  */
		/* 	 h2, .h2 {font-size: 1.5em; line-height: 1.25em;} 24px  */
		 /* 	h3, .h3 {font-size: 1.25em; line-height: 1.25em;} 20px  */
		/*  	h4, .h4 {font-size: 1.125em; line-height: 1.22em;} 18px  */
		/* 	h5, .h5 {font-size: 1em; line-height: 1.22em;}  16px  */
		/* 	h6, .h6 {font-size: 0.875em; line-height: 1.22em;}  14px  */
		
		h1, .h1 { font-size: 1rem; line-height: 28/18em;} /*  24px  */
		h2, .h2 {font-size: 1.25rem; line-height: 24/18em;} /*  20px  */
		h3, .h3 {font-size: 1.125rem; line-height: 20/18em;} /*  18px  */
		h4, .h4 {font-size: 1rem; line-height: 18/18em;} /*  16px  */
		h5, .h5 {font-size: 0.875rem; line-height: 16/18em;} /*  14px  */
		h6, .h6 {font-size: 0.75rem; line-height: 14/18em;} /*  12px  Mais dans ce media h6= 1.25*16*0.75=12.75 car unité est em */
		


#president { height:70px; width: 50px; margin:5px;}


#logo { height:130px; width: 160px;}
#siege { height:130px; width: 160px;}
			
.entete{display:flex; flex-flow: row wrap;  justify-content: center; width:100%;}

.entetelogo{width: 48%; order:1;}
.entetestruc{width:48%;  order:2;}
.enteteslogan{width:100%;  order:3;}

#slideshow { height:130px; width: 130px;}
#slidestruc { height:130px; width:867px;}		
	
}

/*    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++   */

@media (min-width: 768px) and (max-width: 1280px){
			html {font-size : 1rem ;  background-color: orange;/* 18px =1.125rem */}
			body {
			  font-size: 1.125rem; /* 20px */
			  line-height: 1.25em;
			margin : Auto ;
			
			}
ul #nav{
			 width:98%;
		}
	
.catalogueaccueil { width: 18%;}
.catalogueaccueilnew { width: 18%;}

.gauche, .droite { width: 21%;}	
.principale { width: 46%;}
.fonctions { width: 45%; float:left; }
.abonnements { width: 45%; float:left; }
.mandat { width: 45%; float:left; }
.bleu { width: 45%; float:left; }
.adminsuper { width: 45%; float:left; height:320px;}
.categorie { width: 45%;}
.categorieliste { width: 45%;}
.factureachat { width: 45%;}
.facturecliappercu { width: 45%;}
.factureclient { width: 45%;}
.depensesagent { width: 45%;}
.articles, .articlesliste { width: 45%;}
.clients { width: 45%; margin-left:25px; height:280px;}
.infos { width: 45%; margin-left:25px; height:400px;}
.iepp { width: 45%; margin-left:25px; height:400px;}
.rapport { width: 45%; margin-left:25px; height:650px;}

/*			
 nav, #hamburger-menu {
    display: none;
  }
 nav #main-menu {
    display: inline;
  }

  */
 
			 /* h1, .h1 { font-size: 2em; line-height: 34/18;} 34px  */
			/* h2, .h2 {font-size: 1.75em; line-height: 28/18;}  28px  */
			/* h3, .h3 {font-size: 1.5em; line-height: 24/18;}  24px  */
			/*  h4, .h4 {font-size: 1.25em; line-height: 20/18;} 20px  */
			/* h5, .h5 {font-size: 1em; line-height: 16/18;}  16px  */
			/* h6, .h6 {font-size: 0.75em; line-height: 12/18;}  12px  */


		h1, .h1 { font-size: 1rem; line-height: 34/18em;} /*  24px  */
		h2, .h2 {font-size: 1.25rem; line-height: 28/18em;} /*  20px  */
		h3, .h3 {font-size: 1.125rem; line-height: 24/18em;} /*  18px  */
		h4, .h4 {font-size: 1rem; line-height: 20/18em;} /*  16px  */
		h5, .h5 {font-size: 0.875rem; line-height: 16/18em;} /*  14px  */
		h6, .h6 {font-size: 0.75rem; line-height: 12/18em;} /*  12px  Mais dans ce media h6= 1.25*16*0.75=12.75 car unité est em */
	


#logo { height:130px; width: 160px;}
#siege { height:130px; width: 160px;}
			

.entete{width:100%;}

.entetelogo{height:140px; width: 170px;}
.entetestruc{ height:140px; width:240px;}
.enteteslogan{ height:140px; width:calc(100% - 450px);}

#slideshow { height:130px; width: 130px;}	
#slidestruc { height:130px; width:867px;}



}

@media (min-width: 1280px) {
			 
			html {font-size : 1rem ; background-color: white;}
			body {
				font-size: 1.25em; /* 20px */
				line-height: 1.25em;
				/* max-width : 767px ; */
				margin : Auto ;		
			}

		h1, .h1 { font-size: 1rem; line-height: 32/20em;} /*  24px  */
		h2, .h2 {font-size: 1.25rem; line-height: 28/20em;} /*  20px  */
		h3, .h3 {font-size: 1.125rem; line-height: 24/20em;} /*  18px  */
		h4, .h4 {font-size: 1rem; line-height: 20/20em;} /*  16px  */
		h5, .h5 {font-size: 0.875rem; line-height: 16/20em;} /*  14px  */
		h6, .h6 {font-size: 0.75rem; line-height: 12/20em;} /*  12px  Mais dans ce media h6= 1.0625*16*0.75=12.75 car unité est em */

ul #nav{	
			 width:98%;
		}
	
.catalogueaccueil { width: 20%;}
.catalogueaccueilnew { width: 20%;}	

.adminsuper { width: 45%; float:left; height:320px; margin-left:35px;}
.categorie { width: 45%;}
.categorieliste { width: 45%;}
.facturecliappercu { width: 45%;}
.factureclient { width: 45%;}
.depensesagent { width: 45%;}
.articles, .articlesliste { width: 45%;}
.clients{ width: 45%; margin-left:35px;}
.infos{ width: 45%; margin-left:35px;}
.iepp{ width: 45%; margin-left:35px;}
.rapport{ width: 45%; margin-left:35px;}


#logo { height:130px; width: 160px;}
#siege { height:130px; width: 160px;}

.entete{width:100%; }

.entetelogo{height:140px; width: 170px;}
.entetestruc{ height:140px; width:240px;}
.enteteslogan{ height:140px; width:calc(100% - 450px);}

#slideshow { height:130px; width: 130px;}	
#slidestruc { height:130px; width:867px;}


}