/* =========================================================
   PRETTIEST - page Beauté (maquette)
   Visuels produits dessinés en SVG en attendant les photos
   ========================================================= */

.beauty-hero {
  padding: calc(var(--nav-h) + clamp(24px, 4vw, 56px)) 0 clamp(40px, 6vw, 80px);
}
.beauty-hero__grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 64px); align-items: center;
}
.beauty-hero__text { display: flex; flex-direction: column; gap: 22px; }
.beauty-hero__text .eyebrow a { border-bottom: 1px solid currentColor; }
.beauty-hero__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(44px, 6.4vw, 92px); line-height: .95; letter-spacing: -.01em;
}
.beauty-hero__title em { font-style: italic; color: var(--rose); }
.beauty-hero__lead { max-width: 30em; letter-spacing: .03em; color: #4a3d35; }
.beauty-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.beauty-hero__visual {
  position: relative; aspect-ratio: 5 / 4;
  background: linear-gradient(160deg, #f4e4dc 0%, #ead2c6 55%, #dcb9a9 100%);
  overflow: hidden;
}
.beauty-hero__visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.beauty-hero__stamp {
  position: absolute; left: 18px; top: 18px;
  padding: 10px 14px; background: var(--white);
  font-size: var(--text-caption); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Partenaire Lina Beauty ---------- */
.lina { padding: clamp(48px, 6vw, 88px) 0; }
.lina__inner { display: grid; grid-template-columns: minmax(220px, .8fr) 1.6fr; border: 1px solid var(--charcoal); }
.lina__brand {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: clamp(24px, 4vw, 48px); background: var(--charcoal); color: var(--white);
}
.lina__with { font-size: var(--text-caption); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.lina__with span { color: #e8b4a4; margin-left: 4px; }
.lina__logo { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(44px, 5vw, 68px); line-height: .9; color: #e8b4a4; }
.lina__logo span { display: block; }
.lina__since { font-size: var(--text-caption); letter-spacing: .14em; text-transform: uppercase; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 10px; margin-top: 6px; align-self: flex-start; }
.lina__text { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 4vw, 48px); background: #f7eee8; }
.lina__text .eyebrow { color: var(--rose); }
.lina__lead { letter-spacing: .03em; color: #4a3d35; max-width: 38em; }
.lina__points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 6px 0; }
.lina__points li { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--charcoal); padding-top: 10px; font-size: var(--text-small); letter-spacing: .03em; color: #4a3d35; }
.lina__points b { font-size: var(--text-caption); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--black); }
.lina__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.lina__social { font-size: var(--text-small); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Titres de section ---------- */
.beauty-sec-title { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; }

/* ---------- Grille produits ---------- */
.beauty-shop { padding: clamp(36px, 5vw, 56px) 0 clamp(64px, 8vw, 110px); }
.beauty-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 18px; }
.bcard { display: flex; flex-direction: column; }
.bcard__media { position: relative; aspect-ratio: 4 / 5; background: var(--bg, #f4ebe5); overflow: hidden; }
.bcard__media svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.1s var(--ease-out); }
.bcard:hover .bcard__media svg { transform: scale(1.05); }
.bcard__tag {
  position: absolute; left: 10px; top: 10px; z-index: 1; padding: 4px 9px; background: var(--white);
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.bcard__tag--rose { background: var(--rose); color: var(--white); }
.bcard__fav {
  position: absolute; right: 8px; top: 8px; z-index: 1; width: 34px; height: 34px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .85);
}
.bcard__fav svg { position: static; width: 17px; height: 17px; fill: none; stroke: var(--black); stroke-width: 1.6; }
.bcard__add {
  position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 40px; height: 40px;
  display: grid; place-items: center; background: var(--white); font-size: 22px; line-height: 1;
  transition: background .3s, color .3s, transform .4s var(--ease-out);
}
.bcard__add:hover { background: var(--charcoal); color: var(--white); transform: rotate(90deg); }
.bcard__info { padding-top: 14px; display: flex; flex-direction: column; gap: 3px; }
.bcard__brand { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.bcard__name { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.15; }
.bcard__meta { font-size: var(--text-caption); letter-spacing: .06em; color: #6d6560; }
.bcard__row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 10px; }
.bcard__price { font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.bcard__price s { color: #9a8f88; font-weight: 400; margin-left: 6px; font-size: 12.5px; }
.swatches { display: flex; gap: 5px; align-items: center; }
.swatches i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.swatches i:first-child { outline: 1px solid var(--black); outline-offset: 2px; }
.swatches b { font-size: 11px; font-weight: 500; color: #6d6560; margin-left: 2px; }
.stars { font-size: 11.5px; letter-spacing: .08em; color: #6d6560; }
.stars span { color: var(--rose); letter-spacing: 1px; }

/* ---------- Coffrets ---------- */
.beauty-kits { background: var(--charcoal); color: var(--white); padding: clamp(64px, 8vw, 120px) 0; }
.beauty-kits .eyebrow { color: #e8b4a4; }
.beauty-kits__head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-bottom: 40px; }
.beauty-kits__head p { color: rgba(255, 255, 255, .7); letter-spacing: .03em; max-width: 30em; justify-self: end; }
.beauty-kits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kit { display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .18); }
.kit__media { position: relative; aspect-ratio: 16 / 10; background: var(--bg); overflow: hidden; }
.kit__media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kit__save { position: absolute; left: 12px; top: 12px; padding: 5px 10px; background: #e8b4a4; color: var(--charcoal); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.kit__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kit__name { font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.05; }
.kit__list { list-style: none; font-size: var(--text-small); letter-spacing: .04em; color: rgba(255, 255, 255, .72); }
.kit__list li::before { content: "— "; color: #e8b4a4; }
.kit__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .15); }
.kit__price { font-size: 15px; font-weight: 500; }
.kit__price s { color: rgba(255, 255, 255, .45); font-weight: 400; margin-left: 6px; font-size: 13px; }
.kit__btn { font-size: var(--text-small); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Diagnostic teint ---------- */
.beauty-shade { padding: clamp(64px, 8vw, 110px) 0; }
.beauty-shade__box { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; background: #f4ebe5; padding: clamp(24px, 4vw, 56px); }
.beauty-shade__box p { letter-spacing: .03em; color: #4a3d35; margin: 14px 0 22px; max-width: 28em; }
.shade-scale { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.shade-scale div { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 11px; letter-spacing: .06em; color: #6d6560; }
.shade-scale i { width: 100%; aspect-ratio: 1 / 2.2; display: block; }

@media (max-width: 1000px) {
  .beauty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .beauty-hero__grid, .beauty-kits__head, .beauty-shade__box, .lina__inner { grid-template-columns: 1fr; }
  .lina__points { grid-template-columns: 1fr; }
  .lina__logo span { display: inline; }
  .beauty-kits__head p { justify-self: start; }
  .beauty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .beauty-kits__grid { grid-template-columns: 1fr; }
  .bcard__name { font-size: 17px; }
  .bcard__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .shade-scale { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Produits réels (js/beaute.js) ---------- */
.bcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.bcard:hover .bcard__media img { transform: scale(1.05); }
.bcard.is-soldout .bcard__media img { opacity: .55; }
.bcard__nophoto {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--display); font-style: italic; font-size: 24px; color: var(--rose);
}
.bcard__nophoto small { font-family: var(--ui); font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7a6a60; }

/* ---------- Photos remplacées dans l'admin (js/textes.js) ---------- */
.media-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-photo > svg { display: none; }