/* ==========================================================================
VARIABLES & TYPOGRAPHIE
========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
/* Palette Colorimétrique Nature & Artisanat */
--sauge-feutree: #8EAE98; /* Couleur principale, boutons, éléments actifs */
--vert-epinette: #2D4030; /* Structure, en-têtes et typographies majeures */
--sable-chaud: #E8DFD1;   /* Arrière-plans secondaires et encadrés */
--terre-cuite: #C87D55;   /* Accentuation, coups de coeur, prix */
--lin-lumineux: #FCFBF7;  /* Fond général */

/* Typographies */
--font-titres: 'Cormorant Garamond', serif;
--font-textes: 'Lora', serif;
}

/* ==========================================================================
2. STYLES GLOBAUX (Fonds & Typographies de base)
========================================================================== */

/* Application du fond général et de la police de texte (Open Sans) */
body, html {
font-family: var(--font-textes) !important;
background-color: var(--lin-lumineux) !important;
color: var(--vert-epinette);
}

/* Application de la police Serif (Cormorant Garamond) pour les titres */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.block-category h1, .product-information h1, .step-title {
font-family: var(--font-titres) !important;
color: var(--vert-epinette) !important;
text-transform: none !important;
}

/* Liens génériques */
a {
color: var(--vert-epinette);
transition: all 0.3s ease;
}

a:hover, a:focus {
color: var(--vert-epinette) !important;
text-decoration: underline !important;
text-decoration-color: var(--sauge-feutree) !important;
text-decoration-thickness: 4px !important;
text-underline-offset: 4px !important;
}

/* ==========================================================================
3. HEADER & NAVIGATION
========================================================================== */

#header {
background-color: var(--lin-lumineux);
border-bottom: 1px solid var(--sable-chaud);
}

/* Conserver la casse d'origine pour les menus (tels que saisis, sans majuscule forcée) */
.menu a, .top-menu a, .nav-link, #header .menu a, .dropdown-item, .category-sub-link {
text-transform: none !important;
}

/* Agrandissement de la police du menu principal et espacement pour le fond au survol */
.menu a, .top-menu a, .nav-link, #header .menu a {
font-size: 1.15rem;
padding: 0.5rem 1rem;
border-radius: 6px;
display: inline-block;
}

/* Ajout d'un fond (Sable Chaud) et désactivation du soulignement natif au survol */
.menu a:hover, .top-menu a:hover, .nav-link:hover, #header .menu a:hover {
background-color: var(--sable-chaud) !important;
text-decoration: none !important;
color: var(--vert-epinette) !important;
}

/* ==========================================================================
4. BOUTONS & BADGES (Sauge Feutrée & Terre Cuite)
========================================================================== */

/* Boutons principaux (ex: Ajouter au panier) */
.btn-primary {
background-color: var(--sauge-feutree) !important;
border-color: var(--sauge-feutree) !important;
color: #ffffff !important;
border-radius: 6px !important;
font-family: var(--font-textes);
text-transform: none !important; /* Rendre le texte naturel "Ajouter" */
font-weight: 500;
padding: 0.5rem 1.5rem;
transition: all 0.3s ease;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: var(--vert-epinette) !important;
border-color: var(--vert-epinette) !important;
}

/* Badges et étiquettes produits */
.product-flags li.product-flag {
background-color: var(--sable-chaud);
color: var(--vert-epinette);
border-radius: 4px;
font-family: var(--font-textes);
font-size: 0.8rem;
padding: 0.2rem 0.6rem;
text-transform: none;
}

.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale {
background-color: var(--terre-cuite) !important;
color: #ffffff !important;
}

/* ==========================================================================
5. CATALOGUE & CARTES PRODUITS (Maquette 3)
========================================================================== */

/* Encadrés des cartes produits */
#products .thumbnail-container,
.featured-products .thumbnail-container,
.product-accessories .thumbnail-container,
.product-miniature .thumbnail-container {
background: var(--lin-lumineux) !important;
border: 1px solid var(--sable-chaud) !important;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(45, 64, 48, 0.05); /* Ombre douce Vert Epinette */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#products .thumbnail-container:hover,
.featured-products .thumbnail-container:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(45, 64, 48, 0.1);
}

