/*******************
  BOUTIQUE
  Archives WooCommerce (boutique, categories, etiquettes produit).
  Realigne la boucle produits, stylee par defaut par woocommerce.css,
  sur la charte du site (variables de start.css, boutons de buttons.css).

  Cette feuille est chargee APRES woocommerce-general : a specificite egale
  elle l'emporte, aucun !important n'est necessaire. Les selecteurs
  [class*="columns-"] servent uniquement a egaler la specificite des regles
  de largeur de WooCommerce.
*******************/


/*-----------------------------
    Cadre de page
    La boutique ET les archives de categorie sont rendues par page.php
    (WooCommerce est en mode "thème non supporté"), donc dans
    `section.page-content > div.wrapper[.wrapper-XXXX]`. La largeur vient du
    champ ACF `ps_page_settings` de la page Boutique : elle se regle en admin,
    on ne la redefinit pas ici.

    Cette feuille n'etant chargee que sur ces pages (voir shooldy_needs_shop_styles()
    dans functions.php), inutile de surqualifier les selecteurs.
-----------------------------*/
.page-content > .wrapper {
  /* Conteneur de reference de la grille : le nombre de colonnes est decide a
     partir de la largeur reellement disponible ici, et non du viewport
     (voir la section Responsive en bas de fichier). */
  container-type: inline-size;
  container-name: shop;
}

/* La sidebar generique de WordPress (formulaire de recherche + liste de pages)
   n'est plus masquee ici : elle est desormais decrochee en PHP dans functions.php
   (remove_action sur 'woocommerce_sidebar'), donc plus du tout envoyee au navigateur. */


/* Pas de styles de fil d'Ariane ni d'en-tete d'archive ici : ces elements
   viennent de archive-product.php, qui n'est jamais charge sur ce site (voir
   l'entete de fichier). Le titre de la page est rendu par page.php via
   `.title.medium h1`, deja mis en forme par titles.css. */


/*-----------------------------
    Description de categorie
    Quand le terme a une description, WooCommerce la place en tete du contenu
    du faux post, dans un `<div class="term-description">`, juste avant la
    grille : il lui faut donc une respiration.
-----------------------------*/
.term-description {
  margin-bottom: 2em;
}


/*-----------------------------
    Barre resultats / tri
-----------------------------*/
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  display: inline-block;
  vertical-align: middle;
  float: none;
  margin: 0 0 2em;
  font-size: 0.9em;
}
.woocommerce .woocommerce-result-count {
  opacity: 0.6;
}
.woocommerce .woocommerce-ordering select {
  font-family: var(--baseFont);
  font-size: 1em;
  color: var(--textColor);
  background: #fff;
  border: 1px solid rgba(31, 43, 56, 0.15);
  border-radius: 9999px;
  padding: 0.55em 1.2em;
  cursor: pointer;
}


/*-----------------------------
    Grille
-----------------------------*/
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  gap: calc(var(--gutter) * 0.75);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Le clearfix de WooCommerce cree une ligne fantome en grille. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
}

/* On respecte le nombre de colonnes regle dans l'admin WooCommerce. */
.woocommerce ul.products.columns-1 { grid-template-columns: 1fr; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* Neutralisation du systeme en flottants de WooCommerce. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
}


/*-----------------------------
    Carte produit
-----------------------------*/
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  position: relative;   /* reference du badge promo, pose explicitement */
  display: flex;
  flex-direction: column;
  padding: 0 0 1.75em;
  background: var(--lightGrey);
  border: var(--lightGrey) 1px solid;
  border-radius: var(--borderRadius);
  overflow: hidden;
  text-align: center;
  transition: 0.3s;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--veryLightBoxShadow);
  transform: translateY(-4px);
}

/* Le lien enveloppe image + titre + prix ; il doit occuper toute la hauteur
   disponible pour que les prix et les boutons s'alignent d'une carte a l'autre. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
}


/*-----------------------------
    Visuel : image entiere, jamais recadree
    (necessite le reglage WooCommerce "Non recadrees")
-----------------------------*/
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #fff;   /* meme fond que les visuels produit, qui sont detoures sur blanc */
  padding: 1.25em;
  margin: 0 0 0.5em;
  border-radius: 0;
  box-shadow: none;
  transition: 0.4s;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04);
}


/*-----------------------------
    Titre et prix
-----------------------------*/
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--titleFont);
  font-size: 1.05em;
  line-height: 1.35em;
  font-weight: 600;
  color: var(--textColor);
  padding: 0.9em 1.4em 0.5em;
  margin: 0;
}

