/* =====================================================================
   CONSEILS — sous la vidéo, version 3.1 (12/11/2026)
   v3 : « la vidéo est bien, mais après tout fait très IA » → plus de cartes beiges, d'icônes, de numéros,
   d'anneaux dessinés ni de calculette ; grandes photos en alternance.
   v3.1 : « refais les couleurs / la police ; l'agencement c'est plutôt bien pour les photos mais c'est trop
   laborieux niveau aération ; fais dans la continuité, raffiné et élégant » (capture de la fiche Alliance
   Éternelle à côté). On reprend donc les réglages EXACTS de la fiche bijou (hz-spr__info) :
     surtitre    Montserrat 10 px, capitales espacées 2,4 px, taupe #9a928a   (« ALLIANCE FEMME »)
     titre       Montserrat 300, minuscules, encre #242424                     (« Alliance Éternelle »)
     intitulé    Montserrat 10–10,5 px, capitales espacées 2,2 px, encre        (« OR », « DÉTAILS »)
     texte       Cormorant Garamond 18 px / 27 px, gris #5a5a5a                (« Description »)
     précision   Montserrat 12–13 px, taupe                                    (« Or blanc »)
     filets      #ece6df ; bouton plein #2a2522, Montserrat 11 px espacé 2,4 px
   Plus de cuivre sur la page (il reste celui de l'onglet actif du menu). Interlignes et écarts resserrés.
   ===================================================================== */
.hz-simple .hz-cs3 {
  --cs-ink: #242424;
  --cs-grey: #5a5a5a;
  --cs-taupe: #9a928a;
  --cs-line: #ece6df;
  --cs-btn: #2a2522;
  --cs-title: "Montserrat", Arial, Helvetica, sans-serif;
  --cs-text: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* le bloc sort de la colonne de 1180 px, comme la vidéo */
  width: 100vw; width: 100dvw;
  margin-left: calc(50% - 50vw); margin-left: calc(50% - 50dvw);
  padding: 0 0 clamp(10px, 2vw, 30px);
  color: var(--cs-grey);
  font: 400 18px/1.5 var(--cs-text);
}
.hz-simple .hz-cs3 *, .hz-simple .hz-cs3 *::before, .hz-simple .hz-cs3 *::after { box-sizing: border-box; }
.hz-simple .hz-cs3 figure { margin: 0; }
.hz-simple .hz-cs3 img { display: block; max-width: 100%; height: auto; }
.hz-simple .hz-cs3 p, .hz-simple .hz-cs3 dd, .hz-simple .hz-cs3 li { hyphens: manual; -webkit-hyphens: manual; }

/* ---------- Surtitre, titre, texte (ceux de la fiche) ---------- */
.hz-simple .hz-cs3 .hz-cs3__surtitre {
  margin: 0 0 12px;
  font: 400 10px/1.4 var(--cs-title); letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--cs-taupe);
}
.hz-simple .hz-cs3 .hz-cs3__titre {
  margin: 0;
  font: 300 clamp(26px, 2.4vw, 34px)/1.2 var(--cs-title);
  letter-spacing: .01em; text-transform: none;
  color: var(--cs-ink);
  text-wrap: balance;
}
.hz-simple .hz-cs3 .hz-cs3__texte {
  margin: 18px 0 0;
  font: 400 18px/27px var(--cs-text);
  color: var(--cs-grey);
}
.hz-simple .hz-cs3 .hz-cs3__titre + .hz-cs3__texte { margin-top: 22px; }

/* ---------- Sous la vidéo : une phrase et les quatre chapitres ---------- */
.hz-simple .hz-cs3 .hz-cs3__chapeau {
  width: min(720px, 100% - 48px);
  margin: clamp(4px, 1vw, 16px) auto 0;
  text-align: center;
}
.hz-simple .hz-cs3 .hz-cs3__intro {
  margin: 0;
  font: 400 clamp(19px, 1.5vw, 21px)/1.5 var(--cs-text);
  color: var(--cs-grey);
}
.hz-simple .hz-cs3 .hz-cs3__sommaire {
  margin: 24px 0 0;
  font: 500 10px/1.6 var(--cs-title); letter-spacing: 2px; text-transform: uppercase;
}
.hz-simple .hz-cs3 .hz-cs3__sommaire a {
  color: var(--cs-ink); text-decoration: none;
  border-bottom: 1px solid var(--cs-line); padding-bottom: 3px;
  transition: border-color .3s;
}
.hz-simple .hz-cs3 .hz-cs3__sommaire a:hover { border-bottom-color: var(--cs-ink); }
.hz-simple .hz-cs3 .hz-cs3__sommaire span { margin: 0 14px; color: var(--cs-taupe); }

