body {
			font-family: 'Tahoma';
		}
		.background-image {
            background-image: url('../images/background.jpg');
            background-size: cover;
            background-position: center;
            min-height: 140px; /* Hauteur minimale */
            padding: 20px 0; /* Ajoute de l'espace autour du texte pour éviter qu'il ne touche les bords */
            /*display: flex;*/
            align-items: center;
            justify-content: center;
            color: white;
            width: 100%;
            text-align: center;
        }
        
        /* Assurer un bon rendu sur petits écrans */
        @media (max-width: 768px) {
            .background-image {
                padding: 30px 10px; /* Plus d'espace pour éviter l'écrasement du contenu */
            }
        }

        .text-overlay {
            background-color: rgba(0, 0, 0, 0.5); /* Opacité pour le texte */
            padding: 20px;
            border-radius: 10px;
        }
/* -------------------- Navbar ------------------------ */
        
        .navbar-toggler {
            border-color: #0217a1 !important;
             margin-left: auto;
            margin-right: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%230217a1' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
        }
        /* Fond de la navbar et menu déroulant */
        .navbar,
        .navbar-green,
        .dropdown-menu {
            background-color: #ffffff !important;
        }
        
        /* Liens de navigation, logo et éléments du dropdown */
        .navbar .nav-link,
        .navbar .navbar-brand,
        .dropdown-toggle,
        .dropdown-item {
            color: #0217a1 !important;
            font-size: 18px;
        }
        
        /* Padding spécifique */
        .navbar .nav-link {
            padding: 5px 40px;
        }
        
        .navbar .navbar-brand {
            padding: 5px 80px;
            font-size: 1.2em;
        }
        
        /* Bordure légère du menu déroulant */
        .dropdown-menu {
            border: 1px solid rgba(2, 23, 161, 0.15);
        }
        
        /* Padding pour les éléments du menu déroulant */
        .dropdown-item {
            padding: 10px 15px;
            background-color: transparent;
        }
        
        /* Hover : fond gris foncé et texte blanc (pour tous les éléments interactifs) */
        .navbar .nav-link:hover,
        .dropdown-toggle:hover,
        .dropdown-item:hover {
            background-color: #545454 !important;
            color: #ffffff !important;
            border-radius: 4px;
        }

/* ----------------- container --------------------------------------------------*/
         .custom-container {
            width: 100%; /* Assure que les deux divisions prennent toute la largeur */
            margin-bottom: 20px; /* Ajoute un espace entre les deux divisions */
        }
        
        @media (min-width: 768px) {
            .custom-container {
                max-width: 800px; /* Limite la largeur pour les écrans plus larges */
                margin-left: auto;
                margin-right: auto; /* Centre les divisions horizontalement */
            }
        }
		

/*--------------------  images icones de titre -----------------------------------------*/
        .responsive-img {
                            width: 14%;
                            height: 14%;
                          }
                          
                          @media (min-width: 780px) {
                            .responsive-img {
                              width: 8%;
                              height: 8%;
                            }
                          }
                          
/* ---------------------- Carrousel ------------------------------------------------ */

        /* Image de fond avec flou et assombrissement */
        .carousel-item img {
            filter: brightness(60%) blur(2px);
            height: 90vh;
            object-fit: cover;
        }
        
        /* Conteneur de caption de base */
        .carousel-caption {
            font-family: 'Roboto', sans-serif;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: auto; /* Changé de 100% à auto */
            max-width: 90%; /* Limite la largeur maximale */
            padding: 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(84, 84, 84, 0.2); /* Gris transparent */
            color: #ffffff;
        }
        
        /* Ajustements responsive pour le texte */
        .carousel-caption h3 {
            font-size: clamp(2.5rem, 5vw, 3rem); /* Taille responsive */
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .carousel-caption h6 {
            font-size: clamp(1.8rem, 3vw, 2rem); /* Taille responsive */
            margin-bottom: 20px;
        }
        
        /* Flou et styles pour écrans moyens et grands */
        @media (min-width: 768px) {
            .carousel-caption {
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border-radius: 15px;
                padding: 30px; /* Plus d'espace sur grands écrans */
                min-width: 70%; /* Largeur minimale sur desktop */
            }
        }
        
        /* Ajustements pour très petits écrans */
        @media (max-width: 400px) {
            .carousel-caption {
                padding: 15px;
                min-width: 100%; /* Largeur minimale sur desktop */
                min-height: 100%; /* Largeur minimale sur desktop */
            }
        }
        
        /* Boutons responsive */
        .carousel-caption .btn {
            font-size: clamp(0.8rem, 2vw, 1rem);
            padding: 8px 16px;
        }
        
        /* Icônes flèches */
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 10px;
            height: 10px;
            background-size: 30px 30px;
        }
        
        /* Indicateurs carrés en blanc */
        .carousel-indicators {
            bottom: 10px;
        }
        
        .carousel-indicators [data-bs-target] {
            background-color: #ffffff !important;
            width: 12px;
            height: 12px;
            border-radius: 0;
        }
        
        /* Boutons */
        .carousel-caption .btn,
        .btn {
            background-color: #0217a1 !important;
            border-color: #0217a1 !important;
            color: #ffffff !important;
            border-radius: 0;
        }
        
        /* Hover des boutons */
        .carousel-caption .btn:hover,
        .btn:hover {
            background-color: #545454 !important;
            border-color: #545454 !important;
            color: #ffffff !important;
        }
        
       
