Interface Graphique/assets/article_preview.css

/* ============================================================
   ARTICLE HOVER PREVIEW CARD
   ============================================================ */

#apc-card {
  position:      fixed;
  z-index:       99999;
  width:         360px;
  display:       none;
  flex-direction: column;
  background:    linear-gradient(140deg, #070d2a 0%, #0a1530 100%);
  border:        1px solid rgba(0, 240, 255, 0.22);
  border-radius: 14px;
  box-shadow:    0 0 0 1px rgba(0,240,255,0.06),
                 0 8px 32px rgba(0, 0, 0, 0.55),
                 0 0 40px rgba(0, 240, 255, 0.06);
  overflow:      hidden;
  pointer-events: none;
  opacity:       0;
  transform:     translateY(10px) scale(0.97);
  transition:    opacity 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#apc-card.apc-visible {
  opacity:   1;
  transform: translateY(0) scale(1);
}

/* ── Image area ── */
.apc-img-wrap {
  position:   relative;
  width:       100%;
  height:      170px;
  overflow:    hidden;
  background:  rgba(0, 240, 255, 0.03);
  flex-shrink: 0;
}

#apc-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    none;
  transition: opacity 0.3s ease;
}

.apc-img-placeholder {
  position:       absolute;
  inset:          0;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      40px;
  color:          rgba(0, 240, 255, 0.12);
  background: linear-gradient(135deg, rgba(0,240,255,0.03), rgba(139,233,255,0.06));
}

/* Shimmer on loading */
#apc-card.apc-loading .apc-img-wrap::after {
  content:   '';
  position:  absolute;
  inset:     0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,240,255,0.07) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: apcShimmer 1.2s infinite;
}

@keyframes apcShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Text body ── */
.apc-body {
  padding:        14px 16px 12px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.apc-site {
  font-size:      10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color:          #00f0ff;
  font-weight:    700;
  font-family:    'Inter', sans-serif;
}

.apc-title {
  font-size:   13.5px;
  font-weight: 600;
  color:       #eaf6ff;
  line-height: 1.45;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
  max-height:  60px;
  font-family: 'Inter', sans-serif;
}

#apc-card.apc-loading .apc-title {
  color: rgba(184, 223, 240, 0.35);
}

.apc-desc {
  font-size:   11.5px;
  color:       #8be9ff;
  line-height: 1.5;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
  opacity:     0.85;
  font-family: 'Inter', sans-serif;
}

/* ── Footer ── */
.apc-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      6px;
  padding-top:     8px;
  border-top:      1px solid rgba(0, 240, 255, 0.1);
}

.apc-hint {
  font-size:   10px;
  color:       rgba(184, 223, 240, 0.45);
  font-style:  italic;
  font-family: 'Inter', sans-serif;
}

.apc-ext-icon {
  font-size: 11px;
  color:     #00f0ff;
  opacity:   0.7;
}