/* =====================================================================
   layout.css — Mise en page des zones globales et des sections de page
   Header, footer, hero, états, catégories, valeurs, newsletter
   Mesures extraites pixel-perfect des maquettes BumaShop Boutique.dc.html
   ===================================================================== */

/* -----------------------------------------------------------------------
   BANDEAU D'ANNONCE
   Fond : #163528 · Texte : #CFE0D5 · Hauteur : 38px
   ----------------------------------------------------------------------- */

.buma-banner {
  background-color: var(--buma-green-dark);
  color:            #CFE0D5;
  font-family:      var(--font-body);
  font-size:        12.5px;
  font-weight:      500;
  letter-spacing:   0.3px;
  text-align:       center;
  padding:          9px 20px;
  min-height:       38px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  /* Transition masquage au scroll (géré en JS) */
  transition:       transform 250ms ease;
  position:         relative;
  z-index:          60;
}

/* -----------------------------------------------------------------------
   HEADER STICKY
   Fond : #FBF9F4 · Bordure bas : 1px #ECE5D7 · z-index : 50
   Padding interne : 14px 28px · gap entre éléments : 28px
   ----------------------------------------------------------------------- */

.buma-header {
  background-color: var(--buma-cream);
  border-bottom:    1px solid var(--buma-border);
  position:         sticky;
  top:              0;
  z-index:          50;
  /* Ombre légère au scroll */
  transition:       box-shadow 200ms ease;
}

.buma-header.is-scrolled {
  box-shadow: 0 2px 16px rgba(30, 70, 54, 0.1);
}

.buma-header__inner {
  display:     flex;
  align-items: center;
  gap:         28px;
  padding-top:    14px;
  padding-bottom: 14px;
}

/* Logo : hibou + logotype */
.buma-header__logo {
  display:         flex;
  align-items:     center;
  gap:             11px;
  text-decoration: none;
  flex-shrink:     0;
}

.buma-header__logo .buma-logotype {
  font-size:   33px;
  line-height: 0.7;
  color:       var(--buma-green);
}

/* Navigation principale */
.buma-nav {
  display:     flex;
  align-items: center;
}

.buma-nav__list {
  display:     flex;
  align-items: center;
  gap:         24px;
  list-style:  none;
  padding:     0;
  margin:      0;
}

.buma-nav__list li a,
.buma-nav__list li span {
  font-family:     var(--font-body);
  font-size:       14.5px;
  font-weight:     500;
  color:           #2A2C30;
  text-decoration: none;
  transition:      color 150ms ease;
  cursor:          pointer;
}

.buma-nav__list li a:hover,
.buma-nav__list li.current-menu-item > a {
  color:       var(--buma-green);
  font-weight: 600;
}

/* Actions : search + compte + panier */
.buma-header__actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-left: auto;
}

/* Search pill dans le header */
.buma-header__search .buma-search-pill {
  display:          flex;
  align-items:      center;
  gap:              8px;
  background-color: var(--buma-cream-warm);
  border:           1px solid #E6DECE;
  border-radius:    var(--radius-pill);
  padding:          9px 14px;
  width:            220px;
  color:            var(--buma-muted);
  text-decoration:  none;
}

.buma-header__search .buma-search-pill input {
  font-size:   13px;
  background:  transparent;
  border:      none;
  outline:     none;
  color:       var(--buma-ink);
  width:       100%;
}

.buma-header__search .buma-search-pill__icon {
  position:  static;
  transform: none;
  width:     15px;
  height:    15px;
  color:     var(--buma-muted);
  flex-shrink: 0;
}

/* Icônes compte et panier */
.buma-header__icon {
  width:            40px;
  height:           40px;
  border-radius:    50%;
  border:           1px solid #E6DECE;
  background-color: #fff;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  text-decoration:  none;
  color:            var(--buma-green);
  transition:       background-color 150ms ease, border-color 150ms ease;
  flex-shrink:      0;
}

.buma-header__icon:hover {
  background-color: var(--buma-cream-warm);
  border-color:     var(--buma-gold);
  color:            var(--buma-green-dark);
}

/* Panier : fond vert, icône crème */
.buma-header__cart {
  background-color: var(--buma-green);
  border-color:     var(--buma-green);
  color:            var(--buma-cream-warm);
  position:         relative;
}

.buma-header__cart:hover {
  background-color: var(--buma-green-dark);
  border-color:     var(--buma-green-dark);
  color:            var(--buma-cream-warm);
}

/* Badge nombre d'articles */
.buma-header__cart-badge {
  position:         absolute;
  top:              -2px;
  right:            -2px;
  background-color: var(--buma-bronze);
  color:            #fff;
  font-size:        10px;
  font-weight:      700;
  font-family:      var(--font-body);
  width:            18px;
  height:           18px;
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  line-height:      1;
}

/* Hamburger mobile */
.buma-nav-toggle {
  display:          none;
  flex-direction:   column;
  gap:              5px;
  background:       none;
  border:           none;
  cursor:           pointer;
  padding:          4px;
  margin-left:      auto;
}

.buma-nav-toggle__bar {
  display:          block;
  width:            22px;
  height:           2px;
  background-color: var(--buma-ink);
  border-radius:    2px;
  transition:       transform 200ms ease, opacity 200ms ease;
}

