/* ============================================================
   BEST SELLER — Premium éditorial (Huawei-friendly)
============================================================ */

#best_seller.form-step{
  display: flex;
  flex-direction: column;
  gap: 20px;

  max-height: calc(100svh - 16px);
  overflow: visible;

  /* 🧠 TYPO DE BASE — tout ce qui n’est pas titre */
  font-family: var(--font-sans);
}

/* ------------------------------------------------------------
   Header
------------------------------------------------------------ */
.bs-head{
  text-align: center;
  padding: 8px 2px 0;
  background: transparent;
}

.bs-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 9px 16px;
  border-radius: 999px;

  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.90);

  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.22));
  border: 1px solid rgba(230,214,158,0.28);

  margin: 0 auto 12px;
}

.bs-kicker-star{
  color: rgba(230,214,158,0.98);
  font-size: 0.95rem;
  line-height: 1;
}

/* ------------------------------------------------------------
   TITRES (serif assumé)
------------------------------------------------------------ */
.bs-title{
  margin-bottom: 6px;
  font-family: "Playfair Display", serif;
}

.bs-subtitle{
  margin: 2px 0 10px;
  font-family: "Inter", serif;
  font-size: clamp(1.12rem, 2.05vw, 1.38rem);
  color: rgba(230,214,158,0.98);
  letter-spacing: 0.75px;
  text-shadow: 0 8px 22px rgba(0,0,0,0.34);
}

.bs-divider{
  height: 1px;
  width: min(560px, 88%);
  margin: 12px auto 14px;
  background: linear-gradient(
    90deg,
    rgba(230,214,158,0.00),
    rgba(230,214,158,0.62),
    rgba(230,214,158,0.00)
  );
  opacity: 0.95;
}

.bs-intro{
  max-width: 60ch;
  margin-inline: auto;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
}

/* ------------------------------------------------------------
   Encarts (Accordion)
------------------------------------------------------------ */
.bs-cards{
  display: grid;
  gap: 10px;
}

.bs-card > summary{ list-style: none; }
.bs-card > summary::-webkit-details-marker{ display: none; }

.bs-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.14);

  background:
    radial-gradient(760px 260px at 35% 0%, rgba(255,255,255,0.07), rgba(0,0,0,0.00) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.14));

  box-shadow: inset 0 0 0 1px rgba(230,214,158,0.06);

  overflow: hidden;
  contain: content;
}

/* ------------------------------------------------------------
   Header d’encart (titre = serif)
------------------------------------------------------------ */
.bs-card-title{
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  min-height: 44px;
  padding: 8px 14px;

  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(1.02rem, 1.65vw, 1.18rem);
  line-height: 1.25;

  color: rgba(255,255,255,0.96);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(230,214,158,0.10) 18%,
      rgba(0,0,0,0.18) 100%
    );

  border-bottom: 1px solid rgba(255,255,255,0.14);

  text-shadow:
    0 1px 6px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.35);

  position: relative;
}


.bs-card[open] .bs-card-title::after{
  transform: rotate(225deg);
}

/* ------------------------------------------------------------
   Corps animé
------------------------------------------------------------ */
.bs-card-body{
  overflow: hidden;
  height: 0;

  opacity: 0;
  transform: translateY(-2px);

  transition:
    height 360ms cubic-bezier(0.22, 0.80, 0.22, 1),
    opacity 220ms ease,
    transform 360ms cubic-bezier(0.22, 0.80, 0.22, 1);
}

.bs-card[open] .bs-card-body{
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   CONTENU DES ENCARTS — font-sans
------------------------------------------------------------ */
.bs-card-content{
  padding: 18px 18px 16px;
  font-family: var(--font-sans);
}

.bs-card-content ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs-card-content li{
  margin: 10px 0;
  line-height: 1.65;
  color: rgba(255,255,255,0.84);
}

/* séparation douce */
.bs-card-content > * + *{
  margin-top: 14px;
}

/* note interne */
.bs-note{
  margin-top: 14px;
  padding: 12px 14px;

  border-radius: 12px;
  border: 1px solid rgba(230,214,158,0.18);
  background: rgba(230,214,158,0.06);

  font-size: 0.97rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-sans);
}

/* ------------------------------------------------------------
   CTA
------------------------------------------------------------ */
.bs-cta-zone{
  display: flex;
  flex-direction: column;
  gap: 20px;

  margin-top: 28px;
  padding-top: 20px;

  border-top: 1px solid rgba(255,255,255,0.12);
}

.bs-btn-secondary,
.bs-btn-primary,
.bs-footnote{
  font-family: var(--font-sans);
}

.bs-btn-secondary{
  opacity: 0.95;
  padding: 14px 20px;
}

.bs-btn-primary{
  padding: 16px 22px;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
}

.bs-footnote{
  margin-top: 8px;
  font-size: 0.96rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.68);
  text-align: center;
}

/* ------------------------------------------------------------
   Mobile tactile
------------------------------------------------------------ */
@media (hover:none) and (pointer:coarse){
  #best_seller.form-step{
    max-height: calc(100svh - 12px);
  }

  .bs-card-title{
    min-height: 42px;
    padding: 8px 12px;
  }

  .bs-card-content{
    padding: 16px 14px 14px;
  }

  .bs-cta-zone{
    gap: 16px;
    margin-top: 22px;
    padding-top: 16px;
  }
}

/* ------------------------------------------------------------
   Reduced motion
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .bs-card-body{
    transition: none !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }
}