body {
            font-family: 'Helvetica', Arial, sans-serif;
            margin: 0;
            background-color: #f4f7f6;
            color: #333;
        }

        .container {
            max-width: 900px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
        }

        .carousel-container {
            position: relative;
			width: 100%;       /* Il prend toute la largeur disponible (max 900px) */
			max-width: 900px;  /* Votre largeur d'image */
			height: 250px;     /* Votre hauteur d'image */
			margin: 0 auto;    /* Centre le carrousel si l'écran est plus large */
			overflow: hidden;
			border-radius: 8px;
			box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* Caché par défaut */
            animation: fonduEnchaine 16s ease-in-out infinite;
        }

        .slide img {
            width: 900px;      /* Largeur exacte */
			height: 250px;     /* Hauteur exacte */
			object-fit: cover; /* Si l'image est un peu différente, elle sera recadrée proprement sans être déformée */
        }

        .commentaire {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(60, 60, 60, 0.7); 
			/* padding: 15px 25px; */
			color: #ffffff; 
			backdrop-filter: blur(4px);
			border-left: 6px solid #5d9cec;
			
			/* On applique une animation différente pour le texte */
			animation: apparitionTexte 16s ease-in-out infinite;
        }
		.commentaire strong {
			color: #ffffff;
			display: block;
			margin-bottom: 5px;
			font-size: 1.1rem;
		}

		/*slide:nth-child(1), .slide:nth-child(1) .commentaire { animation-delay: 0s; }
		.slide:nth-child(2), .slide:nth-child(2) .commentaire { animation-delay: 4s; }
		.slide:nth-child(3), .slide:nth-child(3) .commentaire { animation-delay: 8s; }
		.slide:nth-child(4), .slide:nth-child(4) .commentaire { animation-delay: 12s; }
		
		/* --- Pour 3 images --- */
		.carousel-container.n-3 .slide { animation-duration: 12s; }
		.carousel-container.n-3 .commentaire { animation-duration: 12s; }
		.carousel-container.n-3 .slide:nth-child(2), .carousel-container.n-3 .slide:nth-child(2) .commentaire { animation-delay: 4s; }
		.carousel-container.n-3 .slide:nth-child(3), .carousel-container.n-3 .slide:nth-child(3) .commentaire { animation-delay: 8s; }

		/* --- Pour 4 images --- */
		.carousel-container.n-4 .slide { animation-duration: 16s; }
		.carousel-container.n-4 .commentaire { animation-duration: 16s; }
		.carousel-container.n-4 .slide:nth-child(2), .carousel-container.n-4 .slide:nth-child(2) .commentaire { animation-delay: 4s; }
		.carousel-container.n-4 .slide:nth-child(3), .carousel-container.n-4 .slide:nth-child(3) .commentaire { animation-delay: 8s; }
		.carousel-container.n-4 .slide:nth-child(4), .carousel-container.n-4 .slide:nth-child(4) .commentaire { animation-delay: 12s; }

		/* --- Pour 5 images --- */
		.carousel-container.n-5 .slide { animation-duration: 20s; }
		.carousel-container.n-5 .commentaire { animation-duration: 20s; }
		.carousel-container.n-5 .slide:nth-child(2), .carousel-container.n-5 .slide:nth-child(2) .commentaire { animation-delay: 4s; }
		.carousel-container.n-5 .slide:nth-child(3), .carousel-container.n-5 .slide:nth-child(3) .commentaire { animation-delay: 8s; }
		.carousel-container.n-5 .slide:nth-child(4), .carousel-container.n-5 .slide:nth-child(4) .commentaire { animation-delay: 12s; }
		.carousel-container.n-5 .slide:nth-child(5), .carousel-container.n-5 .slide:nth-child(5) .commentaire { animation-delay: 16s; }
		
		

        @keyframes fonduEnchaine {
			0%   { opacity: 0; }
			10%  { opacity: 1; }  /* L'image met 0.8s à apparaître */
			30%  { opacity: 1; }  /* Elle reste fixe jusqu'à la 4ème seconde (25% de 16s) */
			40%  { opacity: 0; }  /* Elle s'efface doucement */
			100% { opacity: 0; }  /* Reste invisible pendant que les 3 autres défilent */
		}
		
		@keyframes apparitionTexte {
			0%   { opacity: 0; transform: translateY(20px); } /* En bas et invisible */
			7%   { opacity: 0; transform: translateY(20px); } /* Attend que l'image commence à être là */
			12%  { opacity: 1; transform: translateY(0); }    /* Surgit doucement */
			25%  { opacity: 1; transform: translateY(0); }    /* Reste fixe */
			30%  { opacity: 0; transform: translateY(-10px); } /* Disparaît vers le haut */
			100% { opacity: 0; }
		}
		
		@media (max-width: 600px) {
		.carousel-container {
			height: 300px; /* On réduit la hauteur sur mobile */
		}
		.commentaire {
			font-size: 0.9rem;
			padding: 10px;
		}
	}