{"id":1148,"date":"2025-11-12T09:03:21","date_gmt":"2025-11-12T08:03:21","guid":{"rendered":"https:\/\/hodronn.fr\/?page_id=1148"},"modified":"2025-11-12T09:34:56","modified_gmt":"2025-11-12T08:34:56","slug":"sur-mesure","status":"publish","type":"page","link":"https:\/\/hodronn.fr\/index.php\/sur-mesure\/","title":{"rendered":"Sur mesure"},"content":{"rendered":"\n
\n\n\n\n \n \n Modules Sur Mesure – Hodr\u00f8nn<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* ========================================\n VARIABLES CSS HODR\u00d8NN\n ======================================== *\/\n :root {\n --hodronn-blue: #00017B;\n --hodronn-blue-hover: #00006A;\n --blue-10: #EEF0FF;\n --blue-5: #F7F8FF;\n --ink-100: #0B0B0E;\n --ink-70: #2A2A32;\n --ink-40: #6B6B78;\n --line-10: #E9E9EF;\n --surface: #FFFFFF;\n }\n \n \/* ========================================\n RESET & BASE\n ======================================== *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;\n background: white;\n color: var(--ink-70);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n }\n \n \/* ========================================\n ANIMATIONS\n ======================================== *\/\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes gradientShift {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n \n @keyframes gradientSlide {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n \n @keyframes underlineGrow {\n to { transform: scaleX(1); }\n }\n \n \/* ========================================\n HERO SECTION\n ======================================== *\/\n .hero-section {\n min-height: 75vh;\n display: flex;\n align-items: center;\n position: relative;\n overflow: hidden;\n padding: 6rem 0 5rem;\n background: linear-gradient(180deg, white 0%, var(--blue-5) 100%);\n }\n \n .hero-background {\n position: absolute;\n inset: 0;\n z-index: 0;\n background: radial-gradient(circle at 70% 30%, var(--blue-10) 0%, transparent 60%);\n opacity: 0.6;\n }\n \n .hero-container {\n max-width: 1100px;\n margin: 0 auto;\n padding: 0 1.5rem;\n position: relative;\n z-index: 1;\n }\n \n .hero-content {\n max-width: 700px;\n margin: 0 auto;\n text-align: center;\n }\n \n .hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1.25rem;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(12px);\n border: 1px solid var(--line-10);\n border-radius: 9999px;\n box-shadow: 0 4px 20px rgba(0, 1, 123, 0.08);\n margin-bottom: 1.5rem;\n opacity: 0;\n }\n \n .hero-badge.animate {\n animation: fadeInUp 0.6s ease-out forwards;\n }\n \n .hero-badge-icon {\n width: 1rem;\n height: 1rem;\n color: var(--hodronn-blue);\n }\n \n .hero-badge-text {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--hodronn-blue);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n \n .hero-title {\n font-size: 3.5rem;\n line-height: 1.1;\n font-weight: 600;\n color: var(--ink-100);\n margin-bottom: 1.5rem;\n letter-spacing: -0.02em;\n opacity: 0;\n }\n \n .hero-title.animate {\n animation: fadeInUp 0.6s ease-out 0.1s forwards;\n }\n \n .hero-highlight {\n background: linear-gradient(135deg, var(--hodronn-blue), #6366f1, #9333ea);\n background-size: 200% 200%;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: gradientShift 5s ease infinite;\n position: relative;\n display: inline-block;\n }\n \n .hero-highlight::after {\n content: '';\n position: absolute;\n bottom: 0.2em;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, var(--hodronn-blue), #9333ea);\n transform: scaleX(0);\n transform-origin: left;\n animation: underlineGrow 0.8s ease-out 0.8s forwards;\n }\n \n .hero-description {\n font-size: 1.125rem;\n line-height: 1.7;\n color: var(--ink-70);\n margin-bottom: 2.5rem;\n opacity: 0;\n }\n \n .hero-description.animate {\n animation: fadeInUp 0.6s ease-out 0.2s forwards;\n }\n \n .hero-cta {\n opacity: 0;\n }\n \n .hero-cta.animate {\n animation: fadeInUp 0.6s ease-out 0.3s forwards;\n }\n \n .hero-btn-primary {\n padding: 1rem 2.5rem;\n background: var(--hodronn-blue);\n color: white;\n border: none;\n border-radius: 0.75rem;\n font-weight: 600;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 4px 20px rgba(0, 1, 123, 0.25);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n \n .hero-btn-primary:hover {\n background: var(--hodronn-blue-hover);\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(0, 1, 123, 0.35);\n }\n \n .hero-btn-primary svg {\n width: 1.125rem;\n height: 1.125rem;\n }\n \n \/* ========================================\n PROCESS BOX SECTION\n ======================================== *\/\n .process-section {\n padding: 4rem 0;\n background: linear-gradient(180deg, white 0%, var(--blue-5) 100%);\n }\n \n .process-container {\n max-width: 900px;\n margin: 0 auto;\n padding: 0 1.5rem;\n }\n \n .process-box {\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 240, 255, 0.7));\n backdrop-filter: blur(16px);\n border: 1px solid rgba(0, 1, 123, 0.12);\n border-radius: 1.5rem;\n padding: 3rem;\n position: relative;\n overflow: hidden;\n text-align: center;\n opacity: 0;\n }\n \n .process-box.animate {\n animation: fadeInUp 0.6s ease-out forwards;\n }\n \n .process-box::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--hodronn-blue), #9333ea, #6366f1);\n background-size: 200% 100%;\n animation: gradientSlide 3s ease infinite;\n border-radius: 1.5rem 1.5rem 0 0;\n }\n \n .process-box::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 400px;\n height: 400px;\n background: radial-gradient(circle, rgba(0, 1, 123, 0.05), transparent 70%);\n pointer-events: none;\n z-index: 0;\n }\n \n .process-content {\n position: relative;\n z-index: 1;\n }\n \n .process-icon {\n width: 3.5rem;\n height: 3.5rem;\n color: var(--hodronn-blue);\n margin: 0 auto 1.5rem;\n }\n \n .process-title {\n font-size: 1.75rem;\n line-height: 1.3;\n font-weight: 600;\n color: var(--ink-100);\n margin-bottom: 1rem;\n letter-spacing: -0.02em;\n }\n \n .process-description {\n font-size: 1rem;\n line-height: 1.7;\n color: var(--ink-70);\n max-width: 650px;\n margin: 0 auto 1.75rem;\n }\n \n .process-features {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 0.75rem;\n }\n \n .process-feature {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.625rem 1.25rem;\n background: white;\n border: 1px solid var(--line-10);\n border-radius: 0.625rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--ink-100);\n transition: all 0.3s ease;\n }\n \n .process-feature:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 20px rgba(0, 1, 123, 0.12);\n border-color: var(--hodronn-blue);\n background: var(--blue-10);\n }\n \n .process-feature-icon {\n width: 1rem;\n height: 1rem;\n color: var(--hodronn-blue);\n }\n \n \/* ========================================\n BENEFITS SECTION - DESKTOP\n ======================================== *\/\n .benefits-section {\n padding: 4rem 0;\n background: white;\n }\n \n .benefits-container {\n max-width: 1100px;\n margin: 0 auto;\n padding: 0 1.5rem;\n }\n \n .benefits-header {\n text-align: center;\n margin-bottom: 3rem;\n }\n \n .benefits-tag {\n font-size: 0.7rem;\n font-weight: 600;\n color: var(--hodronn-blue);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n margin-bottom: 0.75rem;\n opacity: 0;\n }\n \n .benefits-tag.animate {\n animation: fadeInUp 0.6s ease-out forwards;\n }\n \n .benefits-title {\n font-size: 2rem;\n line-height: 1.2;\n font-weight: 600;\n color: var(--ink-100);\n letter-spacing: -0.03em;\n margin-bottom: 0.75rem;\n opacity: 0;\n }\n \n .benefits-title.animate {\n animation: fadeInUp 0.6s ease-out 0.1s forwards;\n }\n \n .benefits-subtitle {\n font-size: 1rem;\n line-height: 1.6;\n color: var(--ink-70);\n opacity: 0;\n }\n \n .benefits-subtitle.animate {\n animation: fadeInUp 0.6s ease-out 0.2s forwards;\n }\n \n .benefits-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n }\n \n .benefit-item {\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 240, 255, 0.5));\n backdrop-filter: blur(16px);\n border: 1px solid rgba(0, 1, 123, 0.12);\n border-radius: 1.25rem;\n padding: 2rem;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n opacity: 0;\n }\n \n .benefit-item.animate {\n animation: fadeInUp 0.6s ease-out forwards;\n }\n \n .benefit-item:nth-child(1) { animation-delay: 0.3s; }\n .benefit-item:nth-child(2) { animation-delay: 0.4s; }\n .benefit-item:nth-child(3) { animation-delay: 0.5s; }\n .benefit-item:nth-child(4) { animation-delay: 0.6s; }\n .benefit-item:nth-child(5) { animation-delay: 0.7s; }\n .benefit-item:nth-child(6) { animation-delay: 0.8s; }\n \n .benefit-item::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--hodronn-blue), #9333ea, #6366f1);\n background-size: 200% 100%;\n animation: gradientSlide 3s ease infinite;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n \n .benefit-item:hover::before {\n opacity: 1;\n }\n \n .benefit-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 40px rgba(0, 1, 123, 0.15);\n border-color: rgba(0, 1, 123, 0.2);\n }\n \n .benefit-icon {\n width: 2.5rem;\n height: 2.5rem;\n color: var(--hodronn-blue);\n margin-bottom: 1rem;\n }\n \n .benefit-title {\n font-size: 1rem;\n font-weight: 600;\n color: var(--ink-100);\n margin-bottom: 0.5rem;\n line-height: 1.3;\n }\n \n .benefit-description {\n font-size: 0.875rem;\n line-height: 1.6;\n color: var(--ink-70);\n }\n \n \/* ========================================\n BENEFITS CAROUSEL MOBILE\n ======================================== *\/\n .benefits-carousel {\n display: none;\n }\n \n .benefits-carousel-nav {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1.5rem;\n margin-bottom: 2rem;\n padding: 0 1rem;\n }\n \n .benefits-carousel-btn {\n width: 3.5rem;\n height: 3.5rem;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(8px);\n border: 2px solid var(--line-10);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n flex-shrink: 0;\n }\n \n .benefits-carousel-btn:hover {\n border-color: var(--hodronn-blue);\n background: var(--hodronn-blue);\n transform: scale(1.1);\n box-shadow: 0 8px 24px rgba(0, 1, 123, 0.25);\n }\n \n .benefits-carousel-btn svg {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--hodronn-blue);\n transition: color 0.3s ease;\n stroke-width: 2.5;\n }\n \n .benefits-carousel-btn:hover svg {\n color: white;\n }\n \n .benefits-carousel-progress {\n flex: 1;\n max-width: 200px;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n align-items: center;\n }\n \n .benefits-carousel-progress-bar {\n width: 100%;\n height: 0.5rem;\n background: rgba(0, 1, 123, 0.1);\n border-radius: 999px;\n overflow: hidden;\n }\n \n .benefits-carousel-progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--hodronn-blue), #6366f1, #9333ea);\n border-radius: 999px;\n transition: width 0.4s ease;\n }\n \n .benefits-carousel-progress-text {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--hodronn-blue);\n }\n \n .benefits-carousel-container {\n width: 100%;\n max-width: 320px;\n margin: 0 auto;\n padding: 0 1rem;\n }\n \n .benefits-carousel-track {\n position: relative;\n width: 100%;\n min-height: 300px;\n }\n \n .benefits-carousel-card {\n width: 100%;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 240, 255, 0.5));\n backdrop-filter: blur(16px);\n border: 1px solid rgba(0, 1, 123, 0.12);\n border-radius: 1.25rem;\n padding: 2rem 1.5rem;\n display: none;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n overflow: hidden;\n box-shadow: 0 20px 50px rgba(0, 1, 123, 0.2);\n }\n \n .benefits-carousel-card.center {\n display: flex;\n }\n \n .benefits-carousel-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--hodronn-blue), #9333ea, #6366f1);\n border-radius: 1.25rem 1.25rem 0 0;\n }\n \n \/* ========================================\n EXAMPLES SECTION - DESKTOP\n ======================================== *\/\n .examples-section {\n padding: 4rem 0;\n background: linear-gradient(180deg, var(--blue-5) 0%, white 100%);\n }\n \n .examples-container {\n max-width: 1100px;\n margin: 0 auto;\n padding: 0 1.5rem;\n }\n \n .examples-header {\n text-align: center;\n margin-bottom: 3rem;\n }\n \n .examples-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n \n .example-card {\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(238, 240, 255, 0.6));\n backdrop-filter: blur(12px);\n border: 1px solid rgba(0, 1, 123, 0.1);\n border-radius: 1.25rem;\n padding: 2.5rem;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n opacity: 0;\n }\n \n .example-card.animate {\n animation: fadeInUp 0.6s ease-out forwards;\n }\n \n .example-card:nth-child(1) { animation-delay: 0.3s; }\n .example-card:nth-child(2) { animation-delay: 0.4s; }\n .example-card:nth-child(3) { animation-delay: 0.5s; }\n .example-card:nth-child(4) { animation-delay: 0.6s; }\n \n .example-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--hodronn-blue), #9333ea, #6366f1);\n background-size: 200% 100%;\n animation: gradientSlide 3s ease infinite;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n \n .example-card:hover::before {\n opacity: 1;\n }\n \n .example-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 50px rgba(0, 1, 123, 0.18);\n border-color: rgba(0, 1, 123, 0.25);\n }\n \n .example-icon-wrapper {\n width: 3rem;\n height: 3rem;\n background: linear-gradient(135deg, var(--blue-10), rgba(147, 51, 234, 0.1));\n border-radius: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 1.5rem;\n }\n \n .example-icon {\n width: 1.5rem;\n height: 1.5rem;\n color: var(--hodronn-blue);\n }\n \n .example-title {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--ink-100);\n margin-bottom: 0.75rem;\n line-height: 1.3;\n }\n \n .example-description {\n font-size: 0.9rem;\n line-height: 1.6;\n color: var(--ink-70);\n margin-bottom: 1.5rem;\n }\n \n .example-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n }\n \n .example-tag {\n padding: 0.375rem 0.875rem;\n background: white;\n border: 1px solid var(--line-10);\n border-radius: 0.5rem;\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--hodronn-blue);\n }\n \n \/* ========================================\n EXAMPLES CAROUSEL MOBILE\n ======================================== *\/\n .examples-carousel {\n display: none;\n }\n \n .examples-carousel-nav {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1.5rem;\n margin-bottom: 2rem;\n padding: 0 1rem;\n }\n \n .examples-carousel-btn {\n width: 3.5rem;\n height: 3.5rem;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(8px);\n border: 2px solid var(--line-10);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n flex-shrink: 0;\n }\n \n .examples-carousel-btn:hover {\n border-color: var(--hodronn-blue);\n background: var(--hodronn-blue);\n transform: scale(1.1);\n box-shadow: 0 8px 24px rgba(0, 1, 123, 0.25);\n }\n \n .examples-carousel-btn svg {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--hodronn-blue);\n transition: color 0.3s ease;\n stroke-width: 2.5;\n }\n \n .examples-carousel-btn:hover svg {\n color: white;\n }\n \n .examples-carousel-progress {\n flex: 1;\n max-width: 200px;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n align-items: center;\n }\n \n .examples-carousel-progress-bar {\n width: 100%;\n height: 0.5rem;\n background: rgba(0, 1, 123, 0.1);\n border-radius: 999px;\n overflow: hidden;\n }\n \n .examples-carousel-progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--hodronn-blue), #6366f1, #9333ea);\n border-radius: 999px;\n transition: width 0.4s ease;\n }\n \n .examples-carousel-progress-text {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--hodronn-blue);\n }\n \n .examples-carousel-container {\n width: 100%;\n max-width: 320px;\n margin: 0 auto;\n padding: 0 1rem;\n }\n \n .examples-carousel-track {\n position: relative;\n width: 100%;\n min-height: 380px;\n }\n \n .examples-carousel-card {\n width: 100%;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 240, 255, 0.6));\n backdrop-filter: blur(12px);\n border: 1px solid rgba(0, 1, 123, 0.1);\n border-radius: 1.25rem;\n padding: 2rem 1.5rem;\n display: none;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n overflow: hidden;\n box-shadow: 0 20px 50px rgba(0, 1, 123, 0.18);\n }\n \n .examples-carousel-card.center {\n display: flex;\n }\n \n .examples-carousel-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--hodronn-blue), #9333ea, #6366f1);\n border-radius: 1.25rem 1.25rem 0 0;\n }\n \n \/* Masquer les tags sur mobile carousel *\/\n .examples-carousel-card .example-tags {\n display: none;\n }\n \n \/* ========================================\n CTA SECTION\n ======================================== *\/\n .cta-section {\n padding: 5rem 0;\n background: white;\n }\n \n .cta-wrapper {\n max-width: 800px;\n margin: 0 auto;\n text-align: center;\n padding: 0 1.5rem;\n }\n \n .cta-tag {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n padding: 0.4rem 1rem;\n background: var(--blue-10);\n border-radius: 999px;\n margin-bottom: 1.5rem;\n }\n \n .cta-tag-icon {\n width: 0.85rem;\n height: 0.85rem;\n color: var(--hodronn-blue);\n }\n \n .cta-tag-text {\n font-size: 0.7rem;\n font-weight: 600;\n color: var(--hodronn-blue);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n \n .cta-title {\n font-size: 2rem;\n line-height: 1.3;\n font-weight: 700;\n color: var(--ink-100);\n letter-spacing: -0.02em;\n margin-bottom: 1rem;\n }\n \n .cta-description {\n font-size: 1rem;\n line-height: 1.7;\n color: var(--ink-70);\n max-width: 550px;\n margin: 0 auto 2rem;\n }\n \n .cta-button-primary {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n padding: 1.125rem 3rem;\n background: var(--hodronn-blue);\n color: white;\n font-size: 0.9375rem;\n font-weight: 600;\n border-radius: 0.75rem;\n border: none;\n cursor: pointer;\n text-decoration: none;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 4px 12px rgba(0, 1, 123, 0.2);\n }\n \n .cta-button-primary:hover {\n background: var(--hodronn-blue-hover);\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 8px 20px rgba(0, 1, 123, 0.3);\n }\n \n .cta-button-icon {\n width: 1rem;\n height: 1rem;\n }\n \n \/* ========================================\n RESPONSIVE\n ======================================== *\/\n @media (max-width: 768px) {\n .hero-section {\n min-height: auto;\n padding: 4rem 0 3rem;\n }\n \n .hero-title {\n font-size: 2.25rem;\n line-height: 1.2;\n }\n \n .hero-description {\n font-size: 1rem;\n }\n \n .process-section {\n padding: 3rem 0;\n }\n \n .process-box {\n padding: 2rem 1.5rem;\n }\n \n .process-icon {\n width: 2.5rem;\n height: 2.5rem;\n margin-bottom: 1rem;\n }\n \n .process-title {\n font-size: 1.25rem;\n margin-bottom: 0.75rem;\n }\n \n .process-description {\n font-size: 0.9rem;\n margin-bottom: 1.25rem;\n }\n \n .process-features {\n flex-direction: column;\n align-items: stretch;\n gap: 0.5rem;\n }\n \n .process-feature {\n justify-content: center;\n font-size: 0.75rem;\n padding: 0.5rem 1rem;\n }\n \n .process-feature-icon {\n width: 0.875rem;\n height: 0.875rem;\n }\n \n \/* Benefits: masquer grid, afficher carousel *\/\n .benefits-grid {\n display: none;\n }\n \n .benefits-carousel {\n display: block;\n }\n \n \/* Examples: masquer grid, afficher carousel *\/\n .examples-grid {\n display: none;\n }\n \n .examples-carousel {\n display: block;\n }\n \n .cta-title {\n font-size: 2rem;\n }\n \n .cta-description {\n font-size: 1rem;\n }\n }\n \n @media (max-width: 480px) {\n .hero-title {\n font-size: 1.75rem;\n }\n \n .benefits-carousel-btn,\n .examples-carousel-btn {\n width: 3rem;\n height: 3rem;\n }\n \n .benefits-carousel-btn svg,\n .examples-carousel-btn svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n \n .benefits-carousel-card,\n .examples-carousel-card {\n width: 260px;\n max-width: 85%;\n padding: 1.5rem 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <script>\n \/\/ ========================================\n \/\/ INTERSECTION OBSERVER FOR ANIMATIONS\n \/\/ ========================================\n document.addEventListener('DOMContentLoaded', function() {\n \n const observerOptions = {\n root: null,\n rootMargin: '0px',\n threshold: 0.1\n };\n \n const observerCallback = (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate');\n }\n });\n };\n \n const observer = new IntersectionObserver(observerCallback, observerOptions);\n \n const elementsToAnimate = document.querySelectorAll(\n '.hero-badge, .hero-title, .hero-description, .hero-cta, ' +\n '.process-box, ' +\n '.benefits-tag, .benefits-title, .benefits-subtitle, .benefit-item, ' +\n '.example-card'\n );\n \n elementsToAnimate.forEach(el => {\n observer.observe(el);\n });\n \n \/\/ ========================================\n \/\/ BENEFITS CAROUSEL MOBILE\n \/\/ ========================================\n const benefitsCards = Array.from(document.querySelectorAll('.benefits-carousel-card'));\n const benefitsPrevBtn = document.getElementById('benefitsPrevBtn');\n const benefitsNextBtn = document.getElementById('benefitsNextBtn');\n const benefitsProgressFill = document.getElementById('benefitsProgressFill');\n const benefitsProgressText = document.getElementById('benefitsProgressText');\n \n if (benefitsCards.length > 0) {\n let benefitsCurrentIndex = 0;\n const benefitsTotalCards = benefitsCards.length;\n \n function updateBenefitsCarousel() {\n benefitsCards.forEach((card, index) => {\n card.classList.remove('center');\n if (index === benefitsCurrentIndex) {\n card.classList.add('center');\n }\n });\n \n const progressPercent = ((benefitsCurrentIndex + 1) \/ benefitsTotalCards) * 100;\n if (benefitsProgressFill) benefitsProgressFill.style.width = progressPercent + '%';\n if (benefitsProgressText) benefitsProgressText.textContent = (benefitsCurrentIndex + 1) + '\/' + benefitsTotalCards;\n }\n \n if (benefitsPrevBtn) {\n benefitsPrevBtn.addEventListener('click', function() {\n benefitsCurrentIndex = (benefitsCurrentIndex - 1 + benefitsTotalCards) % benefitsTotalCards;\n updateBenefitsCarousel();\n });\n }\n \n if (benefitsNextBtn) {\n benefitsNextBtn.addEventListener('click', function() {\n benefitsCurrentIndex = (benefitsCurrentIndex + 1) % benefitsTotalCards;\n updateBenefitsCarousel();\n });\n }\n \n updateBenefitsCarousel();\n }\n \n \/\/ ========================================\n \/\/ EXAMPLES CAROUSEL MOBILE\n \/\/ ========================================\n const examplesCards = Array.from(document.querySelectorAll('.examples-carousel-card'));\n const examplesPrevBtn = document.getElementById('examplesPrevBtn');\n const examplesNextBtn = document.getElementById('examplesNextBtn');\n const examplesProgressFill = document.getElementById('examplesProgressFill');\n const examplesProgressText = document.getElementById('examplesProgressText');\n \n if (examplesCards.length > 0) {\n let examplesCurrentIndex = 0;\n const examplesTotalCards = examplesCards.length;\n \n function updateExamplesCarousel() {\n examplesCards.forEach((card, index) => {\n card.classList.remove('center');\n if (index === examplesCurrentIndex) {\n card.classList.add('center');\n }\n });\n \n const progressPercent = ((examplesCurrentIndex + 1) \/ examplesTotalCards) * 100;\n if (examplesProgressFill) examplesProgressFill.style.width = progressPercent + '%';\n if (examplesProgressText) examplesProgressText.textContent = (examplesCurrentIndex + 1) + '\/' + examplesTotalCards;\n }\n \n if (examplesPrevBtn) {\n examplesPrevBtn.addEventListener('click', function() {\n examplesCurrentIndex = (examplesCurrentIndex - 1 + examplesTotalCards) % examplesTotalCards;\n updateExamplesCarousel();\n });\n }\n \n if (examplesNextBtn) {\n examplesNextBtn.addEventListener('click', function() {\n examplesCurrentIndex = (examplesCurrentIndex + 1) % examplesTotalCards;\n updateExamplesCarousel();\n });\n }\n \n updateExamplesCarousel();\n }\n });\n <\/script>\n \n <!-- HERO SECTION -->\n <section class=\"hero-section\">\n <div class=\"hero-background\"><\/div>\n \n <div class=\"hero-container\">\n <div class=\"hero-content\">\n <div class=\"hero-badge\">\n <svg class=\"hero-badge-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/>\n <path d=\"M2 17l10 5 10-5\"\/>\n <path d=\"M2 12l10 5 10-5\"\/>\n <\/svg>\n <span class=\"hero-badge-text\">Solutions Personnalis\u00e9es<\/span>\n <\/div>\n \n <h1 class=\"hero-title\">\n Des modules <span class=\"hero-highlight\">sur mesure<\/span><br>\n pour vos besoins uniques\n <\/h1>\n \n <p class=\"hero-description\">\n Nos experts con\u00e7oivent et d\u00e9veloppent des modules enti\u00e8rement personnalis\u00e9s qui s’int\u00e8grent parfaitement \u00e0 votre \u00e9cosyst\u00e8me industriel.\n <\/p>\n \n <div class=\"hero-cta\">\n <a href=\"https:\/\/hodronn.fr\/index.php\/contact\/\" class=\"hero-btn-primary\">\n Contactez-nous\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <!-- PROCESS BOX SECTION -->\n <section id=\"process\" class=\"process-section\">\n <div class=\"process-container\">\n <div class=\"process-box\">\n <div class=\"process-content\">\n <svg class=\"process-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <polyline points=\"12 6 12 12 16 14\"\/>\n <\/svg>\n \n <h2 class=\"process-title\">\n Un processus structur\u00e9 et agile\n <\/h2>\n \n <p class=\"process-description\">\n De l’analyse de vos besoins jusqu’au d\u00e9ploiement, nous vous accompagnons \u00e0 chaque \u00e9tape pour cr\u00e9er la solution parfaite adapt\u00e9e \u00e0 vos enjeux m\u00e9tier.\n <\/p>\n \n <div class=\"process-features\">\n <div class=\"process-feature\">\n <svg class=\"process-feature-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"\/>\n <\/svg>\n Analyse approfondie\n <\/div>\n <div class=\"process-feature\">\n <svg class=\"process-feature-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"\/>\n <\/svg>\n Conception sur mesure\n <\/div>\n <div class=\"process-feature\">\n <svg class=\"process-feature-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"\/>\n <\/svg>\n D\u00e9veloppement agile\n <\/div>\n <div class=\"process-feature\">\n <svg class=\"process-feature-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"\/>\n <\/svg>\n Formation incluse\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <!-- BENEFITS SECTION -->\n <section class=\"benefits-section\">\n <div class=\"benefits-container\">\n <div class=\"benefits-header\">\n <div class=\"benefits-tag\">AVANTAGES<\/div>\n <h2 class=\"benefits-title\">Pourquoi choisir un module sur mesure ?<\/h2>\n <p class=\"benefits-subtitle\">Une solution 100% adapt\u00e9e \u00e0 vos enjeux m\u00e9tier pour une efficacit\u00e9 maximale<\/p>\n <\/div>\n \n <!-- DESKTOP GRID -->\n <div class=\"benefits-grid\">\n <!-- Benefit 1 -->\n <div class=\"benefit-item\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/>\n <polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/>\n <line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">Parfaitement adapt\u00e9<\/h3>\n <p class=\"benefit-description\">\n Chaque fonctionnalit\u00e9 est con\u00e7ue pour r\u00e9pondre exactement \u00e0 vos besoins sp\u00e9cifiques.\n <\/p>\n <\/div>\n \n <!-- Benefit 2 -->\n <div class=\"benefit-item\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <path d=\"M12 1v6m0 6v6\"\/>\n <path d=\"m4.93 4.93 4.24 4.24m5.66 5.66 4.24 4.24\"\/>\n <path d=\"M1 12h6m6 0h6\"\/>\n <path d=\"m4.93 19.07 4.24-4.24m5.66-5.66 4.24-4.24\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">Int\u00e9gration fluide<\/h3>\n <p class=\"benefit-description\">\n S’int\u00e8gre avec vos syst\u00e8mes existants (ERP, MES, GMAO) via API.\n <\/p>\n <\/div>\n \n <!-- Benefit 3 -->\n <div class=\"benefit-item\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 3v18h18\"\/>\n <path d=\"m19 9-5 5-4-4-3 3\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">\u00c9volutif & scalable<\/h3>\n <p class=\"benefit-description\">\n Con\u00e7u pour grandir avec votre activit\u00e9 et s’adapter \u00e0 vos \u00e9volutions.\n <\/p>\n <\/div>\n \n <!-- Benefit 4 -->\n <div class=\"benefit-item\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">S\u00e9curit\u00e9 renforc\u00e9e<\/h3>\n <p class=\"benefit-description\">\n Conformit\u00e9 RGPD et s\u00e9curit\u00e9 des donn\u00e9es garanties par conception.\n <\/p>\n <\/div>\n \n <!-- Benefit 5 -->\n <div class=\"benefit-item\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/>\n <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/>\n <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">Accompagnement d\u00e9di\u00e9<\/h3>\n <p class=\"benefit-description\">\n Un chef de projet d\u00e9di\u00e9 et une \u00e9quipe d’experts \u00e0 votre \u00e9coute.\n <\/p>\n <\/div>\n \n <!-- Benefit 6 -->\n <div class=\"benefit-item\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">Performance optimale<\/h3>\n <p class=\"benefit-description\">\n Code optimis\u00e9 et architecture pens\u00e9e pour la rapidit\u00e9 d’ex\u00e9cution.\n <\/p>\n <\/div>\n <\/div>\n \n <!-- MOBILE CAROUSEL -->\n <div class=\"benefits-carousel\">\n <div class=\"benefits-carousel-nav\">\n <button class=\"benefits-carousel-btn\" id=\"benefitsPrevBtn\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <polyline points=\"15 18 9 12 15 6\"\/>\n <\/svg>\n <\/button>\n <div class=\"benefits-carousel-progress\">\n <div class=\"benefits-carousel-progress-bar\">\n <div class=\"benefits-carousel-progress-fill\" id=\"benefitsProgressFill\"><\/div>\n <\/div>\n <div class=\"benefits-carousel-progress-text\" id=\"benefitsProgressText\">1\/6<\/div>\n <\/div>\n <button class=\"benefits-carousel-btn\" id=\"benefitsNextBtn\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <polyline points=\"9 18 15 12 9 6\"\/>\n <\/svg>\n <\/button>\n <\/div>\n \n <div class=\"benefits-carousel-container\">\n <div class=\"benefits-carousel-track\">\n \n <!-- Card 1 -->\n <div class=\"benefits-carousel-card center\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/>\n <polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/>\n <line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">Parfaitement adapt\u00e9<\/h3>\n <p class=\"benefit-description\">\n Chaque fonctionnalit\u00e9 est con\u00e7ue pour r\u00e9pondre exactement \u00e0 vos besoins sp\u00e9cifiques.\n <\/p>\n <\/div>\n \n <!-- Card 2 -->\n <div class=\"benefits-carousel-card\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <path d=\"M12 1v6m0 6v6\"\/>\n <path d=\"m4.93 4.93 4.24 4.24m5.66 5.66 4.24 4.24\"\/>\n <path d=\"M1 12h6m6 0h6\"\/>\n <path d=\"m4.93 19.07 4.24-4.24m5.66-5.66 4.24-4.24\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">Int\u00e9gration fluide<\/h3>\n <p class=\"benefit-description\">\n S’int\u00e8gre avec vos syst\u00e8mes existants (ERP, MES, GMAO) via API.\n <\/p>\n <\/div>\n \n <!-- Card 3 -->\n <div class=\"benefits-carousel-card\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 3v18h18\"\/>\n <path d=\"m19 9-5 5-4-4-3 3\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">\u00c9volutif & scalable<\/h3>\n <p class=\"benefit-description\">\n Con\u00e7u pour grandir avec votre activit\u00e9 et s’adapter \u00e0 vos \u00e9volutions.\n <\/p>\n <\/div>\n \n <!-- Card 4 -->\n <div class=\"benefits-carousel-card\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">S\u00e9curit\u00e9 renforc\u00e9e<\/h3>\n <p class=\"benefit-description\">\n Conformit\u00e9 RGPD et s\u00e9curit\u00e9 des donn\u00e9es garanties par conception.\n <\/p>\n <\/div>\n \n <!-- Card 5 -->\n <div class=\"benefits-carousel-card\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/>\n <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/>\n <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">Accompagnement d\u00e9di\u00e9<\/h3>\n <p class=\"benefit-description\">\n Un chef de projet d\u00e9di\u00e9 et une \u00e9quipe d’experts \u00e0 votre \u00e9coute.\n <\/p>\n <\/div>\n \n <!-- Card 6 -->\n <div class=\"benefits-carousel-card\">\n <svg class=\"benefit-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\n <\/svg>\n <h3 class=\"benefit-title\">Performance optimale<\/h3>\n <p class=\"benefit-description\">\n Code optimis\u00e9 et architecture pens\u00e9e pour la rapidit\u00e9 d’ex\u00e9cution.\n <\/p>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <!-- EXAMPLES SECTION -->\n <section class=\"examples-section\">\n <div class=\"examples-container\">\n <div class=\"benefits-header\">\n <div class=\"benefits-tag\">CAS D’USAGE<\/div>\n <h2 class=\"benefits-title\">Exemples de modules sur mesure<\/h2>\n <p class=\"benefits-subtitle\">D\u00e9couvrez des solutions que nous avons d\u00e9velopp\u00e9es pour nos clients<\/p>\n <\/div>\n \n <!-- DESKTOP GRID -->\n <div class=\"examples-grid\">\n <!-- Example 1 -->\n <div class=\"example-card\">\n <div class=\"example-icon-wrapper\">\n <svg class=\"example-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/>\n <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/>\n <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/>\n <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"example-title\">Gestion de Quai Automatis\u00e9e<\/h3>\n <p class=\"example-description\">\n Module de planification et d’orchestration des op\u00e9rations de quai avec reconnaissance automatique des transporteurs et allocation intelligente.\n <\/p>\n <div class=\"example-tags\">\n <span class=\"example-tag\">Logistique<\/span>\n <span class=\"example-tag\">IoT<\/span>\n <span class=\"example-tag\">IA<\/span>\n <\/div>\n <\/div>\n \n <!-- Example 2 -->\n <div class=\"example-card\">\n <div class=\"example-icon-wrapper\">\n <svg class=\"example-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/>\n <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"example-title\">Suivi Budg\u00e9taire Multi-Sites<\/h3>\n <p class=\"example-description\">\n Solution centralis\u00e9e de gestion budg\u00e9taire avec tableaux de bord personnalis\u00e9s par site et alertes automatiques sur d\u00e9passements.\n <\/p>\n <div class=\"example-tags\">\n <span class=\"example-tag\">Finance<\/span>\n <span class=\"example-tag\">Multi-sites<\/span>\n <span class=\"example-tag\">BI<\/span>\n <\/div>\n <\/div>\n \n <!-- Example 3 -->\n <div class=\"example-card\">\n <div class=\"example-icon-wrapper\">\n <svg class=\"example-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <polyline points=\"12 6 12 12 16 14\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"example-title\">Planification Pr\u00e9dictive<\/h3>\n <p class=\"example-description\">\n Module d’analyse pr\u00e9dictive pour anticiper les besoins en maintenance et optimiser les plannings d’intervention.\n <\/p>\n <div class=\"example-tags\">\n <span class=\"example-tag\">Maintenance<\/span>\n <span class=\"example-tag\">Machine Learning<\/span>\n <span class=\"example-tag\">Pr\u00e9dictif<\/span>\n <\/div>\n <\/div>\n \n <!-- Example 4 -->\n <div class=\"example-card\">\n <div class=\"example-icon-wrapper\">\n <svg class=\"example-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"example-title\">Gestion Documentaire Avanc\u00e9e<\/h3>\n <p class=\"example-description\">\n Syst\u00e8me de GED avec versioning automatique, validation multi-niveaux et int\u00e9gration signature \u00e9lectronique conforme eIDAS.\n <\/p>\n <div class=\"example-tags\">\n <span class=\"example-tag\">Documents<\/span>\n <span class=\"example-tag\">Workflow<\/span>\n <span class=\"example-tag\">Conformit\u00e9<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- MOBILE CAROUSEL -->\n <div class=\"examples-carousel\">\n <div class=\"examples-carousel-nav\">\n <button class=\"examples-carousel-btn\" id=\"examplesPrevBtn\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <polyline points=\"15 18 9 12 15 6\"\/>\n <\/svg>\n <\/button>\n <div class=\"examples-carousel-progress\">\n <div class=\"examples-carousel-progress-bar\">\n <div class=\"examples-carousel-progress-fill\" id=\"examplesProgressFill\"><\/div>\n <\/div>\n <div class=\"examples-carousel-progress-text\" id=\"examplesProgressText\">1\/4<\/div>\n <\/div>\n <button class=\"examples-carousel-btn\" id=\"examplesNextBtn\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <polyline points=\"9 18 15 12 9 6\"\/>\n <\/svg>\n <\/button>\n <\/div>\n \n <div class=\"examples-carousel-container\">\n <div class=\"examples-carousel-track\">\n \n <!-- Card 1 -->\n <div class=\"examples-carousel-card center\">\n <div class=\"example-icon-wrapper\">\n <svg class=\"example-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/>\n <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/>\n <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/>\n <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"example-title\">Gestion de Quai Automatis\u00e9e<\/h3>\n <p class=\"example-description\">\n Module de planification et d’orchestration des op\u00e9rations de quai avec reconnaissance automatique.\n <\/p>\n <div class=\"example-tags\">\n <span class=\"example-tag\">Logistique<\/span>\n <span class=\"example-tag\">IoT<\/span>\n <span class=\"example-tag\">IA<\/span>\n <\/div>\n <\/div>\n \n <!-- Card 2 -->\n <div class=\"examples-carousel-card\">\n <div class=\"example-icon-wrapper\">\n <svg class=\"example-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/>\n <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"example-title\">Suivi Budg\u00e9taire Multi-Sites<\/h3>\n <p class=\"example-description\">\n Solution centralis\u00e9e avec tableaux de bord personnalis\u00e9s et alertes automatiques.\n <\/p>\n <div class=\"example-tags\">\n <span class=\"example-tag\">Finance<\/span>\n <span class=\"example-tag\">Multi-sites<\/span>\n <span class=\"example-tag\">BI<\/span>\n <\/div>\n <\/div>\n \n <!-- Card 3 -->\n <div class=\"examples-carousel-card\">\n <div class=\"example-icon-wrapper\">\n <svg class=\"example-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <polyline points=\"12 6 12 12 16 14\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"example-title\">Planification Pr\u00e9dictive<\/h3>\n <p class=\"example-description\">\n Module d’analyse pr\u00e9dictive pour anticiper les besoins en maintenance.\n <\/p>\n <div class=\"example-tags\">\n <span class=\"example-tag\">Maintenance<\/span>\n <span class=\"example-tag\">ML<\/span>\n <span class=\"example-tag\">Pr\u00e9dictif<\/span>\n <\/div>\n <\/div>\n \n <!-- Card 4 -->\n <div class=\"examples-carousel-card\">\n <div class=\"example-icon-wrapper\">\n <svg class=\"example-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"example-title\">Gestion Documentaire Avanc\u00e9e<\/h3>\n <p class=\"example-description\">\n Syst\u00e8me GED avec versioning et signature \u00e9lectronique conforme eIDAS.\n <\/p>\n <div class=\"example-tags\">\n <span class=\"example-tag\">Documents<\/span>\n <span class=\"example-tag\">Workflow<\/span>\n <span class=\"example-tag\">eIDAS<\/span>\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <!-- CTA SECTION -->\n <section class=\"cta-section\">\n <div class=\"cta-wrapper\">\n <div class=\"cta-tag\">\n <svg class=\"cta-tag-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\" \/>\n <\/svg>\n <span class=\"cta-tag-text\">Contactez-nous<\/span>\n <\/div>\n \n <h2 class=\"cta-title\">\n Pr\u00eat \u00e0 cr\u00e9er votre module sur mesure ?\n <\/h2>\n \n <p class=\"cta-description\">\n \u00c9changeons sur votre projet et d\u00e9couvrons ensemble comment Hodr\u00f8nn peut transformer vos processus industriels avec une solution parfaitement adapt\u00e9e.\n <\/p>\n \n <a href=\"https:\/\/hodronn.fr\/index.php\/contact\/\" class=\"cta-button-primary\">\n <span>Contactez-nous<\/span>\n <svg class=\"cta-button-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7l5 5m0 0l-5 5m5-5H6\" \/>\n <\/svg>\n <\/a>\n <\/div>\n <\/section>\n \n<\/body>\n<\/html>\n\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Modules Sur Mesure – Hodr\u00f8nn Solutions Personnalis\u00e9es Des modules sur mesure pour vos besoins uniques Nos experts con\u00e7oivent et d\u00e9veloppent […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1148","page","type-page","status-publish","hentry"],"spectra_custom_meta":{"_edit_lock":["1762936656:1"],"_uag_custom_page_level_css":[""],"site-sidebar-layout":["default"],"site-content-layout":[""],"ast-site-content-layout":["default"],"site-content-style":["default"],"site-sidebar-style":["default"],"ast-global-header-display":[""],"ast-banner-title-visibility":[""],"ast-main-header-display":[""],"ast-hfb-above-header-display":[""],"ast-hfb-below-header-display":[""],"ast-hfb-mobile-header-display":[""],"site-post-title":["disabled"],"ast-breadcrumbs-content":[""],"ast-featured-img":[""],"footer-sml-layout":[""],"theme-transparent-header-meta":[""],"adv-header-id-meta":[""],"stick-header-meta":[""],"header-above-stick-meta":[""],"header-main-stick-meta":[""],"header-below-stick-meta":[""],"astra-migrate-meta-layouts":["default"],"ast-page-background-enabled":["default"],"ast-page-background-meta":["a:3:{s:7:\"desktop\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"tablet\";a:12:{s:16:\"background-color\";s:0:\"\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"mobile\";a:12:{s:16:\"background-color\";s:0:\"\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}}"],"ast-content-background-meta":["a:3:{s:7:\"desktop\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-4)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"tablet\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-4)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"mobile\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-4)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}}"],"footnotes":[""],"_edit_last":["1"],"_yoast_wpseo_content_score":["90"],"_yoast_wpseo_estimated-reading-time-minutes":["3"],"_uag_page_assets":["a:9:{s:3:\"css\";s:14881:\".wp-block-uagb-container{display:flex;position:relative;box-sizing:border-box;transition-property:box-shadow;transition-duration:0.2s;transition-timing-function:ease}.wp-block-uagb-container .spectra-container-link-overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}.wp-block-uagb-container.uagb-is-root-container{margin-left:auto;margin-right:auto}.wp-block-uagb-container.alignfull.uagb-is-root-container .uagb-container-inner-blocks-wrap{display:flex;position:relative;box-sizing:border-box;margin-left:auto !important;margin-right:auto !important}.wp-block-uagb-container .wp-block-uagb-blockquote,.wp-block-uagb-container .wp-block-spectra-pro-login,.wp-block-uagb-container .wp-block-spectra-pro-register{margin:unset}.wp-block-uagb-container .uagb-container__video-wrap{height:100%;width:100%;top:0;left:0;position:absolute;overflow:hidden;-webkit-transition:opacity 1s;-o-transition:opacity 1s;transition:opacity 1s}.wp-block-uagb-container .uagb-container__video-wrap video{max-width:100%;width:100%;height:100%;margin:0;line-height:1;border:none;display:inline-block;vertical-align:baseline;-o-object-fit:cover;object-fit:cover;background-size:cover}.wp-block-uagb-container.uagb-layout-grid{display:grid;width:100%}.wp-block-uagb-container.uagb-layout-grid>.uagb-container-inner-blocks-wrap{display:inherit;width:inherit}.wp-block-uagb-container.uagb-layout-grid>.uagb-container-inner-blocks-wrap>.wp-block-uagb-container{max-width:unset !important;width:unset !important}.wp-block-uagb-container.uagb-layout-grid>.wp-block-uagb-container{max-width:unset !important;width:unset !important}.wp-block-uagb-container.uagb-layout-grid.uagb-is-root-container{margin-left:auto;margin-right:auto}.wp-block-uagb-container.uagb-layout-grid.uagb-is-root-container>.wp-block-uagb-container{max-width:unset !important;width:unset !important}.wp-block-uagb-container.uagb-layout-grid.alignwide.uagb-is-root-container{margin-left:auto;margin-right:auto}.wp-block-uagb-container.uagb-layout-grid.alignfull.uagb-is-root-container .uagb-container-inner-blocks-wrap{display:inherit;position:relative;box-sizing:border-box;margin-left:auto !important;margin-right:auto !important}body .wp-block-uagb-container>.uagb-container-inner-blocks-wrap>*:not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-spectra-pro-register):not(.wp-block-spectra-pro-login):not(.uagb-slider-container):not(.spectra-image-gallery__control-lightbox):not(.wp-block-uagb-info-box),body .wp-block-uagb-container>.uagb-container-inner-blocks-wrap,body .wp-block-uagb-container>*:not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-spectra-pro-register):not(.wp-block-spectra-pro-login):not(.uagb-slider-container):not(.spectra-container-link-overlay):not(.spectra-image-gallery__control-lightbox):not(.wp-block-uagb-lottie):not(.uagb-faq__outer-wrap){min-width:unset !important;width:100%;position:relative}body .ast-container .wp-block-uagb-container>.uagb-container-inner-blocks-wrap>.wp-block-uagb-container>ul,body .ast-container .wp-block-uagb-container>.uagb-container-inner-blocks-wrap>.wp-block-uagb-container ol,body .ast-container .wp-block-uagb-container>.uagb-container-inner-blocks-wrap>ul,body .ast-container .wp-block-uagb-container>.uagb-container-inner-blocks-wrap ol{max-width:-webkit-fill-available;margin-block-start:0;margin-block-end:0;margin-left:20px}.ast-plain-container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .uagb-is-root-container.wp-block-uagb-container.alignwide{margin-left:auto;margin-right:auto}.uagb-container__shape{overflow:hidden;position:absolute;left:0;width:100%;line-height:0;direction:ltr}.uagb-container__shape-top{top:-3px}.uagb-container__shape-bottom{bottom:-3px}.uagb-container__shape.uagb-container__invert.uagb-container__shape-bottom,.uagb-container__shape.uagb-container__invert.uagb-container__shape-top{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.uagb-container__shape.uagb-container__shape-flip svg{transform:translateX(-50%) rotateY(180deg)}.uagb-container__shape svg{display:block;width:-webkit-calc(100% + 1.3px);width:calc(100% + 1.3px);position:relative;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.uagb-container__shape .uagb-container__shape-fill{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}.uagb-container__shape.uagb-container__shape-above-content{z-index:9;pointer-events:none}.nv-single-page-wrap .nv-content-wrap.entry-content .wp-block-uagb-container.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}@media only screen and (max-width: 767px){.wp-block-uagb-container .wp-block-uagb-advanced-heading{width:-webkit-fill-available}}.wp-block-uagb-image--align-none{justify-content:center}\n.wp-block-uagb-container.uagb-block-23f6a159 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-23f6a159 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-23f6a159 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-23f6a159 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-23f6a159 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-23f6a159{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-23f6a159 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 20px;column-gap: 20px;}.wp-block-uagb-container.uagb-block-23f6a159{box-shadow: 0px 0px #00000070 ;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-top: -10px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;order: initial;border-color: inherit;row-gap: 20px;column-gap: 20px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-23f6a159{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-23f6a159 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-23f6a159{padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-top: -10px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;order: initial;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-23f6a159{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-23f6a159 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-23f6a159{padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-top: -10px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;order: initial;}}.uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\n.wp-block-uagb-image{display:flex}.wp-block-uagb-image__figure{position:relative;display:flex;flex-direction:column;max-width:100%;height:auto;margin:0}.wp-block-uagb-image__figure img{height:auto;display:flex;max-width:100%;transition:box-shadow 0.2s ease}.wp-block-uagb-image__figure>a{display:inline-block}.wp-block-uagb-image__figure figcaption{text-align:center;margin-top:0.5em;margin-bottom:1em}.wp-block-uagb-image .components-placeholder.block-editor-media-placeholder .components-placeholder__instructions{align-self:center}.wp-block-uagb-image--align-left{text-align:left}.wp-block-uagb-image--align-right{text-align:right}.wp-block-uagb-image--align-center{text-align:center}.wp-block-uagb-image--align-full .wp-block-uagb-image__figure{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;width:100vw;height:auto}.wp-block-uagb-image--align-full .wp-block-uagb-image__figure img{height:auto;width:100% !important}.wp-block-uagb-image--align-wide .wp-block-uagb-image__figure img{height:auto;width:100%}.wp-block-uagb-image--layout-overlay__color-wrapper{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0.2;background:rgba(0,0,0,0.5);transition:opacity 0.35s ease-in-out}.wp-block-uagb-image--layout-overlay-link{position:absolute;left:0;right:0;bottom:0;top:0}.wp-block-uagb-image--layout-overlay .wp-block-uagb-image__figure:hover .wp-block-uagb-image--layout-overlay__color-wrapper{opacity:1}.wp-block-uagb-image--layout-overlay__inner{position:absolute;left:15px;right:15px;bottom:15px;top:15px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-color:#fff;transition:0.35s ease-in-out}.wp-block-uagb-image--layout-overlay__inner.top-left,.wp-block-uagb-image--layout-overlay__inner.top-center,.wp-block-uagb-image--layout-overlay__inner.top-right{justify-content:flex-start}.wp-block-uagb-image--layout-overlay__inner.bottom-left,.wp-block-uagb-image--layout-overlay__inner.bottom-center,.wp-block-uagb-image--layout-overlay__inner.bottom-right{justify-content:flex-end}.wp-block-uagb-image--layout-overlay__inner.top-left,.wp-block-uagb-image--layout-overlay__inner.center-left,.wp-block-uagb-image--layout-overlay__inner.bottom-left{align-items:flex-start}.wp-block-uagb-image--layout-overlay__inner.top-right,.wp-block-uagb-image--layout-overlay__inner.center-right,.wp-block-uagb-image--layout-overlay__inner.bottom-right{align-items:flex-end}.wp-block-uagb-image--layout-overlay__inner .uagb-image-heading{color:#fff;transition:transform 0.35s, opacity 0.35s ease-in-out;transform:translate3d(0, 24px, 0);margin:0;line-height:1em}.wp-block-uagb-image--layout-overlay__inner .uagb-image-separator{width:30%;border-top-width:2px;border-top-color:#fff;border-top-style:solid;margin-bottom:10px;opacity:0;transition:transform 0.4s, opacity 0.4s ease-in-out;transform:translate3d(0, 30px, 0)}.wp-block-uagb-image--layout-overlay__inner .uagb-image-caption{opacity:0;overflow:visible;color:#fff;transition:transform 0.45s, opacity 0.45s ease-in-out;transform:translate3d(0, 35px, 0)}.wp-block-uagb-image--layout-overlay__inner:hover .uagb-image-heading,.wp-block-uagb-image--layout-overlay__inner:hover .uagb-image-separator,.wp-block-uagb-image--layout-overlay__inner:hover .uagb-image-caption{opacity:1;transform:translate3d(0, 0, 0)}.wp-block-uagb-image--effect-zoomin .wp-block-uagb-image__figure img,.wp-block-uagb-image--effect-zoomin .wp-block-uagb-image__figure .wp-block-uagb-image--layout-overlay__color-wrapper{transform:scale(1);transition:transform 0.35s ease-in-out}.wp-block-uagb-image--effect-zoomin .wp-block-uagb-image__figure:hover img,.wp-block-uagb-image--effect-zoomin .wp-block-uagb-image__figure:hover .wp-block-uagb-image--layout-overlay__color-wrapper{transform:scale(1.05)}.wp-block-uagb-image--effect-slide .wp-block-uagb-image__figure img,.wp-block-uagb-image--effect-slide .wp-block-uagb-image__figure .wp-block-uagb-image--layout-overlay__color-wrapper{width:calc(100% + 40px) !important;max-width:none !important;transform:translate3d(-40px, 0, 0);transition:transform 0.35s ease-in-out}.wp-block-uagb-image--effect-slide .wp-block-uagb-image__figure:hover img,.wp-block-uagb-image--effect-slide .wp-block-uagb-image__figure:hover .wp-block-uagb-image--layout-overlay__color-wrapper{transform:translate3d(0, 0, 0)}.wp-block-uagb-image--effect-grayscale img{filter:grayscale(0%);transition:0.35s ease-in-out}.wp-block-uagb-image--effect-grayscale:hover img{filter:grayscale(100%)}.wp-block-uagb-image--effect-blur img{filter:blur(0);transition:0.35s ease-in-out}.wp-block-uagb-image--effect-blur:hover img{filter:blur(3px)}\n.uagb-block-2c4aa539.wp-block-uagb-image--layout-default figure img{box-shadow: 0px 0px 0 #00000070;}.uagb-block-2c4aa539.wp-block-uagb-image .wp-block-uagb-image__figure figcaption{font-style: normal;align-self: center;}.uagb-block-2c4aa539.wp-block-uagb-image--layout-overlay figure img{box-shadow: 0px 0px 0 #00000070;}.uagb-block-2c4aa539.wp-block-uagb-image--layout-overlay .wp-block-uagb-image--layout-overlay__color-wrapper{opacity: 0.2;}.uagb-block-2c4aa539.wp-block-uagb-image--layout-overlay .wp-block-uagb-image--layout-overlay__inner{left: 15px;right: 15px;top: 15px;bottom: 15px;}.uagb-block-2c4aa539.wp-block-uagb-image--layout-overlay .wp-block-uagb-image--layout-overlay__inner .uagb-image-heading{font-style: normal;color: #fff;opacity: 1;}.uagb-block-2c4aa539.wp-block-uagb-image--layout-overlay .wp-block-uagb-image--layout-overlay__inner .uagb-image-heading a{color: #fff;}.uagb-block-2c4aa539.wp-block-uagb-image--layout-overlay .wp-block-uagb-image--layout-overlay__inner .uagb-image-caption{opacity: 0;}.uagb-block-2c4aa539.wp-block-uagb-image--layout-overlay .wp-block-uagb-image__figure:hover .wp-block-uagb-image--layout-overlay__color-wrapper{opacity: 1;}.uagb-block-2c4aa539.wp-block-uagb-image .wp-block-uagb-image--layout-overlay__inner .uagb-image-separator{width: 30%;border-top-width: 2px;border-top-color: #fff;opacity: 0;}.uagb-block-2c4aa539.wp-block-uagb-image .wp-block-uagb-image__figure img{width: px;height: auto;}.uagb-block-2c4aa539.wp-block-uagb-image .wp-block-uagb-image__figure:hover .wp-block-uagb-image--layout-overlay__inner .uagb-image-caption{opacity: 1;}.uagb-block-2c4aa539.wp-block-uagb-image .wp-block-uagb-image__figure:hover .wp-block-uagb-image--layout-overlay__inner .uagb-image-separator{opacity: 1;}.uagb-block-2c4aa539.wp-block-uagb-image--layout-default figure:hover img{box-shadow: 0px 0px 0 #00000070;}.uagb-block-2c4aa539.wp-block-uagb-image--layout-overlay figure:hover img{box-shadow: 0px 0px 0 #00000070;}@media only screen and (max-width: 976px) {.uagb-block-2c4aa539.wp-block-uagb-image .wp-block-uagb-image__figure img{width: px;height: auto;}}@media only screen and (max-width: 767px) {.uagb-block-2c4aa539.wp-block-uagb-image .wp-block-uagb-image__figure img{width: px;height: auto;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:11:{i:0;s:14:\"uagb\/container\";i:1;s:9:\"core\/html\";i:2;s:11:\"core\/search\";i:3;s:10:\"core\/group\";i:4;s:12:\"core\/heading\";i:5;s:17:\"core\/latest-posts\";i:6;s:20:\"core\/latest-comments\";i:7;s:13:\"core\/archives\";i:8;s:15:\"core\/categories\";i:9;s:10:\"uagb\/image\";i:10;s:10:\"core\/image\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1775574054\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_internal_links_processed":["1"],"_cmplz_scanned_post":["1"],"_uag_css_file_name":["uag-css-1148.css"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Matthieu","author_link":"https:\/\/hodronn.fr\/author\/matthieu\/"},"uagb_comment_info":0,"uagb_excerpt":"Modules Sur Mesure – Hodr\u00f8nn Solutions Personnalis\u00e9es Des modules sur mesure pour vos besoins uniques Nos experts con\u00e7oivent et d\u00e9veloppent […]","_links":{"self":[{"href":"https:\/\/hodronn.fr\/index.php\/wp-json\/wp\/v2\/pages\/1148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hodronn.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hodronn.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hodronn.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hodronn.fr\/index.php\/wp-json\/wp\/v2\/comments?post=1148"}],"version-history":[{"count":7,"href":"https:\/\/hodronn.fr\/index.php\/wp-json\/wp\/v2\/pages\/1148\/revisions"}],"predecessor-version":[{"id":1158,"href":"https:\/\/hodronn.fr\/index.php\/wp-json\/wp\/v2\/pages\/1148\/revisions\/1158"}],"wp:attachment":[{"href":"https:\/\/hodronn.fr\/index.php\/wp-json\/wp\/v2\/media?parent=1148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}