{"id":27255,"date":"2026-03-30T17:17:30","date_gmt":"2026-03-30T22:17:30","guid":{"rendered":"https:\/\/machiavel.com\/new-portfolio-test\/"},"modified":"2026-05-04T11:21:59","modified_gmt":"2026-05-04T16:21:59","slug":"new-portfolio-test","status":"publish","type":"page","link":"https:\/\/machiavel.com\/en\/video-production-services\/new-portfolio-test\/","title":{"rendered":"Portfolio Video Montreal | Video Production &amp; Advertising"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"27255\" class=\"elementor elementor-27255 elementor-27149\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"aux-parallax-section elementor-element elementor-element-42dc84f e-flex e-con-boxed e-con e-parent\" data-id=\"42dc84f\" 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-5589c9e elementor-widget elementor-widget-spacer\" data-id=\"5589c9e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\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-7a0dd67 elementor-widget elementor-widget-heading\" data-id=\"7a0dd67\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">PORTFOLIO<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae94d35 elementor-widget elementor-widget-spacer\" data-id=\"ae94d35\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\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-5455240 elementor-widget elementor-widget-shortcode\" data-id=\"5455240\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Portfolio \u2014 Studios Machiavel<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/machiavel-portfolio-media.b-cdn.net\" crossorigin>\n<link rel=\"dns-prefetch\" href=\"https:\/\/machiavel-portfolio-media.b-cdn.net\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Montserrat:wght@400;600;700&family=Roboto:wght@300;400&display=swap\" rel=\"stylesheet\">\n<style>\n  :root { --bg:#000000; --gold:#FFD700; --text:#FFFFFF; --muted:#777777; }\n  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }\n  body { background:var(--bg); color:var(--text); font-family:'Roboto',sans-serif; min-height:100vh; }\n\n  \/* \u2500\u2500 FILTER BAR (desktop) \u2500\u2500 *\/\n  .filter-bar {\n    padding:36px 24px 28px;\n    display:flex; flex-wrap:wrap; justify-content:center;\n    gap:4px 2px;\n  }\n  .filter-btn {\n    background:transparent; border:none; color:var(--muted);\n    padding:7px 14px; font-family:'Montserrat',sans-serif;\n    font-size:11px; font-weight:700; letter-spacing:0.13em;\n    text-transform:uppercase; cursor:pointer; transition:color 0.15s;\n    position:relative; white-space:nowrap;\n    -webkit-user-select:none; user-select:none;\n    -webkit-tap-highlight-color:transparent;\n    outline:none !important;\n  }\n  .filter-btn::after {\n    content:''; position:absolute; bottom:2px;\n    left:14px; right:14px; height:1px;\n    background:var(--gold); transform:scaleX(0);\n    transition:transform 0.2s; transform-origin:center;\n  }\n  .filter-btn:hover { color:var(--text); }\n  .filter-btn.active { color:var(--gold); }\n  .filter-btn.active::after { transform:scaleX(1); }\n\n  \/* \u2500\u2500 GRIDS \u2500\u2500 *\/\n  .portfolio-grid {\n    display:grid; grid-template-columns:repeat(2,1fr);\n    gap:4px; padding:0 4px 4px;\n  }\n  .social-grid {\n    display:none; grid-template-columns:repeat(3,1fr);\n    gap:4px; padding:0 4px 4px;\n  }\n  .social-grid.visible { display:grid; }\n  @media (max-width:768px) {\n    .portfolio-grid { grid-template-columns:1fr; }\n    .social-grid { grid-template-columns:repeat(2,1fr); }\n  }\n  @media (max-width:480px) {\n    .social-grid { grid-template-columns:1fr; }\n  }\n\n  \/* \u2500\u2500 MOBILE FILTER DROPDOWN \u2500\u2500 *\/\n  .filter-dropdown { display:none; }\n  @media (max-width:768px) {\n    .filter-bar { display:none; }\n    .filter-dropdown {\n      display:block;\n      padding:24px 16px 16px;\n    }\n    .filter-dropdown-trigger {\n      display:flex; align-items:center; justify-content:space-between;\n      width:100%; padding:12px 16px;\n      background:transparent; border:1px solid var(--muted);\n      color:var(--text); font-family:'Montserrat',sans-serif;\n      font-size:11px; font-weight:700; letter-spacing:0.13em;\n      text-transform:uppercase; cursor:pointer;\n      -webkit-tap-highlight-color:transparent;\n      outline:none !important;\n      transition:border-color 0.2s;\n    }\n    .filter-dropdown-trigger.open { border-color:var(--gold); color:var(--gold); }\n    .filter-dropdown-trigger .trigger-label { flex:1; text-align:left; }\n    .filter-dropdown-trigger .trigger-arrow {\n      width:10px; height:10px; flex-shrink:0;\n      border-right:1.5px solid currentColor;\n      border-bottom:1.5px solid currentColor;\n      transform:rotate(45deg) translateY(-3px);\n      transition:transform 0.2s;\n      margin-left:12px;\n    }\n    .filter-dropdown-trigger.open .trigger-arrow {\n      transform:rotate(225deg) translateY(-3px);\n    }\n    .filter-dropdown-panel {\n      display:none;\n      border:1px solid var(--muted);\n      border-top:none;\n      background:var(--bg);\n    }\n    .filter-dropdown-panel.open { display:block; }\n    .filter-dropdown-panel .filter-btn {\n      display:block; width:100%; text-align:left;\n      padding:12px 16px;\n      border-bottom:1px solid rgba(255,255,255,0.06);\n    }\n    .filter-dropdown-panel .filter-btn:last-child { border-bottom:none; }\n    .filter-dropdown-panel .filter-btn::after { display:none; }\n    .filter-dropdown-panel .filter-btn.active {\n      color:var(--gold);\n      background:rgba(255,215,0,0.05);\n    }\n  }\n\n  \/* \u2500\u2500 CARD \u2500\u2500 *\/\n  .card {\n    position:relative; overflow:hidden; cursor:pointer;\n    background:#0a0a0a; aspect-ratio:16\/9;\n  }\n  .card.vertical { aspect-ratio:9\/16; }\n  .card.hidden { display:none; }\n  .card-media {\n    position:absolute; inset:0; width:100%; height:100%;\n    object-fit:cover; display:block; z-index:1;\n    transition:transform 0.5s ease;\n  }\n  .card:hover .card-media { transform:scale(1.03); }\n  .card-fallback {\n    position:absolute; inset:0; width:100%; height:100%;\n    object-fit:cover; display:block; z-index:0;\n    opacity:0; pointer-events:none;\n  }\n  .card-fallback.show { opacity:1; z-index:2; }\n\n  \/* \u2500\u2500 OVERLAY \u2500\u2500 *\/\n  .card-overlay {\n    position:absolute; inset:0; z-index:3;\n    background:rgba(0,0,0,0);\n    box-shadow:inset 0 -80px 60px -20px rgba(0,0,0,0);\n    transition:background 0.35s, box-shadow 0.35s;\n    display:flex; flex-direction:column;\n    align-items:center; justify-content:center;\n    gap:8px; padding:20px; pointer-events:none;\n  }\n  .card:hover .card-overlay {\n    background:rgba(0,0,0,0.52);\n    box-shadow:inset 0 -80px 60px -20px rgba(0,0,0,0.75);\n  }\n  .card-title {\n    font-family:'Montserrat',sans-serif;\n    font-size:clamp(13px,1.6vw,21px);\n    font-weight:700; letter-spacing:0.1em;\n    text-transform:uppercase; color:#fff;\n    text-align:center; opacity:0;\n    transform:translateY(10px);\n    transition:opacity 0.28s, transform 0.28s;\n    text-shadow:0 2px 12px rgba(0,0,0,0.9);\n  }\n  .card-client {\n    font-family:'Roboto',sans-serif;\n    font-size:clamp(10px,1vw,14px);\n    font-weight:300; color:var(--gold);\n    text-align:center; opacity:0;\n    transform:translateY(8px);\n    transition:opacity 0.28s 0.04s, transform 0.28s 0.04s;\n    text-shadow:0 1px 6px rgba(0,0,0,0.8);\n  }\n  .card:hover .card-title,\n  .card:hover .card-client { opacity:1; transform:translateY(0); }\n\n  \/* Touch devices: always show title\/client *\/\n  @media (hover:none) {\n    .card-overlay {\n      background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%);\n    }\n    .card-title, .card-client { opacity:1; transform:translateY(0); }\n  }\n\n  \/* \u2500\u2500 LOAD MORE \u2500\u2500 *\/\n  .load-more-wrap { text-align:center; padding:32px 0 48px; }\n  .load-more-btn {\n    background:transparent; border:1px solid var(--gold);\n    color:var(--gold); padding:12px 40px;\n    font-family:'Montserrat',sans-serif;\n    font-size:12px; font-weight:700;\n    letter-spacing:0.15em; text-transform:uppercase;\n    cursor:pointer; transition:background 0.2s, color 0.2s;\n    -webkit-user-select:none; user-select:none;\n    -webkit-tap-highlight-color:transparent;\n    outline:none !important;\n  }\n  .load-more-btn:hover { background:var(--gold); color:#000; }\n  .load-more-wrap.all-visible { display:none; }\n\n  \/* \u2500\u2500 NO RESULTS \u2500\u2500 *\/\n  .no-results {\n    display:none; text-align:center; padding:60px 20px;\n    font-family:'Roboto',sans-serif; font-size:16px; color:var(--muted);\n  }\n  .no-results.visible { display:block; }\n\n  \/* \u2500\u2500 MODAL \u2500\u2500 *\/\n  .modal-overlay {\n    display:none; position:fixed; inset:0; z-index:9999;\n    background:rgba(0,0,0,0.92);\n    align-items:center; justify-content:center;\n    flex-direction:column; gap:16px; padding:20px;\n  }\n  .modal-overlay.open { display:flex; }\n  .modal-close {\n    position:absolute; top:18px; right:24px;\n    color:#fff; font-size:32px; cursor:pointer;\n    z-index:10000; line-height:1;\n    -webkit-user-select:none; user-select:none;\n    -webkit-tap-highlight-color:transparent;\n    outline:none !important;\n  }\n  .modal-title {\n    font-family:'Montserrat',sans-serif;\n    font-size:clamp(14px,2vw,22px);\n    font-weight:700; text-transform:uppercase;\n    letter-spacing:0.08em; color:#fff;\n    text-align:center; max-width:800px;\n  }\n  .modal-meta {\n    font-family:'Roboto',sans-serif;\n    font-size:clamp(11px,1.2vw,14px);\n    font-weight:300; color:var(--gold); text-align:center;\n  }\n  .modal-frame { width:min(90vw,960px); aspect-ratio:16\/9; border:none; }\n\n  \/* \u2500\u2500 ANIMATION \u2500\u2500 *\/\n  @keyframes fadeUp {\n    from { opacity:0; transform:translateY(16px); }\n    to   { opacity:1; transform:translateY(0); }\n  }\n  .card { animation:fadeUp 0.35s ease both; }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"filter-dropdown\" id=\"filterDropdown\">\n  <div class=\"filter-dropdown-trigger\" id=\"filterTrigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n    <span class=\"trigger-label\" id=\"triggerLabel\">All<\/span>\n    <span class=\"trigger-arrow\"><\/span>\n  <\/div>\n  <div class=\"filter-dropdown-panel\" id=\"filterPanel\" role=\"listbox\">\n    <span class=\"filter-btn active\" data-filter=\"all\">All<\/span>\n    <span class=\"filter-btn\" data-filter=\"temoignage\">Testimonial<\/span>\n    <span class=\"filter-btn\" data-filter=\"presentation-dentreprise\">Company Presentation<\/span>\n    <span class=\"filter-btn\" data-filter=\"recrutement\">Recruitment<\/span>\n    <span class=\"filter-btn\" data-filter=\"formation\">Training<\/span>\n    <span class=\"filter-btn\" data-filter=\"video-explicative\">Explainer Video<\/span>\n    <span class=\"filter-btn\" data-filter=\"motion-design\">Motion Design<\/span>\n    <span class=\"filter-btn\" data-filter=\"produit\">Product<\/span>\n    <span class=\"filter-btn\" data-filter=\"promo-devenement\">Event Promo<\/span>\n    <span class=\"filter-btn\" data-filter=\"publicite\">Advertising<\/span>\n    <span class=\"filter-btn\" data-filter=\"animation-3d\">3D Animation<\/span>\n    <span class=\"filter-btn\" data-filter=\"drone-immersif\">Immersive Drone<\/span>\n    <span class=\"filter-btn\" data-filter=\"production-ia\">AI Production<\/span>\n    <span class=\"filter-btn\" data-filter=\"realite-virtuelle\">Virtual Reality<\/span>\n    <span class=\"filter-btn\" data-filter=\"documentaire\">Documentary<\/span>\n    <span class=\"filter-btn\" data-filter=\"reseaux-sociaux\">Social Media<\/span>\n  <\/div>\n<\/div>\n\n<div class=\"filter-bar\">\n  <span class=\"filter-btn active\" data-filter=\"all\">All<\/span>\n  <span class=\"filter-btn\" data-filter=\"temoignage\">Testimonial<\/span>\n  <span class=\"filter-btn\" data-filter=\"presentation-dentreprise\">Company Presentation<\/span>\n  <span class=\"filter-btn\" data-filter=\"recrutement\">Recruitment<\/span>\n  <span class=\"filter-btn\" data-filter=\"formation\">Training<\/span>\n  <span class=\"filter-btn\" data-filter=\"video-explicative\">Explainer Video<\/span>\n  <span class=\"filter-btn\" data-filter=\"motion-design\">Motion Design<\/span>\n  <span class=\"filter-btn\" data-filter=\"produit\">Product<\/span>\n  <span class=\"filter-btn\" data-filter=\"promo-devenement\">Event Promo<\/span>\n  <span class=\"filter-btn\" data-filter=\"publicite\">Advertising<\/span>\n  <span class=\"filter-btn\" data-filter=\"animation-3d\">3D Animation<\/span>\n  <span class=\"filter-btn\" data-filter=\"drone-immersif\">Immersive Drone<\/span>\n  <span class=\"filter-btn\" data-filter=\"production-ia\">AI Production<\/span>\n  <span class=\"filter-btn\" data-filter=\"realite-virtuelle\">Virtual Reality<\/span>\n  <span class=\"filter-btn\" data-filter=\"documentaire\">Documentary<\/span>\n  <span class=\"filter-btn\" data-filter=\"reseaux-sociaux\">Social Media<\/span>\n<\/div>\n\n<div class=\"portfolio-grid\" id=\"grid\">\n  <div class=\"card\" data-type=\"publicite produit video-explicative motion-design animation-3d production-ia\" data-lang=\"both\" data-vimeo-id=\"1196747265\" data-title=\"AI Promotional Video\" data-client=\"Avenant\" data-year=\"2026\">\n    <video class=\"card-media\" muted loop playsinline preload=\"metadata\"><source src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/JUIN_PORTFOLIO_CLIPS_03_00001437.mp4\" type=\"video\/mp4\"><\/video><img fetchpriority=\"high\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"eager\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_PUB_THUMBNAIL_AVENANT-AI-SASS.webp\" alt=\"AI Promotional Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">AI Promotional Video<\/div><div class=\"card-client\">Avenant<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"production-ia publicite\" data-lang=\"both\" data-vimeo-id=\"1180875217\" data-title=\"Intelligence Artificielle - Intro Show d&#x27;Humour\" data-client=\"Dave Gaudet\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"metadata\"><source src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/JUIN_PORFOLIO-CLIPS_2026_02_00000000.mp4\" type=\"video\/mp4\"><\/video><img decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"eager\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VIDEOIA_DAVE-GAUDET.webp\" alt=\"Intelligence Artificielle - Intro Show d&#x27;Humour\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Intelligence Artificielle - Intro Show d&#x27;Humour<\/div><div class=\"card-client\">Dave Gaudet<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"formation\" data-lang=\"en\" data-vimeo-id=\"1144963428\" data-title=\"Protective equipment fashion show\" data-client=\"Olympe\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"metadata\"><source src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_480P_ENG_OLYMPE00001401.mp4\" type=\"video\/mp4\"><\/video><img decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"eager\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_FORMATIONSST_THUMBNAIL_D%C3%89FIL%C3%89-MODE-%C3%89QUIPEMENT-PROTECTION.webp\" alt=\"Protective equipment fashion show\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Protective equipment fashion show<\/div><div class=\"card-client\">Olympe<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"video-explicative\" data-lang=\"en\" data-vimeo-id=\"1164135581\" data-title=\"Tomat\" data-client=\"Carrefour Solidaire\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"metadata\"><source src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_CLIPS_480p00086579.mp4\" type=\"video\/mp4\"><\/video><img decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"eager\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VIDEO-EXPLICATIVE_THUMBNAIL_FEMME-SOURIANTE-OBNL.webp\" alt=\"Tomat\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Tomat<\/div><div class=\"card-client\">Carrefour Solidaire<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"motion-design produit video-explicative\" data-lang=\"en\" data-vimeo-id=\"1125244136\" data-title=\"Product explainer video\" data-client=\"Stanpro Genio\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000651.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OEXPLICATIVE_THUMBNAIL_STANPROGENIO.webp\" alt=\"Product explainer video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Product explainer video<\/div><div class=\"card-client\">Stanpro Genio<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"documentaire video-explicative\" data-lang=\"both\" data-vimeo-id=\"1196831095\" data-title=\"Dreams &amp; Nightmares - Interview\" data-client=\"UnXplained (History Channel)\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/JUIN_PORFOLIO-CLIPS_2026_00000000.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_DOCUMENTARY_THUMBNAIL_UNEXPLAINED.webp\" alt=\"Dreams &amp; Nightmares - Interview\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Dreams &amp; Nightmares - Interview<\/div><div class=\"card-client\">UnXplained (History Channel)<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"recrutement\" data-lang=\"en\" data-vimeo-id=\"1125243315\" data-title=\"About Us Video\" data-client=\"Nature&#x27;s Touch\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000454.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_HRVIDEO_THUMBNAIL_NATURES-TOUCH-ABOUT-US-VIDEO.webp\" alt=\"About Us Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">About Us Video<\/div><div class=\"card-client\">Nature&#x27;s Touch<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"video-explicative produit\" data-lang=\"both\" data-vimeo-id=\"1100358124\" data-title=\"Product Demo\" data-client=\"Focus Microwaves\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00087283.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VIDEO-EXPLICATIVE_THUMBNAIL_FOCUS-MICROWAVE-PRODUCT%20DEMO.webp\" alt=\"Product Demo\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Product Demo<\/div><div class=\"card-client\">Focus Microwaves<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"recrutement temoignage\" data-lang=\"both\" data-vimeo-id=\"1086890678\" data-title=\"Onboarding Video\" data-client=\"G2S2\/Armco Capital\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00087186.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_TEMOIGNAGEVIDEO_THUMBNAIL_VIDEO-ON-BOARDING_ARMCO.webp\" alt=\"Onboarding Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Onboarding Video<\/div><div class=\"card-client\">G2S2\/Armco Capital<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"promo-devenement\" data-lang=\"both\" data-vimeo-id=\"1027322319\" data-title=\"Park Inauguration &amp; Basketball Tournament\" data-client=\"Sud-Ouest de Montr\u00e9al x MLSE\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00086458.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_PROMO%C3%89V%C3%89NEMENT_THUMBNAIL_MLSEXSUD-OUEST.webp\" alt=\"Park Inauguration &amp; Basketball Tournament\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Park Inauguration &amp; Basketball Tournament<\/div><div class=\"card-client\">Sud-Ouest de Montr\u00e9al x MLSE<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"promo-devenement publicite\" data-lang=\"both\" data-vimeo-id=\"1022164548\" data-title=\"Influencer Event Recap\" data-client=\"M2 Boutiques\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000035.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPROMO%C3%89V%C3%89NEMENT_THUMBNAIL_M2BOUTIQUES.webp\" alt=\"Influencer Event Recap\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Influencer Event Recap<\/div><div class=\"card-client\">M2 Boutiques<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"publicite\" data-lang=\"both\" data-vimeo-id=\"1020634660\" data-title=\"Advertising Campaign - RDS &amp; TVA\" data-client=\"M2 Boutiques\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000015.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_PUBLICIT%C3%89_THUMBNAIL_M2BOUTIQUES.webp\" alt=\"Advertising Campaign - RDS &amp; TVA\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Advertising Campaign - RDS &amp; TVA<\/div><div class=\"card-client\">M2 Boutiques<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"publicite motion-design video-explicative\" data-lang=\"en\" data-vimeo-id=\"1083939468\" data-title=\"App Launch Video\" data-client=\"App Me N \u00dc\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00001795.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VIDEO-EXPLICATIVE_THUMBNAIL_APP-ME-N-U.webp\" alt=\"App Launch Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">App Launch Video<\/div><div class=\"card-client\">App Me N \u00dc<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"temoignage\" data-lang=\"en\" data-vimeo-id=\"1152039525\" data-title=\"Dominic Barton - Rio Tinto Chairman\" data-client=\"Energy for a Secure Future\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_VIDEOS_480p_3-30-2026_00000133.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_DRONE_THUMBNAIL_CGA-ENERGY-FOR-A-SECURE-FUTURE.webp\" alt=\"Dominic Barton - Rio Tinto Chairman\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Dominic Barton - Rio Tinto Chairman<\/div><div class=\"card-client\">Energy for a Secure Future<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"\" data-lang=\"both\" data-vimeo-id=\"https:\/\/next.frame.io\/project\/9a6bc35a-639e-43ad-a56b-7a73c7f26ff9\/view\/4b319471-a0af-49cf-b3a5-814907712af9\" data-title=\"Event Recap\" data-client=\"Intersect Power\" data-year=\"\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"\" alt=\"Event Recap\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Event Recap<\/div><div class=\"card-client\">Intersect Power<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"publicite recrutement\" data-lang=\"en\" data-vimeo-id=\"989600051\" data-title=\"Volunteer Bureau of Montreal\" data-client=\"La Clique\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000072.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPROMO_THUMBNAIL_RECRUTEMENT-B%C3%89N%C3%89VOLAT-FEMME-SOURIANTE.webp\" alt=\"Volunteer Bureau of Montreal\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Volunteer Bureau of Montreal<\/div><div class=\"card-client\">La Clique<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"animation-3d publicite\" data-lang=\"en\" data-vimeo-id=\"936429608\" data-title=\"Espace Ax-C Trailer\" data-client=\"Qu\u00e9bec Tech\" data-year=\"2023\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000830.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPROMO_THUMBNAIL_NEW-ENTREPRENEURIAL-SPACE.webp\" alt=\"Espace Ax-C Trailer\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Espace Ax-C Trailer<\/div><div class=\"card-client\">Qu\u00e9bec Tech<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"recrutement\" data-lang=\"en\" data-vimeo-id=\"1125244677\" data-title=\"Tyler shares his career journey\" data-client=\"Nature&#x27;s Touch\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000390.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_RECRUITMENTVIDEO_THUMBNAIL_EMPLOYEE-TESTIMONY.webp\" alt=\"Tyler shares his career journey\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Tyler shares his career journey<\/div><div class=\"card-client\">Nature&#x27;s Touch<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"recrutement temoignage\" data-lang=\"en\" data-vimeo-id=\"1125243824\" data-title=\"Company Innovation Video\" data-client=\"Nature&#x27;s Touch\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000219.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_RECRUITMENTVIDEO_THUMBNAIL_EMPLOYEE-TESTIMONY-NATURE-TOUCH-EXPLAINER.webp\" alt=\"Company Innovation Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Company Innovation Video<\/div><div class=\"card-client\">Nature&#x27;s Touch<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"presentation-dentreprise\" data-lang=\"both\" data-vimeo-id=\"1124257636\" data-title=\"Pitch Eezly\" data-client=\"NEXT AI\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000070.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPR%C3%89SENTATION_THUMBNAIL_EEZLYXNEXTAI.webp\" alt=\"Pitch Eezly\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Pitch Eezly<\/div><div class=\"card-client\">NEXT AI<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"promo-devenement\" data-lang=\"both\" data-vimeo-id=\"1124256952\" data-title=\"NextAI Cohort Recap\" data-client=\"NEXTAI\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000636.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPROMO%C3%89V%C3%89NEMENT_THUMBNAIL_NEXTAI-IMMERSION-WEEK.webp\" alt=\"NextAI Cohort Recap\">\n    <div class=\"card-overlay\"><div class=\"card-title\">NextAI Cohort Recap<\/div><div class=\"card-client\">NEXTAI<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"animation-3d publicite\" data-lang=\"both\" data-vimeo-id=\"722301078\" data-title=\"Transformers VR\" data-client=\"Meta4 Interactive\" data-year=\"2022\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/TRANSFORMERVR_480P00000109.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_PUBLICIT%C3%89_THUMBNAIL_META4.webp\" alt=\"Transformers VR\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Transformers VR<\/div><div class=\"card-client\">Meta4 Interactive<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"presentation-dentreprise\" data-lang=\"en\" data-vimeo-id=\"1172247569\" data-title=\"Ad\" data-client=\"Cisolift\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_VIDEOS_480p_3-30-2026_00086449.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_PRESENTATION-ENTREPRISE_THUMBNAIL_CISOLIFT.webp\" alt=\"Ad\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Ad<\/div><div class=\"card-client\">Cisolift<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"presentation-dentreprise promo-devenement\" data-lang=\"both\" data-vimeo-id=\"1178483292\" data-title=\"Promo - Festival Vita\" data-client=\"Sports Montr\u00e9al\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_VIDEOS_480p_3-30-2026_00086504.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_PROMO-%C3%89V%C3%89NEMENT_THUMBNAIL_FESTIVAL-VITA.webp\" alt=\"Promo - Festival Vita\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Promo - Festival Vita<\/div><div class=\"card-client\">Sports Montr\u00e9al<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"presentation-dentreprise publicite\" data-lang=\"both\" data-vimeo-id=\"1196747265\" data-title=\"International Promotional Video\" data-client=\"Atkins R\u00e9alis (for Feed Films)\" data-year=\"2023\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/JUIN_PORFOLIO-CLIPS_2026_00000575.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VIDEO-PROMO_THUMBNAIL_ATKINS-REALIS.webp\" alt=\"International Promotional Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">International Promotional Video<\/div><div class=\"card-client\">Atkins R\u00e9alis (for Feed Films)<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"realite-virtuelle formation\" data-lang=\"both\" data-vimeo-id=\"944165116\" data-title=\"HR Safety Training\" data-client=\"ConEdison (Encora)\" data-year=\"2022\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/JUIN_PORFOLIO-CLIPS_2026_00005615.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_CONEDISON_REALITE-VIRUTELLE-FORMATION.webp\" alt=\"HR Safety Training\">\n    <div class=\"card-overlay\"><div class=\"card-title\">HR Safety Training<\/div><div class=\"card-client\">ConEdison (Encora)<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"temoignage\" data-lang=\"en\" data-vimeo-id=\"1135533310\" data-title=\"50 ans d&#x27;H\u00e9ritage Montr\u00e9al - Joshua Wolfe\" data-client=\"H\u00e9ritage Montr\u00e9al\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000672.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_ANNIVERSAIRE-ENTREPRISE_THUMBNAIL_HERITAGE-MONTREAL.webp\" alt=\"50 ans d&#x27;H\u00e9ritage Montr\u00e9al - Joshua Wolfe\">\n    <div class=\"card-overlay\"><div class=\"card-title\">50 ans d&#x27;H\u00e9ritage Montr\u00e9al - Joshua Wolfe<\/div><div class=\"card-client\">H\u00e9ritage Montr\u00e9al<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"promo-devenement\" data-lang=\"en\" data-vimeo-id=\"1126681245\" data-title=\"Ayisyen Pale, Ayisyen Konprann\" data-client=\"Sejoe\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000000.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89O%C3%89V%C3%89NEMENT_THUMBNAIL_SEJOE.webp\" alt=\"Ayisyen Pale, Ayisyen Konprann\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Ayisyen Pale, Ayisyen Konprann<\/div><div class=\"card-client\">Sejoe<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"video-explicative produit\" data-lang=\"both\" data-vimeo-id=\"1099963383\" data-title=\"Product Demo\" data-client=\"Keysight\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/KEYSIGHT_480P00086679.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VIDEO-EXPLICATIVE_THUMBNAIL_KEYSIGHT-PRODUCT%20DEMO.webp\" alt=\"Product Demo\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Product Demo<\/div><div class=\"card-client\">Keysight<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"temoignage\" data-lang=\"both\" data-vimeo-id=\"926403192\" data-title=\"AR Glasses Launch Video\" data-client=\"RE-AK\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000601.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VIDEO-EXPLICATIVE_THUMBNAIL_RE-AK.webp\" alt=\"AR Glasses Launch Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">AR Glasses Launch Video<\/div><div class=\"card-client\">RE-AK<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"publicite\" data-lang=\"both\" data-vimeo-id=\"1136539624\" data-title=\"Montreal Metro Advertising Campaign\" data-client=\"Futurpreneur\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_VIDEOS_480p_3-30-2026_00108100.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_T%C3%89MOIGNAGEVIDEO_THUMBNAIL_FUTURPRENEUR-OOH-METRO-PUB.webp\" alt=\"Montreal Metro Advertising Campaign\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Montreal Metro Advertising Campaign<\/div><div class=\"card-client\">Futurpreneur<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"drone-immersif presentation-dentreprise\" data-lang=\"both\" data-vimeo-id=\"1124255054\" data-title=\"Parc Le Rocher Presentation\" data-client=\"SAINT-AMABLE\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00086536.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VIDEODRONE_THUMBNAIL_PARC-LE-ROCJER.webp\" alt=\"Parc Le Rocher Presentation\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Parc Le Rocher Presentation<\/div><div class=\"card-client\">SAINT-AMABLE<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"drone-immersif\" data-lang=\"both\" data-vimeo-id=\"1021453850\" data-title=\"Construction Site Update\" data-client=\"Chevalier S\u00e9guin\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00086598.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89ODRONE_THUMBNAIL_POINT-CARDINAL_CHEVALIER-SEGUIN.webp\" alt=\"Construction Site Update\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Construction Site Update<\/div><div class=\"card-client\">Chevalier S\u00e9guin<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"publicite produit\" data-lang=\"both\" data-vimeo-id=\"938678718\" data-title=\"Louis Garneau - Listing Product Video\" data-client=\"Geocan\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000125.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_PRODUCTVIDEO_THUMBNAIL_GEOCAN-LOUIS-GARNEAU.webp\" alt=\"Louis Garneau - Listing Product Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Louis Garneau - Listing Product Video<\/div><div class=\"card-client\">Geocan<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"drone-immersif presentation-dentreprise\" data-lang=\"both\" data-vimeo-id=\"893102319\" data-title=\"Industrial Tour\" data-client=\"Le 5600\" data-year=\"2023\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000975.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPROMODRONE_THUMBNAIL_LE-5600-VISITIE-INDUSTRIELLE.webp\" alt=\"Industrial Tour\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Industrial Tour<\/div><div class=\"card-client\">Le 5600<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"drone-immersif presentation-dentreprise\" data-lang=\"both\" data-vimeo-id=\"873395635\" data-title=\"Parkour Ninja Warrior\" data-client=\"ACTN3\" data-year=\"2023\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000275.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPROMODRONE_THUMBNAIL_ACTN-PARKOUR.webp\" alt=\"Parkour Ninja Warrior\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Parkour Ninja Warrior<\/div><div class=\"card-client\">ACTN3<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"presentation-dentreprise\" data-lang=\"en\" data-vimeo-id=\"1178496041\" data-title=\"Robotics Solutions Presentation Video\" data-client=\"NuMove\" data-year=\"2026\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_VIDEOS_480p_3-30-2026_00086644.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_DRONE_THUMBNAIL_NUMOVE-TECH-PRESENTATION.webp\" alt=\"Robotics Solutions Presentation Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Robotics Solutions Presentation Video<\/div><div class=\"card-client\">NuMove<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"drone-immersif\" data-lang=\"both\" data-vimeo-id=\"1125244418\" data-title=\"Factory Tour\" data-client=\"Fourgon Rive-Sud\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_480P_FRS00086780.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89ODRONE_THUMBNAIL_pr%C3%A9sentation-usine-entreprise.webp\" alt=\"Factory Tour\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Factory Tour<\/div><div class=\"card-client\">Fourgon Rive-Sud<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"drone-immersif\" data-lang=\"both\" data-vimeo-id=\"935892929\" data-title=\"Drone Real Estate Tour\" data-client=\"Kolme\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000152.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPROMODRONE_THUMBNAIL_KOLME.webp\" alt=\"Drone Real Estate Tour\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Drone Real Estate Tour<\/div><div class=\"card-client\">Kolme<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"video-explicative presentation-dentreprise publicite\" data-lang=\"both\" data-vimeo-id=\"1147845710\" data-title=\"AI Online Course - Promotional Video\" data-client=\"Bold New Edge\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000294.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPROMO_THUMBNAIL_BOLDNEWAGE.webp\" alt=\"AI Online Course - Promotional Video\">\n    <div class=\"card-overlay\"><div class=\"card-title\">AI Online Course - Promotional Video<\/div><div class=\"card-client\">Bold New Edge<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"formation\" data-lang=\"en\" data-vimeo-id=\"1189796097\" data-title=\"AI Course Introduction\" data-client=\"Bold New Edge\" data-year=\"2025\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/MAI_PORTFOLIO%20_VIDEO_480p00000121.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_VID%C3%89OPROMO_THUMBNAIL_BOLDNEWAGE.webp\" alt=\"AI Course Introduction\">\n    <div class=\"card-overlay\"><div class=\"card-title\">AI Course Introduction<\/div><div class=\"card-client\">Bold New Edge<\/div><\/div>\n  <\/div>\n  <div class=\"card\" data-type=\"formation\" data-lang=\"en\" data-vimeo-id=\"1144962605\" data-title=\"Reversing safely\" data-client=\"Olympe\" data-year=\"2024\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_HORIZONTAL_480P00000584.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_FORMATIONHUMOURISTIQUE_THUMBNAIL_PROTOCOLE-MARCHE-ARRI%C3%88RE.webp\" alt=\"Reversing safely\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Reversing safely<\/div><div class=\"card-client\">Olympe<\/div><\/div>\n  <\/div>\n<\/div>\n\n<div class=\"social-grid\" id=\"socialGrid\">\n  <div class=\"card vertical\" data-type=\"reseaux-sociaux\" data-lang=\"en\" data-vimeo-id=\"1174518497\" data-title=\"Volunteer Recruitment - Vertical\" data-client=\"CABM x La Clique\" data-year=\"2025\" data-vertical=\"true\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/PORTFOLIO_VERTICAL_480P00000251.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_R%C3%89SEAUX-SOCIAUX_THUMBNAIL_CABM.webp\" alt=\"Volunteer Recruitment - Vertical\">\n    <div class=\"card-overlay\"><div class=\"card-title\">Volunteer Recruitment - Vertical<\/div><div class=\"card-client\">CABM x La Clique<\/div><\/div>\n  <\/div>\n  <div class=\"card vertical\" data-type=\"reseaux-sociaux video-explicative\" data-lang=\"en\" data-vimeo-id=\"1174533500\" data-title=\"App Demo\" data-client=\"Me N \u00dc\" data-year=\"2024\" data-vertical=\"true\">\n    <video class=\"card-media\" muted loop playsinline preload=\"none\"><source data-src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/EXPORTS\/MENU-DEMO-VERTICAL-ENGLISH_480P00001800.mp4\" type=\"video\/mp4\"><\/video><img loading=\"lazy\" decoding=\"async\" class=\"card-fallback\" width=\"854\" height=\"480\" loading=\"lazy\" src=\"https:\/\/machiavel-portfolio-media.b-cdn.net\/WEBP_PORTFOLIO_R%C3%89SEAUX-SOCIAUX_THUMBNAIL_MENU-FR.webp\" alt=\"App Demo\">\n    <div class=\"card-overlay\"><div class=\"card-title\">App Demo<\/div><div class=\"card-client\">Me N \u00dc<\/div><\/div>\n  <\/div>\n<\/div>\n\n<div class=\"no-results\" id=\"noResults\">No projects in this category.<\/div>\n\n<div class=\"load-more-wrap\" id=\"loadMoreWrap\">\n  <span class=\"load-more-btn\" id=\"loadMore\">Load more<\/span>\n<\/div>\n\n<div class=\"modal-overlay\" id=\"modal\">\n  <span class=\"modal-close\" id=\"modalClose\">&#10005;<\/span>\n  <div class=\"modal-title\" id=\"modalTitle\"><\/div>\n  <div class=\"modal-meta\" id=\"modalMeta\"><\/div>\n  <iframe class=\"modal-frame\" id=\"vimeoFrame\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>\n<\/div>\n\n<script>\nconst PAGE_SIZE = 12;\nlet currentFilter = 'all';\nlet visibleCount = 0;\nlet firstLoad = true;\n\nconst grid        = document.getElementById('grid');\nconst socialGrid  = document.getElementById('socialGrid');\nconst loadMoreWrap = document.getElementById('loadMoreWrap');\nconst noResults   = document.getElementById('noResults');\nconst allCards    = Array.from(document.querySelectorAll('.card'));\nconst normalCards = allCards.filter(c => !c.dataset.vertical);\nconst socialCards = allCards.filter(c =>  c.dataset.vertical);\n\n\/\/ \u2500\u2500 VIDEO ENGINE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ Single unified approach: load via IntersectionObserver, play\/pause on\n\/\/ viewport entry\/exit. Works identically on desktop and mobile.\n\/\/ Thumbnail (.card-fallback) is hidden by default and only shown on error.\n\nconst loadObserver = new IntersectionObserver(entries => {\n  entries.forEach(entry => {\n    const card  = entry.target;\n    const video = card.querySelector('video');\n    if (!video) return;\n    if (entry.isIntersecting) {\n      \/\/ Lazy-load src if not yet set\n      const source = video.querySelector('source[data-src]');\n      if (source && !source.src) {\n        source.src = source.dataset.src;\n        video.load();\n      }\n      video.play().catch(() => {\n        \/\/ Autoplay blocked or failed \u2014 show thumbnail fallback\n        const fb = card.querySelector('.card-fallback');\n        if (fb) fb.classList.add('show');\n      });\n    } else {\n      video.pause();\n    }\n  });\n}, { rootMargin: '200px', threshold: 0.1 });\n\n\/\/ Error fallback\nallCards.forEach(card => {\n  const video = card.querySelector('video');\n  if (!video) return;\n  video.addEventListener('error', () => {\n    const fb = card.querySelector('.card-fallback');\n    if (fb) fb.classList.add('show');\n  });\n  loadObserver.observe(card);\n});\n\n\/\/ Re-observe cards when they become visible after filter\/pagination changes\nfunction observeVisible() {\n  normalCards.forEach(card => {\n    if (card.style.display !== 'none' && !card.classList.contains('hidden')) {\n      loadObserver.observe(card);\n    }\n  });\n}\n\n\/\/ \u2500\u2500 FILTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction applyFilter(filter) {\n  currentFilter = filter;\n  const isSocial = filter === 'reseaux-sociaux';\n\n  grid.style.display       = isSocial ? 'none' : '';\n  loadMoreWrap.style.display = isSocial ? 'none' : '';\n  socialGrid.classList.toggle('visible', isSocial);\n\n  if (isSocial) {\n    socialCards.forEach(c => c.classList.remove('hidden'));\n    noResults.classList.remove('visible');\n    return;\n  }\n\n  let matchCount = 0;\n  normalCards.forEach(c => {\n    const types = c.dataset.type ? c.dataset.type.split(' ') : [];\n    const match = filter === 'all' || types.includes(filter);\n    c.classList.toggle('hidden', !match);\n    if (match) matchCount++;\n  });\n\n  visibleCount = 0;\n  firstLoad = true;\n  paginate();\n  noResults.classList.toggle('visible', matchCount === 0);\n}\n\n\/\/ \u2500\u2500 PAGINATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction paginate() {\n  const visible  = normalCards.filter(c => !c.classList.contains('hidden'));\n  const prevCount = visibleCount;\n  visibleCount   = Math.min(visibleCount + PAGE_SIZE, visible.length);\n\n  requestAnimationFrame(() => {\n    visible.forEach((c, i) => {\n      if (i < visibleCount) {\n        c.style.display = '';\n        c.style.animationDelay = (!firstLoad && i >= prevCount)\n          ? ((i - prevCount) * 0.04) + 's'\n          : '0s';\n      } else {\n        c.style.display = 'none';\n      }\n    });\n    firstLoad = false;\n    loadMoreWrap.classList.toggle('all-visible', visibleCount >= visible.length);\n    \/\/ Re-observe newly visible cards so videos start playing\n    observeVisible();\n  });\n}\n\n\/\/ \u2500\u2500 FILTER BUTTONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\ndocument.querySelectorAll('.filter-btn').forEach(btn => {\n  btn.addEventListener('click', () => {\n    const filter = btn.dataset.filter;\n    \/\/ Sync active state across desktop bar + mobile dropdown\n    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n    document.querySelectorAll(`.filter-btn[data-filter=\"${filter}\"]`).forEach(b => b.classList.add('active'));\n    \/\/ Update mobile trigger label\n    const triggerLabel = document.getElementById('triggerLabel');\n    if (triggerLabel) triggerLabel.textContent = btn.textContent;\n    \/\/ Close dropdown\n    const trigger = document.getElementById('filterTrigger');\n    const panel   = document.getElementById('filterPanel');\n    if (trigger && panel) {\n      trigger.classList.remove('open');\n      panel.classList.remove('open');\n      trigger.setAttribute('aria-expanded', 'false');\n    }\n    applyFilter(filter);\n  });\n});\n\n\/\/ \u2500\u2500 MOBILE DROPDOWN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst filterTrigger = document.getElementById('filterTrigger');\nconst filterPanel   = document.getElementById('filterPanel');\nif (filterTrigger && filterPanel) {\n  filterTrigger.addEventListener('click', () => {\n    const isOpen = filterPanel.classList.contains('open');\n    filterTrigger.classList.toggle('open', !isOpen);\n    filterPanel.classList.toggle('open', !isOpen);\n    filterTrigger.setAttribute('aria-expanded', String(!isOpen));\n  });\n  document.addEventListener('click', e => {\n    if (!filterTrigger.contains(e.target) && !filterPanel.contains(e.target)) {\n      filterTrigger.classList.remove('open');\n      filterPanel.classList.remove('open');\n      filterTrigger.setAttribute('aria-expanded', 'false');\n    }\n  });\n}\n\ndocument.getElementById('loadMore').addEventListener('click', paginate);\napplyFilter('all');\n\n\/\/ \u2500\u2500 MODAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst modal = document.getElementById('modal');\nconst frame = document.getElementById('vimeoFrame');\n\nallCards.forEach(card => {\n  card.addEventListener('click', () => {\n    document.getElementById('modalTitle').textContent = card.dataset.title || '';\n    document.getElementById('modalMeta').textContent  =\n      card.dataset.client + (card.dataset.year ? ' \\u00B7 ' + card.dataset.year : '');\n    frame.src = 'https:\/\/player.vimeo.com\/video\/' + card.dataset.vimeoId +\n      '?autoplay=1&color=FFD700&title=0&byline=0&portrait=0';\n    modal.classList.add('open');\n    document.body.style.overflow = 'hidden';\n  });\n});\n\nfunction closeModal() {\n  modal.classList.remove('open');\n  frame.src = '';\n  document.body.style.overflow = '';\n}\ndocument.getElementById('modalClose').addEventListener('click', closeModal);\nmodal.addEventListener('click', e => { if (e.target === modal) closeModal(); });\ndocument.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });\n<\/script>\n<\/body>\n<\/html><\/div>\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>There&#8217;s a reason why Studios Machiavel is one of the top-rated studios in Montreal! Discover our commercials, corporate videos and next-generation content. <\/p>\n","protected":false},"author":4,"featured_media":27303,"parent":26333,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"categories":[1046],"tags":[1113,544,903,1111,1110,873,1115,1114,1112,587],"class_list":["post-27255","page","type-page","status-publish","has-post-thumbnail","hentry","category-services","tag-agence-production-video-montreal","tag-agence-video-montreal-en","tag-company-promotional-video","tag-corporate-video-examples","tag-corporate-video-montreal","tag-corporate-video-production-2","tag-example-video-portfolio","tag-studio-video-montreal","tag-video-advertising-montreal","tag-video-production-montreal"],"_links":{"self":[{"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/pages\/27255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/comments?post=27255"}],"version-history":[{"count":17,"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/pages\/27255\/revisions"}],"predecessor-version":[{"id":27361,"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/pages\/27255\/revisions\/27361"}],"up":[{"embeddable":true,"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/pages\/26333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/media\/27303"}],"wp:attachment":[{"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/media?parent=27255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/categories?post=27255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/machiavel.com\/en\/wp-json\/wp\/v2\/tags?post=27255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}