/* Responsive */

@media (max-width: 412px) {

	header {
		background: url('../img/01.jpg') no-repeat fixed bottom;
	}

	header .title {
		font-size: 2rem;
		top: 12%;
	}

	nav {
		display: none;
	}

	#title {
		top: 22em;
	}

	.slide h1 {
		font-size: 1.5rem;
	}

/* Article */
	.article {
		margin: 0;
	}

	.article1 .content-right h1 {
		font-size: 1.8rem;
	}

	.article1 .content-right p {
		padding: 0px;
		font-size: 1.3rem;
		line-height: 1.2em;
		text-align: justify;
	}

	.slider-container {
		width: 1180px;
		height: 270px;
		margin: 120px auto 0px;
		border: 1px solid #FFFFF0;
	}

	.image-gallery-container {
		margin: 0px auto;
	}
}

@media (max-width: 768px) {
    /* Articles : Alignement en colonne */
	.article {
		flex-direction: column;
		align-items: center;
	}

	.content-left, .content-right, .content-photo, .content-text {
		width: 100%;
		padding: 10px;
	}

	.content-left img, .content-right img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

    /* Article 4 : Adaptation de la grille pour les petites tailles d'écran */
    .article4 .image-grid {
        grid-template-columns: 1fr; /* En version mobile, les images se placent en colonne */
    }

    /* Article 2 : Ajustement de l'image pour qu'elle occupe toute la largeur */
    .article2 .content-photo img {
        margin: 0 10px; /* Ajouter de la marge pour espacer les images des bords */
    }

    /* Texte dans tous les articles : Ajustement de la largeur et de la mise en page */
    .content-left, .content-right {
        width: 100%; /* Les sections s'adaptent en pleine largeur */
	padding: 0px;
}

    /* Pour les titres et les paragraphes */
.content-right h1, .content-text h1 {
	font-size: 22px;
 /* Réduire la taille du titre sur mobile */
	margin-bottom: 15px;
}

.content-right p, .content-text p {
	font-size: 16px;
 /* Réduire la taille de la police du texte */
	line-height: 1.5;
	margin-bottom: 15px;
}

    /* Article 1 et 3 : Adaptation de la mise en page pour les petites tailles */
.article1 .content-left, .article3 .content-left {
	flex: 1;
	padding: 0px;
}

.article1 .content-right, .article3 .content-right {
	flex: 1;
	padding: 0px;
}

.article1 .content-right p {
	font-size: 1.3rem;
	line-height: 1em;
}
}

@media (max-width: 915px) {

	header {
		height: 390px;
	}

	#title {
		position: absolute;
		top: 22em;
		left: 0;
		height: 2em;
		font-size: 1.8rem;
		text-align: center;
		padding: 0.5em 0;
		line-height: 1em;
		background: rgba(206, 120, 45, 0.9);
	}

	.slider-box {
		height: 390px;
		margin-top: 0em;
		padding-top: 0px;
		padding-bottom: 0em;
	}

/* Article */
	.article {
		margin: 0;
	}

	.article1 .content-right h1 {
		font-size: 1.8rem;
		margin-left: 0.3em;
	}

	.article1 .content-right p {
		font-size: 1.3rem;
		line-height: 1.2em;
		padding: 0 0.5em;
	}

	.article3 .content-left h1 {
		font-size: 1.8rem;
		margin-left: 0.3em;
	}

	.article3 .content-left p {
		font-size: 1.3rem;
		line-height: 1.2em;
		padding: 0 0.5em;
	}
}

/* Responsivité pour les résolutions inférieures à 1000px */
@media (max-width: 1000px) {
	.article4 .image-grid {
		grid-template-columns: 1fr;
	}
}

/* Responsivité pour les résolutions inférieures à 600px */
@media (max-width: 600px) {
	.article4 .content-left, 
    .article4 .content-right {
		padding: 5px;
	}

	.article4 .content-right h1 {
		font-size: 1.6rem;
	}

	.article4 .content-right p {
		font-size: 1.2rem;
	}
}


/* --------- Responsive --------- */

/* 915px et plus */
@media screen and (max-width: 915px) {
	.article5 {
		flex-direction: column;
 /* Empile tout en colonne */;
	}

	.article5 .content-left,
    .article5 .content-right {
		width: 100%;
	}

	.article5 .main-image {
		width: 100%;
		height: 400px;
 /* Ajustement de la hauteur de l'image */
    }

    .article5 h1 {
        font-size: 1.8rem;
    }

    .article5 .thumbnails {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .article5 .thumbnail {
        width: calc(33.333% - 3px);
    }
}

/* 600px */
@media screen and (max-width: 600px) {
    .article5 .main-image {
        height: 300px;
    }

    .article5 h1 {
        font-size: 1.6rem;
    }

    .article5 .thumbnail {
        width: calc(33.333% - 3px); /* Toujours 3 vignettes sur la même ligne */
    }
}

/* 412px */
@media screen and (max-width: 412px) {
    .article5 {

    margin: 0px;
    padding: 0px;

}
	
	.article5 .main-image {
        height: 250px;
    }

    .article5 h1 {
        font-size: 1.4rem;
    }
	.article5 p {
    font-size: 1.3rem;
    line-height: 1.2em;
    padding: 0 0.5em;

}

    .article5 .content-right {

		padding:0em;
    }
	
	.article5 .content-left {
        padding:0;
    }
	
    .article5 .thumbnail {
        width: calc(33.333% - 3px); /* Vignettes alignées en 3 sur une ligne */
    }

    .article5 .thumbnail img {
        width: 100%;
        height: auto;
    }
}


/* Responsivité pour le titre button */
@media (max-width: 1200px) {
    .button-title {
        font-size: 1.8rem; /* Réduire la taille du titre sur les écrans plus petits */
    }
}

@media (max-width: 900px) {
    .button-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 600px) {
    .button-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 400px) {
    .button-title {
        font-size: 1.2rem;
    }
}


/* Responsivité button pour les petits écrans */
@media (max-width: 1200px) {
    .button {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
}

@media (max-width: 900px) {
    .button {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .button {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

@media (max-width: 400px) {
    .button {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
}

/* Responsivité Footer*/
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
    }

    .footer-logo {
        margin-bottom: 15px;
    }

    .footer-info p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .footer-logo .logo {
        width: 80px; /* Réduire la taille du logo */
    }

    .footer-info p {
        font-size: 0.9rem;
    }
}