/* ---------- Une grande photo d'un côté, le texte de l'autre ---------- */
.hz-simple .hz-cs3 .hz-cs3__duo {
  display: grid;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  width: min(1180px, 100% - 48px);
  margin: clamp(64px, 7vw, 104px) auto 0;
  scroll-margin-top: 110px;
}
.hz-simple .hz-cs3 .hz-cs3__duo--photo-droite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hz-simple .hz-cs3 .hz-cs3__duo--photo-gauche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hz-simple .hz-cs3 .hz-cs3__photo { overflow: hidden; }
.hz-simple .hz-cs3 .hz-cs3__photo img {
  width: 100%; aspect-ratio: var(--cs-ratio, 4 / 5); object-fit: cover;
  object-position: var(--cs-cadre, 50% 50%);
}
.hz-simple .hz-cs3 .hz-cs3__recit { max-width: 500px; width: 100%; text-align: left; }
.hz-simple .hz-cs3 .hz-cs3__duo--photo-droite .hz-cs3__recit { justify-self: start; }
.hz-simple .hz-cs3 .hz-cs3__duo--photo-gauche .hz-cs3__recit { justify-self: end; }

/* Intitulé + texte, séparés par des filets (comme Détails / Description de la fiche) */
.hz-simple .hz-cs3 .hz-cs3__liste { margin: 26px 0 0; padding: 0; }
.hz-simple .hz-cs3 .hz-cs3__liste div { margin: 0; padding: 16px 0; border-top: 1px solid var(--cs-line); }
.hz-simple .hz-cs3 .hz-cs3__liste div:last-child { border-bottom: 1px solid var(--cs-line); }
.hz-simple .hz-cs3 .hz-cs3__liste dt {
  margin: 0 0 5px;
  font: 500 10px/1.4 var(--cs-title); letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--cs-ink);
}
.hz-simple .hz-cs3 .hz-cs3__liste dt em { font-style: normal; }
.hz-simple .hz-cs3 .hz-cs3__liste dd {
  margin: 0;
  font: 400 18px/27px var(--cs-text);
  color: var(--cs-grey);
}
.hz-simple .hz-cs3 .hz-cs3__note {
  margin: 18px 0 0;
  font: 400 12.5px/1.65 var(--cs-title); letter-spacing: .01em;
  color: var(--cs-taupe);
}

/* ---------- Bien ajuster : centré, quatre repères de taille ---------- */
.hz-simple .hz-cs3 .hz-cs3__centre {
  width: min(820px, 100% - 48px);
  margin: clamp(72px, 8vw, 116px) auto 0;
  text-align: center;
  scroll-margin-top: 110px;
}
.hz-simple .hz-cs3 .hz-cs3__centre .hz-cs3__texte { max-width: 620px; margin-left: auto; margin-right: auto; }
.hz-simple .hz-cs3 .hz-cs3__tailles {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 34px 0 0; padding: 22px 0;
  border-top: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line);
}
.hz-simple .hz-cs3 .hz-cs3__tailles li {
  margin: 0; padding: 4px 8px;
  border-left: 1px solid var(--cs-line);
  display: flex; flex-direction: column; align-items: center;
}
.hz-simple .hz-cs3 .hz-cs3__tailles li:first-child { border-left: 0; }
.hz-simple .hz-cs3 .hz-cs3__taille {
  font: 300 clamp(28px, 2.4vw, 34px)/1 var(--cs-title); letter-spacing: .02em;
  color: var(--cs-ink);
}
.hz-simple .hz-cs3 .hz-cs3__diametre {
  margin-top: 12px;
  font: 500 10px/1.4 var(--cs-title); letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--cs-ink); white-space: nowrap;
}
.hz-simple .hz-cs3 .hz-cs3__mention {
  margin-top: 6px; min-height: 1.5em;
  font: 400 12px/1.5 var(--cs-title);
  color: var(--cs-taupe);
}
.hz-simple .hz-cs3 .hz-cs3__astuce {
  max-width: 620px; margin: 22px auto 0;
  font: 400 17px/26px var(--cs-text);
  color: var(--cs-grey);
}
.hz-simple .hz-cs3 .hz-cs3__astuce u { text-decoration: none; color: var(--cs-ink); }

