/* ===== Strawberry Crew — image host =====
   DA reprise du site : fond blanc, accents rouge (#db3535) + vert lime (#86d629),
   police Exo 2, dégradés rouge→vert, particules, pilules à glow. */

:root{
  --berry:#db3535;
  --berry-2:#dc3434;
  --leaf:#86d629;
  --grad:linear-gradient(90deg,#db3535,#86d629);
  --ink:#1f2326;
  --muted:#6b7177;
  --bg:#ffffff;
  --line:#eef0f2;
  --berry-soft:rgba(219,53,53,.10);
  --berry-line:rgba(219,53,53,.30);
  --warn-bg:#fff6e6; --warn-line:#ffd98a; --warn-ink:#9a6400;
  --danger-bg:#fdecec; --danger-line:#f4c0c0; --danger-ink:#c41f1f;
  --shadow:0 10px 30px rgba(219,53,53,.12);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Exo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--berry);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Fonds animés ---- */
.grid-overlay{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(219,53,53,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134,214,41,.035) 1px, transparent 1px);
  background-size:42px 42px;
  animation:gridMove 60s linear infinite;
}
@keyframes gridMove{0%{background-position:0 0}100%{background-position:42px 42px}}

.particles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.particles .particle{position:absolute;border-radius:50%}
.particles .particle.red{background:rgba(219,53,53,.30)}
.particles .particle.green{background:rgba(134,214,41,.30)}
@keyframes floatP{
  0%{transform:translate(0,0)}
  25%{transform:translate(-22px,12px)}
  50%{transform:translate(-6px,-16px)}
  75%{transform:translate(28px,-6px)}
  100%{transform:translate(0,0)}
}

/* ---- Header ---- */
.site-header{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:1100px;margin:0 auto;padding:22px 24px 0;
}
.brand{display:flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none}
.brand .logo{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(219,53,53,.25))}
.brand-name{font-weight:800;font-size:1.35rem;letter-spacing:-.5px;color:var(--ink)}
.brand-name span{color:var(--berry)}

/* nav en pilule à bord rouge, comme le site */
.tabs{
  display:flex;gap:4px;background:#fff;border:2px solid var(--berry-line);
  border-radius:999px;padding:5px;box-shadow:var(--shadow);
}
.tab{
  border:0;background:transparent;cursor:pointer;font-family:inherit;font-weight:600;font-size:.92rem;
  color:var(--muted);padding:9px 18px;border-radius:999px;transition:.18s;display:flex;align-items:center;gap:8px;
}
.tab:hover{color:var(--ink)}
.tab.is-active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(219,53,53,.30)}
.badge{background:rgba(255,255,255,.28);border-radius:999px;font-size:.72rem;padding:1px 7px;min-width:20px;text-align:center}
.tab:not(.is-active) .badge{background:var(--berry-soft);color:var(--berry)}

/* ---- Bannières ---- */
.banner{
  position:relative;z-index:3;max-width:1100px;margin:18px auto 0;
  padding:13px 18px;border-radius:14px;font-size:.92rem;font-weight:500;
}
.banner--danger{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-ink)}
.banner--warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink)}