/* -----------------------------------------------------------------------
   RESPONSIVE HEADER — Mobile < 768px
   ----------------------------------------------------------------------- */

@media (max-width: 768px) {
  .buma-header__search { display: none; }

  .buma-nav-toggle { display: flex; }

  .buma-nav {
    display:          none;
    position:         absolute;
    top:              100%;
    left:             0;
    right:            0;
    background-color: var(--buma-cream);
    border-bottom:    1px solid var(--buma-border);
    box-shadow:       var(--shadow-card);
    z-index:          49;
    padding:          20px 28px;
  }

  .buma-nav.is-open {
    display: block;
  }

  .buma-nav__list {
    flex-direction: column;
    align-items:    flex-start;
    gap:            18px;
  }

  .buma-nav__list li a {
    font-size: 16px;
  }
}

/* -----------------------------------------------------------------------
   HERO — 2 colonnes égales
   Section : max-width 1200px · padding 46px 28px 30px · gap 44px
   ----------------------------------------------------------------------- */

.buma-hero {
  background-color: var(--buma-green);
}

.buma-hero__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   44px;
  align-items:           center;
  padding-top:           46px;
  padding-bottom:        46px;
}

.buma-hero__label {
  font-family:   var(--font-mono);
  font-size:     12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--buma-gold);
  margin-bottom:  16px;
}

.buma-hero__title {
  margin:       0 0 18px;
  font-family:  var(--font-display);
  font-style:   italic;
  font-weight:  600;
  font-size:    clamp(42px, 5vw, 60px);
  line-height:  0.98;
  letter-spacing: -0.5px;
  color:        var(--buma-cream);
}

.buma-hero__desc {
  margin:      0 0 26px;
  font-size:   17px;
  line-height: 1.6;
  color:       rgba(251, 249, 244, 0.75);
  max-width:   440px;
}

/* Search pill hero — variante avec bordure gold sur fond transparent */
.buma-hero__search .buma-search-pill {
  max-width:        460px;
  background-color: rgba(255, 255, 255, 0.08);
  border:           1.5px solid var(--buma-gold);
  margin-bottom:    10px;
}

.buma-hero__search .buma-search-pill input {
  color: var(--buma-cream);
}

.buma-hero__search .buma-search-pill input::placeholder {
  color: rgba(251, 249, 244, 0.55);
}

.buma-hero__search .buma-search-pill__icon {
  color: var(--buma-gold);
}

/* CTAs du hero */
.buma-hero__ctas {
  display:     flex;
  gap:         10px;
  flex-wrap:   wrap;
  margin-top:  18px;
  margin-bottom: 22px;
}

/* Stats sous les CTAs */
.buma-hero__stats {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex-wrap:   wrap;
}

.buma-hero__stat {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.buma-hero__stat strong {
  font-family:  var(--font-body);
  font-weight:  700;
  font-size:    1.05rem;
  color:        var(--buma-cream);
}

.buma-hero__stat span {
  font-size:  12.5px;
  color:      rgba(251, 249, 244, 0.65);
}

/* Séparateur entre stats */
.buma-hero__stat + .buma-hero__stat {
  border-left:  1px solid rgba(251, 249, 244, 0.2);
  padding-left: 20px;
}

/* Colonne droite hero : image avec card flottante */
.buma-hero__image-wrap {
  position:      relative;
  border-radius: 22px;
  overflow:      visible;
}

.buma-hero__image-wrap img {
  width:         100%;
  height:        430px;
  object-fit:    cover;
  border-radius: 22px;
  display:       block;
}

/* Card flottante "Repérée par notre hibou" */
.buma-hero__floating-card {
  position:         absolute;
  left:             -18px;
  bottom:           -18px;
  background-color: #fff;
  border:           1px solid var(--buma-border);
  border-radius:    16px;
  padding:          12px 16px;
  display:          flex;
  align-items:      center;
  gap:              11px;
  box-shadow:       var(--shadow-card);
}

.buma-hero__floating-card .buma-mono {
  font-size:   12.5px;
  color:       var(--buma-green);
  font-weight: 700;
}

@media (max-width: 768px) {
  .buma-hero__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .buma-hero__image-wrap { display: none; } /* masqué en mobile */
  .buma-hero__title { font-size: 38px; line-height: 1.05; }
}

/* -----------------------------------------------------------------------
   SECTION 3 ÉTATS (Neuf / Occasion / Chiné)
   ----------------------------------------------------------------------- */

.buma-states {
  background-color: var(--buma-cream);
}

.buma-states__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  padding-top:    26px;
  padding-bottom: 12px;
}

.buma-states__card {
  background-color: #fff;
  border:           1px solid var(--buma-border);
  border-radius:    var(--radius-card);
  padding:          24px;
  display:          flex;
  flex-direction:   column;
  gap:              6px;
  cursor:           pointer;
  transition:       box-shadow 200ms ease, transform 200ms ease;
}

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

/* 3e carte : fond vert inversé */
.buma-states__card--dark {
  background-color: var(--buma-green);
  border-color:     var(--buma-green-dark);
  color:            var(--buma-cream);
}

