/*
Theme Name:   Balais & Serpillère Child
Theme URI:    https://balais-et-serpillere.store
Description:  Thème enfant OceanWP pour Balais & Serpillère. Ajoute le bandeau réassurance, améliore les badges promo/soldes et le design des cartes produits.
Author:       Balais & Serpillère
Author URI:   https://balais-et-serpillere.store
Template:     oceanwp
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  balais-serpillere
*/

/* ==========================================================================
   PALETTE & VARIABLES
   Palette proposée inspirée du Balai Français :
   - Bleu marine  #1a3a5c  (primaire, headers, boutons)
   - Vert         #27ae60  (accent, CTA, promo)
   - Rouge solde  #e74c3c  (badges promo)
   ========================================================================== */
:root {
  --bs-primary:       #1a3a5c;
  --bs-primary-dark:  #0e2540;
  --bs-accent:        #27ae60;
  --bs-accent-dark:   #1e8449;
  --bs-sale:          #e74c3c;
  --bs-sale-bg:       #fdf0ef;
  --bs-border:        #e4e8ed;
  --bs-bg-light:      #f7f9fb;
  --bs-text:          #1c2b3a;
  --bs-text-muted:    #6b7a8d;
  --bs-shadow:        0 2px 12px rgba(26, 58, 92, 0.10);
  --bs-shadow-hover:  0 6px 24px rgba(26, 58, 92, 0.16);
  --bs-radius:        8px;
  --bs-transition:    all 0.22s ease;
}

/* ==========================================================================
   TYPOGRAPHIE GLOBALE
   OceanWP charge déjà une Google Font via le customizer.
   On renforce juste les titres et les éléments WooCommerce.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--bs-primary);
}

/* ==========================================================================
   BANDEAU DE RÉASSURANCE
   Inséré via functions.php après le header OceanWP.
   ========================================================================== */
.bs-reassurance {
  background: #fff;
  border-bottom: 1px solid var(--bs-border);
  padding: 0;
}

.bs-reassurance-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.bs-reassurance-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-right: 1px solid var(--bs-border);
  transition: var(--bs-transition);
}

.bs-reassurance-item:last-child {
  border-right: none;
}

.bs-reassurance-item:hover {
  background: var(--bs-bg-light);
}

.bs-reassurance-icon {
  width: 38px;
  height: 38px;
  background: #eef4fb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--bs-primary);
}

.bs-reassurance-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--bs-primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bs-reassurance-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--bs-primary);
  line-height: 1.3;
}

.bs-reassurance-text span {
  font-size: 12px;
  color: var(--bs-text-muted);
}

@media (max-width: 768px) {
  .bs-reassurance-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .bs-reassurance-item {
    border-bottom: 1px solid var(--bs-border);
  }
  .bs-reassurance-item:nth-child(odd) {
    border-right: 1px solid var(--bs-border);
  }
  .bs-reassurance-item:nth-child(even) {
    border-right: none;
  }
  .bs-reassurance-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .bs-reassurance-inner {
    grid-template-columns: 1fr;
  }
  .bs-reassurance-item {
    border-right: none;
  }
  .bs-reassurance-item:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   CARTES PRODUITS — AMÉLIORATIONS DESIGN
   OceanWP génère : .product-inner, .woocommerce-loop-product__title, .price
   On améliore sans casser la "Vue rapide" existante.
   ========================================================================== */

/* Conteneur carte */
.woocommerce ul.products li.product .product-inner {
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  overflow: hidden;
  transition: var(--bs-transition);
  background: #fff;
}

.woocommerce ul.products li.product:hover .product-inner {
  box-shadow: var(--bs-shadow-hover);
  transform: translateY(-3px);
  border-color: #c5d8ee;
}

/* Titre produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.product-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bs-text) !important;
  line-height: 1.4 !important;
  padding: 10px 12px 4px !important;
  margin: 0 !important;
}

/* Prix */
.woocommerce ul.products li.product .price {
  padding: 2px 12px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--bs-primary);
}

.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
  font-size: 13px;
  font-weight: 400;
  color: var(--bs-text-muted);
}

/* Bouton "Ajouter au panier" sur la carte */
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .button.add_to_cart_button {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 0 var(--bs-radius) var(--bs-radius) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 11px 16px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  transition: var(--bs-transition) !important;
}

.woocommerce ul.products li.product .button.product_type_simple:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
  background: var(--bs-primary-dark) !important;
}

