@font-face{
	font-family:'fontpersLogo';
	src: url('../fonts/Anita_semi_square.ttf') format('truetype');
}
@font-face{
	font-family:'fontpersArial';
	src: url('../fonts/arial.ttf') format('truetype');
}
@font-face{
	font-family:'fontpersAriblk';
	src: url('../fonts/ariblk.ttf') format('truetype');
}
@font-face{
	font-family:'fontperVerdana';
	src: url('../fonts/verdana.ttf') format('truetype');
}
@font-face{
	font-family:'fontpersTime';
	src: url('../fonts/times.ttf') format('truetype');
}
/*----------------Base-----------------------------*/
html, body,#all,#contenu,#menu,.box,footer, div, article, h1, ul, li, a,p,span, figure, textarea{
    margin:0;
    padding:0;
}
body{
	font-size:1rem;
}
/************** scrollBar html *******************
html, body{
	min-width:290px;
}
body{
	min-height: 100vh;
    display:grid;
	grid-template-rows: 1fr auto;
}
#contenu{
    padding-bottom: 75px;
	max-width:1400px;
	max-width:1450px;
	margin-left:16%;
}
footer{
	margin-top: -75px; /* 70 hauteur +7 de bordure*//* 
    height: 70px;
}
footer{
    clear:both;
}
/************** scrollBar doc ******************/
html, body{
	height:100%;
	min-width:290px;
}
html, body{
    min-height:100%;
}
#all{
    min-height:100%;
}
#contenu{
	height:100%;
    padding-bottom: 75px;
	max-width:1400px;
	max-width:1450px;
	margin-left:16%;
}
footer{
	margin-top: -75px; /* 70 hauteur +7 de bordure*/
    height: 70px;
}
footer{
    clear:both;
}
/*----------------Variable---------------------------*/
body{
	--colorBlue: #29abe2;
	--colorOrange: #e39f29;
	--colorGrey: #3b3b3b;
	/* var(--colorBlue); */
	--border: 5px;
	color: var(--colorGrey);
}
/*----------------Ergonomie--------------------------*/
/* html{
max-width:1000px;
background-color: #5D5D5D;
margin:auto; 
} */
body{
    font-family: Arial,Verdana,'Times New Roman',fontpersArial,fontperVerdana,fontpersTime;
    font-size: 100%;
    background-color: #F2F2F2;
    line-height: normal ;
}
#menu{
    background-color: var(--colorGrey);
	padding-top: 1%;
	padding-top: 10px;
	font-size:1rem;
}
#menu div{
    padding: 0.5em;
    background-color: var(--colorGrey);
    border-bottom: solid;
    border-bottom-color: var(--colorOrange);
    border-bottom-width: var(--border);
 }
