{"id":1888,"date":"2026-06-17T09:48:54","date_gmt":"2026-06-17T07:48:54","guid":{"rendered":"https:\/\/www.norki.com\/studio-chalet\/?page_id=1888"},"modified":"2026-07-09T08:23:15","modified_gmt":"2026-07-09T06:23:15","slug":"courchevel-french-alps","status":"publish","type":"page","link":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/","title":{"rendered":"Courchevel"},"content":{"rendered":"\n<style>\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: 0 40px 40px 40px;\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: 0 30px 30px 30px;\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: 40% center;\n  }\n\n  .nk-hero__content {\n    padding: 0 20px 24px 20px;\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\/06\/E02_2668_\u252c\u00ae_Studio_Erick_Saillet.jpg\" alt=\"Contemporary and Refined Chalet in Courchevel\" 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\">Contemporary and Refined 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 Courchevel<\/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\">Courchevel<\/span>\n      <span class=\"nk-hero__meta-item avenirmedium-font\">Contemporary Refined<\/span>\n      <span class=\"nk-hero__meta-item avenirmedium-font\">1500 m\u00b2<\/span>\n      <span class=\"nk-hero__meta-item avenirmedium-font\">2026<\/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 : INTRO CHALET COURCHEVEL\n   ========================================================================== *\/\n\n.nk-intro {\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    display: flex;\n    justify-content: center;\n    box-sizing: border-box;\n}\n\n.nk-intro__inner {\n    width: 100%;\n    display: grid;\n    grid-template-columns: 1fr 1.6fr; \/* Ratio asym\u00e9trique \u00e9l\u00e9gant *\/\n    gap: clamp(40px, 6vw, 100px); \/* Espacement horizontal fluide *\/\n    align-items: start;\n}\n\n\/* ==========================================================================\n   TYPOGRAPHIE ET COULEURS\n   ========================================================================== *\/\n.nk-intro__header {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n}\n\n.nk-intro__title {\n    font-size: clamp(1.4rem, 2.2vw, 25px);\n    line-height: 1.25;\n    color: #000000; \/* Noir strict selon la DA *\/\n    font-weight: normal;\n    letter-spacing: -0.01em;\n    margin: 0 !important;\n}\n\n.nk-intro__title-accent {\n    display: block;\n    font-size: 0.95em;\n    color: #000000;\n    margin-top: 4px;\n}\n\n.nk-intro__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n}\n\n.nk-intro__paragraph {\n    font-size: clamp(0.92rem, 1.1vw, 1.05rem);\n    line-height: 1.7;\n    color: #000000; \/* Noir strict *\/\n    letter-spacing: 0.01em;\n    max-width: 90%; \/* Ajust\u00e9 pour correspondre \u00e0 l'envergure du bloc sur la maquette *\/\n    margin: 0 !important;\n}\n\n\/* --- STYLES LIENS EDITEUR (Li\u00e9s au r\u00e9f\u00e9rencement) --- *\/\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 (\u2264 1024px)\n   ========================================================================== *\/\n@media (max-width: 1024px) {\n    .nk-intro {\n        padding: var(--section-pad-v-tab, 50px) var(--section-pad-h-tab, 4vw);\n    }\n    \n    .nk-intro__inner {\n        grid-template-columns: 1fr;\n        gap: 32px;\n    }\n    \n    .nk-intro__title, \n    .nk-intro__paragraph {\n        max-width: 100%;\n    }\n}\n\n\/* ==========================================================================\n   RESPONSIVE MOBILE (\u2264 640px)\n   ========================================================================== *\/\n@media (max-width: 640px) {\n    .nk-intro {\n        padding: var(--section-pad-v-mob, 40px) var(--section-pad-h-mob, 20px);\n    }\n    \n    .nk-intro__inner {\n        gap: 20px;\n    }\n}\n<\/style>\n\n<!-- STRUCTURE HTML DU COMPOSANT -->\n<section class=\"nk-intro\">\n    <div class=\"nk-intro__inner\">\n        \n        <!-- Colonne Gauche : Titres -->\n        <div class=\"nk-intro__header\">\n            <h2 class=\"nk-intro__title avenirmedium-font\">\n                An Exceptional Address\n                <span class=\"nk-intro__title-accent baskerville-italic-font\">in the Heart of the Alps<\/span>\n            <\/h2>\n        <\/div>\n        \n        <!-- Colonne Droite : Description -->\n        <div class=\"nk-intro__content\">\n            <p class=\"nk-intro__paragraph\">\n                <a href=\"https:\/\/courchevel.com\/\" class=\"nk-editorial-inline-link\">In Courchevel<\/a>, at the foot of over 150 kilometers of pristine ski slopes in one of the most exclusive resorts in the French Alps, this ski-in ski-out chalet is set within a breathtaking alpine landscape. Designed as a family retreat, it combines direct access to the slopes with the highest standards of comfort and luxury interior design.\n            <\/p>\n        <\/div>\n        \n    <\/div>\n<\/section>\n\n\n\n<style>\n\/* ==========================================================================\n   COMPOSANT : SECTION IMAGE UNIQUE IMMERSIVE\n   ========================================================================== *\/\n.nk-simple-image {\n    width: 100%;\n    background-color: var(--color-norki-beige, #f8f0ea);\n    line-height: 0; \/* \u00c9vite un d\u00e9calage de pixel parasite sous l'image *\/\n    overflow: hidden;\n    padding-bottom: 15px; \/* Espace de respiration sous la l\u00e9gende *\/\n}\n\n.nk-simple-image__wrapper {\n    width: 100%;\n    height: 85vh; \/* Hauteur immersive et \u00e9l\u00e9gante sur 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; \/* Centrage \u00e9quilibr\u00e9 par d\u00e9faut sur PC *\/\n    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n\/* L\u00e9ger effet de zoom luxueux et fluide au survol de la zone image *\/\n.nk-simple-image__wrapper:hover .nk-simple-image__img {\n    transform: scale(1.02);\n}\n\n\/* Styles des l\u00e9gendes sous les images *\/\n.nk-simple-image__caption {\n    display: block;\n    font-size: 0.8rem; \n    font-style: italic;\n    margin-top: 10px;\n    text-align: right;\n    color: #000;\n    line-height: normal; \/* Annule le line-height 0 du parent pour l'affichage de texte *\/\n    padding-right: var(--section-pad-h-dt, 5vw); \/* Alignement sur la grille \u00e0 droite *\/\n}\n\n\/* Style de lien \u00e9ditorial demand\u00e9 *\/\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 MOBILE ET TABLETTE\n   ========================================================================== *\/\n@media (max-width: 1024px) {\n    .nk-simple-image__caption {\n        padding-right: var(--section-pad-h-tab, 4vw);\n    }\n}\n\n@media (max-width: 767px) {\n    .nk-simple-image__caption {\n        padding-right: var(--section-pad-h-mob, 20px);\n    }\n}\n\n@media (max-width: 640px) {\n    .nk-simple-image__wrapper {\n        height: 60vh; \/* Hauteur ajust\u00e9e pour un cadrage id\u00e9al sur mobile *\/\n        min-height: 350px;\n    }\n}\n<\/style>\n\n<!-- STRUCTURE HTML DU COMPOSANT -->\n<section class=\"nk-simple-image\">\n    <div class=\"nk-simple-image__wrapper\">\n        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2769_\u252c\u00ae_Studio_Erick_Saillet.jpg\" alt=\"Contemporary luxury living room in a Courchevel chalet, interior design by Studio Norki featuring beige sofas and a view of the snow-covered slopes\" class=\"nk-simple-image__img\" loading=\"lazy\">\n    <\/div>\n\n    <!-- L\u00e9gende avec les 3 liens distincts (Version Anglaise) -->\n    <div class=\"nk-simple-image__caption\">\n        <a href=\"https:\/\/www.norki.com\/en\/luxury-modern-armchairs-collection-norki\/395-white-bao-armchair-norki-curly-shearling.html\" class=\"nk-editorial-inline-link\" target=\"_blank\" title=\"Discover the Bao Armchair\">Bao Armchair<\/a> \n        | \n        <a href=\"https:\/\/www.norki.com\/en\/iconic-rugs-hides-norki\/166-in-the-fields-rug-norki-sheepskin-white.html\" class=\"nk-editorial-inline-link\" target=\"_blank\" title=\"Discover the In the Fields Rug\">In the Fields Rug<\/a> \n        | \n        <a href=\"https:\/\/www.norki.com\/en\/high-end-designer-cushion\/135-saint-peter-blue-cushion-norki-velvet-lambskin.html\" class=\"nk-editorial-inline-link\" target=\"_blank\" title=\"Discover the Saint-Peter Cushion\">Saint-Peter Cushion<\/a>\n    <\/div>\n<\/section>\n\n\n\n<style>\n\/* ==========================================================================\n   COMPOSANT : ARCHITECTURE COURCHEVEL (IMAGE + PLAN + TEXTE)\n   ========================================================================== *\/\n\n.archi-courchevel {\n    position: relative;\n    background-color: var(--color-norki-beige, #f8f0ea);\n    padding: var(--section-pad-v-dt, 80px) var(--section-pad-h-dt, 5vw);\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 6vw; \/* Espace fluide entre les deux colonnes *\/\n    align-items: stretch;\n    color: black;\n    box-sizing: border-box;\n    padding-right: 0;\n    overflow-x: hidden;\n}\n\n.archi-courchevel * {\n    box-sizing: border-box;\n}\n\n\/* --- Colonne Gauche : Grande Image --- *\/\n.archi-courchevel__col-left {\n    width: 100%;\n    position: relative;\n    z-index: 2; \/* Garanti que l'image principale passe AU-DESSUS du plan sur mobile *\/\n}\n\n.archi-courchevel__main-img {\n    width: 100%;\n    height: 100%;\n    max-height: 85vh; \/* Garde des proportions \u00e9l\u00e9gantes sur PC *\/\n    object-fit: cover;\n    display: block;\n}\n\n\/* --- Colonne Droite : Plan + Textes --- *\/\n.archi-courchevel__col-right {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end; \/* Texte align\u00e9 en bas (flex-end) sur PC *\/\n    z-index: 1; \/* Le bloc de droite est globalement SOUS le bloc de gauche *\/\n}\n\n\/* Plan architectural *\/\n.archi-courchevel__plan-img {\n    position: absolute;\n    top: 0;\n    right: 0; \/* Coll\u00e9 en haut \u00e0 droite de la zone PC *\/\n    width: 50%;\n    max-width: 500px;\n    height: auto;\n    object-fit: contain;\n    z-index: -1; \/* Z-index inf\u00e9rieur pour rester derri\u00e8re le texte au cas o\u00f9 l'\u00e9cran serait tr\u00e8s petit *\/\n    opacity: 0.9; \/* L\u00e9ger fondu pour l'\u00e9l\u00e9gance *\/\n    transform: translateX(30%);\n}\n\n\/* Conteneur des textes *\/\n.archi-courchevel__content {\n    position: relative;\n    z-index: 2; \/* Le texte reste lisible par-dessus le plan *\/\n    max-width: 480px; \/* Limite la largeur pour une belle lecture *\/\n    width: 80%;\n}\n\n.archi-courchevel__title {\n    font-size: clamp(1.4rem, 2.5vw, 25px);\n    margin: 0 0 1.5rem 0;\n    font-weight: normal; \/* Texte normal comme demand\u00e9 *\/\n    line-height: 1.3;\n}\n\n.archi-courchevel__desc {\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin: 0 0 1rem 0;\n}\n\n.archi-courchevel__desc:last-child {\n    margin-bottom: 0;\n}\n\n\/* ==========================================================================\n   LAYOUT TABLETTE\n   ========================================================================== *\/\n@media (max-width: 1024px) {\n    .archi-courchevel {\n        padding: var(--section-pad-v-tab, 50px) var(--section-pad-h-tab, 4vw);\n        gap: 4vw;\n        padding-right: 0;\n    }\n    \n    .archi-courchevel__plan-img {\n        width: 55%; \/* Laisse un peu plus de place au plan sur tablette *\/\n    }\n}\n\n\/* ==========================================================================\n   LAYOUT MOBILE\n   ========================================================================== *\/\n@media (max-width: 900px) {\n    .archi-courchevel {\n        display: flex;\n        flex-direction: column;\n        padding: var(--section-pad-v-mob, 40px) var(--section-pad-h-mob, 20px);\n        gap: 0;\n    }\n\n    .archi-courchevel__main-img {\n        max-height: 60vh;\n        width: 60%;\n    }\n\n    .archi-courchevel__col-right {\n        justify-content: flex-start; \/* R\u00e9initialise le flex-end *\/\n        margin-top: 0;\n    }\n\n    \/* Le plan glisse sous l'image principale et se place \u00e0 droite *\/\n    .archi-courchevel__plan-img {\n        position: relative;\n        top: auto;\n        right: auto;\n        margin-left: 20%; \/* Commence \u00e0 50% de l'\u00e9cran *\/\n        width: 50%; \/* S'\u00e9tend jusqu'au padding droit (100% - 50%) *\/\n        margin-top: -15%; \/* Marge n\u00e9gative pour glisser SOUS l'image pr\u00e9c\u00e9dente *\/\n        margin-bottom: 30px; \/* Espace avant le texte *\/\n        z-index: 1;\n        opacity: 1;\n    }\n\n    .archi-courchevel__content {\n        max-width: 100%;\n        padding-bottom: 0;\n        width: 100%;\n    }\n    \n    .archi-courchevel__title {\n        font-size: 18px;\n    }\n}\n<\/style>\n\n<!-- STRUCTURE HTML DU COMPOSANT -->\n<section class=\"archi-courchevel\">\n    \n    <!-- Colonne Gauche : Image du chalet -->\n    <div class=\"archi-courchevel__col-left\">\n        <img decoding=\"async\" class=\"archi-courchevel__main-img\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/Untitled-1-1.jpg\" alt=\"Contemporary exterior fa\u00e7ade of a luxury chalet in Courchevel, blending local stone and grey-toned wood\" loading=\"lazy\">\n    <\/div>\n\n    <!-- Colonne Droite : Plan et Textes -->\n    <div class=\"archi-courchevel__col-right\">\n        \n        <!-- Image du plan (Z-index inf\u00e9rieur, plac\u00e9e en haut \u00e0 droite) -->\n        <img decoding=\"async\" class=\"archi-courchevel__plan-img\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/RDC-Courchevel.png\" alt=\"Architectural floor plan of the chalet levels\" loading=\"lazy\" aria-hidden=\"true\">\n        \n        <!-- Textes (Align\u00e9s en bas via Flex-end) -->\n        <div class=\"archi-courchevel__content\">\n            <h3 class=\"archi-courchevel__title\">An Architecture That Breaks Away from Tradition<\/h3>\n            \n            <p class=\"archi-courchevel__desc\">\n                From the exterior, the tone is immediately set. The fa\u00e7ade blends local grey stone with grey-toned wood, deliberately moving away from the aged timber traditionally associated with alpine chalets. A bold architectural choice that redefines vernacular codes, offering a more contemporary interpretation of mountain living.\n            <\/p>\n            <p class=\"archi-courchevel__desc\">\n                Rather than replicating tradition, the chalet reimagines it \u2014 introducing a refined, precise architectural language that reshapes the concept of luxury in the Alps.\n            <\/p>\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener('DOMContentLoaded', () => {\n\n    \/* =========================================================\n       GESTION DU CARROUSEL (Adaptatif 3 \/ 2 \/ 1)\n       ========================================================= *\/\n    const container = document.getElementById('sfa-slider');\n    if (!container) return;\n\n    const section = container.closest('.nk-sfa');\n    const track = container.querySelector('.nk-sfa__carousel-track');\n    const originalSlides = Array.from(container.querySelectorAll('.nk-sfa__slide'));\n    const totalOriginal = originalSlides.length;\n    const navBar = section.querySelector('.nk-sfa__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-clone');\n        clone.setAttribute('aria-hidden', 'true');\n        clone.querySelectorAll('a, button').forEach(el => el.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-clone');\n        clone.setAttribute('aria-hidden', 'true');\n        clone.querySelectorAll('a, button').forEach(el => el.setAttribute('tabindex', '-1'));\n        track.insertBefore(clone, track.firstChild);\n    });\n\n    const allSlides = Array.from(container.querySelectorAll('.nk-sfa__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\n    const updateCarousel = (instant = false) => {\n        const clones = track.querySelectorAll('.norki-clone');\n\n        if (itemsPerView >= totalOriginal) {\n            navBar.style.display = 'none'; \n            clones.forEach(c => c.style.display = 'none'); \n            track.style.transition = 'none';\n            track.style.transform = `translateX(0)`; \n            return;\n        }\n\n        navBar.style.display = 'flex';\n        clones.forEach(c => c.style.display = ''); \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\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('.nk-sfa__next').addEventListener('click', moveNext);\n    section.querySelector('.nk-sfa__prev').addEventListener('click', movePrev);\n\n    track.addEventListener('transitionend', (e) => {\n        if (e.propertyName !== 'transform') return;\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    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            currentIndex = totalOriginal;\n            updateCarousel(true);\n        }\n    });\n\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       LAZY LOADING DES IMAGES\n       ========================================================= *\/\n    const imageObserver = new IntersectionObserver((entries, observer) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                const img = entry.target;\n                if (img.dataset.src) {\n                    img.onload = () => img.classList.add('norki-loaded');\n                    img.src = img.dataset.src;\n                    img.removeAttribute('data-src');\n                    observer.unobserve(img);\n                }\n            }\n        });\n    }, { root: null, rootMargin: '0px 100% 0px 100%', threshold: 0 });\n    \n    document.querySelectorAll('.norki-lazy').forEach(img => {\n        imageObserver.observe(img);\n    });\n\n    \/* =========================================================\n       GESTION DES HOTSPOTS (Tactile\/Mobile)\n       ========================================================= *\/\n    const hotspots = document.querySelectorAll('.nk-sfa__hotspot');\n    \n    hotspots.forEach(hotspot => {\n        const btn = hotspot.querySelector('.nk-sfa__hotspot-btn');\n        btn.addEventListener('click', (e) => {\n            e.preventDefault(); \n            \/\/ Fermer les autres tooltips\n            hotspots.forEach(h => {\n                if (h !== hotspot) h.classList.remove('is-active');\n            });\n            \/\/ Basculer l'\u00e9tat du tooltip cliqu\u00e9\n            hotspot.classList.toggle('is-active');\n        });\n    });\n\n    \/\/ Fermer les tooltips si on clique \u00e0 l'ext\u00e9rieur\n    document.addEventListener('click', (e) => {\n        if (!e.target.closest('.nk-sfa__hotspot')) {\n            hotspots.forEach(h => h.classList.remove('is-active'));\n        }\n    });\n\n});\n<\/script>\n\n<style>\n\/* ============================================\n   COMPOSANT : GALERIE IMAGES SLIDER (SANS TITRE)\n============================================ *\/\n.nk-sfa {\n    padding-top: 0;\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, #f8f0ea);\n    color: #000000;\n    box-sizing: border-box;\n    overflow-x: clip; \/* Modification : Emp\u00eache le scroll horizontal des slides *\/\n    overflow-y: visible; \/* Modification : Permet aux tooltips de d\u00e9passer en hauteur *\/\n    font-family: Arial, Helvetica, sans-serif; \/* Fallback g\u00e9n\u00e9rique *\/\n}\n\n.nk-sfa * {\n    box-sizing: border-box;\n}\n\n.nk-sfa__container {\n    margin: 0 auto;\n    width: 100%;\n    max-width: 1600px; \/* Limite optionnelle pour tr\u00e8s grands \u00e9crans *\/\n}\n\n\/* --- EN-T\u00caTE --- *\/\n.nk-sfa__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    margin-bottom: 50px;\n}\n\n.nk-sfa__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    color: #000000;\n}\n\n\/* --- NAVIGATION --- *\/\n.nk-sfa__nav-bar {\n    display: flex;\n    align-items: center;\n}\n\n.nk-sfa__arrows {\n    display: flex;\n    gap: 15px;\n    margin-right: -12px;\n}\n\n.nk-sfa__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.nk-sfa__arrows button:hover { opacity: 0.6; }\n\n.nk-sfa__arrows svg {\n    width: 26px;\n    height: 26px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.2;\n}\n\n\/* --- CARROUSEL --- *\/\n.nk-sfa__slider-area {\n    position: relative;\n    width: 100%;\n}\n\n.nk-sfa__carousel-viewport {\n    overflow-x: clip; \/* Modification : Coupe les slides qui d\u00e9bordent horizontalement *\/\n    overflow-y: visible; \/* Modification : Laisse respirer les tooltips verticalement *\/\n    touch-action: pan-y;\n    margin: 0 -6px;\n}\n\n.nk-sfa__carousel-track {\n    display: flex;\n    will-change: transform;\n}\n\n.nk-sfa__slide {\n    padding: 0 6px;\n    display: flex;\n    flex-direction: column;\n}\n\n\/* --- ENCAPSULATION DES IMAGES --- *\/\n.nk-sfa__image-wrapper {\n    display: block;\n    width: 100%;\n    \/* Remplacement du aspect-ratio par un padding proportionnel (Ratio 3:4 = 4\/3 = 133.33%) *\/\n    padding-bottom: 133.33%; \n    overflow: visible; \n    background-color: rgba(0, 0, 0, 0.05);\n    position: relative;\n}\n\n.nk-sfa__slide img.norki-main-img {\n    \/* L'image est plac\u00e9e en absolu dans le cadre du padding *\/\n    position: absolute; \n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n    display: block;\n    opacity: 0;\n    transition: opacity 0.5s ease-in-out;\n    will-change: opacity, transform;\n}\n\n.nk-sfa__slide img.norki-main-img.norki-loaded {\n    opacity: 1;\n}\n\n\/* ============================================\n   HOTSPOTS (POINTS FLOTTANTS - CORRIG\u00c9S PIXEL-PERFECT)\n============================================ *\/\n.nk-sfa__hotspot {\n    position: absolute;\n    z-index: 10;\n    \/* Origine math\u00e9matique pure 0x0 pour un alignement parfait *\/\n    width: 0;\n    height: 0;\n}\n\n.nk-sfa__hotspot-btn {\n    position: absolute;\n    width: 36px;\n    height: 36px;\n    \/* Fond blanc solide\/l\u00e9g\u00e8rement transparent pour garantir le contraste du picto *\/\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-sfa__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\/* Modification UX : L'animation du bouton s'enclenche au survol du hotspot parent complet *\/\n.nk-sfa__hotspot:hover .nk-sfa__hotspot-btn,\n.nk-sfa__hotspot.is-active .nk-sfa__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\/* Modification UX : Le picto tourne au survol du parent complet *\/\n.nk-sfa__hotspot:hover .nk-sfa__hotspot-btn svg,\n.nk-sfa__hotspot.is-active .nk-sfa__hotspot-btn svg {\n    transform: rotate(90deg); \n}\n\n\/* Tooltip (Infobulle align\u00e9e au centre exact) *\/\n.nk-sfa__hotspot-tooltip {\n    position: absolute;\n    bottom: 25px; \/* Ajust\u00e9 par rapport au centre 0x0 du hotspot *\/\n    left: 0; \/* Align\u00e9 sur l'origine 0x0 *\/\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\/* Modification UX : Pont invisible pour maintenir le hover entre le bouton et l'infobulle *\/\n.nk-sfa__hotspot-tooltip::before {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    height: 35px; \/* Couvre largement l'espace jusqu'au bouton *\/\n    background: transparent;\n}\n\n\/* Fl\u00e8che du tooltip centr\u00e9e \u00e0 100% sur l'origine *\/\n.nk-sfa__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-sfa__hotspot:hover .nk-sfa__hotspot-tooltip,\n.nk-sfa__hotspot.is-active .nk-sfa__hotspot-tooltip {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n    transform: translateX(-50%) translateY(0);\n}\n\n.nk-sfa__hotspot-link-wrap {\n    text-decoration: none;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.nk-sfa__hotspot-thumb {\n    width: 100%;\n    height: 140px;\n    object-fit: cover;\n    background-color: #f5f5f5;\n}\n\n.nk-sfa__hotspot-info {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.nk-sfa__hotspot-title-text {\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-sfa__hotspot-action {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: #666666;\n    text-decoration: none;\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-sfa__hotspot-link-wrap:hover .nk-sfa__hotspot-action {\n    color: #000000;\n}\n\n\n\/* ============================================\n   RESPONSIVE TABLETTE (\u2264 1024px)\n============================================ *\/\n@media (max-width: 1024px) {\n    .nk-sfa {\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    .nk-sfa__header {\n        margin-bottom: 30px;\n    }\n\n    .nk-sfa__arrows button:hover,\n    .nk-sfa__arrows button:active,\n    .nk-sfa__arrows button:focus {\n        opacity: 1 !important;\n    }\n}\n\n\/* ============================================\n   RESPONSIVE MOBILE (\u2264 768px)\n============================================ *\/\n@media (max-width: 768px) {\n    .nk-sfa {\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\n    .nk-sfa__header {\n        align-items: center;\n        margin-bottom: 25px;\n    }\n\n    .nk-sfa__title {\n        font-size: clamp(1.1rem, 4.5vw, 1.4rem);\n    }\n\n    .nk-sfa__arrows {\n        margin-right: -5px;\n        gap: 10px;\n    }\n\n    .nk-sfa__arrows svg {\n        width: 22px;\n        height: 22px;\n    }\n\n    .nk-sfa__carousel-viewport {\n        margin: 0 -5px;\n    }\n\n    .nk-sfa__slide {\n        padding: 0 5px;\n    }\n    \n    .nk-sfa__image-wrapper {\n        aspect-ratio: 4 \/ 5;\n    }\n    \n    .nk-sfa__hotspot-tooltip {\n        width: 160px; \/* L\u00e9g\u00e8rement plus petit sur mobile *\/\n    }\n    .nk-sfa__hotspot-thumb {\n        height: 110px;\n    }\n}\n<\/style>\n\n<section class=\"nk-sfa\">\n    <div class=\"nk-sfa__container\">\n        \n        <div class=\"nk-sfa__header\">\n            <h2 class=\"nk-sfa__title avenirmedium-font\">Our Products<\/h2>\n            <div class=\"nk-sfa__nav-bar\">\n                <div class=\"nk-sfa__arrows\">\n                    <button class=\"nk-sfa__prev\" aria-label=\"Previous image\">\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"><\/path><\/svg>\n                    <\/button>\n                    <button class=\"nk-sfa__next\" aria-label=\"Next image\">\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        <div class=\"nk-sfa__slider-area\" id=\"sfa-slider\">\n            <div class=\"nk-sfa__carousel-viewport\">\n                <div class=\"nk-sfa__carousel-track\">\n                    \n                    <!-- SLIDE 1 -->\n                    <article class=\"nk-sfa__slide\">\n                        <div class=\"nk-sfa__image-wrapper\">\n                            <img decoding=\"async\" data-src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2334_\u252c\u00ae_Studio_Erick_Saillet.jpg\" src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1 1'%3E%3C\/svg%3E\" alt=\"Luxury bedroom with a large dark organic rug\" class=\"norki-lazy norki-main-img\">\n                            \n                            <!-- HOTSPOT 1 : Plaid Abysse -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 55%; left: 75%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/timeless-throws-collection-norki\/233-abysse-blanket-dark-blue-norki.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/2876-large_default\/plaid-abysse-haut-de-gamme-norki.jpg\" alt=\"Abysse Throw\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Abysse Throw<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 2 : Coussin Saint Peter -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 35%; left: 40%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/high-end-designer-cushion\/135-saint-peter-blue-cushion-norki-velvet-lambskin.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/4954-large_default\/coussin-saint-peter-bleu-norki-agneau-velours.jpg\" alt=\"Saint Peter Cushion\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Saint Peter Cushion<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 3 : Tapis design noir bleu -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 75%; left: 35%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/iconic-rugs-hides-norki\/631-large-designer-rug-black-blue-shearling.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/4916-large_default\/grand-tapis-design-noir-bleu-peau-lainee.jpg\" alt=\"Large black and blue design rug\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Presto Rug<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/article>\n\n                    <!-- SLIDE 2 -->\n                    <article class=\"nk-sfa__slide\">\n                        <div class=\"nk-sfa__image-wrapper\">\n                            <img decoding=\"async\" data-src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2408_\u252c\u00ae_Studio_Erick_Saillet.jpg\" src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1 1'%3E%3C\/svg%3E\" alt=\"Minimalist bedroom with a view of the slopes and an irregular white rug\" class=\"norki-lazy norki-main-img\">\n                            \n                            <!-- HOTSPOT 4 : Plaid blanc In the fields -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 55%; left: 30%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/iconic-throws-collection-norki\/253-242-plaid-jan-shearling-rock-norki.html#\/75-dimension-492_656_ft\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5002-large_default\/plaid-jan-shearling-rock-norki.jpg\" alt=\"Rock Jan throw\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Rock Jan Throw<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 5 : Fauteuil velours blanc -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 60%; left: 80%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/luxury-modern-armchairs-collection-norki\/590-white-velvet-swivel-armchair-contemporary-design.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5087-large_default\/fauteuil-velours-blanc-pivotant-design-contemporain.jpg\" alt=\"White velvet armchair\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Allegro Armchair<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 6 : Ensemble jardin bambou -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 35%; left: 52%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/classiques-armchairs-norki-scandinavian-design\/274-garden-set-rattan-curly-shearling-vintage-norki.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5107-large_default\/ensemble-jardin-bambou-vintage-norki.jpg\" alt=\"Vintage bamboo garden set\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Vintage Bamboo Garden Set<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 7 : Tapis asym\u00e9trique blanc -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 80%; left: 50%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/iconic-rugs-hides-norki\/589-white-irregular-shaped-rug-sheepskin-shearling-luxury.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/4918-large_default\/tapis-blanc-forme-irreguliere-mouton-agneau-luxe.jpg\" alt=\"Luxury irregular white rug\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Allegro Rug<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/article>\n                    \n                    <!-- SLIDE 3 -->\n                    <article class=\"nk-sfa__slide\">\n                        <div class=\"nk-sfa__image-wrapper\">\n                            <img decoding=\"async\" data-src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2586_\u252c\u00ae_Studio_Erick_Saillet.jpg\" src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1 1'%3E%3C\/svg%3E\" alt=\"Dining area and living room of a contemporary chalet\" class=\"norki-lazy norki-main-img\">\n                            \n                            <!-- HOTSPOT 8 : Coussin luxe noir & blanc -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 48%; left: 18%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/high-end-designer-cushion\/650-luxury-black-white-cushion.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/4901-large_default\/coussin-luxe-noir-blanc.jpg\" alt=\"Luxury black and white cushion\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Andante Cushion<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 9 : Coussin boule nomade -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 62%; left: 25%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/high-end-designer-cushion\/139-round-nomadic-signature-cushion-beige-white-norki.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/4950-large_default\/coussin-boule-nomade-signature-beige-et-blanc-norki.jpg\" alt=\"Nomad ball cushion\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">White and Beige Signature Cushion<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 10 : Plaid noir & blanc luxe -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 45%; left: 50%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/iconic-throws-collection-norki\/653-black-white-luxury-throw.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/4909-large_default\/plaid-noir-blanc-luxe.jpg\" alt=\"Luxury black and white throw\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Andante Throw<\/span>\n                                            <span class=\"nk-sfa__hotspot-action\">View Product<\/span>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                            <!-- HOTSPOT 11 : Tapis Nomad bord naturel -->\n                            <div class=\"nk-sfa__hotspot\" style=\"top: 75%; left: 70%;\">\n                                <button class=\"nk-sfa__hotspot-btn\" aria-label=\"View product details\">\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-sfa__hotspot-tooltip\">\n                                    <a href=\"https:\/\/www.norki.com\/en\/timless-rugs-hides-norki\/317-natural-shape-white-nomad-rug-sheepskin.html\" class=\"nk-sfa__hotspot-link-wrap\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/2285-large_default\/tapis-nomad-bord-naturel-blanc-norki-mouton.jpg\" alt=\"Nomad white sheepskin rug with natural edge\" class=\"nk-sfa__hotspot-thumb\">\n                                        <div class=\"nk-sfa__hotspot-info\">\n                                            <span class=\"nk-sfa__hotspot-title-text\">Nomad Rug with Natural Border<\/span>\n                                            <span class=\"nk-sfa__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\n\n<style>\n\/* ==========================================================================\n   COMPOSANT : VOLUMES LUMINEUX (Texte 2 colonnes + Image)\n   ========================================================================== *\/\n\n.volumes-lumineux {\n    background-color: var(--color-norki-beige, #f8f0ea);\n    padding: var(--section-pad-v-dt, 80px) var(--section-pad-h-dt, 5vw);\n    color: black;\n    box-sizing: border-box;\n    overflow: hidden;\n    padding-top: 0;\n}\n\n.volumes-lumineux * {\n    box-sizing: border-box;\n}\n\n.volumes-lumineux__inner {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    width: 100%;\n}\n\n\/* --- Bloc Texte (Gauche sur PC) --- *\/\n.volumes-lumineux__content {\n    flex: 1.1; \/* Prend l\u00e9g\u00e8rement plus de place que l'image *\/\n    display: flex;\n    flex-direction: column;\n}\n\n.volumes-lumineux__title {\n    font-size: clamp(1.4rem, 2.5vw, 35px);\n    line-height: 1.2;\n    margin: 0 0 40px 0;\n    font-weight: normal;\n}\n\n.volumes-lumineux__text-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 2vw;\n}\n\n.volumes-lumineux__paragraph {\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin: 0 0 1.5rem 0;\n}\n\n.volumes-lumineux__paragraph:last-child {\n    margin-bottom: 0;\n}\n\n.volumes-lumineux__subtitle {\n    display: block;\n    font-size: clamp(14px, 1.1vw, 16px);\n    margin-bottom: 1rem;\n}\n\n\/* --- Bouton Voir Plus (Cach\u00e9 sur PC par d\u00e9faut) --- *\/\n.volumes-lumineux__btn-more {\n    font-style: italic;\n    font-size: 0.95rem;\n    display: none; \/* Masqu\u00e9 sur PC *\/\n    background: transparent;\n    border: none;\n    color: inherit;\n    font-family: inherit;\n    cursor: pointer;\n    text-decoration: underline;\n    text-decoration-color: currentColor;\n    text-underline-offset: 4px;\n    transition: text-decoration-color 0.3s ease, opacity 0.3s ease;\n    padding: 0;\n    align-self: flex-start;\n}\n\n.volumes-lumineux__btn-more:hover {\n    text-decoration-color: transparent;\n    opacity: 0.7;\n}\n\n\/* --- Bloc Image (Droite sur PC) --- *\/\n.volumes-lumineux__image-wrapper {\n    flex: 0.9;\n    margin-left: 4vw; \n    position: relative; \/* Essentiel pour l'ancrage du hotspot *\/\n    overflow: visible;  \/* Essentiel pour ne pas couper l'infobulle *\/\n}\n\n.volumes-lumineux__img {\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n    display: block;\n}\n\n\/* ==========================================================================\n   HOTSPOTS (POINTS FLOTTANTS - CORRIG\u00c9S PIXEL-PERFECT)\n   ========================================================================== *\/\n.nk-hotspot {\n    position: absolute;\n    z-index: 10;\n    \/* Origine math\u00e9matique pure 0x0 pour un alignement parfait *\/\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__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\/* Infobulle (Tooltip) *\/\n.nk-hotspot__tooltip {\n    position: absolute;\n    bottom: 25px; \/* D\u00e9calage par rapport au centre *\/\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\/* 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   S\u00c9CURIT\u00c9 DESKTOP (Neutralise la transition de grille sur grand \u00e9cran)\n   ========================================================================== *\/\n@media (min-width: 769px) {\n    .volumes-lumineux__collapsible {\n        display: block !important;\n        grid-template-rows: none !important;\n        overflow: visible !important;\n    }\n}\n\n\/* ==========================================================================\n   LAYOUT TABLETTE\n   ========================================================================== *\/\n@media (max-width: 1024px) {\n    .volumes-lumineux {\n        padding: var(--section-pad-v-tab, 60px) var(--section-pad-h-tab, 4vw);\n        padding-top: 0;\n    }\n\n    .volumes-lumineux__inner {\n        flex-direction: column;\n        gap: 50px;\n    }\n\n    .volumes-lumineux__image-wrapper {\n        width: 80%;\n        margin-left: auto; \/* Align\u00e9 \u00e0 droite sur tablette *\/\n    }\n}\n\n\/* ==========================================================================\n   LAYOUT MOBILE\n   ========================================================================== *\/\n@media (max-width: 768px) {\n    .volumes-lumineux {\n        padding: var(--section-pad-v-mob, 50px) var(--section-pad-h-mob, 20px);\n        padding-top: 0;\n    }\n\n    .volumes-lumineux__inner {\n        gap: 40px;\n    }\n\n    .volumes-lumineux__title {\n        margin-bottom: 25px;\n    }\n\n    .volumes-lumineux__text-grid {\n        grid-template-columns: 1fr;\n    }\n\n    \/* Le bouton de lecture s'active sur mobile *\/\n    .volumes-lumineux__btn-more {\n        display: inline-block;\n    }\n\n    \/* Accord\u00e9on en transition de grille (z\u00e9ro saut de hauteur) *\/\n    .volumes-lumineux__collapsible {\n        display: grid; \n        grid-template-rows: 0fr; \n        transition: grid-template-rows 0.4s ease-out;\n        overflow: hidden;\n    }\n\n    .volumes-lumineux__collapsible.is-open { \n        grid-template-rows: 1fr;\n    }\n\n    .volumes-lumineux__collapsible-inner {\n        overflow: hidden;\n    }\n\n    \/* Marge de 10% \u00e0 gauche sur l'image *\/\n    .volumes-lumineux__image-wrapper {\n        width: 90%; \/* 100% - 10% de marge *\/\n        margin-left: 10%;\n        margin-right: 0;\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<!-- STRUCTURE HTML DU COMPOSANT -->\n<section class=\"volumes-lumineux\">\n    <div class=\"volumes-lumineux__inner\">\n        \n        <!-- Bloc Texte -->\n        <div class=\"volumes-lumineux__content\">\n            <h2 class=\"volumes-lumineux__title avenirmedium-font\">\n                Open and <span class=\"baskerville-italic-font\">Light-Filled Living Spaces<\/span>\n            <\/h2>\n            \n            <div class=\"volumes-lumineux__text-grid\">\n                <!-- Colonne 1 -->\n                <div class=\"volumes-lumineux__col\">\n                    <p class=\"volumes-lumineux__paragraph\">\n                        Spread across four levels, the chalet reveals a fluid and thoughtfully designed layout tailored for a large family. The main chalet connects seamlessly to an independent guest house, ensuring both comfort and privacy. From the entrance level, spaces open generously. Grey terrazzo flooring reflects natural light, while expansive glass partitions dissolve boundaries between interior areas.\n                    <\/p>\n                    <p class=\"volumes-lumineux__paragraph\">\n                        A sculptural staircase, combining wood and glass, anchors the space \u2014 both functional and architectural.\n                    <\/p>\n                <\/div>\n                \n                <!-- Colonne 2 (D\u00e9roulante sur Mobile) -->\n                <div class=\"volumes-lumineux__col volumes-lumineux__collapsible\" id=\"norki-read-more-content\">\n                    <div class=\"volumes-lumineux__collapsible-inner\">\n                        <span class=\"volumes-lumineux__subtitle\">A Lifestyle Between Art Collection and Comfort<\/span>\n                        <p class=\"volumes-lumineux__paragraph\">\n                            The owners, passionate art collectors, envisioned an interior that reflects their identity: clean lines, bold tones, and uncompromising comfort.\n                        <\/p>\n                        <p class=\"volumes-lumineux__paragraph\">\n                            Each space becomes a curated setting for artworks, while remaining deeply livable. The project achieves a delicate balance between contemporary rigor and alpine warmth.\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Bouton Voir Plus (Mobile uniquement) -->\n            <button type=\"button\" class=\"volumes-lumineux__btn-more\" id=\"norki-read-more-btn\">Read more<\/button>\n        <\/div>\n\n        <!-- Bloc Image avec Hotspot -->\n        <div class=\"volumes-lumineux__image-wrapper\">\n            <img decoding=\"async\" class=\"volumes-lumineux__img\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2792_\u252c\u00ae_Studio_Erick_Saillet.jpg\" alt=\"Bright interior with colorful artworks and designer furniture\" loading=\"lazy\">\n            \n            <!-- HOTSPOT 1 : Plaid vert luxe en fourrure -->\n            <div class=\"nk-hotspot\" style=\"top: 52%; left: 78%;\">\n                <button class=\"nk-hotspot__btn\" aria-label=\"View the 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-haute-couture-bespoke-throws-collection-norki\/568-luxury-green-cushions-genuine-arctic-fox-fur.html\" class=\"nk-hotspot__link\">\n                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/4989-large_default\/plaid-vert-luxe-fourrure-renard-arctique.jpg\" alt=\"Luxury green arctic fox throw\" class=\"nk-hotspot__thumb\">\n                        <div class=\"nk-hotspot__info\">\n                            <span class=\"nk-hotspot__title\">Verbier Throw<\/span>\n                            <span class=\"nk-hotspot__action\">View product<\/span>\n                        <\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    \/* =========================================================\n       ACCORD\u00c9ON DE LECTURE (Texte mobile)\n       ========================================================= *\/\n    const btn = document.getElementById(\"norki-read-more-btn\");\n    const content = document.getElementById(\"norki-read-more-content\");\n\n    if (btn && content) {\n        btn.addEventListener(\"click\", () => {\n            const isOpen = content.classList.toggle(\"is-open\");\n            btn.textContent = isOpen ? \"Read less\" : \"Read more\";\n        });\n    }\n\n    \/* =========================================================\n       GESTION DU HOTSPOT INTERACTIF\n       ========================================================= *\/\n    const hotspots = document.querySelectorAll('.nk-hotspot');\n    \n    hotspots.forEach(hotspot => {\n        const btnHotspot = hotspot.querySelector('.nk-hotspot__btn');\n        if (btnHotspot) {\n            btnHotspot.addEventListener('click', (e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                \n                \/\/ Fermer les autres hotspots ouverts\n                hotspots.forEach(h => {\n                    if (h !== hotspot) h.classList.remove('is-active');\n                });\n                \n                \/\/ Toggle l'\u00e9tat du hotspot cliqu\u00e9\n                hotspot.classList.toggle('is-active');\n            });\n        }\n    });\n\n    \/\/ Fermeture automatique au clic en dehors\n    document.addEventListener('click', (e) => {\n        if (!e.target.closest('.nk-hotspot')) {\n            hotspots.forEach(h => h.classList.remove('is-active'));\n        }\n    });\n});\n<\/script>\n\n\n\n<style>\n\/* ==========================================================================\n   COMPOSANT : SPA DESTINATION (Image 50% + Textes scind\u00e9s)\n   ========================================================================== *\/\n\n.spa-dest {\n    background-color: var(--color-norki-beige, #f8f0ea);\n    padding: var(--section-pad-v-dt, 80px) var(--section-pad-h-dt, 5vw);\n    color: black;\n    box-sizing: border-box;\n    overflow: hidden;\n    padding-top: 0;\n}\n\n.spa-dest * {\n    box-sizing: border-box;\n}\n\n\/* --- Layout Desktop (CSS Grid) --- *\/\n.spa-dest__inner {\n    display: grid;\n    grid-template-columns: 1fr 1fr; \/* 50% \/ 50% *\/\n    grid-template-rows: auto auto; \/* 2 lignes pour r\u00e9partir les 2 blocs de texte *\/\n    gap: 0 5vw; \/* Espacement horizontal entre image et textes *\/\n    align-items: start; \/* Modifi\u00e9 : alignement en haut pour laisser le texte d\u00e9border vers le bas *\/\n}\n\n\/* L'image prend toute la colonne de gauche (s'\u00e9tend sur les 2 lignes) *\/\n.spa-dest__col-img {\n    grid-column: 1 \/ 2;\n    grid-row: 1 \/ 3;\n    width: 100%;\n    align-self: start; \/* Garde l'image align\u00e9e en haut sans l'\u00e9tirer *\/\n    position: relative; \/* Essentiel pour l'ancrage du hotspot *\/\n    overflow: visible;  \/* Essentiel pour ne pas couper l'infobulle *\/\n}\n\n.spa-dest__img {\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n    display: block;\n}\n\n\/* Bloc Texte 1 (En haut \u00e0 droite) *\/\n.spa-dest__block-1 {\n    grid-column: 2 \/ 3;\n    grid-row: 1 \/ 2;\n    margin-top: 34vw; \/* L\u00e9ger d\u00e9calage par rapport au haut de l'image *\/\n    margin-bottom: 10vw; \/* Tr\u00e8s grande marge entre les deux textes sur PC *\/\n    max-width: 500px;\n}\n\n\/* Bloc Texte 2 (En bas \u00e0 droite) *\/\n.spa-dest__block-2 {\n    grid-column: 2 \/ 3;\n    grid-row: 2 \/ 3;\n    max-width: 500px;\n    padding-bottom: 2vw; \/* Laisse le texte descendre librement *\/\n}\n\n\/* --- Typographie --- *\/\n.spa-dest__subtitle {\n    display: block;\n    font-size: clamp(1.4rem, 2.5vw, 25px);\n    margin-bottom: 0.8rem;\n    \/* On conserve la police normale comme sur la maquette *\/\n}\n\n.spa-dest__text {\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin: 0 0 1.2rem 0;\n}\n\n.spa-dest__text:last-child {\n    margin-bottom: 0;\n}\n\n\/* --- STYLES LIENS \u00c9DITORIAUX & BOUTONS --- *\/\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.spa-dest__btn {\n    display: inline-block;\n    margin-top: 25px;\n    margin-bottom: 35px;\n    padding: 4px 24px;\n    border: 1px solid #000000;\n    background-color: transparent;\n    color: #000000;\n    font-size: 0.9rem;\n    font-weight: 500;\n    text-decoration: none;\n    align-self: flex-start;\n    transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n.spa-dest__btn:hover {\n    background-color: #000000;\n    color: var(--color-norki-beige, #f8f0ea);\n}\n\n\/* ==========================================================================\n   HOTSPOTS (POINTS FLOTTANTS - CORRIG\u00c9S PIXEL-PERFECT)\n   ========================================================================== *\/\n.nk-hotspot {\n    position: absolute;\n    z-index: 10;\n    \/* Origine math\u00e9matique pure 0x0 pour un alignement parfait *\/\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__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\/* Infobulle (Tooltip) *\/\n.nk-hotspot__tooltip {\n    position: absolute;\n    bottom: 25px; \/* D\u00e9calage par rapport au centre *\/\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\/* 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   LAYOUT TABLETTE (Transition interm\u00e9diaire)\n   ========================================================================== *\/\n@media (max-width: 1024px) {\n    .spa-dest {\n        padding: var(--section-pad-v-tab, 60px) var(--section-pad-h-tab, 4vw);\n        padding-top: 0;\n    }\n    .spa-dest__inner {\n        gap: 0 4vw;\n    }\n}\n\n\/* ==========================================================================\n   LAYOUT MOBILE (Intercalation Textes\/Image)\n   ========================================================================== *\/\n@media (max-width: 768px) {\n    .spa-dest {\n        padding: var(--section-pad-v-mob, 50px) var(--section-pad-h-mob, 20px);\n        padding-top: 0;\n    }\n\n    \/* Passage en flex colonne pour utiliser l'ordre (order) *\/\n    .spa-dest__inner {\n        display: flex;\n        flex-direction: column;\n    }\n\n    .spa-dest__block-1,\n    .spa-dest__col-img,\n    .spa-dest__block-2 {\n        max-width: 100%;\n        width: 100%;\n    }\n\n    \/* Ordre 1 : Le d\u00e9but du texte avec 10% de marge gauche *\/\n    .spa-dest__block-1 {\n        order: 1;\n        width: 90%; \/* 100% - 10% de marge *\/\n        margin-left: 10%;\n        margin-top: 0; \/* R\u00e9initialisation mobile *\/\n        padding-bottom: 0;\n        margin-bottom: 30px; \/* R\u00e9initialisation mobile *\/\n    }\n\n    \/* Ordre 2 : L'image \u00e0 100% *\/\n    .spa-dest__col-img {\n        order: 2;\n        margin-bottom: 30px;\n    }\n\n    \/* Ordre 3 : La fin du texte, sans marge gauche *\/\n    .spa-dest__block-2 {\n        order: 3;\n        margin-left: 0;\n        padding-bottom: 0;\n    }\n    \n    .spa-dest__btn {\n        margin-top: 15px;\n        margin-bottom: 25px;\n        text-align: center;\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<!-- STRUCTURE HTML DU COMPOSANT -->\n<section class=\"spa-dest\">\n    <div class=\"spa-dest__inner\">\n        \n        <!-- Image (\u00c0 gauche sur PC, intercal\u00e9e sur Mobile) -->\n        <div class=\"spa-dest__col-img\">\n            <img decoding=\"async\" class=\"spa-dest__img\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2541_\u252c\u00ae_Studio_Erick_Saillet.jpg\" alt=\"Luxurious indoor chalet swimming pool with fur armchairs and poufs\" loading=\"lazy\">\n            \n            <!-- HOTSPOT 1 : Pouf agneau du Tibet -->\n            <div class=\"nk-hotspot\" style=\"top: 58%; left: 78%;\">\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\/656-tibetan-shearling-stool-luxury-chalet.html\" class=\"nk-hotspot__link\">\n                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5164-large_default\/pouf-agneau-tibet-chalet-luxe.jpg\" alt=\"Alpine Cloud Stool\" class=\"nk-hotspot__thumb\">\n                        <div class=\"nk-hotspot__info\">\n                            <span class=\"nk-hotspot__title\">Alpine Cloud Stool<\/span>\n                            <span class=\"nk-hotspot__action\">View product<\/span>\n                        <\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- HOTSPOT 2 : Fauteuil Swan -->\n            <div class=\"nk-hotspot\" style=\"top: 52%; 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\/collectionnistes-armchairs-designers-norki\/611-pair-of-swan-armchairs-arne-jacobsen-grey-beige.html\" class=\"nk-hotspot__link\">\n                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5057-large_default\/paire-de-fauteuils-swan-arne-jacobsen-gris-beige.jpg\" alt=\"Swan armchairs\" class=\"nk-hotspot__thumb\">\n                        <div class=\"nk-hotspot__info\">\n                            <span class=\"nk-hotspot__title\">Arne Jacobsen Swan armchairs<\/span>\n                            <span class=\"nk-hotspot__action\">View product<\/span>\n                        <\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Bloc Texte 1 (\u00c0 droite haut sur PC, en premier avec marge 10% sur Mobile) -->\n        <div class=\"spa-dest__block-1\">\n            <span class=\"spa-dest__subtitle\">A Spa Designed as a Destination<\/span>\n            <p class=\"spa-dest__text\">\n                Within the chalet, a dedicated wellness area extends the experience. A counter-current swimming pool, oversized jacuzzi, hammam, and sauna create a space entirely devoted to relaxation and apr\u00e8s-ski recovery.\n            <\/p>\n            <p class=\"spa-dest__text\">\n                A retreat within the retreat \u2014 conceived as a pause within the architectural rhythm.\n            <\/p>\n        <\/div>\n\n        <!-- Bloc Texte 2 (\u00c0 droite bas sur PC, en dernier sans marge sur Mobile) -->\n        <div class=\"spa-dest__block-2\">\n            <span class=\"spa-dest__subtitle\">The NORKI Signature: Material and Precision<\/span>\n            <p class=\"spa-dest__text\">\n                In this setting, NORKI expresses its full <a href=\"https:\/\/www.norki.com\/en\/custom-made-upholstery\/\" class=\"nk-editorial-inline-link\">expertise<\/a>, particularly in its craftsmanship of <a href=\"https:\/\/www.norki.com\/en\/custom-made-upholstery\/bespoke-fur-leather-rugs\/\" class=\"nk-editorial-inline-link\">bespoke rugs<\/a>.\n            <\/p>\n            <p class=\"spa-dest__text\">\n                Every piece of furniture, every cushion, carefully designed by our <a href=\"https:\/\/www.norki.com\/en\/custom-made-upholstery\/bespoke-interior-design-studio-furniture-rugs\/\" class=\"nk-editorial-inline-link\">design studio<\/a> contributes to creating the atmosphere. Our <a href=\"https:\/\/www.norki.com\/en\/designer-ottomans-stools-collection-norki\/606-presto-stool-contemporary-design-light-oak-velvet-shearling.html\" class=\"nk-editorial-inline-link\">Presto pouf<\/a>, for instance, finds its place naturally in the entrance, like a sculptural accent within this refined space. Curtains and blinds, crafted in heavy, luxurious fabrics, were designed with special attention by our <a href=\"https:\/\/www.norki.com\/en\/custom-made-upholstery\/bespoke-soft-furnishings-curtains\/\" class=\"nk-editorial-inline-link\">upholstery atelier<\/a>, bringing depth and softness to the volumes.\n            <\/p>\n            <!-- Bouton Collection de tapis demand\u00e9 -->\n            <a href=\"https:\/\/www.norki.com\/en\/19-customize-designer-high-end-luxury-hide-rug-norki\" class=\"spa-dest__btn\">Norki rug collection<\/a>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    \/* =========================================================\n       GESTION DES HOTSPOTS INTERACTIFS\n       ========================================================= *\/\n    const hotspots = document.querySelectorAll('.nk-hotspot');\n    \n    hotspots.forEach(hotspot => {\n        const btnHotspot = hotspot.querySelector('.nk-hotspot__btn');\n        if (btnHotspot) {\n            btnHotspot.addEventListener('click', (e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                \n                \/\/ Fermer les autres hotspots ouverts\n                hotspots.forEach(h => {\n                    if (h !== hotspot) h.classList.remove('is-active');\n                });\n                \n                \/\/ Basculer l'\u00e9tat du hotspot cliqu\u00e9\n                hotspot.classList.toggle('is-active');\n            });\n        }\n    });\n\n    \/\/ Fermeture automatique au clic en dehors\n    document.addEventListener('click', (e) => {\n        if (!e.target.closest('.nk-hotspot')) {\n            hotspots.forEach(h => h.classList.remove('is-active'));\n        }\n    });\n});\n<\/script>\n\n\n\n<style>\n\/* ==========================================================================\n   COMPOSANT : \u00c9L\u00c9GANCE ALPINE (Grille Sym\u00e9trique & Images de m\u00eame hauteur)\n   ========================================================================== *\/\n\n.nk-elegance {\n    background-color: var(--color-norki-beige, #f8f0ea);\n    padding: var(--section-pad-v-dt, 80px) var(--section-pad-h-dt, 5vw);\n    color: black;\n    box-sizing: border-box;\n    overflow: hidden;\n    padding-right: 0;\n}\n\n.nk-elegance * {\n    box-sizing: border-box;\n}\n\n\/* Conteneur d\u00e9cal\u00e9 sur la droite sur PC *\/\n.nk-elegance__inner {\n    width: 85%; \/* Laisse 15% d'espace vide \u00e0 gauche *\/\n    margin-left: auto;\n}\n\n\/* --- Grille Principale PC --- *\/\n.nk-elegance__grid {\n    display: grid;\n    \/* S\u00e9paration parfaite \u00e0 50\/50 pour garantir la sym\u00e9trie des images *\/\n    grid-template-columns: 1fr 1fr; \n    grid-template-rows: auto auto auto;\n    gap: 0 1vw; \/* Espacement horizontal entre les colonnes *\/\n}\n\n\/* --- Titre (Align\u00e9 avec l'image 2) --- *\/\n.nk-elegance__title {\n    grid-column: 2;\n    grid-row: 1;\n    font-size: clamp(1.4rem, 2.5vw, 35px);\n    line-height: 1.2;\n    margin: 0 0 2rem 0;\n    color: black;\n}\n\n.nk-elegance__title-sans {\n    font-weight: 500;\n}\n\n.nk-elegance__title-serif {\n    font-weight: normal;\n}\n\n\/* Cache le saut de ligne sur PC *\/\n.nk-mobile-break {\n    display: none;\n}\n\n\/* --- Image 1 : Colonne Gauche --- *\/\n.nk-elegance__col-img1 {\n    grid-column: 1;\n    grid-row: 2;\n    width: 100%;\n    aspect-ratio: 3 \/ 4; \/* Force un ratio portrait \u00e9l\u00e9gant *\/\n    overflow: visible; \/* Essentiel pour ne pas couper l'infobulle *\/\n    position: relative; \/* Essentiel pour l'ancrage du hotspot *\/\n}\n\n.nk-elegance__col-img1 img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n    display: block;\n}\n\n\/* --- Image 2 : Colonne Droite --- *\/\n.nk-elegance__img2-wrapper {\n    grid-column: 2;\n    grid-row: 2;\n    width: 100%;\n    aspect-ratio: 3 \/ 4; \/* M\u00eame ratio pour garantir une hauteur identique au pixel pr\u00e8s *\/\n    overflow: visible; \/* Essentiel pour l'ancrage du hotspot *\/\n    position: relative; \/* Essentiel pour l'ancrage du hotspot *\/\n}\n\n.nk-elegance__img2-wrapper img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n    display: block;\n}\n\n\/* --- Texte : Colonne Droite (Sous l'image 2) --- *\/\n.nk-elegance__text {\n    grid-column: 2;\n    grid-row: 3;\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin: 1.5rem var(--section-pad-h-dt, 5vw) 0 0;\n    color: black;\n    width: 80%;\n}\n\n\/* ==========================================================================\n   HOTSPOTS (POINTS FLOTTANTS - PIXEL-PERFECT)\n   ========================================================================== *\/\n.nk-hotspot {\n    position: absolute;\n    z-index: 10;\n    \/* Origine math\u00e9matique pure 0x0 pour un alignement parfait *\/\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__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\/* Infobulle (Tooltip) *\/\n.nk-hotspot__tooltip {\n    position: absolute;\n    bottom: 25px; \/* D\u00e9calage par rapport au centre *\/\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\/* 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   LAYOUT TABLETTE (Transition)\n   ========================================================================== *\/\n@media (max-width: 1024px) {\n    .nk-elegance {\n        padding: var(--section-pad-v-tab, 60px) var(--section-pad-h-tab, 4vw);\n        padding-right: 0;\n    }\n    \n    .nk-elegance__inner {\n        width: 100%; \/* Annule le d\u00e9calage sur tablette *\/\n    }\n    .nk-elegance__text {\n        margin-right: var(--section-pad-h-tab, 4vw);\n    }\n    .nk-elegance__title {\n        margin-right: var(--section-pad-h-tab, 4vw);\n    }\n}\n\n\/* ==========================================================================\n   LAYOUT MOBILE (R\u00e9organisation Compl\u00e8te)\n   ========================================================================== *\/\n@media (max-width: 768px) {\n    .nk-elegance {\n        padding: var(--section-pad-v-mob, 50px) var(--section-pad-h-mob, 20px);\n         padding-right: 0;\n    }\n    .nk-elegance__text {\n        margin-right: var(--section-pad-h-mob, 20px);\n    }\n    .nk-elegance__title {\n        margin-right: var(--section-pad-h-mob, 20px);\n    }\n    .nk-elegance__grid {\n        grid-template-columns: 1fr 1fr;\n        gap: 5px; \/* Espacement mobile serr\u00e9 entre les images *\/\n    }\n\n    \/* Le titre repasse en pleine largeur, align\u00e9 \u00e0 droite *\/\n    .nk-elegance__title {\n        grid-column: 1 \/ 3;\n        grid-row: 1;\n        text-align: right;\n        margin-bottom: 25px;\n    }\n\n    \/* Active le saut de ligne sur mobile *\/\n    .nk-mobile-break {\n        display: block;\n    }\n\n    \/* Les deux images restent c\u00f4te \u00e0 c\u00f4te sur la ligne 2 *\/\n    .nk-elegance__col-img1 {\n        grid-column: 1;\n        grid-row: 2;\n    }\n\n    .nk-elegance__img2-wrapper {\n        grid-column: 2;\n        grid-row: 2;\n    }\n\n    \/* Forcer le ratio sur mobile \u00e9galement pour conserver l'\u00e9quilibre *\/\n    .nk-elegance__col-img1,\n    .nk-elegance__img2-wrapper {\n        aspect-ratio: 3 \/ 4;\n    }\n\n    \/* Le texte repasse en pleine largeur sous les images *\/\n    .nk-elegance__text {\n        grid-column: 1 \/ 3;\n        grid-row: 3;\n        margin-top: 20px;\n        font-size: 0.95rem;\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<!-- STRUCTURE HTML DU COMPOSANT -->\n<section class=\"nk-elegance\">\n    <div class=\"nk-elegance__inner\">\n        <div class=\"nk-elegance__grid\">\n            \n            <!-- Titre (PC : Colonne 2 \/ Mobile : Pleine largeur) -->\n            <h2 class=\"nk-elegance__title\">\n                <span class=\"nk-elegance__title-sans avenirmedium-font\">A New<\/span>\n                <br class=\"nk-mobile-break\">\n                <span class=\"nk-elegance__title-serif baskerville-italic-font\">Alpine Elegance<\/span>\n            <\/h2>\n\n            <!-- Image 1 : Cuisine (PC : Colonne 1 \/ Mobile : Gauche) -->\n            <div class=\"nk-elegance__col-img1\">\n                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2632_\u252c\u00ae_Studio_Erick_Saillet.jpg\" alt=\"Contemporary chalet kitchen with marble central island and dark wood details\" loading=\"lazy\">\n                \n                <!-- HOTSPOT 1 : Pouf Portobello -->\n                <div class=\"nk-hotspot\" style=\"top: 70%; left: 52%;\">\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\">\n                            <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5033-large_default\/pouf-portobello-blanc-norki-agneau-velours.jpg\" alt=\"Portobello pouf\" class=\"nk-hotspot__thumb\">\n                            <div class=\"nk-hotspot__info\">\n                                <span class=\"nk-hotspot__title\">White Portobello pouf<\/span>\n                                <span class=\"nk-hotspot__action\">View product<\/span>\n                            <\/div>\n                        <\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- HOTSPOT 2 : Ensemble Jardin Bambou -->\n                <div class=\"nk-hotspot\" style=\"top: 60%; left: 25%;\">\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\/classiques-armchairs-norki-scandinavian-design\/274-garden-set-rattan-curly-shearling-vintage-norki.html\" class=\"nk-hotspot__link\">\n                            <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5107-large_default\/ensemble-jardin-bambou-vintage-norki.jpg\" alt=\"Bamboo garden set\" class=\"nk-hotspot__thumb\">\n                            <div class=\"nk-hotspot__info\">\n                                <span class=\"nk-hotspot__title\">Vintage bamboo garden set<\/span>\n                                <span class=\"nk-hotspot__action\">View product<\/span>\n                            <\/div>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Image 2 : Canap\u00e9 (PC : Colonne 2 \/ Mobile : Droite) -->\n            <div class=\"nk-elegance__img2-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2708_\u252c\u00ae_Studio_Erick_Saillet.jpg\" alt=\"Small vintage Scandinavian sofa in curly sheepskin in front of a textured wall\" loading=\"lazy\">\n                \n                <!-- HOTSPOT 3 : Banquette Svegards Markaryd -->\n                <div class=\"nk-hotspot\" style=\"top: 53%; 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\/collectionnistes-sofas-design-scandinave-norki\/267-svegard-markaryd-vintage-sofa-norki.html\" class=\"nk-hotspot__link\">\n                            <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5059-large_default\/banquette-svegards-markaryd-vintage-norki.jpg\" alt=\"Svegards Markaryd bench\" class=\"nk-hotspot__thumb\">\n                            <div class=\"nk-hotspot__info\">\n                                <span class=\"nk-hotspot__title\">Svegards Markaryd bench<\/span>\n                                <span class=\"nk-hotspot__action\">View product<\/span>\n                            <\/div>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Texte (PC : Colonne 2 \/ Mobile : Pleine largeur) -->\n            <p class=\"nk-elegance__text\">\n                This chalet does not revisit the past with nostalgia. It proposes a new vision \u2014 free, contemporary, and intentional. A modern alpine elegance, stripped of clich\u00e9s, where architecture, light, and materials interact with precision. A place designed to last \u2014 and to be fully lived in.\n            <\/p>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    \/* =========================================================\n       GESTION DES HOTSPOTS INTERACTIFS\n       ========================================================= *\/\n    const hotspots = document.querySelectorAll('.nk-hotspot');\n    \n    hotspots.forEach(hotspot => {\n        const btnHotspot = hotspot.querySelector('.nk-hotspot__btn');\n        if (btnHotspot) {\n            btnHotspot.addEventListener('click', (e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                \n                \/\/ Fermer les autres hotspots ouverts\n                hotspots.forEach(h => {\n                    if (h !== hotspot) h.classList.remove('is-active');\n                });\n                \n                \/\/ Basculer l'\u00e9tat du hotspot cliqu\u00e9\n                hotspot.classList.toggle('is-active');\n            });\n        }\n    });\n\n    \/\/ Fermeture automatique au clic en dehors\n    document.addEventListener('click', (e) => {\n        if (!e.target.closest('.nk-hotspot')) {\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        \/* Origine math\u00e9matique pure 0x0 pour un alignement parfait *\/\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__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    \/* Infobulle (Tooltip) *\/\n    .nk-hotspot__tooltip {\n        position: absolute;\n        bottom: 25px; \/* D\u00e9calage par rapport au centre *\/\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    \/* 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 : Fauteuils Bao Blancs -->\n                    <article class=\"norki-sel-objets__slide\">\n                        <div class=\"norki-sel-objets__image-wrapper\">\n                            <a href=\"https:\/\/www.norki.com\/en\/25-designer-haute-couture-furniture-collection-norki\" class=\"norki-sel-objets__image-link\" aria-label=\"Discover the pair of white Bao armchairs\">\n                                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/Assise_Photo-Survol-Fauteuil-Bao-Blanc_NORKI.jpg\" alt=\"Pair of curly white Bao armchairs by Norki in an elegant living room\" loading=\"lazy\">\n                            <\/a>\n                            \n                            <!-- HOTSPOT 1 : Fauteuil Bao -->\n                            <div class=\"nk-hotspot\" style=\"top: 80%; left: 65%;\">\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\/395-white-bao-armchair-norki-curly-shearling.html\" class=\"nk-hotspot__link\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5090-large_default\/Fauteuil-bao-blanc-norki-shearling.jpg\" alt=\"White Bao armchair\" class=\"nk-hotspot__thumb\">\n                                        <div class=\"nk-hotspot__info\">\n                                            <span class=\"nk-hotspot__title\">White Bao 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 : Enfilade g\u00e9om\u00e9trique Erick Saillet -->\n                    <article class=\"norki-sel-objets__slide\">\n                        <div class=\"norki-sel-objets__image-wrapper\">\n                            <a href=\"https:\/\/www.norki.com\/en\/25-designer-haute-couture-furniture-collection-norki\" class=\"norki-sel-objets__image-link\" aria-label=\"Discover the geometric wood and brass sideboard\">\n                                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2683_\u252c\u00ae_Studio_Erick_Saillet.jpg\" alt=\"Designer wooden sideboard with textured white fronts and geometric brass inlays by Norki\" loading=\"lazy\">\n                            <\/a>\n\n                            <!-- HOTSPOT 2 : Buffet Oslo -->\n                            <div class=\"nk-hotspot\" style=\"top: 48%; left: 30%;\">\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\/norki-online-shopping-rug-blanket-cushion-furniture-design-high-end\/259-oslo-4-doors-sideboard-norki.html\" class=\"nk-hotspot__link\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/2196-large_default\/buffet-4-portes-oslo-norki.jpg\" alt=\"Oslo 4-door sideboard\" class=\"nk-hotspot__thumb\">\n                                        <div class=\"nk-hotspot__info\">\n                                            <span class=\"nk-hotspot__title\">Oslo 4-door sideboard<\/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 : Fauteuil Swan Vintage Erick Saillet -->\n                    <article class=\"norki-sel-objets__slide\">\n                        <div class=\"norki-sel-objets__image-wrapper\">\n                            <a href=\"https:\/\/www.norki.com\/en\/10-vintage-collection-norki-furniture-curation-scandinavian-design-norki\" class=\"norki-sel-objets__image-link\" aria-label=\"Discover the vintage Swan armchair\">\n                                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/E02_2467_\u252c\u00ae_Studio_Erick_Saillet.jpg\" alt=\"Vintage Swan swivel armchair upholstered by Norki, set on terrazzo flooring in front of a graphic wall\" loading=\"lazy\">\n                            <\/a>\n\n                            <!-- HOTSPOT 3 : Fauteuil Swan -->\n                            <div class=\"nk-hotspot\" style=\"top: 68%; left: 40%;\">\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\/collectionnistes-armchairs-designers-norki\/611-pair-of-swan-armchairs-arne-jacobsen-grey-beige.html\" class=\"nk-hotspot__link\">\n                                        <img decoding=\"async\" src=\"https:\/\/www.norki.com\/5057-large_default\/paire-de-fauteuils-swan-arne-jacobsen-gris-beige.jpg\" alt=\"Swan armchair\" class=\"nk-hotspot__thumb\">\n                                        <div class=\"nk-hotspot__info\">\n                                            <span class=\"nk-hotspot__title\">Arne Jacobsen Swan armchairs<\/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; \/\/ Fallback timer pour pr\u00e9venir le gel si perte de focus onglet\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       S\u00c9CURIT\u00c9 : 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<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\/06\/E02_2910_\u252c\u00ae_Studio_Erick_Saillet.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 : Jackson Hole (Active par d\u00e9faut - COMING SOON) -->\n            <article class=\"slide active is-coming-soon\">\n                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/2025_10_21_Living.jpg\" alt=\"Contemporary Luxury - Chalet in Jackson Hole\">\n                <div class=\"slide-content\">\n                    <div class=\"slide-content-text\">\n                        <span class=\"slide-city\">Jackson Hole<\/span>\n                        <h3>Contemporary Luxury<\/h3>\n                        <p>Chalet in Jackson Hole<\/p>\n                    <\/div>\n                    <a href=\"#\" class=\"link-voir\">View<\/a>\n                <\/div>\n            <\/article>\n\n            <!-- Slide 2 : Aspen (COMING SOON) -->\n            <article class=\"slide is-coming-soon\">\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 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            <!-- Slide 3 : Meg\u00e8ve (COMING SOON) -->\n            <article class=\"slide is-coming-soon\">\n                <img decoding=\"async\" src=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/2026_01_22_Sicoria_Living.jpg\" alt=\"Contemporary Luxury - Chalet in Meg\u00e8ve\">\n                <div class=\"slide-content\">\n                    <div class=\"slide-content-text\">\n                        <span class=\"slide-city\">Meg\u00e8ve<\/span>\n                        <h3>Contemporary Luxury<\/h3>\n                        <p>Chalet in Meg\u00e8ve<\/p>\n                    <\/div>\n                    <a href=\"#\" class=\"link-voir\">View<\/a>\n                <\/div>\n            <\/article>\n\n        <\/div>\n    <\/section>\n\n<\/div>\n\n<!-- ==========================================\n     BLOC CSS - STYLES INITIAUX & ADAPT\u00c9S\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\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        border-radius: var(--radius-img);\n        overflow: hidden; \/* Emp\u00eache l'image de d\u00e9passer au hover scale *\/\n    }\n\n    .wp-custom-projects-slider-container .slide img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        border-radius: var(--radius-img);\n        transition: transform 0.5s ease;\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);\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 under construction\"; \/* Tooltip anglais *\/\n        position: absolute;\n        bottom: 30px; \/* \u00c0 l'int\u00e9rieur pour contourner l'overflow:hidden *\/\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<!-- ==========================================\n     BLOC JAVASCRIPT - COMPORTEMENT\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 ? Math.max(0, slidesElements.length - 1) : currentIndex - 1;\n        let nextIndex = currentIndex + 1 >= slidesElements.length ? 0 : currentIndex + 1;\n        \n        if (slidesElements[prevIndex]) slidesElements[prevIndex].classList.add('prev');\n        if (slidesElements[nextIndex]) 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 ? Math.max(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>Contemporary and Refined Chalet Chalet in Courchevel Courchevel Contemporary Refined 1500 m\u00b2 2026 An Exceptional Address in the Heart of the Alps In Courchevel, at the foot of over 150 kilometers of pristine ski slopes in one of the most exclusive resorts in the French Alps, this ski-in ski-out chalet is set within a breathtaking [&hellip;]<\/p>\n","protected":false},"author":3,"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-1888","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Luxury Chalet Courchevel: High-End Interior Design | Studio Norki<\/title>\n<meta name=\"description\" content=\"Discover our luxury chalet project in Courchevel. Maison Norki blends alpine charm with high-end interior design in the heart of the French Alps.\" \/>\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\/courchevel-french-alps\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Luxury Chalet Courchevel: High-End Interior Design | Studio Norki\" \/>\n<meta property=\"og:description\" content=\"Discover our luxury chalet project in Courchevel. Maison Norki blends alpine charm with high-end interior design in the heart of the French Alps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/\" \/>\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-09T06:23:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/Untitled-1-1.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=\"12 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\\\/courchevel-french-alps\\\/\",\"url\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/courchevel-french-alps\\\/\",\"name\":\"Luxury Chalet Courchevel: High-End Interior Design | Studio Norki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/courchevel-french-alps\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/courchevel-french-alps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Untitled-1-1.jpg\",\"datePublished\":\"2026-06-17T07:48:54+00:00\",\"dateModified\":\"2026-07-09T06:23:15+00:00\",\"description\":\"Discover our luxury chalet project in Courchevel. Maison Norki blends alpine charm with high-end interior design in the heart of the French Alps.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/courchevel-french-alps\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/courchevel-french-alps\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/courchevel-french-alps\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Untitled-1-1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.norki.com\\\/studio-chalet\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Untitled-1-1.jpg\",\"width\":852,\"height\":1131},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.norki.com\\\/en\\\/studio-chalet\\\/luxury-interior-design\\\/courchevel-french-alps\\\/#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\":\"Courchevel\"}]},{\"@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":"Luxury Chalet Courchevel: High-End Interior Design | Studio Norki","description":"Discover our luxury chalet project in Courchevel. Maison Norki blends alpine charm with high-end interior design in the heart of the French Alps.","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\/courchevel-french-alps\/","og_locale":"fr_FR","og_type":"article","og_title":"Luxury Chalet Courchevel: High-End Interior Design | Studio Norki","og_description":"Discover our luxury chalet project in Courchevel. Maison Norki blends alpine charm with high-end interior design in the heart of the French Alps.","og_url":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/","og_site_name":"Norki","article_publisher":"https:\/\/facebook.com\/NorkiDecoration","article_modified_time":"2026-07-09T06:23:15+00:00","og_image":[{"url":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/Untitled-1-1.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/","url":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/","name":"Luxury Chalet Courchevel: High-End Interior Design | Studio Norki","isPartOf":{"@id":"https:\/\/www.norki.com\/studio-chalet\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/#primaryimage"},"image":{"@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/Untitled-1-1.jpg","datePublished":"2026-06-17T07:48:54+00:00","dateModified":"2026-07-09T06:23:15+00:00","description":"Discover our luxury chalet project in Courchevel. Maison Norki blends alpine charm with high-end interior design in the heart of the French Alps.","breadcrumb":{"@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/#primaryimage","url":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/Untitled-1-1.jpg","contentUrl":"https:\/\/www.norki.com\/studio-chalet\/wp-content\/uploads\/2026\/06\/Untitled-1-1.jpg","width":852,"height":1131},{"@type":"BreadcrumbList","@id":"https:\/\/www.norki.com\/en\/studio-chalet\/luxury-interior-design\/courchevel-french-alps\/#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":"Courchevel"}]},{"@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":"Super Viewer","author_link":"https:\/\/www.norki.com\/studio-chalet\/inspiration-decoration-montagne\/author\/super-viewer\/"},"uagb_comment_info":0,"uagb_excerpt":"Contemporary and Refined Chalet Chalet in Courchevel Courchevel Contemporary Refined 1500 m\u00b2 2026 An Exceptional Address in the Heart of the Alps In Courchevel, at the foot of over 150 kilometers of pristine ski slopes in one of the most exclusive resorts in the French Alps, this ski-in ski-out chalet is set within a breathtaking\u2026","_links":{"self":[{"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/pages\/1888","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/comments?post=1888"}],"version-history":[{"count":17,"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/pages\/1888\/revisions"}],"predecessor-version":[{"id":2422,"href":"https:\/\/www.norki.com\/studio-chalet\/wp-json\/wp\/v2\/pages\/1888\/revisions\/2422"}],"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=1888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}