.buma-states__card--dark p {
  color: rgba(251, 249, 244, 0.75);
}

/* Numéro mono en bronze */
.buma-states__num {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 1.5px;
  color:          var(--buma-bronze);
  margin-bottom:  4px;
}

.buma-states__card--dark .buma-states__num {
  color: var(--buma-gold);
}

/* Titre italic Cormorant */
.buma-states__title {
  font-family:  var(--font-display);
  font-style:   italic;
  font-size:    27px;
  font-weight:  600;
  color:        var(--buma-green);
  line-height:  1.1;
}

.buma-states__card--dark .buma-states__title {
  color: var(--buma-cream);
}

/* Description */
.buma-states__card p {
  margin:      0;
  font-size:   13.5px;
  color:       var(--buma-muted);
  line-height: 1.5;
}

/* Lien "Explorer →" */
.buma-states__link {
  margin-top:  8px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--buma-green);
  text-decoration: none;
}

.buma-states__card--dark .buma-states__link {
  color: var(--buma-gold);
}

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

/* -----------------------------------------------------------------------
   SECTION VALEURS — Cartes sur fond crème chaud
   background #F1ECE0 · border-radius 22px · padding 30px 36px
   ----------------------------------------------------------------------- */

.buma-values {
  background-color: transparent;
}

.buma-values__inner {
  background-color: var(--buma-cream-warm);
  border-radius:    22px;
  padding:          30px 36px;
}

.buma-values__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   24px;
}

.buma-value__title {
  font-family:  var(--font-display);
  font-style:   italic;
  font-size:    21px;
  font-weight:  600;
  color:        var(--buma-green);
  margin-bottom: 6px;
  line-height:   1.2;
}

.buma-value__desc {
  font-size:   12.5px;
  color:       var(--buma-muted);
  line-height: 1.5;
  margin:      0;
}

@media (max-width: 768px) {
  .buma-values__grid {
    grid-template-columns: 1fr 1fr;
  }
  .buma-values__inner {
    padding: 24px 20px;
  }
}

@media (max-width: 480px) {
  .buma-values__grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   SECTION NEWSLETTER
   Fond : #1E4636 · border-radius 24px · padding 48px 44px
   ----------------------------------------------------------------------- */

.buma-newsletter__box {
  background-color: var(--buma-green);
  border-radius:    24px;
  padding:          48px 44px;
  display:          flex;
  align-items:      center;
  gap:              36px;
  flex-wrap:        wrap;
}

/* Hibou */
.buma-newsletter__box .buma-owl-circle {
  --owl-size: 88px;
  border-width: 3px;
  flex-shrink:  0;
}

/* Texte */
.buma-newsletter__text {
  flex:      1;
  min-width: 240px;
}

.buma-newsletter__text h2 {
  margin:       0 0 9px;
  font-size:    30px;
  color:        var(--buma-cream);
  line-height:  1.1;
}

.buma-newsletter__text p {
  margin:      0;
  font-size:   14.5px;
  line-height: 1.5;
  color:       #A9BFB1;
}

/* Formulaire */
.buma-newsletter__form-wrap {
  display:   flex;
  gap:       10px;
  flex:      1;
  min-width: 280px;
}

.buma-newsletter__form-wrap .buma-input {
  flex:             1;
  background-color: var(--buma-green-dark);
  border-color:     #3C5C4E;
  color:            var(--buma-cream);
}

.buma-newsletter__form-wrap .buma-input::placeholder {
  color: rgba(251, 249, 244, 0.45);
}

.buma-newsletter__form-wrap .buma-input:focus {
  border-color: var(--buma-gold);
  box-shadow:   0 0 0 3px rgba(224, 197, 140, 0.15);
}

.buma-newsletter__legal {
  font-size:  11px;
  margin-top: 10px;
  color:      #A9BFB1;
}

@media (max-width: 768px) {
  .buma-newsletter__box {
    padding:    32px 24px;
    gap:        24px;
  }
  .buma-newsletter__form-wrap {
    flex-direction: column;
  }
}

/* -----------------------------------------------------------------------
   SECTION CATÉGORIES
   ----------------------------------------------------------------------- */

.buma-section-label {
  color:         var(--buma-bronze);
  margin-bottom: 8px;
}

.buma-section-desc {
  margin:      8px 0 32px;
  font-size:   15px;
  line-height: 1.6;
  max-width:   560px;
}

.buma-section-cta {
  display:     flex;
  justify-content: center;
  margin-top:  36px;
}

/* Carte catégorie avec image overlay */
.buma-cat-card {
  position:         relative;
  display:          block;
  border-radius:    var(--radius-card);
  overflow:         hidden;
  text-decoration:  none;
  aspect-ratio:     4 / 3;
}

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

.buma-cat-card:hover img {
  transform: scale(1.05);
}

/* Overlay vert en gradient */
.buma-cat-card::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(30, 70, 54, 0.75) 0%, rgba(30, 70, 54, 0.1) 60%, transparent 100%);
}

.buma-cat-card__label {
  position:    absolute;
  bottom:      14px;
  left:        16px;
  right:       16px;
  z-index:     1;
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 600;
  font-size:   1.2rem;
  color:       var(--buma-cream);
  line-height: 1.2;
}

