/* Badge « images » (views/partials/images_badge.php).
   Pile de vignettes derrière une pastille ; au survol / focus, elles montent et s'éventaillent.
   Inspiré d'« Images Badge » (Aceternity UI), réécrit en CSS natif. */
.ib {
  --ib-size: 52px;
  --ib-spread: 46px;
  --ib-lift: -50px;
  --ib-tilt: 9deg;
  --ib-accent: #12d18e;
  --ib-pill-bg: rgba(10, 14, 16, 0.94);
  --ib-pill-fg: #e8eeeb;
  --ib-pill-bd: rgba(255, 255, 255, 0.16);
  --ib-card-bg: #141c21;
  --ib-card-bd: rgba(255, 255, 255, 0.22);
  --ib-card-fg: #e8eeeb;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--ib-size) * 0.5);
  text-decoration: none;
  color: var(--ib-pill-fg);
  -webkit-tap-highlight-color: transparent;
}
.ib--light {
  --ib-pill-bg: #fff;
  --ib-pill-fg: #0c1116;
  --ib-pill-bd: #e3e8ea;
  --ib-card-bg: #f1f4f5;
  --ib-card-bd: #fff;
  --ib-card-fg: #0c1116;
}

.ib__stack {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: var(--ib-size);
}
.ib__card {
  position: absolute;
  top: 0;
  left: calc(var(--ib-size) / -2);
  width: var(--ib-size);
  height: var(--ib-size);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ib-card-bg);
  border: 2px solid var(--ib-card-bd);
  border-radius: 6px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  /* Au repos : pile serrée, légèrement de travers, à moitié cachée derrière la pastille. */
  transform:
    translateX(calc(var(--ib-o) * 7px))
    translateY(6px)
    rotate(calc(var(--ib-o) * 4deg));
  transition: transform 0.42s cubic-bezier(0.3, 1.35, 0.5, 1);
  transition-delay: calc(var(--ib-i) * 28ms);
}
.ib__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ib__initials {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ib-card-fg);
}

.ib__pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 14px 0 16px;
  background: var(--ib-pill-bg);
  border: 1px solid var(--ib-pill-bd);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ib__count {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 15px;
  font-weight: 800;
  color: var(--ib-accent);
}
.ib--light .ib__count { color: #0b8a5c; }
.ib__label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ib__arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

/* Ouverture : survol (souris) ou focus clavier. */
.ib:hover .ib__card,
.ib:focus-visible .ib__card {
  transform:
    translateX(calc(var(--ib-o) * var(--ib-spread)))
    translateY(calc(var(--ib-lift) + (var(--ib-o) * var(--ib-o) * 6px)))
    rotate(calc(var(--ib-o) * var(--ib-tilt)))
    scale(1.06);
}
.ib:hover .ib__pill,
.ib:focus-visible .ib__pill { border-color: var(--ib-accent); }
.ib:hover .ib__arrow,
.ib:focus-visible .ib__arrow { transform: translateX(3px); }
.ib:focus-visible { outline: none; }
.ib:focus-visible .ib__pill { outline: 2px solid var(--ib-accent); outline-offset: 3px; }

/* Écrans tactiles (pas de survol) : l'éventail reste à moitié ouvert pour que l'effet se voie. */
@media (hover: none) {
  .ib__card {
    transform:
      translateX(calc(var(--ib-o) * var(--ib-spread) * 0.6))
      translateY(calc(var(--ib-lift) * 0.45))
      rotate(calc(var(--ib-o) * var(--ib-tilt) * 0.7));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ib__card,
  .ib__arrow { transition: none; }
  .ib:hover .ib__card,
  .ib:focus-visible .ib__card,
  .ib__card {
    transform:
      translateX(calc(var(--ib-o) * var(--ib-spread) * 0.6))
      translateY(calc(var(--ib-lift) * 0.45))
      rotate(calc(var(--ib-o) * var(--ib-tilt) * 0.7));
  }
}

/* Vitrine (section Médias) : la pastille s'aligne sur le bouton voisin, la pile dépasse au-dessus. */
.cl-media__actions .ib { margin-top: calc(var(--ib-size) * -0.5); }