/*#menu ul{*/
header ul{
    vertical-align: middle;
    text-align: center;
}
/*#menu ul li{*/
header ul li{
    font-family: "Arial Black", fontpersAriblk;
    font-size: 1.5em;
    display: inline-block;
    margin: 0 1em 0 1em;
    vertical-align: middle;
}
li .connexion a{
	width: 80%;
}
li .connexion{
   /* vertical-align: middle;*/
    text-align: center;
    font-family: "Arial Black", fontpersAriblk;
    font-size: 0.5em;
    color:white;
    display: inline-block;
    width: 100%;
   /* overflow: hidden;*/
    float: right;
}
li img{
    position:relative;
    top:4px;
}
a, :link{
    text-decoration:none;
    color:var(--colorBlue);
}
a:hover{
    color: var(--colorOrange);
}
a:hover{
text-shadow: 0 0 3px var(--colorOrange);
font-style: oblique;
}
/* pour Edge
a:visited{
   color: var(--colorBlue);
}*/
footer{
    color: #666666;
    text-align: center;
    background-color: var(--colorGrey);
    /* vertical-align: center; */
    border-top: solid;
    border-top-color: var(--colorOrange);
    border-top-width: var(--border);
}
footer p{
	padding-top:15px;
    vertical-align: middle;
	font-size:1.0em;
}
footer a, footer :link{
	color: #666666;
}
footer a:hover{
    color: #666666;
	text-decoration:underline;
	text-shadow: none;
}
.box a{
	font-style: oblique;
}
.box h1{
    font-size:1.5em;/*font-size:1.3em;*/
    color: var(--colorBlue);
	background-color:var(--colorGrey);
    border-bottom: solid;
    border-bottom-color: var(--colorOrange);
    border-bottom-width: var(--border);
    text-align: center;
    padding:0.8em 0.8em 0.8em 0.8em;
}
.box h2{
	font-size:1.5em;
}
.box{
    display: block;
    background-color: #e6e6e6;
    border-top: solid;
    border-top-color: var(--colorOrange);
    border-top-width: var(--border);
    border-bottom: solid;
    border-bottom-color: var(--colorOrange);
    border-bottom-width: var(--border);
    margin-top:1.5em;
    margin-bottom:1.5em;
    padding-bottom:1.0em;
    margin-left:8.2%;
    margin-right:6.2%;
    width:50.00%;
	word-break:break-word;
	text-overflow: ellipsis;
}
aside {
  float: right;
	display:block;
	text-align:center;
  width: 15%;
  margin-right: 2%;
    background-color: #e6e6e6;
    border-top: solid;
    border-top-color: var(--colorOrange);
    border-bottom: solid;
    border-bottom-color: var(--colorOrange);
	border-width: 5px;
  box-shadow: 0 0 10px 0px black;
  max-width:150px;
}
aside h1{
    font-size:1.0em;
    color: var(--colorBlue);
	background-color:var(--colorGrey);
    border-bottom: solid;
    border-bottom-color: var(--colorOrange);
    border-bottom-width: 3px;
    text-align: center;
	margin-bottom:0;
	padding:0.4em;
}
aside p{
	padding: 1.0em 1.0em 1.0em 1.0em;
	font-size:0.8em;
	word-wrap: break-word;
}
section#articles article{
	margin:  5% 20%  5% 10%; /* top right bas left*/
	margin-right: 20%;
	margin-left: 10%;
}
#pagination{
	margin:  5% 20%  5% 10%;
	text-align:center;
}
#pagination p{
    color: var(--colorBlue);
}
section{
	margin-top:5%; /*<!--positionement aside sans div dans article--> */
}
.box p{
   /* font-size: 0.90em; */
    padding:2.65%;
    padding-left:8.2%;
    padding-right:8.2%;
    text-align: justify;
}
p{
    font-size: 1em;
}
.centrale{
    width: 70%;
	margin:  5% auto  5% auto;
    position: relative;
}
h2{padding-left:10px; 
	font-size: 1em;
	color: var(--colorBlue);
	font-weight: normal; 
	font-style: normal;
}
h3{padding-left:10px; 
	font-size: 1.15em;
	color: var(--colorBlue);
	font-weight: normal; 
	font-style: normal;
	margin-bottom: 0.25em;
}
h1{
	margin-bottom: 0.75em;
}
form{text-align: center;
    width: 80%;
    margin:3% 10% 3% 10%;
}
form textarea{
	width: 100%;
	height: 50%;
}
input, textarea {
	outline: none;
}
input {
    margin:  3px 0 7px 0;
}
#menuLeft ul li {
    display: block;
    font-family: "Arial Black", fontpersAriblk;
    font-size: 1.25em;
    margin: 0;
    line-height: 1.5em;
}
#menuLeft{
	z-index: 1;
}
#menuLeft2{
	z-index: 0;
	overflow: hidden;
    /* word-wrap: break-word; */
	line-height: 1em;
}
#menuLeft, #menuLeft2{
    width: 17%;
    max-width: 200px;
    /*	menu deroulant
    overflow: hidden;
    word-wrap: break-word;
    */
	position: fixed;
    margin-top:3em;
    margin-left:2%;
    padding:1% 0% 1% 0%;
    background-color: var(--colorGrey);
    border-top: solid;
    border-top-color: var(--colorOrange);
    border-top-width: var(--border);
    border-bottom: solid;
    border-bottom-color: var(--colorOrange);
    border-bottom-width: var(--border)
}
#menuLeft2{
    margin-top:16em;
}
#menuLeft2 li{
    font-family: "Arial", fontpersArial;
    color:  white;
    font-size: 1em;
	width:100%;
}
#menuLeft2 li a{
    font-size: 0.75em;
    margin-bottom: 0px;
}
#menuLeft2 p{
    font-size: 1em;
    margin-bottom: 10px;
	padding-left:5%;
	padding-right:5%;
	padding-bottom:5px;
}
#menuLeft2 p, #menu .connexion2 p{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#menuLeft2 ul li{
	margin:0;
	max-width: 100%;
}
.connexion a{
    display: inline-block;
    margin-top: 100px;
}
/*----------------Sous-Menu------------------------*/
.connexion2 a{
    color:white;
    margin-left: 10px;
    margin-right: 10px;
    white-space: pre;
}
.connexion2 img{position: relative;
     top: 5px;
 }
 #menuLeft2 img{position: relative;
     top: -0px;
 }
