body
{
  min-width: 320px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 2px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-left: 2px;  
	margin-right: 2px;
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
	background-color: rgb(153, 221, 255);
   font-family: "Microsoft sans serif";
   font-size: 100%;
   color: black;   
}
 
   /*  code pour les Modals */
.myBtn
 {font-size: 90%;
 margin-right: 20px;
 font-weight: bold;
 border:2px solid #888;
 padding: 2px;
  }
 
 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: relative; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 70%;
 }

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
 
  
#bloc_page
{
  margin: auto;
  display: flex;
  flex-direction: column;
 }

#bloc_page img
 {max-width: 100%;
  border-radius:10px;
 }

  
#langue
{text-align: center;}
	
#selected
{ background-color: #5f91ec;}
  
.gras
{
   font-weight: bold;
   }
   
a /* Tous les liens dans le corps */
{
   color: black;
   text-decoration: none;
}

   a:hover /* Quand on pointe sur un lien dans le corps */
{
  background-color: rgb(153, 221, 255);
  color: black;
}
/* Quelques effets sur les listes */
.square
{   
  list-style-type: square;
}
 
/* L'en-tête */
header
{
   width: 98%;
   margin: auto;
    background-color:rgb(204,238,255);
   color: black;
   border: 2px solid black;
   border-radius:10px;
   display: flex;
   justify-content: space-around;
   padding: 5px;
   margin-bottom: 5px;
      }

	  .el_header:nth-child(1)
	  {order: 1;}
	  .el_header:nth-child(2)
	  {order: 2;}
	  .el_header:nth-child(3)
	  {order: 3;}
	  
	  /* boite titre avec le titre et les boites logo et banner */
   #titre
{
	
	display: flex;
	flex-direction: column;
    align-items: center;
	margin: auto;
	justify-content: center;
	text-align: center;
	padding: 5px;
	
	}
	
#taille_pol
	{font-size: 150%;
	font-weight: bold;}
		  /* boite logo et les boites logo et banner */
	
	.el_titre:nth-child(1)
	  {order: 1;}
	  
	  .el_titre:nth-child(2)
	  {order: 2;}
	
	h1 strong
	{font-weight: bold;}
		
 #logo_banner
{
	display: flex;
	flex-direction: row;
    align-items: center;
	margin: 0px;
		}
	
	#logo_banner img
	{
		border: none;
	}
	
#logo_pch
{
     background-color:rgb(204,238,255);
	display: flex;
}
	
#banner
{
  
	display: flex;
	  }
.el_logo-ban:nth-child(1)
	  {order: 1;}
.el_logo_ban:nth-child(2)
	  {order: 2;}

	
#photo1
{
      display: flex;
         
   }	


#photo3
{
     display: flex;
       	}

		
header img		
{border: 2px solid black;
    border-radius:10px;		
		
}
				
		
section
{
  display: flex;
   flex-direction: row;
   justify-content: flex-start;
   width: 99%;
  margin: auto;
   margin-bottom: 5px;
   padding: 5px;
   color: black;
     background-color:rgb(204,238,255);
   border: 2px solid black;
   font-size: large;
   border-radius:10px;
   
	
   }

 
section nav
{
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 100%;
   color:black;
   font-family: "Book Antiqua";
   font-weight: bold;
   background-color:rgb(204,238,255);
   border: 2px solid black;
   line-height: 25px;
   margin-bottom:5px;
   border-radius:10px;
   margin-right: 5px;
   align-content: stretch;
   
}


.flash
{
-webkit-animation-name: example1; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example1;
    animation-duration: 1s;
	 animation-iteration-count: infinite;
	 }
	    
/* The element to apply the animation to */
	 
 @keyframes example1 {
    from {color: black;}
    to {color: red;}
}

#encours
{
  background-color: rgb(153, 221, 255);
}

#menu
{
text-align: center;	
}

.encours_index
{
color: purple;	
}

a /* Tous les liens se trouvant dans un menu */
{
   color: black;
   text-decoration: none;
}
a:hover /* Quand on pointe sur un lien du menu */
{
 background-color: rgb(153, 221, 255);
  color: black;
}

/* Quelques effets sur les menus */
.square
{   
  list-style-type: square;
}
.disque
{   
  list-style-type: disc;
}


.disque2
{   
  list-style-type: disc;
  padding-left: 30px;
 }

.element_menu h1 /* Tous les titres de menus */
{   
   background-color:rgb(204,238,255);
  text-align: center;
  font-size: medium;
  }

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 10px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: black;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
 background-color: rgb(153, 221, 255);
   color: black;
}   


  
   #box_nav
   {
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	   
   }
 .nav:nth-child(1)
 {
	display: flex; 
	flex-direction: column;
	width: 100%;
	order:1;
	 
 } 

  .nav:nth-child(2)
 {
	display: flex; 
	flex-direction: column;
	width: 100%;
	order:2;
			 
 } 
 
 .nav:nth-child(3)
 {
	display: flex; 
	flex-direction: column;
	width: 100%;
	order:3;
		 
 } 

