/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/storefront/
Template: storefront
Author: Automattic
Author URI: https://woocommerce.com/
Description: Storefront is the perfect theme for your next WooCommerce project.
Version: 3.6.0.1621267277
Updated: 2021-05-17 17:01:17
*/

/* =========================================================
   MARIEBERTE — STOREFRONT CHILD (CUSTOM)
   Etat: propre, large, 4 colonnes, carré partout, texte à gauche
========================================================= */

/* ---------- 1) Variables ---------- */
:root{
  --site-max: 1800px;     /* largeur globale (mets 1720 si tu veux moins large) */
  --site-pad: 2rem;
  --grid-gap: 1rem;
}

@media (max-width: 768px){
  :root{ --site-pad: 1.25rem; }
}

/* ---------- 2) Containers alignés (header/content/footer) ---------- */
.col-full{
  max-width: var(--site-max) !important;
  padding-left: var(--site-pad) !important;
  padding-right: var(--site-pad) !important;
  box-sizing: border-box;
}

/* Le fond du header peut rester full width, on aligne juste le contenu */
.site-header{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 3.235801032em;
}

/* ---------- 3) Full width WooCommerce + suppression colonne fantôme ---------- */
.woocommerce-page .content-area,
.woocommerce-page #primary,
.woocommerce-page #main,
.woocommerce .content-area,
.woocommerce #primary,
.woocommerce #main{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

.woocommerce .widget-area,
.woocommerce-page .widget-area{
  display: none !important;
}

/* ---------- 4) Header : simplification ---------- */
.woocommerce-active .site-header .site-search{
  display: none !important;
}

/* ---------- 5) Widgets : enlever icônes ---------- */
.widget_product_categories ul li::before,
.widget_nav_menu ul li::before{
  content: none !important;
}

.secondary ul li a::before{
  display: none !important;
}

/* ---------- 6) WooCommerce : nettoyage ---------- */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering{
  display: none !important;
}

/* Boutons listing (add to cart, etc.) */
.woocommerce ul.products li.product .button{
  display: none !important;
}

/* WC Blocks : add to cart */
.wc-block-grid__product .wc-block-grid__product-add-to-cart{
  display: none !important;
}

/* Fiche produit : catégories + SKU */
.product_meta .posted_in,
.product_meta .sku_wrapper{
  display: none !important;
}

/* Listing : masquer catégories sous produits (toutes variantes courantes) */
.archive.woocommerce .product-categories,
.archive.woocommerce p.categories,
.archive.woocommerce .loop-product-categories,
.archive.woocommerce .posted-in,
.archive.woocommerce .wc-block-grid__product-categories,
.archive.woocommerce .wc-block-components-product-categories{
  display: none !important;
}

/* Breadcrumbs si présent */
.woocommerce .x-breadcrumbs{
  display: none !important;
}

/* Hide title helper */
.hidetitle .entry-title{
  display: none !important;
}

/* ---------- 7) Grille produits : 4 colonnes partout (shop + catégories + home) ---------- */
/* IMPORTANT : Storefront met width:100% + float + text-align:center sur li.product.
   On neutralise ces 3 points. */
@media (min-width: 768px){

  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .home ul.products,
  .wc-block-grid__products{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--grid-gap) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .home ul.products li.product,
  .wc-block-grid__products .wc-block-grid__product{
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;

    /* <- le point qui te revient en “centre” sinon */
    text-align: left !important;
  }

  /* Pseudo-éléments clearfix qui cassent parfois la grid */
  .woocommerce ul.products::before,
  .woocommerce ul.products::after,
  .home ul.products::before,
  .home ul.products::after{
    content: none !important;
    display: none !important;
  }
}

/* ---------- 8) Images : carré partout ---------- */
/* Classique */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.home ul.products li.product img{
  width: 100% !important;
  display: block !important;
  margin: 0 !important;

  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Blocks (au cas où une page utilise une grille block) */
.wc-block-grid__product-image,
.wc-block-components-product-image{
  overflow: hidden !important;
}

.wc-block-grid__product-image img,
.wc-block-components-product-image img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;

  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}
/* =========================================================
   BOUTIQUE : intro/description à gauche (sans toucher aux produits)
========================================================= */

/* Header boutique/catégorie (titre + description) */
.woocommerce.archive .woocommerce-products-header,
.woocommerce.archive .woocommerce-products-header *{
  text-align: left !important;
}

/* Description de catégorie (si utilisée) */
.woocommerce.archive .term-description,
.woocommerce.archive .term-description *{
  text-align: left !important;
}

/* Si ta page boutique a un contenu Gutenberg au-dessus */
.woocommerce.archive .entry-content,
.woocommerce.archive .entry-content *{
  text-align: left !important;
}

