/* ============================================================
   Bellevue V2 — lisibilité & mouvement
   Chargé après le CSS Webflow ; ne modifie pas la maquette,
   seulement les couleurs de texte courant et les animations.
   ============================================================ */
:root {
  --v2-ink: #4a3312;        /* encre chaude, lisible sur crème */
  --v2-gold: #c48a2d;
  --v2-gold-deep: #a06e15;  /* or foncé pour petits textes/boutons */
  --v2-cream: #fdfeee;
}

/* ---------- 1. LISIBILITÉ ------------------------------------ */
/* Texte courant : encre chaude au lieu du doré (trop pâle sur crème) */
.text-size-medium,
.text-size-regular,
.text-size-xlarge,
.text-size-small {
  color: var(--v2-ink);
}
/* Zones sur fond or (footer, encart CTA) : on garde le crème */
.footer .text-size-medium, .footer .text-size-regular,
.footer .text-size-xlarge, .footer .text-size-small,
.footer .footer-text-info,
.cta_box .text-size-medium, .cta_box .text-size-regular,
.cta_box .text-size-xlarge, .cta_box .text-size-small,
.text-color-light, .text-color-light * {
  color: var(--v2-cream);
}
/* Formulaire : labels et saisies en encre (le doré reste pour les titres) */
.field-label,
form input, form textarea, form select {
  color: var(--v2-ink);
}

/* Boutons secondaires (or sur crème, posés parfois sur photo) :
   or foncé + liseré + fond opaque → lisibles partout */
.button.is-secondary {
  color: var(--v2-gold-deep);
  background-color: var(--v2-cream);
  box-shadow: inset 0 0 0 2px var(--v2-gold-deep), 0 4px 14px rgba(74, 51, 18, .12);
}

/* Grand titre blanc posé sur photo claire (encart CTA) :
   ombre chaude douce pour détacher le texte */
.text-cta-section {
  text-shadow: 0 2px 18px rgba(110, 68, 8, .55), 0 1px 3px rgba(110, 68, 8, .35);
}

/* Survol des cadres photo : le voile noir léger d'origine ne
   suffisait pas à détacher le nom de la section. On passe sur un
   voile crème fortement flouté + texte encre, avec un fin cadre
   doré intérieur façon passe-partout. */
.hg_img-overlay {
  background-color: rgba(253, 254, 238, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}
.hg_img-overlay::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(160, 110, 21, .55);
  pointer-events: none;
}
.hg_img-overlay .hg_box-text,
.hg_img-overlay .hg_box-menu-text {
  color: var(--v2-ink);
  text-shadow: 0 1px 0 rgba(253, 254, 238, .8);
}

/* ---------- SECTION INSTAGRAM -------------------------------- */
/* Le voile doré à 40 % d'origine laissait l'icône illisible sur les
   photos claires. Voile doré profond + icône crème détourée. */
.ig_img-overlay {
  background-image: linear-gradient(155deg, rgba(122, 82, 10, .88), rgba(180, 124, 36, .82));
  -webkit-backdrop-filter: blur(3px) saturate(1.1);
  backdrop-filter: blur(3px) saturate(1.1);
  flex-direction: column;
  gap: .9rem;
}
.ig_img-overlay .ig-icon {
  color: var(--v2-cream);
  filter: drop-shadow(0 2px 10px rgba(60, 38, 2, .45));
}
/* libellé injecté par v2.js, traduit selon la langue de la page */
.v2-ig-label {
  font-family: Flatbread, "Alegreya Sans", sans-serif;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v2-cream);
  text-align: center;
  padding: 0 1rem;
  text-shadow: 0 1px 6px rgba(60, 38, 2, .5);
}
/* ---- En-tête : bloc éditorial centré ---- */
.section_home-ig .ig_top-bar {
  flex-direction: column;
  gap: 1.15rem;
}
.section_home-ig .ig_top-bar-divider { display: none; }

