/* CSS responsive pour le système d'onglets tours */
/* Importation des variables globales */
@import url('variables.css');

/* Reset de base */
.vt-tour-tabs-container * {
    box-sizing: border-box;
}

/* Container principal */
.vt-tour-tabs-container {
    width: 100%;
    margin-bottom: var(--space-xl);
    font-family: inherit;
}

/* Styles pour les boutons d'onglets - version desktop */
.vt-tour-tabs-desktop {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--primary);
}

.vt-tour-tabs-desktop .vt-tour-tab-button {
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--light-gray-2);
    border: 1px solid var(--primary);
    border-bottom: none;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    margin-right: var(--space-xs);
    margin-bottom: -1px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 600;
    font-size: 16px;
    color: var(--primary); /* Utiliser la couleur principale */
}

.vt-tour-tabs-desktop .vt-tour-tab-button:hover {
    background-color: var(--primary-very-light);
    color: var(--primary-dark);
}

.vt-tour-tabs-desktop .vt-tour-tab-button.active {
    background-color: var(--white);
    color: var(--primary);
    border-bottom: 1px solid var(--white);
}

/* Version mobile - cachée par défaut */
.vt-tour-tabs-mobile {
    display: none;
}

/* Contenu des onglets */
.vt-tour-tabs-content-desktop .vt-tour-tab-content {
    display: none;
    padding: var(--space-lg);
    background-color: var(--white);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.vt-tour-tabs-content-desktop .vt-tour-tab-content.active {
    display: block;
}

/* Styles pour l'itinéraire */
.vt-tour-itineraire-liste {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.vt-tour-itineraire-item {
    margin-bottom: 25px;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--gray-1);
}

.vt-tour-itineraire-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.vt-tour-itineraire-titre {
    font-size: 1.2rem;
    margin-bottom: var(--space-sm);
    color: var(--primary-blue);
    border-left: 4px solid var(--primary-green);
    padding-left: var(--space-md);
}

.vt-tour-itineraire-description {
    margin-left: var(--space-lg);
    color: var(--text-dark);
    line-height: 1.6;
}

/* Styles pour la section tarif */
.vt-tour-tarif {
    background-color: var(--light-gray-1);
    border-radius: var(--border-radius-md);
    padding: var(--space-lg);
    margin-bottom: 25px;
    text-align: center;
    border: 1px solid var(--gray-1);
}

.vt-tour-tarif-price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-green);
}

.vt-tour-tarif-duration {
    color: var(--gray-3);
    margin-top: var(--space-xs);
    font-size: 1.1rem;
}

/* Styles pour les inclusions/exclusions */
.vt-tour-features-container {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-lg);
}

.vt-tour-features-column {
    flex: 0 0 48%;
    background-color: var(--light-gray-1);
    border-radius: var(--border-radius-md);
    padding: var(--space-lg);
    border: 1px solid var(--gray-1);
}

.vt-tour-features-column h3 {
    margin-top: 0;
    color: var(--primary-blue);
    border-bottom: 2px solid var(--primary-green);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
}

.vt-tour-features-column ul {
    margin: 0;
    padding-left: var(--space-lg);
}

.vt-tour-features-column li {
    margin-bottom: var(--space-xs);
    color: var(--text-dark);
}

.vt-tour-inclusions h3 {
    color: var(--primary-green-dark);
}

.vt-tour-exclusions h3 {
    color: var(--accent-red);
}

/* Styles responsive */
@media (max-width: 768px) {
    /* Conteneur principal avec moins de padding sur mobile */
    .vt-tour-tabs-container {
        padding: 0;
    }
    
    /* Cacher version desktop, montrer version mobile */
    .vt-tour-tabs-desktop, .vt-tour-tabs-content-desktop {
        display: none;
    }
    
    .vt-tour-tabs-mobile {
        display: block;
    }
    
    /* Style des sections d'onglets mobile */
    .vt-tour-tab-section {
        margin-bottom: var(--space-sm);
    }
    
    /* Style des boutons d'onglets */
    .vt-tour-tab-button {
        display: block;
        width: 100%;
        background-color: var(--primary); /* Utilisation de la couleur principale */
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
        border: 1px solid var(--primary-dark);
        text-align: left;
        padding: var(--space-md);
        position: relative;
        z-index: 1;
        font-size: 16px;
        color: var(--white); /* Texte blanc */
        margin: 0;
        font-weight: 600;
    }
    
    /* Quand l'onglet n'est pas actif, arrondir tous les coins */
    .vt-tour-tab-section:not(:has(.vt-tour-tab-button.active)) .vt-tour-tab-button {
        border-radius: var(--border-radius-md);
    }
    
    /* Signe + pour onglets */
    .vt-tour-tab-button:after {
        content: '+';
        position: absolute;
        right: var(--space-md);
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: var(--white); /* Couleur du signe + en blanc */
    }
    
    /* Onglet actif */
    .vt-tour-tab-button.active {
        background-color: var(--white); /* Fond blanc pour l'onglet actif */
        color: var(--primary); /* Texte avec couleur principale */
        border-bottom: none;
        border-color: var(--primary);
    }
    
    /* Changer en signe - pour l'onglet ouvert */
    .vt-tour-tab-button.active:after {
        content: '\2212'; /* Signe moins en Unicode */
    }
    
    /* Style du contenu des onglets */
    .vt-tour-tab-content {
        border: 1px solid var(--gray-2);
        border-top: none;
        padding: var(--space-md);
        background-color: var(--white);
        border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
        display: none;
        box-shadow: 0 2px 5px var(--shadow-light);
    }
    
    /* Affichage du contenu actif */
    .vt-tour-tab-content.active {
        display: block;
    }
    
    /* Cacher le contenu quand le bouton n'est pas actif */
    .vt-tour-tab-section:not(:has(.vt-tour-tab-button.active)) .vt-tour-tab-content {
        display: none;
    }
    
    /* Styles spécifiques pour l'itinéraire en mobile */
    .vt-tour-itineraire-liste {
        margin: 0;
    }
    
    .vt-tour-itineraire-item {
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-md);
        border-bottom: 1px solid var(--gray-1);
    }
    
    .vt-tour-itineraire-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    .vt-tour-itineraire-titre {
        font-size: 1.1rem;
        padding-left: var(--space-sm);
        margin-top: 0;
        color: var(--primary-blue);
    }
    
    .vt-tour-itineraire-description {
        padding-left: var(--space-sm);
    }
    
    /* Adaptation pour les sections inclus/non inclus */
    .vt-tour-features-container {
        flex-direction: column;
        margin-top: var(--space-sm);
    }
    
    .vt-tour-features-column {
        margin-bottom: var(--space-md);
        width: 100%;
        padding: var(--space-md);
    }
    
    /* Ajustement pour le tarif */
    .vt-tour-tarif {
        padding: var(--space-sm);
        margin: var(--space-md) 0 var(--space-lg);
    }
    
    .vt-tour-tarif-price {
        font-size: 1.8rem;
    }
    
    /* Règles explicites pour l'affichage des contenus en mode mobile */
    .vt-tour-tabs-mobile .vt-tour-tab-content {
        display: none; /* Par défaut, tous les contenus sont masqués */
    }
    
    .vt-tour-tabs-mobile .vt-tour-tab-content.active {
        display: block; /* Afficher uniquement le contenu actif */
    }
}