:root{
	--color1:rgb(37, 78, 152);
	--color2:rgb(248, 252, 254);
	--color3:rgb(245,126,126); /* thème bicolore */
}

h1{ /* titre de la page web dans l'en-tête */
    font-family:Arial;
    color:var(--color2);
    margin:auto;
    font-size:7vw;
}

h2{ /* titres des listes et paragraphes */
    font-family:Arial;
    color:var(--color2);
    font-size:6vw;
    font-style:italic;
}

header{
    background-color:var(--color1);
    font-family:sans-serif;
    height:12vh;
    width:75vw;
    display:flex;
    flex-direction: row-reverse;
}

header img{ /* drapeau */
	width: 8vw;
	height: auto;
	margin: 1vh 0 0 1vw;
}

#phone_header{ /* disposition de header + nav en version téléphone */
	display:flex;
} 

nav{
	background-color:var(--color2);
	color:white;
	display:flex;
	height:12vh;
	width:25vw;
	justify-content: center;
	align-items: center;
	font-size:3vw;
	flex-direction:column;
}

nav div{ /* boites du menu de navigation */
	margin:0 4vw 0 4vw;
}

#courant{ /* page en cours dans le menu de navigation */
	color:var(--color1);
}

nav a{
	color:inherit;
	text-decoration:none;
}

body{ /* contient phone_header, les sections et footer*/
	height:95vh; /* body doit faire au moins la taille de l'écran pour que footer soit en pied de page */
	color:var(--color2);
	display:flex;
	flex-direction:column;
}

body a{
	color:inherit;
}

section{
	margin:3vh 2vw 5vh 2vw;
	flex:1; /* les sections doivent prendre toute la place entre phone_header et footer */
	font-size:5vw;
}

/* définition de l'id "texte" */
#texte{ /* id des sections comprenant paragraphes et images */
	display:flex;
	flex-direction:column;
}

#texte p{
	margin:3vh 1vw 1vh 1vw;
}

/* définition de l'id "liste" */
#liste{ /* id des sections comprenant des listes */

}

#liste ul{
	margin:3vh 1vw 1vh 1vw;
}

#liste li{
	margin-bottom:0.5vh;
}

#mathbf{
	font-weight:bold;
}

footer{
	display:flex;
	justify-content:center;
}

footer img{
	margin: 0vh 8vw 5vh 8vw;
}

#knot2{
	width: 100vw;
	height:auto;
	float:right;
	object-fit: contain;
	margin:auto;
}

#lmno{
	width: 25vw;
	height: 100%;
	object-fit:contain;
}

#unicaen{
	width: 20vw;
	height: 100%;
	object-fit:contain;
}