/* =========================================================================
   VinceTransfer — thème "pavillon pirate" (sombre & or)
   ========================================================================= */
@font-face{
  font-family:"Pirata One";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/pirata-one.woff2") format("woff2");
}
:root{
  --bg:        #0a0e16;
  --bg-2:      #0f1421;
  --panel:     rgba(18, 24, 38, .78);
  --panel-2:   #141a28;
  --ink:       #ece5d4;   /* parchemin */
  --muted:     #94a0b3;
  --gold:      #e8b652;
  --gold-2:    #c88a2c;
  --gold-soft: rgba(232, 182, 82, .14);
  --line:      rgba(232, 182, 82, .20);
  --danger:    #e2604f;
  --ok:        #5cc08a;
  --radius:    16px;
  --shadow:    0 24px 60px -20px rgba(0,0,0,.7);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
  position:relative; overflow-x:hidden;
}

/* Décor de fond : brumes dorées + grille discrète */
.bg-deco{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(232,182,82,.10), transparent 60%),
    radial-gradient(800px 700px at 100% 0%, rgba(70,110,180,.10), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(232,182,82,.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.bg-deco::after{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
          mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}

/* ---- En-tête ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(16px, 4vw, 44px);
}
.brand{
  font-family:"Pirata One", "Inter", serif;
  font-size:30px; letter-spacing:.5px; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
}
.brand .skull{ color:var(--gold); filter:drop-shadow(0 0 12px rgba(232,182,82,.45)); font-size:26px; }
.brand .gold{ color:var(--gold); }
.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  color:var(--muted); text-decoration:none; font-weight:500; font-size:14px;
  padding:9px 14px; border-radius:10px; transition:.15s;
}
.nav a:hover{ color:var(--ink); background:var(--gold-soft); }
.nav a.ghost{ border:1px solid var(--line); }

/* ---- Conteneur principal ---- */
.wrap{
  flex:1; width:100%; max-width:680px; margin:0 auto;
  padding:clamp(10px, 3vw, 30px) clamp(16px, 4vw, 24px) 40px;
  display:flex; flex-direction:column; justify-content:center;
}
.foot{
  text-align:center; color:var(--muted); font-size:12.5px;
  padding:18px; opacity:.8;
}

/* ---- Panneau / carte ---- */
.card{
  background:var(--panel); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(20px, 4vw, 34px);
}
.card h1{ font-family:"Pirata One", serif; font-weight:400; font-size:clamp(28px,5vw,40px); margin:.1em 0 .15em; letter-spacing:.5px; }
.card .sub{ color:var(--muted); margin:0 0 22px; font-size:15px; }

/* ---- Zone de dépôt ---- */
.dropzone{
  border:2px dashed var(--line); border-radius:14px;
  padding:38px 22px; text-align:center; cursor:pointer;
  transition:.18s; background:rgba(255,255,255,.012); position:relative;
}
.dropzone:hover{ border-color:var(--gold); background:var(--gold-soft); }
.dropzone.drag{ border-color:var(--gold); background:var(--gold-soft); transform:translateY(-1px); }
.dropzone .ico{ font-size:42px; display:block; margin-bottom:8px; filter:drop-shadow(0 0 16px rgba(232,182,82,.4)); }
.dropzone .big{ font-size:17px; font-weight:600; }
.dropzone .small{ color:var(--muted); font-size:13px; margin-top:4px; }
.dropzone input[type=file]{ display:none; }

/* ---- Liste de fichiers ---- */
.filelist{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:240px; overflow:auto; }
.filelist li{
  display:flex; align-items:center; gap:12px;
  background:var(--panel-2); border:1px solid var(--line);
  padding:10px 12px; border-radius:10px; font-size:14px;
}
.filelist .fi-ico{ color:var(--gold); }
.filelist .fi-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filelist .fi-size{ color:var(--muted); font-size:12.5px; white-space:nowrap; }
.filelist .fi-x{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; padding:0 4px; }
.filelist .fi-x:hover{ color:var(--danger); }

.totals{ display:flex; justify-content:space-between; color:var(--muted); font-size:13px; margin-top:12px; }
.totals b{ color:var(--ink); }

/* ---- Champs ---- */
.field{ margin-top:16px; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:500; }
.input, textarea.input, select.input{
  width:100%; background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  font:inherit; font-size:14.5px; transition:.15s;
}
.input:focus, textarea.input:focus, select.input:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft);
}
textarea.input{ resize:vertical; min-height:72px; }
.row{ display:flex; gap:14px; }
.row .field{ flex:1; }
.hint{ font-size:12px; color:var(--muted); margin-top:5px; }

