/*
 Theme Name:   SysLink221 – Divi Child
 Theme URI:    https://www.syslink221.com
 Description:  Thème enfant Divi pour la boutique en ligne SysLink221 (matériel Cisco & accessoires informatiques). Nécessite Divi + WooCommerce.
 Author:       SysLink221
 Author URI:   https://www.syslink221.com
 Template:     Divi
 Version:      1.1.0
 Text Domain:  syslink221
*/

/* =========================================================
   1. Couleurs de la marque (tirées du logo)
   ========================================================= */
:root {
  --sl-navy:      #0B1F5C;   /* bleu nuit "SYS" */
  --sl-navy-dark: #061440;
  --sl-blue:      #0A8EE6;   /* bleu "LINK" */
  --sl-cyan:      #00B4F0;   /* reflets cyan */
  --sl-sky:       #E8F5FD;
  --sl-ink:       #14213D;
  --sl-muted:     #5B6B85;
  --sl-line:      #DCE6F2;
  --sl-bg:        #F5F8FC;
  --sl-white:     #FFFFFF;
  --sl-green:     #25D366;   /* WhatsApp */
  --sl-radius:    10px;
  --sl-shadow:    0 6px 24px rgba(11, 31, 92, .08);
  --sl-gradient:  linear-gradient(120deg, #061440 0%, #0B1F5C 40%, #0A8EE6 85%, #00B4F0 100%);
}

/* =========================================================
   2. Typographie & base
   ========================================================= */
body,
.et_pb_module,
input, select, textarea, button {
  font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
  color: var(--sl-ink);
}
h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.woocommerce-loop-product__title {
  font-family: 'Montserrat', 'Poppins', Arial, sans-serif;
  color: var(--sl-navy);
  font-weight: 700;
  letter-spacing: -.01em;
}
a { color: var(--sl-blue); }
a:hover { color: var(--sl-navy); }

/* =========================================================
   3. Barre d'information supérieure
   ========================================================= */
.sl-topbar {
  background: var(--sl-navy-dark);
  color: #CFE3FF;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 0;
  position: relative;
  z-index: 100000;
}
.sl-topbar__inner {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sl-topbar a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
.sl-topbar a:hover { color: var(--sl-cyan); }
.sl-topbar__items { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 680px) {
  .sl-topbar__inner { justify-content: center; text-align: center; }
  .sl-topbar__msg { display: none; }
}

/* =========================================================
   4. En-tête Divi
   ========================================================= */
#main-header { box-shadow: 0 2px 14px rgba(11, 31, 92, .07) !important; }
#top-menu li a { color: var(--sl-navy) !important; font-weight: 600; }
#top-menu li.current-menu-item > a,
#top-menu li a:hover { color: var(--sl-blue) !important; opacity: 1 !important; }
#et_top_search .et-search-form input,
.et_search_outer input { color: var(--sl-navy); }
.et-cart-info span { color: var(--sl-navy); font-weight: 600; }

/* =========================================================
   5. Boutons
   ========================================================= */
body .et_pb_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--sl-blue) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  transition: background .2s ease, transform .2s ease;
}
body .et_pb_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--sl-navy) !important;
  padding: 12px 24px !important;
  transform: translateY(-1px);
}
body .et_pb_button:after,
.woocommerce a.button:after,
.woocommerce button.button:after { display: none !important; }

.sl-btn-outline.et_pb_button {
  background: transparent !important;
  border: 2px solid #FFFFFF !important;
}
.sl-btn-outline.et_pb_button:hover { background: rgba(255,255,255,.12) !important; }

/* =========================================================
   6. Sections spéciales (classes à utiliser dans Divi)
   ========================================================= */
