/* Styles pour le widget de grille d'archives */

/* Container principal */
.cf-archive-grid {
  width: 100%;
  position: relative;
  /* S'assurer que le widget ne crée pas un nouveau contexte d'empilement qui interfère avec le header */
  z-index: auto; /* Laisser le navigateur gérer le z-index naturellement */
}

/* Styles spécifiques pour les pages d'archive */
body.archive .cf-archive-grid,
body.tax-* .cf-archive-grid,
body.category .cf-archive-grid,
body.tag .cf-archive-grid {
  /* Assurer que le widget s'intègre correctement dans les pages d'archive */
  margin-top: 30px;
  margin-bottom: 30px;
}

/* État de chargement */
.cf-archive-grid.loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 5; /* Valeur inférieure pour ne pas interférer avec le header */
  /* S'assurer que l'overlay de chargement ne couvre pas le header */
  pointer-events: none;
}

.cf-archive-grid.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #4054b2;
  animation: cf-archive-grid-spin 1s linear infinite;
  z-index: 11;
  /* S'assurer que le spinner ne couvre pas le header */
  pointer-events: none;
}

@keyframes cf-archive-grid-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Section des filtres */
.cf-archive-grid__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.cf-archive-grid__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background-color: #f5f5f5;
  color: #333333;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid transparent; /* Bordure transparente par défaut */
  box-sizing: border-box;
  position: relative;
  /* Nouvelle propriété pour éviter le décalage */
  width: max-content;
}

/* Solution avancée pour éviter le décalage du texte lors du changement de graisse */
.cf-archive-grid__filter::before {
  content: attr(data-text);
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700; /* La graisse la plus élevée possible */
  /* S'assurer que le pseudo-élément prend la largeur nécessaire mais reste invisible */
  position: absolute;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
}

.cf-archive-grid__filter:hover {
  background-color: #e0e0e0;
  border-color: #cccccc; /* Bordure visible au survol */
  font-weight: 600; /* Graisse plus élevée au survol */
}

.cf-archive-grid__filter.active {
  background-color: #4054b2;
  color: #ffffff;
  border-color: #2a3a8c; /* Bordure visible à l'état actif */
  font-weight: 700; /* Graisse plus élevée à l'état actif */
}

/* Couleur ACF du terme appliquée au survol et à l'état actif.
   !important nécessaire pour passer devant le CSS généré par Elementor
   (qui est chargé après et avec une spécificité équivalente),
   tout en préservant la couleur de texte définie dans les onglets "Survol"/"Actif". */
.cf-archive-grid .cf-archive-grid__filter[data-color]:hover,
.cf-archive-grid .cf-archive-grid__filter[data-color].active {
  background-color: var(--cf-filter-color) !important;
  border-color: var(--cf-filter-color) !important;
}

/* Grille de contenu */

@media screen and (min-width: 1024px) {
  .cf-archive-grid__items--staggered article:nth-child(3n -1) {
    margin-top: -170px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .cf-archive-grid__items--staggered article:nth-child(2n) {
    margin-top: -170px;
  }
}

.cf-archive-grid__items--staggered {
  padding-top: 170px;
}

.cf-archive-grid__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 30px;
  /* opacity: 0;
    animation: fadeIn 2s forwards; */
}

/* @keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
} */

/* Élément de la grille */
.cf-archive-grid__item {
  position: relative;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.cf-archive-grid__item-image {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  overflow: hidden;
}

/* Utilisation d'un pseudo-élément pour l'image d'arrière-plan */
.cf-archive-grid__item-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transition: filter 0.3s ease;
}

/* Appliquer l'image d'arrière-plan au pseudo-élément */
.cf-archive-grid__item-image[style*="background-image"]::before {
  background-image: inherit;
}

/* Effet noir et blanc uniquement sur l'image d'arrière-plan */
.cf-archive-grid__item-image.grayscale::before {
  filter: grayscale(100%);
}

.cf-archive-grid__item-image.grayscale:hover::before {
  filter: grayscale(0%);
}

.cf-archive-grid__item-taxonomy {
  display: inline-block;
  padding: 5px 10px 5px 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
  position: relative;
  pointer-events: auto; /* Réactive les événements de pointeur pour cet élément */
}

.cf-archive-grid__item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.1) 50%
  );
  z-index: 1;
  pointer-events: none; /* Permet de cliquer à travers l'overlay */
}

.cf-archive-grid__item-content {
  position: relative;
  z-index: 2;
  width: 100%;
  pointer-events: none; /* Permet de cliquer à travers le contenu */
}

.cf-archive-grid__item-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  pointer-events: auto; /* Réactive les événements de pointeur pour cet élément */
}

.cf-archive-grid__item-read-more {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 3;
  opacity: 0.9;
  pointer-events: auto; /* Réactive les événements de pointeur pour cet élément */
  line-height: 1;
}

.cf-archive-grid__item-read-more-icon-container {
  width: 26px;
  height: 26px;
  margin-right: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
}

.cf-archive-grid__item-read-more-icon {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}

.cf-archive-grid__item-read-more-text {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
  position: relative;
  top: -3px;
}

.cf-archive-grid__item-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* Message aucun résultat */
.cf-archive-grid__no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

/* Bouton Voir Plus */
.cf-archive-grid__load-more-container {
  margin-top: 30px;
  text-align: center;
}

.cf-archive-grid__load-more-container.text-left {
  text-align: left;
}

.cf-archive-grid__load-more-container.text-right {
  text-align: right;
}

.cf-archive-grid__load-more-container.text-justify {
  text-align: justify;
}

.cf-archive-grid__load-more-button {
  padding: 12px 24px;
  background-color: #4054b2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cf-archive-grid__load-more-button:hover {
  background-color: #334293;
}

/* Style pour le bouton en mode justifié */
.cf-archive-grid__load-more-button--full-width {
  width: 100%;
}

/* Style des icônes */
.cf-archive-grid__load-more-button .load-more-icon-before,
.cf-archive-grid__load-more-button .load-more-icon-after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Couleur de l'icône */
.cf-archive-grid__load-more-button .load-more-icon-before svg,
.cf-archive-grid__load-more-button .load-more-icon-after svg {
  fill: white;
  color: white;
}

.cf-archive-grid__load-more-button .load-more-icon-before {
  margin-right: 8px;
}

.cf-archive-grid__load-more-button .load-more-icon-after {
  margin-left: 8px;
}

.cf-archive-grid__load-more-button:disabled,
.cf-archive-grid__load-more-button.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Styles pour l'état de chargement du bouton */
.cf-archive-grid__load-more-button.loading {
  position: relative;
  pointer-events: none;
}

.cf-archive-grid__load-more-button.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  animation: cf-archive-grid-button-spinner 0.8s linear infinite;
}

@keyframes cf-archive-grid-button-spinner {
  to {
    transform: rotate(360deg);
  }
}

.cf-archive-grid__pagination-dots {
  padding: 0 5px;
}

/* Responsive */
@media (max-width: 1024px) {
  .cf-archive-grid__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .cf-archive-grid__items {
    grid-template-columns: 1fr;
  }

  .cf-archive-grid__item {
    min-width: 100%;
  }

  .cf-archive-grid__filters {
    flex-direction: column;
    align-items: stretch;
  }

  .cf-archive-grid__filter {
    text-align: center;
  }
}