/* ---------- Au quotidien : le titre à gauche (il accompagne la liste), les gestes à droite ---------- */
.hz-simple .hz-cs3 .hz-cs3__soin {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(40px, 6vw, 100px); align-items: start;
  width: min(1080px, 100% - 48px);
  margin: clamp(72px, 8vw, 116px) auto 0;
  scroll-margin-top: 110px;
}
.hz-simple .hz-cs3 .hz-cs3__soin .hz-cs3__tete { position: sticky; top: 130px; }
.hz-simple .hz-cs3 .hz-cs3__soin .hz-cs3__liste { margin-top: 0; }
.hz-simple .hz-cs3 .hz-cs3__soin .hz-cs3__liste div:first-child { border-top: 0; padding-top: 0; }

/* ---------- L'art d'offrir : le bouton plein de la fiche ---------- */
.hz-simple .hz-cs3 .hz-cs3__action { margin: 30px 0 0; }
.hz-simple .hz-cs3 a.hz-cs2__btn {
  display: inline-block; padding: 18px 34px;
  background: var(--cs-btn); border: 1px solid var(--cs-btn); border-radius: 0;
  color: #fff !important; text-decoration: none;
  font: 400 11px/1 var(--cs-title); letter-spacing: 2.4px; text-transform: uppercase;
  transition: background .35s, color .35s;
}
.hz-simple .hz-cs3 a.hz-cs2__btn:hover { background: transparent; color: var(--cs-btn) !important; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 860px) {
  .hz-simple .hz-cs3 .hz-cs3__duo--photo-droite,
  .hz-simple .hz-cs3 .hz-cs3__duo--photo-gauche { grid-template-columns: 1fr; gap: 28px; margin-top: 60px; }
  .hz-simple .hz-cs3 .hz-cs3__photo { order: -1; }
  .hz-simple .hz-cs3 .hz-cs3__duo .hz-cs3__recit { justify-self: center; max-width: 600px; }
  .hz-simple .hz-cs3 .hz-cs3__soin { grid-template-columns: 1fr; gap: 22px; margin-top: 64px; }
  .hz-simple .hz-cs3 .hz-cs3__soin .hz-cs3__tete { position: static; }
  .hz-simple .hz-cs3 .hz-cs3__centre { margin-top: 64px; }
}
@media (max-width: 700px) {
  .hz-simple .hz-cs3 .hz-cs3__titre { font-size: 26px; }
  .hz-simple .hz-cs3 .hz-cs3__intro { font-size: 19px; }
  .hz-simple .hz-cs3 .hz-cs3__sommaire { margin-top: 18px; line-height: 2.4; }
  .hz-simple .hz-cs3 .hz-cs3__sommaire a { display: inline-block; line-height: 1.6; }
  .hz-simple .hz-cs3 .hz-cs3__sommaire span { margin: 0 8px; }
  .hz-simple .hz-cs3 .hz-cs3__duo--photo-droite,
  .hz-simple .hz-cs3 .hz-cs3__duo--photo-gauche { width: 100%; gap: 24px; }
  .hz-simple .hz-cs3 .hz-cs3__duo .hz-cs3__recit { padding: 0 20px; }
  .hz-simple .hz-cs3 .hz-cs3__photo img { aspect-ratio: var(--cs-ratio-tel, 1 / 1); }
  .hz-simple .hz-cs3 .hz-cs3__centre,
  .hz-simple .hz-cs3 .hz-cs3__soin { width: calc(100% - 40px); }
  .hz-simple .hz-cs3 .hz-cs3__tailles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .hz-simple .hz-cs3 .hz-cs3__tailles li:nth-child(3) { border-left: 0; }
  .hz-simple .hz-cs3 .hz-cs3__action { text-align: center; }
  .hz-simple .hz-cs3 a.hz-cs2__btn { display: block; width: 100%; padding: 17px 16px; text-align: center; letter-spacing: 2px; line-height: 1.5; }
}