/* ==========================================================================
   060 — File Dropzone
   Zone de drag & drop avec feedback liquide (goo SVG) et état succès.
   Racine : .file-dropzone — états pilotés par anim.js (.is-over, .is-success)
   ========================================================================== */

.file-dropzone {
  --fdz-accent: var(--ml-accent, #7c8cff);
  --fdz-success: var(--ml-accent-2, #2dd4bf);

  position: relative;
  width: min(300px, 100%);
  height: 190px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ml-surface, #151a24);
  color: var(--ml-fg, #e8eaf2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;
}

.file-dropzone:focus-visible {
  outline: 2px solid var(--fdz-accent);
  outline-offset: 4px;
}

.file-dropzone.is-over {
  transform: scale(1.02);
  box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--fdz-accent) 55%, transparent);
}

.file-dropzone.is-success {
  box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--fdz-success) 45%, transparent);
}

/* SVG porteur du filtre goo, aucune emprise visuelle */
.file-dropzone__defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* --- Bordure pointillée qui ondule au dragover -------------------------- */

.file-dropzone__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.file-dropzone__border-rect {
  fill: none;
  stroke: var(--ml-muted, #8b91a3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 0.35 1.65; /* pointillé fin (pathLength=100) */
  opacity: 0.5;
  transition: stroke 0.35s ease, opacity 0.35s ease;
}

.file-dropzone.is-over .file-dropzone__border {
  animation: file-dropzone-wobble 1.8s ease-in-out infinite;
}

.file-dropzone.is-over .file-dropzone__border-rect {
  stroke: var(--fdz-accent);
  stroke-width: 2.25;
  stroke-dasharray: 1.1 1.4;
  opacity: 1;
  animation: file-dropzone-dash 1s linear infinite;
}

.file-dropzone.is-success .file-dropzone__border-rect {
  stroke: var(--fdz-success);
  stroke-dasharray: 2.5 0; /* trait plein */
  opacity: 0.9;
}

@keyframes file-dropzone-dash {
  to { stroke-dashoffset: -10; }
}

@keyframes file-dropzone-wobble {
  0%, 100% { transform: scale(1, 1); }
  25%      { transform: scale(1.01, 0.985); }
  50%      { transform: scale(0.992, 1.01); }
  75%      { transform: scale(1.006, 0.99); }
}

/* --- Couche gooey : films sur les bords + blobs qui gouttent ------------- */

.file-dropzone__goo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: url(#file-dropzone-goo);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.file-dropzone.is-over .file-dropzone__goo { opacity: 1; }
.file-dropzone.is-success .file-dropzone__goo { opacity: 0; }

.file-dropzone__film,
.file-dropzone__blob {
  position: absolute;
  background: var(--fdz-accent);
}

.file-dropzone__film--top    { top: -9px;    left: 14px; right: 14px;  height: 16px; border-radius: 8px; }
.file-dropzone__film--bottom { bottom: -9px; left: 14px; right: 14px;  height: 16px; border-radius: 8px; }
.file-dropzone__film--left   { left: -9px;   top: 14px;  bottom: 14px; width: 16px;  border-radius: 8px; }
.file-dropzone__film--right  { right: -9px;  top: 14px;  bottom: 14px; width: 16px;  border-radius: 8px; }

.file-dropzone__blob {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.file-dropzone__blob--1 { top: -12px;    left: 22%; animation: file-dropzone-blob-down 1.4s ease-in-out -0.2s infinite alternate; }
.file-dropzone__blob--2 { top: -14px;    left: 62%; width: 24px; height: 24px; animation: file-dropzone-blob-down 1.1s ease-in-out -0.7s infinite alternate; }
.file-dropzone__blob--3 { bottom: -12px; left: 38%; animation: file-dropzone-blob-up 1.6s ease-in-out -0.4s infinite alternate; }
.file-dropzone__blob--4 { bottom: -14px; left: 74%; width: 22px; height: 22px; animation: file-dropzone-blob-up 1.2s ease-in-out -0.9s infinite alternate; }
.file-dropzone__blob--5 { left: -12px;   top: 40%;  width: 26px; height: 26px; animation: file-dropzone-blob-right 1.5s ease-in-out -0.3s infinite alternate; }
.file-dropzone__blob--6 { right: -12px;  top: 55%;  width: 26px; height: 26px; animation: file-dropzone-blob-left 1.3s ease-in-out -0.6s infinite alternate; }

@keyframes file-dropzone-blob-down  { from { transform: translateY(0) scale(0.9); }  to { transform: translateY(16px) scale(1.1); } }
@keyframes file-dropzone-blob-up    { from { transform: translateY(0) scale(0.9); }  to { transform: translateY(-16px) scale(1.1); } }
@keyframes file-dropzone-blob-right { from { transform: translateX(0) scale(0.9); }  to { transform: translateX(15px) scale(1.05); } }
@keyframes file-dropzone-blob-left  { from { transform: translateX(0) scale(0.9); }  to { transform: translateX(-15px) scale(1.05); } }

/* --- Contenu idle : icône flottante + libellés ---------------------------- */

.file-dropzone__idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 20px;
  text-align: center;
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.file-dropzone.is-success .file-dropzone__idle {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

/* wrapper séparé : le lift transitionne, le float boucle sur l'enfant */
.file-dropzone__icon-lift {
  display: block;
  margin-bottom: 6px;
  color: var(--ml-muted, #8b91a3);
  transition:
    color 0.3s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.file-dropzone.is-over .file-dropzone__icon-lift {
  color: var(--fdz-accent);
  transform: translateY(-7px) scale(1.12);
}

.file-dropzone__icon {
  display: block;
  width: 36px;
  height: 36px;
  animation: file-dropzone-float 3.4s ease-in-out infinite;
}

@keyframes file-dropzone-float {
  0%, 100% { transform: translateY(2px); }
  50%      { transform: translateY(-4px); }
}

.file-dropzone__label {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.file-dropzone__hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ml-muted, #8b91a3);
}

/* --- État succès : check dessiné + ripple --------------------------------- */

.file-dropzone__success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.file-dropzone.is-success .file-dropzone__success {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.3s ease 0.08s,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
}

.file-dropzone__check {
  width: 54px;
  height: 54px;
}

.file-dropzone__check-circle,
.file-dropzone__check-mark {
  fill: none;
  stroke: var(--fdz-success);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100; /* pathLength=100 */
  stroke-dashoffset: 100;
}

.file-dropzone__check-circle { stroke-width: 2.5; }
.file-dropzone__check-mark   { stroke-width: 3.5; }

.file-dropzone.is-success .file-dropzone__check-circle {
  animation: file-dropzone-draw 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.12s forwards;
}

.file-dropzone.is-success .file-dropzone__check-mark {
  animation: file-dropzone-draw 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}

@keyframes file-dropzone-draw {
  to { stroke-dashoffset: 0; }
}

.file-dropzone__success-label {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fdz-success);
}

.file-dropzone__ripple {
  position: absolute;
  top: calc(50% - 12px);
  left: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  border: 2px solid var(--fdz-success);
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

.file-dropzone.is-success .file-dropzone__ripple {
  animation: file-dropzone-ripple 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

@keyframes file-dropzone-ripple {
  0%   { opacity: 0.7; transform: scale(0.5); }
  100% { opacity: 0;   transform: scale(3); }
}

/* --- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .file-dropzone { transition: box-shadow 0.2s ease; }
  .file-dropzone.is-over { transform: none; }

  .file-dropzone__icon,
  .file-dropzone__blob,
  .file-dropzone.is-over .file-dropzone__border,
  .file-dropzone.is-over .file-dropzone__border-rect {
    animation: none;
  }

  .file-dropzone__idle,
  .file-dropzone__success,
  .file-dropzone__icon-lift {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }

  .file-dropzone.is-success .file-dropzone__check-circle,
  .file-dropzone.is-success .file-dropzone__check-mark {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }

  .file-dropzone.is-success .file-dropzone__ripple {
    animation: none;
  }
}