{"id":145,"date":"2025-11-04T17:51:42","date_gmt":"2025-11-04T17:51:42","guid":{"rendered":"https:\/\/montagecloture.com\/?page_id=145"},"modified":"2025-11-12T10:31:49","modified_gmt":"2025-11-12T10:31:49","slug":"popup_langue_v2","status":"publish","type":"page","link":"https:\/\/montagecloture.com\/?page_id=145","title":{"rendered":"popup_langue_v2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"145\" class=\"elementor elementor-145\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19516d5 e-flex e-con-boxed e-con e-parent\" data-id=\"19516d5\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf053eb elementor-widget elementor-widget-html\" data-id=\"cf053eb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Popup 1 : choix de langue -->\r\n<div id=\"popupLangue\" class=\"popup-overlay active\">\r\n  <div class=\"background-image\"><\/div>\r\n  <div class=\"popup-content fade-in\">\r\n    <h2>Choisissez votre langue \/ Elija su idioma :<\/h2>\r\n    <div class=\"popup-buttons\">\r\n      <img decoding=\"async\" src=\"https:\/\/montagecloture.com\/wp-content\/uploads\/2025\/11\/depositphotos_13961460-stock-photo-the-french-flag.webp\" alt=\"Fran\u00e7ais\" class=\"popup-img\" id=\"langFR\">\r\n      <img decoding=\"async\" src=\"https:\/\/montagecloture.com\/wp-content\/uploads\/2025\/11\/66358593-rendu-3d-d-espagne-drapeau-sur-un-bouton.jpg\" alt=\"Espagnol\" class=\"popup-img\" id=\"langES\">\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Popup 2 : choix du type de cl\u00f4ture -->\r\n<div id=\"popupType\" class=\"popup-overlay\" style=\"display: none;\">\r\n  <div class=\"background-image\"><\/div>\r\n  <div class=\"popup-content\">\r\n    <h2>S\u00e9lectionnez votre type de cl\u00f4ture :<\/h2>\r\n    <div class=\"popup-buttons\">\r\n        <div class=\"popup-item\">\r\n            <img decoding=\"async\" src=\"https:\/\/montagecloture.com\/wp-content\/uploads\/2025\/11\/Pleine_Anthracite-scaled-1.jpg\" alt=\"pleine\" class=\"popup-img\" id=\"type1\">\r\n            <p class=\"popup-label\">PLEINE<\/p>\r\n        <\/div>\r\n        <div class=\"popup-item\">\r\n            <img decoding=\"async\" src=\"https:\/\/montagecloture.com\/wp-content\/uploads\/2025\/11\/Persienne_Anthracite-scaled-1.jpg\" alt=\"persienne\" class=\"popup-img\" id=\"type2\">\r\n            <p class=\"popup-label\">PERSIENNE<\/p>\r\n        <\/div>\r\n        <div class=\"popup-item\">\r\n            <img decoding=\"async\" src=\"https:\/\/montagecloture.com\/wp-content\/uploads\/2025\/11\/Ajouree_Anthracite-scaled-1.jpg\" alt=\"ajoure\" class=\"popup-img\" id=\"type3\">\r\n            <p class=\"popup-label\">AJOUREE<\/p>\r\n        <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* --- Overlay g\u00e9n\u00e9ral --- *\/\r\n.popup-overlay {\r\n  position: fixed;\r\n  inset: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 9999;\r\n  overflow-y: auto; \/* scroll si n\u00e9cessaire *\/\r\n  padding: 10px;    \/* espace autour du popup sur mobile *\/\r\n}\r\n\r\n\/* Image de fond globale *\/\r\n.background-image {\r\n  position: fixed;\r\n  inset: 0;\r\n  background-image: url(\"https:\/\/montagecloture.com\/wp-content\/uploads\/2025\/11\/DeWatermark.ai_1762278135747.jpeg\");\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  z-index: -1;\r\n}\r\n\r\n\/* --- Contenu popup --- *\/\r\n.popup-content {\r\n  background: rgba(255,255,255,0.95);\r\n  padding: 30px;\r\n  border-radius: 20px;\r\n  text-align: center;\r\n  box-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n  width: 100%;\r\n  max-width: 800px;\r\n  opacity: 0;\r\n  transform: scale(0.9);\r\n  transition: all 0.4s ease;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.popup-content.fade-in {\r\n  opacity: 1;\r\n  transform: scale(1);\r\n}\r\n\r\n.popup-content.fade-out {\r\n  opacity: 0;\r\n  transform: scale(0.8);\r\n}\r\n\r\n\/* --- Titre --- *\/\r\n.popup-content h2 {\r\n  margin-bottom: 30px;\r\n  font-size: 1.6rem;\r\n  color: #222;\r\n  line-height: 1.3;\r\n}\r\n\r\n\/* --- Images rondes --- *\/\r\n.popup-img {\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  transition: transform 0.25s, box-shadow 0.25s;\r\n  object-fit: cover;\r\n  border: 4px solid #fff;\r\n}\r\n\r\n.popup-img:hover {\r\n  transform: scale(1.12);\r\n  box-shadow: 0 8px 20px rgba(0,0,0,0.35);\r\n}\r\n\r\n\/* --- Popup 1 : choix de langue --- *\/\r\n#popupLangue .popup-buttons {\r\n  display: flex;\r\n  justify-content: space-between; \/* FR \u00e0 gauche, ES \u00e0 droite *\/\r\n  align-items: center;\r\n  width: 100%;\r\n  max-width: 400px;\r\n  margin: 0 auto;\r\n  gap: 20px;\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n#popupLangue .popup-img {\r\n  width: 48%;  \/* presque la moiti\u00e9 du conteneur *\/\r\n  height: auto;\r\n  max-width: 180px;\r\n}\r\n\r\n\/* --- Popup 2 : choix type cl\u00f4ture --- *\/\r\n#popupType .popup-content {\r\n  max-width: 1000px;\r\n  padding: 40px;\r\n}\r\n\r\n#popupType .popup-content h2 {\r\n  font-size: 1.8rem;\r\n  margin-bottom: 40px;\r\n}\r\n\r\n#popupType .popup-buttons {\r\n  display: flex;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  gap: 40px;\r\n}\r\n\r\n#popupType .popup-img {\r\n  width: 25vw;  \/* redimensionnement proportionnel \u00e0 l\u2019\u00e9cran *\/\r\n  max-width: 260px;\r\n  height: auto;\r\n  border-radius: 50%;\r\n  border: 5px solid #fff;\r\n}\r\n\r\n#popupType .popup-item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n#popupType .popup-label {\r\n  margin-top: 12px;\r\n  font-weight: bold;\r\n  font-size: 1.1rem;\r\n  color: #222;\r\n  letter-spacing: 1px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n\/* --- Responsive mobile\/tablette --- *\/\r\n@media (max-width: 768px) {\r\n  .popup-content {\r\n    max-width: 95%;\r\n    padding: 20px;\r\n  }\r\n\r\n  .popup-content h2 {\r\n    font-size: 1.3rem;\r\n  }\r\n\r\n  \/* Popup 1 : boutons langue *\/\r\n  #popupLangue .popup-img {\r\n    max-width: 140px;\r\n    width: 48%;\r\n  }\r\n\r\n  \/* Popup 2 : type cl\u00f4ture *\/\r\n  #popupType .popup-content h2 {\r\n    font-size: 1.4rem;\r\n    margin-bottom: 30px;\r\n  }\r\n\r\n  #popupType .popup-img {\r\n    width: 40vw; \/* proportionnel \u00e0 la largeur de l'\u00e9cran *\/\r\n    max-width: 180px;\r\n  }\r\n\r\n  #popupType .popup-buttons {\r\n    gap: 25px;\r\n  }\r\n}\r\n\r\n\/* --- Tr\u00e8s petits \u00e9crans portrait serr\u00e9 --- *\/\r\n@media (max-width: 480px) {\r\n  .popup-content {\r\n    padding: 15px;\r\n  }\r\n\r\n  .popup-content h2 {\r\n    font-size: 1.1rem;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  \/* Popup 1 *\/\r\n  #popupLangue .popup-img {\r\n    width: 45%;\r\n    max-width: 120px;\r\n  }\r\n\r\n  \/* Popup 2 *\/\r\n  #popupType .popup-img {\r\n    width: 45vw;  \/* proportionnel \u00e0 l'\u00e9cran *\/\r\n    max-width: 150px;\r\n  }\r\n\r\n  #popupType .popup-content h2 {\r\n    font-size: 1.2rem;\r\n  }\r\n\r\n  #popupType .popup-buttons {\r\n    gap: 15px;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\nwindow.addEventListener('load', () => {\r\n  const popupLangue = document.getElementById('popupLangue');\r\n  const popupType = document.getElementById('popupType');\r\n  const contentLangue = popupLangue.querySelector('.popup-content');\r\n  const contentType = popupType.querySelector('.popup-content');\r\n  const popupTitle = contentType.querySelector('h2');\r\n  const popupItems = contentType.querySelectorAll('.popup-item');\r\n\r\n  let currentLang = \"FR\"; \/\/ par d\u00e9faut\r\n\r\n  \/\/ Texte en FR et ES\r\n  const textFR = [\"S\u00e9lectionnez votre type de cl\u00f4ture :\", \"PLEINE\", \"PERSIENNE\", \"AJOUREE\"];\r\n  const textES = [\"Seleccione su tipo de cerca :\", \"PERSIANA\", \"AJOURADA\"];\r\n\r\n  \/\/ URLs pour chaque type selon la langue\r\n  const urls = {\r\n    FR: [\"https:\/\/montagecloture.com\/?page_id=98\", \"https:\/\/montagecloture.com\/?page_id=111\", \"https:\/\/montagecloture.com\/?page_id=88\"],\r\n    ES: [\"https:\/\/montagecloture.com\/?page_id=116\", \"https:\/\/montagecloture.com\/?page_id=93\"] \/\/ PLENA exclu\r\n  };\r\n\r\n  \/\/ Affiche le popup 1 \u00e0 l\u2019arriv\u00e9e\r\n  setTimeout(() => {\r\n    contentLangue.classList.add('fade-in');\r\n  }, 300);\r\n\r\n  \/\/ --- Fonction pour afficher popup 2 avec la langue ---\r\n  function showPopupType(lang) {\r\n    currentLang = lang;\r\n\r\n    if (lang === \"FR\") {\r\n      popupTitle.textContent = textFR[0];\r\n      popupItems[0].style.display = \"flex\";\r\n      popupItems[0].querySelector('.popup-label').textContent = textFR[1];\r\n      popupItems[1].querySelector('.popup-label').textContent = textFR[2];\r\n      popupItems[2].querySelector('.popup-label').textContent = textFR[3];\r\n    } else if (lang === \"ES\") {\r\n      popupTitle.textContent = textES[0];\r\n      \/\/ Masquer le premier item (PLENA)\r\n      popupItems[0].style.display = \"none\";\r\n      popupItems[1].querySelector('.popup-label').textContent = textES[0+1]; \/\/ PERSIANA\r\n      popupItems[2].querySelector('.popup-label').textContent = textES[1+1]; \/\/ AJOURADA\r\n    }\r\n\r\n    \/\/ Animation de disparition du popup langue\r\n    contentLangue.classList.remove('fade-in');\r\n    contentLangue.classList.add('fade-out');\r\n\r\n    setTimeout(() => {\r\n      popupLangue.style.display = \"none\";\r\n      popupType.style.display = \"flex\";\r\n      setTimeout(() => {\r\n        contentType.classList.add('fade-in');\r\n      }, 100);\r\n    }, 400);\r\n  }\r\n\r\n  \/\/ --- CLIC SUR FR ---\r\n  document.getElementById('langFR').addEventListener('click', () => {\r\n    showPopupType(\"FR\");\r\n  });\r\n\r\n  \/\/ --- CLIC SUR ES ---\r\n  document.getElementById('langES').addEventListener('click', () => {\r\n    showPopupType(\"ES\");\r\n  });\r\n\r\n  \/\/ --- CLICS SUR LES TYPES DE CL\u00d4TURE ---\r\n  popupItems.forEach((item, index) => {\r\n    item.addEventListener('click', () => {\r\n      contentType.classList.remove('fade-in');\r\n      contentType.classList.add('fade-out');\r\n      setTimeout(() => {\r\n        \/\/ Adapter l'index si ES (on ignore PLENA)\r\n        if(currentLang === \"ES\") {\r\n          if(index === 0) return; \/\/ PLENA cliqu\u00e9, ne fait rien\r\n          const esIndex = index - 1; \/\/ d\u00e9calage pour ES\r\n          window.location.href = urls.ES[esIndex];\r\n        } else {\r\n          window.location.href = urls.FR[index];\r\n        }\r\n      }, 300);\r\n    });\r\n  });\r\n});\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Choisissez votre langue \/ Elija su idioma : S\u00e9lectionnez votre type de cl\u00f4ture : PLEINE PERSIENNE AJOUREE<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-145","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/montagecloture.com\/index.php?rest_route=\/wp\/v2\/pages\/145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/montagecloture.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/montagecloture.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/montagecloture.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/montagecloture.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=145"}],"version-history":[{"count":48,"href":"https:\/\/montagecloture.com\/index.php?rest_route=\/wp\/v2\/pages\/145\/revisions"}],"predecessor-version":[{"id":308,"href":"https:\/\/montagecloture.com\/index.php?rest_route=\/wp\/v2\/pages\/145\/revisions\/308"}],"wp:attachment":[{"href":"https:\/\/montagecloture.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}