{"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\/fr\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t<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\">[LA VOIX DU CAMEROUN]<\/div>\n                \n                <!-- Description -->\n                <p class=\"cc-about-hero-description\">\n                    L\u00e0 o\u00f9 la passion, la cr\u00e9ativit\u00e9 et l'harmonie se rencontrent pour mettre en valeur les meilleures voix de chaque coin du Cameroun dans une c\u00e9l\u00e9bration puissante de la culture, de la musique et de l'unit\u00e9.\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\">[Notre Mission]<\/div>\n            <h2 class=\"cc-mission-title\">\n                <span class=\"cc-mission-title-line\">\n                    <span class=\"cc-mission-title-text\">Notre<\/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\">\u00c9lever l'H\u00e9ritage<\/h3>\n                <p class=\"cc-mission-card-description\">\n                    Nous mettons en valeur les riches traditions musicales et la diversit\u00e9 culturelle du Cameroun \u00e0 travers des performances chorales exceptionnelles.\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\">C\u00e9l\u00e9brer la Diversit\u00e9<\/h3>\n                <p class=\"cc-mission-card-description\">\n                    CHORAL CLASH rassemble des voix de tous horizons, repr\u00e9sentant chaque r\u00e9gion du Cameroun.\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\">Cr\u00e9er une Communaut\u00e9<\/h3>\n                <p class=\"cc-mission-card-description\">\n                    \u00c0 travers la musique, nous construisons des connexions et de la compr\u00e9hension tout en offrant une plateforme aux talents \u00e9mergents et \u00e9tablis.\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\">[Le Format]<\/div>\n            <h2 class=\"cc-format-title\">\n                <span class=\"cc-format-title-line\">\n                    <span class=\"cc-format-title-text\">Le Format du Show<\/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\">Chorales Uniques<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Soigneusement s\u00e9lectionn\u00e9es \u00e0 travers le Cameroun, chacune avec son propre style distinctif.\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\">\u00c9pisodes Captivants<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Des d\u00e9fis hebdomadaires testant les prouesses vocales et la cr\u00e9ativit\u00e9.\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\">Juges Experts<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Des professionnels fournissant conseils et retours constructifs.\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\">Coachs D\u00e9vou\u00e9s<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Des mentors passionn\u00e9s accompagnant chaque chorale vers l'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\">Pouvoir du Public<\/h3>\n                <p class=\"cc-format-card-description\">\n                    Les t\u00e9l\u00e9spectateurs votent pour leurs favoris, le public a une voix.\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\">[Les Genres]<\/div>\n            <h2 class=\"cc-diversity-title\">\n                <span class=\"cc-diversity-title-line\">\n                    <span class=\"cc-diversity-title-text\">Diversit\u00e9 Musicale<\/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                        Traditionnel\n                        <span class=\"cc-diversity-genre-dot\"><\/span>\n                    <\/h3>\n                    <p class=\"cc-diversity-genre-description\">\n                        Rythmes camerounais authentiques c\u00e9l\u00e9brant notre patrimoine culturel.\n                    <\/p>\n                <\/div>\n                <div class=\"cc-diversity-genre\">\n                    <h3 class=\"cc-diversity-genre-title\">\n                        Classique\n                        <span class=\"cc-diversity-genre-dot\"><\/span>\n                    <\/h3>\n                    <p class=\"cc-diversity-genre-description\">\n                        Arrangements choraux raffin\u00e9s d\u00e9montrant l'excellence technique.\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                        Performances spirituelles \u00e9mouvantes qui \u00e9l\u00e8vent et inspirent.\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                        Contemporain\n                    <\/h3>\n                    <p class=\"cc-diversity-genre-description\">\n                        Interpr\u00e9tations modernes m\u00ealant influences globales et sons locaux.\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\">Questions Fr\u00e9quentes<\/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\">Comment ma chorale peut-elle participer \u00e0 la comp\u00e9tition ?<\/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                            Les inscriptions pour la prochaine saison s'ouvriront bient\u00f4t. Suivez nos r\u00e9seaux sociaux ou inscrivez-vous \u00e0 notre newsletter pour \u00eatre inform\u00e9 des dates d'audition.\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\">\u00c9pisodes<\/div>\n                <div class=\"cc-faq-question\">O\u00f9 puis-je regarder les \u00e9pisodes de 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                            Tous les \u00e9pisodes sont disponibles sur notre cha\u00eene YouTube officielle. Vous pouvez \u00e9galement suivre les diffusions en direct sur nos plateformes partenaires.\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\">Comment voter pour ma chorale pr\u00e9f\u00e9r\u00e9e ?<\/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                            Le vote se fait via notre plateforme officielle pendant les p\u00e9riodes de vote ouvertes. Rendez-vous sur la page \"Voter\" pour soutenir votre chorale favorite.\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\">Partenariat<\/div>\n                <div class=\"cc-faq-question\">Comment devenir partenaire ou sponsor du 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                            Nous accueillons les partenariats avec des organisations qui partagent notre passion pour la musique et la culture camerounaise. Visitez notre page Partenaires ou contactez-nous directement.\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\">Saison 2<\/div>\n                <div class=\"cc-faq-question\">Quand commence la prochaine saison ?<\/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                            Les dates de la prochaine saison seront annonc\u00e9es sur nos r\u00e9seaux sociaux. Restez connect\u00e9s pour ne rien manquer des prochaines comp\u00e9titions.\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\">[Notre Impact]<\/div>\n                <h2 class=\"cc-power-title\">Le Pouvoir<br>de la Musique<\/h2>\n                <p class=\"cc-power-description\">\n                    Chez CHORAL CLASH, nous croyons que la musique a le pouvoir de transformer les communaut\u00e9s et de mettre en valeur la riche tapisserie culturelle du Cameroun \u00e0 travers des performances inoubliables.\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\">Construire la Compr\u00e9hension<\/h3>\n                    <p class=\"cc-power-pillar-text\">Cr\u00e9er des ponts entre diff\u00e9rentes traditions culturelles<\/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\">Forger des Connexions<\/h3>\n                    <p class=\"cc-power-pillar-text\">Rassembler les gens au-del\u00e0 des diff\u00e9rences<\/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\">Transformer des Vies<\/h3>\n                    <p class=\"cc-power-pillar-text\">Utiliser le langage universel de la musique pour inspirer<\/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\">L'Exp\u00e9rience<\/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\">Auditions R\u00e9gionales<\/h3>\n                    <p class=\"cc-experience-content-text\">\n                        Les chorales de tout le Cameroun se pr\u00e9sentent pour avoir une chance de concourir sur la sc\u00e8ne nationale.\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\">Battles Hebdomadaires<\/h3>\n                    <p class=\"cc-experience-content-text\">\n                        Chaque \u00e9pisode pr\u00e9sente des d\u00e9fis th\u00e9matiques testant diff\u00e9rents genres et comp\u00e9tences musicales.\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\">Vote du Public<\/h3>\n                    <p class=\"cc-experience-content-text\">\n                        Les t\u00e9l\u00e9spectateurs ont leur mot \u00e0 dire pour d\u00e9terminer quelles chorales avancent dans la comp\u00e9tition.\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\">Grande Finale<\/h3>\n                    <p class=\"cc-experience-content-text\">\n                        La derni\u00e8re chorale debout remporte le titre de Champion CHORAL CLASH.\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\">[Faites Partie de l'Histoire]<\/div>\n        \n        <!-- Big Title -->\n        <h2 class=\"cc-cta-title\">\n            <span class=\"cc-cta-title-text\">Rejoignez<\/span>\n            <span class=\"cc-cta-title-text\">l'Aventure<\/span>\n        <\/h2>\n        \n        <!-- Description -->\n        <p class=\"cc-cta-description\">\n            Que vous soyez un passionn\u00e9 de musique, un membre potentiel d'une chorale, ou quelqu'un qui souhaite soutenir les arts, il y a une place pour vous dans la communaut\u00e9 CHORAL CLASH.\n        <\/p>\n        \n        <!-- Buttons -->\n        <div class=\"cc-cta-buttons\">\n            <a href=\"\/partners\/\" class=\"cc-cta-btn cc-cta-btn-primary\">\n                Devenir Partenaire\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                Regarder Maintenant\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 \u2022 La Voix du Cameroun \u2022 Choral Clash \u2022 La Voix du Cameroun \u2022 Choral Clash \u2022 La Voix du Cameroun \u2022 Choral Clash \u2022 La Voix du Cameroun \u2022 <\/span>\n            <span class=\"cc-cta-marquee-text\">Choral Clash \u2022 La Voix du Cameroun \u2022 Choral Clash \u2022 La Voix du Cameroun \u2022 Choral Clash \u2022 La Voix du Cameroun \u2022 Choral Clash \u2022 La Voix du Cameroun \u2022 <\/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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>[LA VOIX DU CAMEROUN] L\u00e0 o\u00f9 la passion, la cr\u00e9ativit\u00e9 et l&rsquo;harmonie se rencontrent pour mettre en valeur les meilleures voix de chaque coin du Cameroun dans une c\u00e9l\u00e9bration puissante de la culture, de la musique et de l&rsquo;unit\u00e9. Choral Clash Choral Clash Choral Clash Choral Clash Choral Clash Choral Clash Choral Clash Choral Clash [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":373,"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":3482,"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/pages\/18\/revisions\/3482"}],"wp:attachment":[{"href":"https:\/\/choralclash.com\/fr\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}