/* Style général du menu */
.menu {
	background-color: rgba(120, 180, 210, 0.7); /* Fond bleu avec 70% de transparence */
    display: flex; /* Aligne les enfants horizontalement */
    align-items: flex-start; /* Aligner les éléments en haut */
    padding: 10px 20px; /* Espace interne*/
	color: white;
}

/* Logo */
.menu .logo img {
    height: 80px; /* Hauteur de l'image */
    margin-right: 20px; /* Espacement entre le logo et le menu */
}

/* Conteneur pour le nom et le menu */
.menu-container {
    display: flex;
    flex-direction: column; /* Empile le titre au-dessus du menu */
}

/* Nom du site */
.site-name {
    font-size: 30px; /* Taille du titre */
    margin: 0; /* Aucun espace autour */
	margin-bottom: 5px; /* Ajoute un petit espace uniquement en dessous */
    padding: 0;
    color: white;
    font-weight: bold;
}

.menu ul {
    list-style-type: none; /* Supprime les puces */
    margin: 0;
    padding: 0;
    display: flex; /* Dispose les éléments horizontalement */
	position: relative; /* Assure que les sous-menus sont positionnés par rapport au parent */
}

.menu ul li {
    position: relative; /* Nécessaire pour le positionnement des sous-menus */
}

.menu ul li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: white; /* Couleur du texte */
    font-weight: bold;
}

.menu ul li a:hover {
	text-decoration: underline; /* Ajoute un soulignement */
    color: #d3d3d3; /* Texte devient gris clair */
}

/* Sous-menu (caché par défaut) */
.menu ul li ul {
    display: none; /* Cache les sous-menus */
    position: absolute; /* Place le sous-menu sous le parent */
    top: 100%; /* Place le sous-menu immédiatement sous le parent */
    left: 0; /* Aligne le sous-menu à gauche du parent */
    background-color: rgba(20, 40, 60, 1);
    padding: 0;
	z-index: 10;/*permet de garder les sous-menus ouvert lorsque je rentre dans le overlay-container*/
}
/* Liens dans les sous-menus */
.menu ul li ul li a {
    padding: 10px 20px;
    color: white;
	text-decoration: none;
    font-weight: normal;
}

/* Affichage du sous-menu au survol */
.menu ul li:hover ul {
    display: block; /* Affiche le sous-menu */
}

/* Effet lumineux pour tout l'encadré au survol */
.menu ul li ul li:hover {
    background-color: rgba(30, 70, 100, 1); /* Fond bleu plus brillant */
}

/* Couleur au survol des sous-menus */
.menu ul li ul li a:hover {
	color: #d3d3d3; /* Texte devient gris*/
}

/* Appliquer une image de fond à tout le body */
.index-body {
	margin: 0;
	padding: 0;
	background-image: url("images/images_fond/fond_index.jpg");
	background-size: cover; /* L'image couvre tout l'écran */
	background-position: center; /* Centrer l'image */
	background-attachment: fixed; /* L'image reste fixe au défilement */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
	height: 100vh; /* Hauteur de la page = hauteur de l'écran */
}

.carte-body {
	margin: 0;
	padding: 0;
	background-image: url("images/images_fond/fond_biomes.webp");
	background-size: cover; /* L'image couvre tout l'écran */
	background-position: center; /* Centrer l'image */
	background-attachment: fixed; /* L'image reste fixe au défilement */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
	height: 100vh; /* Hauteur de la page = hauteur de l'écran */
}

.faune-body {
	margin: 0;
	padding: 0;
	background-image: url("images/images_fond/fond_faune.jpg");
	background-size: cover; /* L'image couvre tout l'écran */
	background-position: center; /* Centrer l'image */
	background-attachment: fixed; /* L'image reste fixe au défilement */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
	height: 100vh; /* Hauteur de la page = hauteur de l'écran */
}

.flore-body {
	margin: 0;
	padding: 0;
	background-image: url("images/images_fond/fond_flore.jpg");
	background-size: cover; /* L'image couvre tout l'écran */
	background-position: center; /* Centrer l'image */
	background-attachment: fixed; /* L'image reste fixe au défilement */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
	height: 100vh; /* Hauteur de la page = hauteur de l'écran */
}

