/* ============================================================
   quiz-diff.css — Codes couleurs boutons mode quiz
   Même style que automatismes-diff.css
   Chemin : /styles/outils/quiz-diff.css
   ============================================================ */

/* ── Base bouton mode ───────────────────────────────────── */
.mode-btn {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.95em;
    transition: all 0.18s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    background: white;
    text-align: center;
}

/* ── Classique — bleu ───────────────────────────────────── */
.mode-btn[data-mode="classique"] {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #90caf9;
}
.mode-btn[data-mode="classique"].active,
.mode-btn[data-mode="classique"]:focus {
    background: #1976d2;
    color: white;
    border-color: #1565c0;
    box-shadow: 0 4px 12px rgba(25,118,210,.4);
    transform: translateY(-2px);
}

/* ── Chrono — vert ──────────────────────────────────────── */
.mode-btn[data-mode="chrono"] {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}
.mode-btn[data-mode="chrono"].active,
.mode-btn[data-mode="chrono"]:focus {
    background: #388e3c;
    color: white;
    border-color: #2e7d32;
    box-shadow: 0 4px 12px rgba(56,142,60,.4);
    transform: translateY(-2px);
}

/* ── Défi — orange ──────────────────────────────────────── */
.mode-btn[data-mode="defi"] {
    background: #fff3e0;
    color: #e65100;
    border-color: #ffcc80;
}
.mode-btn[data-mode="defi"].active,
.mode-btn[data-mode="defi"]:focus {
    background: #f57c00;
    color: white;
    border-color: #e65100;
    box-shadow: 0 4px 12px rgba(245,124,0,.4);
    transform: translateY(-2px);
}

/* ── Révision — violet ──────────────────────────────────── */
.mode-btn[data-mode="revision"] {
    background: #f3e5f5;
    color: #6a1b9a;
    border-color: #ce93d8;
}
.mode-btn[data-mode="revision"].active,
.mode-btn[data-mode="revision"]:focus {
    background: #8e44ad;
    color: white;
    border-color: #6c3483;
    box-shadow: 0 4px 12px rgba(142,68,173,.4);
    transform: translateY(-2px);
}

.mode-btn:hover { filter: brightness(0.95); }