body {
    margin: 0;
    font-family: 'Times New Roman', Times, serif; /* Utilisation de Times New Roman */
    background-color: #1c1c1c;
    color: #ffffff;
    background-image: url('../images/fond.jpg');
    background-size: cover;
    background-attachment: fixed;
    line-height: 1.6; /* Améliore la lisibilité */
	-webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
	background-color: rgba(0, 0, 0, 1);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Ombre pour effet 3D */
}

.logo {
    width: 200px;
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.5)); /* Ombre normale */
    transition: filter 0.3s ease-in-out; /* Transition douce pour l'effet de survol */
}

.logo:hover {
    filter: drop-shadow(0px 0px 15px rgba(255, 255, 0, 0.7)); /* Lueur jaune lors du survol */
}

.slogan {
    font-size: 1.2em;
    color: #f5a623;
    margin-top: 5px;
    text-align: center;
    font-weight: bold; /* Gras pour accentuer */
}

.container {
    max-width: 100%; /* Empêche les conteneurs de dépasser 100% de la largeur */
    margin: 0 auto; /* Centre le conteneur */
    padding: 0 20px; /* Ajoute un padding pour éviter que le contenu touche les bords */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

/* Styles pour le menu */
nav ul {
    list-style: none; /* Supprime les puces des listes */
    margin: 0; /* Supprime la marge par défaut */
    padding: 0; /* Supprime le padding par défaut */
    display: flex; /* Les éléments du menu sont affichés sur une seule ligne */
    justify-content: space-around; /* Espace les éléments uniformément */
    background-color: rgba(0, 0, 0, 0.9); /* Fond noir transparent */
    position: sticky; /* Fixe le menu en haut quand on scroll */
    top: 0; /* Le menu est collé en haut de la page */
    z-index: 1000; /* Assure que le menu est au-dessus des autres éléments */
}

/* Liens du menu */
nav ul li {
    margin-left: 20px; /* Espace entre chaque élément de la liste */
}

nav ul li a {
    color: #f5a623; /* Couleur du texte (orange) */
    text-decoration: none; /* Supprime le soulignement des liens */
    font-size: 1.2em; /* Taille de la police des liens */
    padding: 10px 15px; /* Ajoute un espacement interne aux liens */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animation douce lors du survol */
}

nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Fond transparent au survol */
    transform: translateY(-2px); /* Lien légèrement décalé vers le haut au survol */
}

/* Styles pour le menu burger */
.menu-toggle {
    display: none; /* L'icône burger est cachée par défaut sur les grands écrans */
    cursor: pointer; /* Change le curseur de la souris en main */
    position: absolute; /* Positionne l'icône de manière absolue */
    top: 40px; /* Distance entre l'icône et le haut de la page */
    right: 20px; /* Distance entre l'icône et le bord droit */
    z-index: 1001; /* Assure que l'icône burger est au-dessus des autres éléments */
}

.menu-toggle span {
    display: block; /* Affiche chaque barre du burger en bloc */
    width: 30px; /* Largeur de chaque barre du burger */
    height: 3px; /* Hauteur de chaque barre du burger */
    margin: 5px auto; /* Espace entre chaque barre */
    background-color: #f5a623; /* Couleur des barres du burger */
}

/* Affichage du menu burger sur les écrans de moins de 1200px */
@media (max-width: 1200px) {
    .menu-toggle {
        display: block; /* Affiche l'icône burger en dessous de 1200px */
    }

    nav ul {
        display: none; /* Cache le menu par défaut sur les petits écrans */
        flex-direction: column; /* Le menu devient vertical */
		width: 200px; /* Largeur fixe du menu déroulant */
        background-color: rgba(0, 0, 0, 1); /* Fond noir transparent */
        position: absolute; /* Le menu est positionné en fonction de l'icône */
        top: 90px; /* Distance entre le menu et le haut de la page */
        right: 0; /* Menu étendu à gauche */
    }

    nav ul.active {
        display: flex; /* Affiche le menu quand il est actif (icône burger cliquée) */
    }

    nav ul li {
        margin: 0; /* Pas d'espace entre les éléments du menu */
        width: 100%; /* Chaque élément prend toute la largeur */
    }

    nav ul li a {
        text-align: center; /* Le texte est centré */
        padding: 15px 20px; /* Espacement interne plus grand pour les liens */
		line-height: 3; /* Contrôle l'espacement entre les lignes */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Séparation entre les éléments */
    }
}

#hero {
    text-align: center;
    padding: 120px 20px; /* Augmente un peu le padding pour plus d'espace */
    background-color: rgba(0, 0, 0, 0.7); /* Légèrement plus opaque pour le contraste */
    max-width: 1200px; /* Set a max-width for the content */
    margin: 20px auto 20px auto; /* Center the section and add bottom margin */
    color: #f5a623; /* Uniformise la couleur du texte */
}

#hero h1 {
    font-size: 4em;
    margin: 0;
    color: #f5a623;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Ajoute une ombre pour du relief */
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 3em;
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: 2.2em;
  }
}


#hero p {
    font-size: 1.5em;
    margin-top: 10px;
}

section {
    clear: both; /* Assure qu'aucun flottant ne chevauche cette section */
    padding: 50px 20px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
	max-width: 1200px; /* Set a max-width for the content */
    margin: 0 auto 0 auto; /* Center the section and add bottom margin */
}

footer {
    text-align: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 1);
    color: #f5a623;
    font-size: 1em;
    border-top: 1px solid #f5a623;
}

