/* =============================================================================
   SIGNALNEST — CARTES & LISTES
   .sn-task-card · .sn-accordion · .sn-info-card · .sn-bot-card
   .sn-strategy-card · .sn-fee-tier-card · .sn-progress-tier-card
   .sn-promo-banner · .sn-dismissible-banner · .sn-market-row · .sn-stat-grid
   ============================================================================= */

/* ---- sn-task-card -----------------------------------------------------------
   Ligne de tâche à récompense. Écran source : "Effectuez un dépôt
   d'au moins 10€ → +10€".                                             */
.sn-task-card {
  display: flex;
  align-items: center;
  gap: var(--sn-space-3);
  padding: var(--sn-space-4);
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-bg-canvas);
  box-shadow: inset 0 0 0 1px var(--sn-color-border-subtle);
}
.sn-task-card__icon {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: var(--sn-radius-circle);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--sn-color-border-strong);
  color: transparent;
}
.sn-task-card--done .sn-task-card__icon {
  background: var(--sn-color-signal-500);
  box-shadow: none;
  color: var(--sn-color-white);
}
.sn-task-card__label { flex: 1; font-weight: var(--sn-weight-medium); line-height: var(--sn-leading-snug); }
.sn-task-card__reward {
  font-family: var(--sn-font-mono);
  font-weight: var(--sn-weight-bold);
  color: var(--sn-color-signal-600);
  border-bottom: 1.5px dashed var(--sn-color-signal-500);
  padding-bottom: 1px;
  white-space: nowrap;
}

/* ---- sn-accordion -------------------------------------------------------------
   Section pliable à icône de tête. Écran source : "Récompenses
   Débutant" (ouvert), "Récompenses de trading" (fermé).                */
.sn-accordion {
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-bg-surface);
  overflow: hidden;
}
.sn-accordion__header {
  display: flex;
  align-items: center;
  gap: var(--sn-space-3);
  padding: var(--sn-space-4);
  width: 100%;
  text-align: left;
}
.sn-accordion__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--sn-radius-circle);
  background: var(--sn-color-bg-canvas);
  display: flex; align-items: center; justify-content: center;
}
.sn-accordion__heading { flex: 1; min-width: 0; }
.sn-accordion__title { font-weight: var(--sn-weight-bold); font-size: var(--sn-text-md); }
.sn-accordion__subtitle { color: var(--sn-color-signal-600); font-weight: var(--sn-weight-semibold); font-size: var(--sn-text-sm); margin-top: 2px; }
.sn-accordion__chevron { transition: transform var(--sn-duration-base) var(--sn-ease-standard); flex-shrink: 0; }
.sn-accordion--open .sn-accordion__chevron { transform: rotate(180deg); }
.sn-accordion__body { padding: 0 var(--sn-space-4) var(--sn-space-4); border-top: 1px solid var(--sn-color-border-subtle); margin-top: 0; }
.sn-accordion__body-inner { padding-top: var(--sn-space-4); }

/* ---- sn-info-card -----------------------------------------------------------
   Encart informatif statique, icône + paragraphe.
   Écran source : "Récompense en crypto — les récompenses sont
   créditées...".                                                       */
.sn-info-card {
  display: flex;
  gap: var(--sn-space-3);
  padding: var(--sn-space-4);
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-bg-surface);
}
.sn-info-card__icon { flex-shrink: 0; color: var(--sn-color-text-secondary); }
.sn-info-card__title { font-weight: var(--sn-weight-bold); margin-bottom: var(--sn-space-1); }
.sn-info-card__body { color: var(--sn-color-text-secondary); font-size: var(--sn-text-sm); line-height: var(--sn-leading-normal); }

/* ---- sn-bot-card --------------------------------------------------------------
   Carte de performance d'un bot dans une liste de marché.
   Écran source : liste "Marché des bots" (HYPE/USD +9,54 %...).       */
