/* ============================================================
   automatismes-diff.css
   Boutons difficulté + zone de lancement (mode + nb questions + bouton)
   Chemin : /styles/outils/automatismes-diff.css
   ============================================================ */

/* ── Difficulté ─────────────────────────────────────────── */
.difficulty-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.diff-btn { cursor: pointer; user-select: none; }
.diff-btn input[type="radio"] { display: none; }

.diff-btn span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95em;
    border: 2px solid transparent;
    transition: all 0.18s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.diff-facile span   { background:#e8f5e9; color:#1e7e34; border-color:#a5d6a7; }
.diff-moyen span    { background:#fff3e0; color:#e65100; border-color:#ffcc80; }
.diff-difficile span{ background:#fce4ec; color:#b71c1c; border-color:#f48fb1; }
.diff-mixte span    { background:#f3e5f5; color:#6a1b9a; border-color:#ce93d8; }

.diff-facile    input:checked + span { background:#27ae60; color:white; border-color:#1e8449; box-shadow:0 4px 12px rgba(39,174,96,.35); transform:translateY(-2px); }
.diff-moyen     input:checked + span { background:#f39c12; color:white; border-color:#c87f0a; box-shadow:0 4px 12px rgba(243,156,18,.35); transform:translateY(-2px); }
.diff-difficile input:checked + span { background:#e74c3c; color:white; border-color:#c0392b; box-shadow:0 4px 12px rgba(231,76,60,.35);  transform:translateY(-2px); }
.diff-mixte     input:checked + span { background:#8e44ad; color:white; border-color:#6c3483; box-shadow:0 4px 12px rgba(142,68,173,.35); transform:translateY(-2px); }
.diff-btn:hover span { filter:brightness(0.93); }

/* ── Zone de lancement ──────────────────────────────────── */
.launch-zone {
    background: #f8f9ff;
    border: 1px solid #dde3ff;
    border-radius: 14px;
    padding: 18px 20px;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Nombre de questions */
.num-questions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #444;
}

.num-questions-row input[type="number"] {
    width: 80px;
    padding: 8px 10px;
    border: 2px solid #c3d0ff;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

/* Sélecteur de mode */
.mode-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mode-choice-btn {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.mode-choice-btn input[type="radio"] { display: none; }

.mode-choice-btn span {
    display: block;
    padding: 10px 18px 6px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95em;
    background: white;
    border: 2px solid #dde;
    color: #555;
    transition: all 0.15s ease;
}

.mode-choice-btn small {
    display: block;
    font-size: 0.72em;
    font-weight: 400;
    color: #888;
    margin-top: 2px;
}

.mode-choice-btn.active span,
.mode-choice-btn input:checked ~ span {
    color: white;
    border-color: currentColor;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transform: translateY(-2px);
}

/* Couleurs spécifiques par mode */
.mode-choice-btn[data-mode="normal"] span        { background:#e3f2fd; color:#1565c0; border-color:#90caf9; }
.mode-choice-btn[data-mode="normal"].active span  { background:#1976d2; color:white; border-color:#1565c0; box-shadow:0 4px 12px rgba(25,118,210,.4); }

.mode-choice-btn[data-mode="flash"] span         { background:#e8f5e9; color:#2e7d32; border-color:#a5d6a7; }
.mode-choice-btn[data-mode="flash"].active span   { background:#388e3c; color:white; border-color:#2e7d32; box-shadow:0 4px 12px rgba(56,142,60,.4); }

.mode-choice-btn[data-mode="defi"] span          { background:#fff3e0; color:#e65100; border-color:#ffcc80; }
.mode-choice-btn[data-mode="defi"].active span    { background:#f57c00; color:white; border-color:#e65100; box-shadow:0 4px 12px rgba(245,124,0,.4); }

.mode-choice-btn[data-mode="revision"] span       { background:#f3e5f5; color:#6a1b9a; border-color:#ce93d8; }
.mode-choice-btn[data-mode="revision"].active span { background:#8e44ad; color:white; border-color:#6c3483; box-shadow:0 4px 12px rgba(142,68,173,.4); }

.mode-choice-btn[data-mode="normal"].active small,
.mode-choice-btn[data-mode="flash"].active small,
.mode-choice-btn[data-mode="defi"].active small,
.mode-choice-btn[data-mode="revision"].active small { color:rgba(255,255,255,0.85); }

/* Bouton lancer */
.btn-launch {
    align-self: flex-start;
    padding: 13px 40px;
    font-size: 1.1em;
    font-weight: bold;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 15px rgba(102,126,234,.4);
    transition: all 0.2s ease;
}

.btn-launch:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,.5);
}

.btn-launch:active { transform: translateY(0); }

/* ── Bandeau timer ──────────────────────────────────────── */
#timer-info-banner { margin: 8px 0 12px 0; }

/* ── Sélecteur chrono par question ──────────────────────── */
#timer-selector select {
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: border-color 0.3s;
    min-width: 180px;
}

#timer-selector select:focus {
    outline: none;
    border-color: #667eea;
}

#timer-selector label {
    font-weight: 600;
    font-size: 16px;
}
#questions-timer-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

#questions-timer-row > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

#questions-timer-row label {
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}

#questions-timer-row input[type="number"] {
    width: 70px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
}

#questions-timer-row select {
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    min-width: 120px;
}