/* Force la hauteur des cartes à être égale */
.wp-block-post-template li {
  height: 100% !important;
}


.titre-rouge {
  color: var(--wp--preset--color--warning) !important;
}

.titre-3xl {
  font-size: var(--wp--preset--font-size--3xl) !important;
}

/* Carrousel swipeable natif */
.is-style-swipe-list .wp-block-post-template {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Masquer la scrollbar (Firefox) */
  gap: var(--wp--preset--spacing--40);
  /* Espace entre les cartes */
  padding-bottom: 20px;
  /* Evite de couper les ombres éventuelles */
}

/* Masquer la scrollbar (Chrome/Safari/Edge) */
.is-style-swipe-list .wp-block-post-template::-webkit-scrollbar {
  display: none;
}

/* Chaque carte du carrousel */
.is-style-swipe-list .wp-block-post-template>li {
  flex: 0 0 85%;
  /* Sur mobile, la carte prend 85% de l'écran pour laisser apercevoir la suivante */
  max-width: 350px;
  scroll-snap-align: center;
}

/* Ajustement pour tablette */
@media (min-width: 768px) {
  .is-style-swipe-list .wp-block-post-template>li {
    flex: 0 0 45%;
  }
}

/* Ajustement pour Desktop */
@media (min-width: 1024px) {
  .is-style-swipe-list .wp-block-post-template>li {
    flex: 0 0 30%;
    scroll-snap-align: start;
  }


}



/* --- Barre de progression Swipe --- */
.swipe-progress-track {
  width: 150px;
  height: 20px;
  background-color: #e2e8f0;
  border-radius: 20px;
  margin: 20px auto 0 auto;
  position: relative;
  /* On cache si on est sur très petit écran et que le carrousel est tout petit, mais en général ça passe */
}

.swipe-progress-dot {
  width: 30px;
  height: 30px;
  background-color: var(--wp--preset--color--accent, #000);
  border-radius: 50%;
  position: absolute;
  top: -5px;
  /* Centrage vertical: (30 - 20)/2 = 5 */
  left: 0;
  will-change: transform;
  /* L'animation fluide est gérée par requestAnimationFrame, mais on peut rajouter une transition pour être sûr */
  transition: transform 0.05s linear;
}
/* --- Hauteur égale pour les cartes du carrousel --- */
.is-style-swipe-list .wp-block-post-template > li {
  display: flex;
  height: auto !important; /* Laisse flex gérer la hauteur */
}

/* Le groupe principal à l'intérieur du li s'étire */
.is-style-swipe-list .wp-block-post-template > li > .wp-block-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Pousser la partie basse (le bloc avec l'encadré de couleur) tout en bas de la carte */
.is-style-swipe-list .wp-block-post-template > li > .wp-block-group > .wp-block-group:last-child {
  margin-top: auto !important;
  flex-grow: 1; /* Permet à ce bloc de s'étirer si besoin */
}

/* --- Correction d'alignement largeur sur mobile --- */
.is-style-swipe-list .wp-block-post-template > li > .wp-block-group > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}