@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 ;
}

#jeux
{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
	justify-content:center;
    align-items: flex-start;
}

#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;
}

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

h3
{
   font-size: 2.6vw;
}

h4
{
   font-size: 2vw;
}

header
{
    width :100% ;
}

#menuhaut
{
	display: flex;
    flex-wrap: wrap;
    gap: 5px;
	justify-content:center;
    align-items: flex-start;
}
.soustitre
{
   font-weight:bold;
   font-size: 1.4vw;
   text-align:center;
}

a {
    color: #1976d2;
}
.preheader
{
    width :100% ;
  background-color: #f4f8fc;
}
.pub
{
    width :100% ;
}

.pepsia
{
	display:inline-block;
	width:402px;
	height:320px;
}

.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%;
}


.pdf {float:left;
  width:16%;  
   font-size: 1.4vw;
}

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

#menu-gauche
{
	text-align:center;
    width :17% ;
    float :left ;
}
 
#contenu
{ 
    width :68% ;
    float :left ;
}


#sidebar-droite
{	
	margin:auto;
	text-align:center;
	vertical-align:top;
    width :15% ;
	float :left ;
}


.boutonniveau
{
	width:8.2%;
	float:left;
	Line-Height:1.5;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.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%;
}





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

h1
{
   font-size: 6vw;
}

h2
{
   font-size: 2.8vw;
}
h3
{
   font-size: 2.7vw;
}

h4
{
   font-size: 2.5vw;
}

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

#menu-gauche
{
    width :20% ;
}
#contenu
{
    width :80% ;
}

#sidebar-droite
{
    width :100% ;
	margin:auto;
	text-align:center;
}

.soustitre
{
   font-size: 2.2vw;
}

.pdf {float:left;
  width:16%;  
   font-size: 2vw;
}


#textcomment
{
	font-size:4vw;
}

 
#jeuprecedent
{
	font-size:3vw;
}
#jeusuivant
{
	font-size:3vw;
}


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

#leclassementprem
{
    width :75%;	
}



#blocchapitre
{
	width :100%;
    font-size: 2.5vw;
	Line-Height:1.9;
}

#camembert
{
width:100%;
vertical-align:top;
margin:auto;
text-align:center;
}

#openfl-content
{
width:30%;
margin:auto;
text-align:center;
}


.blocjeu
{
	font-size: 3vw;
	Line-Height: 1.2;
}
.comment
{	
font-size:2.9vw;
}


#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;
}

.pr2
{
	width:100%;
}

}



@media(max-width: 600px)
{ 


.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;
}
h3
{
   font-size: 5vw;
}


h4
{
   font-size: 3vw;
}


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

#menu-gauche
{
    width :0% ;
}

#contenu
{
    width :100% ;
}

#sidebar-droite
{
    width :0% ;
}


.pdf {float:left;
  width:24%;  
   font-size: 3vw;
}

#textcomment
{
	font-size:5vw;
}
 
 
#jeuprecedent
{
	font-size:3.4vw;
}
#jeusuivant
{
	font-size:3.4vw;
}
/*
 .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
  */
.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%;
	font-size: 16px;
	Line-Height:1;
	
}


.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;
}


#blocchapitre
{	
width:100%;
font-size:4.2vw;
Line-Height:2.2;
}

#camembert
{
width:100%;
vertical-align:top;
margin:auto;
text-align:center;
}

.blocjeu
{
	font-size: 4.2vw;
	Line-Height: 1.4;
}
.comment
{	
font-size:3.8vw;
}

.pourcentagechapitre
{	
font-size:8vw;
}
#chapitresnumerique
{
	width :98%;
	float:left;
	Line-Height: 1.7;
}

#chapitresgeometrie
{
	width :98%;
	float:left;
	Line-Height: 1.7;
}

#chapitresespacedonnees
{
	width :98%;
	float:left;
	Line-Height: 1.7;
}

#colexo1
{
	width:100%;
	vertical-align:top;
	float:left;
font-size: 4.2vw;
}
#colexo2
{
	width:100%;
	vertical-align:top;
	float:left;
font-size: 4.2vw;
}
.cadrechap{
font-size: 4vw;
}

#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%;	
}




}