/* ============================================================
   PIXEL ÉTINCELLE — SHOWCASE GLASSMORPHIQUE
   Grille statique de panneaux de verre iridescents (un secteur
   d'activité par carte, texte uniquement, pas de scroll horizontal).
   ============================================================ */

.showcase-grid { margin-top: var(--space-12); }

.showcase-mockup {
  position: relative;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.015)), var(--bg-elevated);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--neu-raised-600), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Voile iridescent — chatoiement holographique aux couleurs de la marque */
.showcase-mockup::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg,
    rgba(246, 160, 73, 0.22), rgba(229, 18, 35, 0.18), rgba(85, 60, 143, 0.24),
    rgba(235, 99, 87, 0.18), rgba(246, 160, 73, 0.22));
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: showcase-holo 12s linear infinite;
  pointer-events: none;
}

/* Reflet diagonal type verre */
.showcase-mockup::after {
  content: '';
  position: absolute;
  top: -60%; left: -20%;
  width: 55%; height: 220%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 45%, rgba(255,255,255,0) 100%);
  transform: rotate(18deg);
  pointer-events: none;
}

@keyframes showcase-holo {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.showcase-chrome {
  position: relative;
  z-index: 1;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-title);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.showcase-chrome span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }

.showcase-content {
  position: relative;
  z-index: 1;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.showcase-label {
  font-family: var(--font-title);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.showcase-desc { font-size: var(--fs-md); line-height: 1.6; color: var(--text-primary); margin: 0; }

/* ---------- Chargeur à engrenages (placeholder pendant le chargement d'image) ---------- */
.img-loader-wrap { position: relative; overflow: hidden; background: var(--bg-elevated); }
.img-loader-wrap > img { opacity: 0; transition: opacity 0.5s ease; }
.img-loader-wrap.is-loaded > img { opacity: 1; }
.img-loader-wrap.is-loaded .img-loader { opacity: 0; pointer-events: none; }

.img-loader {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 50%, rgba(85, 60, 143, 0.16), transparent 70%);
  transition: opacity 0.35s ease;
}
.img-loader svg { display: block; }
.img-loader .gear-a { width: 34px; height: 34px; animation: gear-spin 2.2s linear infinite; }
.img-loader .gear-b { width: 20px; height: 20px; margin: -6px 0 0 -10px; animation: gear-spin-rev 1.6s linear infinite; opacity: 0.75; }

@keyframes gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gear-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  .img-loader .gear-a, .img-loader .gear-b { animation: none; }
  .showcase-mockup::before { animation: none; }
}