{"id":13,"date":"2026-04-20T20:03:05","date_gmt":"2026-04-20T20:03:05","guid":{"rendered":"https:\/\/sunergy.mu\/?page_id=13"},"modified":"2026-05-15T12:58:49","modified_gmt":"2026-05-15T12:58:49","slug":"home","status":"publish","type":"page","link":"https:\/\/sunergy.mu\/en\/","title":{"rendered":"Home"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\nSunergy \u2014 \u00c9nergie Solaire<\/title>\r\n\r\n<style>\r\n\/* ===========================\r\n CSS Core\r\n=========================== *\/\r\n:root {\r\n --yellow: #EAE735;\r\n --black: #111111;\r\n --white: #ffffff;\r\n --text: #1a1a1a;\r\n --text-light: #555555;\r\n --max-w: 1370px;\r\n --font: 'Greycliff', sans-serif;\r\n}\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\nhtml { scroll-behavior: smooth; }\r\n\r\nbody {\r\n font-family: var(--font);\r\n background: var(--black);\r\n color: var(--text);\r\n font-size: 16px;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* ===========================\r\n Container\r\n=========================== *\/\r\n.inner {\r\n width: 100%;\r\n max-width: var(--max-w);\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n}\r\n\r\n\/* ===========================\r\n Buttons\r\n=========================== *\/\r\n.btn {\r\n display: inline-block;\r\n background: var(--yellow);\r\n color: var(--black);\r\n font-family: var(--font);\r\n font-weight: 800;\r\n font-size: 1rem;\r\n padding: 14px 32px;\r\n border: 2.5px solid var(--yellow);\r\n cursor: pointer;\r\n text-decoration: none;\r\n letter-spacing: 0.02em;\r\n transition: background 0.2s, color 0.2s, border-color 0.2s;\r\n border-radius: 0;\r\n white-space: nowrap;\r\n}\r\n.btn:hover {\r\n background: var(--black);\r\n color: var(--yellow);\r\n border-color: var(--yellow);\r\n}\r\n\r\n.btn-black {\r\n display: inline-block;\r\n background: var(--black);\r\n color: var(--yellow);\r\n font-family: var(--font);\r\n font-weight: 800;\r\n font-size: 1rem;\r\n padding: 14px 32px;\r\n border: 2.5px solid var(--black);\r\n cursor: pointer;\r\n text-decoration: none;\r\n letter-spacing: 0.02em;\r\n transition: background 0.2s, color 0.2s, border-color 0.2s;\r\n border-radius: 0;\r\n}\r\n.btn-black:hover {\r\n background: var(--yellow);\r\n color: var(--black);\r\n border-color: var(--black);\r\n}\r\n\r\n\/* ===========================\r\n Page load to ensure logo of Sunergy is priority\r\n=========================== *\/\r\n.hero-content {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n transition: opacity 0.7s ease, transform 0.7s ease;\r\n}\r\n\r\n.page-ready .hero-content {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n.page-ready .hero-content h1 { transition: opacity 0.7s 0.3s ease, transform 0.7s 0.3s ease; }\r\n.page-ready .hero-content p { transition: opacity 0.7s 0.45s ease, transform 0.7s 0.45s ease; }\r\n.page-ready .hero-content .btn { transition: opacity 0.7s 0.6s ease, transform 0.7s 0.6s ease; }\r\n\r\n\/* ===========================\r\n Scroll targets\r\n=========================== *\/\r\n#about,\r\n#services,\r\n#solutions,\r\n#how,\r\n#contact {\r\n scroll-margin-top: 62px;\r\n}\r\n\r\n\/* ===========================\r\n Hero section\r\n=========================== *\/\r\n#hero {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100svh;\r\n display: flex;\r\n align-items: flex-end;\r\n padding-bottom: 72px;\r\n overflow: hidden;\r\n}\r\n\r\n.hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n overflow: hidden;\r\n background: var(--black);\r\n transition: background 0.6s ease;\r\n}\r\n\r\n.hero-bg video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n}\r\n\r\n.hero-bg::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,0.65) 40%, rgba(0,0,0,0.1) 100%);\r\n z-index: 2;\r\n transition: background 0.6s ease;\r\n}\r\n\r\n.hero-video-fade {\r\n position: absolute;\r\n inset: 0;\r\n background: var(--black);\r\n z-index: 1;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.8s ease;\r\n}\r\n\r\n.hero-video-fade.fading {\r\n opacity: 1;\r\n}\r\n\r\n.hero-content {\r\n position: relative;\r\n z-index: 2;\r\n color: var(--white);\r\n max-width: 640px;\r\n}\r\n\r\n.hero-content h1 {\r\n font-size: clamp(2.4rem, 8vw, 4.5rem);\r\n font-weight: 900;\r\n line-height: 1.05;\r\n margin-bottom: 20px;\r\n letter-spacing: -0.02em;\r\n}\r\n\r\n.hero-content h1 em {\r\n color: var(--yellow);\r\n font-style: normal;\r\n}\r\n\r\n.hero-content p {\r\n font-size: clamp(1rem, 3vw, 1.25rem);\r\n font-weight: 400;\r\n margin-bottom: 32px;\r\n max-width: 480px;\r\n opacity: 0.92;\r\n}\r\n\r\n@media (min-width: 769px) and (min-height: 900px) {\r\n #hero { padding-bottom: 200px; }\r\n}\r\n\r\n\/* ===========================\r\n About section\r\n=========================== *\/\r\n#about {\r\n background: var(--black);\r\n padding: 0;\r\n transition: background 0.6s ease;\r\n}\r\n\r\n.about-text-block {\r\n padding: 80px 0 10px;\r\n}\r\n\r\n#about h2 {\r\n font-size: clamp(2rem, 6vw, 3rem);\r\n font-weight: 900;\r\n margin-bottom: 16px;\r\n letter-spacing: -0.01em;\r\n color: var(--white);\r\n transition: color 0.6s ease;\r\n}\r\n\r\n#about .about-intro {\r\n font-size: 1.05rem;\r\n color: rgba(255,255,255,0.65);\r\n max-width: 560px;\r\n line-height: 1.7;\r\n transition: color 0.6s ease;\r\n}\r\n\r\n.about-image-block {\r\n width: 100%;\r\n height: 360px;\r\n position: relative;\r\n background:\r\n linear-gradient(to bottom, rgba(17,17,17,0.35) 0%, rgba(17,17,17,0.15) 40%, rgba(17,17,17,0.55) 100%),\r\n url('https:\/\/images.unsplash.com\/photo-1707247111552-aaf74241058b?q=80&w=1824&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center 65%\/ cover no-repeat;\r\n}\r\n\r\n.about-header-row {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 40px;\r\n}\r\n\r\n.about-header-text {\r\n flex: 1;\r\n order: 1;\r\n}\r\n\r\n.about-header-logo {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n order: 2;\r\n}\r\n\r\n.about-header-logo img {\r\n width: 180px;\r\n height: auto;\r\n opacity: 0.9;\r\n}\r\n\r\n.about-icons-block {\r\n padding: 36px 0 72px;\r\n}\r\n\r\n.icon-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n}\r\n\r\n.icon-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n padding: 18px 0;\r\n border-bottom: 1px solid rgba(255,255,255,0.08);\r\n transition: border-color 0.6s ease;\r\n}\r\n\r\n.icon-row:last-child { border-bottom: none; }\r\n\r\n.icon-circle {\r\n width: 56px;\r\n height: 56px;\r\n background: var(--yellow);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.icon-circle svg {\r\n width: 26px;\r\n height: 26px;\r\n fill: var(--black);\r\n}\r\n\r\n.icon-row-label {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: var(--white);\r\n line-height: 1.4;\r\n transition: color 0.6s ease;\r\n}\r\n\r\n.y-bar {\r\n display: block;\r\n width: 56px;\r\n height: 5px;\r\n background: var(--yellow);\r\n margin-bottom: 24px;\r\n}\r\n\r\n\/* ===========================\r\n Services section\r\n=========================== *\/\r\n#services {\r\n background: var(--yellow);\r\n padding: 72px 0;\r\n}\r\n\r\n#services h2 {\r\n font-size: clamp(1.8rem, 5vw, 2.8rem);\r\n font-weight: 900;\r\n margin-bottom: 36px;\r\n letter-spacing: -0.01em;\r\n color: var(--black);\r\n}\r\n\r\n.services-list {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n}\r\n\r\n.services-list li {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 20px 0;\r\n border-bottom: 2px solid rgba(0,0,0,0.1);\r\n font-size: clamp(1rem, 3vw, 1.2rem);\r\n font-weight: 700;\r\n color: var(--black);\r\n}\r\n\r\n.services-list li:last-child { border-bottom: none; }\r\n\r\n.check-icon {\r\n width: 30px;\r\n height: 30px;\r\n background: var(--black);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.check-icon svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: var(--yellow);\r\n}\r\n\r\n\/* ===========================\r\n Solutions section\r\n=========================== *\/\r\n#solutions {\r\n background: var(--black);\r\n padding: 0 0 80px;\r\n transition: background 0.6s ease;\r\n}\r\n\r\n.solutions-content {\r\n padding: 56px 0 0;\r\n}\r\n\r\n#solutions h2 {\r\n font-size: clamp(1.8rem, 5vw, 2.8rem);\r\n font-weight: 900;\r\n margin-bottom: 48px;\r\n letter-spacing: -0.01em;\r\n color: var(--white);\r\n transition: color 0.6s ease;\r\n}\r\n\r\n.solutions-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));\r\n gap: 24px;\r\n}\r\n\r\n.solution-card {\r\n border: 3px solid var(--white);\r\n background: var(--white);\r\n padding: 36px 28px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n border-radius: 0;\r\n}\r\n\r\n.solution-card.featured {\r\n background: var(--yellow);\r\n border-color: var(--yellow);\r\n}\r\n\r\n.solution-tag {\r\n display: inline-block;\r\n background: var(--black);\r\n color: var(--white);\r\n font-size: 0.72rem;\r\n font-weight: 800;\r\n letter-spacing: 0.08em;\r\n padding: 5px 12px;\r\n text-transform: uppercase;\r\n width: fit-content;\r\n border-radius: 0;\r\n}\r\n\r\n.solution-card.featured .solution-tag {\r\n background: var(--white);\r\n color: var(--black);\r\n}\r\n\r\n.solution-card h3 {\r\n font-size: clamp(1rem, 3vw, 1.2rem);\r\n font-weight: 900;\r\n line-height: 1.3;\r\n letter-spacing: -0.01em;\r\n color: var(--black);\r\n}\r\n\r\n.solution-card p {\r\n font-size: 0.93rem;\r\n line-height: 1.65;\r\n color: var(--text-light);\r\n flex: 1;\r\n}\r\n\r\n.solution-card.featured p { color: var(--black); }\r\n\r\n.ceb-badge {\r\n margin-top: 8px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 12px 16px;\r\n background: var(--white);\r\n border: 2px solid var(--black);\r\n border-radius: 0;\r\n}\r\n\r\n.ceb-logo {\r\n width: 48px;\r\n height: 48px;\r\n background: #ffffff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.ceb-info { flex: 1; }\r\n.ceb-info p { font-size: 0.8rem; font-weight: 700; color: var(--black); line-height: 1.3; margin-bottom: 4px; }\r\n.ceb-info a { font-size: 0.78rem; font-weight: 700; color: #005aa7; text-decoration: underline; }\r\n\r\n.solutions-disclaimer {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 8px;\r\n margin-top: 30px;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n color: var(--white);\r\n line-height: 1.5;\r\n transition: color 0.6s ease;\r\n}\r\n\r\n\/* ===========================\r\n How it works section\r\n=========================== *\/\r\n#how {\r\n position: relative;\r\n padding: 0;\r\n overflow: hidden;\r\n color: var(--white);\r\n}\r\n\r\n.how-bg {\r\n position: absolute;\r\n inset: 0;\r\n background:\r\n linear-gradient(to right, rgba(0,0,0,0.88) 55%, rgba(0,0,0,0.4) 100%),\r\n url('https:\/\/images.unsplash.com\/photo-1668097613572-40b7c11c8727?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center 10%\/cover no-repeat;\r\n z-index: 0;\r\n transition: background 0.6s ease;\r\n}\r\n\r\n.how-content {\r\n position: relative;\r\n z-index: 1;\r\n padding: 80px 0;\r\n}\r\n\r\n#how h2 {\r\n font-size: clamp(1.8rem, 5vw, 2.8rem);\r\n font-weight: 900;\r\n margin-bottom: 52px;\r\n letter-spacing: -0.01em;\r\n color: var(--yellow);\r\n}\r\n\r\n.label-bar {\r\n display: block;\r\n width: 48px;\r\n height: 5px;\r\n margin-bottom: 20px;\r\n}\r\n.label-bar--yellow { background: var(--yellow); }\r\n.label-bar--black { background: var(--black); }\r\n\r\n.steps {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n}\r\n\r\n.step {\r\n display: flex;\r\n gap: 24px;\r\n padding: 28px 0;\r\n border-bottom: 1px solid rgba(255,255,255,0.1);\r\n align-items: flex-start;\r\n}\r\n\r\n.step:last-child { border-bottom: none; }\r\n\r\n.step-num {\r\n font-size: clamp(3rem, 8vw, 4.5rem);\r\n font-weight: 900;\r\n color: var(--yellow);\r\n line-height: 1;\r\n min-width: 72px;\r\n letter-spacing: -0.03em;\r\n}\r\n\r\n.step-text h3 {\r\n font-size: 1.1rem;\r\n font-weight: 900;\r\n margin-bottom: 4px;\r\n color: var(--white);\r\n}\r\n\r\n.step-text p {\r\n font-size: 0.93rem;\r\n color: rgba(255,255,255,0.65);\r\n line-height: 1.5;\r\n}\r\n\r\n\/* ===========================\r\n CTA \/ contact section\r\n=========================== *\/\r\n#contact {\r\n background: var(--yellow);\r\n padding: 0;\r\n overflow: hidden;\r\n transition: background 0.6s ease, border-color 0.6s ease;\r\n}\r\n\r\n.contact-wrap {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n min-height: 460px;\r\n}\r\n\r\n.contact-left {\r\n padding: 72px 48px 72px 24px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n}\r\n\r\n#contact h2 {\r\n font-size: clamp(1.6rem, 4vw, 2.4rem);\r\n font-weight: 900;\r\n margin-bottom: 10px;\r\n letter-spacing: -0.01em;\r\n max-width: 560px;\r\n color: var(--black);\r\n line-height: 1.15;\r\n transition: color 0.6s ease;\r\n}\r\n\r\n#contact .sub {\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n margin-bottom: 28px;\r\n color: var(--text-light);\r\n transition: color 0.6s ease;\r\n}\r\n\r\n.contact-details {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n margin-bottom: 36px;\r\n}\r\n\r\n.contact-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n color: var(--black);\r\n transition: color 0.6s ease;\r\n}\r\n\r\n.contact-row svg {\r\n width: 22px;\r\n height: 22px;\r\n fill: var(--black);\r\n flex-shrink: 0;\r\n transition: fill 0.6s ease;\r\n}\r\n\r\n.contact-row a {\r\n color: var(--black);\r\n text-decoration: none;\r\n transition: color 0.6s ease;\r\n}\r\n\r\n.contact-row a:hover { text-decoration: underline; }\r\n\r\n.contact-right {\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.contact-right img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n display: block;\r\n}\r\n\r\n.contact-right::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to right, rgba(234,232,51,0.25) 0%, rgba(0,0,0,0.1) 100%);\r\n transition: background 0.6s ease;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .contact-wrap { grid-template-columns: 1fr; }\r\n .contact-right { height: 220px; }\r\n .contact-left { padding: 52px 24px; }\r\n}\r\n\r\n\/* ===========================\r\n Responsive\r\n=========================== *\/\r\n@media (max-width: 600px) {\r\n .solutions-grid { grid-template-columns: 1fr; }\r\n .about-image-block { height: 220px; }\r\n .hero-content .btn {\r\n font-size: 0.82rem;\r\n padding: 12px 20px;\r\n }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .about-header-row {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 20px;\r\n }\r\n .about-header-logo { order: 1; }\r\n .about-header-text { order: 2; }\r\n .about-header-logo img { width: 50px; }\r\n}\r\n\r\n\/* ===========================\r\n Light\/dark mode switch\r\n=========================== *\/\r\n.flip-switch-wrap {\r\n position: absolute;\r\n top: 72px;\r\n right: clamp(80px, 12vw, 100px);\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 7px;\r\n cursor: pointer;\r\n user-select: none;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.flip-switch-label {\r\n font-family: var(--font);\r\n font-size: 0.62rem;\r\n font-weight: 800;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.7);\r\n width: 80px;\r\n text-align: center;\r\n}\r\n\r\nbody.light-mode .flip-switch-label {\r\n color: rgba(255,255,255,0.7);\r\n}\r\n\r\n.flip-switch-panel {\r\n width: 54px;\r\n background: linear-gradient(160deg, #2c2c2c 0%, #1a1a1a 45%, #222 100%);\r\n border: 2px solid #3d3d3d;\r\n border-radius: 7px;\r\n padding: 14px 0 14px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 6px;\r\n box-shadow:\r\n 0 6px 20px rgba(0,0,0,0.65),\r\n inset 0 1px 0 rgba(255,255,255,0.07),\r\n inset 0 -1px 0 rgba(0,0,0,0.5);\r\n position: relative;\r\n}\r\n\r\n.flip-switch-panel::before,\r\n.flip-switch-panel::after {\r\n display: none;\r\n}\r\n\r\n.switch-on-label {\r\n font-size: 0.5rem;\r\n font-weight: 900;\r\n letter-spacing: 0.12em;\r\n line-height: 1;\r\n font-family: var(--font);\r\n color: rgba(234,231,53,0.45);\r\n transition: color 0.4s ease;\r\n}\r\n\r\n.switch-bottom-row {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 2px;\r\n}\r\n\r\n.flip-lever-housing {\r\n width: 20px;\r\n height: 54px;\r\n background: linear-gradient(180deg, #141414 0%, #0e0e0e 100%);\r\n border-radius: 3px;\r\n border: 1.5px solid #2e2e2e;\r\n display: flex;\r\n align-items: flex-end;\r\n justify-content: center;\r\n padding-bottom: 5px;\r\n box-shadow: inset 0 3px 6px rgba(0,0,0,0.7);\r\n position: relative;\r\n}\r\n\r\n.flip-lever {\r\n width: 5px;\r\n height: 34px;\r\n background: linear-gradient(to right, #b0b0b0 0%, #e8e8e8 40%, #c0c0c0 70%, #888 100%);\r\n border-radius: 3px 3px 2px 2px;\r\n transform-origin: center bottom;\r\n transform: rotate(-22deg); \r\n transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);\r\n position: relative;\r\n box-shadow: 1px 1px 3px rgba(0,0,0,0.5);\r\n}\r\n\r\n.lever-ball {\r\n position: absolute;\r\n top: -9px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 13px;\r\n height: 13px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle at 35% 30%, #f0f0f0, #a0a0a0 60%, #606060 100%);\r\n box-shadow:\r\n 0 2px 4px rgba(0,0,0,0.6),\r\n inset 0 1px 0 rgba(255,255,255,0.5),\r\n inset 0 -1px 0 rgba(0,0,0,0.3);\r\n}\r\n\r\n.switch-indicator {\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: #2a2a2a;\r\n box-shadow: inset 0 1px 3px rgba(0,0,0,0.9);\r\n transition: background 0.45s ease, box-shadow 0.45s ease;\r\n}\r\n\r\n\/* ---- Switch light mode ---- *\/\r\nbody.light-mode .flip-lever {\r\n transform: rotate(22deg); \r\n}\r\n\r\nbody.light-mode .switch-indicator {\r\n background: var(--yellow);\r\n box-shadow:\r\n 0 0 7px 2px rgba(234,231,53,0.75),\r\n 0 0 14px 5px rgba(234,231,53,0.28),\r\n inset 0 1px 1px rgba(255,255,255,0.55);\r\n}\r\n\r\nbody.light-mode .switch-on-label { color: rgba(234,231,53,0.95); }\r\n\r\n@media (max-width: 768px) {\r\n .flip-switch-wrap {\r\n top: 100px;\r\n bottom: auto;\r\n right: 20px;\r\n transform: scale(0.78);\r\n transform-origin: top right;\r\n }\r\n}\r\n\r\n\/* ===========================\r\n Light\/Dark mode\r\n=========================== *\/\r\n\r\n\r\nbody.light-mode .hero-bg::after {\r\n background: linear-gradient(\r\n to top,\r\n rgba(5,5,5,0.50) 0%,\r\n rgba(5,5,5,0.18) 55%,\r\n rgba(0,0,0,0.04) 100%\r\n );\r\n}\r\n\/* Thin golden daylight bar at top of hero *\/\r\nbody.light-mode #hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 3px;\r\n background: linear-gradient(to right, transparent 0%, var(--yellow) 30%, var(--yellow) 70%, transparent 100%);\r\n z-index: 5;\r\n}\r\n\r\n\r\n\/* About section *\/\r\nbody.light-mode #about { background: #f4f3ee; }\r\nbody.light-mode #about h2 { color: #111111; }\r\nbody.light-mode #about .about-intro { color: #444444; }\r\nbody.light-mode .icon-row { border-bottom-color: rgba(0,0,0,0.1); }\r\nbody.light-mode .icon-row-label { color: #111111; }\r\n\r\n\/* Solutions section *\/\r\nbody.light-mode #solutions { background: #f4f3ee; }\r\nbody.light-mode #solutions h2 { color: #111111; }\r\nbody.light-mode .solutions-disclaimer { color: #111111; }\r\n\r\n\/* How it works section *\/\r\nbody.light-mode .how-bg {\r\n background:\r\n linear-gradient(110deg,\r\n rgba(12,12,12,0.86) 0%,\r\n rgba(12,12,12,0.68) 48%,\r\n rgba(12,12,12,0.32) 100%\r\n ),\r\n url('https:\/\/images.unsplash.com\/photo-1668097613572-40b7c11c8727?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center 10%\/cover no-repeat;\r\n}\r\n\r\n\r\n\/* CTA \/ contact section *\/\r\nbody.light-mode #contact {\r\n background: #ffffff;\r\n border-top: 3px solid var(--yellow);\r\n}\r\nbody.light-mode #contact h2 { color: #111111; }\r\nbody.light-mode #contact .sub { color: #666666; }\r\nbody.light-mode .contact-row { color: #111111; }\r\nbody.light-mode .contact-row svg { fill: #111111; }\r\nbody.light-mode .contact-row a { color: #111111; }\r\nbody.light-mode #contact .label-bar--black { background: var(--yellow); }\r\nbody.light-mode .contact-right::after {\r\n background: linear-gradient(to right, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.04) 100%);\r\n}\r\n\r\n\/* Button *\/\r\nbody.light-mode #contact .btn-black {\r\n background: #111111;\r\n color: var(--yellow);\r\n border-color: #111111;\r\n}\r\nbody.light-mode #contact .btn-black:hover {\r\n background: var(--yellow);\r\n color: #111111;\r\n border-color: #111111;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Hero section -->\r\n<section id=\"hero\">\r\n <div class=\"hero-bg\">\r\n <video id=\"heroVideo\" autoplay muted playsinline loop>\r\n <source src=\"https:\/\/sunergy.mu\/wp-content\/uploads\/2026\/04\/Solar-Panel-Blue-PV-Intro.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"hero-video-fade\"><\/div>\r\n <\/div>\r\n\r\n<!-- Light\/dark mode switch -->\r\n<div class=\"flip-switch-wrap\" id=\"themeToggle\" role=\"button\" aria-label=\"Basculer mode clair\/sombre\" tabindex=\"0\">\r\n <div class=\"flip-switch-panel\">\r\n <div class=\"flip-lever-housing\">\r\n <div class=\"flip-lever\">\r\n <div class=\"lever-ball\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"switch-bottom-row\">\r\n <div class=\"switch-indicator\"><\/div>\r\n <span class=\"switch-on-label\">ON<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n <div class=\"inner\">\r\n <div class=\"hero-content\">\r\n <h1>Switch to <em>solar power<\/em> today !<\/h1>\r\n <p>Reduce your electricity bills with reliable and sustainable solar solutions.<\/p>\r\n <a href=\"#contact\" class=\"btn\">Request a free consultation<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<!-- Services section -->\r\n<section id=\"services\">\r\n <div class=\"inner\">\r\n <span class=\"y-bar\" style=\"background:var(--black)\"><\/span>\r\n <h2>Our services<\/h2>\r\n <ul class=\"services-list\">\r\n <li>\r\n <div class=\"check-icon\">\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\r\n <\/div>\r\n Installation of solar panels\r\n <\/li>\r\n <li>\r\n <div class=\"check-icon\">\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\r\n <\/div>\r\n Residential solutions\r\n <\/li>\r\n <li>\r\n <div class=\"check-icon\">\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\r\n <\/div>\r\n Commercial solutions\r\n <\/li>\r\n <li>\r\n <div class=\"check-icon\">\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\r\n <\/div>\r\n Energy analysis & assessment\r\n <\/li>\r\n <li>\r\n <div class=\"check-icon\">\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\r\n <\/div>\r\n Maintenance & support\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Solutions section -->\r\n<section id=\"solutions\">\r\n <div class=\"solutions-content\">\r\n <div class=\"inner\">\r\n\r\n <span class=\"y-bar\"><\/span>\r\n <h2>Our solutions<\/h2>\r\n\r\n <div class=\"solutions-grid\">\r\n\r\n <div class=\"solution-card\">\r\n <span class=\"solution-tag\">Solution 1<\/span>\r\n <h3>Grid-tied systems<br>(PV only)<\/h3>\r\n <p>These systems transform the electricity produced by solar panels into usable electricity for the home or business. The energy is converted by an inverter and used directly, without being stored in batteries.<\/p>\r\n <\/div>\r\n\r\n <div class=\"solution-card featured\">\r\n <span class=\"solution-tag\">Solution 2<\/span>\r\n <h3>Hybrid systems<br>(PV + Battery)<\/h3>\r\n <p>This system combines solar panels and a battery, while remaining connected to the grid.<br><br>The electricity produced is used primarily in the house. Any surplus is stored in the battery for later use (for example, at night).<br><br>In the event of a power outage, the battery can continue to power certain appliances. This allows for greater autonomy and better energy savings.<\/p>\r\n <div class=\"ceb-badge\">\r\n <div class=\"ceb-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/ceb.mu\/files\/images\/ceblogo.png\" alt=\"CEB \u2013 Central Electricity Board Mauritius\">\r\n <\/div>\r\n <div class=\"ceb-info\">\r\n <p>Eligible for the CEB scheme<\/p>\r\n <a href=\"https:\/\/ceb.mu\/projects\/solar-photovoltaic-scheme-for-households-2026\" target=\"_blank\" rel=\"nofollow noopener\">View the CEB scheme \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <p class=\"solutions-disclaimer\">\r\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:20px;height:20px;flex-shrink:0;margin-top:2px;\">\r\n <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--yellow)\"\/>\r\n <g transform=\"translate(12,12) scale(0.65) translate(-12,-12)\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" fill=\"var(--black)\"\/>\r\n <\/g>\r\n <\/svg>\r\n Surplus energy produced can be sent to the grid and sold to the CEB, thus reducing the electricity bill.\r\n <\/p>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- How it works section -->\r\n<section id=\"how\">\r\n <div class=\"how-bg\"><\/div>\r\n <div class=\"how-content\">\r\n <div class=\"inner\">\r\n <span class=\"label-bar label-bar--yellow\"><\/span>\r\n <h2>How does it work ?<\/h2>\r\n <div class=\"steps\">\r\n <div class=\"step\">\r\n <span class=\"step-num\">1.<\/span>\r\n <div class=\"step-text\">\r\n <h3>Analysis of your needs<\/h3>\r\n <p>Technical visit & assessment<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\">\r\n <span class=\"step-num\">2.<\/span>\r\n <div class=\"step-text\">\r\n <h3>Custom design<\/h3>\r\n <p>A solution tailored to your consumption<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\">\r\n <span class=\"step-num\">3.<\/span>\r\n <div class=\"step-text\">\r\n <h3>Installation<\/h3>\r\n <p>Quick and professional setup<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\">\r\n <span class=\"step-num\">4.<\/span>\r\n <div class=\"step-text\">\r\n <h3>Energy production<\/h3>\r\n <p>Start saving immediately<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CTA \/ contact section -->\r\n<section id=\"contact\">\r\n <div class=\"contact-wrap\">\r\n <div class=\"contact-left\">\r\n <div class=\"inner\" style=\"max-width:620px;padding-right:0;\">\r\n <span class=\"label-bar label-bar--black\"><\/span>\r\n <h2>Smart solar solutions for your home \/ business<\/h2>\r\n <p class=\"sub\">Request your free consultation<\/p>\r\n <div class=\"contact-details\">\r\n <div class=\"contact-row\">\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z\"\/><\/svg>\r\n <a href=\"tel:59221664\">5922 1664<\/a>\r\n <\/div>\r\n <div class=\"contact-row\">\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\r\n <a href=\"mailto:connect@sunergy.mu\">connect@sunergy.mu<\/a>\r\n <\/div>\r\n <\/div>\r\n <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScha3CBqOGX8g0HTrFALaKMlkc7ro67sABF0TiCjJofF54W2w\/viewform\" target=\"_blank\" class=\"btn btn-black\" rel=\"nofollow noopener\">Get my free quote<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-right\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1626251376234-8bc112f0bcd5?q=80&w=2688&auto=format&fit=crop\" alt=\"l'\u00e9nergie solaire\" loading=\"lazy\">\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- JS -->\r\n<script>\r\nconst heroVideo = document.getElementById('heroVideo');\r\n\r\nfunction revealPage() {\r\n document.body.classList.add('page-ready');\r\n}\r\n\r\nif (heroVideo) {\r\n heroVideo.addEventListener('canplay', revealPage, { once: true });\r\n setTimeout(revealPage, 1500);\r\n} else {\r\n revealPage();\r\n}\r\n\r\nif (heroVideo) {\r\n heroVideo.playbackRate = 0.6;\r\n\r\n heroVideo.addEventListener('timeupdate', () => {\r\n const fade = document.querySelector('.hero-video-fade');\r\n const timeLeft = heroVideo.duration - heroVideo.currentTime;\r\n if (timeLeft <= 1.2) {\r\n fade.classList.add('fading');\r\n } else {\r\n fade.classList.remove('fading');\r\n }\r\n });\r\n}\r\n\r\n\/\/ For light\/dark mode switch\r\nconst themeToggle = document.getElementById('themeToggle');\r\n\r\nif (localStorage.getItem('sunergy-theme') === 'light') {\r\n document.body.classList.add('light-mode');\r\n}\r\n\r\nfunction toggleTheme() {\r\n document.body.classList.toggle('light-mode');\r\n const isLight = document.body.classList.contains('light-mode');\r\n localStorage.setItem('sunergy-theme', isLight ? 'light' : 'dark');\r\n}\r\n\r\nthemeToggle.addEventListener('click', toggleTheme);\r\nthemeToggle.addEventListener('keydown', (e) => {\r\n if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleTheme(); }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Sunergy \u2014 \u00c9nergie Solaire ON Passez \u00e0 l’\u00e9nergie solaire d\u00e8s aujourd’hui ! R\u00e9duisez vos factures d’\u00e9lectricit\u00e9 avec des solutions solaires fiables et durables. Demandez une consultation gratuite Nos services Installation de panneaux solaires Solutions r\u00e9sidentielles Solutions commerciales \u00c9tude et diagnostic \u00e9nerg\u00e9tique Maintenance & support Nos solutions Solution 1 Syst\u00e8mes raccordement r\u00e9seau(PV uniquement) Ces syst\u00e8mes transforment l’\u00e9lectricit\u00e9 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sunergy.mu\/en\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunergy.mu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sunergy.mu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sunergy.mu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sunergy.mu\/en\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":306,"href":"https:\/\/sunergy.mu\/en\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":552,"href":"https:\/\/sunergy.mu\/en\/wp-json\/wp\/v2\/pages\/13\/revisions\/552"}],"wp:attachment":[{"href":"https:\/\/sunergy.mu\/en\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}