.mobile-background {
    background-image: url('https://www.classeinteractive.com/ecoles/skin/butterfly/accueil/telephone.jpg');
    background-size: cover;
    width: 100%;
    height: 100vh;
    color: white;
    position: relative; /* Ajouté pour positionner le paragraphe à l'intérieur */
}
.mobile-background p {
    position: absolute;
	 width: 90%; 
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 1.8rem;
    text-align: center;
    padding: 10px 20px; /* Ajout d'un peu d'espace autour du texte */
    z-index: 1; /* Pour s'assurer que le texte apparaît au-dessus de l'arrière-plan */	
	font-family: 'Michroma', sans-serif;
}

.mobile-background p::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Noir avec 60% de transparence */
    z-index: -1; /* Pour s'assurer que l'arrière-plan est derrière le texte */
}
a:link {
        color : #FFFFFF;
        /* background-color : #4E5256; */
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 12px;
}
a:hover {
        color : #e8a424;
		/* background-color: #EAFFEA; */
        text-decoration: none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 12px;
}
a:visited {
        color : #FFFFFF;
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 12px;
}
a:active {
    color: #000000;
    text-decoration: none;
    /* background-color: #EAFFEA; */
    font-size : 12px;
    font-style: normal;
}
.noscript {
    font-family: Arial, sans-serif; /* Utiliser une police lisible */
    color: #333; /* Couleur du texte pour une bonne lisibilité */
    background-color: #f4f4f4; /* Couleur de fond légère */
    border: 1px solid #ddd; /* Bordure discrète */
    padding: 15px; /* Espace autour du texte */
    margin: 20px 0; /* Marge au-dessus et en dessous */
    line-height: 1.6; /* Espacement des lignes pour une meilleure lisibilité */
    text-align: justify; /* Justifier le texte */
}

.noscript p {
    margin-bottom: 10px; /* Espace entre les paragraphes */
}

/* Vous pouvez ajouter plus de styles ici selon vos préférences */

.highlight {
  background-color: yellow; 
}
.menuCol {
    width: 15%; /* 100% (largeur total) / 5 = 20% pour que la colonne occupe un cinquième de la largeur de la page */
}

.menuButton {
    display: block; /* Organisez les boutons en colonne (un en dessous de l'autre) */
    width: 100%; /* Les boutons occupent toute la largeur de la colonne */
    /* Ajoutez d'autres styles pour les boutons si nécessaire (couleurs, bordures, etc.) */
}
.no-border:focus {
  outline: none;
  border: none;
}

/* pour Chrome et Safari largeur scroll bar*/
#textFixe::-webkit-scrollbar {
    width: 10px;
}

#textFixe::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0); /* Couleur de la piste de la barre de défilement */
}

#textFixe::-webkit-scrollbar-thumb {
    background-color: rgba(155, 155, 155, 0.5); /* Couleur de la barre de défilement */
    border-radius: 10px; /* Rayon de la bordure de la barre de défilement (optionnel) */
}
#histoire {
	padding: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}
::placeholder {
  color: rgba(255, 255, 255, 0.3); /* Choisis la couleur que tu veux */
  opacity: 1; /* Firefox réduit l'opacité par défaut, alors on la remet à 1 */
}

input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);  /* Pour Internet Explorer */
}

input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);  /* Pour Edge */
}
.grise {

}
a.grise:visited,a.grise:link {
	font-family: Jura, sans-serif;
	font-size: 15px;
	color : #354046;
}
a.grise:hover {
	font-family: Jura, sans-serif;
	font-size: 15px;
	color : #8fabb9;
}
.grise3 {

}
a.grise3:visited,a.grise3:link {
	font-family: Jura, sans-serif;
	font-size: 20px;
	color : #354046;
}
a.grise3:hover {
	font-family: Jura, sans-serif;
	font-size: 20px;
	color : #8fabb9;
}
.grise4 {

}
a.grise4:visited,a.grise4:link {
	font-family: Jura, sans-serif;
	font-size: 20px;
	color : #354046;
}
a.grise4:hover {
	font-family: Jura, sans-serif;
	font-size: 20px;
	color : #000000;
}
.pagination-button{
background-color: #313e48; /* Couleur de fond */
  border: none;
  color: white; /* Couleur du texte */
  padding-bottom: 10px; /* Espacement interne */
  /* padding-left: 50px; */
  margin-left: 10px;
  margin-bottom: 10px;
  font-family: 'Roboto', sans-serif;
/* font-family: 'Jura', sans-serif; */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  height: 20px;
   cursor: pointer;
   border-radius:5px;
    	border-top: 1px solid #a5957c;
    	border-left: 1px solid #a5957c;
    	border-bottom: 1px solid #000000;
    	border-right: 1px solid #000000;
	/* border-bottom: 1px dashed #ffffff; */
}
.paypal-button {
  /* background-color: #003087; */
  border: none;
  color: #fff;
  padding-top: 40px;

  font-size: 8px;
  /* font-weight: bold; */
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
    width: 384px;
  height: 153px;
}

.paypal-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 384px;
  height: 153px;
  background-image: url("https://www.classeinteractive.com/ecoles/skin/butterfly/paypal.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  z-index: 10;
}

.paypal-button:hover:before {
  opacity: 1;
}

.paypal-button-text {
  position: relative;
  z-index: 11;
}