/* Bonus : éviter le “bloc centré” avec marges auto */
.woocommerce.archive .woocommerce-products-header,
.woocommerce.archive .term-description,
.woocommerce.archive .entry-content{
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* Ligne titre + prix */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
  display: inline-block;
}

/* On crée une vraie ligne */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  float: left;
}

.woocommerce ul.products li.product .price {
  float: right;
}

/* Nettoyage float */
.woocommerce ul.products li.product .price::after {
  content: "";
  display: block;
  clear: both;
}

/* =========================================================
   CARTES PRODUITS : image full row + (titre gauche / prix droite) en 1 ligne
   Storefront / WooCommerce classique
========================================================= */

/* Le <li> devient une grille */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "img img"
    "title price" !important;
  row-gap: .5rem;
  text-align: left !important; /* on veut une ligne alignée, pas centrée */
}

/* Le lien devient “transparent” pour que img + h2 soient des items de la grid */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link{
  display: contents !important;
}

/* Image : occupe toute la largeur (rangée 1) */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img{
  grid-area: img !important;
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 1 / 1 !important;   /* carré partout */
  object-fit: cover !important;
  display: block !important;
}

/* Titre : à gauche (rangée 2, col 1) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title{
  grid-area: title !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Prix : à droite (rangée 2, col 2) */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price{
  grid-area: price !important;
  margin: 0 !important;
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap;
}

/* =========================================================
   BOUTIQUE (ARCHIVE) : réduire l’espace sous le menu
========================================================= */

/* 1) Réduire la marge sous le header uniquement sur la boutique/catégories */
.woocommerce.archive .site-header{
  margin-bottom: 1rem !important; /* ajuste: 0.5rem si tu veux très serré */
}

