{"id":30,"date":"2025-04-26T00:33:38","date_gmt":"2025-04-26T00:33:38","guid":{"rendered":"https:\/\/choralclash.com\/?page_id=30"},"modified":"2026-01-27T14:39:05","modified_gmt":"2026-01-27T14:39:05","slug":"contact","status":"publish","type":"page","link":"https:\/\/choralclash.com\/en\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"30\" class=\"elementor elementor-30\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9403503 e-flex e-con-boxed e-con e-parent\" data-id=\"9403503\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dac9a78 elementor-widget elementor-widget-html\" data-id=\"dac9a78\" 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 CONTACT\nSECTION 1: HERO + R\u00c9SEAUX SOCIAUX - 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-medium: #2a2a2a;\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   CONTACT HERO SECTION\n   ============================================ *\/\n.cc-contact-hero {\n    position: relative;\n    background: var(--cc-black);\n    padding: 180px 0 120px;\n    overflow: hidden;\n    min-height: 70vh;\n    display: flex;\n    align-items: center;\n}\n\n\/* Background Gradient - Plus subtil *\/\n.cc-contact-hero::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: \n        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201, 162, 39, 0.04) 0%, transparent 50%),\n        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(201, 162, 39, 0.02) 0%, transparent 50%),\n        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(201, 162, 39, 0.02) 0%, transparent 50%);\n    pointer-events: none;\n}\n\n\/* Vertical Lines *\/\n.cc-contact-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-contact-hero-line {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.04) 20%, rgba(255,255,255,0.04) 80%, transparent 100%);\n}\n\n.cc-contact-hero-line:nth-child(1) { left: 20%; }\n.cc-contact-hero-line:nth-child(2) { left: 40%; }\n.cc-contact-hero-line:nth-child(3) { left: 60%; }\n.cc-contact-hero-line:nth-child(4) { left: 80%; }\n\n\/* Decorative Corner Elements - Blanc subtil *\/\n.cc-contact-hero-corner {\n    position: absolute;\n    width: 80px;\n    height: 80px;\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    z-index: 2;\n}\n\n.cc-contact-hero-corner--tl {\n    top: 60px;\n    left: 60px;\n    border-right: none;\n    border-bottom: none;\n}\n\n.cc-contact-hero-corner--tr {\n    top: 60px;\n    right: 60px;\n    border-left: none;\n    border-bottom: none;\n}\n\n.cc-contact-hero-corner--bl {\n    bottom: 60px;\n    left: 60px;\n    border-right: none;\n    border-top: none;\n}\n\n.cc-contact-hero-corner--br {\n    bottom: 60px;\n    right: 60px;\n    border-left: none;\n    border-top: none;\n}\n\n\/* Container *\/\n.cc-contact-hero-container {\n    position: relative;\n    z-index: 3;\n    max-width: 900px;\n    margin: 0 auto;\n    padding: 0 60px;\n    text-align: center;\n}\n\n\/* Icon - Carr\u00e9 *\/\n.cc-contact-hero-icon {\n    width: 70px;\n    height: 70px;\n    margin: 0 auto 35px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 0;\n    position: relative;\n}\n\n.cc-contact-hero-icon::before {\n    content: '';\n    position: absolute;\n    inset: 8px;\n    border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 0;\n}\n\n.cc-contact-hero-icon svg {\n    width: 28px;\n    height: 28px;\n    fill: none;\n    stroke: var(--cc-gray-light);\n    stroke-width: 1.5;\n}\n\n\/* Label *\/\n.cc-contact-hero-label {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 6px;\n    text-transform: uppercase;\n    color: var(--cc-gray-lighter);\n    margin-bottom: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 20px;\n}\n\n.cc-contact-hero-label::before,\n.cc-contact-hero-label::after {\n    content: '';\n    width: 40px;\n    height: 1px;\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));\n}\n\n.cc-contact-hero-label::after {\n    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);\n}\n\n\/* Title *\/\n.cc-contact-hero-title {\n    font-family: var(--cc-font-display);\n    font-size: clamp(60px, 10vw, 120px);\n    line-height: 0.95;\n    color: var(--cc-white);\n    text-transform: uppercase;\n    letter-spacing: 4px;\n    margin: 0 0 25px;\n}\n\n\/* Description *\/\n.cc-contact-hero-description {\n    font-family: var(--cc-font-body);\n    font-size: 17px;\n    font-weight: 300;\n    line-height: 1.9;\n    color: var(--cc-gray-light);\n    margin: 0 auto 60px;\n    max-width: 500px;\n}\n\n\/* Social Section *\/\n.cc-contact-social {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 30px;\n}\n\n.cc-contact-social-label {\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    color: var(--cc-gray-lighter);\n}\n\n.cc-contact-social-links {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 20px;\n}\n\n.cc-contact-social-link {\n    width: 60px;\n    height: 60px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 0;\n    text-decoration: none;\n    transition: all 0.4s var(--cc-transition);\n    position: relative;\n}\n\n.cc-contact-social-link::before {\n    content: '';\n    position: absolute;\n    inset: 5px;\n    border: 1px solid rgba(255, 255, 255, 0.04);\n    border-radius: 0;\n    transition: all 0.4s var(--cc-transition);\n}\n\n.cc-contact-social-link:hover {\n    background: var(--cc-white);\n    border-color: var(--cc-white);\n    transform: translateY(-5px);\n}\n\n.cc-contact-social-link:hover::before {\n    border-color: rgba(0, 0, 0, 0.1);\n}\n\n.cc-contact-social-link svg {\n    width: 22px;\n    height: 22px;\n    fill: var(--cc-gray-light);\n    transition: fill 0.3s var(--cc-transition);\n}\n\n.cc-contact-social-link:hover svg {\n    fill: var(--cc-black);\n}\n\n\/* Scroll Indicator - Gold conserv\u00e9 *\/\n.cc-contact-hero-scroll {\n    position: absolute;\n    bottom: 40px;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n    z-index: 3;\n}\n\n.cc-contact-hero-scroll-text {\n    font-family: var(--cc-font-mono);\n    font-size: 10px;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    color: var(--cc-gray-light);\n}\n\n.cc-contact-hero-scroll-line {\n    width: 1px;\n    height: 50px;\n    background: linear-gradient(180deg, var(--cc-gold) 0%, transparent 100%);\n    animation: cc-scroll-pulse 2s ease-in-out infinite;\n}\n\n@keyframes cc-scroll-pulse {\n    0%, 100% { opacity: 0.3; height: 50px; }\n    50% { opacity: 1; height: 60px; }\n}\n\n\/* ============================================\n   ANIMATIONS\n   ============================================ *\/\n@keyframes cc-fade-up {\n    from {\n        opacity: 0;\n        transform: translateY(40px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@keyframes cc-fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n.cc-contact-hero-icon {\n    animation: cc-fade-up 1s var(--cc-transition) 0.1s both;\n}\n\n.cc-contact-hero-label {\n    animation: cc-fade-up 1s var(--cc-transition) 0.2s both;\n}\n\n.cc-contact-hero-title {\n    animation: cc-fade-up 1s var(--cc-transition) 0.3s both;\n}\n\n.cc-contact-hero-description {\n    animation: cc-fade-up 1s var(--cc-transition) 0.45s both;\n}\n\n.cc-contact-social {\n    animation: cc-fade-up 1s var(--cc-transition) 0.6s both;\n}\n\n.cc-contact-hero-corner {\n    animation: cc-fade-in 1.5s var(--cc-transition) 0.8s both;\n}\n\n.cc-contact-hero-scroll {\n    animation: cc-fade-in 1s var(--cc-transition) 1.2s both;\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 992px) {\n    .cc-contact-hero-corner {\n        width: 50px;\n        height: 50px;\n    }\n    \n    .cc-contact-hero-corner--tl,\n    .cc-contact-hero-corner--tr {\n        top: 40px;\n    }\n    \n    .cc-contact-hero-corner--bl,\n    .cc-contact-hero-corner--br {\n        bottom: 40px;\n    }\n    \n    .cc-contact-hero-corner--tl,\n    .cc-contact-hero-corner--bl {\n        left: 40px;\n    }\n    \n    .cc-contact-hero-corner--tr,\n    .cc-contact-hero-corner--br {\n        right: 40px;\n    }\n}\n\n@media (max-width: 768px) {\n    .cc-contact-hero {\n        padding: 140px 0 100px;\n        min-height: 60vh;\n    }\n    \n    .cc-contact-hero-container {\n        padding: 0 24px;\n    }\n    \n    .cc-contact-hero-corner {\n        display: none;\n    }\n    \n    .cc-contact-hero-icon {\n        width: 60px;\n        height: 60px;\n        margin-bottom: 25px;\n    }\n    \n    .cc-contact-hero-icon svg {\n        width: 24px;\n        height: 24px;\n    }\n    \n    .cc-contact-hero-label {\n        letter-spacing: 4px;\n        font-size: 10px;\n    }\n    \n    .cc-contact-hero-label::before,\n    .cc-contact-hero-label::after {\n        width: 25px;\n    }\n    \n    .cc-contact-hero-description {\n        font-size: 15px;\n        margin-bottom: 50px;\n    }\n    \n    .cc-contact-social-links {\n        gap: 15px;\n    }\n    \n    .cc-contact-social-link {\n        width: 55px;\n        height: 55px;\n    }\n    \n    .cc-contact-social-link svg {\n        width: 20px;\n        height: 20px;\n    }\n    \n    .cc-contact-hero-scroll {\n        display: none;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-contact-hero {\n        padding: 120px 0 80px;\n    }\n    \n    .cc-contact-social-link {\n        width: 50px;\n        height: 50px;\n    }\n    \n    .cc-contact-social-link::before {\n        inset: 4px;\n    }\n}\n<\/style>\n\n<!-- CONTACT HERO SECTION -->\n<section class=\"cc-contact-hero\" id=\"cc-contact-hero\">\n    <!-- Vertical Lines -->\n    <div class=\"cc-contact-hero-lines\">\n        <div class=\"cc-contact-hero-line\"><\/div>\n        <div class=\"cc-contact-hero-line\"><\/div>\n        <div class=\"cc-contact-hero-line\"><\/div>\n        <div class=\"cc-contact-hero-line\"><\/div>\n    <\/div>\n    \n    <!-- Corner Decorations -->\n    <div class=\"cc-contact-hero-corner cc-contact-hero-corner--tl\"><\/div>\n    <div class=\"cc-contact-hero-corner cc-contact-hero-corner--tr\"><\/div>\n    <div class=\"cc-contact-hero-corner cc-contact-hero-corner--bl\"><\/div>\n    <div class=\"cc-contact-hero-corner cc-contact-hero-corner--br\"><\/div>\n    \n    <div class=\"cc-contact-hero-container\">\n        <!-- Icon -->\n        <div class=\"cc-contact-hero-icon\">\n            <svg viewbox=\"0 0 24 24\">\n                <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/>\n                <polyline points=\"22,6 12,13 2,6\"\/>\n            <\/svg>\n        <\/div>\n        \n        <div class=\"cc-contact-hero-label\">Contact us<\/div>\n        <h1 class=\"cc-contact-hero-title\">Contact<\/h1>\n        <p class=\"cc-contact-hero-description\">\n            Do you have a question, an idea for a partnership or just want to say hello? We'd love to hear from you.\n        <\/p>\n        \n        <!-- Social Links -->\n        <div class=\"cc-contact-social\">\n            <span class=\"cc-contact-social-label\">Follow us on the networks<\/span>\n            <div class=\"cc-contact-social-links\">\n                <!-- Instagram -->\n                <a href=\"https:\/\/www.instagram.com\/choralclash?igsh=YTV4a2U3dTVkbms5&utm_source=qr\" target=\"_blank\" class=\"cc-contact-social-link\" aria-label=\"Instagram\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/>\n                    <\/svg>\n                <\/a>\n                \n                <!-- YouTube -->\n                <a href=\"https:\/\/youtube.com\/@choralclash?si=fMINV0XERzxIsviq\" target=\"_blank\" class=\"cc-contact-social-link\" aria-label=\"YouTube\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\/>\n                    <\/svg>\n                <\/a>\n                \n                <!-- Facebook -->\n                <a href=\"https:\/\/www.facebook.com\/share\/1C2RoPdkxX\/?mibextid=wwXIfr\" target=\"_blank\" class=\"cc-contact-social-link\" aria-label=\"Facebook\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/>\n                    <\/svg>\n                <\/a>\n                \n                <!-- TikTok -->\n                <a href=\"https:\/\/www.tiktok.com\/@choral.clash?_r=1&_t=ZS-93NWVjqPIbn\" target=\"_blank\" class=\"cc-contact-social-link\" aria-label=\"TikTok\">\n                    <svg viewbox=\"0 0 24 24\">\n                        <path d=\"M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z\"\/>\n                    <\/svg>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Scroll Indicator -->\n    <div class=\"cc-contact-hero-scroll\">\n        <span class=\"cc-contact-hero-scroll-text\">Scroll<\/span>\n        <div class=\"cc-contact-hero-scroll-line\"><\/div>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-141eeb9 e-flex e-con-boxed e-con e-parent\" data-id=\"141eeb9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d4b8fc6 elementor-widget elementor-widget-html\" data-id=\"d4b8fc6\" 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 CONTACT\nSECTION 2: FORMULAIRE\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-medium: #2a2a2a;\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   FORM SECTION\n   ============================================ *\/\n.cc-contact-form-section {\n    position: relative;\n    background: var(--cc-black);\n    padding: 0 0 160px;\n    overflow: hidden;\n}\n\n\/* Vertical Lines *\/\n.cc-contact-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-contact-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-contact-line:nth-child(1) { left: 20%; }\n.cc-contact-line:nth-child(2) { left: 40%; }\n.cc-contact-line:nth-child(3) { left: 60%; }\n.cc-contact-line:nth-child(4) { left: 80%; }\n\n\/* Container *\/\n.cc-contact-container {\n    position: relative;\n    z-index: 2;\n    max-width: 750px;\n    margin: 0 auto;\n    padding: 0 60px;\n}\n\n\/* ============================================\n   FORM STYLES - Style Premium\n   ============================================ *\/\n.cc-contact-form {\n    max-width: 100%;\n    margin: 0 auto;\n    background: transparent;\n    padding: 0;\n    border-radius: 0;\n    box-shadow: none;\n    font-family: var(--cc-font-body);\n}\n\n\/* Section Header *\/\n.cc-contact-form .section-title {\n    font-family: var(--cc-font-display);\n    font-size: clamp(24px, 4vw, 32px);\n    font-weight: 400;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    color: var(--cc-white);\n    margin: 0;\n    padding: 0 0 35px;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n    display: flex;\n    align-items: center;\n    gap: 18px;\n}\n\n.cc-contact-form .section-title::before {\n    content: '';\n    width: 50px;\n    height: 50px;\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 0;\n    flex-shrink: 0;\n    background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='1.5'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'\/%3E%3C\/svg%3E\") center\/22px no-repeat;\n}\n\n\/* Labels *\/\n.cc-contact-form label {\n    display: block;\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    color: var(--cc-gray-lighter);\n    margin-top: 30px;\n    margin-bottom: 12px;\n}\n\n\/* Inputs - Style Underline *\/\n.cc-contact-form input[type=\"text\"],\n.cc-contact-form input[type=\"email\"],\n.cc-contact-form input[type=\"tel\"] {\n    width: 100%;\n    padding: 18px 0;\n    font-family: var(--cc-font-body);\n    font-size: 16px;\n    font-weight: 400;\n    color: var(--cc-white);\n    background: transparent;\n    border: none;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 0;\n    outline: none;\n    transition: all 0.4s var(--cc-transition);\n}\n\n.cc-contact-form input[type=\"text\"]::placeholder,\n.cc-contact-form input[type=\"email\"]::placeholder,\n.cc-contact-form input[type=\"tel\"]::placeholder {\n    color: var(--cc-gray-light);\n    font-weight: 300;\n}\n\n.cc-contact-form input[type=\"text\"]:focus,\n.cc-contact-form input[type=\"email\"]:focus,\n.cc-contact-form input[type=\"tel\"]:focus {\n    border-bottom-color: var(--cc-gold);\n}\n\n\/* Textarea *\/\n.cc-contact-form textarea {\n    width: 100%;\n    min-height: 150px;\n    padding: 20px 24px;\n    font-family: var(--cc-font-body);\n    font-size: 15px;\n    font-weight: 400;\n    color: var(--cc-white);\n    background: rgba(255, 255, 255, 0.02);\n    border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 0;\n    outline: none;\n    resize: vertical;\n    transition: all 0.4s var(--cc-transition);\n}\n\n.cc-contact-form textarea::placeholder {\n    color: var(--cc-gray-light);\n    font-weight: 300;\n}\n\n.cc-contact-form textarea:focus {\n    border-color: var(--cc-gold);\n    background: rgba(201, 162, 39, 0.02);\n}\n\n\/* reCAPTCHA hint *\/\n.cc-contact-form > p[style*=\"font-size: 13px\"],\n.cc-contact-form .cc-recaptcha-hint {\n    font-family: var(--cc-font-body);\n    font-size: 12px !important;\n    font-weight: 300;\n    color: var(--cc-gray-light) !important;\n    margin: 35px 0 20px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n\/* reCAPTCHA container *\/\n.cc-contact-form .g-recaptcha {\n    margin-top: 10px;\n}\n\n\/* Error\/Success message *\/\n#cc-form-response {\n    margin-top: 25px;\n    padding: 18px 24px;\n    border-radius: 0;\n    font-family: var(--cc-font-body);\n    font-size: 14px;\n    font-weight: 500;\n    text-align: center;\n    display: none;\n}\n\n#cc-form-response.success {\n    display: block;\n    background: rgba(34, 197, 94, 0.08);\n    border: 1px solid rgba(34, 197, 94, 0.2);\n    color: #22c55e;\n}\n\n#cc-form-response.error {\n    display: block;\n    background: rgba(239, 68, 68, 0.08);\n    border: 1px solid rgba(239, 68, 68, 0.2);\n    color: #ef4444;\n}\n\n\/* Submit Button *\/\n.cc-contact-form button[type=\"submit\"] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 15px;\n    width: 100%;\n    padding: 24px 50px;\n    margin-top: 50px;\n    font-family: var(--cc-font-mono);\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    background: transparent;\n    color: var(--cc-white);\n    border: 1px solid var(--cc-white);\n    border-radius: 0;\n    cursor: pointer;\n    transition: all 0.5s var(--cc-transition);\n    position: relative;\n    overflow: hidden;\n}\n\n.cc-contact-form button[type=\"submit\"]::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-contact-form button[type=\"submit\"]:hover::before {\n    width: 100%;\n}\n\n.cc-contact-form button[type=\"submit\"]:hover {\n    color: var(--cc-black);\n}\n\n.cc-contact-form button[type=\"submit\"]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    transform: none;\n}\n\n.cc-contact-form button[type=\"submit\"] svg {\n    width: 16px;\n    height: 16px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n}\n\n\/* Spinner *\/\n.cc-btn-spinner {\n    width: 22px;\n    height: 22px;\n    border: 2px solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: cc-spin 0.8s linear infinite;\n}\n\n@keyframes cc-spin {\n    to { transform: rotate(360deg); }\n}\n\n\/* ============================================\n   ANIMATIONS\n   ============================================ *\/\n@keyframes cc-fade-up {\n    from {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.cc-contact-form {\n    animation: cc-fade-up 0.8s var(--cc-transition) 0.1s both;\n}\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 768px) {\n    .cc-contact-form-section {\n        padding-bottom: 100px;\n    }\n    \n    .cc-contact-container {\n        padding: 0 24px;\n    }\n    \n    .cc-contact-form .section-title {\n        padding-bottom: 30px;\n        font-size: 22px;\n        gap: 15px;\n    }\n    \n    .cc-contact-form .section-title::before {\n        width: 45px;\n        height: 45px;\n        background-size: 20px;\n    }\n    \n    .cc-contact-form label {\n        margin-top: 25px;\n    }\n    \n    .cc-contact-form input[type=\"text\"],\n    .cc-contact-form input[type=\"email\"],\n    .cc-contact-form input[type=\"tel\"] {\n        padding: 16px 0;\n        font-size: 15px;\n    }\n    \n    .cc-contact-form textarea {\n        padding: 18px 20px;\n        font-size: 14px;\n    }\n    \n    .cc-contact-form button[type=\"submit\"] {\n        padding: 20px 40px;\n        margin-top: 40px;\n    }\n}\n\n@media (max-width: 480px) {\n    .cc-contact-form .section-title {\n        padding-bottom: 25px;\n        font-size: 20px;\n        gap: 12px;\n    }\n    \n    .cc-contact-form .section-title::before {\n        width: 42px;\n        height: 42px;\n        background-size: 18px;\n    }\n}\n<\/style>\n\n<!-- FORM SECTION -->\n<section class=\"cc-contact-form-section\" id=\"cc-contact-form\">\n    <!-- Vertical Lines -->\n    <div class=\"cc-contact-lines\">\n        <div class=\"cc-contact-line\"><\/div>\n        <div class=\"cc-contact-line\"><\/div>\n        <div class=\"cc-contact-line\"><\/div>\n        <div class=\"cc-contact-line\"><\/div>\n    <\/div>\n    \n    <div class=\"cc-contact-container\">\n        <form id=\"cc-contact-form-element\" class=\"cc-contact-form\" action=\"\">\n            <input type=\"hidden\" name=\"contact_form\" value=\"1\">\n            \n            <!-- Section Title -->\n            <p class=\"section-title\">Leave us a Message<\/p>\n            \n            <!-- Name -->\n            <label for=\"cc-name\">Your name<\/label>\n            <input type=\"text\" id=\"cc-name\" name=\"name\" placeholder=\"Enter your full name\" required>\n            \n            <!-- Email -->\n            <label for=\"cc-email\">Your email<\/label>\n            <input type=\"email\" id=\"cc-email\" name=\"email\" placeholder=\"votre@email.com\" required>\n            \n            <!-- Phone -->\n            <label for=\"cc-phone\">Telephone number<\/label>\n            <input type=\"tel\" id=\"cc-phone\" name=\"phone\" placeholder=\"+237 6XX XXX XXX\" required>\n            \n            <!-- Message -->\n            <label for=\"cc-message\">Your message<\/label>\n            <textarea id=\"cc-message\" name=\"message\" placeholder=\"Write your message here...\" rows=\"6\" required><\/textarea>\n            \n            <!-- reCAPTCHA -->\n            <p style=\"font-size: 13px; color: gray; margin-bottom: 5px;\">\n                \u26a0 Please complete all fields before ticking the reCAPTCHA.\n            <\/p>\n            <div class=\"g-recaptcha\" data-sitekey=\"6LcrjFArAAAAAO0CDQsmvPwRzAMyYQ9TJz6N6pEs\"><\/div>\n            \n            <!-- Response -->\n            <div id=\"cc-form-response\"><\/div>\n            \n            <!-- Submit Button -->\n            <button type=\"submit\">\n                <span class=\"cc-btn-text\">Send Message<\/span>\n                <span class=\"cc-btn-spinner\" style=\"display:none;\"><\/span>\n                <svg viewbox=\"0 0 24 24\" class=\"cc-btn-icon\">\n                    <path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z\"\/>\n                <\/svg>\n            <\/button>\n        <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n    <\/div>\n<\/section>\n\n<!-- reCAPTCHA Script -->\n<script src=\"https:\/\/www.google.com\/recaptcha\/api.js\" async defer><\/script>\n\n<script>\ndocument.getElementById(\"cc-contact-form-element\").addEventListener(\"submit\", function (e) {\n    e.preventDefault();\n\n    const form = this;\n    const button = form.querySelector(\"button[type='submit']\");\n    const btnText = form.querySelector(\".cc-btn-text\");\n    const btnSpinner = form.querySelector(\".cc-btn-spinner\");\n    const btnIcon = form.querySelector(\".cc-btn-icon\");\n    const responseBox = document.getElementById(\"cc-form-response\");\n\n    const name = form.querySelector('input[name=\"name\"]').value.trim();\n    const email = form.querySelector('input[name=\"email\"]').value.trim();\n    const phone = form.querySelector('input[name=\"phone\"]').value.trim();\n    const message = form.querySelector('textarea[name=\"message\"]').value.trim();\n\n    \/\/ Reset response\n    responseBox.className = \"\";\n    responseBox.textContent = \"\";\n    responseBox.style.display = \"none\";\n\n    \/\/ Validation\n    if (!name || !email || !phone || !message) {\n        responseBox.className = \"error\";\n        responseBox.textContent = \"Veuillez remplir tous les champs.\";\n        responseBox.style.display = \"block\";\n        return;\n    }\n\n    if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\n        responseBox.className = \"error\";\n        responseBox.textContent = \"Adresse email invalide.\";\n        responseBox.style.display = \"block\";\n        return;\n    }\n\n    \/\/ Check reCAPTCHA\n    const recaptchaResponse = grecaptcha.getResponse();\n    if (!recaptchaResponse) {\n        responseBox.className = \"error\";\n        responseBox.textContent = \"Veuillez v\u00e9rifier le reCAPTCHA.\";\n        responseBox.style.display = \"block\";\n        return;\n    }\n\n    const formData = new FormData(form);\n    formData.append(\"g-recaptcha-response\", recaptchaResponse);\n\n    \/\/ Show loading state\n    btnText.style.display = \"none\";\n    btnIcon.style.display = \"none\";\n    btnSpinner.style.display = \"inline-block\";\n    button.disabled = true;\n\n    fetch(\"\/wp-admin\/admin-ajax.php?action=send_contact_form\", {\n        method: \"POST\",\n        body: formData\n    })\n    .then(response => response.json())\n    .then(data => {\n        btnText.style.display = \"inline\";\n        btnIcon.style.display = \"inline\";\n        btnSpinner.style.display = \"none\";\n        button.disabled = false;\n\n        if (data.success) {\n            responseBox.className = \"success\";\n            responseBox.textContent = \"\u2713 Message envoy\u00e9 avec succ\u00e8s ! Nous vous r\u00e9pondrons bient\u00f4t.\";\n            responseBox.style.display = \"block\";\n            form.reset();\n            grecaptcha.reset();\n        } else {\n            responseBox.className = \"error\";\n            responseBox.textContent = \"\u2715 Erreur : \" + (data.message || \"Veuillez r\u00e9essayer.\");\n            responseBox.style.display = \"block\";\n        }\n    })\n    .catch(error => {\n        btnText.style.display = \"inline\";\n        btnIcon.style.display = \"inline\";\n        btnSpinner.style.display = \"none\";\n        button.disabled = false;\n        responseBox.className = \"error\";\n        responseBox.textContent = \"\u2715 Une erreur s'est produite. Veuillez r\u00e9essayer.\";\n        responseBox.style.display = \"block\";\n        console.error(\"Erreur:\", error);\n    });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Contact us Contact us Do you have a question, a partnership idea or just want to say hello? We'd love to hear from you. Follow us on the networks Scroll Leave us a Message Your Name Your Email Phone Number Your Message \u26a0 Please complete all fields before checking the reCAPTCHA. Send Message<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-30","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":74,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":3616,"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/pages\/30\/revisions\/3616"}],"wp:attachment":[{"href":"https:\/\/choralclash.com\/en\/wp-json\/wp\/v2\/media?parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}