/* -----------------------------------------------------------------------
   FOOTER — Fond vert sombre (#163528)
   ----------------------------------------------------------------------- */

.buma-footer {
  background-color: var(--buma-green-dark);
  color:            #A9BFB1;
  font-family:      var(--font-body);
  font-size:        13px;
}

/* Grille 4 colonnes (1.4fr + 3×1fr) */
.buma-footer__grid {
  display:               grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:                   36px;
  padding:               50px 0 30px;
}

/* Colonne marque */
.buma-footer__logotype {
  font-size:   32px;
  line-height: 0.7;
  color:       var(--buma-cream);
  margin:      14px 0 12px;
}

.buma-footer__logotype .buma-at {
  color: var(--buma-gold);
}

.buma-footer__tagline {
  font-size:   13px;
  line-height: 1.6;
  max-width:   260px;
  color:       #A9BFB1;
  margin:      0 0 6px;
}

.buma-footer__sub-tagline {
  font-size:   12px;
  color:       #7E968A;
  font-style:  italic;
  margin:      0;
}

/* Titres colonnes */
.buma-footer__heading {
  font-family:  var(--font-body);
  font-weight:  700;
  font-size:    13px;
  color:        var(--buma-cream);
  margin:       0 0 14px;
  letter-spacing: 0.5px;
  font-style:   normal;
}

/* Listes de liens */
.buma-footer__links {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            9px;
}

.buma-footer__links a,
.buma-footer__links span {
  color:           #A9BFB1;
  text-decoration: none;
  font-size:       13px;
  transition:      color 150ms ease;
  cursor:          pointer;
}

.buma-footer__links a:hover {
  color: var(--buma-cream);
}

/* Ligne copyright */
.buma-footer__bottom {
  border-top:  1px solid #29463A;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         12px;
  padding:     18px 0;
}

.buma-footer__copy,
.buma-footer__easter {
  margin:   0;
  font-size: 12px;
  color:    #7E968A;
}

.buma-footer__easter .buma-mono {
  font-size:      9.5px;
  letter-spacing: 1px;
  color:          #7E968A;
}

@media (max-width: 1024px) {
  .buma-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .buma-footer__grid {
    grid-template-columns: 1fr;
    padding-bottom: 20px;
  }
  .buma-footer__bottom {
    flex-direction: column;
    align-items:    flex-start;
  }
}

/* -----------------------------------------------------------------------
   RÉASSURANCE — Dans le footer (fond vert sombre)
   Séparateur bas : 1px solid #29463A
   ----------------------------------------------------------------------- */

.buma-reassurance {
  background-color: var(--buma-green-dark);
  border-bottom:    1px solid rgba(255,255,255,0.08);
}

.buma-reassurance__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   30px;
  padding:               34px 0;
}

.buma-reassurance__item {
  display:     flex;
  flex-direction: column;
  gap:         8px;
}

.buma-reassurance__icon svg {
  stroke: var(--buma-gold);
  width:  22px;
  height: 22px;
}

.buma-reassurance__title {
  font-family:  var(--font-body);
  font-weight:  700;
  font-size:    13.5px;
  color:        var(--buma-cream);
  display:      block;
}

.buma-reassurance__desc {
  font-size:   12.5px;
  line-height: 1.55;
  color:       #A9BFB1;
  margin:      0;
}

