{"id":440,"date":"2026-08-30T23:43:52","date_gmt":"2026-08-30T21:43:52","guid":{"rendered":"https:\/\/my-grafik.com\/?page_id=440"},"modified":"2026-10-25T22:13:27","modified_gmt":"2026-10-25T21:13:27","slug":"webdesign-ui-ux","status":"publish","type":"page","link":"https:\/\/my-grafik.com\/en\/webdesign-ui-ux\/","title":{"rendered":"Webdesign UI\/UX"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"440\" class=\"elementor elementor-440\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2d3d5df4 mg-gridbg elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2d3d5df4\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-4e71037d\" data-id=\"4e71037d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c043c7e mg-global elementor-widget elementor-widget-html\" data-id=\"4c043c7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Lora:ital,wght@1,500;1,600&display=swap');\n\/* ===== MY GRAFIK \u2013 effets globaux (ne pas supprimer ce widget) ===== *\/\n:root{--mg-o:#E8590C;--mg-o2:#F7862B;--mg-d:#141B2D;--mg-p:#FFF1E6;--mg-ease:cubic-bezier(.2,.8,.2,1)}\n.mg-global{margin:0!important;height:0;overflow:hidden}\nhtml{scroll-behavior:smooth}\n\n\/* Sur-titre num\u00e9rot\u00e9 avec trait orange *\/\n.mg-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:14px}\n.mg-eyebrow .elementor-heading-title:before{content:\"\";width:42px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--mg-o),var(--mg-o2));flex:none}\n.mg-center .elementor-heading-title{justify-content:center}\n\n\/* Texte en d\u00e9grad\u00e9 anim\u00e9 *\/\n.mg-grad{background:linear-gradient(90deg,#E8590C,#F7862B,#FFB067,#E8590C);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:mg-shine 7s linear infinite}\n@keyframes mg-shine{to{background-position:300% 0}}\n\n\/* Blobs liquides en fond de section *\/\n.mg-liquid{position:relative;overflow:hidden;overflow:clip}\n.mg-liquid>.elementor-container{position:relative;z-index:2}\n.mg-liquid:before,.mg-liquid:after{content:\"\";position:absolute;z-index:0;pointer-events:none;border-radius:42% 58% 63% 37%\/41% 44% 56% 59%;animation:mg-morph 16s ease-in-out infinite}\n.mg-liquid:before{width:620px;height:620px;right:-200px;top:-220px;background:radial-gradient(circle at 35% 35%,rgba(247,134,43,.30),rgba(232,89,12,.06) 70%)}\n.mg-liquid:after{width:460px;height:460px;left:-220px;bottom:-240px;background:radial-gradient(circle at 60% 40%,rgba(247,134,43,.16),rgba(247,134,43,0) 70%);animation-delay:-7s}\n.mg-liquid-dark:before{background:radial-gradient(circle at 35% 35%,rgba(232,89,12,.55),rgba(232,89,12,0) 70%);filter:blur(20px)}\n.mg-liquid-dark:after{background:radial-gradient(circle at 50% 50%,rgba(247,134,43,.22),rgba(247,134,43,0) 70%)}\n@keyframes mg-morph{0%,100%{border-radius:42% 58% 63% 37%\/41% 44% 56% 59%;transform:translate(0,0) rotate(0)}33%{border-radius:63% 37% 38% 62%\/55% 62% 38% 45%;transform:translate(-30px,30px) rotate(25deg)}66%{border-radius:35% 65% 52% 48%\/38% 32% 68% 62%;transform:translate(20px,-20px) rotate(-15deg)}}\n@keyframes mg-morph-r{0%,100%{border-radius:42% 58% 63% 37%\/41% 44% 56% 59%}33%{border-radius:63% 37% 38% 62%\/55% 62% 38% 45%}66%{border-radius:35% 65% 52% 48%\/38% 32% 68% 62%}}\n\n\/* Cartes : remplissage liquide, spotlight, ic\u00f4ne qui ondule *\/\n.mg-card>.elementor-widget-wrap{position:relative;overflow:hidden;isolation:isolate;transition:transform .55s var(--mg-ease),box-shadow .55s var(--mg-ease),border-color .55s}\n.mg-card>.elementor-widget-wrap:before{content:\"\";position:absolute;z-index:-1;left:-50%;width:200%;aspect-ratio:1;height:auto;top:calc(100% + 70px);border-radius:40%;background:linear-gradient(180deg,rgba(247,134,43,.16),rgba(232,89,12,.06));animation:mg-wave 9s linear infinite;transition:top 1s var(--mg-ease)}\n.mg-card>.elementor-widget-wrap:after{content:\"\";position:absolute;z-index:-1;inset:0;background:radial-gradient(260px circle at var(--x,50%) var(--y,0%),rgba(247,134,43,.16),transparent 70%);opacity:0;transition:opacity .4s}\n.mg-card:hover>.elementor-widget-wrap{transform:translateY(-10px);box-shadow:0 30px 60px rgba(20,27,45,.12)!important;border-color:rgba(232,89,12,.35)!important}\n.mg-card:hover>.elementor-widget-wrap:before{top:58%}\n.mg-card:hover>.elementor-widget-wrap:after{opacity:1}\n@keyframes mg-wave{to{transform:rotate(360deg)}}\n.mg-card .elementor-icon{animation:mg-morph-r 9s ease-in-out infinite;transition:background .5s,color .5s,transform .5s var(--mg-ease)}\n.mg-card:hover .elementor-icon{background:linear-gradient(135deg,var(--mg-o2),var(--mg-o))!important;color:#fff!important;transform:scale(1.08) rotate(-6deg)}\n.mg-card:hover .elementor-icon i{color:#fff!important}\n.mg-card:hover .elementor-icon svg{fill:#fff!important}\n\n\/* Cartes \"verre\" sur fond sombre *\/\n.mg-glass>.elementor-widget-wrap{background:rgba(255,255,255,.06)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:relative;overflow:hidden;isolation:isolate;transition:transform .55s var(--mg-ease),border-color .5s}\n.mg-glass>.elementor-widget-wrap:after{content:\"\";position:absolute;z-index:-1;inset:0;background:radial-gradient(240px circle at var(--x,50%) var(--y,0%),rgba(247,134,43,.22),transparent 70%);opacity:0;transition:opacity .4s}\n.mg-glass:hover>.elementor-widget-wrap{transform:translateY(-8px);border-color:rgba(247,134,43,.6)!important}\n.mg-glass:hover>.elementor-widget-wrap:after{opacity:1}\n\n\/* Boutons : reflet + fl\u00e8che + effet magn\u00e9tique (JS) *\/\n.mg-btn .elementor-button{position:relative;overflow:hidden;transition:transform .3s var(--mg-ease),box-shadow .4s,background .4s,color .4s!important}\n.mg-btn .elementor-button:before{content:\"\";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .8s var(--mg-ease)}\n.mg-btn .elementor-button:hover:before{left:140%}\n.mg-btn .elementor-button:hover{box-shadow:none}\n.mg-btn .elementor-button-icon{transition:transform .35s var(--mg-ease)}\n.mg-btn .elementor-button:hover .elementor-button-icon{transform:translateX(5px)}\n\n\/* \u00c9tapes : pastilles qui pulsent + ligne anim\u00e9e *\/\n.mg-steps>.elementor-container{position:relative}\n.mg-steps>.elementor-container:before{content:\"\";position:absolute;top:73px;left:14%;right:14%;height:2px;background:repeating-linear-gradient(90deg,rgba(232,89,12,.55) 0 10px,transparent 10px 20px);background-size:40px 2px;animation:mg-dash 1.4s linear infinite;z-index:0}\n@keyframes mg-dash{to{background-position:40px 0}}\n.mg-num{position:relative;z-index:3}\n.mg-num .elementor-heading-title{position:relative;display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--mg-o2),var(--mg-o));box-shadow:none}\n.mg-num .elementor-heading-title:after{content:\"\";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(232,89,12,.35);animation:mg-pulse 2.4s ease-out infinite}\n@keyframes mg-pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}\n\n\/* Grand num\u00e9ro en d\u00e9grad\u00e9 (cartes \"diff\u00e9rence\") *\/\n.mg-bignum .elementor-heading-title{background:linear-gradient(135deg,#FFB067,#E8590C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}\n\n\/* FAQ en cartes *\/\n.mg-faq .elementor-accordion-item{border:1px solid #ECEFF4!important;border-radius:18px;margin-bottom:12px;background:#fff;overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .4s var(--mg-ease)}\n.mg-faq .elementor-accordion-item:hover{transform:translateX(4px);box-shadow:0 14px 30px rgba(20,27,45,.06)}\n.mg-faq .elementor-accordion-item:has(.elementor-active){border-color:rgba(232,89,12,.45)!important;box-shadow:none;background:linear-gradient(180deg,#FFF7F0,#fff)}\n.mg-faq .elementor-tab-title{border:0!important;display:flex;align-items:center;flex-direction:row-reverse;justify-content:space-between;gap:16px}\n.mg-faq .elementor-tab-content{border:0!important}\n.mg-faq .elementor-accordion-icon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--mg-p);display:grid!important;place-items:center;transition:transform .4s var(--mg-ease),background .4s}\n.mg-faq .elementor-active .elementor-accordion-icon{background:var(--mg-o);transform:rotate(180deg)}\n.mg-faq .elementor-active .elementor-accordion-icon i{color:#fff!important}\n\n\/* Anneaux lumineux de la section finale *\/\n.mg-rings{position:relative;overflow:hidden;overflow:clip}\n.mg-rings>.elementor-container{position:relative;z-index:2}\n.mg-rings:before{content:\"\";position:absolute;width:1300px;height:1300px;right:-420px;top:50%;margin-top:-650px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(247,134,43,0) 0 138px,rgba(247,134,43,.45) 139px 140px);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:mg-rings 7s ease-in-out infinite}\n.mg-rings:after{content:\"\";position:absolute;width:760px;height:760px;right:-120px;top:50%;margin-top:-380px;border-radius:50%;background:radial-gradient(circle,rgba(232,89,12,.55),rgba(232,89,12,0) 65%);animation:mg-morph 14s ease-in-out infinite}\n@keyframes mg-rings{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}\n\n\/* Formulaire en verre *\/\n.mg-formcard>.elementor-widget-wrap{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}\n\n\n\/* ===== Page Cr\u00e9ation de logo ===== *\/\n.mg-serif{font-family:\"Lora\",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.01em;display:inline-block;padding:0 .32em .06em;margin:0 .05em;border:1.5px solid currentColor;border-radius:999px;line-height:1.05;position:relative}\n.mg-serif.o{color:#F7862B}.mg-serif.b{color:#7CC4FF}\n.mg-serif:after{content:\"\";position:absolute;inset:-6px;border-radius:999px;border:1px solid currentColor;opacity:0;animation:mg-ring 3.2s ease-out infinite}\n@keyframes mg-ring{0%{opacity:.6;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}\n.mg-badge .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #F1E4D8;border-radius:999px;padding:9px 16px;box-shadow:0 10px 26px rgba(20,27,45,.06)}\n.mg-badge .elementor-heading-title b{color:#E8590C}\n\/* Images : cadre liquide + zoom *\/\n.mg-img{overflow:hidden;border-radius:28px;animation:mg-morph-soft 14s ease-in-out infinite;box-shadow:0 30px 60px rgba(20,27,45,.14);isolation:isolate}\n.mg-img img{display:block;width:100%;height:auto;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}\n.mg-img:hover img{transform:scale(1.06)}\n@keyframes mg-morph-soft{0%,100%{border-radius:28px}25%{border-radius:64px 24px 48px 28px}50%{border-radius:28px 64px 28px 52px}75%{border-radius:44px 28px 64px 24px}}\n\/* Cadre lumineux qui tourne (photo d'\u00e9quipe) *\/\n@property --a{syntax:\"<angle>\";initial-value:0deg;inherits:false}\n.mg-glow{border-radius:32px;padding:6px;background:conic-gradient(from var(--a),#E8590C,#F7B267,rgba(255,255,255,.15),#E8590C);animation:mg-spin 6s linear infinite;box-shadow:0 40px 80px rgba(0,0,0,.35)}\n.mg-glow img{display:block;width:100%;height:auto;border-radius:26px}\n@keyframes mg-spin{to{--a:360deg}}\n.mg-liquid-light:before{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.28),rgba(255,255,255,0) 70%)}\n.mg-liquid-light:after{background:radial-gradient(circle at 50% 50%,rgba(255,214,170,.35),rgba(255,214,170,0) 70%)}\n\/* Lignes du processus *\/\n.mg-row{position:relative}\n.mg-row:before{content:\"\";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.14)}\n.mg-row:after{content:\"\";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,#E8590C,#F7B267);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1)}\n.mg-row:hover:after{transform:scaleX(1)}\n.mg-row>.elementor-container{transition:transform .6s cubic-bezier(.2,.8,.2,1)}\n.mg-row:hover>.elementor-container{transform:translateX(10px)}\n.mg-outline .elementor-heading-title{-webkit-text-stroke:1.5px rgba(255,255,255,.35);color:transparent!important;transition:color .5s,-webkit-text-stroke-color .5s}\n.mg-row:hover .mg-outline .elementor-heading-title{color:#E8590C!important;-webkit-text-stroke-color:#E8590C}\n.mg-row:hover .mg-rowtitle .elementor-heading-title{color:#F7B267!important}\n.mg-rowtitle .elementor-heading-title{transition:color .5s}\n\/* Cartes bento *\/\n.mg-bento>.elementor-widget-wrap{position:relative;overflow:hidden;isolation:isolate;transition:transform .6s cubic-bezier(.2,.8,.2,1)}\n.mg-bento:hover>.elementor-widget-wrap{transform:translateY(-8px)}\n.mg-bento>.elementor-widget-wrap:before{content:\"\";position:absolute;z-index:-1;width:420px;height:420px;right:-160px;top:-160px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);border-radius:42% 58% 63% 37%\/41% 44% 56% 59%;animation:mg-morph 12s ease-in-out infinite}\n.mg-tag .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:8px 16px}\n.mg-tag .elementor-heading-title:before{content:\"\";width:8px;height:8px;border-radius:50%;background:currentColor;animation:mgv-blink 1.8s ease-in-out infinite}\n@keyframes mgv-blink{50%{transform:scale(1.4);opacity:.5}}\n.mg-check ul{list-style:none;padding:0;margin:0}\n.mg-check li{position:relative;padding-left:30px;margin-bottom:10px}\n.mg-check li:before{content:\"\";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:#FFE7D4 url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8590C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'\/%3E%3C\/svg%3E\") center\/11px no-repeat}\n.mg-check.w li:before{background-color:rgba(255,255,255,.2);background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'\/%3E%3C\/svg%3E\")}\n.mg-obj{display:inline-flex;gap:8px;align-items:flex-start;background:rgba(232,89,12,.12);border:1px solid rgba(232,89,12,.35);border-radius:14px;padding:10px 14px;color:#fff;font-weight:600}\n.mg-diamond li:before{border-radius:3px;transform:rotate(45deg) scale(.8);background:linear-gradient(135deg,#F7862B,#E8590C)}\n@media(max-width:767px){.mg-row:hover>.elementor-container{transform:none}.mg-serif:after{display:none}}\n@media(prefers-reduced-motion:reduce){.mg-img,.mg-glow,.mg-serif:after{animation:none!important}}\n\n\/* ===== Page Identit\u00e9 visuelle : \u00e9tapes empil\u00e9es (sticky) ===== *\/\n.mg-stack{position:sticky!important;z-index:2;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}\n.mg-sk7{top:206px}.mg-sk1{top:110px}.mg-sk2{top:126px}.mg-sk3{top:142px}.mg-sk4{top:158px}.mg-sk5{top:174px}.mg-sk6{top:190px}\n.mg-stack:hover{transform:translateY(-6px)}\n.mg-stack>.elementor-container{position:relative;z-index:2}\n.mg-stack:before{content:\"\";position:absolute;z-index:1;width:360px;height:360px;right:-120px;top:-160px;border-radius:42% 58% 63% 37%\/41% 44% 56% 59%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);animation:mg-morph 12s ease-in-out infinite;pointer-events:none}\n.mg-stack{overflow:hidden}\n.mg-float{max-width:470px;margin:0 auto}\n.mg-float img{display:block;width:100%;height:auto;border-radius:32px;background:#fff;box-shadow:0 30px 70px rgba(20,27,45,.12);border:1px solid #F1E4D8;animation:mg-floaty 7s ease-in-out infinite}\n@keyframes mg-floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.2deg)}}\n.mg-dot{position:absolute;border-radius:50%;animation:mg-floaty 6s ease-in-out infinite}\n@media (max-width:767px){.mg-stack{position:relative!important;top:auto!important}}\n.mg-steps5>.elementor-container:before{top:42px;left:10%;right:10%}\n.mg-step>.elementor-widget-wrap{transition:transform .5s cubic-bezier(.2,.8,.2,1)}\n.mg-step:hover>.elementor-widget-wrap{transform:translateY(-8px)}\n@media (max-width:1024px){.mg-steps5>.elementor-container:before{display:none}}\n\n\/* ===================== V2 : effets premium ===================== *\/\n\/* Hero : grille + halo qui suit la souris *\/\n.mg-gridbg{position:relative;overflow:hidden;background:\n radial-gradient(600px circle at var(--mx,70%) var(--my,30%),rgba(247,134,43,.22),transparent 60%),\n radial-gradient(900px circle at 100% 0%,rgba(232,89,12,.28),transparent 55%),\n linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0\/64px 64px,\n linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0\/64px 64px,\n linear-gradient(160deg,#0B1222,#141B2D 60%,#1B1420)!important}\n.mg-gridbg>.elementor-container{position:relative;z-index:2}\n.mg-gridbg:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 70%,rgba(11,18,34,.9));z-index:1}\n\/* Mots qui tournent dans un titre *\/\n.mg-rot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.08em}\n.mg-rot>span{grid-area:1\/1;opacity:0;transform:translateY(100%);animation:mg-rotw 9s cubic-bezier(.2,.8,.2,1) infinite}\n.mg-rot>span:nth-child(2){animation-delay:3s}.mg-rot>span:nth-child(3){animation-delay:6s}\n@keyframes mg-rotw{0%{opacity:0;transform:translateY(100%)}5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-100%)}}\n\/* R\u00e9v\u00e9lation des titres mot \u00e0 mot *\/\n.mg-split.mg-ready .mg-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}\n.mg-split.mg-ready .mg-w>span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*55ms)}\n.mg-split.mg-in .mg-w>span{transform:none}\n\/* Ligne de progression au d\u00e9filement (process) *\/\n.mg-progress>.elementor-container:after{content:\"\";position:absolute;top:42px;left:10%;right:10%;height:3px;border-radius:3px;background:linear-gradient(90deg,#F7862B,#E8590C);transform-origin:left;transform:scaleX(var(--p,0));z-index:1;box-shadow:none}\n.mg-progress>.elementor-container>.elementor-column{z-index:2}\n.mg-progress>.elementor-container:before{background:rgba(232,89,12,.18)!important;animation:none!important;height:3px!important}\n.mg-progress .mg-num .elementor-heading-title{background:#fff;color:#E8590C!important;border:2px solid #F7B267;box-shadow:none;transition:background .5s,color .5s,box-shadow .5s,transform .5s cubic-bezier(.2,.8,.2,1)}\n.mg-progress .mg-num .elementor-heading-title:after{display:none}\n.mg-progress .mg-on .mg-num .elementor-heading-title{background:linear-gradient(135deg,#F7862B,#E8590C);color:#fff!important;border-color:transparent;box-shadow:none;transform:scale(1.08)}\n.mg-progress .mg-on .mg-num .elementor-heading-title:after{display:block}\n\/* Citation *\/\n.mg-quote .elementor-heading-title{border-left:4px solid #E8590C;padding:4px 0 4px 20px;font-family:Lora,Georgia,serif!important;font-style:italic}\n\/* Compteurs *\/\n.mg-stat .elementor-counter{display:flex;flex-direction:column;align-items:flex-start}\n.mg-stat .elementor-counter-number-wrapper{background:linear-gradient(135deg,#FFFFFF,#FFD0AA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}\n.mg-stat>.elementor-widget-wrap{border-left:1px solid rgba(255,255,255,.12)}\n\/* Carte service avec visuel *\/\n.mg-svc>.elementor-widget-wrap{padding:0!important;overflow:hidden}\n.mg-svc .mg-svc-body{padding:0 28px 30px}\n.mg-svc .elementor-widget-html{margin-bottom:22px!important}\n\/* ---------- mini-visuels ---------- *\/\n.mgs{position:relative;height:190px;background:radial-gradient(circle at 80% 10%,rgba(247,134,43,.22),transparent 55%),linear-gradient(160deg,#FFF6EE,#FFE9D6);display:grid;place-items:center;overflow:hidden;font-family:Inter,sans-serif}\n.mgs em{position:absolute;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:#141B2D;background:#fff;border-radius:999px;padding:6px 11px;box-shadow:0 8px 18px rgba(20,27,45,.08)}\n.mgs .t1{left:14px;bottom:14px}.mgs .t2{right:14px;top:14px}\n.mgs-radar .r{position:relative;width:140px;height:140px;border-radius:50%}\n.mgs-radar .r i{position:absolute;border-radius:50%;border:1.5px solid rgba(232,89,12,.3)}\n.mgs-radar .r i:nth-child(1){inset:0}.mgs-radar .r i:nth-child(2){inset:22%}.mgs-radar .r i:nth-child(3){inset:44%;background:#E8590C;border:0}\n.mgs-radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(247,134,43,.45),transparent 25%);animation:mgs-spin 3s linear infinite}\n.mgs-radar .bl{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:#141B2D;animation:mgs-blip 3s ease-out infinite}\n.mgs-radar .bl.hot{background:#E8590C;box-shadow:none}\n@keyframes mgs-spin{to{transform:rotate(360deg)}}\n@keyframes mgs-blip{0%,100%{transform:scale(.6);opacity:.4}20%{transform:scale(1.3);opacity:1}}\n.mgs-logo svg{width:76%;height:auto;overflow:visible}\n.mgs-logo .g{fill:none;stroke:rgba(20,27,45,.12);stroke-width:1;stroke-dasharray:4 5}\n.mgs-logo .d{fill:none;stroke:#E8590C;stroke-width:5;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:mgs-draw 4.5s ease-in-out infinite}\n.mgs-logo .h{fill:#fff;stroke:#141B2D;stroke-width:1.5}.mgs-logo .h2{fill:#141B2D}.mgs-logo .hl{stroke:#141B2D;stroke-width:1;opacity:.5}\n@keyframes mgs-draw{0%{stroke-dashoffset:260}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-260}}\n.mgs-sys .sw{display:flex;gap:7px;align-items:flex-end;height:96px}\n.mgs-sys .sw i{width:30px;border-radius:9px;animation:mgs-bar 3.5s ease-in-out infinite}\n.mgs-sys .sw i:nth-child(1){height:90px}.mgs-sys .sw i:nth-child(2){height:70px;animation-delay:-.6s}.mgs-sys .sw i:nth-child(3){height:80px;animation-delay:-1.2s}.mgs-sys .sw i:nth-child(4){height:56px;animation-delay:-1.8s;border:1px solid #ddd}.mgs-sys .sw i:nth-child(5){height:66px;animation-delay:-2.4s}\n.mgs-sys .aa{position:absolute;right:20px;top:14px;font:800 46px\/1 Lora,Georgia,serif;color:#141B2D;animation:mgs-aa 3.5s ease-in-out infinite}\n@keyframes mgs-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.6)}}\n@keyframes mgs-aa{0%,100%{font-style:normal;color:#141B2D}50%{font-style:italic;color:#E8590C}}\n.mgs-book .bk{position:relative;width:170px;height:110px;perspective:600px;display:flex}\n.mgs-book .pg{width:50%;height:100%;background:#fff;padding:12px 10px;display:flex;flex-direction:column;gap:7px;box-shadow:0 14px 30px rgba(20,27,45,.12)}\n.mgs-book .pg.l{border-radius:10px 0 0 10px}.mgs-book .pg.r{border-radius:0 10px 10px 0}\n.mgs-book .pg s{display:block;height:6px;border-radius:4px;background:#ECEFF4}.mgs-book .pg s.c{height:26px;background:linear-gradient(90deg,#E8590C 33%,#F7B267 33% 66%,#141B2D 66%)}.mgs-book .pg s.o{height:30px;width:30px;border-radius:50%;background:#E8590C}\n.mgs-book .fl{position:absolute;left:50%;top:0;width:50%;height:100%;background:linear-gradient(90deg,#fff,#F5F7FA);border-radius:0 10px 10px 0;transform-origin:left center;animation:mgs-flip 4s ease-in-out infinite}\n.mgs-book .f2{animation-delay:-2s}\n@keyframes mgs-flip{0%{transform:rotateY(0)}50%,100%{transform:rotateY(-180deg)}}\n.mgs-print{perspective:700px}\n.mgs-print .cd{position:relative;width:150px;height:88px;transform-style:preserve-3d;animation:mgs-card 5s ease-in-out infinite;z-index:2}\n.mgs-print .fr,.mgs-print .bk2{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;box-shadow:0 18px 30px rgba(20,27,45,.18)}\n.mgs-print .fr{background:linear-gradient(135deg,#F7862B,#E8590C);display:grid;place-items:center;font:800 15px\/1.05 Inter,sans-serif;color:#fff;text-align:center}\n.mgs-print .bk2{background:#141B2D;transform:rotateY(180deg);padding:14px;display:flex;flex-direction:column;gap:6px}\n.mgs-print .bk2 s{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.3);width:70%}.mgs-print .bk2 i{position:absolute;right:12px;bottom:12px;width:20px;height:20px;border-radius:50%;background:#F7862B}\n.mgs-print .env{position:absolute;width:170px;height:100px;border-radius:8px;background:#fff;transform:rotate(-10deg) translate(-20px,18px);box-shadow:0 10px 24px rgba(20,27,45,.08)}\n@keyframes mgs-card{0%,35%{transform:rotateY(0) rotateX(8deg)}50%,85%{transform:rotateY(180deg) rotateX(8deg)}100%{transform:rotateY(360deg) rotateX(8deg)}}\n.mgs-phone .ph{width:92px;height:160px;border-radius:22px;background:#141B2D;padding:6px;transform:translateY(22px) rotate(-6deg);box-shadow:0 20px 40px rgba(20,27,45,.25)}\n.mgs-phone .feed{height:100%;border-radius:17px;background:#fff;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:6px}\n.mgs-phone .po{flex:none;height:60px;border-radius:10px;animation:mgs-feed 6s linear infinite}\n.mgs-phone .po.a{background:linear-gradient(135deg,#F7862B,#E8590C)}.mgs-phone .po.b{background:#141B2D}.mgs-phone .po.c{background:#FFD9BD}\n.mgs-phone .lk{position:absolute;right:18%;top:26%;background:#fff;color:#E8590C;font:700 12px Inter,sans-serif;border-radius:999px;padding:6px 10px;box-shadow:0 8px 18px rgba(20,27,45,.12);animation:mgs-like 3s ease-in-out infinite}\n@keyframes mgs-feed{to{transform:translateY(-198px)}}\n@keyframes mgs-like{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.08)}}\n@media (max-width:767px){.mg-stat>.elementor-widget-wrap{border-left:0}.mg-progress>.elementor-container:after{display:none}}\n@media (prefers-reduced-motion:reduce){.mgs *,.mg-rot>span{animation:none!important}.mg-rot>span:first-child{opacity:1;transform:none}.mg-split.mg-ready .mg-w>span{transform:none}}\n\n\/* ---------- mini-visuels supports imprim\u00e9s ---------- *\/\n.mgs-flyer .fy{position:absolute;width:86px;height:122px;border-radius:6px;box-shadow:0 16px 30px rgba(20,27,45,.18)}\n.mgs-flyer .f2{background:#141B2D;transform:rotate(-12deg) translate(-34px,4px)}\n.mgs-flyer .f1{background:#fff;padding:10px;display:flex;flex-direction:column;gap:6px;animation:mgs-slide 4s ease-in-out infinite}\n.mgs-flyer .f1 b{font:800 15px Inter,sans-serif;color:#141B2D}.mgs-flyer .f1 span{align-self:flex-start;background:#E8590C;color:#fff;font:800 16px Inter,sans-serif;padding:4px 8px;border-radius:8px;animation:mgs-pulse2 1.6s ease-in-out infinite}\n.mgs-flyer .f1 s{display:block;height:4px;border-radius:3px;background:#E3E8F0}\n@keyframes mgs-slide{0%,100%{transform:rotate(6deg) translate(18px,0)}50%{transform:rotate(2deg) translate(8px,-8px)}}\n@keyframes mgs-pulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}\n.mgs-post .wall{position:relative;width:110px;height:150px}\n.mgs-post .ps{position:absolute;inset:0;background:linear-gradient(160deg,#F7862B,#C2410C);border-radius:3px;padding:12px;color:#fff;transform-origin:top;animation:mgs-unr 5s cubic-bezier(.6,0,.2,1) infinite;box-shadow:0 16px 30px rgba(20,27,45,.2);overflow:hidden}\n.mgs-post .ps b{font:800 17px\/1 Inter,sans-serif}.mgs-post .ps i{position:absolute;right:-18px;bottom:28px;width:70px;height:70px;border-radius:50%;background:#141B2D}\n.mgs-post .ps s{position:absolute;left:12px;bottom:12px;width:50%;height:4px;border-radius:3px;background:rgba(255,255,255,.7)}\n.mgs-post .tp{position:absolute;top:-6px;width:26px;height:12px;background:rgba(255,255,255,.75);box-shadow:0 2px 4px rgba(0,0,0,.1)}.mgs-post .tp.a{left:-8px;transform:rotate(-30deg)}.mgs-post .tp.b{right:-8px;transform:rotate(30deg)}\n@keyframes mgs-unr{0%,8%{transform:scaleY(.05)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(.05)}}\n.mgs-fold2{perspective:600px}\n.mgs-fold2 .dp{position:relative;width:180px;height:110px;transform-style:preserve-3d;transform:rotateX(14deg)}\n.mgs-fold2 .pp{position:absolute;top:0;width:60px;height:110px;background:#fff;padding:10px 8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 14px 26px rgba(20,27,45,.16)}\n.mgs-fold2 .pp s{display:block;height:4px;border-radius:3px;background:#E3E8F0}.mgs-fold2 .pp s.o{height:26px;background:linear-gradient(135deg,#FFD9BD,#E8590C)}\n.mgs-fold2 .c{left:60px;z-index:2}.mgs-fold2 .l{left:0;transform-origin:right;animation:mgs-fl 5s ease-in-out infinite;background:#FAFBFC}.mgs-fold2 .r{left:120px;transform-origin:left;animation:mgs-fr 5s ease-in-out infinite;background:#FAFBFC}\n@keyframes mgs-fl{0%,15%{transform:rotateY(0)}40%,65%{transform:rotateY(175deg)}90%,100%{transform:rotateY(0)}}\n@keyframes mgs-fr{0%,25%{transform:rotateY(0)}50%,70%{transform:rotateY(-175deg)}100%{transform:rotateY(0)}}\n.mgs-bache svg{width:84%;overflow:visible}\n.mgs-bache .wv,.mgs-bache .wvt{animation:mgs-wind 3s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}\n@keyframes mgs-wind{0%,100%{transform:skewY(0) scaleX(1)}25%{transform:skewY(1.5deg) scaleX(.985)}75%{transform:skewY(-1.5deg) scaleX(1.01)}}\n.mgs-kake .kk{display:flex;flex-direction:column;align-items:center;height:160px;width:70px;transform:translateY(10px)}\n.mgs-kake .bar{width:100%;height:6px;border-radius:3px;background:#9AA2B1;z-index:2}\n.mgs-kake .sh{width:90%;flex:1;background:linear-gradient(180deg,#fff 0 45%,#FFD9BD);transform-origin:bottom;animation:mgs-up 5s cubic-bezier(.6,0,.2,1) infinite;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:12px;box-shadow:0 14px 26px rgba(20,27,45,.16)}\n.mgs-kake .sh i{width:28px;height:28px;border-radius:50%;background:#E8590C}.mgs-kake .sh b{font:800 10px\/1 Inter,sans-serif;color:#141B2D;text-align:center}.mgs-kake .sh s{display:block;height:3px;width:70%;border-radius:2px;background:#E3E8F0}\n.mgs-kake .base{width:120%;height:9px;border-radius:5px;background:#5B6475}\n@keyframes mgs-up{0%,8%{transform:scaleY(0)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}\n.mg-steps4>.elementor-container:before,.mg-steps4.mg-progress>.elementor-container:after{left:12.5%!important;right:12.5%!important;top:42px!important}\n\/* Carte support : badge \"objectif\" *\/\n.mg-tagpill .elementor-heading-title{display:inline-block;border:1px solid #141B2D;border-radius:999px;padding:6px 12px}\n.mg-ideal .elementor-widget-container,.mg-ideal>.pv-text{border-top:1px solid #ECEFF4;padding-top:14px!important}\n.mg-imgtile>.elementor-widget-wrap{padding:0!important;overflow:hidden}\n.mg-imgtile .elementor-widget-image,.mg-imgtile .elementor-widget-image .elementor-widget-container{height:100%}\n.mg-imgtile img{width:100%;height:100%!important;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}\n.mg-imgtile:hover img{transform:scale(1.06)}\n\n\/* ---------- mini-visuels packaging ---------- *\/\n.mgs-sizes{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding-bottom:30px}\n.mgs-sizes .bx{position:relative;background:linear-gradient(160deg,#F7862B,#C2410C);border-radius:6px;box-shadow:0 14px 26px rgba(20,27,45,.16);animation:mgs-grow 4.5s ease-in-out infinite;transform-origin:bottom}\n.mgs-sizes .bx i{position:absolute;left:50%;top:22%;width:40%;aspect-ratio:1;margin-left:-20%;border-radius:50%;background:#141B2D}\n.mgs-sizes .s1{width:42px;height:56px}.mgs-sizes .s2{width:58px;height:84px;animation-delay:.3s}.mgs-sizes .s3{width:74px;height:110px;animation-delay:.6s}\n@keyframes mgs-grow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.88)}}\n.mgs-label svg{height:150px}\n.mgs-label .wrap{animation:mgs-wrap 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}\n@keyframes mgs-wrap{0%,10%{transform:scaleX(0)}40%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}\n.mgs-eco .ring{width:110px;height:110px;border-radius:50%;border:3px dashed #2D6A4F;display:grid;place-items:center;animation:mgs-spin 9s linear infinite}\n.mgs-eco .ring span{font-size:44px;color:#2D6A4F;animation:mgs-spin 9s linear infinite reverse}\n.mgs-eco .leaf{position:absolute;right:26%;top:18%;width:46px;animation:mgs-leaf 4s ease-in-out infinite;transform-origin:bottom left}\n@keyframes mgs-leaf{0%,100%{transform:rotate(-8deg) scale(.9)}50%{transform:rotate(8deg) scale(1.05)}}\n\/* Images en forme de goutte (m\u00e9thodologie) *\/\n.mg-blob img,.mg-blob>img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:42% 58% 63% 37%\/41% 44% 56% 59%;animation:mg-morph-r 10s ease-in-out infinite;box-shadow:0 20px 40px rgba(0,0,0,.35)}\n.mg-row:hover .mg-blob img{animation-duration:3s}\n.mg-gal img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 24px 50px rgba(20,27,45,.16);transition:transform .9s cubic-bezier(.2,.8,.2,1),border-radius .9s}\n.mg-gal:hover img{transform:scale(1.04) rotate(-1deg);border-radius:40px 22px 40px 22px}\n.mg-gal{overflow:visible!important}\n\n\/* ---------- mini-visuels site vitrine ---------- *\/\n.mgs-tap .ph{width:84px;height:150px;border-radius:20px;background:#141B2D;padding:5px;transform:translateY(16px)}\n.mgs-tap .mn{height:100%;border-radius:16px;background:#fff;padding:22px 8px;display:flex;flex-direction:column;gap:8px}\n.mgs-tap .mn s{display:block;height:14px;border-radius:5px;background:#ECEFF4}.mgs-tap .mn s.o{animation:mgs-hl 2.4s ease-in-out infinite}\n@keyframes mgs-hl{0%,40%{background:#ECEFF4}55%,90%{background:#E8590C}}\n.mgs-tap .fg{position:absolute;left:54%;top:58%;width:26px;height:26px;border-radius:50%;background:rgba(232,89,12,.25);border:2px solid #E8590C;animation:mgs-tp 2.4s ease-in-out infinite}\n@keyframes mgs-tp{0%{transform:translate(30px,30px) scale(1);opacity:0}30%{opacity:1}45%{transform:translate(0,0) scale(1)}52%{transform:scale(.7)}60%,100%{transform:scale(1);opacity:0}}\n.mgs-clock .ck{position:relative;width:110px;height:110px;border-radius:50%;background:#fff;border:4px solid #141B2D;box-shadow:0 14px 28px rgba(20,27,45,.15)}\n.mgs-clock .ck i{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:3px;background:#141B2D}\n.mgs-clock .hh{width:5px;height:28px;margin-left:-2.5px;animation:mgs-spin 24s linear infinite}\n.mgs-clock .mm{width:3px;height:40px;margin-left:-1.5px;background:#E8590C!important;animation:mgs-spin 2s linear infinite}\n.mgs-clock .ck b{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#141B2D}\n.mgs-clock .b24{position:absolute;right:14px;top:14px;background:#16A34A;color:#fff;border-radius:999px;padding:6px 10px;font:700 11px Inter,sans-serif}\n.mgs-trust .sh{width:84px;height:96px;background:linear-gradient(160deg,#F7862B,#C2410C);clip-path:path(\"M42 0 L84 14 V50 C84 76 64 90 42 96 C20 90 0 76 0 50 V14 Z\");display:grid;place-items:center;color:#fff;font:800 38px Inter,sans-serif;animation:mgs-pulse2 2.4s ease-in-out infinite}\n.mgs-trust .stars{position:absolute;right:16px;top:16px;display:flex;gap:2px}\n.mgs-trust .stars i{font-style:normal;color:#F7B267;font-size:18px;opacity:.25;animation:mgs-star 3s infinite}\n.mgs-trust .stars i:nth-child(2){animation-delay:.2s}.mgs-trust .stars i:nth-child(3){animation-delay:.4s}.mgs-trust .stars i:nth-child(4){animation-delay:.6s}.mgs-trust .stars i:nth-child(5){animation-delay:.8s}\n@keyframes mgs-star{0%,10%{opacity:.25;transform:scale(.8)}25%,85%{opacity:1;transform:none}100%{opacity:.25}}\n\/* Cartes inclin\u00e9es qui se redressent *\/\n.mg-tilt>.elementor-widget-wrap{transition:transform .7s cubic-bezier(.2,.8,.2,1)!important}\n.mg-tilt.t1>.elementor-widget-wrap{transform:rotate(-3deg) translateY(30px)}\n.mg-tilt.t2>.elementor-widget-wrap{transform:rotate(1.5deg)}\n.mg-tilt.t3>.elementor-widget-wrap{transform:rotate(3deg) translateY(24px)}\n.mg-tilt:hover>.elementor-widget-wrap{transform:none!important}\n.mg-bigdig .elementor-heading-title{background:linear-gradient(135deg,#141B2D,#E8590C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}\n@media (max-width:767px){.mg-tilt>.elementor-widget-wrap{transform:none!important}}\n\n@media (max-width:767px){\n .mg-steps>.elementor-container:before{display:none}\n .mg-liquid:before{width:380px;height:380px;right:-180px;top:-120px}\n .mg-rings:before{width:900px;height:900px;right:-520px}\n}\n@media (prefers-reduced-motion:reduce){\n .mg-liquid:before,.mg-liquid:after,.mg-grad,.mg-card .elementor-icon,.mg-card>.elementor-widget-wrap:before,.mg-steps>.elementor-container:before,.mg-num .elementor-heading-title:after,.mg-rings:before,.mg-rings:after{animation:none!important}\n}\n<\/style>\n<script>\n(function(){\n if(window.__mgInit)return;window.__mgInit=1;\n function init(){\n  var fine=window.matchMedia('(pointer:fine)').matches;\n  document.querySelectorAll('.mg-card>.elementor-widget-wrap,.mg-glass>.elementor-widget-wrap').forEach(function(el){\n   el.addEventListener('pointermove',function(e){var r=el.getBoundingClientRect();el.style.setProperty('--x',(e.clientX-r.left)+'px');el.style.setProperty('--y',(e.clientY-r.top)+'px');});\n  });\n\n \/* V2 : r\u00e9v\u00e9lation mot \u00e0 mot, progression, halo *\/\n var stat=document.documentElement.classList.contains('pv-static'),red=window.matchMedia('(prefers-reduced-motion:reduce)').matches;\n document.querySelectorAll('.mg-split .elementor-heading-title').forEach(function(h){\n  var w=h.closest('.mg-split');if(w.classList.contains('mg-ready'))return;var n=0,out=document.createDocumentFragment();\n  [].slice.call(h.childNodes).forEach(function(c){\n   if(c.nodeType===3){c.textContent.split(\/(\\s+)\/).forEach(function(p){if(!p)return;if(\/^\\s+$\/.test(p)){out.appendChild(document.createTextNode(p));return;}\n     var a=document.createElement('span');a.className='mg-w';var b=document.createElement('span');b.style.setProperty('--i',n++);b.textContent=p;a.appendChild(b);out.appendChild(a);});}\n   else if(c.nodeName==='BR'){out.appendChild(c);}\n   else{var a=document.createElement('span');a.className='mg-w';var b=document.createElement('span');b.style.setProperty('--i',n++);b.appendChild(c);a.appendChild(b);out.appendChild(a);}\n  });\n  h.innerHTML='';h.appendChild(out);w.classList.add('mg-ready');\n  if(stat||red){w.classList.add('mg-in');return;}\n  var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){w.classList.add('mg-in');io.disconnect();}});},{threshold:.2});io.observe(w);\n });\n var prog=[].slice.call(document.querySelectorAll('.mg-progress'));\n function tick(){prog.forEach(function(p){var r=p.getBoundingClientRect(),v=stat?1:Math.min(1,Math.max(0,(innerHeight*.85-r.top)\/(innerHeight*.5)));\n   p.style.setProperty('--p',v.toFixed(3));var cols=p.querySelectorAll(':scope>.elementor-container>.elementor-column');\n   cols.forEach(function(c,k){c.classList.toggle('mg-on',v>=(cols.length>1?k\/(cols.length-1):0)-0.001);});});}\n if(prog.length){tick();window.addEventListener('scroll',tick,{passive:true});window.addEventListener('resize',tick);}\n document.querySelectorAll('.mg-gridbg').forEach(function(s){s.addEventListener('pointermove',function(e){var r=s.getBoundingClientRect();s.style.setProperty('--mx',(e.clientX-r.left)+'px');s.style.setProperty('--my',(e.clientY-r.top)+'px');});});\n  if(!fine||window.matchMedia('(prefers-reduced-motion:reduce)').matches)return;\n  document.querySelectorAll('.mg-btn .elementor-button').forEach(function(b){\n   b.addEventListener('pointermove',function(e){var r=b.getBoundingClientRect();b.style.transform='translate('+((e.clientX-r.left-r.width\/2)*.18)+'px,'+((e.clientY-r.top-r.height\/2)*.3)+'px)';});\n   b.addEventListener('pointerleave',function(){b.style.transform='';});\n  });\n }\n if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5650241f mg-homefx elementor-widget elementor-widget-html\" data-id=\"5650241f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== MY GRAFIK \u2013 effets propres \u00e0 la page d'accueil (ne pas supprimer ce widget) ===== *\/\n.mg-homefx{margin:0!important;height:0;overflow:hidden}\n\/* M\u00e9thode : les cartes s'allument \u00e0 tour de r\u00f4le, en phase avec la ligne de progression *\/\n.mg-mc>.elementor-widget-wrap{transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:mg-mc 9s infinite;animation-delay:var(--mcd,0s)}\n.mg-mc2{--mcd:3s}.mg-mc3{--mcd:6s}\n@keyframes mg-mc{0%,2%{transform:none;box-shadow:0 0 0 rgba(0,0,0,0);background-color:#EDEFF3}6%,30%{transform:translateY(-10px);background-color:#FFFFFF;box-shadow:none}36%,100%{transform:none;background-color:#EDEFF3;box-shadow:0 0 0 rgba(0,0,0,0)}}\n.mg-mc:hover>.elementor-widget-wrap{animation-play-state:paused}\n.pv-static .mg-mc>.elementor-widget-wrap{animation:none}\n\/* P\u00f4les de services : cartes empil\u00e9es *\/\n.mg-pole .mg-outline .elementor-heading-title{-webkit-text-stroke:1.5px rgba(232,89,12,.55);color:transparent!important}\n.mg-pole .mg-img{animation:none;border-radius:26px}\n.mg-chips{display:flex;flex-wrap:wrap;gap:8px}\n.mg-chips a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:#FFF1E6;color:#C2410C;font:700 13.5px Inter,sans-serif;text-decoration:none;border:1px solid #FBE3D0;transition:.35s cubic-bezier(.2,.8,.2,1)}\n.mg-chips a:after{content:\"\u2192\";transition:transform .35s}\n.mg-chips a:hover{background:linear-gradient(135deg,#F7862B,#E8590C);color:#fff;border-color:transparent;transform:translateY(-2px)}\n.mg-chips a:hover:after{transform:translateX(3px)}\n.mg-chips.w a{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}\n\/* R\u00e9alisations *\/\n.mg-proj>.elementor-widget-wrap{position:relative;overflow:hidden;isolation:isolate;transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .5s}\n.mg-proj .elementor-widget-image{overflow:hidden;border-radius:20px}\n.mg-proj .elementor-widget-image img{display:block;width:100%;aspect-ratio:4\/3;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s}\n.mg-proj:hover .elementor-widget-image img{transform:scale(1.08) rotate(-1deg)}\n.mg-proj>.elementor-widget-wrap:before{content:\"\";position:absolute;z-index:-1;left:-50%;width:200%;aspect-ratio:1;top:calc(100% + 60px);border-radius:40%;background:linear-gradient(180deg,rgba(247,134,43,.22),rgba(232,89,12,.05));animation:mg-wave 9s linear infinite;transition:top .9s cubic-bezier(.2,.8,.2,1)}\n.mg-proj:hover>.elementor-widget-wrap{transform:translateY(-10px);border-color:rgba(247,134,43,.55)!important}\n.mg-proj:hover>.elementor-widget-wrap:before{top:45%}\n\/* Chiffres cl\u00e9s *\/\n.mg-imp>.elementor-widget-wrap{position:relative;overflow:hidden;isolation:isolate;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s}\n.mg-imp>.elementor-widget-wrap:before{content:\"\";position:absolute;z-index:-1;width:260px;height:260px;left:-80px;top:-120px;border-radius:42% 58% 63% 37%\/41% 44% 56% 59%;background:radial-gradient(circle,rgba(247,134,43,.45),transparent 70%);animation:mg-morph 12s ease-in-out infinite}\n.mg-imp:nth-child(2)>.elementor-widget-wrap:before{animation-delay:-3s;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 70%)}\n.mg-imp:nth-child(3)>.elementor-widget-wrap:before{animation-delay:-6s}\n.mg-imp:nth-child(4)>.elementor-widget-wrap:before{animation-delay:-9s;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 70%)}\n.mg-imp:hover>.elementor-widget-wrap{transform:translateY(-8px);border-color:rgba(247,134,43,.6)!important}\n.mg-imp .elementor-counter-number-wrapper,.mg-imp .mg-bign .elementor-heading-title{background:linear-gradient(135deg,#FFFFFF,#FFD0AA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}\n.mg-arrow{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;color:#141B2D;font-size:22px;transition:transform .5s cubic-bezier(.2,.8,.2,1),background .4s,color .4s}\n.mg-imp:hover .mg-arrow{transform:rotate(45deg);background:#E8590C;color:#fff}\n.mg-stars{color:#F7862B;letter-spacing:3px;font-size:16px}\n.mg-stars span{display:inline-block;animation:mg-star 3s ease-in-out infinite}\n.mg-stars span:nth-child(2){animation-delay:.12s}.mg-stars span:nth-child(3){animation-delay:.24s}.mg-stars span:nth-child(4){animation-delay:.36s}.mg-stars span:nth-child(5){animation-delay:.48s}\n@keyframes mg-star{0%,70%,100%{transform:none}80%{transform:scale(1.35) rotate(14deg)}}\n\/* CTA final : bordure d\u00e9grad\u00e9e anim\u00e9e *\/\n.mg-cbord{position:relative;isolation:isolate}\n.mg-cbord:before{content:\"\";position:absolute;inset:0;border-radius:40px;padding:2px;background:conic-gradient(from var(--mgcb,0deg),#1A8FC4,#F7862B,#E8590C,#16A34A,#1A8FC4);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mg-cb 6s linear infinite;pointer-events:none;z-index:3}\n@property --mgcb{syntax:\"<angle>\";inherits:false;initial-value:0deg}\n@keyframes mg-cb{to{--mgcb:360deg}}\n.mg-cbord>.elementor-container{position:relative;z-index:2}\n.mg-cbord:after{content:\"\";position:absolute;z-index:0;width:520px;height:520px;left:38%;top:-30%;border-radius:42% 58% 63% 37%\/41% 44% 56% 59%;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,0));animation:mg-morph 16s ease-in-out infinite;pointer-events:none}\n.mg-ctaimg img{display:block;width:100%;max-width:330px;margin:0 auto;border-radius:50% 50% 34px 34px;animation:mg-float 6s ease-in-out infinite}\n@keyframes mg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}\n\/* Blog *\/\n.mg-posts .elementor-post{background:#16306B;border-radius:24px;overflow:hidden;padding:18px;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s}\n.mg-posts .elementor-post:hover{transform:translateY(-10px);box-shadow:0 30px 60px rgba(22,48,107,.35)}\n.mg-posts .elementor-post__thumbnail{border-radius:18px;overflow:hidden}\n.mg-posts .elementor-post__thumbnail img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}\n.mg-posts .elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.07)}\n.pv-static .mg-imp *,.pv-static .mg-cbord:before,.pv-static .mg-ctaimg img,.pv-static .mg-stars span{animation:none!important}\n@media(max-width:767px){.mg-cbord:before{border-radius:28px}.mg-pole,.mg-cbord{padding:28px 20px!important}.mg-pole>.elementor-container>.elementor-column>.elementor-widget-wrap,.mg-cbord>.elementor-container>.elementor-column>.elementor-widget-wrap{padding:0 0 20px!important}.mg-ctaimg img{max-width:260px}}\n@media(prefers-reduced-motion:reduce){.mg-mc>.elementor-widget-wrap,.mg-cbord:before,.mg-ctaimg img,.mg-stars span{animation:none!important}}\n\n\/* ===== V2 : barre de progression, curseur liquide, intro ===== *\/\n.mg-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:99999;transform-origin:left;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,#F7862B,#E8590C,#FFB067);pointer-events:none}\n.mg-cur,.mg-cur2{position:fixed;left:0;top:0;z-index:99998;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}\n.mg-cur{width:8px;height:8px;margin:-4px 0 0 -4px;background:#F7862B}\n.mg-cur2{width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid rgba(247,134,43,.8);transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .35s,border-color .35s,opacity .3s;display:grid;place-items:center;font:800 11px Inter,sans-serif;letter-spacing:.08em;color:#fff;text-transform:uppercase}\n.mg-cur-on .mg-cur,.mg-cur-on .mg-cur2{opacity:1}\n.mg-cur-link .mg-cur2{width:72px;height:72px;margin:-36px 0 0 -36px;background:rgba(247,134,43,.18);border-color:transparent;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}\n.mg-cur-view .mg-cur2{width:96px;height:96px;margin:-48px 0 0 -48px;background:#E8590C;border-color:transparent}\n.mg-cur-view .mg-cur{opacity:0}\n@media(hover:none),(pointer:coarse){.mg-cur,.mg-cur2{display:none}}\n.mg-intro{position:fixed;inset:0;z-index:100000;background:#0B1222;display:grid;place-items:center;transition:clip-path 1s cubic-bezier(.77,0,.18,1);clip-path:inset(0 0 0 0)}\n.mg-intro.out{clip-path:inset(0 0 100% 0)}\n.mg-intro b{display:flex;gap:.04em;font:900 clamp(40px,9vw,120px)\/1 Inter,sans-serif;letter-spacing:-.04em;color:#fff;overflow:hidden}\n.mg-intro b span{display:inline-block;transform:translateY(110%);animation:mg-in-l .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*45ms)}\n.mg-intro b span.o{color:#F7862B}\n.mg-intro small{position:absolute;bottom:12%;font:600 13px Inter,sans-serif;letter-spacing:.4em;text-transform:uppercase;color:#AEB6C6;opacity:0;animation:mg-fade .8s .5s forwards}\n.mg-intro i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#F7862B,#E8590C);transform-origin:left;animation:mg-bar 1.1s cubic-bezier(.6,0,.3,1) forwards}\n@keyframes mg-in-l{to{transform:none}}@keyframes mg-fade{to{opacity:1}}@keyframes mg-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}\n.mg-intro{animation:mg-kill 0s 3s forwards}@keyframes mg-kill{to{visibility:hidden;clip-path:inset(0 0 100% 0)}}\n.pv-static .mg-intro,.elementor-editor-active .mg-intro,.pv-static .mg-prog{display:none}\n\/* Manifeste : les mots s'allument au d\u00e9filement *\/\n.mg-manif .elementor-heading-title .mw{opacity:.16;transition:opacity .35s,color .35s}\n.mg-manif .elementor-heading-title .mw.on{opacity:1}\n.mg-manif .elementor-heading-title strong{color:#FFB067}\n.pv-static .mg-manif .mw{opacity:1}\n.mg-cross{background:linear-gradient(180deg,#0B1222 50%,#FFFFFF 50%)!important;position:relative;z-index:3}\n.pv-form>div,.pv-form input,.pv-form select,.pv-form textarea{min-width:0}\n@media(max-width:767px){.pv-form{grid-template-columns:1fr!important}.pv-form>div{grid-column:1\/-1!important}.mg-formcard>.elementor-widget-wrap{padding:26px 20px!important}}\n.mg-faq ul{margin:0;padding-left:18px}.mg-faq li{margin-bottom:6px}\n\/* Colonne collante *\/\n@media(min-width:1025px){.mg-sticky>.elementor-widget-wrap{position:sticky!important;top:120px;align-self:flex-start}}\n.mg-sticky{align-self:flex-start}\n\/* Mini visuels des chiffres *\/\n.mgk-av{display:flex}.mgk-av i{width:34px;height:34px;border-radius:50%;margin-left:-10px;border:2px solid #22202B;font-style:normal;display:grid;place-items:center;font:700 12px Inter,sans-serif;color:#fff;animation:mgk-b 3s ease-in-out infinite;animation-delay:calc(var(--i)*.2s)}\n.mgk-av i:first-child{margin-left:0}\n@keyframes mgk-b{0%,100%{transform:none}50%{transform:translateY(-5px)}}\n.mgk-bars{display:flex;align-items:flex-end;gap:5px;height:46px}.mgk-bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#F7862B,rgba(232,89,12,.25));transform-origin:bottom;animation:mgk-g 2.6s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.3s)}\n@keyframes mgk-g{from{transform:scaleY(.45)}to{transform:scaleY(1)}}\n.mgk-win{position:relative;height:46px}.mgk-win i{position:absolute;width:70px;height:40px;border-radius:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);left:calc(var(--i)*22px);top:calc(var(--i)*3px);animation:mgk-w 4s ease-in-out infinite;animation-delay:calc(var(--i)*.3s)}\n.mgk-win i:before{content:\"\";position:absolute;left:6px;top:6px;width:18px;height:3px;border-radius:2px;background:#F7862B;box-shadow:0 7px 0 rgba(255,255,255,.3),0 14px 0 rgba(255,255,255,.2)}\n@keyframes mgk-w{0%,100%{transform:none}50%{transform:translateY(-6px)}}\n.pv-static .mgk-av i,.pv-static .mgk-bars i,.pv-static .mgk-win i{animation:none}\n\/* CTA : image dans une forme liquide *\/\n.mg-ctaimg{position:relative}\n.mg-ctaimg img{border-radius:0!important;animation:none!important;max-width:100%!important}\n.mg-ctablob{position:relative;max-width:360px;margin:0 auto;background:#061A2A;overflow:hidden;border-radius:42% 58% 63% 37%\/41% 44% 56% 59%;animation:mg-morph-r 12s ease-in-out infinite;box-shadow:none}\n.mg-ctablob img{display:block;width:100%;height:auto}\n.pv-static .mg-ctablob{animation:none}\n\n\/* ===== Page Web design UI\/UX ===== *\/\n.mg-kpi>.elementor-widget-wrap{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s}\n.mg-kpi>.elementor-widget-wrap:before{content:\"\";position:absolute;z-index:-1;width:240px;height:240px;left:-90px;top:-120px;border-radius:42% 58% 63% 37%\/41% 44% 56% 59%;background:radial-gradient(circle,rgba(247,134,43,.38),transparent 70%);animation:mg-morph 12s ease-in-out infinite}\n.mg-kpi:hover>.elementor-widget-wrap{transform:translateY(-6px);border-color:rgba(247,134,43,.5)}\n.mg-kpi .elementor-counter-number-wrapper,.mg-kpi .mg-kbig .elementor-heading-title{background:linear-gradient(135deg,#FFFFFF,#FFD0AA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}\n.mg-kpi.mg-kfeat>.elementor-widget-wrap{background:linear-gradient(150deg,#F7862B,#C2410C);border-color:transparent}\n.mg-kpi.mg-kfeat .elementor-counter-number-wrapper{background:none;-webkit-text-fill-color:#fff}\n.mg-kpi.mg-kfeat .elementor-counter-title{color:#FFE8D6!important}\n.mg-wsvc>.elementor-widget-wrap{position:relative;overflow:hidden;isolation:isolate;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .4s}\n.mg-wsvc>.elementor-widget-wrap:before{content:\"\";position:absolute;z-index:-1;inset:0;width:auto;height:auto;border-radius:inherit;background:linear-gradient(150deg,#141B2D,#0B1222);clip-path:circle(0% at 100% 0%);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}\n.mg-wsvc:hover>.elementor-widget-wrap{transform:translateY(-8px);box-shadow:0 30px 60px rgba(20,27,45,.18)!important;border-color:transparent!important}\n.mg-wsvc:hover>.elementor-widget-wrap:before{clip-path:circle(150% at 100% 0%)}\n.mg-wsvc h3,.mg-wsvc p,.mg-wsvc .mg-snum .elementor-heading-title,.mg-wsvc .mg-more a{transition:color .45s}\n.mg-wsvc:hover h3,.mg-wsvc:hover .elementor-icon-box-title{color:#fff!important}\n.mg-wsvc:hover p{color:#C9D1E0!important}\n.mg-wsvc:hover .mg-more a{color:#FFB067!important}\n.mg-wsvc .elementor-icon{transition:transform .6s cubic-bezier(.34,1.56,.64,1),background .4s,color .4s}\n.mg-wsvc:hover .elementor-icon{transform:rotate(-12deg) scale(1.08);background:linear-gradient(135deg,#F7862B,#E8590C)!important;color:#fff!important}\n.mg-snum{position:absolute!important;top:26px;right:28px;width:auto!important}\n.mg-snum .elementor-heading-title{font-variant-numeric:tabular-nums}\n.mg-wsvc:hover .mg-snum .elementor-heading-title{color:rgba(255,255,255,.35)!important}\n.mg-more a{text-decoration:none;font-weight:700}\n.mg-more a i{display:inline-block;transition:transform .4s}\n.mg-wsvc:hover .mg-more a i{transform:translateX(6px)}\n.mg-res>.elementor-widget-wrap{border-radius:26px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.01));transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s}\n.mg-res:hover>.elementor-widget-wrap{transform:translateX(-8px);border-color:rgba(247,134,43,.55)}\n.mg-ctaband{position:relative;overflow:hidden}\n.mg-ctaband:after{content:\"\";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px);pointer-events:none}\n.mg-ctaband>.elementor-container{position:relative;z-index:2}\n.mg-photo img{border-radius:30px;box-shadow:0 40px 80px rgba(20,27,45,.25);aspect-ratio:4\/5;object-fit:cover;width:100%}\n.mg-photo{position:relative}\n.mg-ptag{position:relative;z-index:3;margin-top:-90px!important;margin-left:-20px!important;width:auto!important}\n.mg-ptag .mgpt{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:14px 18px 14px 14px;box-shadow:0 24px 50px rgba(20,27,45,.2);font:800 15px Inter,sans-serif;color:#141B2D;animation:mgwp-f 6s ease-in-out infinite}\n.mg-ptag .mgpt i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-style:normal;font-size:18px;background:linear-gradient(135deg,#F7862B,#E8590C);color:#fff}\n.mg-ptag .mgpt small{display:block;font:500 12px Inter,sans-serif;color:#7A8394}\n.mg-why .elementor-icon-list-item{padding:14px 16px!important;border-radius:16px;background:#fff;border:1px solid #ECEFF4;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s}\n.mg-why .elementor-icon-list-item:hover{transform:translateX(8px);border-color:#F7862B}\n.pv-static .mg-kpi>.elementor-widget-wrap:before,.pv-static .mg-ptag .mgpt{animation:none}\n@media(max-width:767px){.mg-ptag{margin-left:0!important;margin-top:-60px!important}.mg-snum{top:20px;right:20px}}\n<\/style>\n<div class=\"mg-prog\" aria-hidden=\"true\"><\/div><div class=\"mg-cur\" aria-hidden=\"true\"><\/div><div class=\"mg-cur2\" aria-hidden=\"true\"><\/div>\n<div class=\"mg-intro\" aria-hidden=\"true\"><b><span style=\"--i:0\">M<\/span><span style=\"--i:1\">Y<\/span><span style=\"--i:2\">&nbsp;<\/span><span class=\"o\" style=\"--i:3\">G<\/span><span class=\"o\" style=\"--i:4\">R<\/span><span class=\"o\" style=\"--i:5\">A<\/span><span class=\"o\" style=\"--i:6\">F<\/span><span class=\"o\" style=\"--i:7\">I<\/span><span class=\"o\" style=\"--i:8\">K<\/span><\/b><small>Cr\u00e9ateur d\u2019identit\u00e9<\/small><i><\/i><\/div>\n<script>\n(function(){if(window.mgHomeFx)return;window.mgHomeFx=1;function init(){\n var D=document,H=D.documentElement,RM=window.matchMedia('(prefers-reduced-motion:reduce)').matches,ST=H.classList.contains('pv-static');\n \/* intro : une seule fois par visite *\/\n var intro=D.querySelector('.mg-intro'),seen=false;try{seen=sessionStorage.getItem('mgIntro')==='1';sessionStorage.setItem('mgIntro','1');}catch(e){}\n if(intro){if(seen||RM||ST||D.body.classList.contains('elementor-editor-active')){intro.remove();}else{D.body.appendChild(intro);setTimeout(function(){intro.classList.add('out');setTimeout(function(){intro.remove();},1100);},1300);}}\n \/* barre de progression + curseur : d\u00e9plac\u00e9s dans <body> pour rester au-dessus de tout *\/\n ['.mg-prog','.mg-cur','.mg-cur2'].forEach(function(s){var e=D.querySelector(s);if(e)D.body.appendChild(e);});\n var prog=D.querySelector('.mg-prog'),c1=D.querySelector('.mg-cur'),c2=D.querySelector('.mg-cur2');\n if(c1&&window.matchMedia('(hover:hover) and (pointer:fine)').matches&&!RM){\n  var x=innerWidth\/2,y=innerHeight\/2,x2=x,y2=y;\n  D.addEventListener('mousemove',function(e){x=e.clientX;y=e.clientY;H.classList.add('mg-cur-on');\n   var t=e.target.closest&&e.target.closest('[data-cursor],a,button,.elementor-button');\n   H.classList.toggle('mg-cur-view',!!(t&&t.hasAttribute('data-cursor')));H.classList.toggle('mg-cur-link',!!(t&&!t.hasAttribute('data-cursor')));\n   c2.textContent=t&&t.getAttribute('data-cursor')||'';});\n  D.addEventListener('mouseleave',function(){H.classList.remove('mg-cur-on');});\n  (function f(){x2+=(x-x2)*.18;y2+=(y-y2)*.18;c1.style.transform='translate('+x+'px,'+y+'px)';c2.style.transform='translate('+x2+'px,'+y2+'px)';requestAnimationFrame(f);})();\n }else{if(c1)c1.remove();if(c2)c2.remove();}\n \/* manifeste : d\u00e9coupe en mots *\/\n D.querySelectorAll('.mg-manif .elementor-heading-title').forEach(function(h){\n  (function walk(n){[].slice.call(n.childNodes).forEach(function(c){if(c.nodeType===3){var fr=D.createDocumentFragment();c.textContent.split(\/(\\s+)\/).forEach(function(w){if(!w)return;if(\/^\\s+$\/.test(w)){fr.appendChild(D.createTextNode(w));return;}var s=D.createElement('span');s.className='mw';s.textContent=w;fr.appendChild(s);});n.replaceChild(fr,c);}else if(c.nodeType===1)walk(c);});})(h);\n });\n var man=[].slice.call(D.querySelectorAll('.mg-manif')),pins=[].slice.call(D.querySelectorAll('[data-mgp]'));\n function tick(){var vh=innerHeight,sh=H.scrollHeight-vh;if(prog)prog.style.setProperty('--sp',sh>0?scrollY\/sh:0);\n  man.forEach(function(m){var r=m.getBoundingClientRect(),p=Math.min(1,Math.max(0,(vh*.85-r.top)\/(r.height+vh*.35))),ws=m.querySelectorAll('.mw'),n=ws.length;\n   for(var i=0;i<n;i++)ws[i].classList.toggle('on',ST||RM||i<p*n*1.05);});\n  pins.forEach(function(el){var r=el.getBoundingClientRect(),p=Math.min(1,Math.max(0,(vh*.75-r.top)\/(r.height)));el.style.setProperty('--p',p.toFixed(4));if(el.mgTick)el.mgTick(p,r);});\n }\n addEventListener('scroll',tick,{passive:true});addEventListener('resize',tick);addEventListener('load',tick);tick();window.mgTick=tick;\n}if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e117536 elementor-widget elementor-widget-html\" data-id=\"3e117536\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Hero Web design : texte ===== *\/\n.mgwdh{font-family:Inter,sans-serif;color:#FFFFFF}\n.mgwdh *{box-sizing:border-box}\n.mg-cur,.mg-cur2{display:none!important}\n.elementor-section.mg-gridbg{position:relative;overflow:hidden;overflow:clip;background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0\/64px 64px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0\/64px 64px,#0B1222!important}\n.elementor-section.mg-gridbg:before,.elementor-section.mg-gridbg:after{display:none!important}\n.mgwdh .bd{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 26px;padding:9px 16px;border-radius:999px;border:1px solid #2C3854;background:#141B2D;font:600 13.5px\/1.3 Inter,sans-serif;color:#C9D1E0}\n.mgwdh .bd b{color:#FFFFFF}.mgwdh .bd i{color:#F7862B}.mgwdh .bd span{width:1px;height:14px;background:#2C3854}\n.mgwdh h1{margin:0;font:800 112px\/.9 Inter,sans-serif;letter-spacing:-5.6px;color:#FFFFFF!important}\n.mgwdh h1 em{display:block;font-style:normal;color:#F7862B}\n.mgwdh .sb{margin:24px 0 16px;max-width:560px;font:700 22px\/1.35 Inter,sans-serif;letter-spacing:-.4px;color:#FFFFFF}\n.mgwdh .ld{margin:0 0 26px;max-width:560px;font:400 16.5px\/1.7 Inter,sans-serif;color:#C9D1E0}\n.mgwdh .ld strong{color:#FFFFFF}\n.mgwdh .pc{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none}\n.mgwdh .pc li{display:flex;align-items:center;gap:8px;margin:0;font:700 14px\/1 Inter,sans-serif;color:#C9D1E0}\n.mgwdh .pc li i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #3A4663;color:#F7862B;font-size:13px}\n.mgwdh .pc li.ar{color:#3A4663}\n.mgwdh .pc li:last-child i{background:#E8590C;border-color:#E8590C;color:#FFFFFF}\n.mgwdh .ct{display:flex;flex-wrap:wrap;gap:12px}\n.mgwdh .ct a{display:inline-flex;align-items:center;gap:10px;padding:17px 28px;border-radius:14px;font:800 16px\/1 Inter,sans-serif;text-decoration:none;transition:transform .3s,background .3s,border-color .3s}\n.mgwdh .ct a.p{background:#E8590C;color:#FFFFFF!important}.mgwdh .ct a.p:hover{background:#C2410C;transform:translateY(-2px)}\n.mgwdh .ct a.s{background:#141B2D;border:1.5px solid #26314A;color:#FFFFFF!important}.mgwdh .ct a.s:hover{border-color:#F7862B;transform:translateY(-2px)}\n@media(max-width:1024px){.mgwdh h1{font-size:90px;letter-spacing:-4.4px}}\n@media(max-width:767px){.mgwdh h1{font-size:60px;letter-spacing:-2.6px}.mgwdh .sb{font-size:18.5px}.mgwdh .pc li.ar{display:none}.mgwdh .pc{gap:10px 14px}.mgwdh .ct a{flex:1 1 100%;justify-content:center}}\n.mgwdh .in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;max-width:580px;margin:0 0 26px;padding:18px 0 0;list-style:none;border-top:1px solid #26314A}\n.mgwdh .in li{display:flex;gap:10px;align-items:flex-start;margin:0;font:500 14px\/1.45 Inter,sans-serif;color:#C9D1E0}\n.mgwdh .in li i{flex:none;margin-top:2px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#E8590C;color:#FFFFFF;font-size:8px}\n.mgwdh .in li b{color:#FFFFFF}\n.mgwdh .nt{display:flex;align-items:center;gap:8px;margin:16px 0 0;font:600 13.5px\/1.4 Inter,sans-serif;color:#9AA3B5}\n.mgwdh .nt i{color:#5FD39A}\n@media(max-width:767px){.mgwdh .in{grid-template-columns:minmax(0,1fr)}}\n<\/style>\n<div class=\"mgwdh\">\n <p class=\"bd\"><i class=\"fas fa-star\" aria-hidden=\"true\"><\/i><b>4,95 \/ 5<\/b> avis clients<span aria-hidden=\"true\"><\/span>Web design UI\/UX \u00e0 Abidjan<\/p>\n <h1>Web <em>design.<\/em><\/h1>\n <p class=\"sb\">Des interfaces captivantes, des exp\u00e9riences inoubliables.<\/p>\n <p class=\"ld\"> <strong>Webdesign \u00e0 Abidjan<\/strong> : My Grafik con\u00e7oit des <strong>interfaces adapt\u00e9es<\/strong> \u00e0 votre marque et aux besoins de vos utilisateurs. Nous r\u00e9alisons vos <strong>maquettes UI\/UX<\/strong>, organisons vos contenus et d\u00e9finissons des parcours clairs sur ordinateur et mobile. Chaque projet associe <strong>identit\u00e9 visuelle, navigation et facilit\u00e9 d\u2019utilisation<\/strong>.<\/p>\n <ul class=\"in\" aria-label=\"Ce que comprend notre web design\">\n  <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i><span><b>Recherche UX<\/b> et parcours utilisateur<\/span><\/li>\n  <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i><span><b>Maquettes UI<\/b> \u00e0 votre image<\/span><\/li>\n  <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i><span><b>Prototype cliquable<\/b> \u00e0 valider<\/span><\/li>\n  <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i><span><b>100 % responsive<\/b>, ordinateur \u00e0 mobile<\/span><\/li>\n  <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i><span><b>Design system<\/b> coh\u00e9rent<\/span><\/li>\n  <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i><span><b>Fichiers pr\u00eats<\/b> pour l\u2019int\u00e9gration<\/span><\/li>\n <\/ul>\n <div class=\"ct\"><a class=\"p\" href=\"#contact\">Parlons de mon projet <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a><a class=\"s\" href=\"#realisations\">Voir nos r\u00e9alisations UI\/UX <i class=\"fas fa-arrow-down\" aria-hidden=\"true\"><\/i><\/a><\/div>\n <p class=\"nt\"><i class=\"fas fa-check-circle\" aria-hidden=\"true\"><\/i>Premier \u00e9change offert \u00b7 R\u00e9ponse sous un jour ouvr\u00e9<\/p>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6e73fd0e\" data-id=\"6e73fd0e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-32f8dd4 elementor-widget elementor-widget-html\" data-id=\"32f8dd4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Hero Web design : le design system qui s\u2019assemble ===== *\/\n.mgwdv{position:relative;font-family:Inter,sans-serif;color:#141B2D;max-width:600px;margin-left:auto}\n.mgwdv *{box-sizing:border-box}\n.mgwdv .bd{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;padding:18px;border-radius:24px;background:#F6F7FA;background-image:radial-gradient(#DCE3EE 1px,transparent 1.2px);background-size:18px 18px}\n.mgwdv .tl{display:flex;flex-direction:column;gap:12px}\n.mgwdv .pn{padding:14px;border-radius:14px;background:#FFFFFF;border:1px solid #E6E9EF}\n.mgwdv .pn>small{display:block;margin:0 0 10px;font:800 10px\/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#9AA3B5}\n.mgwdv .sw{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}\n.mgwdv .sw i{display:block;aspect-ratio:1;border-radius:9px;background:var(--c)}\n.mgwdv .sw em{display:block;margin-top:4px;font:700 8.5px\/1 ui-monospace,Menlo,monospace;font-style:normal;color:#7D8597;text-align:center}\n.mgwdv .ty{display:flex;align-items:flex-end;gap:12px}\n.mgwdv .ty b{font:900 46px\/.9 Inter,sans-serif;letter-spacing:-2px}\n.mgwdv .ty span{font:600 11px\/1.5 Inter,sans-serif;color:#5B6475}\n.mgwdv .ty span strong{color:#141B2D}\n.mgwdv .cp{display:flex;flex-wrap:wrap;gap:6px}\n.mgwdv .cp u{padding:8px 12px;border-radius:999px;font:800 10.5px\/1 Inter,sans-serif;text-decoration:none}\n.mgwdv .cp u:nth-child(1){background:#E8590C;color:#FFFFFF}\n.mgwdv .cp u:nth-child(2){border:1.5px solid #1F3A68;color:#1F3A68}\n.mgwdv .cp u:nth-child(3){background:#EEF3FB;color:#1F3A68}\n.mgwdv .ar{position:relative;display:flex;flex-direction:column;border-radius:16px;background:#FFFFFF;border:1px solid #E6E9EF;overflow:hidden}\n.mgwdv .ar .lb{position:absolute;left:10px;top:-1px;padding:4px 7px;border-radius:0 0 6px 6px;background:#1F3A68;color:#FFFFFF;font:800 9px\/1 ui-monospace,Menlo,monospace}\n.mgwdv .ar .nv{display:flex;align-items:center;gap:10px;padding:24px 14px 10px;font:900 12px\/1 Inter,sans-serif}\n.mgwdv .ar .nv em{font-style:normal;color:#E8590C}\n.mgwdv .ar .nv i{margin-left:auto;width:28px;height:5px;border-radius:3px;background:#E6E9EF}\n.mgwdv .ar .nv i+i{margin-left:0}\n.mgwdv .ar .hr{margin:0 10px;padding:16px 14px;border-radius:12px;background:#1F3A68;color:#FFFFFF}\n.mgwdv .ar .hr b{display:block;font:900 19px\/1.05 Inter,sans-serif;letter-spacing:-.6px}\n.mgwdv .ar .hr b i{font-style:normal;color:#F7B267}\n.mgwdv .ar .hr small{display:block;margin:8px 0 12px;font:500 10.5px\/1.4 Inter,sans-serif;color:#C7D5EC}\n.mgwdv .ar .hr u{display:inline-block;padding:7px 11px;border-radius:999px;background:#E8590C;color:#FFFFFF;font:800 10px\/1 Inter,sans-serif;text-decoration:none}\n.mgwdv .ar .cd{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}\n.mgwdv .ar .cd span{display:block;padding:10px;border-radius:10px;border:1px solid #EEF0F4}\n.mgwdv .ar .cd span i{display:block;width:22px;height:22px;margin-bottom:8px;border-radius:7px;background:#FFF4E8}\n.mgwdv .ar .cd span u{display:block;height:5px;margin-top:5px;border-radius:3px;background:#E6E9EF}\n.mgwdv .ar .cd span u+u{width:60%}\n.mgwdv .cu{position:absolute;display:flex;align-items:flex-start;gap:4px;z-index:2;animation:mgwdv-m 7s ease-in-out infinite}\n.mgwdv .cu i{font-size:16px;filter:drop-shadow(0 1px 0 #FFFFFF)}\n.mgwdv .cu span{margin-top:12px;padding:4px 8px;border-radius:6px;font:800 10px\/1 Inter,sans-serif;color:#FFFFFF}\n.mgwdv .c1{left:18%;top:30%;color:#E8590C}.mgwdv .c1 span{background:#E8590C}\n.mgwdv .c2{right:6%;top:62%;color:#1F3A68;animation-delay:-3.5s}.mgwdv .c2 span{background:#1F3A68}\n@keyframes mgwdv-m{0%,100%{transform:translate(0,0)}35%{transform:translate(60px,-30px)}70%{transform:translate(-20px,24px)}}\n.mgwdv .ok{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:12px 16px;border-radius:14px;background:#141B2D;border:1px solid #26314A;color:#C9D1E0;font:600 12px\/1.3 Inter,sans-serif}\n.mgwdv .ok i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#2D9D5F;color:#FFFFFF;font-size:12px}\n.mgwdv .ok b{display:block;font:800 13px\/1.2 Inter,sans-serif;color:#FFFFFF}\n.mgwdv .ok em{margin-left:auto;display:flex;gap:4px;font-style:normal}\n.mgwdv .ok em span{padding:5px 8px;border-radius:6px;background:#26314A;font:800 10px\/1 Inter,sans-serif;color:#FFFFFF}\n.pv-static .mgwdv .cu{animation:none}\n@media(max-width:1024px){.mgwdv{margin:20px auto 0}}\n@media(max-width:560px){.mgwdv .bd{grid-template-columns:minmax(0,1fr);padding:12px}.mgwdv .tl{display:grid;grid-template-columns:minmax(0,1fr)}.mgwdv .tl .pn:nth-child(2){display:none}.mgwdv .c1{top:22%}.mgwdv .ty b{font-size:36px}.mgwdv .c2{top:80%}.mgwdv .ok em{display:none}}\n@media(prefers-reduced-motion:reduce){.mgwdv .cu{animation:none}}\n<\/style>\n<div class=\"mgwdv\" aria-hidden=\"true\">\n <div class=\"bd\">\n  <div class=\"tl\">\n   <div class=\"pn\"><small>Couleurs<\/small><div class=\"sw\"><span><i style=\"--c:#E8590C\"><\/i><em>Orange<\/em><\/span><span><i style=\"--c:#1F3A68\"><\/i><em>Bleu<\/em><\/span><span><i style=\"--c:#F7B267\"><\/i><em>Sable<\/em><\/span><span><i style=\"--c:#EEF3FB;border:1px solid #DCE6F5\"><\/i><em>Clair<\/em><\/span><\/div><\/div>\n   <div class=\"pn\"><small>Typographie<\/small><div class=\"ty\"><b>Aa<\/b><span><strong>Inter<\/strong><br>Titres 800 \u00b7 Texte 400<\/span><\/div><\/div>\n   <div class=\"pn\"><small>Composants<\/small><div class=\"cp\"><u>Bouton<\/u><u>Secondaire<\/u><u>\u00c9tiquette<\/u><\/div><\/div>\n  <\/div>\n  <div class=\"ar\"><span class=\"lb\">Accueil \u00b7 1440<\/span><div class=\"nv\"><span>Votre marque<em>.<\/em><\/span><i><\/i><i><\/i><i><\/i><\/div><div class=\"hr\"><b>Une interface <i>qui vous ressemble.<\/i><\/b><small>Pens\u00e9e pour vos utilisateurs, sur tous les \u00e9crans.<\/small><u>Demander un devis<\/u><\/div><div class=\"cd\"><span><i><\/i><u><\/u><u><\/u><\/span><span><i><\/i><u><\/u><u><\/u><\/span><\/div><\/div>\n <\/div>\n <span class=\"cu c1\"><i class=\"fas fa-mouse-pointer\"><\/i><span>Designer UX<\/span><\/span>\n <span class=\"cu c2\"><i class=\"fas fa-mouse-pointer\"><\/i><span>Designer UI<\/span><\/span>\n <div class=\"ok\"><i class=\"fas fa-check\"><\/i><span><b>Maquette valid\u00e9e<\/b>Pr\u00eate pour l\u2019int\u00e9gration<\/span><em><span>UX<\/span><span>UI<\/span><span>Mobile<\/span><\/em><\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-109c0300 mg-cross elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"109c0300\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-46e772b6\" data-id=\"46e772b6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-afd87e9 elementor-widget elementor-widget-html\" data-id=\"afd87e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.mgx2{position:relative;height:190px;overflow:hidden;font-family:Inter,sans-serif}\n.mgx2-b{position:absolute;left:-5%;width:110%;top:50%;padding:20px 0;overflow:hidden;white-space:nowrap}\n.mgx2-b.a{background:linear-gradient(90deg,#F7862B,#E8590C);transform:translateY(-50%) rotate(-3.2deg);z-index:2;box-shadow:0 20px 40px rgba(232,89,12,.3)}\n.mgx2-b.b{background:#141B2D;transform:translateY(-50%) rotate(2.6deg);z-index:1}\n.mgx2-t{display:inline-flex;gap:0;animation:mgx2 32s linear infinite}\n.mgx2-b.b .mgx2-t{animation-direction:reverse;animation-duration:40s}\n.mgx2-t span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font:800 30px Inter,sans-serif;letter-spacing:-.6px;color:#fff;text-transform:uppercase}\n.mgx2-t span em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.85)}\n.mgx2-b.b .mgx2-t span em{-webkit-text-stroke-color:#F7862B}\n.mgx2-t span i{font-style:normal;font-size:22px;color:#FFD0AA}\n.mgx2-b.b .mgx2-t span i{color:#F7862B}\n.mgx2:hover .mgx2-t{animation-play-state:paused}\n@keyframes mgx2{to{transform:translateX(-50%)}}\n.pv-static .mgx2-t{animation:none}\n@media(max-width:767px){.mgx2{height:140px}.mgx2-b{padding:14px 0}.mgx2-t span{font-size:20px;gap:16px;padding-right:16px}}\n@media(prefers-reduced-motion:reduce){.mgx2-t{animation:none}}\n<\/style>\n<div class=\"mgx2\" aria-label=\"Web design, Interface UI, Exp\u00e9rience UX, Maquettes, Prototype, Responsive, Figma, Design system, Intuitif, Moderne, M\u00e9morable, Accessible, Coh\u00e9rent, Orient\u00e9 conversion, Abidjan, Mobile first\">\n <div class=\"mgx2-b a\"><div class=\"mgx2-t\" aria-hidden=\"true\">\n  <span>Web design<i>\u2726<\/i><\/span><span><em>Interface UI<\/em><i>\u2726<\/i><\/span><span>Exp\u00e9rience UX<i>\u2726<\/i><\/span><span><em>Maquettes<\/em><i>\u2726<\/i><\/span><span>Prototype<i>\u2726<\/i><\/span><span><em>Moderne<\/em><i>\u2726<\/i><\/span><span>Figma<i>\u2726<\/i><\/span><span><em>Design system<\/em><i>\u2726<\/i><\/span>\n  <span>Web design<i>\u2726<\/i><\/span><span><em>Interface UI<\/em><i>\u2726<\/i><\/span><span>Exp\u00e9rience UX<i>\u2726<\/i><\/span><span><em>Maquettes<\/em><i>\u2726<\/i><\/span><span>Prototype<i>\u2726<\/i><\/span><span><em>Moderne<\/em><i>\u2726<\/i><\/span><span>Figma<i>\u2726<\/i><\/span><span><em>Design system<\/em><i>\u2726<\/i><\/span>\n <\/div><\/div>\n <div class=\"mgx2-b b\"><div class=\"mgx2-t\" aria-hidden=\"true\">\n  <span>Intuitif<i>\u25cf<\/i><\/span><span><em>Moderne<\/em><i>\u25cf<\/i><\/span><span>M\u00e9morable<i>\u25cf<\/i><\/span><span><em>Accessible<\/em><i>\u25cf<\/i><\/span><span>Coh\u00e9rent<i>\u25cf<\/i><\/span><span><em>Orient\u00e9 conversion<\/em><i>\u25cf<\/i><\/span><span>Abidjan<i>\u25cf<\/i><\/span><span><em>Mobile first<\/em><i>\u25cf<\/i><\/span>\n  <span>Intuitif<i>\u25cf<\/i><\/span><span><em>Moderne<\/em><i>\u25cf<\/i><\/span><span>M\u00e9morable<i>\u25cf<\/i><\/span><span><em>Accessible<\/em><i>\u25cf<\/i><\/span><span>Coh\u00e9rent<i>\u25cf<\/i><\/span><span><em>Orient\u00e9 conversion<\/em><i>\u25cf<\/i><\/span><span>Abidjan<i>\u25cf<\/i><\/span><span><em>Mobile first<\/em><i>\u25cf<\/i><\/span>\n <\/div><\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-68e29a60 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"68e29a60\" data-element_type=\"section\" data-e-type=\"section\" id=\"approche\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-67fbbfd2\" data-id=\"67fbbfd2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bdbb9e4 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"bdbb9e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Notre approche du web design : les 6 supports ===== *\/\n.mgwda{font-family:Inter,sans-serif;color:#141B2D}\n.mgwda *{box-sizing:border-box}\n.mgwda .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;margin:0 0 44px}\n.mgwda .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwda .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwda h2{margin:0;font:800 52px\/1.06 Inter,sans-serif;letter-spacing:-1.7px;color:#141B2D!important}\n.mgwda h2 em{font-style:normal;color:#E8590C}\n.mgwda .pr{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}\n.mgwda .pr li{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:999px;background:#EEF3FB;font:700 13.5px\/1 Inter,sans-serif;color:#1F3A68}\n.mgwda .pr li i{color:#E8590C;font-size:12px}\n.mgwda .tx p{margin:0 0 14px;font:400 16.5px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwda .tx p:last-child{margin:0}\n.mgwda .tx strong{color:#141B2D}\n.mgwda .lbl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;font:800 17px\/1.3 Inter,sans-serif}\n.mgwda .lbl span{font:600 13px\/1 Inter,sans-serif;color:#9AA3B5}\n.mgwda .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}\n.mgwda .g>li{margin:0;padding:14px;border-radius:20px;background:#FFFFFF;border:1px solid #E6E9EF;transition:border-color .3s,transform .3s}\n.mgwda .g>li:hover{border-color:#1F3A68;transform:translateY(-3px)}\n.mgwda .vz{position:relative;height:150px;border-radius:14px;background:#F6F7FA;overflow:hidden;display:grid;place-items:center}\n.mgwda .tt{display:flex;align-items:baseline;gap:10px;padding:16px 6px 4px}\n.mgwda .tt small{font:800 11px\/1 ui-monospace,Menlo,monospace;color:#E8590C}\n.mgwda h3{margin:0;font:800 17px\/1.25 Inter,sans-serif;color:#141B2D!important}\n.mgwda .g>li>p{margin:0;padding:0 6px 6px;font:400 14px\/1.5 Inter,sans-serif;color:#5B6475}\n\/* mini maquettes *\/\n.mgwda .pg{width:78%;height:120px;border-radius:9px;background:#FFFFFF;border:1px solid #E6E9EF;padding:10px}\n.mgwda .pg i,.mgwda .ap i,.mgwda .nl i{display:block;height:5px;border-radius:3px;background:#E6E9EF;margin-top:5px}\n.mgwda .pg .h{height:44px;margin:8px 0;border-radius:6px;background:#1F3A68}\n.mgwda .pg .r{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.mgwda .pg .r b{height:22px;border-radius:5px;background:#FFF4E8}\n.mgwda .ap{width:66px;height:128px;border-radius:14px;background:#FFFFFF;border:3px solid #141B2D;padding:8px 6px}\n.mgwda .ap .h{height:34px;border-radius:7px;background:#E8590C;margin-bottom:6px}\n.mgwda .ap .bt{height:14px;margin-top:10px;border-radius:999px;background:#1F3A68}\n.mgwda .ad{width:76%;padding:10px;border-radius:10px;background:#FFFFFF;border:1px solid #E6E9EF;font:700 9px\/1.2 Inter,sans-serif;color:#9AA3B5}\n.mgwda .ad .im{height:62px;margin:6px 0;border-radius:6px;background:radial-gradient(circle at 70% 50%,#F7B267 0 18%,transparent 19%),#1F3A68}\n.mgwda .ad u{display:inline-block;padding:5px 8px;border-radius:5px;background:#E8590C;color:#FFFFFF;text-decoration:none}\n.mgwda .nl{width:70%;border-radius:9px;background:#FFFFFF;border:1px solid #E6E9EF;overflow:hidden}\n.mgwda .nl .h{height:26px;background:#EEF3FB;display:grid;place-items:center;font:900 10px\/1 Inter,sans-serif;color:#1F3A68}\n.mgwda .nl .b{padding:8px 10px}.mgwda .nl .b b{display:block;height:34px;border-radius:5px;background:#FFF4E8;margin-bottom:4px}\n.mgwda .so{display:grid;grid-template-columns:repeat(3,44px);gap:6px}\n.mgwda .so b{height:44px;border-radius:8px;background:#E8590C}\n.mgwda .so b:nth-child(2),.mgwda .so b:nth-child(4){background:#1F3A68}.mgwda .so b:nth-child(3),.mgwda .so b:nth-child(6){background:#F7B267}.mgwda .so b:nth-child(5){background:#141B2D}\n.mgwda .bn{width:84%;height:52px;border-radius:8px;background:#1F3A68;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:900 11px\/1 Inter,sans-serif;color:#FFFFFF}\n.mgwda .bn em{font-style:normal;color:#F7B267}.mgwda .bn u{padding:6px 8px;border-radius:5px;background:#E8590C;text-decoration:none;font-size:9px}\n@media(max-width:1100px){.mgwda .top{grid-template-columns:minmax(0,1fr);gap:20px}.mgwda .g{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media(max-width:640px){.mgwda h2{font-size:36px;letter-spacing:-1.2px}.mgwda .g{grid-template-columns:minmax(0,1fr)}.mgwda .lbl{flex-direction:column;align-items:flex-start}}\n@media(prefers-reduced-motion:reduce){.mgwda .g>li{transition:none}.mgwda .g>li:hover{transform:none}}\n<\/style>\n<div class=\"mgwda\">\n <div class=\"top\">\n  <div>\n   <p class=\"eb\">Notre approche<\/p>\n   <h2>Notre approche du <em>web design<\/em><\/h2>\n   <ul class=\"pr\" aria-label=\"Nos priorit\u00e9s\">\n    <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Moderne<\/li>\n    <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Intuitive<\/li>\n    <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Performante<\/li>\n    <li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Fid\u00e8le \u00e0 votre charte<\/li>\n   <\/ul>\n  <\/div>\n  <div class=\"tx\">\n   <p>Chez My Grafik, notre approche du web design UI\/UX repose sur une conviction simple : concevoir des <strong>interfaces modernes, intuitives et performantes<\/strong>, parfaitement align\u00e9es avec votre identit\u00e9 de marque et votre charte graphique.<\/p>\n   <p>Site internet, application mobile ou autre interface digitale : nous associons cr\u00e9ativit\u00e9, ergonomie et expertise technique pour <strong>cr\u00e9er des exp\u00e9riences fluides, engageantes et efficaces<\/strong>, qui valorisent votre marque et favorisent les conversions.<\/p>\n  <\/div>\n <\/div>\n <p class=\"lbl\">Ce que nous concevons pour vous<span>6 supports, une seule identit\u00e9<\/span><\/p>\n <ul class=\"g\">\n  <li><div class=\"vz\" aria-hidden=\"true\"><div class=\"pg\"><i style=\"width:40%\"><\/i><div class=\"h\"><\/div><div class=\"r\"><b><\/b><b><\/b><b><\/b><\/div><\/div><\/div><div class=\"tt\"><small>01<\/small><h3>Page internet<\/h3><\/div><p>Accueil, page de service ou site complet, pens\u00e9s pour guider vers l\u2019action.<\/p><\/li>\n  <li><div class=\"vz\" aria-hidden=\"true\"><div class=\"ap\"><div class=\"h\"><\/div><i><\/i><i style=\"width:70%\"><\/i><i><\/i><div class=\"bt\"><\/div><\/div><\/div><div class=\"tt\"><small>02<\/small><h3>Application<\/h3><\/div><p>Des \u00e9crans clairs et utilisables d\u2019une seule main, sur iOS comme sur Android.<\/p><\/li>\n  <li><div class=\"vz\" aria-hidden=\"true\"><div class=\"ad\">Sponsoris\u00e9<div class=\"im\"><\/div><u>J\u2019en profite<\/u><\/div><\/div><div class=\"tt\"><small>03<\/small><h3>Publicit\u00e9s en ligne<\/h3><\/div><p>Visuels pour Facebook Ads, Google Ads et autres campagnes qui arr\u00eatent le d\u00e9filement.<\/p><\/li>\n  <li><div class=\"vz\" aria-hidden=\"true\"><div class=\"nl\"><div class=\"h\">NEWSLETTER<\/div><div class=\"b\"><b><\/b><i><\/i><i style=\"width:60%\"><\/i><\/div><\/div><\/div><div class=\"tt\"><small>04<\/small><h3>Newsletter<\/h3><\/div><p>Des e-mails lisibles sur mobile, \u00e0 vos couleurs, qui donnent envie de cliquer.<\/p><\/li>\n  <li><div class=\"vz\" aria-hidden=\"true\"><div class=\"so\"><b><\/b><b><\/b><b><\/b><b><\/b><b><\/b><b><\/b><\/div><\/div><div class=\"tt\"><small>05<\/small><h3>Visuels des r\u00e9seaux sociaux<\/h3><\/div><p>Publications, stories et couvertures coh\u00e9rentes sur tous vos comptes.<\/p><\/li>\n  <li><div class=\"vz\" aria-hidden=\"true\"><div class=\"bn\"><span>-30 % <em>ce week-end<\/em><\/span><u>Voir<\/u><\/div><\/div><div class=\"tt\"><small>06<\/small><h3>Banni\u00e8re web<\/h3><\/div><p>Banni\u00e8res display aux formats standards, l\u00e9g\u00e8res et percutantes.<\/p><\/li>\n <\/ul>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6718fc25 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6718fc25\" data-element_type=\"section\" data-e-type=\"section\" id=\"offre\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-639405a4\" data-id=\"639405a4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5cf3ca79 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"5cf3ca79\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Une offre personnalis\u00e9e : le simulateur d\u2019\u00e9crans ===== *\/\n.mgwdo{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdo *{box-sizing:border-box}\n.mgwdo .w{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:60px;align-items:center}\n.mgwdo .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdo .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdo h2{margin:0 0 18px;font:800 48px\/1.07 Inter,sans-serif;letter-spacing:-1.6px;color:#141B2D!important}\n.mgwdo h2 em{font-style:normal;color:#E8590C}\n.mgwdo .tx>p:not(.eb){margin:0 0 22px;font:400 16.5px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdo .tx strong{color:#141B2D}\n.mgwdo .ls{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;margin:0;padding:0}\n.mgwdo .ls li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px;border-radius:14px;background:#FFFFFF;border:1px solid #DCE6F5;font:700 14.5px\/1.35 Inter,sans-serif}\n.mgwdo .ls li i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#1F3A68;color:#FFFFFF;font-size:13px}\n.mgwdo .sim{padding:22px;border-radius:24px;background:#FFFFFF;border:1px solid #DCE6F5}\n.mgwdo .sw{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 18px;padding:4px;border-radius:999px;background:#F3F4F7}\n.mgwdo .sw button{display:flex;align-items:center;gap:7px;padding:9px 14px;border:0;border-radius:999px;background:none;color:#5B6475;font:800 12.5px\/1 Inter,sans-serif;cursor:pointer;transition:background .3s,color .3s}\n.mgwdo .sw button[aria-pressed=\"true\"]{background:#1F3A68;color:#FFFFFF}\n.mgwdo .sw button:focus-visible{outline:2px solid #E8590C;outline-offset:2px}\n.mgwdo .st{height:330px;display:flex;align-items:center;justify-content:center}\n.mgwdo .fr{width:100%;height:100%;padding:10px;border-radius:16px;background:#141B2D;transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1),border-radius .6s}\n.mgwdo[data-d=\"1\"] .fr{width:62%;height:96%;border-radius:22px}\n.mgwdo[data-d=\"2\"] .fr{width:36%;height:100%;border-radius:28px}\n.mgwdo .sc{height:100%;border-radius:8px;background:#FFFFFF;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:10px}\n.mgwdo[data-d=\"2\"] .sc{border-radius:18px}\n.mgwdo .nv{display:flex;align-items:center;gap:8px;font:900 11px\/1 Inter,sans-serif}\n.mgwdo .nv em{font-style:normal;color:#E8590C}\n.mgwdo .nv i{margin-left:auto;width:24px;height:5px;border-radius:3px;background:#E6E9EF}\n.mgwdo .nv i+i{margin-left:0}\n.mgwdo .nv u{display:block;width:16px;height:12px;margin-left:auto;background:linear-gradient(#141B2D 0 2px,transparent 2px 5px,#141B2D 5px 7px,transparent 7px 10px,#141B2D 10px 12px)}\n.mgwdo .nv i,.mgwdo .nv u{flex:none}\n.mgwdo .nv u{display:none}\n.mgwdo[data-d=\"2\"] .nv i{display:none}.mgwdo[data-d=\"2\"] .nv u{display:block}\n.mgwdo .hr{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;align-items:center;padding:14px;border-radius:10px;background:#EEF3FB}\n.mgwdo[data-d=\"2\"] .hr{grid-template-columns:1fr}\n.mgwdo .hr b{display:block;font:900 15px\/1.1 Inter,sans-serif;letter-spacing:-.4px}\n.mgwdo .hr b em{font-style:normal;color:#E8590C}\n.mgwdo .hr small{display:inline-block;margin-top:8px;padding:6px 9px;border-radius:999px;background:#E8590C;color:#FFFFFF;font:800 9px\/1 Inter,sans-serif}\n.mgwdo .hr span{aspect-ratio:4\/3;border-radius:8px;background:radial-gradient(circle at 50% 50%,#F7B267 0 26%,transparent 27%),#1F3A68}\n.mgwdo .cd{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}\n.mgwdo[data-d=\"1\"] .cd{grid-template-columns:repeat(2,1fr)}\n.mgwdo[data-d=\"2\"] .cd{grid-template-columns:1fr}\n.mgwdo .cd span{border-radius:8px;border:1px solid #EEF0F4;padding:8px}\n.mgwdo .cd span:before{content:\"\";display:block;width:16px;height:16px;border-radius:5px;background:#FFF4E8;margin-bottom:6px}\n.mgwdo .cd span:after{content:\"\";display:block;height:4px;width:70%;border-radius:2px;background:#E6E9EF}\n.mgwdo[data-d=\"1\"] .cd span:nth-child(3),.mgwdo[data-d=\"2\"] .cd span:nth-child(n+2){display:none}\n.mgwdo .cp{display:flex;justify-content:space-between;gap:10px;margin:16px 0 0;font:600 12.5px\/1.4 Inter,sans-serif;color:#7D8597}\n.mgwdo .cp b{color:#1F3A68}\n@media(max-width:1100px){.mgwdo .w{grid-template-columns:minmax(0,1fr);gap:40px}}\n@media(max-width:640px){.mgwdo h2{font-size:34px;letter-spacing:-1.1px}.mgwdo .ls{grid-template-columns:minmax(0,1fr)}.mgwdo .sim{padding:14px}.mgwdo .st{height:280px}.mgwdo .sw button{padding:9px 10px}.mgwdo .sw button span{display:none}.mgwdo[data-d=\"1\"] .fr{width:78%}.mgwdo[data-d=\"2\"] .fr{width:52%}.mgwdo .cp{flex-direction:column}}\n@media(prefers-reduced-motion:reduce){.mgwdo .fr{transition:none}}\n<\/style>\n<div class=\"mgwdo\" data-d=\"0\">\n <div class=\"w\">\n  <div class=\"tx\">\n   <p class=\"eb\">Une offre sur mesure<\/p>\n   <h2>Une offre personnalis\u00e9e, <em>adapt\u00e9e \u00e0 vos besoins<\/em><\/h2>\n   <p>Site internet, application mobile ou interface digitale complexe : My Grafik met son expertise en web design UI\/UX au service de votre projet et <strong>adapte chaque solution \u00e0 votre identit\u00e9 visuelle et \u00e0 vos objectifs<\/strong>. Le r\u00e9sultat : des interfaces modernes, ergonomiques et intuitives, qui valorisent votre entreprise.<\/p>\n   <ul class=\"ls\">\n    <li><i class=\"fas fa-lightbulb\" aria-hidden=\"true\"><\/i>Cr\u00e9ativit\u00e9 et ma\u00eetrise des tendances UI\/UX<\/li>\n    <li><i class=\"fas fa-layer-group\" aria-hidden=\"true\"><\/i>Design d\u2019interfaces web et applications mobiles<\/li>\n    <li><i class=\"fas fa-bullseye\" aria-hidden=\"true\"><\/i>Exp\u00e9rience utilisateur optimis\u00e9e pour la conversion<\/li>\n    <li><i class=\"fas fa-mobile-alt\" aria-hidden=\"true\"><\/i>Responsive design adapt\u00e9 \u00e0 tous les \u00e9crans<\/li>\n   <\/ul>\n  <\/div>\n  <div class=\"sim\">\n   <div class=\"sw\" role=\"group\" aria-label=\"Choisir un type d\u2019\u00e9cran\"><button type=\"button\" aria-pressed=\"true\" data-d=\"0\"><i class=\"fas fa-desktop\" aria-hidden=\"true\"><\/i><span>Ordinateur<\/span><\/button><button type=\"button\" aria-pressed=\"false\" data-d=\"1\"><i class=\"fas fa-tablet-alt\" aria-hidden=\"true\"><\/i><span>Tablette<\/span><\/button><button type=\"button\" aria-pressed=\"false\" data-d=\"2\"><i class=\"fas fa-mobile-alt\" aria-hidden=\"true\"><\/i><span>Mobile<\/span><\/button><\/div>\n   <div class=\"st\" aria-hidden=\"true\"><div class=\"fr\"><div class=\"sc\"><div class=\"nv\"><span>Votre marque<em>.<\/em><\/span><i><\/i><i><\/i><i><\/i><u><\/u><\/div><div class=\"hr\"><div><b>Une interface <em>qui s\u2019adapte.<\/em><\/b><small>Demander un devis<\/small><\/div><span><\/span><\/div><div class=\"cd\"><span><\/span><span><\/span><span><\/span><\/div><\/div><\/div><\/div>\n   <p class=\"cp\"><span>Une seule maquette, <b>d\u00e9clin\u00e9e pour chaque \u00e9cran<\/b><\/span><span>Exemple \u00e0 titre d\u2019illustration<\/span><\/p>\n  <\/div>\n <\/div>\n<\/div>\n<script>\n(function(){document.querySelectorAll('.mgwdo:not([data-ok])').forEach(function(w){w.setAttribute('data-ok',1);\n var B=[].slice.call(w.querySelectorAll('.sw button')),user=false,t,k=0;\n function set(d){k=d;w.setAttribute('data-d',d);B.forEach(function(b,i){b.setAttribute('aria-pressed',i===d);});}\n B.forEach(function(b,i){b.addEventListener('click',function(){user=true;clearInterval(t);set(i);});});\n if(document.documentElement.classList.contains('pv-static')||matchMedia('(prefers-reduced-motion:reduce)').matches||!('IntersectionObserver' in window))return;\n new IntersectionObserver(function(e){clearInterval(t);if(!e[0].isIntersecting||user)return;t=setInterval(function(){set((k+1)%3);},2600);},{threshold:.4}).observe(w);\n});})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5fe62efc mg-ctaband elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5fe62efc\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-78ce8398\" data-id=\"78ce8398\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-64d6aa7b pv-h mg-split elementor-widget elementor-widget-heading\" data-id=\"64d6aa7b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Vous avez un projet de <span class=\"mg-grad\">web design<\/span> en t\u00eate ?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2483d318 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"2483d318\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Faites votre demande de devis d\u00e8s maintenant<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6cafb42c elementor-widget elementor-widget-spacer\" data-id=\"6cafb42c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60b4b5a1 elementor-align-center elementor-mobile-align-justify mg-btn elementor-invisible elementor-widget elementor-widget-button\" data-id=\"60b4b5a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:200}\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-lg\" href=\"#contact\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-arrow-right\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Devis gratuit en ligne<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3d8a2569 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3d8a2569\" data-element_type=\"section\" data-e-type=\"section\" id=\"web-design\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-12a2332a\" data-id=\"12a2332a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2d1a25fb elementor-invisible elementor-widget elementor-widget-html\" data-id=\"2d1a25fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== UI & UX : du wireframe \u00e0 la maquette ===== *\/\n.mgwdu{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdu *{box-sizing:border-box}\n.mgwdu .w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}\n.mgwdu .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdu .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdu h2{margin:0 0 18px;font:800 46px\/1.08 Inter,sans-serif;letter-spacing:-1.5px;color:#141B2D!important}\n.mgwdu h2 em{font-style:normal;color:#E8590C}\n.mgwdu .tx>p:not(.eb){margin:0 0 14px;font:400 16.5px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdu .tx strong{color:#141B2D}\n.mgwdu .df{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 24px}\n.mgwdu .df div{padding:18px;border-radius:16px;border:1px solid #E6E9EF;background:#FFFFFF}\n.mgwdu .df div+div{background:#FFF8F2;border-color:#F8D9C2}\n.mgwdu .df b{display:flex;align-items:center;gap:8px;font:900 22px\/1 Inter,sans-serif;letter-spacing:-.5px}\n.mgwdu .df b small{font:800 11px\/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:#1F3A68}\n.mgwdu .df div+div b small{color:#E8590C}\n.mgwdu .df span{display:block;margin-top:8px;font:500 14px\/1.5 Inter,sans-serif;color:#5B6475}\n.mgwdu .bt{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:14px;background:#E8590C;color:#FFFFFF!important;font:800 15px\/1 Inter,sans-serif;text-decoration:none;transition:background .3s}\n.mgwdu .bt:hover{background:#C2410C}\n.mgwdu .bx{padding:22px;border-radius:24px;background:#F6F7FA;border:1px solid #E6E9EF}\n.mgwdu .sw{display:flex;gap:4px;width:max-content;margin:0 auto 18px;padding:4px;border-radius:999px;background:#FFFFFF;border:1px solid #E6E9EF}\n.mgwdu .sw button{padding:9px 16px;border:0;border-radius:999px;background:none;color:#5B6475;font:800 12.5px\/1 Inter,sans-serif;cursor:pointer;transition:background .3s,color .3s}\n.mgwdu .sw button[aria-pressed=\"true\"]{background:#1F3A68;color:#FFFFFF}\n.mgwdu .sw button:focus-visible{outline:2px solid #E8590C;outline-offset:2px}\n.mgwdu .mk{position:relative;padding:16px;border-radius:16px;background:#FFFFFF;border:1.5px dashed #B9C6DD;transition:border-color .5s}\n.mgwdu .mk *{transition:background .5s,color .5s,border-color .5s,opacity .5s}\n.mgwdu .nv{display:flex;align-items:center;gap:8px;padding:0 0 12px;font:900 12px\/1 Inter,sans-serif;color:#9AA3B5}\n.mgwdu .nv i{margin-left:auto;width:30px;height:6px;border-radius:3px;background:#D5DAE3}\n.mgwdu .nv i+i{margin-left:0}\n.mgwdu .nv u{padding:7px 10px;border-radius:6px;border:1.5px dashed #B9C6DD;color:#9AA3B5;font:800 10px\/1 Inter,sans-serif;text-decoration:none}\n.mgwdu .hr{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;padding:16px;border-radius:12px;border:1.5px dashed #B9C6DD;background:#FFFFFF}\n.mgwdu .hr b{display:block;font:900 20px\/1.08 Inter,sans-serif;letter-spacing:-.6px;color:#9AA3B5}\n.mgwdu .hr b em{font-style:normal}\n.mgwdu .hr small{display:block;margin:8px 0 12px;font:500 11.5px\/1.4 Inter,sans-serif;color:#B4BBC8}\n.mgwdu .hr u{display:inline-block;padding:8px 12px;border-radius:6px;border:1.5px dashed #B9C6DD;color:#9AA3B5;font:800 10.5px\/1 Inter,sans-serif;text-decoration:none}\n.mgwdu .hr span{border-radius:10px;border:1.5px dashed #B9C6DD;background:linear-gradient(to top right,transparent calc(50% - 1px),#D5DAE3 50%,transparent calc(50% + 1px)),linear-gradient(to top left,transparent calc(50% - 1px),#D5DAE3 50%,transparent calc(50% + 1px))}\n.mgwdu .cd{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}\n.mgwdu .cd span{padding:10px;border-radius:10px;border:1.5px dashed #B9C6DD}\n.mgwdu .cd span i{display:block;width:22px;height:22px;border-radius:7px;background:#E6E9EF;margin-bottom:8px}\n.mgwdu .cd span b{display:block;height:5px;border-radius:3px;background:#E6E9EF}\n.mgwdu .cd span b+b{width:60%;margin-top:5px}\n.mgwdu .nt{position:absolute;padding:5px 8px;border-radius:6px;background:#1F3A68;color:#FFFFFF;font:800 10px\/1 ui-monospace,Menlo,monospace;white-space:nowrap}\n.mgwdu .n1{top:-10px;left:18px}.mgwdu .n2{top:96px;right:-8px}.mgwdu .n3{bottom:-10px;left:40%}\n\/* \u00e9tat UI *\/\n.mgwdu.ui .mk{border-color:transparent}\n.mgwdu.ui .nv{color:#141B2D}.mgwdu.ui .nv:first-letter{color:#141B2D}\n.mgwdu.ui .nv i{background:#E6E9EF}\n.mgwdu.ui .nv u{background:#E8590C;border-color:#E8590C;color:#FFFFFF;border-radius:999px}\n.mgwdu.ui .hr{background:#1F3A68;border-color:#1F3A68}\n.mgwdu.ui .hr b{color:#FFFFFF}.mgwdu.ui .hr b em{color:#F7B267}\n.mgwdu.ui .hr small{color:#C7D5EC}\n.mgwdu.ui .hr u{background:#E8590C;border-color:#E8590C;color:#FFFFFF;border-radius:999px}\n.mgwdu.ui .hr span{border-color:transparent;background:radial-gradient(circle at 50% 46%,#F7B267 0 28%,transparent 29%),#E8590C}\n.mgwdu.ui .cd span{border:1px solid #EEF0F4}\n.mgwdu.ui .cd span i{background:#FFF4E8}\n.mgwdu.ui .cd span:nth-child(2) i{background:#EEF3FB}\n.mgwdu.ui .nt{background:#E8590C}\n.mgwdu .lg{margin:16px 0 0;font:600 13px\/1.4 Inter,sans-serif;color:#7D8597;text-align:center}\n.mgwdu .lg b{color:#141B2D}\n@media(max-width:1100px){.mgwdu .w{grid-template-columns:minmax(0,1fr);gap:40px}}\n@media(max-width:640px){.mgwdu h2{font-size:33px;letter-spacing:-1.1px}.mgwdu .df{grid-template-columns:minmax(0,1fr)}.mgwdu .bx{padding:14px}.mgwdu .hr{grid-template-columns:1fr}.mgwdu .hr span{display:none}.mgwdu .n2{display:none}.mgwdu .nv i{display:none}.mgwdu .nv u{margin-left:auto}.mgwdu .bt{width:100%;justify-content:center}}\n@media(prefers-reduced-motion:reduce){.mgwdu .mk *{transition:none}}\n<\/style>\n<div class=\"mgwdu\">\n <div class=\"w\">\n  <div class=\"tx\">\n   <p class=\"eb\">UI &amp; UX<\/p>\n   <h2>Qu\u2019est-ce que le web design et <em>que font les web designers&nbsp;?<\/em><\/h2>\n   <p>Le web design UI\/UX regroupe les m\u00e9thodes et comp\u00e9tences qui permettent de concevoir des <strong>interfaces digitales esth\u00e9tiques, ergonomiques et centr\u00e9es sur l\u2019utilisateur<\/strong>. Les designers prennent en compte chaque \u00e9l\u00e9ment de l\u2019\u00e9cran : contenus, images, vid\u00e9os, boutons, formulaires et interactions.<\/p>\n   <p>Ergonomie web, design responsive, UX, UI et outils professionnels comme <strong>Figma<\/strong> : c\u2019est ce savoir-faire qui am\u00e9liore la navigation, facilite l\u2019acc\u00e8s \u00e0 l\u2019information et <strong>favorise les conversions<\/strong>.<\/p>\n   <div class=\"df\">\n    <div><b>UX <small>la structure<\/small><\/b><span>Parcours, hi\u00e9rarchie des contenus, ergonomie : ce que l\u2019utilisateur fait et comment il le fait.<\/span><\/div>\n    <div><b>UI <small>l\u2019habillage<\/small><\/b><span>Couleurs, typographies, visuels et \u00e9motions : ce que l\u2019utilisateur voit et ressent.<\/span><\/div>\n   <\/div>\n   <a class=\"bt\" href=\"#contact\">Demande de devis <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a>\n  <\/div>\n  <div class=\"bx\">\n   <div class=\"sw\" role=\"group\" aria-label=\"Voir la structure ou l\u2019habillage\"><button type=\"button\" aria-pressed=\"true\" data-s=\"0\">UX \u00b7 la structure<\/button><button type=\"button\" aria-pressed=\"false\" data-s=\"1\">UI \u00b7 l\u2019habillage<\/button><\/div>\n   <div class=\"mk\" aria-hidden=\"true\">\n    <span class=\"nt n1\">Navigation claire<\/span><span class=\"nt n2\">Hi\u00e9rarchie<\/span><span class=\"nt n3\">Appel \u00e0 l\u2019action<\/span>\n    <div class=\"nv\">Votre marque<i><\/i><i><\/i><i><\/i><u>Contact<\/u><\/div>\n    <div class=\"hr\"><div><b>Votre message <em>principal ici.<\/em><\/b><small>Une phrase qui explique votre offre en quelques mots.<\/small><u>Demander un devis<\/u><\/div><span><\/span><\/div>\n    <div class=\"cd\"><span><i><\/i><b><\/b><b><\/b><\/span><span><i><\/i><b><\/b><b><\/b><\/span><span><i><\/i><b><\/b><b><\/b><\/span><\/div>\n   <\/div>\n   <p class=\"lg\">La <b>m\u00eame page<\/b>, avant et apr\u00e8s l\u2019habillage graphique<\/p>\n  <\/div>\n <\/div>\n<\/div>\n<script>\n(function(){document.querySelectorAll('.mgwdu:not([data-ok])').forEach(function(w){w.setAttribute('data-ok',1);\n var B=[].slice.call(w.querySelectorAll('.sw button')),user=false,t,on=false;\n function set(v){on=v;w.classList.toggle('ui',v);B.forEach(function(b,i){b.setAttribute('aria-pressed',(i===1)===v);});}\n B.forEach(function(b,i){b.addEventListener('click',function(){user=true;clearInterval(t);set(i===1);});});\n if(document.documentElement.classList.contains('pv-static')||matchMedia('(prefers-reduced-motion:reduce)').matches||!('IntersectionObserver' in window)){set(true);return;}\n new IntersectionObserver(function(e){clearInterval(t);if(!e[0].isIntersecting||user)return;t=setInterval(function(){set(!on);},2800);},{threshold:.4}).observe(w);\n});})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3dd60011 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3dd60011\" data-element_type=\"section\" data-e-type=\"section\" id=\"agence\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-56be23a4\" data-id=\"56be23a4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6c8105e2 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"6c8105e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Qu\u2019est-ce qu\u2019une agence de web design ? : les 3 leviers ===== *\/\n.mgwdg{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdg *{box-sizing:border-box}\n.mgwdg .top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:end;margin:0 0 40px}\n.mgwdg .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdg .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdg h2{margin:0;font:800 50px\/1.06 Inter,sans-serif;letter-spacing:-1.7px;color:#141B2D!important}\n.mgwdg h2 em{font-style:normal;color:#E8590C}\n.mgwdg .top>div+div p{margin:0;font:400 16.5px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdg .top strong{color:#141B2D}\n.mgwdg .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}\n.mgwdg .g>li{display:flex;flex-direction:column;margin:0;padding:24px;border-radius:22px;background:#FFFFFF;border:1px solid #E6E9EF}\n.mgwdg .vz{height:132px;margin:0 0 20px;border-radius:14px;background:#F6F7FA;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px}\n.mgwdg .c1 span{flex:1;height:100%;border-radius:10px;display:flex;align-items:flex-end;padding:8px;font:800 9.5px\/1 ui-monospace,Menlo,monospace;color:#FFFFFF}\n.mgwdg .c1 span:nth-child(1){background:#E8590C;flex:1.6}.mgwdg .c1 span:nth-child(2){background:#1F3A68}.mgwdg .c1 span:nth-child(3){background:#F7B267;color:#141B2D}.mgwdg .c1 span:nth-child(4){background:#FFFFFF;border:1px solid #E6E9EF;color:#9AA3B5;flex:.7}\n.mgwdg .c2{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}\n.mgwdg .c2 b{font:900 30px\/1 Inter,sans-serif;letter-spacing:-1px}\n.mgwdg .c2 i{font:italic 600 19px\/1 Lora,Georgia,serif;color:#E8590C}\n.mgwdg .c2 small{font:400 12px\/1.4 Inter,sans-serif;color:#7D8597}\n.mgwdg .c3{display:grid;align-items:stretch;justify-content:stretch;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:6px}\n.mgwdg .c3 span{border-radius:6px;background:#DCE6F5}\n.mgwdg .c3 span:nth-child(1){grid-column:1\/-1;background:#1F3A68}\n.mgwdg .c3 span:nth-child(2){grid-column:1\/3;grid-row:2\/4;background:#E8590C}\n.mgwdg .c3 span:nth-child(5){grid-column:3\/5;background:#F7B267}\n.mgwdg h3{margin:0 0 8px;font:800 19px\/1.25 Inter,sans-serif;color:#141B2D!important}\n.mgwdg .g>li>p{margin:0;font:400 14.5px\/1.6 Inter,sans-serif;color:#5B6475}\n.mgwdg .bd{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;margin:16px 0 0;padding:26px 30px;border-radius:22px;background:#1F3A68;border:1px solid #1F3A68}\n.mgwdg .bd q{font:italic 600 21px\/1.45 Lora,Georgia,serif;color:#FFFFFF;quotes:\"\u00ab \" \" \u00bb\"}\n.mgwdg .bd ul{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;list-style:none;margin:0;padding:0}\n.mgwdg .bd li{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:999px;background:#FFFFFF;font:700 13.5px\/1 Inter,sans-serif;color:#1F3A68}\n.mgwdg .bd li i{color:#E8590C}\n@media(max-width:1100px){.mgwdg .top{grid-template-columns:minmax(0,1fr);gap:20px}.mgwdg .g{grid-template-columns:minmax(0,1fr);max-width:620px}.mgwdg .bd{grid-template-columns:minmax(0,1fr)}.mgwdg .bd ul{justify-content:flex-start}}\n@media(max-width:640px){.mgwdg h2{font-size:34px;letter-spacing:-1.1px}.mgwdg .bd{padding:20px}.mgwdg .bd q{font-size:18px}}\n<\/style>\n<div class=\"mgwdg\">\n <div class=\"top\">\n  <div><p class=\"eb\">Le r\u00f4le d\u2019une agence<\/p><h2>Qu\u2019est-ce qu\u2019une agence <em>de web design&nbsp;?<\/em><\/h2><\/div>\n  <div><p>Une agence de web design UI\/UX met sa cr\u00e9ativit\u00e9 et son expertise au service d\u2019<strong>interfaces digitales modernes, intuitives et personnalis\u00e9es<\/strong>. Elle associe trois leviers pour cr\u00e9er une exp\u00e9rience visuelle captivante, fid\u00e8le \u00e0 l\u2019identit\u00e9 de chaque marque.<\/p><\/div>\n <\/div>\n <ul class=\"g\">\n  <li><div class=\"vz c1\" aria-hidden=\"true\"><span>#E8590C<\/span><span>#1F3A68<\/span><span>#F7B267<\/span><span>#FFF<\/span><\/div><h3>Les couleurs<\/h3><p>Une palette tir\u00e9e de votre charte, qui attire l\u2019\u0153il au bon endroit et rend vos boutons immanquables.<\/p><\/li>\n  <li><div class=\"vz c2\" aria-hidden=\"true\"><b>Titre impactant<\/b><i>avec une touche d\u2019\u00e9l\u00e9gance<\/i><small>Un texte courant confortable \u00e0 lire, sur ordinateur comme sur mobile.<\/small><\/div><h3>Les typographies<\/h3><p>Des polices lisibles et coh\u00e9rentes, qui donnent du caract\u00e8re \u00e0 votre marque sans fatiguer la lecture.<\/p><\/li>\n  <li><div class=\"vz c3\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div><h3>Les mises en page<\/h3><p>Une grille claire qui hi\u00e9rarchise l\u2019information et guide le regard, de l\u2019accroche jusqu\u2019au contact.<\/p><\/li>\n <\/ul>\n <div class=\"bd\">\n  <q>Couleurs, typographies, mises en page : chaque d\u00e9tail guide votre visiteur jusqu\u2019\u00e0 l\u2019action.<\/q>\n  <ul aria-label=\"Les objectifs d\u2019une agence de web design\">\n   <li><i class=\"fas fa-route\" aria-hidden=\"true\"><\/i>Navigation fluide<\/li>\n   <li><i class=\"fas fa-smile\" aria-hidden=\"true\"><\/i>Exp\u00e9rience optimale<\/li>\n   <li><i class=\"fas fa-user-check\" aria-hidden=\"true\"><\/i>Visiteurs convertis en clients<\/li>\n  <\/ul>\n <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-69c8bcbe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"69c8bcbe\" data-element_type=\"section\" data-e-type=\"section\" id=\"conseils\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-31a1abce\" data-id=\"31a1abce\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-34e015fd elementor-invisible elementor-widget elementor-widget-html\" data-id=\"34e015fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Bien choisir son agence : la check-list ===== *\/\n.mgwdc{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdc *{box-sizing:border-box}\n.mgwdc .w{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px;align-items:start}\n.mgwdc .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdc .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdc h2{margin:0 0 18px;font:800 44px\/1.08 Inter,sans-serif;letter-spacing:-1.5px;color:#141B2D!important}\n.mgwdc h2 em{font-style:normal;color:#E8590C}\n.mgwdc .tx>p:not(.eb){margin:0 0 24px;font:400 16.5px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdc .tx strong{color:#141B2D}\n.mgwdc .pg{padding:20px;border-radius:18px;background:#1F3A68;border:1px solid #1F3A68;margin:0 0 24px}\n.mgwdc .pg p{display:flex;justify-content:space-between;gap:10px;margin:0 0 10px;font:700 14px\/1.3 Inter,sans-serif;color:#FFFFFF}\n.mgwdc .pg p b{font:900 14px\/1.3 Inter,sans-serif}\n.mgwdc .pg>span{display:block;height:10px;border-radius:5px;background:#2E4C80;overflow:hidden}\n.mgwdc .pg>span i{display:block;height:100%;width:calc(var(--p,0)*33.34%);border-radius:5px;background:#E8590C;transition:width .5s cubic-bezier(.2,.8,.2,1)}\n.mgwdc .pg small{display:block;margin-top:10px;font:500 13px\/1.45 Inter,sans-serif;color:#C7D5EC}\n.mgwdc .bt{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:14px;background:#E8590C;color:#FFFFFF!important;font:800 15px\/1 Inter,sans-serif;text-decoration:none;transition:background .3s}\n.mgwdc .bt:hover{background:#C2410C}\n.mgwdc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}\n.mgwdc ol li{margin:0}\n.mgwdc label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:start;padding:22px;border-radius:20px;background:#FFFFFF;border:1.5px solid #E6E9EF;cursor:pointer;transition:border-color .3s,background .3s}\n.mgwdc label:hover{border-color:#B9C6DD}\n.mgwdc input{position:absolute;opacity:0;width:1px;height:1px}\n.mgwdc .n{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#1F3A68;color:#FFFFFF;font:900 17px\/1 Inter,sans-serif}\n.mgwdc h3{margin:3px 0 8px;font:800 19px\/1.25 Inter,sans-serif;color:#141B2D!important}\n.mgwdc label p{margin:0 0 12px;font:400 14.5px\/1.6 Inter,sans-serif;color:#5B6475}\n.mgwdc label q{display:block;padding:10px 12px;border-radius:10px;background:#F6F7FA;font:600 13.5px\/1.45 Inter,sans-serif;color:#3A4356;quotes:none}\n.mgwdc label q b{color:#E8590C}\n.mgwdc .ck{width:28px;height:28px;border-radius:9px;border:2px solid #D5DAE3;display:grid;place-items:center;color:transparent;font-size:12px;transition:background .3s,border-color .3s,color .3s}\n.mgwdc input:checked+label{border-color:#E8590C;background:#FFF8F2}\n.mgwdc input:checked+label .ck{background:#E8590C;border-color:#E8590C;color:#FFFFFF}\n.mgwdc input:focus-visible+label{outline:2px solid #E8590C;outline-offset:3px}\n@media(max-width:1100px){.mgwdc .w{grid-template-columns:minmax(0,1fr);gap:36px}}\n@media(max-width:640px){.mgwdc h2{font-size:32px;letter-spacing:-1px}.mgwdc label{grid-template-columns:minmax(0,1fr) auto;padding:18px;gap:12px}.mgwdc .n{grid-column:1;width:40px;height:40px;font-size:15px}.mgwdc .ck{grid-column:2;grid-row:1}.mgwdc label>div{grid-column:1\/-1}.mgwdc .bt{width:100%;justify-content:center}}\n@media(prefers-reduced-motion:reduce){.mgwdc .pg>span i{transition:none}}\n<\/style>\n<div class=\"mgwdc\">\n <div class=\"w\">\n  <div class=\"tx\">\n   <p class=\"eb\">Bien choisir<\/p>\n   <h2>Quelques conseils pour choisir son agence de web design <em>en C\u00f4te d\u2019Ivoire<\/em><\/h2>\n   <p>Pour r\u00e9ussir votre projet digital, choisissez une agence sp\u00e9cialis\u00e9e en web design UI\/UX <strong>capable de comprendre vos besoins et de r\u00e9pondre \u00e0 vos objectifs<\/strong>. Voici 3 crit\u00e8res essentiels : cochez-les au fil de votre comparaison.<\/p>\n   <div class=\"pg\" aria-live=\"polite\"><p>Votre check-list<b><span class=\"c\">0<\/span>\/3<\/b><\/p><span><i><\/i><\/span><small class=\"m\">Cochez les crit\u00e8res remplis par l\u2019agence que vous \u00e9tudiez.<\/small><\/div>\n   <a class=\"bt\" href=\"#contact\">Choisir son agence webdesign <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a>\n  <\/div>\n  <ol>\n   <li><input type=\"checkbox\" id=\"mgwdc1\"><label for=\"mgwdc1\"><span class=\"n\" aria-hidden=\"true\">1<\/span><div><h3>La sp\u00e9cialit\u00e9 de l\u2019agence<\/h3><p>Certaines agences se sp\u00e9cialisent dans des domaines ou des secteurs pr\u00e9cis. Examinez leurs expertises, leurs r\u00e9alisations et leurs services pour v\u00e9rifier qu\u2019ils <strong>correspondent \u00e0 vos besoins<\/strong>.<\/p><q><b>\u00c0 demander :<\/b> avez-vous d\u00e9j\u00e0 con\u00e7u des interfaces dans mon secteur&nbsp;?<\/q><\/div><span class=\"ck\" aria-hidden=\"true\"><i class=\"fas fa-check\"><\/i><\/span><\/label><\/li>\n   <li><input type=\"checkbox\" id=\"mgwdc2\"><label for=\"mgwdc2\"><span class=\"n\" aria-hidden=\"true\">2<\/span><div><h3>Le portfolio de l\u2019agence<\/h3><p>Le portfolio r\u00e9v\u00e8le le style cr\u00e9atif, l\u2019expertise et la qualit\u00e9 des r\u00e9alisations. V\u00e9rifiez que son approche du design et de l\u2019exp\u00e9rience utilisateur <strong>correspond \u00e0 votre identit\u00e9 de marque<\/strong>.<\/p><q><b>\u00c0 demander :<\/b> pouvez-vous me montrer des projets proches du mien&nbsp;?<\/q><\/div><span class=\"ck\" aria-hidden=\"true\"><i class=\"fas fa-check\"><\/i><\/span><\/label><\/li>\n   <li><input type=\"checkbox\" id=\"mgwdc3\"><label for=\"mgwdc3\"><span class=\"n\" aria-hidden=\"true\">3<\/span><div><h3>L\u2019exp\u00e9rience<\/h3><p>Privil\u00e9giez une \u00e9quipe cr\u00e9ative et confirm\u00e9e, qui ma\u00eetrise les bonnes pratiques d\u2019ergonomie. Des r\u00e9alisations vari\u00e9es signifient une agence <strong>mieux pr\u00e9par\u00e9e \u00e0 comprendre vos attentes<\/strong>.<\/p><q><b>\u00c0 demander :<\/b> comment se d\u00e9roulent la validation des maquettes et les retours&nbsp;?<\/q><\/div><span class=\"ck\" aria-hidden=\"true\"><i class=\"fas fa-check\"><\/i><\/span><\/label><\/li>\n  <\/ol>\n <\/div>\n<\/div>\n<script>\n(function(){document.querySelectorAll('.mgwdc:not([data-ok])').forEach(function(w){w.setAttribute('data-ok',1);\n var I=[].slice.call(w.querySelectorAll('input')),c=w.querySelector('.c'),m=w.querySelector('.m'),bar=w.querySelector('.pg');\n var M=['Cochez les crit\u00e8res remplis par l\u2019agence que vous \u00e9tudiez.','Bon d\u00e9but : continuez la v\u00e9rification.','Presque : un dernier crit\u00e8re \u00e0 v\u00e9rifier.','Les 3 crit\u00e8res sont r\u00e9unis : vous pouvez avancer sereinement.'];\n function up(){var n=I.filter(function(i){return i.checked;}).length;c.textContent=n;bar.style.setProperty('--p',n);m.textContent=M[n];}\n I.forEach(function(i){i.addEventListener('change',up);});up();\n});})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-357a261c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"357a261c\" data-element_type=\"section\" data-e-type=\"section\" id=\"difference\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6b25fe7a\" data-id=\"6b25fe7a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7bb0808b elementor-invisible elementor-widget elementor-widget-html\" data-id=\"7bb0808b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Web design ou d\u00e9veloppement : le face-\u00e0-face ===== *\/\n.mgwdf{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdf *{box-sizing:border-box}\n.mgwdf .top{max-width:860px;margin:0 auto 44px;text-align:center}\n.mgwdf .eb{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdf .eb:before,.mgwdf .eb:after{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdf h2{margin:0 0 16px;font:800 48px\/1.08 Inter,sans-serif;letter-spacing:-1.6px;color:#141B2D!important}\n.mgwdf h2 em{font-style:normal;color:#E8590C}\n.mgwdf .top>p:not(.eb){margin:0;font:400 17px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdf .vs{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}\n.mgwdf .vs>b{position:absolute;left:50%;top:50%;z-index:1;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;background:#E8590C;color:#FFFFFF;font:900 15px\/1 Inter,sans-serif;border:5px solid #EEF3FB}\n.mgwdf .cl{display:flex;flex-direction:column;padding:30px;border-radius:24px;background:#FFFFFF;border:1px solid #DCE6F5}\n.mgwdf .cl.dv{background:#141B2D;border-color:#141B2D;color:#FFFFFF}\n.mgwdf .hd{display:flex;align-items:center;gap:14px;margin:0 0 16px}\n.mgwdf .hd i{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:#FFF4E8;color:#E8590C;font-size:19px}\n.mgwdf .dv .hd i{background:#26314A;color:#7FB0FF}\n.mgwdf h3{margin:0;font:900 24px\/1.15 Inter,sans-serif;letter-spacing:-.5px;color:inherit!important}\n.mgwdf .hd small{display:block;margin-top:4px;font:700 12.5px\/1 Inter,sans-serif;color:#9AA3B5}\n.mgwdf .cl>p{margin:0 0 18px;font:400 15.5px\/1.65 Inter,sans-serif;color:#5B6475}\n.mgwdf .dv>p{color:#C9D1E0}\n.mgwdf .cl>p strong{color:#141B2D}.mgwdf .dv>p strong{color:#FFFFFF}\n.mgwdf .tg{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 20px;padding:0}\n.mgwdf .tg li{margin:0;padding:7px 11px;border-radius:999px;background:#EEF3FB;font:700 12.5px\/1 Inter,sans-serif;color:#1F3A68}\n.mgwdf .dv .tg li{background:#26314A;color:#C9D1E0}\n.mgwdf pre{margin:0 0 20px;padding:14px 16px;border-radius:12px;background:#0D1220;font:500 12.5px\/1.6 ui-monospace,Menlo,monospace;color:#C9D1E0;white-space:pre-wrap;overflow:hidden}\n.mgwdf pre i{font-style:normal;color:#7FB0FF}.mgwdf pre em{font-style:normal;color:#F7B267}.mgwdf pre u{text-decoration:none;color:#6B7895}\n.mgwdf .sp{display:flex;gap:6px;margin:0 0 20px}\n.mgwdf .sp span{flex:1;height:54px;border-radius:10px;display:flex;align-items:flex-end;padding:7px;font:800 9px\/1 ui-monospace,Menlo,monospace;color:#FFFFFF}\n.mgwdf .sp span:nth-child(1){background:#E8590C}.mgwdf .sp span:nth-child(2){background:#1F3A68}.mgwdf .sp span:nth-child(3){background:#F7B267;color:#141B2D}\n.mgwdf .sp span:nth-child(4){flex:1.6;background:#F6F7FA;color:#141B2D;font:900 24px\/1 Inter,sans-serif;align-items:center;justify-content:center;letter-spacing:-1px}\n.mgwdf .lv{margin-top:auto;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#F6F7FA;font:600 13.5px\/1.35 Inter,sans-serif;color:#5B6475}\n.mgwdf .lv b{display:block;font:800 15px\/1.2 Inter,sans-serif;color:#141B2D}\n.mgwdf .lv>i{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:#E8590C;color:#FFFFFF;font-size:13px}\n.mgwdf .dv .lv{background:#1C2438;color:#C9D1E0}.mgwdf .dv .lv b{color:#FFFFFF}.mgwdf .dv .lv>i{background:#2D9D5F}\n.mgwdf .ft{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0 0;padding:22px 26px;border-radius:20px;background:#FFFFFF;border:1px solid #DCE6F5}\n.mgwdf .ft p{margin:0;font:500 15.5px\/1.6 Inter,sans-serif;color:#3A4356}\n.mgwdf .ft p strong{color:#1F3A68}\n.mgwdf .ft a{flex:none;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:12px;border:1.5px solid #1F3A68;color:#1F3A68!important;font:800 14.5px\/1 Inter,sans-serif;text-decoration:none;transition:background .3s,color .3s}\n.mgwdf .ft a:hover{background:#1F3A68;color:#FFFFFF!important}\n@media(max-width:1000px){.mgwdf .vs{grid-template-columns:minmax(0,1fr);gap:0}.mgwdf .vs>b{position:relative;left:auto;top:auto;margin:-14px auto;z-index:2}.mgwdf .ft{flex-direction:column;align-items:flex-start}}\n@media(max-width:640px){.mgwdf h2{font-size:32px;letter-spacing:-1px}.mgwdf .eb:after{display:none}.mgwdf .cl{padding:20px}.mgwdf .ft{padding:20px}.mgwdf .ft a{width:100%;justify-content:center}}\n<\/style>\n<div class=\"mgwdf\">\n <div class=\"top\">\n  <p class=\"eb\">Deux m\u00e9tiers compl\u00e9mentaires<\/p>\n  <h2>Web design ou d\u00e9veloppement de site web, <em>quelle est la diff\u00e9rence&nbsp;?<\/em><\/h2>\n  <p>L\u2019un dessine l\u2019exp\u00e9rience, l\u2019autre la fait fonctionner. Les deux sont \u00e9troitement li\u00e9s : c\u2019est leur collaboration qui donne un site beau <strong>et<\/strong> efficace.<\/p>\n <\/div>\n <div class=\"vs\">\n  <div class=\"cl\">\n   <div class=\"hd\"><i class=\"fas fa-pencil-ruler\" aria-hidden=\"true\"><\/i><div><h3>Le web design<\/h3><small>L\u2019apparence et l\u2019exp\u00e9rience<\/small><\/div><\/div>\n   <p>Le web design consiste \u00e0 <strong>concevoir l\u2019apparence et l\u2019exp\u00e9rience utilisateur<\/strong> d\u2019un site web. Il inclut :<\/p>\n   <ul class=\"tg\"><li>La structure du site<\/li><li>La pr\u00e9sentation du contenu<\/li><li>Les couleurs<\/li><li>La police<\/li><li>La mise en page<\/li><li>Les illustrations<\/li><li>Les images<\/li><li>Le graphisme<\/li><\/ul>\n   <div class=\"sp\" aria-hidden=\"true\"><span>Orange<\/span><span>Bleu<\/span><span>Sable<\/span><span>Aa<\/span><\/div>\n   <div class=\"lv\"><i class=\"fas fa-object-group\" aria-hidden=\"true\"><\/i><span><b>Le livrable : des maquettes valid\u00e9es<\/b>Sur Figma, pour ordinateur, tablette et mobile.<\/span><\/div>\n  <\/div>\n  <b aria-hidden=\"true\">VS<\/b>\n  <div class=\"cl dv\">\n   <div class=\"hd\"><i class=\"fas fa-code\" aria-hidden=\"true\"><\/i><div><h3>Le d\u00e9veloppement<\/h3><small>Le code qui fait fonctionner<\/small><\/div><\/div>\n   <p>Le d\u00e9veloppement consiste \u00e0 <strong>cr\u00e9er le site en lui-m\u00eame<\/strong>, c\u2019est-\u00e0-dire \u00e0 \u00e9crire le code qui le fait fonctionner et \u00e0 ajouter des fonctionnalit\u00e9s avanc\u00e9es. Il inclut :<\/p>\n   <ul class=\"tg\"><li>Les pages HTML<\/li><li>Les scripts PHP<\/li><li>Les bases de donn\u00e9es<\/li><li>Les formulaires<\/li><li>Les fonctionnalit\u00e9s<\/li><\/ul>\n   <pre aria-hidden=\"true\"><u>&lt;!-- la maquette devient un site --&gt;<\/u>\n&lt;<i>section<\/i> class=<em>\"hero\"<\/em>&gt;\n  &lt;<i>h1<\/i>&gt;Une interface qui vous ressemble&lt;\/<i>h1<\/i>&gt;\n&lt;\/<i>section<\/i>&gt;<\/pre>\n   <div class=\"lv\"><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i><span><b>Le livrable : un site fonctionnel<\/b>En ligne, rapide et administrable.<\/span><\/div>\n  <\/div>\n <\/div>\n <div class=\"ft\">\n  <p>Il est possible de faire appel \u00e0 des sp\u00e9cialistes de l\u2019un ou l\u2019autre domaine. Chez My Grafik, <strong>designers et d\u00e9veloppeurs travaillent dans la m\u00eame \u00e9quipe<\/strong> : votre maquette est int\u00e9gr\u00e9e au pixel pr\u00e8s.<\/p>\n  <a href=\"#contact\">Parler de mon projet <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a>\n <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-59d6944a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"59d6944a\" data-element_type=\"section\" data-e-type=\"section\" id=\"raisons\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-47e60038\" data-id=\"47e60038\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6276d89d elementor-invisible elementor-widget elementor-widget-html\" data-id=\"6276d89d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== 5 raisons : le classement ===== *\/\n.mgwdr{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdr *{box-sizing:border-box}\n.mgwdr .w{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start}\n.mgwdr .sk{position:sticky;top:110px}\n.mgwdr .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdr .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdr h2{margin:0 0 18px;font:800 46px\/1.08 Inter,sans-serif;letter-spacing:-1.5px;color:#141B2D!important}\n.mgwdr h2 em{font-style:normal;color:#E8590C}\n.mgwdr .sk>p:not(.eb){margin:0 0 24px;font:400 16.5px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdr .bg{display:flex;align-items:center;gap:16px;padding:20px;border-radius:20px;background:#1F3A68;color:#C7D5EC;font:500 14px\/1.5 Inter,sans-serif}\n.mgwdr .bg b{flex:none;font:900 60px\/.8 Inter,sans-serif;letter-spacing:-3px;color:#F7B267}\n.mgwdr .bg strong{display:block;color:#FFFFFF;font:800 15.5px\/1.3 Inter,sans-serif}\n.mgwdr ol{list-style:none;margin:0;padding:0;counter-reset:r}\n.mgwdr ol li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:22px;margin:0;padding:26px 0;border-top:1px solid #E6E9EF}\n.mgwdr ol li:last-child{border-bottom:1px solid #E6E9EF}\n.mgwdr ol li:before{counter-increment:r;content:\"0\" counter(r);font:900 44px\/1 Inter,sans-serif;letter-spacing:-2px;color:#DCE6F5;transition:color .3s}\n.mgwdr ol li:hover:before{color:#E8590C}\n.mgwdr h3{display:flex;align-items:center;gap:12px;margin:4px 0 10px;font:800 21px\/1.25 Inter,sans-serif;color:#141B2D!important}\n.mgwdr h3 i{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#FFF4E8;color:#E8590C;font-size:15px}\n.mgwdr ol li p{margin:0 0 12px;font:400 15.5px\/1.65 Inter,sans-serif;color:#5B6475}\n.mgwdr ol li p strong{color:#141B2D}\n.mgwdr ol li small{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#EEF3FB;font:700 12px\/1 Inter,sans-serif;color:#1F3A68}\n@media(max-width:1100px){.mgwdr .w{grid-template-columns:minmax(0,1fr);gap:30px}.mgwdr .sk{position:static}}\n@media(max-width:640px){.mgwdr h2{font-size:34px;letter-spacing:-1.1px}.mgwdr ol li{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0}.mgwdr ol li:before{font-size:32px}.mgwdr h3{font-size:19px}}\n<\/style>\n<div class=\"mgwdr\">\n <div class=\"w\">\n  <div class=\"sk\">\n   <p class=\"eb\">Notre top 5<\/p>\n   <h2>5 raisons de faire appel \u00e0 une agence <em>de design web<\/em><\/h2>\n   <p>Il existe de nombreuses raisons pour lesquelles faire appel \u00e0 une agence de design web peut \u00eatre b\u00e9n\u00e9fique pour votre entreprise. Voici les cinq qui comptent le plus.<\/p>\n   <div class=\"bg\"><b>5<\/b><span><strong>b\u00e9n\u00e9fices concrets<\/strong>De la confiance de vos visiteurs jusqu\u2019\u00e0 votre visibilit\u00e9 sur Google.<\/span><\/div>\n  <\/div>\n  <ol>\n   <li><div><h3><i class=\"fas fa-user-tie\" aria-hidden=\"true\"><\/i>Montrer une image s\u00e9rieuse de votre entreprise<\/h3><p>Un site bien con\u00e7u donne une image s\u00e9rieuse \u00e0 votre entreprise et <strong>montre que vous \u00eates digne de confiance<\/strong>, un atout essentiel si vous vendez en ligne sans accueillir vos clients en boutique.<\/p><small><i class=\"fas fa-shield-alt\" aria-hidden=\"true\"><\/i>Confiance<\/small><\/div><\/li>\n   <li><div><h3><i class=\"fas fa-sitemap\" aria-hidden=\"true\"><\/i>Pr\u00e9senter l\u2019information de mani\u00e8re claire et organis\u00e9e<\/h3><p>Site corporate, vitrine ou e-commerce : un bon design aide vos visiteurs \u00e0 <strong>trouver rapidement ce qu\u2019ils cherchent<\/strong> et rend votre message clair et compr\u00e9hensible par votre cible.<\/p><small><i class=\"fas fa-eye\" aria-hidden=\"true\"><\/i>Clart\u00e9<\/small><\/div><\/li>\n   <li><div><h3><i class=\"fas fa-mouse-pointer\" aria-hidden=\"true\"><\/i>Am\u00e9liorer la conversion<\/h3><p>La conversion, c\u2019est le nombre de visiteurs qui passent \u00e0 l\u2019action : remplir un formulaire, acheter un produit\u2026 Un design attrayant et facile \u00e0 utiliser <strong>les incite \u00e0 rester et met cette action en avant<\/strong>.<\/p><small><i class=\"fas fa-chart-line\" aria-hidden=\"true\"><\/i>Plus de demandes<\/small><\/div><\/li>\n   <li><div><h3><i class=\"fas fa-gem\" aria-hidden=\"true\"><\/i>Valoriser votre image de marque<\/h3><p>Le design joue un r\u00f4le crucial dans la fa\u00e7on dont votre entreprise est per\u00e7ue. Professionnel et coh\u00e9rent avec votre marque, il <strong>renforce la confiance et vous d\u00e9marque de vos concurrents<\/strong>.<\/p><small><i class=\"fas fa-star\" aria-hidden=\"true\"><\/i>Diff\u00e9renciation<\/small><\/div><\/li>\n   <li><div><h3><i class=\"fab fa-google\" aria-hidden=\"true\"><\/i>\u00catre mieux vu par Google<\/h3><p>Un site bien structur\u00e9, rapide et adapt\u00e9 aux mobiles offre une meilleure exp\u00e9rience, un crit\u00e8re pris en compte par les moteurs de recherche. Un bon web design pose ainsi <strong>des bases solides pour votre r\u00e9f\u00e9rencement naturel (SEO)<\/strong>.<\/p><small><i class=\"fas fa-search\" aria-hidden=\"true\"><\/i>Visibilit\u00e9<\/small><\/div><\/li>\n  <\/ol>\n <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a833119 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6a833119\" data-element_type=\"section\" data-e-type=\"section\" id=\"site-moderne\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-585ff19c\" data-id=\"585ff19c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-35ac7c7b elementor-invisible elementor-widget elementor-widget-html\" data-id=\"35ac7c7b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Cr\u00e9er un site web moderne : photo et 3 piliers ===== *\/\n.mgwdm{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdm *{box-sizing:border-box}\n.mgwdm .w{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:60px;align-items:center}\n.mgwdm .ph{position:relative}\n.mgwdm .ph img{display:block;width:100%;aspect-ratio:4\/4.6;object-fit:cover;border-radius:28px}\n.mgwdm .ph .bd{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:999px;background:#141B2D;color:#FFFFFF;font:600 13px\/1.2 Inter,sans-serif}\n.mgwdm .ph .bd i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#E8590C;font-size:12px}\n.mgwdm .ph .bd b{font-weight:800}\n.mgwdm .ph .bd span{width:1px;height:16px;background:#3A4356}\n.mgwdm .ph .sc{position:absolute;right:-18px;top:28px;padding:12px 14px;border-radius:16px;background:#FFFFFF;border:1px solid #E6E9EF;font:700 12px\/1.3 Inter,sans-serif;color:#3A4356}\n.mgwdm .ph .sc div{display:flex;align-items:flex-end;gap:6px;margin-top:8px}\n.mgwdm .ph .sc div i{display:block;border:2px solid #1F3A68;border-radius:4px}\n.mgwdm .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdm .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdm h2{margin:0 0 16px;font:800 46px\/1.08 Inter,sans-serif;letter-spacing:-1.5px;color:#141B2D!important}\n.mgwdm h2 em{font-style:normal;color:#E8590C}\n.mgwdm .ld{margin:0 0 24px;font:400 16.5px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdm ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}\n.mgwdm ul li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;margin:0;padding:18px;border-radius:18px;background:#FFFFFF;border:1px solid #E6E9EF}\n.mgwdm ul li>i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#EEF3FB;color:#1F3A68;font-size:18px}\n.mgwdm ul li:nth-child(2)>i{background:#FFF4E8;color:#E8590C}\n.mgwdm ul li b{display:block;margin:2px 0 5px;font:800 17px\/1.25 Inter,sans-serif}\n.mgwdm ul li span{display:block;font:400 14.5px\/1.55 Inter,sans-serif;color:#5B6475}\n.mgwdm ul li span strong{color:#141B2D}\n@media(max-width:1100px){.mgwdm .w{grid-template-columns:minmax(0,1fr);gap:40px}.mgwdm .ph{max-width:520px;width:100%;margin:0 auto}.mgwdm .ph .sc{right:12px}}\n@media(max-width:640px){.mgwdm h2{font-size:34px;letter-spacing:-1.1px}.mgwdm .ph .bd{left:10px;right:10px;bottom:10px;font-size:12px}.mgwdm .ph .sc{display:none}.mgwdm ul li{grid-template-columns:minmax(0,1fr);gap:12px}}\n<\/style>\n<div class=\"mgwdm\">\n <div class=\"w\">\n  <div class=\"ph\">\n   <img decoding=\"async\" src=\"https:\/\/my-grafik.com\/wp-content\/uploads\/mygrafik-image-cache\/6e0bd0061d7738f5c6b9de092694f9645953b00f8857f8b7caacc399d3a93c9a.webp\" alt=\"L\u2019\u00e9quipe My Grafik, agence de webdesign UI\/UX \u00e0 Abidjan\">\n   <div class=\"sc\" aria-hidden=\"true\">Tous les \u00e9crans<div><i style=\"width:34px;height:24px\"><\/i><i style=\"width:20px;height:28px\"><\/i><i style=\"width:12px;height:22px\"><\/i><\/div><\/div>\n   <p class=\"bd\" style=\"margin:0\"><i class=\"fas fa-star\" aria-hidden=\"true\"><\/i><b>4,95\/5<\/b> de satisfaction<span aria-hidden=\"true\"><\/span>Une \u00e9quipe bas\u00e9e \u00e0 Abidjan<\/p>\n  <\/div>\n  <div>\n   <p class=\"eb\">Un site moderne<\/p>\n   <h2>Cr\u00e9ez un site web <em>moderne et professionnel<\/em><\/h2>\n   <p class=\"ld\">Un design soign\u00e9 est indispensable pour un site internet attractif et professionnel. Chez My Grafik, trois \u00e9l\u00e9ments guident chaque conception :<\/p>\n   <ul>\n    <li><i class=\"fas fa-magic\" aria-hidden=\"true\"><\/i><div><b>Les derni\u00e8res tendances<\/b><span>Nous int\u00e9grons les tendances actuelles du web design pour des sites <strong>modernes, \u00e9l\u00e9gants et performants<\/strong>. Un design actualis\u00e9 refl\u00e8te le dynamisme de votre entreprise.<\/span><\/div><\/li>\n    <li><i class=\"fas fa-mobile-alt\" aria-hidden=\"true\"><\/i><div><b>Toutes les tailles d\u2019\u00e9cran<\/b><span>Smartphones, tablettes, ordinateurs : votre site offre une <strong>exp\u00e9rience fluide et accessible<\/strong> sur tous les appareils, quel que soit leur format.<\/span><\/div><\/li>\n    <li><i class=\"fas fa-trophy\" aria-hidden=\"true\"><\/i><div><b>Vos atouts mis en valeur<\/b><span>Chaque projet a ses objectifs : nous valorisons vos offres et votre identit\u00e9 pour <strong>vous d\u00e9marquer de vos concurrents<\/strong> et capter l\u2019attention de vos visiteurs.<\/span><\/div><\/li>\n   <\/ul>\n  <\/div>\n <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-559395cd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"559395cd\" data-element_type=\"section\" data-e-type=\"section\" id=\"methode\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-36bd243e\" data-id=\"36bd243e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-47cfa12 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"47cfa12\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Notre m\u00e9thode web design : le parcours interactif sur fond bleu ===== *\/\n.mgwdt{font-family:Inter,sans-serif;color:#FFFFFF}\n.mgwdt *{box-sizing:border-box}\n.mgwdt .top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end;margin:0 0 44px}\n.mgwdt .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#F7B267}\n.mgwdt .eb:before{content:\"\";width:34px;height:2px;background:#F7B267}\n.mgwdt h2{margin:0;font:800 52px\/1.06 Inter,sans-serif;letter-spacing:-1.7px;color:#FFFFFF!important}\n.mgwdt h2 em{font-style:normal;color:#F7B267}\n.mgwdt .top>div+div p{margin:0 0 20px;font:400 17px\/1.7 Inter,sans-serif;color:#C7D5EC}\n.mgwdt .bt{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:14px;background:#E8590C;color:#FFFFFF!important;font:800 15px\/1 Inter,sans-serif;text-decoration:none;transition:background .3s}\n.mgwdt .bt:hover{background:#C2410C}\n.mgwdt .bx{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;align-items:stretch}\n.mgwdt .tb{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}\n.mgwdt .tb li{margin:0}\n.mgwdt .tb button{position:relative;width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid #2E4C80;border-radius:16px;background:#16294A;color:#FFFFFF;text-align:left;cursor:pointer;overflow:hidden;transition:background .3s,border-color .3s}\n.mgwdt .tb button:hover{border-color:#5A7BB5}\n.mgwdt .tb button:focus-visible{outline:2px solid #F7B267;outline-offset:2px}\n.mgwdt .tb .n{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#1F3A68;font:900 16px\/1 Inter,sans-serif;color:#C7D5EC;transition:background .3s,color .3s}\n.mgwdt .tb b{display:block;font:800 16px\/1.25 Inter,sans-serif}\n.mgwdt .tb small{display:block;margin-top:4px;font:600 12.5px\/1.2 Inter,sans-serif;color:#8FA6CC}\n.mgwdt .tb .ar{color:#5A7BB5;font-size:13px;transition:transform .3s,color .3s}\n.mgwdt .tb .pg{position:absolute;left:0;bottom:0;height:3px;width:0;background:#E8590C}\n.mgwdt .tb button[aria-selected=\"true\"]{background:#FFFFFF;border-color:#FFFFFF;color:#141B2D}\n.mgwdt .tb button[aria-selected=\"true\"] .n{background:#E8590C;color:#FFFFFF}\n.mgwdt .tb button[aria-selected=\"true\"] small{color:#7D8597}\n.mgwdt .tb button[aria-selected=\"true\"] .ar{color:#E8590C;transform:translateX(3px)}\n.mgwdt.run .tb button[aria-selected=\"true\"] .pg{animation:mgwdt-p 6s linear forwards}\n@keyframes mgwdt-p{to{width:100%}}\n.mgwdt .pn{display:none;flex-direction:column;height:100%;padding:30px;border-radius:24px;background:#FFFFFF;color:#141B2D}\n.mgwdt .pn.on{display:flex;animation:mgwdt-f .45s ease}\n@keyframes mgwdt-f{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}\n.mgwdt .ph{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}\n.mgwdt .ph span{font:800 11.5px\/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#E8590C}\n.mgwdt .ph em{display:flex;gap:4px;font-style:normal}\n.mgwdt .ph em i{width:22px;height:5px;border-radius:3px;background:#DCE6F5}\n.mgwdt .ph em i.on{background:#1F3A68}\n.mgwdt h3{margin:0 0 10px;font:900 28px\/1.12 Inter,sans-serif;letter-spacing:-.8px;color:#141B2D!important}\n.mgwdt .pn>p{margin:0 0 20px;font:400 16px\/1.65 Inter,sans-serif;color:#5B6475}\n.mgwdt .vz{height:150px;margin:0 0 20px;border-radius:16px;background:#EEF3FB;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;overflow:hidden}\n.mgwdt .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto}\n.mgwdt .cols div{padding:16px;border-radius:14px;border:1px solid #E6E9EF}\n.mgwdt .cols div+div{background:#1F3A68;border-color:#1F3A68;color:#FFFFFF}\n.mgwdt .cols b{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:800 12px\/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#1F3A68}\n.mgwdt .cols div+div b{color:#F7B267}\n.mgwdt .cols span{display:block;font:500 14px\/1.5 Inter,sans-serif;color:#5B6475}\n.mgwdt .cols div+div span{color:#DCE6F5}\n\/* mini visuels *\/\n.mgwdt .v1 span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#FFFFFF;color:#1F3A68;font-size:20px;border:2px solid #DCE6F5}\n.mgwdt .v1 span:nth-child(2){width:74px;height:74px;background:#1F3A68;color:#FFFFFF;border-color:#1F3A68;font-size:24px}\n.mgwdt .v2{flex-direction:column;gap:8px}\n.mgwdt .v2 b{padding:7px 16px;border-radius:8px;background:#1F3A68;color:#FFFFFF;font:800 11px\/1 Inter,sans-serif}\n.mgwdt .v2 div{display:flex;gap:8px}\n.mgwdt .v2 div span{width:62px;height:42px;border-radius:7px;border:1.5px dashed #8FA6CC;background:#FFFFFF}\n.mgwdt .v3 span{width:46px;height:96px;border-radius:10px}\n.mgwdt .v3 span:nth-child(1){background:#E8590C}.mgwdt .v3 span:nth-child(2){background:#1F3A68}.mgwdt .v3 span:nth-child(3){background:#F7B267}\n.mgwdt .v3 b{padding:0 14px;font:900 42px\/1 Inter,sans-serif;letter-spacing:-1.5px;color:#141B2D}\n.mgwdt .v4 div{position:relative;width:210px;height:110px;border-radius:12px;background:#FFFFFF;border:1px solid #DCE6F5;padding:12px}\n.mgwdt .v4 div i{display:block;height:6px;border-radius:3px;background:#DCE6F5;margin-bottom:6px}\n.mgwdt .v4 div u{position:absolute;left:12px;bottom:12px;padding:8px 12px;border-radius:999px;background:#E8590C;color:#FFFFFF;font:800 10px\/1 Inter,sans-serif;text-decoration:none}\n.mgwdt .v4 div s{position:absolute;left:84px;bottom:2px;color:#1F3A68;font-size:20px;text-decoration:none}\n.mgwdt .v4 em{padding:7px 10px;border-radius:8px;background:#1F3A68;color:#FFFFFF;font:800 11px\/1.3 Inter,sans-serif;font-style:normal}\n.mgwdt .v5 pre{margin:0;padding:12px 14px;border-radius:10px;background:#16294A;color:#C7D5EC;font:500 11.5px\/1.6 ui-monospace,Menlo,monospace}\n.mgwdt .v5 pre i{font-style:normal;color:#F7B267}\n.mgwdt .v5 div{display:flex;align-items:flex-end;gap:5px;height:90px}\n.mgwdt .v5 div span{width:16px;border-radius:4px 4px 0 0;background:#1F3A68}\n.mgwdt .v5 div span:last-child{background:#E8590C}\n@media(max-width:1100px){.mgwdt .top{grid-template-columns:minmax(0,1fr);gap:20px}.mgwdt .bx{grid-template-columns:minmax(0,1fr)}}\n@media(max-width:640px){.mgwdt h2{font-size:36px;letter-spacing:-1.2px}.mgwdt .bt{width:100%;justify-content:center}.mgwdt .tb{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.mgwdt .tb button{display:flex;justify-content:center;padding:8px}.mgwdt .tb .ar{display:none}.mgwdt .tb button>span:not(.n):not(.pg){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.mgwdt .tb .n{width:38px;height:38px}.mgwdt .pn{padding:20px}.mgwdt h3{font-size:23px}.mgwdt .cols{grid-template-columns:minmax(0,1fr)}.mgwdt .vz{height:130px}.mgwdt .v5 div{display:none}}\n@media(prefers-reduced-motion:reduce){.mgwdt .pn.on{animation:none}.mgwdt.run .tb button[aria-selected=\"true\"] .pg{animation:none}}\n<\/style>\n<div class=\"mgwdt\">\n <div class=\"top\">\n  <div><p class=\"eb\">Notre m\u00e9thode<\/p><h2>Votre interface <em>en 5 \u00e9tapes<\/em><\/h2><\/div>\n  <div><p>De la recherche UX au prototype cliquable : vous validez chaque \u00e9tape avant de passer \u00e0 la suivante, sans mauvaise surprise. Cliquez sur une \u00e9tape pour la d\u00e9couvrir.<\/p><a class=\"bt\" href=\"#contact\">Lancer mon projet <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a><\/div>\n <\/div>\n <div class=\"bx\">\n  <ul class=\"tb\" role=\"tablist\" aria-label=\"Les \u00e9tapes de notre m\u00e9thode\">\n   <li role=\"presentation\"><button type=\"button\" role=\"tab\" id=\"mgwdt-t1\" aria-controls=\"mgwdt-p1\" aria-selected=\"true\"><span class=\"n\">1<\/span><span><b>D\u00e9couverte &amp; recherche UX<\/b><small>Comprendre avant de dessiner<\/small><\/span><i class=\"fas fa-arrow-right ar\" aria-hidden=\"true\"><\/i><span class=\"pg\" aria-hidden=\"true\"><\/span><\/button><\/li>\n   <li role=\"presentation\"><button type=\"button\" role=\"tab\" id=\"mgwdt-t2\" aria-controls=\"mgwdt-p2\" aria-selected=\"false\" tabindex=\"-1\"><span class=\"n\">2<\/span><span><b>Arborescence &amp; wireframes<\/b><small>La structure de chaque \u00e9cran<\/small><\/span><i class=\"fas fa-arrow-right ar\" aria-hidden=\"true\"><\/i><span class=\"pg\" aria-hidden=\"true\"><\/span><\/button><\/li>\n   <li role=\"presentation\"><button type=\"button\" role=\"tab\" id=\"mgwdt-t3\" aria-controls=\"mgwdt-p3\" aria-selected=\"false\" tabindex=\"-1\"><span class=\"n\">3<\/span><span><b>Maquettes UI sur Figma<\/b><small>L\u2019habillage \u00e0 vos couleurs<\/small><\/span><i class=\"fas fa-arrow-right ar\" aria-hidden=\"true\"><\/i><span class=\"pg\" aria-hidden=\"true\"><\/span><\/button><\/li>\n   <li role=\"presentation\"><button type=\"button\" role=\"tab\" id=\"mgwdt-t4\" aria-controls=\"mgwdt-p4\" aria-selected=\"false\" tabindex=\"-1\"><span class=\"n\">4<\/span><span><b>Prototype &amp; validation<\/b><small>Vous testez, nous ajustons<\/small><\/span><i class=\"fas fa-arrow-right ar\" aria-hidden=\"true\"><\/i><span class=\"pg\" aria-hidden=\"true\"><\/span><\/button><\/li>\n   <li role=\"presentation\"><button type=\"button\" role=\"tab\" id=\"mgwdt-t5\" aria-controls=\"mgwdt-p5\" aria-selected=\"false\" tabindex=\"-1\"><span class=\"n\">5<\/span><span><b>Int\u00e9gration &amp; suivi<\/b><small>Du design au site en ligne<\/small><\/span><i class=\"fas fa-arrow-right ar\" aria-hidden=\"true\"><\/i><span class=\"pg\" aria-hidden=\"true\"><\/span><\/button><\/li>\n  <\/ul>\n  <div>\n   <div class=\"pn on\" role=\"tabpanel\" id=\"mgwdt-p1\" aria-labelledby=\"mgwdt-t1\"><div class=\"ph\"><span>\u00c9tape 1 sur 5<\/span><em aria-hidden=\"true\"><i class=\"on\"><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/em><\/div><h3>D\u00e9couverte &amp; recherche UX<\/h3><p>Nous \u00e9tudions votre activit\u00e9, vos objectifs, vos utilisateurs et vos concurrents pour comprendre ce que votre interface doit accomplir.<\/p><div class=\"vz v1\" aria-hidden=\"true\"><span><i class=\"fas fa-bullseye\"><\/i><\/span><span><i class=\"fas fa-users\"><\/i><\/span><span><i class=\"fas fa-chess\"><\/i><\/span><\/div><div class=\"cols\"><div><b><i class=\"fas fa-user\" aria-hidden=\"true\"><\/i>Votre r\u00f4le<\/b><span>Nous pr\u00e9senter votre activit\u00e9, vos clients et vos objectifs.<\/span><\/div><div><b><i class=\"fas fa-gift\" aria-hidden=\"true\"><\/i>Vous recevez<\/b><span>Objectifs, personas et analyse de vos concurrents.<\/span><\/div><\/div><\/div>\n   <div class=\"pn\" role=\"tabpanel\" id=\"mgwdt-p2\" aria-labelledby=\"mgwdt-t2\" hidden><div class=\"ph\"><span>\u00c9tape 2 sur 5<\/span><em aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i><\/i><i><\/i><i><\/i><\/em><\/div><h3>Arborescence &amp; wireframes<\/h3><p>Nous organisons les contenus et dessinons la structure de chaque \u00e9cran et le parcours de vos visiteurs, avant toute couleur.<\/p><div class=\"vz v2\" aria-hidden=\"true\"><b>Accueil<\/b><div><span><\/span><span><\/span><span><\/span><\/div><\/div><div class=\"cols\"><div><b><i class=\"fas fa-user\" aria-hidden=\"true\"><\/i>Votre r\u00f4le<\/b><span>Valider l\u2019organisation des pages et le parcours propos\u00e9.<\/span><\/div><div><b><i class=\"fas fa-gift\" aria-hidden=\"true\"><\/i>Vous recevez<\/b><span>L\u2019arborescence du site et les wireframes de chaque \u00e9cran.<\/span><\/div><\/div><\/div>\n   <div class=\"pn\" role=\"tabpanel\" id=\"mgwdt-p3\" aria-labelledby=\"mgwdt-t3\" hidden><div class=\"ph\"><span>\u00c9tape 3 sur 5<\/span><em aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i><\/i><i><\/i><\/em><\/div><h3>Maquettes UI sur Figma<\/h3><p>Chaque \u00e9cran est habill\u00e9 aux couleurs de votre charte : typographies, composants, ic\u00f4nes et visuels, d\u00e9clin\u00e9s pour ordinateur, tablette et mobile.<\/p><div class=\"vz v3\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><b>Aa<\/b><\/div><div class=\"cols\"><div><b><i class=\"fas fa-user\" aria-hidden=\"true\"><\/i>Votre r\u00f4le<\/b><span>Partager votre charte et vos retours sur les maquettes.<\/span><\/div><div><b><i class=\"fas fa-gift\" aria-hidden=\"true\"><\/i>Vous recevez<\/b><span>Les maquettes de tous les \u00e9crans et un design system.<\/span><\/div><\/div><\/div>\n   <div class=\"pn\" role=\"tabpanel\" id=\"mgwdt-p4\" aria-labelledby=\"mgwdt-t4\" hidden><div class=\"ph\"><span>\u00c9tape 4 sur 5<\/span><em aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i><\/i><\/em><\/div><h3>Prototype &amp; validation<\/h3><p>Vous cliquez dans un prototype interactif comme dans le vrai site. Nous ajustons selon vos retours jusqu\u2019\u00e0 validation compl\u00e8te.<\/p><div class=\"vz v4\" aria-hidden=\"true\"><div><i style=\"width:60%\"><\/i><i><\/i><i style=\"width:80%\"><\/i><u>Demander un devis<\/u><s><i class=\"fas fa-mouse-pointer\"><\/i><\/s><\/div><em>Valid\u00e9 \u2713<\/em><\/div><div class=\"cols\"><div><b><i class=\"fas fa-user\" aria-hidden=\"true\"><\/i>Votre r\u00f4le<\/b><span>Tester le prototype et nous faire vos remarques.<\/span><\/div><div><b><i class=\"fas fa-gift\" aria-hidden=\"true\"><\/i>Vous recevez<\/b><span>Un prototype cliquable et une interface valid\u00e9e.<\/span><\/div><\/div><\/div>\n   <div class=\"pn\" role=\"tabpanel\" id=\"mgwdt-p5\" aria-labelledby=\"mgwdt-t5\" hidden><div class=\"ph\"><span>\u00c9tape 5 sur 5<\/span><em aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><\/em><\/div><h3>Int\u00e9gration &amp; suivi<\/h3><p>Nous int\u00e9grons le design au pixel pr\u00e8s, ou livrons des fichiers pr\u00eats pour vos d\u00e9veloppeurs, puis mesurons l\u2019usage r\u00e9el pour am\u00e9liorer l\u2019exp\u00e9rience.<\/p><div class=\"vz v5\" aria-hidden=\"true\"><pre>&lt;<i>section<\/i>&gt;\n  Votre interface\n&lt;\/<i>section<\/i>&gt;<\/pre><div><span style=\"height:30%\"><\/span><span style=\"height:45%\"><\/span><span style=\"height:55%\"><\/span><span style=\"height:75%\"><\/span><span style=\"height:95%\"><\/span><\/div><\/div><div class=\"cols\"><div><b><i class=\"fas fa-user\" aria-hidden=\"true\"><\/i>Votre r\u00f4le<\/b><span>Donner le feu vert pour la mise en ligne.<\/span><\/div><div><b><i class=\"fas fa-gift\" aria-hidden=\"true\"><\/i>Vous recevez<\/b><span>Un site int\u00e9gr\u00e9, test\u00e9, et un suivi de son utilisation.<\/span><\/div><\/div><\/div>\n  <\/div>\n <\/div>\n<\/div>\n<script>\n(function(){document.querySelectorAll('.mgwdt:not([data-ok])').forEach(function(w){w.setAttribute('data-ok',1);\n var T=[].slice.call(w.querySelectorAll('[role=tab]')),P=[].slice.call(w.querySelectorAll('[role=tabpanel]')),k=0,t,user=false;\n function set(i,focus){k=i;T.forEach(function(b,j){var on=j===i;b.setAttribute('aria-selected',on);b.tabIndex=on?0:-1;P[j].hidden=!on;P[j].classList.toggle('on',on);});if(focus)T[i].focus();}\n function stop(){user=true;clearInterval(t);w.classList.remove('run');}\n T.forEach(function(b,i){b.addEventListener('click',function(){stop();set(i);});\n  b.addEventListener('keydown',function(e){var n=e.key==='ArrowDown'||e.key==='ArrowRight'?1:e.key==='ArrowUp'||e.key==='ArrowLeft'?-1:0;if(!n)return;e.preventDefault();stop();set((k+n+5)%5,true);});});\n if(document.documentElement.classList.contains('pv-static')||matchMedia('(prefers-reduced-motion:reduce)').matches||!('IntersectionObserver' in window))return;\n new IntersectionObserver(function(e){clearInterval(t);w.classList.remove('run');if(!e[0].isIntersecting||user)return;void w.offsetWidth;w.classList.add('run');\n  t=setInterval(function(){w.classList.remove('run');set((k+1)%5);void w.offsetWidth;w.classList.add('run');},6000);},{threshold:.35}).observe(w);\n});})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4ac1e0ac elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4ac1e0ac\" data-element_type=\"section\" data-e-type=\"section\" id=\"realisations\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-694211ce\" data-id=\"694211ce\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-258a307b elementor-invisible elementor-widget elementor-widget-html\" data-id=\"258a307b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Nos r\u00e9alisations : \u00e9crans qui d\u00e9filent ===== *\/\n.mgwdx{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdx *{box-sizing:border-box}\n.mgwdx .top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end;margin:0 0 44px}\n.mgwdx .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdx .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdx h2{margin:0;font:800 52px\/1.06 Inter,sans-serif;letter-spacing:-1.7px;color:#141B2D!important}\n.mgwdx h2 em{font-style:normal;color:#E8590C}\n.mgwdx .top>div+div p{margin:0 0 20px;font:400 17px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdx .bt{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:14px;border:1.5px solid #1F3A68;color:#1F3A68!important;font:800 15px\/1 Inter,sans-serif;text-decoration:none;transition:background .3s,color .3s}\n.mgwdx .bt:hover{background:#1F3A68;color:#FFFFFF!important}\n.mgwdx .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}\n.mgwdx .g>li{display:flex;flex-direction:column;margin:0;border-radius:24px;background:#FFFFFF;border:1px solid #E6E9EF;overflow:hidden}\n.mgwdx .vz{position:relative;height:300px;display:flex;align-items:flex-end;justify-content:center;padding:24px 24px 0;background:var(--bg)}\n.mgwdx .fr{width:100%;height:100%;border-radius:14px 14px 0 0;background:#FFFFFF;overflow:hidden;border:6px solid #141B2D;border-bottom:0}\n.mgwdx .ph .fr{width:58%;border-radius:26px 26px 0 0;border-width:7px}\n.mgwdx .scr{transition:transform 3.2s cubic-bezier(.45,0,.2,1)}\n.mgwdx .g>li:hover .scr{transform:translateY(calc(-100% + 250px))}\n.mgwdx .hint{position:absolute;right:14px;top:14px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.9);font:800 10.5px\/1 Inter,sans-serif;color:#141B2D}\n\/* contenus d\u2019\u00e9crans *\/\n.mgwdx .scr{padding:10px;display:flex;flex-direction:column;gap:8px}\n.mgwdx .scr .nv{display:flex;align-items:center;justify-content:space-between;font:900 10px\/1 Inter,sans-serif}\n.mgwdx .scr .nv i{width:14px;height:10px;background:linear-gradient(#141B2D 0 2px,transparent 2px 4px,#141B2D 4px 6px,transparent 6px 8px,#141B2D 8px 10px)}\n.mgwdx .scr .bk{border-radius:8px;background:var(--c,#F6F7FA)}\n.mgwdx .scr .ln{height:5px;border-radius:3px;background:#E6E9EF}\n.mgwdx .scr .ln.s{width:55%}\n.mgwdx .scr .bn{height:22px;border-radius:999px;background:#E8590C;color:#FFFFFF;font:800 8.5px\/22px Inter,sans-serif;text-align:center}\n.mgwdx .scr .rw{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}\n.mgwdx .scr .rw3{grid-template-columns:repeat(3,1fr)}\n.mgwdx .scr .it{display:flex;align-items:center;gap:6px;padding:6px;border-radius:8px;border:1px solid #EEF0F4}\n.mgwdx .scr .it b{flex:none;width:22px;height:22px;border-radius:6px;background:#FFF4E8}\n.mgwdx .scr .it .tl{flex:1}\n.mgwdx .scr .big{font:900 15px\/1.05 Inter,sans-serif;letter-spacing:-.4px}\n.mgwdx .scr .big em{font-style:normal;color:#E8590C}\n.mgwdx .tx{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}\n.mgwdx .tx small{font:800 11px\/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#E8590C}\n.mgwdx h3{margin:8px 0 8px;font:800 20px\/1.25 Inter,sans-serif;color:#141B2D!important}\n.mgwdx .tx p{margin:0 0 16px;font:400 14.5px\/1.6 Inter,sans-serif;color:#5B6475}\n.mgwdx .tx ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px dashed #E6E9EF}\n.mgwdx .tx ul li{margin:0;padding:6px 10px;border-radius:999px;background:#EEF3FB;font:700 11.5px\/1 Inter,sans-serif;color:#1F3A68}\n.mgwdx .cp{margin:16px 0 0;font:500 12.5px\/1.4 Inter,sans-serif;color:#9AA3B5;text-align:center}\n@media(max-width:1100px){.mgwdx .top{grid-template-columns:minmax(0,1fr);gap:20px}.mgwdx .g{grid-template-columns:minmax(0,1fr);max-width:560px}}\n@media(max-width:640px){.mgwdx h2{font-size:36px;letter-spacing:-1.2px}.mgwdx .bt{width:100%;justify-content:center}.mgwdx .vz{height:260px}.mgwdx .g>li:hover .scr{transform:translateY(calc(-100% + 210px))}}\n@media(hover:none){.mgwdx .hint{display:none}}\n@media(prefers-reduced-motion:reduce){.mgwdx .scr{transition:none}}\n<\/style>\n<div class=\"mgwdx\">\n <div class=\"top\">\n  <div><p class=\"eb\">La cr\u00e9ativit\u00e9 au service de votre performance<\/p><h2>Nos r\u00e9alisations en <em>web design UI\/UX<\/em><\/h2><\/div>\n  <div><p>Sites internet, applications, landing pages : d\u00e9couvrez comment nous transformons des id\u00e9es en interfaces claires et efficaces. Survolez une carte pour faire d\u00e9filer l\u2019\u00e9cran.<\/p><a class=\"bt\" href=\"\/portfolio\/\">Voir tout le portfolio <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a><\/div>\n <\/div>\n <ul class=\"g\">\n  <li>\n   <div class=\"vz ph\" style=\"--bg:#FFF4E8\" aria-hidden=\"true\"><span class=\"hint\">Survolez \u2193<\/span><div class=\"fr\"><div class=\"scr\">\n    <div class=\"nv\">Livraison<i><\/i><\/div><div class=\"big\">Vos repas, <em>en 30 min.<\/em><\/div><div class=\"bk\" style=\"--c:#E8590C;height:70px\"><\/div>\n    <div class=\"it\"><b><\/b><div class=\"tl\"><div class=\"ln\"><\/div><div class=\"ln s\" style=\"margin-top:4px\"><\/div><\/div><\/div><div class=\"it\"><b><\/b><div class=\"tl\"><div class=\"ln\"><\/div><div class=\"ln s\" style=\"margin-top:4px\"><\/div><\/div><\/div><div class=\"it\"><b><\/b><div class=\"tl\"><div class=\"ln\"><\/div><div class=\"ln s\" style=\"margin-top:4px\"><\/div><\/div><\/div>\n    <div class=\"bk\" style=\"--c:#EEF3FB;height:60px\"><\/div><div class=\"ln\"><\/div><div class=\"ln s\"><\/div>\n    <div class=\"it\"><b><\/b><div class=\"tl\"><div class=\"ln\"><\/div><\/div><\/div><div class=\"it\"><b><\/b><div class=\"tl\"><div class=\"ln\"><\/div><\/div><\/div>\n    <div class=\"bk\" style=\"--c:#1F3A68;height:46px\"><\/div><div class=\"ln\"><\/div><div class=\"ln s\"><\/div><div class=\"bn\">Commander<\/div>\n   <\/div><\/div><\/div>\n   <div class=\"tx\"><small>Application mobile<\/small><h3>App de livraison<\/h3><p>Un parcours de commande en trois \u00e9crans, pens\u00e9 pour \u00eatre utilis\u00e9 d\u2019une seule main.<\/p><ul><li>Recherche UX<\/li><li>Prototype<\/li><li>iOS &amp; Android<\/li><\/ul><\/div>\n  <\/li>\n  <li>\n   <div class=\"vz\" style=\"--bg:#EEF3FB\" aria-hidden=\"true\"><span class=\"hint\">Survolez \u2193<\/span><div class=\"fr\"><div class=\"scr\">\n    <div class=\"nv\">MAISON&nbsp;MODE<i><\/i><\/div><div class=\"bk\" style=\"--c:#141B2D;height:96px\"><\/div><div class=\"big\">Nouvelle <em>collection<\/em><\/div>\n    <div class=\"rw rw3\"><div class=\"bk\" style=\"--c:#F7B267;height:64px\"><\/div><div class=\"bk\" style=\"--c:#DCE6F5;height:64px\"><\/div><div class=\"bk\" style=\"--c:#FFF4E8;height:64px\"><\/div><\/div>\n    <div class=\"rw rw3\"><div class=\"ln\"><\/div><div class=\"ln\"><\/div><div class=\"ln\"><\/div><\/div>\n    <div class=\"rw rw3\"><div class=\"bk\" style=\"--c:#DCE6F5;height:64px\"><\/div><div class=\"bk\" style=\"--c:#E8590C;height:64px\"><\/div><div class=\"bk\" style=\"--c:#F6F7FA;height:64px\"><\/div><\/div>\n    <div class=\"bk\" style=\"--c:#EEF3FB;height:50px\"><\/div><div class=\"ln\"><\/div><div class=\"ln s\"><\/div><div class=\"rw\"><div class=\"bk\" style=\"--c:#F7B267;height:70px\"><\/div><div class=\"bk\" style=\"--c:#1F3A68;height:70px\"><\/div><\/div><div class=\"bn\">Ajouter au panier<\/div>\n   <\/div><\/div><\/div>\n   <div class=\"tx\"><small>Site e-commerce<\/small><h3>Marque de mode<\/h3><p>Des fiches produits qui donnent envie et un panier simplifi\u00e9 pour r\u00e9duire les abandons.<\/p><ul><li>Fiches produits<\/li><li>Panier<\/li><li>Responsive<\/li><\/ul><\/div>\n  <\/li>\n  <li>\n   <div class=\"vz\" style=\"--bg:#F4EFE9\" aria-hidden=\"true\"><span class=\"hint\">Survolez \u2193<\/span><div class=\"fr\"><div class=\"scr\">\n    <div class=\"nv\">EVENT&nbsp;2026<i><\/i><\/div><div class=\"bk\" style=\"--c:#1F3A68;height:110px;padding:12px;color:#FFFFFF;font:900 14px\/1.1 Inter,sans-serif\">Le grand rendez-vous <span style=\"color:#F7B267\">des cr\u00e9atifs<\/span><\/div>\n    <div class=\"rw rw3\"><div class=\"bk\" style=\"--c:#FFF4E8;height:40px\"><\/div><div class=\"bk\" style=\"--c:#FFF4E8;height:40px\"><\/div><div class=\"bk\" style=\"--c:#FFF4E8;height:40px\"><\/div><\/div><div class=\"bn\">Je m\u2019inscris<\/div>\n    <div class=\"ln\"><\/div><div class=\"ln s\"><\/div><div class=\"bk\" style=\"--c:#F6F7FA;height:70px\"><\/div><div class=\"rw\"><div class=\"bk\" style=\"--c:#EEF3FB;height:56px\"><\/div><div class=\"bk\" style=\"--c:#EEF3FB;height:56px\"><\/div><\/div>\n    <div class=\"ln\"><\/div><div class=\"ln s\"><\/div><div class=\"bk\" style=\"--c:#E8590C;height:60px\"><\/div><div class=\"bn\">R\u00e9server ma place<\/div>\n   <\/div><\/div><\/div>\n   <div class=\"tx\"><small>Landing page<\/small><h3>Lancement d\u2019\u00e9v\u00e9nement<\/h3><p>Une page unique, rapide et percutante, construite autour d\u2019un seul objectif : l\u2019inscription.<\/p><ul><li>Un objectif<\/li><li>Conversion<\/li><li>Chargement rapide<\/li><\/ul><\/div>\n  <\/li>\n <\/ul>\n <p class=\"cp\">\u00c9crans simplifi\u00e9s pour la pr\u00e9sentation \u00b7 retrouvez les projets complets dans notre portfolio<\/p>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-73864f6f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"73864f6f\" data-element_type=\"section\" data-e-type=\"section\" id=\"formules\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-14f160ac\" data-id=\"14f160ac\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-15632e4b elementor-invisible elementor-widget elementor-widget-html\" data-id=\"15632e4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Nos formules web design ===== *\/\n.mgwdk{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdk *{box-sizing:border-box}\n.mgwdk .top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end;margin:0 0 44px}\n.mgwdk .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdk .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdk h2{margin:0;font:800 52px\/1.06 Inter,sans-serif;letter-spacing:-1.7px;color:#141B2D!important}\n.mgwdk h2 em{font-style:normal;color:#E8590C}\n.mgwdk .top>div+div p{margin:0;font:400 17px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdk .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;list-style:none;margin:0;padding:0}\n.mgwdk .g>li{display:flex;flex-direction:column;margin:0;padding:28px;border-radius:24px;background:#FFFFFF;border:1px solid #E6E9EF}\n.mgwdk .g>li.pop{background:#1F3A68;border-color:#1F3A68;color:#FFFFFF}\n.mgwdk .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px}\n.mgwdk .hd i{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:#FFF4E8;color:#E8590C;font-size:19px}\n.mgwdk .pop .hd i{background:#E8590C;color:#FFFFFF}\n.mgwdk .hd span{padding:7px 11px;border-radius:999px;background:#F7B267;color:#141B2D;font:800 10.5px\/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}\n.mgwdk h3{margin:0 0 6px;font:900 23px\/1.15 Inter,sans-serif;letter-spacing:-.5px;color:inherit!important}\n.mgwdk .g>li>p{margin:0 0 18px;font:500 15px\/1.5 Inter,sans-serif;color:#5B6475}\n.mgwdk .pop>p{color:#C7D5EC!important}\n.mgwdk ul.it{list-style:none;margin:0 0 22px;padding:16px 0 0;border-top:1px solid #E6E9EF}\n.mgwdk .pop ul.it{border-color:rgba(255,255,255,.16)}\n.mgwdk ul.it li{display:flex;gap:10px;align-items:flex-start;margin:0;padding:6px 0;font:600 14.5px\/1.4 Inter,sans-serif}\n.mgwdk ul.it li i{flex:none;margin-top:2px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#E8590C;color:#FFFFFF;font-size:8px}\n.mgwdk .pr{margin-top:auto}\n.mgwdk .pr b{display:block;font:900 24px\/1 Inter,sans-serif;letter-spacing:-.5px}\n.mgwdk .pr small{display:block;margin:5px 0 14px;font:500 12.5px\/1.3 Inter,sans-serif;color:#9AA3B5}\n.mgwdk .pop .pr small{color:#C7D5EC}\n.mgwdk .pr a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:12px;border:1.5px solid #1F3A68;color:#1F3A68!important;font:800 14.5px\/1 Inter,sans-serif;text-decoration:none;transition:background .3s,color .3s}\n.mgwdk .pr a:hover{background:#1F3A68;color:#FFFFFF!important}\n.mgwdk .pop .pr a{background:#E8590C;border-color:#E8590C;color:#FFFFFF!important}\n.mgwdk .pop .pr a:hover{background:#C2410C}\n.mgwdk .no{display:flex;align-items:center;gap:10px;margin:22px 0 0;font:500 14.5px\/1.5 Inter,sans-serif;color:#5B6475}\n.mgwdk .no i{color:#E8590C}\n@media(max-width:1100px){.mgwdk .top{grid-template-columns:minmax(0,1fr);gap:20px}.mgwdk .g{grid-template-columns:minmax(0,1fr);max-width:560px}}\n@media(max-width:640px){.mgwdk h2{font-size:36px;letter-spacing:-1.2px}.mgwdk .g>li{padding:22px}}\n<\/style>\n<div class=\"mgwdk\">\n <div class=\"top\">\n  <div><p class=\"eb\">Nos formules<\/p><h2>Un web design <em>\u00e0 la mesure de votre projet<\/em><\/h2><\/div>\n  <div><p>Une page qui convertit, un site complet ou une application : le tarif d\u00e9pend du nombre d\u2019\u00e9crans, de la complexit\u00e9 des parcours et des livrables attendus.<\/p><\/div>\n <\/div>\n <ul class=\"g\">\n  <li><div class=\"hd\"><i class=\"fas fa-file-alt\" aria-hidden=\"true\"><\/i><\/div><h3>Landing page<\/h3><p>Une page unique, construite pour un objectif.<\/p><ul class=\"it\"><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Atelier objectifs et contenus<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Maquette ordinateur et mobile<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Appels \u00e0 l\u2019action optimis\u00e9s<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>2 s\u00e9ries de retours incluses<\/li><\/ul><div class=\"pr\"><b>Sur devis<\/b><small>Selon les contenus \u00e0 cr\u00e9er<\/small><a href=\"#contact\">Demander un devis <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a><\/div><\/li>\n  <li class=\"pop\"><div class=\"hd\"><i class=\"fas fa-desktop\" aria-hidden=\"true\"><\/i><span>Le plus demand\u00e9<\/span><\/div><h3>Design de site web<\/h3><p>Toutes les pages de votre site, de l\u2019UX \u00e0 l\u2019UI.<\/p><ul class=\"it\"><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Recherche UX et arborescence<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Wireframes de chaque page<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Maquettes UI sur Figma<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Prototype cliquable<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Int\u00e9gration WordPress en option<\/li><\/ul><div class=\"pr\"><b>Sur devis<\/b><small>Selon le nombre de pages<\/small><a href=\"#contact\">Demander un devis <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a><\/div><\/li>\n  <li><div class=\"hd\"><i class=\"fas fa-mobile-alt\" aria-hidden=\"true\"><\/i><\/div><h3>Application mobile<\/h3><p>Des \u00e9crans clairs, utilisables d\u2019une seule main.<\/p><ul class=\"it\"><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Parcours utilisateur complet<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>\u00c9crans iOS et Android<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Design system et composants<\/li><li><i class=\"fas fa-check\" aria-hidden=\"true\"><\/i>Fichiers pr\u00eats pour vos d\u00e9veloppeurs<\/li><\/ul><div class=\"pr\"><b>Sur devis<\/b><small>Selon le nombre d\u2019\u00e9crans<\/small><a href=\"#contact\">Demander un devis <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a><\/div><\/li>\n <\/ul>\n <p class=\"no\"><i class=\"fas fa-info-circle\" aria-hidden=\"true\"><\/i>Premier \u00e9change offert et devis clair et d\u00e9taill\u00e9 apr\u00e8s l\u2019\u00e9tude de votre projet.<\/p>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1b0e9f6f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1b0e9f6f\" data-element_type=\"section\" data-e-type=\"section\" id=\"pourquoi-nous\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1240bc71\" data-id=\"1240bc71\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2c650f4a elementor-invisible elementor-widget elementor-widget-html\" data-id=\"2c650f4a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Pourquoi nous choisir : engagements et chiffres ===== *\/\n.mgwdy{font-family:Inter,sans-serif;color:#141B2D}\n.mgwdy *{box-sizing:border-box}\n.mgwdy .w{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:center}\n.mgwdy .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mgwdy .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mgwdy h2{margin:0 0 16px;font:800 46px\/1.08 Inter,sans-serif;letter-spacing:-1.5px;color:#141B2D!important}\n.mgwdy h2 em{font:italic 600 1em\/1 Lora,Georgia,serif;letter-spacing:-.5px;color:#E8590C}\n.mgwdy .ld{margin:0 0 24px;font:400 16.5px\/1.7 Inter,sans-serif;color:#5B6475}\n.mgwdy .st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:18px;background:#1F3A68;overflow:hidden;margin:0 0 24px}\n.mgwdy .st span{padding:16px 12px;text-align:center;font:600 12px\/1.3 Inter,sans-serif;color:#C7D5EC}\n.mgwdy .st span+span{border-left:1px solid rgba(255,255,255,.16)}\n.mgwdy .st b{display:block;margin-bottom:5px;font:900 24px\/1 Inter,sans-serif;letter-spacing:-.6px;color:#FFFFFF}\n.mgwdy .ct{display:flex;flex-wrap:wrap;gap:12px}\n.mgwdy .ct a{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:14px;font:800 15px\/1 Inter,sans-serif;text-decoration:none;transition:background .3s,color .3s}\n.mgwdy .ct a.p{background:#E8590C;color:#FFFFFF!important}.mgwdy .ct a.p:hover{background:#C2410C}\n.mgwdy .ct a.s{border:1.5px solid #1F3A68;color:#1F3A68!important}.mgwdy .ct a.s:hover{background:#1F3A68;color:#FFFFFF!important}\n.mgwdy ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}\n.mgwdy ul li{margin:0;padding:24px;border-radius:20px;background:#FFFFFF;border:1px solid #E1D7CB}\n.mgwdy ul li:nth-child(even){transform:translateY(22px)}\n.mgwdy ul li i{width:46px;height:46px;margin:0 0 16px;border-radius:13px;display:grid;place-items:center;background:#EEF3FB;color:#1F3A68;font-size:17px}\n.mgwdy ul li:nth-child(2) i,.mgwdy ul li:nth-child(3) i{background:#FFF4E8;color:#E8590C}\n.mgwdy ul li b{display:block;margin:0 0 6px;font:800 17px\/1.25 Inter,sans-serif}\n.mgwdy ul li span{display:block;font:400 14.5px\/1.55 Inter,sans-serif;color:#5B6475}\n@media(max-width:1100px){.mgwdy .w{grid-template-columns:minmax(0,1fr);gap:40px}}\n@media(max-width:640px){.mgwdy h2{font-size:34px;letter-spacing:-1.1px}.mgwdy ul{grid-template-columns:minmax(0,1fr)}.mgwdy ul li:nth-child(n){transform:none}.mgwdy .st b{font-size:19px}.mgwdy .ct a{width:100%;justify-content:center}}\n<\/style>\n<div class=\"mgwdy\">\n <div class=\"w\">\n  <div>\n   <p class=\"eb\">Pourquoi nous choisir<\/p>\n   <h2>Pourquoi confier votre web design \u00e0 <em>My Grafik<\/em>&nbsp;?<\/h2>\n   <p class=\"ld\">Une \u00e9quipe \u00e0 Abidjan qui r\u00e9unit strat\u00e9gie, design UI\/UX et d\u00e9veloppement : vos interfaces sont belles, utiles et r\u00e9ellement int\u00e9gr\u00e9es.<\/p>\n   <div class=\"st\"><span><b>4,95\/5<\/b>avis clients<\/span><span><b>100 %<\/b>sur mesure<\/span><span><b>3<\/b>\u00e9crans couverts<\/span><\/div>\n   <div class=\"ct\"><a class=\"p\" href=\"#contact\">Parlons de mon projet <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"><\/i><\/a><a class=\"s\" href=\"https:\/\/wa.me\/2250160101002\" target=\"_blank\" rel=\"noopener\"><i class=\"fab fa-whatsapp\" aria-hidden=\"true\"><\/i> \u00c9crire sur WhatsApp<\/a><\/div>\n  <\/div>\n  <ul>\n   <li><i class=\"fas fa-fingerprint\" aria-hidden=\"true\"><\/i><b>Cr\u00e9ateur d\u2019identit\u00e9<\/b><span>Des interfaces fid\u00e8les \u00e0 votre marque, jamais un mod\u00e8le tout fait.<\/span><\/li>\n   <li><i class=\"fas fa-users\" aria-hidden=\"true\"><\/i><b>Centr\u00e9 sur vos utilisateurs<\/b><span>Chaque \u00e9cran part de leurs besoins et de leurs parcours r\u00e9els.<\/span><\/li>\n   <li><i class=\"fas fa-eye\" aria-hidden=\"true\"><\/i><b>Vous validez tout<\/b><span>Wireframes, maquettes puis prototype : rien n\u2019avance sans votre accord.<\/span><\/li>\n   <li><i class=\"fas fa-code\" aria-hidden=\"true\"><\/i><b>Design et code r\u00e9unis<\/b><span>Une m\u00eame \u00e9quipe con\u00e7oit et int\u00e8gre : aucune perte entre maquette et site.<\/span><\/li>\n  <\/ul>\n <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3ad0fcbf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3ad0fcbf\" data-element_type=\"section\" data-e-type=\"section\" id=\"contact\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-784d8c4a\" data-id=\"784d8c4a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-690362c6 elementor-widget elementor-widget-html\" data-id=\"690362c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.mgbm{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;white-space:nowrap;font-family:Inter,sans-serif}.mgbm-t{display:inline-flex;animation:mgbm 26s linear infinite}.mgbm a{display:inline-flex;align-items:center;gap:34px;padding-right:34px;font:900 clamp(56px,9vw,150px)\/1.05 Inter,sans-serif;letter-spacing:-.05em;color:#fff;text-decoration:none;transition:color .4s}.mgbm a:nth-child(even){color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.65)}.mgbm a i{font-style:normal;color:#141B2D;font-size:.5em}.mgbm:hover .mgbm-t{animation-play-state:paused}.mgbm a:hover{color:#141B2D;-webkit-text-stroke-color:#141B2D}@keyframes mgbm{to{transform:translateX(-50%)}}.pv-static .mgbm-t{animation:none}@media(prefers-reduced-motion:reduce){.mgbm-t{animation:none}}<\/style><div class=\"mgbm\"><div class=\"mgbm-t\"><a href=\"#contact\" data-cursor=\"Go\">Donnons vie \u00e0 votre interface <i>\u2726<\/i><\/a><a href=\"#contact\" data-cursor=\"Go\">Donnons vie \u00e0 votre interface <i>\u2726<\/i><\/a><a href=\"#contact\" data-cursor=\"Go\">Donnons vie \u00e0 votre interface <i>\u2726<\/i><\/a><a href=\"#contact\" data-cursor=\"Go\">Donnons vie \u00e0 votre interface <i>\u2726<\/i><\/a><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fa42460 elementor-widget elementor-widget-spacer\" data-id=\"6fa42460\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-5b555b3f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5b555b3f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-42 elementor-inner-column elementor-element elementor-element-755ea27e mg-sticky\" data-id=\"755ea27e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-738fae60 pv-h mg-split elementor-widget elementor-widget-heading\" data-id=\"738fae60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Pr\u00eat \u00e0 donner vie \u00e0 votre interface\u00a0?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ad6c5f1 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"4ad6c5f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Parlez-nous de votre projet, de vos utilisateurs et de vos objectifs : nous vous proposons une approche UI\/UX adapt\u00e9e, avec un devis clair et d\u00e9taill\u00e9.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61fcf65b elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-invisible elementor-widget elementor-widget-icon-list\" data-id=\"61fcf65b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:200}\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-check-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Premier \u00e9change offert<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-check-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Devis clair et d\u00e9taill\u00e9<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-check-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">R\u00e9ponse sous un jour ouvr\u00e9<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59e0dfe8 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"59e0dfe8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.mg5c{font-family:Inter,sans-serif;display:grid;gap:10px;margin-top:26px}\n.mg5c a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:#FFFFFF;color:#141B2D;text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}\n.mg5c a:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(20,27,45,.18)}\n.mg5c a:focus-visible{outline:3px solid #141B2D;outline-offset:2px}\n.mg5c i{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:17px;color:#FFFFFF;background:#141B2D}\n.mg5c a.w i{background:#25D366}\n.mg5c small{display:block;font:700 11.5px\/1.2 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#7A8394}\n.mg5c b{display:block;margin-top:3px;font:800 16px\/1.3 Inter,sans-serif;color:#141B2D}\n<\/style>\n<div class=\"mg5c\">\n <a class=\"w\" href=\"https:\/\/wa.me\/2250160101002\" target=\"_blank\" rel=\"noopener\"><i class=\"fab fa-whatsapp\" aria-hidden=\"true\"><\/i><span><small>WhatsApp<\/small><b>+225 01 60 10 10 02<\/b><\/span><\/a>\n <a href=\"tel:+2250544180002\"><i class=\"fas fa-phone-alt\" aria-hidden=\"true\"><\/i><span><small>T\u00e9l\u00e9phone<\/small><b>+225 05 44 18 00 02<\/b><\/span><\/a>\n <a href=\"mailto:contact@my-grafik.com\"><i class=\"fas fa-envelope\" aria-hidden=\"true\"><\/i><span><small>E-mail<\/small><b>contact@my-grafik.com<\/b><\/span><\/a>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3133f45b elementor-widget elementor-widget-spacer\" data-id=\"3133f45b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18641e2 elementor-align-left elementor-mobile-align-justify elementor-widget__width-auto elementor-widget-mobile__width-inherit mg-btn elementor-invisible elementor-widget elementor-widget-button\" data-id=\"18641e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:250}\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-lg\" href=\"https:\/\/wa.me\/2250160101002\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-whatsapp\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u00c9crire sur WhatsApp<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-58 elementor-inner-column elementor-element elementor-element-7a1b05e4 mg-formcard elementor-invisible\" data-id=\"7a1b05e4\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:150}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4ee5ac8b elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"4ee5ac8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;button_width&quot;:&quot;100&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"Web design UI\/UX \u2013 My Grafik\" aria-label=\"Web design UI\/UX \u2013 My Grafik\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"440\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"4ee5ac8b\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"Webdesign \u00e0 Abidjan : 5 \u00e9tapes pour une interface unique\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"440\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-nom elementor-col-50 elementor-sm-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-nom\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tNom\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[nom]\" id=\"form-field-nom\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"Votre nom\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-url elementor-field-group elementor-column elementor-field-group-site elementor-col-50 elementor-sm-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-site\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tSite actuel (si existant)\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"url\" name=\"form_fields[site]\" id=\"form-field-site\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"https:\/\/www.votre-site.ci\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-tel elementor-field-group elementor-column elementor-field-group-telephone elementor-col-50 elementor-sm-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-telephone\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tT\u00e9l\u00e9phone\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<input size=\"1\" type=\"tel\" name=\"form_fields[telephone]\" id=\"form-field-telephone\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"Votre t\u00e9l\u00e9phone\" required=\"required\" pattern=\"[0-9()#&amp;+*-=.]+\" title=\"Only numbers and phone characters (#, -, *, etc) are accepted.\">\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-50 elementor-sm-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tE-mail\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"vous@exemple.com\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-select elementor-field-group elementor-column elementor-field-group-projet elementor-col-50 elementor-sm-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-projet\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tVotre projet\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field elementor-select-wrapper remove-before \">\n\t\t\t<div class=\"select-caret-down-wrapper\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-caret-down\" viewBox=\"0 0 571.4 571.4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M571 393Q571 407 561 418L311 668Q300 679 286 679T261 668L11 418Q0 407 0 393T11 368 36 357H536Q550 357 561 368T571 393Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t\t<select name=\"form_fields[projet]\" id=\"form-field-projet\" class=\"elementor-field-textual elementor-size-md\" required=\"required\">\n\t\t\t\t\t\t\t\t\t<option value=\"Design de site internet\">Design de site internet<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Design d\u2019application mobile\">Design d\u2019application mobile<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Refonte UI\/UX d\u2019un site existant\">Refonte UI\/UX d\u2019un site existant<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Landing page\">Landing page<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Banni\u00e8res &amp; visuels web\">Banni\u00e8res &amp; visuels web<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Autre\">Autre<\/option>\n\t\t\t\t\t\t\t<\/select>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-select elementor-field-group elementor-column elementor-field-group-supports elementor-col-50 elementor-sm-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-supports\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\t\u00c9ch\u00e9ance\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field elementor-select-wrapper remove-before \">\n\t\t\t<div class=\"select-caret-down-wrapper\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-caret-down\" viewBox=\"0 0 571.4 571.4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M571 393Q571 407 561 418L311 668Q300 679 286 679T261 668L11 418Q0 407 0 393T11 368 36 357H536Q550 357 561 368T571 393Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t\t<select name=\"form_fields[supports]\" id=\"form-field-supports\" class=\"elementor-field-textual elementor-size-md\">\n\t\t\t\t\t\t\t\t\t<option value=\"D\u00e8s que possible\">D\u00e8s que possible<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Dans 1 \u00e0 3 mois\">Dans 1 \u00e0 3 mois<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Dans plus de 3 mois\">Dans plus de 3 mois<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"Je me renseigne\">Je me renseigne<\/option>\n\t\t\t\t\t\t\t<\/select>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100 elementor-sm-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-message\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tMessage\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<textarea class=\"elementor-field-textual elementor-field  elementor-size-md\" name=\"form_fields[message]\" id=\"form-field-message\" rows=\"4\" placeholder=\"Parlez-nous de votre activit\u00e9, des pages et fonctionnalit\u00e9s souhait\u00e9es, de vos d\u00e9lais\u2026\"><\/textarea>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-html elementor-field-group elementor-column elementor-field-group-note elementor-col-100 elementor-sm-100\">\n\t\t\t\t\t<p style='font-size:13.5px;line-height:1.6;color:#5B6475;margin:0'>Nous vous r\u00e9pondons sous un jour ouvr\u00e9. Pour une demande urgente, appelez-nous au <strong>+225 05 44 18 00 02<\/strong> ou \u00e9crivez-nous sur WhatsApp au <strong>+225 01 60 10 10 02<\/strong>.<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-md\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-arrow-right\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"><\/path><\/svg>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Demandez un devis<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-78350440 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78350440\" data-element_type=\"section\" data-e-type=\"section\" id=\"faq\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-42233ad7\" data-id=\"42233ad7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2640bc9f elementor-invisible elementor-widget elementor-widget-html\" data-id=\"2640bc9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== FAQ Visuels publicitaires \u2014 m\u00eame design que les autres pages ===== *\/\n.mg9fq{font-family:Inter,sans-serif;color:#141B2D;display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:64px;align-items:start}\n.mg9fq *{box-sizing:border-box}\n.mg9fq .l{position:sticky;top:110px}\n.mg9fq .eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 12.5px\/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#E8590C}\n.mg9fq .eb:before{content:\"\";width:34px;height:2px;background:#E8590C}\n.mg9fq h2{margin:0 0 18px;font:800 52px\/1.04 Inter,sans-serif;letter-spacing:-1.8px;color:#141B2D!important}\n.mg9fq .l>p:not(.eb){margin:0 0 26px;font:400 16px\/1.7 Inter,sans-serif;color:#5B6475}\n@media(max-width:1024px){.mg9fq{grid-template-columns:minmax(0,1fr);gap:36px}.mg9fq .l{position:static}}\n@media(max-width:640px){.mg9fq h2{font-size:36px;letter-spacing:-1.2px}}\n\n\/* ===== FAQ \u2014 v12 : liste num\u00e9rot\u00e9e \u00e9pur\u00e9e ===== *\/\n.mg8q{font-family:Inter,sans-serif;color:#141B2D;border-top:1px solid #E3E7ED}\n.mg8q details{border-bottom:1px solid #E3E7ED}\n.mg8q summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 40px;gap:14px;align-items:center;padding:24px 0;outline:none}\n.mg8q summary::-webkit-details-marker{display:none}\n.mg8q .n{font:800 13px\/1 Inter,sans-serif;letter-spacing:.06em;color:#B0B7C4;transition:color .3s}\n.mg8q h3{margin:0;font:700 19px\/1.4 Inter,sans-serif;letter-spacing:-.3px;color:#141B2D;transition:color .3s}\n.mg8q .ic{position:relative;width:40px;height:40px;border-radius:50%;border:1.5px solid #D9DEE7;transition:background .35s,border-color .35s,transform .45s cubic-bezier(.2,.8,.2,1)}\n.mg8q .ic:before,.mg8q .ic:after{content:\"\";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:#141B2D;transition:transform .45s cubic-bezier(.2,.8,.2,1),background .35s}\n.mg8q .ic:after{transform:rotate(90deg)}\n.mg8q summary:hover h3{color:#E8590C}\n.mg8q summary:hover .ic{border-color:#E8590C}\n.mg8q summary:focus-visible{box-shadow:inset 0 0 0 2px #F7862B;border-radius:10px}\n.mg8q details[open] .n,.mg8q details[open] h3{color:#E8590C}\n.mg8q details[open] .ic{background:#E8590C;border-color:#E8590C;transform:rotate(180deg)}\n.mg8q details[open] .ic:before{background:#fff}\n.mg8q details[open] .ic:after{transform:rotate(0);background:#fff}\n.mg8q .a{padding:0 54px 26px 58px;font:400 16px\/1.7 Inter,sans-serif;color:#5B6475}\n.mg8q .a p{margin:0 0 10px;color:#5B6475}.mg8q .a p:last-child{margin:0}\n.mg8q .a ul{margin:8px 0 0;padding-left:18px}.mg8q .a li{margin:0 0 6px;color:#5B6475}\n.mg8q .a strong{color:#141B2D}\n.mg8q details[open] .a{animation:mg8q-in .45s cubic-bezier(.2,.8,.2,1)}\n@keyframes mg8q-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}\n@media(max-width:600px){.mg8q summary{grid-template-columns:30px minmax(0,1fr) 34px;gap:10px;padding:20px 0}.mg8q h3{font-size:16.5px}.mg8q .ic{width:34px;height:34px}.mg8q .a{padding:0 0 22px 40px;font-size:15px}}\n@media(prefers-reduced-motion:reduce){.mg8q *{transition:none!important;animation:none!important}}\n\n.mg8h{font-family:Inter,sans-serif;margin-top:8px;padding:26px;border-radius:24px;background:#141B2D;color:#FFFFFF}\n.mg8h .mg8h-t{display:flex;align-items:center;gap:12px;margin-bottom:10px}\n.mg8h .mg8h-t i{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:17px;color:#F7862B;background:rgba(247,134,43,.15)}\n.mg8h .mg8h-t b{font:800 18px\/1.3 Inter,sans-serif;color:#FFFFFF}\n.mg8h p{margin:0 0 18px;font:400 15px\/1.6 Inter,sans-serif;color:#C9D1E0}\n.mg8h .mg8h-b{display:flex;flex-wrap:wrap;gap:10px}\n.mg8h .mg8h-b a{display:inline-flex;align-items:center;gap:9px;padding:13px 18px;border-radius:999px;font:800 14.5px Inter,sans-serif;text-decoration:none;transition:background .3s,color .3s,border-color .3s}\n.mg8h .mg8h-b a.w{background:#E8590C;color:#FFFFFF}.mg8h .mg8h-b a.w:hover{background:#FFFFFF;color:#141B2D}\n.mg8h .mg8h-b a.c{border:1.5px solid #3A4766;color:#FFFFFF}.mg8h .mg8h-b a.c:hover{border-color:#FFFFFF}\n.mg8h .mg8h-b a:focus-visible{outline:3px solid #F7862B;outline-offset:2px}\n@media(max-width:480px){.mg8h .mg8h-b a{flex:1 1 100%;justify-content:center}}\n<\/style>\n<div class=\"mg9fq\">\n <div class=\"l\">\n  <p class=\"eb\">FAQ \u00b7 Web design<\/p>\n  <h2>Questions fr\u00e9quentes<\/h2>\n  <p>Tout ce qu\u2019il faut savoir avant de lancer votre projet de web design avec My Grafik.<\/p>\n<div class=\"mg8h\">\n <div class=\"mg8h-t\"><i class=\"fas fa-headset\" aria-hidden=\"true\"><\/i><b>Votre question n\u2019est pas dans la liste&nbsp;?<\/b><\/div>\n <p>\u00c9crivez-nous : notre \u00e9quipe vous r\u00e9pond sous 24 h ouvr\u00e9es.<\/p>\n <div class=\"mg8h-b\"><a class=\"w\" href=\"https:\/\/wa.me\/2250160101002\" target=\"_blank\" rel=\"noopener\"><i class=\"fab fa-whatsapp\" aria-hidden=\"true\"><\/i>WhatsApp<\/a><a class=\"c\" href=\"tel:+2250544180002\"><i class=\"fas fa-phone-alt\" aria-hidden=\"true\"><\/i>Appeler<\/a><a class=\"c\" href=\"mailto:contact@my-grafik.com\"><i class=\"fas fa-envelope\" aria-hidden=\"true\"><\/i>E-mail<\/a><\/div>\n<\/div>\n <\/div>\n <div class=\"r\">\n<!-- FAQ : un bloc <details> par question. Ajoutez \u00ab open \u00bb sur <details> pour l\u2019ouvrir par d\u00e9faut.\n     Le balisage FAQPage (en bas) aide Google \u00e0 afficher vos questions : gardez-le synchronis\u00e9 avec le texte. -->\n<div class=\"mg8q\">\n <details open><summary><span class=\"n\">01<\/span><h3>Quel est le r\u00f4le d\u2019un web designer ?<\/h3><span class=\"ic\" aria-hidden=\"true\"><\/span><\/summary><div class=\"a\"><p>Le web designer con\u00e7oit l\u2019apparence et l\u2019ergonomie d\u2019un site ou d\u2019une application. Il organise les contenus, dessine les <strong>wireframes<\/strong> puis les <strong>maquettes graphiques<\/strong> (couleurs, typographies, visuels, boutons) et veille \u00e0 ce que chaque \u00e9cran soit clair, coh\u00e9rent avec votre marque et facile \u00e0 utiliser sur ordinateur comme sur mobile.<\/p><\/div><\/details>\n <details><summary><span class=\"n\">02<\/span><h3>Quel logiciel utilisez-vous ?<\/h3><span class=\"ic\" aria-hidden=\"true\"><\/span><\/summary><div class=\"a\"><p>Au sein de notre agence My Grafik, nous utilisons des outils professionnels d\u00e9di\u00e9s \u00e0 la conception de maquettes et au prototypage de sites internet. Pour garantir des cr\u00e9ations modernes et pr\u00e9cises, nous avons choisi de travailler principalement avec <strong>Figma<\/strong>.<\/p><p>Bien qu\u2019il existe d\u2019autres solutions performantes, comme Sketch ou Adobe XD, nous privil\u00e9gions un outil que nous ma\u00eetrisons parfaitement. Cette approche nous permet de <strong>concevoir des maquettes de qualit\u00e9<\/strong>, de fluidifier notre processus cr\u00e9atif et d\u2019optimiser la collaboration entre les diff\u00e9rents intervenants de chaque projet.<\/p><p>Cependant, la qualit\u00e9 d\u2019un web design ne repose pas uniquement sur les logiciels utilis\u00e9s. Quelle que soit la complexit\u00e9 du projet, nous veillons \u00e0 produire des <strong>maquettes claires, structur\u00e9es et intuitives<\/strong>, facilitant leur compr\u00e9hension et leur int\u00e9gration technique pour assurer un d\u00e9veloppement fluide et optimal de votre site internet.<\/p><\/div><\/details>\n <details><summary><span class=\"n\">03<\/span><h3>Quelle est la diff\u00e9rence entre UI et UX ?<\/h3><span class=\"ic\" aria-hidden=\"true\"><\/span><\/summary><div class=\"a\"><p>L\u2019<strong>UX (exp\u00e9rience utilisateur)<\/strong> concerne la structure et le parcours : o\u00f9 se trouve l\u2019information, combien de clics pour agir, si la navigation est logique. L\u2019<strong>UI (interface utilisateur)<\/strong> concerne l\u2019habillage : couleurs, typographies, ic\u00f4nes, boutons et visuels. Un bon web design r\u00e9unit les deux.<\/p><\/div><\/details>\n <details><summary><span class=\"n\">04<\/span><h3>Pourquoi faire une maquette de mon site internet ?<\/h3><span class=\"ic\" aria-hidden=\"true\"><\/span><\/summary><div class=\"a\"><p>La maquette vous permet de <strong>voir et valider votre site avant son d\u00e9veloppement<\/strong>. Vous pouvez la commenter, tester un prototype cliquable et demander des ajustements tant que les modifications sont simples et rapides. Elle sert ensuite de r\u00e9f\u00e9rence pr\u00e9cise aux d\u00e9veloppeurs, ce qui \u00e9vite les malentendus et les retouches co\u00fbteuses.<\/p><\/div><\/details>\n <details><summary><span class=\"n\">05<\/span><h3>Combien de temps faut-il pour concevoir les maquettes ?<\/h3><span class=\"ic\" aria-hidden=\"true\"><\/span><\/summary><div class=\"a\"><p>Cela d\u00e9pend du nombre de pages et d\u2019\u00e9crans. Pour un site vitrine, comptez g\u00e9n\u00e9ralement <strong>1 \u00e0 3 semaines<\/strong> entre l\u2019atelier de d\u00e9couverte et la validation des maquettes ; une application ou une plateforme demande davantage. Un planning pr\u00e9cis vous est communiqu\u00e9 avec le devis.<\/p><\/div><\/details>\n <details><summary><span class=\"n\">06<\/span><h3>Quel est le co\u00fbt d\u2019un site web ?<\/h3><span class=\"ic\" aria-hidden=\"true\"><\/span><\/summary><div class=\"a\"><p>Le prix d\u00e9pend du type de site (vitrine, e-commerce, application), du nombre de pages ou d\u2019\u00e9crans, des fonctionnalit\u00e9s et du niveau de personnalisation du design. Apr\u00e8s un premier \u00e9change, nous vous remettons un <strong>devis gratuit, clair et d\u00e9taill\u00e9<\/strong>.<\/p><\/div><\/details>\n <details><summary><span class=\"n\">07<\/span><h3>Pourquoi faire appel \u00e0 une agence web design ?<\/h3><span class=\"ic\" aria-hidden=\"true\"><\/span><\/summary><div class=\"a\"><p>Une agence r\u00e9unit des comp\u00e9tences compl\u00e9mentaires (UX, UI, r\u00e9daction, int\u00e9gration) et une m\u00e9thode \u00e9prouv\u00e9e. Vous obtenez un design <strong>sur mesure, coh\u00e9rent avec votre marque et pens\u00e9 pour convertir<\/strong>, plut\u00f4t qu\u2019un mod\u00e8le g\u00e9n\u00e9rique, avec un interlocuteur unique pour suivre votre projet.<\/p><\/div><\/details>\n <details><summary><span class=\"n\">08<\/span><h3>Quelles sont les comp\u00e9tences d\u2019une agence webdesign ?<\/h3><span class=\"ic\" aria-hidden=\"true\"><\/span><\/summary><div class=\"a\"><p>Recherche utilisateur et ergonomie (UX), conception d\u2019interfaces (UI), cr\u00e9ation de <strong>design systems<\/strong>, prototypage, responsive design, accessibilit\u00e9, connaissance du r\u00e9f\u00e9rencement et des contraintes techniques d\u2019int\u00e9gration. Chez My Grafik, ces comp\u00e9tences s\u2019ajoutent \u00e0 notre expertise en identit\u00e9 visuelle et en branding.<\/p><\/div><\/details>\n<\/div>\n<script type=\"application\/ld+json\">{\"@context\": \"https:\/\/schema.org\", \"@type\": \"FAQPage\", \"mainEntity\": [{\"@type\": \"Question\", \"name\": \"Quel est le r\u00f4le d\u2019un web designer ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Le web designer con\u00e7oit l\u2019apparence et l\u2019ergonomie d\u2019un site ou d\u2019une application. Il organise les contenus, dessine les wireframes puis les maquettes graphiques (couleurs, typographies, visuels, boutons) et veille \u00e0 ce que chaque \u00e9cran soit clair, coh\u00e9rent avec votre marque et facile \u00e0 utiliser sur ordinateur comme sur mobile.\"}}, {\"@type\": \"Question\", \"name\": \"Quel logiciel utilisez-vous ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Au sein de notre agence My Grafik, nous utilisons des outils professionnels d\u00e9di\u00e9s \u00e0 la conception de maquettes et au prototypage de sites internet. Pour garantir des cr\u00e9ations modernes et pr\u00e9cises, nous avons choisi de travailler principalement avec Figma. Bien qu\u2019il existe d\u2019autres solutions performantes, comme Sketch ou Adobe XD, nous privil\u00e9gions un outil que nous ma\u00eetrisons parfaitement. Cette approche nous permet de concevoir des maquettes de qualit\u00e9, de fluidifier notre processus cr\u00e9atif et d\u2019optimiser la collaboration entre les diff\u00e9rents intervenants de chaque projet. Cependant, la qualit\u00e9 d\u2019un web design ne repose pas uniquement sur les logiciels utilis\u00e9s. Quelle que soit la complexit\u00e9 du projet, nous veillons \u00e0 produire des maquettes claires, structur\u00e9es et intuitives, facilitant leur compr\u00e9hension et leur int\u00e9gration technique pour assurer un d\u00e9veloppement fluide et optimal de votre site internet.\"}}, {\"@type\": \"Question\", \"name\": \"Quelle est la diff\u00e9rence entre UI et UX ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"L\u2019 UX (exp\u00e9rience utilisateur) concerne la structure et le parcours : o\u00f9 se trouve l\u2019information, combien de clics pour agir, si la navigation est logique. L\u2019 UI (interface utilisateur) concerne l\u2019habillage : couleurs, typographies, ic\u00f4nes, boutons et visuels. Un bon web design r\u00e9unit les deux.\"}}, {\"@type\": \"Question\", \"name\": \"Pourquoi faire une maquette de mon site internet ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"La maquette vous permet de voir et valider votre site avant son d\u00e9veloppement. Vous pouvez la commenter, tester un prototype cliquable et demander des ajustements tant que les modifications sont simples et rapides. Elle sert ensuite de r\u00e9f\u00e9rence pr\u00e9cise aux d\u00e9veloppeurs, ce qui \u00e9vite les malentendus et les retouches co\u00fbteuses.\"}}, {\"@type\": \"Question\", \"name\": \"Combien de temps faut-il pour concevoir les maquettes ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Cela d\u00e9pend du nombre de pages et d\u2019\u00e9crans. Pour un site vitrine, comptez g\u00e9n\u00e9ralement 1 \u00e0 3 semaines entre l\u2019atelier de d\u00e9couverte et la validation des maquettes ; une application ou une plateforme demande davantage. Un planning pr\u00e9cis vous est communiqu\u00e9 avec le devis.\"}}, {\"@type\": \"Question\", \"name\": \"Quel est le co\u00fbt d\u2019un site web ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Le prix d\u00e9pend du type de site (vitrine, e-commerce, application), du nombre de pages ou d\u2019\u00e9crans, des fonctionnalit\u00e9s et du niveau de personnalisation du design. Apr\u00e8s un premier \u00e9change, nous vous remettons un devis gratuit, clair et d\u00e9taill\u00e9.\"}}, {\"@type\": \"Question\", \"name\": \"Pourquoi faire appel \u00e0 une agence web design ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Une agence r\u00e9unit des comp\u00e9tences compl\u00e9mentaires (UX, UI, r\u00e9daction, int\u00e9gration) et une m\u00e9thode \u00e9prouv\u00e9e. Vous obtenez un design sur mesure, coh\u00e9rent avec votre marque et pens\u00e9 pour convertir, plut\u00f4t qu\u2019un mod\u00e8le g\u00e9n\u00e9rique, avec un interlocuteur unique pour suivre votre projet.\"}}, {\"@type\": \"Question\", \"name\": \"Quelles sont les comp\u00e9tences d\u2019une agence webdesign ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Recherche utilisateur et ergonomie (UX), conception d\u2019interfaces (UI), cr\u00e9ation de design systems, prototypage, responsive design, accessibilit\u00e9, connaissance du r\u00e9f\u00e9rencement et des contraintes techniques d\u2019int\u00e9gration. Chez My Grafik, ces comp\u00e9tences s\u2019ajoutent \u00e0 notre expertise en identit\u00e9 visuelle et en branding.\"}}]}<\/script>\n<script>\n(function(){document.querySelectorAll('.mg8q:not([data-ok])').forEach(function(w){w.setAttribute('data-ok',1);\n \/* une seule r\u00e9ponse ouverte \u00e0 la fois *\/\n var D=[].slice.call(w.querySelectorAll('details'));D.forEach(function(d){d.addEventListener('toggle',function(){if(d.open)D.forEach(function(o){if(o!==d)o.open=false;});});});\n});})();\n<\/script>\n <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MY&nbsp;GRAFIKCr\u00e9ateur d\u2019identit\u00e9 4,95 \/ 5 avis clientsWeb design UI\/UX \u00e0 Abidjan Web design. Des interfaces captivantes, des exp\u00e9riences inoubliables. Webdesign \u00e0 Abidjan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-440","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/my-grafik.com\/en\/wp-json\/wp\/v2\/pages\/440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my-grafik.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/my-grafik.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/my-grafik.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/my-grafik.com\/en\/wp-json\/wp\/v2\/comments?post=440"}],"version-history":[{"count":7,"href":"https:\/\/my-grafik.com\/en\/wp-json\/wp\/v2\/pages\/440\/revisions"}],"predecessor-version":[{"id":9315,"href":"https:\/\/my-grafik.com\/en\/wp-json\/wp\/v2\/pages\/440\/revisions\/9315"}],"wp:attachment":[{"href":"https:\/\/my-grafik.com\/en\/wp-json\/wp\/v2\/media?parent=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}