Lyon-DJ \u00b7 DJ \u00c9v\u00e9nementiel & Kit Elementor<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@200..800&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n :root {\r\n --bg: #090c11;\r\n --panel: #11161e;\r\n --cream: #f4efe6;\r\n --muted: #b6bdc8;\r\n --gold: #e9c58f;\r\n --gold-hover: #f5d9ad;\r\n --line: rgba(255, 255, 255, 0.13);\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background-color: var(--bg);\r\n color: var(--cream);\r\n overflow-x: hidden;\r\n }\r\n\r\n h1, h2, h3, h4, .font-heading {\r\n font-family: 'Manrope', sans-serif;\r\n letter-spacing: -0.04em;\r\n }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #090c11;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #1e2634;\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: var(--gold);\r\n }\r\n\r\n \/* Card Image Hover Effects *\/\r\n .ld-card {\r\n position: relative;\r\n isolation: isolate;\r\n transition: border-color 0.3s ease;\r\n }\r\n .ld-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(0deg, rgba(5,7,11,0.95), rgba(5,7,11,0.15) 85%), var(--card-img) center\/cover;\r\n z-index: -1;\r\n transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .ld-card:hover::before {\r\n transform: scale(1.08);\r\n }\r\n\r\n \/* Utility classes *\/\r\n .bg-gold { background-color: var(--gold); }\r\n .text-gold { color: var(--gold); }\r\n .border-line { border-color: var(--line); }\r\n .bg-panel { background-color: var(--panel); }\r\n \r\n .ld-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 14px 22px;\r\n background: var(--gold);\r\n color: #15130f;\r\n border-radius: 4px;\r\n font-size: 13px;\r\n font-weight: 800;\r\n letter-spacing: 0.06em;\r\n transition: all 0.25s ease;\r\n }\r\n .ld-btn:hover {\r\n transform: translateY(-2px);\r\n background: var(--gold-hover);\r\n box-shadow: 0 10px 20px -10px rgba(233, 197, 143, 0.4);\r\n }\r\n .ld-btn.ghost {\r\n background: transparent;\r\n color: var(--cream);\r\n border: 1px solid rgba(244, 239, 230, 0.45);\r\n }\r\n .ld-btn.ghost:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n border-color: var(--cream);\r\n }\r\n\r\n \/* Accordion Custom Styling *\/\r\n details[open] summary .fa-chevron-down {\r\n transform: rotate(180deg);\r\n }\r\n summary {\r\n list-style: none;\r\n }\r\n summary::-webkit-details-marker {\r\n display: none;\r\n }\r\n\r\n \/* Notification Toast *\/\r\n #toast {\r\n transform: translateY(100px);\r\n opacity: 0;\r\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n }\r\n #toast.show {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"relative min-h-screen flex flex-col\">\r\n\r\n \r\n <div class=\"bg-amber-500\/10 border-b border-amber-500\/20 text-amber-200 px-4 py-2.5 text-xs sm:text-sm font-medium flex flex-wrap items-center justify-between gap-3 sticky top-0 z-50 backdrop-blur-md\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"inline-flex items-center justify-center bg-amber-500 text-black font-bold text-[10px] px-1.5 py-0.5 rounded\">MOD\u00c8LE ELEMENTOR<\/span>\r\n <span>Aper\u00e7u interactif & Kit de conversion WordPress \/ Elementor<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2 ml-auto\">\r\n <button onclick=\"toggleElementorModal()\" class=\"bg-amber-400 hover:bg-amber-300 text-slate-950 font-bold px-3 py-1.5 rounded transition text-xs flex items-center gap-1.5 shadow-sm\">\r\n <i class=\"fa-solid fa-code\"><\/i>\r\n <span>Guide & Snippets Elementor<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"lyondj\" class=\"flex-1\">\r\n \r\n \r\n <header class=\"max-w-[1160px] mx-auto px-5 h-20 flex items-center justify-between gap-6 border-b border-line\">\r\n <a href=\"#ld-accueil\" class=\"font-heading font-extrabold text-2xl tracking-widest text-white flex items-center gap-1\">\r\n LYON<span class=\"text-gold\">\u2014<\/span>DJ\r\n <\/a>\r\n \r\n \r\n <nav class=\"hidden md:flex items-center gap-6 text-xs font-medium text-slate-200 uppercase tracking-wider\">\r\n <a href=\"#ld-prestations\" class=\"hover:text-gold transition\">Prestations<\/a>\r\n <a href=\"#ld-approche\" class=\"hover:text-gold transition\">Notre approche<\/a>\r\n <a href=\"#ld-galerie\" class=\"hover:text-gold transition\">Galerie<\/a>\r\n <a href=\"#ld-guide\" class=\"hover:text-gold transition\">Guide pratique<\/a>\r\n <a href=\"#ld-contact\" class=\"hover:text-gold transition\">Contact<\/a>\r\n <\/nav>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <a href=\"#ld-contact\" class=\"hidden sm:inline-flex ld-btn\">\r\n DEMANDER UN DEVIS <i class=\"fa-solid fa-arrow-up-right-from-square text-[10px]\"><\/i>\r\n <\/a>\r\n \r\n \r\n <button onclick=\"toggleMobileMenu()\" class=\"md:hidden text-2xl text-cream p-2 focus:outline-none\" aria-label=\"Menu\">\r\n <i id=\"mobile-menu-icon\" class=\"fa-solid fa-bars\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-[#0d1117] border-b border-line px-6 py-6 flex-col gap-4 text-sm font-medium\">\r\n <a href=\"#ld-prestations\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Prestations<\/a>\r\n <a href=\"#ld-approche\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Notre approche<\/a>\r\n <a href=\"#ld-galerie\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Galerie<\/a>\r\n <a href=\"#ld-guide\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Guide pratique<\/a>\r\n <a href=\"#ld-contact\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Contact<\/a>\r\n <a href=\"#ld-contact\" onclick=\"toggleMobileMenu()\" class=\"ld-btn mt-2 text-center justify-center\">\r\n DEMANDER UN DEVIS \u2197\r\n <\/a>\r\n <\/div>\r\n\r\n <main>\r\n \r\n <section id=\"ld-accueil\" class=\"relative min-h-[590px] flex items-center bg-cover bg-center border-b border-line\" style=\"background-image: linear-gradient(90deg, rgba(7,10,15,0.96) 0%, rgba(7,10,15,0.78) 43%, rgba(7,10,15,0.18) 100%), linear-gradient(0deg, rgba(7,10,15,0.5), transparent 45%), url('https:\/\/images.unsplash.com\/photo-1506157786151-b8491531f063?auto=format&fit=crop&w=2000&q=85');\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 w-full py-20\">\r\n <div class=\"max-w-[690px]\">\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-5\">DJ \u00e9v\u00e9nementiel \u00b7 Lyon & Rh\u00f4ne-Alpes<\/div>\r\n <h1 class=\"text-4xl sm:text-6xl lg:text-[72px] font-bold leading-[1.08] mb-6\">\r\n Vos \u00e9v\u00e9nements.<br>\r\n Votre \u00e9quipe.<br>\r\n <em class=\"not-italic text-gold\">Une \u00e9nergie unique.<\/em>\r\n <\/h1>\r\n <p class=\"text-base sm:text-lg text-slate-300 max-w-[580px] mb-8 leading-relaxed\">\r\n Une ambiance musicale pens\u00e9e pour votre entreprise. Des s\u00e9minaires f\u00e9d\u00e9rateurs aux soir\u00e9es professionnelles, Lyon-DJ accompagne vos temps forts avec justesse et \u00e9nergie.\r\n <\/p>\r\n <div class=\"flex flex-wrap gap-3\">\r\n <a href=\"#ld-contact\" class=\"ld-btn\">PARLONS DE VOTRE \u00c9V\u00c9NEMENT \u2197<\/a>\r\n <a href=\"#ld-prestations\" class=\"ld-btn ghost\">D\u00c9COUVRIR LES PRESTATIONS<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"bg-[#0d1117] border-b border-line\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 py-6 grid grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"flex items-center gap-3 text-sm text-slate-200\">\r\n <span class=\"text-gold text-2xl font-serif\">\u266b<\/span>\r\n <span class=\"leading-tight\">Une programmation<br><strong class=\"font-normal text-slate-400\">adapt\u00e9e \u00e0 votre public<\/strong><\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-200\">\r\n <span class=\"text-gold text-2xl\">\u2667<\/span>\r\n <span class=\"leading-tight\">Une ambiance<br><strong class=\"font-normal text-slate-400\">qui rassemble<\/strong><\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-200\">\r\n <span class=\"text-gold text-2xl\">\u2727<\/span>\r\n <span class=\"leading-tight\">Son & lumi\u00e8re<br><strong class=\"font-normal text-slate-400\">professionnels<\/strong><\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-200\">\r\n <span class=\"text-gold text-2xl\">\u2316<\/span>\r\n <span class=\"leading-tight\">Lyon et r\u00e9gion<br><strong class=\"font-normal text-slate-400\">Rh\u00f4ne-Alpes<\/strong><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-prestations\" class=\"bg-[#f4efe6] text-[#151820] py-20 lg:py-24\">\r\n <div class=\"max-w-[1160px] mx-auto px-5\">\r\n <div class=\"flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-12\">\r\n <div>\r\n <div class=\"text-xs uppercase font-bold text-amber-800 tracking-[0.2em] mb-3\">Nos prestations<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold max-w-[650px] leading-tight\">Le bon tempo pour chaque moment professionnel.<\/h2>\r\n <\/div>\r\n <p class=\"text-slate-600 max-w-[420px] text-sm sm:text-base leading-relaxed\">\r\n Chaque \u00e9v\u00e9nement a son objectif. Nous adaptons la s\u00e9lection musicale, le rythme et l'ambiance \u00e0 votre format, votre \u00e9quipe et votre lieu.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n \r\n <article class=\"ld-card min-h-[320px] p-8 flex flex-col justify-end rounded-md border border-white\/10 text-white overflow-hidden\" style=\"--card-img:url('https:\/\/images.unsplash.com\/photo-1511578314322-379afb476865?auto=format&fit=crop&w=900&q=80')\">\r\n <span class=\"text-gold text-2xl mb-auto\">\u2726<\/span>\r\n <h3 class=\"text-2xl font-bold mb-2\">S\u00e9minaires<\/h3>\r\n <p class=\"text-sm text-slate-300\">Accompagner les temps d'accueil, les pauses et les moments de convivialit\u00e9 avec une ambiance musicale ma\u00eetris\u00e9e.<\/p>\r\n <\/article>\r\n \r\n \r\n <article class=\"ld-card min-h-[320px] p-8 flex flex-col justify-end rounded-md border border-white\/10 text-white overflow-hidden\" style=\"--card-img:url('https:\/\/images.unsplash.com\/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=900&q=80')\">\r\n <span class=\"text-gold text-2xl mb-auto\">\u2667<\/span>\r\n <h3 class=\"text-2xl font-bold mb-2\">Team building<\/h3>\r\n <p class=\"text-sm text-slate-300\">Cr\u00e9er une atmosph\u00e8re f\u00e9d\u00e9ratrice qui encourage les \u00e9changes, la coh\u00e9sion et le plaisir d'\u00eatre ensemble.<\/p>\r\n <\/article>\r\n\r\n \r\n <article class=\"ld-card min-h-[320px] p-8 flex flex-col justify-end rounded-md border border-white\/10 text-white overflow-hidden\" style=\"--card-img:url('https:\/\/images.unsplash.com\/photo-1506157786151-b8491531f063?auto=format&fit=crop&w=900&q=80')\">\r\n <span class=\"text-gold text-2xl mb-auto\">\u266b<\/span>\r\n <h3 class=\"text-2xl font-bold mb-2\">Soir\u00e9es d'entreprise<\/h3>\r\n <p class=\"text-sm text-slate-300\">Une programmation \u00e9volutive, du cocktail au dancefloor, en accord avec votre culture et vos invit\u00e9s.<\/p>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-approche\" class=\"py-20 lg:py-24\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center\">\r\n <div class=\"min-h-[380px] sm:min-h-[460px] rounded bg-cover bg-center border border-line\" style=\"background-image: linear-gradient(0deg, rgba(4,7,12,0.25), transparent), url('https:\/\/images.unsplash.com\/photo-1571266028243-d220c9c3b7f8?auto=format&fit=crop&w=1200&q=85');\" role=\"img\" aria-label=\"Ambiance musicale lors d'un \u00e9v\u00e9nement\"><\/div>\r\n <div>\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-3\">L'approche Lyon-DJ<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold mb-6 leading-tight\">Plus qu'une playlist : une ambiance qui vous ressemble.<\/h2>\r\n <p class=\"text-slate-400 mb-6 leading-relaxed\">\r\n Un \u00e9v\u00e9nement r\u00e9ussi ne se r\u00e9sume pas au volume sonore. Il s'agit de comprendre le public, de respecter les temps forts et de trouver le bon \u00e9quilibre entre \u00e9l\u00e9gance, convivialit\u00e9 et \u00e9nergie.\r\n <\/p>\r\n <div class=\"space-y-3 mb-8 text-sm text-slate-200\">\r\n <div class=\"flex items-start gap-3\"><span class=\"text-gold font-bold\">\u2713<\/span> <span>\u00c9change pr\u00e9alable sur vos attentes et le d\u00e9roul\u00e9<\/span><\/div>\r\n <div class=\"flex items-start gap-3\"><span class=\"text-gold font-bold\">\u2713<\/span> <span>S\u00e9lection musicale adapt\u00e9e \u00e0 votre public<\/span><\/div>\r\n <div class=\"flex items-start gap-3\"><span class=\"text-gold font-bold\">\u2713<\/span> <span>Coordination avec votre \u00e9quipe et le lieu<\/span><\/div>\r\n <div class=\"flex items-start gap-3\"><span class=\"text-gold font-bold\">\u2713<\/span> <span>Sonorisation et \u00e9clairage selon les besoins convenus<\/span><\/div>\r\n <\/div>\r\n <a href=\"#ld-contact\" class=\"ld-btn\">\u00c9CHANGEONS SUR VOTRE PROJET \u2197<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-galerie\" class=\"bg-[#f4efe6] text-[#151820] py-20 lg:py-24\">\r\n <div class=\"max-w-[1160px] mx-auto px-5\">\r\n <div class=\"flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-12\">\r\n <div>\r\n <div class=\"text-xs uppercase font-bold text-amber-800 tracking-[0.2em] mb-3\">En images<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold max-w-[650px] leading-tight\">DJ d'entreprise \u00e0 Lyon : conseils pour r\u00e9ussir votre \u00e9v\u00e9nement.<\/h2>\r\n <\/div>\r\n <p class=\"text-slate-600 max-w-[420px] text-sm sm:text-base leading-relaxed\">\r\n Choisissez un prestataire qui comprend votre format, vos contraintes et l'image de votre entreprise.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n <div class=\"overflow-hidden rounded group shadow-md\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=800&q=80\" alt=\"Ambiance musicale et lumi\u00e8res de soir\u00e9e\" class=\"w-full h-[240px] object-cover filter saturate-80 group-hover:saturate-110 group-hover:scale-105 transition duration-500\">\r\n <\/div>\r\n <div class=\"overflow-hidden rounded group shadow-md\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517457373958-b7ffb1e9e2e3?auto=format&fit=crop&w=800&q=80\" alt=\"Rencontre professionnelle\" class=\"w-full h-[240px] object-cover filter saturate-80 group-hover:saturate-110 group-hover:scale-105 transition duration-500\">\r\n <\/div>\r\n <div class=\"overflow-hidden rounded group shadow-md sm:col-span-2 lg:col-span-1\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=800&q=80\" alt=\"\u00c9v\u00e9nement et public\" class=\"w-full h-[240px] object-cover filter saturate-80 group-hover:saturate-110 group-hover:scale-105 transition duration-500\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-guide\" class=\"bg-[#0d1117] py-20 lg:py-24 border-t border-line\">\r\n <div class=\"max-w-[1160px] mx-auto px-5\">\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-3\">Le guide pratique<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold mb-8\">DJ d'entreprise \u00e0 Lyon : prestations, mat\u00e9riel et prix<\/h2>\r\n \r\n <div class=\"prose prose-invert max-w-none text-slate-300 space-y-6 text-sm sm:text-base leading-relaxed\">\r\n <p>\r\n Choisir un DJ pour une entreprise, c'est trouver le bon \u00e9quilibre entre ambiance musicale, fiabilit\u00e9 technique et respect de l'image de marque. Pour un s\u00e9minaire, un team building ou une soir\u00e9e professionnelle \u00e0 Lyon et en Rh\u00f4ne-Alpes, le format de l'\u00e9v\u00e9nement et les attentes des participants doivent guider la pr\u00e9paration.\r\n <\/p>\r\n <p>\r\n Le budget d\u00e9pend notamment de la dur\u00e9e, du lieu, du nombre de participants, des besoins de sonorisation et d'\u00e9clairage, des animations \u00e9ventuelles et des d\u00e9placements. Le plus utile est de comparer des devis d\u00e9taill\u00e9s \u00e9tablis sur le m\u00eame p\u00e9rim\u00e8tre.\r\n <\/p>\r\n\r\n <h3 class=\"text-2xl font-bold text-white pt-4\">Comment choisir et comparer les devis ?<\/h3>\r\n <p>\r\n Avant de confirmer votre prestataire, \u00e9changez sur le d\u00e9roul\u00e9 de l'\u00e9v\u00e9nement, les contraintes du lieu et l'ambiance recherch\u00e9e. V\u00e9rifiez l'exp\u00e9rience sur des \u00e9v\u00e9nements professionnels, les r\u00e9f\u00e9rences disponibles, l'assurance responsabilit\u00e9 civile professionnelle, les horaires r\u00e9els de pr\u00e9sence et les frais \u00e9ventuels.\r\n <\/p>\r\n <ul class=\"list-disc pl-6 space-y-2 text-slate-400\">\r\n <li>Exp\u00e9rience et compr\u00e9hension des \u00e9v\u00e9nements corporate.<\/li>\r\n <li>Qualit\u00e9 et ad\u00e9quation du mat\u00e9riel audio et lumineux.<\/li>\r\n <li>Horaires d'installation, de prestation et de d\u00e9montage.<\/li>\r\n <li>Frais de d\u00e9placement et co\u00fbt des heures suppl\u00e9mentaires.<\/li>\r\n <li>Gestion des prises de parole, des annonces et des impr\u00e9vus.<\/li>\r\n <li>Conditions de r\u00e9servation, contrat et acompte.<\/li>\r\n <\/ul>\r\n <p>\r\n Un devis clair doit pr\u00e9ciser ce qui est inclus et les options \u00e9ventuelles. Un \u00e9change t\u00e9l\u00e9phonique en amont permet aussi de v\u00e9rifier que le style de communication et l'approche correspondent \u00e0 votre \u00e9quipe.\r\n <\/p>\r\n\r\n <h3 class=\"text-2xl font-bold text-white pt-4\">Sonorisation, \u00e9clairage et mat\u00e9riel<\/h3>\r\n <p>\r\n La configuration technique doit \u00eatre dimensionn\u00e9e au lieu et au nombre d'invit\u00e9s. Selon le cahier des charges, une prestation peut n\u00e9cessiter des enceintes adapt\u00e9es \u00e0 la salle, une r\u00e9gie DJ, des micros pour les discours et un \u00e9clairage d'ambiance ou de piste.\r\n <\/p>\r\n\r\n \r\n <div class=\"overflow-x-auto my-6 border border-line rounded\">\r\n <table class=\"w-full text-left text-sm\">\r\n <thead class=\"bg-white\/5 border-b border-line text-gold font-bold\">\r\n <tr>\r\n <th class=\"p-4\">\u00c9quipement \u00e0 pr\u00e9voir<\/th>\r\n <th class=\"p-4\">Utilit\u00e9<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody class=\"divide-y divide-line text-slate-300\">\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">Sonorisation adapt\u00e9e<\/td>\r\n <td class=\"p-4\">Diffusion claire, adapt\u00e9e au volume de la salle et au public.<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">R\u00e9gie et table de mixage<\/td>\r\n <td class=\"p-4\">Gestion des sources et transitions musicales.<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">Microphone sans fil<\/td>\r\n <td class=\"p-4\">Discours, interventions et annonces.<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">\u00c9clairage LED<\/td>\r\n <td class=\"p-4\">Ambiance visuelle et mise en valeur de l'espace.<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">\u00c9l\u00e9ments de mise en lumi\u00e8re<\/td>\r\n <td class=\"p-4\">\u00c0 d\u00e9finir selon le lieu, les besoins et les contraintes techniques.<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <h3 class=\"text-2xl font-bold text-white pt-4\">Quel budget pr\u00e9voir pour un DJ d'entreprise \u00e0 Lyon ?<\/h3>\r\n <p>\r\n Le document de travail fourni indique un rep\u00e8re de d\u00e9part autour de <strong>750 \u20ac HT<\/strong> et une fourchette de <strong>750 \u00e0 1 500 \u20ac HT<\/strong> pour une soir\u00e9e compl\u00e8te. Ces montants sont indicatifs et ne constituent ni un tarif confirm\u00e9 de Lyon-DJ ni une \u00e9tude de march\u00e9 v\u00e9rifi\u00e9e. Le prix r\u00e9el doit \u00eatre \u00e9tabli selon la dur\u00e9e, le lieu, les besoins techniques, les d\u00e9placements et les animations demand\u00e9es.\r\n <\/p>\r\n\r\n <h3 class=\"text-2xl font-bold text-white pt-4\">Team building, cocktail, d\u00eener et soir\u00e9e dansante<\/h3>\r\n <p>\r\n La musique peut accompagner plusieurs moments d'un \u00e9v\u00e9nement professionnel :\r\n <\/p>\r\n <ul class=\"list-disc pl-6 space-y-2 text-slate-400\">\r\n <li><strong class=\"text-slate-200\">Blind test musical :<\/strong> un jeu par \u00e9quipes autour de titres ou de th\u00e8mes choisis.<\/li>\r\n <li><strong class=\"text-slate-200\">Quiz musical :<\/strong> une animation interactive \u00e0 adapter au nombre de participants et au planning.<\/li>\r\n <li><strong class=\"text-slate-200\">Animation micro :<\/strong> annonces et transitions, selon le r\u00f4le convenu avec l'organisateur.<\/li>\r\n <li><strong class=\"text-slate-200\">Soir\u00e9e dansante :<\/strong> une programmation \u00e9volutive selon les r\u00e9actions du public.<\/li>\r\n <\/ul>\r\n\r\n \r\n <div class=\"pt-8\">\r\n <h3 class=\"text-2xl font-bold text-white mb-6\">Questions fr\u00e9quentes<\/h3>\r\n <div class=\"space-y-4 border-t border-line\">\r\n \r\n <details class=\"group py-4 border-b border-line cursor-pointer\">\r\n <summary class=\"flex justify-between items-center font-bold text-white text-base\">\r\n <span>Combien co\u00fbte un DJ pour une soir\u00e9e d'entreprise \u00e0 Lyon ?<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-gold text-xs transition-transform duration-300\"><\/i>\r\n <\/summary>\r\n <p class=\"mt-3 text-slate-400 text-sm leading-relaxed\">\r\n Le prix d\u00e9pend de la dur\u00e9e, du lieu, du mat\u00e9riel, des horaires et des animations. Le document fourni cite 750 \u00e0 1 500 \u20ac HT comme rep\u00e8re indicatif pour une soir\u00e9e compl\u00e8te, \u00e0 confirmer par des devis actuels et selon le p\u00e9rim\u00e8tre exact.\r\n <\/p>\r\n <\/details>\r\n\r\n <details class=\"group py-4 border-b border-line cursor-pointer\">\r\n <summary class=\"flex justify-between items-center font-bold text-white text-base\">\r\n <span>Peut-on pr\u00e9voir un DJ pour un s\u00e9minaire en journ\u00e9e ?<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-gold text-xs transition-transform duration-300\"><\/i>\r\n <\/summary>\r\n <p class=\"mt-3 text-slate-400 text-sm leading-relaxed\">\r\n Oui, selon le format d\u00e9fini : accueil musical, pauses, cocktail ou temps convivial. Pr\u00e9cisez le planning et les contraintes sonores du lieu lors de la demande de devis.\r\n <\/p>\r\n <\/details>\r\n\r\n <details class=\"group py-4 border-b border-line cursor-pointer\">\r\n <summary class=\"flex justify-between items-center font-bold text-white text-base\">\r\n <span>Un blind test est-il adapt\u00e9 au team building ?<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-gold text-xs transition-transform duration-300\"><\/i>\r\n <\/summary>\r\n <p class=\"mt-3 text-slate-400 text-sm leading-relaxed\">\r\n Un blind test ou un quiz musical peut proposer un moment participatif. Le format doit \u00eatre adapt\u00e9 au nombre d'\u00e9quipes, \u00e0 la dur\u00e9e disponible et au niveau d'interaction souhait\u00e9.\r\n <\/p>\r\n <\/details>\r\n\r\n <details class=\"group py-4 border-b border-line cursor-pointer\">\r\n <summary class=\"flex justify-between items-center font-bold text-white text-base\">\r\n <span>Quand contacter le DJ ?<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-gold text-xs transition-transform duration-300\"><\/i>\r\n <\/summary>\r\n <p class=\"mt-3 text-slate-400 text-sm leading-relaxed\">\r\n Le plus t\u00f4t possible, surtout si la date et le lieu sont d\u00e9j\u00e0 fix\u00e9s. Les disponibilit\u00e9s et d\u00e9lais de pr\u00e9paration sont \u00e0 confirmer directement avec le prestataire.\r\n <\/p>\r\n <\/details>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-6\">\r\n <a href=\"#ld-contact\" class=\"ld-btn\">DEMANDER UN DEVIS POUR MON \u00c9V\u00c9NEMENT \u2197<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-contact\" class=\"bg-panel py-20 lg:py-24 relative overflow-hidden\" style=\"background-image: radial-gradient(ellipse at 80% 10%, rgba(125,86,180,0.19), transparent 35%);\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 grid grid-cols-1 lg:grid-cols-12 gap-10 items-center\">\r\n <div class=\"lg:col-span-7\">\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-3\">Votre prochain \u00e9v\u00e9nement commence ici<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold mb-4 leading-tight\">Parlons de votre projet.<\/h2>\r\n <p class=\"text-slate-400 text-base leading-relaxed max-w-[540px]\">\r\n Indiquez-nous la date, le lieu et le format de votre \u00e9v\u00e9nement. Nous pourrons \u00e9changer sur vos besoins et pr\u00e9parer une proposition adapt\u00e9e.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"lg:col-span-5 bg-white\/[0.025] border border-line p-8 rounded-lg shadow-2xl\">\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-2\">Contact direct<\/div>\r\n <p class=\"text-slate-300 text-sm\">Un premier \u00e9change, simplement.<\/p>\r\n \r\n <a href=\"tel:+33770012886\" class=\"font-heading text-3xl sm:text-4xl font-extrabold text-gold my-4 block hover:underline\">\r\n 07 70 01 28 86\r\n <\/a>\r\n\r\n <div class=\"flex flex-wrap gap-3\">\r\n <a href=\"tel:+33770012886\" class=\"ld-btn\">APPELER LYON-DJ \u2197<\/a>\r\n <a href=\"https:\/\/wa.me\/33770012886\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"ld-btn ghost\">WHATSAPP<\/a>\r\n <\/div>\r\n\r\n <p class=\"text-xs text-slate-500 mt-6 pt-4 border-t border-line\">\r\n <i class=\"fa-solid fa-circle-info mr-1 text-gold\"><\/i>\r\n Pour int\u00e9grer un formulaire Elementor Pro, glissez simplement le widget <strong>Form<\/strong> dans ce bloc.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n \r\n <footer class=\"border-t border-line py-8 text-xs text-slate-400\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 flex flex-wrap justify-between items-center gap-4\">\r\n <span class=\"font-heading font-extrabold text-white tracking-widest text-base\">LYON<span class=\"text-gold\">\u2014<\/span>DJ<\/span>\r\n <span>DJ \u00e9v\u00e9nementiel pour entreprises \u00b7 Lyon & Rh\u00f4ne-Alpes<\/span>\r\n <span>\u00a9 <span id=\"ld-year\">2026<\/span> Lyon-DJ<\/span>\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n \r\n <button onclick=\"toggleElementorModal()\" class=\"fixed bottom-6 right-6 z-40 bg-gold hover:bg-amber-300 text-slate-950 p-4 rounded-full shadow-2xl transition transform hover:scale-105 flex items-center justify-center group\" title=\"Ouvrir le Kit Elementor\">\r\n <i class=\"fa-solid fa-layer-group text-xl\"><\/i>\r\n <span class=\"max-w-0 overflow-hidden whitespace-nowrap group-hover:max-w-xs transition-all duration-300 ease-in-out font-bold text-xs ml-0 group-hover:ml-2\">\r\n Kit Elementor\r\n <\/span>\r\n <\/button>\r\n\r\n \r\n <div id=\"elementor-modal\" class=\"fixed inset-0 bg-black\/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4\">\r\n <div class=\"bg-[#11161e] border border-line rounded-xl max-w-4xl w-full max-h-[90vh] flex flex-col shadow-2xl overflow-hidden\">\r\n \r\n \r\n <div class=\"p-6 border-b border-line flex justify-between items-center bg-[#090c11]\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-gold\/10 p-2 rounded text-gold\">\r\n <i class=\"fa-solid fa-cubes text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold text-white\">Kit d'Int\u00e9gration Elementor Pro<\/h3>\r\n <p class=\"text-xs text-slate-400\">Guide pas-\u00e0-pas et variables pour reproduire Lyon-DJ sur WordPress<\/p>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"toggleElementorModal()\" class=\"text-slate-400 hover:text-white p-2 text-xl\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex border-b border-line bg-[#0d1117] px-6 text-xs font-semibold overflow-x-auto\">\r\n <button onclick=\"switchTab('tab-tokens')\" id=\"btn-tab-tokens\" class=\"tab-btn py-3 px-4 text-gold border-b-2 border-gold font-bold\">1. Tokens & Couleurs<\/button>\r\n <button onclick=\"switchTab('tab-structure')\" id=\"btn-tab-structure\" class=\"tab-btn py-3 px-4 text-slate-400 hover:text-white\">2. Structure des Widgets<\/button>\r\n <button onclick=\"switchTab('tab-code')\" id=\"btn-tab-code\" class=\"tab-btn py-3 px-4 text-slate-400 hover:text-white\">3. Code HTML\/CSS Pr\u00eat<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-6 overflow-y-auto space-y-6 flex-1 text-sm\">\r\n \r\n \r\n <div id=\"tab-tokens\" class=\"tab-content space-y-6\">\r\n <div>\r\n <h4 class=\"font-bold text-white mb-2 text-base\">Couleurs globales Elementor (Site Settings)<\/h4>\r\n <p class=\"text-xs text-slate-400 mb-4\">Ajoutez ces codes hexad\u00e9cimaux dans : <em>R\u00e9glages du site > Couleurs globales<\/em><\/p>\r\n \r\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-3\">\r\n <div class=\"p-3 bg-[#090c11] border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-slate-400\">Fond (--bg)<\/div>\r\n <div class=\"font-mono font-bold text-white\">#090c11<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#090c11')\" class=\"text-xs bg-white\/5 hover:bg-white\/10 px-2 py-1 rounded text-slate-300\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#11161e] border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-slate-400\">Panneaux (--panel)<\/div>\r\n <div class=\"font-mono font-bold text-white\">#11161e<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#11161e')\" class=\"text-xs bg-white\/5 hover:bg-white\/10 px-2 py-1 rounded text-slate-300\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#e9c58f] text-black border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-black\/70 font-semibold\">Or Accent (--gold)<\/div>\r\n <div class=\"font-mono font-bold\">#e9c58f<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#e9c58f')\" class=\"text-xs bg-black\/10 hover:bg-black\/20 px-2 py-1 rounded font-bold\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#f4efe6] text-black border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-black\/70 font-semibold\">Cr\u00e8me Texte (--cream)<\/div>\r\n <div class=\"font-mono font-bold\">#f4efe6<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#f4efe6')\" class=\"text-xs bg-black\/10 hover:bg-black\/20 px-2 py-1 rounded font-bold\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#b6bdc8] text-black border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-black\/70 font-semibold\">Texte Secondaire<\/div>\r\n <div class=\"font-mono font-bold\">#b6bdc8<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#b6bdc8')\" class=\"text-xs bg-black\/10 hover:bg-black\/20 px-2 py-1 rounded font-bold\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#0d1117] border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-slate-400\">Cartes\/Gris Fonce<\/div>\r\n <div class=\"font-mono font-bold text-white\">#0d1117<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#0d1117')\" class=\"text-xs bg-white\/5 hover:bg-white\/10 px-2 py-1 rounded text-slate-300\">Copier<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-4 border-t border-line\">\r\n <h4 class=\"font-bold text-white mb-2 text-base\">Polices de caract\u00e8res Google Fonts<\/h4>\r\n <ul class=\"space-y-2 text-xs text-slate-300\">\r\n <li><strong>Titres (H1, H2, H3, Logos) :<\/strong> <code class=\"text-gold\">Manrope<\/code> (Graisses : 700, 800) avec lettre-spacing serr\u00e9 (-0.04em).<\/li>\r\n <li><strong>Corps de texte :<\/strong> <code class=\"text-gold\">DM Sans<\/code> (Graisses : 400, 500) avec hauteur de ligne \u00e0 1.7.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-structure\" class=\"tab-content hidden space-y-4\">\r\n <h4 class=\"font-bold text-white text-base\">Guide de reconstruction section par section dans Elementor<\/h4>\r\n \r\n <div class=\"space-y-3 text-xs\">\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">1. En-t\u00eate (Header Elementor Pro)<\/strong>\r\n <p class=\"text-slate-300\">Cr\u00e9er un conteneur Flexbox horizontal (Direction: Row, Justify: Space-Between). Ajouter un widget Site Logo\/Titre, un widget Menu de Navigation (masqu\u00e9 sur mobile), et un widget Bouton avec lien vers #ld-contact.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">2. Section Hero<\/strong>\r\n <p class=\"text-slate-300\">Conteneur plein \u00e9cran. Image de fond Unsplash avec Overlay de d\u00e9grad\u00e9 sombre (<code class=\"text-gold\">linear-gradient<\/code>). Ajouter un Titre H1 avec balise <code class=\"text-gold\"><em><\/code> pour la touche Or, un \u00c9diteur de Texte, et une grille interne pour les 2 boutons CTA.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">3. Grille de Preuves (Proof Grid)<\/strong>\r\n <p class=\"text-slate-300\">Conteneur avec fond <code class=\"text-gold\">#0d1117<\/code> et 4 colonnes (2 colonnes sur mobile). Utiliser 4 widgets <em>Icon Box<\/em> ou de simples blocs texte avec les ic\u00f4nes dor\u00e9es.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">4. Section Prestations (Cartes d'\u00e9v\u00e9nements)<\/strong>\r\n <p class=\"text-slate-300\">Fond clair <code class=\"text-gold\">#f4efe6<\/code>. Grille de 3 Conteneurs. Pour chaque carte, appliquer une image en arri\u00e8re-plan avec overlay noir \u00e0 80%, et ins\u00e9rer le titre et le texte en bas (flex-end).<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">5. Section FAQ (Guide SEO)<\/strong>\r\n <p class=\"text-slate-300\">Utilisez le widget <strong>Accordion<\/strong> natif d'Elementor. Configurez la couleur du titre en blanc, le texte en gris <code class=\"text-gold\">#b6bdc8<\/code> et les bordures l\u00e9g\u00e8res.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">6. Bloc Contact<\/strong>\r\n <p class=\"text-slate-300\">Disposition 2 colonnes (7\/5). Dans la colonne de droite, ins\u00e9rez un widget <strong>Form<\/strong> d'Elementor Pro pour le formulaire de demande de devis personnalis\u00e9.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-code\" class=\"tab-content hidden space-y-4\">\r\n <div class=\"flex justify-between items-center\">\r\n <h4 class=\"font-bold text-white text-base\">Snippet HTML\/CSS Complet pour Widget Elementor<\/h4>\r\n <button onclick=\"copySnippet()\" class=\"bg-gold hover:bg-amber-300 text-black px-3 py-1.5 rounded font-bold text-xs flex items-center gap-1\">\r\n <i class=\"fa-regular fa-copy\"><\/i> Copier tout le code\r\n <\/button>\r\n <\/div>\r\n <p class=\"text-xs text-slate-400\">Collez ce code directement dans un widget **HTML** d'Elementor si vous souhaitez importer l'exact m\u00eame design en un clic sur n'importe quelle page WordPress !<\/p>\r\n\r\n <div class=\"relative\">\r\n <textarea id=\"code-snippet\" readonly class=\"w-full h-64 bg-black\/80 text-emerald-400 font-mono text-xs p-4 rounded border border-line focus:outline-none select-all\" spellcheck=\"false\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"p-4 border-t border-line bg-[#090c11] flex justify-between items-center text-xs\">\r\n <span class=\"text-slate-400\">Inspiration Kit Elementor v2 - Lyon-DJ<\/span>\r\n <button onclick=\"toggleElementorModal()\" class=\"bg-white\/10 hover:bg-white\/20 text-white font-bold px-4 py-2 rounded\">\r\n Fermer\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"toast\" class=\"fixed bottom-6 left-6 z-50 bg-emerald-500 text-slate-950 font-bold px-4 py-3 rounded-lg shadow-2xl flex items-center gap-2 text-sm\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n <span id=\"toast-message\">Copi\u00e9 dans le presse-papier !<\/span>\r\n <\/div>\r\n\r\n \r\n <script>\r\n \/\/ Update Current Year\r\n document.getElementById('ld-year').textContent = new Date().getFullYear();\r\n\r\n \/\/ Mobile Menu Toggle\r\n function toggleMobileMenu() {\r\n const menu = document.getElementById('mobile-menu');\r\n const icon = document.getElementById('mobile-menu-icon');\r\n menu.classList.toggle('hidden');\r\n menu.classList.toggle('flex');\r\n \r\n if (menu.classList.contains('flex')) {\r\n icon.classList.remove('fa-bars');\r\n icon.classList.add('fa-xmark');\r\n } else {\r\n icon.classList.remove('fa-xmark');\r\n icon.classList.add('fa-bars');\r\n }\r\n }\r\n\r\n \/\/ Elementor Modal Toggle\r\n function toggleElementorModal() {\r\n const modal = document.getElementById('elementor-modal');\r\n modal.classList.toggle('hidden');\r\n \r\n \/\/ Populate code snippet area when modal opens\r\n if(!modal.classList.contains('hidden')) {\r\n const htmlContent = document.getElementById('lyondj').outerHTML;\r\n document.getElementById('code-snippet').value = htmlContent;\r\n }\r\n }\r\n\r\n \/\/ Modal Tab Switching\r\n function switchTab(tabId) {\r\n document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));\r\n document.querySelectorAll('.tab-btn').forEach(btn => {\r\n btn.classList.remove('text-gold', 'border-b-2', 'border-gold', 'font-bold');\r\n btn.classList.add('text-slate-400');\r\n });\r\n\r\n document.getElementById(tabId).classList.remove('hidden');\r\n const activeBtn = document.getElementById('btn-' + tabId);\r\n activeBtn.classList.add('text-gold', 'border-b-2', 'border-gold', 'font-bold');\r\n activeBtn.classList.remove('text-slate-400');\r\n }\r\n\r\n \/\/ Copy Helper\r\n function copyToClipboard(text) {\r\n \/\/ Using standard execCommand fallback or Clipboard API\r\n if (navigator.clipboard && window.isSecureContext) {\r\n navigator.clipboard.writeText(text);\r\n } else {\r\n const textarea = document.createElement('textarea');\r\n textarea.value = text;\r\n document.body.appendChild(textarea);\r\n textarea.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(textarea);\r\n }\r\n showToast('Code ' + text + ' copi\u00e9 !');\r\n }\r\n\r\n function copySnippet() {\r\n const snippetTextarea = document.getElementById('code-snippet');\r\n snippetTextarea.select();\r\n document.execCommand('copy');\r\n showToast('Code HTML Elementor copi\u00e9 avec succ\u00e8s !');\r\n }\r\n\r\n \/\/ Show Toast Function\r\n function showToast(msg) {\r\n const toast = document.getElementById('toast');\r\n document.getElementById('toast-message').textContent = msg;\r\n toast.classList.add('show');\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 3000);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lyon-DJ \u00b7 DJ \u00c9v\u00e9nementiel & Kit Elementor MOD\u00c8LE ELEMENTOR Aper\u00e7u interactif & Kit de conversion WordPress \/ Elementor Guide & Snippets Elementor LYON\u2014DJ Prestations Notre approche Galerie Guide pratique Contact DEMANDER UN DEVIS Prestations Notre approche Galerie Guide pratique Contact DEMANDER UN DEVIS \u2197 DJ \u00e9v\u00e9nementiel \u00b7 Lyon & Rh\u00f4ne-Alpes Vos \u00e9v\u00e9nements. Votre \u00e9quipe. Une […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":16,"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":33,"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/33"}],"wp:attachment":[{"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Lyon-DJ \u00b7 DJ \u00c9v\u00e9nementiel & Kit Elementor<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@200..800&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n :root {\r\n --bg: #090c11;\r\n --panel: #11161e;\r\n --cream: #f4efe6;\r\n --muted: #b6bdc8;\r\n --gold: #e9c58f;\r\n --gold-hover: #f5d9ad;\r\n --line: rgba(255, 255, 255, 0.13);\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background-color: var(--bg);\r\n color: var(--cream);\r\n overflow-x: hidden;\r\n }\r\n\r\n h1, h2, h3, h4, .font-heading {\r\n font-family: 'Manrope', sans-serif;\r\n letter-spacing: -0.04em;\r\n }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #090c11;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #1e2634;\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: var(--gold);\r\n }\r\n\r\n \/* Card Image Hover Effects *\/\r\n .ld-card {\r\n position: relative;\r\n isolation: isolate;\r\n transition: border-color 0.3s ease;\r\n }\r\n .ld-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(0deg, rgba(5,7,11,0.95), rgba(5,7,11,0.15) 85%), var(--card-img) center\/cover;\r\n z-index: -1;\r\n transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .ld-card:hover::before {\r\n transform: scale(1.08);\r\n }\r\n\r\n \/* Utility classes *\/\r\n .bg-gold { background-color: var(--gold); }\r\n .text-gold { color: var(--gold); }\r\n .border-line { border-color: var(--line); }\r\n .bg-panel { background-color: var(--panel); }\r\n \r\n .ld-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 14px 22px;\r\n background: var(--gold);\r\n color: #15130f;\r\n border-radius: 4px;\r\n font-size: 13px;\r\n font-weight: 800;\r\n letter-spacing: 0.06em;\r\n transition: all 0.25s ease;\r\n }\r\n .ld-btn:hover {\r\n transform: translateY(-2px);\r\n background: var(--gold-hover);\r\n box-shadow: 0 10px 20px -10px rgba(233, 197, 143, 0.4);\r\n }\r\n .ld-btn.ghost {\r\n background: transparent;\r\n color: var(--cream);\r\n border: 1px solid rgba(244, 239, 230, 0.45);\r\n }\r\n .ld-btn.ghost:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n border-color: var(--cream);\r\n }\r\n\r\n \/* Accordion Custom Styling *\/\r\n details[open] summary .fa-chevron-down {\r\n transform: rotate(180deg);\r\n }\r\n summary {\r\n list-style: none;\r\n }\r\n summary::-webkit-details-marker {\r\n display: none;\r\n }\r\n\r\n \/* Notification Toast *\/\r\n #toast {\r\n transform: translateY(100px);\r\n opacity: 0;\r\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n }\r\n #toast.show {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"relative min-h-screen flex flex-col\">\r\n\r\n \r\n <div class=\"bg-amber-500\/10 border-b border-amber-500\/20 text-amber-200 px-4 py-2.5 text-xs sm:text-sm font-medium flex flex-wrap items-center justify-between gap-3 sticky top-0 z-50 backdrop-blur-md\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"inline-flex items-center justify-center bg-amber-500 text-black font-bold text-[10px] px-1.5 py-0.5 rounded\">MOD\u00c8LE ELEMENTOR<\/span>\r\n <span>Aper\u00e7u interactif & Kit de conversion WordPress \/ Elementor<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2 ml-auto\">\r\n <button onclick=\"toggleElementorModal()\" class=\"bg-amber-400 hover:bg-amber-300 text-slate-950 font-bold px-3 py-1.5 rounded transition text-xs flex items-center gap-1.5 shadow-sm\">\r\n <i class=\"fa-solid fa-code\"><\/i>\r\n <span>Guide & Snippets Elementor<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"lyondj\" class=\"flex-1\">\r\n \r\n \r\n <header class=\"max-w-[1160px] mx-auto px-5 h-20 flex items-center justify-between gap-6 border-b border-line\">\r\n <a href=\"#ld-accueil\" class=\"font-heading font-extrabold text-2xl tracking-widest text-white flex items-center gap-1\">\r\n LYON<span class=\"text-gold\">\u2014<\/span>DJ\r\n <\/a>\r\n \r\n \r\n <nav class=\"hidden md:flex items-center gap-6 text-xs font-medium text-slate-200 uppercase tracking-wider\">\r\n <a href=\"#ld-prestations\" class=\"hover:text-gold transition\">Prestations<\/a>\r\n <a href=\"#ld-approche\" class=\"hover:text-gold transition\">Notre approche<\/a>\r\n <a href=\"#ld-galerie\" class=\"hover:text-gold transition\">Galerie<\/a>\r\n <a href=\"#ld-guide\" class=\"hover:text-gold transition\">Guide pratique<\/a>\r\n <a href=\"#ld-contact\" class=\"hover:text-gold transition\">Contact<\/a>\r\n <\/nav>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <a href=\"#ld-contact\" class=\"hidden sm:inline-flex ld-btn\">\r\n DEMANDER UN DEVIS <i class=\"fa-solid fa-arrow-up-right-from-square text-[10px]\"><\/i>\r\n <\/a>\r\n \r\n \r\n <button onclick=\"toggleMobileMenu()\" class=\"md:hidden text-2xl text-cream p-2 focus:outline-none\" aria-label=\"Menu\">\r\n <i id=\"mobile-menu-icon\" class=\"fa-solid fa-bars\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-[#0d1117] border-b border-line px-6 py-6 flex-col gap-4 text-sm font-medium\">\r\n <a href=\"#ld-prestations\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Prestations<\/a>\r\n <a href=\"#ld-approche\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Notre approche<\/a>\r\n <a href=\"#ld-galerie\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Galerie<\/a>\r\n <a href=\"#ld-guide\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Guide pratique<\/a>\r\n <a href=\"#ld-contact\" onclick=\"toggleMobileMenu()\" class=\"py-2 border-b border-white\/5 hover:text-gold\">Contact<\/a>\r\n <a href=\"#ld-contact\" onclick=\"toggleMobileMenu()\" class=\"ld-btn mt-2 text-center justify-center\">\r\n DEMANDER UN DEVIS \u2197\r\n <\/a>\r\n <\/div>\r\n\r\n <main>\r\n \r\n <section id=\"ld-accueil\" class=\"relative min-h-[590px] flex items-center bg-cover bg-center border-b border-line\" style=\"background-image: linear-gradient(90deg, rgba(7,10,15,0.96) 0%, rgba(7,10,15,0.78) 43%, rgba(7,10,15,0.18) 100%), linear-gradient(0deg, rgba(7,10,15,0.5), transparent 45%), url('https:\/\/images.unsplash.com\/photo-1506157786151-b8491531f063?auto=format&fit=crop&w=2000&q=85');\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 w-full py-20\">\r\n <div class=\"max-w-[690px]\">\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-5\">DJ \u00e9v\u00e9nementiel \u00b7 Lyon & Rh\u00f4ne-Alpes<\/div>\r\n <h1 class=\"text-4xl sm:text-6xl lg:text-[72px] font-bold leading-[1.08] mb-6\">\r\n Vos \u00e9v\u00e9nements.<br>\r\n Votre \u00e9quipe.<br>\r\n <em class=\"not-italic text-gold\">Une \u00e9nergie unique.<\/em>\r\n <\/h1>\r\n <p class=\"text-base sm:text-lg text-slate-300 max-w-[580px] mb-8 leading-relaxed\">\r\n Une ambiance musicale pens\u00e9e pour votre entreprise. Des s\u00e9minaires f\u00e9d\u00e9rateurs aux soir\u00e9es professionnelles, Lyon-DJ accompagne vos temps forts avec justesse et \u00e9nergie.\r\n <\/p>\r\n <div class=\"flex flex-wrap gap-3\">\r\n <a href=\"#ld-contact\" class=\"ld-btn\">PARLONS DE VOTRE \u00c9V\u00c9NEMENT \u2197<\/a>\r\n <a href=\"#ld-prestations\" class=\"ld-btn ghost\">D\u00c9COUVRIR LES PRESTATIONS<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"bg-[#0d1117] border-b border-line\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 py-6 grid grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"flex items-center gap-3 text-sm text-slate-200\">\r\n <span class=\"text-gold text-2xl font-serif\">\u266b<\/span>\r\n <span class=\"leading-tight\">Une programmation<br><strong class=\"font-normal text-slate-400\">adapt\u00e9e \u00e0 votre public<\/strong><\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-200\">\r\n <span class=\"text-gold text-2xl\">\u2667<\/span>\r\n <span class=\"leading-tight\">Une ambiance<br><strong class=\"font-normal text-slate-400\">qui rassemble<\/strong><\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-200\">\r\n <span class=\"text-gold text-2xl\">\u2727<\/span>\r\n <span class=\"leading-tight\">Son & lumi\u00e8re<br><strong class=\"font-normal text-slate-400\">professionnels<\/strong><\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-200\">\r\n <span class=\"text-gold text-2xl\">\u2316<\/span>\r\n <span class=\"leading-tight\">Lyon et r\u00e9gion<br><strong class=\"font-normal text-slate-400\">Rh\u00f4ne-Alpes<\/strong><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-prestations\" class=\"bg-[#f4efe6] text-[#151820] py-20 lg:py-24\">\r\n <div class=\"max-w-[1160px] mx-auto px-5\">\r\n <div class=\"flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-12\">\r\n <div>\r\n <div class=\"text-xs uppercase font-bold text-amber-800 tracking-[0.2em] mb-3\">Nos prestations<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold max-w-[650px] leading-tight\">Le bon tempo pour chaque moment professionnel.<\/h2>\r\n <\/div>\r\n <p class=\"text-slate-600 max-w-[420px] text-sm sm:text-base leading-relaxed\">\r\n Chaque \u00e9v\u00e9nement a son objectif. Nous adaptons la s\u00e9lection musicale, le rythme et l'ambiance \u00e0 votre format, votre \u00e9quipe et votre lieu.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n \r\n <article class=\"ld-card min-h-[320px] p-8 flex flex-col justify-end rounded-md border border-white\/10 text-white overflow-hidden\" style=\"--card-img:url('https:\/\/images.unsplash.com\/photo-1511578314322-379afb476865?auto=format&fit=crop&w=900&q=80')\">\r\n <span class=\"text-gold text-2xl mb-auto\">\u2726<\/span>\r\n <h3 class=\"text-2xl font-bold mb-2\">S\u00e9minaires<\/h3>\r\n <p class=\"text-sm text-slate-300\">Accompagner les temps d'accueil, les pauses et les moments de convivialit\u00e9 avec une ambiance musicale ma\u00eetris\u00e9e.<\/p>\r\n <\/article>\r\n \r\n \r\n <article class=\"ld-card min-h-[320px] p-8 flex flex-col justify-end rounded-md border border-white\/10 text-white overflow-hidden\" style=\"--card-img:url('https:\/\/images.unsplash.com\/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=900&q=80')\">\r\n <span class=\"text-gold text-2xl mb-auto\">\u2667<\/span>\r\n <h3 class=\"text-2xl font-bold mb-2\">Team building<\/h3>\r\n <p class=\"text-sm text-slate-300\">Cr\u00e9er une atmosph\u00e8re f\u00e9d\u00e9ratrice qui encourage les \u00e9changes, la coh\u00e9sion et le plaisir d'\u00eatre ensemble.<\/p>\r\n <\/article>\r\n\r\n \r\n <article class=\"ld-card min-h-[320px] p-8 flex flex-col justify-end rounded-md border border-white\/10 text-white overflow-hidden\" style=\"--card-img:url('https:\/\/images.unsplash.com\/photo-1506157786151-b8491531f063?auto=format&fit=crop&w=900&q=80')\">\r\n <span class=\"text-gold text-2xl mb-auto\">\u266b<\/span>\r\n <h3 class=\"text-2xl font-bold mb-2\">Soir\u00e9es d'entreprise<\/h3>\r\n <p class=\"text-sm text-slate-300\">Une programmation \u00e9volutive, du cocktail au dancefloor, en accord avec votre culture et vos invit\u00e9s.<\/p>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-approche\" class=\"py-20 lg:py-24\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center\">\r\n <div class=\"min-h-[380px] sm:min-h-[460px] rounded bg-cover bg-center border border-line\" style=\"background-image: linear-gradient(0deg, rgba(4,7,12,0.25), transparent), url('https:\/\/images.unsplash.com\/photo-1571266028243-d220c9c3b7f8?auto=format&fit=crop&w=1200&q=85');\" role=\"img\" aria-label=\"Ambiance musicale lors d'un \u00e9v\u00e9nement\"><\/div>\r\n <div>\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-3\">L'approche Lyon-DJ<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold mb-6 leading-tight\">Plus qu'une playlist : une ambiance qui vous ressemble.<\/h2>\r\n <p class=\"text-slate-400 mb-6 leading-relaxed\">\r\n Un \u00e9v\u00e9nement r\u00e9ussi ne se r\u00e9sume pas au volume sonore. Il s'agit de comprendre le public, de respecter les temps forts et de trouver le bon \u00e9quilibre entre \u00e9l\u00e9gance, convivialit\u00e9 et \u00e9nergie.\r\n <\/p>\r\n <div class=\"space-y-3 mb-8 text-sm text-slate-200\">\r\n <div class=\"flex items-start gap-3\"><span class=\"text-gold font-bold\">\u2713<\/span> <span>\u00c9change pr\u00e9alable sur vos attentes et le d\u00e9roul\u00e9<\/span><\/div>\r\n <div class=\"flex items-start gap-3\"><span class=\"text-gold font-bold\">\u2713<\/span> <span>S\u00e9lection musicale adapt\u00e9e \u00e0 votre public<\/span><\/div>\r\n <div class=\"flex items-start gap-3\"><span class=\"text-gold font-bold\">\u2713<\/span> <span>Coordination avec votre \u00e9quipe et le lieu<\/span><\/div>\r\n <div class=\"flex items-start gap-3\"><span class=\"text-gold font-bold\">\u2713<\/span> <span>Sonorisation et \u00e9clairage selon les besoins convenus<\/span><\/div>\r\n <\/div>\r\n <a href=\"#ld-contact\" class=\"ld-btn\">\u00c9CHANGEONS SUR VOTRE PROJET \u2197<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-galerie\" class=\"bg-[#f4efe6] text-[#151820] py-20 lg:py-24\">\r\n <div class=\"max-w-[1160px] mx-auto px-5\">\r\n <div class=\"flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-12\">\r\n <div>\r\n <div class=\"text-xs uppercase font-bold text-amber-800 tracking-[0.2em] mb-3\">En images<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold max-w-[650px] leading-tight\">DJ d'entreprise \u00e0 Lyon : conseils pour r\u00e9ussir votre \u00e9v\u00e9nement.<\/h2>\r\n <\/div>\r\n <p class=\"text-slate-600 max-w-[420px] text-sm sm:text-base leading-relaxed\">\r\n Choisissez un prestataire qui comprend votre format, vos contraintes et l'image de votre entreprise.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n <div class=\"overflow-hidden rounded group shadow-md\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=800&q=80\" alt=\"Ambiance musicale et lumi\u00e8res de soir\u00e9e\" class=\"w-full h-[240px] object-cover filter saturate-80 group-hover:saturate-110 group-hover:scale-105 transition duration-500\">\r\n <\/div>\r\n <div class=\"overflow-hidden rounded group shadow-md\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517457373958-b7ffb1e9e2e3?auto=format&fit=crop&w=800&q=80\" alt=\"Rencontre professionnelle\" class=\"w-full h-[240px] object-cover filter saturate-80 group-hover:saturate-110 group-hover:scale-105 transition duration-500\">\r\n <\/div>\r\n <div class=\"overflow-hidden rounded group shadow-md sm:col-span-2 lg:col-span-1\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=800&q=80\" alt=\"\u00c9v\u00e9nement et public\" class=\"w-full h-[240px] object-cover filter saturate-80 group-hover:saturate-110 group-hover:scale-105 transition duration-500\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-guide\" class=\"bg-[#0d1117] py-20 lg:py-24 border-t border-line\">\r\n <div class=\"max-w-[1160px] mx-auto px-5\">\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-3\">Le guide pratique<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold mb-8\">DJ d'entreprise \u00e0 Lyon : prestations, mat\u00e9riel et prix<\/h2>\r\n \r\n <div class=\"prose prose-invert max-w-none text-slate-300 space-y-6 text-sm sm:text-base leading-relaxed\">\r\n <p>\r\n Choisir un DJ pour une entreprise, c'est trouver le bon \u00e9quilibre entre ambiance musicale, fiabilit\u00e9 technique et respect de l'image de marque. Pour un s\u00e9minaire, un team building ou une soir\u00e9e professionnelle \u00e0 Lyon et en Rh\u00f4ne-Alpes, le format de l'\u00e9v\u00e9nement et les attentes des participants doivent guider la pr\u00e9paration.\r\n <\/p>\r\n <p>\r\n Le budget d\u00e9pend notamment de la dur\u00e9e, du lieu, du nombre de participants, des besoins de sonorisation et d'\u00e9clairage, des animations \u00e9ventuelles et des d\u00e9placements. Le plus utile est de comparer des devis d\u00e9taill\u00e9s \u00e9tablis sur le m\u00eame p\u00e9rim\u00e8tre.\r\n <\/p>\r\n\r\n <h3 class=\"text-2xl font-bold text-white pt-4\">Comment choisir et comparer les devis ?<\/h3>\r\n <p>\r\n Avant de confirmer votre prestataire, \u00e9changez sur le d\u00e9roul\u00e9 de l'\u00e9v\u00e9nement, les contraintes du lieu et l'ambiance recherch\u00e9e. V\u00e9rifiez l'exp\u00e9rience sur des \u00e9v\u00e9nements professionnels, les r\u00e9f\u00e9rences disponibles, l'assurance responsabilit\u00e9 civile professionnelle, les horaires r\u00e9els de pr\u00e9sence et les frais \u00e9ventuels.\r\n <\/p>\r\n <ul class=\"list-disc pl-6 space-y-2 text-slate-400\">\r\n <li>Exp\u00e9rience et compr\u00e9hension des \u00e9v\u00e9nements corporate.<\/li>\r\n <li>Qualit\u00e9 et ad\u00e9quation du mat\u00e9riel audio et lumineux.<\/li>\r\n <li>Horaires d'installation, de prestation et de d\u00e9montage.<\/li>\r\n <li>Frais de d\u00e9placement et co\u00fbt des heures suppl\u00e9mentaires.<\/li>\r\n <li>Gestion des prises de parole, des annonces et des impr\u00e9vus.<\/li>\r\n <li>Conditions de r\u00e9servation, contrat et acompte.<\/li>\r\n <\/ul>\r\n <p>\r\n Un devis clair doit pr\u00e9ciser ce qui est inclus et les options \u00e9ventuelles. Un \u00e9change t\u00e9l\u00e9phonique en amont permet aussi de v\u00e9rifier que le style de communication et l'approche correspondent \u00e0 votre \u00e9quipe.\r\n <\/p>\r\n\r\n <h3 class=\"text-2xl font-bold text-white pt-4\">Sonorisation, \u00e9clairage et mat\u00e9riel<\/h3>\r\n <p>\r\n La configuration technique doit \u00eatre dimensionn\u00e9e au lieu et au nombre d'invit\u00e9s. Selon le cahier des charges, une prestation peut n\u00e9cessiter des enceintes adapt\u00e9es \u00e0 la salle, une r\u00e9gie DJ, des micros pour les discours et un \u00e9clairage d'ambiance ou de piste.\r\n <\/p>\r\n\r\n \r\n <div class=\"overflow-x-auto my-6 border border-line rounded\">\r\n <table class=\"w-full text-left text-sm\">\r\n <thead class=\"bg-white\/5 border-b border-line text-gold font-bold\">\r\n <tr>\r\n <th class=\"p-4\">\u00c9quipement \u00e0 pr\u00e9voir<\/th>\r\n <th class=\"p-4\">Utilit\u00e9<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody class=\"divide-y divide-line text-slate-300\">\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">Sonorisation adapt\u00e9e<\/td>\r\n <td class=\"p-4\">Diffusion claire, adapt\u00e9e au volume de la salle et au public.<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">R\u00e9gie et table de mixage<\/td>\r\n <td class=\"p-4\">Gestion des sources et transitions musicales.<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">Microphone sans fil<\/td>\r\n <td class=\"p-4\">Discours, interventions et annonces.<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">\u00c9clairage LED<\/td>\r\n <td class=\"p-4\">Ambiance visuelle et mise en valeur de l'espace.<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"p-4 font-semibold text-white\">\u00c9l\u00e9ments de mise en lumi\u00e8re<\/td>\r\n <td class=\"p-4\">\u00c0 d\u00e9finir selon le lieu, les besoins et les contraintes techniques.<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <h3 class=\"text-2xl font-bold text-white pt-4\">Quel budget pr\u00e9voir pour un DJ d'entreprise \u00e0 Lyon ?<\/h3>\r\n <p>\r\n Le document de travail fourni indique un rep\u00e8re de d\u00e9part autour de <strong>750 \u20ac HT<\/strong> et une fourchette de <strong>750 \u00e0 1 500 \u20ac HT<\/strong> pour une soir\u00e9e compl\u00e8te. Ces montants sont indicatifs et ne constituent ni un tarif confirm\u00e9 de Lyon-DJ ni une \u00e9tude de march\u00e9 v\u00e9rifi\u00e9e. Le prix r\u00e9el doit \u00eatre \u00e9tabli selon la dur\u00e9e, le lieu, les besoins techniques, les d\u00e9placements et les animations demand\u00e9es.\r\n <\/p>\r\n\r\n <h3 class=\"text-2xl font-bold text-white pt-4\">Team building, cocktail, d\u00eener et soir\u00e9e dansante<\/h3>\r\n <p>\r\n La musique peut accompagner plusieurs moments d'un \u00e9v\u00e9nement professionnel :\r\n <\/p>\r\n <ul class=\"list-disc pl-6 space-y-2 text-slate-400\">\r\n <li><strong class=\"text-slate-200\">Blind test musical :<\/strong> un jeu par \u00e9quipes autour de titres ou de th\u00e8mes choisis.<\/li>\r\n <li><strong class=\"text-slate-200\">Quiz musical :<\/strong> une animation interactive \u00e0 adapter au nombre de participants et au planning.<\/li>\r\n <li><strong class=\"text-slate-200\">Animation micro :<\/strong> annonces et transitions, selon le r\u00f4le convenu avec l'organisateur.<\/li>\r\n <li><strong class=\"text-slate-200\">Soir\u00e9e dansante :<\/strong> une programmation \u00e9volutive selon les r\u00e9actions du public.<\/li>\r\n <\/ul>\r\n\r\n \r\n <div class=\"pt-8\">\r\n <h3 class=\"text-2xl font-bold text-white mb-6\">Questions fr\u00e9quentes<\/h3>\r\n <div class=\"space-y-4 border-t border-line\">\r\n \r\n <details class=\"group py-4 border-b border-line cursor-pointer\">\r\n <summary class=\"flex justify-between items-center font-bold text-white text-base\">\r\n <span>Combien co\u00fbte un DJ pour une soir\u00e9e d'entreprise \u00e0 Lyon ?<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-gold text-xs transition-transform duration-300\"><\/i>\r\n <\/summary>\r\n <p class=\"mt-3 text-slate-400 text-sm leading-relaxed\">\r\n Le prix d\u00e9pend de la dur\u00e9e, du lieu, du mat\u00e9riel, des horaires et des animations. Le document fourni cite 750 \u00e0 1 500 \u20ac HT comme rep\u00e8re indicatif pour une soir\u00e9e compl\u00e8te, \u00e0 confirmer par des devis actuels et selon le p\u00e9rim\u00e8tre exact.\r\n <\/p>\r\n <\/details>\r\n\r\n <details class=\"group py-4 border-b border-line cursor-pointer\">\r\n <summary class=\"flex justify-between items-center font-bold text-white text-base\">\r\n <span>Peut-on pr\u00e9voir un DJ pour un s\u00e9minaire en journ\u00e9e ?<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-gold text-xs transition-transform duration-300\"><\/i>\r\n <\/summary>\r\n <p class=\"mt-3 text-slate-400 text-sm leading-relaxed\">\r\n Oui, selon le format d\u00e9fini : accueil musical, pauses, cocktail ou temps convivial. Pr\u00e9cisez le planning et les contraintes sonores du lieu lors de la demande de devis.\r\n <\/p>\r\n <\/details>\r\n\r\n <details class=\"group py-4 border-b border-line cursor-pointer\">\r\n <summary class=\"flex justify-between items-center font-bold text-white text-base\">\r\n <span>Un blind test est-il adapt\u00e9 au team building ?<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-gold text-xs transition-transform duration-300\"><\/i>\r\n <\/summary>\r\n <p class=\"mt-3 text-slate-400 text-sm leading-relaxed\">\r\n Un blind test ou un quiz musical peut proposer un moment participatif. Le format doit \u00eatre adapt\u00e9 au nombre d'\u00e9quipes, \u00e0 la dur\u00e9e disponible et au niveau d'interaction souhait\u00e9.\r\n <\/p>\r\n <\/details>\r\n\r\n <details class=\"group py-4 border-b border-line cursor-pointer\">\r\n <summary class=\"flex justify-between items-center font-bold text-white text-base\">\r\n <span>Quand contacter le DJ ?<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-gold text-xs transition-transform duration-300\"><\/i>\r\n <\/summary>\r\n <p class=\"mt-3 text-slate-400 text-sm leading-relaxed\">\r\n Le plus t\u00f4t possible, surtout si la date et le lieu sont d\u00e9j\u00e0 fix\u00e9s. Les disponibilit\u00e9s et d\u00e9lais de pr\u00e9paration sont \u00e0 confirmer directement avec le prestataire.\r\n <\/p>\r\n <\/details>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-6\">\r\n <a href=\"#ld-contact\" class=\"ld-btn\">DEMANDER UN DEVIS POUR MON \u00c9V\u00c9NEMENT \u2197<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"ld-contact\" class=\"bg-panel py-20 lg:py-24 relative overflow-hidden\" style=\"background-image: radial-gradient(ellipse at 80% 10%, rgba(125,86,180,0.19), transparent 35%);\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 grid grid-cols-1 lg:grid-cols-12 gap-10 items-center\">\r\n <div class=\"lg:col-span-7\">\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-3\">Votre prochain \u00e9v\u00e9nement commence ici<\/div>\r\n <h2 class=\"text-3xl sm:text-5xl font-bold mb-4 leading-tight\">Parlons de votre projet.<\/h2>\r\n <p class=\"text-slate-400 text-base leading-relaxed max-w-[540px]\">\r\n Indiquez-nous la date, le lieu et le format de votre \u00e9v\u00e9nement. Nous pourrons \u00e9changer sur vos besoins et pr\u00e9parer une proposition adapt\u00e9e.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"lg:col-span-5 bg-white\/[0.025] border border-line p-8 rounded-lg shadow-2xl\">\r\n <div class=\"text-xs uppercase font-bold text-gold tracking-[0.2em] mb-2\">Contact direct<\/div>\r\n <p class=\"text-slate-300 text-sm\">Un premier \u00e9change, simplement.<\/p>\r\n \r\n <a href=\"tel:+33770012886\" class=\"font-heading text-3xl sm:text-4xl font-extrabold text-gold my-4 block hover:underline\">\r\n 07 70 01 28 86\r\n <\/a>\r\n\r\n <div class=\"flex flex-wrap gap-3\">\r\n <a href=\"tel:+33770012886\" class=\"ld-btn\">APPELER LYON-DJ \u2197<\/a>\r\n <a href=\"https:\/\/wa.me\/33770012886\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"ld-btn ghost\">WHATSAPP<\/a>\r\n <\/div>\r\n\r\n <p class=\"text-xs text-slate-500 mt-6 pt-4 border-t border-line\">\r\n <i class=\"fa-solid fa-circle-info mr-1 text-gold\"><\/i>\r\n Pour int\u00e9grer un formulaire Elementor Pro, glissez simplement le widget <strong>Form<\/strong> dans ce bloc.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n \r\n <footer class=\"border-t border-line py-8 text-xs text-slate-400\">\r\n <div class=\"max-w-[1160px] mx-auto px-5 flex flex-wrap justify-between items-center gap-4\">\r\n <span class=\"font-heading font-extrabold text-white tracking-widest text-base\">LYON<span class=\"text-gold\">\u2014<\/span>DJ<\/span>\r\n <span>DJ \u00e9v\u00e9nementiel pour entreprises \u00b7 Lyon & Rh\u00f4ne-Alpes<\/span>\r\n <span>\u00a9 <span id=\"ld-year\">2026<\/span> Lyon-DJ<\/span>\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n \r\n <button onclick=\"toggleElementorModal()\" class=\"fixed bottom-6 right-6 z-40 bg-gold hover:bg-amber-300 text-slate-950 p-4 rounded-full shadow-2xl transition transform hover:scale-105 flex items-center justify-center group\" title=\"Ouvrir le Kit Elementor\">\r\n <i class=\"fa-solid fa-layer-group text-xl\"><\/i>\r\n <span class=\"max-w-0 overflow-hidden whitespace-nowrap group-hover:max-w-xs transition-all duration-300 ease-in-out font-bold text-xs ml-0 group-hover:ml-2\">\r\n Kit Elementor\r\n <\/span>\r\n <\/button>\r\n\r\n \r\n <div id=\"elementor-modal\" class=\"fixed inset-0 bg-black\/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4\">\r\n <div class=\"bg-[#11161e] border border-line rounded-xl max-w-4xl w-full max-h-[90vh] flex flex-col shadow-2xl overflow-hidden\">\r\n \r\n \r\n <div class=\"p-6 border-b border-line flex justify-between items-center bg-[#090c11]\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-gold\/10 p-2 rounded text-gold\">\r\n <i class=\"fa-solid fa-cubes text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold text-white\">Kit d'Int\u00e9gration Elementor Pro<\/h3>\r\n <p class=\"text-xs text-slate-400\">Guide pas-\u00e0-pas et variables pour reproduire Lyon-DJ sur WordPress<\/p>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"toggleElementorModal()\" class=\"text-slate-400 hover:text-white p-2 text-xl\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex border-b border-line bg-[#0d1117] px-6 text-xs font-semibold overflow-x-auto\">\r\n <button onclick=\"switchTab('tab-tokens')\" id=\"btn-tab-tokens\" class=\"tab-btn py-3 px-4 text-gold border-b-2 border-gold font-bold\">1. Tokens & Couleurs<\/button>\r\n <button onclick=\"switchTab('tab-structure')\" id=\"btn-tab-structure\" class=\"tab-btn py-3 px-4 text-slate-400 hover:text-white\">2. Structure des Widgets<\/button>\r\n <button onclick=\"switchTab('tab-code')\" id=\"btn-tab-code\" class=\"tab-btn py-3 px-4 text-slate-400 hover:text-white\">3. Code HTML\/CSS Pr\u00eat<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-6 overflow-y-auto space-y-6 flex-1 text-sm\">\r\n \r\n \r\n <div id=\"tab-tokens\" class=\"tab-content space-y-6\">\r\n <div>\r\n <h4 class=\"font-bold text-white mb-2 text-base\">Couleurs globales Elementor (Site Settings)<\/h4>\r\n <p class=\"text-xs text-slate-400 mb-4\">Ajoutez ces codes hexad\u00e9cimaux dans : <em>R\u00e9glages du site > Couleurs globales<\/em><\/p>\r\n \r\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-3\">\r\n <div class=\"p-3 bg-[#090c11] border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-slate-400\">Fond (--bg)<\/div>\r\n <div class=\"font-mono font-bold text-white\">#090c11<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#090c11')\" class=\"text-xs bg-white\/5 hover:bg-white\/10 px-2 py-1 rounded text-slate-300\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#11161e] border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-slate-400\">Panneaux (--panel)<\/div>\r\n <div class=\"font-mono font-bold text-white\">#11161e<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#11161e')\" class=\"text-xs bg-white\/5 hover:bg-white\/10 px-2 py-1 rounded text-slate-300\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#e9c58f] text-black border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-black\/70 font-semibold\">Or Accent (--gold)<\/div>\r\n <div class=\"font-mono font-bold\">#e9c58f<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#e9c58f')\" class=\"text-xs bg-black\/10 hover:bg-black\/20 px-2 py-1 rounded font-bold\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#f4efe6] text-black border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-black\/70 font-semibold\">Cr\u00e8me Texte (--cream)<\/div>\r\n <div class=\"font-mono font-bold\">#f4efe6<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#f4efe6')\" class=\"text-xs bg-black\/10 hover:bg-black\/20 px-2 py-1 rounded font-bold\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#b6bdc8] text-black border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-black\/70 font-semibold\">Texte Secondaire<\/div>\r\n <div class=\"font-mono font-bold\">#b6bdc8<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#b6bdc8')\" class=\"text-xs bg-black\/10 hover:bg-black\/20 px-2 py-1 rounded font-bold\">Copier<\/button>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-[#0d1117] border border-line rounded flex items-center justify-between\">\r\n <div>\r\n <div class=\"text-xs text-slate-400\">Cartes\/Gris Fonce<\/div>\r\n <div class=\"font-mono font-bold text-white\">#0d1117<\/div>\r\n <\/div>\r\n <button onclick=\"copyToClipboard('#0d1117')\" class=\"text-xs bg-white\/5 hover:bg-white\/10 px-2 py-1 rounded text-slate-300\">Copier<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-4 border-t border-line\">\r\n <h4 class=\"font-bold text-white mb-2 text-base\">Polices de caract\u00e8res Google Fonts<\/h4>\r\n <ul class=\"space-y-2 text-xs text-slate-300\">\r\n <li><strong>Titres (H1, H2, H3, Logos) :<\/strong> <code class=\"text-gold\">Manrope<\/code> (Graisses : 700, 800) avec lettre-spacing serr\u00e9 (-0.04em).<\/li>\r\n <li><strong>Corps de texte :<\/strong> <code class=\"text-gold\">DM Sans<\/code> (Graisses : 400, 500) avec hauteur de ligne \u00e0 1.7.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-structure\" class=\"tab-content hidden space-y-4\">\r\n <h4 class=\"font-bold text-white text-base\">Guide de reconstruction section par section dans Elementor<\/h4>\r\n \r\n <div class=\"space-y-3 text-xs\">\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">1. En-t\u00eate (Header Elementor Pro)<\/strong>\r\n <p class=\"text-slate-300\">Cr\u00e9er un conteneur Flexbox horizontal (Direction: Row, Justify: Space-Between). Ajouter un widget Site Logo\/Titre, un widget Menu de Navigation (masqu\u00e9 sur mobile), et un widget Bouton avec lien vers #ld-contact.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">2. Section Hero<\/strong>\r\n <p class=\"text-slate-300\">Conteneur plein \u00e9cran. Image de fond Unsplash avec Overlay de d\u00e9grad\u00e9 sombre (<code class=\"text-gold\">linear-gradient<\/code>). Ajouter un Titre H1 avec balise <code class=\"text-gold\"><em><\/code> pour la touche Or, un \u00c9diteur de Texte, et une grille interne pour les 2 boutons CTA.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">3. Grille de Preuves (Proof Grid)<\/strong>\r\n <p class=\"text-slate-300\">Conteneur avec fond <code class=\"text-gold\">#0d1117<\/code> et 4 colonnes (2 colonnes sur mobile). Utiliser 4 widgets <em>Icon Box<\/em> ou de simples blocs texte avec les ic\u00f4nes dor\u00e9es.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">4. Section Prestations (Cartes d'\u00e9v\u00e9nements)<\/strong>\r\n <p class=\"text-slate-300\">Fond clair <code class=\"text-gold\">#f4efe6<\/code>. Grille de 3 Conteneurs. Pour chaque carte, appliquer une image en arri\u00e8re-plan avec overlay noir \u00e0 80%, et ins\u00e9rer le titre et le texte en bas (flex-end).<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">5. Section FAQ (Guide SEO)<\/strong>\r\n <p class=\"text-slate-300\">Utilisez le widget <strong>Accordion<\/strong> natif d'Elementor. Configurez la couleur du titre en blanc, le texte en gris <code class=\"text-gold\">#b6bdc8<\/code> et les bordures l\u00e9g\u00e8res.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 bg-white\/5 rounded border border-line\">\r\n <strong class=\"text-gold text-sm block mb-1\">6. Bloc Contact<\/strong>\r\n <p class=\"text-slate-300\">Disposition 2 colonnes (7\/5). Dans la colonne de droite, ins\u00e9rez un widget <strong>Form<\/strong> d'Elementor Pro pour le formulaire de demande de devis personnalis\u00e9.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-code\" class=\"tab-content hidden space-y-4\">\r\n <div class=\"flex justify-between items-center\">\r\n <h4 class=\"font-bold text-white text-base\">Snippet HTML\/CSS Complet pour Widget Elementor<\/h4>\r\n <button onclick=\"copySnippet()\" class=\"bg-gold hover:bg-amber-300 text-black px-3 py-1.5 rounded font-bold text-xs flex items-center gap-1\">\r\n <i class=\"fa-regular fa-copy\"><\/i> Copier tout le code\r\n <\/button>\r\n <\/div>\r\n <p class=\"text-xs text-slate-400\">Collez ce code directement dans un widget **HTML** d'Elementor si vous souhaitez importer l'exact m\u00eame design en un clic sur n'importe quelle page WordPress !<\/p>\r\n\r\n <div class=\"relative\">\r\n <textarea id=\"code-snippet\" readonly class=\"w-full h-64 bg-black\/80 text-emerald-400 font-mono text-xs p-4 rounded border border-line focus:outline-none select-all\" spellcheck=\"false\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"p-4 border-t border-line bg-[#090c11] flex justify-between items-center text-xs\">\r\n <span class=\"text-slate-400\">Inspiration Kit Elementor v2 - Lyon-DJ<\/span>\r\n <button onclick=\"toggleElementorModal()\" class=\"bg-white\/10 hover:bg-white\/20 text-white font-bold px-4 py-2 rounded\">\r\n Fermer\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"toast\" class=\"fixed bottom-6 left-6 z-50 bg-emerald-500 text-slate-950 font-bold px-4 py-3 rounded-lg shadow-2xl flex items-center gap-2 text-sm\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n <span id=\"toast-message\">Copi\u00e9 dans le presse-papier !<\/span>\r\n <\/div>\r\n\r\n \r\n <script>\r\n \/\/ Update Current Year\r\n document.getElementById('ld-year').textContent = new Date().getFullYear();\r\n\r\n \/\/ Mobile Menu Toggle\r\n function toggleMobileMenu() {\r\n const menu = document.getElementById('mobile-menu');\r\n const icon = document.getElementById('mobile-menu-icon');\r\n menu.classList.toggle('hidden');\r\n menu.classList.toggle('flex');\r\n \r\n if (menu.classList.contains('flex')) {\r\n icon.classList.remove('fa-bars');\r\n icon.classList.add('fa-xmark');\r\n } else {\r\n icon.classList.remove('fa-xmark');\r\n icon.classList.add('fa-bars');\r\n }\r\n }\r\n\r\n \/\/ Elementor Modal Toggle\r\n function toggleElementorModal() {\r\n const modal = document.getElementById('elementor-modal');\r\n modal.classList.toggle('hidden');\r\n \r\n \/\/ Populate code snippet area when modal opens\r\n if(!modal.classList.contains('hidden')) {\r\n const htmlContent = document.getElementById('lyondj').outerHTML;\r\n document.getElementById('code-snippet').value = htmlContent;\r\n }\r\n }\r\n\r\n \/\/ Modal Tab Switching\r\n function switchTab(tabId) {\r\n document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));\r\n document.querySelectorAll('.tab-btn').forEach(btn => {\r\n btn.classList.remove('text-gold', 'border-b-2', 'border-gold', 'font-bold');\r\n btn.classList.add('text-slate-400');\r\n });\r\n\r\n document.getElementById(tabId).classList.remove('hidden');\r\n const activeBtn = document.getElementById('btn-' + tabId);\r\n activeBtn.classList.add('text-gold', 'border-b-2', 'border-gold', 'font-bold');\r\n activeBtn.classList.remove('text-slate-400');\r\n }\r\n\r\n \/\/ Copy Helper\r\n function copyToClipboard(text) {\r\n \/\/ Using standard execCommand fallback or Clipboard API\r\n if (navigator.clipboard && window.isSecureContext) {\r\n navigator.clipboard.writeText(text);\r\n } else {\r\n const textarea = document.createElement('textarea');\r\n textarea.value = text;\r\n document.body.appendChild(textarea);\r\n textarea.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(textarea);\r\n }\r\n showToast('Code ' + text + ' copi\u00e9 !');\r\n }\r\n\r\n function copySnippet() {\r\n const snippetTextarea = document.getElementById('code-snippet');\r\n snippetTextarea.select();\r\n document.execCommand('copy');\r\n showToast('Code HTML Elementor copi\u00e9 avec succ\u00e8s !');\r\n }\r\n\r\n \/\/ Show Toast Function\r\n function showToast(msg) {\r\n const toast = document.getElementById('toast');\r\n document.getElementById('toast-message').textContent = msg;\r\n toast.classList.add('show');\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 3000);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lyon-DJ \u00b7 DJ \u00c9v\u00e9nementiel & Kit Elementor MOD\u00c8LE ELEMENTOR Aper\u00e7u interactif & Kit de conversion WordPress \/ Elementor Guide & Snippets Elementor LYON\u2014DJ Prestations Notre approche Galerie Guide pratique Contact DEMANDER UN DEVIS Prestations Notre approche Galerie Guide pratique Contact DEMANDER UN DEVIS \u2197 DJ \u00e9v\u00e9nementiel \u00b7 Lyon & Rh\u00f4ne-Alpes Vos \u00e9v\u00e9nements. Votre \u00e9quipe. Une […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":16,"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":33,"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/33"}],"wp:attachment":[{"href":"http:\/\/www.lyon-dj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}