.histoire-body {
	margin: 0;
	padding: 0;
	background-image: url("images/images_fond/fond_histoire.jpeg");
	background-size: cover; /* L'image couvre tout l'écran */
	background-position: center; /* Centrer l'image */
	background-attachment: fixed; /* L'image reste fixe au défilement */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
	height: 100vh; /* Hauteur de la page = hauteur de l'écran */
}

/* Zone noire transparente avec marge */
.overlay-container {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5); /* Fond noir avec 50% de transparence */
    padding: 20px; /* Marge intérieure (espacement entre la zone et le contenu) */
    margin-left: 100px; /* Marge de 100px à gauche de l'image */
    margin-right: 100px; /* Marge de 100px à droite de l'image */
	border-radius: 10px;
    z-index: 1; /* Inférieur au menu */
}

/* Zone noire transparente avec marge */
.overlay-container-histoire {
    position: relative;
    background-color: rgba(0, 0, 0, 0.8); /* Fond noir avec 50% de transparence */
    padding: 20px; /* Marge intérieure (espacement entre la zone et le contenu) */
    margin-left: 100px; /* Marge de 100px à gauche de l'image */
    margin-right: 100px; /* Marge de 100px à droite de l'image */
	border-radius: 10px;
    z-index: 1; /* Inférieur au menu */
}

/* Conteneur du titre et de la date */
.header-title {
    display: flex;
    justify-content: space-between; /* Date à droite, titre à gauche */
    align-items: center;
    margin-bottom: 20px;
    padding: 5px 0;
    font-family: Arial, sans-serif;
}

/* Style de la date */
.last-modified {
    font-size: 14px;
    color: #bbb; /* Gris clair pour discrétion */
}

/* Style du titre */
.titre-page {
    font-size: 32px;
	color: white;
    margin: 0;
}

/* Conteneur de l'image */
.image-container {
    display: flex;
    justify-content: center; /* Centrer l'image horizontalement */
    margin-top: 20px;
	margin-bottom: 30px; /* Ajoute un espace en bas de l'image */
}

/* Style de l'image */
.image-container img {
    width: 80%; /* L'image occupe 80% de la largeur de son conteneur */
    max-width: 600px; /* Taille maximale de l'image */
    height: auto; /* Laisser l'image garder ses proportions */
    border-radius: 8px; /* Arrondir les coins de l'image */
}

/* Conteneur du sommaire */
.sommaire-container {
    background-color: rgba(0, 0, 0, 0.8); /* Fond sombre semi-transparent */
    border: 1px solid #444; /* Bordure grise foncée */
    border-radius: 8px; /* Coins arrondis avec un rayon de 8px */
    width: 250px; /* Largeur du conteneur de 250px */
    padding: 10px; /* Espacement interne de 10px */
    color: white; /* Couleur du texte blanche */
    font-family: Arial, sans-serif; /* Police Arial avec une alternative sans-serif */
}

/* Style de l'en-tête (titre + masquer) */
.sommaire-header {
    display: flex;
    justify-content: space-between; /* Espacement égal entre les éléments enfants */
    align-items: center; /* Alignement des éléments enfants au centre verticalement */
    font-size: 19px; /* Taille de police de 16px pour l'en-tête */
    font-weight: bold; /* Texte en gras */
    padding: 5px; /* Espacement interne de 5px */
    cursor: pointer; /* Changement du curseur pour indiquer que l'élément est cliquable */
}

/* Icône du menu */
.icon {
    margin-right: 5px; /* Marge à droite de l'icône pour l'espacement */
}

/* Style des liens */
.sommaire a {
    text-decoration: none; /* Suppression de la décoration de texte (pas de soulignement) */
    color: white; /* Couleur du texte des liens en blanc */
    display: block; /* Affichage des liens comme blocs (prend toute la largeur) */
    padding: 5px 0; /* Espacement vertical de 5px */	
}

.sommaire a:hover {
    color: #00bfff; /* Changement de couleur du texte au survol (bleu clair) */
}

/* Liste */
.sommaire ul {
    list-style: none; /* Suppression des puces de liste */
	font-size: 18px;
    padding-left: 10px; /* Espacement interne à gauche de 10px */
    margin: 0; /* Suppression de la marge par défaut */
}

