#math-game-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 600px;
            margin: 5px auto;
            padding: 5px;
            background: #8ba7b6;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            text-align: center;
            border: 3px solid #020550;
        }

        .hidden { display: none !important; }

        /* ÉCRANS */
        .game-screen { display: flex; flex-direction: column; gap: 10px; }
        
        /* BOUTONS DE STYLE */
        .style-options { display: flex; gap: 5px; }
        .btn-style { 
            flex: 1; padding: 12px; border: 2px solid #e74c3c; 
            background: #2c3e50; border-radius: 10px; cursor: pointer; font-weight: bold;
            transition: all 0.2s;
        }
        .btn-style.active { background: #e74c3c; color: white; }

        /* GRILLE DE NIVEAUX */
        .level-grid { 
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
            gap: 5px; margin: 5px 0;
        }
        .level-card { 
            padding: 15px; border: 2px solid #eee; border-radius: 12px; 
            cursor: pointer; background: #fcfcfc; transition: 0.2s;
        }
        .level-card:hover { border-color: #e74c3c; background: #fff5f5; }
        .level-card.selected { border-color: #e74c3c; background: #f0a4a4; font-weight: bold; }

        /* EN-TÊTE DU JEU */
        .game-header { 
            display: flex; justify-content: space-between; align-items: center; 
            padding-bottom: 1px; border-bottom: 2px solid #f0f0f0;
        }
        #operation-text { font-size: 2rem; font-weight: 700; margin: 5px 0; color: #000000; }
        
        /* VIGNETTES */
        #vignettes-container { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
        .vignette { 
            min-width: 90px; padding: 5px; font-size: 2rem; font-weight: bold;
            border: 4px solid #e74c3c; border-radius: 15px; background: #020550; 
            cursor: pointer; transition: transform 0.1s;
        }
        .vignette:active { transform: scale(0.9); }

        /* CLAVIER VIRTUEL */
        #keyboard-container { display: flex; flex-direction: column; align-items: center; }
        #answer-input { 
            font-size: 2.5em; text-align: center; width: 140px; margin-bottom: 20px; 
            border: 3px solid #2c3e50; border-radius: 10px; padding: 5px; background: #f9f9f9;
        }
        .keyboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; max-width: 280px; }
        .key, .key-special { 
            padding: 5px; font-size: 2rem; border-radius: 10px; border: 1px solid #9caeec; 
            background: #020550; cursor: pointer; font-weight: bold;
        }
        #key-ok { background: #dff0d8; color: #3c763d; border-color: #d6e9c6; }
        #key-clear { background: #f2dede; color: #a94442; border-color: #ebccd1; }

        /* FEEDBACK & SCORE */
        #feedback-message { height: 40px; font-size: 1.4em; font-weight: bold; margin: 10px 0; }
        .correct { color: #27ae60; }
        .wrong { color: #e74c3c; }

        .btn-main { 
            padding: 20px; font-size: 1.4em; background: #074204; 
            color: white; border: none; border-radius: 15px; cursor: pointer; font-weight: bold;
        }
        .btn-quit { background: #95a5a6; color: white; border: none; padding: 8px 15px; border-radius: 8px; cursor: pointer; }
.titre{font-size: 2rem;margin: 2px; padding: 2px;}
.soustitre{font-size: 2rem ;margin: 2px; padding: 2px; }
#operation-text{font-size: 2.2rem;font-weight: 700;}
.temps{font-weight: 700;color: red}
.numq{font-weight: 500 ;color: #197c07;}

/* Conteneur principal */
.navigation-jeux {
    border: 1px solid #620505;
    padding: 10px;
    margin: 50px 0;
    background-color: #8bada2;
    border-radius: 15px;
    
}

.navigation-jeux h3 {
    font-size: 1em;
    margin: 0 0 8px 0;
}

.section-langue, .section-jeux {
    margin-bottom: 10px;
}

.section-langue h4, .section-jeux h4 {
    font-size: 0.9em;
    margin: 0 0 5px 0;
    color: darkblue;
}

.navigation-jeux a {
    display: inline-block;
    background: #ed7979;
    padding: 5px 5px;
    margin: 10px 0;
    text-decoration: none;
    color: #000000;
    font-size: 1.2rem;
    border-radius: 10px;
}

.navigation-jeux a:hover {
    background: #3b0432;
    color: white;
}