{"id":2993,"date":"2026-08-14T09:27:18","date_gmt":"2026-08-14T07:27:18","guid":{"rendered":"https:\/\/www.sunsplash.fr\/?page_id=2993"},"modified":"2026-08-17T10:21:20","modified_gmt":"2026-08-17T08:21:20","slug":"owlshake-2","status":"publish","type":"page","link":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/","title":{"rendered":"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2993\" class=\"elementor elementor-2993\">\n\t\t\t\t<div class=\"elementor-element elementor-element-669ea8bb e-con-full e-flex e-con e-parent\" data-id=\"669ea8bb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ab3feab elementor-widget elementor-widget-html\" data-id=\"4ab3feab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SUNSPLASH \u2014 Hero \u00e9tude de cas Ocean Days (fond sombre)\r\n     Scop\u00e9 sous .ss-od-hero.\r\n\r\n     Conteneur Elementor : padding 0 \u00b7 marge 0 \u00b7 pleine largeur.\r\n     TITRE \u2014 la page porte D\u00c9J\u00c0 un <h1> (titre de page Astra).\r\n     Ce bloc utilise donc un <h2> : un seul h1 par URL.\r\n     L'aria-label a \u00e9t\u00e9 retir\u00e9 : il rempla\u00e7ait le texte r\u00e9el du\r\n     titre pour les lecteurs d'\u00e9cran, alors qu'il est lisible.\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Instrument+Sans:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.ss-od-hero{\r\n  --clay-000:#F1EFE9;\r\n  --ink:#16181C;\r\n  --ink-deep:#0E0F12;\r\n  --ink-floor:#1C1F26;\r\n  --k-warm:#C4462A;\r\n  --k-warm-hover:#D65A3D;\r\n\r\n  --ss-display:\"Bricolage Grotesque\",system-ui,-apple-system,sans-serif;\r\n  --ss-body:\"Instrument Sans\",system-ui,-apple-system,sans-serif;\r\n  --ss-mono:\"IBM Plex Mono\",ui-monospace,SFMono-Regular,monospace;\r\n\r\n  --pad:clamp(20px,5vw,72px);\r\n  --maxw:1280px;\r\n\r\n  position:relative;display:flex !important;align-items:center;overflow:hidden;\r\n  width:100%;\r\n  padding-block:clamp(80px,15vh,180px) clamp(56px,8vh,90px);\r\n  margin:0;color:var(--clay-000);\r\n  font-family:var(--ss-body);line-height:1.62;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n.ss-od-hero *{box-sizing:border-box}\r\n.ss-od-hero h1,.ss-od-hero h2,.ss-od-hero p,.ss-od-hero span{margin:0;padding:0}\r\n\r\n\/* ---------- D\u00e9cor ---------- *\/\r\n.ss-od-hero .cyc{position:absolute;inset:0;z-index:0;\r\n  background:linear-gradient(180deg,var(--ink-deep) 0%,var(--ink) 55%)}\r\n.ss-od-hero .cyc::before{content:\"\";position:absolute;inset:0;\r\n  background:radial-gradient(56% 44% at 78% 8%,rgba(196,70,42,.38),rgba(196,70,42,0) 70%)}\r\n.ss-od-hero .cyc::after{content:\"\";position:absolute;left:-12%;right:-12%;bottom:0;height:44%;\r\n  border-radius:50% 50% 0 0\/100% 100% 0 0;\r\n  background:linear-gradient(180deg,var(--ink-floor),var(--ink-deep));\r\n  box-shadow:0 -40px 80px -40px rgba(0,0,0,.4)}\r\n.ss-od-hero .grid-floor{position:absolute;left:0;right:0;bottom:0;height:36%;z-index:1;opacity:.10;\r\n  background-image:linear-gradient(90deg,#F1EFE9 1px,transparent 1px);\r\n  background-size:64px 100%;\r\n  -webkit-mask-image:linear-gradient(180deg,transparent,#000 58%,transparent);\r\n  mask-image:linear-gradient(180deg,transparent,#000 58%,transparent)}\r\n\r\n.ss-od-hero .wrap{position:relative;z-index:2;width:100%;\r\n  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}\r\n\r\n\/* ---------- Fil d'Ariane ---------- *\/\r\n.ss-od-hero .crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;\r\n  margin-bottom:clamp(22px,4vh,40px)}\r\n.ss-od-hero .crumb a,.ss-od-hero .crumb span{\r\n  font-family:var(--ss-mono,ui-monospace,monospace) !important;\r\n  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}\r\n.ss-od-hero .crumb a{color:rgba(241,239,233,.5);text-decoration:none;transition:color .3s ease}\r\n.ss-od-hero .crumb a:hover{color:var(--clay-000)}\r\n.ss-od-hero .crumb .sep{color:rgba(241,239,233,.3)}\r\n.ss-od-hero .crumb .cur{color:var(--k-warm)}\r\n\r\n\/* ---------- Titre ---------- *\/\r\n.ss-od-hero .hero-eyebrow{display:block;margin-bottom:20px;color:var(--k-warm);\r\n  font-family:var(--ss-mono,ui-monospace,monospace) !important;\r\n  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}\r\n.ss-od-hero h1,.ss-od-hero h2{\r\n  font-family:var(--ss-display,\"Bricolage Grotesque\",system-ui,sans-serif) !important;\r\n  font-weight:800 !important;\r\n  font-size:clamp(48px,9vw,100px) !important;\r\n  line-height:.98 !important;\r\n  letter-spacing:-0.03em !important;\r\n  text-transform:none !important;\r\n  margin:0 !important;padding:0 !important;\r\n  text-align:left !important;\r\n  max-width:12ch;color:var(--clay-000) !important}\r\n.ss-od-hero .line{display:block}\r\n.ss-od-hero .accent{color:var(--clay-000)}\r\n\r\n\/* ---------- Client \/ date ---------- *\/\r\n.ss-od-hero .hero-client{margin-top:clamp(22px,3vh,30px);\r\n  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;\r\n  color:rgba(241,239,233,.7);font-size:15px}\r\n.ss-od-hero .hero-client .dot{width:4px;height:4px;border-radius:50%;\r\n  background:rgba(241,239,233,.4);flex:none}\r\n\/* Lien client : le rouge donne 3,1:1 sur ce fond, insuffisant.\r\n   Le blanc cass\u00e9 porte la lisibilit\u00e9, le soulignement porte\r\n   l'information \u00ab ceci est un lien \u00bb. *\/\r\n.ss-od-hero .hero-client a{\r\n  color:var(--clay-000);text-decoration:none;\r\n  border-bottom:1px solid rgba(241,239,233,.4);\r\n  padding-bottom:1px;\r\n  transition:color .3s ease,border-color .3s ease;\r\n}\r\n.ss-od-hero .hero-client a:hover,\r\n.ss-od-hero .hero-client a:focus{\r\n  color:var(--k-warm-hover) !important;\r\n  border-bottom-color:var(--k-warm-hover) !important;\r\n  background:transparent !important;\r\n}\r\n\r\n.ss-od-hero .lede{margin-top:clamp(20px,3vh,30px);max-width:62ch;\r\n  font-size:clamp(16px,1.28vw,19px);color:rgba(241,239,233,.72)}\r\n\r\n\/* ---------- Boutons ---------- *\/\r\n.ss-od-hero .ctas{margin-top:clamp(28px,4vh,40px);display:flex;flex-wrap:wrap;gap:12px}\r\n.ss-od-hero .btn{\r\n  display:inline-flex;align-items:center;gap:10px;\r\n  padding:14px 24px;border-radius:999px;text-decoration:none;white-space:nowrap;\r\n  font-family:var(--ss-mono,ui-monospace,monospace) !important;\r\n  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;\r\n  transition:background-color .3s ease,border-color .3s ease,color .3s ease}\r\n\/* Blanc pur sur le bouton plein : 4,93:1 contre 4,29:1 avec le\r\n   blanc cass\u00e9 \u2014 seul le blanc pur passe le seuil AA. *\/\r\n.ss-od-hero .btn-warm{background:var(--k-warm);border:1px solid var(--k-warm);color:#FFF}\r\n.ss-od-hero .btn-warm:hover{background:var(--k-warm-hover);border-color:var(--k-warm-hover)}\r\n.ss-od-hero .btn-light{background:transparent;color:var(--clay-000);\r\n  border:1px solid rgba(241,239,233,.4)}\r\n.ss-od-hero .btn-light:hover{background:rgba(241,239,233,.08);border-color:var(--clay-000)}\r\n.ss-od-hero .arw{transition:transform .3s ease}\r\n.ss-od-hero .btn:hover .arw{transform:translateX(5px)}\r\n\r\n\/* ---------- Rep\u00e8res chiffr\u00e9s ----------\r\n   display:contents fait remonter les enfants dans la grille :\r\n   tous les nombres partagent la rang\u00e9e 1, tous les libell\u00e9s la\r\n   rang\u00e9e 2 \u2014 ils restent align\u00e9s quelle que soit la longueur. *\/\r\n.ss-od-hero .hero-stats{\r\n  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;\r\n  grid-template-rows:auto auto;\r\n  column-gap:clamp(14px,3vw,56px);row-gap:clamp(6px,.9vw,10px);\r\n  margin-top:clamp(38px,6vh,60px);padding-top:26px;\r\n  border-top:1px solid rgba(241,239,233,.16)}\r\n.ss-od-hero .stat{display:contents}\r\n.ss-od-hero .stat .n{grid-row:1;align-self:end;\r\n  font-family:var(--ss-display,\"Bricolage Grotesque\",system-ui,sans-serif) !important;\r\n  font-weight:800 !important;\r\n  font-size:clamp(20px,2.8vw,36px);letter-spacing:-0.04em;line-height:1;color:var(--clay-000)}\r\n.ss-od-hero .stat .n sup{font-size:.55em;vertical-align:super;letter-spacing:0}\r\n.ss-od-hero .stat .l{grid-row:2;align-self:start;\r\n  font-family:var(--ss-mono,ui-monospace,monospace) !important;\r\n  font-size:clamp(8.5px,.95vw,10.5px);letter-spacing:clamp(.06em,.12vw,.12em);\r\n  text-transform:uppercase;color:rgba(241,239,233,.55);line-height:1.45;\r\n  overflow-wrap:break-word}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:1040px){.ss-od-hero h1,.ss-od-hero h2{max-width:none}}\r\n@media (max-width:560px){\r\n  .ss-od-hero .grid-floor{background-size:40px 100%}\r\n  .ss-od-hero .btn{padding:13px 18px;font-size:10px;letter-spacing:.1em}\r\n}\r\n\r\n\/* ---------- Mouvement : am\u00e9lioration progressive ----------\r\n   Rien n'est masqu\u00e9 tant que le script n'a pas pos\u00e9 .is-animated. *\/\r\n.ss-od-hero.is-animated .rise{opacity:0;transform:translateY(22px);\r\n  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);\r\n  transition-delay:var(--d,0s)}\r\n.ss-od-hero.is-animated .rise.in{opacity:1;transform:none}\r\n@media (prefers-reduced-motion:reduce){\r\n  .ss-od-hero.is-animated .rise{opacity:1;transform:none;transition:none}\r\n}\r\n.ss-od-hero :focus-visible{outline:2px solid var(--k-warm);outline-offset:4px}\r\n<\/style>\r\n\r\n\r\n<section class=\"ss-od-hero\">\r\n  <div class=\"cyc\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"grid-floor\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"wrap\">\r\n    <nav class=\"crumb rise\" style=\"--d:.05s\" aria-label=\"Fil d'Ariane\">\r\n      <a href=\"https:\/\/www.sunsplash.fr\/\">Accueil<\/a>\r\n      <span class=\"sep\" aria-hidden=\"true\">\/<\/span>\r\n      <a href=\"https:\/\/www.sunsplash.fr\/projets\/\">Projets<\/a>\r\n      <span class=\"sep\" aria-hidden=\"true\">\/<\/span>\r\n      <span class=\"cur\">Owlshake<\/span>\r\n    <\/nav>\r\n\r\n    <h2>\r\n      <span class=\"hero-eyebrow rise\" style=\"--d:.12s\">Owlshake \u2014 Animation 3D bar bien public<\/span>\r\n      <span class=\"line rise\" style=\"--d:.2s\">Faire revenir<\/span>\r\n      <span class=\"line rise\" style=\"--d:.28s\"><span class=\"accent\">une identit\u00e9 sur sc\u00e8ne<\/span>.<\/span>\r\n    <\/h2>\r\n\r\n    <p class=\"hero-client rise\" style=\"--d:.36s\">\r\n      <span>Client&nbsp;: <a href=\"https:\/\/www.instagram.com\/owlshake.music\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Collectif Owlshake sur Instagram, nouvel onglet\">Collectif Owlshake<\/a><\/span>\r\n      <span class=\"dot\" aria-hidden=\"true\"><\/span>\r\n      <span>D\u00e9cembre 2025 \u00b7 Bordeaux<\/span>\r\n    <\/p>\r\n\r\n    <p class=\"lede rise\" style=\"--d:.44s\">Apr\u00e8s une premi\u00e8re collaboration autour d\u2019Ocean Days, Owlshake nous a de nouveau confi\u00e9 son identit\u00e9 pour une soir\u00e9e au Bien Public, \u00e0 Bordeaux. Cette fois, leur mascotte 3D revient dans un univers plus sombre pour accompagner les diff\u00e9rents DJ invit\u00e9s<\/p>\r\n\r\n    <div class=\"ctas rise\" style=\"--d:.52s\">\r\n      <a class=\"btn btn-warm\" href=\"#owlshake\">Voir la vid\u00e9o <span class=\"arw\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n      <a class=\"btn btn-light\" href=\"https:\/\/www.sunsplash.fr\/projets\/\">Tous les projets <span class=\"arw\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n    <\/div>\r\n\r\n    <div class=\"hero-stats rise\" style=\"--d:.6s\">\r\n      <div class=\"stat\"><span class=\"n\">2<sup>eme<\/sup><\/span><span class=\"l\">Collaboration Owlshake<\/span><\/div>\r\n      <div class=\"stat\"><span class=\"n\">Int\u00e9gration 3D<\/span><span class=\"l\">personnage 3D<\/span><\/div>\r\n      <div class=\"stat\"><span class=\"n\">9:16<\/span><span class=\"l\">vid\u00e9o pour Instagram<\/span><\/div>\r\n      <div class=\"stat\"><span class=\"n\">Int.<\/span><span class=\"l\">Bien public Bordeaux<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var root=document.querySelector('.ss-od-hero'); if(!root) return;\r\n  root.classList.add('is-animated');\r\n  var els=root.querySelectorAll('.rise');\r\n  function reveal(){Array.prototype.forEach.call(els,function(el){el.classList.add('in');});}\r\n  if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){reveal();return;}\r\n  requestAnimationFrame(reveal);\r\n  setTimeout(reveal,1500);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-27660a07 e-flex e-con-boxed e-con e-parent\" data-id=\"27660a07\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-332476fe e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"332476fe\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-22cdfc13 elementor-widget elementor-widget-menu-anchor\" data-id=\"22cdfc13\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"owlshake\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e84fb17 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"7e84fb17\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">R\u00e9apparition de la mascotte 3D<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-499a4e92 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"499a4e92\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Donner une nouvelle sc\u00e8ne \u00e0 la mascotte.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ae4ae78 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"3ae4ae78\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Une vid\u00e9o verticale pens\u00e9e pour Instagram, o\u00f9 la mascotte 3D s\u2019int\u00e8gre directement \u00e0 la piste du Bien Public. Les lumi\u00e8res du bar, l\u2019ambiance nocturne et le d\u00e9cor r\u00e9el deviennent le terrain de jeu du personnage, pour cr\u00e9er une continuit\u00e9 entre 3D et prise de vue r\u00e9elle.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b8d1472 e-con-full e-flex e-con e-child\" data-id=\"6b8d1472\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71280adc elementor-widget elementor-widget-button\" data-id=\"71280adc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Format 9:16<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f04388a elementor-widget elementor-widget-button\" data-id=\"f04388a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Instagram<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c51d2ce elementor-widget elementor-widget-button\" data-id=\"6c51d2ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Int\u00e9gration 3D + r\u00e9el<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f2c7f9d elementor-widget elementor-widget-button\" data-id=\"4f2c7f9d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\"> Juin 2025<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24a3f878 elementor-widget elementor-widget-button\" data-id=\"24a3f878\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">D\u00e9cembre 2025<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42172b25 elementor-mobile-align-justify elementor-widget elementor-widget-button\" data-id=\"42172b25\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#makingoff\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Making of \u2192<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d33abbb elementor-invisible elementor-widget elementor-widget-html\" data-id=\"6d33abbb\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SUNSPLASH \u2014 Reel unique 9:16 + lecteur plein \u00e9cran\r\n     Owlshake \u00b7 promenade Sainte-Catherine, Bordeaux\r\n     Scop\u00e9 sous .ss-reel.   Vid\u00e9o : YpFFKgcXiuk\r\n\r\n     FONCTIONNEMENT\r\n       Au clic, une fen\u00eatre s'ouvre et charge la vid\u00e9o YouTube.\r\n       L'iframe n'est cr\u00e9\u00e9e qu'\u00e0 l'ouverture et d\u00e9truite \u00e0 la\r\n       fermeture : aucune requ\u00eate tant que l'utilisateur n'a pas\r\n       cliqu\u00e9, et la lecture s'arr\u00eate net \u00e0 la fermeture.\r\n\r\n     FERMETURE : bouton \u00d7, touche \u00c9chap, ou clic sur le fond.\r\n\r\n     MINIATURE\r\n       Tir\u00e9e automatiquement de YouTube. Pour utiliser ton propre\r\n       rendu, remplace le src de l'<img> \u2014 les Shorts g\u00e9n\u00e8rent\r\n       parfois des miniatures recadr\u00e9es.\r\n\r\n     Conteneur Elementor : padding 0 \u00b7 marge 0.\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"preconnect\" href=\"https:\/\/i.ytimg.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.ss-reel{\r\n  --clay-000:#F1EFE9;\r\n  --ink-deep:#0E0F12;\r\n  --k-warm:#C4462A;\r\n  --glow:#F3D3A0;\r\n\r\n  --ss-display:\"Bricolage Grotesque\",system-ui,-apple-system,sans-serif;\r\n  --ss-mono:\"IBM Plex Mono\",ui-monospace,SFMono-Regular,monospace;\r\n\r\n  \/* Largeur du reel. C'est la seule valeur \u00e0 ajuster pour\r\n     agrandir ou r\u00e9duire l'ensemble. *\/\r\n  --reel-w:clamp(260px,26vw,340px);\r\n\r\n  display:flex !important;justify-content:center;\r\n  background:transparent;margin:0;padding:0;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n.ss-reel *{box-sizing:border-box}\r\n.ss-reel span{margin:0;padding:0}\r\n\r\n\/* ---------- Cadre du reel ---------- *\/\r\n.ss-reel .reel{\r\n  display:block !important;position:relative;overflow:hidden;\r\n  width:var(--reel-w);aspect-ratio:9\/16;\r\n  border:0;padding:0;margin:0;\r\n  border-radius:18px;\r\n  background:var(--ink-deep);\r\n  cursor:pointer;text-align:left;\r\n  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;\r\n}\r\n.ss-reel .reel:hover{\r\n  transform:translateY(-3px);\r\n  box-shadow:0 30px 60px -34px rgba(0,0,0,.7);\r\n}\r\n.ss-reel .reel img{\r\n  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;\r\n  transition:transform .8s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.ss-reel .reel:hover img{transform:scale(1.045)}\r\n\r\n\/* Voile haut et bas : garantit la lisibilit\u00e9 quel que soit le\r\n   visuel plac\u00e9 derri\u00e8re. *\/\r\n.ss-reel .reel::after{\r\n  content:\"\";position:absolute;inset:0;\r\n  background:linear-gradient(180deg,rgba(14,15,18,.55) 0%,rgba(14,15,18,0) 22%,rgba(14,15,18,0) 72%,rgba(14,15,18,.75) 100%);\r\n}\r\n.ss-reel .reel > *{position:relative;z-index:2}\r\n\r\n\/* ---------- Signature ---------- *\/\r\n.ss-reel .reel-brand{\r\n  position:absolute;top:16px;left:16px;\r\n  display:flex !important;align-items:center;gap:10px;\r\n  font-family:var(--ss-display,system-ui,sans-serif) !important;\r\n  font-weight:600 !important;font-size:13.5px;color:var(--clay-000);\r\n}\r\n.ss-reel .reel-brand i{\r\n  width:26px;height:26px;border-radius:50%;flex:none;display:block;\r\n  background:radial-gradient(circle at 32% 30%,var(--glow),var(--k-warm));\r\n}\r\n\r\n\/* ---------- Bouton lecture ----------\r\n   Le triangle est fabriqu\u00e9 par des bordures : pas d'ic\u00f4ne,\r\n   pas de police \u00e0 charger. *\/\r\n.ss-reel .reel-play{\r\n  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);\r\n  width:64px;height:64px;border-radius:50%;\r\n  background:rgba(241,239,233,.16);border:1px solid rgba(241,239,233,.4);\r\n  display:flex !important;align-items:center;justify-content:center;\r\n  transition:background-color .3s ease,border-color .3s ease;\r\n}\r\n.ss-reel .reel:hover .reel-play{background:var(--k-warm);border-color:var(--k-warm)}\r\n.ss-reel .reel-play::before{\r\n  content:\"\";border-style:solid;border-width:10px 0 10px 16px;\r\n  border-color:transparent transparent transparent var(--clay-000);\r\n  margin-left:4px;\r\n}\r\n\r\n\/* ---------- \u00c9tiquette format ---------- *\/\r\n.ss-reel .reel-fmt{\r\n  position:absolute;left:16px;bottom:16px;\r\n  font-family:var(--ss-mono,ui-monospace,monospace) !important;\r\n  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;\r\n  color:var(--clay-000);\r\n  background:rgba(14,15,18,.5);border:1px solid rgba(241,239,233,.32);\r\n  border-radius:999px;padding:6px 14px;white-space:nowrap;\r\n}\r\n\r\n@media (max-width:560px){\r\n  .ss-reel{--reel-w:min(88vw,320px)}\r\n  .ss-reel .reel-play{width:54px;height:54px}\r\n  .ss-reel .reel-play::before{border-width:9px 0 9px 14px}\r\n}\r\n@media (prefers-reduced-motion:reduce){\r\n  .ss-reel .reel,.ss-reel .reel img,.ss-reel .reel-play{transition:none}\r\n}\r\n.ss-reel .reel:focus-visible{outline:2px solid var(--k-warm);outline-offset:4px}\r\n\r\n\/* ============ FEN\u00caTRE DE LECTURE ============ *\/\r\n.ss-lightbox{\r\n  position:fixed;inset:0;z-index:99999;\r\n  display:none;align-items:center;justify-content:center;\r\n  padding:clamp(16px,4vw,48px);\r\n  background:rgba(8,9,11,.92);\r\n  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);\r\n}\r\n.ss-lightbox.is-open{display:flex}\r\n\/* Un format vertical doit \u00eatre born\u00e9 par la HAUTEUR, sinon il\r\n   d\u00e9borde de l'\u00e9cran. *\/\r\n.ss-lightbox .lb-frame{\r\n  position:relative;width:100%;\r\n  max-width:min(92vw,460px);max-height:86vh;aspect-ratio:9\/16;\r\n  background:#000;border-radius:14px;overflow:hidden;\r\n}\r\n.ss-lightbox .lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}\r\n.ss-lightbox .lb-close{\r\n  position:absolute;top:clamp(14px,4vw,44px);right:clamp(16px,4vw,48px);\r\n  width:44px;height:44px;border-radius:50%;\r\n  background:rgba(241,239,233,.12);border:1px solid rgba(241,239,233,.35);\r\n  color:#F1EFE9;font-size:22px;line-height:1;cursor:pointer;\r\n  display:flex;align-items:center;justify-content:center;\r\n  transition:background-color .25s ease;\r\n}\r\n.ss-lightbox .lb-close:hover{background:rgba(241,239,233,.24)}\r\n.ss-lightbox .lb-close:focus-visible{outline:2px solid #C4462A;outline-offset:3px}\r\n\r\n\/* Lien de secours : certaines vid\u00e9os interdisent l'int\u00e9gration,\r\n   l'iframe reste alors noire. Ce lien fonctionne toujours. *\/\r\n.ss-lightbox .lb-fallback{\r\n  position:absolute;left:50%;bottom:clamp(12px,3vh,26px);transform:translateX(-50%);\r\n  font-family:\"IBM Plex Mono\",ui-monospace,monospace;\r\n  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;\r\n  color:rgba(241,239,233,.6);text-decoration:none;\r\n  border-bottom:1px solid rgba(241,239,233,.3);padding-bottom:2px;\r\n}\r\n.ss-lightbox .lb-fallback:hover{color:#F1EFE9}\r\n<\/style>\r\n\r\n\r\n<div class=\"ss-reel\">\r\n  <button class=\"reel\" type=\"button\" data-yt=\"YpFFKgcXiuk\"\r\n          aria-label=\"Lire la vid\u00e9o Owlshake tourn\u00e9e promenade Sainte-Catherine\">\r\n    <img src=\"https:\/\/i.ytimg.com\/vi\/YpFFKgcXiuk\/maxresdefault.jpg\"\r\n         onerror=\"this.src='https:\/\/i.ytimg.com\/vi\/YpFFKgcXiuk\/hqdefault.jpg'\"\r\n         alt=\"Mascotte 3D Owlshake int\u00e9gr\u00e9e en prise de vue r\u00e9elle, promenade Sainte-Catherine \u00e0 Bordeaux\"\r\n         loading=\"lazy\" decoding=\"async\">\r\n    <span class=\"reel-brand\"><i aria-hidden=\"true\"><\/i>Sunsplash Studio<\/span>\r\n    <span class=\"reel-play\" aria-hidden=\"true\"><\/span>\r\n    <span class=\"reel-fmt\">Reel \u00b7 9:16<\/span>\r\n  <\/button>\r\n<\/div>\r\n\r\n<!-- Fen\u00eatre de lecture, hors du cadre -->\r\n<div class=\"ss-lightbox\" id=\"ssReelBox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Lecteur vid\u00e9o\">\r\n  <button class=\"lb-close\" type=\"button\" aria-label=\"Fermer la vid\u00e9o\">&times;<\/button>\r\n  <div class=\"lb-frame\"><\/div>\r\n  <a class=\"lb-fallback\" href=\"https:\/\/youtu.be\/YpFFKgcXiuk\" target=\"_blank\" rel=\"noopener\">Ouvrir sur YouTube<\/a>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  var box   = document.getElementById('ssReelBox');\r\n  var frame = box && box.querySelector('.lb-frame');\r\n  var close = box && box.querySelector('.lb-close');\r\n  if (!box || !frame) return;\r\n\r\n  \/* CORRECTIF ELEMENTOR \u2014 indispensable.\r\n     Un conteneur anc\u00eatre portant transform, filter ou\r\n     overflow:hidden casse le position:fixed : la fen\u00eatre\r\n     s'ouvrirait DANS le conteneur, rogn\u00e9e ou invisible.\r\n     On la remonte donc \u00e0 la racine du document. *\/\r\n  if (box.parentNode !== document.body){\r\n    document.body.appendChild(box);\r\n  }\r\n\r\n  var lastFocus = null;\r\n\r\n  function open(id, trigger){\r\n    lastFocus = trigger || null;\r\n    \/* L'iframe est cr\u00e9\u00e9e \u00e0 l'ouverture : aucune requ\u00eate YouTube\r\n       tant que l'utilisateur n'a pas cliqu\u00e9. *\/\r\n    frame.innerHTML =\r\n      '<iframe src=\"https:\/\/www.youtube-nocookie.com\/embed\/' + id +\r\n      '?autoplay=1&rel=0&modestbranding=1&playsinline=1\" ' +\r\n      'title=\"Vid\u00e9o Owlshake \u2014 promenade Sainte-Catherine\" ' +\r\n      'allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; ' +\r\n      'gyroscope; picture-in-picture; web-share\" ' +\r\n      'referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>';\r\n    box.classList.add('is-open');\r\n    document.body.style.overflow = 'hidden';\r\n    if (close) close.focus();\r\n  }\r\n\r\n  function shut(){\r\n    box.classList.remove('is-open');\r\n    \/* Vider l'iframe arr\u00eate la lecture net. *\/\r\n    frame.innerHTML = '';\r\n    document.body.style.overflow = '';\r\n    if (lastFocus) lastFocus.focus();\r\n  }\r\n\r\n  document.querySelectorAll('.ss-reel .reel').forEach(function(btn){\r\n    btn.addEventListener('click', function(){ open(btn.getAttribute('data-yt'), btn); });\r\n  });\r\n\r\n  if (close) close.addEventListener('click', shut);\r\n  box.addEventListener('click', function(e){ if (e.target === box) shut(); });\r\n  document.addEventListener('keydown', function(e){\r\n    if (e.key === 'Escape' && box.classList.contains('is-open')) shut();\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2ce39434 e-flex e-con-boxed elementor-invisible e-con e-parent\" data-id=\"2ce39434\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-3c0bb5e4 e-grid e-con-full e-con e-child\" data-id=\"3c0bb5e4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-493c03ad elementor-widget elementor-widget-icon-box\" data-id=\"493c03ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tClient\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tCollectif Owlshake \u00b7 \u00c9v\u00e9nementiel\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3824cead elementor-widget elementor-widget-icon-box\" data-id=\"3824cead\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tSecteur\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\t\u00c9v\u00e9nementiel \u00b7 Communication\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d41e3c1 elementor-widget elementor-widget-icon-box\" data-id=\"3d41e3c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tLivrables\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\t1 vid\u00e9o \u00b7 Instagram 9:16\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9816a63 elementor-widget elementor-widget-icon-box\" data-id=\"9816a63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tDiffusion\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tInstagram\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6da334eb elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"6da334eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-16df6e7b e-con-full e-flex e-con e-child\" data-id=\"16df6e7b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d66f585 elementor-widget elementor-widget-heading\" data-id=\"1d66f585\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\">prestations:<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66818633 elementor-widget elementor-widget-button\" data-id=\"66818633\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Storyboard<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b2626a9 elementor-widget elementor-widget-button\" data-id=\"6b2626a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Tournage<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3455e23b elementor-widget elementor-widget-button\" data-id=\"3455e23b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\"> Rigging R\u00e9utilis\u00e9<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3dcbcd55 elementor-widget elementor-widget-button\" data-id=\"3dcbcd55\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Animation<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-314741dd elementor-widget elementor-widget-button\" data-id=\"314741dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Lighting<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1546c909 elementor-widget elementor-widget-button\" data-id=\"1546c909\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Tracking<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32b2121b elementor-widget elementor-widget-button\" data-id=\"32b2121b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Compositing<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3284f47e elementor-widget elementor-widget-button\" data-id=\"3284f47e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\"> Montage<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-76fe7e25 e-flex e-con-boxed e-con e-parent\" data-id=\"76fe7e25\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a359596 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"a359596\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Sunsplash et l\u2019animation 3D : \u00e9tendre une identit\u00e9 \u00e0 un nouvel univers\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59b22e7e elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"59b22e7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">R\u00e9unir mascotte 3D, artistes et images r\u00e9elles \n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-755875e4 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"755875e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Cette deuxi\u00e8me collaboration demandait d\u2019aller plus loin que la simple int\u00e9gration du personnage. La vid\u00e9o devait faire coexister plusieurs mati\u00e8res visuelles : animation 3D, prises de vue du lieu et contenus consacr\u00e9s aux DJ invit\u00e9s, sans perdre l\u2019unit\u00e9 de l\u2019identit\u00e9 d\u2019Owlshake.<\/span><\/p><p><span style=\"font-weight: 400;\">Le travail s\u2019est donc port\u00e9 autant sur la mise en sc\u00e8ne 3D que sur le montage. La mascotte devait pouvoir intervenir dans diff\u00e9rents temps de la vid\u00e9o et cr\u00e9er des transitions entre les s\u00e9quences, tandis que les images des artistes devaient s\u2019int\u00e9grer naturellement \u00e0 l\u2019ensemble.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34b8d48 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"34b8d48\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2309a56b elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"2309a56b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">\u00ab L\u2019enjeu \u00e9tait de faire de la 3D un v\u00e9ritable langage visuel : non plus seulement int\u00e9grer une mascotte dans le r\u00e9el, mais l\u2019utiliser pour relier plusieurs contenus au sein d\u2019une m\u00eame identit\u00e9. \u00bb<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-68b45e21 e-flex e-con-boxed e-con e-parent\" data-id=\"68b45e21\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-47fafd78 elementor-widget elementor-widget-menu-anchor\" data-id=\"47fafd78\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"makingoff\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-399512cf elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"399512cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Making of et d\u00e9riv\u00e9s<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f5ad6c7 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"5f5ad6c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Un personnage, plusieurs contenus.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e93a2a0 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"2e93a2a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Trois vid\u00e9os, trois formats servis dans leur ratio natif : le livrable vertical 9:16 pour Instagram, et deux tests d&rsquo;animation \u2014 texture en 1:1, turnaround en 16:9.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fb44e00 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-html\" data-id=\"2fb44e00\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SUNSPLASH \u2014 R\u00e9alisations Ocean Days + lecteur plein \u00e9cran\r\n     Scop\u00e9 sous .ss-reels.\r\n\r\n     FONCTIONNEMENT\r\n       Chaque vignette porte data-yt (identifiant YouTube) et\r\n       data-ratio. Au clic, une fen\u00eatre s'ouvre et charge la\r\n       vid\u00e9o au bon format. L'iframe n'est cr\u00e9\u00e9e qu'\u00e0 l'ouverture\r\n       et d\u00e9truite \u00e0 la fermeture : rien ne se charge tant que\r\n       l'utilisateur n'a pas cliqu\u00e9, et la lecture s'arr\u00eate net.\r\n\r\n     FERMETURE : bouton \u00d7, touche \u00c9chap, ou clic sur le fond.\r\n\r\n     MINIATURES\r\n       Tir\u00e9es automatiquement de YouTube. Pour utiliser tes\r\n       propres rendus, remplace le src de l'<img>.\r\n\r\n     Conteneur Elementor : padding 0 \u00b7 marge 0.\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"preconnect\" href=\"https:\/\/i.ytimg.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.ss-reels{\r\n  --clay-000:#F1EFE9;\r\n  --ink:#16181C;\r\n  --ink-deep:#0E0F12;\r\n  --k-cold:#5F86B8;\r\n  --k-neutral:#B98C33;\r\n  --k-warm:#C4462A;\r\n\r\n  --ss-display:\"Bricolage Grotesque\",system-ui,-apple-system,sans-serif;\r\n  --ss-mono:\"IBM Plex Mono\",ui-monospace,SFMono-Regular,monospace;\r\n  --gap:clamp(12px,1.6vw,22px);\r\n\r\n  background:transparent;margin:0;padding:0;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n.ss-reels *{box-sizing:border-box}\r\n.ss-reels h4,.ss-reels p,.ss-reels span{margin:0;padding:0}\r\n\r\n\/* ---------- Grille : un vertical \u00e0 gauche, deux \u00e0 droite ---------- *\/\r\n\/* align-items:stretch \u2014 la carte de gauche n'a pas de hauteur\r\n   propre : elle prend celle de la colonne de droite, d\u00e9finie par\r\n   le 1:1 + la goutti\u00e8re + le 16:9. Les deux colonnes se terminent\r\n   donc exactement au m\u00eame niveau.\r\n   La largeur 0.88fr est calcul\u00e9e pour que la carte reste proche\r\n   d'un 9:16 \u00e0 cette hauteur. *\/\r\n.ss-reels .rz-row{\r\n  display:grid !important;\r\n  grid-template-columns:minmax(0,0.88fr) minmax(0,1fr);\r\n  gap:var(--gap);\r\n  align-items:stretch;\r\n}\r\n.ss-reels .rz-col{display:grid;gap:var(--gap);align-content:start}\r\n\r\n\/* ---------- Vignette ---------- *\/\r\n.ss-reels .rz{\r\n  display:block !important;position:relative;overflow:hidden;\r\n  border:0;padding:0;width:100%;\r\n  border-radius:14px;\r\n  background:var(--ink-deep);\r\n  cursor:pointer;\r\n  text-align:left;\r\n  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;\r\n}\r\n.ss-reels .rz:hover{transform:translateY(-3px);box-shadow:0 26px 56px -34px rgba(22,24,28,.55)}\r\n.ss-reels .rz-vert{height:100%;min-height:320px}\r\n.ss-reels .rz-sq{aspect-ratio:1\/1}\r\n.ss-reels .rz-wide{aspect-ratio:16\/9}\r\n\r\n.ss-reels .rz img{\r\n  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;\r\n  transition:transform .8s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.ss-reels .rz:hover img{transform:scale(1.045)}\r\n\r\n\/* Voile : garantit la lisibilit\u00e9 quel que soit le visuel *\/\r\n.ss-reels .rz::after{\r\n  content:\"\";position:absolute;inset:0;\r\n  background:linear-gradient(180deg,rgba(14,15,18,.5) 0%,rgba(14,15,18,0) 28%,rgba(14,15,18,.28) 52%,rgba(14,15,18,.78) 78%,rgba(14,15,18,.96) 100%);\r\n}\r\n.ss-reels .rz > *{position:relative;z-index:2}\r\n\r\n\/* ---------- Bandeau haut ---------- *\/\r\n.ss-reels .rz-top{\r\n  position:absolute;top:12px;left:12px;right:12px;\r\n  display:flex !important;align-items:center;justify-content:space-between;gap:10px;\r\n}\r\n.ss-reels .rz-brand{\r\n  display:flex !important;align-items:center;gap:8px;\r\n  font-family:var(--ss-display,system-ui,sans-serif) !important;\r\n  font-weight:600 !important;font-size:12.5px;color:var(--clay-000);\r\n  text-shadow:0 1px 2px rgba(8,9,11,.85), 0 3px 12px rgba(8,9,11,.6);\r\n}\r\n.ss-reels .rz-brand i{\r\n  width:22px;height:22px;border-radius:50%;flex:none;display:block;\r\n  background:radial-gradient(circle at 32% 30%,#F3D3A0,#C4462A);\r\n}\r\n.ss-reels .rz-fmt{\r\n  font-family:var(--ss-mono,ui-monospace,monospace) !important;\r\n  font-size:10px;letter-spacing:.12em;color:var(--clay-000);\r\n  background:rgba(14,15,18,.55);border:1px solid rgba(241,239,233,.28);\r\n  border-radius:999px;padding:4px 10px;white-space:nowrap;\r\n}\r\n\r\n\/* ---------- Bouton lecture ----------\r\n   Le triangle est fabriqu\u00e9 par des bordures : pas d'ic\u00f4ne. *\/\r\n.ss-reels .rz-play{\r\n  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);\r\n  width:60px;height:60px;border-radius:50%;\r\n  background:rgba(241,239,233,.16);border:1px solid rgba(241,239,233,.4);\r\n  display:flex !important;align-items:center;justify-content:center;\r\n  transition:background-color .3s ease,border-color .3s ease;\r\n}\r\n.ss-reels .rz:hover .rz-play{background:var(--k);border-color:var(--k)}\r\n.ss-reels .rz-play::before{\r\n  content:\"\";border-style:solid;border-width:9px 0 9px 15px;\r\n  border-color:transparent transparent transparent var(--clay-000);\r\n  margin-left:4px;\r\n}\r\n\r\n\/* ---------- L\u00e9gende ---------- *\/\r\n.ss-reels .rz-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.5vw,20px)}\r\n\/* Le kicker devient une pastille : sur une photo claire, une\r\n   couleur d'accent seule ne tient jamais le contraste. Le fond\r\n   opaque garantit la lisibilit\u00e9 quel que soit le visuel. *\/\r\n.ss-reels .rz-k{\r\n  display:inline-block;margin-bottom:8px;\r\n  color:var(--k);\r\n  background:rgba(10,11,14,.82);\r\n  border:1px solid color-mix(in srgb, var(--k) 45%, transparent);\r\n  border-radius:999px;\r\n  padding:4px 10px;\r\n  font-family:var(--ss-mono,ui-monospace,monospace) !important;\r\n  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;\r\n  line-height:1.3;\r\n}\r\n@supports not (color: color-mix(in srgb, red 50%, blue)){\r\n  .ss-reels .rz-k{border-color:rgba(241,239,233,.3)}\r\n}\r\n.ss-reels .rz h4{\r\n  font-family:var(--ss-display,\"Bricolage Grotesque\",system-ui,sans-serif) !important;\r\n  font-weight:600 !important;\r\n  font-size:clamp(15px,1.5vw,20px);letter-spacing:-0.02em;line-height:1.18;\r\n  color:var(--clay-000);text-transform:none;\r\n  \/* Double ombre : une serr\u00e9e qui d\u00e9tache la lettre de l'image,\r\n     une large et diffuse qui assombrit la zone derri\u00e8re le mot. *\/\r\n  text-shadow:0 1px 2px rgba(8,9,11,.9), 0 4px 18px rgba(8,9,11,.75);\r\n}\r\n.ss-reels .rz--cold{--k:var(--k-cold)}\r\n.ss-reels .rz--neutral{--k:var(--k-neutral)}\r\n.ss-reels .rz--warm{--k:var(--k-warm)}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:860px){\r\n  \/* En colonne unique, plus rien ne dicte la hauteur : on rend\r\n     son ratio \u00e0 la carte verticale. *\/\r\n  .ss-reels .rz-row{grid-template-columns:1fr}\r\n  .ss-reels .rz-vert{height:auto;aspect-ratio:4\/5}\r\n}\r\n@media (max-width:520px){\r\n  .ss-reels .rz-play{width:50px;height:50px}\r\n  .ss-reels .rz-play::before{border-width:8px 0 8px 13px}\r\n}\r\n@media (prefers-reduced-motion:reduce){\r\n  .ss-reels .rz,.ss-reels .rz img,.ss-reels .rz-play{transition:none}\r\n}\r\n.ss-reels .rz:focus-visible{outline:2px solid var(--k-warm);outline-offset:3px}\r\n\r\n\/* ============ FEN\u00caTRE DE LECTURE ============ *\/\r\n.ss-lightbox{\r\n  position:fixed;inset:0;z-index:99999;\r\n  display:none;align-items:center;justify-content:center;\r\n  padding:clamp(16px,4vw,48px);\r\n  background:rgba(8,9,11,.92);\r\n  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);\r\n}\r\n.ss-lightbox.is-open{display:flex}\r\n.ss-lightbox .lb-frame{\r\n  position:relative;width:100%;max-width:min(92vw,1100px);\r\n  max-height:86vh;aspect-ratio:16\/9;\r\n  background:#000;border-radius:12px;overflow:hidden;\r\n}\r\n\/* Un format vertical doit \u00eatre born\u00e9 par la HAUTEUR, sinon il\r\n   d\u00e9borde de l'\u00e9cran sur un ratio 9:16. *\/\r\n.ss-lightbox[data-ratio=\"9:16\"] .lb-frame{aspect-ratio:9\/16;max-width:min(92vw,480px)}\r\n.ss-lightbox[data-ratio=\"1:1\"]  .lb-frame{aspect-ratio:1\/1;max-width:min(92vw,720px)}\r\n.ss-lightbox .lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}\r\n\r\n.ss-lightbox .lb-close{\r\n  position:absolute;top:calc(clamp(16px,4vw,48px) - 4px);right:clamp(16px,4vw,48px);\r\n  width:44px;height:44px;border-radius:50%;\r\n  background:rgba(241,239,233,.12);border:1px solid rgba(241,239,233,.35);\r\n  color:#F1EFE9;font-size:22px;line-height:1;cursor:pointer;\r\n  display:flex;align-items:center;justify-content:center;\r\n  transition:background-color .25s ease;\r\n}\r\n.ss-lightbox .lb-close:hover{background:rgba(241,239,233,.24)}\r\n.ss-lightbox .lb-close:focus-visible{outline:2px solid #C4462A;outline-offset:3px}\r\n\r\n\/* Lien de secours : certaines vid\u00e9os interdisent l'int\u00e9gration,\r\n   l'iframe reste alors noire. Ce lien fonctionne toujours. *\/\r\n.ss-lightbox .lb-fallback{\r\n  position:absolute;left:50%;bottom:clamp(12px,3vh,26px);transform:translateX(-50%);\r\n  font-family:\"IBM Plex Mono\",ui-monospace,monospace;\r\n  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;\r\n  color:rgba(241,239,233,.6);text-decoration:none;\r\n  border-bottom:1px solid rgba(241,239,233,.3);padding-bottom:2px;\r\n}\r\n.ss-lightbox .lb-fallback:hover{color:#F1EFE9}\r\n<\/style>\r\n\r\n\r\n<section class=\"ss-reels\" id=\"realisations\">\r\n  <div class=\"rz-row\">\r\n\r\n    <!-- Livrable principal \u2014 9:16 -->\r\n    <button class=\"rz rz-vert rz--cold\" type=\"button\"\r\n            data-yt=\"YpFFKgcXiuk\" data-ratio=\"9:16\"\r\n            aria-label=\"Lire la vid\u00e9o promotionnelle Ocean Days\">\r\n      <img src=\"https:\/\/i.ytimg.com\/vi\/YpFFKgcXiuk\/maxresdefault.jpg\"\r\n           onerror=\"this.src='https:\/\/i.ytimg.com\/vi\/YpFFKgcXiuk\/hqdefault.jpg'\"\r\n           alt=\"Mascotte 3D Owlshake anim\u00e9e pour le festival Ocean Days\"\r\n           loading=\"lazy\" decoding=\"async\">\r\n      <span class=\"rz-top\">\r\n        <span class=\"rz-brand\"><i aria-hidden=\"true\"><\/i>Sunsplash Studio<\/span>\r\n        <span class=\"rz-fmt\">9:16<\/span>\r\n      <\/span>\r\n      <span class=\"rz-play\" aria-hidden=\"true\"><\/span>\r\n      <span class=\"rz-body\">\r\n        <span class=\"rz-k\">Making off<\/span>\r\n        <h4>Vid\u00e9o promotionnelle \u2014 Bien Public<\/h4>\r\n      <\/span>\r\n    <\/button>\r\n\r\n    <div class=\"rz-col\">\r\n\r\n      <!-- Test animation \u2014 1:1 -->\r\n      <button class=\"rz rz-sq rz--neutral\" type=\"button\"\r\n              data-yt=\"6ynzin7TOvY\" data-ratio=\"1:1\"\r\n              aria-label=\"Lire le test d'animation, mascotte textur\u00e9e\">\r\n        <img src=\"https:\/\/i.ytimg.com\/vi\/6ynzin7TOvY\/maxresdefault.jpg\"\r\n             onerror=\"this.src='https:\/\/i.ytimg.com\/vi\/6ynzin7TOvY\/hqdefault.jpg'\"\r\n             alt=\"Test de texture sur la mascotte 3D Owlshake\"\r\n             loading=\"lazy\" decoding=\"async\">\r\n        <span class=\"rz-top\">\r\n          <span class=\"rz-brand\"><i aria-hidden=\"true\"><\/i>Sunsplash Studio<\/span>\r\n          <span class=\"rz-fmt\">1:1<\/span>\r\n        <\/span>\r\n        <span class=\"rz-play\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"rz-body\">\r\n          <span class=\"rz-k\">Test animation<\/span>\r\n          <h4>Mascotte \u2014 animation 3D<\/h4>\r\n        <\/span>\r\n      <\/button>\r\n\r\n      <!-- Test animation \u2014 16:9 -->\r\n      <button class=\"rz rz-wide rz--cold\" type=\"button\"\r\n              data-yt=\"TJiLEQMffPA\" data-ratio=\"16:9\"\r\n              aria-label=\"Lire le turnaround 3D de la mascotte\">\r\n        <img src=\"https:\/\/i.ytimg.com\/vi\/TJiLEQMffPA\/maxresdefault.jpg\"\r\n             onerror=\"this.src='https:\/\/i.ytimg.com\/vi\/TJiLEQMffPA\/hqdefault.jpg'\"\r\n             alt=\"Turnaround 3D de la mascotte Owlshake\"\r\n             loading=\"lazy\" decoding=\"async\">\r\n        <span class=\"rz-top\">\r\n          <span class=\"rz-brand\"><i aria-hidden=\"true\"><\/i>Sunsplash Studio<\/span>\r\n          <span class=\"rz-fmt\">16:9<\/span>\r\n        <\/span>\r\n        <span class=\"rz-play\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"rz-body\">\r\n          <span class=\"rz-k\">Le personnage en 3D<\/span>\r\n          <h4>Mascotte \u2014 turnaround 3D<\/h4>\r\n        <\/span>\r\n      <\/button>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- Fen\u00eatre de lecture, hors de la grille -->\r\n<div class=\"ss-lightbox\" id=\"ssLightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Lecteur vid\u00e9o\">\r\n  <button class=\"lb-close\" type=\"button\" aria-label=\"Fermer la vid\u00e9o\">&times;<\/button>\r\n  <div class=\"lb-frame\"><\/div>\r\n  <a class=\"lb-fallback\" href=\"#\" target=\"_blank\" rel=\"noopener\">Ouvrir sur YouTube<\/a>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  var box   = document.getElementById('ssLightbox');\r\n  var frame = box && box.querySelector('.lb-frame');\r\n  var close = box && box.querySelector('.lb-close');\r\n  if (!box || !frame) return;\r\n\r\n  \/* CORRECTIF ELEMENTOR \u2014 indispensable.\r\n     Un conteneur anc\u00eatre portant transform, filter ou\r\n     overflow:hidden casse le position:fixed : la fen\u00eatre\r\n     s'ouvrirait DANS le conteneur, rogn\u00e9e ou invisible.\r\n     On la remonte donc \u00e0 la racine du document. *\/\r\n  if (box.parentNode !== document.body){\r\n    document.body.appendChild(box);\r\n  }\r\n\r\n  var lastFocus = null;\r\n\r\n  function open(id, ratio, trigger){\r\n    lastFocus = trigger || null;\r\n    box.setAttribute('data-ratio', ratio || '16:9');\r\n    \/* L'iframe est cr\u00e9\u00e9e \u00e0 l'ouverture : aucune requ\u00eate YouTube\r\n       tant que l'utilisateur n'a pas cliqu\u00e9. *\/\r\n    frame.innerHTML =\r\n      '<iframe src=\"https:\/\/www.youtube-nocookie.com\/embed\/' + id +\r\n      '?autoplay=1&rel=0&modestbranding=1&playsinline=1\" ' +\r\n      'title=\"Lecteur vid\u00e9o\" allow=\"accelerometer; autoplay; clipboard-write; ' +\r\n      'encrypted-media; gyroscope; picture-in-picture; web-share\" ' +\r\n      'referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>';\r\n    var fb = box.querySelector('.lb-fallback');\r\n    if (fb) fb.href = 'https:\/\/youtu.be\/' + id;\r\n    box.classList.add('is-open');\r\n    document.body.style.overflow = 'hidden';\r\n    if (close) close.focus();\r\n  }\r\n\r\n  function shut(){\r\n    box.classList.remove('is-open');\r\n    \/* Vider l'iframe arr\u00eate la lecture net. *\/\r\n    frame.innerHTML = '';\r\n    document.body.style.overflow = '';\r\n    if (lastFocus) lastFocus.focus();\r\n  }\r\n\r\n  document.querySelectorAll('.ss-reels .rz').forEach(function(btn){\r\n    btn.addEventListener('click', function(){\r\n      open(btn.getAttribute('data-yt'), btn.getAttribute('data-ratio'), btn);\r\n    });\r\n  });\r\n\r\n  if (close) close.addEventListener('click', shut);\r\n  box.addEventListener('click', function(e){ if (e.target === box) shut(); });\r\n  document.addEventListener('keydown', function(e){\r\n    if (e.key === 'Escape' && box.classList.contains('is-open')) shut();\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e567f82 e-flex e-con-boxed elementor-invisible e-con e-parent\" data-id=\"3e567f82\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73fa1daa elementor-widget elementor-widget-heading\" data-id=\"73fa1daa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14f605be elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"14f605be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Du storyboard \u00e0 l'int\u00e9gration finale.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-827e79 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"827e79\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Six \u00e9tapes pour faire na\u00eetre un personnage et le fondre dans le r\u00e9el, du plat \u00e0 la lumi\u00e8re du soleil de Bordeaux.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4857a9cc elementor-widget elementor-widget-html\" data-id=\"4857a9cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SUNSPLASH \u2014 Processus Ocean Days (6 \u00e9tapes)\r\n     Scop\u00e9 sous .ss-odp.\r\n\r\n     HI\u00c9RARCHIE (correction demand\u00e9e)\r\n       Num\u00e9ros 01\u201306   \u2192 <span class=\"odp-n\">   aucun poids s\u00e9mantique\r\n       Titres d'\u00e9tape  \u2192 <h4>                   sous un h2 + h3 de section\r\n\r\n     CLASSES RENOMM\u00c9ES\r\n       .step \/ .steps sont des noms trop courants sur un site\r\n       WordPress : tout est pr\u00e9fix\u00e9 odp- pour \u00e9viter qu'une\r\n       feuille externe ne casse la mise en page.\r\n\r\n     Conteneur Elementor : padding 0 \u00b7 marge 0.\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.ss-odp{\r\n  --clay-000:#F1EFE9;\r\n  --ink:#16181C;\r\n  --glow:#F3D3A0;\r\n  --k-warm:#C4462A;\r\n  --line:rgba(241,239,233,.16);\r\n\r\n  --ss-display:\"Bricolage Grotesque\",system-ui,-apple-system,sans-serif;\r\n  --ss-body:\"Instrument Sans\",system-ui,-apple-system,sans-serif;\r\n  --ss-mono:\"IBM Plex Mono\",ui-monospace,SFMono-Regular,monospace;\r\n\r\n  background:transparent;   \/* pr\u00e9vu pour un conteneur sombre *\/\r\n  color:var(--clay-000);\r\n  font-family:var(--ss-body);\r\n  font-size:16px;line-height:1.62;margin:0;padding:0;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n.ss-odp *{box-sizing:border-box}\r\n.ss-odp h4,.ss-odp p,.ss-odp span{margin:0;padding:0}\r\n\r\n\/* ---------- Grille ----------\r\n   Le gap de 1px laisse voir le fond du conteneur : c'est lui qui\r\n   dessine les s\u00e9parations entre les cartes. *\/\r\n.ss-odp .odp-row{\r\n  display:grid !important;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:1px;background:var(--line);\r\n  border:1px solid var(--line);\r\n}\r\n\r\n\/* VERROUS D\u00c9FENSIFS\r\n   Une carte doit rester un bloc vertical simple, m\u00eame si une\r\n   feuille externe tente d'y poser flex ou grid. *\/\r\n.ss-odp .odp-card{\r\n  display:block !important;\r\n  float:none !important;\r\n  position:static !important;\r\n  width:auto !important;\r\n  background:var(--ink);\r\n  padding:clamp(24px,2.4vw,36px);\r\n}\r\n.ss-odp .odp-card > *{\r\n  display:block !important;\r\n  width:100% !important;\r\n  max-width:none !important;\r\n  float:none !important;\r\n  flex:none !important;\r\n}\r\n\r\n\/* ---------- Num\u00e9ro : span, aucun poids s\u00e9mantique ---------- *\/\r\n.ss-odp .odp-n{\r\n  margin-bottom:20px !important;color:var(--k-warm);\r\n  font-family:var(--ss-mono,ui-monospace,monospace) !important;\r\n  font-size:10.5px;font-weight:500;letter-spacing:.16em;line-height:1.4;\r\n}\r\n\r\n\/* ---------- Titre d'\u00e9tape : h4 ---------- *\/\r\n.ss-odp .odp-card h4{\r\n  font-family:var(--ss-display,\"Bricolage Grotesque\",system-ui,sans-serif) !important;\r\n  font-weight:600 !important;\r\n  font-size:clamp(17px,1.6vw,21px);\r\n  letter-spacing:-0.02em;line-height:1.18;\r\n  margin-bottom:12px !important;\r\n  color:var(--clay-000);\r\n  text-transform:none;\r\n}\r\n\r\n.ss-odp .odp-card p{font-size:14px;line-height:1.6;color:rgba(241,239,233,.62)}\r\n.ss-odp .odp-note{margin-top:14px !important;font-size:12.5px;color:rgba(241,239,233,.5)}\r\n.ss-odp .odp-note b{\r\n  color:var(--glow);font-weight:600;\r\n  display:inline !important;width:auto !important;\r\n}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:1040px){\r\n  .ss-odp .odp-row{grid-template-columns:repeat(2,1fr)}\r\n}\r\n@media (max-width:620px){\r\n  .ss-odp .odp-row{grid-template-columns:1fr}\r\n}\r\n\r\n\/* ---------- Variante claire : .ss-odp--light ---------- *\/\r\n.ss-odp--light{color:var(--ink);--line:rgba(93,97,105,.32)}\r\n.ss-odp--light .odp-card{background:var(--clay-000)}\r\n.ss-odp--light .odp-card h4{color:var(--ink)}\r\n.ss-odp--light .odp-card p{color:rgba(42,45,51,.78)}\r\n.ss-odp--light .odp-note{color:rgba(42,45,51,.62)}\r\n.ss-odp--light .odp-note b{color:#8A6A22}\r\n<\/style>\r\n\r\n\r\n<section class=\"ss-odp\" id=\"process\">\r\n  <div class=\"odp-row\">\r\n\r\n    <article class=\"odp-card\">\r\n      <span class=\"odp-n\">01<\/span>\r\n      <h4>Storyboard &amp; direction artistique<\/h4>\r\n      <p>Construction du concept visuel, du rythme et des diff\u00e9rentes apparitions de la mascotte 3D.<\/p>\r\n    <\/article>\r\n\r\n    <article class=\"odp-card\">\r\n      <span class=\"odp-n\">02<\/span>\r\n      <h4>Adaptation 3D<\/h4>\r\n      <p>Nouvelle direction de lumi\u00e8re, de mati\u00e8res et de mise en sc\u00e8ne pour inscrire le personnage dans l\u2019univers plus sombre de la soir\u00e9e.<\/p>\r\n     \r\n    <\/article>\r\n\r\n    <article class=\"odp-card\">\r\n      <span class=\"odp-n\">03<\/span>\r\n      <h4>Animation du personnage<\/h4>\r\n      <p>R\u00e9utilisation du rig de la mascotte et cr\u00e9ation des mouvements et des interactions de la mascotte avec l\u2019image et le rythme de la vid\u00e9o.\r\n<\/p>\r\n    <\/article>\r\n\r\n    <article class=\"odp-card\">\r\n      <span class=\"odp-n\">04<\/span>\r\n      <h4>Int\u00e9gration dans le r\u00e9el<\/h4>\r\n      <p>Prise de vue ext\u00e9rieure, lumi\u00e8re naturelle de juin, marqueurs de tracking pos\u00e9s dans la sc\u00e8ne.<\/p>\r\n      <p class=\"odp-note\"><b>Technique : <\/b>Rep\u00e8res de tracking visuels pos\u00e9s dans la sc\u00e8ne r\u00e9elle pour aligner pr\u00e9cis\u00e9ment la cam\u00e9ra virtuelle et la cam\u00e9ra physique.<\/p>\r\n    <\/article>\r\n\r\n    <article class=\"odp-card\">\r\n      <span class=\"odp-n\">05<\/span>\r\n      <h4>Montage & contenus artistes<\/h4>\r\n      <p>Int\u00e9gration des vid\u00e9os des DJ invit\u00e9s et construction des transitions pour relier les diff\u00e9rents contenus.<\/p>\r\n    <\/article>\r\n\r\n    <article class=\"odp-card\">\r\n      <span class=\"odp-n\">06<\/span>\r\n      <h4>Compositing &amp; Finition<\/h4>\r\n      <p>Assemblage de la 3D et des images r\u00e9elles, harmonisation des lumi\u00e8res et des couleurs, puis finalisation du montage.<\/p>\r\n      <p class=\"odp-note\"><b>R\u00e9sultat :<\/b>  une identit\u00e9 3D capable de relier le lieu, les artistes et l\u2019univers d\u2019Owlshake au sein d\u2019une m\u00eame vid\u00e9o.\r\n<\/p>\r\n    <\/article>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-295acf54 e-flex e-con-boxed e-con e-parent\" data-id=\"295acf54\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-60520912 pp-info-box-left elementor-widget__width-initial pp-info-box-tablet-left pp-info-box-mobile-top elementor-invisible elementor-widget elementor-widget-pp-info-box\" data-id=\"60520912\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;}\" data-widget_type=\"pp-info-box.default\">\n\t\t\t\t\t\t\t<div class=\"pp-info-box-container\">\n\t\t\t<div class=\"pp-info-box\">\n\t\t\t\t\t\t\t\t\t<div class=\"pp-info-box-icon-wrap\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"pp-info-box-icon pp-icon\">\n\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/www.sunsplash.fr\/wp-content\/uploads\/2025\/11\/owlshake2-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-1768\" alt=\"Sunsplash Projet_Ocean Days\" srcset=\"https:\/\/www.sunsplash.fr\/wp-content\/uploads\/2025\/11\/owlshake2-768x432.png 768w, https:\/\/www.sunsplash.fr\/wp-content\/uploads\/2025\/11\/owlshake2-300x169.png 300w, https:\/\/www.sunsplash.fr\/wp-content\/uploads\/2025\/11\/owlshake2-1024x576.png 1024w, https:\/\/www.sunsplash.fr\/wp-content\/uploads\/2025\/11\/owlshake2-1536x864.png 1536w, https:\/\/www.sunsplash.fr\/wp-content\/uploads\/2025\/11\/owlshake2-18x10.png 18w, https:\/\/www.sunsplash.fr\/wp-content\/uploads\/2025\/11\/owlshake2.png 1920w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"pp-info-box-content\">\n\t\t\t\t\t<div class=\"pp-info-box-title-wrap\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"pp-info-box-title-container\">\n\t\t\t\t\t\t\t\t<h4 class=\"pp-info-box-title\">\n\t\t\t\t\t\t\t\t\tOceanDays \u00b7 Festival \u00b7 Juin. 2025\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h5 class=\"pp-info-box-subtitle\">\n\t\t\t\t\t\t\t\tL\u00e0 o\u00f9 tout a commenc\u00e9\t\t\t\t\t\t\t<\/h5>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"pp-info-box-description\">\n\t\t\t\t\t\t\t<p data-pm-slice=\"1 1 []\">Premiere collaboration : le logo 2D d&rsquo;Owlshake transform\u00e9 en personnage 3D, int\u00e9gr\u00e9 en exterieur sur la promenade Sainte-Catherine.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"pp-info-box-footer\">\n\t\t\t\t\t<a href=\"https:\/\/www.sunsplash.fr\/ocean-days\/\" class=\"pp-info-box-button elementor-button elementor-size-md elementor-animation-grow\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"pp-button-text\">\n\t\t\t\t\t\t\t\t   Voir la cr\u00e9ation d'Owlshake \u2192\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7d86bce0 e-flex e-con-boxed e-con e-parent\" data-id=\"7d86bce0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40799801 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"40799801\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Votre projet m\u00e9rite une vision \u00e0 la hauteur de son ambition.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ea6cb0c elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"7ea6cb0c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Dites-nous ce que vous devez faire comprendre, ressentir ou imaginer. Nous vous proposerons le langage visuel et les livrables les plus adapt\u00e9s.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-999af39 pp-buttons-halign-mobile-center pp-buttons-valign-middle pp-buttons-halign-left pp-buttons-stack-none elementor-invisible elementor-widget elementor-widget-pp-buttons\" data-id=\"999af39\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;}\" data-widget_type=\"pp-buttons.default\">\n\t\t\t\t\t\t\t<div class=\"pp-buttons-group\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.sunsplash.fr\/contact\/\" class=\"pp-button elementor-button elementor-size-sm elementor-repeater-item-4dcde9e \">\n\t\t\t\t\t<div class=\"pp-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"pp-button-content-inner pp-icon-before\">\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"pp-button-title\">\n\t\t\t\t\t\t\t\t\tParlons de votre projet \u2192 \t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.sunsplash.fr\/contact\/\" class=\"pp-button elementor-button elementor-size-sm elementor-repeater-item-43c59ff \">\n\t\t\t\t\t<div class=\"pp-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"pp-button-content-inner pp-icon-before\">\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"pp-button-title\">\n\t\t\t\t\t\t\t\t\tVoir tous les projets \u2192\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/div>\t\t\t\t<\/div>\n\t\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>Accueil \/ Projets \/ Owlshake Owlshake \u2014 Animation 3D bar bien public Faire revenir une identit\u00e9 sur sc\u00e8ne. Client&nbsp;: Collectif Owlshake D\u00e9cembre 2025 \u00b7 Bordeaux Apr\u00e8s une premi\u00e8re collaboration autour d\u2019Ocean Days, Owlshake nous a de nouveau confi\u00e9 son identit\u00e9 pour une soir\u00e9e au Bien Public, \u00e0 Bordeaux. Cette fois, leur mascotte 3D revient dans [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2993","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"D\u00e9couvrez comment Sunsplash a transform\u00e9 le logo 2D d\u2019Owlshake en mascotte 3D anim\u00e9e puis l\u2019a int\u00e9gr\u00e9e dans une prise de vue r\u00e9elle pour Ocean Days \u00e0 Bordeaux.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.sunsplash.fr\/owlshake\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Sunsplash - Penser au-del\u00e0 du format\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D\" \/>\n\t\t<meta property=\"og:description\" content=\"D\u00e9couvrez comment Sunsplash a transform\u00e9 le logo 2D d\u2019Owlshake en mascotte 3D anim\u00e9e puis l\u2019a int\u00e9gr\u00e9e dans une prise de vue r\u00e9elle pour Ocean Days \u00e0 Bordeaux.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.sunsplash.fr\/owlshake\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/sunsplash.fr\/wp-content\/uploads\/2025\/10\/LOGO_officiel_blanc-e1761741950460.webp\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/sunsplash.fr\/wp-content\/uploads\/2025\/10\/LOGO_officiel_blanc-e1761741950460.webp\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-08-14T07:27:18+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-08-17T08:21:20+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D\" \/>\n\t\t<meta name=\"twitter:description\" content=\"D\u00e9couvrez comment Sunsplash a transform\u00e9 le logo 2D d\u2019Owlshake en mascotte 3D anim\u00e9e puis l\u2019a int\u00e9gr\u00e9e dans une prise de vue r\u00e9elle pour Ocean Days \u00e0 Bordeaux.\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/sunsplash.fr\/wp-content\/uploads\/2025\/10\/LOGO_officiel_blanc-e1761741950460.webp\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/owlshake-2\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/owlshake-2\\\/#listItem\",\"name\":\"Cr\\u00e9ation d\\u2019une mascotte 3D pour Owlshake | integration 3D\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/owlshake-2\\\/#listItem\",\"position\":2,\"name\":\"Cr\\u00e9ation d\\u2019une mascotte 3D pour Owlshake | integration 3D\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/#organization\",\"name\":\"Sunsplash Sunsplash Studio\",\"description\":\"Des visuels 3D qui font vendre. Rendre visible l'invisible.\",\"url\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/\",\"foundingDate\":\"2025-09-01\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"value\":2},\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/sunsplash.fr\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/LOGO_officiel_CLR.webp\",\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/owlshake-2\\\/#organizationLogo\"},\"image\":{\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/owlshake-2\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/sunsplash_studio_3d?igsh=MXQzajh4Zzh2Ynh2MQ==\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/sunsplash-studio\\\/posts\\\/?feedView=all\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/owlshake-2\\\/#webpage\",\"url\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/owlshake-2\\\/\",\"name\":\"Cr\\u00e9ation d\\u2019une mascotte 3D pour Owlshake | integration 3D\",\"description\":\"D\\u00e9couvrez comment Sunsplash a transform\\u00e9 le logo 2D d\\u2019Owlshake en mascotte 3D anim\\u00e9e puis l\\u2019a int\\u00e9gr\\u00e9e dans une prise de vue r\\u00e9elle pour Ocean Days \\u00e0 Bordeaux.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/owlshake-2\\\/#breadcrumblist\"},\"datePublished\":\"2026-08-14T09:27:18+02:00\",\"dateModified\":\"2026-08-17T10:21:20+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/\",\"name\":\"Sunsplash\",\"description\":\"Penser au-del\\u00e0 du format\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.sunsplash.fr\\\/en\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D","description":"D\u00e9couvrez comment Sunsplash a transform\u00e9 le logo 2D d\u2019Owlshake en mascotte 3D anim\u00e9e puis l\u2019a int\u00e9gr\u00e9e dans une prise de vue r\u00e9elle pour Ocean Days \u00e0 Bordeaux.","canonical_url":"https:\/\/www.sunsplash.fr\/owlshake\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.sunsplash.fr\/en#listItem","position":1,"name":"Home","item":"https:\/\/www.sunsplash.fr\/en","nextItem":{"@type":"ListItem","@id":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/#listItem","name":"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D"}},{"@type":"ListItem","@id":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/#listItem","position":2,"name":"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D","previousItem":{"@type":"ListItem","@id":"https:\/\/www.sunsplash.fr\/en#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/www.sunsplash.fr\/en\/#organization","name":"Sunsplash Sunsplash Studio","description":"Des visuels 3D qui font vendre. Rendre visible l'invisible.","url":"https:\/\/www.sunsplash.fr\/en\/","foundingDate":"2025-09-01","numberOfEmployees":{"@type":"QuantitativeValue","value":2},"logo":{"@type":"ImageObject","url":"https:\/\/sunsplash.fr\/wp-content\/uploads\/2025\/10\/LOGO_officiel_CLR.webp","@id":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/#organizationLogo"},"image":{"@id":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/#organizationLogo"},"sameAs":["https:\/\/www.instagram.com\/sunsplash_studio_3d?igsh=MXQzajh4Zzh2Ynh2MQ==","https:\/\/www.linkedin.com\/company\/sunsplash-studio\/posts\/?feedView=all"]},{"@type":"WebPage","@id":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/#webpage","url":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/","name":"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D","description":"D\u00e9couvrez comment Sunsplash a transform\u00e9 le logo 2D d\u2019Owlshake en mascotte 3D anim\u00e9e puis l\u2019a int\u00e9gr\u00e9e dans une prise de vue r\u00e9elle pour Ocean Days \u00e0 Bordeaux.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.sunsplash.fr\/en\/#website"},"breadcrumb":{"@id":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/#breadcrumblist"},"datePublished":"2026-08-14T09:27:18+02:00","dateModified":"2026-08-17T10:21:20+02:00"},{"@type":"WebSite","@id":"https:\/\/www.sunsplash.fr\/en\/#website","url":"https:\/\/www.sunsplash.fr\/en\/","name":"Sunsplash","description":"Penser au-del\u00e0 du format","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.sunsplash.fr\/en\/#organization"}}]},"og:locale":"en_US","og:site_name":"Sunsplash - Penser au-del\u00e0 du format","og:type":"article","og:title":"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D","og:description":"D\u00e9couvrez comment Sunsplash a transform\u00e9 le logo 2D d\u2019Owlshake en mascotte 3D anim\u00e9e puis l\u2019a int\u00e9gr\u00e9e dans une prise de vue r\u00e9elle pour Ocean Days \u00e0 Bordeaux.","og:url":"https:\/\/www.sunsplash.fr\/owlshake\/","og:image":"https:\/\/sunsplash.fr\/wp-content\/uploads\/2025\/10\/LOGO_officiel_blanc-e1761741950460.webp","og:image:secure_url":"https:\/\/sunsplash.fr\/wp-content\/uploads\/2025\/10\/LOGO_officiel_blanc-e1761741950460.webp","article:published_time":"2026-08-14T07:27:18+00:00","article:modified_time":"2026-08-17T08:21:20+00:00","twitter:card":"summary_large_image","twitter:title":"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D","twitter:description":"D\u00e9couvrez comment Sunsplash a transform\u00e9 le logo 2D d\u2019Owlshake en mascotte 3D anim\u00e9e puis l\u2019a int\u00e9gr\u00e9e dans une prise de vue r\u00e9elle pour Ocean Days \u00e0 Bordeaux.","twitter:image":"https:\/\/sunsplash.fr\/wp-content\/uploads\/2025\/10\/LOGO_officiel_blanc-e1761741950460.webp"},"aioseo_meta_data":{"post_id":"2993","title":null,"description":"D\u00e9couvrez comment Sunsplash a transform\u00e9 le logo 2D d\u2019Owlshake en mascotte 3D anim\u00e9e puis l\u2019a int\u00e9gr\u00e9e dans une prise de vue r\u00e9elle pour Ocean Days \u00e0 Bordeaux.","keywords":null,"keyphrases":{"focus":{"keyphrase":"mascotte 3D","score":0,"analysis":[]},"additional":[]},"primary_term":null,"canonical_url":"https:\/\/www.sunsplash.fr\/owlshake\/","og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-08-14 07:28:38","updated":"2026-08-17 12:49:34","seo_analyzer_scan_date":null,"focus_keyword":"mascotte 3D","additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.sunsplash.fr\/en\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tCr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.sunsplash.fr\/en"},{"label":"Cr\u00e9ation d\u2019une mascotte 3D pour Owlshake | integration 3D","link":"https:\/\/www.sunsplash.fr\/en\/owlshake-2\/"}],"_links":{"self":[{"href":"https:\/\/www.sunsplash.fr\/en\/wp-json\/wp\/v2\/pages\/2993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sunsplash.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sunsplash.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sunsplash.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sunsplash.fr\/en\/wp-json\/wp\/v2\/comments?post=2993"}],"version-history":[{"count":16,"href":"https:\/\/www.sunsplash.fr\/en\/wp-json\/wp\/v2\/pages\/2993\/revisions"}],"predecessor-version":[{"id":3061,"href":"https:\/\/www.sunsplash.fr\/en\/wp-json\/wp\/v2\/pages\/2993\/revisions\/3061"}],"wp:attachment":[{"href":"https:\/\/www.sunsplash.fr\/en\/wp-json\/wp\/v2\/media?parent=2993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}