/* Sous-listes */
.sommaire ul ul {
    padding-left: 15px; /* Espacement supplémentaire à gauche pour les sous-listes */
    font-size: 16px; /* Taille de la police réduite à 16px pour les sous-listes */
}

/* Ajouter [masquer] / [afficher] dynamiquement */
.sommaire-header::after {
    content: " [masquer]";
    font-size: 13px;
    color: #00bfff;
}

details:not([open]) .sommaire-header::after {
    content: " [afficher]";
}

.sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: #333;
    color: white;
    transition: left 0.3s ease;
    padding-top: 60px;
    z-index: 1000;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li {
    padding: 5px 15px;
	position: relative;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
    display: block;
}

.sidebar ul li a:hover {
    background-color: #555;
    border-radius: 5px;
}

/* Affichage des sous-menus */
.sidebar ul .submenu {
    display: block; /* Rendre les sous-menus visibles par défaut */
    top: 0;
    background: #333;
    min-width: 150px;
    z-index: 1000;
}

.submenu li {
    display: block;
}

.submenu li a {
    padding: 0;
    background: #333;
    color: white;
}

.submenu li a:hover {
    background: #555;
}

.menu-toggle {
    display: none;
}

.menu-icon {
    font-size: 20px;
    color: white;  /* Change la couleur de l'icône pour plus de contraste */
    background-color: #333;  /* Ajoute un fond sombre pour que l'icône ressorte mieux */
    border-radius: 50%;  /* Rendre l'icône arrondie */
    padding: 15px;  /* Ajoute de l'espace autour de l'icône */
    cursor: pointer;
	position: fixed;
    top: 110px;
    left: 20px;
    z-index: 999;
}

#menu-toggle:checked + .menu-icon + .sidebar {
    left: 0;
}

#menu-toggle:checked + .menu-icon + .sidebar + .overlay-container {
    display: block;
}

