/* Imana Pay Match Making - styles personnalisés */

* { -webkit-tap-highlight-color: transparent; }

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f3f4f6; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Progress bar pour suivi affectation */
.progress-bar {
  position: relative;
  height: 8px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, #FBBF24, #D89409);
  border-radius: 9999px;
  transition: width 0.6s ease;
}

/* Étapes du parcours */
.step-timeline {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.step-dot.active { background: #E5A20A; color: white; }
.step-dot.done { background: #10b981; color: white; }
.step-line {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  min-width: 12px;
}
.step-line.done { background: #10b981; }

/* Cards */
.offer-card {
  transition: all 0.2s ease;
}
.offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Méthodes paiement */
.method-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fef3c7;
  color: #8A5B04;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
}

/* Impression du BOI */
@media print {
  body { background: white !important; }
  header, footer, nav, .print\\:hidden { display: none !important; }
  #modal-responses, #modal-preview { position: static !important; background: white !important; padding: 0 !important; }
  #modal-responses > div, #modal-preview > div { max-width: 100% !important; max-height: none !important; box-shadow: none !important; overflow: visible !important; }
  #boi-printable { padding: 0 !important; }
  /* Empêcher la coupure entre les sections du BOI */
  #boi-printable .border-2 { page-break-inside: avoid; }
  #boi-printable button { display: none !important; }
}

/* === Bande directionnelle (sens de la transaction EUR ↔ MGA) === */
@keyframes nsn-arrow-slide {
  0%   { transform: translateX(-6px); opacity: 0.55; }
  50%  { transform: translateX(2px);  opacity: 1; }
  100% { transform: translateX(-6px); opacity: 0.55; }
}
@keyframes nsn-chip-pop {
  0%   { transform: scale(0.92); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.dir-banner { position: relative; overflow: hidden; }
.dir-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: nsn-banner-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes nsn-banner-shine {
  0%, 70% { transform: translateX(-100%); }
  85%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}
.dir-arrow      { animation: nsn-arrow-slide 1.8s ease-in-out infinite; }
.dir-chip       { animation: nsn-chip-pop 0.45s ease-out both; }
.dir-chip.left  { animation-delay: 0.05s; }
.dir-chip.right { animation-delay: 0.2s; }

/* Variante compacte (Mes annonces) */
.dir-banner-compact { display: inline-flex; align-items: center; gap: 6px; }
.dir-banner-compact .dir-arrow { animation-duration: 2.2s; }