/*style généraux*/
:root	{
/*Couleurs*/
	--c2:rgba(175, 238, 238,1);
	--c3:rgba(221, 160, 221,1);

	--c4:rgba(255, 160, 122,1);
	--soulMenu:#3498db;
/*Espacements*/
	--e1:5px;
	--e2:10px;
	--e3:15px;
/*Taille caractères*/
	--t1:0.3rem;
	--t2:0.8rem;
	--t3:1rem;
	--t4:1.1rem;
	--t5:2rem;
	--t6:3rem;
}
html	{
	font-size:16px;
}
body	{
	margin:0;
}
main	{
	width:90%;
	margin:auto;
}

/*L'image est absolute pour éviter que l'image suive le défilemen(fixed à l'origine),
on met un zindex à 10 pour passer au dessus des fond mais le lien UAA reste actif graâce au pointer-events*/
.filigrane-image {
  position: absolute;
  top: -3%;
  left: 2%;
  /*transform: translate(-50%, -50%);*/
  opacity: 0.45;
  z-index: 10;
  pointer-events: none;
}

/*Le header*/
.head1	{
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:space-around;
	height:60px;
	
}
/*Les fonds dont les couleurs varient en fonction de l'UAA*/
.uaa5	{background:var(--c2);}
.uaa6	{background:var(--c3);}
.uaa7	{background:var(--c4);}
.head1 .entete{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	align-content:center;
	font-size:var(--t5);
}
nav{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	align-content:center;
	height:40px;

	
}

/*Soulignement des liens du menu*/
.menu-item {
	text-decoration:none;
	color:black;
  font-size: var(--t4);
  position: relative;/*permet de créer un repère orthonormé*/
  padding: 6px 0;/*Pour éviter que la ligne colle au texte du menu*/
  cursor: pointer;
}

.menu-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background:var(--soulMenu) ;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.menu-item:hover::after {
  width: 100%;
}
/*Le footer*/

footer {
	display:flex;
	flex-direction:row;
	justify-content:center;
	font-size:var(--t2);
	font-style:italic;
	letter-spacing:var(--t1);
	padding:var(--e2) 0;
	border-top:solid 5px var(--c2);

}
.section{
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
	height:30px;
	font-size:var(--t2);
	letter-spacing:var(--t1);
}

/*Customization du highlighter*/
.hljs {
  padding: 0.5rem 1.5rem;
  background: black;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  transition: all 0.2s;
}

.hljs:hover {
  border-color: #ff4754;
}
.largCode1{
	width:300px;
}

/*Exercices*/
li	{
	margin:0.8rem 0px;
	
}
/*On cache le Burger*/
div.burger {
		display: none;
		
 }

            
       
@media (max-width: 700px) {
			
	/*on place le menu en dehors à gauche*/
nav	{
	position:absolute;
	top:0;
	left:0;
	width:35vw;
	height:60vw;
	margin-left:-400px;
	transition:0.5s ease;

}

/*On affiche loe burger*/
div.burger {
		display: block;
		text-align:center;
		width:40px;
		margin:auto;
		
 }
 /*Le nav est maintenant en column*/
 nav {
		display:flex;
		flex-direction:column;
		justify-content:space-around;
		align-items:center;
		
		
}
/*Cette classe est ajoutée par le script*/
.burgerMenu	{
	margin-left:0px;
	transition:0.9s ease;
}
/*On met quelques pixels au-dessus du body*/
	body{
		margin-top:3px;
		
	}
/*On change la taille des caractères du header*/
 .head1 .entete{
	font-size:var(--t4);
}
         
 }