/*
 * Page Sign : scène du hero, une fiche de signature claire et droite (média, identité, déclaration)
 * sur laquelle le sceau ProvSeal se pose une fois, puis le résultat attendu d'un certificat de test.
 * Préfixe sg-. Gabarit : product-guide.css.
 */

.sg-slip {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  padding: 10px 24px 22px;
  border-radius: 18px;
  background: var(--ps-cream);
  box-shadow: var(--ps-shadow-panel);
  color: var(--ps-ink);
}

.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 16px 0;
  border-bottom: 1px dashed #dcc3b5;
}

.sg-row > .sg-label {
  flex: 0 0 96px;
}

.sg-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  background: #2a1810;
}

.sg-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-media-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sg-label {
  color: var(--ps-muted-light);
  font-family: var(--ps-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.sg-name {
  font-size: 18px;
  font-weight: 700;
}

.sg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sg-chip {
  padding: 5px 12px;
  border: 1px solid #e3cfc4;
  border-radius: var(--ps-radius-pill);
  color: var(--ps-muted-light);
  font-size: 13px;
  font-weight: 600;
}

.sg-chip--on {
  border-color: var(--ps-orange);
  background: rgba(244, 81, 30, 0.1);
  color: #9a3412;
}

.sg-lines {
  display: flex;
  flex: 1 1 160px;
  flex-direction: column;
  gap: 7px;
  max-width: 220px;
}

.sg-line {
  height: 7px;
  border-radius: 4px;
  background: #ead8ce;
}

.sg-l2 { width: 78%; }
.sg-l3 { width: 52%; }

/* Sceau posé sur la fiche. */
.sg-stamp {
  position: absolute;
  right: 18px;
  bottom: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 104px;
  height: 104px;
  border: 3px solid var(--ps-orange);
  border-radius: 50%;
  background: rgba(255, 250, 246, 0.9);
  box-shadow: 0 0 0 5px rgba(244, 81, 30, 0.12);
  color: var(--ps-orange-dark);
}

.sg-stamp img {
  width: 40px;
  height: 40px;
}

.sg-stamp-text {
  font-family: var(--ps-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sg-out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 18px;
}

/* Pastille « Signé, non reconnu » lisible sur la fiche claire. */
.sg-out .pg-pill--untrusted {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
  font-size: 13px;
}

.sg-out-text {
  color: var(--ps-muted-light);
  font-size: 14px;
}

/* Le sceau se pose droit : il descend en grossissant puis se fixe, sans rotation. */
@keyframes sg-stamp {
  0% { opacity: 0; transform: scale(1.6); }
  70% { opacity: 1; transform: scale(0.95); }
  100% { opacity: 1; transform: none; }
}

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

.sg-stamp {
  animation: sg-stamp 0.6s var(--ps-ease) 1s both;
}

.sg-out {
  animation: sg-reveal 0.5s var(--ps-ease) 1.6s both;
}

@media (max-width: 520px) {
  .sg-slip {
    padding: 6px 16px 18px;
  }

  .sg-stamp {
    right: 8px;
    bottom: 70px;
    width: 84px;
    height: 84px;
  }

  .sg-stamp img {
    width: 30px;
    height: 30px;
  }

  .sg-row > .sg-label {
    flex-basis: 100%;
  }

  .sg-lines {
    max-width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-stamp,
  .sg-out {
    animation: none;
  }
}