.category-title {
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #212529;
}
/* Lignes d'encadrement plus discrètes */
.category-divider {
    height: 1px;
    background-color: #e9ecef;
    border: none;
    max-width: 200px;
}
/* Fond doux et moderne pour la page (dégradé + motif léger) */
body {
    background:
        radial-gradient(24px 24px at 24px 24px, rgba(13,110,253,0.03) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
}
/* Barre de recherche plus premium */
.search-bar {
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
/* Style des cartes produit */
.card {
    border: 1px solid #eef0f2;
    border-radius: .5rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
/* Titres de produit */
.product-title { font-weight: 600; color: #212529; font-size: 1rem; }
/* Texte description plus discret */
.card-text { color: #6c757d; font-size: .925rem; }
/* Boutons modernes */
.btn-modern { border-radius: 4px !important; box-shadow: none !important; }
.btn-accent { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; }
.btn-accent:hover { background-color: #0b5ed7 !important; border-color: #0a58ca !important; color: #fff !important; }
.btn-neutral { background-color: transparent !important; border-color: #6c757d !important; color: #343a40 !important; }
.btn-neutral:hover { background-color: #f1f3f5 !important; color: #212529 !important; border-color: #6c757d !important; }
/* Bouton de filtre (mobile) */
.btn-filter-toggle {
  background-color: #f1f3f5 !important;
  border-color: #6c757d !important;
  color: #343a40 !important;
  border-radius: 1px !important;
}
.btn-filter-toggle:hover {
  background-color: #e9ecef !important;
  color: #212529 !important;
  border-color: #6c757d !important;
}
/* Focus des inputs */
.form-control:focus, .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,.15);
}
/* Mise en page similaire à panier/listevariation */
.produit-page .page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.produit-page .content {
    flex: 1;
    /* Compenser la navbar + barre de recherche */
    padding-top: 160px;
    background-color: transparent; /* laisse apparaître le fond global */
}
.produit-page .search-bar {
    position: fixed;
    top: 80px; /* hauteur approx navbar */
    left: 0;
    right: 0;
    z-index: 1030; /* sous la navbar si nécessaire */
}
/* Centrer le contenu de la barre de recherche sur très grands écrans */
.produit-page .search-bar > .container {
    max-width: 1320px; /* aligné sur container-xl Bootstrap */
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* Mobile */
@media (max-width: 767.98px) {
  /* Sur mobile: la barre de recherche n'est PAS fixe pour que la page descende */
  .produit-page .search-bar { position: static !important; top: auto !important; left: auto; right: auto; z-index: auto; }
  /* Petite marge pour éviter d'être collée sous la navbar */
  #filtersBarProd { margin-top: .5rem; }
  /* Supprimer les espaces supplémentaires sur mobile pour suivre le flux naturel */
  .produit-page .content { padding-top: 0 !important; margin-top: 0 !important; }
  /* Compat: si une classe mobile-unfixed est ajoutée par JS, garder le même effet */
  #filtersBarProd.mobile-unfixed { position: static !important; top: auto !important; }
}