/* Styles de base pour la page */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 1.5rem;

    background-image: url(../RESSOURCES/background-minijeux.jpg);
    background-size: cover;           /* Ajuste l'image pour qu'elle couvre tout l'écran */
    background-repeat: no-repeat;     /* Empêche la répétition de l'image */
    background-attachment: fixed;     /* Garde l'image fixe lors du défilement */
    background-position: center;      /* Centre l'image de fond */
}

/* Pour ajouter de la transparence */
body::before {
    content: "";    /* Créé un élément vide sur tout l'écran, pour activer le pseudo-élément ::before lui-même pour appliquer des styles (comme une couleur ou une opacité) à cette couche. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9); /* Couleur et transparence : 0.7 est l'opacité */
    z-index: -1;
}



.logo-titre {
    display: flex;
    align-items: center;
    justify-content: center; /* Centre le contenu horizontalement */
    width: 100%;
    position: relative; /* Permet de positionner le logo */
}

.logo-link {    /* permet d'éviter que le titre et le logo soit désaligné, sinon caca */
    display: flex;
    align-items: center;
}

#logo-site {
    position: absolute; /* Place le logo de manière absolue */
    left: 0; /* Aligne le logo à gauche */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #29892c;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#logo-site:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 15px 5px rgba(76, 175, 80, 0.5);
}


h1 {
    color: #33b437;
    font-size: 2em;  /* 1em = 16px (taille courante d'un élément en css */
    text-decoration: underline;
    margin-bottom: 200px;
    margin: 0; /* Évite un espace vertical inutile */
    padding-left: 1.5em; /* Décale légèrement le titre pour éviter le chevauchement avec le logo */
}





#bannière {
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: 40px auto;
    border-radius: 15px;
    display: block;
}


/* Bannières aspect + transition */
#scroll-banners {
    margin-top: 50px;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: black;
}

/* Styles des images de bannières */
.banners-style {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 15px;
    position: absolute; /* Pour superposer les images */
    opacity: 0; /* Départ caché pour la transition */
    transition: opacity 1s ease-out, transform 1.5s ease-out; /* Transition fluide pour l'opacité et le swipe */
    transform: translateX(100%); /* Position initiale en dehors de la vue (à droite) */
    z-index: 1; /* Assure que les images sont au-dessus des autres éléments */
}

/* L'image actuelle sort à gauche */
.banners-style.swipe-out {
    transform: translateX(-100%); /* L'image sort vers la gauche */
}

/* La nouvelle image arrive dans le conteneur */
.banners-style.swipe-in {
    opacity: 1; /* Rendre visible la nouvelle image */
    transform: translateX(0); /* L'image glisse en position centrale */
    z-index: 2; /* L'image courante est au-dessus de la précédente */
}



  






/* Style pour la section de boutons */
.game-buttons {
    display: flex;
    justify-content: center;
    gap: 4rem;
}

/* Style pour chaque bouton de jeu */
.game-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
    border: 2px solid #4CAF50; /* Bordure verte #808000 */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.game-button:hover {
    transform: scale(1.05); /* Agrandissement au survol */
}

/* Style pour les images dans les boutons */
.game-button img {
    width: 100%;
    height: auto;
    border-bottom: 2px solid #4CAF50; /* Ligne verte entre l'image et le bouton */
}

/* Style pour les boutons */
.game-button button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    width: 100%;
    transition: background-color 0.3s ease;
}

.game-button button:hover {
    background-color: #419445; /* Couleur plus foncée au survol */
}




    /* MEMORY */

/* Conteneur global */
#memory-game {
    background-color: #ffffff;          /* fond blanc surélevé */
    padding: 2rem;                      /* espace interne */
    margin: 2rem auto;                  /* centré horizontalement */
    max-width: 800px;                    /* avant : 90vw (responsive) */
    border-radius: 16px;                /* coins arrondis */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* ombre portée */
    position: relative;
    z-index: 1;
}


/* Conteneur commun pour stats, sélecteur et toggle */
#memory-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;          /* espacement régulier entre chaque élément */
    border-radius: 8px;       
    margin-bottom: 1rem;
}

  

/* Compteur de coups + chronomètre */
#memory-stats {
    display: inline-flex;       /* conteneur flexible */
    gap: 2rem;                  /* espace entre les deux indicateurs */
    justify-content: center;    
    align-items: center;
    background-color: #f3f4f6;  /* gris très clair */
    padding: 1rem;        
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    color: #1f2937;             /* gris très foncé */
}

#memory-stats span {
    white-space: nowrap;       /* évite les sauts de ligne ou espaces inutiles */
    display: inline-flex;      /* aligne bien les éléments à l'intérieur */
    align-items: center;
    gap: 0.3rem;               /* petit espace régulier entre icône, texte et nombre */
}
  


/* Sélecteur niveaux de difficulté */
#memory-difficulty-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 1rem;
    width: fit-content;
    background-color: #f3f4f6; /* gris très clair */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', sans-serif;
    font-size: 1rem;
    color: #333;
}

#memory-difficulty-selector label {
    font-weight: 600;
    color: #111827;
}

