{"id":16,"date":"2026-03-18T15:48:11","date_gmt":"2026-03-18T15:48:11","guid":{"rendered":"http:\/\/dmbpyjc.cluster100.hosting.ovh.net\/?page_id=16"},"modified":"2026-04-14T11:16:14","modified_gmt":"2026-04-14T11:16:14","slug":"presentation","status":"publish","type":"page","link":"https:\/\/harmodul.com\/index.php\/presentation\/","title":{"rendered":"Pr\u00e9sentation"},"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\nPr\u00e9sentation \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\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--white);\r\n color: var(--gray-dark);\r\n }\r\n h1, h2, h3, h4 { font-family: 'DM Sans', sans-serif; font-weight: 800; letter-spacing: -0.01em; }\r\n\r\n \/* \u2500\u2500 SCROLL 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.1s; }\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;\r\n top: 0; left: 0; right: 0;\r\n z-index: 600;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 0 48px;\r\n 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;\r\n color: var(--white) !important; border-radius: 4px;\r\n 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%;\r\n 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;\r\n justify-content: center;\r\n align-items: center;\r\n width: 44px; height: 44px;\r\n cursor: pointer;\r\n background: transparent !important;\r\n border: none; padding: 0;\r\n 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;\r\n width: 24px; height: 2px;\r\n border-radius: 2px;\r\n 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\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\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;\r\n 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\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; text-transform: uppercase;\r\n 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\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\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;\r\n transition: background 0.2s, transform 0.2s, box-shadow 0.2s;\r\n }\r\n .btn-primary::after {\r\n content: ''; position: absolute; top: 0; left: -75%;\r\n 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%;\r\n 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 .divider-accent { height: 4px; background: linear-gradient(90deg, var(--orange) 0%, var(--teal) 100%); }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .hero { position: relative; min-height: 72vh; 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_01kmk5x37cebz9vwvb9zdb4fyt_1774465263_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: 17px; font-weight: 300; color: rgba(255,255,255,0.78);\r\n max-width: 520px; line-height: 1.7;\r\n opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s 0.7s forwards;\r\n }\r\n @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }\r\n\r\n \/* \u2500\u2500 QUI SOMMES-NOUS \u2500\u2500 *\/\r\n .qui-section { background: var(--white); }\r\n .qui-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n .qui-image { position: relative; border-radius: 10px; overflow: hidden; height: 480px; }\r\n .qui-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 6s ease; }\r\n .qui-image:hover img { transform: scale(1.04); }\r\n .qui-image-bar { position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--orange), var(--teal)); }\r\n .qui-content .section-sub { max-width: 100%; margin-bottom: 20px; }\r\n .qui-content p { font-size: 15px; font-weight: 300; color: var(--gray-mid); line-height: 1.85; margin-bottom: 16px; }\r\n .qui-content p:last-child { margin-bottom: 0; }\r\n\r\n \/* \u2500\u2500 MISSION \/ VISION \u2500\u2500 *\/\r\n .mv-section { background: var(--gray-light); }\r\n .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }\r\n .mv-card {\r\n background: var(--white); border: 1px solid var(--gray-border);\r\n border-radius: 10px; padding: 48px 40px;\r\n transition: transform 0.3s, box-shadow 0.3s;\r\n position: relative; overflow: hidden;\r\n }\r\n .mv-card::before {\r\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n background: linear-gradient(90deg, var(--orange), var(--teal));\r\n }\r\n .mv-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.08); }\r\n .mv-card .mv-icon {\r\n width: 56px; height: 56px; background: rgba(150,191,173,0.12); border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center; margin-bottom: 24px;\r\n }\r\n .mv-card .mv-icon svg { width: 24px; height: 24px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\r\n .mv-card h3 { font-size: 22px; font-weight: 800; color: var(--gray-dark); margin-bottom: 16px; }\r\n .mv-card p { font-size: 15px; font-weight: 300; color: var(--gray-mid); line-height: 1.85; margin-bottom: 14px; }\r\n .mv-card p:last-child { margin-bottom: 0; }\r\n\r\n \/* \u2500\u2500 AMBITION \u2500\u2500 *\/\r\n .ambition-section { padding: 0; }\r\n .ambition-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; }\r\n .ambition-image { position: relative; overflow: hidden; }\r\n .ambition-image img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n .ambition-content {\r\n padding: 80px 72px; display: flex; flex-direction: column; justify-content: center;\r\n background-color: var(--gray-dark);\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 .ambition-content .section-label { color: var(--teal); }\r\n .ambition-content .section-label::before { background: var(--teal); }\r\n .ambition-content p { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.72); line-height: 1.85; margin-bottom: 16px; }\r\n .ambition-content p:last-of-type { margin-bottom: 0; }\r\n .ambition-stat { display: flex; gap: 40px; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.12); }\r\n .ambition-stat-item .num { font-size: 2.4rem; font-weight: 800; color: var(--white); line-height: 1; }\r\n .ambition-stat-item .num span { color: var(--orange); }\r\n .ambition-stat-item p { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 6px; }\r\n\r\n \/* \u2500\u2500 ENGAGEMENTS \u2500\u2500 *\/\r\n .engagements-section { background: var(--white); }\r\n .engagements-header { text-align: center; margin-bottom: 64px; }\r\n .engagements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }\r\n .engagement-card {\r\n background: var(--gray-light); border: 1px solid var(--gray-border);\r\n border-radius: 10px; padding: 40px 28px; text-align: center;\r\n transition: transform 0.3s, box-shadow 0.3s, background 0.3s;\r\n position: relative; overflow: hidden;\r\n }\r\n .engagement-card::after {\r\n content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;\r\n background: linear-gradient(90deg, var(--orange), var(--teal));\r\n transform: scaleX(0); transition: transform 0.3s;\r\n }\r\n .engagement-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.08); background: var(--white); }\r\n .engagement-card:hover::after { transform: scaleX(1); }\r\n .engagement-icon {\r\n width: 64px; height: 64px; margin: 0 auto 24px;\r\n background: rgba(150,191,173,0.15); border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .engagement-icon svg { width: 28px; height: 28px; stroke: var(--teal); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }\r\n .engagement-card h4 { font-size: 17px; font-weight: 800; color: var(--gray-dark); margin-bottom: 10px; }\r\n .engagement-card p { font-size: 14px; color: var(--gray-mid); line-height: 1.7; }\r\n\r\n \/* \u2500\u2500 MOBILE CAROUSEL \u2500\u2500 *\/\r\n .mobile-carousel-wrapper {\r\n display: none;\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n }\r\n .mobile-carousel-track {\r\n display: flex;\r\n transition: transform 0.4s cubic-bezier(.25,.46,.45,.94);\r\n will-change: transform;\r\n }\r\n .mobile-carousel-track .engagement-card {\r\n flex: 0 0 100%;\r\n width: 100%;\r\n }\r\n .mobile-carousel-dots {\r\n display: flex; justify-content: center; gap: 8px; margin-top: 24px;\r\n }\r\n .carousel-dot {\r\n width: 8px; height: 8px; border-radius: 50%;\r\n background: var(--gray-border); border: none; cursor: pointer; padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n transition: background 0.2s, transform 0.2s;\r\n }\r\n .carousel-dot.active { background: var(--orange); transform: scale(1.25); }\r\n\r\n \/* \u2500\u2500 APPROCHE \u2500\u2500 *\/\r\n .approche-section { background: var(--gray-light); }\r\n .approche-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n .approche-content .section-sub { max-width: 100%; margin-bottom: 20px; }\r\n .approche-content p { font-size: 15px; font-weight: 300; color: var(--gray-mid); line-height: 1.85; margin-bottom: 16px; }\r\n .approche-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }\r\n .approche-step { display: flex; align-items: flex-start; gap: 16px; }\r\n .approche-step-num {\r\n width: 36px; height: 36px; flex-shrink: 0;\r\n background: var(--orange); border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 13px; font-weight: 800; color: var(--white);\r\n }\r\n .approche-step-text h4 { font-size: 14px; font-weight: 700; color: var(--gray-dark); margin-bottom: 2px; }\r\n .approche-step-text p { font-size: 13px; color: var(--gray-mid); line-height: 1.6; }\r\n .approche-image { position: relative; border-radius: 10px; overflow: hidden; height: 500px; }\r\n .approche-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease; }\r\n .approche-image:hover img { transform: scale(1.04); }\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: 520px; 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_01kmk20y62f0bvqgz6jfkf8p74_1774461203_img_1.webp');\r\n background-size: cover; background-position: center;\r\n }\r\n .cta-overlay {\r\n position: absolute; inset: 0;\r\n 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-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 .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); text-decoration: none; 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 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 1024px) {\r\n nav { padding: 0 28px; }\r\n .container { padding: 0 28px; }\r\n .qui-inner, .approche-inner { gap: 48px; }\r\n .mv-grid { grid-template-columns: 1fr; }\r\n .engagements-grid { grid-template-columns: repeat(2, 1fr); }\r\n .ambition-inner { grid-template-columns: 1fr; }\r\n .ambition-image { height: 360px; }\r\n .footer-inner { grid-template-columns: 1fr 1fr; }\r\n }\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 .qui-inner, .approche-inner { grid-template-columns: 1fr; }\r\n .qui-image, .approche-image { height: 280px; }\r\n .mv-grid { grid-template-columns: 1fr; }\r\n .ambition-inner { grid-template-columns: 1fr; }\r\n .ambition-content { padding: 56px 28px; }\r\n\r\n \/* Hide desktop engagement grid, show carousel *\/\r\n .engagements-grid { display: none; }\r\n .mobile-carousel-wrapper { display: block; }\r\n .engagements-header { margin-bottom: 48px; }\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 .cta-content { padding: 64px 20px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\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\">\u00c0 propos<\/div>\r\n <h1>\u00c0 propos de <span>Harmodul<\/span><\/h1>\r\n <p class=\"hero-sub\">Construire des espaces durables, accessibles et adapt\u00e9s aux r\u00e9alit\u00e9s de demain.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"divider-accent\"><\/div>\r\n\r\n<!-- \u2500\u2500 QUI SOMMES-NOUS \u2500\u2500 -->\r\n<section class=\"qui-section\">\r\n <div class=\"container\">\r\n <div class=\"qui-inner\">\r\n <div class=\"qui-image reveal-left\">\r\n <img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/task_01kmk5rc9zfmts84m15rpw7bpz_1774465108_img_0.webp\" alt=\"Qui sommes-nous\">\r\n <div class=\"qui-image-bar\"><\/div>\r\n <\/div>\r\n <div class=\"qui-content reveal-right\">\r\n <div class=\"section-label\">Qui sommes-nous<\/div>\r\n <h2 class=\"section-title\">Une entreprise b\u00e2tie sur<br>l'innovation modulaire<\/h2>\r\n <p class=\"section-sub\">Harmodul est sp\u00e9cialis\u00e9e dans la conception et la r\u00e9alisation de constructions modulaires \u00e0 partir de conteneurs recycl\u00e9s.<\/p>\r\n <p>Nous d\u00e9veloppons des solutions innovantes permettant de cr\u00e9er rapidement des espaces de vie, de travail et de production, tout en int\u00e9grant des enjeux essentiels tels que la durabilit\u00e9, l'accessibilit\u00e9 et l'adaptation aux environnements locaux.<\/p>\r\n <p>Notre approche repose sur une combinaison d'expertise technique, de vision strat\u00e9gique et de collaboration avec des partenaires locaux.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 MISSION & VISION \u2500\u2500 -->\r\n<section class=\"mv-section\">\r\n <div class=\"container\">\r\n <div style=\"text-align:center;margin-bottom:60px\" class=\"reveal\">\r\n <div class=\"section-label\">Notre raison d'\u00eatre<\/div>\r\n <h2 class=\"section-title\">Mission & Vision<\/h2>\r\n <\/div>\r\n <div class=\"mv-grid\">\r\n <div class=\"mv-card reveal-left\">\r\n <div class=\"mv-icon\">\r\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l3 3\"\/><\/svg>\r\n <\/div>\r\n <h3>Notre mission<\/h3>\r\n <p>Faciliter l'acc\u00e8s \u00e0 des solutions de construction modernes, durables et accessibles, tout en contribuant au d\u00e9veloppement \u00e9conomique et social des territoires.<\/p>\r\n <p>Nous avons pour ambition de proposer des alternatives concr\u00e8tes aux m\u00e9thodes traditionnelles, en r\u00e9duisant les co\u00fbts, les d\u00e9lais et l'impact environnemental.<\/p>\r\n <\/div>\r\n <div class=\"mv-card reveal-right\">\r\n <div class=\"mv-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>\r\n <\/div>\r\n <h3>Notre vision<\/h3>\r\n <p>Nous croyons en une nouvelle mani\u00e8re de construire \u2014 plus rapide, plus flexible et plus responsable.<\/p>\r\n <p>Notre vision est de faire du modulaire une solution de r\u00e9f\u00e9rence pour b\u00e2tir des espaces adapt\u00e9s aux r\u00e9alit\u00e9s locales et aux enjeux futurs.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 AMBITION \u2500\u2500 -->\r\n<section class=\"ambition-section\">\r\n <div class=\"ambition-inner\">\r\n <div class=\"ambition-image reveal-left\">\r\n <img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-2.png\" alt=\"Notre ambition en Afrique\">\r\n <\/div>\r\n <div class=\"ambition-content reveal-right\">\r\n <div class=\"section-label\">Notre ambition<\/div>\r\n <h2 class=\"section-title-white\">Acc\u00e9l\u00e9rer le d\u00e9veloppement<br>durable en Afrique<\/h2>\r\n <p>Face \u00e0 une urbanisation rapide et \u00e0 un besoin croissant en logements, infrastructures et services, Harmodul s'inscrit comme un acteur capable d'apporter des r\u00e9ponses concr\u00e8tes, durables et \u00e9volutives.<\/p>\r\n <p>Nous proposons des solutions modulaires accessibles, rapides \u00e0 d\u00e9ployer et adapt\u00e9es aux r\u00e9alit\u00e9s du terrain, au service des territoires en croissance.<\/p>\r\n <div class=\"ambition-stat\">\r\n <div class=\"ambition-stat-item\">\r\n <div class=\"num\">60<span>%<\/span><\/div>\r\n <p>des Africains vivront<br>en ville d'ici 2050<\/p>\r\n <\/div>\r\n <div class=\"ambition-stat-item\">\r\n <div class=\"num\">3<span>\u00d7<\/span><\/div>\r\n <p>plus rapide qu'une<br>construction classique<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 ENGAGEMENTS \u2500\u2500 -->\r\n<section class=\"engagements-section\">\r\n <div class=\"container\">\r\n <div class=\"engagements-header reveal\">\r\n <div class=\"section-label\">Ce qui nous guide<\/div>\r\n <h2 class=\"section-title\">Nos engagements<\/h2>\r\n <\/div>\r\n\r\n <!-- Desktop grid -->\r\n <div class=\"engagements-grid\">\r\n <div class=\"engagement-card reveal delay-1\">\r\n <div class=\"engagement-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><\/div>\r\n <h4>Durable<\/h4>\r\n <p>Utilisation de mat\u00e9riaux recycl\u00e9s et solutions respectueuses de l'environnement.<\/p>\r\n <\/div>\r\n <div class=\"engagement-card reveal delay-2\">\r\n <div class=\"engagement-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/><\/svg><\/div>\r\n <h4>Impact<\/h4>\r\n <p>Cr\u00e9ation d'emplois et contribution au d\u00e9veloppement \u00e9conomique local.<\/p>\r\n <\/div>\r\n <div class=\"engagement-card reveal delay-3\">\r\n <div class=\"engagement-icon\"><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><\/div>\r\n <h4>Local<\/h4>\r\n <p>Collaboration avec des partenaires, artisans et acteurs locaux.<\/p>\r\n <\/div>\r\n <div class=\"engagement-card reveal delay-4\">\r\n <div class=\"engagement-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg><\/div>\r\n <h4>Rapide<\/h4>\r\n <p>Construction optimis\u00e9e avec des d\u00e9lais r\u00e9duits jusqu'\u00e0 3\u00d7 plus courts.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Mobile carousel -->\r\n <div class=\"mobile-carousel-wrapper\" id=\"engagementsCarousel\">\r\n <div class=\"mobile-carousel-track\" id=\"engagementsTrack\">\r\n <div class=\"engagement-card\">\r\n <div class=\"engagement-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><\/div>\r\n <h4>Durable<\/h4>\r\n <p>Utilisation de mat\u00e9riaux recycl\u00e9s et solutions respectueuses de l'environnement.<\/p>\r\n <\/div>\r\n <div class=\"engagement-card\">\r\n <div class=\"engagement-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/><\/svg><\/div>\r\n <h4>Impact<\/h4>\r\n <p>Cr\u00e9ation d'emplois et contribution au d\u00e9veloppement \u00e9conomique local.<\/p>\r\n <\/div>\r\n <div class=\"engagement-card\">\r\n <div class=\"engagement-icon\"><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><\/div>\r\n <h4>Local<\/h4>\r\n <p>Collaboration avec des partenaires, artisans et acteurs locaux.<\/p>\r\n <\/div>\r\n <div class=\"engagement-card\">\r\n <div class=\"engagement-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg><\/div>\r\n <h4>Rapide<\/h4>\r\n <p>Construction optimis\u00e9e avec des d\u00e9lais r\u00e9duits jusqu'\u00e0 3\u00d7 plus courts.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mobile-carousel-dots\" id=\"engagementsDots\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 APPROCHE \u2500\u2500 -->\r\n<section class=\"approche-section\">\r\n <div class=\"container\">\r\n <div class=\"approche-inner\">\r\n <div class=\"approche-content reveal-left\">\r\n <div class=\"section-label\">Notre m\u00e9thode<\/div>\r\n <h2 class=\"section-title\">Une approche<br>globale<\/h2>\r\n <p class=\"section-sub\">Nous accompagnons chaque projet de A \u00e0 Z, en proposant des solutions sur mesure adapt\u00e9es aux besoins sp\u00e9cifiques de nos clients.<\/p>\r\n <p>De l'analyse initiale jusqu'\u00e0 la livraison, nous mettons l'accent sur la qualit\u00e9, la performance et la durabilit\u00e9. Notre objectif est de simplifier chaque \u00e9tape tout en garantissant un r\u00e9sultat fiable et \u00e9volutif.<\/p>\r\n <div class=\"approche-steps\" style=\"margin-top:32px\">\r\n <div class=\"approche-step\">\r\n <div class=\"approche-step-num\">01<\/div>\r\n <div class=\"approche-step-text\"><h4>Analyse des besoins<\/h4><p>\u00c9tude de votre projet, contraintes et objectifs.<\/p><\/div>\r\n <\/div>\r\n <div class=\"approche-step\">\r\n <div class=\"approche-step-num\">02<\/div>\r\n <div class=\"approche-step-text\"><h4>Conception sur mesure<\/h4><p>Plans, am\u00e9nagements et choix des mat\u00e9riaux.<\/p><\/div>\r\n <\/div>\r\n <div class=\"approche-step\">\r\n <div class=\"approche-step-num\">03<\/div>\r\n <div class=\"approche-step-text\"><h4>Fabrication en atelier<\/h4><p>Production optimis\u00e9e, qualit\u00e9 et ma\u00eetrise des co\u00fbts.<\/p><\/div>\r\n <\/div>\r\n <div class=\"approche-step\">\r\n <div class=\"approche-step-num\">04<\/div>\r\n <div class=\"approche-step-text\"><h4>Livraison cl\u00e9 en main<\/h4><p>Assemblage et mise en service sur site.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"approche-image reveal-right\">\r\n <img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-2-1.png\" alt=\"Notre approche\" style=\"object-position:center 75%\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\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\">Passez \u00e0 l'action<\/div>\r\n <h2 class=\"reveal\">Un projet ?<br>Parlons-en.<\/h2>\r\n <p class=\"reveal delay-1\">Contactez-nous pour \u00e9tudier votre projet et b\u00e9n\u00e9ficier d'une solution adapt\u00e9e \u00e0 vos besoins.<\/p>\r\n <div class=\"cta-actions reveal delay-2\">\r\n <a href=\"https:\/\/harmodul.com\/index.php\/contact\/\" 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=\"https:\/\/harmodul.com\/index.php\/contact\/\" class=\"btn-outline\">Nous contacter<\/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 <!-- Cach\u00e9es sur mobile -->\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 CAROUSEL engagements \u2500\u2500\r\n (function() {\r\n const track = document.getElementById('engagementsTrack');\r\n const dotsContainer = document.getElementById('engagementsDots');\r\n if (!track || !dotsContainer) return;\r\n\r\n const count = track.children.length;\r\n let current = 0;\r\n let startX = 0;\r\n\r\n for (let i = 0; i < count; i++) {\r\n const dot = document.createElement('button');\r\n dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');\r\n dot.setAttribute('aria-label', 'Slide ' + (i + 1));\r\n dot.addEventListener('click', () => goTo(i));\r\n dotsContainer.appendChild(dot);\r\n }\r\n\r\n function goTo(index) {\r\n current = Math.max(0, Math.min(index, count - 1));\r\n const w = track.parentElement.offsetWidth;\r\n track.style.transform = 'translateX(-' + (current * w) + 'px)';\r\n dotsContainer.querySelectorAll('.carousel-dot').forEach((d, i) => {\r\n d.classList.toggle('active', i === current);\r\n });\r\n }\r\n\r\n track.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; }, { passive: true });\r\n track.addEventListener('touchend', (e) => {\r\n const diff = startX - e.changedTouches[0].clientX;\r\n if (Math.abs(diff) > 40) goTo(diff > 0 ? current + 1 : current - 1);\r\n }, { passive: true });\r\n\r\n window.addEventListener('resize', () => goTo(current));\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<div class=\"elementor-element elementor-element-4f760ae e-grid e-con-boxed e-con e-parent\" data-id=\"4f760ae\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"ekit_has_onepagescroll_dot":"yes"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\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>Pr\u00e9sentation \u2014 Harmodul Accueil Concept Nos modules Pr\u00e9sentation Devis Accueil Concept Nos modules Pr\u00e9sentation Demander un devis \u2192 \u00c0 propos \u00c0 propos de Harmodul Construire des espaces durables, accessibles et adapt\u00e9s aux r\u00e9alit\u00e9s de demain. Qui sommes-nous Une entreprise b\u00e2tie surl’innovation modulaire Harmodul est sp\u00e9cialis\u00e9e dans la conception et la r\u00e9alisation de constructions modulaires \u00e0 […]<\/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-16","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>Pr\u00e9sentation - Harmodul<\/title>\n<meta name=\"description\" content=\"D\u00e9couvrez Harmodul, une entreprise sp\u00e9cialis\u00e9e dans la construction modulaire \u00e0 partir de conteneurs, engag\u00e9e pour des solutions durable.\" \/>\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\/presentation\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pr\u00e9sentation - Harmodul\" \/>\n<meta property=\"og:description\" content=\"D\u00e9couvrez Harmodul, une entreprise sp\u00e9cialis\u00e9e dans la construction modulaire \u00e0 partir de conteneurs, engag\u00e9e pour des solutions durable.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/harmodul.com\/index.php\/presentation\/\" \/>\n<meta property=\"og:site_name\" content=\"Harmodul\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-14T11:16:14+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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/harmodul.com\/index.php\/presentation\/\",\"url\":\"https:\/\/harmodul.com\/index.php\/presentation\/\",\"name\":\"Pr\u00e9sentation - Harmodul\",\"isPartOf\":{\"@id\":\"http:\/\/harmodul.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/harmodul.com\/index.php\/presentation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/harmodul.com\/index.php\/presentation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png\",\"datePublished\":\"2026-03-18T15:48:11+00:00\",\"dateModified\":\"2026-04-14T11:16:14+00:00\",\"description\":\"D\u00e9couvrez Harmodul, une entreprise sp\u00e9cialis\u00e9e dans la construction modulaire \u00e0 partir de conteneurs, engag\u00e9e pour des solutions durable.\",\"breadcrumb\":{\"@id\":\"https:\/\/harmodul.com\/index.php\/presentation\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/harmodul.com\/index.php\/presentation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/harmodul.com\/index.php\/presentation\/#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\/presentation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"http:\/\/harmodul.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pr\u00e9sentation\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/harmodul.com\/#website\",\"url\":\"http:\/\/harmodul.com\/\",\"name\":\"Harmodul\",\"description\":\"Des espaces qui ont du sens\",\"publisher\":{\"@id\":\"http:\/\/harmodul.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/harmodul.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/harmodul.com\/#organization\",\"name\":\"Harmodul\",\"url\":\"http:\/\/harmodul.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"http:\/\/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\":\"http:\/\/harmodul.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pr\u00e9sentation - Harmodul","description":"D\u00e9couvrez Harmodul, une entreprise sp\u00e9cialis\u00e9e dans la construction modulaire \u00e0 partir de conteneurs, engag\u00e9e pour des solutions durable.","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\/presentation\/","og_locale":"fr_FR","og_type":"article","og_title":"Pr\u00e9sentation - Harmodul","og_description":"D\u00e9couvrez Harmodul, une entreprise sp\u00e9cialis\u00e9e dans la construction modulaire \u00e0 partir de conteneurs, engag\u00e9e pour des solutions durable.","og_url":"https:\/\/harmodul.com\/index.php\/presentation\/","og_site_name":"Harmodul","article_modified_time":"2026-04-14T11:16:14+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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/harmodul.com\/index.php\/presentation\/","url":"https:\/\/harmodul.com\/index.php\/presentation\/","name":"Pr\u00e9sentation - Harmodul","isPartOf":{"@id":"http:\/\/harmodul.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/harmodul.com\/index.php\/presentation\/#primaryimage"},"image":{"@id":"https:\/\/harmodul.com\/index.php\/presentation\/#primaryimage"},"thumbnailUrl":"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png","datePublished":"2026-03-18T15:48:11+00:00","dateModified":"2026-04-14T11:16:14+00:00","description":"D\u00e9couvrez Harmodul, une entreprise sp\u00e9cialis\u00e9e dans la construction modulaire \u00e0 partir de conteneurs, engag\u00e9e pour des solutions durable.","breadcrumb":{"@id":"https:\/\/harmodul.com\/index.php\/presentation\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/harmodul.com\/index.php\/presentation\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/harmodul.com\/index.php\/presentation\/#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\/presentation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"http:\/\/harmodul.com\/"},{"@type":"ListItem","position":2,"name":"Pr\u00e9sentation"}]},{"@type":"WebSite","@id":"http:\/\/harmodul.com\/#website","url":"http:\/\/harmodul.com\/","name":"Harmodul","description":"Des espaces qui ont du sens","publisher":{"@id":"http:\/\/harmodul.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/harmodul.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"http:\/\/harmodul.com\/#organization","name":"Harmodul","url":"http:\/\/harmodul.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"http:\/\/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":"http:\/\/harmodul.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/pages\/16","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=16"}],"version-history":[{"count":16,"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":267,"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/267"}],"wp:attachment":[{"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}