/* ================================
   MÉMOIRE - Styles spécifiques
   ================================ */

/* CONTAINER */
.container-memoire {
    max-width: 1200px;
    margin: 10px auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 15px;
    align-items: start;
    position: relative;
}

/* SCORES */
.scores-memoire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.scores-memoire #box-tentatives { background: #e53935; grid-column: 1 / -1; }
.scores-memoire #box-paires     { background: #764ba2; }
.scores-memoire #box-temps-memoire { background: #4a90d9; }

/* COLONNE CENTRALE */
.colonne-centrale-memoire {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
}

/* GRILLE */
.grille-memoire {
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* CARTE */
.carte-memoire {
    aspect-ratio: 1;
    cursor: pointer;
    perspective: 600px;
}

.carte-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
    border-radius: 12px;
}

.carte-memoire.retournee .carte-inner,
.carte-memoire.trouvee .carte-inner {
    transform: rotateY(180deg);
}

.carte-dos,
.carte-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.carte-face {
    transform: rotateY(180deg);
}

/* Carte trouvée : légère animation de succès */
.carte-memoire.trouvee .carte-inner {
    animation: paire-trouvee 0.4s ease forwards;
}

@keyframes paire-trouvee {
    0%   { transform: rotateY(180deg) scale(1); }
    50%  { transform: rotateY(180deg) scale(1.08); }
    100% { transform: rotateY(180deg) scale(1); }
}

.carte-memoire.trouvee .carte-face {
    box-shadow: 0 0 0 3px #5ced8c, 0 3px 10px rgba(0,0,0,0.15);
}

/* Hover sur carte non retournée */
.carte-memoire:not(.retournee):not(.trouvee):hover .carte-inner {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(118,75,162,0.25);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .container-memoire {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .colonne-classement {
        order: 3;
    }

    .grille-memoire {
        gap: 6px;
        max-width: 100%;
    }

    .carte-memoire:not(.retournee):not(.trouvee):hover .carte-inner {
        transform: none;
    }
}

@media (max-width: 480px) {
    .grille-memoire {
        gap: 5px;
    }
}