.sl-hero { background: var(--sl-gradient) !important; position: relative; overflow: hidden; }
.sl-hero h1, .sl-hero h2, .sl-hero p { color: #FFFFFF !important; }
.sl-hero::after {
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 60px solid rgba(0, 180, 240, .14);
  pointer-events: none;
}
.sl-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sl-cyan);
  margin-bottom: 10px;
}
.sl-section-soft { background: var(--sl-bg) !important; }
.sl-section-navy { background: var(--sl-navy) !important; }
.sl-section-navy h2, .sl-section-navy h3, .sl-section-navy h4, .sl-section-navy p { color: #FFFFFF !important; }

/* Cartes catégories / atouts */
.sl-card {
  background: #FFFFFF;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sl-card:hover {
  transform: translateY(-4px);
  border-color: var(--sl-cyan);
  box-shadow: 0 12px 30px rgba(10, 142, 230, .16);
}
.sl-card .et-pb-icon { color: var(--sl-blue) !important; }

/* Bande de chiffres clés */
.sl-stats .et_pb_number_counter .percent p,
.sl-stats .et_pb_number_counter .percent { color: var(--sl-cyan) !important; }

/* =========================================================
   7. WooCommerce – boutique et fiches produits
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #FFFFFF;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 16px !important;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--sl-cyan);
  box-shadow: var(--sl-shadow);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  line-height: 1.35;
  min-height: 2.7em;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sl-navy) !important;
  font-weight: 700;
}
.woocommerce span.onsale {
  background: var(--sl-cyan) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  line-height: 1.4 !important;
}
.sl-price-on-request {
  display: inline-block;
  color: var(--sl-blue);
  font-weight: 700;
  font-size: .95em;
}
.sl-sku {
  display: block;
  font-size: 12px;
  color: var(--sl-muted);
  margin: 4px 0 6px;
  font-family: Consolas, Menlo, monospace;
}
.sl-quote-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--sl-green) !important;
  color: #FFFFFF !important;
  border-radius: 8px;
  padding: 12px 22px;
  font-weight: 600;
  text-decoration: none;
  margin: 10px 0 18px;
}
.sl-quote-btn:hover { background: #1DA851 !important; color: #FFFFFF !important; }
.sl-quote-btn svg { width: 18px; height: 18px; fill: currentColor; }

.sl-trust {
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--sl-sky);
  border-radius: var(--sl-radius);
  font-size: 14px;
}
.sl-trust li { padding: 3px 0 3px 22px; position: relative; }
.sl-trust li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--sl-blue); font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--sl-navy) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #FFFFFF !important; }

/* Widgets de filtre */
.widget_product_categories ul li a,
.woocommerce-widget-layered-nav-list a { color: var(--sl-ink); }
.widget_product_categories ul li a:hover { color: var(--sl-blue); }

/* =========================================================
   8. Bouton WhatsApp flottant
   ========================================================= */
.sl-whatsapp-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 99999;
  display: flex; align-items: center; gap: 10px;
  background: var(--sl-green);
  color: #FFFFFF !important;
  border-radius: 40px;
  padding: 12px 18px 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  transition: transform .2s ease;
}
.sl-whatsapp-float:hover { transform: scale(1.05); color: #FFFFFF !important; }
.sl-whatsapp-float svg { width: 26px; height: 26px; fill: #FFFFFF; }
@media (max-width: 680px) {
  .sl-whatsapp-float span { display: none; }
  .sl-whatsapp-float { padding: 14px; }
}

/* =========================================================
   9. Pied de page
   ========================================================= */
#main-footer { background: var(--sl-navy-dark) !important; }
#main-footer .footer-widget h4 { color: #FFFFFF !important; }
#main-footer .footer-widget, #main-footer .footer-widget a { color: #B8C7E0 !important; }
#main-footer .footer-widget a:hover { color: var(--sl-cyan) !important; }
#footer-bottom { background: #040D2E !important; }
#footer-info, #footer-info a { color: #8FA3C7 !important; }

/* =========================================================
   10. Titres de la page d'accueil (tailles adaptatives)
   ========================================================= */
.sl-h1 { font-size: 46px !important; line-height: 1.1 !important; }
.sl-h2 { font-size: 34px !important; line-height: 1.2 !important; }
.sl-lead { font-size: 18px; line-height: 1.6; }
.sl-hero .et_pb_button_module_wrapper { display: inline-block; margin: 0 12px 12px 0; }
.sl-cta .et_pb_button_module_wrapper { display: inline-block; margin: 0 0 12px 12px; }
.sl-cta .et_pb_column:last-child { text-align: right; }
img { max-width: 100%; height: auto; }
#page-container { overflow-x: hidden; }

/* =========================================================
   11. RESPONSIVE – tablette (≤ 980 px)
   ========================================================= */
@media (max-width: 980px) {
  .sl-h1 { font-size: 36px !important; }
  .sl-h2 { font-size: 28px !important; }
  .sl-hero .et_pb_row { padding-top: 70px !important; padding-bottom: 70px !important; }
  .sl-hero::after { width: 300px; height: 300px; border-width: 40px; right: -100px; top: -100px; }
  .sl-sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sl-cta .et_pb_column:last-child { text-align: left; }
  .sl-cta .et_pb_button_module_wrapper { margin: 0 12px 12px 0; }

  /* Menu mobile Divi */
  .mobile_nav .mobile_menu_bar:before { color: var(--sl-navy) !important; }
  .et_mobile_menu { border-top: 3px solid var(--sl-blue) !important; }
  .et_mobile_menu li a { color: var(--sl-navy) !important; font-weight: 600; padding: 12px 5% !important; }
  .et_mobile_menu li a:hover { background: var(--sl-sky) !important; }
}

/* =========================================================
   12. RESPONSIVE – téléphone (≤ 767 px)
   ========================================================= */
@media (max-width: 767px) {
  .sl-h1 { font-size: 30px !important; }
  .sl-h2 { font-size: 24px !important; }
  .sl-lead { font-size: 16px; }
  .sl-eyebrow { font-size: 11px; }
  .sl-hero .et_pb_row { padding-top: 48px !important; padding-bottom: 48px !important; }
  .sl-sec { padding-top: 44px !important; padding-bottom: 44px !important; }
  .et_pb_row { width: 88% !important; }

  /* Boutons pleine largeur, faciles à toucher */
  .sl-hero .et_pb_button_module_wrapper,
  .sl-cta .et_pb_button_module_wrapper { display: block; margin: 0 0 12px 0; }
  .sl-hero .et_pb_button, .sl-cta .et_pb_button {
    display: block !important; width: 100%; text-align: center; min-height: 48px;
  }

  /* Cartes plus compactes */
  .sl-card { padding: 20px 18px !important; }
  .sl-card:hover { transform: none; }

  /* Grille produits : 2 par ligne */
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .et_pb_shop ul.products li.product {
    width: 48% !important; margin: 0 4% 16px 0 !important;
    float: left !important; clear: none !important; padding: 10px !important;
  }
  .woocommerce ul.products li.product:nth-child(2n),
  .woocommerce-page ul.products li.product:nth-child(2n),
  .et_pb_shop ul.products li.product:nth-child(2n) { margin-right: 0 !important; }
  .woocommerce ul.products li.product:nth-child(2n+1),
  .woocommerce-page ul.products li.product:nth-child(2n+1),
  .et_pb_shop ul.products li.product:nth-child(2n+1) { clear: both !important; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; min-height: 0; }
  .woocommerce ul.products li.product .button { font-size: 13px !important; padding: 10px 8px !important; width: 100%; text-align: center; }

  /* Fiche produit */
  .sl-quote-btn { display: flex !important; justify-content: center; width: 100%; box-sizing: border-box; }
  .woocommerce div.product form.cart .button { width: 100%; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li { display: block; margin: 0 0 4px !important; }

  /* Panier & paiement : tableaux lisibles */
  .woocommerce table.shop_table_responsive tr td { padding: 10px !important; }
  .woocommerce-checkout #payment div.form-row { padding: 1em 0 !important; }
  .entry-content table { display: block; overflow-x: auto; }

  /* Pied de page centré */
  #main-footer .footer-widget { text-align: center; }
}

/* Très petits écrans (≤ 400 px) : 1 produit par ligne */
@media (max-width: 400px) {
  .sl-h1 { font-size: 26px !important; }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .et_pb_shop ul.products li.product { width: 100% !important; margin-right: 0 !important; }
}