body {
font-family: arial;
background-color:#6e6e6e;
text-align: center;
width:98.55%;
}

h1 {
font-family: Bradley hand;
padding: 20px 0;
text-align: center;
color: black;
font-size:100%;
}

h2, h4, h5 {
text-indent: 20px;
text-align: left;
color: black;
font-weight:bold;
margin-left: 40px;
margin-right: 40px;
}
P {
text-indent: 20px;
text-align: left;
margin-right: 40px;
Color: black;
Margin-left:3px;
font-size:14px;
}
h3 {
text-indent: 20px;
text-align: left;
color: white;
font-weight:bold;
margin-left: 40px;
margin-right: 40px;
}

img {
alt: center;
}

.natu {
Float:right; 
height: auto;
Width: 25%;
margin-right: 80px;
}

img.displayed {
display: block;
margin-left: auto;
margin-right: auto; 
}


iframe {
border : 2px solid red;
alt: center;
}

figcaption {
color : black;
}

Ul {
  Margin:-7px;
  list-style-type: none;
}
a
{
text-decoration: none;
color: black;
}

u
{
color: black;
}

#rev {
position: sticky;
top: 10;
z-index:99;
}
#rev li {
float: left;
display: inline;
position: relative;
}
#rev a {
display: block;
border-radius: 10px;
line-height: 40px;
text-align:center;
background-color:black;
padding: 0px;
text-decoration: none;
color: #FFFFFF;
font-size: 20px;
}
#rev li a:hover {
color: #FFFFFF;
background: #969696;
}
#rev input {
display: none;
margin: O;
padding: 0;
height: 10px;
width: 100%;
opacity: 0;
cursor: pointer
}

#loader-wrapper {
  position: fixed;
  top: 50%; /* Position verticale au centre */
  left: 50%; /* Position horizontale au centre */
  transform: translate(-50%, -50%); /* Ajuster le positionnement pour le centrer parfaitement */
  width: 300px; /* Largeur du cadre */
  height: 300px; /* Hauteur du cadre */
  border: 2px solid black; /* Bordure noire */
  border-radius: 50%; /* Forme circulaire */
  overflow: hidden; /* Masquer le contenu qui dépasse du cadre */
  z-index: 9999;
}

#loader {
  position: relative; /* Position relative pour positionner l'image à l'intérieur du cadre */
  top: 50%; /* Position verticale au centre */
  left: 50%; /* Position horizontale au centre */
  transform: translate(-50%, -50%); /* Ajuster le positionnement pour le centrer parfaitement */
  width: 200%; /* Largeur de l'image */
  height: 200%; /* Hauteur de l'image */
  background-image: url('pic/loader.png'); /* Chemin de l'image */
  background-size: 90%; /* Taille de l'image */
  background-repeat: repeat; /* Ne pas répéter l'image */
  animation: slideVertical 1s linear infinite; /* Animation de défilement vertical */
  transition-property: background-image; /* Spécifie la propriété CSS qui sera affectée par la transition */
  transition-duration: 8s; /* Modifie le temps de transition à 0.5 seconde */
}
@keyframes slideVertical {
  0% { background-position: 0% 100%; } /* Début du défilement en haut */
  100% { background-position: 0% 0%; } /* Fin du défilement en bas */
}
@keyframes dotAnimation {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
}
#loader::before {
  content: ""; /* Obligatoire pour le pseudo-élément */
  display: block; /* Faire apparaître le pseudo-élément comme un bloc */
  width: 100%; /* Largeur du pseudo-élément */
  height: 100%; /* Hauteur du pseudo-élément */
  position: absolute; /* Position absolue pour positionner le contenu */
  top: 0; /* Placer le contenu au sommet */
  left: 0; /* Placer le contenu à gauche */
  background-color: rgba(255, 255, 255, 0.5); /* Couleur de fond semi-transparente */
  z-index: -1; /* Pour placer le pseudo-élément derrière l'image */
  border-radius: 50%; /* Bordure arrondie pour créer un cercle */
}

#loader::after {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  animation: dotAnimation 2s infinite;
}

/* Styles généraux pour le menu horizontal */

