/**
 * Styles pour le comparateur de services responsive
 */

/* Styles pour la navigation mobile du comparateur */
.comparateur-nav-controls {
    display: none; /* Masqué par défaut, affiché en JS sur mobile */
    margin: 20px auto;
    text-align: center;
}

.comparateur-nav-controls .service-indicator {
    margin: 0 10px;
    font-weight: 600;
    color: var(--color-text);
}

/* Sur mobile, ajuster l'affichage du tableau */
@media (max-width: 767.98px) {
    .comparateur-solutions table {
        table-layout: fixed;
        width: 100%;
    }
    
    .comparateur-solutions .module-name {
        width: 50%;
    }
    
    .comparateur-solutions .module-status,
    .comparateur-solutions .service-header,
    .comparateur-solutions .service-footer {
        width: 50%;
    }
    
    /* Animation de transition entre les services */
    .comparateur-solutions .service-header,
    .comparateur-solutions .module-status,
    .comparateur-solutions .service-footer {
        transition: opacity 0.3s ease;
    }
}

/* Styles pour les boutons de navigation */
.comparateur-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-text-invert);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.comparateur-nav-btn:hover {
    background-color: var(--color-secondary);
}

.comparateur-nav-btn i {
    font-size: 20px;
}