body
 {
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
 	word-wrap: break-word;
     padding: 0px;
     margin: 0px;
    
}

#entetegenerale{/* =cadre general----------------------------------------------- */
    padding-right: 15px;
	padding-left: 15px;
    padding-top: 0px;
    background-color: #D5D5D5;
    
}
/*************************entete générale physique chimie   et choix des classes********************************************************/
entete
{
    display: flex;
    justify-content: space-between;

}

#site-title a:hover { 
    color: #14a6d6; /*titre physique chimie entete*/
       
}


#header-logo-image {
	float: left;
	padding: 0 10px 0 0;/*marge entre le logo et physique Chimie*/
	
}

#header-logo-image img {
	margin-bottom: 0px;
	max-height: 100px;

	
}
#header-text {
	float: left;
	padding-bottom: 0px ;/*place le menu de droite sur la partie haute du cadre blanc*/
}

#site-title a {
	color: #444444;
	font-size: 36px;
}




nav3 li > ul,
nav3 li > ol {   /*menu entet*/
	margin: 0;

}
nav3 a:hover/*position du sous-ligne du menu*/
{
    color: dodgerblue;
    border-bottom: 5px solid dodgerblue;
    padding-bottom: 8px;
 ; 
}
nav3 > ul > li{
    float: right;
    position: relative;
     
}

nav3 ul{
       list-style-type:none;  /*pas de puce dans la liste*/
}


.main-navigation {  /*entete générale haut droit*/
	float: right;
	padding-top: 2px;
}
.main-navigation li {
	float: left;
	position: relative;
	padding: 0 0 0 25px;
	font-family: 'Lato', sans-serif;
}
.main-navigation ul li a {
	font-size: 16px;
}

.main-navigation a {
	color: #444444;
	display: block;
	float: left;
	padding: 10px 0 0;
	height: 30px;
    text-decoration: none; /*evite un double sous-lignement*/
    
}




/***************************************************  menu de navigation devoirs************************************************************/

.header-title {     /***************  titre de la classe *********************************/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:30px;  /*taille police*/
	font-weight:bold;
	color:white;/*couleur texte*/
	text-align: center;
	line-height:60px; /*taille cadre*/
    margin-top: 0px;/*marge supérieure*/
    margin-bottom: 0px;
    background-color:  #5071B5 ;
    
}



nav{
    font-family: 'Century Gothic', 'Source code pro', Verdana, serif;
    width: 100%;
    background-color: #5071B5 ;                                     /* #2D59B5 #3453B5 #5071B5 #544ddc   #ff004e  /*couleur fond*/
}
nav ul{
       list-style-type:none;  /*pas de puce dans la liste*/
}
nav > ul{
    margin: 0px;
    padding: 5px;
}
nav > ul::after{
    content: "";   /*permet d'afficher le menu devoirs*/
    display: block;  /* affichage correct des chapitres avec photos*/
    clear: both;
}

nav > ul > li{
    float: left;
    position: relative;
}
nav a{
    display: inline-block;
    text-decoration: none;
}
nav > ul > li > a{
    padding: 5px 20px;/*marge haut et marge gauche sur 2eme menu*/
    color: #FFF;
}
.submenu{
    display: none; 
}/*menu caché si pas de souris desssus*/
nav li:hover .submenu{
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
    z-index: 100000;/*permet d'afficher les sous-menus sur les menus(pas de superposition)*/
      list-style-type: none;
    text-align: center;

    
}
.submenu li{
    border-bottom : 1px solid #CCC;/*fine bordure entre chaque sous-menu*/

}
.submenu li a{
    padding: 5px 5px;
    font-size: 17px;
    width: 600px;  /*largeur sous-menu*/

     
}
nav > ul > li:hover a{
    padding: 5px 20px 5px 20px;  /* marges texte du sous-menu*/
    

}
.menu-TP:hover{
    border-top: 5px solid #ff004e;
    background-color: RGBa(228, 77, 38, 0.15);
}


.submenu li:hover a{
    color:#ff004e;/*#EEE;*/
    font-weight: bold;
     
}
.menu-TP .submenu{
    background-color:  #D5D5D5;  /*couleur de fond des sous-menus devors TP*/
}
.menu-TP .submenu a:hover{
    background-color: black;
}

.menu-mobile{
	background-color:   #D5D5D5;
	text-align: center;
	padding: 12px 0;
	display: none; /*cache "afficher menu" secran large*/
}
nav input[type=checkbox]{
    display: none;
}
nav input[type=checkbox]:checked ~ ul{
    display: block;
}
@media screen and (max-width : 970px){
    .menu-mobile {
	display:block;
    }
    nav ul{
	display: none;
    }
    nav ul li, nav ul li a {
	width: 100%;
        text-align: center;
    }
    nav ul li a, nav ul li:hover a{
        padding: 10px 0px 10px 0px;
    }
    nav li:hover .submenu{
        display: block;
        position: static;
    }
}


