/**
 * ==============================================
 * BOOTSTRAP 5 OVERRIDES
 * Garde le design actuel tout en utilisant Bootstrap
 * ==============================================
 */

/* Désactiver les styles Bootstrap par défaut pour les éléments personnalisés */
.container {
    /* Notre container personnalisé garde ses styles */
    max-width: 950px !important;
}

/* Garder le gradient animé du body */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%) !important;
    background-size: 400% 400% !important;
    animation: gradientShift 15s ease infinite !important;
}

/* Override des formulaires Bootstrap pour garder notre style */
.form-control,
.form-select {
    /* On garde nos styles personnalisés, Bootstrap sera utilisé pour la structure */
    border-radius: 8px;
    border: 1px solid var(--gray-border);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
    background: white;
}

/* Garder le style des inputs personnalisés même avec Bootstrap */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    /* Styles personnalisés gardés - Bootstrap form-control sera ajouté progressivement */
}

/* Labels Bootstrap */
.form-label {
    font-weight: 600;
    color: var(--gray-dark);
    margin-bottom: 0.5rem;
}

/* Buttons - garder notre style mais utiliser les classes Bootstrap */
.btn {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #5568d3 0%, #6a3d8f 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.btn-close:hover {
    opacity: 1;
}

/* Alerts - améliorer avec Bootstrap tout en gardant notre style */
.alert {
    border-radius: 12px;
    border: none;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: #065f46;
    border-left: 4px solid var(--success);
}

.alert-error,
.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: #991b1b;
    border-left: 4px solid var(--danger);
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    color: #92400e;
    border-left: 4px solid var(--warning);
}

/* Cards - utiliser Bootstrap mais garder notre style glassmorphism */
.card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: none;
    border-radius: 16px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Stepper personnalisé - compatible avec Bootstrap */
.formation-stepper {
    /* Garde son style actuel */
}

/* Compatibilité avec les classes personnalisées existantes */
/* Les styles existants dans form.css sont prioritaires */
/* Bootstrap grid peut être utilisé avec row/col pour la structure */

/* Garder les styles des sections personnalisées */
.form-section {
    /* Styles existants conservés */
}

.form-section-title {
    /* Styles existants conservés */
}

/* Responsive - Bootstrap grid peut être utilisé mais nos breakpoints restent */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
}

/* Désactiver les styles Bootstrap qui entrent en conflit */
.navbar,
.nav,
.breadcrumb {
    /* Ces composants ne sont pas utilisés dans le formulaire */
}

/* Garder nos animations personnalisées */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}