/* Correctifs mobile — 07/08/2026
 *
 * Bandeau cookies vs panneau d'achat (telephones, <= 575 px)
 * ---------------------------------------------------------
 * Sur telephone, le theme remplace le formulaire d'achat par un panneau
 * coulissant ancre en bas de l'ecran (form.cart.open, z-index 99), ouvert par la
 * barre collante « Ajouter au panier ».
 * Le bandeau cookies (#cookie-consent-banner) est en position fixe a 75 px du bas
 * avec un z-index de 99999 : il recouvrait 29 des 40 px du bouton « Ajouter au
 * panier » (73 %), centre compris. Un appui au milieu du bouton atterrissait sur
 * le bandeau — l'ajout au panier etait donc impossible depuis un telephone tant
 * que les cookies n'avaient pas ete acceptes.
 * Mesure faite le 07/08/2026 sur /produit/yamplex-creme-2/ en 390x844.
 *
 * Correction : quand le panneau d'achat est ouvert, il passe au-dessus du
 * bandeau, et le bandeau s'efface le temps de l'achat (il revient a la fermeture).
 */
@media (max-width: 575px) {

  .woocommerce .form-cart-popup form.cart.open {
    z-index: 100001 !important;
  }

  .woocommerce .form-cart-popup form.cart.open ~ #mobile-close-infor-wrapper {
    z-index: 100000 !important;
  }

  body:has(.form-cart-popup form.cart.open) #cookie-consent-banner {
    display: none !important;
  }
}

/* Bulle de chat vs barre d'action collante (telephones, <= 575 px)
 * ----------------------------------------------------------------
 * Sur telephone, WooCommerce/le theme affichent une barre d'action collante en
 * bas de l'ecran : « Valider la commande » sur le panier et la commande (56 px,
 * bottom 0), « Ajouter au panier » sur la fiche produit (40 px, bottom 8).
 * La bulle de chat Lea (.l4yc-fab, 60x60, bottom 14, z-index 99998) et son
 * accroche (.l4yc-teaser, 230 px de large, bottom 24) se posaient dessus :
 * sur la page panier, l'accroche recouvrait le centre du bouton « Valider la
 * commande » et la bulle en recouvrait la partie droite. Un appui au milieu du
 * bouton ouvrait le chat au lieu de passer commande.
 * Mesure faite le 07/08/2026 sur /panier/ en 390x844.
 *
 * Correction : sur ces pages, la bulle et son accroche remontent au-dessus de la
 * barre. Ailleurs elles gardent leur position d'origine.
 */
@media (max-width: 575px) {

  body.single-product .l4yc-fab,
  body.woocommerce-cart .l4yc-fab,
  body.woocommerce-checkout .l4yc-fab {
    bottom: 72px;
  }

  body.single-product .l4yc-teaser,
  body.woocommerce-cart .l4yc-teaser,
  body.woocommerce-checkout .l4yc-teaser {
    bottom: 82px;
  }
}

/* Photos produit écrasées dans les carrousels — 07/08/2026
 * ---------------------------------------------------------
 * Le CSS personnalisé du thème (options Thembay) impose :
 *     .product-image img { right: 320px; height: 400px; }
 * La hauteur fixe de 400 px écrase le `height: auto` de WooCommerce. Comme la
 * largeur est imposée par la grille (233 px) et que `object-fit` vaut `fill` par
 * défaut, chaque photo est étirée pour remplir la boîte, sans respecter ses
 * proportions.
 * Mesuré le 07/08/2026 sur la page d'accueil en 1440x900 : 12 photos sur 31
 * déformées. Les carrées (1500x1500, 912x912, 450x450) passaient d'un rapport
 * de 1,00 à 0,58 — soit 42 % d'écrasement en largeur, les flacons paraissaient
 * étirés en hauteur. Le pire : Ecomer (1825x1369, format paysage) affiché en
 * portrait, plus du double de déformation.
 *
 * Correction : `object-fit: contain` fait tenir la photo dans la boîte en
 * gardant ses proportions. La hauteur uniforme de 400 px voulue par le thème
 * est conservée, la grille reste alignée, les produits ne sont plus déformés.
 */
.product-image img,
.product-block .product-image img,
a.product-image img {
  object-fit: contain !important;
  object-position: center center;
}