{"id":47,"date":"2026-08-05T16:08:40","date_gmt":"2026-08-05T16:08:40","guid":{"rendered":"https:\/\/www.jnyouevents.com\/?page_id=47"},"modified":"2026-09-09T18:18:36","modified_gmt":"2026-09-09T18:18:36","slug":"experiences-sur-mesure","status":"publish","type":"page","link":"https:\/\/www.jnyouevents.com\/en\/experiences-sur-mesure\/","title":{"rendered":"Bespoke Experiences"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"47\" class=\"elementor elementor-47\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-368592f e-con-full e-flex e-con e-parent\" data-id=\"368592f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d8c0dc elementor-widget elementor-widget-html\" data-id=\"1d8c0dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     JN.YOU \u2014 PAGE EXP\u00c9RIENCES SUR MESURE \/ BLOC 01 \u2014 HERO V4\n     PLEIN \u00c9CRAN \u2022 CIN\u00c9MATIQUE \u2022 \u00c9DITORIAL \u2022 RESPONSIVE\n     SANS STICKY \u2022 SANS ROSE FLASHY\n========================================================== -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Montserrat:wght@400;500;600&display=swap');\n\n.jny-bespoke-hero-v1{\n  --wine:#54232F;\n  --plum:#44123A;\n  --sage:#778A77;\n  --sage-soft:#A8B6A5;\n  --paper:#FBF9F6;\n  --porcelain:#F2EFEA;\n  --taupe:#4F444C;\n\n  position:relative;\n  left:50%;\n\n  width:100vw!important;\n  max-width:100vw!important;\n\n  height:calc(100svh - 94px);\n  min-height:calc(100svh - 94px);\n  max-height:none;\n\n  margin-left:-50vw!important;\n  margin-right:-50vw!important;\n\n  overflow:hidden;\n  isolation:isolate;\n\n  background:#241218;\n  color:var(--paper);\n\n  font-family:\"Montserrat\",sans-serif;\n}\n\n.jny-bespoke-hero-v1,\n.jny-bespoke-hero-v1 *{\n  box-sizing:border-box;\n}\n\n.elementor-widget-html:has(.jny-bespoke-hero-v1),\n.elementor-widget-html:has(.jny-bespoke-hero-v1) > .elementor-widget-container{\n  width:100%!important;\n  max-width:none!important;\n  overflow:visible!important;\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n.jny-bespoke-hero-v1-media{\n  position:absolute;\n  inset:0;\n  z-index:0;\n  overflow:hidden;\n}\n\n.jny-bespoke-hero-v1-media img{\n  position:absolute;\n  inset:-4%;\n\n  width:108%;\n  height:108%;\n\n  display:block;\n  object-fit:cover;\n  object-position:center 52%;\n\n  filter:saturate(.88) contrast(.98);\n\n  transform:\n    translate3d(0,var(--media-y,0px),0)\n    scale(var(--media-scale,1.08));\n\n  will-change:transform,filter;\n}\n\n.jny-bespoke-hero-v1-shade{\n  position:absolute;\n  inset:0;\n  z-index:1;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(24,9,16,.78) 0%,\n      rgba(24,9,16,.54) 30%,\n      rgba(24,9,16,.16) 67%,\n      rgba(24,9,16,.24) 100%\n    ),\n    linear-gradient(\n      180deg,\n      rgba(20,8,14,.10) 0%,\n      rgba(20,8,14,.03) 38%,\n      rgba(20,8,14,.62) 100%\n    );\n}\n\n.jny-bespoke-hero-v1-glow{\n  position:absolute;\n  z-index:2;\n\n  right:-12%;\n  top:-18%;\n\n  width:52vw;\n  aspect-ratio:1;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(168,182,165,.20) 0%,\n      rgba(168,182,165,.07) 34%,\n      rgba(168,182,165,0) 70%\n    );\n\n  filter:blur(18px);\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   GHOST\n========================================================= *\/\n\n.jny-bespoke-hero-v1-ghost{\n  position:absolute;\n  z-index:2;\n\n  right:-.06em;\n  bottom:-.10em;\n\n  color:rgba(251,249,246,.052);\n\n  font-family:\"Cormorant Garamond\",serif;\n  font-size:clamp(180px,25vw,450px);\n  font-weight:500;\n  line-height:.70;\n  letter-spacing:-.08em;\n\n  white-space:nowrap;\n\n  pointer-events:none;\n  user-select:none;\n\n  transform:\n    translate3d(var(--ghost-x,0px),var(--ghost-y,0px),0)\n    scale(var(--ghost-scale,1));\n}\n\n\n\/* =========================================================\n   LAYOUT\n========================================================= *\/\n\n.jny-bespoke-hero-v1-inner{\n  position:relative;\n  z-index:4;\n\n  width:min(100%,1540px);\n  height:100%;\n  min-height:100%;\n\n  margin:0 auto;\n\n  display:grid;\n  grid-template-columns:minmax(0,1.08fr) minmax(280px,.42fr);\n  gap:clamp(48px,7vw,104px);\n  align-items:center;\n\n  padding:\n    clamp(64px,7vh,90px)\n    clamp(24px,5vw,72px)\n    clamp(96px,10vh,118px);\n}\n\n.jny-bespoke-hero-v1-main{\n  max-width:940px;\n  margin-top:-7vh;\n\n  opacity:var(--content-opacity,1);\n\n  transform:\n    translate3d(0,var(--content-y,0px),0);\n\n  will-change:transform,opacity;\n}\n\n\n\/* =========================================================\n   KICKER\n========================================================= *\/\n\n.jny-bespoke-hero-v1-kicker{\n  display:flex;\n  align-items:center;\n  gap:13px;\n\n  margin-bottom:20px;\n\n  color:#CBD7C9;\n\n  font-size:10.5px;\n  font-weight:600;\n  letter-spacing:.20em;\n  text-transform:uppercase;\n}\n\n.jny-bespoke-hero-v1-kicker::before{\n  content:\"\";\n\n  width:42px;\n  height:1px;\n\n  background:rgba(251,249,246,.34);\n}\n\n\n\/* =========================================================\n   TITLE\n========================================================= *\/\n\n.jny-bespoke-hero-v1-title{\n  max-width:1020px;\n  margin:0;\n\n  color:var(--paper);\n\n  font-family:\"Cormorant Garamond\",serif;\n  font-size:clamp(72px,8vw,130px);\n  font-weight:500;\n  line-height:.83;\n  letter-spacing:-.058em;\n\n  text-wrap:balance;\n}\n\n.jny-bespoke-hero-v1-title span,\n.jny-bespoke-hero-v1-title em{\n  display:block;\n}\n\n.jny-bespoke-hero-v1-title em{\n  margin-top:.12em;\n\n  color:#D1DCCF;\n\n  font-size:.48em;\n  font-weight:400;\n  font-style:italic;\n  line-height:1.08;\n  letter-spacing:-.01em;\n}\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n.jny-bespoke-hero-v1-copy{\n  width:min(100%,640px);\n  margin:24px 0 0;\n\n  color:rgba(251,249,246,.78);\n\n  font-size:15.5px;\n  line-height:1.74;\n}\n\n\n\/* =========================================================\n   CTA\n========================================================= *\/\n\n.jny-bespoke-hero-v1-actions{\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  gap:18px;\n\n  margin-top:28px;\n}\n\n.jny-bespoke-hero-v1-cta,\n.jny-bespoke-hero-v1-cta:hover,\n.jny-bespoke-hero-v1-cta:focus,\n.jny-bespoke-hero-v1-cta:focus-visible,\n.jny-bespoke-hero-v1-cta:active,\n.jny-bespoke-hero-v1-cta:visited{\n  min-height:62px;\n\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  gap:15px;\n\n  padding:18px 30px;\n\n  border:1px solid rgba(251,249,246,.44)!important;\n  border-radius:999px!important;\n\n  color:var(--paper)!important;\n  background:rgba(251,249,246,.08)!important;\n\n  backdrop-filter:blur(12px);\n  -webkit-backdrop-filter:blur(12px);\n\n  text-decoration:none!important;\n\n  font-size:11px;\n  font-weight:600;\n  letter-spacing:.13em;\n  text-transform:uppercase;\n\n  transition:\n    transform .30s ease,\n    background-color .30s ease,\n    border-color .30s ease;\n}\n\n.jny-bespoke-hero-v1-cta:hover,\n.jny-bespoke-hero-v1-cta:focus-visible{\n  transform:translateY(-3px);\n\n  background:rgba(251,249,246,.15)!important;\n  border-color:rgba(251,249,246,.70)!important;\n}\n\n.jny-bespoke-hero-v1-cta svg{\n  width:17px;\n  height:17px;\n\n  fill:none;\n  stroke:currentColor;\n  stroke-width:1.7;\n  stroke-linecap:round;\n  stroke-linejoin:round;\n\n  transition:transform .30s ease;\n}\n\n.jny-bespoke-hero-v1-cta:hover svg{\n  transform:translate(2px,2px);\n}\n\n\n\/* =========================================================\n   RIGHT NOTE\n========================================================= *\/\n\n.jny-bespoke-hero-v1-side{\n  align-self:end;\n\n  max-width:360px;\n  margin-bottom:clamp(68px,8vh,92px);\n}\n\n.jny-bespoke-hero-v1-side-line{\n  width:100%;\n  height:1px;\n\n  margin-bottom:18px;\n\n  background:rgba(251,249,246,.22);\n}\n\n.jny-bespoke-hero-v1-side small{\n  display:block;\n\n  margin-bottom:9px;\n\n  color:rgba(251,249,246,.52);\n\n  font-size:9.5px;\n  font-weight:600;\n  letter-spacing:.16em;\n  text-transform:uppercase;\n}\n\n.jny-bespoke-hero-v1-side p{\n  margin:0;\n\n  color:rgba(251,249,246,.87);\n\n  font-family:\"Cormorant Garamond\",serif;\n  font-size:clamp(27px,2.4vw,38px);\n  font-weight:400;\n  font-style:italic;\n  line-height:1.08;\n}\n\n\n\/* =========================================================\n   BOTTOM META\n========================================================= *\/\n\n.jny-bespoke-hero-v1-bottom{\n  position:absolute;\n  z-index:6;\n\n  left:clamp(24px,5vw,72px);\n  right:clamp(24px,5vw,72px);\n  bottom:42px;\n\n  display:flex;\n  align-items:center;\n\n  color:rgba(251,249,246,.76);\n}\n\n.jny-bespoke-hero-v1-meta{\n  display:flex;\n  align-items:center;\n  gap:24px;\n\n  font-size:10px;\n  font-weight:600;\n  letter-spacing:.14em;\n  text-transform:uppercase;\n}\n\n.jny-bespoke-hero-v1-meta span + span{\n  position:relative;\n}\n\n.jny-bespoke-hero-v1-meta span + span::before{\n  content:\"\";\n\n  position:absolute;\n  left:-13px;\n  top:50%;\n\n  width:3px;\n  height:3px;\n\n  border-radius:50%;\n  background:rgba(251,249,246,.40);\n\n  transform:translateY(-50%);\n}\n\n\n\/* =========================================================\n   ENTR\u00c9E\n========================================================= *\/\n\n.jny-bespoke-hero-v1-kicker,\n.jny-bespoke-hero-v1-title,\n.jny-bespoke-hero-v1-copy,\n.jny-bespoke-hero-v1-actions,\n.jny-bespoke-hero-v1-side{\n  opacity:0;\n  transform:translateY(24px);\n\n  animation:\n    jnyBespokeHeroReveal\n    .9s\n    cubic-bezier(.2,.7,.2,1)\n    forwards;\n}\n\n.jny-bespoke-hero-v1-title{\n  animation-delay:.08s;\n}\n\n.jny-bespoke-hero-v1-copy{\n  animation-delay:.18s;\n}\n\n.jny-bespoke-hero-v1-actions{\n  animation-delay:.27s;\n}\n\n.jny-bespoke-hero-v1-side{\n  animation-delay:.34s;\n}\n\n@keyframes jnyBespokeHeroReveal{\n  to{\n    opacity:1;\n    transform:none;\n  }\n}\n\n\n\/* =========================================================\n   WORDPRESS ADMIN\n========================================================= *\/\n\nbody.admin-bar .jny-bespoke-hero-v1{\n  height:calc(100svh - 126px);\n  min-height:calc(100svh - 126px);\n}\n\n\n\/* =========================================================\n   DESKTOP BAS\n========================================================= *\/\n\n@media(min-width:1025px) and (max-height:780px){\n\n  .jny-bespoke-hero-v1-inner{\n    padding-top:52px;\n    padding-bottom:88px;\n  }\n\n  .jny-bespoke-hero-v1-main{\n    margin-top:-4vh;\n  }\n\n  .jny-bespoke-hero-v1-title{\n    font-size:clamp(62px,7vw,106px);\n  }\n\n  .jny-bespoke-hero-v1-copy{\n    margin-top:17px;\n\n    font-size:14.5px;\n    line-height:1.62;\n  }\n\n  .jny-bespoke-hero-v1-actions{\n    margin-top:20px;\n  }\n\n  .jny-bespoke-hero-v1-bottom{\n    bottom:30px;\n  }\n\n  .jny-bespoke-hero-v1-side{\n    margin-bottom:52px;\n  }\n}\n\n\n\/* =========================================================\n   TABLETTE\n========================================================= *\/\n\n@media(min-width:701px) and (max-width:1024px){\n\n  .jny-bespoke-hero-v1{\n    height:calc(100svh - 88px);\n    min-height:calc(100svh - 88px);\n    max-height:none;\n  }\n\n  body.admin-bar .jny-bespoke-hero-v1{\n    height:calc(100svh - 120px);\n    min-height:calc(100svh - 120px);\n  }\n\n  .jny-bespoke-hero-v1-inner{\n    grid-template-columns:1fr;\n    gap:22px;\n\n    padding:\n      64px\n      clamp(34px,6vw,58px)\n      92px;\n  }\n\n  .jny-bespoke-hero-v1-main{\n    max-width:780px;\n    margin-top:-4vh;\n  }\n\n  .jny-bespoke-hero-v1-title{\n    font-size:clamp(62px,9vw,92px);\n  }\n\n  .jny-bespoke-hero-v1-copy{\n    max-width:600px;\n  }\n\n  .jny-bespoke-hero-v1-side{\n    max-width:430px;\n    margin:0;\n  }\n\n  .jny-bespoke-hero-v1-side p{\n    font-size:28px;\n  }\n\n  .jny-bespoke-hero-v1-bottom{\n    left:clamp(34px,6vw,58px);\n    right:clamp(34px,6vw,58px);\n    bottom:28px;\n  }\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:700px){\n\n  .jny-bespoke-hero-v1{\n    height:calc(100svh - 68px);\n    min-height:calc(100svh - 68px);\n    max-height:none;\n  }\n\n  body.admin-bar .jny-bespoke-hero-v1{\n    height:calc(100svh - 114px);\n    min-height:calc(100svh - 114px);\n  }\n\n  .jny-bespoke-hero-v1-media img{\n    inset:0;\n\n    width:100%;\n    height:100%;\n\n    object-position:60% center;\n\n    transform:\n      translate3d(0,var(--media-y,0px),0)\n      scale(var(--media-scale,1.035));\n  }\n\n  .jny-bespoke-hero-v1-shade{\n    background:\n      linear-gradient(\n        180deg,\n        rgba(22,9,15,.18) 0%,\n        rgba(22,9,15,.10) 28%,\n        rgba(22,9,15,.48) 65%,\n        rgba(22,9,15,.88) 100%\n      ),\n      linear-gradient(\n        90deg,\n        rgba(22,9,15,.36) 0%,\n        rgba(22,9,15,.08) 100%\n      );\n  }\n\n  .jny-bespoke-hero-v1-inner{\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n\n    padding:\n      62px\n      18px\n      94px;\n  }\n\n  .jny-bespoke-hero-v1-main{\n    width:100%;\n    margin-top:-3vh;\n  }\n\n  .jny-bespoke-hero-v1-kicker{\n    margin-bottom:13px;\n\n    font-size:9px;\n    letter-spacing:.17em;\n  }\n\n  .jny-bespoke-hero-v1-kicker::before{\n    width:28px;\n  }\n\n  .jny-bespoke-hero-v1-title{\n    font-size:clamp(52px,14.6vw,68px);\n    line-height:.87;\n  }\n\n  .jny-bespoke-hero-v1-title em{\n    margin-top:.14em;\n\n    font-size:.54em;\n    line-height:1.10;\n  }\n\n  .jny-bespoke-hero-v1-copy{\n    margin-top:18px;\n\n    font-size:14px;\n    line-height:1.64;\n  }\n\n  .jny-bespoke-hero-v1-actions{\n    margin-top:21px;\n  }\n\n  .jny-bespoke-hero-v1-cta,\n  .jny-bespoke-hero-v1-cta:hover,\n  .jny-bespoke-hero-v1-cta:focus,\n  .jny-bespoke-hero-v1-cta:focus-visible,\n  .jny-bespoke-hero-v1-cta:active,\n  .jny-bespoke-hero-v1-cta:visited{\n    min-height:55px;\n\n    padding:15px 20px;\n\n    font-size:9.8px;\n  }\n\n  .jny-bespoke-hero-v1-side{\n    display:none;\n  }\n\n  .jny-bespoke-hero-v1-ghost{\n    right:-.04em;\n    bottom:.03em;\n\n    font-size:clamp(150px,45vw,205px);\n  }\n\n  .jny-bespoke-hero-v1-bottom{\n    left:18px;\n    right:18px;\n    bottom:24px;\n  }\n\n  .jny-bespoke-hero-v1-meta{\n    gap:17px;\n\n    font-size:7.8px;\n    letter-spacing:.12em;\n  }\n\n  .jny-bespoke-hero-v1-meta span + span::before{\n    left:-9px;\n  }\n}\n\n\n\/* =========================================================\n   PETITS MOBILES\n========================================================= *\/\n\n@media(max-width:390px){\n\n  .jny-bespoke-hero-v1{\n    height:calc(100svh - 68px);\n    min-height:calc(100svh - 68px);\n    max-height:none;\n  }\n\n  .jny-bespoke-hero-v1-inner{\n    padding:\n      54px\n      15px\n      82px;\n  }\n\n  .jny-bespoke-hero-v1-title{\n    font-size:clamp(45px,13.2vw,54px);\n  }\n\n  .jny-bespoke-hero-v1-copy{\n    font-size:13px;\n    line-height:1.60;\n  }\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  .jny-bespoke-hero-v1 *,\n  .jny-bespoke-hero-v1 *::before,\n  .jny-bespoke-hero-v1 *::after{\n    animation:none!important;\n    transition:none!important;\n  }\n\n  .jny-bespoke-hero-v1-kicker,\n  .jny-bespoke-hero-v1-title,\n  .jny-bespoke-hero-v1-copy,\n  .jny-bespoke-hero-v1-actions,\n  .jny-bespoke-hero-v1-side{\n    opacity:1!important;\n    transform:none!important;\n  }\n}\n<\/style>\n\n\n<section class=\"jny-bespoke-hero-v1\" aria-labelledby=\"jny-bespoke-hero-v1-title\">\n\n  <div class=\"jny-bespoke-hero-v1-media\" aria-hidden=\"true\">\n\n    <img\n      src=\"https:\/\/www.jnyouevents.com\/wp-content\/uploads\/2026\/08\/domaine-piscine.png\"\n      alt=\"\"\n      loading=\"eager\"\n      decoding=\"async\"\n    >\n\n  <\/div>\n\n\n  <div\n    class=\"jny-bespoke-hero-v1-shade\"\n    aria-hidden=\"true\">\n  <\/div>\n\n  <div\n    class=\"jny-bespoke-hero-v1-glow\"\n    aria-hidden=\"true\">\n  <\/div>\n\n\n  <div\n    class=\"jny-bespoke-hero-v1-ghost\"\n    aria-hidden=\"true\">\n\n    VOUS.\n\n  <\/div>\n\n\n  <div class=\"jny-bespoke-hero-v1-inner\">\n\n\n    <div class=\"jny-bespoke-hero-v1-main\">\n\n\n      <div class=\"jny-bespoke-hero-v1-kicker\">\n\n        Exp\u00e9riences sur mesure \u00b7 JN.YOU\n\n      <\/div>\n\n\n      <h1\n        class=\"jny-bespoke-hero-v1-title\"\n        id=\"jny-bespoke-hero-v1-title\">\n\n        <span>\n          Une id\u00e9e \u00e0 part.\n        <\/span>\n\n        <em>\n          Une exp\u00e9rience \u00e0 vous.\n        <\/em>\n\n      <\/h1>\n\n\n      <p class=\"jny-bespoke-hero-v1-copy\">\n\n        Un d\u00eener dans un lieu inattendu, une surprise pens\u00e9e pour quelques heures,\n        un week-end imagin\u00e9 autour d\u2019une personne ou une c\u00e9l\u00e9bration qui ne rentre\n        dans aucune case : nous construisons l\u2019exp\u00e9rience \u00e0 partir de votre envie.\n\n      <\/p>\n\n\n      <div class=\"jny-bespoke-hero-v1-actions\">\n\n        <a\n          class=\"jny-bespoke-hero-v1-cta\"\n          href=\"#jny-bespoke-suite\">\n\n          Imaginer votre exp\u00e9rience\n\n          <svg\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\">\n\n            <path d=\"M12 5v14\"><\/path>\n            <path d=\"M6 13l6 6 6-6\"><\/path>\n\n          <\/svg>\n\n        <\/a>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <aside class=\"jny-bespoke-hero-v1-side\">\n\n\n      <div class=\"jny-bespoke-hero-v1-side-line\"><\/div>\n\n\n      <small>\n        Le point de d\u00e9part\n      <\/small>\n\n\n      <p>\n        Ce que vous voulez faire ressentir,\n        avant m\u00eame de savoir \u00e0 quoi cela ressemblera.\n      <\/p>\n\n\n    <\/aside>\n\n\n  <\/div>\n\n\n  <div class=\"jny-bespoke-hero-v1-bottom\">\n\n\n    <div class=\"jny-bespoke-hero-v1-meta\">\n\n      <span>Annecy<\/span>\n      <span>France<\/span>\n      <span>Destinations<\/span>\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n\n\n<script>\n(function(){\n\n  const hero = document.querySelector('.jny-bespoke-hero-v1');\n\n  if(!hero || hero.dataset.jnyInit === '1'){\n    return;\n  }\n\n  hero.dataset.jnyInit = '1';\n\n\n  const media = hero.querySelector(\n    '.jny-bespoke-hero-v1-media img'\n  );\n\n  const ghost = hero.querySelector(\n    '.jny-bespoke-hero-v1-ghost'\n  );\n\n  const main = hero.querySelector(\n    '.jny-bespoke-hero-v1-main'\n  );\n\n\n  let ticking = false;\n\n\n  const clamp = (v,min,max) => {\n    return Math.min(max,Math.max(min,v));\n  };\n\n\n  const lerp = (a,b,t) => {\n    return a + (b-a) * t;\n  };\n\n\n  const ease = t => {\n    return 1 - Math.pow(\n      1 - clamp(t,0,1),\n      3\n    );\n  };\n\n\n  function update(){\n\n    ticking = false;\n\n\n    const rect = hero.getBoundingClientRect();\n\n    const h =\n      hero.offsetHeight ||\n      window.innerHeight ||\n      1;\n\n\n    const p = clamp(\n      -rect.top \/ Math.max(h * .78,1),\n      0,\n      1\n    );\n\n\n    const ep = ease(p);\n\n\n    if(media){\n\n      const compact =\n        window.innerWidth <= 700;\n\n\n      media.style.setProperty(\n        '--media-scale',\n\n        lerp(\n          compact ? 1.035 : 1.08,\n          compact ? 1.02 : 1.03,\n          ep\n        ).toFixed(3)\n      );\n\n\n      media.style.setProperty(\n        '--media-y',\n\n        `${lerp(\n          0,\n          compact ? 10 : 24,\n          ep\n        ).toFixed(1)}px`\n      );\n\n    }\n\n\n    if(main){\n\n      main.style.setProperty(\n        '--content-y',\n\n        `${lerp(\n          0,\n          -34,\n          ep\n        ).toFixed(1)}px`\n      );\n\n\n      main.style.setProperty(\n        '--content-opacity',\n\n        lerp(\n          1,\n          .28,\n          ep\n        ).toFixed(3)\n      );\n\n    }\n\n\n    if(ghost){\n\n      ghost.style.setProperty(\n        '--ghost-x',\n\n        `${lerp(\n          0,\n          -36,\n          ep\n        ).toFixed(1)}px`\n      );\n\n\n      ghost.style.setProperty(\n        '--ghost-y',\n\n        `${lerp(\n          0,\n          -15,\n          ep\n        ).toFixed(1)}px`\n      );\n\n\n      ghost.style.setProperty(\n        '--ghost-scale',\n\n        lerp(\n          1,\n          1.06,\n          ep\n        ).toFixed(3)\n      );\n\n    }\n\n  }\n\n\n  function requestUpdate(){\n\n    if(ticking){\n      return;\n    }\n\n    ticking = true;\n\n    requestAnimationFrame(update);\n\n  }\n\n\n  update();\n\n\n  window.addEventListener(\n    'scroll',\n    requestUpdate,\n    {passive:true}\n  );\n\n\n  window.addEventListener(\n    'resize',\n    requestUpdate,\n    {passive:true}\n  );\n\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bbc4702 e-con-full e-flex e-con e-parent\" data-id=\"bbc4702\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a5d3a07 elementor-widget elementor-widget-html\" data-id=\"a5d3a07\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     JN.YOU \u2014 EXP\u00c9RIENCES SUR MESURE\n     BLOC \"L'\u00c9MOTION D'ABORD\"\n     VERSION SANS IMAGES \u2022 SANS VERT \u2022 SANS ROSE FLASHY\n     POURPRE \/ BORDEAUX \/ PORCELAINE\n========================================================== -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Montserrat:wght@400;500;600&display=swap');\n\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.jny-emotion-v5{\n\n  --purple:#44123A;\n  --wine:#4E262F;\n  --wine-deep:#32151D;\n  --wine-soft:#6A3942;\n\n  --paper:#FBF9F6;\n  --porcelain:#F2EFEA;\n\n  --beige:#D9CDC8;\n  --beige-light:#E8DFDB;\n\n  --taupe:#4F444C;\n\n  position:relative;\n\n  left:50%;\n\n  width:100vw!important;\n  max-width:100vw!important;\n\n  margin-left:-50vw!important;\n  margin-right:-50vw!important;\n\n  overflow:hidden;\n\n  isolation:isolate;\n\n  background:\n    radial-gradient(\n      circle at 88% 3%,\n      rgba(78,38,47,.055),\n      transparent 25%\n    ),\n    linear-gradient(\n      180deg,\n      #FBF9F6 0%,\n      #F2EFEA 100%\n    );\n\n  color:var(--taupe);\n\n  font-family:\"Montserrat\",sans-serif;\n}\n\n\n.jny-emotion-v5,\n.jny-emotion-v5 *{\n  box-sizing:border-box;\n}\n\n\n.elementor-widget-html:has(.jny-emotion-v5),\n.elementor-widget-html:has(.jny-emotion-v5) > .elementor-widget-container{\n  width:100%!important;\n  max-width:none!important;\n  overflow:visible!important;\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.jny-emotion-head{\n\n  position:relative;\n\n  z-index:4;\n\n  width:min(100%,1500px);\n\n  margin:0 auto;\n\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(320px,.43fr);\n\n  gap:clamp(48px,7vw,110px);\n\n  align-items:end;\n\n  padding:\n    clamp(92px,7vw,130px)\n    clamp(22px,5vw,74px)\n    clamp(52px,4vw,72px);\n}\n\n\n\/* kicker *\/\n\n.jny-emotion-kicker{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:13px;\n\n  margin-bottom:20px;\n\n  color:var(--wine);\n\n  font-size:10.5px;\n\n  font-weight:600;\n\n  letter-spacing:.19em;\n\n  text-transform:uppercase;\n}\n\n\n.jny-emotion-kicker::before{\n\n  content:\"\";\n\n  width:42px;\n\n  height:1px;\n\n  background:\n    rgba(78,38,47,.35);\n}\n\n\n\/* titre *\/\n\n.jny-emotion-title{\n\n  max-width:1030px;\n\n  margin:0;\n\n  color:var(--wine);\n\n  font-family:\"Cormorant Garamond\",serif;\n\n  font-size:clamp(68px,6.4vw,106px);\n\n  font-weight:500;\n\n  line-height:.88;\n\n  letter-spacing:-.052em;\n}\n\n\n.jny-emotion-title em{\n\n  display:block;\n\n  max-width:920px;\n\n  margin-top:.11em;\n\n  color:rgba(78,38,47,.66);\n\n  font-size:.60em;\n\n  font-weight:400;\n\n  font-style:italic;\n\n  line-height:1.10;\n}\n\n\n\/* texte intro *\/\n\n.jny-emotion-lead{\n\n  max-width:500px;\n\n  margin:0;\n\n  color:rgba(79,68,76,.70);\n\n  font-size:15px;\n\n  line-height:1.82;\n}\n\n\n\/* =========================================================\n   GRANDE SC\u00c8NE\n========================================================= *\/\n\n.jny-emotion-stage{\n\n  position:relative;\n\n  z-index:2;\n\n  width:min(calc(100% - 36px),1600px);\n\n  min-height:clamp(660px,76svh,820px);\n\n  margin:\n    0\n    auto\n    clamp(90px,7vw,120px);\n\n  overflow:hidden;\n\n  border-radius:42px;\n\n  background:\n    radial-gradient(\n      circle at 80% 20%,\n      rgba(217,205,200,.095),\n      transparent 29%\n    ),\n    radial-gradient(\n      circle at 8% 93%,\n      rgba(251,249,246,.045),\n      transparent 30%\n    ),\n    linear-gradient(\n      135deg,\n      #30141C 0%,\n      #48232D 48%,\n      #271016 100%\n    );\n\n  box-shadow:\n    0 40px 120px rgba(68,18,58,.14);\n\n  opacity:0;\n\n  transform:\n    translateY(38px)\n    scale(.994);\n\n  transition:\n    opacity .9s ease,\n    transform 1s cubic-bezier(.2,.72,.2,1),\n    background 1s cubic-bezier(.2,.72,.2,1);\n}\n\n\n.jny-emotion-stage.is-visible{\n\n  opacity:1;\n\n  transform:none;\n}\n\n\n\/* =========================================================\n   AMBIANCES\n   UNIQUEMENT NUANCES POURPRE \/ BORDEAUX\n========================================================= *\/\n\n.jny-emotion-stage[data-state=\"surprendre\"]{\n\n  background:\n\n    radial-gradient(\n      circle at 78% 19%,\n      rgba(217,205,200,.11),\n      transparent 30%\n    ),\n\n    radial-gradient(\n      circle at 10% 90%,\n      rgba(251,249,246,.04),\n      transparent 33%\n    ),\n\n    linear-gradient(\n      135deg,\n      #30141C 0%,\n      #4B2530 48%,\n      #281017 100%\n    );\n}\n\n\n.jny-emotion-stage[data-state=\"reunir\"]{\n\n  background:\n\n    radial-gradient(\n      circle at 83% 26%,\n      rgba(232,223,219,.08),\n      transparent 31%\n    ),\n\n    radial-gradient(\n      circle at 15% 87%,\n      rgba(217,205,200,.06),\n      transparent 31%\n    ),\n\n    linear-gradient(\n      135deg,\n      #35171E 0%,\n      #47252B 51%,\n      #2B1519 100%\n    );\n}\n\n\n.jny-emotion-stage[data-state=\"evader\"]{\n\n  background:\n\n    radial-gradient(\n      circle at 80% 16%,\n      rgba(217,205,200,.09),\n      transparent 31%\n    ),\n\n    radial-gradient(\n      circle at 16% 88%,\n      rgba(251,249,246,.04),\n      transparent 30%\n    ),\n\n    linear-gradient(\n      135deg,\n      #291219 0%,\n      #3D1D27 49%,\n      #221014 100%\n    );\n}\n\n\n.jny-emotion-stage[data-state=\"celebrer\"]{\n\n  background:\n\n    radial-gradient(\n      circle at 79% 20%,\n      rgba(232,223,219,.10),\n      transparent 28%\n    ),\n\n    radial-gradient(\n      circle at 13% 88%,\n      rgba(217,205,200,.065),\n      transparent 30%\n    ),\n\n    linear-gradient(\n      135deg,\n      #35151D 0%,\n      #542832 49%,\n      #271116 100%\n    );\n}\n\n\n\/* =========================================================\n   D\u00c9COR GRAPHIQUE\n========================================================= *\/\n\n\/* lumi\u00e8re subtile *\/\n\n.jny-emotion-stage::before{\n\n  content:\"\";\n\n  position:absolute;\n\n  inset:0;\n\n  z-index:1;\n\n  pointer-events:none;\n\n  background:\n\n    linear-gradient(\n      117deg,\n      transparent 0%,\n      rgba(255,255,255,.024) 37%,\n      transparent 58%\n    );\n}\n\n\n\/* grands cercles fins *\/\n\n.jny-emotion-stage::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  z-index:1;\n\n  width:550px;\n\n  height:550px;\n\n  right:-220px;\n\n  bottom:-255px;\n\n  border:\n    1px solid rgba(242,239,234,.07);\n\n  border-radius:50%;\n\n  box-shadow:\n    0 0 0 92px rgba(242,239,234,.012),\n    0 0 0 184px rgba(242,239,234,.008);\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   BARRE SUP\u00c9RIEURE\n========================================================= *\/\n\n.jny-emotion-top{\n\n  position:absolute;\n\n  z-index:7;\n\n  top:28px;\n\n  left:32px;\n\n  right:32px;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:space-between;\n\n  gap:18px;\n\n  padding-bottom:15px;\n\n  border-bottom:\n    1px solid rgba(251,249,246,.13);\n\n  color:rgba(251,249,246,.48);\n\n  font-size:9.5px;\n\n  font-weight:600;\n\n  letter-spacing:.16em;\n\n  text-transform:uppercase;\n}\n\n\n.jny-emotion-top span:last-child{\n\n  color:rgba(232,223,219,.78);\n}\n\n\n\/* =========================================================\n   NUM\u00c9RO\n========================================================= *\/\n\n.jny-emotion-number{\n\n  position:absolute;\n\n  z-index:5;\n\n  top:99px;\n\n  right:clamp(30px,5vw,72px);\n\n  color:rgba(251,249,246,.34);\n\n  font-family:\"Cormorant Garamond\",serif;\n\n  font-size:18px;\n\n  letter-spacing:.13em;\n}\n\n\n\/* =========================================================\n   GRAND MOT EN ARRI\u00c8RE-PLAN\n========================================================= *\/\n\n.jny-emotion-word{\n\n  position:absolute;\n\n  z-index:2;\n\n  left:50%;\n\n  top:42%;\n\n  width:100%;\n\n  color:rgba(251,249,246,.052);\n\n  font-family:\"Cormorant Garamond\",serif;\n\n  font-size:clamp(140px,16vw,290px);\n\n  font-weight:500;\n\n  line-height:.72;\n\n  letter-spacing:-.072em;\n\n  text-align:center;\n\n  white-space:nowrap;\n\n  pointer-events:none;\n\n  user-select:none;\n\n  transform:\n    translate(-50%,-50%)\n    translate3d(\n      var(--word-x,0px),\n      var(--word-y,0px),\n      0\n    );\n\n  transition:\n    opacity .35s ease,\n    transform .7s cubic-bezier(.2,.72,.2,1);\n}\n\n\n\/* =========================================================\n   CONTENU PRINCIPAL\n========================================================= *\/\n\n.jny-emotion-copywrap{\n\n  position:absolute;\n\n  z-index:6;\n\n  left:clamp(32px,5vw,72px);\n\n  bottom:clamp(118px,13vh,150px);\n\n  width:min(700px,57vw);\n}\n\n\n.jny-emotion-copy{\n\n  display:none;\n}\n\n\n.jny-emotion-copy.is-active{\n\n  display:block;\n\n  animation:\n    jnyEmotionAppear\n    .55s\n    cubic-bezier(.2,.72,.2,1)\n    both;\n}\n\n\n@keyframes jnyEmotionAppear{\n\n  from{\n\n    opacity:0;\n\n    transform:\n      translateY(18px);\n\n  }\n\n  to{\n\n    opacity:1;\n\n    transform:none;\n\n  }\n\n}\n\n\n\/* mini label *\/\n\n.jny-emotion-copy small{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:12px;\n\n  margin-bottom:18px;\n\n  color:var(--beige-light);\n\n  font-size:10px;\n\n  font-weight:600;\n\n  letter-spacing:.17em;\n\n  text-transform:uppercase;\n}\n\n\n.jny-emotion-copy small::before{\n\n  content:\"\";\n\n  width:34px;\n\n  height:1px;\n\n  background:\n    rgba(232,223,219,.50);\n}\n\n\n\/* gros titre *\/\n\n.jny-emotion-copy h3{\n\n  max-width:680px;\n\n  margin:0;\n\n  color:var(--paper);\n\n  font-family:\"Cormorant Garamond\",serif;\n\n  font-size:clamp(58px,5vw,82px);\n\n  font-weight:500;\n\n  line-height:.88;\n\n  letter-spacing:-.043em;\n}\n\n\n.jny-emotion-copy h3 em{\n\n  display:block;\n\n  max-width:610px;\n\n  margin-top:.13em;\n\n  color:var(--beige-light);\n\n  font-size:.53em;\n\n  font-weight:400;\n\n  font-style:italic;\n\n  line-height:1.14;\n}\n\n\n\/* paragraphe *\/\n\n.jny-emotion-copy p{\n\n  max-width:590px;\n\n  margin:21px 0 0;\n\n  color:rgba(251,249,246,.70);\n\n  font-size:14.3px;\n\n  line-height:1.76;\n}\n\n\n\/* =========================================================\n   NAVIGATION\n========================================================= *\/\n\n.jny-emotion-nav{\n\n  position:absolute;\n\n  z-index:8;\n\n  left:28px;\n\n  right:28px;\n\n  bottom:24px;\n\n  display:grid;\n\n  grid-template-columns:\n    repeat(4,1fr);\n\n  border-top:\n    1px solid rgba(251,249,246,.13);\n}\n\n\n\/* =========================================================\n   BOUTONS\n   AUCUN ROSE FLASHY\n   AUCUN VERT\n========================================================= *\/\n\n.jny-emotion-tab{\n\n  position:relative;\n\n  min-height:74px;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  padding:16px 20px;\n\n  border:0;\n\n  border-right:\n    1px solid rgba(251,249,246,.085);\n\n  background:transparent!important;\n\n  color:rgba(251,249,246,.47);\n\n  font-family:\"Cormorant Garamond\",serif;\n\n  font-size:clamp(25px,2vw,31px);\n\n  font-weight:500;\n\n  line-height:1;\n\n  cursor:pointer;\n\n  transition:\n    color .28s ease,\n    opacity .28s ease;\n}\n\n\n.jny-emotion-tab:last-child{\n\n  border-right:0;\n}\n\n\n\/* trait d'activation *\/\n\n.jny-emotion-tab::before{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:25px;\n\n  right:25px;\n\n  top:-1px;\n\n  height:2px;\n\n  background:var(--beige-light);\n\n  transform:scaleX(0);\n\n  transform-origin:center;\n\n  transition:\n    transform .38s cubic-bezier(.2,.72,.2,1);\n}\n\n\n\/* hover *\/\n\n.jny-emotion-tab:hover{\n\n  color:rgba(251,249,246,.85);\n\n  background:transparent!important;\n}\n\n\n\/* actif *\/\n\n.jny-emotion-tab.is-active{\n\n  color:var(--paper)!important;\n\n  background:transparent!important;\n}\n\n\n.jny-emotion-tab.is-active::before{\n\n  transform:scaleX(1);\n}\n\n\n\/* focus *\/\n\n.jny-emotion-tab:focus-visible{\n\n  color:var(--paper);\n\n  background:transparent!important;\n\n  outline:\n    1px solid rgba(242,239,234,.28);\n\n  outline-offset:-5px;\n}\n\n\n\/* =========================================================\n   APPARITION\n========================================================= *\/\n\n.jny-emotion-reveal{\n\n  opacity:0;\n\n  transform:\n    translateY(28px);\n\n  transition:\n    opacity .82s ease,\n    transform .95s cubic-bezier(.2,.72,.2,1);\n}\n\n\n.jny-emotion-reveal.is-visible{\n\n  opacity:1;\n\n  transform:none;\n}\n\n\n\/* =========================================================\n   TABLETTE\n========================================================= *\/\n\n@media(max-width:1050px){\n\n  .jny-emotion-head{\n\n    grid-template-columns:1fr;\n\n    gap:25px;\n  }\n\n\n  .jny-emotion-lead{\n\n    max-width:760px;\n  }\n\n\n  .jny-emotion-stage{\n\n    min-height:730px;\n\n    margin-bottom:88px;\n  }\n\n\n  .jny-emotion-copywrap{\n\n    width:min(650px,72vw);\n\n    bottom:132px;\n  }\n\n\n  .jny-emotion-word{\n\n    top:38%;\n\n    font-size:\n      clamp(125px,19vw,210px);\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:700px){\n\n  .jny-emotion-head{\n\n    padding:\n      72px\n      18px\n      42px;\n  }\n\n\n  .jny-emotion-title{\n\n    font-size:\n      clamp(49px,13.8vw,65px);\n  }\n\n\n  .jny-emotion-title em{\n\n    font-size:.68em;\n  }\n\n\n  .jny-emotion-lead{\n\n    font-size:14px;\n\n    line-height:1.72;\n  }\n\n\n  .jny-emotion-stage{\n\n    width:calc(100% - 24px);\n\n    min-height:725px;\n\n    margin-bottom:70px;\n\n    border-radius:28px;\n  }\n\n\n  .jny-emotion-stage::after{\n\n    width:380px;\n\n    height:380px;\n\n    right:-220px;\n\n    bottom:-140px;\n  }\n\n\n  .jny-emotion-top{\n\n    top:18px;\n\n    left:18px;\n\n    right:18px;\n\n    font-size:8px;\n  }\n\n\n  .jny-emotion-top span:last-child{\n\n    display:none;\n  }\n\n\n  .jny-emotion-number{\n\n    top:70px;\n\n    right:20px;\n\n    font-size:15px;\n  }\n\n\n  .jny-emotion-word{\n\n    top:27%;\n\n    font-size:25vw;\n  }\n\n\n  .jny-emotion-copywrap{\n\n    left:20px;\n\n    right:20px;\n\n    bottom:182px;\n\n    width:auto;\n  }\n\n\n  .jny-emotion-copy small{\n\n    margin-bottom:14px;\n\n    font-size:9.2px;\n  }\n\n\n  .jny-emotion-copy h3{\n\n    font-size:\n      clamp(44px,12.8vw,58px);\n\n    line-height:.91;\n  }\n\n\n  .jny-emotion-copy h3 em{\n\n    font-size:.55em;\n  }\n\n\n  .jny-emotion-copy p{\n\n    margin-top:17px;\n\n    font-size:13.3px;\n\n    line-height:1.65;\n  }\n\n\n  \/* navigation en grille *\/\n\n  .jny-emotion-nav{\n\n    left:14px;\n\n    right:14px;\n\n    bottom:14px;\n\n    grid-template-columns:\n      1fr\n      1fr;\n\n    border:\n      1px solid rgba(251,249,246,.11);\n\n    border-radius:17px;\n\n    overflow:hidden;\n  }\n\n\n  .jny-emotion-tab{\n\n    min-height:68px;\n\n    border-right:\n      1px solid rgba(251,249,246,.085);\n\n    border-bottom:\n      1px solid rgba(251,249,246,.085);\n\n    font-size:25px;\n  }\n\n\n  .jny-emotion-tab:nth-child(2n){\n\n    border-right:0;\n  }\n\n\n  .jny-emotion-tab:nth-child(3),\n  .jny-emotion-tab:nth-child(4){\n\n    border-bottom:0;\n  }\n\n\n  .jny-emotion-tab::before{\n\n    left:20px;\n\n    right:20px;\n  }\n\n}\n\n\n\/* =========================================================\n   PETITS MOBILES\n========================================================= *\/\n\n@media(max-width:420px){\n\n  .jny-emotion-stage{\n\n    min-height:750px;\n  }\n\n\n  .jny-emotion-copywrap{\n\n    bottom:181px;\n  }\n\n\n  .jny-emotion-copy h3{\n\n    font-size:43px;\n  }\n\n\n  .jny-emotion-copy p{\n\n    font-size:13px;\n  }\n\n\n  .jny-emotion-tab{\n\n    font-size:23px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  .jny-emotion-v5 *,\n  .jny-emotion-v5 *::before,\n  .jny-emotion-v5 *::after{\n\n    animation:none!important;\n\n    transition:none!important;\n  }\n\n\n  .jny-emotion-stage,\n  .jny-emotion-reveal{\n\n    opacity:1!important;\n\n    transform:none!important;\n  }\n\n}\n\n<\/style>\n\n\n\n<section\n  class=\"jny-emotion-v5\"\n  id=\"jny-emotion\"\n  aria-labelledby=\"jny-emotion-title\"\n>\n\n\n  <!-- =====================================================\n       INTRO\n  ====================================================== -->\n\n  <div\n    class=\"jny-emotion-head jny-emotion-reveal\"\n  >\n\n\n    <div>\n\n\n      <div class=\"jny-emotion-kicker\">\n\n        Tout commence par une intention\n\n      <\/div>\n\n\n      <h2\n        class=\"jny-emotion-title\"\n        id=\"jny-emotion-title\"\n      >\n\n        D\u2019abord, une \u00e9motion.\n\n        <em>\n          Ensuite, nous imaginons tout ce qui peut la rendre inoubliable.\n        <\/em>\n\n      <\/h2>\n\n\n    <\/div>\n\n\n\n    <p class=\"jny-emotion-lead\">\n\n      Il n\u2019y a pas de formule \u00e0 suivre.\n\n      Une exp\u00e9rience peut \u00eatre intime,\n      spectaculaire, spontan\u00e9e ou pens\u00e9e pendant des semaines.\n\n      Le point de d\u00e9part reste toujours le m\u00eame :\n      ce que vous voulez faire ressentir.\n\n    <\/p>\n\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       SC\u00c8NE\n  ====================================================== -->\n\n  <div\n    class=\"jny-emotion-stage\"\n    data-state=\"surprendre\"\n  >\n\n\n\n    <!-- TOP -->\n\n    <div class=\"jny-emotion-top\">\n\n\n      <span>\n        JN.YOU \u00b7 Exp\u00e9riences sur mesure\n      <\/span>\n\n\n      <span>\n        Une intention devient une exp\u00e9rience\n      <\/span>\n\n\n    <\/div>\n\n\n\n    <!-- NUM\u00c9RO -->\n\n    <div\n      class=\"jny-emotion-number\"\n      aria-hidden=\"true\"\n    >\n\n      01 \/ 04\n\n    <\/div>\n\n\n\n    <!-- GRAND MOT -->\n\n    <div\n      class=\"jny-emotion-word\"\n      aria-hidden=\"true\"\n    >\n\n      SURPRENDRE.\n\n    <\/div>\n\n\n\n    <!-- ===================================================\n         CONTENU\n    ==================================================== -->\n\n    <div class=\"jny-emotion-copywrap\">\n\n\n\n      <!-- SURPRENDRE -->\n\n      <div\n        class=\"jny-emotion-copy is-active\"\n        data-key=\"surprendre\"\n      >\n\n\n        <small>\n\n          L\u2019inattendu, au bon moment\n\n        <\/small>\n\n\n        <h3>\n\n          Surprendre.\n\n          <em>\n            Cr\u00e9er cet instant o\u00f9 tout s\u2019arr\u00eate une seconde.\n          <\/em>\n\n        <\/h3>\n\n\n        <p>\n\n          Une adresse secr\u00e8te, une arriv\u00e9e inattendue\n          ou un lieu qui se transforme :\n          nous orchestrons chaque d\u00e9tail avec pr\u00e9cision\n          pour que, le moment venu,\n          tout paraisse simplement \u00e9vident.\n\n        <\/p>\n\n\n      <\/div>\n\n\n\n      <!-- R\u00c9UNIR -->\n\n      <div\n        class=\"jny-emotion-copy\"\n        data-key=\"reunir\"\n      >\n\n\n        <small>\n\n          Le plaisir d\u2019\u00eatre ensemble\n\n        <\/small>\n\n\n        <h3>\n\n          R\u00e9unir.\n\n          <em>\n            Cr\u00e9er un moment o\u00f9 personne ne regarde l\u2019heure.\n          <\/em>\n\n        <\/h3>\n\n\n        <p>\n\n          Une maison, une table, quelques personnes choisies\n          et une atmosph\u00e8re pens\u00e9e pour laisser les conversations,\n          les rires et la soir\u00e9e prendre naturellement leur place.\n\n        <\/p>\n\n\n      <\/div>\n\n\n\n      <!-- S'\u00c9VADER -->\n\n      <div\n        class=\"jny-emotion-copy\"\n        data-key=\"evader\"\n      >\n\n\n        <small>\n\n          Changer d\u2019air, changer de rythme\n\n        <\/small>\n\n\n        <h3>\n\n          S\u2019\u00e9vader.\n\n          <em>\n            Faire commencer l\u2019exp\u00e9rience avant m\u00eame d\u2019\u00eatre arriv\u00e9.\n          <\/em>\n\n        <\/h3>\n\n\n        <p>\n\n          Une escapade, un week-end surprise\n          ou quelques jours ailleurs :\n          chaque \u00e9tape devient une partie de l\u2019exp\u00e9rience,\n          du d\u00e9part jusqu\u2019au dernier souvenir.\n\n        <\/p>\n\n\n      <\/div>\n\n\n\n      <!-- C\u00c9L\u00c9BRER -->\n\n      <div\n        class=\"jny-emotion-copy\"\n        data-key=\"celebrer\"\n      >\n\n\n        <small>\n\n          Donner du relief \u00e0 une date\n\n        <\/small>\n\n\n        <h3>\n\n          C\u00e9l\u00e9brer.\n\n          <em>\n            Donner une vraie signature au moment.\n          <\/em>\n\n        <\/h3>\n\n\n        <p>\n\n          Une r\u00e9ussite, une \u00e9tape de vie,\n          un nouveau d\u00e9part ou simplement l\u2019envie :\n          nous imaginons une exp\u00e9rience\n          avec votre rythme, votre \u00e9nergie et vos codes.\n\n        <\/p>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- ===================================================\n         NAVIGATION\n    ==================================================== -->\n\n    <div\n      class=\"jny-emotion-nav\"\n      role=\"tablist\"\n      aria-label=\"Intentions\"\n    >\n\n\n      <button\n        class=\"jny-emotion-tab is-active\"\n        type=\"button\"\n        role=\"tab\"\n        aria-selected=\"true\"\n        data-key=\"surprendre\"\n      >\n\n        Surprendre\n\n      <\/button>\n\n\n      <button\n        class=\"jny-emotion-tab\"\n        type=\"button\"\n        role=\"tab\"\n        aria-selected=\"false\"\n        data-key=\"reunir\"\n      >\n\n        R\u00e9unir\n\n      <\/button>\n\n\n      <button\n        class=\"jny-emotion-tab\"\n        type=\"button\"\n        role=\"tab\"\n        aria-selected=\"false\"\n        data-key=\"evader\"\n      >\n\n        S\u2019\u00e9vader\n\n      <\/button>\n\n\n      <button\n        class=\"jny-emotion-tab\"\n        type=\"button\"\n        role=\"tab\"\n        aria-selected=\"false\"\n        data-key=\"celebrer\"\n      >\n\n        C\u00e9l\u00e9brer\n\n      <\/button>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n\n\n\n<script>\n\n(function(){\n\n\n  const root =\n    document.querySelector(\n      '.jny-emotion-v5'\n    );\n\n\n  if(\n    !root ||\n    root.dataset.jnyInit === '1'\n  ){\n    return;\n  }\n\n\n  root.dataset.jnyInit = '1';\n\n\n\n  const stage =\n    root.querySelector(\n      '.jny-emotion-stage'\n    );\n\n\n  const tabs =\n    Array.from(\n      root.querySelectorAll(\n        '.jny-emotion-tab'\n      )\n    );\n\n\n  const copies =\n    Array.from(\n      root.querySelectorAll(\n        '.jny-emotion-copy'\n      )\n    );\n\n\n  const word =\n    root.querySelector(\n      '.jny-emotion-word'\n    );\n\n\n  const number =\n    root.querySelector(\n      '.jny-emotion-number'\n    );\n\n\n  const reveals =\n    Array.from(\n      root.querySelectorAll(\n        '.jny-emotion-reveal'\n      )\n    );\n\n\n\n  const content = {\n\n\n    surprendre:{\n      word:'SURPRENDRE.',\n      number:'01 \/ 04'\n    },\n\n\n    reunir:{\n      word:'R\u00c9UNIR.',\n      number:'02 \/ 04'\n    },\n\n\n    evader:{\n      word:'S\u2019\u00c9VADER.',\n      number:'03 \/ 04'\n    },\n\n\n    celebrer:{\n      word:'C\u00c9L\u00c9BRER.',\n      number:'04 \/ 04'\n    }\n\n\n  };\n\n\n\n  \/* =========================================================\n     ACTIVATION\n  ========================================================= *\/\n\n  function activate(key){\n\n\n    if(!content[key]){\n      return;\n    }\n\n\n\n    tabs.forEach(\n      function(tab){\n\n\n        const active =\n          tab.dataset.key === key;\n\n\n        tab.classList.toggle(\n          'is-active',\n          active\n        );\n\n\n        tab.setAttribute(\n          'aria-selected',\n          active ? 'true' : 'false'\n        );\n\n\n      }\n    );\n\n\n\n    copies.forEach(\n      function(copy){\n\n\n        copy.classList.toggle(\n          'is-active',\n          copy.dataset.key === key\n        );\n\n\n      }\n    );\n\n\n\n    if(stage){\n\n      stage.dataset.state = key;\n\n    }\n\n\n\n    if(number){\n\n      number.textContent =\n        content[key].number;\n\n    }\n\n\n\n    if(word){\n\n\n      word.style.opacity = '0';\n\n\n      setTimeout(\n        function(){\n\n\n          word.textContent =\n            content[key].word;\n\n\n          word.style.opacity = '1';\n\n\n        },\n        140\n      );\n\n\n    }\n\n\n  }\n\n\n\n  \/* =========================================================\n     BOUTONS\n  ========================================================= *\/\n\n  tabs.forEach(\n    function(tab){\n\n\n      tab.addEventListener(\n        'click',\n        function(){\n\n\n          activate(\n            tab.dataset.key\n          );\n\n\n        }\n      );\n\n\n\n      tab.addEventListener(\n        'mouseenter',\n        function(){\n\n\n          if(\n            window.matchMedia(\n              '(hover:hover) and (pointer:fine)'\n            ).matches\n          ){\n\n\n            activate(\n              tab.dataset.key\n            );\n\n\n          }\n\n\n        }\n      );\n\n\n\n      tab.addEventListener(\n        'focus',\n        function(){\n\n\n          activate(\n            tab.dataset.key\n          );\n\n\n        }\n      );\n\n\n    }\n  );\n\n\n\n  \/* =========================================================\n     APPARITION\n  ========================================================= *\/\n\n  if(\n    'IntersectionObserver' in window\n  ){\n\n\n    const observer =\n      new IntersectionObserver(\n\n        function(entries){\n\n\n          entries.forEach(\n            function(entry){\n\n\n              if(\n                !entry.isIntersecting\n              ){\n                return;\n              }\n\n\n              entry.target.classList.add(\n                'is-visible'\n              );\n\n\n              observer.unobserve(\n                entry.target\n              );\n\n\n            }\n          );\n\n\n        },\n\n        {\n          threshold:.10,\n          rootMargin:'0px 0px -7% 0px'\n        }\n\n      );\n\n\n\n    reveals.forEach(\n      function(el){\n\n\n        observer.observe(el);\n\n\n      }\n    );\n\n\n\n    if(stage){\n\n      observer.observe(stage);\n\n    }\n\n\n  }\n\n\n  else{\n\n\n    reveals.forEach(\n      function(el){\n\n\n        el.classList.add(\n          'is-visible'\n        );\n\n\n      }\n    );\n\n\n    if(stage){\n\n      stage.classList.add(\n        'is-visible'\n      );\n\n    }\n\n\n  }\n\n\n\n  \/* =========================================================\n     MICRO MOUVEMENT DESKTOP\n  ========================================================= *\/\n\n  let raf = null;\n\n\n\n  function resetWord(){\n\n\n    if(!word){\n      return;\n    }\n\n\n    word.style.setProperty(\n      '--word-x',\n      '0px'\n    );\n\n\n    word.style.setProperty(\n      '--word-y',\n      '0px'\n    );\n\n\n  }\n\n\n\n  if(stage){\n\n\n    stage.addEventListener(\n      'mousemove',\n      function(event){\n\n\n        if(\n          !window.matchMedia(\n            '(min-width:1051px) and (hover:hover) and (pointer:fine)'\n          ).matches\n        ){\n          return;\n        }\n\n\n\n        if(raf){\n\n          cancelAnimationFrame(raf);\n\n        }\n\n\n\n        raf =\n          requestAnimationFrame(\n            function(){\n\n\n              const rect =\n                stage.getBoundingClientRect();\n\n\n\n              const nx =\n                (\n                  (event.clientX - rect.left)\n                  \/\n                  rect.width\n                )\n                -\n                .5;\n\n\n\n              const ny =\n                (\n                  (event.clientY - rect.top)\n                  \/\n                  rect.height\n                )\n                -\n                .5;\n\n\n\n              if(word){\n\n\n                word.style.setProperty(\n                  '--word-x',\n                  (nx * 11).toFixed(1) + 'px'\n                );\n\n\n                word.style.setProperty(\n                  '--word-y',\n                  (ny * 7).toFixed(1) + 'px'\n                );\n\n\n              }\n\n\n            }\n          );\n\n\n      }\n    );\n\n\n\n    stage.addEventListener(\n      'mouseleave',\n      resetWord\n    );\n\n\n  }\n\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f9d4769 e-con-full e-flex e-con e-parent\" data-id=\"f9d4769\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-887c478 elementor-widget elementor-widget-html\" data-id=\"887c478\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     JN.YOU \u2014 TRANSITION VERS FOOTER\n     BLOC SEUL \u2022 SANS CTA \u2022 FUSION PRUNE\n========================================================== -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Montserrat:wght@400;500;600&display=swap');\n\n.jny-footer-transition{\n  --wine:#54232F;\n  --sage:#778A77;\n  --paper:#FBF9F6;\n\n  position:relative;\n  left:50%;\n\n  width:100vw!important;\n  max-width:100vw!important;\n\n  margin-left:-50vw!important;\n  margin-right:-50vw!important;\n\n  overflow:hidden;\n  isolation:isolate;\n\n  font-family:\"Montserrat\",sans-serif;\n\n  background:\n    linear-gradient(\n      180deg,\n      #F2EFEA 0%,\n      #E8DEDA 16%,\n      #C9AEB2 32%,\n      #9B747F 50%,\n      #744653 68%,\n      #603540 82%,\n      #54232F 100%\n    );\n}\n\n.jny-footer-transition,\n.jny-footer-transition *{\n  box-sizing:border-box;\n}\n\n.elementor-widget-html:has(.jny-footer-transition),\n.elementor-widget-html:has(.jny-footer-transition) > .elementor-widget-container{\n  width:100%!important;\n  max-width:none!important;\n  overflow:visible!important;\n}\n\n\n\/* =========================================================\n   D\u00c9COR DE FOND\n========================================================= *\/\n\n.jny-footer-transition::before{\n  content:\"\";\n\n  position:absolute;\n\n  width:620px;\n  height:620px;\n\n  left:50%;\n  top:4%;\n\n  transform:translateX(-50%);\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(251,249,246,.11) 0%,\n      rgba(251,249,246,.035) 46%,\n      transparent 70%\n    );\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   CONTENU\n========================================================= *\/\n\n.jny-footer-transition-inner{\n  position:relative;\n  z-index:3;\n\n  width:min(100%,1300px);\n\n  margin:0 auto;\n\n  padding:\n    clamp(110px,10vw,165px)\n    clamp(22px,5vw,72px)\n    clamp(100px,8vw,135px);\n\n  text-align:center;\n}\n\n\n\/* petit texte *\/\n\n.jny-footer-transition-small{\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  gap:14px;\n\n  margin-bottom:20px;\n\n  color:rgba(251,249,246,.68);\n\n  font-size:9.5px;\n  font-weight:600;\n\n  letter-spacing:.20em;\n\n  text-transform:uppercase;\n}\n\n.jny-footer-transition-small::before,\n.jny-footer-transition-small::after{\n  content:\"\";\n\n  width:36px;\n  height:1px;\n\n  background:rgba(251,249,246,.28);\n}\n\n\n\/* =========================================================\n   TITRE\n========================================================= *\/\n\n.jny-footer-transition-title{\n  max-width:1100px;\n\n  margin:0 auto;\n\n  color:var(--paper);\n\n  font-family:\"Cormorant Garamond\",serif;\n\n  font-size:clamp(62px,6vw,96px);\n\n  font-weight:500;\n\n  line-height:.91;\n\n  letter-spacing:-.045em;\n\n  text-wrap:balance;\n}\n\n.jny-footer-transition-title em{\n  display:block;\n\n  margin-top:.11em;\n\n  color:#D7E1D5;\n\n  font-size:.61em;\n\n  font-weight:400;\n  font-style:italic;\n\n  line-height:1.13;\n\n  letter-spacing:.008em;\n}\n\n\n\/* =========================================================\n   LIGNE VERS LE FOOTER\n========================================================= *\/\n\n.jny-footer-transition-line{\n  position:relative;\n\n  width:1px;\n  height:78px;\n\n  margin:38px auto 0;\n\n  overflow:hidden;\n\n  background:\n    rgba(251,249,246,.18);\n}\n\n.jny-footer-transition-line::after{\n  content:\"\";\n\n  position:absolute;\n\n  left:0;\n  top:-40%;\n\n  width:1px;\n  height:42%;\n\n  background:\n    rgba(251,249,246,.82);\n\n  animation:\n    jnyFooterLine\n    2.2s\n    ease-in-out\n    infinite;\n}\n\n@keyframes jnyFooterLine{\n\n  0%{\n    transform:translateY(-130%);\n  }\n\n  55%{\n    transform:translateY(250%);\n  }\n\n  100%{\n    transform:translateY(250%);\n  }\n\n}\n\n\n\/* =========================================================\n   FUSION BAS\n========================================================= *\/\n\n.jny-footer-transition-blend{\n  position:absolute;\n\n  left:0;\n  right:0;\n  bottom:0;\n\n  height:180px;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(84,35,47,0) 0%,\n      rgba(84,35,47,.55) 46%,\n      #54232F 100%\n    );\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   REVEAL\n========================================================= *\/\n\n.jny-footer-transition-reveal{\n  opacity:0;\n\n  transform:translateY(26px);\n\n  transition:\n    opacity .85s ease,\n    transform 1s cubic-bezier(.2,.72,.2,1);\n}\n\n.jny-footer-transition-reveal.is-visible{\n  opacity:1;\n\n  transform:none;\n}\n\n\n\/* =========================================================\n   TABLETTE\n========================================================= *\/\n\n@media(max-width:1050px){\n\n  .jny-footer-transition-inner{\n    padding:\n      105px\n      34px\n      95px;\n  }\n\n  .jny-footer-transition-title{\n    font-size:\n      clamp(58px,8vw,82px);\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:700px){\n\n  .jny-footer-transition-inner{\n    padding:\n      82px\n      18px\n      72px;\n  }\n\n  .jny-footer-transition-small{\n    margin-bottom:16px;\n\n    font-size:8px;\n\n    gap:10px;\n  }\n\n  .jny-footer-transition-small::before,\n  .jny-footer-transition-small::after{\n    width:24px;\n  }\n\n  .jny-footer-transition-title{\n    font-size:\n      clamp(47px,13vw,62px);\n\n    line-height:.94;\n\n    letter-spacing:-.035em;\n  }\n\n  .jny-footer-transition-title em{\n    margin-top:.14em;\n\n    font-size:.66em;\n\n    line-height:1.15;\n  }\n\n  .jny-footer-transition-line{\n    height:58px;\n\n    margin-top:28px;\n  }\n\n  .jny-footer-transition-blend{\n    height:135px;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILIT\u00c9\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  .jny-footer-transition *,\n  .jny-footer-transition *::before,\n  .jny-footer-transition *::after{\n    animation:none!important;\n    transition:none!important;\n  }\n\n  .jny-footer-transition-reveal{\n    opacity:1!important;\n    transform:none!important;\n  }\n\n}\n<\/style>\n\n\n<section class=\"jny-footer-transition\">\n\n  <div\n    class=\"jny-footer-transition-inner jny-footer-transition-reveal\"\n  >\n\n    <div class=\"jny-footer-transition-small\">\n      Et maintenant\n    <\/div>\n\n    <h2 class=\"jny-footer-transition-title\">\n\n      On a pos\u00e9 le d\u00e9cor.\n\n      <em>\n        \u00c0 vous de nous raconter la suite.\n      <\/em>\n\n    <\/h2>\n\n    <div\n      class=\"jny-footer-transition-line\"\n      aria-hidden=\"true\"\n    ><\/div>\n\n  <\/div>\n\n  <div\n    class=\"jny-footer-transition-blend\"\n    aria-hidden=\"true\"\n  ><\/div>\n\n<\/section>\n\n\n<script>\n(function(){\n\n  const root =\n    document.querySelector('.jny-footer-transition');\n\n  if(\n    !root ||\n    root.dataset.jnyInit === '1'\n  ){\n    return;\n  }\n\n  root.dataset.jnyInit = '1';\n\n  const reveal =\n    root.querySelector(\n      '.jny-footer-transition-reveal'\n    );\n\n\n  if(\n    'IntersectionObserver' in window\n  ){\n\n    const observer =\n      new IntersectionObserver(\n\n        function(entries){\n\n          entries.forEach(\n            function(entry){\n\n              if(\n                !entry.isIntersecting\n              ){\n                return;\n              }\n\n              entry.target.classList.add(\n                'is-visible'\n              );\n\n              observer.unobserve(\n                entry.target\n              );\n\n            }\n          );\n\n        },\n\n        {\n          threshold:.15,\n          rootMargin:'0px 0px -7% 0px'\n        }\n\n      );\n\n    if(reveal){\n      observer.observe(reveal);\n    }\n\n  }\n\n  else if(reveal){\n\n    reveal.classList.add(\n      'is-visible'\n    );\n\n  }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VOUS. Exp\u00e9riences sur mesure \u00b7 JN.YOU Une id\u00e9e \u00e0 part. Une exp\u00e9rience \u00e0 vous. Un d\u00eener dans un lieu inattendu, une surprise pens\u00e9e pour quelques heures, un week-end imagin\u00e9 autour d\u2019une personne ou une c\u00e9l\u00e9bration qui ne rentre dans aucune case : nous construisons l\u2019exp\u00e9rience \u00e0 partir de votre envie. Imaginer votre exp\u00e9rience Le point [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-47","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.jnyouevents.com\/en\/wp-json\/wp\/v2\/pages\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jnyouevents.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jnyouevents.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jnyouevents.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jnyouevents.com\/en\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":28,"href":"https:\/\/www.jnyouevents.com\/en\/wp-json\/wp\/v2\/pages\/47\/revisions"}],"predecessor-version":[{"id":1784,"href":"https:\/\/www.jnyouevents.com\/en\/wp-json\/wp\/v2\/pages\/47\/revisions\/1784"}],"wp:attachment":[{"href":"https:\/\/www.jnyouevents.com\/en\/wp-json\/wp\/v2\/media?parent=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}