body {
  overflow-x: hidden;
}

.titre-menu {
  color: var(--nav-color);
  font-size: 16px;
  padding: 0 2px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap; /* Style des boutons pour afficher les sous-catégories */
  transition: 0.3s; /* Ajouter la transition sur la totalité du conteneur */
  position: relative;
  text-decoration: none;
}

.titre-menu button.categorie-toggle {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  text-align: left; /* Aligner le texte à gauche pour le bouton */
  padding: 0.5rem;
  width: 100%; /* Prend toute la largeur */
  background-color: #f1f1f1; /* Couleur de fond du bouton */
  border-bottom: 1px solid #ddd; /* Ligne de séparation en bas */
  border-radius: 30px;
  transition: 0.3s; /* Ajout d'une transition pour rendre les effets plus fluides */
}


.menu-deroulant:hover .titre-menu {
  opacity: 1;
}


	
	
	    /* Conteneur de l'image avec position relative */
        .image-container {
            position: relative;
            /* display: inline-block; /* Permet à l'image de s'adapter */ */
			z-index: 1;
			 overflow: visible !important;
        }

        /* Image */
        .image-container img {
            display: block;
            max-width: 100%;
            height: auto;
            border-radius: 10px;
			margin: 0 auto; /* <-- centre l'image horizontalement */
        }

        /* Liste déroulante superposée */
        .dropdown { 
            position: absolute;
            top: 50%; /* Position verticale */
            left: 50%; /* Position horizontale */
            transform: translate(-50%, -50%); /* Centre exactement la liste */
           
            font-size: 14px;
            background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
            border-radius: 5px;
            /* border: 1px solid #ccc; */
				border: none;
  outline: none;
  box-shadow: none;
	
      }
	  
	 
		
		     /* Bouton de la liste */
        .dropdown-button {
            padding: 3px 7px;
            background-color: #7dbabeab;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
        }
		
		
		
		
		

		
				     /* Bouton de la liste */
        .dropdown-button1 {
            padding: 10px 15px;
            background-color: green;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
        }
		


        /* Liste cachée par défaut */
        .dropdown-content {
			
min-width: 350px;
            display: none;
		left: 50%;
transform: translateX(-50%);
 padding: 15px 20px;
            position: absolute;
            background-color: white;
            width: fit-content;
  max-width: 400px; /* Limite la largeur à 90% de la largeur de la fenêtre */
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            z-index: 1000 !important;
			text-align: left;
			cursor: url('../images/libellule-icone.png'), auto;
        }
		
		   /* Style des options */
        .dropdown-content a {
		
		    display: block; /* Transforme le lien en bloc pour occuper toute la largeur */
    white-space: normal; /* Permet au texte de revenir à la ligne */
	color: #333;

	min-width: 150px;
 max-width: none;
	
    /* width: 330px; /* Ajuste la largeur du bloc */ 
    padding: 10px; /* Ajoute de l'espace autour du texte */
    word-wrap: break-word; /* Coupe les longs mots si nécessaire */
        
            padding: 10px;
            text-decoration: none;
            display: block;
            transition: background 0.3s;
			  z-index: 1000 !important;
			  font-size:16px;
			  border-radius: 10px;
			
        }

        /* Effet de survol sur les options */
        .dropdown-content a:hover {
            background-color: #fff;
			color:#fff;
        }

        /* Afficher la liste au survol */
        .dropdown:hover .dropdown-content {
            display: block;
        }
		
		    /* Positionnement des boutons */
			
			 .dropdown-01 { z-index: 103; top: 12%; left: 23%; }
			  .dropdown-02 { z-index: 103; top: 12%; left: 75%; }
			     .dropdown-03 { z-index: 70; top: 68%; left: 25%; }
				   .dropdown-04 { z-index: 70; top: 69%; left: 75%; }
					.dropdown-0 { z-index: 103; top: 27%; left: 20%; }   
        .dropdown-1 { z-index: 103; top: 20%; left: 20%; }
        .dropdown-2 {z-index: 102;  top: 30%; left: 30%; }
		  .dropdown-2b {z-index: 99;  top: 38%; left: 20%; }
		  .dropdown-3A { z-index: 104; top: 16%; left: 49%; }
        .dropdown-3 { z-index: 103; top: 21%; left: 49%; }
		.dropdown-4 {z-index: 102;  top: 25%; left: 44%; }
		.dropdown-5 {z-index: 102;  top: 25%; left: 57%; }
		.dropdown-6 {z-index: 99;  top: 30%; left: 43%; }
		.dropdown-7 {z-index: 96;  top: 35%; left: 45%; }
		.dropdown-8 {z-index: 97;  top:35%; left: 60%; }
		.dropdown-9 {z-index: 98;  top: 30%; left: 58%; }
		.dropdown-10 {z-index: 91;  top: 40%; left: 40%; }
		.dropdown-11 {z-index: 91;  top: 40%; left: 30%; }
		.dropdown-12 {z-index: 101;  top: 30%; left: 75%; }
		.dropdown-13 {z-index: 101;  top: 25%; left: 75%; }
		.dropdown-14 {z-index: 90;  top: 48%; left: 20%; }
		.dropdown-15 {z-index: 89;  top: 43%; left: 50%; }
		.dropdown-16 {z-index: 88;  top: 45%; left: 68%; }
		.dropdown-17 {z-index: 86;  top: 50%; left: 65%; }
		
		.dropdown-5
{
    border: none !important; /* Désactive la bordure du dropdown général */
	outline: none;
}


		.dropdown-6

