/* ============================================================
       EMBED — styles autonomes (aucune dépendance externe)
       Taille cible : 468 × 90 px (leaderboard standard)
       ============================================================ */

.banner {
  display: flex;
  align-items: center;
  width: 468px;
  height: 90px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0 18px;
  gap: 14px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.banner:hover {
  background: #181818;
  border-color: rgba(255, 255, 255, 0.14);
}

/* Lueur bleue décorative */
.banner::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -70px;
  width: 220px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(43, 127, 212, 0.13) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Séparateur vertical */
.sep {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.09);
  flex-shrink: 0;
}

/* Logo */
.logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Texte */
.info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.info-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #e2e2e2;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}
.info-sub {
  font-size: 11px;
  color: #717171;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bouton CTA */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2b7fd4;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 7px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: background 0.15s;
}
.banner:hover .cta {
  background: #2066b0;
}