.connexion2{
    margin-top: 0px;
    text-align: center;
    vertical-align: bottom;
    color:white;
    font-family: "Arial Black", fontpersAriblk;
    font-size: 0.85em;
}
#menu ul li ul li{
	margin:0;
}
#menuLeft ul li:hover ul{
	left: 125px;
}
#menu{
	padding-top: 10px;
}
#menu .menucolor,#menuLeft .menucolor{
    color: var(--colorOrange);
}
/* @keyframes opacityMenu {
    0% {opacity: 0;}
    1% {opacity: 0;}
	100% {opacity: 0.95;}
} */
ul li ul, #menuLeft ul li ul{
	position:absolute;
	display:block;
	padding: 1em 0.8em 1em 0.8em;
	top:-1000px;
	background-color: #3E3E3E;
	border-top: solid;
	border-bottom: solid;
	border-left: solid;
	border-right: solid;
	border-color:var(--colorOrange);
	border-width:1px; /*ht, droite..*/
	font-size: 0.55em;
	z-index:10;
	border-radius:7px;
	opacity:0;
	max-height:0px;
	/* animation: opacityMenu 0.8s; */
    transition: opacity 1s, max-height 1.5s;
}
 #menuLeft ul li ul{
	font-size: 0.65em;
}
ul li ul li{
	display:block;
	position:relative;
	opacity:1;
	transition: opacity 1s;
}
ul li:hover ul li{
	opacity:1;
}
ul li:hover ul, #menuLeft ul li:hover ul{
	top:initial;
	margin-left:-10px;
	opacity:1;
	max-height:500px;		 /*plus grand que le contenu*/
}
#menuLeft ul li:hover ul{
	margin-top:-75px;
	margin-left:0px;
}

ul li ul li:first-child{
text-decoration: underline;
}
/*----------------logo---------------------------*/
.logo {
	color:var(--colorOrange);
	font-style: oblique;
	font-family: fontpersLogo ,"Arial Black", fontpersAriblk;
	/* font-size: 4.5em; */
	font-size: 7vw;
	text-align: center;
	display:block;
	margin:auto;
}
.logo span {
	color: var(--colorBlue);
}
/*----------------Design---------------------------*/
#menuLeft, #menuLeft2, .box, aside{
	border-radius:5px;
}
/* ul li ul li:last-child{ */
	/* border-radius:0px 0px 5px 5px; */
/* } */
#all{	/* background-image: url('images/fond1.png'), url('images/fond2.png'); background-position: 70% 70%,30% 30%; background-repeat: repeat,repeat;*/
    background-image: url('../images/fond.png');
	background-repeat: repeat;   
}
.box,aside,#menuLeft,#menu,footer,#menuLeft2{
    box-shadow: 0 0 5px 0px black;
	transition:box-shadow 200ms linear 0s;
}
.box:hover,aside:hover,#menuLeft:hover,#menu:hover,footer:hover,#menuLeft2:hover{
    box-shadow: 0 0 11px 0px black;
}
a,.connexion,.box h1{
	text-shadow: none;
	transition:text-shadow 200ms linear;
}
.box:hover h1,aside:hover h1{
    text-shadow: 0 0 2px var(--colorBlue);
}
.connexion:hover{
	/* color:white; */
    /* text-shadow: 0 0 3px white; */
	color: var(--colorOrange);
    text-shadow: 0 0 1px  var(--colorOrange);
}
.connexion2 .sousmenucolor, #menuLeft2 .sousmenucolor{
	color: var(--colorOrange);
}
.connexion2 .sousmenucolor:hover, #menuLeft2 .sousmenucolor:hover{
    text-shadow: 0 0 3px  var(--colorOrange);
}
form fieldset img{
    position: relative;
    top:5px;
    margin-left: 10px;
 }
form fieldset{
    border-style:solid;
    border-width:1px;
    border-color:var(--colorBlue);
	border-radius:5px;
	box-shadow: 0 0 2px 0px var(--colorBlue);
    transition: border-color 0.4s, box-shadow 0.4s;
}
form fieldset:hover{
	border-color:var(--colorOrange);
	box-shadow: 0 0 5px 0px var(--colorOrange);
}

