{"id":22,"date":"2026-03-18T15:49:14","date_gmt":"2026-03-18T15:49:14","guid":{"rendered":"http:\/\/dmbpyjc.cluster100.hosting.ovh.net\/?page_id=22"},"modified":"2026-04-14T11:31:00","modified_gmt":"2026-04-14T11:31:00","slug":"contact","status":"publish","type":"page","link":"https:\/\/harmodul.com\/index.php\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nContact \u2014 Harmodul<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,800;1,9..40,300&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n :root {\r\n --gray-dark: #2e2e2e;\r\n --gray-mid: #555555;\r\n --white: #ffffff;\r\n --teal: #96bfad;\r\n --orange: #ff784f;\r\n --gray-light: #f4f3f1;\r\n --gray-border: #e0ddd9;\r\n --green: #466752;\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { scroll-behavior: smooth; overflow-x: hidden; }\r\n body { overflow-x: hidden; }\r\n a { color: inherit; text-decoration: none; }\r\n a:hover, a:focus, a:active, a:visited { color: inherit; text-decoration: none; outline: none; }\r\n body { font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--gray-dark); }\r\n h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.01em; }\r\n\r\n \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\r\n .reveal { opacity: 1; transform: none; transition: opacity 0.72s cubic-bezier(.22,.68,0,1.2), transform 0.72s cubic-bezier(.22,.68,0,1.2); }\r\n .reveal.anim { opacity: 0; transform: translateY(32px); }\r\n .reveal.anim.visible { opacity: 1; transform: translateY(0); }\r\n .reveal-left { opacity: 1; transform: none; transition: opacity 0.72s cubic-bezier(.22,.68,0,1.2), transform 0.72s cubic-bezier(.22,.68,0,1.2); }\r\n .reveal-left.anim { opacity: 0; transform: translateX(-40px); }\r\n .reveal-left.anim.visible { opacity: 1; transform: translateX(0); }\r\n .reveal-right { opacity: 1; transform: none; transition: opacity 0.72s cubic-bezier(.22,.68,0,1.2), transform 0.72s cubic-bezier(.22,.68,0,1.2); }\r\n .reveal-right.anim { opacity: 0; transform: translateX(40px); }\r\n .reveal-right.anim.visible { opacity: 1; transform: translateX(0); }\r\n .delay-1 { transition-delay: 0.10s; }\r\n .delay-2 { transition-delay: 0.22s; }\r\n .delay-3 { transition-delay: 0.34s; }\r\n .delay-4 { transition-delay: 0.46s; }\r\n\r\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 600;\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 0 48px; height: 100px;\r\n transition: height 0.4s ease, background 0.4s, box-shadow 0.4s;\r\n }\r\n nav.scrolled { height: 72px; background: rgba(255,255,255,0.97); box-shadow: 0 1px 0 var(--gray-border); }\r\n nav.scrolled .nav-logo-white { display: none; }\r\n nav.scrolled .nav-logo-color { display: block; }\r\n nav:not(.scrolled) .nav-logo-white { display: block; }\r\n nav:not(.scrolled) .nav-logo-color { display: none; }\r\n\r\n .nav-logo img { width: auto; transition: height 0.4s ease, transform 0.4s cubic-bezier(.34,1.56,.64,1), filter 0.4s ease; }\r\n nav:not(.scrolled) .nav-logo img { height: 88px; }\r\n nav.scrolled .nav-logo img { height: 44px; }\r\n .nav-logo:hover img {\r\n transform: scale(1.07) rotate(-1.5deg);\r\n filter: drop-shadow(0 4px 16px rgba(150,191,173,0.45));\r\n }\r\n\r\n .nav-menu { display: flex; align-items: center; gap: 36px; list-style: none; }\r\n .nav-menu a { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }\r\n nav:not(.scrolled) .nav-menu a { color: rgba(255,255,255,0.88); }\r\n nav:not(.scrolled) .nav-menu a:hover { color: var(--white); }\r\n nav.scrolled .nav-menu a { color: var(--gray-mid); }\r\n nav.scrolled .nav-menu a:hover { color: var(--gray-dark); }\r\n\r\n .nav-cta {\r\n position: relative; overflow: hidden;\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 10px 22px; background: #466752 !important; color: var(--white) !important;\r\n border-radius: 4px; font-size: 12px !important; font-weight: 700 !important;\r\n letter-spacing: 0.08em !important; text-transform: uppercase !important;\r\n transition: background 0.2s, transform 0.2s !important; text-decoration: none !important;\r\n }\r\n .nav-cta::after {\r\n content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;\r\n background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);\r\n transform: skewX(-20deg); pointer-events: none;\r\n }\r\n .nav-cta:hover::after { left: 130%; transition: left 0.5s cubic-bezier(.4,0,.2,1); }\r\n .nav-cta:hover { background: #354f3e !important; transform: translateY(-1px) !important; color: var(--white) !important; }\r\n .nav-cta:focus, .nav-cta:active, .nav-cta:visited { color: var(--white) !important; background: #466752 !important; }\r\n\r\n \/* \u2500\u2500 HAMBURGER \u2500\u2500 *\/\r\n .hamburger {\r\n display: none;\r\n flex-direction: column; justify-content: center; align-items: center;\r\n width: 44px; height: 44px;\r\n cursor: pointer; background: transparent !important;\r\n border: none; padding: 0; position: relative; flex-shrink: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n -webkit-appearance: none; appearance: none;\r\n outline: none !important; box-shadow: none !important;\r\n }\r\n .hamburger:focus { outline: none !important; }\r\n .hamburger:active { background: transparent !important; }\r\n .hamburger span {\r\n display: block; width: 24px; height: 2px; border-radius: 2px; position: absolute;\r\n transition: transform 0.35s cubic-bezier(.77,0,.175,1), opacity 0.2s, background 0.3s;\r\n }\r\n .hamburger span:nth-child(1) { transform: translateY(-8px); }\r\n .hamburger span:nth-child(2) { transform: translateY(0); }\r\n .hamburger span:nth-child(3) { transform: translateY(8px); }\r\n nav:not(.scrolled) .hamburger span { background: var(--white); }\r\n nav.scrolled .hamburger:not(.open) span { background: var(--gray-dark); }\r\n nav:not(.scrolled) .hamburger.open span { background: var(--white) !important; }\r\n nav.scrolled .hamburger.open span { background: var(--gray-dark) !important; }\r\n .hamburger.open span:nth-child(1) { transform: translateY(0) rotate(45deg); }\r\n .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }\r\n .hamburger.open span:nth-child(3) { transform: translateY(0) rotate(-45deg); }\r\n\r\n \/* \u2500\u2500 MOBILE MENU OVERLAY \u2500\u2500 *\/\r\n .mobile-menu-overlay {\r\n position: fixed; inset: 0; z-index: 500;\r\n background: rgba(20,20,20,0.98);\r\n display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n opacity: 0; visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0.3s ease;\r\n pointer-events: none;\r\n }\r\n .mobile-menu-overlay.active { opacity: 1; visibility: visible; pointer-events: all; }\r\n .mobile-menu-overlay ul {\r\n list-style: none; display: flex; flex-direction: column;\r\n align-items: center; gap: 8px; width: 100%; padding: 0 32px;\r\n }\r\n .mobile-menu-overlay ul li a {\r\n display: block; font-size: 22px; font-weight: 700;\r\n color: rgba(255,255,255,0.85); letter-spacing: 0.04em; text-transform: uppercase;\r\n padding: 16px 0; text-align: center;\r\n border-bottom: 1px solid rgba(255,255,255,0.07); width: 100%;\r\n transition: color 0.2s;\r\n }\r\n .mobile-menu-overlay ul li:last-child a { border-bottom: none; }\r\n .mobile-menu-overlay ul li a:hover { color: var(--teal); }\r\n .mobile-menu-cta {\r\n margin-top: 32px;\r\n display: inline-flex; align-items: center; gap: 10px;\r\n padding: 15px 36px; background: #466752;\r\n color: var(--white) !important; border-radius: 4px;\r\n font-size: 14px; font-weight: 700; letter-spacing: 0.08em;\r\n text-transform: uppercase; text-decoration: none !important;\r\n }\r\n\r\n \/* \u2500\u2500 SHARED \u2500\u2500 *\/\r\n section { padding: 100px 0; }\r\n .container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }\r\n .section-label {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n font-size: 11px; font-weight: 600; letter-spacing: 0.18em;\r\n text-transform: uppercase; color: var(--teal); margin-bottom: 16px;\r\n }\r\n .section-label::before { content: ''; display: block; width: 24px; height: 1px; background: var(--teal); }\r\n .section-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--gray-dark); line-height: 1.1; margin-bottom: 20px; }\r\n .section-title-white { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--white); line-height: 1.1; margin-bottom: 20px; }\r\n .section-sub { font-size: 16px; font-weight: 300; color: var(--gray-mid); line-height: 1.8; max-width: 580px; margin-bottom: 24px; }\r\n .divider-accent { height: 4px; background: linear-gradient(90deg, var(--orange) 0%, var(--teal) 100%); }\r\n\r\n \/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\r\n .btn-primary {\r\n position: relative; overflow: hidden;\r\n display: inline-flex; align-items: center; gap: 10px;\r\n padding: 15px 30px; background: var(--orange); color: var(--white) !important;\r\n font-size: 14px; font-weight: 700; letter-spacing: 0.06em;\r\n text-decoration: none !important; border-radius: 4px; border: none; cursor: pointer;\r\n transition: background 0.2s, transform 0.2s, box-shadow 0.2s; font-family: 'DM Sans', sans-serif;\r\n }\r\n .btn-primary::after {\r\n content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;\r\n background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%);\r\n transform: skewX(-20deg); pointer-events: none;\r\n }\r\n .btn-primary:hover::after { left: 130%; transition: left 0.55s cubic-bezier(.4,0,.2,1); }\r\n .btn-primary:hover { background: #e5633a; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,120,79,0.4); color: var(--white) !important; }\r\n\r\n .btn-outline {\r\n position: relative; overflow: hidden;\r\n display: inline-flex; align-items: center; gap: 10px;\r\n padding: 15px 30px; background: transparent; color: var(--white) !important;\r\n font-size: 14px; font-weight: 700; letter-spacing: 0.06em;\r\n text-decoration: none !important; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px;\r\n transition: border-color 0.2s, background 0.2s, transform 0.2s;\r\n }\r\n .btn-outline::after {\r\n content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;\r\n background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);\r\n transform: skewX(-20deg); pointer-events: none;\r\n }\r\n .btn-outline:hover::after { left: 130%; transition: left 0.55s cubic-bezier(.4,0,.2,1); }\r\n .btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); transform: translateY(-2px); color: var(--white) !important; }\r\n\r\n \/* \u2500\u2500 FOOTER LOGO ANIMATION \u2500\u2500 *\/\r\n .footer-brand a { display: inline-block; }\r\n .footer-brand a img { transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), filter 0.4s ease; }\r\n .footer-brand a:hover img { transform: scale(1.06) rotate(1deg); filter: drop-shadow(0 4px 20px rgba(150,191,173,0.5)) brightness(1.08); }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .hero { position: relative; min-height: 68vh; display: flex; align-items: center; overflow: hidden; }\r\n .hero-bg {\r\n position: absolute; inset: 0;\r\n background-image: url('https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/task_01kmk253bsf1saa9t7fpd27nha_1774461324_img_0.webp');\r\n background-size: cover; background-position: center;\r\n transform: scale(1.04); transition: transform 8s ease;\r\n }\r\n .hero-bg.loaded { transform: scale(1); }\r\n .hero-overlay {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(100deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.15) 100%);\r\n }\r\n .hero-content { position: relative; z-index: 2; width: 100%; padding: 0 64px; padding-top: 100px; }\r\n .hero-tag {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;\r\n color: var(--teal); margin-bottom: 28px;\r\n opacity: 0; transform: translateY(20px); animation: fadeUp 0.7s 0.3s forwards;\r\n }\r\n .hero-tag::before { content: ''; display: block; width: 28px; height: 1px; background: var(--teal); }\r\n .hero h1 {\r\n font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800;\r\n color: var(--white); line-height: 1.08; max-width: 680px; margin-bottom: 24px;\r\n opacity: 0; transform: translateY(24px); animation: fadeUp 0.8s 0.5s forwards;\r\n }\r\n .hero h1 span { color: var(--teal); }\r\n .hero-sub {\r\n font-size: 20px; font-weight: 300; color: rgba(255,255,255,0.9);\r\n max-width: 520px; line-height: 1.5; margin-bottom: 12px;\r\n opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s 0.7s forwards;\r\n }\r\n .hero-desc {\r\n font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.58);\r\n max-width: 480px; line-height: 1.75;\r\n opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s 0.9s forwards;\r\n }\r\n @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }\r\n\r\n \/* \u2500\u2500 FORMULAIRE + INFOS \u2500\u2500 *\/\r\n .contact-section { background: var(--gray-light); }\r\n .contact-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }\r\n\r\n .form-card {\r\n background: var(--white); border-radius: 12px;\r\n padding: 52px 48px; border: 1px solid var(--gray-border);\r\n box-shadow: 0 4px 32px rgba(0,0,0,0.06);\r\n }\r\n .form-card .section-label { margin-bottom: 8px; }\r\n .form-card h2 { font-size: 1.8rem; font-weight: 800; color: var(--gray-dark); margin-bottom: 32px; line-height: 1.15; }\r\n .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }\r\n .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }\r\n .form-group:last-child { margin-bottom: 0; }\r\n .form-group label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-mid); }\r\n .form-group input,\r\n .form-group select,\r\n .form-group textarea {\r\n font-family: 'DM Sans', sans-serif;\r\n font-size: 14px; font-weight: 400; color: var(--gray-dark);\r\n background: var(--gray-light); border: 1.5px solid var(--gray-border);\r\n border-radius: 6px; padding: 13px 16px;\r\n transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;\r\n outline: none; width: 100%;\r\n }\r\n .form-group input::placeholder,\r\n .form-group textarea::placeholder { color: #aaa; font-weight: 300; }\r\n .form-group input:focus,\r\n .form-group select:focus,\r\n .form-group textarea:focus {\r\n border-color: var(--teal); background: var(--white);\r\n box-shadow: 0 0 0 3px rgba(150,191,173,0.15);\r\n }\r\n .form-group select {\r\n appearance: none;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat; background-position: right 16px center;\r\n background-color: var(--gray-light); padding-right: 40px; cursor: pointer;\r\n }\r\n .form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }\r\n .form-optional { font-size: 11px; color: #aaa; font-weight: 300; margin-left: 4px; }\r\n .form-submit { margin-top: 28px; }\r\n .form-submit .btn-primary { width: 100%; justify-content: center; padding: 16px 30px; font-size: 15px; }\r\n .form-submit .btn-primary svg { width: 16px; height: 16px; }\r\n .form-success {\r\n display: none; background: rgba(70,103,82,0.08); border: 1px solid rgba(70,103,82,0.2);\r\n border-radius: 8px; padding: 20px 24px; margin-top: 20px;\r\n font-size: 14px; color: var(--green); font-weight: 500; text-align: center;\r\n }\r\n .form-success.show { display: block; }\r\n\r\n .infos-col { display: flex; flex-direction: column; gap: 24px; }\r\n .info-card {\r\n background: var(--white); border: 1px solid var(--gray-border);\r\n border-radius: 10px; padding: 28px;\r\n display: flex; align-items: flex-start; gap: 18px;\r\n transition: transform 0.3s, box-shadow 0.3s;\r\n text-decoration: none !important; color: inherit !important;\r\n position: relative; overflow: hidden;\r\n }\r\n .info-card::after {\r\n content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;\r\n background: linear-gradient(180deg, var(--orange), var(--teal));\r\n transform: scaleY(0); transition: transform 0.3s; transform-origin: top;\r\n }\r\n .info-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }\r\n .info-card:hover::after { transform: scaleY(1); }\r\n .info-icon {\r\n width: 48px; height: 48px; flex-shrink: 0;\r\n background: rgba(150,191,173,0.12); border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .info-icon svg { width: 20px; height: 20px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\r\n .info-text h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-mid); margin-bottom: 6px; }\r\n .info-text p, .info-text a { font-size: 15px; font-weight: 500; color: var(--gray-dark) !important; line-height: 1.65; text-decoration: none !important; transition: color 0.2s; }\r\n .info-text a:hover { color: var(--orange) !important; }\r\n .info-text .info-sub { font-size: 13px; font-weight: 300; color: var(--gray-mid) !important; margin-top: 2px; display: block; }\r\n\r\n .qr-card {\r\n background: var(--gray-dark); border-radius: 10px; padding: 28px;\r\n display: flex; align-items: center; gap: 20px;\r\n background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.02) 50px, rgba(255,255,255,0.02) 56px);\r\n }\r\n .qr-card img { width: 80px; height: 80px; border-radius: 6px; flex-shrink: 0; background: var(--white); padding: 4px; }\r\n .qr-card-text h4 { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 6px; }\r\n .qr-card-text p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; }\r\n\r\n \/* \u2500\u2500 CARTE \u2500\u2500 *\/\r\n .map-section { padding: 0; }\r\n .map-header { padding: 72px 0 48px; background: var(--white); text-align: center; }\r\n .map-header .section-sub { margin: 0 auto; }\r\n .map-embed { width: 100%; height: 460px; display: block; border: none; filter: grayscale(20%); }\r\n\r\n \/* \u2500\u2500 CTA \u2500\u2500 *\/\r\n .cta-section { padding: 0; position: relative; overflow: hidden; }\r\n .cta-inner { position: relative; min-height: 480px; display: flex; align-items: center; }\r\n .cta-bg {\r\n position: absolute; inset: 0;\r\n background-image: url('https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/task_01kmk5x37cebz9vwvb9zdb4fyt_1774465263_img_0.webp');\r\n background-size: cover; background-position: center;\r\n }\r\n .cta-overlay {\r\n position: absolute; inset: 0; background-color: rgba(30,30,30,0.88);\r\n background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.02) 50px, rgba(255,255,255,0.02) 56px);\r\n }\r\n .cta-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 80px 48px; text-align: center; }\r\n .cta-content .section-label { justify-content: center; }\r\n .cta-content h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--white); margin-bottom: 20px; }\r\n .cta-content p { font-size: 17px; color: rgba(255,255,255,0.7); max-width: 480px; margin: 0 auto 48px; line-height: 1.8; font-weight: 300; }\r\n .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n background-color: #1e1e1e;\r\n background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.015) 50px, rgba(255,255,255,0.015) 56px);\r\n padding: 64px 0 32px; color: rgba(255,255,255,0.7);\r\n }\r\n .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }\r\n .footer-brand img { height: 110px; margin-bottom: 20px; display: block; }\r\n .footer-brand p { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.5); max-width: 260px; }\r\n .footer-col h5 { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); margin-bottom: 20px; }\r\n .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }\r\n .footer-col ul a { font-size: 14px; color: rgba(255,255,255,0.5); transition: color 0.2s; }\r\n .footer-col ul a:hover { color: var(--teal); }\r\n .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }\r\n .footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.35); white-space: nowrap; }\r\n\r\n \/* \u2500\u2500 WHATSAPP \u2500\u2500 *\/\r\n .whatsapp-btn {\r\n position: fixed; bottom: 28px; right: 28px; z-index: 400;\r\n width: 56px; height: 56px; border-radius: 50%;\r\n background: #25D366; color: var(--white);\r\n display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 4px 20px rgba(37,211,102,0.4);\r\n transition: transform 0.2s, box-shadow 0.2s; text-decoration: none !important;\r\n }\r\n .whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,0.5); color: var(--white) !important; }\r\n .whatsapp-btn svg { width: 28px; height: 28px; }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 1024px) {\r\n nav { padding: 0 28px; }\r\n .container { padding: 0 28px; }\r\n .contact-inner { gap: 40px; }\r\n .footer-inner { grid-template-columns: 1fr 1fr; }\r\n }\r\n @media (max-width: 900px) {\r\n .contact-inner { grid-template-columns: 1fr; }\r\n .form-card { padding: 36px 28px; }\r\n }\r\n @media (max-width: 768px) {\r\n nav { padding: 0 20px; }\r\n nav .nav-menu { display: none; }\r\n .hamburger { display: flex; }\r\n\r\n .container { padding: 0 20px; }\r\n section { padding: 72px 0; }\r\n .hero-content { padding: 0 20px; padding-top: 72px; }\r\n .form-row { grid-template-columns: 1fr; }\r\n .map-header { padding: 56px 20px 36px; }\r\n .cta-content { padding: 64px 20px; }\r\n\r\n \/* Footer mobile *\/\r\n .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 32px; }\r\n .footer-brand img { margin: 0 auto 20px; }\r\n .footer-brand p { max-width: 100%; margin: 0 auto; }\r\n .footer-col.footer-hide-mobile { display: none; }\r\n .footer-col ul { align-items: center; }\r\n .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }\r\n .footer-bottom p { white-space: normal; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2500\u2500 WHATSAPP \u2500\u2500 -->\r\n<a href=\"https:\/\/wa.me\/22600000000\" target=\"_blank\" rel=\"noopener\" class=\"whatsapp-btn\" title=\"Nous contacter sur WhatsApp\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/>\r\n <\/svg>\r\n<\/a>\r\n\r\n<!-- \u2500\u2500 NAV \u2500\u2500 -->\r\n<nav id=\"navbar\">\r\n <a href=\"https:\/\/harmodul.com\" class=\"nav-logo\">\r\n <img decoding=\"async\" class=\"nav-logo-white\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png\" alt=\"Harmodul\">\r\n <img decoding=\"async\" class=\"nav-logo-color\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-1.png\" alt=\"Harmodul\">\r\n <\/a>\r\n <ul class=\"nav-menu\">\r\n <li><a href=\"https:\/\/harmodul.com\">Accueil<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/\">Concept<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/nos-modules\/\">Nos modules<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/presentation\/\">Pr\u00e9sentation<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/contact\/\" class=\"nav-cta\">Devis<\/a><\/li>\r\n <\/ul>\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n<\/nav>\r\n\r\n<!-- \u2500\u2500 MOBILE MENU OVERLAY \u2500\u2500 -->\r\n<div class=\"mobile-menu-overlay\" id=\"mobileMenu\">\r\n <ul>\r\n <li><a href=\"https:\/\/harmodul.com\" onclick=\"closeMobileMenu()\">Accueil<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/\" onclick=\"closeMobileMenu()\">Concept<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/nos-modules\/\" onclick=\"closeMobileMenu()\">Nos modules<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/presentation\/\" onclick=\"closeMobileMenu()\">Pr\u00e9sentation<\/a><\/li>\r\n <\/ul>\r\n <a href=\"https:\/\/harmodul.com\/index.php\/contact\/\" class=\"mobile-menu-cta\" onclick=\"closeMobileMenu()\">Demander un devis \u2192<\/a>\r\n<\/div>\r\n\r\n<!-- \u2500\u2500 HERO \u2500\u2500 -->\r\n<section class=\"hero\">\r\n <div class=\"hero-bg\" id=\"heroBg\"><\/div>\r\n <div class=\"hero-overlay\"><\/div>\r\n <div class=\"hero-content\">\r\n <div class=\"hero-tag\">Contact<\/div>\r\n <h1>Contactez-<span>nous<\/span><\/h1>\r\n <p class=\"hero-sub\">Un projet ? Parlons-en.<\/p>\r\n <p class=\"hero-desc\">Notre \u00e9quipe est \u00e0 votre \u00e9coute pour \u00e9tudier votre projet et vous proposer une solution adapt\u00e9e.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"divider-accent\"><\/div>\r\n\r\n<!-- \u2500\u2500 FORMULAIRE + INFOS \u2500\u2500 -->\r\n<section class=\"contact-section\">\r\n <div class=\"container\">\r\n <div class=\"contact-inner\">\r\n\r\n <!-- FORMULAIRE -->\r\n <div class=\"form-card reveal-left\">\r\n <div class=\"section-label\">Votre demande<\/div>\r\n <h2>D\u00e9crivez votre projet<\/h2>\r\n\r\n <form id=\"contactForm\" onsubmit=\"handleSubmit(event)\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"nom\">Nom<\/label>\r\n <input type=\"text\" id=\"nom\" name=\"nom\" placeholder=\"Votre nom\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"prenom\">Pr\u00e9nom<\/label>\r\n <input type=\"text\" id=\"prenom\" name=\"prenom\" placeholder=\"Votre pr\u00e9nom\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"email\">Email<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"votre@email.com\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"telephone\">T\u00e9l\u00e9phone<\/label>\r\n <input type=\"tel\" id=\"telephone\" name=\"telephone\" placeholder=\"+226 00 00 00 00\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"type_projet\">Type de projet<\/label>\r\n <select id=\"type_projet\" name=\"type_projet\" required>\r\n <option value=\"\" disabled selected>Choisir un type\u2026<\/option>\r\n <option value=\"Habitat\">\ud83c\udfe0 Habitat<\/option>\r\n <option value=\"Commerce \/ Bureau\">\ud83c\udfe2 Commerce \/ Bureau<\/option>\r\n <option value=\"Agricole\">\ud83c\udf31 Agricole<\/option>\r\n <option value=\"Formation\">\ud83c\udf93 Formation<\/option>\r\n <option value=\"Autre\">\u2726 Autre<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"localisation\">Localisation du projet<\/label>\r\n <input type=\"text\" id=\"localisation\" name=\"localisation\" placeholder=\"Ville, pays\u2026\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"budget\">Budget estimatif <span class=\"form-optional\">(optionnel)<\/span><\/label>\r\n <input type=\"text\" id=\"budget\" name=\"budget\" placeholder=\"Ex : 20 000 \u20ac\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"delai\">D\u00e9lai souhait\u00e9 <span class=\"form-optional\">(optionnel)<\/span><\/label>\r\n <input type=\"text\" id=\"delai\" name=\"delai\" placeholder=\"Ex : 3 mois, fin 2025\u2026\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"message\">Message<\/label>\r\n <textarea id=\"message\" name=\"message\" placeholder=\"D\u00e9crivez votre projet, vos besoins, vos contraintes\u2026\" required><\/textarea>\r\n <\/div>\r\n <div class=\"form-submit\">\r\n <button type=\"submit\" class=\"btn-primary\">\r\n Envoyer la demande\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n\r\n <div class=\"form-success\" id=\"formSuccess\">\r\n \u2713 Votre demande a bien \u00e9t\u00e9 envoy\u00e9e ! Nous vous r\u00e9pondons dans les plus brefs d\u00e9lais.\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- INFOS CONTACT -->\r\n <div class=\"infos-col reveal-right\">\r\n <div class=\"section-label\">Nos coordonn\u00e9es<\/div>\r\n\r\n <div class=\"info-card\" onclick=\"window.location='mailto:contact@harmodul.com'\" style=\"cursor:pointer;\">\r\n <div class=\"info-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\r\n <\/div>\r\n <div class=\"info-text\">\r\n <h4>Email<\/h4>\r\n <p><a href=\"mailto:contact@harmodul.com\">contact@harmodul.com<\/a><\/p>\r\n <span class=\"info-sub\">R\u00e9ponse sous 24\u201348 h<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"info-card\" style=\"flex-direction:column; gap:12px;\">\r\n <div style=\"display:flex; align-items:center; gap:18px; width:100%;\">\r\n <div class=\"info-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.67A2 2 0 012 .18h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"info-text\">\r\n <h4>T\u00e9l\u00e9phone<\/h4>\r\n <a href=\"tel:+22600000000\">+226 00 00 00 00<\/a>\r\n <a href=\"tel:+33652565173\" style=\"display:block; margin-top:3px;\">+33 6 52 56 51 73<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/maps.google.com\/?q=Immeuble+Business+Fann+Av+Cheikh+Anta+Diop+Dakar+Senegal\" target=\"_blank\" rel=\"noopener\" class=\"info-card\">\r\n <div class=\"info-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n <\/div>\r\n <div class=\"info-text\">\r\n <h4>Adresse<\/h4>\r\n <p>Immeuble Business Fann<br>Av. Cheikh Anta Diop<br>Dakar \u2013 S\u00e9n\u00e9gal<\/p>\r\n <span class=\"info-sub\">Voir sur Google Maps \u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <div class=\"qr-card\">\r\n <img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-6.png\" alt=\"QR Code contact Harmodul\">\r\n <div class=\"qr-card-text\">\r\n <h4>Contact rapide<\/h4>\r\n <p>Scannez ce QR code pour nous contacter rapidement depuis votre t\u00e9l\u00e9phone.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 CARTE \u2500\u2500 -->\r\n<section class=\"map-section\">\r\n <div class=\"map-header reveal\">\r\n <div class=\"container\">\r\n <div class=\"section-label\" style=\"justify-content:center;\">Notre localisation<\/div>\r\n <h2 class=\"section-title\" style=\"text-align:center;\">Nous trouver<\/h2>\r\n <p class=\"section-sub\" style=\"text-align:center;margin:0 auto;\">Immeuble Business Fann, Av. Cheikh Anta Diop, Dakar \u2013 S\u00e9n\u00e9gal<\/p>\r\n <\/div>\r\n <\/div>\r\n <iframe\r\n class=\"map-embed\"\r\n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3859.123!2d-17.4702!3d14.6928!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xec172f5b3c0ab37%3A0x8f5a9c1e7d2b6a4c!2sAv.%20Cheikh%20Anta%20Diop%2C%20Dakar%2C%20S%C3%A9n%C3%A9gal!5e0!3m2!1sfr!2sfr!4v1680000000000\"\r\n allowfullscreen loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"\r\n title=\"Localisation Harmodul \u2013 Dakar\"\r\n ><\/iframe>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 CTA \u2500\u2500 -->\r\n<section class=\"cta-section\">\r\n <div class=\"cta-inner\">\r\n <div class=\"cta-bg\"><\/div>\r\n <div class=\"cta-overlay\"><\/div>\r\n <div class=\"cta-content\">\r\n <div class=\"section-label\">Passons \u00e0 l'action<\/div>\r\n <h2 class=\"reveal\">Un projet en t\u00eate ?<\/h2>\r\n <p class=\"reveal delay-1\">Nous vous accompagnons de l'id\u00e9e \u00e0 la r\u00e9alisation.<\/p>\r\n <div class=\"cta-actions reveal delay-2\">\r\n <a href=\"#contactForm\" class=\"btn-primary\">\r\n Demander un devis\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n <\/a>\r\n <a href=\"tel:+33652565173\" class=\"btn-outline\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.67A2 2 0 012 .18h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\"\/><\/svg>\r\n Nous appeler\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 FOOTER \u2500\u2500 -->\r\n<footer>\r\n <div class=\"container\">\r\n <div class=\"footer-inner\">\r\n <div class=\"footer-brand\">\r\n <a href=\"https:\/\/harmodul.com\"><img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png\" alt=\"Harmodul\"><\/a>\r\n <p>Harmodul con\u00e7oit et livre des espaces modulaires \u00e0 base de conteneurs pour l'habitat, les commerces et les infrastructures.<\/p>\r\n <\/div>\r\n <div class=\"footer-col footer-hide-mobile\">\r\n <h5>Navigation<\/h5>\r\n <ul>\r\n <li><a href=\"https:\/\/harmodul.com\">Accueil<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/\">Concept<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/nos-modules\/\">Nos modules<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/presentation\/\">Pr\u00e9sentation<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col footer-hide-mobile\">\r\n <h5>Solutions<\/h5>\r\n <ul>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/contact\/\">Espaces de vie<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/contact\/\">Autonomie \u00e9nerg\u00e9tique<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/contact\/\">Solutions agricoles<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/contact\/\">Centre de formation<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Contact<\/h5>\r\n <ul>\r\n <li><a href=\"mailto:contact@harmodul.com\">contact@harmodul.com<\/a><\/li>\r\n <li><a href=\"tel:+22600000000\">+226 00 00 00 00<\/a><\/li>\r\n <li><a href=\"tel:+33652565173\">+33 6 52 56 51 73<\/a><\/li>\r\n <li><a href=\"https:\/\/harmodul.com\/index.php\/contact\/\">Demander un devis<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 Harmodul. Tous droits r\u00e9serv\u00e9s.<\/p>\r\n <p style=\"color:rgba(255,255,255,0.35);font-size:12px\">Site r\u00e9alis\u00e9 par <a href=\"https:\/\/webleague.fr\" target=\"_blank\" rel=\"noopener\" style=\"color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s;\" onmouseover=\"this.style.color='#96bfad'\" onmouseout=\"this.style.color='rgba(255,255,255,0.5)'\">Webleague.fr<\/a><\/p>\r\n <p style=\"font-size:12px;display:flex;gap:16px;align-items:center\">\r\n <a href=\"https:\/\/harmodul.com\/index.php\/mentions-legales-rgpd\/\" target=\"_blank\" rel=\"noopener\" style=\"color:rgba(255,255,255,0.35);text-decoration:none;transition:color 0.2s;\" onmouseover=\"this.style.color='#96bfad'\" onmouseout=\"this.style.color='rgba(255,255,255,0.35)'\">Mentions l\u00e9gales<\/a>\r\n <span style=\"color:rgba(255,255,255,0.15)\">\u00b7<\/span>\r\n <a href=\"https:\/\/harmodul.com\/index.php\/privacy-policy\/\" target=\"_blank\" rel=\"noopener\" style=\"color:rgba(255,255,255,0.35);text-decoration:none;transition:color 0.2s;\" onmouseover=\"this.style.color='#96bfad'\" onmouseout=\"this.style.color='rgba(255,255,255,0.35)'\">Politique de confidentialit\u00e9<\/a>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n \/\/ \u2500\u2500 NAV STICKY \u2500\u2500\r\n const navbar = document.getElementById('navbar');\r\n window.addEventListener('scroll', () => {\r\n navbar.classList.toggle('scrolled', window.scrollY > 60);\r\n }, { passive: true });\r\n navbar.classList.toggle('scrolled', window.scrollY > 60);\r\n\r\n \/\/ \u2500\u2500 HERO BG \u2500\u2500\r\n const heroBg = document.getElementById('heroBg');\r\n setTimeout(() => heroBg.classList.add('loaded'), 100);\r\n\r\n \/\/ \u2500\u2500 SCROLL ANIMATIONS \u2500\u2500\r\n const allReveal = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');\r\n allReveal.forEach(el => {\r\n if (el.getBoundingClientRect().top > window.innerHeight * 0.95) el.classList.add('anim');\r\n });\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) { entry.target.classList.add('visible'); observer.unobserve(entry.target); }\r\n });\r\n }, { threshold: 0.12 });\r\n allReveal.forEach(el => { if (el.classList.contains('anim')) observer.observe(el); });\r\n\r\n \/\/ \u2500\u2500 HAMBURGER \/ MOBILE MENU \u2500\u2500\r\n const hamburger = document.getElementById('hamburger');\r\n const mobileMenu = document.getElementById('mobileMenu');\r\n\r\n function closeMobileMenu() {\r\n hamburger.classList.remove('open');\r\n mobileMenu.classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n window.closeMobileMenu = closeMobileMenu;\r\n\r\n hamburger.addEventListener('click', () => {\r\n const isOpen = hamburger.classList.toggle('open');\r\n mobileMenu.classList.toggle('active', isOpen);\r\n document.body.style.overflow = isOpen ? 'hidden' : '';\r\n });\r\n\r\n mobileMenu.addEventListener('click', (e) => {\r\n if (e.target === mobileMenu) closeMobileMenu();\r\n });\r\n\r\n \/\/ \u2500\u2500 FORMULAIRE \u2192 EMAIL MAILTO \u2500\u2500\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n const f = e.target;\r\n const nom = f.nom.value;\r\n const prenom = f.prenom.value;\r\n const email = f.email.value;\r\n const tel = f.telephone.value || 'Non renseign\u00e9';\r\n const type = f.type_projet.value;\r\n const loc = f.localisation.value;\r\n const budget = f.budget.value || 'Non renseign\u00e9';\r\n const delai = f.delai.value || 'Non renseign\u00e9';\r\n const msg = f.message.value;\r\n\r\n const subject = encodeURIComponent('Nouvelle demande de contact \u2013 Harmodul');\r\n const body = encodeURIComponent(\r\n`Bonjour,\r\n\r\nJe vous contacte via votre site internet pour un projet :\r\n\r\nNom \/ Pr\u00e9nom : ${nom} ${prenom}\r\nEmail : ${email}\r\nT\u00e9l\u00e9phone : ${tel}\r\nType de projet : ${type}\r\nLocalisation : ${loc}\r\nBudget : ${budget}\r\nD\u00e9lai : ${delai}\r\n\r\nMessage :\r\n${msg}\r\n\r\nMerci de me recontacter.`\r\n );\r\n\r\n window.location.href = `mailto:contact@harmodul.com?subject=${subject}&body=${body}`;\r\n document.getElementById('formSuccess').classList.add('show');\r\n e.target.reset();\r\n setTimeout(() => document.getElementById('formSuccess').classList.remove('show'), 6000);\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Contact \u2014 Harmodul Accueil Concept Nos modules Pr\u00e9sentation Devis Accueil Concept Nos modules Pr\u00e9sentation Demander un devis \u2192 Contact Contactez-nous Un projet ? Parlons-en. Notre \u00e9quipe est \u00e0 votre \u00e9coute pour \u00e9tudier votre projet et vous proposer une solution adapt\u00e9e. Votre demande D\u00e9crivez votre projet Nom Pr\u00e9nom Email T\u00e9l\u00e9phone Type de projet Choisir un type\u2026\ud83c\udfe0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Contact - Harmodul<\/title>\n<meta name=\"description\" content=\"Contactez Harmodul pour votre projet de construction modulaire. \u00c9tude personnalis\u00e9e, devis et accompagnement sur mesure.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/harmodul.com\/index.php\/contact\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Contact - Harmodul\" \/>\n<meta property=\"og:description\" content=\"Contactez Harmodul pour votre projet de construction modulaire. \u00c9tude personnalis\u00e9e, devis et accompagnement sur mesure.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/harmodul.com\/index.php\/contact\/\" \/>\n<meta property=\"og:site_name\" content=\"Harmodul\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-14T11:31:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/harmodul.com\/index.php\/contact\/\",\"url\":\"https:\/\/harmodul.com\/index.php\/contact\/\",\"name\":\"Contact - Harmodul\",\"isPartOf\":{\"@id\":\"https:\/\/harmodul.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/harmodul.com\/index.php\/contact\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/harmodul.com\/index.php\/contact\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png\",\"datePublished\":\"2026-03-18T15:49:14+00:00\",\"dateModified\":\"2026-04-14T11:31:00+00:00\",\"description\":\"Contactez Harmodul pour votre projet de construction modulaire. \u00c9tude personnalis\u00e9e, devis et accompagnement sur mesure.\",\"breadcrumb\":{\"@id\":\"https:\/\/harmodul.com\/index.php\/contact\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/harmodul.com\/index.php\/contact\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/harmodul.com\/index.php\/contact\/#primaryimage\",\"url\":\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png\",\"contentUrl\":\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/harmodul.com\/index.php\/contact\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/harmodul.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Contact\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/harmodul.com\/#website\",\"url\":\"https:\/\/harmodul.com\/\",\"name\":\"Harmodul\",\"description\":\"Des espaces qui ont du sens\",\"publisher\":{\"@id\":\"https:\/\/harmodul.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/harmodul.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/harmodul.com\/#organization\",\"name\":\"Harmodul\",\"url\":\"https:\/\/harmodul.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/harmodul.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-1.png\",\"contentUrl\":\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-1.png\",\"width\":500,\"height\":500,\"caption\":\"Harmodul\"},\"image\":{\"@id\":\"https:\/\/harmodul.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Contact - Harmodul","description":"Contactez Harmodul pour votre projet de construction modulaire. \u00c9tude personnalis\u00e9e, devis et accompagnement sur mesure.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/harmodul.com\/index.php\/contact\/","og_locale":"fr_FR","og_type":"article","og_title":"Contact - Harmodul","og_description":"Contactez Harmodul pour votre projet de construction modulaire. \u00c9tude personnalis\u00e9e, devis et accompagnement sur mesure.","og_url":"https:\/\/harmodul.com\/index.php\/contact\/","og_site_name":"Harmodul","article_modified_time":"2026-04-14T11:31:00+00:00","og_image":[{"url":"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/harmodul.com\/index.php\/contact\/","url":"https:\/\/harmodul.com\/index.php\/contact\/","name":"Contact - Harmodul","isPartOf":{"@id":"https:\/\/harmodul.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/harmodul.com\/index.php\/contact\/#primaryimage"},"image":{"@id":"https:\/\/harmodul.com\/index.php\/contact\/#primaryimage"},"thumbnailUrl":"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png","datePublished":"2026-03-18T15:49:14+00:00","dateModified":"2026-04-14T11:31:00+00:00","description":"Contactez Harmodul pour votre projet de construction modulaire. \u00c9tude personnalis\u00e9e, devis et accompagnement sur mesure.","breadcrumb":{"@id":"https:\/\/harmodul.com\/index.php\/contact\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/harmodul.com\/index.php\/contact\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/harmodul.com\/index.php\/contact\/#primaryimage","url":"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png","contentUrl":"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png"},{"@type":"BreadcrumbList","@id":"https:\/\/harmodul.com\/index.php\/contact\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/harmodul.com\/"},{"@type":"ListItem","position":2,"name":"Contact"}]},{"@type":"WebSite","@id":"https:\/\/harmodul.com\/#website","url":"https:\/\/harmodul.com\/","name":"Harmodul","description":"Des espaces qui ont du sens","publisher":{"@id":"https:\/\/harmodul.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/harmodul.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/harmodul.com\/#organization","name":"Harmodul","url":"https:\/\/harmodul.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/harmodul.com\/#\/schema\/logo\/image\/","url":"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-1.png","contentUrl":"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-1.png","width":500,"height":500,"caption":"Harmodul"},"image":{"@id":"https:\/\/harmodul.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":19,"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/pages\/22\/revisions\/273"}],"wp:attachment":[{"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}