/* =====================================================================
   BOUTIQUES — page générale (08/11/2026), agencée comme la maquette donnée par la Maison
   (« Nos points de vente · Deux adresses pour vous rencontrer », deux cartes, grand bandeau photo,
   « L'expérience en boutique »), aux couleurs du site : Cormorant Garamond, Montserrat, cuivre #c09578.
   Chaque carte (photo, nom de la ville, bouton) mène à la page de sa boutique (/joaillerie-lyon/, /joaillerie-marseille/).
   Les avis clients restent en bas de page.
   ===================================================================== */
.hz-simple--boutiques { max-width: none !important; padding: 0 0 clamp(60px, 7vw, 100px) !important; }
.hz-bq {
  --bq-ink: #242424;
  --bq-grey: #5a5a5a;
  --bq-mute: #a09a92;
  --bq-cuivre: #c09578;
  --bq-cream: #f6f1ec;
  --bq-line: #e6ddd4;
  --bq-title: "Montserrat", Arial, Helvetica, sans-serif;
  --bq-text: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color: var(--bq-grey);
  font: 400 19px/1.75 var(--bq-text);
}
.hz-bq *, .hz-bq *::before, .hz-bq *::after { box-sizing: border-box; }
.hz-bq img { display: block; max-width: 100%; height: auto; }
.hz-bq figure { margin: 0; }
.hz-bq p { margin: 0; hyphens: manual; -webkit-hyphens: manual; }
.hz-bq a { text-decoration: none; color: inherit; }
.hz-bq__wrap { width: min(1180px, 100% - 48px); margin: 0 auto; }

/* ---------- Petites capitales cuivre (surtitres, repères) ---------- */
.hz-bq .hz-bq__surtitre,
.hz-bq .hz-bq__repere {
  font: 400 10.5px/1.6 var(--bq-title); letter-spacing: .34em; text-transform: uppercase;
  color: var(--bq-cuivre);
}

/* ---------- En-tête de la page ---------- */
.hz-bq__tete { text-align: center; padding: clamp(28px, 3.6vw, 52px) 0 0; }
.hz-bq .hz-bq__titre {
  margin: 16px 0 0; font: 500 clamp(30px, 3.6vw, 44px)/1.2 var(--bq-text);
  letter-spacing: .01em; text-transform: none; color: var(--bq-ink);
}
.hz-bq .hz-bq__intro { max-width: 600px; margin: 16px auto 0; font-size: 19px; line-height: 1.7; color: var(--bq-grey); }

/* ---------- Les deux boutiques ---------- */
.hz-bq__duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); margin-top: 0; }
.hz-bq__carte { display: flex; flex-direction: column; border: 1px solid var(--bq-line); background: #fff; }
.hz-bq__photo { display: block; overflow: hidden; background: var(--bq-cream); }
.hz-bq .hz-bq__photo img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--bq-cadre, 50% 50%);
  transition: transform .9s cubic-bezier(.2,.6,.2,1);
}
.hz-bq__carte:hover .hz-bq__photo img { transform: scale(1.04); }
.hz-bq__corps { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.6vw, 34px); }
.hz-bq .hz-bq__repere { letter-spacing: .28em; font-size: 10px; }
.hz-bq .hz-bq__ville {
  margin: 10px 0 0; font: 500 clamp(28px, 2.4vw, 34px)/1.15 var(--bq-text);
  letter-spacing: .01em; text-transform: none; color: var(--bq-ink);
}
.hz-bq .hz-bq__ville a { transition: color .3s; }
.hz-bq .hz-bq__ville a:hover { color: var(--bq-cuivre); }
.hz-bq .hz-bq__texte { margin-top: 12px; font-size: 18px; line-height: 1.7; color: var(--bq-grey); }

