body {
        font-family: "Comic Sans MS", cursive, sans-serif;
    }

    header {
        text-align: center;
        padding: 10px;
        background-color: #52B7D2; /* Turquoise */
        /*position: relative;*/
    }

    /* Centrer le menu de navigation */
    .navbar-nav {
        display: flex;
        justify-content: center; /* Centre les éléments */
        width: 100%;
		font-family: Open Sans, sans-serif;
		font-weight: bold;
    }

    /* Style des liens de navigation */
    a {
        text-align: center;
        color: #FFFFFF; /* Texte blanc */
        padding: 10px; /* Ajoute un peu d'espace autour des liens */
    }

    /* Changer la couleur des liens au survol */
    .nav-link:hover {
        color: #FFFFFF; /* Or pour le survol des liens */
		background-color: #52B7D2; /* Turquoise */
    }
	  .logo {
        position: absolute; /* Permet au logo de se superposer */
        z-index: 10; /* Mettre le logo au-dessus de la barre */
    }
	     .video-container {
        position: relative;
        width: 100%;
        max-width: 960px; /* Limiter la taille maximale de la vidéo */
        margin: 20px auto; /* Centrer le conteneur */
        padding-bottom: 56.25%; /* Rapport 16:9 (hauteur = largeur * 9 / 16) */
        background-color: #000; /* Fond noir pour la vidéo */
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
	.logo-nav{
		align: center;
		text-align: center;
		height:60px;
    }







        .video-container {
            position: relative;
            width: 100%;
            max-width: 1200px; /* Ajuste selon tes besoins */
            aspect-ratio: 16 / 9; /* Maintient un bon ratio pour la vidéo */
        }

        .video-container iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
	.video-container {
		overflow: hidden; /* Cache tout ce qui dépasse */
		display: inline-block;
		border-radius: 15px; /* Arrondi les bords */
	}
  
  @media (min-width: 768px) { /* S'applique uniquement sur PC (écran ≥ 768px) */
    .video-container {
      width: 90%;
    }
	
  }

  .video-container iframe {
    width: 100%; /* Pour que l'iframe remplisse bien le conteneur */
    height: 100%; /* Ajuste selon les besoins */
    border-radius: 15px; /* Arrondi les bords de la vidéo */
  }
  
  
  
  
  
  
  
  



body {
	font-family: Arial, sans-serif;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

/* Style pour le popup */
.popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 20px;
	border: 1px solid #ccc;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	width: 300px;
	text-align: center;
}

.popup a {
	display: block;
	margin: 10px 0;
	color: #0066cc;
	text-decoration: none;
}

.popup a:hover {
	text-decoration: underline;
}

/* Fond de l'écran en arrière-plan pour le popup */
.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}
header {
	text-align: center;
	padding: 10px;
	background-color: #52B7D2; /* Turquoise */
	position: relative;
}
a {
	text-decoration: none;
}

body {
	font-family: "Comic Sans MS", cursive, sans-serif;
}

/* Affichage du titre "Menu" uniquement sur mobile */
/* Par défaut, caché sur grand écran */
.menu-title {
	display: none;
	font-size: 20px;  /* Taille un peu plus grande */
	font-weight: bold;
	text-align: center;
	margin-bottom: 0px; /* Supprime l'espace sous "Menu" */
}

ul {
	list-style-type: none;
	padding-left: 20px;
}

li {
	margin-bottom: 5px;
}

li:hover {
	/*background-color: #d0f2f1; /* Couleur de survol */
}

svg:hover path {
	fill: #FFDD33;
}

.folder {
	cursor: pointer;
}

/* Style pour masquer les sous-elements des dossiers */
ul ul.hidden {
	display: none;
}

/* Style pour les miniatures */
.thumbnail {
	width: 50px;
	height: auto;
	margin-right: 10px;
}
.logo {
	position: absolute;
	top: 10px;
	right: 10px;
	max-width: 100px; /* Ajustez la taille maximale selon vos besoins */
}

nav {
	display: flex;
	justify-content: center;
	background-color: #52B7D2; /* Turquoise */
	color: white;
	padding: 10px;
}

nav a {
	color: white;
	text-decoration: none;
	padding: 10px;
	margin: 0 10px;
}

section {
	margin: 20px 0;
}

footer {
	text-align: center;
	padding: 10px;
	background-color: #52B7D2; /* Turquoise */
}

.nav-link{
	color: white;
	text-align: left;
}
.nav-link:hover {
	color: #FFDD33;

}

.dropdown-item {
	font-size: 16px; 
	font-weight: bold;
	margin: 0px;
	color: white;
	text-align: left;
}

.dropdown-item:hover {

	padding: 4 16px;
	margin: 0px;
	color: #52B7D2;
	background-color: none;
}

