@charset "utf-8";
/* CSS Document */
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
		.slider {
			position: relative;
			max-width: auto;
			margin: auto;
			overflow: hidden;
			border: 2px solid #ddd;
		}
		
		.slides {
			display: flex;
			transition: transform 0.5s ease;
		}
		
		.slide {
			min-width: 100%;
			display: flex; /* Utiliser flexbox pour centrer le texte */
			justify-content: center; /* Centrer horizontalement */
			align-items: center; /* Centrer verticalement */
			position: relative;
			
		}
		
		.slide img {
			width: 100%;
			height: 400px; /* Hauteur fixe pour uniformiser */
			max-width:100%;
			/*object-fit: cover; /* Couvrir tout l'espace sans déformation */
			
		}
		
		.text {
			position: absolute;
			text-align: center; /* Centrer le texte */
			bottom: 20%; /* Ajustez selon vos besoins */
			left: 50%; /* Début de la position relative */
			transform: translateX(-50%); /* Centrer le texte horizontalement */
			color: white;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 20px;
			border-radius: 10px;
			
		}
		.text h1 {
			font-size: 70px; /* Augmentez la taille selon vos besoins */
			color:white;
			margin: 0;
		}
		.text button {
			background-color: #8BC34A; /* Couleur de fond */
			border: none;
			color: white;
			padding: 12px 24px; /* Ajustez le padding */
			border-radius: 25px; /* Coins arrondis */
			cursor: pointer;
			font-size: 16px;
			font-weight: bold; /* Texte en gras */
			transition: background-color 0.3s ease, transform 0.3s ease; /* Transition pour l'effet */
		}
		
		.text button:hover {
			background-color: #7CB342; /* Couleur de fond au survol */
			transform: scale(1.05); /* Légère augmentation de la taille */
		}
		.prev,
		.next {
			cursor: pointer;
			position: absolute;
			top: 50%;
			padding: 16px;
			color: white;
			font-weight: bold;
			font-size: 18px;
			background: rgba(0, 0, 0, 0.5);
			border: none;
			border-radius: 3px;
			transform: translateY(-50%);
			z-index: 10; /* S'assurer qu'elles sont au-dessus des images */
		}
		
		.prev {
			left: 10px; /* Position à gauche */
		}
		
		.next {
			right: 10px; /* Position à droite */
		}

/* about section*/

		.about-section {
            background-color: #dcdcdc; /*gris*/
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 30px;
            max-width: auto;
            margin: auto;
            display: flex;
            align-items: flex-start;
        }
        .about-section img {
            width: 40%;
            border-radius: 8px;
            margin-left: 20px;
        }
        .about-text {
            width: 60%;
        }
        .about-section h2 {
            color: #333;
            margin-bottom: 20px;
			text-transform: uppercase; /* Majuscules */
        }
        .about-section p {
            line-height: 1.6;
            color: #555;
            margin-bottom: 20px;
        }
        .features {
            display: flex;
            justify-content: space-around;
            /*margin-top: 20px;*/
            width: 100%;
        }
        .feature {
            background-color: #e2e2e2;
           /* border-radius: 8px;*/
            padding: 20px;
            width: 30%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .feature h3 {
            color: #333;
            margin-bottom: 10px;
			text-transform: uppercase; /* Majuscules */
            text-decoration: underline; /* Souligné */
        }
        .feature p {
            color: #555;
        }
/*distinction*/
		 .distinction-section {
            background-color: #fff; /* Fond blanc */
            border-radius: 8px;
            padding: 30px;
            margin-top: 30px;
            text-align: center;
        }
        .distinction-section h2 {
            color: #333;
            margin-bottom: 20px;
            text-transform: uppercase; /* Majuscules */
        }
        .distinction-images {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .distinction-images img {
            width: 30%; /* Ajuste la taille selon tes besoins */
            margin: 0 10px; /* Espacement entre les images */
            border-radius: 8px;
        }
        .banner {
            background-color: #ce4f1f;
            padding: 10px;
            border-radius: 8px;
            font-weight: bold;
            color: #333;
            display: inline-block;
        }
		
		/* Style du bouton Back to Top */
         #back-to-top {
            visibility: hidden; /* Masquer le bouton par défaut */
            position: fixed;
            bottom: 100px;
            right: 20px;
            background-color: #263485; /* Couleur de fond */
            color: #fbd935; /* Couleur de la flèche */
            border: none;
            border-radius: 50%; /* Rendre le bouton rond */
            width: 50px; /* Largeur du bouton */
            height: 50px; /* Hauteur du bouton */
            cursor: pointer;
            display: flex; /* Centrer le texte */
            align-items: center; /* Centrer verticalement */
            justify-content: center; /* Centrer horizontalement */
            font-size: 24px; /* Taille de la police */
        }


        .back-to-top:hover {
            background-color: #0056b3;
        }
		
		
/*responsive*/
		/*texte slide*/
		@media (max-width: 768px) {
			.text h1 {
				font-size: 45px; /* Taille pour les écrans plus petits */
			}
		}
		
		@media (max-width: 480px) {
			.text h1 {
				font-size: 23px; /* Taille pour les petits écrans */
			}
		}
		/*image section about*/
		/* Ajustement pour les écrans de 480px ou moins */
		@media (max-width: 480px) {
			.about-section img {
				width: 60%; /* Augmentez la largeur de l'image */
				margin-left: 0; /* Ajustez la marge si nécessaire */
			}
		}
		/*qualite*/
		  @media (max-width: 768px) {
					.feature {
						width: 45%; /* Ajuste la largeur pour les écrans moyens */
					}
				}
				
		/* Styles pour les petits écrans */
		@media (max-width: 480px) {
			.features {
				flex-direction: column; /* Affichage vertical pour les petits écrans */
				align-items: stretch; /* Étirer les éléments pour remplir la largeur */
			}
			.feature {
				width: 90%; /* Une seule colonne pour les petits écrans */
				margin: 10px 0; /* Espace vertical entre les fonctionnalités */
				padding: 20px; /* Gardez le padding pour un bon espacement */
				
			}
		}	     
</style>