/* ==========================================================================
   THEME ENFANT BCLC78 - CUSTOM.CSS COMPLET (VERSION FINALE)
   ========================================================================== */

/* 1. IMPORT DES POLICES */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans:wght@400;600;700&display=swap');

/* 2. VARIABLES GLOBALES */
:root {
  --bclc-green: #62A01E;       /* Vert Vif (Action) */
  --bclc-dark: #335213;        /* Vert Foncé (Structure) */
  --bclc-bg: #f8fafc;          /* Gris très clair (Fond) */
  --bclc-text: #0f172a;        /* Noir/Slate profond */
  --font-title: 'Anton', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-xl: 1.5rem;         /* Arrondi des cartes */
  --radius-btn: 3rem;          /* Arrondi des boutons (Pilule) */
}

body {
  background-color: var(--bclc-bg);
  color: var(--bclc-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   3. TYPOGRAPHIE
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-title);
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--bclc-dark);
}

.text-uppercase {
  letter-spacing: 0.05em;
}

/* ==========================================================================
   4. HEADER & NAVIGATION (DESKTOP)
   ========================================================================== */

/* Bandeau noir du haut (Contact / Connexion) */
.header-nav {
  background: var(--bclc-dark) !important;
  color: white;
  border-bottom: none;
}
.header-nav a, 
.header-nav .currency-selector, 
.header-nav .language-selector {
  color: white !important;
  font-weight: 600;
}

/* Zone Logo & Recherche (Fond Blanc sur Desktop) */
.header-top {
  background: white !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding-bottom: 1rem;
}

/* Fix Logo Desktop */
#_desktop_logo {
  min-width: 220px;
  padding-top: 0.5rem;
}
.header-top .logo {
  height: 70px;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Menu Principal */
.top-menu .category > a {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--bclc-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid transparent;
}
.top-menu .category > a:hover, 
.top-menu .category[data-depth="0"] > a:hover {
  color: var(--bclc-green) !important;
  border-bottom: 2px solid var(--bclc-green);
}

/* Barre de recherche (Arrondie) */
#search_widget form input[type=text] {
  border-radius: 2rem 0 0 2rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
#search_widget form button[type=submit] {
  border-radius: 0 2rem 2rem 0;
  background: var(--bclc-green);
}
#search_widget form button[type=submit] .search {
  color: white;
}

/* Panier (Header) */
.header-nav .blockcart, 
.header-nav .blockcart.active {
  background-color: var(--bclc-dark) !important;
  color: white !important;
}
.header-nav .blockcart a,
.header-nav .blockcart .cart-products-count,
.header-nav .blockcart .material-icons,
.header-nav .blockcart i {
  color: white !important;
}
.header-nav .blockcart:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   5. BOUTONS & ACTIONS
   ========================================================================== */
.btn-primary, 
.btn-primary.disabled, 
.product-add-to-cart .add-to-cart,
#wrapper .btn-primary,
#wrapper .btn-secondary,
.btn {
  background-color: var(--bclc-green) !important;
  border-color: var(--bclc-green) !important;
  color: white !important;
  border-radius: 50px !important; /* Style Pilule */
  font-family: var(--font-title);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 2rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease;
}

.btn-primary:hover, 
.product-add-to-cart .add-to-cart:hover {
  background-color: var(--bclc-dark) !important;
  border-color: var(--bclc-dark) !important;
  transform: translateY(-2px);
}

/* Champs de formulaire arrondis */
.form-control, 
input[type="text"], 
input[type="email"], 
input[type="password"] {
  border-radius: 1rem !important;
}

/* ==========================================================================
   6. FICHES PRODUITS
   ========================================================================== */
