/* admin/style_admin.css - Version Comics Stable */

/* --- 1. STABILISATION DE LA CARTE ADMIN --- */
/* On annule les effets "Comics" (mouvements, points) pour l'éditeur */
#section-admin .card {
    cursor: default; /* Pas de main qui clique */
    transform: none !important; /* Pas de mouvement */
    transition: none !important;
    box-shadow: 6px 6px 0px black !important; /* Ombre fixe */
}

/* On empêche le mouvement au survol et au clic */
#section-admin .card:hover,
#section-admin .card:active {
    transform: none !important;
    box-shadow: 6px 6px 0px black !important;
}

/* On cache la trame de points noirs (le halftone) */
#section-admin .card::after {
    display: none !important;
}


/* --- 2. STYLE DES BLOCS QUESTIONS --- */
.bloc-question-admin {
    background: white;
    border: 3px solid black;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 4px 4px 0px #ccc;
}

.bloc-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; font-weight: 800; color: black; font-size: 1.1em;
    border-bottom: 3px solid #eee; padding-bottom: 10px;
}

/* Bouton supprimer en Orange Foncé */
.btn-suppr {
    background: #d35400; color: white; border: 2px solid black; 
    padding: 8px 15px; cursor: pointer; border-radius: 6px; 
    font-weight: bold; box-shadow: 2px 2px 0px black;
}
.btn-suppr:hover { transform: translateY(-1px); box-shadow: 3px 3px 0px black; background: #e67e22; }

/* Quill Editor */
.editor-wrapper {
    background: white; margin-bottom: 20px; 
    border: 2px solid #ccc; border-radius: 5px;
}
.quill-editor { height: 150px; font-family: 'Poppins', sans-serif; font-size: 16px; }


/* --- 3. CORRECTION DE L'AFFICHAGE DES RÉPONSES --- */
.reponse-container {
    background: #eafaf1; padding: 20px; 
    border-radius: 8px; border: 3px dashed #27ae60;
}
.label-info { display: block; font-size: 1em; color: #27ae60; margin-bottom: 8px; font-weight: 900; text-transform: uppercase;}

/* LA CORRECTION EST ICI : On cache tout par défaut */
.rep-block {
    display: none;
}

/* On affiche uniquement celui qui a la classe "active" (ajoutée par le JS) */
.rep-block.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Style des inputs dans la zone réponse */
.reponse-row { display: flex; align-items: center; gap: 10px; }
.input-fixe { width: 80px; text-align: center; background: #eee; border: 1px solid #ccc; padding: 5px;}
.input-reponse-centrale { flex-grow: 1; padding: 8px; border: 2px solid #27ae60; font-weight: bold; }

/* Style QCM Admin */
.qcm-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.qcm-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.btn-mini-action { padding: 5px 10px; border: 1px solid black; cursor: pointer; border-radius: 4px; font-weight: bold; }
.btn-add { background: #3498db; color: white; }
.btn-remove { background: #e74c3c; color: white; }

/* Style Fraction Admin */
.fraction-admin { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; }
.frac-input { width: 60px; text-align: center; border: 2px solid #333; padding: 5px; }
.frac-bar { width: 100%; height: 2px; background: black; margin: 5px 0; }


/* --- 4. MENU GESTION (TUILES) --- */
.admin-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px; margin-top: 25px;
}

.admin-tile {
    background: white;
    border: 3px solid black; border-radius: 15px;
    box-shadow: 8px 8px 0px black;
    padding: 30px; text-align: center;
    transition: transform 0.2s;
    /* On garde l'animation ici car c'est un menu de choix */
    cursor: pointer;
}
.admin-tile:hover { transform: translateY(-5px); border-color: #3498db; box-shadow: 10px 10px 0px #3498db; }
.admin-tile:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0px black; }

.tile-icon { font-size: 3.5em; margin-bottom: 15px; display: block; }
.tile-title { font-size: 1.6em; font-weight: 900; color: black; margin-bottom: 25px; text-transform: uppercase; font-style: italic;}
.tile-actions { display: flex; flex-direction: column; gap: 12px; }

.btn-tile {
    padding: 15px; border: 3px solid black; border-radius: 8px;
    cursor: pointer; font-weight: 800; text-transform: uppercase;
    transition: 0.1s; box-shadow: 3px 3px 0px black;
}
.btn-tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0px black; }
.btn-create { background-color: #2ecc71; color: white; }
.btn-manage { background-color: #3498db; color: white; }


/* --- 5. LISTE & RÉSULTATS --- */
.exo-card {
    background: white; padding: 20px; margin-bottom: 15px;
    border: 3px solid black; border-radius: 8px;
    box-shadow: 4px 4px 0px #ccc;
    display: flex; justify-content: space-between; align-items: center;
}
.exo-info h4 { margin: 0; color: black; font-weight: 800; font-size: 1.1em; }
.btn-voir { background: #3498db; color: white; border: 2px solid black; box-shadow: 2px 2px 0px black; }
.btn-delete { background: #d35400; color: white; border: 2px solid black; box-shadow: 2px 2px 0px black; padding: 8px 12px;}
.btn-delete:hover { background: #e67e22; }

.results-table th { background: #3498db; color: white; border: 2px solid black; }
.results-table td { border: 2px solid black; font-weight: 500; }
.note-badge { border: 2px solid black; box-shadow: 2px 2px 0px rgba(0,0,0,0.2); }