{"id":15,"date":"2025-04-26T00:31:10","date_gmt":"2025-04-26T00:31:10","guid":{"rendered":"https:\/\/choralclash.com\/?page_id=15"},"modified":"2026-01-27T14:34:17","modified_gmt":"2026-01-27T14:34:17","slug":"home","status":"publish","type":"page","link":"https:\/\/choralclash.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"15\" class=\"elementor elementor-15\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d90217 e-flex e-con-boxed e-con e-parent\" data-id=\"8d90217\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5475b2c elementor-widget elementor-widget-html\" data-id=\"5475b2c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* ============================================\n   HERO SECTION - VARIABLES & FONTS\n============================================ *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap');\n\n.cc-hero {\n    --primary-magenta: #E91E8C;\n    --primary-orange: #FF6B35;\n    --accent-gold: #FFD700;\n    --dark-bg: #0A0A0A;\n    --text-white: #FFFFFF;\n    --text-gray: #888888;\n    --text-light: #CCCCCC;\n}\n\n\/* ============================================\n   ANIMATIONS\n============================================ *\/\n@keyframes cc-slideMarquee {\n    0% {\n        transform: translateX(0);\n    }\n    100% {\n        transform: translateX(-50%);\n    }\n}\n\n@keyframes cc-fadeInUp {\n    from {\n        opacity: 0;\n        transform: translateY(60px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@keyframes cc-fadeInRight {\n    from {\n        opacity: 0;\n        transform: translateX(60px);\n    }\n    to {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n\/* ============================================\n   HERO CONTAINER\n============================================ *\/\n.cc-hero {\n    min-height: 100vh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    font-family: 'Space Grotesk', sans-serif;\n    background-color: var(--dark-bg);\n    color: var(--text-white);\n}\n\n\/* Background *\/\n.cc-hero-bg {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n}\n\n.cc-hero-bg-image {\n    position: absolute;\n    inset: 0;\n    background: url('https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8279-scaled.jpg') center\/cover no-repeat;\n    opacity: 0.75;\n    transition: transform 0.3s ease;\n}\n\n.cc-hero-bg-gradient {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(135deg, \n        rgba(255, 107, 53, 0.5) 0%, \n        rgba(233, 30, 140, 0.35) 30%, \n        rgba(10, 10, 10, 0.85) 70%,\n        rgba(10, 10, 10, 0.95) 100%);\n}\n\n\/* Transition fluide vers section suivante *\/\n.cc-hero-bg-fade-bottom {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 250px;\n    background: linear-gradient(\n        to bottom,\n        transparent 0%,\n        rgba(10, 10, 10, 0.3) 30%,\n        rgba(10, 10, 10, 0.7) 60%,\n        rgba(10, 10, 10, 1) 100%\n    );\n    z-index: 1;\n    pointer-events: none;\n}\n\n\/* ============================================\n   EPISODE SLIDER\n============================================ *\/\n.cc-hero-slider-wrapper {\n    position: relative;\n    z-index: 10;\n    padding-top: 40px;\n    overflow: hidden;\n    border-bottom: 1px solid rgba(255,255,255,0.1);\n}\n\n.cc-hero-slider {\n    display: flex;\n    animation: cc-slideMarquee 40s linear infinite;\n    width: max-content;\n}\n\n.cc-hero-slider:hover {\n    animation-play-state: paused;\n}\n\n\/* Drag styles *\/\n.cc-hero-slider {\n    cursor: grab;\n    user-select: none;\n}\n\n.cc-hero-slider.cc-dragging {\n    cursor: grabbing;\n}\n\n.cc-hero-slider.cc-dragging .cc-episode-card {\n    pointer-events: none;\n}\n\n.cc-hero-slider-track {\n    display: flex;\n    gap: 0;\n}\n\n\/* Episode Cards *\/\n.cc-episode-card {\n    min-width: 320px;\n    padding: 30px 40px;\n    border-right: 1px solid rgba(255,255,255,0.1);\n    cursor: pointer;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    position: relative;\n    overflow: hidden;\n}\n\n.cc-episode-card::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(233, 30, 140, 0.2) 100%);\n    opacity: 0;\n    transition: opacity 0.4s ease;\n}\n\n.cc-episode-card:hover::before {\n    opacity: 1;\n}\n\n.cc-episode-card:hover {\n    background: rgba(255,255,255,0.05);\n}\n\n.cc-episode-card:hover .cc-episode-date {\n    transform: scale(1.1);\n    color: var(--accent-gold);\n}\n\n.cc-episode-card:hover .cc-episode-icon {\n    transform: rotate(90deg);\n    opacity: 1;\n}\n\n.cc-episode-card:hover .cc-episode-line {\n    width: 60px;\n    background: var(--accent-gold);\n}\n\n.cc-episode-number {\n    font-family: 'Space Mono', monospace;\n    font-size: 12px;\n    color: var(--accent-gold);\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 8px;\n    display: block;\n}\n\n.cc-episode-date {\n    font-family: 'Space Mono', monospace;\n    font-size: 48px;\n    font-weight: 700;\n    line-height: 1;\n    margin-bottom: 16px;\n    transition: all 0.4s ease;\n    position: relative;\n    display: inline-block;\n    color: var(--text-white);\n}\n\n.cc-episode-title {\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 8px;\n    line-height: 1.4;\n    color: var(--text-white);\n}\n\n.cc-episode-info {\n    font-family: 'Space Mono', monospace;\n    font-size: 12px;\n    color: var(--text-gray);\n    margin-bottom: 16px;\n}\n\n.cc-episode-footer {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.cc-episode-line {\n    width: 30px;\n    height: 2px;\n    background: var(--text-gray);\n    transition: all 0.4s ease;\n}\n\n.cc-episode-icon {\n    font-size: 16px;\n    opacity: 0.5;\n    transition: all 0.4s ease;\n}\n\n\/* Finale Special Styling *\/\n.cc-episode-card.cc-finale {\n    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%);\n    border-right: 3px solid var(--accent-gold);\n}\n\n.cc-episode-card.cc-finale .cc-episode-number,\n.cc-episode-card.cc-finale .cc-episode-date {\n    color: var(--accent-gold);\n}\n\n.cc-episode-card.cc-finale .cc-episode-line {\n    background: var(--accent-gold);\n}\n\n\/* ============================================\n   HERO MAIN CONTENT\n============================================ *\/\n.cc-hero-main {\n    flex: 1;\n    display: flex;\n    align-items: flex-end;\n    padding-bottom: 120px;\n    position: relative;\n    z-index: 2;\n}\n\n.cc-hero-content {\n    width: 100%;\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 40px;\n}\n\n.cc-hero-top {\n    display: flex;\n    justify-content: flex-end;\n    margin-bottom: 40px;\n}\n\n\/* Stats *\/\n.cc-hero-stat {\n    text-align: right;\n    animation: cc-fadeInRight 1s ease-out 0.5s both;\n}\n\n.cc-hero-stat-number {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: 140px;\n    line-height: 0.85;\n    letter-spacing: -2px;\n    background: linear-gradient(180deg, var(--text-white) 0%, rgba(255,255,255,0.4) 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n}\n\n.cc-hero-stat-text {\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    color: var(--text-light);\n    max-width: 300px;\n    margin-left: auto;\n    line-height: 1.7;\n}\n\n\/* Title *\/\n.cc-hero-title-wrapper {\n    position: relative;\n}\n\n.cc-hero-title {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(50px, 15vw, 180px);\n    line-height: 0.85;\n    letter-spacing: -2px;\n    text-transform: uppercase;\n    animation: cc-fadeInUp 1s ease-out 0.3s both;\n    margin: 0;\n    padding: 0;\n}\n\n.cc-hero-title span {\n    display: block;\n}\n\n.cc-hero-title .cc-outline {\n    -webkit-text-stroke: 2px var(--text-white);\n    -webkit-text-fill-color: transparent;\n}\n\n\/* CTA Button *\/\n.cc-hero-cta {\n    position: absolute;\n    right: 0;\n    bottom: 30px;\n    animation: cc-fadeInRight 1s ease-out 0.8s both;\n}\n\n.cc-hero-cta-btn {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    background: var(--text-white);\n    color: var(--dark-bg);\n    padding: 24px 40px;\n    text-decoration: none;\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    transition: all 0.4s ease;\n    position: relative;\n    overflow: hidden;\n}\n\n.cc-hero-cta-btn::before {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 10px;\n    height: 100%;\n    background: var(--primary-magenta);\n}\n\n.cc-hero-cta-btn:hover {\n    transform: translateX(-10px);\n    box-shadow: 10px 0 30px rgba(233, 30, 140, 0.5);\n    color: var(--dark-bg);\n}\n\n.cc-hero-cta-btn .cc-arrow {\n    transition: transform 0.3s ease;\n}\n\n.cc-hero-cta-btn:hover .cc-arrow {\n    transform: translateX(5px);\n}\n\n\/* ============================================\n   RESPONSIVE\n============================================ *\/\n@media (max-width: 1200px) {\n    .cc-episode-card {\n        min-width: 280px;\n        padding: 30px 40px;\n    }\n}\n\n@media (max-width: 1024px) {\n    .cc-hero-top {\n        flex-direction: column;\n        gap: 40px;\n    }\n\n    .cc-hero-stat {\n        text-align: left;\n    }\n\n    .cc-hero-stat-text {\n        margin-left: 0;\n    }\n\n    .cc-hero-cta {\n        position: relative;\n        margin-top: 40px;\n    }\n\n    .cc-episode-card {\n        min-width: 260px;\n        padding: 25px 35px;\n    }\n\n    .cc-episode-date {\n        font-size: 36px;\n    }\n\n    .cc-hero-main {\n        padding-bottom: 100px;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-hero-content {\n        padding: 0 20px;\n    }\n\n    .cc-hero-stat-number {\n        font-size: 80px;\n    }\n\n    .cc-episode-card {\n        min-width: 240px;\n        padding: 20px 30px;\n    }\n\n    .cc-episode-date {\n        font-size: 32px;\n    }\n\n    .cc-hero-cta-btn {\n        padding: 18px 30px;\n        font-size: 12px;\n    }\n\n    .cc-hero-main {\n        padding-bottom: 80px;\n    }\n\n    .cc-hero-bg-fade-bottom {\n        height: 180px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-hero-title {\n        font-size: 60px;\n    }\n\n    .cc-hero-stat-number {\n        font-size: 60px;\n    }\n\n    .cc-episode-card {\n        min-width: 220px;\n        padding: 20px 25px;\n    }\n\n    .cc-episode-date {\n        font-size: 28px;\n    }\n\n    .cc-episode-title {\n        font-size: 12px;\n    }\n\n    .cc-hero-main {\n        padding-bottom: 60px;\n    }\n\n    .cc-hero-bg-fade-bottom {\n        height: 150px;\n    }\n}\n<\/style>\n\n<!-- HERO SECTION -->\n<section class=\"cc-hero\" id=\"cc-hero\">\n    <div class=\"cc-hero-bg\">\n        <div class=\"cc-hero-bg-image\"><\/div>\n        <div class=\"cc-hero-bg-gradient\"><\/div>\n        <div class=\"cc-hero-bg-fade-bottom\"><\/div>\n    <\/div>\n\n<!-- Episode Slider -->\n<div class=\"cc-hero-slider-wrapper\" id=\"episodes\">\n    <div class=\"cc-hero-slider\">\n        <div class=\"cc-hero-slider-track\">\n            <!-- \u00c9pisode 1 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 1<\/span>\n                <div class=\"cc-episode-date\">05\/04<\/div>\n                <div class=\"cc-episode-title\">Round 1 - The Journey Begins<\/div>\n                <div class=\"cc-episode-info\">[5 April 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 2 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 2<\/span>\n                <div class=\"cc-episode-date\">12\/04<\/div>\n                <div class=\"cc-episode-title\">Round 2 - Raise the Bar<\/div>\n                <div class=\"cc-episode-info\">[12 April 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 3 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 3<\/span>\n                <div class=\"cc-episode-date\">19\/04<\/div>\n                <div class=\"cc-episode-title\">Makossa Night<\/div>\n                <div class=\"cc-episode-info\">[19 April 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 4 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 4<\/span>\n                <div class=\"cc-episode-date\">26\/04<\/div>\n                <div class=\"cc-episode-title\">Cameroon Pop Vibes<\/div>\n                <div class=\"cc-episode-info\">[26 April 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 5 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 5<\/span>\n                <div class=\"cc-episode-date\">03\/05<\/div>\n                <div class=\"cc-episode-title\">Reggae Night<\/div>\n                <div class=\"cc-episode-info\">[3 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 6 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 6<\/span>\n                <div class=\"cc-episode-date\">10\/05<\/div>\n                <div class=\"cc-episode-title\">Gospel Night<\/div>\n                <div class=\"cc-episode-info\">[10 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 7 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 7<\/span>\n                <div class=\"cc-episode-date\">17\/05<\/div>\n                <div class=\"cc-episode-title\">Soul Night<\/div>\n                <div class=\"cc-episode-info\">[17 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 8 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 8<\/span>\n                <div class=\"cc-episode-date\">24\/05<\/div>\n                <div class=\"cc-episode-title\">Quarterfinals \/ Semi-Finals<\/div>\n                <div class=\"cc-episode-info\">[24 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 9 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 9<\/span>\n                <div class=\"cc-episode-date\">31\/05<\/div>\n                <div class=\"cc-episode-title\">Build-Up Week Special<\/div>\n                <div class=\"cc-episode-info\">[31 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 10 - Grande Finale -->\n            <div class=\"cc-episode-card cc-finale\">\n                <span class=\"cc-episode-number\">Ep. 10 - FINAL<\/span>\n                <div class=\"cc-episode-date\">07\/06<\/div>\n                <div class=\"cc-episode-title\">Grand Finale<\/div>\n                <div class=\"cc-episode-info\">[7 June 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2605<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Duplicate pour scroll infini -->\n        <div class=\"cc-hero-slider-track\">\n            <!-- \u00c9pisode 1 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 1<\/span>\n                <div class=\"cc-episode-date\">05\/04<\/div>\n                <div class=\"cc-episode-title\">Round 1 - The Journey Begins<\/div>\n                <div class=\"cc-episode-info\">[5 April 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 2 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 2<\/span>\n                <div class=\"cc-episode-date\">12\/04<\/div>\n                <div class=\"cc-episode-title\">Round 2 - Raise the Bar<\/div>\n                <div class=\"cc-episode-info\">[12 April 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 3 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 3<\/span>\n                <div class=\"cc-episode-date\">19\/04<\/div>\n                <div class=\"cc-episode-title\">Makossa Night<\/div>\n                <div class=\"cc-episode-info\">[19 April 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 4 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 4<\/span>\n                <div class=\"cc-episode-date\">26\/04<\/div>\n                <div class=\"cc-episode-title\">Cameroon Pop Vibes<\/div>\n                <div class=\"cc-episode-info\">[26 April 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 5 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 5<\/span>\n                <div class=\"cc-episode-date\">03\/05<\/div>\n                <div class=\"cc-episode-title\">Reggae Night<\/div>\n                <div class=\"cc-episode-info\">[3 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 6 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 6<\/span>\n                <div class=\"cc-episode-date\">10\/05<\/div>\n                <div class=\"cc-episode-title\">Gospel Night<\/div>\n                <div class=\"cc-episode-info\">[10 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 7 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 7<\/span>\n                <div class=\"cc-episode-date\">17\/05<\/div>\n                <div class=\"cc-episode-title\">Soul Night<\/div>\n                <div class=\"cc-episode-info\">[17 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 8 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 8<\/span>\n                <div class=\"cc-episode-date\">24\/05<\/div>\n                <div class=\"cc-episode-title\">Quarterfinals \/ Semi-Finals<\/div>\n                <div class=\"cc-episode-info\">[24 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 9 -->\n            <div class=\"cc-episode-card\">\n                <span class=\"cc-episode-number\">Ep. 9<\/span>\n                <div class=\"cc-episode-date\">31\/05<\/div>\n                <div class=\"cc-episode-title\">Build-Up Week Special<\/div>\n                <div class=\"cc-episode-info\">[31 May 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- \u00c9pisode 10 - Grande Finale -->\n            <div class=\"cc-episode-card cc-finale\">\n                <span class=\"cc-episode-number\">Ep. 10 - FINAL<\/span>\n                <div class=\"cc-episode-date\">07\/06<\/div>\n                <div class=\"cc-episode-title\">Grand Finale<\/div>\n                <div class=\"cc-episode-info\">[7 June 2026 | 19h00]<\/div>\n                <div class=\"cc-episode-footer\">\n                    <span class=\"cc-episode-line\"><\/span>\n                    <span class=\"cc-episode-icon\">\u2605<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n    <!-- Hero Main Content -->\n    <div class=\"cc-hero-main\">\n        <div class=\"cc-hero-content\">\n            <div class=\"cc-hero-top\">\n                <div class=\"cc-hero-stat\">\n                    <div class=\"cc-hero-stat-number\">12+<\/div>\n                    <div class=\"cc-hero-stat-text\">Choirs selected from all over Cameroon for the historic first season of Choral Clash.<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"cc-hero-title-wrapper\">\n                <h1 class=\"cc-hero-title\">\n                    <span>THE NEW VOICE<\/span>\n                    <span class=\"cc-outline\">CAMEROON<\/span>\n                <\/h1>\n                <div class=\"cc-hero-cta\">\n                    <a href=\"https:\/\/choralclash.com\/en\/register-your-choir\/\" class=\"cc-hero-cta-btn\">\n                        <span>Register at<\/span>\n                        <span class=\"cc-arrow\">\u2192<\/span>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Script pour drag functionality sur le slider -->\n<script>\n(function() {\n    const slider = document.querySelector('.cc-hero-slider');\n    if (!slider) return;\n    \n    let isDown = false;\n    let startX;\n    let currentTransform = 0;\n\n    \/\/ R\u00e9cup\u00e9rer la position actuelle de l'animation\n    function getCurrentTransform() {\n        const style = window.getComputedStyle(slider);\n        const matrix = new DOMMatrix(style.transform);\n        return matrix.m41;\n    }\n\n    \/\/ Mouse events\n    slider.addEventListener('mousedown', (e) => {\n        isDown = true;\n        slider.classList.add('cc-dragging');\n        currentTransform = getCurrentTransform();\n        startX = e.pageX;\n        slider.style.transform = `translateX(${currentTransform}px)`;\n        slider.style.animation = 'none';\n    });\n\n    slider.addEventListener('mouseleave', () => {\n        if (isDown) {\n            isDown = false;\n            slider.classList.remove('cc-dragging');\n            resumeAnimation();\n        }\n    });\n\n    slider.addEventListener('mouseup', () => {\n        isDown = false;\n        slider.classList.remove('cc-dragging');\n        resumeAnimation();\n    });\n\n    slider.addEventListener('mousemove', (e) => {\n        if (!isDown) return;\n        e.preventDefault();\n        const x = e.pageX;\n        const walk = (x - startX) * 2.5; \/\/ Vitesse de glissement\n        slider.style.transform = `translateX(${currentTransform + walk}px)`;\n    });\n\n    \/\/ Touch events pour mobile\n    slider.addEventListener('touchstart', (e) => {\n        isDown = true;\n        slider.classList.add('cc-dragging');\n        currentTransform = getCurrentTransform();\n        startX = e.touches[0].pageX;\n        slider.style.transform = `translateX(${currentTransform}px)`;\n        slider.style.animation = 'none';\n    }, { passive: true });\n\n    slider.addEventListener('touchend', () => {\n        isDown = false;\n        slider.classList.remove('cc-dragging');\n        resumeAnimation();\n    });\n\n    slider.addEventListener('touchmove', (e) => {\n        if (!isDown) return;\n        const x = e.touches[0].pageX;\n        const walk = (x - startX) * 2.5;\n        slider.style.transform = `translateX(${currentTransform + walk}px)`;\n    }, { passive: true });\n\n    \/\/ Reprendre l'animation apr\u00e8s le drag\n    function resumeAnimation() {\n        const finalTransform = getCurrentTransform();\n        const sliderWidth = slider.scrollWidth \/ 2;\n        \n        \/\/ Normaliser la position\n        let normalizedPos = finalTransform % sliderWidth;\n        if (normalizedPos > 0) normalizedPos -= sliderWidth;\n        \n        \/\/ Calculer le pourcentage de progression\n        const progress = Math.abs(normalizedPos \/ sliderWidth) * 100;\n        \n        \/\/ Reprendre l'animation\n        slider.style.animation = `cc-slideMarquee 40s linear infinite`;\n        slider.style.animationDelay = `-${progress * 0.40}s`;\n        slider.style.transform = '';\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-82dd0fe e-flex e-con-boxed e-con e-parent\" data-id=\"82dd0fe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3271431 elementor-widget elementor-widget-html\" data-id=\"3271431\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* ============================================\n   INTRO SECTION - CHORAL CLASH\n============================================ *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap');\n\n.cc-intro {\n    --primary-magenta: #E91E8C;\n    --primary-orange: #FF6B35;\n    --accent-gold: #FFD700;\n    --dark-bg: #0A0A0A;\n    --text-white: #FFFFFF;\n    --text-gray: #888888;\n    --text-light: #CCCCCC;\n}\n\n\/* ============================================\n   ANIMATIONS\n============================================ *\/\n@keyframes cc-fadeInUp {\n    from {\n        opacity: 0;\n        transform: translateY(60px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@keyframes cc-float {\n    0%, 100% {\n        transform: translateY(0);\n    }\n    50% {\n        transform: translateY(-15px);\n    }\n}\n\n@keyframes cc-floatAlt {\n    0%, 100% {\n        transform: translateY(0) rotate(0deg);\n    }\n    50% {\n        transform: translateY(-10px) rotate(2deg);\n    }\n}\n\n.cc-animate {\n    opacity: 0;\n    transform: translateY(50px);\n    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.cc-animate.cc-visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n\/* ============================================\n   INTRO CONTAINER\n============================================ *\/\n.cc-intro {\n    padding: 50px 0;\n    position: relative;\n    overflow: hidden;\n    background-color: var(--dark-bg);\n    font-family: 'Space Grotesk', sans-serif;\n    color: var(--text-white);\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n}\n\n.cc-intro-wrapper {\n    max-width: 1600px;\n    margin: 0 auto;\n    padding: 0 40px;\n    position: relative;\n    width: 100%;\n}\n\n.cc-intro-container {\n    max-width: 750px;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n    z-index: 2;\n}\n\n\/* Subtitle *\/\n.cc-intro-subtitle {\n    font-family: 'Space Mono', monospace;\n    font-size: 12px;\n    color: var(--text-gray);\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    margin-bottom: 32px;\n}\n\n\/* Main Title *\/\n.cc-intro-title {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(28px, 4vw, 48px);\n    line-height: 1.15;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin: 0 auto 48px;\n}\n\n\/* CTA Button *\/\n.cc-intro-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    background: transparent;\n    border: 2px solid var(--text-white);\n    color: var(--text-white);\n    padding: 16px 32px;\n    text-decoration: none;\n    font-family: 'Space Mono', monospace;\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    transition: all 0.4s ease;\n}\n\n.cc-intro-btn:hover {\n    background: var(--text-white);\n    color: var(--dark-bg);\n}\n\n.cc-intro-btn svg {\n    transition: transform 0.3s ease;\n}\n\n.cc-intro-btn:hover svg {\n    transform: translateX(5px);\n}\n\n\/* ============================================\n   FLOATING IMAGES\n============================================ *\/\n.cc-intro-images {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-intro-img {\n    position: absolute;\n    overflow: hidden;\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);\n    pointer-events: auto;\n}\n\n.cc-intro-img img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.5s ease;\n}\n\n.cc-intro-img:hover img {\n    transform: scale(1.05);\n}\n\n\/* ============================================\n   IMAGES - Positions ajust\u00e9es\n============================================ *\/\n\n\/* Image 1 - Haut gauche extr\u00eame *\/\n.cc-intro-img-1 {\n    top: -50px;\n    left: 6%;\n    width: 130px;\n    height: 170px;\n    animation: cc-float 6s ease-in-out infinite;\n}\n\n\/* Image 2 - Haut centre-gauche *\/\n.cc-intro-img-2 {\n    top: -180px;\n    left: 28%;\n    width: 115px;\n    height: 140px;\n    animation: cc-floatAlt 7s ease-in-out infinite;\n    animation-delay: 0.5s;\n}\n\n\/* Image 3 - Haut centre *\/\n.cc-intro-img-3 {\n    top: -190px;\n    left: 48%;\n    width: 125px;\n    height: 95px;\n    animation: cc-float 8s ease-in-out infinite;\n    animation-delay: 1s;\n}\n\n\/* Image 4 - Haut centre-droite *\/\n.cc-intro-img-4 {\n    top: -200px;\n    right: 18%;\n    width: 130px;\n    height: 160px;\n    animation: cc-floatAlt 6s ease-in-out infinite;\n    animation-delay: 1.5s;\n}\n\n\/* Image 5 - Haut droite extr\u00eame *\/\n.cc-intro-img-5 {\n    top: 20px;\n    right: 5%;\n    width: 145px;\n    height: 185px;\n    animation: cc-float 7s ease-in-out infinite;\n    animation-delay: 2s;\n}\n\n\/* Image 6 - Bas gauche extr\u00eame *\/\n.cc-intro-img-6 {\n    bottom: -20px;\n    left: 2%;\n    width: 130px;\n    height: 170px;\n    animation: cc-floatAlt 8s ease-in-out infinite;\n    animation-delay: 0.3s;\n}\n\n\/* Image 7 - Bas centre-gauche *\/\n.cc-intro-img-7 {\n    bottom: -180px;\n    left: 15%;\n    width: 120px;\n    height: 150px;\n    animation: cc-float 6s ease-in-out infinite;\n    animation-delay: 0.8s;\n}\n\n\/* Image 8 - Bas centre *\/\n.cc-intro-img-8 {\n    bottom: -170px;\n    left: 48%;\n    width: 125px;\n    height: 95px;\n    animation: cc-floatAlt 7s ease-in-out infinite;\n    animation-delay: 1.3s;\n}\n\n\/* Image 9 - Bas centre-droite *\/\n.cc-intro-img-9 {\n    bottom: -190px;\n    right: 16%;\n    width: 125px;\n    height: 155px;\n    animation: cc-float 8s ease-in-out infinite;\n    animation-delay: 1.8s;\n}\n\n\/* Image 10 - Bas droite extr\u00eame *\/\n.cc-intro-img-10 {\n    bottom: -60px;\n    right: 4%;\n    width: 140px;\n    height: 175px;\n    animation: cc-floatAlt 6s ease-in-out infinite;\n    animation-delay: 2.3s;\n}\n\n\/* Images 11 et 12 non utilis\u00e9es *\/\n.cc-intro-img-11,\n.cc-intro-img-12 {\n    display: none;\n}\n\n\/* ============================================\n   RESPONSIVE\n============================================ *\/\n@media (max-width: 1400px) {\n    .cc-intro-img-1 { width: 115px; height: 150px; }\n    .cc-intro-img-2 { width: 100px; height: 125px; }\n    .cc-intro-img-3 { width: 110px; height: 85px; }\n    .cc-intro-img-4 { width: 115px; height: 140px; }\n    .cc-intro-img-5 { width: 125px; height: 160px; }\n    .cc-intro-img-6 { width: 115px; height: 150px; }\n    .cc-intro-img-7 { width: 105px; height: 130px; }\n    .cc-intro-img-8 { width: 110px; height: 85px; }\n    .cc-intro-img-9 { width: 110px; height: 135px; }\n    .cc-intro-img-10 { width: 120px; height: 155px; }\n}\n\n@media (max-width: 1024px) {\n    .cc-intro {\n        padding: 100px 0;\n        min-height: auto;\n    }\n\n    .cc-intro-title {\n        font-size: clamp(24px, 4vw, 36px);\n    }\n\n    \/* Cacher les images du centre sur tablette *\/\n    .cc-intro-img-3,\n    .cc-intro-img-8 {\n        display: none;\n    }\n\n    .cc-intro-img-1 { top: 20px; left: 2%; width: 100px; height: 130px; }\n    .cc-intro-img-2 { top: 30px; left: 15%; width: 90px; height: 115px; }\n    .cc-intro-img-4 { top: 30px; right: 15%; width: 90px; height: 115px; }\n    .cc-intro-img-5 { top: 20px; right: 2%; width: 100px; height: 130px; }\n    \n    .cc-intro-img-6 { bottom: 20px; left: 2%; width: 100px; height: 130px; }\n    .cc-intro-img-7 { bottom: 30px; left: 15%; width: 90px; height: 115px; }\n    .cc-intro-img-9 { bottom: 30px; right: 15%; width: 90px; height: 115px; }\n    .cc-intro-img-10 { bottom: 20px; right: 2%; width: 100px; height: 130px; }\n}\n\n@media (max-width: 768px) {\n    .cc-intro {\n        padding: 80px 0;\n    }\n\n    .cc-intro-wrapper {\n        padding: 0 20px;\n    }\n\n    .cc-intro-container {\n        max-width: 100%;\n    }\n\n    .cc-intro-subtitle {\n        font-size: 11px;\n        margin-bottom: 24px;\n    }\n\n    .cc-intro-title {\n        font-size: 24px;\n        margin-bottom: 32px;\n    }\n\n    .cc-intro-btn {\n        padding: 14px 24px;\n        font-size: 11px;\n    }\n\n    \/* Garder 4 images : 2 en haut, 2 en bas *\/\n    .cc-intro-img-2,\n    .cc-intro-img-3,\n    .cc-intro-img-4,\n    .cc-intro-img-7,\n    .cc-intro-img-8,\n    .cc-intro-img-9 {\n        display: none;\n    }\n\n    .cc-intro-img-1 { top: 15px; left: 5%; width: 80px; height: 100px; }\n    .cc-intro-img-5 { top: 15px; right: 5%; width: 80px; height: 100px; }\n    .cc-intro-img-6 { bottom: 15px; left: 5%; width: 80px; height: 100px; }\n    .cc-intro-img-10 { bottom: 15px; right: 5%; width: 80px; height: 100px; }\n}\n\n@media (max-width: 480px) {\n    .cc-intro {\n        padding: 60px 0;\n    }\n\n    .cc-intro-title {\n        font-size: 20px;\n        letter-spacing: 1px;\n    }\n\n    .cc-intro-btn {\n        width: 100%;\n        justify-content: center;\n    }\n\n    \/* Cacher toutes les images sur petit mobile *\/\n    .cc-intro-images {\n        display: none;\n    }\n}\n<\/style>\n\n<!-- INTRO SECTION -->\n<section class=\"cc-intro\">\n    <div class=\"cc-intro-wrapper\">\n        <!-- Floating Images -->\n        <div class=\"cc-intro-images\">\n            <div class=\"cc-intro-img cc-intro-img-1\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8906-scaled.jpg\" alt=\"Choral Clash Hosts\">\n            <\/div>\n            <div class=\"cc-intro-img cc-intro-img-2\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8629-scaled.jpg\" alt=\"Choral performance\">\n            <\/div>\n            <div class=\"cc-intro-img cc-intro-img-3\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8776-scaled.jpg\" alt=\"Concert Choral Clash\">\n            <\/div>\n            <div class=\"cc-intro-img cc-intro-img-4\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8903-scaled.jpg\" alt=\"Sc\u00e8ne Choral Clash\">\n            <\/div>\n            <div class=\"cc-intro-img cc-intro-img-5\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_9078-scaled.jpg\" alt=\"Choristers\">\n            <\/div>\n            <div class=\"cc-intro-img cc-intro-img-6\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8207-scaled.jpg\" alt=\"Performance\">\n            <\/div>\n            <div class=\"cc-intro-img cc-intro-img-7\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8619-scaled.jpg\" alt=\"Audience\">\n            <\/div>\n            <div class=\"cc-intro-img cc-intro-img-8\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8650-scaled.jpg\" alt=\"Celebration\">\n            <\/div>\n            <div class=\"cc-intro-img cc-intro-img-9\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8357-scaled.jpg\" alt=\"Concert lighting\">\n            <\/div>\n            <div class=\"cc-intro-img cc-intro-img-10\">\n                <img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_9070-scaled.jpg\">\n            <\/div>\n        <\/div>\n\n        <!-- Central Content -->\n        <div class=\"cc-intro-container\">\n            <p class=\"cc-intro-subtitle cc-animate\">The first national choir competition<\/p>\n            <h2 class=\"cc-intro-title cc-animate\">\n                Choral Clash redefines the Cameroonian music scene, celebrating vocal talent, creativity and cultural pride.\n            <\/h2>\n            <a href=\"#cc-hero\" class=\"cc-intro-btn cc-animate\">\n                <span>Discover all the episodes<\/span>\n                <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path d=\"M12 19V5M5 12l7-7 7 7\"\/>\n                <\/svg>\n            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Script pour animations au scroll -->\n<script>\n(function() {\n    const observerOptions = {\n        threshold: 0.1,\n        rootMargin: '0px 0px -50px 0px'\n    };\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('cc-visible');\n            }\n        });\n    }, observerOptions);\n\n    document.querySelectorAll('.cc-animate').forEach(el => {\n        observer.observe(el);\n    });\n\n    \/\/ Smooth scroll vers le Hero section\n    const introBtn = document.querySelector('.cc-intro-btn');\n    if (introBtn) {\n        introBtn.addEventListener('click', function(e) {\n            e.preventDefault();\n            const hero = document.querySelector('#cc-hero') || document.querySelector('.cc-hero');\n            if (hero) {\n                hero.scrollIntoView({ behavior: 'smooth' });\n            } else {\n                \/\/ Si pas de hero, scroll vers le haut\n                window.scrollTo({ top: 0, behavior: 'smooth' });\n            }\n        });\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cebada4 e-flex e-con-boxed e-con e-parent\" data-id=\"cebada4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af8a124 elementor-widget elementor-widget-html\" data-id=\"af8a124\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\n==============================================\nCHORAL CLASH - GALERIE PREMIUM SCROLL\nVersion Responsive - Horizontal Scroll\n==============================================\n-->\n\n<style>\n\/* ============================================\n   GALLERY SECTION - FULLSCREEN\n   ============================================ *\/\n.cc-gallery-premium {\n    position: relative;\n    width: 100vw;\n    margin-left: calc(-50vw + 50%);\n    min-height: 100vh;\n    background: #000000;\n    overflow: hidden;\n    padding: 0px 0px 0px 0px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 16px;\n}\n\n\/* Gradient Overlay Top & Bottom *\/\n.cc-gallery-premium::before,\n.cc-gallery-premium::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    width: 100%;\n    height: 150px;\n    z-index: 10;\n    pointer-events: none;\n}\n\n.cc-gallery-premium::before {\n    top: 0;\n    background: linear-gradient(to bottom, #000000 0%, transparent 100%);\n}\n\n.cc-gallery-premium::after {\n    bottom: 0;\n    background: linear-gradient(to top, #000000 0%, transparent 100%);\n}\n\n\/* ============================================\n   SCROLLABLE ROWS\n   ============================================ *\/\n.cc-gp-row {\n    position: relative;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0px 0;\n    -webkit-overflow-scrolling: touch;\n    \/* Hide scrollbar - Firefox *\/\n    scrollbar-width: none;\n    \/* Hide scrollbar - IE\/Edge *\/\n    -ms-overflow-style: none;\n}\n\n\/* Hide scrollbar - Chrome\/Safari\/Opera *\/\n.cc-gp-row::-webkit-scrollbar {\n    display: none;\n}\n\n.cc-gp-track {\n    display: flex;\n    gap: 16px;\n    padding: 0 24px;\n    width: max-content;\n}\n\n\/* ============================================\n   IMAGE ITEMS - RESPONSIVE SIZING\n   Default: 4 images for normal laptops\n   ============================================ *\/\n.cc-gp-item {\n    position: relative;\n    flex-shrink: 0;\n    \/* Normal laptops: 4 images visible *\/\n    width: calc((100vw - 48px - 48px) \/ 4);\n    aspect-ratio: 4 \/ 3;\n    border-radius: 8px;\n    overflow: hidden;\n    cursor: pointer;\n}\n\n.cc-gp-item img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    filter: grayscale(30%) brightness(0.85);\n    transition: filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    will-change: transform, filter;\n}\n\n\/* Hover - Color Reveal *\/\n.cc-gp-item:hover img {\n    filter: grayscale(0%) brightness(1);\n    transform: scale(1.08);\n}\n\n\/* Gold Frame on Hover *\/\n.cc-gp-item::before {\n    content: '';\n    position: absolute;\n    inset: 8px;\n    border: 1px solid #d4af37;\n    border-radius: 4px;\n    opacity: 0;\n    transform: scale(1.1);\n    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    z-index: 2;\n    pointer-events: none;\n}\n\n.cc-gp-item:hover::before {\n    opacity: 1;\n    transform: scale(1);\n}\n\n\/* Shine Effect *\/\n.cc-gp-item::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 50%;\n    height: 100%;\n    background: linear-gradient(\n        90deg,\n        transparent 0%,\n        rgba(212, 175, 55, 0.15) 50%,\n        transparent 100%\n    );\n    transform: skewX(-25deg);\n    transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    z-index: 3;\n    pointer-events: none;\n}\n\n.cc-gp-item:hover::after {\n    left: 150%;\n}\n\n\/* ============================================\n   FLOATING TITLE - LUXURY\n   ============================================ *\/\n.cc-gp-floating-title {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 5;\n    text-align: center;\n    pointer-events: none;\n    mix-blend-mode: difference;\n}\n\n.cc-gp-floating-title h2 {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(80px, 15vw, 200px);\n    color: #ffffff;\n    text-transform: uppercase;\n    letter-spacing: 20px;\n    margin: 0;\n    line-height: 0.9;\n    opacity: 0.15;\n}\n\n\/* ============================================\n   CORNER DECORATIONS\n   ============================================ *\/\n.cc-gp-corner {\n    position: absolute;\n    width: 60px;\n    height: 60px;\n    z-index: 15;\n    pointer-events: none;\n}\n\n.cc-gp-corner::before,\n.cc-gp-corner::after {\n    content: '';\n    position: absolute;\n    background: #d4af37;\n}\n\n.cc-gp-corner--tl { top: 30px; left: 30px; }\n.cc-gp-corner--tl::before { top: 0; left: 0; width: 1px; height: 40px; }\n.cc-gp-corner--tl::after { top: 0; left: 0; width: 40px; height: 1px; }\n\n.cc-gp-corner--tr { top: 30px; right: 30px; }\n.cc-gp-corner--tr::before { top: 0; right: 0; width: 1px; height: 40px; }\n.cc-gp-corner--tr::after { top: 0; right: 0; width: 40px; height: 1px; }\n\n.cc-gp-corner--bl { bottom: 30px; left: 30px; }\n.cc-gp-corner--bl::before { bottom: 0; left: 0; width: 1px; height: 40px; }\n.cc-gp-corner--bl::after { bottom: 0; left: 0; width: 40px; height: 1px; }\n\n.cc-gp-corner--br { bottom: 30px; right: 30px; }\n.cc-gp-corner--br::before { bottom: 0; right: 0; width: 1px; height: 40px; }\n.cc-gp-corner--br::after { bottom: 0; right: 0; width: 40px; height: 1px; }\n\n\/* ============================================\n   SCROLL HINT ARROWS\n   ============================================ *\/\n.cc-gp-scroll-arrows {\n    position: absolute;\n    bottom: 30px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    gap: 15px;\n}\n\n.cc-gp-scroll-arrows span {\n    font-family: 'Space Mono', monospace;\n    font-size: 10px;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    color: #d4af37;\n}\n\n.cc-gp-arrow {\n    width: 30px;\n    height: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #d4af37;\n    animation: cc-gp-bounce 1.5s ease-in-out infinite;\n}\n\n.cc-gp-arrow--left {\n    animation-delay: 0s;\n}\n\n.cc-gp-arrow--right {\n    animation-delay: 0.75s;\n}\n\n@keyframes cc-gp-bounce {\n    0%, 100% { opacity: 0.4; transform: translateX(0); }\n    50% { opacity: 1; transform: translateX(3px); }\n}\n\n.cc-gp-arrow--left svg {\n    transform: rotate(180deg);\n}\n\n@keyframes cc-gp-bounce-left {\n    0%, 100% { opacity: 0.4; transform: translateX(0); }\n    50% { opacity: 1; transform: translateX(-3px); }\n}\n\n.cc-gp-arrow--left {\n    animation-name: cc-gp-bounce-left;\n}\n\n\/* ============================================\n   RESPONSIVE - LARGE DESKTOPS (6 images)\n   ============================================ *\/\n@media (min-width: 1600px) {\n    .cc-gp-item {\n        \/* Large desktops: 6 images visible *\/\n        width: calc((100vw - 48px - 80px) \/ 6);\n    }\n}\n\n\/* ============================================\n   RESPONSIVE - MEDIUM SCREENS (4 images)\n   Already default, this ensures consistency\n   ============================================ *\/\n@media (max-width: 1200px) {\n    .cc-gp-item {\n        \/* Medium screens: 4 images visible *\/\n        width: calc((100vw - 48px - 48px) \/ 4);\n    }\n    \n    .cc-gp-track {\n        gap: 16px;\n    }\n    \n    .cc-gp-floating-title h2 {\n        letter-spacing: 15px;\n    }\n}\n\n\/* ============================================\n   RESPONSIVE - TABLET (3 images)\n   ============================================ *\/\n@media (max-width: 900px) {\n    .cc-gp-item {\n        width: calc((100vw - 48px - 32px) \/ 3);\n    }\n    \n    .cc-gp-track {\n        gap: 16px;\n        padding: 0 20px;\n    }\n    \n    .cc-gp-floating-title h2 {\n        letter-spacing: 10px;\n    }\n    \n    .cc-gp-corner {\n        width: 40px;\n        height: 40px;\n    }\n    \n    .cc-gp-corner--tl, .cc-gp-corner--tr { top: 20px; }\n    .cc-gp-corner--bl, .cc-gp-corner--br { bottom: 20px; }\n    .cc-gp-corner--tl, .cc-gp-corner--bl { left: 20px; }\n    .cc-gp-corner--tr, .cc-gp-corner--br { right: 20px; }\n    \n    .cc-gp-corner::before { height: 30px !important; }\n    .cc-gp-corner::after { width: 30px !important; }\n}\n\n\/* ============================================\n   RESPONSIVE - MOBILE (2 images)\n   ============================================ *\/\n@media (max-width: 600px) {\n    .cc-gallery-premium {\n        padding: 40px 0;\n        gap: 12px;\n    }\n    \n    .cc-gp-item {\n        \/* Mobile: 2 images visible *\/\n        width: calc((100vw - 32px - 12px) \/ 2);\n    }\n    \n    .cc-gp-track {\n        gap: 12px;\n        padding: 0 16px;\n    }\n    \n    .cc-gp-row {\n        padding: 6px 0;\n    }\n    \n    .cc-gp-item::before {\n        inset: 4px;\n    }\n    \n    .cc-gp-corner {\n        display: none;\n    }\n    \n    .cc-gp-floating-title h2 {\n        letter-spacing: 5px;\n    }\n    \n    .cc-gp-scroll-arrows {\n        bottom: 15px;\n    }\n    \n    .cc-gp-scroll-arrows span {\n        font-size: 9px;\n        text-align: center;\n    }\n}\n\n\/* ============================================\n   SMALL MOBILE\n   ============================================ *\/\n@media (max-width: 400px) {\n    .cc-gp-item {\n        width: calc((100vw - 24px - 10px) \/ 2);\n    }\n    \n    .cc-gp-track {\n        gap: 10px;\n        padding: 0 12px;\n    }\n}\n<\/style>\n\n<!-- GALLERY PREMIUM SECTION -->\n<section class=\"cc-gallery-premium\" id=\"ccGalleryPremium\">\n    \n    <!-- Corner Decorations -->\n    <div class=\"cc-gp-corner cc-gp-corner--tl\"><\/div>\n    <div class=\"cc-gp-corner cc-gp-corner--tr\"><\/div>\n    <div class=\"cc-gp-corner cc-gp-corner--bl\"><\/div>\n    <div class=\"cc-gp-corner cc-gp-corner--br\"><\/div>\n    \n    <!-- Floating Title -->\n    <div class=\"cc-gp-floating-title\">\n        <h2>Gallery<\/h2>\n    <\/div>\n    \n    <!-- Row 1 -->\n    <div class=\"cc-gp-row\">\n        <div class=\"cc-gp-track\" id=\"ccGpTrack1\">\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8083-1-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8132-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8408-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8182-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8249-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8400-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8360-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_9058-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8324-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8299-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8243-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Row 2 -->\n    <div class=\"cc-gp-row\">\n        <div class=\"cc-gp-track\" id=\"ccGpTrack2\">\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8487-1-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8661-2-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8651-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8896-1-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8368-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8244-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8201-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8247-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8999-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8658-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8515-1-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8146-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            \n        <\/div>\n    <\/div>\n    \n    <!-- Row 3 -->\n    <div class=\"cc-gp-row\">\n        <div class=\"cc-gp-track\" id=\"ccGpTrack3\">\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8932-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8256-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8819-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8610-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8492-1-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8459-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8364-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8300-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8281-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8253-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8201-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8156-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Row 4 -->\n    <div class=\"cc-gp-row\">\n        <div class=\"cc-gp-track\" id=\"ccGpTrack4\">\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_9070-1-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8536-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_9055-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8143-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_9023-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8508-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8976-scaled.jpg\" alt=\"Choral Clash Hosts\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8825-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8824-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8288-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n            <div class=\"cc-gp-item\"><img decoding=\"async\" src=\"https:\/\/choralclash.com\/wp-content\/uploads\/2026\/01\/DSC_8302-scaled.jpg\" alt=\"Choral Clash Performance\" loading=\"lazy\"><\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Scroll Hint -->\n    <div class=\"cc-gp-scroll-arrows\">\n        <div class=\"cc-gp-arrow cc-gp-arrow--left\">\n            <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"\/>\n            <\/svg>\n        <\/div>\n        <span>Slide to explore<\/span>\n        <div class=\"cc-gp-arrow cc-gp-arrow--right\">\n            <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n    \n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-49190d7 e-flex e-con-boxed e-con e-parent\" data-id=\"49190d7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2573f3f elementor-widget elementor-widget-html\" data-id=\"2573f3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* ============================================\n   CHORALES SECTION - CHORAL CLASH (CANDIDATES)\n============================================ *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap');\n\n.cc-chorales {\n    --primary-magenta: #E91E8C;\n    --primary-orange: #FF6B35;\n    --accent-gold: #FFD700;\n    --dark-bg: #0A0A0A;\n    --dark-card: #111111;\n    --text-white: #FFFFFF;\n    --text-gray: #888888;\n    --text-light: #CCCCCC;\n}\n\n\/* ============================================\n   ANIMATIONS\n============================================ *\/\n@keyframes cc-lineFlow {\n    0% { transform: translateY(-100%); }\n    100% { transform: translateY(100%); }\n}\n\n@keyframes cc-slideLeft {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(-50%); }\n}\n\n@keyframes cc-slideRight {\n    0% { transform: translateX(-50%); }\n    100% { transform: translateX(0); }\n}\n\n@keyframes cc-pulse {\n    0%, 100% { opacity: 0.3; }\n    50% { opacity: 0.6; }\n}\n\n.cc-animate {\n    opacity: 0;\n    transform: translateY(50px);\n    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.cc-animate.cc-visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n\/* ============================================\n   ANIMATED LINES BACKGROUND\n============================================ *\/\n.cc-chorales-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    pointer-events: none;\n    z-index: 0;\n}\n\n.cc-chorales-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.02) 15%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.02) 85%, transparent 100%);\n}\n\n.cc-chorales-line::after {\n    content: '';\n    position: absolute;\n    top: -50%;\n    left: 0;\n    width: 100%;\n    height: 25%;\n    background: linear-gradient(to bottom, transparent 0%, rgba(255, 107, 53, 0.3) 50%, transparent 100%);\n    animation: cc-lineFlow 7s ease-in-out infinite;\n}\n\n.cc-chorales-line:nth-child(1) { left: 8%; }\n.cc-chorales-line:nth-child(2) { left: 20%; }\n.cc-chorales-line:nth-child(3) { left: 32%; }\n.cc-chorales-line:nth-child(4) { left: 44%; }\n.cc-chorales-line:nth-child(5) { left: 56%; }\n.cc-chorales-line:nth-child(6) { left: 68%; }\n.cc-chorales-line:nth-child(7) { left: 80%; }\n.cc-chorales-line:nth-child(8) { left: 92%; }\n\n.cc-chorales-line:nth-child(1)::after { animation-delay: 0s; animation-duration: 6s; }\n.cc-chorales-line:nth-child(2)::after { animation-delay: 1.5s; animation-duration: 7s; }\n.cc-chorales-line:nth-child(3)::after { animation-delay: 0.8s; animation-duration: 5.5s; }\n.cc-chorales-line:nth-child(4)::after { animation-delay: 2.2s; animation-duration: 8s; }\n.cc-chorales-line:nth-child(5)::after { animation-delay: 0.3s; animation-duration: 6.5s; }\n.cc-chorales-line:nth-child(6)::after { animation-delay: 1.8s; animation-duration: 7.5s; }\n.cc-chorales-line:nth-child(7)::after { animation-delay: 0.6s; animation-duration: 6s; }\n.cc-chorales-line:nth-child(8)::after { animation-delay: 2.5s; animation-duration: 5s; }\n\n\/* ============================================\n   SECTION CONTAINER\n============================================ *\/\n.cc-chorales {\n    padding: 50px 0 150px;\n    position: relative;\n    overflow: hidden;\n    background-color: var(--dark-bg);\n    font-family: 'Space Grotesk', sans-serif;\n    color: var(--text-white);\n}\n\n\/* ============================================\n   SECTION HEADER\n============================================ *\/\n.cc-chorales-header {\n    text-align: center;\n    margin-bottom: 60px;\n    padding: 0 40px;\n    position: relative;\n    z-index: 1;\n}\n\n.cc-chorales-subtitle {\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    color: var(--accent-gold);\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    margin-bottom: 20px;\n    display: inline-flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.cc-chorales-subtitle::before,\n.cc-chorales-subtitle::after {\n    content: '';\n    width: 40px;\n    height: 1px;\n    background: var(--accent-gold);\n    opacity: 0.5;\n}\n\n.cc-chorales-title {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(48px, 8vw, 90px);\n    line-height: 1;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    margin-bottom: 24px;\n}\n\n.cc-chorales-desc {\n    font-family: 'Space Mono', monospace;\n    font-size: 16px;\n    color: var(--text-gray);\n    max-width: 600px;\n    margin: 0 auto;\n    line-height: 1.7;\n}\n\n\/* ============================================\n   LOADING STATE\n============================================ *\/\n.cc-chorales-loading {\n    text-align: center;\n    padding: 60px 20px;\n    position: relative;\n    z-index: 1;\n}\n\n.cc-loading-spinner {\n    width: 50px;\n    height: 50px;\n    border: 3px solid rgba(255, 255, 255, 0.1);\n    border-top-color: var(--primary-magenta);\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n    margin: 0 auto 20px;\n}\n\n@keyframes spin {\n    to { transform: rotate(360deg); }\n}\n\n.cc-loading-text {\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    color: var(--text-gray);\n    animation: cc-pulse 1.5s ease-in-out infinite;\n}\n\n\/* ============================================\n   SLIDER WRAPPER\n============================================ *\/\n.cc-chorales-slider-wrapper {\n    position: relative;\n    z-index: 1;\n    overflow: hidden;\n    margin-bottom: 30px;\n}\n\n.cc-chorales-slider-wrapper::before,\n.cc-chorales-slider-wrapper::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 100px;\n    z-index: 10;\n    pointer-events: none;\n}\n\n.cc-chorales-slider-wrapper::before {\n    left: 0;\n    background: linear-gradient(to right, var(--dark-bg), transparent);\n}\n\n.cc-chorales-slider-wrapper::after {\n    right: 0;\n    background: linear-gradient(to left, var(--dark-bg), transparent);\n}\n\n.cc-chorales-slider {\n    display: flex;\n    width: max-content;\n    cursor: grab;\n    user-select: none;\n}\n\n.cc-chorales-slider.cc-slide-left {\n    animation: cc-slideLeft 45s linear infinite;\n}\n\n.cc-chorales-slider.cc-slide-right {\n    animation: cc-slideRight 50s linear infinite;\n}\n\n.cc-chorales-slider:hover {\n    animation-play-state: paused;\n}\n\n.cc-chorales-slider.cc-dragging {\n    cursor: grabbing;\n}\n\n.cc-chorales-track {\n    display: flex;\n    gap: 20px;\n    padding: 20px 10px;\n}\n\n\/* ============================================\n   CHORALE CARD (Ticket Style) - FIXED WIDTH\n============================================ *\/\n.cc-chorale-card {\n    background: var(--text-white);\n    color: var(--dark-bg);\n    position: relative;\n    padding: 16px;\n    flex-shrink: 0;\n    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n    cursor: pointer;\n    text-decoration: none;\n    display: block;\n    width: 300px; \/* LARGEUR FIXE POUR TOUTES LES CARTES *\/\n}\n\n\/* Supprimer les tailles variables - toutes les cartes ont la m\u00eame largeur *\/\n.cc-chorale-card.cc-size-sm,\n.cc-chorale-card.cc-size-md,\n.cc-chorale-card.cc-size-lg { \n    width: 300px; \n}\n\n.cc-chorale-card::before,\n.cc-chorale-card::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 16px;\n    background-image: radial-gradient(circle, var(--dark-bg) 6px, transparent 6px);\n    background-size: 20px 16px;\n    background-position: 10px 0;\n}\n\n.cc-chorale-card::before { top: -8px; }\n.cc-chorale-card::after { bottom: -8px; }\n\n.cc-chorale-card:hover {\n    transform: translateY(-10px) rotate(1deg) scale(1.02);\n    box-shadow: 0 25px 50px rgba(233, 30, 140, 0.3);\n}\n\n.cc-chorale-image {\n    width: 100%;\n    height: 180px; \/* HAUTEUR FIXE *\/\n    object-fit: cover;\n    margin-bottom: 16px;\n    transition: transform 0.5s ease;\n    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n}\n\n.cc-chorale-card:hover .cc-chorale-image {\n    transform: scale(1.05);\n}\n\n.cc-chorale-meta {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 10px;\n    font-family: 'Space Mono', monospace;\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    gap: 8px;\n}\n\n.cc-chorale-category {\n    color: var(--primary-magenta);\n    font-weight: 700;\n    flex-shrink: 0;\n    max-width: 45%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.cc-chorale-divider {\n    flex: 1;\n    min-width: 20px;\n    height: 1px;\n    background: var(--dark-bg);\n    margin: 6px 0;\n    opacity: 0.15;\n}\n\n.cc-chorale-location {\n    color: var(--text-gray);\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 9px;\n    flex-shrink: 0;\n    max-width: 45%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.cc-chorale-name {\n    font-family: 'Space Grotesk', sans-serif;\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 1.3;\n    margin: 0 0 6px 0;\n    color: var(--dark-bg);\n    \/* Limiter \u00e0 2 lignes max *\/\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-height: 46px; \/* 2 lignes x line-height *\/\n}\n\n.cc-chorale-members {\n    font-family: 'Space Mono', monospace;\n    font-size: 11px;\n    color: var(--text-gray);\n    margin: 0;\n}\n\n\/* ============================================\n   VIEW ALL BUTTON\n============================================ *\/\n.cc-chorales-cta {\n    text-align: center;\n    margin-top: 50px;\n    padding: 0 40px;\n    position: relative;\n    z-index: 1;\n}\n\n.cc-chorales-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    background: transparent;\n    border: 2px solid var(--text-white);\n    color: var(--text-white);\n    padding: 18px 40px;\n    text-decoration: none;\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    transition: all 0.4s ease;\n}\n\n.cc-chorales-btn:hover {\n    background: var(--text-white);\n    color: var(--dark-bg);\n}\n\n.cc-chorales-btn svg {\n    transition: transform 0.3s ease;\n}\n\n.cc-chorales-btn:hover svg {\n    transform: translateX(5px);\n}\n\n\/* ============================================\n   RESPONSIVE\n============================================ *\/\n@media (max-width: 1024px) {\n    .cc-chorales { padding: 100px 0 120px; }\n    .cc-chorale-card,\n    .cc-chorale-card.cc-size-sm,\n    .cc-chorale-card.cc-size-md,\n    .cc-chorale-card.cc-size-lg { \n        width: 280px; \n    }\n}\n\n@media (max-width: 768px) {\n    .cc-chorales { padding: 80px 0 100px; }\n    .cc-chorales-header { padding: 0 20px; margin-bottom: 40px; }\n    .cc-chorales-subtitle::before, .cc-chorales-subtitle::after { width: 20px; }\n    .cc-chorales-slider-wrapper::before, .cc-chorales-slider-wrapper::after { width: 50px; }\n    .cc-chorale-card,\n    .cc-chorale-card.cc-size-sm,\n    .cc-chorale-card.cc-size-md,\n    .cc-chorale-card.cc-size-lg { \n        width: 260px; \n    }\n    .cc-chorale-image {\n        height: 160px;\n    }\n    .cc-chorales-line:nth-child(2), .cc-chorales-line:nth-child(4), .cc-chorales-line:nth-child(6) { display: none; }\n    .cc-chorales-cta { padding: 0 20px; }\n    .cc-chorales-btn { width: 100%; justify-content: center; }\n}\n\n@media (max-width: 480px) {\n    .cc-chorales { padding: 60px 0 80px; }\n    .cc-chorales-title { font-size: 42px; }\n    .cc-chorale-card,\n    .cc-chorale-card.cc-size-sm,\n    .cc-chorale-card.cc-size-md,\n    .cc-chorale-card.cc-size-lg { \n        width: 240px; \n    }\n    .cc-chorale-image {\n        height: 140px;\n    }\n    .cc-chorale-name {\n        font-size: 16px;\n        min-height: 42px;\n    }\n    .cc-chorales-btn { padding: 16px 24px; font-size: 12px; }\n}\n<\/style>\n\n<!-- CHORALES SECTION -->\n<section class=\"cc-chorales\" id=\"cc-chorales\">\n    <!-- Animated Lines Background -->\n    <div class=\"cc-chorales-lines\">\n        <div class=\"cc-chorales-line\"><\/div>\n        <div class=\"cc-chorales-line\"><\/div>\n        <div class=\"cc-chorales-line\"><\/div>\n        <div class=\"cc-chorales-line\"><\/div>\n        <div class=\"cc-chorales-line\"><\/div>\n        <div class=\"cc-chorales-line\"><\/div>\n        <div class=\"cc-chorales-line\"><\/div>\n        <div class=\"cc-chorales-line\"><\/div>\n    <\/div>\n\n    <!-- Header -->\n    <div class=\"cc-chorales-header cc-animate\">\n        <p class=\"cc-chorales-subtitle\">Season 1<\/p>\n        <h2 class=\"cc-chorales-title\">Choirs in Competition<\/h2>\n        <p class=\"cc-chorales-desc\">Discover the exceptional talents who will be competing for the title of Cameroon's best choir.<\/p>\n    <\/div>\n\n    <!-- Loading State -->\n    <div class=\"cc-chorales-loading\" id=\"cc-chorales-loading\">\n        <div class=\"cc-loading-spinner\"><\/div>\n        <p class=\"cc-loading-text\">Loading choirs...<\/p>\n    <\/div>\n\n    <!-- Sliders Container (rempli dynamiquement) -->\n    <div id=\"cc-chorales-sliders\"><\/div>\n\n    <!-- CTA -->\n    <div class=\"cc-chorales-cta cc-animate\">\n        <a href=\"https:\/\/choralclash.com\/en\/vote\/\" class=\"cc-chorales-btn\">\n            <span>Vote for my choir<\/span>\n            <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n            <\/svg>\n        <\/a>\n    <\/div>\n<\/section>\n\n<script>\n(function() {\n    \/\/ =============================================\n    \/\/ CONFIGURATION - Bas\u00e9 sur ta structure WordPress\n    \/\/ =============================================\n    const CONFIG = {\n        \/\/ API personnalis\u00e9e (plus simple, recommand\u00e9e)\n        customApiUrl: '\/wp-json\/choral-clash\/v1\/chorales',\n        \n        \/\/ API WordPress standard (fallback)\n        wpApiUrl: '\/wp-json\/wp\/v2\/candidate',\n        \n        \/\/ Nombre de chorales \u00e0 charger\n        perPage: 20,\n        \n        \/\/ Image par d\u00e9faut\n        defaultImage: 'https:\/\/choralclash.com\/wp-content\/uploads\/2025\/12\/DSC_8731-scaled.jpg'\n    };\n\n    \/\/ =============================================\n    \/\/ FONCTIONS UTILITAIRES\n    \/\/ =============================================\n\n    \/\/ Cr\u00e9er une carte pour l'API personnalis\u00e9e\n    function createCardFromCustomAPI(chorale) {\n        const name = chorale.choir_name || chorale.title || 'Chorale';\n        const image = chorale.choir_image_url || CONFIG.defaultImage;\n        const category = chorale.style_genre || chorale.institution_type || 'Chorale';\n        const location = chorale.city_region || 'Cameroun';\n        const members = chorale.number_of_members || '\u2014';\n        const link = chorale.link || '#';\n\n        return `\n            <a href=\"${link}\" class=\"cc-chorale-card\">\n                <img decoding=\"async\" src=\"${image}\" alt=\"${name}\" class=\"cc-chorale-image\" loading=\"lazy\" onerror=\"this.src='${CONFIG.defaultImage}'\">\n                <div class=\"cc-chorale-meta\">\n                    <span class=\"cc-chorale-category\">${category}<\/span>\n                    <span class=\"cc-chorale-divider\"><\/span>\n                    <span class=\"cc-chorale-location\">\ud83d\udccd ${location}<\/span>\n                <\/div>\n                <h3 class=\"cc-chorale-name\">${name}<\/h3>\n                <p class=\"cc-chorale-members\">${members} membres<\/p>\n            <\/a>\n        `;\n    }\n\n    \/\/ Cr\u00e9er une carte pour l'API WordPress standard (avec ACF)\n    function createCardFromWPAPI(candidate) {\n        const acf = candidate.acf || {};\n        \n        \/\/ Nom\n        const name = acf.choir_name || candidate.title?.rendered || 'Chorale';\n        \n        \/\/ Image - plusieurs formats possibles\n        let image = CONFIG.defaultImage;\n        if (acf.choir_image) {\n            if (typeof acf.choir_image === 'string') {\n                image = acf.choir_image;\n            } else if (acf.choir_image.url) {\n                image = acf.choir_image.url;\n            } else if (acf.choir_image.sizes?.large) {\n                image = acf.choir_image.sizes.large;\n            }\n        }\n        if (image === CONFIG.defaultImage && candidate.featured_image_url) {\n            image = candidate.featured_image_url;\n        }\n        \n        \/\/ Autres champs\n        const category = acf.style_genre || acf.institution_type || 'Chorale';\n        const location = acf.city_region || 'Cameroun';\n        const members = acf.number_of_members || '\u2014';\n        const link = candidate.link || '#';\n\n        return `\n            <a href=\"${link}\" class=\"cc-chorale-card\">\n                <img decoding=\"async\" src=\"${image}\" alt=\"${name}\" class=\"cc-chorale-image\" loading=\"lazy\" onerror=\"this.src='${CONFIG.defaultImage}'\">\n                <div class=\"cc-chorale-meta\">\n                    <span class=\"cc-chorale-category\">${category}<\/span>\n                    <span class=\"cc-chorale-divider\"><\/span>\n                    <span class=\"cc-chorale-location\">\ud83d\udccd ${location}<\/span>\n                <\/div>\n                <h3 class=\"cc-chorale-name\">${name}<\/h3>\n                <p class=\"cc-chorale-members\">${members} membres<\/p>\n            <\/a>\n        `;\n    }\n\n    function createSlider(cards, direction) {\n        const cardsHtml = cards.join('');\n        const animationClass = direction === 'left' ? 'cc-slide-left' : 'cc-slide-right';\n        \n        return `\n            <div class=\"cc-chorales-slider-wrapper\">\n                <div class=\"cc-chorales-slider ${animationClass}\">\n                    <div class=\"cc-chorales-track\">${cardsHtml}<\/div>\n                    <div class=\"cc-chorales-track\">${cardsHtml}<\/div>\n                <\/div>\n            <\/div>\n        `;\n    }\n\n    \/\/ =============================================\n    \/\/ CHARGER LES CHORALES\n    \/\/ =============================================\n    async function loadChorales() {\n        const loadingEl = document.getElementById('cc-chorales-loading');\n        const slidersEl = document.getElementById('cc-chorales-sliders');\n\n        loadingEl.style.display = 'block';\n        slidersEl.innerHTML = '';\n\n        let chorales = [];\n        let useCustomAPI = false;\n\n        \/\/ Essayer d'abord l'API personnalis\u00e9e\n        try {\n            const response = await fetch(`${CONFIG.customApiUrl}?per_page=${CONFIG.perPage}`);\n            if (response.ok) {\n                chorales = await response.json();\n                useCustomAPI = true;\n                console.log('\u2705 API personnalis\u00e9e utilis\u00e9e:', chorales.length, 'chorales');\n            }\n        } catch (e) {\n            console.log('API personnalis\u00e9e non disponible, utilisation de l\\'API WP standard...');\n        }\n\n        \/\/ Fallback vers l'API WordPress standard\n        if (chorales.length === 0) {\n            try {\n                const response = await fetch(`${CONFIG.wpApiUrl}?per_page=${CONFIG.perPage}&status=publish&_embed`);\n                if (response.ok) {\n                    chorales = await response.json();\n                    console.log('\u2705 API WP standard utilis\u00e9e:', chorales.length, 'chorales');\n                }\n            } catch (e) {\n                console.error('Erreur API WP:', e);\n            }\n        }\n\n        \/\/ V\u00e9rifier si on a des donn\u00e9es\n        if (chorales.length === 0) {\n            loadingEl.innerHTML = `\n                <p style=\"color: #888; font-family: 'Space Mono', monospace; font-size: 14px;\">\n                    Aucune chorale trouv\u00e9e.\n                    <br><br>\n                    <button onclick=\"location.reload()\" style=\"background: #E91E8C; color: white; border: none; padding: 10px 20px; cursor: pointer; font-family: inherit; text-transform: uppercase; letter-spacing: 1px;\">\n                        R\u00e9essayer\n                    <\/button>\n                <\/p>\n            `;\n            return;\n        }\n\n        \/\/ Cr\u00e9er les cartes\n        const cards = chorales.map(c => \n            useCustomAPI ? createCardFromCustomAPI(c) : createCardFromWPAPI(c)\n        );\n\n        \/\/ Diviser en 2 groupes\n        const mid = Math.ceil(cards.length \/ 2);\n        const group1 = cards.slice(0, mid);\n        const group2 = cards.slice(mid);\n\n        \/\/ Cr\u00e9er les sliders\n        let html = '';\n        if (group1.length > 0) html += createSlider(group1, 'left');\n        if (group2.length > 0) html += createSlider(group2, 'right');\n\n        slidersEl.innerHTML = html;\n        loadingEl.style.display = 'none';\n\n        \/\/ Initialiser le drag\n        initDragFunctionality();\n    }\n\n    \/\/ =============================================\n    \/\/ DRAG FUNCTIONALITY\n    \/\/ =============================================\n    function initDragFunctionality() {\n        const sliders = document.querySelectorAll('.cc-chorales-slider');\n        \n        sliders.forEach(slider => {\n            let isDown = false;\n            let startX;\n            let currentTransform = 0;\n\n            function getCurrentTransform() {\n                const style = window.getComputedStyle(slider);\n                const matrix = new DOMMatrix(style.transform);\n                return matrix.m41;\n            }\n\n            slider.addEventListener('mousedown', (e) => {\n                isDown = true;\n                slider.classList.add('cc-dragging');\n                currentTransform = getCurrentTransform();\n                startX = e.pageX;\n                slider.style.transform = `translateX(${currentTransform}px)`;\n                slider.style.animation = 'none';\n            });\n\n            slider.addEventListener('mouseleave', () => {\n                if (isDown) {\n                    isDown = false;\n                    slider.classList.remove('cc-dragging');\n                    resumeAnimation(slider);\n                }\n            });\n\n            slider.addEventListener('mouseup', () => {\n                isDown = false;\n                slider.classList.remove('cc-dragging');\n                resumeAnimation(slider);\n            });\n\n            slider.addEventListener('mousemove', (e) => {\n                if (!isDown) return;\n                e.preventDefault();\n                const x = e.pageX;\n                const walk = (x - startX) * 2.5;\n                slider.style.transform = `translateX(${currentTransform + walk}px)`;\n            });\n\n            \/\/ Touch events\n            slider.addEventListener('touchstart', (e) => {\n                isDown = true;\n                slider.classList.add('cc-dragging');\n                currentTransform = getCurrentTransform();\n                startX = e.touches[0].pageX;\n                slider.style.transform = `translateX(${currentTransform}px)`;\n                slider.style.animation = 'none';\n            }, { passive: true });\n\n            slider.addEventListener('touchend', () => {\n                isDown = false;\n                slider.classList.remove('cc-dragging');\n                resumeAnimation(slider);\n            });\n\n            slider.addEventListener('touchmove', (e) => {\n                if (!isDown) return;\n                const x = e.touches[0].pageX;\n                const walk = (x - startX) * 2.5;\n                slider.style.transform = `translateX(${currentTransform + walk}px)`;\n            }, { passive: true });\n\n            function resumeAnimation(slider) {\n                const finalTransform = getCurrentTransform();\n                const sliderWidth = slider.scrollWidth \/ 2;\n                let normalizedPos = finalTransform % sliderWidth;\n                if (normalizedPos > 0) normalizedPos -= sliderWidth;\n                const progress = Math.abs(normalizedPos \/ sliderWidth) * 100;\n                \n                if (slider.classList.contains('cc-slide-left')) {\n                    slider.style.animation = `cc-slideLeft 45s linear infinite`;\n                    slider.style.animationDelay = `-${progress * 0.45}s`;\n                } else {\n                    slider.style.animation = `cc-slideRight 50s linear infinite`;\n                    slider.style.animationDelay = `-${progress * 0.50}s`;\n                }\n                slider.style.transform = '';\n            }\n        });\n    }\n\n    \/\/ =============================================\n    \/\/ INTERSECTION OBSERVER\n    \/\/ =============================================\n    const observerOptions = {\n        threshold: 0.1,\n        rootMargin: '0px 0px -50px 0px'\n    };\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('cc-visible');\n            }\n        });\n    }, observerOptions);\n\n    document.querySelectorAll('.cc-animate').forEach(el => {\n        observer.observe(el);\n    });\n\n    \/\/ =============================================\n    \/\/ INITIALISATION\n    \/\/ =============================================\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', loadChorales);\n    } else {\n        loadChorales();\n    }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b145ae6 e-flex e-con-boxed e-con e-parent\" data-id=\"b145ae6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7604e95 elementor-widget elementor-widget-html\" data-id=\"7604e95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* ============================================\n   \u00c0 PROPOS SECTION - CHORAL CLASH\n============================================ *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap');\n\n.cc-about {\n    --primary-magenta: #E91E8C;\n    --primary-orange: #FF6B35;\n    --accent-gold: #FFD700;\n    --dark-bg: #0A0A0A;\n    --text-white: #FFFFFF;\n    --text-gray: #888888;\n    --text-light: #CCCCCC;\n}\n\n\/* ============================================\n   ANIMATIONS\n============================================ *\/\n@keyframes cc-lineFlow {\n    0% {\n        transform: translateY(-100%);\n    }\n    100% {\n        transform: translateY(100%);\n    }\n}\n\n@keyframes cc-pulse {\n    0%, 100% {\n        opacity: 0.5;\n    }\n    50% {\n        opacity: 1;\n    }\n}\n\n.cc-animate {\n    opacity: 0;\n    transform: translateY(50px);\n    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.cc-animate.cc-visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n.cc-animate.cc-delay-1 { transition-delay: 0.1s; }\n.cc-animate.cc-delay-2 { transition-delay: 0.2s; }\n.cc-animate.cc-delay-3 { transition-delay: 0.3s; }\n.cc-animate.cc-delay-4 { transition-delay: 0.4s; }\n\n\/* ============================================\n   ANIMATED LINES BACKGROUND\n============================================ *\/\n.cc-about-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    pointer-events: none;\n    z-index: 0;\n}\n\n.cc-about-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: linear-gradient(\n        to bottom,\n        transparent 0%,\n        rgba(255, 255, 255, 0.02) 15%,\n        rgba(255, 255, 255, 0.05) 50%,\n        rgba(255, 255, 255, 0.02) 85%,\n        transparent 100%\n    );\n}\n\n.cc-about-line::after {\n    content: '';\n    position: absolute;\n    top: -50%;\n    left: 0;\n    width: 100%;\n    height: 25%;\n    background: linear-gradient(\n        to bottom,\n        transparent 0%,\n        rgba(255, 255, 255, 0.15) 50%,\n        transparent 100%\n    );\n    animation: cc-lineFlow 8s ease-in-out infinite;\n}\n\n\/* Positionnement des lignes *\/\n.cc-about-line:nth-child(1) { left: 10%; }\n.cc-about-line:nth-child(2) { left: 25%; }\n.cc-about-line:nth-child(3) { left: 40%; }\n.cc-about-line:nth-child(4) { left: 55%; }\n.cc-about-line:nth-child(5) { left: 70%; }\n.cc-about-line:nth-child(6) { left: 85%; }\n\n\/* D\u00e9lais d'animation *\/\n.cc-about-line:nth-child(1)::after { animation-delay: 0s; animation-duration: 7s; }\n.cc-about-line:nth-child(2)::after { animation-delay: 1.8s; animation-duration: 8s; }\n.cc-about-line:nth-child(3)::after { animation-delay: 0.6s; animation-duration: 6.5s; }\n.cc-about-line:nth-child(4)::after { animation-delay: 2.4s; animation-duration: 7.5s; }\n.cc-about-line:nth-child(5)::after { animation-delay: 1.2s; animation-duration: 8.5s; }\n.cc-about-line:nth-child(6)::after { animation-delay: 0.3s; animation-duration: 6s; }\n\n\/* ============================================\n   SECTION CONTAINER\n============================================ *\/\n.cc-about {\n    padding: 10px 0;\n    position: relative;\n    overflow: hidden;\n    background-color: var(--dark-bg);\n    font-family: 'Space Grotesk', sans-serif;\n    color: var(--text-white);\n}\n\n.cc-about-container {\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 40px;\n    position: relative;\n    z-index: 1;\n}\n\n\/* ============================================\n   LAYOUT GRID\n============================================ *\/\n.cc-about-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 80px;\n    align-items: center;\n}\n\n\/* ============================================\n   IMAGE SIDE\n============================================ *\/\n.cc-about-visual {\n    position: relative;\n}\n\n.cc-about-image-wrapper {\n    position: relative;\n    overflow: hidden;\n}\n\n.cc-about-image {\n    width: 100%;\n    height: 600px;\n    object-fit: cover;\n    display: block;\n}\n\n\/* Decorative frame *\/\n.cc-about-image-frame {\n    position: absolute;\n    top: 30px;\n    left: 30px;\n    right: -30px;\n    bottom: -30px;\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    pointer-events: none;\n}\n\n\/* Floating badge *\/\n.cc-about-badge {\n    position: absolute;\n    bottom: 40px;\n    left: -20px;\n    background: rgba(255, 255, 255, 0.95);\n    padding: 24px 32px;\n    z-index: 5;\n}\n\n.cc-about-badge-number {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: 48px;\n    line-height: 1;\n    color: var(--dark-bg);\n}\n\n.cc-about-badge-text {\n    font-family: 'Space Mono', monospace;\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    color: var(--text-gray);\n    margin-top: 4px;\n}\n\n\/* ============================================\n   CONTENT SIDE\n============================================ *\/\n.cc-about-content {\n    padding-left: 20px;\n}\n\n.cc-about-subtitle {\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    color: var(--text-gray);\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    margin-bottom: 24px;\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.cc-about-subtitle::before {\n    content: '';\n    width: 40px;\n    height: 1px;\n    background: var(--text-gray);\n}\n\n.cc-about-title {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(42px, 5vw, 72px);\n    line-height: 1;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 32px;\n}\n\n.cc-about-title span {\n    display: block;\n}\n\n.cc-about-title .cc-highlight {\n    -webkit-text-stroke: 1.5px var(--text-white);\n    -webkit-text-fill-color: transparent;\n}\n\n.cc-about-text {\n    font-family: 'Space Grotesk', sans-serif;\n    font-size: 18px;\n    line-height: 1.8;\n    color: var(--text-light);\n    margin-bottom: 40px;\n}\n\n\/* ============================================\n   HIGHLIGHTS\n============================================ *\/\n.cc-about-highlights {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 24px;\n    margin-bottom: 48px;\n}\n\n.cc-about-highlight {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.cc-about-highlight-icon {\n    width: 48px;\n    height: 48px;\n    background: rgba(255, 255, 255, 0.08);\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.cc-about-highlight-icon svg {\n    width: 22px;\n    height: 22px;\n    stroke: var(--text-white);\n    stroke-width: 1.5;\n    fill: none;\n}\n\n.cc-about-highlight-content h4 {\n    font-family: 'Space Grotesk', sans-serif;\n    font-size: 16px;\n    font-weight: 600;\n    margin: 0 0 6px 0;\n    color: var(--text-white);\n}\n\n.cc-about-highlight-content p {\n    font-family: 'Space Mono', monospace;\n    font-size: 12px;\n    color: var(--text-gray);\n    margin: 0;\n    line-height: 1.5;\n}\n\n\/* ============================================\n   CTA BUTTONS\n============================================ *\/\n.cc-about-cta {\n    display: flex;\n    gap: 20px;\n    flex-wrap: wrap;\n}\n\n.cc-about-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    padding: 18px 32px;\n    text-decoration: none;\n    font-family: 'Space Mono', monospace;\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    transition: all 0.4s ease;\n}\n\n.cc-about-btn-primary {\n    background: var(--text-white);\n    color: var(--dark-bg);\n}\n\n.cc-about-btn-primary:hover {\n    background: rgba(255, 255, 255, 0.85);\n    color: var(--dark-bg);\n    transform: translateY(-2px);\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n}\n\n.cc-about-btn-secondary {\n    background: transparent;\n    border: 2px solid var(--text-white);\n    color: var(--text-white);\n}\n\n.cc-about-btn-secondary:hover {\n    background: #ffffff;\n    color: #000000;\n    transform: translateY(-2px);\n}\n\n.cc-about-btn svg {\n    transition: transform 0.3s ease;\n}\n\n.cc-about-btn:hover svg {\n    transform: translateX(4px);\n}\n\n\/* ============================================\n   RESPONSIVE\n============================================ *\/\n@media (max-width: 1200px) {\n    .cc-about-grid {\n        gap: 60px;\n    }\n\n    .cc-about-image {\n        height: 500px;\n    }\n}\n\n@media (max-width: 1024px) {\n    .cc-about {\n        padding: 120px 0;\n    }\n\n    .cc-about-grid {\n        grid-template-columns: 1fr;\n        gap: 60px;\n    }\n\n    .cc-about-visual {\n        order: -1;\n    }\n\n    .cc-about-image {\n        height: 450px;\n    }\n\n    .cc-about-image-frame {\n        top: 20px;\n        left: 20px;\n        right: 0px;\n        bottom: -20px;\n    }\n\n    .cc-about-content {\n        padding-left: 0;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-about {\n        padding: 80px 0;\n    }\n\n    .cc-about-container {\n        padding: 0 20px;\n    }\n\n    .cc-about-image {\n        height: 350px;\n    }\n\n    .cc-about-badge {\n        left: 20px;\n        bottom: 20px;\n        padding: 18px 24px;\n    }\n\n    .cc-about-badge-number {\n        font-size: 36px;\n    }\n\n    .cc-about-highlights {\n        grid-template-columns: 1fr;\n    }\n\n    .cc-about-cta {\n        flex-direction: column;\n    }\n\n    .cc-about-btn {\n        width: 100%;\n        justify-content: center;\n    }\n\n    \/* Moins de lignes sur mobile *\/\n    .cc-about-line:nth-child(2),\n    .cc-about-line:nth-child(4) {\n        display: none;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-about {\n        padding: 60px 0;\n    }\n\n    .cc-about-title {\n        font-size: 36px;\n    }\n\n    .cc-about-text {\n        font-size: 16px;\n    }\n\n    .cc-about-image-frame {\n        display: none;\n    }\n\n    .cc-about-btn {\n        padding: 16px 24px;\n        font-size: 12px;\n    }\n}\n<\/style>\n\n<!-- \u00c0 PROPOS SECTION -->\n<section class=\"cc-about\">\n    <!-- Animated Lines Background -->\n    <div class=\"cc-about-lines\">\n        <div class=\"cc-about-line\"><\/div>\n        <div class=\"cc-about-line\"><\/div>\n        <div class=\"cc-about-line\"><\/div>\n        <div class=\"cc-about-line\"><\/div>\n        <div class=\"cc-about-line\"><\/div>\n        <div class=\"cc-about-line\"><\/div>\n    <\/div>\n\n    <div class=\"cc-about-container\">\n        <div class=\"cc-about-grid\">\n            <!-- Content Side -->\n            <div class=\"cc-about-content\">\n                <!--<p class=\"cc-about-subtitle cc-animate\">\u00c0 propos<\/p>-->\n                <h2 class=\"cc-about-title cc-animate cc-delay-1\">\n                    <span>A Celebration<\/span>\n                    <span>Excellence<\/span>\n                    <span class=\"cc-highlight\">Vocale<\/span>\n                <\/h2>\n                <p class=\"cc-about-text cc-animate cc-delay-2\">\n                    Choral Clash is the first national television competition dedicated to choirs in Cameroon. Our mission is to reveal, celebrate and promote the vocal talent that makes our nation tick, while preserving our rich musical heritage.\n                <\/p>\n\n                <!-- Highlights -->\n                <div class=\"cc-about-highlights cc-animate cc-delay-3\">\n                    <div class=\"cc-about-highlight\">\n                        <div class=\"cc-about-highlight-icon\">\n                            <svg viewbox=\"0 0 24 24\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"\/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"\/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"\/><\/svg>\n                        <\/div>\n                        <div class=\"cc-about-highlight-content\">\n                            <h4>12 Episodes<\/h4>\n                            <p>A full season of intense competition<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"cc-about-highlight\">\n                        <div class=\"cc-about-highlight-icon\">\n                            <svg viewbox=\"0 0 24 24\"><circle cx=\"12\" cy=\"8\" r=\"6\"\/><path d=\"M15.477 12.89 17 22l-5-3-5 3 1.523-9.11\"\/><\/svg>\n                        <\/div>\n                        <div class=\"cc-about-highlight-content\">\n                            <h4>Major Awards<\/h4>\n                            <p>Exceptional rewards for the winners<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"cc-about-highlight\">\n                        <div class=\"cc-about-highlight-icon\">\n                            <svg viewbox=\"0 0 24 24\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"15\" rx=\"2\" ry=\"2\"\/><polyline points=\"17 2 12 7 7 2\"\/><\/svg>\n                        <\/div>\n                        <div class=\"cc-about-highlight-content\">\n                            <h4>TV broadcast<\/h4>\n                            <p>Broadcast on national channels<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"cc-about-highlight\">\n                        <div class=\"cc-about-highlight-icon\">\n                            <svg viewbox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n                        <\/div>\n                        <div class=\"cc-about-highlight-content\">\n                            <h4>10 Regions<\/h4>\n                            <p>Choirs from all over Cameroon<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- CTA Buttons -->\n                <div class=\"cc-about-cta cc-animate cc-delay-4\">\n                    <a href=\"https:\/\/choralclash.com\/en\/register-your-choir\/\" class=\"cc-about-btn cc-about-btn-primary\">\n                        <span>Register your choir<\/span>\n                        <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n                        <\/svg>\n                    <\/a>\n                    <a href=\"https:\/\/choralclash.com\/en\/about\/\" class=\"cc-about-btn cc-about-btn-secondary\">\n                        <span>Find out more<\/span>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Visual Side -->\n            <div class=\"cc-about-visual cc-animate\">\n                <div class=\"cc-about-image-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1516280440614-37939bbacd81?w=800&h=1000&fit=crop\" alt=\"Choral Clash Performance\" class=\"cc-about-image\">\n                    <div class=\"cc-about-image-frame\"><\/div>\n                <\/div>\n                <div class=\"cc-about-badge\">\n                    <div class=\"cc-about-badge-number\">2026<\/div>\n                    <div class=\"cc-about-badge-text\">Season 1<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Script pour animations au scroll -->\n<script>\n(function() {\n    const observerOptions = {\n        threshold: 0.1,\n        rootMargin: '0px 0px -50px 0px'\n    };\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('cc-visible');\n            }\n        });\n    }, observerOptions);\n\n    document.querySelectorAll('.cc-animate').forEach(el => {\n        observer.observe(el);\n    });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f3fa2c3 e-flex e-con-boxed e-con e-parent\" data-id=\"f3fa2c3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-75b4eda elementor-widget elementor-widget-html\" data-id=\"75b4eda\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* ============================================\n   VIDEO PROMO SECTION - CHORAL CLASH\n============================================ *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap');\n\n.cc-promo {\n    --primary-magenta: #E91E8C;\n    --primary-orange: #FF6B35;\n    --accent-gold: #FFD700;\n    --dark-bg: #0A0A0A;\n    --text-white: #FFFFFF;\n    --text-gray: #888888;\n    --text-light: #CCCCCC;\n}\n\n\/* ============================================\n   ANIMATIONS\n============================================ *\/\n@keyframes cc-lineFlow {\n    0% { transform: translateY(-100%); }\n    100% { transform: translateY(100%); }\n}\n\n@keyframes cc-countPulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.7; }\n}\n\n@keyframes cc-float {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-10px); }\n}\n\n@keyframes cc-numberChange {\n    0% { transform: translateY(-10px); opacity: 0; }\n    100% { transform: translateY(0); opacity: 1; }\n}\n\n.cc-animate {\n    opacity: 0;\n    transform: translateY(50px);\n    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.cc-animate.cc-visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n.cc-animate.cc-delay-1 { transition-delay: 0.1s; }\n.cc-animate.cc-delay-2 { transition-delay: 0.2s; }\n.cc-animate.cc-delay-3 { transition-delay: 0.3s; }\n\n\/* ============================================\n   SECTION CONTAINER\n============================================ *\/\n.cc-promo {\n    min-height: 100vh;\n    position: relative;\n    overflow: hidden;\n    background-color: var(--dark-bg);\n    font-family: 'Space Grotesk', sans-serif;\n    color: var(--text-white);\n    display: flex;\n    align-items: center;\n}\n\n\/* ============================================\n   VIDEO\/IMAGE BACKGROUND\n============================================ *\/\n.cc-promo-bg {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n}\n\n.cc-promo-bg-media {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 0.4;\n}\n\n.cc-promo-bg-overlay {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n        180deg,\n        rgba(10, 10, 10, 0.8) 0%,\n        rgba(10, 10, 10, 0.4) 30%,\n        rgba(10, 10, 10, 0.4) 70%,\n        rgba(10, 10, 10, 0.9) 100%\n    );\n}\n\n\/* ============================================\n   ANIMATED LINES\n============================================ *\/\n.cc-promo-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-promo-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: linear-gradient(\n        to bottom,\n        transparent 0%,\n        rgba(255, 255, 255, 0.03) 15%,\n        rgba(255, 255, 255, 0.06) 50%,\n        rgba(255, 255, 255, 0.03) 85%,\n        transparent 100%\n    );\n}\n\n.cc-promo-line::after {\n    content: '';\n    position: absolute;\n    top: -50%;\n    left: 0;\n    width: 100%;\n    height: 20%;\n    background: linear-gradient(\n        to bottom,\n        transparent 0%,\n        rgba(255, 255, 255, 0.2) 50%,\n        transparent 100%\n    );\n    animation: cc-lineFlow 10s ease-in-out infinite;\n}\n\n.cc-promo-line:nth-child(1) { left: 5%; }\n.cc-promo-line:nth-child(2) { left: 20%; }\n.cc-promo-line:nth-child(3) { left: 35%; }\n.cc-promo-line:nth-child(4) { left: 50%; }\n.cc-promo-line:nth-child(5) { left: 65%; }\n.cc-promo-line:nth-child(6) { left: 80%; }\n.cc-promo-line:nth-child(7) { left: 95%; }\n\n.cc-promo-line:nth-child(1)::after { animation-delay: 0s; animation-duration: 9s; }\n.cc-promo-line:nth-child(2)::after { animation-delay: 2s; animation-duration: 11s; }\n.cc-promo-line:nth-child(3)::after { animation-delay: 1s; animation-duration: 8s; }\n.cc-promo-line:nth-child(4)::after { animation-delay: 3s; animation-duration: 10s; }\n.cc-promo-line:nth-child(5)::after { animation-delay: 0.5s; animation-duration: 12s; }\n.cc-promo-line:nth-child(6)::after { animation-delay: 2.5s; animation-duration: 9s; }\n.cc-promo-line:nth-child(7)::after { animation-delay: 1.5s; animation-duration: 11s; }\n\n\/* ============================================\n   MAIN CONTENT\n============================================ *\/\n.cc-promo-container {\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 40px;\n    position: relative;\n    z-index: 2;\n    width: 100%;\n}\n\n.cc-promo-content {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 80px;\n    align-items: center;\n}\n\n\/* ============================================\n   LEFT SIDE - COUNTDOWN\n============================================ *\/\n.cc-promo-countdown {\n    text-align: center;\n}\n\n.cc-promo-countdown-label {\n    font-family: 'Space Mono', monospace;\n    font-size: 12px;\n    color: var(--text-gray);\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    margin-bottom: 24px;\n}\n\n.cc-promo-countdown-timer {\n    display: flex;\n    justify-content: center;\n    gap: 8px;\n    margin-bottom: 32px;\n}\n\n.cc-promo-countdown-block {\n    text-align: center;\n    min-width: 70px;\n}\n\n.cc-promo-countdown-number {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(48px, 8vw, 80px);\n    line-height: 1;\n    letter-spacing: -2px;\n    color: var(--text-white);\n    display: block;\n    transition: all 0.3s ease;\n}\n\n.cc-promo-countdown-number.cc-updating {\n    animation: cc-numberChange 0.3s ease;\n}\n\n.cc-promo-countdown-unit {\n    font-family: 'Space Mono', monospace;\n    font-size: 11px;\n    color: var(--text-gray);\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-top: 8px;\n}\n\n.cc-promo-countdown-separator {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(48px, 8vw, 80px);\n    line-height: 1;\n    color: rgba(255, 255, 255, 0.3);\n    animation: cc-countPulse 1s ease-in-out infinite;\n}\n\n.cc-promo-countdown-event {\n    font-family: 'Space Mono', monospace;\n    font-size: 13px;\n    color: var(--text-light);\n    letter-spacing: 1px;\n    padding: 12px 24px;\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    display: inline-block;\n}\n\n\/* Floating ticket decoration *\/\n.cc-promo-ticket {\n    position: absolute;\n    left: -40px;\n    bottom: 20%;\n    width: 120px;\n    opacity: 0.15;\n    animation: cc-float 6s ease-in-out infinite;\n    pointer-events: none;\n}\n\n\/* ============================================\n   RIGHT SIDE - TEXT CONTENT\n============================================ *\/\n.cc-promo-text {\n    max-width: 560px;\n}\n\n.cc-promo-subtitle {\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    color: var(--text-gray);\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    margin-bottom: 24px;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.cc-promo-subtitle::before {\n    content: '';\n    width: 40px;\n    height: 1px;\n    background: var(--text-gray);\n}\n\n.cc-promo-title {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(42px, 6vw, 72px);\n    line-height: 1;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 32px;\n}\n\n.cc-promo-title span {\n    display: block;\n}\n\n.cc-promo-title .cc-outline {\n    -webkit-text-stroke: 1.5px var(--text-white);\n    -webkit-text-fill-color: transparent;\n}\n\n.cc-promo-desc {\n    font-family: 'Space Grotesk', sans-serif;\n    font-size: 18px;\n    line-height: 1.8;\n    color: var(--text-light);\n    margin-bottom: 48px;\n}\n\n\/* Stats row *\/\n.cc-promo-stats {\n    display: flex;\n    gap: 48px;\n    margin-bottom: 48px;\n    padding-bottom: 48px;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.cc-promo-stat {\n    text-align: left;\n}\n\n.cc-promo-stat-number {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: 48px;\n    line-height: 1;\n    color: var(--text-white);\n    margin-bottom: 8px;\n}\n\n.cc-promo-stat-label {\n    font-family: 'Space Mono', monospace;\n    font-size: 11px;\n    color: var(--text-gray);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n}\n\n\/* CTA Button *\/\n.cc-promo-cta {\n    display: inline-flex;\n    align-items: center;\n    gap: 16px;\n    background: var(--text-white);\n    color: var(--dark-bg);\n    padding: 20px 36px;\n    text-decoration: none;\n    font-family: 'Space Mono', monospace;\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    transition: all 0.4s ease;\n}\n\n.cc-promo-cta:hover {\n    background: rgba(255, 255, 255, 0.9);\n    transform: translateY(-3px);\n    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);\n}\n\n.cc-promo-cta svg {\n    transition: transform 0.3s ease;\n}\n\n.cc-promo-cta:hover svg {\n    transform: translateX(4px);\n}\n\n\/* ============================================\n   RESPONSIVE\n============================================ *\/\n@media (max-width: 1200px) {\n    .cc-promo-content { gap: 60px; }\n    .cc-promo-stats { gap: 32px; }\n}\n\n@media (max-width: 1024px) {\n    .cc-promo {\n        min-height: auto;\n        padding: 120px 0;\n    }\n    .cc-promo-content {\n        grid-template-columns: 1fr;\n        gap: 80px;\n        text-align: center;\n    }\n    .cc-promo-countdown { order: -1; }\n    .cc-promo-text { max-width: 100%; }\n    .cc-promo-subtitle { justify-content: center; }\n    .cc-promo-subtitle::before { display: none; }\n    .cc-promo-stats { justify-content: center; }\n    .cc-promo-stat { text-align: center; }\n    .cc-promo-ticket { display: none; }\n}\n\n@media (max-width: 768px) {\n    .cc-promo { padding: 80px 0; }\n    .cc-promo-container { padding: 0 20px; }\n    .cc-promo-countdown-timer { gap: 4px; }\n    .cc-promo-countdown-number { font-size: 40px; }\n    .cc-promo-countdown-separator { font-size: 40px; }\n    .cc-promo-countdown-block { min-width: 50px; }\n    .cc-promo-stats {\n        flex-direction: column;\n        gap: 24px;\n        align-items: center;\n    }\n    .cc-promo-cta {\n        width: 100%;\n        justify-content: center;\n    }\n    .cc-promo-line:nth-child(2),\n    .cc-promo-line:nth-child(4),\n    .cc-promo-line:nth-child(6) { display: none; }\n}\n\n@media (max-width: 480px) {\n    .cc-promo { padding: 60px 0; }\n    .cc-promo-title { font-size: 36px; }\n    .cc-promo-desc { font-size: 16px; }\n    .cc-promo-countdown-number { font-size: 32px; }\n    .cc-promo-countdown-separator { font-size: 32px; }\n    .cc-promo-stat-number { font-size: 36px; }\n    .cc-promo-countdown-block { min-width: 40px; }\n}\n<\/style>\n\n<!-- VIDEO PROMO SECTION -->\n<section class=\"cc-promo\">\n    <!-- Background Video\/Image -->\n    <div class=\"cc-promo-bg\">\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1501612780327-45045538702b?w=1920&h=1080&fit=crop\" alt=\"Choral Performance\" class=\"cc-promo-bg-media\">\n        <div class=\"cc-promo-bg-overlay\"><\/div>\n    <\/div>\n\n    <!-- Animated Lines -->\n    <div class=\"cc-promo-lines\">\n        <div class=\"cc-promo-line\"><\/div>\n        <div class=\"cc-promo-line\"><\/div>\n        <div class=\"cc-promo-line\"><\/div>\n        <div class=\"cc-promo-line\"><\/div>\n        <div class=\"cc-promo-line\"><\/div>\n        <div class=\"cc-promo-line\"><\/div>\n        <div class=\"cc-promo-line\"><\/div>\n    <\/div>\n\n    <!-- Floating Ticket Decoration -->\n    <svg class=\"cc-promo-ticket\" viewbox=\"0 0 100 150\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <rect x=\"5\" y=\"5\" width=\"90\" height=\"140\" rx=\"4\" stroke=\"white\" stroke-width=\"1\"\/>\n        <circle cx=\"5\" cy=\"50\" r=\"10\" fill=\"#0A0A0A\"\/>\n        <circle cx=\"95\" cy=\"50\" r=\"10\" fill=\"#0A0A0A\"\/>\n        <line x1=\"15\" y1=\"50\" x2=\"85\" y2=\"50\" stroke=\"white\" stroke-width=\"1\" stroke-dasharray=\"4 4\"\/>\n        <rect x=\"20\" y=\"70\" width=\"60\" height=\"4\" fill=\"white\" opacity=\"0.3\"\/>\n        <rect x=\"20\" y=\"85\" width=\"40\" height=\"4\" fill=\"white\" opacity=\"0.3\"\/>\n        <rect x=\"20\" y=\"100\" width=\"50\" height=\"4\" fill=\"white\" opacity=\"0.3\"\/>\n    <\/svg>\n\n    <div class=\"cc-promo-container\">\n        <div class=\"cc-promo-content\">\n            <!-- Left: Countdown -->\n            <div class=\"cc-promo-countdown cc-animate\">\n                <p class=\"cc-promo-countdown-label\">The Grand Final in<\/p>\n                <div class=\"cc-promo-countdown-timer\" id=\"cc-countdown\">\n                    <div class=\"cc-promo-countdown-block\">\n                        <span class=\"cc-promo-countdown-number\" id=\"cc-days\">--<\/span>\n                        <span class=\"cc-promo-countdown-unit\">Days<\/span>\n                    <\/div>\n                    <span class=\"cc-promo-countdown-separator\">:<\/span>\n                    <div class=\"cc-promo-countdown-block\">\n                        <span class=\"cc-promo-countdown-number\" id=\"cc-hours\">--<\/span>\n                        <span class=\"cc-promo-countdown-unit\">Hours<\/span>\n                    <\/div>\n                    <span class=\"cc-promo-countdown-separator\">:<\/span>\n                    <div class=\"cc-promo-countdown-block\">\n                        <span class=\"cc-promo-countdown-number\" id=\"cc-minutes\">--<\/span>\n                        <span class=\"cc-promo-countdown-unit\">Min<\/span>\n                    <\/div>\n                    <span class=\"cc-promo-countdown-separator\">:<\/span>\n                    <div class=\"cc-promo-countdown-block\">\n                        <span class=\"cc-promo-countdown-number\" id=\"cc-seconds\">--<\/span>\n                        <span class=\"cc-promo-countdown-unit\">Dry<\/span>\n                    <\/div>\n                <\/div>\n                <span class=\"cc-promo-countdown-event\">06 June 2026 | 19h00<\/span>\n            <\/div>\n\n            <!-- Right: Text Content -->\n            <div class=\"cc-promo-text\">\n                <p class=\"cc-promo-subtitle cc-animate cc-delay-1\">Upcoming events<\/p>\n                <h2 class=\"cc-promo-title cc-animate cc-delay-2\">\n                    <span>Get ready<\/span>\n                    <span>For the Season<\/span>\n                    <span class=\"cc-outline\">Inaugural<\/span>\n                <\/h2>\n                <p class=\"cc-promo-desc cc-animate cc-delay-2\">\n                    12 episodes of intense competition, breathtaking vocal performances and a musical journey across Cameroon. A unique experience that will go down in the history of choral music.\n                <\/p>\n\n                <!-- Stats -->\n                <div class=\"cc-promo-stats cc-animate cc-delay-3\">\n                    <div class=\"cc-promo-stat\">\n                        <div class=\"cc-promo-stat-number\">12<\/div>\n                        <div class=\"cc-promo-stat-label\">Episodes<\/div>\n                    <\/div>\n                    <div class=\"cc-promo-stat\">\n                        <div class=\"cc-promo-stat-number\">10<\/div>\n                        <div class=\"cc-promo-stat-label\">Regions<\/div>\n                    <\/div>\n                    <div class=\"cc-promo-stat\">\n                        <div class=\"cc-promo-stat-number\">1<\/div>\n                        <div class=\"cc-promo-stat-label\">Champion<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- CTA -->\n                <a href=\"#cc-hero\" class=\"cc-promo-cta cc-animate cc-delay-3\">\n                    <span>See the calendar<\/span>\n                    <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n                    <\/svg>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Scripts -->\n<script>\n(function() {\n    \/\/ Intersection Observer pour animations\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('cc-visible');\n            }\n        });\n    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\n\n    document.querySelectorAll('.cc-animate').forEach(el => observer.observe(el));\n\n    \/\/ ============================================\n    \/\/ COUNTDOWN - 6 JUIN 2026 \u00e0 19h00\n    \/\/ ============================================\n    const FINALE_DATE = new Date('2026-06-06T19:00:00+01:00');\n    \n    const elements = {\n        days: document.getElementById('cc-days'),\n        hours: document.getElementById('cc-hours'),\n        minutes: document.getElementById('cc-minutes'),\n        seconds: document.getElementById('cc-seconds')\n    };\n    \n    let previousValues = { days: null, hours: null, minutes: null, seconds: null };\n    \n    function updateElement(element, value, key) {\n        const formatted = value.toString().padStart(2, '0');\n        if (previousValues[key] !== formatted) {\n            element.classList.add('cc-updating');\n            element.textContent = formatted;\n            previousValues[key] = formatted;\n            setTimeout(() => element.classList.remove('cc-updating'), 300);\n        }\n    }\n    \n    function updateCountdown() {\n        const diff = FINALE_DATE.getTime() - Date.now();\n        \n        if (diff > 0) {\n            const days = Math.floor(diff \/ (1000 * 60 * 60 * 24));\n            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n            const minutes = Math.floor((diff % (1000 * 60 * 60)) \/ (1000 * 60));\n            const seconds = Math.floor((diff % (1000 * 60)) \/ 1000);\n            \n            updateElement(elements.days, days, 'days');\n            updateElement(elements.hours, hours, 'hours');\n            updateElement(elements.minutes, minutes, 'minutes');\n            updateElement(elements.seconds, seconds, 'seconds');\n        } else {\n            elements.days.textContent = '00';\n            elements.hours.textContent = '00';\n            elements.minutes.textContent = '00';\n            elements.seconds.textContent = '00';\n            document.querySelector('.cc-promo-countdown-label').textContent = \"C'est maintenant!\";\n        }\n    }\n    \n    updateCountdown();\n    setInterval(updateCountdown, 1000);\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-15a18fa e-flex e-con-boxed e-con e-parent\" data-id=\"15a18fa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9a7bfe2 elementor-widget elementor-widget-html\" data-id=\"9a7bfe2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* ============================================\n   FEATURED EVENT SECTION - CHORAL CLASH\n============================================ *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap');\n\n.cc-featured {\n    --primary-magenta: #E91E8C;\n    --primary-orange: #FF6B35;\n    --accent-gold: #FFD700;\n    --dark-bg: #0A0A0A;\n    --darker-bg: #050505;\n    --text-white: #FFFFFF;\n    --text-gray: #888888;\n    --text-light: #CCCCCC;\n}\n\n\/* ============================================\n   ANIMATIONS\n============================================ *\/\n@keyframes cc-lineFlow {\n    0% {\n        transform: translateY(-100%);\n    }\n    100% {\n        transform: translateY(100%);\n    }\n}\n\n@keyframes cc-ticketFloat {\n    0%, 100% {\n        transform: rotate(-6deg) translateY(0);\n    }\n    50% {\n        transform: rotate(-6deg) translateY(-15px);\n    }\n}\n\n.cc-animate {\n    opacity: 0;\n    transform: translateY(50px);\n    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.cc-animate.cc-visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n.cc-animate.cc-delay-1 { transition-delay: 0.1s; }\n.cc-animate.cc-delay-2 { transition-delay: 0.2s; }\n.cc-animate.cc-delay-3 { transition-delay: 0.3s; }\n.cc-animate.cc-delay-4 { transition-delay: 0.4s; }\n\n\/* ============================================\n   ANIMATED LINES BACKGROUND\n============================================ *\/\n.cc-featured-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    pointer-events: none;\n    z-index: 0;\n}\n\n.cc-featured-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: linear-gradient(\n        to bottom,\n        transparent 0%,\n        rgba(255, 255, 255, 0.02) 15%,\n        rgba(255, 255, 255, 0.05) 50%,\n        rgba(255, 255, 255, 0.02) 85%,\n        transparent 100%\n    );\n}\n\n.cc-featured-line::after {\n    content: '';\n    position: absolute;\n    top: -50%;\n    left: 0;\n    width: 100%;\n    height: 20%;\n    background: linear-gradient(\n        to bottom,\n        transparent 0%,\n        rgba(255, 255, 255, 0.15) 50%,\n        transparent 100%\n    );\n    animation: cc-lineFlow 9s ease-in-out infinite;\n}\n\n.cc-featured-line:nth-child(1) { left: 10%; }\n.cc-featured-line:nth-child(2) { left: 30%; }\n.cc-featured-line:nth-child(3) { left: 50%; }\n.cc-featured-line:nth-child(4) { left: 70%; }\n.cc-featured-line:nth-child(5) { left: 90%; }\n\n.cc-featured-line:nth-child(1)::after { animation-delay: 0s; animation-duration: 8s; }\n.cc-featured-line:nth-child(2)::after { animation-delay: 2s; animation-duration: 10s; }\n.cc-featured-line:nth-child(3)::after { animation-delay: 1s; animation-duration: 9s; }\n.cc-featured-line:nth-child(4)::after { animation-delay: 3s; animation-duration: 11s; }\n.cc-featured-line:nth-child(5)::after { animation-delay: 1.5s; animation-duration: 8s; }\n\n\/* ============================================\n   SECTION CONTAINER\n============================================ *\/\n.cc-featured {\n    padding: 50px 0;\n    position: relative;\n    overflow: hidden;\n    background-color: var(--dark-bg);\n    font-family: 'Space Grotesk', sans-serif;\n    color: var(--text-white);\n}\n\n.cc-featured-container {\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 40px;\n    position: relative;\n    z-index: 1;\n}\n\n\/* ============================================\n   MAIN GRID\n============================================ *\/\n.cc-featured-grid {\n    display: grid;\n    grid-template-columns: 1fr 1.2fr;\n    gap: 80px;\n    align-items: center;\n}\n\n\/* ============================================\n   LEFT - TICKET VISUAL\n============================================ *\/\n.cc-featured-visual {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 500px;\n}\n\n.cc-featured-ticket {\n    position: relative;\n    background: var(--text-white);\n    color: var(--dark-bg);\n    padding: 40px;\n    width: 320px;\n    transform: rotate(-6deg);\n    animation: cc-ticketFloat 6s ease-in-out infinite;\n    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);\n}\n\n\/* Bordures dentel\u00e9es *\/\n.cc-featured-ticket::before,\n.cc-featured-ticket::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 20px;\n    background-image: radial-gradient(circle, var(--dark-bg) 8px, transparent 8px);\n    background-size: 24px 20px;\n    background-position: 12px 0;\n}\n\n.cc-featured-ticket::before {\n    top: -10px;\n}\n\n.cc-featured-ticket::after {\n    bottom: -10px;\n}\n\n.cc-featured-ticket-header {\n    text-align: center;\n    padding-bottom: 24px;\n    border-bottom: 1px dashed rgba(0, 0, 0, 0.2);\n    margin-bottom: 24px;\n}\n\n.cc-featured-ticket-logo {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: 28px;\n    letter-spacing: 4px;\n    margin-bottom: 8px;\n}\n\n.cc-featured-ticket-season {\n    font-family: 'Space Mono', monospace;\n    font-size: 11px;\n    color: var(--text-gray);\n    letter-spacing: 2px;\n    text-transform: uppercase;\n}\n\n.cc-featured-ticket-main {\n    text-align: center;\n    margin-bottom: 24px;\n}\n\n.cc-featured-ticket-event {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: 42px;\n    line-height: 1;\n    letter-spacing: 2px;\n    margin-bottom: 16px;\n}\n\n.cc-featured-ticket-date {\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    color: var(--text-gray);\n}\n\n.cc-featured-ticket-details {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    padding-top: 24px;\n    border-top: 1px dashed rgba(0, 0, 0, 0.2);\n}\n\n.cc-featured-ticket-detail {\n    text-align: center;\n}\n\n.cc-featured-ticket-detail-label {\n    font-family: 'Space Mono', monospace;\n    font-size: 10px;\n    color: var(--text-gray);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    margin-bottom: 4px;\n}\n\n.cc-featured-ticket-detail-value {\n    font-family: 'Space Grotesk', sans-serif;\n    font-size: 16px;\n    font-weight: 600;\n}\n\n.cc-featured-ticket-barcode {\n    margin-top: 24px;\n    display: flex;\n    justify-content: center;\n    gap: 2px;\n    opacity: 0.3;\n}\n\n.cc-featured-ticket-barcode span {\n    display: block;\n    width: 2px;\n    background: var(--dark-bg);\n}\n\n\/* Deuxi\u00e8me ticket en arri\u00e8re-plan *\/\n.cc-featured-ticket-bg {\n    position: absolute;\n    top: 40px;\n    left: 50%;\n    transform: translateX(-50%) rotate(3deg);\n    width: 300px;\n    height: 400px;\n    background: rgba(255, 255, 255, 0.1);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    z-index: -1;\n}\n\n\/* ============================================\n   RIGHT - CONTENT\n============================================ *\/\n.cc-featured-content {\n    padding-left: 20px;\n}\n\n.cc-featured-label {\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    color: var(--text-gray);\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    margin-bottom: 24px;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.cc-featured-label::before {\n    content: '';\n    width: 40px;\n    height: 1px;\n    background: var(--text-gray);\n}\n\n.cc-featured-number {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(80px, 12vw, 140px);\n    line-height: 0.85;\n    letter-spacing: -4px;\n    margin-bottom: 16px;\n    background: linear-gradient(180deg, var(--text-white) 0%, rgba(255,255,255,0.3) 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n}\n\n.cc-featured-title {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: clamp(36px, 5vw, 56px);\n    line-height: 1;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 16px;\n}\n\n.cc-featured-datetime {\n    font-family: 'Space Mono', monospace;\n    font-size: 14px;\n    color: var(--text-gray);\n    margin-bottom: 32px;\n    padding: 12px 20px;\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    display: inline-block;\n}\n\n.cc-featured-desc {\n    font-family: 'Space Grotesk', sans-serif;\n    font-size: 18px;\n    line-height: 1.8;\n    color: var(--text-light);\n    margin-bottom: 40px;\n    max-width: 500px;\n}\n\n\/* Highlights List *\/\n.cc-featured-highlights {\n    list-style: none;\n    padding: 0;\n    margin: 0 0 48px 0;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n}\n\n.cc-featured-highlights li {\n    font-family: 'Space Mono', monospace;\n    font-size: 13px;\n    color: var(--text-light);\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.cc-featured-highlights li::before {\n    content: '';\n    width: 6px;\n    height: 6px;\n    background: var(--text-white);\n    flex-shrink: 0;\n}\n\n\/* CTA *\/\n.cc-featured-cta {\n    display: inline-flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.cc-featured-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    padding: 18px 32px;\n    text-decoration: none;\n    font-family: 'Space Mono', monospace;\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    transition: all 0.4s ease;\n}\n\n.cc-featured-btn-primary {\n    background: var(--text-white);\n    color: var(--dark-bg);\n}\n\n.cc-featured-btn-primary:hover {\n    background: rgba(255, 255, 255, 0.9);\n    transform: translateY(-3px);\n    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);\n}\n\n.cc-featured-btn-secondary {\n    background: transparent;\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    color: var(--text-white);\n}\n\n.cc-featured-btn-secondary:hover {\n    border-color: var(--text-white);\n    background: rgba(255, 255, 255, 0.05);\n    color: var(--text-white);\n    transform: translateY(-3px);\n}\n\n\/* Reset any default link styles *\/\n.cc-featured-btn-secondary:visited,\n.cc-featured-btn-secondary:active,\n.cc-featured-btn-secondary:focus {\n    color: var(--text-white);\n}\n\n.cc-featured-btn svg {\n    transition: transform 0.3s ease;\n}\n\n.cc-featured-btn:hover svg {\n    transform: translateX(4px);\n}\n\n\/* ============================================\n   RESPONSIVE\n============================================ *\/\n@media (max-width: 1200px) {\n    .cc-featured-grid {\n        gap: 60px;\n    }\n\n    .cc-featured-ticket {\n        width: 280px;\n        padding: 32px;\n    }\n\n    .cc-featured-visual {\n        min-height: 450px;\n    }\n}\n\n@media (max-width: 1024px) {\n    .cc-featured {\n        padding: 120px 0;\n    }\n\n    .cc-featured-grid {\n        grid-template-columns: 1fr;\n        gap: 80px;\n    }\n\n    .cc-featured-visual {\n        order: -1;\n        min-height: 400px;\n    }\n\n    .cc-featured-content {\n        padding-left: 0;\n        text-align: center;\n    }\n\n    .cc-featured-label {\n        justify-content: center;\n    }\n\n    .cc-featured-label::before {\n        display: none;\n    }\n\n    .cc-featured-desc {\n        max-width: 100%;\n    }\n\n    .cc-featured-highlights {\n        justify-content: center;\n    }\n\n    .cc-featured-cta {\n        justify-content: center;\n        flex-wrap: wrap;\n        gap: 16px;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-featured {\n        padding: 80px 0;\n    }\n\n    .cc-featured-container {\n        padding: 0 20px;\n    }\n\n    .cc-featured-ticket {\n        width: 260px;\n        padding: 28px;\n        transform: rotate(-3deg);\n    }\n\n    .cc-featured-ticket-event {\n        font-size: 32px;\n    }\n\n    .cc-featured-visual {\n        min-height: 350px;\n    }\n\n    .cc-featured-ticket-bg {\n        display: none;\n    }\n\n    .cc-featured-highlights {\n        grid-template-columns: 1fr;\n        text-align: left;\n    }\n\n    .cc-featured-btn {\n        width: 100%;\n        justify-content: center;\n    }\n\n    \/* Moins de lignes sur mobile *\/\n    .cc-featured-line:nth-child(2),\n    .cc-featured-line:nth-child(4) {\n        display: none;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-featured {\n        padding: 60px 0;\n    }\n\n    .cc-featured-number {\n        font-size: 80px;\n    }\n\n    .cc-featured-title {\n        font-size: 32px;\n    }\n\n    .cc-featured-ticket {\n        width: 240px;\n        padding: 24px;\n    }\n\n    .cc-featured-ticket-logo {\n        font-size: 22px;\n    }\n\n    .cc-featured-ticket-event {\n        font-size: 28px;\n    }\n}\n<\/style>\n\n<!-- FEATURED EVENT SECTION -->\n<section class=\"cc-featured\">\n    <!-- Animated Lines Background -->\n    <div class=\"cc-featured-lines\">\n        <div class=\"cc-featured-line\"><\/div>\n        <div class=\"cc-featured-line\"><\/div>\n        <div class=\"cc-featured-line\"><\/div>\n        <div class=\"cc-featured-line\"><\/div>\n        <div class=\"cc-featured-line\"><\/div>\n    <\/div>\n\n    <div class=\"cc-featured-container\">\n        <div class=\"cc-featured-grid\">\n            <!-- Left: Ticket Visual -->\n            <div class=\"cc-featured-visual cc-animate\">\n                <div class=\"cc-featured-ticket-bg\"><\/div>\n                <div class=\"cc-featured-ticket\">\n                    <div class=\"cc-featured-ticket-header\">\n                        <div class=\"cc-featured-ticket-logo\">CHORAL CLASH<\/div>\n                        <div class=\"cc-featured-ticket-season\">Season 1 - 2026<\/div>\n                    <\/div>\n                    <div class=\"cc-featured-ticket-main\">\n                        <div class=\"cc-featured-ticket-event\">Grand Final<\/div>\n                        <div class=\"cc-featured-ticket-date\">06 June 2026<\/div>\n                    <\/div>\n                    <div class=\"cc-featured-ticket-details\">\n                        <div class=\"cc-featured-ticket-detail\">\n                            <div class=\"cc-featured-ticket-detail-label\">Time<\/div>\n                            <div class=\"cc-featured-ticket-detail-value\">19h00<\/div>\n                        <\/div>\n                        <div class=\"cc-featured-ticket-detail\">\n                            <div class=\"cc-featured-ticket-detail-label\">Location<\/div>\n                            <div class=\"cc-featured-ticket-detail-value\">Buea<\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"cc-featured-ticket-barcode\">\n                        <span style=\"height: 30px;\"><\/span>\n                        <span style=\"height: 40px;\"><\/span>\n                        <span style=\"height: 25px;\"><\/span>\n                        <span style=\"height: 45px;\"><\/span>\n                        <span style=\"height: 30px;\"><\/span>\n                        <span style=\"height: 35px;\"><\/span>\n                        <span style=\"height: 40px;\"><\/span>\n                        <span style=\"height: 20px;\"><\/span>\n                        <span style=\"height: 45px;\"><\/span>\n                        <span style=\"height: 30px;\"><\/span>\n                        <span style=\"height: 35px;\"><\/span>\n                        <span style=\"height: 25px;\"><\/span>\n                        <span style=\"height: 40px;\"><\/span>\n                        <span style=\"height: 30px;\"><\/span>\n                        <span style=\"height: 45px;\"><\/span>\n                        <span style=\"height: 35px;\"><\/span>\n                        <span style=\"height: 25px;\"><\/span>\n                        <span style=\"height: 40px;\"><\/span>\n                        <span style=\"height: 30px;\"><\/span>\n                        <span style=\"height: 35px;\"><\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Right: Content -->\n            <div class=\"cc-featured-content\">\n                <p class=\"cc-featured-label cc-animate\">Episode 12<\/p>\n                <div class=\"cc-featured-number cc-animate cc-delay-1\">6<\/div>\n                <h2 class=\"cc-featured-title cc-animate cc-delay-1\">Grand Final<\/h2>\n                <div class=\"cc-featured-datetime cc-animate cc-delay-2\">06 June 2026 | 19h00<\/div>\n                <p class=\"cc-featured-desc cc-animate cc-delay-2\">\n                    The long-awaited moment when the best choirs face off one last time to win the title of Choral Clash Champion and make Cameroonian music history.\n                <\/p>\n\n                <!-- Highlights -->\n                <ul class=\"cc-featured-highlights cc-animate cc-delay-3\">\n                    <li>Outstanding performance<\/li>\n                    <li>Jury of renowned experts<\/li>\n                    <li>National TV broadcast<\/li>\n                    <li>Prize-giving ceremony<\/li>\n                    <li>Surprise guests<\/li>\n                    <li>Exclusive after-show<\/li>\n                <\/ul>\n\n                <!-- CTA -->\n                <div class=\"cc-featured-cta cc-animate cc-delay-4\">\n                    <a href=\"https:\/\/choralclash.com\/en\/ticket-office\/\" class=\"cc-featured-btn cc-featured-btn-primary\">\n                        <span>Reserve my place<\/span>\n                        <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n                        <\/svg>\n                    <\/a>\n                    <a href=\"https:\/\/choralclash.com\/en\/about\/\" class=\"cc-featured-btn cc-featured-btn-secondary\">\n                        <span>More info<\/span>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Script pour animations au scroll -->\n<script>\n(function() {\n    const observerOptions = {\n        threshold: 0.1,\n        rootMargin: '0px 0px -50px 0px'\n    };\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('cc-visible');\n            }\n        });\n    }, observerOptions);\n\n    document.querySelectorAll('.cc-animate').forEach(el => {\n        observer.observe(el);\n    });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Ep. 1 05\/04 Round 1 - The Journey Begins [5 April 2026 | 19h00] \u2726 Ep. 2 12\/04 Round 2 - Raise the Bar [12 April 2026 | 19h00] \u2726 Ep. 3 19\/04 Makossa Night [19 April 2026 | 19h00] \u2726 Ep. 4 26\/04 Cameroon Pop Vibes [26 April 2026 | 19h00] \u2726 Ep. 5 [...] [...] [Ep. 5<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":676,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":3612,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages\/15\/revisions\/3612"}],"wp:attachment":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}