/* Conteneur général (ligne) - déjà stretch */
.card-grid {
  display: flex!important;
  flex-wrap: wrap!important;
  justify-content: center!important;
  gap: 0px 26px;
}

/* Chaque cellule de widget contenant une card */
.card-grid .panel-grid-cell {
  max-width: 300px;
  min-width: 260px;
  padding: 5px !important;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hoverable-card {
  text-align: center;
  padding: 1.5rem;
  transition: background-color 0.3s ease;
  background-color: #f5f5f5;
  border-radius: 12px;
  margin: 0px;
  width: 260px;        /* Largeur fixe, à ajuster selon ton rendu */
  height: 230px;       /* Hauteur fixe pour harmoniser */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hoverable-card:hover {
  background-color: var(--hover-bg);
}

.hoverable-card img {
  max-width: 80px;       /* taille par défaut sur desktop */
  height: auto;
  transition: all 0.3s ease;
}

/* Ajustement automatique sur petit écran */
@media (max-width: 700px) {
  .hoverable-card img {
    max-width: 60px;     /* rétrécit légèrement sur mobile */
  }
}

@media (max-width: 480px) {
  .hoverable-card img {
    max-width: 50px;     /* encore plus petit sur très petit écran */
  }
}

.hoverable-card img {
  transition: all 0.3s ease;
}

.hoverable-card p {
  margin-top: 0.5rem;
  /*transition: color 0.3s ease;*/
}

.hoverable-card:hover p,
.hoverable-card:hover strong,
.hoverable-card:hover i {
  color: white;
}

.hoverable-card .fa-chevron-up{
  font-size: 40px;
  color: var(--color);
}

/* Taille adaptative de l'icône sur mobile */
@media (max-width: 700px) {
  .hoverable-card .fa-chevron-up {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .hoverable-card .fa-chevron-up {
    font-size: 26px;
  }
}


@media (max-width: 700px) {
  .card-grid {
    flex-direction: column!important;
    align-items: center!important;
  }
  .hoverable-card {
    /*width: 90vw;   !* Largeur adaptative en mobile *!*/
    max-width: 350px;
    height: auto;  /* Garde la hauteur adaptative si besoin */
  }
}

.hoverable-card img {
  transition: filter 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s cubic-bezier(.4,0,.2,1);
  filter: none;
  opacity: 1;
}

/* Effet image toute blanche au hover */
.hoverable-card:hover img {
  filter: brightness(0) invert(1) grayscale(1);
  opacity: 0.94; /* optionnel, pour éviter un blanc trop éclatant */
}