@import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');
	
	.texte-h1 {
	    font-family: 'Exo 2', sans-serif;
	    font-size: 30px;
	    color: white;
	    text-shadow: 0px 0px 10px black;
	    font-weight: bold;
	}
	
	.texte-h2 {
	    font-family: 'Exo 2', sans-serif;
	    font-size: 20px;
	    color: white;
	    text-shadow: 0px 0px 10px black;
	}
	
	.search-container {
	    position: relative;
	    margin-left: auto; /* Centrer en mettant la marge gauche à auto */
	    margin-right: auto; /* Centrer en mettant la marge droite à auto */
	    max-width: 500px;
	    padding: 0px;
	}
	
	.search-container label {
	    font-family: 'Exo 2', sans-serif; /* Utilise la police Exo 2 */
	    font-size: 18px; /* Taille de police à 18px */
	    font-weight: bold; /* Rend le texte en gras */
	    color: #fff; /* Définit la couleur du texte en blanc */
	    text-shadow: 0px 0px 10px black;
	    text-align: left; /* Alignement du texte à droite */
	    display: block; /* Affiche le label comme un bloc pour qu'il occupe toute la largeur */
	    margin-bottom: 10px; /* Espace en dessous du label */
	}
	
	input[type="text"] {
	    width: 100%;
	    padding: 10px;
	    box-sizing: border-box;
	    font-family: 'Exo 2', sans-serif; /* Utilise la police Exo 2 */
	    font-size: 16px;
	    color: #333333;
	    font-weight: bold;
	    border-radius: 10px; /* Ajoute un border-radius de 10px */
	    border: 1px solid #333; /* Ajoute une bordure de 1px de couleur #333 */
	    box-shadow: 0 0 10px black; /* Ajoute une ombre floue noire de 10px */
	}
	
	button {
	    padding: 0px;
	}
	
	#results {
	   position: absolute;
	   left: 50%; /* Centre horizontalement */
	   transform: translateX(-50%); /* Décale de la moitié de sa propre largeur pour un centrage précis */
	   width: 500px;
	   border-radius: 10px;
	   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	   background-color: white;
	   max-height: 300px;
	   overflow-y: auto;
	   border: 0px solid #ddd;
	   border-top: none;
	   z-index: 10000;
	}
	
	@media (max-width: 767.98px) {
	    #results {
	        width: 100%;
	        left: 0; /* Réinitialise left pour les écrans plus petits */
	        transform: none; /* Réinitialise transform pour les écrans plus petits */
	    }
	}
	
	#results ul {
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}
	
	#results li a {
	    display: block;
	    padding: 10px;
	    text-decoration: none;
	    color: #333333; /* Définit la couleur du texte à #333333 */
	    border-bottom: 1px solid #ddd;
	    font-family: 'Exo 2', sans-serif; /* Utilise la police Exo 2 */
	    font-size: 16px; /* Applique la taille de la police */
	    font-weight: bold; /* Rend le texte en gras */
	}
	
	#results li a:hover {
	    background-color: #f7f7f7;
	}
	
	.texte-h3 {
	    font-family: 'Exo 2', sans-serif;
	    font-size: 25px;
	    color: #ffffff;
	    text-shadow: 0px 0px 5px #000000;
	}
	
	.texte-h4 {
	    font-family: 'Exo 2', sans-serif;
	    font-size: 18px;
	    color: #33cccc;
	    text-shadow: 0px 0px 5px #000000;
	}
	
	
	/* MENU TOP CONTAINER FIXE*/
	
	
	#menutop-container {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  position: static; /* ou vous pouvez simplement supprimer cette ligne */
	  top: 0;
	  left: 0;
	  width: 100%;
	  background: #FFF; /* Mettez la couleur de fond de votre choix */
	  z-index: 9999; /* Assurez-vous que le bandeau reste au-dessus des autres éléments */
	  box-shadow: 0 0px 4px rgba(0,0,0,0.1);
	}
	
	#menutop-container {
	 flex: 3; /* 3 parts sur 12 */
	}
	
	
	/* LOGO CONTAINER */
	
	
	#logo-container {
	  display: flex;
	  align-items: center;
	  font-size: 16px; /* Taille de la police */
	  font-family: 'Angkor', sans-serif; /* La police Angkor doit être chargée ou disponible localement */
	}
	
	#logo-text .text-primary {
	  color: #012940; /* Bleu foncé pour "Travaux-" */
	}
	
	#logo-text .text-secondary {
	  color: #fb9726; /* Orange pour "Comparateur.com" */
	}
	
	#logo-image {
	  width: 60px; /* ou la taille que vous souhaitez */
	  height: auto; /* cela conservera le ratio d'aspect de l'image */
	  margin: 10px; /* Espace entre le logo et le texte, ajustez selon vos besoins */
	}
	
	
	/* BOUTON PUBLIER UN PROJET INCLINE*/
	
	
	.bouton-devis {
	  font-family: 'Exo 2', sans-serif;
	  background-color: #33cccc; /* Couleur de fond du bouton */
	  border: none;
	  color: white; /* Couleur du texte */
	  padding: 10px 20px; /* Espacement interne */
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	  font-size: 14px; /* Taille du texte */
	  margin: 4px 2px;
	  border-radius: 5px;
	  cursor: pointer;
	  transition: background-color 0.3s; /* Animation de fond */
	  position: relative; /* Nécessaire pour positionner les pseudo-éléments */
	  transform: skewX(-20deg); /* Incline le bouton */
	}
	
	.bouton-devis:hover {
	  background-color: #398eae; /* Couleur de fond au survol */
	}
	
	/* Texte non incliné */
	.bouton-devis span {
	  display: block;
	  transform: skewX(20deg); /* Annule l'inclinaison pour le texte */
	}
	
	
	/* MENU SOULIGNE*/
	
	
	.menu-line {
	font-family: 'Exo 2', sans-serif;
	font-size: 14px;
	color: #398eae;
	margin-right: 30px;
	cursor: pointer;
	position: relative;
	}
	
	.menu-line:hover::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px; /* Ajuster la position verticale de l'underline */
	height: 0px; /* Épaisseur de l'underline */
	background: #398eae; /* Couleur de l'underline */
	animation: underlineAnimation 0.5s ease;
	}
	
	@keyframes underlineAnimation {
	0% {
	left: 0%;
	right: 100%;
	}
	100% {
	left: 0;
	right: 0;
	}
	}
	
	@media (max-width: 767.98px) {
	
	.menu-line {
	display: block; /* Les éléments s'afficheront sur des lignes séparées */
	margin-right: 0; /* Retirer la marge à droite sur les petits écrans */
	margin-bottom: 10px; /* Ajouter un peu d'espace en dessous de chaque élément */
	}
	
	}
	
	
	/* BOUTON MENU PROS*/
	
	
	.bouton-professionnel {
	    background-color: #398eae;
	    border: none;
	    display: flex;
	    align-items: center;
	    font-family: 'Exo 2', sans-serif;
	    cursor: pointer;
	    border-radius: 5px 5px 0px 0px;
	    width: 292px; /* Largeur totale du bouton */
	    height: 50px; /* Hauteur totale du bouton */
	    color: white;
	    overflow: hidden; /* Pour les bordures arrondies */
	    position: relative; /* Pour le positionnement du sous-menu */
	    text-decoration: none;
	}
	
	.bouton-professionnel .texte-gauche {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    flex-grow: 1;
	    padding-left: 20px; /* Ajustement pour aligner le texte à gauche */
	    text-decoration: none;
	}
	
	.bouton-professionnel .texte-gauche span {
	    align-self: flex-start;
	    text-decoration: none;
	}
	
	.bouton-professionnel .inscription {
	    display: flex;
	    align-items: center;
	    margin-right: 10px; /* Ajustement pour l'espacement avant l'image */
	    text-decoration: none;
	}
	
	.bouton-professionnel .inscription .icone-arrow {
	    color: #fb9726;
	    margin-right: 5px;
	    font-size: 14px; /* Taille de l'icône ajustée */
	    text-decoration: none;
	}
	
	.bouton-professionnel .inscription .texte-inscription {
	    font-weight: bold;
	    font-size: 14px; /* Taille du texte ajustée */
	    text-decoration: none;
	}
	
	.bouton-professionnel .image-droite {
	    background: url('https://www.travaux-comparateur.com/images/icon-pros.png') no-repeat center center;
	    background-size: cover;
	    width: 50px; /* Largeur de l'image */
	    height: 100%; /* Hauteur de l'image */
	    border-top-right-radius: 5px;
	    border-bottom-right-radius: 5px;
	}
	
	.bouton-professionnel:hover {
	    background-color: #012940;
	    text-decoration: none;
	}
	
	/* Styles pour le bouton ici... */
	
	.menu-conteneur {
	  position: relative; /* Le conteneur doit être positionné relativement pour le sous-menu absolu */
	  text-decoration: none;
	}
	
	.sous-menu {
	  display: none;
	  position: absolute;
	  top: 100%; /* Positionnez le sous-menu en dessous du bouton */
	  left: 0;
	  width: 292px;
	  background-color: #f8f8f8;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	}
	
	.sous-menu-item {
	  display: block;
	  color: #012940;
	  padding: 10px 20px;
	  text-decoration: none;
	  border-bottom: 1px solid white;
	  font-family: 'Exo 2', sans-serif;
	  font-size: 14px;
	  transition: background-color 0.3s, color 0.3s;
	}
	
	.sous-menu-item:last-child {
	  border-bottom: none;
	  text-decoration: none;
	}
	
	.sous-menu-item:hover {
	  background-color: #398eae;
	  color: white;
	  text-decoration: none;
	}
	
	.menu-conteneur:hover .sous-menu {
	  display: block; /* Affiche le sous-menu lorsque vous survolez le conteneur */
	}
	
	
	
	#menutop-container > a, #menutop-container > div:not(.a-logo) {
	  flex: 1; /* Chaque autre enfant prend 1 part de l'espace disponible */
	}
	
	
	/* Menu Mobile */
	
	.menu-personnalise {
	  display: flex;
	  justify-content: space-between;
	}
	
	.menu-link {
	  font-family: 'Exo 2', sans-serif;
	  font-size: 12px;
	  font-weight: bold;
	  color: white;
	  text-decoration: none;
	  padding: 5px;
	  flex-grow: 1;
	  text-align: center;
	  transition: color 0.3s;
	}
	
	.menu-link:hover, .menu-link:active, .menu-link:focus {
	  color: white;
	  text-decoration: none;
	}
	
	.link-color-1 { background-color: #fb9726; }  
	.link-color-2 { background-color: #398eae; }
	.link-color-3 { background-color: #33cccc; }
	.link-color-4 { background-color: #012940; }
	
	
	.conteneur-slide2 {
	    height: 200px;
	    width: 100%;
	    background-color: rgba(0, 0, 0, 0.0); /* Transparent */
	    position: relative;
	    overflow: hidden;
	    display: block; /* Pour rendre cliquable */
	    text-decoration: none; /* Enlever le soulignement par défaut des liens */
	    border-radius: 5px 5px 5px 5px;
	}
	
	.conteneur-slide2, .conteneur-slide2:hover, .conteneur-slide2:focus {
	    text-decoration: none; /* Enlever le soulignement */
	    /* Autres styles pour .conteneur-slide2 */
	}
	
	.fond-image {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-position: center;
	    transition: background 0.3s; /* Transition douce */
	}
	
	.fond-image::after {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: rgba(0, 0, 0, 0); /* Transparent initialement */
	    transition: background 0.1s; /* Transition douce */
	}
	
	.conteneur-slide2:hover .fond-image::after {
	    background: rgba(0, 0, 0, 0.2); /* Superposition semi-transparente noire */
	}
	
	.texte-fixe-haut {
	    position: relative;
	    top: 10%;
	    width: 70%;
	    background-color: rgba(51, 204, 204, 0.9); 
	    color: white;
	    font-size: 18px;
	    font-weight: bold;
	    font-family: 'Exo 2', sans-serif;
	    text-align: center;
	    padding: 10px 0;
	    margin: 0; /* Éliminer la marge par défaut des h2 */
	    text-decoration: none;