/* Waribiz — « Mes signaux » (gf-signaux.js). Plein écran, au même niveau que
   Formation : un signal se lit vite, la densité prime sur la décoration. */

html.gf-sg-open, html.gf-sg-open body { overflow: hidden }

.gf-sg {
  position: fixed; inset: 0; z-index: 105;
  display: flex; flex-direction: column; height: 100%; height: 100dvh;
  background: var(--surface); color: var(--ink);
  animation: gf-sg-in .24s var(--ease-out);
}
@keyframes gf-sg-in { from { transform: translateY(24px); opacity: .4 } to { transform: none; opacity: 1 } }

.gf-sg-head {
  display: flex; align-items: center; gap: 4px; min-height: 62px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 6px 8px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.gf-sg-back {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: transparent; color: inherit;
}
.gf-sg-title { display: grid; flex: 1; min-width: 0; padding: 0 8px }
.gf-sg-title strong { font-size: 17px; font-weight: 800; letter-spacing: -.02em }
.gf-sg-title span { color: var(--muted); font-size: 12px }

.gf-sg-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-soft);
  padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px));
}
.gf-sg-muted { margin: 28px 0; color: var(--muted); font-size: 14px; text-align: center }

.gf-sg-head-info {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; max-width: 760px; margin: 0 auto 12px;
  color: var(--muted); font-size: 12.5px;
}
.gf-sg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.gf-sg-mark-all {
  min-height: 34px; padding: 0 12px; border-radius: 10px;
  background: var(--surface); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line);
}
.gf-sg-primary {
  min-height: 36px; padding: 0 14px; border-radius: 10px;
  background: var(--violet); color: #fff; font-size: 13px; font-weight: 700;
}
.gf-sg-primary[disabled] { opacity: .55; cursor: default }
.gf-sg-new { display: inline-flex; align-items: center; gap: 6px }

/* Composer un signal */
.gf-sg-compose {
  display: grid; gap: 12px; max-width: 760px; margin: 0 auto 14px;
  padding: 16px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-soft);
}
.gf-sg-compose > strong { font-size: 15px }
.gf-sg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px }
.gf-sg-field { display: grid; gap: 4px; min-width: 0 }
.gf-sg-field > span {
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.gf-sg-sides { display: flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--surface-soft) }
.gf-sg-side-pick {
  flex: 1; min-height: 34px; padding: 0 8px; border-radius: 9px;
  background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.gf-sg-side-pick.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft) }
.gf-sg-compose-actions { display: flex; flex-wrap: wrap; gap: 8px }

/* Clôturer un signal, déplié sous la carte */
.gf-sg-close-box {
  display: grid; gap: 8px; margin-top: 4px; padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.gf-sg-close-box > span { color: var(--muted); font-size: 12px; font-weight: 700 }

/* Liste des signaux */
.gf-sg-list { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; padding: 0; list-style: none }
.gf-sg-item {
  position: relative; display: grid; gap: 10px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-soft);
  /* Le sens se lit au liseré, pas seulement à l'étiquette : un coup d'œil suffit. */
  border-left: 3px solid var(--sg-tone, var(--line));
}
.gf-sg-item.is-buy { --sg-tone: #0f8a80 }
.gf-sg-item.is-sell { --sg-tone: #d4513d }
.gf-sg-item.is-new { box-shadow: var(--shadow-soft), inset 0 0 0 1.5px var(--sg-tone) }

.gf-sg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.gf-sg-symbol { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em }
.gf-sg-side {
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--sg-tone) 14%, transparent);
  color: var(--sg-tone); font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
/* Publié à la main plutôt que par le robot : l'information est utile, discrète. */
.gf-sg-origin { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em }

.gf-sg-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.gf-sg-price { display: grid; gap: 2px; min-width: 0 }
.gf-sg-price span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase }
.gf-sg-price b { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere }

.gf-sg-note { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5 }

.gf-sg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px }
.gf-sg-state { font-size: 12.5px; font-weight: 700; color: var(--ink-soft) }
.gf-sg-state.is-live { color: var(--sg-tone) }
.gf-sg-state.is-live::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: currentColor; vertical-align: middle;
}
.gf-sg-state.is-win { color: #0f8a80 }
.gf-sg-state.is-loss { color: #d4513d }
.gf-sg-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums }

.gf-sg-actions { display: flex; flex-wrap: wrap; gap: 6px }
.gf-sg-read {
  min-height: 32px; padding: 0 11px; border-radius: 9px;
  background: var(--surface-soft); color: var(--ink-soft); font-size: 12px; font-weight: 700;
}

/* Écran réservé aux VIP */
.gf-sg-offer {
  display: grid; justify-items: center; gap: 12px;
  max-width: 440px; margin: 32px auto; padding: 0 4px; text-align: center;
}
.gf-sg-offer-icon {
  display: grid; place-items: center; width: 82px; height: 82px;
  border-radius: 28px; background: var(--violet-soft); color: var(--violet);
}
.gf-sg-offer strong { font-size: 19px; line-height: 1.3 }
.gf-sg-offer p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55 }
.gf-sg-price-tag { display: grid; gap: 2px; margin: 4px 0 }
.gf-sg-price-tag b { font-size: 30px; font-weight: 800; letter-spacing: -.02em }
.gf-sg-price-tag span { color: var(--muted); font-size: 13px }
.gf-sg-offer-how { font-size: 13.5px }
.gf-sg-warn { color: #d4513d; font-size: 13px; font-weight: 700 }

/* Aucun signal encore */
.gf-sg-empty { display: grid; justify-items: center; gap: 10px; max-width: 420px; margin: 36px auto; text-align: center }
.gf-sg-empty-icon { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 26px; background: var(--surface); color: var(--muted); box-shadow: var(--shadow-soft) }
.gf-sg-empty strong { font-size: 18px }
.gf-sg-empty p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55 }

/* Ordinateur : le panneau reste large mais la lecture ne s'étire pas. */
@media (min-width: 1024px) {
  .gf-sg-body { padding-inline: 24px }
}