/* =====================================================================
   components.css — Composants UI réutilisables
   Boutons, cartes, badges, formulaires, hibou, bandeau, carrousel
   Dépend de : base.css, style.css (tokens)
   ===================================================================== */

/* -----------------------------------------------------------------------
   BOUTONS
   ----------------------------------------------------------------------- */

/* Bouton principal vert → crème */
.buma-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  font-family:      var(--font-body);
  font-size:        0.9375rem;
  font-weight:      600;
  line-height:      1;
  padding:          14px 28px;
  border-radius:    var(--radius-pill);
  border:           none;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space:      nowrap;
}

/* Variante primaire : fond vert, texte crème */
.buma-btn--primary {
  background-color: var(--buma-green);
  color:            var(--buma-cream);
}
.buma-btn--primary:hover {
  background-color: var(--buma-green-dark);
  color:            var(--buma-cream);
}

/* Variante dorée : fond gold, texte vert */
.buma-btn--gold {
  background-color: var(--buma-gold);
  color:            var(--buma-green-dark);
}
.buma-btn--gold:hover {
  background-color: var(--buma-bronze);
  color:            var(--buma-cream);
}

/* Variante contour crème (sur fond vert) */
.buma-btn--outline-cream {
  background-color: transparent;
  color:            var(--buma-cream);
  border:           1.5px solid var(--buma-cream);
}
.buma-btn--outline-cream:hover {
  background-color: var(--buma-cream);
  color:            var(--buma-green-dark);
}

/* Variante contour vert (sur fond clair) */
.buma-btn--outline-green {
  background-color: transparent;
  color:            var(--buma-green);
  border:           1.5px solid var(--buma-green);
}
.buma-btn--outline-green:hover {
  background-color: var(--buma-green);
  color:            var(--buma-cream);
}

/* Petite taille */
.buma-btn--sm {
  font-size: 0.8125rem;
  padding:   10px 20px;
}

/* -----------------------------------------------------------------------
   HIBOU EN CERCLE
   ----------------------------------------------------------------------- */

/* Cercle crème avec bordure dorée contenant le SVG hibou */
.buma-owl-circle {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  background-color: var(--buma-cream-warm);
  border:           2px solid var(--buma-gold);
  border-radius:    50%;
  flex-shrink:      0;
  /* La taille se contrôle via --owl-size (défaut 80px) */
  width:            var(--owl-size, 80px);
  height:           var(--owl-size, 80px);
}

.buma-owl-circle svg {
  width:  70%;
  height: 70%;
}

/* -----------------------------------------------------------------------
   BADGES ÉTAT PRODUIT
   ----------------------------------------------------------------------- */

.buma-badge {
  display:       inline-block;
  font-family:   var(--font-mono);
  font-size:     0.6rem;
  font-weight:   500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:       4px 10px;
  border-radius: var(--radius-pill);
  line-height:   1;
}

.buma-badge--neuf {
  background-color: var(--buma-bronze);
  color:            var(--buma-cream);
}

.buma-badge--occasion {
  background-color: var(--buma-cream-warm);
  color:            var(--buma-green);
  border:           1px solid var(--buma-border);
}

.buma-badge--chine {
  background-color: var(--buma-green);
  color:            var(--buma-cream);
}

/* Badges plateforme avis */
.buma-badge--vinted {
  background-color: var(--badge-vinted-bg);
  color:            var(--badge-vinted-text);
}

.buma-badge--leboncoin {
  background-color: var(--badge-lbc-bg);
  color:            var(--badge-lbc-text);
}

/* -----------------------------------------------------------------------
   CARTE PRODUIT
   ----------------------------------------------------------------------- */

.buma-card-product {
  background-color: #fff;
  border:           1px solid var(--buma-border);
  border-radius:    var(--radius-card);
  overflow:         hidden;
  display:          flex;
  flex-direction:   column;
  transition:       box-shadow 200ms ease, transform 200ms ease;
}

.buma-card-product:hover {
  box-shadow: var(--shadow-card);
  transform:  translateY(-3px);
}

.buma-card-product__image {
  position:       relative;
  aspect-ratio:   4 / 3;
  overflow:       hidden;
  background:     var(--buma-cream-warm);
}

.buma-card-product__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 350ms ease;
}

.buma-card-product:hover .buma-card-product__image img {
  transform: scale(1.04);
}

