/* =========================================================================
   Mon Millésime - personnalisations thème enfant
   ========================================================================= */

/* Boutons secondaires : texte noir au survol (harmonisation site) */
.btn-secondary:hover {
  color: #000;
}

/* Suppression de l'outline de focus sur les liens et boutons (au détriment
   de l'accessibilité clavier). */
a:focus,
button:focus {
  outline: none;
}

/* -------------------------------------------------------------------------
   Cartes produit (template Creative Elements « product-miniature ») de
   hauteur égale : supprime l'effet d'escalier entre les boutons « Ajouter
   au panier » quand les titres n'ont pas le même nombre de lignes.

   On cible la racine du template miniature plutôt qu'un conteneur précis,
   pour couvrir aussi bien la grille (.ce-product-grid) que les carrousels
   Swiper (.swiper-slide) des sélections de produits.

   Le conteneur (cellule de grille ou slide) égalise déjà la hauteur des
   cartes d'une même ligne (flex/grid align-items:stretch). Il faut propager
   cette hauteur (100%) jusqu'au widget-wrap de la section infos, puis
   pousser le bouton avec margin-top:auto pour qu'il s'ancre au bas de la
   carte étirée (donc à la même ligne pour toutes).
   ------------------------------------------------------------------------- */

/* 1. Le template miniature devient une colonne pleine hauteur */
.elementor[data-elementor-type='product-miniature'] {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2. L'article s'étire pour remplir la carte */
.elementor[data-elementor-type='product-miniature'] > .elementor-section-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* 3. La section infos (dernière) occupe tout l'espace restant sous l'image */
.elementor[data-elementor-type='product-miniature']
  .elementor-section-wrap
  > .elementor-top-section:last-child {
  display: flex;
  flex: 1 1 auto;
}

/* 4. Propagation de la pleine hauteur à l'intérieur de la section infos */
.elementor[data-elementor-type='product-miniature']
  .elementor-top-section:last-child
  > .elementor-container {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.elementor[data-elementor-type='product-miniature']
  .elementor-top-section:last-child
  .elementor-row {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.elementor[data-elementor-type='product-miniature']
  .elementor-top-section:last-child
  .elementor-column,
.elementor[data-elementor-type='product-miniature']
  .elementor-top-section:last-child
  .elementor-column-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

.elementor[data-elementor-type='product-miniature']
  .elementor-top-section:last-child
  .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* 5. Bouton « Ajouter au panier » collé au bas de la carte */
.elementor[data-elementor-type='product-miniature']
  .elementor-widget-product-miniature-add-to-cart {
  margin-top: auto;
}

/* 6. Carrousels produit (Swiper)
   Swiper impose .swiper-slide { height: 100% } : comme la hauteur du
   conteneur est auto, ce pourcentage crée une référence circulaire qui
   empêche le stretch propre des slides (d'où l'escalier). Recette standard
   « slides de hauteur égale » : align-items:stretch sur le wrapper + slide
   en height:auto, puis on remplit le slide avec la carte via flex.
   Scopé au carrousel produit pour ne pas impacter les autres Swiper. */
.elementor-widget-product-carousel .swiper-wrapper {
  align-items: stretch;
}

.elementor-widget-product-carousel .swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}

.elementor-widget-product-carousel
  .swiper-slide
  > .elementor[data-elementor-type='product-miniature'] {
  flex: 1 1 auto;
}