/* ═══════════════════════════════════════════════════════════════
   VIRTUAL TRY-ON — virtual-tryon.css  v3.0
   Nissi Vision Center — Mobile-First Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeIn  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse   { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

/* ── Reset de base pour la page ─────────────────────────────── */
#vto-page { display:flex; flex-direction:column; min-height:calc(100dvh - 68px); background:#0a0f2e; }

/* ════════════════════════════════════════════════════════════════
   LAYOUT — MOBILE (colonne unique, viewport fixe)
   ════════════════════════════════════════════════════════════════ */
#vto-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* Viewport caméra/photo — MOBILE : prend tout l'écran dispo */
#vto-viewport {
  position: relative;
  width: 100%;
  /* 16:9 sur mobile */
  aspect-ratio: 3/4;
  max-height: 62dvh;
  background: #050810;
  overflow: hidden;
  flex-shrink: 0;
}

/* Sidebar montures — MOBILE : bande horizontale scrollable en bas */
#vto-sidebar {
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#vto-frames-scroll {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
#vto-frames-scroll::-webkit-scrollbar { display:none; }

/* ════════════════════════════════════════════════════════════════
   LAYOUT — DESKTOP (≥ 860px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 860px) {
  #vto-layout {
    flex-direction: row;
    height: calc(100dvh - 68px);
  }

  #vto-viewport {
    aspect-ratio: unset;
    max-height: unset;
    flex: 1;
    height: 100%;
  }

  #vto-sidebar {
    width: 300px;
    flex-shrink: 0;
    border-left: 1px solid rgba(26,47,110,0.1);
    height: 100%;
    overflow-y: auto;
  }

  #vto-frames-scroll {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px;
    gap: 8px;
  }
}

/* ── Toolbar ─────────────────────────────────────────────────── */
#vto-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  z-index: 10;
}
#vto-toolbar::-webkit-scrollbar { display:none; }

/* ── Canvases ────────────────────────────────────────────────── */
#vto-canvas-video,
#vto-canvas-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#vto-canvas-gl    { pointer-events: none; }

/* ── Placeholder idle ────────────────────────────────────────── */
#vto-idle-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  z-index: 5;
}

/* ── Drop zone photo ─────────────────────────────────────────── */
#vto-photo-mode {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 16px;
}
#vto-dropzone {
  border: 2px dashed rgba(255,255,255,.28);
  border-radius: 20px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  max-width: 380px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .2s;
}
#vto-dropzone.drag-over {
  border-color: rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.12) !important;
  transform: scale(1.02);
}

/* ── Panneau de réglages manuels ─────────────────────────────── */
#vto-adjust-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(10,15,46,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 12px 16px 16px;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 10px;
  animation: slideUp .25s ease;
}
#vto-adjust-panel.open { display: flex; }

.vto-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vto-slider-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  width: 52px;
  flex-shrink: 0;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vto-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.15);
  outline: none;
  cursor: pointer;
}
.vto-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue-bright, #3b6fd4);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.vto-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue-bright, #3b6fd4);
  border: 2px solid #fff;
  cursor: pointer;
}
.vto-slider-val {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Boutons ─────────────────────────────────────────────────── */
.vto-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  flex-shrink: 0;
}
.vto-btn .material-symbols-outlined { font-size: 18px; }
.vto-btn:disabled { opacity: .45; cursor: not-allowed; }