.dropdown-menu {
	/* background-color: #52B7D2; */
	
            background-color: lightblue;
}

/* Affichage et ajustement pour mobile */
@media screen and (max-width: 768px) {
	body {
		font-family: Arial, sans-serif;
	}
	.menu-title {
		display: block;
		margin-bottom: 5px; /* Réduit l’espace entre "Menu" et le menu */
	}

	.menu {
		text-align: center; /* Centre les éléments du menu */
		padding: 0; /* Supprime tout espace inutile */
	}

	.menu li {
		display: block; /* Met chaque élément du menu sur une ligne */
		margin: 0px 0; /* Espacement léger entre les éléments */
	}
	.logo {
		display: block; /* Assure que le logo reste bien positionné */
		margin: 0 auto; /* Centre le logo */
		max-width: 80px; /* Ajuste la taille du logo si nécessaire */
	}

	.titre {
		text-align: center; /* Centre le titre */
		margin-top: 10px; /* Ajoute de l’espace sous le logo */
	}
	.navbar-brand {
		order: -1;
		margin-right: auto;
	}
	.navbar-toggler {
		order: -2;
		margin-right: auto;
	}
}

/* ---------------- */
/* Miniature videos */
/* ---------------- */


	/* Réduire la taille des miniatures */
	.thumbnail img {
		width: 90px;
		height: auto;
		border-radius: 2px;
		margin-right: 10px; /* Espacement entre l'image et le titre */
	}

	/* Disposer le titre à droite de la miniature */
	.thumbnail {
		display: flex;
		flex-direction: row; /* Le titre sera maintenant à droite de la miniature */
		align-items: left; /* Centrer verticalement le titre et la miniature */
		margin-bottom: 10px;
		width: 100%;
	}

	.thumbnail p {
		margin: 0;
		width: 165px;
		font-size: 1rem;
		white-space: nowrap; /* Empêche le texte de se couper en plusieurs lignes, s'il est trop long */
		overflow: hidden;
		text-overflow: ellipsis; /* Ajoute des "..." si le texte dépasse */
	}

     
	     .video-container {
        position: relative;
        width: 100%;
        max-width: 960px; /* Limiter la taille maximale de la vidéo */
        margin: 20px auto; /* Centrer le conteneur */
        padding-bottom: 56.25%; /* Rapport 16:9 (hauteur = largeur * 9 / 16) */
        background-color: #000; /* Fond noir pour la vidéo */
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
	        /* Supprimer les bordures des éléments de la liste */
        .list-group-item {
            border: none;
            padding: 2px 0;
        }

/* Réduire la taille des miniatures */
.thumbnail img {
    width: 90px;
    height: auto;
    border-radius: 2px;
    margin-right: 10px; /* Espacement entre l'image et le titre */
}

/* Disposer le titre à droite de la miniature */
.thumbnail {
    display: flex;
    flex-direction: row; /* Le titre sera maintenant à droite de la miniature */
    align-items: left; /* Centrer verticalement le titre et la miniature */
    margin-bottom: 10px;
    width: 100%;
}

.thumbnail p {
    margin: 0;
	width: 165px;
    font-size: 1rem;
    white-space: nowrap; /* Empêche le texte de se couper en plusieurs lignes, s'il est trop long */
    overflow: hidden;
    text-overflow: ellipsis; /* Ajoute des "..." si le texte dépasse */
}

/* Liste des vidéos avec alignement du texte */
.list-group-item {
    border: none;
    padding: 5px;
}

.list-group {
    padding-left: 0;
    margin-bottom: 5px;
}

.container {
    text-align: left;
}


	
/* Banner : image en début de page */	
	
			.banner-container {
			width: 100%;
			max-height: 250px;
			min-height: 55px;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.banner-container img {
			width: 100%;
			max-height: 250px;
			min-height: 55px;
			object-fit: cover;
			justify-content: center;
			width: 100vw;
			height: 44vw;
			max-height: 250px;
			margin: 0px;
			padding: 0px;
		}
		
/* Section : style plier / déplier NIVEAU 1  */		
        .section-title {
            background: #DBEFF6;
            padding: 10px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
        }
		.section-title span{
			color: #FFDD33;
		}
		
/* Section : style plier / déplier NIVEAU 2 */		
        .section-title-niv2 {
            background: #7EC9DE;
            padding: 10px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
        }
		.section-title-niv2 span{
			color: #FFDD33;
		}

	/* Bouton "Tout plier/déplier" stylisé */
    .btn-toggle {

        background-color: #DBEFF6; /* Nouvelle couleur */
        border: none;
        padding: 8px 12px;
        font-size: 18px;
        cursor: pointer;
		float: right;

    }
    .btn-toggle:hover {
        background-color: #B5DAE4; /* Légèrement plus foncé au survol */
    }