/* =====================================================================
   FINITIONS DE MAISON (07/11/2026)
   Détails discrets, du niveau d'une agence de luxe, sur toutes les pages de la mise en scène.
   1. Passage d'une page à l'autre : fondu, en-tête immobile, et la photo du bijou
      qui glisse de sa vignette jusqu'à la grande photo de sa fiche (et retour).
      Navigateurs récents (Safari 18.2+, Chrome 126+) ; ailleurs, navigation normale.
   2. Menu : un filet champagne se dessine sous l'onglet survolé et sous l'onglet en cours.
   3. Sélection de texte couleur champagne.
   (L'orthotypographie et le défilement doux vers les ancres sont dans herzo-finitions.js.)
   Mouvement réduit demandé par le visiteur : pas de transition, pas d'animation.
   ===================================================================== */

/* ---------- 1. Passage d'une page à l'autre ---------- */
@view-transition { navigation: auto; }

.hz-topbar { view-transition-name: hz-bandeau; }
.hz-header { view-transition-name: hz-entete; }
/* la grande photo de la fiche reçoit le bijou venu de sa vignette */
.hz-spr-layer.is-page .hz-spr__shot--main img { view-transition-name: hz-bijou; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-group(hz-bandeau),
::view-transition-group(hz-entete) { animation-duration: 0s; }
::view-transition-group(hz-bijou) {
  animation-duration: .7s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(hz-bijou),
::view-transition-new(hz-bijou) {
  animation-duration: .7s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  height: 100%;
  object-fit: cover;
}

/* ---------- 2. Menu : filet champagne ---------- */
.hz-nav > ul > li > a,
.hz-sticky__nav > ul > li > a { position: relative; }
.hz-nav > ul > li > a::after,
.hz-sticky__nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 11px;
  height: 1px;
  background: var(--site-accent, #c09578);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.hz-sticky__nav > ul > li > a::after { left: 15px; right: 15px; }
.hz-nav > ul > li > a:hover::after,
.hz-nav > ul > li > a:focus-visible::after,
.hz-nav > ul > li.is-current > a::after,
.hz-sticky__nav > ul > li > a:hover::after,
.hz-sticky__nav > ul > li.is-current > a::after { transform: scaleX(1); }

/* ---------- 3. Sélection de texte ---------- */
body.hz-chrome ::selection { background: rgba(192, 149, 120, .26); color: #242424; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hz-nav > ul > li > a::after,
  .hz-sticky__nav > ul > li > a::after { transition: none; }
}