{"id":7,"date":"2026-06-01T15:09:22","date_gmt":"2026-06-01T15:09:22","guid":{"rendered":"https:\/\/byhuet.com\/?page_id=7"},"modified":"2026-06-16T15:53:31","modified_gmt":"2026-06-16T15:53:31","slug":"acceuil","status":"publish","type":"page","link":"https:\/\/byhuet.com\/","title":{"rendered":"ACCUEIL"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae1da21 e-con-full e-flex e-con e-parent\" data-id=\"ae1da21\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e6c6f54 elementor-widget elementor-widget-shortcode\" data-id=\"e6c6f54\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400&display=swap\" rel=\"stylesheet\">\n\n<style>\n.slider {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n}\n\n.slide {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: opacity 1.1s ease;\n  pointer-events: none;\n}\n\n.slide.active {\n  opacity: 1;\n  pointer-events: all;\n}\n\n.slide video {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center center;\n  z-index: 0;\n  filter: brightness(0.96) contrast(1.12) saturate(1.08);\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n\n.slide .bg-img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center 65%;\n  z-index: 0;\n  transform: scale(1);\n  transition: transform 8s ease;\n}\n\n.slide.active .bg-img {\n  transform: scale(1.08);\n}\n\n.overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n}\n\n.slide-1 .overlay { background: rgba(10, 8, 4, 0.45); }\n.slide-2 .overlay { background: rgba(60, 10, 30, 0.42); }\n.slide-3 .overlay { background: rgba(10, 8, 4, 0.45); }\n\n.content {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 0 2rem;\n}\n\n.content-bottom {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 7vh 2rem 0;\n}\n\n.eyebrow {\n  font-family: 'Inter', sans-serif;\n  font-size: 12px;\n  font-weight: 300;\n  letter-spacing: 5px;\n  text-transform: uppercase;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  margin-bottom: 1.3rem;\n  opacity: 0;\n  transform: translateY(-10px);\n  transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;\n}\n\n.eyebrow::before,\n.eyebrow::after {\n  content: '';\n  display: block;\n  width: 36px;\n  height: 1px;\n  opacity: 0.6;\n}\n\n.obelo-intro {\n  margin-bottom: 0.65rem;\n  letter-spacing: 4.5px;\n  color: rgba(255,220,230,0.88) !important;\n}\n\n.slide-1 .eyebrow { color: rgba(255,245,220,0.85); }\n.slide-1 .eyebrow::before, .slide-1 .eyebrow::after { background: rgba(201,176,106,0.7); }\n\n.slide-2 .eyebrow { color: rgba(255,220,230,0.85); }\n.slide-2 .eyebrow::before, .slide-2 .eyebrow::after { background: rgba(220,150,170,0.7); }\n\n.slide-3 .eyebrow { color: rgba(255,245,220,0.85); }\n.slide-3 .eyebrow::before, .slide-3 .eyebrow::after { background: rgba(201,176,106,0.7); }\n\n.titre {\n  font-family: 'Playfair Display', serif;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 6px;\n  line-height: 1.05;\n  opacity: 0;\n  transform: translateY(40px);\n  transition: opacity 0.9s ease 0.7s, transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.7s;\n}\n\n.slide-1 .titre { font-size: clamp(48px, 9vw, 108px); color: #f5f0e4; }\n.slide-2 .titre { font-size: clamp(56px, 10vw, 120px); color: #f9e8ef; margin-bottom: 0.35rem; }\n.slide-3 .titre { font-size: clamp(44px, 8vw, 100px); color: #f5f0e4; }\n\n.titre em { font-style: italic; }\n.slide-1 .titre em { color: #c9b06a; }\n.slide-2 .titre em { color: #e8a0b8; }\n.slide-3 .titre em { color: #9b3a4a; }\n\n.sous-titre {\n  font-family: 'Playfair Display', serif;\n  font-style: italic;\n  font-size: clamp(18px, 3vw, 28px);\n  font-weight: 400;\n  letter-spacing: 3px;\n  margin-top: 1.2rem;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.8s ease 1s, transform 0.8s ease 1s;\n}\n\n.slide-2 .sous-titre { color: rgba(248,210,225,0.9); margin-top: 0.35rem; }\n\n.ligne {\n  display: block;\n  width: 0;\n  height: 1px;\n  margin: 2rem auto 0;\n  transition: width 1s ease 1.3s;\n}\n\n.slide-1 .ligne { background: rgba(201,176,106,0.5); }\n.slide-2 .ligne { background: rgba(220,150,170,0.5); }\n.slide-3 .ligne { background: rgba(155,58,74,0.6); }\n\n.btn-shop {\n  margin-top: 1.8rem;\n  display: inline-block;\n  font-family: 'Inter', sans-serif;\n  font-size: 10px;\n  font-weight: 400;\n  letter-spacing: 3.5px;\n  text-transform: uppercase;\n  text-decoration: none !important;\n  padding: 12px 32px;\n  border: 1px solid;\n  transition: all 0.3s ease, opacity 0.8s ease 1.5s, transform 0.8s ease 1.5s;\n  opacity: 0;\n  transform: translateY(12px);\n}\n\n.slide-1 .btn-shop { color: rgba(245,240,228,0.85); border-color: rgba(201,176,106,0.5); }\n.slide-1 .btn-shop:hover { background: rgba(201,176,106,0.15); border-color: #c9b06a; color: #c9b06a; }\n\n.slide-2 .btn-shop { color: rgba(249,232,239,0.85); border-color: rgba(220,150,170,0.5); }\n.slide-2 .btn-shop:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }\n\n.slide-3 .btn-shop { color: rgba(245,240,228,0.85); border-color: rgba(245,240,228,0.4); }\n.slide-3 .btn-shop:hover { background: rgba(255,255,255,0.15); border-color: #fff; color: #fff; }\n\n.slide.active .eyebrow { opacity: 1; transform: translateY(0); }\n.slide.active .titre { opacity: 1; transform: translateY(0); }\n.slide.active .sous-titre { opacity: 1; transform: translateY(0); }\n.slide.active .ligne { width: 70px; }\n.slide.active .btn-shop { opacity: 1; transform: translateY(0); }\n\n.dots {\n  position: absolute;\n  bottom: 60px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n}\n\n.dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.35);\n  cursor: pointer;\n  transition: all 0.3s ease;\n  border: none;\n  padding: 0;\n}\n\n.dot.active {\n  background: rgba(255,255,255,0.9);\n  transform: scale(1.4);\n}\n\n.progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  width: 0%;\n  z-index: 10;\n  transition: width linear;\n}\n\n.slide-1-prog { background: rgba(201,176,106,0.7); }\n.slide-2-prog { background: rgba(220,150,170,0.7); }\n.slide-3-prog { background: rgba(155,58,74,0.7); }\n<\/style>\n\n<div class=\"slider\" id=\"slider\">\n\n  <div class=\"slide slide-1 active\">\n    <video autoplay muted loop playsinline preload=\"auto\">\n      <source src=\"https:\/\/azure-mantis-262578.hostingersite.com\/wp-content\/uploads\/2026\/05\/YH.mp4\" type=\"video\/mp4\">\n    <\/video>\n    <div class=\"overlay\"><\/div>\n    <div class=\"content\">\n      <p class=\"eyebrow\">Bienvenu chez<\/p>\n      <h1 class=\"titre\">L'Olive en<br><em>Grand Cru<\/em><\/h1>\n      <span class=\"ligne\"><\/span>\n      <a href=\"https:\/\/azure-mantis-262578.hostingersite.com\/shop\/\" class=\"btn-shop\">D\u00e9couvrir<\/a>\n    <\/div>\n  <\/div>\n\n  <div class=\"slide slide-2\">\n    <img decoding=\"async\" class=\"bg-img\" src=\"https:\/\/azure-mantis-262578.hostingersite.com\/wp-content\/uploads\/2026\/06\/obelo-scaled.png\" alt=\"\u00d2b\u00e9lo\">\n    <div class=\"overlay\"><\/div>\n    <div class=\"content-bottom\">\n      <p class=\"eyebrow obelo-intro\">Maison proven\u00e7ale<\/p>\n      <h2 class=\"titre\"><em>\u00d2b\u00e9lo<\/em><\/h2>\n      <p class=\"sous-titre\">Provence<\/p>\n      <span class=\"ligne\"><\/span>\n      <a href=\"https:\/\/azure-mantis-262578.hostingersite.com\/shop\/\" class=\"btn-shop\">D\u00e9couvrir<\/a>\n    <\/div>\n  <\/div>\n\n  <div class=\"slide slide-3\">\n    <video muted loop playsinline preload=\"auto\">\n      <source src=\"https:\/\/azure-mantis-262578.hostingersite.com\/wp-content\/uploads\/2026\/06\/vinaigre.mp4\" type=\"video\/mp4\">\n    <\/video>\n    <div class=\"overlay\"><\/div>\n    <div class=\"content\">\n      <h2 class=\"titre\">L'Art du<br><em>Vinaigre<\/em><\/h2>\n      <span class=\"ligne\"><\/span>\n      <a href=\"https:\/\/azure-mantis-262578.hostingersite.com\/shop\/\" class=\"btn-shop\">D\u00e9couvrir<\/a>\n    <\/div>\n  <\/div>\n\n  <div class=\"dots\" id=\"dots\">\n    <button class=\"dot active\" data-i=\"0\"><\/button>\n    <button class=\"dot\" data-i=\"1\"><\/button>\n    <button class=\"dot\" data-i=\"2\"><\/button>\n  <\/div>\n\n  <div class=\"progress\" id=\"progress\"><\/div>\n<\/div>\n\n<script>\nconst slides = document.querySelectorAll('.slide');\nconst dots = document.querySelectorAll('.dot');\nconst progress = document.getElementById('progress');\nconst DURATION = 9000;\nconst progressColors = ['slide-1-prog', 'slide-2-prog', 'slide-3-prog'];\nlet current = 0;\nlet timer;\n\nfunction goTo(n) {\n  slides[current].classList.remove('active');\n  dots[current].classList.remove('active');\n  const oldVid = slides[current].querySelector('video');\n  if (oldVid) oldVid.pause();\n  current = (n + slides.length) % slides.length;\n  slides[current].classList.add('active');\n  dots[current].classList.add('active');\n  const newVid = slides[current].querySelector('video');\n  if (newVid) { newVid.currentTime = 0; newVid.play(); }\n  startProgress();\n}\n\nfunction startProgress() {\n  progress.style.transition = 'none';\n  progress.style.width = '0%';\n  progress.className = 'progress ' + progressColors[current];\n  requestAnimationFrame(() => requestAnimationFrame(() => {\n    progress.style.transition = `width ${DURATION}ms linear`;\n    progress.style.width = '100%';\n  }));\n}\n\nfunction startAuto() {\n  clearInterval(timer);\n  timer = setInterval(() => goTo(current + 1), DURATION);\n}\n\ndots.forEach(dot => dot.addEventListener('click', () => {\n  goTo(parseInt(dot.dataset.i));\n  startAuto();\n}));\n\nlet touchX = 0;\ndocument.getElementById('slider').addEventListener('touchstart', e => { touchX = e.touches[0].clientX; });\ndocument.getElementById('slider').addEventListener('touchend', e => {\n  const diff = touchX - e.changedTouches[0].clientX;\n  if (Math.abs(diff) > 40) { goTo(diff > 0 ? current + 1 : current - 1); startAuto(); }\n});\n\nstartProgress();\nstartAuto();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-59e2d6a e-con-full e-flex e-con e-parent\" data-id=\"59e2d6a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a686c9b e-con-full e-flex e-con e-child\" data-id=\"a686c9b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dd3aafb elementor-widget elementor-widget-shortcode\" data-id=\"dd3aafb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>YH At The Table<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@200;300;400&display=swap\" rel=\"stylesheet\">\n\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n\n    html, body {\n      width: 100%;\n      min-height: 100%;\n      overflow-x: hidden;\n    }\n\n    body {\n      background: #f5f1eb;\n      font-family: 'Jost', sans-serif;\n    }\n\n    .section {\n      max-width: 1580px;\n      margin: 0 auto;\n      padding: 64px 58px 72px;\n    }\n\n    \/* HEADER *\/\n\n    .ob-header { margin-bottom: 52px; }\n\n    .ob-eyebrow {\n      font-size: 10px;\n      letter-spacing: 0.32em;\n      text-transform: uppercase;\n      color: #a89f94;\n      font-weight: 300;\n      margin-bottom: 28px;\n    }\n\n    .ob-rule {\n      border: none;\n      border-top: 0.5px solid #c4b8aa;\n    }\n\n    .ob-tagline {\n      margin-top: 16px;\n      font-size: 11px;\n      letter-spacing: 0.22em;\n      text-transform: uppercase;\n      color: #a89f94;\n      font-weight: 200;\n      text-align: right;\n    }\n\n    \/* GRILLE *\/\n\n    .grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 2px;\n      margin-bottom: 40px;\n    }\n\n    .card {\n      opacity: 0;\n      transform: translateY(14px);\n      animation: cardReveal 0.8s ease forwards;\n    }\n\n    .card:nth-child(1) { animation-delay: 0.15s; }\n    .card:nth-child(2) { animation-delay: 0.28s; }\n    .card:nth-child(3) { animation-delay: 0.41s; }\n\n    @keyframes cardReveal {\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    .image-wrap {\n      width: 100%;\n      aspect-ratio: 3 \/ 4;\n      background: #e2dbd0;\n      overflow: hidden;\n    }\n\n    .image-wrap img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n      transition: transform 1.2s ease;\n      filter: sepia(8%) saturate(90%);\n    }\n\n    .card:hover .image-wrap img {\n      transform: scale(1.03);\n    }\n\n    .placeholder {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-direction: column;\n      gap: 10px;\n      color: #b0a598;\n      font-size: 9px;\n      letter-spacing: 0.3em;\n      text-transform: uppercase;\n      font-weight: 300;\n    }\n\n    .placeholder-num {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: 42px;\n      font-weight: 300;\n      font-style: italic;\n      color: #c8bfb5;\n      line-height: 1;\n    }\n\n    \/* TEXTE PRODUIT *\/\n\n    .product-info { padding: 22px 4px 0; }\n\n    .product-num {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: 11px;\n      font-style: italic;\n      color: #b0a598;\n      letter-spacing: 0.12em;\n      margin-bottom: 8px;\n    }\n\n    .product-title {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: clamp(22px, 2.6vw, 32px);\n      font-weight: 300;\n      line-height: 1;\n      color: #1a1612;\n      letter-spacing: -0.02em;\n      margin-bottom: 5px;\n    }\n\n    .product-title em {\n      font-style: italic;\n      color: #5a4f44;\n    }\n\n    .product-subtitle {\n      font-size: 9.5px;\n      letter-spacing: 0.24em;\n      text-transform: uppercase;\n      color: #a89f94;\n      font-weight: 300;\n      margin-bottom: 14px;\n    }\n\n    .description {\n      font-size: 12px;\n      font-weight: 200;\n      line-height: 1.9;\n      color: #7a7068;\n      margin-bottom: 18px;\n    }\n\n    .btn {\n      font-size: 9px;\n      letter-spacing: 0.28em;\n      text-transform: uppercase;\n      color: #1a1612;\n      text-decoration: none;\n      border-bottom: 0.5px solid #1a1612;\n      padding-bottom: 3px;\n      display: inline-block;\n      transition: color 0.3s, border-color 0.3s, letter-spacing 0.3s;\n    }\n\n    .btn:hover {\n      color: #a89f94;\n      border-color: #a89f94;\n      letter-spacing: 0.34em;\n    }\n\n    \/* FOOTER *\/\n\n    .footer {\n      padding-top: 32px;\n      border-top: 0.5px solid #c4b8aa;\n      text-align: center;\n    }\n\n    .footer-brand {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: 13px;\n      font-style: italic;\n      font-weight: 300;\n      color: #b0a598;\n      letter-spacing: 0.06em;\n    }\n\n    \/* RESPONSIVE *\/\n\n    @media (max-width: 980px) {\n      .section { padding: 58px 28px 64px; }\n      .grid { gap: 24px; }\n    }\n\n    @media (max-width: 760px) {\n      .section { padding: 44px 20px 56px; }\n      .grid { grid-template-columns: 1fr; gap: 44px; }\n      .image-wrap { aspect-ratio: 4 \/ 3; }\n    }\n  <\/style>\n<\/head>\n\n<body>\n  <section class=\"section\">\n\n    <header class=\"ob-header\">\n      <p class=\"ob-eyebrow\">La table selon YH<\/p>\n      <hr class=\"ob-rule\">\n      <p class=\"ob-tagline\">Huile d'olive \u00b7 Ros\u00e9 de Provence \u00b7 Vinaigre<\/p>\n    <\/header>\n\n    <div class=\"grid\">\n\n      <!-- PRODUIT 1 -->\n      <article class=\"card\">\n        <div class=\"image-wrap\">\n          <div class=\"placeholder\">\n            <span class=\"placeholder-num\">I<\/span>\n            <span>Photo \u00e0 venir<\/span>\n          <\/div>\n          <!-- <img decoding=\"async\" src=\"huile-olive.jpg\" alt=\"YH Huile d'olive\"> -->\n        <\/div>\n        <div class=\"product-info\">\n          <p class=\"product-num\">No. 01<\/p>\n          <h2 class=\"product-title\">YH <em>olive<\/em><\/h2>\n          <p class=\"product-subtitle\">Huile d'olive d'exception<\/p>\n          <p class=\"description\">Une huile \u00e9l\u00e9gante et franche, r\u00e9colt\u00e9e \u00e0 maturit\u00e9 optimale pour r\u00e9v\u00e9ler toute la profondeur du fruit.<\/p>\n          <a href=\"\/produits\/yh-huile-olive\" class=\"btn\">D\u00e9couvrir<\/a>\n        <\/div>\n      <\/article>\n\n      <!-- PRODUIT 2 -->\n      <article class=\"card\">\n        <div class=\"image-wrap\">\n          <div class=\"placeholder\">\n            <span class=\"placeholder-num\">II<\/span>\n            <span>Photo \u00e0 venir<\/span>\n          <\/div>\n          <!-- <img decoding=\"async\" src=\"obelo.jpg\" alt=\"\u00d2b\u00e9lo Ros\u00e9 de Provence\"> -->\n        <\/div>\n        <div class=\"product-info\">\n          <p class=\"product-num\">No. 02<\/p>\n          <h2 class=\"product-title\"><em>\u00d2b\u00e9lo<\/em><\/h2>\n          <p class=\"product-subtitle\">Ros\u00e9 de Provence<\/p>\n          <p class=\"description\">Un ros\u00e9 de caract\u00e8re aux reflets p\u00e2les, tout en fra\u00eecheur et en finesse \u2014 l'esprit Provence dans chaque verre.<\/p>\n          <a href=\"\/produits\/yh-obelo\" class=\"btn\">D\u00e9couvrir<\/a>\n        <\/div>\n      <\/article>\n\n      <!-- PRODUIT 3 -->\n      <article class=\"card\">\n        <div class=\"image-wrap\">\n          <div class=\"placeholder\">\n            <span class=\"placeholder-num\">III<\/span>\n            <span>Photo \u00e0 venir<\/span>\n          <\/div>\n          <!-- <img decoding=\"async\" src=\"vinaigre.jpg\" alt=\"YH Vinaigre\"> -->\n        <\/div>\n        <div class=\"product-info\">\n          <p class=\"product-num\">No. 03<\/p>\n          <h2 class=\"product-title\">YH <em>vinaigre<\/em><\/h2>\n          <p class=\"product-subtitle\">Vinaigre d'exception<\/p>\n          <p class=\"description\">Notes subtiles et \u00e9quilibre affirm\u00e9 \u2014 un vinaigre pens\u00e9 pour r\u00e9v\u00e9ler, jamais pour couvrir.<\/p>\n          <a href=\"\/produits\/yh-vinaigre\" class=\"btn\">D\u00e9couvrir<\/a>\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n\n\n  <\/section>\n<\/body>\n<\/html><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-52117c1 e-con-full e-flex e-con e-parent\" data-id=\"52117c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34da529 elementor-widget elementor-widget-shortcode\" data-id=\"34da529\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,300;0,6..96,400;1,6..96,300&family=Raleway:wght@200;300;400&display=swap');\n\n.yh-split {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  min-height: 80vh;\n  overflow: hidden;\n  font-family: 'Raleway', sans-serif;\n}\n\n.yh-split-video {\n  position: relative;\n  overflow: hidden;\n}\n\n.yh-split-video video {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  filter: saturate(0.82) brightness(0.94);\n  transform: scale(1.04);\n  transition: transform 8s ease;\n}\n\n.yh-split-video:hover video { transform: scale(1.08); }\n\n.yh-split-video::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to right, transparent 60%, rgba(244,239,230,0.18) 100%);\n  z-index: 1;\n}\n\n.yh-split-video::before {\n  content: '';\n  position: absolute;\n  top: 10%; right: 0;\n  width: 1px; height: 80%;\n  background: linear-gradient(to bottom, transparent, rgba(196,165,90,0.5) 30%, rgba(196,165,90,0.5) 70%, transparent);\n  z-index: 2;\n}\n\n.yh-split-text {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 72px 64px 72px 72px;\n  position: relative;\n  background: #f4efe6;\n}\n\n.yh-split-text::before {\n  content: '';\n  position: absolute;\n  left: 0; top: 12%; bottom: 12%;\n  width: 1px;\n  background: linear-gradient(to bottom, transparent, rgba(154,122,58,0.15) 30%, rgba(154,122,58,0.15) 70%, transparent);\n}\n\n.yh-eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 32px;\n  opacity: 0;\n  transform: translateX(12px);\n  transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;\n}\n.yh-split.yh-visible .yh-eyebrow { opacity: 1; transform: translateX(0); }\n\n.yh-eyebrow-line {\n  width: 24px; height: 1px;\n  background: #9a7a3a; opacity: 0.7;\n}\n\n.yh-eyebrow-text {\n  font-size: 8px; font-weight: 300;\n  letter-spacing: 0.42em; text-transform: uppercase;\n  color: #9a7a3a;\n}\n\n.yh-title {\n  font-family: 'Bodoni Moda', serif;\n  font-size: clamp(30px, 3vw, 48px);\n  font-weight: 300;\n  line-height: 1.1;\n  letter-spacing: -0.02em;\n  color: #211d16;\n  text-transform: uppercase;\n  margin-bottom: 28px;\n  overflow: hidden;\n}\n\n.yh-title-line {\n  display: block;\n  transform: translateY(100%);\n  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);\n}\n.yh-split.yh-visible .yh-title-line:nth-child(1) { transform: translateY(0); transition-delay: 0.25s; }\n.yh-split.yh-visible .yh-title-line:nth-child(2) { transform: translateY(0); transition-delay: 0.38s; }\n\n.yh-title em {\n  font-style: italic;\n  color: #c4a55a;\n  text-transform: none;\n}\n\n.yh-body {\n  font-size: 13px; font-weight: 300;\n  line-height: 1.9; color: #7a6d5c;\n  max-width: 320px; margin-bottom: 44px;\n  opacity: 0; transform: translateY(10px);\n  transition: opacity 0.8s ease 0.55s, transform 0.8s ease 0.55s;\n}\n.yh-split.yh-visible .yh-body { opacity: 1; transform: translateY(0); }\n\n.yh-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 16px;\n  font-size: 9px; font-weight: 300;\n  letter-spacing: 0.32em; text-transform: uppercase;\n  color: #211d16; text-decoration: none;\n  padding-bottom: 10px;\n  border-bottom: 1px solid rgba(154,122,58,0.2);\n  align-self: flex-start;\n  opacity: 0; transform: translateY(8px);\n  transition: opacity 0.8s ease 0.72s, transform 0.8s ease 0.72s, color 0.3s, border-color 0.3s, letter-spacing 0.4s;\n}\n.yh-split.yh-visible .yh-btn { opacity: 1; transform: translateY(0); }\n.yh-btn:hover { color: #9a7a3a; border-color: #c4a55a; letter-spacing: 0.38em; }\n\n.yh-btn-arrow { display: flex; align-items: center; transition: transform 0.35s ease; }\n.yh-btn:hover .yh-btn-arrow { transform: translateX(5px); }\n.yh-btn-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }\n\n.yh-detail {\n  position: absolute; bottom: 32px; right: 40px;\n  font-size: 7px; font-weight: 300;\n  letter-spacing: 0.3em; text-transform: uppercase;\n  color: #7a6d5c; opacity: 0;\n  transition: opacity 0.8s ease 1s;\n}\n.yh-split.yh-visible .yh-detail { opacity: 0.4; }\n\n@media (max-width: 700px) {\n  .yh-split { grid-template-columns: 1fr; grid-template-rows: 60vw auto; }\n  .yh-split-video::before { display: none; }\n  .yh-split-text { padding: 48px 28px; }\n  .yh-title { font-size: clamp(28px, 8vw, 44px); }\n  .yh-body { max-width: 100%; }\n}\n<\/style>\n\n<section class=\"yh-split\" id=\"yhSplit\">\n\n  <div class=\"yh-split-video\">\n    <video autoplay muted loop playsinline>\n      <source src=\"https:\/\/byhuet.com\/wp-content\/uploads\/2026\/06\/yh.mp4\" type=\"video\/mp4\">\n    <\/video>\n  <\/div>\n\n  <div class=\"yh-split-text\">\n    <div class=\"yh-eyebrow\">\n      <span class=\"yh-eyebrow-line\"><\/span>\n      <span class=\"yh-eyebrow-text\">YH At The Table<\/span>\n    <\/div>\n    <h2 class=\"yh-title\">\n      <span class=\"yh-title-line\">Les meilleurs<\/span>\n      <span class=\"yh-title-line\"><em>artisans<\/em><\/span>\n    <\/h2>\n    <p class=\"yh-body\">\n      Huile d'olive, ros\u00e9 et vinaigre d'exception, s\u00e9lectionn\u00e9s avec soin pour sublimer chaque moment de partage.\n    <\/p>\n    <a href=\"\/boutique\" class=\"yh-btn\">\n      D\u00e9couvrir la collection\n      <span class=\"yh-btn-arrow\">\n        <svg viewBox=\"0 0 16 16\"><line x1=\"2\" y1=\"8\" x2=\"13\" y2=\"8\"\/><polyline points=\"9,4 13,8 9,12\"\/><\/svg>\n      <\/span>\n    <\/a>\n    <span class=\"yh-detail\">S\u00e9lection 2026<\/span>\n  <\/div>\n\n<\/section>\n\n<script>\n(function() {\n  var section = document.getElementById('yhSplit');\n  if (!section) return;\n  var observer = new IntersectionObserver(function(entries) {\n    entries.forEach(function(entry) {\n      if (entry.isIntersecting) {\n        section.classList.add('yh-visible');\n        observer.disconnect();\n      }\n    });\n  }, { threshold: 0.15 });\n  observer.observe(section);\n  if (section.getBoundingClientRect().top < window.innerHeight * 0.9) {\n    section.classList.add('yh-visible');\n  }\n})();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-262336f e-con-full e-flex e-con e-parent\" data-id=\"262336f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5e75f8 elementor-widget elementor-widget-html\" data-id=\"c5e75f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Raleway:wght@300;400;500&display=swap\");\n\n.yh-savoir-faire {\n  background: #f5f1eb;\n  padding: 110px 58px 120px;\n}\n.yh-savoir-inner {\n  max-width: 1180px;\n  margin: 0 auto;\n  text-align: center;\n}\n.yh-savoir-label {\n  font-family: \"Raleway\", sans-serif;\n  font-size: 10px;\n  font-weight: 400;\n  letter-spacing: 0.32em;\n  text-transform: uppercase;\n  color: #8a837b;\n  margin-bottom: 34px;\n}\n.yh-savoir-title {\n  font-family: \"Bodoni Moda\", serif;\n  font-size: clamp(40px, 5.8vw, 86px);\n  font-weight: 400;\n  line-height: 1.1;\n  letter-spacing: -0.045em;\n  margin-bottom: 38px;\n}\n\n\/* chaque lettre *\/\n.yh-char {\n  display: inline;\n  color: #ccc8c2;\n  transition: color 0.5s ease;\n}\n.yh-char.lit {\n  color: #111111;\n}\n.yh-char.yh-italic {\n  font-style: italic;\n  color: #ccc8c2;\n}\n.yh-char.yh-italic.lit {\n  color: #c8beb3;\n}\n\n.yh-savoir-text {\n  max-width: 780px;\n  margin: 0 auto;\n  font-family: \"Raleway\", sans-serif;\n  font-size: 15px;\n  font-weight: 300;\n  line-height: 2;\n  color: #6f675f;\n}\n.yh-savoir-line {\n  width: 42px;\n  height: 1px;\n  background: #d8d1c8;\n  margin: 42px auto;\n}\n.yh-savoir-signature {\n  font-family: \"Raleway\", sans-serif;\n  font-size: 10px;\n  letter-spacing: 0.28em;\n  text-transform: uppercase;\n  color: #b8afa5;\n}\n\n@media (max-width: 760px) {\n  .yh-savoir-faire { padding: 76px 22px 86px; }\n  .yh-savoir-label { font-size: 9px; letter-spacing: 0.24em; margin-bottom: 28px; }\n  .yh-savoir-title { font-size: clamp(34px, 12vw, 58px); line-height: 1.04; }\n  .yh-savoir-text { font-size: 13px; line-height: 1.85; }\n  .yh-savoir-line { margin: 34px auto; }\n}\n<\/style>\n\n<section class=\"yh-savoir-faire\">\n  <div class=\"yh-savoir-inner\">\n    <p class=\"yh-savoir-label\">Notre savoir-faire<\/p>\n    <h2 class=\"yh-savoir-title\" id=\"yh-title-anim\">\n      L'exigence du go\u00fbt,<br>\n      le respect du <em>produit<\/em>\n    <\/h2>\n    <p class=\"yh-savoir-text\">\n      Chez YH, chaque s\u00e9lection na\u00eet d'une recherche attentive :\n      celle des artisans, des terroirs et des maisons capables de r\u00e9v\u00e9ler une vraie identit\u00e9.\n      Huile d'olive, ros\u00e9 ou vinaigre, nous privil\u00e9gions des produits de caract\u00e8re,\n      pens\u00e9s pour accompagner la table avec justesse, \u00e9l\u00e9gance et authenticit\u00e9.\n    <\/p>\n    <div class=\"yh-savoir-line\"><\/div>\n    <p class=\"yh-savoir-signature\">Huile d'olive \u00b7 Ros\u00e9 \u00b7 Vinaigre<\/p>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  const titleEl = document.getElementById(\"yh-title-anim\");\n  if (!titleEl) return;\n\n  \/\/ 1. Reconstruit le titre lettre par lettre\n  const nodes = Array.from(titleEl.childNodes);\n  titleEl.innerHTML = \"\";\n\n  nodes.forEach((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      node.textContent.split(\"\").forEach((char) => {\n        if (char === \"\\n\" || char === \" \" && titleEl.lastChild && titleEl.lastChild.nodeName === \"BR\") return;\n        const span = document.createElement(\"span\");\n        span.className = \"yh-char\";\n        span.textContent = char;\n        \/\/ les espaces : on les rend non-collapsibles\n        if (char === \" \") span.style.whiteSpace = \"pre\";\n        titleEl.appendChild(span);\n      });\n    } else if (node.nodeName === \"BR\") {\n      titleEl.appendChild(document.createElement(\"br\"));\n    } else if (node.nodeName === \"EM\") {\n      node.textContent.split(\"\").forEach((char) => {\n        const span = document.createElement(\"span\");\n        span.className = \"yh-char yh-italic\";\n        span.textContent = char;\n        if (char === \" \") span.style.whiteSpace = \"pre\";\n        titleEl.appendChild(span);\n      });\n    }\n  });\n\n  \/\/ 2. R\u00e9cup\u00e8re toutes les lettres et leur position X absolue (gauche \u2192 droite)\n  const chars = Array.from(titleEl.querySelectorAll(\".yh-char\"));\n\n  \/\/ On attribue \u00e0 chaque lettre sa position X relative dans le bloc\n  \/\/ pour construire l'ordre de lecture r\u00e9el (ligne 1 g\u2192d, puis ligne 2 g\u2192d)\n  function getCharData() {\n    return chars.map((el) => {\n      const r = el.getBoundingClientRect();\n      const tr = titleEl.getBoundingClientRect();\n      return {\n        el,\n        \/\/ on encode ligne + x pour trier : ligne = arrondi Y \/ lineHeight\n        sortKey: Math.round((r.top - tr.top) \/ 10) * 10000 + r.left,\n      };\n    });\n  }\n\n  let charData = [];\n  let totalChars = chars.length;\n\n  function buildOrder() {\n    charData = getCharData().sort((a, b) => a.sortKey - b.sortKey);\n    totalChars = charData.length;\n  }\n\n  \/\/ 3. Au scroll : calcule quelle fraction du bloc est \"lue\"\n  \/\/    et allume les N premi\u00e8res lettres dans l'ordre de lecture\n  function onScroll() {\n    const rect = titleEl.getBoundingClientRect();\n    const vh = window.innerHeight;\n\n    \/\/ progress : 0 quand le haut du bloc touche 80% du viewport\n    \/\/            1 quand le bas du bloc touche 20% du viewport\n    const start = vh * 0.72;\n    const end   = vh * 0.28;\n    const raw   = (start - rect.top) \/ (start - end);\n    const progress = Math.max(0, Math.min(1, raw));\n\n    const litCount = Math.round(progress * totalChars);\n\n    charData.forEach((d, i) => {\n      if (i < litCount) {\n        d.el.classList.add(\"lit\");\n      } else {\n        d.el.classList.remove(\"lit\");\n      }\n    });\n  }\n\n  \/\/ Init apr\u00e8s que le DOM soit rendu (pour getBoundingClientRect)\n  requestAnimationFrame(() => {\n    buildOrder();\n    onScroll();\n  });\n\n  window.addEventListener(\"scroll\", onScroll, { passive: true });\n  window.addEventListener(\"resize\", () => {\n    buildOrder();\n    onScroll();\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>Bienvenu chez L&rsquo;Olive enGrand Cru D\u00e9couvrir Maison proven\u00e7ale \u00d2b\u00e9lo Provence D\u00e9couvrir L&rsquo;Art duVinaigre D\u00e9couvrir YH At The Table La table [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/byhuet.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/byhuet.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/byhuet.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/byhuet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/byhuet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":80,"href":"https:\/\/byhuet.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/byhuet.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/260"}],"wp:attachment":[{"href":"https:\/\/byhuet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}