#memory-difficulty-selector select {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: white;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

#memory-difficulty-selector select:hover {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

#memory-difficulty-selector select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}    


.hidden {
    display: none !important;   /* le !important permet au .hidden de remporter la confrontation avec le #memory-difficulty-selector, qui empêchait de masquer avant le lancement du jeu l'option "selecteur de difficulté" */
}


/* Plateau de jeu : carré responsive et bien aligné */
#memory-game-board {
    display: grid;
    gap: 10px; /* Espace entre les cartes */
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    width: min(90vw, 90vh);   /* S’adapte à la taille de l’écran */
    height: min(90vw, 90vh);  /* Carré parfait */
}

/* Cartes mémoire : prennent toute la place disponible */
.memory-card {
    width: 100%;
    height: 100%;
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px solid black; /* Ajoute une bordure noire */
    border-radius: 5px;
    box-sizing: border-box; /* Pour que la bordure ne casse pas la mise en page */
}

    /*  :hover : s’active quand la souris passe au-dessus d’un élément */
.memory-card:hover:not(.no-hover):not(.found) {    /* :not(.found) indique que cela ne s'applique pas aux cartes avec la classe .found (déjà trouvées)
    border: 2px solid #007bff; /* Bleu au survol */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Glow bleu */
    transform: scale(1.05); /* Légère mise en avant */
    transition: all 0.2s ease-in-out;
}

/* Empêche l'effet hover avec une classe */
.no-hover {
    pointer-events: none; /* Désactive les interactions */
}


/* Faces de la carte */
.card-back, .card-front {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; /* Ajuste bien les images à la taille des cartes */
}

/* Face visible (image du JSON) */
.card-front {
    display: none; /* Cachée au début */
}

/* Face cachée (dos de la carte) */
.card-back {
    background-color: #ccc;
    cursor: pointer;
}


    /* Toggle = commuter / alterner */
#toggle-sound {
    background-color: transparent;
    border: none;   /* La bordure noire moche */
    border-radius: 50%; /* Arrondi pour la zone d'ombre essentiellement */
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;  /* transition fluide progressive de 200ms de #toggle-sound:hover */
    align-self: center;    /* reste centré sous le plateau */
    margin-top: 0.75rem;
}

#toggle-sound svg {
    stroke: #222;   /* Couleur des lignes du svg (donc tout le svg) */
}

#toggle-sound:hover {
    background-color: rgba(0, 0, 0, 0.05);  /* Ajoute un léger fond noir translucide lors du survol de la souris */
    transform: scale(1.1);  /* Agrandi de 110% */
}

  


/* Style pour le compte à rebours */
#memory-countdown {
    position: fixed;               /* Fixe l'élément sur l'écran */
    top: 50%;                      /* Centre verticalement */
    left: 50%;                     /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste pour un centrage parfait */
    font-size: 72px;               /* Taille de police pour être bien visible */
    font-weight: bold;
    color: #ff4444;                /* Couleur rouge par exemple */
    z-index: 9999;                 /* Au-dessus de tout le reste */
    pointer-events: none;          /* Désactive les interactions sur le compte à rebours */
}

    /* Pour l'apparition du jeu de memory */
.fade-in {
    opacity: 0;
    animation: fadeInAnimation 0.8s ease-in-out forwards;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(20px); /* petit mouvement vers le haut */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Animation pour le compte à rebours */
@keyframes pop {
    0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    50%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.countdown {
    animation: pop 1s ease-in-out;
}


/* Overlay flouté */
#modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none; /* Cette propriété bloque les clics si l'overlay est caché */
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

#modal-overlay.show {
    visibility: visible;        /* Devient visible */
    opacity: 1;
    pointer-events: auto;       /* Les clics sont à nouveau permis */
}

#modal-box {
    background: #e6ffed;
    border: 1px solid #34d399;
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.6);
    border-radius: 12px;
    padding: 2rem;
    font-size: 1.2rem;
    color: #065f46;
    max-width: 90%;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-hidden {
    display: none;
    opacity: 0;
}



/* Tableau de classement */
#leaderboard-section {
    max-width: 800px;
    margin: 60px auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: "Segoe UI", sans-serif;
    color: #333;
}

/* Titre */
#leaderboard-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #2d6a4f;
}

/* Sélecteur de difficulté */
#difficulty-selector {
    display: block;
    margin: 0 auto 30px;
    padding: 8px 16px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: white;
    transition: border-color 0.2s;
}

#difficulty-selector:hover, #difficulty-selector:focus {
    border-color: #2d6a4f;
    outline: none;
}

/* Conteneur du tableau */
.score-table {
    overflow-x: auto;
}

/* Tableau */
.score-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* En-tête du tableau */
.score-table thead {
    background-color: #2d6a4f;
    color: white;
}

.score-table th, .score-table td {
    padding: 12px 16px;
    text-align: center;
    font-size: 1rem;
}

.score-table tbody tr:nth-child(even) {
    background-color: #f0f0f0;
}

.score-table tbody tr:hover {
    background-color: #e0ffe0;
    transition: background-color 0.3s;
}