.buma-card-product__badge {
  position: absolute;
  top:      12px;
  left:     12px;
}

.buma-card-product__body {
  padding: 14px 16px 16px;
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     6px;
}

.buma-card-product__cat {
  font-family:     var(--font-mono);
  font-size:       0.6rem;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--buma-muted);
}

.buma-card-product__title {
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 600;
  font-size:   1.1rem;
  color:       var(--buma-ink);
  line-height: 1.25;
}

.buma-card-product__price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size:   1.1rem;
  color:       var(--buma-green);
  margin-top:  auto;
}

.buma-card-product__price del {
  font-weight: 400;
  font-size:   0.85rem;
  color:       var(--buma-muted);
  margin-left: 6px;
}

/* -----------------------------------------------------------------------
   CARTE AVIS CLIENT
   ----------------------------------------------------------------------- */

.buma-card-review {
  background-color: #fff;
  border:           1px solid var(--buma-border);
  border-radius:    var(--radius-content);
  padding:          22px 24px;
  display:          flex;
  flex-direction:   column;
  gap:              14px;
}

.buma-card-review__header {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.buma-card-review__avatar {
  width:            40px;
  height:           40px;
  border-radius:    50%;
  background-color: var(--buma-cream-warm);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font-body);
  font-weight:      700;
  font-size:        1rem;
  color:            var(--buma-green);
  flex-shrink:      0;
}

.buma-card-review__author {
  font-weight: 600;
  font-size:   0.9rem;
  color:       var(--buma-ink);
}

.buma-card-review__stars {
  color:     var(--buma-bronze);
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.buma-card-review__text {
  font-size:   0.9rem;
  color:       var(--buma-muted);
  line-height: 1.55;
}

.buma-card-review__footer {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  auto;
}

/* -----------------------------------------------------------------------
   FORMULAIRES
   ----------------------------------------------------------------------- */

.buma-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.buma-label {
  font-family:  var(--font-body);
  font-weight:  600;
  font-size:    0.85rem;
  color:        var(--buma-ink);
}

.buma-input,
.buma-select,
.buma-textarea {
  font-family:      var(--font-body);
  font-size:        0.9375rem;
  color:            var(--buma-ink);
  background-color: #fff;
  border:           1.5px solid #E6DECE;
  border-radius:    var(--radius-input);
  padding:          13px 16px;
  width:            100%;
  transition:       border-color 150ms ease, box-shadow 150ms ease;
  appearance:       none;
}

.buma-input:focus,
.buma-select:focus,
.buma-textarea:focus {
  outline:      none;
  border-color: var(--buma-green);
  box-shadow:   0 0 0 3px rgba(30, 70, 54, 0.1);
}

.buma-input::placeholder,
.buma-textarea::placeholder {
  color: var(--buma-muted);
}

/* Barre de recherche — pill avec icône loupe */
.buma-search-pill {
  display:          flex;
  align-items:      center;
  background-color: #fff;
  border:           1.5px solid var(--buma-border);
  border-radius:    var(--radius-pill);
  padding:          10px 16px 10px 44px;
  position:         relative;
  width:            100%;
  max-width:        440px;
}

.buma-search-pill__icon {
  position:  absolute;
  left:      16px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--buma-muted);
  width:     18px;
  height:    18px;
}

.buma-search-pill input {
  border:           none;
  outline:          none;
  background:       transparent;
  font-family:      var(--font-body);
  font-size:        0.9rem;
  color:            var(--buma-ink);
  width:            100%;
}

/* -----------------------------------------------------------------------
   BANDEAU D'ANNONCE (header-banner)
   ----------------------------------------------------------------------- */

.buma-banner {
  background-color: var(--buma-green-dark);
  color:            var(--buma-cream);
  text-align:       center;
  font-family:      var(--font-body);
  font-size:        0.8125rem;
  font-weight:      500;
  height:           38px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  letter-spacing:   0.01em;
}

/* -----------------------------------------------------------------------
   SECTIONS DE PAGE
   ----------------------------------------------------------------------- */

/* Fond vert profond (hero, newsletter, trouvaille du jour) */
.buma-section--dark {
  background-color: var(--buma-green);
  color:            var(--buma-cream);
}

/* Fond crème chaud (valeurs, accents) */
.buma-section--warm {
  background-color: var(--buma-cream-warm);
}