/* filet doré + « INSTAGRAM » (injecté par v2.js) */
.v2-ig-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: min(420px, 80vw);
  font-family: Flatbread, "Alegreya Sans", sans-serif;
  font-size: .72rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--v2-gold-deep);
}
.v2-ig-eyebrow::before,
.v2-ig-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-gold), transparent);
}

/* avatar cerclé d'or, façon médaillon */
.section_home-ig .ig-circle-img {
  box-shadow: 0 0 0 2px var(--v2-cream), 0 0 0 3px var(--v2-gold);
}
.section_home-ig .ig-text-topbar { font-size: 2.1rem; line-height: 1.1; }

/* ---- Frise « mur de photos » ---- */
.v2-ig-band {
  position: relative;
  margin-top: 3.5rem;
  overflow: hidden;
  padding: 1.5rem 0 2.2rem;
  /* les cadres s'effacent sur les bords au lieu d'être coupés net */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.v2-ig-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
}
/* chaque publication devient un cadre accroché au mur */
.v2-ig-track > a {
  position: relative;
  flex: 0 0 auto;
  width: 248px;
  aspect-ratio: 4 / 5;
  min-height: 0;
  background: var(--v2-cream);
  padding: 9px;
  border: 1px solid var(--v2-gold);
  box-shadow: 0 10px 22px rgba(74, 51, 18, .13);
  transform: rotate(var(--v2-tilt, 0deg));
}
.v2-ig-track > a > .ig-img,
.v2-ig-track > a > .ig-img img,
.v2-ig-track > a > .ig-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-ig-track > a > .ig-img { height: 100%; }
/* l'overlay se cale sur la photo, pas sur le passe-partout */
.v2-ig-track > a > .ig_img-overlay { inset: 9px; }

