{"id":14899,"date":"2026-05-08T16:08:36","date_gmt":"2026-05-08T14:08:36","guid":{"rendered":"https:\/\/www.ok3d.fr\/?page_id=14899"},"modified":"2026-09-15T01:28:41","modified_gmt":"2026-09-14T23:28:41","slug":"webdesign","status":"publish","type":"page","link":"https:\/\/www.ok3d.fr\/en\/webdesign\/","title":{"rendered":"webdesign"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14899\" class=\"elementor elementor-14899\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29d7a78 e-con-full e-flex e-con e-parent\" data-id=\"29d7a78\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1a6704 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"c1a6704\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- OK3D \u00b7 Webdesign \u00b7 Contenu de page sans header \u00b7 Elementor HTML -->\n<div id=\"ok3d-web\" data-kind=\"service\"><span id=\"ok3d-web-top\"><\/span><a class=\"skip\" href=\"#ok3d-web-main\">Aller au contenu<\/a><!-- Header g\u00e9r\u00e9 s\u00e9par\u00e9ment via Elementor Theme Builder --><main id=\"ok3d-web-main\"><section class=\"expert-hero\"><div class=\"wrap\"><div class=\"expert-hero-inner\"><div><p class=\"kicker\">Expertise \/ Webdesign<\/p><h1 class=\"expert-title\">Votre marque.<br>Une vraie<br><span class=\"accent-line\">pr\u00e9sence digitale.<\/span><\/h1><p class=\"subtext\">Un site doit donner envie de rester et rendre la suite \u00e9vidente. Je con\u00e7ois des exp\u00e9riences web sur mesure, pens\u00e9es pour vos contenus, vos visiteurs et tous leurs \u00e9crans.<\/p><div class=\"expert-actions\"><a class=\"btn btn-primary\" href=\"#ok3d-web-contact\">Parlons de votre projet <span class=\"arrow\" aria-hidden=\"true\">\u2197<\/span><\/a><a class=\"text-link\" href=\"#ok3d-web-selection\">Voir les r\u00e9alisations \u2193<\/a><\/div><\/div><div class=\"expert-visual\"><div class=\"visual-header\"><span>UNE EXP\u00c9RIENCE, TOUS LES \u00c9CRANS<\/span><span>\u2197<\/span><\/div><div class=\"site-demo\" data-format=\"desktop\"><div class=\"site-window\"><div class=\"site-window-bar\"><span>\u25cf \u25cf \u25cf<\/span><span>ok3d.fr<\/span><\/div><div class=\"site-window-nav\"><img decoding=\"async\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/ok3d_logo_arrondi_blanc.png\" alt=\"OK3D\"><span>Projets &nbsp; Expertises &nbsp; Contact<\/span><\/div><div class=\"site-window-content\"><img decoding=\"async\" src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2023\/11\/turn_arround_alpine_a110_sastruga_00000.webp\" alt=\"\" loading=\"lazy\"><small>STUDIO IND\u00c9PENDANT<\/small><strong>Vos id\u00e9es.<br>Une autre<br><em>dimension.<\/em><\/strong><span class=\"mini-cta\">Explorer les projets \u2197<\/span><\/div><\/div><\/div><div class=\"visual-tabs\" role=\"group\" aria-label=\"Format de la d\u00e9monstration\"><button data-format-button=\"desktop\" aria-pressed=\"true\" type=\"button\">Ordinateur<\/button><button data-format-button=\"mobile\" aria-pressed=\"false\" type=\"button\">Mobile<\/button><\/div><div class=\"visual-caption\"><span>Un design qui s\u2019adapte \u00e0 son \u00e9cran.<\/span><\/div><\/div><\/div><div class=\"expert-strip\"><span>UX \/ UI DESIGN<\/span><span>WORDPRESS<\/span><span>RESPONSIVE<\/span><\/div><\/div><\/section><section class=\"section wrap\"><div class=\"section-head reveal\"><div><p class=\"kicker\">01 \/ Ce que je cr\u00e9e<\/p><h2>Une vision claire.<br><span>Des formes multiples.<\/span><\/h2><\/div><p>Du premier \u00e9change aux derniers d\u00e9tails, chaque cr\u00e9ation r\u00e9pond \u00e0 votre projet et \u00e0 ses usages.<\/p><\/div><div class=\"offer-grid\"><article class=\"offer reveal\"><span class=\"offer-number\">01 \/<\/span><h3>Structure &amp; parcours<\/h3><p>Organiser l\u2019information pour que chaque visiteur comprenne votre offre et trouve facilement ce qu\u2019il cherche.<\/p><ul><li>Arborescence<\/li><li>Hi\u00e9rarchie des contenus<\/li><li>Parcours &amp; maquettes<\/li><\/ul><\/article><article class=\"offer reveal\"><span class=\"offer-number\">02 \/<\/span><h3>Design d\u2019interface<\/h3><p>Faire de votre site une continuit\u00e9 de votre marque, avec une identit\u00e9 forte et une lecture confortable.<\/p><ul><li>Direction artistique web<\/li><li>Interfaces sur mesure<\/li><li>Versions mobile &amp; desktop<\/li><\/ul><\/article><article class=\"offer reveal\"><span class=\"offer-number\">03 \/<\/span><h3>Int\u00e9gration &amp; finitions<\/h3><p>Transformer les maquettes en un site vivant, puis soigner les interactions qui facilitent son utilisation.<\/p><ul><li>Int\u00e9gration WordPress<\/li><li>Animations mesur\u00e9es<\/li><li>V\u00e9rification des parcours<\/li><\/ul><\/article><\/div><\/section><section class=\"section selected-section\" id=\"ok3d-web-selection\"><div class=\"wrap\"><div class=\"section-head reveal\"><div><p class=\"kicker\">02 \/ En pratique<\/p><h2>Des id\u00e9es devenues<br><span>r\u00e9alit\u00e9.<\/span><\/h2><\/div><a class=\"text-link\" href=\"\/projets\/\">Tous les projets \u2197<\/a><\/div><div class=\"selected-grid\"><article class=\"selected-card reveal\"><a href=\"\/projets\/#pyh\"><div class=\"selected-media\"><img src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2025\/11\/PYH_site.jpg\" alt=\"PYH \u2014 Site web &amp; branding\" loading=\"lazy\" decoding=\"async\"><span aria-hidden=\"true\">\u2197<\/span><\/div><div class=\"selected-copy\"><small>Site web \u00b7 Identit\u00e9<\/small><h3>PYH<\/h3><p>Cr\u00e9ation du site vitrine et de l&#x27;identit\u00e9 visuelle compl\u00e8te pour PYH SAP.<\/p><\/div><\/a><\/article><article class=\"selected-card reveal\"><a href=\"\/projets\/#avouslimmo-web\"><div class=\"selected-media\"><img src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2024\/06\/AVOUSLIMMO_visuel_site_ok3d.webp\" alt=\"Avousl&#x27;immo \u2014 Site web immobilier\" loading=\"lazy\" decoding=\"async\"><span aria-hidden=\"true\">\u2197<\/span><\/div><div class=\"selected-copy\"><small>Site Web \u00b7 Immobilier<\/small><h3>Avousl&#x27;immo<\/h3><p>Site immobilier complet et sur-mesure pour l&#x27;agence Avousl&#x27;immo \u00e0 Rueil-Malmaison.<\/p><\/div><\/a><\/article><article class=\"selected-card reveal\"><a href=\"\/projets\/#be2be\"><div class=\"selected-media contain\"><img src=\"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/logo_be2be_solutions.jpg\" alt=\"BE2BE Solutions \u2014 Branding &amp; Site internet\" loading=\"lazy\" decoding=\"async\"><span aria-hidden=\"true\">\u2197<\/span><\/div><div class=\"selected-copy\"><small>Identit\u00e9 visuelle \u00b7 Site web<\/small><h3>BE2BE Solutions<\/h3><p>Cr\u00e9ation de l&#x27;identit\u00e9 visuelle de BE2BE Solutions et conception de son site internet, avec un univers graphique coh\u00e9rent d\u00e9clin\u00e9 sur l&#x27;ensemble de la pr\u00e9sence digitale.<\/p><\/div><\/a><\/article><\/div><\/div><\/section><section class=\"section wrap\"><div class=\"approach-grid\"><div class=\"approach-heading reveal\"><p class=\"kicker\">03 \/ La m\u00e9thode<\/p><h2>Une collaboration.<br><span class=\"accent-line\">Un cap commun.<\/span><\/h2><p class=\"subtext\">Un interlocuteur direct, des \u00e9tapes claires et des \u00e9changes r\u00e9guliers pour faire avancer votre projet.<\/p><\/div><div><article class=\"approach-step reveal\"><span>01<\/span><div><h3>D\u00e9finir le r\u00f4le du site.<\/h3><p>Pr\u00e9senter votre activit\u00e9, faire d\u00e9couvrir vos r\u00e9alisations ou g\u00e9n\u00e9rer des contacts : nous clarifions les objectifs et les contenus.<\/p><\/div><\/article><article class=\"approach-step reveal\"><span>02<\/span><div><h3>Dessiner l\u2019exp\u00e9rience.<\/h3><p>La structure, les maquettes et la direction artistique dessinent un parcours clair, sur ordinateur comme sur mobile.<\/p><\/div><\/article><article class=\"approach-step reveal\"><span>03<\/span><div><h3>Construire &amp; ajuster.<\/h3><p>Les pages sont int\u00e9gr\u00e9es avec vos contenus. Les \u00e9changes permettent de pr\u00e9ciser les d\u00e9tails et les interactions.<\/p><\/div><\/article><article class=\"approach-step reveal\"><span>04<\/span><div><h3>Tester avant de lancer.<\/h3><p>Navigation, liens, lisibilit\u00e9 et formulaires sont v\u00e9rifi\u00e9s sur les formats pr\u00e9vus avant la mise en ligne.<\/p><\/div><\/article><\/div><\/div><\/section><section class=\"section contact\" id=\"ok3d-web-contact\"><div class=\"wrap contact-grid\"><div class=\"contact-intro\"><p class=\"kicker\">04 \/ 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 data-brief id=\"ok3d-web-brief-form\"><div class=\"form-grid\"><div class=\"field\"><label for=\"ok3d-web-nom\">Votre nom *<\/label><input autocomplete=\"name\" id=\"ok3d-web-nom\" maxlength=\"120\" name=\"nom\" placeholder=\"Pr\u00e9nom et nom\" required=\"\"\/><\/div><div class=\"field\"><label for=\"ok3d-web-email\">Votre email *<\/label><input autocomplete=\"email\" id=\"ok3d-web-email\" maxlength=\"180\" name=\"email\" placeholder=\"vous@entreprise.fr\" required=\"\" type=\"email\"\/><\/div><div class=\"field\"><label for=\"ok3d-web-type_projet\">Votre besoin<\/label><select id=\"ok3d-web-type_projet\" name=\"type_projet\"><option value=\"3D \/ Animation\">3D \/ Animation<\/option><option selected>Site web<\/option><option>Identit\u00e9 visuelle<\/option><option>Visuels marketing<\/option><option>Autre<\/option><\/select><\/div><div class=\"field\"><label for=\"ok3d-web-budget\">Budget indicatif<\/label><select id=\"ok3d-web-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=\"ok3d-web-message\">Votre projet en quelques mots *<\/label><textarea id=\"ok3d-web-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=\"ok3d-web-website\">Ne pas remplir ce champ<\/label><input autocomplete=\"off\" id=\"ok3d-web-website\" name=\"website\" tabindex=\"-1\"\/><\/div><div class=\"form-submit\"><button class=\"btn btn-primary\" id=\"ok3d-web-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=\"ok3d-web-form-status\" role=\"status\"><\/p><p class=\"form-privacy\">Les informations transmises servent uniquement \u00e0 r\u00e9pondre \u00e0 votre demande.<\/p><\/form><\/div><\/section><div class=\"other-expertises\"><div class=\"wrap\"><span>Explorer les autres expertises<\/span><a href=\"\/services\/modelisation-3d\/\">3D &amp; animation \u2197<\/a><a href=\"\/services\/identite-visuelle\/\">Design graphique \u2197<\/a><\/div><\/div><\/main><dialog class=\"page-dialog\" aria-labelledby=\"ok3d-web-modal-title\"><div class=\"dialog-top\"><span>OK3D \/ PROJET<\/span><button class=\"close-dialog\" aria-label=\"Fermer la fiche projet\" type=\"button\">\u00d7<\/button><\/div><div class=\"modal-media\"><\/div><div class=\"modal-copy\"><p class=\"modal-tag\"><\/p><h2 class=\"modal-title\" id=\"ok3d-web-modal-title\"><\/h2><p class=\"modal-desc\"><\/p><div class=\"modal-actions\"><a class=\"btn btn-primary\" data-film hidden href=\"#\">Voir le film <span aria-hidden=\"true\">\u25b6<\/span><\/a><a class=\"btn\" data-detail hidden href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Page d\u00e9taill\u00e9e \u2197<\/a><a class=\"btn\" href=\"mailto:contact@ok3d.fr\">Parlons d\u2019un projet similaire \u2197<\/a><\/div><\/div><div class=\"modal-nav\"><button data-prev type=\"button\">\u2190 Pr\u00e9c\u00e9dent<\/button><span data-position><\/span><button data-next type=\"button\">Suivant \u2192<\/button><\/div><\/dialog><script type=\"application\/json\" data-projects>[{\"slug\": \"pyh\", \"href\": \"https:\/\/www.ok3d.fr\/projets\/pyh\/\", \"cat\": [\"web\", \"branding\"], \"title\": \"PYH \u2014 Site web & branding\", \"desc\": \"Cr\u00e9ation du site vitrine et de l'identit\u00e9 visuelle compl\u00e8te pour PYH SAP.\", \"tag\": \"Site web \u00b7 Identit\u00e9\", \"badge\": \"Web + Identit\u00e9\", \"image\": \"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2025\/11\/PYH_site.jpg\", \"video\": null, \"external\": null}, {\"slug\": \"avouslimmo-web\", \"href\": \"https:\/\/www.ok3d.fr\/projets\/avouslimmo-web\/\", \"cat\": [\"web\"], \"title\": \"Avousl'immo \u2014 Site web immobilier\", \"desc\": \"Site immobilier complet et sur-mesure pour l'agence Avousl'immo \u00e0 Rueil-Malmaison.\", \"tag\": \"Site Web \u00b7 Immobilier\", \"badge\": \"Site web\", \"image\": \"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2024\/06\/AVOUSLIMMO_visuel_site_ok3d.webp\", \"video\": null, \"external\": null}, {\"slug\": \"be2be\", \"href\": \"https:\/\/www.ok3d.fr\/projets\/be2be\/\", \"cat\": [\"branding\", \"web\"], \"title\": \"BE2BE Solutions \u2014 Branding & Site internet\", \"desc\": \"Cr\u00e9ation de l'identit\u00e9 visuelle de BE2BE Solutions et conception de son site internet, avec un univers graphique coh\u00e9rent d\u00e9clin\u00e9 sur l'ensemble de la pr\u00e9sence digitale.\", \"tag\": \"Identit\u00e9 visuelle \u00b7 Site web\", \"badge\": \"Identit\u00e9 + Web\", \"image\": \"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2026\/09\/logo_be2be_solutions.jpg\", \"video\": null, \"external\": null}, {\"slug\": \"debelmont\", \"href\": \"https:\/\/www.ok3d.fr\/projets\/debelmont\/\", \"cat\": [\"3d\", \"motion\", \"web\"], \"title\": \"Debelmont \u2014 Site web & animation 3D\", \"desc\": \"Cr\u00e9ation du site vitrine et animation 3D d'une bo\u00eete de luxe pour automobile : mise en sc\u00e8ne du produit, mat\u00e9riaux et d\u00e9tails de finition au service d'un positionnement haut de gamme.\", \"tag\": \"Site web \u00b7 Animation 3D \u00b7 Luxe\", \"badge\": \"3D + Web\", \"image\": \"https:\/\/www.ok3d.fr\/wp-content\/uploads\/2025\/11\/Etabli_v1-2.jpg\", \"video\": null, \"external\": null}, {\"slug\": \"spachezsoi\", \"href\": \"https:\/\/www.ok3d.fr\/projets\/spachezsoi\/\", \"cat\": [\"web\"], \"title\": \"Spa chez soi \u2014 Site internet\", \"desc\": \"Conception et int\u00e9gration du site internet Spa chez soi : parcours clair, pr\u00e9sentation des prestations et mise en avant de la prise de contact.\", \"tag\": \"Site web \u00b7 Bien-\u00eatre\", \"badge\": \"Site web\", \"image\": null, \"video\": null, \"external\": null}]<\/script><\/div>\n<style>\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');\n\n#ok3d-web{--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}\n#ok3d-web,#ok3d-web *{box-sizing:border-box}\n#ok3d-web img{max-width:none}\n#ok3d-web button,#ok3d-web input,#ok3d-web select,#ok3d-web textarea{font-family:inherit}\n\/* Force the Elementor HTML widget\/container to span full width when possible. *\/\n.elementor-widget-html:has(#ok3d-web),.elementor-widget-html:has(#ok3d-web) .elementor-widget-container{width:100%;max-width:none!important}\n\n\n#ok3d-web{--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)}\n#ok3d-web *{box-sizing:border-box}#ok3d-web{scroll-behavior:smooth;scroll-padding-top:100px}#ok3d-web{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}#ok3d-web.locked{overflow:hidden}#ok3d-web button,#ok3d-web input,#ok3d-web select,#ok3d-web textarea{font:inherit}#ok3d-web button,#ok3d-web a{-webkit-tap-highlight-color:transparent}#ok3d-web button{cursor:pointer}#ok3d-web a{color:inherit;text-decoration:none}#ok3d-web button{color:inherit}#ok3d-web img{display:block;width:100%;height:auto}#ok3d-web ::selection{background:#648cff;color:#080a10}#ok3d-web :focus-visible{outline:2px solid #90adff;outline-offset:6px}#ok3d-web h1,#ok3d-web h2,#ok3d-web h3,#ok3d-web p{margin:0}#ok3d-web h1,#ok3d-web h2,#ok3d-web h3{font-family:var(--display);font-weight:500}#ok3d-web button:disabled{cursor:wait;opacity:.65}#ok3d-web .wrap{width:min(100%,1600px);margin:auto;padding-inline:var(--gutter)}#ok3d-web .section{padding-block:112px}#ok3d-web .kicker{font-size:13px;text-transform:uppercase;letter-spacing:.14em;display:flex;align-items:center;gap:14px;color:var(--muted)}#ok3d-web .kicker::before{content:\"\";width:22px;height:1px;background:var(--blue)}#ok3d-web .blue{color:var(--blue)}#ok3d-web .arrow{font-size:24px;line-height:1;display:inline-block;transition:transform .25s}#ok3d-web .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-web .btn:hover{border-color:var(--blue);background:#648cff10}#ok3d-web .btn:hover .arrow{transform:translate(3px,-3px)}#ok3d-web .btn-primary{background:#537fff;border-color:#537fff;color:#fff}#ok3d-web .btn-primary:hover{background:#6d92ff;border-color:#6d92ff}#ok3d-web .text-link{display:inline-flex;align-items:center;gap:20px;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:8px}#ok3d-web .text-link:hover{color:var(--blue)}#ok3d-web .skip{position:fixed;left:20px;top:-100px;z-index:100;background:var(--text);color:var(--bg);padding:10px}#ok3d-web .skip:focus{top:15px}\n#ok3d-web .header{position:absolute;top:0;left:0;width:100%;z-index:20;border-bottom:1px solid var(--line)}#ok3d-web .header-inner{display:flex;align-items:center;justify-content:space-between;height:94px;gap:24px}#ok3d-web .logo{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-3px;line-height:1}#ok3d-web .logo span{color:var(--blue)}#ok3d-web .logo b{display:inline-block;width:7px;height:7px;background:var(--blue);margin-left:5px}#ok3d-web .nav{display:flex;gap:34px;align-items:center}#ok3d-web .nav a{font-size:14px;color:#c4cad8;transition:color .2s}#ok3d-web .nav a:hover{color:#fff}#ok3d-web .header-contact{font-size:14px;border:1px solid #ffffff40;padding:10px 18px;border-radius:3px}#ok3d-web .menu-toggle{display:none;background:transparent;border:1px solid var(--line);padding:8px 13px;font-size:14px}\n#ok3d-web .hero{position:relative;min-height:850px;min-height:min(940px,100svh);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);background:#0a0d18}#ok3d-web .hero-media{position:absolute;inset:0;z-index:-3}#ok3d-web .hero-media video{width:100%;height:100%;object-fit:cover;object-position:center}#ok3d-web .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-web .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-web .hero-body{padding-top:clamp(165px,19vh,230px);padding-bottom:165px}#ok3d-web .hero .kicker{color:#c5cfe6;margin-bottom:28px}#ok3d-web .hero h1{font-size:clamp(60px,7.5vw,116px);letter-spacing:-.065em;line-height:1.02;max-width:1000px}#ok3d-web .hero h1 em{font-style:normal;color:#92acff}#ok3d-web .hero-copy{max-width:470px;color:#bdc5d6;margin-top:30px;font-size:17px;line-height:1.8}#ok3d-web .hero-actions{display:flex;gap:28px;align-items:center;margin-top:34px}#ok3d-web .reel-trigger{display:inline-flex;gap:13px;align-items:center;background:transparent;border:0;font-size:14px;padding:10px 0}#ok3d-web .play{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff55;border-radius:50%;font-size:12px;padding-left:2px}#ok3d-web .reel-trigger:hover .play{background:var(--blue);border-color:var(--blue)}#ok3d-web .hero-bottom{position:absolute;bottom:0;width:100%;padding-block:24px;display:flex;justify-content:space-between;align-items:end}#ok3d-web .hero-signature{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#b4bed0;display:flex;gap:20px}#ok3d-web .hero-signature span+span{border-left:1px solid #ffffff40;padding-left:20px}#ok3d-web .hero-controls{display:flex;align-items:center;gap:22px;font-size:12px;color:#b4bed0}#ok3d-web .pause{border:1px solid #ffffff35;background:#080a1055;border-radius:50%;height:36px;width:36px;font-size:13px}#ok3d-web .scroll-link{font-size:13px;display:flex;gap:14px;align-items:center}#ok3d-web .hero-index{position:absolute;right:var(--gutter);top:47%;writing-mode:vertical-rl;color:#d4ddf0;letter-spacing:.13em;font-size:12px}\n#ok3d-web .clients{padding-block:34px;border-bottom:1px solid var(--line)}#ok3d-web .clients-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}#ok3d-web .clients-label{font-size:12px;color:var(--muted);max-width:115px;line-height:1.7}#ok3d-web .client-list{display:flex;align-items:center;justify-content:space-between;flex:1;gap:30px}#ok3d-web .client-list span{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.04em;color:#bec3cf}#ok3d-web .client-list .kiprun{font-style:italic;letter-spacing:-.08em}#ok3d-web .client-list .obvious{font-size:19px;letter-spacing:-.04em}#ok3d-web .client-list .laposte{font-size:20px;font-style:italic}\n#ok3d-web .section-head{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:46px}#ok3d-web .section-head h2,#ok3d-web .about h2,#ok3d-web .contact h2{font-size:clamp(40px,4.5vw,66px);letter-spacing:-.055em;line-height:1.08;margin-top:20px}#ok3d-web .section-head h2 span{color:var(--muted)}#ok3d-web .works{padding-bottom:106px}#ok3d-web .project-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:46px 28px}#ok3d-web .project:first-child{grid-column:1\/-1}#ok3d-web .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-web .project:first-child .project-media{aspect-ratio:2.2}#ok3d-web .project-media img{height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s;filter:saturate(.92)}#ok3d-web .project-media:hover img{transform:scale(1.035);filter:saturate(1.1)}#ok3d-web .project:first-child .project-media img{object-position:50% 48%}#ok3d-web .project:nth-child(2) .project-media img{object-position:50% 40%}#ok3d-web .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-web .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-web .project-media:hover .project-play{background:#537fff}#ok3d-web .project-info{padding-top:18px;display:flex;justify-content:space-between;align-items:start;gap:15px}#ok3d-web .project-info h3{font-size:25px;letter-spacing:-.045em}#ok3d-web .project-info p{font-size:14px;color:var(--muted);margin-top:4px}#ok3d-web .project-number{font-family:var(--display);font-size:13px;color:var(--muted);padding-top:7px}#ok3d-web .work-footer{display:flex;justify-content:center;margin-top:48px}\n#ok3d-web .expertise{border-block:1px solid var(--line);background:var(--surface)}#ok3d-web .expertise .section-head>p{max-width:350px;color:var(--muted)}#ok3d-web .service{border-top:1px solid var(--line);display:grid;grid-template-columns:70px 1fr 1fr;gap:35px;padding:38px 0;transition:background .25s}#ok3d-web .service:last-child{border-bottom:1px solid var(--line)}#ok3d-web .service-num{color:var(--blue);font-family:var(--display);font-size:14px;padding-top:6px}#ok3d-web .service h3{font-size:clamp(28px,3vw,40px);line-height:1.2;letter-spacing:-.045em}#ok3d-web .service p{color:var(--muted);max-width:480px;font-size:16px}#ok3d-web .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}#ok3d-web .tags span{border:1px solid var(--line);padding:4px 10px;border-radius:3px;font-size:12px;color:#c0c7d7}#ok3d-web .service-title small{display:block;margin-top:12px;color:#8292ba;font-size:13px;font-weight:400}\n#ok3d-web .about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:100px;align-items:start}#ok3d-web .about h2{margin-bottom:28px}#ok3d-web .about-copy>p{color:#b6bed0;font-size:18px;line-height:1.9;max-width:640px}#ok3d-web .about-copy>p+p{margin-top:18px;font-size:16px;color:var(--muted)}#ok3d-web .signature{display:flex;align-items:center;gap:17px;margin-top:30px}#ok3d-web .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-web .signature strong{display:block;font-size:16px;font-weight:600}#ok3d-web .signature small{font-size:13px;color:var(--muted)}#ok3d-web .stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:68px;border-block:1px solid var(--line);padding-block:28px}#ok3d-web .stat{padding-inline:30px;border-right:1px solid var(--line)}#ok3d-web .stat:first-child{padding-left:0}#ok3d-web .stat:last-child{border:0}#ok3d-web .stat strong{font-family:var(--display);font-weight:500;font-size:48px;letter-spacing:-.06em;display:block;line-height:1.2}#ok3d-web .stat strong span{color:var(--blue)}#ok3d-web .stat p{font-size:13px;color:var(--muted);margin-top:8px}#ok3d-web .tool-list{display:flex;gap:12px 25px;flex-wrap:wrap;align-items:center;margin-top:30px;font-size:13px;color:#c0c7d7}#ok3d-web .tool-list>span:first-child{color:var(--muted);margin-right:auto}\n#ok3d-web .method{padding-top:0}#ok3d-web .method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}#ok3d-web .step{border-top:1px solid var(--line);padding-top:22px}#ok3d-web .step>span{font-family:var(--display);color:var(--blue);font-size:13px}#ok3d-web .step h3{font-size:23px;letter-spacing:-.03em;margin-top:22px}#ok3d-web .step p{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.8}\n#ok3d-web .contact{border-top:1px solid #ffffff25;background:radial-gradient(ellipse at 0% 100%,#14234d 0,transparent 65%),#0e131f}#ok3d-web .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}#ok3d-web .contact h2{font-size:clamp(44px,5vw,76px);margin-bottom:28px}#ok3d-web .contact-intro>p{color:var(--muted);max-width:400px}#ok3d-web .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-web .contact-note{display:block;margin-top:35px;font-size:13px;color:#aeb9d0}#ok3d-web .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px 22px}#ok3d-web .field{display:flex;flex-direction:column;gap:8px}#ok3d-web .field.full{grid-column:1\/-1}#ok3d-web .field label{font-size:13px;color:#c7cfdf}#ok3d-web .field input,#ok3d-web .field select,#ok3d-web .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-web .field input::placeholder,#ok3d-web .field textarea::placeholder{color:#838fa7}#ok3d-web .field select{color:#c7cfdf}#ok3d-web .field select option{background:#101622;color:var(--text)}#ok3d-web .field textarea{resize:vertical;min-height:105px}#ok3d-web .form-submit{margin-top:28px;display:flex;align-items:center;gap:24px}#ok3d-web .form-submit small{color:#aeb9d0;font-size:12px}#ok3d-web .form-status{margin-top:14px;font-size:14px;color:#c0cfff}#ok3d-web .form-status.error{color:#ffc1bf}#ok3d-web .honeypot{position:absolute;left:-9999px;opacity:0}#ok3d-web .form-privacy{font-size:12px;color:#9ba8c1;margin-top:18px}#ok3d-web .footer{border-top:1px solid var(--line);background:#080a10}#ok3d-web .footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:36px}#ok3d-web .footer-tagline{font-size:14px;color:var(--muted);margin-right:auto;margin-left:22px}#ok3d-web .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-web .footer-links{display:flex;gap:25px}#ok3d-web .footer-links a:hover{color:white}\n#ok3d-web .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-web .video-dialog::backdrop{background:#02040bec;backdrop-filter:blur(14px)}#ok3d-web .dialog-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;gap:20px}#ok3d-web .dialog-head p{font-size:14px}#ok3d-web .dialog-close{border:1px solid var(--line);background:transparent;min-width:40px;min-height:40px;font-size:22px}#ok3d-web .dialog-player{aspect-ratio:16\/9;background:black}#ok3d-web .dialog-player iframe,#ok3d-web .dialog-player video{width:100%;height:100%;border:0;display:block}#ok3d-web .dialog-fallback{font-size:13px;color:var(--muted);padding:13px 20px}#ok3d-web .dialog-fallback a{text-decoration:underline}#ok3d-web .reveal{transition:opacity .65s,transform .65s}#ok3d-web .reveal.pending{opacity:0;transform:translateY(22px)}\n@media(min-width:1700px){#ok3d-web .hero-bottom{max-width:1600px;left:50%;transform:translateX(-50%)}}\n@media(max-width:1000px){#ok3d-web .hero h1{font-size:clamp(60px,9vw,100px)}#ok3d-web .hero{min-height:820px}#ok3d-web .hero-index{display:none}#ok3d-web .nav{gap:20px}#ok3d-web .about-grid,#ok3d-web .contact-grid{gap:45px}#ok3d-web .service{grid-template-columns:45px 1fr 1.1fr;gap:20px}#ok3d-web .client-list{flex-wrap:wrap;justify-content:center;gap:20px 35px}#ok3d-web .method-grid{grid-template-columns:1fr 1fr}#ok3d-web .clients-inner{gap:25px}#ok3d-web .section{padding-block:85px}#ok3d-web .method{padding-top:0}#ok3d-web .client-list span{font-size:20px}}\n@media(max-width:700px){#ok3d-web .header-inner{height:78px}#ok3d-web .logo{font-size:31px}#ok3d-web .header-contact{display:none}#ok3d-web .menu-toggle{display:block}#ok3d-web .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-web .nav.open{display:flex}#ok3d-web .nav a{font-size:17px;padding:12px 0}#ok3d-web .hero{min-height:810px;min-height:max(810px,100svh)}#ok3d-web .hero-body{padding-top:156px;padding-bottom:180px}#ok3d-web .hero h1{font-size:clamp(52px,11.4vw,79px);letter-spacing:-.065em}#ok3d-web .hero-copy{font-size:16px;max-width:350px}#ok3d-web .hero .kicker{font-size:11px;letter-spacing:.1em}#ok3d-web .hero-actions{gap:20px;flex-wrap:wrap}#ok3d-web .hero-actions .btn{gap:20px;padding-inline:19px}#ok3d-web .hero::before{background:linear-gradient(90deg,#050811d9,#05081170),linear-gradient(0deg,#080a10,transparent 60%)}#ok3d-web .hero-media video{object-position:60% center;opacity:.75}#ok3d-web .hero-bottom{align-items:center;padding-block:22px;gap:20px}#ok3d-web .hero-signature{display:block;font-size:11px;line-height:1.9}#ok3d-web .hero-signature span{display:block}#ok3d-web .hero-signature span+span{border:0;padding:0}#ok3d-web .hero-controls{gap:16px}#ok3d-web .scroll-link{display:none}#ok3d-web .clients{padding-block:25px}#ok3d-web .clients-inner{display:block}#ok3d-web .clients-label{max-width:none;text-align:center;margin-bottom:20px}#ok3d-web .client-list{gap:18px 25px}#ok3d-web .client-list span{font-size:20px}#ok3d-web .client-list .obvious{font-size:17px}#ok3d-web .section{padding-block:65px}#ok3d-web .section-head{display:block;margin-bottom:30px}#ok3d-web .section-head .text-link{margin-top:25px}#ok3d-web .section-head h2,#ok3d-web .about h2{font-size:43px}#ok3d-web .section-head>p{margin-top:22px}#ok3d-web .project-grid{grid-template-columns:1fr;gap:30px}#ok3d-web .project:first-child{grid-column:auto}#ok3d-web .project:first-child .project-media,#ok3d-web .project-media{aspect-ratio:4\/3}#ok3d-web .project:first-child .project-media img{object-position:center}#ok3d-web .project-info h3{font-size:24px}#ok3d-web .project-label{left:15px;top:15px;font-size:11px}#ok3d-web .project-play{right:15px;bottom:15px;width:44px;height:44px}#ok3d-web .service{grid-template-columns:25px 1fr;gap:14px;padding-block:30px}#ok3d-web .service-description{grid-column:2}#ok3d-web .service h3{font-size:31px}#ok3d-web .service-title small{margin-top:8px}#ok3d-web .service p{font-size:15px}#ok3d-web .about-grid,#ok3d-web .contact-grid{grid-template-columns:1fr;gap:32px}#ok3d-web .about-copy>p{font-size:17px}#ok3d-web .stats{margin-top:35px}#ok3d-web .stat{padding-inline:15px}#ok3d-web .stat strong{font-size:37px}#ok3d-web .stat p{font-size:12px}#ok3d-web .tool-list{gap:12px 20px}#ok3d-web .tool-list>span:first-child{width:100%}#ok3d-web .method{padding-top:0}#ok3d-web .method-grid{gap:28px 22px}#ok3d-web .step h3{font-size:22px}#ok3d-web .step p{font-size:14px}#ok3d-web .contact h2{font-size:53px}#ok3d-web .contact-note{margin-top:23px}#ok3d-web .contact-grid{gap:45px}#ok3d-web .form-grid{gap:24px 18px}#ok3d-web .form-submit{align-items:start;flex-direction:column;gap:12px}#ok3d-web .form-submit .btn{width:100%;justify-content:space-between}#ok3d-web .footer-top{flex-wrap:wrap;padding-block:28px}#ok3d-web .footer-tagline{width:calc(100% - 120px);font-size:12px;margin:0}#ok3d-web .footer-top .text-link{font-size:13px}#ok3d-web .footer-bottom{flex-direction:column;gap:10px}#ok3d-web .video-dialog{width:96vw}#ok3d-web .dialog-head{padding:10px 12px}#ok3d-web .dialog-player{aspect-ratio:4\/3}#ok3d-web .dialog-fallback{padding:10px 12px}}\n@media(prefers-reduced-motion:reduce){#ok3d-web{scroll-behavior:auto}#ok3d-web *,#ok3d-web *::before,#ok3d-web *::after{animation:none!important;transition:none!important}#ok3d-web .reveal.pending{opacity:1;transform:none}}\n\n\/* V2 \u2014 trois exp\u00e9riences, une m\u00eame direction artistique. *\/\n@keyframes gem-levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}\n@keyframes wire-reveal{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}\n#ok3d-web .gem-stage.in-view .gem-object{animation:gem-levitate 6s ease-in-out infinite}\n#ok3d-web .gem-stage.draw-in .gem-wire .gw{stroke-dasharray:1;animation:wire-reveal 1.8s ease both}\n\n#ok3d-web .expertise{background:#0b0e16;position:relative;overflow:hidden}#ok3d-web .interactive-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}#ok3d-web .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-web .experience-card:hover,#ok3d-web .experience-card:focus-within{border-color:#648cff75;box-shadow:0 20px 55px #0004}#ok3d-web .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-web .experience-symbol{font-size:24px;color:#8daaff;line-height:1}#ok3d-web .service-stage{height:315px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#23346755,transparent 70%);border-block:1px solid #ffffff0b}#ok3d-web .stage-corner{position:absolute;top:14px;left:18px;font-size:10px;letter-spacing:.14em;color:#9caac7;z-index:3}#ok3d-web .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-web .gem-object{position:absolute;left:calc(50% - 122px);top:35px;width:244px;height:244px;transform:translateY(0)}#ok3d-web .gem-object svg{display:block;width:244px;height:244px}#ok3d-web .gem-wire{position:absolute;inset:0}#ok3d-web .gem-wire .gw{fill:none;stroke:#8eaafa;stroke-width:.55}#ok3d-web .gem-wire .gv{fill:#b5caff;stroke:#0b101c;stroke-width:.45;r:1.15}#ok3d-web .gem-wire .gs{display:none}#ok3d-web .gem-render{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split));filter:drop-shadow(0 8px 16px #4674ff30)}#ok3d-web .gem-solid .gf-hi{fill:url(#chrome-high)}#ok3d-web .gem-solid .gf-lo{fill:url(#chrome-low)}#ok3d-web .gem-solid .gw{fill:none;stroke:#c0d4ff;stroke-width:.35;opacity:.7}#ok3d-web .gem-solid .gv{display:none}#ok3d-web .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-web .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-web .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-web .experience-control{padding:13px 22px;min-height:65px;border-bottom:1px solid #ffffff14;display:flex;align-items:center;gap:16px}#ok3d-web .experience-control label{font-size:12px;color:#adbad3;white-space:nowrap}#ok3d-web .experience-control input{width:100%;min-width:40px;accent-color:#8aa8ff;cursor:ew-resize;height:24px}#ok3d-web .segmented{justify-content:center;gap:5px}#ok3d-web .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-web .segmented button[aria-pressed=\"true\"]{background:#7296ff18;color:#dce7ff;border-color:#89a7ff45}#ok3d-web .segmented button:hover{color:white;background:#7296ff12}#ok3d-web .experience-copy{padding:27px 24px 0}#ok3d-web .experience-copy h3{font-size:clamp(26px,2.55vw,39px);line-height:1.13;letter-spacing:-.055em}#ok3d-web .experience-copy p{font-size:15px;line-height:1.85;color:#a8b5cd;margin-top:20px;min-height:84px}#ok3d-web .experience-copy .tags{gap:6px;min-height:62px;margin-top:18px;align-content:start}#ok3d-web .experience-copy .tags span{font-size:11px;padding:3px 7px;height:max-content}#ok3d-web .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-web .experience-link span{font-size:22px;color:#8aa8ff;transition:transform .25s}#ok3d-web .experience-link:hover{color:#9eb8ff}#ok3d-web .experience-link:hover span{transform:translate(3px,-3px)}\n#ok3d-web .brand-stage{background:radial-gradient(ellipse at 50% 50%,#3a448333,transparent 65%)}#ok3d-web .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-web .brand-symbol img{width:162px;filter:invert(1) drop-shadow(0 0 28px #739bff40)}#ok3d-web .brand-symbol>span{font-family:var(--display);font-size:18px;letter-spacing:.27em;color:#a8bbdf}#ok3d-web .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-web .brand-tile{border-radius:3px;overflow:hidden}#ok3d-web .brand-primary{grid-row:span 3;background:#6389ff;padding:18px;display:flex;flex-direction:column;justify-content:space-between}#ok3d-web .brand-primary img{width:70px}#ok3d-web .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-web .brand-type{background:#eef1ff;color:#172444;padding:8px 13px;display:flex;align-items:center;justify-content:space-between;gap:7px}#ok3d-web .brand-type strong{font-family:var(--display);font-size:51px;font-weight:500;letter-spacing:-.07em}#ok3d-web .brand-type span{font-size:7px;letter-spacing:.07em;max-width:48px}#ok3d-web .brand-swatches{display:flex;gap:0}#ok3d-web .brand-swatches i{flex:1;background:#648cff}#ok3d-web .brand-swatches i:nth-child(2){background:#b6c8ff}#ok3d-web .brand-swatches i:nth-child(3){background:#e9efff}#ok3d-web .brand-swatches i:nth-child(4){background:#273c6c}#ok3d-web .brand-note{background:#1b2743;padding:11px 14px;font-size:15px;font-family:var(--display);line-height:1.2;letter-spacing:-.025em}#ok3d-web .brand-note span{display:block;font-family:var(--font);font-size:7px;margin-top:10px;letter-spacing:.07em;color:#9baed5}#ok3d-web .brand-stage[data-brand=\"universe\"] .brand-symbol{opacity:0;transform:scale(.78) rotate(-8deg);pointer-events:none}#ok3d-web .brand-stage[data-brand=\"universe\"] .brand-universe{opacity:1;transform:none}#ok3d-web .brand-stage[data-brand=\"universe\"] .brand-tile{animation:brand-arrive .6s both}#ok3d-web .brand-stage[data-brand=\"universe\"] .brand-type{animation-delay:.08s}#ok3d-web .brand-stage[data-brand=\"universe\"] .brand-swatches{animation-delay:.16s}#ok3d-web .brand-stage[data-brand=\"universe\"] .brand-note{animation-delay:.24s}@keyframes brand-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}\n#ok3d-web .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-web .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-web .demo-chrome{height:23px;display:flex;justify-content:space-between;align-items:center;padding-inline:10px;background:#1b253b;color:#99a8c7;font-size:8px}#ok3d-web .demo-chrome>span:first-child{font-size:6px;letter-spacing:1px;color:#758aaf}#ok3d-web .demo-page{height:202px;overflow:hidden}#ok3d-web .demo-nav{height:33px;padding:0 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff18}#ok3d-web .demo-nav>strong{font-family:var(--display);font-size:14px;letter-spacing:-1px}#ok3d-web .demo-nav>strong span{color:#8aa8ff}#ok3d-web .demo-nav-links{font-size:7px;color:#aab5ca}#ok3d-web .demo-hamburger{display:none;font-size:11px}#ok3d-web .demo-hero{height:143px;position:relative;isolation:isolate;padding:13px 15px}#ok3d-web .demo-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}#ok3d-web .demo-hero::before{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#060b16ed,#060b1688);z-index:-1}#ok3d-web .demo-hero>div{display:flex;flex-direction:column;align-items:start}#ok3d-web .demo-hero small{font-size:6px;letter-spacing:.12em;color:#b9c9e9;margin-bottom:7px}#ok3d-web .demo-hero strong{font-family:var(--display);font-size:25px;line-height:.98;letter-spacing:-.07em;font-weight:500}#ok3d-web .demo-hero em{color:#a0b7ff;font-style:normal}#ok3d-web .demo-cta{font-size:6px;background:#527df4;color:#fff;padding:4px 7px;margin-top:9px;border-radius:2px}#ok3d-web .demo-bottom{display:flex;justify-content:space-between;gap:3px;font-size:5px;letter-spacing:.04em;padding:8px 13px;color:#b4c1dc}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-browser{width:142px;border-radius:16px}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-chrome{height:21px;font-size:6px}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-nav-links{display:none}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-hamburger{display:block}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-page{height:220px}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-nav{padding-inline:12px}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-hero{height:161px;padding:17px 12px}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-hero strong{font-size:26px}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-hero small{font-size:5px}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-cta{margin-top:13px}#ok3d-web .web-stage[data-device=\"mobile\"] .demo-bottom{font-size:4px;padding-inline:10px}\n#ok3d-web .project-preview{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .55s;background:#0c101a}#ok3d-web .project-preview.visible{opacity:1}#ok3d-web .project-preview iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}#ok3d-web .project-play,#ok3d-web .project-label{z-index:2}#ok3d-web .project-media .project-label{transition:background .3s}#ok3d-web .project-media.preview-playing .project-label{background:#172b57dc}#ok3d-web .project-media.preview-playing .project-play{background:#537fffaa}#ok3d-web .method-grid{position:relative;--method-progress:0}#ok3d-web .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-web .step{position:relative}#ok3d-web .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-web .step.current::before,#ok3d-web .step.passed::before{background:#9dbbff;box-shadow:0 0 14px #739fffaa}#ok3d-web .step h3{transition:color .35s}#ok3d-web .step.current h3{color:#9ab6ff}#ok3d-web .step>span{transition:color .35s}#ok3d-web .step.current>span{color:#c0d1ff}#ok3d-web .hero h1{animation:hero-enter 1.1s cubic-bezier(.2,.8,.2,1) both}#ok3d-web .hero .hero-copy{animation:hero-enter 1.1s .12s both}#ok3d-web .hero .hero-actions{animation:hero-enter 1.1s .24s both}@keyframes hero-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}\n@media(min-width:1100px){#ok3d-web .experience-card:hover .brand-symbol{transform:translateY(-5px)}#ok3d-web .experience-card:hover .brand-stage[data-brand=\"universe\"] .brand-symbol{transform:scale(.78) rotate(-8deg)}}\n@media(max-width:1100px) and (min-width:701px){#ok3d-web .interactive-services{gap:12px}#ok3d-web .experience-top{padding:17px 15px;font-size:10px;letter-spacing:.035em}#ok3d-web .experience-copy{padding-inline:17px}#ok3d-web .service-stage{height:285px}#ok3d-web .gem-object{top:25px}#ok3d-web .experience-control{padding-inline:12px;gap:8px;flex-wrap:wrap}#ok3d-web .experience-control label{font-size:11px}#ok3d-web .experience-control input{flex:1;min-width:50px}#ok3d-web .segmented button{font-size:11px;padding-inline:10px}#ok3d-web .experience-copy p{font-size:14px;min-height:124px}#ok3d-web .experience-copy .tags{min-height:85px}#ok3d-web .brand-universe{inset:50px 12px 22px;gap:6px;grid-template-columns:1fr 1fr}#ok3d-web .brand-primary{padding:12px}#ok3d-web .brand-primary img{width:50px}#ok3d-web .brand-primary>span{font-size:16px}#ok3d-web .brand-type{padding:9px}#ok3d-web .brand-type strong{font-size:38px}#ok3d-web .brand-type span{display:none}#ok3d-web .brand-note{font-size:12px;padding:10px}#ok3d-web .web-stage{padding-inline:12px}}\n@media(max-width:700px){#ok3d-web .interactive-services{grid-template-columns:1fr;gap:24px}#ok3d-web .experience-top{font-size:12px;padding:20px 22px}#ok3d-web .service-stage{height:300px}#ok3d-web .gem-object{top:26px}#ok3d-web .experience-copy{padding:25px 24px 0}#ok3d-web .experience-copy h3{font-size:36px}#ok3d-web .experience-copy p{min-height:0;font-size:16px}#ok3d-web .experience-copy .tags{min-height:0;margin-bottom:24px}#ok3d-web .experience-link{margin-top:20px}#ok3d-web .brand-universe{inset:47px 30px 23px}#ok3d-web .brand-primary>span{font-size:23px}#ok3d-web .brand-type strong{font-size:60px}#ok3d-web .brand-note{font-size:17px}#ok3d-web .web-stage{padding-inline:28px}#ok3d-web .method-grid::before{display:none}#ok3d-web .step.current{border-top-color:#88a8ff}#ok3d-web .experience-control label{font-size:13px}#ok3d-web .segmented button{font-size:14px;min-height:40px}}\n@media(prefers-reduced-motion:reduce){#ok3d-web .hero h1,#ok3d-web .hero .hero-copy,#ok3d-web .hero .hero-actions{animation:none}#ok3d-web .experience-card:hover .brand-symbol{transform:none}#ok3d-web .gem-object{transform:none!important}#ok3d-web .method-grid::before{transform:scaleX(1)}}\n\n\n\n\n\/* =========================================================\n   ELEMENTOR \/ HELLO HARDENING \u2014 V2\n   Force la typographie, les tailles et les couleurs du design\n   m\u00eame si Elementor ou le th\u00e8me applique ses propres styles.\n   ========================================================= *\/\n#ok3d-web,\n#ok3d-web input,\n#ok3d-web textarea,\n#ok3d-web select,\n#ok3d-web button,\n#ok3d-web a,\n#ok3d-web p,\n#ok3d-web span,\n#ok3d-web small,\n#ok3d-web label,\n#ok3d-web strong,\n#ok3d-web em {\n  font-family: var(--font) !important;\n}\n\n#ok3d-web h1,\n#ok3d-web h2,\n#ok3d-web h3,\n#ok3d-web .logo,\n#ok3d-web .client-list span,\n#ok3d-web .project-number,\n#ok3d-web .service-num,\n#ok3d-web .stat strong,\n#ok3d-web .step > span,\n#ok3d-web .brand-symbol > span,\n#ok3d-web .brand-primary > span,\n#ok3d-web .brand-type strong,\n#ok3d-web .brand-note,\n#ok3d-web .demo-nav > strong,\n#ok3d-web .demo-hero strong {\n  font-family: var(--display) !important;\n}\n\n#ok3d-web { color: var(--text) !important; font-size:16px !important; line-height:1.65 !important; }\n#ok3d-web h1,#ok3d-web h2,#ok3d-web h3,#ok3d-web p { margin:0 !important; padding:0; }\n#ok3d-web h1,#ok3d-web h2,#ok3d-web h3 { color:var(--text) !important; font-weight:500 !important; text-transform:none !important; }\n#ok3d-web p { color:inherit; }\n#ok3d-web a { color:inherit !important; text-decoration:none !important; }\n#ok3d-web button { color:inherit !important; }\n\n\/* Header *\/\n#ok3d-web .logo { font-size:34px !important; line-height:1 !important; font-weight:700 !important; letter-spacing:-3px !important; color:var(--text) !important; }\n#ok3d-web .logo span { color:var(--blue) !important; }\n#ok3d-web .nav a { font-size:14px !important; line-height:1.4 !important; color:#c4cad8 !important; font-weight:400 !important; }\n#ok3d-web .nav a:hover { color:#fff !important; }\n#ok3d-web .header-contact { font-size:14px !important; color:var(--text) !important; }\n\n\/* Hero *\/\n#ok3d-web .hero .kicker { font-size:13px !important; line-height:1.4 !important; letter-spacing:.14em !important; color:#c5cfe6 !important; font-weight:400 !important; }\n#ok3d-web .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; }\n#ok3d-web .hero h1 em { color:#92acff !important; font-style:normal !important; font-family:var(--display) !important; }\n#ok3d-web .hero-copy { font-size:17px !important; line-height:1.8 !important; color:#bdc5d6 !important; font-weight:400 !important; }\n#ok3d-web .btn { font-size:14px !important; line-height:1.4 !important; font-weight:700 !important; color:var(--text) !important; }\n#ok3d-web .btn-primary { color:#fff !important; }\n#ok3d-web .reel-trigger { font-size:14px !important; color:var(--text) !important; }\n#ok3d-web .hero-signature { font-size:12px !important; line-height:1.65 !important; color:#b4bed0 !important; }\n#ok3d-web .hero-controls,#ok3d-web .scroll-link,#ok3d-web .hero-index { color:#b4bed0 !important; }\n#ok3d-web .hero-index { color:#d4ddf0 !important; font-size:12px !important; }\n\n\/* Clients \/ titres de sections *\/\n#ok3d-web .clients-label { font-size:12px !important; line-height:1.7 !important; color:var(--muted) !important; }\n#ok3d-web .client-list span { font-size:23px !important; line-height:1.2 !important; font-weight:600 !important; color:#bec3cf !important; }\n#ok3d-web .client-list .obvious { font-size:19px !important; }\n#ok3d-web .client-list .laposte { font-size:20px !important; }\n#ok3d-web .section-head h2,#ok3d-web .about h2,#ok3d-web .contact h2 { font-size:clamp(40px,4.5vw,66px) !important; line-height:1.08 !important; letter-spacing:-.055em !important; color:var(--text) !important; }\n#ok3d-web .section-head h2 span { color:var(--muted) !important; font-family:var(--display) !important; }\n#ok3d-web .kicker { font-size:13px !important; color:var(--muted) !important; }\n\n\/* Projets *\/\n#ok3d-web .project-label { font-size:12px !important; line-height:1.4 !important; color:var(--text) !important; }\n#ok3d-web .project-info h3 { font-size:25px !important; line-height:1.2 !important; letter-spacing:-.045em !important; color:var(--text) !important; }\n#ok3d-web .project-info p { font-size:14px !important; line-height:1.65 !important; color:var(--muted) !important; }\n#ok3d-web .project-number { font-size:13px !important; color:var(--muted) !important; }\n\n\/* Expertises *\/\n#ok3d-web .experience-top { color:#b1bed6 !important; }\n#ok3d-web .experience-copy h3 { color:var(--text) !important; font-size:clamp(26px,2.55vw,39px) !important; line-height:1.13 !important; letter-spacing:-.055em !important; }\n#ok3d-web .experience-copy p { font-size:15px !important; line-height:1.85 !important; color:#a8b5cd !important; }\n#ok3d-web .tags span { font-size:12px !important; line-height:1.4 !important; color:#c0c7d7 !important; }\n#ok3d-web .experience-copy .tags span { font-size:11px !important; }\n#ok3d-web .experience-link { font-size:14px !important; color:var(--text) !important; }\n#ok3d-web .experience-link:hover { color:#9eb8ff !important; }\n#ok3d-web .experience-control label { color:#adbad3 !important; }\n#ok3d-web .segmented button { color:#a7b5cf !important; }\n#ok3d-web .segmented button[aria-pressed=\"true\"] { color:#dce7ff !important; }\n\n\/* Studio *\/\n#ok3d-web .about-copy > p { font-size:18px !important; line-height:1.9 !important; color:#b6bed0 !important; }\n#ok3d-web .about-copy > p + p { font-size:16px !important; color:var(--muted) !important; }\n#ok3d-web .signature strong { font-size:16px !important; color:var(--text) !important; }\n#ok3d-web .signature small { font-size:13px !important; color:var(--muted) !important; }\n#ok3d-web .stat strong { font-size:48px !important; line-height:1.2 !important; font-weight:500 !important; color:var(--text) !important; }\n#ok3d-web .stat strong span { color:var(--blue) !important; font-family:var(--display) !important; }\n#ok3d-web .stat p { font-size:13px !important; color:var(--muted) !important; }\n#ok3d-web .tool-list { font-size:13px !important; color:#c0c7d7 !important; }\n#ok3d-web .tool-list > span:first-child { color:var(--muted) !important; }\n\n\/* M\u00e9thode *\/\n#ok3d-web .step > span { font-size:13px !important; color:var(--blue) !important; }\n#ok3d-web .step h3 { font-size:23px !important; line-height:1.2 !important; color:var(--text) !important; }\n#ok3d-web .step p { font-size:14px !important; line-height:1.8 !important; color:var(--muted) !important; }\n\n\/* Contact \/ formulaire *\/\n#ok3d-web .contact h2 { font-size:clamp(44px,5vw,76px) !important; }\n#ok3d-web .contact-intro > p { color:var(--muted) !important; }\n#ok3d-web .email-link { font-family:var(--display) !important; font-size:clamp(21px,2.2vw,30px) !important; color:var(--text) !important; }\n#ok3d-web .contact-note { font-size:13px !important; color:#aeb9d0 !important; }\n#ok3d-web .field label { font-size:13px !important; color:#c7cfdf !important; }\n#ok3d-web .field input,#ok3d-web .field select,#ok3d-web .field textarea { font-size:16px !important; line-height:1.4 !important; color:var(--text) !important; background:transparent !important; }\n#ok3d-web .field input::placeholder,#ok3d-web .field textarea::placeholder { color:#838fa7 !important; opacity:1 !important; }\n#ok3d-web .form-submit small,#ok3d-web .form-privacy { color:#aeb9d0 !important; }\n\n\/* Footer *\/\n#ok3d-web .footer-tagline { font-size:14px !important; color:var(--muted) !important; }\n#ok3d-web .footer-bottom { font-size:12px !important; color:var(--muted) !important; }\n\n\/* Mobile : r\u00e9applique les valeurs originales avec !important *\/\n@media(max-width:700px){\n  #ok3d-web .logo{font-size:31px !important}\n  #ok3d-web .nav a{font-size:17px !important}\n  #ok3d-web .hero h1{font-size:clamp(52px,11.4vw,79px) !important}\n  #ok3d-web .hero-copy{font-size:16px !important}\n  #ok3d-web .hero .kicker{font-size:11px !important}\n  #ok3d-web .client-list span{font-size:20px !important}\n  #ok3d-web .client-list .obvious{font-size:17px !important}\n  #ok3d-web .section-head h2,#ok3d-web .about h2{font-size:43px !important}\n  #ok3d-web .project-info h3{font-size:24px !important}\n  #ok3d-web .project-label{font-size:11px !important}\n  #ok3d-web .experience-copy h3{font-size:36px !important}\n  #ok3d-web .experience-copy p{font-size:16px !important}\n  #ok3d-web .about-copy>p{font-size:17px !important}\n  #ok3d-web .stat strong{font-size:37px !important}\n  #ok3d-web .stat p{font-size:12px !important}\n  #ok3d-web .step h3{font-size:22px !important}\n  #ok3d-web .contact h2{font-size:53px !important}\n  #ok3d-web .footer-tagline{font-size:12px !important}\n}\n\n\n\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\n   HEADER + BOUTONS \u2014 finition premium \/ plus vivante\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 *\/\n#ok3d-web .header{\n  position:fixed!important;\n  top:0;left:0;width:100%;\n  z-index:80;\n  background:linear-gradient(180deg,rgba(8,10,16,.18),rgba(8,10,16,0));\n  border-bottom:1px solid rgba(255,255,255,.12);\n  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease;\n}\n#ok3d-web .header.is-scrolled{\n  background:rgba(8,10,16,.72);\n  -webkit-backdrop-filter:blur(18px) saturate(145%);\n  backdrop-filter:blur(18px) saturate(145%);\n  border-bottom-color:rgba(100,140,255,.22);\n  box-shadow:0 10px 34px rgba(0,0,0,.18),0 1px 0 rgba(100,140,255,.06) inset;\n}\n#ok3d-web .header-inner{transition:height .3s ease}\n#ok3d-web .header.is-scrolled .header-inner{height:82px}\n\n\/* vrai logo : m\u00eame pr\u00e9sence que l'ancien mot-symbole *\/\n#ok3d-web .logo{display:flex;align-items:center;flex-shrink:0;line-height:1}\n#ok3d-web .logo img{display:block;width:auto;height:34px;max-width:none;object-fit:contain;transition:transform .3s ease,filter .3s ease}\n#ok3d-web .logo:hover img{transform:translateY(-1px);filter:drop-shadow(0 0 12px rgba(100,140,255,.16))}\n\n\/* navigation : soulignement bleu anim\u00e9, tr\u00e8s discret *\/\n#ok3d-web .nav a{position:relative;padding:10px 0;transition:color .25s ease}\n#ok3d-web .nav a::after{\n  content:\"\";position:absolute;left:0;right:0;bottom:3px;height:1px;\n  background:linear-gradient(90deg,transparent,var(--blue),transparent);\n  transform:scaleX(0);transform-origin:center;opacity:.85;\n  transition:transform .28s cubic-bezier(.2,.8,.2,1);\n}\n#ok3d-web .nav a:hover::after,#ok3d-web .nav a:focus-visible::after{transform:scaleX(1)}\n\n\/* CTA du header : plus premium sans devenir flashy *\/\n#ok3d-web .header-contact{\n  position:relative;overflow:hidden;\n  border-color:rgba(130,164,255,.38);\n  background:linear-gradient(135deg,rgba(100,140,255,.10),rgba(100,140,255,.025));\n  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);\n  transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;\n}\n#ok3d-web .header-contact::before{\n  content:\"\";position:absolute;inset:-60% auto -60% -35%;width:28%;\n  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);\n  transform:skewX(-18deg) translateX(-220%);transition:transform .65s ease;pointer-events:none;\n}\n#ok3d-web .header-contact:hover{\n  transform:translateY(-1px);\n  border-color:rgba(132,166,255,.72);\n  background:linear-gradient(135deg,rgba(100,140,255,.17),rgba(100,140,255,.045));\n  box-shadow:0 8px 28px rgba(48,78,166,.12),inset 0 0 0 1px rgba(255,255,255,.035);\n}\n#ok3d-web .header-contact:hover::before{transform:skewX(-18deg) translateX(620%)}\n\n\/* boutons : plus de mati\u00e8re et micro-mouvement *\/\n#ok3d-web .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease}\n#ok3d-web .btn::before{\n  content:\"\";position:absolute;inset:0;z-index:-1;\n  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.10) 48%,transparent 75%);\n  transform:translateX(-130%);transition:transform .55s ease;\n}\n#ok3d-web .btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.16)}\n#ok3d-web .btn:hover::before{transform:translateX(130%)}\n#ok3d-web .btn-primary{box-shadow:0 8px 24px rgba(83,127,255,.14)}\n#ok3d-web .btn-primary:hover{box-shadow:0 12px 34px rgba(83,127,255,.25)}\n#ok3d-web .btn .arrow{transition:transform .3s cubic-bezier(.2,.8,.2,1)}\n#ok3d-web .btn:hover .arrow{transform:translate(4px,-4px)}\n\n\/* lien texte : accent anim\u00e9 au lieu d'un simple changement de couleur *\/\n#ok3d-web .text-link{position:relative;border-bottom-color:rgba(255,255,255,.18)}\n#ok3d-web .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}\n#ok3d-web .text-link:hover::after{transform:scaleX(1)}\n\n@media(max-width:1000px){\n  #ok3d-web .logo img{height:33px}\n}\n@media(max-width:700px){\n  #ok3d-web .logo img{height:31px}\n  #ok3d-web .header.is-scrolled .header-inner{height:72px}\n  #ok3d-web .header .nav{top:78px}\n  #ok3d-web .header.is-scrolled .nav{top:72px}\n  #ok3d-web .nav a::after{display:none}\n}\n@media(prefers-reduced-motion:reduce){\n  #ok3d-web .header,#ok3d-web .header-inner,#ok3d-web .logo img,#ok3d-web .nav a::after,#ok3d-web .header-contact,#ok3d-web .header-contact::before,#ok3d-web .btn,#ok3d-web .btn::before{transition:none!important}\n}\n\n\n#ok3d-web [hidden]{display:none!important}\n#ok3d-web [id]{scroll-margin-top:112px}\n#ok3d-web{overflow:clip;isolation:isolate}\n#ok3d-web .header{background:#080a10b8!important;backdrop-filter:blur(12px)}\n#ok3d-web .header .logo img{width:auto!important;height:34px!important;max-width:145px!important}\n#ok3d-web .nav{gap:25px}\n#ok3d-web .nav a[aria-current=\"page\"]{color:#a8bfff!important}\n#ok3d-web .nav a[aria-current=\"page\"]::after{transform:scaleX(1)}\n#ok3d-web .header-inner{min-height:82px}\n#ok3d-web .menu-toggle{min-height:42px;padding-inline:15px}\n#ok3d-web .accent-line{color:#92acff!important;font-family:var(--display)!important}\n#ok3d-web .subtext{color:#aebbd2!important;font-size:17px!important;line-height:1.85!important;margin-top:24px!important;max-width:600px}\n#ok3d-web .expert-hero{\n  padding:170px 0 70px;\n  position:relative;\n  overflow:hidden;\n  isolation:isolate;\n  border-bottom:1px solid var(--line);\n  background:#080a10;\n}\n\/* Halo \u00e0 deux profondeurs : m\u00eame r\u00e9glage que la page 3D. *\/\n#ok3d-web .expert-hero::before,\n#ok3d-web .expert-hero::after{\n  content:\"\";\n  position:absolute;\n  z-index:0;\n  pointer-events:none;\n  border-radius:50%;\n  transform-origin:center;\n  animation-play-state:var(--ok3d-halo-state,running);\n}\n#ok3d-web .expert-hero::before{\n  width:95%;\n  height:125%;\n  right:-25%;\n  top:-37%;\n  background:radial-gradient(\n    ellipse at center,\n    rgba(94,127,211,.28) 0%,\n    rgba(64,94,169,.17) 30%,\n    rgba(33,54,103,.07) 51%,\n    transparent 71%\n  );\n  opacity:.9;\n  animation-name:ok3d-halo-primary;\n  animation-duration:26s;\n  animation-timing-function:cubic-bezier(.45,0,.55,1);\n  animation-iteration-count:infinite;\n  animation-direction:alternate;\n}\n#ok3d-web .expert-hero::after{\n  width:76%;\n  height:100%;\n  left:-13%;\n  bottom:-48%;\n  background:radial-gradient(\n    ellipse at center,\n    rgba(66,100,173,.15) 0%,\n    rgba(47,67,131,.085) 34%,\n    transparent 70%\n  );\n  opacity:.65;\n  animation-name:ok3d-halo-secondary;\n  animation-duration:34s;\n  animation-timing-function:cubic-bezier(.45,0,.55,1);\n  animation-iteration-count:infinite;\n  animation-direction:alternate;\n}\n#ok3d-web .expert-hero>.wrap{\n  position:relative;\n  z-index:1;\n}\n@keyframes ok3d-halo-primary{\n  0%{transform:translate3d(0,0,0) scale(1);opacity:.82}\n  50%{transform:translate3d(-7%,8%,0) scale(1.08);opacity:1}\n  100%{transform:translate3d(-14%,3%,0) scale(1.025);opacity:.88}\n}\n@keyframes ok3d-halo-secondary{\n  0%{transform:translate3d(0,0,0) scale(.96);opacity:.58}\n  50%{transform:translate3d(9%,-9%,0) scale(1.10);opacity:.85}\n  100%{transform:translate3d(17%,-3%,0) scale(1.02);opacity:.65}\n}\n@media(max-width:700px){\n  #ok3d-web .expert-hero::before{\n    width:150%;\n    height:76%;\n    right:-64%;\n    top:-12%;\n    animation-duration:32s;\n  }\n  #ok3d-web .expert-hero::after{\n    width:145%;\n    height:65%;\n    left:-68%;\n    bottom:-22%;\n    animation-duration:40s;\n  }\n}\n@media(prefers-reduced-motion:reduce){\n  #ok3d-web .expert-hero::before,\n  #ok3d-web .expert-hero::after{\n    animation:none!important;\n    transform:none!important;\n  }\n}\n#ok3d-web .expert-hero-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center}\n#ok3d-web .expert-title{font-size:clamp(52px,5.65vw,84px)!important;line-height:1.04!important;letter-spacing:-.065em!important;margin-top:24px!important;overflow-wrap:normal}\n#ok3d-web .expert-actions{display:flex;flex-wrap:wrap;gap:15px;align-items:center;margin-top:32px}\n#ok3d-web .expert-visual{min-width:0;position:relative;border:1px solid #ffffff25;border-radius:7px;background:#0d1423;overflow:hidden;box-shadow:0 25px 75px #0004}\n#ok3d-web .visual-header{display:flex;justify-content:space-between;gap:15px;padding:14px 19px;border-bottom:1px solid #ffffff16;font-size:12px;color:#9eafd0}\n#ok3d-web .visual-header span{font-size:12px!important;letter-spacing:.07em}\n#ok3d-web .expert-picture{height:405px;position:relative;background:#111828;overflow:hidden;display:flex;align-items:center;justify-content:center}\n#ok3d-web .expert-picture img{width:100%;height:100%;object-fit:cover;transition:opacity .3s,transform .7s}\n#ok3d-web .expert-picture img.contain{object-fit:contain;padding:25px}\n#ok3d-web .visual-tabs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;border-top:1px solid #ffffff17;padding:12px}\n#ok3d-web .visual-tabs button{background:transparent;border:1px solid transparent;border-radius:3px;padding:8px 13px;font-size:13px;min-height:39px;color:#aebeda!important}\n#ok3d-web .visual-tabs button[aria-pressed=\"true\"]{background:#6e93ff18;border-color:#91acff42;color:#e2ebff!important}\n#ok3d-web .visual-caption{padding:16px 19px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;color:#c5d3ed}\n#ok3d-web .visual-caption button{background:none;border:0;padding:4px;color:#aac1ff!important;font-size:13px}\n#ok3d-web .expert-strip{display:flex;gap:25px;flex-wrap:wrap;padding-top:38px;color:#9aacce;font-size:12px;letter-spacing:.08em}\n#ok3d-web .expert-strip span+span{border-left:1px solid #ffffff25;padding-left:25px}\n#ok3d-web .section-head h2{margin-top:18px!important}\n#ok3d-web .section-head>p{max-width:370px;color:#aebbd2!important;font-size:16px;line-height:1.85}\n#ok3d-web .offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--line)}\n#ok3d-web .offer{padding:32px 25px 10px 0;min-width:0}\n#ok3d-web .offer .offer-number{font-family:var(--display)!important;color:#90aeff;font-size:13px}\n#ok3d-web .offer h3{font-size:29px!important;line-height:1.18!important;letter-spacing:-.045em!important;margin-top:27px!important}\n#ok3d-web .offer p{font-size:16px!important;line-height:1.8!important;color:#a7b5ce!important;margin-top:17px!important}\n#ok3d-web .offer ul{list-style:none;margin:22px 0 0;padding:0}\n#ok3d-web .offer li{border-top:1px solid #ffffff14;padding:9px 0;color:#becbe0;font-size:14px;line-height:1.6}\n#ok3d-web .selected-section{background:#0d121d;border-block:1px solid #ffffff18}\n#ok3d-web .selected-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}\n#ok3d-web .selected-card{min-width:0;border:1px solid #ffffff1a;border-radius:5px;background:#0a0f19;overflow:hidden;transition:border-color .3s,transform .3s}\n#ok3d-web .selected-card:hover{border-color:#8faeff88;transform:translateY(-4px)}\n#ok3d-web .selected-card a{display:block;height:100%}\n#ok3d-web .selected-media{height:275px;position:relative;background:#151e2e;overflow:hidden}\n#ok3d-web .selected-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s}\n#ok3d-web .selected-media.contain img{object-fit:contain;padding:24px}\n#ok3d-web .selected-card:hover img{transform:scale(1.035)}\n#ok3d-web .selected-media span{position:absolute;bottom:15px;right:15px;background:#080e1bc9;border:1px solid #ffffff65;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;color:white}\n#ok3d-web .selected-copy{padding:22px}\n#ok3d-web .selected-copy small{color:#9bb1d9;font-size:12px;line-height:1.65;display:block}\n#ok3d-web .selected-copy h3{font-size:25px!important;line-height:1.2!important;letter-spacing:-.04em!important;margin-top:10px!important}\n#ok3d-web .selected-copy p{color:#9eadc6!important;font-size:14px!important;line-height:1.75!important;margin-top:12px!important}\n#ok3d-web .approach-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:85px;align-items:start}\n#ok3d-web .approach-heading{position:sticky;top:125px}\n#ok3d-web .approach-heading h2{font-size:clamp(36px,4vw,56px)!important;line-height:1.09!important;letter-spacing:-.055em!important;margin-top:22px!important}\n#ok3d-web .approach-step{display:grid;grid-template-columns:40px 1fr;gap:23px;border-top:1px solid #ffffff24;padding:26px 0}\n#ok3d-web .approach-step>span{font-size:13px;color:#8faeff;font-family:var(--display)!important;padding-top:4px}\n#ok3d-web .approach-step h3{font-size:25px!important;line-height:1.25!important;letter-spacing:-.035em!important}\n#ok3d-web .approach-step p{font-size:15px!important;line-height:1.85!important;color:#a5b5ce!important;margin-top:10px!important}\n#ok3d-web .contact h2{margin-top:22px!important;margin-bottom:25px!important}\n#ok3d-web .contact-intro>p:not(.kicker){font-size:16px!important;line-height:1.85!important;color:#a9b9d3!important}\n#ok3d-web .form-grid{gap:26px 22px}\n#ok3d-web .field input,#ok3d-web .field select,#ok3d-web .field textarea{box-shadow:none!important;border:0!important;border-bottom:1px solid #ffffff40!important;border-radius:0!important;padding:12px 0 15px!important;min-height:49px}\n#ok3d-web .field textarea{min-height:115px}\n#ok3d-web .form-status{margin-top:16px!important;line-height:1.8!important}\n#ok3d-web .form-status.error{color:#ffc4c4!important}\n#ok3d-web .form-status.success{color:#b6d3ff!important}\n#ok3d-web .form-privacy{margin-top:18px!important;font-size:12px!important}\n#ok3d-web .form-status a{text-decoration:underline!important}\n#ok3d-web .field input::placeholder,#ok3d-web .field textarea::placeholder{color:#96a7c4!important}\n#ok3d-web .page-dialog{width:min(1100px,94vw);max-width:none;max-height:91svh;margin:auto;padding:0;border:1px solid #819acc6b;border-radius:7px;overflow:auto;background:#0b111e;color:#edf2ff;box-shadow:0 30px 100px #0009}\n#ok3d-web .page-dialog::backdrop{background:#020510ed;backdrop-filter:blur(12px)}\n#ok3d-web .dialog-top{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:20px;background:#0c1220ed;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff20;padding:13px 20px}\n#ok3d-web .dialog-top>span{font-size:12px;color:#abbeda;letter-spacing:.1em}\n#ok3d-web .close-dialog{border:1px solid #ffffff40;border-radius:3px;background:transparent;width:42px;height:42px;flex-shrink:0;font-size:25px}\n#ok3d-web .modal-media{height:min(53svh,540px);background:#080b12;display:flex;align-items:center;justify-content:center}\n#ok3d-web .modal-media iframe,#ok3d-web .modal-media img{width:100%;height:100%;object-fit:contain;border:0;display:block}\n#ok3d-web .modal-copy{padding:30px 35px}\n#ok3d-web .modal-tag{font-size:12px!important;letter-spacing:.08em!important;color:#97b0db!important;text-transform:uppercase}\n#ok3d-web .modal-title{font-size:clamp(30px,3.1vw,44px)!important;line-height:1.15!important;letter-spacing:-.045em!important;margin-top:12px!important}\n#ok3d-web .modal-desc{font-size:17px!important;line-height:1.85!important;color:#aebed6!important;margin-top:20px!important}\n#ok3d-web .modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}\n#ok3d-web .modal-nav{padding:18px 30px;border-top:1px solid #ffffff20;display:flex;justify-content:space-between;align-items:center;gap:18px}\n#ok3d-web .modal-nav button{background:none;border:0;padding:6px 0;color:#b6cbed!important;font-size:14px}\n#ok3d-web .modal-nav span{font-size:12px;color:#a4b9da}\n#ok3d-web .other-expertises{border-top:1px solid #ffffff1a;padding:28px 0}\n#ok3d-web .other-expertises .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}\n#ok3d-web .other-expertises a{font-size:14px;color:#b6c9ed!important;border-bottom:1px solid #7298ff55;padding-bottom:5px}\n#ok3d-web .reveal{transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay,0ms)}\n#ok3d-web .reveal.pending{opacity:0;transform:translateY(20px)}\n#ok3d-web .site-demo{padding:20px;width:100%;display:flex;justify-content:center;align-items:center;height:405px;background:radial-gradient(ellipse at 60% 75%,#2b427c66,transparent 75%)}\n#ok3d-web .site-window{width:100%;border:1px solid #adc3ee66;border-radius:8px;overflow:hidden;background:#080d18;transition:width .6s cubic-bezier(.2,.8,.2,1),border-radius .6s;box-shadow:0 20px 45px #0007}\n#ok3d-web .site-window-bar{height:28px;padding:0 12px;background:#1d2941;display:flex;justify-content:space-between;align-items:center;color:#a7b8d4;font-size:10px}\n#ok3d-web .site-window-nav{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}\n#ok3d-web .site-window-nav img{width:65px;height:auto}\n#ok3d-web .site-window-nav>span{font-size:9px;color:#b4c2d8}\n#ok3d-web .site-window-content{position:relative;isolation:isolate;height:235px;padding:22px;overflow:hidden}\n#ok3d-web .site-window-content>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}\n#ok3d-web .site-window-content::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050b17e8,#050b1770);z-index:-1}\n#ok3d-web .site-window-content small{font-size:8px;color:#c0cee9;letter-spacing:.08em}\n#ok3d-web .site-window-content strong{display:block;font-family:var(--display)!important;font-size:43px;line-height:1.02;letter-spacing:-.065em;margin-top:15px}\n#ok3d-web .site-window-content strong em{color:#99b4ff;font-family:var(--display)!important;font-style:normal}\n#ok3d-web .site-window-content .mini-cta{display:inline-block;font-size:9px;padding:7px 10px;background:#537fff;border-radius:3px;margin-top:20px}\n#ok3d-web .site-demo[data-format=\"mobile\"] .site-window{width:200px;border-radius:18px}\n#ok3d-web .site-demo[data-format=\"mobile\"] .site-window-nav{padding-inline:15px}\n#ok3d-web .site-demo[data-format=\"mobile\"] .site-window-nav>span{display:none}\n#ok3d-web .site-demo[data-format=\"mobile\"] .site-window-content{padding:22px 15px}\n#ok3d-web .site-demo[data-format=\"mobile\"] .site-window-content strong{font-size:36px}\n#ok3d-web .site-demo[data-format=\"mobile\"] .site-window-nav::after{content:'\u2630';font-size:15px}\n#ok3d-web .portfolio-intro{padding:165px 0 65px;border-bottom:1px solid #ffffff20;background:radial-gradient(ellipse at 85% 15%,#23396655,transparent 65%)}\n#ok3d-web .portfolio-intro .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:60px;align-items:end}\n#ok3d-web .portfolio-intro h1{font-size:clamp(56px,6.7vw,96px)!important;line-height:1.04!important;letter-spacing:-.065em!important;margin-top:22px!important}\n#ok3d-web .portfolio-meta{display:flex;gap:25px;flex-wrap:wrap;border-top:1px solid #ffffff22;padding-top:22px;margin-top:25px;font-size:13px;color:#9fb1d1}\n#ok3d-web .portfolio-meta strong{font-family:var(--display)!important;color:#e1ebff;font-size:27px;margin-right:8px}\n#ok3d-web .filter-bar{position:sticky;top:82px;z-index:15;border-bottom:1px solid #ffffff1b;background:#080a10ed;backdrop-filter:blur(20px)}\n#ok3d-web .filter-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:16px;padding-bottom:16px}\n#ok3d-web .filters{display:flex;flex-wrap:wrap;gap:5px}\n#ok3d-web .filters button{padding:10px 14px;min-height:42px;background:none;border:1px solid transparent;border-radius:4px;color:#a9bad5!important;font-size:14px}\n#ok3d-web .filters button span{font-size:11px;opacity:.65;margin-left:8px}\n#ok3d-web .filters button[aria-pressed=\"true\"]{background:#7498ff1b;border-color:#759bff66;color:#e0eaff!important}\n#ok3d-web .result-count{font-size:12px!important;color:#9eb1d2!important;white-space:nowrap}\n#ok3d-web .portfolio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 24px;padding-top:38px;padding-bottom:75px;align-items:stretch}\n#ok3d-web .portfolio-card{grid-column:span 4;min-width:0;border:1px solid #ffffff18;border-radius:6px;background:#0d1320;overflow:hidden;transition:border-color .35s,box-shadow .35s}\n#ok3d-web .portfolio-card[data-shape=\"feature\"]{grid-column:span 7}\n#ok3d-web .portfolio-card[data-shape=\"portrait\"]{grid-column:span 5}\n#ok3d-web .portfolio-card[data-shape=\"full\"]{grid-column:span 12}\n#ok3d-web .portfolio-card[data-shape=\"half\"]{grid-column:span 6}\n#ok3d-web .portfolio-card:hover{border-color:#81a3ff88;box-shadow:0 15px 50px #0004}\n#ok3d-web .portfolio-card>a{display:flex;flex-direction:column;height:100%}\n#ok3d-web .p-media{height:280px;position:relative;overflow:hidden;background:#141d2e}\n#ok3d-web .portfolio-card[data-shape=\"feature\"] .p-media,#ok3d-web .portfolio-card[data-shape=\"portrait\"] .p-media{height:390px}\n#ok3d-web .portfolio-card[data-shape=\"full\"] .p-media{height:430px}\n#ok3d-web .p-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}\n#ok3d-web .portfolio-card:hover .p-media img{transform:scale(1.035)}\n#ok3d-web .p-kind{position:absolute;top:16px;left:16px;max-width:calc(100% - 32px);font-size:11px;padding:6px 10px;background:#080f20d9;border:1px solid #ffffff30;border-radius:3px;backdrop-filter:blur(12px);color:#d5e2fa;z-index:2}\n#ok3d-web .p-open{position:absolute;bottom:16px;right:16px;width:42px;height:42px;border:1px solid #ffffff70;border-radius:50%;display:grid;place-items:center;background:#0b1325ab;backdrop-filter:blur(10px);font-size:24px;transition:transform .3s,background .3s;z-index:2}\n#ok3d-web .portfolio-card:hover .p-open{transform:rotate(45deg);background:#547eff}\n#ok3d-web .p-film{position:absolute;bottom:22px;left:17px;padding:5px 9px;border-radius:3px;background:#080e1ac9;font-size:11px;color:white}\n#ok3d-web .p-copy{padding:23px;flex:1}\n#ok3d-web .p-tag{font-size:11px!important;letter-spacing:.07em!important;line-height:1.6!important;text-transform:uppercase;color:#95abd2!important}\n#ok3d-web .p-copy h2{font-size:24px!important;line-height:1.22!important;letter-spacing:-.045em!important;margin-top:10px!important}\n#ok3d-web .p-copy .p-desc{font-size:14px!important;line-height:1.8!important;color:#a6b6ce!important;margin-top:13px!important}\n#ok3d-web .text-card .p-media{display:flex;flex-direction:column;justify-content:center;padding:50px 30px 35px;background:linear-gradient(130deg,#203250,#0c1422);border-bottom:1px solid #ffffff15}\n#ok3d-web .type-project{font-family:var(--display)!important;font-size:clamp(34px,3.5vw,54px);line-height:1;letter-spacing:-.065em;color:#baccf0;overflow-wrap:anywhere}\n#ok3d-web .type-sub{font-size:12px;letter-spacing:.14em;color:#7f9cc9;margin-top:24px}\n#ok3d-web .portfolio-cta{padding:75px 0;background:radial-gradient(ellipse at 90% 100%,#22396166,transparent 65%),#0d1420;border-block:1px solid #ffffff1c}\n#ok3d-web .portfolio-cta .wrap{display:flex;justify-content:space-between;gap:40px;align-items:center}\n#ok3d-web .portfolio-cta h2{font-size:clamp(36px,4.1vw,60px)!important;line-height:1.12!important;letter-spacing:-.055em!important;margin-top:20px!important}\n#ok3d-web .portfolio-cta p:not(.kicker){margin-top:20px!important;color:#b1c1d8!important;line-height:1.8!important;font-size:16px!important}\n#ok3d-web .header .nav a{white-space:nowrap}\n@media(min-width:1001px){#ok3d-web .header .menu-toggle{display:none}}\n@media(max-width:1100px){#ok3d-web .expert-hero-inner{gap:38px}#ok3d-web .expert-title{font-size:clamp(46px,5.5vw,66px)!important}#ok3d-web .expert-picture,#ok3d-web .site-demo{height:350px}#ok3d-web .selected-media{height:230px}#ok3d-web .p-media{height:240px}#ok3d-web .portfolio-card[data-shape=\"feature\"] .p-media,#ok3d-web .portfolio-card[data-shape=\"portrait\"] .p-media{height:330px}#ok3d-web .p-copy{padding:19px}#ok3d-web .p-copy h2{font-size:22px!important}}\n@media(max-width:1000px){#ok3d-web .header .nav{display:none;position:absolute;top:94px;left:0;right:0;padding:18px var(--gutter);background:#0c1322f5;border-bottom:1px solid #ffffff25;backdrop-filter:blur(18px);flex-direction:column;align-items:stretch;gap:0}#ok3d-web .header .nav.open{display:flex}#ok3d-web .header .nav a{font-size:17px!important;padding-block:12px}#ok3d-web .header.is-scrolled .nav{top:82px}#ok3d-web .header .menu-toggle{display:block}#ok3d-web .header-contact{display:none}#ok3d-web .expert-hero-inner{grid-template-columns:1fr;gap:42px}#ok3d-web .expert-title{font-size:clamp(52px,8.5vw,80px)!important}#ok3d-web .expert-visual{max-width:690px;width:100%}#ok3d-web .expert-picture,#ok3d-web .site-demo{height:430px}#ok3d-web .offer-grid{gap:20px}#ok3d-web .offer{padding-right:5px}#ok3d-web .offer h3{font-size:25px!important}#ok3d-web .approach-grid{gap:50px}#ok3d-web .portfolio-intro .wrap{gap:35px}#ok3d-web .portfolio-intro h1{font-size:clamp(50px,7vw,72px)!important}}\n@media(max-width:800px){#ok3d-web .portfolio-intro .wrap{grid-template-columns:1fr;gap:28px}#ok3d-web .portfolio-intro{padding-top:150px}#ok3d-web .portfolio-intro .subtext{max-width:590px}#ok3d-web .filter-inner{display:block}#ok3d-web .result-count{margin-top:10px!important}#ok3d-web .portfolio-card,#ok3d-web .portfolio-card[data-shape=\"feature\"],#ok3d-web .portfolio-card[data-shape=\"portrait\"],#ok3d-web .portfolio-card[data-shape=\"half\"]{grid-column:span 6}#ok3d-web .portfolio-card[data-shape=\"full\"]{grid-column:span 12}#ok3d-web .portfolio-card .p-media,#ok3d-web .portfolio-card[data-shape] .p-media{height:280px}#ok3d-web .portfolio-card[data-shape=\"full\"] .p-media{height:350px}#ok3d-web .selected-grid{grid-template-columns:1fr 1fr}#ok3d-web .selected-card:last-child{grid-column:span 2}#ok3d-web .selected-card:last-child .selected-media{height:320px}}\n@media(max-width:700px){#ok3d-web .header-inner{min-height:72px;height:78px}#ok3d-web .header .logo img{height:31px!important;max-width:132px!important}#ok3d-web .header .nav{top:78px}#ok3d-web .header.is-scrolled .nav{top:72px}#ok3d-web .header .nav a::after{display:none}#ok3d-web .expert-hero{padding-top:130px;padding-bottom:45px}#ok3d-web .expert-title{font-size:clamp(42px,10.6vw,67px)!important}#ok3d-web .subtext{font-size:16px!important;margin-top:22px!important}#ok3d-web .expert-actions{gap:12px}#ok3d-web .expert-actions .btn{padding-inline:19px;gap:20px}#ok3d-web .expert-picture,#ok3d-web .site-demo{height:340px}#ok3d-web .expert-strip{font-size:11px;gap:15px;padding-top:25px}#ok3d-web .expert-strip span+span{padding-left:15px}#ok3d-web .section-head h2{font-size:clamp(34px,10vw,43px)!important}#ok3d-web .section-head>p{margin-top:20px!important}#ok3d-web .offer-grid{grid-template-columns:1fr;gap:0}#ok3d-web .offer{padding:30px 0;border-bottom:1px solid #ffffff18}#ok3d-web .offer h3{font-size:29px!important;margin-top:17px!important}#ok3d-web .selected-grid{display:block}#ok3d-web .selected-card{margin-bottom:22px}#ok3d-web .selected-card .selected-media,#ok3d-web .selected-card:last-child .selected-media{height:280px}#ok3d-web .approach-grid{grid-template-columns:1fr;gap:30px}#ok3d-web .approach-heading{position:static}#ok3d-web .approach-heading h2{font-size:43px!important}#ok3d-web .approach-step{gap:16px}#ok3d-web .form-grid{grid-template-columns:1fr}#ok3d-web .field.full{grid-column:auto}#ok3d-web .contact h2{font-size:clamp(38px,11vw,53px)!important}#ok3d-web .contact-grid{gap:40px}#ok3d-web .page-dialog{width:96vw;max-height:94svh}#ok3d-web .modal-media{height:34svh;min-height:175px}#ok3d-web .modal-copy{padding:25px 22px}#ok3d-web .modal-title{font-size:30px!important}#ok3d-web .modal-desc{font-size:16px!important}#ok3d-web .modal-actions{flex-direction:column}#ok3d-web .modal-nav{padding:14px 18px;gap:12px}#ok3d-web .modal-nav button{font-size:12px}#ok3d-web .dialog-top{padding:10px 15px}#ok3d-web .dialog-top>span{font-size:10px}#ok3d-web .portfolio-intro{padding-top:128px;padding-bottom:40px}#ok3d-web .portfolio-intro h1{font-size:clamp(45px,12vw,68px)!important}#ok3d-web .filter-bar{top:72px}#ok3d-web .filters button{font-size:12px;padding:8px 10px;min-height:38px}#ok3d-web .filter-inner{padding-block:12px}#ok3d-web .portfolio-cta .wrap{align-items:start;flex-direction:column}#ok3d-web .portfolio-cta{padding-block:55px}#ok3d-web .site-window-content strong{font-size:39px}}\n@media(max-width:540px){#ok3d-web .portfolio-grid{display:block;padding-top:25px;padding-bottom:40px}#ok3d-web .portfolio-card{margin-bottom:24px}#ok3d-web .portfolio-card .p-media,#ok3d-web .portfolio-card[data-shape] .p-media{height:auto;aspect-ratio:1.22}#ok3d-web .p-copy{padding:23px}#ok3d-web .p-copy h2{font-size:24px!important}#ok3d-web .p-copy .p-desc{font-size:15px!important}#ok3d-web .type-project{font-size:45px}#ok3d-web .portfolio-meta{gap:20px}#ok3d-web .visual-tabs button{font-size:12px;padding-inline:11px}#ok3d-web .visual-caption{padding-inline:15px;gap:10px}#ok3d-web .visual-caption>span{font-size:12px}#ok3d-web .visual-caption button{font-size:12px}#ok3d-web .expert-picture{height:300px}}\n@media(max-width:359px){#ok3d-web .expert-title{font-size:40px!important}#ok3d-web .expert-picture,#ok3d-web .site-demo{height:290px}#ok3d-web .visual-header{padding-inline:14px}#ok3d-web .visual-header span{font-size:10px!important}#ok3d-web .site-window-content{padding:18px 14px}#ok3d-web .site-window-content strong{font-size:32px}#ok3d-web .expert-strip{gap:9px}#ok3d-web .expert-strip span+span{padding-left:9px}#ok3d-web .footer-tagline{width:100%}#ok3d-web .other-expertises .wrap{flex-direction:column}}\n@media(prefers-reduced-motion:reduce){#ok3d-web *,#ok3d-web *::before,#ok3d-web *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#ok3d-web .reveal.pending{opacity:1;transform:none}}\n<\/style>\n<script>(()=>{'use strict';\nconst root=document.getElementById('ok3d-web');if(!root||root.dataset.initialized)return;root.dataset.initialized='true';\nconst $=s=>root.querySelector(s),$$=s=>[...root.querySelectorAll(s)];\nconst data=JSON.parse($('[data-projects]').textContent),reduced=matchMedia('(prefers-reduced-motion: reduce)');\n$$('[data-year]').forEach(el=>el.textContent=new Date().getFullYear());\nif('IntersectionObserver'in window&&!reduced.matches){const observer=new IntersectionObserver(entries=>entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.remove('pending');observer.unobserve(entry.target);}}),{threshold:.06});$$('.reveal').forEach(el=>{el.classList.add('pending');observer.observe(el);});}\n\n$$('[data-visual]').forEach(button=>button.addEventListener('click',()=>{const p=data.find(p=>p.slug===button.dataset.visual);if(!p)return;$$('[data-visual]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));const img=$('[data-hero-image]');img.src=p.image;img.alt=p.title;img.classList.toggle('contain',['orora','be2be'].includes(p.slug));$('[data-caption]').textContent=p.title;const film=$('[data-hero-film]');film.hidden=!p.video;film.dataset.open=p.slug;}));\n$$('[data-format-button]').forEach(button=>button.addEventListener('click',()=>{$('.site-demo').dataset.format=button.dataset.formatButton;$$('[data-format-button]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));}));\nlet activeFilter='all',currentSlug=null,previousOverflow='',opener=null;\nconst dialog=$('.page-dialog'),media=$('.modal-media');\nconst visible=()=>data.filter(p=>activeFilter==='all'||p.cat.includes(activeFilter));\nfunction renderProject(slug){const p=data.find(p=>p.slug===slug);if(!p)return false;currentSlug=slug;$('.modal-title').textContent=p.title;$('.modal-desc').textContent=p.desc;$('.modal-tag').textContent=p.tag;media.replaceChildren();media.hidden=!p.image;if(p.image){const img=document.createElement('img');img.src=p.image;img.alt=p.title;media.append(img);}const film=$('[data-film]');film.hidden=!p.video;film.href=p.video?'https:\/\/vimeo.com\/'+p.video:'#';const detail=$('[data-detail]');detail.hidden=!p.external;detail.href=p.external||'#';const list=visible(),index=list.findIndex(q=>q.slug===slug);$('[data-position]').textContent=(index+1)+' \/ '+list.length;dialog.scrollTop=0;return true;}\nfunction openProject(slug,trigger,updateURL=true){if(!renderProject(slug))return;if(!dialog.open){opener=trigger||document.activeElement;previousOverflow=document.body.style.overflow;document.body.style.overflow='hidden';dialog.showModal();}if(root.dataset.kind==='portfolio'&&updateURL)history.replaceState(null,'','#'+slug);}\nfunction restore(){media.replaceChildren();document.body.style.overflow=previousOverflow;if(root.dataset.kind==='portfolio'&&data.some(p=>'#'+p.slug===location.hash))history.replaceState(null,'',location.pathname+location.search);if(opener&&opener.isConnected)opener.focus({preventScroll:true});}\ndialog.addEventListener('close',restore);$('.close-dialog').addEventListener('click',()=>dialog.close());dialog.addEventListener('click',e=>{if(e.target===dialog){const b=dialog.getBoundingClientRect();if(e.clientX<b.left||e.clientX>b.right||e.clientY<b.top||e.clientY>b.bottom)dialog.close();}});\nroot.addEventListener('click',e=>{const trigger=e.target.closest('[data-open]');if(!trigger)return;e.preventDefault();openProject(trigger.dataset.open,trigger);});\nfunction adjacent(direction){const list=visible(),i=list.findIndex(p=>p.slug===currentSlug);const p=list[(i+direction+list.length)%list.length];openProject(p.slug,opener);}\n$('[data-prev]').addEventListener('click',()=>adjacent(-1));$('[data-next]').addEventListener('click',()=>adjacent(1));dialog.addEventListener('keydown',e=>{if(e.key==='ArrowLeft'||e.key==='ArrowRight'){e.preventDefault();adjacent(e.key==='ArrowLeft'?-1:1);}});\n$('[data-film]').addEventListener('click',e=>{e.preventDefault();const p=data.find(p=>p.slug===currentSlug);if(!p?.video)return;media.hidden=false;const frame=document.createElement('iframe');frame.src='https:\/\/player.vimeo.com\/video\/'+p.video+'?autoplay=1&dnt=1';frame.title=p.title+' \u2014 film';frame.allow='autoplay; fullscreen; picture-in-picture';frame.allowFullscreen=true;media.replaceChildren(frame);});\n$$('[data-filter]').forEach(button=>button.addEventListener('click',()=>{activeFilter=button.dataset.filter;$$('[data-filter]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));$$('.portfolio-card').forEach(card=>{card.hidden=activeFilter!=='all'&&!card.dataset.categories.split(' ').includes(activeFilter);card.classList.remove('pending');if(activeFilter!=='all')card.dataset.shape='half';else card.dataset.shape=card.dataset.originalShape;});$('[data-count]').textContent=visible().length+' projets';}));\nif(root.dataset.kind==='portfolio'){const hash=()=>{let slug;try{slug=decodeURIComponent(location.hash.slice(1));}catch{return;}if(data.some(p=>p.slug===slug))openProject(slug,null,false);};hash();addEventListener('hashchange',hash);}\nconst form=$('form[data-brief]');if(form){const status=$('.form-status'),submit=form.querySelector('[type=submit]');form.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(),timer=setTimeout(()=>controller.abort(),15000);try{const response=await fetch('https:\/\/www.ok3d.fr\/wp-json\/ok3d\/v1\/devis',{method:'POST',headers:{'Content-Type':'application\/json'},body:JSON.stringify(payload),signal:controller.signal});const result=await response.json();if(!response.ok||!result.success)throw new Error('Envoi non confirm\u00e9');status.className='form-status success';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.href='mailto:contact@ok3d.fr?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(timer);submit.disabled=false;submit.innerHTML=initial;}});}\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Aller au contenu Expertise \/ Webdesign Votre marque.Une vraiepr\u00e9sence digitale. Un site doit donner envie de rester et rendre la suite \u00e9vidente. Je con\u00e7ois des exp\u00e9riences web sur mesure, pens\u00e9es pour vos contenus, vos visiteurs et tous leurs \u00e9crans. Parlons de votre projet \u2197Voir les r\u00e9alisations \u2193UNE EXP\u00c9RIENCE, TOUS LES \u00c9CRANS\u2197\u25cf \u25cf \u25cfok3d.frProjets &nbsp; Expertises [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14899","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/pages\/14899","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=14899"}],"version-history":[{"count":30,"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/pages\/14899\/revisions"}],"predecessor-version":[{"id":15334,"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/pages\/14899\/revisions\/15334"}],"wp:attachment":[{"href":"https:\/\/www.ok3d.fr\/en\/wp-json\/wp\/v2\/media?parent=14899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}