/* Badges paiement dans la colonne Paiement */
.buma-reassurance__badges {
  display:  flex;
  gap:      6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.buma-reassurance__badge {
  font-family:    var(--font-mono);
  font-size:      9.5px;
  letter-spacing: 0.5px;
  background:     #0F2A1F;
  color:          #CFE0D5;
  border-radius:  5px;
  padding:        4px 7px;
}

@media (max-width: 768px) {
  .buma-reassurance__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .buma-reassurance__grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   PAGE 404
   ----------------------------------------------------------------------- */

.buma-404 {
  min-height: 80vh;
  display:    flex;
  align-items: center;
  padding:    60px 0;
}

.buma-404__inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         60px;
  align-items: center;
}

/* Hibou + filigrane */
.buma-404__owl-wrap {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* "404" en filigrane crème */
.buma-404__filigrane {
  position:    absolute;
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 600;
  font-size:   clamp(120px, 18vw, 200px);
  color:       var(--buma-cream-warm);
  line-height: 1;
  user-select: none;
  z-index:     0;
}

/* Cercle hibou animé */
.buma-owl-404 {
  --owl-size: 200px;
  position:   relative;
  z-index:    1;
  animation:  owl-look 5s ease-in-out infinite, blink 4s step-end infinite;
}

/* Contenu 404 */
.buma-404__chapter {
  margin-bottom: 12px;
}

.buma-404__inner h1 {
  font-size:   clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 16px;
}

.buma-404__desc {
  font-size:     15px;
  line-height:   1.65;
  margin-bottom: 28px;
  max-width:     440px;
}

.buma-404__search {
  margin-bottom: 24px;
}

.buma-404__search .buma-search-pill {
  max-width: 100%;
}

.buma-404__actions {
  display:  flex;
  gap:      12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.buma-404__links {
  margin-bottom: 24px;
}

.buma-404__links ul {
  list-style:  none;
  padding:     0;
  margin:      8px 0 0;
  display:     flex;
  gap:         20px;
  flex-wrap:   wrap;
}

.buma-404__links a {
  font-size:  13.5px;
  color:      var(--buma-green);
}

.buma-404__easter {
  color:     var(--buma-border);
  font-size: 11px;
}

@media (max-width: 768px) {
  .buma-404__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .buma-404__owl-wrap { display: none; }
  .buma-404__actions  { justify-content: center; }
  .buma-404__links ul { justify-content: center; }
  .buma-404__desc     { margin: 0 auto 28px; }
}

/* -----------------------------------------------------------------------
   PAGE AIDE
   ----------------------------------------------------------------------- */

.buma-aide__tiles {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   12px;
  margin-bottom:         16px;
}

.buma-aide__tile {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              10px;
  padding:          22px 16px;
  background-color: var(--buma-cream-warm);
  border:           1px solid var(--buma-border);
  border-radius:    var(--radius-content);
  text-decoration:  none;
  color:            var(--buma-ink);
  transition:       background-color 150ms ease, border-color 150ms ease;
  text-align:       center;
}

.buma-aide__tile:hover {
  background-color: var(--buma-green);
  border-color:     var(--buma-green);
  color:            var(--buma-cream);
}

.buma-aide__tile:hover .buma-aide__tile-icon svg {
  stroke: var(--buma-cream);
}

.buma-aide__tile-icon svg {
  width:  24px;
  height: 24px;
  stroke: var(--buma-green);
}

.buma-aide__tile-label {
  font-size: 0.65rem;
}

/* Layout 2 colonnes FAQ : sidebar + accordéons */
.buma-aide__layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}

.buma-aide__sidebar {
  position: sticky;
  top: 80px;
}

.buma-aide__sidebar ul {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.buma-aide__sidebar a {
  display:     block;
  padding:     10px 14px;
  border-radius: var(--radius-pill);
  font-size:   0.8125rem;
  color:       var(--buma-muted);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.buma-aide__sidebar a:hover {
  background-color: var(--buma-cream-warm);
  color:            var(--buma-green);
}

.buma-aide__section {
  margin-bottom: 48px;
}

.buma-aide__section-title {
  font-size:     1.3rem;
  margin-bottom: 20px;
  display:       flex;
  align-items:   center;
  gap:           12px;
}

.buma-aide__section-title svg {
  stroke: var(--buma-green);
}

@media (max-width: 768px) {
  .buma-aide__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
  .buma-aide__layout {
    grid-template-columns: 1fr;
  }
  .buma-aide__sidebar { display: none; }
}

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

/* -----------------------------------------------------------------------
   SECTION TROUVAILLE DU JOUR
   fond #1E4636 · border-radius 24px · grid 2 col · image 340px
   ----------------------------------------------------------------------- */

.buma-trouvaille {
  margin: 40px 0 0;
}

.buma-trouvaille__box {
  background-color: var(--buma-green);
  border-radius:    24px;
  overflow:         hidden;
  display:          grid;
  grid-template-columns: 1fr 1fr;
}

.buma-trouvaille__image {
  position:   relative;
  min-height: 340px;
  background: var(--buma-green-dark);
}

.buma-trouvaille__image img {
  width:      100%;
  height:     100%;
  min-height: 340px;
  object-fit: cover;
  display:    block;
}

/* Placeholder quand aucun produit assigné */
.buma-trouvaille__placeholder {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  min-height:       340px;
  background-color: var(--buma-green-dark);
  opacity:          0.5;
}

.buma-trouvaille__content {
  padding:          46px 44px;
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  gap:              0;
}

.buma-trouvaille__label {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--buma-gold);
  margin-bottom:  14px;
}

.buma-trouvaille__title {
  font-family:  var(--font-display);
  font-style:   italic;
  font-weight:  600;
  font-size:    34px;
  line-height:  1.05;
  color:        var(--buma-cream-warm);
  margin:       0 0 10px;
}

.buma-trouvaille__desc {
  font-size:    14.5px;
  color:        #A9BFB1;
  line-height:  1.6;
  max-width:    380px;
  margin:       0 0 20px;
}

.buma-trouvaille__price-wrap {
  display:     flex;
  align-items: baseline;
  gap:         12px;
  margin-bottom: 22px;
}

.buma-trouvaille__price {
  font-family: var(--font-body);
  font-weight: 800;
  font-size:   32px;
  color:       var(--buma-cream-warm);
}

.buma-trouvaille__old-price {
  font-size:       15px;
  color:           #8AA396;
  text-decoration: line-through;
}

.buma-trouvaille__discount {
  background-color: var(--buma-gold);
  color:            var(--buma-green);
  font-size:        11.5px;
  font-weight:      700;
  border-radius:    var(--radius-pill);
  padding:          4px 10px;
}

.buma-trouvaille__actions {
  display:  flex;
  gap:      10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .buma-trouvaille__box {
    grid-template-columns: 1fr;
  }
  .buma-trouvaille__content {
    padding: 32px 24px;
  }
  .buma-trouvaille__title {
    font-size: 26px;
  }
}

/* -----------------------------------------------------------------------
   SECTION CATÉGORIES — Grille 3 col × 2 lignes, hauteur 190px
   ----------------------------------------------------------------------- */

.buma-cat-header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   20px;
}

.buma-cat-header h2 {
  margin: 0;
}

.buma-cat-header__link {
  font-size:   13.5px;
  font-weight: 600;
  color:       var(--buma-green);
  text-decoration: none;
  transition:  color 150ms ease;
}

.buma-cat-header__link:hover {
  color: var(--buma-green-dark);
}

/* Grille 3 col */
.buma-categories-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
}

/* Carte catégorie */
.buma-cat-card {
  position:         relative;
  display:          block;
  border-radius:    var(--radius-card);
  overflow:         hidden;
  text-decoration:  none;
  height:           190px;
  background-color: var(--buma-green-dark);
}

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

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

/* Overlay gradient vers le bas */
.buma-cat-card::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(22, 53, 40, 0.7) 0%, rgba(22, 53, 40, 0) 60%);
  pointer-events: none;
}