.vto-btn--primary  { background: var(--blue-bright,#3b6fd4); color:#fff; }
.vto-btn--primary:hover:not(:disabled)  { background: #2851a3; transform:translateY(-1px); }

.vto-btn--secondary { background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }
.vto-btn--secondary:hover:not(:disabled) { background: rgba(255,255,255,.18); }

.vto-btn--icon { padding:9px; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.14); }
.vto-btn--icon:hover:not(:disabled) { background:rgba(255,255,255,.18); }

.vto-btn--success { background:rgba(34,197,94,.2); color:#4ade80; border:1px solid rgba(34,197,94,.35); }
.vto-btn--success:hover { background:rgba(34,197,94,.32); }

.vto-btn--danger  { background:rgba(220,53,69,.2); color:#f87171; border:1px solid rgba(220,53,69,.35); }
.vto-btn--danger:hover  { background:rgba(220,53,69,.32); }

.vto-btn--adjust  { background:rgba(245,158,11,.18); color:#fbbf24; border:1px solid rgba(245,158,11,.35); }
.vto-btn--adjust:hover { background:rgba(245,158,11,.28); }
.vto-btn--adjust.active { background:rgba(245,158,11,.35); }

/* ── Status badge ────────────────────────────────────────────── */
.vto-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  flex-shrink: 0;
  transition: all .3s;
}
.vto-status .material-symbols-outlined { font-size: 14px; }

.vto-status--idle      { background:rgba(255,255,255,.06); color:rgba(255,255,255,.5);  border-color:rgba(255,255,255,.1); }
.vto-status--loading   { background:rgba(59,111,212,.2);  color:#7db3ff; border-color:rgba(59,111,212,.3); animation:pulse 1.2s ease-in-out infinite; }
.vto-status--detecting { background:rgba(245,158,11,.15); color:#fbbf24; border-color:rgba(245,158,11,.3); }
.vto-status--ok        { background:rgba(34,197,94,.15);  color:#4ade80; border-color:rgba(34,197,94,.3); }
.vto-status--warn      { background:rgba(245,158,11,.15); color:#fbbf24; border-color:rgba(245,158,11,.3); }
.vto-status--error     { background:rgba(220,53,69,.15);  color:#f87171; border-color:rgba(220,53,69,.3); }
.vto-status--ready     { background:rgba(59,111,212,.15); color:#93c5fd; border-color:rgba(59,111,212,.2); }

/* ── Cartes montures ─────────────────────────────────────────── */
/* Mobile : scroll horizontal — cartes fixes */
.vto-frame-item {
  background: none;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  flex-shrink: 0;
  width: 88px;
}
/* Desktop : largeur auto */
@media (min-width: 860px) {
  .vto-frame-item {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px 12px;
    border-radius: 12px;
  }
}
.vto-frame-item:hover  { background:rgba(26,47,110,.06); border-color:rgba(26,47,110,.18); }
.vto-frame-item.active { background:var(--blue-light,#e8edf8); border-color:var(--blue-bright,#3b6fd4); }

.vto-frame-thumb {
  width: 72px;
  height: 52px;
  background: linear-gradient(135deg,#e8edf8,#d5dff5);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.vto-frame-thumb img { max-width:90%; max-height:90%; object-fit:contain; transition:transform .3s; }
.vto-frame-item:hover .vto-frame-thumb img,
.vto-frame-item.active .vto-frame-thumb img { transform:scale(1.07); }

.vto-frame-badge {
  position: absolute;
  top: 3px; left: 3px;
  background: #1a2f6e;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
}
.vto-frame-name  { font-size: 10px; font-weight:700; color:#1a2f6e; line-height:1.2; display:block; }
.vto-frame-brand { font-size: 9px;  color:#8899bb; display:block; }

@media (min-width: 860px) {
  .vto-frame-thumb { width:60px; height:44px; }
  .vto-frame-name  { font-size:13px; }
  .vto-frame-brand { font-size:11px; }
}

/* ── Filtres ─────────────────────────────────────────────────── */
#vto-filters {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(26,47,110,.08);
  flex-shrink: 0;
}
#vto-filters::-webkit-scrollbar { display:none; }

.vto-filter {
  background: none;
  border: 1.5px solid rgba(26,47,110,.18);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #1a2f6e;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.vto-filter:hover  { background: #e8edf8; }
.vto-filter.active { background: #3b6fd4; border-color:#3b6fd4; color:#fff; }

/* ── Sidebar header ──────────────────────────────────────────── */
#vto-sidebar-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(26,47,110,.08);
  flex-shrink: 0;
}
#vto-sidebar-header h2 { font-family:'DM Serif Display',serif; font-size:1.05rem; margin:0 0 2px; color:#1a2f6e; }
#vto-sidebar-header p  { font-size:11px; color:#8899bb; margin:0; }

/* ── Infos monture ───────────────────────────────────────────── */
#vto-frame-info {
  padding: 12px 16px;
  border-top: 1px solid rgba(26,47,110,.08);
  background: #f8faff;
  flex-shrink: 0;
  display: none;
}

/* ── Modal capture ───────────────────────────────────────────── */
#vto-capture-modal {
  position: fixed; inset:0; z-index:2000;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
@media (min-width: 600px) {
  #vto-capture-modal { align-items:center; padding:24px; }
}
#vto-capture-modal.open { display:flex; }
.vto-modal-inner {
  background: #fff;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  width: 100%;
  max-width: 520px;
  animation: slideUp .3s ease;
}
@media (min-width: 600px) {
  .vto-modal-inner { border-radius:24px; animation:fadeIn .25s ease; }
}

/* ── Modal IA Try-On ─────────────────────────────────────────── */
#vto-ai-modal {
  position: fixed; inset:0; z-index:2100;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width:600px) { #vto-ai-modal { align-items:center; padding:24px; } }
#vto-ai-modal.open { display:flex; }
.vto-ai-inner {
  background:#111827;
  border-radius:24px 24px 0 0;
  overflow:hidden;
  width:100%;
  max-width:560px;
  animation:slideUp .3s ease;
  border:1px solid rgba(255,255,255,.1);
}
@media (min-width:600px) { .vto-ai-inner { border-radius:24px; animation:fadeIn .25s ease; } }

/* ── Tips ────────────────────────────────────────────────────── */
.vto-tip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 11px;
  color: rgba(255,255,255,.6);
  font-weight: 600;
}

/* ── FPS ─────────────────────────────────────────────────────── */
#vto-fps-bar {
  padding: 5px 12px;
  background: rgba(0,0,0,.35);
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
}
#vto-fps-counter { font-variant-numeric:tabular-nums; font-family:monospace; }

/* Loader */
#vto-loader {
  position:fixed; inset:0; z-index:3000;
  background:rgba(10,15,46,.94);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

/* ── Étapes IA ───────────────────────────────────────────────── */
.vto-step .step-icon {
  transition: color .3s;
  flex-shrink: 0;
}
@keyframes spin-step {
  to { transform: rotate(360deg); }
}

/* ── Spinner dans le preview ─────────────────────────────────── */
#vto-ai-scanning {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(10,15,46,.78);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Select stylé ────────────────────────────────────────────── */
#vto-ai-frame-sel option {
  background: #1f2937;
  color: #fff;
}

/* ── Bouton label responsive ─────────────────────────────────── */
@media (max-width: 480px) {
  .vto-btn-label { display: none; }
  .vto-btn { padding: 9px 11px; }
  .vto-btn--primary .vto-btn-label,
  .vto-btn--secondary .vto-btn-label { display: inline; }
}