/* style_automatismes.css - Version Comics */

/* Boutons de la liste des exercices (Tuiles) */
.btn-auto {
    width: 100%; padding: 18px; margin-bottom: 15px; text-align: left;
    background: white; 
    border: 3px solid black; /* Contour noir */
    border-radius: 10px; 
    box-shadow: 5px 5px 0px black; /* Ombre dure */
    cursor: pointer;
    font-size: 18px; font-weight: 700; color: #2c3e50; 
    transition: 0.1s;
}
.btn-auto:hover { 
    background: #e3f2fd; 
    transform: translateY(-2px);
    box-shadow: 7px 7px 0px black;
}
.btn-auto:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0px black;
}

/* État Validé */
.btn-auto.valide {
    background-color: #eafaf1; 
    border-color: #27ae60; 
    color: #27ae60;
    box-shadow: 3px 3px 0px #27ae60;
    opacity: 0.9;
}

/* Zone de la Question */
.question-focus {
    font-size: 1.4em; font-weight: 900; margin-bottom: 20px; 
    color: black; text-transform: uppercase;
    text-decoration: underline wavy #f1c40f;
}
.input-focus {
    width: 100%; padding: 15px; font-size: 1.2em; font-weight: bold;
    border: 3px solid black; border-radius: 8px; outline: none;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}
.input-focus:focus { background: #fffbe6; }

/* Barre de progression */
#barre-progression { 
    transition: width 0.5s ease; 
    border-right: 2px solid black;
}
/* Le conteneur gris de la barre doit avoir un contour noir aussi (dans le HTML, c'est une div style inline, on force ici si possible via parent ou on laisse tel quel) */

/* QCM */
.zone-qcm { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
.btn-qcm {
    padding: 20px; background: white; 
    border: 3px solid black; border-radius: 8px;
    box-shadow: 4px 4px 0px #95a5a6;
    cursor: pointer; font-size: 1.2em; font-weight: bold;
    transition: 0.1s;
}
.btn-qcm:hover { background: #f0f8ff; box-shadow: 4px 4px 0px #3498db; border-color: black; }
.btn-qcm.selected { 
    background: #3498db; color: white; 
    border-color: black; 
    box-shadow: 2px 2px 0px black; transform: translate(2px, 2px);
}

/* FRACTION & MATHS */
.input-frac-eleve { 
    width: 70px; text-align: center; padding: 8px; 
    border: 3px solid black; border-radius: 6px; font-weight: bold; font-size: 1.1em;
}
.bar-eleve { width: 100%; height: 3px; background: black; margin: 6px 0; border-radius: 2px;}

.math-keyboard {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin-top: 20px; padding: 15px; 
    background: #fcf8e8; border: 3px solid black; border-radius: 10px;
}
.key-btn {
    padding: 10px 15px; background: white; 
    border: 2px solid black; border-radius: 6px;
    cursor: pointer; font-weight: bold; box-shadow: 2px 2px 0px black;
}
.key-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0px black; }

#btn-question-suivante {
    margin-top: 30px; /* On ajoute une bonne marge au-dessus */
    width: 100%;      /* On s'assure qu'il prenne toute la largeur */
    display: block;   /* Force le comportement bloc pour bien appliquer la marge */
}

/* ... (votre code existant) ... */

/* --- CORRECTIF : Interface stable --- */
/* On cible la carte où l'élève répond pour bloquer les animations */
#auto-interface {
    /* Annule le mouvement */
    transform: none !important;
    transition: none !important;
}

/* Au survol ou au clic, on force l'ombre à rester fixe (pas de "pop") */
#auto-interface:hover, 
#auto-interface:active {
    transform: none !important;
    box-shadow: 6px 6px 0px black !important; /* On garde l'ombre normale */
    border-color: black !important;
}

/* On cache les points noirs (le halftone) sur cette carte uniquement */
#auto-interface::after {
    display: none !important;
}
/* --- CORRECTIF : Menu de choix stable --- */

/* 1. On fige la grande carte blanche (le conteneur) */
#auto-menu {
    transform: none !important;   /* Ne bouge pas */
    transition: none !important;  /* Pas de transition */
    overflow: visible !important; /* Important : permet à l'ombre du bouton de dépasser sans être coupée */
}

/* 2. On annule les effets au survol du conteneur */
#auto-menu:hover,
#auto-menu:active {
    transform: none !important;
    box-shadow: 6px 6px 0px black !important; /* L'ombre reste fixe */
}

/* 3. On cache les points noirs sur le fond */
#auto-menu::after {
    display: none !important;
}