.buma-cat-card__label {
  position:    absolute;
  left:        18px;
  bottom:      15px;
  z-index:     1;
  color:       #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size:   17px;
  line-height: 1.2;
  /* pas de font-display ici : matches la maquette (Hanken, pas Cormorant) */
}

/* Placeholder quand pas d'image de catégorie */
.buma-cat-card--placeholder {
  background-color: var(--buma-green-dark);
}

@media (max-width: 768px) {
  .buma-categories-grid {
    grid-template-columns: 1fr 1fr;
  }
  .buma-cat-card { height: 160px; }
}

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

/* -----------------------------------------------------------------------
   EN-TÊTES DE SECTION avec lien "Tout voir →"
   ----------------------------------------------------------------------- */

.buma-section-header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   20px;
}

.buma-section-header h2 {
  margin: 0;
}

.buma-section-header__link {
  font-size:       13.5px;
  font-weight:     600;
  color:           var(--buma-green);
  text-decoration: none;
  transition:      color 150ms ease;
  white-space:     nowrap;
}

.buma-section-header__link:hover {
  color: var(--buma-green-dark);
}

/* -----------------------------------------------------------------------
   CARTE PRODUIT — variante grille home (image 230px)
   ----------------------------------------------------------------------- */

.buma-card-product__image {
  aspect-ratio: unset;
  height: 230px;
}

/* Bouton wishlist sur la carte */
.buma-card-product__wishlist {
  position:         absolute;
  top:              10px;
  right:            10px;
  width:            34px;
  height:           34px;
  border-radius:    50%;
  border:           none;
  background:       rgba(255, 255, 255, 0.92);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  color:            var(--buma-green);
  transition:       background-color 150ms ease;
}

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

/* -----------------------------------------------------------------------
   PAGE NOTRE HISTOIRE — Navigation chapitres sticky
   ----------------------------------------------------------------------- */

.buma-chapters-nav {
  background-color: var(--buma-cream);
  border-bottom:    1px solid var(--buma-border);
  position:         sticky;
  top:              70px; /* sous le header */
  z-index:          40;
  padding:          12px 0;
}

.buma-chapters-nav__list {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  gap:            24px;
  overflow-x:     auto;
  scrollbar-width: none;
}

.buma-chapters-nav__list::-webkit-scrollbar {
  display: none;
}

.buma-chapters-nav__list li a {
  font-size:       0.6875rem;
  color:           var(--buma-muted);
  text-decoration: none;
  white-space:     nowrap;
  transition:      color 150ms ease;
}

.buma-chapters-nav__list li a:hover {
  color: var(--buma-green);
}

