/* =========================================================================
   ELYSIOR — HERO VIDÉO (essai inspiré MotionSites)
   Vidéo plein écran · flou bas (sans assombrir) · liquid glass · blur-fade-up
   ========================================================================= */

.vhero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

/* --- vidéo de fond --- */
.vhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* --- flou bas uniquement (mask, aucun gradient sombre) --- */
.vhero__blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 45%);
          mask-image: linear-gradient(to top, #000 0%, transparent 45%);
}

/* =========================================================================
   LIQUID GLASS
   ========================================================================= */
.liquid-glass {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.liquid-glass::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* =========================================================================
   NAVBAR
   ========================================================================= */
.vnav {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(16px, 3vh, 26px) var(--gut);
}
.vnav__brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-size: 22px; letter-spacing: 0.4em; padding-left: 0.4em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.vnav__brand img {
  width: 40px; height: 40px; display: block;
  filter: drop-shadow(0 2px 10px rgba(201,168,76,0.55)) brightness(1.18) saturate(1.1);
}

.vnav__links {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px);
  position: absolute; left: 50%; transform: translateX(-50%);
}
.vnav__links a {
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  font-size: 14px; letter-spacing: 0.02em;
  transition: color .3s;
}
.vnav__links a:hover { color: #fff; }

.vnav__actions { display: flex; align-items: center; gap: 12px; }
.vnav__phone {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 100px;
  font-size: 13px; letter-spacing: 0.03em; text-decoration: none;
  white-space: nowrap;
}
.vnav__phone svg { width: 16px; height: 16px; }
.vnav__icon, .vnav__burger {
  width: 42px; height: 42px; border-radius: 100px;
  display: grid; place-items: center; cursor: pointer;
}
.vnav__icon svg, .vnav__burger svg { width: 18px; height: 18px; }
.vnav__burger { display: none; position: relative; }
.vnav__burger svg { position: absolute; transition: opacity .5s ease, transform .5s ease; }
.vnav__burger-x { opacity: 0; transform: rotate(-180deg) scale(0.5); }
.vnav[data-open="true"] .vnav__burger-menu { opacity: 0; transform: rotate(180deg) scale(0.5); }
.vnav[data-open="true"] .vnav__burger-x { opacity: 1; transform: rotate(0) scale(1); }

/* =========================================================================
   MENU MOBILE
   ========================================================================= */
.vmenu {
  position: absolute;
  top: 72px; left: var(--gut); right: var(--gut);
  z-index: 40;
  display: flex; flex-direction: column;
  padding: 10px;
  border-radius: 16px;
  background: rgba(10,12,18,0.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.vmenu[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
.vmenu a {
  color: rgba(255,255,255,0.9); text-decoration: none;
  font-size: 15px; padding: 13px 14px; border-radius: 10px;
  transition: background .25s;
}
.vmenu a:hover { background: rgba(255,255,255,0.06); }
.vmenu__actions { margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.vmenu__actions .vnav__phone { width: 100%; justify-content: center; }

/* localisation (dans la carte note) */
.vrating__loc {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-size: 11px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.62);
}
.vrating__loc svg { width: 13px; height: 13px; color: var(--or-soft); flex: 0 0 auto; }
@media (max-width: 540px) {
}

/* =========================================================================
   CONTENU BAS
   ========================================================================= */
.vhero__content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(30px, 5vw, 70px);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
  padding: var(--gut);
  padding-bottom: clamp(36px, 7vh, 72px);
}
.vhero__main { max-width: 680px; }

.vhero__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(12px, 2vw, 22px);
  margin-bottom: clamp(20px, 3.4vh, 32px);
  color: rgba(255,255,255,0.86);
  font-size: 13.5px; letter-spacing: 0.02em;
}
.vhero__meta-item { display: inline-flex; align-items: center; gap: 8px; }
.vhero__meta-item b { font-weight: 600; color: #fff; }
.vhero__meta-item svg { width: 17px; height: 17px; }
.vhero__meta-item .ic-star { fill: var(--or-soft); }
.vhero__meta-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.4); transform: rotate(45deg); }

.vhero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 82px);
  line-height: 1.03;
  letter-spacing: -0.018em;
  color: #fff;
  margin-bottom: clamp(16px, 2.4vh, 24px);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.vhero__title em { font-style: italic; color: #ffd9a8; }

.vhero__desc {
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  max-width: 48ch;
  margin-bottom: clamp(24px, 4vh, 40px);
  font-weight: 400;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

.vhero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.vbtn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 100px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.vbtn svg { width: 17px; height: 17px; }
.vbtn--solid {
  background: #fff; color: #111;
  box-shadow: 0 14px 40px -16px rgba(255,255,255,0.5);
}
.vbtn--solid:hover { background: #f0ece2; transform: translateY(-2px); }
.vbtn.liquid-glass:hover { transform: translateY(-2px); }

/* carte note (droite) */
.vhero__aside { display: flex; align-items: flex-end; }
.vrating {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 16px 22px; border-radius: 16px;
}
.vrating__score {
  font-family: var(--serif); font-size: 44px; line-height: 0.85;
  color: #ffd9a8; font-weight: 600; font-variant-numeric: tabular-nums;
}
.vrating__r { display: flex; flex-direction: column; gap: 6px; }
.vrating__r .stars { font-size: 16px; }
.vrating__r .star__fill { fill: #ffce93; }
.vrating__lbl { font-size: 12px; letter-spacing: 0.03em; color: rgba(255,255,255,0.78); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .vnav__links { display: none; }
  .vnav__burger { display: grid; }
}
@media (max-width: 760px) {
  .vnav__phone span { display: none; }
  .vnav__phone { padding: 0; width: 42px; height: 42px; justify-content: center; }
  .vnav__icon { display: none; }
  .vhero__content { flex-direction: column; align-items: flex-start; }
  .vhero__aside { width: 100%; }
}
@media (max-width: 540px) {
  .vhero__title { font-size: clamp(32px, 9vw, 46px); }
}

/* états blur-fade-up (gérés par GSAP ; visibles par défaut si pas de JS) */
.js-vanim [data-fade] { opacity: 0; }