.editPhoto {
width : 10vw;
height : 10vh;
max-width : 30px;
max-height : 30px;
}
.containImage{
min-width : 190px;
padding: -1px;
color: #FFFFFF;	
}
.photogauche {
  float: left;
  padding-right: 20px;
  width: 200px;
  margin: 0;
}
.photochatd {
  float: left;
  padding-right: 5px;
  width: 35px;
  margin: 0;
}
.photochatg {
  float: left;
  padding-right: 5px;
  width: 18px;
  margin: 0;
}
.photogauchesmall {
  float: left;
  padding-right: 20px;
  width: 100px;
  margin: 0;
}
.photocentre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
   margin: 0;
  padding-right: 20px;
}
.photocentre500 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 98%;
   margin: 0;
  padding-right: 20px;
}
.fermeContain {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ferme {
  display: block;
}

.smallphotogauche {

	padding-left: 10px;
	padding-top: 7px;
	padding-bottom: 7px;
	min-width: 100px; 
	width: 88%;
	/* display: inline; */
	text-align: center;
	/* margin: 0; */
 
}
.smallphotogauche2 { 
	float: left;
	padding-left: 30px;
	padding-top: 7px;
	padding-bottom: 7px;
	width: 180px; 
	/* display: inline; */
	text-align: center;
	margin: 0;
	 border-radius:50%; 
}
.photodroite {
  float: right; 
  padding-left: 20px;
  width: 200px;
  text-align: center;
  margin: 0;
}
.bibliophotodroite {
  float: right;
  padding-left: 10px;
  width: 240px;
  text-align: center;
  margin: 0;
}
.delete-icon:hover {
    cursor: pointer;
}
.message {
 font-family : sans-serif, Arial, Helvetica, sans-serif;
 	border-top: 1px dashed #ffffff;
	border-left: 1px dashed #ffffff;
	font-size:9;
	width: 100%;
	color:#ffffff;
	padding: 10px 20px;
	text-align: left;
}
.accueil {
  position: relative;
  color: #210704;
  font-size: 1.5em;
  width: 100%;
}
.accueil_texte {
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
}
.accueil_texte2 {
  position: absolute;
  color: #000000;
  font-size:0.6em;

}
.flotte {
  margin: 2px;
  width: 420px;
 }
 .flotteg {
  float: left;
  width: 750px;
 }
 .float {
  margin: 2px;
  float: left;
  width: 100px;
 }
 .flotteflash{
  	padding-right: 15px;
 	padding-top: 30px;
    margin: 2px;
  float: left;
  width: 300px;
  height:380px; 
	background-color: #000000;
 }
  .flottetext{
  	padding-right: 15px;
 	padding-top: 30px;
    margin: 2px;
	float: left;
	width: 300px;
	height:380px; 
	color: #FFFFFF;
	background-color: #ff0000;
 }
  .float1 {
  margin: 2px;
  float: left;
  width: 300px;
 }
 .flotteimage{
   margin: 2px;
  float: left;
  width: 100px;
  height: 100px;
	background-color: #000000;
 }
 .boutondepart{
 font-size: 9px;
  text-align: center;
  color: #ffffff;
 margin: 2px;
  float: left;
  width: 15px;
  height: 10px;
	background-color: #000000;
 }
 .boutonimprime{
 font-size: 10px;
  text-align: center;
  color: #ffffff;
 margin-top: 8px;
  width: 80px;
  height: 30px;
	background-color: #333333;
 }
.flotteright {
position:relative; 
 margin-left: 300px;
 margin-right: auto; 
 }
.flotte p {
font-size: 15%;
  text-align: center;
 }

 .conteneur {
  color:#996666;
 background-color: #e8ffe8;
 }
.tiers{
	float: left;
	width: 33%;
	margin-bottom: 1em 0;
}
.bandeau {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	border-top: 1px solid #006699;
	border-bottom: 40px solid #1e252b;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color : #73714f;
	height: 250px;
	vertical-align: middle;
}
.ligne{
	float: left;
	width: 100%;
	margin: 1em 0;
}
.espace {
 clear: both;
 } 
.paps {

	background-image:url("https://www.classeinteractive.com/ecoles/skin/butterfly/boutonsubmit.png"); 
}
 .begin {
	background-image:url("../skin/butterfly/dechire.jpg"); 
	background-position:right top;
	background-repeat: no-repeat;
	  height: window.innerHeight;
	width : window.innerWidth;
	max-height : auto;
	max-width : auto;
 }
 .bck {
		background-image:url("./img_pack/m2005s.jpg"); 
		background-position:right top;
		background-repeat: no-repeat;
		  height: 62px;
		max-width : 500px;
 }
.rayure {
	background-image:url("./img_pack/pix.gif");
}
.blank {
	background-color:#FFFFFF;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10;
	text-align: center;
}
.celluleAI { 
background-color: #baa88c;
  text-align: center;
  border: 1px solid black;
}
.tableAI { 
background-color: #422217;

}
.cellule {
 background-color: #FFFFFF;
	padding-right: 6px;
	padding-left: 8px;
}
.celluleform {
	padding: -1px;
	color: #FFFFFF;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9;
}
.celluleBleu {
	background-color:#EAFFEA;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10;
	text-align: justify;
}
.texte {
	padding: 4px 10px;
	text-align: justify;
}
.txt_url {
  width: 350px;
background-color:#999999;
color:#FFFFFF;

}
.texte_simple {
	padding: 4px 10px;
}
.ps {
	border-top: 1px dashed #006699;
	font-size: 85%;
	padding: 4px 20px;
	text-align: justify;
}
.title {
 font-family : Verdana, Arial, Helvetica, sans-serif;
 	border-top: 1px dashed #ffffff;
	border-bottom: 1px dashed #ffffff;
	font-size:100%;
	color:#E8A424;
	text-align: left;
	height: 40px;
}
.title1 {
 font-family : Verdana, Arial, Helvetica, sans-serif;
 	border-top: 1px dashed #ffffff;
	font-size:100%;
	color:#f9eaa0;
	text-align: left;
		padding-top: 5px;

}
.titleE {
 font-family : Verdana, Arial, Helvetica, sans-serif;
 	border-top: 1px dashed #ffffff;
	border-bottom: 1px dashed #ffffff;
	padding-left: 3px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 15 ;
	color:#000000;
	text-align: left;
	 background-color : #ece6c7;

}
.titleF {
	height: 10px;

}
.image-with-text-row {
    display: table-row;
    width: 100%;
}

.image-with-text-cell {
    display: table-cell;
    vertical-align: top;
}

.image-with-text {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.image {
    margin-right: 10px;
    margin-bottom: 10px;
}

.caption {
    flex: 1 1 auto;
}

.notes {
 font-family : Verdana, Arial, Helvetica, sans-serif;
	border-top: 1px #006699;
	 background-color: #EAFFEA;

	color:#000000;
	padding: 4px 20px;
	text-align: center;
		border-radius :50px 50px 50px 50px;
}
.copyright {
 font-family : Verdana, Arial, Helvetica, sans-serif;
	background-color: #1e252b;
	font-size: 80%;
	color:#999999;
	padding: 4px 20px;
	text-align: center;

}	 
.notecom {
	border-top: 1px dashed #006699;
	font-size: 80%;
	font-style: italic;
	color:#666666;
	padding: 4px 20px;
	text-align: left;
}
.trait_bas {
	border-bottom: 1px dashed #006699;
	padding-bottom: 4px;

}
.trait_haut {
	border-top: 1px solid #006699;
}

.trait_droite {
	border-right: 1px solid #006699;
}

.trait_gauche {
	border-left: 1px solid #999999;
	/* padding: 6px; */

}
.chatuser {
	FONT-FAMILY: Jura;
	font-size: 10;
	padding-left: 80px;
	color : #D8D0AE;
}
.chatassistant {
	FONT-FAMILY: Jura;
	font-size: 10;
	padding-left: 30px;
	color : #ffffff;
}
.chatassistantPHP {
	FONT-FAMILY: Jura;
	font-size: 15px;
	padding-left: 80px;
	color : #000000;
}
.chatuserPHP {
    font-family: sans-serif;
    font-size: 16px; /* Ajout de "px" pour la taille de police */
    padding-left: 30px;
    color: #334455; /* Couleur gris-bleu foncé */
    font-weight: bold; /* Texte en gras */
}
.genre {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10;
	padding-left: 60px;
border-top: 1px solid #006699;
background-color : #D8D0AE;

}
.famille {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10;
	padding-left: 30px;
border-top: 1px solid #006699;
background-color : #A69E44;

}
.ordre4 {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
border-top: 1px solid #006699;
	padding-top: 2px;
	padding-bottom: 2px;
  background-color : #73714f;
}
.ordre3 {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	height : 30px;
	font-size: 35;
	color : #A69E44;
background-color : #000000;
}
.ordre2 {
	
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 35;
	color : #000000;

}
.ordre5 {
	font-family: 'Cookie', cursive;
	font-size: 20px;
	border-top: 1px solid #006699;
	background-color : #63734f ;
}
.ordre {
font-family: 'Aboreto', cursive;
	font-size: 15px;
	color: rgba( 254, 244, 184, 0.8);
	border-top: 1px solid #006699;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left : 5px;
	background-color : #63734f ;
}
a.ordre:hover,a.ordre:link,a.ordre:visited,a.ordre:active {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12;
	border-top: 1px solid #006699;
	background-color : #9C862E;
	color : #000000;
}
.classe {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14;
	color : #ffffff;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	 background-color : #272727;
}
.cadre_admin_quizz {
	padding: 4px;
	border: 1px dashed #006699;
	margin: 2px; 
	text-align: left;
	background-color : #313e48;
	width: 200px;
	min-width: 180px;
}
td.fullpage_quizz{
table-layout: fixed;
width: auto;
border-left: 1px solid #cccccc;
text-align: left;
/* table-layout: auto; */
background-color: #313e48;
margin-bottom: -114px;
}
td.messagetodisplay{
table-layout: fixed;
width: auto;
border-left: 1px solid #cccccc;
text-align: left;
background-image: url("./fondadmin2.jpg");
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
margin-bottom: -114px;
margin-left: 114px;
}
.cadre_admin {
	padding: 4px;
	border: 1px dashed #006699;
	margin: 2px; 
	text-align: left;
	background-color : #313e48;
	width: 200px;
}
.cadre_admin a{
font-size: 15px;
font-family: 'Jura', sans-serif;
color: rgba( 249, 148, 45, 0.7);
}
.cadre_admin a:link{
font-size: 15px;
font-family: 'Jura', sans-serif;
color: rgba( 249, 148, 45, 0.7);
}
.cadre_pointille {
	padding: 4px;
	border: 1px dashed #006699;
	margin: 2px; 
	text-align: left;
	 background-color : #73714f;
}
.bordure {
	border: 1px solid #FFFFFF;
}
.SPIPTITLE {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#E8A424;

}
.SPIPGRAS {
	font-weight: bold;
}
.SPIPITALIQUE {
		font-style: italic;
}
.minH {
	     min-height : 20px;
}

.menu{
	font-family : Georgia,Verdana, Arial, Helvetica, sans-serif;
	border: 1px dashed #006699;
	vertical-align: top;
	text-align: left;
	max-width : 500px;
}
/* sous menu */
#menu_deroule {
  padding:0;
  margin:0;
  list-style:none;
	/* text-align: left; */
background: #9C862E;
}
#menu_deroule ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
 background: #9C862E;


}
#menu_deroule li {
   /* border-radius: 6px; */
   margin-bottom:2px;
   /* box-shadow: 3px 3px 3px #999; */
   border:solid 1px #333A40;
   /* letter-spacing: 0.14em; */
   /* font-size: 18; */