/**************************************  fin menu de navigation devoirs************************************/

/************************************* corps général des cours *********************************************/

/***************** cadre gauche annexes ****************************************/
 #cadrage
{
    display: flex;
    flex-wrap: wrap;
    
}
.cadre {
        width: 400px;  /*  largeur du cadre de gauche presentation des cours, mais annulé dans cadre central par gird*/

    }

.cadre:nth-child(1) {
       flex: 1;
    background-color:white;/*#D5D5D5*/
  
    }
.cadre:nth-child(2) {
       flex: 5;
    background-color: white;
    padding:10px;
    padding-left: 0px;
    }


.ligne1
		   {
	   	   background			  : transparent;
		   border-color			  : transparent;
		   border-width			  : 0 0 6px;
		   border-style			  : solid;
           width: 300px;
           margin: auto;
           
		   }
.ligne2
		   {
	   	   background			  : transparent;
		   border-color			  : transparent;
		   border-width			  : 0 0 16px;
		   border-style			  : solid;
           width: 100px;
           margin: auto;
           
		   }
.ligne3
		   {
	   	   background			  : transparent;
		   border-color			  : transparent;
		   border-width			  : 0 0 1800px;
		   border-style			  : solid;
           width: 800px;
           margin: auto;
           
		   }
.Sous-titre2 {   /*sous titre cadre gauche*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:bold;
	color:#1B60AA;
	text-align:center;
	line-height:20px;
	}

.revisions a:hover{
    color:#EEE;
    background-color: black;
  
    text-decoration: none;
    width:90%;/*cadre noir jusqu'au bord droit du sous menu*/
}

.revisions a{
    color:#1B60AA;
  
}



/*********************** cadre droite cours **********************************/
.Sous-titre4 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:30px;
	font-weight:bold;
	color:#1B60AA;
	padding:5px;
	line-height:20px;
    margin-top: 10px;
    background-color: #D5D5D5;
    padding-bottom: 15px;
    padding-top: 10px;
    word-wrap:break-word;
   
	}



.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 0 5px;
	max-width: 2000px;   /*largeur generale*/
	list-style: none;
	text-align: center;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px ;/*marge autour des photos des chapitres*/
    margin-bottom: 0px;/*marge nulle au-dessous pour placer les elements deu chapite*/
	min-width: 205px; /*205*/    /* taille cadre image**************************************************************************/
	max-width: 307px;/*307*/
	max-height: 200px;
	width: 100%;
	background: white;/*#3085a3*/
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	opacity: 0.8;
    
          
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;  /*permet de mettre tout le texte en majuscule meme si ecrit en minuscule*/
    font-size:2em;                                 /* taille police du titre qui s'affiche avec hover**********************************/
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}


.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 span {
	font-weight: 500;               /*taille police titre sur image***********************************************************/
}

.grid figure h2,
.grid figure p {
	margin: 0;
   
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 80%;
}

.thegrid .figure {
	position: relative;/*position texte dans la photo*/
	overflow: hidden;
	
	display: block;
	max-width: 800px;
	max-width: none;
	max-height: 200px;
	height: auto;
	text-align: center;
	cursor: pointer;
    
	
}

.thegrid .figure img {
	
	display: block;
	min-height: 200px;   /******taille image presentation theme cours à gauche */
	max-width: 400px;
	opacity: 0.8;
	width: 100%;
    
    
}


.thegrid .figure .capt {
	background: transparent;
	color: #fff;
	padding: 10px;
	margin: 20px 30px;
	line-height: 18px;
	position: absolute;/*met le texte fond noir dans la photo*/
	bottom: 10px;
	-webkit-transition: 5s;
	transition: 5s;
    	font-family: verdana, arial, sans-serif;
opacity: 0.9;


	border-radius: 10px;
}


.thegrid .figure:hover .capt {
	background: #7a6855;
	
}


   /****** effet sur photo  **************************/
figure.effect-lily2 img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0, 0);
	transform: translate3d(-40px,0,0);
}

figure.effect-lily2 figcaption {
	text-align: left;
}

figure.effect-lily2 figcaption > div {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	height: 50%;  /*hauteur titre sur photo*******************************/
}

figure.effect-lily2 h2,
figure.effect-lily2 h3,
figure.effect-lily2 p {
	-webkit-transform: translate3d(0px,40px,0px);
	transform: translate3d(0px,40px,0px);
    color: white; /*couleur police titre chapitre*/
    background-color: black;
    font-size:15px;
    opacity: 0.7;
}

figure.effect-lily2 h2 
figure.effect-lily2 h3 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}



figure.effect-lily2:hover img,
figure.effect-lily2:hover p {
	opacity: 1;
}