form fieldset legend{
	background-color:#e6e6e6;
	color:var(--colorBlue);
    transition: color 0.4s;
}
form fieldset:hover legend{
	color:var(--colorBlue);
}
input[type=submit].submitMsg{
    padding:0.25em 1.5em 0.25em 1.5em;
    cursor: pointer;
	border-radius:30px;
	border-width:0px;
	text-transform:none;
	letter-spacing: 0px;
	margin:0;
	background-color:var(--colorGrey);
	box-shadow: 0 0 5px 0px var(--colorGrey);
    transition:box-shadow 0.4s linear,color 0.4s;
}
input[type=submit].submitMsg:hover{
	letter-spacing: 0px;
	box-shadow: 0 0 12px 1px var(--colorBlue);
	color:var(--colorBlue);
}
input[type=submit]{
	margin: 5px 0 5px 0;
	padding:7px 15px 7px 15px;
    cursor: pointer;
	border-radius:30px;
	border-color:var(--colorBlue);
	border-width:0px;
	background-color:var(--colorGrey);
	color: white;
	text-transform:uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	box-shadow: 0 0 7px 0px var(--colorBlue);
	transition:box-shadow 0.4s linear,color 0.4s;
}
input[type=submit]:hover{
	background-color:#474747;
	box-shadow: 0 0 12px 1px var(--colorBlue);
	color:var(--colorBlue);
}
input[type=text], input[type=email], input[type=password], input[type=number],textarea,:required{
    border-radius:5px;
	border-width:0px;
	background-color: #F0F0F0;
	padding:5px;
	box-shadow: 0 0 5px 0px var(--colorBlue);
	color:var(--colorGrey);
	text-align:center;
	transition:box-shadow 0.4s linear;
}
textarea, textarea:required{
	background-color: #F0F0F0;
    border-radius:5px;
	text-align:left;
}
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=number]:hover, textarea:hover{
    box-shadow: 0 0 5px 0px var(--colorOrange),0 0 3px 0px var(--colorOrange) inset;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus{
    box-shadow: 0 0 9px 1px var(--colorOrange),0 0 3px 0px var(--colorOrange) inset;
}
form.formContact fieldset{
	padding:1.5em;
}
.fileAllow{
  font-size:0.85em;
   color: var(--colorGrey);
}
/*----------------Media---------------------------*/
video{
	min-width: 200px;
	width: 50%;
    /* margin-bottom: 5%;*/
    margin-bottom: 10%; /*overflow depacemment agrandissement*/
	margin-top: 5%;
    margin-left: 25%;
    margin-right: 5%;
	box-shadow: 0 0 10px 0px black;
    transition: 1.5s;
	z-index:200;
}
video:hover{
    transform: scale(2,2);
}
.software img{
	margin: 2%;
	width: 60%;
	margin-left: 20%;
	margin-bottom: 0;
	box-shadow: 0 0 10px 0px black;
	border-radius: 4px;
	transition-property:width, margin-left;
	transition: 1.5s;
}
.software img:hover{
	width: 100%;
	margin-left: 0%;
}
section.software{
	margin-top:-2%;
	margin-bottom:-2%;
}
section.software article{
	margin-top:4%;
	margin-bottom:4%;
}
.back{
	display:block;
	display:inline-block;
	margin-left:15%;
	margin-top:2%;
	margin-bottom:2%;
}
.back:first-child{
	margin-bottom:-2%;
}
.back:last-child{
	margin-top:-2%;
}
.software h2{
	text-align: center;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
/*---------------------- accueil --------------------------------*/
.accueil figure img{
	display:block;
	margin: auto;
	max-width: 90%;
	margin-bottom: 0;
}
.accueil h2{
	/* text-align: center; */
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
h2 ~ figure figcaption{
	color:#ADADAD;
	text-align:center;
	/* font-size:0.75em; */
}
.accueil ul{
	padding-left: 15%;
	padding-right: 15%; 
}
.accueil ul li{
	list-style:circle outside;
	 
}
/*---------------------- Compte --------------------------------*/
.msgRetour{
	/*idem .centrale*/
	width:70%;
	margin: 5% auto 5% auto;
	font-size:1.25em;
	color: #BA7D18;
	/*text-shadow: 0 0 1px #B37817;*/
}
/*---------------------- Messagerie --------------------------------*/
p.ancienMessage{
	color: var(--colorBlue);
	width:71%;
	margin: 2% 2% 0% 4%; /* top right bas left*/
	margin-bottom: 1%;
	padding: 1%;
	text-align: left;
	background-color: #F0F0F0;
	border-radius: 5px;
	box-shadow: 0 0 3px 0px var(--colorBlue) inset;
	transition:box-shadow 400ms linear 0s;
	display:inline-block;
	vertical-align:middle; /* sans flex */
	word-break:break-word;
}
/* div.center{
	display: flex;
    align-items: center;
} */
p.ancienMessage:hover{
	box-shadow: 0 0 10px 0px var(--colorBlue) inset;
}
p.reponse{
	color:var(--colorOrange);
	margin: 1% 1% 1% 4%;
	margin-bottom: 20px;
	
	/* margin-left:22%; */
	vertical-align:middle;
	display:inline-block;
	/* margin-top:0%; */
	
	padding: 1%;
	text-align: right;
	background-color: #F0F0F0;
	border-radius: 5px;
	box-shadow: 0 0 3px 0px var(--colorOrange) inset;
	transition:box-shadow 400ms linear 0s;
	width:71%;
	word-break:break-word;
}
p.reponse:hover{
	box-shadow: 0 0 10px 0px var(--colorOrange) inset;
}
textarea[name=champArea]{
	box-shadow: 0 0 5px 0px var(--colorOrange);
	}
form.formMsg{
	min-width: 90px;
	display:inline-block;
	margin:0;
	margin-left:-1%;
	width:20%;
}
form.formMsg2{
	min-width: 90px;
	display:inline-block;
	margin:0;
	margin-left:1%;
	width:20%;
}
section div.allMsg div:first-child, div.allMsg3{
  margin-top:-2.5%;
}
div div.allMsg2 :first-child{
  margin-top:-0.5%;
}
.formMsg input[type=submit], .formMsg2 input[type=submit] {
	font-size:0.7em;
	/* width: 90px; */
	margin:auto;
}
.allMsg3 p.reponse {
	margin-bottom:1%;
}
.allMsg3 form {
	margin-top:0;
}
/*---------------------- getion Articles --------------------------------*/
table{
	table-layout:fixed;
	word-break:break-word;
	width: 100%;
	margin:auto;
	border-collapse: collapse;
	transition:box-shadow 400ms linear 0s;
}
table, td, th{
	border:solid;
    border-color: var(--colorOrange);
	border-width: 1px;
	text-align:center;
	transition:box-shadow 200ms linear 0s;
}
tr{
	transition:box-shadow 200ms linear 0s;
}
th{
	color: var(--colorBlue);
	transition:text-shadow 400ms linear 0s;
}
td{
	font-size:0.9em;
/*
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;*/
}

.pageActuel{
	text-decoration:underline;
	color:var(--colorOrange);
}
/* table th{
	text-shadow: none;
	transition:text-shadow 400ms linear 0s;
}
table:hover th{
    text-shadow: 0 0 1px var(--colorBlue);
} */
tr:hover{ /*th:hover, td:hover*/
	box-shadow: 0 0 6px 0px var(--colorOrange) inset;
}
.addArticle label{
	display:inline-block;
	text-align:right;
	width:150px;
	margin-right:10px;
}
/*---------------------- commentaires -----------------------*/
.commentaire{
margin-right: 20%;
margin-left: 10%;	
}
.commentaire p.ancienMessage, .commentaire2 p.ancienMessage, .commentaire2 p.reponse{
margin:1% 2% 1% 2%;
width:94%;
}
.commentaire p.reponse{
margin:0% 2% 2% 2%;
width:94%;
}
/*---------------------- rgpd --------------------------------*/
div#rgpd{
	opacity:0.85;
	border-radius:10px 10px 0px 0px;
	background-color: var(--colorGrey);
	position: fixed;
	bottom: 0px;
	text-align: center;
	width: 80%;
	margin: 0px 10% 0px 10%;
	padding-top: 10px;
	z-index:99;
	border:solid;
	border-width: 3px;
	border-bottom-width: 0;
	border-color: var(--colorOrange);
	color: white;
	font-size:14px;
	transition:opacity 0.4s linear;
}
div#rgpd:hover{
	opacity:1;
}
div#rgpd a{
	text-decoration:underline;
}
div#rgpd input{
	margin: 10px 0 10px 0;
}
/*---------------------- mentions --------------------------------*/
#contenu .box ul{
	padding-left: 16%;
	padding-right: 8.2%;
	padding-top: 2.65%;
	padding-bottom: 2.65%;
}
p.tags{
	padding:0px;
}