/* style-jeu.css (Version 3 - Style Boutons d'accueil) */

/* --- Configuration Globale --- */
body {
    font-family: 'Nunito', sans-serif;
    background-color: #F8F3E9;
    color: #424242;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

/* --- Conteneur Principal (la carte) --- */
.game-container {
    width: 95vw;
    max-width: 1000px; /* Un peu plus large pour accommoder 3 boutons par ligne */
    background: #fcf9f5;
    padding: clamp(20px, 4vw, 50px);
    border-radius: 25px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.1);
    text-align: center;
}

/* --- Navigation (Retour accueil) --- */
.page-nav {
    display: flex;
    justify-content: flex-start; /* Aligné à gauche */
    margin-bottom: 20px;
    /* La bordure a été supprimée */
}

.nav-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #E3F2FD;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    color: #5a4e49;
    font-weight: bold;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-link:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* --- En-tête --- */
header h1 {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(2.5rem, 6vw, 3.8rem); 
    color: #5a4e49;
    margin-bottom: 10px;
}

header p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #796c66;
    max-width: 600px;
    margin: 0 auto 20px auto;
}

/* --- Grille des Matières (NOUVEAU STYLE) --- */
.subjects-grid {
    display: grid;
    /* 3 colonnes sur grand écran, 2 sur tablette, 1 sur mobile */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px 20px; /* Plus d'espace vertical */
    margin: 50px 0;
}

.subject-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.subject-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 5px;
    z-index:10;
    position: relative;
}

.subject-button {
    width: 260px;
    height: 90px;
    text-decoration: none;
    color: white; 
    font-family: 'Dancing Script', cursive; /* Police du titre comme demandé */
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.subject-button:hover {
    transform: scale(1.05);
}

/* --- Assignation des images de fond --- */
.button-pink { background-image: url('images/red_button.png'); }
.button-blue { background-image: url('images/blue_button.png'); }
.button-green { background-image: url('images/green_button.png'); }
.button-violet { background-image: url('images/violet_button.png'); }
.button-orange { background-image: url('images/orange_button.png'); }
.button-yellow { background-image: url('images/yellow_button.png'); }


.score {
    font-size: 1.3rem;
    font-weight: bold;
    font-family: 'Nunito', sans-serif;
    color: #a1887f;
    margin-top: 15px; /* Espace entre le bouton et le score */
}


/* --- Pied de page (Bilan) --- */
footer {
    border-top: 1px solid #eee;
    padding-top: 25px;
    margin-top: 40px;
}

footer h3 {
    font-family: 'Dancing Script', cursive;
    font-size: 2rem;
    color: #5a4e49;
    margin-bottom: 15px;
}

.summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
    font-size: 1.2rem;
}

#final-remark {
    margin-top: 20px;
    font-weight: bold;
    font-style: italic;
    color: #388e3c;
}

/* --- Utilitaires --- */
.hidden { display: none; }
.corner { position: fixed; width: 20vw; max-width: 280px; height: auto; z-index: -1; }
.top-left { top: 0; left: 0; }
.top-right { top: 0; right: 0; }
.bottom-left { bottom: 0; left: 0; }
.bottom-right { bottom: 0; right: 0; }

@media (max-width: 768px) {
    .corner { width: 25vw; max-width: 120px; }
    .game-container { padding: 5vw 3vw; }
}