figure.effect-lily2:hover img,
figure.effect-lily2:hover h2,
figure.effect-lily2:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-lily2:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}


  /****** fin effet sur photo  **************************/






/****** effet sur photo GC **************************/
figure.effect img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	opacity: 1;
	
}

figure.effect figcaption {
	text-align: left;
}

figure.effect figcaption > div {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	height: 50%;  /*hauteur titre sur photo*******************************/
}

figure.effect h2,
figure.effect h3,
figure.effect p {
	-webkit-transform: translate3d(0px,40px,0px);
	transform: translate3d(0px,40px,0px);
    color: white; /*couleur police titre chapitre*/
    background-color: black;
    font-size:15px;
    opacity: 0.7;
}

figure.effect h2 
figure.effect h3 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}



figure.effect:hover img,
figure.effect:hover p {
	opacity: 1;
}

figure.effect:hover img,
figure.effect:hover h2,
figure.effect:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}


  /****** fin effet sur photo GC**************************/



/****** cadres sous l'image du cours  **************************/

/******** boite ********/
#conteneur
{
    display: flex;
       /*flex-direction: column;*/
    
    /*   flex-direction: column-reverse;*/
    
    /*flex-wrap: wrap;*/
    
    /*justify-content: space-around;*/
    
    /*   flex-direction: column;
    justify-content: center;
    height: 350px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
    
    /* justify-content: center;
    align-items: center;*/
}

.composant
{
    
    width: 105px;
    height: 20px;
}

.composant:nth-child(1)/*marge gauche*/

{
    text-decoration-color: black;
    background-color: transparent;/*mediumvioletred*/
  width: 10;  
}
.composant:nth-child(2)
{
    color: black;
    background-color: aqua;
     width: 77;  
}
.composant:nth-child(3)
{
    color: black;
    background-color: deepskyblue;
 width: 77; 
}
.composant:nth-child(4)

{
    color: black;
    background-color: dodgerblue;/*mediumvioletred*/
    width: 77; 
}
.composant:nth-child(5)

{
    color: black;
    background-color: royalblue;/*mediumvioletred*/
    width: 77; 
}
.composant:nth-child(6)/*marge entre 2 photos*/

{
    color: black;
    background-color: transparent;
   width: 10;  
}



#conteneur3
{
    display: flex;
       /*flex-direction: column;*/
    
    /*   flex-direction: column-reverse;*/
    
   flex-wrap: wrap;
    
    /*justify-content: space-around;*/
    
    /*   flex-direction: column;
    justify-content: center;
    height: 350px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
    
    /* justify-content: center;
    align-items: center;*/
}




.composant3:nth-child(1)
{
    
    background-color: transparent;
       
}
.composant3:nth-child(2)
{
    
    background-color: transparent;
 
}
.composant3:nth-child(3)

{
    
    background-color: transparent;
    
}
.composant3:nth-child(4)
{
    
    background-color: transparent;
      
}
.composant3:nth-child(5)
{
    
    background-color: transparent;

}
.composant3:nth-child(6)

{
    
    background-color: transparent;
    
}


#conteneur4
{
    display: flex;
    flex-direction: column;
    
    /*   flex-direction: column-reverse;*/
    
    flex-wrap: wrap;
    
    /*justify-content: space-around;*/
    
    /*   flex-direction: column;
    justify-content: center;
    height: 350px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
    
    /* justify-content: center;
    align-items: center;*/
}

.composant4
{ 
  
}
.composant4 a:hover {
	color: white !important;  /*couleur texte si hover*/
}


.composant4:nth-child(1)
{
    
    background-color: transparent;
     width: 330px;  
    height: 210px;
}
.composant4:nth-child(2)
{
    
    background-color: transparent;
    height: 20px; 
    width: 330px;
}

/****** fin cadres sous l'image du cours  **************************/

 /*********************************** pied de page  **************************************************************/

#conteneur2
{
    display: flex;
	justify-content: space-around;
    flex-wrap:wrap;
    color: #999999; /*couleur de base du texte dans pied page */
    background-color:#333333;  /*couleur fond du pied de page*/  
}

.title-pied {
	text-align: left;
	color: #D5D5D5;
    border-bottom: 3px;
    border-bottom: solid;
    border-bottom-color: dodgerblue;
    width: 100%;
}
 
.footer-area a {
	color: #D5D5D5 !important;  /*couleur texte pied page si sous ligné */
}
.footer-area a:hover {
	color: #00FFFF !important;  /*couleur texte si hover*/
}
/*******************************************************************************************************************/



 /*********************************** page accueil index  **************************************************************/

.accueil0:hover img {
	opacity: 0.9;
	-webkit-transition: 2s;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}
