{"id":2531,"date":"2026-07-28T08:37:37","date_gmt":"2026-07-28T06:37:37","guid":{"rendered":"https:\/\/www.norki.com\/studio-chalet\/?page_id=2531"},"modified":"2026-07-31T14:35:17","modified_gmt":"2026-07-31T12:35:17","slug":"megeve-mont-d-arbois","status":"publish","type":"page","link":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/","title":{"rendered":"Sicoria"},"content":{"rendered":"\n<style>\n\/* Variables locales au composant si besoin, mais on garde la structure globale *\/\n:root {\n  --nk-hero-padding-desk: 0 40px 40px 40px;\n  --nk-hero-padding-tab: 0 30px 30px 30px;\n  --nk-hero-padding-mob: 0 20px 24px 20px;\n}\n\n.nk-hero {\n  position: relative;\n  width: 100%;\n  \/* Height set above 100vh to naturally nudge users to scroll down *\/\n  height: 120vh; \n  min-height: 700px;\n  overflow: hidden;\n  background-color: #000000;\n}\n\n.nk-hero__bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n\n.nk-hero__bg img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center center;\n  display: block;\n}\n\n\/* Linear gradient overlay for solid text legibility *\/\n.nk-hero__overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 40%;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);\n  z-index: 2;\n  pointer-events: none;\n}\n\n.nk-hero__content {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  z-index: 3;\n  padding: var(--nk-hero-padding-desk);\n  color: #ffffff;\n  box-sizing: border-box;\n}\n\n\/* Header Text (Titres - Larger typography and higher positioning) *\/\n.nk-hero__header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  margin-bottom: 35px; \/* Spacing increased to detach the title row from the line below *\/\n  gap: 20px;\n  width: 100%;\n}\n\n.nk-hero__title-wrapper {\n  flex: 1 1 65%;\n  max-width: calc(100% - 250px);\n}\n\n.nk-hero__subtitle-wrapper {\n  flex: 0 0 auto;\n  text-align: right;\n  min-width: max-content;\n}\n\n.nk-hero__title {\n  color: white;\n  font-size: clamp(2.2rem, 3.2vw, 3.2rem); \/* Larger fluid font size *\/\n  letter-spacing: 0.02em;\n  line-height: 1.1;\n  font-weight: normal;\n  margin: 0;\n}\n\n.nk-hero__subtitle {\n  font-size: clamp(2.2rem, 3.2vw, 3.2rem); \/* Larger fluid font size to match title *\/\n  line-height: 1.1;\n  font-weight: normal;\n  display: block;\n}\n\n\/* White Divider *\/\n.nk-hero__divider {\n  width: 100%;\n  height: 1px;\n  background-color: rgba(255, 255, 255, 0.6);\n  border: none;\n  margin-bottom: 16px;\n}\n\n\/* Meta Informations (Equal spacing layout) *\/\n.nk-hero__meta {\n  display: flex;\n  justify-content: flex-start;\n  gap: 40px; \/* Equal spacing between each item *\/\n}\n\n.nk-hero__meta-item {\n  font-size: 0.75rem;\n  letter-spacing: 0.05em;\n  text-transform: capitalize;\n}\n\n\/* ============================================\n    RESPONSIVE TABLETTE (\u2264 1024px)\n============================================ *\/\n@media (max-width: 1024px) {\n  .nk-hero__content {\n    padding: var(--nk-hero-padding-tab);\n  }\n  .nk-hero__title,\n  .nk-hero__subtitle {\n    font-size: clamp(1.8rem, 2.8vw, 2.4rem);\n  }\n  .nk-hero__meta {\n    gap: 30px;\n  }\n}\n\n\/* ============================================\n    RESPONSIVE MOBILE (\u2264 640px)\n============================================ *\/\n@media (max-width: 640px) {\n  .nk-hero {\n    height: 110vh; \n  }\n\n  .nk-hero__bg img {\n    object-position: 50% center; \/* Ajust\u00e9 l\u00e9g\u00e8rement pour le mobile si besoin, ou retour \u00e0 center *\/\n  }\n\n  .nk-hero__content {\n    padding: var(--nk-hero-padding-mob);\n  }\n\n  .nk-hero__header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n    margin-bottom: 20px;\n  }\n\n  .nk-hero__title-wrapper,\n  .nk-hero__subtitle-wrapper {\n    flex: none;\n    max-width: 100%;\n    min-width: 0;\n  }\n\n  .nk-hero__subtitle-wrapper {\n    text-align: left;\n  }\n\n  .nk-hero__title {\n    font-size: 1.8rem;\n  }\n\n  .nk-hero__subtitle {\n    font-size: 1.7rem;\n  }\n\n  \/* Configuration du scroll horizontal fluide sur mobile *\/\n  .nk-hero__meta {\n    flex-wrap: nowrap; \/* Maintient les \u00e9l\u00e9ments sur 1 ligne *\/\n    gap: 25px; \/* Espacement raisonnable *\/\n    overflow-x: auto; \/* Autorise le scroll *\/\n    -webkit-overflow-scrolling: touch; \/* Inertie iOS *\/\n    scrollbar-width: none; \/* Cache la barre Firefox *\/\n    -ms-overflow-style: none; \/* Cache la barre IE\/Edge *\/\n    padding-bottom: 2px;\n    padding-left: 8px; \/* Ajout d'une marge de s\u00e9curit\u00e9 pour \u00e9viter que la premi\u00e8re lettre soit rogn\u00e9e *\/\n    padding-right: 8px;\n  }\n  \n  \/* Cache la scrollbar sur Chrome\/Safari *\/\n  .nk-hero__meta::-webkit-scrollbar {\n    display: none;\n  }\n\n  .nk-hero__meta-item {\n    white-space: nowrap; \/* Emp\u00eache de passer \u00e0 la ligne \u00e0 l'int\u00e9rieur d'un item *\/\n    flex-shrink: 0; \/* Emp\u00eache le texte d'\u00eatre \u00e9cras\u00e9 *\/\n  }\n\n  .nk-hero__meta-item:nth-child(3) {\n    margin-left: 0;\n    flex-basis: auto;\n    margin-top: 0;\n  }\n}\n<\/style>\n\n<section class=\"nk-hero\">\n  <div class=\"nk-hero__bg\">\n    <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2025_06_25_Norki_Dining-4K.jpg\" alt=\"Mont d'Arbois Luxury Chalet in Meg\u00e8ve\" loading=\"eager\">\n    <div class=\"nk-hero__overlay\" aria-hidden=\"true\"><\/div>\n  <\/div>\n  \n  <div class=\"nk-hero__content\">\n    <div class=\"nk-hero__header\">\n      <!-- Wrapper pour le titre -->\n      <div class=\"nk-hero__title-wrapper\">\n        <h1 class=\"nk-hero__title avenirmedium-font\">Mont d&rsquo;Arbois Luxury Chalet<\/h1>\n      <\/div>\n      <!-- Wrapper pour le sous-titre -->\n      <div class=\"nk-hero__subtitle-wrapper\">\n        <span class=\"nk-hero__subtitle baskerville-italic-font\">Chalet in Meg\u00e8ve<\/span>\n      <\/div>\n    <\/div>\n    \n    <hr class=\"nk-hero__divider\" aria-hidden=\"true\">\n    \n    <!-- Meta informations d\u00e9filantes -->\n    <div class=\"nk-hero__meta\">\n      <span class=\"nk-hero__meta-item avenirmedium-font\">Meg\u00e8ve<\/span>\n      <span class=\"nk-hero__meta-item avenirmedium-font\">Contemporary Luxury<\/span>\n      <span class=\"nk-hero__meta-item avenirmedium-font\">800 sqm<\/span>\n      <span class=\"nk-hero__meta-item avenirmedium-font\">2025<\/span>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  const metaContainer = document.querySelector('.nk-hero__meta');\n  if (!metaContainer) return;\n\n  let isAnimating = false;\n  let animationFrameId;\n  let direction = 1; \/\/ 1 = droite, -1 = gauche\n  let speed = 0.5; \/\/ Vitesse divis\u00e9e par 3 (0.5 pixel par frame pour une douceur maximale)\n  let resumeTimeout;\n  let extremityTimeout; \/\/ Identifiant pour la pause aux extr\u00e9mit\u00e9s et au chargement\n  let isInteracting = false;\n  let isPausedAtExtremity = false; \/\/ Verrou de temporisation\n  let currentScroll = metaContainer.scrollLeft;\n\n  \/\/ Fonction d'animation \"va-et-vient\"\n  function autoScroll() {\n    if (isInteracting) return;\n    if (isPausedAtExtremity) {\n       animationFrameId = requestAnimationFrame(autoScroll);\n       return;\n    }\n    \n    \/\/ Si le conteneur ne d\u00e9borde pas (ex: sur PC), on ne fait rien\n    if (metaContainer.scrollWidth <= metaContainer.clientWidth) {\n       animationFrameId = requestAnimationFrame(autoScroll);\n       return;\n    }\n\n    currentScroll += speed * direction;\n    metaContainer.scrollLeft = Math.round(currentScroll);\n\n    const maxScroll = metaContainer.scrollWidth - metaContainer.clientWidth;\n\n    \/\/ PROTECTION ANTI-WORDPRESS : Remplacement des esperluettes \"&#038;&#038;\" par des IF imbriqu\u00e9s\n    if (direction === 1) {\n      if (metaContainer.scrollLeft >= maxScroll - 1) {\n        isPausedAtExtremity = true;\n        extremityTimeout = setTimeout(() => {\n          direction = -1;\n          currentScroll = metaContainer.scrollLeft;\n          isPausedAtExtremity = false;\n        }, 2000); \/\/ Attente de 2 secondes \u00e0 l'extr\u00e9mit\u00e9 droite\n      }\n    } else if (direction === -1) {\n      if (metaContainer.scrollLeft <= 1) {\n        isPausedAtExtremity = true;\n        extremityTimeout = setTimeout(() => {\n          direction = 1;\n          currentScroll = metaContainer.scrollLeft;\n          isPausedAtExtremity = false;\n        }, 2000); \/\/ Attente de 2 secondes \u00e0 l'extr\u00e9mit\u00e9 gauche\n      }\n    }\n\n    animationFrameId = requestAnimationFrame(autoScroll);\n  }\n\n  \/\/ D\u00e9marrer l'animation\n  function startAnimation() {\n    if (!isAnimating) {\n      isAnimating = true;\n      currentScroll = metaContainer.scrollLeft; \/\/ Synchronisation initiale\n      \n      \/\/ PAUSE INITIALE DE 2 SECONDES AU CHARGEMENT \/ APPARITION \u00c0 L'\u00c9CRAN\n      isPausedAtExtremity = true;\n      clearTimeout(extremityTimeout);\n      extremityTimeout = setTimeout(() => {\n        isPausedAtExtremity = false;\n      }, 2000);\n\n      autoScroll();\n    }\n  }\n\n  \/\/ Arr\u00eater l'animation\n  function stopAnimation() {\n    isAnimating = false;\n    cancelAnimationFrame(animationFrameId);\n  }\n\n  \/\/ Gestion des interactions (pause l'animation, puis la reprend)\n  function handleInteraction() {\n    isInteracting = true;\n    isPausedAtExtremity = false; \/\/ Reset de la pause en cas de geste\n    clearTimeout(extremityTimeout); \/\/ Annulation du d\u00e9lai d'attente initial ou d'extr\u00e9mit\u00e9\n    stopAnimation();\n    clearTimeout(resumeTimeout);\n    \n    \/\/ Reprise de l'animation apr\u00e8s 3 secondes d'inactivit\u00e9\n    resumeTimeout = setTimeout(() => {\n      isInteracting = false;\n      \/\/ Ne relance que si on est sur mobile\n      if (window.innerWidth <= 640) {\n        currentScroll = metaContainer.scrollLeft; \/\/ Resync\n        startAnimation();\n      }\n    }, 3000);\n  }\n\n  \/\/ Intersection Observer pour lancer l'animation uniquement si visible \u00e0 l'\u00e9cran\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        \/\/ Uniquement sur mobile\n        if (window.innerWidth <= 640) {\n            startAnimation();\n        }\n      } else {\n        stopAnimation();\n      }\n    });\n  }, { threshold: 0 });\n\n  observer.observe(metaContainer);\n\n  \/* \u00c9couteurs d'\u00e9v\u00e9nements (touch uniquement pour \u00e9viter les conflits) *\/\n  metaContainer.addEventListener('touchstart', () => {\n    currentScroll = metaContainer.scrollLeft; \n    handleInteraction();\n  }, { passive: true });\n  \n  metaContainer.addEventListener('touchmove', () => {\n    currentScroll = metaContainer.scrollLeft; \n    handleInteraction();\n  }, { passive: true });\n  \n  metaContainer.addEventListener('wheel', handleInteraction, { passive: true });\n\n  \/\/ Reset ou d\u00e9marrage en cas de redimensionnement de la fen\u00eatre\n  window.addEventListener('resize', () => {\n    if (window.innerWidth > 640) {\n       stopAnimation();\n       metaContainer.scrollLeft = 0; \/\/ Remise \u00e0 z\u00e9ro si repasse sur Desktop\n       currentScroll = 0;\n    } else {\n       if (!isInteracting) {\n         startAnimation();\n       }\n    }\n  });\n});\n<\/script>\n\n\n\n<style>\n\/* ==========================================================================\n   COMPOSANT : ARCHITECTURE MEGEVE\n   ========================================================================== *\/\n\n.nk-archi-megeve {\n    background-color: var(--color-norki-beige, #f8f0ea);\n    padding: var(--section-pad-v-dt, 80px) var(--section-pad-h-dt, 5vw);\n    color: #000000;\n    width: 100%;\n    box-sizing: border-box;\n    \n    \/* Grille Desktop *\/\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: auto 1fr auto;\n    grid-template-areas:\n        \"intro-text intro-title\"\n        \"main-media plan-media\"\n        \"main-media footer-text\";\n    row-gap: 40px; \/* Espace vertical fluide *\/\n    column-gap: clamp(40px, 8vw, 120px); \/* Goutti\u00e8re centrale *\/\n    overflow: hidden;\n}\n\n.nk-archi-megeve * {\n    box-sizing: border-box;\n}\n\n\/* --- Typographie Globale du bloc --- *\/\n.nk-archi-megeve h2, .nk-archi-megeve h3, .nk-archi-megeve p {\n    margin: 0;\n}\n\n.nk-archi-megeve__title-main {\n    font-size: clamp(1.4rem, 2vw, 26px);\n    line-height: 1.25;\n    font-weight: normal;\n    letter-spacing: -0.01em;\n}\n\n.nk-archi-megeve__title-sub {\n    display: block;\n    font-size: 1.05em;\n    margin-top: 4px;\n}\n\n.nk-archi-megeve__desc {\n    font-size: 0.95rem;\n    line-height: 1.7;\n    letter-spacing: 0.01em;\n}\n\n\/* --- Styles Liens \u00c9ditoriaux --- *\/\n.nk-editorial-inline-link {\n    color: inherit;\n    text-decoration: underline;\n    text-decoration-color: currentColor;\n    text-underline-offset: 3px;\n    text-decoration-thickness: 1px;\n    transition: text-decoration-color 0.3s ease, opacity 0.3s ease;\n}\n\n.nk-editorial-inline-link:hover {\n    text-decoration-color: transparent;\n    opacity: 0.7;\n}\n\n\/* --- Placement Grid (Desktop) --- *\/\n\n\/* Haut Gauche : Paragraphe d'intro *\/\n.nk-archi-megeve__intro-text {\n    grid-area: intro-text;\n    max-width: 90%;\n    padding-top: 10px; \/* Alignement optique avec le titre de droite *\/\n}\n\n\/* Haut Droite : Titre principal *\/\n.nk-archi-megeve__intro-title {\n    grid-area: intro-title;\n}\n\n\/* Bas Gauche : Image Principale (S'\u00e9tend sur 2 rang\u00e9es) *\/\n.nk-archi-megeve__main-media {\n    grid-area: main-media;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    z-index: 4;\n}\n\n.nk-archi-megeve__main-img {\n    width: 100%;\n    height: 100%;\n    max-height: 85vh; \/* \u00c9vite que l'image soit trop haute sur les grands \u00e9crans *\/\n    object-fit: cover;\n    object-position: center;\n    display: block;\n}\n\n\/* Milieu Droite : Plan Architectural *\/\n.nk-archi-megeve__plan-media {\n    grid-area: plan-media;\n    display: flex;\n    align-items: center; \/* Centre le plan verticalement dans sa cellule *\/\n    justify-content: flex-start;\n}\n\n.nk-archi-megeve__plan-img {\n    width: 50%;\n    max-width: 480px;\n    height: auto;\n    object-fit: contain;\n}\n\n\/* Bas Droite : Titre et texte hommage *\/\n.nk-archi-megeve__footer-text {\n    grid-area: footer-text;\n    align-self: end; \/* Align\u00e9 en bas, en face du bas de l'image de gauche *\/\n    max-width: 85%;\n}\n\n.nk-archi-megeve__footer-text .nk-archi-megeve__title-main {\n    margin-bottom: 1.5rem;\n}\n\n\/* ==========================================================================\n   RESPONSIVE TABLETTE (\u2264 1024px)\n   ========================================================================== *\/\n@media (max-width: 1024px) {\n    .nk-archi-megeve {\n        padding: var(--section-pad-v-tab, 50px) var(--section-pad-h-tab, 4vw);\n        column-gap: 5vw;\n        row-gap: 30px;\n    }\n    \n    .nk-archi-megeve__intro-text,\n    .nk-archi-megeve__footer-text {\n        max-width: 100%;\n    }\n}\n\n\/* ==========================================================================\n   RESPONSIVE MOBILE (\u2264 900px)\n   ========================================================================== *\/\n@media (max-width: 900px) {\n    \/* Passage en Flexbox pour un contr\u00f4le total de l'ordre d'empilement *\/\n    .nk-archi-megeve {\n        display: flex;\n        flex-direction: column;\n        padding: var(--section-pad-v-mob, 40px) var(--section-pad-h-mob, 20px);\n        gap: 0; \/* G\u00e9r\u00e9 individuellement par les marges *\/\n    }\n\n    \/* 1. Titre (L'art de vivre...) *\/\n    .nk-archi-megeve__intro-title {\n        order: 1;\n        margin-bottom: 24px;\n    }\n\n    \/* 2. Texte Intro (Au coeur de Meg\u00e8ve...) *\/\n    .nk-archi-megeve__intro-text {\n        order: 2;\n        margin-bottom: 40px;\n    }\n\n    \/* 3. Image Principale *\/\n    .nk-archi-megeve__main-media {\n        order: 3;\n        width: 88%; \/* Laisse de l'espace \u00e0 droite pour le d\u00e9bordement du plan *\/\n    }\n\n    .nk-archi-megeve__main-img {\n        max-height: 60vh;\n    }\n\n    \/* 4. Plan (Chevauchement) *\/\n    .nk-archi-megeve__plan-media {\n        order: 4;\n        position: relative;\n        width: 75%;\n        margin-left: auto; \/* Align\u00e9 \u00e0 droite *\/\n        margin-top: -20%;  \/* Marge n\u00e9gative pour chevaucher l'image *\/\n        margin-bottom: 40px;\n        z-index: 2;\n    }\n\n    .nk-archi-megeve__plan-img {\n        width: 100%;\n        max-width: none;\n    }\n\n    \/* 5. Texte Footer (Un Hommage...) *\/\n    .nk-archi-megeve__footer-text {\n        order: 5;\n    }\n}\n<\/style>\n\n<!-- STRUCTURE HTML DU COMPOSANT -->\n<section class=\"nk-archi-megeve\">\n    \n    <!-- Haut Gauche : Texte Intro -->\n    <div class=\"nk-archi-megeve__intro-text\">\n        <p class=\"nk-archi-megeve__desc\">\n            In the heart of <a href=\"https:\/\/www.megeve-tourisme.fr\/en\/\" class=\"nk-editorial-inline-link\" target=\"_blank\" rel=\"noopener noreferrer\">Meg\u00e8ve<\/a>\u2014the iconic <a href=\"https:\/\/www.prefectures-regions.gouv.fr\/provence-alpes-cote-dazur\/Region-et-institutions\/L-action-de-l-Etat\/Massif-des-Alpes\/Presentation-du-massif-des-Alpes\" class=\"nk-editorial-inline-link\" target=\"_blank\" rel=\"noopener noreferrer\">French Alps<\/a> resort where Michelin-starred dining seamlessly pairs with luxury boutiques\u2014a new chapter in high-end interior architecture unfolds. Situated on the prestigious <a href=\"https:\/\/www.saintgervais.com\/je-minspire\/destination-responsable\/le-patrimoine-naturel-de-saint-gervais\/mont-darbois-saint-gervais-les-bains-fr-5747421\/\" class=\"nk-editorial-inline-link\" target=\"_blank\" rel=\"noopener noreferrer\">Mont d&rsquo;Arbois<\/a> plateau, just a short distance from <a href=\"https:\/\/www.geneve.com\/en\" class=\"nk-editorial-inline-link\" target=\"_blank\" rel=\"noopener noreferrer\">Geneva<\/a>, this masterful 800 sqm chalet stands as a beacon of refined design.\n        <\/p>\n    <\/div>\n\n    <!-- Haut Droite : Titre Intro -->\n    <div class=\"nk-archi-megeve__intro-title\">\n        <h2 class=\"nk-archi-megeve__title-main avenirmedium-font\">\n            The Art of Living\n            <span class=\"nk-archi-megeve__title-sub baskerville-italic-font\">at the Peak of Mont d&rsquo;Arbois<\/span>\n        <\/h2>\n    <\/div>\n\n    <!-- Bas Gauche : Image Principale -->\n    <div class=\"nk-archi-megeve__main-media\">\n        <!-- URL factice structur\u00e9e pour Norki en attendant la d\u00e9finitive -->\n        <img decoding=\"async\" class=\"nk-archi-megeve__main-img\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/Plan-de-travail-1.jpg\" alt=\"Wooden facade of the majestic luxury chalet in Mont d'Arbois in Meg\u00e8ve\" loading=\"lazy\">\n    <\/div>\n\n    <!-- Milieu Droite : Plan architectural -->\n    <div class=\"nk-archi-megeve__plan-media\">\n        <!-- URL factice structur\u00e9e pour Norki en attendant la d\u00e9finitive -->\n        <img decoding=\"async\" class=\"nk-archi-megeve__plan-img\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/Plan_Chalet.jpg\" alt=\"Geometric architectural plan of the chalet in Mont d'Arbois\" loading=\"lazy\" aria-hidden=\"true\">\n    <\/div>\n\n    <!-- Bas Droite : Texte hommage -->\n    <div class=\"nk-archi-megeve__footer-text\">\n        <h3 class=\"nk-archi-megeve__title-main avenirmedium-font\">\n            An Architectural Homage\n            <span class=\"nk-archi-megeve__title-sub baskerville-italic-font\">The Henry Jacques Le M\u00eame Legacy<\/span>\n        <\/h3>\n        <p class=\"nk-archi-megeve__desc\">\n            The core challenge of this project lay in the contemporary reinterpretation of <a href=\"https:\/\/www.norki.com\/en\/studio-chalet\/mountain-decor-inspiration-moodboard\/henry-jacques-le-meme-style\/\" class=\"nk-editorial-inline-link\" target=\"_blank\">Henry Jacques Le M\u00eame\u2019s signature style<\/a>. This visionary architect, who designed Meg\u00e8ve\u2019s very first luxury chalets at the request of Baroness No\u00e9mie de Rothschild, invented the \u00ab\u00a0<a href=\"https:\/\/www.norki.com\/en\/studio-chalet\/mountain-decor-inspiration-moodboard\/ski-in-out-style\/\" class=\"nk-editorial-inline-link\" target=\"_blank\">skier&rsquo;s chalet<\/a>\u00a0\u00bb archetype, blending geometric modernity with vernacular rationalism.\n        <\/p>\n    <\/div>\n\n<\/section>\n\n\n\n<style>\n\n.nk-simple-image {\n    width: 100%;\n    background-color: var(--color-norki-beige, #f8f0ea);\n    line-height: 0;\n    overflow: hidden;\n    padding-bottom: 20px;\n    box-sizing: border-box;\n}\n\n.nk-simple-image__wrapper {\n    width: 100%;\n    height: 85vh; \/* Hauteur immersive PC *\/\n    min-height: 500px;\n    overflow: hidden;\n    position: relative;\n}\n\n.nk-simple-image__img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center center;\n    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n    display: block;\n}\n\n\/* Effet de survol fluide *\/\n.nk-simple-image__wrapper:hover .nk-simple-image__img {\n    transform: scale(1.02);\n}\n\n\/* Style de la l\u00e9gende des produits *\/\n.nk-simple-image__caption {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    align-items: center;\n    gap: 4px 8px;\n    font-size: 0.8rem; \n    margin-top: 12px;\n    color: #000000;\n    line-height: 1.5;\n    padding-right: var(--section-pad-h-dt, 5vw);\n    padding-left: var(--section-pad-h-dt, 5vw);\n    box-sizing: border-box;\n}\n\n.nk-simple-image__caption-sep {\n    font-style: normal;\n    opacity: 0.4;\n    user-select: none;\n}\n\n\/* Liens \u00e9ditoriaux *\/\n.nk-editorial-inline-link {\n    color: inherit;\n    text-decoration: underline;\n    text-decoration-color: currentColor;\n    text-underline-offset: 3px;\n    text-decoration-thickness: 1px;\n    transition: text-decoration-color 0.3s ease, opacity 0.3s ease;\n}\n\n.nk-editorial-inline-link:hover {\n    text-decoration-color: transparent;\n    opacity: 0.7;\n}\n\n\/* ==========================================================================\n   RESPONSIVE TABLETTE ET MOBILE\n   ========================================================================== *\/\n@media (max-width: 1024px) {\n    .nk-simple-image__caption {\n        padding-right: var(--section-pad-h-tab, 4vw);\n        padding-left: var(--section-pad-h-tab, 4vw);\n    }\n}\n\n@media (max-width: 640px) {\n    .nk-simple-image__wrapper {\n        height: 60vh;\n        min-height: 350px;\n    }\n    .nk-simple-image__caption {\n        padding-right: var(--section-pad-h-mob, 20px);\n        padding-left: var(--section-pad-h-mob, 20px);\n        font-size: 0.75rem;\n    }\n}\n<\/style>\n\n<section class=\"nk-simple-image\">\n    <!-- Image principale du bandeau salon -->\n    <div class=\"nk-simple-image__wrapper\">\n        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/bandeau-salon.jpg\" alt=\"Large luxury living room chalet Meg\u00e8ve with exceptional interior design by Studio Norki\" class=\"nk-simple-image__img\" loading=\"lazy\">\n    <\/div>\n\n    <!-- L\u00e9gende avec les 5 liens produits Norki -->\n    <div class=\"nk-simple-image__caption baskerville-italic-font\">\n        <a href=\"https:\/\/www.norki.com\/en\/collectionnistes-armchairs-designers-norki\/403-pelican-armchair-finn-juhl-vintage-norki.html\" class=\"nk-editorial-inline-link\" target=\"_blank\" title=\"Discover the Pelican Armchair\">Pelican Armchair<\/a>\n        <span class=\"nk-simple-image__caption-sep\" aria-hidden=\"true\">|<\/span>\n        <a href=\"https:\/\/www.norki.com\/en\/luxury-modern-armchairs-collection-norki\/119-coco-white-sheepskin-armchair-norki.html\" class=\"nk-editorial-inline-link\" target=\"_blank\" title=\"Discover the Coco Armchair\">Coco Armchair<\/a>\n        <span class=\"nk-simple-image__caption-sep\" aria-hidden=\"true\">|<\/span>\n        <a href=\"https:\/\/www.norki.com\/en\/timeless-throws-collection-norki\/258-victor-blanket-khaki-norki.html\" class=\"nk-editorial-inline-link\" target=\"_blank\" title=\"Discover the Victor Throw\">Victor Throw<\/a>\n        <span class=\"nk-simple-image__caption-sep\" aria-hidden=\"true\">|<\/span>\n        <a href=\"https:\/\/www.norki.com\/en\/high-end-designer-cushion\/140-nomadic-ball-signature-cushion-white-norki.html\" class=\"nk-editorial-inline-link\" target=\"_blank\" title=\"Discover the Signature Cushion\">Signature Cushion<\/a>\n        <span class=\"nk-simple-image__caption-sep\" aria-hidden=\"true\">|<\/span>\n        <a href=\"https:\/\/www.norki.com\/en\/timless-rugs-hides-norki\/313-white-khan-rug-norki-elegant-sheepskin.html\" class=\"nk-editorial-inline-link\" target=\"_blank\" title=\"Discover the Khan Rug\">Khan Rug<\/a>\n    <\/div>\n<\/section>\n\n\n\n<style>\n    \/* ==========================================================================\n       COMPOSANT : PARTI PRIS CLART\u00c9 (GRILLE ASYM\u00c9TRIQUE)\n       ========================================================================== *\/\n\n    .nk-clarte {\n        background-color: var(--color-norki-beige, #f8f0ea);\n        padding: var(--section-pad-v-dt, 80px) var(--section-pad-h-dt, 5vw);\n        width: 100%;\n        box-sizing: border-box;\n        \/* Grille PC : 3 colonnes avec ratio 1fr 0.5fr 0.5fr *\/\n        display: grid;\n        grid-template-columns: 1fr 0.5fr 0.5fr;\n        grid-template-rows: auto auto auto;\n        gap: 40px 5vw; \/* Espace vertical 40px, Espace horizontal fluide 5vw *\/\n        align-items: start;\n        color: #000000;\n        overflow-x: hidden; \/* Emp\u00eache le scroll horizontal d\u00fb \u00e0 l'image qui sort du cadre *\/\n    }\n\n    .nk-clarte * {\n        box-sizing: border-box;\n    }\n\n    \/* ==========================================================================\n       TYPOGRAPHIE ET LIENS\n       ========================================================================== *\/\n\n    .nk-clarte__text-top,\n    .nk-clarte__para {\n        font-size: 0.95rem; \/* Taille classique demand\u00e9e *\/\n        line-height: 1.6;\n        letter-spacing: 0.01em;\n        margin: 0;\n    }\n\n    .nk-clarte__title {\n        font-size: clamp(1.4rem, 2.2vw, 25px);\n        line-height: 1.2;\n        font-weight: normal;\n        margin: 0 0 4px 0;\n    }\n\n    .nk-clarte__subtitle {\n        display: block;\n        font-size: clamp(1.2rem, 1.8vw, 20px);\n        margin: 0;\n    }\n\n    \/* --- STYLES LIENS EDITEUR --- *\/\n    .nk-editorial-inline-link {\n        color: inherit;\n        text-decoration: underline;\n        text-decoration-color: currentColor;\n        text-underline-offset: 3px;\n        text-decoration-thickness: 1px;\n        transition: text-decoration-color 0.3s ease, opacity 0.3s ease;\n    }\n\n    .nk-editorial-inline-link:hover {\n        text-decoration-color: transparent;\n        opacity: 0.7;\n    }\n\n    \/* ==========================================================================\n       PLACEMENT GRILLE PC\n       ========================================================================== *\/\n\n    \/* Ligne 1 : Texte d'introduction (Plac\u00e9 dans la colonne centrale) *\/\n    .nk-clarte__intro {\n        grid-column: 2 \/ 3;\n        grid-row: 1;\n        padding-bottom: 20px; \/* Espace avant l'image en dessous *\/\n    }\n\n    \/* Ligne 2 : Images et CTA *\/\n    \/* NOUVEAU CONTENEUR POUR L'IMAGE GAUCHE ET LE CTA *\/\n    .nk-clarte__left-col-wrapper {\n        grid-column: 1 \/ 2;\n        grid-row: 2;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%; \/* S'assure que la colonne prend toute la hauteur disponible dans la grille *\/\n    }\n\n    .nk-clarte__img-small-wrapper {\n        align-self: flex-start;\n        width: 60%; \/* L'image est restreinte \u00e0 60% pour laisser respirer *\/\n    }\n\n    .nk-clarte__img-small-wrapper .nk-clarte__img {\n        width: 100%;\n        height: auto;\n        display: block;\n        object-fit: cover;\n    }\n\n    \/* ==========================================================================\n       STYLE CTA BOX (AJOUT & CENTRAGE DYNAMIQUE SUR PC)\n       ========================================================================== *\/\n    .nk-clarte__cta-box {\n        \/* Centrage dynamique au sein de l'espace restant dans la colonne *\/\n        margin-top: auto; \n        margin-bottom: auto;\n        margin-left: 13%; \/* D\u00e9calage pour le centrer par rapport \u00e0 l'image et l'espace global *\/\n        \n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n        gap: 20px;\n        width: 80%; \/* Ajustement de la largeur pour s'adapter \u00e0 la zone *\/\n        padding: 40px 0; \/* Padding pour lui donner du volume et aider au centrage visuel *\/\n    }\n\n    .nk-clarte__cta-text {\n        font-size: 0.95rem;\n        line-height: 1.4;\n        color: #000000;\n        margin: 0;\n    }\n\n    .nk-clarte__cta-btn {\n        display: inline-block;\n        padding: 4px 27px;\n        border: 1px solid #000000;\n        color: #fff;\n        text-decoration: none;\n        font-size: .9rem;\n        transition: all 0.3s ease;\n        background-color: black;\n    }\n\n    .nk-clarte__cta-btn:hover {\n        background-color: transparent;\n        color: #000;\n    }\n\n    .nk-clarte__img-large-wrapper {\n        grid-column: 2 \/ 4; \/* S'\u00e9tend sur les colonnes 2 et 3 *\/\n        grid-row: 2;\n        width: calc(100% + var(--section-pad-h-dt, 5vw)); \/* D\u00e9passe le padding pour coller au bord droit *\/\n        position: relative; \/* ESSENTIEL : Conteneur relatif pour les hotspots absolus *\/\n        align-self: stretch; \/* S'assure que le conteneur d'image s'\u00e9tire verticalement *\/\n    }\n\n    .nk-clarte__img-large-wrapper .nk-clarte__img {\n        width: 100%;\n        height: 100%; \/* Permet \u00e0 l'image de remplir le wrapper \u00e9tir\u00e9 *\/\n        display: block;\n        object-fit: cover;\n    }\n\n    \/* Ligne 3 : Titre et Paragraphes *\/\n    .nk-clarte__header {\n        grid-column: 1 \/ 2;\n        grid-row: 3;\n        padding-top: 30px;\n    }\n\n    .nk-clarte__col-para-1 {\n        grid-column: 2 \/ 3;\n        grid-row: 3;\n        padding-top: 30px;\n    }\n\n    .nk-clarte__col-para-2 {\n        grid-column: 3 \/ 4;\n        grid-row: 3;\n        padding-top: 30px;\n    }\n\n    \/* ==========================================================================\n       RESPONSIVE MOBILE (\u2264 1250px) - PASSAGE EN FLEXBOX\n       ========================================================================== *\/\n    @media (max-width: 1250px) {\n        .nk-clarte {\n            display: flex;\n            flex-direction: column;\n            padding: var(--section-pad-v-mob, 50px) 0; \/* Padding vertical uniquement *\/\n            gap: 40px; \/* Espace r\u00e9gulier entre les blocs *\/\n        }\n\n        \/* Application du padding lat\u00e9ral uniquement aux textes *\/\n        .nk-clarte__intro,\n        .nk-clarte__header,\n        .nk-clarte__col-para-1,\n        .nk-clarte__col-para-2 {\n            padding: 0 var(--section-pad-h-mob, 5vw);\n            width: 100%; \n        }\n\n        \/* R\u00e9tablissement du comportement mobile pour le wrapper gauche *\/\n        .nk-clarte__left-col-wrapper {\n            width: 100%;\n            height: auto; \/* Plus besoin d'\u00e9tirement en hauteur sur mobile *\/\n            display: flex;\n            flex-direction: column;\n            gap: 40px; \/* Ajout d'un gap pour espacer l'image du CTA *\/\n        }\n\n        \/* Petite image coll\u00e9e \u00e0 gauche *\/\n        .nk-clarte__img-small-wrapper {\n            width: 100%;\n        }\n\n        .nk-clarte__img-small-wrapper .nk-clarte__img {\n            width: 70%; \/* Image plus grande sur mobile *\/\n            align-self: flex-start;\n            max-width: 300px;\n        }\n\n        \/* CTA recentr\u00e9 sur mobile *\/\n        .nk-clarte__cta-box {\n            width: 100%;\n            margin: 0; \/* Suppression des marges dynamiques du PC *\/\n            padding: 0 var(--section-pad-h-mob, 5vw); \/* Alignement avec le texte *\/\n        }\n\n        \/* Grande image coll\u00e9e \u00e0 droite *\/\n        .nk-clarte__img-large-wrapper {\n            width: 90%;\n            align-self: flex-end; \n            height: auto; \/* Retour \u00e0 une hauteur auto *\/\n        }\n        \n        .nk-clarte__img-large-wrapper .nk-clarte__img {\n            height: auto; \/* L'image s'adapte \u00e0 sa largeur *\/\n        }\n    }\n\n    \/* ==========================================================================\n       RESPONSIVE TABLETTE (\u2264 1024px)\n       ========================================================================== *\/\n    .nk-hotspot {\n        position: absolute;\n        z-index: 10;\n        width: 0;\n        height: 0;\n    }\n\n    .nk-hotspot__btn {\n        position: absolute;\n        width: 36px;\n        height: 36px;\n        background-color: rgba(255, 255, 255, 0.95);\n        border: 1px solid #eaeaea;\n        border-radius: 50%;\n        box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transform: translate(-50%, -50%);\n        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s, box-shadow 0.3s;\n        padding: 0;\n        color: #000000;\n    }\n\n    .nk-hotspot__btn svg {\n        width: 16px;\n        height: 16px;\n        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .nk-hotspot__btn::before {\n        content: '';\n        position: absolute;\n        inset: -6px;\n        border-radius: 50%;\n        border: 1px solid rgba(255, 255, 255, 0.8);\n        animation: nk-pulse-wave 2s infinite cubic-bezier(0.4, 0, 0.2, 1);\n        pointer-events: none;\n    }\n\n    @keyframes nk-pulse-wave {\n        0% { transform: scale(0.8); opacity: 1; }\n        100% { transform: scale(1.6); opacity: 0; }\n    }\n\n    .nk-hotspot__btn:hover,\n    .nk-hotspot.is-active .nk-hotspot__btn {\n        transform: translate(-50%, -50%) scale(1.1);\n        background-color: #ffffff;\n        box-shadow: 0 6px 15px rgba(0,0,0,0.25);\n    }\n\n    .nk-hotspot__btn:hover svg,\n    .nk-hotspot.is-active .nk-hotspot__btn svg {\n        transform: rotate(90deg);\n    }\n\n    .nk-hotspot__tooltip {\n        position: absolute;\n        bottom: 25px;\n        left: 0;\n        transform: translateX(-50%) translateY(10px);\n        width: 200px;\n        background: #ffffff;\n        padding: 12px;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n        opacity: 0;\n        visibility: hidden;\n        pointer-events: none;\n        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n        border-radius: 2px;\n        z-index: 20;\n    }\n\n    \/* Pont invisible pour maintenir le survol (HOVER) fluide *\/\n    .nk-hotspot__tooltip::before {\n        content: '';\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        height: 35px; \/* Couvre l'espace vide entre la popup et le bouton *\/\n        background: transparent;\n    }\n\n    .nk-hotspot__tooltip::after {\n        content: '';\n        position: absolute;\n        top: 100%;\n        left: 50%;\n        transform: translateX(-50%);\n        border-width: 8px;\n        border-style: solid;\n        border-color: #ffffff transparent transparent transparent;\n    }\n\n    \/* Apparition de l'infobulle CENTR\u00c9E (par d\u00e9faut) *\/\n    .nk-hotspot:hover .nk-hotspot__tooltip,\n    .nk-hotspot.is-active .nk-hotspot__tooltip {\n        opacity: 1;\n        visibility: visible;\n        pointer-events: auto;\n        transform: translateX(-50%) translateY(0);\n    }\n\n    \/* --- FIX SPECIFICIT\u00c9 : MODIFICATEUR DROITE (.nk-hotspot--right) --- *\/\n    .nk-hotspot.nk-hotspot--right .nk-hotspot__tooltip {\n        transform: translateX(-80%) translateY(10px);\n    }\n    .nk-hotspot.nk-hotspot--right .nk-hotspot__tooltip::after {\n        left: 80%;\n    }\n    .nk-hotspot.nk-hotspot--right:hover .nk-hotspot__tooltip,\n    .nk-hotspot.nk-hotspot--right.is-active .nk-hotspot__tooltip {\n        opacity: 1;\n        visibility: visible;\n        pointer-events: auto;\n        transform: translateX(-80%) translateY(0);\n    }\n\n    .nk-hotspot__link {\n        text-decoration: none;\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n    }\n\n    .nk-hotspot__thumb {\n        width: 100%;\n        height: 140px;\n        object-fit: cover;\n        background-color: #f5f5f5;\n    }\n\n    .nk-hotspot__info {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .nk-hotspot__title {\n        font-size: 13px;\n        font-weight: 600;\n        color: #000000;\n        line-height: 1.3;\n        margin: 0;\n        text-align: center;\n    }\n\n    .nk-hotspot__action {\n        font-size: 11px;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: #666666;\n        text-align: center;\n        display: block;\n        width: 100%;\n        padding-top: 8px;\n        border-top: 1px solid #eeeeee;\n        transition: color 0.2s;\n    }\n\n    .nk-hotspot__link:hover .nk-hotspot__action {\n        color: #000000;\n    }\n\n    @media (max-width: 768px) {\n        .nk-hotspot__tooltip {\n            width: 160px;\n        }\n        .nk-hotspot__thumb {\n            height: 110px;\n        }\n    }\n<\/style>\n\n<section class=\"nk-clarte\">\n    \n    <!-- Ligne 1 (PC) : Texte Haut -->\n    <div class=\"nk-clarte__intro\">\n        <p class=\"nk-clarte__text-top\">\n            Our <a href=\"https:\/\/www.norki.com\/en\/custom-made-upholstery\/bespoke-interior-design-studio-furniture-rugs\/\" class=\"nk-editorial-inline-link\" target=\"_blank\">design studio<\/a>, in collaboration with designer <a href=\"https:\/\/www.norki.com\/en\/content\/7-a-family-story-craftmanship-norki\" class=\"nk-editorial-inline-link\" target=\"_blank\">Sonia Linard<\/a>, captured this historic architectural line and infused it into the <a href=\"https:\/\/www.norki.com\/en\/custom-made-upholstery\/\" class=\"nk-editorial-inline-link\" target=\"_blank\">custom-made<\/a> kitchen cabinetry. The lines are sleek, the volumes are rigorous, and the dialogue between raw materials and sophisticated detailing pays a vibrant tribute to this local aesthetic heritage.\n        <\/p>\n    <\/div>\n\n    <!-- Ligne 2 (PC) : Image Gauche + CTA Box (Dans un nouveau conteneur) -->\n    <div class=\"nk-clarte__left-col-wrapper\">\n        <div class=\"nk-clarte__img-small-wrapper\">\n            <img decoding=\"async\" class=\"nk-clarte__img\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2025_10_21_Hall_Porta-petit.jpg\" alt=\"Interior architectural detail featuring a contemporary light wood staircase and minimalist seating\" loading=\"lazy\">\n        <\/div>\n        \n        <!-- NOUVEAU BOUTON CTA -->\n        <div class=\"nk-clarte__cta-box\">\n            <p class=\"nk-clarte__cta-text\">\n                <span class=\"baskerville-italic-font\" style=\"font-size: clamp(1.4rem, 2vw, 26px)\">Does this project inspire you?<\/span><br>\n                Let&rsquo;s bring your exceptional chalet interior to life together.\n            <\/p>\n            <a href=\"https:\/\/www.norki.com\/en\/studio-chalet\/contact-us\/\" class=\"nk-clarte__cta-btn\">\n                Discuss your project\n            <\/a>\n        <\/div>\n    <\/div>\n\n    <!-- Ligne 2 (PC) : Grande Image avec Hotspots -->\n    <div class=\"nk-clarte__img-large-wrapper\">\n        <img decoding=\"async\" class=\"nk-clarte__img\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2025_10_21_Hall_Elevador.jpg\" alt=\"Vast chalet interior space featuring an indoor swimming pool, lounge chairs, and views of snowy peaks, dressed in light wood\" loading=\"lazy\">\n        \n        <!-- HOTSPOT 1 : Tapis Mageva (Centr\u00e9) -->\n        <div class=\"nk-hotspot\" style=\"top: 77%; left: 63%;\">\n            <button class=\"nk-hotspot__btn\" aria-label=\"View product\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                <\/svg>\n            <\/button>\n            <div class=\"nk-hotspot__tooltip\">\n                <a href=\"https:\/\/www.norki.com\/en\/iconic-rugs-hides-norki\/229-mageva-rug-norki-white-sheepskin.html\" class=\"nk-hotspot__link\" target=\"_blank\">\n                    <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/tapis-mageva-norki-megeve-mouton-300x300.jpg\" alt=\"Mageva Rug\" class=\"nk-hotspot__thumb\">\n                    <div class=\"nk-hotspot__info\">\n                        <span class=\"nk-hotspot__title\">Mageva Rug<\/span>\n                        <span class=\"nk-hotspot__action\">View product<\/span>\n                    <\/div>\n                <\/a>\n            <\/div>\n        <\/div>\n\n        <!-- HOTSPOT 2 : Pouf Portobello Blanc (Avec modificateur droit corrig\u00e9) -->\n        <div class=\"nk-hotspot nk-hotspot--right\" style=\"top: 56%; left: 79%;\">\n            <button class=\"nk-hotspot__btn\" aria-label=\"View product\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                <\/svg>\n            <\/button>\n            <div class=\"nk-hotspot__tooltip\">\n                <a href=\"https:\/\/www.norki.com\/en\/designer-ottomans-stools-collection-norki\/154-white-portobello-stool-norki-velour-lambskin.html\" class=\"nk-hotspot__link\" target=\"_blank\">\n                    <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/pouf-portobello-blanc-norki-agneau-velours-300x300.jpg\" alt=\"White Portobello Stool\" class=\"nk-hotspot__thumb\">\n                    <div class=\"nk-hotspot__info\">\n                        <span class=\"nk-hotspot__title\">White Portobello Stool<\/span>\n                        <span class=\"nk-hotspot__action\">View product<\/span>\n                    <\/div>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Ligne 3 (PC) : Titre et Paragraphes -->\n    <div class=\"nk-clarte__header\">\n        <h2 class=\"nk-clarte__title avenirmedium-font\">Noble Materials and Light<\/h2>\n        <span class=\"nk-clarte__subtitle baskerville-italic-font\">A Commitment to Brightness<\/span>\n    <\/div>\n\n    <div class=\"nk-clarte__col-para-1\">\n        <p class=\"nk-clarte__para\">\n            Moving away from the traditional, dark aesthetic of rustic mountain lodges, the homeowners envisioned a space bathed in natural light. We orchestrated a chromatic palette focused on neutral tones, textured whites, and soft greiges, enhanced by contemporary light-toned wood with brushed or sandblasted finishes. These modern woods preserve the structural markers of alpine architecture while visually lightening the interior volumes.\n        <\/p>\n    <\/div>\n\n    <div class=\"nk-clarte__col-para-2\">\n        <p class=\"nk-clarte__para\">\n            The living room serves as a showcase for an exceptional tactile experience. On the floor, the spaces are anchored by the sensory softness of our white sheepskin rugs\u2014such as our signature Khan rug\u2014complemented by matching cushions that create a luxurious interplay of textures. Vintage furniture, meticulously curated and restored in <a href=\"https:\/\/www.norki.com\/en\/custom-made-upholstery\/\" class=\"nk-editorial-inline-link\" target=\"_blank\">our workshops<\/a>, blends effortlessly into this light color scheme, bringing a unique soul and historical patina to the space.\n        <\/p>\n    <\/div>\n\n<\/section>\n\n<!-- SCRIPT GESTION DES HOTSPOTS -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    document.addEventListener('click', (e) => {\n        const btnHotspot = e.target.closest('.nk-hotspot__btn');\n        const hotspots = document.querySelectorAll('.nk-hotspot');\n\n        if (btnHotspot) {\n            e.preventDefault();\n            e.stopPropagation();\n\n            const currentHotspot = btnHotspot.closest('.nk-hotspot');\n            \n            \/\/ Fermer tous les autres hotspots ouverts\n            hotspots.forEach(h => {\n                if (h !== currentHotspot) h.classList.remove('is-active');\n            });\n\n            \/\/ Toggle l'\u00e9tat du hotspot cliqu\u00e9\n            currentHotspot.classList.toggle('is-active');\n        } else if (!e.target.closest('.nk-hotspot')) {\n            \/\/ Clic en dehors : Fermeture globale\n            hotspots.forEach(h => h.classList.remove('is-active'));\n        }\n    });\n});\n<\/script>\n\n\n\n<style>\n\/* ==========================================================================\n   COMPOSANT : CURATIONS TEXTILES (GRILLE ASYM\u00c9TRIQUE + HOTSPOT)\n   ========================================================================== *\/\n\n.nk-textiles {\n    background-color: var(--color-norki-beige, #f8f0ea);\n    padding: var(--section-pad-v-dt, 80px) var(--section-pad-h-dt, 5vw);\n    width: 100%;\n    box-sizing: border-box;\n    display: grid;\n    grid-template-columns: 1.15fr 0.85fr;\n    gap: 6vw;\n    align-items: stretch;\n    color: #000000;\n}\n\n.nk-textiles * {\n    box-sizing: border-box;\n}\n\n\/* ==========================================================================\n   COLONNE GAUCHE (Image Principale + Hotspot)\n   ========================================================================== *\/\n.nk-textiles__col-left {\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.nk-textiles__img-main {\n    width: 100%;\n    height: 100%;\n    min-height: 600px;\n    object-fit: cover;\n    object-position: center;\n    display: block;\n}\n\n\/* ==========================================================================\n   COLONNE DROITE (Petite Image + Contenu Texte)\n   ========================================================================== *\/\n.nk-textiles__col-right {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: 100%;\n}\n\n.nk-textiles__img-small-wrapper {\n    position: relative; \/* INDISPENSABLE pour le positionnement absolu des hotspots enfants *\/\n    width: 100%;\n    margin-bottom: 40px;\n}\n\n.nk-textiles__img-small {\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n    display: block;\n}\n\n\/* ==========================================================================\n   TYPOGRAPHIE (Standardis\u00e9e selon le Design System)\n   ========================================================================== *\/\n.nk-textiles__content {\n    width: 100%;\n}\n\n.nk-textiles__header {\n    margin-bottom: 25px;\n}\n\n.nk-textiles__title {\n    font-size: clamp(24px, 2.5vw, 34px);\n    line-height: 1.25;\n    color: var(--wp--preset--color--contrast, #000);\n    margin: 0 0 35px 0;\n    letter-spacing: -0.01em;\n    font-weight: 500;\n}\n\n.nk-textiles__subtitle {\n    display: block;\n    font-size: clamp(1.2rem, 1.8vw, 20px);\n    \/* Remonte le sous-titre pour compenser le margin-bottom impos\u00e9 de 35px du title *\/\n    margin: -25px 0 35px 0; \n}\n\n.nk-textiles__para {\n    font-size: 0.95rem;\n    line-height: 1.6;\n    letter-spacing: 0.01em;\n    color: #000;\n    margin: 0 0 15px 0;\n}\n\n.nk-textiles__para:last-child {\n    margin-bottom: 0;\n}\n\n\/* ==========================================================================\n   CTA : Titre + Bouton\n   ========================================================================== *\/\n.nk-textiles__cta-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    text-align: left;\n    gap: 15px;\n    margin: 2rem 0 0 0;\n    width: 100%;\n}\n\n.nk-textiles__cta-title {\n    font-size: 1.15rem;\n    color: #000;\n    margin: 0;\n}\n\n.nk-textiles__cta-btn {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 4px 35px;\n    text-decoration: none;\n    font-size: 0.9rem; \/* Taille de police modifi\u00e9e ici *\/\n    font-weight: 500;\n    color: #ffffff;\n    background-color: #000;\n    border: 1px solid #000;\n    transition: all 0.3s ease;\n    text-align: center;\n}\n\n.nk-textiles__cta-btn:hover {\n    background-color: transparent;\n    color: #000;\n}\n\n\/* ==========================================================================\n   RESPONSIVE TABLETTE (\u2264 1024px)\n   ========================================================================== *\/\n@media (max-width: 1024px) {\n    .nk-textiles {\n        padding: var(--section-pad-v-tab, 50px) var(--section-pad-h-tab, 4vw);\n        gap: 4vw;\n        grid-template-columns: 1fr 1fr;\n    }\n    \n    .nk-textiles__img-main {\n        min-height: 400px;\n    }\n}\n\n\/* ==========================================================================\n   RESPONSIVE MOBILE (\u2264 800px)\n   ========================================================================== *\/\n@media (max-width: 800px) {\n    .nk-textiles {\n        display: flex;\n        flex-direction: column;\n        padding: var(--section-pad-v-mob, 40px) var(--section-pad-h-mob, 20px);\n        gap: 30px;\n    }\n\n    .nk-textiles__img-main {\n        min-height: auto;\n        max-height: 60vh;\n    }\n\n    .nk-textiles__col-right {\n        justify-content: flex-start;\n        height: auto;\n    }\n\n    \/* ATTENTION : Le wrapper et les hotspots sont masqu\u00e9s sur mobile ici *\/\n    .nk-textiles__img-small-wrapper {\n        display: none; \n    }\n\n    .nk-textiles__header {\n        margin-bottom: 20px;\n    }\n\n    .nk-textiles__cta-container {\n        align-items: center;\n        text-align: center;\n        margin-top: 30px;\n    }\n}\n\n\/* ==========================================================================\n   HOTSPOTS (POINTS INTERACTIFS SUR L'IMAGE)\n   ========================================================================== *\/\n.nk-hotspot {\n    position: absolute;\n    z-index: 10;\n    width: 0;\n    height: 0;\n}\n\n.nk-hotspot__btn {\n    position: absolute;\n    width: 36px;\n    height: 36px;\n    background-color: rgba(255, 255, 255, 0.95);\n    border: 1px solid #eaeaea;\n    border-radius: 50%;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transform: translate(-50%, -50%);\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s, box-shadow 0.3s;\n    padding: 0;\n    color: #000000;\n}\n\n.nk-hotspot__btn svg {\n    width: 16px;\n    height: 16px;\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.nk-hotspot__btn::before {\n    content: '';\n    position: absolute;\n    inset: -6px;\n    border-radius: 50%;\n    border: 1px solid rgba(255, 255, 255, 0.8);\n    animation: nk-pulse-wave 2s infinite cubic-bezier(0.4, 0, 0.2, 1);\n    pointer-events: none;\n}\n\n@keyframes nk-pulse-wave {\n    0% { transform: scale(0.8); opacity: 1; }\n    100% { transform: scale(1.6); opacity: 0; }\n}\n\n.nk-hotspot:hover .nk-hotspot__btn,\n.nk-hotspot.is-active .nk-hotspot__btn {\n    transform: translate(-50%, -50%) scale(1.1);\n    background-color: #ffffff;\n    box-shadow: 0 6px 15px rgba(0,0,0,0.25);\n}\n\n.nk-hotspot:hover .nk-hotspot__btn svg,\n.nk-hotspot.is-active .nk-hotspot__btn svg {\n    transform: rotate(90deg);\n}\n\n.nk-hotspot__tooltip {\n    position: absolute;\n    bottom: 25px;\n    left: 0;\n    transform: translateX(-50%) translateY(10px);\n    width: 200px;\n    background: #ffffff;\n    padding: 12px;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    border-radius: 2px;\n    z-index: 20;\n}\n\n\/* Pont invisible pour maintenir le hover *\/\n.nk-hotspot__tooltip::before {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    height: 35px;\n    background: transparent;\n}\n\n\/* Modificateur pour aligner l'infobulle vers la gauche (\u00e9vite les d\u00e9bordements d'\u00e9cran) *\/\n.nk-hotspot.nk-hotspot--right .nk-hotspot__tooltip {\n    transform: translateX(-80%) translateY(10px);\n}\n.nk-hotspot.nk-hotspot--right .nk-hotspot__tooltip::after {\n    left: 80%;\n}\n\n.nk-hotspot__tooltip::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border-width: 8px;\n    border-style: solid;\n    border-color: #ffffff transparent transparent transparent;\n}\n\n.nk-hotspot:hover .nk-hotspot__tooltip,\n.nk-hotspot.is-active .nk-hotspot__tooltip {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n    transform: translateX(-50%) translateY(0);\n}\n\n.nk-hotspot.nk-hotspot--right:hover .nk-hotspot__tooltip,\n.nk-hotspot.nk-hotspot--right.is-active .nk-hotspot__tooltip {\n    transform: translateX(-80%) translateY(0);\n}\n\n.nk-hotspot__link {\n    text-decoration: none;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.nk-hotspot__thumb {\n    width: 100%;\n    height: 140px;\n    object-fit: cover;\n    background-color: #f5f5f5;\n}\n\n.nk-hotspot__info {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.nk-hotspot__title {\n    font-size: 13px;\n    font-weight: 600;\n    color: #000000;\n    line-height: 1.3;\n    margin: 0;\n    text-align: center;\n}\n\n.nk-hotspot__action {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: #666666;\n    text-align: center;\n    display: block;\n    width: 100%;\n    padding-top: 8px;\n    border-top: 1px solid #eeeeee;\n    transition: color 0.2s;\n}\n\n.nk-hotspot__link:hover .nk-hotspot__action {\n    color: #000000;\n}\n\n@media (max-width: 768px) {\n    .nk-hotspot__tooltip {\n        width: 160px;\n    }\n    .nk-hotspot__thumb {\n        height: 110px;\n    }\n}\n<\/style>\n\n<!-- STRUCTURE HTML DU COMPOSANT -->\n<section class=\"nk-textiles\">\n    \n    <!-- Colonne Gauche : Image Principale (Cuisine) avec Hotspot -->\n    <div class=\"nk-textiles__col-left\">\n        <img decoding=\"async\" class=\"nk-textiles__img-main\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2026_01_27_Sicoria_Kitchen_02.jpg\" alt=\"Luxurious light wood kitchen with pastel green cooking elements and adjoining dining room\" loading=\"lazy\">\n        \n        <!-- HOTSPOT : Chaises Vintage Razorblade -->\n        <div class=\"nk-hotspot nk-hotspot--right\" style=\"top: 85%; left: 88%;\">\n            <button class=\"nk-hotspot__btn\" aria-label=\"View product\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                <\/svg>\n            <\/button>\n            <div class=\"nk-hotspot__tooltip\">\n                <a href=\"https:\/\/www.norki.com\/en\/curation-scandinavian-vintage-luxury-furniture\/412-razorblade-chairs-henning-kjaernulf-vintage-norki.html\" class=\"nk-hotspot__link\" target=\"_blank\">\n                    <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/chaises-razorblade-henning-kjaernulf-vintage-norki.jpg\" alt=\"Vintage Razorblade chairs\" class=\"nk-hotspot__thumb\">\n                    <div class=\"nk-hotspot__info\">\n                        <span class=\"nk-hotspot__title\">Vintage Razorblade chairs<\/span>\n                        <span class=\"nk-hotspot__action\">View product<\/span>\n                    <\/div>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Colonne Droite : Image Secondaire (Chambre) + Textes -->\n    <div class=\"nk-textiles__col-right\">\n        \n        <!-- Image secondaire + Hotspots (masqu\u00e9e sur mobile via CSS) -->\n        <div class=\"nk-textiles__img-small-wrapper\">\n            <img decoding=\"async\" class=\"nk-textiles__img-small\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2026_01_22_Sicoria_Bedroom.jpg\" alt=\"Elegant bedroom with green tufted headboard and floral wall details\" loading=\"lazy\">\n\n            <!-- HOTSPOT 1 : Coussin the Fairy Vert (Plac\u00e9 sur le coussin de droite) -->\n            <div class=\"nk-hotspot nk-hotspot--right\" style=\"top: 52%; left: 82%;\">\n                <button class=\"nk-hotspot__btn\" aria-label=\"View Green the Fairy Cushion\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                    <\/svg>\n                <\/button>\n                <div class=\"nk-hotspot__tooltip\">\n                    <a href=\"https:\/\/www.norki.com\/en\/high-end-designer-cushion\/146-the-fairy-green-cushion-norki-mink-curly-lambskin.html\" class=\"nk-hotspot__link\" target=\"_blank\">\n                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/Coussin_Photo-Principale-The-Fairy-Carre-Vert_NORKI.jpg\" alt=\"Green the Fairy shearling cushion\" class=\"nk-hotspot__thumb\">\n                        <div class=\"nk-hotspot__info\">\n                            <span class=\"nk-hotspot__title\">Green the Fairy Cushion<\/span>\n                            <span class=\"nk-hotspot__action\">View product<\/span>\n                        <\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- HOTSPOT 2 : Plaid Jan Rock (Plac\u00e9 en bas \u00e0 droite sur le jet\u00e9 de lit) -->\n            <div class=\"nk-hotspot nk-hotspot--right\" style=\"top: 68%; left: 89%;\">\n                <button class=\"nk-hotspot__btn\" aria-label=\"View Jan Rock Throw\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                    <\/svg>\n                <\/button>\n                <div class=\"nk-hotspot__tooltip\">\n                    <a href=\"https:\/\/www.norki.com\/en\/iconic-throws-collection-norki\/253-plaid-jan-shearling-rock-norki.html\" class=\"nk-hotspot__link\" target=\"_blank\">\n                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/Plaid-Photo-V-Jan-Rock_NORKI.jpg\" alt=\"Jan Rock shearling throw\" class=\"nk-hotspot__thumb\">\n                        <div class=\"nk-hotspot__info\">\n                            <span class=\"nk-hotspot__title\">Jan Rock Throw<\/span>\n                            <span class=\"nk-hotspot__action\">View product<\/span>\n                        <\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- HOTSPOT 3 : Tapis In the Fields (Plac\u00e9 en bas \u00e0 gauche sur le tapis blanc) -->\n            <div class=\"nk-hotspot\" style=\"top: 89%; left: 27%;\">\n                <button class=\"nk-hotspot__btn\" aria-label=\"View In the Fields Rug\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                    <\/svg>\n                <\/button>\n                <div class=\"nk-hotspot__tooltip\">\n                    <a href=\"https:\/\/www.norki.com\/en\/iconic-rugs-hides-norki\/166-in-the-fields-rug-norki-sheepskin-white.html\" class=\"nk-hotspot__link\" target=\"_blank\">\n                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/tapis-blanc-design-minimaliste-norki.jpg\" alt=\"In the Fields minimalist design rug\" class=\"nk-hotspot__thumb\">\n                        <div class=\"nk-hotspot__info\">\n                            <span class=\"nk-hotspot__title\">In the Fields Rug<\/span>\n                            <span class=\"nk-hotspot__action\">View product<\/span>\n                        <\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Contenu textuel align\u00e9 en bas sur PC -->\n        <div class=\"nk-textiles__content\">\n            <div class=\"nk-textiles__header\">\n                <h2 class=\"nk-textiles__title avenirmedium-font\">Curated Textiles<\/h2>\n                <span class=\"nk-textiles__subtitle baskerville-italic-font\">and Interior Harmony<\/span>\n            <\/div>\n            \n            <div class=\"nk-textiles__text\">\n                <p class=\"nk-textiles__para\">\n                    The project&rsquo;s visual identity is further elevated by meticulous textile styling. We integrated signature fabrics featuring delicate, graphic patterns, offering a resolutely contemporary take on mountain decor. Far from clich\u00e9, these precious textiles instill a subtle visual rhythm and a quiet elegance throughout the home. By combining architectural rigor with soft, indulgent materials, this chalet transcends fleeting trends.\n                <\/p>\n                <p class=\"nk-textiles__para\">\n                    It perfectly mirrors the spirit of its owners: a free, simple atmosphere filled with vibrant cheerfulness, capturing the ultimate intersection of timeless luxury and the warmth of a family sanctuary.\n                <\/p>\n            <\/div>\n\n            <!-- Bouton CTA Int\u00e9gr\u00e9 sous le texte -->\n            <div class=\"nk-textiles__cta-container\">\n                <span class=\"nk-textiles__cta-title baskerville-italic-font\">Would you like to discuss your mountain chalet project?<\/span>\n                <a href=\"https:\/\/www.norki.com\/en\/studio-chalet\/contact-us\/\" class=\"nk-textiles__cta-btn\">\n                    Contact our design studio\n                <\/a>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<!-- SCRIPT GESTION DES HOTSPOTS -->\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    document.addEventListener('click', (e) => {\n        const btnHotspot = e.target.closest('.nk-hotspot__btn');\n        const hotspots = document.querySelectorAll('.nk-hotspot');\n\n        if (btnHotspot) {\n            e.preventDefault();\n            e.stopPropagation();\n\n            const currentHotspot = btnHotspot.closest('.nk-hotspot');\n            \n            \/\/ Fermer tous les autres hotspots ouverts\n            hotspots.forEach(h => {\n                if (h !== currentHotspot) h.classList.remove('is-active');\n            });\n\n            \/\/ Toggle l'\u00e9tat du hotspot cliqu\u00e9\n            currentHotspot.classList.toggle('is-active');\n        } else if (!e.target.closest('.nk-hotspot')) {\n            \/\/ Clic en dehors : Fermeture globale\n            hotspots.forEach(h => h.classList.remove('is-active'));\n        }\n    });\n});\n<\/script>\n\n\n\n<style>\n    \/* ==========================================================================\n       COMPOSANT : S\u00c9LECTION D'OBJETS ISOL\u00c9\n       ========================================================================== *\/\n    .norki-sel-objets {\n        padding-top: var(--section-pad-v-dt, 80px);\n        padding-bottom: var(--section-pad-v-dt, 80px);\n        padding-left: var(--section-pad-h-dt, 5vw);\n        padding-right: var(--section-pad-h-dt, 5vw);\n        background-color: var(--color-norki-beige, #f3ebe1);\n        color: #000000;\n        box-sizing: border-box;\n        overflow: hidden;\n    }\n\n    .norki-sel-objets * {\n        box-sizing: border-box;\n    }\n\n    .norki-sel-objets__container {\n        margin: 0 auto;\n        width: 100%;\n    }\n\n    \/* --- EN-T\u00caTE --- *\/\n    .norki-sel-objets__header {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        margin-bottom: 40px;\n        gap: 15px;\n    }\n\n    .norki-sel-objets__title {\n        font-size: clamp(1.4rem, 2.5vw, 35px);\n        font-weight: normal;\n        margin: 0;\n        letter-spacing: -0.01em;\n        line-height: 1.25;\n    }\n\n    \/* --- NAVIGATION --- *\/\n    .norki-sel-objets__nav-bar {\n        display: flex;\n        align-items: center;\n    }\n\n    .norki-sel-objets__arrows {\n        display: flex;\n        gap: 15px;\n        margin-right: -12px;\n    }\n\n    .norki-sel-objets__arrows button {\n        background: none;\n        border: none;\n        color: #000000;\n        cursor: pointer;\n        padding: 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: opacity 0.3s ease;\n    }\n\n    .norki-sel-objets__arrows button:hover { opacity: 0.6; }\n\n    .norki-sel-objets__arrows svg {\n        width: 26px;\n        height: 26px;\n        fill: none;\n        stroke: currentColor;\n        stroke-width: 1.2;\n    }\n\n    \/* --- CARROUSEL --- *\/\n    .norki-sel-objets__slider-area {\n        position: relative;\n        width: 100%;\n    }\n\n    .norki-sel-objets__carousel-viewport {\n        overflow-x: clip;\n        overflow-y: visible;\n        touch-action: pan-y;\n        margin: 0 -15px;\n    }\n\n    .norki-sel-objets__carousel-track {\n        display: flex;\n        will-change: transform;\n    }\n\n    .norki-sel-objets__slide {\n        padding: 0 15px;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        z-index: 1;\n    }\n\n    \/* Assure que la slide active et son tooltip passent au-dessus des autres slides *\/\n    .norki-sel-objets__slide:hover,\n    .norki-sel-objets__slide:focus-within {\n        z-index: 100;\n    }\n\n    \/* --- ENCAPSULATION DES IMAGES --- *\/\n    .norki-sel-objets__image-wrapper {\n        position: relative;\n        width: 100%;\n        overflow: visible; \/* Essentiel pour afficher les tooltips sans coupure *\/\n    }\n\n    .norki-sel-objets__image-link {\n        display: block;\n        width: 100%;\n        aspect-ratio: 4 \/ 5;\n        overflow: hidden;\n        border-radius: 2px;\n        background-color: rgba(0, 0, 0, 0.04);\n        position: relative;\n    }\n\n    .norki-sel-objets__slide img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center;\n        display: block;\n        transition: transform 0.6s ease;\n    }\n\n    .norki-sel-objets__image-link:hover img {\n        transform: scale(1.03);\n    }\n\n    \/* ==========================================================================\n       HOTSPOTS (POINTS FLOTTANTS - CORRIG\u00c9S PIXEL-PERFECT)\n       ========================================================================== *\/\n    .nk-hotspot {\n        position: absolute;\n        z-index: 10;\n        width: 0;\n        height: 0;\n    }\n\n    .nk-hotspot__btn {\n        position: absolute;\n        width: 36px;\n        height: 36px;\n        background-color: rgba(255, 255, 255, 0.95);\n        border: 1px solid #eaeaea;\n        border-radius: 50%;\n        box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transform: translate(-50%, -50%);\n        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s, box-shadow 0.3s;\n        padding: 0;\n        color: #000000;\n    }\n\n    .nk-hotspot__btn svg {\n        width: 16px;\n        height: 16px;\n        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    \/* Effet de pulsation *\/\n    .nk-hotspot__btn::before {\n        content: '';\n        position: absolute;\n        inset: -6px;\n        border-radius: 50%;\n        border: 1px solid rgba(255, 255, 255, 0.8);\n        animation: nk-pulse-wave 2s infinite cubic-bezier(0.4, 0, 0.2, 1);\n        pointer-events: none;\n    }\n\n    @keyframes nk-pulse-wave {\n        0% { transform: scale(0.8); opacity: 1; }\n        100% { transform: scale(1.6); opacity: 0; }\n    }\n\n    \/* Changements d'\u00e9tat au survol et activation *\/\n    .nk-hotspot:hover .nk-hotspot__btn,\n    .nk-hotspot.is-active .nk-hotspot__btn {\n        transform: translate(-50%, -50%) scale(1.1);\n        background-color: #ffffff;\n        box-shadow: 0 6px 15px rgba(0,0,0,0.25);\n    }\n\n    .nk-hotspot:hover .nk-hotspot__btn svg,\n    .nk-hotspot.is-active .nk-hotspot__btn svg {\n        transform: rotate(90deg);\n    }\n\n    \/* Infobulle (Tooltip) *\/\n    .nk-hotspot__tooltip {\n        position: absolute;\n        bottom: 25px;\n        left: 0;\n        transform: translateX(-50%) translateY(10px);\n        width: 200px;\n        background: #ffffff;\n        padding: 12px;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n        opacity: 0;\n        visibility: hidden;\n        pointer-events: none;\n        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n        border-radius: 2px;\n        z-index: 20;\n    }\n\n    \/* Pont invisible pour maintenir le survol (hover) fluide *\/\n    .nk-hotspot__tooltip::before {\n        content: '';\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        height: 35px;\n        background: transparent;\n    }\n\n    \/* Fl\u00e8che d'infobulle centr\u00e9e *\/\n    .nk-hotspot__tooltip::after {\n        content: '';\n        position: absolute;\n        top: 100%;\n        left: 50%;\n        transform: translateX(-50%);\n        border-width: 8px;\n        border-style: solid;\n        border-color: #ffffff transparent transparent transparent;\n    }\n\n    .nk-hotspot:hover .nk-hotspot__tooltip,\n    .nk-hotspot.is-active .nk-hotspot__tooltip {\n        opacity: 1;\n        visibility: visible;\n        pointer-events: auto;\n        transform: translateX(-50%) translateY(0);\n    }\n\n    .nk-hotspot__link {\n        text-decoration: none;\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n    }\n\n    .nk-hotspot__thumb {\n        width: 100%;\n        height: 140px;\n        object-fit: cover;\n        background-color: #f5f5f5;\n    }\n\n    .nk-hotspot__info {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .nk-hotspot__title {\n        font-size: 13px;\n        font-weight: 600;\n        color: #000000;\n        line-height: 1.3;\n        margin: 0;\n        text-align: center;\n    }\n\n    .nk-hotspot__action {\n        font-size: 11px;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: #666666;\n        text-align: center;\n        display: block;\n        width: 100%;\n        padding-top: 8px;\n        border-top: 1px solid #eeeeee;\n        transition: color 0.2s;\n    }\n\n    .nk-hotspot__link:hover .nk-hotspot__action {\n        color: #000000;\n    }\n\n    \/* ============================================\n       RESPONSIVE TABLETTE (\u2264 1024px)\n       ============================================ *\/\n    @media (max-width: 1024px) {\n        .norki-sel-objets {\n            padding-top: var(--section-pad-v-tab, 60px);\n            padding-bottom: var(--section-pad-v-tab, 60px);\n            padding-left: var(--section-pad-h-tab, 4vw);\n            padding-right: var(--section-pad-h-tab, 4vw);\n        }\n\n        .norki-sel-objets__header {\n            margin-bottom: 30px;\n        }\n\n        .norki-sel-objets__arrows button:hover,\n        .norki-sel-objets__arrows button:active,\n        .norki-sel-objets__arrows button:focus {\n            opacity: 1 !important;\n        }\n    }\n\n    \/* ============================================\n       RESPONSIVE MOBILE (\u2264 768px)\n       ============================================ *\/\n    @media (max-width: 768px) {\n        .norki-sel-objets {\n            padding-top: var(--section-pad-v-mob, 50px);\n            padding-bottom: var(--section-pad-v-mob, 50px);\n            padding-left: var(--section-pad-h-mob, 20px);\n            padding-right: var(--section-pad-h-mob, 20px);\n        }\n        .norki-sel-objets__title {\n            font-size: clamp(1.1rem, 4.5vw, 1.4rem);\n        }\n        .norki-sel-objets__header {\n            align-items: center;\n            margin-bottom: 25px;\n        }\n\n        .norki-sel-objets__arrows {\n            margin-right: -5px;\n            gap: 10px;\n        }\n\n        .norki-sel-objets__arrows svg {\n            width: 22px;\n            height: 22px;\n        }\n\n        .norki-sel-objets__carousel-viewport {\n            margin: 0 -5px;\n        }\n\n        .norki-sel-objets__slide {\n            padding: 0 5px;\n        }\n\n        \/* Adaptation mobile des infobulles *\/\n        .nk-hotspot__tooltip {\n            width: 160px;\n        }\n        .nk-hotspot__thumb {\n            height: 110px;\n        }\n    }\n<\/style>\n\n<section class=\"norki-sel-objets\">\n    <div class=\"norki-sel-objets__container\">\n        \n        <!-- En-t\u00eate : Titre (Gauche) + Fl\u00e8ches (Droite) -->\n        <div class=\"norki-sel-objets__header\">\n            <h2 class=\"norki-sel-objets__title avenirmedium-font\">\n                Our Selection of <span class=\"baskerville-italic-font\">objects<\/span>\n            <\/h2>\n            \n            <!-- Navigation sur la m\u00eame ligne que le titre -->\n            <div class=\"norki-sel-objets__nav-bar\">\n                <div class=\"norki-sel-objets__arrows\">\n                    <button class=\"norki-sel-objets__prev\" aria-label=\"Previous slide\">\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"><\/path><\/svg>\n                    <\/button>\n                    <button class=\"norki-sel-objets__next\" aria-label=\"Next slide\">\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"><\/path><\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Section Carrousel -->\n        <div class=\"norki-sel-objets__slider-area\" id=\"norki-sel-objets-slider\">\n            <div class=\"norki-sel-objets__carousel-viewport\">\n                <div class=\"norki-sel-objets__carousel-track\">\n                    \n                    <!-- Slide 1 : Fauteuil Allegro & Plaid -->\n                    <article class=\"norki-sel-objets__slide\">\n                        <div class=\"norki-sel-objets__image-wrapper\">\n                            <div class=\"norki-sel-objets__image-link\">\n                                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/Assise_Photo-Survol-Fauteuil-Bao-Blanc_NORKI.jpg\" alt=\"Textured white armchair with a throw\" loading=\"lazy\">\n                            <\/div>\n                            \n                            <!-- HOTSPOT 1 : Plaid Qu\u00e9bec -->\n                            <div class=\"nk-hotspot\" style=\"top: 25%; left: 35%;\">\n                                <button class=\"nk-hotspot__btn\" aria-label=\"View product\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                                        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                                    <\/svg>\n                                <\/button>\n                                <div class=\"nk-hotspot__tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/timeless-throws-collection-norki\/255-quebec-throw.html#\/75-dimension-150_200_cm\" target=\"_blank\" class=\"nk-hotspot__link\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/plaid-quebec-coyote-norki.jpg\" alt=\"Qu\u00e9bec Throw\" class=\"nk-hotspot__thumb\">\n                                        <div class=\"nk-hotspot__info\">\n                                            <span class=\"nk-hotspot__title\">Qu\u00e9bec Throw<\/span>\n                                            <span class=\"nk-hotspot__action\">View product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 2 : Fauteuil Allegro -->\n                            <div class=\"nk-hotspot\" style=\"top: 50%; left: 60%;\">\n                                <button class=\"nk-hotspot__btn\" aria-label=\"View product\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                                        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                                    <\/svg>\n                                <\/button>\n                                <div class=\"nk-hotspot__tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/luxury-modern-armchairs-collection-norki\/590-white-velvet-swivel-armchair-contemporary-design.html\" target=\"_blank\" class=\"nk-hotspot__link\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/fauteuil-velours-blanc-pivotant-design-contemporain.jpg\" alt=\"Allegro Armchair\" class=\"nk-hotspot__thumb\">\n                                        <div class=\"nk-hotspot__info\">\n                                            <span class=\"nk-hotspot__title\">Allegro Armchair<\/span>\n                                            <span class=\"nk-hotspot__action\">View product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/article>\n\n                    <!-- Slide 2 : Fauteuil Coco -->\n                    <article class=\"norki-sel-objets__slide\">\n                        <div class=\"norki-sel-objets__image-wrapper\">\n                            <div class=\"norki-sel-objets__image-link\">\n                                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/fauteuil-coco-fauteuil-pelican.jpg\" alt=\"Large light-colored cocooning armchair\" loading=\"lazy\">\n                            <\/div>\n\n                            <!-- HOTSPOT 3 : Fauteuil Coco Mouton Blanc -->\n                            <div class=\"nk-hotspot\" style=\"top: 65%; left: 50%;\">\n                                <button class=\"nk-hotspot__btn\" aria-label=\"View product\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                                        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                                    <\/svg>\n                                <\/button>\n                                <div class=\"nk-hotspot__tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/luxury-modern-armchairs-collection-norki\/119-coco-white-sheepskin-armchair-norki.html\" target=\"_blank\" class=\"nk-hotspot__link\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/fauteuil-coco-blanc-mouton-norki.jpg\" alt=\"White Sheepskin Coco Armchair\" class=\"nk-hotspot__thumb\">\n                                        <div class=\"nk-hotspot__info\">\n                                            <span class=\"nk-hotspot__title\">White Coco Armchair<\/span>\n                                            <span class=\"nk-hotspot__action\">View product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/article>\n\n                    <!-- Slide 3 : Tapis Mageva -->\n                    <article class=\"norki-sel-objets__slide\">\n                        <div class=\"norki-sel-objets__image-wrapper\">\n                            <div class=\"norki-sel-objets__image-link\">\n                                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/Tapis-Mageva.jpg\" alt=\"Rug on the floor near the pool\" loading=\"lazy\">\n                            <\/div>\n\n                            <!-- HOTSPOT 4 : Tapis Mageva -->\n                            <div class=\"nk-hotspot\" style=\"top: 85%; left: 45%;\">\n                                <button class=\"nk-hotspot__btn\" aria-label=\"View product\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                                        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                                    <\/svg>\n                                <\/button>\n                                <div class=\"nk-hotspot__tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/iconic-rugs-hides-norki\/229-mageva-rug-norki-white-sheepskin.html\" target=\"_blank\" class=\"nk-hotspot__link\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/tapis-mageva-norki-megeve-mouton-300x300.jpg\" alt=\"Mageva Rug\" class=\"nk-hotspot__thumb\">\n                                        <div class=\"nk-hotspot__info\">\n                                            <span class=\"nk-hotspot__title\">Mageva Rug<\/span>\n                                            <span class=\"nk-hotspot__action\">View product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/article>\n\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n    const container = document.getElementById('norki-sel-objets-slider');\n    if (!container) return;\n\n    const section = container.closest('.norki-sel-objets');\n    const track = container.querySelector('.norki-sel-objets__carousel-track');\n    const originalSlides = Array.from(container.querySelectorAll('.norki-sel-objets__slide'));\n    const totalOriginal = originalSlides.length;\n    const navBar = section.querySelector('.norki-sel-objets__nav-bar');\n\n    \/\/ Clonage pour l'effet de boucle infinie\n    originalSlides.forEach(slide => {\n        const clone = slide.cloneNode(true);\n        clone.classList.add('norki-sel-objets-clone');\n        clone.setAttribute('aria-hidden', 'true');\n        clone.querySelectorAll('a').forEach(link => link.setAttribute('tabindex', '-1'));\n        track.appendChild(clone);\n    });\n    originalSlides.slice().reverse().forEach(slide => {\n        const clone = slide.cloneNode(true);\n        clone.classList.add('norki-sel-objets-clone');\n        clone.setAttribute('aria-hidden', 'true');\n        clone.querySelectorAll('a').forEach(link => link.setAttribute('tabindex', '-1'));\n        track.insertBefore(clone, track.firstChild);\n    });\n\n    const allSlides = Array.from(container.querySelectorAll('.norki-sel-objets__slide'));\n\n    const getSlidesPerView = () => {\n        if (window.innerWidth > 1024) return 3; \/\/ PC\n        if (window.innerWidth > 768) return 2;  \/\/ Tablette\n        return 1;                               \/\/ Mobile\n    };\n\n    let itemsPerView = getSlidesPerView();\n    let itemWidthPct = 100 \/ itemsPerView;\n    allSlides.forEach(s => s.style.flex = `0 0 ${itemWidthPct}%`);\n    \n    let currentIndex = totalOriginal; \n    let isAnimating = false;\n    let fallbackTimeout;\n\n    const updateNavVisibility = () => {\n        if (itemsPerView >= totalOriginal && navBar) {\n            navBar.style.display = 'none';\n        } else if (navBar) {\n            navBar.style.display = 'flex';\n        }\n    };\n\n    const updateCarousel = (instant = false) => {\n        updateNavVisibility();\n        \n        if (itemsPerView >= totalOriginal) {\n            currentIndex = totalOriginal; \n            track.style.transition = 'none';\n            track.style.transform = `translateX(-${currentIndex * itemWidthPct}%)`;\n            isAnimating = false;\n            clearTimeout(fallbackTimeout);\n            return;\n        }\n\n        track.style.transition = instant ? 'none' : 'transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1)';\n        track.style.transform = `translateX(-${currentIndex * itemWidthPct}%)`;\n\n        if (instant) {\n            isAnimating = false;\n            clearTimeout(fallbackTimeout);\n        } else {\n            clearTimeout(fallbackTimeout);\n            fallbackTimeout = setTimeout(() => {\n                if (isAnimating) handleTransitionEnd();\n            }, 550);\n        }\n    };\n\n    updateCarousel(true);\n\n    const moveNext = () => {\n        if (isAnimating || itemsPerView >= totalOriginal) return;\n        isAnimating = true;\n        currentIndex++;\n        updateCarousel();\n    };\n\n    const movePrev = () => {\n        if (isAnimating || itemsPerView >= totalOriginal) return;\n        isAnimating = true;\n        currentIndex--;\n        updateCarousel();\n    };\n\n    section.querySelector('.norki-sel-objets__next').addEventListener('click', moveNext);\n    section.querySelector('.norki-sel-objets__prev').addEventListener('click', movePrev);\n\n    const handleTransitionEnd = () => {\n        isAnimating = false;\n        \n        if (currentIndex <= 0) {\n            currentIndex = totalOriginal;\n            updateCarousel(true);\n        } \n        else if (currentIndex >= totalOriginal * 2) {\n            currentIndex = totalOriginal;\n            updateCarousel(true);\n        }\n    };\n\n    track.addEventListener('transitionend', (e) => {\n        if (e.target !== track || e.propertyName !== 'transform') return;\n        \n        clearTimeout(fallbackTimeout);\n        handleTransitionEnd();\n    });\n\n    window.addEventListener('resize', () => {\n        const newItemsPerView = getSlidesPerView();\n        if (newItemsPerView !== itemsPerView) {\n            itemsPerView = newItemsPerView;\n            itemWidthPct = 100 \/ itemsPerView;\n            allSlides.forEach(s => s.style.flex = `0 0 ${itemWidthPct}%`);\n            updateCarousel(true);\n        }\n    });\n\n    \/\/ Swipe Tactile\n    let startX = 0, endX = 0;\n    const swipeThreshold = 40;\n\n    track.addEventListener('touchstart', (e) => {\n        if (itemsPerView >= totalOriginal) return; \n        startX = e.touches[0].clientX;\n    }, { passive: true });\n    \n    track.addEventListener('touchend', (e) => {\n        if (itemsPerView >= totalOriginal) return;\n        endX = e.changedTouches[0].clientX;\n        const diff = startX - endX;\n        if (Math.abs(diff) > swipeThreshold) {\n            if (diff > 0) moveNext();\n            else movePrev();\n        }\n    });\n\n    \/* =========================================================\n       GESTION DES HOTSPOTS VIA D\u00c9L\u00c9GATION D'\u00c9V\u00c9NEMENTS\n       ========================================================= *\/\n    document.addEventListener('click', (e) => {\n        const btnHotspot = e.target.closest('.nk-hotspot__btn');\n        const hotspots = document.querySelectorAll('.nk-hotspot');\n\n        if (btnHotspot) {\n            e.preventDefault();\n            e.stopPropagation();\n\n            const currentHotspot = btnHotspot.closest('.nk-hotspot');\n            \n            \/\/ Fermer tous les autres hotspots ouverts\n            hotspots.forEach(h => {\n                if (h !== currentHotspot) h.classList.remove('is-active');\n            });\n\n            \/\/ Toggle l'\u00e9tat du hotspot cliqu\u00e9\n            currentHotspot.classList.toggle('is-active');\n        } else if (!e.target.closest('.nk-hotspot')) {\n            \/\/ Clic en dehors : Fermeture globale\n            hotspots.forEach(h => h.classList.remove('is-active'));\n        }\n    });\n\n});\n<\/script>\n\n\n\n<style>\n    \/* ==========================================\n       HERO TOP IMAGE\n       ========================================== *\/\n    .nk-hotels-showcase {\n        width: 100%;\n        background-color: var(--color-norki-brown, #50423d);\n    }\n\n    .nk-hs-hero {\n        position: relative;\n        width: 100%;\n        height: 75vh;\n        background-color: #000;\n    }\n\n    .nk-hs-hero__img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center 67%;\n        display: block;\n    }\n\n    .nk-hs-hero__fade {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 45%;\n        background: linear-gradient(to bottom, rgba(80, 66, 61, 0) 0%, var(--color-norki-brown, #50423d) 100%);\n        z-index: 2;\n        pointer-events: none;\n    }\n\n    \/* ==========================================\n       VARIABLES CSS & SLIDER\n       ========================================== *\/\n    .wp-custom-projects-slider-container {\n        --bg-section: var(--color-norki-brown, #50423d);\n        --text-light: #ffffff;\n        --text-muted: #d3ccc7;\n        --text-dark: var(--color-norki-beige, #f8f0ea);\n        --font-primary: Arial, sans-serif;\n        --font-secondary: serif;\n        --radius-img: 4px;\n        \n        box-sizing: border-box;\n        position: relative;\n        background-color: var(--bg-section);\n        width: 100%;\n        height: 100vh;\n        min-height: 850px;\n        color: var(--text-light);\n        font-family: var(--font-primary);\n        overflow: hidden;\n    }\n\n    .wp-custom-projects-slider-container *, \n    .wp-custom-projects-slider-container *::before, \n    .wp-custom-projects-slider-container *::after {\n        box-sizing: inherit;\n        margin: 0;\n        padding: 0;\n    }\n\n    .wp-custom-projects-slider-container .projects-info {\n        position: absolute;\n        top: 130px;\n        left: 50px;\n        width: 360px;\n        z-index: 10;\n    }\n\n    .wp-custom-projects-slider-container .projects-info h2 {\n        font-size: 35px;\n        font-weight: normal;\n        margin-bottom: 20px;\n        color: var(--text-dark);\n        line-height: 1.15;\n    }\n\n    .wp-custom-projects-slider-container .projects-info h2 span {\n        font-family: \"LibreBaskervilleItalic\", sans-serif;\n    }\n\n    .wp-custom-projects-slider-container .link-voir-tout {\n        font-size: 0.95rem;\n        color: var(--text-light);\n        text-decoration: underline;\n        text-decoration-color: currentColor;\n        text-underline-offset: 3px;\n        text-decoration-thickness: 1px;\n        transition: text-decoration-color 0.3s ease, opacity 0.3s ease;\n    }\n\n    .wp-custom-projects-slider-container .link-voir-tout:hover {\n        text-decoration-color: transparent;\n        opacity: 0.7;\n    }\n\n    \/* --- NAVIGATION --- *\/\n    .wp-custom-projects-slider-container .nav-arrow {\n        position: absolute;\n        top: 33%;\n        transform: translateY(-50%);\n        background: transparent;\n        border: none;\n        cursor: pointer;\n        z-index: 15;\n        transition: opacity 0.2s ease, transform 0.2s ease;\n        padding: 10px;\n        opacity: 0.7;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .wp-custom-projects-slider-container .nav-arrow img {\n        width: 20px; \n        height: 20px;\n        display: block;\n        filter: brightness(0) invert(1);\n    }\n\n    .wp-custom-projects-slider-container .left-arrow img {\n        transform: scaleX(-1);\n    }\n\n    @media (hover: hover) {\n        .wp-custom-projects-slider-container .nav-arrow:hover {\n            opacity: 1;\n            transform: translateY(-50%) scale(1.1);\n        }\n    }\n\n    .wp-custom-projects-slider-container .nav-arrow:active {\n        opacity: 0.4 !important;\n        transform: translateY(-50%) scale(0.9) !important;\n        transition: none !important;\n    }\n\n    .wp-custom-projects-slider-container .left-arrow { left: 30px; }\n    .wp-custom-projects-slider-container .right-arrow { right: 30px; }\n\n    \/* Zone du Slider *\/\n    .wp-custom-projects-slider-container .projects-slider {\n        position: absolute;\n        bottom: 40px; \n        width: 100vw;\n        height: 80vh; \n        display: flex;\n        align-items: flex-end;\n        justify-content: center;\n    }\n\n    .wp-custom-projects-slider-container .slide {\n        position: absolute;\n        bottom: 0;\n        height: 50vh;\n        width: auto;\n        aspect-ratio: 1272 \/ 1140;\n        transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n        opacity: 0;\n        visibility: hidden;\n        z-index: 0;\n    }\n\n    .wp-custom-projects-slider-container .slide__img-wrapper {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        border-radius: var(--radius-img);\n        -webkit-mask-image: -webkit-radial-gradient(white, black);\n        mask-image: radial-gradient(white, black);\n        transform: translateZ(0);\n        backface-visibility: hidden;\n        z-index: 0;\n    }\n\n    .wp-custom-projects-slider-container .slide img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        transition: transform 0.5s ease;\n        transform: translateZ(0);\n        backface-visibility: hidden;\n    }\n\n    \/* --- CLASSES HOVER & COMING SOON --- *\/\n    .wp-custom-projects-slider-container .slide.active:not(.is-coming-soon):hover img {\n        transform: scale(1.03) translateZ(0);\n    }\n\n    .wp-custom-projects-slider-container .slide.is-coming-soon,\n    .wp-custom-projects-slider-container .slide.active.is-coming-soon {\n        cursor: not-allowed !important;\n    }\n\n    .wp-custom-projects-slider-container .slide.is-coming-soon img {\n        opacity: 0.7;\n    }\n\n    .wp-custom-projects-slider-container .slide.active.is-coming-soon:hover::before {\n        content: \"Page en cours de cr\u00e9ation\";\n        position: absolute;\n        bottom: 30px;\n        left: 50%;\n        transform: translateX(-50%);\n        background: rgba(31, 41, 55, 0.95);\n        color: #fff;\n        padding: 8px 14px;\n        font-size: 0.75rem;\n        border-radius: 6px;\n        white-space: nowrap;\n        pointer-events: none;\n        z-index: 50;\n        box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1);\n    }\n\n    .wp-custom-projects-slider-container .slide.is-coming-soon .link-voir {\n        display: none;\n    }\n\n    .wp-custom-projects-slider-container .slide::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 40%; \n        background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.15) 65%, transparent 100%);\n        border-radius: var(--radius-img) var(--radius-img) 0 0;\n        opacity: 0;\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n        z-index: 1;\n    }\n\n    .wp-custom-projects-slider-container .slide.active::after { opacity: 1; }\n\n    .wp-custom-projects-slider-container .slide-content {\n        text-align: left;\n        position: absolute;\n        top: 30px;\n        left: 30px;\n        right: 30px;\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-start;\n        opacity: 0;\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n        z-index: 2;\n    }\n\n    .wp-custom-projects-slider-container .slide-content-text .slide-city {\n        display: block;\n        color: var(--text-muted);\n        font-size: 0.75rem;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        margin-bottom: 6px;\n        font-weight: 600;\n        text-shadow: 0 1px 3px rgba(0,0,0,0.5);\n    }\n\n    .wp-custom-projects-slider-container .slide-content-text h3 {\n        color: var(--text-light);\n        font-size: 1.15rem;\n        font-weight: normal;\n        margin-bottom: 5px;\n        line-height: 1.3;\n        text-shadow: 0 1px 3px rgba(0,0,0,0.5);\n    }\n\n    .wp-custom-projects-slider-container .slide-content-text p {\n        font-family: var(--font-secondary);\n        font-style: italic;\n        font-size: 1rem;\n        color: white;\n        line-height: 1.4;\n    }\n\n    .wp-custom-projects-slider-container .link-voir {\n        position: relative;\n        color: var(--text-light);\n        text-decoration: none;\n        border-bottom: 1px solid var(--text-light);\n        font-size: 0.8rem;\n        opacity: 0;\n        transform: translateY(10px);\n        transition: all 0.4s ease;\n        pointer-events: auto;\n        transform-origin: right center;\n        text-shadow: 0 1px 3px rgba(0,0,0,0.5);\n    }\n\n    .wp-custom-projects-slider-container .slide.active .link-voir {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n    }\n\n    @media (hover: hover) {\n        .wp-custom-projects-slider-container .slide.active:hover .link-voir {\n            transform: translateY(0) scale(1.15);\n        }\n    }\n\n    \/* \u00c9tats du slider (PC > 1700px) *\/\n    .wp-custom-projects-slider-container .slide.prev {\n        opacity: 1;\n        visibility: visible;\n        transform: translateX(calc(50px - 50vw + 50%));\n        z-index: 5;\n        cursor: pointer;\n    }\n\n    .wp-custom-projects-slider-container .slide.active {\n        opacity: 1;\n        visibility: visible;\n        transform: translateX(calc(90px + (50vh * 1272 \/ 1140) - 50vw + 50%));\n        z-index: 10;\n        height: 76vh;\n        cursor: pointer;\n    }\n\n    .wp-custom-projects-slider-container .slide.next {\n        opacity: 1;\n        visibility: visible;\n        transform: translateX(calc(130px + (126vh * 1272 \/ 1140) - 50vw + 50%));\n        z-index: 5;\n        cursor: pointer;\n    }\n\n    .wp-custom-projects-slider-container .slide.active .slide-content {\n        opacity: 1;\n        transition-delay: 0.4s;\n    }\n\n    \/* ==========================================\n       RESPONSIVE DESIGN\n       ========================================== *\/\n    @media (max-width: 1700px) {\n        .wp-custom-projects-slider-container .slide.prev, \n        .wp-custom-projects-slider-container .slide.next { filter: brightness(0.9); }\n        \n        .wp-custom-projects-slider-container {\n            height: auto;\n            min-height: 65vh;\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-start;\n            padding-bottom: 40px; \n            text-align: center;\n        }\n        \n        .wp-custom-projects-slider-container .projects-info {\n            position: relative;\n            top: 0; left: 0; width: 100%;\n            padding: 60px 20px 20px;\n        }\n        \n        .wp-custom-projects-slider-container .projects-slider {\n            position: relative; top: auto; bottom: auto; left: 50%;\n            transform: translateX(-50%); height: 55cqi; max-height: 75vh;\n        }\n        \n        .wp-custom-projects-slider-container .slide { \n            width: 45vw; \n            height: auto; \n            max-height: 60vh; \n        }\n        \n        .wp-custom-projects-slider-container .slide.active { \n            width: 60vw; \n            height: auto; \n            max-height: 75vh; \n            transform: translateX(0); \n        }\n        \n        .wp-custom-projects-slider-container .slide.prev { transform: translateX(-50vw); } \n        .wp-custom-projects-slider-container .slide.next { transform: translateX(50vw); } \n        \n        .wp-custom-projects-slider-container .nav-arrow {\n            top: auto;\n            bottom: calc(min(45vw * (1140 \/ 1272), 60vh) + 15px);\n            transform: none;\n            transition: opacity 0.2s ease, transform 0.2s ease;\n        }\n\n        @media (hover: hover) {\n            .wp-custom-projects-slider-container .nav-arrow:hover { \n                transform: scale(1.1); \n                opacity: 1;\n            }\n        }\n\n        .wp-custom-projects-slider-container .nav-arrow:active {\n            opacity: 0.4 !important;\n            transform: scale(0.9) !important;\n            transition: none !important;\n        }\n\n        .wp-custom-projects-slider-container .left-arrow { left: 2vw; }\n        .wp-custom-projects-slider-container .right-arrow { right: 2vw; }\n    }\n\n    @media (max-width: 720px) {\n        .wp-custom-projects-slider-container .projects-info h2 { font-size: 1.4rem; }\n        .wp-custom-projects-slider-container .projects-slider { height: 75vw; }\n        .wp-custom-projects-slider-container .slide { \n            width: 65vw; \n            height: auto; \n        }\n        .wp-custom-projects-slider-container .slide.active { \n            width: 85vw; \n            height: auto; \n        }\n        .wp-custom-projects-slider-container .slide::after {\n            height: 60%;\n            background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.35) 65%, transparent 100%);\n        }\n        .wp-custom-projects-slider-container .slide.prev { transform: translateX(-75vw); }\n        .wp-custom-projects-slider-container .slide.next { transform: translateX(75vw); }\n        .wp-custom-projects-slider-container .nav-arrow { bottom: calc(min(65vw * (1140 \/ 1272), 60vh) + 15px); }\n        .wp-custom-projects-slider-container .left-arrow { left: 0; }\n        .wp-custom-projects-slider-container .right-arrow { right: 0; }\n\n        .wp-custom-projects-slider-container .slide-content {\n            top: 20px; bottom: 30px; text-align: center;\n            flex-direction: column; align-items: center; justify-content: space-between;\n        }\n        .wp-custom-projects-slider-container .slide-content-text h3 { margin-bottom: 5px; }\n        .wp-custom-projects-slider-container .link-voir {\n            transform-origin: center center;\n        }\n    }\n\n    @media (max-width: 420px) {\n        .wp-custom-projects-slider-container .projects-slider { height: 95vw; max-height: none; }\n        .wp-custom-projects-slider-container .nav-arrow { bottom: calc(85vw * (1140 \/ 1272) + 10px); }\n        .wp-custom-projects-slider-container .left-arrow { left: 5vw; }\n        .wp-custom-projects-slider-container .right-arrow { right: 5vw; }\n    }\n<\/style>\n\n<div class=\"nk-hotels-showcase\">\n    \n    <!-- Image Sup\u00e9rieure avec D\u00e9grad\u00e9 -->\n    <section class=\"nk-hs-hero\">\n        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2025_10_21_Hall_Porta.jpg\" alt=\"Exceptional mountain chalet by Norki\" class=\"nk-hs-hero__img\">\n        <div class=\"nk-hs-hero__fade\"><\/div>\n    <\/section>\n\n    <!-- ==========================================\n         BLOC HTML - S\u00c9MANTIQUE & INDEXABILIT\u00c9\n         ========================================== -->\n    <section id=\"wp-custom-projects-slider\" class=\"wp-custom-projects-slider-container\" aria-label=\"Our Mountain Projects\">\n        \n        <!-- Bloc Information -->\n        <div class=\"projects-info\">\n            <h2 class=\"avenirmedium-font\">Explore other <br><span class=\"baskerville-italic-font\">Projects<\/span><\/h2>\n            <a href=\"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/\" class=\"link-voir-tout\">View all<\/a>\n        <\/div>\n\n        <!-- Zone Slider -->\n        <div class=\"projects-slider\">\n            <button class=\"nav-arrow left-arrow\" aria-label=\"Previous project\">\n                <img decoding=\"async\" src=\"https:\/\/norki.com\/sur-mesure\/wp-content\/themes\/twentytwentyfour\/assets\/images\/arrow-right.svg\" alt=\"\" aria-hidden=\"true\">\n            <\/button>\n            <button class=\"nav-arrow right-arrow\" aria-label=\"Next project\">\n                <img decoding=\"async\" src=\"https:\/\/norki.com\/sur-mesure\/wp-content\/themes\/twentytwentyfour\/assets\/images\/arrow-right.svg\" alt=\"\" aria-hidden=\"true\">\n            <\/button>\n\n            <!-- Slide 1 : Courchevel (Actif - Lien valide) -->\n            <article class=\"slide active\">\n                <div class=\"slide__img-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/Untitled-1.jpg\" alt=\"Refined Contemporary Chalet in Courchevel\">\n                <\/div>\n                <div class=\"slide-content\">\n                    <div class=\"slide-content-text\">\n                        <span class=\"slide-city\">Courchevel<\/span>\n                        <h3>Refined Contemporary Chalet<\/h3>\n                        <p>Chalet in Courchevel<\/p>\n                    <\/div>\n                    <a href=\"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/\" class=\"link-voir\">View<\/a>\n                <\/div>\n            <\/article>\n\n            <!-- Slide 2 : Jackson Hole -->\n            <article class=\"slide\">\n                <div class=\"slide__img-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/2025_10_21_Living.jpg\" alt=\"American West Log House - Chalet in Jackson Hole\">\n                <\/div>\n                <div class=\"slide-content\">\n                    <div class=\"slide-content-text\">\n                        <span class=\"slide-city avenirmedium-font\">Jackson Hole<\/span>\n                        <h3 class=\"avenirmedium-font\">American West Log House<\/h3>\n                        <p>Chalet in Jackson Hole<\/p>\n                    <\/div>\n                    <a href=\"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/jackson-hole\/\" class=\"link-voir\">View<\/a>\n                <\/div>\n            <\/article>\n\n            <!-- Slide 3 : Aspen (COMING SOON) -->\n            <article class=\"slide is-coming-soon\">\n                <div class=\"slide__img-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/Aspen_temp.png\" alt=\"Contemporary Luxury - Chalet in Aspen\">\n                <\/div>\n                <div class=\"slide-content\">\n                    <div class=\"slide-content-text\">\n                        <span class=\"slide-city\">Aspen<\/span>\n                        <h3>Contemporary Luxury<\/h3>\n                        <p>Chalet in Aspen<\/p>\n                    <\/div>\n                    <a href=\"#\" class=\"link-voir\">View<\/a>\n                <\/div>\n            <\/article>\n\n\n        <\/div>\n    <\/section>\n\n<\/div>\n\n<script>\n(function() {\n    const CONFIG_COMPOSANT = {\n        delaiAutoPlay: 8000,\n        delaiPauseApresClic: 15000\n    };\n\n    const container = document.getElementById('wp-custom-projects-slider');\n    if (!container) return; \n\n    const slidesElements = Array.from(container.querySelectorAll('.slide'));\n    let currentIndex = slidesElements.findIndex(slide => slide.classList.contains('active'));\n    if (currentIndex === -1) currentIndex = 0;\n\n    let autoplayInterval;\n    let pauseTimeout;\n\n    function renderSlider() {\n        slidesElements.forEach(slide => slide.classList.remove('active', 'prev', 'next'));\n        \n        slidesElements[currentIndex].classList.add('active');\n        \n        let prevIndex = currentIndex - 1 < 0 ? slidesElements.length - 1 : currentIndex - 1;\n        let nextIndex = currentIndex + 1 >= slidesElements.length ? 0 : currentIndex + 1;\n        \n        slidesElements[prevIndex].classList.add('prev');\n        slidesElements[nextIndex].classList.add('next');\n    }\n\n    function goToNextSlide() {\n        currentIndex = currentIndex + 1 >= slidesElements.length ? 0 : currentIndex + 1;\n        renderSlider();\n    }\n\n    function goToPrevSlide() {\n        currentIndex = currentIndex - 1 < 0 ? slidesElements.length - 1 : currentIndex - 1;\n        renderSlider();\n    }\n\n    function startAutoplay() {\n        clearInterval(autoplayInterval);\n        autoplayInterval = setInterval(goToNextSlide, CONFIG_COMPOSANT.delaiAutoPlay); \n    }\n\n    function pauseAutoplayTemporarily() {\n        clearInterval(autoplayInterval); \n        clearTimeout(pauseTimeout); \n        pauseTimeout = setTimeout(startAutoplay, CONFIG_COMPOSANT.delaiPauseApresClic);\n    }\n\n    container.querySelector('.left-arrow').addEventListener('click', () => {\n        goToPrevSlide();\n        pauseAutoplayTemporarily();\n    });\n\n    container.querySelector('.right-arrow').addEventListener('click', () => {\n        goToNextSlide();\n        pauseAutoplayTemporarily();\n    });\n\n    slidesElements.forEach(slide => {\n        slide.addEventListener('click', (e) => {\n            if (slide.classList.contains('active')) {\n                if (!e.target.classList.contains('link-voir')) {\n                    const linkElement = slide.querySelector('.link-voir');\n                    if (linkElement) {\n                        const linkHref = linkElement.getAttribute('href');\n                        if (linkHref && linkHref !== '#') window.location.href = linkHref;\n                    }\n                }\n            } else if (slide.classList.contains('prev')) {\n                goToPrevSlide();\n                pauseAutoplayTemporarily();\n            } else if (slide.classList.contains('next')) {\n                goToNextSlide();\n                pauseAutoplayTemporarily();\n            }\n        });\n    });\n\n    let touchStartX = 0;\n    let touchEndX = 0;\n    const sliderContainer = container.querySelector('.projects-slider');\n\n    function handleSwipeGesture() {\n        const swipeThreshold = 50; \n        if (touchEndX < touchStartX - swipeThreshold) {\n            goToNextSlide();\n            pauseAutoplayTemporarily();\n        }\n        if (touchEndX > touchStartX + swipeThreshold) {\n            goToPrevSlide();\n            pauseAutoplayTemporarily();\n        }\n    }\n\n    sliderContainer.addEventListener('touchstart', (e) => {\n        touchStartX = e.changedTouches[0].screenX;\n    }, { passive: true });\n\n    sliderContainer.addEventListener('touchend', (e) => {\n        touchEndX = e.changedTouches[0].screenX;\n        handleSwipeGesture();\n    });\n\n    renderSlider();\n    startAutoplay();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Mont d&rsquo;Arbois Luxury Chalet Chalet in Meg\u00e8ve Meg\u00e8ve Contemporary Luxury 800 sqm 2025 In the heart of Meg\u00e8ve\u2014the iconic French Alps resort where Michelin-starred dining seamlessly pairs with luxury boutiques\u2014a new chapter in high-end interior architecture unfolds. Situated on the prestigious Mont d&rsquo;Arbois plateau, just a short distance from Geneva, this masterful 800 sqm chalet [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1883,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-page-builder-no-header-footer.php","meta":{"_uag_custom_page_level_css":"\/* A COPIER COLLER *\/\n\n:root {\n\t--wp--preset--color--contrast: black;\n    \/* Paddings de section standards *\/\n    --section-pad-v-dt: 80px;\n    --section-pad-h-dt: 5vw;\n    \n    --section-pad-v-tab: 50px;\n    --section-pad-h-tab: 4vw;\n    \n    --section-pad-v-mob: 40px;\n    --section-pad-h-mob: 20px;\n\n    \/* Couleurs  Polices *\/\n    --color-norki-brown: #50423d;\n    --color-norki-beige: #f8f0ea;\n    --font-baskerville: 'Baskerville', serif;\n    --font-montserrat: 'Montserrat', sans-serif;\n}\n\n@font-face {\n  font-family: 'LibreBaskervilleItalic';\n  src: url('\/studio-chalet\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/Libre-Baskerville\/LibreBaskerville-Italic.ttf') format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: 'Bestermind';\n  src: url('\/studio-chalet\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/Bestermind\/BestermindRegular.ttf') format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: 'AvenirBook';\n  src: url('\/studio-chalet\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/Avenir\/Avenir-Book-01.otf') format('opentype');\n  font-weight: normal;\n  font-style: normal;\n}\n\n\n@font-face {\n  font-family: 'AvenirMedium';\n  src: url('\/studio-chalet\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/Avenir\/Avenir-Medium-09.otf') format('opentype');\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: 'AvenirBookOblique';\n  src: url('\/studio-chalet\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/Avenir\/Avenir-BookOblique-02.otf') format('opentype');\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: 'Pertili';\n  src: url('\/studio-chalet\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/PERTILI.TTF') format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n\n.pertili-font {\n\tfont-family: \"Pertili\", sans-serif !important;\n}\n\n.bestermind-font {\n\tfont-family: \"Bestermind\", sans-serif !important;\n}\n\n.avenirbookoblique-font {\n\tfont-family: \"AvenirBookOblique\", sans-serif !important;\n}\n\n.baskerville-italic-font {\n\tfont-family: \"LibreBaskervilleItalic\", sans-serif !important;\n}\n\n.avenirmedium-font {\n\tfont-family: \"AvenirMedium\", sans-serif !important;\n}\n\nbody:not(.wp-admin) * {\n  font-family: \"AvenirBook\", sans-serif;\n}\n\nbody {\n\tbackground-color: #f8f0ea !important;\n\tcolor: black;\n}\n\nh2 {\n\tfont-family: \"AvenirMedium\", sans-serif !important;\n}\n\n.components-sandbox {\n\tmax-height: 500px;\n}\n\n\/* A COPIER COLLER END *\/","_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","footnotes":""},"class_list":["post-2531","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Interior Design Meg\u00e8ve | Luxury Chalet Mont d&#039;Arbois | Norki<\/title>\n<meta name=\"description\" content=\"Discover the interior of an exquisite chalet in Mont d&#039;Arbois, Meg\u00e8ve. With bespoke design, custom furniture, rugs, fine materials, and contemporary luxury.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interior Design Meg\u00e8ve | Luxury Chalet Mont d&#039;Arbois | Norki\" \/>\n<meta property=\"og:description\" content=\"Discover the interior of an exquisite chalet in Mont d&#039;Arbois, Meg\u00e8ve. With bespoke design, custom furniture, rugs, fine materials, and contemporary luxury.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/\" \/>\n<meta property=\"og:site_name\" content=\"Norki\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/NorkiDecoration\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-31T12:35:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2025_06_25_Norki_Dining-4K.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/megeve-mont-d-arbois\\\/\",\"url\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/megeve-mont-d-arbois\\\/\",\"name\":\"Interior Design Meg\u00e8ve | Luxury Chalet Mont d'Arbois | Norki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/megeve-mont-d-arbois\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/megeve-mont-d-arbois\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/2025_06_25_Norki_Dining-4K.jpg\",\"datePublished\":\"2026-07-28T06:37:37+00:00\",\"dateModified\":\"2026-07-31T12:35:17+00:00\",\"description\":\"Discover the interior of an exquisite chalet in Mont d'Arbois, Meg\u00e8ve. With bespoke design, custom furniture, rugs, fine materials, and contemporary luxury.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/megeve-mont-d-arbois\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/megeve-mont-d-arbois\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/megeve-mont-d-arbois\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/2025_06_25_Norki_Dining-4K.jpg\",\"contentUrl\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/2025_06_25_Norki_Dining-4K.jpg\",\"width\":2145,\"height\":1536},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/megeve-mont-d-arbois\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.norki.com\\\/fr\\\/studio-chalet\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Our projects\",\"item\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sicoria\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/#website\",\"url\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/\",\"name\":\"Norki\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/#organization\",\"name\":\"Norki | Studio Chalet\",\"url\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-simple-noir_NORKI-e1777530636585.png\",\"contentUrl\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-simple-noir_NORKI-e1777530636585.png\",\"width\":300,\"height\":74,\"caption\":\"Norki | Studio Chalet\"},\"image\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/NorkiDecoration\",\"https:\\\/\\\/instagram.com\\\/norkiofficial\\\/\",\"https:\\\/\\\/fr.linkedin.com\\\/company\\\/norki-decoration\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCLwZSkdXDYvZx68leltWTMw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interior Design Meg\u00e8ve | Luxury Chalet Mont d'Arbois | Norki","description":"Discover the interior of an exquisite chalet in Mont d'Arbois, Meg\u00e8ve. With bespoke design, custom furniture, rugs, fine materials, and contemporary luxury.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/","og_locale":"fr_FR","og_type":"article","og_title":"Interior Design Meg\u00e8ve | Luxury Chalet Mont d'Arbois | Norki","og_description":"Discover the interior of an exquisite chalet in Mont d'Arbois, Meg\u00e8ve. With bespoke design, custom furniture, rugs, fine materials, and contemporary luxury.","og_url":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/","og_site_name":"Norki","article_publisher":"https:\/\/facebook.com\/NorkiDecoration","article_modified_time":"2026-07-31T12:35:17+00:00","og_image":[{"url":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2025_06_25_Norki_Dining-4K.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/","url":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/","name":"Interior Design Meg\u00e8ve | Luxury Chalet Mont d'Arbois | Norki","isPartOf":{"@id":"https:\/\/www.norki.com\/studio-chalet\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/#primaryimage"},"image":{"@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/#primaryimage"},"thumbnailUrl":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2025_06_25_Norki_Dining-4K.jpg","datePublished":"2026-07-28T06:37:37+00:00","dateModified":"2026-07-31T12:35:17+00:00","description":"Discover the interior of an exquisite chalet in Mont d'Arbois, Meg\u00e8ve. With bespoke design, custom furniture, rugs, fine materials, and contemporary luxury.","breadcrumb":{"@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/#primaryimage","url":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2025_06_25_Norki_Dining-4K.jpg","contentUrl":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/07\/2025_06_25_Norki_Dining-4K.jpg","width":2145,"height":1536},{"@type":"BreadcrumbList","@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/megeve-mont-d-arbois\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.norki.com\/fr\/studio-chalet\/"},{"@type":"ListItem","position":2,"name":"Our projects","item":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/"},{"@type":"ListItem","position":3,"name":"Sicoria"}]},{"@type":"WebSite","@id":"https:\/\/www.norki.com\/studio-chalet\/#website","url":"https:\/\/www.norki.com\/studio-chalet\/","name":"Norki","description":"","publisher":{"@id":"https:\/\/www.norki.com\/studio-chalet\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.norki.com\/studio-chalet\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.norki.com\/studio-chalet\/#organization","name":"Norki | Studio Chalet","url":"https:\/\/www.norki.com\/studio-chalet\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.norki.com\/studio-chalet\/#\/schema\/logo\/image\/","url":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/04\/logo-simple-noir_NORKI-e1777530636585.png","contentUrl":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/04\/logo-simple-noir_NORKI-e1777530636585.png","width":300,"height":74,"caption":"Norki | Studio Chalet"},"image":{"@id":"https:\/\/www.norki.com\/studio-chalet\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/NorkiDecoration","https:\/\/instagram.com\/norkiofficial\/","https:\/\/fr.linkedin.com\/company\/norki-decoration\/","https:\/\/www.youtube.com\/channel\/UCLwZSkdXDYvZx68leltWTMw"]}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"webmaster","author_link":"https:\/\/www.norki.com\/studio-chalet\/inspiration-decoration-montagne\/author\/webmaster\/"},"uagb_comment_info":0,"uagb_excerpt":"Mont d&rsquo;Arbois Luxury Chalet Chalet in Meg\u00e8ve Meg\u00e8ve Contemporary Luxury 800 sqm 2025 In the heart of Meg\u00e8ve\u2014the iconic French Alps resort where Michelin-starred dining seamlessly pairs with luxury boutiques\u2014a new chapter in high-end interior architecture unfolds. Situated on the prestigious Mont d&rsquo;Arbois plateau, just a short distance from Geneva, this masterful 800 sqm chalet\u2026","_links":{"self":[{"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/pages\/2531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/comments?post=2531"}],"version-history":[{"count":18,"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/pages\/2531\/revisions"}],"predecessor-version":[{"id":2790,"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/pages\/2531\/revisions\/2790"}],"up":[{"embeddable":true,"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/pages\/1883"}],"wp:attachment":[{"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/media?parent=2531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}