/* ==========================================================================
   Collect Univers – responsive, allègement et liste de souhaits
   --------------------------------------------------------------------------
   Fichier chargé après tous les autres CSS du thème (voir _partials/head.tpl).
   POUR SURCHARGER : modifiez simplement les variables ci-dessous, ou
   redéfinissez-les dans custom.css (ex. :root{ --cu-cols-mobile:1; }).
   Pour tout désactiver : retirez la ligne « cu-responsive.css » de head.tpl.
   ========================================================================== */
:root {
  --cu-gap: 16px;            /* espace entre les cartes produit */
  --cu-gap-mobile: 10px;
  --cu-cols-mobile: 2;       /* nombre de produits par ligne sur téléphone */
  --cu-card-min: 220px;      /* largeur mini d'une carte à partir de la tablette */
  --cu-title-lines: 2;       /* lignes max pour le nom du produit */
  --cu-heart-size: 40px;
  --cu-heart-size-mobile: 34px;
  --cu-ink: #111;
  --cu-accent: #ffc7e0;
  --cu-radius: 8px;
  --cu-wide: 1400px;         /* largeur du site sur grand écran (≥ 1600 px) */
  --cu-xwide: 1680px;        /* largeur du site sur très grand écran (≥ 2000 px) */
}

/* --------------------------------------------------------------------------
   1. Grille produits fluide
      (avant : cartes figées à 248 × 318 px → 1 seul produit par ligne sur mobile)
   -------------------------------------------------------------------------- */
