/* styles.css fusionné avec styles2.css */

/* Styles pour le corps de la page */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Empêche le débordement horizontal */
    width: 100%; /* Assure que le corps occupe toute la largeur sans débordement */
}

/* Styles pour le conteneur principal */
.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;  /* Centrage horizontal */
    padding: 20px;   /* Espacement intérieur */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Titres principaux */
h1, h2, h3 {
    color: #03283b;  /* Bleu foncé pour H1 */
    text-align: left; /* Aligner les titres à gauche */
    margin-bottom: 20px; /* Espace sous le titre */
    margin-top: 20px; /* Espace au-dessus du titre, ajustez cette valeur */
}

/* Taille du titre H1 */
h1 {
    font-size: 2.5rem; /* Taille précédente du H1 */
}

/* Pour garder le bouton "JOUER" à droite du titre */
.header {
    display: flex; /* Utilisation de flexbox pour positionner les éléments horizontalement */
    align-items: center; /* Centrer verticalement le titre et le bouton */
}


/* Bouton "JOUER" */
.btn-jouer {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0f627e; /* Turquoise pour le fond */
    color: white; /* Texte en blanc */
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-left: 20px; /* Espacement entre le titre et le bouton */
    margin-top:   0px; /* Reculer le bouton de 10 pixels vers le haut */
    transition: background-color 0.3s ease-in-out;
}

/* Effet de survol pour le bouton "JOUER" */
.btn-jouer:hover {
    background-color: #03283b; /* Bleu foncé au survol */
    color: white; /* Texte blanc au survol */
}


/* Paragraphes */
p {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    text-align: justify;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
    box-sizing: border-box; /* Ajouté pour éviter les débordements */
}

/* Conteneur d'image */
.image-container {
    text-align: center;  /* Centre le contenu à l'intérieur du conteneur */
    width: 100%;          /* Assure que le conteneur prend toute la largeur de l'écran */
}

/* Image en haut de la page */
.image-container img {
    width: 100%;          /* L'image occupe 100% de la largeur du conteneur */
    height: auto;         /* Conserve les proportions de l'image */
    display: block;       /* Supprime les espaces sous l'image */
    margin: 0 auto;       /* Centre l'image horizontalement */
}

/* Styles spécifiques pour les petits écrans (mobile) */
@media (max-width: 768px) {
    h1, h2 {
        font-size: 24px; /* Augmenter la taille des titres sur mobile */
        margin-bottom: 10px;
    }

    p {
        font-size: 16px; /* Adapter la taille des paragraphes */
    }

    .container {
        padding: 10px; /* Réduire la marge autour du contenu */
        margin: 0 5px; /* Réduire les marges latérales */
        width: 100%; /* S'assurer que la largeur est ajustée */
    }

    /* Images prennent toute la largeur sur mobile */
    img {
        width: 100%; 
        height: auto;
    }

    /* Ajustement du bouton "JOUER" pour les petits écrans */
    .btn-jouer {
        width: auto; /* Garder la largeur automatique pour ne pas étirer le bouton */
        padding: 10px 20px; /* Taille raisonnable pour le bouton */
        font-size: 16px; /* Ajuster la taille du texte */
    }
}

/* Fixer le débordement horizontal global */
html, body {
    width: 100%;
    overflow-x: hidden; /* Empêche le débordement horizontal */
}

/* Forcer les éléments à être contenus à l'intérieur */
* {
    box-sizing: border-box; /* Assure que les marges/paddings ne sortent pas du conteneur */
    margin: 0;
    padding: 0;
}

/* Style pour le mini-menu */
.mini-menu {
    background-color: #333;
    padding: 10px 0;
    text-align: center; /* Centre les éléments */
    position: relative;
    margin-bottom: 8px;
}

/* Liste des éléments de menu */
.mini-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Affiche horizontalement par défaut */
    justify-content: center;
}

/* Élément de la liste */
.mini-menu ul li {
    display: inline-block;
    margin-right: 20px;
}

/* Lien du menu */
.mini-menu ul li a {
    text-decoration: none;
    color: white; /* Couleur par défaut */
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 0;
    transition: background-color 0.3s ease;
}

/* Effet de survol (noir/rouge) */
.mini-menu ul li a:hover {
    background-color: #d4252a; /* Rouge au survol */
    color: white; /* Assurer que le texte reste blanc */
}

