@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-regular.woff2') format('woff2');    
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-italic.woff2') format('woff2');    
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-700.woff2') format('woff2');    
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-800.woff2') format('woff2');    
    font-weight: 800;
    font-style: normal;
}
body
{
    width :100% ;
	margin:auto;
	text-align:center;	
	font-family: 'Nunito', sans-serif;
    font-weight: 400;
	background: #f4f8fc;
}
#global
{
    width :100% ;
    margin :auto ;
    padding :0px ;
}

h1
{
   font-size: 4vw;
}
h2
{
   font-size: 2.9vw;
}

h4
{
   font-size: 2vw;
}

header
{
    width :100% ;
}

.soustitre
{
   font-weight:bold;
   font-size: 20px;
   text-align:center;
}

.preheader
{
    width :100% ;
  background-color:#f4f8fc;
}
.pub
{
    width :100% ;
	
}
.pepsia
{
	display:inline-block;
	width:406px;
}

.pr2
{
	display:inline-block;
	min-width:580px;
}

.header {
	width :100% ;
  overflow: hidden;
  padding: 0px 0px;
}

.header-right a {
  float: left;
  color: black;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 16px; 
  line-height: 25px;
  border-radius: 4px;
}

.logo {
  float: left;
  width:30%;
}

.log {
  width:70%;
  float: right;
}
.champsconnect {
  width:100%;
  float: right;
  text-align: right;
}

.nompseudo
{   float: left;
	display:inline-block;
	width:30%;
	vertical-align:top;
   font-size: 2.8vw;
}
.params
{   float: left;
	display:inline-block;
	width:60%;
  color:#000088;
 vertical-align:top;
   font-size: 1.5vw;
}
.imgavat {
  float: left;
  width:5%;
 display:inline-block;
	 vertical-align:top;
  padding:0px;
  border:0px solid grey;
}
.log a{
  color: black;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-size: 12px; 
  line-height: 12px;
  border-radius: 4px;
}
.log a:hover {
  background-color: #ddd;
  color: black;
}
.header-right a:hover {
  background-color: #ddd;
  color: black;
}

.header-right a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  text-align: center;
  width:100%;
}



 
#titre
{
   width :100%;
   font-size: 30px;
}
 

 
#openfl-content { background: #ffffff; width: 100%; height: 100%; }
		
 


#cotegauche
{
    width :402px;
	display:inline-block;
	vertical-align:top;
}

#contenu
{ 
    width :640px ;
	display:inline-block;
}

#sidebar-droite
{	
	margin:auto;
	text-align:center;
	vertical-align:top;
    width :150px;
	display:inline-block;
}

#cotegauchep
{
    width :19%;
	float:left;
	vertical-align:top;
}

#contenup
{ 
    width :60%;
	float:left;
}

#sidebar-droitep
{	
    width :19%;
	float:left;
	vertical-align:top;
}

#commentaire
{
	width :100% ;
    margin:auto;
	text-align:justify;
}
#textcomment
{
	text-align:justify;
	font-size:18px;
	width:100%;
		
}

#vignette
{
   float:left;
   width:24%;
   vertical-align:top;
}
 
#menu-jeux, #menu-jeux ul{
font-size:20px;
padding:0;
margin:0;
list-style:none;
text-align:center;
height:90px;
}
#menu-jeux li{
display:inline-block;
width:200px;
position:relative;
border-radius:2px 2px 2px 2px ;
vertical-align:top;
line-height:1;
font-size:22px;
}

#menu-jeux ul li{
display:inherit;
border-radius:0;
font-size:16px;
}
#menu-jeux a{
text-decoration:none;
display:block;
padding:0px 0px;
color:#fff;
font-family:arial;
}
#menu-jeux li{
background-color: #456789;
}

#menu-jeux li li{
background:#456789;
}

#menu-jeux li:hover  li:hover{
background:#123456;
}

#barre
{
	width :100%;
}
#leclassement
{
    width :50%;	
    float :left;
}

#contenucorrespondant
{
    width :45%;
    float :right;
}
#barreprem
{
	width :100%;
	margin:auto;
	text-align:center;
}
#leclassementprem
{
    width :100%;	
	margin:auto;
	text-align:center;
}


#menubas
{
	display: flex;
    flex-wrap: wrap;
    gap: 5px;
	justify-content:center;
    align-items: flex-start;
}
#exosenplus
{
	width :100%;
	height:20%;
	margin:auto;
	text-align:center;
	display:block;
	vertical-align:bottom;
}
.vignettebas
{
	width :16.5%;
	float:left;	
	vertical-align:bottom;
}

.boutonniveau
{
	width:9%;
	float:left;
}

.boutonniveau0
{
	float:left;
	width:calc((100% - 13 * 5px) *221/3695);
	height:auto;
}
.boutonniveau1
{
	float:left;
	width:calc((100% - 13 * 5px) *242/3695);
	height:auto;
}
.boutonniveau2
{
	float:left;
	width:calc((100% - 13 * 5px) *227/3695);
	height:auto;
}
.boutonniveau3
{
	float:left;
	width:calc((100% - 13 * 5px) *219/3695);
	height:auto;
}
.boutonniveau4
{
	float:left;
	width:calc((100% - 13 * 5px) *223/3695);
	height:auto;
}
.boutonniveau5
{
	float:left;
	width:calc((100% - 13 * 5px) *302/3695);
	height:auto;
}
.boutonniveau6
{
	float:left;
	width:calc((100% - 13 * 5px) *304/3695);
	height:auto;
}
.boutonniveau7
{
	float:left;
	width:calc((100% - 13 * 5px) *295/3695);
	height:auto;
}
.boutonniveau8
{
	float:left;
	width:calc((100% - 13 * 5px) *307/3695);
	height:auto;
}
.boutonniveau9
{
	float:left;
	width:calc((100% - 13 * 5px) *447/3695);
	height:auto;
}
.boutonniveau10
{
	float:left;
	width:calc((100% - 13 * 5px) *448/3695);
	height:auto;
}
.boutonniveau11
{
	float:left;
	width:calc((100% - 13 * 5px) *460/3695);
	height:auto;
}
footer
{
    width :100%;
}


