{"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\/fr\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<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\">\u00c9p. 1<\/span>\n                <div class=\"cc-episode-date\">05\/04<\/div>\n                <div class=\"cc-episode-title\">Round 1 \u2013 The Journey Begins<\/div>\n                <div class=\"cc-episode-info\">[5 Avril 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\">\u00c9p. 2<\/span>\n                <div class=\"cc-episode-date\">12\/04<\/div>\n                <div class=\"cc-episode-title\">Round 2 \u2013 Raise the Bar<\/div>\n                <div class=\"cc-episode-info\">[12 Avril 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\">\u00c9p. 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 Avril 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\">\u00c9p. 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 Avril 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\">\u00c9p. 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 Mai 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\">\u00c9p. 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 Mai 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\">\u00c9p. 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 Mai 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\">\u00c9p. 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 Mai 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\">\u00c9p. 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 Mai 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\">\u00c9p. 10 \u2013 FINALE<\/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 Juin 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\">\u00c9p. 1<\/span>\n                <div class=\"cc-episode-date\">05\/04<\/div>\n                <div class=\"cc-episode-title\">Round 1 \u2013 The Journey Begins<\/div>\n                <div class=\"cc-episode-info\">[5 Avril 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\">\u00c9p. 2<\/span>\n                <div class=\"cc-episode-date\">12\/04<\/div>\n                <div class=\"cc-episode-title\">Round 2 \u2013 Raise the Bar<\/div>\n                <div class=\"cc-episode-info\">[12 Avril 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\">\u00c9p. 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 Avril 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\">\u00c9p. 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 Avril 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\">\u00c9p. 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 Mai 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\">\u00c9p. 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 Mai 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\">\u00c9p. 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 Mai 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\">\u00c9p. 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 Mai 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\">\u00c9p. 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 Mai 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\">\u00c9p. 10 \u2013 FINALE<\/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 Juin 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\">Chorales s\u00e9lectionn\u00e9es dans tout le Cameroun pour la premi\u00e8re saison historique de Choral Clash.<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"cc-hero-title-wrapper\">\n                <h1 class=\"cc-hero-title\">\n                    <span>LA NOUVELLE VOIX<\/span>\n                    <span class=\"cc-outline\">DU CAMEROUN<\/span>\n                <\/h1>\n                <div class=\"cc-hero-cta\">\n                    <a href=\"\/register-your-choir\" class=\"cc-hero-cta-btn\">\n                        <span>Inscrivez-vous<\/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=\"Performance Chorale\">\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=\"Choristes\">\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=\"C\u00e9l\u00e9bration\">\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=\"Lumi\u00e8res Concert\">\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\">Le premier concours national de chorales<\/p>\n            <h2 class=\"cc-intro-title cc-animate\">\n                Choral Clash red\u00e9finit la sc\u00e8ne musicale camerounaise, c\u00e9l\u00e9brant le talent vocal, la cr\u00e9ativit\u00e9 et la fiert\u00e9 culturelle.\n            <\/h2>\n            <a href=\"#cc-hero\" class=\"cc-intro-btn cc-animate\">\n                <span>D\u00e9couvrir tous les \u00e9pisodes<\/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>Galerie<\/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>Glissez pour explorer<\/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\">Saison 1<\/p>\n        <h2 class=\"cc-chorales-title\">Les Chorales en Comp\u00e9tition<\/h2>\n        <p class=\"cc-chorales-desc\">D\u00e9couvrez les talents exceptionnels qui s'affronteront pour le titre de meilleure chorale du Cameroun.<\/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\">Chargement des chorales...<\/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=\"\/vote\" class=\"cc-chorales-btn\">\n            <span>Vote ma chorale<\/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>Une C\u00e9l\u00e9bration<\/span>\n                    <span>De L'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 est le premier concours t\u00e9l\u00e9vis\u00e9 national d\u00e9di\u00e9 aux chorales du Cameroun. Notre mission est de r\u00e9v\u00e9ler, c\u00e9l\u00e9brer et propulser les talents vocaux qui font vibrer notre nation, tout en pr\u00e9servant notre riche patrimoine musical.\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 \u00c9pisodes<\/h4>\n                            <p>Une saison compl\u00e8te de comp\u00e9tition intense<\/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>Prix Majeurs<\/h4>\n                            <p>R\u00e9compenses exceptionnelles pour les gagnants<\/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>Diffusion TV<\/h4>\n                            <p>Retransmission sur les cha\u00eenes nationales<\/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 R\u00e9gions<\/h4>\n                            <p>Des chorales de tout le Cameroun<\/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=\"\/register-your-choir\" class=\"cc-about-btn cc-about-btn-primary\">\n                        <span>Inscrivez votre chorale<\/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=\"\/about\" class=\"cc-about-btn cc-about-btn-secondary\">\n                        <span>En savoir plus<\/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\">Saison 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\">La Grande Finale dans<\/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\">Jours<\/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\">Heures<\/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\">Sec<\/span>\n                    <\/div>\n                <\/div>\n                <span class=\"cc-promo-countdown-event\">06 Juin 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\">\u00c9v\u00e8nement \u00e0 venir<\/p>\n                <h2 class=\"cc-promo-title cc-animate cc-delay-2\">\n                    <span>Pr\u00e9parez-vous<\/span>\n                    <span>Pour La Saison<\/span>\n                    <span class=\"cc-outline\">Inaugurale<\/span>\n                <\/h2>\n                <p class=\"cc-promo-desc cc-animate cc-delay-2\">\n                    12 \u00e9pisodes de comp\u00e9tition intense, des performances vocales \u00e0 couper le souffle, et un voyage musical \u00e0 travers tout le Cameroun. Une exp\u00e9rience in\u00e9dite qui marquera l'histoire de la musique chorale.\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\">\u00c9pisodes<\/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\">R\u00e9gions<\/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>Voir le calendrier<\/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\">Saison 1 \u2022 2026<\/div>\n                    <\/div>\n                    <div class=\"cc-featured-ticket-main\">\n                        <div class=\"cc-featured-ticket-event\">Grande Finale<\/div>\n                        <div class=\"cc-featured-ticket-date\">06 Juin 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\">Heure<\/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\">Lieu<\/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\">\u00c9pisode 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\">Grande Finale<\/h2>\n                <div class=\"cc-featured-datetime cc-animate cc-delay-2\">06 Juin 2026 | 19h00<\/div>\n                <p class=\"cc-featured-desc cc-animate cc-delay-2\">\n                    Le moment tant attendu o\u00f9 les meilleures chorales s'affrontent une derni\u00e8re fois pour remporter le titre de Champion de Choral Clash et marquer l'histoire de la musique camerounaise.\n                <\/p>\n\n                <!-- Highlights -->\n                <ul class=\"cc-featured-highlights cc-animate cc-delay-3\">\n                    <li>Performances exceptionnelles<\/li>\n                    <li>Jury d'experts renomm\u00e9s<\/li>\n                    <li>Diffusion TV nationale<\/li>\n                    <li>Remise des prix<\/li>\n                    <li>Invit\u00e9s surprises<\/li>\n                    <li>Apr\u00e8s-show exclusif<\/li>\n                <\/ul>\n\n                <!-- CTA -->\n                <div class=\"cc-featured-cta cc-animate cc-delay-4\">\n                    <a href=\"\/billetterie\" class=\"cc-featured-btn cc-featured-btn-primary\">\n                        <span>R\u00e9server ma 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=\"\/about\" class=\"cc-featured-btn cc-featured-btn-secondary\">\n                        <span>Plus d'infos<\/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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u00c9p. 1 05\/04 Round 1 \u2013 The Journey Begins [5 Avril 2026 | 19h00] \u2726 \u00c9p. 2 12\/04 Round 2 \u2013 Raise the Bar [12 Avril 2026 | 19h00] \u2726 \u00c9p. 3 19\/04 Makossa Night [19 Avril 2026 | 19h00] \u2726 \u00c9p. 4 26\/04 Cameroon Pop Vibes [26 Avril 2026 | 19h00] \u2726 \u00c9p. 5 [&hellip;]<\/p>\n","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\/fr\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":676,"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":3612,"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/pages\/15\/revisions\/3612"}],"wp:attachment":[{"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}