{
    border: none !important; /* Désactive la bordure du dropdown général */
}

		.dropdown-7
		
		{
    border: none !important; /* Désactive la bordure du dropdown général */
}

		.dropdown-8
		
		{
    border: none !important; /* Désactive la bordure du dropdown général */
	
}

		
		.dropdown-9
		{
    border: none !important; /* Désactive la bordure du dropdown général */
}

		.dropdown-10
		{
    border: none !important; /* Désactive la bordure du dropdown général */
}

		
		.dropdown-11
		
		{
    border: none !important; /* Désactive la bordure du dropdown général */
}

		.dropdown-12
		{
    border: none !important; /* Désactive la bordure du dropdown général */
}

		
		.dropdown-13
		{
    border: none !important; /* Désactive la bordure du dropdown général */
}

		
		.dropdown-14
		{
    border: none !important; /* Désactive la bordure du dropdown général */
}

		
		.dropdown-15
		
		{
    border: none !important; /* Désactive la bordure du dropdown général */
}

		.dropdown-16
		
		{
				
    border: none !important; /* Désactive la bordure du dropdown général */
}

		.dropdown-17
		{
    border: none !important; /* Désactive la bordure du dropdown général */
}


.dropdown-01 .dropdown-button {
	 border:none;
	 outline:none;
	cursor:default;
	font-size:18px;
}

.dropdown-02 .dropdown-button {
	 border:none;
	 outline:none;
	cursor:default;
	font-size:18px;
	 background-color: #95b76da8;
}


.dropdown-03 .dropdown-button {
	 border:none;
	 outline:none;
	cursor:default;
	font-size:18px;
	 background-color: #e8b95ca6;

}


.dropdown-04 .dropdown-button {
	 border:none;
	 outline:none;
	cursor:default;
	font-size:18px;
	 background-color: #a07fba87;
	 
}






		
				.dropdown-3A .dropdown-button {
					
 background-color: #fff0;
 width:130px;
 border:none;
 color:#B8860B;
 outline:none;
   box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5); /* halo doré */
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */
}	


.dropdown-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
}

		
		.dropdown-3 .dropdown-button {
 background-color: #95b76d91;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */
	    overflow: hidden; /* évite les débordements visuels */
}	


		.dropdown-4 .dropdown-button {
 background-color: #95b76d91;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
}	

		.dropdown-6 .dropdown-button {
 background-color: #95b76d91;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */
}	
		
.dropdown-5 .dropdown-button {
 background-color: #95b76da8;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
	  overflow: hidden; /* évite les débordements visuels */
}	


.dropdown-7 .dropdown-button {
 background-color: #95b76d91;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
	 overflow: hidden; /* évite les débordements visuels */
}	