.hz-bq__infos { margin: 24px 0 0; border-top: 1px solid var(--bq-line); }
.hz-bq__infos > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 11px 2px; border-bottom: 1px solid var(--bq-line); }
.hz-bq__infos dt {
  flex: none; font: 400 10.5px/1.5 var(--bq-title); letter-spacing: .2em; text-transform: uppercase; color: var(--bq-mute);
}
.hz-bq__infos dd { margin: 0; text-align: right; font: 400 17px/1.45 var(--bq-text); color: var(--bq-ink); }
.hz-bq__infos dd a { border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.hz-bq__infos dd a:hover { color: var(--bq-cuivre); border-bottom-color: var(--bq-cuivre); }

.hz-bq__actions { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hz-bq .hz-bq__bouton {
  display: inline-block; padding: 15px 30px; border: 1px solid var(--bq-ink); color: var(--bq-ink);
  font: 400 10.5px/1 var(--bq-title); letter-spacing: .24em; text-transform: uppercase;
  transition: background .35s, color .35s;
}
.hz-bq .hz-bq__bouton:hover { background: var(--bq-ink); color: #fff; }
.hz-bq .hz-bq__lien {
  font: 400 10.5px/1 var(--bq-title); letter-spacing: .24em; text-transform: uppercase; color: var(--bq-ink);
  border-bottom: 1px solid var(--bq-line); padding-bottom: 5px; transition: color .3s, border-color .3s;
}
.hz-bq .hz-bq__lien:hover { color: var(--bq-cuivre); border-bottom-color: var(--bq-cuivre); }

/* ---------- L'expérience en boutique : grand bandeau photo, bord à bord ---------- */
.hz-bq__experience { margin-top: clamp(80px, 9vw, 130px); }
.hz-bq__bandeau { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: var(--bq-cream); }
.hz-bq .hz-bq__bandeau img { width: 100%; height: clamp(300px, 42vw, 580px); object-fit: cover; object-position: var(--bq-cadre, 50% 50%); }
.hz-bq__experience-texte { text-align: center; padding: clamp(40px, 4.6vw, 56px) 0 0; }

/* ---------- Avis clients, sous la page ---------- */
.hz-simple--boutiques .hz-avis { width: min(1180px, 100% - 48px); margin: clamp(70px, 8vw, 110px) auto 0; }
.hz-simple--boutiques .hz-avis__title {
  font: 500 clamp(28px, 3vw, 38px)/1.2 "Cormorant Garamond", Georgia, serif !important;
  letter-spacing: .01em !important; text-transform: none !important; color: #242424;
}
.hz-simple--boutiques .hz-avis__eyebrow {
  font: 400 10.5px/1.6 "Montserrat", Arial, sans-serif; letter-spacing: .34em; text-transform: uppercase; color: #c09578;
}

/* ---------- Apparition douce au défilement (seulement si le script tourne) ---------- */
.hz-bq-anime .hz-bq__rev { opacity: 0; transform: translateY(18px); transition: opacity .85s ease, transform .85s ease; }
.hz-bq-anime .hz-bq__rev.is-vu { opacity: 1; transform: none; }
.hz-bq-anime .hz-bq__duo .hz-bq__rev:nth-child(2) { transition-delay: .12s; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 900px) {
  .hz-bq__duo { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 700px) {
  .hz-bq { font-size: 18px; }
  .hz-bq__wrap, .hz-simple--boutiques .hz-avis { width: calc(100% - 40px); }
  .hz-bq__tete { padding-top: 22px; }
  .hz-bq .hz-bq__surtitre { letter-spacing: .26em; }
  .hz-bq .hz-bq__intro { font-size: 18px; }
  .hz-bq__infos > div { flex-direction: column; gap: 2px; }
  .hz-bq__infos dd { text-align: left; }
  .hz-bq__actions { gap: 20px; }
  .hz-bq .hz-bq__bandeau img { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .hz-bq-anime .hz-bq__rev { opacity: 1; transform: none; transition: none; }
  .hz-bq .hz-bq__photo img { transition: none; }
}

/* <boutiques-epure> (10/11, demande du client : épurer les fiches des deux boutiques, en gardant Lyon et Marseille
   côte à côte dans leur cadre — la mise en page « une boutique par ligne » a été refusée).
   Retirés : la phrase de présentation et le repère. (La ligne « Joaillerie Romain Herzo » ajoutée au-dessus de la
   ville a été retirée à la demande du client : « enlève ça ».)
   Outil : site TEST/outils/boutiques-epure/poser.py */
.hz-bq :is(.hz-bq__texte, .hz-bq__repere) { display: none !important; }
.hz-bq .hz-bq__ville { margin: 0 !important; }
.hz-bq .hz-bq__infos { margin-top: 26px !important; }
/* </boutiques-epure> */

/* <boutiques-sans-titre> (11/11, demande du client : retirer seulement le titre « Un lieu pour prendre le temps de
   regarder » sous la photo, garder « L'expérience en boutique » et les avis, et faire remonter « Ils nous ont fait
   confiance » pour qu'il n'y ait pas de vide). Le surtitre « L'expérience en boutique » coiffe désormais les avis :
   plus de filet ni de grand blanc entre les deux, et le petit surtitre propre aux avis (vide) ne prend plus de place.
   Outil : site TEST/outils/textes-lyon/poser.py */
.hz-simple--boutiques .hz-avis { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.hz-simple--boutiques .hz-avis__eyebrow { display: none !important; }
.hz-simple--boutiques .hz-avis__title { margin-top: 16px !important; }
/* </boutiques-sans-titre> */

/* <boutiques-sans-bandeau> (12/11, demande du client : « la photo allongée dans l'onglet boutique, c'était juste un
   test, ça ne va pas du tout, ça fait IA à fond ») : la photo « les roses » est retirée de la page ; le surtitre
   « L'expérience en boutique » et les avis suivent directement les deux boutiques.
   Outil : site TEST/outils/retouches-12-11/poser.py */
.hz-simple--boutiques .hz-bq__experience { margin-top: clamp(64px, 7vw, 100px); }
.hz-simple--boutiques .hz-bq__experience-texte { padding-top: 0; }
/* </boutiques-sans-bandeau> */