/*
Theme Name: Storefront Fenix
Template: storefront
Version: 1.1
Description: Thème enfant Storefront — Fenix Services
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@600;700;800&display=swap');

/* =============================================
   VARIABLES
   ============================================= */
:root {
  --primary: #FF6B1A;
  --magenta: #FF2E88;
  --violet: #A855F7;
  --dark: #070B1F;
  --dark2: #0B1437;
  --green: #00FF88;
  --text: #1a1a2e;
  --muted: #6B7280;
}

/* =============================================
   FONTS
   ============================================= */
body,
p, span, li, a, input, button, select, textarea {
  font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: -.02em !important;
}

/* =============================================
   HEADER COMPLET
   ============================================= */
.site-header,
header.site-header {
  background: #070B1F !important;
  border-bottom: 2px solid rgba(255,107,26,.4) !important;
  padding: 0 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.4) !important;
}

.site-header .col-full {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logo + branding */
.site-branding {
  padding: 14px 0 !important;
}

.site-title {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.site-title a,
.site-title a:visited,
.site-title a:link {
  color: #fff !important;
  text-decoration: none !important;
  text-shadow: 0 0 20px rgba(255,107,26,.3) !important;
}

.site-title a:hover {
  color: #FF6B1A !important;
}

.site-description {
  color: rgba(255,255,255,.45) !important;
  font-size: .75rem !important;
  margin: 0 !important;
}

/* Custom logo */
.custom-logo-link img.custom-logo {
  max-height: 48px !important;
  width: auto !important;
}

/* =============================================
   NAVIGATION HEADER
   ============================================= */
.main-navigation,
.storefront-primary-navigation {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.main-navigation ul li a,
.storefront-primary-navigation ul li a {
  color: rgba(255,255,255,.82) !important;
  font-weight: 500 !important;
  font-size: .88rem !important;
  padding: 20px 14px !important;
  transition: color .2s !important;
  border: none !important;
}

.main-navigation ul li a:hover,
.storefront-primary-navigation ul li a:hover {
  color: #FF6B1A !important;
  background: transparent !important;
}

.main-navigation ul li:last-child a {
  background: linear-gradient(135deg, #FF6B1A, #FF2E88) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  margin: auto 0 !important;
  font-weight: 700 !important;
}

/* Panier */
.site-header-cart .cart-contents,
.storefront-header-cart .cart-contents {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
  transition: background .2s !important;
}

.site-header-cart .cart-contents:hover {
  background: rgba(255,107,26,.2) !important;
  border-color: rgba(255,107,26,.5) !important;
}

.site-header-cart .count {
  background: #FF6B1A !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 1px 6px !important;
  font-size: .72rem !important;
}

/* =============================================
   BODY & BACKGROUND
   ============================================= */
body {
  background: #f4f6ff !important;
  color: var(--text) !important;
}

/* =============================================
   HERO HOMEPAGE (widget Storefront)
   ============================================= */
.storefront-hero-section,
.storefront-hero {
  background: linear-gradient(135deg, #070B1F 0%, #0B1437 55%, #1A0F3D 100%) !important;
  padding: 72px 40px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
}

.storefront-hero-section::before {
  content: '' !important;
  position: absolute !important;
  top: -30% !important;
  right: -10% !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(255,107,26,.25) 0%, transparent 65%) !important;
  pointer-events: none !important;
}

.storefront-hero-section h1,
.storefront-hero h1,
.storefront-hero h2 {
  color: #fff !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.storefront-hero-section p,
.storefront-hero p {
  color: rgba(255,255,255,.72) !important;
  font-size: 1.05rem !important;
}

/* =============================================
   TITRES DE SECTIONS
   ============================================= */
h2.section-title,
.storefront-product-section > h2,
.woocommerce-products-header__title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.7rem !important;
  color: var(--text) !important;
  position: relative !important;
  padding-bottom: 14px !important;
  margin-bottom: 28px !important;
}

h2.section-title::after,
.storefront-product-section > h2::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 48px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #FF6B1A, #FF2E88) !important;
  border-radius: 2px !important;
}

/* =============================================
   CARDS PRODUITS
   ============================================= */
ul.products {
  gap: 24px !important;
}

ul.products li.product {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  transition: transform .25s, box-shadow .25s !important;
  padding: 0 !important;
}

ul.products li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.13) !important;
}

ul.products li.product a img {
  border-radius: 0 !important;
  transition: transform .4s !important;
}

ul.products li.product:hover a img {
  transform: scale(1.04) !important;
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  padding: 14px 18px 6px !important;
  margin: 0 !important;
}

ul.products li.product .price {
  color: #FF6B1A !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  padding: 0 18px 14px !important;
  display: block !important;
}

ul.products li.product .button,
ul.products li.product a.button {
  background: linear-gradient(135deg, #FF6B1A, #FF2E88) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  padding: 10px 18px !important;
  margin: 0 18px 18px !important;
  display: block !important;
  text-align: center !important;
  transition: opacity .2s, transform .15s !important;
  box-shadow: 0 6px 18px -4px rgba(255,107,26,.45) !important;
}

ul.products li.product .button:hover {
  opacity: .88 !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Badge promo */
ul.products li.product .onsale,
span.onsale {
  background: linear-gradient(135deg, #A855F7, #FF2E88) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: .72rem !important;
  padding: 4px 10px !important;
  border: none !important;
  top: 12px !important;
  left: 12px !important;
}

/* =============================================
   FICHE PRODUIT SIMPLE
   ============================================= */
.single-product div.product .product_title {
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 12px !important;
}

.single-product div.product p.price,
.single-product div.product span.price {
  color: #FF6B1A !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
}

.single-product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: linear-gradient(135deg, #FF6B1A, #FF2E88) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px 32px !important;
  box-shadow: 0 10px 28px -6px rgba(255,107,26,.5) !important;
  transition: transform .2s, opacity .2s !important;
}

.single-product .single_add_to_cart_button:hover {
  transform: translateY(-2px) !important;
  opacity: .9 !important;
  color: #fff !important;
}

/* =============================================
   BOUTONS GLOBAUX
   ============================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: linear-gradient(135deg, #FF6B1A, #FF2E88) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: opacity .2s !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  opacity: .88 !important;
  color: #fff !important;
}

/* =============================================
   PANIER & CHECKOUT
   ============================================= */
.woocommerce-cart table.cart td.actions .coupon .input-text {
  border-radius: 8px !important;
  border: 1.5px solid #ddd !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  padding: 24px !important;
}

#place_order {
  background: linear-gradient(135deg, #FF6B1A, #FF2E88) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  border: none !important;
  box-shadow: 0 10px 28px -6px rgba(255,107,26,.5) !important;
  width: 100% !important;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: #070B1F !important;
  color: rgba(255,255,255,.65) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  margin-top: 0 !important;
}

.site-footer a {
  color: rgba(255,255,255,.5) !important;
}

.site-footer a:hover {
  color: #FF6B1A !important;
}

.site-info {
  color: rgba(255,255,255,.35) !important;
  font-size: .78rem !important;
  text-align: center !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* =============================================
   BREADCRUMB
   ============================================= */
.woocommerce-breadcrumb {
  font-size: .82rem !important;
  color: var(--muted) !important;
  padding: 12px 0 !important;
}

.woocommerce-breadcrumb a {
  color: #FF6B1A !important;
}

/* =============================================
   NOTIFICATIONS
   ============================================= */
.woocommerce-message,
.woocommerce-info {
  border-top-color: #FF6B1A !important;
  border-radius: 10px !important;
}

.woocommerce-message::before {
  color: #FF6B1A !important;
}

/* =============================================
   BANNIERES PROMOTIONNELLES (homepage)
   ============================================= */
.storefront-product-section {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 36px !important;
  margin: 0 0 32px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .storefront-hero-section,
  .storefront-hero {
    padding: 48px 20px !important;
  }

  ul.products li.product {
    margin-bottom: 16px !important;
  }

  .site-header-cart .cart-contents span:not(.count) {
    display: none !important;
  }
}