.accueil0{/*  specifique à la photo suscinio vue du ciel dans acuueil qui donne une marge en bas de la photo*/
    width: 1268px;/* largeur obligatoire pour être centré */
     max-width: 100%;
	overflow: hidden;/*limite la taille de l'image à page en hover*/
	width: 100%;/*taille image-----------------------------------------------*/
	max-width: 1268px;
	height: auto;
  
	
}

.accueil0 img{
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}


#page{/* =cadre general----------------------------------------------- */
    padding-right: 15px;
	padding-left: 15px;
    padding-top:5px;
    max-width: 1268px;
	margin:  auto;/* =centre le bloc au milieu de la page----------------------------------------------- */
	background-color: #FFFFFF;

	box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}





.accueil{/*  specifique à la photo suscinio vue du ciel dans acuueil qui donne une marge en bas de la photo*/
    width: 1300px;/* largeur obligatoire pour être centré */
     max-width: 100%;

    margin-left: auto;
    margin-right: auto;
   margin-bottom: 10px;
  

	position: relative;/*position texte dans la photo*/
	overflow: hidden;
	width: 100%;/*taille image-----------------------------------------------*/
	display: block;
	max-width: 800px;
	max-width: none;
	max-height: 440px;
	height: auto;
	text-align: center;
	cursor: pointer;
	
}

.accueil img{
	
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
	width: 100%;
}


.accueil  .capt {
	background: transparent;
	color: #fff;
	padding: 10px;
	margin: 20px 30px;
	line-height: 18px;
	position: absolute;/*met le texte fond noir dans la photo*/
	bottom: 10px;
	-webkit-transition: 5s;
	transition: 5s;
    	font-family: verdana, arial, sans-serif;
opacity: 0.9;

	border-radius: 10px;
}

.accueil img {
	/*max-width: none;*/
	max-width: 100%;
	height: auto;
	-webkit-transition: opacity 2s, -webkit-transform 2s;
	transition: opacity 2s, transform 2s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.accueil:hover img {
	opacity: 1;
	
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}


.accueil:hover .capt {
	background: #7a6855;
	
}






.imageflottantegauche
{
    float: left;
    margin-right: 10px;
    width:300px;
    height:225px;
    
}

.imageflottantedroite
{
    float: right;
    width:300px;
    height:225px;
}





formations{
    {
        width: 100%;
        flex-direction: column;
    }
}
#fond-formation {/*fond gris sur nos formations*/
	padding-top: 15px;
	padding-bottom: 15px;
    padding-left: 30px;
    background-color:   #D5D5D5;
   
}
h7 {
    font-size: 45px; line-height: 20px;text-align:center;
}
    #monmenu {
	FONT-WEIGHT: bold;
    FONT-SIZE: 90%; 
    FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu ul ul {
	BORDER: #b0b0b0 1px solid;
    PADDING: 0px; 
    DISPLAY: none;
    LEFT: 285px;/*decalage du contenu des sous-menus*/
   
    POSITION: absolute;
    TOP: -1px;/*meme niveau conteu et seconde*/
    width: 630px;/*largeur cadre du contenu sousmenu(matieres)*/
    font-size: 20px;
   

}
#monmenu li {
	PADDING: 2px; 
    MARGIN: 0px; 
    LIST-STYLE-TYPE: none;
    POSITION: relative;
    BACKGROUND-COLOR:#e0e0e0;
   
}
#monmenu li:hover {
	BACKGROUND-COLOR:white;
     color: black;
   
}


#monmenu li:hover ul.niveau2 {
	DISPLAY: block;
    list-style-type:none;  /*pas de puce dans la liste*/
}
.niveau1 li{
    width: 280px ;
    font-size: 25px;/*taille police seconde premiere terminale*/
    padding-right: 500px;
     list-style-type:none;  /*pas de puce dans la liste*/
}

.niveau2 li{
    width: 630px ;
    font-size: 20px;/*taille police seconde premiere terminale*/
    list-style-type:none;  /*pas de puce dans la liste*/
}

.niveau2 li a{
    font-size: 13px;
    color: #444444;
    padding-left:10px
}
/*******************************************************************************************************************/





@media all and (max-width: 1674px)  /*l'élément disparait sur petit ecran*/
{
   aside0 {
        display: none;
    }
}







/**boite aux lettresfichier*********************************************************************************************************/

.header-post-title-class {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:30px;
	font-weight:bold;
	color:#1B60AA;
	text-align: center;
	line-height:36px;
}                                                         /*titre général boite aux lettres*/

.Sous-titre {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:bold;
	color:#1B60AA;
	text-align:left;
	line-height:20px;
	}

a:link.lien-texte {
	color:#000000;
	text-decoration:underline;
	}

a:hover.lien-texte {
	color:dodgerblue;
	text-decoration:underline;
	}
section
{
    display: flex;
    justify-content: space-between;

}



article
{
    margin-right: 5px;
    flex: 3;
}