@CHARSET "ISO-8859-1";
html, body{
	background-color:#FFF1EF;
color:black;
}
@media (min-device-width:1280px){
#vid{
width:640px;
height:480px;	
}}
@media (min-device-width:640px) and (max-device-width:1279px){
#vid{
width:480px;
height:360px;	
}}
@media (min-device-width:320px) and (max-device-width:639px){
#vid{
width:80vw;
height:60vw;	
}}
@media (max-device-width:319px){
#vid{
width:240px;
height:180px;	
}}

@media (min-device-width:640px) and (max-device-width:799px) and (orientation:landscape){

#groupe{display:flex;}
#menu{display:flex;
width:99vw;
}
#menug{
width:50vw;
display:block;
}
#menud{
margin:0 0 0 10vw;
width:41vw;
display:block;
}
	
#menu ul li.INV1{
display:flex;
}
#entete.T2{height:14vh;
max-height:100px;}
#entete font.T3{
margin-left:10vw;
text-align:center;
}
#entete img.T1{
	margin-left:10vw;
	height:3vh;
	}
#logo.T4{height:14vh;}	
#entete img.T5{height:4vh;}
#entete{
background-image:url(baniere100.jpg);
text-align:center;
font-size:3vh;
font-weight:bold;
color:blue;
}

#logo{
	background-image:url(arefpa75.gif);
	background-repeat: no-repeat;
	background-position:left bottom;
		}

input{font-size:2.2vw;
font-family: "Times New Roman", Georgia, Serif;
width:40vw;
height:2.5vw;}
#menu li, #smenu li{min-height:2.6vw;}
#menu li a, #smenu li a {font-size:2.2vw;
font-family: "Times New Roman", Georgia, Serif;}
#menu ul {
 width:40vw;	
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu ul li {
 display:block;
 width:40vw;	
 float:left;
 margin:0;
 padding:0;
 background-color:#3598FD;
 border: 1px solid blue;
 }
#menu ul li ul li{margin:0 0 0 20vw;}

#menu1:hover + ul#smenu1 {top:10vh; left:20vw;}
#menu2:hover + ul#smenu2 {top:12vh; left:20vw;}
#menu3:hover + ul#smenu3 {top:14vh; left:20vw;}
#menu4:hover + ul#smenu4 {top:16vh; left:20vw;}
#menu1:focus + ul#smenu1 {top:10vh; left:20vw;}
#menu2:focus + ul#smenu2 {top:12vh; left:20vw;}
#menu3:focus + ul#smenu3 {top:14vh; left:20vw;}
#menu4:focus + ul#smenu4 {top:16vh; left:20vw;}
#smenu1:hover{top:10vh; left:20vw;}
#smenu2:hover{top:12vh; left:20vw;}
#smenu3:hover{top:14vh; left:20vw;}
#smenu4:hover{top:16vh; left:20vw;}
 #art{width:99vw;}
 .acote {
display:none;
 width:0vw; 
 }

}
@media (max-device-width:640px) and (orientation:landscape){
#groupe{display:flex;}
#menu{display:flex;
width:99vw;
}
#menug{
width:50vw;
display:block;
}
#menud{
margin:0 0 0 5vw;
width:48vw;
display:block;
}

	
#menu ul li.INV1{
display:flex;
}
#entete.T2{height:16vh;
max-height:100px;}
#entete font.T3{
margin-left:10vw;
text-align:center;
}
#entete img.T1{
	Margin-left:10vw;
	height:4vh;
	}
#logo.T4{height:16vh;}	
#entete img.T5{height:5vh;}
#entete{
background-image:url(baniere100.jpg);
text-align:center;
font-size:4vh;
font-weight:bold;
color:blue;
}

#logo{
	background-image:url(arefpa75.gif);
	background-repeat: no-repeat;
	background-position:left bottom;
		}

input{font-size:2.5vw;
font-family: "Times New Roman", Georgia, Serif;
width:45vw;
height:3vw;}
#menu li, #smenu li{min-height:3.1vw;}
#menu li a, #smenu li a {font-size:2.5vw;
font-family: "Times New Roman", Georgia, Serif;}
#menu ul {
 width:45vw;	
 margin:0;
 padding:1px;
 list-style-type:none;
 text-align:center;
 }
#menu ul li {
 display:block;
 width:45vw;	
 float:left;
 margin:auto;
 padding:0;
 background-color:#3598FD;
 border: 1px solid blue;
 }