.product-miniature {
  background: white;
  border: none !important;
  border-radius: 1.5rem !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 20px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail img {
  border-radius: 1.5rem 1.5rem 0 0 !important;
}

.product-miniature .thumbnail-container {
  flex: 1 1 auto !important;
  height: 100% !important;
}

.product-description {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.product-miniature .product-title {
  min-height: 45px;
}

.product-miniature .product-title a {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--bclc-text);
  font-size: 1rem;
}

.product-price-and-shipping .price {
  color: var(--bclc-green);
  font-weight: 800;
  font-size: 1.3rem;
  font-family: var(--font-title);
}

/* Badges Promo / New */
.product-flags .product-flag {
  background: var(--bclc-dark);
  font-family: var(--font-title);
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: none;
  padding: 0.3rem 0.6rem;
}
.product-flags .product-flag.discount { background: #dc2626; }
.product-flags .product-flag.new { background: var(--bclc-green); }

/* ==========================================================================
   7. FOOTER DESKTOP (Centré & Unifié)
   ========================================================================== */
.footer-container {
  background-color: var(--bclc-dark) !important;
  color: white;
  border-top: 6px solid var(--bclc-green);
  padding-top: 3rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  /* Centrage des 3 colonnes */
  .footer-container .row {
    display: flex !important;
    justify-content: center !important;
    gap: 5rem; /* Espace large entre les colonnes */
  }

  /* Largeur automatique selon le texte */
  .footer-container .col-md-4,
  .footer-container .col-sm-12,
  .footer-container .links,
  .footer-container .block-contact {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    text-align: left;
  }
}

/* Styles des Titres Footer (Unifiés) */
.footer-container h4, 
.footer-container .h3, 
.footer-container .block-contact-title,
.footer-container .wrapper .title,
.footer-container .title {
  color: white !important;
  font-size: 1.4rem !important;
  font-family: var(--font-title) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}

/* Styles des Textes & Liens (Gris clair + Une seule ligne) */
.footer-container li a, 
.footer-container a,
.block-contact, 
.block-contact span, 
.block-contact div,
.block-contact .contact-rich,
.block-contact .data {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: var(--font-body);
  font-size: 0.95rem;
  white-space: nowrap !important; /* Force le texte sur une ligne */
  display: block;
}

.footer-container li a:hover {
  color: var(--bclc-green) !important;
  padding-left: 5px;
}

/* Newsletter & Copyright */
.block_newsletter form input[type=text] {
  border-radius: 2rem;
  border: none;
  padding: 10px 15px;
}
.footer-container .bottom-footer {
  margin-top: 2rem;
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   8. FOOTER MOBILE (Lisibilité)
   ========================================================================== */
@media (max-width: 767px) {
  /* Garder le fond Vert Foncé quand les menus s'ouvrent */
  .footer-container .collapse,
  .footer-container .collapse.show,
  .footer-container .links .wrapper {
      background-color: var(--bclc-dark) !important;
  }
  
  /* Liens en blanc */
  .footer-container .collapse li a,
  .footer-container .links .wrapper li a {
      color: white !important;
      border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* Centrage des titres sur mobile */
  .footer-container .h3, 
  .footer-container h4,
  .block-contact-title {
      text-align: center;
      margin-top: 15px;
  }
}

/* ==========================================================================
   9. HEADER MOBILE (FIX FINAL : Texte Fluide + Bandeau)
   ========================================================================== */
@media (max-width: 767px) {
    
    /* Bandeau Vert élargi */
    .header-top {
        background-color: var(--bclc-dark) !important;
        box-shadow: none !important;
        padding-top: 15px !important;
        padding-bottom: 50px !important; /* Place pour le texte + recherche */
        height: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }

    /* Masquer Logo Image */
    #_mobile_logo img,
    .header-top .logo {
        display: none !important;
    }

    /* Conteneur Texte */
    #_mobile_logo {
        display: block !important;
        width: 100%;
        text-align: center;
        margin-bottom: 10px !important; 
        padding: 0 5px;
    }

    /* Le Texte : Taille Fluide (6.5% de l'écran) & Sans retour à la ligne */
    #_mobile_logo::before {
        content: "Badminton Club Le Chesnay";
        color: white !important;
        font-family: var(--font-title);
        
        white-space: nowrap !important; /* JAMMAIS de retour à la ligne */
        font-size: 6.5vw;               /* Taille adaptative */
        
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1.2;
        display: block;
    }
    
    /* Barre de recherche centrée */
    #search_widget {
        margin-top: 5px !important;
        position: relative !important;
        z-index: 10;
        width: 90%;
        max-width: 350px;
    }
}

/* 1. Cacher le menu latéral gauche (Accueil, Textile, Volants...) */
#left-column {
    display: none !important;
}

/* 2. Faire passer la liste des produits en pleine largeur suite au retrait du menu */
#content-wrapper {
    width: 100% !important;
}

/* 3. Cacher la tuile blanche d'en-tête (Titre de catégorie et image) */
.block-category {
    display: none !important;
}

/* Ajoute un espace vertical entre les rangées de produits */
#products .products.row, 
.featured-products .products {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 0; /* 30px d'espace vertical entre les lignes */
}

/* Assure que chaque carte produit garde une marge basse de sécurité */
article.product-miniature {
    margin-bottom: 30px !important;
}

/* 1. Ajouter un espace important sous les coordonnées */
.footer-container #contact-infos, 
.footer-container .block-contact {
    margin-bottom: 40px !important; /* Crée l'espace avec la ligne du dessous */
    text-align: center; /* Centre le texte pour un rendu plus propre */
}

/* 2. Style spécifique pour la ligne de copyright */
.footer-container .copyright, 
.footer-container .text-center {
    display: block;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Ajoute une ligne de séparation discrète */
    color: #ccc; /* Rend le copyright légèrement plus discret */
}

/* 3. Décalage horizontal si vous préférez le mettre à gauche */
/* .footer-container #contact-infos {
    text-align: left !important;
    padding-left: 15px;
}
*/