{"id":13038,"date":"2026-10-19T15:37:24","date_gmt":"2026-10-19T13:37:24","guid":{"rendered":"https:\/\/www.freshorganicmotion.com\/?page_id=13038"},"modified":"2026-10-20T16:00:22","modified_gmt":"2026-10-20T14:00:22","slug":"mascotte-application-mobile","status":"publish","type":"page","link":"https:\/\/www.freshorganicmotion.com\/en\/mascotte-application-mobile\/","title":{"rendered":"Dibby Digibadge mascotte application mobile"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13038\" class=\"elementor elementor-13038\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1eb2d15 e-con-full e-flex e-con e-parent\" data-id=\"1eb2d15\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ee3f19 elementor-widget elementor-widget-html\" data-id=\"2ee3f19\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FOM | \/mascotte-application-mobile\/ | BLOC 1 sur 6 : widget HTML Elementor n&#176;1 (Styles + hero + le besoin) -->\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\">\n<style>\n@font-face{font-family:'Dotties Vanilla Black';src:url('https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/DottiesVanilla-Black.woff2') format('opentype');font-display:swap}\n.fom-dg{--cream:#FFF4F2;--rose:#FFD8DE;--ink:#582b28;--ink-soft:#8B4A3A;--menthe:#00c4b4;--corail:#FF5A3C;--violet:#b08fcc;\n  --jaune:#F5C518;--teal:#1B4A4B;--white:#FFFFFF;--lavande:#EFE4F7;--menthe-p:#D6F5F2;\n  --db-violet:#561de1;--db-rose:#ea33ed;--db-vert:#a6cc40;--db-lav:#F1ECFF;\n  --display:\"Dotties Vanilla Black\",\"Tajawal\",system-ui,sans-serif;--sans:\"Tajawal\",system-ui,-apple-system,sans-serif;\n  --ease:cubic-bezier(.16,1,.3,1);--r:22px;--r-xl:34px;--pill:100px;\n  background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;\n  -webkit-font-smoothing:antialiased;overflow:hidden;position:relative}\n.fom-dg *,.fom-dg *::before,.fom-dg *::after{box-sizing:border-box}\n.fom-dg h1,.fom-dg h2,.fom-dg h3,.fom-dg p,.fom-dg ul,.fom-dg ol,.fom-dg li,.fom-dg figure,.fom-dg blockquote{margin:0;padding:0}\n.fom-dg li{list-style:none}\n.fom-dg h1,.fom-dg h2,.fom-dg h3{word-break:normal;overflow-wrap:normal;hyphens:manual;text-transform:none;letter-spacing:0}\n.fom-dg ul,.fom-dg ol{list-style:none}\n.fom-dg a{color:inherit}\n.fom-dg img{max-width:100%;display:block;height:auto}\n.fom-dg .w{max-width:1160px;margin-inline:auto;padding-inline:24px;position:relative;z-index:1}\n.fom-dg section{padding:clamp(64px,9vw,112px) 0;position:relative}\n.fom-dg h1,.fom-dg h2,.fom-dg h3{font-family:var(--display);line-height:1.1;font-weight:900;color:var(--ink)}\n.fom-dg h1{font-size:clamp(2.2rem,4.2vw,3.3rem);margin-bottom:24px}\n.fom-dg h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:22px}\n.fom-dg h3{font-size:clamp(1.25rem,1.9vw,1.5rem);margin-bottom:10px}\n.fom-dg p{margin-bottom:16px}.fom-dg p:last-child{margin-bottom:0}\n.fom-dg .lead{font-size:clamp(1.06rem,1.5vw,1.22rem);color:var(--ink-soft);max-width:58ch}\n.fom-dg .center{text-align:center}.fom-dg .center .lead{margin-inline:auto}\n.fom-dg .hl{padding:0 .1em;margin:0 -.1em;background:linear-gradient(transparent 58%,rgba(0,196,180,.34) 58%);-webkit-box-decoration-break:clone;box-decoration-break:clone}\n.fom-dg .hl.j{background:linear-gradient(transparent 58%,rgba(245,197,24,.45) 58%)}\n.fom-dg .pill{display:inline-flex;align-items:center;gap:12px;background:var(--white);border-radius:var(--pill);padding:8px 18px 7px;font-weight:800;font-size:.86rem;line-height:1.35;letter-spacing:.02em;margin-bottom:24px}\n.fom-dg .pill::before{content:\"\";width:10px;height:10px;border-radius:50%;background:var(--corail);flex:none}\n.fom-dg .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}\n.fom-dg .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;border-radius:var(--pill);font-family:var(--sans);font-weight:800;font-size:1.06rem;line-height:1.2;text-decoration:none;\n  background:var(--corail);color:var(--cream);border:0;box-shadow:0 6px 0 var(--ink);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s}\n.fom-dg .btn:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}\n.fom-dg .btn.ghost{background:var(--white);color:var(--ink)}\n.fom-dg :focus-visible{outline:2px solid var(--menthe);outline-offset:3px}\n.fom-dg .todo{background:repeating-linear-gradient(-45deg,#FFF3B8 0 12px,#FFEA8A 12px 24px);border-radius:14px;padding:12px 16px;font-size:.92rem;font-weight:700;color:var(--ink)}\n.fom-dg .todo::before{content:\"\\0000c0 FOURNIR \/ VALIDER \\0000b7 \";font-weight:900;letter-spacing:.04em}\n\n\/* HERO *\/\n.fom-dg .hero{padding-top:calc(clamp(40px,6vw,84px) + 20px)}\n.fom-dg .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}\n.fom-dg .chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(40px,6vw,72px)}\n.fom-dg .chiffre{border-radius:var(--r);padding:18px 16px 14px;font-weight:800;line-height:1.3;font-size:.95rem}\n.fom-dg .chiffre b{display:block;font-family:var(--display);font-size:2.1rem;line-height:1;margin-bottom:6px}\n.fom-dg .chiffre:nth-child(1){background:var(--rose)}.fom-dg .chiffre:nth-child(2){background:var(--lavande)}\n.fom-dg .chiffre:nth-child(3){background:var(--menthe-p)}.fom-dg .chiffre:nth-child(4){background:#FFF0B8}\n\n\/* SC\\0000c8NES DIBBY *\/\n.fom-dg .scene-db{position:relative;background:var(--db-lav);border-radius:var(--r-xl);overflow:hidden;touch-action:manipulation}\n.fom-dg .scene-db::after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:20%;background:var(--db-vert);opacity:.3;z-index:0;transition:height .6s ease}\n.fom-dg .scene-db.crowd::after{height:56%}\n.fom-dg .scene-hero{aspect-ratio:1\/1.02;max-width:520px;width:100%;justify-self:center}\n.fom-dg .scene-jeu{height:clamp(520px,74vh,760px)}\n.fom-dg .axo{position:absolute;cursor:pointer;-webkit-tap-highlight-color:transparent}\n.fom-dg .axo svg{display:block;width:100%;height:auto;overflow:visible}\n.fom-dg .axo.main{width:min(440px,74%);left:50%;bottom:7%;transform:translateX(-50%);z-index:340;transition:width .5s cubic-bezier(.3,1.6,.5,1)}\n.fom-dg .scene-db.crowd .axo.main{width:min(250px,28%);bottom:1%;z-index:398}\n.fom-dg .scene-hero .axo.main{width:min(400px,68%);bottom:8%}\n.fom-dg .nuage{position:absolute;z-index:1;pointer-events:none;animation:dgNuage 10s ease-in-out infinite alternate}\n.fom-dg .nuage svg{width:100%;height:auto;display:block}\n.fom-dg .scene-hero .n1{top:6%;right:5%;width:24%}\n.fom-dg .scene-hero .n2{top:24%;left:5%;width:15%;animation-duration:13s;animation-delay:-5s}\n.fom-dg .scene-jeu .n1{top:8%;left:8%;width:15%}\n.fom-dg .scene-jeu .n2{top:18%;right:10%;width:10%;animation-duration:13s;animation-delay:-5s}\n@keyframes dgNuage{from{transform:translateX(0)}to{transform:translateX(22px)}}\n.fom-dg .astuce{position:absolute;top:18px;left:18px;z-index:600;background:var(--db-violet);color:#fff;font-weight:800;font-size:.9rem;border-radius:var(--pill);padding:8px 16px 6px;pointer-events:none;transform:rotate(-3deg)}\n.fom-dg .db-logo{position:absolute;top:18px;right:18px;z-index:600;width:120px}\n\n\/* BESOIN *\/\n.fom-dg .besoin{background:var(--white)}\n.fom-dg .besoin .papier{background:none;padding:0;border-radius:0}\n.fom-dg .two{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}\n.fom-dg .papier{background:var(--white);border-radius:var(--r-xl);padding:clamp(26px,4vw,44px)}\n.fom-dg .bulle{display:block;position:relative;margin:26px 0 8px;padding:22px 26px;background:var(--jaune);border-radius:26px;font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.25;color:var(--ink)}\n.fom-dg .bulle::after{content:\"\";position:absolute;left:46px;bottom:-10px;width:26px;height:26px;background:var(--jaune);transform:rotate(45deg);border-radius:0 0 6px 0}\n.fom-dg .bulle small{display:block;font-family:var(--sans);font-size:.85rem;font-weight:700;margin-top:8px}\n.fom-dg .besoins{display:grid;gap:16px;margin-top:14px}\n.fom-dg .besoins li{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;background:var(--bg);border-radius:var(--r);padding:20px 22px;line-height:1.5;transition:transform .25s var(--ease)}\n.fom-dg .besoins li:nth-child(odd){transform:rotate(-1.2deg)}.fom-dg .besoins li:nth-child(even){transform:rotate(1.2deg)}\n.fom-dg .besoins li:hover{transform:rotate(0) translateY(-4px)}\n.fom-dg .besoins .n{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-family:var(--display);font-size:1.6rem;color:var(--cream);background:var(--ink)}\n.fom-dg .besoins b{display:block;font-family:var(--display);font-size:1.25rem;line-height:1.15;margin-bottom:4px}\n\n\/* COULISSES *\/\n.fom-dg .frise{display:grid;gap:clamp(48px,7vw,88px);margin-top:clamp(36px,5vw,64px)}\n.fom-dg .jalon{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);align-items:center}\n.fom-dg .jalon:nth-child(odd){grid-template-columns:1.2fr .8fr}\n.fom-dg .jalon:nth-child(odd)>:last-child{order:-1}\n.fom-dg .jalon:last-child{grid-template-columns:1fr;text-align:center;justify-items:center}\n.fom-dg .jalon:last-child>:last-child{order:0;width:100%;max-width:900px}\n.fom-dg .jalon:last-child p{max-width:60ch;margin-inline:auto}\n.fom-dg .quand{display:inline-block;background:var(--ink);color:var(--cream);font-family:var(--display);font-size:1.35rem;line-height:1;border-radius:var(--r);padding:12px 18px 8px;transform:rotate(-3deg);margin-bottom:16px}\n.fom-dg .jalon:nth-child(3n+2) .quand{background:var(--corail);transform:rotate(2deg)}\n.fom-dg .jalon:nth-child(3n) .quand{background:var(--menthe)}\n.fom-dg .planche{display:grid;gap:clamp(14px,2vw,24px);align-items:center}\n.fom-dg .planche.deux{grid-template-columns:1fr 1fr}\n.fom-dg .planche.trois{grid-template-columns:repeat(3,1fr)}\n.fom-dg .feuille{position:relative;background:var(--white);border-radius:14px;padding:12px 12px 10px;transform:rotate(-2deg);transition:transform .3s var(--ease)}\n.fom-dg .feuille:nth-child(even){transform:rotate(2.5deg)}\n.fom-dg .feuille:hover{transform:rotate(0) scale(1.04);z-index:2}\n.fom-dg .feuille::before{content:\"\";position:absolute;width:72px;height:22px;background:rgba(245,197,24,.8);top:-11px;left:50%;transform:translateX(-50%) rotate(-4deg)}\n.fom-dg .feuille img{width:100%;border-radius:8px}\n.fom-dg figcaption{font-weight:800;font-size:.9rem;text-align:center;margin-top:8px;line-height:1.3}\n.fom-dg .bulle-brief{max-width:440px;justify-self:center;width:100%}\n.fom-dg .bulle-brief .bulle{margin:0}\n.fom-dg .pose{background:var(--db-lav);border-radius:var(--r);padding:16px 12px 12px}\n.fom-dg .pose img{width:100%;aspect-ratio:1;object-fit:contain}\n\n.fom-dg .depart{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);align-items:start;background:var(--white);border-radius:var(--r-xl);padding:clamp(24px,4vw,44px);margin-top:clamp(32px,5vw,56px);max-width:960px;margin-inline:auto}\n.fom-dg .depart .quand{background:var(--violet);margin:4px 0 0}\n.fom-dg .visio{display:inline-block;background:var(--menthe-p);border-radius:var(--r);padding:10px 16px 8px;font-weight:700;font-size:.95rem;line-height:1.45}\n.fom-dg .visio::before{content:\"\\0025cf \";color:var(--corail)}\n\n\/* EN ACTION *\/\n.fom-dg .action{background:var(--white)}\n.fom-dg .captures{display:grid;gap:28px;margin-top:40px}\n.fom-dg .capture{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,4vw,48px);align-items:center}\n.fom-dg .capture:nth-child(even){grid-template-columns:.75fr 1.25fr}\n.fom-dg .capture:nth-child(even) .ecran{order:2}\n.fom-dg .ecran{background:var(--db-lav);border-radius:var(--r-xl);padding:clamp(10px,1.6vw,18px);transform:rotate(-1deg)}\n.fom-dg .capture:nth-child(even) .ecran{transform:rotate(1deg)}\n.fom-dg .ecran img{border-radius:20px;width:100%}\n.fom-dg .capture .tag{display:inline-block;background:var(--db-violet);color:#fff;border-radius:var(--pill);padding:5px 14px 3px;font-weight:800;font-size:.82rem;letter-spacing:.04em;margin-bottom:12px}\n.fom-dg .source{font-size:.9rem;color:var(--ink-soft);margin-top:26px}\n\n\/* JEU : console *\/\n.fom-dg .jeu{background:#160E38;color:#fff;overflow:hidden}\n.fom-dg .jeu::before,.fom-dg .jeu::after{content:\"\";position:absolute;border-radius:50%;z-index:0}\n.fom-dg .jeu::before{width:520px;height:520px;left:-180px;top:-200px;background:#2A1B6E}\n.fom-dg .jeu::after{width:380px;height:380px;right:-140px;bottom:-160px;background:#3B1470}\n.fom-dg .jeu h2{color:#fff}\n.fom-dg .jeu .lead{color:rgba(255,255,255,.78);margin-inline:auto}\n.fom-dg .tag-jeu{display:inline-block;background:var(--db-vert);color:#1d1d2b;font:700 .8rem\/1 \"Poppins\",var(--sans);text-transform:uppercase;letter-spacing:.08em;padding:10px 18px 9px;border-radius:var(--pill);margin-bottom:18px;transform:rotate(-2deg)}\n.fom-dg .console{display:grid;grid-template-columns:clamp(96px,10vw,132px) 1fr clamp(96px,10vw,132px);max-width:1100px;margin:clamp(32px,5vw,56px) auto 0;box-shadow:0 18px 0 rgba(0,0,0,.25);border-radius:70px}\n.fom-dg .manette{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:22px;padding:28px 10px}\n.fom-dg .manette.g{background:var(--db-rose);border-radius:70px 0 0 70px}\n.fom-dg .manette.d{background:var(--db-vert);border-radius:0 70px 70px 0}\n.fom-dg .ecran-console{background:#1d1d2b;padding:16px}\n.fom-dg .scene-jeu{background:#CFE6FF;border-radius:14px;height:clamp(440px,60vh,640px)}\n.fom-dg .scene-jeu::after{display:none}\n.fom-dg .plaine{position:absolute;left:0;right:0;bottom:0;width:100%;height:72%;z-index:0}\n.fom-dg .stick{width:58px;height:58px;border-radius:50%;background:#1d1d2b;box-shadow:inset 0 -7px 0 #000,0 5px 0 rgba(0,0,0,.25)}\n.fom-dg .compteur-ecran{background:#1d1d2b;color:#fff;border-radius:16px;padding:10px 12px 8px;text-align:center;font-family:\"Poppins\",var(--sans);min-width:78px;line-height:1.1}\n.fom-dg .compteur-ecran small{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;opacity:.7}\n.fom-dg .compteur-ecran span{font-weight:700;font-size:1.6rem;color:var(--db-vert)}\n.fom-dg .console button{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;-webkit-tap-highlight-color:transparent}\n.fom-dg .console button b{font:700 .62rem\/1 \"Poppins\",var(--sans);text-transform:uppercase;letter-spacing:.06em;color:#1d1d2b}\n.fom-dg .manette.g button b{color:#fff}\n.fom-dg .pad{display:grid;grid-template-columns:auto auto;gap:12px 12px;justify-items:center}\n.fom-dg .bt.haut{grid-column:1\/-1}\n.fom-dg .bt i{font-style:normal;width:50px;height:50px;border-radius:50%;background:#1d1d2b;color:#fff;font:700 16px\/1 system-ui,sans-serif;display:grid;place-items:center;box-shadow:0 5px 0 rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s}\n.fom-dg .bt.haut i{width:58px;height:58px;font-size:19px;background:#fff;color:#1d1d2b}\n.fom-dg .bt:hover i{transform:translateY(-2px);box-shadow:0 7px 0 rgba(0,0,0,.35)}\n.fom-dg .bt:active i{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.35)}\n.fom-dg .switch i{position:relative;width:60px;height:34px;border-radius:17px;background:rgba(0,0,0,.28);box-shadow:inset 0 2px 0 rgba(0,0,0,.18);transition:background .2s}\n.fom-dg .switch i::after{content:\"\";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.25);display:grid;place-items:center;font:900 14px\/1 system-ui,sans-serif;color:#34C759;transition:transform .22s cubic-bezier(.3,1.4,.5,1)}\n.fom-dg .switch.on i{background:#34C759}\n.fom-dg .switch.on i::after{content:\"\\002713\";transform:translateX(26px)}\n.fom-dg .console button:focus-visible{outline:none}\n.fom-dg .console button:focus-visible i{outline:3px solid #fff;outline-offset:3px}\n.fom-dg .calques{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(28px,4vw,44px)}\n.fom-dg .calques li{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border-radius:var(--pill);padding:10px 18px 8px;font-size:.95rem;line-height:1.3}\n.fom-dg .calques b{color:var(--db-vert)}\n\/* BOUTON FIXE + PARADE *\/\n.fom-dg .fun{position:fixed;right:20px;top:50%;translate:0 -50%;z-index:100000;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--db-rose);color:#fff;\n  font:900 1.1rem\/1 var(--display);padding:14px 22px 10px 14px;border-radius:var(--pill);box-shadow:0 6px 0 #9A1FA0;transition:transform .1s,box-shadow .1s}\n.fom-dg .fun:hover{transform:translateY(-2px);box-shadow:0 8px 0 #9A1FA0}\n.fom-dg .fun:active{transform:translateY(5px);box-shadow:0 1px 0 #9A1FA0}\n.fom-dg .fun .tete{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-top:-4px}\n.fom-dg .fun .tete svg{width:32px;height:auto;margin-top:2px}\n.fom-dg .parade{position:fixed;inset:0;z-index:99999;pointer-events:none;overflow:hidden}\n.fom-dg .parade .axo{pointer-events:none;cursor:default}\n\n\/* POURQUOI *\/\n.fom-dg .pourquoi{background:var(--db-violet);color:#fff;overflow:hidden}\n.fom-dg .pourquoi h2,.fom-dg .pourquoi .lead{color:#fff}\n.fom-dg .pourquoi .lead{opacity:.85}\n.fom-dg .pq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:center}\n.fom-dg .tel-zone{position:relative;max-width:330px;width:100%;justify-self:center}\n.fom-dg .tel{background:#F4F2FA;border-radius:46px;padding:11px;transform:rotate(-4deg);box-shadow:18px 18px 0 var(--db-rose)}\n.fom-dg .tel-ecran{position:relative;background:#fff;border-radius:36px;aspect-ratio:9\/18.5;overflow:hidden;display:flex;flex-direction:column;font-family:\"Poppins\",var(--sans);color:#1d1d2b;line-height:1.35}\n.fom-dg .tel-status{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 6px;font-size:.78rem}\n.fom-dg .tel-status .ic{display:flex;gap:3px;align-items:flex-end}\n.fom-dg .tel-status .ic i{width:4px;background:#1d1d2b;border-radius:1px}\n.fom-dg .tel-status .ic i:nth-child(1){height:5px}.fom-dg .tel-status .ic i:nth-child(2){height:8px}.fom-dg .tel-status .ic i:nth-child(3){height:11px;width:16px;border-radius:3px;margin-left:4px}\n.fom-dg .tel-head{display:flex;align-items:center;gap:8px;padding:8px 14px 10px;box-shadow:0 1px 0 #EEEAF6}\n.fom-dg .tel-head .back{font-size:1.4rem;line-height:1;color:#1d1d2b}\n.fom-dg .av-carre{width:30px;height:30px;border-radius:9px;background:#C2185B;overflow:hidden;flex:none;display:grid;place-items:center}\n.fom-dg .av-carre .av{width:150%;max-width:none;margin-top:30%}\n.fom-dg .tel-head .tit{display:flex;flex-direction:column;font-size:.72rem;line-height:1.2;flex:1}\n.fom-dg .tel-head .tit b{font-weight:700}\n.fom-dg .tel-head .tit em{font-style:normal;color:#2E9E4F;font-size:.62rem}\n.fom-dg .prog{display:flex;align-items:center;gap:5px;font-size:.6rem;color:#C2185B;font-weight:600}\n.fom-dg .prog i{width:34px;height:4px;border-radius:2px;background:#F3D3E0;position:relative;overflow:hidden}\n.fom-dg .prog i::after{content:\"\";position:absolute;inset:0 70% 0 0;background:#E0407B;border-radius:2px}\n.fom-dg .chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:10px 12px 16px;overflow:hidden;background:#FBFAFE}\n.fom-dg .msg{display:none;align-items:flex-end;gap:6px;font-size:.68rem}\n.fom-dg .msg.on{display:flex;animation:dgMsg .35s cubic-bezier(.3,1.4,.5,1) both}\n@keyframes dgMsg{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}\n.fom-dg .msg .av{width:20px;height:20px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;background:#F3E8FF}\n.fom-dg .msg p{margin:0;background:#fff;border-radius:12px;padding:8px 10px;box-shadow:0 1px 4px rgba(29,29,43,.08);max-width:84%}\n.fom-dg .msg.rose p{background:#FCE6EE}\n.fom-dg .msg.vert p{background:#E5F6E8}\n.fom-dg .msg.vert b{display:block;color:#2E9E4F;font-size:.62rem;margin-bottom:2px}\n.fom-dg .msg.opt{padding-left:26px}\n.fom-dg .msg.opt p{background:#F1F0F5;box-shadow:none;color:#6b6b7b;display:flex;gap:6px}\n.fom-dg .msg.opt i{font-style:normal;font-weight:700;width:15px;height:15px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;font-size:.55rem}\n.fom-dg .msg.opt.ok p{background:#E5F6E8;color:#2E9E4F}\n.fom-dg .msg.opt.ok i{background:#2E9E4F;color:#fff}\n.fom-dg .msg.moi{justify-content:flex-end}\n.fom-dg .msg.moi p{background:#C2185B;color:#fff;box-shadow:none}\n.fom-dg .dots{display:flex;gap:3px}\n.fom-dg .dots i{width:5px;height:5px;border-radius:50%;background:#b9b6c6;animation:dgDot 1s infinite}\n.fom-dg .dots i:nth-child(2){animation-delay:.15s}.fom-dg .dots i:nth-child(3){animation-delay:.3s}\n@keyframes dgDot{0%,60%,100%{transform:none}30%{transform:translateY(-3px)}}\n.fom-dg .chip-ok{position:absolute;z-index:2;top:-2%;right:-12%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);color:#1d1d2b;font:600 .9rem\/1 \"Poppins\",var(--sans);padding:9px 16px 9px 9px;border-radius:var(--pill);transform:rotate(6deg);animation:dgPop 2.8s ease-in-out infinite}\n.fom-dg .chip-ok i{font-style:normal;width:24px;height:24px;border-radius:50%;background:#a6cc40;color:#1d1d2b;display:grid;place-items:center;font-size:.8rem;font-weight:700}\n.fom-dg .carte-badges{position:absolute;z-index:2;bottom:4%;left:-20%;display:flex;flex-direction:column;background:#E9F6E3;color:#1d1d2b;font:500 .72rem\/1.3 \"Poppins\",var(--sans);padding:10px 16px;border-radius:14px;transform:rotate(-6deg);animation:dgPop 2.8s ease-in-out infinite;animation-delay:-1.4s}\n.fom-dg .carte-badges b{font-size:1.05rem;font-weight:700}\n@keyframes dgPop{0%,100%{scale:1}50%{scale:1.06}}\n.fom-dg .raisons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}\n.fom-dg .raisons li{display:flex;gap:14px;align-items:flex-start;background:var(--bg);color:var(--ink);border-radius:var(--r);padding:20px 18px;line-height:1.5;transition:transform .25s var(--ease)}\n.fom-dg .raisons li:nth-child(odd){transform:rotate(-1.2deg)}.fom-dg .raisons li:nth-child(even){transform:rotate(1.2deg) translateY(10px)}\n.fom-dg .raisons li:hover{transform:rotate(0) translateY(-4px)}\n.fom-dg .raisons .num{font:900 1.6rem\/1 var(--display);background:var(--ink);color:var(--cream);border-radius:14px;padding:10px 10px 6px;flex:none}\n.fom-dg .raisons h3{color:var(--ink);font-size:1.25rem;margin-bottom:6px}\n.fom-dg .raisons p{font-size:.95rem}\n\n\/* CONFIANCE *\/\n.fom-dg .confiance{background:var(--teal);color:var(--cream)}\n.fom-dg .confiance h2,.fom-dg .confiance h3{color:var(--cream)}\n.fom-dg .confiance .lead{color:rgba(255,244,242,.72)}\n.fom-dg .confiance .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:36px}\n.fom-dg .avis{background:var(--cream);color:var(--ink);border-radius:var(--r-xl);padding:clamp(24px,3.5vw,40px);position:relative}\n.fom-dg .avis .etoiles{color:#F5A623;font-size:1.5rem;letter-spacing:4px;margin-bottom:12px}\n.fom-dg .avis blockquote{font-size:1.12rem;line-height:1.6;margin-bottom:18px}\n.fom-dg .avis figcaption{display:flex;align-items:center;gap:14px;font-weight:800;line-height:1.3}\n.fom-dg .avis figcaption small{display:block;font-weight:500;color:var(--ink-soft)}\n.fom-dg .avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}\n.fom-dg blockquote{border:0 !important;padding:0 !important;margin:0 0 18px !important;background:none !important;quotes:none;font-style:normal}\n.fom-dg blockquote::before,.fom-dg blockquote::after{content:none !important;display:none !important}\n.fom-dg .avis blockquote p{margin-bottom:12px}\n.fom-dg .mention{margin-top:26px;font-size:.88rem;line-height:1.55;color:var(--ink-soft);max-width:52ch}\n.fom-dg .mention a,.fom-dg .marque a{color:inherit;text-decoration:underline;text-underline-offset:2px}\n.fom-dg .marque{margin-top:22px;font-size:.88rem;line-height:1.55;color:var(--ink-soft);text-align:center}\n.fom-dg img,.fom-dg .axo,.fom-dg .tel-zone,.fom-dg .fun{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}\n.fom-dg .laureate{margin-top:16px;background:rgba(255,244,242,.08);border-radius:var(--r);padding:16px 20px;line-height:1.5;color:rgba(255,244,242,.85)}\n.fom-dg .preuves{display:grid;gap:10px}\n.fom-dg .preuves li{background:rgba(255,244,242,.08);border-radius:var(--r);padding:16px 20px;line-height:1.5;color:rgba(255,244,242,.85)}\n.fom-dg .preuves b{display:block;color:var(--cream);font-size:1.08rem;margin-bottom:2px}\n\n\/* FAQ *\/\n.fom-dg .faq .liste{max-width:820px;margin:36px auto 0;display:grid;gap:10px}\n.fom-dg details{background:var(--white);border-radius:var(--r);padding:0 24px}\n.fom-dg summary{list-style:none;cursor:pointer;font-weight:800;font-size:1.08rem;padding:20px 36px 18px 0;position:relative;line-height:1.4}\n.fom-dg summary::-webkit-details-marker{display:none}\n.fom-dg summary::after{content:\"+\";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.7rem;color:var(--corail);transition:transform .35s ease}\n.fom-dg details[open] summary::after{transform:translateY(-50%) rotate(45deg)}\n.fom-dg details p{padding-bottom:20px;color:var(--ink-soft)}\n\n\/* CTA *\/\n.fom-dg .cta{padding-top:0}\n.fom-dg .final{background:var(--ink);color:var(--cream);border-radius:var(--r-xl);padding:clamp(34px,5vw,64px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}\n.fom-dg .final h2,.fom-dg .final p{color:var(--cream)}\n.fom-dg .final .slogan{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;margin:22px 0 28px}\n.fom-dg .final .slogan span{color:var(--jaune)}\n.fom-dg .final .rep{font-size:.95rem;margin-top:18px;opacity:.85}\n.fom-dg .final img{max-width:340px;width:100%;margin-inline:auto;animation:dgFlot 3.6s ease-in-out infinite}\n@keyframes dgFlot{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}\n\n@media (max-width:980px){\n}\n@media (max-width:900px){\n  .fom-dg .hero-grid>.scene-hero{order:-1;max-width:440px;aspect-ratio:1\/.9}\n  .fom-dg .hero{padding-top:64px}\n  .fom-dg .pq,.fom-dg .hero-grid,.fom-dg .two,.fom-dg .confiance .grid,.fom-dg .final,.fom-dg .capture,.fom-dg .capture:nth-child(even){grid-template-columns:1fr}\n  .fom-dg .capture:nth-child(even) .ecran{order:0}\n  .fom-dg .chiffres{grid-template-columns:repeat(2,1fr)}\n  .fom-dg .jalon,.fom-dg .jalon:nth-child(odd),.fom-dg .depart{grid-template-columns:1fr}\n  .fom-dg .depart .quand{justify-self:start}\n  .fom-dg .jalon:nth-child(odd)>:last-child{order:0}\n}\n@media (max-width:600px){\n  .fom-dg{font-size:16px}\n  .fom-dg .w{padding-inline:16px}\n  .fom-dg .raisons{grid-template-columns:1fr}\n  .fom-dg .raisons li:nth-child(even){transform:rotate(1.2deg)}\n  .fom-dg .tel-zone{max-width:250px}\n  .fom-dg .chip-ok{right:-8%;font-size:.78rem}.fom-dg .carte-badges{left:-12%}\n  .fom-dg .planche.trois{grid-template-columns:1fr 1fr}\n  .fom-dg .planche.trois>:last-child{grid-column:1\/-1;max-width:60%;justify-self:center}\n  .fom-dg .besoins li{grid-template-columns:44px 1fr;padding:14px 16px}\n  .fom-dg .besoins .n{width:44px;height:44px;font-size:1.3rem;border-radius:14px}\n  .fom-dg .final{padding:28px 20px;border-radius:24px}\n  .fom-dg .scene-db{border-radius:24px}\n  .fom-dg .db-logo{width:90px}\n  .fom-dg .chiffre b{font-size:1.7rem}\n  .fom-dg .console{grid-template-columns:1fr 1fr;grid-template-areas:\"ecran ecran\" \"g d\";border-radius:28px}\n  .fom-dg .ecran-console{grid-area:ecran;border-radius:28px 28px 0 0;padding:10px}\n  .fom-dg .manette{flex-direction:row;justify-content:center;gap:14px;padding:16px 8px}\n  .fom-dg .manette.g{grid-area:g;border-radius:0 0 0 28px;flex-direction:column}\n  .fom-dg .manette.d{grid-area:d;border-radius:0 0 28px 0}\n  .fom-dg .stick{display:none}\n  .fom-dg .scene-jeu{height:440px}\n  .fom-dg .bt i{width:44px;height:44px}.fom-dg .bt.haut i{width:50px;height:50px}\n  .fom-dg .calques li{font-size:.85rem}\n  .fom-dg .fun{right:12px;font-size:.95rem;padding:10px 16px 7px 10px}\n  .fom-dg .fun .tete{width:28px;height:28px}\n  .fom-dg .scene-jeu .n1{top:8%;width:22%}.fom-dg .scene-jeu .n2{top:18%;width:15%}\n  .fom-dg .scene-db.crowd .axo.main{width:38%}\n}\n@media (prefers-reduced-motion:reduce){.fom-dg *{animation:none !important;transition:none !important}}\n.elementor-widget-html:has(.fom-dg){margin-block-end:0 !important}\n.elementor-element:has(> .elementor-widget-container > .fom-dg){--widgets-spacing:0px}\n<\/style>\n<div class=\"fom-dg\">\n<!-- ========== 1. HERO ========== -->\n<section class=\"hero\">\n  <div class=\"w\">\n    <div class=\"hero-grid\">\n      <div>\n        <p class=\"pill\">&#201;tude de cas &#183; DigiBadge, l'appli des 10-16 ans<\/p>\n        <h1>Une mascotte pour application mobile <span class=\"hl\">qu'on a envie de suivre<\/span><\/h1>\n        <p class=\"lead\">DigiBadge apprend aux ados &#224; naviguer sur Internet en confiance, badge apr&#232;s badge. Il leur fallait un compagnon que les ados aient envie de suivre et que les parents aient envie de croire. On a cr&#233;&#233; Dibby, un axolotl survolt&#233; qui guide les ados dans les quiz de l'appli.<\/p>\n        <div class=\"btns\">\n          <a class=\"btn\" href=\"https:\/\/www.freshorganicmotion.com\/contact\/\">Parler de votre appli &#8594;<\/a>\n          <a class=\"btn ghost\" href=\"#jouer\">Jouer avec Dibby &#8595;<\/a>\n        <\/div>\n        <p class=\"mention\">Dibby et le logo DigiBadge sont la propri&#233;t&#233; exclusive de <a href=\"https:\/\/www.digibadge.io\/\" target=\"_blank\" rel=\"noopener\">DigiBadge<\/a>. Fresh Organic Motion pr&#233;sente ce projet dans son portfolio avec l'autorisation explicite de DigiBadge.<\/p>\n      <\/div>\n      <div class=\"scene-db scene-hero\" data-scene=\"hero\" role=\"img\" aria-label=\"Dibby, l'axolotl de DigiBadge, anim&#233; : il pianote sur son t&#233;l&#233;phone et saute quand on le touche\">\n        <span class=\"astuce\">Touchez-le !<\/span>\n        <span class=\"nuage n1\"><svg viewBox=\"0 0 124 62\" aria-hidden=\"true\"><g fill=\"#fff\"><circle cx=\"38\" cy=\"36\" r=\"20\"\/><circle cx=\"64\" cy=\"26\" r=\"25\"\/><circle cx=\"90\" cy=\"38\" r=\"17\"\/><rect x=\"16\" y=\"36\" width=\"92\" height=\"22\" rx=\"11\"\/><\/g><\/svg><\/span><span class=\"nuage n2\"><svg viewBox=\"0 0 124 62\" aria-hidden=\"true\"><g fill=\"#fff\"><circle cx=\"38\" cy=\"36\" r=\"20\"\/><circle cx=\"64\" cy=\"26\" r=\"25\"\/><circle cx=\"90\" cy=\"38\" r=\"17\"\/><rect x=\"16\" y=\"36\" width=\"92\" height=\"22\" rx=\"11\"\/><\/g><\/svg><\/span>\n      <\/div>\n    <\/div>\n    <ul class=\"chiffres\">\n      <li class=\"chiffre\"><b>2<\/b>pistes dessin&#233;es au crayon<\/li>\n      <li class=\"chiffre\"><b>3<\/b>propositions de logo<\/li>\n      <li class=\"chiffre\"><b>2<\/b>poses finales : principale et victoire<\/li>\n      <li class=\"chiffre\"><b>100 %<\/b>des droits c&#233;d&#233;s, d&#233;p&#244;t de marque inclus<\/li>\n    <\/ul>\n  <\/div>\n<\/section>\n\n\n<!-- ========== 2. LE BESOIN ========== -->\n<section class=\"besoin\">\n  <div class=\"w two\">\n    <div>\n      <h2>Le d&#233;fi : parler &#224; des ados sans les infantiliser<\/h2>\n      <p>Maaike Coppens, fondatrice de DigiBadge et maman, part d'un constat : la peur des parents ne prot&#232;ge pas les enfants. Son appli pr&#233;pare les ados au num&#233;rique comme on passe son code avant de prendre le volant. Un parcours personnalis&#233;, des simulations d'applis r&#233;elles comme Snapchat, Roblox ou ChatGPT, des badges &#224; d&#233;crocher. Et c'est le parent qui valide l'acc&#232;s aux applis.<\/p>\n      <p>Un parcours d'apprentissage, m&#234;me bien pens&#233;, ne tient que si l'ado a envie d'y revenir. C'est l&#224; qu'intervient la mascotte.<\/p>\n    <\/div>\n    <div class=\"papier\">\n      <h3>Ce que Dibby devait r&#233;ussir<\/h3>\n      <ul class=\"besoins\">\n        <li style=\"--bg:#FFD8DE\"><span class=\"n\">01<\/span><span><b>Mignon sans &#234;tre enfantin<\/b>Un ado de 14 ans doit pouvoir l'afficher sur son &#233;cran sans honte.<\/span><\/li>\n        <li style=\"--bg:#F5C518\"><span class=\"n\">02<\/span><span><b>Rassurer les parents<\/b>Le personnage incarne la confiance et l'autonomie, jamais la surveillance.<\/span><\/li>\n        <li style=\"--bg:#a6cc40\"><span class=\"n\">03<\/span><span><b>Vivre dans l'appli<\/b>Il guide les quiz, r&#233;agit, f&#233;licite. Lisible en tout petit sur un badge comme en grand sur un &#233;cran.<\/span><\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f949a17 e-con-full e-flex e-con e-parent\" data-id=\"f949a17\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dafafc6 elementor-widget elementor-widget-html\" data-id=\"dafafc6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FOM | \/mascotte-application-mobile\/ | BLOC 2 sur 6 : widget HTML Elementor n&#176;2 (Les coulisses : du crayon au logo) -->\n<div class=\"fom-dg\">\n<!-- ========== 3. LES COULISSES ========== -->\n<section class=\"methode\">\n  <div class=\"w\">\n    <div class=\"center\">\n      <h2>Du crayon au logo : les coulisses de Dibby<\/h2>\n      <p class=\"lead\">D'avril &#224; fin juin 2026, un seul interlocuteur du premier croquis au fichier final. Voici comment le personnage a pris forme.<\/p>\n    <\/div>\n    <div class=\"depart\">\n      <span class=\"quand\">Le point de d&#233;part<\/span>\n      <div>\n        <h3>Une mascotte IA, en attendant<\/h3>\n        <p>Pour sortir sa version b&#234;ta plus vite, DigiBadge utilisait une mascotte g&#233;n&#233;r&#233;e par IA. C'est un cas qu'on rencontre souvent, et ce n'est absolument pas un probl&#232;me : les technologies avancent, et une b&#234;ta doit avancer avec elles.<\/p>\n        <p>Notre approche est diff&#233;rente : <span class=\"hl j\">artisanale, fond&#233;e sur l'affect et sur l'angle<\/span>. On ne livre pas une image, on cherche ce que le personnage doit faire ressentir. Et on aime proposer plusieurs r&#233;ponses &#224; nos clients.<\/p>\n      <\/div>\n    <\/div>\n    <ol class=\"frise\">\n      <li class=\"jalon\">\n        <div><span class=\"quand\">Avril<\/span><h3>Le brief<\/h3><p>Comprendre l'appli, les ados de 10 &#224; 16 ans, les parents et le ton de la marque. Avant de dessiner, on fixe ce que la mascotte doit faire : guider, rassurer, f&#233;liciter.<\/p>\n          <p><strong>Pourquoi un axolotl ?<\/strong> Un animal encore peu vu dans les applis, mignon au premier regard, et un amphibien qui sait s'adapter &#224; son milieu. Exactement ce qu'on attend d'un ado face au num&#233;rique.<\/p><\/div>\n        <figure class=\"bulle-brief\"><span class=\"bulle\">&#171; On doit avoir envie de lui faire confiance. &#187;<small>Maaike Coppens, fondatrice de DigiBadge<\/small><\/span><\/figure>\n      <\/li>\n      <li class=\"jalon\">\n        <div><span class=\"quand\">D&#233;but juin<\/span><h3>Deux pistes, deux positionnements<\/h3><p><strong>Piste 1 :<\/strong> un axolotl ado, en tee-shirt et jean, qui rep&#232;re un danger sur son t&#233;l&#233;phone. Proche, r&#233;aliste, presque un grand fr&#232;re.<\/p><p><strong>Piste 2 :<\/strong> un axolotl tout rond, la bouche grande ouverte, scotch&#233; &#224; son &#233;cran. Fun et d&#233;cal&#233;.<\/p><p>Les deux pouvaient fonctionner, avec un positionnement diff&#233;rent. C'est ce qui a nourri une grande partie de nos premiers d&#233;bats.<\/p>\n          <p class=\"visio\">En visio : chaque piste d&#233;fendue, arguments sur la table, et beaucoup de passion.<\/p><\/div>\n        <div class=\"planche deux\">\n          <figure class=\"feuille\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/creation-mascotte-application-croquis-piste-1-axolotl.webp\" alt=\"Croquis de la piste 1 : deux axolotls ados en tee-shirt et jean, l'un tient un t&#233;l&#233;phone avec un panneau danger\" width=\"900\" height=\"643\" loading=\"lazy\"><figcaption>Piste 1<\/figcaption><\/figure>\n          <figure class=\"feuille\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/creation-mascotte-application-croquis-piste-2-axolotl.webp\" alt=\"Croquis de la piste 2 : un axolotl rond, bouche grande ouverte, qui tient son t&#233;l&#233;phone\" width=\"800\" height=\"716\" loading=\"lazy\"><figcaption>Piste 2<\/figcaption><\/figure>\n        <\/div>\n      <\/li>\n      <li class=\"jalon\">\n        <div><span class=\"quand\">Juin<\/span><h3>L'option fun et d&#233;cal&#233;e l'emporte<\/h3><p>La piste 2 est choisie : plus simple, plus expressive, lisible m&#234;me en tout petit. On travaille l'attitude, le regard et le t&#233;l&#233;phone, puis une premi&#232;re mise en couleur confirme l'&#233;nergie du personnage.<\/p><\/div>\n        <div class=\"planche deux\">\n          <figure class=\"feuille\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/creation-mascotte-application-croquis-attitude-axolotl.webp\" alt=\"Croquis de recherche : l'axolotl envoie des c&#339;urs et des pouces lev&#233;s depuis son t&#233;l&#233;phone\" width=\"900\" height=\"645\" loading=\"lazy\"><figcaption>Recherche d'attitude<\/figcaption><\/figure>\n          <figure class=\"feuille\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/creation-mascotte-application-piste-retenue-couleur.webp\" alt=\"Piste retenue mise en couleur : axolotl rose, bouche ouverte, qui pianote sur son t&#233;l&#233;phone\" width=\"800\" height=\"716\" loading=\"lazy\"><figcaption>Premi&#232;re mise en couleur<\/figcaption><\/figure>\n        <\/div>\n      <\/li>\n      <li class=\"jalon\">\n        <div><span class=\"quand\">Mi-juin<\/span><h3>Trois logos, trois temp&#233;raments<\/h3><p>Le personnage passe en vectoriel et rencontre le nom de la marque. Une version qui claque, une version douce et ronde, une version badge &#224; &#233;tiquette. Chaque proposition int&#232;gre le visage de Dibby.<\/p>\n          <p class=\"visio\">En visio : on compare, on argumente, on tranche ensemble.<\/p><\/div>\n        <div class=\"planche trois\">\n          <figure class=\"feuille\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/logo-mascotte-digibadge-proposition-1.webp\" alt=\"Proposition de logo 1 : Dibby au-dessus du mot DIGIBADGE en capitales noires inclin&#233;es\" width=\"560\" height=\"560\" loading=\"lazy\"><figcaption>Proposition 1<\/figcaption><\/figure>\n          <figure class=\"feuille\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/logo-mascotte-digibadge-proposition-2.webp\" alt=\"Proposition de logo 2 : Dibby au-dessus du mot digibadge en minuscules violettes arrondies\" width=\"560\" height=\"560\" loading=\"lazy\"><figcaption>Proposition 2<\/figcaption><\/figure>\n          <figure class=\"feuille\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/logo-mascotte-digibadge-proposition-3.webp\" alt=\"Proposition de logo 3 : Dibby perch&#233; sur une &#233;tiquette DIGI BADGE rose et violette\" width=\"560\" height=\"560\" loading=\"lazy\"><figcaption>Proposition 3<\/figcaption><\/figure>\n        <\/div>\n      <\/li>\n      <li class=\"jalon\">\n        <div><span class=\"quand\">30 juin<\/span><h3>La version finale<\/h3><p>Le logo d&#233;finitif, la pose principale et la pose victoire, avec leurs d&#233;clinaisons et le favicon. Fichiers source Illustrator, SVG et PNG livr&#233;s, droits c&#233;d&#233;s le jour m&#234;me.<\/p><\/div>\n        <div class=\"planche trois finale\">\n          <figure class=\"pose\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/logo-digibadge-final-mascotte-dibby.webp\" alt=\"Logo final DigiBadge avec le visage de Dibby\" width=\"700\" height=\"571\" loading=\"lazy\"><figcaption>Logo final<\/figcaption><\/figure>\n          <figure class=\"pose\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/dibby-mascotte-application-digibadge-pose-principale.webp\" alt=\"Dibby, pose principale avec son t&#233;l&#233;phone\" width=\"700\" height=\"700\" loading=\"lazy\"><figcaption>Pose principale<\/figcaption><\/figure>\n          <figure class=\"pose\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/dibby-mascotte-application-digibadge-pose-victoire.webp\" alt=\"Dibby en pose victoire, il brandit un badge valid&#233;\" width=\"700\" height=\"700\" loading=\"lazy\"><figcaption>Pose victoire<\/figcaption><\/figure>\n        <\/div>\n        <p class=\"marque\">La mascotte Dibby est une marque d&#233;pos&#233;e &#224; l'INPI (n&#176; 5276754), appartenant &#224; <a href=\"https:\/\/www.digibadge.io\/\" target=\"_blank\" rel=\"noopener\">DigiBadge<\/a>.<\/p>\n      <\/li>\n    <\/ol>\n  <\/div>\n<\/section>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ccde32f e-con-full e-flex e-con e-parent\" data-id=\"ccde32f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1d4616 elementor-widget elementor-widget-html\" data-id=\"a1d4616\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FOM | \/mascotte-application-mobile\/ | BLOC 3 sur 6 : widget HTML Elementor n&#176;3 (Dibby en action (captures digibadge.io)) -->\n<div class=\"fom-dg\">\n<!-- ========== 4. DIBBY EN ACTION ========== -->\n<section class=\"action\">\n  <div class=\"w\">\n    <div class=\"center\">\n      <h2>Dibby en action sur digibadge.io<\/h2>\n      <p class=\"lead\">Une mascotte r&#233;ussie ne reste pas dans un dossier. Sur le site de DigiBadge, Dibby est partout o&#249; il faut cr&#233;er du lien.<\/p>\n    <\/div>\n    <div class=\"captures\">\n      <div class=\"capture\">\n        <div class=\"ecran\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/mascotte-application-mobile-dibby-digibadge-comment-ca-marche.webp\" alt=\"Section Comment &#231;a marche du site DigiBadge, avec Dibby et les &#233;crans de l'appli\" width=\"1280\" height=\"1138\" loading=\"lazy\"><\/div>\n        <div><span class=\"tag\">GUIDER<\/span><h3>Il accompagne le parcours<\/h3><p>Dans l'appli, c'est Dibby qui guide les quiz. Sur le site, il ouvre l'explication du fonctionnement : apprendre, ma&#238;triser, utiliser.<\/p><\/div>\n      <\/div>\n      <div class=\"capture\">\n        <div class=\"ecran\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/mascotte-application-mobile-dibby-digibadge-benefices.webp\" alt=\"Section b&#233;n&#233;fices du site DigiBadge illustr&#233;e par trois Dibby\" width=\"1280\" height=\"569\" loading=\"lazy\"><\/div>\n        <div><span class=\"tag\">INCARNER<\/span><h3>Il porte les b&#233;n&#233;fices<\/h3><p>Trois Dibby, trois messages : la fin des conflits, un ado pr&#233;par&#233;, un outil que les ados adoptent. Le personnage rend le discours accessible aux parents comme aux enfants.<\/p><\/div>\n      <\/div>\n      <div class=\"capture\">\n        <div class=\"ecran\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/mascotte-application-mobile-dibby-digibadge-appel-action.webp\" alt=\"Appel &#224; rejoindre DigiBadge avec Dibby en pose victoire\" width=\"1280\" height=\"640\" loading=\"lazy\"><\/div>\n        <div><span class=\"tag\">CONVAINCRE<\/span><h3>Il signe l'appel &#224; l'action<\/h3><p>En pose victoire, badge brandi, il invite les familles &#224; rejoindre l'aventure. La mascotte devient le visage de la conversion.<\/p><\/div>\n      <\/div>\n    <\/div>\n    <p class=\"source center\">Captures de <a href=\"https:\/\/www.digibadge.io\/\" target=\"_blank\" rel=\"noopener\">digibadge.io<\/a>, octobre 2026. Dibby est la propri&#233;t&#233; de DigiBadge, pr&#233;sent&#233; avec son autorisation.<\/p>\n  <\/div>\n<\/section>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-98d3f75 e-con-full e-flex e-con e-parent\" data-id=\"98d3f75\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bec7c73 elementor-widget elementor-widget-html\" data-id=\"bec7c73\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FOM | \/mascotte-application-mobile\/ | BLOC 4 sur 6 : widget HTML Elementor n&#176;4 (Terrain de jeu Dibby) -->\n<div class=\"fom-dg\">\n<!-- ========== 5. TERRAIN DE JEU ========== -->\n<section class=\"jeu\" id=\"jouer\">\n  <div class=\"w\">\n    <div class=\"center\">\n      <span class=\"tag-jeu\">&#192; vous de jouer<\/span>\n      <h2>Un personnage pens&#233; pour l'animation<\/h2>\n      <p class=\"lead\">Dibby n'est pas une image fig&#233;e. Il est livr&#233; d&#233;coup&#233;, chaque partie sur son calque, avec ses points de rotation. R&#233;sultat : il s'anime en code l&#233;ger, directement dans une appli ou une page web, sans vid&#233;o lourde.<\/p>\n    <\/div>\n    <div class=\"console\">\n      <div class=\"manette g\">\n        <span class=\"stick\" aria-hidden=\"true\"><\/span>\n        <div class=\"compteur-ecran\"><small>Dibby<\/small><span data-compteur aria-live=\"polite\">&#215;01<\/span><\/div>\n        <button type=\"button\" data-act=\"type\" class=\"switch on\" role=\"switch\" aria-checked=\"true\"><i aria-hidden=\"true\"><\/i><b>Pianoter<\/b><\/button>\n      <\/div>\n      <div class=\"ecran-console\">\n        <div class=\"scene-db scene-jeu\" data-scene=\"jeu\" role=\"group\" aria-label=\"Terrain de jeu : Dibby se multiplie et saute\">\n          <svg class=\"plaine\" viewBox=\"0 0 1000 700\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n        <path d=\"M0,170 C190,70 380,40 580,120 C720,176 840,150 1000,92 L1000,700 L0,700Z\" fill=\"#B9DA5A\"\/>\n        <path d=\"M0,340 C170,250 340,196 530,236 C710,274 850,336 1000,300 L1000,700 L0,700Z\" fill=\"#A6CC40\"\/>\n        <path d=\"M0,560 C220,500 470,486 700,520 C830,540 920,566 1000,556 L1000,700 L0,700Z\" fill=\"#97BD38\"\/>\n      <\/svg>\n          <span class=\"nuage n1\"><svg viewBox=\"0 0 124 62\" aria-hidden=\"true\"><g fill=\"#fff\"><circle cx=\"38\" cy=\"36\" r=\"20\"\/><circle cx=\"64\" cy=\"26\" r=\"25\"\/><circle cx=\"90\" cy=\"38\" r=\"17\"\/><rect x=\"16\" y=\"36\" width=\"92\" height=\"22\" rx=\"11\"\/><\/g><\/svg><\/span><span class=\"nuage n2\"><svg viewBox=\"0 0 124 62\" aria-hidden=\"true\"><g fill=\"#fff\"><circle cx=\"38\" cy=\"36\" r=\"20\"\/><circle cx=\"64\" cy=\"26\" r=\"25\"\/><circle cx=\"90\" cy=\"38\" r=\"17\"\/><rect x=\"16\" y=\"36\" width=\"92\" height=\"22\" rx=\"11\"\/><\/g><\/svg><\/span>\n        <\/div>\n      <\/div>\n      <div class=\"manette d\">\n        <div class=\"pad\">\n          <button type=\"button\" class=\"bt haut\" data-act=\"jump\"><i aria-hidden=\"true\">&#9650;<\/i><b>Sauter<\/b><\/button>\n          <button type=\"button\" class=\"bt\" data-act=\"multi\"><i aria-hidden=\"true\">&#215;2<\/i><b>Multiplier<\/b><\/button>\n          <button type=\"button\" class=\"bt\" data-act=\"reset\"><i aria-hidden=\"true\">&#8634;<\/i><b>Reset<\/b><\/button>\n        <\/div>\n        <span class=\"stick\" aria-hidden=\"true\"><\/span>\n      <\/div>\n    <\/div>\n    <ul class=\"calques\">\n      <li><b>6 branchies<\/b> qui fr&#233;tillent chacune &#224; son rythme<\/li>\n      <li><b>2 bras<\/b> : l'un tient le t&#233;l&#233;phone, l'autre pianote<\/li>\n      <li><b>2 corps<\/b> : au repos et en plein saut<\/li>\n      <li><b>3 regards<\/b> : normal, clin d'&#339;il, survolt&#233;<\/li>\n    <\/ul>\n  <\/div>\n<\/section>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e031414 e-con-full e-flex e-con e-parent\" data-id=\"e031414\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f04a0e8 elementor-widget elementor-widget-html\" data-id=\"f04a0e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FOM | \/mascotte-application-mobile\/ | BLOC 5 sur 6 : widget HTML Elementor n&#176;5 (Pourquoi une mascotte + confiance (avis Maaike)) -->\n<div class=\"fom-dg\">\n<!-- ========== 6. POURQUOI UNE MASCOTTE D'APPLI ========== -->\n<section class=\"pourquoi\">\n  <div class=\"w pq\">\n    <div class=\"tel-zone\" aria-hidden=\"true\">\n      <span class=\"chip-ok\"><i>&#10003;<\/i>Badge valid&#233;<\/span>\n      <span class=\"carte-badges\"><b>1 \/ 8<\/b>badges obtenus<\/span>\n      <div class=\"tel\">\n        <div class=\"tel-ecran\">\n          <div class=\"tel-status\"><b>9:41<\/b><span class=\"ic\"><i><\/i><i><\/i><i><\/i><\/span><\/div>\n          <div class=\"tel-head\"><span class=\"back\">&#8249;<\/span><span class=\"av-carre\"><img fetchpriority=\"high\" decoding=\"async\" class=\"av\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/dibby-mascotte-application-digibadge-pose-principale.webp\" alt=\"\" width=\"700\" height=\"700\"><\/span><span class=\"tit\"><b>Dibby - Quiz Instagram<\/b><em>En ligne<\/em><\/span><span class=\"prog\"><i><\/i><small>1\/8<\/small><\/span><\/div>\n          <div class=\"chat\" data-chat>\n            <div class=\"msg rose\"><img fetchpriority=\"high\" decoding=\"async\" class=\"av\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/dibby-mascotte-application-digibadge-pose-principale.webp\" alt=\"\" width=\"700\" height=\"700\"><p>On passe aux param&#232;tres de confidentialit&#233; !<\/p><\/div>\n            <div class=\"msg\"><img fetchpriority=\"high\" decoding=\"async\" class=\"av\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/dibby-mascotte-application-digibadge-pose-principale.webp\" alt=\"\" width=\"700\" height=\"700\"><p>Tu cr&#233;es ton compte Instagram. Quel type de compte choisis-tu ?<\/p><\/div>\n            <div class=\"msg opt\"><p><i>A<\/i>Compte public : tout le monde peut voir mes photos<\/p><\/div>\n            <div class=\"msg opt ok\"><p><i>B<\/i>Compte priv&#233; : seuls mes abonn&#233;s approuv&#233;s voient mon contenu<\/p><\/div>\n            <div class=\"msg moi\"><p>Compte priv&#233; : seuls mes abonn&#233;s approuv&#233;s voient mon contenu<\/p><\/div>\n            <div class=\"msg vert\"><img fetchpriority=\"high\" decoding=\"async\" class=\"av\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/dibby-mascotte-application-digibadge-pose-principale.webp\" alt=\"\" width=\"700\" height=\"700\"><p><b>Bien jou&#233; !<\/b>Parfait ! Un compte priv&#233; te permet de contr&#244;ler qui peut voir tes publications.<\/p><\/div>\n            <div class=\"msg\"><img fetchpriority=\"high\" decoding=\"async\" class=\"av\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/dibby-mascotte-application-digibadge-pose-principale.webp\" alt=\"\" width=\"700\" height=\"700\"><p class=\"dots\"><i><\/i><i><\/i><i><\/i><\/p><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div>\n      <h2>Pourquoi une mascotte pour votre application mobile ?<\/h2>\n      <p class=\"lead\">Une appli se bat pour quelques secondes d'attention. Un personnage bien con&#231;u donne une raison de revenir.<\/p>\n      <ol class=\"raisons\">\n        <li style=\"--bg:#FFD8DE\"><span class=\"num\">01<\/span><div><h3>Un accueil qui rassure<\/h3><p>&#192; l'inscription, un visage familier explique, guide et rend les premiers pas moins intimidants.<\/p><\/div><\/li>\n        <li style=\"--bg:#F5C518\"><span class=\"num\">02<\/span><div><h3>Des victoires qu'on f&#234;te<\/h3><p>Badges, niveaux, s&#233;ries : la mascotte transforme chaque progr&#232;s en petit moment de fiert&#233;.<\/p><\/div><\/li>\n        <li style=\"--bg:#a6cc40\"><span class=\"num\">03<\/span><div><h3>Des messages qu'on lit<\/h3><p>Une notification qui vient d'un personnage se lit comme un message d'ami, pas comme une alerte.<\/p><\/div><\/li>\n        <li style=\"--bg:#FFFFFF\"><span class=\"num\">04<\/span><div><h3>Une marque qu'on reconna&#238;t<\/h3><p>Sur les stores, les r&#233;seaux et les salons, le personnage rend l'appli identifiable au premier coup d'&#339;il.<\/p><\/div><\/li>\n      <\/ol>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ========== 7. CONFIANCE ========== -->\n<section class=\"confiance\">\n  <div class=\"w\">\n    <h2>Une relation de confiance, noir sur blanc<\/h2>\n    <p class=\"lead\">Confier le visage de sa marque, c'est confier quelque chose de pr&#233;cieux. Chez nous, tout est clair d&#232;s le d&#233;part.<\/p>\n    <div class=\"grid\">\n      <div>\n        <figure class=\"avis\">\n          <div class=\"etoiles\" aria-label=\"5 &#233;toiles sur 5\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/div>\n          <blockquote><p>Julien a cr&#233;&#233; Dibby, la mascotte de DigiBadge, et le r&#233;sultat a &#233;t&#233; &#224; la hauteur de nos attentes. Il a su traduire un brief exigeant et des retours d'une audience qui l'&#233;tait encore plus, les ados de 10 &#224; 16 ans, en une mascotte imm&#233;diatement attachante et parfaitement coh&#233;rente avec notre identit&#233; de marque et les demandes de notre panel d'utilisateurs.<\/p><p>R&#233;actif, &#224; l'&#233;coute, force de proposition. Respect des d&#233;lais, communication fluide, fichiers livr&#233;s propres et exploitables. Un vrai partenaire cr&#233;atif. Je le recommande vivement.<\/p><\/blockquote>\n          <figcaption><img loading=\"lazy\" decoding=\"async\" class=\"avatar\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/Maaike-coppens-mascotte-dibby.jpg\" alt=\"Maaike Coppens, fondatrice de DigiBadge\" width=\"120\" height=\"120\" loading=\"lazy\"><span>Maaike Coppens<small>Fondatrice de DigiBadge &#183; avis Google &#9733; 5\/5<\/small><\/span><\/figcaption>\n        <\/figure>\n        <p class=\"laureate\">Maaike est laur&#233;ate du programme <strong>101 Femmes Entrepreneures 2026<\/strong> du Gouvernement et de Bpifrance.<\/p>\n      <\/div>\n      <ul class=\"preuves\">\n        <li><b>Un seul interlocuteur, des visios &#224; chaque &#233;tape<\/b>Julien suit le projet du premier &#233;change &#224; la livraison. Chaque choix se discute en visio, arguments &#224; l'appui.<\/li>\n        <li><b>Des fichiers ouverts<\/b>Sources Illustrator, SVG et PNG livr&#233;s. Rien n'est verrouill&#233;, votre &#233;quipe peut tout r&#233;utiliser.<\/li>\n        <li><b>Des droits c&#233;d&#233;s par &#233;crit<\/b>Un acte de cession exclusive, monde entier, pour toute la dur&#233;e l&#233;gale. Vous &#234;tes propri&#233;taire.<\/li>\n        <li><b>Votre marque prot&#233;g&#233;e<\/b>Le droit de d&#233;poser la mascotte &#224; l'INPI et &#224; l'EUIPO est inclus dans la cession.<\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-713b85a e-con-full e-flex e-con e-parent\" data-id=\"713b85a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-877e42f elementor-widget elementor-widget-html\" data-id=\"877e42f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FOM | \/mascotte-application-mobile\/ | BLOC 6 sur 6 : widget HTML Elementor n&#176;6 (FAQ + appel &#224; l'action + bouton Plus de fun + scripts (toujours en dernier)) -->\n<div class=\"fom-dg\">\n<!-- ========== 8. FAQ ========== -->\n<section class=\"faq\">\n  <div class=\"w\">\n    <h2 class=\"center\">Vos questions sur la mascotte d'application<\/h2>\n    <div class=\"liste\">\n      <details><summary>Combien de temps faut-il pour cr&#233;er une mascotte d'application ?<\/summary><p>Pour Dibby, il s'est pass&#233; un peu plus de deux mois entre le devis et la cession des droits, croquis, poses et logo compris. Le d&#233;lai d&#233;pend surtout du nombre de poses et de d&#233;clinaisons.<\/p><\/details>\n      <details><summary>La mascotte peut-elle &#234;tre anim&#233;e dans l'application ?<\/summary><p>Oui. On pr&#233;pare les fichiers pour l'animation : un calque par partie mobile et des points de rotation. Votre &#233;quipe peut l'animer en code, en Lottie ou en Rive, sans redessiner le personnage.<\/p><\/details>\n      <details><summary>Qui est propri&#233;taire de la mascotte ?<\/summary><p>Vous. Les droits patrimoniaux sont c&#233;d&#233;s par un acte &#233;crit, &#224; titre exclusif, pour le monde entier. La cession inclut le droit de d&#233;poser la mascotte comme marque.<\/p><\/details>\n      <details><summary>J'utilise d&#233;j&#224; une mascotte g&#233;n&#233;r&#233;e par IA, c'est un probl&#232;me ?<\/summary><p>Pas du tout, c'est tr&#232;s courant pour lancer une b&#234;ta. Quand vous voulez un personnage qui vous appartient vraiment, on prend le relais : pistes dessin&#233;es au crayon, finalisation en vectoriel dans Illustrator, fichiers source livr&#233;s et droits c&#233;d&#233;s par &#233;crit.<\/p><\/details>\n      <details><summary>Faut-il d&#233;j&#224; avoir un logo ou une charte ?<\/summary><p>Non. Pour DigiBadge, le logo a &#233;t&#233; cr&#233;&#233; d'apr&#232;s la mascotte, avec son visage int&#233;gr&#233;. On peut partir de votre identit&#233; existante ou construire les deux ensemble.<\/p><\/details>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ========== 9. APPEL &#192; L'ACTION ========== -->\n<section class=\"cta\">\n  <div class=\"w\">\n    <div class=\"final\">\n      <div>\n        <h2>Votre appli a besoin de son Dibby ?<\/h2>\n        <p>Le premier &#233;change dure 30 minutes. On y parle de votre appli, de vos utilisateurs et de ce que votre mascotte doit faire pour eux. C'est gratuit et sans engagement.<\/p>\n        <p class=\"slogan\">Votre appli m&#233;rite un visage.<br><span>Parlons-en.<\/span><\/p>\n        <a class=\"btn\" href=\"https:\/\/www.freshorganicmotion.com\/contact\/\">Demander un premier &#233;change gratuit<\/a>\n        <p class=\"rep\">Nous r&#233;pondons sous 48h.<\/p>\n      <\/div>\n      <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/dibby-mascotte-application-digibadge-pose-victoire.webp\" alt=\"Dibby en pose victoire\" width=\"700\" height=\"700\" loading=\"lazy\">\n    <\/div>\n  <\/div>\n<\/section>\n\n<button type=\"button\" class=\"fun\" data-fun aria-label=\"Plus de fun : faire d&#233;filer une vague de Dibby\"><span class=\"tete\" aria-hidden=\"true\"><svg viewBox=\"51 91 264 233\" aria-hidden=\"true\"> <path fill=\"#561de1\" d=\"M295.08,206.73c-5.78-2.77-13.06-3.71-20.51-2.66-.66-4.46-1.1-7.48-1.16-7.88,1.25-12.74-.02-27.74-3.47-41.17-.09-.34-.18-.68-.27-1.02.05.03.1.06.15.1,2.01,1.14,4.08,2.33,6.41,2.59.23.03.48.05.73.08,2.39.22,5.42.08,7.02-2.24,1.71-2.22,1.85-5.51.32-7.82l-.02-.04c-2.27-3.3-7.88-5.83-12.42-6.89-2.41-.55-4.89-.84-7.44-.88-.39-.9-.8-1.78-1.22-2.65,2.4.34,4.87.93,7.1,1.47l.14.03c2.46.6,4.69,1.07,7.03.83,2.65-.17,5.08-1.63,6.49-3.91,1.4-2.25,1.62-4.92.62-7.32-1.45-3.6-5.14-5.29-8.2-6.35-4.44-1.51-9.3-1.99-14.05-1.39,0,0,0,0,0,0h-.07c-2.74.33-5.52,1.27-7.87,2.36-.62-.79-1.26-1.56-1.91-2.3,1.89-.89,3.93-1.62,6.13-2.02.29-.05.58-.1.88-.14.89-.14,1.81-.28,2.64-.59,3.74-1.45,6-5.62,5.13-9.49-.43-2.17-1.74-4.04-3.69-5.25-1.99-1.24-4.41-1.61-6.62-1.02h-.03c-4.86,1.14-11.09,4.73-14.39,9.51-11.05-7.76-24.43-10.66-39.9-8.6-13.56,2.41-24.54,7.93-32.88,16.48-4.71-3.94-10.71-6.14-16.87-6.1-4.79.03-8.93,1.45-11.09,3.8-1.62,1.72-2.29,4.11-1.83,6.56.5,2.68,2.23,4.97,4.61,6.1,1.32.7,2.73,1.17,4.2,1.4,1.9.3,4.61.44,7.47.59,1.41.07,2.87.15,4.22.24.02,0,.05,0,.07,0-.81,1.49-1.57,3.02-2.29,4.61-.39-.07-.79-.14-1.2-.2-5.59-.86-11.49-.42-17.05,1.24-4.37,1.19-10.49,4.16-13.74,7.54-2.18,2.21-3.01,5.41-2.16,8.36.82,2.85,3.04,4.95,5.95,5.63.48.11.99.19,1.5.24.68.06,1.39.06,2.08,0,4.52-.14,12.23-1.99,19.03-4.67-.14.72-.27,1.44-.4,2.17-4.35,1.77-10.04,4.93-13.54,9.37l-.18.23c-1.74,2.15-3.38,4.18-3.53,7.01,0,0,0,.01,0,.02v.07c0,2.73,1.57,5.1,4.08,6.17.67.29,1.37.46,2.06.52,1.87.17,3.74-.47,5.18-1.85.88-.91,1.71-2.05,2.5-3.16.56-.78,1.13-1.57,1.72-2.27-.51,11.07.14,23.37,1.96,36.83-.3.79-2.33,6.56-2.94,19.08-.04.87-.07,1.75-.1,2.64-5.24-2.34-10.99-6.21-16.2-12.62-7.34-9.03-11.63-18.31-15.41-26.5-4.43-9.59-8.26-17.88-15.68-24.22-5.44-5.34-12.79-7.8-20.18-6.74-5.46.78-10.52,3.49-14.26,7.63-3.68,4.07-5.94,9.36-6.36,14.9,0,0,0,.01,0,.02,0,.14-.33,13.82,3.47,30.37,2.23,9.73,5.44,18.53,9.52,26.18,5.11,9.56,11.62,17.32,19.34,23.04,18.71,13.86,38.42,18.42,52.52,19.69.95.09,1.87.16,2.76.21,1.9.12,3.75.19,5.53.21.67,3.54,1.36,6.9,2.04,10,0,.03.5,3.16,1.7,6.56,0,0,0,0,0,0v.03s0,0,0,0c0,.07.03.14.09.2,3.09,8.06,9.96,13.57,17.25,14.23,1.23.11,2.48.08,3.71-.09,4.13-.59,7.81-2.65,10.65-5.96,2.69-3.13,4.45-7.14,5.08-11.6.39-2.75.38-5.75-.05-8.91l55.67-8.33c.21,1.77,1.37,9.59,5.84,15.05,3.7,4.84,9.74,7.31,15.76,6.45,9.18-1.31,15.59-9.85,14.27-19.04-.16-1.1-1-6.07-1.97-11.82-1.38-8.14-3.09-18.27-3.54-21.44-.14-.96-.3-2.06-.47-3.28l.71-3.34c14.77-2.62,25.44-12.58,24-22.66-.72-5.07-4.35-9.4-10.2-12.2Z\"\/> <\/svg><\/span>Plus de fun !<\/button>\n<div class=\"parade\" aria-hidden=\"true\"><\/div>\n<template id=\"dg-tpl\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" viewBox=\"0 0 965.9 864.3\">\n  \n  <defs>\n    <radialGradient id=\"dg182\" data-name=\"D&#233;grad&#233; sans nom 182\" cx=\"273.7\" cy=\"514.6\" fx=\"273.7\" fy=\"514.6\" r=\"439\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\".2\" stop-color=\"#561de1\"\/>\n      <stop offset=\".7\" stop-color=\"#ea33ed\"\/>\n    <\/radialGradient>\n    <radialGradient id=\"dg189\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"884.1\" cy=\"230.5\" fx=\"884.1\" fy=\"230.5\" r=\"87.1\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\".1\" stop-color=\"#ea33ed\"\/>\n      <stop offset=\".8\" stop-color=\"#561de1\"\/>\n    <\/radialGradient>\n    <radialGradient id=\"dg1891\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"828.4\" cy=\"205.5\" fx=\"828.4\" fy=\"205.5\" r=\"0\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg1892\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"882.6\" cy=\"155.1\" fx=\"882.6\" fy=\"155.1\" r=\"105.7\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg1893\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"798.4\" cy=\"140.5\" fx=\"798.4\" fy=\"140.5\" r=\"0\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg1894\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"833.1\" cy=\"77\" fx=\"833.1\" fy=\"77\" r=\"89\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg1895\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"778.4\" cy=\"80.5\" fx=\"778.4\" fy=\"80.5\" r=\"0\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg1896\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"379.5\" cy=\"244.9\" fx=\"379.5\" fy=\"244.9\" r=\"92.1\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg1897\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"400.5\" cy=\"220.5\" fx=\"400.5\" fy=\"220.5\" r=\"0\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg1898\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"390.9\" cy=\"158.6\" fx=\"390.9\" fy=\"158.6\" r=\"127.1\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg1899\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"430.5\" cy=\"140.5\" fx=\"430.5\" fy=\"140.5\" r=\"0\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg18910\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"449.1\" cy=\"80.5\" fx=\"449.1\" fy=\"80.5\" r=\"114.7\" xlink:href=\"#dg189\"\/>\n    <radialGradient id=\"dg18911\" data-name=\"D&#233;grad&#233; sans nom 189\" cx=\"470.5\" cy=\"80.5\" fx=\"470.5\" fy=\"80.5\" r=\"0\" xlink:href=\"#dg189\"\/>\n    <linearGradient id=\"dg10\" data-name=\"D&#233;grad&#233; sans nom 10\" x1=\"824.3\" y1=\"446.5\" x2=\"965.4\" y2=\"443.9\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"#561de1\"\/>\n      <stop offset=\".7\" stop-color=\"#ea33ed\"\/>\n    <\/linearGradient>\n    <linearGradient id=\"dg101\" data-name=\"D&#233;grad&#233; sans nom 10\" x1=\"867.1\" y1=\"408.9\" x2=\"947.4\" y2=\"407.4\" xlink:href=\"#dg10\"\/>\n    <linearGradient id=\"dg102\" data-name=\"D&#233;grad&#233; sans nom 10\" x1=\"750.8\" y1=\"527.5\" x2=\"1042\" y2=\"522.2\" gradientTransform=\"translate(5.6 -9) rotate(.6)\" xlink:href=\"#dg10\"\/>\n    <linearGradient id=\"dg99\" data-name=\"D&#233;grad&#233; sans nom 99\" x1=\"737.5\" y1=\"517.9\" x2=\"840.5\" y2=\"619.5\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"#a6cc40\"\/>\n      <stop offset=\"1\" stop-color=\"#feffde\"\/>\n    <\/linearGradient>\n    <linearGradient id=\"dg991\" data-name=\"D&#233;grad&#233; sans nom 99\" x1=\"618.2\" y1=\"527\" x2=\"723\" y2=\"630.4\" gradientTransform=\"translate(83 -54.5) rotate(.5)\" xlink:href=\"#dg99\"\/>\n    <linearGradient id=\"dg13\" data-name=\"D&#233;grad&#233; sans nom 13\" x1=\"715.7\" y1=\"496\" x2=\"866\" y2=\"646.7\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"#feffde\"\/>\n      <stop offset=\".7\" stop-color=\"#a6cc40\"\/>\n    <\/linearGradient>\n    <radialGradient id=\"dg22\" data-name=\"D&#233;grad&#233; sans nom 22\" cx=\"586.7\" cy=\"531.2\" fx=\"723\" fy=\"582\" r=\"145.4\" gradientTransform=\"translate(0 -16.3) scale(1 1)\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\".2\" stop-color=\"#561de1\"\/>\n      <stop offset=\".7\" stop-color=\"#ea33ed\"\/>\n    <\/radialGradient>\n  <\/defs>\n  <g data-part=\"ombre\">\n    <ellipse cx=\"573.5\" cy=\"831.7\" rx=\"307.3\" ry=\"30.1\" fill=\"#561de1\" opacity=\".2\"\/>\n  <\/g>\n  <g data-part=\"queue\">\n    <path d=\"M4.6,250.5c9.4-44.6,47.6-78.2,93.8-78.7,30.9-.3,58.6,14.3,76.6,37.4,50,55.5,45.5,135.1,98.2,220.9,55.8,90.8,146.3,84.5,146.3,84.5l-9.3,189.7s-178,18.6-318-116.9C-30.4,468.7,4.6,250.5,4.6,250.5Z\" fill=\"url(#dg182)\"\/>\n    <path d=\"M291.9,464.6c-8.3-9.3-15.9-19.5-22.8-30.8-26-42.3-38.7-83.3-50-119.4-12.1-38.9-22.5-72.5-46.3-99l-.4-.5-.4-.5c-15.2-19.5-37.7-30.6-61.7-30.6h-.8c-37,.4-68.5,26.8-76.6,64.3-.7,5-8,56.5-1.9,119.9,10.5,108.8,51.6,169.4,84.3,201.1,52.9,51.2,111.5,79.4,163.1,94.9-2.9-93.8,4.9-158.2,13.6-199.5Z\" fill=\"#feffde\" opacity=\".2\"\/>\n    <path d=\"M110.9,309.4c-2.9,71.6,24.4,147.1,81,192.4,33.2,27,74.1,42.8,115.9,50.8,10.6,2,17.5,12.3,15.5,22.9-2.1,11.1-13.3,18.1-24.2,15.2-98.1-25.2-173.8-88.5-196.9-189.4-6.8-29.6-9.1-60.1-6.1-90.4.1-1,.2-1.9.4-3.1.6-3.9,4.2-6.7,8.1-6.1,3.9.5,6.5,4,6.2,7.8h0Z\" fill=\"#561de1\"\/>\n  <\/g>\n  <g data-part=\"branchie_g_3\">\n    <path d=\"M919.9,222.6c4.6,9.4,2.6,22.1-5.2,29.8-7.9,8.7-21.2,6.8-31,4.2-9-2.2-16.5-8-24-13.6-13.3-11.7-33.2-18.1-44.9-19.5-.9-.6-.6-1.3-.8-2.7-.2-7.5-2.2-31.2-1.9-39.2.8-2.2,3.8-1.7,5.9-1.9,19.5-.4,38.3,2.4,56,9,18.7,7,38.8,20.3,45.6,33.7h0Z\" fill=\"url(#dg189)\"\/>\n  <\/g>\n  <g data-part=\"point_rotation_branchie_g_3\">\n    <path d=\"M828.4,205.5\" fill=\"url(#dg1891)\"\/>\n  <\/g>\n  <g data-part=\"branchie_g_2\">\n    <path d=\"M847.1,102.5c19.5,0,38.4,4.6,55.3,12.9,12.5,6.3,25.3,14.9,28.9,29.1,5.7,21-11.7,41.2-33.2,39.8-9.7-.3-18.6-3.6-27.5-7-11.7-4.5-24.6-9.5-37-12-7.1-1.4-14.6-1.9-21.8-1.3-4.5.3-8.6,2-10.3-2.3-3-6.5-5.1-13.7-7.7-20.5-1.9-5.6-4.9-12.4-4.7-17.6.2-5.8,6-8,10.6-10.2,13.2-6.2,31.2-11.1,47.2-10.9h.3Z\" fill=\"url(#dg1892)\"\/>\n  <\/g>\n  <g data-part=\"point_rotation_branchie_g_2\">\n    <path d=\"M798.4,140.5\" fill=\"url(#dg1893)\"\/>\n  <\/g>\n  <g data-part=\"branchie_g_1\">\n    <path d=\"M835.5,25.2c18-2.4,35.5,11.1,36.6,29.5,1.4,15.8-9.7,30.4-24.7,34.1-4.5,1-9.6.8-14.3,1.1-19.5.9-37.2,8.4-51.2,15.3-2,1-2,1.5-3.9-1-3-3.9-12.3-16.2-16.4-21.6-2.9-3.6-2.1-5.7.3-10.3,1.5-3,3.3-6,5.2-8.8,14.1-22.3,46.3-36,68.2-38.1h.2Z\" fill=\"url(#dg1894)\"\/>\n  <\/g>\n  <g data-part=\"point_rotation_branchie_g_1\">\n    <path d=\"M778.4,80.5\" fill=\"url(#dg1895)\"\/>\n  <\/g>\n  <g data-part=\"brachie_d_3\">\n    <path d=\"M307,247.4c2.1-11.3,10.1-18.6,18.4-26.4,26.5-25.7,72.8-34.4,81.7-33.9,1.9-.1,1.7,1.2,2.8,3.2,3.6,9.6,18.5,45.2-3.1,49.3-4.4.9-9.6,1-13.9,1.4-8.1.8-14.6,2.9-20.8,7.6-8.2,5.9-15.9,16.6-24.3,23.3-18.3,13.4-43.7-1.8-40.8-24.3v-.3Z\" fill=\"url(#dg1896)\"\/>\n  <\/g>\n  <g data-part=\"point_rotation_branchie_d_3\">\n    <path d=\"M400.5,220.5\" fill=\"url(#dg1897)\"\/>\n  <\/g>\n  <g data-part=\"branchie_d_2\">\n    <path d=\"M286.3,129.4c14.8-11.8,41.3-20.4,58.7-22.8,22.8-3.7,46.8-2.4,68.8,4,22.4,6.2,33.6,15.7,37.6,19.2,1.7,2,1.8,3.5,2,7.1-1,15.5-20.9,26.5-34.5,31.9-32.1,13.9-85,21.9-111.2,19.3-4.5-.2-9.4-1.1-14-2.8-24-9.1-27.4-40.6-7.4-56Z\" fill=\"url(#dg1898)\"\/>\n  <\/g>\n  <g data-part=\"point_rotation_branchie_d_2\">\n    <path d=\"M430.5,140.5\" fill=\"url(#dg1899)\"\/>\n  <\/g>\n  <g data-part=\"branchie_d_1\">\n    <path d=\"M499.8,98.5c-.6,3.4-4,6.4-6.8,9.1-2.9,2.7-5.7,5.6-8.6,8.1-2.9,2.4-3.5,1.5-6.3-.9-13.4-11.6-29.8-20-47.4-22.9-15.8-3.2-35.2-6.2-46.5-9.5-5.6-1.6-10.9-4.2-15.8-7.7-16.9-11-20.6-37.1-4.4-50.3,21.7-18.2,83.6-13.4,117.5,33.9,7.2,9.9,11.8,19.2,16.5,31.5,1,2.7,2.3,6,1.8,8.5v.2Z\" fill=\"url(#dg18910)\"\/>\n  <\/g>\n  <g data-part=\"point_rotation_branchie_d_1\">\n    <path d=\"M470.5,80.5\" fill=\"url(#dg18911)\"\/>\n  <\/g>\n  <g data-part=\"corps\">\n    <g>\n      <g>\n        <path d=\"M333.2,770.5c0,.3,0,.6,0,0h0Z\" fill=\"#ea33ed\"\/>\n        <path d=\"M358.2,403.3C357.6,214.5,404.3,9.5,615.9,0c241.5-.2,266.4,275.4,233.6,415.6,0,0,2.5,160.6,3,213.9.2,22.2,4.4,126.1,4.5,137,.4,37-29.3,67.3-66.3,67.7-25.1.3-47.2-13.3-58.8-33.7-17-27.5-15.3-64.5-15.3-64.5l-231.7,4c.1,12.4-1.2,25.1-4.5,36.9-9.6,34.2-36.6,61-71.4,61.3-37,.4-67.2-30.7-75.8-67.9-3.1-14.4-3.4-27.3-3.4-27.3-21-252.6,28.4-339.9,28.4-339.9Z\" fill=\"#ea33ed\"\/>\n      <\/g>\n      <circle cx=\"649.3\" cy=\"426.9\" r=\"93.5\" fill=\"#fff\" opacity=\".2\"\/>\n      <path d=\"M333.2,770.5c0,.6,0,.3,0,0h0Z\" fill=\"#ea33ed\"\/>\n      <circle cx=\"413.7\" cy=\"256.3\" r=\"35.1\" fill=\"#fff\" opacity=\".2\"\/>\n      <circle cx=\"661.3\" cy=\"198\" r=\"35.1\" fill=\"#fff\" opacity=\".2\"\/>\n      <circle cx=\"452.5\" cy=\"394.6\" r=\"35.1\" fill=\"#fff\" opacity=\".2\"\/>\n      <g opacity=\".2\">\n        <path d=\"M333.2,770.5c0,.6,0,.3,0,0h0Z\" fill=\"#fff\"\/>\n        <path d=\"M329.8,743.2s.3,12.8,3.4,27.3c8.5,37.2,38.8,68.2,75.8,67.9,34.8-.4,61.8-27.1,71.4-61.3,3.3-11.8,4.6-24.5,4.5-36.9l231.7-4s-1.7,37,15.3,64.5c11.7,20.3,33.7,34,58.8,33.7,37-.4,66.7-30.7,66.3-67.7-.1-10.9-4.3-114.9-4.5-137-.2-17.6-.6-46.9-1-78.3-12.2-8.9-27.2-14.2-43.4-14.2-36.5,0-66.8,26.6-72.5,61.5-5.7-34.9-36-61.5-72.5-61.5s-66.8,26.6-72.5,61.5c-5.7-34.9-36-61.5-72.5-61.5s-66.8,26.6-72.5,61.5c-5.7-34.9-36-61.5-72.5-61.5s-33.3,6-45.9,16.1c-3.5,48.9-3.8,111.5,2.7,190.1Z\" fill=\"#fff\"\/>\n      <\/g>\n      <g opacity=\".2\">\n        <path d=\"M333.2,770.5c0,.3,0,.6,0,0h0Z\" fill=\"#561de1\"\/>\n        <path d=\"M333.2,770.5c0,.3,0,.6,0,0h0Z\" fill=\"#561de1\"\/>\n        <g>\n          <path d=\"M796.4,772.4c-24.6,0-44.7-35.5-46.5-80.5-14.7,1.1-29.7,1.7-45.1,1.7s-15.1-.1-22.6-.4v.4h-211.7c-2.3,44.3-22.2,78.9-46.5,78.9s-46.7-39.1-46.7-87.3,20.9-87.3,46.7-87.3h20.2c-2.8-6.7-4.2-13.7-4.2-20.8,0-53.6,82.2-98.8,194.2-112.4-94.8-27.3-167.1-164.1-167.1-257.3S548.5,27.5,652,19.9c-11.4-1.5-23.3-2.3-35.6-2.3-46.8,2.2-87.2,14.7-120,37.4-29.7,20.5-54.3,49.8-73,87.3-31.8,63.6-47.7,151.4-47.4,261v4.5c0,0-2.2,4.1-2.2,4.1-.1.2-11.7,21.9-20.7,73.1-15.1,85.8-11.3,187-5.5,256.8v.5s0,.5,0,.5c0,.1.3,11.4,3,23.9,6.2,26.9,28.1,54.1,57.9,54.1h.5c25-.3,46.5-19.3,54.7-48.5,2.7-9.5,4-20.3,3.8-32l-.2-17.5,249.2-4.3,18.7-.3-.8,18.6c0,.3-1.2,32.1,12.7,54.5l.3.5c8.8,15.3,25.2,24.9,42.8,24.9h.5c13.2-.1,25.5-5.4,34.8-14.8,9.2-9.4,14.2-21.9,14.1-35.1,0-3.9-.7-21.9-1.4-42.2-7.7,28.4-23.5,47.9-41.6,47.9Z\" fill=\"#561de1\"\/>\n          <path d=\"M424,597.8c-25.8,0-46.7,39.1-46.7,87.3s20.9,87.3,46.7,87.3,44.2-34.6,46.5-78.9h-46.5v-95.8Z\" fill=\"#561de1\"\/>\n          <path d=\"M444.2,597.8h-20.2c25.8,0,46.7,39.1,46.7,87.3s0,5.7-.2,8.5h211.7v-.4c-119.9-4.5-217-44.1-238-95.4Z\" fill=\"#561de1\"\/>\n          <path d=\"M424,597.8v95.8h46.5c.1-2.8.2-5.6.2-8.5,0-48.2-20.9-87.3-46.7-87.3Z\" fill=\"#561de1\"\/>\n        <\/g>\n      <\/g>\n    <\/g>\n  <\/g>\n  <g data-part=\"corps_saut\">\n    <g>\n      <g>\n        <path d=\"M290.1,790.4c0,.7,0,.3,0,0h0Z\" fill=\"#ea33ed\"\/>\n        <path d=\"M849.7,432c55-172.7,2.8-444.2-241.3-430.5-214.2,20.1-222.9,208.1-229.1,391.9,0,0-109.2,235.1-91.7,366.2,0,0-.3,14.5,2.6,30.8,8.1,42.3,41.9,76.1,85.1,73.8,77.8-4.3,108.1-63.6,130.2-109.5l182.7-10s43.5,97.1,122.7,92.8c57.2-3.1,85.3-44.7,82.7-84.6-.8-12.4-11.7-127.6-13.3-151.7-3.7-57.1-30.6-169.1-30.6-169.1Z\" fill=\"#ea33ed\"\/>\n      <\/g>\n      <path d=\"M750,396c1.7,52.6-43,98.5-99.9,101.6-57,3.1-103.1-37.8-103-90.5,0-51.8,44.8-95.6,100-98.6,55.2-3,101.2,35.8,102.9,87.5Z\" fill=\"#fff\" opacity=\".2\"\/>\n      <path d=\"M290.1,790.4c0,.7,0,.3,0,0h0Z\" fill=\"#ea33ed\"\/>\n      <path d=\"M434.6,245.7c.1,18.6-10.5,34.3-23.7,35.1s-23.9-13.8-23.9-32.4c0-18.5,10.7-33.9,23.7-34.7,13.1-.7,23.7,13.6,23.8,32.1Z\" fill=\"#fff\" opacity=\".2\"\/>\n      <path d=\"M694.2,176.4c.4,18.2-15.7,34-36.1,35.1-20.4,1.1-37.1-12.8-37.3-31.1-.2-18.1,16-33.6,36.1-34.7,20.1-1.1,36.8,12.6,37.3,30.7Z\" fill=\"#fff\" opacity=\".2\"\/>\n      <path d=\"M473.7,378.7c-.3,19.5-17.6,36.3-38.6,37.5-21.1,1.2-37.7-13.8-37.2-33.3.5-19.4,17.8-35.9,38.6-37.1,20.8-1.1,37.5,13.5,37.2,32.9Z\" fill=\"#fff\" opacity=\".2\"\/>\n      <g opacity=\".2\">\n        <path d=\"M290.1,790.4c0,.7,0,.3,0,0h0Z\" fill=\"#fff\"\/>\n      <\/g>\n      <g opacity=\".2\">\n        <g>\n          <path d=\"M290.1,790.4c0,.7,0,.3,0,0h0Z\" fill=\"#fff\"\/>\n          <path d=\"M287.6,759.6s-.3,14.5,2.6,30.8c8.1,42.3,41.9,76.1,85.1,73.8,77.8-4.3,108.1-63.6,130.2-109.5l182.7-10s43.5,97.1,122.7,92.8c57.2-3.1,85.3-44.7,82.7-84.6-.8-12.4-11.7-127.6-13.3-151.7-1.5-23.6-7-56.7-13-87.3-13-7.1-28.1-10.7-43.9-9.8-38.5,2.1-69.4,30.2-76.7,66.4-11.1-35.1-45-59.7-83.5-57.6-38.5,2.1-69.4,30.2-76.7,66.4-11.1-35.1-45-59.7-83.5-57.6-38.5,2.1-69.4,30.2-76.7,66.4-11.1-35.1-45-59.7-83.5-57.6-6.3.3-12.3,1.4-18.1,3-24.3,74-45.8,162.4-37.3,226.2Z\" fill=\"#fff\"\/>\n        <\/g>\n        <g>\n          <path d=\"M290.1,790.4c0,.7,0,.3,0,0h0Z\" fill=\"#fff\"\/>\n          <path d=\"M287.6,759.6s-.3,14.5,2.6,30.8c8.1,42.3,41.9,76.1,85.1,73.8,77.8-4.3,108.1-63.6,130.2-109.5l182.7-10s43.5,97.1,122.7,92.8c57.2-3.1,85.3-44.7,82.7-84.6-.8-12.4-11.7-127.6-13.3-151.7-1.5-23.6-7-56.7-13-87.3-13-7.1-28.1-10.7-43.9-9.8-38.5,2.1-69.4,30.2-76.7,66.4-11.1-35.1-45-59.7-83.5-57.6-38.5,2.1-69.4,30.2-76.7,66.4-11.1-35.1-45-59.7-83.5-57.6-38.5,2.1-69.4,30.2-76.7,66.4-11.1-35.1-45-59.7-83.5-57.6-6.3.3-12.3,1.4-18.1,3-24.3,74-45.8,162.4-37.3,226.2Z\" fill=\"#fff\"\/>\n        <\/g>\n      <\/g>\n      <g opacity=\".2\">\n        <g>\n          <path d=\"M290.1,790.4c0,.7,0,.3,0,0h0Z\" fill=\"#fff\"\/>\n          <path d=\"M824,763.4c-28.3,1.6-52.9-37.4-56.8-87.6-16.6,2.1-33.7,3.7-51.2,4.7-8.7.5-17.2.8-25.7.9-136.3,2.5-245.8-35.1-268.2-89.4-2.9-7.1-4.4-14.4-4.2-22,.6-28.4,23.8-55.6,62.2-78.3,0,0,106.1-72.2,148.9-79.5-155.4-33.6-176-125.1-174.4-214,1.6-91.4,85.6-168.8,190.5-181.2-11.6-.7-23.6-.8-36.2,0-121.4.6-165.1,99.4-185.3,134.8-34.7,61-27.6,239-27.6,239,0,0-38.6,80.4-50.4,133.4-20.2,91-41.5,155-38,232.7v.6s0,.6,0,.6c0,.1-.1,12.9,2.3,27,6,30.5,30.3,60.6,64.9,58.7h.6s65.3,10.8,111-103.2l214.9-10.1s34.2,85.8,114.4,84.3c1,0,1.9,0,2.9,0h.6c15.3-1,29.4-7.9,39.6-19.4,10.2-11.4,15.2-26,14.3-41-.3-4.4-2.1-24.8-4-47.5-7.2,32.5-24.3,55.6-45.3,56.8Z\" fill=\"#fff\"\/>\n        <\/g>\n        <g>\n          <path d=\"M290.1,790.4c0,.7,0,.3,0,0h0Z\" fill=\"#561de1\"\/>\n          <path d=\"M824,763.4c-28.3,1.6-52.9-37.4-56.8-87.6-16.6,2.1-33.7,3.7-51.2,4.7-8.7.5-17.2.8-25.7.9-136.3,2.5-245.8-35.1-268.2-89.4-2.9-7.1-4.4-14.4-4.2-22,.6-28.4,23.8-55.6,62.2-78.3,0,0,106.1-72.2,148.9-79.5-155.4-33.6-176-125.1-174.4-214,1.6-91.4,85.6-168.8,190.5-181.2-11.6-.7-23.6-.8-36.2,0-121.4.6-165.1,99.4-185.3,134.8-34.7,61-27.6,239-27.6,239,0,0-38.6,80.4-50.4,133.4-20.2,91-41.5,155-38,232.7v.6s0,.6,0,.6c0,.1-.1,12.9,2.3,27,6,30.5,30.3,60.6,64.9,58.7h.6s65.3,10.8,111-103.2l214.9-10.1s34.2,85.8,114.4,84.3c1,0,1.9,0,2.9,0h.6c15.3-1,29.4-7.9,39.6-19.4,10.2-11.4,15.2-26,14.3-41-.3-4.4-2.1-24.8-4-47.5-7.2,32.5-24.3,55.6-45.3,56.8Z\" fill=\"#561de1\"\/>\n        <\/g>\n      <\/g>\n    <\/g>\n  <\/g>\n  <g data-part=\"yeux_normaux\">\n    <circle cx=\"462.8\" cy=\"186.9\" r=\"25.3\"\/>\n    <circle cx=\"809.4\" cy=\"194\" r=\"20.6\"\/>\n    <circle cx=\"805.5\" cy=\"190.6\" r=\"6.9\" fill=\"#fff\"\/>\n    <circle cx=\"454.8\" cy=\"181.4\" r=\"6.9\" fill=\"#fff\"\/>\n  <\/g>\n  <g data-part=\"yeux_normaux_blink\">\n    <path d=\"M438.1,191.4c0-4.6,11.2-8.2,25.1-8.2s25.1,3.7,25.1,8.2\" fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"11\"\/>\n    <path d=\"M788.8,198.1c0-5.2,9.4-9.3,20.9-9.3s20.9,4.2,20.9,9.3\" fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"11\"\/>\n  <\/g>\n  <g data-part=\"yeux_exit&#233;__x2F__fou\">\n    <circle cx=\"417.9\" cy=\"170.5\" r=\"25.6\"\/>\n    <circle cx=\"839.2\" cy=\"178.1\" r=\"20.9\"\/>\n    <circle cx=\"844\" cy=\"171.6\" r=\"6.9\" fill=\"#fff\"\/>\n    <circle cx=\"409.6\" cy=\"165.2\" r=\"6.9\" fill=\"#fff\"\/>\n  <\/g>\n  <g data-part=\"bouche\">\n    <path d=\"M843.1,258.4c1.4,2.8,1.5,6.5,1.3,9.8-3.9,41.6-22.4,80.3-51.5,109.6-109.7,110.6-299.9,39.5-309.8-115.7-.5-11.6-2.6-23.3,11.4-26.6,68.9-21.3,160.6-26.3,234.5-14.2,39.9,6.3,76.1,16.8,106.4,30.6,3.1,1.4,6,3.3,7.5,6.3v.2Z\"\/>\n    <path d=\"M649.7,343h0c37-.4,67.6,29.6,68,66.5v2.4c0,4.1-.3,8.1-1,12.1-44.9,13.5-92.8,8.3-133.5-11.8v-1.2c-.4-37,29.5-67.6,66.5-68Z\" fill=\"#561de1\"\/>\n  <\/g>\n  <g data-part=\"effet_vitesse_bras_gauche\">\n    <path d=\"M959.7,470.3c-4-4.5-8.4-8.6-13.2-12.3-2.4-1.7-4.8-3.6-7.4-5.1-2.5-1.7-5.2-3.1-7.8-4.5-10.7-5.6-22.1-9.6-33.8-12.3-11.7-2.7-23.8-4-35.8-4.2-6-.2-12.1.1-18.1.6-6,.5-12,1.3-17.9,2.5l-.3-1.4c2.7-1.9,5.5-3.6,8.5-5,2.9-1.5,5.9-2.7,9-3.8,6.1-2.1,12.5-3.7,18.9-4.5,12.9-1.7,26.1-1.2,39,1.7,12.8,3,25.3,8.3,36.1,16.1,2.7,2,5.3,4.1,7.7,6.4,1.2,1.2,2.4,2.2,3.5,3.5,1.1,1.3,2.2,2.5,3.3,3.8,2,2.7,4,5.3,5.5,8.3.8,1.5,1.6,2.9,2.2,4.5.6,1.6,1.2,3.1,1.7,4.7l-1.1.9Z\" fill=\"url(#dg10)\"\/>\n    <path d=\"M943.5,422.7c-1.5-.8-2.9-1.5-4.4-2.3-1.5-.7-3-1.4-4.5-2.1-3-1.4-6.1-2.6-9.2-3.8-6.2-2.3-12.5-4.2-19-5.7-6.4-1.6-13-2.7-19.5-3.5-3.3-.4-6.6-.7-9.9-1-1.7-.1-3.3-.3-5-.3l-5-.2v-1.4c3.3-2.7,6.8-4.4,10.3-5.8,3.5-1.3,7.1-2.2,10.8-2.8,7.2-1,14.6-.7,21.6,1,7,1.6,13.8,4.6,19.9,8.9,3,2.2,5.8,4.7,8.4,7.6,2.5,2.9,4.7,6.2,6.3,10.2l-.7,1.2Z\" fill=\"url(#dg101)\"\/>\n  <\/g>\n  <g data-part=\"bras_gauche\">\n    <ellipse cx=\"851.8\" cy=\"525.6\" rx=\"114\" ry=\"76.1\" transform=\"translate(-5.5 9.1) rotate(-.6)\" fill=\"url(#dg102)\"\/>\n  <\/g>\n  <g data-part=\"point_rotation_bras_gauche\">\n    <path d=\"M915.7,525.8\" fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"11\"\/>\n  <\/g>\n  <g data-part=\"iphone_normal_de_dos\">\n    <path d=\"M891.1,473.3l-116.4-31.9c-5.2-1.4-10.6,1.3-12.5,6.3l-80.4,204.2c-2.6,6.5,1.8,13.6,8.8,14.3l131.2,12.3c4.8.4,9.3-2.4,10.9-6.9l65.6-184.6c2-5.7-1.2-12-7.1-13.6Z\" fill=\"url(#dg99)\"\/>\n    <path d=\"M776.9,445.2c.4-1,.9-1.9,1.6-2.8l-3.7-1c-5.2-1.4-10.6,1.3-12.5,6.3l-80.4,204.2c-2.5,6.3,1.6,13.2,8.2,14.2l87-220.9Z\" fill=\"#84a63a\"\/>\n    <path d=\"M880.4,501.4l-50.3-11.8c-5.2-1.2-10.5,1.7-12.3,6.7l-15.4,43.1c-2.3,6.3,1.9,13.1,8.5,13.9l52.4,6.7c4.9.6,9.6-2.3,11.2-6.9l13.3-38.1c2.1-5.9-1.4-12.2-7.5-13.7Z\" fill=\"#84a63a\"\/>\n    <path d=\"M859.8,515.4c-2.5,6.6.6,13,6.7,14s12.5-3.4,14.5-9.9c1.9-6.2-1-12-6.6-13.2-5.7-1.2-12.2,2.7-14.6,9Z\"\/>\n    <path d=\"M814,532.7c-2.8,7.4.6,14.7,7.6,15.9,6.8,1.2,14.2-3.9,16.4-11.2,2.2-7-1.2-13.6-7.5-15-6.4-1.4-13.8,3.1-16.5,10.2Z\"\/>\n  <\/g>\n  <g data-part=\"iphone_victoire_de_face_check\">\n    <g>\n      <g>\n        <path d=\"M892.9,472l-114.4-31.1c-5.2-1.4-10.6,1.2-12.5,6l-84.4,208.9c-2.8,7.1,1.8,14.5,9.3,14.9l138.2,7.5c4.9.3,9.4-2.9,11-7.7l60-185.6c1.8-5.5-1.6-11.5-7.2-13Z\" fill=\"url(#dg991)\"\/>\n        <path d=\"M775.7,446.6c.4,0,.9,0,1.3.2l114.4,31.1c1.2.3,2.2,1.1,2.8,2.2.3.6.8,1.8.3,3.2l-60,185.6c-.7,2.1-2.6,3.6-4.7,3.6s-.2,0-.2,0l-138.2-7.5c-2.2-.1-3.3-1.4-3.8-2.1-.8-1.3-1-3-.3-4.6l84.4-208.9c.6-1.6,2.2-2.6,4.1-2.6M775.7,440.6c-4.2,0-8.1,2.4-9.6,6.4l-84.4,208.9c-2.8,7.1,1.8,14.5,9.3,14.9l138.2,7.5c.2,0,.4,0,.6,0,4.7,0,8.9-3.1,10.4-7.7l60-185.6c1.8-5.5-1.6-11.5-7.2-13l-114.4-31.1c-1-.3-1.9-.4-2.9-.4h0Z\" fill=\"url(#dg13)\"\/>\n      <\/g>\n      <path d=\"M780.7,444.7c.4-1,.9-1.9,1.5-2.7l-3.7-1c-5.2-1.4-10.6,1.2-12.5,6l-84.4,208.9c-2.8,6.8,1.6,14.1,8.7,14.9l90.4-226.1Z\" fill=\"#84a63a\"\/>\n      <path d=\"M857.1,553.1l-51.5,33.4c-7,4.6-15.8,5.1-19.6.8-.6-.6-.9-1.3-1.2-2.1l-15.6-17.7c-5.3-6-2.6-15.2,6-19.9,8.4-4.6,18.7-2.8,22.8,3.4l7.7,11.7,44.9-27.1c6.2-3.7,12.4-2.4,13.9,2.5,1.5,4.7-1.9,11.4-7.4,15h0Z\" fill=\"#84a63a\" fill-rule=\"evenodd\"\/>\n    <\/g>\n  <\/g>\n  <g data-part=\"bras_droit\">\n    <path d=\"M531.8,453.1c-4.7-1-9.5-1.5-14.5-1.5-38.9,0-70.4,31.5-70.4,70.4s23.9,62.1,55.7,68.9c65.1,21.9,213.7,38.2,223.4-22.4,10.6-57.9-163-112.5-194.3-115.5Z\" fill=\"url(#dg22)\"\/>\n    <path d=\"M612.3,587.7c-45.3,0-93.7-9.5-121.7-18.9l-1-.3-1-.2c-24.2-5.1-41.8-26.9-41.8-51.7s23.7-52.8,52.8-52.8,7.3.4,10.9,1.1l.9.2h1c25.4,2.5,143.7,40.9,173.3,80.1,4.3,5.7,6.1,10.6,5.3,14.8v.4c-2.8,17.1-32.3,27.3-78.8,27.3h0Z\" fill=\"#561de1\" opacity=\".2\"\/>\n  <\/g>\n  <g data-part=\"point_rotation_bras_droit\">\n    <path d=\"M488.1,517.8\" fill=\"#561de1\"\/>\n  <\/g>\n  <g data-part=\"point_rotation_queue\">\n    <path d=\"M387.2,601.7\" fill=\"#561de1\"\/>\n  <\/g>\n<\/svg><\/template>\n<\/div>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script>\n(function(){\nvar FEET='590 838', SHADOW='573.5 831.7';\nvar GILLS=[['branchie_g_1','branchie_g_1'],['branchie_g_2','branchie_g_2'],['branchie_g_3','branchie_g_3'],['branchie_d_1','branchie_d_1'],['branchie_d_2','branchie_d_2'],['brachie_d_3','branchie_d_3']];\nvar R=function(a,b){return a+Math.random()*(b-a)};\nvar TPL=document.getElementById('dg-tpl').innerHTML;\nvar NS='http:\/\/www.w3.org\/2000\/svg', UID=0;\n\nfunction createAxo(stage,opts){\n  opts=opts||{};\n  var wrap=document.createElement('div'); wrap.className='axo'+(opts.main?' main':''); wrap.innerHTML=TPL.replace(\/dg(\\d+)\/g,'dg$1_'+(++UID)); stage.appendChild(wrap);\n  var svg=wrap.querySelector('svg');\n  var P=function(n){return svg.querySelector('[data-part=\"'+n+'\"]')};\n  var piv={};\n  svg.querySelectorAll('[data-part^=\"point_rotation_\"]').forEach(function(g){\n    var m=g.querySelector('path').getAttribute('d').match(\/M\\s*([\\d.]+)[,\\s]+([\\d.]+)\/);\n    piv[g.dataset.part.replace('point_rotation_','')]=m[1]+' '+m[2]; g.remove();\n  });\n  var G=function(){return document.createElementNS(NS,'g')};\n  var saut=G(), perso=G(), brasGauche=G(), brasDroit=G(), ombre=P('ombre');\n  var partsG=['effet_vitesse_bras_gauche','bras_gauche'].map(P), partsD=['iphone_normal_de_dos','iphone_victoire_de_face_check','bras_droit'].map(P);\n  Array.prototype.slice.call(svg.children).filter(function(c){return c.tagName!=='defs'&&c!==ombre}).forEach(function(c){perso.appendChild(c)});\n  partsG.forEach(function(n){brasGauche.appendChild(n)}); partsD.forEach(function(n){brasDroit.appendChild(n)});\n  perso.appendChild(brasGauche); perso.appendChild(brasDroit); saut.appendChild(perso); svg.appendChild(saut);\n  var el={corps:P('corps'),corpsSaut:P('corps_saut'),yeux:P('yeux_normaux'),blink:P('yeux_normaux_blink'),fou:P('yeux_exit\\u00e9__x2F__fou'),\n    phone:P('iphone_normal_de_dos'),check:P('iphone_victoire_de_face_check'),vitesse:P('effet_vitesse_bras_gauche'),queue:P('queue')};\n  var show=function(e,v){e.style.display=v?'':'none'};\n  [el.corpsSaut,el.blink,el.fou,el.check].forEach(function(e){show(e,false)});\n  gsap.set(el.vitesse,{opacity:0});\n  var speed=opts.speed||1, tweens=[];\n  var a={wrap:wrap,svg:svg,saut:saut,ombre:ombre,busy:false,alive:true};\n\n  GILLS.forEach(function(g,i){var amp=R(6,10);\n    tweens.push(gsap.fromTo(P(g[0]),{rotation:-amp,svgOrigin:piv[g[1]]},{rotation:amp,svgOrigin:piv[g[1]],duration:R(.28,.4)\/speed,ease:'sine.inOut',yoyo:true,repeat:-1,delay:i*.07}))});\n  tweens.push(gsap.fromTo(el.queue,{rotation:-4,svgOrigin:piv.queue},{rotation:6,svgOrigin:piv.queue,duration:.55\/speed,ease:'sine.inOut',yoyo:true,repeat:-1}));\n  tweens.push(gsap.to(perso,{scaleY:1.025,scaleX:.99,svgOrigin:FEET,duration:.45\/speed,ease:'sine.inOut',yoyo:true,repeat:-1}));\n\n  (function blinkLoop(){ gsap.delayedCall(R(1.5,4),function(){ if(!a.alive) return;\n    if(!a.busy){ show(el.yeux,false); show(el.blink,true); gsap.delayedCall(.12,function(){ if(!a.busy){show(el.blink,false); show(el.yeux,true);} }); }\n    blinkLoop(); }); })();\n\n  a.typeTl=gsap.timeline({repeat:-1,paused:!opts.typing});\n  for(var k=0;k<3;k++){ var taps=Math.round(R(5,9));\n    a.typeTl.set(el.vitesse,{opacity:1})\n      .fromTo(brasGauche,{rotation:-3,svgOrigin:piv.bras_gauche},{rotation:7,svgOrigin:piv.bras_gauche,duration:.06,ease:'power1.inOut',yoyo:true,repeat:taps*2-1})\n      .to(brasDroit,{rotation:-1.2,svgOrigin:piv.bras_droit,duration:.06,yoyo:true,repeat:taps*2-1},'<')\n      .set(el.vitesse,{opacity:0}).to(brasGauche,{rotation:0,duration:.1}).to({},{duration:R(.3,.7)}); }\n  tweens.push(a.typeTl);\n\n  a.jump=function(){\n    if(a.busy) return; a.busy=true; a.typeTl.pause(); gsap.set(el.vitesse,{opacity:0});\n    var look=function(v){show(el.corps,!v);show(el.corpsSaut,v);show(el.yeux,!v);show(el.blink,false);show(el.fou,v);show(el.phone,!v);show(el.check,v)};\n    gsap.timeline({onComplete:function(){a.busy=false; if(opts.typing) a.typeTl.play();}})\n      .to(saut,{scaleY:.84,scaleX:1.1,svgOrigin:FEET,duration:.14,ease:'power2.in'})\n      .add(function(){look(true)})\n      .to(saut,{y:-R(200,260),scaleY:1.08,scaleX:.94,duration:.34,ease:'power2.out'})\n      .to(ombre,{scale:.55,opacity:.5,svgOrigin:SHADOW,duration:.34,ease:'power2.out'},'<')\n      .to(brasDroit,{rotation:-10,x:45,y:10,svgOrigin:piv.bras_droit,duration:.3,ease:'back.out(3)'},'<')\n      .to(brasGauche,{rotation:18,svgOrigin:piv.bras_gauche,duration:.3,ease:'back.out(3)'},'<')\n      .to(el.vitesse,{opacity:opts.typing?1:0,duration:.1},'<')\n      .to(saut,{y:0,scaleY:1.02,scaleX:.98,duration:.28,ease:'power2.in'})\n      .to(ombre,{scale:1,opacity:1,duration:.28,ease:'power2.in'},'<')\n      .to([brasDroit,brasGauche],{rotation:0,x:0,y:0,duration:.28,ease:'power2.in'},'<')\n      .to(el.vitesse,{opacity:0,duration:.2},'<')\n      .add(function(){look(false)})\n      .to(saut,{scaleY:.86,scaleX:1.08,duration:.07,ease:'power1.out'})\n      .to(saut,{scaleY:1,scaleX:1,duration:.5,ease:'elastic.out(1,.35)'});\n  };\n  a.setTyping=function(v){\n    opts.typing=v;\n    if(v){ if(!a.busy) a.typeTl.play(); return; }\n    a.typeTl.pause(); gsap.set(el.vitesse,{opacity:0});\n    if(!a.busy) gsap.to([brasGauche,brasDroit],{rotation:0,duration:.15,overwrite:'auto'});\n  };\n  a.destroy=function(){a.alive=false; tweens.forEach(function(t){t.kill()}); gsap.killTweensOf(wrap); wrap.remove();};\n  wrap.addEventListener('click',a.jump);\n  return a;\n}\n\n\/* Hero : un seul Dibby *\/\nvar heroStage=document.querySelector('.fom-dg [data-scene=\"hero\"]');\nvar hero=createAxo(heroStage,{main:true,typing:true});\ngsap.from(hero.saut,{y:-400,duration:.7,ease:'bounce.out',delay:.2});\n\n\/* Terrain de jeu : multiplication en profondeur *\/\nvar stage=document.querySelector('.fom-dg [data-scene=\"jeu\"]');\nvar root=stage.closest('.jeu'), compteur=root.querySelector('[data-compteur]');\nvar typing=true, main=createAxo(stage,{main:true,typing:true}), axos=[main];\nvar ROWS=[[14,86],[22,50,78],[10,36,64,90],[6,26,46,66,86]], slots=[];\nfunction resetSlots(){slots=[];ROWS.forEach(function(r,d){r.forEach(function(x){slots.push({d:d,x:x})})});slots.sort(function(){return Math.random()-.5});slots.sort(function(a,b){return a.d-b.d})}\nresetSlots();\nvar MAX=1+ROWS.reduce(function(n,r){return n+r.length},0);\nfunction upd(){compteur.textContent='\\u00d7'+(axos.length<10?'0':'')+axos.length}\nfunction multiply(){\n  if(axos.length>=MAX) return; stage.classList.add('crowd');\n  var n=Math.min(axos.length,MAX-axos.length);\n  for(var i=0;i<n;i++){(function(i){\n    var c=createAxo(stage,{speed:R(.9,1.4),typing:typing}), s=slots.shift(), depth=s.d\/3;\n    var k=stage.clientWidth<600?1.45:1, w=(26-depth*15)*k+R(-1.5,1.5), bottom=2+depth*(k>1?48:42)+R(-2,2);\n    c.wrap.style.width=w+'%'; c.wrap.style.left=(s.x-w\/2+R(-3,3))+'%'; c.wrap.style.bottom=bottom+'%'; c.wrap.style.zIndex=Math.round(400-bottom*5);\n    if(Math.random()<.5) c.svg.style.transform='scaleX(-1)';\n    var mr=main.wrap.getBoundingClientRect(), cr=c.wrap.getBoundingClientRect();\n    gsap.from(c.wrap,{x:mr.left+mr.width\/2-(cr.left+cr.width\/2),y:mr.top+mr.height\/2-(cr.top+cr.height\/2),scale:.2,duration:.7,ease:'back.out(1.6)',delay:i*.07,onComplete:c.jump});\n    axos.push(c);\n  })(i)}\n  main.jump(); upd();\n}\nroot.querySelectorAll('[data-act]').forEach(function(b){b.addEventListener('click',function(){\n  var act=b.dataset.act;\n  if(act==='jump') axos.forEach(function(a,i){ if(i===0) a.jump(); else gsap.delayedCall(R(0,.3),a.jump); });\n  if(act==='multi') multiply();\n  if(act==='type'){typing=!typing; b.classList.toggle('on',typing); b.setAttribute('aria-checked',typing); axos.forEach(function(a){a.setTyping(typing)})}\n  if(act==='reset'){axos.splice(1).forEach(function(a){a.destroy()}); stage.classList.remove('crowd'); resetSlots(); upd();}\n})});\nupd();\n\n\/* T\\u00e9l\\u00e9phone du bloc Pourquoi : la conversation se d\\u00e9roule en boucle *\/\ndocument.querySelectorAll('.fom-dg [data-chat]').forEach(function(chat){\n  var msgs=chat.querySelectorAll('.msg'), k=0;\n  (function suite(){\n    if(k===msgs.length){ gsap.delayedCall(3,function(){ msgs.forEach(function(m){m.classList.remove('on')}); k=0; suite(); }); return; }\n    msgs[k].classList.add('on'); k++;\n    gsap.delayedCall(k===msgs.length?.6:1.1,suite);\n  })();\n});\n\n\/* Images de Dibby : pas de clic droit ni de glisser-d\\u00e9poser (demande de DigiBadge) *\/\n['contextmenu','dragstart'].forEach(function(ev){\n  document.addEventListener(ev,function(e){\n    if(e.target.closest && e.target.closest('.fom-dg img:not(.avatar), .fom-dg .axo, .fom-dg .tel-zone, .fom-dg .fun')) e.preventDefault();\n  });\n});\n\n\/* Bouton fixe : une vague de Dibby traverse l'\\u00e9cran *\/\nvar parade=document.querySelector('.fom-dg .parade'), enVol=0;\nfunction traverse(){\n  if(enVol>=18) return; enVol++;\n  var dir=Math.random()<.5?1:-1, vw=window.innerWidth, vh=window.innerHeight;\n  var size=Math.round(R(.6,1)*Math.min(190,vw*.32));\n  var a=createAxo(parade,{speed:R(1.1,1.6),typing:Math.random()<.5});\n  a.wrap.style.width=size+'px'; a.wrap.style.top=Math.round(R(.04,.96)*(vh-size*.9))+'px';\n  a.wrap.style.left=(dir>0?-size:vw)+'px'; a.wrap.style.zIndex=Math.round(size);\n  if(dir<0) a.svg.style.transform='scaleX(-1)';\n  var d=R(2.4,4.2);\n  gsap.to(a.wrap,{x:dir*(vw+size*1.2),duration:d,ease:'none',onComplete:function(){a.destroy();enVol--;}});\n  var hop=R(.26,.34), n=Math.ceil(d\/hop);\n  gsap.to(a.saut,{y:-R(140,240),duration:hop,ease:'sine.out',yoyo:true,repeat:n});\n  gsap.fromTo(a.saut,{rotation:-6,svgOrigin:FEET},{rotation:6,svgOrigin:FEET,duration:.3,yoyo:true,repeat:Math.ceil(d\/.3),ease:'sine.inOut'});\n  gsap.to(a.ombre,{scale:.6,opacity:.55,svgOrigin:SHADOW,duration:hop,ease:'sine.out',yoyo:true,repeat:n});\n}\ndocument.querySelector('.fom-dg [data-fun]').addEventListener('click',function(){\n  for(var i=0;i<10;i++) gsap.delayedCall(i*R(.08,.16),traverse);\n});\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&#201;tude de cas &#183; DigiBadge, l&rsquo;appli des 10-16 ans Une mascotte pour application mobile qu&rsquo;on a envie de suivre DigiBadge apprend aux ados &#224; naviguer sur Internet en confiance, badge apr&#232;s badge. Il leur fallait un compagnon que les ados aient envie de suivre et que les parents aient envie de croire. On a cr&#233;&#233;&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-13038","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mascotte pour application mobile : le cas Dibby | FOM<\/title>\n<meta name=\"description\" content=\"Dibby, l&#039;axolotl de DigiBadge, est n\u00e9 au crayon puis anim\u00e9. Croquis, logo, animation, droits c\u00e9d\u00e9s : comment on cr\u00e9e une mascotte d&#039;application mobile.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.freshorganicmotion.com\/en\/mascotte-application-mobile\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mascotte pour application mobile : le cas Dibby | FOM\" \/>\n<meta property=\"og:description\" content=\"Dibby, l&#039;axolotl de DigiBadge, est n\u00e9 au crayon puis anim\u00e9. Croquis, logo, animation, droits c\u00e9d\u00e9s : comment on cr\u00e9e une mascotte d&#039;application mobile.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.freshorganicmotion.com\/en\/mascotte-application-mobile\/\" \/>\n<meta property=\"og:site_name\" content=\"Fresh Organic Motion\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/freshorganicmotion.studio\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-20T14:00:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/creation-mascotte-application-croquis-piste-1-axolotl.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/mascotte-application-mobile\\\/\",\"url\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/mascotte-application-mobile\\\/\",\"name\":\"Mascotte pour application mobile : le cas Dibby | FOM\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/mascotte-application-mobile\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/mascotte-application-mobile\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/wp-content\\\/uploads\\\/creation-mascotte-application-croquis-piste-1-axolotl.webp\",\"datePublished\":\"2026-10-19T13:37:24+00:00\",\"dateModified\":\"2026-10-20T14:00:22+00:00\",\"description\":\"Dibby, l'axolotl de DigiBadge, est n\u00e9 au crayon puis anim\u00e9. Croquis, logo, animation, droits c\u00e9d\u00e9s : comment on cr\u00e9e une mascotte d'application mobile.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/mascotte-application-mobile\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.freshorganicmotion.com\\\/mascotte-application-mobile\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/mascotte-application-mobile\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/wp-content\\\/uploads\\\/creation-mascotte-application-croquis-piste-1-axolotl.webp\",\"contentUrl\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/wp-content\\\/uploads\\\/creation-mascotte-application-croquis-piste-1-axolotl.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/mascotte-application-mobile\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dibby Digibadge mascotte application mobile\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/#website\",\"url\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/\",\"name\":\"Fresh Organic Motion\",\"description\":\"Studio de mascottes de marque 2D et 3D\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/#organization\",\"name\":\"Fresh Organic Motion\",\"url\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/wp-content\\\/uploads\\\/cropped-fresh-organic-motion-logo-2.png\",\"contentUrl\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/wp-content\\\/uploads\\\/cropped-fresh-organic-motion-logo-2.png\",\"width\":512,\"height\":512,\"caption\":\"Fresh Organic Motion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/freshorganicmotion.studio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/freshorganicmotion.studio\\\/\",\"https:\\\/\\\/www.behance.net\\\/freshorganicmotion\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mascotte pour application mobile : le cas Dibby | FOM","description":"Dibby, l'axolotl de DigiBadge, est n\u00e9 au crayon puis anim\u00e9. Croquis, logo, animation, droits c\u00e9d\u00e9s : comment on cr\u00e9e une mascotte d'application mobile.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.freshorganicmotion.com\/en\/mascotte-application-mobile\/","og_locale":"en_US","og_type":"article","og_title":"Mascotte pour application mobile : le cas Dibby | FOM","og_description":"Dibby, l'axolotl de DigiBadge, est n\u00e9 au crayon puis anim\u00e9. Croquis, logo, animation, droits c\u00e9d\u00e9s : comment on cr\u00e9e une mascotte d'application mobile.","og_url":"https:\/\/www.freshorganicmotion.com\/en\/mascotte-application-mobile\/","og_site_name":"Fresh Organic Motion","article_publisher":"https:\/\/www.facebook.com\/freshorganicmotion.studio\/","article_modified_time":"2026-10-20T14:00:22+00:00","og_image":[{"url":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/creation-mascotte-application-croquis-piste-1-axolotl.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.freshorganicmotion.com\/mascotte-application-mobile\/","url":"https:\/\/www.freshorganicmotion.com\/mascotte-application-mobile\/","name":"Mascotte pour application mobile : le cas Dibby | FOM","isPartOf":{"@id":"https:\/\/www.freshorganicmotion.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.freshorganicmotion.com\/mascotte-application-mobile\/#primaryimage"},"image":{"@id":"https:\/\/www.freshorganicmotion.com\/mascotte-application-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/creation-mascotte-application-croquis-piste-1-axolotl.webp","datePublished":"2026-10-19T13:37:24+00:00","dateModified":"2026-10-20T14:00:22+00:00","description":"Dibby, l'axolotl de DigiBadge, est n\u00e9 au crayon puis anim\u00e9. Croquis, logo, animation, droits c\u00e9d\u00e9s : comment on cr\u00e9e une mascotte d'application mobile.","breadcrumb":{"@id":"https:\/\/www.freshorganicmotion.com\/mascotte-application-mobile\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.freshorganicmotion.com\/mascotte-application-mobile\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.freshorganicmotion.com\/mascotte-application-mobile\/#primaryimage","url":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/creation-mascotte-application-croquis-piste-1-axolotl.webp","contentUrl":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/creation-mascotte-application-croquis-piste-1-axolotl.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/www.freshorganicmotion.com\/mascotte-application-mobile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.freshorganicmotion.com\/"},{"@type":"ListItem","position":2,"name":"Dibby Digibadge mascotte application mobile"}]},{"@type":"WebSite","@id":"https:\/\/www.freshorganicmotion.com\/#website","url":"https:\/\/www.freshorganicmotion.com\/","name":"Fresh Organic Motion","description":"2D and 3D Brand Mascot Studio","publisher":{"@id":"https:\/\/www.freshorganicmotion.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.freshorganicmotion.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.freshorganicmotion.com\/#organization","name":"Fresh Organic Motion","url":"https:\/\/www.freshorganicmotion.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.freshorganicmotion.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/cropped-fresh-organic-motion-logo-2.png","contentUrl":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/cropped-fresh-organic-motion-logo-2.png","width":512,"height":512,"caption":"Fresh Organic Motion"},"image":{"@id":"https:\/\/www.freshorganicmotion.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/freshorganicmotion.studio\/","https:\/\/www.instagram.com\/freshorganicmotion.studio\/","https:\/\/www.behance.net\/freshorganicmotion"]}]}},"_links":{"self":[{"href":"https:\/\/www.freshorganicmotion.com\/en\/wp-json\/wp\/v2\/pages\/13038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freshorganicmotion.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.freshorganicmotion.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.freshorganicmotion.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freshorganicmotion.com\/en\/wp-json\/wp\/v2\/comments?post=13038"}],"version-history":[{"count":29,"href":"https:\/\/www.freshorganicmotion.com\/en\/wp-json\/wp\/v2\/pages\/13038\/revisions"}],"predecessor-version":[{"id":13109,"href":"https:\/\/www.freshorganicmotion.com\/en\/wp-json\/wp\/v2\/pages\/13038\/revisions\/13109"}],"wp:attachment":[{"href":"https:\/\/www.freshorganicmotion.com\/en\/wp-json\/wp\/v2\/media?parent=13038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}