#menu ul li ul li{margin:0 0 0 20vw;}
#menu1:hover + ul#smenu1 {top:10vh; left:25vw;}
#menu2:hover + ul#smenu2 {top:12vh; left:25vw;}
#menu3:hover + ul#smenu3 {top:14vh; left:25vw;}
#menu4:hover + ul#smenu4 {top:16vh; left:25vw;}
#menu1:focus + ul#smenu1 {top:10vh; left:25vw;}
#menu2:focus + ul#smenu2 {top:12vh; left:25vw;}
#menu3:focus + ul#smenu3 {top:14vh; left:25vw;}
#menu4:focus + ul#smenu4 {top:16vh; left:25vw;}
#smenu1:hover{top:10vh; left:25vw;}
#smenu2:hover{top:12vh; left:25vw;}
#smenu3:hover{top:14vh; left:25vw;}
#smenu4:hover{top:16vh; left:25vw;}
 #art{
width:99vw; 	
 }
 .acote {
display:none;
 width:0vw; 
 }
}
@media (min-device-height:640px) and (orientation:portrait){
#groupe{display:flex;}
#menu{display:flex;
width:99vw;
}
#menug{
width:40vw;
display:block;
}
#menud{
margin:0 0 0 15vw;
width:41vw;
display:block;
}
	
#menu ul li.INV1{display:flex;}
#entete.T2{height:20vh;
max-height:140px;}
#entete font.T3{
margin-left:4vw;
text-align:center;
}
#entete img.T1{
	Margin-left:5vw;
	height:5vh;
	}
#entete img.T5{height:6vh;}	
#logo.T4{height:20vh;}	
#logo font.T3{margin-left:15vw;}
#entete{
background-image:url(baniere160.jpg);
text-align:center;
font-size:2vh;
font-weight:bold;
color:blue;
}

#logo{
	background-image:url(arefpa100.gif);
	background-repeat: no-repeat;
	background-position:left top;
		}

input{font-size:3vw;
font-family: "Times New Roman", Georgia, Serif;
width:40vw;
height:3.5vw;}
#menu li, #smenu li{min-height:3.7vw;}
#menu li a, #smenu li a {font-size:3vw;
font-family: "Times New Roman", Georgia, Serif;}
#menu ul {
 width:40vw;	
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu ul li {
 display:block;
 width:40vw;	
 float:left;
 margin:0;
 padding:0;
 background-color:#3598FD;
 border: 1px solid blue;
 }
#menu ul li ul li{margin:0 0 0 20vw;}

#menu1:hover + ul#smenu1 {top:10vh; left:20vw;}
#menu2:hover + ul#smenu2 {top:12vh; left:20vw;}
#menu3:hover + ul#smenu3 {top:14vh; left:20vw;}
#menu4:hover + ul#smenu4 {top:16vh; left:20vw;}
#menu1:focus + ul#smenu1 {top:10vh; left:20vw;}
#menu2:focus + ul#smenu2 {top:12vh; left:20vw;}
#menu3:focus + ul#smenu3 {top:14vh; left:20vw;}
#menu4:focus + ul#smenu4 {top:16vh; left:20vw;}
#smenu1:hover{top:10vh; left:20vw;}
#smenu2:hover{top:12vh; left:20vw;}
#smenu3:hover{top:14vh; left:20vw;}
#smenu4:hover{top:16vh; left:20vw;}
 #art{width:99vw;}
 .acote {
display:none;
 width:0vw; 
 }
}
@media (max-device-height:640px) and (orientation:portrait){
#groupe{display:flex;}
#menu{display:flex;
width:99vw;
}
#menug{
width:51vw;
display:block;
}
#menud{
margin:0 0 0 1vw;
width:41vw;
display:block;
}
	
#menu ul li.INV1{display:flex;}
#entete{height:20vh;}
#entete.T2{height:24vh;
max-height:160px;}
#entete font.T3{
margin-left:0vw;
text-align:center;
}
#entete img.T1{
	Margin-left:10vw;
	height:4vh;
	}
#entete img.T5{height:3vh;}
#logo.T4{height:24vh;}	
#logo font.T3{margin-left:10vw;}
#entete{
background-image:url(baniere160.jpg);
text-align:center;
font-size:2vh;
font-weight:bold;
color:blue;
}

#logo{
	background-image:url(arefpa75.gif);
	background-repeat: no-repeat;
	background-position:left top;
		}

