/* =====================================================================
   upload-2025.css — Module Upload FrontEnd ( espace membre )
   Autonome : ne depend PAS de plugins/upload/css/uploader.css.

   Deux usages, meme socle :
     .wl-up--banner   Famille 1 — image unique, ratio 728x90 ( couverture PRO )
     .wl-up--gallery  Famille 2 — images multiples en grille ( photos annonce )

   Palette reprise du front : orange #EF5A28, fonds #242830 / #2b3340.
   ===================================================================== */

.wl-up {
    --wl-orange: #EF5A28;
    --wl-fond:   #242830;
    --wl-bord:   #3a4250;
    --wl-texte:  #c8cfd9;
    --wl-doux:   #8b95a5;
    margin: 0 0 6px;
}

/* ── Zone de depot ─────────────────────────────────────────────── */
.wl-up-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 20px;
    min-height: 132px;
    border: 2px dashed var(--wl-bord);
    border-radius: 10px;
    background: var(--wl-fond);
    color: var(--wl-doux);
    cursor: pointer;
    text-align: center;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.wl-up-zone:hover            { border-color: rgba(239,90,40,.55); background: rgba(239,90,40,.06); }
.wl-up-zone.is-dragover      { border-color: var(--wl-orange); background: rgba(239,90,40,.12); transform: scale(1.006); }
.wl-up-zone.is-busy          { pointer-events: none; opacity: .65; }
.wl-up-zone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wl-up-ico       { width: 34px; height: 34px; stroke: var(--wl-doux); fill: none; stroke-width: 1.6; transition: stroke .18s ease; }
.wl-up-zone:hover .wl-up-ico,
.wl-up-zone.is-dragover .wl-up-ico { stroke: var(--wl-orange); }

.wl-up-titre     { font-size: 15px; color: var(--wl-texte); }
.wl-up-titre b   { color: var(--wl-orange); font-weight: 600; }
.wl-up-sub       { font-size: 12.5px; color: var(--wl-doux); }

/* ── Barre de progression ──────────────────────────────────────── */
.wl-up-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px; background: rgba(255,255,255,.06);
    border-radius: 0 0 8px 8px; overflow: hidden;
    opacity: 0; transition: opacity .2s ease;
}
.wl-up-zone.is-busy .wl-up-bar { opacity: 1; }
.wl-up-bar i {
    display: block; height: 100%; width: 0;
    background: var(--wl-orange);
    transition: width .15s linear;
}

/* ── Vignettes ─────────────────────────────────────────────────── */
.wl-up-preview:empty { display: none; }
.wl-up-preview       { margin: 0 0 14px; padding: 0; list-style: none; }

.wl-up-item {
    position: relative;
    margin: 0;
    border: 1px solid var(--wl-bord);
    border-radius: 10px;
    overflow: hidden;
    background:
        linear-gradient(45deg, #2e343e 25%, transparent 25%, transparent 75%, #2e343e 75%) 0 0/16px 16px,
        linear-gradient(45deg, #2e343e 25%, #272c35 25%, #272c35 75%, #2e343e 75%) 8px 8px/16px 16px;
}
.wl-up-item img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Famille 1 — banniere : ratio reel 728 x 90 respecte */
.wl-up--banner .wl-up-item { aspect-ratio: 728 / 90; max-width: 728px; }

/* Famille 2 — galerie ( photos annonce, lot suivant ) */
.wl-up--gallery .wl-up-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.wl-up--gallery .wl-up-item { aspect-ratio: 4 / 3; }

/* Barre d'infos en surimpression */
.wl-up-meta {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    background: linear-gradient(to top, rgba(16,19,24,.92), rgba(16,19,24,0));
    opacity: 0; transition: opacity .18s ease;
}
.wl-up-item:hover .wl-up-meta,
.wl-up-item:focus-within .wl-up-meta { opacity: 1; }

.wl-up-nom {
    flex: 1 1 auto; min-width: 0;
    font-size: 11.5px; color: #e8ecf2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Bouton supprimer : icone + libelle, TOUJOURS visible ( hors .wl-up-meta,
   qui n'apparait qu'au survol ). Icone en SVG inline et non en classe Font
   Awesome — le rendu ne depend ainsi d'aucune version de FA
   ( fa-4 : `fa fa-trash`, fa-5+ : `fas fa-trash` ). */
.wl-up-del {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    border: 0; border-radius: 6px;
    background: rgba(217,83,79,.94); color: #fff;
    font-size: 12.5px; line-height: 1.4; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    transition: background .15s ease, transform .15s ease;
}
.wl-up-del svg    { flex: 0 0 auto; width: 15px; height: 15px;
                    stroke: currentColor; fill: none;
                    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wl-up-del:hover  { background: #d9534f; }
.wl-up-del:active { transform: translateY(1px); }
.wl-up-del:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Galerie ( photos annonce ) : vignettes trop petites pour un libelle —
   on ne garde que l'icone. La banniere PRO, elle, garde le texte. */
.wl-up--gallery .wl-up-del      { gap: 0; padding: 0; width: 30px; height: 30px; border-radius: 50%; justify-content: center; }
.wl-up--gallery .wl-up-del span { display: none; }

/* Sur ecran tactile, pas de :hover — on montre la barre en permanence */
@media (hover: none) {
    .wl-up-meta { opacity: 1; }
}

/* ── Galerie : aide, etat plein, fantome de drag ────────────────── */
.wl-up-aide {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--wl-doux);
}
.wl-up--banner .wl-up-aide { display: none; }        /* une seule image : rien a ordonner */
.wl-up--gallery .wl-up-item { cursor: grab; }
.wl-up--gallery .wl-up-item:active { cursor: grabbing; }

/* Fantome laisse par SortableJS pendant le deplacement */
.wl-up--gallery .is-ghost { opacity: .35; }

/* La 1re vignette est la photo principale — reperage visuel explicite,
   l'ordre porte l'information ( $listPhoto[0] cote affichage ). */
.wl-up--gallery .wl-up-item:first-child { outline: 2px solid var(--wl-orange); outline-offset: -2px; }
.wl-up--gallery .wl-up-item:first-child::before {
    content: "Principale";
    position: absolute; top: 8px; left: 8px; z-index: 2;
    padding: 3px 9px; border-radius: 4px;
    background: rgba(239,90,40,.94); color: #fff;
    font-size: 11px; line-height: 1.5;
    pointer-events: none;
}

/* ── Message d'etat ────────────────────────────────────────────── */
.wl-up-etat {
    display: none;
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    border-left: 3px solid transparent;
}
.wl-up-etat.is-ok  { display: block; color: #9fd8a8; background: rgba(76,175,80,.10); border-left-color: #4caf50; }
.wl-up-etat.is-ko  { display: block; color: #f0a9a0; background: rgba(217,83,79,.10); border-left-color: #d9534f; }

@media (max-width: 767px) {
    .wl-up-zone  { padding: 20px 14px; min-height: 112px; }
    .wl-up-titre { font-size: 14px; }
}