/* background: #fffff; */
}
#menu_deroule li li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12;
	max-height:0;
	overflow: hidden;
	transition: all .4s;
/* border-radius:0; */
/* background: #fffff; */
/* box-shadow: none; */
   border:none;
   margin:0
}
#menu_deroule a {
	display:block;
	/* text-decoration: none; */
	padding: 1px 5px;
	font-family: verdana;
	background-color : #9C862E;

}
#menu_deroule ul li a, #menu_deroule li:hover li a {
	text-align: left;
	padding: 4px 3px;
	
	/* font-size:1em; */

	/* great*/
	background-color : #333333;
}
#menu_deroule li:hover {
	color : #CFD1D3;
   background: #ffffff;
    /* background-color : #9C862E; */
}
#menu_deroule li li:hover {
	/* color : #CFD1D3; */
   /* background:  #7e713c ; */
    /* background-color : #9C862E; */
}
#menu_deroule ul li:last-child {
   /* border-radius: 0 0 8px 8px; */
   border:none;
   
}
#menu_deroule li:hover li {
  max-height: 15em;
}
/* tableau */

table{
width:100%;
/* width:auto; */
/* background-color: #333333; */
/* background-color: #a7b1b9; */
background-color: #5e7764;
border-collapse: collapse;
margin: auto;
}
#table_express{
	background-color: #1e252b;
	table-layout: fixed;
  /* min-width: 1700px; */
  /* max-width: 1700px; */
}
#table_test{
	background-color: #b9b093;
}
#table_public{
	background-color: #a5957c;
}
#table_telephone{
	background-color: #a5957c;
	  width: 100%;
}
#table_exercice{
	background-color: #b9b093;
}
#table_video{
	background-color: #734f51;
}
#table_admin{
		text-align: left;	
		/* background-image: url("./fondadmin2.jpg"); */
	background-color: #04141c;
}
table tr td {
	vertical-align: top;
}
.tab{
	width:100%;
	background-color: #333333;
}
.tab1{
display:none;
}
.tab2{
	background-color: #63734f;
	min-height : 40px;
	vertical-align: middle;
	padding-left: 10px;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	border-radius :50px 50px 50px 50px;
}
.tab3{
	/* width:100%; */
	background-color: #ffffff;
	color : #000000;
}
.tab6{
	/* width:100%; */
	/* background-color: #4E5256; */
	padding-top : 5px;
	padding-bottom : 5px;
	padding-left : 10px;

	background-color: #475c6b;
	vertical-align: middle;
	color : #999999;
	text-align: left;
	font-size: 20px;
	font-family: 'Cookie', cursive;
}
.tab5{
	/* width:100%; */
	/* background-color: #4E5256; */
	padding-top : 10px;
	padding-bottom : 2px;
	padding-left : 40px;
	border-left: 1px solid #cbcabd;
	border-top: 1px solid #cbcabd;
	border-right: 1px solid #f9942d;
	border-bottom: 1px solid #f9942d;
	background-color: #313e48;
	min-height : 30px;
	vertical-align: middle;
	color : #ccc892;
	text-align: left;
	font-family: 'Michroma', sans-serif;
	font-size : 15px;
	border-radius :50px 10px 50px 10px ;
	/* font-family: 'Cookie', cursive; */
}
.tabPriorite{

	background-color: #cbcabd;
	min-height : 5px;
	vertical-align: middle;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;

	color : #1e252b;
	text-align: left;
	font-size: 12px;
	/* font-family: 'Cookie', cursive; */
	font-family: 'Jura', sans-serif;
}
.tabresultatEleve{
	/* width:100%; */
	/* background-color: #4E5256; */
	padding-top : 5px;
	padding-bottom : 5px;
	padding-left : 20px;
	width : 97%;
	background-color: #cbcabd;
	min-height : 10px;
	vertical-align: middle;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;

	color : #1e252b;
	text-align: left;
	font-size: 12px;
	/* font-family: 'Cookie', cursive; */
	font-family: 'Jura', sans-serif;
}
thead, tfoot {
	vertical-align: middle;
	text-align: center;	
	color : #ffffff;
	background-color : #333333;


}
td.vertical{
writing-mode: vertical-rl;
text-orientation: mixed;
height:50px;
	border-left: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
        font-size : .7vb ;
}

