/* Styles de base */
:root {
    --primary-color-light: #339af0; /* Couleur primaire claire */
    --secondary-color: #e0f7fa; /* Couleur secondaire */
    --background-color: #f5f5f5; /* Couleur de fond */
    --text-color: #000000; /* Couleur du texte */
    --highlight-color: #dde2e6; /* Couleur de surlignage */
    --footer-bg-color: #000000; /* Couleur de fond du pied de page */
    --light-text-color: #ffffff; /* Couleur du texte clair */
    --dark-text-color: #000000; /* Couleur du texte sombre */
}

/* Typographie commune */
body {
    font-family: "Roboto", "Open Sans", sans-serif; /* Polices modernes et épurées */
    font-size: 16px; /* Taille de police par défaut */
    line-height: 1.6; /* Légèrement augmenté pour une meilleure lisibilité */
    margin: 0; /* Pas de marge */
    padding: 0; /* Pas de remplissage */
    display: flex; /* Affichage en flexbox */
    flex-direction: column; /* Direction de la flexbox en colonne */
    min-height: 100vh; /* Hauteur minimale de 100% de la vue */
}

/* Style pour le titre principal */
h1 {
    font-size: 2.5rem; /* Taille de police pour le titre principal */
    margin-bottom: 1.5rem; /* Marge inférieure */
    font-weight: 700; /* Gras pour un titre plus impactant */
}

/* Style pour le sous-titre */
h2 {
    font-size: 2rem; /* Taille de police pour le sous-titre */
    margin-bottom: 1.25rem; /* Marge inférieure */
    font-weight: 600; /* Semi-gras pour un sous-titre distinct */
}

/* Style pour le sous-sous-titre */
h3 {
    font-size: 1.75rem; /* Taille de police pour le sous-sous-titre */
    margin-bottom: 1rem; /* Marge inférieure */
    font-weight: 500; /* Moins gras pour un style plus léger */
}

/* Style pour le quatrième niveau de titre */
h4 {
    font-size: 1.5rem; /* Taille de police pour le quatrième niveau de titre */
    margin-bottom: 0.75rem; /* Marge inférieure */
    font-weight: 500; /* Poids de police normal */
}

/* Style pour les paragraphes */
p {
    font-size: 1rem; /* Taille de police pour les paragraphes */
    margin-bottom: 1rem; /* Marge inférieure */
}

/* Header et Navigation */
.navbar {
    padding: 0.5rem 1rem; /* Espacement intérieur pour la barre de navigation */
}

/* Style pour l'image de la marque dans la barre de navigation */
.navbar-brand img {
    max-width: 100px; /* Largeur maximale de l'image de la marque */
    height: auto; /* Hauteur automatique pour maintenir le ratio */
    border-radius: 5%; /* Arrondi complet pour l'image */
    transition: transform 0.3s ease; /* Transition pour l'effet de survol */
}

/* Effet de survol pour l'image de la marque */
.navbar-brand img:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}

/* Style pour les liens dans les éléments de navigation */
.nav-item a {
    color: rgba(255,255,255,.55); /* Couleur des liens dans les éléments de navigation */
    transition: color 0.3s ease; /* Transition pour l'effet de survol */
    font-size: 1.1rem; /* Taille de police pour les liens */
    padding: 0.5rem 1rem; /* Espacement intérieur pour les liens */
    text-transform: uppercase; /* Mettre en majuscules */
}

/* Couleur au survol ou pour les éléments actifs */
.nav-item a:hover, .nav-item .active:hover {
    color: #f3ebeb; /* Couleur au survol ou pour les éléments actifs */
    font-weight: bold;
}

.active {
    color: var(--primary-color-light) !important; /* Couleur au survol ou pour les éléments actifs */
    font-weight: bold;
}

/* Effet soulignement */
.nav-link {
    position: relative; /* Positionnement relatif pour le pseudo-élément ::after */
}

/* Style pour le pseudo-élément de soulignement */
.nav-link::after {
    content: ""; /* Contenu vide pour le pseudo-élément */
    position: absolute; /* Positionnement absolu pour le trait */
    left: 0; /* Positionnement à gauche */
    bottom: 0; /* Positionnement en bas */
    width: 0; /* Largeur initiale du trait */
    height: 2px; /* Hauteur du trait */
    background: #da0a0a; /* Couleur par défaut du trait */
    transition: width 0.3s ease, left 0.3s ease, background 0.3s ease; /* Transition pour les effets */
}

/* Effet de survol pour le pseudo-élément de soulignement */
.nav-link:hover::after {
    width: 100%; /* Largeur du trait au survol */
    left: 0; /* Positionnement à gauche */
    background: #339af0; /* Couleur du trait au survol */
}

/* Style pour le lien actif */
.nav-link.active::after {
    width: 100%; /* Largeur du trait pour le lien actif */
    left: 0; /* Positionnement à gauche */
    background: #f3f1f1; /* Couleur du trait pour le lien actif */
}

/* Media Queries */
@media (max-width: 992px) {
    /* Style pour la marque sur petits écrans */
    .navbar-brand {
        display: flex; /* Affichage en flexbox pour la marque */
        justify-content: center; /* Centre le contenu horizontalement */
        width: 768px; /* Largeur de la marque */
        margin-bottom: 1rem; /* Marge inférieure */
        margin-right: 5px; /* Marge à droite */
    }

    /* Style pour le bouton de navigation sur petits écrans */
    .navbar-toggler {
        margin: 0 auto; /* Marge automatique pour centrer */
        display: block; /* Affichage en bloc */
        justify-content: center; /* Centre le contenu */
    }

    /* Style pour la barre de navigation sur petits écrans */
    .navbar-collapse {
        text-align: center; /* Centre le texte dans la barre de navigation */
    }

    /* Style pour les éléments de navigation sur petits écrans */
    .navbar-nav {
        margin-top: 1rem; /* Marge supérieure pour les éléments de navigation */
    }

    /* Style pour les éléments de navigation */
    .nav-item {
        padding: 0.5rem 0; /* Espacement intérieur pour les éléments de navigation */
    }

    /* Style pour le titre principal sur petits écrans */
    h1 {
        font-size: 2rem; /* Taille de police pour le titre principal sur petits écrans */
    }

    /* Style pour le sous-titre sur petits écrans */
    h2 {
        font-size: 1.75rem; /* Taille de police pour le sous-titre sur petits écrans */
    }

    /* Style pour le sous-sous-titre sur petits écrans */
    h3 {
        font-size: 1.5rem; /* Taille de police pour le sous-sous-titre sur petits écrans */
    }
}

@media (max-width: 768px) {
    /* Style pour l'image de la marque sur très petits écrans */
    .navbar-brand img {
        max-width: 100px; /* Largeur maximale de l'image de la marque sur très petits écrans */
    }

    /* Style pour le titre principal sur très petits écrans */
    h1 {
        font-size: 1.75rem; /* Taille de police pour le titre principal sur très petits écrans */
    }

    /* Style pour le sous-titre sur très petits écrans */
    h2 {
        font-size: 1.5rem; /* Taille de police pour le sous-titre sur très petits écrans */
    }

    /* Style pour le sous-sous-titre sur très petits écrans */
    h3 {
        font-size: 1.25rem; /* Taille de police pour le sous-sous-titre sur très petits écrans */
    }

    /* Réduction de la largeur du trait pour les petits écrans */
    .nav-link:hover::after,
    .nav-link.active::after {
        width: 50%; /* Réduit la largeur du trait pour les petits écrans */
        left: 25%; /* Centre le trait sous le lien */
    }
}