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

#exercices
{
    width :90% ;
    margin :auto ;
    padding :0px ;
}

.pourcentagechapitre
{	
font-size:5vw;
}
#camembert
{
width:16%;
vertical-align:top;
float:left;
}
#openfl-content
{
width:100%;
}

#blocchapitre
{
	text-align:center;
	margin:5px;
	vertical-align:top;
	padding:2px;
	border-radius:8px;
	border:2px solid black;
	background-color:#ffffff;
	width :80%;
    float :left;
	font-size: 24px;
	Line-Height: 1.5;
}
#colexo1
{
	width:48%;
	vertical-align:top;
	float:left;
font-size: 22px;
}
#colexo2
{
	width:48%;
	vertical-align:top;
	float:right;
font-size: 22px;
}
#blocexo
{
	text-align:left;
	margin:5px;
	vertical-align:top;
	padding:5px;
	border-radius:8px;
	border:2px solid black;
	background-color:#ffffff;
	width :98%;
    float :left;
}
#oneexo
{
	width :100%;
	display:block;
}

#chapitresnumerique
{
	width :32%;
	float:left;
	Line-Height: 1.5;
}

#chapitresgeometrie
{
	width :32%;
	float:left;
	Line-Height: 1.5;
}

#chapitresespacedonnees
{
	width :32%;
	float:left;
	Line-Height: 1.5;
}



.cadrechap{

background: white;
border-radius: 16px; 
border: 1px solid #dde7f2;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
display:inline-block;
width:100%;
font-size: 18px;
}

a {
    color: #1976d2;
}

.comment{
font-size: 1.8vw;
}

h1
{
   font-size: 4vw;
}
h2
{
   font-size: 24px;
}

h3
{
   font-size: 24px;
}

h4
{
   font-size: 2vw;
}

header
{
    width :100% ;
}

.soustitre
{
   font-weight:bold;
   font-size: 1.4vw;
   text-align:center;
}

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


.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 ;
}
 
#openfl-content { background: #ffffff; width: 100%; height: 100%; }

@font-face {
			font-family: 'Arial';
			src: url('/fonts/arial.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: swap;
		}
 
#contenu
{ 
    width :68% ;
    float :left ;
}


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

#commentaire
{
	width :60% ;
	text-align:center;
	margin:auto;
}

#menuhaut
{
	display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: flex-start;
}

.vignettebas
{
	width :16.5%;
	float:left;	
	vertical-align:bottom;
}

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


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


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

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

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


#commentaire
{
	width :80% ;
}

.cadrechap{
font-size: 16px;
}

h1
{
   font-size: 6vw;
}

h2
{
   font-size: 22px;
}
h3
{
   font-size: 22px;
}

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: 22px;
	Line-Height:1.5;
}

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

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


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

}



@media(max-width: 600px)
{ 


#commentaire
{
	width :100% ;
}


.pepsia
{
	display:none;
}

.pr2
{
	width:100%;
}


#openfl-content
{
width:50%;
margin:auto;
text-align:center;
}
h1
{
   font-size: 8vw;
}

h2
{
   font-size: 20px;
}
h3
{
   font-size: 20px;
}


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:20px;
Line-Height:1.5;
}

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

.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: 16px;
}
#colexo2
{
	width:100%;
	vertical-align:top;
	float:left;
font-size: 16px;
}

.cadrechap{
font-size: 14px;
}

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




}