{"id":14737,"date":"2026-04-28T12:34:43","date_gmt":"2026-04-28T10:34:43","guid":{"rendered":"https:\/\/www.ok3d.fr\/?page_id=14737"},"modified":"2026-09-25T22:17:28","modified_gmt":"2026-09-25T20:17:28","slug":"home","status":"publish","type":"page","link":"https:\/\/www.ok3d.fr\/en\/","title":{"rendered":"home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14737\" class=\"elementor elementor-14737\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f52d600 e-con-full e-flex e-con e-parent\" data-id=\"f52d600\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-185a979 elementor-widget elementor-widget-html\" data-id=\"185a979\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- OK3D \u2014 ACCUEIL COMPLET + OUVERTURE SVG INT\u00c9GR\u00c9E\r\nRemplacer tout le contenu du widget HTML de la page d\u2019accueil par ce fichier.\r\nSupprimer le pr\u00e9c\u00e9dent bloc d\u2019ouverture dans le code personnalis\u00e9 s\u2019il a \u00e9t\u00e9 install\u00e9.\r\nLogo SVG inclus : aucun fichier suppl\u00e9mentaire \u00e0 importer.\r\nUne ouverture par session. Pour tester \u00e0 nouveau : nouvelle session priv\u00e9e.\r\nLe bloc commence \u00e0 agir quand le widget est re\u00e7u et ex\u00e9cut\u00e9 ; il ne masque pas\r\nle d\u00e9lai serveur pr\u00e9c\u00e9dant le HTML. Aucun aper\u00e7u fictif n\u2019est inclus.\r\n-->\r\n<style>\r\nhtml.ok3d-opening-page,html.ok3d-opening-page body{background-color:#080a10!important}\r\n#ok3d-opening{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:hidden;background:#080a10;pointer-events:none;opacity:1;isolation:isolate;animation:ok3d-opening-safety .4s 2.4s forwards}\r\n#ok3d-opening *{box-sizing:border-box}\r\n#ok3d-opening::before{content:\"\";position:absolute;width:min(95vw,850px);aspect-ratio:1;left:50%;top:50%;border-radius:50%;background:radial-gradient(ellipse,rgba(100,140,255,.17),rgba(57,83,170,.055) 43%,transparent 69%);transform:translate(-50%,-50%) scale(.74);animation:ok3d-opening-halo 2.5s cubic-bezier(.16,1,.3,1) both;z-index:-1}\r\n#ok3d-opening .ok3d-opening-mark{position:relative;width:clamp(160px,23vw,230px);line-height:0;animation:ok3d-opening-reveal 1.15s cubic-bezier(.16,1,.3,1) both}\r\n#ok3d-opening svg{display:block;width:100%;height:auto;overflow:visible}\r\n#ok3d-opening .ok3d-symbol{fill:#fff;animation:ok3d-symbol-in 1.1s cubic-bezier(.16,1,.3,1) both}\r\n#ok3d-opening .ok3d-dot{fill:#648cff;transform-box:fill-box;transform-origin:center;animation:ok3d-dot-in .95s .2s cubic-bezier(.16,1,.3,1) both}\r\n#ok3d-opening .ok3d-dot-glow{fill:#648cff;opacity:0;transform-box:fill-box;transform-origin:center;animation:ok3d-dot-glow 1.5s .25s ease-out both}\r\n@keyframes ok3d-symbol-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes ok3d-dot-in{from{opacity:0;transform:translateY(32px) scale(.65)}to{opacity:1;transform:translateY(0) scale(1)}}\r\n@keyframes ok3d-dot-glow{0%{opacity:0;transform:scale(.7)}35%{opacity:.16}100%{opacity:0;transform:scale(2.3)}}\r\n#ok3d-opening.ok3d-opening-out{opacity:0;transition:opacity .45s cubic-bezier(.22,1,.36,1)}\r\n@keyframes ok3d-opening-reveal{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\r\n@keyframes ok3d-opening-halo{from{opacity:0;transform:translate(-50%,-50%) scale(.74)}to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}\r\n@keyframes ok3d-opening-safety{to{opacity:0;visibility:hidden}}\r\n@media(prefers-reduced-motion:reduce){#ok3d-opening{display:none!important}}\r\n<\/style>\r\n<script>\r\n\/* OK3D opening: independent of theme scripts; no fake progress, no scroll lock. *\/\r\n(()=>{\r\n  'use strict';\r\n  const preview=location.protocol==='file:';\r\n  const isHome=\/^\\\/(?:en\\\/?)?$\/.test(location.pathname);\r\n  if((!isHome && !preview) || window.self!==window.top) return;\r\n  document.documentElement.classList.add('ok3d-opening-page');\r\n  const motion=window.matchMedia('(prefers-reduced-motion: reduce)');\r\n  const navigation=performance.getEntriesByType('navigation')[0];\r\n  const KEY='ok3d-opening-svg-v2';\r\n  if(motion.matches || navigation?.type==='back_forward') return;\r\n  try{if(!preview && sessionStorage.getItem(KEY))return;}catch(_e){}\r\n  if(document.getElementById('ok3d-opening'))return;\r\n  const started=performance.now();\r\n  let overlay,bodyObserver,mediaObserver,video,closed=false,exitTimer;\r\n  const failsafe=setTimeout(close,2000);\r\n  function close(){\r\n    if(closed)return;\r\n    closed=true;\r\n    clearTimeout(failsafe);clearTimeout(exitTimer);\r\n    bodyObserver?.disconnect();mediaObserver?.disconnect();\r\n    video?.removeEventListener('loadeddata',ready);\r\n    video?.removeEventListener('error',close);\r\n    window.removeEventListener('pageshow',onPageShow);\r\n    document.removeEventListener('keydown',onKey);\r\n    motion.removeEventListener?.('change',onMotion);\r\n    if(overlay){overlay.classList.add('ok3d-opening-out');setTimeout(()=>overlay.remove(),480);}\r\n  }\r\n  function ready(){\r\n    if(closed)return;\r\n    clearTimeout(exitTimer);\r\n    \/\/ A brief readable reveal; never wait for the entire video to download.\r\n    exitTimer=setTimeout(close,Math.max(0,1250-(performance.now()-started)));\r\n  }\r\n  function onPageShow(event){if(event.persisted)close();}\r\n  function onKey(event){if(event.key==='Escape'||event.key==='Tab')close();}\r\n  function onMotion(event){if(event.matches)close();}\r\n  function findVideo(){\r\n    if(closed)return;\r\n    const candidate=document.querySelector('#hero-video, #ok3d-app .hero video');\r\n    if(!candidate)return;\r\n    video=candidate;mediaObserver?.disconnect();\r\n    video.addEventListener('loadeddata',ready,{once:true});\r\n    video.addEventListener('error',close,{once:true});\r\n    if(video.readyState>=2)ready();\r\n  }\r\n  function mount(){\r\n    if(closed || !document.body || overlay)return;\r\n    bodyObserver?.disconnect();\r\n    overlay=document.createElement('div');\r\n    overlay.id='ok3d-opening';\r\n    overlay.setAttribute('aria-hidden','true');\r\n    const mark=document.createElement('div');mark.className='ok3d-opening-mark';\r\n    mark.innerHTML='<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"280 560 1440 980\" focusable=\"false\" aria-hidden=\"true\"><circle class=\"ok3d-dot-glow\" cx=\"1562.9\" cy=\"1366.7\" r=\"91.7\"\/><path class=\"ok3d-symbol\" d=\"M1445.7,1147.5c-66.2-61.7-131.8-123.9-198.7-189.7,57-57,113.9-113.9,170.9-170.9,35.3-35.3,35.3-92.6,0-127.9l-1.7-1.7c-34.9-34.9-91.3-35.4-126.8-1.1-71.6,69.3-143.6,147.5-215.5,215.9-9.6,9.2-25.2,7.3-32.4-3.8-14.1-21.9-19.8-32.7-33.6-57.8-26.8-39.9-46-73.4-105.8-117.6-87.8-64.9-177.6-70.1-195.5-70.8-118.4-5-202,53.2-227,72.2-127.2,96.7-140,243.6-141.7,268.9-2.1,30.6-7.8,138.7,66.9,240.1,88.6,120.1,221.6,137.9,242.7,140.4,151.5,17.7,257.9-70.5,286-95.8,22.6-20.4,81.8-96.3,112.8-177.2,5-12.9,21.3-17,31.6-7.7l245.2,220.1c36.3,31.9,91.2,29.7,124.8-5.1l1.3-1.3c35.2-36.4,33.6-94.5-3.4-129ZM694.3,1170.3c-103.1.9-186.8-82.9-185.9-185.9.9-100.1,82.6-181.9,182.7-182.7,103.1-.9,186.8,82.9,185.9,185.9-.9,100.1-82.6,181.9-182.7,182.7Z\"\/><circle class=\"ok3d-dot\" cx=\"1562.9\" cy=\"1366.7\" r=\"91.7\"\/><\/svg>';\r\n    overlay.append(mark);document.body.prepend(overlay);\r\n    try{sessionStorage.setItem(KEY,'1');}catch(_e){}\r\n    mediaObserver=new MutationObserver(findVideo);\r\n    mediaObserver.observe(document.body,{childList:true,subtree:true});findVideo();\r\n  }\r\n  window.addEventListener('pageshow',onPageShow);\r\n  document.addEventListener('keydown',onKey);\r\n  motion.addEventListener?.('change',onMotion);\r\n  if(document.body)mount();\r\n  else{bodyObserver=new MutationObserver(mount);bodyObserver.observe(document.documentElement,{childList:true});}\r\n})();\r\n<\/script>\r\n\r\n\r\n<!-- OK3D \u2014 bloc autonome pr\u00eat pour Elementor (widget HTML).\r\n     Tout le CSS est isol\u00e9 sous #ok3d-app. Les images principales sont int\u00e9gr\u00e9es dans ce fichier.\r\n     La vid\u00e9o du hero reste sur CONFIG.heroVideo = assets\/showreel.mp4 : remplacez uniquement cette URL si votre vid\u00e9o est h\u00e9berg\u00e9e ailleurs. -->\r\n<div id=\"ok3d-app\">\r\n\r\n<a class=\"skip\" href=\"#contenu\">Aller au contenu<\/a>\r\n\r\n<div id=\"contenu\">\r\n<section aria-labelledby=\"hero-title\" class=\"hero\"><div aria-hidden=\"true\" class=\"hero-media\"><video id=\"hero-video\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" webkit-playsinline=\"\" preload=\"metadata\"><source media=\"(max-width:767px)\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/eye_portrait_hero_site.mp4?v=20260917-2\" type=\"video\/mp4\"\/><source media=\"(min-width:768px)\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/anim_hero_multiproject_10mo.mp4\" type=\"video\/mp4\"\/><\/video><\/div><div class=\"wrap hero-body\"><p class=\"kicker\">Studio ind\u00e9pendant \u00b7 3D, design &amp; digital<\/p><h1 id=\"hero-title\">Vos id\u00e9es.<br\/>Une autre<br\/><em>dimension.<\/em><\/h1><p class=\"hero-copy\">Animation 3D, design graphique et webdesign.<br\/>Je donne forme \u00e0 vos id\u00e9es pour cr\u00e9er des images, des marques et des exp\u00e9riences qui restent.<\/p><div class=\"hero-actions\"><a class=\"btn btn-primary\" href=\"#projets\">Explorer les projets <span aria-hidden=\"true\" class=\"arrow\">\u2197<\/span><\/a><button class=\"reel-trigger\" data-title=\"OK3D \u2014 Showreel\" data-video=\"https:\/\/vimeo.com\/1131509451?share=copy&amp;fl=sv&amp;fe=ci\"><span aria-hidden=\"true\" class=\"play\">\u25b6<\/span>Voir le showreel<\/button><\/div><\/div><span aria-hidden=\"true\" class=\"hero-index\">DIRECTION ARTISTIQUE \u00d7 TECHNIQUE<\/span><div class=\"wrap hero-bottom\"><p class=\"hero-signature\"><span>J\u00e9r\u00e9my Vel\u00e9 \u00b7 Cr\u00e9ateur d\u2019OK3D<\/span><span>Paris, France<\/span><\/p><div class=\"hero-controls\"><button aria-label=\"Mettre la vid\u00e9o de fond en pause\" class=\"pause\" id=\"pause-video\">\u2161<\/button><a class=\"scroll-link\" href=\"#projets\">D\u00e9filer pour d\u00e9couvrir <span aria-hidden=\"true\">\u2193<\/span><\/a><\/div><\/div><\/section>\r\n<div class=\"clients\"><div class=\"wrap clients-inner\"><p class=\"clients-label\">Des projets pour<br\/>de belles r\u00e9f\u00e9rences.<\/p><div aria-label=\"R\u00e9f\u00e9rences clients\" class=\"client-list\"><span>ALPINE<\/span><span class=\"kiprun\">KIPRUN<\/span><span>RIVES<\/span><span>amcor<\/span><span class=\"obvious\">OBVIOUS<\/span><span class=\"laposte\">La Poste<\/span><\/div><\/div><\/div>\r\n<section class=\"section works wrap\" id=\"projets\"><div class=\"section-head reveal\"><div><p class=\"kicker\">01 \/ Projets s\u00e9lectionn\u00e9s<\/p><h2>Le travail parle.<br\/><span>Les images aussi.<\/span><\/h2><\/div><a class=\"text-link\" href=\"https:\/\/www.ok3d.fr\/projets\/\">Tout le portfolio <span aria-hidden=\"true\" class=\"arrow\">\u2197<\/span><\/a><\/div><div class=\"project-grid\">\r\n<article class=\"project reveal\"><button aria-label=\"Voir l\u2019animation Rives \u2014 Lancement produit\" class=\"project-media\" data-title=\"Rives \u2014 Lancement produit\" data-video=\"https:\/\/youtu.be\/_TGaLLXHfUI\"><img loading=\"lazy\" decoding=\"async\" alt=\"Visualisation du projet Rives, station de paddle autonome\" height=\"720\" loading=\"lazy\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/05\/plage_1_visu_test1-scaled.png\" width=\"1280\"\/><span class=\"project-label\">3D &amp; Motion design<\/span><span aria-hidden=\"true\" class=\"project-play\">\u25b6<\/span><\/button><div class=\"project-info\"><div><h3><a href=\"https:\/\/www.ok3d.fr\/projets\/rives\/\">Rives \u2197<\/a><\/h3><p>Donner vie \u00e0 un lancement produit.<\/p><\/div><span class=\"project-number\">01 \u2014 03<\/span><\/div><\/article>\r\n<article class=\"project reveal\"><button aria-label=\"Voir l\u2019animation Kiprun \u2014 Branding sportif\" class=\"project-media\" data-title=\"Kiprun \u2014 Branding sportif\" data-video=\"https:\/\/youtu.be\/h7Jilcg6OMg\"><img loading=\"lazy\" decoding=\"async\" alt=\"Image de l\u2019animation de marque Kiprun\" height=\"1280\" loading=\"lazy\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/t-shirt_site_5-scaled-1.webp\" width=\"720\"\/><span class=\"project-label\">Animation &amp; Branding<\/span><span aria-hidden=\"true\" class=\"project-play\">\u25b6<\/span><\/button><div class=\"project-info\"><div><h3><a href=\"https:\/\/www.ok3d.fr\/projets\/kiprun\/\">Kiprun \u2197<\/a><\/h3><p>Mettre l\u2019identit\u00e9 sportive en mouvement.<\/p><\/div><span class=\"project-number\">02 \u2014 03<\/span><\/div><\/article>\r\n<article class=\"project reveal\"><button aria-label=\"Voir l\u2019animation Obvious \u00d7 Alpine\" class=\"project-media\" data-title=\"Obvious \u00d7 Alpine \u2014 Visualisation 3D\" data-video=\"1058636442\"><img loading=\"lazy\" decoding=\"async\" alt=\"Rendu automobile du projet Obvious \u00d7 Alpine\" height=\"720\" loading=\"lazy\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2023\/11\/turn_arround_alpine_a110_sastruga_00000.webp\" width=\"1280\"\/><span class=\"project-label\">Rendu 3D \u00b7 Automobile<\/span><span aria-hidden=\"true\" class=\"project-play\">\u25b6<\/span><\/button><div class=\"project-info\"><div><h3><a href=\"https:\/\/www.ok3d.fr\/projets\/alpine\/\">Obvious \u00d7 Alpine \u2197<\/a><\/h3><p>Explorer une autre vision de l\u2019automobile.<\/p><\/div><span class=\"project-number\">03 \u2014 03<\/span><\/div><\/article>\r\n<\/div><\/section>\r\n<section class=\"section expertise\" id=\"expertises\"><div class=\"wrap\"><div class=\"section-head reveal\"><div><p class=\"kicker\">02 \/ Expertises<\/p><h2>Trois disciplines.<br\/>Une vision d\u2019ensemble.<\/h2><\/div><p>De la premi\u00e8re id\u00e9e au dernier d\u00e9tail, un m\u00eame regard cr\u00e9atif pour faire avancer votre projet.<\/p><\/div><div class=\"services interactive-services\">\r\n<article class=\"experience-card reveal\" id=\"service-3d\"><div class=\"experience-top\"><span>01 \/ 3D &amp; ANIMATION<\/span><span aria-hidden=\"true\" class=\"experience-symbol\">\u25c7<\/span><\/div>\r\n<div class=\"service-stage gem-stage\" style=\"--split:52%;--split-number:.52\"><div class=\"stage-corner\">\u00c9TUDE DE FORME<\/div><div class=\"gem-object\"><img decoding=\"async\" class=\"gem-wire-img\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/vue_viewport_debelmond.webp\" alt=\"Mod\u00e8le 3D en vue filaire\"><div class=\"gem-render\"><img decoding=\"async\" class=\"gem-solid-img\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/vue_render_debelmond.webp\" alt=\"Rendu 3D final avec mat\u00e9riaux\"><\/div><\/div><div aria-hidden=\"true\" class=\"compare-line\"><span>\u2194<\/span><\/div><div aria-hidden=\"true\" class=\"compare-labels\"><span>VIEWPORT<\/span><span>RENDER<\/span><\/div><\/div>\r\n<div class=\"experience-control\"><label for=\"material-range\">Explorez la mati\u00e8re<\/label><input aria-label=\"R\u00e9partition entre filaire et mati\u00e8re\" aria-valuetext=\"52 % filaire, 48 % mati\u00e8re\" id=\"material-range\" max=\"100\" min=\"0\" type=\"range\" value=\"52\"\/><\/div>\r\n<div class=\"experience-copy\"><h3>De l\u2019id\u00e9e<br\/>\u00e0 la dimension.<\/h3><p>Produits, univers, films anim\u00e9s. Des images qui donnent du relief \u00e0 votre projet et du sens au mouvement.<\/p><div class=\"tags\"><span>Mod\u00e9lisation<\/span><span>Rendu 3D<\/span><span>Motion design<\/span><\/div><a class=\"experience-link\" href=\"https:\/\/www.ok3d.fr\/3d-animation\/\">Explorer la 3D <span aria-hidden=\"true\">\u2197<\/span><\/a><\/div><\/article>\r\n<article class=\"experience-card reveal\" id=\"service-brand\"><div class=\"experience-top\"><span>02 \/ DESIGN GRAPHIQUE<\/span><span aria-hidden=\"true\" class=\"experience-symbol\">\u2733<\/span><\/div>\r\n<div class=\"service-stage brand-stage\" data-brand=\"symbol\"><div class=\"stage-corner\">IDENTIT\u00c9 OK3D<\/div><div class=\"brand-symbol\"><img decoding=\"async\" alt=\"Symbole du studio OK3D\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2023\/06\/ok3d_logo_seul_site_Plan-de-travail-1-e1755772558613.webp\"\/><span>OK3D\u00ae<\/span><\/div><div aria-hidden=\"true\" class=\"brand-universe\"><div class=\"brand-tile brand-primary\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2024\/03\/cropped-logo_ok3d-e1764150409296.webp\"\/><span>CREATIVE<br\/>IN EVERY<br\/>DIMENSION.<\/span><\/div><div class=\"brand-tile brand-type\"><strong>Aa<\/strong><span>FORME &amp; CARACT\u00c8RE<\/span><\/div><div class=\"brand-tile brand-swatches\"><i><\/i><i><\/i><i><\/i><i><\/i><\/div><div class=\"brand-tile brand-note\">Une id\u00e9e.<br\/>Une signature.<span>OK3D \/ STUDIO CR\u00c9ATIF<\/span><\/div><\/div><\/div>\r\n<div aria-label=\"Pr\u00e9sentation de l\u2019identit\u00e9 graphique\" class=\"experience-control segmented\" role=\"group\"><button aria-pressed=\"true\" data-brand-mode=\"symbol\" type=\"button\">Le symbole<\/button><button aria-pressed=\"false\" data-brand-mode=\"universe\" type=\"button\">L\u2019univers<\/button><\/div>\r\n<div class=\"experience-copy\"><h3>Du caract\u00e8re.<br\/>De la coh\u00e9rence.<\/h3><p>Une identit\u00e9 qui vous ressemble, du premier signe \u00e0 chaque support. Pour faire reconna\u00eetre votre marque.<\/p><div class=\"tags\"><span>Identit\u00e9 visuelle<\/span><span>Branding<\/span><span>Print &amp; Digital<\/span><\/div><a class=\"experience-link\" href=\"https:\/\/www.ok3d.fr\/design-graphique\/\">Explorer le design <span aria-hidden=\"true\">\u2197<\/span><\/a><\/div><\/article>\r\n<article class=\"experience-card reveal\" id=\"service-web\"><div class=\"experience-top\"><span>03 \/ WEBDESIGN<\/span><span aria-hidden=\"true\" class=\"experience-symbol\">\u2318<\/span><\/div>\r\n<div class=\"service-stage web-stage\" data-device=\"desktop\"><div class=\"stage-corner\">UNE EXP\u00c9RIENCE, TOUS LES \u00c9CRANS<\/div><div class=\"demo-browser\"><div class=\"demo-chrome\"><span aria-hidden=\"true\">\u25cf \u25cf \u25cf<\/span><span>ok3d.fr<\/span><span aria-hidden=\"true\">\u2197<\/span><\/div><div class=\"demo-page\"><div class=\"demo-nav\"><strong>OK<span>3D<\/span><\/strong><span class=\"demo-nav-links\">Projets \u00a0 Studio \u00a0 Contact<\/span><span class=\"demo-hamburger\">\u2630<\/span><\/div><div class=\"demo-hero\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/05\/plage_1_visu_test1-scaled.png\"\/><div><small>STUDIO CR\u00c9ATIF<\/small><strong>Vos id\u00e9es.<br\/>Une autre<br\/><em>dimension.<\/em><\/strong><span class=\"demo-cta\">Explorer les projets \u2197<\/span><\/div><\/div><div class=\"demo-bottom\"><span>3D &amp; ANIMATION<\/span><span>DESIGN<\/span><span>DIGITAL<\/span><\/div><\/div><\/div><\/div>\r\n<div aria-label=\"Format de la maquette web\" class=\"experience-control segmented\" role=\"group\"><button aria-pressed=\"true\" data-device-mode=\"desktop\" type=\"button\">Ordinateur<\/button><button aria-pressed=\"false\" data-device-mode=\"mobile\" type=\"button\">Mobile<\/button><\/div>\r\n<div class=\"experience-copy\"><h3>Une pr\u00e9sence.<br\/>Sans fronti\u00e8res.<\/h3><p>Un site qui porte votre identit\u00e9 et accompagne vos visiteurs, du grand \u00e9cran au creux de la main.<\/p><div class=\"tags\"><span>UI \/ UX<\/span><span>WordPress<\/span><span>Responsive<\/span><\/div><a class=\"experience-link\" href=\"https:\/\/www.ok3d.fr\/webdesign\/\">Explorer le web <span aria-hidden=\"true\">\u2197<\/span><\/a><\/div><\/article>\r\n<\/div><\/div><\/section>\r\n<section class=\"section about wrap\" id=\"studio\"><div class=\"about-grid reveal\"><div><p class=\"kicker\">03 \/ Le studio<\/p><h2>Un esprit cr\u00e9atif.<br\/><span class=\"blue\">Plusieurs dimensions.<\/span><\/h2><\/div><div class=\"about-copy\"><p>Je suis J\u00e9r\u00e9my, designer digital et cr\u00e9ateur 3D. Avec OK3D, j\u2019accompagne les marques et les entrepreneurs dans la cr\u00e9ation d\u2019un univers visuel qui leur ressemble.<\/p><p>Mon approche : comprendre ce que vous voulez transmettre, trouver la bonne direction et soigner chaque d\u00e9tail. Vous \u00e9changez directement avec celui qui imagine et r\u00e9alise votre projet.<\/p><div class=\"signature\"><span aria-hidden=\"true\" class=\"initials\">JV<\/span><div><strong>J\u00e9r\u00e9my Vel\u00e9<\/strong><small>Fondateur d\u2019OK3D \u00b7 Votre interlocuteur cr\u00e9atif<\/small><\/div><\/div><\/div><\/div><div class=\"stats reveal\"><div class=\"stat\"><strong>80<span>+<\/span><\/strong><p>Projets livr\u00e9s<\/p><\/div><div class=\"stat\"><strong>4<span>+<\/span><\/strong><p>Ann\u00e9es d\u2019exp\u00e9rience<\/p><\/div><div class=\"stat\"><strong>100<span>%<\/span><\/strong><p>Sur mesure<\/p><\/div><\/div><div class=\"tool-list\"><span>Dans mon atelier digital<\/span><span>Blender<\/span><span>ZBrush<\/span><span>After Effects<\/span><span>Photoshop<\/span><span>Illustrator<\/span><span>WordPress<\/span><\/div><\/section>\r\n<section class=\"section method wrap\"><div class=\"section-head reveal\"><div><p class=\"kicker\">04 \/ La m\u00e9thode<\/p><h2>Une id\u00e9e, puis du concret.<\/h2><\/div><\/div><div class=\"method-grid\" style=\"--method-progress: 0;\"><article class=\"step reveal\"><span>01 \/ \u00c9CHANGER<\/span><h3>Comprendre.<\/h3><p>Vos objectifs, votre univers, vos contraintes. On pose les bonnes bases ensemble.<\/p><\/article><article class=\"step reveal\"><span>02 \/ EXPLORER<\/span><h3>Imaginer.<\/h3><p>R\u00e9f\u00e9rences, intentions, direction artistique. On d\u00e9finit le cap avant de produire.<\/p><\/article><article class=\"step reveal\"><span>03 \/ PRODUIRE<\/span><h3>Cr\u00e9er.<\/h3><p>La cr\u00e9ation prend forme, avec des \u00e9changes r\u00e9guliers pour affiner chaque d\u00e9tail.<\/p><\/article><article class=\"step reveal\"><span>04 \/ FINALISER<\/span><h3>Livrer.<\/h3><p>Les derni\u00e8res validations, les bons formats et un accompagnement pour la suite.<\/p><\/article><\/div><\/section>\r\n<section class=\"section contact\" id=\"contact\"><div class=\"wrap contact-grid\"><div class=\"contact-intro\"><p class=\"kicker\">05 \/ Votre prochain projet<\/p><h2>Et si on cr\u00e9ait<br\/><span class=\"blue\">la suite ?<\/span><\/h2><p>Un produit \u00e0 r\u00e9v\u00e9ler, une marque \u00e0 lancer, un site \u00e0 repenser ? Parlez-moi de votre id\u00e9e.<\/p><a class=\"email-link\" href=\"mailto:contact@ok3d.fr\">contact@ok3d.fr <span aria-hidden=\"true\" class=\"arrow\">\u2197<\/span><\/a><span class=\"contact-note\">Un \u00e9change direct. Une proposition sur mesure.<\/span><\/div><form id=\"brief-form\"><div class=\"form-grid\"><div class=\"field\"><label for=\"nom\">Votre nom *<\/label><input autocomplete=\"name\" id=\"nom\" maxlength=\"120\" name=\"nom\" placeholder=\"Pr\u00e9nom et nom\" required=\"\"\/><\/div><div class=\"field\"><label for=\"email\">Votre email *<\/label><input autocomplete=\"email\" id=\"email\" maxlength=\"180\" name=\"email\" placeholder=\"vous@entreprise.fr\" required=\"\" type=\"email\"\/><\/div><div class=\"field\"><label for=\"type_projet\">Votre besoin<\/label><select id=\"type_projet\" name=\"type_projet\"><option value=\"3D \/ Animation\">3D \/ Animation<\/option><option>Site web<\/option><option>Identit\u00e9 visuelle<\/option><option>Visuels marketing<\/option><option>Autre<\/option><\/select><\/div><div class=\"field\"><label for=\"budget\">Budget indicatif<\/label><select id=\"budget\" name=\"budget\"><option>\u00c0 d\u00e9finir<\/option><option>Moins de 1 000 \u20ac<\/option><option>1 000 \u2014 3 000 \u20ac<\/option><option>3 000 \u2014 7 000 \u20ac<\/option><option>7 000 \u20ac+<\/option><\/select><\/div><div class=\"field full\"><label for=\"message\">Votre projet en quelques mots *<\/label><textarea id=\"message\" maxlength=\"10000\" minlength=\"10\" name=\"message\" placeholder=\"L\u2019id\u00e9e, les objectifs, le calendrier\u2026\" required=\"\"><\/textarea><\/div><\/div><div aria-hidden=\"true\" class=\"honeypot\"><label for=\"website\">Ne pas remplir ce champ<\/label><input autocomplete=\"off\" id=\"website\" name=\"website\" tabindex=\"-1\"\/><\/div><div class=\"form-submit\"><button class=\"btn btn-primary\" id=\"submit-brief\" type=\"submit\">Envoyer mon brief <span aria-hidden=\"true\" class=\"arrow\">\u2197<\/span><\/button><small>* Champs obligatoires<\/small><\/div><p aria-live=\"polite\" class=\"form-status\" id=\"form-status\" role=\"status\"><\/p><p class=\"form-privacy\">Les informations transmises servent uniquement \u00e0 r\u00e9pondre \u00e0 votre demande.<\/p><\/form><\/div><\/section>\r\n<\/div>\r\n<dialog aria-labelledby=\"dialog-title\" class=\"video-dialog\" id=\"video-dialog\"><div class=\"dialog-head\"><p id=\"dialog-title\">Film du projet<\/p><button aria-label=\"Fermer la vid\u00e9o\" class=\"dialog-close\">\u00d7<\/button><\/div><div class=\"dialog-player\" id=\"dialog-player\"><\/div><p class=\"dialog-fallback\">La vid\u00e9o ne s\u2019affiche pas ? <a href=\"https:\/\/www.ok3d.fr\/\" id=\"video-direct\" rel=\"noopener noreferrer\" target=\"_blank\">L\u2019ouvrir directement \u2197<\/a><\/p><\/dialog>\r\n\r\n\r\n<\/div>\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');\r\n\r\n#ok3d-app{--bg:#080a10;--surface:#0e111a;--text:#f1f3fa;--muted:#a1a8ba;--line:#ffffff20;--blue:#648cff;--font:'Manrope',Arial,sans-serif;--display:'Space Grotesk',Arial,sans-serif;--gutter:clamp(22px,5vw,88px);position:relative;width:100%;max-width:none!important;margin:0!important;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow:clip}\r\n#ok3d-app,#ok3d-app *{box-sizing:border-box}\r\n#ok3d-app img{max-width:none}\r\n#ok3d-app button,#ok3d-app input,#ok3d-app select,#ok3d-app textarea{font-family:inherit}\r\n\/* Force the Elementor HTML widget\/container to span full width when possible. *\/\r\n.elementor-widget-html:has(#ok3d-app),.elementor-widget-html:has(#ok3d-app) .elementor-widget-container{width:100%;max-width:none!important}\r\n\r\n\r\n#ok3d-app{--bg:#080a10;--surface:#0e111a;--text:#f1f3fa;--muted:#a1a8ba;--line:#ffffff20;--blue:#648cff;--font:\"Manrope\",Arial,sans-serif;--display:\"Space Grotesk\",Arial,sans-serif;--gutter:clamp(22px,5vw,88px)}\r\n#ok3d-app *{box-sizing:border-box}#ok3d-app{scroll-behavior:smooth;scroll-padding-top:100px}#ok3d-app{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}#ok3d-app.locked{overflow:hidden}#ok3d-app button,#ok3d-app input,#ok3d-app select,#ok3d-app textarea{font:inherit}#ok3d-app button,#ok3d-app a{-webkit-tap-highlight-color:transparent}#ok3d-app button{cursor:pointer}#ok3d-app a{color:inherit;text-decoration:none}#ok3d-app button{color:inherit}#ok3d-app img{display:block;width:100%;height:auto}#ok3d-app ::selection{background:#648cff;color:#080a10}#ok3d-app :focus-visible{outline:2px solid #90adff;outline-offset:6px}#ok3d-app h1,#ok3d-app h2,#ok3d-app h3,#ok3d-app p{margin:0}#ok3d-app h1,#ok3d-app h2,#ok3d-app h3{font-family:var(--display);font-weight:500}#ok3d-app button:disabled{cursor:wait;opacity:.65}#ok3d-app .wrap{width:min(100%,1600px);margin:auto;padding-inline:var(--gutter)}#ok3d-app .section{padding-block:112px}#ok3d-app .kicker{font-size:13px;text-transform:uppercase;letter-spacing:.14em;display:flex;align-items:center;gap:14px;color:var(--muted)}#ok3d-app .kicker::before{content:\"\";width:22px;height:1px;background:var(--blue)}#ok3d-app .blue{color:var(--blue)}#ok3d-app .arrow{font-size:24px;line-height:1;display:inline-block;transition:transform .25s}#ok3d-app .btn{display:inline-flex;justify-content:center;align-items:center;gap:30px;min-height:54px;padding:14px 24px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--text);font-size:14px;font-weight:700;transition:background .25s,border-color .25s,transform .25s}#ok3d-app .btn:hover{border-color:var(--blue);background:#648cff10}#ok3d-app .btn:hover .arrow{transform:translate(3px,-3px)}#ok3d-app .btn-primary{background:#537fff;border-color:#537fff;color:#fff}#ok3d-app .btn-primary:hover{background:#6d92ff;border-color:#6d92ff}#ok3d-app .text-link{display:inline-flex;align-items:center;gap:20px;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:8px}#ok3d-app .text-link:hover{color:var(--blue)}#ok3d-app .skip{position:fixed;left:20px;top:-100px;z-index:100;background:var(--text);color:var(--bg);padding:10px}#ok3d-app .skip:focus{top:15px}\r\n#ok3d-app .header{position:absolute;top:0;left:0;width:100%;z-index:20;border-bottom:1px solid var(--line)}#ok3d-app .header-inner{display:flex;align-items:center;justify-content:space-between;height:94px;gap:24px}#ok3d-app .logo{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-3px;line-height:1}#ok3d-app .logo span{color:var(--blue)}#ok3d-app .logo b{display:inline-block;width:7px;height:7px;background:var(--blue);margin-left:5px}#ok3d-app .nav{display:flex;gap:34px;align-items:center}#ok3d-app .nav a{font-size:14px;color:#c4cad8;transition:color .2s}#ok3d-app .nav a:hover{color:#fff}#ok3d-app .header-contact{font-size:14px;border:1px solid #ffffff40;padding:10px 18px;border-radius:3px}#ok3d-app .menu-toggle{display:none;background:transparent;border:1px solid var(--line);padding:8px 13px;font-size:14px}\r\n#ok3d-app .hero{position:relative;min-height:850px;min-height:min(940px,100svh);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);background:#0a0d18}#ok3d-app .hero-media{position:absolute;inset:0;z-index:-3}#ok3d-app .hero-media video{width:100%;height:100%;object-fit:cover;object-position:center}#ok3d-app .hero::before{content:\"\";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,8,17,.94),rgba(5,8,17,.76) 40%,rgba(5,8,17,.13) 78%),linear-gradient(0deg,#080a10 0%,transparent 36%,#080a1055)}#ok3d-app .hero::after{content:\"\";position:absolute;inset:94px 0 0;z-index:-1;background:linear-gradient(90deg,transparent calc(75% - 1px),#ffffff0b 75%,transparent calc(75% + 1px));pointer-events:none}#ok3d-app .hero-body{padding-top:clamp(165px,19vh,230px);padding-bottom:165px}#ok3d-app .hero .kicker{color:#c5cfe6;margin-bottom:28px}#ok3d-app .hero h1{font-size:clamp(60px,7.5vw,116px);letter-spacing:-.065em;line-height:1.02;max-width:1000px}#ok3d-app .hero h1 em{font-style:normal;color:#92acff}#ok3d-app .hero-copy{max-width:470px;color:#bdc5d6;margin-top:30px;font-size:17px;line-height:1.8}#ok3d-app .hero-actions{display:flex;gap:28px;align-items:center;margin-top:34px}#ok3d-app .reel-trigger{display:inline-flex;gap:13px;align-items:center;background:transparent;border:0;font-size:14px;padding:10px 0}#ok3d-app .play{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff55;border-radius:50%;font-size:12px;padding-left:2px}#ok3d-app .reel-trigger:hover .play{background:var(--blue);border-color:var(--blue)}#ok3d-app .hero-bottom{position:absolute;bottom:0;width:100%;padding-block:24px;display:flex;justify-content:space-between;align-items:end}#ok3d-app .hero-signature{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#b4bed0;display:flex;gap:20px}#ok3d-app .hero-signature span+span{border-left:1px solid #ffffff40;padding-left:20px}#ok3d-app .hero-controls{display:flex;align-items:center;gap:22px;font-size:12px;color:#b4bed0}#ok3d-app .pause{border:1px solid #ffffff35;background:#080a1055;border-radius:50%;height:36px;width:36px;font-size:13px}#ok3d-app .scroll-link{font-size:13px;display:flex;gap:14px;align-items:center}#ok3d-app .hero-index{position:absolute;right:var(--gutter);top:47%;writing-mode:vertical-rl;color:#d4ddf0;letter-spacing:.13em;font-size:12px}\r\n#ok3d-app .clients{padding-block:34px;border-bottom:1px solid var(--line)}#ok3d-app .clients-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}#ok3d-app .clients-label{font-size:12px;color:var(--muted);max-width:115px;line-height:1.7}#ok3d-app .client-list{display:flex;align-items:center;justify-content:space-between;flex:1;gap:30px}#ok3d-app .client-list span{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.04em;color:#bec3cf}#ok3d-app .client-list .kiprun{font-style:italic;letter-spacing:-.08em}#ok3d-app .client-list .obvious{font-size:19px;letter-spacing:-.04em}#ok3d-app .client-list .laposte{font-size:20px;font-style:italic}\r\n#ok3d-app .section-head{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:46px}#ok3d-app .section-head h2,#ok3d-app .about h2,#ok3d-app .contact h2{font-size:clamp(40px,4.5vw,66px);letter-spacing:-.055em;line-height:1.08;margin-top:20px}#ok3d-app .section-head h2 span{color:var(--muted)}#ok3d-app .works{padding-bottom:106px}#ok3d-app .project-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:46px 28px}#ok3d-app .project:first-child{grid-column:1\/-1}#ok3d-app .project-media{position:relative;overflow:hidden;aspect-ratio:16\/10;background:var(--surface);border:1px solid var(--line);border-radius:6px;display:block;width:100%;padding:0;text-align:left}#ok3d-app .project:first-child .project-media{aspect-ratio:2.2}#ok3d-app .project-media img{height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s;filter:saturate(.92)}#ok3d-app .project-media:hover img{transform:scale(1.035);filter:saturate(1.1)}#ok3d-app .project:first-child .project-media img{object-position:50% 48%}#ok3d-app .project:nth-child(2) .project-media img{object-position:50% 40%}#ok3d-app .project-label{position:absolute;left:22px;top:22px;padding:7px 12px;font-size:12px;background:#080a10b8;border:1px solid #ffffff30;border-radius:3px;backdrop-filter:blur(12px)}#ok3d-app .project-play{position:absolute;right:22px;bottom:22px;width:54px;height:54px;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:50%;background:#080a1055;backdrop-filter:blur(10px);font-size:14px;transition:background .2s}#ok3d-app .project-media:hover .project-play{background:#537fff}#ok3d-app .project-info{padding-top:18px;display:flex;justify-content:space-between;align-items:start;gap:15px}#ok3d-app .project-info h3{font-size:25px;letter-spacing:-.045em}#ok3d-app .project-info p{font-size:14px;color:var(--muted);margin-top:4px}#ok3d-app .project-number{font-family:var(--display);font-size:13px;color:var(--muted);padding-top:7px}#ok3d-app .work-footer{display:flex;justify-content:center;margin-top:48px}\r\n#ok3d-app .expertise{border-block:1px solid var(--line);background:var(--surface)}#ok3d-app .expertise .section-head>p{max-width:350px;color:var(--muted)}#ok3d-app .service{border-top:1px solid var(--line);display:grid;grid-template-columns:70px 1fr 1fr;gap:35px;padding:38px 0;transition:background .25s}#ok3d-app .service:last-child{border-bottom:1px solid var(--line)}#ok3d-app .service-num{color:var(--blue);font-family:var(--display);font-size:14px;padding-top:6px}#ok3d-app .service h3{font-size:clamp(28px,3vw,40px);line-height:1.2;letter-spacing:-.045em}#ok3d-app .service p{color:var(--muted);max-width:480px;font-size:16px}#ok3d-app .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}#ok3d-app .tags span{border:1px solid var(--line);padding:4px 10px;border-radius:3px;font-size:12px;color:#c0c7d7}#ok3d-app .service-title small{display:block;margin-top:12px;color:#8292ba;font-size:13px;font-weight:400}\r\n#ok3d-app .about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:100px;align-items:start}#ok3d-app .about h2{margin-bottom:28px}#ok3d-app .about-copy>p{color:#b6bed0;font-size:18px;line-height:1.9;max-width:640px}#ok3d-app .about-copy>p+p{margin-top:18px;font-size:16px;color:var(--muted)}#ok3d-app .signature{display:flex;align-items:center;gap:17px;margin-top:30px}#ok3d-app .initials{width:51px;height:51px;display:grid;place-items:center;background:#152244;border:1px solid #648cff55;border-radius:50%;font-family:var(--display);color:#b2c6ff}#ok3d-app .signature strong{display:block;font-size:16px;font-weight:600}#ok3d-app .signature small{font-size:13px;color:var(--muted)}#ok3d-app .stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:68px;border-block:1px solid var(--line);padding-block:28px}#ok3d-app .stat{padding-inline:30px;border-right:1px solid var(--line)}#ok3d-app .stat:first-child{padding-left:0}#ok3d-app .stat:last-child{border:0}#ok3d-app .stat strong{font-family:var(--display);font-weight:500;font-size:48px;letter-spacing:-.06em;display:block;line-height:1.2}#ok3d-app .stat strong span{color:var(--blue)}#ok3d-app .stat p{font-size:13px;color:var(--muted);margin-top:8px}#ok3d-app .tool-list{display:flex;gap:12px 25px;flex-wrap:wrap;align-items:center;margin-top:30px;font-size:13px;color:#c0c7d7}#ok3d-app .tool-list>span:first-child{color:var(--muted);margin-right:auto}\r\n#ok3d-app .method{padding-top:0}#ok3d-app .method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}#ok3d-app .step{border-top:1px solid var(--line);padding-top:22px}#ok3d-app .step>span{font-family:var(--display);color:var(--blue);font-size:13px}#ok3d-app .step h3{font-size:23px;letter-spacing:-.03em;margin-top:22px}#ok3d-app .step p{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.8}\r\n#ok3d-app .contact{border-top:1px solid #ffffff25;background:radial-gradient(ellipse at 0% 100%,#14234d 0,transparent 65%),#0e131f}#ok3d-app .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}#ok3d-app .contact h2{font-size:clamp(44px,5vw,76px);margin-bottom:28px}#ok3d-app .contact-intro>p{color:var(--muted);max-width:400px}#ok3d-app .email-link{display:inline-flex;align-items:center;gap:24px;margin-top:34px;font-family:var(--display);font-size:clamp(21px,2.2vw,30px);border-bottom:1px solid #648cff70;padding-bottom:8px}#ok3d-app .contact-note{display:block;margin-top:35px;font-size:13px;color:#aeb9d0}#ok3d-app .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px 22px}#ok3d-app .field{display:flex;flex-direction:column;gap:8px}#ok3d-app .field.full{grid-column:1\/-1}#ok3d-app .field label{font-size:13px;color:#c7cfdf}#ok3d-app .field input,#ok3d-app .field select,#ok3d-app .field textarea{width:100%;border:0;border-bottom:1px solid #ffffff35;border-radius:0;background:transparent;color:var(--text);padding:10px 0 14px;outline-offset:5px;min-width:0;font-size:16px}#ok3d-app .field input::placeholder,#ok3d-app .field textarea::placeholder{color:#838fa7}#ok3d-app .field select{color:#c7cfdf}#ok3d-app .field select option{background:#101622;color:var(--text)}#ok3d-app .field textarea{resize:vertical;min-height:105px}#ok3d-app .form-submit{margin-top:28px;display:flex;align-items:center;gap:24px}#ok3d-app .form-submit small{color:#aeb9d0;font-size:12px}#ok3d-app .form-status{margin-top:14px;font-size:14px;color:#c0cfff}#ok3d-app .form-status.error{color:#ffc1bf}#ok3d-app .honeypot{position:absolute;left:-9999px;opacity:0}#ok3d-app .form-privacy{font-size:12px;color:#9ba8c1;margin-top:18px}#ok3d-app .footer{border-top:1px solid var(--line);background:#080a10}#ok3d-app .footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:36px}#ok3d-app .footer-tagline{font-size:14px;color:var(--muted);margin-right:auto;margin-left:22px}#ok3d-app .footer-bottom{border-top:1px solid var(--line);padding-block:20px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}#ok3d-app .footer-links{display:flex;gap:25px}#ok3d-app .footer-links a:hover{color:white}\r\n#ok3d-app .video-dialog{background:#080a10;color:var(--text);border:1px solid #ffffff40;width:min(1120px,94vw);max-width:none;padding:0;border-radius:7px;overflow:visible}#ok3d-app .video-dialog::backdrop{background:#02040bec;backdrop-filter:blur(14px)}#ok3d-app .dialog-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;gap:20px}#ok3d-app .dialog-head p{font-size:14px}#ok3d-app .dialog-close{border:1px solid var(--line);background:transparent;min-width:40px;min-height:40px;font-size:22px}#ok3d-app .dialog-player{aspect-ratio:16\/9;background:black}#ok3d-app .dialog-player iframe,#ok3d-app .dialog-player video{width:100%;height:100%;border:0;display:block}#ok3d-app .dialog-fallback{font-size:13px;color:var(--muted);padding:13px 20px}#ok3d-app .dialog-fallback a{text-decoration:underline}#ok3d-app .reveal{transition:opacity .65s,transform .65s}#ok3d-app .reveal.pending{opacity:0;transform:translateY(22px)}\r\n@media(min-width:1700px){#ok3d-app .hero-bottom{max-width:1600px;left:50%;transform:translateX(-50%)}}\r\n@media(max-width:1000px){#ok3d-app .hero h1{font-size:clamp(60px,9vw,100px)}#ok3d-app .hero{min-height:820px}#ok3d-app .hero-index{display:none}#ok3d-app .nav{gap:20px}#ok3d-app .about-grid,#ok3d-app .contact-grid{gap:45px}#ok3d-app .service{grid-template-columns:45px 1fr 1.1fr;gap:20px}#ok3d-app .client-list{flex-wrap:wrap;justify-content:center;gap:20px 35px}#ok3d-app .method-grid{grid-template-columns:1fr 1fr}#ok3d-app .clients-inner{gap:25px}#ok3d-app .section{padding-block:85px}#ok3d-app .method{padding-top:0}#ok3d-app .client-list span{font-size:20px}}\r\n@media(max-width:700px){#ok3d-app .header-inner{height:78px}#ok3d-app .logo{font-size:31px}#ok3d-app .header-contact{display:none}#ok3d-app .menu-toggle{display:block}#ok3d-app .nav{display:none;position:absolute;top:78px;left:0;right:0;background:#0b101ded;border-bottom:1px solid var(--line);padding:25px var(--gutter);backdrop-filter:blur(18px);flex-direction:column;align-items:stretch;gap:0}#ok3d-app .nav.open{display:flex}#ok3d-app .nav a{font-size:17px;padding:12px 0}#ok3d-app .hero{min-height:810px;min-height:max(810px,100svh)}#ok3d-app .hero-body{padding-top:156px;padding-bottom:180px}#ok3d-app .hero h1{font-size:clamp(52px,11.4vw,79px);letter-spacing:-.065em}#ok3d-app .hero-copy{font-size:16px;max-width:350px}#ok3d-app .hero .kicker{font-size:11px;letter-spacing:.1em}#ok3d-app .hero-actions{gap:20px;flex-wrap:wrap}#ok3d-app .hero-actions .btn{gap:20px;padding-inline:19px}#ok3d-app .hero::before{background:linear-gradient(90deg,#050811d9,#05081170),linear-gradient(0deg,#080a10,transparent 60%)}#ok3d-app .hero-media video{object-position:60% center;opacity:.75}#ok3d-app .hero-bottom{align-items:center;padding-block:22px;gap:20px}#ok3d-app .hero-signature{display:block;font-size:11px;line-height:1.9}#ok3d-app .hero-signature span{display:block}#ok3d-app .hero-signature span+span{border:0;padding:0}#ok3d-app .hero-controls{gap:16px}#ok3d-app .scroll-link{display:none}#ok3d-app .clients{padding-block:25px}#ok3d-app .clients-inner{display:block}#ok3d-app .clients-label{max-width:none;text-align:center;margin-bottom:20px}#ok3d-app .client-list{gap:18px 25px}#ok3d-app .client-list span{font-size:20px}#ok3d-app .client-list .obvious{font-size:17px}#ok3d-app .section{padding-block:65px}#ok3d-app .section-head{display:block;margin-bottom:30px}#ok3d-app .section-head .text-link{margin-top:25px}#ok3d-app .section-head h2,#ok3d-app .about h2{font-size:43px}#ok3d-app .section-head>p{margin-top:22px}#ok3d-app .project-grid{grid-template-columns:1fr;gap:30px}#ok3d-app .project:first-child{grid-column:auto}#ok3d-app .project:first-child .project-media,#ok3d-app .project-media{aspect-ratio:4\/3}#ok3d-app .project:first-child .project-media img{object-position:center}#ok3d-app .project-info h3{font-size:24px}#ok3d-app .project-label{left:15px;top:15px;font-size:11px}#ok3d-app .project-play{right:15px;bottom:15px;width:44px;height:44px}#ok3d-app .service{grid-template-columns:25px 1fr;gap:14px;padding-block:30px}#ok3d-app .service-description{grid-column:2}#ok3d-app .service h3{font-size:31px}#ok3d-app .service-title small{margin-top:8px}#ok3d-app .service p{font-size:15px}#ok3d-app .about-grid,#ok3d-app .contact-grid{grid-template-columns:1fr;gap:32px}#ok3d-app .about-copy>p{font-size:17px}#ok3d-app .stats{margin-top:35px}#ok3d-app .stat{padding-inline:15px}#ok3d-app .stat strong{font-size:37px}#ok3d-app .stat p{font-size:12px}#ok3d-app .tool-list{gap:12px 20px}#ok3d-app .tool-list>span:first-child{width:100%}#ok3d-app .method{padding-top:0}#ok3d-app .method-grid{gap:28px 22px}#ok3d-app .step h3{font-size:22px}#ok3d-app .step p{font-size:14px}#ok3d-app .contact h2{font-size:53px}#ok3d-app .contact-note{margin-top:23px}#ok3d-app .contact-grid{gap:45px}#ok3d-app .form-grid{gap:24px 18px}#ok3d-app .form-submit{align-items:start;flex-direction:column;gap:12px}#ok3d-app .form-submit .btn{width:100%;justify-content:space-between}#ok3d-app .footer-top{flex-wrap:wrap;padding-block:28px}#ok3d-app .footer-tagline{width:calc(100% - 120px);font-size:12px;margin:0}#ok3d-app .footer-top .text-link{font-size:13px}#ok3d-app .footer-bottom{flex-direction:column;gap:10px}#ok3d-app .video-dialog{width:96vw}#ok3d-app .dialog-head{padding:10px 12px}#ok3d-app .dialog-player{aspect-ratio:4\/3}#ok3d-app .dialog-fallback{padding:10px 12px}}\r\n@media(prefers-reduced-motion:reduce){#ok3d-app{scroll-behavior:auto}#ok3d-app *,#ok3d-app *::before,#ok3d-app *::after{animation:none!important;transition:none!important}#ok3d-app .reveal.pending{opacity:1;transform:none}}\r\n\r\n\/* V2 \u2014 trois exp\u00e9riences, une m\u00eame direction artistique. *\/\r\n@keyframes gem-levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}\r\n@keyframes wire-reveal{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}\r\n#ok3d-app .gem-stage.in-view .gem-object{animation:gem-levitate 6s ease-in-out infinite}\r\n#ok3d-app .gem-stage.draw-in .gem-wire .gw{stroke-dasharray:1;animation:wire-reveal 1.8s ease both}\r\n\r\n#ok3d-app .expertise{background:#0b0e16;position:relative;overflow:hidden}#ok3d-app .interactive-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}#ok3d-app .experience-card{min-width:0;position:relative;border:1px solid #ffffff20;border-radius:9px;background:linear-gradient(160deg,#141b2b,#0c111d 65%);overflow:hidden;transition:border-color .4s,box-shadow .4s}#ok3d-app .experience-card:hover,#ok3d-app .experience-card:focus-within{border-color:#648cff75;box-shadow:0 20px 55px #0004}#ok3d-app .experience-top{padding:20px 23px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;letter-spacing:.08em;color:#b1bed6}#ok3d-app .experience-symbol{font-size:24px;color:#8daaff;line-height:1}#ok3d-app .service-stage{height:315px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#23346755,transparent 70%);border-block:1px solid #ffffff0b}#ok3d-app .stage-corner{position:absolute;top:14px;left:18px;font-size:10px;letter-spacing:.14em;color:#9caac7;z-index:3}#ok3d-app .gem-stage{background:linear-gradient(#648cff09 1px,transparent 1px),linear-gradient(90deg,#648cff09 1px,transparent 1px),radial-gradient(ellipse at 50% 60%,#263b7255,transparent 70%);background-size:28px 28px,28px 28px,100% 100%}#ok3d-app .gem-object{position:absolute;left:calc(50% - 122px);top:35px;width:244px;height:244px;transform:translateY(0)}#ok3d-app .gem-object svg{display:block;width:244px;height:244px}#ok3d-app .gem-wire{position:absolute;inset:0}#ok3d-app .gem-wire .gw{fill:none;stroke:#8eaafa;stroke-width:.55}#ok3d-app .gem-wire .gv{fill:#b5caff;stroke:#0b101c;stroke-width:.45;r:1.15}#ok3d-app .gem-wire .gs{display:none}#ok3d-app .gem-render{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split));filter:drop-shadow(0 8px 16px #4674ff30)}#ok3d-app .gem-solid .gf-hi{fill:url(#chrome-high)}#ok3d-app .gem-solid .gf-lo{fill:url(#chrome-low)}#ok3d-app .gem-solid .gw{fill:none;stroke:#c0d4ff;stroke-width:.35;opacity:.7}#ok3d-app .gem-solid .gv{display:none}#ok3d-app .compare-line{position:absolute;top:38px;bottom:36px;left:calc(50% - 122px + 244px * var(--split-number,.52));width:1px;background:linear-gradient(transparent,#d5e2ff 20%,#d5e2ff 80%,transparent);pointer-events:none}#ok3d-app .compare-line span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:28px;height:28px;display:grid;place-items:center;border:1px solid #d5e2ff;background:#19284b;border-radius:50%;color:#e4eeff;font-size:14px}#ok3d-app .compare-labels{position:absolute;bottom:15px;left:20px;right:20px;display:flex;justify-content:space-between;color:#8ea1c8;font-size:10px;letter-spacing:.12em}#ok3d-app .experience-control{padding:13px 22px;min-height:65px;border-bottom:1px solid #ffffff14;display:flex;align-items:center;gap:16px}#ok3d-app .experience-control label{font-size:12px;color:#adbad3;white-space:nowrap}#ok3d-app .experience-control input{width:100%;min-width:40px;accent-color:#8aa8ff;cursor:ew-resize;height:24px}#ok3d-app .segmented{justify-content:center;gap:5px}#ok3d-app .segmented button{border:1px solid transparent;background:transparent;padding:6px 16px;border-radius:4px;color:#a7b5cf;font-size:13px;min-height:36px;transition:background .25s,color .25s,border-color .25s}#ok3d-app .segmented button[aria-pressed=\"true\"]{background:#7296ff18;color:#dce7ff;border-color:#89a7ff45}#ok3d-app .segmented button:hover{color:white;background:#7296ff12}#ok3d-app .experience-copy{padding:27px 24px 0}#ok3d-app .experience-copy h3{font-size:clamp(26px,2.55vw,39px);line-height:1.13;letter-spacing:-.055em}#ok3d-app .experience-copy p{font-size:15px;line-height:1.85;color:#a8b5cd;margin-top:20px;min-height:84px}#ok3d-app .experience-copy .tags{gap:6px;min-height:62px;margin-top:18px;align-content:start}#ok3d-app .experience-copy .tags span{font-size:11px;padding:3px 7px;height:max-content}#ok3d-app .experience-link{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff1c;padding:20px 0;font-size:14px;margin-top:20px}#ok3d-app .experience-link span{font-size:22px;color:#8aa8ff;transition:transform .25s}#ok3d-app .experience-link:hover{color:#9eb8ff}#ok3d-app .experience-link:hover span{transform:translate(3px,-3px)}\r\n#ok3d-app .brand-stage{background:radial-gradient(ellipse at 50% 50%,#3a448333,transparent 65%)}#ok3d-app .brand-symbol{position:absolute;inset:36px 0 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;transition:opacity .45s,transform .65s}#ok3d-app .brand-symbol img{width:162px;filter:invert(1) drop-shadow(0 0 28px #739bff40)}#ok3d-app .brand-symbol>span{font-family:var(--display);font-size:18px;letter-spacing:.27em;color:#a8bbdf}#ok3d-app .brand-universe{position:absolute;inset:50px 21px 24px;display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 38px .7fr;gap:8px;opacity:0;transform:translateY(20px) scale(.94);transition:opacity .45s,transform .6s;pointer-events:none}#ok3d-app .brand-tile{border-radius:3px;overflow:hidden}#ok3d-app .brand-primary{grid-row:span 3;background:#6389ff;padding:18px;display:flex;flex-direction:column;justify-content:space-between}#ok3d-app .brand-primary img{width:70px}#ok3d-app .brand-primary>span{font-family:var(--display);font-weight:600;font-size:clamp(16px,1.5vw,22px);line-height:1.16;letter-spacing:-.055em;color:#0b1434}#ok3d-app .brand-type{background:#eef1ff;color:#172444;padding:8px 13px;display:flex;align-items:center;justify-content:space-between;gap:7px}#ok3d-app .brand-type strong{font-family:var(--display);font-size:51px;font-weight:500;letter-spacing:-.07em}#ok3d-app .brand-type span{font-size:7px;letter-spacing:.07em;max-width:48px}#ok3d-app .brand-swatches{display:flex;gap:0}#ok3d-app .brand-swatches i{flex:1;background:#648cff}#ok3d-app .brand-swatches i:nth-child(2){background:#b6c8ff}#ok3d-app .brand-swatches i:nth-child(3){background:#e9efff}#ok3d-app .brand-swatches i:nth-child(4){background:#273c6c}#ok3d-app .brand-note{background:#1b2743;padding:11px 14px;font-size:15px;font-family:var(--display);line-height:1.2;letter-spacing:-.025em}#ok3d-app .brand-note span{display:block;font-family:var(--font);font-size:7px;margin-top:10px;letter-spacing:.07em;color:#9baed5}#ok3d-app .brand-stage[data-brand=\"universe\"] .brand-symbol{opacity:0;transform:scale(.78) rotate(-8deg);pointer-events:none}#ok3d-app .brand-stage[data-brand=\"universe\"] .brand-universe{opacity:1;transform:none}#ok3d-app .brand-stage[data-brand=\"universe\"] .brand-tile{animation:brand-arrive .6s both}#ok3d-app .brand-stage[data-brand=\"universe\"] .brand-type{animation-delay:.08s}#ok3d-app .brand-stage[data-brand=\"universe\"] .brand-swatches{animation-delay:.16s}#ok3d-app .brand-stage[data-brand=\"universe\"] .brand-note{animation-delay:.24s}@keyframes brand-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}\r\n#ok3d-app .web-stage{display:flex;justify-content:center;align-items:center;padding:45px 20px 20px;background:radial-gradient(ellipse at 50% 80%,#25305c70,transparent 75%)}#ok3d-app .demo-browser{width:100%;max-width:355px;border:1px solid #8ca3d655;border-radius:7px;background:#080d17;box-shadow:0 16px 40px #0008;overflow:hidden;transition:width .7s cubic-bezier(.2,.8,.2,1),border-radius .7s}#ok3d-app .demo-chrome{height:23px;display:flex;justify-content:space-between;align-items:center;padding-inline:10px;background:#1b253b;color:#99a8c7;font-size:8px}#ok3d-app .demo-chrome>span:first-child{font-size:6px;letter-spacing:1px;color:#758aaf}#ok3d-app .demo-page{height:202px;overflow:hidden}#ok3d-app .demo-nav{height:33px;padding:0 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff18}#ok3d-app .demo-nav>strong{font-family:var(--display);font-size:14px;letter-spacing:-1px}#ok3d-app .demo-nav>strong span{color:#8aa8ff}#ok3d-app .demo-nav-links{font-size:7px;color:#aab5ca}#ok3d-app .demo-hamburger{display:none;font-size:11px}#ok3d-app .demo-hero{height:143px;position:relative;isolation:isolate;padding:13px 15px}#ok3d-app .demo-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}#ok3d-app .demo-hero::before{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#060b16ed,#060b1688);z-index:-1}#ok3d-app .demo-hero>div{display:flex;flex-direction:column;align-items:start}#ok3d-app .demo-hero small{font-size:6px;letter-spacing:.12em;color:#b9c9e9;margin-bottom:7px}#ok3d-app .demo-hero strong{font-family:var(--display);font-size:25px;line-height:.98;letter-spacing:-.07em;font-weight:500}#ok3d-app .demo-hero em{color:#a0b7ff;font-style:normal}#ok3d-app .demo-cta{font-size:6px;background:#527df4;color:#fff;padding:4px 7px;margin-top:9px;border-radius:2px}#ok3d-app .demo-bottom{display:flex;justify-content:space-between;gap:3px;font-size:5px;letter-spacing:.04em;padding:8px 13px;color:#b4c1dc}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-browser{width:142px;border-radius:16px}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-chrome{height:21px;font-size:6px}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-nav-links{display:none}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-hamburger{display:block}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-page{height:220px}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-nav{padding-inline:12px}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-hero{height:161px;padding:17px 12px}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-hero strong{font-size:26px}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-hero small{font-size:5px}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-cta{margin-top:13px}#ok3d-app .web-stage[data-device=\"mobile\"] .demo-bottom{font-size:4px;padding-inline:10px}\r\n#ok3d-app .project-preview{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .55s;background:#0c101a}#ok3d-app .project-preview.visible{opacity:1}#ok3d-app .project-preview iframe,#ok3d-app .project-preview video{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;object-fit:cover}#ok3d-app .project-play,#ok3d-app .project-label{z-index:2}#ok3d-app .project-media .project-label{transition:background .3s}#ok3d-app .project-media.preview-playing .project-label{background:#172b57dc}#ok3d-app .project-media.preview-playing .project-play{background:#537fffaa}#ok3d-app .method-grid{position:relative;--method-progress:0}#ok3d-app .method-grid::before{content:\"\";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,#4264c2,#a6bfff);transform:scaleX(var(--method-progress));transform-origin:left;box-shadow:0 0 12px #729cff77;transition:transform .18s linear}#ok3d-app .step{position:relative}#ok3d-app .step::before{content:\"\";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:#283858;border:1px solid #8095c150;transition:background .35s,box-shadow .35s}#ok3d-app .step.current::before,#ok3d-app .step.passed::before{background:#9dbbff;box-shadow:0 0 14px #739fffaa}#ok3d-app .step h3{transition:color .35s}#ok3d-app .step.current h3{color:#9ab6ff}#ok3d-app .step>span{transition:color .35s}#ok3d-app .step.current>span{color:#c0d1ff}#ok3d-app .hero h1{animation:hero-enter 1.1s cubic-bezier(.2,.8,.2,1) both}#ok3d-app .hero .hero-copy{animation:hero-enter 1.1s .12s both}#ok3d-app .hero .hero-actions{animation:hero-enter 1.1s .24s both}@keyframes hero-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}\r\n@media(min-width:1100px){#ok3d-app .experience-card:hover .brand-symbol{transform:translateY(-5px)}#ok3d-app .experience-card:hover .brand-stage[data-brand=\"universe\"] .brand-symbol{transform:scale(.78) rotate(-8deg)}}\r\n@media(max-width:1100px) and (min-width:701px){#ok3d-app .interactive-services{gap:12px}#ok3d-app .experience-top{padding:17px 15px;font-size:10px;letter-spacing:.035em}#ok3d-app .experience-copy{padding-inline:17px}#ok3d-app .service-stage{height:285px}#ok3d-app .gem-object{top:25px}#ok3d-app .experience-control{padding-inline:12px;gap:8px;flex-wrap:wrap}#ok3d-app .experience-control label{font-size:11px}#ok3d-app .experience-control input{flex:1;min-width:50px}#ok3d-app .segmented button{font-size:11px;padding-inline:10px}#ok3d-app .experience-copy p{font-size:14px;min-height:124px}#ok3d-app .experience-copy .tags{min-height:85px}#ok3d-app .brand-universe{inset:50px 12px 22px;gap:6px;grid-template-columns:1fr 1fr}#ok3d-app .brand-primary{padding:12px}#ok3d-app .brand-primary img{width:50px}#ok3d-app .brand-primary>span{font-size:16px}#ok3d-app .brand-type{padding:9px}#ok3d-app .brand-type strong{font-size:38px}#ok3d-app .brand-type span{display:none}#ok3d-app .brand-note{font-size:12px;padding:10px}#ok3d-app .web-stage{padding-inline:12px}}\r\n@media(max-width:700px){#ok3d-app .interactive-services{grid-template-columns:1fr;gap:24px}#ok3d-app .experience-top{font-size:12px;padding:20px 22px}#ok3d-app .service-stage{height:300px}#ok3d-app .gem-object{top:26px}#ok3d-app .experience-copy{padding:25px 24px 0}#ok3d-app .experience-copy h3{font-size:36px}#ok3d-app .experience-copy p{min-height:0;font-size:16px}#ok3d-app .experience-copy .tags{min-height:0;margin-bottom:24px}#ok3d-app .experience-link{margin-top:20px}#ok3d-app .brand-universe{inset:47px 30px 23px}#ok3d-app .brand-primary>span{font-size:23px}#ok3d-app .brand-type strong{font-size:60px}#ok3d-app .brand-note{font-size:17px}#ok3d-app .web-stage{padding-inline:28px}#ok3d-app .method-grid::before{display:none}#ok3d-app .step.current{border-top-color:#88a8ff}#ok3d-app .experience-control label{font-size:13px}#ok3d-app .segmented button{font-size:14px;min-height:40px}}\r\n@media(prefers-reduced-motion:reduce){#ok3d-app .hero h1,#ok3d-app .hero .hero-copy,#ok3d-app .hero .hero-actions{animation:none}#ok3d-app .experience-card:hover .brand-symbol{transform:none}#ok3d-app .gem-object{transform:none!important}#ok3d-app .method-grid::before{transform:scaleX(1)}}\r\n\r\n\r\n\r\n\r\n\/* =========================================================\r\n   ELEMENTOR \/ HELLO HARDENING \u2014 V2\r\n   Force la typographie, les tailles et les couleurs du design\r\n   m\u00eame si Elementor ou le th\u00e8me applique ses propres styles.\r\n   ========================================================= *\/\r\n#ok3d-app,\r\n#ok3d-app input,\r\n#ok3d-app textarea,\r\n#ok3d-app select,\r\n#ok3d-app button,\r\n#ok3d-app a,\r\n#ok3d-app p,\r\n#ok3d-app span,\r\n#ok3d-app small,\r\n#ok3d-app label,\r\n#ok3d-app strong,\r\n#ok3d-app em {\r\n  font-family: var(--font) !important;\r\n}\r\n\r\n#ok3d-app h1,\r\n#ok3d-app h2,\r\n#ok3d-app h3,\r\n#ok3d-app .logo,\r\n#ok3d-app .client-list span,\r\n#ok3d-app .project-number,\r\n#ok3d-app .service-num,\r\n#ok3d-app .stat strong,\r\n#ok3d-app .step > span,\r\n#ok3d-app .brand-symbol > span,\r\n#ok3d-app .brand-primary > span,\r\n#ok3d-app .brand-type strong,\r\n#ok3d-app .brand-note,\r\n#ok3d-app .demo-nav > strong,\r\n#ok3d-app .demo-hero strong {\r\n  font-family: var(--display) !important;\r\n}\r\n\r\n#ok3d-app { color: var(--text) !important; font-size:16px !important; line-height:1.65 !important; }\r\n#ok3d-app h1,#ok3d-app h2,#ok3d-app h3,#ok3d-app p { margin:0 !important; padding:0; }\r\n#ok3d-app h1,#ok3d-app h2,#ok3d-app h3 { color:var(--text) !important; font-weight:500 !important; text-transform:none !important; }\r\n#ok3d-app p { color:inherit; }\r\n#ok3d-app a { color:inherit !important; text-decoration:none !important; }\r\n#ok3d-app button { color:inherit !important; }\r\n\r\n\/* Header *\/\r\n#ok3d-app .logo { font-size:34px !important; line-height:1 !important; font-weight:700 !important; letter-spacing:-3px !important; color:var(--text) !important; }\r\n#ok3d-app .logo span { color:var(--blue) !important; }\r\n#ok3d-app .nav a { font-size:14px !important; line-height:1.4 !important; color:#c4cad8 !important; font-weight:400 !important; }\r\n#ok3d-app .nav a:hover { color:#fff !important; }\r\n#ok3d-app .header-contact { font-size:14px !important; color:var(--text) !important; }\r\n\r\n\/* Hero *\/\r\n#ok3d-app .hero .kicker { font-size:13px !important; line-height:1.4 !important; letter-spacing:.14em !important; color:#c5cfe6 !important; font-weight:400 !important; }\r\n#ok3d-app .hero h1 { font-size:clamp(60px,7.5vw,116px) !important; line-height:1.02 !important; letter-spacing:-.065em !important; color:var(--text) !important; font-weight:500 !important; }\r\n#ok3d-app .hero h1 em { color:#92acff !important; font-style:normal !important; font-family:var(--display) !important; }\r\n#ok3d-app .hero-copy { font-size:17px !important; line-height:1.8 !important; color:#bdc5d6 !important; font-weight:400 !important; }\r\n#ok3d-app .btn { font-size:14px !important; line-height:1.4 !important; font-weight:700 !important; color:var(--text) !important; }\r\n#ok3d-app .btn-primary { color:#fff !important; }\r\n#ok3d-app .reel-trigger { font-size:14px !important; color:var(--text) !important; }\r\n#ok3d-app .hero-signature { font-size:12px !important; line-height:1.65 !important; color:#b4bed0 !important; }\r\n#ok3d-app .hero-controls,#ok3d-app .scroll-link,#ok3d-app .hero-index { color:#b4bed0 !important; }\r\n#ok3d-app .hero-index { color:#d4ddf0 !important; font-size:12px !important; }\r\n\r\n\/* Clients \/ titres de sections *\/\r\n#ok3d-app .clients-label { font-size:12px !important; line-height:1.7 !important; color:var(--muted) !important; }\r\n#ok3d-app .client-list span { font-size:23px !important; line-height:1.2 !important; font-weight:600 !important; color:#bec3cf !important; }\r\n#ok3d-app .client-list .obvious { font-size:19px !important; }\r\n#ok3d-app .client-list .laposte { font-size:20px !important; }\r\n#ok3d-app .section-head h2,#ok3d-app .about h2,#ok3d-app .contact h2 { font-size:clamp(40px,4.5vw,66px) !important; line-height:1.08 !important; letter-spacing:-.055em !important; color:var(--text) !important; }\r\n#ok3d-app .section-head h2 span { color:var(--muted) !important; font-family:var(--display) !important; }\r\n#ok3d-app .kicker { font-size:13px !important; color:var(--muted) !important; }\r\n\r\n\/* Projets *\/\r\n#ok3d-app .project-label { font-size:12px !important; line-height:1.4 !important; color:var(--text) !important; }\r\n#ok3d-app .project-info h3 { font-size:25px !important; line-height:1.2 !important; letter-spacing:-.045em !important; color:var(--text) !important; }\r\n#ok3d-app .project-info p { font-size:14px !important; line-height:1.65 !important; color:var(--muted) !important; }\r\n#ok3d-app .project-number { font-size:13px !important; color:var(--muted) !important; }\r\n\r\n\/* Expertises *\/\r\n#ok3d-app .experience-top { color:#b1bed6 !important; }\r\n#ok3d-app .experience-copy h3 { color:var(--text) !important; font-size:clamp(26px,2.55vw,39px) !important; line-height:1.13 !important; letter-spacing:-.055em !important; }\r\n#ok3d-app .experience-copy p { font-size:15px !important; line-height:1.85 !important; color:#a8b5cd !important; }\r\n#ok3d-app .tags span { font-size:12px !important; line-height:1.4 !important; color:#c0c7d7 !important; }\r\n#ok3d-app .experience-copy .tags span { font-size:11px !important; }\r\n#ok3d-app .experience-link { font-size:14px !important; color:var(--text) !important; }\r\n#ok3d-app .experience-link:hover { color:#9eb8ff !important; }\r\n#ok3d-app .experience-control label { color:#adbad3 !important; }\r\n#ok3d-app .segmented button { color:#a7b5cf !important; }\r\n#ok3d-app .segmented button[aria-pressed=\"true\"] { color:#dce7ff !important; }\r\n\r\n\/* Studio *\/\r\n#ok3d-app .about-copy > p { font-size:18px !important; line-height:1.9 !important; color:#b6bed0 !important; }\r\n#ok3d-app .about-copy > p + p { font-size:16px !important; color:var(--muted) !important; }\r\n#ok3d-app .signature strong { font-size:16px !important; color:var(--text) !important; }\r\n#ok3d-app .signature small { font-size:13px !important; color:var(--muted) !important; }\r\n#ok3d-app .stat strong { font-size:48px !important; line-height:1.2 !important; font-weight:500 !important; color:var(--text) !important; }\r\n#ok3d-app .stat strong span { color:var(--blue) !important; font-family:var(--display) !important; }\r\n#ok3d-app .stat p { font-size:13px !important; color:var(--muted) !important; }\r\n#ok3d-app .tool-list { font-size:13px !important; color:#c0c7d7 !important; }\r\n#ok3d-app .tool-list > span:first-child { color:var(--muted) !important; }\r\n\r\n\/* M\u00e9thode *\/\r\n#ok3d-app .step > span { font-size:13px !important; color:var(--blue) !important; }\r\n#ok3d-app .step h3 { font-size:23px !important; line-height:1.2 !important; color:var(--text) !important; }\r\n#ok3d-app .step p { font-size:14px !important; line-height:1.8 !important; color:var(--muted) !important; }\r\n\r\n\/* Contact \/ formulaire *\/\r\n#ok3d-app .contact h2 { font-size:clamp(44px,5vw,76px) !important; }\r\n#ok3d-app .contact-intro > p { color:var(--muted) !important; }\r\n#ok3d-app .email-link { font-family:var(--display) !important; font-size:clamp(21px,2.2vw,30px) !important; color:var(--text) !important; }\r\n#ok3d-app .contact-note { font-size:13px !important; color:#aeb9d0 !important; }\r\n#ok3d-app .field label { font-size:13px !important; color:#c7cfdf !important; }\r\n#ok3d-app .field input,#ok3d-app .field select,#ok3d-app .field textarea { font-size:16px !important; line-height:1.4 !important; color:var(--text) !important; background:transparent !important; }\r\n#ok3d-app .field input::placeholder,#ok3d-app .field textarea::placeholder { color:#838fa7 !important; opacity:1 !important; }\r\n#ok3d-app .form-submit small,#ok3d-app .form-privacy { color:#aeb9d0 !important; }\r\n\r\n\/* Footer *\/\r\n#ok3d-app .footer-tagline { font-size:14px !important; color:var(--muted) !important; }\r\n#ok3d-app .footer-bottom { font-size:12px !important; color:var(--muted) !important; }\r\n\r\n\/* Mobile : r\u00e9applique les valeurs originales avec !important *\/\r\n@media(max-width:700px){\r\n  #ok3d-app .logo{font-size:31px !important}\r\n  #ok3d-app .nav a{font-size:17px !important}\r\n  #ok3d-app .hero h1{font-size:clamp(52px,11.4vw,79px) !important}\r\n  #ok3d-app .hero-copy{font-size:16px !important}\r\n  #ok3d-app .hero .kicker{font-size:11px !important}\r\n  #ok3d-app .client-list span{font-size:20px !important}\r\n  #ok3d-app .client-list .obvious{font-size:17px !important}\r\n  #ok3d-app .section-head h2,#ok3d-app .about h2{font-size:43px !important}\r\n  #ok3d-app .project-info h3{font-size:24px !important}\r\n  #ok3d-app .project-label{font-size:11px !important}\r\n  #ok3d-app .experience-copy h3{font-size:36px !important}\r\n  #ok3d-app .experience-copy p{font-size:16px !important}\r\n  #ok3d-app .about-copy>p{font-size:17px !important}\r\n  #ok3d-app .stat strong{font-size:37px !important}\r\n  #ok3d-app .stat p{font-size:12px !important}\r\n  #ok3d-app .step h3{font-size:22px !important}\r\n  #ok3d-app .contact h2{font-size:53px !important}\r\n  #ok3d-app .footer-tagline{font-size:12px !important}\r\n}\r\n\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   HEADER + BOUTONS \u2014 finition premium \/ plus vivante\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#ok3d-app .header{\r\n  position:fixed!important;\r\n  top:0;left:0;width:100%;\r\n  z-index:80;\r\n  background:linear-gradient(180deg,rgba(8,10,16,.18),rgba(8,10,16,0));\r\n  border-bottom:1px solid rgba(255,255,255,.12);\r\n  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease;\r\n}\r\n#ok3d-app .header.is-scrolled{\r\n  background:rgba(8,10,16,.72);\r\n  -webkit-backdrop-filter:blur(18px) saturate(145%);\r\n  backdrop-filter:blur(18px) saturate(145%);\r\n  border-bottom-color:rgba(100,140,255,.22);\r\n  box-shadow:0 10px 34px rgba(0,0,0,.18),0 1px 0 rgba(100,140,255,.06) inset;\r\n}\r\n#ok3d-app .header-inner{transition:height .3s ease}\r\n#ok3d-app .header.is-scrolled .header-inner{height:82px}\r\n\r\n\/* vrai logo : m\u00eame pr\u00e9sence que l'ancien mot-symbole *\/\r\n#ok3d-app .logo{display:flex;align-items:center;flex-shrink:0;line-height:1}\r\n#ok3d-app .logo img{display:block;width:auto;height:34px;max-width:none;object-fit:contain;transition:transform .3s ease,filter .3s ease}\r\n#ok3d-app .logo:hover img{transform:translateY(-1px);filter:drop-shadow(0 0 12px rgba(100,140,255,.16))}\r\n\r\n\/* navigation : soulignement bleu anim\u00e9, tr\u00e8s discret *\/\r\n#ok3d-app .nav a{position:relative;padding:10px 0;transition:color .25s ease}\r\n#ok3d-app .nav a::after{\r\n  content:\"\";position:absolute;left:0;right:0;bottom:3px;height:1px;\r\n  background:linear-gradient(90deg,transparent,var(--blue),transparent);\r\n  transform:scaleX(0);transform-origin:center;opacity:.85;\r\n  transition:transform .28s cubic-bezier(.2,.8,.2,1);\r\n}\r\n#ok3d-app .nav a:hover::after,#ok3d-app .nav a:focus-visible::after{transform:scaleX(1)}\r\n\r\n\/* CTA du header : plus premium sans devenir flashy *\/\r\n#ok3d-app .header-contact{\r\n  position:relative;overflow:hidden;\r\n  border-color:rgba(130,164,255,.38);\r\n  background:linear-gradient(135deg,rgba(100,140,255,.10),rgba(100,140,255,.025));\r\n  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);\r\n  transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;\r\n}\r\n#ok3d-app .header-contact::before{\r\n  content:\"\";position:absolute;inset:-60% auto -60% -35%;width:28%;\r\n  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);\r\n  transform:skewX(-18deg) translateX(-220%);transition:transform .65s ease;pointer-events:none;\r\n}\r\n#ok3d-app .header-contact:hover{\r\n  transform:translateY(-1px);\r\n  border-color:rgba(132,166,255,.72);\r\n  background:linear-gradient(135deg,rgba(100,140,255,.17),rgba(100,140,255,.045));\r\n  box-shadow:0 8px 28px rgba(48,78,166,.12),inset 0 0 0 1px rgba(255,255,255,.035);\r\n}\r\n#ok3d-app .header-contact:hover::before{transform:skewX(-18deg) translateX(620%)}\r\n\r\n\/* boutons : plus de mati\u00e8re et micro-mouvement *\/\r\n#ok3d-app .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease}\r\n#ok3d-app .btn::before{\r\n  content:\"\";position:absolute;inset:0;z-index:-1;\r\n  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.10) 48%,transparent 75%);\r\n  transform:translateX(-130%);transition:transform .55s ease;\r\n}\r\n#ok3d-app .btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.16)}\r\n#ok3d-app .btn:hover::before{transform:translateX(130%)}\r\n#ok3d-app .btn-primary{box-shadow:0 8px 24px rgba(83,127,255,.14)}\r\n#ok3d-app .btn-primary:hover{box-shadow:0 12px 34px rgba(83,127,255,.25)}\r\n#ok3d-app .btn .arrow{transition:transform .3s cubic-bezier(.2,.8,.2,1)}\r\n#ok3d-app .btn:hover .arrow{transform:translate(4px,-4px)}\r\n\r\n\/* lien texte : accent anim\u00e9 au lieu d'un simple changement de couleur *\/\r\n#ok3d-app .text-link{position:relative;border-bottom-color:rgba(255,255,255,.18)}\r\n#ok3d-app .text-link::after{content:\"\";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}\r\n#ok3d-app .text-link:hover::after{transform:scaleX(1)}\r\n\r\n@media(max-width:1000px){\r\n  #ok3d-app .logo img{height:33px}\r\n}\r\n@media(max-width:700px){\r\n  #ok3d-app .logo img{height:31px}\r\n  #ok3d-app .header.is-scrolled .header-inner{height:72px}\r\n  #ok3d-app .header .nav{top:78px}\r\n  #ok3d-app .header.is-scrolled .nav{top:72px}\r\n  #ok3d-app .nav a::after{display:none}\r\n}\r\n@media(prefers-reduced-motion:reduce){\r\n  #ok3d-app .header,#ok3d-app .header-inner,#ok3d-app .logo img,#ok3d-app .nav a::after,#ok3d-app .header-contact,#ok3d-app .header-contact::before,#ok3d-app .btn,#ok3d-app .btn::before{transition:none!important}\r\n}\r\n\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   EXPERTISE 3D \u2014 vrais visuels viewport \/ render\r\n   Les deux images occupent d\u00e9sormais presque toute la zone,\r\n   avec une disparition douce sur les bords vers le d\u00e9cor.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#ok3d-app #service-3d .gem-stage{\r\n  position:relative;\r\n  isolation:isolate;\r\n}\r\n\r\n\/* Int\u00e9gration photo \u2014 expertise 3D\r\n   Les deux images sont plac\u00e9es dans le m\u00eame cadre pour que le split reste parfaitement lisible. *\/\r\n#ok3d-app #service-3d .gem-stage{\r\n  --media-x:22px;\r\n  --media-top:38px;\r\n  --media-bottom:30px;\r\n  background:\r\n    radial-gradient(circle at 50% 48%,rgba(100,140,255,.16),transparent 42%),\r\n    linear-gradient(rgba(100,140,255,.035) 1px,transparent 1px),\r\n    linear-gradient(90deg,rgba(100,140,255,.035) 1px,transparent 1px),\r\n    linear-gradient(180deg,#0d1422 0%,#090d16 100%);\r\n  background-size:auto,28px 28px,28px 28px,auto;\r\n}\r\n\r\n#ok3d-app #service-3d .gem-stage::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:3;\r\n  pointer-events:none;\r\n  background:\r\n    linear-gradient(180deg,rgba(8,10,16,.30),transparent 25%,transparent 72%,rgba(8,10,16,.50)),\r\n    radial-gradient(ellipse at center,transparent 50%,rgba(5,8,15,.35) 100%);\r\n}\r\n\r\n#ok3d-app #service-3d .gem-object{\r\n  position:absolute;\r\n  left:var(--media-x);\r\n  right:var(--media-x);\r\n  top:var(--media-top);\r\n  bottom:var(--media-bottom);\r\n  width:auto;\r\n  height:auto;\r\n  transform:none!important;\r\n  overflow:hidden;\r\n  border:1px solid rgba(170,195,255,.16);\r\n  border-radius:6px;\r\n  background:#070b12;\r\n  box-shadow:\r\n    0 18px 38px rgba(0,0,0,.32),\r\n    0 0 0 1px rgba(255,255,255,.018) inset,\r\n    0 0 34px rgba(74,111,215,.08);\r\n}\r\n\r\n#ok3d-app #service-3d .gem-object::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:3;\r\n  pointer-events:none;\r\n  box-shadow:inset 0 0 45px rgba(4,7,13,.28);\r\n}\r\n\r\n#ok3d-app #service-3d .gem-stage.in-view .gem-object{\r\n  animation:none!important;\r\n}\r\n\r\n#ok3d-app #service-3d .gem-wire-img,\r\n#ok3d-app #service-3d .gem-solid-img{\r\n  position:absolute;\r\n  inset:0;\r\n  display:block;\r\n  width:100%!important;\r\n  height:100%!important;\r\n  max-width:none!important;\r\n  object-fit:cover!important;\r\n  object-position:center center;\r\n  transform:scale(1.01);\r\n  filter:saturate(.92) contrast(1.02);\r\n}\r\n\r\n#ok3d-app #service-3d .gem-wire-img{z-index:1}\r\n\r\n#ok3d-app #service-3d .gem-render{\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:2;\r\n  clip-path:inset(0 0 0 var(--split));\r\n  filter:none;\r\n  will-change:clip-path;\r\n}\r\n\r\n#ok3d-app #service-3d .gem-solid-img{\r\n  filter:saturate(1.02) contrast(1.025);\r\n}\r\n\r\n#ok3d-app #service-3d .compare-line{\r\n  z-index:6;\r\n  top:var(--media-top);\r\n  bottom:var(--media-bottom);\r\n  left:calc(var(--media-x) + (100% - (var(--media-x) * 2)) * var(--split-number,.52));\r\n  background:linear-gradient(transparent,rgba(220,233,255,.92) 14%,rgba(220,233,255,.92) 86%,transparent);\r\n  box-shadow:0 0 15px rgba(112,151,255,.20);\r\n}\r\n\r\n#ok3d-app #service-3d .compare-line span{\r\n  width:30px;\r\n  height:30px;\r\n  border-color:rgba(217,231,255,.82);\r\n  background:rgba(18,29,54,.90);\r\n  box-shadow:0 8px 22px rgba(0,0,0,.32),0 0 0 4px rgba(100,140,255,.08);\r\n  backdrop-filter:blur(8px);\r\n}\r\n\r\n#ok3d-app #service-3d .stage-corner{\r\n  z-index:7;\r\n  top:14px;\r\n  text-shadow:0 1px 10px rgba(0,0,0,.7);\r\n}\r\n\r\n#ok3d-app #service-3d .compare-labels{\r\n  z-index:7;\r\n  left:calc(var(--media-x) + 8px);\r\n  right:calc(var(--media-x) + 8px);\r\n  bottom:9px;\r\n  color:#9aa9c7;\r\n  text-shadow:0 1px 10px rgba(0,0,0,.75);\r\n}\r\n\r\n@media(max-width:1100px){\r\n  #ok3d-app #service-3d .gem-stage{\r\n    --media-x:14px;\r\n    --media-top:36px;\r\n    --media-bottom:28px;\r\n  }\r\n}\r\n\r\n@media(max-width:700px){\r\n  #ok3d-app #service-3d .gem-stage{\r\n    --media-x:18px;\r\n    --media-top:38px;\r\n    --media-bottom:30px;\r\n  }\r\n  #ok3d-app #service-3d .gem-wire-img,\r\n  #ok3d-app #service-3d .gem-solid-img{transform:none}\r\n}\r\n\r\n\r\n\/* HERO MOBILE \u2014 vid\u00e9o portrait d\u00e9di\u00e9e, uniquement t\u00e9l\u00e9phone *\/\r\n@media(max-width:700px){\r\n  #ok3d-app .hero-media video{\r\n    object-fit:cover!important;\r\n    object-position:center center!important;\r\n  }\r\n}\r\n\r\n\r\n\/* HERO CONTROLS \u2014 centrage pr\u00e9cis du bouton lecture\/pause *\/\r\n#ok3d-app .hero-controls{\r\n  display:flex;\r\n  align-items:center;\r\n}\r\n#ok3d-app .pause{\r\n  display:inline-flex!important;\r\n  align-items:center!important;\r\n  justify-content:center!important;\r\n  flex:0 0 36px;\r\n  width:36px!important;\r\n  height:36px!important;\r\n  padding:0!important;\r\n  margin:0!important;\r\n  line-height:1!important;\r\n  text-align:center!important;\r\n  vertical-align:middle;\r\n}\r\n#ok3d-app .pause:focus-visible{outline-offset:4px}\r\n\r\n@media(max-width:700px){\r\n  #ok3d-app .hero-controls{\r\n    min-height:36px;\r\n    align-items:center!important;\r\n  }\r\n  #ok3d-app .pause{\r\n    align-self:center;\r\n  }\r\n}\r\n\r\n<\/style>\r\n<script>\r\n(()=>{\r\n\r\n\/* R\u00e9glages : vid\u00e9os existantes et endpoint du formulaire WordPress OK3D. *\/\r\nconst CONFIG={heroVideo:'https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/anim_hero_multiproject_10mo.mp4',formEndpoint:'https:\/\/www.ok3d.fr\/wp-json\/ok3d\/v1\/devis',email:'contact@ok3d.fr'};\r\nconst root=document.getElementById('ok3d-app'); if(!root)return; const reduced=window.matchMedia('(prefers-reduced-motion: reduce)');\r\nconst heroVideo=root.querySelector('#hero-video');const pauseButton=root.querySelector('#pause-video');\r\n\r\n\/* Hero responsive : source mobile forc\u00e9e pour \u00e9viter les comportements variables des <source media> sur Safari\/iOS. *\/\r\nconst HERO_DESKTOP='https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/anim_hero_multiproject_10mo.mp4';\r\nconst HERO_MOBILE='https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/eye_portrait_hero_site.mp4?v=20260917-2';\r\nconst heroMedia=window.matchMedia('(max-width:767px)');\r\nlet currentHeroSrc='';\r\n\r\nfunction setHeroSource(force=false){\r\n  const wanted=heroMedia.matches?HERO_MOBILE:HERO_DESKTOP;\r\n  if(!force && currentHeroSrc===wanted)return;\r\n  currentHeroSrc=wanted;\r\n  const wasPaused=heroVideo.paused;\r\n  heroVideo.pause();\r\n  heroVideo.src=wanted;\r\n  heroVideo.load();\r\n  heroVideo.loop=true;\r\n  heroVideo.muted=true;\r\n  heroVideo.defaultMuted=true;\r\n  heroVideo.playsInline=true;\r\n  heroVideo.setAttribute('playsinline','');\r\n  heroVideo.setAttribute('webkit-playsinline','');\r\n  if(!reduced.matches && !wasPaused){\r\n    heroVideo.play().catch(()=>{});\r\n  } else if(!reduced.matches && force){\r\n    heroVideo.play().catch(()=>{});\r\n  }\r\n}\r\n\r\nsetHeroSource(true);\r\nif(heroMedia.addEventListener) heroMedia.addEventListener('change',()=>setHeroSource());\r\nelse if(heroMedia.addListener) heroMedia.addListener(()=>setHeroSource());\r\nwindow.addEventListener('pageshow',()=>setHeroSource());\r\nwindow.addEventListener('orientationchange',()=>setTimeout(()=>setHeroSource(true),120));\r\n\r\n\/* Boucle de secours si un navigateur ignore l\u2019attribut loop. *\/\r\nheroVideo.addEventListener('ended',()=>{if(!reduced.matches){heroVideo.currentTime=0;heroVideo.play().catch(updatePause);}});\r\nfunction updatePause(){pauseButton.textContent=heroVideo.paused?'\u25b6':'\u2161';pauseButton.setAttribute('aria-label',heroVideo.paused?'Lire la vid\u00e9o de fond':'Mettre la vid\u00e9o de fond en pause');}\r\nheroVideo.addEventListener('play',updatePause);heroVideo.addEventListener('pause',updatePause);\r\nif(!reduced.matches){heroVideo.play().catch(updatePause);}pauseButton.addEventListener('click',()=>{if(heroVideo.paused)heroVideo.play().catch(updatePause);else heroVideo.pause();});\r\nheroVideo.addEventListener('error',()=>{pauseButton.hidden=true;});\r\n\r\nconst dialog=root.querySelector('#video-dialog'),player=root.querySelector('#dialog-player');let resumeHero=false;\r\n\r\nfunction resolveVideo(value,{autoplay=false,background=false}={}){\r\n  if(!value)return null;\r\n  const raw=String(value).trim();\r\n\r\n  if(\/^\\d+$\/.test(raw)){\r\n    return{\r\n      type:'iframe',\r\n      src:'https:\/\/player.vimeo.com\/video\/'+raw+'?'+(background?'background=1&autoplay=1&muted=1&loop=1&dnt=1':'autoplay='+(autoplay?1:0)+'&dnt=1'),\r\n      direct:'https:\/\/vimeo.com\/'+raw\r\n    };\r\n  }\r\n\r\n  try{\r\n    const u=new URL(raw,location.href);\r\n    const host=u.hostname.replace(\/^www\\.\/,'');\r\n\r\n    if(host==='youtu.be'||host==='youtube.com'||host==='youtube-nocookie.com'){\r\n      let id='';\r\n      if(host==='youtu.be') id=u.pathname.split('\/').filter(Boolean)[0]||'';\r\n      else if(u.pathname.startsWith('\/shorts\/')) id=u.pathname.split('\/')[2]||'';\r\n      else if(u.pathname.startsWith('\/embed\/')) id=u.pathname.split('\/')[2]||'';\r\n      else id=u.searchParams.get('v')||'';\r\n\r\n      if(id){\r\n        const params=background\r\n          ? 'autoplay=1&mute=1&loop=1&playlist='+encodeURIComponent(id)+'&controls=0&rel=0&playsinline=1'\r\n          : 'autoplay='+(autoplay?1:0)+'&rel=0&playsinline=1';\r\n        return{\r\n          type:'iframe',\r\n          src:'https:\/\/www.youtube-nocookie.com\/embed\/'+id+'?'+params,\r\n          direct:'https:\/\/youtu.be\/'+id\r\n        };\r\n      }\r\n    }\r\n\r\n    if(host==='vimeo.com'||host==='player.vimeo.com'){\r\n      const id=u.pathname.split('\/').filter(Boolean).find(v=>\/^\\d+$\/.test(v));\r\n      if(id){\r\n        return{\r\n          type:'iframe',\r\n          src:'https:\/\/player.vimeo.com\/video\/'+id+'?'+(background?'background=1&autoplay=1&muted=1&loop=1&dnt=1':'autoplay='+(autoplay?1:0)+'&dnt=1'),\r\n          direct:'https:\/\/vimeo.com\/'+id\r\n        };\r\n      }\r\n    }\r\n\r\n    if(\/\\.mp4(?:$|\\?)\/i.test(u.href)){\r\n      return{type:'video',src:u.href,direct:u.href};\r\n    }\r\n  }catch(e){}\r\n\r\n  return null;\r\n}\r\n\r\nroot.querySelectorAll('[data-video]').forEach(button=>button.addEventListener('click',()=>{\r\n  resumeHero=!heroVideo.paused;\r\n  heroVideo.pause();\r\n  root.querySelector('#dialog-title').textContent=button.dataset.title;\r\n  const source=resolveVideo(button.dataset.video,{autoplay:true});\r\n  const direct=root.querySelector('#video-direct');\r\n  player.replaceChildren();\r\n  if(!source)return;\r\n\r\n  if(source.type==='video'){\r\n    const video=document.createElement('video');\r\n    video.src=source.src;\r\n    video.controls=true;\r\n    video.autoplay=true;\r\n    video.playsInline=true;\r\n    player.append(video);\r\n  }else{\r\n    const iframe=document.createElement('iframe');\r\n    iframe.src=source.src;\r\n    iframe.title=button.dataset.title;\r\n    iframe.allow='autoplay; fullscreen; picture-in-picture';\r\n    iframe.allowFullscreen=true;\r\n    player.append(iframe);\r\n  }\r\n\r\n  direct.href=source.direct;\r\n  dialog.showModal();\r\n  document.body.classList.add('locked');\r\n}));\r\ndialog.querySelector('.dialog-close').addEventListener('click',()=>dialog.close());dialog.addEventListener('click',e=>{if(e.target===dialog){const r=dialog.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dialog.close();}});dialog.addEventListener('close',()=>{player.replaceChildren();document.body.classList.remove('locked');if(resumeHero&&!reduced.matches)heroVideo.play().catch(updatePause);});\r\nif('IntersectionObserver' in window&&!reduced.matches){const observer=new IntersectionObserver(entries=>entries.forEach(e=>{if(e.isIntersecting){e.target.classList.remove('pending');observer.unobserve(e.target);}}),{threshold:.08});root.querySelectorAll('.reveal').forEach(el=>{el.classList.add('pending');observer.observe(el);});}\r\nconst yearEl=root.querySelector('#year');if(yearEl)yearEl.textContent=new Date().getFullYear();\r\nconst form=root.querySelector('#brief-form');const status=root.querySelector('#form-status');const submit=root.querySelector('#submit-brief');\r\nform.addEventListener('submit',async e=>{e.preventDefault();if(!form.reportValidity())return;const values=new FormData(form);if(values.get('website'))return;const payload={nom:String(values.get('nom')).trim(),email:String(values.get('email')).trim(),societe:'',tel:'',ref:'',services:[values.get('type_projet')],projet:String(values.get('message')).trim(),budget:values.get('budget'),delai:'Non pr\u00e9cis\u00e9',website:''};if(!payload.nom||payload.projet.length<10){status.textContent='Merci de pr\u00e9ciser votre nom et votre projet (10 caract\u00e8res minimum).';status.className='form-status error';return;}const initial=submit.innerHTML;submit.disabled=true;submit.textContent='Envoi en cours\u2026';status.textContent='';status.className='form-status';const controller=new AbortController();const timeout=setTimeout(()=>controller.abort(),15000);try{const response=await fetch(CONFIG.formEndpoint,{method:'POST',headers:{'Content-Type':'application\/json'},body:JSON.stringify(payload),signal:controller.signal});const data=await response.json();if(!response.ok||!data.success)throw new Error('Envoi non confirm\u00e9');status.textContent='Votre brief a bien \u00e9t\u00e9 envoy\u00e9. Merci, je reviens vers vous rapidement !';form.reset();}catch(error){status.className='form-status error';status.replaceChildren(document.createTextNode('L\u2019envoi n\u2019a pas pu \u00eatre confirm\u00e9. Votre texte est conserv\u00e9. '));const link=document.createElement('a');link.textContent='Envoyer le brief par email \u2197';link.style.textDecoration='underline';link.href='mailto:'+CONFIG.email+'?subject='+encodeURIComponent('Projet OK3D \u2014 '+payload.services[0])+'&body='+encodeURIComponent('Nom : '+payload.nom+'\\nEmail : '+payload.email+'\\nBudget : '+payload.budget+'\\n\\n'+payload.projet);status.append(link);}finally{clearTimeout(timeout);submit.disabled=false;submit.innerHTML=initial;}});\r\n\r\n\/\/ Service 3D : m\u00eame forme vectorielle fournie, deux traitements superpos\u00e9s.\r\nconst materialRange=root.querySelector('#material-range');\r\nconst gemStage=root.querySelector('.gem-stage');\r\nif('IntersectionObserver' in window&&!reduced.matches){let drawn=false;const gemObserver=new IntersectionObserver(entries=>entries.forEach(e=>{gemStage.classList.toggle('in-view',e.isIntersecting);if(e.isIntersecting&&!drawn){drawn=true;gemStage.classList.add('draw-in');}}),{threshold:.2});gemObserver.observe(gemStage);}\r\nmaterialRange.addEventListener('input',()=>{const value=Number(materialRange.value);gemStage.style.setProperty('--split',value+'%');gemStage.style.setProperty('--split-number',String(value\/100));materialRange.setAttribute('aria-valuetext',value+' % filaire, '+(100-value)+' % mati\u00e8re');});\r\nconst brandStage=root.querySelector('.brand-stage');\r\nroot.querySelectorAll('[data-brand-mode]').forEach(btn=>btn.addEventListener('click',()=>{const mode=btn.dataset.brandMode;brandStage.dataset.brand=mode;root.querySelectorAll('[data-brand-mode]').forEach(b=>b.setAttribute('aria-pressed',String(b===btn)));brandStage.querySelector('.brand-symbol').setAttribute('aria-hidden',String(mode!=='symbol'));brandStage.querySelector('.brand-universe').setAttribute('aria-hidden',String(mode!=='universe'));}));\r\nconst webStage=root.querySelector('.web-stage');\r\nroot.querySelectorAll('[data-device-mode]').forEach(btn=>btn.addEventListener('click',()=>{webStage.dataset.device=btn.dataset.deviceMode;root.querySelectorAll('[data-device-mode]').forEach(b=>b.setAttribute('aria-pressed',String(b===btn)));}));\r\n\/\/ Aper\u00e7u \u00e0 la demande : au survol uniquement, arr\u00eat\u00e9 \u00e0 la sortie et hors \u00e9cran.\r\nconst previewControllers=[];\r\nif(window.matchMedia('(hover: hover) and (pointer: fine)').matches&&!reduced.matches){root.querySelectorAll('.project-media[data-video]').forEach(card=>{let timer=null,slot=null,active=false;const stop=()=>{active=false;clearTimeout(timer);card.classList.remove('preview-playing');if(slot){slot.remove();slot=null;}};const start=()=>{if(active||document.hidden||dialog.open)return;active=true;timer=setTimeout(()=>{if(!active)return;slot=document.createElement('span');slot.className='project-preview';slot.setAttribute('aria-hidden','true');const source=resolveVideo(card.dataset.video,{autoplay:true,background:true});if(!source)return;\r\nconst frame=document.createElement(source.type==='video'?'video':'iframe');frame.title='Aper\u00e7u muet \u2014 '+card.dataset.title;frame.tabIndex=-1;\r\nif(source.type==='video'){frame.src=source.src;frame.autoplay=true;frame.muted=true;frame.loop=true;frame.playsInline=true;}else{frame.src=source.src;frame.allow='autoplay';}\r\nconst revealPreview=()=>{if(active&&slot){slot.classList.add('visible');card.classList.add('preview-playing');}};\r\nframe.addEventListener('load',revealPreview);frame.addEventListener('loadeddata',revealPreview);slot.append(frame);card.append(slot);},300);};card.addEventListener('pointerenter',start);card.addEventListener('pointerleave',stop);card.addEventListener('click',stop);previewControllers.push(stop);if('IntersectionObserver' in window){const observer=new IntersectionObserver(es=>es.forEach(e=>{if(!e.isIntersecting)stop();}));observer.observe(card);}});}\r\ndocument.addEventListener('visibilitychange',()=>{if(document.hidden)previewControllers.forEach(stop=>stop());});\r\nroot.querySelectorAll('[data-video]').forEach(b=>b.addEventListener('click',()=>previewControllers.forEach(stop=>stop())));\r\n\/\/ Progression de m\u00e9thode sans bloquer le d\u00e9filement.\r\nconst methodGrid=root.querySelector('.method-grid');const methodSteps=[...methodGrid.querySelectorAll('.step')];let methodPending=false;\r\nfunction updateMethod(){methodPending=false;const box=methodGrid.getBoundingClientRect();const narrow=window.matchMedia('(max-width:700px)').matches;let progress=Math.min(1,Math.max(0,(window.innerHeight*.84-box.top)\/(narrow?box.height:window.innerHeight*.38)));if(reduced.matches)progress=1;methodGrid.style.setProperty('--method-progress',String(progress));const current=Math.min(3,Math.floor(progress*4));methodSteps.forEach((step,i)=>{step.classList.toggle('current',i===current&&progress>0);step.classList.toggle('passed',i<current);});}\r\nfunction requestMethod(){if(!methodPending){methodPending=true;requestAnimationFrame(updateMethod);}}\r\nwindow.addEventListener('scroll',requestMethod,{passive:true});window.addEventListener('resize',requestMethod);updateMethod();\r\n\r\n\r\n})();\r\n<\/script>\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>Aller au contenu Studio ind\u00e9pendant \u00b7 3D, design &amp; digital Vos id\u00e9es.Une autredimension. Animation 3D, design graphique et webdesign.Je donne forme \u00e0 vos id\u00e9es pour cr\u00e9er des images, des marques et des exp\u00e9riences qui restent. Explorer les projets \u2197\u25b6Voir le showreelDIRECTION ARTISTIQUE \u00d7 TECHNIQUE J\u00e9r\u00e9my Vel\u00e9 \u00b7 Cr\u00e9ateur d\u2019OK3DParis, France \u2161D\u00e9filer pour d\u00e9couvrir \u2193 Des [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-14737","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/pages\/14737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/comments?post=14737"}],"version-history":[{"count":176,"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/pages\/14737\/revisions"}],"predecessor-version":[{"id":15643,"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/pages\/14737\/revisions\/15643"}],"wp:attachment":[{"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/media?parent=14737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}