{"id":20,"date":"2026-03-18T15:48:58","date_gmt":"2026-03-18T15:48:58","guid":{"rendered":"http:\/\/dmbpyjc.cluster100.hosting.ovh.net\/?page_id=20"},"modified":"2026-04-14T11:09:25","modified_gmt":"2026-04-14T11:09:25","slug":"concept-modulaire","status":"publish","type":"page","link":"https:\/\/harmodul.com\/index.php\/concept-modulaire\/","title":{"rendered":"Concept \/ Modulaire"},"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\nConcept Modulaire \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 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 .delay-5 { transition-delay: 0.58s; }\r\n .delay-6 { transition-delay: 0.70s; }\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;\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;\r\n height: 44px;\r\n cursor: pointer;\r\n background: transparent !important;\r\n border: none;\r\n padding: 0;\r\n position: relative;\r\n flex-shrink: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n outline: none !important;\r\n 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;\r\n inset: 0;\r\n z-index: 500;\r\n background: rgba(20,20,20,0.98);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n 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 {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: all;\r\n }\r\n .mobile-menu-overlay ul {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n width: 100%;\r\n padding: 0 32px;\r\n }\r\n .mobile-menu-overlay ul li a {\r\n display: block;\r\n font-size: 22px; font-weight: 700;\r\n color: rgba(255,255,255,0.85);\r\n 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);\r\n 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\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;\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_01kmk20y62f0bvqgz6jfkf8p74_1774461203_img_1.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;\r\n text-transform: uppercase; 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; margin-bottom: 16px;\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.55);\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 QU'EST-CE QUE \u2500\u2500 *\/\r\n .quoi-section { background: var(--white); }\r\n .quoi-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n .quoi-image { position: relative; border-radius: 10px; overflow: hidden; height: 480px; }\r\n .quoi-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease; }\r\n .quoi-image:hover img { transform: scale(1.04); }\r\n .quoi-image-bar { position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--orange), var(--teal)); }\r\n .quoi-badge {\r\n position: absolute; top: 24px; right: 24px;\r\n background: var(--white); border-radius: 8px; padding: 16px 20px;\r\n box-shadow: 0 8px 32px rgba(0,0,0,0.12);\r\n display: flex; align-items: center; gap: 12px;\r\n }\r\n .quoi-badge-icon { width: 40px; height: 40px; background: rgba(150,191,173,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; }\r\n .quoi-badge-icon svg { width: 18px; height: 18px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\r\n .quoi-badge-text .num { font-size: 1.4rem; font-weight: 800; color: var(--gray-dark); line-height: 1; }\r\n .quoi-badge-text .num span { color: var(--orange); }\r\n .quoi-badge-text p { font-size: 11px; color: var(--gray-mid); margin-top: 2px; }\r\n .quoi-content p { font-size: 15px; font-weight: 300; color: var(--gray-mid); line-height: 1.85; margin-bottom: 16px; }\r\n .quoi-content p:last-child { margin-bottom: 0; }\r\n\r\n \/* \u2500\u2500 PROCESSUS \u2500\u2500 *\/\r\n .process-section { background: var(--gray-light); }\r\n .process-header { text-align: center; margin-bottom: 72px; }\r\n .process-header .section-sub { margin: 0 auto; }\r\n\r\n \/* Desktop grid *\/\r\n .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }\r\n .process-steps::before {\r\n content: ''; position: absolute; top: 40px; left: 12%; right: 12%; height: 1px;\r\n background: linear-gradient(90deg, var(--orange), var(--teal)); z-index: 0;\r\n }\r\n .process-step { text-align: center; padding: 0 20px; position: relative; z-index: 1; }\r\n .process-step-num {\r\n width: 80px; height: 80px; border-radius: 50%;\r\n background: var(--white); border: 1px solid var(--gray-border);\r\n display: flex; align-items: center; justify-content: center;\r\n margin: 0 auto 28px;\r\n font-size: 22px; font-weight: 800; color: var(--gray-dark);\r\n transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;\r\n position: relative; z-index: 1;\r\n }\r\n .process-step:hover .process-step-num { background: var(--orange); color: var(--white); border-color: var(--orange); box-shadow: 0 8px 24px rgba(255,120,79,0.3); }\r\n .process-step-icon {\r\n width: 48px; height: 48px; background: rgba(150,191,173,0.12); border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;\r\n }\r\n .process-step-icon svg { width: 22px; height: 22px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\r\n .process-step h4 { font-size: 16px; font-weight: 700; color: var(--gray-dark); margin-bottom: 10px; }\r\n .process-step p { font-size: 13px; color: var(--gray-mid); line-height: 1.7; }\r\n\r\n \/* Process note \u2014 fixed to not overflow *\/\r\n .process-note {\r\n text-align: center;\r\n margin-top: 48px;\r\n padding: 20px 32px;\r\n background: var(--white);\r\n border-radius: 8px;\r\n border: 1px solid var(--gray-border);\r\n width: fit-content;\r\n max-width: 100%;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n .process-note p { font-size: 14px; color: var(--gray-mid); font-weight: 300; }\r\n .process-note strong { color: var(--gray-dark); font-weight: 700; }\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 .process-step-slide {\r\n flex: 0 0 100%;\r\n width: 100%;\r\n text-align: center;\r\n padding: 36px 24px;\r\n background: var(--white);\r\n border: 1px solid var(--gray-border);\r\n border-radius: 8px;\r\n }\r\n .mobile-carousel-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 24px;\r\n }\r\n .carousel-dot {\r\n width: 8px; height: 8px;\r\n border-radius: 50%;\r\n background: var(--gray-border);\r\n border: none;\r\n cursor: pointer;\r\n 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 AVANTAGES \u2500\u2500 *\/\r\n .avantages-section { background: var(--white); }\r\n .avantages-header { text-align: center; margin-bottom: 64px; }\r\n .avantages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n .avantage-card {\r\n background: var(--gray-light); border: 1px solid var(--gray-border);\r\n border-radius: 10px; padding: 36px 30px;\r\n display: flex; align-items: flex-start; gap: 20px;\r\n transition: transform 0.3s, box-shadow 0.3s, background 0.3s;\r\n position: relative; overflow: hidden;\r\n }\r\n .avantage-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; transform-origin: left;\r\n }\r\n .avantage-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); background: var(--white); }\r\n .avantage-card:hover::after { transform: scaleX(1); }\r\n .avantage-icon {\r\n width: 52px; height: 52px; 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 .avantage-icon img { width: 28px; height: 28px; object-fit: contain; }\r\n .avantage-text h4 { font-size: 16px; font-weight: 700; color: var(--gray-dark); margin-bottom: 6px; }\r\n .avantage-text p { font-size: 13px; color: var(--gray-mid); line-height: 1.65; }\r\n\r\n \/* \u2500\u2500 ENJEUX \u2500\u2500 *\/\r\n .enjeux-section { padding: 0; }\r\n .enjeux-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }\r\n .enjeux-image { position: relative; overflow: hidden; }\r\n .enjeux-image img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n .enjeux-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 .enjeux-content .section-label { color: var(--teal); }\r\n .enjeux-content .section-label::before { background: var(--teal); }\r\n .enjeux-content p { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.72); line-height: 1.85; margin-bottom: 16px; }\r\n .enjeux-content p:last-of-type { margin-bottom: 0; }\r\n .enjeux-stat { display: flex; gap: 40px; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.12); }\r\n .enjeux-stat-item .num { font-size: 2.4rem; font-weight: 800; color: var(--white); line-height: 1; }\r\n .enjeux-stat-item .num span { color: var(--orange); }\r\n .enjeux-stat-item p { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 6px; }\r\n\r\n \/* \u2500\u2500 AFRIQUE \u2500\u2500 *\/\r\n .afrique-section { background: var(--gray-light); }\r\n .afrique-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n .afrique-content .section-sub { max-width: 100%; margin-bottom: 20px; }\r\n .afrique-content p { font-size: 15px; font-weight: 300; color: var(--gray-mid); line-height: 1.85; margin-bottom: 16px; }\r\n .afrique-content p:last-child { margin-bottom: 0; }\r\n .afrique-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }\r\n .afrique-pill {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 8px 16px; background: var(--white); border: 1px solid var(--gray-border);\r\n border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--gray-dark);\r\n transition: border-color 0.2s, background 0.2s;\r\n }\r\n .afrique-pill:hover { border-color: var(--teal); background: rgba(150,191,173,0.08); }\r\n .afrique-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }\r\n .afrique-image { position: relative; border-radius: 10px; overflow: hidden; height: 500px; }\r\n .afrique-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease; }\r\n .afrique-image:hover img { transform: scale(1.04); }\r\n\r\n \/* \u2500\u2500 EVOLUTIF \u2500\u2500 *\/\r\n .evolutif-section { background: var(--white); }\r\n .evolutif-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n .evolutif-image { position: relative; border-radius: 10px; overflow: hidden; height: 460px; }\r\n .evolutif-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease; }\r\n .evolutif-image:hover img { transform: scale(1.04); }\r\n .evolutif-image-bar { position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--orange), var(--teal)); }\r\n .evolutif-content .section-sub { max-width: 100%; margin-bottom: 20px; }\r\n .evolutif-content p { font-size: 15px; font-weight: 300; color: var(--gray-mid); line-height: 1.85; margin-bottom: 16px; }\r\n .evolutif-tags { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }\r\n .evolutif-tag { display: flex; align-items: center; gap: 14px; }\r\n .evolutif-tag-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 .evolutif-tag-text h4 { font-size: 14px; font-weight: 700; color: var(--gray-dark); margin-bottom: 2px; }\r\n .evolutif-tag-text p { font-size: 13px; color: var(--gray-mid); line-height: 1.5; }\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_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;\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 .quoi-inner, .afrique-inner, .evolutif-inner { gap: 48px; }\r\n .enjeux-inner { grid-template-columns: 1fr; }\r\n .enjeux-image { height: 360px; }\r\n .avantages-grid { grid-template-columns: repeat(2, 1fr); }\r\n .process-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }\r\n .process-steps::before { display: none; }\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 .quoi-inner, .afrique-inner, .evolutif-inner { grid-template-columns: 1fr; }\r\n .quoi-image, .afrique-image, .evolutif-image { height: 280px; }\r\n .enjeux-inner { grid-template-columns: 1fr; }\r\n .enjeux-content { padding: 56px 28px; }\r\n .avantages-grid { grid-template-columns: 1fr; }\r\n\r\n \/* Hide desktop process grid, show carousel *\/\r\n .process-steps { display: none; }\r\n .mobile-carousel-wrapper { display: block; }\r\n .process-header { margin-bottom: 48px; }\r\n\r\n \/* process-note fully centered on mobile *\/\r\n .process-note {\r\n position: static;\r\n transform: none;\r\n left: auto;\r\n width: 100%;\r\n border-radius: 8px;\r\n margin-top: 32px;\r\n }\r\n\r\n \/* Footer mobile *\/\r\n .footer-inner {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n gap: 32px;\r\n }\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\">Le concept<\/div>\r\n <h1>Le concept <span>Harmodul<\/span><\/h1>\r\n <p class=\"hero-sub\">Une nouvelle fa\u00e7on de concevoir et construire des espaces.<\/p>\r\n <p class=\"hero-desc\">Harmodul repense la construction gr\u00e2ce \u00e0 des solutions modulaires \u00e0 partir de conteneurs recycl\u00e9s, alliant rapidit\u00e9, durabilit\u00e9 et flexibilit\u00e9.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"divider-accent\"><\/div>\r\n\r\n<!-- \u2500\u2500 QU'EST-CE QUE LA CONSTRUCTION MODULAIRE \u2500\u2500 -->\r\n<section class=\"quoi-section\">\r\n <div class=\"container\">\r\n <div class=\"quoi-inner\">\r\n <div class=\"quoi-image reveal-left\">\r\n <img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/task_01kmk5rc9zfmts84m15rpw7bpz_1774465108_img_0.webp\" alt=\"Construction modulaire\">\r\n <div class=\"quoi-image-bar\"><\/div>\r\n <div class=\"quoi-badge\">\r\n <div class=\"quoi-badge-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"quoi-badge-text\">\r\n <div class=\"num\">3<span>\u00d7<\/span><\/div>\r\n <p>plus rapide<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quoi-content reveal-right\">\r\n <div class=\"section-label\">Comprendre le modulaire<\/div>\r\n <h2 class=\"section-title\">Qu'est-ce que la construction modulaire ?<\/h2>\r\n <p class=\"section-sub\">Des espaces pr\u00e9fabriqu\u00e9s, con\u00e7us en atelier, livr\u00e9s et assembl\u00e9s sur site en un temps record.<\/p>\r\n <p>La construction modulaire repose sur l'utilisation de modules pr\u00e9fabriqu\u00e9s \u2014 notamment des conteneurs maritimes recycl\u00e9s \u2014 pour cr\u00e9er des espaces fonctionnels et \u00e9volutifs.<\/p>\r\n <p>Cette m\u00e9thode permet de concevoir rapidement des habitations, des espaces professionnels ou des infrastructures, tout en r\u00e9duisant les co\u00fbts et l'impact environnemental.<\/p>\r\n <p>Elle s'adapte \u00e0 diff\u00e9rents usages et \u00e0 des environnements vari\u00e9s, en offrant une grande libert\u00e9 de conception.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 COMMENT \u00c7A FONCTIONNE \u2500\u2500 -->\r\n<section class=\"process-section\">\r\n <div class=\"container\">\r\n <div class=\"process-header reveal\">\r\n <div class=\"section-label\">Notre m\u00e9thode<\/div>\r\n <h2 class=\"section-title\">Un principe simple et efficace<\/h2>\r\n <p class=\"section-sub\">De la mati\u00e8re premi\u00e8re \u00e0 votre espace cl\u00e9 en main, un processus ma\u00eetris\u00e9 de bout en bout.<\/p>\r\n <\/div>\r\n\r\n <!-- Desktop grid -->\r\n <div class=\"process-steps\">\r\n <div class=\"process-step reveal delay-1\">\r\n <div class=\"process-step-num\">01<\/div>\r\n <div class=\"process-step-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2\"\/><\/svg>\r\n <\/div>\r\n <h4>S\u00e9lection des conteneurs<\/h4>\r\n <p>Conteneurs maritimes recycl\u00e9s, tri\u00e9s et pr\u00e9par\u00e9s pour la transformation.<\/p>\r\n <\/div>\r\n <div class=\"process-step reveal delay-2\">\r\n <div class=\"process-step-num\">02<\/div>\r\n <div class=\"process-step-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg>\r\n <\/div>\r\n <h4>Am\u00e9nagement en atelier<\/h4>\r\n <p>Personnalisation compl\u00e8te : isolation, cloisons, \u00e9quipements, finitions.<\/p>\r\n <\/div>\r\n <div class=\"process-step reveal delay-3\">\r\n <div class=\"process-step-num\">03<\/div>\r\n <div class=\"process-step-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"1\" y=\"3\" width=\"15\" height=\"13\"\/><path d=\"M16 8h4l3 3v5h-7V8zM5.5 21a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM18.5 21a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\"\/><\/svg>\r\n <\/div>\r\n <h4>Transport sur site<\/h4>\r\n <p>Livraison directe sur votre terrain, partout en Afrique et au-del\u00e0.<\/p>\r\n <\/div>\r\n <div class=\"process-step reveal delay-4\">\r\n <div class=\"process-step-num\">04<\/div>\r\n <div class=\"process-step-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\r\n <\/div>\r\n <h4>Assemblage & installation<\/h4>\r\n <p>Mise en place rapide, mise en service et remise des cl\u00e9s.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Mobile carousel -->\r\n <div class=\"mobile-carousel-wrapper\" id=\"processCarousel\">\r\n <div class=\"mobile-carousel-track\" id=\"processTrack\">\r\n <div class=\"process-step-slide\">\r\n <div class=\"process-step-num\">01<\/div>\r\n <div class=\"process-step-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2\"\/><\/svg>\r\n <\/div>\r\n <h4>S\u00e9lection des conteneurs<\/h4>\r\n <p>Conteneurs maritimes recycl\u00e9s, tri\u00e9s et pr\u00e9par\u00e9s pour la transformation.<\/p>\r\n <\/div>\r\n <div class=\"process-step-slide\">\r\n <div class=\"process-step-num\">02<\/div>\r\n <div class=\"process-step-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg>\r\n <\/div>\r\n <h4>Am\u00e9nagement en atelier<\/h4>\r\n <p>Personnalisation compl\u00e8te : isolation, cloisons, \u00e9quipements, finitions.<\/p>\r\n <\/div>\r\n <div class=\"process-step-slide\">\r\n <div class=\"process-step-num\">03<\/div>\r\n <div class=\"process-step-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"1\" y=\"3\" width=\"15\" height=\"13\"\/><path d=\"M16 8h4l3 3v5h-7V8zM5.5 21a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM18.5 21a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\"\/><\/svg>\r\n <\/div>\r\n <h4>Transport sur site<\/h4>\r\n <p>Livraison directe sur votre terrain, partout en Afrique et au-del\u00e0.<\/p>\r\n <\/div>\r\n <div class=\"process-step-slide\">\r\n <div class=\"process-step-num\">04<\/div>\r\n <div class=\"process-step-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\r\n <\/div>\r\n <h4>Assemblage & installation<\/h4>\r\n <p>Mise en place rapide, mise en service et remise des cl\u00e9s.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mobile-carousel-dots\" id=\"processDots\"><\/div>\r\n <\/div>\r\n\r\n <!-- Note \u2014 toujours centr\u00e9e -->\r\n <div class=\"process-note reveal\">\r\n <p>Ce processus permet de gagner du temps tout en garantissant <strong>qualit\u00e9 et pr\u00e9cision<\/strong>.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 AVANTAGES \u2500\u2500 -->\r\n<section class=\"avantages-section\">\r\n <div class=\"container\">\r\n <div class=\"avantages-header reveal\">\r\n <div class=\"section-label\">Pourquoi choisir le modulaire<\/div>\r\n <h2 class=\"section-title\">Les avantages de la construction modulaire<\/h2>\r\n <\/div>\r\n <div class=\"avantages-grid\">\r\n <div class=\"avantage-card reveal delay-1\">\r\n <div class=\"avantage-icon\"><img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-1-1.png\" alt=\"Rapidit\u00e9 de construction\"><\/div>\r\n <div class=\"avantage-text\"><h4>Rapidit\u00e9 de construction<\/h4><p>Jusqu'\u00e0 2 \u00e0 3 fois plus rapide qu'une construction traditionnelle.<\/p><\/div>\r\n <\/div>\r\n <div class=\"avantage-card reveal delay-2\">\r\n <div class=\"avantage-icon\"><img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/2-1.png\" alt=\"R\u00e9duction des co\u00fbts\"><\/div>\r\n <div class=\"avantage-text\"><h4>R\u00e9duction des co\u00fbts<\/h4><p>Budget ma\u00eetris\u00e9, sans surco\u00fbts cach\u00e9s ni impr\u00e9vus de chantier.<\/p><\/div>\r\n <\/div>\r\n <div class=\"avantage-card reveal delay-3\">\r\n <div class=\"avantage-icon\"><img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/3-1.png\" alt=\"Impact environnemental r\u00e9duit\"><\/div>\r\n <div class=\"avantage-text\"><h4>Impact environnemental r\u00e9duit<\/h4><p>Moins de d\u00e9chets de chantier, empreinte carbone minimis\u00e9e.<\/p><\/div>\r\n <\/div>\r\n <div class=\"avantage-card reveal delay-1\">\r\n <div class=\"avantage-icon\"><img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/1-1.png\" alt=\"Mat\u00e9riaux recycl\u00e9s\"><\/div>\r\n <div class=\"avantage-text\"><h4>Mat\u00e9riaux recycl\u00e9s<\/h4><p>Conteneurs maritimes r\u00e9utilis\u00e9s pour une construction responsable.<\/p><\/div>\r\n <\/div>\r\n <div class=\"avantage-card reveal delay-2\">\r\n <div class=\"avantage-icon\"><img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-2-2.png\" alt=\"Flexibilit\u00e9 & \u00e9volutivit\u00e9\"><\/div>\r\n <div class=\"avantage-text\"><h4>Flexibilit\u00e9 & \u00e9volutivit\u00e9<\/h4><p>Modules agrandissables, d\u00e9pla\u00e7ables ou reconfigurables \u00e0 tout moment.<\/p><\/div>\r\n <\/div>\r\n <div class=\"avantage-card reveal delay-3\">\r\n <div class=\"avantage-icon\"><img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3-1.png\" alt=\"Adaptation aux contraintes locales\"><\/div>\r\n <div class=\"avantage-text\"><h4>Adaptation aux contraintes locales<\/h4><p>Con\u00e7u pour chaque environnement : tropical, aride, rural ou urbain.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 ENJEUX ACTUELS \u2500\u2500 -->\r\n<section class=\"enjeux-section\">\r\n <div class=\"enjeux-inner\">\r\n <div class=\"enjeux-image reveal-left\">\r\n <img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/task_01km5t7381fjv8sh3wnvnscefx_1774016802_img_1.webp\" alt=\"Enjeux actuels\">\r\n <\/div>\r\n <div class=\"enjeux-content reveal-right\">\r\n <div class=\"section-label\">Les d\u00e9fis d'aujourd'hui<\/div>\r\n <h2 class=\"section-title-white\">Construire autrement pour r\u00e9pondre aux d\u00e9fis d'aujourd'hui<\/h2>\r\n <p>Face \u00e0 l'urbanisation rapide et \u00e0 la croissance des besoins en logements et infrastructures, les m\u00e9thodes de construction traditionnelles montrent leurs limites.<\/p>\r\n <p>La construction modulaire offre une alternative concr\u00e8te, capable de r\u00e9pondre rapidement aux besoins tout en s'inscrivant dans une logique durable et responsable.<\/p>\r\n <div class=\"enjeux-stat\">\r\n <div class=\"enjeux-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=\"enjeux-stat-item\">\r\n <div class=\"num\">40<span>%<\/span><\/div>\r\n <p>de r\u00e9duction des d\u00e9chets<br>vs construction classique<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 FOCUS AFRIQUE \u2500\u2500 -->\r\n<section class=\"afrique-section\">\r\n <div class=\"container\">\r\n <div class=\"afrique-inner\">\r\n <div class=\"afrique-content reveal-left\">\r\n <div class=\"section-label\">Focus Afrique<\/div>\r\n <h2 class=\"section-title\">Le modulaire,<br>nouvel horizon africain<\/h2>\r\n <p class=\"section-sub\">Des solutions concr\u00e8tes pour accompagner la transformation d'un continent en pleine croissance.<\/p>\r\n <p>L'Afrique fait face \u00e0 des d\u00e9fis majeurs : acc\u00e8s au logement, d\u00e9veloppement des infrastructures, production agricole et acc\u00e8s \u00e0 l'\u00e9nergie.<\/p>\r\n <p>Gr\u00e2ce \u00e0 sa rapidit\u00e9 de d\u00e9ploiement et \u00e0 sa flexibilit\u00e9, la construction modulaire repr\u00e9sente une solution innovante pour accompagner cette transformation, en cr\u00e9ant des espaces adapt\u00e9s aux r\u00e9alit\u00e9s locales tout en favorisant le d\u00e9veloppement \u00e9conomique.<\/p>\r\n <div class=\"afrique-pills\">\r\n <span class=\"afrique-pill\">Logement accessible<\/span>\r\n <span class=\"afrique-pill\">Infrastructures rurales<\/span>\r\n <span class=\"afrique-pill\">Autonomie \u00e9nerg\u00e9tique<\/span>\r\n <span class=\"afrique-pill\">Production agricole<\/span>\r\n <span class=\"afrique-pill\">Emploi local<\/span>\r\n <span class=\"afrique-pill\">D\u00e9veloppement durable<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"afrique-image reveal-right\">\r\n <img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-4.png\" alt=\"Afrique modulaire\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 \u00c9VOLUTIF \u2500\u2500 -->\r\n<section class=\"evolutif-section\">\r\n <div class=\"container\">\r\n <div class=\"evolutif-inner\">\r\n <div class=\"evolutif-image reveal-left\">\r\n <img decoding=\"async\" src=\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/task_01km5v00d1ewpra7de69rn2386_1774017611_img_0.webp\" alt=\"Solution \u00e9volutive\">\r\n <div class=\"evolutif-image-bar\"><\/div>\r\n <\/div>\r\n <div class=\"evolutif-content reveal-right\">\r\n <div class=\"section-label\">Une solution \u00e9volutive<\/div>\r\n <h2 class=\"section-title\">Des projets qui \u00e9voluent avec vos besoins<\/h2>\r\n <p class=\"section-sub\">Vos besoins changent ? Vos modules aussi.<\/p>\r\n <p>Les modules peuvent \u00eatre agrandis, d\u00e9plac\u00e9s ou transform\u00e9s dans le temps. Cette flexibilit\u00e9 permet d'adapter les infrastructures aux \u00e9volutions des besoins, sans repartir de z\u00e9ro.<\/p>\r\n <div class=\"evolutif-tags\">\r\n <div class=\"evolutif-tag\">\r\n <div class=\"evolutif-tag-num\">+<\/div>\r\n <div class=\"evolutif-tag-text\">\r\n <h4>Agrandissement<\/h4>\r\n <p>Ajoutez des modules suppl\u00e9mentaires selon votre croissance.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"evolutif-tag\">\r\n <div class=\"evolutif-tag-num\">\u2194<\/div>\r\n <div class=\"evolutif-tag-text\">\r\n <h4>D\u00e9placement<\/h4>\r\n <p>Transportez votre espace vers un nouveau site si besoin.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"evolutif-tag\">\r\n <div class=\"evolutif-tag-num\">\u2726<\/div>\r\n <div class=\"evolutif-tag-text\">\r\n <h4>Transformation<\/h4>\r\n <p>Changez l'usage de votre module sans tout reconstruire.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\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\">Envie d'en savoir plus ?<\/h2>\r\n <p class=\"reveal delay-1\">D\u00e9couvrez nos solutions modulaires et imaginez votre projet avec Harmodul.<\/p>\r\n <div class=\"cta-actions reveal delay-2\">\r\n <a href=\"https:\/\/harmodul.com\/index.php\/nos-modules\/\" class=\"btn-primary\">\r\n Voir nos modules\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\">Demander un devis<\/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) {\r\n entry.target.classList.add('visible');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n allReveal.forEach(el => {\r\n if (el.classList.contains('anim')) observer.observe(el);\r\n });\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 \u2500\u2500\r\n (function() {\r\n const track = document.getElementById('processTrack');\r\n const dotsContainer = document.getElementById('processDots');\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 \/\/ Build dots\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Concept Modulaire \u2014 Harmodul Accueil Concept Nos modules Pr\u00e9sentation Devis Accueil Concept Nos modules Pr\u00e9sentation Demander un devis \u2192 Le concept Le concept Harmodul Une nouvelle fa\u00e7on de concevoir et construire des espaces. Harmodul repense la construction gr\u00e2ce \u00e0 des solutions modulaires \u00e0 partir de conteneurs recycl\u00e9s, alliant rapidit\u00e9, durabilit\u00e9 et flexibilit\u00e9. 3\u00d7 plus rapide […]<\/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-20","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>Concept \/ Modulaire - Harmodul<\/title>\n<meta name=\"description\" content=\"Qu\u2019est-ce que la construction modulaire ? D\u00e9couvrez une m\u00e9thode rapide, durable et \u00e9conomique bas\u00e9e sur les conteneurs.\" \/>\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\/concept-modulaire\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Concept \/ Modulaire - Harmodul\" \/>\n<meta property=\"og:description\" content=\"Qu\u2019est-ce que la construction modulaire ? D\u00e9couvrez une m\u00e9thode rapide, durable et \u00e9conomique bas\u00e9e sur les conteneurs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/\" \/>\n<meta property=\"og:site_name\" content=\"Harmodul\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-14T11:09:25+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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/\",\"url\":\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/\",\"name\":\"Concept \/ Modulaire - Harmodul\",\"isPartOf\":{\"@id\":\"http:\/\/harmodul.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png\",\"datePublished\":\"2026-03-18T15:48:58+00:00\",\"dateModified\":\"2026-04-14T11:09:25+00:00\",\"description\":\"Qu\u2019est-ce que la construction modulaire ? D\u00e9couvrez une m\u00e9thode rapide, durable et \u00e9conomique bas\u00e9e sur les conteneurs.\",\"breadcrumb\":{\"@id\":\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/harmodul.com\/index.php\/concept-modulaire\/#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\/concept-modulaire\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"http:\/\/harmodul.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Concept \/ Modulaire\"}]},{\"@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":"Concept \/ Modulaire - Harmodul","description":"Qu\u2019est-ce que la construction modulaire ? D\u00e9couvrez une m\u00e9thode rapide, durable et \u00e9conomique bas\u00e9e sur les conteneurs.","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\/concept-modulaire\/","og_locale":"fr_FR","og_type":"article","og_title":"Concept \/ Modulaire - Harmodul","og_description":"Qu\u2019est-ce que la construction modulaire ? D\u00e9couvrez une m\u00e9thode rapide, durable et \u00e9conomique bas\u00e9e sur les conteneurs.","og_url":"https:\/\/harmodul.com\/index.php\/concept-modulaire\/","og_site_name":"Harmodul","article_modified_time":"2026-04-14T11:09:25+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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/harmodul.com\/index.php\/concept-modulaire\/","url":"https:\/\/harmodul.com\/index.php\/concept-modulaire\/","name":"Concept \/ Modulaire - Harmodul","isPartOf":{"@id":"http:\/\/harmodul.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/harmodul.com\/index.php\/concept-modulaire\/#primaryimage"},"image":{"@id":"https:\/\/harmodul.com\/index.php\/concept-modulaire\/#primaryimage"},"thumbnailUrl":"https:\/\/harmodul.com\/wp-content\/uploads\/2026\/03\/Design-sans-titre-3.png","datePublished":"2026-03-18T15:48:58+00:00","dateModified":"2026-04-14T11:09:25+00:00","description":"Qu\u2019est-ce que la construction modulaire ? D\u00e9couvrez une m\u00e9thode rapide, durable et \u00e9conomique bas\u00e9e sur les conteneurs.","breadcrumb":{"@id":"https:\/\/harmodul.com\/index.php\/concept-modulaire\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/harmodul.com\/index.php\/concept-modulaire\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/harmodul.com\/index.php\/concept-modulaire\/#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\/concept-modulaire\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"http:\/\/harmodul.com\/"},{"@type":"ListItem","position":2,"name":"Concept \/ Modulaire"}]},{"@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\/20","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=20"}],"version-history":[{"count":13,"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":264,"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/pages\/20\/revisions\/264"}],"wp:attachment":[{"href":"https:\/\/harmodul.com\/index.php\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}