.sn-bot-card {
  padding: var(--sn-space-4) 0;
  border-bottom: 1px solid var(--sn-color-border-subtle);
}
.sn-bot-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sn-space-3); }
.sn-bot-card__pair { font-weight: var(--sn-weight-bold); font-size: var(--sn-text-md); }
.sn-bot-card__tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--sn-space-1);
  font-size: var(--sn-text-xs); color: var(--sn-color-text-secondary);
  background: var(--sn-color-bg-surface);
  padding: 2px var(--sn-space-2) 2px 4px;
  border-radius: var(--sn-radius-xs);
}
.sn-bot-card__body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sn-space-3); margin-top: var(--sn-space-3); }
.sn-bot-card__pnl-label { font-size: var(--sn-text-xs); color: var(--sn-color-text-tertiary); margin-bottom: 2px; }
.sn-bot-card__pnl-value { font-family: var(--sn-font-mono); font-size: var(--sn-text-xl); font-weight: var(--sn-weight-bold); }
.sn-bot-card__pnl-value--positive { color: var(--sn-color-positive-600); }
.sn-bot-card__pnl-value--negative { color: var(--sn-color-negative-600); }
.sn-bot-card__sparkline { width: 128px; height: 44px; flex-shrink: 0; }
.sn-bot-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--sn-space-3);
  font-size: var(--sn-text-xs); color: var(--sn-color-text-secondary);
}
.sn-bot-card__meta-value { color: var(--sn-color-text-primary); font-weight: var(--sn-weight-medium); font-family: var(--sn-font-mono); }
.sn-bot-card__followers { display: inline-flex; align-items: center; gap: 4px; }

/* ---- sn-strategy-card -----------------------------------------------------------
   Carte de préréglage (stratégie intelligente) avec métriques et lien
   d'export vers les paramètres manuels.
   Écran source : "Moyen terme, tendance latérale — 1 à 2 mois".       */
.sn-strategy-card { padding: var(--sn-space-5) 0; border-bottom: 1px solid var(--sn-color-border-subtle); }
.sn-strategy-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sn-space-3); }
.sn-strategy-card__title { font-weight: var(--sn-weight-bold); font-size: var(--sn-text-md); line-height: var(--sn-leading-snug); }
.sn-strategy-card__metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sn-space-4);
  margin-top: var(--sn-space-4);
}
.sn-strategy-card__metric-label { font-size: var(--sn-text-xs); color: var(--sn-color-text-tertiary); margin-bottom: 2px; }
.sn-strategy-card__metric-value { font-family: var(--sn-font-mono); font-weight: var(--sn-weight-bold); font-size: var(--sn-text-md); }
.sn-strategy-card__link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--sn-space-4);
  font-size: var(--sn-text-sm); font-weight: var(--sn-weight-semibold);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- sn-fee-tier-card -------------------------------------------------------------
   Affichage des frais maker/taker.                                     */
.sn-fee-tier-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sn-space-4);
  padding: var(--sn-space-5);
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-bg-surface);
}
.sn-fee-tier-card__label { font-size: var(--sn-text-sm); color: var(--sn-color-text-secondary); margin-bottom: var(--sn-space-1); }
.sn-fee-tier-card__value { font-family: var(--sn-font-mono); font-size: var(--sn-text-xl); font-weight: var(--sn-weight-extrabold); }

/* ---- sn-progress-tier-card ---------------------------------------------------------
   Progression vers un palier de statut, avec critères.
   Écran source : "Vous êtes en route vers VIP 1".                      */
.sn-progress-tier-card { padding-top: var(--sn-space-2); }
.sn-progress-tier-card__badge { display: inline-flex; align-items: center; gap: var(--sn-space-2); font-weight: var(--sn-weight-extrabold); font-size: var(--sn-text-xl); color: var(--sn-color-tier-600); }
.sn-progress-tier-card__track { height: 6px; border-radius: var(--sn-radius-xs); background: var(--sn-color-bg-surface); margin: var(--sn-space-4) 0; overflow: hidden; }
.sn-progress-tier-card__fill { height: 100%; background: var(--sn-color-tier-600); border-radius: var(--sn-radius-xs); }
.sn-progress-tier-card__copy { font-size: var(--sn-text-sm); color: var(--sn-color-text-secondary); line-height: var(--sn-leading-normal); }

/* ---- sn-promo-banner ---------------------------------------------------------------
   Bannière de conversion carrousel, fond illustré, pagination à points.
   Écran source : "Profitez d'un bonus de dépôt de 8 %".                */
.sn-promo-banner {
  position: relative;
  padding: var(--sn-space-6) var(--sn-space-5) var(--sn-space-5);
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-neutral-100);
  overflow: hidden;
}
.sn-promo-banner__eyebrow { font-weight: var(--sn-weight-semibold); font-size: var(--sn-text-md); }
.sn-promo-banner__title { font-size: var(--sn-text-xl); font-weight: var(--sn-weight-extrabold); letter-spacing: var(--sn-tracking-tight); margin: var(--sn-space-1) 0 var(--sn-space-5); max-width: 80%; }
.sn-promo-banner__pagination { display: flex; gap: 4px; justify-content: center; margin-top: var(--sn-space-4); }
.sn-promo-banner__dot { width: 6px; height: 6px; border-radius: var(--sn-radius-circle); background: var(--sn-color-neutral-300); }
.sn-promo-banner__dot--active { background: var(--sn-color-text-primary); width: 16px; border-radius: var(--sn-radius-xs); }