:is(#products, .featured-products, .product-accessories) .products:not(.slick-slider, .slick-track, .swiper-wrapper, .owl-carousel) {
  display: grid !important;
  grid-template-columns: repeat(var(--cu-cols-mobile), minmax(0, 1fr));
  gap: var(--cu-gap-mobile);
  margin-left: 0;
  margin-right: 0;
}
:is(#products, .featured-products, .product-accessories) .products:not(.slick-slider, .slick-track, .swiper-wrapper, .owl-carousel)::before,
:is(#products, .featured-products, .product-accessories) .products:not(.slick-slider, .slick-track, .swiper-wrapper, .owl-carousel)::after {
  display: none !important;   /* les « clearfix » deviendraient des cases vides */
}
:is(#products, .featured-products, .product-accessories) .products:not(.slick-slider, .slick-track, .swiper-wrapper, .owl-carousel) > .product-miniature {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
}
@media (min-width: 576px) {
  :is(#products, .featured-products, .product-accessories) .products:not(.slick-slider, .slick-track, .swiper-wrapper, .owl-carousel) {
    grid-template-columns: repeat(auto-fill, minmax(var(--cu-card-min), 1fr));
    gap: var(--cu-gap);
  }
}

/* --------------------------------------------------------------------------
   2. Carte produit : hauteur libre, image carrée, nom sur 2 lignes
   -------------------------------------------------------------------------- */
.product-miniature .thumbnail-container {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.product-miniature .thumbnail-container .product-thumbnail {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-miniature .thumbnail-container .product-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-miniature .thumbnail-container .product-description {
  position: static !important;   /* n'est plus plaqué par-dessus l'image */
  flex: 1 1 auto;
  width: auto;
  padding: 0 6px 12px;
}
.product-miniature .product-title {
  margin: .6rem 0 .3rem;
}
.product-miniature .product-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--cu-title-lines);
  line-clamp: var(--cu-title-lines);
  overflow: hidden;
  line-height: 1.25;
  min-height: calc(1.25em * var(--cu-title-lines));
}
/* Bandeau « Aperçu rapide » : invisible = non cliquable ; masqué sur écrans tactiles */
.product-miniature .thumbnail-container:not(:hover):not(:focus-within) .highlighted-informations {
  pointer-events: none;
}
@media (hover: none) {
  .product-miniature .highlighted-informations {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. Liste de souhaits : cœur
   -------------------------------------------------------------------------- */
/* Un seul cœur quand deux modules sont actifs (classe posée par cu-wishlist.js) */
body.cu-wl-keep-ets .wishlist-button-add,
body.cu-wl-keep-native .ets-wishlist-button-add:not(.view_page) {
  display: none !important;
}
/* Le cœur reste dans l'angle de l'image, toujours au-dessus des étiquettes et du bandeau */
.product-miniature .thumbnail-container > .ets-wishlist-button-add,
.product-miniature .thumbnail-container .wishlist-button-add {
  z-index: 10;
}
.product-miniature .ets-wishlist-button-add,
.product-miniature .wishlist-button-add {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 575px) {
  .product-miniature .ets-wishlist-button-add,
  .product-miniature .wishlist-button-add {
    width: var(--cu-heart-size-mobile);
    min-width: var(--cu-heart-size-mobile);
    height: var(--cu-heart-size-mobile);
  }
  .products article .ets-wishlist-button-add.right,
  .products article .wishlist-button-add { top: 6px !important; right: 6px !important; }
  .products article .ets-wishlist-button-add.left { top: 6px !important; left: 6px !important; }
}
/* Fiche produit : cœur aligné avec le bouton panier */
.product-add-to-cart .product-quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.product-add-to-cart .product-quantity .qty,
.product-add-to-cart .product-quantity .add {
  float: none;
  margin: 0;
}
.product-add-to-cart .product-quantity .ets-wishlist-button-add,
.product-add-to-cart .product-quantity .wishlist-button-add {
  position: static;
  margin: 0;
  flex: 0 0 auto;
}
/* Fenêtres des modules : toujours au premier plan, utilisables au pouce */
.ets-wishlist-modal.show,
.wishlist-modal.show {
  z-index: 100000;
}
@media (max-width: 575px) {
  .ets-wishlist-modal .modal-dialog,
  .wishlist-modal .modal-dialog {
    margin: 12px;
    max-width: none;
  }
  .ets-wishlist-modal .modal-footer,
  .wishlist-modal .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ets-wishlist-toast {
    left: 12px;
    right: 12px;
    top: 12px;
  }
}

/* --------------------------------------------------------------------------
   4. Notification « alerte e-mail retour en stock »
   -------------------------------------------------------------------------- */
.cu-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 100001;
  width: calc(100% - 24px);
  max-width: 420px;
  padding: 14px 16px;
  background: #fff;
  color: var(--cu-ink);
  border: 1px solid #e5e5e5;
  border-left: 4px solid var(--cu-accent);
  border-radius: var(--cu-radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.cu-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .2s ease, transform .2s ease;
}
.cu-toast.is-success { border-left-color: #69b92d; }
.cu-toast.is-error { border-left-color: #b9312d; }
.cu-toast__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: inherit;
}
.cu-toast__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.cu-toast__actions .btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 14px;
  text-transform: none;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .cu-toast, .cu-toast.is-visible { transition: none; }
}

/* --------------------------------------------------------------------------
   5. Mobile : plus lisible, moins chargé
   -------------------------------------------------------------------------- */
/* Rien ne dépasse de l'écran */
#wrapper img,
#wrapper video,
#wrapper iframe,
#footer img {
  max-width: 100%;
}
#wrapper .page-content img,
#wrapper .product-description img,
#wrapper #category-description img {
  height: auto;
}
#wrapper .page-content table,
#wrapper .product-description table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  /* iOS zoome sur les champs dont le texte fait moins de 16 px */
  input.form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  select.form-control,
  textarea {
    font-size: 16px;
  }

  /* Marges latérales régulières */
  #wrapper #containermain {
    padding-left: 12px;
    padding-right: 12px;
  }
  #content-wrapper,
  #left-column,
  #right-column {
    padding-left: 0;
    padding-right: 0;
  }

  /* Listing : barre tri / filtres sur une ligne, compteur discret */
  #js-product-list-top.products-selection {
    margin-left: 0;
    margin-right: 0;
  }
  #js-product-list-top > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
  #js-product-list-top .sort-by-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 8px;
  }
  #js-product-list-top .sort-by-row > * {
    float: none;
    flex: 1 1 0;
    width: auto;
    padding: 0;
  }
  #js-product-list-top .sort-by-row .sort-by {
    display: none;
  }
  #js-product-list-top .filter-button .btn,
  #js-product-list-top .products-sort-order .select-title {
    width: 100%;
    min-height: 44px;
  }
  #js-product-list-top .showing {
    padding: 0;
    font-size: 13px;
    opacity: .75;
  }
  #products .up {
    display: none;   /* le bouton « retour en haut » doublonne avec le défilement natif */
  }

  /* Cartes produit plus compactes */
  .product-miniature .thumbnail-container .product-description {
    padding: 0 4px 10px;
  }
  .product-miniature .product-title {
    margin-top: .45rem;
  }
  .product-miniature .product-title a {
    font-size: 13px;
  }
  .product-miniature .product-flags li.product-flag {
    min-height: 0;
    min-width: 0;
    margin-top: 6px;
    margin-left: 0;
    padding: 3px 6px;
    font-size: 11px;
  }

  /* Fiche produit : bouton panier pleine largeur, onglets défilables */
  .product-add-to-cart .product-quantity .add {
    flex: 1 1 0;
    min-width: 0;
  }
  .product-add-to-cart .product-quantity .add .add-to-cart {
    width: 100%;
    min-height: 44px;
    white-space: normal;
  }
  #product .tabs .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #product .tabs .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  #product .tabs .nav-tabs .nav-item {
    float: none;
    flex: 0 0 auto;
  }
  #product .tabs {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Zones tactiles confortables */
  .pagination .page-list li a,
  #footer .links a,
  .block-categories a {
    display: inline-block;
    min-height: 32px;
    line-height: 32px;
  }
}

/* Tablette : la colonne de gauche ne doit pas écraser la grille */
@media (min-width: 768px) and (max-width: 991px) {
  :root { --cu-card-min: 200px; }
}

/* --------------------------------------------------------------------------
   6. Grands écrans : le site ne reste plus dans une colonne de 1140 px
      (pour revenir en arrière : mettez 1140px dans --cu-wide et --cu-xwide)
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .container,
  .breadcrumb,
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--cu-wide) !important;
  }
  :root { --cu-card-min: 240px; }
}
@media (min-width: 2000px) {
  .container,
  .breadcrumb,
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--cu-xwide) !important;
  }
  html { font-size: 17px; }
  :root { --cu-card-min: 260px; }
}

/* --------------------------------------------------------------------------
   7. Mobile : corrections relevées sur le site en ligne
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Bouton « Ajouter au panier » : le texte sur 2 lignes n'est plus coupé */
  .product-add-to-cart .product-quantity .add .add-to-cart {
    height: auto;
    line-height: 1.25;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media (max-width: 575px) {
  /* Bloc services de l'accueil : 2 colonnes lisibles au lieu de 4 colonnes en 9,5 px */
  .cure.cure-in-home {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px;
  }
  .cure .cure-title { font-size: 14px; }
  .cure .cure-text { font-size: 12.5px; line-height: 1.35; }
  .hps-slider .hps-kicker { font-size: 11px; }
}