/* =====================================================================
   ARRIVÉE SUR LA PAGE — le contenu se voit tout de suite (07/11/2026)
   Demande de la Maison : en cliquant sur un onglet ou sur un bijou, la page doit
   montrer d'emblée la pièce ou le contenu, menu toujours en haut — sans que rien
   ne soit coupé ni trop bas.
   • En-tête resserré : bandeau fin, icônes et langue sur la ligne du logo,
     logo un peu plus petit, menu moins haut (≈ 175 px au lieu de 320 px).
   • Onglets : le grand titre « Fiançailles », « Conseils », « Fêtes »… est retiré à l'écran
     (l'onglet en cours reste en couleur dans le menu ; le titre reste lu par les
     lecteurs d'écran).
   • Fiches bijoux : la grande photo garde son cadrage carré et prend la hauteur
     disponible sous l'en-tête ; nom, prix et choix sont à côté. Rien n'est recadré.
   Chargé après fetes-site.css (habillage herzo) et mise-en-scene.css (fiches).
   ===================================================================== */

/* Hauteur de l'en-tête resserré (sert à caler les ouvertures plein écran) */
:root { --hz-entete: 172px; }
@media (max-width: 991px) { :root { --hz-entete: 116px; } }

/* ---------- Bandeau d'annonce : une ligne fine ---------- */
.hz-topbar {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: .04em;
  padding: 8px 16px;
}

/* ---------- En-tête : icônes et langue sur la ligne du logo ---------- */
.hz-header { position: relative; }
.hz-util {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-bottom: 0;
  pointer-events: none;
}
.hz-util .hz-wrap { height: 92px; padding-right: 72px; }      /* même hauteur que la ligne du logo ; place pour la loupe */
.hz-util a,
.hz-util .hz-lang { pointer-events: auto; }
.hz-brand .hz-wrap { padding: 10px 15px; }
.hz-logo { width: 94px; }
.hz-search { top: 26px; width: 40px; height: 40px; }
.hz-nav { border-top: 1px solid var(--site-line); }
.hz-nav > ul > li > a { line-height: 46px; }

/* ---------- Onglets : pas de grand titre à l'écran (le menu indique déjà l'onglet) ---------- */
body.hz-chrome .hz-pagetitle {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Fêtes : pas de titre, le conte remonte juste sous le menu (l'étoile resserre ses boucles en conséquence) */
.hz-fetes-body .hz-fx__opening { padding-top: clamp(30px, 3.6vw, 52px); }
.hz-fetes-body .hz-fx__opening .hz-fx__top { margin-bottom: clamp(30px, 4.4vw, 62px); }

/* Accueil : l'ouverture (photo et signature) tient dans l'écran sous l'en-tête, flèche comprise */
.hz-home__hero { height: min(calc(100svh - var(--hz-entete) - var(--wp-admin--admin-bar--height, 0px)), 860px); }

/* ---------- Fiche bijou : la pièce entière dès l'arrivée ---------- */
.hz-spr-layer.is-page .hz-spr__pdp-top { height: 44px; }
/* Photos de la fiche, sur toute la moitié gauche, collées au bord gauche de la page et entre elles :
   la grande photo seule en haut, puis les deux suivantes côte à côte, à la même hauteur.
   Les informations dans la moitié droite. La grande photo tient en entier dans l'écran à l'arrivée
   (cadre à la hauteur restante, pièce centrée). */
.hz-spr-layer .hz-spr__gallery { gap: 0; align-self: start; align-content: start; }
@media (min-width: 1024px) {
  .hz-spr-layer .hz-spr__pdp-in { max-width: none; margin: 0; justify-content: start; }
  .hz-spr-layer .hz-spr__gallery { grid-template-columns: 1fr 1fr; }
  .hz-spr-layer .hz-spr__shot:not(.hz-spr__shot--main):not(.hz-spr__shot--note) figcaption { left: 16px; bottom: 14px; font-size: 13px; }
  .hz-spr-layer .hz-spr__shot--note { padding: 9%; gap: 12px; }
  .hz-spr-layer .hz-spr__shot--note blockquote { font-size: clamp(15px, 1.3vw, 21px); }
  .hz-spr-layer .hz-spr__info { justify-self: center; width: 100%; max-width: 560px; }
  .hz-spr-layer.is-page .hz-spr__pdp-in { grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); }
  .hz-spr-layer.is-page .hz-spr__shot--main {
    aspect-ratio: auto;
    height: min(50vw, calc(100svh - 236px - var(--wp-admin--admin-bar--height, 0px)));
  }
  .hz-spr-layer.is-page .hz-spr__info { position: static; padding-top: 28px; }
}
/* petits ordinateurs : un peu plus de place pour le texte */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hz-spr-layer .hz-spr__info { padding-left: 40px; padding-right: 40px; }
}

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 991px) {
  .hz-brand .hz-wrap { padding: 8px 9px; align-items: center; }
  .hz-logo { width: 70px; }
  .hz-mobile-actions { gap: 4px; }
  .hz-nav { border-top: 0; }
}
@media (max-width: 767px) {
  .hz-topbar { font-size: 11.5px; line-height: 15px; letter-spacing: .02em; padding: 7px 12px; }
}

/* <corrections-fetes> */
/* Menu fixe opaque, au-dessus du contenu */
.hz-sticky { background: #fff; z-index: 60; }
/* </corrections-fetes> */