#smiley
{
	width:30%;
	float:left;
}
#infojeuconnect
{
	width:70%;
	float:left;
}
#infojeu
{
	width:100%;
	float:left;
}



@media(min-width: 951px) and (max-width: 1200px)
{
	
#contenu
{ 
    width :540px ;
}

#sidebar-droite
{	
	display:none;	
}

}
@media(min-width: 601px) and (max-width: 950px)
{ 


#cotegauchep
{
    width :19%;
	float:left;
	vertical-align:top;
}

#contenup
{ 
    width :80%;
	float:left;
}

#sidebar-droitep
{	
   display:none;
}


#cotegauche
{
   display:none;
}

#contenu
{ 
    width :90%;
}

#sidebar-droite
{	
	display:none;	
}


h1
{
   font-size: 6vw;
}

h2
{
   font-size: 2.5vw;
}
h4
{
   font-size: 2.5vw;
}

#titre
{
	font-size: 30px;
}
#global
{
    width :100% ;
    padding :0px ;
}


.soustitre
{
   font-size: 20px;
}

#textcomment
{
	font-size:16px;
}

#infojeuconnect
{
	width:30%;
	float:left;
}
#infojeu
{
	width:40%;
	float:left;
}
#lespdfs
{
	width:60%;
	float:left;
}

#leclassementprem
{
    width :100%;	
}


#menu-jeux li{
line-height:1.5;
font-size:26px;
}

#menu-jeux ul li{
font-size:18px;
}


#menu-jeux, #menu-jeux ul{
min-height:135px;
}



.pepsia
{
	display:none;
}
.pr2
{
	width:100%;
}

}



@media(max-width: 600px)
{ 

#cotegauche
{
   width:100%;
   display:inline-block;
}

#contenu
{ 
    width :100%;
}

#sidebar-droite
{	
	display:none;	
}


#cotegauchep
{
   display:none;
   width:0px;
}

#contenup
{ 
    width :100%;
	float:left;
}

#sidebar-droitep
{	
   display:none;
}

.pepsia
{
	display:inline-block;
	width:406px;
}

.pr2
{
	width:100%;
}

#menu-jeux, #menu-jeux ul{
min-height:190px;
}
#menu-jeux li{
line-height:2;
font-size:30px;
}

#menu-jeux ul li{
font-size:20px;
}


h1
{
   font-size: 8vw;
}

h2
{
   font-size: 5vw;
}

h4
{
   font-size: 3vw;
}

#titre
{
	font-size: 30px;
}
#global
{
    width :100% ;
    padding :0px ;
}



#sidebar-droite
{	
	display:none;
    width :0%;
}

#textcomment
{
	font-size:14px;
	width:100%;		
}

#vignette
{
   display:none;
   width:0%;
}
 
.logo {
  float: left;
  width:30%;
}
  
.log {
  float: right;
  width:70%;
}
.nompseudo
{  
	width:30%;
	font-size: 4vw;
}
  
  
.nompseudo input
{   
   font-size: 2.2vw;
}
  
.boutonniveau
{
	width:16%;
}


.boutonniveau0
{
	width:calc((100% - 6 * 5px) *221/1132);
}
.boutonniveau1
{
	float:left;
	width:calc((100% - 6 * 5px) *242/1132);
}
.boutonniveau2
{
	float:left;
	width:calc((100% - 6 * 5px) *227/1132);
}
.boutonniveau3
{
	float:left;
	width:calc((100% - 6 * 5px) *219/1132);
}
.boutonniveau4
{
	float:left;
	width:calc((100% - 6 * 5px) *223/1132);
}
.boutonniveau5
{
	float:left;
	width:calc((100% - 5 * 5px) *302/1208);
}
.boutonniveau6
{
	float:left;
	width:calc((100% - 5 * 5px) *304/1208);
}
.boutonniveau7
{
	float:left;
	width:calc((100% - 5 * 5px) *295/1208);
}
.boutonniveau8
{
	float:left;
	width:calc((100% - 5 * 5px) *307/1208);
}
.boutonniveau9
{
	float:left;
	width:calc((100% - 4 * 5px) *447/1355);
}
.boutonniveau10
{
	float:left;
	width:calc((100% - 4 * 5px) *448/1355);
}
.boutonniveau11
{
	float:left;
	width:calc((100% - 4 * 5px) *460/1355);
}

.params
{  
	
   font-size: 3vw;
}


#smiley
{
	width:5%;
	float:left;
}
#infojeuconnect
{
	width:95%;
	float:left;
}
#infojeu
{
	width:100%;
	float:left;
}
#lespdfs
{
	width:0%;
	float:left;
}


#leclassement
{
    width :100%;	
}

#contenucorrespondant
{
    width :100%;
}

#leclassementprem
{
    width :100%;	
}
}