/* Style de base pour la navigation */
nav {
    background: #043154; /* Couleur de fond */
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

.nav-content {
    width: 90%;
    margin: 0 auto; /* Centrage */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espacement entre le logo et le menu */
}

nav img {
    height: 50px; /* Ajustez selon la taille de votre logo */
}

/* Style pour le menu */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Centrer les éléments du menu */
}

.menu li {
    padding: 0 20px; /* Espacement entre les éléments du menu */
}

.menu a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.menu a:hover {
    color: #e0e0e0; /* Changement de couleur au survol */
}

@media (max-width: 600px) {
    .nav-content {
        flex-direction: column;
    }

    .menu {
        flex-direction: column;
        text-align: center;
    }

    .menu li {
        padding: 10px 0;
    }
}

/* Style général pour les sections */
.content-section {
    display: flex;
    align-items: center;
    padding: 20px;
    margin: 20px 0;
}

.content-section .text {
    flex: 1;
    padding: 20px;
}

.content-section .image {
    flex: 1;
    text-align: center;
}

.content-section img {
    max-width: 100%;
    height: auto;
}

/* Alternance de l'image et du texte */
.right-image .text {
    order: 1;
}

.left-image .text {
    order: 2;
}

.right-image .image {
    order: 2;
}

.left-image .image {
    order: 1;
}

/* Responsive design */
@media (max-width: 768px) {
    .content-section {
        flex-direction: column;
    }
}