* {
  box-sizing: border-box;
}
:root {
  --font-family-serif: Georgia,serif;
  --font-family-sans-serif: Helvetica neue,Helvetica,Arial,sans-serif;
}
html {
  font: 112.5%/1.6 var(--font-family-serif);
  scroll-behavior: smooth;
}
/* Style the body */
body {
  /* display: flex; */
  /* flex-direction: column; */
  /* font-family: Arial, Courrier New, Verdana, sans-serif; */
  background: #0d3b66;
  margin: 0px;
  /* font-size: 18px; */
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-row-center-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: space-between;
  flex-wrap: wrap;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img {
  margin: 0px 5px;
}

.img:hover {
  opacity: 0.5;
  border-radius: 5px;
  transition: 0.2s;
}

.alink, .alinkBold {
  text-decoration: none;
  color: #b4551e;
}

.alink:hover, .alinkBold:hover {
  text-decoration: underline;
}

.alinkBold {
  font-weight: bold;
}

.title, .titleLight {
  font-size: 130%;
  font-weight: bold;
  color: #0d3b66;
  width: 75%;
  border-bottom: 2px solid #0d3b66;
  margin-bottom: 20px;
  text-align: left;
  padding-left: 10px;
}

.titleLight {
  color: #fff;
  border-color: #fff;
}

.subtitle {
  font-size: 120%;
  font-weight: bold;
  color: #0d3b66;
  width: 50%;
  border-bottom: 2px solid #0d3b66;
  text-align: center;
  margin-left: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#Header {
  font-family: var(--font-family-sans-serif);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  background: #0d3b66;
  color: #fff;
  position: sticky;
  top: 0px;
  z-index: 9999;
  box-shadow: 1px 3px 3px black;
}

#HeaderTitle {
  display: flex;
  justify-content: center;
  font-size:20px;
  font-weight:bold;
}

#HeaderButton {
  background-color: #0d3b66;
  border: none;
  color: #fff;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 40px;
  padding-bottom: 40px;
  transition: 0.2s;
}

#HeaderButton:hover {
  opacity: 0.5;
  cursor: pointer;
}

/* Style the top navigation bar */
#Navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  min-height: 40px;
  background: #0d3b66;
  color: #ede7e3;
}

#Navbar button {
  background-color: #0d3b66;
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 20px;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-right: none;
  border-left: none;
  font-size: large;
}

#Navbar button:hover {
  cursor: pointer;
  border-radius: 5px;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  transition: 0.2s;
}

#Apropos, #CurriculumVitae, #Publications, #Contact {
  display: flex;  
  flex-direction: column;
  width: 120ex;
  max-width: 100%;
  margin: 0 auto;
  padding: 30px;
}

/* Apropos */
#Apropos {
  background: #e9e9e9;  
}

/* CurriculumVitae */
#CurriculumVitae {
  background: #bebebe;
}

/* Publications */
#Publications {
  background: #646464;
}

/* Contact */
#Contact {
  background: #2b2b2b;
}

/* Publications */
.publis{
  list-style-type: none;
  color: #fff;
  font-size: 89%; /* ~16px */
  margin-right: auto;
}

.cvyear {
  font-weight: bold;
  white-space: nowrap;
  text-align: right;
}

.bold {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

.textcenter {
  text-align:center;
  vertical-align:middle;
}

/* Table */
table {
  font-size: 89%; /* ~16px */
  margin-right: auto;
}

tr {
  vertical-align: top;
}

td {
    padding-left:0.5em;
    padding-right:0.5em;
}

/* Listes */
li {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

/* Infos-bulles */
a.infobulle {
    position: relative;
    text-decoration:none;
    color:#b4551e;
    cursor:help;
}
a.infobulle span {
    display: none; /* On masque l'infobulle. */
    text-align:center;
}
a.infobulle:hover {
  text-decoration: underline;
    background: none; /* Correction d'un bug d'Internet Explorer. */
    z-index: 99999; /* On définit une valeur pour l'ordre d'affichage. */
    cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.infobulle:hover span {
    display: inline; /* On affiche l'infobulle. */
    position: absolute;
    white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
    top: -10em; /* On positionne notre infobulle. */
    left: 2em;
    background: #fff;
    color:#b4551e;
    font-size:80%;
    padding-top:1em;
    padding-left:1em;
    padding-right:1em;
    border: 2px solid #b4551e;
    -webkit-border-radius:0.75em;
    -moz-border-radius:0.75em;
    border-radius:0.75em;	
}

@media (max-width: 120ex) {
  #Header {
    justify-content: center;
    flex-direction: column;
  }
}