/* =====================================================================
   MENU — panneau des styles sous « Fiançailles » et « Alliances » (07/11)
   Au survol, un panneau blanc sobre sous le menu : les médaillons des styles
   (photo ronde, nom, nombre), comme l'en-tête de collection des onglets.
   Il s'ouvre après un court instant (pas d'ouverture en passant la souris
   sur le menu) et se ferme vite. Sur téléphone : les styles en liste, dans le menu.
   ===================================================================== */
.hz-nav > ul,
.hz-sticky__nav > ul { position: relative; }
.hz-nav > ul > li.has-mega,
.hz-sticky__nav > ul > li.has-mega { position: static; }

.hz-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  width: min(1040px, 100vw - 48px);
  padding: 26px 36px 28px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--site-line), 0 22px 44px rgba(36, 30, 24, .07);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  text-align: left;
}
li.has-mega:hover > .hz-mega,
li.has-mega:focus-within > .hz-mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .25s ease .12s, transform .25s ease .12s, visibility 0s .12s;
}
/* le lien du menu reste souligné tant que son panneau est ouvert */
.hz-nav > ul > li.has-mega:hover > a,
.hz-sticky__nav > ul > li.has-mega:hover > a { color: var(--site-accent); }

.hz-mega__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}
.hz-mega__row + .hz-mega__row { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--site-line); }
.hz-mega__titre { margin: 0; }
.hz-mega__titre a {
  display: inline-block;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--site-accent);
  font: 400 10.5px/1.5 var(--site-title);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--site-ink);
}
.hz-mega__items { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 14px; }
.hz-mega__item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  width: 90px;
  text-align: center;
}
.hz-mega__item--tout { align-self: center; width: auto; padding: 0 6px; }
.hz-mega__tout {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  font: 400 10px/1.3 var(--site-title);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9a928a;
  transition: color .25s, border-color .25s;
}
.hz-mega__item--tout:hover .hz-mega__tout { color: var(--site-ink); border-color: var(--site-accent); }
.hz-mega__ph {
  display: block;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 50%;
  background: #efe6dc;
  transition: box-shadow .3s;
}
.hz-mega__ph img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.hz-mega__item:hover .hz-mega__ph { box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--site-accent); }
.hz-mega__item:hover .hz-mega__ph img { transform: scale(1.06); }
.hz-mega__nom { font: 400 16px/1.2 var(--site-body); color: var(--site-ink); transition: color .25s; }
.hz-mega__item:hover .hz-mega__nom { color: var(--site-accent); }
.hz-mega__n { font: 400 9.5px/1 var(--site-title); letter-spacing: .15em; color: #b5ada5; }

/* En-tête fixe au défilement : même panneau, juste sous la barre */
.hz-sticky .hz-mega { top: 100%; }

/* Téléphone (menu burger) : les styles en simple liste sous Fiançailles et Alliances */
.hz-mobile-menu .hz-mega {
  position: static;
  width: auto;
  padding: 0 0 6px 14px;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.hz-mobile-menu .hz-mega__row { display: block; }
.hz-mobile-menu .hz-mega__row + .hz-mega__row { margin-top: 0; padding-top: 0; border-top: 0; }
.hz-mobile-menu .hz-mega__titre a {
  display: block;
  padding: 0;
  border-bottom: 1px solid #f2f2f2;
  font: 400 14px/40px var(--site-title);
  letter-spacing: 0;
  text-transform: none;
  color: #808080;
}
.hz-mobile-menu .hz-mega__items { display: block; padding-left: 14px; }
.hz-mobile-menu .hz-mega__item { display: flex; align-items: baseline; justify-content: space-between; width: auto; gap: 10px; border-bottom: 1px solid #f2f2f2; }
.hz-mobile-menu .hz-mega__item--tout { display: none; }
.hz-mobile-menu .hz-mega__ph { display: none; }
.hz-mobile-menu .hz-mega__nom { font: 400 16px/38px var(--site-body); color: #6f6862; }
.hz-mobile-menu .hz-mega__n { font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
  .hz-mega, li.has-mega:hover > .hz-mega, li.has-mega:focus-within > .hz-mega { transition: none; }
}

/* ---------- Une seule ligne, panneau compact (demande de la Maison : « une ligne max ») ---------- */
.hz-mega { padding: 18px 32px; }
.hz-mega__row { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
.hz-mega__items { flex-wrap: nowrap; align-items: center; gap: 12px; }
.hz-mega__items[hidden] { display: none; }
.hz-mega__item { width: 78px; gap: 5px; }
.hz-mega__ph { width: 54px; height: 54px; }
.hz-mega__nom { font-size: 14px; line-height: 1.15; }
.hz-mega__n { display: none; }
/* Femme / Homme : deux petits liens côte à côte, l'actif souligné */
.hz-mega__tabs { display: flex; gap: 18px; align-items: baseline; }
.hz-mega__tabs .hz-mega__tab {
  padding-bottom: 6px; border-bottom: 1px solid transparent;
  font: 400 10.5px/1.5 var(--site-title); letter-spacing: .24em; text-transform: uppercase; color: #9a928a;
  transition: color .2s, border-color .2s;
}
.hz-mega__tabs .hz-mega__tab.is-on { color: var(--site-ink); border-color: var(--site-accent); }
/* téléphone : Alliances garde ses deux liens Femme / Homme (comme avant), Fiançailles liste ses styles */
.hz-mobile-menu .hz-mega__tabs { display: block; }
.hz-mobile-menu .hz-mega__tabs .hz-mega__tab { display: block; padding: 0; border-bottom: 1px solid #f2f2f2; font: 400 14px/40px var(--site-title); letter-spacing: 0; text-transform: none; color: #808080; }
.hz-mobile-menu .hz-mega__row--duo .hz-mega__items { display: none; }
/* le panneau prend la taille de son contenu (pas de grand vide), textes sur une ligne */
.hz-mega { width: max-content; max-width: calc(100vw - 48px); }
.hz-mega__row { grid-template-columns: auto minmax(0, auto); gap: 30px; }
.hz-mega__titre a, .hz-mega__tab, .hz-mega__tout { white-space: nowrap; }
.hz-mobile-menu .hz-mega { width: auto; max-width: none; }
.hz-mobile-menu .hz-mega__titre a, .hz-mobile-menu .hz-mega__tab { white-space: normal; }
.hz-mega__item { flex: none; }
.hz-mega__item.hz-mega__item--tout { width: auto; margin-right: 6px; }

/* ---------- Pont invisible entre le menu et le panneau : la souris ne « tombe » pas dans le vide ----------
   (07/11, corrigé) Le pont était posé sur le panneau, sur toute sa largeur : une fois le panneau de Fiançailles
   ouvert, il recouvrait le bas des autres onglets (Alliances, Joaillerie…) et les empêchait de s'ouvrir au survol.
   Il est maintenant sous l'onglet survolé seulement, et n'existe que pendant le survol. */
.hz-nav > ul > li.has-mega > a,
.hz-sticky__nav > ul > li.has-mega > a { position: relative; }
.hz-nav > ul > li.has-mega:hover > a::before,
.hz-sticky__nav > ul > li.has-mega:hover > a::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }

/* ---------- Le panneau porte ses propres couleurs, sur toutes les pages (07/11, corrigé) ----------
   Sur la page Fêtes, l'ancienne feuille du tiroir de Fêtes (fetes.css, chargée sur cette page seulement)
   teignait le panneau en ivoire : « Bagues de fiançailles » et « Homme » devenaient presque invisibles.
   Elle lui ajoutait aussi un filet doré en haut, et changeait le filet champagne du survol de
   « Fiançailles » / « Alliances » en un petit point posé sur le mot. */
.hz-nav .hz-mega,
.hz-sticky__nav .hz-mega { right: auto; overflow: visible; border-top: 0; color: var(--site-ink); }
.hz-nav .hz-mega .hz-mega__titre a,
.hz-sticky__nav .hz-mega .hz-mega__titre a { color: var(--site-ink); }
/* Femme / Homme sont aussi dans le bloc titre : règle plus forte que celle du titre juste au-dessus */
.hz-nav .hz-mega .hz-mega__tabs .hz-mega__tab,
.hz-sticky__nav .hz-mega .hz-mega__tabs .hz-mega__tab { color: #9a928a; }
.hz-nav .hz-mega .hz-mega__tabs .hz-mega__tab:hover,
.hz-nav .hz-mega .hz-mega__tabs .hz-mega__tab.is-on,
.hz-sticky__nav .hz-mega .hz-mega__tabs .hz-mega__tab:hover,
.hz-sticky__nav .hz-mega .hz-mega__tabs .hz-mega__tab.is-on { color: var(--site-ink); }
/* le filet champagne sous l'onglet (herzo-finitions.css), qui reste tant que le panneau est ouvert */
.hz-nav > ul > li.has-mega > a::after,
.hz-sticky__nav > ul > li.has-mega > a::after {
  left: 24px; right: 24px; bottom: 11px; width: auto; height: 1px;
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.hz-sticky__nav > ul > li.has-mega > a::after { left: 15px; right: 15px; }
.hz-nav > ul > li.has-mega:hover > a::after,
.hz-sticky__nav > ul > li.has-mega:hover > a::after { transform: scaleX(1); }
/* pendant la nuit de l'étoile (Fêtes), le panneau passe en bleu nuit comme le reste de l'en-tête */
html.hz-nuit .hz-nav .hz-mega,
html.hz-nuit .hz-sticky__nav .hz-mega { background: #0b1424; }

/* ---------- Médaillons alignés : les photos sur une même ligne, les noms sur une ligne ----------
   (« Solitaire classique » passait sur deux lignes et faisait remonter sa photo au-dessus des autres) */
.hz-nav .hz-mega__items,
.hz-sticky__nav .hz-mega__items { align-items: flex-start; }
.hz-nav .hz-mega__item:not(.hz-mega__item--tout),
.hz-sticky__nav .hz-mega__item:not(.hz-mega__item--tout) { width: auto; min-width: 78px; }
.hz-nav .hz-mega__nom,
.hz-sticky__nav .hz-mega__nom { white-space: nowrap; }

/* =====================================================================
   MENU DU TÉLÉPHONE, refait (07/11) : rubriques en petites capitales, sous-rubriques repliables (+),
   médaillons des styles de fiançailles qui défilent, et pour finir les deux boutiques.
   ===================================================================== */
body .hz-mobile-menu { padding: 4px 24px 30px; border-top: 1px solid var(--site-line); background: #fff; }
body .hz-mobile-menu > ul > li { position: relative; border-bottom: 1px solid #efe8e1; }
body .hz-mobile-menu > ul > li > a {
  display: block; padding: 0 56px 0 0; border: 0;
  font: 400 12px/56px var(--site-title); letter-spacing: .22em; text-transform: uppercase; color: var(--site-ink);
}
body .hz-mobile-menu > ul > li.is-current > a { color: var(--site-accent); }
body .hz-mobile-menu .hz-flake { font-size: 1em; }
/* le + / − */
.hz-mm-plus { position: absolute; top: 0; right: -10px; width: 56px; height: 56px; background: none; border: 0; padding: 0; cursor: pointer; }
.hz-mm-plus::before, .hz-mm-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; margin-left: -6px; background: var(--site-ink); transition: transform .25s; }
.hz-mm-plus::after { transform: rotate(90deg); }
.is-open > .hz-mm-plus::after { transform: rotate(0); }
/* sous-rubriques fermées par défaut */
body .hz-mobile-menu .hz-mm-parent > .hz-dd,
body .hz-mobile-menu .hz-mm-parent > .hz-mega { display: none; }
body .hz-mobile-menu .hz-mm-parent.is-open > .hz-dd,
body .hz-mobile-menu .hz-mm-parent.is-open > .hz-mega { display: block; }
/* sous-rubriques : Cormorant, aérées, sans traits */
body .hz-mobile-menu .hz-dd { padding: 0 0 14px; }
body .hz-mobile-menu .hz-dd a,
body .hz-mobile-menu .hz-dd__t { border: 0; font: 400 19px/40px var(--site-body); color: #5a5a5a; }
body .hz-mobile-menu .hz-mega { padding: 0 0 18px; }
body .hz-mobile-menu .hz-mega__row { display: block; }
body .hz-mobile-menu .hz-mega__titre { display: none; }
body .hz-mobile-menu .hz-mega__row--duo .hz-mega__titre { display: block; }
body .hz-mobile-menu .hz-mega__tabs .hz-mega__tab {
  display: block; padding: 0; border: 0; white-space: normal;
  font: 400 19px/40px var(--site-body); letter-spacing: 0; text-transform: none; color: #5a5a5a;
}
body .hz-mobile-menu .hz-mega__tabs .hz-mega__tab::before { content: "Alliances "; }
/* Fiançailles : les médaillons en rangée qui défile */
body .hz-mobile-menu .hz-mega__row:not(.hz-mega__row--duo) .hz-mega__items {
  display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: none;
}
body .hz-mobile-menu .hz-mega__items::-webkit-scrollbar { display: none; }
body .hz-mobile-menu .hz-mega__item {
  display: grid; justify-items: center; align-content: start; gap: 8px; width: 82px; flex: none;
  border: 0; text-align: center;
}
body .hz-mobile-menu .hz-mega__ph { display: block; width: 66px; height: 66px; }
body .hz-mobile-menu .hz-mega__nom { font: 400 15px/1.15 var(--site-body); color: var(--site-ink); }
body .hz-mobile-menu .hz-mega__n { display: none; }
body .hz-mobile-menu .hz-mega__item--tout { display: grid; align-self: center; width: auto; margin-right: 4px; }
body .hz-mobile-menu .hz-mega__tout { font-size: 9.5px; letter-spacing: .18em; color: var(--site-ink); border-bottom: 1px solid var(--site-accent); white-space: nowrap; }
/* pied du menu : les deux boutiques */
.hz-mm-pied { margin-top: 26px; text-align: center; }
.hz-mm-pied .hz-mm-btn {
  display: block; padding: 15px 10px; border: 1px solid var(--site-ink);
  font: 400 11px/1 var(--site-title); letter-spacing: .24em; text-transform: uppercase; color: var(--site-ink);
}
.hz-mm-pied p { margin: 18px 0 0; font: italic 400 16px/1.6 var(--site-body); color: #8a837a; }
.hz-mm-pied p a { color: inherit; }

/* Téléphone : le « survol » déclenché par le toucher ne doit pas décaler le panneau (bug du blanc sous Alliances) */
body .hz-mobile-menu .hz-mega,
body .hz-mobile-menu li.has-mega:hover > .hz-mega,
body .hz-mobile-menu li.has-mega:focus-within > .hz-mega { left: auto; transform: none !important; opacity: 1; visibility: visible; transition: none; }
body .hz-mobile-menu .hz-mega::before { content: none; }
/* médaillons des fiançailles centrés (et qui défilent seulement s'ils dépassent) */
body .hz-mobile-menu .hz-mega__row:not(.hz-mega__row--duo) .hz-mega__items > :first-child { margin-left: auto; }
body .hz-mobile-menu .hz-mega__row:not(.hz-mega__row--duo) .hz-mega__items > :last-child { margin-right: auto; }
body .hz-mobile-menu .hz-mega__row:not(.hz-mega__row--duo) .hz-mega__items { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 16px; }
body .hz-mobile-menu .hz-mega__row:not(.hz-mega__row--duo) .hz-mega__items > * { margin-left: 0; margin-right: 0; }
body .hz-mobile-menu .hz-mega__item.hz-mega__item--tout { order: 9; flex: 0 0 100%; justify-items: center; margin: 0; }

/* =====================================================================
   EN-TÊTE DU TÉLÉPHONE (07/11, demande de la Maison) : le logo au centre,
   le menu (≡) à gauche, « Mon compte » à droite — comme les grandes maisons.
   ===================================================================== */
@media (max-width: 991px) {
  body .hz-brand .hz-wrap { position: relative; justify-content: center; align-items: center; min-height: 74px; }
  body .hz-logo { margin: 0 auto; }
  body .hz-mobile-actions {
    position: absolute; top: 0; bottom: 0; left: 4px; right: 4px;
    flex-direction: row; justify-content: space-between; align-items: center; gap: 0;
    pointer-events: none;
  }
  body .hz-mobile-actions > * { pointer-events: auto; }
  body .hz-mobile-actions .hz-burger { order: -1; width: 40px; height: 40px; }
  body .hz-mobile-actions .hz-account {
    font: 400 10px/1.3 var(--site-title); letter-spacing: .16em; text-transform: uppercase; color: var(--site-ink);
    text-align: right; max-width: 80px;
  }
}

/* =====================================================================
   FLUIDITÉ SUR TÉLÉPHONE (07/11, demande de la Maison : « quand tu cliques, il faut que ça glisse »)
   ===================================================================== */
@media (max-width: 991px) {
  /* le menu descend en glissant, et remonte en se fermant */
  .hz-mobile-menu:not([hidden]) { animation: hzMenuOuvre .38s cubic-bezier(.22,.61,.36,1) both; }
  .hz-mobile-menu.is-fermeture { animation: hzMenuFerme .26s cubic-bezier(.4,0,.2,1) both; }
  .hz-mobile-menu > ul > li { animation: hzMenuLigne .5s cubic-bezier(.22,.61,.36,1) both; }
  .hz-mobile-menu > ul > li:nth-child(2) { animation-delay: .03s; }
  .hz-mobile-menu > ul > li:nth-child(3) { animation-delay: .06s; }
  .hz-mobile-menu > ul > li:nth-child(4) { animation-delay: .09s; }
  .hz-mobile-menu > ul > li:nth-child(5) { animation-delay: .12s; }
  .hz-mobile-menu > ul > li:nth-child(6) { animation-delay: .15s; }
  .hz-mobile-menu > ul > li:nth-child(7) { animation-delay: .18s; }
  /* le ≡ devient une croix en tournant un peu */
  .hz-burger svg { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
  .hz-burger.is-croix svg { transform: rotate(90deg); }
  /* le + tourne en − */
  .hz-mm-plus::before, .hz-mm-plus::after { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
}
@keyframes hzMenuOuvre { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes hzMenuFerme { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes hzMenuLigne { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* un léger retour au toucher : la carte, le médaillon ou le bouton s'enfonce à peine */
@media (hover: none) {
  .hz-spr__card .hz-spr__media,
  .hz-spr__entry .hz-spr__entry-img,
  .hz-mega__item .hz-mega__ph,
  .hz-home__tile-img,
  .hz-spr__btn, .hz-home__btn, .hz-mm-btn, .hz-spr__carat, .hz-spr__vthumb .hz-spr__ph {
    transition: transform .25s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
  }
  .hz-spr__card .hz-spr__media:active,
  .hz-spr__entry:active .hz-spr__entry-img,
  .hz-mega__item:active .hz-mega__ph,
  .hz-home__tile:active .hz-home__tile-img,
  .hz-spr__vthumb:active .hz-spr__ph { transform: scale(.975); }
  .hz-spr__btn:active, .hz-home__btn:active, .hz-mm-btn:active, .hz-spr__carat:active { transform: scale(.98); opacity: .85; }
  body.hz-chrome a, body.hz-chrome button { -webkit-tap-highlight-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .hz-mobile-menu:not([hidden]), .hz-mobile-menu.is-fermeture, .hz-mobile-menu > ul > li { animation: none; }
}

/* ---------- Conseils sur téléphone : la vidéo dès l'arrivée (07/11, demande de la Maison) ----------
   Le paragraphe d'introduction disparaît (il reste sur ordinateur), le titre est resserré. */
@media (max-width: 767px) {
  body.hz-chrome .hz-simple.hz-simple--conseils { padding-top: 14px !important; }
  .hz-simple--conseils > .wpb-content-wrapper > .vc_row:first-child .wpb_text_column:first-child p:not(:first-child) { display: none !important; }
  .hz-simple--conseils > .wpb-content-wrapper > .vc_row:first-child .wpb_text_column:first-child p:first-child { margin: 0 0 4px !important; font-size: 11px !important; }
  .hz-simple--conseils > .wpb-content-wrapper > .vc_row:first-child .wpb_text_column:first-child h2 { margin: 0 0 16px !important; font-size: 21px !important; line-height: 1.25 !important; }
}

/* ---------- Boutiques › Lyon / Marseille (08/11) : dernier onglet, menu déroulant calé à droite ---------- */
.hz-nav > ul > li[data-hz-nav="boutiques"] > .hz-dd,
.hz-sticky__nav > ul > li[data-hz-nav="boutiques"] > .hz-dd { left: auto; right: 0; width: 230px; }

/* <menu-une-ligne> ---------- Les onglets toujours sur une ligne (08/11) ----------
   Le menu qui suit au défilement (.hz-sticky) n'avait que 774 px entre le logo et la loupe :
   « La Maison » et « Fêtes ❄ » passaient sur deux lignes et la barre n'en montrait qu'une
   (en anglais « Rings / Jewellery / Season / Maison » au lieu de « Wedding Rings »…, le ❄ tombait dessous).
   Désormais : mêmes onglets que le menu principal, sur une ligne, centrés comme lui ;
   logo à gauche et loupe à droite, aux marges de la barre des filtres (40 px, 20 px sous 1280 px).
   L'espace entre les onglets se resserre seulement si la place manque (anglais, écrans étroits).
   Le filet champagne du survol suit cet espace. Vérifié de 992 à 1920 px, français et anglais, Fêtes comprise. */
.hz-nav > ul > li > a,
.hz-sticky__nav > ul > li > a { white-space: nowrap; }

/* menu principal en anglais : intitulés plus longs, l'espace se resserre sous 1140 px */
html[lang^="en"] body.hz-chrome .hz-nav > ul > li > a { --hz-ong: clamp(10px, calc((100vw - 800px) / 14), 24px); padding: 0 var(--hz-ong); }
html[lang^="en"] body.hz-chrome .hz-nav > ul > li > a::after { left: var(--hz-ong); right: var(--hz-ong); }

/* menu qui suit au défilement */
body.hz-chrome .hz-sticky .hz-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 32px; width: min(1600px, 100%); padding: 0 40px; }
body.hz-chrome .hz-sticky__logo { justify-self: start; }
body.hz-chrome .hz-sticky__loupe { justify-self: end; margin-left: 0; }
body.hz-chrome .hz-sticky__nav > ul { justify-content: center; }
body.hz-chrome .hz-sticky__nav > ul > li > a { --hz-ong: clamp(8px, calc((100vw - 900px) / 14), 24px); padding: 0 var(--hz-ong); letter-spacing: 1.3px; }
html[lang^="en"] body.hz-chrome .hz-sticky__nav > ul > li > a { --hz-ong: clamp(8px, calc((100vw - 1130px) / 14), 24px); }
body.hz-chrome .hz-sticky__nav > ul > li > a::after { left: var(--hz-ong); right: var(--hz-ong); }
@media (max-width: 1279px) {
  body.hz-chrome .hz-sticky .hz-wrap { padding: 0 20px; gap: 0 24px; }
  body.hz-chrome .hz-sticky__logo { width: 84px; }
  html[lang^="en"] body.hz-chrome .hz-sticky__nav > ul > li > a { font-size: 12px; letter-spacing: 1px; --hz-ong: clamp(6px, calc((100vw - 900px) / 14), 15px); }
}
/* </menu-une-ligne> */

/* <onglets-pareils> (10/11, demande du client : « l'agencement des onglets de l'accueil, c'est pareil partout ») :
   les onglets du menu (et de la barre collante) ont partout l'écriture de l'accueil — 13 px, Montserrat 600, capitales espacées
   .22em (l'écriture de « Taille de doigt » des fiches, demandée le 10/11), tous du même poids (avant : 300 ou 400 selon l'onglet, .1em). Seule la couleur change : blanc sur la photo
   de l'accueil, encre ailleurs ; l'onglet de la page reste cuivre. Outil : outils/ouverture-plein-ecran/poser-menu.py */
@media (min-width: 992px) {
  body .hz-header .hz-nav > ul > li > a,
  body .hz-sticky .hz-sticky__nav > ul > li > a {
    font-size: 13px !important; font-weight: 600 !important; letter-spacing: .22em !important;
  }
  body:not(:has(.hz-home__hero)) .hz-header .hz-nav > ul > li:not(.is-current):not(.is-active) > a:not([aria-current]),
  body .hz-sticky .hz-sticky__nav > ul > li:not(.is-current):not(.is-active) > a:not([aria-current]) { color: #242424; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  html[lang^="en"] body .hz-header .hz-nav > ul > li > a,
  html[lang^="en"] body .hz-sticky .hz-sticky__nav > ul > li > a { font-size: 12px !important; letter-spacing: .12em !important; }
}
/* barre collante (plus étroite : logo et loupe de part et d'autre) : on resserre seulement sous 1280 px pour rester sur une ligne */
@media (min-width: 992px) and (max-width: 1279px) {
  body .hz-sticky .hz-sticky__nav > ul > li > a { font-size: 12px !important; letter-spacing: .1em !important; }
  html[lang^="en"] body .hz-sticky .hz-sticky__nav > ul > li > a { font-size: 11.5px !important; letter-spacing: .08em !important; }
}
/* </onglets-pareils> */

/* <menu-telephone-gras> (11/11/2026, demande du client sur capture téléphone : « l'onglet menu sur téléphone,
   un peu plus en gras, en noir ») : les rubriques du menu ≡ passent de 400 à 500, et à l'encre pleine.
   Elles sortaient en gris #5a5a5a : « body.hz-chrome .hz-header a { color: inherit } » passait devant
   la couleur d'encre prévue ; d'où « .hz-header » dans les sélecteurs ci-dessous.
   Le titre du second volet (La Maison, Boutiques) suit, pour rester le même mot dans la même graisse.
   Outil : site TEST/outils/menu-gras/poser.py */
html body .hz-mobile-menu > ul > li > a,
html body .hz-header .hz-mobile-menu > ul > li > a { font-weight: 500; color: var(--site-ink, #242424); }
html body .hz-mobile-menu > ul > li.is-current > a,
html body .hz-header .hz-mobile-menu > ul > li.is-current > a { color: var(--site-accent, #c09578); }
html body .hz-mobile-menu .hz-mm-volet__titre { font-weight: 500; }
/* </menu-telephone-gras> */

/* <menu-fin> (12/11, demandes du client : « la police des menus en haut c'est un peu trop en gras, plus fin ça serait
   plus élégant », puis « pour les onglets ne mets pas en gras mais en noir foncé ») : les onglets du menu et de la
   barre collante sont passés de 600 à 400, et du gris encre #242424 au noir franc (en 400 l'encre paraissait grise).
   Puis à 20 h 40 : « essaie de mettre en gras fin, raffiné et élégant, en gardant cette police » → Montserrat 500
   (Medium), le juste milieu entre le 400 trop maigre et le 600 trop appuyé ; noir franc gardé. Même graisse sur le
   film de l'accueil (blanc sur image, il y était déjà en 500).
   Taille et espacement inchangés ; l'onglet de la page reste cuivre. Avant : outils/retouches-12-11/avant/menu-gras-fin/
   Outil : site TEST/outils/retouches-12-11/poser.py */
@media (min-width: 992px) {
  html body .hz-header .hz-nav > ul > li > a,
  html body .hz-sticky .hz-sticky__nav > ul > li > a { font-weight: 500 !important; }
  html body:has(.hz-home__hero) .hz-header .hz-nav > ul > li > a { font-weight: 500 !important; }
  html body:not(:has(.hz-home__hero)) .hz-header .hz-nav > ul > li:not(.is-current):not(.is-active) > a:not([aria-current]),
  html body .hz-sticky .hz-sticky__nav > ul > li:not(.is-current):not(.is-active) > a:not([aria-current]) { color: #000; }
}
/* </menu-fin> */