{"id":12718,"date":"2026-09-07T23:11:01","date_gmt":"2026-09-07T21:11:01","guid":{"rendered":"https:\/\/cineprod.pro\/?page_id=12718"},"modified":"2026-09-13T13:49:06","modified_gmt":"2026-09-13T11:49:06","slug":"accueil","status":"publish","type":"page","link":"https:\/\/cineprod.pro\/","title":{"rendered":"ACCUEIL"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12718\" class=\"elementor elementor-12718\">\n\t\t\t\t<div class=\"elementor-element elementor-element-02b19d3 e-con e-atomic-element e-flexbox-base e-da7bef6 \" data-id=\"02b19d3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"02b19d3\" id=\"hero-section\">\n    \t\t<div class=\"elementor-element elementor-element-ba00a89 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"ba00a89\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ========================================================= CINEPROD \u2014 HERO RESPONSIVE ========================================================= --> <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"> <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Hammersmith+One&family=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" > <div class=\"cineprod-hero\">\r\n<!-- =====================================================\r\n     IMAGE\r\n     PC \/ TABLETTE = image originale\r\n     MOBILE = image d\u00e9di\u00e9e mobile\r\n===================================================== -->\r\n\r\n<picture class=\"cineprod-hero-picture\">\r\n\r\n    <!-- IMAGE MOBILE : 767px et moins -->\r\n    <source\r\n        media=\"(max-width: 767px)\"\r\n        srcset=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/location-de-ring-de-boxe-pour-clip-scaled.jpg\"\r\n    >\r\n\r\n    <!-- IMAGE PC \/ TABLETTE : INCHANG\u00c9E -->\r\n    <img decoding=\"async\"\r\n        class=\"cineprod-hero-image\"\r\n        src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Design-sans-titre-9.png\"\r\n        alt=\"\"\r\n    >\r\n\r\n<\/picture>\r\n\r\n\r\n<!-- =====================================================\r\n     TEXTE + BOUTON\r\n===================================================== -->\r\n\r\n<div class=\"cineprod-hero-text\">\r\n\r\n    <h1>\r\n        L\u00e0 o\u00f9 chaque \u00e9v\u00e9nement devient une sc\u00e8ne de cin\u00e9ma.\r\n    <\/h1>\r\n\r\n    <p>\r\n        Le ring de boxe con\u00e7u pour les tournages,<br>\r\n        les clips, les shootings, et les \u00e9v\u00e9nements d'exception.\r\n    <\/p>\r\n\r\n    <a\r\n        href=\"#choisissez-univers\"\r\n        class=\"hero-button\"\r\n    >\r\n        ENTREZ DANS L\u2019AR\u00c8NE\r\n    <\/a>\r\n\r\n<\/div>\r\n\r\n<\/div> <style> \/* ========================================================= RESET ========================================================= *\/ .cineprod-hero, .cineprod-hero * { box-sizing: border-box; } \/* ========================================================= HERO ========================================================= *\/ .cineprod-hero { position: relative; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; overflow: hidden; background: #000; opacity: 0; animation: cineprodFadeIn 1.2s ease-out forwards; z-index: 1; } \/* ========================================================= PICTURE ========================================================= *\/ .cineprod-hero-picture { display: block; width: 100%; margin: 0; padding: 0; } \/* ========================================================= IMAGE ========================================================= *\/ .cineprod-hero-image { display: block; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain; } \/* ========================================================= TEXTE DESKTOP INCHANG\u00c9 ========================================================= *\/ .cineprod-hero-text { position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); width: 88%; max-width: 1100px; padding: 1vw; text-align: center; color: #fff; z-index: 2; } \/* ========================================================= TITRE ========================================================= *\/ .cineprod-hero-text h1 { margin: 0 0 1.5vw 0 !important; padding: 0 !important; color: #fff !important; font-family: \"Hammersmith One\", sans-serif; font-size: clamp(22px, 3vw, 42px); font-weight: 400; line-height: 1.15; } \/* ========================================================= SOUS-TEXTE ========================================================= *\/ .cineprod-hero-text p { margin: 0 !important; padding: 0 !important; color: #fff !important; font-family: \"Montserrat\", sans-serif; font-size: clamp(13px, 1.45vw, 20px); font-weight: 400; line-height: 1.45; } \/* ========================================================= BOUTON ========================================================= *\/ .hero-button { display: inline-flex; align-items: center; justify-content: center; min-width: 249px; height: 52px; margin-top: 18px; padding: 0 25px; background: #E51616; color: #FFFFFF !important; border: none; border-radius: 0; font-family: \"Hammersmith One\", sans-serif; font-size: 16px; font-weight: 400; line-height: 1; text-decoration: none !important; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .hero-button:hover { background: #C90D12 !important; color: #FFFFFF !important; transform: translateY(-2px); } .hero-button:active { transform: translateY(0); } \/* ========================================================= TABLETTE 768 \u2192 1024 PX ========================================================= *\/ @media (min-width: 768px) and (max-width: 1024px) { .cineprod-hero-text { top: 54%; width: 90%; padding: 10px; } .cineprod-hero-text h1 { font-size: clamp(23px, 3.5vw, 32px); margin-bottom: 1.8vw !important; } .cineprod-hero-text p { font-size: clamp(13px, 1.8vw, 18px); line-height: 1.4; } .hero-button { min-width: 230px; height: 50px; margin-top: 18px; padding: 0 25px; font-size: 15px; } } \/* ========================================================= MOBILE 481 \u2192 767 PX BLOC TEXTE : +20 PX BOUTON : +50 PX SUPPL\u00c9MENTAIRES ========================================================= *\/ @media (min-width: 481px) and (max-width: 767px) { .cineprod-hero { width: 100vw !important; max-width: 100vw !important; overflow: hidden !important; } .cineprod-hero-picture { display: block; width: 100%; } .cineprod-hero-image { width: 100% !important; max-width: none !important; height: auto !important; object-fit: contain; } \/* BLOC TEXTE +20 PX *\/ .cineprod-hero-text { top: calc(54% + 20px); left: 50%; width: 92%; max-width: none; padding: 8px; transform: translate(-50%, -50%); } .cineprod-hero-text h1 { font-size: clamp(20px, 5vw, 27px); line-height: 1.15; margin: 0 0 2vw 0 !important; } .cineprod-hero-text p { font-size: clamp(12px, 3vw, 15px); line-height: 1.35; } \/* BOUTON +50 PX *\/ .hero-button { width: 100%; max-width: 280px; min-width: 0; height: 50px; margin: 58px auto 0; padding: 0 20px; display: flex; font-size: 15px; } } \/* ========================================================= PETIT MOBILE \u2264 480 PX BLOC TEXTE : +20 PX BOUTON : +50 PX SUPPL\u00c9MENTAIRES ========================================================= *\/ @media (max-width: 480px) { .cineprod-hero { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; } \/* ===================================================== IMAGE MOBILE ===================================================== *\/ .cineprod-hero-picture { display: block; width: 100%; } .cineprod-hero-image { display: block; width: 100% !important; max-width: none !important; height: auto !important; object-fit: contain; } \/* ===================================================== BLOC TEXTE +20 PX ===================================================== *\/ .cineprod-hero-text { position: absolute; top: calc(55% + 20px); left: 50%; width: 92%; max-width: none; padding: 5px; transform: translate(-50%, -50%); text-align: center; } \/* ===================================================== TITRE ===================================================== *\/ .cineprod-hero-text h1 { margin: 0 0 2.5vw 0 !important; padding: 0 !important; font-size: clamp(17px, 5.5vw, 23px); line-height: 1.12; } \/* ===================================================== TEXTE ===================================================== *\/ .cineprod-hero-text p { margin: 0 !important; padding: 0 !important; font-size: clamp(10px, 3.4vw, 14px); line-height: 1.3; } \/* ===================================================== BOUTON +50 PX ===================================================== *\/ .hero-button { width: 100%; max-width: 280px; min-width: 0; height: 50px; margin: 58px auto 0; padding: 0 20px; display: flex; font-size: 15px; } } \/* ========================================================= TR\u00c8S PETIT MOBILE \u2264 360 PX BLOC TEXTE : +20 PX BOUTON : +50 PX SUPPL\u00c9MENTAIRES ========================================================= *\/ @media (max-width: 360px) { .cineprod-hero-text { top: calc(56% + 20px); width: 94%; padding: 3px; } .cineprod-hero-text h1 { font-size: 17px; line-height: 1.1; margin-bottom: 7px !important; } .cineprod-hero-text p { font-size: 10px; line-height: 1.25; } .hero-button { max-width: 260px; height: 50px; margin: 58px auto 0; font-size: 14px; } } \/* ========================================================= FADE IN ========================================================= *\/ @keyframes cineprodFadeIn { from { opacity: 0; } to { opacity: 1; } } \/* ========================================================= ACCESSIBILIT\u00c9 ========================================================= *\/ @media (prefers-reduced-motion: reduce) { .cineprod-hero { opacity: 1; animation: none; } } <\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-a7c43dd e-con e-atomic-element e-flexbox-base e-85b0dcd \" data-id=\"a7c43dd\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a7c43dd\" id=\"choisissez-univers\">\n    \t\t<div class=\"elementor-element elementor-element-0cc3ade elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"0cc3ade\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\r\n\/* =========================================================\r\n   SECTION UNIVERS\r\n========================================================= *\/\r\n\r\n.univers-section {\r\n  position: relative;\r\n\r\n  width: 100vw !important;\r\n  max-width: 100vw !important;\r\n\r\n  margin-left: calc(50% - 50vw) !important;\r\n  margin-right: calc(50% - 50vw) !important;\r\n\r\n  height: 100vh;\r\n  min-height: 600px;\r\n  max-height: 100vh;\r\n\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-shrink: 0;\r\n\r\n  overflow: hidden;\r\n\r\n  margin-top: 0 !important;\r\n  margin-bottom: 0 !important;\r\n\r\n  padding: 0 !important;\r\n\r\n  font-family: \"Hammersmith One\", sans-serif;\r\n\r\n  box-sizing: border-box;\r\n\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n\r\n  transition:\r\n    opacity 0.9s ease,\r\n    transform 0.9s ease;\r\n\r\n  isolation: isolate;\r\n  z-index: 1;\r\n}\r\n\r\n.univers-section.is-visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARTES GAUCHE \/ DROITE\r\n========================================================= *\/\r\n\r\n.univers-card {\r\n  position: relative;\r\n\r\n  width: 50%;\r\n  height: 100%;\r\n\r\n  flex: 0 0 50%;\r\n\r\n  overflow: hidden;\r\n\r\n  cursor: pointer;\r\n\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VID\u00c9OS\r\n========================================================= *\/\r\n\r\n.univers-video {\r\n  position: absolute;\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit: cover;\r\n\r\n  transform:\r\n    translate(-50%, -50%)\r\n    scale(1.25);\r\n\r\n  transform-origin: center center;\r\n\r\n  display: block;\r\n\r\n  margin: 0;\r\n  padding: 0;\r\n  border: none;\r\n\r\n  max-width: none !important;\r\n  max-height: none !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   APER\u00c7U PHOTO GAUCHE \u2014 PC\r\n========================================================= *\/\r\n\r\n.univers-preview-left {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n\r\n  max-width: none !important;\r\n  max-height: none !important;\r\n\r\n  object-fit: cover;\r\n\r\n  object-position: center center;\r\n\r\n  transform: none;\r\n\r\n  z-index: 1;\r\n\r\n  display: block;\r\n\r\n  margin: 0;\r\n  padding: 0;\r\n  border: none;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VID\u00c9O GAUCHE \u2014 PC\r\n========================================================= *\/\r\n\r\n.univers-video-left {\r\n  z-index: 2;\r\n\r\n  opacity: 0;\r\n\r\n  pointer-events: none;\r\n\r\n  transition:\r\n    opacity 0.35s ease,\r\n    transform 0.6s ease;\r\n}\r\n\r\n.univers-left:hover .univers-video-left {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translate(-50%, -50%)\r\n    scale(1.25);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VID\u00c9O DROITE \u2014 PC\r\n========================================================= *\/\r\n\r\n.univers-video-right {\r\n  z-index: 1;\r\n\r\n  opacity: 1;\r\n\r\n  transition:\r\n    transform 0.6s ease;\r\n}\r\n\r\n.univers-right:hover .univers-video-right {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    scale(1.25);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   OVERLAY\r\n========================================================= *\/\r\n\r\n.univers-overlay {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 3;\r\n\r\n  background: rgba(0, 0, 0, 0.25);\r\n\r\n  transition:\r\n    background 0.5s ease;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   OVERLAY AU HOVER\r\n========================================================= *\/\r\n\r\n.univers-left:hover .univers-overlay,\r\n.univers-right:hover .univers-overlay {\r\n  background: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITRE CENTRAL\r\n========================================================= *\/\r\n\r\n.univers-title {\r\n  position: absolute;\r\n\r\n  z-index: 20;\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  transform:\r\n    translate(-50%, -50%);\r\n\r\n  color: #ffffff;\r\n\r\n  font-family:\r\n    \"Hammersmith One\",\r\n    sans-serif;\r\n\r\n  font-size: 52px;\r\n\r\n  line-height: 0.98;\r\n\r\n  text-align: center;\r\n\r\n  white-space: nowrap;\r\n\r\n  pointer-events: none;\r\n\r\n  text-shadow:\r\n    0 3px 18px rgba(0, 0, 0, 0.65);\r\n\r\n  margin: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOUTON GAUCHE\r\n========================================================= *\/\r\n\r\n.univers-events-button {\r\n  position: absolute;\r\n\r\n  left: 50%;\r\n  bottom: calc(10% + 10px);\r\n\r\n  transform:\r\n    translateX(-50%);\r\n\r\n  z-index: 10;\r\n\r\n  display: inline-block;\r\n\r\n  padding: 15px 35px;\r\n\r\n  background-color: #FF3131;\r\n\r\n  color: #ffffff !important;\r\n\r\n  font-family:\r\n    \"Hammersmith One\",\r\n    sans-serif;\r\n\r\n  font-size: 18px;\r\n\r\n  font-weight: 400;\r\n\r\n  line-height: 1;\r\n\r\n  text-align: center;\r\n\r\n  text-decoration: none !important;\r\n\r\n  white-space: nowrap;\r\n\r\n  border: none;\r\n\r\n  border-radius: 0;\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    background-color 0.3s ease,\r\n    transform 0.3s ease;\r\n\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HOVER BOUTON GAUCHE\r\n========================================================= *\/\r\n\r\n.univers-events-button:hover {\r\n  background-color: #e52b2b;\r\n\r\n  color: #ffffff !important;\r\n\r\n  text-decoration: none !important;\r\n\r\n  transform:\r\n    translateX(-50%)\r\n    translateY(-3px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CLIC BOUTON GAUCHE\r\n========================================================= *\/\r\n\r\n.univers-events-button:active {\r\n  background-color: #bd2020;\r\n\r\n  color: #ffffff !important;\r\n\r\n  transform:\r\n    translateX(-50%)\r\n    translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOUTON DROITE\r\n========================================================= *\/\r\n\r\n.univers-workshop-button {\r\n  position: absolute;\r\n\r\n  left: 50%;\r\n  bottom: calc(10% + 10px);\r\n\r\n  transform:\r\n    translateX(-50%);\r\n\r\n  z-index: 10;\r\n\r\n  display: inline-block;\r\n\r\n  padding: 15px 35px;\r\n\r\n  background-color: #0D64B1;\r\n\r\n  color: #ffffff !important;\r\n\r\n  font-family:\r\n    \"Hammersmith One\",\r\n    sans-serif;\r\n\r\n  font-size: 18px;\r\n\r\n  font-weight: 400;\r\n\r\n  line-height: 1;\r\n\r\n  text-align: center;\r\n\r\n  text-decoration: none !important;\r\n\r\n  white-space: nowrap;\r\n\r\n  border: none;\r\n\r\n  border-radius: 0;\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    background-color 0.3s ease,\r\n    transform 0.3s ease;\r\n\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HOVER BOUTON DROITE\r\n========================================================= *\/\r\n\r\n.univers-workshop-button:hover {\r\n  background-color: #094A83;\r\n\r\n  color: #ffffff !important;\r\n\r\n  text-decoration: none !important;\r\n\r\n  transform:\r\n    translateX(-50%)\r\n    translateY(-3px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CLIC DROITE\r\n========================================================= *\/\r\n\r\n.univers-workshop-button:active {\r\n  background-color: #073B68;\r\n\r\n  color: #ffffff !important;\r\n\r\n  transform:\r\n    translateX(-50%)\r\n    translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   S\u00c9CURIT\u00c9 POUR LES SECTIONS SUIVANTES\r\n========================================================= *\/\r\n\r\n.univers-section + section,\r\n.univers-section + div,\r\n.univers-section ~ section,\r\n.univers-section ~ div {\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLETTE \/ MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .univers-section {\r\n\r\n  .univers-preview-left {\r\n    display: none !important;\r\n  }\r\n\r\n    width: 100vw !important;\r\n    max-width: 100vw !important;\r\n\r\n    height: auto !important;\r\n    min-height: 0 !important;\r\n    max-height: none !important;\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    align-items: stretch;\r\n\r\n    overflow: visible;\r\n\r\n    padding:\r\n      38px 20px 55px !important;\r\n\r\n    margin-left:\r\n      calc(50% - 50vw) !important;\r\n\r\n    margin-right:\r\n      calc(50% - 50vw) !important;\r\n\r\n    box-sizing: border-box;\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     TITRE\r\n  ======================================================== *\/\r\n\r\n  .univers-title {\r\n\r\n    position: relative;\r\n\r\n    top: auto;\r\n    left: auto;\r\n\r\n    transform: none;\r\n\r\n    order: 1;\r\n\r\n    width: 100%;\r\n\r\n    margin: 0 0 32px;\r\n\r\n    padding: 0;\r\n\r\n    color: #ffffff;\r\n\r\n    font-family:\r\n      \"Hammersmith One\",\r\n      sans-serif;\r\n\r\n    font-size: 30px;\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 1.05;\r\n\r\n    text-align: center;\r\n\r\n    white-space: normal;\r\n\r\n    text-shadow:\r\n      0 3px 18px rgba(0, 0, 0, 0.65);\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     CARTES\r\n  ======================================================== *\/\r\n\r\n  .univers-card {\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    height: auto;\r\n\r\n    flex: none;\r\n\r\n    overflow: visible;\r\n\r\n    display: block;\r\n\r\n    cursor: pointer;\r\n\r\n  }\r\n\r\n\r\n  .univers-left {\r\n\r\n    order: 2;\r\n\r\n    margin-bottom: 42px;\r\n\r\n  }\r\n\r\n\r\n  .univers-right {\r\n\r\n    order: 3;\r\n\r\n    margin-bottom: 0;\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     APER\u00c7US MOBILES\r\n     \r\n     TOUJOURS VISIBLES\r\n  ======================================================== *\/\r\n\r\n  .univers-mobile-preview {\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 100%;\r\n    height: calc(100% - 66px);\r\n\r\n    object-fit: cover;\r\n\r\n    object-position: center center;\r\n\r\n    display: block !important;\r\n\r\n    z-index: 1;\r\n\r\n    pointer-events: none;\r\n\r\n  }\r\n\r\n\r\n  .univers-mobile-preview-left {\r\n\r\n    content:\r\n      url(\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Capture-decran-2026-09-04-143924.png\");\r\n\r\n  }\r\n\r\n\r\n  .univers-mobile-preview-right {\r\n\r\n    content:\r\n      url(\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Capture-decran-2026-09-11-143745.png\");\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     VID\u00c9OS MOBILE\r\n     \r\n     ELLES RESTENT AFFICH\u00c9ES.\r\n     PAS DE opacity:0.\r\n  ======================================================== *\/\r\n\r\n  .univers-video {\r\n\r\n    position: relative;\r\n\r\n    top: auto;\r\n    left: auto;\r\n\r\n    width: 100% !important;\r\n\r\n    height: auto !important;\r\n\r\n    aspect-ratio: 16 \/ 10;\r\n\r\n    object-fit: cover;\r\n\r\n    display: block;\r\n\r\n    transform: none !important;\r\n\r\n    max-width: none !important;\r\n    max-height: none !important;\r\n\r\n  }\r\n\r\n\r\n  .univers-video-left,\r\n  .univers-video-right {\r\n\r\n    opacity: 1 !important;\r\n\r\n    z-index: 2;\r\n\r\n    pointer-events: none;\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     OVERLAY MOBILE\r\n  ======================================================== *\/\r\n\r\n  .univers-overlay {\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n\r\n    height: calc(100% - 66px);\r\n\r\n    z-index: 3;\r\n\r\n    background:\r\n      rgba(0, 0, 0, 0.20);\r\n\r\n    pointer-events: none;\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     BOUTONS\r\n  ======================================================== *\/\r\n\r\n  .univers-events-button,\r\n  .univers-workshop-button {\r\n\r\n    position: relative;\r\n\r\n    left: auto;\r\n    bottom: auto;\r\n\r\n    transform: none !important;\r\n\r\n    z-index: 10;\r\n\r\n    width: 100%;\r\n\r\n    min-width: 0;\r\n\r\n    height: 52px;\r\n\r\n    margin:\r\n      14px 0 0;\r\n\r\n    padding:\r\n      0 15px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    font-family:\r\n      \"Hammersmith One\",\r\n      sans-serif;\r\n\r\n    font-size: 16px;\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 1.1;\r\n\r\n    text-align: center;\r\n\r\n    text-decoration: none !important;\r\n\r\n    white-space: normal;\r\n\r\n    box-sizing: border-box;\r\n\r\n  }\r\n\r\n\r\n  .univers-events-button {\r\n\r\n    background-color:\r\n      #FF3131;\r\n\r\n  }\r\n\r\n\r\n  .univers-workshop-button {\r\n\r\n    background-color:\r\n      #0D64B1;\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     ANNULATION DES HOVERS MOBILE\r\n  ======================================================== *\/\r\n\r\n  .univers-left:hover .univers-video-left,\r\n  .univers-right:hover .univers-video-right {\r\n\r\n    opacity: 1 !important;\r\n\r\n    transform: none !important;\r\n\r\n  }\r\n\r\n  .univers-left:hover .univers-overlay,\r\n  .univers-right:hover .univers-overlay {\r\n\r\n    background:\r\n      rgba(0, 0, 0, 0.20);\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     MOBILE : LES APER\u00c7US SONT SOUS LA VID\u00c9O\r\n     \r\n     MAIS LA VID\u00c9O NE MASQUE PAS L'APER\u00c7U\r\n     AVANT D'\u00caTRE LANC\u00c9E.\r\n  ======================================================== *\/\r\n\r\n  .univers-video-left,\r\n  .univers-video-right {\r\n\r\n    background-color: transparent;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PETIT MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n  .univers-section {\r\n\r\n    padding:\r\n      32px 15px 45px !important;\r\n\r\n  }\r\n\r\n\r\n  .univers-title {\r\n\r\n    font-size: 25px;\r\n\r\n    margin-bottom: 28px;\r\n\r\n  }\r\n\r\n\r\n  .univers-left {\r\n\r\n    margin-bottom: 35px;\r\n\r\n  }\r\n\r\n\r\n  .univers-events-button,\r\n  .univers-workshop-button {\r\n\r\n    height: 50px;\r\n\r\n    margin-top: 12px;\r\n\r\n    padding:\r\n      0 12px;\r\n\r\n    font-size: 14px;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     SECTION UNIVERS\r\n========================================================= -->\r\n\r\n<div class=\"univers-section\">\r\n\r\n\r\n  <!-- PARTIE GAUCHE -->\r\n\r\n  <div class=\"univers-card univers-left\">\r\n\r\n    <img decoding=\"async\"\r\n      class=\"univers-preview-left\"\r\n      src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Capture-decran-2026-09-04-143924.png\"\r\n      alt=\"\"\r\n    >\r\n\r\n    <!-- APER\u00c7U MOBILE GAUCHE -->\r\n    <img decoding=\"async\"\r\n      class=\"univers-mobile-preview univers-mobile-preview-left\"\r\n      src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Capture-decran-2026-09-04-143924.png\"\r\n      alt=\"\"\r\n    >\r\n\r\n    <video\r\n      class=\"univers-video univers-video-left\"\r\n      playsinline\r\n      webkit-playsinline\r\n      preload=\"metadata\"\r\n      muted\r\n    >\r\n\r\n      <source\r\n        src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Design-sans-titre.mp4\"\r\n        type=\"video\/mp4\"\r\n      >\r\n\r\n    <\/video>\r\n\r\n    <div class=\"univers-overlay\"><\/div>\r\n\r\n    <a\r\n      href=\"#decors-ring\"\r\n      class=\"univers-events-button\"\r\n    >\r\n      \u00c9V\u00c9NEMENTS ET TOURNAGES\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- PARTIE DROITE -->\r\n\r\n  <div class=\"univers-card univers-right\">\r\n\r\n    <!-- APER\u00c7U MOBILE DROITE -->\r\n    <img decoding=\"async\"\r\n      class=\"univers-mobile-preview univers-mobile-preview-right\"\r\n      src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Capture-decran-2026-09-11-143745.png\"\r\n      alt=\"\"\r\n    >\r\n\r\n    <video\r\n      class=\"univers-video univers-video-right\"\r\n      playsinline\r\n      webkit-playsinline\r\n      preload=\"metadata\"\r\n      muted\r\n    >\r\n\r\n      <source\r\n        src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Design-sans-titre-1.mp4\"\r\n        type=\"video\/mp4\"\r\n      >\r\n\r\n    <\/video>\r\n\r\n    <div class=\"univers-overlay\"><\/div>\r\n\r\n    <a\r\n      href=\"#atelier-entreprise\"\r\n      class=\"univers-workshop-button\"\r\n    >\r\n      ATELIER TEAM BUILDING\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- TITRE -->\r\n\r\n  <div class=\"univers-title\">\r\n\r\n    CHOISISSEZ<br>\r\n    VOTRE UNIVERS\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n\r\n  \/* =========================================================\r\n     \u00c9L\u00c9MENTS\r\n  ========================================================= *\/\r\n\r\n  const section =\r\n    document.querySelector(\".univers-section\");\r\n\r\n  const leftCard =\r\n    document.querySelector(\".univers-left\");\r\n\r\n  const rightCard =\r\n    document.querySelector(\".univers-right\");\r\n\r\n  const leftVideo =\r\n    document.querySelector(\".univers-video-left\");\r\n\r\n  const rightVideo =\r\n    document.querySelector(\".univers-video-right\");\r\n\r\n\r\n  \/* =========================================================\r\n     S\u00c9CURIT\u00c9\r\n  ========================================================= *\/\r\n\r\n  if (\r\n    !section ||\r\n    !leftCard ||\r\n    !rightCard ||\r\n    !leftVideo ||\r\n    !rightVideo\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     R\u00c9GLAGES VID\u00c9O GAUCHE\r\n     \r\n     PC INCHANG\u00c9\r\n  ========================================================= *\/\r\n\r\n  const LEFT_START = 16;\r\n\r\n  const LEFT_END = 79;\r\n\r\n\r\n  \/* =========================================================\r\n     D\u00c9TECTION MOBILE\r\n  ========================================================= *\/\r\n\r\n  const mobileQuery =\r\n    window.matchMedia(\"(max-width: 767px)\");\r\n\r\n  const isMobile =\r\n    mobileQuery.matches;\r\n\r\n\r\n  \/* =========================================================\r\n     \u00c9TAT DES VID\u00c9OS\r\n     \r\n     PC INCHANG\u00c9\r\n  ========================================================= *\/\r\n\r\n  let leftHovering = false;\r\n\r\n  let rightHovering = false;\r\n\r\n  let leftLoopInterval = null;\r\n\r\n\r\n  \/* =========================================================\r\n     STOP VID\u00c9O GAUCHE\r\n     \r\n     PC INCHANG\u00c9\r\n  ========================================================= *\/\r\n\r\n  function stopLeftVideo() {\r\n\r\n    leftHovering = false;\r\n\r\n    clearInterval(\r\n      leftLoopInterval\r\n    );\r\n\r\n    leftLoopInterval = null;\r\n\r\n    leftVideo.pause();\r\n\r\n    try {\r\n\r\n      leftVideo.currentTime =\r\n        LEFT_START;\r\n\r\n    } catch (e) {}\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     START VID\u00c9O GAUCHE \u2014 DESKTOP\r\n     \r\n     PC INCHANG\u00c9\r\n  ========================================================= *\/\r\n\r\n  function startLeftVideo() {\r\n\r\n    leftHovering = true;\r\n\r\n    rightHovering = false;\r\n\r\n\r\n    rightVideo.pause();\r\n\r\n    try {\r\n\r\n      rightVideo.currentTime = 0;\r\n\r\n    } catch (e) {}\r\n\r\n\r\n    try {\r\n\r\n      leftVideo.currentTime =\r\n        LEFT_START;\r\n\r\n    } catch (e) {}\r\n\r\n\r\n    leftVideo.muted = false;\r\n\r\n    leftVideo.volume = 1;\r\n\r\n\r\n    const playPromise =\r\n      leftVideo.play();\r\n\r\n    if (\r\n      playPromise !== undefined\r\n    ) {\r\n\r\n      playPromise.catch(\r\n        function (error) {\r\n\r\n          console.log(\r\n            \"Lecture audio gauche bloqu\u00e9e :\",\r\n            error\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n    }\r\n\r\n\r\n    clearInterval(\r\n      leftLoopInterval\r\n    );\r\n\r\n\r\n    leftLoopInterval =\r\n      setInterval(function () {\r\n\r\n        if (!leftHovering) {\r\n          return;\r\n        }\r\n\r\n        if (\r\n          leftVideo.currentTime >=\r\n          LEFT_END\r\n        ) {\r\n\r\n          try {\r\n\r\n            leftVideo.currentTime =\r\n              LEFT_START;\r\n\r\n          } catch (e) {}\r\n\r\n\r\n          const playPromise =\r\n            leftVideo.play();\r\n\r\n          if (\r\n            playPromise !== undefined\r\n          ) {\r\n\r\n            playPromise.catch(\r\n              function () {}\r\n            );\r\n\r\n          }\r\n\r\n        }\r\n\r\n      }, 80);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     STOP VID\u00c9O DROITE \u2014 DESKTOP\r\n     \r\n     PC INCHANG\u00c9\r\n  ========================================================= *\/\r\n\r\n  function stopRightVideo() {\r\n\r\n    rightHovering = false;\r\n\r\n    rightVideo.pause();\r\n\r\n    try {\r\n\r\n      rightVideo.currentTime = 0;\r\n\r\n    } catch (e) {}\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     START VID\u00c9O DROITE \u2014 DESKTOP\r\n     \r\n     PC INCHANG\u00c9\r\n  ========================================================= *\/\r\n\r\n  function startRightVideo() {\r\n\r\n    rightHovering = true;\r\n\r\n    leftHovering = false;\r\n\r\n\r\n    clearInterval(\r\n      leftLoopInterval\r\n    );\r\n\r\n    leftLoopInterval = null;\r\n\r\n    leftVideo.pause();\r\n\r\n    try {\r\n\r\n      leftVideo.currentTime =\r\n        LEFT_START;\r\n\r\n    } catch (e) {}\r\n\r\n\r\n    try {\r\n\r\n      rightVideo.currentTime = 0;\r\n\r\n    } catch (e) {}\r\n\r\n\r\n    rightVideo.muted = false;\r\n\r\n    rightVideo.volume = 1;\r\n\r\n\r\n    const playPromise =\r\n      rightVideo.play();\r\n\r\n    if (\r\n      playPromise !== undefined\r\n    ) {\r\n\r\n      playPromise.catch(\r\n        function (error) {\r\n\r\n          console.log(\r\n            \"Lecture audio droite bloqu\u00e9e :\",\r\n            error\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     DESKTOP UNIQUEMENT\r\n     \r\n     PC INCHANG\u00c9\r\n  ========================================================= *\/\r\n\r\n  if (!isMobile) {\r\n\r\n    leftCard.addEventListener(\r\n      \"mouseenter\",\r\n      startLeftVideo\r\n    );\r\n\r\n    leftCard.addEventListener(\r\n      \"mouseleave\",\r\n      stopLeftVideo\r\n    );\r\n\r\n\r\n    rightCard.addEventListener(\r\n      \"mouseenter\",\r\n      startRightVideo\r\n    );\r\n\r\n    rightCard.addEventListener(\r\n      \"mouseleave\",\r\n      stopRightVideo\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     S\u00c9CURIT\u00c9 DESKTOP\r\n     \r\n     PC INCHANG\u00c9\r\n  ========================================================= *\/\r\n\r\n  leftVideo.addEventListener(\r\n    \"play\",\r\n    function () {\r\n\r\n      if (\r\n        !isMobile &&\r\n        rightHovering\r\n      ) {\r\n\r\n        rightVideo.pause();\r\n\r\n        try {\r\n\r\n          rightVideo.currentTime = 0;\r\n\r\n        } catch (e) {}\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  rightVideo.addEventListener(\r\n    \"play\",\r\n    function () {\r\n\r\n      if (\r\n        !isMobile &&\r\n        leftHovering\r\n      ) {\r\n\r\n        leftVideo.pause();\r\n\r\n        try {\r\n\r\n          leftVideo.currentTime =\r\n            LEFT_START;\r\n\r\n        } catch (e) {}\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALISATION\r\n  ========================================================= *\/\r\n\r\n  leftVideo.pause();\r\n\r\n  rightVideo.pause();\r\n\r\n\r\n  \/* =========================================================\r\n     M\u00c9TADONN\u00c9ES GAUCHE\r\n  ========================================================= *\/\r\n\r\n  leftVideo.addEventListener(\r\n    \"loadedmetadata\",\r\n    function () {\r\n\r\n      try {\r\n\r\n        leftVideo.currentTime =\r\n          LEFT_START;\r\n\r\n      } catch (e) {}\r\n\r\n\r\n      if (isMobile) {\r\n\r\n        leftVideo.muted = true;\r\n\r\n        leftVideo.defaultMuted = true;\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     M\u00c9TADONN\u00c9ES DROITE\r\n  ========================================================= *\/\r\n\r\n  rightVideo.addEventListener(\r\n    \"loadedmetadata\",\r\n    function () {\r\n\r\n      try {\r\n\r\n        rightVideo.currentTime = 0;\r\n\r\n      } catch (e) {}\r\n\r\n\r\n      if (isMobile) {\r\n\r\n        rightVideo.muted = true;\r\n\r\n        rightVideo.defaultMuted = true;\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     ========================================================\r\n     MOBILE UNIQUEMENT\r\n     \r\n     AUCUN AUTOPLAY\r\n     AUCUN INTERSECTION OBSERVER\r\n     AUCUN MASQUAGE\r\n     ========================================================\r\n     ========================================================= *\/\r\n\r\n  if (isMobile) {\r\n\r\n\r\n    \/* =======================================================\r\n       CONFIGURATION MOBILE\r\n    ======================================================== *\/\r\n\r\n    leftVideo.muted = true;\r\n    leftVideo.defaultMuted = true;\r\n    leftVideo.playsInline = true;\r\n\r\n    rightVideo.muted = true;\r\n    rightVideo.defaultMuted = true;\r\n    rightVideo.playsInline = true;\r\n\r\n\r\n    leftVideo.autoplay = false;\r\n    rightVideo.autoplay = false;\r\n\r\n\r\n    leftVideo.removeAttribute(\r\n      \"autoplay\"\r\n    );\r\n\r\n    rightVideo.removeAttribute(\r\n      \"autoplay\"\r\n    );\r\n\r\n\r\n    leftVideo.setAttribute(\r\n      \"playsinline\",\r\n      \"\"\r\n    );\r\n\r\n    leftVideo.setAttribute(\r\n      \"webkit-playsinline\",\r\n      \"\"\r\n    );\r\n\r\n    rightVideo.setAttribute(\r\n      \"playsinline\",\r\n      \"\"\r\n    );\r\n\r\n    rightVideo.setAttribute(\r\n      \"webkit-playsinline\",\r\n      \"\"\r\n    );\r\n\r\n\r\n    \/* =======================================================\r\n       BOUCLE VID\u00c9O GAUCHE\r\n    ======================================================== *\/\r\n\r\n    leftVideo.addEventListener(\r\n      \"timeupdate\",\r\n      function () {\r\n\r\n        if (\r\n          leftVideo.currentTime >=\r\n          LEFT_END\r\n        ) {\r\n\r\n          try {\r\n\r\n            leftVideo.currentTime =\r\n              LEFT_START;\r\n\r\n          } catch (e) {}\r\n\r\n\r\n          leftVideo.play().catch(\r\n            function () {}\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n    );\r\n\r\n\r\n    \/* =======================================================\r\n       CLIC GAUCHE\r\n    ======================================================== *\/\r\n\r\n    leftCard.addEventListener(\r\n      \"click\",\r\n      function (event) {\r\n\r\n        \/*\r\n         * Le bouton doit continuer \u00e0 fonctionner\r\n         * comme un lien.\r\n         *\/\r\n\r\n        if (\r\n          event.target.closest(\r\n            \".univers-events-button\"\r\n          )\r\n        ) {\r\n\r\n          return;\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * On arr\u00eate toujours la vid\u00e9o droite.\r\n         *\/\r\n\r\n        rightVideo.pause();\r\n\r\n\r\n        \/*\r\n         * La gauche commence \u00e0 16 secondes.\r\n         *\/\r\n\r\n        try {\r\n\r\n          if (\r\n            leftVideo.currentTime <\r\n              LEFT_START ||\r\n            leftVideo.currentTime >=\r\n              LEFT_END ||\r\n            isNaN(leftVideo.currentTime)\r\n          ) {\r\n\r\n            leftVideo.currentTime =\r\n              LEFT_START;\r\n\r\n          }\r\n\r\n        } catch (e) {}\r\n\r\n\r\n        leftVideo.muted = true;\r\n\r\n\r\n        \/*\r\n         * Lecture uniquement au toucher.\r\n         *\/\r\n\r\n        leftVideo.play().catch(\r\n          function () {}\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    \/* =======================================================\r\n       CLIC DROITE\r\n    ======================================================== *\/\r\n\r\n    rightCard.addEventListener(\r\n      \"click\",\r\n      function (event) {\r\n\r\n        \/*\r\n         * Le bouton doit continuer \u00e0 fonctionner\r\n         * comme un lien.\r\n         *\/\r\n\r\n        if (\r\n          event.target.closest(\r\n            \".univers-workshop-button\"\r\n          )\r\n        ) {\r\n\r\n          return;\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * On arr\u00eate toujours la vid\u00e9o gauche.\r\n         *\/\r\n\r\n        leftVideo.pause();\r\n\r\n\r\n        rightVideo.muted = true;\r\n\r\n\r\n        \/*\r\n         * La vid\u00e9o droite d\u00e9marre \u00e0 0.\r\n         *\/\r\n\r\n        try {\r\n\r\n          rightVideo.currentTime = 0;\r\n\r\n        } catch (e) {}\r\n\r\n\r\n        rightVideo.play().catch(\r\n          function () {}\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     FADE IN AU SCROLL\r\n     \r\n     PC INCHANG\u00c9\r\n  ========================================================= *\/\r\n\r\n  if (\r\n    \"IntersectionObserver\" in window\r\n  ) {\r\n\r\n    const observer =\r\n      new IntersectionObserver(\r\n\r\n        function (entries) {\r\n\r\n          entries.forEach(\r\n            function (entry) {\r\n\r\n              if (\r\n                entry.isIntersecting\r\n              ) {\r\n\r\n                section.classList.add(\r\n                  \"is-visible\"\r\n                );\r\n\r\n                observer.unobserve(\r\n                  section\r\n                );\r\n\r\n              }\r\n\r\n            }\r\n          );\r\n\r\n        },\r\n\r\n        {\r\n          threshold: 0.15\r\n        }\r\n\r\n      );\r\n\r\n\r\n    observer.observe(\r\n      section\r\n    );\r\n\r\n  } else {\r\n\r\n    section.classList.add(\r\n      \"is-visible\"\r\n    );\r\n\r\n  }\r\n\r\n});\r\n\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-19dede7 e-flex e-con-boxed e-con e-parent\" data-id=\"19dede7\" 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-30af643 elementor-widget elementor-widget-html\" data-id=\"30af643\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"decors-ring\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style> @import url('https:\/\/fonts.googleapis.com\/css2?family=Hammersmith+One&family=Montserrat:wght@400;500;600;700&display=swap'); * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } \/* ===================================================== SECTION ===================================================== *\/ .experience-section { width: 100vw; margin-left: calc(50% - 50vw); min-height: 780px; background: #0A0A0A; color: #FBFBFB; overflow: hidden; position: relative; } \/* ===================================================== CONTENEUR ===================================================== *\/ .experience-container { position: relative; width: min(1280px, 94vw); min-height: 780px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: center; } \/* ===================================================== COLONNE GAUCHE ===================================================== *\/ .experience-left { width: 100%; max-width: 600px; margin: 0; padding: 0; } \/* ===================================================== TITRE ===================================================== *\/ .experience-title { width: 100%; margin: 0 0 25px; padding: 0; color: #E51616; font-family: 'Hammersmith One', sans-serif; font-size: 30px; font-weight: 400; line-height: 1.2; text-transform: uppercase; } .experience-title span { display: block; } \/* ===================================================== CONTENU ===================================================== *\/ .experience-content { width: 100%; margin: 0; padding: 0; } \/* ===================================================== INTRO ===================================================== *\/ .experience-intro { margin: 0 0 24px; padding: 0; color: #FBFBFB; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.5; } \/* ===================================================== TEXTES ===================================================== *\/ .experience-text { margin: 0 0 26px; padding: 0; color: #FBFBFB; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.55; text-align: left; } \/* ===================================================== BOUTON ===================================================== *\/ .experience-button { display: inline-flex; align-items: center; justify-content: center; min-width: 249px; height: 52px; margin-top: 18px; padding: 0 25px; background: #E51616; color: #FFFFFF; border: none; font-family: 'Hammersmith One', sans-serif; font-size: 16px; font-weight: 400; line-height: 1; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .experience-button:hover { background: #C90D12; color: #FFFFFF; transform: translateY(-2px); } \/* ===================================================== IMAGE ===================================================== *\/ .experience-visual { width: 100%; margin: 0; padding: 0; } .experience-visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 \/ 9; object-fit: cover; } \/* ===================================================== L\u00c9GENDE ===================================================== *\/ .experience-caption { margin: 48px 0 0; padding: 0; color: #FBFBFB; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4; text-align: center; } \/* ===================================================== GRAND \u00c9CRAN ===================================================== *\/ @media (min-width: 1440px) { .experience-section { min-height: 810px; } .experience-container { width: 1320px; min-height: 810px; column-gap: 80px; } } \/* ===================================================== TABLETTE ===================================================== *\/ @media (min-width: 701px) and (max-width: 1023px) { .experience-section { min-height: 780px; } .experience-container { width: 94vw; min-height: 780px; column-gap: 45px; } .experience-left { max-width: 100%; } .experience-title { font-size: 28px; margin-bottom: 22px; } .experience-intro, .experience-text { font-size: 15px; } .experience-caption { margin-top: 30px; font-size: 15px; } .experience-button { min-width: 230px; height: 50px; font-size: 15px; } } \/* ===================================================== MOBILE ===================================================== *\/ @media (max-width: 700px) { .experience-section { width: 100%; margin-left: 0; min-height: auto; padding: 50px 20px 60px; overflow: hidden; } \/* --------------------------------------------- CONTENEUR --------------------------------------------- *\/ .experience-container { position: relative; width: 100%; max-width: 540px; min-height: auto; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; } \/* --------------------------------------------- COLONNE GAUCHE --------------------------------------------- *\/ .experience-left { display: contents; } \/* --------------------------------------------- TITRE ROUGE 1. TITRE --------------------------------------------- *\/ .experience-title { order: 1; width: 100%; margin: 0 0 25px; padding: 0; color: #E51616; font-size: 24px; line-height: 1.2; text-align: left; } \/* --------------------------------------------- PHOTO 2. PHOTO --------------------------------------------- *\/ .experience-visual { order: 2; width: 100%; margin: 0 0 25px; padding: 0; } .experience-visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 \/ 9; object-fit: cover; } \/* --------------------------------------------- L\u00c9GENDE 3. L\u00c9GENDE --------------------------------------------- *\/ .experience-caption { margin: 16px 0 0; padding-bottom: 12px; color: #FBFBFB; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; text-align: center; } \/* --------------------------------------------- CONTENU 4. TEXTE --------------------------------------------- *\/ .experience-content { order: 3; width: 100%; max-width: none; margin: 0; padding: 0; } \/* --------------------------------------------- INTRO --------------------------------------------- *\/ .experience-intro { margin: 0 0 23px; color: #FBFBFB; font-size: 16px; font-weight: 600; line-height: 1.55; } \/* --------------------------------------------- TEXTES --------------------------------------------- *\/ .experience-text { margin: 0 0 24px; color: #FBFBFB; font-size: 16px; font-weight: 400; line-height: 1.6; text-align: left; } \/* --------------------------------------------- BOUTON 5. BOUTON --------------------------------------------- *\/ .experience-button { width: 100%; max-width: 280px; min-width: 0; height: 50px; margin: 8px auto 0; padding: 0 20px; display: flex; font-size: 15px; } } \/* ===================================================== PETIT MOBILE ===================================================== *\/ @media (max-width: 380px) { .experience-section { padding-left: 15px; padding-right: 15px; padding-top: 45px; padding-bottom: 55px; } .experience-title { font-size: 23px; margin-bottom: 22px; } .experience-visual { margin-bottom: 22px; } .experience-caption { margin-top: 14px; padding-bottom: 12px; font-size: 13px; text-align: center; } .experience-intro, .experience-text { font-size: 14px; line-height: 1.6; } .experience-button { max-width: 260px; font-size: 14px; } } <\/style> <section class=\"experience-section\">\r\n<div class=\"experience-container\">\r\n\r\n\r\n    <!-- =================================================\r\n         COLONNE GAUCHE\r\n    ================================================= -->\r\n\r\n    <div class=\"experience-left\">\r\n\r\n\r\n        <!-- =================================================\r\n             TITRE\r\n        ================================================= -->\r\n\r\n        <h2 class=\"experience-title\">\r\n            <span>UNE EXPERIENCE<\/span>\r\n            <span>DONT VOS INVITES SE SOUVIENDRONT.<\/span>\r\n        <\/h2>\r\n\r\n\r\n        <!-- =================================================\r\n             CONTENU TEXTE\r\n        ================================================= -->\r\n\r\n        <div class=\"experience-content\">\r\n\r\n            <p class=\"experience-intro\">\r\n                Transformez n\u2019importe quel lieu en un d\u00e9cor de boxe digne des plus grands films.\r\n            <\/p>\r\n\r\n\r\n            <p class=\"experience-text\">\r\n                Depuis plus de 15 ans, CINEPROD imagine et installe des espaces enti\u00e8rement personnalis\u00e9s qui transforment vos \u00e9v\u00e9nements, tournages, d\u00e9fil\u00e9s et lancements de marque en v\u00e9ritables exp\u00e9riences cin\u00e9matographiques marquant durablement les esprits.\r\n            <\/p>\r\n\r\n\r\n            <p class=\"experience-text\">\r\n                Un savoir faire reconnu par les plus grandes productions fran\u00e7aises et internationales.\r\n            <\/p>\r\n\r\n\r\n            <a\r\n                href=\"\/?page_id=13461\"\r\n                class=\"experience-button\">\r\n                DECOUVREZ NOTRE HISTOIRE\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =================================================\r\n         IMAGE + L\u00c9GENDE\r\n    ================================================= -->\r\n\r\n    <figure class=\"experience-visual\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/rings-HAGLER-sylvain-MORELLEC-comedien-arbitre-clip-kery-james.jpg\"\r\n            alt=\"Sylvain Morellec, fondateur de CINEPROD\"\r\n        >\r\n\r\n        <figcaption class=\"experience-caption\">\r\n            Sylvain Morellec, fondateur de CINEPROD\r\n        <\/figcaption>\r\n\r\n    <\/figure>\r\n\r\n\r\n<\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1418e7e e-con e-atomic-element e-flexbox-base e-1e4ae9d \" data-id=\"1418e7e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1418e7e\">\n    \t\t<div class=\"elementor-element elementor-element-6307205 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"6307205\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"cp-projects\">\r\n\r\n  <!-- =====================================================\r\n       MARQUEE\r\n  ====================================================== -->\r\n\r\n  <div class=\"cp-track\">\r\n\r\n\r\n    <!-- ==================== COPIE 1 ==================== -->\r\n\r\n    <div class=\"cp-slide\">\r\n\r\n      <img decoding=\"async\"\r\n        src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Webdesign-31.jpg\"\r\n        class=\"cp-image\"\r\n        alt=\"\"\r\n      >\r\n\r\n      <div class=\"cp-zone cp-gaultier\"\r\n        data-project=\"gaultier\"\r\n        data-video=\"UMEPSP9-duQ\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=UMEPSP9-duQ\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-samsung\"\r\n        data-project=\"samsung\"\r\n        data-video=\"6js8ZWxm_YE\"\r\n        data-start=\"15\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=6js8ZWxm_YE&t=15s\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-nrj\"\r\n        data-project=\"nrj\"\r\n        data-video=\"2hBCTcsWPJs\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=2hBCTcsWPJs\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-equipe\"\r\n        data-project=\"equipe\"\r\n        data-video=\"pgHKptNitQs\"\r\n        data-start=\"4\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=pgHKptNitQs&t=4s\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-dals\"\r\n        data-project=\"dals\"\r\n        data-video=\"vnH00xVUmqA\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=vnH00xVUmqA\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-jo\"\r\n        data-project=\"jo\"\r\n        data-video=\"tXQC_MNKlJk\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=tXQC_MNKlJk\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-citizenk\"\r\n        data-project=\"citizenk\"\r\n        data-citizen=\"true\"\r\n        data-link=\"https:\/\/saywhomedia.com\/fr\/evenements\/citizen-k-homme-sport-party\/\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-squeezie\"\r\n        data-project=\"squeezie\"\r\n        data-video=\"MzAvO_ZJaHg\"\r\n        data-start=\"1289\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=MzAvO_ZJaHg&t=21m29s\">\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ==================== COPIE 2 ==================== -->\r\n\r\n    <div class=\"cp-slide\">\r\n\r\n      <img decoding=\"async\"\r\n        src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Webdesign-31.jpg\"\r\n        class=\"cp-image\"\r\n        alt=\"\"\r\n      >\r\n\r\n      <div class=\"cp-zone cp-gaultier\"\r\n        data-project=\"gaultier\"\r\n        data-video=\"UMEPSP9-duQ\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=UMEPSP9-duQ\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-samsung\"\r\n        data-project=\"samsung\"\r\n        data-video=\"6js8ZWxm_YE\"\r\n        data-start=\"15\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=6js8ZWxm_YE&t=15s\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-nrj\"\r\n        data-project=\"nrj\"\r\n        data-video=\"2hBCTcsWPJs\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=2hBCTcsWPJs\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-equipe\"\r\n        data-project=\"equipe\"\r\n        data-video=\"pgHKptNitQs\"\r\n        data-start=\"4\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=pgHKptNitQs&t=4s\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-dals\"\r\n        data-project=\"dals\"\r\n        data-video=\"vnH00xVUmqA\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=vnH00xVUmqA\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-jo\"\r\n        data-project=\"jo\"\r\n        data-video=\"tXQC_MNKlJk\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=tXQC_MNKlJk\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-citizenk\"\r\n        data-project=\"citizenk\"\r\n        data-citizen=\"true\"\r\n        data-link=\"https:\/\/saywhomedia.com\/fr\/evenements\/citizen-k-homme-sport-party\/\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-squeezie\"\r\n        data-project=\"squeezie\"\r\n        data-video=\"MzAvO_ZJaHg\"\r\n        data-start=\"1289\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=MzAvO_ZJaHg&t=21m29s\">\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ==================== COPIE 3 ==================== -->\r\n\r\n    <div class=\"cp-slide\">\r\n\r\n      <img decoding=\"async\"\r\n        src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Webdesign-31.jpg\"\r\n        class=\"cp-image\"\r\n        alt=\"\"\r\n      >\r\n\r\n      <div class=\"cp-zone cp-gaultier\"\r\n        data-project=\"gaultier\"\r\n        data-video=\"UMEPSP9-duQ\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=UMEPSP9-duQ\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-samsung\"\r\n        data-project=\"samsung\"\r\n        data-video=\"6js8ZWxm_YE\"\r\n        data-start=\"15\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=6js8ZWxm_YE&t=15s\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-nrj\"\r\n        data-project=\"nrj\"\r\n        data-video=\"2hBCTcsWPJs\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=2hBCTcsWPJs\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-equipe\"\r\n        data-project=\"equipe\"\r\n        data-video=\"pgHKptNitQs\"\r\n        data-start=\"4\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=pgHKptNitQs&t=4s\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-dals\"\r\n        data-project=\"dals\"\r\n        data-video=\"vnH00xVUmqA\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=vnH00xVUmqA\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-jo\"\r\n        data-project=\"jo\"\r\n        data-video=\"tXQC_MNKlJk\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=tXQC_MNKlJk\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-citizenk\"\r\n        data-project=\"citizenk\"\r\n        data-citizen=\"true\"\r\n        data-link=\"https:\/\/saywhomedia.com\/fr\/evenements\/citizen-k-homme-sport-party\/\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-squeezie\"\r\n        data-project=\"squeezie\"\r\n        data-video=\"MzAvO_ZJaHg\"\r\n        data-start=\"1289\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=MzAvO_ZJaHg&t=21m29s\">\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ==================== COPIE 4 ==================== -->\r\n\r\n    <div class=\"cp-slide\">\r\n\r\n      <img decoding=\"async\"\r\n        src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Webdesign-31.jpg\"\r\n        class=\"cp-image\"\r\n        alt=\"\"\r\n      >\r\n\r\n      <div class=\"cp-zone cp-gaultier\"\r\n        data-project=\"gaultier\"\r\n        data-video=\"UMEPSP9-duQ\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=UMEPSP9-duQ\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-samsung\"\r\n        data-project=\"samsung\"\r\n        data-video=\"6js8ZWxm_YE\"\r\n        data-start=\"15\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=6js8ZWxm_YE&t=15s\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-nrj\"\r\n        data-project=\"nrj\"\r\n        data-video=\"2hBCTcsWPJs\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=2hBCTcsWPJs\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-equipe\"\r\n        data-project=\"equipe\"\r\n        data-video=\"pgHKptNitQs\"\r\n        data-start=\"4\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=pgHKptNitQs&t=4s\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-dals\"\r\n        data-project=\"dals\"\r\n        data-video=\"vnH00xVUmqA\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=vnH00xVUmqA\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-jo\"\r\n        data-project=\"jo\"\r\n        data-video=\"tXQC_MNKlJk\"\r\n        data-start=\"0\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=tXQC_MNKlJk\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-citizenk\"\r\n        data-project=\"citizenk\"\r\n        data-citizen=\"true\"\r\n        data-link=\"https:\/\/saywhomedia.com\/fr\/evenements\/citizen-k-homme-sport-party\/\">\r\n      <\/div>\r\n\r\n      <div class=\"cp-zone cp-squeezie\"\r\n        data-project=\"squeezie\"\r\n        data-video=\"MzAvO_ZJaHg\"\r\n        data-start=\"1289\"\r\n        data-link=\"https:\/\/www.youtube.com\/watch?v=MzAvO_ZJaHg&t=21m29s\">\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- =====================================================\r\n       APER\u00c7U\r\n  ====================================================== -->\r\n\r\n  <div class=\"cp-preview\">\r\n\r\n    <div class=\"cp-preview-box\">\r\n\r\n      <iframe\r\n        class=\"cp-video\"\r\n        src=\"\"\r\n        title=\"Aper\u00e7u du projet\"\r\n        allow=\"autoplay; encrypted-media; picture-in-picture\"\r\n        allowfullscreen>\r\n      <\/iframe>\r\n\r\n\r\n      <!-- COUCHE CLIQUABLE SUR TOUT L'APER\u00c7U -->\r\n\r\n      <a\r\n        class=\"cp-preview-click\"\r\n        href=\"#\"\r\n        target=\"_blank\"\r\n        rel=\"noopener noreferrer\"\r\n        aria-label=\"Voir le projet\">\r\n      <\/a>\r\n\r\n\r\n      <!-- CITIZEN K -->\r\n\r\n      <div class=\"cp-citizen-preview\">\r\n\r\n        <div class=\"cp-citizen-title\">\r\n          CITIZEN K\r\n        <\/div>\r\n\r\n        <div class=\"cp-citizen-subtitle\">\r\n          HOMME SPORT PARTY\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- BOUTON -->\r\n\r\n      <a\r\n        class=\"cp-project-link\"\r\n        href=\"#\"\r\n        target=\"_blank\"\r\n        rel=\"noopener noreferrer\">\r\n        VOIR LE PROJET \u2197\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n\/* ==========================================================\r\n   GLOBAL\r\n========================================================== *\/\r\n\r\nhtml,\r\nbody {\r\n  overflow-x: clip;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   CONTAINER\r\n========================================================== *\/\r\n\r\n.cp-projects {\r\n\r\n  position: relative;\r\n\r\n  width: 100vw;\r\n  max-width: 100vw;\r\n\r\n  margin-left: calc(50% - 50vw);\r\n  margin-right: calc(50% - 50vw);\r\n\r\n  background: #ed1015;\r\n\r\n  overflow: visible;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   MARQUEE\r\n========================================================== *\/\r\n\r\n.cp-track {\r\n\r\n  display: flex;\r\n\r\n  width: max-content;\r\n\r\n  gap: 0;\r\n\r\n  animation:\r\n    cp-marquee 32s linear infinite;\r\n\r\n  will-change: transform;\r\n\r\n}\r\n\r\n\r\n.cp-projects.is-hovered .cp-track {\r\n\r\n  animation-play-state: paused;\r\n\r\n}\r\n\r\n\r\n.cp-slide {\r\n\r\n  position: relative;\r\n\r\n  flex: 0 0 1398px;\r\n\r\n  width: 1398px;\r\n  height: 212px;\r\n\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n}\r\n\r\n\r\n.cp-image {\r\n\r\n  display: block;\r\n\r\n  width: 1398px;\r\n  height: 212px;\r\n\r\n  object-fit: cover;\r\n\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  user-select: none;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   ZONES\r\n========================================================== *\/\r\n\r\n.cp-zone {\r\n\r\n  position: absolute;\r\n\r\n  top: 0;\r\n\r\n  height: 100%;\r\n\r\n  z-index: 50;\r\n\r\n  cursor: pointer;\r\n\r\n}\r\n\r\n\r\n.cp-gaultier {\r\n  left: 0%;\r\n  width: 10%;\r\n}\r\n\r\n.cp-samsung {\r\n  left: 9%;\r\n  width: 14%;\r\n}\r\n\r\n.cp-nrj {\r\n  left: 22%;\r\n  width: 14%;\r\n}\r\n\r\n.cp-equipe {\r\n  left: 34%;\r\n  width: 15%;\r\n}\r\n\r\n.cp-dals {\r\n  left: 46%;\r\n  width: 15%;\r\n}\r\n\r\n.cp-jo {\r\n  left: 58%;\r\n  width: 15%;\r\n}\r\n\r\n.cp-citizenk {\r\n  left: 70%;\r\n  width: 16%;\r\n}\r\n\r\n.cp-squeezie {\r\n  left: 84%;\r\n  width: 16%;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   PREVIEW\r\n========================================================== *\/\r\n\r\n.cp-preview {\r\n\r\n  position: fixed;\r\n\r\n  left: 50%;\r\n\r\n  bottom: 212px;\r\n\r\n  width: min(560px, 82vw);\r\n\r\n  z-index: 999999;\r\n\r\n  opacity: 0;\r\n\r\n  visibility: hidden;\r\n\r\n  pointer-events: none;\r\n\r\n  transform:\r\n    translate3d(-50%, 22px, 0);\r\n\r\n  transition:\r\n    opacity .22s ease,\r\n    transform .22s ease,\r\n    visibility 0s linear .22s;\r\n\r\n  will-change:\r\n    opacity,\r\n    transform;\r\n\r\n  backface-visibility: hidden;\r\n\r\n  -webkit-backface-visibility: hidden;\r\n\r\n}\r\n\r\n\r\n.cp-preview.active {\r\n\r\n  opacity: 1;\r\n\r\n  visibility: visible;\r\n\r\n  pointer-events: auto;\r\n\r\n  transform:\r\n    translate3d(-50%, 0, 0);\r\n\r\n  transition:\r\n    opacity .22s ease,\r\n    transform .22s ease,\r\n    visibility 0s;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   PREVIEW BOX\r\n========================================================== *\/\r\n\r\n.cp-preview-box {\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  aspect-ratio: 16 \/ 9;\r\n\r\n  overflow: hidden;\r\n\r\n  background: #000;\r\n\r\n  border-radius: 3px;\r\n\r\n  box-shadow:\r\n    0 20px 65px rgba(0,0,0,.45);\r\n\r\n  isolation: isolate;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   VIDEO\r\n========================================================== *\/\r\n\r\n.cp-video {\r\n\r\n  position: absolute;\r\n\r\n  top: 0;\r\n  left: 0;\r\n\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  border: 0;\r\n\r\n  background: #000;\r\n\r\n  transform: translateZ(0);\r\n\r\n  backface-visibility: hidden;\r\n\r\n  -webkit-backface-visibility: hidden;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   ZONE CLIQUABLE SUR TOUT LE PREVIEW\r\n========================================================== *\/\r\n\r\n.cp-preview-click {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 150;\r\n\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  background: transparent;\r\n\r\n  cursor: pointer;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   BOUTON\r\n========================================================== *\/\r\n\r\n.cp-project-link {\r\n\r\n  position: absolute;\r\n\r\n  right: 14px;\r\n  bottom: 14px;\r\n\r\n  z-index: 200;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  padding: 10px 14px;\r\n\r\n  background:\r\n    rgba(0,0,0,.72);\r\n\r\n  color: #fff;\r\n\r\n  border:\r\n    1px solid rgba(255,255,255,.8);\r\n\r\n  text-decoration: none;\r\n\r\n  font-family: inherit;\r\n\r\n  font-size: 11px;\r\n\r\n  line-height: 1;\r\n\r\n  letter-spacing: .08em;\r\n\r\n  backdrop-filter: blur(6px);\r\n\r\n  -webkit-backdrop-filter: blur(6px);\r\n\r\n  transition:\r\n    background .2s ease,\r\n    color .2s ease;\r\n\r\n}\r\n\r\n\r\n.cp-project-link:hover {\r\n\r\n  background: #fff;\r\n\r\n  color: #000;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   CITIZEN K\r\n========================================================== *\/\r\n\r\n.cp-citizen-preview {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  display: none;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  flex-direction: column;\r\n\r\n  text-align: center;\r\n\r\n  color: #fff;\r\n\r\n  background:\r\n    linear-gradient(\r\n      rgba(0,0,0,.30),\r\n      rgba(0,0,0,.72)\r\n    );\r\n\r\n  z-index: 100;\r\n\r\n}\r\n\r\n\r\n.cp-citizen-preview.active {\r\n\r\n  display: flex;\r\n\r\n}\r\n\r\n\r\n.cp-citizen-title {\r\n\r\n  font-size: 38px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: .04em;\r\n\r\n}\r\n\r\n\r\n.cp-citizen-subtitle {\r\n\r\n  margin-top: 8px;\r\n\r\n  font-size: 14px;\r\n\r\n  letter-spacing: .12em;\r\n\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   MARQUEE\r\n========================================================== *\/\r\n\r\n@keyframes cp-marquee {\r\n\r\n  from {\r\n\r\n    transform:\r\n      translate3d(0,0,0);\r\n\r\n  }\r\n\r\n  to {\r\n\r\n    transform:\r\n      translate3d(-1398px,0,0);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   MOBILE\r\n========================================================== *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .cp-track {\r\n\r\n    animation:\r\n      cp-marquee-mobile 24s linear infinite;\r\n\r\n  }\r\n\r\n\r\n  .cp-slide {\r\n\r\n    width: 100vw;\r\n\r\n    flex-basis: 100vw;\r\n\r\n    height: auto;\r\n\r\n  }\r\n\r\n\r\n  .cp-image {\r\n\r\n    width: 100vw;\r\n\r\n    height: auto;\r\n\r\n  }\r\n\r\n\r\n  .cp-preview {\r\n\r\n    display: none !important;\r\n\r\n  }\r\n\r\n\r\n  @keyframes cp-marquee-mobile {\r\n\r\n    from {\r\n\r\n      transform:\r\n        translate3d(0,0,0);\r\n\r\n    }\r\n\r\n    to {\r\n\r\n      transform:\r\n        translate3d(-100vw,0,0);\r\n\r\n    }\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n\r\n  function initCineprodProjects() {\r\n\r\n\r\n    const container =\r\n      document.querySelector('.cp-projects');\r\n\r\n\r\n    if (!container) {\r\n      return;\r\n    }\r\n\r\n\r\n    \/*\r\n     * Emp\u00eache Elementor de lancer\r\n     * le script plusieurs fois.\r\n     *\/\r\n\r\n    if (\r\n      container.dataset.initialized === 'true'\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    container.dataset.initialized =\r\n      'true';\r\n\r\n\r\n    const zones =\r\n      container.querySelectorAll('.cp-zone');\r\n\r\n\r\n    const preview =\r\n      container.querySelector('.cp-preview');\r\n\r\n\r\n    const iframe =\r\n      container.querySelector('.cp-video');\r\n\r\n\r\n    const projectLink =\r\n      container.querySelector('.cp-project-link');\r\n\r\n\r\n    const previewClick =\r\n      container.querySelector('.cp-preview-click');\r\n\r\n\r\n    const citizenPreview =\r\n      container.querySelector('.cp-citizen-preview');\r\n\r\n\r\n    let activeProject = null;\r\n\r\n    let closeTimer = null;\r\n\r\n    let loadTimer = null;\r\n\r\n\r\n    \/* ======================================================\r\n       PAUSE MARQUEE\r\n    ====================================================== *\/\r\n\r\n    function pauseMarquee() {\r\n\r\n      container.classList.add(\r\n        'is-hovered'\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* ======================================================\r\n       RESUME MARQUEE\r\n    ====================================================== *\/\r\n\r\n    function resumeMarquee() {\r\n\r\n      container.classList.remove(\r\n        'is-hovered'\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* ======================================================\r\n       URL YOUTUBE\r\n    ====================================================== *\/\r\n\r\n    function getYoutubeURL(\r\n      videoID,\r\n      start\r\n    ) {\r\n\r\n      return (\r\n\r\n        'https:\/\/www.youtube.com\/embed\/' +\r\n\r\n        videoID +\r\n\r\n        '?autoplay=1' +\r\n\r\n        '&controls=1' +\r\n\r\n        '&loop=1' +\r\n\r\n        '&playlist=' +\r\n        videoID +\r\n\r\n        '&start=' +\r\n        start +\r\n\r\n        '&playsinline=1' +\r\n\r\n        '&rel=0'\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* ======================================================\r\n       OUVRIR VIDEO\r\n    ====================================================== *\/\r\n\r\n    function openVideo(zone) {\r\n\r\n\r\n      clearTimeout(closeTimer);\r\n\r\n      clearTimeout(loadTimer);\r\n\r\n\r\n      const project =\r\n        zone.dataset.project;\r\n\r\n\r\n      const videoID =\r\n        zone.dataset.video;\r\n\r\n\r\n      const start =\r\n        zone.dataset.start || '0';\r\n\r\n\r\n      const link =\r\n        zone.dataset.link;\r\n\r\n\r\n      if (!videoID) {\r\n        return;\r\n      }\r\n\r\n\r\n      \/*\r\n       * Pause du marquee.\r\n       *\/\r\n\r\n      pauseMarquee();\r\n\r\n\r\n      \/*\r\n       * Lien de tout l'aper\u00e7u.\r\n       *\/\r\n\r\n      previewClick.href =\r\n        link || '#';\r\n\r\n\r\n      \/*\r\n       * Lien du bouton.\r\n       *\/\r\n\r\n      projectLink.href =\r\n        link || '#';\r\n\r\n\r\n      projectLink.textContent =\r\n        'VOIR LA VID\u00c9O \u2197';\r\n\r\n\r\n      \/*\r\n       * M\u00eame projet :\r\n       * on ne recharge pas l'iframe.\r\n       *\/\r\n\r\n      if (\r\n        activeProject === project\r\n      ) {\r\n\r\n        preview.classList.add(\r\n          'active'\r\n        );\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      activeProject =\r\n        project;\r\n\r\n\r\n      \/*\r\n       * Cache Citizen K.\r\n       *\/\r\n\r\n      citizenPreview.classList.remove(\r\n        'active'\r\n      );\r\n\r\n\r\n      \/*\r\n       * Cache temporairement\r\n       * l'ancien aper\u00e7u.\r\n       *\/\r\n\r\n      preview.classList.remove(\r\n        'active'\r\n      );\r\n\r\n\r\n      \/*\r\n       * Petit d\u00e9lai pour \u00e9viter\r\n       * les changements trop rapides.\r\n       *\/\r\n\r\n      loadTimer =\r\n        setTimeout(function () {\r\n\r\n\r\n          if (\r\n            activeProject !== project\r\n          ) {\r\n\r\n            return;\r\n\r\n          }\r\n\r\n\r\n          \/*\r\n           * IMPORTANT :\r\n           *\r\n           * Il n'y a PAS de mute=1.\r\n           *\r\n           * La vid\u00e9o est donc demand\u00e9e\r\n           * avec son.\r\n           *\r\n           * Le d\u00e9marrage d\u00e9pend de\r\n           * data-start.\r\n           *\/\r\n\r\n          const youtubeURL =\r\n            getYoutubeURL(\r\n              videoID,\r\n              start\r\n            );\r\n\r\n\r\n          \/*\r\n           * Charge la vid\u00e9o uniquement\r\n           * au hover.\r\n           *\/\r\n\r\n          iframe.src =\r\n            youtubeURL;\r\n\r\n\r\n          \/*\r\n           * Affiche le preview.\r\n           *\/\r\n\r\n          preview.classList.add(\r\n            'active'\r\n          );\r\n\r\n\r\n        }, 40);\r\n\r\n    }\r\n\r\n\r\n    \/* ======================================================\r\n       CITIZEN K\r\n    ====================================================== *\/\r\n\r\n    function openCitizen(zone) {\r\n\r\n\r\n      clearTimeout(closeTimer);\r\n\r\n      clearTimeout(loadTimer);\r\n\r\n\r\n      const project =\r\n        zone.dataset.project;\r\n\r\n\r\n      pauseMarquee();\r\n\r\n\r\n      previewClick.href =\r\n        zone.dataset.link;\r\n\r\n\r\n      projectLink.href =\r\n        zone.dataset.link;\r\n\r\n\r\n      projectLink.textContent =\r\n        'VOIR LE PROJET \u2197';\r\n\r\n\r\n      if (\r\n        activeProject === project\r\n      ) {\r\n\r\n        preview.classList.add(\r\n          'active'\r\n        );\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      activeProject =\r\n        project;\r\n\r\n\r\n      \/*\r\n       * Citizen K n'utilise pas de vid\u00e9o.\r\n       *\/\r\n\r\n      iframe.src = '';\r\n\r\n\r\n      citizenPreview.classList.add(\r\n        'active'\r\n      );\r\n\r\n\r\n      preview.classList.add(\r\n        'active'\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* ======================================================\r\n       HOVER DES ZONES\r\n    ====================================================== *\/\r\n\r\n    zones.forEach(function (zone) {\r\n\r\n\r\n      zone.addEventListener(\r\n        'mouseenter',\r\n        function () {\r\n\r\n\r\n          if (\r\n            window.innerWidth <= 767\r\n          ) {\r\n\r\n            return;\r\n\r\n          }\r\n\r\n\r\n          clearTimeout(closeTimer);\r\n\r\n\r\n          \/*\r\n           * Projet vid\u00e9o.\r\n           *\/\r\n\r\n          if (\r\n            zone.dataset.citizen !== 'true'\r\n          ) {\r\n\r\n            openVideo(zone);\r\n\r\n          }\r\n\r\n\r\n          \/*\r\n           * Citizen K.\r\n           *\/\r\n\r\n          else {\r\n\r\n            openCitizen(zone);\r\n\r\n          }\r\n\r\n        }\r\n      );\r\n\r\n\r\n      zone.addEventListener(\r\n        'mouseleave',\r\n        function () {\r\n\r\n\r\n          if (\r\n            window.innerWidth <= 767\r\n          ) {\r\n\r\n            return;\r\n\r\n          }\r\n\r\n\r\n          closePreview();\r\n\r\n        }\r\n      );\r\n\r\n\r\n    });\r\n\r\n\r\n    \/* ======================================================\r\n       SOURIS SUR LE PREVIEW\r\n    ====================================================== *\/\r\n\r\n    preview.addEventListener(\r\n      'mouseenter',\r\n      function () {\r\n\r\n        clearTimeout(closeTimer);\r\n\r\n        pauseMarquee();\r\n\r\n      }\r\n    );\r\n\r\n\r\n    preview.addEventListener(\r\n      'mouseleave',\r\n      function () {\r\n\r\n        closePreview();\r\n\r\n      }\r\n    );\r\n\r\n\r\n    \/* ======================================================\r\n       FERMETURE\r\n    ====================================================== *\/\r\n\r\n    function closePreview() {\r\n\r\n\r\n      clearTimeout(closeTimer);\r\n\r\n      clearTimeout(loadTimer);\r\n\r\n\r\n      closeTimer =\r\n        setTimeout(function () {\r\n\r\n\r\n          \/*\r\n           * Si la souris est encore\r\n           * dans le composant,\r\n           * on ne ferme pas.\r\n           *\/\r\n\r\n          if (\r\n            container.matches(':hover')\r\n          ) {\r\n\r\n            return;\r\n\r\n          }\r\n\r\n\r\n          activeProject = null;\r\n\r\n\r\n          \/*\r\n           * Cache le preview.\r\n           *\/\r\n\r\n          preview.classList.remove(\r\n            'active'\r\n          );\r\n\r\n\r\n          \/*\r\n           * Cache Citizen K.\r\n           *\/\r\n\r\n          citizenPreview.classList.remove(\r\n            'active'\r\n          );\r\n\r\n\r\n          \/*\r\n           * \u2b50 ARR\u00caT TOTAL DE LA VID\u00c9O\r\n           *\/\r\n\r\n          iframe.src = '';\r\n\r\n\r\n          \/*\r\n           * Reprise du marquee.\r\n           *\/\r\n\r\n          resumeMarquee();\r\n\r\n\r\n        }, 180);\r\n\r\n    }\r\n\r\n\r\n  }\r\n\r\n\r\n  \/* ========================================================\r\n     DOM READY\r\n  ======================================================== *\/\r\n\r\n  if (\r\n    document.readyState === 'loading'\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      'DOMContentLoaded',\r\n      initCineprodProjects\r\n    );\r\n\r\n  } else {\r\n\r\n    initCineprodProjects();\r\n\r\n  }\r\n\r\n\r\n  \/* ========================================================\r\n     ELEMENTOR\r\n  ======================================================== *\/\r\n\r\n  if (window.jQuery) {\r\n\r\n    jQuery(window).on(\r\n      'elementor\/frontend\/init',\r\n      function () {\r\n\r\n        setTimeout(\r\n          initCineprodProjects,\r\n          300\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n})();\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-dd9091e e-con e-atomic-element e-flexbox-base e-9b086fb \" data-id=\"dd9091e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dd9091e\">\n    \t\t<div class=\"elementor-element elementor-element-9a8c00c elementor-widget elementor-widget-html\" data-id=\"9a8c00c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"cineprod-banner\">\r\n<img\r\nsrc=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Webdesign-29.jpg\"\r\nalt=\"\"\r\n\r\n<!-- ================================================== RING DE BOXE ================================================== -->\r\n<div class=\"ring-area ring-boxe-area\">\r\n<div class=\"ring-hover\"><\/div>\r\n\r\n<div class=\"ring-preview\">\r\n  <div class=\"ring-preview-image\">\r\n    <img decoding=\"async\" class=\"ring-preview-img\" src=\"\" alt=\"\">\r\n\r\n    <button class=\"ring-arrow ring-prev\" type=\"button\">\u2039<\/button>\r\n    <button class=\"ring-arrow ring-next\" type=\"button\">\u203a<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-info\">\r\n    <span>RINGS DE BOXE<\/span>\r\n    <span class=\"ring-number\">1 \/ 15<\/span>\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-cta\">\r\n    CLIQUER POUR VOIR LA GALERIE \u2192\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<!-- ================================================== CAGE MMA ================================================== -->\r\n<div class=\"ring-area ring-mma-area\">\r\n<div class=\"ring-hover\"><\/div>\r\n\r\n<div class=\"ring-preview\">\r\n  <div class=\"ring-preview-image\">\r\n    <img decoding=\"async\" class=\"ring-preview-img\" src=\"\" alt=\"\">\r\n\r\n    <button class=\"ring-arrow ring-prev\" type=\"button\">\u2039<\/button>\r\n    <button class=\"ring-arrow ring-next\" type=\"button\">\u203a<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-info\">\r\n    <span>CAGE MMA<\/span>\r\n    <span class=\"ring-number\">1 \/ 8<\/span>\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-cta\">\r\n    CLIQUER POUR VOIR LA GALERIE \u2192\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<!-- ================================================== INSTALLATION ================================================== -->\r\n<div class=\"ring-area ring-installation-area\">\r\n<div class=\"ring-hover\"><\/div>\r\n\r\n<div class=\"ring-preview installation-preview\">\r\n\r\n  <div class=\"production-preview-video\">\r\n    <iframe\r\n      class=\"installation-preview-iframe\"\r\n      src=\"\"\r\n      frameborder=\"0\"\r\n      allow=\"autoplay; encrypted-media; picture-in-picture\"\r\n      allowfullscreen\r\n      title=\"Installation clef en main\"\r\n    ><\/iframe>\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-info\">\r\n    <span>INSTALLATION CLEF EN MAIN<\/span>\r\n    <span class=\"ring-number\">1 \/ 1<\/span>\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-cta\">\r\n    CLIQUER SUR L'IC\u00d4NE POUR VOIR LA VID\u00c9O \u2192\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<!-- ================================================== PRODUCTION AUDIOVISUELLE ================================================== -->\r\n<div class=\"ring-area ring-production-area\">\r\n<div class=\"ring-hover\"><\/div>\r\n\r\n<div class=\"ring-preview production-preview\">\r\n\r\n  <div class=\"production-preview-video\">\r\n\r\n    <iframe\r\n      class=\"production-preview-iframe\"\r\n      src=\"\"\r\n      frameborder=\"0\"\r\n      allow=\"autoplay; encrypted-media; picture-in-picture\"\r\n      allowfullscreen\r\n      title=\"Production audiovisuelle\"\r\n    ><\/iframe>\r\n\r\n    <button class=\"ring-arrow ring-prev\" type=\"button\">\u2039<\/button>\r\n    <button class=\"ring-arrow ring-next\" type=\"button\">\u203a<\/button>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-info\">\r\n    <span>PRODUCTION AUDIOVISUELLE<\/span>\r\n    <span class=\"ring-number\">1 \/ 12<\/span>\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-cta\">\r\n    CLIQUER SUR L'IC\u00d4NE POUR VOIR LES VID\u00c9OS \u2192\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<!-- ================================================== ARTISTE & STAFF ================================================== -->\r\n<div class=\"ring-area ring-staff-area\">\r\n<div class=\"ring-hover\"><\/div>\r\n\r\n<div class=\"ring-preview\">\r\n\r\n  <div class=\"ring-preview-image\">\r\n\r\n    <img decoding=\"async\"\r\n      class=\"ring-preview-img\"\r\n      src=\"\"\r\n      alt=\"\"\r\n    >\r\n\r\n    <button class=\"ring-arrow ring-prev\" type=\"button\">\u2039<\/button>\r\n    <button class=\"ring-arrow ring-next\" type=\"button\">\u203a<\/button>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-info\">\r\n    <span>ARTISTE &amp; STAFF<\/span>\r\n    <span class=\"ring-number\">1 \/ 20<\/span>\r\n  <\/div>\r\n\r\n  <div class=\"ring-preview-cta\">\r\n    CLIQUER SUR L'IC\u00d4NE POUR VOIR LA GALERIE \u2192\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ================================================== LIGHTBOX RING BOXE ================================================== -->\r\n<div class=\"ring-lightbox ring-boxe-lightbox\">\r\n<div class=\"ring-lightbox-bg\"><\/div>\r\n\r\n<button class=\"ring-close\" type=\"button\">\u00d7<\/button>\r\n\r\n<button\r\nclass=\"ring-big-arrow ring-big-prev\"\r\ntype=\"button\"\r\n>\u2039<\/button>\r\n\r\n<img\r\nclass=\"ring-lightbox-img\"\r\nsrc=\"\"\r\nalt=\"\"\r\n>\r\n\r\n<button\r\nclass=\"ring-big-arrow ring-big-next\"\r\ntype=\"button\"\r\n>\u203a<\/button>\r\n\r\n<div class=\"ring-lightbox-counter\">1 \/ 15<\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ================================================== LIGHTBOX MMA ================================================== -->\r\n<div class=\"ring-lightbox ring-mma-lightbox\">\r\n<div class=\"ring-lightbox-bg\"><\/div>\r\n\r\n<button class=\"ring-close\" type=\"button\">\u00d7<\/button>\r\n\r\n<button\r\nclass=\"ring-big-arrow ring-big-prev\"\r\ntype=\"button\"\r\n>\u2039<\/button>\r\n\r\n<img\r\nclass=\"ring-lightbox-img\"\r\nsrc=\"\"\r\nalt=\"\"\r\n>\r\n\r\n<button\r\nclass=\"ring-big-arrow ring-big-next\"\r\ntype=\"button\"\r\n>\u203a<\/button>\r\n\r\n<div class=\"ring-lightbox-counter\">1 \/ 8<\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ================================================== LIGHTBOX INSTALLATION ================================================== -->\r\n<div class=\"ring-lightbox ring-installation-lightbox\">\r\n<div class=\"ring-lightbox-bg\"><\/div>\r\n\r\n<button class=\"ring-close\" type=\"button\">\u00d7<\/button>\r\n\r\n<div class=\"production-lightbox-video\">\r\n\r\n<iframe\r\n  class=\"production-lightbox-iframe installation-lightbox-iframe\"\r\n  src=\"\"\r\n  frameborder=\"0\"\r\n  allow=\"autoplay; encrypted-media; picture-in-picture\"\r\n  allowfullscreen\r\n  title=\"Installation clef en main\"\r\n><\/iframe>\r\n\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ================================================== LIGHTBOX PRODUCTION ================================================== -->\r\n<div class=\"ring-lightbox ring-production-lightbox\">\r\n<div class=\"ring-lightbox-bg\"><\/div>\r\n\r\n<button class=\"ring-close\" type=\"button\">\u00d7<\/button>\r\n\r\n<button\r\nclass=\"ring-big-arrow ring-big-prev\"\r\ntype=\"button\"\r\n>\u2039<\/button>\r\n\r\n<div class=\"production-lightbox-video\">\r\n\r\n<iframe\r\n  class=\"production-lightbox-iframe\"\r\n  src=\"\"\r\n  frameborder=\"0\"\r\n  allow=\"autoplay; encrypted-media; picture-in-picture\"\r\n  allowfullscreen\r\n  title=\"Production audiovisuelle\"\r\n><\/iframe>\r\n\r\n<\/div>\r\n\r\n<button\r\nclass=\"ring-big-arrow ring-big-next\"\r\ntype=\"button\"\r\n>\u203a<\/button>\r\n\r\n<div class=\"ring-lightbox-counter\">1 \/ 12<\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ================================================== LIGHTBOX STAFF ================================================== -->\r\n<div class=\"ring-lightbox ring-staff-lightbox\">\r\n<div class=\"ring-lightbox-bg\"><\/div>\r\n\r\n<button class=\"ring-close\" type=\"button\">\u00d7<\/button>\r\n\r\n<button\r\nclass=\"ring-big-arrow ring-big-prev\"\r\ntype=\"button\"\r\n>\u2039<\/button>\r\n\r\n<img\r\nclass=\"ring-lightbox-img\"\r\nsrc=\"\"\r\nalt=\"\"\r\n>\r\n\r\n<button\r\nclass=\"ring-big-arrow ring-big-next\"\r\ntype=\"button\"\r\n>\u203a<\/button>\r\n\r\n<div class=\"ring-lightbox-counter\">1 \/ 20<\/div>\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\nBANNI\u00c8RE\r\n===================================================== *\/\r\n\r\n.cineprod-banner {\r\n\r\nwidth: 100vw;\r\nmargin-left: calc(50% - 50vw);\r\n\r\nbackground: #0D64B1;\r\n\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\n\r\noverflow: visible;\r\n\r\nline-height: 0;\r\n\r\npadding: 0;\r\n\r\nposition: relative;\r\n}\r\n\r\n.cineprod-banner > img {\r\n\r\ndisplay: block;\r\n\r\nwidth: 1000px;\r\nmax-width: 90vw;\r\n\r\nheight: auto;\r\n\r\nmargin: 0;\r\npadding: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nTEXTE EN BAS \u2014 PC\r\n===================================================== *\/\r\n\r\n.cineprod-banner::after {\r\n\r\ncontent: \"D\u00c9COUVREZ NOTRE SAVOIR-FAIRE, CLIQUEZ SUR LES IC\u00d4NES POUR VOIR NOS R\u00c9ALISATIONS\";\r\n\r\nposition: absolute;\r\n\r\nleft: 50%;\r\n\r\nbottom: 14px;\r\n\r\ntransform: translateX(-50%);\r\n\r\nwidth: 100%;\r\n\r\ntext-align: center;\r\n\r\ncolor: white;\r\n\r\nfont-family: Arial, sans-serif;\r\n\r\nfont-size: 10px;\r\n\r\nfont-weight: 400;\r\n\r\nletter-spacing: .5px;\r\n\r\nline-height: normal;\r\n\r\nwhite-space: nowrap;\r\n\r\nz-index: 20000;\r\n\r\npointer-events: none;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nZONES DESKTOP\r\n===================================================== *\/\r\n\r\n.ring-area {\r\n\r\nposition: absolute;\r\n\r\nbottom: 0;\r\n\r\nwidth: 300px;\r\nheight: 180px;\r\n\r\nz-index: 1000;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nPOSITIONS DESKTOP\r\n===================================================== *\/\r\n\r\n.ring-boxe-area {\r\nleft: calc(50% - 500px);\r\n}\r\n\r\n.ring-mma-area {\r\nleft: calc(50% - 200px);\r\n}\r\n\r\n.ring-installation-area {\r\nleft: calc(50% + 20px);\r\n\r\nheight: 230px;\r\n\r\nz-index: 10000;\r\n}\r\n\r\n.ring-production-area {\r\nleft: calc(50% + 100px);\r\n\r\nheight: 230px;\r\n\r\nz-index: 10000;\r\n}\r\n\r\n.ring-staff-area {\r\nleft: calc(50% + 350px);\r\n\r\nheight: 230px;\r\n\r\nz-index: 10000;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nZONE CLIQUABLE\r\n===================================================== *\/\r\n\r\n.ring-hover {\r\n\r\nposition: absolute;\r\n\r\nleft: 0;\r\nbottom: 0;\r\n\r\nwidth: 100%;\r\nheight: 100%;\r\n\r\ncursor: pointer;\r\n}\r\n\r\n.ring-installation-area .ring-hover,\r\n.ring-production-area .ring-hover,\r\n.ring-staff-area .ring-hover {\r\n\r\nheight: 230px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nPREVIEW\r\n===================================================== *\/\r\n\r\n.ring-preview {\r\n\r\nposition: absolute;\r\n\r\nleft: 0;\r\n\r\ntop: calc(100% + 10px);\r\n\r\nwidth: 320px;\r\n\r\nbackground: #0A0A0A;\r\n\r\nborder: 1px solid rgba(255,255,255,.18);\r\n\r\nborder-radius: 3px;\r\n\r\noverflow: hidden;\r\n\r\nline-height: normal;\r\n\r\nopacity: 0;\r\n\r\nvisibility: hidden;\r\n\r\npointer-events: none;\r\n\r\nz-index: 9999;\r\n\r\nbox-shadow: 0 20px 50px rgba(0,0,0,.55);\r\n}\r\n\r\n.ring-preview::before {\r\n\r\ncontent: \"\";\r\n\r\nposition: absolute;\r\n\r\ntop: -30px;\r\nleft: 0;\r\n\r\nwidth: 100%;\r\nheight: 30px;\r\n}\r\n\r\n.ring-installation-area .ring-preview::before,\r\n.ring-production-area .ring-preview::before,\r\n.ring-staff-area .ring-preview::before {\r\n\r\ntop: -60px;\r\n\r\nheight: 60px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nHOVER DESKTOP\r\n===================================================== *\/\r\n\r\n.ring-area:hover .ring-preview {\r\n\r\nopacity: 1;\r\n\r\nvisibility: visible;\r\n\r\npointer-events: auto;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nIMAGE PREVIEW\r\n===================================================== *\/\r\n\r\n.ring-preview-image {\r\n\r\nposition: relative;\r\n\r\nwidth: 320px;\r\nheight: 190px;\r\n\r\noverflow: hidden;\r\n\r\nbackground: #0A0A0A;\r\n}\r\n\r\n.ring-preview-img {\r\n\r\ndisplay: block;\r\n\r\nwidth: 100%;\r\nheight: 100%;\r\n\r\nobject-fit: cover;\r\n\r\nmargin: 0;\r\npadding: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nVID\u00c9O PREVIEW\r\n===================================================== *\/\r\n\r\n.production-preview-video {\r\n\r\nposition: relative;\r\n\r\nwidth: 320px;\r\nheight: 190px;\r\n\r\noverflow: hidden;\r\n\r\nbackground: #0A0A0A;\r\n}\r\n\r\n.production-preview-iframe,\r\n.installation-preview-iframe {\r\n\r\ndisplay: block;\r\n\r\nwidth: 100%;\r\nheight: 100%;\r\n\r\nborder: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nFL\u00c8CHES PREVIEW\r\n===================================================== *\/\r\n\r\n.ring-arrow {\r\n\r\nposition: absolute;\r\n\r\ntop: 50%;\r\n\r\ntransform: translateY(-50%);\r\n\r\nwidth: 36px;\r\nheight: 36px;\r\n\r\npadding: 0;\r\n\r\nborder: 1px solid rgba(255,255,255,.3);\r\n\r\nborder-radius: 50%;\r\n\r\nbackground: rgba(10,10,10,.9);\r\n\r\ncolor: white;\r\n\r\nfont-size: 28px;\r\n\r\nline-height: 1;\r\n\r\ncursor: pointer;\r\n\r\ndisplay: flex;\r\n\r\nalign-items: center;\r\njustify-content: center;\r\n\r\nz-index: 20;\r\n}\r\n\r\n.ring-arrow:hover {\r\n\r\nbackground: #0D64B1;\r\n}\r\n\r\n.ring-prev {\r\nleft: 10px;\r\n}\r\n\r\n.ring-next {\r\nright: 10px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nINFOS\r\n===================================================== *\/\r\n\r\n.ring-preview-info {\r\n\r\ndisplay: flex;\r\n\r\njustify-content: space-between;\r\nalign-items: center;\r\n\r\npadding: 13px 15px 5px;\r\n\r\ncolor: white;\r\n\r\nfont-family: Arial, sans-serif;\r\n\r\nfont-size: 12px;\r\n\r\nfont-weight: 700;\r\n\r\nletter-spacing: .7px;\r\n\r\nline-height: normal;\r\n}\r\n\r\n.ring-number {\r\n\r\ncolor: rgba(255,255,255,.45);\r\n\r\nfont-weight: 400;\r\n}\r\n\r\n.ring-preview-cta {\r\n\r\npadding: 5px 15px 14px;\r\n\r\ncolor: rgba(255,255,255,.5);\r\n\r\nfont-family: Arial, sans-serif;\r\n\r\nfont-size: 10px;\r\n\r\nfont-weight: 600;\r\n\r\nletter-spacing: 1px;\r\n\r\nline-height: normal;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nLIGHTBOX\r\n===================================================== *\/\r\n\r\n.ring-lightbox {\r\n\r\nposition: fixed;\r\n\r\ninset: 0;\r\n\r\nz-index: 999999;\r\n\r\ndisplay: none;\r\n\r\nalign-items: center;\r\njustify-content: center;\r\n}\r\n\r\n.ring-lightbox.open {\r\n\r\ndisplay: flex;\r\n}\r\n\r\n.ring-lightbox-bg {\r\n\r\nposition: absolute;\r\n\r\ninset: 0;\r\n\r\nbackground: rgba(10,10,10,.96);\r\n}\r\n\r\n\r\n\/* =====================================================\r\nGRANDE IMAGE\r\n===================================================== *\/\r\n\r\n.ring-lightbox-img {\r\n\r\nposition: relative;\r\n\r\nz-index: 5;\r\n\r\ndisplay: block;\r\n\r\nmax-width: 85vw;\r\nmax-height: 82vh;\r\n\r\nwidth: auto;\r\nheight: auto;\r\n\r\nobject-fit: contain;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nGRANDE VID\u00c9O\r\n===================================================== *\/\r\n\r\n.production-lightbox-video {\r\n\r\nposition: relative;\r\n\r\nz-index: 5;\r\n\r\nwidth: 80vw;\r\n\r\nmax-width: 1100px;\r\n\r\naspect-ratio: 16 \/ 9;\r\n\r\nbackground: #000;\r\n}\r\n\r\n.production-lightbox-iframe {\r\n\r\ndisplay: block;\r\n\r\nwidth: 100%;\r\nheight: 100%;\r\n\r\nborder: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nFERMETURE\r\n===================================================== *\/\r\n\r\n.ring-close {\r\n\r\nposition: absolute;\r\n\r\ntop: 25px;\r\nright: 30px;\r\n\r\nz-index: 20;\r\n\r\nwidth: 45px;\r\nheight: 45px;\r\n\r\nborder: 1px solid rgba(255,255,255,.25);\r\n\r\nborder-radius: 50%;\r\n\r\nbackground: #0A0A0A;\r\n\r\ncolor: white;\r\n\r\nfont-size: 30px;\r\n\r\nline-height: 1;\r\n\r\ncursor: pointer;\r\n}\r\n\r\n.ring-close:hover {\r\n\r\nbackground: white;\r\n\r\ncolor: #0A0A0A;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nGRANDES FL\u00c8CHES\r\n===================================================== *\/\r\n\r\n.ring-big-arrow {\r\n\r\nposition: absolute;\r\n\r\ntop: 50%;\r\n\r\ntransform: translateY(-50%);\r\n\r\nz-index: 20;\r\n\r\nwidth: 55px;\r\nheight: 55px;\r\n\r\npadding: 0;\r\n\r\nborder: 1px solid rgba(255,255,255,.25);\r\n\r\nborder-radius: 50%;\r\n\r\nbackground: #0A0A0A;\r\n\r\ncolor: white;\r\n\r\nfont-size: 42px;\r\n\r\nline-height: 1;\r\n\r\ncursor: pointer;\r\n\r\ndisplay: flex;\r\n\r\nalign-items: center;\r\njustify-content: center;\r\n}\r\n\r\n.ring-big-arrow:hover {\r\n\r\nbackground: white;\r\n\r\ncolor: #0A0A0A;\r\n}\r\n\r\n.ring-big-prev {\r\nleft: 25px;\r\n}\r\n\r\n.ring-big-next {\r\nright: 25px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nCOMPTEUR LIGHTBOX\r\n===================================================== *\/\r\n\r\n.ring-lightbox-counter {\r\n\r\nposition: absolute;\r\n\r\nbottom: 25px;\r\nleft: 50%;\r\n\r\ntransform: translateX(-50%);\r\n\r\nz-index: 20;\r\n\r\ncolor: rgba(255,255,255,.6);\r\n\r\nfont-family: Arial, sans-serif;\r\n\r\nfont-size: 12px;\r\n\r\nletter-spacing: 1px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\nMOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n.cineprod-banner {\r\n\r\nwidth: 100vw;\r\n\r\nmargin-left: calc(50% - 50vw);\r\n\r\ndisplay: block;\r\n\r\nposition: relative;\r\n\r\noverflow: visible !important;\r\n\r\nbackground: #0D64B1;\r\n\r\npadding: 0 !important;\r\n\r\n}\r\n\r\n\r\n\/* IMAGE MOBILE *\/\r\n\r\n.cineprod-banner > img {\r\n\r\ndisplay: block;\r\n\r\nwidth: 100%;\r\n\r\nmax-width: none;\r\n\r\nheight: auto;\r\n\r\nmargin: 0;\r\n\r\n}\r\n\r\n\r\n\/* ===================================================\r\nTEXTE EN BAS\r\n=================================================== *\/\r\n\r\n.cineprod-banner::after {\r\n\r\nbottom: 8px;\r\n\r\nfont-size: 6px;\r\n\r\nletter-spacing: .4px;\r\n\r\n}\r\n\r\n\r\n\/* ===================================================\r\nZONES MOBILE\r\n=================================================== *\/\r\n\r\n.ring-area {\r\n\r\nposition: absolute;\r\n\r\nbottom: 0;\r\n\r\nleft: auto !important;\r\n\r\ntop: auto !important;\r\n\r\nwidth: 20%;\r\n\r\nheight: 70px;\r\n\r\nmin-width: 0;\r\n\r\nmargin: 0;\r\n\r\npadding: 0;\r\n\r\nz-index: 1000;\r\n}\r\n\r\n\r\n\/* ===================================================\r\n5 ZONES \u00c9GALES\r\n=================================================== *\/\r\n\r\n.ring-boxe-area {\r\n\r\nleft: 0 !important;\r\n\r\n}\r\n\r\n.ring-mma-area {\r\n\r\nleft: 20% !important;\r\n\r\n}\r\n\r\n.ring-installation-area {\r\n\r\nleft: 40% !important;\r\n\r\nheight: 70px;\r\n\r\nz-index: 10000;\r\n\r\n}\r\n\r\n.ring-production-area {\r\n\r\nleft: 60% !important;\r\n\r\nheight: 70px;\r\n\r\nz-index: 10000;\r\n\r\n}\r\n\r\n.ring-staff-area {\r\n\r\nleft: 80% !important;\r\n\r\nheight: 70px;\r\n\r\nz-index: 10000;\r\n\r\n}\r\n\r\n\r\n\/* ===================================================\r\nZONE CLIQUABLE\r\n=================================================== *\/\r\n\r\n.ring-hover {\r\n\r\nposition: absolute;\r\n\r\ninset: 0;\r\n\r\nwidth: 100%;\r\n\r\nheight: 100% !important;\r\n\r\ncursor: pointer;\r\n\r\ntouch-action: manipulation;\r\n\r\n}\r\n\r\n\r\n\/* ===================================================\r\nPAS DE PREVIEW AU MOBILE\r\n=================================================== *\/\r\n\r\n.ring-preview {\r\n\r\ndisplay: none !important;\r\n\r\n}\r\n\r\n\r\n\/* ===================================================\r\nLIGHTBOX IMAGE\r\n=================================================== *\/\r\n\r\n.ring-lightbox-img {\r\n\r\nmax-width: 90vw;\r\n\r\nmax-height: 78vh;\r\n\r\nwidth: auto;\r\n\r\nheight: auto;\r\n\r\n}\r\n\r\n\r\n\/* ===================================================\r\nLIGHTBOX VID\u00c9O\r\n=================================================== *\/\r\n\r\n.production-lightbox-video {\r\n\r\nwidth: 94vw;\r\n\r\nmax-width: none;\r\n\r\naspect-ratio: 16 \/ 9;\r\n\r\n}\r\n\r\n\r\n\/* ===================================================\r\nBOUTON FERMER\r\n=================================================== *\/\r\n\r\n.ring-close {\r\n\r\ntop: 12px;\r\n\r\nright: 12px;\r\n\r\nwidth: 42px;\r\n\r\nheight: 42px;\r\n\r\nfont-size: 28px;\r\n\r\n}\r\n\r\n\r\n\/* ===================================================\r\nGRANDES FL\u00c8CHES\r\n=================================================== *\/\r\n\r\n.ring-big-arrow {\r\n\r\nwidth: 44px;\r\n\r\nheight: 44px;\r\n\r\nfont-size: 34px;\r\n\r\n}\r\n\r\n.ring-big-prev {\r\n\r\nleft: 7px;\r\n\r\n}\r\n\r\n.ring-big-next {\r\n\r\nright: 7px;\r\n\r\n}\r\n\r\n\r\n\/* ===================================================\r\nCOMPTEUR\r\n=================================================== *\/\r\n\r\n.ring-lightbox-counter {\r\n\r\nbottom: 15px;\r\n\r\nfont-size: 11px;\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\nPETIT MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n.cineprod-banner {\r\n\r\npadding-bottom: 0 !important;\r\n\r\n}\r\n\r\n.cineprod-banner::after {\r\n\r\nbottom: 6px;\r\n\r\nfont-size: 5.5px;\r\n\r\nletter-spacing: .3px;\r\n\r\n}\r\n\r\n.ring-area {\r\n\r\nwidth: 20%;\r\n\r\nheight: 60px;\r\n\r\nbottom: 0;\r\n\r\n}\r\n\r\n.ring-installation-area,\r\n.ring-production-area,\r\n.ring-staff-area {\r\n\r\nheight: 60px;\r\n\r\n}\r\n\r\n.ring-big-arrow {\r\n\r\nwidth: 40px;\r\n\r\nheight: 40px;\r\n\r\nfont-size: 30px;\r\n\r\n}\r\n\r\n.ring-lightbox-img {\r\n\r\nmax-width: 88vw;\r\n\r\nmax-height: 74vh;\r\n\r\n}\r\n\r\n.production-lightbox-video {\r\n\r\nwidth: 96vw;\r\n\r\n}\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n\"use strict\";\r\n\r\n\/* ==================================================\r\nDONN\u00c9ES \u2014 RING DE BOXE\r\n================================================== *\/\r\n\r\nconst boxeImages = [\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/RING-5X5-HAGLER-KERY-JAMES-ROOTS.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/DSCF3021-scaled.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/ring-fashion-week-scaled.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/07\/LOCATION-RING-BOXE-PARIS-JO-OLYMPIQUE-HOTEL-SHANGRI-LA-PALACE-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-DE-BOXE-CINEPROD-HAGLER-ALI-FOREMAN-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2020\/09\/ring-de-boxe-equipe-21cineprod.pro_.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2020\/09\/RING-DE-BOXETournage-CLIP-PORTLAND.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2020\/09\/ring-flottantring-flottant-piscine-monacocineprod.pro_.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2021\/08\/SHOW-SPECTACULAIRE.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-18-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-26-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-52-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-23-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-30-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/01\/BOXING-EVENT-PARIS-2024-3.jpg\"\r\n\r\n];\r\n\r\n\r\n\/* ==================================================\r\nDONN\u00c9ES \u2014 MMA\r\n================================================== *\/\r\n\r\nconst mmaImages = [\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2025\/04\/SYLVAIN-MORELLEC-ACTEUR-EMISSION-CANAL-MMA-CAGE-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/mma-cage-a-louer-cineprod.pro-location-octogone-paris-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-16-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-15-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-3-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-2-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/TOURNAGE-FILM-CINEPROD-3.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2021\/09\/MMA_CAGE-EMISSION-C8.jpg\"\r\n\r\n];\r\n\r\n\r\n\/* ==================================================\r\nINSTALLATION\r\n================================================== *\/\r\n\r\nconst installationVideo = \"2hBCTcsWPJs\";\r\n\r\n\r\n\/* ==================================================\r\nPRODUCTION\r\n================================================== *\/\r\n\r\nconst productionVideos = [\r\n\r\n\"lBPJaOFwzpo\",\r\n\"_krtigaJVNE\",\r\n\"jIEyA1cFKxc\",\r\n\"lpWzzLC9y9c\",\r\n\"vjRHcbPmWd4\",\r\n\"FZH2d5YPymM\",\r\n\"-itbtqr41T0\",\r\n\"vXrbk7uM7uU\",\r\n\"b9S88pvuuys\",\r\n\"hHfpvjlwyHk\",\r\n\"Ipu7qI44vhA\",\r\n\"vUUa_NlpiOQ\"\r\n\r\n];\r\n\r\nconst productionStarts = [\r\n\r\n0,\r\n20,\r\n0,\r\n7,\r\n14,\r\n16,\r\n111,\r\n60,\r\n181,\r\n97,\r\n75,\r\n418\r\n\r\n];\r\n\r\n\r\n\/* ==================================================\r\nSTAFF\r\n================================================== *\/\r\n\r\nconst staffImages = [\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2025\/04\/CATCHEUR-TYZON-SYLVAIN-MORELLEC-INTERVIEW-TOURNAGE-EMISSION-TV-TF1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2025\/04\/ACTEUR-SYLVAIN-MORELLEC-TOURNAGE-EMISSION-TV-TOULOUSE-TF1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/07\/OSYRIA-AUBERT-BARMAID-31.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-40-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-19-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/TOURNAGE-FILM-CINEPROD-MONTLHERY-MARCOUSSIS-19-scaled.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/04\/LOCATION-RING-BOXE-FESTIVAL-CANNES-2024-CINEPROD.PRO-10.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/01\/RING-BOXE-PLATEAU-TV-PARIS.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/01\/RING-BOXE-PLATEAU-TV-EMISSION-PARIS-SAINT-DENIS-2.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/01\/BOXING-ANIMATION-HOTEL-PALACE-LE-CRILLON-PARIS-2.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/01\/BOXING-EVENT-PARIS-2024-18.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/01\/BOXING-EVENT-BOXE-PARIS-2024-36.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2024\/01\/BOXING-EVENT-BOXE-PARIS-2024-37.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2023\/05\/TOURNAGE-CLIP-SHOOTING-FOIRE-DU-TRONE-RAPEUSE-AUDIE-B-29-1.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2023\/05\/TOURNAGE-CLIP-SHOOTING-FOIRE-DU-TRONE-RAPEUSE-AUDIE-B-41.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2023\/05\/MIMESIS-CREATION-COSTUMES-CINEMA-4-scaled.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2021\/09\/ring_de_boxe_nrj_music_awards.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2021\/09\/Teaser_JACKSON2.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2021\/08\/RING-GIRLS-FRANCE.jpg\",\r\n\r\n\"https:\/\/cineprod.pro\/wp-content\/uploads\/2018\/03\/plateau-tournage-cineprod-16.jpg\"\r\n\r\n];\r\n\r\n\r\n\/* ==================================================\r\nOUTILS\r\n================================================== *\/\r\n\r\nfunction prevent(e) {\r\n\r\ne.preventDefault();\r\n\r\ne.stopPropagation();\r\n\r\n}\r\n\r\nfunction lockScroll() {\r\n\r\ndocument.body.style.overflow = \"hidden\";\r\n\r\n}\r\n\r\nfunction unlockScroll() {\r\n\r\ndocument.body.style.overflow = \"\";\r\n\r\n}\r\n\r\n\r\n\/* ==================================================\r\nCARROUSEL PHOTO\r\n================================================== *\/\r\n\r\nfunction createPhotoCarousel(\r\nareaSelector,\r\nimages,\r\nlightboxSelector\r\n) {\r\n\r\nconst area =\r\n  document.querySelector(areaSelector);\r\n\r\nconst lightbox =\r\n  document.querySelector(lightboxSelector);\r\n\r\nif (\r\n  !area ||\r\n  !lightbox ||\r\n  !images ||\r\n  !images.length\r\n) {\r\n\r\n  return;\r\n\r\n}\r\n\r\nconst previewImage =\r\n  area.querySelector(\".ring-preview-img\");\r\n\r\nconst counter =\r\n  area.querySelector(\".ring-number\");\r\n\r\nconst previewPrev =\r\n  area.querySelector(\".ring-prev\");\r\n\r\nconst previewNext =\r\n  area.querySelector(\".ring-next\");\r\n\r\nconst hover =\r\n  area.querySelector(\".ring-hover\");\r\n\r\nconst lightboxImage =\r\n  lightbox.querySelector(\".ring-lightbox-img\");\r\n\r\nconst lightboxCounter =\r\n  lightbox.querySelector(\".ring-lightbox-counter\");\r\n\r\nconst lightboxPrev =\r\n  lightbox.querySelector(\".ring-big-prev\");\r\n\r\nconst lightboxNext =\r\n  lightbox.querySelector(\".ring-big-next\");\r\n\r\nconst close =\r\n  lightbox.querySelector(\".ring-close\");\r\n\r\nconst background =\r\n  lightbox.querySelector(\".ring-lightbox-bg\");\r\n\r\nlet current = 0;\r\n\r\nfunction renderPreview() {\r\n\r\n  previewImage.src =\r\n    images[current];\r\n\r\n  counter.textContent =\r\n    (current + 1) +\r\n    \" \/ \" +\r\n    images.length;\r\n\r\n}\r\n\r\nfunction renderLightbox() {\r\n\r\n  lightboxImage.src =\r\n    images[current];\r\n\r\n  lightboxCounter.textContent =\r\n    (current + 1) +\r\n    \" \/ \" +\r\n    images.length;\r\n\r\n}\r\n\r\nfunction next() {\r\n\r\n  current =\r\n    (current + 1) %\r\n    images.length;\r\n\r\n  renderPreview();\r\n\r\n}\r\n\r\nfunction previous() {\r\n\r\n  current =\r\n    (current - 1 + images.length) %\r\n    images.length;\r\n\r\n  renderPreview();\r\n\r\n}\r\n\r\nfunction open() {\r\n\r\n  renderLightbox();\r\n\r\n  lightbox.classList.add(\"open\");\r\n\r\n  lockScroll();\r\n\r\n}\r\n\r\nfunction closeLightbox() {\r\n\r\n  lightbox.classList.remove(\"open\");\r\n\r\n  unlockScroll();\r\n\r\n}\r\n\r\npreviewPrev.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    previous();\r\n\r\n  }\r\n);\r\n\r\npreviewNext.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    next();\r\n\r\n  }\r\n);\r\n\r\nhover.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    open();\r\n\r\n  }\r\n);\r\n\r\nlightboxPrev.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    previous();\r\n\r\n    renderLightbox();\r\n\r\n  }\r\n);\r\n\r\nlightboxNext.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    next();\r\n\r\n    renderLightbox();\r\n\r\n  }\r\n);\r\n\r\nclose.addEventListener(\r\n  \"click\",\r\n  closeLightbox\r\n);\r\n\r\nbackground.addEventListener(\r\n  \"click\",\r\n  closeLightbox\r\n);\r\n\r\nrenderPreview();\r\n\r\n}\r\n\r\n\r\n\/* ==================================================\r\nCARROUSEL VID\u00c9O\r\n================================================== *\/\r\n\r\nfunction createVideoCarousel(\r\nareaSelector,\r\nvideos,\r\nstarts,\r\nlightboxSelector\r\n) {\r\n\r\nconst area =\r\n  document.querySelector(areaSelector);\r\n\r\nconst lightbox =\r\n  document.querySelector(lightboxSelector);\r\n\r\nif (\r\n  !area ||\r\n  !lightbox ||\r\n  !videos.length\r\n) {\r\n\r\n  return;\r\n\r\n}\r\n\r\nconst previewIframe =\r\n  area.querySelector(\r\n    \".production-preview-iframe\"\r\n  );\r\n\r\nconst counter =\r\n  area.querySelector(\".ring-number\");\r\n\r\nconst previewPrev =\r\n  area.querySelector(\".ring-prev\");\r\n\r\nconst previewNext =\r\n  area.querySelector(\".ring-next\");\r\n\r\nconst hover =\r\n  area.querySelector(\".ring-hover\");\r\n\r\nconst lightboxIframe =\r\n  lightbox.querySelector(\r\n    \".production-lightbox-iframe\"\r\n  );\r\n\r\nconst lightboxCounter =\r\n  lightbox.querySelector(\r\n    \".ring-lightbox-counter\"\r\n  );\r\n\r\nconst lightboxPrev =\r\n  lightbox.querySelector(\r\n    \".ring-big-prev\"\r\n  );\r\n\r\nconst lightboxNext =\r\n  lightbox.querySelector(\r\n    \".ring-big-next\"\r\n  );\r\n\r\nconst close =\r\n  lightbox.querySelector(\".ring-close\");\r\n\r\nconst background =\r\n  lightbox.querySelector(\r\n    \".ring-lightbox-bg\"\r\n  );\r\n\r\nlet current = 0;\r\n\r\nfunction getStart() {\r\n\r\n  const value =\r\n    Number(starts[current]);\r\n\r\n  if (\r\n    Number.isFinite(value) &&\r\n    value >= 0\r\n  ) {\r\n\r\n    return Math.floor(value);\r\n\r\n  }\r\n\r\n  return 0;\r\n\r\n}\r\n\r\nfunction getPreviewURL() {\r\n\r\n  return (\r\n    \"https:\/\/www.youtube.com\/embed\/\" +\r\n    videos[current] +\r\n    \"?autoplay=1\" +\r\n    \"&mute=1\" +\r\n    \"&controls=1\" +\r\n    \"&rel=0\" +\r\n    \"&playsinline=1\" +\r\n    \"&start=\" +\r\n    getStart()\r\n  );\r\n\r\n}\r\n\r\nfunction getLightboxURL() {\r\n\r\n  return (\r\n    \"https:\/\/www.youtube.com\/embed\/\" +\r\n    videos[current] +\r\n    \"?autoplay=1\" +\r\n    \"&controls=1\" +\r\n    \"&rel=0\" +\r\n    \"&playsinline=1\" +\r\n    \"&start=\" +\r\n    getStart()\r\n  );\r\n\r\n}\r\n\r\nfunction renderCounter() {\r\n\r\n  counter.textContent =\r\n    (current + 1) +\r\n    \" \/ \" +\r\n    videos.length;\r\n\r\n}\r\n\r\nfunction startPreview() {\r\n\r\n  if (\r\n    lightbox.classList.contains(\"open\")\r\n  ) {\r\n\r\n    return;\r\n\r\n  }\r\n\r\n  previewIframe.src =\r\n    getPreviewURL();\r\n\r\n}\r\n\r\nfunction stopPreview() {\r\n\r\n  previewIframe.src = \"\";\r\n\r\n}\r\n\r\nfunction next() {\r\n\r\n  current =\r\n    (current + 1) %\r\n    videos.length;\r\n\r\n  renderCounter();\r\n\r\n  if (area.matches(\":hover\")) {\r\n\r\n    startPreview();\r\n\r\n  }\r\n\r\n}\r\n\r\nfunction previous() {\r\n\r\n  current =\r\n    (current - 1 + videos.length) %\r\n    videos.length;\r\n\r\n  renderCounter();\r\n\r\n  if (area.matches(\":hover\")) {\r\n\r\n    startPreview();\r\n\r\n  }\r\n\r\n}\r\n\r\nfunction open() {\r\n\r\n  stopPreview();\r\n\r\n  lightboxIframe.src =\r\n    getLightboxURL();\r\n\r\n  lightboxCounter.textContent =\r\n    (current + 1) +\r\n    \" \/ \" +\r\n    videos.length;\r\n\r\n  lightbox.classList.add(\"open\");\r\n\r\n  lockScroll();\r\n\r\n}\r\n\r\nfunction closeLightbox() {\r\n\r\n  lightbox.classList.remove(\"open\");\r\n\r\n  lightboxIframe.src = \"\";\r\n\r\n  unlockScroll();\r\n\r\n}\r\n\r\narea.addEventListener(\r\n  \"mouseenter\",\r\n  startPreview\r\n);\r\n\r\narea.addEventListener(\r\n  \"mouseleave\",\r\n  function () {\r\n\r\n    if (\r\n      !lightbox.classList.contains(\"open\")\r\n    ) {\r\n\r\n      stopPreview();\r\n\r\n    }\r\n\r\n  }\r\n);\r\n\r\npreviewPrev.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    previous();\r\n\r\n  }\r\n);\r\n\r\npreviewNext.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    next();\r\n\r\n  }\r\n);\r\n\r\nhover.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    open();\r\n\r\n  }\r\n);\r\n\r\nlightboxPrev.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    previous();\r\n\r\n    lightboxIframe.src =\r\n      getLightboxURL();\r\n\r\n    lightboxCounter.textContent =\r\n      (current + 1) +\r\n      \" \/ \" +\r\n      videos.length;\r\n\r\n  }\r\n);\r\n\r\nlightboxNext.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    next();\r\n\r\n    lightboxIframe.src =\r\n      getLightboxURL();\r\n\r\n    lightboxCounter.textContent =\r\n      (current + 1) +\r\n      \" \/ \" +\r\n      videos.length;\r\n\r\n  }\r\n);\r\n\r\nclose.addEventListener(\r\n  \"click\",\r\n  closeLightbox\r\n);\r\n\r\nbackground.addEventListener(\r\n  \"click\",\r\n  closeLightbox\r\n);\r\n\r\ndocument.addEventListener(\r\n  \"keydown\",\r\n  function (e) {\r\n\r\n    if (\r\n      !lightbox.classList.contains(\"open\")\r\n    ) {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n    if (e.key === \"Escape\") {\r\n\r\n      closeLightbox();\r\n\r\n      return;\r\n\r\n    }\r\n\r\n    if (e.key === \"ArrowRight\") {\r\n\r\n      next();\r\n\r\n      lightboxIframe.src =\r\n        getLightboxURL();\r\n\r\n      lightboxCounter.textContent =\r\n        (current + 1) +\r\n        \" \/ \" +\r\n        videos.length;\r\n\r\n    }\r\n\r\n    if (e.key === \"ArrowLeft\") {\r\n\r\n      previous();\r\n\r\n      lightboxIframe.src =\r\n        getLightboxURL();\r\n\r\n      lightboxCounter.textContent =\r\n        (current + 1) +\r\n        \" \/ \" +\r\n        videos.length;\r\n\r\n    }\r\n\r\n  }\r\n);\r\n\r\nrenderCounter();\r\n\r\n}\r\n\r\n\r\n\/* ==================================================\r\nINSTALLATION\r\n================================================== *\/\r\n\r\nfunction createInstallation(\r\nareaSelector,\r\nvideo,\r\nlightboxSelector\r\n) {\r\n\r\nconst area =\r\n  document.querySelector(areaSelector);\r\n\r\nconst lightbox =\r\n  document.querySelector(lightboxSelector);\r\n\r\nif (!area || !lightbox) {\r\n\r\n  return;\r\n\r\n}\r\n\r\nconst previewIframe =\r\n  area.querySelector(\r\n    \".installation-preview-iframe\"\r\n  );\r\n\r\nconst hover =\r\n  area.querySelector(\".ring-hover\");\r\n\r\nconst lightboxIframe =\r\n  lightbox.querySelector(\r\n    \".installation-lightbox-iframe\"\r\n  );\r\n\r\nconst close =\r\n  lightbox.querySelector(\".ring-close\");\r\n\r\nconst background =\r\n  lightbox.querySelector(\r\n    \".ring-lightbox-bg\"\r\n  );\r\n\r\nfunction previewURL() {\r\n\r\n  return (\r\n    \"https:\/\/www.youtube.com\/embed\/\" +\r\n    video +\r\n    \"?autoplay=1\" +\r\n    \"&mute=1\" +\r\n    \"&controls=1\" +\r\n    \"&rel=0\" +\r\n    \"&playsinline=1\"\r\n  );\r\n\r\n}\r\n\r\nfunction lightboxURL() {\r\n\r\n  return (\r\n    \"https:\/\/www.youtube.com\/embed\/\" +\r\n    video +\r\n    \"?autoplay=1\" +\r\n    \"&controls=1\" +\r\n    \"&rel=0\" +\r\n    \"&playsinline=1\"\r\n  );\r\n\r\n}\r\n\r\nfunction startPreview() {\r\n\r\n  if (\r\n    lightbox.classList.contains(\"open\")\r\n  ) {\r\n\r\n    return;\r\n\r\n  }\r\n\r\n  previewIframe.src =\r\n    previewURL();\r\n\r\n}\r\n\r\nfunction stopPreview() {\r\n\r\n  previewIframe.src = \"\";\r\n\r\n}\r\n\r\nfunction open() {\r\n\r\n  stopPreview();\r\n\r\n  lightboxIframe.src =\r\n    lightboxURL();\r\n\r\n  lightbox.classList.add(\"open\");\r\n\r\n  lockScroll();\r\n\r\n}\r\n\r\nfunction closeLightbox() {\r\n\r\n  lightbox.classList.remove(\"open\");\r\n\r\n  lightboxIframe.src = \"\";\r\n\r\n  unlockScroll();\r\n\r\n}\r\n\r\narea.addEventListener(\r\n  \"mouseenter\",\r\n  startPreview\r\n);\r\n\r\narea.addEventListener(\r\n  \"mouseleave\",\r\n  function () {\r\n\r\n    if (\r\n      !lightbox.classList.contains(\"open\")\r\n    ) {\r\n\r\n      stopPreview();\r\n\r\n    }\r\n\r\n  }\r\n);\r\n\r\nhover.addEventListener(\r\n  \"click\",\r\n  function (e) {\r\n\r\n    prevent(e);\r\n\r\n    open();\r\n\r\n  }\r\n);\r\n\r\nclose.addEventListener(\r\n  \"click\",\r\n  closeLightbox\r\n);\r\n\r\nbackground.addEventListener(\r\n  \"click\",\r\n  closeLightbox\r\n);\r\n\r\n}\r\n\r\n\r\n\/* ==================================================\r\nINITIALISATION\r\n================================================== *\/\r\n\r\nfunction initCineprod() {\r\n\r\ncreatePhotoCarousel(\r\n  \".ring-boxe-area\",\r\n  boxeImages,\r\n  \".ring-boxe-lightbox\"\r\n);\r\n\r\ncreatePhotoCarousel(\r\n  \".ring-mma-area\",\r\n  mmaImages,\r\n  \".ring-mma-lightbox\"\r\n);\r\n\r\ncreateInstallation(\r\n  \".ring-installation-area\",\r\n  installationVideo,\r\n  \".ring-installation-lightbox\"\r\n);\r\n\r\ncreateVideoCarousel(\r\n  \".ring-production-area\",\r\n  productionVideos,\r\n  productionStarts,\r\n  \".ring-production-lightbox\"\r\n);\r\n\r\ncreatePhotoCarousel(\r\n  \".ring-staff-area\",\r\n  staffImages,\r\n  \".ring-staff-lightbox\"\r\n);\r\n\r\n}\r\n\r\n\r\n\/* ==================================================\r\nDOM PR\u00caT\r\n================================================== *\/\r\n\r\nif (\r\ndocument.readyState === \"loading\"\r\n) {\r\n\r\ndocument.addEventListener(\r\n  \"DOMContentLoaded\",\r\n  initCineprod\r\n);\r\n\r\n} else {\r\n\r\ninitCineprod();\r\n\r\n}\r\n\r\n})();\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-41576c1 e-con e-atomic-element e-flexbox-base e-42b9990 \" data-id=\"41576c1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"41576c1\">\n    \t\t<div class=\"elementor-element elementor-element-1933d5f elementor-widget elementor-widget-html\" data-id=\"1933d5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     POLICE HAMMERSMITH ONE\r\n========================================= -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link\r\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=Hammersmith+One&display=swap\"\r\n    rel=\"stylesheet\"\r\n>\r\n\r\n<!-- =========================================\r\n     CALENDLY\r\n========================================= -->\r\n\r\n<link\r\n    href=\"https:\/\/assets.calendly.com\/assets\/external\/widget.css\"\r\n    rel=\"stylesheet\"\r\n>\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   RESET\r\n===================================================== *\/\r\n\r\nhtml,\r\nbody {\r\n    margin: 0;\r\n    padding: 0;\r\n    overflow-x: hidden;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   HERO\r\n===================================================== *\/\r\n\r\n.projet-hero {\r\n    position: relative;\r\n\r\n    width: 100vw;\r\n    max-width: 100vw;\r\n\r\n    height: 100vh;\r\n    max-height: 100vh;\r\n\r\n    margin-left: calc(50% - 50vw);\r\n    margin-right: calc(50% - 50vw);\r\n\r\n    padding: 0;\r\n\r\n    overflow: hidden;\r\n\r\n    background: #0A0A0A;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   IMAGE \u2014 DESKTOP\r\n===================================================== *\/\r\n\r\n.projet-hero img {\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 100vw;\r\n    max-width: none;\r\n\r\n    height: 100%;\r\n\r\n    object-fit: cover;\r\n    object-position: center top;\r\n\r\n    display: block;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE ROUGE\r\n===================================================== *\/\r\n\r\n.projet-hero-text {\r\n    position: absolute;\r\n\r\n    top: 62px;\r\n    left: 0;\r\n\r\n    z-index: 10;\r\n\r\n    width: 720px;\r\n    height: 100px;\r\n\r\n    padding: 18px 30px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    background-color: #E51616;\r\n    color: #FFFFFF;\r\n\r\n    font-family: 'Hammersmith One', sans-serif;\r\n\r\n    font-size: 30px;\r\n    font-weight: 400;\r\n\r\n    line-height: 1.15;\r\n\r\n    white-space: nowrap;\r\n\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOUTON DESKTOP\r\n===================================================== *\/\r\n\r\n.projet-hero-button {\r\n    position: absolute;\r\n\r\n    right: max(30px, calc((100vw - 1280px) \/ 2));\r\n    bottom: 50px;\r\n\r\n    z-index: 20;\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    min-width: 245px;\r\n    min-height: 52px;\r\n\r\n    padding: 0 28px;\r\n\r\n    background-color: #E51616;\r\n\r\n    color: #FFFFFF !important;\r\n\r\n    font-family: 'Hammersmith One', sans-serif;\r\n\r\n    font-size: 18px;\r\n    font-weight: 400;\r\n\r\n    line-height: 1;\r\n\r\n    text-align: center;\r\n\r\n    text-decoration: none !important;\r\n    text-transform: uppercase;\r\n\r\n    white-space: nowrap;\r\n\r\n    border: none;\r\n    border-radius: 0;\r\n\r\n    cursor: pointer;\r\n\r\n    box-sizing: border-box;\r\n\r\n    transition:\r\n        background-color 0.3s ease,\r\n        transform 0.3s ease;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   HOVER\r\n===================================================== *\/\r\n\r\n.projet-hero-button:hover {\r\n    background-color: #C91010;\r\n    color: #FFFFFF !important;\r\n\r\n    text-decoration: none !important;\r\n\r\n    transform: translateY(-3px);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CLIC\r\n===================================================== *\/\r\n\r\n.projet-hero-button:active {\r\n    background-color: #A90D0D;\r\n\r\n    transform: translateY(0);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   FOCUS\r\n===================================================== *\/\r\n\r\n.projet-hero-button:focus,\r\n.projet-hero-button:focus-visible {\r\n    outline: none !important;\r\n    box-shadow: none !important;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   GRAND \u00c9CRAN\r\n   \u2265 1440 PX\r\n===================================================== *\/\r\n\r\n@media (min-width: 1440px) {\r\n\r\n    .projet-hero {\r\n        min-height: 700px;\r\n    }\r\n\r\n    .projet-hero img {\r\n        width: 100vw;\r\n        height: 100%;\r\n\r\n        object-fit: cover;\r\n        object-position: center top;\r\n\r\n        transform: none;\r\n    }\r\n\r\n    .projet-hero-text {\r\n        top: 62px;\r\n\r\n        width: 720px;\r\n        height: 100px;\r\n\r\n        padding: 18px 30px;\r\n\r\n        font-size: 30px;\r\n    }\r\n\r\n    .projet-hero-button {\r\n        right: max(30px, calc((100vw - 1320px) \/ 2));\r\n        bottom: 50px;\r\n\r\n        min-width: 245px;\r\n        min-height: 52px;\r\n\r\n        padding: 0 28px;\r\n\r\n        font-size: 18px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLETTE\r\n   768 \u2192 1023 PX\r\n===================================================== *\/\r\n\r\n@media (min-width: 768px) and (max-width: 1023px) {\r\n\r\n    .projet-hero {\r\n        width: 100vw;\r\n        height: 100vh;\r\n\r\n        min-height: 600px;\r\n\r\n        margin-left: calc(50% - 50vw);\r\n        margin-right: calc(50% - 50vw);\r\n    }\r\n\r\n    .projet-hero img {\r\n        width: 100vw;\r\n        height: 100%;\r\n\r\n        object-fit: cover;\r\n        object-position: center top;\r\n\r\n        transform: none;\r\n    }\r\n\r\n    .projet-hero-text {\r\n        top: 35px;\r\n\r\n        width: min(600px, 82vw);\r\n\r\n        height: auto;\r\n        min-height: 80px;\r\n\r\n        padding: 14px 25px;\r\n\r\n        font-size: clamp(23px, 3vw, 28px);\r\n\r\n        line-height: 1.15;\r\n\r\n        white-space: normal;\r\n    }\r\n\r\n    .projet-hero-button {\r\n        right: 30px;\r\n        bottom: 30px;\r\n\r\n        min-width: 240px;\r\n        min-height: 48px;\r\n\r\n        padding: 0 26px;\r\n\r\n        font-size: 16px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n   481 \u2192 767 PX\r\n===================================================== *\/\r\n\r\n@media (min-width: 481px) and (max-width: 767px) {\r\n\r\n    .projet-hero {\r\n        width: 100vw;\r\n        max-width: 100vw;\r\n\r\n        height: 100svh;\r\n\r\n        min-height: 600px;\r\n\r\n        margin-left: calc(50% - 50vw);\r\n        margin-right: calc(50% - 50vw);\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n\r\n    \/* IMAGE MOBILE *\/\r\n\r\n    .projet-hero img {\r\n        top: 0;\r\n        left: 0;\r\n\r\n        width: 100%;\r\n        height: 100%;\r\n\r\n        max-width: none;\r\n\r\n        object-fit: cover;\r\n        object-position: center top;\r\n\r\n        transform: scale(1.10);\r\n        transform-origin: center top;\r\n    }\r\n\r\n\r\n    \/* TITRE *\/\r\n\r\n    .projet-hero-text {\r\n        top: 25px;\r\n        left: 0;\r\n\r\n        width: calc(100% - 30px);\r\n\r\n        height: auto;\r\n        min-height: 0;\r\n\r\n        padding: 14px 20px;\r\n\r\n        display: block;\r\n\r\n        font-size: clamp(21px, 5vw, 28px);\r\n\r\n        line-height: 1.15;\r\n\r\n        white-space: normal;\r\n    }\r\n\r\n\r\n    \/* BOUTON MOBILE *\/\r\n\r\n    .projet-hero-button {\r\n        left: 50%;\r\n        right: auto;\r\n\r\n        bottom: 75px;\r\n\r\n        width: 280px;\r\n        max-width: calc(100% - 30px);\r\n\r\n        min-width: 0;\r\n\r\n        min-height: 54px;\r\n\r\n        padding: 13px 25px;\r\n\r\n        font-size: 17px;\r\n\r\n        transform: translateX(-50%);\r\n    }\r\n\r\n    .projet-hero-button:hover {\r\n        transform:\r\n            translateX(-50%)\r\n            translateY(-3px);\r\n    }\r\n\r\n    .projet-hero-button:active {\r\n        transform:\r\n            translateX(-50%);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PETIT MOBILE\r\n   \u2264 480 PX\r\n===================================================== *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .projet-hero {\r\n        width: 100vw;\r\n        max-width: 100vw;\r\n\r\n        height: 100svh;\r\n\r\n        min-height: 560px;\r\n\r\n        margin-left: calc(50% - 50vw);\r\n        margin-right: calc(50% - 50vw);\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n\r\n    \/* IMAGE MOBILE *\/\r\n\r\n    .projet-hero img {\r\n        top: 0;\r\n        left: 0;\r\n\r\n        width: 100%;\r\n        height: 100%;\r\n\r\n        max-width: none;\r\n\r\n        object-fit: cover;\r\n        object-position: center top;\r\n\r\n        transform: scale(1.10);\r\n        transform-origin: center top;\r\n    }\r\n\r\n\r\n    \/* TITRE *\/\r\n\r\n    .projet-hero-text {\r\n        top: 20px;\r\n        left: 0;\r\n\r\n        width: calc(100% - 20px);\r\n\r\n        height: auto;\r\n        min-height: 0;\r\n\r\n        padding: 12px 16px;\r\n\r\n        display: block;\r\n\r\n        font-size: clamp(18px, 5.5vw, 23px);\r\n\r\n        line-height: 1.15;\r\n\r\n        white-space: normal;\r\n    }\r\n\r\n\r\n    \/* BOUTON MOBILE *\/\r\n\r\n    .projet-hero-button {\r\n        left: 50%;\r\n        right: auto;\r\n\r\n        bottom: 65px;\r\n\r\n        width: 280px;\r\n        max-width: calc(100% - 30px);\r\n\r\n        min-width: 0;\r\n\r\n        min-height: 54px;\r\n\r\n        padding: 13px 20px;\r\n\r\n        font-size: 16px;\r\n\r\n        transform: translateX(-50%);\r\n    }\r\n\r\n    .projet-hero-button:hover {\r\n        transform:\r\n            translateX(-50%)\r\n            translateY(-3px);\r\n    }\r\n\r\n    .projet-hero-button:active {\r\n        transform:\r\n            translateX(-50%);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TR\u00c8S PETIT MOBILE\r\n   \u2264 360 PX\r\n===================================================== *\/\r\n\r\n@media (max-width: 360px) {\r\n\r\n    .projet-hero {\r\n        min-height: 520px;\r\n    }\r\n\r\n\r\n    \/* IMAGE *\/\r\n\r\n    .projet-hero img {\r\n        width: 100%;\r\n        height: 100%;\r\n\r\n        object-fit: cover;\r\n        object-position: center top;\r\n\r\n        transform: scale(1.10);\r\n        transform-origin: center top;\r\n    }\r\n\r\n\r\n    \/* TITRE *\/\r\n\r\n    .projet-hero-text {\r\n        top: 16px;\r\n\r\n        width: calc(100% - 16px);\r\n\r\n        padding: 10px 13px;\r\n\r\n        font-size: 18px;\r\n\r\n        line-height: 1.15;\r\n    }\r\n\r\n\r\n    \/* BOUTON *\/\r\n\r\n    .projet-hero-button {\r\n        bottom: 60px;\r\n\r\n        width: 270px;\r\n        max-width: calc(100% - 25px);\r\n\r\n        min-height: 52px;\r\n\r\n        padding: 11px 15px;\r\n\r\n        font-size: 15px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ACCESSIBILIT\u00c9\r\n===================================================== *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .projet-hero-button {\r\n        transition: none;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =====================================================\r\n     HERO\r\n===================================================== -->\r\n\r\n<section class=\"projet-hero\">\r\n\r\n    <!-- IMAGE -->\r\n\r\n    <img decoding=\"async\"\r\n        src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/defile-jean-paul-scaled.jpg\"\r\n        alt=\"D\u00e9fil\u00e9 Jean Paul\"\r\n    >\r\n\r\n\r\n    <!-- TITRE ROUGE -->\r\n\r\n    <div class=\"projet-hero-text\">\r\n\r\n        PLUS QU'UN SIMPLE RING, VOTRE PROJET<br>\r\n        MERITE SA MISE EN SC\u00c8NE.\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- BOUTON -->\r\n\r\n    <a\r\n        href=\"#\"\r\n        class=\"projet-hero-button\"\r\n        onclick=\"Calendly.initPopupWidget({\r\n            url: 'https:\/\/calendly.com\/haglerprod\/30min?background_color=0a0a0a&text_color=ffffff&primary_color=0d64b1'\r\n        }); return false;\"\r\n    >\r\n        DEMANDER UN DEVIS\r\n    <\/a>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     SCRIPT CALENDLY\r\n===================================================== -->\r\n\r\n<script\r\n    src=\"https:\/\/assets.calendly.com\/assets\/external\/widget.js\"\r\n    async>\r\n<\/script>\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-51f0518 e-con e-atomic-element e-flexbox-base e-a25dc20 \" data-id=\"51f0518\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"51f0518\">\n    \t\t<div class=\"elementor-element elementor-element-8b3a006 elementor-widget elementor-widget-html\" data-id=\"8b3a006\" 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=\"fr\">\r\n\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n\r\n<meta\r\n    name=\"viewport\"\r\n    content=\"width=device-width, initial-scale=1.0\"\r\n>\r\n\r\n<title>Compteur<\/title>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   RESET\r\n========================================================= *\/\r\n\r\nhtml,\r\nbody {\r\n\r\n    width: 100% !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    overflow-x: hidden !important;\r\n}\r\n\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BANDEAU\r\n========================================================= *\/\r\n\r\n.counter-banner {\r\n\r\n    position: relative;\r\n\r\n    width: 100vw !important;\r\n    max-width: 100vw !important;\r\n\r\n    left: 50% !important;\r\n\r\n    margin-left: -50vw !important;\r\n\r\n    height: 300px;\r\n\r\n    background: #fbfbfb;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: clamp(25px, 5vw, 80px);\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GROUPES\r\n========================================================= *\/\r\n\r\n.counter-group {\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CHIFFRES\r\n========================================================= *\/\r\n\r\n.digits {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: clamp(3px, 0.4vw, 6px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARTONS\r\n========================================================= *\/\r\n\r\n.card {\r\n\r\n    position: relative;\r\n\r\n    width: clamp(55px, 10vw, 130px);\r\n\r\n    height: clamp(75px, 13vw, 120px);\r\n\r\n    border-radius: 9px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: #ed1117;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BLEU\r\n========================================================= *\/\r\n\r\n.blue .card {\r\n\r\n    background: #0964b8;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LIGNE CENTRALE\r\n========================================================= *\/\r\n\r\n.card::before {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    z-index: 20;\r\n\r\n    left: 0;\r\n    right: 0;\r\n\r\n    top: 50%;\r\n\r\n    height: 2px;\r\n\r\n    background: rgba(255,255,255,0.23);\r\n}\r\n\r\n\r\n.card::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    z-index: 21;\r\n\r\n    left: 0;\r\n    right: 0;\r\n\r\n    top: calc(50% + 1px);\r\n\r\n    height: 1px;\r\n\r\n    background: rgba(0,0,0,0.12);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEN\u00caTRE\r\n========================================================= *\/\r\n\r\n.window {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ROULEAU\r\n========================================================= *\/\r\n\r\n.roller {\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 100%;\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    transform: translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CHIFFRES\r\n========================================================= *\/\r\n\r\n.number {\r\n\r\n    width: 100%;\r\n\r\n    height: clamp(75px, 13vw, 120px);\r\n\r\n    min-height: clamp(75px, 13vw, 120px);\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    color: white;\r\n\r\n    font-family:\r\n        Impact,\r\n        Haettenschweiler,\r\n        \"Arial Narrow Bold\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: clamp(55px, 9vw, 95px);\r\n\r\n    font-weight: 900;\r\n\r\n    line-height: 1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DEUX-POINTS\r\n========================================================= *\/\r\n\r\n.separator {\r\n\r\n    color: #111;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n\r\n    font-size: clamp(45px, 7vw, 80px);\r\n\r\n    font-weight: 900;\r\n\r\n    line-height: 1;\r\n\r\n    margin-top: -5px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TEXTES\r\n========================================================= *\/\r\n\r\n.caption {\r\n\r\n    margin-top: 12px;\r\n\r\n    font-size: clamp(7px, 0.75vw, 11px);\r\n\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 0.02em;\r\n\r\n    text-align: center;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n.red-text {\r\n    color: #ed1117;\r\n}\r\n\r\n\r\n.blue-text {\r\n    color: #0964b8;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLETTE\r\n========================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    .counter-banner {\r\n\r\n        height: 280px;\r\n\r\n        gap: 25px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   15 EN HAUT\r\n   300 EN BAS\r\n========================================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .counter-banner {\r\n\r\n        width: 100vw !important;\r\n        max-width: 100vw !important;\r\n\r\n        height: auto;\r\n\r\n        min-height: 430px;\r\n\r\n        padding: 35px 15px 40px;\r\n\r\n        display: flex;\r\n\r\n        flex-direction: column;\r\n\r\n        align-items: center;\r\n        justify-content: center;\r\n\r\n        gap: 0;\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       GROUPES\r\n    ===================================================== *\/\r\n\r\n    .counter-group {\r\n\r\n        width: 100%;\r\n\r\n        display: flex;\r\n\r\n        flex-direction: column;\r\n\r\n        align-items: center;\r\n\r\n        justify-content: center;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       15\r\n    ===================================================== *\/\r\n\r\n    .counter-group:first-child {\r\n\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       300\r\n    ===================================================== *\/\r\n\r\n    .counter-group.blue {\r\n\r\n        margin-top: 5px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       CHIFFRES MOBILE\r\n    ===================================================== *\/\r\n\r\n    .digits {\r\n\r\n        gap: 4px;\r\n\r\n        justify-content: center;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       CARTONS MOBILE\r\n    ===================================================== *\/\r\n\r\n    .card {\r\n\r\n        width: clamp(55px, 17vw, 75px);\r\n\r\n        height: clamp(75px, 22vw, 95px);\r\n\r\n        border-radius: 7px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       HAUTEUR CHIFFRES\r\n    ===================================================== *\/\r\n\r\n    .number {\r\n\r\n        height: clamp(75px, 22vw, 95px);\r\n\r\n        min-height: clamp(75px, 22vw, 95px);\r\n\r\n        font-size: clamp(55px, 17vw, 78px);\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       DEUX-POINTS ENTRE LES COMPTEURS\r\n    ===================================================== *\/\r\n\r\n    .separator {\r\n\r\n        display: block;\r\n\r\n        height: 30px;\r\n\r\n        margin: 0;\r\n\r\n        font-size: 30px;\r\n\r\n        line-height: 30px;\r\n\r\n        transform: rotate(90deg);\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       TEXTES\r\n    ===================================================== *\/\r\n\r\n    .caption {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 300px;\r\n\r\n        margin-top: 9px;\r\n\r\n        padding: 0 10px;\r\n\r\n        white-space: normal;\r\n\r\n        font-size: 8px;\r\n\r\n        line-height: 1.25;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PETIT MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .counter-banner {\r\n\r\n        min-height: 400px;\r\n\r\n        padding: 30px 12px 35px;\r\n    }\r\n\r\n\r\n    .card {\r\n\r\n        width: 58px;\r\n\r\n        height: 76px;\r\n    }\r\n\r\n\r\n    .number {\r\n\r\n        height: 76px;\r\n\r\n        min-height: 76px;\r\n\r\n        font-size: 58px;\r\n    }\r\n\r\n\r\n    .digits {\r\n\r\n        gap: 3px;\r\n    }\r\n\r\n\r\n    .separator {\r\n\r\n        height: 26px;\r\n\r\n        font-size: 26px;\r\n\r\n        line-height: 26px;\r\n    }\r\n\r\n\r\n    .caption {\r\n\r\n        max-width: 270px;\r\n\r\n        font-size: 7px;\r\n\r\n        margin-top: 8px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<!-- =========================================================\r\n     BANDEAU\r\n========================================================= -->\r\n\r\n<div class=\"counter-banner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         15 \u2014 EN HAUT SUR MOBILE\r\n    ====================================================== -->\r\n\r\n    <div class=\"counter-group\">\r\n\r\n        <div class=\"digits\">\r\n\r\n\r\n            <div class=\"card\">\r\n\r\n                <div class=\"window\">\r\n\r\n                    <div\r\n                        class=\"roller\"\r\n                        data-number=\"1\"\r\n                        data-speed=\"1800\">\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"card\">\r\n\r\n                <div class=\"window\">\r\n\r\n                    <div\r\n                        class=\"roller\"\r\n                        data-number=\"5\"\r\n                        data-speed=\"2300\">\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"caption red-text\">\r\n\r\n            D\u00c9J\u00c0 15 ANN\u00c9ES D'EXP\u00c9RIENCES\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         S\u00c9PARATEUR\r\n    ====================================================== -->\r\n\r\n    <div class=\"separator\">\r\n        :\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         300 \u2014 EN BAS SUR MOBILE\r\n    ====================================================== -->\r\n\r\n    <div class=\"counter-group blue\">\r\n\r\n        <div class=\"digits\">\r\n\r\n\r\n            <div class=\"card\">\r\n\r\n                <div class=\"window\">\r\n\r\n                    <div\r\n                        class=\"roller\"\r\n                        data-number=\"3\"\r\n                        data-speed=\"2700\">\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"card\">\r\n\r\n                <div class=\"window\">\r\n\r\n                    <div\r\n                        class=\"roller\"\r\n                        data-number=\"0\"\r\n                        data-speed=\"3200\">\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"card\">\r\n\r\n                <div class=\"window\">\r\n\r\n                    <div\r\n                        class=\"roller\"\r\n                        data-number=\"0\"\r\n                        data-speed=\"3700\">\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"caption blue-text\">\r\n\r\n            + DE 300 PROJETS R\u00c9ALIS\u00c9S, DANS TOUTE L'EUROPE\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =========================================================\r\n   ANIMATION DES COMPTEURS\r\n========================================================= *\/\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n    const banner =\r\n        document.querySelector(\".counter-banner\");\r\n\r\n    const rollers =\r\n        document.querySelectorAll(\".roller\");\r\n\r\n    let animationRunning = false;\r\n\r\n\r\n    \/* =====================================================\r\n       LANCER LES COMPTEURS\r\n    ===================================================== *\/\r\n\r\n    function startCounters() {\r\n\r\n        if (animationRunning) {\r\n            return;\r\n        }\r\n\r\n        animationRunning = true;\r\n\r\n\r\n        rollers.forEach(function (roller, index) {\r\n\r\n            roller.innerHTML = \"\";\r\n\r\n\r\n            const finalNumber =\r\n                parseInt(\r\n                    roller.dataset.number\r\n                );\r\n\r\n\r\n            const speed =\r\n                parseInt(\r\n                    roller.dataset.speed\r\n                );\r\n\r\n\r\n            const rounds =\r\n                3 + index;\r\n\r\n\r\n            let numbers = [];\r\n\r\n\r\n            \/* ==============================================\r\n               TOURS\r\n            ============================================== *\/\r\n\r\n            for (\r\n                let round = 0;\r\n                round < rounds;\r\n                round++\r\n            ) {\r\n\r\n                for (\r\n                    let number = 0;\r\n                    number <= 9;\r\n                    number++\r\n                ) {\r\n\r\n                    numbers.push(number);\r\n\r\n                }\r\n\r\n            }\r\n\r\n\r\n            numbers.push(finalNumber);\r\n\r\n\r\n            \/* ==============================================\r\n               CR\u00c9ATION\r\n            ============================================== *\/\r\n\r\n            numbers.forEach(function (number) {\r\n\r\n                const element =\r\n                    document.createElement(\"div\");\r\n\r\n                element.className =\r\n                    \"number\";\r\n\r\n                element.textContent =\r\n                    number;\r\n\r\n                roller.appendChild(element);\r\n\r\n            });\r\n\r\n\r\n            const digitHeight =\r\n                roller\r\n                    .querySelector(\".number\")\r\n                    .offsetHeight;\r\n\r\n\r\n            const finalPosition =\r\n                -(\r\n                    (numbers.length - 1)\r\n                    *\r\n                    digitHeight\r\n                );\r\n\r\n\r\n            \/* ==============================================\r\n               RESET\r\n            ============================================== *\/\r\n\r\n            roller.style.transition =\r\n                \"none\";\r\n\r\n            roller.style.transform =\r\n                \"translateY(0)\";\r\n\r\n            roller.offsetHeight;\r\n\r\n\r\n            \/* ==============================================\r\n               ANIMATION\r\n            ============================================== *\/\r\n\r\n            setTimeout(function () {\r\n\r\n                roller.style.transition =\r\n                    \"transform \"\r\n                    + speed\r\n                    + \"ms cubic-bezier(0.12, 0.75, 0.18, 1)\";\r\n\r\n                roller.style.transform =\r\n                    \"translateY(\"\r\n                    + finalPosition\r\n                    + \"px)\";\r\n\r\n            }, 100 + (index * 100));\r\n\r\n        });\r\n\r\n\r\n        \/* ==============================================\r\n           FIN\r\n        ============================================== *\/\r\n\r\n        const longestSpeed =\r\n            Math.max(\r\n                ...Array.from(rollers).map(\r\n                    function (roller) {\r\n\r\n                        return parseInt(\r\n                            roller.dataset.speed\r\n                        );\r\n\r\n                    }\r\n                )\r\n            );\r\n\r\n\r\n        setTimeout(function () {\r\n\r\n            animationRunning = false;\r\n\r\n        }, longestSpeed + 800);\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       OBSERVER\r\n    ===================================================== *\/\r\n\r\n    const observer =\r\n        new IntersectionObserver(\r\n\r\n            function (entries) {\r\n\r\n                entries.forEach(function (entry) {\r\n\r\n                    if (entry.isIntersecting) {\r\n\r\n                        startCounters();\r\n\r\n                    } else {\r\n\r\n                        animationRunning = false;\r\n\r\n                    }\r\n\r\n                });\r\n\r\n            },\r\n\r\n            {\r\n                threshold: 0.3\r\n            }\r\n\r\n        );\r\n\r\n\r\n    observer.observe(banner);\r\n\r\n});\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-a93e83b e-con e-atomic-element e-flexbox-base e-d7cf8d3 \" data-id=\"a93e83b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a93e83b\">\n    \t\t<div class=\"elementor-element elementor-element-fdb372f elementor-widget elementor-widget-html\" data-id=\"fdb372f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     POLICES\r\n========================================= -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link\r\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=Hammersmith+One&family=Montserrat:wght@400;500;600&display=swap\"\r\n    rel=\"stylesheet\"\r\n>\r\n\r\n\r\n<!-- =========================================\r\n     CALENDLY\r\n========================================= -->\r\n\r\n<link\r\n    href=\"https:\/\/assets.calendly.com\/assets\/external\/widget.css\"\r\n    rel=\"stylesheet\"\r\n>\r\n\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   RESET\r\n===================================================== *\/\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nhtml,\r\nbody {\r\n    margin: 0;\r\n    padding: 0;\r\n    overflow-x: hidden;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SECTION\r\n===================================================== *\/\r\n\r\n.process-section {\r\n\r\n    width: 100vw;\r\n\r\n    margin-left: calc(50% - 50vw);\r\n\r\n    min-height: 780px;\r\n\r\n    background: #0A0A0A;\r\n\r\n    color: #fff;\r\n\r\n    overflow: hidden;\r\n\r\n    position: relative;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE \u2014 PC\r\n===================================================== *\/\r\n\r\n.process-mobile-heading {\r\n\r\n    display: block;\r\n\r\n    position: absolute;\r\n\r\n    top: 15px;\r\n    right: 0;\r\n\r\n    z-index: 20;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    color: #E51616;\r\n\r\n    font-family: 'Hammersmith One', sans-serif;\r\n\r\n    font-size: 30px;\r\n    font-weight: 400;\r\n\r\n    line-height: 1.2;\r\n\r\n    text-align: right;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENEUR\r\n===================================================== *\/\r\n\r\n.process-container {\r\n\r\n    position: relative;\r\n\r\n    width: min(1280px, 94vw);\r\n\r\n    height: 780px;\r\n\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   \u00c9TAPES\r\n===================================================== *\/\r\n\r\n.process-step {\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n\r\n    width: 100%;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   POSITIONS DES \u00c9TAPES\r\n===================================================== *\/\r\n\r\n.process-step:nth-child(1) {\r\n\r\n    top: 85px;\r\n\r\n    --color: #0875c9;\r\n}\r\n\r\n.process-step:nth-child(2) {\r\n\r\n    top: 315px;\r\n\r\n    --color: #ffffff;\r\n}\r\n\r\n.process-step:nth-child(3) {\r\n\r\n    top: 545px;\r\n\r\n    --color: #ed1117;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CARTON NUM\u00c9RO\r\n===================================================== *\/\r\n\r\n.process-number {\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n    top: 0;\r\n\r\n    width: 36px;\r\n    height: 89px;\r\n\r\n    padding: 0;\r\n    margin: 0;\r\n\r\n    background: transparent;\r\n\r\n    border: 2px solid var(--color);\r\n\r\n    clip-path: polygon(\r\n        5px 0,\r\n        100% 0,\r\n        100% 100%,\r\n        5px 100%,\r\n        0 calc(100% - 5px),\r\n        0 5px\r\n    );\r\n\r\n    display: block;\r\n\r\n    color: transparent;\r\n\r\n    font-size: 0;\r\n\r\n    z-index: 10;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LIGNE BASSE\r\n===================================================== *\/\r\n\r\n.process-number::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 6px;\r\n    right: 6px;\r\n    bottom: 7px;\r\n\r\n    height: 2px;\r\n\r\n    background: var(--color);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   NUM\u00c9RO\r\n===================================================== *\/\r\n\r\n.process-number::before {\r\n\r\n    content: attr(data-number);\r\n\r\n    position: absolute;\r\n\r\n    left: 50%;\r\n    top: 50%;\r\n\r\n    transform: translate(-50%, -50%);\r\n\r\n    color: #f4f4f4;\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 48px;\r\n\r\n    font-weight: 500;\r\n\r\n    line-height: 1;\r\n\r\n    z-index: 20;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENU\r\n===================================================== *\/\r\n\r\n.process-content {\r\n\r\n    position: absolute;\r\n\r\n    left: 55px;\r\n    top: 0;\r\n\r\n    width: calc(100% - 55px);\r\n\r\n    min-width: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE DES \u00c9TAPES\r\n===================================================== *\/\r\n\r\n.process-title {\r\n\r\n    position: relative;\r\n\r\n    height: 42px;\r\n\r\n    margin: 27px 0 0 0;\r\n\r\n    padding: 0 0 0 95px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: flex-start;\r\n\r\n    color: #fff;\r\n\r\n    font-family: 'Hammersmith One', sans-serif;\r\n\r\n    font-size: 24px;\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 42px;\r\n\r\n    white-space: nowrap;\r\n\r\n    z-index: 5;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LONGUEUR DES CORDES\r\n===================================================== *\/\r\n\r\n.process-step:nth-child(1) .process-title {\r\n\r\n    width: calc(100% + 20px);\r\n\r\n    margin-left: -20px;\r\n}\r\n\r\n.process-step:nth-child(2) .process-title {\r\n\r\n    width: 88%;\r\n\r\n    margin-left: -20px;\r\n}\r\n\r\n.process-step:nth-child(3) .process-title {\r\n\r\n    width: 73%;\r\n\r\n    margin-left: -20px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CORDE PRINCIPALE\r\n===================================================== *\/\r\n\r\n.process-title::before {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n    top: 0;\r\n\r\n    width: calc(100% - 34px);\r\n\r\n    height: 42px;\r\n\r\n    background: var(--color);\r\n\r\n    z-index: -1;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   FIN DE CORDE\r\n===================================================== *\/\r\n\r\n.process-title::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    right: 0;\r\n    top: 0;\r\n\r\n    width: 35px;\r\n    height: 42px;\r\n\r\n    background: var(--color);\r\n\r\n    clip-path: polygon(\r\n        0 0,\r\n        100% 0,\r\n        0 100%\r\n    );\r\n\r\n    z-index: -1;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE SUR CORDE BLANCHE\r\n===================================================== *\/\r\n\r\n.process-step:nth-child(2) .process-title {\r\n\r\n    color: #111;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TEXTE\r\n===================================================== *\/\r\n\r\n.process-text {\r\n\r\n    width: 100%;\r\n\r\n    margin: 22px 0 0 0;\r\n\r\n    padding: 0;\r\n\r\n    color: #dedede;\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 16px;\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 1.48;\r\n\r\n    text-align: left;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOUTON\r\n===================================================== *\/\r\n\r\n.process-button {\r\n\r\n    position: absolute;\r\n\r\n    right: 0;\r\n\r\n    bottom: 50px;\r\n\r\n    z-index: 50;\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    min-width: 245px;\r\n\r\n    height: 52px;\r\n\r\n    padding: 0 28px;\r\n\r\n    background: #ed1117;\r\n\r\n    color: #fff !important;\r\n\r\n    border: none;\r\n\r\n    font-family: 'Hammersmith One', sans-serif;\r\n\r\n    font-size: 18px;\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 1;\r\n\r\n    text-decoration: none !important;\r\n\r\n    text-transform: uppercase;\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        background-color 0.2s ease,\r\n        transform 0.2s ease;\r\n}\r\n\r\n\r\n.process-button:hover {\r\n\r\n    background: #c90d12;\r\n\r\n    color: #fff !important;\r\n\r\n    transform: translateY(-2px);\r\n}\r\n\r\n\r\n.process-button:active {\r\n\r\n    background: #a90b10;\r\n\r\n    transform: translateY(0);\r\n}\r\n\r\n\r\n.process-button:focus,\r\n.process-button:focus-visible {\r\n\r\n    outline: none !important;\r\n\r\n    box-shadow: none !important;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   GRAND \u00c9CRAN\r\n===================================================== *\/\r\n\r\n@media (min-width: 1440px) {\r\n\r\n    .process-section {\r\n\r\n        min-height: 810px;\r\n    }\r\n\r\n    .process-container {\r\n\r\n        width: 1320px;\r\n\r\n        height: 810px;\r\n    }\r\n\r\n    .process-mobile-heading {\r\n\r\n        top: 15px;\r\n\r\n        right: max(\r\n            0px,\r\n            calc((100vw - 1320px) \/ 2)\r\n        );\r\n    }\r\n\r\n    .process-step:nth-child(1) {\r\n\r\n        top: 85px;\r\n    }\r\n\r\n    .process-step:nth-child(2) {\r\n\r\n        top: 315px;\r\n    }\r\n\r\n    .process-step:nth-child(3) {\r\n\r\n        top: 555px;\r\n    }\r\n\r\n    .process-content {\r\n\r\n        left: 60px;\r\n\r\n        width: calc(100% - 60px);\r\n    }\r\n\r\n    .process-title {\r\n\r\n        padding-left: 105px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLETTE\r\n===================================================== *\/\r\n\r\n@media (min-width: 701px) and (max-width: 1023px) {\r\n\r\n    .process-section {\r\n\r\n        min-height: 780px;\r\n    }\r\n\r\n    .process-container {\r\n\r\n        width: 94vw;\r\n\r\n        height: 780px;\r\n    }\r\n\r\n    .process-mobile-heading {\r\n\r\n        top: 15px;\r\n\r\n        right: 3vw;\r\n\r\n        font-size: 28px;\r\n    }\r\n\r\n    .process-step:nth-child(1) {\r\n\r\n        top: 80px;\r\n    }\r\n\r\n    .process-step:nth-child(2) {\r\n\r\n        top: 305px;\r\n    }\r\n\r\n    .process-step:nth-child(3) {\r\n\r\n        top: 530px;\r\n    }\r\n\r\n    .process-title {\r\n\r\n        font-size: 28px;\r\n\r\n        padding-left: 75px;\r\n    }\r\n\r\n    .process-content {\r\n\r\n        left: 50px;\r\n\r\n        width: calc(100% - 50px);\r\n    }\r\n\r\n    .process-step:nth-child(1) .process-title {\r\n\r\n        width: calc(100% + 10px);\r\n\r\n        margin-left: -10px;\r\n    }\r\n\r\n    .process-step:nth-child(2) .process-title {\r\n\r\n        width: 90%;\r\n\r\n        margin-left: -10px;\r\n    }\r\n\r\n    .process-step:nth-child(3) .process-title {\r\n\r\n        width: 75%;\r\n\r\n        margin-left: -10px;\r\n    }\r\n\r\n    .process-text {\r\n\r\n        font-size: 15px;\r\n\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .process-button {\r\n\r\n        right: 20px;\r\n\r\n        bottom: 45px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .process-section {\r\n\r\n        width: 100%;\r\n\r\n        margin-left: 0;\r\n\r\n        min-height: auto;\r\n\r\n        padding: 0 20px 55px;\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n\r\n    \/* ---------------------------------------------\r\n       TITRE MOBILE\r\n    --------------------------------------------- *\/\r\n\r\n    .process-mobile-heading {\r\n\r\n        position: relative;\r\n\r\n        top: auto;\r\n        right: auto;\r\n\r\n        display: block;\r\n\r\n        width: 100%;\r\n\r\n        margin: 0;\r\n\r\n        padding: 30px 0 22px;\r\n\r\n        color: #e51616;\r\n\r\n        font-family: 'Hammersmith One', sans-serif;\r\n\r\n        font-size: 24px;\r\n\r\n        font-weight: 400;\r\n\r\n        line-height: 1.2;\r\n\r\n        text-align: center;\r\n\r\n        white-space: normal;\r\n    }\r\n\r\n\r\n    \/* ---------------------------------------------\r\n       CONTENEUR\r\n    --------------------------------------------- *\/\r\n\r\n    .process-container {\r\n\r\n        position: relative;\r\n\r\n        width: 100%;\r\n\r\n        max-width: 540px;\r\n\r\n        height: auto;\r\n\r\n        margin: 0 auto;\r\n\r\n        transform: none;\r\n    }\r\n\r\n\r\n    \/* ---------------------------------------------\r\n       \u00c9TAPES\r\n    --------------------------------------------- *\/\r\n\r\n    .process-step {\r\n\r\n        position: relative;\r\n\r\n        left: auto;\r\n\r\n        top: auto !important;\r\n\r\n        width: 100%;\r\n\r\n        margin: 0 0 50px;\r\n\r\n        padding: 0 0 0 52px;\r\n    }\r\n\r\n    .process-step:last-of-type {\r\n\r\n        margin-bottom: 45px;\r\n    }\r\n\r\n\r\n    \/* ---------------------------------------------\r\n       NUM\u00c9RO\r\n    --------------------------------------------- *\/\r\n\r\n    .process-number {\r\n\r\n        left: 0;\r\n\r\n        top: 0;\r\n\r\n        width: 36px;\r\n\r\n        height: 82px;\r\n    }\r\n\r\n    .process-number::before {\r\n\r\n        font-size: 42px;\r\n    }\r\n\r\n\r\n    \/* ---------------------------------------------\r\n       CONTENU\r\n    --------------------------------------------- *\/\r\n\r\n    .process-content {\r\n\r\n        position: relative;\r\n\r\n        left: auto;\r\n\r\n        top: auto;\r\n\r\n        width: 100%;\r\n    }\r\n\r\n\r\n    \/* ---------------------------------------------\r\n       TITRES DES \u00c9TAPES\r\n    --------------------------------------------- *\/\r\n\r\n    .process-title,\r\n    .process-step:nth-child(1) .process-title,\r\n    .process-step:nth-child(2) .process-title,\r\n    .process-step:nth-child(3) .process-title {\r\n\r\n        width: 100%;\r\n\r\n        height: auto;\r\n\r\n        min-height: 38px;\r\n\r\n        margin: 0 0 18px -15px;\r\n\r\n        padding: 7px 18px 7px 22px;\r\n\r\n        display: flex;\r\n\r\n        align-items: center;\r\n\r\n        font-size: 23px;\r\n\r\n        line-height: 1.15;\r\n\r\n        white-space: normal;\r\n    }\r\n\r\n    .process-title::before {\r\n\r\n        height: 100%;\r\n\r\n        width: calc(100% - 25px);\r\n    }\r\n\r\n    .process-title::after {\r\n\r\n        width: 26px;\r\n\r\n        height: 100%;\r\n    }\r\n\r\n\r\n    \/* ---------------------------------------------\r\n       TEXTES\r\n    --------------------------------------------- *\/\r\n\r\n    .process-text {\r\n\r\n        width: 100%;\r\n\r\n        margin: 0;\r\n\r\n        font-size: 15px;\r\n\r\n        line-height: 1.6;\r\n\r\n        text-align: left;\r\n    }\r\n\r\n\r\n    \/* ---------------------------------------------\r\n       BOUTON\r\n    --------------------------------------------- *\/\r\n\r\n    .process-button {\r\n\r\n        position: relative;\r\n\r\n        right: auto;\r\n\r\n        bottom: auto;\r\n\r\n        width: 100%;\r\n\r\n        max-width: 280px;\r\n\r\n        min-width: 0;\r\n\r\n        height: 50px;\r\n\r\n        margin: 0 auto;\r\n\r\n        padding: 0 20px;\r\n\r\n        display: flex;\r\n\r\n        font-size: 16px;\r\n\r\n        transform: none;\r\n    }\r\n\r\n    .process-button:hover {\r\n\r\n        transform: translateY(-2px);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PETIT MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .process-section {\r\n\r\n        padding-left: 15px;\r\n\r\n        padding-right: 15px;\r\n    }\r\n\r\n    .process-mobile-heading {\r\n\r\n        font-size: 23px;\r\n\r\n        padding-top: 28px;\r\n\r\n        padding-bottom: 20px;\r\n    }\r\n\r\n    .process-step {\r\n\r\n        padding-left: 47px;\r\n\r\n        margin-bottom: 42px;\r\n    }\r\n\r\n    .process-number {\r\n\r\n        width: 34px;\r\n\r\n        height: 76px;\r\n    }\r\n\r\n    .process-number::before {\r\n\r\n        font-size: 38px;\r\n    }\r\n\r\n    .process-title,\r\n    .process-step:nth-child(1) .process-title,\r\n    .process-step:nth-child(2) .process-title,\r\n    .process-step:nth-child(3) .process-title {\r\n\r\n        margin-left: -12px;\r\n\r\n        padding-left: 18px;\r\n\r\n        padding-right: 15px;\r\n\r\n        font-size: 21px;\r\n    }\r\n\r\n    .process-text {\r\n\r\n        font-size: 14px;\r\n\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .process-button {\r\n\r\n        max-width: 260px;\r\n\r\n        font-size: 15px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CALENDLY POPUP \u2014 MOBILE\r\n   EMP\u00caCHE LA LARGEUR BLANCHE\r\n===================================================== *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .calendly-overlay {\r\n\r\n        width: 100vw !important;\r\n\r\n        max-width: 100vw !important;\r\n\r\n        left: 0 !important;\r\n\r\n        right: 0 !important;\r\n\r\n        margin: 0 !important;\r\n\r\n        padding: 0 !important;\r\n\r\n        overflow: hidden !important;\r\n    }\r\n\r\n    .calendly-overlay .calendly-popup {\r\n\r\n        width: 100vw !important;\r\n\r\n        max-width: 100vw !important;\r\n\r\n        min-width: 0 !important;\r\n\r\n        left: 0 !important;\r\n\r\n        right: auto !important;\r\n\r\n        margin: 0 !important;\r\n\r\n        border-radius: 0 !important;\r\n\r\n        overflow: hidden !important;\r\n    }\r\n\r\n    .calendly-overlay .calendly-popup-content {\r\n\r\n        width: 100% !important;\r\n\r\n        max-width: 100% !important;\r\n\r\n        min-width: 0 !important;\r\n\r\n        overflow: hidden !important;\r\n    }\r\n\r\n    .calendly-overlay iframe {\r\n\r\n        width: 100% !important;\r\n\r\n        max-width: 100% !important;\r\n\r\n        min-width: 0 !important;\r\n\r\n        border: 0 !important;\r\n\r\n        display: block !important;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ACCESSIBILIT\u00c9\r\n===================================================== *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .process-button {\r\n\r\n        transition: none;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =================================================\r\n     SECTION\r\n================================================= -->\r\n\r\n<section class=\"process-section\">\r\n\r\n\r\n    <!-- =================================================\r\n         TITRE\r\n    ================================================= -->\r\n\r\n    <div class=\"process-mobile-heading\">\r\n        COMMENT \u00c7A SE PASSE ?\r\n    <\/div>\r\n\r\n\r\n    <div class=\"process-container\">\r\n\r\n\r\n        <!-- =================================================\r\n             1 \u2014 RDV D\u00c9COUVERTE\r\n        ================================================= -->\r\n\r\n        <article class=\"process-step\">\r\n\r\n            <div\r\n                class=\"process-number\"\r\n                data-number=\"1\"\r\n                aria-hidden=\"true\">\r\n            <\/div>\r\n\r\n            <div class=\"process-content\">\r\n\r\n                <h2 class=\"process-title\">\r\n                    RDV D\u00c9COUVERTE\r\n                <\/h2>\r\n\r\n                <p class=\"process-text\">\r\n                    Chaque projet commence par un \u00e9change t\u00e9l\u00e9phonique o\u00f9 nous prenons le temps de\r\n                    comprendre votre besoin, vos objectifs et votre univers. Nous d\u00e9finissons ensemble\r\n                    votre budget, le style souhait\u00e9, les contraintes techniques ainsi que le d\u00e9lai de\r\n                    livraison. Cette premi\u00e8re \u00e9tape nous permet d\u2019\u00e9tablir un cahier des charges pr\u00e9cis\r\n                    pour concevoir une prestation enti\u00e8rement adapt\u00e9e \u00e0 votre projet.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/article>\r\n\r\n\r\n        <!-- =================================================\r\n             2 \u2014 CONCEPTION SUR MESURE\r\n        ================================================= -->\r\n\r\n        <article class=\"process-step\">\r\n\r\n            <div\r\n                class=\"process-number\"\r\n                data-number=\"2\"\r\n                aria-hidden=\"true\">\r\n            <\/div>\r\n\r\n            <div class=\"process-content\">\r\n\r\n                <h2 class=\"process-title\">\r\n                    CONCEPTION SUR MESURE\r\n                <\/h2>\r\n\r\n                <p class=\"process-text\">\r\n                    Apr\u00e8s validation du devis et versement d\u2019un acompte de 50%, notre \u00e9quipe imagine et\r\n                    r\u00e9alise vos d\u00e9cors personnalis\u00e9s. Chaque cr\u00e9ation est con\u00e7ue sur mesure selon les\r\n                    dimensions de votre espace (hauteur des murs, largeur de la pi\u00e8ce, configuration du\r\n                    lieu), votre identit\u00e9 visuelle, vos couleurs, votre logo et toutes les informations\r\n                    recueillies lors du rendez-vous.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/article>\r\n\r\n\r\n        <!-- =================================================\r\n             3 \u2014 LIVRAISON ET INSTALLATION\r\n        ================================================= -->\r\n\r\n        <article class=\"process-step\">\r\n\r\n            <div\r\n                class=\"process-number\"\r\n                data-number=\"3\"\r\n                aria-hidden=\"true\">\r\n            <\/div>\r\n\r\n            <div class=\"process-content\">\r\n\r\n                <h2 class=\"process-title\">\r\n                    LIVRAISON ET INSTALLATION\r\n                <\/h2>\r\n\r\n                <p class=\"process-text\">\r\n                    Nous assurons la livraison, l\u2019installation et la mise en place de votre d\u00e9cor \u00e0 la\r\n                    date, \u00e0 l\u2019heure, et sur le lieu convenus. Notre \u00e9quipe s\u2019occupe de chaque d\u00e9tail afin\r\n                    de garantir un rendu impeccable. Vous n\u2019avez qu\u2019\u00e0 entrer dans l\u2019ar\u00e8ne.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/article>\r\n\r\n\r\n        <!-- =================================================\r\n             BOUTON\r\n             OUVRE LE POPUP CALENDLY\r\n        ================================================= -->\r\n\r\n        <a\r\n            href=\"#\"\r\n            class=\"process-button\"\r\n            onclick=\"Calendly.initPopupWidget({\r\n                url: 'https:\/\/calendly.com\/haglerprod\/30min?background_color=0a0a0a&text_color=ffffff&primary_color=0d64b1'\r\n            }); return false;\"\r\n        >\r\n            RESERVER UN RDV\r\n        <\/a>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =================================================\r\n     SCRIPT CALENDLY\r\n================================================= -->\r\n\r\n<script\r\n    src=\"https:\/\/assets.calendly.com\/assets\/external\/widget.js\"\r\n    async>\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-e7ec060 e-con e-atomic-element e-flexbox-base e-12f439d \" data-id=\"e7ec060\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e7ec060\">\n    \t\t<div class=\"elementor-element elementor-element-077b0ca elementor-widget elementor-widget-html\" data-id=\"077b0ca\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"atelier-entreprise\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     CALENDLY\r\n========================================= -->\r\n\r\n<link\r\n    href=\"https:\/\/assets.calendly.com\/assets\/external\/widget.css\"\r\n    rel=\"stylesheet\"\r\n>\r\n\r\n\r\n<style>\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Hammersmith+One&family=Montserrat:wght@400;500;600&display=swap');\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   HERO\r\n========================================= *\/\r\n\r\n.cineprod-hero {\r\n    position: relative;\r\n\r\n    width: 100vw;\r\n    margin-left: calc(50% - 50vw);\r\n\r\n    background: #0A0A0A;\r\n\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n    overflow: hidden;\r\n\r\n    isolation: isolate;\r\n    clip-path: inset(0);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   IMAGE\r\n========================================= *\/\r\n\r\n.cineprod-hero img {\r\n    display: block;\r\n\r\n    width: 75%;\r\n    max-width: 100%;\r\n    height: auto;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    border: none;\r\n    outline: none;\r\n    box-shadow: none;\r\n\r\n    -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TITRE\r\n========================================= *\/\r\n\r\n.cineprod-label {\r\n    position: absolute;\r\n\r\n    top: 8%;\r\n    left: 12.5%;\r\n\r\n    z-index: 5;\r\n\r\n    display: inline-block;\r\n\r\n    width: auto;\r\n    height: auto;\r\n\r\n    padding: 18px 30px;\r\n\r\n    background: #0D64B1;\r\n    color: #FBFBFB;\r\n\r\n    font-family: \"Hammersmith One\", sans-serif;\r\n\r\n    font-size: 30px;\r\n    font-weight: 400;\r\n\r\n    line-height: 1.25;\r\n\r\n    white-space: nowrap;\r\n\r\n    border: none;\r\n    outline: none;\r\n    box-shadow: none;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   BOUTON\r\n   OUVRE LE POPUP CALENDLY\r\n========================================= *\/\r\n\r\n.cineprod-btn {\r\n    position: absolute;\r\n\r\n    right: max(30px, calc((100vw - 1280px) \/ 2));\r\n    bottom: 50px;\r\n\r\n    z-index: 5;\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    min-width: 245px;\r\n\r\n    height: 52px;\r\n\r\n    padding: 0 28px;\r\n\r\n    background: #0D64B1;\r\n    color: #FFFFFF !important;\r\n\r\n    font-family: \"Hammersmith One\", sans-serif;\r\n\r\n    font-size: 18px;\r\n    font-weight: 400;\r\n\r\n    line-height: 1;\r\n\r\n    text-align: center;\r\n    text-decoration: none !important;\r\n    text-transform: uppercase;\r\n\r\n    white-space: nowrap;\r\n\r\n    border: none;\r\n    outline: none;\r\n    box-shadow: none;\r\n\r\n    border-radius: 0;\r\n\r\n    cursor: pointer;\r\n\r\n    -webkit-tap-highlight-color: transparent;\r\n\r\n    transition:\r\n        background-color 0.3s ease,\r\n        transform 0.3s ease;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   HOVER\r\n========================================= *\/\r\n\r\n.cineprod-btn:hover {\r\n    background: #094A83;\r\n    color: #FFFFFF !important;\r\n\r\n    text-decoration: none !important;\r\n\r\n    transform: translateY(-3px);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   CLIC\r\n========================================= *\/\r\n\r\n.cineprod-btn:active {\r\n    background: #073B68;\r\n    color: #FFFFFF !important;\r\n\r\n    transform: translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   FOCUS\r\n========================================= *\/\r\n\r\n.cineprod-btn:focus,\r\n.cineprod-btn:focus-visible {\r\n    outline: none !important;\r\n    box-shadow: none !important;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   GRAND \u00c9CRAN\r\n========================================= *\/\r\n\r\n@media (min-width: 1440px) {\r\n\r\n    .cineprod-btn {\r\n        right: max(30px, calc((100vw - 1320px) \/ 2));\r\n        bottom: 50px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TABLETTE\r\n   768 \u2192 1024 PX\r\n========================================= *\/\r\n\r\n@media (min-width: 768px) and (max-width: 1024px) {\r\n\r\n    .cineprod-hero img {\r\n        width: 85%;\r\n    }\r\n\r\n    .cineprod-label {\r\n        top: 6%;\r\n        left: 7.5%;\r\n\r\n        padding: 14px 25px;\r\n\r\n        font-size: 30px;\r\n        line-height: 1.25;\r\n    }\r\n\r\n    .cineprod-btn {\r\n        right: 7.5%;\r\n        bottom: 6%;\r\n\r\n        min-width: 240px;\r\n\r\n        height: 52px;\r\n\r\n        padding: 0 26px;\r\n\r\n        font-size: 17px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   MOBILE\r\n   481 \u2192 767 PX\r\n========================================= *\/\r\n\r\n@media (min-width: 481px) and (max-width: 767px) {\r\n\r\n    .cineprod-hero {\r\n        width: 100%;\r\n        margin-left: 0;\r\n\r\n        display: flex;\r\n        flex-direction: column;\r\n\r\n        justify-content: flex-start;\r\n        align-items: center;\r\n\r\n        background: #0A0A0A;\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n\r\n    \/* TITRE *\/\r\n\r\n    .cineprod-label {\r\n        position: relative;\r\n\r\n        top: auto;\r\n        left: auto;\r\n\r\n        z-index: 5;\r\n\r\n        order: 1;\r\n\r\n        display: block;\r\n\r\n        width: 100%;\r\n\r\n        padding: 15px 10px;\r\n\r\n        background: transparent;\r\n        color: #FBFBFB;\r\n\r\n        font-family: \"Hammersmith One\", sans-serif;\r\n\r\n        font-size: 24px;\r\n        font-weight: 400;\r\n\r\n        line-height: 1.25;\r\n\r\n        text-align: center;\r\n\r\n        white-space: normal;\r\n    }\r\n\r\n\r\n    \/* IMAGE *\/\r\n\r\n    .cineprod-hero img {\r\n        width: 100%;\r\n        max-width: 100%;\r\n\r\n        order: 2;\r\n    }\r\n\r\n\r\n    \/* BOUTON *\/\r\n\r\n    .cineprod-btn {\r\n        position: absolute;\r\n\r\n        right: auto;\r\n        left: 50%;\r\n        bottom: 20px;\r\n\r\n        z-index: 10;\r\n\r\n        min-width: 240px;\r\n\r\n        height: auto;\r\n\r\n        padding: 18px 30px;\r\n\r\n        font-size: 18px;\r\n\r\n        line-height: 1.1;\r\n\r\n        transform: translateX(-50%);\r\n    }\r\n\r\n    .cineprod-btn:hover {\r\n        transform: translateX(-50%) translateY(-3px);\r\n    }\r\n\r\n    .cineprod-btn:active {\r\n        transform: translateX(-50%);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   PETIT MOBILE\r\n   \u2264 480 PX\r\n========================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .cineprod-hero {\r\n        width: 100%;\r\n        margin-left: 0;\r\n\r\n        display: flex;\r\n        flex-direction: column;\r\n\r\n        justify-content: flex-start;\r\n        align-items: center;\r\n\r\n        background: #0A0A0A;\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n\r\n    \/* TITRE *\/\r\n\r\n    .cineprod-label {\r\n        position: relative;\r\n\r\n        top: auto;\r\n        left: auto;\r\n\r\n        z-index: 5;\r\n\r\n        order: 1;\r\n\r\n        display: block;\r\n\r\n        width: 100%;\r\n\r\n        padding: 15px 10px;\r\n\r\n        background: transparent;\r\n        color: #FBFBFB;\r\n\r\n        font-family: \"Hammersmith One\", sans-serif;\r\n\r\n        font-size: 24px;\r\n\r\n        font-weight: 400;\r\n\r\n        line-height: 1.25;\r\n\r\n        text-align: center;\r\n\r\n        white-space: normal;\r\n    }\r\n\r\n\r\n    \/* IMAGE *\/\r\n\r\n    .cineprod-hero img {\r\n        width: 100%;\r\n        max-width: 100%;\r\n\r\n        order: 2;\r\n    }\r\n\r\n\r\n    \/* BOUTON *\/\r\n\r\n    .cineprod-btn {\r\n        position: absolute;\r\n\r\n        right: auto;\r\n        left: 50%;\r\n        bottom: 15px;\r\n\r\n        z-index: 10;\r\n\r\n        min-width: 240px;\r\n\r\n        height: auto;\r\n\r\n        padding: 18px 30px;\r\n\r\n        font-size: 18px;\r\n\r\n        line-height: 1.1;\r\n\r\n        transform: translateX(-50%);\r\n    }\r\n\r\n    .cineprod-btn:hover {\r\n        transform: translateX(-50%) translateY(-3px);\r\n    }\r\n\r\n    .cineprod-btn:active {\r\n        transform: translateX(-50%);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TR\u00c8S PETIT MOBILE\r\n   \u2264 380 PX\r\n========================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .cineprod-label {\r\n        padding: 14px 10px;\r\n\r\n        font-size: 22px;\r\n\r\n        line-height: 1.25;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n    .cineprod-btn {\r\n        right: auto;\r\n        left: 50%;\r\n        bottom: 12px;\r\n\r\n        min-width: 220px;\r\n\r\n        padding: 16px 25px;\r\n\r\n        font-size: 16px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   NEUTRALISATION MOBILE\r\n========================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .cineprod-hero,\r\n    .cineprod-hero *,\r\n    .cineprod-hero *:focus,\r\n    .cineprod-hero *:focus-visible,\r\n    .cineprod-hero *:active {\r\n        outline: none !important;\r\n    }\r\n\r\n    .cineprod-hero,\r\n    .cineprod-hero *,\r\n    .cineprod-hero *::before,\r\n    .cineprod-hero *::after {\r\n        box-shadow: none !important;\r\n    }\r\n\r\n    .cineprod-hero img {\r\n        -webkit-tap-highlight-color: transparent !important;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   CALENDLY POPUP \u2014 MOBILE\r\n   EMP\u00caCHE LA LARGEUR BLANCHE\r\n========================================= *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .calendly-overlay {\r\n\r\n        width: 100vw !important;\r\n        max-width: 100vw !important;\r\n\r\n        left: 0 !important;\r\n        right: 0 !important;\r\n\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n\r\n        overflow: hidden !important;\r\n    }\r\n\r\n    .calendly-overlay .calendly-popup {\r\n\r\n        width: 100vw !important;\r\n        max-width: 100vw !important;\r\n        min-width: 0 !important;\r\n\r\n        left: 0 !important;\r\n        right: auto !important;\r\n\r\n        margin: 0 !important;\r\n\r\n        border-radius: 0 !important;\r\n\r\n        overflow: hidden !important;\r\n    }\r\n\r\n    .calendly-overlay .calendly-popup-content {\r\n\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        min-width: 0 !important;\r\n\r\n        overflow: hidden !important;\r\n    }\r\n\r\n    .calendly-overlay iframe {\r\n\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        min-width: 0 !important;\r\n\r\n        border: 0 !important;\r\n\r\n        display: block !important;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================\r\n     HERO\r\n========================================= -->\r\n\r\n<div class=\"cineprod-hero\">\r\n\r\n    <img decoding=\"async\"\r\n        src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/Capture-decran-2026-09-11-143745.png\"\r\n        alt=\"\"\r\n    >\r\n\r\n    <div class=\"cineprod-label\">\r\n        CINEPROD BOOSTE AUSSI VOS EQUIPES\r\n    <\/div>\r\n\r\n    <a\r\n        href=\"#\"\r\n        class=\"cineprod-btn\"\r\n        onclick=\"\r\n            Calendly.initPopupWidget({\r\n                url: 'https:\/\/calendly.com\/haglerprod\/30min?background_color=0a0a0a&text_color=ffffff&primary_color=0d64b1'\r\n            });\r\n            return false;\r\n        \"\r\n    >\r\n        DEMANDER UN DEVIS\r\n    <\/a>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =========================================\r\n     SCRIPT CALENDLY\r\n========================================= -->\r\n\r\n<script\r\n    src=\"https:\/\/assets.calendly.com\/assets\/external\/widget.js\"\r\n    async>\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-6b7a908 e-con e-atomic-element e-flexbox-base e-7c8a810 \" data-id=\"6b7a908\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6b7a908\">\n    \t\t<div class=\"elementor-element elementor-element-dd2d949 elementor-widget elementor-widget-html\" data-id=\"dd2d949\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Hammersmith+One&family=Montserrat:wght@400;500;600&display=swap');\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SECTION \u2014 PLEINE LARGEUR\r\n===================================================== *\/\r\n\r\n.cineprod-seo-section {\r\n    width: 100vw;\r\n    margin-left: calc(50% - 50vw);\r\n\r\n    background: #0D64B1;\r\n    color: #FBFBFB;\r\n\r\n    padding: 75px 0 85px;\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENEUR\r\n===================================================== *\/\r\n\r\n.cineprod-seo-container {\r\n    width: min(1280px, 94vw);\r\n\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE\r\n===================================================== *\/\r\n\r\n.cineprod-seo-container h2 {\r\n    margin: 0 0 30px;\r\n\r\n    color: #FBFBFB;\r\n\r\n    font-family: 'Hammersmith One', sans-serif;\r\n\r\n    font-size: 30px;\r\n    font-weight: 400;\r\n\r\n    line-height: 1.25;\r\n\r\n    text-align: left;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TEXTE\r\n===================================================== *\/\r\n\r\n.cineprod-seo-container p {\r\n    width: 100%;\r\n\r\n    margin: 0 0 22px;\r\n    padding: 0;\r\n\r\n    color: #FBFBFB;\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 16px;\r\n    font-weight: 400;\r\n\r\n    line-height: 1.6;\r\n\r\n    text-align: left;\r\n}\r\n\r\n.cineprod-seo-container p:last-child {\r\n    margin-bottom: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   IC\u00d4NES\r\n===================================================== *\/\r\n\r\n.cineprod-seo-icon {\r\n    display: block;\r\n\r\n    width: 150px;\r\n    height: 150px;\r\n\r\n    object-fit: contain;\r\n\r\n    margin: 0 auto 20px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   GRAND \u00c9CRAN\r\n===================================================== *\/\r\n\r\n@media (min-width: 1440px) {\r\n\r\n    .cineprod-seo-container {\r\n        width: 1320px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLETTE\r\n===================================================== *\/\r\n\r\n@media (max-width: 1023px) {\r\n\r\n    .cineprod-seo-section {\r\n        padding: 65px 0 75px;\r\n    }\r\n\r\n    .cineprod-seo-container {\r\n        width: 94vw;\r\n        margin: 0 auto;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n   EXACTEMENT COMME LE FAQ\r\n===================================================== *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .cineprod-seo-section {\r\n\r\n        width: 100%;\r\n\r\n        margin-left: 0;\r\n\r\n        padding: 45px 20px 55px;\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       CONTENEUR MOBILE\r\n    ------------------------------------------------- *\/\r\n\r\n    .cineprod-seo-container {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 540px;\r\n\r\n        min-width: 0;\r\n\r\n        margin: 0 auto;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       TITRE\r\n    ------------------------------------------------- *\/\r\n\r\n    .cineprod-seo-container h2 {\r\n\r\n        width: 100%;\r\n\r\n        margin: 0 0 25px;\r\n\r\n        padding: 0;\r\n\r\n        font-size: 26px;\r\n\r\n        line-height: 1.3;\r\n\r\n        text-align: left;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       IC\u00d4NES MOBILE\r\n    ------------------------------------------------- *\/\r\n\r\n    .cineprod-seo-icon {\r\n\r\n        width: 110px;\r\n        height: 110px;\r\n\r\n        margin: 0 auto 20px;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       TEXTE\r\n    ------------------------------------------------- *\/\r\n\r\n    .cineprod-seo-container p {\r\n\r\n        width: 100%;\r\n\r\n        margin: 0 0 20px;\r\n\r\n        padding: 0;\r\n\r\n        font-size: 16px;\r\n\r\n        line-height: 1.7;\r\n\r\n        text-align: justify;\r\n\r\n        text-justify: inter-word;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PETITS MOBILES\r\n   EXACTEMENT COMME LE FAQ\r\n===================================================== *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .cineprod-seo-section {\r\n\r\n        padding-left: 16px;\r\n\r\n        padding-right: 16px;\r\n    }\r\n\r\n\r\n    .cineprod-seo-container {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 100%;\r\n    }\r\n\r\n\r\n    .cineprod-seo-container h2 {\r\n\r\n        font-size: 24px;\r\n\r\n        line-height: 1.3;\r\n    }\r\n\r\n\r\n    .cineprod-seo-container p {\r\n\r\n        font-size: 15px;\r\n\r\n        line-height: 1.7;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section\r\n    class=\"cineprod-seo-section\"\r\n    aria-labelledby=\"bien-etre-entreprise-title\"\r\n>\r\n\r\n    <div class=\"cineprod-seo-container\">\r\n\r\n        <h2 id=\"bien-etre-entreprise-title\">\r\n            D\u00e9veloppez votre marque employeur gr\u00e2ce au bien-\u00eatre en entreprise, essayez le SHADOW BOXING\r\n        <\/h2>\r\n\r\n\r\n        <!-- IC\u00d4NE 1 -->\r\n\r\n        <img decoding=\"async\"\r\n            class=\"cineprod-seo-icon\"\r\n            src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/entreprise-evenementiel-paris-11.svg\"\r\n            alt=\"\"\r\n            aria-hidden=\"true\"\r\n        >\r\n\r\n        <p>\r\n            Renforcez votre marque employeur en investissant dans le bien-\u00eatre au travail de vos collaborateurs.\r\n            Une entreprise qui place la qualit\u00e9 de vie et des conditions de travail (QVCT) au c\u0153ur de sa strat\u00e9gie\r\n            favorise l'engagement, am\u00e9liore la motivation des \u00e9quipes et fid\u00e9lise durablement ses talents.\r\n        <\/p>\r\n\r\n\r\n        <!-- IC\u00d4NE 2 -->\r\n\r\n        <img decoding=\"async\"\r\n            class=\"cineprod-seo-icon\"\r\n            src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/entreprise-evenementiel-paris-5.svg\"\r\n            alt=\"\"\r\n            aria-hidden=\"true\"\r\n        >\r\n\r\n        <p>\r\n            Des salari\u00e9s \u00e9panouis sont plus productifs, plus impliqu\u00e9s et contribuent \u00e0 r\u00e9duire l'absent\u00e9isme ainsi\r\n            que le turnover. Offrir un environnement de travail positif est aujourd'hui un v\u00e9ritable levier de\r\n            performance et d'attractivit\u00e9 pour votre entreprise.\r\n        <\/p>\r\n\r\n\r\n        <!-- IC\u00d4NE 3 -->\r\n\r\n        <img decoding=\"async\"\r\n            class=\"cineprod-seo-icon\"\r\n            src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/entreprise-evenementiel-paris-6.svg\"\r\n            alt=\"\"\r\n            aria-hidden=\"true\"\r\n        >\r\n\r\n        <p>\r\n            Proposez \u00e0 vos \u00e9quipes un espace d\u00e9di\u00e9 pour \u00e9vacuer le stress de mani\u00e8re ludique, s\u00e9curis\u00e9e et encadr\u00e9e\r\n            par des coachs certifi\u00e9s. Nos solutions de gestion du stress en entreprise permettent d'am\u00e9liorer le\r\n            bien-\u00eatre des collaborateurs, de pr\u00e9venir les risques psychosociaux (RPS) et de renforcer la coh\u00e9sion\r\n            d'\u00e9quipe.\r\n        <\/p>\r\n\r\n\r\n        <p>\r\n            Investissez dans le bien-\u00eatre de vos salari\u00e9s et faites de votre entreprise un employeur attractif,\r\n            performant et durable.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8a0a8c3 e-con e-atomic-element e-flexbox-base e-20a5ac9 \" data-id=\"8a0a8c3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8a0a8c3\">\n    \t\t<div class=\"elementor-element elementor-element-6c09759 elementor-widget elementor-widget-image\" data-id=\"6c09759\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/atelier-dentreprise-paris-300x169.jpg\" class=\"attachment-medium size-medium wp-image-13202\" alt=\"\" srcset=\"https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/atelier-dentreprise-paris-300x169.jpg 300w, https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/atelier-dentreprise-paris-1024x576.jpg 1024w, https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/atelier-dentreprise-paris-768x432.jpg 768w, https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/atelier-dentreprise-paris-1536x864.jpg 1536w, https:\/\/cineprod.pro\/wp-content\/uploads\/2026\/09\/atelier-dentreprise-paris-2048x1152.jpg 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-948d9a4 e-con e-atomic-element e-flexbox-base e-aafcca3 \" data-id=\"948d9a4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"948d9a4\">\n    \t\t<div class=\"elementor-element elementor-element-026e82c elementor-widget elementor-widget-html\" data-id=\"026e82c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Hammersmith+One&family=Montserrat:wght@400;500;600&display=swap');\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SECTION\r\n===================================================== *\/\r\n\r\n.cineprod-shadow-section {\r\n    width: 100vw;\r\n    margin-left: calc(50% - 50vw);\r\n\r\n    background: #0A0A0A;\r\n    color: #FBFBFB;\r\n\r\n    padding: 75px 0 85px;\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENEUR\r\n===================================================== *\/\r\n\r\n.cineprod-shadow-container {\r\n    width: min(1280px, 94vw);\r\n    margin: 0 auto;\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n\r\n    .cineprod-shadow-container {\r\n        width: 1320px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BLOC\r\n===================================================== *\/\r\n\r\n.cineprod-shadow-item {\r\n    width: 100%;\r\n    margin: 0 0 45px;\r\n}\r\n\r\n.cineprod-shadow-item:last-child {\r\n    margin-bottom: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE\r\n===================================================== *\/\r\n\r\n.cineprod-shadow-title {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    margin: 0 0 25px;\r\n    padding: 0;\r\n\r\n    color: #FBFBFB;\r\n\r\n    font-family: 'Hammersmith One', sans-serif;\r\n\r\n    font-size: 30px;\r\n    font-weight: 400;\r\n\r\n    line-height: 1.25;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   GANT\r\n===================================================== *\/\r\n\r\n.cineprod-fist {\r\n    position: relative;\r\n\r\n    width: 105px;\r\n    height: 82px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    margin-right: 28px;\r\n}\r\n\r\n.cineprod-fist svg {\r\n    display: block;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    overflow: visible;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   COULEURS DU GANT\r\n===================================================== *\/\r\n\r\n.cineprod-fist .fist-main {\r\n    fill: #0D64B1;\r\n}\r\n\r\n.cineprod-fist .fist-shadow {\r\n    fill: #084A83;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TEXTE\r\n===================================================== *\/\r\n\r\n.cineprod-shadow-item p {\r\n    width: 100%;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    color: #FBFBFB;\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 16px;\r\n    font-weight: 400;\r\n\r\n    line-height: 1.6;\r\n\r\n    text-align: left;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLETTE\r\n===================================================== *\/\r\n\r\n@media (max-width: 1023px) {\r\n\r\n    .cineprod-shadow-section {\r\n        padding: 65px 0 75px;\r\n    }\r\n\r\n    .cineprod-shadow-container {\r\n        width: 94vw;\r\n    }\r\n\r\n    .cineprod-fist {\r\n        width: 90px;\r\n        height: 72px;\r\n\r\n        margin-right: 22px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .cineprod-shadow-section {\r\n        width: 100%;\r\n        margin-left: 0;\r\n\r\n        padding: 45px 20px 55px;\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       CONTENEUR MOBILE\r\n    ------------------------------------------------- *\/\r\n\r\n    .cineprod-shadow-container {\r\n        width: 100%;\r\n        max-width: 540px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       BLOCS\r\n    ------------------------------------------------- *\/\r\n\r\n    .cineprod-shadow-item {\r\n        width: 100%;\r\n        margin: 0 0 38px;\r\n    }\r\n\r\n    .cineprod-shadow-item:last-child {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       TITRE\r\n       GANT \u00c0 GAUCHE + TITRE \u00c0 DROITE\r\n    ------------------------------------------------- *\/\r\n\r\n    .cineprod-shadow-title {\r\n        display: flex;\r\n        align-items: center;\r\n\r\n        width: 100%;\r\n        max-width: 300px;\r\n\r\n        margin: 0 0 18px;\r\n        padding: 0;\r\n\r\n        font-size: 24px;\r\n        line-height: 1.25;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       GANT MOBILE\r\n    ------------------------------------------------- *\/\r\n\r\n    .cineprod-fist {\r\n        width: 65px;\r\n        height: 51px;\r\n\r\n        flex: 0 0 65px;\r\n\r\n        margin: 0 16px 0 0;\r\n    }\r\n\r\n    .cineprod-fist svg {\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       PARAGRAPHES JUSTIFI\u00c9S\r\n    ------------------------------------------------- *\/\r\n\r\n    .cineprod-shadow-item p {\r\n        width: 100%;\r\n\r\n        margin: 0;\r\n        padding: 0;\r\n\r\n        font-size: 15px;\r\n        line-height: 1.6;\r\n\r\n        text-align: justify;\r\n        text-justify: inter-word;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PETITS MOBILES\r\n===================================================== *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .cineprod-shadow-section {\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n    }\r\n\r\n    .cineprod-shadow-container {\r\n        width: 100%;\r\n        max-width: 100%;\r\n    }\r\n\r\n    .cineprod-shadow-title {\r\n        max-width: 280px;\r\n\r\n        font-size: 22px;\r\n    }\r\n\r\n    .cineprod-fist {\r\n        width: 58px;\r\n        height: 45px;\r\n\r\n        flex-basis: 58px;\r\n\r\n        margin-right: 14px;\r\n    }\r\n\r\n    .cineprod-shadow-item p {\r\n        font-size: 14px;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section\r\n    class=\"cineprod-shadow-section\"\r\n    aria-label=\"Atelier Shadow Boxing\"\r\n>\r\n\r\n    <div class=\"cineprod-shadow-container\">\r\n\r\n\r\n        <!-- =================================================\r\n             LE SHADOW BOXING\r\n        ================================================== -->\r\n\r\n        <article class=\"cineprod-shadow-item\">\r\n\r\n            <h2 class=\"cineprod-shadow-title\">\r\n\r\n                <span class=\"cineprod-fist\" aria-hidden=\"true\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 120 90\"\r\n                        xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                    >\r\n\r\n                        <path\r\n                            class=\"fist-shadow\"\r\n                            d=\"\r\n                                M 25 51\r\n                                C 20 49, 18 53, 19 58\r\n                                C 20 64, 25 69, 32 71\r\n                                C 39 73, 45 69, 48 63\r\n                                L 48 56\r\n                                C 40 58, 32 55, 25 51\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                        <path\r\n                            class=\"fist-main\"\r\n                            d=\"\r\n                                M 24 61\r\n                                C 20 56, 18 49, 19 42\r\n                                C 20 31, 27 22, 37 17\r\n                                C 47 12, 59 11, 70 13\r\n                                C 82 15, 92 21, 98 30\r\n                                C 104 39, 105 49, 102 58\r\n                                C 99 67, 93 73, 84 78\r\n                                C 75 82, 64 84, 52 83\r\n                                L 41 82\r\n                                C 33 80, 27 72, 24 61\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                        <path\r\n                            class=\"fist-main\"\r\n                            d=\"\r\n                                M 27 43\r\n                                C 28 32, 35 24, 45 20\r\n                                C 56 16, 68 16, 79 20\r\n                                C 89 24, 96 32, 98 41\r\n                                C 100 50, 97 58, 90 65\r\n                                C 83 71, 73 74, 62 74\r\n                                L 48 73\r\n                                C 37 71, 29 60, 27 43\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                    <\/svg>\r\n\r\n                <\/span>\r\n\r\n                LE SHADOW BOXING\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p>\r\n                C\u2019est un exercice fondamental dans l\u2019entrainement des boxeurs :\r\n                il s\u2019agit de \u00ab mimer \u00bb un combat devant un adversaire invisible.\r\n            <\/p>\r\n\r\n        <\/article>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             LE PRINCIPE\r\n        ================================================== -->\r\n\r\n        <article class=\"cineprod-shadow-item\">\r\n\r\n            <h2 class=\"cineprod-shadow-title\">\r\n\r\n                <span class=\"cineprod-fist\" aria-hidden=\"true\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 120 90\"\r\n                        xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                    >\r\n\r\n                        <path\r\n                            class=\"fist-shadow\"\r\n                            d=\"\r\n                                M 25 51\r\n                                C 20 49, 18 53, 19 58\r\n                                C 20 64, 25 69, 32 71\r\n                                C 39 73, 45 69, 48 63\r\n                                L 48 56\r\n                                C 40 58, 32 55, 25 51\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                        <path\r\n                            class=\"fist-main\"\r\n                            d=\"\r\n                                M 24 61\r\n                                C 20 56, 18 49, 19 42\r\n                                C 20 31, 27 22, 37 17\r\n                                C 47 12, 59 11, 70 13\r\n                                C 82 15, 92 21, 98 30\r\n                                C 104 39, 105 49, 102 58\r\n                                C 99 67, 93 73, 84 78\r\n                                C 75 82, 64 84, 52 83\r\n                                L 41 82\r\n                                C 33 80, 27 72, 24 61\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                        <path\r\n                            class=\"fist-main\"\r\n                            d=\"\r\n                                M 27 43\r\n                                C 28 32, 35 24, 45 20\r\n                                C 56 16, 68 16, 79 20\r\n                                C 89 24, 96 32, 98 41\r\n                                C 100 50, 97 58, 90 65\r\n                                C 83 71, 73 74, 62 74\r\n                                L 48 73\r\n                                C 37 71, 29 60, 27 43\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                    <\/svg>\r\n\r\n                <\/span>\r\n\r\n                LE PRINCIPE\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p>\r\n                En fonction de votre nombre (de 10 \u00e0 X participants) nous formons un nombre X de groupes\r\n                qui vont s\u2019isoler avec une mission \u00ab simple \u00bb : d\u00e9finir une chor\u00e9graphie avec laquelle ils\r\n                \u00ab affronteront \u00bb sur le ring en \u00ab BATTLE \u00bb les autres groupes.... FOUS RIRES, d\u00e9foulement et\r\n                coh\u00e9sion de groupe garantis......\r\n            <\/p>\r\n\r\n        <\/article>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             LES R\u00c8GLES DU JEU\r\n        ================================================== -->\r\n\r\n        <article class=\"cineprod-shadow-item\">\r\n\r\n            <h2 class=\"cineprod-shadow-title\">\r\n\r\n                <span class=\"cineprod-fist\" aria-hidden=\"true\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 120 90\"\r\n                        xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                    >\r\n\r\n                        <path\r\n                            class=\"fist-shadow\"\r\n                            d=\"\r\n                                M 25 51\r\n                                C 20 49, 18 53, 19 58\r\n                                C 20 64, 25 69, 32 71\r\n                                C 39 73, 45 69, 48 63\r\n                                L 48 56\r\n                                C 40 58, 32 55, 25 51\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                        <path\r\n                            class=\"fist-main\"\r\n                            d=\"\r\n                                M 24 61\r\n                                C 20 56, 18 49, 19 42\r\n                                C 20 31, 27 22, 37 17\r\n                                C 47 12, 59 11, 70 13\r\n                                C 82 15, 92 21, 98 30\r\n                                C 104 39, 105 49, 102 58\r\n                                C 99 67, 93 73, 84 78\r\n                                C 75 82, 64 84, 52 83\r\n                                L 41 82\r\n                                C 33 80, 27 72, 24 61\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                        <path\r\n                            class=\"fist-main\"\r\n                            d=\"\r\n                                M 27 43\r\n                                C 28 32, 35 24, 45 20\r\n                                C 56 16, 68 16, 79 20\r\n                                C 89 24, 96 32, 98 41\r\n                                C 100 50, 97 58, 90 65\r\n                                C 83 71, 73 74, 62 74\r\n                                L 48 73\r\n                                C 37 71, 29 60, 27 43\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                    <\/svg>\r\n\r\n                <\/span>\r\n\r\n                LES R\u00c8GLES DU JEU\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p>\r\n                Le groupe attendu sur le ring (ou la cage) se lance au coup de gong.\r\n                Et l\u00e0, il est temps de tout donner ! Fin du round au 2\u00e8me coup de cloche.\r\n                Les juges notent la performance globale, l\u2019\u00e9nergie, la coh\u00e9sion du groupe...\r\n            <\/p>\r\n\r\n        <\/article>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             DUR\u00c9E DE L'ATELIER\r\n        ================================================== -->\r\n\r\n        <article class=\"cineprod-shadow-item\">\r\n\r\n            <h2 class=\"cineprod-shadow-title\">\r\n\r\n                <span class=\"cineprod-fist\" aria-hidden=\"true\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 120 90\"\r\n                        xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                    >\r\n\r\n                        <path\r\n                            class=\"fist-shadow\"\r\n                            d=\"\r\n                                M 25 51\r\n                                C 20 49, 18 53, 19 58\r\n                                C 20 64, 25 69, 32 71\r\n                                C 39 73, 45 69, 48 63\r\n                                L 48 56\r\n                                C 40 58, 32 55, 25 51\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                        <path\r\n                            class=\"fist-main\"\r\n                            d=\"\r\n                                M 24 61\r\n                                C 20 56, 18 49, 19 42\r\n                                C 20 31, 27 22, 37 17\r\n                                C 47 12, 59 11, 70 13\r\n                                C 82 15, 92 21, 98 30\r\n                                C 104 39, 105 49, 102 58\r\n                                C 99 67, 93 73, 84 78\r\n                                C 75 82, 64 84, 52 83\r\n                                L 41 82\r\n                                C 33 80, 27 72, 24 61\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                        <path\r\n                            class=\"fist-main\"\r\n                            d=\"\r\n                                M 27 43\r\n                                C 28 32, 35 24, 45 20\r\n                                C 56 16, 68 16, 79 20\r\n                                C 89 24, 96 32, 98 41\r\n                                C 100 50, 97 58, 90 65\r\n                                C 83 71, 73 74, 62 74\r\n                                L 48 73\r\n                                C 37 71, 29 60, 27 43\r\n                                Z\r\n                            \"\r\n                        \/>\r\n\r\n                    <\/svg>\r\n\r\n                <\/span>\r\n\r\n                DUR\u00c9E DE L\u2019ATELIER\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p>\r\n                De 2H00 \u00e0 1 journ\u00e9e suivant le nombre de participants.\r\n                L\u2019\u00e9preuve peut m\u00eame se r\u00e9aliser sur plusieurs jours, dans plusieurs lieux diff\u00e9rents\r\n                (pour les entreprises avec filiales par exemple ou pour les \u00c9PREUVES INTER ENTREPRISES).\r\n            <\/p>\r\n\r\n        <\/article>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-32871e6 e-con e-atomic-element e-flexbox-base e-d816ca2 \" data-id=\"32871e6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"32871e6\">\n    \t\t<div class=\"elementor-element elementor-element-8cfa065 elementor-widget elementor-widget-html\" data-id=\"8cfa065\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ========================================= CINEPROD \u2014 CALENDLY ========================================= --> <link href=\"https:\/\/assets.calendly.com\/assets\/external\/widget.css\" rel=\"stylesheet\" > <style> @import url('https:\/\/fonts.googleapis.com\/css2?family=Hammersmith+One&family=Montserrat:wght@400;500;600&display=swap'); \/* ===================================================== RESET ===================================================== *\/ .cineprod-calendly, .cineprod-calendly * { box-sizing: border-box; } \/* ===================================================== TITRE ===================================================== *\/ .cineprod-calendly-title { width: 100%; max-width: 1280px; margin: 0 auto; padding: 35px 0 25px; color: #E51616; font-family: 'Hammersmith One', sans-serif; font-size: 30px; font-weight: 400; line-height: 1.2; text-align: center; white-space: nowrap; } \/* ===================================================== CONTENEUR CALENDLY ===================================================== *\/ .cineprod-calendly { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0; background: #0A0A0A; overflow: hidden; } \/* ===================================================== WIDGET ===================================================== *\/ .cineprod-calendly .calendly-inline-widget { width: 100% !important; min-width: 320px; height: 760px; margin: 0; padding: 0; background: #0A0A0A; overflow: hidden; } \/* ===================================================== COULEURS ===================================================== *\/ .cineprod-calendly a { color: #0D64B1; } \/* ===================================================== TABLETTE 768 \u2192 1023 PX ===================================================== *\/ @media (min-width: 768px) and (max-width: 1023px) { .cineprod-calendly { width: 94vw; max-width: 94vw; margin-left: auto; margin-right: auto; overflow: hidden; } .cineprod-calendly .calendly-inline-widget { width: 100% !important; min-width: 320px; height: 760px; overflow: hidden; } } \/* ===================================================== PC 1024 \u2192 1439 PX ===================================================== *\/ @media (min-width: 1024px) and (max-width: 1439px) { .cineprod-calendly { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; overflow: hidden; } .cineprod-calendly .calendly-inline-widget { width: 100% !important; max-width: 100% !important; height: 760px; overflow: hidden; } } \/* ===================================================== GRAND \u00c9CRAN \u2265 1440 PX ===================================================== *\/ @media (min-width: 1440px) { .cineprod-calendly { position: relative; left: 50%; transform: translateX(-50%); width: min(1320px, calc(100vw - 120px)); max-width: min(1320px, calc(100vw - 120px)); margin-left: 0 !important; margin-right: 0 !important; padding: 0; overflow: hidden; } .cineprod-calendly .calendly-inline-widget { display: block; width: 100% !important; max-width: 100% !important; min-width: 320px; height: 760px; margin: 0 !important; padding: 0 !important; overflow: hidden; } } \/* ===================================================== MOBILE \u2264 767 PX ===================================================== *\/ @media (max-width: 767px) { html, body { max-width: 100%; overflow-x: hidden !important; } \/* TITRE MOBILE *\/ .cineprod-calendly-title { width: 100%; padding: 30px 20px 20px; font-size: 23px; text-align: center; white-space: normal; } .cineprod-calendly { position: relative; left: auto !important; right: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; overflow: hidden !important; } .cineprod-calendly .calendly-inline-widget { position: relative; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 850px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .cineprod-calendly iframe { display: block; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; border: 0 !important; } } \/* ===================================================== PETIT MOBILE \u2264 380 PX ===================================================== *\/ @media (max-width: 380px) { .cineprod-calendly { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } .cineprod-calendly .calendly-inline-widget { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 900px !important; overflow: hidden !important; } } <\/style> <!-- ===================================================== TITRE ===================================================== --> <div class=\"cineprod-calendly-title\"> UN PROJET EN T\u00caTE ? PARLONS-EN. <\/div> <!-- ===================================================== CALENDLY ===================================================== --> <div class=\"cineprod-calendly\">\r\n<div\r\n    class=\"calendly-inline-widget\"\r\n    data-url=\"https:\/\/calendly.com\/haglerprod\/30min?background_color=0a0a0a&text_color=ffffff&primary_color=0d64b1\"\r\n><\/div>\r\n\r\n<\/div> <!-- ===================================================== SCRIPT CALENDLY ===================================================== --> <script src=\"https:\/\/assets.calendly.com\/assets\/external\/widget.js\" async> <\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-fddb10a e-con e-atomic-element e-flexbox-base e-053efb7 \" data-id=\"fddb10a\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"fddb10a\">\n    \t\t<div class=\"elementor-element elementor-element-56fcce9 elementor-widget elementor-widget-html\" data-id=\"56fcce9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Hammersmith+One&family=Montserrat:wght@400;500;600&display=swap');\r\n\r\n\r\n\/* =====================================================\r\n   RESET\r\n===================================================== *\/\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nhtml,\r\nbody {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SECTION FAQ \u2014 PLEINE LARGEUR\r\n===================================================== *\/\r\n\r\n.faq-section {\r\n\r\n    width: 100vw;\r\n\r\n    margin-left: calc(50% - 50vw);\r\n\r\n    background: #0A0A0A;\r\n\r\n    color: #FBFBFB;\r\n\r\n    overflow: hidden;\r\n\r\n    position: relative;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENEUR\r\n   M\u00caMES DIMENSIONS QUE SHADOW BOXING\r\n===================================================== *\/\r\n\r\n.faq-container {\r\n\r\n    position: relative;\r\n\r\n    width: min(1280px, 94vw);\r\n\r\n    margin: 0 auto;\r\n\r\n    padding: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE FAQ\r\n===================================================== *\/\r\n\r\n.faq-header {\r\n\r\n    width: 100%;\r\n\r\n    margin: 0;\r\n\r\n    padding: 25px 0 20px;\r\n}\r\n\r\n\r\n.faq-header h2 {\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    color: #FBFBFB;\r\n\r\n    font-family: 'Hammersmith One', sans-serif;\r\n\r\n    font-size: 18px;\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 1.2;\r\n\r\n    letter-spacing: 0.5px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LISTE FAQ\r\n===================================================== *\/\r\n\r\n.faq-list {\r\n\r\n    width: 100%;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   \u00c9L\u00c9MENT FAQ\r\n===================================================== *\/\r\n\r\n.faq-item {\r\n\r\n    width: 100%;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    border-top: 1px solid rgba(251, 251, 251, 0.30);\r\n\r\n    background: transparent;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   DERNI\u00c8RE LIGNE\r\n===================================================== *\/\r\n\r\n.faq-item:last-child {\r\n\r\n    border-bottom: 1px solid rgba(251, 251, 251, 0.30);\r\n\r\n    margin-bottom: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   QUESTION\r\n===================================================== *\/\r\n\r\n.faq-item summary {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: space-between;\r\n\r\n    width: 100%;\r\n\r\n    min-height: 62px;\r\n\r\n    margin: 0;\r\n\r\n    padding: 18px 0;\r\n\r\n    cursor: pointer;\r\n\r\n    list-style: none;\r\n\r\n    color: #FBFBFB;\r\n\r\n    font-family: 'Hammersmith One', sans-serif;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 1.4;\r\n\r\n    letter-spacing: 0.2px;\r\n\r\n    transition:\r\n        color 0.25s ease,\r\n        background-color 0.25s ease;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SUPPRESSION DE LA FL\u00c8CHE NATIVE\r\n===================================================== *\/\r\n\r\n.faq-item summary::-webkit-details-marker {\r\n    display: none;\r\n}\r\n\r\n.faq-item summary::marker {\r\n    display: none;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   HOVER\r\n===================================================== *\/\r\n\r\n.faq-item summary:hover {\r\n\r\n    color: #FFFFFF;\r\n\r\n    background-color: rgba(251, 251, 251, 0.025);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   IC\u00d4NE +\r\n===================================================== *\/\r\n\r\n.faq-icon {\r\n\r\n    position: relative;\r\n\r\n    width: 20px;\r\n    height: 20px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    margin-left: 30px;\r\n}\r\n\r\n\r\n\/* Ligne horizontale *\/\r\n\r\n.faq-icon::before {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 50%;\r\n    top: 50%;\r\n\r\n    width: 14px;\r\n    height: 1px;\r\n\r\n    background: #FBFBFB;\r\n\r\n    transform: translate(-50%, -50%);\r\n}\r\n\r\n\r\n\/* Ligne verticale *\/\r\n\r\n.faq-icon::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 50%;\r\n    top: 50%;\r\n\r\n    width: 1px;\r\n    height: 14px;\r\n\r\n    background: #FBFBFB;\r\n\r\n    transform: translate(-50%, -50%);\r\n\r\n    transition: transform 0.25s ease;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   QUAND LA QUESTION EST OUVERTE\r\n===================================================== *\/\r\n\r\n.faq-item[open] .faq-icon::after {\r\n\r\n    transform:\r\n        translate(-50%, -50%)\r\n        rotate(90deg);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   R\u00c9PONSE\r\n===================================================== *\/\r\n\r\n.faq-answer {\r\n\r\n    width: 100%;\r\n\r\n    max-width: 1000px;\r\n\r\n    margin: 0;\r\n\r\n    padding: 0 0 30px;\r\n\r\n    color: #FBFBFB;\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 1.75;\r\n\r\n    animation: faqFade 0.25s ease;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PARAGRAPHES\r\n===================================================== *\/\r\n\r\n.faq-answer p {\r\n\r\n    margin: 0 0 16px;\r\n}\r\n\r\n\r\n.faq-answer p:last-child {\r\n\r\n    margin-bottom: 0;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TEXTE IMPORTANT\r\n===================================================== *\/\r\n\r\n.faq-answer strong {\r\n\r\n    color: #FBFBFB;\r\n\r\n    font-weight: 600;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ANIMATION\r\n===================================================== *\/\r\n\r\n@keyframes faqFade {\r\n\r\n    from {\r\n\r\n        opacity: 0;\r\n\r\n        transform: translateY(-5px);\r\n    }\r\n\r\n    to {\r\n\r\n        opacity: 1;\r\n\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   GRAND \u00c9CRAN\r\n   EXACTEMENT COMME SHADOW BOXING\r\n===================================================== *\/\r\n\r\n@media (min-width: 1440px) {\r\n\r\n    .faq-container {\r\n\r\n        width: 1320px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLETTE\r\n===================================================== *\/\r\n\r\n@media (max-width: 1023px) {\r\n\r\n    .faq-container {\r\n\r\n        width: 94vw;\r\n\r\n        margin: 0 auto;\r\n    }\r\n\r\n\r\n    .faq-header {\r\n\r\n        padding: 25px 0 20px;\r\n    }\r\n\r\n\r\n    .faq-item summary {\r\n\r\n        font-size: 12px;\r\n    }\r\n\r\n\r\n    .faq-answer {\r\n\r\n        font-size: 12px;\r\n\r\n        line-height: 1.7;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n   M\u00caME STRUCTURE QUE SHADOW BOXING\r\n===================================================== *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .faq-section {\r\n\r\n        width: 100%;\r\n\r\n        margin-left: 0;\r\n\r\n        padding: 45px 20px 55px;\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       CONTENEUR MOBILE\r\n    ------------------------------------------------- *\/\r\n\r\n    .faq-container {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 540px;\r\n\r\n        min-width: 0;\r\n\r\n        margin: 0 auto;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       HEADER\r\n    ------------------------------------------------- *\/\r\n\r\n    .faq-header {\r\n\r\n        width: 100%;\r\n\r\n        padding: 0 0 18px;\r\n    }\r\n\r\n\r\n    .faq-header h2 {\r\n\r\n        font-size: 16px;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       QUESTIONS\r\n    ------------------------------------------------- *\/\r\n\r\n    .faq-item summary {\r\n\r\n        width: 100%;\r\n\r\n        min-height: 58px;\r\n\r\n        padding: 17px 0;\r\n\r\n        font-size: 10px;\r\n\r\n        line-height: 1.5;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       IC\u00d4NE\r\n    ------------------------------------------------- *\/\r\n\r\n    .faq-icon {\r\n\r\n        width: 18px;\r\n        height: 18px;\r\n\r\n        margin-left: 15px;\r\n    }\r\n\r\n\r\n    .faq-icon::before {\r\n\r\n        width: 12px;\r\n    }\r\n\r\n\r\n    .faq-icon::after {\r\n\r\n        height: 12px;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------\r\n       R\u00c9PONSE\r\n    ------------------------------------------------- *\/\r\n\r\n    .faq-answer {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 100%;\r\n\r\n        padding: 0 0 24px;\r\n\r\n        font-size: 11px;\r\n\r\n        line-height: 1.7;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PETITS MOBILES\r\n===================================================== *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .faq-section {\r\n\r\n        padding-left: 16px;\r\n\r\n        padding-right: 16px;\r\n    }\r\n\r\n\r\n    .faq-container {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 100%;\r\n    }\r\n\r\n\r\n    .faq-header {\r\n\r\n        padding-bottom: 16px;\r\n    }\r\n\r\n\r\n    .faq-header h2 {\r\n\r\n        font-size: 15px;\r\n    }\r\n\r\n\r\n    .faq-item summary {\r\n\r\n        font-size: 10px;\r\n\r\n        line-height: 1.5;\r\n    }\r\n\r\n\r\n    .faq-answer {\r\n\r\n        font-size: 10px;\r\n\r\n        line-height: 1.7;\r\n    }\r\n\r\n\r\n    .faq-icon {\r\n\r\n        width: 17px;\r\n\r\n        height: 17px;\r\n\r\n        margin-left: 12px;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =====================================================\r\n     FAQ\r\n===================================================== -->\r\n\r\n<section class=\"faq-section\">\r\n\r\n    <div class=\"faq-container\">\r\n\r\n\r\n        <!-- =================================================\r\n             TITRE\r\n        ================================================== -->\r\n\r\n        <div class=\"faq-header\">\r\n\r\n            <h2>FAQ<\/h2>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             LISTE DES QUESTIONS\r\n        ================================================== -->\r\n\r\n        <div class=\"faq-list\">\r\n\r\n\r\n            <!-- =================================================\r\n                 1 \u2014 PRESTATION D'URGENCE\r\n            ================================================== -->\r\n\r\n            <details class=\"faq-item\">\r\n\r\n                <summary>\r\n\r\n                    <span>\r\n                        PUIS-JE DEMANDER UNE PRESTATION D'URGENCE ?\r\n                    <\/span>\r\n\r\n                    <span class=\"faq-icon\"><\/span>\r\n\r\n                <\/summary>\r\n\r\n\r\n                <div class=\"faq-answer\">\r\n\r\n                    <p>\r\n                        Oui, il est tout \u00e0 fait possible d\u2019\u00e9tudier une demande de\r\n                        prestation en urgence. Appelez-nous directement au\r\n                        <strong>07 61 45 80 80<\/strong> afin d\u2019\u00e9changer avec nous\r\n                        sur votre projet, vos besoins et les d\u00e9lais souhait\u00e9s.\r\n                    <\/p>\r\n\r\n                    <p>\r\n                        Apr\u00e8s \u00e9tude des contraintes et des fonctionnalit\u00e9s n\u00e9cessaires\r\n                        \u00e0 votre projet, nous vous confirmerons si sa r\u00e9alisation dans\r\n                        les d\u00e9lais impartis est possible et mettrons tout en \u0153uvre pour\r\n                        vous proposer une solution adapt\u00e9e.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/details>\r\n\r\n\r\n            <!-- =================================================\r\n                 2 \u2014 TYPES D'\u00c9V\u00c9NEMENTS\r\n            ================================================== -->\r\n\r\n            <details class=\"faq-item\">\r\n\r\n                <summary>\r\n\r\n                    <span>\r\n                        QUELS TYPES D'\u00c9V\u00c9NEMENTS R\u00c9ALISEZ-VOUS ?\r\n                    <\/span>\r\n\r\n                    <span class=\"faq-icon\"><\/span>\r\n\r\n                <\/summary>\r\n\r\n\r\n                <div class=\"faq-answer\">\r\n\r\n                    <p>\r\n                        Nous intervenons sur une large vari\u00e9t\u00e9 de projets \u00e9v\u00e9nementiels\r\n                        et audiovisuels. Nous accompagnons notamment les\r\n                        <strong>soir\u00e9es sp\u00e9ciales, inaugurations et lancements<\/strong>\r\n                        pour les restaurants, h\u00f4tels, boutiques, centres commerciaux,\r\n                        bo\u00eetes de nuit et clubs sportifs.\r\n                    <\/p>\r\n\r\n                    <p>\r\n                        Notre expertise s\u2019\u00e9tend \u00e9galement au secteur\r\n                        <strong>audiovisuel<\/strong>, avec la r\u00e9alisation de dispositifs\r\n                        et d\u00e9cors pour des \u00e9missions de t\u00e9l\u00e9vision, clips musicaux,\r\n                        films et \u00e9missions de radio.\r\n                    <\/p>\r\n\r\n                    <p>\r\n                        Enfin, nous proposons des\r\n                        <strong>ateliers d\u00e9di\u00e9s aux entreprises<\/strong>, con\u00e7us pour\r\n                        renforcer la confiance en soi, la coh\u00e9sion d\u2019\u00e9quipe et la\r\n                        gestion du stress, \u00e0 travers des exp\u00e9riences adapt\u00e9es aux\r\n                        objectifs de chaque organisation.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/details>\r\n\r\n\r\n            <!-- =================================================\r\n                 3 \u2014 ZONES D'INTERVENTION\r\n            ================================================== -->\r\n\r\n            <details class=\"faq-item\">\r\n\r\n                <summary>\r\n\r\n                    <span>\r\n                        DANS QUELLES ZONES INTERVENEZ-VOUS ?\r\n                    <\/span>\r\n\r\n                    <span class=\"faq-icon\"><\/span>\r\n\r\n                <\/summary>\r\n\r\n\r\n                <div class=\"faq-answer\">\r\n\r\n                    <p>\r\n                        Nous intervenons\r\n                        <strong>partout en France et en Europe<\/strong>,\r\n                        afin d\u2019accompagner nos clients dans la r\u00e9alisation de leurs\r\n                        projets, quelle que soit leur localisation.\r\n                    <\/p>\r\n\r\n                    <p>\r\n                        Selon la nature, l\u2019envergure et les exigences du projet, nous\r\n                        pouvons \u00e9galement <strong>intervenir \u00e0 l\u2019international<\/strong>.\r\n                        Chaque demande est \u00e9tudi\u00e9e au cas par cas afin de vous proposer\r\n                        une solution adapt\u00e9e \u00e0 vos besoins et aux contraintes de votre\r\n                        \u00e9v\u00e9nement.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/details>\r\n\r\n\r\n            <!-- =================================================\r\n                 4 \u2014 LIVRAISON ET INSTALLATION\r\n            ================================================== -->\r\n\r\n            <details class=\"faq-item\">\r\n\r\n                <summary>\r\n\r\n                    <span>\r\n                        LIVREZ-VOUS ET INSTALLEZ-VOUS LES D\u00c9CORS ?\r\n                    <\/span>\r\n\r\n                    <span class=\"faq-icon\"><\/span>\r\n\r\n                <\/summary>\r\n\r\n\r\n                <div class=\"faq-answer\">\r\n\r\n                    <p>\r\n                        Oui. Notre \u00e9quipe prend en charge\r\n                        <strong>l\u2019int\u00e9gralit\u00e9 de la prestation<\/strong>, de la\r\n                        conception \u00e0 l\u2019installation. Nous concevons votre d\u00e9cor,\r\n                        puis assurons sa livraison directement \u00e0 l\u2019adresse, \u00e0 la\r\n                        date et \u00e0 l\u2019heure convenues.\r\n                    <\/p>\r\n\r\n                    <p>\r\n                        Notre \u00e9quipe se charge ensuite du\r\n                        <strong>montage et de l\u2019installation de A \u00e0 Z<\/strong>,\r\n                        afin que tout soit pr\u00eat avant l\u2019arriv\u00e9e de vos invit\u00e9s.\r\n                        Vous n\u2019avez plus qu\u2019\u00e0 profiter de l\u2019\u00e9v\u00e9nement et \u00e0\r\n                        <strong>entrer sur le ring<\/strong>.\r\n                    <\/p>\r\n\r\n                    <p>\r\n                        Nous proposons \u00e9galement la pr\u00e9sence\r\n                        <strong>d\u2019animateurs professionnels<\/strong> pour accompagner\r\n                        et dynamiser votre \u00e9v\u00e9nement selon vos besoins.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/details>\r\n\r\n\r\n            <!-- =================================================\r\n                 5 \u2014 TARIF RING \/ CAGE MMA\r\n            ================================================== -->\r\n\r\n            <details class=\"faq-item\">\r\n\r\n                <summary>\r\n\r\n                    <span>\r\n                        COMBIEN CO\u00dbTE UN RING OU UNE CAGE MMA SUR MESURE ?\r\n                    <\/span>\r\n\r\n                    <span class=\"faq-icon\"><\/span>\r\n\r\n                <\/summary>\r\n\r\n\r\n                <div class=\"faq-answer\">\r\n\r\n                    <p>\r\n                        Le tarif d\u2019un\r\n                        <strong>ring ou d\u2019une cage MMA sur mesure<\/strong>\r\n                        d\u00e9pend de nombreux facteurs : les dimensions du projet,\r\n                        les contraintes du lieu, les mat\u00e9riaux et \u00e9quipements\r\n                        utilis\u00e9s, le niveau de personnalisation souhait\u00e9 ainsi\r\n                        que les d\u00e9lais de r\u00e9alisation.\r\n                    <\/p>\r\n\r\n                    <p>\r\n                        Chaque projet \u00e9tant unique, nous vous recommandons fortement\r\n                        de <strong>nous contacter afin d\u2019\u00e9changer sur vos besoins\r\n                        et vos attentes<\/strong>. Nous pourrons ainsi \u00e9tudier votre\r\n                        projet en d\u00e9tail et vous \u00e9tablir\r\n                        <strong>un devis personnalis\u00e9<\/strong> et adapt\u00e9 \u00e0 votre\r\n                        demande.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/details>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>L\u00e0 o\u00f9 chaque \u00e9v\u00e9nement devient une sc\u00e8ne de cin\u00e9ma. Le ring de boxe con\u00e7u pour les tournages, les clips, les shootings, et les \u00e9v\u00e9nements d&rsquo;exception. ENTREZ DANS L\u2019AR\u00c8NE \u00c9V\u00c9NEMENTS ET TOURNAGES ATELIER TEAM BUILDING CHOISISSEZ VOTRE UNIVERS UNE EXPERIENCE DONT VOS INVITES SE SOUVIENDRONT. Transformez n\u2019importe quel lieu en un d\u00e9cor de boxe digne des [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-12718","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cineprod.pro\/index.php?rest_route=\/wp\/v2\/pages\/12718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cineprod.pro\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cineprod.pro\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cineprod.pro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cineprod.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12718"}],"version-history":[{"count":548,"href":"https:\/\/cineprod.pro\/index.php?rest_route=\/wp\/v2\/pages\/12718\/revisions"}],"predecessor-version":[{"id":13639,"href":"https:\/\/cineprod.pro\/index.php?rest_route=\/wp\/v2\/pages\/12718\/revisions\/13639"}],"wp:attachment":[{"href":"https:\/\/cineprod.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}