td.marge{
table-layout: fixed;
min-width:50px;
border-left: 1px solid #cccccc;

}
td.adminsketch {
  table-layout: fixed;
  width: 100%;
  border-left: 1px solid #cccccc;
  background-image: url("./fondadmin2.jpg");
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
}
td.adminsketch2{
table-layout: fixed;
width:100%;
border-left: 1px solid #cccccc;
background-color: #313e48;
/* table-layout: auto; */
/* width: 30%; */
}
td.adminsketch3{
table-layout: fixed;
width:100%;
border-left: 1px solid #cccccc;
background-color: #1e252b;
}
td.menuG{
padding-left : 10px;
padding-right : 5px;
table-layout: fixed;
min-width:200px;
/* width:250px; */
/* border-top: 1px solid #999999; */
/* table-layout: auto; */
/* width: 100%; */
}
td.tierpage{
padding-right : 120px;
border-left: 1px solid #cccccc;
border-top: 1px solid #cccccc;
text-align: left;
table-layout: auto;
}

td.fullpage{
/* table-layout: fixed; */
width:100%;
border-left: 1px solid #cccccc;
text-align: left;
table-layout: auto;
background-color: #313e48;
 
}
tr.trsmall{
	width:70%;
}
td.mipage{
/* table-layout: fixed; */
width:50%;
border-left: 1px solid #cccccc;
text-align: left;
table-layout: auto;
}
td.mipage1{
/* table-layout: fixed; */
width:30%;
border-left: 1px solid #cccccc;
text-align: left;
table-layout: auto;

}
td.mipage2{
/* table-layout: fixed; */
width:70%;
border-left: 1px solid #cccccc;
text-align: left;
table-layout: auto;
	background-color: #313e48;
	/* background-color: #1e252b; */
}
td.centrer {
	vertical-align: middle;
	color : #ffffff;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	 background-color : #73714f;
	 width : 40px;
}
td.datenull {
	vertical-align: middle;
	color : #ffffff;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-left: 20px;
	padding-bottom: 20px;
	padding-top: 20px;
	 background-color : #73714f;
	 width : 150px;
	 
}
td.date {
	vertical-align: middle;
	color : #ffffff;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;

	 background-color : #73714f;
	 width : 150px;
	 
}
td.date:hover {
    cursor: pointer;
}
td.centrerI {
	vertical-align: middle;
	color : #ffffff;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #b2b299;
	 background-color : #d8dcd3;
	width : 80px;
	min-width: 8em;
}
td.centrerW {
	vertical-align: middle;
	color : #ffffff;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	 background-color : #96947b;
	max-width : 100px;
}
td.centrerClair3 {
	vertical-align: middle;
	color : #000000;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	 background-color : #c4cbbd ;
	 height : 10px;
	 max-height : 10px;
	 width : 100px;
	 white-space:nowrap;
	 

}
td.centrerClair2 {
	vertical-align: middle;
/* vertical-align: text-bottom; */
	color : #000000;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	 background-color : #dcdbd3 ;
	 height : 10px;
	 max-height : 10px;
	 width : 100px;
	 white-space:nowrap;
	 

}
td.centrerClair5 {
	font-family: 'Cookie', cursive;
	font-size : 20px;
color: rgba( 249, 148, 45, 1);
	vertical-align: middle;
	color : #000000;
	text-align: center;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #999999;
	 background-color : #edede9 ;
	 height : 10px;
	 max-height : 10px;
	width : 100px;	
	padding-left:20px;	
	padding-right:20px;	
}
td.centrerClair4 {
	vertical-align: middle;
	color : #000000;
	text-align: left;
	padding-right:20px;	
	padding-left:20px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #999999;
	 background-color : #edede9 ;
	 height : 10px;
	 max-height : 10px;
	width : 100px;	
}
td.centrerClair {
	vertical-align: middle;
	
	color : #000000;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	 background-color : #edede9 ;
	 height : 10px;
	 max-height : 10px;
	width : 100px;	
	/* white-space:nowrap; */
	 

}
td.collection {
	vertical-align: middle;
	text-align: left;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-left : 5px;
	padding-right : 5px;
	 background-color : #0d1216;
	 width : 15%;
	 min-width: 18em;
}
td.centrerg2 {
	vertical-align: middle;
	color : #ffffff;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	 background-color : #72777a;
	 width : 40px;
}
td.centrerg {
	vertical-align: middle;
	color : #ffffff;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	 background-color : #a8a691;
	 width : 40px;
}
td.gauche {
vertical-align: bottom;
	color : #ffffff;
	text-align: left;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	/* background-color: #73714f; */
	background-color: #1e252b;
	max-height : 80px;
}
td.vide {	
vertical-align: bottom;
	color : #ffffff;
	text-align: left;
	background-color: #1e252b;
	word-wrap: break-word;
}
td.gaucheEx {
vertical-align: bottom;
	color : #ffffff;
	text-align: left;
	background-color: #1e252b;
	word-wrap: break-word;
}
.gaucheExPadding {
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
  padding-left: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
  min-width: 1400px;
  max-width: 1400px;
}
.gaucheExPaddingOnly {
  padding-left: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
}
td.gaucheSequence2 {

	border-left: 1px solid #000000;
	vertical-align: middle;
	color : #ffffff;
	text-align: center;
	background-color: #e4ddc8;
	height : 60px;
	width : 125px;
	max-width : 20%;
	min-width: 20%;
		border-left: 1px solid #3d1a0e;
	border-top: 1px solid #3d1a0e;
	border-right: 1px solid #3d1a0e;
	border-bottom: 1px solid #3d1a0e;
}
td.gaucheSequence {
/* 	padding-left : 10px;
	padding-right : 10px; */
	border-left: 1px solid #000000;
	vertical-align: middle;
	color : #ffffff;
	text-align: left;
	background-color: #3d1a0e;
	height : 60px;
	width : 125px;
	max-width : 20%;
	min-width: 20%;
}
td.heightFixe {
	height: 600px;
	width: 100%;
}
img { 
 max-width: 100%; 
/* min-width: 5%; */
/* box-sizing: border-box  */
}
.img-collection {
width:230px;
height:82px;
border-radius:10%; 
}
.img-carree {
width:60px;
min-width:60px;
height:60px;
   border-radius:50%; 
   /* transform: scale(0.8); */
/* clip-path: circle(25%) */
}
.img-carreeMedium {
width:30px;
height:30px;
border-radius:50%;
/* clip-path: circle(25%) */
}
.img-carreSmall{
width:10px;
height:10px;
   border-radius:50%; 
/* clip-path: circle(25%) */
}
.img-carreeTab {
width:80px;
height:80px;
border-radius:50%;
/* clip-path: circle(25%) */
}

