/* mini-jeux-culsec — styles page (migration DA, ne pas dupliquer la coque) */

/* Style pour les select (combobox) */
        select

        select.input-field:hover {
            background-color: rgba(255, 255, 255, 0.15);
        }

        .range-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1rem;
        }

        .range-item:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 107, 53, 0.3);
        }
        .var-btn { font-size: 0.875rem; padding: 6px 12px; border-radius: 8px; border: 1px solid; transition: all 0.2s; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; margin-top: 4px; }
        .var-btn.blue { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border-color: rgba(59, 130, 246, 0.4); }
        .var-btn.blue:hover { background: rgba(59, 130, 246, 0.3); }
        .var-btn.emerald { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.4); }
        .var-btn.emerald:hover { background: rgba(16, 185, 129, 0.3); }
        .var-btn.amber { background: rgba(245, 158, 11, 0.2); color: #fcd34d; border-color: rgba(245, 158, 11, 0.4); }
        .var-btn.amber:hover { background: rgba(245, 158, 11, 0.3); }
        .var-btn.violet { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.4); }
        .var-btn.violet:hover { background: rgba(139, 92, 246, 0.3); }