/* Le corps de la page */

article
{
	width:97%;
	padding:10px;
	margin-left: 5px;
}
.fondcolore
 {background-color:rgb(153, 221, 255);}

strong
{
font-weight: normal;
}
blockquote .italique
{
font-style: italic;
}
.grassouligne
{
   font-weight: bold;
   text-decoration: underline;
   }
   
.gras
{
   font-weight: bold;
   }   
  
section h1 /* Tous les titres h1 du corps */
{
   color: black;
   text-align: center;
    font-family: "Book Antiqua";
}

 
   .imageflottanteleft
{
   float: left;
   margin: 10px;
   border: 2px solid black;
}
.imageflottanteright
{
  float: right;
  margin: 10px;
  border: 2px solid black;
}
  

blockquote .italique
{
font-style: italic;
}


#nextpage /* formatage pour zone allant à pg suivante */
{
   text-align: right;
   }
#fleche /* formatage pour zone allant à pg suivante */
{
   position: relative;
   top: 10px;
   border: none;
 }
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

 
footer
{
   display: flex;
   justify-content: center;
   width: 99%;
   margin: auto;
   clear: both;	
   padding: 0px;
   text-align: center;
   color: black;
    background-color:  rgb(204,238,255);
   border: 2px solid black;
   border-radius:10px;
     }
	 
	 
 #lien_email
  {
  background-color: rgb(153,221,255); }
  
   /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX	*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* IPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) 
  {
	  

/* L'en-tête */
header
{
   width: 98%;
      }
  
    #titre
{
		width: 90%;
		font-size: 70%;
		}
	
	#taille_pol
	{
	font-size: 100%;
				}
	  
	  
		#logo_banner img
	{
		width: 70%;
	}
	
#logo_pch
{
    display: flex;
	justify-content: center;
}  
	
#photo1
{
      display: flex;
	  padding-top: 10px;
         
   }	


#photo3
{
     display: flex;
	  padding-top: 10px;
       	}

section
{
   width: 98%;
     }
 
 section h2
 {font-size: 100%;}
 
 
   /*  code pour les Modals */
.myBtn
 {font-size: 55%;
   }
 
/* Modal Content */
.modal-content {
  width: 80%;
 }
 		
section nav
{
   width: 100%;
   font-size: 70%;
   margin-right: 10px;
 }
 /* Le corps de la page */

 .el_section:nth-child(2)
 {
	  border: 2px solid black;
padding: 5px;
padding-left: 10px;
padding-right:30px;	  
border-radius:10px;
margin-left: 5px;
 }
 
 
article
{
	padding: 0px;
	margin-left: 0px;
	font-size: 90%;
}

#nextpage /* formatage pour zone allant à pg suivante */
{
   padding-right: 10px;
   }

footer
{
   width: 98%;
    }
     } 
  
     /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX	*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* IPad LANDSCAPE */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) 
  {
 
/* L'en-tête */
header
{
   width: 98%;
      }
  
    #titre
{
		width: 100%;
		font-size: 70%;
		}
	
	#taille_pol
	{
	font-size: 130%;
				}

  /* Le corps de la page */

section
{
   width: 99%;
     }
    /*  code pour les Modals */
.myBtn
 {font-size: 80%;
  }
 
 /* The Modal (background) */
.modal {
   padding-top: 20px; /* Location of the box */
 }

 
section nav
{
   width: 100%;
   font-size: 80%;
   align-content: stretch;
}

/* Quelques effets sur les menus */

.element_menu h1 /* Tous les titres de menus */
{   
   font-size: 100%;
  }

 .el_section:nth-child(2)
 {
	  border: 2px solid black;
padding: 5px;
padding-left: 10px;
padding-right:30px;	  
border-radius:10px;
margin-left: 5px;
 }
  
article
{
	width:98%;
	padding: 0px;
	padding-left: 5px;
	margin-left: 5px;
	font-size: 90%;
}

footer
{
   width: 99%;
    }

  }
  
         /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* IPhone LANDSCAPE*/ 
 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: landscape)
  
  {
  
header
{
   width: 98%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
            }
  
  
    #titre
{
	width: 100%;
	margin: auto;
	}
	
	#taille_pol
	{
		font-size: 150%;
		}
		
	#photo1
{
  margin: auto;
      
   }	


#photo3
{
   margin: auto;
       	}

	section
{
    flex-direction: column;
    width: 98%;
	
    }
.el_section:nth-child(1)
	  {order: 2;
		  }
.el_section:nth-child(2)
	  {order: 1;}

   /*  code pour les Modals */
.myBtn
 {font-size: 80%;
   }
 
 /* The Modal (background) */
.modal {
   position: relative; /* Stay in place */
 }
 
section nav
{
  flex-direction: column;
	width: 100%;
	height: 100%;
	}

.element_menu h1 /* Tous les titres de menus */
{   
   font-size: 90%;
     }

.element_menu li 
{
   font-size: 80%;
   }

   
   #box_nav
   {
	 display: flex;
	 flex-direction: row;
	 justify-content: space-between;
	  }
 
#box_nav .disque2
{   
    padding-left: 10px;
 }
 
/* Le corps de la page */

article
{
		
	width:98%;
	flex-direction: column;
	margin: auto;
	margin-bottom: 5px;
	font-size: 70%;
}


#nextpage /* formatage pour zone allant à pg suivante */
{
   text-align: right;
   }
#fleche /* formatage pour zone allant à pg suivante */
{
   position: relative;
   top: 10px;
   border: none;
 }		
	
		
	footer
{
   width: 98%;
   font-size: 85%;
       }
	   
	#lien_email
  {
  background-color: rgb(153, 221, 255); 
}
  }
    /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* IPhone PORTRAIT*/ 
 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: portrait)
  
  {

header
{
   width: 94%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
            }
  
  
    #titre
{
	width: 100%;
	margin: auto;
	font-size: 70%;
	}
	
	#taille_pol
	{
		font-size: 120%;
		}
		
	#photo1
{
  margin: auto;
  width:70%;
      
   }	

#logo_pch
{width:80%;}

#photo3
{
   margin: auto;
   width:70%;
       	}

	section
{
    flex-direction: column;
    width: 94%;
	font-size:90%;
	    }
		
	section h2
	{font-size: 90%;}	
		
.el_section:nth-child(1)
	  {order: 2;
		  }
.el_section:nth-child(2)
	  {order: 1;}

    /*  code pour les Modals */
.myBtn
 {font-size: 85%;
 }
 
 /* The Modal (background) */
.modal {
   padding-top: 10px; /* Location of the box */
 }

/* Modal Content */
.modal-content {
 width: 80%;
  font-size: 80%;
 }

section nav
{
  flex-direction: column;
	width: 100%;
	height: 100%;
	line-height: 20px;
	font-size: 70%;
	}

.element_menu h1 /* Tous les titres de menus */
{   
   font-size: 100%;
     }

.element_menu li 
{
   font-size: 100%;
   }

  .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
 
    
   #box_nav
   {
	 display: flex;
	 flex-direction: row;
	 justify-content: space-between;
	  }
 
#box_nav .disque2
{   
    padding-left: 10px;
 }
 .el_section:nth-child(2)
 {
 border: 2px solid black;
border-radius:10px;
margin: auto;
margin-bottom: 5px;
 }
 
 article
{
	width: 95%;
	padding:10px;
	margin-right: 5px;
	margin-left: 0px;
}

   
#nextpage /* formatage pour zone allant à pg suivante */
{
   padding: 0px;
   font-size: 90%;
   margin-right: 0px;
   text-align: center;
   }
   
   #fleche /* formatage pour zone allant à pg suivante */
{
   width:10%;
 }

   
 /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

footer
{
   width: 98%;
   font-size: 70%;  
   }		
  
  #lien_email
  {
  background-color: rgb(153, 221, 255); 
}
  
  
	}