.img-carreeGr {
width:250px;
height:250px;
border-radius:50%;
}
.img-carreeAdoucie {
width:60px;
height:60px;
border-radius:5%;
}
td.bandeau_gauche {
vertical-align: top;
	color : #ffffff;
	text-align: center;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	background-color: #73714f;
	/* max-height : 80px; */
	/* overflow : hidden; */
	min-height : 2048px;
	height : 2048px;
	max-width : 121px;
	min-width : 0px;
	width : 121px;
}
td{
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 12px;
}
td.up{
	border-left: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	background-color: #73714f ;
	color: #f8f556;
	font-size: 10px;
	width: 10%;
}
td.up2{
	width: 10%;
	border-left: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	background-color: #313e48 ;
font-family: 'Aboreto', cursive;
	color: #f8f556;
	font-size: 12px;
}
atitle{
 font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color:"#E8A424";
}
a.atitle{
 font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:"#E8A424";
	background-color: #333333;
    text-decoration: none;
		font-weight: bold;

}
a.atitle:hover,a.atitle:link,a.atitle:visited,a.atitle:active	{
	 font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:"#E8A424";

    text-decoration: none;
		font-weight: bold;
}


expo{
		color : #FFFFFF;
        background-color : #000000;
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}
 
a.expo:link{
        color : #FFFFFF;
        background-color : #000000;
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}
a.expo:visited{
        color : #FFFFFF;
        background-color : #000000;
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}
a.expo:hover{
        color : #FFFFFF;
        background-color : #000000;
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}
a.lien:link{
        color : #000000;
        background-color : #70E271;
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}
a.lien:visited{
        color : #000000;
        background-color : #70E271;
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}