/* Espacement vertical standard entre sections */
.buma-section {
  padding: 72px 0;
}

@media (max-width: 768px) {
  .buma-section {
    padding: 48px 0;
  }
}

/* -----------------------------------------------------------------------
   GRILLES
   ----------------------------------------------------------------------- */

/* Grille produits — 4 colonnes → 2 mobile */
.buma-grid-products {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
}

@media (max-width: 1024px) {
  .buma-grid-products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .buma-grid-products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Grille catégories — 3 colonnes → 2 mobile */
.buma-grid-categories {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
}

@media (max-width: 768px) {
  .buma-grid-categories { grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------------------------------------------------
   CARROUSEL AVIS
   ----------------------------------------------------------------------- */

.buma-carousel {
  position: relative;
  overflow: hidden;
}

.buma-carousel__track {
  display:    flex;
  gap:        20px;
  transition: transform 400ms ease;
}

/* 3 cartes desktop, 1.2 mobile */
.buma-carousel__track .buma-card-review {
  flex:     0 0 calc((100% - 40px) / 3);
  min-width: 0;
}

@media (max-width: 768px) {
  .buma-carousel__track .buma-card-review {
    flex: 0 0 80%;
  }
}

/* Boutons flèches */
.buma-carousel__btn {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  width:            44px;
  height:           44px;
  border-radius:    50%;
  background-color: #fff;
  border:           1px solid var(--buma-border);
  box-shadow:       var(--shadow-card);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  z-index:          2;
  transition:       background-color 150ms ease;
}

.buma-carousel__btn:hover {
  background-color: var(--buma-cream-warm);
}

.buma-carousel__btn--prev { left: -22px; }
.buma-carousel__btn--next { right: -22px; }

/* Pastilles de navigation */
.buma-carousel__dots {
  display:         flex;
  justify-content: center;
  gap:             8px;
  margin-top:      20px;
}

.buma-carousel__dot {
  width:            8px;
  height:           8px;
  border-radius:    var(--radius-pill);
  background-color: var(--buma-border);
  border:           none;
  cursor:           pointer;
  transition:       width 250ms ease, background-color 250ms ease;
}

.buma-carousel__dot.is-active {
  width:            28px;
  background-color: var(--buma-green);
}

/* -----------------------------------------------------------------------
   ACCORDÉONS FAQ
   ----------------------------------------------------------------------- */

.buma-accordion {
  border:        1px solid var(--buma-border);
  border-radius: var(--radius-content);
  overflow:      hidden;
}

.buma-accordion__item + .buma-accordion__item {
  border-top: 1px solid var(--buma-border);
}

.buma-accordion__trigger {
  width:            100%;
  background-color: var(--buma-cream-warm);
  border:           none;
  padding:          18px 20px;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  cursor:           pointer;
  font-family:      var(--font-body);
  font-weight:      600;
  font-size:        0.9375rem;
  color:            var(--buma-ink);
  text-align:       left;
  gap:              12px;
  transition:       background-color 200ms ease, color 200ms ease;
}

.buma-accordion__trigger[aria-expanded="true"] {
  background-color: var(--buma-green);
  color:            var(--buma-cream);
}

/* Icône +/- */
.buma-accordion__icon {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  position:    relative;
}

.buma-accordion__icon::before,
.buma-accordion__icon::after {
  content:          '';
  position:         absolute;
  background-color: currentColor;
  border-radius:    2px;
}

.buma-accordion__icon::before {
  /* Barre horizontale */
  width:  14px;
  height: 2px;
  top:    50%;
  left:   50%;
  transform: translate(-50%, -50%);
}

.buma-accordion__icon::after {
  /* Barre verticale — disparaît à l'ouverture */
  width:  2px;
  height: 14px;
  top:    50%;
  left:   50%;
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease, transform 200ms ease;
}

[aria-expanded="true"] .buma-accordion__icon::after {
  opacity:   0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.buma-accordion__content {
  overflow: hidden;
  /* height géré via JS (max-height animation) */
  max-height: 0;
  transition: max-height 300ms ease;
}

.buma-accordion__content.is-open {
  max-height: 600px; /* valeur suffisamment grande */
}

.buma-accordion__body {
  padding:     0 20px 20px;
  font-size:   0.9rem;
  color:       var(--buma-muted);
  line-height: 1.65;
}