#video1 {
            width: 300px;
            height: 200px;
            object-fit: cover;
        }

  #modal1 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
		
	 #modal2 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
		
		
	#modal3 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
	#modal4 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
	
	#modal5 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
	
	#modal6 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
		
	#modal7 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
	
	#modal8 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
	
	
	#modal9 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
	
	#modal10 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }	
		
	#modal11 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }	
	
	#modal12 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }	
		
	
	#modal13 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
			
	#modal14 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
	
	#modal15 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9); /* blanc à 60% d’opacité */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }	
		
	
	
 /* encadré du titre lors de l'ouverture de la vidéo */
 .surbrillance {
	 display:block;
  background-color: #009fb1;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

	#videott{
		
		position:relative;
		left:50%;
		
	}


    .close1 {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            cursor: pointer;
        }
		
	
	
	
	
	    body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8f9fa;
            padding-top: 76px;
        }
        .navbar {
            background-color: #212529 !important;
        }
        .navbar-brand {
            font-weight: 700;
            color: #e09f38 !important;
        }
        .nav-link {
            font-weight: 500;
            color: #ffffff !important;
            transition: all 0.3s;
        }
        .nav-link:hover {
            color: #e09f38 !important;
            transform: translateY(-2px);
        }
        .active {
            color: #e09f38 !important;
        }
        .carousel-item {
            height: 60vh;
            min-height: 300px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .carousel-caption {
            background-color: rgba(0, 0, 0, 0.6);
            padding: 20px;
            border-radius: 5px;
        }
        .presentation {
            padding: 50px 0;
            background-color: #fff;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin: 30px 0;
        }
		
		
		.presentation {
		margin-top: -20px; /* Ajuste cette valeur selon tes besoins */
		}
		
       html, body {
    height: 100%;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Assure que la page prend toute la hauteur de l'écran */
}

.content {
    flex-grow: 1; /* Permet au contenu de prendre l'espace restant et pousse le footer en bas */
}

.footer {
    background-color: #212529;
    color: white;
    padding: 30px 0;
    width: 100%;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 2px;
    background-color: #FF5733;
}

		
		
        .social-icon {
            font-size: 1.5rem;
            margin: 0 10px;
            color: white;
            transition: all 0.3s;
        }
        .social-icon:hover {
            color: #e63946;
            transform: translateY(-5px);
        }
		
		
		.bg-white{
			
			background:#ffffff;
			
		}
		
		.colorRed{
			color:#FF0000;
			
			
			
		}
		
		
		.border-custom {
			border: 4px solid #ccc;  /* Bord plus épais */
		}
			
		.titre-gras {
		font-weight: 900; /* Plus de gras que la balise <strong> */
		}





               /* navbar -----------------------------------------------------------------------------------------------------------*/		
		
		.navbar-nav .nav-link {
		color: white; /* Couleur de base */
		transition: color 0.3s ease;
		}

		.navbar-nav .nav-link:hover,
		.navbar-nav .nav-link.active {
		color: #ffcc00 !important; /* Jaune */
		font-weight: bold;
		}
	
	
		

		.navbar::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 15%; /* Centrer le liseré sur 70% de la largeur de la navbar */
		width: 70%;
		height: 2px; /* Vous pouvez ajuster l'épaisseur */
		background-color: #FF5733; /* Choisissez la couleur du liseré */
		}

	
	
	/* Alignement du texte */
	        /* Alignement du texte à gauche */
        .text-left {
            text-align: left;
        }
		
		/* image*/
		.image150{
			width:450px;
			
		}


/* Positionnement des flèches pour tous les écrans */
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 50%; /* Centrer verticalement */
    transform: translateY(-50%); /* Centrer exactement */
    z-index: 5;
}

/* Positionnement des flèches sur les petits écrans (mobiles) */
@media (max-width: 768px) {
	
	.presentation {
		margin-top: -250px; /*  */
		}
	
	
	
    .carousel-control-prev, .carousel-control-next {
        top: 100%; /* Ajuste la position verticale sur les petits écrans */
    }
	
	
	/* S'assurer que le carousel prend toute la largeur de l'écran */
	#bookCarousel {
		width: 100%; /* Prend toute la largeur de l'écran */
		max-width: 100%; /* Assure que le carousel ne dépasse pas la largeur de l'écran */
		
		height: 100px;
	}
	#bookCarousel .carousel-item img {
   
    object-fit: cover; /* Pour s'assurer que l'image couvre toute la zone sans déformation */
}

	
}

/* S'assurer que le carousel prend toute la largeur de l'écran */
#bookCarousel {
    width: 100%; /* Prend toute la largeur de l'écran */
    max-width: 100%; /* Assure que le carousel ne dépasse pas la largeur de l'écran */
	height: 500px; /* Ajuste la hauteur selon tes besoins */
    overflow: hidden; /* Pour éviter que le contenu dépasse */
}

/* Pour que les images du carousel s'étendent sur toute la largeur de l'écran */
.carousel-inner {
    width: 100%;
}

.carousel-item img {
    width: 100%; /* L'image occupe 100% de la largeur du carousel */
    object-fit: cover; /* Assure que l'image couvre toute la zone du carousel sans déformation */
}

/* Ajustement des flèches de navigation sur les écrans mobiles */
@media (max-width: 768px) {
    .carousel-control-prev, .carousel-control-next {
        top: 20%; /* Positionnement des flèches sur les petits écrans */
        width: 5%; /* Réduire la taille des flèches */
    }
}




#rgpd-banner {
    display: none; /* Par défaut, le bandeau est caché */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333; /* Fond sombre */
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 14px;
    z-index: 9999; /* Assurer que le bandeau soit au-dessus du contenu */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Ajout d'une ombre pour donner du relief */
}

#rgpd-banner p {
    margin: 0;
    padding-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
}

#accept-rgpd {
    background-color: #ff7f00; /* Couleur du bouton */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Animation pour la couleur de fond */
}

#accept-rgpd:hover {
    background-color: #e66f00; /* Changer la couleur au survol */
}