a.lien:hover{
        color : #FFFFFF;
        background-color : #000000;
        text-decoration: none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}
a.ent:link{
        color : #FFFFFF;
        background-color : #ff0000;
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}
a.ent:visited{
        color : #FFFFFF;
        background-color : #ff0000;
        text-decoration : none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}
a.ent:hover{
        color : #FFFFFF;
        background-color : #000000;
        text-decoration: none;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size : 9px;
}

body {
 
	/* background-color:#4f6373 ; */
	background-color:#cbcdaa ;
}

.box4 {
/*     height: 40px;
display: inline-block; */

position:relative;
text-align: center;
vertical-align: middle;
height: 60px;
font-size: 22px;
font-family: 'Cookie', cursive;
color: rgba( 249, 148, 45, 1);
}
.boxError {
position:relative;
text-align: center;
vertical-align: middle;
min-height: 90px;
font-size: 40px;
font-family: 'Cookie', cursive;
color: #1e252b;;
}
.conteninfo .linkinfo{
    color: rgba(0, 8, 251, 1);
    font-size: 14px;
}
.conteninfo .linkinfo a,
.conteninfo .linkinfo a:visited,
.conteninfo .linkinfo a:active,
.conteninfo .linkinfo a:link {
    color: rgba(0, 8, 251, 1);
    font-size: 14px;
}

.Style9{
/* font-family: 'Roboto Slab', serif; */
font-family: 'Michroma', sans-serif;
padding-bottom: 20px;
font-size: 16px;
color: rgba(241, 241, 241, 0.5);
  border-top: 1px solid rgba(241, 241, 241, 0.5);
  border-left: 1px solid rgba(241, 241, 241, 0.5);
  border-bottom: 2px solid rgba(0, 0, 0, 1);
  border-right: 2px solid rgba(0, 0, 0, 1);
}
.Style17 {
position:absolute;
z-index:3;
padding-left: 15px;
padding-top: 8px;
width : 25px;
height : 25px;
}
.Style7 {
position:absolute;
z-index:1;
}
.Style8{
top: 8px;
left: 50px;
position:absolute;
width : 90%;
z-index:2;
}
.styleLigne{
white-space: nowrap;
}
.red {
	font-family: 'Jura', sans-serif;
	font-size:20px;
	padding-left: 5px;
	color: #ff0000;
}
.Style1 {
padding-left: 5px;
color: #fffee4;
}
.Style2 {
/* font-family: 'Montserrat', sans-serif; */
font-family: 'Jura', sans-serif;
font-size:15px;
padding: -1px;
color: rgba(20, 20, 20, 1);
/* color: rgba(255, 20, 20, 0.9); */
 display:inline-block;
/* white-space:nowrap; */
}
.Style2 a{
padding: -1px;
color: #1e252b;
font-family: 'Jura', sans-serif;
font-size:15px;
}
.Style2 a:link {
padding: -1px;
color: #1e252b;
font-family: 'Jura', sans-serif;
font-size:15px;
}
.Style2 a:visited {
padding: -1px;
color: #1e252b;
font-family: 'Jura', sans-serif;
font-size:15px;
}
.Style2 a:active {
padding: -1px;
color: #1e252b;
font-family: 'Jura', sans-serif;
font-size:15px;
}
.Style3 {
font-family: 'Jura', sans-serif;
color: #f8f556;
font-size: 10px;
}
.Style5 { 	
font-family: 'Aboreto', cursive;
/* padding: 10px; */
text-align: left;
color: #dbd3dc;
font-size: 150%;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
.Style18 {
color: rgba(245, 245, 241, 1);
font-family: 'Cookie', cursive;
font-size: 40px;
padding-left : 10px;
padding-bottom : -10px;
background-color : #4E5256;
}
.Style6 {
color: rgba(245, 245, 241, 1);
font-family: 'Jura', sans-serif;
font-size: 15px;
padding-left : 10px;
padding-bottom : -10px;
}
.Style6 a{
font-family: 'Jura', sans-serif;
font-size: 15px;
color: rgba(245, 245, 241, 1);
}
.Style6 a:link{
	font-family: 'Jura', sans-serif;
font-size: 15px;
color: rgba(245, 245, 241, 1);
}
.Style6 a:visited{
	font-family: 'Jura', sans-serif;
font-size: 15px;
color: rgba(245, 245, 241, 1);
}
.Style6 a:hover{
	font-family: 'Jura', sans-serif;
font-size: 15px;
color: rgba(245, 245, 241, 1);
}
.Style6 a:active{
	font-family: 'Jura', sans-serif;
font-size: 15px;
color: rgba(245, 245, 241, 1);
}
.Style4 {
	font-family: 'Aboreto', cursive;
	padding-left : 10px;
	color: #dbd3dc;
	font-size: 150%;
	text-align: left;
/* 	font-style: italic; */
	height: 10px;
}
.Style4 a:link{
color: #000000;
padding: -1px;
}
.Style4 a:hover{
color: #b0770a;
padding: -1px;
}
.Style4 a:visited{
color: #000000;
padding: -1px;
}
.Style4 a:active{
color: #000000;
padding: -1px;
}
.Style3 {
/* padding: -1px; */
color: #f8f556;
font-size: 10px;
}


#mapid { height: 100px; }
input, textarea, select, option {
color : #000000;
font-size : 14px;
 font-family :Georgia, Verdana;
 background-color:#eaead4;
 
 }
 input[type="checkbox"]#fileinputCheckbox:checked {
  background-color: #6c4422 !important;
   outline: none;!important;
}
input[type=submit], input[type=reset]{
 width:110px;
 height:30px;
  font-size : 20px;
 margin-left:5px;
 	background-image:url("https://www.classeinteractive.com/ecoles/skin/butterfly/boutonsubmit.png"); 
		font-family: 'Cookie', cursive;
 box-shadow:1px 1px 1px #d5c997;
 cursor:pointer;
 }