footer p {
    margin: 5px 0;
    font-size: 0.9em;
    color: #ffffff;
}

footer a {
    color: #f5a623;
    text-decoration: none;
    margin: 0 10px;
}

footer a:hover {
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
    color: #e5941f; /* Couleur jaune foncé au survol */
}

.logo2 {
    max-width: 70%;   /* L'image ne dépassera jamais la largeur de son conteneur */
    height: auto;      /* Conserve les proportions de l’image */
	filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.7)); /* Ombre qui suit le contour du logo */
	transition: filter 0.3s ease-in-out; /* Transition douce pour l'effet de survol */
}

.logo2:hover {
    filter: drop-shadow(0px 0px 15px rgba(255, 255, 0, 0.7)); /* Lueur jaune lors du survol */
}

.container {
    max-width: 100%; /* Empêche les conteneurs de dépasser 100% de la largeur */
    margin: 0 auto; /* Centre le conteneur */
    padding: 0 20px; /* Ajoute un padding pour éviter que le contenu touche les bords */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

h2 {
    font-size: 2em;
    color: #f5a623;
    text-align: center;
    margin-bottom: 20px;
}

section ul {
    padding-left: 20px;
}

section ul li {
    margin-bottom: 10px;
}

a.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f5a623;
    color: #1c1c1c;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

a.btn:hover {
    background-color: #ffaa33;
    transform: translateY(-2px);
}

blockquote {
    font-size: 1.5em;
    font-style: italic;
    color: #f5a623;
    text-align: center;
    margin: 40px 0;
    padding: 20px;
    background-color: rgba(0, 0, 0, 1);
    border-left: 5px solid #f5a623;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Ajout de styles pour améliorer l'apparence des sections spécifiques */

#presentation, #accès-rapides, #vedette, #nouveautés, #explorer, #communauté, #citation {
    margin-bottom: 20px;
    text-align: center;
}

#presentation p, #accès-rapides ul, #vedette p, #nouveautés p, #explorer p, #communauté p, #citation blockquote {
    max-width: 800px;
    margin: 0 auto;
}

#accès-rapides ul {
    list-style: none; /* ✅ enlève les points */
    padding: 0 20px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* ✅ centre les liens */
    gap: 20px;
    max-width: 100%;
    box-sizing: border-box;
}

#accès-rapides ul li {
    flex: 0 1 auto;
    min-width: 150px;
    max-width: 220px;
	list-style: none; /* ✅ double sécurité pour supprimer les points */
}

#accès-rapides ul li a {
    display: block;
    background-color: #252732;
    color: #f5a623;
    padding: 15px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    text-decoration: none;
    min-width: 180px;
    max-width: 250px;
    word-break: break-word;
    box-sizing: border-box;
}

#accès-rapides ul li a:hover {
    background-color: #f5a623;
    color: #1c1c1c;
}

/* Styles pour les liens dans la section Nouveautés */
#nouveautés p a {
    color: #f5a623; /* Couleur du texte des liens */
    text-decoration: underline; /* Soulignement pour indiquer un lien */
    font-weight: bold; /* Met le lien en gras pour le mettre en valeur */
    transition: color 0.3s ease, text-decoration-color 0.3s ease; /* Transition douce */
}

#nouveautés p a:hover {
    color: #ffaa33; /* Couleur du texte au survol */
    text-decoration-color: #ffaa33; /* Change la couleur du soulignement au survol */
}

/* Styles pour les liens dans la section En vedette */
#vedette p a {
    color: #f5a623; /* Couleur du texte des liens */
    text-decoration: none; /* Pas de soulignement par défaut */
    background-color: rgba(0, 0, 0, 0.7); /* Couleur de fond sombre autour du lien */
    padding: 5px 10px; /* Ajoute un peu de padding pour un effet de bouton */
    border-radius: 5px; /* Coins arrondis pour l'effet bouton */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transition douce */
    display: inline-block; /* S'assure que le lien est visible comme un bouton */
}

#vedette p a:hover {
    background-color: #f5a623; /* Couleur de fond au survol */
    color: #1c1c1c; /* Couleur du texte au survol */
}

img {
    -webkit-user-drag: none; /* Safari */
    -khtml-user-drag: none; /* Konqueror HTML */
    -moz-user-drag: none; /* Firefox */
    -o-user-drag: none; /* Opera */
    user-drag: none; /* Non standard */
}

/* Individual histoire card styling */
.histoire {
    background-color: rgba(0, 0, 0, 1);
    padding: 20px;
    border-radius: 10px;
    width: 90%; /* Rendre l'article plus étroit par rapport à son conteneur */
    max-width: 1120px; /* Largeur maximale pour l'article */
    margin: 20px auto; /* Centre l'article */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5); /* Ombre pour effet 3D */
}

/* Image styling for histoires */
.histoire img {
    width: 70%; /* Ajuste à 70% de la largeur de l'article */
    border-radius: 10px; /* Coins arrondis pour l'image */
    margin: 15px auto; /* Centre l'image horizontalement */
    display: block; /* Permet au margin auto de fonctionner pour le centrage */
    border: 2px solid #f5a623; /* Cadre */
}

/* Styling for the title of the article */
.histoire h3 {
    color: #f5a623;
    margin-bottom: 10px;
    text-align: center;
}

/* Style global pour tous les liens */
a {
    color: #f5a623; /* Couleur jaune */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #e5941f; /* Couleur jaune foncé au survol */
}

img {
    user-select: none;
}