[{"id":"7285d163","elType":"container","settings":{"boxed_width":{"unit":"px","size":1565,"sizes":[]},"boxed_width_tablet":{"unit":"%","size":"","sizes":[]},"boxed_width_mobile":{"unit":"%","size":"","sizes":[]},"margin":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false},"padding":{"unit":"px","top":"50","right":"50","bottom":"50","left":"50","isLinked":false},"min_height":{"unit":"px","size":0,"sizes":[]},"background_background":"classic","background_color":"#F9F9F9","__globals__":{"background_color":""},"padding_tablet":{"unit":"px","top":"50","right":"50","bottom":"50","left":"50","isLinked":true},"padding_mobile":{"unit":"px","top":"25","right":"25","bottom":"25","left":"25","isLinked":true},"_title":"Gammes de produits"},"elements":[{"id":"6ee54ab9","elType":"container","settings":{"content_width":"full","flex_direction":"row","flex_justify_content":"space-between","flex_align_items":"center","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":true},"_title":"Gammes de produits \u2014 titres + grille"},"elements":[{"id":"498e721","elType":"container","settings":{"content_width":"full","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":true},"_title":"Gammes de produits \u2014 titres"},"elements":[{"id":"746e5860","elType":"widget","settings":{"title":"Nos gammes de produits","header_size":"p","__globals__":{"typography_typography":"globals\/typography?id=surtitre"}},"elements":[],"widgetType":"heading"},{"id":"1892795b","elType":"widget","settings":{"title":"Des \u00e9quipements performants pour<br>tous vos besoins industriels","header_size":"h2","text_stroke_text_stroke_type":"yes","__globals__":{"title_color":"globals\/colors?id=text","typography_typography":"globals\/typography?id=titre_section"}},"elements":[],"widgetType":"heading"}],"isInner":true},{"id":"6b35f2f4","elType":"widget","settings":{"html":"<style>\r\n    \/* Fl\u00e8ches *\/\r\n.custom-arrows-gamme {\r\n  display: flex;\r\n  gap: 16px;\r\n  justify-content: flex-end;\r\n  padding: 0 20px;\r\n  margin-bottom: 20px;\r\n  opacity: 1;\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease;\r\n  position: relative;\r\n}\r\n\r\n.gamme-swiper-wrapper-container:hover .custom-arrows-gamme {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n.swipe-indicator-gamme {\r\n  cursor: pointer;\r\n  width: 50px;\r\n  height: 60px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  opacity: 1;\r\n  visibility: visible;\r\n  pointer-events: auto;\r\n  transition: opacity 0.4s ease, visibility 0.4s ease;\r\n}\r\n\r\n.swipe-indicator-gamme.hidden {\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  pointer-events: none;\r\n}\r\n\r\n.arrow-img {\r\n  width: 40px;\r\n  height: auto;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .custom-arrows-gamme {\r\n    position: static;\r\n    justify-content: flex-end;\r\n    margin-top: 20px;\r\n    padding: 0;\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .elementor-element.elementor-element-f55de47.elementor-widget.elementor-widget-html {\r\n    margin-left: auto;\r\n}\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<div class=\"custom-arrows-gamme\">\r\n    <div class=\"swipe-indicator-gamme hidden\" id=\"swipe-prev-gamme\">\r\n      <img src=\"\/wp-content\/uploads\/2025\/07\/icon-arrow-backward-outline\" alt=\"Pr\u00e9c\u00e9dent\" class=\"arrow-img\" \/>\r\n    <\/div>\r\n    <div class=\"swipe-indicator-gamme\" id=\"swipe-next-gamme\">\r\n      <img src=\"\/wp-content\/uploads\/2025\/07\/icon-arrow-forward-outline.png\" alt=\"Suivant\" class=\"arrow-img\" \/>\r\n    <\/div>\r\n  <\/div>"},"elements":[],"widgetType":"html"}],"isInner":true},{"id":"5f0ed316","elType":"widget","settings":{"html":"<style>\r\n\/* === SWIPER GAMME === *\/\r\n.gamme-swiper-wrapper-container {\r\n  margin-top: 30px;\r\n  position: relative;\r\n  z-index: 2;\r\n  cursor: grab;\r\n}\r\n\r\n.gamme-swiper-wrapper-container:active {\r\n  cursor: grabbing;\r\n}\r\n\r\n.gamme-swiper {\r\n  padding-bottom: 40px;\r\n  overflow: visible;\r\n}\r\n\r\n.gamme-swiper .swiper-wrapper {\r\n  gap: 0;\r\n  align-items: stretch;\r\n}\r\n\r\n.gamme-swiper .swiper-slide {\r\n  background: #F7F7F7;\r\n  border-radius: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: stretch;\r\n  text-align: center;\r\n  margin-right: 40px;\r\n  width: 400px;\r\n  max-width: none;\r\n}\r\n\r\n.gamme-swiper .gamme-slide-content img {\r\n  max-height: 300px;\r\n  object-fit: contain;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.gamme-swiper .gamme-badge {\r\n  background-color: #00AA7A;\r\n  color: white;\r\n  font-size: 14px;\r\n  padding: 10px;\r\n  border-radius: 4px;\r\n  margin: 10px;\r\n  width: 50%;\r\n}\r\n\r\n.gamme-swiper .gamme-label {\r\n  background-color: #222;\r\n  color: white;\r\n  padding: 8px 12px;\r\n  border-top-left-radius: 5px;\r\n  font-style: italic;\r\n  font-weight: 600;\r\n  margin-left: auto;\r\n  width: 50%;\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<div class=\"gamme-swiper-wrapper-container\">\r\n\r\n  <div class=\"swiper gamme-swiper\">\r\n    <div class=\"swiper-wrapper\">\r\n\r\n      <div class=\"swiper-slide\">\r\n        <div class=\"gamme-slide-content\">\r\n          <div class=\"gamme-badge\">Boitiers d\u2019Acc\u00e8s Machines<\/div>\r\n          <img src=\"\/wp-content\/uploads\/2025\/07\/equipement-1.png\" alt=\"RAS\">\r\n          <div class=\"gamme-label\">Gamme RAS<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"swiper-slide\">\r\n        <div class=\"gamme-slide-content\">\r\n          <div class=\"gamme-badge\">Routeur VPN Industriel<\/div>\r\n          <img src=\"\/wp-content\/uploads\/2025\/07\/equipement-1.png\" alt=\"IPL\">\r\n          <div class=\"gamme-label\">Gamme IPL<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"swiper-slide\">\r\n        <div class=\"gamme-slide-content\">\r\n          <div class=\"gamme-badge\">Extenseur d\u2019Ethernet<\/div>\r\n          <img src=\"\/wp-content\/uploads\/2025\/07\/equipement-1.png\" alt=\"XSLAN\">\r\n          <div class=\"gamme-label\">Gamme XSLAN et XELAN<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"swiper-slide\">\r\n        <div class=\"gamme-slide-content\">\r\n          <div class=\"gamme-badge\">Concentrateur VPN<\/div>\r\n          <img src=\"\/wp-content\/uploads\/2025\/07\/equipement-2.png\" alt=\"IPL\">\r\n          <div class=\"gamme-label\">Gamme SIG<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"swiper-slide\">\r\n        <div class=\"gamme-slide-content\">\r\n          <div class=\"gamme-badge\">Switch SHDSL tactique<\/div>\r\n          <img src=\"\/wp-content\/uploads\/2025\/07\/equipement-3.png\" alt=\"XSMIL\">\r\n          <div class=\"gamme-label\">Gamme XSMIL<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const swiperGamme = new Swiper('.gamme-swiper', {\r\n    slidesPerView: 1.2,\r\n    spaceBetween: 0,\r\n    loop: false,\r\n    centeredSlides: false,\r\n    breakpoints: {\r\n      768: {\r\n        slidesPerView: 2,\r\n        spaceBetween: 0\r\n      },\r\n      1024: {\r\n        slidesPerView: 3.5,\r\n        spaceBetween: 0\r\n      }\r\n    }\r\n  });\r\n\r\n  const swipeNextGamme = document.getElementById('swipe-next-gamme');\r\n  const swipePrevGamme = document.getElementById('swipe-prev-gamme');\r\n\r\n  const updateArrowsGamme = () => {\r\n    swipePrevGamme.classList.toggle('hidden', swiperGamme.isBeginning);\r\n    swipeNextGamme.classList.toggle('hidden', swiperGamme.isEnd);\r\n  };\r\n\r\n  swipeNextGamme?.addEventListener('click', () => {\r\n    swiperGamme.slideNext();\r\n    setTimeout(updateArrowsGamme, 100);\r\n  });\r\n\r\n  swipePrevGamme?.addEventListener('click', () => {\r\n    swiperGamme.slidePrev();\r\n    setTimeout(updateArrowsGamme, 100);\r\n  });\r\n\r\n  swiperGamme.el?.addEventListener('wheel', function (e) {\r\n    if (e.shiftKey) {\r\n      e.preventDefault();\r\n      e.deltaY > 0 ? swiperGamme.slideNext() : swiperGamme.slidePrev();\r\n      setTimeout(updateArrowsGamme, 100);\r\n    }\r\n  }, { passive: false });\r\n\r\n  swiperGamme.on('slideChange resize touchEnd transitionEnd', updateArrowsGamme);\r\n  updateArrowsGamme();\r\n});\r\n<\/script>\r\n"},"elements":[],"widgetType":"html"}],"isInner":true}]