.menun {
  position: sticky;
  top: 1%;
  background: linear-gradient(to bottom,  #A8A8A8,  #000000);
  color: #FFF;
  height: auto;
  border-radius: 10px;
  list-style: none;
  width:100%;
  margin-left:0;
  padding:0;
  display: flex;
  justify-content: space-between; /* Pour espacer les éléments uniformément */
}

.menun a {
  font-family: arial;
  display: block;
  line-height: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  padding: 0 1vw;
  color: #FFFFFF;
  font-size: auto;
  text-decoration: none;
}

.menun li a:hover {
  border-radius: 15%;
  color: #FFFFFF;
  background: #969696;
}

.menuclasses {
  position: sticky;
  top: 1%;
  color: linear-gradient(to bottom, #A8A8A8, #000000);
  border-radius: 10px;
  width: max-content; /* Ajuste la largeur en fonction du contenu */
  margin: 0 auto; /* Centre le menu horizontalement */
}

.menuclasses-container {
    overflow-x: auto; /* Activation du défilement horizontal natif */
    white-space: nowrap;
    user-select: none; /* Empêche la sélection de texte pendant le défilement */
}

.menuclasses {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.menuclasses li {
    position: relative;
    padding: 20px;
    background-color: #333;
    color: white;
    border-radius: 10px;
    margin: 0 10px;
    cursor: grab; /* Curseur de déplacement lorsqu'il est maintenu */
    user-select: none; /* Empêche la sélection de texte pendant le défilement */
}

.menuclasses u{
color:white;
transition: opacity 0.5s ease;
font-size: 14px;
}

.menuclasses a{
color:white;
font-size: 14px;
}

.menuclasses a:hover{
opacity: 0;
}

.menuclasses li:hover u{
opacity: 0;
}

.menuclasses .afos:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/afos.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclasses .afac:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/afac.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclasses .aobs:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/aobs.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass {
  position: sticky;
  top: 1%;
  color: linear-gradient(to bottom, #A8A8A8, #000000);
  border-radius: 10px;
  width: max-content; /* Ajuste la largeur en fonction du contenu */
  margin: 0 auto; /* Centre le menu horizontalement */
}

.menuclass-container {
    overflow-x: auto; /* Activation du défilement horizontal natif */
    white-space: nowrap;
    user-select: none; /* Empêche la sélection de texte pendant le défilement */
}

.menuclass {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.menuclass li {
    position: relative;
    padding: 20px;
    background-color: #333;
    color: white;
    border-radius: 10px;
    margin: 0 10px;
    cursor: grab; /* Curseur de déplacement lorsqu'il est maintenu */
    user-select: none; /* Empêche la sélection de texte pendant le défilement */
}

.menu li:active {
    cursor: grabbing; /* Curseur pendant le déplacement actif */
}

.menuclass u{
color:white;
transition: opacity 0.5s ease;
font-size: 14px;
}

.menuclass a{
color:white;
font-size: 14px;
}

.menuclass a:hover{
opacity: 0;
}

.menuclass li:hover u{
opacity: 0;
}

.menuclass .apoissono:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/apoissono.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .apoissonc:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/apoissonc.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .amollusca:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/amollusca.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .aechinodermata:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/aechinodermata.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .acrustacea:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/acrustacea.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .amammalia:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/amammalia.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .alissamphibia:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/alissamphibia.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .asauropsida:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/asauropsida.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .aaves:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/aaves.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .aarachnida:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/aarachnida.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .ainsecta:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/ainsecta.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .aplantes:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .aeucaryota:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .aplantesfleur:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/aplantesfleur.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.menuclass .acnidaria:hover {
  border-radius: 10px;
transition: opacity 0.5s ease;
background-image: url('pic/acnidaria.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.branche {
  position: absolute;
  top: -43px;
  left: 0;
  width: 100%; /* La largeur de l'image est de 100% de la largeur de l'écran */
  height: 120px; /* Hauteur fixe de l'image (ajustez cette valeur selon vos besoins) */
  max-height: 500px; /* Limite la hauteur maximale de l'image pour éviter qu'elle ne devienne trop grande */
  overflow: hidden; /* Cache la partie débordante de l'image */

}/* Style du menu par défaut */
.menu {
  position: absolute;
  top: 10px;
  height: auto;
  border-radius: 10px;
  list-style: none;
  width: 100%;
  margin-left: 0;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

.menu li {
  flex: 1; /* Distribue l'espace disponible de manière égale entre les éléments du menu */
  text-align: center; /* Centre le contenu horizontalement dans chaque élément du menu */
}

.menu ul {
  margin: 0 12.5%; /* Crée un espace de 25% de la largeur de l'écran à gauche et à droite de chaque élément */
}

.menu a {
  font-family: arial;
  font-size: 17px;
  display: block;
  line-height: 31px;
  padding: 0 14px;
  color: #FFFFFF;
  font-size: auto;
  text-decoration: none;
}

.menu li a:hover {
  border-radius: 10px;
  color: #FFFFFF;
}

.cases li {
margin-right:1px;
margin-left:1px;
}
}

footer {
    background-color: grey;
    border:2px solid black;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.footer-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.sitemap, .social-media {
    flex: 1;
    margin: 0 20px;
}

.sitemap h3, .social-media h3 {
    margin-bottom: 10px;
}

.sitemap ul, .social-media ul {
    list-style-type: none;
    padding: 0;
}

.sitemap ul li, .social-media ul li {
    margin-bottom: 5px;
}

.sitemap ul li a, .social-media ul li a {
    color: #fff;
    text-decoration: none;
}

.sitemap ul li a:hover, .social-media ul li a:hover {
    text-decoration: underline;
}

.copyright {
    flex: 2;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }
}

.my-button {
    background-color: #ecf0f1; /* Couleur de fond */
    border: none; /* Enlever la bordure */
    color: white; /* Couleur du texte */
    text-align: center; /* Alignement du texte */
    text-decoration: none; /* Enlever la décoration du texte */
    display: inline-block; /* Affichage en ligne */
    cursor: pointer; /* Curseur de souris */
    border-radius: 5px;
}

/* Ajouter des effets lors du survol */
.my-button:hover {
    background-color: #a1a3a3;
}

  .output-container {
    background-color: #f0f0f0; /* Couleur de fond pour tester */
  }

  .output-text {
    font-size: 16px;
    color: black; /* Assurez-vous que le texte est visible */
  }

  .question-icon {
    margin-left: 10px;
  }

.tableau_database:hover {background-color: #86d488;}