input{font-size:3.8vw;
font-family: "Times New Roman", Georgia, Serif;
width:49vw;
height:5.4vw;}
#menu li, #smenu li{min-height:5.5vw;}
#menu li a , #smenu li a{font-size:3.8vw;
font-family: "Times New Roman", Georgia, Serif;}
#menu ul {
 width:49vw;	
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu ul li {
 display:block;
 float:left;
 margin:0;
 padding:0;
 background-color:#3598FD;
 border: 1px solid blue;
 }
#menu ul li ul li{margin:0 0 0 10vw;}
#menug li{width:49vw!important;}
#menud li{width:45vw!important;}
#menu1:hover + ul#smenu1 {top:10vh; left:40vw;}
#menu2:hover + ul#smenu2 {top:12vh; left:40vw;}
#menu3:hover + ul#smenu3 {top:14vh; left:40vw;}
#menu4:hover + ul#smenu4 {top:16vh; left:40vw;}
#menu1:focus + ul#smenu1 {top:10vh; left:40vw;}
#menu2:focus + ul#smenu2 {top:12vh; left:40vw;}
#menu3:focus + ul#smenu3 {top:14vh; left:40vw;}
#menu4:focus + ul#smenu4 {top:16vh; left:40vw;}
#smenu1:hover{top:10vh; left:40vw;}
#smenu2:hover{top:12vh; left:40vw;}
#smenu3:hover{top:14vh; left:40vw;}
#smenu4:hover{top:16vh; left:40vw;}
 #art{width:99vw;}
 .acote {
display:none;
 width:0vw; 
 }
}
@media(min-device-width: 1280px) and (orientation:landscape){
#groupe{display:flex;}
#menu{display:flex;
width:99vw;
float:left;
}
#menug{
width:60vw;
}
#menud{
width:39vw;
float:left;
}
#menu ul li.INV1{
display:none;
height:0px;
width:0px;
border:none;
}
#entete.T2{height:16vh;
max-height:160px;}
#entete font.T3{
margin-left:10vw;
text-align:center;
}
#entete img.T1{
	margin-left:10vw;
	height:5vh;
	}	
	#entete img.T5{height:6vh;}
#entete{
background-image:url(baniere160.jpg);
text-align:center;
font-size:20px;
font-weight:bold;
color:blue;
}

#logo{
	background-image:url(arefpb160.gif);
	background-repeat: no-repeat;
	
	}
#logo.T4{height:16vh;}

input{font-size:1.2vw;
font-family: "Times New Roman", Georgia, Serif;
width:14.5vw;height:1.5vw;}
#menu li, #smenu li{min-height:1.6vw;}
#menu li a, #smenu li a {font-size:1.2vw;
font-family: "Times New Roman", Georgia, Serif;}

#menu ul li{
display:flex;
flex-direction:column;
float:left;
margin:0;
padding:0;
background-color:#3598FD;
border: 1px solid blue;}
#menug li{width:14.5vw;}
#menud li{width:16vw;}
#art{
width:69vw; 	
 }
 .acote {
width:29vw; 
 }

 }
@media (min-device-width:800px) and (max-device-width: 1279px) and (orientation:landscape){
#groupe{display:flex;}
#menu{display:flex;
width:99vw;
}
#menug{
width:60vw;
}
#menud{
width:39vw;
float:left;
}
#menu ul li.INV1{
display:none;
height:0px;
width:0px;
border:none;
}
#entete.T2{height:15vh;
max-height:160px;}
#entete font.T3{
margin-left:10vw;
text-align:center;
}
#entete img.T1{
	margin-left:10vw;
	height:5vh;
	}
#entete img.T5{height:6vh;}	
#entete{
background-image:url(baniere160.jpg);
text-align:center;
font-size:2.5vh;
font-weight:bold;
color:blue;
}

#logo{
	background-image:url(arefpb160.gif);
	background-repeat: no-repeat;
	}
#logo.T4{height:15vh;}

input{font-size:1.8vw;
font-family: "Times New Roman", Georgia, Serif;
width:28vw;
height:2.2vw;
}
#menu li, #smenu li{min-height:2.3vw;}
#menu li a, #smenu li a{
font-size:1.8vw;
font-family: "Times New Roman", Georgia, Serif;}
#menu ul li{
width:28vw;
display:flex;
flex-direction:column;
float:left;
margin:0;
padding:0;
background-color:#3598FD;
border: 1px solid blue;}

#art{
width:69vw; 	
 }
 .acote {
width:29vw; 
 }

}
@media (min-device-height: 768px){
.article {
overflow: auto;
max-height: 72vh;
 }
.acotecont{
height: 72vh;
}
}

