/* ============================================================
   ProxyShop.shop — page Créateurs (dépôt de fichiers)
   ============================================================ */

.crea-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:32px;
  align-items:start;
}

/* ---------- zone de dépôt ---------- */
.drop-wrap{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(245,241,232,.05),rgba(245,241,232,.015));
  padding:22px;
}

.drop-zone{
  border:2px dashed rgba(245,241,232,.22);
  border-radius:14px;
  padding:clamp(28px,5vw,52px) 22px;
  text-align:center;
  cursor:pointer;
  transition:border-color .18s, background .18s, transform .18s;
  background:rgba(11,11,16,.35);
}
.drop-zone:hover{
  border-color:rgba(179,107,255,.55);
  background:rgba(179,107,255,.06);
}
.drop-zone:focus-visible{
  outline:2px solid #B36BFF;
  outline-offset:3px;
}
.drop-zone.is-over{
  border-color:#B36BFF;
  background:rgba(179,107,255,.13);
  transform:scale(1.006);
}
.drop-zone.is-off{
  border-color:rgba(245,241,232,.12);
  opacity:.5;
  cursor:not-allowed;
}

.drop-icon{
  font-size:2.4rem;
  line-height:1;
  margin-bottom:14px;
  background:var(--holo);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.drop-title{
  font-family:var(--serif);
  font-size:1.18rem;
  color:var(--ivory);
  margin:0 0 6px;
}
.drop-sub{
  font-size:.9rem;
  color:var(--muted);
  margin:0 0 12px;
}
.drop-sub strong{ color:#D9C6FF; }
.drop-formats{
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
  opacity:.8;
}

.drop-note{
  margin-top:14px;
  font-size:.8rem;
  color:var(--muted);
  text-align:center;
}
.drop-note strong{ color:var(--ivory); }

/* ---------- aperçus ---------- */
.previews{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:12px;
  margin-top:18px;
}
.preview{
  position:relative;
  aspect-ratio:63/88;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(245,241,232,.16);
  background:#101018;
  animation:pop .22s ease;
}
@keyframes pop{ from{ opacity:0; transform:scale(.94); } }
.preview img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.preview-del{
  position:absolute; top:5px; right:5px;
  width:24px; height:24px; border-radius:50%;
  border:0; cursor:pointer;
  background:rgba(11,11,16,.82);
  color:var(--ivory);
  font-size:.85rem; line-height:1;
  display:grid; place-items:center;
  backdrop-filter:blur(4px);
  transition:background .14s, color .14s;
}
.preview-del:hover{ background:#E8674F; color:#fff; }
.preview-name{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 6px 5px;
  background:linear-gradient(to top,rgba(8,8,12,.95),transparent);
  font-size:.6rem;
  color:#CFC9DA;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.preview-size{
  position:absolute; top:5px; left:5px;
  font-size:.55rem; letter-spacing:.04em;
  padding:.2em .45em; border-radius:4px;
  background:rgba(11,11,16,.75);
  color:#CBEFD8;
}

/* ---------- formulaire ---------- */
.crea-form .field textarea{ min-height:96px; }
.crea-form .check{ margin-top:2px; }
.crea-form .err{ margin-top:-4px; }

.crea-badge{
  margin:14px 0 0;
  font-size:.84rem;
  color:var(--muted);
  min-height:1.2em;
}
.crea-badge strong{ color:var(--ivory); }
.crea-badge.is-ok strong{ color:#CBEFD8; }

/* ---------- colonne droite ---------- */
.crea-side{ display:grid; gap:16px; }
.crea-panel{ padding:20px; }
.crea-panel h3{ font-size:1.02rem; margin-bottom:.7em; }
.crea-panel p{ font-size:.85rem; margin:0 0 .7em; }
.crea-panel p:last-child{ margin-bottom:0; }

.crea-list,
.crea-steps{
  margin:0; padding:0 0 0 0;
  list-style:none;
  display:grid; gap:9px;
  font-size:.84rem; color:var(--muted);
  counter-reset:cs;
}
.crea-list li{
  position:relative;
  padding-left:18px;
  line-height:1.5;
}
.crea-list li::before{
  content:"▸";
  position:absolute; left:0; top:0;
  color:#B36BFF;
}
.crea-list strong{ color:var(--ivory); }

.crea-steps li{
  position:relative;
  padding-left:26px;
  line-height:1.5;
  counter-increment:cs;
}
.crea-steps li::before{
  content:counter(cs);
  position:absolute; left:0; top:0;
  width:17px; height:17px; border-radius:50%;
  background:rgba(179,107,255,.2);
  border:1px solid rgba(179,107,255,.4);
  color:#D9C6FF;
  font-size:.65rem; font-weight:700;
  display:grid; place-items:center;
}
.crea-steps strong{ color:var(--ivory); }

.crea-quote{
  border-color:rgba(179,107,255,.28);
  background:linear-gradient(180deg,rgba(179,107,255,.09),rgba(179,107,255,.02));
}
.crea-price{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; padding:7px 0;
  border-top:1px solid rgba(245,241,232,.1);
  font-size:.82rem; color:var(--muted);
}
.crea-price strong{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--ivory);
}

.crea-warn{
  border-color:rgba(232,103,79,.3);
  background:rgba(232,103,79,.07);
}
.crea-warn h3{ color:#FFC4B8; }
.crea-warn p{ font-size:.82rem; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .crea-grid{ grid-template-columns:1fr; }
  .crea-side{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .drop-wrap{ padding:15px; }
  .previews{ grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:9px; }
}


/* info feuilles dans le badge */
.crea-sheets{
  display:block;
  margin-top:3px;
  font-size:.78rem;
  color:#C4A8FF;
  opacity:.9;
}
.crea-badge.is-ok strong{ color:#CBEFD8; }

/* état pendant l'optimisation */
.preview-busy{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:rgba(11,11,16,.62);
  color:#D9C6FF;
  font-size:1.3rem;
  letter-spacing:.2em;
  animation:pulse 1s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:.35; } }
.preview.is-ready .preview-size{ color:#CBEFD8; }