body
{
    background-color: #FFFFFF; /* Le fond de la page sera gris */
    color: Black; /* Le texte de la page sera noir */
    /*background-image: url("img/lamarck_gyver_small.png");*/
    background-attachment: fixed; /* Le fond restera fixe */
    background-repeat: no-repeat; /* Le fond ne sera pas répété */
    background-position: top right; /* Le fond sera placé en haut à droite */
    font-family: Arial;
}

p
{
    color: gray;
    font-size: 0.8em;
    text-align: justify;
    width: 95%;
    padding: 5px;
    margin: auto;
}
           
a /* Liens par défaut (non survolés) */
{
   text-decoration: none;
   color: red;
}
a:hover /* Apparence au survol des liens */
{
   text-decoration: underline;
   color: green;
}
a:focus /* Quand le visiteur sélectionne le lien */
{
    background-color: #FFCC66;
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
    color: blue; /* Appliquer une couleur grise */
}
#principal
{
    width:100%;
    min-width: 800px;
}
header
{
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
}
              
header h1
{
    margin: 10px;
    font-style: italic;
    color: #505050;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}
header span
{
    font-size: 0.8em;
    color: #000050;
}
#titre_principal
{
    display: flex;
    flex-direction: column;
}
#logo
{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin: 10px;
}
nav ul
{
    list-style-type: none;
    display: flex;
}
nav li
{
    margin-right: 15px;
}
nav a
{
    font-size: 1.2em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}
nav a:hover
{
    color: #008800;
    border-bottom: 2px solid #008800;
}
 
 
input[type=text], input[type=email], input[type=date], input[type=password], select, textarea {
  width: 100%;
  min-width:190px;
  padding: 6px 10px;
  margin: 4px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  resize: vertical;
}

input:required, select:required, textarea:required {
    border: 2px solid #faa;
}

/*input:invalid {
  border: 2px solid red;
}*/

input[type=submit] {
    min-width:500px;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size:1em;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}

.notSelected{
  display:none;
}
.selected{
  display:block;
}

section h1
{
    color: #000050;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}
 
section ul
{
    list-style-type: none;
    display:flex;
    width:100%;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: #D0EED0;
}
section ul li
{
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

section ul h1
{
    color: #000088;
    font-size:0.8em;

}

section ul a
{
    font-size:0.8em;

}

form
{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}

section div
{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    background-color: #F0FFF0;
}

section div h1,label
{
    color: #000088;
    font-size:0.8em;
    font-weight: bold;

}
 


footer p
{
    text-align: center;
}

.connect
{
    width:50%;
    min-width: 300px;
    margin: auto
}

.message
{
    text-align: center;
    color:red;
    font-weight: bold;
    font-size: 1em;
}