/* ----------------------- Hauteur de zone de titre -------------------------------------------*/
		 .custom-height {
            min-height: 60px; /* Ajuste la valeur selon tes besoins */
          }
         
/* --------------------------- titre -----------------------------------------------------------*/
         .titre {
              font-family: Montserrat; 
              color:white;
          }
          
        h3 {
            font-weight: bold;
        }
       
        h3:hover {
            color: #0217a1;
            transition: color 0.3s ease-in-out;
        }
         h3 a:hover{
            color: #0217a1;
            transition: color 0.3s ease-in-out;
        }
        
        .pub {
            font-weight: bold;
            font-size: 18px;
            font-family: Arial;
        }
/* -------------------------- section ----------------------------------------------------------*/
        section { font-family: 'Montserrat', sans-serif; 
        display: flex; justify-content: center; /* Centrer horizontalement */ 
        align-items: center; /* Centrer verticalement */ 
        width: 100%; 
        text-align: left; 
        margin: auto; /* Centrer la section dans la page */ 
        color: black; /* Changer la couleur du texte en vert */ }
        
        .section a {
            text-decoration: none;
        }
        .section a:hover {
            color: #2B88B4;
        }

/* --------------------- services description -----------------------------------------------------*/
		.services-a a {
            color: blue;
            text-decoration: none;
            font-weight: bold;
        }
        .services-a a:hover {
            color: #FE6612;
            text-decoration: underline;
            font-weight: bold;
        }
		
		.div-image {
		    margin: 15px; /* Espacement global autour de chaque div */
		    text-align: justify; 
		    text-align: center; 
		    /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 8px 0 rgba(0, 0, 0, 0.19);*/
		}
		.image-zoom {
        transition: transform 0.3s ease; /* Transition fluide */
        }
        
        .image-zoom:hover {
            transform: scale(1.1); /* Zoomer à 110% */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Accentuer l'ombre pendant le zoom */
            color: #028A40;
            
        }
        
        .div-rectangle {
		    margin: 15px; /* Espacement global autour de chaque div */
		    text-align: justify; 
		    text-align: center; 
		    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 2px 8px 0 rgba(0, 0, 0, 0.19);
		}
        
        /* Ajouter des styles optionnels */
        .image-zoom {
            cursor: pointer; /* Changer le curseur pour indiquer qu'il y a une interaction */
            border-radius: 0px; /* Coins arrondis (facultatif) */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour un effet esthétique */
        }
        
        
            
       
/* ----------------- contactez-nous section ---------------------------------------------------*/
        .contact-link {
            color: black; /* Texte noir */
            text-decoration: none; /* Enlever le soulignement */
        }
        
        .contact-link:hover {
            color: #2B88B4; /* Texte vert au survol */
            text-decoration: none; /* Assurer que le texte ne soit pas souligné au survol */
        }
/* ----------------------------- footer ---------------------------------------------------------- */
        .background-image-footer {
            background-image: url('../images/bg.webp');
            background-size: cover;
            background-position: center;
            height: 10%; /* Hauteur de la zone */
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            width: 100%;
        }
		.foot-a {
            color: #777777;
            font-weight: normal;
            font-size: 14px; /* Ajustez cette valeur selon vos besoins */
            text-decoration: none;
        }
        .foot-a a {
            color: #777777;
            font-weight: normal;
            font-size: 14px;
            text-decoration: none;
        }
        .foot-a a:hover {
            color: #0217a1 !important;
            font-size: 14px;
            text-decoration: none;
        }
/*----------------------Menu formations --------------------------------------------*/
/* Masquer les sous-menus par défaut */
        .dropdown-menu {
            display: none;
            position: absolute;
            left: 100%;
            top: 0;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 0.5rem;
            z-index: 1000;
        }

        /* Afficher les sous-menus lorsqu'ils ont la classe "show" */
        .dropdown-menu.show {
            display: block;
        }

        /* Style pour les liens des sous-menus */
        .dropdown-item {
            display: block;
            padding: 0.5rem 1rem;
            color: #333;
            text-decoration: none;
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
        }
        
        /* bouton savoir plus et autres boutons */
        .button {
            background-color: #01B509;
            text-decoration: none;
            color: white;
            border-radius: 0;
            border: none;
            transition: background-color 0.3s ease;
            width: 180px;
            height: 40px;
        }
        
        .button:hover {
            text-decoration: none;
            background-color: #028A40;
        }