/* Titre du produit dans la grille */
#products .product-title a,
.featured-products .product-title a {
font-family: var(--font-titres) !important;
color: var(--vert-epinette) !important;
font-size: 1.15rem !important;
font-weight: 600;
text-align: left;
display: block;
padding: 0.5rem 1rem 0;
}

/* Description courte dans la grille (si présente) */
#products .product-description-short,
.product-miniature .product-description-short {
font-family: var(--font-textes);
color: var(--vert-epinette);
font-size: 0.85rem;
text-align: left;
padding: 0 1rem;
}

/* Prix mis en valeur en Terre Cuite */
#products .product-price-and-shipping,
.featured-products .product-price-and-shipping,
.product-price {
color: var(--terre-cuite) !important;
font-weight: 700;
font-size: 1.1rem;
text-align: left;
padding: 0.5rem 1rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}

/* ==========================================================================
6. FILTRES DE RECHERCHE (Maquette 3 - Accordéons)
========================================================================== */

/* Fond des filtres */
#search_filters, #search_filters_brands, #search_filters_suppliers {
background-color: var(--sable-chaud) !important;
border-radius: 8px;
padding: 1.5rem;
border: none;
}

#search_filters > .h6 {
font-family: var(--font-titres) !important;
color: var(--vert-epinette);
text-transform: uppercase;
font-size: 1.2rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--lin-lumineux);
padding-bottom: 0.5rem;
}

#search_filters .facet .facet-title {
font-family: var(--font-textes);
color: var(--vert-epinette);
font-weight: 600;
font-size: 1rem;
}

/* Checkboxes personnalisées pour correspondre aux couleurs */
.custom-checkbox input[type="checkbox"]:checked + span {
background-color: var(--sauge-feutree);
border-color: var(--sauge-feutree);
}

.custom-checkbox input[type="checkbox"] + span {
border-color: var(--vert-epinette);
border-radius: 3px;
}

/* ==========================================================================
7. FICHE PRODUIT DÉTAILLÉE (Maquette 5)
========================================================================== */

/* Structure des données techniques (Tableau / Liste) */
.product-features > dl.data-sheet {
border-top: 1px solid var(--sable-chaud);
margin-top: 1rem;
}

.product-features > dl.data-sheet dd.value,
.product-features > dl.data-sheet dt.name {
background: transparent !important; /* Retrait de l'alternance de base */
border-bottom: 1px solid var(--sable-chaud);
color: var(--vert-epinette);
font-family: var(--font-textes);
min-height: auto;
padding: 0.8rem 0.5rem;
margin: 0;
}

.product-features > dl.data-sheet dt.name {
font-weight: 600;
}

/* Conseil du pépiniériste (Mise en évidence) */
.conseil-pepinieriste,
.product-information .alert-info {
background-color: var(--sable-chaud);
border-left: 4px solid var(--terre-cuite);
color: var(--vert-epinette);
padding: 1rem;
border-radius: 0 4px 4px 0;
font-family: var(--font-textes);
font-size: 0.9rem;
margin-top: 1.5rem;
}

/* ==========================================================================
8. ÉLÉMENTS ANNEXES (Pagination, Miettes de pain)
========================================================================== */

.breadcrumb {
background-color: transparent;
}
.breadcrumb li a {
color: var(--vert-epinette);
font-family: var(--font-textes);
}

.pagination .current a {
color: var(--lin-lumineux);
background-color: var(--sauge-feutree);
border-radius: 4px;
}
.pagination a:hover {
color: var(--sauge-feutree);
}

#subcategories {
    margin-bottom: 20px;
    border-top: 1px solid var(--sable-chaud)
  }
  
  #subcategories .subcategory-heading {
    margin-bottom: 20px;
    font-weight: 500
  }
  
  #subcategories ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 -10px
  }
  
  #subcategories ul li {
    width: calc(100% / 4 - 20px);
    min-width: 200px;
    margin: 10px;
    text-align: center
  }
  
  #subcategories ul li .subcategory-image {
    padding: 0 0 8px
  }
  
  #subcategories ul li .subcategory-image a {
    display: block;
    padding: 9px;
    border: 1px solid var(--sable-chaud)
  }
  
  #subcategories .subcategory-image a img {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
  }