@media screen and (max-width: 480px) {
    .caption {
        font-size: 0.9rem;
    }
}

.summary-module{
	Display:none;
}



/* Media Queries */
@media (max-width: 768px) {
.et-hero-tabs{
	max-height:100px;
	display:none;
}
.header-contact {

		padding-bottom:0px;

}
	.menu-container {
	    display: block; /* Caché par défaut */

    position: fixed;
    top: 1px;
    right: 0px;
    z-index: 509;
}
	/* corps */

  html, body {
    width: 100%;
    overflow-x: hidden; /* Empêche le défilement horizontal */
	box-sizing: border-box;
}

   
  
 










/* why-choose-section*/

  
  
  
.advantages h2 {
  text-align: left; /* Aligne le texte à droite */
  margin-bottom: 20px;
}

.advantages  {
  text-align: left; /* Aligne le texte à droite */
  margin-bottom: 20px;
  
}

.content-wrapperin {
  display: block;
  position:relative;
  padding:5px;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Applique une ombre portée */
padding-top:30%;
}
	
	
}






/* Media Queries */
@media (max-width: 480px) {

.et-hero-tabs-container {
font-size:0.7rem;


}




/* Partenaire */
.partenaires {
	padding-top:20%;
 padding-top:20%;
}

  .logo-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20vh; /* Adjust the height if necessary */
  overflow: hidden;
}

.logo-partenaire {
  position: absolute;
  width: auto; /* 20% of the viewport width */
  max-width: 100%;
  height:auto;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.logo-partenaire.active {
  opacity: 1;
}

/*  service*/

.services {
    display: flex;
    height: 20%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	background: linear-gradient(to bottom, #1E3A5F, #134571, #005792, #008bb5);
    text-align: center;
    position: relative;
    z-index: 10;
	margin-top:15%;
	
}

.accordion-container {
	
  width: 90%; /* Prend toute la largeur disponible */
  height:auto;
  margin: 20px auto; /* Centre le conteneur horizontalement avec une marge */
  padding: 20px; /* Ajoute un espacement intérieur */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Applique une ombre portée */
     z-index: 50; /* Doit être supérieur au conteneur de texte */
    background: linear-gradient(to right, #0a2540, #002f6c); /* Couleurs marines sobres et professionnelles pour une meilleure esthétique */
padding-top:20%;
}

/* Vehicule */

.slide img {
    max-width: 80%;
    max-height: 80%;
    width: auto; /* Maintenir les proportions */
    height: auto; /* Maintenir les proportions */
    margin: auto; /* Centrer l'image horizontalement */
    display: block;

}





	
}


/* Media Queries */
@media (max-width: 850px) {
	

	
.partenaires h3{
	font-size:1.6rem;
}


}

@media (max-width: 768px) {
    #accueil {
        height: auto; /* Permet d'ajuster automatiquement la hauteur selon le contenu */
        padding: 2rem 1rem; /* Ajoute des marges pour respirer */
		
    }

    .hero {
        flex-direction: column;
        justify-content: flex-start; /* Les éléments commencent en haut */
        padding: 1rem 0;
    }
}


@media (max-width: 768px) {
   .logo img {
	padding-top:2%;
    height:170px;
	width:300px;
				/* Ajusté pour une taille plus compacte */
    position: relative;
    opacity: 0; /* Initialement invisible */
    animation: fadeIn 2s ease forwards;
    margin-bottom: 1rem; /* Ajout d'espace sous le logo */
	padding-top:20px;
}
}


@media (max-width: 768px) {
    .avis img {
        max-width: 150px; /* Réduit encore la taille de l'image */
    }
	.hero-title {
    font-family: 'Playfair Display', cursive;
    font-size: 1,3rem; /* Taille adaptée pour l'accessibilité */
    color: black; /* Texte plus visible */
    white-space: nowrap;
    overflow: hidden;
    width: 0; /* Initialement masqué pour l'animation */
    animation: typing 2s steps(200, end) forwards; /* Animation plus rapide */
    margin-bottom: 1.5rem; /* Espace entre le titre et les autres éléments */
}

}





@media (max-width: 480px) {
    .logo img {
		padding-top:10%;
        width: 280px; /* Plus petit pour s'adapter aux petits écrans */
		height:170px;
   }
#search-container.sticky {
  position: fixed; /* Position sticky en haut de l'écran */
  top: 10%;
  left: auto;
  opacity:0.8;
  z-index: 500; /* Priorité d'affichage par rapport aux autres éléments */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Facultatif : ajoute une ombre pour le contraste */
}
    .hero-title {
        font-size: 1.2rem; /* Réduction pour les écrans extra petits */
        line-height: 1.4; /* Réduction de l'espacement vertical */
    }

    .avis img {
        max-width: 150px; /* Réduction supplémentaire */
    }

    #avis-client {
        font-size: 0.8rem; /* Texte plus petit */
    }

   
}



/* Styles pour les smartphones */
@media (max-width: 768px) {
    .why-choose-section {
        padding: 20px 10px; /* Réduit les marges pour économiser de l'espace */
        text-align: center;
    }

    .section-title {
        font-size: 1.8rem; /* Réduit la taille du titre */
        margin-bottom: 15px;
    }

    .intro-text {
        font-size: 1rem; /* Texte plus compact */
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .advantages-list {
        flex-direction: column; /* Affiche les éléments en colonne */
        gap: 15px; /* Espace réduit entre les cartes */
        align-items: center; /* Centre les cartes */
    }

    .advantage-item {
        flex: 1 1 100%; /* Prend toute la largeur disponible */
        max-width: 100%; /* Évite les débordements */
        padding: 15px; /* Réduit le padding interne */
        font-size: 0.9rem; /* Taille du texte réduite */
    }

    .advantage-item .icon {
        font-size: 1.5rem; /* Réduit la taille des icônes */
        margin-bottom: 8px;
    }

    .advantage-item h2 {
        font-size: 1.2rem; /* Taille réduite pour le sous-titre */
        margin-bottom: 8px;
    }

    .advantage-item p {
        font-size: 0.9rem; /* Texte plus petit */
        line-height: 1.4;
    }

    .image-container img {
        width: 100%; /* Adapte l'image à la largeur de l'écran */
        max-width: 100%; /* Assure qu'elle ne dépasse pas */
        height: auto; /* Garde les proportions */
    }
}

/* Pour les très petits écrans (moins de 480px) */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.5rem; /* Titre encore plus petit */
    }

    .intro-text {
        font-size: 0.9rem; /* Texte plus compact */
    }

    .advantage-item {
        padding: 10px; /* Réduit encore le padding */
        font-size: 0.8rem; /* Texte encore plus compact */
    }

    .advantage-item .icon {
        font-size: 1.2rem; /* Taille des icônes réduite */
    }

    .advantage-item h2 {
        font-size: 1rem; /* Sous-titres plus petits */
    }
}