/* ================================
   Cel'in — CSS additionnel propre
   Thème : Astra + WooCommerce
   ================================ */

/* ---------- Reset haut de page ---------- */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Supprimer au maximum les marges/paddings au-dessus du contenu */
.site,
.site-content,
.entry-content,
.ast-plain-container .site-content > .ast-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ---------- Variables couleurs ---------- */
:root {
  --celin-primary: #A6822E;
  --celin-primary-dark: #8F6F26;
  --celin-primary-light: #C6A84A;
  --celin-text: #1F1A14;
  --celin-muted: #6B7280;
  --celin-header-bg: #3E2B1F;      /* Marron */
  --celin-header-text: #ffffff;
}

/* =====================================================
   1) HEADER DESKTOP
   ===================================================== */

.ast-primary-header-bar {
  background-color: var(--celin-header-bg) !important;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Typo commune : desktop + mobile */
.main-header-menu > li > a,
#ast-hf-mobile-menu .menu-link {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Liens desktop */
.main-header-menu > li > a {
  color: var(--celin-header-text) !important;
  padding: 12px 18px;
  transition: color 0.3s ease;
}

.main-header-menu > li:hover > a,
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current_page_item > a,
.main-header-menu > li.current-menu-ancestor > a {
  color: var(--celin-primary-light) !important;
}

/* Sous-menus desktop */
.main-header-menu .sub-menu {
  background-color: var(--celin-header-bg) !important;
  padding: 0;
}

.main-header-menu .sub-menu a {
  color: #F0E6C5 !important;
  padding: 10px 16px;
  font-weight: 500;
  display: block;
}

.main-header-menu .sub-menu a:hover {
  background-color: rgba(255,255,255,0.05);
  color: var(--celin-primary-light) !important;
}

/* =====================================================
   2) BOUTON "Contact"
   ===================================================== */

.ast-builder-header .ast-button-wrap .menu-link {
  background-color: var(--celin-primary) !important;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.ast-builder-header .ast-button-wrap .menu-link:hover {
  background-color: var(--celin-primary-light) !important;
}

/* =====================================================
   3) MENU MOBILE / OFF-CANVAS
   ===================================================== */

/* Fond marron partout dans le panneau mobile */
#ast-hf-mobile-menu,
#ast-hf-mobile-menu .sub-menu,
.ast-mobile-header-wrap,
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-mobile-header-content {
  background-color: var(--celin-header-bg) !important;
}

/* Liens dans le menu mobile */
#ast-hf-mobile-menu .menu-link {
  color: #F0E6C5 !important;
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Hover mobile */
#ast-hf-mobile-menu .menu-link:hover {
  color: var(--celin-primary-light) !important;
  background-color: rgba(255,255,255,0.05);
}

/* Icône hamburger et flèches sous-menus */
.ast-mobile-menu-buttons .ast-button,
.ast-header-break-point .ast-menu-toggle {
  color: #fff !important;
}

/* =====================================================
   4) WooCommerce — styles principaux
   ===================================================== */

/* Bouton YITH "ajouter au devis" */
.yith-ywraq-add-to-quote.add-to-quote-button a,
.yith-ywraq-add-to-quote.add-to-quote-button button,
.button.yith-ywraq-add-button {
  background: var(--celin-primary);
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 500;
}

/* Cacher la quantité sur les produits (sur-mesure) */
.single-product .quantity {
  display: none;
}

/* Onglets WooCommerce */
.woocommerce-tabs .panel {
  padding-top: 10px;
}
.woocommerce-tabs .panel h2 {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Grille produits */
.woocommerce-loop-product__title {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--celin-text);
  text-align: center;
}

.woocommerce ul.products li.product .price {
  color: var(--celin-primary);
  font-weight: 500;
  text-align: center;
}

.woocommerce ul.products li.product {
  margin-bottom: 40px;
  text-align: center;
}

/* Masquer "Ajouter au panier" dans la grille */
.woocommerce ul.products li.product a.button,
.ast-woocommerce-item .button.add_to_cart_button {
  display: none !important;
}

/* =====================================================
   5) Galerie produit
   ===================================================== */

.single-product div.product div.images img {
  max-height: 420px !important;
  object-fit: contain !important;
}

/* vignettes */
.single-product .woocommerce div.product div.images .flex-control-thumbs img {
  width: 84px !important;
  height: 84px !important;
  object-fit: cover !important;
  border-radius: 6px;
  border: 1px solid #eee;
}

/* === Panneau menu mobile : conteneurs parents === */
.ast-builder-grid-row-container-inner,
.ast-builder-grid-row-container,
.ast-builder-layout-element,
.ast-mobile-header-content,
.ast-main-header-bar-navigation {
    background-color: #3E2B1F !important; /* marron */
}

/* === Liste du menu mobile === */
#ast-hf-mobile-menu,
#ast-hf-mobile-menu > li,
#ast-hf-mobile-menu .sub-menu,
#ast-hf-mobile-menu .sub-menu li {
    background-color: #3E2B1F !important;
}

/* === Liens === */
#ast-hf-mobile-menu .menu-link {
    color: #F0E6C5 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* === Chevron === */
.ast-menu-toggle {
    color: #F0E6C5 !important;
}

/* === Hover === */
#ast-hf-mobile-menu .menu-link:hover {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--celin-primary-light) !important;
}

/* Coller complètement l'en-tête en haut de la page */
#masthead,
.site-header,
.ast-desktop-header,
.ast-primary-header-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* === MENU TABLETTE : appliquer le style du menu mobile === */

/* Fond du panneau/tablette */
.ast-header-break-point .main-header-bar-navigation,
.ast-header-break-point .main-header-menu,
.ast-header-break-point .main-header-menu > li,
.ast-header-break-point .sub-menu,
.ast-header-break-point .sub-menu li {
    background-color: #3E2B1F !important;
}

/* Liens du menu tablette */
.ast-header-break-point .main-header-menu a {
    color: #F0E6C5 !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

/* Chevron tablette */
.ast-header-break-point .ast-menu-toggle {
    color: #F0E6C5 !important;
}

/* Cel'In — bloc catégories en bas des pages catégories : forcer en dessous */
.celin-cat-footer{
  clear: both;
  width: 100%;
  display: block;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,.12);
}

.celin-cat-footer__title{
  margin: 0 0 16px;
  font-size: 1.8rem;
}

/* optionnel: éviter que ça se coince dans une mise en page en colonnes */
.woocommerce .celin-cat-footer .products{
  width: 100%;
}