:root {
--background-color-body: #F5F5F5;
--color-hun: #989898;
--page-background: #FFF;
--text-color: #22303D;
--bordure-color: #DBE3EB;
--mail-color: #003366;
--color-links: #0066CC;
--color-text-nav-button: #F5F5F5;
--color-background-nav-button: #757575;
--color-background-hover-nav-button: #607d8b;
--color-background-active-nav-button: #607d8b;
}

@media (prefers-color-scheme: dark) {
:root {
--background-color-body: #263238;
--color-hun: #989898;
--page-background: #455a64;
--text-color: #b0bec5;
--bordure-color: #37474f;
--mail-color: #03a9f4;
--color-links: #40c4ff;
--color-text-nav-button: #F5F5F5;
--color-background-nav-button: #757575;
--color-background-hover-nav-button: #607d8b;
--color-background-active-nav-button: #607d8b;
}
.container {
 
overflow: auto;
 
}
 
img {
 
float: left;
 
margin-right: 50px;
 
}
 
.text {
 
overflow: hidden;
 
}
}

body {
font-family : Clearview; /* police de
caracteres */
background-color : var(--background-color-body); /* pas
tout a fait blanc */
min-width : 520px; /* si l'affichage
est moins large que 520px alors celui du
corps sera de 520px */
margin : 0; /* on enleve les marges
par defaut */
padding : 0; /* de meme */
}

#logo {
float : left;
margin : 1% 4%; /* marges adaptatives
pour meilleure lisibilite */
letter-spacing : 1.5px;
}
#logo h1 {
color : var(--color-hun);
}



#contenu
{
background-color : var(--page-background); /* font different */
color : var(--text-color);
padding : 5% 8%; /* plus agreable a lire et au visuel */
clear : both; /* pas concerne par les float donc retour a la ligne */
border-top : 2px solid var(--bordure-color); /* faire ressortir */
border-bottom : 2px solid var(--bordure-color);
}


span {
font-weight : bold; /* faire ressortir */
letter-spacing: 1px; /* plus de lisibilite */
color : var(--mail-color);
}
a { /* style des liens */
text-decoration : none; /* pas de soulignement */
color : var(--color-links);
}
a:hover {
font-weight : bold; /* pour ressortir quand survole */
}
p {
text-align : justify; /* plus beau car bien aligne */
}

nav {
text-align : right; /* tout doit etre a droite */
}

nav ul { /* liste dans la navigation */
margin : 1% 3% 0 0;
padding : 0; /* enleve l'indentation de defaut */
float : right; /* colonne a droite par rapport au logo */
}
nav ul li {
display : inline-block; /* les elements de la liste sont presentes en ligne
mais se comportent comme un block */
}
nav li a {
display : block; /* les liens se comportent comme des block individuels,
cela evite le chevauchement en cas de petite largeur d'ecran */
padding : 1em;
margin : 1em 1.1em;
text-decoration : none; /* enleve le soulignement habituel des liens */
letter-spacing : 1.3px; /* pour plus de lisibilite */
font-size : 0.9em;
color : var(--color-text-nav-button);
background-color : var(--color-background-nav-button);
}
nav li a:hover { /* style des boutons de liens qu'on survole */
background-color : var(--color-background-hover-nav-button);
color : var(--color-text-nav-button);
font-weight : normal; /* car on a regle le cas general sur bold */
}
#active { /* element ayant l'id "active" */
background-color : var(--color-background-active-nav-button);
color : var(--color-text-nav-button);
}