/*
 * Images jointes à une annonce collée (public/js/collage-images.js, 2026-10-15) :
 * boîtes de collage de la landing et de la recherche, ajout après coup sur la fiche.
 * Système « L'instrument de verre » : jetons de base.css, aucune nouvelle couleur.
 */
.collage-images { margin-top: 12px; display: grid; gap: 10px; }
.collage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .875rem; color: var(--text-3); }
.collage-ajout {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
    border-radius: var(--radius-pill); background: var(--verre); border: 1px solid var(--border-strong);
    color: var(--text); cursor: pointer; font-size: .875rem;
    transition: background var(--t), border-color var(--t), transform var(--t);
}
.collage-ajout input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.collage-ajout:focus-within { outline: 2px solid var(--ring-color); outline-offset: 2px; }
.collage-ajout:active { transform: scale(.98); }
.collage-ajout.is-plein { opacity: .45; pointer-events: none; }
@media (hover: hover) { .collage-ajout:hover { border-color: var(--accent-border); } }
.collage-aide { flex: 0 1 auto; }
.collage-adresse { display: inline-flex; gap: 6px; flex: 1 1 260px; min-width: 0; }
.collage-adresse input {
    flex: 1; min-width: 0; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, .25); border: 1px solid var(--border); color: var(--text); font-size: .875rem;
}
.collage-adresse button {
    min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--verre);
    border: 1px solid var(--border-strong); color: var(--text); font-size: .875rem; cursor: pointer;
}
.collage-vignettes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.collage-vignette { position: relative; width: 72px; height: 54px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-strong); background: rgba(0, 0, 0, .3); }
.collage-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage-vignette button {
    position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%;
    border: 0; background: rgba(5, 6, 8, .8); color: #fff; font-size: 15px; line-height: 22px; cursor: pointer;
}
/* Adresse dont l'aperçu ne s'affiche pas : sans doute refusée par le serveur. */
.collage-vignette.is-douteuse { border-color: var(--warning-border); }
.collage-vignette.is-douteuse::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--warning); font-family: var(--font-mono); }
.collage-compte { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); }
.collage-message { margin: 0; font-size: .875rem; color: var(--text-2); }
.collage-message.is-erreur { color: var(--warning); }

/* Dépôt en cours sur la boîte : contour bleu, doublé du texte de la zone. */
.ingest-box.is-depot, .visuel-ajout.is-depot { outline: 2px dashed var(--accent-strong); outline-offset: 4px; }

/* Adresse de l'annonce collée (2026-10-15) : boîtes de collage, fiche, carte de favori. */
.ingest-url { display: grid; gap: 6px; margin-top: 12px; }
.ingest-url label { font-size: .875rem; color: var(--text-2); }
.ingest-url label span { color: var(--text-3); }
.ingest-url-champ, .collee-origine-ligne input {
    width: 100%; min-width: 0; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, .25); border: 1px solid var(--border); color: var(--text); font-size: .875rem;
}
.collee-origine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0; font-size: .9375rem; color: var(--text-2); }
.collee-origine svg { flex: none; color: var(--text-3); }
.collee-origine a { color: var(--accent-strong); }
.collee-origine-form { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255, 255, 255, .02); }
.collee-origine-form label { font-size: .875rem; color: var(--text-2); }
.collee-origine-ligne { display: flex; gap: 8px; }
.card-origine { display: block; margin-top: 8px; font-size: .8125rem; color: var(--accent-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fiche d'une annonce collée : ce qui a été lu sur les images, et l'ajout après coup. */
.visuel-lu, .visuel-ajout {
    margin: 16px 0; padding: 18px 20px; border-radius: var(--radius);
    background: rgba(255, 255, 255, .025); box-shadow: var(--coeur-lueur), var(--coque);
}
.visuel-lu h3, .visuel-ajout h3 { margin: 0 0 4px; font-size: 1rem; }
.visuel-tag { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.visuel-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; margin: 12px 0 6px; }
.visuel-champ dt { font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.visuel-champ dd { margin: 2px 0 0; font-size: .9375rem; color: var(--text); }
.visuel-champ.is-repris dd::after { content: ' · repris dans le calcul'; font-size: .75rem; color: var(--accent-strong); }
.visuel-liste { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); font-size: .875rem; line-height: 1.5; }
.visuel-note { margin: 10px 0 0; font-size: .8125rem; color: var(--text-3); }
.visuel-ajout p { margin: 0 0 4px; color: var(--text-2); font-size: .9375rem; }
.visuel-ajout .visuel-envoyer { margin-top: 12px; }

@media (max-width: 768px) {
    .collee-origine-ligne { flex-direction: column; }
    .collage-aide { flex-basis: 100%; }
    .collage-adresse { flex-basis: 100%; }
    .visuel-lu, .visuel-ajout { padding: 16px; }
}