.woocommerce ul.products li.product .price {
  margin: auto 0 1.25em;   /* auto : colle le prix au bas du lien -> prix alignes */
  padding: 0 1.4em;
  color: var(--color1);
  font-size: 1.2em;
  font-weight: 700;
}
.woocommerce ul.products li.product .price del {
  opacity: 0.45;
  font-weight: 500;
  font-size: 0.85em;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 700;
}

/* Badge promo */
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 1em;
  right: 1em;
  left: auto;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0.45em 1em;
  line-height: 1.2em;
  font-size: 0.85em;
  font-weight: 600;
  background: var(--color1);
  color: #fff;
  border-radius: 9999px;
}


/*-----------------------------
    Bouton : une seule ligne, aligne en bas de carte
    (reprise de l'apparence .btn de buttons.css)
-----------------------------*/
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  align-self: center;
  margin: auto 1.4em 0;    /* auto : tous les boutons alignes sur la meme ligne */
  display: inline-block;
  width: auto;
  max-width: calc(100% - 2.8em);
  white-space: nowrap;     /* le libelle ne passe jamais sur deux lignes */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em;
  padding: 0.7em 1.5em 0.85em;
  font-family: var(--baseFont);
  font-size: 0.8075em;   /* 0.95em moins 15 % */
  font-weight: 500;
  color: #fff;
  background-color: var(--color1);
  border: transparent 1px solid;
  border-radius: 9999px;
  transition: 0.3s;
}
.woocommerce ul.products li.product .button:hover {
  color: var(--color1);
  background-color: #fff;
  border-color: var(--color1);
}
.woocommerce ul.products li.product .button.loading {
  opacity: 0.65;
}

/* Lien « Voir le panier » affiche apres un ajout */
.woocommerce ul.products li.product .added_to_cart {
  display: block;
  margin: 0.9em 1.4em 0;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--color1);
  text-decoration: underline;
}


/*-----------------------------
    Messages WooCommerce
-----------------------------*/
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--color1);
  background: var(--lightGrey);
  border-radius: calc(var(--borderRadius) / 2);
  text-align: left;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: var(--color1);
}
.woocommerce .woocommerce-message .button {
  background-color: var(--color1);
  color: #fff;
  border-radius: 9999px;
  white-space: nowrap;
}


/*-----------------------------
    Pagination
-----------------------------*/
.woocommerce nav.woocommerce-pagination {
  margin: calc(var(--gutter) * 1.25) 0 0;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li {
  margin: 0 0.25em;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 2.6em;
  padding: 0.65em 0.9em;
  border-radius: 9999px;
  font-weight: 600;
  color: var(--textColor);
  transition: 0.3s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color1);
  color: #fff;
}


/*-----------------------------
    Responsive
-----------------------------*/
@media screen and (max-width: 768px) {
  /* woocommerce-smallscreen.css repasse la boucle en flottants sous 768px :
     cette regle-la est bien liee au viewport, on la neutralise au meme niveau. */
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    float: none;
    clear: none;
    width: auto;
    margin: 0;
  }
}


/*-----------------------------
    Responsive de la grille
    Le nombre de colonnes depend de la largeur du CONTENEUR (.page-content > .wrapper), pas du
    viewport : la grille reagit donc de la meme maniere quelle que soit la
    largeur reelle du bloc — boutique, archive de categorie, ou tout gabarit
    plus etroit ajoute plus tard.
    Seuils calcules pour une carte d'environ 240px minimum, gouttiere comprise.
-----------------------------*/
@container shop (max-width: 1250px) {
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 { grid-template-columns: repeat(4, 1fr); }
}

@container shop (max-width: 1060px) {
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 { grid-template-columns: repeat(3, 1fr); }
}

@container shop (max-width: 800px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { gap: calc(var(--gutter) * 0.6); }

  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 { grid-template-columns: repeat(2, 1fr); }
}

@container shop (max-width: 520px) {
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 { grid-template-columns: 1fr; }

  .woocommerce ul.products li.product a img { aspect-ratio: 16 / 9; }
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering { display: block; margin-bottom: 1em; }
}

/* Repli pour les navigateurs sans container queries (anterieurs a 2023) :
   on retombe sur les memes paliers, mesures cette fois sur le viewport. */
@supports not (container-type: inline-size) {
  @media screen and (max-width: 1400px) {
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(4, 1fr); }
  }
  @media screen and (max-width: 1200px) {
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(3, 1fr); }
  }
  @media screen and (max-width: 940px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products { gap: calc(var(--gutter) * 0.6); }
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(2, 1fr); }
  }
  @media screen and (max-width: 620px) {
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6 { grid-template-columns: 1fr; }
    .woocommerce ul.products li.product a img { aspect-ratio: 16 / 9; }
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering { display: block; margin-bottom: 1em; }
  }
}