/* Style de base */
body {
    font-family: Arial, sans-serif;	/* police par défaut de l'ordinateur 	*/
    background-color: #efefef; 		/* fond de page rosé, initial #f7f9fc	*/
    color: #922929; 				/*	rouge , initial #333; nuance de gris*/
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Centrer le contenu */
main {
    text-align: center;
}

/* Style du menu */
header nav {
    width: 100%;
}

header nav .menu-toggle {
    display: none;
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #f3ecec;				/*#fff;		 	fond d'écran du menu */
    border-bottom: 1px solid #ddd; 			/*				bordure en bas du menu : gris très clair*/
    justify-content: center;
}

header nav ul li {
    position: relative;
}

header nav ul li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #21518c;/*#333;*/
    transition: background-color 0.3s, color 0.3s;
}

header nav ul li a:hover {
    background-color: #ddd;
    color: #000;
}

/* Sous-menu */
header nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f3ecec; 			/* 			fff; fond d'écran des sous menus*/
    border: 1px solid #ddd;				/*			bordure en bas du sous-menu : gris très clair*/
    z-index: 1000;						/* 			permet de définir le plan d'affichage des éléments, selon l'axe Z. 
										/*			En d'autres termes, quels éléments passeront au dessus de quels autres éléments à l'affichage. 
										/*			Plus le z-index est élevé, plus l'élément "sera au premier plan".*/
}

header nav ul li ul li a {
    padding: 10px 20px;
}

header nav ul li:hover ul {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    header nav .menu-toggle {
        display: block;
        cursor: pointer;
        padding: 15px;
		        position: absolute; /* Position du burger à gauche */
                left: 10px; 		/* Position du burger à gauche */
    }

    header nav .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: #333; // Laisser en 333
        transition: all 0.3s ease;
    }

    header nav ul {
        flex-direction: column;
        display: none;
        width: 100%;
		position: absolute; /* Position du menu sous le burger */ 
		top: 50px; 			/* Position du menu sous le burger */ 
		left: 0;			/* Position du menu sous le burger */ 
    }

    header nav ul li {
        width: 100%;
    }

    header nav ul li ul {
        position: static;
        width: 100%;
    }

    header nav ul.active {
        display: flex;
    }

	.menu-toggle { 
		position: absolute; 
		top: 1px; /* Ajustez cette valeur selon vos besoins */ 
	}