{"id":31,"date":"2026-01-15T16:08:43","date_gmt":"2026-01-15T16:08:43","guid":{"rendered":"https:\/\/olah-agency.com\/?page_id=31"},"modified":"2026-10-15T19:20:13","modified_gmt":"2026-10-15T19:20:13","slug":"works","status":"publish","type":"page","link":"https:\/\/olah-agency.com\/fr\/works\/","title":{"rendered":"Our Projects | Creative Portfolio &amp; Case Studies | OLAH Agency"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"31\" class=\"elementor elementor-31\">\n\t\t\t\t<div class=\"elementor-element elementor-element-007ff7a e-con-full e-flex e-con e-parent\" data-id=\"007ff7a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bd0d84 elementor-widget elementor-widget-html\" data-id=\"1bd0d84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\">\r\n <head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Olah Agency Navigation<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;700;800;900&family=Manrope:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body { box-sizing: border-box; margin: 0; padding: 0; }\r\n    *, *::before, *::after { box-sizing: inherit; }\r\n    html, body { height: 100%; width: 100%; }\r\n\r\n    \/* \u2500\u2500\u2500 NAVBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-nav-header {\r\n      position: fixed;\r\n      top: 0; left: 0; right: 0;\r\n      width: 100%;\r\n      background: #000000;\r\n      z-index: 9999;\r\n      padding: 20px 40px;\r\n      font-family: 'League Spartan', sans-serif;\r\n    }\r\n\r\n    .olah-nav-container {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      gap: 40px;\r\n      height: 46px;\r\n    }\r\n\r\n    .olah-nav-section {\r\n      display: flex;\r\n      gap: 30px;\r\n      align-items: center;\r\n      flex: 1;\r\n    }\r\n    .olah-nav-section.left { justify-content: flex-start; }\r\n    .olah-nav-section.right { justify-content: flex-end; }\r\n\r\n    .olah-logo-section {\r\n      flex-shrink: 0;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 LOGO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-logo-wrapper {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      cursor: pointer;\r\n      text-decoration: none;\r\n      flex-direction: column;\r\n      gap: 0;\r\n    }\r\n\r\n    \/* OLAH logo image: forced white at rest, true colors on hover *\/\r\n    .olah-logo-wordmark-img {\r\n      height: 34px !important;\r\n      width: auto !important;\r\n      max-width: none !important;\r\n      max-height: 34px !important;\r\n      display: block !important;\r\n      margin: 0 !important;\r\n      align-self: flex-start;\r\n      filter: brightness(0) invert(1);\r\n      transition: filter 300ms ease, transform 350ms cubic-bezier(0.4, 0.0, 0.2, 1);\r\n    }\r\n\r\n    .olah-logo-wrapper:hover .olah-logo-wordmark-img {\r\n      filter: none;\r\n      transform: translateY(-6px);\r\n    }\r\n\r\n    \/* AGENCY logo image reveal row (replaces the old bar + text) *\/\r\n    .olah-logo-agency-row {\r\n      display: flex;\r\n      justify-content: flex-start;\r\n      align-items: center;\r\n      align-self: flex-start;\r\n      max-height: 0;\r\n      opacity: 0;\r\n      overflow: hidden;\r\n      transition:\r\n        max-height 0ms ease 300ms,\r\n        opacity 250ms ease 40ms;\r\n    }\r\n\r\n    .olah-logo-wrapper:hover .olah-logo-agency-row {\r\n      max-height: 24px;\r\n      opacity: 1;\r\n      transition:\r\n        max-height 0ms ease 0ms,\r\n        opacity 250ms ease 40ms;\r\n    }\r\n\r\n    .olah-logo-agency-img {\r\n      height: 9px !important;\r\n      width: auto !important;\r\n      max-width: none !important;\r\n      max-height: 9px !important;\r\n      display: block !important;\r\n      margin: 4px 0 0 0 !important;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 NAV LINKS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-nav-link {\r\n      display: flex;\r\n      align-items: center;\r\n      text-decoration: none;\r\n      color: #ffffff;\r\n      position: relative;\r\n      min-height: 30px;\r\n    }\r\n\r\n    .olah-nav-link-inner {\r\n      overflow: hidden;\r\n      height: 28px;\r\n      position: relative;\r\n    }\r\n\r\n    .olah-nav-text-stack {\r\n      display: flex;\r\n      flex-direction: column;\r\n      transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);\r\n      will-change: transform;\r\n    }\r\n\r\n    .olah-nav-text {\r\n      font-size: 18px;\r\n      font-weight: 700;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.08em;\r\n      line-height: 28px;\r\n      white-space: nowrap;\r\n      height: 28px;\r\n      display: block;\r\n      color: #ffffff;\r\n      transition: color 300ms ease;\r\n    }\r\n\r\n    .olah-nav-text.hover-text { color: #fe6f5e; }\r\n\r\n    .olah-nav-link:hover .olah-nav-text-stack,\r\n    .olah-nav-link:focus .olah-nav-text-stack { transform: translateY(-28px); }\r\n\r\n    .olah-nav-link:hover .olah-nav-text,\r\n    .olah-nav-link:focus .olah-nav-text { color: #fe6f5e; }\r\n\r\n    .olah-nav-link.always-orange .olah-nav-text { color: #fe6f5e; }\r\n\r\n    .olah-nav-link:focus { outline: 2px solid #ffffff; outline-offset: 4px; }\r\n\r\n    \/* \u2500\u2500\u2500 SHIMMER (LET'S TALK + IMPACT) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-nav-link.always-orange .olah-nav-text:not(.hover-text) {\r\n      background: linear-gradient(\r\n        105deg,\r\n        #fe6f5e 0%, #fe6f5e 30%,\r\n        #ffcec7 44%, #ffffff 50%,\r\n        #ffcec7 56%, #fe6f5e 70%, #fe6f5e 100%\r\n      );\r\n      background-size: 250% 100%;\r\n      background-clip: text;\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n      color: transparent;\r\n      animation: letstalk-shimmer 3.2s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes letstalk-shimmer {\r\n      0%   { background-position: 150% center; }\r\n      100% { background-position: -50% center; }\r\n    }\r\n\r\n    .olah-nav-link.always-orange:hover .olah-nav-text:not(.hover-text) {\r\n      animation-play-state: paused;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 MOBILE ELEMENTS (cach\u00e9s sur desktop) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-mobile-logo    { display: none; }\r\n    .olah-menu-btn       { display: none; }\r\n    .olah-mobile-spacer  { display: none; }\r\n\r\n    \/* \u2500\u2500\u2500 FIX ELEMENTOR \u2014 reset complet des boutons \u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-close-btn,\r\n    .olah-menu-btn {\r\n      background: none !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border: none !important;\r\n      border-radius: 0 !important;\r\n      box-shadow: none !important;\r\n      -webkit-appearance: none !important;\r\n      appearance: none !important;\r\n      padding: 0 !important;\r\n      margin: 0 !important;\r\n      outline: none !important;\r\n      text-shadow: none !important;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 FULLSCREEN MENU \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-fullscreen-menu {\r\n      position: fixed;\r\n      inset: 0;\r\n      background: #000000;\r\n      z-index: 99999;\r\n      display: flex;\r\n      flex-direction: column;\r\n      padding: 24px 24px 48px;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      transform: translateY(-10px);\r\n      transition: opacity 350ms ease, transform 350ms ease;\r\n    }\r\n\r\n    .olah-fullscreen-menu.open {\r\n      opacity: 1;\r\n      pointer-events: all;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    .olah-menu-top {\r\n      display: flex;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .olah-close-btn {\r\n      color: #ffffff !important;\r\n      font-family: 'League Spartan', sans-serif !important;\r\n      font-weight: 700 !important;\r\n      font-size: 18px !important;\r\n      letter-spacing: 0.08em !important;\r\n      text-transform: uppercase !important;\r\n      cursor: pointer !important;\r\n      opacity: 0.9;\r\n      transition: opacity 200ms ease;\r\n    }\r\n\r\n    .olah-close-btn:hover { opacity: 1; }\r\n\r\n    .olah-menu-links {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 16px;\r\n      margin-top: auto;\r\n    }\r\n\r\n    .olah-menu-item {\r\n      text-decoration: none;\r\n      font-family: 'League Spartan', sans-serif;\r\n      font-weight: 900;\r\n      font-size: clamp(42px, 10vw, 72px);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.02em;\r\n      color: #fe6f5e;\r\n      line-height: 1;\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n      transition: opacity 300ms ease, transform 300ms ease, color 200ms ease;\r\n    }\r\n\r\n    .olah-menu-item:hover { color: #ffffff; }\r\n\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 140ms; }\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 260ms; }\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }\r\n\r\n    \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .olah-nav-text-stack { transition: none; }\r\n      .olah-logo-wordmark-img { transition: none; }\r\n      .olah-nav-link.always-orange .olah-nav-text:not(.hover-text) { animation: none; }\r\n      .olah-menu-btn { animation: none !important; }\r\n    }\r\n\r\n    @media (max-width: 1024px) {\r\n      .olah-nav-container { gap: 20px; }\r\n      .olah-nav-section { gap: 20px; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .olah-nav-section.left,\r\n      .olah-nav-section.right,\r\n      .olah-logo-section { display: none; }\r\n\r\n      .olah-nav-header { padding: 16px 24px; }\r\n\r\n      .olah-nav-container {\r\n        display: grid;\r\n        grid-template-columns: 1fr auto 1fr;\r\n        align-items: center;\r\n        gap: 0;\r\n        height: auto;\r\n      }\r\n\r\n      .olah-mobile-spacer {\r\n        display: block;\r\n        justify-self: start;\r\n      }\r\n\r\n      .olah-mobile-logo {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        text-decoration: none;\r\n        justify-self: center;\r\n        flex-direction: column;\r\n        gap: 0;\r\n      }\r\n\r\n      .olah-mobile-logo .olah-logo-wordmark-img {\r\n        height: 20px !important;\r\n        max-height: 20px !important;\r\n      }\r\n\r\n      .olah-mobile-logo .olah-logo-agency-img {\r\n        height: 6px !important;\r\n        max-height: 6px !important;\r\n        margin-top: 3px !important;\r\n      }\r\n\r\n      .olah-menu-btn {\r\n        display: flex !important;\r\n        align-items: center;\r\n        justify-self: end;\r\n        cursor: pointer !important;\r\n        font-family: 'League Spartan', sans-serif !important;\r\n        font-weight: 700 !important;\r\n        font-size: 18px !important;\r\n        letter-spacing: 0.08em !important;\r\n        text-transform: uppercase !important;\r\n        background: linear-gradient(\r\n          105deg,\r\n          #fe6f5e 0%, #fe6f5e 30%,\r\n          #ffcec7 44%, #ffffff 50%,\r\n          #ffcec7 56%, #fe6f5e 70%, #fe6f5e 100%\r\n        ) !important;\r\n        background-size: 250% 100% !important;\r\n        background-clip: text !important;\r\n        -webkit-background-clip: text !important;\r\n        -webkit-text-fill-color: transparent !important;\r\n        animation: letstalk-shimmer 3.2s ease-in-out infinite !important;\r\n      }\r\n\r\n      .olah-menu-btn:hover { animation-play-state: paused !important; }\r\n    }\r\n  <\/style>\r\n <\/head>\r\n <body>\r\n\r\n  <!-- \u2500\u2500\u2500 NAVBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <header class=\"olah-nav-header\">\r\n   <nav class=\"olah-nav-container\">\r\n\r\n    <!-- Desktop gauche : WORKS \u2014 ABOUT \u2014 JOURNAL -->\r\n    <div class=\"olah-nav-section left\">\r\n      <a href=\"https:\/\/olah-agency.com\/works\/\" class=\"olah-nav-link\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">WORKS<\/span>\r\n            <span class=\"olah-nav-text hover-text\">WORKS<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/about\/\" class=\"olah-nav-link\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">ABOUT<\/span>\r\n            <span class=\"olah-nav-text hover-text\">ABOUT<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/journal-logbook-guestbook\/\" class=\"olah-nav-link\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">JOURNAL<\/span>\r\n            <span class=\"olah-nav-text hover-text\">JOURNAL<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Logo desktop centr\u00e9 \u2014 image OLAH forc\u00e9e en blanc, AGENCY en reveal au survol -->\r\n    <div class=\"olah-logo-section\">\r\n      <a href=\"https:\/\/olah-agency.com\/\" class=\"olah-logo-wrapper\" id=\"olahLogoWrapper\" aria-label=\"Olah Agency \u2014 Home\">\r\n        <img decoding=\"async\" class=\"olah-logo-wordmark-img\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/OLAH-scaled.png\" alt=\"OLAH\" width=\"120\" height=\"34\">\r\n        <div class=\"olah-logo-agency-row\">\r\n          <img decoding=\"async\" class=\"olah-logo-agency-img\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/AGENCY-scaled.png\" alt=\"AGENCY\" width=\"80\" height=\"12\">\r\n        <\/div>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Desktop droite : IMPACT \u2014 LET'S TALK -->\r\n    <div class=\"olah-nav-section right\">\r\n      <a href=\"https:\/\/olah-agency.com\/impact\/\" class=\"olah-nav-link always-orange\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">IMPACT<\/span>\r\n            <span class=\"olah-nav-text hover-text\">IMPACT<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/lets-talk-book-a-stay\/\" class=\"olah-nav-link always-orange\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">LET'S TALK<\/span>\r\n            <span class=\"olah-nav-text hover-text\">LET'S TALK<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Spacer invisible mobile (colonne gauche) -->\r\n    <div class=\"olah-mobile-spacer\" aria-hidden=\"true\"><\/div>\r\n\r\n    <!-- Logo mobile centr\u00e9 \u2014 m\u00eame structure image -->\r\n    <a href=\"https:\/\/olah-agency.com\/\" class=\"olah-mobile-logo olah-logo-wrapper\" id=\"olahMobileLogo\" aria-label=\"Olah Agency \u2014 Home\">\r\n      <img decoding=\"async\" class=\"olah-logo-wordmark-img\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/OLAH-scaled.png\" alt=\"OLAH\" width=\"120\" height=\"34\">\r\n      <div class=\"olah-logo-agency-row\">\r\n        <img decoding=\"async\" class=\"olah-logo-agency-img\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/AGENCY-scaled.png\" alt=\"AGENCY\" width=\"80\" height=\"12\">\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <!-- Bouton MENU mobile (colonne droite) -->\r\n    <button class=\"olah-menu-btn\" id=\"menuBtn\" aria-label=\"Ouvrir le menu\" aria-expanded=\"false\" aria-controls=\"fullMenu\">\r\n      MENU\r\n    <\/button>\r\n\r\n   <\/nav>\r\n  <\/header>\r\n\r\n  <!-- \u2500\u2500\u2500 MENU PLEIN \u00c9CRAN MOBILE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"olah-fullscreen-menu\" id=\"fullMenu\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Menu de navigation\">\r\n    <div class=\"olah-menu-top\">\r\n      <button class=\"olah-close-btn\" id=\"closeBtn\" aria-label=\"Fermer le menu\">CLOSE<\/button>\r\n    <\/div>\r\n    <nav class=\"olah-menu-links\">\r\n      <a href=\"https:\/\/olah-agency.com\/works\/\" class=\"olah-menu-item\">WORKS<\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/about\/\" class=\"olah-menu-item\">ABOUT<\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/journal-logbook-guestbook\/\" class=\"olah-menu-item\">JOURNAL<\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/impact\/\" class=\"olah-menu-item\">IMPACT<\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/lets-talk-book-a-stay\/\" class=\"olah-menu-item\">LET'S TALK<\/a>\r\n    <\/nav>\r\n  <\/div>\r\n\r\n  <script>\r\n    \/* \u2500\u2500\u2500 MENU MOBILE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    const menu     = document.getElementById('fullMenu');\r\n    const menuBtn  = document.getElementById('menuBtn');\r\n    const closeBtn = document.getElementById('closeBtn');\r\n\r\n    function openMenu() {\r\n      menu.classList.add('open');\r\n      menuBtn.setAttribute('aria-expanded', 'true');\r\n      document.body.style.overflow = 'hidden';\r\n      closeBtn.focus();\r\n    }\r\n\r\n    function closeMenu() {\r\n      menu.classList.remove('open');\r\n      menuBtn.setAttribute('aria-expanded', 'false');\r\n      document.body.style.overflow = '';\r\n      menuBtn.focus();\r\n    }\r\n\r\n    menuBtn.addEventListener('click', openMenu);\r\n    closeBtn.addEventListener('click', closeMenu);\r\n    document.addEventListener('keydown', e => {\r\n      if (e.key === 'Escape' && menu.classList.contains('open')) closeMenu();\r\n    });\r\n  <\/script>\r\n\r\n <\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-686c5b3 e-con-full e-flex e-con e-parent\" data-id=\"686c5b3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63125af elementor-widget elementor-widget-html\" data-id=\"63125af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n<title>OLAH AGENCY \u2014 Works<\/title>\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=Be+Vietnam+Pro:wght@400;600&family=League+Spartan:wght@400;700;900&family=Manrope:wght@300;400;500&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n<style>\r\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n  :root {\r\n    --bg:        #000000;\r\n    --text:      #f5f5f5;\r\n    --secondary: #bdbdbd;\r\n    --muted:     #8f8f8f;\r\n    --accent:    #fe6f5e;\r\n    --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  }\r\n\r\n  html { background: var(--bg); color: var(--text); }\r\n  body { font-family: 'Manrope', sans-serif; background: var(--bg); overflow-x: hidden; }\r\n\r\n  .hero-container {\r\n    position: relative; width: 100%; min-height: 40vh;\r\n    background-color: #000; display: flex; align-items: center;\r\n    justify-content: center; padding: 4rem 3rem 1.5rem;\r\n  }\r\n  .hero-inner { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; }\r\n\r\n  .hero-title {\r\n    font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600;\r\n    letter-spacing: 0.02em; line-height: 1.1; text-align: center;\r\n    font-size: clamp(2.5rem, 11vw, 9rem); display: block; width: 100%; padding-bottom: 0.12em;\r\n    color: transparent; -webkit-text-stroke: 2px #fe6f5e;\r\n    background: linear-gradient(90deg, #fe6f5e 50%, transparent 50%);\r\n    background-size: 200% 100%; background-position: 100%;\r\n    -webkit-background-clip: text; background-clip: text;\r\n    opacity: 0;\r\n    animation: fadeIn 600ms ease 300ms forwards, stroke-fill 2.6s cubic-bezier(0.77,0,0.18,1) 900ms infinite alternate;\r\n  }\r\n  @keyframes fadeIn { to { opacity: 1; } }\r\n  @keyframes stroke-fill {\r\n    0%        { background-position: 100%; color: transparent; -webkit-text-stroke: 2px #fe6f5e; }\r\n    65%, 100% { background-position: 0%;  color: #fe6f5e;     -webkit-text-stroke: 0px transparent; }\r\n  }\r\n  @keyframes fadeInEl { from { opacity: 0; } to { opacity: 1; } }\r\n\r\n  #all-works {\r\n    position: relative; width: 100%; min-height: 100vh; background: var(--bg);\r\n    display: flex; flex-direction: column; align-items: center; padding: 8px 40px 100px;\r\n  }\r\n\r\n  .works-header {\r\n    width: 100%; max-width: 1200px; margin-bottom: 24px;\r\n    display: flex; flex-direction: column; align-items: center; gap: 28px;\r\n  }\r\n\r\n  .search-wrapper {\r\n    position: relative; width: 100%; max-width: 520px;\r\n    opacity: 0; animation: fadeInEl 700ms ease 600ms forwards;\r\n  }\r\n  .search-input {\r\n    width: 100%; background: transparent; border: none;\r\n    border-bottom: 1px solid #303030; color: var(--text);\r\n    font-family: 'Manrope', sans-serif; font-weight: 300;\r\n    font-size: clamp(14px, 1.5vw, 18px); letter-spacing: 0.22em;\r\n    text-transform: uppercase; padding: 10px 28px 10px 0;\r\n    outline: none; transition: border-color 300ms var(--ease);\r\n    caret-color: var(--accent); -webkit-appearance: none; appearance: none;\r\n  }\r\n  .search-input::-webkit-search-cancel-button,\r\n  .search-input::-webkit-search-decoration,\r\n  .search-input::-ms-clear { display: none; }\r\n  .search-input::placeholder { color: #303030; letter-spacing: 0.22em; }\r\n  .search-input:focus { border-bottom-color: var(--accent); }\r\n  .search-input:focus::placeholder { color: #444; }\r\n  .search-clear {\r\n    position: absolute; right: 0; top: 50%; transform: translateY(-50%);\r\n    background: none !important; border: none !important; outline: none !important;\r\n    color: var(--muted); cursor: pointer; padding: 4px 0; font-size: 13px;\r\n    opacity: 0; pointer-events: none;\r\n    transition: opacity 200ms var(--ease), color 200ms var(--ease);\r\n    font-family: 'Manrope', sans-serif;\r\n  }\r\n  .search-clear.visible { opacity: 0.35; pointer-events: auto; }\r\n  .search-clear.visible:hover { opacity: 1; color: var(--accent); }\r\n\r\n  .works-filters {\r\n    display: flex; flex-wrap: wrap; justify-content: center;\r\n    gap: 0; align-items: center; list-style: none;\r\n    opacity: 0; animation: fadeInEl 700ms ease 800ms forwards;\r\n  }\r\n  .works-filters li { position: relative; }\r\n  .filter-btn {\r\n    background: none !important; border: none !important; outline: none !important;\r\n    font-family: 'Manrope', sans-serif; font-weight: 300;\r\n    font-size: clamp(13px, 1.4vw, 17px); letter-spacing: 0.18em;\r\n    text-transform: uppercase; color: var(--muted); cursor: pointer;\r\n    padding: 8px 0; margin: 0 22px; position: relative;\r\n    transition: color 350ms var(--ease); display: inline-block;\r\n  }\r\n  .filter-btn::after {\r\n    content: ''; position: absolute; bottom: 0; left: 0; width: 0;\r\n    height: 1px; background: var(--accent); transition: width 350ms var(--ease);\r\n  }\r\n  .filter-btn:hover, .filter-btn:focus-visible { color: var(--accent) !important; }\r\n  .filter-btn:hover::after, .filter-btn:focus-visible::after { width: 100%; }\r\n  .filter-btn.active { color: var(--text) !important; }\r\n  .filter-btn.active::after { width: 100%; background: var(--text); }\r\n\r\n  .works-stage {\r\n    position: relative; width: 100%; max-width: 1400px;\r\n    display: grid; grid-template-columns: 140px 1fr 420px;\r\n    gap: 0; align-items: center; min-height: 580px;\r\n  }\r\n  .carousel-col {\r\n    position: relative; display: flex; flex-direction: column;\r\n    align-items: center; height: 580px; overflow: hidden;\r\n    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);\r\n    mask-image:         linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);\r\n  }\r\n  .carousel-track {\r\n    position: absolute; top: 0; left: 0; right: 0;\r\n    display: flex; flex-direction: column; align-items: center;\r\n    text-align: center; will-change: transform;\r\n  }\r\n\r\n  .project-item {\r\n    width: 100%; max-width: 520px; text-align: center; padding: 22px 0;\r\n    cursor: pointer; outline: none; -webkit-user-select: none; user-select: none;\r\n  }\r\n  .project-item .proj-name {\r\n    font-family: 'League Spartan', sans-serif; font-weight: 700;\r\n    font-size: clamp(22px, 3.2vw, 38px); letter-spacing: 0.06em;\r\n    text-transform: uppercase; color: var(--muted); line-height: 1.05;\r\n    transition: color 350ms var(--ease), font-size 350ms var(--ease);\r\n  }\r\n  .project-item .proj-name-link {\r\n    color: inherit; text-decoration: none; display: inline-block;\r\n    transition: color 350ms var(--ease);\r\n  }\r\n  .project-item.is-active .proj-name-link:hover { color: var(--accent); }\r\n  .project-item .proj-meta {\r\n    font-family: 'Manrope', sans-serif; font-weight: 300;\r\n    font-size: clamp(9px, 0.9vw, 11px); letter-spacing: 0.22em;\r\n    text-transform: uppercase; color: var(--muted); margin-top: 5px;\r\n    opacity: 0.5; transition: color 350ms var(--ease), opacity 350ms var(--ease);\r\n  }\r\n  .project-item.is-active .proj-name { color: var(--text); font-size: clamp(28px, 4.2vw, 52px); }\r\n  .project-item.is-active .proj-meta { color: var(--secondary); opacity: 1; }\r\n  .project-item:hover .proj-name, .project-item:focus-visible .proj-name { color: var(--text); }\r\n  .project-item:hover .proj-meta, .project-item:focus-visible .proj-meta { color: var(--secondary); opacity: 1; }\r\n\r\n  .item-media { display: none; }\r\n\r\n  .accent-dot {\r\n    display: inline-block; width: 4px; height: 4px; border-radius: 50%;\r\n    background: var(--accent); margin-right: 10px; vertical-align: middle;\r\n    opacity: 0; transition: opacity 350ms var(--ease);\r\n  }\r\n  .project-item.is-active .accent-dot { opacity: 1; }\r\n\r\n  .preview-col {\r\n    position: relative; height: 580px; display: flex; align-items: center;\r\n    justify-content: flex-start; margin-left: -60px; z-index: 10;\r\n  }\r\n  .preview-wrapper {\r\n    position: relative; width: 300px; aspect-ratio: 9\/16;\r\n    overflow: hidden; transform: rotate(2.5deg);\r\n  }\r\n  .preview-video, .preview-image {\r\n    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;\r\n    opacity: 0; transition: opacity 450ms var(--ease), transform 450ms var(--ease);\r\n    transform: translateX(10px); pointer-events: none;\r\n  }\r\n  .preview-video.is-visible, .preview-image.is-visible { opacity: 1; transform: translateX(0); }\r\n  .preview-link {\r\n    display: block; position: absolute; inset: 0; z-index: 20;\r\n    cursor: pointer; text-decoration: none;\r\n  }\r\n\r\n  .no-results {\r\n    padding: 60px 0; font-family: 'Manrope', sans-serif; font-size: 11px;\r\n    letter-spacing: 0.22em; text-transform: uppercase; color: #8f8f8f;\r\n    opacity: 0.4; text-align: center;\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    #all-works { padding: 80px 28px 80px; }\r\n    .works-stage { grid-template-columns: 1fr; min-height: auto; }\r\n    .works-stage-spacer { display: none; }\r\n    .carousel-col { height: 460px; }\r\n    .preview-col { height: auto; padding: 48px 0 0; justify-content: center; }\r\n    .preview-wrapper { width: 240px; }\r\n    .search-wrapper { max-width: 400px; }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .hero-container { min-height: auto; padding: 5.5rem 1.5rem 1rem; }\r\n    #all-works { padding: 16px 20px 60px; }\r\n    .works-header { gap: 20px; }\r\n    .works-filters { flex-wrap: wrap; overflow-x: visible; justify-content: center; row-gap: 4px; }\r\n    .filter-btn { margin: 0 12px; white-space: nowrap; }\r\n    .search-wrapper { max-width: 100%; }\r\n\r\n    .works-stage { display: flex; flex-direction: column; gap: 0; width: 100%; }\r\n    .works-stage-spacer { display: none; }\r\n    .preview-col { display: none; }\r\n\r\n    .carousel-col {\r\n      height: 300px; min-height: 0; max-height: none;\r\n      width: 100%; overflow: hidden; position: relative;\r\n      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 88%, transparent 100%);\r\n      mask-image:         linear-gradient(to right, transparent 0%, #000 6%, #000 88%, transparent 100%);\r\n    }\r\n    .carousel-track {\r\n      flex-direction: row;\r\n      align-items: flex-start;\r\n      text-align: left;\r\n      height: 100%;\r\n      right: auto;\r\n    }\r\n\r\n    .project-item {\r\n      flex: 0 0 auto;\r\n      width: 220px; max-width: 220px;\r\n      padding: 0 14px;\r\n    }\r\n\r\n    .item-media {\r\n      display: block; width: 100%; aspect-ratio: 1\/1; position: relative;\r\n      overflow: hidden; background: #0a0a0a; margin-bottom: 12px;\r\n      opacity: 0; transform: scale(0.97);\r\n      transition: opacity 400ms var(--ease), transform 400ms var(--ease);\r\n    }\r\n    .project-item.is-active .item-media { opacity: 1; transform: scale(1); }\r\n    .item-media video, .item-media img {\r\n      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;\r\n    }\r\n\r\n    .project-item .proj-name { font-size: clamp(18px, 5vw, 24px); }\r\n    .project-item.is-active .proj-name { font-size: clamp(20px, 5.5vw, 26px); color: var(--text); }\r\n    .project-item .proj-meta { font-size: 10px; opacity: 0.6; }\r\n    .project-item.is-active .proj-meta { opacity: 1; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .hero-title { animation: none; opacity: 1; color: #fe6f5e; -webkit-text-stroke: 0; background-position: 0%; }\r\n    .search-wrapper, .works-filters { animation: none; opacity: 1; }\r\n    .preview-video, .preview-image { transition: none; }\r\n    .project-item, .project-item .proj-name, .project-item .proj-meta, .item-media { transition: none; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"hero-container\">\r\n  <div class=\"hero-inner\">\r\n    <h1 class=\"hero-title\">Works<\/h1>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section id=\"all-works\" aria-label=\"All Works\">\r\n\r\n  <header class=\"works-header\">\r\n    <div class=\"search-wrapper\" role=\"search\">\r\n      <input type=\"text\" id=\"searchInput\" class=\"search-input\" placeholder=\"Search\"\r\n        autocomplete=\"off\" spellcheck=\"false\" aria-label=\"Search projects\" \/>\r\n      <button class=\"search-clear\" id=\"searchClear\" aria-label=\"Clear search\" tabindex=\"-1\">&#10005;<\/button>\r\n    <\/div>\r\n    <nav aria-label=\"Project category filters\">\r\n      <ul class=\"works-filters\" role=\"list\">\r\n        <li><button class=\"filter-btn active\" data-filter=\"ALL\"          aria-pressed=\"true\">All<\/button><\/li>\r\n        <li><button class=\"filter-btn\"         data-filter=\"SOCIAL\"      aria-pressed=\"false\">Social Media<\/button><\/li>\r\n        <li><button class=\"filter-btn\"         data-filter=\"VISUAL\"      aria-pressed=\"false\">Visual Production<\/button><\/li>\r\n        <li><button class=\"filter-btn\"         data-filter=\"BRANDING\"    aria-pressed=\"false\">Branding<\/button><\/li>\r\n        <li><button class=\"filter-btn\"         data-filter=\"E-COMMERCE\"  aria-pressed=\"false\">E-Commerce<\/button><\/li>\r\n        <li><button class=\"filter-btn\"         data-filter=\"WEB\"         aria-pressed=\"false\">Web<\/button><\/li>\r\n      <\/ul>\r\n    <\/nav>\r\n  <\/header>\r\n\r\n  <div class=\"works-stage\" id=\"worksStage\">\r\n    <div class=\"works-stage-spacer\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"carousel-col\" id=\"carouselCol\" aria-live=\"polite\" aria-label=\"Project list\">\r\n      <div class=\"carousel-track\" id=\"carouselTrack\"><\/div>\r\n    <\/div>\r\n    <aside class=\"preview-col\" aria-label=\"Project preview\">\r\n      <div class=\"preview-wrapper\" id=\"previewWrapper\"><\/div>\r\n    <\/aside>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  const PROJECTS = [\r\n    {\r\n      id:'p1', name:'1480', category:'VISUAL', year:2025,\r\n      previewType:'video',\r\n      video:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/copy_A740F26E-C79B-478C-A524-FBC9844D58BE.mov'\r\n    },\r\n    {\r\n      id:'p2', name:'Intercontinental', category:'VISUAL', year:2025,\r\n      previewType:'video',\r\n      video:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/copy_100703A2-0064-496F-AAFD-5A5D129E0F84.mov'\r\n    },\r\n    {\r\n      id:'p3', name:'Atomium', category:'VISUAL', year:2025,\r\n      previewType:'video',\r\n      video:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/Teaser-Atomium.mp4'\r\n    },\r\n    {\r\n      id:'p4', name:'Ostron', category:'VISUAL', year:2025,\r\n      previewType:'image',\r\n      image:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/A7401725-scaled.jpg',\r\n      url:'https:\/\/olah-agency.com\/1268-2\/'\r\n    },\r\n    {\r\n      id:'p5', name:'Gabylou', category:'E-COMMERCE', year:2025,\r\n      previewType:'image',\r\n      image:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/Paris-Main.png',\r\n      url:'https:\/\/olah-agency.com\/gabylou\/'\r\n    },\r\n    {\r\n      id:'p6', name:'Boxing', category:'SOCIAL', year:2025,\r\n      previewType:'video',\r\n      video:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/Episode-1-entrainement-regional-3.mp4'\r\n    },\r\n    {\r\n      id:'p7', name:'Football', category:'SOCIAL', year:2025,\r\n      previewType:'video',\r\n      video:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/23E7931B-B1C1-47EE-A2E4-DEAD08D08601.mov'\r\n    },\r\n    {\r\n      id:'p8', name:'Protection Unit', category:'VISUAL', year:2025,\r\n      previewType:'video',\r\n      video:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/Mehdi-x-suricate-Vertical-V10.mp4',\r\n      url:'https:\/\/olah-agency.com\/unit-security\/'\r\n    },\r\n    {\r\n      id:'p9', name:'RAS Saintoise', category:'SOCIAL', year:2025,\r\n      previewType:'video',\r\n      video:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/Last-Game-RAS-saintoise-.mp4',\r\n      url:'https:\/\/olah-agency.com\/ras-santoise\/'\r\n    },\r\n    {\r\n      id:'p10', name:'La Louvi\u00e8re Centre', category:'SOCIAL', year:2025,\r\n      previewType:'video',\r\n      video:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/Maillot-Teaser.mp4',\r\n      url:'https:\/\/olah-agency.com\/la-louviere-centre\/'\r\n    },\r\n    {\r\n      id:'p11', name:'Presseo', category:'BRANDING', year:2025,\r\n      previewType:'image',\r\n      image:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/07\/Logo-Presseo.png'\r\n    },\r\n    {\r\n      id:'p12', name:'Mercedes-Benz Monnier', category:'VISUAL', year:2026,\r\n      previewType:'image',\r\n      image:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/10\/IMG_4162-scaled.jpg',\r\n      url:'https:\/\/olah-agency.com\/mercedes-benz-monnier\/'\r\n    },\r\n    {\r\n      id:'p13', name:'Lumea D\u00e9co', category:'VISUAL', year:2026,\r\n      previewType:'image',\r\n      image:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/10\/A7402473-scaled.jpg',\r\n      url:'https:\/\/olah-agency.com\/lumea-deco\/'\r\n    },\r\n    {\r\n      id:'p14', name:'MSC Cruises', category:'VISUAL', year:2026,\r\n      previewType:'image',\r\n      image:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/10\/270926_MSC_Cruises_037.jpg',\r\n      url:'https:\/\/olah-agency.com\/msc-cruises\/'\r\n    },\r\n    {\r\n      id:'p15', name:'Fun Cup 2025', category:'VISUAL', year:2025,\r\n      previewType:'image',\r\n      image:'https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/10\/A7408815-scaled.jpg',\r\n      url:'https:\/\/olah-agency.com\/fun-cup-2025\/'\r\n    }\r\n  ];\r\n\r\n  let activeFilter  = 'ALL';\r\n  let searchQuery   = '';\r\n  let filteredList  = [...PROJECTS];\r\n  let activeIndex   = 0;\r\n  let hoveredId     = null;\r\n  let isPaused      = false;\r\n  let scrollY       = 0;\r\n  let raf           = null;\r\n  let lastTime      = null;\r\n  const SPEED       = 38;\r\n  const MOBILE_SPEED = 90;\r\n\r\n  const track          = document.getElementById('carouselTrack');\r\n  const previewWrapper = document.getElementById('previewWrapper');\r\n  const filterBtns     = document.querySelectorAll('.filter-btn');\r\n  const colEl          = document.getElementById('carouselCol');\r\n  const searchInput    = document.getElementById('searchInput');\r\n  const searchClear    = document.getElementById('searchClear');\r\n\r\n  const videoCache  = {};\r\n  const imageCache  = {};\r\n  let previewLinkEl = null;\r\n  let lastActiveId  = null;\r\n\r\n  function isMobile() { return window.innerWidth <= 600; }\r\n\r\n  function applyFilters() {\r\n    let list = activeFilter === 'ALL' ? [...PROJECTS] : PROJECTS.filter(p => p.category === activeFilter);\r\n    if (searchQuery) { const q = searchQuery.toLowerCase(); list = list.filter(p => p.name.toLowerCase().includes(q)); }\r\n    return list;\r\n  }\r\n\r\n  function measureItemHeight() {\r\n    var firstItem = track.querySelector('.project-item');\r\n    if (!firstItem) return 110;\r\n    var r = firstItem.getBoundingClientRect();\r\n    var v = isMobile() ? r.width : r.height;\r\n    return v > 0 ? v : 110;\r\n  }\r\n\r\n  function setTrackOffset(val) {\r\n    track.style.transform = isMobile() ? ('translateX(' + val + 'px)') : ('translateY(' + val + 'px)');\r\n  }\r\n\r\n  function buildCarousel() {\r\n    track.innerHTML = '';\r\n    isPaused  = false;\r\n    lastActiveId = null;\r\n\r\n    if (filteredList.length === 0) {\r\n      const empty = document.createElement('div');\r\n      empty.className = 'no-results'; empty.textContent = 'No projects found';\r\n      track.appendChild(empty);\r\n      scrollY = 0; setTrackOffset(0);\r\n      return;\r\n    }\r\n\r\n    const shouldLoop = filteredList.length >= 3;\r\n    const repeated   = shouldLoop\r\n      ? [...filteredList, ...filteredList, ...filteredList]\r\n      : [...filteredList];\r\n\r\n    repeated.forEach(function(proj) {\r\n      const item = document.createElement('div');\r\n      item.className = 'project-item';\r\n      item.setAttribute('role', 'button');\r\n      item.setAttribute('tabindex', '0');\r\n      item.setAttribute('aria-label', proj.name + ' \u2014 ' + proj.category + ' ' + proj.year);\r\n      item.dataset.id = proj.id;\r\n\r\n      const media = document.createElement('div');\r\n      media.className = 'item-media';\r\n      if (proj.previewType === 'image') {\r\n        const img = document.createElement('img');\r\n        img.src = proj.image; img.alt = proj.name; img.loading = 'lazy';\r\n        media.appendChild(img);\r\n      } else {\r\n        const vid = document.createElement('video');\r\n        vid.src = proj.video;\r\n        vid.muted = true; vid.loop = true; vid.playsInline = true; vid.preload = 'none';\r\n        media.appendChild(vid);\r\n      }\r\n\r\n      const nameInner = proj.url\r\n        ? '<a class=\"proj-name-link\" href=\"' + proj.url + '\" tabindex=\"-1\">' + proj.name + '<\/a>'\r\n        : proj.name;\r\n\r\n      const textDiv = document.createElement('div');\r\n      textDiv.innerHTML =\r\n        '<span class=\"accent-dot\" aria-hidden=\"true\"><\/span>' +\r\n        '<div class=\"proj-name\">' + nameInner + '<\/div>' +\r\n        '<div class=\"proj-meta\">' + proj.category + ' \u2014 ' + proj.year + '<\/div>';\r\n\r\n      item.appendChild(media);\r\n      item.appendChild(textDiv);\r\n\r\n      item.addEventListener('mouseenter', function() { if (!isMobile()) onItemHover(proj.id); });\r\n      item.addEventListener('mouseleave', function() { if (!isMobile()) onItemLeave(); });\r\n      item.addEventListener('focus',      function() { if (!isMobile()) onItemHover(proj.id); });\r\n      item.addEventListener('blur',       function() { if (!isMobile()) onItemLeave(); });\r\n      item.addEventListener('keydown', function(e) {\r\n        if (e.key === 'Enter' || e.key === ' ') { if (proj.url) window.location.href = proj.url; }\r\n      });\r\n\r\n      track.appendChild(item);\r\n    });\r\n\r\n    requestAnimationFrame(function() {\r\n      requestAnimationFrame(function() {\r\n        var itemH = measureItemHeight();\r\n        window._olahItemH = itemH;\r\n\r\n        if (filteredList.length === 1) {\r\n          var colRect = colEl.getBoundingClientRect();\r\n          var colLen = isMobile() ? colRect.width : colRect.height;\r\n          scrollY = 0;\r\n          setTrackOffset(colLen \/ 2 - itemH \/ 2);\r\n          var only = track.querySelector('.project-item');\r\n          if (only) { only.classList.add('is-active'); applyActiveMedia(only.dataset.id); }\r\n        } else if (filteredList.length >= 3) {\r\n          scrollY = -(filteredList.length * itemH);\r\n          setTrackOffset(scrollY);\r\n          markActiveItem();\r\n        } else {\r\n          scrollY = 0; setTrackOffset(0);\r\n          markActiveItem();\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  function applyActiveMedia(id) {\r\n    if (!isMobile() || id === lastActiveId) return;\r\n    lastActiveId = id;\r\n    track.querySelectorAll('.item-media video').forEach(function(v) { v.pause(); });\r\n    var activeItems = track.querySelectorAll('.project-item.is-active');\r\n    activeItems.forEach(function(it) {\r\n      var vid = it.querySelector('.item-media video');\r\n      if (vid) { var p = vid.play(); if (p) p.catch(function(){}); }\r\n    });\r\n  }\r\n\r\n  function markActiveItem() {\r\n    var horizontal = isMobile();\r\n    var colRect = colEl.getBoundingClientRect();\r\n    var centerY = horizontal ? (colRect.left + colRect.width \/ 2) : (colRect.top + colRect.height \/ 2);\r\n    var items   = track.querySelectorAll('.project-item');\r\n    var closest = null, minDist = Infinity;\r\n\r\n    items.forEach(function(item) {\r\n      var r    = item.getBoundingClientRect();\r\n      var midY = horizontal ? (r.left + r.width \/ 2) : (r.top + r.height \/ 2);\r\n      var dist = Math.abs(midY - centerY);\r\n      if (dist < minDist) { minDist = dist; closest = item; }\r\n      item.classList.remove('is-active');\r\n    });\r\n\r\n    if (closest) {\r\n      closest.classList.add('is-active');\r\n      var newId   = closest.dataset.id;\r\n      var realIdx = filteredList.findIndex(function(p) { return p.id === newId; });\r\n      if (realIdx !== -1) activeIndex = realIdx;\r\n      if (isMobile()) applyActiveMedia(newId);\r\n    }\r\n  }\r\n\r\n  function tick(now) {\r\n    raf = requestAnimationFrame(tick);\r\n    if (!lastTime) lastTime = now;\r\n    var dt = Math.min((now - lastTime) \/ 1000, 0.05);\r\n    lastTime = now;\r\n\r\n    if (!isPaused && filteredList.length > 1) {\r\n      var itemH     = window._olahItemH || 110;\r\n      var speed     = isMobile() ? MOBILE_SPEED : SPEED;\r\n      var singleLen = filteredList.length * itemH;\r\n      scrollY -= speed * dt;\r\n      if (filteredList.length >= 3) {\r\n        if (scrollY < -(singleLen * 2)) scrollY += singleLen;\r\n        if (scrollY > -singleLen)       scrollY -= singleLen;\r\n      } else {\r\n        if (scrollY < -singleLen) scrollY = 0;\r\n      }\r\n      setTrackOffset(scrollY);\r\n    }\r\n    if (filteredList.length > 1) markActiveItem();\r\n  }\r\n\r\n  function onItemHover(id) { hoveredId = id; isPaused = true; showPreview(id); }\r\n  function onItemLeave()   { hoveredId = null; isPaused = false; hidePreview(); }\r\n\r\n  function updatePreviewLink(proj) {\r\n    if (previewLinkEl && previewLinkEl.parentNode) { previewLinkEl.parentNode.removeChild(previewLinkEl); previewLinkEl = null; }\r\n    if (proj && proj.url) {\r\n      var a = document.createElement('a');\r\n      a.href = proj.url; a.className = 'preview-link';\r\n      a.setAttribute('aria-label', 'Open ' + proj.name);\r\n      previewWrapper.appendChild(a); previewLinkEl = a;\r\n    }\r\n  }\r\n\r\n  function showPreview(id) {\r\n    var proj = PROJECTS.find(function(p) { return p.id === id; });\r\n    if (!proj) return;\r\n    Object.values(videoCache).forEach(function(v) { v.classList.remove('is-visible'); });\r\n    Object.values(imageCache).forEach(function(i) { i.classList.remove('is-visible'); });\r\n    updatePreviewLink(proj);\r\n    if (proj.previewType === 'image') {\r\n      if (!imageCache[id]) {\r\n        var img = document.createElement('img');\r\n        img.src = proj.image; img.className = 'preview-image';\r\n        img.setAttribute('alt', proj.name); img.setAttribute('aria-hidden', 'true');\r\n        previewWrapper.appendChild(img); imageCache[id] = img;\r\n      }\r\n      requestAnimationFrame(function() { imageCache[id].classList.add('is-visible'); });\r\n    } else {\r\n      if (!videoCache[id]) {\r\n        var vid = document.createElement('video');\r\n        vid.src = proj.video; vid.muted = true; vid.autoplay = true;\r\n        vid.loop = true; vid.playsInline = true; vid.preload = 'metadata';\r\n        vid.className = 'preview-video';\r\n        vid.setAttribute('aria-hidden', 'true'); vid.setAttribute('tabindex', '-1');\r\n        previewWrapper.appendChild(vid); videoCache[id] = vid;\r\n      }\r\n      var target = videoCache[id];\r\n      var pp = target.play(); if (pp) pp.catch(function(){});\r\n      requestAnimationFrame(function() { target.classList.add('is-visible'); });\r\n    }\r\n  }\r\n\r\n  function hidePreview() {\r\n    Object.values(videoCache).forEach(function(v) { v.classList.remove('is-visible'); v.pause(); });\r\n    Object.values(imageCache).forEach(function(i) { i.classList.remove('is-visible'); });\r\n    updatePreviewLink(null);\r\n  }\r\n\r\n  function refresh() {\r\n    filteredList = applyFilters();\r\n    activeIndex = 0; hoveredId = null; isPaused = false;\r\n    scrollY = 0; lastTime = null; lastActiveId = null;\r\n    buildCarousel();\r\n    if (filteredList.length === 0) hidePreview();\r\n  }\r\n\r\n  searchInput.addEventListener('input', function() {\r\n    searchQuery = searchInput.value.trim();\r\n    searchClear.classList.toggle('visible', searchQuery.length > 0);\r\n    refresh();\r\n  });\r\n  searchClear.addEventListener('click', function() {\r\n    searchInput.value = ''; searchQuery = '';\r\n    searchClear.classList.remove('visible');\r\n    searchInput.focus(); refresh();\r\n  });\r\n  filterBtns.forEach(function(btn) {\r\n    btn.addEventListener('click', function() {\r\n      var f = btn.dataset.filter;\r\n      if (f === activeFilter) return;\r\n      filterBtns.forEach(function(b) { b.classList.remove('active'); b.setAttribute('aria-pressed','false'); });\r\n      btn.classList.add('active'); btn.setAttribute('aria-pressed','true');\r\n      activeFilter = f; refresh();\r\n    });\r\n  });\r\n\r\n  var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  function init() {\r\n    filteredList = applyFilters();\r\n    buildCarousel();\r\n    if (!prefersReduced) { raf = requestAnimationFrame(tick); }\r\n    else { markActiveItem(); }\r\n  }\r\n\r\n  if (document.fonts && document.fonts.ready) { document.fonts.ready.then(init); }\r\n  else { window.addEventListener('load', init); }\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    var obs = new IntersectionObserver(function(entries) {\r\n      entries.forEach(function(e) {\r\n        if (!e.isIntersecting && !isPaused) {\r\n          if (raf) cancelAnimationFrame(raf); raf = null; lastTime = null;\r\n        } else if (e.isIntersecting && !raf && !prefersReduced) {\r\n          raf = requestAnimationFrame(tick);\r\n        }\r\n      });\r\n    }, { threshold: 0.05 });\r\n    obs.observe(document.getElementById('all-works'));\r\n  }\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-57b2bc4 e-con-full e-flex e-con e-parent\" data-id=\"57b2bc4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-85d776f elementor-widget elementor-widget-html\" data-id=\"85d776f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Footer \u2014 Olah Agency<\/title>\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=Manrope:wght@300;500&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n    html, body { background: transparent; }\r\n\r\n    \/* \u2500\u2500 COMMUN \u2500\u2500 *\/\r\n    .footer {\r\n      width: 100%;\r\n      background: #000;\r\n      padding: 5rem 5vw 3rem;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 2rem;\r\n    }\r\n    .footer-bottom a {\r\n      font-family: 'Manrope', sans-serif;\r\n      font-weight: 300;\r\n      font-size: 0.62rem;\r\n      color: #2e2e2e;\r\n      letter-spacing: 0.12em;\r\n      text-transform: uppercase;\r\n      text-decoration: none;\r\n      transition: color 300ms ease;\r\n    }\r\n    .footer-bottom a:hover { color: #fe6f5e; }\r\n\r\n    \/* \u2500\u2500 DESKTOP \u2500\u2500 *\/\r\n    .footer-row {\r\n      display: flex;\r\n      align-items: baseline;\r\n      justify-content: center;\r\n      gap: 1.2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n    .row-title {\r\n      font-family: 'Manrope', sans-serif;\r\n      font-weight: 500;\r\n      font-size: 1.64rem;\r\n      color: #f5f5f5;\r\n      letter-spacing: 0.06em;\r\n    }\r\n    .footer-row a {\r\n      font-family: 'Manrope', sans-serif;\r\n      font-weight: 300;\r\n      font-size: 1.56rem;\r\n      color: #555;\r\n      text-decoration: none;\r\n      letter-spacing: 0.04em;\r\n      transition: color 300ms ease;\r\n    }\r\n    .footer-row a:hover { color: #fe6f5e; }\r\n    .dot {\r\n      color: #222;\r\n      font-size: 0.5rem;\r\n      line-height: 1;\r\n      align-self: center;\r\n    }\r\n    .footer-bottom {\r\n      margin-top: 2rem;\r\n      border-top: 1px solid #111;\r\n      padding-top: 2rem;\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: center;\r\n    }\r\n\r\n    \/* \u2500\u2500 MOBILE : masqu\u00e9 par d\u00e9faut \u2500\u2500 *\/\r\n    .mobile-section,\r\n    .mobile-double,\r\n    .mobile-divider,\r\n    .mobile-bottom { display: none; }\r\n\r\n    \/* \u2500\u2500 MOBILE \u2500\u2500 *\/\r\n    @media (max-width: 640px) {\r\n\r\n      .footer {\r\n        padding: 3rem 6vw 2.5rem;\r\n        align-items: center;\r\n      }\r\n\r\n      \/* Masquer desktop *\/\r\n      .footer-row { display: none; }\r\n      .footer-bottom { display: none; }\r\n\r\n      \/* Afficher mobile *\/\r\n      .mobile-section {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        width: 100%;\r\n      }\r\n      .mobile-double {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 1.5rem;\r\n        width: 100%;\r\n      }\r\n      .mobile-divider {\r\n        display: block;\r\n        border: none;\r\n        border-top: 1px solid #111;\r\n        width: 100%;\r\n      }\r\n      .mobile-bottom {\r\n        display: flex;\r\n        justify-content: center;\r\n        width: 100%;\r\n      }\r\n      .mobile-bottom a {\r\n        font-family: 'Manrope', sans-serif !important;\r\n        font-weight: 300 !important;\r\n        font-size: 0.62rem !important;\r\n        color: #2e2e2e !important;\r\n        letter-spacing: 0.12em !important;\r\n        text-transform: uppercase !important;\r\n        text-decoration: none !important;\r\n        transition: color 300ms ease !important;\r\n      }\r\n      .mobile-bottom a:hover { color: #fe6f5e !important; }\r\n\r\n      .mobile-title {\r\n        font-family: 'Manrope', sans-serif;\r\n        font-weight: 500;\r\n        font-size: 1.1rem;\r\n        color: #f5f5f5;\r\n        letter-spacing: 0.08em;\r\n        margin-bottom: 0.75rem;\r\n        text-align: center;\r\n      }\r\n      .mobile-links {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 0.4rem 1rem;\r\n        align-items: center;\r\n      }\r\n      .mobile-links a {\r\n        font-family: 'Manrope', sans-serif;\r\n        font-weight: 300;\r\n        font-size: 1rem;\r\n        color: #555;\r\n        text-decoration: none;\r\n        letter-spacing: 0.04em;\r\n        transition: color 300ms ease;\r\n      }\r\n      .mobile-links a:hover { color: #fe6f5e; }\r\n      .mobile-dot {\r\n        color: #2a2a2a;\r\n        font-size: 0.4rem;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n<footer class=\"footer\">\r\n\r\n  <!-- \u2500\u2500 DESKTOP \u2500\u2500 -->\r\n  <div class=\"footer-row\">\r\n    <span class=\"row-title\">Social<\/span>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/www.linkedin.com\/company\/olah-agency\/home\/?viewAsMember=true\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/www.instagram.com\/olah_agency?igsh=MTlkdmhndHZzZTdmeg%3D%3D\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/www.tiktok.com\/@olah.agency?_r=1&amp;_t=ZG-9AY7KJCEkOe\" target=\"_blank\" rel=\"noopener\">TikTok<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/www.facebook.com\/profile.php?id=61590574315090\" target=\"_blank\" rel=\"noopener\">Facebook<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <span class=\"row-title\">Works<\/span>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/olah-agency.com\/works\/\">All Projects<\/a>\r\n  <\/div>\r\n  <div class=\"footer-row\">\r\n    <span class=\"row-title\">Let's Talk<\/span>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"mailto:contact@olah-agency.com\">Mail<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/olah-agency.com\/lets-talk-book-a-stay\/\" target=\"_blank\" rel=\"noopener\">Booking<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <span class=\"row-title\">About<\/span>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/olah-agency.com\/about\/\">About us<\/a>\r\n  <\/div>\r\n  <div class=\"footer-bottom\">\r\n    <a href=\"https:\/\/olah-agency.com\/\">Website made with passion<\/a>\r\n  <\/div>\r\n\r\n  <!-- \u2500\u2500 MOBILE \u2500\u2500 -->\r\n  <div class=\"mobile-section\">\r\n    <p class=\"mobile-title\">Social<\/p>\r\n    <div class=\"mobile-links\">\r\n      <a href=\"https:\/\/www.linkedin.com\/company\/olah-agency\/home\/?viewAsMember=true\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a>\r\n      <span class=\"mobile-dot\">\u25cf<\/span>\r\n      <a href=\"https:\/\/www.instagram.com\/olah_agency?igsh=MTlkdmhndHZzZTdmeg%3D%3D\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\r\n      <span class=\"mobile-dot\">\u25cf<\/span>\r\n      <a href=\"https:\/\/www.tiktok.com\/@olah.agency?_r=1&amp;_t=ZG-9AY7KJCEkOe\" target=\"_blank\" rel=\"noopener\">TikTok<\/a>\r\n      <span class=\"mobile-dot\">\u25cf<\/span>\r\n      <a href=\"https:\/\/www.facebook.com\/profile.php?id=61590574315090\" target=\"_blank\" rel=\"noopener\">Facebook<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"mobile-double\">\r\n    <div class=\"mobile-section\">\r\n      <p class=\"mobile-title\">Works<\/p>\r\n      <div class=\"mobile-links\">\r\n        <a href=\"https:\/\/olah-agency.com\/works\/\">All Projects<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"mobile-section\">\r\n      <p class=\"mobile-title\">About<\/p>\r\n      <div class=\"mobile-links\">\r\n        <a href=\"https:\/\/olah-agency.com\/about\/\">About us<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"mobile-section\">\r\n    <p class=\"mobile-title\">Let's Talk<\/p>\r\n    <div class=\"mobile-links\">\r\n      <a href=\"mailto:contact@olah-agency.com\">Mail<\/a>\r\n      <span class=\"mobile-dot\">\u25cf<\/span>\r\n      <a href=\"https:\/\/olah-agency.com\/lets-talk-book-a-stay\/\" target=\"_blank\" rel=\"noopener\">Booking<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <hr class=\"mobile-divider\">\r\n\r\n  <div class=\"mobile-bottom\">\r\n    <a href=\"https:\/\/olah-agency.com\/\">Website made with passion<\/a>\r\n  <\/div>\r\n\r\n<\/footer>\r\n<\/body>\r\n<\/html>\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>Olah Agency Navigation WORKS WORKS ABOUT ABOUT JOURNAL JOURNAL IMPACT IMPACT LET&#8217;S TALK LET&#8217;S TALK MENU CLOSE WORKS ABOUT JOURNAL IMPACT LET&#8217;S TALK OLAH AGENCY \u2014 Works Works &#10005; All Social Media Visual Production Branding E-Commerce Web Footer \u2014 Olah Agency Social \u25cf LinkedIn \u25cf Instagram \u25cf TikTok \u25cf Facebook \u25cf Works \u25cf All Projects [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1404,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-31","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Our Projects | Creative Portfolio &amp; Case Studies | OLAH Agency - olah-agency.com<\/title>\n<meta name=\"description\" content=\"Discover OLAH Agency&#039;s portfolio featuring branding, video production, photography, web design and creative campaigns for businesses...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/olah-agency.com\/fr\/works\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Our Projects | Creative Portfolio &amp; Case Studies | OLAH Agency - olah-agency.com\" \/>\n<meta property=\"og:description\" content=\"Discover OLAH Agency&#039;s portfolio featuring branding, video production, photography, web design and creative campaigns for businesses...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/olah-agency.com\/fr\/works\/\" \/>\n<meta property=\"og:site_name\" content=\"olah-agency.com\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-15T19:20:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/A7401414-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"25 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/olah-agency.com\\\/works\\\/\",\"url\":\"https:\\\/\\\/olah-agency.com\\\/works\\\/\",\"name\":\"Our Projects | Creative Portfolio &amp; Case Studies | OLAH Agency - olah-agency.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/olah-agency.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/olah-agency.com\\\/works\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/olah-agency.com\\\/works\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/olah-agency.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/A7401414-scaled.jpg\",\"datePublished\":\"2026-01-15T16:08:43+00:00\",\"dateModified\":\"2026-10-15T19:20:13+00:00\",\"description\":\"Discover OLAH Agency's portfolio featuring branding, video production, photography, web design and creative campaigns for businesses...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/olah-agency.com\\\/works\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/olah-agency.com\\\/works\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/olah-agency.com\\\/works\\\/#primaryimage\",\"url\":\"https:\\\/\\\/olah-agency.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/A7401414-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/olah-agency.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/A7401414-scaled.jpg\",\"width\":2560,\"height\":1707},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/olah-agency.com\\\/works\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/olah-agency.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Our Projects | Creative Portfolio &amp; Case Studies | OLAH Agency\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/olah-agency.com\\\/#website\",\"url\":\"https:\\\/\\\/olah-agency.com\\\/\",\"name\":\"olah-agency.com\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/olah-agency.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Our Projects | Creative Portfolio &amp; Case Studies | OLAH Agency - olah-agency.com","description":"Discover OLAH Agency's portfolio featuring branding, video production, photography, web design and creative campaigns for businesses...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/olah-agency.com\/fr\/works\/","og_locale":"fr_FR","og_type":"article","og_title":"Our Projects | Creative Portfolio &amp; Case Studies | OLAH Agency - olah-agency.com","og_description":"Discover OLAH Agency's portfolio featuring branding, video production, photography, web design and creative campaigns for businesses...","og_url":"https:\/\/olah-agency.com\/fr\/works\/","og_site_name":"olah-agency.com","article_modified_time":"2026-10-15T19:20:13+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/A7401414-scaled.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"25 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/olah-agency.com\/works\/","url":"https:\/\/olah-agency.com\/works\/","name":"Our Projects | Creative Portfolio &amp; Case Studies | OLAH Agency - olah-agency.com","isPartOf":{"@id":"https:\/\/olah-agency.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/olah-agency.com\/works\/#primaryimage"},"image":{"@id":"https:\/\/olah-agency.com\/works\/#primaryimage"},"thumbnailUrl":"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/A7401414-scaled.jpg","datePublished":"2026-01-15T16:08:43+00:00","dateModified":"2026-10-15T19:20:13+00:00","description":"Discover OLAH Agency's portfolio featuring branding, video production, photography, web design and creative campaigns for businesses...","breadcrumb":{"@id":"https:\/\/olah-agency.com\/works\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/olah-agency.com\/works\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/olah-agency.com\/works\/#primaryimage","url":"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/A7401414-scaled.jpg","contentUrl":"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/A7401414-scaled.jpg","width":2560,"height":1707},{"@type":"BreadcrumbList","@id":"https:\/\/olah-agency.com\/works\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/olah-agency.com\/"},{"@type":"ListItem","position":2,"name":"Our Projects | Creative Portfolio &amp; Case Studies | OLAH Agency"}]},{"@type":"WebSite","@id":"https:\/\/olah-agency.com\/#website","url":"https:\/\/olah-agency.com\/","name":"olah-agency.com","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/olah-agency.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":209,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":2038,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/pages\/31\/revisions\/2038"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/media\/1404"}],"wp:attachment":[{"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/media?parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}