:root	{
	--c1:rgba(211, 211, 211,1);
	--c2:rgba(175, 238, 238,1);
	--c3:rgba(221, 160, 221,1);
	--c4:rgba(255, 160, 122,1);
	--c5:rgba(255, 215, 0,1);
	--soulMenu:#3498db;

}
header	{
		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-items:center;
		height:75px;
	
}
.st11{
		width:30%;
		text-align:center;
		font-size:2rem;

}
.st12{
		width:70%;
		text-align:center;
		font-size:2rem;


}
.com{
		font-size:0.8rem;
		letter-spacing:0.4rem;

}

main	{
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		width:90%;
}

	

/*Les cartes pour chaque UAA*/
.carteGalerie4,.carteGalerie5,.carteGalerie6{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		margin:0.3rem;
	}
	.annee	{
			display:flex;
			flex-direction:column;
			justify-content:center;
			width:5%;
			text-align:center;
			font-size:3rem;
			}
.carte1,.carte2,.carte3,.carte4,.carte5{
		display:flex;
		flex-direction:column;
		flex-wrap:no-wrap;
		border-radius:10px;
		margin:0.7rem;
		width:300px;
		height:200px;
	}
.carte1{
	border:solid 2px var(--c1);
}
.carte2{
	border:solid 2px var(--c2);
}
.carte3{
	border:solid 2px var(--c3);
}
.carte4{
	border:solid 2px var(--c4);
}
.carte5{
	border:solid 2px var(--c5);
}

.haut1,.haut2,.haut3,.haut4,.haut5	{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-content:center;
	height:30px;
	}
.haut1{background:var(--c1);}
.haut2{background:var(--c2);}
.haut3{background:var(--c3);}
.haut4{background:var(--c4);}
.haut5{background:var(--c5);}
.centre1,.centre2,.centre3,.centre4,.centre5	{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	flex-wrap:wrap;
	height:130px;
	padding:0.3rem;
	}
.centre1 div,.centre2 div,.centre3 div,.centre4 div,.centre5 div	{
	margin-top:4px;
	}
.bas1,.bas2,.bas3,.bas4,.bas5	{
	display:flex;
	padding-left:0.2rem;
	}
.bas2	{background:var(--c2);}
.bas3	{background:var(--c3);}
.bas4	{background:var(--c4);}
.bas5	{background:var(--c5);}



.uaa{
	width:30%;
	text-align:center;

}
.titre{
	width:70%;
	text-align:center;
}
.prer	{
	font-style:italic;
	font-size:0.8rem;
	
}
/*Animation menu*/
a {
	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;
}
a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background:var(--soulMenu) ;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}







/*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;
}


/*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*/
.fili4,.fili5,.fili6 {
    position: relative;
    background: #fff;
}

.fili4::before {
    content: "4ème année";
    position: absolute;
    top: 95%;
    left: 80%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 1rem;
	text-shadow:7px 5px 0px rgba(0,0,0,0.2);
    color: rgba(0, 0, 0, 0.5); /* transparence */
    pointer-events: none; /* ne bloque pas les clics */
    white-space: nowrap;
}
.fili5::before {
    content: "5ème année";
    position: absolute;
    top: 95%;
    left: 80%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 1rem;
		text-shadow:7px 5px 0px rgba(0,0,0,0.2);

    color: rgba(0, 0, 0, 0.5); /* transparence */
    pointer-events: none; /* ne bloque pas les clics */
    white-space: nowrap;
}
.fili6::before {
    content: "6ème année";
    position: absolute;
    top: 95%;
    left: 80%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 1rem;
		text-shadow:7px 5px 0px rgba(0,0,0,0.2);

    color: rgba(0, 0, 0, 0.5); /* transparence */
    pointer-events: none; /* ne bloque pas les clics */
    white-space: nowrap;
}
/*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: 0%;
  left: 10%;
  /*transform: translate(-50%, -50%);*/
  opacity: 0.25;
  z-index: 10;
  pointer-events: none;
}

/*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;

}