.close-button {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

h2::before, h3::before {
  content: ""; /* Vide mais utilisé pour insérer une forme */
  display: inline-block; /* Afficher en ligne avec le texte */
  width: 15px; /* Largeur de la sphère */
  height: 15px; /* Hauteur de la sphère */
  background-color: #ffffff	; /* blanc pour la sphère */
  border-radius: 50%; /* Créer une forme circulaire (sphère) */
  margin-right: 10px; /* Espacement entre la sphère et le titre */
  vertical-align: middle; /* Alignement vertical avec le texte */
}


h2{
	font-size: 26px; /* Taille du texte */
	color: #ffffff; /* blanc pour une meilleure lisibilité */
	font-weight: bold;
	margin-bottom: 0; /* Élimine l'espace par défaut sous le titre */
	font-family: 'Montserrat', sans-serif; /* Police de caractères */
	
}

h3{
	font-size: 23px; /* Taille du texte */
	color: #ffffff; /* blanc pour une meilleure lisibilité */
	font-weight: bold;
	font-family: 'Montserrat', sans-serif; /* Police de caractères */
}

p {
    font-size: 18px; /* Taille du texte */
    line-height: 1.3; /* Espacement entre les lignes */
    color: #ffffff; /* blanc pour une meilleure lisibilité */
    font-family: 'Montserrat', sans-serif; /* Police de caractères */
	font-weight: normal;
    text-align: justify;

}

p a {
    color: #00bfff; /* Bleu */
    text-decoration: none; /* Supprime le soulignement */
    font-weight: bold; /* Met en gras */
}

p a:hover {
    color: #66d9ff;
    text-decoration: underline; /* Ajoute un soulignement */
}

/* Style des éléments de liste */
.notes li {
    font-size: 18px; /* Taille du texte */
    line-height: 1.3; /* Espacement entre les lignes */
	margin-bottom: 8px; /* Plus d'espace pour la section "Notes" */
    color: #ffffff; /* blanc pour une meilleure lisibilité */
    font-family: 'Montserrat', sans-serif; /* Police de caractères */
	font-weight: normal;
    text-align: justify;
}

/* Style des liens dans les listes */
.notes li a {
    color: #00bfff;
    text-decoration: none; /* Supprime le soulignement */
    font-weight: bold;
}

.notes li a:hover {
    color: #66d9ff;
    text-decoration: underline; /* Ajoute un soulignement */
}

.style-hr{
	border: none; /* Supprime la bordure par défaut */
	border-top: 2px solid #808080; /* Ajoute une bordure de couleur et d'épaisseur */
	margin: 3px 0; /* Ajoute un petit espace au-dessus et en dessous de la ligne */
}

/* Style général du tableau */
.style-table {
    width: 100%; /* Largeur de 100% */
    border-collapse: collapse; /* Supprime l'espace entre les bordures */
    margin: 10px 0; /* Ajoute une marge au-dessus et en dessous */
    font-size: 18px;
}

/* Bordures et fond des cellules */
.style-table th, 
.style-table td {
    border: 2px solid #dddddd; /* Bordure grise */
    padding: 12px; /* Espacement intérieur */
	font-size: 16px; /* Taille du texte */
	color: #ffffff; /* blanc pour une meilleure lisibilité */
	font-family: 'Montserrat', sans-serif; /* Police de caractères */
	font-weight: bold;
}

/* Style des en-têtes */
.style-table thead {
    background-color: rgba(52, 152, 219, 0.6); /* 60% d'opacité */ /* Bleu */
    color: #ffffff; /* Texte blanc */
    font-weight: bold;
	text-align: center; /* Alignement du texte */
}

.style-table tbody {
    background-color: rgba(0, 0, 0, 0.55); /* Fond noir avec 55% de transparence */
}

/* Nom de la flore sous l'image */
.style-table td p {
    margin: 0;
	padding-top : 10px;
	text-align: center;
    font-weight: bold;
}

/* Alignement et largeur de la colonne Flore */
.style-table td:first-child, 
.style-table th:first-child {
    text-align: center;
}

/* Listes dans la colonne Biome */
.style-table ul {
    padding-left: 40px;
    margin: 0;
    text-align: left; /* Alignement à gauche pour une meilleure lisibilité */
    display: inline-block; /* Permet d'éviter que la liste s'étende trop */
}

.style-table li {
    list-style-type: disc; /* Ajoute des puces */
    margin-bottom: 10px; /* Espacement entre les éléments */
}

/* Ajustement de la largeur de la colonne Commentaire */
.style-table td:nth-child(3) {
    width: 40%;
}

.cellule-vide {
    text-align: center;
}

.video {
  display: block; /* La balise video est en mode "inline" par défaut, on la met en bloc */
  margin: 0 auto; /* Centre la vidéo horizontalement */
}

.navigation-container {
    display: flex;
    padding-top: 8px;
}

.navigation-colonne {
    margin: 0 10px;
	padding: 20px;
}

.menu-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
	color: #ffffff; /* Texte blanc */
	font-family: 'Montserrat', sans-serif; /* Police de caractères */
    display: block; /* Pour s'assurer que ça s'affiche comme un titre */
}

.navigation-colonne ul {
    list-style-type: none;
    padding: 0;
}

.navigation-colonne li {
    margin: 5px 0;
}

.navigation-colonne a {
    text-decoration: none;
	font-family: 'Montserrat', sans-serif; /* Police de caractères */
	font-weight: normal;
    color: #00bfff; 
}

.navigation-colonne a:hover {
    color: #66d9ff;
	text-decoration: underline; /* Ajoute un soulignement */
}

.navigation-colonne a::before{
	content: ""; /* Vide mais utilisé pour insérer une forme */
	display: inline-block; /* Afficher en ligne avec le texte */
	width: 5px; /* Largeur de la sphère */
	height: 5px; /* Hauteur de la sphère */
	background-color: #ffffff	; /* blanc pour la sphère */
	border-radius: 50%; /* Créer une forme circulaire (sphère) */
	margin-right: 10px; /* Espacement entre la sphère et le titre */
	vertical-align: middle; /* Alignement vertical avec le texte */
}

/* Style global du footer */
.footer {
    background-color: #333; /* Fond sombre */
    padding: 20px 10px;
}

/* Haut du footer */
.footer-top {
	text-align: center;
	font-size: 14px;
    color: #aaa;
}

/* Bas du footer */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #555;
    margin-top: 20px;
    font-size: 14px;
    color: #aaa;
}

.footer-back {
    text-align: center;
	margin : 0;
	font-size: 16px;
}

.footer-back a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;	
}

.footer-back a:hover {
    color: #d3d3d3;
	text-decoration: none; /* Supprime le soulignement */
}