.hero {
	background-image: url(/images/index/bureau.png);
	background-size: 170%;
	background-position: center;
    padding: 7%;
	display: flex;
	flex-direction: column;
    justify-content: flex-start; /* Centre les éléments horizontalement */
	align-content: flex-start;
}


.news {
	background-color: #bdc1d2;
	text-align: center;
    padding: 7%;
	display: flex;
	flex-direction: column;
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center;  
}

.presentation {
	background-image: url(/images/Global/fond.png);
	background-size: cover;
	background-repeat: repeat;
	background-position: center;
    padding: 5%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
}

.presentation-img {
	width: 90%; /* Assurez-vous que l'image utilise toute la largeur disponible dans son div parent */
	max-width: 300px; /* Limite la taille de l'image si nécessaire */
	height: auto; /* Pour maintenir le ratio de l'image */
}

.presentation-flex {
	flex: 1; /* Chaque div prend une part égale de l'espace disponible */
	min-width: 300px; /* Minimum width to prevent elements from shrinking too much */
	padding: 10px; /* Espacement autour des éléments pour l'esthétique */
	box-sizing: border-box; /* Assurez-vous que le padding est inclus dans la taille totale */
	text-align: justify;
	display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments horizontalement */
    justify-content: center; /* Centre les éléments verticalement */
}

.pratiques {
    background-color: #f6f6f9;
	border-top: 1px solid #d7dae4;
	border-bottom: 1px solid #d7dae4;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 5px;
	height: auto;
}

.pratiques-box {
	background-color:#d7dae4;
	box-shadow: 0 0 1px 0 rgba(0,12,32,0.04), 0 10px 16px 0 rgba(10,31,68,0.06);
	border-radius: 20px;
	padding: 20px 30px;
	height:100%;
	flex: 1; /* Chaque div prend une part égale de l'espace disponible */
	min-width: 300px; /* Minimum width to prevent elements from shrinking too much */
	box-sizing: border-box; /* Assurez-vous que le padding est inclus dans la taille totale */
	text-align: center;
	margin: 5%;
	height: auto;
	display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments horizontalement */
    justify-content: center; /* Centre les éléments verticalement */
}

.questions {
	background-image: url(/images/Global/fondfaq.png);
	background-size: 150%;
	background-repeat: repeat;
	background-position: center;
    text-align: center;
    align-items: center;
    padding: 5%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	width: auto;
}

.questions-box {
	flex: 1; /* Chaque div prend une part égale de l'espace disponible */
	min-width: 300px; /* Minimum width to prevent elements from shrinking too much */
	padding: 5px; /* Espacement autour des éléments pour l'esthétique */
	box-sizing: border-box; /* Assurez-vous que le padding est inclus dans la taille totale */
	text-align: center;
	height: auto;
	display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments horizontalement */
    justify-content: center; /* Centre les éléments verticalement */
}


/* ==============================================
   Media Queries 
===============================================*/

/* Media query pour les tablettes et plus larges */
@media (min-width: 768px) {
    .hero {
        background-size: cover; /* Ajuste la taille de l'image de fond */
        padding: 10%;
    }

    .presentation {
        flex-direction: row; /* Affichage en ligne pour desktop */
        justify-content: space-between; /* Espace entre les éléments */
        padding: 5% 5%; /* Plus de padding pour l'espacement */
    }

    .presentation-img {
        width: 100%; /* Largeur ajustée pour desktop */
    }

    .presentation-flex {
        flex: 1; /* Laisse chaque flex utiliser l'espace également */
        padding: 15px; /* Plus de padding pour un espacement accru */
    }

    .pratiques {
        flex-direction: row; /* Affichage en ligne pour desktop */
        gap: 5px; /* Espace entre les pratiques */  
		align-items: stretch; /* Assure que les boxes prennent toute la largeur */
        height: auto; /* Peut être ajusté selon le besoin */
		display: flex;
    }

    .pratiques-box {
        flex: 1; /* Utilisation égale de l'espace */
        margin: 2%; /* Espacement autour des box */
        padding: 30px; /* Plus de padding pour desktop */
		height: auto;
    }

    .questions {
        flex-direction: column; /* Aligne les questions horizontalement */
        justify-content: center; /* Centre les éléments horizontalement */
        padding: 5% 10%; /* Espacement accru */
    }

    .questions-box {
        padding: 0px; /* Plus de padding pour un espacement accru */
        width: 100%; /* Largeur fixe pour les questions */
    }
}

/* Media query pour les ordinateurs et plus larges */
@media (min-width: 1024px) {
    .hero {
        background-size: cover; /* Ajuste la taille de l'image de fond */
        padding: 5%;
		padding-left: 10%;
    }

	.news {
		padding: 4%;
	}

    .presentation {
        flex-direction: row; /* Affichage en ligne pour desktop */
        justify-content: space-between; /* Espace entre les éléments */
        padding: 2% 2%; /* Plus de padding pour l'espacement */
		padding-right: 5%;
    }

    .pratiques {
        flex-direction: row; /* Affichage en ligne pour desktop */
        gap: 5px; /* Espace entre les pratiques */  
		align-items: stretch; /* Assure que les boxes prennent toute la largeur */
        height: auto; /* Peut être ajusté selon le besoin */
		display: flex;
    }

    .pratiques-box h5{
        font-size: 40px;
    }

	.questions {
        padding: 2%;
		background-size: 90%;
    }
}