.dropdown-10 .dropdown-button {
 background-color: #95b76d91;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
	 overflow: hidden; /* évite les débordements visuels */
}	




.dropdown-8 .dropdown-button {
 background-color: #95b76da8;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
	 overflow: hidden; /* évite les débordements visuels */
}	

.dropdown-9 .dropdown-button {
 background-color: #95b76da8;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
	 overflow: hidden; /* évite les débordements visuels */
}	


.dropdown-11 .dropdown-button {
 background-color: #e8b95c8c;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
	 overflow: hidden; /* évite les débordements visuels */
		 width:100%;
}	




.dropdown-12 .dropdown-button {
 background-color: #95b76da8;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
	
}	

.dropdown-13 .dropdown-button {
 background-color: #95b76da8;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
}	

.dropdown-14 .dropdown-button {
 background-color: #e8b95ca6;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
}	

.dropdown-15 .dropdown-button {
 background-color: #a07fba87;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
}	



.dropdown-16 .dropdown-button {
 background-color: #a07fba87;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
}	


.dropdown-17 .dropdown-button {
 background-color: #a07fba87;
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */ 
}	




  /* Pour les résolutions 360x640 (portrait) et 640x360 (paysage) */
@media (max-width: 640px)  {

  
  
  
       .dropdown { 
            position: absolute;
            top: 50%; /* Position verticale */
            left: 50%; /* Position horizontale */
            transform: translate(-50%, -50%); /* Centre exactement la liste */
            font-size: 10px;
            border-radius: 5px;
			border: none;
			
			overflow:hidden;

			
      }
	  
	    .dropdown-01 .dropdown-button,
  .dropdown-02 .dropdown-button,
  .dropdown-03 .dropdown-button,
  .dropdown-04 .dropdown-button {
    font-size: 9px;
    padding: 4px 6px;
  }

	  
	 

	  
	  
        /* Liste cachée par défaut */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 150px;
			max-width: none;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            z-index: 1000 !important;
				cursor: url('../images/libellule-icone.png'), auto;
        }
		
	  
	  

    .image-container img {
        max-width: 100%; /* Réduit encore la taille de l'image */
    }

    .dropdown-buttons-container {
        top: 72%; /* Décale les boutons un peu plus bas */
        flex-direction: row; /* Les boutons restent sur la même ligne */
        width: 60%; /* Les boutons occupent 90% de la largeur de l'image */
		
    }

    .dropdown-button {
      
        padding: 2px 3px; /* Réduit l'espace intérieur des boutons */
        font-size: 7.5px; /* Réduit la taille de la police pour les petits écrans */
		outline: none !important; /* Enlève le contour au focus */
    border: none; /* Enlève la bordure si nécessaire */
	overflow:hidden;
		
    }
	
	 .dropdown-content a {
	 font-size:10px;
	 color: #333;
	 }
	
			    /* Positionnement des boutons */
				
				 .dropdown-01 { z-index: 103; top: 10%; left: 20%; }
			  .dropdown-02 { z-index: 103; top: 10%; left: 75%; }
			     .dropdown-03 { z-index: 103; top: 73%; left: 23%; }
				   .dropdown-04 { z-index: 103; top: 75%; left: 80%; }
				
				
		.dropdown-0 { z-index: 103; top: 23%; left: 16%; }
        .dropdown-1 { z-index: 103; top: 20%; left: 20%; }
        .dropdown-2 {z-index: 102;  top: 32%; left: 18%; }
		  .dropdown-2b {z-index: 99;  top: 40%; left: 15%; }
		    .dropdown-3A { z-index: 104; top: 16%; left: 49%; }
        .dropdown-3 { z-index: 103; top: 23%; left: 50%; }
		.dropdown-4 {z-index: 102;  top: 28%; left: 38%; }
		.dropdown-5 {z-index: 102;  top: 30%; left: 55%; }
		.dropdown-6 {z-index: 101;  top: 35%; left: 38%; }
		.dropdown-7 {z-index: 96;  top: 43%; left: 38%; }
		.dropdown-8 {z-index: 97;  top:43%; left: 64%; }
		.dropdown-9 {z-index: 101;  top: 36%; left: 55%; }
		.dropdown-10 {z-index: 90;  top: 50%; left: 35%; }
		.dropdown-11 {z-index: 89;  top: 47%; left: 20%; }
		.dropdown-12 {z-index: 100;  top: 35%; left: 78%; }
		.dropdown-13 {z-index: 101;  top: 25%; left: 80%; }
		.dropdown-14 {z-index: 90;  top: 55%; left: 20%; }
		.dropdown-15 {z-index: 88;  top: 56%; left: 49%; }
		.dropdown-16 {z-index: 88;  top: 50%; left: 73%; }
		.dropdown-17 {z-index: 86;  top: 58%; left: 77%; }
  
  
}




		
				.dropdown-3A .dropdown-button {
 background-color: #fff0;
 font-size:16px;
 width:100px;
 border:0.2px solid;
 color:#B8860B;
 outline:none;
   box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5); /* halo doré */
    /* <!-- border: 10px solid green !important; /* Ajoute un contour uniquement sur ce bouton */
	text-align: center;
}
}	