/* Mettre en lumière le score propre à l'utilisateur seulement */
.highlighted-score {
    font-weight: bold;
    background-color: #e6ffe6; /* Vert très clair */
    color: #1a531b; /* Vert foncé pour contraste */
}




/* Message de demande de pseudo pour le classement du Memory */
/* Overlay semi-transparent couvrant toute la page, pour focaliser sur la boîte */
.pseudo-overlay {
    position: fixed;        /* position fixe par rapport à la fenêtre */
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(240, 240, 240, 0.9); /* fond clair légèrement translucide */
    display: flex;          /* flexbox pour centrer le contenu */
    justify-content: center;/* centrer horizontalement */
    align-items: flex-start;/* aligner vers le haut verticalement */
    padding-top: 10vh;      /* espace en haut pour "respirer" */
    z-index: 1000;          /* au-dessus de tout le reste */
}

/* Boîte contenant label, input, boutons */
.pseudo-box {
    background-color: white;
    padding: 2rem;
    border-radius: 2rem;    /* coins très arrondis */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* ombre douce portée */
    text-align: center;     /* centrer le texte */
    max-width: 300px;
    width: 90%;             /* responsive sur petits écrans */
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    animation: fadeInUp 0.3s ease-out; /* apparition fluide venant du bas */
}

/* Animation d'apparition douce avec translation vers le haut */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Label au-dessus du champ texte */
.pseudo-box label {
    display: block;         /* forcer saut de ligne */
    font-size: 1.1rem;
    margin-bottom: 0.8rem;  /* espacement sous le label */
    color: #333;            /* texte gris foncé, bonne lisibilité */
}

/* Champ texte pour le pseudo */
#pseudo-input {
    display: block;
    margin: 0 auto;         /* centrer horizontalement */
    width: 100%;
    max-width: 250px;       /* limiter largeur max */
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 1.5rem;  /* arrondi doux */
    font-size: 1rem;
    outline: none;          /* suppression du contour bleu par défaut */
    transition: border-color 0.3s ease; /* transition douce de la bordure */
}

/* Focus sur le champ texte : bordure verte claire */
#pseudo-input:focus {
    border-color: #7fdca2;
}

/* Conteneur des boutons, alignement côte-à-côte avec espacement */
.pseudo-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

/* Style commun des boutons valider et annuler */
.pseudo-buttons button {
    padding: 0.8rem 1.6rem;     /* un peu plus grand que ce que tu avais */
    border-radius: 2rem;        /* même arrondi que la boîte */
    border: none;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ombre douce portée */
    transition: all 0.3s ease;
    color: white;
    user-select: none;          /* empêcher la sélection du texte au clic */
}

/* Bouton Valider : vert doux */
#pseudo-valider {
    background-color: #7fdca2;
}

/* Hover sur Valider : vert un peu plus foncé + léger "soulèvement" */
#pseudo-valider:hover {
    background-color: #6fc791;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Clic sur Valider : léger rétrécissement */
#pseudo-valider:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Bouton Annuler : gris moyen */
#pseudo-annuler {
    background-color: #aaa;
}

/* Hover sur Annuler : gris un peu plus foncé, même effet que Valider */
#pseudo-annuler:hover {
    background-color: #888;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Clic sur Annuler : même effet que Valider */
#pseudo-annuler:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


/* Animation d'erreur quand pseudo vide : secousse + flash rouge */
.pseudo-box.shake-error {
    animation: shake 0.4s, flashRed 0.4s;
}

/* Animation secousse horizontale */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

/* Animation flash de fond rouge très rapide */
@keyframes flashRed {
    0% { background-color: #ffe5e5; }
    100% { background-color: white; }
}







/* RESPONSIVE : réduit la plateforme sur mobile */

/* (Media query) = condition CSS qui dit que si la largeur de l'écran est < 600px (smartphones en moyenne entre 360 - 414), ce bloc CSS s'applique */
@media (min-width: 10px) and (max-width: 949px) {
    body {
        padding: 1rem; /* ou même 0.5rem si c’est très petit */
    }
    .game-buttons {
        gap: 2rem;
    }
    .game-button {
        width: 8em;
        font-size: 0.8rem;
    }
    /* 1) Conteneur principal responsive */
    #memory-game {
        max-width: 90vw;        /* ne dépasse pas 90% de la largeur de l'écran */
        padding: 1rem;          /* espace interne un peu réduit */
        box-sizing: border-box; /* inclut padding/border dans la largeur */
        overflow-x: hidden;     /* empêche tout débordement horizontal */
    }

    /* 2) Contrôles en colonne et pleine largeur */
    #memory-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* 3) Stats et sélecteur prennent 100% du conteneur */
    #memory-stats,
    #memory-difficulty-selector {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        padding: 0.75rem;
    }

    /* Label et select bien empilés */
    #memory-difficulty-selector label {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    #memory-difficulty-selector select {
        width: 100%;
        max-width: none;
    }

    /* 4) Plateau de jeu s'adapte au conteneur */
    #memory-game-board {
        width: 100%;           /* prend tout l'espace disponible */
        height: auto;          /* la hauteur s’ajuste à son contenu */
        gap: 6px;
    }
}