/* Affichage du bouton hamburger uniquement sur les petits écrans (mobile) */
.hamburger-menu {
    display: none; /* Caché par défaut sur les grands écrans */
    font-size: 30px;
    color: black;
    cursor: pointer;
    z-index: 100; /* Priorité pour que le hamburger soit visible */
}

/* Styles pour les petits écrans (mobile) */
@media (max-width: 768px) {
    /* Cache la barre de menu classique sur mobile */
    .mini-menu ul {
        display: none; /* Masque le menu classique */
    }

    /* Affiche le hamburger sur mobile */
    .hamburger-menu {
        display: block; /* Affiche le hamburger */
        position: absolute; /* Positionne l'élément de manière absolue */
        top: 12px; /* Déplace le hamburger de 2 pixels plus bas */
        right: 10px; /* Reste à 10px du côté droit */
        width: 40px; /* Augmente la largeur du hamburger pour le rendre plus grand */
        height: 30px; /* Augmente la hauteur du hamburger pour le rendre plus grand */
    }

    .hamburger-menu div {
        width: 40px; /* Largeur des barres plus grande */
        height: 5px; /* Hauteur des barres plus grande */
        background-color: #333; /* Couleur des barres */
        margin: 5px 0; /* Un peu d'espace entre les barres */
    }


    /* Cache le menu par défaut sur mobile */
    .menu-items {
        display: none; /* Masque le menu */
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100%;
        position: absolute;
        top: 50px; /* Décalage sous le hamburger */
        left: 0;
        background-color: #333;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Ombre pour du relief */
    }

    /* Aligne les éléments du menu verticalement */
    .menu-items li {
        display: block;
        margin-bottom: 10px;
    }

    .menu-items li a {
        padding: 15px;
        font-size: 18px;
    }

    /* Affiche le menu quand la classe "show" est ajoutée */
    .menu-items.show {
        display: block; /* Affiche le menu */
    }
}

/* Style spécifique pour le bouton "JOUER" fixé en bas */
.fixed-btn {
    position: sticky;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #0f627e; /* Turquoise pour le fond */
    color: white; /* Texte en blanc */
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    font-size: 16px;
    z-index: 9999;
    margin-top: 20px; /* Légère marge pour éviter d'être trop collé à la page */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Ajout d'une ombre pour le rendre plus visible */
}

/* Effet de survol pour le bouton "JOUER" */
.fixed-btn:hover {
    background-color: #03283b; /* Bleu foncé au survol */
    color: white; /* Texte blanc au survol */
}


/* Style pour les conteneurs de texte et image des jeux bonus */
.jeux-bonus-container {
    display: flex;
    justify-content: space-between; /* Aligner l'image à droite et le texte à gauche */
    align-items: center;
    margin-bottom: 30px; /* Espacement pour séparer des autres sections */
}

/* Texte de chaque jeu bonus */
.jeux-bonus-container .text {
    width: 63%; /* Réduit un peu la largeur du texte pour laisser plus de place à l'image */
    padding-right: 5px; /* Réduit l'espacement à droite du texte pour l'approcher de l'image */
}

/* Image de chaque jeu bonus */
.jeux-bonus-container .image {
    width: 35%; /* Largeur de l'image */
    height: auto;
}

/* Réajustement pour les petits écrans */
@media (max-width: 768px) {
    .jeux-bonus-container {
        flex-direction: column; /* Empile l'image et le texte sur les petits écrans */
        align-items: center;
    }

    .jeux-bonus-container .text {
        width: 100%; /* Le texte prend toute la largeur sur mobile */
        padding-right: 0;
        margin-bottom: 20px; /* Espace sous le texte avant l'image */
    }

    .jeux-bonus-container .image {
        width: 100%; /* L'image occupe toute la largeur */
    }
}




/* Style du lien actif dans le menu : fond rouge et texte blanc */
.mini-menu a[aria-current="page"] {
    background-color: #d4252a; /* Rouge identique au survol */
    color: white; /* Texte blanc */
}






footer {
    display: flex; /* Utilisation de flexbox pour centrer */
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement si nécessaire */
    height: 60px; /* Hauteur du footer, ajustez selon vos besoins */
    padding: 20px;
    margin-top: 75px; /* Ajoute une bande blanche de 25px avant le footer */
    background-color: #F8F7FE; /* Couleur de fond, à adapter selon votre design */
    color: #333; /* Couleur du texte, modifiée pour être plus visible sur fond clair */
    font-size: 14px; /* Taille de la police, à ajuster selon vos besoins */
}