/**
 * Boutons de navigation des carrousels — normalisation globale
 * Fichier : /assets/css/wpz-carousel-nav.css
 *
 * Problème corrigé :
 *  - taille fixe (34x34) sans centrage flex → le padding bouton hérité
 *    d'Elementor/Hello décale le contenu vers le haut-gauche ;
 *  - les glyphes ‹ › ont une chasse asymétrique et reposent au-dessus du
 *    centre optique → flèche jamais centrée, quel que soit le line-height.
 *
 * Solution : centrage flex + padding remis à zéro, glyphe texte masqué
 * (font-size:0, le nom accessible reste porté par aria-label) et chevron
 * redessiné en CSS, recentré sur son centre optique.
 */

.wpz-gal__btn,
.wpz-reco__btn,
.wpz-free-ship__navBtn,
.ill-pcard__nav{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 !important;
  font-size: 0 !important;   /* masque ‹ › — aria-label conserve l'accessibilité */
  line-height: 0;
  text-indent: 0;
  -webkit-appearance: none;
          appearance: none;
  flex: 0 0 auto;
}

/* Rondeur garantie même si tokens.css n'est pas chargé sur la page
   (--radius-pill non résolu = rayon 0 → bouton carré). */
.wpz-gal__btn,
.wpz-reco__btn{ border-radius: 999px; }

/* Le bouton sert de repère de positionnement au chevron.
   .ill-pcard__nav est déjà en position:absolute → ne pas y toucher. */
.wpz-gal__btn,
.wpz-reco__btn,
.wpz-free-ship__navBtn{ position: relative; }

/* Chevron : masque SVG à géométrie symétrique.
   La pointe et les deux extrémités sont à égale distance du centre du
   viewBox → aucune compensation de décalage n'est nécessaire (le tracé
   au bord d'un carré pivoté, lui, pèse vers sa pointe et décentre). */
.wpz-gal__btn::before,
.wpz-reco__btn::before,
.wpz-free-ship__navBtn::before,
.ill-pcard__nav::before{
  content: "";
  display: block;
  /* Hors flux : en tant qu'item flex le chevron se faisait comprimer par le
     conteneur (9px demandés, 6,4px rendus) puis recaler de travers.
     inset:0 + margin:auto = centrage exact sur les deux axes. */
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  border: 0;
}

/* Suivant : pointe à droite */
.wpz-gal__btn--next::before,
.wpz-reco__btn--next::before,
.wpz-free-ship__navBtn[aria-label="Suivant"]::before,
.ill-pcard__nav--next::before{
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Précédent : pointe à gauche */
.wpz-gal__btn--prev::before,
.wpz-reco__btn--prev::before,
.wpz-free-ship__navBtn[aria-label="Précédent"]::before,
.ill-pcard__nav--prev::before{
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M8 2l-6 6 6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M8 2l-6 6 6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Confort tactile : la cible reste ≥ 40px sans grossir le rond visible */
@media (max-width: 640px){
  .wpz-gal__btn,
  .wpz-reco__btn{ position: relative; }
  .wpz-gal__btn::after,
  .wpz-reco__btn::after{
    content: "";
    position: absolute;
    inset: -6px;
  }
}