/* -----------------------------------------------------------------------
   RESPONSIVE COMPLÉMENTAIRE — Mobile < 768px
   Référence : BumaShop Mobile.dc.html — Frame 01 Accueil
   ----------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Header mobile : hamburger gauche, logo centré, panier droit */
  .buma-header__inner {
    padding-top:    13px;
    padding-bottom: 13px;
  }

  .buma-header__logo .buma-logotype {
    font-size: 27px;
  }

  /* Hero mobile : colonne unique, H1 plus petit */
  .buma-hero {
    padding: 0;
  }

  .buma-hero__inner {
    padding-top:    22px;
    padding-bottom: 22px;
  }

  .buma-hero__title {
    font-size:   40px;
    margin-bottom: 12px;
  }

  .buma-hero__desc {
    font-size: 14px;
    margin-bottom: 16px;
  }

  /* Masquer la search pill du hero (prend trop de place) */
  .buma-hero__search {
    display: none;
  }

  /* Stats : horizontales, compactes */
  .buma-hero__stats {
    gap:       14px;
    font-size: 12px;
  }

  .buma-hero__stat strong {
    font-size: 0.95rem;
  }

  .buma-hero__stat + .buma-hero__stat {
    padding-left: 14px;
  }

  /* Grille produits : 2 colonnes */
  .buma-grid-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .buma-card-product__image {
    height: 180px;
  }

  .buma-card-product__title {
    font-size: 1rem;
  }

  .buma-card-product__price {
    font-size: 1rem;
  }

  /* Trouvaille : pleine largeur */
  .buma-trouvaille__title {
    font-size: 26px;
  }

  .buma-trouvaille__price {
    font-size: 26px;
  }

  /* Section header : empiler titre + lien */
  .buma-section-header {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  /* Grille produits : 1 colonne sur très petit écran */
  .buma-grid-products {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   PAGE RECHERCHE — search.php
   ===================================================================== */

.buma-search-page__hero {
  background-color: var(--buma-green-dark);
  color:            var(--buma-cream);
  padding:          52px 0 44px;
}

.buma-search-page__hero-inner {
  display:       flex;
  flex-direction: column;
  gap:           20px;
}

.buma-breadcrumb {
  font-size: 0.8125rem;
  color:     rgba(251, 249, 244, 0.7);
}

.buma-breadcrumb a {
  color:           rgba(251, 249, 244, 0.85);
  text-decoration: none;
}

.buma-search-page__title {
  font-family: var(--font-display);
  font-size:   clamp(1.75rem, 3.5vw, 2.75rem);
  font-style:  italic;
  font-weight: 600;
  color:       var(--buma-cream);
  margin:      0;
}

.buma-search-page__title strong {
  color: var(--buma-gold);
}

.buma-search-page__title em {
  font-style: italic;
}

/* Barre de recherche élargie */
.buma-search-pill--lg {
  max-width:  640px;
  background: #fff;
  border:     none;
}

.buma-search-pill--lg input {
  font-size: 1rem;
}

/* Layout sidebar + main */
.buma-search-page__layout {
  display:               grid;
  grid-template-columns: 220px 1fr;
  gap:                   40px;
  padding-top:           44px;
  padding-bottom:        60px;
  align-items:           start;
}

/* Filtres actifs */
.buma-search-page__active-filters {
  display:      flex;
  flex-wrap:    wrap;
  gap:          8px;
  align-items:  center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom:  1px solid var(--buma-border);
}

.buma-search-page__filter-label {
  font-size:   0.6875rem;
  color:       var(--buma-muted);
  white-space: nowrap;
}

.buma-active-filter {
  display:          inline-flex;
  align-items:      center;
  gap:              4px;
  padding:          4px 12px;
  background:       var(--buma-cream-warm);
  border:           1.5px solid var(--buma-border);
  border-radius:    var(--radius-pill);
  font-size:        0.8125rem;
  color:            var(--buma-ink);
  text-decoration:  none;
  transition:       background-color 130ms ease;
}

.buma-active-filter:hover {
  background-color: #e8e0d0;
}

.buma-search-page__reset {
  font-size:       0.75rem;
  color:           var(--buma-muted);
  text-decoration: underline;
  margin-left:     auto;
}

/* Toolbar */
.buma-search-page__toolbar {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   20px;
  padding-bottom:  14px;
  border-bottom:   1px solid var(--buma-border);
}

.buma-search-page__count {
  font-size: 0.8125rem;
  color:     var(--buma-muted);
}

.buma-search-page__sort-select {
  border:        1.5px solid var(--buma-border);
  border-radius: var(--radius-pill);
  padding:       8px 16px;
  font-family:   var(--font-body);
  font-size:     0.875rem;
  color:         var(--buma-ink);
  background:    #fff;
  cursor:        pointer;
}

/* Grille résultats — 3 col */
.buma-search-page__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   22px;
}

/* Pagination */
.buma-search-page__pagination {
  margin-top:     36px;
  text-align:     center;
}

.buma-search-page__pagination ul {
  list-style:      none;
  display:         flex;
  justify-content: center;
  gap:             8px;
  padding:         0;
  margin:          0;
}

.buma-search-page__pagination ul li a,
.buma-search-page__pagination ul li span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  border:          1.5px solid var(--buma-border);
  font-size:       0.9375rem;
  color:           var(--buma-ink);
  text-decoration: none;
  transition:      background-color 130ms ease, color 130ms ease, border-color 130ms ease;
}

.buma-search-page__pagination ul li a:hover,
.buma-search-page__pagination ul li span.current {
  background-color: var(--buma-green);
  border-color:     var(--buma-green);
  color:            var(--buma-cream);
}

/* État vide */
.buma-search-page__empty {
  text-align:    center;
  padding:       80px 20px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           16px;
}

.buma-search-page__empty h2 {
  font-family: var(--font-display);
  font-size:   1.75rem;
  font-style:  italic;
}

/* CTA alerte e-mail */
.buma-search-page__alert-cta {
  background-color: var(--buma-green);
  padding:          44px 0;
  margin-top:       20px;
}

.buma-search-page__alert-inner {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             32px;
  flex-wrap:       wrap;
}

.buma-search-page__alert-content {
  display:     flex;
  align-items: center;
  gap:         16px;
  color:       var(--buma-cream);
}

.buma-search-page__alert-title {
  font-family: var(--font-display);
  font-size:   1.5rem;
  font-style:  italic;
  font-weight: 600;
  color:       var(--buma-cream);
  margin:      0 0 4px;
}

.buma-search-page__alert-sub {
  font-size: 0.9375rem;
  color:     rgba(251, 249, 244, 0.85);
  margin:    0;
}

.buma-search-page__alert-form {
  display:     flex;
  gap:         10px;
  align-items: center;
  flex-wrap:   wrap;
}