/* 2) Breadcrumb Storefront : même si tu le caches, on supprime son espace */
.woocommerce.archive .storefront-breadcrumb{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Header de page (garde des marges même si le titre est caché) */
.woocommerce.archive .entry-header,
.woocommerce.archive .page-header{
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Le conteneur intro WooCommerce */
.woocommerce.archive .woocommerce-products-header{
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: .75rem !important;
}

/* 5) Si la description a sa propre marge */
.woocommerce.archive .term-description,
.woocommerce.archive .woocommerce-products-header .term-description{
  margin-top: 0 !important;
}
/* =========================================================
   BOUTIQUE : réduire espace entre INTRO Gutenberg et GRILLE
========================================================= */

/* 1) Réduire l'espace sous le contenu Gutenberg (intro) sur pages WooCommerce */
.woocommerce .entry-content > *:last-child{
  margin-bottom: .75rem !important; /* ajuste à .5rem si tu veux plus serré */
}

/* 2) Si ta grille est WooCommerce classique (ul.products) */
.woocommerce ul.products{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Si ta grille est un bloc WooCommerce (Product Grid / Collection) */
.wc-block-grid__products,
.wp-block-woocommerce-product-collection,
.wp-block-woocommerce-all-products{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 4) Cas fréquent : un Group/Columns Gutenberg met une marge basse */
.woocommerce .wp-block-group,
.woocommerce .wp-block-columns{
  margin-bottom: .75rem !important;
}

/* =========================================================
   BOUTIQUE : supprimer espace laissé par le H1 page-title
========================================================= */

/* Si tu caches le titre */
.post-type-archive-product .woocommerce-products-header__title.page-title{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Supprimer l’espace du conteneur */
.post-type-archive-product .woocommerce-products-header{
  margin: 0 !important;
  padding: 0 !important;
}

/* Réduire l’espace avant la description */
.post-type-archive-product .woocommerce-products-header + *{
  margin-top: .75rem !important;
}

/* container produit : s'assurer qu'il est relatif */
.products .product {
  position: relative;
  overflow: hidden;
}

/*------------*/

/* Wrapper image hover */
.mb-thumb-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* carré partout */
  overflow: hidden;
}

/* Les 2 images se superposent */
.mb-thumb-wrap img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* État normal */
.mb-thumb-wrap img.secondary-image{
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

/* Hover : on révèle la 2e image */
li.product:hover .mb-thumb-wrap img.secondary-image{
  opacity: 1;
}

/*éviter clignottement au premier hover*/
.mb-thumb-wrap img.secondary-image{
  transition: opacity .3s ease;
  will-change: opacity;
}

.mb-thumb-wrap img{
  transition: opacity .3s ease;
}

li.product:hover .mb-thumb-wrap img:first-child{
  opacity: 0;
}

li.product:hover .mb-thumb-wrap img.secondary-image{
  opacity: 1;
}

/* =========================================================
   FIX : quand mb-thumb-wrap existe, il doit occuper la zone image du grid
========================================================= */

.woocommerce ul.products li.product .mb-thumb-wrap,
.woocommerce-page ul.products li.product .mb-thumb-wrap{
  grid-area: img !important;
  grid-column: 1 / -1 !important;  /* span toutes les colonnes */
  width: 100% !important;
}

/* =========================================================
   FICHE PRODUIT — Storefront / WooCommerce
   - Layout: galerie 40% / résumé 60% (desktop)
   - Image principale: 100% de sa colonne
   - Vignettes: petites, alignées à gauche, max 5 par ligne, wrap
========================================================= */

/* -------------------------
   1) Layout 40% / 60%
------------------------- */
@media (min-width: 992px){
  .single-product div.product{
    display: flex;
    gap: 3rem;
  }

  .single-product .woocommerce-product-gallery{
    flex: 0 0 40%;
    max-width: 40%;
  }

  .single-product .summary{
    flex: 0 0 60%;
    max-width: 60%;
  }
}

/* -------------------------
   2) Image principale
------------------------- */
.single-product .woocommerce-product-gallery__image img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* =========================================================
   THUMBS — pleine largeur + colonnes dynamiques (JS mb-cols-3/4/5)
   + aligné strictement à gauche
========================================================= */

/* Fallback Firefox : si mb-cols-* n’est pas posé, on force 5 colonnes */
.single-product .woocommerce-product-gallery .flex-control-thumbs{
  grid-template-columns: repeat(5, 1fr) !important;
}

/* parents : pas de centrage hérité */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* LISTE thumbs = pleine largeur */
.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs,
.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs,
.single-product .woocommerce-product-gallery .flex-control-thumbs{
  width: 100% !important;
  max-width: none !important;
  margin: 1rem 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: grid !important;
  gap: .4rem !important;               /* mets 0 si tu les veux collées */
  justify-content: start !important;
  justify-items: stretch !important;
}

/* colonnes selon classe JS */
.single-product .flex-control-thumbs.mb-cols-3{
  grid-template-columns: repeat(3, 1fr) !important;
}
.single-product .flex-control-thumbs.mb-cols-4{
  grid-template-columns: repeat(4, 1fr) !important;
}
.single-product .flex-control-thumbs.mb-cols-5{
  grid-template-columns: repeat(5, 1fr) !important;
}

/* items */
.single-product .woocommerce-product-gallery .flex-control-thumbs > li{
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  clear: none !important;
}

/* images */
.single-product .woocommerce-product-gallery .flex-control-thumbs img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* si Flexslider ajoute des pseudo-elements qui perturbent */
.single-product .woocommerce-product-gallery .flex-control-thumbs::before,
.single-product .woocommerce-product-gallery .flex-control-thumbs::after{
  content: none !important;
  display: none !important;
}
/* =========================================================
   BADGE PROMO (onsale) — toujours petit, pas full width
========================================================= */

/* WooCommerce classique */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale{
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important; /* fallback OK si ignoré */
  padding: .25rem .5rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  /* si ton <li.product> est en grid, éviter l'étirement */
  justify-self: start !important;
  align-self: start !important;
}

/* si un style le rend "block" */
.woocommerce ul.products li.product .onsale{
  float: none !important;
}

/* WooCommerce Blocks (au cas où) */
.wc-block-grid__product .wc-block-grid__product-onsale,
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-image .wc-block-components-product-sale-badge{
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;
  padding: .25rem .5rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  justify-self: start !important;
  align-self: start !important;
}
/* =========================================================
   LIGNE INFO PRODUIT : titre gauche / promo centre / prix droite
========================================================= */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-areas:
    "img img img"
    "title sale price" !important;
  align-items: center;
}

/* titre */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title{
  grid-area: title !important;
  justify-self: start !important;
  text-align: left !important;
}

/* prix */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price{
  grid-area: price !important;
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap;
}

/* badge promo */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale{
  grid-area: sale !important;
  justify-self: center !important;
  align-self: center !important;

  position: static !important;   /* crucial : on annule l'absolu */
  transform: none !important;
  left: auto !important;
  top: auto !important;

  display: inline-block !important;
  width: auto !important;
  padding: .25rem .55rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  margin: 0 !important;
  z-index: auto !important;
}

/* =========================================================
   FICHE PRODUIT — virer le ruban promo + petit badge à côté du prix
========================================================= */

/* 1) On supprime le ruban "Promo !" sur l'image */
.single-product span.onsale{
  display: none !important;
}

/* 2) Prix + badge sur la même ligne */
.single-product .summary .price{
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* 3) Petit badge (pas de retour à la ligne lettre par lettre) */

.single-product .summary .mb-sale-pill{
  display: inline-block !important;

  font-size: 12px;
  line-height: 1 !important;
  padding: .25rem .55rem !important;

  text-transform: uppercase !important;
  letter-spacing: .05em;

  border: 1px solid currentColor !important;  /* cadre */
  border-radius: 0 !important;                /* carré net comme archive */

  background: transparent !important;

  white-space: nowrap !important;
 
	margin-left: .8rem;   /* ajuste .3 / .5 selon ton goût */
}