/* Animations pour les transitions d'écran */
.form-screen {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.form-screen:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

/* Style pour les champs invalides */
input:invalid,
select:invalid,
textarea:invalid {
    border-color: #ef4444;
}

/* Animation du bouton Candidater */
#start-form:not([disabled]) {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* Custom styles */
:root {
    --primary-color: #4a90e2;
    --text-color: #ffffff;
    --background-dark: #1a1a1a;
    --card-background: #2a2a2a;
}

/* Smooth transitions */
.transition-all {
    transition: all 0.3s ease;
}

/* Custom button styles */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-all;
}

.btn-secondary {
    @apply bg-gray-600 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition-all;
}

/* Form input styles */
.form-input {
    @apply bg-[#333] border border-gray-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* Card hover effect */
.hover-card {
    @apply transform transition-all hover:-translate-y-1 hover:shadow-2xl;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-dark);
}

::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}
html {
    overflow-x: hidden;
}
.backdrop-blur {
    --tw-backdrop-blur: blur(20px)!important;
    backdrop-filter: var(--tw-backdrop-blur);
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
}
.transition-display {
    transition: opacity 0.3s ease-in-out;
}

/* Style commun pour tous les inputs */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="radio"],
input[type="checkbox"],
select,
textarea {
    background: none;
    border: none;
    border-bottom: 1px solid #FFFFFF;
    border-radius: 0;
    color: white;
    outline: none;
    transition: border-color 0.2s ease;
    padding: 0.5rem 0;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-bottom-color: #081131;
    box-shadow: none;
    outline: none;
    ring: none;
}

/* Style spécifique pour les select */
select {
    appearance: none;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 0.5rem center/1em;
    padding: 8px!important;
    padding-right: 2rem;
}

select option {
    background-color: #081131;
    color: white;
}

/* Style spécifique pour radio et checkbox */
input[type="radio"],
input[type="checkbox"] {
    margin-right: 0.5rem;
    accent-color: #081131;
}

/* Styles Select2 pour correspondre aux inputs */
.select2-container {
    width: 100% !important;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #FFFFFF !important;
    border-radius: 0 !important;
    padding: 0.5rem 0 !important;
    min-height: 42px !important;
    width: 100% !important;
}
.select2-container--default .select2-results__option--selected {
    background-color: #081131 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: white !important;
    padding-left: 0 !important;
    line-height: 1.5 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #081131 !important;
    border: none !important;
    color: white !important;
}

.select2-dropdown {
    background-color: #081131 !important;
    border: none !important;
    border-radius: 0 !important;
    margin-top: 1px !important;
}

.select2-container--default .select2-results__option {
    color: white !important;
    padding: 8px !important;
}

.select2-search__field {
    color: white !important;
    background: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

#progress-bar {
    position: absolute;
    top: 0px;
}

.logo-step-container {
    height: calc(100vh - 200px);
    .block-container {
        max-height: calc(100vh - 220px);
    }
}

.no-logo-step-container {
    height: calc(100vh - 40px);
    .block-container {
        max-height: calc(100vh - 50px);
    }
}

.block-container {
    width: 700px;
    min-height: 400px;
    padding: 1.5rem;
    border-radius: 0.5rem;
    transition: opacity 0.3s ease-in-out;
    overflow-y: auto;
}

.block-container > * {
    min-height: 400px;   
}

@media (max-width: 768px) {
    .block-container {
        width: 100%;
        margin: 0 20px;
        padding: 20px;
    }
}

@media (max-height: 500px) {
    .logo-step-container .block-container {
        min-height: calc(100vh - 220px);
        height: calc(100vh - 220px);
    }
    .no-logo-step-container .block-container {
        min-height: calc(100vh - 50px);
        height: calc(100vh - 50px);
    }
    .block-container > * {
        min-height: 0px;   
    }
}

.field-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
}