@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   PIPSTER · Bannière partenaire Swissquote — terminal uniquement.
   Insérée par saas-promo.js entre #instrumentStrip et #chartStage ;
   la scène est en flex:1, elle absorbe la hauteur sans autre réglage.
═══════════════════════════════════════════════════════════════════ */

.sq-promo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  max-height: 46px;
  padding-inline: 14px 10px;
  background:
    linear-gradient(90deg, rgba(213, 43, 30, .13), rgba(213, 43, 30, .04) 240px, transparent 460px),
    var(--surface, #0F0F0F);
  border-block-end: 1px solid var(--border, #2E2E2E);
  border-inline-start: 3px solid #D52B1E;
  overflow: hidden;
  animation: sq-in .45s ease-out;
  transition: max-height .3s ease, opacity .25s ease;
}
[dir="rtl"] .sq-promo {
  background:
    linear-gradient(270deg, rgba(213, 43, 30, .13), rgba(213, 43, 30, .04) 240px, transparent 460px),
    var(--surface, #0F0F0F);
}
.sq-promo.sq-out { max-height: 0; opacity: 0; border-block-end-width: 0; }

@keyframes sq-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Zone cliquable ──────────────────────────────────────────── */
.sq-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  height: 100%;
  text-decoration: none;
  color: var(--text, #E4E4E4);
}

.sq-cross {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(213, 43, 30, .35);
}
.sq-cross svg { display: block; width: 100%; height: 100%; }

.sq-brand { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
/* Le nom se coupe proprement plutôt que de passer SOUS le bouton : la
   marque ne rétrécit pas (`nowrap`), le bouton non plus (`flex: 0 0 auto`),
   et sur 320 px les deux se chevauchaient. */
.sq-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-sub {
  font-size: 10.5px; color: var(--text-2, #B0B0B0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Arguments ───────────────────────────────────────────────── */
.sq-points {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-inline-start: 12px;
  min-width: 0;
  overflow: hidden;
}
.sq-pt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-2, #B0B0B0);
  white-space: nowrap;
}
.sq-pt svg { width: 14px; height: 14px; flex: 0 0 auto; color: #E25549; }

/* Argument mis en avant : votre argent reste disponible (carte).
   Pastille teintée du rouge du CTA, posée juste avant lui — c'est le
   dernier message lu avant le clic. */
.sq-pt.sq-hl {
  color: var(--text, #E4E4E4);
  font-weight: 600;
  border: 1px solid rgba(226, 85, 73, .35);
  background: rgba(213, 43, 30, .10);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ── Bouton d'action ─────────────────────────────────────────── */
.sq-cta {
  position: relative;
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #E2382A, #C6271B);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(213, 43, 30, .30);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sq-main:hover .sq-cta { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(213, 43, 30, .45); }
.sq-cta svg { width: 13px; height: 13px; transition: transform .15s ease; }
.sq-main:hover .sq-cta svg { transform: translateX(2px); }
[dir="rtl"] .sq-cta svg { transform: scaleX(-1); }
[dir="rtl"] .sq-main:hover .sq-cta svg { transform: scaleX(-1) translateX(2px); }

/* Reflet balayant le bouton : l'œil est attiré sans clignotement. */
.sq-cta::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  left: -48px;
  background: linear-gradient(105deg, transparent, rgb(var(--veil) / .35), transparent);
  transform: skewX(-18deg);
  animation: sq-sheen 5.5s ease-in-out infinite;
}
@keyframes sq-sheen {
  0%, 72%    { left: -48px; }
  88%, 100%  { left: calc(100% + 12px); }
}

/* ── Mention et fermeture ────────────────────────────────────── */
.sq-ad {
  flex: 0 0 auto;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3, #808080);
  border: 1px solid var(--border, #2E2E2E);
  border-radius: 4px;
  padding: 2px 5px;
}
.sq-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3, #808080);
  cursor: pointer;
  padding: 0;
}
.sq-close:hover { color: var(--text, #E4E4E4); background: var(--surface-2, #1A1A1A); }
.sq-close svg { width: 14px; height: 14px; }

/* ── Écrans étroits : les arguments s'effacent un à un, la pastille
      carte survit le plus longtemps, puis marque + bouton seuls ── */
@media (max-width: 1500px) { .sq-pt:nth-child(3) { display: none; } }
@media (max-width: 1240px) { .sq-pt:nth-child(2) { display: none; } }
@media (max-width: 1080px) { .sq-pt:nth-child(1) { display: none; } }
@media (max-width: 900px)  { .sq-points { display: none; } }
@media (max-width: 560px)  {
  .sq-promo { height: 42px; max-height: 42px; gap: 8px; }
  .sq-sub, .sq-ad { display: none; }
}

/* Sous 400 px il ne reste que la croix, le nom et le bouton : on serre
   les marges pour que les trois tiennent côte à côte. */
@media (max-width: 400px) {
  .sq-promo { padding-inline: 10px 6px; gap: 6px; }
  .sq-cta { padding: 7px 10px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sq-promo { animation: none; }
  .sq-cta::after { animation: none; }
}