@media (min-device-height: 719px) and (max-device-height: 768px){
.article {
overflow: auto;
max-height: 65vh;
}
.acotecont{
height: 65vh;
}
}
@media (max-device-height: 719px){
.article {
overflow: auto;
max-height: 69vh;
}
.acotecont{
height: 69vh;
}
}

#menu li ul li a.fxlien{
color:#058CFF;
background-color:white;
}

#menu ul {
margin:0px;
list-style-type:none;
text-align:left;
float:left;
}

#menu li a {
color:white;
text-decoration:none;
padding:1px;
margin:1px;
}
 
#menu li:hover {
color:#FFCB8D;
border: 1px solid orange;
}
 
#smenu1, #smenu2,#smenu3, #smenu4{
  display: none;
}
#menu1[type="button"], #menu2[type="button"], #menu3[type="button"], #menu4[type="button"]{
color: white;
padding: 0px;
cursor: pointer;
background-color:#3598FD;
margin:0px;
outline: none;
border:none;
}
#menu1[type="button"]:focus, #menu2[type="button"]:focus, #menu3[type="button"]:focus, #menu4[type="button"]:focus{
outline: none;
}
#menu1:hover + ul#smenu1 {
display: flex;
flex-direction:column;
position:absolute;
}
#menu2:hover + ul#smenu2 {
display: flex;
flex-direction:column;
position:absolute;
}
#menu3:hover + ul#smenu3 {
display: flex;
flex-direction:column;
position:absolute;
}
#menu4:hover + ul#smenu4 {
display: flex;
flex-direction:column;
position:absolute;
}
#menu1:focus + ul#smenu1 {
display: flex;
flex-direction:column;
position:absolute;
}
#menu2:focus + ul#smenu2 {
display: flex;
flex-direction:column;
position:absolute;
}
#menu3:focus + ul#smenu3 {
display: flex;
flex-direction:column;
position:absolute;
}
#menu4:focus + ul#smenu4 {
display: flex;
flex-direction:column;
position:absolute;
}
#smenu1:hover{display: flex;
flex-direction:column;
position:absolute;
}
#smenu2:hover{display: flex;
flex-direction:column;
position:absolute;
}
#smenu3:hover{display: flex;
flex-direction:column;
position:absolute;
}
#smenu4:hover{display: flex;
flex-direction:column;
position:absolute;
}
#menu ul li ul li {
background-color:#7DC0FF;
} 
.blocs{
display:flex;
}	
#art{
list-style-type:none;
float:center;
}
.article{padding: 0px 10px 0px 0px;}
#art li{
margin:auto;
width:50vw;
background-color:#3598FD;
border: 1px solid blue;
text-align:center;
}
#art li a {
color:white;
text-decoration:none;
padding:1px;
margin:1px;
}
#art li:hover {
color:#FFCB8D;
border: 1px solid orange;
}
#art img{
display:block;
margin-left: auto; 
margin-right: auto;
float::center;
text-align:center;
}

#art sur {
display:block;
text-align:center;	
font-weight:bold;
color:white;
background-color:#ED8703;
}
#art p{
text-align:center;	
font-weight:bold;
background-color:#FFBB63;
}

.acote {
text-align:center;

}
/**/
#smenu0{
  display: none;
}
#menu0[type="button"]{
color: white;
padding: 0px;
cursor: pointer;
background-color:#3598FD;
margin:0px;
outline: none;
border:none;
}
#menu0[type="button"]:focus{
outline: none;
}
#smenu ul li:hover ul{
display: block;
position:relative;
}

#menu0:focus + ul#smenu0 {
display: block;
position:relative;
}

#smenu0:hover{display: block;
position:relative;
}


/**/
#smenu{float:center;
text-align:center;}
#smenu ul {
background-color:#E9FDE7;
margin:auto;
padding:0;
list-style-type:none;
text-align:center;
width:90vw;
float:center;
}

#smenu ul li {
background-color:#3598FD;
border: 1px solid blue;
width:90vw;
padding:0;
}
#smenu li:hover {
color:#FFCB8D;
border: 1px solid orange;
}
#smenu li a{
color:white;
text-decoration:none;
}
#smenu ul li ul li{
background-color:#7DC0FF;
}
 
#acote{

margin:0;}
#acotecontenu{
text-align:center;

}
#acotecontenu p{
font-weight:bold;
background-color:#ADD3A9

}