/**
 * Cyberpunk H2 Global Styles
 *
 * Style global pour tous les h2 des modules Cyberpunk
 * Inspiré du titre FAQ avec gradient et séparateur animé
 */

/* ========================================
   H2 CYBERPUNK - STYLE GLOBAL
   ======================================== */

/* Cibler tous les h2 dans les modules Elementor Cyberpunk (sauf le titre FAQ qui a déjà ce style) */
.elementor-widget-kingsize_cta_section h2.cta-title,
.elementor-widget-kingsize_testimonials h2,
.elementor-widget-kingsize_how_it_works h2,
.elementor-widget-kingsize_events h2.events-title,
.elementor-widget-kingsize_gallery h2,
.elementor-widget-kingsize_cyberpunk_map h2,
.elementor-widget-kingsize_features_cards h2,
.elementor-widget-kingsize_stats_counter h2,
.elementor-widget-kingsize_cyberpunk_form h2.cyberpunk-form__title,
/* Aussi cibler les widgets Elementor standards avec h2 */
.elementor-widget-heading h2.elementor-heading-title,
.cyberpunk-module h2:not(.faq-title) {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 50px; /* 30px + 20px pour le décorateur */
    position: relative;
    text-align: center;
    display: block;
}

/* Appliquer le gradient au texte du titre */
.elementor-widget-kingsize_cta_section h2.cta-title,
.elementor-widget-kingsize_testimonials h2,
.elementor-widget-kingsize_how_it_works h2,
.elementor-widget-kingsize_events h2.events-title,
.elementor-widget-kingsize_gallery h2,
.elementor-widget-kingsize_cyberpunk_map h2,
.elementor-widget-kingsize_features_cards h2,
.elementor-widget-kingsize_stats_counter h2,
.elementor-widget-kingsize_cyberpunk_form h2.cyberpunk-form__title,
.elementor-widget-heading h2.elementor-heading-title,
.cyberpunk-module h2:not(.faq-title) {
    background: linear-gradient(135deg, #00D4E6, #7C4DFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback pour les navigateurs qui ne supportent pas background-clip: text */
@supports not (-webkit-background-clip: text) {
    .elementor-widget-kingsize_cta_section h2.cta-title,
    .elementor-widget-kingsize_testimonials h2,
    .elementor-widget-kingsize_how_it_works h2,
    .elementor-widget-kingsize_events h2.events-title,
    .elementor-widget-kingsize_gallery h2,
    .elementor-widget-kingsize_cyberpunk_map h2,
    .elementor-widget-kingsize_features_cards h2,
    .elementor-widget-kingsize_stats_counter h2,
    .elementor-widget-kingsize_cyberpunk_form h2.cyberpunk-form__title,
    .elementor-widget-heading h2.elementor-heading-title,
    .cyberpunk-module h2:not(.faq-title) {
        color: #00D4E6;
        -webkit-text-fill-color: unset;
    }
}

/* ========================================
   SÉPARATEUR DÉCORATIF ANIMÉ
   ======================================== */

/* Créer le séparateur avec ::after */
.elementor-widget-kingsize_cta_section h2.cta-title::after,
.elementor-widget-kingsize_testimonials h2::after,
.elementor-widget-kingsize_how_it_works h2::after,
.elementor-widget-kingsize_events h2.events-title::after,
.elementor-widget-kingsize_gallery h2::after,
.elementor-widget-kingsize_cyberpunk_map h2::after,
.elementor-widget-kingsize_features_cards h2::after,
.elementor-widget-kingsize_stats_counter h2::after,
.elementor-widget-kingsize_cyberpunk_form h2.cyberpunk-form__title::after,
.elementor-widget-heading h2.elementor-heading-title::after,
.cyberpunk-module h2:not(.faq-title)::after {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    /* Background avec les lignes */
    background-image:
        /* Ligne gauche */
        linear-gradient(90deg, transparent, #00D4E6),
        /* Ligne droite */
        linear-gradient(90deg, #00D4E6, transparent);
    background-size:
        60px 2px,  /* Ligne gauche */
        60px 2px;  /* Ligne droite */
    background-position:
        calc(50% - 40px) center, /* Ligne gauche */
        calc(50% + 40px) center; /* Ligne droite */
    background-repeat: no-repeat;
    height: 2px;
    position: relative;
}

/* Icône centrale (diamant) */
.elementor-widget-kingsize_cta_section h2.cta-title::before,
.elementor-widget-kingsize_testimonials h2::before,
.elementor-widget-kingsize_how_it_works h2::before,
.elementor-widget-kingsize_events h2.events-title::before,
.elementor-widget-kingsize_gallery h2::before,
.elementor-widget-kingsize_cyberpunk_map h2::before,
.elementor-widget-kingsize_features_cards h2::before,
.elementor-widget-kingsize_stats_counter h2::before,
.elementor-widget-kingsize_cyberpunk_form h2.cyberpunk-form__title::before,
.elementor-widget-heading h2.elementor-heading-title::before,
.cyberpunk-module h2:not(.faq-title)::before {
    content: '◆';
    color: #00D4E6;
    font-size: 1.5rem;
    display: block;
    text-align: center;
    margin-top: 20px;
    animation: iconRotate 4s linear infinite;
    position: relative;
    z-index: 1;
}

@keyframes iconRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Alternative avec DOM Structure (si JavaScript est disponible) */
/* Cette approche permet de créer la structure exacte comme dans le FAQ */

.h2-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.h2-deco-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00D4E6);
    position: relative;
}

.h2-deco-line.right {
    background: linear-gradient(90deg, #00D4E6, transparent);
}

.h2-deco-icon {
    color: #00D4E6;
    font-size: 1.5rem;
    animation: iconRotate 4s linear infinite;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .elementor-widget-kingsize_cta_section h2.cta-title,
    .elementor-widget-kingsize_testimonials h2,
    .elementor-widget-kingsize_how_it_works h2,
    .elementor-widget-kingsize_events h2.events-title,
    .elementor-widget-kingsize_gallery h2,
    .elementor-widget-kingsize_cyberpunk_map h2,
    .elementor-widget-kingsize_features_cards h2,
    .elementor-widget-kingsize_stats_counter h2,
    .elementor-widget-kingsize_cyberpunk_form h2.cyberpunk-form__title,
    .elementor-widget-heading h2.elementor-heading-title,
    .cyberpunk-module h2:not(.faq-title) {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
        margin-bottom: 40px;
    }

    .h2-deco-line {
        width: 40px;
    }

    .h2-deco-icon {
        font-size: 1.2rem;
    }
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .elementor-widget-kingsize_cta_section h2.cta-title::before,
    .elementor-widget-kingsize_testimonials h2::before,
    .elementor-widget-kingsize_how_it_works h2::before,
    .elementor-widget-kingsize_events h2.events-title::before,
    .elementor-widget-kingsize_gallery h2::before,
    .elementor-widget-kingsize_cyberpunk_map h2::before,
    .elementor-widget-kingsize_features_cards h2::before,
    .elementor-widget-kingsize_stats_counter h2::before,
    .elementor-widget-kingsize_cyberpunk_form h2.cyberpunk-form__title::before,
    .elementor-widget-heading h2.elementor-heading-title::before,
    .cyberpunk-module h2:not(.faq-title)::before,
    .h2-deco-icon {
        animation: none !important;
    }
}