/* Style du sous-menu */
.menu-deroulant > ul {
    display: block;
	 flex-direction: column; /* <-- Au cas où un flex s'injecte */
    white-space: normal; /* <-- Permet au texte de revenir à la ligne */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 200px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 0;  /* Cacher le sous-menu */
    visibility: hidden;  /* Cacher le sous-menu pour éviter de le voir sans clic */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Transition fluide */
}

.menu-deroulant:hover > ul,
.menu-deroulant.show > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}




/*
.menu-deroulant.show > ul {
    display: block;
    opacity: 1;   Rendre visible *
    visibility: visible;  /* Visibilité active 
    transition-delay: 0s;  /* Annuler le délai de transition 
}


.menu-deroulant:hover > ul {
    
	display: block;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
	
}
*/

/* Style des éléments du sous-menu */
.menu-deroulant ul li {
    padding: 10px 15px;
    box-sizing: border-box;  /* Assure que le padding ne change pas la taille totale */
	  display: block;
	  
}

/* Style des liens du sous-menu */
.menu-deroulant ul li a {
	
    text-decoration: none;
    /* <!-- display: block; --> */
    padding: 8px 15px;  /* Fixe un padding constant pour éviter les changements */
    transition: background 0.3s, color 0.3s;
    box-sizing: border-box;  /* Assure que le padding ne change pas la taille totale */
	
}

/* Effet au survol des liens du sous-menu */
.menu-deroulant ul li:hover {
    <!-- background-color: #f0f0f0; -->
	color :#129589;
}

/* Effet au survol des liens du sous-menu */
.menu-deroulant ul li a:hover {
 
	 color :#129589;
}




/* Style au focus ou au clic - Empêcher les changements d'apparence */
.menu-deroulant ul li a:focus,
.menu-deroulant ul li a:active {
    background-color: transparent;  /* Pas de fond changeant */
      color: #0F7270;  /*  changement de couleur */ 
    outline: none;  /* Éviter le contour au focus */
}



/* Cacher les sous-menus par défaut */
.sous-menu {
  display: none;
  padding-left: 1rem;
}

.sous-menu.open {
  display: block;
}

/* Rotation de l'icône */
.toggle-dropdown {
  transition: transform 0.3s ease;
}

* Quand le menu est actif */
.navmenu.active {
  display: block;
}






 /* Affichage du sous-menu au clic */
 .menu-deroulant.show > ul { 
    display: block;
 } 
 