.buma-search-page__alert-form .buma-input {
  width:       260px;
  background:  rgba(255, 255, 255, 0.15);
  border:      1.5px solid rgba(255, 255, 255, 0.3);
  color:       var(--buma-cream);
}

.buma-search-page__alert-form .buma-input::placeholder {
  color: rgba(251, 249, 244, 0.6);
}

/* Recherches populaires */
.buma-search-page__popular {
  padding:    52px 0 60px;
  background: var(--buma-cream-warm);
}

.buma-search-page__popular-title {
  font-size:     0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:         var(--buma-muted);
  margin-bottom: 20px;
}

.buma-search-page__popular-tags {
  display:  flex;
  flex-wrap: wrap;
  gap:       10px;
}

.buma-search-page__popular-tag {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 18px;
  background:      #fff;
  border:          1.5px solid var(--buma-border);
  border-radius:   var(--radius-pill);
  text-decoration: none;
  color:           var(--buma-ink);
  font-size:       0.9375rem;
  transition:      background-color 130ms ease, border-color 130ms ease;
}

.buma-search-page__popular-tag:hover {
  background-color: var(--buma-green);
  border-color:     var(--buma-green);
  color:            var(--buma-cream);
}

.buma-search-page__popular-rank {
  font-size: 0.6875rem;
  color:     var(--buma-bronze);
  font-weight: 700;
}

.buma-search-page__popular-count {
  font-size: 0.75rem;
  color:     var(--buma-muted);
}

/* Styles checkout — buma-review-order */
.buma-review-order__table {
  width:           100%;
  border-collapse: collapse;
  margin-bottom:   20px;
}

.buma-review-order__item td {
  padding:      10px 8px;
  border-bottom: 1px solid var(--buma-border);
  vertical-align: middle;
}

.buma-review-order__item-img img {
  border-radius: 6px;
  object-fit:    cover;
}

.buma-review-order__item-info {
  padding-left: 10px;
  display:      flex;
  flex-direction: column;
  gap:          2px;
}

.buma-review-order__item-name {
  font-weight: 600;
  font-size:   0.9rem;
}

.buma-review-order__item-total {
  text-align:  right;
  font-weight: 600;
  color:       var(--buma-green);
}

.buma-review-order__row th,
.buma-review-order__row td {
  padding:   9px 8px;
  font-size: 0.875rem;
}

.buma-review-order__row th {
  text-align:  left;
  font-weight: 500;
  color:       var(--buma-muted);
}

.buma-review-order__row td {
  text-align:  right;
  font-weight: 600;
}

.buma-review-order__row--total th,
.buma-review-order__row--total td {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--buma-ink);
  border-top:  2px solid var(--buma-border);
}

.buma-review-order__payment {
  padding-top: 20px;
}

.buma-review-order__payment-title {
  font-size:     0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:         var(--buma-muted);
  margin-bottom: 14px;
}

.buma-review-order__payment-methods {
  list-style:    none;
  padding:       0;
  margin:        0 0 16px;
  display:       flex;
  flex-direction: column;
  gap:           8px;
}

.buma-review-order__payment-method {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       12px 16px;
  background:    var(--buma-cream-warm);
  border:        1.5px solid var(--buma-border);
  border-radius: 10px;
  cursor:        pointer;
}

.buma-review-order__payment-method label {
  cursor: pointer;
  font-size: 0.9375rem;
}

/* Breakpoints recherche */
@media (max-width: 1024px) {
  .buma-search-page__layout {
    grid-template-columns: 180px 1fr;
    gap:                   28px;
  }
  .buma-search-page__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .buma-search-page__alert-inner {
    flex-direction: column;
    align-items:    flex-start;
  }
}

@media (max-width: 768px) {
  .buma-search-page__layout {
    grid-template-columns: 1fr;
  }
  .buma-search-page__grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   14px;
  }
  .buma-search-page__alert-form .buma-input {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .buma-search-page__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   PAGE STANDARD — page.php (Mentions légales, Contact, etc.)
   ===================================================================== */

.buma-std-page {
  padding: 60px 0 80px;
}

.buma-std-page__article {
  max-width: 800px;
  margin:    0 auto;
}

.buma-std-page__header {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom:  1.5px solid var(--buma-border);
}

.buma-std-page__title {
  font-family: var(--font-display);
  font-size:   clamp(2rem, 4vw, 3.25rem);
  font-style:  italic;
  font-weight: 600;
  margin:      0;
}

.buma-std-page__content {
  font-size:   1rem;
  line-height: 1.7;
  color:       var(--buma-ink);
}

.buma-std-page__content h2 {
  font-family: var(--font-display);
  font-size:   1.625rem;
  font-style:  italic;
  font-weight: 600;
  margin:      36px 0 12px;
}

.buma-std-page__content h3 {
  font-family: var(--font-body);
  font-size:   1.125rem;
  font-weight: 700;
  margin:      24px 0 8px;
}

.buma-std-page__content p {
  margin-bottom: 1.1em;
}

.buma-std-page__content a {
  color:           var(--buma-green);
  text-decoration: underline;
}

.buma-std-page__content ul,
.buma-std-page__content ol {
  padding-left: 1.5em;
  margin-bottom: 1.1em;
}