/* ---- sn-dismissible-banner ------------------------------------------------------------
   Bandeau informatif fermable, en ligne ou en toast flottant.
   Écran source : "Tradez avec votre devise préférée".                  */
.sn-dismissible-banner {
  display: flex; align-items: flex-start; gap: var(--sn-space-3);
  padding: var(--sn-space-4);
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-bg-surface);
}
.sn-dismissible-banner__icon { width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--sn-radius-circle); background: var(--sn-color-bg-inverse); color: var(--sn-color-white); display: flex; align-items: center; justify-content: center; }
.sn-dismissible-banner__title { font-weight: var(--sn-weight-bold); margin-bottom: 2px; }
.sn-dismissible-banner__body { font-size: var(--sn-text-sm); color: var(--sn-color-text-secondary); }
.sn-dismissible-banner__close { flex-shrink: 0; color: var(--sn-color-text-tertiary); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.sn-dismissible-banner--toast {
  position: fixed; left: var(--sn-space-4); right: var(--sn-space-4); bottom: var(--sn-space-9);
  max-width: calc(var(--sn-viewport-max) - var(--sn-space-8));
  margin-inline: auto;
  box-shadow: var(--sn-shadow-md);
  z-index: var(--sn-z-toast);
}

/* ---- sn-market-row ----------------------------------------------------------------
   Ligne de liste de marché : icône, paire, volume, prix, variation.
   Écran source : liste "Au comptant" (BTC/USD, ETH/USD...).            */
.sn-market-row { display: flex; align-items: center; gap: var(--sn-space-3); padding: var(--sn-space-3) 0; }
.sn-market-row__id { flex: 1; min-width: 0; }
.sn-market-row__pair { display: flex; align-items: center; gap: var(--sn-space-2); font-weight: var(--sn-weight-bold); }
.sn-market-row__volume { font-size: var(--sn-text-xs); color: var(--sn-color-text-tertiary); font-family: var(--sn-font-mono); margin-top: 2px; }
.sn-market-row__figures { text-align: right; }
.sn-market-row__price { font-family: var(--sn-font-mono); font-weight: var(--sn-weight-semibold); }
.sn-market-row__change { font-family: var(--sn-font-mono); font-size: var(--sn-text-sm); margin-top: 2px; }
.sn-market-row__favorite { flex-shrink: 0; color: var(--sn-color-text-tertiary); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.sn-market-row__favorite--active { color: var(--sn-color-tier-600); }

/* ---- sn-stat-grid -------------------------------------------------------------------
   Grille de définitions 2 colonnes (label/valeur).
   Écran source : "Capitalisation boursière / Jetons en circulation...". */
.sn-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sn-space-5) var(--sn-space-4); }
.sn-stat-grid__label { font-size: var(--sn-text-sm); color: var(--sn-color-text-tertiary); margin-bottom: 4px; }
.sn-stat-grid__value { font-weight: var(--sn-weight-bold); font-family: var(--sn-font-mono); line-height: var(--sn-leading-snug); }

/* ---- sn-hero-dark -------------------------------------------------------------------
   En-tête plein écran sombre pour une fiche de détail (bot).
   Écran source : fiche "ZEC/USD" (fond noir, stats bot traders/actifs). */
.sn-hero-dark {
  background: var(--sn-color-black);
  color: var(--sn-color-text-inverse);
  padding: var(--sn-space-5) var(--sn-space-4) var(--sn-space-6);
}
.sn-hero-dark__tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px var(--sn-space-2);
  border-radius: var(--sn-radius-xs);
  background: var(--sn-color-border-inverse);
  font-size: var(--sn-text-xs);
  margin-bottom: var(--sn-space-3);
}
.sn-hero-dark__title { font-size: var(--sn-text-2xl); font-weight: var(--sn-weight-extrabold); font-family: var(--sn-font-mono); letter-spacing: var(--sn-tracking-tight); }
.sn-hero-dark__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sn-space-4); margin-top: var(--sn-space-5); }
.sn-hero-dark__stat-label { font-size: var(--sn-text-sm); color: var(--sn-color-text-inverse-secondary); margin-bottom: 4px; }
.sn-hero-dark__stat-value { font-size: var(--sn-text-lg); font-weight: var(--sn-weight-bold); font-family: var(--sn-font-mono); }