/* Tourner la flèche de droite à bas au survol ou au clic */
.menu-deroulant:hover .toggle-dropdown,
.menu-deroulant.show .toggle-dropdown {
    transform: rotate(90deg);
	
}

	
  .container12 {
  
            width: 90%;
            max-width: 1200px;
            margin: 50px auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        header h1 {
            color: #333;
        }

        .content p, .content ul {
            color: #555;
            font-size: 16px;
            line-height: 1.7;
            text-align: left;
        }

        .content ul {
            list-style-type: disc;
            padding: 0;
			/* text-align: justify; */
        }

        .content ul li {
            padding: 5px 0;
        }



  .image-link img {
  
    width: 200px;
  height: 150px;
  -webkit-filter: grayscale(0) blur(0px);
  filter: grayscale(0) blur(0px);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  
      width: 200px; /* Ajuste la taille de l’image */
      height: auto;
      transition: transform 0.3s ease; /* Animation fluide */
	   margin-left:50px;
	   margin-top:-15px;
  }

  .image-link:hover img {
 -webkit-transform: scale(1.5);
      transform: scale(1.5, 1.5); /* Zoom léger au survol */
	  <!-- transform: scaleX(1.5); -->
	  <!-- transform: scaleY(1.5); -->
  }
  
  
  /* Bouton Voir Plus */
.btn {
    display: inline-block;
    padding: 8px 16px;
    background: #fff;
    color: #444444;
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 5px;
    margin-top: 10px;
    transition: background 0.3s;
}

.btn:hover {
margin-left: auto; /* Pousse le bouton à droite */
  
}
  
  
  
  .btn-modern {
  padding-left:5px;
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--heading-font);
 font-size: 1.2rem;  
  font-weight: 600;
  color: #333;
  background-color: white;
  border: 2px solid #333;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}


.btn-modern:hover {
 background-color: #0F7270;
  color: white;
  transform: translateY(-2px); 
}




   .content img {
            max-width: 100%;
            height: auto;
			display:block;
            border-radius: 10px;
           overflow: hidden;
		     border: 1px solid #ccc; /* gris clair, très léger */
        }


/* Conteneur de l'image pour la décaler */
.image-wrapper {
  position: relative;
  height: 300px;  /* Définit une hauteur spécifique pour le conteneur */
}





.rounded-image {
    width: 100%; /* Remplace img-fluid pour s'assurer que l'image s'adapte bien */
    border-radius: 15px; /* Ajustez le rayon selon votre préférence */
    display: block; /* Supprime l’espace supplémentaire sous l’image */
}



.container {
  width: 100%;
}



/* Bloc des deux boutons */
.scroll-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 999;
}

.scroll-top {
  width: 48px;
  height: 48px;
  background: #33333338;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;

  /* Centrage parfait */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Supprime tout décalage du contenu interne */
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 24px;
  vertical-align: middle;
}

.scroll-top i {
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}



   /* Section Compétences bien centrée */
        .section-competences {
            text-align: center;
            padding: 40px 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            max-width: 1100px;
            width: 100%;
			 margin-left: auto;
			margin-right: auto;    
        }
		
		
		

        /* Titre */
        .section-competences h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        /* Image */
        .competences-image {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .section-competences h2 {
                font-size: 1.5rem;
            }
        }


/* Centrer le titre et l'aligner avec "Métiers" */
#competences .section-competences p {
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Style des éléments du titre avec effet */
#competences .section-competences p span {
    margin: 0 5px;
}

#competences .section-competences .description-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #007bff; /* Couleur de ton choix */
    text-transform: uppercase;
}

/* Ajuster l'image de fond pour occuper toute la section */
#competences .image-container {
    position: relative;
    text-align: center;
    margin-top: 30px;
}


.icone-thermique {
  display: block;
  margin: 8px auto 0; /* espace au-dessus, centrage */
  <!-- width: 150px; /* adapte à ta taille */ -->
  height: auto;
}



.categorie-titre {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: var(--nav-color);
  display: inline-block;
  position: relative;
  padding-bottom: 5px; /* Espacement pour le tiret */
}

.categorie-titre:hover {

  color :#129589;
}

