/* Image Globe Cloud – Styles */
.igc {
  --igc-item: 72px;
  --igc-height: auto;
  position: relative;
  display: block;
  width: 100%;
  height: var(--igc-height);
  aspect-ratio: 1 / 1; /* carré par défaut si hauteur auto */
  contain: layout style paint;
}

.igc-wrap {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  position: relative;
  overflow: visible;
}

.igc-scene {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  position: relative;
}

.igc-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.igc-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--igc-item);
  height: var(--igc-item);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: block;
  translate: -50% -50%;
}

.igc-item .igc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.igc-item:hover .igc-img,
.igc-item:focus .igc-img {
  transform: scale(1.06);
  box-shadow: 0 14px 35px rgba(0,0,0,0.35);
  outline: none;
}

.igc-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.igc-fallback img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* Respect du mode réduit */
@media (prefers-reduced-motion: reduce) {
  .igc-item .igc-img {
    transition: none;
  }
}