/* =====================================================================
   HARMONIE DES ONGLETS BIJOUX — Fiançailles, Alliances femme, Alliances homme (07/11/2026)
   Même arrivée partout, entre la mise en scène de Fiançailles et l'accès direct d'Alliances :
     • un en-tête de collection : surtitre et titre à gauche, médaillons de styles à droite ;
     • puis la barre de filtres et les bijoux tout de suite ;
     • Fiançailles : la grande photo, le texte et « Prendre rendez-vous » en bandeau après la grille.
   Le balisage est préparé par hz_spr_harmonie() (herzo-mise-en-scene.php).
   ===================================================================== */

.hz-spr .hz-coll {
  display: grid;
  grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
  align-items: center;
  gap: 20px 48px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 30px 40px 28px;
}

/* ---------- À gauche : surtitre et titre ---------- */
.hz-spr .hz-coll__txt { display: grid; justify-items: start; gap: 12px; }
.hz-spr .hz-coll__txt .hz-spr__eyebrow { color: var(--hz-accent); }
.hz-spr .hz-coll .hz-coll__txt h2 {
  margin: 0;
  font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: clamp(28px, 2.5vw, 36px) !important;
  line-height: 1.18 !important;
  letter-spacing: .01em;
  color: var(--hz-ink);
}
.hz-spr .hz-coll .hz-coll__txt h2 em { font-family: inherit !important; font-style: normal !important; font-weight: 300 !important; color: var(--hz-accent); }
/* Alliances : le choix Femme / Homme fait office de titre */
.hz-spr .hz-coll .hz-spr__univers { justify-content: flex-start; gap: 0 30px; padding: 0; }
.hz-spr .hz-coll .hz-spr__univers a {
  position: relative;
  padding: 0 0 6px;
  font: 300 clamp(28px, 2.5vw, 36px)/1.18 var(--hz-sans);
  letter-spacing: .01em;
  text-transform: none;
  color: #c3bab1;
  transition: color .4s;
}
.hz-spr .hz-coll .hz-spr__univers a:hover,
.hz-spr .hz-coll .hz-spr__univers a[aria-current="page"] { color: var(--hz-ink); }
.hz-spr .hz-coll .hz-spr__univers a[aria-current="page"]::after { left: 0; right: 0; bottom: 0; }