/* Animations réduites : pas de dérive, la frise se parcourt à la main */
@media (prefers-reduced-motion: reduce) {
  .v2-ig-band {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .v2-ig-track > a { scroll-snap-align: center; transform: none; }
}

@media (max-width: 767px) {
  .v2-ig-track > a { width: 190px; }
  .v2-ig-track { gap: 1.1rem; }
  .section_home-ig .ig-text-topbar { font-size: 1.6rem; }
}

/* ---------- 2. MICRO-INTERACTIONS ---------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* Boutons : lift + reflet doré qui traverse */
  .button {
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
  }
  .button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(160, 110, 21, .28); }
  .button.is-secondary:hover { box-shadow: inset 0 0 0 2px var(--v2-gold-deep), 0 10px 22px rgba(160, 110, 21, .28); }
  .button:active { transform: translateY(0) scale(.98); }
  .button::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
    transform: translateX(-130%) skewX(-8deg);
    pointer-events: none;
  }
  .button:hover::after { transition: transform .7s ease; transform: translateX(130%) skewX(-8deg); }

  /* Cadres photo : lift + zoom doux de l'image */
  .hg_box {
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
  }
  .hg_box:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(74, 51, 18, .18);
  }
  .hg_img-wrapper { overflow: hidden; }
  .hg_img { transition: transform .9s cubic-bezier(.2, .7, .3, 1); }
  .hg_box:hover .hg_img { transform: scale(1.05); }

  /* le nom de la section monte doucement quand le voile apparaît */
  .hg_img-overlay .hg_box-text,
  .hg_img-overlay .hg_box-menu-text {
    transform: translateY(10px);
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
  }
  .hg_box:hover .hg_img-overlay .hg_box-text,
  .hg_box:hover .hg_img-overlay .hg_box-menu-text,
  .hg_img-overlay:hover .hg_box-text,
  .hg_img-overlay:hover .hg_box-menu-text {
    transform: translateY(0);
  }

  /* Défilement continu de la frise, à l'arrêt au survol */
  @keyframes v2-ig-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - .75rem)); }
  }
  .v2-ig-track {
    animation: v2-ig-drift var(--v2-ig-dur, 60s) linear infinite;
  }
  .v2-ig-band:hover .v2-ig-track,
  .v2-ig-band:focus-within .v2-ig-track { animation-play-state: paused; }

  /* Au survol, le cadre se redresse et se détache du mur */
  .v2-ig-track > a {
    transition: transform .5s cubic-bezier(.2, .7, .3, 1), box-shadow .5s ease;
  }
  .v2-ig-track > a:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.03);
    box-shadow: 0 20px 38px rgba(74, 51, 18, .26);
  }

  /* Tuiles Instagram : zoom de l'image, icône et libellé qui montent */
  .ig-img-wrapper, .ig-reel-wrapper {
    overflow: hidden;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
  }
  .ig-img { transition: transform .9s cubic-bezier(.2, .7, .3, 1); }
  .ig-img-wrapper:hover .ig-img, .ig-reel-wrapper:hover .ig-img { transform: scale(1.06); }
  .ig_img-overlay .ig-icon,
  .ig_img-overlay .v2-ig-label {
    transform: translateY(12px) scale(.9);
    opacity: 0;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .35s ease;
  }
  .ig_img-overlay .v2-ig-label { transition-delay: .06s; }
  .ig-img-wrapper:hover .ig_img-overlay .ig-icon,
  .ig-reel-wrapper:hover .ig_img-overlay .ig-icon,
  .ig-img-wrapper:hover .ig_img-overlay .v2-ig-label,
  .ig-reel-wrapper:hover .ig_img-overlay .v2-ig-label {
    transform: none;
    opacity: 1;
  }

  /* Liens du footer : soulignement doré qui glisse */
  .footer a.footer-text-info {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size .35s ease;
  }
  .footer a.footer-text-info:hover { background-size: 100% 1px; }

  /* Bouton « Réserver » fixe : halo doré périodique */
  @keyframes v2-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(196, 138, 45, .45); }
    60%  { box-shadow: 0 0 0 18px rgba(196, 138, 45, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 138, 45, 0); }
  }
  .tambour-lb { animation: v2-pulse 5.5s ease-out infinite; border-radius: 10px; }

  /* ---------- 3. RÉVÉLATIONS AU SCROLL ------------------------ */
  .v2-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
    transition-delay: var(--v2-d, 0s);
    will-change: opacity, transform;
  }
  .v2-reveal.v2-in { opacity: 1; transform: none; }

  /* Cascade du hero au chargement */
  .v2-hero {
    opacity: 0;
    transform: translateY(18px) scale(.96);
    transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .3, 1);
    transition-delay: var(--v2-d, 0s);
  }
  .v2-hero.v2-in { opacity: 1; transform: none; }

  /* Étoiles des avis : pop en cascade quand la carte apparaît */
  .v2-reveal .testimonial-stars > * {
    opacity: 0;
    transform: scale(.3) rotate(-12deg);
    transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
  }
  .v2-reveal.v2-in .testimonial-stars > * { opacity: 1; transform: none; }
  .v2-reveal.v2-in .testimonial-stars > *:nth-child(2) { transition-delay: .07s; }
  .v2-reveal.v2-in .testimonial-stars > *:nth-child(3) { transition-delay: .14s; }
  .v2-reveal.v2-in .testimonial-stars > *:nth-child(4) { transition-delay: .21s; }
  .v2-reveal.v2-in .testimonial-stars > *:nth-child(5) { transition-delay: .28s; }
}

/* ---------- 4. MARQUEE DORÉ (au-dessus du footer) ------------- */
.v2-marquee {
  overflow: hidden;
  border-top: 1px solid var(--v2-gold);
  border-bottom: 1px solid var(--v2-gold);
  background: var(--v2-cream);
  padding: .85rem 0;
  white-space: nowrap;
}
.v2-marquee_track {
  display: inline-block;
  font-family: Flatbread, "Alegreya Sans", sans-serif;
  font-size: 1.05rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--v2-gold);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes v2-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .v2-marquee_track { animation: v2-marquee-scroll 36s linear infinite; }
}