/* ─── Palette Délits de Fuite ───────────────────────────────────────────────── */
:root {
  --red:        #dc2626;
  --red-dark:   #b91c1c;
  --red-glow:   rgba(220,38,38,.25);
  --gold:       #d97706;
  --gold-light: #fbbf24;
  --dark:       #0d0d0d;
  --dark-2:     #161616;
  --dark-3:     #1f1f1f;
  --dark-4:     #2a2a2a;
  --border:     rgba(255,255,255,.08);
}

/* ─── Animations ────────────────────────────────────────────────────────────── */
@keyframes fadeIn   { from { opacity:0 }                to { opacity:1 } }
@keyframes slideUp  { from { transform:translateY(16px);opacity:0 } to { transform:translateY(0);opacity:1 } }
@keyframes scaleIn  { from { transform:scale(.96);opacity:0 }       to { transform:scale(1);opacity:1 } }
@keyframes shake    { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
@keyframes spin     { to { transform:rotate(360deg) } }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes countdown{ from{stroke-dashoffset:0} to{stroke-dashoffset:113} }
@keyframes bounce   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes glimmer  { 0%,100%{opacity:.06} 50%{opacity:.18} }
@keyframes redPulse { 0%,100%{box-shadow:0 0 0 0 var(--red-glow)} 50%{box-shadow:0 0 20px 6px var(--red-glow)} }

/* ─── Modal ─────────────────────────────────────────────────────────────────── */
.modal-backdrop { animation: fadeIn .18s ease both; }
.modal-sheet    { animation: slideUp .22s cubic-bezier(.22,1,.36,1) both; }
.modal-dialog   { animation: scaleIn .2s cubic-bezier(.22,1,.36,1) both; }
.modal-closing .modal-backdrop { animation: fadeIn .15s ease reverse both; }
.modal-closing .modal-sheet    { animation: slideUp .18s ease reverse both; }
.modal-closing .modal-dialog   { animation: scaleIn .15s ease reverse both; }

/* ─── Skeleton ──────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%);
  background-size: 200% 100%;
  animation: skeleton-sweep 1s infinite;
  border-radius: 8px;
}
@keyframes skeleton-sweep {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

/* ─── Toast ─────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  animation: toastIn .25s cubic-bezier(.22,1,.36,1) both;
  z-index: 200;
  pointer-events: none;
  white-space: nowrap;
}
@media (min-width: 1024px) { .toast { bottom: 24px; } }
@keyframes toastIn {
  from { transform:translateX(-50%) translateY(20px); opacity:0 }
  to   { transform:translateX(-50%) translateY(0);   opacity:1 }
}
.toast-out { animation: toastIn .2s ease reverse both; }

/* ─── Scan overlay ──────────────────────────────────────────────────────────── */
.scan-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  animation: fadeIn .2s ease both;
}
.scan-overlay-icon {
  animation: bounce .4s ease both;
  font-size: 5rem;
  margin-bottom: 1rem;
}
.scan-result-enter { animation: scaleIn .25s cubic-bezier(.22,1,.36,1) both; }

/* ─── Shake ─────────────────────────────────────────────────────────────────── */
.shake { animation: shake .4s ease both; }

/* ─── Spinner ───────────────────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
.spinner-dark {
  border-color: rgba(0,0,0,.15);
  border-top-color: var(--red);
}

/* ─── Card hover ─────────────────────────────────────────────────────────────── */
.card-hover {
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.card-hover:hover {
  box-shadow: 0 4px 24px rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.3);
  transform: translateY(-1px);
}

/* ─── Focus ─────────────────────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-glow) !important;
}

/* ─── Bouton primary ────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--red);
  color: white;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn-primary:hover  { background: var(--red-dark); box-shadow: 0 2px 12px var(--red-glow); }
.btn-primary:active { transform: scale(.97); }

/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 99px; }

/* ─── Checkbox custom ───────────────────────────────────────────────────────── */
.checkbox {
  width: 18px; height: 18px;
  accent-color: var(--red);
  cursor: pointer;
}

/* ─── Countdown ring ────────────────────────────────────────────────────────── */
.countdown-ring circle {
  stroke-dasharray: 113;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.countdown-anim circle {
  animation: countdown 3s linear both;
}

/* ─── Search clear btn ──────────────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap .search-clear {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
  cursor: pointer; color: #666;
  font-size: 18px; line-height: 1;
}
.search-wrap:has(input:not(:placeholder-shown)) .search-clear {
  opacity: 1; pointer-events: auto;
}

/* ─── Nav active indicator ──────────────────────────────────────────────────── */
.nav-indicator {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--red);
  border-radius: 50%;
}

/* ─── Status pill ───────────────────────────────────────────────────────────── */
.status-pill { transition: background .2s, color .2s; }

/* ─── Dark app theme ────────────────────────────────────────────────────────── */
body {
  background-color: var(--dark);
  color: #e5e5e5;
  overflow-x: hidden; /* évite le scroll horizontal accidentel sur mobile */
}

/* Prévention auto-zoom iOS : les inputs < 16px déclenchent un zoom non voulu */
@media screen and (max-width: 640px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* Cards / panels */
.app-card {
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Inputs dark style */
.input-dark {
  background: var(--dark-3) !important;
  border: 1px solid var(--border) !important;
  color: #e5e5e5 !important;
  border-radius: 10px;
}
.input-dark::placeholder { color: #555; }
.input-dark:focus { border-color: var(--red) !important; }

/* Table rows */
.table-row {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.table-row:hover { background: rgba(255,255,255,.03); }

/* Badge cinéma pour les catégories */
.badge-standard { background: #1a1a1a; color: #ccc;       border: 1px solid #333; }
.badge-premium  { background: #1a0505; color: #ef4444;    border: 1px solid #7f1d1d; }
.badge-vip      { background: #1a1400; color: var(--gold-light); border: 1px solid #78350f; }

/* Ticket tear line */
.ticket-tear {
  border-top: 2px dashed rgba(255,255,255,.12);
}

/* Red glow accent */
.red-glow-sm { box-shadow: 0 0 12px var(--red-glow); }
.red-pulse   { animation: redPulse 2s ease-in-out infinite; }