/* ============================================================
   ALCOPA PARKING INVENTORY — style.css v2
   ============================================================ */

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes slideInUp {
  from { opacity:0; transform:translateY(28px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes slideOutDown {
  from { opacity:1; transform:translateY(0); max-height:200px; }
  to   { opacity:0; transform:translateY(16px); max-height:0; margin:0; padding:0; }
}
@keyframes pulseAlert {
  0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,0); border-left-color:#ef4444; }
  50%     { box-shadow:0 0 0 6px rgba(239,68,68,.2); border-left-color:#ff0000; }
}
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes popIn {
  0%   { transform:scale(.8); opacity:0; }
  70%  { transform:scale(1.05); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
@keyframes confiBlink {
  0%,100% { opacity:1; } 50% { opacity:.4; }
}
@keyframes highlightNew {
  0%   { background-color:rgba(255,69,0,.15); }
  100% { background-color:transparent; }
}
@keyframes scoreCircle {
  from { stroke-dashoffset:163; }
}

/* ─── Carte ─────────────────────────────────────────────────── */
.vehicle-card {
  animation: slideInUp .35s cubic-bezier(.34,1.56,.64,1) forwards;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.vehicle-card:active { transform:scale(.985); }
.vehicle-card.leaving {
  animation: slideOutDown .3s ease-in forwards;
  pointer-events:none; overflow:hidden;
}
.card-new-highlight {
  animation: slideInUp .35s ease forwards, highlightNew 2s ease .35s forwards;
}

/* ─── Bordures confiance ─────────────────────────────────────── */
.confidence-high   { border-left:4px solid #22c55e; }
.confidence-medium { border-left:4px solid #f59e0b; }
.confidence-low    { border-left:4px solid #ef4444; }

/* ─── Alerte ─────────────────────────────────────────────────── */
.card-alert {
  animation: slideInUp .35s cubic-bezier(.34,1.56,.64,1) forwards,
             pulseAlert 1.8s ease-in-out .35s infinite;
  border-left:4px solid #ef4444 !important;
}

/* ─── Badge alerte ───────────────────────────────────────────── */
.badge-alert-required {
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:white;
  font-size:.6rem; font-weight:900; letter-spacing:.08em;
  padding:2px 7px; border-radius:3px; text-transform:uppercase;
  animation: pulseAlert 1.8s ease-in-out infinite;
}

/* ─── Badge confiance blink ──────────────────────────────────── */
.badge-low { animation: confiBlink 1.4s ease-in-out infinite; }

/* ─── Carte validée ──────────────────────────────────────────── */
.card-validated {
  opacity:.55; border-left:4px solid #22c55e !important;
  filter:grayscale(.3);
  transition: opacity .3s ease, filter .3s ease;
}

/* ─── Boutons scan ───────────────────────────────────────────── */
.btn-scan { transition: transform .15s ease, box-shadow .15s ease; will-change:transform; }
.btn-scan:active { transform:scale(.94); }

/* ─── Loader spinner ─────────────────────────────────────────── */
.spinner {
  width:32px; height:32px;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation: spin .8s linear infinite;
  display:inline-block;
}

/* ─── Toast ──────────────────────────────────────────────────── */
.toast  { animation: popIn .3s cubic-bezier(.34,1.56,.64,1) forwards; }
.toast.hiding { animation: slideOutDown .3s ease-in forwards; }

/* ─── Accordéon ─────────────────────────────────────────────── */
.accordion-content {
  max-height:0; overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1);
}
.accordion-content.open { max-height:9999px; }
.accordion-chevron { transition:transform .3s ease; }
.accordion-chevron.open { transform:rotate(180deg); }

/* ─── Scan overlay ───────────────────────────────────────────── */
.scan-overlay { animation: fadeIn .2s ease; }

/* ─── Skeleton ───────────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 75%);
  background-size:200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius:6px;
}

/* ─── Sync dot ───────────────────────────────────────────────── */
.sync-dot { width:8px;height:8px;border-radius:50%;background:#22c55e;transition:background .3s ease; }
.sync-dot.syncing { background:#f59e0b; animation:confiBlink .8s ease-in-out infinite; }
.sync-dot.error   { background:#ef4444; }

/* ─── Cercle de score ─────────────────────────────────────────── */
#score-circle { transition: stroke-dashoffset .6s ease, stroke .3s ease; }

/* ─── Slots photo ─────────────────────────────────────────────── */
.photo-slot { transition: border-color .2s ease, background .2s ease; overflow:hidden; }

/* ─── Drawer session item actif ──────────────────────────────── */
.session-item { transition: background .15s ease; }

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:2px; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media(max-width:380px){
  .plaque-text { font-size:1.5rem !important; }
}