#inputField{
	padding-top:10px;
	text-align: center;
}
#inputField input{
	background-color: #1e252b;
	color:#999999;
	font-size : 30px; 

}
#new_text {
	position: absolute;
	padding-top:10px;
	text-align: center;	
	font-size : 20px;
	z-index:1000;
	user-select: none;
}
#sketch-full-holder{
}
 /* #sketch-holder { */

	/* /* border-top: 3px solid #000000; */ */
	/* /* background-color:#cbcabd; */ */
	/* /* background-color:#333333; */ */
	/* /* box-shadow: 2px 2px 2px #d5c997; */ */
	/* /* border-left: 2px solid #999999; */ */
  /* margin-left:1.8%; */
  /* margin-right:1.8%; */
/* }   */
#sketch-holder, #back-holder, #menu-holder {
		/* border-top: 3px solid #000000; */
	/* background-color:#cbcabd; */
	/* background-color:#333333; */
	/* box-shadow: 2px 2px 2px #d5c997; */
	/* border-left: 2px solid #999999; */
  margin-left:1.8%;
  margin-right:1.8%;
    /* position: relative;  Positionnement relatif pour les conteneurs */
}
/* #id_canvas { */
    /* position: relative; */
/* } */
#application, #applicationBack, #applicationMenu {
	  /* margin-left:1.8%; */
  /* margin-right:1.8%; */
    /* position: absolute;  Positionnement absolu pour les canvases */
    /* top: 0; */
    /* left: 0; */
}
#tempCanvas {
  width: 800px;
  height: 800px;
  background-color:#333333;
  display:none;
} 
 #test {
  width: 608px;
  height: 304px;
  border-top: 3px solid #000000;
  background-color:#31414e;
  border-left: 2px solid #111111;
  border-top: 2px solid #111111;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  margin: 0 10px;
}
#chart {
  width: 638px;
  height: 334px;
  border-top: 3px solid #000000;
  background-color:#31414e;
  border-left: 2px solid #111111;
  border-top: 2px solid #111111;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  margin: 0 10px;
}
#inputhide {	
position: absolute;
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
#inputhide_verif {	
position: absolute;
	border: 0;
	clip: rect(500 100 500 100);
	height: 30px;
	margin: -1px;
	/* overflow: hidden; */
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 500px;
}
.boxNoFlex {
	background-image:url("https://www.classeinteractive.com/ecoles/skin/butterfly/gris.jpg");
	background-repeat: no-repeat;
 	padding-top: 5px;
    padding-bottom: 30px
}
.flow {

}
 .box {
display: flex;
padding-top: 10px;
padding-right: 10px;
}
 .boxfull {
display: flex;
}
.boxfullcentrer {
  display: flex;
  justify-content: center; /* Centre les éléments enfants horizontalement */
  margin: auto; /* Centre le conteneur Flexbox lui-même */
}
 .boxImga {
display: flex;
padding-top: 10px;
padding-left: 10px;
  background-color: #5C97BF;
}
 .box2 {
display: flex;
width: 88%;
padding-top: 10px;
padding-bottom: 8px;
padding-right: 10px;
padding-left: 10px;
vertical-align:middle;
}
 .box3 {
display: flex;
 width: 88%;
height: 20px;

} 
.boxConso {
width: 608px;
height: 304px;
display: flex;
  background-color: #1e252b;
}
#myform{
  display: flex;
  height: 30px;
}
#myform input[type=text]{
  padding: 5px 15px;
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-right: none;
  height: 20px;
}
#myform input[type=text]:first-of-type{
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#myform input[type=text]:last-of-type{
  border-right: 1px solid #bbb;
}
#myform button {
  padding: 5px 15px;
  border-right: 1px solid #537EA5;
  border-top: 1px solid #537EA5;
  border-bottom: 1px solid #537EA5;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #5C97BF;
  color: #fff;
}
/* Remplacement d'overlib pour les textes d'aide sur la page de tAClACchargement */
.overtext {
	z-index:100;				/* Pour Aatre au-dessus de tout */
	position:absolute;			/* Pour ne pas prendre de place dans la page */
	visibility:hidden;			/* A?lACment normalement invisible */
	/* Bord noir, massif, 1 pixel de large */
	max-width:650px;
	background-color:#cccccc;	/* Couleur de fond, pour contraster (gris moyen) */
	border:1px solid #000000;			/* Largeur maximale */
	padding:5px;				/* Marge sur tous les bords. */ 
	color: #000000;				/* Texte noir */
	text-align:left;			/* Alignement A  gauche */
	font-size: 1em;
	/* padding-left : 5px; */
}
	
a:hover + .overtext {			/* A?lACment qui suit le lien sous la souris */
visibility:visible;			/* Il devient visible. */
}
	
