/* Fixes pour l'affichage mobile de la page de réservation */

/* Ajustements pour les étapes du processus sur mobile */
@media (max-width: 768px) {
    .process-steps {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        margin: var(--space-xl) 0;
        width: 100%;
        padding: 0 var(--space-md);
    }
    
    .step-card {
        margin: 0 !important; /* Supprimer toutes les marges latérales */
        width: 100%;
        max-width: 100%;
        padding: var(--space-lg);
    }
    
    /* Ajustement de la bordure rouge pour l'étape active */
    .step-card.active {
        border: 2px solid var(--accent-red);
    }
    
    /* Réduction de la taille des cercles numérotés sur mobile */
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    /* Ajustement des titres d'étapes sur mobile */
    .step-content h3 {
        font-size: 1.2rem;
        margin-top: var(--space-sm);
    }
    
    .step-content p {
        font-size: 0.9rem;
    }
}

/* Ajustements pour très petits écrans */
@media (max-width: 480px) {
    .process-steps {
        padding: 0;
    }
    
    .step-card {
        padding: var(--space-md);
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}