/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* ============================================
   FONT DEFINITIONS
   ============================================ */

/* poppins-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src:url('/wp-content/themes/bb-theme-child/fonts/poppins-v24-latin-regular.woff2') format('woff2');
}

/* poppins-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src:url('/wp-content/themes/bb-theme-child/fonts/poppins-v24-latin-italic.woff2') format('woff2');
}

/* poppins-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src:url('/wp-content/themes/bb-theme-child/fonts/poppins-v24-latin-500.woff2') format('woff2');
}

/* poppins-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src:url('/wp-content/themes/bb-theme-child/fonts/poppins-v24-latin-600.woff2') format('woff2');
}

/* poppins-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src:url('/wp-content/themes/bb-theme-child/fonts/poppins-v24-latin-700.woff2') format('woff2');
}

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
  /* Shared Colors */
  --text-primary: #2d2d2d;
  --text-secondary: #6b6b6b;
  --background: #faf8f5;
  --background-light: #ffffff;
  
  /* Button Grey */
  --button-grey: #5a5a5a;
  --button-grey-hover: #404040;
  
  /* Asyle (Blue) Section */
  --asyle-primary: #184287;
  --asyle-light: #1a5fb4;
  --asyle-dark: #0a2d5f;
  --asyle-hover: #0d3669;
  
  /* LNPA (Brown) Section */
  --lnpa-primary: #BB6A29;
  --lnpa-light: #d4a574;
  --lnpa-dark: #8b4e18;
  --lnpa-hover: #9a5519;
}



/* ============================================
   GLOBAL TYPOGRAPHY
   ============================================ */

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--background-light);
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(36px, 4.5vw, 56px) !important;
  font-weight: 700;
  margin: 40px 0 24px !important;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(20px, 2.8vw, 36px) !important;
  font-weight: 600;
  margin: 20px 0 16px !important;
  line-height: 1.3 !important;
}

.pet26__title,
h2.pet26__title {
  font-size: clamp(18px, 2.2vw, 28px) !important;
  font-weight: 600;
  margin: 16px 0 12px !important;
  line-height: 1.3 !important;
}

h3 {
  font-size: clamp(18px, 2.2vw, 28px) !important;
  font-weight: 600;
  margin: 20px 0 16px !important;
  line-height: 1.3 !important;
}

/* WooCommerce Product Titles - All Screens */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3,
.woocommerce-page ul.products li.product h2,
.woocommerce-page ul.products li.product h3 {
  font-size: clamp(16px, 2vw, 22px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 10px 0 8px !important;
}

h4 {
  font-size: clamp(18px, 2.2vw, 24px) !important;
  font-weight: 600;
  margin: 16px 0 12px !important;
}

/* Hero and Subslogan */
.hero-slogan,
.fl-html .hero-slogan {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  font-size: clamp(38px, 5.5vw, 64px) !important;
  color: var(--text-primary) !important;
  line-height: 1.1;
  margin: 40px 0 24px;
  letter-spacing: -0.03em;
}

.hero-subslogan,
.subslogan,
.fl-html .hero-subslogan {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 26px) !important;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0 0;
  letter-spacing: -0.01em;
}

/* Additional Elements */
blockquote {
  font-style: italic;
  border-left: 4px solid var(--text-secondary);
  padding-left: 16px;
  margin: 24px 0;
  color: var(--text-primary);
  font-weight: 400;
}

ul, ol {
  margin: 0 0 24px 24px;
  padding: 0;
  line-height: 1.7;
  color: var(--text-primary);
}

ul li::marker {
  color: var(--text-secondary);
}

figcaption {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 8px;
  font-weight: 400;
}

/* Default Links (no section class) */
body a {
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: all 0.2s ease;
}

body a:hover {
  color: var(--text-secondary);
  text-decoration-thickness: 2px;
}

/* Background color for all buttons on the site and WooCommerce */
/* 1. CIBLE LE BOUTON CONTACT BEAVER BUILDER (SELON VOTRE INSPECTEUR) */
.fl-node-kc3si5xnqhol a.fl-button.contact-button,
.fl-builder-content .fl-node-kc3si5xnqhol a.fl-button,
a.fl-button.contact-button {
    background-color: #184287 !important;
    background: #184287 !important;
    color: #ffffff !important;
    border: 1px solid #184287 !important;
    opacity: 1 !important;
	padding: 1.5rem;
}

