/* Styles globaux (appliqués à tous les écrans) */
:root {
    --green: #16645F;
}

body {
    font-family: 'Poppins', sans-serif; /* Exemple de font si utilisée */
    color: var(--green); /* Couleur du texte par défaut */
}

#nav-bar a {
    text-decoration: none;
    color: var(--green);
}

/* Styles avancés (appliqués uniquement aux écrans larges) */
@media (min-width: 768px) {
    #ui {
        display: flex;
    }

    #sticky-nav {
        position: sticky;
        align-self: flex-start; /* ça c'est juste car il est dans un flex, sinon ça sert pas */
        top: 0;
        left: 2rem;
        flex-shrink: 0;
    }

    #nav-bar {
        position: relative;
        width: 23rem;
    }

    .nav-item {
        font-size: 1.5rem;
        max-width: 26rem;
        position: relative;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .nav-item::before {
        content: "";
        background-color: white;
        border: solid 0.4rem var(--green);
        border-radius: 4rem;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 1.3rem;
        width: 1.3rem;
    }

    .nav-item.selected,
    .nav-item:hover {
        font-weight: bold;
    }

    .nav-item.selected::before,
    .nav-item:hover::before {
        background-color: var(--green);
    }

    #nav-bar .green-line {
        position: absolute;
        background-color: #16645F;
        top: 1rem;
        bottom: 1rem;
        left: 0.5rem;
        width: 0.2rem;
    }
}

/* Styles spécifiques pour petits écrans */
@media (max-width: 768px) {
    body {
        font-size: 1.2rem; /* Augmente légèrement la taille du texte */
         /* Rend le texte plus visible en gras */
    }

    #nav-bar a {
        font-size: 1.1rem; /* Taille ajustée pour les liens */
        
    }
}