/* ── Screens ─────────────────────────────────────────────────────────────── */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  flex-direction: column;
}
.screen.active { display: flex; }

/* Scanner : le flex child doit remplir tout l'espace */
#screen-scanner .relative { flex: 1; height: 100%; }

/* Contenu scrollable sur l'écran produit */
.product-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Safe areas iOS ──────────────────────────────────────────────────────── */
.pt-safe  { padding-top:    env(safe-area-inset-top,    0px); }
.pb-safe  { padding-bottom: env(safe-area-inset-bottom, 12px); }

/* ── Scanner : vignette ──────────────────────────────────────────────────── */
.vignette {
  background: radial-gradient(ellipse 65% 45% at 50% 50%, transparent 35%, rgba(0,0,0,0.72) 100%);
}

/* ── Viewfinder ──────────────────────────────────────────────────────────── */
.viewfinder {
  position: relative;
  width: 256px;
  height: 168px;
}

.corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgba(255, 255, 255, 0.9);
  border-style: solid;
}
.corner.tl { top: 0; left: 0;  border-width: 2.5px 0 0 2.5px; border-radius: 3px 0 0 0; }
.corner.tr { top: 0; right: 0; border-width: 2.5px 2.5px 0 0; border-radius: 0 3px 0 0; }
.corner.bl { bottom: 0; left: 0;  border-width: 0 0 2.5px 2.5px; border-radius: 0 0 0 3px; }
.corner.br { bottom: 0; right: 0; border-width: 0 2.5px 2.5px 0; border-radius: 0 0 3px 0; }

.laser {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 50, 50, 0.9) 50%, transparent 100%);
  animation: laser 2s ease-in-out infinite;
  border-radius: 1px;
}
@keyframes laser {
  0%, 100% { top: 10%; opacity: 0.8; }
  50%       { top: 88%; opacity: 0.5; }
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 14px;
  height: 54px;
  margin-bottom: 8px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.22s ease-out forwards; }

@keyframes popIn {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-pop { animation: popIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ── Mode toggle ─────────────────────────────────────────────────────────── */
.mode-btn { transition: background 0.18s, color 0.18s; color: rgba(255, 255, 255, 0.38); }
.mode-btn.active[data-mode="store"]           { background: #fff;    color: #000; }
.mode-btn.active[data-mode="amazon_supplier"] { background: #f97316; color: #000; }

/* ── Bottom nav ──────────────────────────────────────────────────────────── */
.nav-btn { transition: color 0.15s; color: rgba(255, 255, 255, 0.35); }
.nav-btn.active { color: #fff; }

/* ── Verdict cards ───────────────────────────────────────────────────────── */
.verdict-green  { background: linear-gradient(135deg, #15803d, #22c55e); }
.verdict-yellow { background: linear-gradient(135deg, #a16207, #eab308); }
.verdict-red    { background: linear-gradient(135deg, #b91c1c, #ef4444); }

/* ── Ring highlight (vendeur sélectionné) ───────────────────────────────── */
.ring-selected { box-shadow: 0 0 0 2px #4ade80; }