{"id":7,"date":"2026-10-23T11:56:59","date_gmt":"2026-10-23T11:56:59","guid":{"rendered":"https:\/\/demodj.inter-rec.fr\/?page_id=7"},"modified":"2026-10-23T13:15:34","modified_gmt":"2026-10-23T13:15:34","slug":"accueil","status":"publish","type":"page","link":"https:\/\/demodj.inter-rec.fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2ca99b8 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"2ca99b8\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-327535d\" data-id=\"327535d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1156748 elementor-widget__width-initial elementor-widget elementor-widget-shortcode\" data-id=\"1156748\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <div\n        id=\"hdj-1\"\n        class=\"hdj-site\"\n        style=\"\n            --hdj-c1: #D4AF37;\n            --hdj-c2: #080808;\n            --hdj-bg: #080808;\n            --hdj-text: #FFFFFF;\n        \"\n    >\n        <section id=\"hdj-accueil\" class=\"hdj-panel hdj-hero\">\n            <div class=\"hdj-container hdj-hero-grid\">\n                <div class=\"hdj-hero-copy\">\n                    <div class=\"hdj-eyebrow\">\n                        <span class=\"hdj-live-dot\"><\/span>\n                        DJ \u2022 \u00c9V\u00c9NEMENTS \u2022 AMBIANCE\n                    <\/div>\n\n                    <h1>Faites vibrer votre \u00e9v\u00e9nement<\/h1>\n\n                    <p class=\"hdj-lead\">Mariage, anniversaire ou soir\u00e9e d\u2019entreprise : une ambiance musicale adapt\u00e9e \u00e0 votre \u00e9v\u00e9nement et \u00e0 vos envies.<\/p>\n\n                    <a class=\"hdj-button\" href=\"#hdj-devis\">\n                        Demander un devis                        <svg class=\"hdj-icon hdj-icon-arrow\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 17 17 7M7 7h10v10\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                    <\/a>\n\n                    <div class=\"hdj-audio-bars\" aria-hidden=\"true\">\n                                                    <span style=\"--bar: 8px; --delay: 0s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.08s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0.16s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.24s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0.32s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.4s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0.48s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.56s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.08s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0.16s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.24s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0.32s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.4s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0.48s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.56s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.08s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0.16s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.24s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0.32s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.4s\"><\/span>\n                                                    <span style=\"--bar: 8px; --delay: 0.48s\"><\/span>\n                                                    <span style=\"--bar: 25px; --delay: 0.56s\"><\/span>\n                                            <\/div>\n                <\/div>\n\n                <div class=\"hdj-hero-visual\">\n                    <div class=\"hdj-orbit hdj-orbit-one\"><\/div>\n                    <div class=\"hdj-orbit hdj-orbit-two\"><\/div>\n\n                    <div class=\"hdj-vinyl\" aria-label=\"Vinyle anim\u00e9 d\u00e9coratif\">\n                        <div class=\"hdj-vinyl-grooves\"><\/div>\n                        <div class=\"hdj-vinyl-label\">\n                            <span>DJ<\/span>\n                            <small>LIVE SET<\/small>\n                        <\/div>\n                    <\/div>\n\n                                            <div class=\"hdj-dj-photo\">\n                            <img decoding=\"async\"\n                                src=\"https:\/\/demodj.inter-rec.fr\/wp-content\/uploads\/2026\/10\/Copie-de-interrec.png\"\n                                alt=\"DJ en prestation\"\n                                loading=\"eager\"\n                            >\n                        <\/div>\n                    \n                    <div class=\"hdj-floating-tag\">\n                        <span class=\"hdj-tag-icon\"><svg class=\"hdj-icon hdj-icon-music\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18V5l12-2v13M9 18a3 3 0 1 1-3-3c1.66 0 3 1.34 3 3Zm12-2a3 3 0 1 1-3-3c1.66 0 3 1.34 3 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n                        <span><strong>Votre \u00e9v\u00e9nement<\/strong><small>Votre ambiance, votre musique<\/small><\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <a class=\"hdj-scroll-hint\" href=\"#hdj-prestations\">\n                <span>D\u00e9couvrir<\/span>\n                <svg class=\"hdj-scroll-arrow hdj-icon\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 4v16m-7-7 7 7 7-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/a>\n        <\/section>\n\n        <section id=\"hdj-prestations\" class=\"hdj-panel hdj-services\">\n            <div class=\"hdj-container\">\n                <div class=\"hdj-section-heading\">\n                    <div class=\"hdj-eyebrow\">UNE AMBIANCE POUR CHAQUE MOMENT<\/div>\n                    <h2>Quel que soit l\u2019\u00e9v\u00e9nement, <span>faisons vibrer la soir\u00e9e.<\/span><\/h2>\n                    <p>Une prestation adapt\u00e9e \u00e0 votre \u00e9v\u00e9nement, \u00e0 vos invit\u00e9s et \u00e0 vos envies musicales.<\/p>\n                <\/div>\n\n                <div class=\"hdj-service-grid\">\n                                            <article class=\"hdj-service-card\">\n                            <div class=\"hdj-service-icon\" aria-hidden=\"true\"><svg class=\"hdj-icon\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3 14.7 9.3 21 12l-6.3 2.7L12 21l-2.7-6.3L3 12l6.3-2.7L12 3Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n                            <span class=\"hdj-card-number\">01<\/span>\n                            <h3>Mariages<\/h3>\n                            <p>Une ambiance musicale \u00e0 votre image pour c\u00e9l\u00e9brer votre journ\u00e9e.<\/p>\n                            <a href=\"#hdj-devis\" class=\"hdj-text-link\">\n                                Parler de mon projet <svg class=\"hdj-icon hdj-icon-arrow\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 17 17 7M7 7h10v10\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/a>\n                        <\/article>\n                                            <article class=\"hdj-service-card\">\n                            <div class=\"hdj-service-icon\" aria-hidden=\"true\"><svg class=\"hdj-icon\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18V5l12-2v13M9 18a3 3 0 1 1-3-3c1.66 0 3 1.34 3 3Zm12-2a3 3 0 1 1-3-3c1.66 0 3 1.34 3 3Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n                            <span class=\"hdj-card-number\">02<\/span>\n                            <h3>Anniversaires<\/h3>\n                            <p>Une playlist adapt\u00e9e \u00e0 vos go\u00fbts pour faire danser vos invit\u00e9s.<\/p>\n                            <a href=\"#hdj-devis\" class=\"hdj-text-link\">\n                                Parler de mon projet <svg class=\"hdj-icon hdj-icon-arrow\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 17 17 7M7 7h10v10\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/a>\n                        <\/article>\n                                            <article class=\"hdj-service-card\">\n                            <div class=\"hdj-service-icon\" aria-hidden=\"true\"><svg class=\"hdj-icon\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3 21 12 12 21 3 12 12 3Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.7\"\/><\/svg><\/div>\n                            <span class=\"hdj-card-number\">03<\/span>\n                            <h3>Soir\u00e9es priv\u00e9es<\/h3>\n                            <p>Un DJ pour vos \u00e9v\u00e9nements priv\u00e9s, associatifs ou professionnels.<\/p>\n                            <a href=\"#hdj-devis\" class=\"hdj-text-link\">\n                                Parler de mon projet <svg class=\"hdj-icon hdj-icon-arrow\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 17 17 7M7 7h10v10\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                            <\/a>\n                        <\/article>\n                                    <\/div>\n\n                <div class=\"hdj-services-bottom\">\n                    <span>Votre \u00e9v\u00e9nement m\u00e9rite sa propre bande-son.<\/span>\n                    <a class=\"hdj-button hdj-button-outline\" href=\"#hdj-devis\">Parlons de votre projet <svg class=\"hdj-icon hdj-icon-arrow\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 17 17 7M7 7h10v10\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"hdj-devis\" class=\"hdj-quote-modal\" aria-hidden=\"true\">\n            <div class=\"hdj-modal-backdrop\" data-hdj-close><\/div>\n            <div class=\"hdj-modal-dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"hdj-1-quote-title\" tabindex=\"-1\">\n                <button type=\"button\" class=\"hdj-modal-close\" aria-label=\"Fermer le formulaire\" data-hdj-close><svg class=\"hdj-icon\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"m6 6 12 12M18 6 6 18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg><\/button>\n            <div class=\"hdj-container hdj-quote-grid\">\n                <div class=\"hdj-quote-copy\">\n                    <div class=\"hdj-eyebrow\">VOTRE PROJET COMMENCE ICI<\/div>\n                    <h2 id=\"hdj-1-quote-title\">Parlons de votre \u00e9v\u00e9nement<\/h2>\n                    <p>D\u00e9crivez-nous votre projet. Nous reviendrons vers vous pour \u00e9changer sur vos besoins.<\/p>\n\n                    <div class=\"hdj-quote-note\">\n                        <span aria-hidden=\"true\"><svg class=\"hdj-icon\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3 14.7 9.3 21 12l-6.3 2.7L12 21l-2.7-6.3L3 12l6.3-2.7L12 3Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n                        <p>Quelques informations suffisent pour commencer \u00e0 pr\u00e9parer une prestation adapt\u00e9e \u00e0 votre \u00e9v\u00e9nement.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"hdj-form-card\">\n                    \n                    <form class=\"hdj-form\" method=\"post\" action=\"https:\/\/demodj.inter-rec.fr\/wp-admin\/admin-post.php\">\n                        <input type=\"hidden\" name=\"action\" value=\"hdj_quote\">\n                        <input type=\"hidden\" id=\"hdj_nonce\" name=\"hdj_nonce\" value=\"fed9f5efda\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F7\" \/>\n                        <div class=\"hdj-honeypot\" aria-hidden=\"true\">\n                            <label for=\"hdj-1-website\">Ne pas remplir ce champ<\/label>\n                            <input id=\"hdj-1-website\" type=\"text\" name=\"hdj_website\" tabindex=\"-1\" autocomplete=\"off\">\n                        <\/div>\n\n                        <div class=\"hdj-form-heading\">\n                            <span>DEMANDE DE DEVIS<\/span>\n                            <span class=\"hdj-form-step\">01 \/ 01<\/span>\n                        <\/div>\n\n                        <div class=\"hdj-form-row\">\n                            <div class=\"hdj-field\">\n                                <label for=\"hdj-1-name\">Nom et pr\u00e9nom *<\/label>\n                                <input id=\"hdj-1-name\" type=\"text\" name=\"hdj_name\" autocomplete=\"name\" maxlength=\"120\" required>\n                            <\/div>\n                            <div class=\"hdj-field\">\n                                <label for=\"hdj-1-email\">E-mail *<\/label>\n                                <input id=\"hdj-1-email\" type=\"email\" name=\"hdj_email\" autocomplete=\"email\" maxlength=\"254\" required>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"hdj-form-row\">\n                            <div class=\"hdj-field\">\n                                <label for=\"hdj-1-phone\">T\u00e9l\u00e9phone<\/label>\n                                <input id=\"hdj-1-phone\" type=\"tel\" name=\"hdj_phone\" autocomplete=\"tel\" maxlength=\"40\">\n                            <\/div>\n                            <div class=\"hdj-field\">\n                                <label for=\"hdj-1-event\">Type d\u2019\u00e9v\u00e9nement *<\/label>\n                                <select id=\"hdj-1-event\" name=\"hdj_event\" required>\n                                    <option value=\"\">Choisir\u2026<\/option>\n                                    <option>Mariage<\/option>\n                                    <option>Anniversaire<\/option>\n                                    <option>Soir\u00e9e priv\u00e9e<\/option>\n                                    <option>Soir\u00e9e entreprise<\/option>\n                                    <option>Autre<\/option>\n                                <\/select>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"hdj-form-row\">\n                            <div class=\"hdj-field\">\n                                <label for=\"hdj-1-date\">Date de l\u2019\u00e9v\u00e9nement<\/label>\n                                <input id=\"hdj-1-date\" type=\"date\" name=\"hdj_date\">\n                            <\/div>\n                            <div class=\"hdj-field\">\n                                <label for=\"hdj-1-location\">Lieu de l\u2019\u00e9v\u00e9nement<\/label>\n                                <input id=\"hdj-1-location\" type=\"text\" name=\"hdj_location\" maxlength=\"180\" placeholder=\"Ville ou salle\">\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"hdj-field\">\n                            <label for=\"hdj-1-budget\">Budget envisag\u00e9 *<\/label>\n                            <select id=\"hdj-1-budget\" name=\"hdj_budget\" required>\n                                <option value=\"\">Choisir une fourchette\u2026<\/option>\n                                <option>Moins de 500 \u20ac<\/option>\n                                <option>500 \u00e0 1 000 \u20ac<\/option>\n                                <option>1 000 \u00e0 1 500 \u20ac<\/option>\n                                <option>Plus de 1 500 \u20ac<\/option>\n                                <option>\u00c0 d\u00e9finir<\/option>\n                            <\/select>\n                        <\/div>\n\n                        <div class=\"hdj-field\">\n                            <label for=\"hdj-1-message\">Parlez-nous de votre projet<\/label>\n                            <textarea id=\"hdj-1-message\" name=\"hdj_message\" rows=\"4\" maxlength=\"4000\" placeholder=\"Ambiance souhait\u00e9e, nombre d\u2019invit\u00e9s, horaires\u2026\"><\/textarea>\n                        <\/div>\n\n                        <button type=\"submit\" class=\"hdj-button hdj-submit\">\n                            Envoyer ma demande <svg class=\"hdj-icon hdj-icon-arrow\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 17 17 7M7 7h10v10\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                        <\/button>\n\n                        <p class=\"hdj-form-privacy\">Les informations transmises sont utilis\u00e9es pour r\u00e9pondre \u00e0 votre demande de devis.<\/p>\n                    <\/form>\n                <\/div>\n            <\/div>\n            <\/div>\n        <\/section>\n    <\/div>\n\n    <style>\n    \/* FORMULAIRE EN POPUP *\/\n    #hdj-1 .hdj-quote-modal {\n        display: none;\n        position: absolute;\n        inset: 0;\n        z-index: 1000;\n        align-items: center;\n        justify-content: center;\n        padding: 24px;\n        overflow-y: auto;\n        overscroll-behavior: contain;\n    }\n    #hdj-1 .hdj-quote-modal.is-open { display: flex; }\n    #hdj-1 .hdj-modal-backdrop {\n        position: fixed;\n        inset: 0;\n        background: rgba(0,0,0,.82);\n        backdrop-filter: blur(7px);\n        cursor: pointer;\n    }\n    #hdj-1 .hdj-modal-dialog {\n        position: relative;\n        z-index: 1;\n        width: min(920px, 100%);\n        max-height: calc(100% - 20px);\n        overflow-y: auto;\n        padding: clamp(22px, 4vw, 42px);\n        border: 1px solid var(--hdj-c1);\n        border-radius: 14px;\n        background: var(--hdj-bg);\n        box-shadow: 0 25px 100px rgba(0,0,0,.6);\n        animation: hdj-modal-in .22s ease-out;\n    }\n    #hdj-1 .hdj-modal-close {\n        position: sticky;\n        top: 0;\n        float: right;\n        z-index: 3;\n        display: grid;\n        place-items: center;\n        width: 42px;\n        height: 42px;\n        margin: -12px -12px 0 12px;\n        border: 1px solid rgba(255,255,255,.2);\n        border-radius: 50%;\n        background: #080808;\n        color: #D4AF37;\n        font-size: 30px;\n        line-height: 1;\n        cursor: pointer;\n    }\n    #hdj-1 .hdj-modal-dialog .hdj-quote-grid {\n        grid-template-columns: .75fr 1.25fr;\n        gap: clamp(18px, 3vw, 36px);\n    }\n    #hdj-1 .hdj-modal-dialog .hdj-quote-copy { padding-top: 8px; }\n    @keyframes hdj-modal-in {\n        from { opacity: 0; transform: translateY(12px) scale(.985); }\n        to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n    @media (max-width: 700px) {\n        #hdj-1 .hdj-quote-modal { padding: 10px; align-items: flex-start; }\n        #hdj-1 .hdj-modal-dialog { max-height: calc(100% - 4px); padding: 22px 16px; }\n        #hdj-1 .hdj-modal-dialog .hdj-quote-grid { grid-template-columns: 1fr; gap: 18px; }\n        #hdj-1 .hdj-modal-dialog .hdj-quote-copy h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n        #hdj-1 .hdj-modal-dialog { animation: none; }\n    }\n\n    \/* ---------------------------------------------------\n       5. DESIGN ET RESPONSIVE\n    --------------------------------------------------- *\/\n\n    #hdj-1 {\n        position: relative;\n        isolation: isolate;\n        width: 100%;\n        height: 100vh;\n        height: 100svh;\n        overflow-x: clip;\n        overflow-y: auto;\n        scroll-snap-type: y mandatory;\n        scroll-behavior: smooth;\n        overscroll-behavior-y: contain;\n        scrollbar-width: thin;\n        scrollbar-color: var(--hdj-c1) var(--hdj-bg);\n        background: var(--hdj-bg);\n        color: var(--hdj-text);\n        font-family: inherit;\n        line-height: 1.6;\n        box-sizing: border-box;\n    }\n\n    #hdj-1 *,\n    #hdj-1 *::before,\n    #hdj-1 *::after {\n        box-sizing: border-box;\n    }\n\n    #hdj-1 .hdj-panel {\n        position: relative;\n        isolation: isolate;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        min-height: 100vh;\n        min-height: 100svh;\n        padding: clamp(3rem, 6vw, 6rem) 0;\n        scroll-margin-top: 0;\n        scroll-snap-align: start;\n        scroll-snap-stop: always;\n        overflow: hidden;\n    }\n\n    #hdj-1 .hdj-container {\n        width: min(1160px, calc(100% - 48px));\n        margin-inline: auto;\n    }\n\n    #hdj-1 .hdj-hero {\n        background:\n            radial-gradient(ellipse at 78% 48%, color-mix(in srgb, var(--hdj-c2) 70%, transparent), transparent 45%),\n            var(--hdj-bg);\n    }\n\n    #hdj-1 .hdj-hero::before {\n        content: \"\";\n        position: absolute;\n        width: 340px;\n        height: 340px;\n        border-radius: 50%;\n        border: 1px solid rgba(255,255,255,.08);\n        top: -180px;\n        left: -130px;\n        z-index: -1;\n    }\n\n    #hdj-1 .hdj-hero-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        align-items: center;\n        gap: clamp(2rem, 5vw, 5rem);\n    }\n\n    #hdj-1 .hdj-hero-copy {\n        position: relative;\n        z-index: 3;\n    }\n\n    #hdj-1 .hdj-eyebrow {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        margin-bottom: 1.25rem;\n        color: var(--hdj-c1);\n        font-size: .74rem;\n        font-weight: 800;\n        letter-spacing: .17em;\n        text-transform: uppercase;\n    }\n\n    #hdj-1 .hdj-live-dot {\n        width: 8px;\n        height: 8px;\n        flex: 0 0 8px;\n        border-radius: 50%;\n        background: var(--hdj-c1);\n        box-shadow: 0 0 16px var(--hdj-c1);\n        animation: hdj-pulse 1.8s ease-in-out infinite;\n    }\n\n    #hdj-1 h1,\n    #hdj-1 h2,\n    #hdj-1 h3,\n    #hdj-1 p {\n        margin-top: 0;\n    }\n\n    #hdj-1 h1 {\n        max-width: 700px;\n        margin-bottom: 1.4rem;\n        color: var(--hdj-text);\n        font-size: clamp(2.6rem, 5.2vw, 5rem);\n        font-weight: 900;\n        line-height: 1.02;\n        letter-spacing: -.045em;\n        overflow-wrap: anywhere;\n    }\n\n    #hdj-1 .hdj-lead {\n        max-width: 560px;\n        margin-bottom: 2rem;\n        color: rgba(255,255,255,.74);\n        font-size: clamp(1rem, 1.5vw, 1.2rem);\n        line-height: 1.8;\n    }\n\n    #hdj-1 .hdj-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 18px;\n        min-height: 52px;\n        padding: 14px 23px;\n        border: 1px solid var(--hdj-c1);\n        border-radius: 5px;\n        background: var(--hdj-c1);\n        color: #080a14;\n        font-size: .95rem;\n        font-weight: 800;\n        text-decoration: none;\n        transition: transform .25s ease, box-shadow .25s ease, background .25s ease;\n        cursor: pointer;\n    }\n\n    #hdj-1 .hdj-button:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 12px 32px color-mix(in srgb, var(--hdj-c1) 30%, transparent);\n        background: color-mix(in srgb, var(--hdj-c1) 85%, white);\n        color: #080a14;\n    }\n\n    #hdj-1 .hdj-button span {\n        font-size: 1.15rem;\n        transition: transform .25s ease;\n    }\n\n    #hdj-1 .hdj-button:hover span {\n        transform: translate(3px, -3px);\n    }\n\n    #hdj-1 .hdj-audio-bars {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        height: 44px;\n        margin-top: 2.5rem;\n        opacity: .8;\n    }\n\n    #hdj-1 .hdj-audio-bars span {\n        display: block;\n        width: 3px;\n        height: var(--bar);\n        border-radius: 5px;\n        background: var(--hdj-c1);\n        animation: hdj-equalize .8s ease-in-out infinite alternate;\n        animation-delay: var(--delay);\n        transform-origin: center;\n    }\n\n    #hdj-1 .hdj-icon {\n        display: inline-block;\n        width: 1.15em;\n        height: 1.15em;\n        vertical-align: middle;\n        flex: 0 0 auto;\n    }\n\n    #hdj-1 .hdj-service-icon .hdj-icon {\n        width: 28px;\n        height: 28px;\n    }\n\n    #hdj-1 .hdj-modal-close .hdj-icon {\n        width: 22px;\n        height: 22px;\n    }\n\n    #hdj-1 .hdj-hero-visual {\n        position: relative;\n        display: grid;\n        min-height: min(590px, 67vh);\n        min-height: min(590px, 67svh);\n        place-items: center;\n    }\n\n    #hdj-1 .hdj-orbit {\n        position: absolute;\n        width: min(100%, 480px);\n        aspect-ratio: 1;\n        border: 1px solid rgba(255,255,255,.1);\n        border-radius: 50%;\n        animation: hdj-orbit 35s linear infinite;\n    }\n\n    #hdj-1 .hdj-orbit::before {\n        content: \"\";\n        position: absolute;\n        top: 14%;\n        left: 14%;\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background: var(--hdj-c1);\n        box-shadow: 0 0 20px var(--hdj-c1);\n    }\n\n    #hdj-1 .hdj-orbit-two {\n        width: min(82%, 390px);\n        border-style: dashed;\n        animation-direction: reverse;\n        animation-duration: 50s;\n    }\n\n    #hdj-1 .hdj-vinyl {\n        position: absolute;\n        top: 8%;\n        right: 2%;\n        z-index: 2;\n        display: grid;\n        width: clamp(155px, 19vw, 235px);\n        aspect-ratio: 1;\n        place-items: center;\n        border: 1px solid rgba(255,255,255,.13);\n        border-radius: 50%;\n        background:\n            repeating-radial-gradient(circle, #191b25 0 2px, #272a36 3px 4px, #0c0d12 5px 7px);\n        box-shadow: 0 20px 55px rgba(0,0,0,.5), inset 0 0 25px #000;\n        animation: hdj-spin 8s linear infinite;\n    }\n\n    #hdj-1 .hdj-vinyl-grooves {\n        position: absolute;\n        inset: 12%;\n        border: 1px solid rgba(255,255,255,.08);\n        border-radius: 50%;\n        box-shadow: 0 0 0 5px rgba(255,255,255,.025), 0 0 0 12px rgba(255,255,255,.02);\n    }\n\n    #hdj-1 .hdj-vinyl-label {\n        z-index: 1;\n        display: flex;\n        width: 35%;\n        aspect-ratio: 1;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        border: 4px solid #171923;\n        border-radius: 50%;\n        background: var(--hdj-c1);\n        color: #080a14;\n        text-align: center;\n        line-height: 1.2;\n    }\n\n    #hdj-1 .hdj-vinyl-label span {\n        font-size: clamp(1.1rem, 2vw, 1.8rem);\n        font-weight: 900;\n    }\n\n    #hdj-1 .hdj-vinyl-label small {\n        margin-top: 3px;\n        font-size: .48rem;\n        font-weight: 900;\n        letter-spacing: .13em;\n    }\n\n    #hdj-1 .hdj-dj-photo {\n        position: absolute;\n        right: 15%;\n        bottom: 5%;\n        z-index: 1;\n        width: min(77%, 390px);\n        height: min(76%, 470px);\n        overflow: hidden;\n        border: 1px solid rgba(255,255,255,.18);\n        border-radius: 180px 180px 12px 12px;\n        background: linear-gradient(135deg, var(--hdj-c2), var(--hdj-bg));\n        box-shadow: 0 25px 70px rgba(0,0,0,.45);\n    }\n\n    #hdj-1 .hdj-dj-photo::after {\n        content: \"\";\n        position: absolute;\n        inset: 45% 0 0;\n        background: linear-gradient(transparent, rgba(8,8,8,.35));\n        pointer-events: none;\n    }\n\n    #hdj-1 .hdj-dj-photo img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center;\n    }\n\n    #hdj-1 .hdj-photo-placeholder {\n        position: absolute;\n        right: 7%;\n        bottom: 5%;\n        z-index: 1;\n        display: flex;\n        width: min(77%, 390px);\n        height: min(76%, 470px);\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        border: 1px dashed rgba(255,255,255,.25);\n        border-radius: 180px 180px 12px 12px;\n        background: linear-gradient(135deg, var(--hdj-c2), var(--hdj-bg));\n        color: rgba(255,255,255,.75);\n        text-align: center;\n    }\n\n    #hdj-1 .hdj-photo-placeholder > span {\n        color: var(--hdj-c1);\n        font-size: 4rem;\n    }\n\n    #hdj-1 .hdj-photo-placeholder p {\n        margin: .5rem 0;\n        font-weight: 800;\n    }\n\n    #hdj-1 .hdj-photo-placeholder small {\n        max-width: 220px;\n        padding-inline: 12px;\n        font-size: .75rem;\n    }\n\n    #hdj-1 .hdj-floating-tag {\n        position: absolute;\n        right: 0;\n        bottom: 12%;\n        z-index: 4;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        max-width: 260px;\n        padding: 14px 18px;\n        border: 1px solid rgba(255,255,255,.14);\n        border-radius: 8px;\n        background: rgba(8,8,8,.9);\n        box-shadow: 0 12px 36px rgba(0,0,0,.25);\n        backdrop-filter: blur(12px);\n    }\n\n    #hdj-1 .hdj-tag-icon {\n        display: grid;\n        width: 38px;\n        height: 38px;\n        flex: 0 0 38px;\n        place-items: center;\n        border-radius: 50%;\n        background: var(--hdj-c1);\n        color: #080a14;\n        font-size: 1.2rem;\n    }\n\n    #hdj-1 .hdj-floating-tag strong,\n    #hdj-1 .hdj-floating-tag small {\n        display: block;\n    }\n\n    #hdj-1 .hdj-floating-tag strong {\n        font-size: .8rem;\n    }\n\n    #hdj-1 .hdj-floating-tag small {\n        margin-top: 2px;\n        color: rgba(255,255,255,.6);\n        font-size: .68rem;\n    }\n\n    #hdj-1 .hdj-scroll-hint {\n        position: absolute;\n        bottom: 22px;\n        left: 50%;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 6px;\n        transform: translateX(-50%);\n        color: rgba(255,255,255,.55);\n        font-size: .68rem;\n        letter-spacing: .12em;\n        text-decoration: none;\n        text-transform: uppercase;\n    }\n\n    #hdj-1 .hdj-scroll-arrow {\n        color: var(--hdj-c1);\n        font-size: 1.3rem;\n        animation: hdj-bounce 1.4s ease-in-out infinite;\n    }\n\n    \/* PRESTATIONS *\/\n\n    #hdj-1 .hdj-services {\n        background:\n            radial-gradient(ellipse at 15% 20%, color-mix(in srgb, var(--hdj-c2) 45%, transparent), transparent 42%),\n            var(--hdj-bg);\n    }\n\n    #hdj-1 .hdj-section-heading {\n        max-width: 760px;\n        margin: 0 auto 3rem;\n        text-align: center;\n    }\n\n    #hdj-1 .hdj-section-heading .hdj-eyebrow {\n        justify-content: center;\n    }\n\n    #hdj-1 h2 {\n        margin-bottom: 1rem;\n        color: var(--hdj-text);\n        font-size: clamp(2rem, 4vw, 3.7rem);\n        font-weight: 900;\n        line-height: 1.1;\n        letter-spacing: -.035em;\n        overflow-wrap: anywhere;\n    }\n\n    #hdj-1 .hdj-section-heading h2 span {\n        color: var(--hdj-c1);\n    }\n\n    #hdj-1 .hdj-section-heading > p {\n        max-width: 620px;\n        margin: 0 auto;\n        color: rgba(255,255,255,.68);\n    }\n\n    #hdj-1 .hdj-service-grid {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 20px;\n    }\n\n    #hdj-1 .hdj-service-card {\n        position: relative;\n        display: flex;\n        min-height: 265px;\n        flex-direction: column;\n        align-items: flex-start;\n        padding: clamp(22px, 3vw, 34px);\n        overflow: hidden;\n        border: 1px solid rgba(255,255,255,.11);\n        border-radius: 12px;\n        background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015));\n        transition: transform .3s ease, border-color .3s ease, background .3s ease;\n    }\n\n    #hdj-1 .hdj-service-card::after {\n        content: \"\";\n        position: absolute;\n        right: -35px;\n        bottom: -55px;\n        width: 140px;\n        height: 140px;\n        border: 1px solid rgba(255,255,255,.08);\n        border-radius: 50%;\n        box-shadow: 0 0 0 15px rgba(255,255,255,.02), 0 0 0 30px rgba(255,255,255,.015);\n        pointer-events: none;\n    }\n\n    #hdj-1 .hdj-service-card:hover {\n        transform: translateY(-7px);\n        border-color: var(--hdj-c1);\n        background: linear-gradient(145deg, color-mix(in srgb, var(--hdj-c2) 45%, transparent), rgba(255,255,255,.025));\n    }\n\n    #hdj-1 .hdj-service-icon {\n        display: grid;\n        width: 48px;\n        height: 48px;\n        margin-bottom: 1.3rem;\n        place-items: center;\n        border: 1px solid color-mix(in srgb, var(--hdj-c1) 45%, transparent);\n        border-radius: 10px;\n        background: color-mix(in srgb, var(--hdj-c1) 12%, transparent);\n        color: var(--hdj-c1);\n        font-size: 1.5rem;\n    }\n\n    #hdj-1 .hdj-card-number {\n        position: absolute;\n        top: 26px;\n        right: 26px;\n        color: rgba(255,255,255,.28);\n        font-size: .8rem;\n        font-weight: 800;\n        letter-spacing: .12em;\n    }\n\n    #hdj-1 .hdj-service-card h3 {\n        margin-bottom: .7rem;\n        color: var(--hdj-text);\n        font-size: 1.3rem;\n        font-weight: 800;\n    }\n\n    #hdj-1 .hdj-service-card p {\n        margin-bottom: 1.4rem;\n        color: rgba(255,255,255,.67);\n        font-size: .93rem;\n        line-height: 1.75;\n    }\n\n    #hdj-1 .hdj-text-link {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        margin-top: auto;\n        color: var(--hdj-c1);\n        font-size: .84rem;\n        font-weight: 800;\n        text-decoration: none;\n    }\n\n    #hdj-1 .hdj-text-link span {\n        transition: transform .2s ease;\n    }\n\n    #hdj-1 .hdj-text-link:hover span {\n        transform: translate(4px, -3px);\n    }\n\n    #hdj-1 .hdj-services-bottom {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 20px;\n        margin-top: 2rem;\n        color: rgba(255,255,255,.68);\n        font-size: .9rem;\n    }\n\n    #hdj-1 .hdj-button-outline {\n        flex: 0 0 auto;\n        border-color: rgba(255,255,255,.2);\n        background: transparent;\n        color: var(--hdj-text);\n    }\n\n    #hdj-1 .hdj-button-outline:hover {\n        border-color: var(--hdj-c1);\n        background: var(--hdj-c1);\n        color: #080a14;\n    }\n\n    \/* FORMULAIRE *\/\n\n    #hdj-1 .hdj-quote {\n        background:\n            radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--hdj-c2) 48%, transparent), transparent 45%),\n            var(--hdj-bg);\n    }\n\n    #hdj-1 .hdj-quote-grid {\n        display: grid;\n        grid-template-columns: .8fr 1.2fr;\n        align-items: start;\n        gap: clamp(2rem, 6vw, 6rem);\n    }\n\n    #hdj-1 .hdj-quote-copy {\n        padding-top: 1rem;\n    }\n\n    #hdj-1 .hdj-quote-copy h2 {\n        font-size: clamp(2.3rem, 4.2vw, 4rem);\n    }\n\n    #hdj-1 .hdj-quote-copy > p {\n        color: rgba(255,255,255,.7);\n        line-height: 1.8;\n    }\n\n    #hdj-1 .hdj-quote-note {\n        display: flex;\n        align-items: flex-start;\n        gap: 14px;\n        margin-top: 2rem;\n        padding: 18px;\n        border: 1px solid rgba(255,255,255,.1);\n        border-radius: 8px;\n        background: rgba(255,255,255,.035);\n    }\n\n    #hdj-1 .hdj-quote-note > span {\n        color: var(--hdj-c1);\n        font-size: 1.2rem;\n    }\n\n    #hdj-1 .hdj-quote-note p {\n        margin: 0;\n        color: rgba(255,255,255,.72);\n        font-size: .88rem;\n        line-height: 1.7;\n    }\n\n    #hdj-1 .hdj-form-card {\n        padding: clamp(22px, 3vw, 36px);\n        border: 1px solid rgba(255,255,255,.12);\n        border-radius: 12px;\n        background: rgba(255,255,255,.045);\n        box-shadow: 0 24px 70px rgba(0,0,0,.18);\n    }\n\n    #hdj-1 .hdj-form-heading {\n        display: flex;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 1.5rem;\n        color: var(--hdj-c1);\n        font-size: .72rem;\n        font-weight: 900;\n        letter-spacing: .13em;\n    }\n\n    #hdj-1 .hdj-form-step {\n        color: rgba(255,255,255,.4);\n    }\n\n    #hdj-1 .hdj-form-row {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 14px;\n    }\n\n    #hdj-1 .hdj-field {\n        min-width: 0;\n        margin-bottom: 16px;\n    }\n\n    #hdj-1 .hdj-field label {\n        display: block;\n        margin-bottom: 7px;\n        color: rgba(255,255,255,.84);\n        font-size: .8rem;\n        font-weight: 700;\n    }\n\n    #hdj-1 .hdj-field input,\n    #hdj-1 .hdj-field select,\n    #hdj-1 .hdj-field textarea {\n        display: block;\n        width: 100%;\n        min-height: 47px;\n        margin: 0;\n        padding: 12px 13px;\n        border: 1px solid rgba(255,255,255,.15);\n        border-radius: 5px;\n        outline: none;\n        background: rgba(8,8,8,.55);\n        color: #fff;\n        font: inherit;\n        font-size: .9rem;\n        box-shadow: none;\n    }\n\n    #hdj-1 .hdj-field select option {\n        background: #080808;\n        color: #fff;\n    }\n\n    #hdj-1 .hdj-field textarea {\n        min-height: 105px;\n        resize: vertical;\n    }\n\n    #hdj-1 .hdj-field input:focus,\n    #hdj-1 .hdj-field select:focus,\n    #hdj-1 .hdj-field textarea:focus {\n        border-color: var(--hdj-c1);\n        box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdj-c1) 18%, transparent);\n    }\n\n    #hdj-1 .hdj-submit {\n        width: 100%;\n        border: 0;\n        font: inherit;\n        font-weight: 800;\n    }\n\n    #hdj-1 .hdj-form-privacy {\n        margin: 13px 0 0;\n        color: rgba(255,255,255,.48);\n        font-size: .72rem;\n        line-height: 1.6;\n    }\n\n    #hdj-1 .hdj-notice {\n        margin-bottom: 1.3rem;\n        padding: 13px 15px;\n        border-radius: 6px;\n        font-size: .9rem;\n    }\n\n    #hdj-1 .hdj-notice-success {\n        border: 1px solid #4caf83;\n        background: rgba(76,175,131,.12);\n        color: #b8f4d4;\n    }\n\n    #hdj-1 .hdj-notice-error {\n        border: 1px solid #e58c8c;\n        background: rgba(229,140,140,.1);\n        color: #ffd0d0;\n    }\n\n    #hdj-1 .hdj-honeypot {\n        position: absolute !important;\n        left: -10000px !important;\n        width: 1px !important;\n        height: 1px !important;\n        overflow: hidden !important;\n    }\n\n    \/* INDICATEURS DU CARROUSEL *\/\n\n    #hdj-1 .hdj-dots {\n        position: absolute;\n        top: 50%;\n        right: 14px;\n        z-index: 30;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n        transform: translateY(-50%);\n    }\n\n    #hdj-1 .hdj-dot {\n        display: block;\n        width: 10px;\n        height: 10px;\n        min-width: 10px;\n        min-height: 10px;\n        padding: 0;\n        border: 0;\n        border-radius: 50%;\n        background: var(--hdj-c1);\n        opacity: .4;\n        cursor: pointer;\n        transition: transform .2s ease, opacity .2s ease;\n    }\n\n    #hdj-1 .hdj-dot.is-active {\n        opacity: 1;\n        transform: scale(1.45);\n    }\n\n    #hdj-1 .hdj-dot:focus-visible {\n        outline: 2px solid #fff;\n        outline-offset: 4px;\n    }\n\n    @keyframes hdj-spin {\n        to { transform: rotate(360deg); }\n    }\n\n    @keyframes hdj-orbit {\n        to { transform: rotate(360deg); }\n    }\n\n    @keyframes hdj-equalize {\n        from { transform: scaleY(.35); }\n        to { transform: scaleY(1); }\n    }\n\n    @keyframes hdj-pulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: .5; transform: scale(.8); }\n    }\n\n    @keyframes hdj-bounce {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(5px); }\n    }\n\n    \/* TABLETTES *\/\n\n    @media (max-width: 950px) {\n        #hdj-1 .hdj-hero-grid {\n            gap: 1.5rem;\n        }\n\n        #hdj-1 .hdj-hero-visual {\n            min-height: 440px;\n        }\n\n        #hdj-1 .hdj-service-grid {\n            gap: 12px;\n        }\n\n        #hdj-1 .hdj-service-card {\n            padding: 22px;\n        }\n\n        #hdj-1 .hdj-quote-grid {\n            gap: 2rem;\n        }\n    }\n\n    \/* MOBILE : d\u00e9filement naturel, sans blocage *\/\n\n    @media (max-width: 650px) {\n        #hdj-1 {\n            height: auto;\n            max-height: none;\n            overflow: visible;\n            scroll-snap-type: none;\n            overscroll-behavior-y: auto;\n            scrollbar-width: auto;\n        }\n\n        #hdj-1 .hdj-panel {\n            min-height: auto;\n            padding: 4.5rem 0;\n            overflow: visible;\n            scroll-snap-align: none;\n            scroll-snap-stop: normal;\n        }\n\n        #hdj-1 .hdj-container {\n            width: min(100% - 36px, 520px);\n        }\n\n        #hdj-1 .hdj-hero-grid,\n        #hdj-1 .hdj-quote-grid {\n            grid-template-columns: 1fr;\n        }\n\n        #hdj-1 .hdj-hero-grid {\n            gap: 1rem;\n        }\n\n        #hdj-1 .hdj-hero-copy {\n            padding-top: 1rem;\n        }\n\n        #hdj-1 h1 {\n            font-size: clamp(2.45rem, 11vw, 4rem);\n        }\n\n        #hdj-1 .hdj-hero-visual {\n            min-height: 390px;\n            margin-top: .5rem;\n        }\n\n        #hdj-1 .hdj-vinyl {\n            top: 0;\n            right: 0;\n            width: 155px;\n        }\n\n        #hdj-1 .hdj-dj-photo,\n        #hdj-1 .hdj-photo-placeholder {\n            right: 16%;\n            bottom: 2%;\n            width: 75%;\n            height: 84%;\n        }\n\n        #hdj-1 .hdj-floating-tag {\n            right: 0;\n            bottom: 7%;\n            max-width: 220px;\n            padding: 10px 12px;\n        }\n\n        #hdj-1 .hdj-scroll-hint,\n        #hdj-1 .hdj-dots {\n            display: none;\n        }\n\n        #hdj-1 .hdj-section-heading {\n            margin-bottom: 2rem;\n            text-align: left;\n        }\n\n        #hdj-1 .hdj-section-heading .hdj-eyebrow {\n            justify-content: flex-start;\n        }\n\n        #hdj-1 .hdj-service-grid {\n            grid-template-columns: 1fr;\n        }\n\n        #hdj-1 .hdj-service-card {\n            min-height: 0;\n        }\n\n        #hdj-1 .hdj-services-bottom {\n            align-items: flex-start;\n            flex-direction: column;\n        }\n\n        #hdj-1 .hdj-form-row {\n            grid-template-columns: 1fr;\n            gap: 0;\n        }\n\n        #hdj-1 .hdj-form-card {\n            padding: 20px;\n        }\n\n        #hdj-1 .hdj-quote-copy h2 {\n            font-size: clamp(2.2rem, 10vw, 3.2rem);\n        }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        #hdj-1 *,\n        #hdj-1 *::before,\n        #hdj-1 *::after {\n            animation-duration: .01ms !important;\n            animation-iteration-count: 1 !important;\n            scroll-behavior: auto !important;\n            transition-duration: .01ms !important;\n        }\n\n        #hdj-1 {\n            scroll-behavior: auto;\n            scroll-snap-type: none;\n        }\n    }\n    <\/style>\n\n    <script>\n    (function() {\n        const root = document.getElementById(\"hdj-1\");\n        if (!root) return;\n\n        const panels = Array.from(root.querySelectorAll(':scope > .hdj-panel'));\n        if (panels.length < 2) return;\n\n        const modal = root.querySelector('.hdj-quote-modal');\n        const dialog = modal ? modal.querySelector('.hdj-modal-dialog') : null;\n        let lastFocused = null;\n        function openQuoteModal() {\n            if (!modal) return;\n            lastFocused = document.activeElement;\n            modal.classList.add('is-open');\n            modal.setAttribute('aria-hidden', 'false');\n            document.body.style.overflow = 'hidden';\n            const firstField = modal.querySelector('input:not([type=\"hidden\"]):not([tabindex=\"-1\"]), select, textarea, button');\n            if (firstField) firstField.focus({ preventScroll: true });\n            else if (dialog) dialog.focus({ preventScroll: true });\n        }\n        function closeQuoteModal() {\n            if (!modal) return;\n            modal.classList.remove('is-open');\n            modal.setAttribute('aria-hidden', 'true');\n            document.body.style.overflow = '';\n            if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus({ preventScroll: true });\n        }\n        if (modal) {\n            modal.querySelectorAll('[data-hdj-close]').forEach(function(el) { el.addEventListener('click', closeQuoteModal); });\n            document.addEventListener('keydown', function(event) {\n                if (event.key === 'Escape' && modal.classList.contains('is-open')) closeQuoteModal();\n            });\n            if (new URLSearchParams(window.location.search).has('hdj_status')) openQuoteModal();\n        }\n\n        const desktop = window.matchMedia('(min-width: 651px)');\n        const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n        let current = 0;\n\n        function goTo(index) {\n            if (!desktop.matches) return;\n\n            current = Math.max(0, Math.min(index, panels.length - 1));\n\n            panels[current].scrollIntoView({\n                behavior: reducedMotion.matches ? 'auto' : 'smooth',\n                block: 'start'\n            });\n\n            updateDots();\n        }\n\n        \/\/ Navigation via links in this component.\n        root.querySelectorAll('a[href^=\"#hdj-\"]').forEach(function(link) {\n            link.addEventListener('click', function(event) {\n                const targetId = link.getAttribute('href');\n                const target = document.getElementById(targetId.substring(1));\n\n                if (!target || !root.contains(target)) return;\n\n                event.preventDefault();\n                if (targetId === '#hdj-devis') {\n                    openQuoteModal();\n                    return;\n                }\n\n                const index = panels.indexOf(target);\n\n                if (index >= 0 && desktop.matches) {\n                    goTo(index);\n                } else {\n                    target.scrollIntoView({\n                        behavior: reducedMotion.matches ? 'auto' : 'smooth',\n                        block: 'start'\n                    });\n                }\n            });\n        });\n\n        \/\/ Navigation dots.\n        const nav = document.createElement('nav');\n        nav.className = 'hdj-dots';\n        nav.setAttribute('aria-label', 'Navigation des sections');\n\n        panels.forEach(function(panel, index) {\n            const button = document.createElement('button');\n            button.type = 'button';\n            button.className = 'hdj-dot';\n            button.setAttribute('aria-label', 'Afficher la section ' + (index + 1));\n            button.addEventListener('click', function() {\n                goTo(index);\n            });\n            nav.appendChild(button);\n        });\n\n        root.appendChild(nav);\n\n        function updateDots() {\n            nav.querySelectorAll('.hdj-dot').forEach(function(button, index) {\n                const active = index === current;\n                button.classList.toggle('is-active', active);\n\n                if (active) {\n                    button.setAttribute('aria-current', 'step');\n                } else {\n                    button.removeAttribute('aria-current');\n                }\n            });\n        }\n\n        \/\/ Tracks the panel visible inside the component's own scroll area.\n        const observer = new IntersectionObserver(function(entries) {\n            entries.forEach(function(entry) {\n                if (!entry.isIntersecting) return;\n\n                const index = panels.indexOf(entry.target);\n                if (index !== -1) {\n                    current = index;\n                    updateDots();\n                }\n            });\n        }, {\n            root: root,\n            threshold: 0.55\n        });\n\n        panels.forEach(function(panel) {\n            observer.observe(panel);\n        });\n\n        \/\/ Keyboard navigation when focus is on the component itself.\n        root.tabIndex = 0;\n\n        root.addEventListener('keydown', function(event) {\n            if (!desktop.matches) return;\n\n            const target = event.target;\n            if (\n                target.closest('input, textarea, select, button, a') ||\n                event.altKey || event.ctrlKey || event.metaKey\n            ) {\n                return;\n            }\n\n            if (event.key === 'ArrowDown' || event.key === 'PageDown') {\n                event.preventDefault();\n                goTo(current + 1);\n            } else if (event.key === 'ArrowUp' || event.key === 'PageUp') {\n                event.preventDefault();\n                goTo(current - 1);\n            }\n        });\n\n        desktop.addEventListener('change', function() {\n            current = 0;\n            updateDots();\n        });\n\n        updateDots();\n    })();\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22e4974 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"22e4974\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d2b233f\" data-id=\"d2b233f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-31c99a1 elementor-widget elementor-widget-html\" data-id=\"31c99a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div class=\"dj-public-dates\" aria-label=\"Nos dates publiques\">\r\n  <div class=\"dj-public-dates__track\">\r\n\r\n    <div class=\"dj-public-dates__group\">\r\n      <span>Nos dates publiques<\/span>\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M12 2.5 14.7 9.3 21.5 12 14.7 14.7 12 21.5 9.3 14.7 2.5 12 9.3 9.3Z\"\/>\r\n      <\/svg>\r\n      <span>Nos dates publiques<\/span>\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M12 2.5 14.7 9.3 21.5 12 14.7 14.7 12 21.5 9.3 14.7 2.5 12 9.3 9.3Z\"\/>\r\n      <\/svg>\r\n      <span>Nos dates publiques<\/span>\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M12 2.5 14.7 9.3 21.5 12 14.7 14.7 12 21.5 9.3 14.7 2.5 12 9.3 9.3Z\"\/>\r\n      <\/svg>\r\n    <\/div>\r\n\r\n    <div class=\"dj-public-dates__group\" aria-hidden=\"true\">\r\n      <span>Nos dates publiques<\/span>\r\n      <svg viewBox=\"0 0 24 24\">\r\n        <path d=\"M12 2.5 14.7 9.3 21.5 12 14.7 14.7 12 21.5 9.3 14.7 2.5 12 9.3 9.3Z\"\/>\r\n      <\/svg>\r\n      <span>Nos dates publiques<\/span>\r\n      <svg viewBox=\"0 0 24 24\">\r\n        <path d=\"M12 2.5 14.7 9.3 21.5 12 14.7 14.7 12 21.5 9.3 14.7 2.5 12 9.3 9.3Z\"\/>\r\n      <\/svg>\r\n      <span>Nos dates publiques<\/span>\r\n      <svg viewBox=\"0 0 24 24\">\r\n        <path d=\"M12 2.5 14.7 9.3 21.5 12 14.7 14.7 12 21.5 9.3 14.7 2.5 12 9.3 9.3Z\"\/>\r\n      <\/svg>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* ======================================\r\n   BANDEAU NOS DATES PUBLIQUES\r\n   Noir et or - d\u00e9filement int\u00e9gr\u00e9 \u00e0 la page\r\n====================================== *\/\r\n\r\n.dj-public-dates {\r\n  --dj-gold: #D4AF37;\r\n  --dj-light-gold: #F8E7A0;\r\n\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  background: #080808;\r\n  padding: 28px 0;\r\n  margin: 0;\r\n  border: none;\r\n  transform: skewY(-3deg);\r\n  z-index: 1;\r\n}\r\n\r\n\/* Traits dor\u00e9s pleins de 5 px *\/\r\n.dj-public-dates::before,\r\n.dj-public-dates::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 5px;\r\n  background-color: #D4AF37;\r\n  z-index: 5;\r\n  pointer-events: none;\r\n}\r\n\r\n.dj-public-dates::before {\r\n  top: 0;\r\n}\r\n\r\n.dj-public-dates::after {\r\n  bottom: 0;\r\n}\r\n\r\n\/* Piste anim\u00e9e *\/\r\n.dj-public-dates__track {\r\n  display: flex;\r\n  align-items: center;\r\n  width: max-content;\r\n  animation: djPublicDatesScroll 24s linear infinite;\r\n  will-change: transform;\r\n}\r\n\r\n\/* Groupes de textes *\/\r\n.dj-public-dates__group {\r\n  display: flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  gap: 30px;\r\n  padding-right: 30px;\r\n}\r\n\r\n\/* Texte dor\u00e9 *\/\r\n.dj-public-dates__group span {\r\n  display: inline-block;\r\n  color: var(--dj-light-gold);\r\n  font-family: inherit;\r\n  font-size: clamp(19px, 2.8vw, 30px);\r\n  font-weight: 800;\r\n  line-height: 1.3;\r\n  letter-spacing: clamp(1px, 0.2vw, 3px);\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/* \u00c9toiles dor\u00e9es *\/\r\n.dj-public-dates__group svg {\r\n  display: block;\r\n  flex: 0 0 18px;\r\n  width: 18px;\r\n  height: 18px;\r\n  fill: var(--dj-gold);\r\n}\r\n\r\n\/* D\u00e9filement continu *\/\r\n@keyframes djPublicDatesScroll {\r\n  from {\r\n    transform: translateX(0);\r\n  }\r\n\r\n  to {\r\n    transform: translateX(-50%);\r\n  }\r\n}\r\n\r\n\/* Pause au survol *\/\r\n.dj-public-dates:hover .dj-public-dates__track {\r\n  animation-play-state: paused;\r\n}\r\n\r\n\/* Adaptation mobile *\/\r\n@media (max-width: 600px) {\r\n  .dj-public-dates {\r\n    padding: 23px 0;\r\n  }\r\n\r\n  .dj-public-dates__group {\r\n    gap: 18px;\r\n    padding-right: 18px;\r\n  }\r\n\r\n  .dj-public-dates__group span {\r\n    font-size: 17px;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  .dj-public-dates__group svg {\r\n    flex-basis: 14px;\r\n    width: 14px;\r\n    height: 14px;\r\n  }\r\n}\r\n\r\n\/* Respect des pr\u00e9f\u00e9rences de r\u00e9duction des animations *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  .dj-public-dates__track {\r\n    animation: none;\r\n  }\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f4e1229 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f4e1229\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a40c2d1\" data-id=\"a40c2d1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9d29b84 elementor-widget elementor-widget-shortcode\" data-id=\"9d29b84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <section class=\"dj-events\" aria-label=\"Dates publiques\">\n                    <div class=\"dj-events__grid\">\n                                    <article class=\"dj-event-card\">\n                        <a class=\"dj-event-card__image-link\"\n                           href=\"https:\/\/demodj.inter-rec.fr\/?dj_date=my-beers\"\n                           aria-label=\"Voir My beers\">\n                                                            <div class=\"dj-event-card__placeholder\">\n                                    Affiche \u00e0 venir\n                                <\/div>\n                                                    <\/a>\n\n                        <div class=\"dj-event-card__content\">\n                                                            <p class=\"dj-event-card__date\">\n                                    <svg class=\"dj-icon dj-icon-calendar\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"\/><path d=\"M16 3v4M8 3v4M3 11h18\"\/><\/svg>                                    24\/10\/2026\n                                                                            <span class=\"dj-event-card__time\">\n                                            <svg class=\"dj-icon dj-icon-clock\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 2\"\/><\/svg>                                            20h30                                        <\/span>\n                                                                    <\/p>\n                            \n                            <h3 class=\"dj-event-card__title\">\n                                <a href=\"https:\/\/demodj.inter-rec.fr\/?dj_date=my-beers\">\n                                    My beers                                <\/a>\n                            <\/h3>\n\n                                                            <p class=\"dj-event-card__place\">\n                                    <svg class=\"dj-icon dj-icon-pin\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.5\"\/><\/svg>                                    Beauvais                                <\/p>\n                            \n                            \n                            <div class=\"dj-event-card__share\">\n                                <span class=\"dj-event-card__share-label\">\n                                    Partager cette date\n                                <\/span>\n\n                                <div class=\"dj-event-card__share-buttons\">\n                                    <a class=\"dj-share-btn\"\n                                       href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/demodj.inter-rec.fr\/?dj_date=my-beers\"\n                                       target=\"_blank\" rel=\"noopener noreferrer\"\n                                       aria-label=\"Partager sur Facebook\">\n                                        <svg class=\"dj-icon dj-icon-facebook\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M14 8h3V4h-3a5 5 0 0 0-5 5v3H6v4h3v5h4v-5h3l1-4h-4V9a1 1 0 0 1 1-1Z\"\/><\/svg>                                        Facebook\n                                    <\/a>\n\n                                    <a class=\"dj-share-btn\"\n                                       href=\"https:\/\/api.whatsapp.com\/send?text=My%20beers%20-%2024\/10\/2026%20-%20Beauvais%20:%20https:\/\/demodj.inter-rec.fr\/?dj_date=my-beers\"\n                                       target=\"_blank\" rel=\"noopener noreferrer\"\n                                       aria-label=\"Partager sur WhatsApp\">\n                                        <svg class=\"dj-icon dj-icon-whatsapp\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4.1A8 8 0 1 1 20 11.5Z\"\/><path d=\"M9 8.5c.5 2 2 3.5 4.5 4.5l1.2-1.2 2 1c-.2 1.5-1.2 2.2-2.5 2-3.5-.5-6.5-3.5-7-7-.2-1.3.5-2.3 2-2.5l1 2L9 8.5Z\"\/><\/svg>                                        WhatsApp\n                                    <\/a>\n\n                                    <a class=\"dj-share-btn\"\n                                       href=\"https:\/\/twitter.com\/intent\/tweet?text=My%20beers&#038;url=https:\/\/demodj.inter-rec.fr\/?dj_date=my-beers\"\n                                       target=\"_blank\" rel=\"noopener noreferrer\"\n                                       aria-label=\"Partager sur X\">\n                                        <svg class=\"dj-icon dj-icon-x\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 4h4l10 16h-4L5 4Zm0 16 6-7m2-2 6-7\"\/><\/svg>                                        X\n                                    <\/a>\n\n                                    <button type=\"button\"\n                                            class=\"dj-share-btn dj-share-copy\"\n                                            data-share-url=\"https:\/\/demodj.inter-rec.fr\/?dj_date=my-beers\">\n                                        <svg class=\"dj-icon dj-icon-copy\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\"\/><path d=\"M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\"\/><\/svg>                                        Copier le lien\n                                    <\/button>\n\n                                    <button type=\"button\"\n                                            class=\"dj-share-btn dj-share-native\"\n                                            data-share-title=\"My beers\"\n                                            data-share-text=\"My beers - 24\/10\/2026 - Beauvais\"\n                                            data-share-url=\"https:\/\/demodj.inter-rec.fr\/?dj_date=my-beers\"\n                                            hidden>\n                                        <svg class=\"dj-icon dj-icon-share\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"18\" cy=\"5\" r=\"3\"\/><circle cx=\"6\" cy=\"12\" r=\"3\"\/><circle cx=\"18\" cy=\"19\" r=\"3\"\/><path d=\"m9 11 6-5M9 13l6 5\"\/><\/svg>                                        Partager\n                                    <\/button>\n                                <\/div>\n\n                                <p class=\"dj-share-feedback\" aria-live=\"polite\"><\/p>\n                            <\/div>\n                        <\/div>\n                    <\/article>\n                            <\/div>\n            <\/section>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f61aa53 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"f61aa53\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4fa88d6\" data-id=\"4fa88d6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c3666f8 elementor-widget elementor-widget-shortcode\" data-id=\"c3666f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <section class=\"dj-premium-section\">\n\n        <div class=\"dj-premium-container\">\n\n            <!-- TITRE -->\n            <header class=\"dj-premium-heading\">\n\n                <div class=\"dj-premium-overline\">\n                    <span class=\"dj-premium-overline-line\"><\/span>\n                    <svg class=\"dj-premium-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 10v4M7 6v12M11 3v18M15 7v10M19 9v6M23 11v2\"\/><\/g><\/svg>                    <span>MON UNIVERS MUSICAL<\/span>\n                    <span class=\"dj-premium-overline-line\"><\/span>\n                <\/div>\n\n                <h2 class=\"dj-premium-title\">\n                    DERRI\u00c8RE LES PLATINES                    <span class=\"dj-premium-title-gold\">AU RYTHME DE LA MUSIQUE.<\/span>\n                <\/h2>\n\n                <p class=\"dj-premium-intro\">\n                    Plongez dans mon univers musical \u00e0 travers mes derniers sets et remix.                <\/p>\n\n                <div class=\"dj-premium-title-decoration\">\n                    <span><\/span>\n                    <svg class=\"dj-premium-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 3 2.2 6.8L21 12l-6.8 2.2L12 21l-2.2-6.8L3 12l6.8-2.2z\"\/><\/g><\/svg>                    <span><\/span>\n                <\/div>\n\n            <\/header>\n\n\n            \n                <div class=\"dj-premium-grid\">\n\n                    \n                        <article class=\"dj-premium-card\">\n\n                            <div class=\"dj-premium-artwork\">\n\n                                \n                                    <div class=\"dj-premium-artwork-placeholder\">\n                                        <svg class=\"dj-premium-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 3v2M21 12h-2M12 21v-2M3 12h2\"\/><\/g><\/svg>                                        <span>DJ MIX<\/span>\n                                    <\/div>\n\n                                \n                                <div class=\"dj-premium-artwork-shade\"><\/div>\n\n                                <span class=\"dj-premium-index\">\n                                    01                                <\/span>\n\n                                <span class=\"dj-premium-artwork-icon\">\n                                    <svg class=\"dj-premium-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 3v2M21 12h-2M12 21v-2M3 12h2\"\/><\/g><\/svg>                                <\/span>\n\n                            <\/div>\n\n\n                            <div class=\"dj-premium-card-body\">\n\n                                <div class=\"dj-premium-card-meta\">\n                                    <span class=\"dj-premium-status-dot\"><\/span>\n                                    <span>\n                                        SET \/ REMIX                                    <\/span>\n                                <\/div>\n\n                                <h3 class=\"dj-premium-card-title\">\n                                    Mix 01                                <\/h3>\n\n                                \n\n                                \n                                    <div class=\"dj-premium-player\">\n\n                                        <audio\n                                            class=\"dj-premium-audio\"\n                                            preload=\"metadata\"\n                                            src=\"https:\/\/demodj.inter-rec.fr\/upload\/test.mp3\"\n                                        ><\/audio>\n\n                                        <button\n                                            type=\"button\"\n                                            class=\"dj-premium-play\"\n                                            aria-label=\"\u00c9couter le mix\"\n                                            aria-pressed=\"false\"\n                                        >\n                                            <span class=\"dj-premium-play-icon\">\n                                                <svg class=\"dj-premium-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m8 5 12 7-12 7z\" fill=\"currentColor\" stroke=\"none\"\/><\/g><\/svg>                                            <\/span>\n                                            <span class=\"dj-premium-pause-icon\">\n                                                <svg class=\"dj-premium-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 5h4v14H7zM15 5h4v14h-4z\" fill=\"currentColor\" stroke=\"none\"\/><\/g><\/svg>                                            <\/span>\n                                        <\/button>\n\n                                        <div class=\"dj-premium-timeline\">\n\n                                            <div class=\"dj-premium-time-row\">\n                                                <span class=\"dj-premium-current\">00:00<\/span>\n                                                <span class=\"dj-premium-duration\">00:00<\/span>\n                                            <\/div>\n\n                                            <input\n                                                class=\"dj-premium-progress\"\n                                                type=\"range\"\n                                                min=\"0\"\n                                                max=\"100\"\n                                                value=\"0\"\n                                                step=\"0.1\"\n                                                aria-label=\"Position de lecture\"\n                                            >\n\n                                        <\/div>\n\n                                    <\/div>\n\n                                \n                            <\/div>\n\n                        <\/article>\n\n                    \n                <\/div>\n\n            \n            \n\n            <!-- CTA EN BAS DE SECTION -->\n            <div class=\"dj-premium-cta\">\n\n                <div class=\"dj-premium-cta-topline\"><\/div>\n\n                <div class=\"dj-premium-cta-content\">\n\n                    <div class=\"dj-premium-cta-icon\">\n                        <svg class=\"dj-premium-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 14v-3a9 9 0 0 1 18 0v3\"\/><rect x=\"3\" y=\"13\" width=\"4\" height=\"7\" rx=\"2\"\/><rect x=\"17\" y=\"13\" width=\"4\" height=\"7\" rx=\"2\"\/><\/g><\/svg>                    <\/div>\n\n                    <div class=\"dj-premium-cta-copy\">\n\n                        <div class=\"dj-premium-cta-label\">\n                            <span><\/span>\n                            PROFESSIONNELS & ORGANISATEURS\n                        <\/div>\n\n                        <h3>\n                            Envie d\u2019\u00e9changer sur une\n                            <span>collaboration ?<\/span>\n                        <\/h3>\n\n                        <p>\n                            Bars, restaurants, \u00e9tablissements et organisateurs\n                            d\u2019\u00e9v\u00e9nements : parlons de votre projet et de\n                            l\u2019ambiance musicale que vous souhaitez cr\u00e9er.\n                        <\/p>\n\n                    <\/div>\n\n                    <a\n                        class=\"dj-premium-cta-button\"\n                        href=\"https:\/\/demodj.inter-rec.fr\/contact\/\"\n                    >\n                        <span>Contactez-moi<\/span>\n                        <svg class=\"dj-premium-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/g><\/svg>                    <\/a>\n\n                <\/div>\n\n                <div class=\"dj-premium-cta-bottom\">\n                    <span>CR\u00c9ONS L'AMBIANCE ENSEMBLE<\/span>\n                    <span class=\"dj-premium-cta-star\">\u2726<\/span>\n                    <span>MUSIC \u00b7 VIBE \u00b7 EXPERIENCE<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nos dates publiques Nos dates publiques Nos dates publiques Nos dates publiques Nos dates publiques Nos dates publiques<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demodj.inter-rec.fr\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demodj.inter-rec.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demodj.inter-rec.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demodj.inter-rec.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demodj.inter-rec.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":19,"href":"https:\/\/demodj.inter-rec.fr\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/demodj.inter-rec.fr\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/demodj.inter-rec.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}