.overtext2 {
	z-index:100;				/* Pour Aatre au-dessus de tout */
	position:absolute;
	visibility:hidden;
	max-width:500px;			/* Largeur double */
	background-color:#cccccc;	/* Couleur de fond, pour contraster (gris moyen) */
	border:1px solid #000000;			/* Largeur maximale */
	padding:5px;				/* Marge sur tous les bords. */ 
	color: #000000;				/* Texte noir */
	text-align:left;			/* Alignement A  gauche */
	font-size: 1em;
}
.overtext3 {
	z-index:100;				/* Pour Aatre au-dessus de tout */
	position:absolute;
	visibility:hidden;
	max-width:950px;			/* Pour l'aide sur les commentaires */
	background-color:#cccccc;	/* Couleur de fond, pour contraster (gris moyen) */
	border:1px solid #000000;			/* Largeur maximale */
	padding:5px;				/* Marge sur tous les bords. */ 
	color: #000000;				/* Texte noir */
	text-align:left;			/* Alignement A  gauche */
	font-size: 1em;
	}
a:hover + .overtext2 {			/* A?lACment qui suit le lien sous la souris */
visibility:visible;			/* Il devient visible. */
}
a:hover + .overtext3 {			/* A?lACment qui suit le lien sous la souris */
visibility:visible;			/* Il devient visible. */
}	
/* Code de clignotement de l'aide du bouton de gAColocalisation */
.blink {
	animation: blinkN 2s infinite;
}
.blinkAd {
	animation: blinkAD 2s infinite;
}
@keyframes blinkN {
	0% { }
	50% { color:#5e7764; background-color: #5e7764; } 
}
@keyframes blinkAD {
	0% { }
	/* rgba( 5, 25, 30, 0) */
	50% { color:rgba( 5, 25, 30, 1); background-color: rgba( 5, 25, 30, 0); } 
}
/* Style de l'A"il commandant le survol dans les pages de familles */
span.olpasol {
	color: #555555;
	margin-left: 1px;
	padding-right: 8px;
	font-size: 14px;
	}
div.inputp {
	float: left;
	padding-left: 20px;
	padding-top: 20px;
	width: auto;
	height: auto;
	line-height: 1.4;
}
div.item {
	width: 100%;
	text-align: left;
	background-color: #e9ebed;
	border-top: 1px solid #a89443;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #a89443;
	border-right: 1px solid #000000;
	padding-left: 3px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 1px;
	display: inline-block;
	height: 17px;
	font-family: 'Aboreto', cursive;
	font-size: 14px;
	color: #1e252b;	
	background-color: rgba( 180, 183, 201, 0.8);
}
div.item a:link {
	background-color: #d5c997;
	color: #000000;
}
div.item a:visited {
	background-color: #d5c997;
	color: #000000;
}
div.item a:hover {
	background-color: #d5c997;
	color: #000000;
}
div.item a:active {
	background-color: #d5c997;
	color: #000000;
	}
div.rowgen {
	float: left;
	margin: 5px;
	width: 98%;
	height: auto;
	line-height: 1.4;
	}
#sgen1 {
	float:left;
	background: none;
	width: 25%;
	}
#sgen2 {
	float:left;
	background: none;
	width: 25%;
	}
#sgen3 {
	float:left;
	background: none;
	width: 25%;
	}
#sgen4 {
	float:left;
	background: none;
	width: 25%;
	}
#rowaut {
	background-image: url("../img_pack/sr.jpg");
	background-repeat: no-repeat;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
	width: 850px;
	height: 230px;
	max-width: 95%;
	}
#rowfichier {
	background-image: url("../img_pack/mm.jpg");
	background-repeat: no-repeat;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
	width: 850px;
	height: 230px;
	max-width: 95%;
	}
#rowpays {
	background-image: url("../img_pack/cc.jpg");
	background-repeat: no-repeat;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
	width: 850px;
	height: 230px;
	max-width: 95%;
	}
#pays1 {
	float:left;
	background: none;
	}
#pays2 {
	color: #000000;
	float: right;
	background: none;
	margin-top: 10px;
	padding-right: 20px;
	text-align: right;
	}
#pays3 {
	clear: both;
	line-height:0;
	}
#pays4 {
	float:left;
	background: none;
	}
div.pavegen {
	float: left;
	margin-top: 3px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 3px;
	width: 24%;
	height: auto;
	line-height: 1.4;
	text-align: left;
	border-left: 1px solid #006699;
	background-color: #a89443;
	display: inline-block;
	min-width: 125px;
	}
div.pavegen a:link {
	background-color: #d8d8ae;
	font-weight: normal;
	color: #000000;
	}
div.pavegen a:visited {
	background-color: #d8d8ae;
	color: #000000;
	}
div.pavegen a:hover {
	background-color: #d8d8ae;
	color: #000000;
	}
div.pavegen a:active {
	background-color: #d8d8ae;
	color: #000000;
	}
rowgen.accc a:link {
	background-color:#272727;
	color:#FFFFFF;
	}
rowgen.accc a:visited {
	background-color:#272727;
	color:#FFFFFF;
	}
rowgen.accc a:hover {
	background-color:#272727;
	color:#FFFFFF;
	}
rowgen.accc a:active {
	background-color:#272727;
	color:#FFFFFF;
	}
	
@media screen { 
	.hasJS {
		background-color:#000000 ;
	} 
	.Exercice {
		background-color: #b9b093;
	}
	.Video {
		background-color: #734f51;
	}
	.Accueil {
		background-color: #5e7764;
	}	
	.Parcours {
		background-color: #0d1216;
		/* background-image: url("https://www.classeinteractive.com/ecoles/skin/butterfly/fog.png");  */
	}
	.Photo{
		background-color: #0d1216;
	}	
	.Public {
		background-color: #a5957c;
	}
}
@media screen and (min-width: 768px) { /* Ajustez la valeur selon vos besoins */
    #mobileContent {
        display: none;
    }

}
@media screen and (max-width: 600px) {
	html, body {
    max-width: 100%;
    overflow-x: hidden;
	}
	.photogauche {
	  float: left;
	  padding-right: 10px;
	  width: 100px;
	  margin: 0;
	 }
	 .photodroite {
	  float: right;
	  padding-right: 10px;
	  width: 100px;
	  margin: 0;
	 }
}
.noscrollhorizontal{
    overflow-x: hidden;
}