{"id":591,"date":"2025-12-12T14:39:21","date_gmt":"2025-12-12T14:39:21","guid":{"rendered":"https:\/\/avaliance.com\/ma\/?page_id=591"},"modified":"2026-06-12T10:10:55","modified_gmt":"2026-06-12T10:10:55","slug":"digital-concevoir-des-solutions-web-et-mobiles","status":"publish","type":"page","link":"https:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/","title":{"rendered":"\u202fDigital \u2013 Concevoir des solutions web et mobiles\u202f"},"content":{"rendered":"\r\n<section class=\"entete-page\" style=\"background-image:url('https:\/\/avaliance.com\/wp-content\/uploads\/sites\/12\/2026\/02\/digital-banner.png')\">\r\n    <div class=\"container\">\r\n        <h1 class=\"titre-page tt-anim-fadeinup\">\r\n                        <span style=\"font-size: 40px;font-weight: 600;line-height: 2;\">Digital &amp; Solutions innovantes<\/span><br><span>\r\nDes solutions utiles, pens\u00e9es pour vos m\u00e9tiers<\/span>        <\/h1>\r\n    <\/div>\r\n<\/section>\n\n\r\n<section class=\"join-section\">\r\n    <div class=\"join-media se-join-media reveal\">\r\n        <img decoding=\"async\" src=\"https:\/\/avaliance.com\/wp-content\/uploads\/sites\/12\/2026\/02\/Photo-2-Digital.png\" alt=\"Service Image\">\r\n    <\/div>\r\n\r\n    <div class=\"join-panel se-join-panel\">\r\n        <div class=\"join-inner\">\r\n            \r\n            <p class=\"join-text se-join-text tt-anim-fadeinup tt-text-reveal\">La transformation digitale ne se limite pas \u00e0 d\u00e9ployer de nouveaux outils. Elle consiste \u00e0 repenser les usages, les parcours et les exp\u00e9riences pour cr\u00e9er de la valeur r\u00e9elle, tant pour les m\u00e9tiers que pour les utilisateurs.<br \/>\nLes d\u00e9fis sont concrets<\/p>\n<ul class=\"edu-points\">\n<li class=\"text-muted tt-anim-fadeinup tt-text-reveal\">Des outils digitaux peu adapt\u00e9s aux besoins m\u00e9tiers<\/li>\n<li class=\"text-muted tt-anim-fadeinup tt-text-reveal\">Des projets qui peinent \u00e0 cr\u00e9er de la valeur concr\u00e8te<\/li>\n<li class=\"text-muted tt-anim-fadeinup tt-text-reveal\">Des exp\u00e9riences utilisateurs peu optimis\u00e9es<\/li>\n<li class=\"text-muted tt-anim-fadeinup tt-text-reveal\">Des solutions difficilement adopt\u00e9es par les \u00e9quipes<\/li>\n<li class=\"text-muted tt-anim-fadeinup tt-text-reveal\">Un manque de coh\u00e9rence entre les initiatives digitales<\/li>\n<li class=\"text-muted tt-anim-fadeinup tt-text-reveal\">Des difficult\u00e9s \u00e0 transformer des id\u00e9es en solutions op\u00e9rationnelles<\/li>\n<\/ul>\n<p class=\"join-text se-join-text tt-anim-fadeinup tt-text-reveal\">Face \u00e0 ces enjeux, Avaliance accompagne les entreprises pour concevoir, d\u00e9velopper et d\u00e9ployer des solutions digitales utiles, performantes et r\u00e9ellement adopt\u00e9es.<\/p>\n<p class=\"join-text se-join-text tt-anim-fadeinup tt-text-reveal\">Nous intervenons de l\u2019id\u00e9ation \u00e0 la mise en production, avec une approche centr\u00e9e sur les usages, la valeur et l\u2019exp\u00e9rience utilisateur.<\/p>\n\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\n\n\n<style>\n.text-muted span{\n    color: var(--bs-secondary-color) !important;\t\n}\n.edu-points li span{\nfont-weight: unset;\n}\n.edu-points{\nmargin-bottom:10px;\n}<\/style>\n\n\n\r\n<section class=\"vertical-acc-section bg-soft\">\r\n    <div class=\"container\">\r\n\r\n        <div class=\"row mb-5\">\r\n            <div class=\"col-12\">\r\n                <h2 class=\"text-brand fw-bold mb-2 tt-anim-fadeinup tt-text-reveal\">\r\n                    Le Studio Innovation                <\/h2>\r\n                <div class=\"acc-separator tt-anim-fadeinup\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"acc-wrapper tt-anim-fadeinup\">\r\n                                                <div class=\"acc-item group\">\r\n                        <div class=\"acc-header\">\r\n                            <span class=\"acc-number\">01<\/span>\r\n                            <h3 class=\"acc-title\">Conception &amp; Product Design<\/h3>\r\n                            <div class=\"acc-icon\">\r\n                                <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M9 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"acc-content\">\r\n                            <p><p>Nous concevons des produits digitaux centr\u00e9s utilisateurs et align\u00e9s avec les enjeux m\u00e9tiers.<br \/>\n\u2022 Cadrage produit et compr\u00e9hension des besoins m\u00e9tiers<br \/>\n\u2022 D\u00e9finition de la vision produit et des parcours utilisateurs<br \/>\n\u2022 UX\/UI Design centr\u00e9 usage et performance<br \/>\n\u2022 Prototypage rapide et validation des hypoth\u00e8ses<br \/>\n\u2022 Approche product-driven orient\u00e9e valeur et adoption<br \/>\n\u2022 D\u00e9veloppement &amp; int\u00e9gration<\/p>\n<p>Nous d\u00e9veloppons des applications robustes et interop\u00e9rables, int\u00e9gr\u00e9es \u00e0 votre \u00e9cosyst\u00e8me existant.<\/p>\n<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"acc-item group\">\r\n                        <div class=\"acc-header\">\r\n                            <span class=\"acc-number\">02<\/span>\r\n                            <h3 class=\"acc-title\">D\u00e9veloppement &amp; int\u00e9gration<\/h3>\r\n                            <div class=\"acc-icon\">\r\n                                <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M9 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"acc-content\">\r\n                            <p><p>\u2022 D\u00e9veloppement front-end, back-end et mobile<br \/>\n\u2022 APIs et int\u00e9gration avec les syst\u00e8mes m\u00e9tiers (ERP, CRM, outils tiers)<br \/>\n\u2022 D\u00e9veloppement de plateformes web et applicatives sur mesure<br \/>\n\u2022 Interop\u00e9rabilit\u00e9 et \u00e9volutivit\u00e9 des solutions<br \/>\n\u2022 Respect des standards de qualit\u00e9 et de s\u00e9curit\u00e9<br \/>\nNous concevons des architectures modernes, scalables et r\u00e9silientes, adapt\u00e9es \u00e0 vos enjeux de performance et de s\u00e9curit\u00e9.<\/p>\n<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"acc-item group\">\r\n                        <div class=\"acc-header\">\r\n                            <span class=\"acc-number\">03<\/span>\r\n                            <h3 class=\"acc-title\">Architecture, DevOps &amp; plateformes Cloud<\/h3>\r\n                            <div class=\"acc-icon\">\r\n                                <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M9 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"acc-content\">\r\n                            <p><p>\u2022 Architectures cloud-native et microservices<br \/>\n\u2022 D\u00e9ploiement sur plateformes Cloud (public, priv\u00e9, hybride)<br \/>\n\u2022 Mise en place de cha\u00eenes DevOps &amp; CI\/CD<br \/>\n\u2022 Automatisation des d\u00e9ploiements et de l\u2019exploitation<br \/>\n\u2022 S\u00e9curit\u00e9 et performance by design<\/p>\n<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"acc-item group\">\r\n                        <div class=\"acc-header\">\r\n                            <span class=\"acc-number\">04<\/span>\r\n                            <h3 class=\"acc-title\">Industrialisation &amp; fiabilit\u00e9 des solutions<\/h3>\r\n                            <div class=\"acc-icon\">\r\n                                <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M9 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"acc-content\">\r\n                            <p><p>Nous garantissons la stabilit\u00e9, la maintenabilit\u00e9 et la p\u00e9rennit\u00e9 des applications dans le temps.<br \/>\n\u2022 Industrialisation des d\u00e9veloppements logiciels<br \/>\n\u2022 Tests automatis\u00e9s (unitaires, int\u00e9gration, end-to-end)<br \/>\n\u2022 Supervision, monitoring et gestion des incidents<br \/>\n\u2022 Maintenance \u00e9volutive et corrective<br \/>\n\u2022 Am\u00e9lioration continue des performances et de la qualit\u00e9<\/p>\n<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"acc-item group\">\r\n                        <div class=\"acc-header\">\r\n                            <span class=\"acc-number\">05<\/span>\r\n                            <h3 class=\"acc-title\">MVP &amp; acc\u00e9l\u00e9ration<\/h3>\r\n                            <div class=\"acc-icon\">\r\n                                <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M9 5l7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"acc-content\">\r\n                            <p><p>Nous acc\u00e9l\u00e9rons le time-to-market gr\u00e2ce \u00e0 des approches agiles et it\u00e9ratives.<br \/>\n\u2022 Conception et livraison rapide de MVP<br \/>\n\u2022 M\u00e9thodes agiles et cycles courts d\u2019it\u00e9ration<br \/>\n\u2022 Validation rapide de la valeur m\u00e9tier<br \/>\n\u2022 Passage \u00e0 l\u2019\u00e9chelle ma\u00eetris\u00e9<br \/>\n\u2022 Acc\u00e9l\u00e9ration de l\u2019innovation et r\u00e9duction des risques<\/p>\n<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n<style>\r\n    .vertical-acc-section {\r\n        padding: 120px 0;\r\n        font-family: var(--ff-sans);\r\n    }\r\n\r\n    .acc-separator {\r\n        width: 96px;\r\n        height: 8px;\r\n        background-color: var(--plum);\r\n        border-radius: 99px;\r\n        margin-top: 1rem;\r\n    }\r\n\r\n    \/* Wrapper *\/\r\n    .acc-wrapper {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n        \/* REMOVED: min-height: 500px; so items don't stretch unnecessarily *\/\r\n    }\r\n\r\n    \/* Individual Item *\/\r\n    .acc-item {\r\n        \/* REMOVED: flex: 1; so it hugs its content naturally *\/\r\n        display: flex;\r\n        flex-direction: column;\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);\r\n        position: relative;\r\n        background: #ffffff;\r\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n        border: 1px solid #e2e8f0;\r\n        cursor: pointer;\r\n    }\r\n\r\n    \/* Hover State *\/\r\n    .acc-item:hover {\r\n        \/* REMOVED: flex: 3; (it will now just grow naturally based on content) *\/\r\n        background-color: var(--plum);\r\n        border-color: var(--plum);\r\n    }\r\n\r\n    \/* Header Area *\/\r\n    .acc-header {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 0 40px;\r\n        height: 80px;\r\n        min-height: 80px;\r\n        background: transparent;\r\n        transition: background-color 0.3s ease;\r\n        position: relative;\r\n        z-index: 20;\r\n    }\r\n\r\n    \/* Number *\/\r\n    .acc-number {\r\n        font-weight: 800;\r\n        font-size: 2rem;\r\n        color: #cbd5e1;\r\n        margin-right: 32px;\r\n        transition: color 0.3s ease;\r\n    }\r\n\r\n    .acc-item:hover .acc-number {\r\n        color: rgba(255, 255, 255, 0.3);\r\n    }\r\n\r\n    \/* Title *\/\r\n    .acc-title {\r\n        font-weight: 700;\r\n        font-size: 1.4rem;\r\n        color: var(--plum);\r\n        flex-grow: 1;\r\n        margin: 0;\r\n        transition: color 0.3s ease;\r\n    }\r\n\r\n    .acc-item:hover .acc-title {\r\n        color: white;\r\n    }\r\n\r\n    \/* Arrow Icon *\/\r\n    .acc-icon {\r\n        width: 32px;\r\n        height: 32px;\r\n        border-radius: 50%;\r\n        background-color: #f1f5f9;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--plum);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .acc-icon svg {\r\n        width: 16px;\r\n        height: 16px;\r\n    }\r\n\r\n    .acc-item:hover .acc-icon {\r\n        background-color: rgba(255, 255, 255, 0.2);\r\n        color: white;\r\n        transform: rotate(90deg);\r\n    }\r\n\r\n    \/* Content Area *\/\r\n    .acc-content {\r\n        padding: 0 40px 0 90px;\r\n        opacity: 0;\r\n        transform: translateY(-10px);\r\n        transition: all 0.4s ease 0.1s;\r\n        height: 0;\r\n        overflow: hidden;\r\n        color: rgba(255, 255, 255, 0.9);\r\n        font-size: 1.15rem;\r\n        line-height: 1.6;\r\n        max-width: 900px;\r\n    }\r\n\r\n    \/* FIXED: Removes the default top spacing from the paragraph tag *\/\r\n    .acc-content p {\r\n        margin-top: 0;\r\n    }\r\n\r\n    .acc-content p:last-child {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    .acc-item:hover .acc-content {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n        height: auto;\r\n        padding-bottom: 30px;\r\n        padding-top: 0;\r\n        margin-top: -15px;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 991.98px) {\r\n        .vertical-acc-section {\r\n            padding: 60px 0;\r\n        }\r\n\r\n        .acc-header {\r\n            padding: 0 20px;\r\n        }\r\n\r\n        .acc-content {\r\n            padding: 0 20px;\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .acc-number {\r\n            font-size: 1.5rem;\r\n            margin-right: 15px;\r\n        }\r\n\r\n        .acc-title {\r\n            font-size: 1.1rem;\r\n        }\r\n    }\r\n<\/style>\n\n\r\n<section class=\"benefits-section values-section values-anim-v3 text-white\"\r\n    style=\"background-image: url('https:\/\/avaliance.com\/wp-content\/uploads\/sites\/12\/2025\/12\/valeurs-bg.png');\">\r\n\r\n    <div class=\"benefits-overlay values-overlay\"><\/div>\r\n\r\n    <div class=\"container position-relative z-2\">\r\n        <div class=\"row justify-content-center\" style=\"margin-bottom:80px;\">\r\n            <div class=\"col-lg-8 text-center\">\r\n                <h2 class=\"text-brand fw-bold mb-0 tt-anim-fadeinup tt-text-reveal\">\r\n                    Vos leviers d&#039;impact                <\/h2>\r\n            <\/div>\r\n        <\/div>\r\n\r\n                    <div class=\"row g-4 justify-content-center\">\r\n                                                            <div class=\"col-md-6 col-lg-3\">\r\n                            <div class=\"benefit-item value-bubble tt-anim-fadeinup text-center\"\r\n                                style=\"background: transparent !important; box-shadow: none !important; border: none !important; width: 100%; height: 100%;\">\r\n                                <h3 class=\"benefit-title tt-text-reveal\">Adoption r\u00e9elle<\/h3>\r\n                                <p class=\"benefit-desc tt-text-reveal\">\r\n                                    1. Des solutions con\u00e7ues pour les usages et les utilisateurs<br \/>\r\n2. Des produits utilis\u00e9s, int\u00e9gr\u00e9s et adopt\u00e9s par les \u00e9quipes                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"col-md-6 col-lg-3\">\r\n                            <div class=\"benefit-item value-bubble tt-anim-fadeinup text-center\"\r\n                                style=\"background: transparent !important; box-shadow: none !important; border: none !important; width: 100%; height: 100%;\">\r\n                                <h3 class=\"benefit-title tt-text-reveal\">Time-to-market r\u00e9duit<\/h3>\r\n                                <p class=\"benefit-desc tt-text-reveal\">\r\n                                    1. Approches agiles, MVP et cycles courts d\u2019it\u00e9ration<br \/>\r\n2. Des mises en production rapides et orient\u00e9es valeur<br \/>\r\n                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"col-md-6 col-lg-3\">\r\n                            <div class=\"benefit-item value-bubble tt-anim-fadeinup text-center\"\r\n                                style=\"background: transparent !important; box-shadow: none !important; border: none !important; width: 100%; height: 100%;\">\r\n                                <h3 class=\"benefit-title tt-text-reveal\">Performance durable<\/h3>\r\n                                <p class=\"benefit-desc tt-text-reveal\">\r\n                                    1. Architectures robustes, scalables et s\u00e9curis\u00e9es<br \/>\r\n2. Des solutions fiables, maintenables et \u00e9volutives<br \/>\r\n                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"col-md-6 col-lg-3\">\r\n                            <div class=\"benefit-item value-bubble tt-anim-fadeinup text-center\"\r\n                                style=\"background: transparent !important; box-shadow: none !important; border: none !important; width: 100%; height: 100%;\">\r\n                                <h3 class=\"benefit-title tt-text-reveal\">Valeur mesurable<\/h3>\r\n                                <p class=\"benefit-desc tt-text-reveal\">\r\n                                    1. Des produits align\u00e9s avec les enjeux m\u00e9tiers<br \/>\r\n2. Un impact concret sur les op\u00e9rations et la performance                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                                                <\/div>\r\n        \r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n        \/\/ Select the wrapper to scope everything\r\n        const wrapper = document.querySelector('.benefits-slider-wrapper');\r\n        if (!wrapper) return;\r\n\r\n        const track = wrapper.querySelector('.ben-track');\r\n        const pagination = wrapper.querySelector('.ben-pagination');\r\n        const btnLeft = wrapper.querySelector('.ben-arrow-nav.left');\r\n        const btnRight = wrapper.querySelector('.ben-arrow-nav.right');\r\n\r\n        if (!track || !pagination) return;\r\n\r\n        let itemsPerScreen = 1;\r\n        let totalPages = 0;\r\n\r\n        \/\/ Manual Scroll Lock to prevent jitter\r\n        let isManualScrolling = false;\r\n        let scrollTimeout;\r\n\r\n        \/\/ Calculate layout\r\n        function updateLayout() {\r\n            const w = window.innerWidth;\r\n            if (w >= 1200) itemsPerScreen = 4;\r\n            else if (w >= 768) itemsPerScreen = 2;\r\n            else itemsPerScreen = 1;\r\n\r\n            const totalSlides = track.querySelectorAll('.ben-slide').length;\r\n            if (totalSlides === 0) return;\r\n\r\n            totalPages = Math.ceil(totalSlides \/ itemsPerScreen);\r\n\r\n            createDots();\r\n\r\n            \/\/ Initial active state update\r\n            const scrollLeft = track.scrollLeft;\r\n            const trackWidth = track.clientWidth;\r\n            let activeIndex = 0;\r\n            if (trackWidth > 0) {\r\n                activeIndex = Math.round(scrollLeft \/ trackWidth);\r\n            }\r\n            highlightDot(activeIndex);\r\n        }\r\n\r\n        \/\/ Generate Dots\r\n        function createDots() {\r\n            pagination.innerHTML = '';\r\n            if (totalPages <= 1) return;\r\n\r\n            for (let i = 0; i < totalPages; i++) {\r\n                const dot = document.createElement('button');\r\n                dot.className = 'ben-dot';\r\n                dot.setAttribute('aria-label', 'Go to page ' + (i + 1));\r\n\r\n                \/\/ Click Dot -> Go to specific page\r\n                dot.addEventListener('click', () => {\r\n                    scrollToPage(i);\r\n                });\r\n\r\n                pagination.appendChild(dot);\r\n            }\r\n        }\r\n\r\n        \/\/ Scroll Logic (Click)\r\n        function scrollToPage(pageIndex) {\r\n            if (pageIndex < 0) pageIndex = 0;\r\n            if (pageIndex >= totalPages) pageIndex = totalPages - 1;\r\n\r\n            \/\/ 1. Lock scroll updates\r\n            isManualScrolling = true;\r\n            clearTimeout(scrollTimeout);\r\n\r\n            \/\/ 2. Immediate Visual Update\r\n            highlightDot(pageIndex);\r\n\r\n            \/\/ 3. Perform Scroll\r\n            const scrollAmount = track.clientWidth * pageIndex;\r\n            track.scrollTo({ left: scrollAmount, behavior: 'smooth' });\r\n\r\n            \/\/ 4. Unlock after animation\r\n            scrollTimeout = setTimeout(() => {\r\n                isManualScrolling = false;\r\n            }, 600);\r\n        }\r\n\r\n        \/\/ Update Active Dot (Visual only)\r\n        function highlightDot(index) {\r\n            const dots = pagination.querySelectorAll('.ben-dot');\r\n            dots.forEach((dot, idx) => {\r\n                if (idx === index) dot.classList.add('active');\r\n                else dot.classList.remove('active');\r\n            });\r\n        }\r\n\r\n        \/\/ Scroll Event (Swipe\/Drag detection)\r\n        function handleScroll() {\r\n            if (totalPages <= 1) return;\r\n            if (isManualScrolling) return;\r\n\r\n            const scrollLeft = track.scrollLeft;\r\n            const trackWidth = track.clientWidth;\r\n\r\n            if (trackWidth > 0) {\r\n                let activeIndex = Math.round(scrollLeft \/ trackWidth);\r\n                highlightDot(activeIndex);\r\n            }\r\n        }\r\n\r\n        \/\/ Arrow Event Listeners\r\n        if (btnLeft && btnRight) {\r\n            btnLeft.addEventListener('click', () => {\r\n                let currentIndex = 0;\r\n                if (track.clientWidth > 0) {\r\n                    currentIndex = Math.round(track.scrollLeft \/ track.clientWidth);\r\n                }\r\n                scrollToPage(currentIndex - 1);\r\n            });\r\n\r\n            btnRight.addEventListener('click', () => {\r\n                let currentIndex = 0;\r\n                if (track.clientWidth > 0) {\r\n                    currentIndex = Math.round(track.scrollLeft \/ track.clientWidth);\r\n                }\r\n                scrollToPage(currentIndex + 1);\r\n            });\r\n        }\r\n\r\n        \/\/ Listeners\r\n        window.addEventListener('resize', () => {\r\n            updateLayout();\r\n            if (track.clientWidth > 0) {\r\n                const currentIndex = Math.round(track.scrollLeft \/ track.clientWidth);\r\n                scrollToPage(currentIndex);\r\n            }\r\n        });\r\n\r\n        track.addEventListener('scroll', () => {\r\n            requestAnimationFrame(handleScroll);\r\n        });\r\n\r\n        \/\/ Init\r\n        updateLayout();\r\n    });\r\n<\/script>\n\n\r\n<section class=\"latest-projects-section bg-soft\" style=\"padding: 120px 0;\">\r\n    <div class=\"container\">\r\n\r\n        <div class=\"row mb-5\">\r\n            <div class=\"col-lg-8 tt-anim-fadeinup\">\r\n                <h2 class=\"text-brand fw-bold mb-3 tt-text-reveal\">\r\n                    \u00c9tudes de cas clients                <\/h2>\r\n                            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"row g-4\">\r\n            \r\n                    <div class=\"col-md-6 col-lg-4 tt-anim-fadeinup\">\r\n                        <article class=\"project-card h-100 d-flex flex-column bg-white p-4 rounded-3 shadow-sm position-relative\"\r\n                            style=\"transition: transform 0.3s; border: 1px solid rgba(0,0,0,0.05);\">\r\n\r\n                            <div class=\"project-tags mb-3 d-flex gap-2 flex-wrap\">\r\n                                                                    <span class=\"p-tag tag-brand\"\r\n                                        style=\"font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: rgba(174, 191, 56, 0.15); color: #8da11c;\">\r\n                                        Banque &amp; Services Financiers                                    <\/span>\r\n                                \r\n                                                                    <span class=\"p-tag tag-technology\"\r\n                                        style=\"font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: rgba(67, 10, 75, .15); color: #430A4B;\">\r\n                                        DevOps &amp; Automation                                    <\/span>\r\n                                \r\n                                                                    <span class=\"p-tag tag-expertise\"\r\n                                        style=\"font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: rgba(100, 100, 100, 0.1); color: #555;\">\r\n                                        Finance des march\u00e9s                                    <\/span>\r\n                                                            <\/div>\r\n\r\n                            <h3 class=\"project-title mb-3\" style=\"font-size: 1.25rem; font-weight: 700; color: #430A4B;\">\r\n                                <a href=\"https:\/\/avaliance.com\/ma\/fr\/use_case\/use-case-3\/\" style=\"text-decoration: none; color: inherit;\">\r\n                                    S\u00e9curisation plateforme trading                                <\/a>\r\n                            <\/h3>\r\n\r\n                            <div class=\"project-desc text-muted mb-4 flex-grow-1\" style=\"font-size: 0.95rem; line-height: 1.6;\">\r\n                                Contexte Le client exploite une application de trading critique pour ses activit\u00e9s&#8230;                            <\/div>\r\n\r\n                            <a href=\"https:\/\/avaliance.com\/ma\/fr\/use_case\/use-case-3\/\"\r\n                                class=\"project-arrow d-flex align-items-center justify-content-center\"\r\n                                style=\"width: 40px; height: 40px; border-radius: 50%; background: #f4f4f6; color: #430A4B; text-decoration: none; transition: all 0.3s;\">\r\n                                <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n                            <\/a>\r\n\r\n                        <\/article>\r\n                    <\/div>\r\n\r\n            \r\n                    <div class=\"col-md-6 col-lg-4 tt-anim-fadeinup\">\r\n                        <article class=\"project-card h-100 d-flex flex-column bg-white p-4 rounded-3 shadow-sm position-relative\"\r\n                            style=\"transition: transform 0.3s; border: 1px solid rgba(0,0,0,0.05);\">\r\n\r\n                            <div class=\"project-tags mb-3 d-flex gap-2 flex-wrap\">\r\n                                                                    <span class=\"p-tag tag-brand\"\r\n                                        style=\"font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: rgba(174, 191, 56, 0.15); color: #8da11c;\">\r\n                                        Assurance &amp; Protection Sociale                                    <\/span>\r\n                                \r\n                                                                    <span class=\"p-tag tag-technology\"\r\n                                        style=\"font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: rgba(67, 10, 75, .15); color: #430A4B;\">\r\n                                        Business Applications                                    <\/span>\r\n                                \r\n                                                                    <span class=\"p-tag tag-expertise\"\r\n                                        style=\"font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: rgba(100, 100, 100, 0.1); color: #555;\">\r\n                                        Finance des march\u00e9s                                    <\/span>\r\n                                                            <\/div>\r\n\r\n                            <h3 class=\"project-title mb-3\" style=\"font-size: 1.25rem; font-weight: 700; color: #430A4B;\">\r\n                                <a href=\"https:\/\/avaliance.com\/ma\/fr\/use_case\/use-case-70\/\" style=\"text-decoration: none; color: inherit;\">\r\n                                    Traitements de calcul du Collateral                                <\/a>\r\n                            <\/h3>\r\n\r\n                            <div class=\"project-desc text-muted mb-4 flex-grow-1\" style=\"font-size: 0.95rem; line-height: 1.6;\">\r\n                                Contexte Dans un environnement bancaire soumis \u00e0 des exigences fortes en mati\u00e8re&#8230;                            <\/div>\r\n\r\n                            <a href=\"https:\/\/avaliance.com\/ma\/fr\/use_case\/use-case-70\/\"\r\n                                class=\"project-arrow d-flex align-items-center justify-content-center\"\r\n                                style=\"width: 40px; height: 40px; border-radius: 50%; background: #f4f4f6; color: #430A4B; text-decoration: none; transition: all 0.3s;\">\r\n                                <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n                            <\/a>\r\n\r\n                        <\/article>\r\n                    <\/div>\r\n\r\n            \r\n                    <div class=\"col-md-6 col-lg-4 tt-anim-fadeinup\">\r\n                        <article class=\"project-card h-100 d-flex flex-column bg-white p-4 rounded-3 shadow-sm position-relative\"\r\n                            style=\"transition: transform 0.3s; border: 1px solid rgba(0,0,0,0.05);\">\r\n\r\n                            <div class=\"project-tags mb-3 d-flex gap-2 flex-wrap\">\r\n                                                                    <span class=\"p-tag tag-brand\"\r\n                                        style=\"font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: rgba(174, 191, 56, 0.15); color: #8da11c;\">\r\n                                        Banque &amp; Services Financiers                                    <\/span>\r\n                                \r\n                                                                    <span class=\"p-tag tag-technology\"\r\n                                        style=\"font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: rgba(67, 10, 75, .15); color: #430A4B;\">\r\n                                        Data &amp; Analytics Platforms                                    <\/span>\r\n                                \r\n                                                                    <span class=\"p-tag tag-expertise\"\r\n                                        style=\"font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: rgba(100, 100, 100, 0.1); color: #555;\">\r\n                                        Finance des march\u00e9s                                    <\/span>\r\n                                                            <\/div>\r\n\r\n                            <h3 class=\"project-title mb-3\" style=\"font-size: 1.25rem; font-weight: 700; color: #430A4B;\">\r\n                                <a href=\"https:\/\/avaliance.com\/ma\/fr\/use_case\/use-case-65\/\" style=\"text-decoration: none; color: inherit;\">\r\n                                    Plateforme calcul de risque                                <\/a>\r\n                            <\/h3>\r\n\r\n                            <div class=\"project-desc text-muted mb-4 flex-grow-1\" style=\"font-size: 0.95rem; line-height: 1.6;\">\r\n                                Contexte Dans un environnement bancaire fortement r\u00e9glement\u00e9 et caract\u00e9ris\u00e9 par des volumes&#8230;                            <\/div>\r\n\r\n                            <a href=\"https:\/\/avaliance.com\/ma\/fr\/use_case\/use-case-65\/\"\r\n                                class=\"project-arrow d-flex align-items-center justify-content-center\"\r\n                                style=\"width: 40px; height: 40px; border-radius: 50%; background: #f4f4f6; color: #430A4B; text-decoration: none; transition: all 0.3s;\">\r\n                                <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n                            <\/a>\r\n\r\n                        <\/article>\r\n                    <\/div>\r\n\r\n                    <\/div>\r\n\r\n        <div class=\"text-center mt-5 tt-anim-fadeinup\">\r\n                        <a href=\"https:\/\/avaliance.com\/ma\/en\/use-cases-en?expertise=digital-workplace-fr\" class=\"btn btn-primary rounded-pill px-4 py-2\"\r\n                style=\"background-color: #430A4B; border-color: #430A4B;\">\r\n                Voir tous nos use cases            <\/a>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n    .project-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;\r\n    }\r\n\r\n    .project-card:hover .project-arrow {\r\n        background-color: #430A4B !important;\r\n        color: #fff !important;\r\n    }\r\n<\/style>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-591","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Solutions Digitales Maroc \u2013 Leading innovation together<\/title>\n<meta name=\"description\" content=\"Solutions digitales au Maroc : conception, d\u00e9veloppement, Cloud, DevOps et produits innovants pour acc\u00e9l\u00e9rer la transformation digitale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Solutions Digitales Maroc \u2013 Leading innovation together\" \/>\n<meta property=\"og:description\" content=\"Solutions digitales au Maroc : conception, d\u00e9veloppement, Cloud, DevOps et produits innovants pour acc\u00e9l\u00e9rer la transformation digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/\" \/>\n<meta property=\"og:site_name\" content=\"Avaliance Maroc\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GroupeAvaliance\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-12T10:10:55+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@avaliance\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/fr\\\/digital-concevoir-des-solutions-web-et-mobiles\\\/\",\"url\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/fr\\\/digital-concevoir-des-solutions-web-et-mobiles\\\/\",\"name\":\"Solutions Digitales Maroc \u2013 Leading innovation together\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/#website\"},\"datePublished\":\"2025-12-12T14:39:21+00:00\",\"dateModified\":\"2026-06-12T10:10:55+00:00\",\"description\":\"Solutions digitales au Maroc : conception, d\u00e9veloppement, Cloud, DevOps et produits innovants pour acc\u00e9l\u00e9rer la transformation digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/fr\\\/digital-concevoir-des-solutions-web-et-mobiles\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/avaliance.com\\\/ma\\\/fr\\\/digital-concevoir-des-solutions-web-et-mobiles\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/fr\\\/digital-concevoir-des-solutions-web-et-mobiles\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u202fDigital \u2013 Concevoir des solutions web et mobiles\u202f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/#website\",\"url\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/\",\"name\":\"Avaliance \u2013 Ensemble, menons l'innovation\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/#organization\",\"name\":\"Avaliance \u2013 Ensemble, menons l'innovation\",\"url\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/avaliance.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Logo-Vert-Violet-Avaliance.png\",\"contentUrl\":\"https:\\\/\\\/avaliance.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Logo-Vert-Violet-Avaliance.png\",\"width\":3969,\"height\":949,\"caption\":\"Avaliance \u2013 Ensemble, menons l'innovation\"},\"image\":{\"@id\":\"https:\\\/\\\/avaliance.com\\\/ma\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/GroupeAvaliance\\\/\",\"https:\\\/\\\/x.com\\\/avaliance\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Solutions Digitales Maroc \u2013 Leading innovation together","description":"Solutions digitales au Maroc : conception, d\u00e9veloppement, Cloud, DevOps et produits innovants pour acc\u00e9l\u00e9rer la transformation digitale.","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:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/","og_locale":"en_US","og_type":"article","og_title":"Solutions Digitales Maroc \u2013 Leading innovation together","og_description":"Solutions digitales au Maroc : conception, d\u00e9veloppement, Cloud, DevOps et produits innovants pour acc\u00e9l\u00e9rer la transformation digitale.","og_url":"https:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/","og_site_name":"Avaliance Maroc","article_publisher":"https:\/\/www.facebook.com\/GroupeAvaliance\/","article_modified_time":"2026-06-12T10:10:55+00:00","twitter_card":"summary_large_image","twitter_site":"@avaliance","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/","url":"https:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/","name":"Solutions Digitales Maroc \u2013 Leading innovation together","isPartOf":{"@id":"https:\/\/avaliance.com\/ma\/#website"},"datePublished":"2025-12-12T14:39:21+00:00","dateModified":"2026-06-12T10:10:55+00:00","description":"Solutions digitales au Maroc : conception, d\u00e9veloppement, Cloud, DevOps et produits innovants pour acc\u00e9l\u00e9rer la transformation digitale.","breadcrumb":{"@id":"https:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/avaliance.com\/ma\/fr\/digital-concevoir-des-solutions-web-et-mobiles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avaliance.com\/ma\/fr\/"},{"@type":"ListItem","position":2,"name":"\u202fDigital \u2013 Concevoir des solutions web et mobiles\u202f"}]},{"@type":"WebSite","@id":"https:\/\/avaliance.com\/ma\/#website","url":"https:\/\/avaliance.com\/ma\/","name":"Avaliance \u2013 Ensemble, menons l'innovation","description":"","publisher":{"@id":"https:\/\/avaliance.com\/ma\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avaliance.com\/ma\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/avaliance.com\/ma\/#organization","name":"Avaliance \u2013 Ensemble, menons l'innovation","url":"https:\/\/avaliance.com\/ma\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avaliance.com\/ma\/#\/schema\/logo\/image\/","url":"https:\/\/avaliance.com\/wp-content\/uploads\/2026\/06\/Logo-Vert-Violet-Avaliance.png","contentUrl":"https:\/\/avaliance.com\/wp-content\/uploads\/2026\/06\/Logo-Vert-Violet-Avaliance.png","width":3969,"height":949,"caption":"Avaliance \u2013 Ensemble, menons l'innovation"},"image":{"@id":"https:\/\/avaliance.com\/ma\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GroupeAvaliance\/","https:\/\/x.com\/avaliance"]}]}},"_links":{"self":[{"href":"https:\/\/avaliance.com\/ma\/wp-json\/wp\/v2\/pages\/591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avaliance.com\/ma\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/avaliance.com\/ma\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/avaliance.com\/ma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/avaliance.com\/ma\/wp-json\/wp\/v2\/comments?post=591"}],"version-history":[{"count":13,"href":"https:\/\/avaliance.com\/ma\/wp-json\/wp\/v2\/pages\/591\/revisions"}],"predecessor-version":[{"id":2974,"href":"https:\/\/avaliance.com\/ma\/wp-json\/wp\/v2\/pages\/591\/revisions\/2974"}],"wp:attachment":[{"href":"https:\/\/avaliance.com\/ma\/wp-json\/wp\/v2\/media?parent=591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}