{"id":6,"date":"2025-06-18T11:48:51","date_gmt":"2025-06-18T11:48:51","guid":{"rendered":"https:\/\/grinely.com\/?page_id=6"},"modified":"2025-12-04T15:41:06","modified_gmt":"2025-12-04T15:41:06","slug":"home","status":"publish","type":"page","link":"https:\/\/grinely.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"6\" class=\"elementor elementor-6\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4696249 e-con-full e-flex e-con e-parent\" data-id=\"4696249\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2e349c elementor-widget elementor-widget-html\" data-id=\"f2e349c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ================= HEAD (CSS SEULEMENT) ================= -->\n<!-- Preconnect Vimeo (anti-freeze initial) -->\n<link rel=\"preconnect\" href=\"https:\/\/player.vimeo.com\" crossorigin>\n<link rel=\"preconnect\" href=\"https:\/\/i.vimeocdn.com\" crossorigin>\n<link rel=\"preconnect\" href=\"https:\/\/f.vimeocdn.com\" crossorigin>\n<link rel=\"dns-prefetch\" href=\"https:\/\/player.vimeo.com\">\n<link rel=\"dns-prefetch\" href=\"https:\/\/i.vimeocdn.com\">\n<link rel=\"dns-prefetch\" href=\"https:\/\/f.vimeocdn.com\">\n\n<style>\n  \/* ========= HOME REELS ========= *\/\n  .home-reels { width:100%; margin:0; padding:0; }\n  .home-reels section { margin:0; }\n\n  \/* ====== REEL g\u00e9n\u00e9rique (conteneur 16\/9 par d\u00e9faut) ====== *\/\n  .home-reels .reel{\n    position:relative;\n    width:100%;\n    overflow:hidden;\n    background:#000;\n    --w:16; --h:9;\n    aspect-ratio:calc(var(--w)\/var(--h));\n  }\n  @supports not (aspect-ratio:1){\n    .home-reels .reel{ height:0; padding-top:calc(100% * var(--h)\/var(--w)); }\n  }\n\n  \/* Poster image *\/\n  .home-reels .reel .poster{\n    position:absolute; inset:0;\n    width:100%; height:100%;\n    object-fit:cover; object-position:center;\n    transition:opacity .32s ease;\n    z-index:2; will-change:opacity;\n    display:block;\n  }\n  .home-reels .reel.is-loaded .poster{ opacity:0; pointer-events:none; }\n\n  \/* Iframe (par d\u00e9faut pleine bo\u00eete) *\/\n  .home-reels .reel iframe{\n    position:absolute; inset:0;\n    width:100%; height:100%;\n    border:0; pointer-events:none;\n    z-index:1;\n  }\n\n  \/* L\u00e9gende + overlay *\/\n  .home-reels .caption{\n    position:absolute; left:1rem; bottom:1rem;\n    color:#fff; font-family:'Space Mono', monospace; font-size:1rem;\n    text-shadow:0 0 6px rgba(0,0,0,.6);\n    z-index:3;\n  }\n  .home-reels .overlay{\n    position:absolute; inset:0; z-index:4;\n    background:transparent; border:0; cursor:pointer;\n  }\n  .home-reels .overlay:hover{ outline:1px solid rgba(255,255,255,.12); }\n\n  \/* ====== HERO ====== *\/\n  .home-reels .hero-title{\n    position:absolute; top:-2rem; left:0; width:100%;\n    text-align:center;\n    font-family:'Jakarta',sans-serif; font-weight:700; color:#fff;\n    mix-blend-mode:difference; pointer-events:none; z-index:5;\n    white-space:nowrap; overflow:hidden;\n    font-size:clamp(3rem,12vw,14rem);\n  }\n\n  \/* ====== GRIDS ====== *\/\n  .home-reels .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0; }\n  .home-reels .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }\n\n  \/* ====== ME3ZA : source 4\/3 affich\u00e9e en \"cover\" dans un cadre 16\/9 ====== *\/\n  .home-reels .reel--src4x3-cover{ --w:16; --h:9; aspect-ratio:calc(var(--w)\/var(--h)); }\n  .home-reels .reel--src4x3-cover .fit{\n    position:absolute; inset:0; overflow:hidden; z-index:2; \/* conteneur de rognage *\/\n  }\n  .home-reels .reel--src4x3-cover .fit > iframe{\n    position:absolute;\n    top:50%; left:50%;\n    transform:translate(-50%,-50%);\n    width:100%;        \/* couvre la largeur *\/\n    height:auto;\n    min-height:100%;   \/* garantit la couverture en hauteur *\/\n    inset:auto;        \/* annule l'inset:0 de la r\u00e8gle g\u00e9n\u00e9rique *\/\n  }\n  \/* le poster reste object-fit:cover : rendu 100% identique visuellement *\/\n\n  \/* ====== 9\/16 verticaux ====== *\/\n  .home-reels .reel--9x16{ --w:9; --h:16; aspect-ratio:calc(var(--w)\/var(--h)); }\n  @supports not (aspect-ratio:1){\n    .home-reels .reel--9x16{ padding-top:calc(100% * 16 \/ 9); }\n  }\n\n  \/* ====== Responsive ====== *\/\n  @media(max-width:1024px){ .home-reels .grid-3{ grid-template-columns:repeat(2,1fr);} }\n  @media(max-width:768px){ .home-reels .grid-2{ grid-template-columns:1fr;} }\n  @media(max-width:640px){\n    .home-reels .grid-3{ grid-template-columns:1fr; }\n    .home-reels .hero-title{ top:0; font-size:clamp(2.25rem,11vw,6rem); }\n    .home-reels .caption{ font-size:.85rem; left:.75rem; bottom:.75rem; }\n  }\n\n  \/* ====== Modal ====== *\/\n  .home-reels .video-modal{\n    display:none; position:fixed; inset:0;\n    background:rgba(0,0,0,.95); z-index:9999;\n    justify-content:center; align-items:center;\n  }\n  .home-reels .video-modal iframe{\n    width:min(92vw,1280px);\n    aspect-ratio:16\/9;\n    height:auto; border:0; background:#000;\n  }\n  .home-reels .video-modal .close{\n    position:absolute; top:1rem; right:1rem;\n    color:#fff; font-size:2rem; cursor:pointer; user-select:none;\n  }\n  @media(max-width:640px){\n    .home-reels .video-modal{ align-items:stretch; }\n    .home-reels .video-modal iframe{ width:100vw !important; height:100svh !important; aspect-ratio:auto; }\n    .home-reels .video-modal .close{\n      position:fixed;\n      top:calc(env(safe-area-inset-top,0)+12px);\n      right:calc(env(safe-area-inset-right,0)+12px);\n    }\n  }\n  @media(max-width:992px) and (orientation:landscape){\n    .home-reels .video-modal iframe{ width:100vw !important; height:100vh !important; aspect-ratio:auto; }\n  }\n  @media(prefers-reduced-motion:reduce){ .home-reels .reel iframe{ animation:none !important; } }\n<\/style>\n\n<!-- ================= BODY ================= -->\n<div class=\"home-reels\">\n\n  <!-- HERO -->\n  <section class=\"hero\">\n    <div class=\"reel\">\n      <img decoding=\"async\" class=\"poster\" src=\"https:\/\/grinely.com\/wp-content\/uploads\/2025\/12\/thumb-3.jpg\" alt=\"\" loading=\"eager\" fetchpriority=\"high\">\n      <div class=\"hero-title\">STUDIO GRINELY<\/div>\n      <iframe title=\"Showreel 2025\" data-critical=\"1\"\n        loading=\"eager\" fetchpriority=\"high\"\n        allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen\n data-src=\"https:\/\/player.vimeo.com\/video\/1143467340?background=1&autoplay=1&loop=1&muted=1&playsinline=1&autopause=0&dnt=1&title=0&byline=0&portrait=0\"><\/iframe>\n      <div class=\"caption\">EMMAUS x CUBE<br> LIFE<\/div>\n      <button class=\"overlay\" aria-label=\"Lire EMMAUS x CUBE\"\n        data-video=\"https:\/\/player.vimeo.com\/video\/1121786111?autoplay=1&muted=0&playsinline=1&autopause=0&dnt=1\"><\/button>\n    <\/div>\n  <\/section>\n\n  <!-- 2 colonnes : ME3ZA (source 4\/3 affich\u00e9e en 16\/9 cover) + Djiro (16\/9) -->\n  <section class=\"grid-2\">\n\n    <!-- ME3ZA (4\/3 \u2192 16\/9 cover) -->\n   <!-- Djiro (16\/9 natif) -->\n    <div class=\"reel\">\n      <img decoding=\"async\" class=\"poster\"\n           src=\"https:\/\/grinely.com\/wp-content\/uploads\/2025\/08\/thumb-me3za-web-scaled.jpg\"\n           alt=\"\" loading=\"lazy\">\n      <iframe title=\"ME3ZA - WEB (extrait)\" loading=\"lazy\"\n        allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen\n data-src=\"https:\/\/player.vimeo.com\/video\/1114485223?background=1&autoplay=1&loop=1&muted=1&playsinline=1&autopause=0&dnt=1&title=0&byline=0&portrait=0\"><\/iframe>\n      <div class=\"caption\">ME3ZA<br>WEB<\/div>\n      <button class=\"overlay\"\n        aria-label=\"Lire ME3ZA - WEB en plein \u00e9cran\"\n        data-video=\"https:\/\/player.vimeo.com\/video\/1112015009?autoplay=1&muted=0&playsinline=1&autopause=0&dnt=1&title=0&byline=0&portrait=0\"><\/button>\n    <\/div>\n\n    <!-- Djiro (16\/9 natif) -->\n    <div class=\"reel\">\n      <img decoding=\"async\" class=\"poster\"\n           src=\"https:\/\/grinely.com\/wp-content\/uploads\/2025\/08\/thumb-djiro-eaudejavel.jpg\"\n           alt=\"\" loading=\"lazy\">\n      <iframe title=\"Djiro \u2014 Eau de Javel (extrait)\" loading=\"lazy\"\n        allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen\n data-src=\"https:\/\/player.vimeo.com\/video\/1114486767?background=1&autoplay=1&loop=1&muted=1&playsinline=1&autopause=0&dnt=1&title=0&byline=0&portrait=0\"><\/iframe>\n      <div class=\"caption\">Djiro<br>Eau de Javel<\/div>\n      <button class=\"overlay\"\n        aria-label=\"Lire Djiro - Eau de Javel en plein \u00e9cran\"\n        data-video=\"https:\/\/player.vimeo.com\/video\/1096629764?autoplay=1&muted=0&playsinline=1&autopause=0&dnt=1&title=0&byline=0&portrait=0\"><\/button>\n    <\/div>\n\n  <\/section>\n\n  <!-- 3 colonnes (9\/16) -->\n  <section class=\"grid-3\">\n    <div class=\"reel reel--9x16\">\n      <img decoding=\"async\" class=\"poster\" src=\"https:\/\/grinely.com\/wp-content\/uploads\/2025\/08\/thumb-packshot-glam.jpg\" alt=\"\" loading=\"lazy\">\n      <iframe title=\"XXL \u2014 Glam\" loading=\"lazy\"\n        allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen\n data-src=\"https:\/\/player.vimeo.com\/video\/1097576165?background=1&autoplay=1&loop=1&muted=1&playsinline=1&autopause=0&dnt=1\"><\/iframe>\n      <div class=\"caption\">XXL Maison<br>Packshot Glam<\/div>\n      <button class=\"overlay\" data-video=\"https:\/\/player.vimeo.com\/video\/1097576165?autoplay=1&muted=0&playsinline=1&autopause=0&dnt=1\"><\/button>\n    <\/div>\n\n    <div class=\"reel reel--9x16\">\n      <img decoding=\"async\" class=\"poster\" src=\"https:\/\/grinely.com\/wp-content\/uploads\/2025\/08\/thumb-bernardot-itw.jpg\" alt=\"\" loading=\"lazy\">\n      <iframe title=\"Bernardot \u2014 Interview\" loading=\"lazy\"\n        allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen\n data-src=\"https:\/\/player.vimeo.com\/video\/1108051599?background=1&autoplay=1&loop=1&muted=1&playsinline=1&autopause=0&dnt=1\"><\/iframe>\n      <div class=\"caption\">Meubles Bernardot<br>Interview<\/div>\n      <button class=\"overlay\" data-video=\"https:\/\/player.vimeo.com\/video\/1114491584?autoplay=1&muted=0&playsinline=1&autopause=0&dnt=1\"><\/button>\n    <\/div>\n\n    <div class=\"reel reel--9x16\">\n      <img decoding=\"async\" class=\"poster\" src=\"https:\/\/grinely.com\/wp-content\/uploads\/2025\/08\/thumb-packshot-ralphm.jpg\" alt=\"\" loading=\"lazy\">\n      <iframe title=\"Bernardot \u2014 RalphM\" loading=\"lazy\"\n        allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen\n data-src=\"https:\/\/player.vimeo.com\/video\/1108049155?background=1&autoplay=1&loop=1&muted=1&playsinline=1&autopause=0&dnt=1\"><\/iframe>\n      <div class=\"caption\">Meubles Bernardot<br>Packshot RalphM<\/div>\n      <button class=\"overlay\" data-video=\"https:\/\/player.vimeo.com\/video\/1108049155?autoplay=1&muted=0&playsinline=1&autopause=0&dnt=1\"><\/button>\n    <\/div>\n  <\/section>\n\n  <!-- Single -->\n  <section>\n    <div class=\"reel\">\n      <img decoding=\"async\" class=\"poster\" src=\"https:\/\/grinely.com\/wp-content\/uploads\/2025\/08\/thumb-ms-defferre.jpg\" alt=\"\" loading=\"lazy\">\n      <iframe title=\"MS Couverture \u2014 Defferre\" loading=\"lazy\"\n        allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen\n data-src=\"https:\/\/player.vimeo.com\/video\/1108107301?background=1&autoplay=1&loop=1&muted=1&playsinline=1&autopause=0&dnt=1\"><\/iframe>\n      <div class=\"caption\">MS Couverture<br>Defferre<\/div>\n      <button class=\"overlay\" data-video=\"https:\/\/player.vimeo.com\/video\/1109642258?autoplay=1&muted=0&playsinline=1&autopause=0&dnt=1\"><\/button>\n    <\/div>\n  <\/section>\n\n  <!-- MODAL -->\n  <div class=\"video-modal\" id=\"homeReelsModal\" role=\"dialog\" aria-modal=\"true\">\n    <span class=\"close\" aria-label=\"Fermer\">&times;<\/span>\n    <iframe src=\"\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>\n  <\/div>\n<\/div>\n\n<!-- ================= JS ================= -->\n<script>\n(() => {\n  const root = document.querySelector('.home-reels');\n  const modal = root.querySelector('#homeReelsModal');\n  const modalIF = modal.querySelector('iframe');\n  const closeBtn = modal.querySelector('.close');\n  const iframes = Array.from(root.querySelectorAll('.reel iframe'));\n  const overlays = Array.from(root.querySelectorAll('.overlay'));\n  const saveData = navigator.connection && navigator.connection.saveData;\n  const prefersRM = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function vimeoCmd(f,m){ if(f&&f.contentWindow){ f.contentWindow.postMessage(JSON.stringify({method:m}),'*'); } }\n  function pausePreviews(){ iframes.forEach(f=>vimeoCmd(f,'pause')); }\n  function playPreviews(){ iframes.forEach(f=>vimeoCmd(f,'play')); }\n\n  \/\/ -------- PATCH : fallback poster --------\n  const assignSrc = f => {\n    if(!f || f.dataset.loaded) return;\n    if(f.dataset.src) f.src = f.dataset.src;\n    f.dataset.loaded = '1';\n\n    const reel = f.closest('.reel');\n\n    \/\/ Quand l'iframe a fini de charger son document, on lance un timer de secours\n    f.addEventListener('load', () => {\n      \/\/ Si aucun event vid\u00e9o n'arrive (ready\/play\/timeupdate), on masque quand m\u00eame le poster\n      setTimeout(() => {\n        if (reel && !reel.classList.contains('is-loaded')) {\n          reel.classList.add('is-loaded');\n        }\n      }, 1200);\n    }, { once:true });\n  };\n  \/\/ ----------------------------------------\n\n  const markLoaded = f => { const reel=f.closest('.reel'); if(reel) reel.classList.add('is-loaded'); };\n\n  const io = new IntersectionObserver(entries=>{\n    entries.forEach(e=>{\n      const f=e.target;\n      if(e.isIntersecting){ if(!(saveData||prefersRM)){ assignSrc(f); vimeoCmd(f,'play'); } }\n      else{ vimeoCmd(f,'pause'); }\n    });\n  },{rootMargin:'200px 0px',threshold:0.15});\n  iframes.forEach(f=>io.observe(f));\n\n  \/\/ Si jamais Vimeo envoie des events, on en profite pour masquer le poster plus t\u00f4t\n  window.addEventListener('message',e=>{\n    let d=e.data;\n    if(typeof d==='string'){ try{ d=JSON.parse(d);}catch{} }\n    if(!d) return;\n    if(['ready','play','playing','bufferend','timeupdate'].includes(d.event)){\n      iframes.forEach(f=>{ if(f.dataset.loaded && !f.closest('.reel').classList.contains('is-loaded')) markLoaded(f); });\n    }\n  },false);\n\n  const hero=root.querySelector('iframe[data-critical=\"1\"]');\n  if(hero){ assignSrc(hero); hero.setAttribute('fetchpriority','high'); if(!(saveData||prefersRM)) vimeoCmd(hero,'play'); }\n\n  function openModal(url){ pausePreviews(); modalIF.src = url.includes('autopause=') ? url : (url + '&autopause=0'); modal.style.display='flex'; closeBtn.focus(); document.body.style.overflow='hidden'; }\n  function closeModal(){ modalIF.src=''; modal.style.display='none'; if(!(saveData||prefersRM)) playPreviews(); document.body.style.overflow=''; }\n  root.addEventListener('click',e=>{ const ov=e.target.closest('.overlay'); if(!ov)return; e.preventDefault(); openModal(ov.dataset.video); });\n  closeBtn.addEventListener('click',closeModal);\n  modal.addEventListener('click',e=>{ if(e.target===modal) closeModal(); });\n  document.addEventListener('keydown',e=>{ if(e.key==='Escape') closeModal(); });\n  overlays.forEach(b=>{ b.tabIndex=0; b.addEventListener('keydown',e=>{ if(e.key==='Enter'||e.key===' '){e.preventDefault();openModal(b.dataset.video);} }); });\n\n  if(saveData||prefersRM){\n    root.addEventListener('click',e=>{\n      const f=e.target.closest('.reel')?.querySelector('iframe');\n      if(f&&!f.dataset.loaded) assignSrc(f);\n    });\n  }\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>STUDIO GRINELY EMMAUS x CUBE LIFE ME3ZAWEB DjiroEau de Javel XXL MaisonPackshot Glam Meubles BernardotInterview Meubles BernardotPackshot RalphM MS CouvertureDefferre &times;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/grinely.com\/en\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grinely.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grinely.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grinely.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grinely.com\/en\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":299,"href":"https:\/\/grinely.com\/en\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":1364,"href":"https:\/\/grinely.com\/en\/wp-json\/wp\/v2\/pages\/6\/revisions\/1364"}],"wp:attachment":[{"href":"https:\/\/grinely.com\/en\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}