/* -------------------------------------------------
   Carte générique Spectra/Astra — Hover Card
   ------------------------------------------------- */
.ahc-card {
  position: relative;
  display: block;
  --ahc-radius: 14px;
  overflow: visible;

  /* Donne un peu d’air haut/bas au bloc normal */
  /*padding-block: clamp(24px, 3.5vw, 48px);*/
}

/* Dimensions / fallback */
.ahc-inner {
  position: relative;
  width: min(18rem, 80vw);
  padding: 1.25rem 1rem 1.5rem;
  border-radius: var(--ahc-radius);
  margin-inline: auto;
}

.ahc-face {
  position: relative;
}

/* Les images réelles ET le fallback ont la même boîte */
.ahc-svg {
  display: block;
  width: clamp(130px, 26vw, 180px);
  height: auto;
  margin-inline: auto;
  pointer-events: none;
}

/* Fallback visuel si aucune image ne se charge */
.ahc-fallback {
  height: 90px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

/* Titres */
.ahc-title {
  text-align: center;
  margin: 0.75rem 0 0;
}
.ahc-back .ahc-title--back {
  width: 100%;
  text-align: center;
  margin: 0 auto 0.25rem !important;
}

/* Description */
.ahc-desc {
  margin: 0.25rem 0 0;
  word-break: break-word;
  width: 100%;
  color: var(--ast-global-color-3);
}

/* -------------------------------------------------
   Panneau hover — centré verticalement, auto-hauteur
   ------------------------------------------------- */
.ahc-back {
  position: absolute;

  /* centré verticalement sur le bloc normal */
  top: 50%;
  left: -24px;
  right: -24px;
  transform: translateY(-50%) scale(.98);

  border-radius: 0;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28);

  /* ===== Variables de placement du décor ===== */
  --ahc-decor-size: clamp(130px, 26vw, 180px);
  --ahc-decor-top: clamp(10px, 2.5vw, 18px);
  --ahc-decor-right: -24px;
  --ahc-gap-top: clamp(4px, 0.8vw, 10px);

  /* Espacement interne */
  padding: clamp(1rem, 2vw, 1.5rem);

  /* Le contenu commence sous le décor + gap */
  padding-top: calc(var(--ahc-decor-top) + var(--ahc-decor-size) + var(--ahc-gap-top));

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;

  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
  z-index: 3;
  overflow: hidden; /* coupe le décor qui déborde */
}

/* SVG décoratif du panneau hover */
.ahc-back .ahc-svg--back {
  position: absolute;
  top: var(--ahc-decor-top);
  right: var(--ahc-decor-right);
  width: var(--ahc-decor-size);
  height: auto;
  margin: 0;
  opacity: 0.9;
  pointer-events: none;
}

/* -------------------------------------------------
   États interactifs
   ------------------------------------------------- */
.ahc-card:hover .ahc-back,
.ahc-card:focus-within .ahc-back,
.ahc-card.is-active .ahc-back { /* 👈 AJOUT DE .is-active */
  opacity: 1;
  transform: translateY(-50%) scale(1.02);
  pointer-events: auto;
}

.ahc-expand-right .ahc-back {
  transform-origin: right center;
}
.ahc-expand-left .ahc-back {
  transform-origin: left center;
}

.ahc-card {
  transition: transform .25s ease;
}

/* On applique l'effet de "soulèvement" dans tous les cas d'activation */
.ahc-card:hover,
.ahc-card:focus-within,
.ahc-card.is-active {
  transform: translateY(-4px);
  z-index: 10;
}

/* -------------------------------------------------
   Responsif
   ------------------------------------------------- */
@media (min-width: 640px) {
  .ahc-inner {
    width: clamp(12rem, 28vw, 16rem);
  }
}

/* -------------------------------------------------
   Le lien qui enveloppe tout
   ------------------------------------------------- */
.ahc-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /*padding-block: clamp(24px, 3.5vw, 48px);*/
  padding-block: clamp(40px, 6vw, 72px);
}

/* Supprime toute surbrillance ou effet focus non désiré */
.ahc-link:focus,
.ahc-link:focus-visible {
  outline: none;
  box-shadow: none;
}