/* ------------------------------------------------------------------
   Vignettes produit des listings de solutions
   FLOW44 - 08/2026
   ------------------------------------------------------------------ */

/* Vignette d'un produit sans page consultable : elle ouvre une fenêtre
   plutôt que de mener à une page. On garde l'affordance du clic. */
.solution-list-product--sans-page {
  cursor: pointer;
}

.solution-list-product--sans-page:focus-visible {
  outline: 2px solid #172983;
  outline-offset: 3px;
}

/* Carrousel : les visuels se succèdent en fondu */
.image-product--carrousel {
  position: relative;
}

/* Le premier visuel reste dans le flux : c'est lui qui donne sa hauteur au
   bloc. Les suivants se superposent en absolu. Ainsi le carrousel s'adapte
   aussi bien aux vignettes carrees du listing qu'aux grands visuels des
   pages produit, sans imposer de proportion. */
.image-product--carrousel img {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.image-product--carrousel img:not(:first-of-type) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-product--carrousel img.est-actif {
  opacity: 1;
}

/* ------------------------------------------------------------------
   Fenêtre produit
   ------------------------------------------------------------------ */
.fenetre-produit {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.fenetre-produit[hidden] {
  display: none;
}

.fenetre-produit__fond {
  position: absolute;
  inset: 0;
  background: rgba(23, 41, 131, 0.35);
  backdrop-filter: blur(3px);
}

.fenetre-produit__boite {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 2.5rem 2.5rem 2rem;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
}

.fenetre-produit__fermer {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  border: 0;
  background: none;
  font-size: 2rem;
  line-height: 1;
  color: #172983;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.fenetre-produit__fermer:hover {
  color: #d40065;
}

.fenetre-produit__image {
  display: block;
  max-width: 260px;
  max-height: 260px;
  margin: 0 auto 1.5rem;
  object-fit: contain;
}

.fenetre-produit__image[src=""] {
  display: none;
}

.fenetre-produit__titre {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  color: #172983;
}

.fenetre-produit__description {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
}

.fenetre-produit__message {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #333;
}

.fenetre-produit__message a {
  color: #172983;
  text-decoration: underline;
}

.fenetre-produit__message a:hover {
  color: #d40065;
}

@media screen and (max-width: 600px) {
  .fenetre-produit__boite { padding: 2rem 1.25rem 1.5rem; }
  .fenetre-produit__image { max-width: 180px; max-height: 180px; }
  .fenetre-produit__titre { font-size: 1.3rem; }
}

/* ------------------------------------------------------------------
   Fleches de navigation du carrousel
   Visibles au survol de la vignette, discretes le reste du temps.
   ------------------------------------------------------------------ */
.image-product--carrousel .carrousel-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out;
  z-index: 2;
}

.solution-list-product:hover .carrousel-fleche,
.image-product--carrousel:hover .carrousel-fleche {
  opacity: 1;
}

.image-product--carrousel .carrousel-fleche:hover {
  background: #fff;
}

/* Chevrons dessines en CSS, sans image ni police d'icones */
.image-product--carrousel .carrousel-fleche::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #172983;
  border-right: 2px solid #172983;
}

.image-product--carrousel .carrousel-fleche--prec {
  left: 4px;
}

.image-product--carrousel .carrousel-fleche--prec::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.image-product--carrousel .carrousel-fleche--suiv {
  right: 4px;
}

.image-product--carrousel .carrousel-fleche--suiv::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* Sur ecran tactile, pas de survol : on les montre en permanence */
@media (hover: none) {
  .image-product--carrousel .carrousel-fleche { opacity: 1; }
}