/* =========================================================
   pp-elementor.css
   Paroisse de Poissy : elements d'interface Elementor
   communs a tout le site, hors contenu Gutenberg.

   PORTEE
     Site uniquement. Ne pas ajouter a add_editor_style() :
     ces elements n'existent pas dans l'editeur Gutenberg.

   Depend de pp-tokens.css, charge avant.
   ========================================================= */


/* =========================================================
   1. PAGINATION  (widgets Elementor pagines)

   .elementor-pagination est rendue par les widgets Loop Grid,
   Publications et Archive. S'applique a tout le site.

   Les libelles « Precedent » et « Suivant » sont masques a
   l'ecran (font-size: 0) mais restent lus par les lecteurs
   d'ecran. Les chevrons sont des SVG poses en masque : ils
   prennent la couleur de --pagi-texte.

   Les !important neutralisent les marges et couleurs que les
   reglages de style des widgets ecrivent avec une specificite
   plus forte ({{WRAPPER}} .page-numbers).

   Valeurs de repli sur les tokens : a retirer une fois verifie
   que --pp-cream et --pp-cream-dark correspondent au beige
   de la maquette.
   ========================================================= */

.elementor-pagination {
  --pagi-texte: var(--pp-navy, #14213D);
  --pagi-fond: var(--pp-cream, #F4F0E8);
  --pagi-fond-hover: var(--pp-cream-dark, #E9E2D5);
  --pagi-taille-btn: 56px;
  --pagi-taille-chiffre: 1.5rem;

  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 48px;
}

/* Chiffres */
.elementor-pagination .page-numbers {
  margin: 0 !important;
  padding: 0;
  font-family: var(--pp-font, inherit);
  font-size: var(--pagi-taille-chiffre);
  font-weight: 500;
  line-height: 1;
  color: var(--pagi-texte) !important;
  text-decoration: none !important;
  transition: opacity .18s ease, background-color .18s ease;
}

.elementor-pagination a.page-numbers:not(.prev):not(.next):hover,
.elementor-pagination a.page-numbers:not(.prev):not(.next):focus-visible {
  opacity: .6;
}

/* Page en cours */
.elementor-pagination .page-numbers.current {
  font-weight: 700;
}

/* Precedent / suivant : pastilles rondes */
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: var(--pagi-taille-btn);
  height: var(--pagi-taille-btn);
  border-radius: 50%;
  background-color: var(--pagi-fond);
  font-size: 0;
}

.elementor-pagination .page-numbers.prev {
  margin-right: 12px !important;
}

.elementor-pagination .page-numbers.next {
  margin-left: 12px !important;
}

/* Chevrons */
.elementor-pagination .page-numbers.prev::before,
.elementor-pagination .page-numbers.next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  background-color: var(--pagi-texte);
  -webkit-mask: var(--chevron) center / contain no-repeat;
          mask: var(--chevron) center / contain no-repeat;
}

.elementor-pagination .page-numbers.prev {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 4 7 12 15 20'/%3E%3C/svg%3E");
}

.elementor-pagination .page-numbers.next {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 4 17 12 9 20'/%3E%3C/svg%3E");
}

/* Survol des pastilles, uniquement quand ce sont des liens */
.elementor-pagination a.page-numbers.prev:hover,
.elementor-pagination a.page-numbers.next:hover,
.elementor-pagination a.page-numbers.prev:focus-visible,
.elementor-pagination a.page-numbers.next:focus-visible {
  background-color: var(--pagi-fond-hover);
}

/* Pastille inactive (premiere ou derniere page) : rendue en <span> */
.elementor-pagination span.page-numbers.prev,
.elementor-pagination span.page-numbers.next {
  opacity: .4;
  cursor: default;
}


/* =========================================================
   2. RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

  .elementor-pagination {
    --pagi-taille-btn: 44px;
    --pagi-taille-chiffre: 1.25rem;
    gap: 8px 14px;
  }
}