/* ---- Boutons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
  color:#1a1206; font-weight:700; font-size:15px;
  border:none; border-radius:11px; padding:13px 22px; cursor:pointer;
  width:100%; transition:.15s; box-shadow:0 10px 24px -10px rgba(232,182,82,.6);
}
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; filter:none; }
.btn.secondary{
  background:transparent; color:var(--ink); border:1px solid var(--line);
  box-shadow:none; font-weight:600;
}
.btn.secondary:hover{ background:var(--gold-soft); border-color:var(--gold); }
.btn.small{ width:auto; padding:9px 16px; font-size:13.5px; }
.btn-row{ display:flex; gap:12px; margin-top:20px; }

/* ---- Alertes ---- */
.alert{ padding:11px 14px; border-radius:10px; font-size:14px; margin-bottom:16px; }
.alert.err{ background:rgba(226,96,79,.12); border:1px solid rgba(226,96,79,.4); color:#f0a89e; }
.alert.ok{ background:rgba(92,192,138,.12); border:1px solid rgba(92,192,138,.4); color:#a9e3c4; }

/* ---- Progression ---- */
.progress-wrap{ margin-top:8px; }
.bar{ height:12px; background:var(--panel-2); border:1px solid var(--line); border-radius:99px; overflow:hidden; }
.bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--gold-2), var(--gold)); transition:width .2s; }
.progress-meta{ display:flex; justify-content:space-between; color:var(--muted); font-size:12.5px; margin-top:8px; }
.progress-file{ font-size:13px; color:var(--ink); margin-top:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Lien de résultat ---- */
.linkbox{
  display:flex; gap:8px; margin-top:8px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:8px 8px 8px 14px;
}
.linkbox input{ flex:1; background:none; border:none; color:var(--gold); font-size:14px; font-weight:600; outline:none; }

/* ---- QR code ---- */
.done-share{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.done-share .grow{ flex:1; min-width:230px; }
.qrbox{ background:#fff; border-radius:12px; padding:14px; width:172px; height:172px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -10px rgba(0,0,0,.6); }
.qrbox.sm{ width:130px; height:130px; padding:10px; }
.qrbox svg{ width:100%; height:100%; display:block; }
.qr-actions{ margin-top:8px; text-align:center; }
.qr-actions a{ color:var(--gold); font-size:12.5px; text-decoration:none; }
.qr-actions a:hover{ text-decoration:underline; }

/* ---- Tableau de bord ---- */
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th{ text-align:left; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.5px; padding:10px 12px; border-bottom:1px solid var(--line); }
.table td{ padding:13px 12px; border-bottom:1px solid rgba(232,182,82,.08); vertical-align:middle; }
.table tr:hover td{ background:rgba(255,255,255,.015); }
.tag{ display:inline-block; font-size:11.5px; padding:3px 9px; border-radius:99px; border:1px solid var(--line); color:var(--muted); }
.tag.pw{ color:var(--gold); border-color:var(--gold); }
.tag.exp{ color:var(--danger); border-color:rgba(226,96,79,.4); }
.empty{ text-align:center; color:var(--muted); padding:50px 10px; }
.empty .ico{ font-size:46px; display:block; margin-bottom:10px; opacity:.7; }

/* ---- Page de téléchargement ---- */
.dl-head{ text-align:center; margin-bottom:8px; }
.dl-head .ico{ font-size:50px; filter:drop-shadow(0 0 18px rgba(232,182,82,.45)); }
.dl-files{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.dl-files li{ display:flex; align-items:center; gap:12px; background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:12px 14px; }
.dl-files .fi-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-files a.dlbtn{ color:var(--gold); text-decoration:none; font-weight:600; font-size:13.5px; border:1px solid var(--line); padding:7px 13px; border-radius:9px; white-space:nowrap; }
.dl-files a.dlbtn:hover{ background:var(--gold-soft); border-color:var(--gold); }
.message-box{ background:var(--gold-soft); border:1px solid var(--line); border-radius:11px; padding:14px 16px; margin-top:18px; font-size:14.5px; white-space:pre-wrap; word-break:break-word; }
.meta-line{ text-align:center; color:var(--muted); font-size:12.5px; margin-top:18px; }

@media (max-width:560px){
  .row{ flex-direction:column; gap:0; }
  .btn-row{ flex-direction:column; }
  .nav a:not(.ghost){ display:none; }
}
.hidden{ display:none !important; }