{"id":18,"date":"2025-04-26T00:31:36","date_gmt":"2025-04-26T00:31:36","guid":{"rendered":"https:\/\/choralclash.com\/?page_id=18"},"modified":"2026-01-08T14:42:54","modified_gmt":"2026-01-08T14:42:54","slug":"about","status":"publish","type":"page","link":"https:\/\/choralclash.com\/en\/about\/","title":{"rendered":"About"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"18\" class=\"elementor elementor-18\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-321517d e-con-full e-flex e-con e-parent\" data-id=\"321517d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-183ea2d elementor-widget elementor-widget-html\" data-id=\"183ea2d\" 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 - PAGE \u00c0 PROPOS\nSECTION 1: HERO\n==============================================\n-->\n\n<!-- GSAP CDN -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<style>\n\/* ============================================\n   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\/* ============================================\n   CSS VARIABLES\n   ============================================ *\/\n:root {\n    --cc-black: #000000;\n    --cc-dark: #0a0a0a;\n    --cc-white: #ffffff;\n    --cc-gray: #888888;\n    --cc-gold: #d4af37;\n    --cc-gold-light: #f4d03f;\n    --cc-magenta: #ec4899;\n    --cc-orange: #f97316;\n    --cc-red: #ef4444;\n    --cc-font-display: 'Bebas Neue', sans-serif;\n    --cc-font-body: 'Space Grotesk', sans-serif;\n    --cc-font-mono: 'Space Mono', monospace;\n    --cc-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* ============================================\n   HERO SECTION\n   ============================================ *\/\n.cc-about-hero {\n    position: relative;\n    min-height: 100vh;\n    background: var(--cc-black);\n    overflow: hidden;\n}\n\n\/* Vertical Lines *\/\n.cc-about-hero-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-about-hero-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.08);\n    transform: scaleY(0);\n    transform-origin: top;\n    animation: cc-line-reveal 1.5s ease-out forwards;\n}\n\n.cc-about-hero-line:nth-child(1) {\n    left: 25%;\n    animation-delay: 0.2s;\n}\n\n.cc-about-hero-line:nth-child(2) {\n    left: 50%;\n    animation-delay: 0.4s;\n}\n\n.cc-about-hero-line:nth-child(3) {\n    left: 75%;\n    animation-delay: 0.6s;\n}\n\n\/* Line Reveal Animation *\/\n@keyframes cc-line-reveal {\n    0% {\n        transform: scaleY(0);\n    }\n    100% {\n        transform: scaleY(1);\n    }\n}\n\n\/* Glow Effect - Light traveling down *\/\n.cc-about-hero-line::after {\n    content: '';\n    position: absolute;\n    top: -100%;\n    left: -2px;\n    width: 5px;\n    height: 80px;\n    background: linear-gradient(\n        180deg,\n        transparent 0%,\n        rgba(212, 175, 55, 0.6) 50%,\n        transparent 100%\n    );\n    filter: blur(2px);\n    animation: cc-line-glow 4s ease-in-out infinite;\n}\n\n.cc-about-hero-line:nth-child(1)::after {\n    animation-delay: 0s;\n}\n\n.cc-about-hero-line:nth-child(2)::after {\n    animation-delay: 1.5s;\n}\n\n.cc-about-hero-line:nth-child(3)::after {\n    animation-delay: 3s;\n}\n\n@keyframes cc-line-glow {\n    0% {\n        top: -100px;\n        opacity: 0;\n    }\n    10% {\n        opacity: 1;\n    }\n    90% {\n        opacity: 1;\n    }\n    100% {\n        top: 100%;\n        opacity: 0;\n    }\n}\n\n\/* Gradient Background - Right Side *\/\n.cc-about-hero::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 60%;\n    height: 100%;\n    background: \n        radial-gradient(ellipse at 100% 0%, rgba(239, 68, 68, 0.4) 0%, transparent 50%),\n        radial-gradient(ellipse at 80% 50%, rgba(249, 115, 22, 0.3) 0%, transparent 40%),\n        radial-gradient(ellipse at 100% 100%, rgba(236, 72, 153, 0.2) 0%, transparent 50%);\n    pointer-events: none;\n    z-index: 1;\n}\n\n\/* Main Container *\/\n.cc-about-hero-container {\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 60px;\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n}\n\n\/* Content Grid *\/\n.cc-about-hero-grid {\n    display: grid;\n    grid-template-columns: 1fr 1.2fr;\n    gap: 60px;\n    align-items: center;\n    width: 100%;\n    padding: 120px 0 180px;\n}\n\n\/* ============================================\n   LEFT CONTENT\n   ============================================ *\/\n.cc-about-hero-content {\n    position: relative;\n}\n\n\/* Bracket Label *\/\n.cc-about-hero-label {\n    font-family: var(--cc-font-body);\n    font-size: 14px;\n    font-weight: 400;\n    letter-spacing: 3px;\n    color: var(--cc-white);\n    margin-bottom: 40px;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n\/* Description *\/\n.cc-about-hero-description {\n    font-family: var(--cc-font-body);\n    font-size: 20px;\n    font-weight: 300;\n    line-height: 1.8;\n    color: var(--cc-white);\n    max-width: 480px;\n    opacity: 0;\n    transform: translateY(30px);\n}\n\n\/* ============================================\n   RIGHT - IMAGE (Background Image)\n   ============================================ *\/\n.cc-about-hero-visual {\n    position: relative;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    opacity: 0;\n    transform: translateX(50px);\n}\n\n.cc-about-hero-image-wrapper {\n    position: relative;\n    width: 100%;\n    max-width: 420px;\n    height: 320px;\n    border-radius: 12px;\n    background-image: url('https:\/\/images.unsplash.com\/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');\n    background-size: cover;\n    background-position: center center;\n    background-repeat: no-repeat;\n}\n\n\/* Color Overlay on Image - D\u00c9SACTIV\u00c9 *\/\n.cc-about-hero-image-overlay {\n    display: none;\n}\n\n\/* Vignette Effect - D\u00c9SACTIV\u00c9 *\/\n.cc-about-hero-image-vignette {\n    display: none;\n}\n\n\/* ============================================\n   MARQUEE SECTION\n   ============================================ *\/\n.cc-about-hero-marquee {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background: var(--cc-black);\n    padding: 25px 0;\n    overflow: hidden;\n    z-index: 10;\n    border-top: 1px solid rgba(255,255,255,0.08);\n}\n\n.cc-about-hero-marquee-track {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    animation: cc-marquee-scroll 25s linear infinite;\n}\n\n@keyframes cc-marquee-scroll {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(-50%); }\n}\n\n.cc-about-hero-marquee-item {\n    display: flex;\n    align-items: center;\n    gap: 50px;\n    padding: 0 50px;\n}\n\n.cc-about-hero-marquee-text {\n    font-family: var(--cc-font-display);\n    font-size: clamp(70px, 10vw, 120px);\n    font-weight: 400;\n    color: var(--cc-white);\n    text-transform: uppercase;\n    letter-spacing: 4px;\n    white-space: nowrap;\n    line-height: 1;\n}\n\n\/* Cross\/Plus Icon *\/\n.cc-about-hero-marquee-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    flex-shrink: 0;\n}\n\n.cc-about-hero-marquee-icon svg {\n    width: 100%;\n    height: 100%;\n    fill: var(--cc-white);\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 1200px) {\n    .cc-about-hero-container {\n        padding: 0 40px;\n    }\n    \n    .cc-about-hero-grid {\n        gap: 50px;\n    }\n    \n    .cc-about-hero-image-wrapper {\n        max-width: 380px;\n        height: 290px;\n    }\n}\n\n@media (max-width: 992px) {\n    .cc-about-hero-grid {\n        grid-template-columns: 1fr;\n        gap: 50px;\n        padding: 120px 0 200px;\n    }\n    \n    .cc-about-hero-content {\n        text-align: center;\n    }\n    \n    .cc-about-hero-description {\n        margin: 0 auto;\n    }\n    \n    .cc-about-hero-visual {\n        justify-content: center;\n    }\n    \n    .cc-about-hero-image-wrapper {\n        max-width: 350px;\n        height: 270px;\n    }\n    \n    .cc-about-hero-marquee-text {\n        font-size: clamp(50px, 10vw, 90px);\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-about-hero-container {\n        padding: 0 24px;\n    }\n    \n    .cc-about-hero-grid {\n        padding: 100px 0 180px;\n    }\n    \n    .cc-about-hero-label {\n        font-size: 12px;\n        letter-spacing: 2px;\n    }\n    \n    .cc-about-hero-description {\n        font-size: 18px;\n    }\n    \n    .cc-about-hero-image-wrapper {\n        max-width: 100%;\n        height: 250px;\n    }\n    \n    .cc-about-hero-marquee-text {\n        font-size: clamp(45px, 12vw, 70px);\n    }\n    \n    .cc-about-hero-marquee-icon {\n        width: 20px;\n        height: 20px;\n    }\n    \n    .cc-about-hero-marquee-item {\n        gap: 30px;\n        padding: 0 30px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-about-hero-grid {\n        padding: 80px 0 160px;\n        gap: 40px;\n    }\n    \n    .cc-about-hero-description {\n        font-size: 16px;\n    }\n    \n    .cc-about-hero-image-wrapper {\n        height: 220px;\n    }\n    \n    .cc-about-hero-marquee {\n        padding: 20px 0;\n    }\n    \n    .cc-about-hero-marquee-text {\n        font-size: 40px;\n        letter-spacing: 2px;\n    }\n}\n<\/style>\n\n<!-- HERO SECTION -->\n<section class=\"cc-about-hero\" id=\"cc-about-hero\">\n    <!-- Vertical Lines -->\n    <div class=\"cc-about-hero-lines\">\n        <div class=\"cc-about-hero-line\"><\/div>\n        <div class=\"cc-about-hero-line\"><\/div>\n        <div class=\"cc-about-hero-line\"><\/div>\n    <\/div>\n    \n    <div class=\"cc-about-hero-container\">\n        <div class=\"cc-about-hero-grid\">\n            \n            <!-- Left Content -->\n            <div class=\"cc-about-hero-content\">\n                <!-- Bracket Label -->\n                <div class=\"cc-about-hero-label\">[THE VOICE OF CAMEROON]<\/div>\n                \n                <!-- Description -->\n                <p class=\"cc-about-hero-description\">\n                    Where passion, creativity and harmony come together to showcase the best voices from every corner of Cameroon in a powerful celebration of culture, music and unity.\n                <\/p>\n            <\/div>\n            \n            <!-- Right Visual -->\n            <div class=\"cc-about-hero-visual\">\n                <div class=\"cc-about-hero-image-wrapper\"><\/div>\n            <\/div>\n            \n        <\/div>\n    <\/div>\n    \n    <!-- Marquee - CHORAL CLASH -->\n    <div class=\"cc-about-hero-marquee\">\n        <div class=\"cc-about-hero-marquee-track\">\n            <!-- Item 1 -->\n            <div class=\"cc-about-hero-marquee-item\">\n                <span class=\"cc-about-hero-marquee-text\">Choral Clash<\/span>\n                <span class=\"cc-about-hero-marquee-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M11 2v9H2v2h9v9h2v-9h9v-2h-9V2h-2z\"\/>\n                    <\/svg>\n                <\/span>\n            <\/div>\n            <!-- Item 2 -->\n            <div class=\"cc-about-hero-marquee-item\">\n                <span class=\"cc-about-hero-marquee-text\">Choral Clash<\/span>\n                <span class=\"cc-about-hero-marquee-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M11 2v9H2v2h9v9h2v-9h9v-2h-9V2h-2z\"\/>\n                    <\/svg>\n                <\/span>\n            <\/div>\n            <!-- Item 3 -->\n            <div class=\"cc-about-hero-marquee-item\">\n                <span class=\"cc-about-hero-marquee-text\">Choral Clash<\/span>\n                <span class=\"cc-about-hero-marquee-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M11 2v9H2v2h9v9h2v-9h9v-2h-9V2h-2z\"\/>\n                    <\/svg>\n                <\/span>\n            <\/div>\n            <!-- Item 4 -->\n            <div class=\"cc-about-hero-marquee-item\">\n                <span class=\"cc-about-hero-marquee-text\">Choral Clash<\/span>\n                <span class=\"cc-about-hero-marquee-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M11 2v9H2v2h9v9h2v-9h9v-2h-9V2h-2z\"\/>\n                    <\/svg>\n                <\/span>\n            <\/div>\n            <!-- Duplicate for seamless loop -->\n            <!-- Item 5 -->\n            <div class=\"cc-about-hero-marquee-item\">\n                <span class=\"cc-about-hero-marquee-text\">Choral Clash<\/span>\n                <span class=\"cc-about-hero-marquee-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M11 2v9H2v2h9v9h2v-9h9v-2h-9V2h-2z\"\/>\n                    <\/svg>\n                <\/span>\n            <\/div>\n            <!-- Item 6 -->\n            <div class=\"cc-about-hero-marquee-item\">\n                <span class=\"cc-about-hero-marquee-text\">Choral Clash<\/span>\n                <span class=\"cc-about-hero-marquee-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M11 2v9H2v2h9v9h2v-9h9v-2h-9V2h-2z\"\/>\n                    <\/svg>\n                <\/span>\n            <\/div>\n            <!-- Item 7 -->\n            <div class=\"cc-about-hero-marquee-item\">\n                <span class=\"cc-about-hero-marquee-text\">Choral Clash<\/span>\n                <span class=\"cc-about-hero-marquee-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M11 2v9H2v2h9v9h2v-9h9v-2h-9V2h-2z\"\/>\n                    <\/svg>\n                <\/span>\n            <\/div>\n            <!-- Item 8 -->\n            <div class=\"cc-about-hero-marquee-item\">\n                <span class=\"cc-about-hero-marquee-text\">Choral Clash<\/span>\n                <span class=\"cc-about-hero-marquee-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M11 2v9H2v2h9v9h2v-9h9v-2h-9V2h-2z\"\/>\n                    <\/svg>\n                <\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ ============================================\n\/\/ GSAP ANIMATIONS\n\/\/ ============================================\ndocument.addEventListener('DOMContentLoaded', function() {\n    gsap.registerPlugin(ScrollTrigger);\n    \n    \/\/ Initial load timeline\n    const heroTl = gsap.timeline({\n        defaults: { ease: \"power3.out\" }\n    });\n    \n    \/\/ Label animation\n    heroTl.to('.cc-about-hero-label', {\n        opacity: 1,\n        y: 0,\n        duration: 1\n    }, 0.3);\n    \n    \/\/ Description animation\n    heroTl.to('.cc-about-hero-description', {\n        opacity: 1,\n        y: 0,\n        duration: 1\n    }, 0.5);\n    \n    \/\/ Image animation\n    heroTl.to('.cc-about-hero-visual', {\n        opacity: 1,\n        x: 0,\n        duration: 1.2,\n        ease: \"power2.out\"\n    }, 0.4);\n    \n    \/\/ Parallax on scroll for image\n    gsap.to('.cc-about-hero-image', {\n        yPercent: 15,\n        ease: \"none\",\n        scrollTrigger: {\n            trigger: '.cc-about-hero',\n            start: \"top top\",\n            end: \"bottom top\",\n            scrub: 1\n        }\n    });\n    \n    \/\/ Fade out content on scroll\n    gsap.to('.cc-about-hero-content', {\n        opacity: 0,\n        y: -50,\n        ease: \"none\",\n        scrollTrigger: {\n            trigger: '.cc-about-hero',\n            start: \"center center\",\n            end: \"bottom top\",\n            scrub: 1\n        }\n    });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-575416b e-con-full e-flex e-con e-parent\" data-id=\"575416b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5cdc590 elementor-widget elementor-widget-html\" data-id=\"5cdc590\" 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 - PAGE \u00c0 PROPOS\nSECTION 2: NOTRE MISSION - Style Premium\n==============================================\n-->\n\n<style>\n\/* ============================================\n   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\/* ============================================\n   CSS VARIABLES\n   ============================================ *\/\n:root {\n    --cc-black: #000000;\n    --cc-dark: #0a0a0a;\n    --cc-gray-dark: #111111;\n    --cc-gray: #1a1a1a;\n    --cc-gray-light: #888888;\n    --cc-gray-lighter: #aaaaaa;\n    --cc-white: #ffffff;\n    --cc-gold: #c9a227;\n    --cc-gold-light: #d4b044;\n    --cc-font-display: 'Bebas Neue', sans-serif;\n    --cc-font-body: 'Space Grotesk', sans-serif;\n    --cc-font-mono: 'Space Mono', monospace;\n    --cc-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* ============================================\n   SECTION NOTRE MISSION\n   ============================================ *\/\n.cc-mission {\n    position: relative;\n    background: var(--cc-black);\n    padding: 50px 0;\n    overflow: hidden;\n}\n\n\/* Vertical Lines *\/\n.cc-mission-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-mission-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.04);\n}\n\n.cc-mission-line:nth-child(1) { left: 25%; }\n.cc-mission-line:nth-child(2) { left: 50%; }\n.cc-mission-line:nth-child(3) { left: 75%; }\n\n\/* Container *\/\n.cc-mission-container {\n    position: relative;\n    z-index: 2;\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 60px;\n}\n\n\/* Header *\/\n.cc-mission-header {\n    margin-bottom: 80px;\n}\n\n.cc-mission-label {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    color: var(--cc-gray-lighter);\n    margin-bottom: 20px;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n.cc-mission-title {\n    font-family: var(--cc-font-display);\n    font-size: clamp(60px, 10vw, 120px);\n    line-height: 1;\n    color: var(--cc-white);\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    margin: 0;\n}\n\n.cc-mission-title-line {\n    display: block;\n    overflow: hidden;\n}\n\n.cc-mission-title-text {\n    display: block;\n    transform: translateY(100%);\n}\n\n\/* Cards Grid *\/\n.cc-mission-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 30px;\n}\n\n\/* Card *\/\n.cc-mission-card {\n    position: relative;\n    background: var(--cc-gray-dark);\n    border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 0;\n    padding: 40px;\n    opacity: 0;\n    transform: translateY(40px);\n    transition: all 0.5s var(--cc-transition);\n    overflow: hidden;\n}\n\n\/* Barre gold subtile au hover *\/\n.cc-mission-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 2px;\n    height: 100%;\n    background: var(--cc-gold);\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 0.5s var(--cc-transition);\n}\n\n.cc-mission-card:hover {\n    border-color: rgba(255, 255, 255, 0.1);\n    transform: translateY(-5px);\n    background: rgba(20, 20, 20, 1);\n}\n\n.cc-mission-card:hover::before {\n    transform: scaleY(1);\n}\n\n\/* Card Number *\/\n.cc-mission-card-number {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    color: rgba(255, 255, 255, 0.12);\n    margin-bottom: 30px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.cc-mission-card-number::after {\n    content: '';\n    flex: 1;\n    height: 1px;\n    background: rgba(255, 255, 255, 0.06);\n}\n\n\/* Card Icon *\/\n.cc-mission-card-icon {\n    width: 60px;\n    height: 60px;\n    background: rgba(255, 255, 255, 0.03);\n    border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 24px;\n    transition: all 0.4s var(--cc-transition);\n}\n\n.cc-mission-card:hover .cc-mission-card-icon {\n    background: rgba(255, 255, 255, 0.06);\n    border-color: rgba(255, 255, 255, 0.12);\n}\n\n.cc-mission-card-icon svg {\n    width: 26px;\n    height: 26px;\n    stroke: var(--cc-gray-lighter);\n    fill: none;\n    stroke-width: 1.5;\n    transition: stroke 0.4s var(--cc-transition);\n}\n\n.cc-mission-card:hover .cc-mission-card-icon svg {\n    stroke: var(--cc-white);\n}\n\n\/* Card Title *\/\n.cc-mission-card-title {\n    font-family: var(--cc-font-body);\n    font-size: 22px;\n    font-weight: 600;\n    color: var(--cc-white);\n    margin: 0 0 16px;\n    line-height: 1.3;\n}\n\n\/* Card Description *\/\n.cc-mission-card-description {\n    font-family: var(--cc-font-body);\n    font-size: 15px;\n    font-weight: 300;\n    line-height: 1.7;\n    color: var(--cc-gray-light);\n    margin: 0;\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 1200px) {\n    .cc-mission-container {\n        padding: 0 40px;\n    }\n    \n    .cc-mission-grid {\n        gap: 24px;\n    }\n    \n    .cc-mission-card {\n        padding: 32px;\n    }\n}\n\n@media (max-width: 992px) {\n    .cc-mission {\n        padding: 100px 0;\n    }\n    \n    .cc-mission-grid {\n        grid-template-columns: 1fr;\n        max-width: 600px;\n        margin: 0 auto;\n    }\n    \n    .cc-mission-header {\n        text-align: center;\n        margin-bottom: 60px;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-mission {\n        padding: 80px 0;\n    }\n    \n    .cc-mission-container {\n        padding: 0 24px;\n    }\n    \n    .cc-mission-card {\n        padding: 28px;\n    }\n    \n    .cc-mission-card-title {\n        font-size: 20px;\n    }\n    \n    .cc-mission-card-description {\n        font-size: 14px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-mission {\n        padding: 60px 0;\n    }\n    \n    .cc-mission-header {\n        margin-bottom: 40px;\n    }\n    \n    .cc-mission-card {\n        padding: 24px;\n    }\n    \n    .cc-mission-card-icon {\n        width: 50px;\n        height: 50px;\n    }\n    \n    .cc-mission-card-icon svg {\n        width: 24px;\n        height: 24px;\n    }\n}\n<\/style>\n\n<!-- SECTION NOTRE MISSION -->\n<section class=\"cc-mission\" id=\"cc-mission\">\n    <!-- Vertical Lines -->\n    <div class=\"cc-mission-lines\">\n        <div class=\"cc-mission-line\"><\/div>\n        <div class=\"cc-mission-line\"><\/div>\n        <div class=\"cc-mission-line\"><\/div>\n    <\/div>\n    \n    <div class=\"cc-mission-container\">\n        <!-- Header -->\n        <div class=\"cc-mission-header\">\n            <div class=\"cc-mission-label\">[Our Mission]<\/div>\n            <h2 class=\"cc-mission-title\">\n                <span class=\"cc-mission-title-line\">\n                    <span class=\"cc-mission-title-text\">Our<\/span>\n                <\/span>\n                <span class=\"cc-mission-title-line\">\n                    <span class=\"cc-mission-title-text\">Mission<\/span>\n                <\/span>\n            <\/h2>\n        <\/div>\n        \n        <!-- Cards Grid -->\n        <div class=\"cc-mission-grid\">\n            <!-- Card 1 - \u00c9lever l'H\u00e9ritage -->\n            <div class=\"cc-mission-card\">\n                <div class=\"cc-mission-card-number\">01<\/div>\n                <div class=\"cc-mission-card-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/>\n                        <path d=\"M2 17l10 5 10-5\"\/>\n                        <path d=\"M2 12l10 5 10-5\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"cc-mission-card-title\">Raising the Legacy<\/h3>\n                <p class=\"cc-mission-card-description\">\n                    We showcase Cameroon's rich musical traditions and cultural diversity through exceptional choral performances.\n                <\/p>\n            <\/div>\n            \n            <!-- Card 2 - C\u00e9l\u00e9brer la Diversit\u00e9 -->\n            <div class=\"cc-mission-card\">\n                <div class=\"cc-mission-card-number\">02<\/div>\n                <div class=\"cc-mission-card-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                        <path d=\"M2 12h20\"\/>\n                        <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\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"cc-mission-card-title\">Celebrating Diversity<\/h3>\n                <p class=\"cc-mission-card-description\">\n                    CHORAL CLASH brings together voices from all walks of life, representing every region of Cameroon.\n                <\/p>\n            <\/div>\n            \n            <!-- Card 3 - Cr\u00e9er une Communaut\u00e9 -->\n            <div class=\"cc-mission-card\">\n                <div class=\"cc-mission-card-number\">03<\/div>\n                <div class=\"cc-mission-card-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/>\n                        <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                        <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/>\n                        <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"cc-mission-card-title\">Create a Community<\/h3>\n                <p class=\"cc-mission-card-description\">\n                    Through music, we build connections and understanding while providing a platform for emerging and established talent.\n                <\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ ============================================\n\/\/ GSAP ANIMATIONS - MISSION SECTION\n\/\/ ============================================\ndocument.addEventListener('DOMContentLoaded', function() {\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\n        gsap.registerPlugin(ScrollTrigger);\n        \n        \/\/ Label animation\n        gsap.to('.cc-mission-label', {\n            opacity: 1,\n            y: 0,\n            duration: 0.8,\n            scrollTrigger: {\n                trigger: '.cc-mission',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Title reveal\n        gsap.to('.cc-mission-title-text', {\n            y: 0,\n            duration: 1,\n            stagger: 0.15,\n            ease: 'power4.out',\n            scrollTrigger: {\n                trigger: '.cc-mission',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Cards animation\n        gsap.to('.cc-mission-card', {\n            opacity: 1,\n            y: 0,\n            duration: 0.8,\n            stagger: 0.15,\n            ease: 'power3.out',\n            scrollTrigger: {\n                trigger: '.cc-mission-grid',\n                start: 'top 85%',\n                toggleActions: 'play none none none'\n            }\n        });\n    }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cf27c28 e-con-full e-flex e-con e-parent\" data-id=\"cf27c28\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c41481a elementor-widget elementor-widget-html\" data-id=\"c41481a\" 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 - PAGE \u00c0 PROPOS\nSECTION 3: LE FORMAT DU SHOW\nVersion 5 colonnes - Style Premium\n==============================================\n-->\n\n<style>\n\/* ============================================\n   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\/* ============================================\n   CSS VARIABLES\n   ============================================ *\/\n:root {\n    --cc-black: #000000;\n    --cc-dark: #0a0a0a;\n    --cc-gray-dark: #111111;\n    --cc-gray: #1a1a1a;\n    --cc-gray-light: #888888;\n    --cc-gray-lighter: #aaaaaa;\n    --cc-white: #ffffff;\n    --cc-gold: #c9a227;\n    --cc-gold-light: #d4b044;\n    --cc-font-display: 'Bebas Neue', sans-serif;\n    --cc-font-body: 'Space Grotesk', sans-serif;\n    --cc-font-mono: 'Space Mono', monospace;\n    --cc-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* ============================================\n   SECTION FORMAT DU SHOW - FULL WIDTH\n   ============================================ *\/\n.cc-format {\n    position: relative;\n    background: var(--cc-black);\n    padding: 50px 0;\n    overflow: hidden;\n    width: 100vw;\n    margin-left: calc(-50vw + 50%);\n}\n\n\/* Vertical Lines *\/\n.cc-format-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-format-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.04);\n}\n\n.cc-format-line:nth-child(1) { left: 20%; }\n.cc-format-line:nth-child(2) { left: 40%; }\n.cc-format-line:nth-child(3) { left: 60%; }\n.cc-format-line:nth-child(4) { left: 80%; }\n\n\/* Container - Almost Full Width *\/\n.cc-format-container {\n    position: relative;\n    z-index: 2;\n    max-width: 1600px;\n    margin: 0 auto;\n    padding: 0 40px;\n}\n\n\/* Header *\/\n.cc-format-header {\n    text-align: center;\n    margin-bottom: 80px;\n}\n\n.cc-format-label {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    color: var(--cc-gray-lighter);\n    margin-bottom: 20px;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n.cc-format-title {\n    font-family: var(--cc-font-display);\n    font-size: clamp(50px, 8vw, 100px);\n    line-height: 1;\n    color: var(--cc-white);\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    margin: 0;\n}\n\n.cc-format-title-line {\n    display: block;\n    overflow: hidden;\n}\n\n.cc-format-title-text {\n    display: block;\n    transform: translateY(100%);\n}\n\n\/* Stats Grid - 5 Columns *\/\n.cc-format-grid {\n    display: grid;\n    grid-template-columns: repeat(5, 1fr);\n    gap: 0;\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 0;\n    overflow: hidden;\n}\n\n\/* Stat Card *\/\n.cc-format-card {\n    position: relative;\n    padding: 45px 30px;\n    text-align: center;\n    opacity: 0;\n    transform: translateY(30px);\n    transition: all 0.5s var(--cc-transition);\n}\n\n.cc-format-card:not(:last-child) {\n    border-right: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.cc-format-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background: var(--cc-gold);\n    transform: scaleX(0);\n    transform-origin: left;\n    transition: transform 0.5s var(--cc-transition);\n}\n\n.cc-format-card:hover::before {\n    transform: scaleX(1);\n}\n\n.cc-format-card:hover {\n    background: rgba(255, 255, 255, 0.02);\n}\n\n\/* Card Icon *\/\n.cc-format-card-icon {\n    width: 65px;\n    height: 65px;\n    margin: 0 auto 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n}\n\n.cc-format-card-icon::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.03);\n    border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 0;\n    transform: scale(0.9);\n    transition: all 0.4s var(--cc-transition);\n}\n\n.cc-format-card:hover .cc-format-card-icon::before {\n    transform: scale(1);\n    background: rgba(255, 255, 255, 0.05);\n    border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cc-format-card-icon svg {\n    position: relative;\n    width: 28px;\n    height: 28px;\n    z-index: 1;\n    fill: var(--cc-gray-lighter);\n    transition: fill 0.4s var(--cc-transition);\n}\n\n.cc-format-card:hover .cc-format-card-icon svg {\n    fill: var(--cc-white);\n}\n\n\/* Card Number *\/\n.cc-format-card-number {\n    font-family: var(--cc-font-display);\n    font-size: 58px;\n    line-height: 1;\n    color: var(--cc-white);\n    margin-bottom: 8px;\n}\n\n\/* Card Title *\/\n.cc-format-card-title {\n    font-family: var(--cc-font-body);\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--cc-white);\n    margin: 0 0 12px;\n}\n\n\/* Card Description *\/\n.cc-format-card-description {\n    font-family: var(--cc-font-body);\n    font-size: 13px;\n    font-weight: 300;\n    line-height: 1.6;\n    color: var(--cc-gray-light);\n    margin: 0;\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 1400px) {\n    .cc-format-container {\n        padding: 0 30px;\n    }\n    \n    .cc-format-card {\n        padding: 40px 25px;\n    }\n    \n    .cc-format-card-number {\n        font-size: 50px;\n    }\n    \n    .cc-format-card-title {\n        font-size: 15px;\n    }\n    \n    .cc-format-card-description {\n        font-size: 12px;\n    }\n}\n\n@media (max-width: 1200px) {\n    .cc-format-container {\n        padding: 0 24px;\n    }\n    \n    .cc-format-card {\n        padding: 35px 20px;\n    }\n    \n    .cc-format-card-icon {\n        width: 55px;\n        height: 55px;\n        margin-bottom: 16px;\n    }\n    \n    .cc-format-card-icon svg {\n        width: 24px;\n        height: 24px;\n    }\n    \n    .cc-format-card-number {\n        font-size: 44px;\n    }\n    \n    .cc-format-card-title {\n        font-size: 14px;\n    }\n    \n    .cc-format-card-description {\n        font-size: 11px;\n    }\n}\n\n@media (max-width: 992px) {\n    .cc-format {\n        padding: 100px 0;\n    }\n    \n    .cc-format-grid {\n        grid-template-columns: repeat(3, 1fr);\n    }\n    \n    .cc-format-card:nth-child(3) {\n        border-right: none;\n    }\n    \n    .cc-format-card:nth-child(1),\n    .cc-format-card:nth-child(2),\n    .cc-format-card:nth-child(3) {\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n    }\n    \n    .cc-format-card:nth-child(4) {\n        border-right: 1px solid rgba(255, 255, 255, 0.08);\n    }\n    \n    .cc-format-card:nth-child(5) {\n        border-right: none;\n    }\n    \n    .cc-format-card {\n        padding: 40px 30px;\n    }\n    \n    .cc-format-card-number {\n        font-size: 52px;\n    }\n    \n    .cc-format-card-title {\n        font-size: 16px;\n    }\n    \n    .cc-format-card-description {\n        font-size: 13px;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-format {\n        padding: 80px 0;\n    }\n    \n    .cc-format-container {\n        padding: 0 20px;\n    }\n    \n    .cc-format-header {\n        margin-bottom: 50px;\n    }\n    \n    .cc-format-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n    \n    .cc-format-card {\n        border-right: none !important;\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n    }\n    \n    .cc-format-card:nth-child(odd) {\n        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;\n    }\n    \n    .cc-format-card:nth-child(5) {\n        grid-column: span 2;\n        border-bottom: none;\n    }\n    \n    .cc-format-card:nth-child(4) {\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n    }\n    \n    .cc-format-card {\n        padding: 35px 24px;\n    }\n    \n    .cc-format-card-icon {\n        width: 60px;\n        height: 60px;\n    }\n    \n    .cc-format-card-icon svg {\n        width: 26px;\n        height: 26px;\n    }\n    \n    .cc-format-card-number {\n        font-size: 48px;\n    }\n    \n    .cc-format-card-title {\n        font-size: 16px;\n    }\n    \n    .cc-format-card-description {\n        font-size: 13px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-format {\n        padding: 60px 0;\n    }\n    \n    .cc-format-grid {\n        grid-template-columns: 1fr;\n    }\n    \n    .cc-format-card {\n        border-right: none !important;\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n    }\n    \n    .cc-format-card:nth-child(5) {\n        grid-column: span 1;\n    }\n    \n    .cc-format-card:last-child {\n        border-bottom: none;\n    }\n    \n    .cc-format-card-number {\n        font-size: 56px;\n    }\n}\n<\/style>\n\n<!-- SECTION FORMAT DU SHOW -->\n<section class=\"cc-format\" id=\"cc-format\">\n    <!-- Vertical Lines -->\n    <div class=\"cc-format-lines\">\n        <div class=\"cc-format-line\"><\/div>\n        <div class=\"cc-format-line\"><\/div>\n        <div class=\"cc-format-line\"><\/div>\n        <div class=\"cc-format-line\"><\/div>\n    <\/div>\n    \n    <div class=\"cc-format-container\">\n        <!-- Header -->\n        <div class=\"cc-format-header\">\n            <div class=\"cc-format-label\">[The Format]<\/div>\n            <h2 class=\"cc-format-title\">\n                <span class=\"cc-format-title-line\">\n                    <span class=\"cc-format-title-text\">The Show Format<\/span>\n                <\/span>\n            <\/h2>\n        <\/div>\n        \n        <!-- Stats Grid - 5 Columns -->\n        <div class=\"cc-format-grid\">\n            <!-- Card 1 - 12 Chorales -->\n            <div class=\"cc-format-card\">\n                <div class=\"cc-format-card-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"\/>\n                        <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n                        <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n                        <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"cc-format-card-number\">12<\/div>\n                <h3 class=\"cc-format-card-title\">Single choirs<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Carefully selected from across Cameroon, each with its own distinctive style.\n                <\/p>\n            <\/div>\n            \n            <!-- Card 2 - 12 \u00c9pisodes -->\n            <div class=\"cc-format-card\">\n                <div class=\"cc-format-card-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"\/>\n                        <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" stroke=\"#000\" stroke-width=\"1.5\"\/>\n                        <path d=\"M16 10a4 4 0 0 1-8 0\" fill=\"none\" stroke=\"#000\" stroke-width=\"1.5\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"cc-format-card-number\">12<\/div>\n                <h3 class=\"cc-format-card-title\">Captivating episodes<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Weekly challenges testing vocal prowess and creativity.\n                <\/p>\n            <\/div>\n            \n            <!-- Card 3 - 3 Juges Experts -->\n            <div class=\"cc-format-card\">\n                <div class=\"cc-format-card-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"cc-format-card-number\">3<\/div>\n                <h3 class=\"cc-format-card-title\">Expert judges<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Professionals providing advice and constructive feedback.\n                <\/p>\n            <\/div>\n            \n            <!-- Card 4 - 2 Coachs -->\n            <div class=\"cc-format-card\">\n                <div class=\"cc-format-card-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"8\" r=\"4\"\/>\n                        <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/>\n                        <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                        <path d=\"M21 21v-2a4 4 0 0 0-3-3.87\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"cc-format-card-number\">2<\/div>\n                <h3 class=\"cc-format-card-title\">Dedicated coaches<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Passionate mentors guiding each choir towards excellence.\n                <\/p>\n            <\/div>\n            \n            <!-- Card 5 - 100% Pouvoir du Public -->\n            <div class=\"cc-format-card\">\n                <div class=\"cc-format-card-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/>\n                        <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                        <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/>\n                        <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"cc-format-card-number\">100%<\/div>\n                <h3 class=\"cc-format-card-title\">Public Power<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Viewers vote for their favourites, and the public has one vote.\n                <\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ ============================================\n\/\/ GSAP ANIMATIONS - FORMAT SECTION\n\/\/ ============================================\ndocument.addEventListener('DOMContentLoaded', function() {\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\n        gsap.registerPlugin(ScrollTrigger);\n        \n        \/\/ Label animation\n        gsap.to('.cc-format-label', {\n            opacity: 1,\n            y: 0,\n            duration: 0.8,\n            scrollTrigger: {\n                trigger: '.cc-format',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Title reveal\n        gsap.to('.cc-format-title-text', {\n            y: 0,\n            duration: 1,\n            ease: 'power4.out',\n            scrollTrigger: {\n                trigger: '.cc-format',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Cards animation\n        gsap.to('.cc-format-card', {\n            opacity: 1,\n            y: 0,\n            duration: 0.8,\n            stagger: 0.1,\n            ease: 'power3.out',\n            scrollTrigger: {\n                trigger: '.cc-format-grid',\n                start: 'top 85%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Number counter animation\n        const counters = document.querySelectorAll('.cc-format-card-number');\n        counters.forEach(counter => {\n            const text = counter.textContent;\n            const isPercent = text.includes('%');\n            const value = parseInt(text);\n            \n            if (!isNaN(value)) {\n                counter.textContent = '0' + (isPercent ? '%' : '');\n                \n                ScrollTrigger.create({\n                    trigger: counter,\n                    start: 'top 90%',\n                    onEnter: () => {\n                        gsap.to({ val: 0 }, {\n                            val: value,\n                            duration: 2,\n                            ease: 'power2.out',\n                            onUpdate: function() {\n                                counter.textContent = Math.round(this.targets()[0].val) + (isPercent ? '%' : '');\n                            }\n                        });\n                    },\n                    once: true\n                });\n            }\n        });\n    }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fdf3319 e-con-full e-flex e-con e-parent\" data-id=\"fdf3319\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-779f9d3 elementor-widget elementor-widget-html\" data-id=\"779f9d3\" 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 - PAGE \u00c0 PROPOS\nSECTION 4: DIVERSIT\u00c9 MUSICALE - Style Premium\n==============================================\n-->\n\n<style>\n\/* ============================================\n   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\/* ============================================\n   CSS VARIABLES\n   ============================================ *\/\n:root {\n    --cc-black: #000000;\n    --cc-dark: #0a0a0a;\n    --cc-gray-dark: #111111;\n    --cc-gray: #1a1a1a;\n    --cc-gray-light: #888888;\n    --cc-gray-lighter: #aaaaaa;\n    --cc-white: #ffffff;\n    --cc-gold: #c9a227;\n    --cc-gold-light: #d4b044;\n    --cc-font-display: 'Bebas Neue', sans-serif;\n    --cc-font-body: 'Space Grotesk', sans-serif;\n    --cc-font-mono: 'Space Mono', monospace;\n    --cc-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* ============================================\n   SECTION DIVERSIT\u00c9 MUSICALE\n   ============================================ *\/\n.cc-diversity {\n    position: relative;\n    background: var(--cc-black);\n    padding: 50px 0;\n    overflow: hidden;\n}\n\n\/* Vertical Lines *\/\n.cc-diversity-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-diversity-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.04);\n}\n\n.cc-diversity-line:nth-child(1) { left: 25%; }\n.cc-diversity-line:nth-child(2) { left: 50%; }\n.cc-diversity-line:nth-child(3) { left: 75%; }\n\n\/* Container *\/\n.cc-diversity-container {\n    position: relative;\n    z-index: 2;\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 60px;\n}\n\n\/* Header *\/\n.cc-diversity-header {\n    text-align: center;\n    margin-bottom: 80px;\n}\n\n.cc-diversity-label {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    color: var(--cc-gray-lighter);\n    margin-bottom: 20px;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n.cc-diversity-title {\n    font-family: var(--cc-font-display);\n    font-size: clamp(50px, 8vw, 100px);\n    line-height: 1;\n    color: var(--cc-white);\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    margin: 0;\n}\n\n.cc-diversity-title-line {\n    display: block;\n    overflow: hidden;\n}\n\n.cc-diversity-title-text {\n    display: block;\n    transform: translateY(100%);\n}\n\n\/* Main Content - Circle Layout *\/\n.cc-diversity-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 80px;\n}\n\n\/* Center Circle Visual - VINYL DISK *\/\n.cc-diversity-visual {\n    position: relative;\n    width: 400px;\n    height: 400px;\n    flex-shrink: 0;\n    opacity: 0;\n    transform: scale(0.8);\n}\n\n\/* Vinyl Disk *\/\n.cc-diversity-vinyl {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 320px;\n    height: 320px;\n    border-radius: 50%;\n    background: \n        \/* Grooves effect *\/\n        repeating-radial-gradient(\n            circle at center,\n            transparent 0px,\n            transparent 2px,\n            rgba(255, 255, 255, 0.03) 2px,\n            rgba(255, 255, 255, 0.03) 4px\n        ),\n        \/* Base gradient *\/\n        radial-gradient(\n            circle at 30% 30%,\n            #2a2a2a 0%,\n            #1a1a1a 40%,\n            #0d0d0d 100%\n        );\n    box-shadow: \n        0 0 0 8px #111,\n        0 0 0 10px rgba(255, 255, 255, 0.08),\n        0 20px 50px rgba(0, 0, 0, 0.5),\n        inset 0 0 50px rgba(0, 0, 0, 0.5);\n    animation: cc-vinyl-spin 8s linear infinite;\n}\n\n@keyframes cc-vinyl-spin {\n    from { transform: translate(-50%, -50%) rotate(0deg); }\n    to { transform: translate(-50%, -50%) rotate(360deg); }\n}\n\n\/* Vinyl Shine Effect *\/\n.cc-diversity-vinyl::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background: linear-gradient(\n        135deg,\n        rgba(255, 255, 255, 0.08) 0%,\n        transparent 50%,\n        rgba(0, 0, 0, 0.3) 100%\n    );\n    pointer-events: none;\n}\n\n\/* Vinyl Grooves Highlight - Gold subtil *\/\n.cc-diversity-vinyl::after {\n    content: '';\n    position: absolute;\n    top: 15%;\n    left: 15%;\n    width: 70%;\n    height: 70%;\n    border-radius: 50%;\n    border: 1px solid rgba(201, 162, 39, 0.15);\n    box-shadow: \n        0 0 20px rgba(201, 162, 39, 0.08),\n        inset 0 0 20px rgba(201, 162, 39, 0.03);\n}\n\n\/* Center Label - GOLD CONSERV\u00c9 *\/\n.cc-diversity-label-center {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    background: linear-gradient(\n        135deg,\n        var(--cc-gold) 0%,\n        #a68a1d 50%,\n        var(--cc-gold-light) 100%\n    );\n    box-shadow: \n        0 0 0 4px #111,\n        inset 0 2px 10px rgba(255, 255, 255, 0.3),\n        inset 0 -2px 10px rgba(0, 0, 0, 0.3);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n}\n\n\/* Center Hole *\/\n.cc-diversity-label-center::before {\n    content: '';\n    position: absolute;\n    width: 16px;\n    height: 16px;\n    background: #111;\n    border-radius: 50%;\n    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);\n}\n\n\/* Label Text *\/\n.cc-diversity-label-text {\n    position: absolute;\n    width: 100%;\n    text-align: center;\n    animation: cc-label-counter 8s linear infinite;\n}\n\n@keyframes cc-label-counter {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(-360deg); }\n}\n\n.cc-diversity-label-text span {\n    font-family: var(--cc-font-display);\n    font-size: 11px;\n    color: #111;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    display: block;\n}\n\n.cc-diversity-label-text span:first-child {\n    margin-top: -25px;\n    font-size: 13px;\n    font-weight: 700;\n}\n\n.cc-diversity-label-text span:last-child {\n    position: absolute;\n    bottom: 20px;\n    left: 0;\n    width: 100%;\n    font-size: 9px;\n    letter-spacing: 0.5px;\n}\n\n\/* Genre Cards - Left & Right *\/\n.cc-diversity-genres {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    width: 280px;\n}\n\n.cc-diversity-genres-left {\n    align-items: flex-end;\n    text-align: right;\n}\n\n.cc-diversity-genres-right {\n    align-items: flex-start;\n    text-align: left;\n}\n\n\/* Genre Card *\/\n.cc-diversity-genre {\n    opacity: 0;\n    transform: translateX(-30px);\n    transition: all 0.4s var(--cc-transition);\n}\n\n.cc-diversity-genres-right .cc-diversity-genre {\n    transform: translateX(30px);\n}\n\n.cc-diversity-genre:hover .cc-diversity-genre-title {\n    color: var(--cc-white);\n}\n\n.cc-diversity-genre-title {\n    font-family: var(--cc-font-body);\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--cc-gray-lighter);\n    margin: 0 0 8px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    transition: color 0.3s var(--cc-transition);\n}\n\n.cc-diversity-genres-left .cc-diversity-genre-title {\n    justify-content: flex-end;\n}\n\n\/* Dots uniformes gris \u2192 gold au hover *\/\n.cc-diversity-genre-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    background: var(--cc-gray-light);\n    transition: all 0.3s var(--cc-transition);\n}\n\n.cc-diversity-genre:hover .cc-diversity-genre-dot {\n    background: var(--cc-gold);\n    box-shadow: 0 0 10px rgba(201, 162, 39, 0.4);\n}\n\n.cc-diversity-genre-description {\n    font-family: var(--cc-font-body);\n    font-size: 14px;\n    font-weight: 300;\n    line-height: 1.6;\n    color: var(--cc-gray-light);\n    margin: 0;\n    max-width: 250px;\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 1200px) {\n    .cc-diversity-container {\n        padding: 0 40px;\n    }\n    \n    .cc-diversity-content {\n        gap: 50px;\n    }\n    \n    .cc-diversity-visual {\n        width: 350px;\n        height: 350px;\n    }\n    \n    .cc-diversity-vinyl {\n        width: 280px;\n        height: 280px;\n    }\n    \n    .cc-diversity-label-center {\n        width: 100px;\n        height: 100px;\n    }\n    \n    .cc-diversity-genres {\n        width: 240px;\n    }\n}\n\n@media (max-width: 992px) {\n    .cc-diversity {\n        padding: 100px 0;\n    }\n    \n    .cc-diversity-content {\n        flex-direction: column;\n        gap: 60px;\n    }\n    \n    .cc-diversity-genres {\n        width: 100%;\n        max-width: 400px;\n        flex-direction: row;\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 30px;\n    }\n    \n    .cc-diversity-genres-left,\n    .cc-diversity-genres-right {\n        align-items: center;\n        text-align: center;\n    }\n    \n    .cc-diversity-genres-left .cc-diversity-genre-title {\n        justify-content: center;\n    }\n    \n    .cc-diversity-genre {\n        width: calc(50% - 15px);\n    }\n    \n    .cc-diversity-genre-description {\n        max-width: 100%;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-diversity {\n        padding: 80px 0;\n    }\n    \n    .cc-diversity-container {\n        padding: 0 24px;\n    }\n    \n    .cc-diversity-header {\n        margin-bottom: 50px;\n    }\n    \n    .cc-diversity-visual {\n        width: 280px;\n        height: 280px;\n    }\n    \n    .cc-diversity-vinyl {\n        width: 220px;\n        height: 220px;\n    }\n    \n    .cc-diversity-label-center {\n        width: 80px;\n        height: 80px;\n    }\n    \n    .cc-diversity-label-text span:first-child {\n        font-size: 10px;\n        margin-top: -18px;\n    }\n    \n    .cc-diversity-label-text span:last-child {\n        font-size: 8px;\n        bottom: 15px;\n    }\n    \n    .cc-diversity-genre-title {\n        font-size: 18px;\n    }\n    \n    .cc-diversity-genre-description {\n        font-size: 13px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-diversity {\n        padding: 60px 0;\n    }\n    \n    .cc-diversity-visual {\n        width: 240px;\n        height: 240px;\n    }\n    \n    .cc-diversity-vinyl {\n        width: 190px;\n        height: 190px;\n    }\n    \n    .cc-diversity-label-center {\n        width: 70px;\n        height: 70px;\n    }\n    \n    .cc-diversity-label-text span:first-child {\n        font-size: 8px;\n        margin-top: -15px;\n    }\n    \n    .cc-diversity-label-text span:last-child {\n        font-size: 7px;\n        bottom: 12px;\n    }\n    \n    .cc-diversity-genres {\n        flex-direction: column;\n        align-items: center;\n    }\n    \n    .cc-diversity-genre {\n        width: 100%;\n        max-width: 280px;\n    }\n}\n<\/style>\n\n<!-- SECTION DIVERSIT\u00c9 MUSICALE -->\n<section class=\"cc-diversity\" id=\"cc-diversity\">\n    <!-- Vertical Lines -->\n    <div class=\"cc-diversity-lines\">\n        <div class=\"cc-diversity-line\"><\/div>\n        <div class=\"cc-diversity-line\"><\/div>\n        <div class=\"cc-diversity-line\"><\/div>\n    <\/div>\n    \n    <div class=\"cc-diversity-container\">\n        <!-- Header -->\n        <div class=\"cc-diversity-header\">\n            <div class=\"cc-diversity-label\">[The Genres]<\/div>\n            <h2 class=\"cc-diversity-title\">\n                <span class=\"cc-diversity-title-line\">\n                    <span class=\"cc-diversity-title-text\">Musical Diversity<\/span>\n                <\/span>\n            <\/h2>\n        <\/div>\n        \n        <!-- Main Content -->\n        <div class=\"cc-diversity-content\">\n            <!-- Left Genres -->\n            <div class=\"cc-diversity-genres cc-diversity-genres-left\">\n                <div class=\"cc-diversity-genre\">\n                    <h3 class=\"cc-diversity-genre-title\">\n                        Traditional\n                        <span class=\"cc-diversity-genre-dot\"><\/span>\n                    <\/h3>\n                    <p class=\"cc-diversity-genre-description\">\n                        Authentic Cameroonian rhythms celebrating our cultural heritage.\n                    <\/p>\n                <\/div>\n                <div class=\"cc-diversity-genre\">\n                    <h3 class=\"cc-diversity-genre-title\">\n                        Classic\n                        <span class=\"cc-diversity-genre-dot\"><\/span>\n                    <\/h3>\n                    <p class=\"cc-diversity-genre-description\">\n                        Refined choral arrangements demonstrating technical excellence.\n                    <\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- Center Visual - Vinyl Disk -->\n            <div class=\"cc-diversity-visual\">\n                <div class=\"cc-diversity-vinyl\"><\/div>\n                <div class=\"cc-diversity-label-center\">\n                    <div class=\"cc-diversity-label-text\">\n                        <span>Choral Clash<\/span>\n                        <span>4 Genres<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Right Genres -->\n            <div class=\"cc-diversity-genres cc-diversity-genres-right\">\n                <div class=\"cc-diversity-genre\">\n                    <h3 class=\"cc-diversity-genre-title\">\n                        <span class=\"cc-diversity-genre-dot\"><\/span>\n                        Gospel\n                    <\/h3>\n                    <p class=\"cc-diversity-genre-description\">\n                        Moving spiritual performances that uplift and inspire.\n                    <\/p>\n                <\/div>\n                <div class=\"cc-diversity-genre\">\n                    <h3 class=\"cc-diversity-genre-title\">\n                        <span class=\"cc-diversity-genre-dot\"><\/span>\n                        Contemporary\n                    <\/h3>\n                    <p class=\"cc-diversity-genre-description\">\n                        Modern interpretations blending global influences and local sounds.\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ ============================================\n\/\/ GSAP ANIMATIONS - DIVERSITY SECTION\n\/\/ ============================================\ndocument.addEventListener('DOMContentLoaded', function() {\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\n        gsap.registerPlugin(ScrollTrigger);\n        \n        \/\/ Label animation\n        gsap.to('.cc-diversity-label', {\n            opacity: 1,\n            y: 0,\n            duration: 0.8,\n            scrollTrigger: {\n                trigger: '.cc-diversity',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Title reveal\n        gsap.to('.cc-diversity-title-text', {\n            y: 0,\n            duration: 1,\n            ease: 'power4.out',\n            scrollTrigger: {\n                trigger: '.cc-diversity',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Center visual\n        gsap.to('.cc-diversity-visual', {\n            opacity: 1,\n            scale: 1,\n            duration: 1.2,\n            ease: 'power3.out',\n            scrollTrigger: {\n                trigger: '.cc-diversity-content',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Left genres\n        gsap.to('.cc-diversity-genres-left .cc-diversity-genre', {\n            opacity: 1,\n            x: 0,\n            duration: 0.8,\n            stagger: 0.15,\n            ease: 'power3.out',\n            scrollTrigger: {\n                trigger: '.cc-diversity-content',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Right genres\n        gsap.to('.cc-diversity-genres-right .cc-diversity-genre', {\n            opacity: 1,\n            x: 0,\n            duration: 0.8,\n            stagger: 0.15,\n            ease: 'power3.out',\n            scrollTrigger: {\n                trigger: '.cc-diversity-content',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n    }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fd667d7 e-con-full e-flex e-con e-parent\" data-id=\"fd667d7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd53cd1 elementor-widget elementor-widget-html\" data-id=\"cd53cd1\" 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 - PAGE \u00c0 PROPOS\nSECTION 7: FAQ\nStyle Thespo - Grille 3 colonnes\n==============================================\nInstructions: Copier ce code dans un widget HTML Elementor\n==============================================\n-->\n\n<style>\n\/* ============================================\n   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\/* ============================================\n   CSS VARIABLES\n   ============================================ *\/\n:root {\n    --cc-black: #000000;\n    --cc-dark: #0a0a0a;\n    --cc-gray-dark: #111111;\n    --cc-gray: #1a1a1a;\n    --cc-gray-light: #888888;\n    --cc-white: #ffffff;\n    --cc-gold: #d4af37;\n    --cc-gold-light: #f4d03f;\n    --cc-font-display: 'Bebas Neue', sans-serif;\n    --cc-font-body: 'Space Grotesk', sans-serif;\n    --cc-font-mono: 'Space Mono', monospace;\n    --cc-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* ============================================\n   SECTION FAQ\n   ============================================ *\/\n.cc-faq {\n    position: relative;\n    background: var(--cc-black);\n    padding: 0;\n    overflow: hidden;\n}\n\n\/* Vertical Lines *\/\n.cc-faq-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-faq-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.1);\n}\n\n.cc-faq-line:nth-child(1) { left: 12%; }\n.cc-faq-line:nth-child(2) { left: 50%; }\n.cc-faq-line:nth-child(3) { left: 75%; }\n\n\/* Container *\/\n.cc-faq-container {\n    position: relative;\n    z-index: 2;\n    max-width: 100%;\n    margin: 0;\n    padding: 0;\n}\n\n\/* Header *\/\n.cc-faq-header {\n    padding: 40px 60px;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.cc-faq-label {\n    font-family: var(--cc-font-mono);\n    font-size: 14px;\n    font-weight: 400;\n    letter-spacing: 2px;\n    color: var(--cc-white);\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.cc-faq-label::after {\n    content: '\u2726';\n    font-size: 10px;\n    color: var(--cc-gold);\n}\n\n\/* FAQ List *\/\n.cc-faq-list {\n    display: flex;\n    flex-direction: column;\n}\n\n\/* FAQ Item *\/\n.cc-faq-item {\n    display: grid;\n    grid-template-columns: 12% 38% 1fr auto;\n    align-items: center;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n    cursor: pointer;\n    transition: background 0.3s var(--cc-transition);\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n.cc-faq-item:hover {\n    background: rgba(255, 255, 255, 0.02);\n}\n\n\/* Number Column *\/\n.cc-faq-number {\n    padding: 50px 30px 50px 60px;\n    font-family: var(--cc-font-mono);\n    font-size: 13px;\n    font-weight: 400;\n    letter-spacing: 1px;\n    color: var(--cc-gray-light);\n    border-right: 1px solid rgba(255, 255, 255, 0.1);\n    height: 100%;\n    display: flex;\n    align-items: center;\n}\n\n\/* Title Column *\/\n.cc-faq-title {\n    padding: 50px 40px;\n    font-family: var(--cc-font-display);\n    font-size: clamp(32px, 4vw, 52px);\n    font-weight: 400;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    color: var(--cc-white);\n    border-right: 1px solid rgba(255, 255, 255, 0.1);\n    height: 100%;\n    display: flex;\n    align-items: center;\n    transition: color 0.3s var(--cc-transition);\n}\n\n.cc-faq-item:hover .cc-faq-title {\n    color: var(--cc-gold);\n}\n\n\/* Question Column *\/\n.cc-faq-question {\n    padding: 50px 40px;\n    font-family: var(--cc-font-mono);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.6;\n    letter-spacing: 0.5px;\n    color: var(--cc-gray-light);\n    height: 100%;\n    display: flex;\n    align-items: center;\n}\n\n\/* Toggle Icon *\/\n.cc-faq-toggle {\n    padding: 50px 60px 50px 40px;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.cc-faq-toggle-icon {\n    width: 44px;\n    height: 44px;\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s var(--cc-transition);\n}\n\n.cc-faq-item:hover .cc-faq-toggle-icon {\n    border-color: var(--cc-gold);\n}\n\n.cc-faq-toggle-icon svg {\n    width: 18px;\n    height: 18px;\n    fill: var(--cc-white);\n    transition: all 0.3s var(--cc-transition);\n}\n\n.cc-faq-item:hover .cc-faq-toggle-icon svg {\n    fill: var(--cc-gold);\n}\n\n.cc-faq-item.active .cc-faq-toggle-icon {\n    background: var(--cc-gold);\n    border-color: var(--cc-gold);\n}\n\n.cc-faq-item.active .cc-faq-toggle-icon svg {\n    fill: var(--cc-black);\n    transform: rotate(45deg);\n}\n\n\/* Answer - Hidden by default *\/\n.cc-faq-answer {\n    grid-column: 2 \/ -1;\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.5s var(--cc-transition);\n}\n\n.cc-faq-item.active .cc-faq-answer {\n    max-height: 200px;\n}\n\n.cc-faq-answer-inner {\n    padding: 0 60px 40px 40px;\n}\n\n.cc-faq-answer-text {\n    font-family: var(--cc-font-body);\n    font-size: 15px;\n    font-weight: 300;\n    line-height: 1.8;\n    color: var(--cc-gray-light);\n    margin: 0;\n    max-width: 600px;\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 1200px) {\n    .cc-faq-header {\n        padding: 35px 40px;\n    }\n    \n    .cc-faq-item {\n        grid-template-columns: 10% 35% 1fr auto;\n    }\n    \n    .cc-faq-number {\n        padding: 40px 20px 40px 40px;\n    }\n    \n    .cc-faq-title {\n        padding: 40px 30px;\n    }\n    \n    .cc-faq-question {\n        padding: 40px 30px;\n    }\n    \n    .cc-faq-toggle {\n        padding: 40px;\n    }\n}\n\n@media (max-width: 992px) {\n    .cc-faq-line:nth-child(1) { left: 15%; }\n    .cc-faq-line:nth-child(2) { display: none; }\n    .cc-faq-line:nth-child(3) { display: none; }\n    \n    .cc-faq-item {\n        grid-template-columns: 15% 1fr auto;\n    }\n    \n    .cc-faq-title {\n        font-size: clamp(28px, 5vw, 40px);\n    }\n    \n    .cc-faq-question {\n        display: none;\n    }\n    \n    .cc-faq-answer-inner {\n        padding: 0 40px 30px 30px;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-faq-header {\n        padding: 30px 24px;\n    }\n    \n    .cc-faq-item {\n        grid-template-columns: 60px 1fr auto;\n    }\n    \n    .cc-faq-number {\n        padding: 30px 15px 30px 24px;\n        font-size: 12px;\n    }\n    \n    .cc-faq-title {\n        padding: 30px 20px;\n        font-size: clamp(24px, 6vw, 32px);\n    }\n    \n    .cc-faq-toggle {\n        padding: 30px 24px 30px 15px;\n    }\n    \n    .cc-faq-toggle-icon {\n        width: 38px;\n        height: 38px;\n    }\n    \n    .cc-faq-toggle-icon svg {\n        width: 14px;\n        height: 14px;\n    }\n    \n    .cc-faq-answer-inner {\n        padding: 0 24px 25px 20px;\n    }\n    \n    .cc-faq-answer-text {\n        font-size: 14px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-faq-item {\n        grid-template-columns: 50px 1fr auto;\n    }\n    \n    .cc-faq-number {\n        padding: 25px 10px 25px 20px;\n        font-size: 11px;\n    }\n    \n    .cc-faq-title {\n        padding: 25px 15px;\n        font-size: clamp(20px, 7vw, 26px);\n    }\n    \n    .cc-faq-toggle {\n        padding: 25px 20px 25px 10px;\n    }\n    \n    .cc-faq-toggle-icon {\n        width: 34px;\n        height: 34px;\n    }\n    \n    .cc-faq-answer-inner {\n        padding: 0 20px 20px 15px;\n    }\n}\n<\/style>\n\n<!-- SECTION FAQ -->\n<section class=\"cc-faq\" id=\"cc-faq\">\n    <!-- Vertical Lines -->\n    <div class=\"cc-faq-lines\">\n        <div class=\"cc-faq-line\"><\/div>\n        <div class=\"cc-faq-line\"><\/div>\n        <div class=\"cc-faq-line\"><\/div>\n    <\/div>\n    \n    <div class=\"cc-faq-container\">\n        <!-- Header -->\n        <div class=\"cc-faq-header\">\n            <span class=\"cc-faq-label\">Frequently asked questions<\/span>\n        <\/div>\n        \n        <!-- FAQ List -->\n        <div class=\"cc-faq-list\">\n            <!-- Q1 -->\n            <div class=\"cc-faq-item\">\n                <div class=\"cc-faq-number\">[01]<\/div>\n                <div class=\"cc-faq-title\">Participation<\/div>\n                <div class=\"cc-faq-question\">How can my choir take part in the competition?<\/div>\n                <div class=\"cc-faq-toggle\">\n                    <div class=\"cc-faq-toggle-icon\">\n                        <svg viewbox=\"0 0 24 24\">\n                            <path d=\"M12 5v14M5 12h14\"\/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                <div class=\"cc-faq-answer\">\n                    <div class=\"cc-faq-answer-inner\">\n                        <p class=\"cc-faq-answer-text\">\n                            Registrations for next season will open soon. Follow our social networks or sign up for our newsletter to be kept informed of audition dates.\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Q2 -->\n            <div class=\"cc-faq-item\">\n                <div class=\"cc-faq-number\">[02]<\/div>\n                <div class=\"cc-faq-title\">Episodes<\/div>\n                <div class=\"cc-faq-question\">Where can I watch episodes of CHORAL CLASH?<\/div>\n                <div class=\"cc-faq-toggle\">\n                    <div class=\"cc-faq-toggle-icon\">\n                        <svg viewbox=\"0 0 24 24\">\n                            <path d=\"M12 5v14M5 12h14\"\/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                <div class=\"cc-faq-answer\">\n                    <div class=\"cc-faq-answer-inner\">\n                        <p class=\"cc-faq-answer-text\">\n                            All episodes are available on our official YouTube channel. You can also follow the live broadcasts on our partner platforms.\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Q3 -->\n            <div class=\"cc-faq-item\">\n                <div class=\"cc-faq-number\">[03]<\/div>\n                <div class=\"cc-faq-title\">Vote<\/div>\n                <div class=\"cc-faq-question\">How do I vote for my favourite choir?<\/div>\n                <div class=\"cc-faq-toggle\">\n                    <div class=\"cc-faq-toggle-icon\">\n                        <svg viewbox=\"0 0 24 24\">\n                            <path d=\"M12 5v14M5 12h14\"\/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                <div class=\"cc-faq-answer\">\n                    <div class=\"cc-faq-answer-inner\">\n                        <p class=\"cc-faq-answer-text\">\n                            Voting takes place via our official platform during the open voting periods. Go to the \"Vote\" page to support your favourite choir.\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Q4 -->\n            <div class=\"cc-faq-item\">\n                <div class=\"cc-faq-number\">[04]<\/div>\n                <div class=\"cc-faq-title\">Partnership<\/div>\n                <div class=\"cc-faq-question\">How can I become a partner or sponsor of the show?<\/div>\n                <div class=\"cc-faq-toggle\">\n                    <div class=\"cc-faq-toggle-icon\">\n                        <svg viewbox=\"0 0 24 24\">\n                            <path d=\"M12 5v14M5 12h14\"\/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                <div class=\"cc-faq-answer\">\n                    <div class=\"cc-faq-answer-inner\">\n                        <p class=\"cc-faq-answer-text\">\n                            We welcome partnerships with organisations that share our passion for Cameroonian music and culture. Visit our Partners page or contact us directly.\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Q5 -->\n            <div class=\"cc-faq-item\">\n                <div class=\"cc-faq-number\">[05]<\/div>\n                <div class=\"cc-faq-title\">Season 2<\/div>\n                <div class=\"cc-faq-question\">When does the next season start?<\/div>\n                <div class=\"cc-faq-toggle\">\n                    <div class=\"cc-faq-toggle-icon\">\n                        <svg viewbox=\"0 0 24 24\">\n                            <path d=\"M12 5v14M5 12h14\"\/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                <div class=\"cc-faq-answer\">\n                    <div class=\"cc-faq-answer-inner\">\n                        <p class=\"cc-faq-answer-text\">\n                            Dates for next season will be announced on our social networks. Stay tuned so you don't miss out on any upcoming competitions.\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ ============================================\n\/\/ FAQ ACCORDION FUNCTIONALITY\n\/\/ ============================================\ndocument.addEventListener('DOMContentLoaded', function() {\n    const faqItems = document.querySelectorAll('.cc-faq-item');\n    \n    faqItems.forEach(item => {\n        item.addEventListener('click', () => {\n            const isActive = item.classList.contains('active');\n            \n            \/\/ Close all items\n            faqItems.forEach(i => i.classList.remove('active'));\n            \n            \/\/ Open clicked item if it wasn't active\n            if (!isActive) {\n                item.classList.add('active');\n            }\n        });\n    });\n    \n    \/\/ GSAP Animations\n    gsap.registerPlugin(ScrollTrigger);\n    \n    \/\/ FAQ items\n    gsap.to('.cc-faq-item', {\n        opacity: 1,\n        y: 0,\n        duration: 0.6,\n        stagger: 0.1,\n        ease: 'power3.out',\n        scrollTrigger: {\n            trigger: '.cc-faq-list',\n            start: 'top 85%',\n            toggleActions: 'play none none none'\n        }\n    });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aa13419 e-con-full e-flex e-con e-parent\" data-id=\"aa13419\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c0cddb elementor-widget elementor-widget-html\" data-id=\"9c0cddb\" 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 - PAGE \u00c0 PROPOS\nSECTION 5: LE POUVOIR DE LA MUSIQUE - Style Premium\n==============================================\n-->\n\n<style>\n\/* ============================================\n   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\/* ============================================\n   CSS VARIABLES\n   ============================================ *\/\n:root {\n    --cc-black: #000000;\n    --cc-dark: #0a0a0a;\n    --cc-gray-dark: #111111;\n    --cc-gray: #1a1a1a;\n    --cc-gray-light: #888888;\n    --cc-gray-lighter: #aaaaaa;\n    --cc-white: #ffffff;\n    --cc-gold: #c9a227;\n    --cc-gold-light: #d4b044;\n    --cc-font-display: 'Bebas Neue', sans-serif;\n    --cc-font-body: 'Space Grotesk', sans-serif;\n    --cc-font-mono: 'Space Mono', monospace;\n    --cc-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* ============================================\n   SECTION LE POUVOIR DE LA MUSIQUE\n   ============================================ *\/\n.cc-power {\n    position: relative;\n    background: var(--cc-black);\n    padding: 50px 0;\n    overflow: hidden;\n}\n\n\/* Vertical Lines *\/\n.cc-power-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-power-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.04);\n}\n\n.cc-power-line:nth-child(1) { left: 25%; }\n.cc-power-line:nth-child(2) { left: 50%; }\n.cc-power-line:nth-child(3) { left: 75%; }\n\n\/* Container *\/\n.cc-power-container {\n    position: relative;\n    z-index: 2;\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 60px;\n}\n\n\/* Main Grid - Thespo Style *\/\n.cc-power-grid {\n    display: grid;\n    grid-template-columns: 1fr 400px;\n    gap: 60px;\n    align-items: stretch;\n}\n\n\/* Left - Main Card *\/\n.cc-power-main {\n    position: relative;\n    background: var(--cc-gray-dark);\n    border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 0;\n    padding: 60px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    opacity: 0;\n    transform: translateX(-30px);\n}\n\n\/* Barre gold subtile \u00e0 gauche *\/\n.cc-power-main::before {\n    content: '';\n    position: absolute;\n    top: 40px;\n    bottom: 40px;\n    left: 0;\n    width: 2px;\n    background: var(--cc-gold);\n}\n\n.cc-power-label {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    color: var(--cc-gray-lighter);\n    margin-bottom: 24px;\n}\n\n.cc-power-title {\n    font-family: var(--cc-font-display);\n    font-size: clamp(50px, 6vw, 80px);\n    line-height: 1;\n    color: var(--cc-white);\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    margin: 0 0 30px;\n}\n\n.cc-power-description {\n    font-family: var(--cc-font-body);\n    font-size: 17px;\n    font-weight: 300;\n    line-height: 1.8;\n    color: var(--cc-gray-light);\n    margin: 0;\n    max-width: 500px;\n}\n\n\/* Right - Pillars Stack *\/\n.cc-power-pillars {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n}\n\n.cc-power-pillar {\n    position: relative;\n    padding: 35px 0;\n    opacity: 0;\n    transform: translateX(30px);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n    transition: all 0.4s var(--cc-transition);\n}\n\n.cc-power-pillar:first-child {\n    border-top: 1px solid rgba(255, 255, 255, 0.06);\n}\n\n\/* Barre gold au hover *\/\n.cc-power-pillar::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 2px;\n    height: 100%;\n    background: var(--cc-gold);\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 0.4s var(--cc-transition);\n}\n\n.cc-power-pillar:hover::before {\n    transform: scaleY(1);\n}\n\n.cc-power-pillar:hover {\n    padding-left: 20px;\n}\n\n\/* Pillar Number *\/\n.cc-power-pillar-number {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 2px;\n    color: rgba(255, 255, 255, 0.2);\n    margin-bottom: 12px;\n}\n\n\/* Pillar Title *\/\n.cc-power-pillar-title {\n    font-family: var(--cc-font-body);\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--cc-white);\n    margin: 0 0 10px;\n    transition: color 0.3s var(--cc-transition);\n}\n\n.cc-power-pillar-text {\n    font-family: var(--cc-font-body);\n    font-size: 14px;\n    font-weight: 300;\n    line-height: 1.6;\n    color: var(--cc-gray-light);\n    margin: 0;\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 1200px) {\n    .cc-power-container {\n        padding: 0 40px;\n    }\n    \n    .cc-power-grid {\n        grid-template-columns: 1fr 350px;\n        gap: 40px;\n    }\n    \n    .cc-power-main {\n        padding: 50px;\n    }\n}\n\n@media (max-width: 992px) {\n    .cc-power {\n        padding: 100px 0;\n    }\n    \n    .cc-power-grid {\n        grid-template-columns: 1fr;\n        gap: 50px;\n    }\n    \n    .cc-power-pillars {\n        max-width: 500px;\n        margin: 0 auto;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-power {\n        padding: 80px 0;\n    }\n    \n    .cc-power-container {\n        padding: 0 24px;\n    }\n    \n    .cc-power-main {\n        padding: 40px 30px;\n    }\n    \n    .cc-power-main::before {\n        top: 30px;\n        bottom: 30px;\n    }\n    \n    .cc-power-title {\n        font-size: clamp(40px, 10vw, 60px);\n    }\n    \n    .cc-power-description {\n        font-size: 15px;\n    }\n    \n    .cc-power-pillar {\n        padding: 25px 0;\n    }\n    \n    .cc-power-pillar-title {\n        font-size: 18px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-power {\n        padding: 60px 0;\n    }\n    \n    .cc-power-main {\n        padding: 30px 24px;\n    }\n    \n    .cc-power-main::before {\n        top: 20px;\n        bottom: 20px;\n    }\n    \n    .cc-power-pillar {\n        padding: 20px 0;\n    }\n    \n    .cc-power-pillar:hover {\n        padding-left: 15px;\n    }\n    \n    .cc-power-pillar-title {\n        font-size: 16px;\n    }\n    \n    .cc-power-pillar-text {\n        font-size: 13px;\n    }\n}\n<\/style>\n\n<!-- SECTION LE POUVOIR DE LA MUSIQUE -->\n<section class=\"cc-power\" id=\"cc-power\">\n    <!-- Vertical Lines -->\n    <div class=\"cc-power-lines\">\n        <div class=\"cc-power-line\"><\/div>\n        <div class=\"cc-power-line\"><\/div>\n        <div class=\"cc-power-line\"><\/div>\n    <\/div>\n    \n    <div class=\"cc-power-container\">\n        <!-- Main Grid -->\n        <div class=\"cc-power-grid\">\n            <!-- Left - Main Card -->\n            <div class=\"cc-power-main\">\n                <div class=\"cc-power-label\">[Our Impact]<\/div>\n                <h2 class=\"cc-power-title\">The Power<br>of Music<\/h2>\n                <p class=\"cc-power-description\">\n                    At CHORAL CLASH, we believe that music has the power to transform communities and showcase Cameroon's rich cultural tapestry through unforgettable performances.\n                <\/p>\n            <\/div>\n            \n            <!-- Right - Pillars -->\n            <div class=\"cc-power-pillars\">\n                <!-- Pillar 1 -->\n                <div class=\"cc-power-pillar\">\n                    <div class=\"cc-power-pillar-number\">01<\/div>\n                    <h3 class=\"cc-power-pillar-title\">Building understanding<\/h3>\n                    <p class=\"cc-power-pillar-text\">Building bridges between different cultural traditions<\/p>\n                <\/div>\n                \n                <!-- Pillar 2 -->\n                <div class=\"cc-power-pillar\">\n                    <div class=\"cc-power-pillar-number\">02<\/div>\n                    <h3 class=\"cc-power-pillar-title\">Forging Connections<\/h3>\n                    <p class=\"cc-power-pillar-text\">Bringing people together beyond their differences<\/p>\n                <\/div>\n                \n                <!-- Pillar 3 -->\n                <div class=\"cc-power-pillar\">\n                    <div class=\"cc-power-pillar-number\">03<\/div>\n                    <h3 class=\"cc-power-pillar-title\">Transforming Lives<\/h3>\n                    <p class=\"cc-power-pillar-text\">Using the universal language of music to inspire<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ ============================================\n\/\/ GSAP ANIMATIONS - POWER SECTION\n\/\/ ============================================\ndocument.addEventListener('DOMContentLoaded', function() {\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\n        gsap.registerPlugin(ScrollTrigger);\n        \n        \/\/ Main card animation\n        gsap.to('.cc-power-main', {\n            opacity: 1,\n            x: 0,\n            duration: 1,\n            ease: 'power3.out',\n            scrollTrigger: {\n                trigger: '.cc-power',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Pillars animation with stagger\n        gsap.to('.cc-power-pillar', {\n            opacity: 1,\n            x: 0,\n            duration: 0.8,\n            stagger: 0.15,\n            ease: 'power3.out',\n            scrollTrigger: {\n                trigger: '.cc-power-pillars',\n                start: 'top 85%',\n                toggleActions: 'play none none none'\n            }\n        });\n    }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9ed573f e-con-full e-flex e-con e-parent\" data-id=\"9ed573f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3e02a9 elementor-widget elementor-widget-html\" data-id=\"e3e02a9\" 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 - PAGE \u00c0 PROPOS\nSECTION 6: L'EXP\u00c9RIENCE CHORAL CLASH\nStyle Premium - Timeline vertical\n==============================================\n-->\n\n<style>\n\/* ============================================\n   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\/* ============================================\n   CSS VARIABLES\n   ============================================ *\/\n:root {\n    --cc-black: #000000;\n    --cc-dark: #0a0a0a;\n    --cc-gray-dark: #111111;\n    --cc-gray: #1a1a1a;\n    --cc-gray-light: #888888;\n    --cc-gray-lighter: #aaaaaa;\n    --cc-white: #ffffff;\n    --cc-gold: #c9a227;\n    --cc-gold-light: #d4b044;\n    --cc-font-display: 'Bebas Neue', sans-serif;\n    --cc-font-body: 'Space Grotesk', sans-serif;\n    --cc-font-mono: 'Space Mono', monospace;\n    --cc-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* ============================================\n   SECTION L'EXP\u00c9RIENCE\n   ============================================ *\/\n.cc-experience {\n    position: relative;\n    background: var(--cc-black);\n    padding: 100px 0;\n    overflow: hidden;\n}\n\n\/* Vertical Lines *\/\n.cc-experience-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-experience-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.04);\n}\n\n.cc-experience-line:nth-child(1) { left: 25%; }\n.cc-experience-line:nth-child(2) { left: 50%; }\n.cc-experience-line:nth-child(3) { left: 75%; }\n\n\/* Container *\/\n.cc-experience-container {\n    position: relative;\n    z-index: 2;\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 60px;\n    min-height: 800px;\n}\n\n\/* Header - Extreme Right Position *\/\n.cc-experience-header {\n    position: absolute;\n    top: 120px;\n    right: 0;\n    text-align: right;\n    padding-right: 40px;\n    z-index: 5;\n}\n\n.cc-experience-label {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    color: var(--cc-gray-lighter);\n    margin-bottom: 20px;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n.cc-experience-title {\n    font-family: var(--cc-font-display);\n    font-size: clamp(50px, 8vw, 90px);\n    line-height: 0.95;\n    color: var(--cc-white);\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    margin: 0;\n    writing-mode: vertical-rl;\n    text-orientation: mixed;\n}\n\n.cc-experience-title-line {\n    display: block;\n    overflow: hidden;\n}\n\n.cc-experience-title-text {\n    display: block;\n    transform: translateY(100%);\n}\n\n\/* Timeline - Left Side *\/\n.cc-experience-timeline {\n    position: relative;\n    max-width: 650px;\n    padding-top: 20px;\n}\n\n\/* Central Line - Left Position *\/\n.cc-experience-timeline::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 30px;\n    width: 1px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.08);\n}\n\n\/* Animated Glow on Line - Gold conserv\u00e9 *\/\n.cc-experience-timeline::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 28px;\n    width: 5px;\n    height: 100px;\n    background: linear-gradient(\n        180deg,\n        transparent 0%,\n        var(--cc-gold) 50%,\n        transparent 100%\n    );\n    filter: blur(3px);\n    animation: cc-timeline-glow 4s ease-in-out infinite;\n}\n\n@keyframes cc-timeline-glow {\n    0%, 100% {\n        top: -100px;\n        opacity: 0;\n    }\n    10% {\n        opacity: 1;\n    }\n    90% {\n        opacity: 1;\n    }\n    100% {\n        top: calc(100% + 100px);\n        opacity: 0;\n    }\n}\n\n\/* Timeline Item *\/\n.cc-experience-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    margin-bottom: 60px;\n    padding-left: 100px;\n    opacity: 0;\n    transform: translateX(-30px);\n}\n\n.cc-experience-item:last-child {\n    margin-bottom: 0;\n}\n\n\/* Number - On Line - Carr\u00e9 *\/\n.cc-experience-number {\n    position: absolute;\n    left: 30px;\n    transform: translateX(-50%);\n    width: 60px;\n    height: 60px;\n    background: var(--cc-black);\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    border-radius: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: var(--cc-font-display);\n    font-size: 24px;\n    color: var(--cc-white);\n    z-index: 3;\n    transition: all 0.4s var(--cc-transition);\n}\n\n.cc-experience-item:hover .cc-experience-number {\n    background: var(--cc-white);\n    color: var(--cc-black);\n    border-color: var(--cc-white);\n}\n\n\/* Content Box *\/\n.cc-experience-content {\n    flex: 1;\n    padding: 35px 40px;\n    border-left: 1px solid rgba(255, 255, 255, 0.06);\n    transition: all 0.4s var(--cc-transition);\n    position: relative;\n}\n\n\/* Barre gold au hover *\/\n.cc-experience-content::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 2px;\n    height: 100%;\n    background: var(--cc-gold);\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 0.4s var(--cc-transition);\n}\n\n.cc-experience-item:hover .cc-experience-content::before {\n    transform: scaleY(1);\n}\n\n.cc-experience-item:hover .cc-experience-content {\n    background: rgba(255, 255, 255, 0.02);\n    border-left-color: transparent;\n}\n\n\/* Content Title *\/\n.cc-experience-content-title {\n    font-family: var(--cc-font-body);\n    font-size: 22px;\n    font-weight: 600;\n    color: var(--cc-white);\n    margin: 0 0 10px;\n    transition: color 0.3s var(--cc-transition);\n}\n\n\/* Content Text *\/\n.cc-experience-content-text {\n    font-family: var(--cc-font-body);\n    font-size: 15px;\n    font-weight: 300;\n    line-height: 1.7;\n    color: var(--cc-gray-light);\n    margin: 0;\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 1200px) {\n    .cc-experience-container {\n        padding: 0 40px;\n    }\n    \n    .cc-experience-header {\n        padding-right: 30px;\n    }\n    \n    .cc-experience-title {\n        font-size: clamp(40px, 7vw, 70px);\n    }\n}\n\n@media (max-width: 992px) {\n    .cc-experience {\n        padding: 100px 0;\n    }\n    \n    .cc-experience-header {\n        position: relative;\n        top: 0;\n        right: 0;\n        text-align: center;\n        padding-right: 0;\n        margin-bottom: 60px;\n    }\n    \n    .cc-experience-title {\n        writing-mode: horizontal-tb;\n        text-orientation: mixed;\n    }\n    \n    .cc-experience-container {\n        min-height: auto;\n    }\n    \n    .cc-experience-timeline {\n        max-width: 100%;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-experience {\n        padding: 80px 0;\n    }\n    \n    .cc-experience-container {\n        padding: 0 24px;\n    }\n    \n    .cc-experience-timeline::before,\n    .cc-experience-timeline::after {\n        left: 25px;\n    }\n    \n    .cc-experience-item {\n        padding-left: 80px;\n        margin-bottom: 40px;\n    }\n    \n    .cc-experience-number {\n        left: 25px;\n        width: 50px;\n        height: 50px;\n        font-size: 20px;\n    }\n    \n    .cc-experience-content {\n        padding: 25px 30px;\n    }\n    \n    .cc-experience-content-title {\n        font-size: 18px;\n    }\n    \n    .cc-experience-content-text {\n        font-size: 14px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-experience {\n        padding: 60px 0;\n    }\n    \n    .cc-experience-header {\n        margin-bottom: 40px;\n    }\n    \n    .cc-experience-timeline::before,\n    .cc-experience-timeline::after {\n        left: 20px;\n    }\n    \n    .cc-experience-item {\n        padding-left: 60px;\n        margin-bottom: 30px;\n    }\n    \n    .cc-experience-number {\n        left: 20px;\n        width: 40px;\n        height: 40px;\n        font-size: 16px;\n    }\n    \n    .cc-experience-content {\n        padding: 20px;\n    }\n    \n    .cc-experience-content-title {\n        font-size: 16px;\n    }\n    \n    .cc-experience-content-text {\n        font-size: 13px;\n    }\n}\n<\/style>\n\n<!-- SECTION L'EXP\u00c9RIENCE CHORAL CLASH -->\n<section class=\"cc-experience\" id=\"cc-experience\">\n    <!-- Vertical Lines -->\n    <div class=\"cc-experience-lines\">\n        <div class=\"cc-experience-line\"><\/div>\n        <div class=\"cc-experience-line\"><\/div>\n        <div class=\"cc-experience-line\"><\/div>\n    <\/div>\n    \n    <div class=\"cc-experience-container\">\n        <!-- Header -->\n        <div class=\"cc-experience-header\">\n            <div class=\"cc-experience-label\">[Le Parcours]<\/div>\n            <h2 class=\"cc-experience-title\">\n                <span class=\"cc-experience-title-line\">\n                    <span class=\"cc-experience-title-text\">The Experience<\/span>\n                <\/span>\n                <span class=\"cc-experience-title-line\">\n                    <span class=\"cc-experience-title-text\">Choral Clash<\/span>\n                <\/span>\n            <\/h2>\n        <\/div>\n        \n        <!-- Timeline -->\n        <div class=\"cc-experience-timeline\">\n            <!-- Item 1 - Auditions R\u00e9gionales -->\n            <div class=\"cc-experience-item\">\n                <div class=\"cc-experience-number\">1<\/div>\n                <div class=\"cc-experience-content\">\n                    <h3 class=\"cc-experience-content-title\">Regional Auditions<\/h3>\n                    <p class=\"cc-experience-content-text\">\n                        Choirs from all over Cameroon are competing for a chance to compete on the national stage.\n                    <\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- Item 2 - Battles Hebdomadaires -->\n            <div class=\"cc-experience-item\">\n                <div class=\"cc-experience-number\">2<\/div>\n                <div class=\"cc-experience-content\">\n                    <h3 class=\"cc-experience-content-title\">Weekly Battles<\/h3>\n                    <p class=\"cc-experience-content-text\">\n                        Each episode features themed challenges testing different musical genres and skills.\n                    <\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- Item 3 - Vote du Public -->\n            <div class=\"cc-experience-item\">\n                <div class=\"cc-experience-number\">3<\/div>\n                <div class=\"cc-experience-content\">\n                    <h3 class=\"cc-experience-content-title\">Public Vote<\/h3>\n                    <p class=\"cc-experience-content-text\">\n                        Viewers have their say in determining which choirs advance in the competition.\n                    <\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- Item 4 - Grande Finale -->\n            <div class=\"cc-experience-item\">\n                <div class=\"cc-experience-number\">4<\/div>\n                <div class=\"cc-experience-content\">\n                    <h3 class=\"cc-experience-content-title\">Grand Final<\/h3>\n                    <p class=\"cc-experience-content-text\">\n                        The last choir standing wins the title of CHORAL CLASH Champion.\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ ============================================\n\/\/ GSAP ANIMATIONS - EXPERIENCE SECTION\n\/\/ ============================================\ndocument.addEventListener('DOMContentLoaded', function() {\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\n        gsap.registerPlugin(ScrollTrigger);\n        \n        \/\/ Label animation\n        gsap.to('.cc-experience-label', {\n            opacity: 1,\n            y: 0,\n            duration: 0.8,\n            scrollTrigger: {\n                trigger: '.cc-experience',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Title reveal\n        gsap.to('.cc-experience-title-text', {\n            y: 0,\n            duration: 1,\n            stagger: 0.15,\n            ease: 'power4.out',\n            scrollTrigger: {\n                trigger: '.cc-experience',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Timeline items - slide from left\n        gsap.to('.cc-experience-item', {\n            opacity: 1,\n            x: 0,\n            duration: 0.8,\n            stagger: 0.15,\n            ease: 'power3.out',\n            scrollTrigger: {\n                trigger: '.cc-experience-timeline',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n    }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a72fc3 e-con-full e-flex e-con e-parent\" data-id=\"8a72fc3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2d3bd4 elementor-widget elementor-widget-html\" data-id=\"c2d3bd4\" 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 - PAGE \u00c0 PROPOS\nSECTION 7: CTA - REJOIGNEZ L'AVENTURE - Style Premium\n==============================================\n-->\n\n<style>\n\/* ============================================\n   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\/* ============================================\n   CSS VARIABLES\n   ============================================ *\/\n:root {\n    --cc-black: #000000;\n    --cc-dark: #0a0a0a;\n    --cc-gray-dark: #111111;\n    --cc-gray: #1a1a1a;\n    --cc-gray-light: #888888;\n    --cc-gray-lighter: #aaaaaa;\n    --cc-white: #ffffff;\n    --cc-gold: #c9a227;\n    --cc-gold-light: #d4b044;\n    --cc-font-display: 'Bebas Neue', sans-serif;\n    --cc-font-body: 'Space Grotesk', sans-serif;\n    --cc-font-mono: 'Space Mono', monospace;\n    --cc-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* ============================================\n   SECTION CTA\n   ============================================ *\/\n.cc-cta {\n    position: relative;\n    background: var(--cc-black);\n    padding: 80px 0;\n    overflow: hidden;\n}\n\n\/* Background Gradient - Plus subtil *\/\n.cc-cta-bg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: radial-gradient(\n        ellipse 80% 50% at 50% 100%,\n        rgba(201, 162, 39, 0.06) 0%,\n        transparent 60%\n    );\n    pointer-events: none;\n}\n\n\/* Vertical Lines *\/\n.cc-cta-lines {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n}\n\n.cc-cta-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.04);\n}\n\n.cc-cta-line:nth-child(1) { left: 25%; }\n.cc-cta-line:nth-child(2) { left: 50%; }\n.cc-cta-line:nth-child(3) { left: 75%; }\n\n\/* Container *\/\n.cc-cta-container {\n    position: relative;\n    z-index: 2;\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 0 60px;\n    text-align: center;\n}\n\n\/* Label *\/\n.cc-cta-label {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    color: var(--cc-gray-lighter);\n    margin-bottom: 30px;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n\/* Big Title *\/\n.cc-cta-title {\n    font-family: var(--cc-font-display);\n    font-size: clamp(60px, 12vw, 180px);\n    line-height: 0.9;\n    color: var(--cc-white);\n    text-transform: uppercase;\n    letter-spacing: 4px;\n    margin: 0 0 40px;\n    overflow: hidden;\n}\n\n.cc-cta-title-text {\n    display: block;\n    transform: translateY(100%);\n}\n\n\/* Description *\/\n.cc-cta-description {\n    font-family: var(--cc-font-body);\n    font-size: 18px;\n    font-weight: 300;\n    line-height: 1.8;\n    color: var(--cc-gray-light);\n    max-width: 700px;\n    margin: 0 auto 50px;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n\/* Buttons Container *\/\n.cc-cta-buttons {\n    display: flex;\n    justify-content: center;\n    gap: 20px;\n    flex-wrap: wrap;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n\/* Button Base *\/\n.cc-cta-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    padding: 18px 40px;\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    border-radius: 0;\n    transition: all 0.4s var(--cc-transition);\n    position: relative;\n    overflow: hidden;\n}\n\n\/* Primary Button *\/\n.cc-cta-btn-primary {\n    background: transparent;\n    color: var(--cc-white);\n    border: 1px solid var(--cc-white);\n}\n\n.cc-cta-btn-primary::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 100%;\n    background: var(--cc-white);\n    transition: width 0.4s var(--cc-transition);\n    z-index: -1;\n}\n\n.cc-cta-btn-primary:hover::before {\n    width: 100%;\n}\n\n.cc-cta-btn-primary:hover {\n    color: var(--cc-black);\n}\n\n\/* Secondary Button *\/\n.cc-cta-btn-secondary {\n    background: transparent;\n    color: var(--cc-gray-light);\n    border: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n.cc-cta-btn-secondary:hover {\n    border-color: rgba(255, 255, 255, 0.4);\n    color: var(--cc-white);\n}\n\n\/* Button Icon *\/\n.cc-cta-btn-icon {\n    width: 14px;\n    height: 14px;\n    transition: transform 0.3s var(--cc-transition);\n}\n\n.cc-cta-btn:hover .cc-cta-btn-icon {\n    transform: translateX(3px);\n}\n\n.cc-cta-btn-icon svg {\n    width: 100%;\n    height: 100%;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n}\n\n\/* Bottom Marquee *\/\n.cc-cta-marquee {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    overflow: hidden;\n    padding: 20px 0;\n    border-top: 1px solid rgba(255, 255, 255, 0.04);\n}\n\n.cc-cta-marquee-track {\n    display: flex;\n    animation: cc-cta-marquee 30s linear infinite;\n}\n\n@keyframes cc-cta-marquee {\n    0% {\n        transform: translateX(0);\n    }\n    100% {\n        transform: translateX(-50%);\n    }\n}\n\n.cc-cta-marquee-text {\n    font-family: var(--cc-font-display);\n    font-size: 14px;\n    letter-spacing: 8px;\n    text-transform: uppercase;\n    color: rgba(255, 255, 255, 0.06);\n    white-space: nowrap;\n    padding: 0 50px;\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 1200px) {\n    .cc-cta-container {\n        padding: 0 40px;\n    }\n}\n\n@media (max-width: 992px) {\n    .cc-cta {\n        padding: 120px 0;\n    }\n    \n    .cc-cta-description {\n        font-size: 16px;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-cta {\n        padding: 100px 0;\n    }\n    \n    .cc-cta-container {\n        padding: 0 24px;\n    }\n    \n    .cc-cta-title {\n        letter-spacing: 2px;\n    }\n    \n    .cc-cta-description {\n        font-size: 15px;\n        margin-bottom: 40px;\n    }\n    \n    .cc-cta-buttons {\n        flex-direction: column;\n        align-items: center;\n    }\n    \n    .cc-cta-btn {\n        width: 100%;\n        max-width: 300px;\n        justify-content: center;\n        padding: 16px 32px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-cta {\n        padding: 80px 0;\n    }\n    \n    .cc-cta-label {\n        margin-bottom: 20px;\n    }\n    \n    .cc-cta-title {\n        margin-bottom: 30px;\n    }\n    \n    .cc-cta-description {\n        font-size: 14px;\n    }\n    \n    .cc-cta-btn {\n        font-size: 10px;\n        padding: 14px 28px;\n    }\n}\n<\/style>\n\n<!-- SECTION CTA -->\n<section class=\"cc-cta\" id=\"cc-cta\">\n    <!-- Background -->\n    <div class=\"cc-cta-bg\"><\/div>\n    \n    <!-- Vertical Lines -->\n    <div class=\"cc-cta-lines\">\n        <div class=\"cc-cta-line\"><\/div>\n        <div class=\"cc-cta-line\"><\/div>\n        <div class=\"cc-cta-line\"><\/div>\n    <\/div>\n    \n    <div class=\"cc-cta-container\">\n        <!-- Label -->\n        <div class=\"cc-cta-label\">[Be Part of History]<\/div>\n        \n        <!-- Big Title -->\n        <h2 class=\"cc-cta-title\">\n            <span class=\"cc-cta-title-text\">Join<\/span>\n            <span class=\"cc-cta-title-text\">Adventure<\/span>\n        <\/h2>\n        \n        <!-- Description -->\n        <p class=\"cc-cta-description\">\n            Whether you're a music lover, a potential choir member, or someone who wants to support the arts, there's a place for you in the CHORAL CLASH community.\n        <\/p>\n        \n        <!-- Buttons -->\n        <div class=\"cc-cta-buttons\">\n            <a href=\"https:\/\/choralclash.com\/en\/partners\/\" class=\"cc-cta-btn cc-cta-btn-primary\">\n                Become a partner\n                <span class=\"cc-cta-btn-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n                    <\/svg>\n                <\/span>\n            <\/a>\n            <a href=\"https:\/\/www.youtube.com\/@choralclash\" target=\"_blank\" class=\"cc-cta-btn cc-cta-btn-secondary\">\n                <span class=\"cc-cta-btn-icon\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <polygon points=\"5 3 19 12 5 21 5 3\" fill=\"currentColor\" stroke=\"none\"\/>\n                    <\/svg>\n                <\/span>\n                Watch Now\n            <\/a>\n        <\/div>\n    <\/div>\n    \n    <!-- Bottom Marquee -->\n    <div class=\"cc-cta-marquee\">\n        <div class=\"cc-cta-marquee-track\">\n            <span class=\"cc-cta-marquee-text\">Choral Clash - La Voix du Cameroun - Choral Clash - La Voix du Cameroun - Choral Clash - La Voix du Cameroun - Choral Clash - La Voix du Cameroun - <\/span>\n            <span class=\"cc-cta-marquee-text\">Choral Clash - La Voix du Cameroun - Choral Clash - La Voix du Cameroun - Choral Clash - La Voix du Cameroun - Choral Clash - La Voix du Cameroun - <\/span>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n\/\/ ============================================\n\/\/ GSAP ANIMATIONS - CTA SECTION\n\/\/ ============================================\ndocument.addEventListener('DOMContentLoaded', function() {\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\n        gsap.registerPlugin(ScrollTrigger);\n        \n        \/\/ Label animation\n        gsap.to('.cc-cta-label', {\n            opacity: 1,\n            y: 0,\n            duration: 0.8,\n            scrollTrigger: {\n                trigger: '.cc-cta',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Title reveal\n        gsap.to('.cc-cta-title-text', {\n            y: 0,\n            duration: 1.2,\n            stagger: 0.1,\n            ease: 'power4.out',\n            scrollTrigger: {\n                trigger: '.cc-cta',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Description\n        gsap.to('.cc-cta-description', {\n            opacity: 1,\n            y: 0,\n            duration: 0.8,\n            delay: 0.3,\n            scrollTrigger: {\n                trigger: '.cc-cta',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n        \n        \/\/ Buttons\n        gsap.to('.cc-cta-buttons', {\n            opacity: 1,\n            y: 0,\n            duration: 0.8,\n            delay: 0.5,\n            scrollTrigger: {\n                trigger: '.cc-cta',\n                start: 'top 80%',\n                toggleActions: 'play none none none'\n            }\n        });\n    }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>[LA VOIX DU CAMEROUN] Where passion, creativity and harmony come together to showcase the best voices from every corner of Cameroon in a powerful celebration of culture, music and unity. Choral Clash Choral Clash Choral Clash Choral Clash Choral Clash Choral Clash Choral Clash Choral Clash [...]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":373,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":3482,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages\/18\/revisions\/3482"}],"wp:attachment":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}