/* ---- Layout ---- */
.wrap{position:relative;z-index:3;max-width:860px;margin:0 auto;padding:10px 24px 40px}
.panel{display:none;animation:fade .35s ease}
.panel.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Hero ---- */
.hero{text-align:center;padding:34px 10px 30px}
.brand-tag{
  display:inline-flex;align-items:center;gap:9px;background:var(--berry-soft);
  border:1px solid var(--berry-line);color:var(--berry);
  padding:6px 16px;border-radius:20px;font-size:.78rem;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:22px;
}
.brand-tag::before{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--berry);
  box-shadow:0 0 10px var(--berry);
}
.main-heading{
  font-size:3.6rem;font-weight:700;line-height:1.05;margin:0 0 16px;letter-spacing:-1.5px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.subtitle{margin:0;color:#555;font-size:1.15rem;line-height:1.6;font-weight:300}
.muted{color:var(--muted)}

/* ---- Dropzone (façon "featured visual" à neon border) ---- */
.dropzone{
  position:relative;background:#fff;border-radius:20px;
  padding:56px 24px;text-align:center;cursor:pointer;transition:.2s;
  box-shadow:0 16px 40px rgba(0,0,0,.06);border:2px dashed var(--berry-line);
}
.neon-border{
  position:absolute;inset:-2px;border-radius:22px;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .25s;
}
.neon-border::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:conic-gradient(transparent,transparent,transparent,#db3535,#86d629,transparent 75%);
  animation:rotateNeon 5s linear infinite;
}
.neon-border::after{content:'';position:absolute;inset:2px;border-radius:20px;background:#fff}
@keyframes rotateNeon{to{transform:rotate(360deg)}}
.dropzone .dz-inner{position:relative;z-index:1}
.dropzone:hover,.dropzone:focus,.dropzone.is-drag{outline:none;border-color:transparent;transform:translateY(-2px)}
.dropzone:hover .neon-border,.dropzone:focus .neon-border,.dropzone.is-drag .neon-border{opacity:1}
.dropzone.is-drag{transform:scale(1.01)}
.dropzone.disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}
.dz-icon{font-size:3rem;margin-bottom:10px}
.dz-title{font-size:1.3rem;font-weight:700;margin:0 0 4px}
.dz-sub{margin:0;color:var(--muted)}
.dz-sub .link{color:var(--berry);font-weight:600;text-decoration:underline}

/* ---- File d'upload ---- */
.uploads{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.upload-card{
  display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.05);animation:fade .3s ease;
}
.upload-card .preview{width:64px;height:64px;border-radius:12px;object-fit:cover;background:#f6f7f8;flex:none}
.upload-card .info{flex:1;min-width:0}
.upload-card .fname{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upload-card .sub{font-size:.8rem;color:var(--muted);margin-top:2px}
.progress{height:7px;border-radius:999px;background:#f0f1f2;overflow:hidden;margin-top:9px}
.progress > i{display:block;height:100%;width:0;background:var(--grad);transition:width .2s}
.upload-card.error{border-color:var(--danger-line);background:var(--danger-bg)}
.upload-card.error .sub{color:var(--danger-ink)}

/* lien résultat : pilule blanche à bord rouge, façon "PLAY.STRAWBERRYCREW.COM" */
.urlrow{display:flex;gap:8px;margin-top:9px;align-items:center;flex-wrap:wrap}
.urlrow input{
  flex:1;min-width:160px;font-family:inherit;font-size:.85rem;font-weight:600;padding:9px 15px;
  border:2px solid var(--berry-line);border-radius:36px;background:#fff;color:var(--berry);
}
.urlrow input:focus{outline:none;border-color:var(--berry)}
.btn{
  border:0;cursor:pointer;font-family:inherit;font-weight:600;font-size:.84rem;border-radius:999px;
  padding:9px 18px;background:var(--grad);color:#fff;transition:.18s;white-space:nowrap;
  box-shadow:0 8px 18px rgba(219,53,53,.25);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(219,53,53,.35);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--berry);border:2px solid var(--berry-line);box-shadow:none}
.btn.ghost:hover{background:var(--berry-soft);color:var(--berry)}
.btn.tiny{padding:7px 14px;font-size:.78rem}

/* ---- Collection ---- */
.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.thumb-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.05);transition:.2s;transform:rotate(-.5deg);
}
.thumb-card:nth-child(even){transform:rotate(.5deg)}
.thumb-card:hover{transform:rotate(0) translateY(-4px);box-shadow:0 16px 34px rgba(219,53,53,.16)}
.thumb-card a.img{display:block;aspect-ratio:1;background:#f6f7f8}
.thumb-card a.img img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-card .meta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 11px}
.thumb-card .meta .nm{font-size:.78rem;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb-card .meta button{border:0;background:transparent;cursor:pointer;font-size:.95rem;line-height:1;color:var(--muted);padding:2px}
.thumb-card .meta button:hover{color:var(--berry)}
.thumb-card.is-deleted{opacity:.6}
.thumb-card.is-deleted a.img{
  display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--danger-ink);
  text-align:center;padding:10px;background:var(--danger-bg);
}

.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-emoji{font-size:3rem;margin-bottom:10px}

/* ---- Footer ---- */
.site-footer{position:relative;z-index:3;text-align:center;padding:24px;color:var(--muted);font-size:.85rem}

/* ---- Toast ---- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:999px;font-size:.88rem;font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:50;opacity:0;transition:.25s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:560px){
  .main-heading{font-size:2.5rem}
  .site-header{justify-content:center}
}