:root[data-theme="light"] {
    --font-color:black;
    --lang-font-color:#d16868;
    --background-color:white;
    --url-color:#d16868;
    --tab-color:#4f4241;
    --tab-font-color:white;
    --shadow-color:rgba(0, 0, 0, 0.7);
    --opacity-color:1;
}
:root[data-theme="dark"] {
    --font-color:  #b3b6b7 ;
    --lang-font-color:#b3b6b7 ;
    --background-color:#222427;
    --url-color: #417097 ;
    --tab-color:#344456;
    --tab-font-color: #b3b6b7 ;
    --shadow-color:#222427;
    --opacity-color:0.6;
}
.entete {
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    margin: 20px auto;
    background-color:var(--tab-color);
    border-radius: 5px;
    box-shadow: -1px 2px 5px 1px var(--shadow-color);
    height:200px;
}
.nom {
    font-weight:700;
    font-family:"Comic Sans MS";
    font-size:250%;
    color:var(--tab-font-color);
    flex-grow: 1; 
    text-align: center; 
}
.photo {
    height: 80%; 
    border: 0px solid ;
    margin-right:10pt;
    border-radius: 50%;
    opacity:var(--opacity-color);
}

.icons_footnote
{
    float:right;
    border: 0px solid ;
    height: 100px;
    opacity:var(--opacity-color);
}

html,body {
    color:var(--font-color);
    background-color: var(--background-color); 
    font-family: "Times";
    font-size: 16pt;
}
.lang { display: none; }
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--tab-color);
    padding: 25px;
    display: none; /* Caché au départ */
}
.navbar-visible #navbar {
    display: block;
}
.navbar-visible .button-lang {
    color: var(--tab-font-color);
}
button 
{
    background-color: transparent;
    color: var(--lang-font-color);
    border: none;
    cursor: pointer;
    font-size:18px;
    font-weight:bold;
    border-radius: 5px;
}
.button-lang:hover 
{
    background-color: var(--tab-color);
    color: var(--tab-font-color); 
}
div.footnote
{
    background-color: var(--background-color);
    margin-top: 5%;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 5px;
    margin-bottom:10%;
}
div.presentation
{
    text-align:justify;
    line-height:1.5;
    margin-bottom:5%;
}
div.corps
{
    margin-left: 10%;
    margin-right: 10%;
    font-weight: 400;
}
h1 {
    font-family: sans-serif;
    padding-top:7pt;
    padding-bottom:7pt;
    font-size:220%;
    text-align:left;
    color:var(--url-color);
    font-weight: 700;
}
ul
{
    list-style: none;
    margin:5pt;
}
li {
    margin-right:10pt;
    margin-bottom:10pt;
    margin-top:10pt;
    margin-left:-25pt;
    text-align:left;}
li::before {
    content: "•";
    color: var(--font-color);
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
}
a {
    background-color:inherit;
    color:var(--url-color);
    text-decoration:none;
    font-weight:500;
}