{"id":13041,"date":"2026-10-11T15:15:22","date_gmt":"2026-10-11T13:15:22","guid":{"rendered":"https:\/\/www.freshorganicmotion.com\/?page_id=13041"},"modified":"2026-10-11T15:20:24","modified_gmt":"2026-10-11T13:20:24","slug":"%eb%aa%a8%ec%85%98-%eb%94%94%ec%9e%90%ec%9d%b8-%eb%a6%b4","status":"publish","type":"page","link":"https:\/\/www.freshorganicmotion.com\/ko\/%eb%aa%a8%ec%85%98-%eb%94%94%ec%9e%90%ec%9d%b8-%eb%a6%b4\/","title":{"rendered":"\ub9b4 \ubaa8\uc158 \ub514\uc790\uc778"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13041\" class=\"elementor elementor-13041\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13442c9 e-con-full e-flex e-con e-parent\" data-id=\"13442c9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5caae13 elementor-widget elementor-widget-html\" data-id=\"5caae13\" 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 | \/motion-design-lille\/ | BLOC 1 sur 4 : widget HTML Elementor n&#176;1 -->\n<style>\n@font-face{font-family:'Dotties Vanilla Black';src:url('https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/DottiesVanilla-Black.woff2') format('woff2');font-display:swap}\n\/* Charte FOM v2 : cr\\0000e8me, marron, corail (CTA), menthe (accents), violet Mimi, jaune, teal (fonds sombres) *\/\n.fom-mdl{--white:#FFFFFF;--cream:#FFF4F2;--surface:#FFFFFF;--rose:#FFD8DE;--line:rgba(88,43,40,.12);--ink:#582b28;--ink-soft:#8B4A3A;\n  --signal:#00c4b4;--signal-d:#009E91;--signal-l:#00c4b4;--warm:#FF5A3C;--warm-d:#582b28;--violet:#b08fcc;--jaune:#F5C518;--teal:#1B4A4B;\n  --display:\"Dotties Vanilla Black\",\"Tajawal\",system-ui,sans-serif;--sans:\"Tajawal\",system-ui,-apple-system,sans-serif;\n  --mono:\"Tajawal\",system-ui,sans-serif;--ease:cubic-bezier(.16,1,.3,1);\n  --glow:0 4px 24px rgba(255,90,60,.32);\n  --sh-s:0 2px 12px rgba(88,43,40,.07);--sh-c:0 8px 32px rgba(88,43,40,.12);--sh-h:0 24px 64px rgba(88,43,40,.16);\n  --r:20px;--r-lg:28px;--r-xl:32px;--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-mdl *,.fom-mdl *::before,.fom-mdl *::after{box-sizing:border-box}\n.fom-mdl :where(h1,h2,h3,p,ul,figure){margin:0;padding:0}\n.fom-mdl a{color:inherit}\n.fom-mdl img{max-width:100%;display:block;height:auto}\n.fom-mdl svg{display:block;width:100%;height:auto;overflow:visible}\n.fom-mdl .w{max-width:1160px;margin-inline:auto;padding-inline:24px;position:relative;z-index:1}\n.fom-mdl section{padding:clamp(66px,9vw,112px) 0;position:relative}\n.fom-mdl h1,.fom-mdl h2,.fom-mdl h3{font-family:var(--display);line-height:1.1;letter-spacing:0;font-weight:900;color:var(--ink)}\n.fom-mdl h1{font-size:clamp(2.3rem,4.6vw,3.7rem);margin-bottom:24px}\n.fom-mdl h2{font-size:clamp(1.95rem,3.8vw,3.05rem);margin-bottom:18px}\n.fom-mdl h3{font-size:1.3rem;line-height:1.2}\n.fom-mdl p{margin-bottom:14px}\n.fom-mdl .lead{font-size:clamp(1.05rem,1.5vw,1.24rem);color:var(--ink-soft);max-width:58ch}\n.fom-mdl .soft{color:var(--ink-soft)}\n.fom-mdl .tag{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-d);\n  display:flex;align-items:center;gap:14px;margin-bottom:22px;font-weight:800}\n.fom-mdl .tag::before{content:\"\";width:8px;height:8px;border-radius:50%;background:var(--warm);flex:none}\n.fom-mdl .hl{padding:0 .12em;margin:0 -.12em;background:linear-gradient(transparent 56%,rgba(0,196,180,.32) 56%);\n  -webkit-box-decoration-break:clone;box-decoration-break:clone}\n.fom-mdl .mono{font-family:var(--mono)}\n.fom-mdl .halo{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(14px);\n  background:radial-gradient(circle,rgba(0,196,180,.34) 0%,rgba(0,196,180,.12) 38%,transparent 70%)}\n.fom-mdl .halo.warm{background:radial-gradient(circle,rgba(255,90,60,.32) 0%,rgba(255,90,60,.1) 38%,transparent 70%)}\n.fom-mdl .alt{background:var(--surface);box-shadow:var(--sh-c);border-radius:var(--r-xl);margin-inline:clamp(12px,2vw,26px);overflow:hidden}\n\n\/* boutons *\/\n.fom-mdl .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:var(--pill);\n  font-family:var(--sans);font-weight:800;font-size:1.02rem;line-height:1.2;text-decoration:none;border:1px solid transparent;cursor:pointer;\n  transition:transform .25s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .3s}\n.fom-mdl .btn-primary{background:var(--warm);color:var(--cream);box-shadow:var(--glow)}\n.fom-mdl .btn-primary:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px);box-shadow:var(--sh-c)}\n.fom-mdl .btn-ghost{border:2px solid var(--ink);color:var(--ink);background:transparent;padding:12px 24px}\n.fom-mdl .btn-ghost:hover{background:var(--ink);color:var(--cream)}\n.fom-mdl .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}\n.fom-mdl :focus-visible{outline:2px solid var(--signal);outline-offset:3px}\n\n\/* HERO *\/\n.fom-mdl .hero{padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px);overflow:hidden}\n  background-image:linear-gradient(rgba(0,196,180,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(0,196,180,.13) 1px,transparent 1px);\n  background-size:52px 52px;animation:mdlGrid 5s linear infinite;\n  -webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 40%,#000 6%,transparent 74%);mask-image:radial-gradient(ellipse 70% 66% at 50% 40%,#000 6%,transparent 74%)}\n@keyframes mdlGrid{to{background-position:52px 52px,52px 52px}}\n.fom-mdl .hero .halo{width:min(900px,120vw);aspect-ratio:1;top:-40%;right:-20%;animation:mdlBreathe 11s var(--ease) infinite}\n@keyframes mdlBreathe{50%{transform:scale(1.08);opacity:.65}}\n.fom-mdl .hero .w{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}\n.fom-mdl .pill{display:inline-flex;align-items:center;gap:11px;background:var(--white);box-shadow:var(--sh-s);\n  border-radius:var(--pill);padding:8px 18px;font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;\n  color:var(--signal-d);font-weight:800;margin-bottom:24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}\n.fom-mdl .pill::before{content:\"\";width:8px;height:8px;border-radius:50%;background:var(--warm);animation:mdlBlink 2.6s ease-in-out infinite}\n@keyframes mdlBlink{50%{opacity:.35}}\n.fom-mdl .hero .lead{margin-bottom:32px}\n.fom-mdl .hero-note{font-family:var(--mono);font-size:.86rem;font-weight:700;color:var(--ink-soft);margin-top:22px}\n  background:var(--white);border:1px solid var(--line);border-radius:var(--pill);padding:6px 12px;color:var(--ink);white-space:nowrap;\n  box-shadow:0 10px 26px -14px rgba(88,43,40,.45)}\n\n\n\/* MANIFESTE *\/\n.fom-mdl .chips{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--white);box-shadow:var(--sh-s);border-radius:var(--pill);margin:26px 0 40px;width:max-content;max-width:100%}\n.fom-mdl .chips button{font:800 .95rem var(--sans);color:var(--ink-soft);background:none;border:0;padding:9px 18px;border-radius:var(--pill);cursor:pointer;\n  display:inline-flex;align-items:center;gap:8px;transition:color .25s,background .25s}\n.fom-mdl .chips button::before{content:\"\";width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .25s,box-shadow .25s}\n.fom-mdl .chips button[aria-pressed=\"true\"]{background:var(--ink);color:var(--cream)}\n.fom-mdl .chips button[aria-pressed=\"true\"]::before{background:var(--signal)}\n.fom-mdl .beats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}\n.fom-mdl .beats::before{content:\"\";position:absolute;left:12%;right:12%;top:86px;border-top:3px dotted var(--warm);z-index:0}\n.fom-mdl .beat{position:relative;z-index:1;background:var(--white);box-shadow:var(--sh-s);border-radius:var(--r-lg);padding:0 26px 26px;\n  transition:box-shadow .3s,transform .3s var(--ease)}\n.fom-mdl .beat:hover{transform:translateY(-3px);box-shadow:var(--sh-h)}\n.fom-mdl .beat .ped{position:relative;width:52%;max-width:150px;margin:-46px auto 8px}\n.fom-mdl .beat .ped img{position:absolute;width:62%;transform:translate(-50%,-90%)}\n.fom-mdl .beat .who{font-family:var(--mono);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-d);display:block;margin-bottom:10px;font-weight:600}\n.fom-mdl .beat strong{display:block;font-weight:700;font-size:1.06rem;line-height:1.5;transition:opacity .25s,transform .25s var(--ease)}\n.fom-mdl .beat strong.out{opacity:0;transform:translateY(8px)}\n.fom-mdl .beats-wrap{padding-top:60px}\n\n\/* AVANT \/ APR\\0000c8S *\/\n.fom-mdl .ba{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}\n.fom-mdl .compare{position:relative;aspect-ratio:1\/1;border-radius:var(--r-xl);overflow:hidden;background:var(--white);\n  box-shadow:var(--sh-c);touch-action:pan-y;user-select:none;-webkit-user-select:none}\n.fom-mdl .compare .bg{position:absolute;inset:0;background:var(--white)}\n.fom-mdl .compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%;pointer-events:none}\n.fom-mdl .compare .after-bg{position:absolute;inset:0;background:var(--rose);clip-path:inset(0 0 0 var(--pos,50%))}\n.fom-mdl .compare .after{clip-path:inset(0 0 0 var(--pos,50%))}\n.fom-mdl .compare .bar{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:var(--ink);transform:translateX(-50%);box-shadow:0 0 14px rgba(0,196,180,.8)}\n.fom-mdl .compare .knob{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;\n  background:var(--ink);border:3px solid var(--cream);box-shadow:var(--sh-c);display:grid;place-items:center;color:var(--cream);font-weight:800;pointer-events:none}\n.fom-mdl .compare .lab{position:absolute;top:16px;font-family:var(--mono);font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:var(--pill);background:var(--ink);color:var(--cream)}\n.fom-mdl .compare .l1{left:16px}.fom-mdl .compare .l2{right:16px;background:var(--signal);color:var(--ink)}\n.fom-mdl .compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}\n\n\/* MOTION GRAPHICS VS PERSONNAGE *\/\n.fom-mdl .vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}\n.fom-mdl .vcard{position:relative;overflow:hidden;box-shadow:var(--sh-c);background:var(--white);border-radius:var(--r-xl);padding:clamp(24px,3vw,34px);display:grid;grid-template-columns:1fr 42%;gap:18px;align-items:center}\n.fom-mdl .vcard .who{font-family:var(--mono);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-d);display:block;margin-bottom:12px;font-weight:600}\n.fom-mdl .vcard h3{font-size:1.6rem;margin-bottom:10px}\n.fom-mdl .vcard p{color:var(--ink-soft);font-size:.95rem;margin:0}\n.fom-mdl .vcard.hot{background:var(--teal);color:var(--cream)}\n.fom-mdl .vcard.hot h3{color:var(--cream)}.fom-mdl .vcard.hot p{color:rgba(255,244,242,.72)}.fom-mdl .vcard.hot .who{color:var(--signal-l)}\n.fom-mdl .vcard.hot .halo{width:90%;aspect-ratio:1;right:-30%;top:-30%;left:auto}\n.fom-mdl .vcard.hot img{position:relative;z-index:1;filter:drop-shadow(0 16px 20px rgba(0,0,0,.35));animation:mdlWave 3s ease-in-out infinite;transform-origin:50% 90%}\n@keyframes mdlWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) translateY(-4px)}50%{transform:rotate(3deg)}75%{transform:rotate(-2deg) translateY(-2px)}}\n.fom-mdl .note{margin-top:22px;font-family:var(--mono);font-size:1rem;color:var(--ink-soft)}\n.fom-mdl .note b{color:var(--ink)}\n\n\/* EXEMPLE GRDF *\/\n.fom-mdl .case{display:grid;grid-template-columns:1.25fr 1fr;gap:0;background:var(--white);border-radius:var(--r-xl);overflow:hidden;margin-top:40px;box-shadow:var(--sh-c);transition:box-shadow .3s}\n.fom-mdl .case:hover{box-shadow:var(--sh-h)}\n.fom-mdl .thumb{position:relative;aspect-ratio:16\/9;background:var(--ink);border:0;padding:0;margin:0;width:100%;height:100%;cursor:pointer;display:block;overflow:hidden}\n.fom-mdl .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}\n.fom-mdl .thumb:hover img{transform:scale(1.03)}\n.fom-mdl .thumb .play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:var(--warm);box-shadow:var(--glow);display:grid;place-items:center;transition:transform .3s var(--ease)}\n.fom-mdl .thumb:hover .play{transform:scale(1.12)}\n.fom-mdl .thumb .play svg{width:26px;margin-left:4px}\n.fom-mdl .thumb .dur{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-weight:800;font-size:.8rem;letter-spacing:.12em;background:rgba(88,43,40,.85);color:var(--cream);padding:5px 11px;border-radius:var(--pill)}\n.fom-mdl .thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}\n.fom-mdl .case .meta{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}\n.fom-mdl .case .client{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:var(--signal-d);text-transform:uppercase;font-weight:800}\n.fom-mdl .case h3{font-size:1.5rem;margin:10px 0 10px}\n.fom-mdl .case p{color:var(--ink-soft);font-size:.95rem}\n.fom-mdl .partis{list-style:none;display:grid;gap:10px;margin:8px 0 18px;padding:0}\n.fom-mdl .partis li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.45}\n.fom-mdl .partis li span{font-family:var(--mono);font-size:.8rem;font-weight:900;color:var(--ink);background:var(--jaune);border-radius:var(--pill);padding:3px 7px;flex:none;margin-top:1px}\n.fom-mdl .kpi{margin-top:auto;padding-top:14px;border-top:2px solid var(--line);font-family:var(--mono);font-weight:700;font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ink)}\n.fom-mdl .more{margin-top:16px;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;text-decoration:none;font-size:1rem;font-weight:800;color:var(--warm);transition:gap .25s var(--ease)}\n.fom-mdl .more:hover{gap:14px}\n.fom-mdl .more i{width:26px;height:26px;border-radius:50%;border:2px solid var(--warm);display:grid;place-items:center;font-style:normal;font-size:.95rem;transition:background .25s,color .25s}\n.fom-mdl .more:hover i{background:var(--warm);color:var(--cream)}\n.fom-mdl .loop{margin-top:28px;border-radius:var(--r-lg);background:var(--cream);padding:22px clamp(14px,3vw,34px) 14px}\n.fom-mdl .loop .tag{margin-bottom:6px}\n.fom-mdl .loop svg{max-width:760px;margin-inline:auto}\n\n\/* M\\0000c9THODE *\/\n.fom-mdl .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;align-items:start}\n.fom-mdl .step{text-align:left;font:inherit;color:inherit;background:var(--white);border:0;box-shadow:var(--sh-s);border-radius:var(--r-lg);padding:22px;cursor:pointer;\n  transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s,border-color .3s}\n.fom-mdl .step:hover{transform:translateY(-3px);box-shadow:var(--sh-c)}\n.fom-mdl .step .lieu{display:block;aspect-ratio:1\/0.82;margin:-6px -6px 10px;display:grid;place-items:center}\n.fom-mdl .step .lieu img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}\n.fom-mdl .step:hover .lieu img{transform:translateY(-4px) scale(1.02)}\n.fom-mdl .step .lieu-nom{display:block;font-size:.8rem;color:var(--ink-soft);font-style:italic;margin-bottom:12px;line-height:1.35;min-height:2.7em}\n.fom-mdl .step[aria-expanded=\"true\"] .lieu-nom{color:rgba(255,244,242,.7)}\n.fom-mdl .step .n{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:var(--signal-d);font-weight:800;display:block}\n.fom-mdl .step h3{margin:6px 0 0;font-size:1.12rem}\n.fom-mdl .step p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-soft);max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .35s,margin .35s}\n.fom-mdl .step[aria-expanded=\"true\"]{background:var(--teal);color:var(--cream);box-shadow:var(--sh-h)}\n.fom-mdl .step[aria-expanded=\"true\"] h3{color:var(--cream)}\n.fom-mdl .step[aria-expanded=\"true\"] .n{color:var(--signal-l)}\n.fom-mdl .step[aria-expanded=\"true\"] p{max-height:220px;opacity:1;margin-top:10px;color:rgba(255,244,242,.74)}\n\n\/* BRUXELLES *\/\n.fom-mdl .local{background:var(--teal);color:var(--cream);border-radius:var(--r-xl);margin-inline:clamp(12px,2vw,26px);overflow:hidden}\n.fom-mdl .local h2{color:var(--cream)}\n.fom-mdl .local .tag{color:var(--signal-l)}\n.fom-mdl .local p{color:rgba(255,244,242,.78)}\n.fom-mdl .local p strong{color:var(--cream)}\n.fom-mdl .local .halo{width:70%;aspect-ratio:1;right:-10%;top:-20%}\n.fom-mdl .local .w{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}\n.fom-mdl .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}\n.fom-mdl .pills span{border:2px solid rgba(255,244,242,.2);border-radius:var(--pill);padding:5px 14px;font-size:.92rem;color:var(--cream)}\n.fom-mdl .remote{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,244,242,.14);border:2px solid rgba(255,244,242,.14);border-radius:var(--r);overflow:hidden;margin-top:26px}\n.fom-mdl .remote div{background:var(--teal);padding:14px 16px}\n.fom-mdl .remote b{display:block;font-family:var(--display);font-size:1.4rem;font-weight:900;color:var(--signal-l);line-height:1.1}\n.fom-mdl .remote span{font-size:.78rem;color:rgba(255,255,255,.66);line-height:1.35;display:block;margin-top:4px}\n\n\/* FORMATS *\/\n.fom-mdl .formats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}\n.fom-mdl .fmt{background:var(--white);padding:26px 22px;border-radius:var(--r-lg);box-shadow:var(--sh-c);position:relative;overflow:hidden;transition:box-shadow .3s}\n.fom-mdl .fmt::before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:var(--bar,var(--warm))}\n.fom-mdl .fmt:nth-child(2){--bar:var(--signal)}.fom-mdl .fmt:nth-child(3){--bar:var(--violet)}.fom-mdl .fmt:nth-child(4){--bar:var(--jaune)}\n.fom-mdl .fmt:hover{box-shadow:var(--sh-h)}\n.fom-mdl .fmt .iso-fmt{width:120px;margin-bottom:16px;transition:transform .4s var(--ease)}\n.fom-mdl .fmt:hover .iso-fmt{transform:translateY(-5px)}\n.fom-mdl .fmt h3{font-size:1.06rem;margin-bottom:6px}\n.fom-mdl .fmt p{font-size:.9rem;color:var(--ink-soft);margin:0}\n.fom-mdl .fmt a{color:var(--signal-d)}\n\n\/* FAQ *\/\n.fom-mdl .faq{max-width:860px}\n.fom-mdl details{background:var(--white);border-radius:var(--r);margin-bottom:12px;box-shadow:var(--sh-s);padding-left:24px}\n.fom-mdl summary{list-style:none;cursor:pointer;padding:22px 56px 22px 0;font-weight:800;font-size:1.1rem;position:relative;line-height:1.4}\n.fom-mdl summary::-webkit-details-marker{display:none}\n.fom-mdl summary::after{content:\"+\";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--cream);color:var(--ink);\n  display:grid;place-items:center;font-family:var(--sans);font-weight:500;font-size:1.1rem;transition:transform .3s var(--ease),background .25s,color .25s}\n.fom-mdl details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--ink);color:var(--cream)}\n.fom-mdl details .a{padding:0 56px 22px 0;color:var(--ink-soft)}\n.fom-mdl details .a p{margin:0}\n.fom-mdl details a{color:var(--signal-d)}\n\n\/* CTA *\/\n.fom-mdl .cta-card{position:relative;overflow:hidden;background:var(--rose);border-radius:var(--r-xl);padding:clamp(34px,5vw,60px);\n  box-shadow:var(--sh-c);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:center}\n.fom-mdl .cta-card .halo{width:60%;aspect-ratio:1;left:-14%;top:-40%}\n.fom-mdl .cta-card>*:not(.halo){position:relative;z-index:1}\n.fom-mdl .cta-art{position:relative;width:clamp(240px,30vw,380px)}\n.fom-mdl .cta-art .tile{width:100%}\n.fom-mdl .cta-art .mimi{position:absolute;width:30%;left:55%;top:80%;transform:translate(-50%,-92%);filter:drop-shadow(0 16px 20px rgba(88,43,40,.25))}\n.fom-mdl .cta-card .lead{margin-bottom:24px}\n\n\/* apparition *\/\n.fom-anim .fom-mdl .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}\n.fom-anim .fom-mdl .rv.in{opacity:1;transform:none}\n\n\/* mobile *\/\n@media (max-width:960px){\n  .fom-mdl .hero .w,.fom-mdl .ba,.fom-mdl .local .w,.fom-mdl .case{grid-template-columns:1fr}\n  .fom-mdl .scene{width:100%;max-width:640px;margin:30px auto 10px}\n  .fom-mdl .hs-tag{display:none}\n  .fom-mdl .beats{grid-template-columns:1fr;gap:64px}\n  .fom-mdl .beats::before{display:none}\n  .fom-mdl .vs{grid-template-columns:1fr}\n  .fom-mdl .steps,.fom-mdl .formats{grid-template-columns:1fr 1fr}\n  .fom-mdl .mapbox{max-width:600px}\n}\n@media (max-width:560px){\n  .fom-mdl{font-size:16px}\n  .fom-mdl .w{padding-inline:16px}\n  .fom-mdl .steps,.fom-mdl .formats{grid-template-columns:1fr}\n  .fom-mdl .step .lieu{max-width:230px;margin:0 auto 8px}\n  .fom-mdl .chips{width:100%;border-radius:var(--r)}\n  .fom-mdl .chips button{flex:1 1 100%}\n  .fom-mdl .vcard{grid-template-columns:1fr 36%}\n  .fom-mdl .cta-card{grid-template-columns:1fr;text-align:center}\n  .fom-mdl .cta-art{margin-inline:auto}\n  .fom-mdl .cta-card .ctas{justify-content:center}\n  .fom-mdl .ctas .btn{width:100%}\n  .fom-mdl .remote b{font-size:1.2rem}\n  .fom-mdl .scene .chip{font-size:.58rem;padding:4px 9px}\n  .fom-mdl .loop{overflow-x:auto}\n  .fom-mdl .loop svg{min-width:560px}\n}\n@media (prefers-reduced-motion:reduce){\n  .fom-mdl *,.fom-mdl *::before,.fom-mdl *::after{animation:none!important;transition:none!important}\n  .fom-mdl .rv{opacity:1;transform:none}\n  .fom-mdl .hs-bank,.fom-mdl .hs-water{stroke-dashoffset:0}\n  .fom-mdl .hs-flow,.fom-mdl .hs-glint,.fom-mdl .hs-pin,.fom-mdl .hs-tag{opacity:1}\n}\n\n\n\/* ============ COUCHE TH\\0000c9\\0000c2TRE : sc\\0000e8ne, rideau, troupe, Mimi baladeur ============ *\/\n.fom-mdl{--velours:#FF5A3C;--or:#F5C518;--coulisse:#582b28;--trait:#9b6e5b;--plancher:#FFD8DE}\n.fom-mdl .hero .halo{width:min(820px,110vw);aspect-ratio:1;top:-36%;right:-24%;animation:mdlBreathe 11s var(--ease) infinite}\n@keyframes mdlBreathe{50%{transform:scale(1.08);opacity:.65}}\n.fom-mdl .scene{position:relative;width:112%;margin-left:-2%}\n.fom-mdl .stage-hint{margin:12px 0 0;text-align:center;font-size:.86rem;font-weight:700;color:var(--ink-soft)}\n\n\/* hero : colonne texte plus large, titre plus contenu *\/\n@media (min-width:961px){.fom-mdl .hero .w{grid-template-columns:.82fr 1.18fr}}\n.fom-mdl h1{font-size:clamp(2.2rem,3.9vw,3.25rem)}\n\/* --- la sc\\0000e8ne (rep\\0000e8re 1000 x 720) --- *\/\n.fom-mdl .stage{position:relative;aspect-ratio:1000\/720;border-radius:var(--r-xl);overflow:hidden;background:var(--coulisse);border:3px solid var(--trait);--mx:0;isolation:isolate}\n.fom-mdl .stage>*{position:absolute}\n.fom-mdl .stage .back{inset:0;background:var(--coulisse)}\n.fom-mdl .stage .floor{left:0;right:0;top:76%;bottom:0;background:var(--plancher);border-top:3px solid var(--trait)}\n.fom-mdl .stage .floor::before{content:\"\";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 7.2%,var(--trait) 7.2% calc(7.2% + 2px));opacity:.45}\n\/* projecteur : c\\0000f4ne + flaque de lumi\\0000e8re, suit un peu la souris *\/\n.fom-mdl .stage .spot{left:27%;width:46%;top:0;height:88%;z-index:1;pointer-events:none;background:var(--cream);opacity:0;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);transform:translateX(calc(var(--mx) * 6%));transition:transform .9s var(--ease)}\n.fom-mdl .stage .pool{left:31%;width:38%;top:79%;height:13%;border-radius:50%;z-index:1;pointer-events:none;background:var(--jaune);opacity:0;transform:translateX(calc(var(--mx) * 8%));transition:transform .9s var(--ease)}\n.fom-mdl .stage.go .spot,.fom-mdl .stage.go .pool{animation:mdlOn .5s 2.9s forwards}\n@keyframes mdlOn{30%{opacity:.1}45%{opacity:.03}to{opacity:.14}}\n.fom-mdl .stage.go .pool{animation-name:mdlOnP}\n@keyframes mdlOnP{30%{opacity:.25}45%{opacity:.08}to{opacity:.4}}\n\n\/* acteurs : pos\\0000e9s par les pieds (left\/top = point au sol) *\/\n.fom-mdl .act{position:absolute;transform:translate(-50%,-100%);background:none;border:0;padding:0;cursor:pointer;z-index:2;display:block}\n.fom-mdl .act img{width:100%;display:block}\n.fom-mdl .act .p2{position:absolute;inset:0;opacity:0}\n.fom-mdl .a-roua img,.fom-mdl .a-sto img{position:absolute;left:0;top:0;opacity:0;transition:opacity .12s}\n.fom-mdl .a-roua img:first-child,.fom-mdl .a-sto img:first-child{position:relative}\n.fom-mdl .a-roua img.on,.fom-mdl .a-sto img.on{opacity:1}\n.fom-mdl .a-ski{z-index:1}\n.fom-mdl .a-ski .p2{transition:opacity .15s}\n.fom-mdl .stage.go .a-ski .p1{animation:mdlOff .01s 2.1s forwards}\n.fom-mdl .stage.go .a-ski .p2{animation:mdlIn .01s 2.1s forwards}\n@keyframes mdlOff{to{opacity:0}}@keyframes mdlIn{to{opacity:1}}\n.fom-mdl .a-mimi .pop{display:block;transform-origin:50% 100%}\n.fom-mdl .stage.go .a-mimi .pop{animation:mdlPop .7s 3.1s cubic-bezier(.2,1.5,.4,1) both}\n@keyframes mdlPop{from{transform:scale(.82,1.12) translateY(-8px)}55%{transform:scale(1.1,.9)}to{transform:none}}\n.fom-mdl .a-mimi img{transform-origin:50% 100%;animation:mdlIdle 3.2s 4s ease-in-out infinite}\n@keyframes mdlIdle{0%,100%{transform:none}50%{transform:scale(1.02,.98)}}\n.fom-mdl .act.hop{animation:mdlHop .6s cubic-bezier(.3,.7,.3,1)}\n@keyframes mdlHop{0%{transform:translate(-50%,-100%)}25%{transform:translate(-50%,-100%) scale(1.06,.9)}55%{transform:translate(-50%,-112%) scale(.96,1.05)}80%{transform:translate(-50%,-100%) scale(1.03,.96)}100%{transform:translate(-50%,-100%)}}\n.fom-mdl .a-ski.hop .p2{opacity:1}\n\n\/* bulles *\/\n.fom-mdl .bulle{position:absolute;z-index:6;background:var(--white);color:var(--ink);font:900 clamp(.62rem,1.35vw,.95rem)\/1.2 var(--sans);padding:.55em .85em .45em;border-radius:14px;border:2.5px solid var(--trait);white-space:nowrap;pointer-events:none}\n.fom-mdl .bulle::after{content:\"\";position:absolute;bottom:-9px;width:14px;height:14px;background:var(--white);border:solid var(--trait);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}\n.fom-mdl .bulle.hop{animation:mdlBul .45s cubic-bezier(.2,1.6,.4,1)}\n@keyframes mdlBul{from{transform:scale(.4);opacity:0}}\n.fom-mdl .b-roua{left:-38%;top:-4%;transform-origin:80% 100%}\n.fom-mdl .b-roua::after{right:22%}\n.fom-mdl .stage.go .b-roua{animation:mdlBul .45s 3.5s cubic-bezier(.2,1.6,.4,1) both}\n\n\/* rideau : deux pans de velours qui se froncent vers les c\\0000f4t\\0000e9s *\/\n.fom-mdl .rideau{top:6%;bottom:0;width:43%;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 34px,var(--trait) 34px 36.5px),var(--velours);border:solid var(--trait);border-width:0 3px}\n.fom-mdl .rideau::after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:2.4%;background:var(--or);border-top:2.5px solid var(--trait)}\n.fom-mdl .rideau.g{left:7.5%;transform-origin:0 0}\n.fom-mdl .rideau.d{right:7.5%;transform-origin:100% 0}\n.fom-mdl .stage.go .rideau.g{animation:mdlOpenG 1.6s 2s cubic-bezier(.65,0,.25,1) forwards}\n.fom-mdl .stage.go .rideau.d{animation:mdlOpenD 1.6s 2s cubic-bezier(.65,0,.25,1) forwards}\n@keyframes mdlOpenG{to{transform:scaleX(.1)}}\n@keyframes mdlOpenD{to{transform:scaleX(.1)}}\n.fom-mdl .affiche{left:20%;right:20%;top:32%;z-index:4;text-align:center;color:var(--cream);font:900 clamp(1.1rem,3vw,2.3rem)\/1.05 var(--display);\n  pointer-events:none}\n.fom-mdl .affiche small{display:block;font:800 clamp(.5rem,1.1vw,.78rem)\/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:.8em}\n.fom-mdl .stage.go .affiche{animation:mdlOff .4s 1.9s forwards}\n\/* manteau d'arlequin + lambrequin *\/\n.fom-mdl .drape{top:0;bottom:0;width:8.5%;z-index:4;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 24px,var(--trait) 24px 26.5px),var(--velours);border-right:3px solid var(--trait)}\n.fom-mdl .drape.g{left:0;border-radius:0 0 60% 0\/0 0 12% 0}\n.fom-mdl .drape.d{right:0;transform:scaleX(-1);border-radius:0 0 60% 0\/0 0 12% 0}\n.fom-mdl .valance{left:0;right:0;top:0;height:11%;z-index:5;pointer-events:none;background:radial-gradient(circle at 50% 0,var(--velours) 0 56%,var(--trait) 56% 60%,var(--or) 60% 68%,var(--trait) 68% 71%,transparent 71%) 0 100%\/7.2% 46% repeat-x,linear-gradient(var(--velours),var(--velours)) 0 0\/100% 70% no-repeat}\n\/* Hamonde \\0000e0 l'avant-sc\\0000e8ne : les trois coups *\/\n.fom-mdl .a-ham{z-index:5}\n.fom-mdl .a-ham img{transform-origin:50% 100%}\n.fom-mdl .stage.go .a-ham img,.fom-mdl .stage.knock .a-ham img{animation:mdlKnock 1.5s .3s both}\n@keyframes mdlKnock{0%,30%,63%,100%{transform:none}8%,41%,74%{transform:translateY(-6%) scale(.97,1.04)}14%,47%,80%{transform:scale(1.06,.92)}}\n.fom-mdl .toc{z-index:6;left:17%;top:86%;font:900 clamp(.7rem,1.7vw,1.15rem) var(--display);color:var(--or);opacity:0;pointer-events:none}\n.fom-mdl .toc.t2{left:15%;top:79%}.fom-mdl .toc.t3{left:13%;top:72%}\n.fom-mdl .stage.go .toc,.fom-mdl .stage.knock .toc{animation:mdlToc .55s both}\n.fom-mdl .stage .t1{animation-delay:.48s!important}.fom-mdl .stage .t2{animation-delay:.98s!important}.fom-mdl .stage .t3{animation-delay:1.48s!important}\n@keyframes mdlToc{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.15) rotate(-6deg)}100%{opacity:0;transform:translateY(-14px) scale(1)}}\n\/* la loge de Stokui *\/\n.fom-mdl .loge{right:3%;top:14%;width:19%;aspect-ratio:190\/260;z-index:6}\n.fom-mdl .loge .a-sto{left:50%;top:86%;width:84%;transform:translate(-50%,-100%);z-index:1}\n.fom-mdl .loge .rail{position:absolute;left:-6%;right:-6%;top:82%;height:24%;border-radius:12px 12px 50% 50%\/12px 12px 40% 40%;z-index:2;background:var(--velours);border:3px solid var(--trait);border-top:9px solid var(--or);box-shadow:0 -3px 0 var(--trait)}\n.fom-mdl .loge .rail::after{content:\"\";position:absolute;left:12%;right:12%;top:26%;height:36%;border:2.5px solid var(--or);border-radius:8px}\n.fom-mdl .b-sto{right:62%;top:4%;transform-origin:100% 100%}\n.fom-mdl .b-sto::after{right:14px}\n.fom-mdl .stage.go .b-sto{animation:mdlBul .45s 1s cubic-bezier(.2,1.6,.4,1) both}\n\/* bord de sc\\0000e8ne et rampe de lumi\\0000e8re *\/\n.fom-mdl .lip{left:0;right:0;bottom:0;height:5%;z-index:4;background:var(--coulisse);border-top:3px solid var(--trait);display:flex;justify-content:space-around;align-items:flex-start;pointer-events:none}\n.fom-mdl .lip i{width:3.4%;aspect-ratio:2\/1;border-radius:50px 50px 0 0;background:var(--trait);border:2px solid var(--trait);border-bottom:0;margin-top:-1.6%;transition:background .3s}\n.fom-mdl .stage.go .lip i{animation:mdlRampe .6s 2.6s forwards}\n@keyframes mdlRampe{to{background:var(--or);box-shadow:0 -5px 0 3px rgba(245,197,24,.35)}}\n.fom-mdl .replay{right:12%;bottom:7.5%;z-index:7;font:800 clamp(.56rem,1.1vw,.74rem) var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);\n  background:var(--or);border:2.5px solid var(--trait);border-radius:var(--pill);padding:6px 12px 5px;cursor:pointer;opacity:0;animation:mdlFade .5s 4.2s forwards}\n@keyframes mdlFade{to{opacity:1}}\n.fom-mdl .replay span{display:inline-block;transition:transform .5s var(--ease)}\n.fom-mdl .replay:hover span{transform:rotate(-200deg)}\n.fom-mdl .stage:not(.go) *{animation:none!important}\n.fom-mdl .stage.knock:not(.go) .a-ham img,.fom-mdl .stage.knock:not(.go) .toc{animation:none}\n\n\/* --- ACTE I : programme + mini-sc\\0000e8ne --- *\/\n.fom-mdl .troupe{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(20px,3vw,40px);margin-top:36px;align-items:stretch}\n.fom-mdl .prog{background:var(--white);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);box-shadow:var(--sh-c);position:relative;\n  outline:0}\n.fom-mdl .prog-t{font:900 clamp(1.6rem,2.6vw,2.1rem)\/1 var(--display);text-align:center;margin:8px 0 4px}\n.fom-mdl .prog-s{text-align:center;font-style:italic;color:var(--ink-soft);font-size:.92rem;margin-bottom:18px}\n.fom-mdl .roles{list-style:none;margin:0;padding:0;display:grid;gap:4px}\n.fom-mdl .roles button{width:100%;display:flex;align-items:baseline;gap:10px;font:inherit;color:var(--ink);background:none;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;text-align:left;transition:background .2s,color .2s}\n.fom-mdl .roles b{font:900 1.2rem var(--display)}\n.fom-mdl .roles i{flex:1;border-bottom:3px dotted var(--trait);transform:translateY(-4px)}\n.fom-mdl .roles span{font-weight:700;font-size:.95rem;color:var(--ink-soft)}\n.fom-mdl .roles button:hover{background:var(--cream)}\n.fom-mdl .roles button[aria-pressed=\"true\"]{background:var(--ink);color:var(--cream)}\n.fom-mdl .roles button[aria-pressed=\"true\"] span{color:var(--or)}\n.fom-mdl .roles button[aria-pressed=\"true\"] i{border-color:rgba(255,244,242,.35)}\n.fom-mdl .prog-n{margin:16px 0 4px;text-align:center;font-size:.85rem;color:var(--ink-soft)}\n.fom-mdl .mini{display:flex;flex-direction:column;background:var(--coulisse);border-radius:var(--r-lg);overflow:hidden;border:3px solid var(--trait)}\n.fom-mdl .mini-stage{position:relative;flex:1;min-height:320px;background:var(--coulisse);overflow:hidden}\n.fom-mdl .mini-stage::after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:20%;background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(155,110,91,.45) 9% calc(9% + 2px)),var(--plancher);border-top:3px solid var(--trait)}\n.fom-mdl .mini-stage .spot{position:absolute;left:25%;width:50%;top:0;bottom:12%;z-index:1;background:var(--cream);opacity:.12;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}\n.fom-mdl .mini-stage .pool{position:absolute;left:30%;width:40%;bottom:8%;height:10%;border-radius:50%;z-index:2;background:var(--jaune);opacity:.4}\n.fom-mdl .mini-drape{position:absolute;top:0;bottom:0;width:11%;z-index:4;background:repeating-linear-gradient(90deg,transparent 0 18px,var(--trait) 18px 20.5px),var(--velours);border:solid var(--trait);border-width:0 3px}\n.fom-mdl .mini-drape.g{left:0;border-radius:0 0 50% 0\/0 0 14% 0}.fom-mdl .mini-drape.d{right:0;border-radius:0 0 0 50%\/0 0 0 14%}\n.fom-mdl .who-img{position:absolute;left:50%;bottom:9%;height:74%;width:auto;transform:translateX(-50%);z-index:3;transform-origin:50% 100%}\n.fom-mdl .who-img.enter{animation:mdlEnter .6s cubic-bezier(.2,1.2,.4,1)}\n@keyframes mdlEnter{from{transform:translateX(120%) rotate(8deg);opacity:0}70%{transform:translateX(-56%) rotate(-3deg);opacity:1}to{transform:translateX(-50%)}}\n.fom-mdl .who-img.hop{animation:mdlHop2 .55s cubic-bezier(.3,.7,.3,1)}\n@keyframes mdlHop2{0%,100%{transform:translateX(-50%)}30%{transform:translateX(-50%) scale(1.06,.9)}60%{transform:translateX(-50%) translateY(-8%) scale(.96,1.05)}}\n.fom-mdl .b-mini{left:50%;top:6%;transform:translateX(-50%);white-space:normal;width:max-content;max-width:72%;text-align:center;font-size:clamp(.82rem,1.3vw,1rem)}\n.fom-mdl .b-mini::after{left:calc(50% - 7px)}\n.fom-mdl .b-mini.hop{animation:mdlBulC .45s cubic-bezier(.2,1.6,.4,1)}\n@keyframes mdlBulC{from{transform:translateX(-50%) scale(.4);opacity:0}}\n.fom-mdl .fiche{padding:20px 24px 22px;background:var(--white);border-top:3px solid var(--trait)}\n.fom-mdl .fiche-role{font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-d)}\n.fom-mdl .fiche h3{font-size:1.5rem;margin:4px 0 6px}\n.fom-mdl .fiche p{margin:0;color:var(--ink-soft);font-size:.98rem}\n\n\/* --- ACTE II : la page de script --- *\/\n.fom-mdl .chips{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--white);box-shadow:var(--sh-s);border-radius:var(--pill);margin:26px 0 34px;width:max-content;max-width:100%}\n.fom-mdl .script-wrap{position:relative;max-width:820px}\n.fom-mdl .script{position:relative;background:var(--white);border-radius:6px 6px 22px 6px;padding:clamp(26px,4vw,48px) clamp(22px,5vw,64px);background-image:linear-gradient(90deg,transparent 46px,var(--velours) 46px 48px,transparent 48px);transform:rotate(-.6deg)}\n.fom-mdl .script::before{content:\"\";position:absolute;left:16px;top:24px;bottom:24px;width:12px;background:radial-gradient(circle,var(--cream) 0 4px,var(--trait) 4px 6px,transparent 6px) 0 0\/12px 54px repeat-y}\n.fom-mdl .script-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);\n  border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:22px}\n.fom-mdl .script-h span:last-child{color:var(--warm);border:2px solid var(--warm);border-radius:6px;padding:1px 8px;transform:rotate(-3deg)}\n.fom-mdl .sc{margin-bottom:20px;text-align:center}\n.fom-mdl .sc-n{display:block;font:900 .95rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}\n.fom-mdl .sc strong{display:block;font-weight:600;font-size:1.12rem;line-height:1.5;max-width:46ch;margin:0 auto;transition:opacity .25s,transform .25s var(--ease)}\n.fom-mdl .sc strong.out{opacity:0;transform:translateY(8px)}\n.fom-mdl .didas{text-align:center;font-style:italic;color:var(--ink-soft);margin:6px 0 0}\n.fom-mdl .script-roua{position:absolute;right:-21%;bottom:-6%;width:22%;transform-origin:50% 100%;animation:mdlIdle 3.6s ease-in-out infinite}\n\n\/* --- entracte : barres plates --- *\/\n.fom-mdl .bars .br{transform-box:fill-box;transform-origin:50% 100%;animation:mdlBar 2.4s ease-in-out infinite}\n@keyframes mdlBar{50%{transform:scaleY(.55)}}\n\n\/* --- les quatre actes : rampe de projecteurs --- *\/\n.fom-mdl .steps-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}\n.fom-mdl .steps-head .soft{margin:0;font-weight:700}\n.fom-mdl .rampe{display:flex;gap:14px;padding:14px 18px 10px;background:var(--ink);border:3px solid var(--trait);border-radius:16px 16px 6px 6px;flex:none}\n.fom-mdl .rampe i{width:30px;height:16px;border-radius:30px 30px 0 0;background:var(--trait);transition:background .3s,box-shadow .4s}\n.fom-mdl .rampe i.on{background:var(--or);box-shadow:0 -4px 0 3px rgba(245,197,24,.35)}\n.fom-mdl .step .lieu{aspect-ratio:1\/0.74;background:none}\n.fom-mdl .step .lieu img{height:100%;width:auto}\n.fom-mdl .step[aria-expanded=\"true\"] .lieu{background:none}\n.fom-mdl .step:nth-child(1)::before,.fom-mdl .step:nth-child(2)::before,.fom-mdl .step:nth-child(3)::before,.fom-mdl .step:nth-child(4)::before{content:none}\n\n\/* --- Lille : l'affiche lumineuse --- *\/\n.fom-mdl .marquee{position:relative;padding:0 6% 9% 0}\n.fom-mdl .board{position:relative;background:var(--ink);border-radius:22px;padding:clamp(30px,4vw,48px) clamp(22px,3vw,40px);text-align:center;border:3px solid var(--trait)}\n.fom-mdl .board .bulbs{position:absolute;inset:10px;border-radius:14px;pointer-events:none;\n  background:radial-gradient(circle,var(--or) 0 3.5px,transparent 4.5px) 0 0\/22px 22px repeat-x,radial-gradient(circle,var(--or) 0 3.5px,transparent 4.5px) 0 100%\/22px 22px repeat-x,\n  radial-gradient(circle,var(--or) 0 3.5px,transparent 4.5px) 0 0\/22px 22px repeat-y,radial-gradient(circle,var(--or) 0 3.5px,transparent 4.5px) 100% 0\/22px 22px repeat-y;\n  animation:mdlChase 1.2s steps(2) infinite}\n@keyframes mdlChase{50%{opacity:.55}}\n.fom-mdl .board p{margin:0;color:var(--cream)}\n.fom-mdl .b-top{font-weight:800;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or)!important;margin-bottom:10px!important}\n.fom-mdl .b-big{font:900 clamp(2rem,4.4vw,3.3rem)\/1 var(--display);color:var(--cream)}\n.fom-mdl .b-sub{font-weight:700;font-size:1.05rem;color:var(--signal-l)!important;margin-top:8px!important}\n.fom-mdl .b-cast{margin-top:18px!important;font-size:.9rem;line-height:1.5;color:rgba(255,244,242,.7)!important;font-style:italic}\n.fom-mdl .marquee .groom{position:absolute;right:-2%;bottom:-2%;width:30%}\n\n\/* --- formats : \\0000e9crans plats --- *\/\n.fom-mdl .fmt .ecran{width:110px;margin-bottom:14px;transition:transform .4s var(--ease)}\n.fom-mdl .fmt:hover .ecran{transform:translateY(-5px)}\n\n\/* --- rideau final : la troupe salue --- *\/\n.fom-mdl .salut{position:relative;width:clamp(290px,38vw,470px);aspect-ratio:470\/290;background:var(--coulisse);border:3px solid var(--trait);border-radius:var(--r-lg);overflow:hidden}\n.fom-mdl .salut .s-drape{position:absolute;top:0;bottom:0;width:8%;z-index:3;background:repeating-linear-gradient(90deg,transparent 0 16px,var(--trait) 16px 18.5px),var(--velours);border:solid var(--trait);border-width:0 3px}\n.fom-mdl .salut .s-drape.g{left:0;border-radius:0 0 60% 0\/0 0 16% 0}.fom-mdl .salut .s-drape.d{right:0;border-radius:0 0 0 60%\/0 0 0 16%}\n.fom-mdl .salut .s-floor{position:absolute;left:0;right:0;bottom:0;height:17%;z-index:1;background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(155,110,91,.45) 9% calc(9% + 2px)),var(--plancher);border-top:3px solid var(--trait)}\n.fom-mdl .salut .ligne{position:absolute;left:7%;right:7%;bottom:7%;z-index:2;display:flex;align-items:flex-end;justify-content:center}\n.fom-mdl .salut .ligne img{margin:0 -4.6%;transform-origin:50% 100%}\n.fom-mdl .salut .ligne img.star{z-index:1}\n.fom-mdl .salut.bow .ligne img{animation:mdlBow 1.1s calc(var(--i) * .09s) cubic-bezier(.4,0,.2,1) both}\n@keyframes mdlBow{0%,100%{transform:none}35%,60%{transform:rotate(9deg) translateY(3%) scale(1,.96)}}\n.fom-mdl .salut .bis{position:absolute;right:13%;top:7%;z-index:4;font:900 .9rem var(--display);color:var(--ink);background:var(--or);border:0;border-radius:var(--pill);padding:6px 14px 5px;cursor:pointer;border:2.5px solid var(--trait);transition:transform .2s var(--ease)}\n.fom-mdl .salut .bis:hover{transform:scale(1.08) rotate(-4deg)}\n\n\/* --- Mimi qui se balade (hors .fom-mdl : d\\0000e9plac\\0000e9 dans body) --- *\/\n.fom-mdl-walk{position:fixed;left:0;bottom:0;z-index:9990;width:0;height:0;--x:8;--s:1;pointer-events:none;font-family:\"Tajawal\",system-ui,sans-serif}\n.fom-mdl-walk[hidden]{display:none}\n.fom-mdl-walk .w-body,.fom-mdl-walk .w-ombre,.fom-mdl-walk .w-bulle,.fom-mdl-walk .w-close{position:fixed;left:calc(var(--x) * 1vw);transition:left .35s ease-out,opacity .4s,transform .5s cubic-bezier(.2,1.3,.4,1)}\n.fom-mdl-walk .w-body{bottom:6px;width:92px;height:118px;margin-left:-46px;pointer-events:auto;cursor:pointer;transform:translateY(140%) scaleX(calc(var(--s) * -1))}\n.fom-mdl-walk.on .w-body{transform:translateY(0) scaleX(calc(var(--s) * -1))}\n.fom-mdl-walk .f{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;opacity:0}\n.fom-mdl-walk .f.on{opacity:1}\n.fom-mdl-walk.walking .w-body{animation:mdlStep .3s ease-in-out infinite}\n@keyframes mdlStep{50%{bottom:9px}}\n.fom-mdl-walk .w-ombre{bottom:2px;width:70px;height:12px;margin-left:-35px;border-radius:50%;background:#9b6e5b;opacity:0}\n.fom-mdl-walk.on .w-ombre{opacity:.3}\n.fom-mdl-walk .w-bulle{bottom:132px;width:max-content;max-width:230px;margin-left:0;background:#fff;color:#582b28;border:2.5px solid #9b6e5b;border-radius:14px;padding:8px 12px 7px;\n  font-size:.86rem;font-weight:800;line-height:1.3;opacity:0;transform:translateY(8px) scale(.85);transform-origin:20% 100%}\n.fom-mdl-walk .w-bulle small{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#FF5A3C;margin-bottom:2px}\n.fom-mdl-walk .w-bulle::after{content:\"\";position:absolute;left:var(--tail,30px);bottom:-9px;width:13px;height:13px;background:#fff;border:solid #9b6e5b;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}\n.fom-mdl-walk.on .w-bulle.on{opacity:1;transform:none}\n.fom-mdl-walk .w-close{bottom:104px;margin-left:30px;width:22px;height:22px;border-radius:50%;border:0;background:#582b28;color:#FFF4F2;font:700 14px\/22px system-ui;padding:0;cursor:pointer;opacity:0;pointer-events:auto}\n.fom-mdl-walk.on .w-close{opacity:.55}.fom-mdl-walk .w-close:hover{opacity:1}\n.fom-mdl-walk.exit .w-body{transform:translateY(160%) scaleX(calc(var(--s) * -1))!important}\n.fom-mdl-walk.exit .w-bulle,.fom-mdl-walk.exit .w-close,.fom-mdl-walk.exit .w-ombre{opacity:0!important}\n\n@media (max-width:960px){\n  .fom-mdl .scene{width:100%;max-width:680px;margin:30px auto 0}\n  .fom-mdl .troupe{grid-template-columns:1fr}\n  .fom-mdl .script-roua{right:-4%;bottom:-14%;width:20%}\n  .fom-mdl .script-wrap{padding-bottom:40px}\n  .fom-mdl .steps-head{align-items:center}\n  .fom-mdl .marquee{max-width:560px}\n}\n@media (max-width:560px){\n  .fom-mdl .rampe{gap:8px;padding:10px 12px 8px}.fom-mdl .rampe i{width:20px;height:11px}\n  .fom-mdl .roles b{font-size:1.05rem}.fom-mdl .roles span{font-size:.84rem}.fom-mdl .roles button{padding:9px 10px}\n  .fom-mdl .script{transform:none;padding-left:40px}\n  .fom-mdl .script-roua{width:26%;bottom:-10%}\n  .fom-mdl .salut{width:100%}\n  .fom-mdl .bulle{border-width:2px;border-radius:10px}\n  .fom-mdl .replay{right:auto;left:50%;transform:translateX(-50%);bottom:6.5%}\n  .fom-mdl-walk .w-body{width:58px;height:76px;margin-left:-29px}\n  .fom-mdl-walk .w-bulle{bottom:86px;max-width:180px;font-size:.72rem;padding:6px 9px 5px}\n  .fom-mdl-walk .w-close{bottom:66px;margin-left:18px}\n}\n@media (prefers-reduced-motion:reduce){\n  .fom-mdl .stage .spot,.fom-mdl .stage .pool{opacity:1}\n  .fom-mdl .stage .rideau{display:none}.fom-mdl .stage .affiche,.fom-mdl .stage .toc{display:none}\n  .fom-mdl .a-ski .p1{opacity:0}.fom-mdl .a-ski .p2{opacity:1}\n  .fom-mdl .replay{display:none}\n  .fom-mdl-walk{display:none!important}\n}\n\n@media (min-width:961px){.fom-mdl .local .w{grid-template-columns:1fr 1fr}}\n.fom-mdl .local h2{font-size:clamp(1.9rem,3.3vw,2.7rem)}\n\n\/* v2 : graphisme \\0000e0 plat, sans d\\0000e9grad\\0000e9 ni halo flou, contours #9b6e5b *\/\n.fom-mdl .halo{display:none}\n.fom-mdl .vcard.hot img,.fom-mdl .cta-art .mimi{filter:none}\n.fom-mdl .vcard,.fom-mdl .case,.fom-mdl .step,.fom-mdl .fmt,.fom-mdl details,.fom-mdl .compare,.fom-mdl .cta-card{box-shadow:none;border:0}\n.fom-mdl .prog{box-shadow:none}\n.fom-mdl .alt{box-shadow:none}\n.fom-mdl .pill,.fom-mdl .chips{box-shadow:none;border:0}\n.fom-mdl .btn-primary,.fom-mdl .btn-primary:hover{box-shadow:none}\n.fom-mdl .thumb .play{box-shadow:none}\n.fom-mdl .compare .bar{box-shadow:none}\n.fom-mdl .compare .knob{box-shadow:none}\n.fom-mdl .fmt::before{display:none}\n.fom-mdl .fmt{border-top:6px solid var(--bar,var(--warm))}\n.fom-mdl .step[aria-expanded=\"true\"]{box-shadow:none}\n\/* couleurs strictement charte : texte secondaire en marron, \\0000e9tiquettes en teal *\/\n.fom-mdl{--ink-soft:#582b28;--signal-d:#1B4A4B}\n.fom-mdl .lead,.fom-mdl .soft,.fom-mdl .prog-s,.fom-mdl .prog-n,.fom-mdl .didas{opacity:.82}\n\/* v3 : contours #9b6e5b r\\0000e9serv\\0000e9s \\0000e0 la mise en sc\\0000e8ne (sc\\0000e8ne, rideaux, loge, bulles, affiche, salut), pas sur les cartes ni les blocs *\/\n<\/style>\n<div class=\"fom-mdl\" id=\"fom-mdl\">\n  <!-- 1. HERO : les trois coups, le rideau s'ouvre -->\n  <section class=\"hero\" data-mimi=\"0\">\n    <span class=\"halo warm\" aria-hidden=\"true\"><\/span>\n    <div class=\"w\">\n      <div>\n        <span class=\"pill\">Studio motion design &#183; Lille &#183; Hauts-de-France<\/span>\n        <h1>Motion design &#224; Lille&nbsp;: on donne vie &#224; <span class=\"hl\">votre personnage<\/span><\/h1>\n        <p class=\"lead\">Le motion design, pour nous, c'est du th&#233;&#226;tre&nbsp;: un propos, une histoire, un personnage qui le joue. Votre sujet complexe monte sur sc&#232;ne, et votre public s'en souvient.<\/p>\n        <div class=\"ctas\">\n          <a class=\"btn btn-primary\" href=\"https:\/\/www.freshorganicmotion.com\/contact\/\">Parlons de votre vid&#233;o<\/a>\n          <a class=\"btn btn-ghost\" href=\"#fom-troupe\">Rencontrer la troupe<\/a>\n        <\/div>\n        <p class=\"hero-note\">2D &#183; 3D &#183; voix off &#183; sous-titres &#183; formats r&#233;seaux<\/p>\n      <\/div>\n      <div class=\"scene\">\n        <div class=\"stage go\" id=\"mdlStage\">\n          <span class=\"back\" aria-hidden=\"true\"><\/span>\n          <span class=\"floor\" aria-hidden=\"true\"><\/span>\n          <span class=\"spot\" aria-hidden=\"true\"><\/span><span class=\"pool\" aria-hidden=\"true\"><\/span>\n\n          <button type=\"button\" class=\"act a-ski\" style=\"left:10%;top:82%;width:27.4%\" aria-label=\"Skivinne, &#224; la machinerie\">\n            <img fetchpriority=\"high\" decoding=\"async\" class=\"p1\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-skivinne-attente.webp\" alt=\"Skivinne attend en coulisses, pr&#234;t &#224; tirer le rideau\" width=\"425\" height=\"520\">\n            <img decoding=\"async\" class=\"p2\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-skivinne-muscle.webp\" alt=\"\" width=\"425\" height=\"520\">\n          <\/button>\n          <button type=\"button\" class=\"act a-mimi\" style=\"left:49%;top:86.1%;width:25.5%\" aria-label=\"Mimi Koloa, l'acteur\">\n            <span class=\"pop\"><img decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-salut.webp\" alt=\"Mimi Koloa, personnage anim&#233; du studio Fresh Organic Motion, salue le public sous le projecteur\" width=\"407\" height=\"520\"><\/span>\n          <\/button>\n          <button type=\"button\" class=\"act a-roua\" style=\"left:71.5%;top:84.7%;width:23.8%\" aria-label=\"Roua, la metteuse en sc&#232;ne\">\n            <img loading=\"lazy\" decoding=\"async\" class=\"r0 on\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-roua-ordre.webp\" alt=\"Roua, metteuse en sc&#232;ne &#224; lunettes noires, donne ses ordres\" width=\"361\" height=\"520\">\n            <img loading=\"lazy\" decoding=\"async\" class=\"r1\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-roua-enerve.webp\" alt=\"\" width=\"361\" height=\"520\">\n            <img loading=\"lazy\" decoding=\"async\" class=\"r2\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-roua-explication.webp\" alt=\"\" width=\"361\" height=\"520\">\n            <span class=\"bulle b-roua\" aria-live=\"polite\">Action&nbsp;!<\/span>\n          <\/button>\n\n          <span class=\"rideau g\" aria-hidden=\"true\"><\/span><span class=\"rideau d\" aria-hidden=\"true\"><\/span>\n          <span class=\"affiche\" aria-hidden=\"true\"><small>Fresh Organic Motion pr&#233;sente<\/small>Votre propos,<br>en personnage<\/span>\n          <span class=\"drape g\" aria-hidden=\"true\"><\/span><span class=\"drape d\" aria-hidden=\"true\"><\/span>\n          <span class=\"valance\" aria-hidden=\"true\"><\/span>\n\n          <button type=\"button\" class=\"act a-ham\" style=\"left:28%;top:95.6%;width:18.5%\" aria-label=\"Mina, &#224; la r&#233;gie, frappe les trois coups\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mina-regie.webp\" alt=\"Mina, &#224; la r&#233;gie, frappe les trois coups du pied\" width=\"281\" height=\"502\">\n          <\/button>\n          <span class=\"toc t1\" aria-hidden=\"true\">Toc&nbsp;!<\/span><span class=\"toc t2\" aria-hidden=\"true\">Toc&nbsp;!<\/span><span class=\"toc t3\" aria-hidden=\"true\">Toc&nbsp;!<\/span>\n\n          <div class=\"loge\">\n            <button type=\"button\" class=\"act a-sto\" aria-label=\"Hamonde, le public, dans sa loge\">\n              <img loading=\"lazy\" decoding=\"async\" class=\"s0 on\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-hamonde-suspicieux.webp\" alt=\"Hamonde, spectateur m&#233;fiant, regarde depuis sa loge\" width=\"405\" height=\"522\">\n              <img loading=\"lazy\" decoding=\"async\" class=\"s1\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-hamonde-choc.webp\" alt=\"\" width=\"405\" height=\"522\">\n              <img loading=\"lazy\" decoding=\"async\" class=\"s2\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-hamonde-sourire.webp\" alt=\"\" width=\"405\" height=\"522\">\n            <\/button>\n            <span class=\"rail\" aria-hidden=\"true\"><\/span>\n            <span class=\"bulle b-sto\" aria-live=\"polite\">Mouais&#8230;<\/span>\n          <\/div>\n\n          <span class=\"lip\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/span>\n          <button type=\"button\" class=\"replay\"><span aria-hidden=\"true\">&#8635;<\/span> Rejouer les trois coups<\/button>\n        <\/div>\n        <p class=\"stage-hint\">Cliquez sur les personnages, ils ont tous quelque chose &#224; dire.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 2. ACTE I : LA DISTRIBUTION -->\n  <section class=\"alt\" id=\"fom-troupe\" data-mimi=\"1\" style=\"background:var(--rose);box-shadow:none\">\n    <div class=\"w rv\">\n      <p class=\"tag\">Acte I &#183; La distribution<\/p>\n      <h2>Une vid&#233;o, c'est une troupe.<br><span class=\"hl\">Chacun son r&#244;le.<\/span><\/h2>\n      <p class=\"lead\">Derri&#232;re chaque minute d'animation, cinq m&#233;tiers. Choisissez un nom dans le programme&nbsp;: il entre en sc&#232;ne.<\/p>\n      <div class=\"troupe\">\n        <div class=\"prog\">\n          <p class=\"prog-t\">Distribution<\/p>\n          <p class=\"prog-s\">par ordre d'importance (selon Roua)<\/p>\n          <ol class=\"roles\" role=\"group\" aria-label=\"Choisir un membre de la troupe\">\n            <li><button type=\"button\" aria-pressed=\"true\" data-k=\"0\"><b>Roua<\/b><i><\/i><span>Mise en sc&#232;ne<\/span><\/button><\/li>\n            <li><button type=\"button\" aria-pressed=\"false\" data-k=\"1\"><b>Mimi<\/b><i><\/i><span>R&#244;le principal<\/span><\/button><\/li>\n            <li><button type=\"button\" aria-pressed=\"false\" data-k=\"2\"><b>Skivinne<\/b><i><\/i><span>Machinerie et son<\/span><\/button><\/li>\n            <li><button type=\"button\" aria-pressed=\"false\" data-k=\"3\"><b>Mina<\/b><i><\/i><span>R&#233;gie g&#233;n&#233;rale<\/span><\/button><\/li>\n            <li><button type=\"button\" aria-pressed=\"false\" data-k=\"4\"><b>Hamonde<\/b><i><\/i><span>Le public<\/span><\/button><\/li>\n          <\/ol>\n          <p class=\"prog-n\">Cliquez deux fois&nbsp;: ils ont du caract&#232;re.<\/p>\n        <\/div>\n        <div class=\"mini\">\n          <div class=\"mini-stage\">\n            <span class=\"spot\" aria-hidden=\"true\"><\/span><span class=\"pool\" aria-hidden=\"true\"><\/span>\n            <span class=\"mini-drape g\" aria-hidden=\"true\"><\/span><span class=\"mini-drape d\" aria-hidden=\"true\"><\/span>\n            <img loading=\"lazy\" decoding=\"async\" class=\"who-img\" id=\"mdlWho\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-roua-ordre.webp\" alt=\"Roua, la metteuse en sc&#232;ne\" width=\"372\" height=\"536\" style=\"height:68.7%\">\n            <span class=\"bulle b-mini\" id=\"mdlLine\" aria-live=\"polite\">Coupez&nbsp;! Cette sc&#232;ne ne sert pas le propos.<\/span>\n          <\/div>\n          <div class=\"fiche\" aria-live=\"polite\">\n            <span class=\"fiche-role\" id=\"mdlRole\">Mise en sc&#232;ne &#183; le script<\/span>\n            <h3 id=\"mdlNom\">Roua<\/h3>\n            <p id=\"mdlDesc\">C'est la base. Roua &#233;crit le script et donne les ordres&nbsp;: chaque sc&#232;ne sert votre propos, sinon elle saute.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 3. ACTE II : LE SCRIPT -->\n  <section data-mimi=\"2\">\n    <div class=\"w rv\">\n      <p class=\"tag\">Acte II &#183; Le script<\/p>\n      <h2>Un propos. Une histoire.<br><span class=\"hl\">Un personnage.<\/span><\/h2>\n      <p class=\"lead\">Toujours dans cet ordre, c'est Roua qui l'exige. Choisissez votre objectif&nbsp;: le script s'&#233;crit pour vous.<\/p>\n      <div class=\"chips\" role=\"group\" aria-label=\"Choisir un objectif\">\n        <button type=\"button\" aria-pressed=\"true\" data-k=\"0\">Faire comprendre une offre<\/button>\n        <button type=\"button\" aria-pressed=\"false\" data-k=\"1\">Former vos &#233;quipes<\/button>\n        <button type=\"button\" aria-pressed=\"false\" data-k=\"2\">Faire aimer votre marque<\/button>\n      <\/div>\n      <div class=\"script-wrap\">\n        <div class=\"script\" aria-live=\"polite\">\n          <p class=\"script-h\"><span>Votre vid&#233;o<\/span><span>Version valid&#233;e par Roua<\/span><\/p>\n          <div class=\"sc\"><span class=\"sc-n\">Sc&#232;ne 1 &#183; Le propos<\/span><strong>Votre service est clair pour vous. Pas encore pour vos clients.<\/strong><\/div>\n          <div class=\"sc\"><span class=\"sc-n\">Sc&#232;ne 2 &#183; L'histoire<\/span><strong>Un client perdu, une solution simple, un sourire &#224; la fin.<\/strong><\/div>\n          <div class=\"sc\"><span class=\"sc-n\">Sc&#232;ne 3 &#183; Le personnage<\/span><strong>Il guide votre client pas &#224; pas. On retient le message parce qu'on l'a v&#233;cu avec lui.<\/strong><\/div>\n          <p class=\"didas\">(Mimi entre c&#244;t&#233; jardin. Le public se penche en avant.)<\/p>\n        <\/div>\n        <img loading=\"lazy\" decoding=\"async\" class=\"script-roua\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-roua-explication.webp\" alt=\"Roua explique le script, sc&#232;ne par sc&#232;ne\" loading=\"lazy\" width=\"361\" height=\"520\">\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-322e5d2 e-con-full e-flex e-con e-parent\" data-id=\"322e5d2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83ef0d9 elementor-widget elementor-widget-html\" data-id=\"83ef0d9\" 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 | \/motion-design-lille\/ | BLOC 2 sur 4 : widget HTML Elementor n&#176;2 -->\n<div class=\"fom-mdl\">\n  <!-- 4. ACTE III : LES R&#201;P&#201;TITIONS (croquis -> personnage vivant) -->\n  <section style=\"padding-top:0\" data-roua=\"3\">\n    <div class=\"w ba\">\n      <div class=\"rv\">\n        <p class=\"tag\">Acte III &#183; Les r&#233;p&#233;titions<\/p>\n        <h2>Du croquis au personnage <span class=\"hl\">vivant<\/span>.<\/h2>\n        <p class=\"lead\">Faites glisser le curseur pour voir la transformation.<\/p>\n        <p class=\"soft\">Un acteur ne monte pas sur sc&#232;ne sans r&#233;p&#233;ter. Un personnage non plus&nbsp;: on dessine sa silhouette, sa d&#233;marche, ses expressions. Ensuite seulement, il bouge, et il a l'air vrai.<\/p>\n        <p class=\"soft\">Ici, <a href=\"https:\/\/www.freshorganicmotion.com\/mimi-koloa-mascotte\/\">Mimi Koloa<\/a>, la mascotte du studio, du trait au rendu 3D. M&#234;me m&#233;thode pour le v&#244;tre, qu'il existe d&#233;j&#224; ou qu'on le <a href=\"https:\/\/www.freshorganicmotion.com\/creation-mascotte\/\">cr&#233;e avec vous<\/a>.<\/p>\n      <\/div>\n      <div class=\"compare rv\" style=\"--pos:50%\">\n        <div class=\"bg\"><\/div>\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-nantes-mimi-croquis.webp\" alt=\"Croquis de Mimi Koloa, mascotte Fresh Organic Motion, avant l'animation\" loading=\"lazy\" width=\"640\" height=\"640\">\n        <div class=\"after-bg\"><\/div>\n        <img loading=\"lazy\" decoding=\"async\" class=\"after\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-nantes-mimi-3d-sourire.webp\" alt=\"Mimi Koloa en 3D, pr&#234;t &#224; &#234;tre anim&#233; en motion design\" loading=\"lazy\" width=\"640\" height=\"640\">\n        <span class=\"lab l1\">Croquis<\/span><span class=\"lab l2\">Rendu 3D<\/span>\n        <span class=\"bar\"><\/span><span class=\"knob\" aria-hidden=\"true\">&#8646;<\/span>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" aria-label=\"Comparer le croquis et le personnage en 3D\">\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 5. ENTRACTE : MOTION GRAPHICS VS PERSONNAGE -->\n  <section style=\"padding-top:0\" data-roua=\"4\">\n    <div class=\"w rv\">\n      <p class=\"tag\">Entracte &#183; La diff&#233;rence<\/p>\n      <h2>Motion graphics ou motion design<br>de personnage&nbsp;?<\/h2>\n      <div class=\"vs\">\n        <div class=\"vcard\">\n          <div>\n            <span class=\"who\">Motion graphics<\/span>\n            <h3>&#199;a informe.<\/h3>\n            <p>Des formes, des chiffres et des ic&#244;nes qui bougent. Id&#233;al pour une donn&#233;e ou un process.<\/p>\n          <\/div>\n          <svg class=\"bars\" viewBox=\"0 0 200 150\" aria-hidden=\"true\" focusable=\"false\"><line x1=\"10\" y1=\"135\" x2=\"190\" y2=\"135\" stroke=\"#582b28\" stroke-opacity=\".2\" stroke-width=\"3\" stroke-linecap=\"round\"\/><rect class=\"br\" x=\"22\" y=\"75\" width=\"30\" height=\"60\" rx=\"6\" fill=\"#00c4b4\"\/><rect class=\"br\" x=\"66\" y=\"45\" width=\"30\" height=\"90\" rx=\"6\" fill=\"#b08fcc\" style=\"animation-delay:-.6s\"\/><rect class=\"br\" x=\"110\" y=\"90\" width=\"30\" height=\"45\" rx=\"6\" fill=\"#F5C518\" style=\"animation-delay:-1.2s\"\/><rect class=\"br\" x=\"154\" y=\"25\" width=\"30\" height=\"110\" rx=\"6\" fill=\"#FF5A3C\" style=\"animation-delay:-1.8s\"\/><\/svg>\n        <\/div>\n        <div class=\"vcard hot\">\n          <span class=\"halo\" aria-hidden=\"true\"><\/span>\n          <div style=\"position:relative;z-index:1\">\n            <span class=\"who\">Motion design de personnage<\/span>\n            <h3>&#199;a marque.<\/h3>\n            <p>Un h&#233;ros qui agit, h&#233;site, r&#233;agit. Votre public s'y attache et se souvient de votre message.<\/p>\n          <\/div>\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-nantes-mimi-3d-assis.webp\" alt=\"\" loading=\"lazy\" width=\"640\" height=\"640\">\n        <\/div>\n      <\/div>\n      <p class=\"note\">On sait faire les deux, et on les m&#233;lange souvent. <b>Notre sp&#233;cialit&#233;, c'est le second.<\/b><\/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-3e99fc7 e-con-full e-flex e-con e-parent\" data-id=\"3e99fc7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-feaa4c0 elementor-widget elementor-widget-html\" data-id=\"feaa4c0\" 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 | \/motion-design-lille\/ | BLOC 3 sur 4 : widget HTML Elementor n&#176;3 -->\n<div class=\"fom-mdl\">\n  <!-- 6. &#192; L'AFFICHE : GRDF OUEST -->\n  <section class=\"alt\" id=\"fom-exemple\" data-roua=\"5\">\n    <div class=\"w rv\">\n      <p class=\"tag\">&#192; l'affiche &#183; Exemple de r&#233;alisation<\/p>\n      <h2>Des biod&#233;chets au gaz vert,<br>en <span class=\"hl\">une minute<\/span>.<\/h2>\n      <p class=\"lead\">Pour GRDF Ouest, une boucle invisible racont&#233;e par des personnages&nbsp;: ce qu'on jette au festival repart dans le r&#233;seau.<\/p>\n      <article class=\"case\">\n        <a class=\"thumb\" href=\"https:\/\/www.youtube.com\/watch?v=u2PDpOjBGjI\" target=\"_blank\" rel=\"noopener\" data-video=\"u2PDpOjBGjI\" aria-label=\"Lire la vid&#233;o : biod&#233;chets et gaz vert dans les festivals, pour GRDF Ouest\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-nantes-grdf-ouest-biodechets-gaz-vert.webp\" alt=\"Personnages illustr&#233;s devant une sc&#232;ne de festival, extrait de la vid&#233;o motion design r&#233;alis&#233;e pour GRDF Ouest sur les biod&#233;chets transform&#233;s en gaz vert\" loading=\"lazy\" width=\"1280\" height=\"720\">\n          <span class=\"play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 4.5v15l12.5-7.5z\" fill=\"#FFF4F2\"\/><\/svg><\/span>\n          <span class=\"dur\">0:53<\/span>\n        <\/a>\n        <div class=\"meta\">\n          <span class=\"client\">GRDF Ouest<\/span>\n          <h3>Biod&#233;chets et gaz vert dans les festivals<\/h3>\n          <p>Expliquer la boucle biod&#233;chets vers gaz renouvelable &#224; des festivaliers, sans jargon et sans caricaturer la fili&#232;re.<\/p>\n          <ul class=\"partis\">\n            <li><span>01<\/span>Commencer par le festivalier, pas par l'usine.<\/li>\n            <li><span>02<\/span>Une boucle qui se referme vraiment &#224; l'&#233;cran.<\/li>\n            <li><span>03<\/span>Compr&#233;hensible sans le son, pour Facebook et LinkedIn.<\/li>\n          <\/ul>\n          <div class=\"kpi\"><span>Format &#183; 53 s<\/span><span>Diffusion &#183; r&#233;seaux sociaux<\/span><\/div>\n          <a class=\"more\" href=\"https:\/\/motion-design-creation.com\/etudes-de-cas\/biodechets-gaz-vert\/\" target=\"_blank\" rel=\"noopener\">Lire l'&#233;tude de cas <i aria-hidden=\"true\">+<\/i><\/a>\n        <\/div>\n      <\/article>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n\/* Vid\\u00e9o YouTube \\u00e0 part : l'outil de cookies peut la bloquer sans toucher au reste de la page. *\/\n(function(){\n  Array.prototype.slice.call(document.querySelectorAll('.fom-mdl .thumb[data-video]')).forEach(function(t){t.addEventListener('click',function(e){\n    e.preventDefault(); if(t.querySelector('iframe')) return;\n    var f=document.createElement('iframe');\n    f.src='https:\/\/www.youtube-nocookie.com\/embed\/'+t.dataset.video+'?autoplay=1'+String.fromCharCode(38)+'rel=0';\n    f.title=t.getAttribute('aria-label'); f.allow='autoplay; encrypted-media; picture-in-picture'; f.allowFullscreen=true;\n    t.appendChild(f); t.style.cursor='default';\n  })});\n})();\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@graph\": [\n  {\n   \"@type\": \"VideoObject\",\n   \"name\": \"Biod\\u00e9chets et gaz vert dans les festivals, pour GRDF Ouest\",\n   \"description\": \"Vid\\u00e9o motion design de 53 secondes qui raconte la boucle des biod\\u00e9chets de festival transform\\u00e9s en gaz renouvelable.\",\n   \"thumbnailUrl\": \"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-nantes-grdf-ouest-biodechets-gaz-vert.webp\",\n   \"embedUrl\": \"https:\/\/www.youtube-nocookie.com\/embed\/u2PDpOjBGjI\",\n   \"contentUrl\": \"https:\/\/www.youtube.com\/watch?v=u2PDpOjBGjI\",\n   \"duration\": \"PT53S\",\n   \"uploadDate\": \"2024-06-27T05:44:35-07:00\"\n  }\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<div class=\"elementor-element elementor-element-b7204fc e-con-full e-flex e-con e-parent\" data-id=\"b7204fc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7053a09 elementor-widget elementor-widget-html\" data-id=\"7053a09\" 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 | \/motion-design-lille\/ | BLOC 4 sur 4 : widget HTML Elementor n&#176;4 -->\n<div class=\"fom-mdl\">\n  <!-- 7. LES QUATRE ACTES : la m&#233;thode, chaque &#233;tape tenue par un membre de la troupe -->\n  <section data-mimi=\"6\">\n    <div class=\"w rv\">\n      <div class=\"steps-head\">\n        <div>\n          <p class=\"tag\">Z&#233;ro surprise<\/p>\n          <h2>4 actes, un personnage<br>qui parle pour vous.<\/h2>\n          <p class=\"soft\">Cliquez sur chaque acte&nbsp;: les projecteurs s'allument avec vous.<\/p>\n        <\/div>\n        <div class=\"rampe\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\n      <\/div>\n      <div class=\"steps\">\n        <button type=\"button\" class=\"step\" aria-expanded=\"true\"><span class=\"lieu\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-roua-explication.webp\" alt=\"Roua, metteuse en sc&#232;ne, cale le propos\" loading=\"lazy\" width=\"372\" height=\"536\" style=\"height:93%\"><\/span><span class=\"lieu-nom\">Roua &#183; on cale le propos<\/span><span class=\"n\">ACTE 01<\/span><h3>Le propos<\/h3><p>Un appel pour poser votre message, votre cible et l'endroit o&#249; la vid&#233;o sera vue.<\/p><\/button>\n        <button type=\"button\" class=\"step\" aria-expanded=\"false\"><span class=\"lieu\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-salut.webp\" alt=\"Mimi Koloa, l'acteur, au casting\" loading=\"lazy\" width=\"398\" height=\"508\" style=\"height:88%\"><\/span><span class=\"lieu-nom\">Mimi &#183; le casting<\/span><span class=\"n\">ACTE 02<\/span><h3>Le personnage<\/h3><p>On anime le v&#244;tre ou on le dessine avec vous&nbsp;: silhouette, caract&#232;re, expressions.<\/p><\/button>\n        <button type=\"button\" class=\"step\" aria-expanded=\"false\"><span class=\"lieu\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mina-suspicieux.webp\" alt=\"Mina, &#224; la r&#233;gie, relit le storyboard\" loading=\"lazy\" width=\"281\" height=\"502\" style=\"height:87%\"><\/span><span class=\"lieu-nom\">Mina &#183; relecture &#224; la loupe<\/span><span class=\"n\">ACTE 03<\/span><h3>L'histoire<\/h3><p>Script et storyboard. Vous validez chaque sc&#232;ne avant qu'elle bouge.<\/p><\/button>\n        <button type=\"button\" class=\"step\" aria-expanded=\"false\"><span class=\"lieu\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-skivinne-muscle.webp\" alt=\"Skivinne, &#224; la machinerie et au son\" loading=\"lazy\" width=\"472\" height=\"577\" style=\"height:100%\"><\/span><span class=\"lieu-nom\">Skivinne &#183; &#231;a bouge, &#231;a sonne<\/span><span class=\"n\">ACTE 04<\/span><h3>L'animation<\/h3><p>Animation 2D ou 3D, voix, son, sous-titres. Livr&#233;e pr&#234;te &#224; diffuser.<\/p><\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 8. LILLE -->\n  <section class=\"local\" data-mimi=\"7\">\n    <span class=\"halo\" aria-hidden=\"true\"><\/span>\n    <div class=\"w\">\n      <div class=\"rv\">\n        <p class=\"tag\">Lille &#183; M&#233;tropole &#183; Hauts-de-France<\/p>\n        <h2>Votre studio d'animation &#224; Lille et dans les Hauts&#8209;de&#8209;France.<\/h2>\n        <p>Entreprises de la m&#233;tropole lilloise, agences de communication, institutions et associations&nbsp;: on lance votre projet en visio, et vous validez chaque &#233;tape en ligne.<\/p>\n        <p><strong>Vous gardez la main, la troupe s'occupe du spectacle.<\/strong><\/p>\n        <div class=\"remote\">\n          <div><b>Visio<\/b><span>brief et points d'&#233;tape<\/span><\/div>\n          <div><b>En ligne<\/b><span>storyboard et animatique &#224; valider<\/span><\/div>\n          <div><b>Tous formats<\/b><span>16:9, carr&#233;, vertical<\/span><\/div>\n        <\/div>\n        <div class=\"pills\"><span>Lille<\/span><span>Roubaix<\/span><span>Tourcoing<\/span><span>Villeneuve-d'Ascq<\/span><span>Arras<\/span><span>Valenciennes<\/span><span>Dunkerque<\/span><span>Amiens<\/span><\/div>\n      <\/div>\n      <div class=\"marquee rv\">\n        <div class=\"board\">\n          <span class=\"bulbs\" aria-hidden=\"true\"><\/span>\n          <p class=\"b-top\">En tourn&#233;e &#183; Hauts-de-France<\/p>\n          <p class=\"b-big\">Votre personnage<\/p>\n          <p class=\"b-sub\">Tous les soirs sur vos &#233;crans<\/p>\n          <p class=\"b-cast\">avec Mimi &#183; Roua &#183; Skivinne &#183; Mina<br>et Hamonde dans le r&#244;le du public<\/p>\n        <\/div>\n        <img loading=\"lazy\" decoding=\"async\" class=\"groom\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-nantes-mimi-groom-valises.webp\" alt=\"\" loading=\"lazy\" width=\"640\" height=\"640\">\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 9. FORMATS -->\n  <section data-mimi=\"8\">\n    <div class=\"w rv\">\n      <p class=\"tag\">O&#249; votre personnage prend la parole<\/p>\n      <h2>Une pi&#232;ce, plusieurs sc&#232;nes.<\/h2>\n      <div class=\"formats\">\n        <div class=\"fmt\"><svg class=\"ecran\" viewBox=\"0 0 120 80\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"4\" y=\"10\" width=\"112\" height=\"63\" rx=\"8\" fill=\"#582b28\"\/><rect x=\"10\" y=\"16\" width=\"100\" height=\"51\" rx=\"4\" fill=\"#FFD8DE\"\/><path d=\"M53 31v21l18-10.5z\" fill=\"#FF5A3C\"\/><\/svg><h3>Vid&#233;o explicative<\/h3><p>Votre offre comprise en moins de 90 secondes.<\/p><\/div>\n        <div class=\"fmt\"><svg class=\"ecran\" viewBox=\"0 0 120 80\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"41\" y=\"2\" width=\"38\" height=\"76\" rx=\"8\" fill=\"#582b28\"\/><rect x=\"45\" y=\"8\" width=\"30\" height=\"64\" rx=\"4\" fill=\"#FFF4F2\"\/><path d=\"M54 32v16l13-8z\" fill=\"#00c4b4\"\/><\/svg><h3>R&#233;seaux sociaux<\/h3><p>Reels, TikTok, LinkedIn&nbsp;: formats courts et verticaux.<\/p><\/div>\n        <div class=\"fmt\"><svg class=\"ecran\" viewBox=\"0 0 120 80\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"6\" y=\"6\" width=\"108\" height=\"68\" rx=\"8\" fill=\"#582b28\"\/><rect x=\"11\" y=\"18\" width=\"98\" height=\"51\" rx=\"3\" fill=\"#FFF4F2\"\/><circle cx=\"15\" cy=\"12\" r=\"2.2\" fill=\"#FF5A3C\"\/><circle cx=\"22\" cy=\"12\" r=\"2.2\" fill=\"#F5C518\"\/><circle cx=\"29\" cy=\"12\" r=\"2.2\" fill=\"#00c4b4\"\/><rect x=\"18\" y=\"26\" width=\"44\" height=\"6\" rx=\"3\" fill=\"#b08fcc\"\/><rect x=\"18\" y=\"37\" width=\"32\" height=\"5\" rx=\"2.5\" fill=\"#b08fcc\" opacity=\".5\"\/><circle cx=\"88\" cy=\"48\" r=\"13\" fill=\"#b08fcc\"\/><\/svg><h3>Site web<\/h3><p><a href=\"https:\/\/www.freshorganicmotion.com\/mascotte-3d-interactive-site-web\/\">Mascotte anim&#233;e et interactive<\/a> sur vos pages, comme ici.<\/p><\/div>\n        <div class=\"fmt\"><svg class=\"ecran\" viewBox=\"0 0 120 80\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"14\" y=\"8\" width=\"92\" height=\"58\" rx=\"6\" fill=\"#582b28\"\/><rect x=\"19\" y=\"13\" width=\"82\" height=\"48\" rx=\"3\" fill=\"#FFF4F2\"\/><path d=\"M60 22l14 24H46z\" fill=\"#F5C518\" stroke=\"#582b28\" stroke-width=\"2.5\" stroke-linejoin=\"round\"\/><rect x=\"58.6\" y=\"30\" width=\"2.8\" height=\"8\" rx=\"1.4\" fill=\"#582b28\"\/><circle cx=\"60\" cy=\"41.5\" r=\"1.6\" fill=\"#582b28\"\/><path d=\"M40 66l-6 10M80 66l6 10\" stroke=\"#582b28\" stroke-width=\"4\" stroke-linecap=\"round\"\/><\/svg><h3>Formation interne<\/h3><p>Consignes et <a href=\"https:\/\/www.freshorganicmotion.com\/mascotte-securite-au-travail\/\">s&#233;curit&#233; au travail<\/a> qu'on retient.<\/p><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 10. FAQ -->\n  <section style=\"padding-top:0\" data-mimi=\"9\">\n    <div class=\"w faq rv\">\n      <p class=\"tag\">Les questions du public<\/p>\n      <h2>Motion design &#224; Lille&nbsp;:<br>ce qu'on nous demande.<\/h2>\n      <details open><summary>C'est quoi, le motion design&nbsp;?<\/summary><div class=\"a\"><p>C'est l'animation graphique au service d'un message. Chez Fresh Organic Motion, on le pratique avec un personnage&nbsp;: il porte une histoire, et l'histoire porte votre propos.<\/p><\/div><\/details>\n      <details><summary>Motion design ou motion graphics, quelle diff&#233;rence&nbsp;?<\/summary><div class=\"a\"><p>Le motion graphics anime des formes, des textes et des chiffres. Le motion design de personnage ajoute un h&#233;ros et une narration. Le premier informe, le second cr&#233;e l'attachement.<\/p><\/div><\/details>\n      <details><summary>Vous animez un personnage qui existe d&#233;j&#224;&nbsp;?<\/summary><div class=\"a\"><p>Oui. On l'anime en 2D ou en 3D en respectant son caract&#232;re. Pas encore de personnage&nbsp;? On le <a href=\"https:\/\/www.freshorganicmotion.com\/creation-mascotte\/\">cr&#233;e avec vous<\/a>, puis on l'anime.<\/p><\/div><\/details>\n      <details><summary>Combien de temps faut-il pour une vid&#233;o&nbsp;?<\/summary><div class=\"a\"><p>Comptez en g&#233;n&#233;ral 4 &#224; 6 semaines, du premier appel &#224; la livraison, selon la dur&#233;e de la vid&#233;o et le personnage.<\/p><\/div><\/details>\n      <details><summary>Vous travaillez avec des entreprises &#224; Lille&nbsp;?<\/summary><div class=\"a\"><p>Oui, dans toute la m&#233;tropole lilloise et les Hauts-de-France. Briefs en visio, storyboard et animations valid&#233;s en ligne, livraison dans tous les formats. Vous suivez votre projet comme si vous &#233;tiez au studio.<\/p><\/div><\/details>\n    <\/div>\n  <\/section>\n\n  <!-- 11. RIDEAU : le salut de la troupe -->\n  <section style=\"padding-top:0\" data-mimi=\"10\" id=\"fom-rideau\">\n    <div class=\"w rv\">\n      <div class=\"cta-card\">\n        <span class=\"halo warm\" aria-hidden=\"true\"><\/span>\n        <div class=\"salut\" id=\"mdlSalut\">\n          <span class=\"s-drape g\" aria-hidden=\"true\"><\/span><span class=\"s-drape d\" aria-hidden=\"true\"><\/span>\n          <div class=\"ligne\">\n            <img loading=\"lazy\" decoding=\"async\" style=\"--i:0;width:19.2%\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mina-ravie.webp\" alt=\"\" loading=\"lazy\" width=\"281\" height=\"502\">\n            <img loading=\"lazy\" decoding=\"async\" style=\"--i:1;width:25.4%\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-roua-ordre.webp\" alt=\"\" loading=\"lazy\" width=\"372\" height=\"536\">\n            <img loading=\"lazy\" decoding=\"async\" class=\"star\" style=\"--i:2;width:27.2%\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-salut.webp\" alt=\"Mimi Koloa et la troupe saluent, contactez le studio Fresh Organic Motion\" loading=\"lazy\" width=\"398\" height=\"508\">\n            <img loading=\"lazy\" decoding=\"async\" style=\"--i:3;width:32.3%\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-skivinne-salut.webp\" alt=\"\" loading=\"lazy\" width=\"472\" height=\"577\">\n            <img loading=\"lazy\" decoding=\"async\" style=\"--i:4;width:27.7%\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-hamonde-sourire.webp\" alt=\"\" loading=\"lazy\" width=\"405\" height=\"522\">\n          <\/div>\n          <span class=\"s-floor\" aria-hidden=\"true\"><\/span>\n          <button type=\"button\" class=\"bis\">Bis&nbsp;!<\/button>\n        <\/div>\n        <div>\n          <p class=\"tag\">Rideau<\/p>\n          <h2>Votre propos m&#233;rite <span class=\"hl\">un personnage.<\/span><\/h2>\n          <p class=\"lead\">Hamonde est conquis. Votre public sera le prochain. R&#233;ponse sous 24&nbsp;h ouvr&#233;es.<\/p>\n          <div class=\"ctas\">\n            <a class=\"btn btn-primary\" href=\"https:\/\/www.freshorganicmotion.com\/contact\/\">D&#233;marrer mon projet<\/a>\n            <a class=\"btn btn-ghost\" href=\"tel:+33353320040\">+33 3 53 32 00 40<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Mimi qui se balade : d&#233;plac&#233; dans <body> par le script, invisible sans script -->\n  <div class=\"fom-mdl-walk\" id=\"mdlWalk\" hidden>\n    <span class=\"w-bulle\"><small>Mimi<\/small><span class=\"w-txt\"><\/span><\/span>\n    <span class=\"w-body\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"f m1 on\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-marche-1.webp\" alt=\"\" width=\"235\" height=\"300\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"f m2\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-marche-2.webp\" alt=\"\" width=\"235\" height=\"300\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"f m3\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-marche-3.webp\" alt=\"\" width=\"235\" height=\"300\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"f m4\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-marche-4.webp\" alt=\"\" width=\"235\" height=\"300\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"f p1\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-panique-1.webp\" alt=\"\" width=\"235\" height=\"300\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"f p2\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-panique-2.webp\" alt=\"\" width=\"235\" height=\"300\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"f p3\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-panique-3.webp\" alt=\"\" width=\"235\" height=\"300\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"f p4\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-panique-4.webp\" alt=\"\" width=\"235\" height=\"300\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"f repos\" src=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-mimi-repos.webp\" alt=\"\" width=\"407\" height=\"520\">\n    <\/span>\n    <span class=\"w-ombre\"><\/span>\n    <button type=\"button\" class=\"w-close\" aria-label=\"Renvoyer Mimi en coulisses\">&#215;<\/button>\n  <\/div>\n<\/div>\n\n<script>\n\/* Script de la page Lille. \\u00c9crit sans \"et-et\" logique ni chevron ouvrant : WordPress ne peut pas l'ab\\u00eemer.\n   Si le script ne tourne pas, tout reste visible (sauf Mimi baladeur, qui n'existe qu'avec lui). *\/\n(function(){\n  function all(q){return Array.prototype.slice.call(document.querySelectorAll('.fom-mdl '+q));}\n  function mq(q){return !!(window.matchMedia ? window.matchMedia(q).matches : false);}\n  var still=mq('(prefers-reduced-motion:reduce)');\n  var IMG='https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/';\n  function hop(el){ if(still) return; el.classList.remove('hop'); void el.offsetWidth; el.classList.add('hop'); }\n\n  \/* ---------- HERO : la sc\\u00e8ne ---------- *\/\n  var st=document.getElementById('mdlStage');\n  if(st){\n    if(mq('(pointer:fine)')) { if(!still){\n      var raf=0;\n      st.addEventListener('pointermove',function(e){\n        var b=st.getBoundingClientRect(), x=(e.clientX-b.left)\/b.width*2-1;\n        if(raf) return; raf=requestAnimationFrame(function(){raf=0;st.style.setProperty('--mx',x.toFixed(3));});\n      });\n      st.addEventListener('pointerleave',function(){st.style.setProperty('--mx',0);});\n    }}\n    var RL=['Action&nbsp;!','Plus d\\u2019\\u00e9motion, Mimi&nbsp;!','Coupez&nbsp;! On la refait.','Parfait. On garde.'], ri=0;\n    var SL=['Mouais\\u2026','Ah. Quand m\\u00eame.','Bravo&nbsp;! Bis&nbsp;!'], si=0;\n    var bR=st.querySelector('.b-roua'), bS=st.querySelector('.b-sto');\n    function roua(k){ ri=k; all('.a-roua img').forEach(function(im,i){im.classList.toggle('on',i===[0,2,1,2][k]);}); bR.innerHTML=RL[k]; hop(bR); }\n    function sto(k){ si=k; all('.a-sto img').forEach(function(im,i){im.classList.toggle('on',i===k);}); bS.innerHTML=SL[k]; hop(bS); }\n    st.querySelector('.a-roua').addEventListener('click',function(){ roua((ri+1)%4); });\n    st.querySelector('.a-sto').addEventListener('click',function(){ sto((si+1)%3); });\n    st.querySelector('.a-mimi').addEventListener('click',function(){ hop(this); if(si===0) sto(1); });\n    st.querySelector('.a-ski').addEventListener('click',function(){ hop(this); });\n    st.querySelector('.a-ham').addEventListener('click',function(){ st.classList.remove('knock'); void st.offsetWidth; st.classList.add('knock'); });\n    st.querySelector('.replay').addEventListener('click',function(){\n      st.classList.remove('go'); roua(0); sto(0); void st.offsetWidth; st.classList.add('go');\n    });\n    \/* au lever de rideau, Hamonde sursaute dans sa loge *\/\n    if(!still) setTimeout(function(){ sto(1); }, 3600); else sto(1);\n  }\n\n  \/* ---------- ACTE I : la distribution ---------- *\/\n  var T=[\n    {n:'Roua',r:'Mise en sc\\u00e8ne \\u00b7 le script',d:'C\\u2019est la base. Roua \\u00e9crit le script et donne les ordres&nbsp;: chaque sc\\u00e8ne sert votre propos, sinon elle saute.',\n     a:['roua-ordre','Coupez&nbsp;! Cette sc\\u00e8ne ne sert pas le propos.',536],b:['roua-enerve','J\\u2019ai dit&nbsp;: COUPEZ.',536]},\n    {n:'Mimi',r:'R\\u00f4le principal \\u00b7 votre personnage',d:'Mimi joue votre personnage. Il doute, il se trompe, il y arrive&nbsp;: votre public vit le message avec lui.',\n     a:['mimi-salut','J\\u2019ai appris mon texte. Presque tout.',508],b:['mimi-trac','C\\u2019est \\u00e0 moi&nbsp;? Maintenant&nbsp;?',508]},\n    {n:'Skivinne',r:'Machinerie et son \\u00b7 l\\u2019animation',d:'Les d\\u00e9cors bougent, la musique tombe pile, la voix off est cal\\u00e9e \\u00e0 l\\u2019image&nbsp;: c\\u2019est la r\\u00e9gie de Skivinne.',\n     a:['skivinne-muscle','Top musique dans trois\\u2026 deux\\u2026',577],b:['skivinne-salut','Et \\u00e7a, c\\u2019est du son.',577]},\n    {n:'Mina',r:'R\\u00e9gie g\\u00e9n\\u00e9rale \\u00b7 les validations',d:'Les trois coups, c\\u2019est Mina. Relecture, planning, validations&nbsp;: tout est pass\\u00e9 au peigne fin. Z\\u00e9ro surprise.',\n     a:['mina-regie','Personne n\\u2019entre en sc\\u00e8ne sans validation.',502],b:['mina-suspicieux','Il y a une faute. Page trois.',502]},\n    {n:'Hamonde',r:'Le public \\u00b7 votre cible',d:'Il a tout vu, depuis sa loge. Il arrive m\\u00e9fiant&nbsp;: toute la pi\\u00e8ce est \\u00e9crite pour qu\\u2019il reparte convaincu, et qu\\u2019il en parle autour de lui.',\n     a:['hamonde-suspicieux','Mouais. On verra.',522],b:['hamonde-sourire','\\u2026 Bon. C\\u2019est r\\u00e9ussi.',522]}\n  ];\n  var who=document.getElementById('mdlWho'), line=document.getElementById('mdlLine'), cur=0, alt=false;\n  var roles=all('.roles button');\n  function show(k,second){\n    var t=T[k], p=second ? t.b : t.a;\n    who.classList.remove('enter'); line.classList.remove('hop');\n    who.src=IMG+'motion-design-lille-'+p[0]+'.webp'; who.style.height=(p[2]*74\/577).toFixed(1)+'%'; who.alt=t.n+', '+t.r.split(' \\u00b7 ')[0].toLowerCase();\n    line.innerHTML=p[1];\n    document.getElementById('mdlNom').textContent=t.n;\n    document.getElementById('mdlRole').textContent=t.r;\n    document.getElementById('mdlDesc').innerHTML=t.d;\n    if(!still){ void who.offsetWidth; who.classList.add(second ? 'hop' : 'enter'); line.classList.add('hop'); }\n  }\n  \/* pr\\u00e9chargement des poses, pour une entr\\u00e9e en sc\\u00e8ne sans trou *\/\n  T.forEach(function(t){ [t.a[0],t.b[0]].forEach(function(f){ var i=new Image(); i.src=IMG+'motion-design-lille-'+f+'.webp'; }); });\n  roles.forEach(function(b){ b.addEventListener('click',function(){\n    var k=+b.dataset.k; alt = (k===cur) ? !alt : false; cur=k;\n    roles.forEach(function(x){x.setAttribute('aria-pressed',x===b?'true':'false')});\n    show(k,alt);\n  })});\n\n  \/* ---------- ACTE II : le script ---------- *\/\n  var D=[\n    [\"Votre service est clair pour vous. Pas encore pour vos clients.\",\"Un client perdu, une solution simple, un sourire \\u00e0 la fin.\",\"Il guide votre client pas \\u00e0 pas. On retient le message parce qu'on l'a v\\u00e9cu avec lui.\"],\n    [\"Une consigne qu'on lit, puis qu'on oublie.\",\"Une situation du quotidien, un risque \\u00e9vit\\u00e9 de justesse, le bon r\\u00e9flexe.\",\"Il fait passer la consigne sans faire la morale. Vos \\u00e9quipes s'y reconnaissent.\"],\n    [\"Une marque s\\u00e9rieuse, mais qu'on ne remarque pas.\",\"Une rencontre, un petit rituel, un attachement qui grandit.\",\"Il devient le visage de votre marque. Reconnu en un coup d'\\u0153il, partag\\u00e9 sans effort.\"]\n  ];\n  var chips=all('.chips button'), lines=all('.sc strong');\n  chips.forEach(function(c){c.addEventListener('click',function(){\n    chips.forEach(function(x){x.setAttribute('aria-pressed','false')}); c.setAttribute('aria-pressed','true');\n    var k=+c.dataset.k; lines.forEach(function(b){b.classList.add('out')});\n    setTimeout(function(){lines.forEach(function(b,i){b.textContent=D[k][i];b.classList.remove('out')})},230);\n  })});\n\n  \/* ---------- Avant \/ apr\\u00e8s ---------- *\/\n  all('.compare').forEach(function(cmp){\n    var rg=cmp.querySelector('input');\n    if(rg) rg.addEventListener('input',function(){cmp.style.setProperty('--pos',rg.value+'%')});\n  });\n\n  \/* ---------- Les quatre actes : une \\u00e9tape ouverte, la rampe s'allume jusqu'\\u00e0 elle ---------- *\/\n  var steps=all('.step'), bulbs=all('.rampe i');\n  function light(k){bulbs.forEach(function(b,i){b.classList.toggle('on',!(i > k))})}\n  steps.forEach(function(s,k){s.addEventListener('click',function(){steps.forEach(function(x){x.setAttribute('aria-expanded',x===s?'true':'false')});light(k)})});\n  light(0);\n\n  \/* ---------- Rideau : bis ---------- *\/\n  var sal=document.getElementById('mdlSalut');\n  if(sal) sal.querySelector('.bis').addEventListener('click',function(){ sal.classList.remove('bow'); void sal.offsetWidth; sal.classList.add('bow'); });\n\n  \/* ---------- Apparition au scroll (sans script, tout reste visible) ---------- *\/\n  var rv=all('.rv');\n  if('IntersectionObserver' in window){\n    document.documentElement.classList.add('fom-anim');\n    var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.08});\n    rv.forEach(function(el){io.observe(el)});\n    setTimeout(function(){rv.forEach(function(el){el.classList.add('in')})},4000);\n    if(sal){ var so=new IntersectionObserver(function(es){ if(es[0].isIntersecting){ sal.classList.add('bow'); so.disconnect(); } },{threshold:.5}); so.observe(sal); }\n  }\n\n  \/* ---------- Mimi se balade sur la page ---------- *\/\n  var wk=document.getElementById('mdlWalk'), root=document.getElementById('fom-mdl');\n  var off=false; try{ off = sessionStorage.getItem('fomMimiOff')==='1'; }catch(e){}\n  if(wk) { if(!still) { if(!off) { if('IntersectionObserver' in window) {\n    document.body.appendChild(wk); wk.hidden=false;\n    var R=[ '',\n      '\\u00c7a, c\\u2019est ma troupe. Et je suis dans le programme&nbsp;!',\n      'J\\u2019ai lu le script. Deux fois. Bon, une fois et demie.',\n      'L\\u00e0, c\\u2019est moi en croquis. J\\u2019\\u00e9tais jeune.',\n      'Les graphiques, c\\u2019est bien. Mais ils ne vous font pas coucou.',\n      'Cette vid\\u00e9o-l\\u00e0, je l\\u2019ai regard\\u00e9e en boucle. Pour le travail.',\n      'L\\u2019acte 2, c\\u2019est moi&nbsp;! Le casting a \\u00e9t\\u00e9 long. Surtout pour moi.',\n      'Lille, c\\u2019est chez nous. On joue \\u00e0 domicile.',\n      'Vertical, carr\\u00e9, grand \\u00e9cran&nbsp;: je rentre partout. Ou presque.',\n      'Vous avez des questions&nbsp;? Moi aussi, plein.',\n      '',\n      'Pas si vite&nbsp;! J\\u2019ai des petites pattes&nbsp;!' ];\n    var frames=wk.querySelectorAll('.f'), txt=wk.querySelector('.w-txt'), bub=wk.querySelector('.w-bulle');\n    var x=0.08, dir=1, lastY=window.scrollY, lastT=Date.now(), dist=0, idleT=0, bubT=0, sect=0, onStage=false, endStage=false, fast=0;\n    function frame(name){ Array.prototype.forEach.call(frames,function(f){ f.classList.toggle('on', f.classList.contains(name)); }); }\n    function say(k){ if(R[k]){ txt.innerHTML=R[k]; place(); bub.classList.add('on'); clearTimeout(bubT); bubT=setTimeout(function(){bub.classList.remove('on')},4200); } }\n    \/* position = avancement dans la page : \\u00e0 50 % de la page, Mimi est \\u00e0 50 % de l'\\u00e9cran *\/\n    function progress(){ var h=document.documentElement.scrollHeight-window.innerHeight; return h > 0 ? Math.min(1,Math.max(0,window.scrollY\/h)) : 0; }\n    \/* la bulle reste toujours enti\\u00e8re \\u00e0 l'\\u00e9cran ; sa pointe suit Mimi *\/\n    function place(){\n      wk.style.setProperty('--x',(x*100).toFixed(2)); wk.style.setProperty('--s',dir);\n      var vw=document.documentElement.clientWidth, mx=x*vw, bw=bub.offsetWidth;\n      var bl=Math.min(Math.max(8,mx-40),vw-bw-8);\n      bub.style.left=bl+'px'; bub.style.setProperty('--tail',Math.min(Math.max(14,mx-bl-7),bw-28)+'px');\n    }\n    x=0.06+0.88*progress();\n    function vis(){ wk.classList.toggle('on', onStage ? !endStage : false); }\n    \/* sc\\u00e8ne = toute la page apr\\u00e8s le hero ; il sort quand la troupe salue *\/\n    var hero=root.querySelector('.hero'), fin=document.getElementById('fom-rideau');\n    new IntersectionObserver(function(es){ onStage = !es[0].isIntersecting; vis(); },{threshold:.35}).observe(hero);\n    new IntersectionObserver(function(es){ endStage = es[0].isIntersecting; vis(); },{threshold:.25}).observe(fin);\n    var so2=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ var k=+e.target.dataset.mimi; if(k!==sect){ sect=k; say(k); } } }); },{rootMargin:'-45% 0px -45% 0px'});\n    all('[data-mimi]').forEach(function(s){ so2.observe(s); });\n    frame('repos'); place();\n    window.addEventListener('resize',function(){ x=0.06+0.88*progress(); place(); });\n    window.addEventListener('scroll',function(){\n      var y=window.scrollY, t=Date.now(), dy=y-lastY, dt=Math.max(16,t-lastT);\n      lastY=y; lastT=t; if(dy===0) return;\n      var v=Math.abs(dy)\/dt; fast = v > 2.4 ? fast+1 : 0;\n      var nd = dy > 0 ? 1 : -1;\n      x=0.06+0.88*progress();\n      dir=nd; dist+=Math.abs(dy);\n      var n=Math.floor(dist\/48)%4+1, panic = fast > 2;\n      frame((panic ? 'p' : 'm')+n);\n      if(panic){ if(!bub.classList.contains('on')) say(11); }\n      place(); wk.classList.add('walking');\n      clearTimeout(idleT); idleT=setTimeout(function(){ frame('repos'); wk.classList.remove('walking'); },260);\n    },{passive:true});\n    wk.querySelector('.w-close').addEventListener('click',function(){\n      wk.classList.add('exit'); try{ sessionStorage.setItem('fomMimiOff','1'); }catch(e){}\n      setTimeout(function(){ wk.hidden=true; },700);\n    });\n    wk.querySelector('.w-body').addEventListener('click',function(){ say(sect || 1); });\n  }}}}\n})();\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@graph\": [\n  {\n   \"@type\": \"Service\",\n   \"name\": \"Motion design de personnage \\u00e0 Lille\",\n   \"serviceType\": \"Motion design\",\n   \"description\": \"Studio d'animation de personnages : vid\\u00e9os en motion design 2D et 3D qui font vivre un personnage et une histoire au service de votre propos, pour les entreprises de Lille et des Hauts-de-France.\",\n   \"provider\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Fresh Organic Motion\",\n    \"url\": \"https:\/\/www.freshorganicmotion.com\/\",\n    \"telephone\": \"+33353320040\"\n   },\n   \"areaServed\": [\n    {\n     \"@type\": \"City\",\n     \"name\": \"Lille\"\n    },\n    {\n     \"@type\": \"AdministrativeArea\",\n     \"name\": \"M\\u00e9tropole europ\\u00e9enne de Lille\"\n    },\n    {\n     \"@type\": \"AdministrativeArea\",\n     \"name\": \"Hauts-de-France\"\n    }\n   ],\n   \"url\": \"https:\/\/www.freshorganicmotion.com\/motion-design-lille\/\"\n  },\n  {\n   \"@type\": \"FAQPage\",\n   \"mainEntity\": [\n    {\n     \"@type\": \"Question\",\n     \"name\": \"C'est quoi, le motion design ?\",\n     \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"C'est l'animation graphique au service d'un message. Chez Fresh Organic Motion, on le pratique avec un personnage : il porte une histoire, et l'histoire porte votre propos.\"\n     }\n    },\n    {\n     \"@type\": \"Question\",\n     \"name\": \"Motion design ou motion graphics, quelle diff\\u00e9rence ?\",\n     \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Le motion graphics anime des formes, des textes et des chiffres. Le motion design de personnage ajoute un h\\u00e9ros et une narration. Le premier informe, le second cr\\u00e9e l'attachement.\"\n     }\n    },\n    {\n     \"@type\": \"Question\",\n     \"name\": \"Vous animez un personnage qui existe d\\u00e9j\\u00e0 ?\",\n     \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Oui. On l'anime en 2D ou en 3D en respectant son caract\\u00e8re. Pas encore de personnage ? On le cr\\u00e9e avec vous, puis on l'anime.\"\n     }\n    },\n    {\n     \"@type\": \"Question\",\n     \"name\": \"Combien de temps faut-il pour une vid\\u00e9o ?\",\n     \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Comptez en g\\u00e9n\\u00e9ral 4 \\u00e0 6 semaines, du premier appel \\u00e0 la livraison, selon la dur\\u00e9e de la vid\\u00e9o et le personnage.\"\n     }\n    },\n    {\n     \"@type\": \"Question\",\n     \"name\": \"Vous travaillez avec des entreprises \\u00e0 Lille ?\",\n     \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Oui, dans toute la m\\u00e9tropole lilloise et les Hauts-de-France. Briefs en visio, storyboard et animations valid\\u00e9s en ligne, livraison dans tous les formats.\"\n     }\n    }\n   ]\n  }\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>Studio motion design &#183; Lille &#183; Hauts-de-France Motion design &#224; Lille&nbsp;: on donne vie &#224; votre personnage Le motion design, pour nous, c&rsquo;est du th&#233;&#226;tre&nbsp;: un propos, une histoire, un personnage qui le joue. Votre sujet complexe monte sur sc&#232;ne, et votre public s&rsquo;en souvient. Parlons de votre vid&#233;o Rencontrer la troupe 2D &#183; 3D&#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-13041","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>Motion design \u00e0 Lille | Studio d&#039;animation de personnages<\/title>\n<meta name=\"description\" content=\"Studio de motion design \u00e0 Lille : on donne vie \u00e0 votre personnage en vid\u00e9o 2D ou 3D. Vid\u00e9o explicative, formation, r\u00e9seaux sociaux. R\u00e9ponse sous 24 h.\" \/>\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\/ko\/\ubaa8\uc158-\ub514\uc790\uc778-\ub9b4\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Motion design \u00e0 Lille | Studio d&#039;animation de personnages\" \/>\n<meta property=\"og:description\" content=\"Studio de motion design \u00e0 Lille : on donne vie \u00e0 votre personnage en vid\u00e9o 2D ou 3D. Vid\u00e9o explicative, formation, r\u00e9seaux sociaux. R\u00e9ponse sous 24 h.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.freshorganicmotion.com\/ko\/\ubaa8\uc158-\ub514\uc790\uc778-\ub9b4\/\" \/>\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-11T13:20:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-skivinne-attente.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data1\" content=\"11\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/motion-design-lille\\\/\",\"url\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/motion-design-lille\\\/\",\"name\":\"Motion design \u00e0 Lille | Studio d'animation de personnages\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/motion-design-lille\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/motion-design-lille\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/wp-content\\\/uploads\\\/motion-design-lille-skivinne-attente.webp\",\"datePublished\":\"2026-10-11T13:15:22+00:00\",\"dateModified\":\"2026-10-11T13:20:24+00:00\",\"description\":\"Studio de motion design \u00e0 Lille : on donne vie \u00e0 votre personnage en vid\u00e9o 2D ou 3D. Vid\u00e9o explicative, formation, r\u00e9seaux sociaux. R\u00e9ponse sous 24 h.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/motion-design-lille\\\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.freshorganicmotion.com\\\/motion-design-lille\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/motion-design-lille\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/wp-content\\\/uploads\\\/motion-design-lille-skivinne-attente.webp\",\"contentUrl\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/wp-content\\\/uploads\\\/motion-design-lille-skivinne-attente.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/motion-design-lille\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Motion design lille\"}]},{\"@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\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/#organization\",\"name\":\"Fresh Organic Motion\",\"url\":\"https:\\\/\\\/www.freshorganicmotion.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@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":"\ub9b4\uc758 \ubaa8\uc158 \ub514\uc790\uc778 | \uce90\ub9ad\ud130 \uc560\ub2c8\uba54\uc774\uc158 \uc2a4\ud29c\ub514\uc624","description":"\ub9b4 \uc18c\uc7ac \ubaa8\uc158 \ub514\uc790\uc778 \uc2a4\ud29c\ub514\uc624: 2D \ub610\ub294 3D \uc601\uc0c1\uc73c\ub85c \uace0\uac1d\ub2d8\uc758 \uce90\ub9ad\ud130\uc5d0 \uc0dd\uba85\uc744 \ubd88\uc5b4\ub123\uc5b4 \ub4dc\ub9bd\ub2c8\ub2e4. \uc124\uba85 \uc601\uc0c1, \uad50\uc721 \uc601\uc0c1, \uc18c\uc15c \ubbf8\ub514\uc5b4 \uc601\uc0c1 \uc81c\uc791. 24\uc2dc\uac04 \uc774\ub0b4 \ub2f5\ubcc0 \ub4dc\ub9bd\ub2c8\ub2e4.","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\/ko\/\ubaa8\uc158-\ub514\uc790\uc778-\ub9b4\/","og_locale":"ko_KR","og_type":"article","og_title":"Motion design \u00e0 Lille | Studio d'animation de personnages","og_description":"Studio de motion design \u00e0 Lille : on donne vie \u00e0 votre personnage en vid\u00e9o 2D ou 3D. Vid\u00e9o explicative, formation, r\u00e9seaux sociaux. R\u00e9ponse sous 24 h.","og_url":"https:\/\/www.freshorganicmotion.com\/ko\/\ubaa8\uc158-\ub514\uc790\uc778-\ub9b4\/","og_site_name":"Fresh Organic Motion","article_publisher":"https:\/\/www.facebook.com\/freshorganicmotion.studio\/","article_modified_time":"2026-10-11T13:20:24+00:00","og_image":[{"url":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-skivinne-attente.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"11\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.freshorganicmotion.com\/motion-design-lille\/","url":"https:\/\/www.freshorganicmotion.com\/motion-design-lille\/","name":"\ub9b4\uc758 \ubaa8\uc158 \ub514\uc790\uc778 | \uce90\ub9ad\ud130 \uc560\ub2c8\uba54\uc774\uc158 \uc2a4\ud29c\ub514\uc624","isPartOf":{"@id":"https:\/\/www.freshorganicmotion.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.freshorganicmotion.com\/motion-design-lille\/#primaryimage"},"image":{"@id":"https:\/\/www.freshorganicmotion.com\/motion-design-lille\/#primaryimage"},"thumbnailUrl":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-skivinne-attente.webp","datePublished":"2026-10-11T13:15:22+00:00","dateModified":"2026-10-11T13:20:24+00:00","description":"\ub9b4 \uc18c\uc7ac \ubaa8\uc158 \ub514\uc790\uc778 \uc2a4\ud29c\ub514\uc624: 2D \ub610\ub294 3D \uc601\uc0c1\uc73c\ub85c \uace0\uac1d\ub2d8\uc758 \uce90\ub9ad\ud130\uc5d0 \uc0dd\uba85\uc744 \ubd88\uc5b4\ub123\uc5b4 \ub4dc\ub9bd\ub2c8\ub2e4. \uc124\uba85 \uc601\uc0c1, \uad50\uc721 \uc601\uc0c1, \uc18c\uc15c \ubbf8\ub514\uc5b4 \uc601\uc0c1 \uc81c\uc791. 24\uc2dc\uac04 \uc774\ub0b4 \ub2f5\ubcc0 \ub4dc\ub9bd\ub2c8\ub2e4.","breadcrumb":{"@id":"https:\/\/www.freshorganicmotion.com\/motion-design-lille\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.freshorganicmotion.com\/motion-design-lille\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.freshorganicmotion.com\/motion-design-lille\/#primaryimage","url":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-skivinne-attente.webp","contentUrl":"https:\/\/www.freshorganicmotion.com\/wp-content\/uploads\/motion-design-lille-skivinne-attente.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/www.freshorganicmotion.com\/motion-design-lille\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.freshorganicmotion.com\/"},{"@type":"ListItem","position":2,"name":"Motion design lille"}]},{"@type":"WebSite","@id":"https:\/\/www.freshorganicmotion.com\/#website","url":"https:\/\/www.freshorganicmotion.com\/","name":"\uc2e0\uc120\ud55c \uc720\uae30\ub18d \ubaa8\uc158","description":"2D \ubc0f 3D \ube0c\ub79c\ub4dc \ub9c8\uc2a4\ucf54\ud2b8 \uc81c\uc791 \uc2a4\ud29c\ub514\uc624","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":"ko-KR"},{"@type":"Organization","@id":"https:\/\/www.freshorganicmotion.com\/#organization","name":"\uc2e0\uc120\ud55c \uc720\uae30\ub18d \ubaa8\uc158","url":"https:\/\/www.freshorganicmotion.com\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@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\/ko\/wp-json\/wp\/v2\/pages\/13041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freshorganicmotion.com\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.freshorganicmotion.com\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.freshorganicmotion.com\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freshorganicmotion.com\/ko\/wp-json\/wp\/v2\/comments?post=13041"}],"version-history":[{"count":10,"href":"https:\/\/www.freshorganicmotion.com\/ko\/wp-json\/wp\/v2\/pages\/13041\/revisions"}],"predecessor-version":[{"id":13052,"href":"https:\/\/www.freshorganicmotion.com\/ko\/wp-json\/wp\/v2\/pages\/13041\/revisions\/13052"}],"wp:attachment":[{"href":"https:\/\/www.freshorganicmotion.com\/ko\/wp-json\/wp\/v2\/media?parent=13041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}