body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
	line-height: 1.6;
}

 .navbar {
    display: flex;
	flex-direction: column;
    background-color: darkblue;
	padding: 10px 0;
 }
 .navbar-brand {
    display: flex;
    justify-content: center; 
 }

 .brand-logo {
	display:flex;
	flex-direction:row;
	color: white;
	text-decoration: none;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0px 0;
 }
  .logo {
	display: inline-block;
	flex-shrink:0;
	background:url('/static/images/logo.png');
    height: 84px;
    width: 84px;
 }
  .logo2 {
	display: inline-block;
	flex-shrink:0;
	background:url('/static/images/logo2.png');
    height: 84px;
    width: 84px;
 }
 .brand-main {
     display:flex;
	 flex-direction:column;
 }
 
 .brand {
	 color: white;
	text-decoration: none;
	font-size: 1.2em;
 }
 
 .brand_moto {
	 color: white;
	text-decoration: none;
	font-size: 0.7em;
	align-self: flex-end;
 }
.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.main-menu li {
    position: relative;
}

.main-menu li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 0px 20px;
    transition: background-color 0.3s ease;
}

.main-menu li a:hover {
    background-color: #575757;
}

.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #444;
    min-width: 180px;
    z-index: 1000;
    display: none; /* Masqué par défaut */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
    pointer-events: none;
}

.submenu li a {
    color: white;
    padding: 12px 20px;
    display: block;
    white-space: nowrap;
}

.submenu li a:hover {
    background-color: #666;
}

/* Affichage du sous-menu au survol */
.has-submenu:hover .submenu {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Bouton Burger (mobile) */
.burger-menu {
    display: none; /* Caché par défaut sur desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.burger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
}

/* Styles pour le bouton burger actif (pour l'animation) */
.burger-menu.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.burger-menu.active .bar:nth-child(2) {
    opacity: 0;
}
.burger-menu.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.content {
	    max-width: 1200px;
		width: 66%;
		margin: 20px auto;
		padding: 0px 10px 20px 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0.1);
		border-radius: 8px;
}
/* --- MEDIA QUERIES pour le responsive --- */

@media (max-width: 768px) { /* Appliqué quand la largeur de l'écran est de 768px ou moins */
    .navbar {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: flex-start; /* Aligne tout à gauche */
    }

    .navbar-brand {
        display:flex;
		flex-direction: row; /* Empile les éléments verticalement */
		width: 100%; /* Le logo prend toute la largeur */
        justify-content: space-between; /* Espacement entre logo et burger */
    }

    .burger-menu {
        display: block; /* Affiche le bouton burger */
    }

    .main-menu {
        flex-direction: column; /* Les éléments du menu s'empilent */
        width: 100%;
        display: none; /* Masqué par défaut sur mobile */
        max-height: 0; /* Pour l'animation de slide */
        overflow: hidden; /* Cache le contenu qui dépasse */
        transition: max-height 0.3s ease-out; /* Animation */
    }

    .main-menu.active {
        display: flex; /* Affiche le menu quand il est actif */
        max-height: 500px; /* Une valeur suffisamment grande pour dérouler */
    }

    .main-menu li {
        width: 100%;
        text-align: center; /* Centre le texte des éléments du menu */
        border-bottom: 1px solid #575757; /* Séparateur entre les items */
    }

    .main-menu li:last-child {
        border-bottom: none; /* Pas de bordure sur le dernier */
    }

    .main-menu li a {
        padding: 12px 0; /* Moins de padding vertical */
    }

    .submenu {
        position: static; /* Le sous-menu reste dans le flux du document */
        width: 100%;
        background-color: #555; /* Couleur légèrement différente pour le sous-menu */
        border-top: 1px solid #777;
        box-shadow: none; /* Pas d'ombre sur mobile */
        opacity: 1; /* Toujours visible si le parent est déroulé */
        transform: translateY(0); /* Pas de translation */
        pointer-events: auto; /* Toujours interactif */
    }

    /* Le sous-menu se comporte différemment sur mobile. Il est toujours visible si le parent est cliqué. */
    .has-submenu:hover .submenu {
        display: block; /* Maintient le sous-menu visible au survol/clic sur mobile */
    }
	.content {
	    max-width: 1200px;
		width: 100%;
		margin: 20px auto;
		padding: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0.1);
		border-radius: 8px;
	}

}