body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
}

.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

h1, h3 {
    color: #2c3e50;
}

.form-label {
    font-weight: 600;
    color: #495057;
}

/* Style pour l'échelle de notation */
.rating-scale .form-check {
    margin-right: 20px;
}

.rating-scale .form-check-input {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.rating-scale .form-check-label {
    font-size: 18px;
    font-weight: 600;
    margin-left: 8px;
    cursor: pointer;
    color: #6c757d;
}

.rating-scale .form-check-input:checked + .form-check-label {
    color: #0d6efd;
}

.rating-scale .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.rating-scale .form-check-input:hover {
    border-color: #0d6efd;
}

/* Animation pour les alertes */
.alert {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fix z-index pour les dropdowns - évite le chevauchement avec les éléments du dessous */
.Select-menu-outer,
.Select-menu,
.VirtualizedSelectFocusedOption,
.VirtualizedSelectOption {
    z-index: 9999 !important;
}

/* Container du dropdown doit être au-dessus des autres éléments */
.dash-dropdown,
.Select {
    position: relative;
    z-index: 100;
}

/* Le menu déroulant ouvert doit être au premier plan absolu */
.Select.is-open {
    z-index: 9999 !important;
}

.Select.is-open .Select-menu-outer {
    z-index: 9999 !important;
}

/* Fix pour les cards qui contiennent des dropdowns */
.card {
    overflow: visible !important;
}

.card-body {
    overflow: visible !important;
}

/* Anti-flicker pour les dropdowns */
.dash-dropdown {
    min-height: 38px;
}

.Select-control {
    min-height: 36px;
}

.Select-placeholder,
.Select-value {
    line-height: 34px !important;
}

/* Transition douce pour éviter le flicker */
.Select,
.Select-control,
.Select-input,
.Select-placeholder,
.Select-value {
    transition: none !important;
}

/* Stabiliser la hauteur des conteneurs de dropdown */
.dash-dropdown .Select {
    min-height: 38px;
}

/* S'assurer que le conteneur du formulaire ne bloque pas le dropdown */
#reponses-form-container {
    position: relative;
    z-index: 1;
}

#reponses-form-container .alert {
    position: relative;
    z-index: 1;
}

/* Fix spécifique pour la page réponses - le conteneur doit être sous les dropdowns */
#reponses-form-container {
    margin-top: 10px;
}