SILENZAR \u2014 Musique Originale Pour L’Image<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --gold: #f0a500;\n --gold-light: #ffc533;\n --black: #050505;\n --dark: #111111;\n --card: #161616;\n --border: #2a2a2a;\n --white: #ffffff;\n --gray: #888888;\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n background: var(--black);\n color: var(--white);\n font-family: 'Inter', sans-serif;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\n nav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 60px;\n height: 72px;\n background: rgba(5,5,5,0.92);\n backdrop-filter: blur(12px);\n border-bottom: 1px solid rgba(240,165,0,0.08);\n }\n\n .logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n letter-spacing: 4px;\n color: var(--white);\n text-decoration: none;\n }\n .logo span { color: var(--gold); }\n\n .nav-links {\n display: flex;\n gap: 36px;\n list-style: none;\n }\n .nav-links a {\n color: #aaa;\n text-decoration: none;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n transition: color .2s;\n }\n .nav-links a:hover { color: var(--white); }\n\n .btn-nav {\n background: transparent;\n border: 1.5px solid var(--gold);\n color: var(--gold);\n padding: 10px 22px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n cursor: pointer;\n transition: background .2s, color .2s;\n text-decoration: none;\n }\n .btn-nav:hover { background: var(--gold); color: var(--black); }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n .hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n padding: 100px 60px 60px;\n position: relative;\n overflow: hidden;\n background: radial-gradient(ellipse at 70% 50%, rgba(240,165,0,0.06) 0%, transparent 60%),\n radial-gradient(ellipse at 20% 80%, rgba(240,165,0,0.03) 0%, transparent 50%),\n var(--black);\n }\n\n .hero-bg-z {\n position: absolute;\n right: 5%;\n top: 50%;\n transform: translateY(-50%);\n width: 500px;\n height: 500px;\n opacity: 0.15;\n pointer-events: none;\n }\n\n .hero-content { max-width: 580px; position: relative; z-index: 2; }\n\n .hero-eyebrow {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 20px;\n }\n\n .hero-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(56px, 8vw, 90px);\n line-height: 0.95;\n letter-spacing: 2px;\n color: var(--white);\n margin-bottom: 28px;\n }\n\n .hero-desc {\n font-size: 15px;\n line-height: 1.7;\n color: #999;\n max-width: 420px;\n margin-bottom: 40px;\n }\n\n .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }\n\n .btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--gold);\n color: var(--black);\n padding: 14px 28px;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: background .2s, transform .15s;\n text-decoration: none;\n }\n .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }\n\n .btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: transparent;\n color: var(--white);\n padding: 14px 28px;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n border: 1.5px solid #333;\n cursor: pointer;\n transition: border-color .2s, color .2s;\n text-decoration: none;\n }\n .btn-secondary:hover { border-color: var(--gold); color: var(--gold); }\n\n \/* Waveform anim\u00e9e *\/\n .waveform-hero {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 55%;\n height: 300px;\n display: flex;\n align-items: center;\n gap: 3px;\n padding: 0 60px;\n opacity: 0.4;\n pointer-events: none;\n }\n\n .wave-bar {\n flex: 1;\n border-radius: 2px;\n background: linear-gradient(to top, var(--gold), rgba(240,165,0,0.3));\n animation: wavePulse var(--dur) ease-in-out infinite alternate;\n animation-delay: var(--delay);\n }\n\n @keyframes wavePulse {\n 0% { height: 8%; }\n 100% { height: var(--max-h); }\n }\n\n \/* \u2500\u2500 FEATURES BAR \u2500\u2500 *\/\n .features-bar {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n border-top: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n }\n\n .feature-item {\n display: flex;\n gap: 18px;\n align-items: flex-start;\n padding: 36px 40px;\n border-right: 1px solid var(--border);\n }\n .feature-item:last-child { border-right: none; }\n\n .feature-icon {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1.5px solid var(--gold);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--gold);\n flex-shrink: 0;\n font-size: 18px;\n }\n\n .feature-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--white);\n margin-bottom: 8px;\n }\n .feature-desc { font-size: 13px; color: #777; line-height: 1.6; }\n\n \/* \u2500\u2500 AUDIO PLAYER \u2500\u2500 *\/\n .player-section {\n background: var(--dark);\n padding: 80px 60px;\n border-bottom: 1px solid var(--border);\n }\n\n .section-label {\n text-align: center;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 10px;\n }\n\n .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(32px, 5vw, 52px);\n text-align: center;\n letter-spacing: 3px;\n margin-bottom: 60px;\n }\n\n .player-container {\n max-width: 800px;\n margin: 0 auto;\n background: var(--card);\n border: 1px solid var(--border);\n overflow: hidden;\n }\n\n .track-list { border-bottom: 1px solid var(--border); }\n\n .track-item {\n display: flex;\n align-items: center;\n padding: 16px 28px;\n border-bottom: 1px solid rgba(255,255,255,0.04);\n cursor: pointer;\n transition: background .15s;\n gap: 18px;\n }\n .track-item:last-child { border-bottom: none; }\n .track-item:hover { background: rgba(240,165,0,0.04); }\n .track-item.active { background: rgba(240,165,0,0.08); }\n\n .track-num {\n font-size: 12px;\n color: #444;\n width: 20px;\n text-align: center;\n font-weight: 600;\n }\n .track-item.active .track-num { color: var(--gold); }\n\n .track-play-btn {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--gold);\n border: none;\n display: none;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: var(--black);\n font-size: 11px;\n flex-shrink: 0;\n transition: transform .1s;\n }\n .track-item:hover .track-num { display: none; }\n .track-item:hover .track-play-btn { display: flex; }\n .track-item.active .track-num { display: none; }\n .track-item.active .track-play-btn { display: flex; background: var(--gold); }\n\n .track-info { flex: 1; min-width: 0; }\n .track-name { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .track-genre { font-size: 11px; color: #555; letter-spacing: 1px; text-transform: uppercase; }\n\n .track-tags { display: flex; gap: 6px; }\n .tag {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n padding: 3px 8px;\n border: 1px solid var(--border);\n color: #666;\n }\n .tag.gold { border-color: rgba(240,165,0,0.3); color: var(--gold); }\n\n .track-duration { font-size: 12px; color: #555; margin-left: 12px; }\n\n \/* Main Player Controls *\/\n .player-controls {\n padding: 28px;\n background: #0d0d0d;\n }\n\n .now-playing-bar {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .now-playing-art {\n width: 52px;\n height: 52px;\n background: linear-gradient(135deg, #1a1a1a, #0d0d0d);\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--gold);\n font-size: 20px;\n flex-shrink: 0;\n position: relative;\n overflow: hidden;\n }\n\n .now-playing-art::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(240,165,0,0.15), transparent);\n }\n\n .now-playing-info { flex: 1; min-width: 0; }\n .now-playing-name { font-size: 15px; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .now-playing-sub { font-size: 11px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }\n\n .ctrl-btn {\n background: none;\n border: none;\n color: #666;\n font-size: 18px;\n cursor: pointer;\n padding: 8px;\n transition: color .15s;\n display: flex;\n align-items: center;\n }\n .ctrl-btn:hover { color: var(--white); }\n\n .play-pause-main {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--gold);\n border: none;\n color: var(--black);\n font-size: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background .15s, transform .1s;\n flex-shrink: 0;\n }\n .play-pause-main:hover { background: var(--gold-light); transform: scale(1.05); }\n\n .progress-area { margin-bottom: 16px; }\n\n .progress-bar-wrap {\n position: relative;\n height: 4px;\n background: #222;\n cursor: pointer;\n border-radius: 2px;\n margin-bottom: 8px;\n }\n .progress-fill {\n height: 100%;\n background: linear-gradient(to right, var(--gold), var(--gold-light));\n border-radius: 2px;\n width: 0%;\n transition: width .1s linear;\n pointer-events: none;\n }\n .progress-thumb {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--gold);\n left: 0%;\n opacity: 0;\n transition: opacity .15s;\n }\n .progress-bar-wrap:hover .progress-thumb { opacity: 1; }\n\n .time-display { display: flex; justify-content: space-between; font-size: 11px; color: #555; }\n\n .waveform-visual {\n display: flex;\n align-items: center;\n gap: 2px;\n height: 40px;\n margin-bottom: 16px;\n overflow: hidden;\n }\n .wv-bar {\n flex: 1;\n background: #222;\n border-radius: 1px;\n transition: background .1s;\n }\n .wv-bar.played { background: var(--gold); opacity: 0.7; }\n .wv-bar.current { background: var(--gold); opacity: 1; }\n\n .vol-area {\n display: flex;\n align-items: center;\n gap: 10px;\n color: #555;\n font-size: 14px;\n }\n .vol-slider {\n flex: 1;\n max-width: 120px;\n -webkit-appearance: none;\n height: 3px;\n background: #333;\n border-radius: 2px;\n outline: none;\n cursor: pointer;\n }\n .vol-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: var(--gold);\n cursor: pointer;\n }\n\n \/* \u2500\u2500 PROJETS \u2500\u2500 *\/\n .projets-section { padding: 100px 60px; }\n\n .projets-grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 16px;\n margin-top: 60px;\n }\n\n .projet-card {\n position: relative;\n overflow: hidden;\n aspect-ratio: 3\/4;\n cursor: pointer;\n background: var(--card);\n border: 1px solid var(--border);\n transition: border-color .2s;\n }\n .projet-card:hover { border-color: rgba(240,165,0,0.4); }\n\n .projet-img {\n width: 100%;\n height: 70%;\n object-fit: cover;\n display: block;\n filter: saturate(0) brightness(0.6);\n transition: filter .3s;\n }\n .projet-card:hover .projet-img { filter: saturate(0.3) brightness(0.7); }\n\n .projet-img-placeholder {\n width: 100%;\n height: 70%;\n background: linear-gradient(135deg, #1a1a1a, #0d0d0d);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n opacity: 0.3;\n }\n\n .projet-bottom {\n padding: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n }\n\n .projet-icon { font-size: 22px; color: var(--gold); }\n\n .projet-name {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--white);\n text-align: center;\n }\n\n \/* \u2500\u2500 WHY \u2500\u2500 *\/\n .why-section {\n padding: 100px 60px;\n background: var(--dark);\n }\n\n .why-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n }\n\n .why-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(36px, 5vw, 56px);\n letter-spacing: 2px;\n margin-bottom: 12px;\n }\n .why-title span { color: var(--gold); }\n .why-title::after {\n content: '';\n display: block;\n width: 48px;\n height: 3px;\n background: var(--gold);\n margin-top: 20px;\n }\n\n .why-list { list-style: none; margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }\n .why-list li {\n display: flex;\n align-items: center;\n gap: 14px;\n font-size: 15px;\n color: #ccc;\n }\n .why-list li::before {\n content: '';\n width: 22px;\n height: 22px;\n border-radius: 50%;\n border: 1.5px solid var(--gold);\n background: rgba(240,165,0,0.08);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 4' stroke='%23f0a500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: 12px;\n }\n\n .why-visual {\n position: relative;\n height: 380px;\n background: radial-gradient(ellipse at center, rgba(240,165,0,0.06) 0%, transparent 70%),\n linear-gradient(135deg, #0f0f0f, #080808);\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n .studio-icon {\n font-size: 80px;\n opacity: 0.15;\n filter: grayscale(1);\n }\n\n .eq-bars {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100px;\n display: flex;\n align-items: flex-end;\n gap: 3px;\n padding: 0 20px;\n }\n\n .eq-bar {\n flex: 1;\n background: linear-gradient(to top, var(--gold), rgba(240,165,0,0.2));\n border-radius: 2px 2px 0 0;\n animation: eqPulse var(--d) ease-in-out infinite alternate;\n animation-delay: var(--dl);\n }\n\n @keyframes eqPulse {\n 0% { height: 5px; opacity: 0.3; }\n 100% { height: var(--h); opacity: 0.8; }\n }\n\n \/* \u2500\u2500 CTA \u2500\u2500 *\/\n .cta-section {\n padding: 100px 60px;\n background: radial-gradient(ellipse at 30% 50%, rgba(240,165,0,0.07) 0%, transparent 60%), var(--black);\n position: relative;\n overflow: hidden;\n border-top: 1px solid var(--border);\n }\n\n .cta-inner {\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 60px;\n align-items: center;\n }\n\n .cta-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(36px, 5vw, 64px);\n line-height: 1;\n letter-spacing: 2px;\n }\n .cta-title span { color: var(--gold); display: block; }\n\n .cta-meta {\n display: flex;\n gap: 48px;\n margin-top: 40px;\n }\n\n .meta-item {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 12px;\n color: #666;\n }\n .meta-icon { color: var(--gold); font-size: 18px; }\n .meta-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #aaa; display: block; margin-bottom: 2px; }\n .meta-sub { font-size: 11px; color: #555; }\n\n .cta-bg-z {\n position: absolute;\n right: -100px;\n top: 50%;\n transform: translateY(-50%);\n font-family: 'Bebas Neue', sans-serif;\n font-size: 400px;\n color: rgba(240,165,0,0.03);\n pointer-events: none;\n line-height: 1;\n user-select: none;\n }\n\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n footer {\n border-top: 1px solid var(--border);\n padding: 32px 60px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #050505;\n }\n\n footer .logo { font-size: 22px; }\n footer p { font-size: 12px; color: #444; }\n\n \/* \u2500\u2500 DIVIDER \u2500\u2500 *\/\n .gold-line {\n width: 48px;\n height: 3px;\n background: var(--gold);\n margin: 0 auto 60px;\n }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n nav { padding: 0 24px; }\n .nav-links { display: none; }\n .hero { padding: 100px 24px 60px; }\n .waveform-hero { display: none; }\n .features-bar { grid-template-columns: 1fr; }\n .feature-item { border-right: none; border-bottom: 1px solid var(--border); }\n .projets-grid { grid-template-columns: repeat(3, 1fr); }\n .why-inner { grid-template-columns: 1fr; }\n .why-visual { display: none; }\n .cta-inner { grid-template-columns: 1fr; }\n .player-section, .projets-section, .why-section, .cta-section { padding: 60px 24px; }\n footer { padding: 24px; flex-direction: column; gap: 12px; text-align: center; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<nav>\n <a href=\"#\" class=\"logo\">SILEN<span>Z<\/span>AR<\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#musiques\">Musiques<\/a><\/li>\n <li><a href=\"#catalogue\">Catalogue<\/a><\/li>\n <li><a href=\"#apropos\">\u00c0 Propos<\/a><\/li>\n <li><a href=\"#licences\">Licences<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <a href=\"#contact\" class=\"btn-nav\">Demander le catalogue<\/a>\n<\/nav>\n\n\n<section class=\"hero\">\n\n \n <div class=\"waveform-hero\" id=\"heroWave\"><\/div>\n\n \n <svg class=\"hero-bg-z\" viewBox=\"0 0 300 300\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M40 40 L260 40 L40 260 L260 260\" stroke=\"white\" stroke-width=\"28\" stroke-linecap=\"square\" stroke-linejoin=\"bevel\"\/>\n <path d=\"M40 40 L260 40 L40 260 L260 260\" stroke=\"#f0a500\" stroke-width=\"10\" stroke-linecap=\"square\" stroke-linejoin=\"bevel\" opacity=\"0.8\"\/>\n <\/svg>\n\n <div class=\"hero-content\">\n <p class=\"hero-eyebrow\">Musique Originale Pour L’Image<\/p>\n <h1 class=\"hero-title\">UNE IDENTIT\u00c9<br>MUSICALE FORTE<br>POUR VOS IMAGES<\/h1>\n <p class=\"hero-desc\">Silenzar cr\u00e9e une musique intense, moderne et \u00e9motionnelle, pens\u00e9e pour le cin\u00e9ma, les s\u00e9ries, la publicit\u00e9, les bandes-annonces et le jeu vid\u00e9o.<\/p>\n <div class=\"hero-btns\">\n <a href=\"#player\" class=\"btn-primary\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02z\"\/><\/svg>\n \u00c9couter\n <\/a>\n <a href=\"#contact\" class=\"btn-secondary\">\n Demander le catalogue \u2192\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"features-bar\">\n <div class=\"feature-item\">\n <div class=\"feature-icon\">\u2665<\/div>\n <div>\n <div class=\"feature-label\">\u00c9motion Imm\u00e9diate<\/div>\n <div class=\"feature-desc\">Des compositions qui captent l’attention et renforcent l’impact \u00e9motionnel de vos images.<\/div>\n <\/div>\n <\/div>\n <div class=\"feature-item\">\n <div class=\"feature-icon\">\u224b<\/div>\n <div>\n <div class=\"feature-label\">Signature Sonore Distinctive<\/div>\n <div class=\"feature-desc\">Un style unique m\u00ealant puissance orchestrale, design sonore et \u00e9nergie contemporaine.<\/div>\n <\/div>\n <\/div>\n <div class=\"feature-item\">\n <div class=\"feature-icon\">\u2713<\/div>\n <div>\n <div class=\"feature-label\">Pr\u00eat Pour La Synchro<\/div>\n <div class=\"feature-desc\">Des morceaux pens\u00e9s pour la synchronisation, disponibles en multiple versions et stems sur demande.<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<section class=\"player-section\" id=\"player\">\n <p class=\"section-label\">Extrait du catalogue<\/p>\n <h2 class=\"section-title\">\u00c9COUTER<\/h2>\n <div class=\"gold-line\"><\/div>\n\n <div class=\"player-container\" id=\"playerContainer\">\n \n <div class=\"track-list\" id=\"trackList\"><\/div>\n\n \n <div class=\"player-controls\">\n <div class=\"now-playing-bar\">\n <div class=\"now-playing-art\">\u26a1<\/div>\n <div class=\"now-playing-info\">\n <div class=\"now-playing-name\" id=\"nowPlayingName\">S\u00e9lectionnez un titre<\/div>\n <div class=\"now-playing-sub\" id=\"nowPlayingSub\">SILENZAR \u00b7 ORIGINAL<\/div>\n <\/div>\n <button class=\"ctrl-btn\" id=\"btnPrev\" title=\"Pr\u00e9c\u00e9dent\">\u23ee<\/button>\n <button class=\"play-pause-main\" id=\"btnPlay\">\u25b6<\/button>\n <button class=\"ctrl-btn\" id=\"btnNext\" title=\"Suivant\">\u23ed<\/button>\n <\/div>\n\n <div class=\"waveform-visual\" id=\"waveformVis\"><\/div>\n\n <div class=\"progress-area\">\n <div class=\"progress-bar-wrap\" id=\"progressWrap\">\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n <div class=\"progress-thumb\" id=\"progressThumb\"><\/div>\n <\/div>\n <div class=\"time-display\">\n <span id=\"timeElapsed\">0:00<\/span>\n <span id=\"timeDuration\">0:00<\/span>\n <\/div>\n <\/div>\n\n <div class=\"vol-area\">\n <span>\ud83d\udd08<\/span>\n <input type=\"range\" class=\"vol-slider\" id=\"volSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\n <span style=\"font-size:11px;color:#444;letter-spacing:1px;\">VOL<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"projets-section\" id=\"catalogue\">\n <p class=\"section-label\">Pour vos projets<\/p>\n <h2 class=\"section-title\" style=\"text-align:center;\">POUR VOS PROJETS<\/h2>\n <div class=\"gold-line\"><\/div>\n\n <div class=\"projets-grid\" id=\"projetsGrid\"><\/div>\n<\/section>\n\n\n<section class=\"why-section\" id=\"apropos\">\n <div class=\"why-inner\">\n <div>\n <h2 class=\"why-title\">POURQUOI<br><span>SILENZAR ?<\/span><\/h2>\n <ul class=\"why-list\">\n <li>Titres originaux<\/li>\n <li>Univers sombre et cin\u00e9matique<\/li>\n <li>Textures modernes et impact \u00e9motionnel<\/li>\n <li>Approche adaptable selon le brief<\/li>\n <li>Stems disponibles sur demande<\/li>\n <li>R\u00e9ponse sous 24h<\/li>\n <\/ul>\n <\/div>\n <div class=\"why-visual\">\n <div class=\"studio-icon\">\ud83c\udf9b<\/div>\n <div class=\"eq-bars\" id=\"eqBars\"><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"cta-section\" id=\"contact\">\n <div class=\"cta-bg-z\">Z<\/div>\n <div class=\"cta-inner\">\n <div>\n <h2 class=\"cta-title\">\n VOUS CHERCHEZ UNE MUSIQUE\n <span>QUI RACONTE, FRAPPE ET RESTE EN T\u00caTE ?<\/span>\n <\/h2>\n <div style=\"margin-top:36px;\">\n <a href=\"mailto:contact@silenzar.com\" class=\"btn-primary\">\n Entrer en contact \u2192\n <\/a>\n <\/div>\n <\/div>\n <div class=\"cta-meta\">\n <div class=\"meta-item\">\n <span class=\"meta-icon\">\u26a1<\/span>\n <div>\n <span class=\"meta-label\">R\u00e9ponse rapide<\/span>\n <span class=\"meta-sub\">Sous 24h<\/span>\n <\/div>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-icon\">\ud83d\udccb<\/span>\n <div>\n <span class=\"meta-label\">Catalogue sur demande<\/span>\n <span class=\"meta-sub\">Versions & stems<\/span>\n <\/div>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-icon\">\ud83c\udf10<\/span>\n <div>\n <span class=\"meta-label\">Licences sur mesure<\/span>\n <span class=\"meta-sub\">Monde entier<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer>\n <a href=\"#\" class=\"logo\">SILEN<span>Z<\/span>AR<\/a>\n <p>\u00a9 2026 Silenzar. Tous droits r\u00e9serv\u00e9s.<\/p>\n <p>Musique originale pour l’image<\/p>\n<\/footer>\n\n\n<audio id=\"audioEl\" preload=\"none\"><\/audio>\n\n<script>\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ DATA\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst tracks = [\n { id: 1, name: \"Dark Matter\", genre: \"Cin\u00e9matique\", duration: \"2:47\", tags: [\"Epic\",\"Orchestral\"], color: \"#f0a500\" },\n { id: 2, name: \"Neon Requiem\", genre: \"\u00c9lectronique\", duration: \"3:12\", tags: [\"Dark\",\"Hybrid\"], color: \"#f0a500\" },\n { id: 3, name: \"Thunder Protocol\", genre: \"Action\", duration: \"2:55\", tags: [\"Intense\",\"Trailer\"], color: \"#f0a500\" },\n { id: 4, name: \"Silence Before\", genre: \"Atmosph\u00e9rique\",duration: \"3:33\", tags: [\"Tension\",\"Drama\"], color: \"#f0a500\" },\n { id: 5, name: \"Zero Gravity\", genre: \"Sci-Fi\", duration: \"2:21\", tags: [\"Futuriste\",\"Space\"], color: \"#f0a500\" },\n];\n\nconst projets = [\n { icon: \"\ud83c\udfac\", name: \"Films & S\u00e9ries\", bg: \"#111\" },\n { icon: \"\ud83d\udcfa\", name: \"Publicit\u00e9\", bg: \"#111\" },\n { icon: \"\u25b6\", name: \"Bandes-Annonces\", bg: \"#111\" },\n { icon: \"\ud83c\udfae\", name: \"Jeux Vid\u00e9o\", bg: \"#111\" },\n { icon: \"\u2b50\", name: \"Contenus de Marque\", bg: \"#111\" },\n];\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ BUILD TRACK LIST\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst trackListEl = document.getElementById('trackList');\ntracks.forEach((t, i) => {\n const row = document.createElement('div');\n row.className = 'track-item';\n row.dataset.index = i;\n row.innerHTML = `\n <span class=\"track-num\">${i + 1}<\/span>\n <button class=\"track-play-btn\" data-index=\"${i}\">\u25b6<\/button>\n <div class=\"track-info\">\n <div class=\"track-name\">${t.name}<\/div>\n <div class=\"track-genre\">${t.genre}<\/div>\n <\/div>\n <div class=\"track-tags\">${t.tags.map(tg => `<span class=\"tag gold\">${tg}<\/span>`).join('')}<\/div>\n <span class=\"track-duration\">${t.duration}<\/span>\n `;\n row.addEventListener('click', () => selectTrack(i));\n trackListEl.appendChild(row);\n});\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ BUILD PROJETS GRID\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst projetsGrid = document.getElementById('projetsGrid');\nprojets.forEach(p => {\n const card = document.createElement('div');\n card.className = 'projet-card';\n \/\/ Placeholder gradient backgrounds\n const grads = [\n 'linear-gradient(135deg,#1a1208,#0a0a0a)',\n 'linear-gradient(135deg,#0a1218,#0a0a0a)',\n 'linear-gradient(135deg,#181808,#0a0a0a)',\n 'linear-gradient(135deg,#120818,#0a0a0a)',\n 'linear-gradient(135deg,#0a1808,#0a0a0a)',\n ];\n const idx = projets.indexOf(p);\n card.innerHTML = `\n <div class=\"projet-img-placeholder\" style=\"background:${grads[idx] || '#111'}\">${p.icon}<\/div>\n <div class=\"projet-bottom\">\n <span class=\"projet-icon\">${p.icon}<\/span>\n <span class=\"projet-name\">${p.name}<\/span>\n <\/div>\n `;\n projetsGrid.appendChild(card);\n});\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ BUILD EQ BARS\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst eqBarsEl = document.getElementById('eqBars');\nfor (let i = 0; i < 48; i++) {\n const b = document.createElement('div');\n b.className = 'eq-bar';\n const h = Math.random() * 80 + 10;\n const d = (0.4 + Math.random() * 1.2).toFixed(2);\n const dl = (Math.random() * 0.8).toFixed(2);\n b.style.cssText = `--h:${h}px;--d:${d}s;--dl:${dl}s;height:${Math.random()*20+5}px`;\n eqBarsEl.appendChild(b);\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ HERO WAVEFORM\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst heroWave = document.getElementById('heroWave');\nfor (let i = 0; i < 80; i++) {\n const b = document.createElement('div');\n b.className = 'wave-bar';\n const maxH = Math.floor(Math.random() * 80 + 10);\n const dur = (0.5 + Math.random() * 1.5).toFixed(2);\n const delay = (Math.random() * 1).toFixed(2);\n b.style.cssText = `--max-h:${maxH}%;--dur:${dur}s;--delay:${delay}s;height:${Math.random()*30+5}%`;\n heroWave.appendChild(b);\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ WAVEFORM VISUAL IN PLAYER\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst waveformVis = document.getElementById('waveformVis');\nconst NUM_BARS = 60;\nconst wvHeights = Array.from({length: NUM_BARS}, () => Math.random() * 80 + 10);\nwvHeights.forEach(h => {\n const b = document.createElement('div');\n b.className = 'wv-bar';\n b.style.height = h + '%';\n waveformVis.appendChild(b);\n});\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ AUDIO PLAYER LOGIC\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst audio = document.getElementById('audioEl');\nlet currentTrack = -1;\nlet isPlaying = false;\n\n\/\/ We use Web Audio API to generate a simple tone per track (demo \u2014 no real files)\nconst AudioCtx = window.AudioContext || window.webkitAudioContext;\nlet actx = null;\nlet oscNode = null, gainNode = null;\n\nconst FREQ = [130, 155, 174, 196, 220]; \/\/ different pitches per track\n\nfunction stopSynth() {\n if (oscNode) { try { oscNode.stop(); } catch(e){} oscNode = null; }\n if (gainNode) { gainNode.disconnect(); gainNode = null; }\n}\n\nfunction playSynth(trackIdx) {\n stopSynth();\n if (!actx) actx = new AudioCtx();\n gainNode = actx.createGain();\n gainNode.gain.value = parseFloat(document.getElementById('volSlider').value);\n gainNode.connect(actx.destination);\n oscNode = actx.createOscillator();\n oscNode.type = 'sawtooth';\n oscNode.frequency.value = FREQ[trackIdx % FREQ.length];\n \/\/ Add a second osc for depth\n const osc2 = actx.createOscillator();\n osc2.type = 'sine';\n osc2.frequency.value = FREQ[trackIdx % FREQ.length] * 1.5;\n const g2 = actx.createGain(); g2.gain.value = 0.2; osc2.connect(g2); g2.connect(gainNode);\n oscNode.connect(gainNode);\n oscNode.start();\n osc2.start();\n \/\/ Simulate duration with a fake progress\n startFakeProgress(trackIdx);\n}\n\n\/\/ \u2500\u2500 Fake progress (since we don't have real audio files) \u2500\u2500\nlet fakeTimer = null;\nlet fakeElapsed = 0;\nconst FAKE_DURATION = 30; \/\/ 30 seconds demo loop\n\nfunction parseDuration(str) {\n const [m, s] = str.split(':').map(Number);\n return m * 60 + s;\n}\n\nfunction formatTime(sec) {\n const m = Math.floor(sec \/ 60);\n const s = Math.floor(sec % 60);\n return `${m}:${s.toString().padStart(2,'0')}`;\n}\n\nfunction startFakeProgress(idx) {\n clearInterval(fakeTimer);\n fakeElapsed = 0;\n const dur = parseDuration(tracks[idx].duration);\n document.getElementById('timeDuration').textContent = tracks[idx].duration;\n fakeTimer = setInterval(() => {\n fakeElapsed += 0.1;\n if (fakeElapsed >= dur) { fakeElapsed = 0; }\n const pct = (fakeElapsed \/ dur) * 100;\n document.getElementById('progressFill').style.width = pct + '%';\n document.getElementById('progressThumb').style.left = pct + '%';\n document.getElementById('timeElapsed').textContent = formatTime(fakeElapsed);\n updateWaveformProgress(pct \/ 100);\n }, 100);\n}\n\nfunction updateWaveformProgress(ratio) {\n const bars = waveformVis.querySelectorAll('.wv-bar');\n const cutoff = Math.floor(ratio * NUM_BARS);\n bars.forEach((b, i) => {\n b.classList.remove('played', 'current');\n if (i < cutoff) b.classList.add('played');\n if (i === cutoff) b.classList.add('current');\n });\n}\n\nfunction selectTrack(idx) {\n currentTrack = idx;\n isPlaying = true;\n\n \/\/ Update track list\n document.querySelectorAll('.track-item').forEach((el, i) => {\n el.classList.toggle('active', i === idx);\n });\n\n \/\/ Update now playing\n document.getElementById('nowPlayingName').textContent = tracks[idx].name;\n document.getElementById('nowPlayingSub').textContent = `SILENZAR \u00b7 ${tracks[idx].genre.toUpperCase()}`;\n\n \/\/ Update play button\n document.getElementById('btnPlay').textContent = '\u23f8';\n\n playSynth(idx);\n}\n\nfunction togglePlay() {\n if (currentTrack === -1) { selectTrack(0); return; }\n if (isPlaying) {\n isPlaying = false;\n document.getElementById('btnPlay').textContent = '\u25b6';\n stopSynth();\n clearInterval(fakeTimer);\n } else {\n isPlaying = true;\n document.getElementById('btnPlay').textContent = '\u23f8';\n playSynth(currentTrack);\n }\n}\n\ndocument.getElementById('btnPlay').addEventListener('click', togglePlay);\n\ndocument.getElementById('btnPrev').addEventListener('click', () => {\n const idx = currentTrack <= 0 ? tracks.length - 1 : currentTrack - 1;\n selectTrack(idx);\n});\n\ndocument.getElementById('btnNext').addEventListener('click', () => {\n const idx = (currentTrack + 1) % tracks.length;\n selectTrack(idx);\n});\n\ndocument.getElementById('volSlider').addEventListener('input', e => {\n if (gainNode) gainNode.gain.value = parseFloat(e.target.value);\n});\n\n\/\/ Progress bar click\ndocument.getElementById('progressWrap').addEventListener('click', e => {\n if (currentTrack === -1) return;\n const rect = e.currentTarget.getBoundingClientRect();\n const ratio = (e.clientX - rect.left) \/ rect.width;\n const dur = parseDuration(tracks[currentTrack].duration);\n fakeElapsed = ratio * dur;\n});\n\n\/\/ Track play buttons\ndocument.querySelectorAll('.track-play-btn').forEach(btn => {\n btn.addEventListener('click', e => {\n e.stopPropagation();\n selectTrack(parseInt(btn.dataset.index));\n });\n});\n\n\/\/ Note to user about audio\nconsole.log('Silenzar player: using Web Audio API synthesized tones as demo. Replace with real audio files for production.');\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>SILENZAR \u2014 Musique Originale Pour L’Image SILENZAR Musiques Catalogue \u00c0 Propos Licences Contact Demander le catalogue Musique Originale Pour L’Image UNE IDENTIT\u00c9MUSICALE FORTEPOUR VOS IMAGES Silenzar cr\u00e9e une musique intense, moderne et \u00e9motionnelle, pens\u00e9e pour le cin\u00e9ma, les s\u00e9ries, la publicit\u00e9, les bandes-annonces et le jeu vid\u00e9o. \u00c9couter Demander le catalogue \u2192 \u2665 \u00c9motion Imm\u00e9diate […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin3928","author_link":"https:\/\/silenzar.fr\/index.php\/author\/admin3928\/"},"uagb_comment_info":0,"uagb_excerpt":"SILENZAR \u2014 Musique Originale Pour L’Image SILENZAR Musiques Catalogue \u00c0 Propos Licences Contact Demander le catalogue Musique Originale Pour L’Image UNE IDENTIT\u00c9MUSICALE FORTEPOUR VOS IMAGES Silenzar cr\u00e9e une musique intense, moderne et \u00e9motionnelle, pens\u00e9e pour le cin\u00e9ma, les s\u00e9ries, la publicit\u00e9, les bandes-annonces et le jeu vid\u00e9o. \u00c9couter Demander le catalogue \u2192 \u2665 \u00c9motion Imm\u00e9diate…","_links":{"self":[{"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":1,"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2026-06-10T19:16:30","date_gmt":"2026-06-10T19:16:30","guid":{"rendered":"https:\/\/silenzar.fr\/?page_id=6"},"modified":"2026-06-10T19:16:30","modified_gmt":"2026-06-10T19:16:30","slug":"6-2","status":"publish","type":"page","link":"https:\/\/silenzar.fr\/index.php\/6-2\/","title":{"rendered":""},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n\n\nSILENZAR \u2014 Musique Originale Pour L’Image<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --gold: #f0a500;\n --gold-light: #ffc533;\n --black: #050505;\n --dark: #111111;\n --card: #161616;\n --border: #2a2a2a;\n --white: #ffffff;\n --gray: #888888;\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n background: var(--black);\n color: var(--white);\n font-family: 'Inter', sans-serif;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\n nav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 60px;\n height: 72px;\n background: rgba(5,5,5,0.92);\n backdrop-filter: blur(12px);\n border-bottom: 1px solid rgba(240,165,0,0.08);\n }\n\n .logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n letter-spacing: 4px;\n color: var(--white);\n text-decoration: none;\n }\n .logo span { color: var(--gold); }\n\n .nav-links {\n display: flex;\n gap: 36px;\n list-style: none;\n }\n .nav-links a {\n color: #aaa;\n text-decoration: none;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n transition: color .2s;\n }\n .nav-links a:hover { color: var(--white); }\n\n .btn-nav {\n background: transparent;\n border: 1.5px solid var(--gold);\n color: var(--gold);\n padding: 10px 22px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n cursor: pointer;\n transition: background .2s, color .2s;\n text-decoration: none;\n }\n .btn-nav:hover { background: var(--gold); color: var(--black); }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n .hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n padding: 100px 60px 60px;\n position: relative;\n overflow: hidden;\n background: radial-gradient(ellipse at 70% 50%, rgba(240,165,0,0.06) 0%, transparent 60%),\n radial-gradient(ellipse at 20% 80%, rgba(240,165,0,0.03) 0%, transparent 50%),\n var(--black);\n }\n\n .hero-bg-z {\n position: absolute;\n right: 5%;\n top: 50%;\n transform: translateY(-50%);\n width: 500px;\n height: 500px;\n opacity: 0.15;\n pointer-events: none;\n }\n\n .hero-content { max-width: 580px; position: relative; z-index: 2; }\n\n .hero-eyebrow {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 20px;\n }\n\n .hero-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(56px, 8vw, 90px);\n line-height: 0.95;\n letter-spacing: 2px;\n color: var(--white);\n margin-bottom: 28px;\n }\n\n .hero-desc {\n font-size: 15px;\n line-height: 1.7;\n color: #999;\n max-width: 420px;\n margin-bottom: 40px;\n }\n\n .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }\n\n .btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--gold);\n color: var(--black);\n padding: 14px 28px;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: background .2s, transform .15s;\n text-decoration: none;\n }\n .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }\n\n .btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: transparent;\n color: var(--white);\n padding: 14px 28px;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n border: 1.5px solid #333;\n cursor: pointer;\n transition: border-color .2s, color .2s;\n text-decoration: none;\n }\n .btn-secondary:hover { border-color: var(--gold); color: var(--gold); }\n\n \/* Waveform anim\u00e9e *\/\n .waveform-hero {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 55%;\n height: 300px;\n display: flex;\n align-items: center;\n gap: 3px;\n padding: 0 60px;\n opacity: 0.4;\n pointer-events: none;\n }\n\n .wave-bar {\n flex: 1;\n border-radius: 2px;\n background: linear-gradient(to top, var(--gold), rgba(240,165,0,0.3));\n animation: wavePulse var(--dur) ease-in-out infinite alternate;\n animation-delay: var(--delay);\n }\n\n @keyframes wavePulse {\n 0% { height: 8%; }\n 100% { height: var(--max-h); }\n }\n\n \/* \u2500\u2500 FEATURES BAR \u2500\u2500 *\/\n .features-bar {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n border-top: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n }\n\n .feature-item {\n display: flex;\n gap: 18px;\n align-items: flex-start;\n padding: 36px 40px;\n border-right: 1px solid var(--border);\n }\n .feature-item:last-child { border-right: none; }\n\n .feature-icon {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1.5px solid var(--gold);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--gold);\n flex-shrink: 0;\n font-size: 18px;\n }\n\n .feature-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--white);\n margin-bottom: 8px;\n }\n .feature-desc { font-size: 13px; color: #777; line-height: 1.6; }\n\n \/* \u2500\u2500 AUDIO PLAYER \u2500\u2500 *\/\n .player-section {\n background: var(--dark);\n padding: 80px 60px;\n border-bottom: 1px solid var(--border);\n }\n\n .section-label {\n text-align: center;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 10px;\n }\n\n .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(32px, 5vw, 52px);\n text-align: center;\n letter-spacing: 3px;\n margin-bottom: 60px;\n }\n\n .player-container {\n max-width: 800px;\n margin: 0 auto;\n background: var(--card);\n border: 1px solid var(--border);\n overflow: hidden;\n }\n\n .track-list { border-bottom: 1px solid var(--border); }\n\n .track-item {\n display: flex;\n align-items: center;\n padding: 16px 28px;\n border-bottom: 1px solid rgba(255,255,255,0.04);\n cursor: pointer;\n transition: background .15s;\n gap: 18px;\n }\n .track-item:last-child { border-bottom: none; }\n .track-item:hover { background: rgba(240,165,0,0.04); }\n .track-item.active { background: rgba(240,165,0,0.08); }\n\n .track-num {\n font-size: 12px;\n color: #444;\n width: 20px;\n text-align: center;\n font-weight: 600;\n }\n .track-item.active .track-num { color: var(--gold); }\n\n .track-play-btn {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--gold);\n border: none;\n display: none;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: var(--black);\n font-size: 11px;\n flex-shrink: 0;\n transition: transform .1s;\n }\n .track-item:hover .track-num { display: none; }\n .track-item:hover .track-play-btn { display: flex; }\n .track-item.active .track-num { display: none; }\n .track-item.active .track-play-btn { display: flex; background: var(--gold); }\n\n .track-info { flex: 1; min-width: 0; }\n .track-name { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .track-genre { font-size: 11px; color: #555; letter-spacing: 1px; text-transform: uppercase; }\n\n .track-tags { display: flex; gap: 6px; }\n .tag {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n padding: 3px 8px;\n border: 1px solid var(--border);\n color: #666;\n }\n .tag.gold { border-color: rgba(240,165,0,0.3); color: var(--gold); }\n\n .track-duration { font-size: 12px; color: #555; margin-left: 12px; }\n\n \/* Main Player Controls *\/\n .player-controls {\n padding: 28px;\n background: #0d0d0d;\n }\n\n .now-playing-bar {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .now-playing-art {\n width: 52px;\n height: 52px;\n background: linear-gradient(135deg, #1a1a1a, #0d0d0d);\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--gold);\n font-size: 20px;\n flex-shrink: 0;\n position: relative;\n overflow: hidden;\n }\n\n .now-playing-art::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(240,165,0,0.15), transparent);\n }\n\n .now-playing-info { flex: 1; min-width: 0; }\n .now-playing-name { font-size: 15px; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .now-playing-sub { font-size: 11px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }\n\n .ctrl-btn {\n background: none;\n border: none;\n color: #666;\n font-size: 18px;\n cursor: pointer;\n padding: 8px;\n transition: color .15s;\n display: flex;\n align-items: center;\n }\n .ctrl-btn:hover { color: var(--white); }\n\n .play-pause-main {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--gold);\n border: none;\n color: var(--black);\n font-size: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background .15s, transform .1s;\n flex-shrink: 0;\n }\n .play-pause-main:hover { background: var(--gold-light); transform: scale(1.05); }\n\n .progress-area { margin-bottom: 16px; }\n\n .progress-bar-wrap {\n position: relative;\n height: 4px;\n background: #222;\n cursor: pointer;\n border-radius: 2px;\n margin-bottom: 8px;\n }\n .progress-fill {\n height: 100%;\n background: linear-gradient(to right, var(--gold), var(--gold-light));\n border-radius: 2px;\n width: 0%;\n transition: width .1s linear;\n pointer-events: none;\n }\n .progress-thumb {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--gold);\n left: 0%;\n opacity: 0;\n transition: opacity .15s;\n }\n .progress-bar-wrap:hover .progress-thumb { opacity: 1; }\n\n .time-display { display: flex; justify-content: space-between; font-size: 11px; color: #555; }\n\n .waveform-visual {\n display: flex;\n align-items: center;\n gap: 2px;\n height: 40px;\n margin-bottom: 16px;\n overflow: hidden;\n }\n .wv-bar {\n flex: 1;\n background: #222;\n border-radius: 1px;\n transition: background .1s;\n }\n .wv-bar.played { background: var(--gold); opacity: 0.7; }\n .wv-bar.current { background: var(--gold); opacity: 1; }\n\n .vol-area {\n display: flex;\n align-items: center;\n gap: 10px;\n color: #555;\n font-size: 14px;\n }\n .vol-slider {\n flex: 1;\n max-width: 120px;\n -webkit-appearance: none;\n height: 3px;\n background: #333;\n border-radius: 2px;\n outline: none;\n cursor: pointer;\n }\n .vol-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: var(--gold);\n cursor: pointer;\n }\n\n \/* \u2500\u2500 PROJETS \u2500\u2500 *\/\n .projets-section { padding: 100px 60px; }\n\n .projets-grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 16px;\n margin-top: 60px;\n }\n\n .projet-card {\n position: relative;\n overflow: hidden;\n aspect-ratio: 3\/4;\n cursor: pointer;\n background: var(--card);\n border: 1px solid var(--border);\n transition: border-color .2s;\n }\n .projet-card:hover { border-color: rgba(240,165,0,0.4); }\n\n .projet-img {\n width: 100%;\n height: 70%;\n object-fit: cover;\n display: block;\n filter: saturate(0) brightness(0.6);\n transition: filter .3s;\n }\n .projet-card:hover .projet-img { filter: saturate(0.3) brightness(0.7); }\n\n .projet-img-placeholder {\n width: 100%;\n height: 70%;\n background: linear-gradient(135deg, #1a1a1a, #0d0d0d);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n opacity: 0.3;\n }\n\n .projet-bottom {\n padding: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n }\n\n .projet-icon { font-size: 22px; color: var(--gold); }\n\n .projet-name {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--white);\n text-align: center;\n }\n\n \/* \u2500\u2500 WHY \u2500\u2500 *\/\n .why-section {\n padding: 100px 60px;\n background: var(--dark);\n }\n\n .why-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n }\n\n .why-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(36px, 5vw, 56px);\n letter-spacing: 2px;\n margin-bottom: 12px;\n }\n .why-title span { color: var(--gold); }\n .why-title::after {\n content: '';\n display: block;\n width: 48px;\n height: 3px;\n background: var(--gold);\n margin-top: 20px;\n }\n\n .why-list { list-style: none; margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }\n .why-list li {\n display: flex;\n align-items: center;\n gap: 14px;\n font-size: 15px;\n color: #ccc;\n }\n .why-list li::before {\n content: '';\n width: 22px;\n height: 22px;\n border-radius: 50%;\n border: 1.5px solid var(--gold);\n background: rgba(240,165,0,0.08);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 4' stroke='%23f0a500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: 12px;\n }\n\n .why-visual {\n position: relative;\n height: 380px;\n background: radial-gradient(ellipse at center, rgba(240,165,0,0.06) 0%, transparent 70%),\n linear-gradient(135deg, #0f0f0f, #080808);\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n .studio-icon {\n font-size: 80px;\n opacity: 0.15;\n filter: grayscale(1);\n }\n\n .eq-bars {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100px;\n display: flex;\n align-items: flex-end;\n gap: 3px;\n padding: 0 20px;\n }\n\n .eq-bar {\n flex: 1;\n background: linear-gradient(to top, var(--gold), rgba(240,165,0,0.2));\n border-radius: 2px 2px 0 0;\n animation: eqPulse var(--d) ease-in-out infinite alternate;\n animation-delay: var(--dl);\n }\n\n @keyframes eqPulse {\n 0% { height: 5px; opacity: 0.3; }\n 100% { height: var(--h); opacity: 0.8; }\n }\n\n \/* \u2500\u2500 CTA \u2500\u2500 *\/\n .cta-section {\n padding: 100px 60px;\n background: radial-gradient(ellipse at 30% 50%, rgba(240,165,0,0.07) 0%, transparent 60%), var(--black);\n position: relative;\n overflow: hidden;\n border-top: 1px solid var(--border);\n }\n\n .cta-inner {\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 60px;\n align-items: center;\n }\n\n .cta-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(36px, 5vw, 64px);\n line-height: 1;\n letter-spacing: 2px;\n }\n .cta-title span { color: var(--gold); display: block; }\n\n .cta-meta {\n display: flex;\n gap: 48px;\n margin-top: 40px;\n }\n\n .meta-item {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 12px;\n color: #666;\n }\n .meta-icon { color: var(--gold); font-size: 18px; }\n .meta-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #aaa; display: block; margin-bottom: 2px; }\n .meta-sub { font-size: 11px; color: #555; }\n\n .cta-bg-z {\n position: absolute;\n right: -100px;\n top: 50%;\n transform: translateY(-50%);\n font-family: 'Bebas Neue', sans-serif;\n font-size: 400px;\n color: rgba(240,165,0,0.03);\n pointer-events: none;\n line-height: 1;\n user-select: none;\n }\n\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n footer {\n border-top: 1px solid var(--border);\n padding: 32px 60px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #050505;\n }\n\n footer .logo { font-size: 22px; }\n footer p { font-size: 12px; color: #444; }\n\n \/* \u2500\u2500 DIVIDER \u2500\u2500 *\/\n .gold-line {\n width: 48px;\n height: 3px;\n background: var(--gold);\n margin: 0 auto 60px;\n }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n nav { padding: 0 24px; }\n .nav-links { display: none; }\n .hero { padding: 100px 24px 60px; }\n .waveform-hero { display: none; }\n .features-bar { grid-template-columns: 1fr; }\n .feature-item { border-right: none; border-bottom: 1px solid var(--border); }\n .projets-grid { grid-template-columns: repeat(3, 1fr); }\n .why-inner { grid-template-columns: 1fr; }\n .why-visual { display: none; }\n .cta-inner { grid-template-columns: 1fr; }\n .player-section, .projets-section, .why-section, .cta-section { padding: 60px 24px; }\n footer { padding: 24px; flex-direction: column; gap: 12px; text-align: center; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<nav>\n <a href=\"#\" class=\"logo\">SILEN<span>Z<\/span>AR<\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#musiques\">Musiques<\/a><\/li>\n <li><a href=\"#catalogue\">Catalogue<\/a><\/li>\n <li><a href=\"#apropos\">\u00c0 Propos<\/a><\/li>\n <li><a href=\"#licences\">Licences<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <a href=\"#contact\" class=\"btn-nav\">Demander le catalogue<\/a>\n<\/nav>\n\n\n<section class=\"hero\">\n\n \n <div class=\"waveform-hero\" id=\"heroWave\"><\/div>\n\n \n <svg class=\"hero-bg-z\" viewBox=\"0 0 300 300\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M40 40 L260 40 L40 260 L260 260\" stroke=\"white\" stroke-width=\"28\" stroke-linecap=\"square\" stroke-linejoin=\"bevel\"\/>\n <path d=\"M40 40 L260 40 L40 260 L260 260\" stroke=\"#f0a500\" stroke-width=\"10\" stroke-linecap=\"square\" stroke-linejoin=\"bevel\" opacity=\"0.8\"\/>\n <\/svg>\n\n <div class=\"hero-content\">\n <p class=\"hero-eyebrow\">Musique Originale Pour L’Image<\/p>\n <h1 class=\"hero-title\">UNE IDENTIT\u00c9<br>MUSICALE FORTE<br>POUR VOS IMAGES<\/h1>\n <p class=\"hero-desc\">Silenzar cr\u00e9e une musique intense, moderne et \u00e9motionnelle, pens\u00e9e pour le cin\u00e9ma, les s\u00e9ries, la publicit\u00e9, les bandes-annonces et le jeu vid\u00e9o.<\/p>\n <div class=\"hero-btns\">\n <a href=\"#player\" class=\"btn-primary\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02z\"\/><\/svg>\n \u00c9couter\n <\/a>\n <a href=\"#contact\" class=\"btn-secondary\">\n Demander le catalogue \u2192\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"features-bar\">\n <div class=\"feature-item\">\n <div class=\"feature-icon\">\u2665<\/div>\n <div>\n <div class=\"feature-label\">\u00c9motion Imm\u00e9diate<\/div>\n <div class=\"feature-desc\">Des compositions qui captent l’attention et renforcent l’impact \u00e9motionnel de vos images.<\/div>\n <\/div>\n <\/div>\n <div class=\"feature-item\">\n <div class=\"feature-icon\">\u224b<\/div>\n <div>\n <div class=\"feature-label\">Signature Sonore Distinctive<\/div>\n <div class=\"feature-desc\">Un style unique m\u00ealant puissance orchestrale, design sonore et \u00e9nergie contemporaine.<\/div>\n <\/div>\n <\/div>\n <div class=\"feature-item\">\n <div class=\"feature-icon\">\u2713<\/div>\n <div>\n <div class=\"feature-label\">Pr\u00eat Pour La Synchro<\/div>\n <div class=\"feature-desc\">Des morceaux pens\u00e9s pour la synchronisation, disponibles en multiple versions et stems sur demande.<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<section class=\"player-section\" id=\"player\">\n <p class=\"section-label\">Extrait du catalogue<\/p>\n <h2 class=\"section-title\">\u00c9COUTER<\/h2>\n <div class=\"gold-line\"><\/div>\n\n <div class=\"player-container\" id=\"playerContainer\">\n \n <div class=\"track-list\" id=\"trackList\"><\/div>\n\n \n <div class=\"player-controls\">\n <div class=\"now-playing-bar\">\n <div class=\"now-playing-art\">\u26a1<\/div>\n <div class=\"now-playing-info\">\n <div class=\"now-playing-name\" id=\"nowPlayingName\">S\u00e9lectionnez un titre<\/div>\n <div class=\"now-playing-sub\" id=\"nowPlayingSub\">SILENZAR \u00b7 ORIGINAL<\/div>\n <\/div>\n <button class=\"ctrl-btn\" id=\"btnPrev\" title=\"Pr\u00e9c\u00e9dent\">\u23ee<\/button>\n <button class=\"play-pause-main\" id=\"btnPlay\">\u25b6<\/button>\n <button class=\"ctrl-btn\" id=\"btnNext\" title=\"Suivant\">\u23ed<\/button>\n <\/div>\n\n <div class=\"waveform-visual\" id=\"waveformVis\"><\/div>\n\n <div class=\"progress-area\">\n <div class=\"progress-bar-wrap\" id=\"progressWrap\">\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n <div class=\"progress-thumb\" id=\"progressThumb\"><\/div>\n <\/div>\n <div class=\"time-display\">\n <span id=\"timeElapsed\">0:00<\/span>\n <span id=\"timeDuration\">0:00<\/span>\n <\/div>\n <\/div>\n\n <div class=\"vol-area\">\n <span>\ud83d\udd08<\/span>\n <input type=\"range\" class=\"vol-slider\" id=\"volSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\n <span style=\"font-size:11px;color:#444;letter-spacing:1px;\">VOL<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"projets-section\" id=\"catalogue\">\n <p class=\"section-label\">Pour vos projets<\/p>\n <h2 class=\"section-title\" style=\"text-align:center;\">POUR VOS PROJETS<\/h2>\n <div class=\"gold-line\"><\/div>\n\n <div class=\"projets-grid\" id=\"projetsGrid\"><\/div>\n<\/section>\n\n\n<section class=\"why-section\" id=\"apropos\">\n <div class=\"why-inner\">\n <div>\n <h2 class=\"why-title\">POURQUOI<br><span>SILENZAR ?<\/span><\/h2>\n <ul class=\"why-list\">\n <li>Titres originaux<\/li>\n <li>Univers sombre et cin\u00e9matique<\/li>\n <li>Textures modernes et impact \u00e9motionnel<\/li>\n <li>Approche adaptable selon le brief<\/li>\n <li>Stems disponibles sur demande<\/li>\n <li>R\u00e9ponse sous 24h<\/li>\n <\/ul>\n <\/div>\n <div class=\"why-visual\">\n <div class=\"studio-icon\">\ud83c\udf9b<\/div>\n <div class=\"eq-bars\" id=\"eqBars\"><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"cta-section\" id=\"contact\">\n <div class=\"cta-bg-z\">Z<\/div>\n <div class=\"cta-inner\">\n <div>\n <h2 class=\"cta-title\">\n VOUS CHERCHEZ UNE MUSIQUE\n <span>QUI RACONTE, FRAPPE ET RESTE EN T\u00caTE ?<\/span>\n <\/h2>\n <div style=\"margin-top:36px;\">\n <a href=\"mailto:contact@silenzar.com\" class=\"btn-primary\">\n Entrer en contact \u2192\n <\/a>\n <\/div>\n <\/div>\n <div class=\"cta-meta\">\n <div class=\"meta-item\">\n <span class=\"meta-icon\">\u26a1<\/span>\n <div>\n <span class=\"meta-label\">R\u00e9ponse rapide<\/span>\n <span class=\"meta-sub\">Sous 24h<\/span>\n <\/div>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-icon\">\ud83d\udccb<\/span>\n <div>\n <span class=\"meta-label\">Catalogue sur demande<\/span>\n <span class=\"meta-sub\">Versions & stems<\/span>\n <\/div>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-icon\">\ud83c\udf10<\/span>\n <div>\n <span class=\"meta-label\">Licences sur mesure<\/span>\n <span class=\"meta-sub\">Monde entier<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer>\n <a href=\"#\" class=\"logo\">SILEN<span>Z<\/span>AR<\/a>\n <p>\u00a9 2026 Silenzar. Tous droits r\u00e9serv\u00e9s.<\/p>\n <p>Musique originale pour l’image<\/p>\n<\/footer>\n\n\n<audio id=\"audioEl\" preload=\"none\"><\/audio>\n\n<script>\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ DATA\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst tracks = [\n { id: 1, name: \"Dark Matter\", genre: \"Cin\u00e9matique\", duration: \"2:47\", tags: [\"Epic\",\"Orchestral\"], color: \"#f0a500\" },\n { id: 2, name: \"Neon Requiem\", genre: \"\u00c9lectronique\", duration: \"3:12\", tags: [\"Dark\",\"Hybrid\"], color: \"#f0a500\" },\n { id: 3, name: \"Thunder Protocol\", genre: \"Action\", duration: \"2:55\", tags: [\"Intense\",\"Trailer\"], color: \"#f0a500\" },\n { id: 4, name: \"Silence Before\", genre: \"Atmosph\u00e9rique\",duration: \"3:33\", tags: [\"Tension\",\"Drama\"], color: \"#f0a500\" },\n { id: 5, name: \"Zero Gravity\", genre: \"Sci-Fi\", duration: \"2:21\", tags: [\"Futuriste\",\"Space\"], color: \"#f0a500\" },\n];\n\nconst projets = [\n { icon: \"\ud83c\udfac\", name: \"Films & S\u00e9ries\", bg: \"#111\" },\n { icon: \"\ud83d\udcfa\", name: \"Publicit\u00e9\", bg: \"#111\" },\n { icon: \"\u25b6\", name: \"Bandes-Annonces\", bg: \"#111\" },\n { icon: \"\ud83c\udfae\", name: \"Jeux Vid\u00e9o\", bg: \"#111\" },\n { icon: \"\u2b50\", name: \"Contenus de Marque\", bg: \"#111\" },\n];\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ BUILD TRACK LIST\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst trackListEl = document.getElementById('trackList');\ntracks.forEach((t, i) => {\n const row = document.createElement('div');\n row.className = 'track-item';\n row.dataset.index = i;\n row.innerHTML = `\n <span class=\"track-num\">${i + 1}<\/span>\n <button class=\"track-play-btn\" data-index=\"${i}\">\u25b6<\/button>\n <div class=\"track-info\">\n <div class=\"track-name\">${t.name}<\/div>\n <div class=\"track-genre\">${t.genre}<\/div>\n <\/div>\n <div class=\"track-tags\">${t.tags.map(tg => `<span class=\"tag gold\">${tg}<\/span>`).join('')}<\/div>\n <span class=\"track-duration\">${t.duration}<\/span>\n `;\n row.addEventListener('click', () => selectTrack(i));\n trackListEl.appendChild(row);\n});\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ BUILD PROJETS GRID\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst projetsGrid = document.getElementById('projetsGrid');\nprojets.forEach(p => {\n const card = document.createElement('div');\n card.className = 'projet-card';\n \/\/ Placeholder gradient backgrounds\n const grads = [\n 'linear-gradient(135deg,#1a1208,#0a0a0a)',\n 'linear-gradient(135deg,#0a1218,#0a0a0a)',\n 'linear-gradient(135deg,#181808,#0a0a0a)',\n 'linear-gradient(135deg,#120818,#0a0a0a)',\n 'linear-gradient(135deg,#0a1808,#0a0a0a)',\n ];\n const idx = projets.indexOf(p);\n card.innerHTML = `\n <div class=\"projet-img-placeholder\" style=\"background:${grads[idx] || '#111'}\">${p.icon}<\/div>\n <div class=\"projet-bottom\">\n <span class=\"projet-icon\">${p.icon}<\/span>\n <span class=\"projet-name\">${p.name}<\/span>\n <\/div>\n `;\n projetsGrid.appendChild(card);\n});\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ BUILD EQ BARS\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst eqBarsEl = document.getElementById('eqBars');\nfor (let i = 0; i < 48; i++) {\n const b = document.createElement('div');\n b.className = 'eq-bar';\n const h = Math.random() * 80 + 10;\n const d = (0.4 + Math.random() * 1.2).toFixed(2);\n const dl = (Math.random() * 0.8).toFixed(2);\n b.style.cssText = `--h:${h}px;--d:${d}s;--dl:${dl}s;height:${Math.random()*20+5}px`;\n eqBarsEl.appendChild(b);\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ HERO WAVEFORM\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst heroWave = document.getElementById('heroWave');\nfor (let i = 0; i < 80; i++) {\n const b = document.createElement('div');\n b.className = 'wave-bar';\n const maxH = Math.floor(Math.random() * 80 + 10);\n const dur = (0.5 + Math.random() * 1.5).toFixed(2);\n const delay = (Math.random() * 1).toFixed(2);\n b.style.cssText = `--max-h:${maxH}%;--dur:${dur}s;--delay:${delay}s;height:${Math.random()*30+5}%`;\n heroWave.appendChild(b);\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ WAVEFORM VISUAL IN PLAYER\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst waveformVis = document.getElementById('waveformVis');\nconst NUM_BARS = 60;\nconst wvHeights = Array.from({length: NUM_BARS}, () => Math.random() * 80 + 10);\nwvHeights.forEach(h => {\n const b = document.createElement('div');\n b.className = 'wv-bar';\n b.style.height = h + '%';\n waveformVis.appendChild(b);\n});\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ AUDIO PLAYER LOGIC\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst audio = document.getElementById('audioEl');\nlet currentTrack = -1;\nlet isPlaying = false;\n\n\/\/ We use Web Audio API to generate a simple tone per track (demo \u2014 no real files)\nconst AudioCtx = window.AudioContext || window.webkitAudioContext;\nlet actx = null;\nlet oscNode = null, gainNode = null;\n\nconst FREQ = [130, 155, 174, 196, 220]; \/\/ different pitches per track\n\nfunction stopSynth() {\n if (oscNode) { try { oscNode.stop(); } catch(e){} oscNode = null; }\n if (gainNode) { gainNode.disconnect(); gainNode = null; }\n}\n\nfunction playSynth(trackIdx) {\n stopSynth();\n if (!actx) actx = new AudioCtx();\n gainNode = actx.createGain();\n gainNode.gain.value = parseFloat(document.getElementById('volSlider').value);\n gainNode.connect(actx.destination);\n oscNode = actx.createOscillator();\n oscNode.type = 'sawtooth';\n oscNode.frequency.value = FREQ[trackIdx % FREQ.length];\n \/\/ Add a second osc for depth\n const osc2 = actx.createOscillator();\n osc2.type = 'sine';\n osc2.frequency.value = FREQ[trackIdx % FREQ.length] * 1.5;\n const g2 = actx.createGain(); g2.gain.value = 0.2; osc2.connect(g2); g2.connect(gainNode);\n oscNode.connect(gainNode);\n oscNode.start();\n osc2.start();\n \/\/ Simulate duration with a fake progress\n startFakeProgress(trackIdx);\n}\n\n\/\/ \u2500\u2500 Fake progress (since we don't have real audio files) \u2500\u2500\nlet fakeTimer = null;\nlet fakeElapsed = 0;\nconst FAKE_DURATION = 30; \/\/ 30 seconds demo loop\n\nfunction parseDuration(str) {\n const [m, s] = str.split(':').map(Number);\n return m * 60 + s;\n}\n\nfunction formatTime(sec) {\n const m = Math.floor(sec \/ 60);\n const s = Math.floor(sec % 60);\n return `${m}:${s.toString().padStart(2,'0')}`;\n}\n\nfunction startFakeProgress(idx) {\n clearInterval(fakeTimer);\n fakeElapsed = 0;\n const dur = parseDuration(tracks[idx].duration);\n document.getElementById('timeDuration').textContent = tracks[idx].duration;\n fakeTimer = setInterval(() => {\n fakeElapsed += 0.1;\n if (fakeElapsed >= dur) { fakeElapsed = 0; }\n const pct = (fakeElapsed \/ dur) * 100;\n document.getElementById('progressFill').style.width = pct + '%';\n document.getElementById('progressThumb').style.left = pct + '%';\n document.getElementById('timeElapsed').textContent = formatTime(fakeElapsed);\n updateWaveformProgress(pct \/ 100);\n }, 100);\n}\n\nfunction updateWaveformProgress(ratio) {\n const bars = waveformVis.querySelectorAll('.wv-bar');\n const cutoff = Math.floor(ratio * NUM_BARS);\n bars.forEach((b, i) => {\n b.classList.remove('played', 'current');\n if (i < cutoff) b.classList.add('played');\n if (i === cutoff) b.classList.add('current');\n });\n}\n\nfunction selectTrack(idx) {\n currentTrack = idx;\n isPlaying = true;\n\n \/\/ Update track list\n document.querySelectorAll('.track-item').forEach((el, i) => {\n el.classList.toggle('active', i === idx);\n });\n\n \/\/ Update now playing\n document.getElementById('nowPlayingName').textContent = tracks[idx].name;\n document.getElementById('nowPlayingSub').textContent = `SILENZAR \u00b7 ${tracks[idx].genre.toUpperCase()}`;\n\n \/\/ Update play button\n document.getElementById('btnPlay').textContent = '\u23f8';\n\n playSynth(idx);\n}\n\nfunction togglePlay() {\n if (currentTrack === -1) { selectTrack(0); return; }\n if (isPlaying) {\n isPlaying = false;\n document.getElementById('btnPlay').textContent = '\u25b6';\n stopSynth();\n clearInterval(fakeTimer);\n } else {\n isPlaying = true;\n document.getElementById('btnPlay').textContent = '\u23f8';\n playSynth(currentTrack);\n }\n}\n\ndocument.getElementById('btnPlay').addEventListener('click', togglePlay);\n\ndocument.getElementById('btnPrev').addEventListener('click', () => {\n const idx = currentTrack <= 0 ? tracks.length - 1 : currentTrack - 1;\n selectTrack(idx);\n});\n\ndocument.getElementById('btnNext').addEventListener('click', () => {\n const idx = (currentTrack + 1) % tracks.length;\n selectTrack(idx);\n});\n\ndocument.getElementById('volSlider').addEventListener('input', e => {\n if (gainNode) gainNode.gain.value = parseFloat(e.target.value);\n});\n\n\/\/ Progress bar click\ndocument.getElementById('progressWrap').addEventListener('click', e => {\n if (currentTrack === -1) return;\n const rect = e.currentTarget.getBoundingClientRect();\n const ratio = (e.clientX - rect.left) \/ rect.width;\n const dur = parseDuration(tracks[currentTrack].duration);\n fakeElapsed = ratio * dur;\n});\n\n\/\/ Track play buttons\ndocument.querySelectorAll('.track-play-btn').forEach(btn => {\n btn.addEventListener('click', e => {\n e.stopPropagation();\n selectTrack(parseInt(btn.dataset.index));\n });\n});\n\n\/\/ Note to user about audio\nconsole.log('Silenzar player: using Web Audio API synthesized tones as demo. Replace with real audio files for production.');\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>SILENZAR \u2014 Musique Originale Pour L’Image SILENZAR Musiques Catalogue \u00c0 Propos Licences Contact Demander le catalogue Musique Originale Pour L’Image UNE IDENTIT\u00c9MUSICALE FORTEPOUR VOS IMAGES Silenzar cr\u00e9e une musique intense, moderne et \u00e9motionnelle, pens\u00e9e pour le cin\u00e9ma, les s\u00e9ries, la publicit\u00e9, les bandes-annonces et le jeu vid\u00e9o. \u00c9couter Demander le catalogue \u2192 \u2665 \u00c9motion Imm\u00e9diate […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin3928","author_link":"https:\/\/silenzar.fr\/index.php\/author\/admin3928\/"},"uagb_comment_info":0,"uagb_excerpt":"SILENZAR \u2014 Musique Originale Pour L’Image SILENZAR Musiques Catalogue \u00c0 Propos Licences Contact Demander le catalogue Musique Originale Pour L’Image UNE IDENTIT\u00c9MUSICALE FORTEPOUR VOS IMAGES Silenzar cr\u00e9e une musique intense, moderne et \u00e9motionnelle, pens\u00e9e pour le cin\u00e9ma, les s\u00e9ries, la publicit\u00e9, les bandes-annonces et le jeu vid\u00e9o. \u00c9couter Demander le catalogue \u2192 \u2665 \u00c9motion Imm\u00e9diate…","_links":{"self":[{"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":1,"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/silenzar.fr\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}