/* ── Beginner guide (2026-10-12): "Zenoa en 3 étapes" card + "Découvrir les
   soins" carousel on Accueil, and the /soins page. Same card language as
   Accueil and the news (white cards, gold diamond, green). Markup: js/soins.js. */

/* 3 steps */
.sg-steps { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #e4e6e3; }
.sg-steps-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tab-page .sg-steps-top h2 { margin: 0; font-size: 16px; color: #2e3235; }
.sg-close { flex: none; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: #5f6467; cursor: pointer; }
.sg-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sg-step { display: flex; gap: 12px; align-items: flex-start; }
.sg-step { align-items: center; gap: 14px; }
.sg-pic {
  flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #dce4da;
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px #d5ddd2; display: flex; align-items: center; justify-content: center;
}
.sg-pic svg { width: 100%; height: 100%; display: block; }
.sg-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-step p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-step b { font-size: 14px; color: #2e3235; }
.sg-step p span { font-size: 13px; line-height: 1.45; color: #5f6467; }
#home-guide.hidden { display: none; }

/* Accueil carousel */
.sg-car { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 4px; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; }
.sg-car::-webkit-scrollbar { display: none; }
.sg-tile {
  flex: none; width: 150px; display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start;
  border-radius: 16px; background: #fff; border: 1px solid #e4e6e3; text-decoration: none; color: inherit;
}
.sg-tile img { display: block; width: 100%; height: 78px; object-fit: cover; background: var(--z-primary); }
.sg-tile > span { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.sg-tile b { font-size: 14px; color: #2e3235; }
.sg-tile > span > span { font-size: 12px; line-height: 1.35; color: #5f6467; }

/* /soins */
.sg-page #soins-steps:empty { display: none; }
.sg-list { display: flex; flex-direction: column; gap: 12px; }
.sg-card { overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid #e4e6e3; scroll-margin-top: 16px; }
.sg-card.is-target { border-color: #b8975a; box-shadow: 0 0 0 3px #b8975a33; }
.sg-card > img { display: block; width: 100%; height: 104px; object-fit: cover; background: var(--z-primary); }
.sg-card-b { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.sg-fam { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--z-primary); }
.sg-fam::before { content: ''; width: 6px; height: 6px; background: #b8975a; transform: rotate(45deg); }
.tab-page .sg-card-b h2 { margin: 0; font-size: 18px; color: #2e3235; }
.sg-card-b > p { margin: 0; font-size: 14px; line-height: 1.5; color: #2e3235; }
.sg-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 2px 0 0; font-size: 13px; line-height: 1.45; }
.sg-dl dt { color: #5f6467; font-weight: 600; }
.sg-dl dd { margin: 0; color: #2e3235; }
.sg-styles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sg-styles b { color: var(--z-primary); }
.sg-cta {
  align-self: flex-start; margin-top: 4px; padding: 9px 16px; border-radius: 999px;
  background: var(--z-primary); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
}