/* Bouton "Voir les options" pour les variables */
.woocommerce ul.products li.product .button.product_type_variable {
  background: var(--bs-bg-light) !important;
  color: var(--bs-primary) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: 0 0 var(--bs-radius) var(--bs-radius) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  padding: 11px 16px !important;
  transition: var(--bs-transition) !important;
}

.woocommerce ul.products li.product .button.product_type_variable:hover {
  background: var(--bs-secondary) !important;
  border-color: var(--bs-primary) !important;
}

/* ==========================================================================
   BADGES PROMO — REMPLACEMENT DU "Promo !" GÉNÉRIQUE
   OceanWP place le badge dans .onsale. On le restyle complètement.
   ========================================================================== */
.woocommerce ul.products li.product span.onsale,
.woocommerce span.onsale {
  background: var(--bs-sale) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 4px 9px !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3) !important;
  text-transform: none !important;
}

/* Badge "Économisez X€" (ajouté via JS dans functions.php) */
.bs-saving-badge {
  display: inline-block;
  background: var(--bs-sale-bg);
  color: var(--bs-sale);
  border: 1px solid rgba(231, 76, 60, 0.2);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}

/* ==========================================================================
   PAGE PRODUIT UNIQUE
   ========================================================================== */

/* Prix */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--bs-primary) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  font-size: 16px !important;
  color: var(--bs-text-muted) !important;
  font-weight: 400 !important;
}

/* Bouton Ajouter au panier (page produit) */
.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--bs-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 36px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  transition: var(--bs-transition) !important;
  box-shadow: 0 4px 14px rgba(39, 174, 96, 0.35) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--bs-accent-dark) !important;
  box-shadow: 0 6px 18px rgba(39, 174, 96, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Onglet actif */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-top-color: var(--bs-primary) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--bs-primary) !important;
}

/* ==========================================================================
   BOUTONS WOOCOMMERCE GLOBAUX
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border-radius: var(--bs-radius) !important;
  transition: var(--bs-transition) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--bs-primary-dark) !important;
  color: #fff !important;
}

/* Bouton checkout panier */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: var(--bs-accent) !important;
  border-radius: 50px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(39, 174, 96, 0.35) !important;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--bs-accent-dark) !important;
}

/* ==========================================================================
   MESSAGES WOOCOMMERCE
   ========================================================================== */
.woocommerce-message {
  border-top-color: var(--bs-accent) !important;
}

.woocommerce-info {
  border-top-color: var(--bs-primary) !important;
}

/* ==========================================================================
   FOOTER — ENRICHISSEMENT
   OceanWP a un footer en plusieurs colonnes (via widgets).
   On améliore la couleur de fond et la typographie.
   ========================================================================== */
#footer {
  background: var(--bs-primary) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

#footer .footer-widgets {
  background: var(--bs-primary) !important;
}

#footer .widget-title {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

#footer p,
#footer li,
#footer .textwidget {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

#footer a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  transition: var(--bs-transition) !important;
}

#footer a:hover {
  color: #fff !important;
}

/* Footer bottom bar */
#footer-bottom {
  background: var(--bs-primary-dark) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
}

#footer-bottom a {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   ÉTOILES DE NOTATION
   ========================================================================== */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: #f39c12 !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.woocommerce-pagination ul.page-numbers li .page-numbers.current {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}

.woocommerce-pagination ul.page-numbers li .page-numbers:hover {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* ==========================================================================
   HEADER — TOUCHES FINALES
   On ne touche pas à la structure du header OceanWP,
   juste quelques micro-améliorations.
   ========================================================================== */

/* Couleur du menu actif */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  color: var(--bs-primary);
}

/* Hover couleur liens menu */
.main-navigation ul li a:hover {
  color: var(--bs-primary);
}

/* ==========================================================================
   ANIMATIONS CARTES PRODUITS
   ========================================================================== */
@keyframes bs-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.woocommerce ul.products li.product {
  animation: bs-fade-up 0.35s ease both;
}

.woocommerce ul.products li.product:nth-child(1)  { animation-delay: 0.04s; }
.woocommerce ul.products li.product:nth-child(2)  { animation-delay: 0.08s; }
.woocommerce ul.products li.product:nth-child(3)  { animation-delay: 0.12s; }
.woocommerce ul.products li.product:nth-child(4)  { animation-delay: 0.16s; }
.woocommerce ul.products li.product:nth-child(5)  { animation-delay: 0.20s; }
.woocommerce ul.products li.product:nth-child(6)  { animation-delay: 0.24s; }
.woocommerce ul.products li.product:nth-child(7)  { animation-delay: 0.28s; }
.woocommerce ul.products li.product:nth-child(8)  { animation-delay: 0.32s; }