/* « Ma sélection » en haut à droite de l'en-tête, entre « Français » et la loupe (08/11/2026, demande de la Maison ;
   d'abord à gauche avec les icônes, puis « met en haut à droite »). Sur ordinateur, le bouton de la barre des
   filtres est retiré (doublon). Sur téléphone, « Ma sélection » remplace « Mon compte » à droite du logo.
   Outil : site TEST/outils/selection-entete/poser.py */
.hz-util .hz-wrap > .hz-lang { margin-left: auto; }
.hz-util .hz-wrap > a.hz-util__sel { display: inline-flex; align-items: center; gap: 8px; height: 22px; margin-left: 28px; color: var(--site-ink, #242424); transition: color .3s; }
.hz-util .hz-wrap > a.hz-util__sel:hover { color: var(--site-accent, #c09578); }
.hz-util__sel svg { flex: none; transition: fill .3s, stroke .3s; }
.hz-util__sel.has-items svg, .hz-account--sel.has-items svg { fill: var(--site-accent, #c09578); stroke: var(--site-accent, #c09578); }
.hz-util__sel-t { font: 400 10px/1 var(--site-title, "Montserrat", Arial, sans-serif); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.hz-util__sel-n { margin-left: -2px; font: 400 10px/1 var(--site-title, "Montserrat", Arial, sans-serif); letter-spacing: .12em; color: #a97f63; }
.hz-util__sel-n:empty { display: none; }
/* Le bouton « Ma sélection » de la barre des filtres est retiré partout : il est dans l'en-tête (ordinateur et téléphone). */
body.hz-chrome .hz-spr .hz-spr__mysel { display: none; }

/* Téléphone et tablette : « Ma sélection » remplace « Mon compte » à droite du logo (demande du 08/11). */
@media (max-width: 991px) {
  body .hz-mobile-actions .hz-account--sel { display: inline-flex; align-items: center; gap: 6px; max-width: none; text-align: right; letter-spacing: .14em; }
  body .hz-mobile-actions .hz-account--sel svg { flex: none; width: 15px; height: 15px; }
  body .hz-mobile-actions .hz-account--sel .hz-util__sel-t { display: block; font: inherit; letter-spacing: inherit; line-height: 1.3; }
  body .hz-mobile-actions .hz-account--sel .hz-util__sel-n { margin: 0; font-size: 10px; }
}
/* très petits téléphones : le cœur et le nombre seulement, pour ne pas toucher le logo */
@media (max-width: 359px) {
  body .hz-mobile-actions .hz-account--sel .hz-util__sel-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* <rdv-ecrit> « Prendre rendez-vous » écrit en toutes lettres à la place de l'enveloppe, en haut à gauche de
   l'en-tête (11/11/2026, demande de la Maison) : l'écriture des onglets, en plus fin (500 au lieu de 600),
   mais lisible (« il faut qu'il soit quand même visible »). Libellé court « Rendez-vous », 11 px :
   « Prendre rendez-vous » en 12 px a été jugé « très long, très grand ».
   Outil : site TEST/outils/rdv-entete/poser.py */
body .hz-util__icons { align-items: center; }
body .hz-util__icons a.hz-util__rdv { display: inline-flex; align-items: center; width: auto; height: 22px; font: 500 11px/1 var(--site-title, "Montserrat", Arial, sans-serif); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
/* </rdv-ecrit> */

/* <entete-retour> (11/11, demande de la Maison : « quand on descend, elle n'est plus là ; quand on remonte, elle est là »)
   Téléphone et tablette (≤ 991 px) : l'en-tête de l'arrivée (menu ≡, loupe, logo, Ma sélection) part avec la page
   quand on descend et revient, fixé en haut, dès qu'on remonte un peu. Tout en haut de la page, il reprend sa
   place d'origine (posé sur la photo à l'accueil). Les classes hz-er-fixe / hz-er-vue sont mises par le script
   (bloc <entete-retour> de herzo-selection-entete.js). Ordinateur : rien ne change (barre des onglets déjà là).
   Outil : site TEST/outils/entete-retour/poser.py */
.hz-er-cale { display: none; }
@media (max-width: 991px) {
  html.hz-er-fixe body .hz-er-cale { display: block; height: var(--hz-er-h, 0px); }
  html.hz-er-fixe body .hz-header {
    position: fixed !important; top: var(--hz-er-haut, 0px); left: 0; right: 0; z-index: 60;
    transform: translateY(calc(-100% - var(--hz-er-haut, 0px) - 12px));
    transition: transform .42s cubic-bezier(.22, .61, .36, 1), box-shadow .42s ease;
    will-change: transform;
  }
  html.hz-er-fixe.hz-er-vue body .hz-header {
    transform: none;
    box-shadow: 0 12px 28px -20px rgba(36, 36, 36, .35);
  }
  /* menu ≡ ouvert dans l'en-tête fixé : il défile dans l'écran au lieu de dépasser en bas */
  html.hz-er-fixe body .hz-header .hz-mobile-menu {
    max-height: calc(100vh - var(--hz-er-haut, 0px) - var(--hz-er-marque, 75px));
    max-height: calc(100dvh - var(--hz-er-haut, 0px) - var(--hz-er-marque, 75px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  /* la barre des filtres se range sous l'en-tête quand il est là */
  .hz-spr .hz-spr__bar { transition: top .42s cubic-bezier(.22, .61, .36, 1); }
  html.hz-er-fixe.hz-er-vue .hz-spr .hz-spr__bar { top: calc(var(--hz-er-haut, 0px) + var(--hz-er-marque, 75px)) !important; }

  /* accueil : en revenant au milieu de la page, l'en-tête n'est plus sur la photo → fond blanc, logo et icônes foncés */
  html.hz-er-fixe body:has(.hz-home__hero) .hz-header { background: #fff !important; border-bottom: 1px solid var(--site-line, #ebebeb) !important; }
  html.hz-er-fixe.hz-er-vue body:has(.hz-home__hero) .hz-header { box-shadow: 0 12px 28px -20px rgba(36, 36, 36, .35) !important; }
  html.hz-er-fixe body:has(.hz-home__hero) .hz-header .hz-brand { background: #fff !important; }
  html.hz-er-fixe body:has(.hz-home__hero) .hz-header .hz-logo img { filter: none !important; }
  html.hz-er-fixe body:has(.hz-home__hero) .hz-header:not(:has(.hz-burger[aria-expanded="true"])) :is(.hz-burger, .hz-search, .hz-rch-mob, .hz-account, .hz-account *),
  html.hz-er-fixe body:has(.hz-home__hero) .hz-header :is(.hz-burger, .hz-search, .hz-rch-mob, .hz-account, .hz-account *) {
    color: var(--site-text, #5a5a5a) !important; text-shadow: none !important;
  }
  html.hz-er-fixe body:has(.hz-home__hero) .hz-header:not(:has(.hz-burger[aria-expanded="true"])) .hz-account .hz-util__sel-n,
  html.hz-er-fixe body:has(.hz-home__hero) .hz-header .hz-account .hz-util__sel-n { color: #a97f63 !important; }
  html.hz-er-fixe body:has(.hz-home__hero) .hz-header:not(:has(.hz-burger[aria-expanded="true"])) :is(.hz-burger, .hz-search, .hz-rch-mob, .hz-account) svg,
  html.hz-er-fixe body:has(.hz-home__hero) .hz-header :is(.hz-burger, .hz-search, .hz-rch-mob, .hz-account) svg { filter: none !important; }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  html.hz-er-fixe body .hz-header, .hz-spr .hz-spr__bar { transition: none !important; }
}
/* </entete-retour> */