/* Styles CSS généraux */
body {
    font-family: 'Traditional Arabic', Arial, Tahoma, sans-serif;
    font-size: 1.3em;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    line-height: 1.6;
}

.site-name {
    font-size: 2.8em; /* Taille de police grande pour un effet majestueux */
    color: #ffbf00; /* Couleur d'or */
    text-align: center;
    margin: 20px 0;
    text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.5); /* Ombre claire */
    letter-spacing: 2px; /* Espacement des lettres */
    font-weight: bold; /* Pour renforcer l'effet majestueux */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Transition pour l'interactivité */
}

/* Adaptation pour les petits écrans */
@media screen and (max-width: 768px) {
    .site-name {
        font-size: 2.5rem; /* Taille ajustée pour les petits écrans, plus grande que 2rem */
    }
}

/* Effet de survol pour l'interactivité */
.site-name:hover {
    color: #beac76; /* Couleur dorée plus foncée au survol */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); /* Ombre plus marquée au survol */
}



.titre-header {
    font-size: 2.2em;
    color: #beac76;
    text-align: center;
    margin: 20px 0;
    text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
}

.titre-adaptatif {
    font-size: clamp(0.75rem, 2.5vw, 1.5rem);
}

/* Styles CSS pour l'en-tête */
header {
    background-color: #222;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Styles CSS pour la navigation */
header nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

header nav ul li {
    display: inline-block; /* Alignement horizontal par défaut */
    margin-right: 20px;
}

header nav ul li a {
    color: #fff; /* Texte blanc */
    text-decoration: none;
    font-size: 1em;
}

/* Styles CSS pour les boutons de navigation */
header nav ul li .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffbf00; /* Couleur d'or */
    color: #222;
    text-decoration: none;
    border: 2px solid #ffbf00; /* Bordure assortie */
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Styles CSS pour les liens dans le contenu principal */
main a {
    color: #000080; /* Couleur bleu marine pour les liens normaux */
    text-decoration: underline;
}

main a:hover {
    color: #e6a300; /* Couleur d'or au survol */
}

/* Styles CSS pour le pied de page */
footer {
    background-color: #222;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Menu hamburger (caché par défaut) */
.hamburger-menu {
    display: none;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
    padding: 10px;
}

/* Réglage de la taille des titres pour petits écrans *//* Styles pour la réactivité (petits écrans) */
@media screen and (max-width: 768px) {
    /* Afficher le menu hamburger */
    .hamburger-menu {
        display: block;
        font-size: 28px;
        margin-bottom: 10px;
        cursor: pointer;
        text-align: center;
        color: #ffbf00; /* Couleur dorée pour le bouton */
    }

    /* Masquer les liens de navigation par défaut */
    #nav-links {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: #222; /* Fond sombre discret */
        text-align: center;
    }

    /* Liens de navigation verticaux et moins encombrants */
    #nav-links li {
        margin: 5px 0; /* Moins d'espace entre les éléments */
    }

    /* Style des liens : plus petits et plus simples */
    #nav-links li a {
        font-size: 1.1em; /* Réduction de la taille des liens */
        padding: 10px; /* Moins de padding */
        color: #ffbf00; /* Texte doré pour élégance */
        background-color: #333; /* Fond discret */
        text-decoration: none;
        border-radius: 3px; /* Bordures légèrement arrondies */
        display: block;
    }

    #nav-links li a:hover {
        background-color: #ffbf00; /* Fond doré au survol */
        color: #222; /* Texte sombre */
        transition: background-color 0.3s ease;
    }

    /* Transition pour un effet doux quand le menu s'affiche */
    #nav-links.show {
        display: block;
    }
}


/* Styles CSS pour le bouton actif */
header nav ul li.active .btn {
    background-color: #222;
    color: #ffbf00;
    border: 2px solid #ffbf00;
}

/* Styles CSS pour le contenu contextuel du bouton actif */
header nav .glossary-content {
    background-color: #222;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}