/* 2. CIBLE TOUS LES BOUTONS WOOCOMMERCE (PRODUIT ET PANIER) */
.woocommerce button.button.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button, 
.woocommerce a.button,
.woocommerce-page button.button,
.woocommerce-page a.button,
input[type="submit"].button {
    background-color: #184287 !important;
    background: #184287 !important;
    color: #ffffff !important;
    border: 1px solid #184287 !important;
    text-shadow: none !important;
	padding: 1.5rem;
}

/* 3. SURVOL (HOVER) POUR TOUS */
.fl-node-kc3si5xnqhol a.fl-button:hover,
a.fl-button.contact-button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background-color: #1656ad !important;
    background: #1656ad !important;
    border-color: #1656ad !important;
}

/* ============================================
   MOBILE RESPONSIVE TYPOGRAPHY
   ============================================ */

/* Medium screens and smaller desktops */
@media (max-width: 1024px) {
  h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
}

/* Tablets and small laptops */
@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.5;
  }
  
  h1 {
    font-size: 24px !important;
    margin: 20px 0 12px !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 20px !important;
    margin: 16px 0 10px !important;
    line-height: 1.3 !important;
  }
  
  .pet26__title,
  h2.pet26__title {
    font-size: 18px !important;
    margin: 14px 0 8px !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 18px !important;
    margin: 14px 0 10px !important;
    line-height: 1.3 !important;
  }
  
  h4 {
    font-size: 16px !important;
    margin: 12px 0 8px !important;
    line-height: 1.3 !important;
  }
  
  .hero-slogan,
  .fl-html .hero-slogan {
    font-size: 26px !important;
    margin: 20px 0 12px;
    line-height: 1.2 !important;
  }
  
  .hero-subslogan,
  .subslogan,
  .fl-html .hero-subslogan {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  
  /* WooCommerce product titles - Tablet */
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 8px 0 6px !important;
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  body {
    font-size: 14px;
    line-height: 1.5;
  }
  
  h1 {
    font-size: 20px !important;
    margin: 16px 0 10px !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 17px !important;
    margin: 12px 0 8px !important;
    line-height: 1.3 !important;
  }
  
  .pet26__title,
  h2.pet26__title {
    font-size: 16px !important;
    margin: 10px 0 6px !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 16px !important;
    margin: 12px 0 8px !important;
    line-height: 1.3 !important;
  }
  
  h4 {
    font-size: 15px !important;
    margin: 10px 0 6px !important;
    line-height: 1.3 !important;
  }
  
  .hero-slogan,
  .fl-html .hero-slogan {
    font-size: 22px !important;
    margin: 16px 0 10px;
    line-height: 1.2 !important;
  }
  
  .hero-subslogan,
  .subslogan,
  .fl-html .hero-subslogan {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  
  p {
    margin-bottom: 0.6rem;
  }
  
  ul, ol {
    margin: 0 0 16px 20px;
  }
  
  blockquote {
    padding-left: 12px;
    margin: 16px 0;
  }
  
  /* Button padding adjustment for mobile */
  .fl-node-kc3si5xnqhol a.fl-button.contact-button,
  .fl-builder-content .fl-node-kc3si5xnqhol a.fl-button,
  a.fl-button.contact-button,
  .woocommerce button.button.alt, 
  .woocommerce a.button.alt, 
  .woocommerce button.button, 
  .woocommerce a.button,
  .woocommerce-page button.button,
  .woocommerce-page a.button,
  input[type="submit"].button {
    padding: 0.9rem 1.2rem !important;
    font-size: 14px;
  }
  
  /* WooCommerce product titles - Mobile */
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 8px 0 6px !important;
  }
  
  /* WooCommerce product prices */
  .woocommerce ul.products li.product .price {
    font-size: 14px !important;
    margin: 6px 0 !important;
  }
}