.categorie-titre:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  <!-- height: 2px; /* Épaisseur du tiret */ -->
  background-color: #000; /* Couleur du tiret */
}


 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Menu principal */
  nav {
    <!-- background: #1e1e2f; -->
    padding: 1rem 2rem;
  }

  ul {
    list-style: none;
	padding:0;
	margin:0;
	color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) !important;

  }

  nav ul li {
    position: relative;
		cursor: pointer;
		    border-radius: 30px;
		
  }

  .dropbtn {
    color: #fff;
    text-decoration: none;
    padding: 0.75rem 1rem;
    display: block;
   /* background: #1e1e2f;  */
    border-radius: 6px;
    transition: background 0.3s;
  }

  .dropbtn:hover {
    <!-- background: #34344e; 
	
  }

  /* Sous-menus */
  nav ul li ul {
    position: absolute;
    top: 100%;
    left: 0;
    /* <!-- background: #2e2e42; --> */
    min-width: 180px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1000;
  }

  nav ul li:hover > ul {
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
    pointer-events: auto;
  }

  nav ul li ul li a {
    color: #fff;
    padding: 0.75rem 1rem;
    display: block;
    text-decoration: none;
  }

  nav ul li ul li a:hover {
    /* background: #444466; */
 color : #129589; 
  }

  /* Sous-sous-menu */
  nav ul li ul li ul {
    top: 0;
    left: 100%;
    transform: translateX(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
  }

  nav ul li ul li:hover > ul {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
	color :#129589;
  }
  
  
  
  /* Pour aligner les sous-catégories Éducation verticalement */
ul.vertical {
  display: block; /* Affiche chaque élément de la liste sur une nouvelle ligne */
  padding-left: 20px; /* Si tu veux un léger décalage pour les sous-catégories */
}

ul.vertical li {
  margin: 5px 0; /* Ajoute un peu d'espace entre les éléments de la liste */
}

  
  


  /* Responsive */
  @media (max-width: 768px) {
    .dropbtn {
      display: block;
      padding: 1rem;
    }

    nav ul li ul {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      background: #2e2e42;
      display: none;
    }

    nav ul li:hover > ul {
      display: block;
    }

    nav ul li ul li ul {
      position: static;
      transform: none;
      display: none;
    }

    nav ul li ul li:hover > ul {
      display: block;
    }
	
	
	
	
	  .navmenu ul li .sous-menu {
    display: none;
    flex-direction: column;
    padding-left: 1rem;
  }

  .navmenu ul li.open > .sous-menu {
    display: flex;
  }

  .submenu-toggle i {
    float: right;
    transition: transform 0.3s ease;
  }

  .navmenu ul li.open .submenu-toggle i {
    transform: rotate(180deg);
  }
}

	
	
  



/* Applique le même style à "Nos Compétences" */
.container.text-center.mb-4 p span.description-title {
 color: #129589;
  margin:
10px 0 0 0;
    margin-bottom: 0px;
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.container.text-center.mb-4 .section-title p .description-title {
  <!-- color: var(--accent-color); -->
  color: #129589;
   border-bottom: 2px solid #129589;  /* Ajoute une ligne horizontale sous le texte */
   z-index:2;
   
  
  }
  
  /* Appliquer la couleur à "Nos" */
.color-nos {
font-weight: bold;
    color: #333; /* Couleur de "Compétences" */
    font-size: 32px;
    letter-spacing: 1px;
	font-family: var(--heading-font);
}

  
  
hr {
  border: none;
  border-top: 2px solid #0F7270; /* Couleur et épaisseur de la ligne */
  width: 100%;               /* Largeur de la ligne (ajustable) */
  margin: 20px auto 0;      /* Espacement et centrage */
}




/* Par défaut (écran d'ordinateur), on affiche le menu de bureau */
#menu-desktop {
  display: block; /* Affiche le menu */

}

#menu-mobile {
  display: none;  /* Cache le menu mobile */
}



@media (max-width: 768px) {
  /* Cacher le menu desktop */
  #menu-desktop {
    display: none;
  }
  
  
       /* Style de la div conteneur pour centrer le contenu */
        .container007 {
         display: flex; /* ou block, selon ton besoin */
    flex-direction: column; /* si tu veux du contenu empilé */
    justify-content: flex-start;
    align-items: center; /* ou flex-start si tu veux aligné à gauche */
    padding: 20px;
    margin-top: 20px;
    width: 100%;
    height: auto; /* ✅ Adapte à la hauteur du contenu */
    max-width: 1200px; /* optionnel pour limiter la largeur */
    box-sizing: border-box;
        }

  
  
  
   .logo-albedo {
    display: none;
  }

  /* Afficher le menu mobil  */
  #menu-mobile {
