/**
 * Timeline Blocker Styles - VikAppCommunes
 * Palette: #C604BC, #2D3436, #FAFAFA, #008999
 * Typographie: Playfair Display/Raleway
 */

/* Import des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Raleway:wght@300;400;500;600&display=swap');

/* Variables CSS pour la palette de couleurs */
:root {
    --primary-purple: #C604BC;
    --dark-gray: #2D3436;
    --light-gray: #FAFAFA;
    --teal: #008999;
    --white: #ffffff;
    --shadow-light: rgba(45, 52, 54, 0.1);
    --shadow-medium: rgba(45, 52, 54, 0.15);
    --shadow-strong: rgba(45, 52, 54, 0.25);
}

/* Conteneur principal du message d'erreur */
.vap-blocked-timeline {
    padding: 50px 30px !important;
    text-align: center !important;
    background: linear-gradient(135deg, var(--light-gray) 0%, #f1f2f6 100%) !important;
    border: 3px solid var(--primary-purple) !important;
    border-radius: 16px !important;
    margin: 40px 0 !important;
    box-shadow: 0 8px 25px var(--shadow-medium) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Effet de brillance subtil */
.vap-blocked-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(198, 4, 188, 0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Conteneur du contenu */
.vap-blocked-content {
    margin-bottom: 40px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Icône d'avertissement */
.vap-blocked-icon {
    font-size: 64px !important;
    color: var(--primary-purple) !important;
    margin-bottom: 25px !important;
    text-shadow: 0 3px 6px var(--shadow-light) !important;
    animation: pulse 2s infinite !important;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Titre principal */
.vap-blocked-title {
    color: var(--dark-gray) !important;
    margin: 0 0 20px 0 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    font-family: 'Playfair Display', serif !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 4px var(--shadow-light) !important;
}

/* Texte principal */
.vap-blocked-text {
    color: var(--dark-gray) !important;
    margin: 0 0 15px 0 !important;
    font-size: 20px !important;
    line-height: 1.6 !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 500 !important;
}

/* Nom de la commune en surbrillance */
.vap-blocked-commune {
    color: var(--primary-purple) !important;
    font-weight: 600 !important;
}

/* Texte secondaire */
.vap-blocked-subtext {
    color: var(--teal) !important;
    margin: 0 0 40px 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
}

/* Conteneur des boutons */
.vap-blocked-actions {
    position: relative !important;
    z-index: 2 !important;
}

/* Bouton principal */
.vap-blocked-btn {
    background: linear-gradient(135deg, var(--teal) 0%, #006b75 100%) !important;
    color: var(--white) !important;
    border: none !important;
    padding: 18px 36px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Raleway', sans-serif !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 137, 153, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Effet de survol du bouton */
.vap-blocked-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 137, 153, 0.4) !important;
    background: linear-gradient(135deg, #009aab 0%, var(--teal) 100%) !important;
}

/* Effet de clic du bouton */
.vap-blocked-btn:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(0, 137, 153, 0.3) !important;
}

/* Icône dans le bouton */
.vap-blocked-btn-icon {
    margin-right: 12px !important;
    font-size: 18px !important;
}

/* Effet de brillance sur le bouton */
.vap-blocked-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.vap-blocked-btn:hover::before {
    left: 100%;
}

/* Styles pour masquer le calendrier */
.vap-calendar-hidden .vapallcaldiv,
.vap-calendar-hidden .vapcalendardiv,
.vap-calendar-hidden .vapcaltable,
.vap-calendar-hidden .vap-calendar-wrapper,
.vap-calendar-hidden .vap-calendar-container,
.vap-calendar-hidden .calendar-container,
.vap-calendar-hidden .calendar-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Animation d'apparition du message */
.vap-blocked-timeline {
    animation: fadeInUp 0.6s ease-out !important;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .vap-blocked-timeline {
        padding: 30px 20px !important;
        margin: 20px 0 !important;
    }
    
    .vap-blocked-title {
        font-size: 24px !important;
    }
    
    .vap-blocked-text {
        font-size: 18px !important;
    }
    
    .vap-blocked-btn {
        padding: 15px 25px !important;
        font-size: 14px !important;
    }
    
    .vap-blocked-icon {
        font-size: 48px !important;
    }
}

@media (max-width: 480px) {
    .vap-blocked-timeline {
        padding: 25px 15px !important;
    }
    
    .vap-blocked-title {
        font-size: 20px !important;
    }
    
    .vap-blocked-text {
        font-size: 16px !important;
    }
    
    .vap-blocked-subtext {
        font-size: 14px !important;
    }
}