/* ==========================================================================
   carrousel.css
   Habillage du carrousel de prestations construit par
   carrousel-prestations.js. Ne s'applique que lorsque le carrousel est
   réellement actif : toutes les règles sont sous .bv-carrousel, un
   conteneur qui n'existe pas dans le HTML généré et que le script crée
   à la volée. Tant qu'il n'y a pas de carrousel, ce fichier est inerte.

   À charger APRÈS bloc-vitrine.css dans le gabarit :
     <link rel="stylesheet" href="carrousel.css?v=…">
   ========================================================================== */

.bv-carrousel {
  position: relative;
  /* Réserve la bande où vient se poser la pagination, sous les cartes. */
  padding-bottom: 2.25rem;

  /* Variables lues par la feuille de Swiper elle-même. Les définir ici
     plutôt que de surcharger ses sélecteurs évite d'entrer en conflit
     avec le CSS du CDN, qui est injecté APRÈS celui-ci dans le <head>. */
  --swiper-navigation-size: 1rem;
  --swiper-pagination-color: var(--bv-accent, #C1272D);
  --swiper-pagination-bullet-inactive-color: var(--encre, #16241D);
  --swiper-pagination-bullet-inactive-opacity: .28;
  --swiper-pagination-bullet-size: .5rem;
  --swiper-pagination-bottom: 0;
}

/* ------------------------------------------------ Neutralisation grille --- */
/* .bv-produits est une grille CSS avec des règles :has() très typées, dont
   une en !important dans le media query mobile de bloc-vitrine.css. Pour
   la faire passer en mode Swiper il faut donc à la fois un !important et
   une spécificité supérieure — d'où le sélecteur à trois niveaux. */

.bv-carrousel .bv-produits.swiper-wrapper {
  display: flex !important;
  grid-template-columns: none !important;
  /* Swiper espace les slides par des marges calculées (spaceBetween), pas
     par gap : laisser le gap de la grille ajouterait un second espace. */
  gap: 0 !important;
  align-items: stretch;
}

/* Les cartes doivent toutes faire la hauteur de la plus haute, sinon un
   nom de prestation sur deux lignes désaligne le bas des cartes voisines
   dans le même écran de carrousel. */
.bv-carrousel .bv-produit.swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------- Flèches --- */

.bv-carrousel__fleche {
  position: absolute;
  z-index: 10;
  /* Remise à zéro des styles natifs de <button> : le script crée de vrais
     boutons (et non des <div>) pour rester accessibles au clavier et aux
     lecteurs d'écran, mais il faut effacer l'habillage du navigateur. */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;

  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--encre, #16241D);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);

  /* 40 % et non 50 % : la carte contient l'image PUIS le nom et le prix.
     Un centrage sur la hauteur totale poserait les flèches sur le texte
     plutôt que sur la photo. */
  top: 40%;
  margin-top: 0;
  transform: translateY(-50%);
}

.bv-carrousel__fleche.swiper-button-prev { left: .4rem; right: auto; }
.bv-carrousel__fleche.swiper-button-next { right: .4rem; left: auto; }

.bv-carrousel__fleche::after {
  font-size: var(--swiper-navigation-size);
  font-weight: 700;
}

.bv-carrousel__fleche:hover { background: #fff; }

/* Flèche masquée plutôt que grisée en bout de course : sur un bloc de 3 ou
   4 prestations, une flèche inerte en permanence fait plus désordre
   qu'autre chose. */
.bv-carrousel__fleche.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------- Pagination --- */

.bv-carrousel__pagination.swiper-pagination-bullets {
  bottom: 0;
  line-height: 1;
}

.bv-carrousel__pagination .swiper-pagination-bullet {
  transition: opacity .2s ease, transform .2s ease;
}
.bv-carrousel__pagination .swiper-pagination-bullet-active {
  transform: scale(1.15);
}

/* ------------------------------------------------------ Confort tactile --- */

@media (prefers-reduced-motion: reduce) {
  .bv-carrousel__pagination .swiper-pagination-bullet { transition: none; }
}