position: relative;
  display: block;

  width: 70%;
  max-width: 80%;

  margin: 0 auto; /* ✅ Centre horizontalement */
  padding: 1rem;

  background-color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  line-height: 1.6;

  overflow-y: auto;
  max-height: 90vh;
	
  }
  
  
  
  
  
#menu-mobile dl {
  margin: 0;
}
  
  
  

  /* Style des dt */
  #menu-mobile dt {
    cursor: pointer;
    font-weight: bold;
    padding: 0.5rem;
    background-color: #e6e6e6;
    margin-top: 0.5rem;
    width: 100%; /* Ajusté à 100% pour que le dt occupe toute la largeur */
    text-align: center; /* Alignement du texte à gauche */
  }

  /* Style des dd (avec effet accordéon) */
  #menu-mobile dd {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin: 0;
    padding: 0 1rem;
    background-color: #fff;
  }

  #menu-mobile dd.open {
    max-height: 430px;
	padding:0;
	margin:0;
  }

  /* Style des liens */
  #menu-mobile a {
  text-align:center;
      text-decoration: none;
    color: #444;
    display: block;
    padding: 0.5rem 0;
    transition: color 0.3s ease, background-color 0.3s ease;
	padding-left: 10px;
  }
  }
  
  

  
  
  

  /* Survol des liens */
  #menu-mobile a:hover {
    color: #129589; /* Changer la couleur au survol */
  }

  /* Gestion des sous-menus imbriqués */
  #menu-mobile dd ul ul {
    padding-left: 1rem;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    background-color: #fff; /* Fond blanc pour les sous-menus */
  }

  /* Masquer les sous-menus au départ */
  .submenu {
    display: none;
    padding-left: 1rem;
    margin-top: 0.5rem;
  }

  .submenu.open {
    display: block;
  }

  /* Style des boutons pour afficher les sous-catégories */
  button.categorie-toggle {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    padding: 0.5rem;
    width: 100%; /* Prend toute la largeur */
    background-color: #f1f1f1; /* Couleur de fond du bouton */
    text-align: center; /* Aligner le texte à gauche */
    border-bottom: 1px solid #ddd; /* Ligne de séparation en bas */
  }

  /* Style de survol des boutons */
  button.categorie-toggle:hover {
    background-color: #e0e0e0; /* Survol d'un fond gris clair */
  }

  /* Nouveau style pour les liens dans les sous-catégories "Industrie" et "Énergie" */
  .submenu-link {
    color: #444444; /* Couleur des liens dans les sous-catégories */
  }

  /* Survol des liens dans les sous-catégories */
  .submenu-link:hover {
    color: #129589; /* Changer la couleur du lien au survol */
    text-decoration: none; /* Ajout d'un soulignement au survol */
  }

  /* Survol des éléments de la sous-liste */
  #menu-mobile dd ul ul li:hover {
	  color: #129589;
  text-decoration:none;
    background-color: #f1f1f1; /* Survol du fond dans les sous-menus */
  }

  /* Ajout d'un style pour les liens des sous-catégories dans les sous-menus imbriqués */
  #menu-mobile dd ul ul li a {
    color: #444444; /* Couleur par défaut des liens dans les sous-menus */
    padding: 0.5rem;
    display: block;

  }

  /* Survol des liens dans les sous-menus imbriqués */
  #menu-mobile dd ul ul li a:hover {
    color: #129589; /* Changer la couleur au survol */
    text-decoration: none; /* Souligner les liens au survol */
  }
  
  
  /* fallback : affichage des sous-menus au focus si JS désactivé */
li:focus-within .submenu,
button:focus + .submenu {
  display: block;
}
  
  
  
}

  
  .mobile-nav-toggle {
    display: none; /* Cache l'élément */
}



.scroll-top.second {
  bottom: 10px; /* 🔽 ici tu le descends de 10px de plus */
  right: 80px; /* pour qu'il soit à côté de l'autre */
}