/* ---------- À droite : médaillons de styles ---------- */
.hz-spr .hz-coll .hz-spr__entries {
  justify-content: flex-start;          /* calé à droite quand il y a la place (marge automatique), jamais rogné sinon */
  gap: 22px;
  max-width: none;
  margin: 0;
  padding: 4px 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.hz-spr .hz-coll .hz-spr__entries > :first-child { margin-left: auto; }
.hz-spr .hz-coll .hz-spr__entry { width: 100px; scroll-snap-align: start; }
.hz-spr .hz-coll .hz-spr__entry-img { width: 88px; }
.hz-spr .hz-coll .hz-spr__entry-name { font-size: 16px; }
.hz-spr .hz-coll .hz-spr__entry--all { align-self: center; }

/* ---------- Fiançailles : bandeau après la grille ---------- */
.hz-spr .hz-coll__bande { margin-top: 64px; }
.hz-spr .hz-coll__bande .hz-spr__intro-txt { padding-top: 48px; padding-bottom: 48px; }

/* ---------- Écrans moyens : médaillons qui défilent ---------- */
@media (max-width: 1279px) {
  .hz-spr .hz-coll { grid-template-columns: minmax(240px, 30%) minmax(0, 1fr); gap: 16px 32px; padding: 26px 28px 22px; }
}

/* ---------- Téléphone et tablette : l'un sous l'autre ---------- */
@media (max-width: 1023px) {
  .hz-spr .hz-coll { grid-template-columns: 1fr; gap: 14px; padding: 20px 0 14px; }
  .hz-spr .hz-coll__txt { padding: 0 20px; gap: 8px; }
  .hz-spr .hz-coll .hz-coll__txt h2,
  .hz-spr .hz-coll .hz-spr__univers a { font-size: 26px !important; }
  .hz-spr .hz-coll .hz-spr__entries { gap: 18px; padding: 4px 20px; scroll-padding-inline: 20px; }
  .hz-spr .hz-coll .hz-spr__entries > :first-child { margin-left: 0; }
  .hz-spr .hz-coll .hz-spr__entry { width: 86px; }
  .hz-spr .hz-coll .hz-spr__entry-img { width: 74px; }
  .hz-spr .hz-coll .hz-spr__entry-name { font-size: 14px; }
  .hz-spr .hz-coll__bande { margin-top: 40px; }
}

/* ---------- Fiançailles : chapitres (L'épure, La lumière, L'éclat) masqués ---------- */
.hz-spr--fiancailles .hz-spr__chapter { display: none !important; }

/* <pied-dessin> (08/11) Le dessin de la boutique au-dessus de Lyon et de Marseille (trait encre, fond transparent) */
.hz-footer__shops > div:not(.hz-footer__logo) { text-align: center; }
.hz-footer__dessin { display: block; width: min(200px, 100%); margin: 0 auto 14px; transition: opacity .3s; }
.hz-footer__dessin img { display: block; width: 100%; height: auto; }
.hz-footer__dessin:hover { opacity: .75; }
.hz-footer__shops { align-items: start; }
@media (max-width: 991px) { .hz-footer__dessin { width: min(190px, 60%); } .hz-footer__shops { align-items: start; } }
/* (09/11) les deux dessins à la même hauteur (Marseille est plus haut que Lyon) : textes alignés */
.hz-footer__dessin { width: auto; display: flex; justify-content: center; }
.hz-footer .hz-footer__dessin img { width: auto; height: 140px; max-width: 100%; object-fit: contain; }
@media (max-width: 991px) { .hz-footer__dessin { width: auto; } .hz-footer .hz-footer__dessin img { height: 130px; } }
/* </pied-dessin> */

/* (08/11) adresse → Google Maps, téléphone → appel */
.hz-footer__lien { transition: color .3s; }
.hz-footer__lien:hover, .hz-footer__lien:focus-visible { color: var(--site-accent, #c09578); }

/* <contact-volet> (09/11, v2 plus discrète) bouton « Nous contacter » (bas droite) + volet de contact à droite */
/* body : fetes-site.css « .hz-site button { font:inherit; border:0; padding:0; background:none } » passerait devant */
body .hz-ct-btn {
  position: fixed; right: 24px; bottom: 24px; z-index: 46;
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 13px;
  background: rgba(255, 255, 255, .94); color: var(--site-ink, #242424); border: 1px solid rgba(192, 149, 120, .55); border-radius: 999px;
  box-shadow: 0 3px 12px rgba(36, 30, 26, .06);
  font: 400 9.5px/1 var(--site-title, "Montserrat", Arial, sans-serif); letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background .3s, color .3s, border-color .3s, opacity .3s, visibility .3s, transform .3s;
}
.hz-ct-btn svg { flex: none; width: 16px; height: 16px; color: var(--site-accent, #c09578); transition: color .3s; }
body .hz-ct-btn:hover, body .hz-ct-btn:focus-visible { background: var(--site-ink, #242424); border-color: var(--site-ink, #242424); color: #fff; }
.hz-ct-btn:hover svg, .hz-ct-btn:focus-visible svg { color: #fff; }
.hz-ct-ouvert .hz-ct-btn { opacity: 0; visibility: hidden; transform: translateY(8px); }
.hz-totop { bottom: 80px; right: 26px; }              /* le losange « haut de page » au-dessus du bouton */

.hz-ct-voile { position: fixed; inset: 0; z-index: 100000; background: rgba(36, 30, 26, .22); opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.hz-ct-ouvert .hz-ct-voile { opacity: 1; visibility: visible; transition: opacity .45s; }
.hz-ct {
  position: fixed; top: var(--wp-admin--admin-bar--height, 0px); right: 0; bottom: 0; z-index: 100001;
  display: flex; flex-direction: column; width: min(420px, 100%); padding: 52px 48px 40px;
  background: #fff; box-shadow: -16px 0 50px rgba(36, 30, 26, .08); overflow-y: auto; overscroll-behavior: contain;
  color: var(--site-ink, #242424); text-align: left;
  transform: translateX(100%); visibility: hidden; transition: transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s .55s;
}
.hz-ct-ouvert .hz-ct { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s; }
.hz-ct a { text-decoration: none; }
.hz-ct:focus { outline: none; }
.hz-ct__tete { position: relative; padding: 0 40px 0 0; }
.hz-ct__titre { margin: 0; font: 300 21px/1.3 var(--site-title, "Montserrat", Arial, sans-serif); letter-spacing: .04em; color: var(--site-ink, #242424); }
body .hz-ct .hz-ct__x { position: absolute; top: -11px; right: -12px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: #8a8178; cursor: pointer; transition: color .3s, transform .4s; }
.hz-ct__x svg { width: 17px; height: 17px; }
.hz-ct__x:hover, .hz-ct__x:focus-visible { color: var(--site-ink, #242424); transform: rotate(90deg); }
.hz-ct__bloc { margin-top: 52px; }
.hz-ct__bloc + .hz-ct__bloc { padding-top: 44px; margin-top: 44px; border-top: 1px solid #f1ebe5; }
.hz-ct__nom {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 400 10.5px/1.4 var(--site-title, "Montserrat", Arial, sans-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--site-ink, #242424);
}
.hz-ct__nom svg { flex: none; width: 16px; height: 16px; color: var(--site-accent, #c09578); }
.hz-ct__ligne { display: block; padding: 10px 0 10px 28px; color: var(--site-ink, #242424); }
/* (09/11) Lyon / Marseille mis en avant (le client « ne voyait rien ») */
.hz-ct__ligne { padding-top: 14px; padding-bottom: 14px; }
.hz-ct__ville { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; font: 500 13px/1.4 var(--site-title, "Montserrat", Arial, sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--site-ink, #242424); }
/* (09/11) pastille Ouvert / Fermé, calculée à l'heure de Paris d'après les horaires (data-j / data-h) */
.hz-ct__etat { display: inline-flex; align-items: center; gap: 7px; margin: 0; font: italic 400 14.5px/1.3 var(--site-body, "Cormorant Garamond", Georgia, serif); letter-spacing: 0; text-transform: none; color: #8a8178; }
.hz-ct__etat[hidden] { display: none; }
.hz-ct__etat::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #b5574b; box-shadow: 0 0 0 3px rgba(181, 87, 75, .14); }
.hz-ct__etat.is-ouvert::before { background: #4f8a5e; box-shadow: 0 0 0 3px rgba(79, 138, 94, .15); }
.hz-ct__etat b { font-weight: 400; font-style: normal; font-family: var(--site-title, "Montserrat", Arial, sans-serif); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--site-ink, #242424); }
.hz-ct__ligne strong { display: block; font: 300 16px/1.4 var(--site-title, "Montserrat", Arial, sans-serif); letter-spacing: .05em; color: var(--site-ink, #242424); transition: color .3s; }
.hz-ct__ligne strong.hz-ct__mail { font-size: 14px; letter-spacing: .02em; overflow-wrap: anywhere; }
.hz-ct__ligne small { display: block; margin-top: 2px; font: italic 400 14.5px/1.4 var(--site-body, "Cormorant Garamond", Georgia, serif); color: #9a9188; }
.hz-ct__ligne:hover strong, .hz-ct__ligne:focus-visible strong { color: var(--site-accent, #c09578); }
.hz-ct__rdv { margin: 0; transition: color .3s; }
.hz-ct__rdv:hover, .hz-ct__rdv:focus-visible { color: var(--site-accent, #c09578); }
.hz-ct__fleche { position: relative; flex: none; width: 18px; height: 11px; margin-left: auto; transition: transform .3s; }
.hz-ct__fleche::before { content: ""; position: absolute; left: 0; top: 5px; width: 17px; height: 1px; background: currentColor; }
.hz-ct__fleche::after { content: ""; position: absolute; right: 1px; top: 2px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.hz-ct__rdv:hover .hz-ct__fleche, .hz-ct__rdv:focus-visible .hz-ct__fleche { transform: translateX(4px); }
@media (max-width: 767px) {
  body .hz-ct-btn { right: 16px; bottom: 16px; width: 42px; height: 42px; padding: 0; justify-content: center; }
  .hz-ct-btn svg { width: 18px; height: 18px; }
  .hz-ct-btn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hz-totop { right: 20px; bottom: 70px; }
  html.hz-ct-haut body .hz-ct-btn { bottom: 92px; }        /* fiche bijou : la barre d'achat est collée en bas */
  html.hz-ct-haut .hz-totop { bottom: 146px; }
  .hz-ct { padding: 40px 28px 32px; }
  .hz-ct__bloc { margin-top: 42px; }
  .hz-ct__bloc + .hz-ct__bloc { padding-top: 36px; margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .hz-ct, .hz-ct-ouvert .hz-ct, .hz-ct-voile, .hz-ct-btn { transition: none; }
}
/* </contact-volet> */

/* <pied-dessin-telephone> (09/11) sur téléphone, les dessins des boutiques beaucoup plus petits
   (la règle du thème « .hz-footer img { height:auto } » annulait la hauteur prévue) */
@media (max-width: 767px) {
  body.hz-chrome .hz-footer .hz-footer__dessin img { width: auto; height: 84px; max-width: 100%; }
  body.hz-chrome .hz-footer .hz-footer__dessin { margin-bottom: 10px; }
}
/* </pied-dessin-telephone> */

/* <pied-dessin-niveau> (09/11) Lyon et Marseille au même niveau, un peu plus petits.
   La règle générale « body.hz-chrome .hz-footer img { height:auto } » passait devant les 140 px :
   chaque dessin prenait toute la colonne (Lyon 200 px de haut, Marseille 235 px). Même hauteur pour les deux,
   et « Lyon » / « Marseille » à la même taille pour que les adresses tombent sur la même ligne. */
body.hz-chrome .hz-footer .hz-footer__dessin { width: auto; display: flex; justify-content: center; align-items: flex-end; }
body.hz-chrome .hz-footer .hz-footer__dessin img { width: auto; height: 170px; max-width: 100%; object-fit: contain; }
body.hz-chrome .hz-footer .hz-footer__shops h2,
body.hz-chrome .hz-footer .hz-footer__shops h3 { font-size: 22px; line-height: 1.35; }
@media (max-width: 991px) { body.hz-chrome .hz-footer .hz-footer__dessin img { height: 140px; } }
@media (max-width: 767px) { body.hz-chrome .hz-footer .hz-footer__dessin img { height: 84px; } }
/* </pied-dessin-niveau> */

/* <fiche-epuree> (09/11, demande du client sur les fiches bijoux)
   1. « Trouver une boutique » et « Bien choisir sa bague » retirés (« ça fait de la place pour rien ») ; la colonne se resserre.
   2. « Contacter un conseiller » : Lyon / Marseille gardent chacun leur cadre, séparés comme avant (le client a
      refusé la version sans cadres) ; seule l'écriture est affinée : ville cuivre, numéro plus grand, adresse en italique.
   Outil : site TEST/outils/fiche-epuree/poser.py */
body .hz-spr__links { display: none !important; }
body .hz-spr__conseil { margin-top: 34px !important; padding-top: 30px !important; }
body .hz-spr__conseil-t { margin-bottom: 20px !important; }
body .hz-spr__tel span { color: #a98365 !important; font-size: 9.5px !important; letter-spacing: .26em !important; }
body .hz-spr__tel strong { font-size: 19px !important; font-weight: 400 !important; letter-spacing: .03em !important; transition: color .3s ease; }
body .hz-spr__tel small { font-style: italic; }
body .hz-spr__tel:hover strong, body .hz-spr__tel:focus-visible strong { color: #a98365 !important; }
/* 3. (09/11) Présentation de la pièce allégée, sans doublons : la phrase « Le prix varie selon… » est retirée
   (le prix change sous les yeux quand on choisit), la valeur répétée à côté de « Carat » et de « Or » aussi
   (elle est déjà écrite dans la case choisie et sous la photo). Pierre (Dis-moi Oui) : le nom complet reste
   dans la ligne « Saphir rose naturel » sous les vignettes. */
body .hz-spr__price-note { display: none !important; }
body .hz-spr__group:has(.hz-spr__carats) > .hz-spr__label > span,
body .hz-spr__group:has(.hz-spr__vthumbs) > .hz-spr__label > span,
body .hz-spr__group:has(.hz-spr__stones):has(.hz-spr__stone-note) > .hz-spr__label > span { display: none !important; }
/* 4. (09/11) Les intitulés prennent l'appui qu'avaient les valeurs retirées : Carat, Or, Taille de doigt (et Pierre)
   en encre, un peu plus appuyés, comme le prix (« garde prix en gras, carat en gras, or en gras, taille de doigt en gras »). */
body .hz-spr__group > .hz-spr__label { color: #242424 !important; font-weight: 600 !important; }
body .hz-spr__group > .hz-spr__label > a { font-weight: 500 !important; }
body .hz-spr__pdp-price { color: #242424 !important; font-weight: 500 !important; }
/* 5. (10/11) « Solitaire classique », « Anneau pavé »… retirés au-dessus du nom (cartes et fiche) ; sous le nom de la fiche,
   la ligne discrète « Or jaune · Diamant » des cartes (ajoutée par mise-en-scene.js, sous-titre.py) ; la ligne
   « Diamant naturel GVS, certifié GIA, non fluorescent » sous les carats est retirée (l'information reste dans « Détails »). */
body :is(.hz-spr__body, .hz-spr__info) > .hz-spr__eyebrow { display: none !important; }
body .hz-spr__info .hz-spr__title { margin-top: 0 !important; }
body .hz-spr__info .hz-spr__pdp-sub {
  margin: 10px 0 0; font: 400 13px/1.5 Montserrat, Arial, Helvetica, sans-serif; letter-spacing: .02em; color: #9a928a;
}
body .hz-spr__stone-note { display: none !important; }
/* 6. (10/11) « Vous aimerez aussi » comme les cartes des onglets : nom, ligne or · pierre, prix, pastilles (aimerez-aussi.py). */
body .hz-spr-layer .hz-spr__also .hz-spr__also-sub {
  display: block; margin-top: 6px; font: 400 12px/1.5 Montserrat, Arial, Helvetica, sans-serif; color: #9a928a;
}
body .hz-spr-layer .hz-spr__also small {
  margin-top: 8px !important; font: 400 14px/1.4 Montserrat, Arial, Helvetica, sans-serif !important; letter-spacing: .5px; color: #242424 !important;
}
body .hz-spr-layer .hz-spr__also .hz-spr__also-sws { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
body .hz-spr-layer .hz-spr__also .hz-spr__sw { display: inline-block; cursor: pointer; padding: 0; border: 0; background: none; position: relative; width: 20px; height: 20px; border-radius: 50%; }
body .hz-spr-layer .hz-spr__also .hz-spr__sw::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--hz-metal, #ddd); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
body .hz-spr-layer .hz-spr__also .hz-spr__sw[aria-pressed="true"]::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 1px solid #b9ada2; }
/* 7. (10/11) Photos de la fiche en vrais carrés : la grande photo prend toute la moitié gauche en carré,
   les deux suivantes deux carrés dessous. Photo carrée dans un cadre carré : rien de coupé, rien de réduit, pas de fond flouté.
   (remplace le « contain + flou » du 10/11 qui donnait un carré dans un rectangle) */
@media (min-width: 1024px) {
  body .hz-spr-layer.is-page .hz-spr__shot--main { aspect-ratio: 1 / 1 !important; height: auto !important; }
  body .hz-spr-layer.is-page .hz-spr__shot--main::before { content: none !important; }
  body .hz-spr-layer.is-page .hz-spr__shot--main img { object-fit: cover !important; -webkit-mask-image: none !important; mask-image: none !important; }
}
/* </fiche-epuree> */

/* <fiche-defile> (10/11) En descendant, la colonne d'informations se fige sous le menu, seules les photos défilent ;
   ensuite tout défile (hauteur réglée par le bloc fiche-defile de mise-en-scene.js). Ordinateur seulement. */
@media (min-width: 1024px) {
  html.hz-spr-bleed, html.hz-spr-bleed body { overflow-x: clip !important; }
  body .hz-spr-layer.is-page .hz-spr__info {
    position: sticky !important; top: calc(var(--wp-admin--admin-bar--height, 0px) + 112px); align-self: start;
  }
}
/* (10/11) Deux photos seulement, en grand, l'une sous l'autre : la bague, puis la bague portée.
   « Détail » et l'encadré de texte retirés sur ordinateur (le téléphone garde son carrousel). */
@media (min-width: 1024px) {
  body .hz-spr-layer.is-page .hz-spr__gallery { grid-template-columns: 1fr !important; }
  body .hz-spr-layer.is-page .hz-spr__shot--detail,
  body .hz-spr-layer.is-page .hz-spr__shot--note { display: none !important; }
  body .hz-spr-layer.is-page .hz-spr__shot { aspect-ratio: 1 / 1 !important; height: auto !important; }
}
/* </fiche-defile> */

/* <joaillerie-photos-origine> (10/11, demande du client) Onglet Joaillerie : les photos d'origine de herzo.fr
   (fond blanc, non retouchées) à la place des versions détourées, jugées moins nettes.
   La photo remplit son cadre : plus de marge, plus d'ombre portée, fond blanc sous la photo. */
body .hz-spr--cut .hz-spr__card:not(.is-plein) .hz-spr__media { background: #fff; }
body .hz-spr--cut .hz-spr__card:not(.is-plein) .hz-spr__media img,
body .hz-spr.hz-spr--cols3.hz-spr--cut .hz-spr__card:not(.is-plein) .hz-spr__media img,
body .hz-spr-layer.hz-spr--cut .hz-spr__shot img,
body .hz-spr .hz-spr__ph.is-cut img,
body .hz-spr-layer .hz-spr__ph.is-cut img,
body .hz-spr-layer .hz-spr__line .hz-spr__ph.is-cut img,
body .hz-spr-layer .hz-spr__vthumb .hz-spr__ph.is-cut img,
body .hz-spr .hz-spr__entry-img.is-cut img,
body .hz-sel-card__img.is-cut img { object-fit: cover; padding: 0; filter: none; }
body .hz-spr-layer.hz-spr--cut .hz-spr__shot,
body .hz-spr .hz-spr__ph.is-cut,
body .hz-spr-layer .hz-spr__ph.is-cut,
body .hz-sel-card__img.is-cut,
body .hz-rch-carte__img.is-cut { background: #fff; }
body .hz-rch-carte__img.is-cut img,
body .hz-rch-carte:hover .hz-rch-carte__img.is-cut img,
body .hz-rch-carte:focus-visible .hz-rch-carte__img.is-cut img { transform: none; -webkit-mask-image: none; mask-image: none; }
/* </joaillerie-photos-origine> */

/* <joaillerie-details> (10/11) fiches de joaillerie : « Sur demande » dans le volet Détails */
body .hz-spr-layer .hz-spr__acc .hz-spr__sur-demande { margin: 0; font: 400 12px/1.5 var(--hz-sans); letter-spacing: .4px; color: var(--hz-ink); }
/* </joaillerie-details> */

/* <police-infos> (10/11, demande du client) Tout ce qui est information pratique — téléphone, adresse, horaires,
   e-mail — s'écrit comme « Taille de doigt » : Montserrat, capitales espacées, chiffres alignés
   (le Cormorant a des chiffres « elzéviriens » : le 7 descend, le 8 monte). */
/* fiches : cases Lyon / Marseille */
body .hz-spr__tel strong { font: 400 13.5px/1.4 var(--hz-sans, Montserrat, Arial, sans-serif) !important; letter-spacing: 2.2px !important; font-variant-numeric: lining-nums tabular-nums; }
body .hz-spr__tel small { font: normal 400 9px/1.5 var(--hz-sans, Montserrat, Arial, sans-serif) !important; letter-spacing: 1.3px !important; text-transform: uppercase; }
@media (max-width: 700px) {
  body .hz-spr__tel strong { font-size: 12px !important; letter-spacing: 1.2px !important; }
  body .hz-spr__tel small { font-size: 8px !important; letter-spacing: .25px !important; white-space: nowrap; }
}
/* page Boutiques et pages Lyon / Marseille */
body .hz-bq__infos dd, body .hz-bq__infos dd a,
body .hz-ville__fiche dd, body .hz-ville__fiche dd a { font: normal 400 11px/1.9 var(--hz-sans, Montserrat, Arial, sans-serif) !important; letter-spacing: 1.8px !important; text-transform: uppercase; font-variant-numeric: lining-nums tabular-nums; }
/* menu « Boutiques » : adresse sous la ville */
body .hz-dd li[data-hz-sub^="joaillerie-"] .hz-dd__d { font: normal 400 9.5px/1.5 var(--hz-sans, Montserrat, Arial, sans-serif) !important; letter-spacing: 1.5px !important; text-transform: uppercase; }
/* pied de page : adresse et téléphone */
body.hz-chrome .hz-footer .hz-footer__shops p,
body.hz-chrome .hz-footer .hz-footer__shops p a,
body .hz-footer__shops p, body .hz-footer__shops p a { font: normal 400 10.5px/1.9 var(--hz-sans, Montserrat, Arial, sans-serif) !important; letter-spacing: 1.8px !important; text-transform: uppercase; font-variant-numeric: lining-nums tabular-nums; }
/* pages Lyon / Marseille : cadre « La boutique » épuré — l'intitulé au-dessus, l'information dessous sur toute la largeur,
   plus de mots orphelins (« Lyon », « et ») renvoyés seuls à la ligne */
body .hz-ville__fiche { padding: 34px 36px 32px; }
body .hz-ville__fiche .hz-ville__h2 { margin-bottom: 26px; }
body .hz-ville__fiche dl { grid-template-columns: 1fr; gap: 0; }
body .hz-ville__fiche dt { font-size: 8.5px; line-height: 1.4; letter-spacing: .24em; color: #a98365; margin: 0 0 5px; }
body .hz-ville__fiche dd { margin: 0 0 20px !important; text-wrap: balance; }
body .hz-ville__fiche dd, body .hz-ville__fiche dd a { font-size: 11px !important; line-height: 1.75 !important; letter-spacing: 1.6px !important; }
body .hz-ville__fiche dd:last-of-type { margin-bottom: 0 !important; }
body .hz-ville__fiche .hz-ville__actions { margin-top: 30px !important; }
@media (max-width: 700px) {
  body .hz-ville__fiche { padding: 26px 22px 24px; }
  body .hz-ville__fiche dd, body .hz-ville__fiche dd a { font-size: 10.5px !important; letter-spacing: 1.3px !important; }
}
/* fiches : valeurs de carat (« 0,20 ct ») dans la même écriture */
body .hz-spr-layer .hz-spr__carat b { font: 400 12.5px/1.3 var(--hz-sans, Montserrat, Arial, sans-serif) !important; letter-spacing: 1.4px !important; text-transform: uppercase; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 700px) { body .hz-spr-layer .hz-spr__carat b { font-size: 11.5px !important; letter-spacing: 1px !important; } }
/* </police-infos> */

/* <ronds-cuivre> (11/11, demande du client sur capture : « en blanc, ça fait pas assez ressortir […] grossis un petit
   peu plus le contact à droite […] mets-le colorimétrie »)
   Les deux ronds flottants — « Nous contacter » (bas droite) et « Cookies » (bas gauche) — passent en cuivre plein,
   dessin blanc, comme le losange « haut de page ». Le contact, l'action principale, est un peu plus grand ; le rond
   cookies garde sa taille et se cale sur le même axe. Au survol, rien ne change : encre, comme avant.
   html body … : passe devant les règles d'origine (bloc <contact-volet> et section 4 ter de herzo-cookies.php).
   Outil : site TEST/outils/ronds-cuivre/poser.py */
html body .hz-ct-btn, html body .hz-cookies-rappel {
  background: var(--site-accent, #c09578); border-color: var(--site-accent, #c09578); color: #fff;
  box-shadow: 0 4px 14px rgba(120, 84, 60, .24);
}
html body .hz-ct-btn svg, html body .hz-cookies-rappel svg { color: #fff; stroke-width: 1.5; }
html body .hz-ct-btn { font-weight: 500; font-size: 10px; }
@media (min-width: 768px) {
  html body .hz-ct-btn { height: 44px; padding: 0 20px 0 16px; gap: 10px; }
  html body .hz-ct-btn svg { width: 19px; height: 19px; }
  html body .hz-cookies-rappel { bottom: 27px; }                 /* même axe que le contact (44 px) */
  html body .hz-totop { bottom: 86px; }                          /* le losange remonte d'autant */
}
@media (max-width: 767px) {
  html body .hz-ct-btn { width: 50px; height: 50px; }
  html body .hz-ct-btn svg { width: 22px; height: 22px; }
  html body .hz-cookies-rappel { bottom: 20px; }                 /* même axe que le contact (50 px) */
  html body .hz-totop { right: 21px; bottom: 80px; }
  html.hz-ct-haut body button.hz-cookies-rappel { bottom: 96px; }
  html.hz-ct-haut body .hz-totop { bottom: 156px; }
}
/* </ronds-cuivre> */

/* <joaillerie-collections> (11/11) Joaillerie. L'onglet : « Nos collections », les quinze aquarelles de l'ancien site,
   chacune vers SA page. La page d'une collection (.hz-col) : retour et collections voisines, ouverture (aquarelle,
   titre, texte), ligne discrète des types, pièces, « Poursuivre la découverte ».
   Balisage : bloc du même nom dans herzo-mise-en-scene.php ; tri par type : fin de mise-en-scene.js. */

/* --- L'onglet --- */
body .hz-spr--jc > .hz-spr__bar,
body .hz-spr--jc > .hz-spr__main { display: none !important; }
body .hz-spr--jc .hz-jc { padding: 30px 0 70px; }
body .hz-spr--jc .hz-jc__tete { margin: 0 0 30px; text-align: center; }
body .hz-jc__sur { margin: 0; font: 400 11px/1 var(--hz-sans, Montserrat, Arial, sans-serif); letter-spacing: 3px; text-transform: uppercase; color: var(--hz-accent, #c09578); }
body .hz-spr--jc .hz-jc__titre { margin: 12px 0 0; font: 400 34px/1.15 var(--hz-serif, "Cormorant Garamond", Georgia, serif); letter-spacing: .2px; color: var(--hz-ink, #242424); }
body .hz-spr--jc .hz-jc__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; max-width: 1360px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }

/* --- La case d'une collection (onglet et bas des pages de collection) --- */
body .hz-jc__case { position: relative; display: block; aspect-ratio: 7 / 4; overflow: hidden; background: #fff; color: #242424; text-decoration: none; -webkit-tap-highlight-color: transparent; }
body .hz-jc__case img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }
body .hz-jc__txt { position: absolute; left: 9%; top: 50%; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: 48%; transform: translateY(-50%); text-align: left; }
body .hz-jc__txt small { font: 400 13px/1 "Cormorant Garamond", Georgia, serif; color: #242424; }
body .hz-jc__txt b { font: 500 29px/1.06 "Cormorant Garamond", Georgia, serif; color: #242424; }
body .hz-jc__voir { margin-top: 6px; padding-bottom: 5px; font: 500 9.5px/1 Montserrat, Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #a97f63; background: linear-gradient(currentColor, currentColor) 0 100% / 22px 1px no-repeat; transition: background-size .5s cubic-bezier(.2, .7, .2, 1); }
body .hz-jc__case:focus-visible { outline: 1px solid #c09578; outline-offset: 3px; }
@media (hover: hover) {
  body .hz-jc__case:hover img { transform: scale(1.035); }
  body .hz-jc__case:hover .hz-jc__voir { background-size: 100% 1px; }
}
@media (hover: none) {
  body .hz-jc__case:active img { transform: scale(.985); transition-duration: .2s; }
}

/* --- L'ouverture d'une collection : l'aquarelle (bijoux de part et d'autre), son titre et son texte au centre --- */
body .hz-jc__intro { display: grid; place-items: center; aspect-ratio: 1920 / 632; margin: 0 0 14px; background: #fff var(--jc-fond) center / cover no-repeat; }
body .hz-jc__intro[hidden] { display: none; }
body .hz-jc__intro-img { display: none; }
body .hz-jc__intro-txt { width: 44%; max-width: 560px; padding: 30px 0; text-align: center; }
body .hz-jc__intro-txt h2,
body .hz-jc__intro-txt h3 { margin: 0 0 18px; font: 400 34px/1.15 "Cormorant Garamond", Georgia, serif; letter-spacing: .2px; text-transform: none; color: #242424; }
body .hz-jc__intro-txt p { margin: 0; font: 400 18.5px/1.55 "Cormorant Garamond", Georgia, serif; color: #4a4540; }
body .hz-jc__intro-txt p.hz-jc__sur { margin: 0 0 14px; font: 400 11px/1 Montserrat, Arial, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #c09578; }
body .hz-jc__intro-txt p.hz-jc__intro-or { margin-top: 22px; font: 500 10px/1.4 Montserrat, Arial, sans-serif; letter-spacing: 2.6px; text-transform: uppercase; color: #a97f63; }

/* --- La page d'une collection --- */
body .hz-col { padding-top: 0; }
body .hz-col__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .hz-col .hz-jc__intro { max-width: 1280px; margin: 0 auto; }
/* retour à l'onglet, collections voisines */
body .hz-col__fil { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 6px; font: 400 10px/1 Montserrat, Arial, sans-serif; letter-spacing: 2.2px; text-transform: uppercase; }
body .hz-col__fil a { display: inline-flex; align-items: center; gap: 9px; padding: 14px 0; color: #242424; transition: color .3s; }
body .hz-col__fil a:hover { color: #a97f63; }
body .hz-col__fil svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; }
body .hz-col__voisines { display: inline-flex; align-items: center; gap: 30px; }
body .hz-col__voisines a { color: #7d756d; }
/* ligne des types */
body .hz-col__types { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 36px; margin: 30px 0 40px; }
body .hz-col:not(.is-pret) .hz-col__types { visibility: hidden; }
body .hz-col__types button { -webkit-appearance: none; appearance: none; margin: 0; padding: 9px 0 8px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; cursor: pointer; font: 400 10.5px/1 Montserrat, Arial, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: #9a928a; transition: color .3s, border-color .3s; }
body .hz-col__types button small { margin-left: 9px; font-size: 9px; letter-spacing: 1px; color: #b9b1a8; }
body .hz-col__types button:hover { color: #242424; }
body .hz-col__types button[aria-pressed="true"] { color: #242424; border-bottom-color: #c09578; }
body .hz-col .hz-sel__head { margin: 30px auto 36px; }
/* pièces : le nom, les pierres, le prix (le nom de la collection n'est pas répété sous chaque photo) */
body .hz-col .hz-sel__grid { gap: 46px 18px; }
body .hz-col .hz-sel__grid > li[hidden] { display: none; }
body .hz-col .hz-sel-card__name { margin-top: 14px; font-size: 20px; }
body .hz-col .hz-sel-card__sub { margin-top: 5px; font: 400 11.5px/1.4 Montserrat, Arial, sans-serif; letter-spacing: .02em; color: #9a928a; }
body .hz-col .hz-sel-card__price { margin-top: 7px; font-size: 12px; color: #242424; }
/* poursuivre la découverte */
body .hz-col__suite { margin: 90px 0 0; padding-top: 58px; border-top: 1px solid #ece6df; text-align: center; }
body .hz-col__suite-titre { margin: 0 0 32px; font: 400 30px/1.2 "Cormorant Garamond", Georgia, serif; color: #242424; }
body .hz-col__suite-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
body .hz-col__suite .hz-sel__back { margin-top: 44px; }

@media (max-width: 1099px) {
  body .hz-spr--jc .hz-jc__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; padding: 0 28px; }
  body .hz-jc__intro-txt { width: 50%; padding: 22px 0; }
  body .hz-jc__intro-txt h2,
  body .hz-jc__intro-txt h3 { margin-bottom: 12px; font-size: 27px; }
  body .hz-jc__intro-txt p { font-size: 16.5px; line-height: 1.5; }
  body .hz-jc__intro-txt p.hz-jc__sur { margin-bottom: 10px; }
  body .hz-jc__intro-txt p.hz-jc__intro-or { margin-top: 14px; }
  body .hz-col__suite-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
  body .hz-col__suite-cases > :nth-child(3) { display: none; }
}
@media (max-width: 767px) {
  body .hz-spr--jc .hz-jc { padding: 20px 0 44px; }
  body .hz-spr--jc .hz-jc__tete { margin-bottom: 18px; }
  body .hz-jc__sur { font-size: 9.5px; letter-spacing: 2.6px; }
  body .hz-spr--jc .hz-jc__titre { margin-top: 9px; font-size: 26px; }
  body .hz-spr--jc .hz-jc__grille { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 16px; }
  body .hz-jc__txt { gap: 6px; }
  body .hz-jc__txt small { font-size: 12px; }
  body .hz-jc__txt b { font-size: 25px; }
  body .hz-jc__voir { margin-top: 4px; font-size: 9px; letter-spacing: 1.8px; }
  body .hz-jc__intro { display: block; aspect-ratio: auto; margin-bottom: 6px; background: none; }
  body .hz-jc__intro-img { display: block; width: 100%; height: auto; }
  body .hz-jc__intro-txt { width: auto; max-width: none; padding: 16px 12px 8px; }
  body .hz-jc__intro-txt h2,
  body .hz-jc__intro-txt h3 { margin-bottom: 10px; font-size: 25px; }
  body .hz-jc__intro-txt p { font-size: 16.5px; line-height: 1.5; }
  body .hz-jc__intro-txt p.hz-jc__sur { font-size: 9.5px; letter-spacing: 2.6px; }
  body .hz-jc__intro-txt p.hz-jc__intro-or { margin-top: 14px; font-size: 9.5px; letter-spacing: 2.2px; }
  body .hz-col__fil { margin-bottom: 2px; font-size: 9px; letter-spacing: 1.8px; }
  body .hz-col__fil a { padding: 12px 0; }
  body .hz-col__voisines { gap: 6px; }
  body .hz-col__voisines a { padding: 12px 8px; }
  body .hz-col__voisines .hz-col__nom { display: none; }
  body .hz-col__voisines svg { width: 18px; height: 18px; }
  body .hz-col__types { gap: 2px 22px; margin: 18px 0 24px; }
  body .hz-col__types button { font-size: 9.5px; letter-spacing: 2px; }
  body .hz-col .hz-sel__head { margin: 18px auto 24px; }
  body .hz-col .hz-sel__grid { gap: 30px 12px; }
  body .hz-col .hz-sel-card__name { margin-top: 10px; font-size: 16.5px; }
  body .hz-col .hz-sel-card__sub { font-size: 10.5px; }
  body .hz-col .hz-sel-card__price { margin-top: 5px; font-size: 11.5px; }
  body .hz-col__suite { margin-top: 56px; padding-top: 40px; }
  body .hz-col__suite-titre { margin-bottom: 20px; font-size: 25px; }
  body .hz-col__suite-cases { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body .hz-col__suite .hz-sel__back { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  body .hz-jc__case img, body .hz-jc__voir { transition: none; }
}
/* </joaillerie-collections> */
/* <rdv-partout> */
/* (11/11/2026) Le volet « Réserver un essayage » sur les pages qui n'ont pas mise-en-scene.css
   (accueil, Boutiques, Lyon, Marseille, La Maison, Conseils, Fêtes…). Mêmes règles que la partie 5 de
   mise-en-scene.css, limitées au calque posé par le bloc <rdv-partout> de herzo-finitions.js
   (:where ne pèse rien : herzo-da.css et herzo-mobile.css passent par-dessus comme sur les pages bijoux).
   Outil : site TEST/outils/rendez-vous-partout/. */
.hz-spr-layer:where(.hz-rdv-seul) {
  --hz-ink: #242424; --hz-text: #5a5a5a; --hz-muted: #9a928a; --hz-line: #ece6df; --hz-accent: #c09578; --hz-accent-dark: #a97f63; --hz-dark: #2a2522;
  --hz-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --hz-sans: "Montserrat", Arial, Helvetica, sans-serif;
  color: var(--hz-text); font: 400 18px/1.5 var(--hz-serif); text-align: left; -webkit-hyphens: manual; hyphens: manual; -webkit-font-smoothing: antialiased;
}
.hz-spr-layer:where(.hz-rdv-seul) *, .hz-spr-layer:where(.hz-rdv-seul) *::before, .hz-spr-layer:where(.hz-rdv-seul) *::after { box-sizing: border-box; }
.hz-spr-layer:where(.hz-rdv-seul) :is(h2, h3, p) { margin: 0; padding: 0; border: 0; background: none; letter-spacing: 0; text-transform: none; }
.hz-spr-layer:where(.hz-rdv-seul) a { text-decoration: none; color: inherit; }
.hz-spr-layer:where(.hz-rdv-seul) button { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; line-height: 1; }
.hz-spr-layer:where(.hz-rdv-seul) svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.hz-spr-layer:where(.hz-rdv-seul) :focus-visible { outline: 1px solid var(--hz-accent); outline-offset: 3px; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border: 1px solid var(--hz-dark);
  background: var(--hz-dark); color: #fff; font: 400 11px/1 var(--hz-sans); letter-spacing: 2.4px; text-transform: uppercase;
  transition: background-color .3s, border-color .3s, color .3s;
}
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__btn:hover { background: var(--hz-accent-dark); border-color: var(--hz-accent-dark); color: #fff; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__btn--line { background: transparent; color: var(--hz-ink); border-color: var(--hz-ink); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__btn--line:hover { background: var(--hz-ink); border-color: var(--hz-ink); color: #fff; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__btn--block { width: 100%; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__backdrop { position: fixed; inset: 0; z-index: 2147483601; background: rgba(42, 37, 34, .28); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147483602; display: flex; flex-direction: column; width: min(480px, 100%);
  background: #fff; transform: translateX(102%); visibility: hidden; transition: transform .55s cubic-bezier(.2, .7, .2, 1), visibility 0s .55s;
}
.hz-spr-layer:where(.hz-rdv-seul).is-drawer .hz-spr__backdrop { opacity: 1; visibility: visible; transition: opacity .4s; }
.hz-spr-layer:where(.hz-rdv-seul).is-drawer .hz-spr__drawer { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__dhead { display: flex; align-items: flex-start; justify-content: space-between; padding: 30px 36px 22px; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__dhead h2 { font: 400 30px/1.1 var(--hz-serif); color: var(--hz-ink); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__dhead p { margin-top: 8px; font: 400 10px/1 var(--hz-sans); letter-spacing: 2.2px; text-transform: uppercase; color: var(--hz-muted); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__x { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--hz-ink); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__x svg { width: 20px; height: 20px; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__dbody { flex: 1; overflow-y: auto; padding: 0 36px; border-top: 1px solid var(--hz-line); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__dfoot { display: grid; gap: 14px; padding: 24px 36px 30px; border-top: 1px solid var(--hz-line); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__dfoot p { font-size: 16px; line-height: 1.4; text-align: center; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__textlink { justify-self: center; font: 400 10px/1 var(--hz-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--hz-ink); text-decoration: underline; text-underline-offset: 4px; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__form { display: grid; gap: 26px; padding: 26px 0 30px; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__flabel { display: block; margin-bottom: 12px; font: 400 10px/1.3 var(--hz-sans); letter-spacing: 2.2px; text-transform: uppercase; color: var(--hz-muted); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__shops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hz-spr-layer:where(.hz-rdv-seul) label.hz-spr__shop { position: relative; display: block !important; margin: 0; padding: 16px 18px; border: 1px solid var(--hz-line); cursor: pointer; transition: border-color .2s; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__shop input, .hz-spr-layer:where(.hz-rdv-seul) .hz-spr__moment input { position: absolute; opacity: 0; pointer-events: none; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__shop b { display: block; font: 400 21px/1.1 var(--hz-serif); color: var(--hz-ink); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__shop span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.35; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__shop:has(input:checked) { border-color: var(--hz-ink); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__shop:has(input:focus-visible) { outline: 1px solid var(--hz-accent); outline-offset: 2px; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__moments { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hz-spr-layer:where(.hz-rdv-seul) label.hz-spr__moment { position: relative; display: inline-block !important; margin: 0; cursor: pointer; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__moment span { font: 400 18px/1.3 var(--hz-serif); color: var(--hz-muted); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__moment input:checked + span { color: var(--hz-ink); text-decoration: underline; text-decoration-color: var(--hz-accent); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__moment input:focus-visible + span { outline: 1px solid var(--hz-accent); outline-offset: 3px; }
.hz-spr-layer:where(.hz-rdv-seul) label.hz-spr__field { display: block !important; margin: 0; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__field input, .hz-spr-layer:where(.hz-rdv-seul) .hz-spr__field textarea {
  width: 100%; margin: 0; padding: 8px 0 10px; border: 0; border-bottom: 1px solid #cfc6bd; border-radius: 0; background: transparent; box-shadow: none;
  font: 400 18px/1.3 var(--hz-serif); color: var(--hz-ink); resize: vertical;
}
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__field input:focus, .hz-spr-layer:where(.hz-rdv-seul) .hz-spr__field textarea:focus { outline: none; border-color: var(--hz-ink); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__done { display: grid; justify-items: center; gap: 14px; padding: 70px 6px; text-align: center; }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__done h3 { font: 400 34px/1.15 var(--hz-serif); color: var(--hz-ink); }
.hz-spr-layer:where(.hz-rdv-seul) .hz-spr__done p { font-size: 18px; }
@media (max-width: 767px) { .hz-spr-layer:where(.hz-rdv-seul) .hz-spr__shops, .hz-spr-layer:where(.hz-rdv-seul) .hz-spr__two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hz-spr-layer:where(.hz-rdv-seul) * { transition-duration: .01ms !important; animation: none !important; } }
body.hz-spr-lock { overflow: hidden; }
/* </rdv-partout> */

/* <rdv-libelles> */
/* (11/11/2026) Formulaire « Réserver un essayage » : chaque libellé (Prénom et nom, Téléphone, E-mail…) est
   rapproché de SA ligne, et les champs sont un peu plus écartés entre eux : on voit tout de suite quel
   libellé va avec quelle ligne. Avant, le libellé était plus près de la ligne du dessus que de la sienne.
   Vaut pour toutes les pages (pages bijoux et volet <rdv-partout>). Outil : site TEST/outils/rendez-vous-partout/. */
body .hz-spr-layer .hz-spr__form { gap: 30px !important; }
body .hz-spr-layer .hz-spr__two { gap: 30px 22px !important; }
body .hz-spr-layer label.hz-spr__field { margin-top: 10px !important; }
body .hz-spr-layer .hz-spr__field .hz-spr__flabel { margin-bottom: 0 !important; }
body .hz-spr-layer .hz-spr__field input, body .hz-spr-layer .hz-spr__field textarea { padding: 2px 0 7px !important; line-height: 1.2 !important; }
body .hz-spr-layer .hz-spr__field textarea { padding-top: 4px !important; }
@media (max-width: 767px) {
  body .hz-spr-layer .hz-spr__form { gap: 28px !important; }
  body .hz-spr-layer .hz-spr__two { gap: 28px !important; }
  body .hz-spr-layer .hz-spr__field input, body .hz-spr-layer .hz-spr__field textarea { padding: 1px 0 6px !important; }
  body .hz-spr-layer .hz-spr__field textarea { padding-top: 4px !important; }
}
/* </rdv-libelles> */

/* <rdv-libelles-fonces> */
/* (11/11/2026) Formulaire de rendez-vous : les libellés (La boutique, Votre moment, Prénom et nom, Téléphone,
   E-mail, Un mot pour nous) passent du gris pâle #9a928a en 400 à l'encre en 500 : « pas assez foncé ».
   Toutes les pages, téléphone et ordinateur. Outil : site TEST/outils/rdv-titre-libelles/. */
body .hz-spr-layer .hz-spr__flabel { color: #242424 !important; font-weight: 500 !important; }
/* </rdv-libelles-fonces> */

/* <pied-accueil-seulement> (12/11, demande du client : « la partie avec les deux dessins de boutiques avec le logo en
   bas, ça alourdit les pages, en plus ça revient sur toutes les pages… le laisser que sur la page d'accueil…
   enlève donc les photos mais laisse les boutiques ») : hors de l'accueil, le pied de page garde Lyon et Marseille
   (ville, adresse, téléphone) côte à côte, sans les deux dessins ni le logo. L'accueil ne change pas.
   Outil : site TEST/outils/retouches-12-11/poser.py */
body:not(:has(.hz-home)) .hz-footer .hz-footer__dessin,
body:not(:has(.hz-home)) .hz-footer .hz-footer__logo { display: none !important; }
@media (min-width: 768px) {
  body.hz-chrome:not(:has(.hz-home)) .hz-footer .hz-footer__shops {
    grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: clamp(40px, 8vw, 120px) !important;
  }
}
/* </pied-accueil-seulement> */

/* <alliances-photo-entiere> (12/11, demande du client : « la photo qui est plus grande dans la page Alliances n'est pas
   de bonne qualité en aussi grand, est-ce qu'on peut mettre la photo de base qui n'est pas aussi zoomée ? ») :
   sur ordinateur, la grande case des pages Alliances montre la photo ENTIÈRE, dans son format carré d'origine, sans
   l'agrandir ni la recadrer (avant : rognée en hauteur et grossie de 25 %). Le texte passe sous la photo, à l'encre.
   Tablette et téléphone : la case était déjà presque carrée, rien ne change.
   Outil : site TEST/outils/retouches-12-11/poser.py */
@media (min-width: 1024px) {
  body .hz-spr .hz-spr__edito--big { display: flex; flex-direction: column; background: var(--hz-cream, #f6f1ec); }
  body .hz-spr .hz-spr__edito--big > img {
    position: static; inset: auto; flex: none; display: block;
    width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  }
  body .hz-spr .hz-spr__edito--big::after { content: none; }
  body .hz-spr .hz-spr__edito--big .hz-spr__edito-cap {
    position: static; flex: 1 1 auto; align-items: center; justify-content: center; gap: 14px;
    padding: 26px 44px; text-align: center; color: var(--hz-ink, #242424);
  }
  body .hz-spr .hz-spr__edito--big .hz-spr__edito-cap small { color: var(--hz-accent, #c09578); }
  body .hz-spr .hz-spr__edito--big .hz-spr__edito-cap b { color: var(--hz-ink, #242424); }
  body .hz-spr .hz-spr__edito--big .hz-spr__link { color: var(--hz-ink, #242424); margin-top: 2px; }
  body .hz-spr .hz-spr__edito--big:hover > img { transform: none; }
}
/* </alliances-photo-entiere> */