/* Fichiers joints : astuce Ctrl+V, zone survolée, aperçu en grand avant de joindre (assets/js/pieces-jointes.js). */

.astuce-coller { margin: 6px 0 0; font-size: .85rem; color: var(--encre-douce, #4a5568); }
.astuce-coller .bi { color: var(--marine, #13294b); margin-right: 4px; }
.astuce-coller kbd { font: inherit; font-size: .8em; font-weight: 600; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--ligne-forte, #c7cdd8);
    border-bottom-width: 2px; background: var(--blanc, #fff); color: var(--marine, #13294b); }
input[type=file].zone-collable.survol, .zone-collable.survol { outline: 3px dashed var(--jaune, #f5c400); outline-offset: 3px; background: #fffbe6; }

html.apercu-piece-ouvert { overflow: hidden; }

.apercu-piece { padding: 0; border: 0; border-radius: 16px; width: min(1180px, 96vw); height: min(92vh, 980px); max-width: none; max-height: none;
    background: var(--blanc, #fff); color: var(--encre, #1b2433); box-shadow: 0 24px 80px rgb(10 20 40 / 35%); overflow: hidden; }
.apercu-piece::backdrop { background: rgb(10 18 34 / 72%); backdrop-filter: blur(3px); }
.apercu-piece[open] { animation: apercu-entree .22s cubic-bezier(.2, 0, 0, 1); }
@keyframes apercu-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.apercu-piece-cadre { display: grid; grid-template-rows: auto 1fr auto; height: 100%; margin: 0; }
.apercu-piece-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ligne, #e3e7ee); }
.apercu-piece-entete h2 { margin: 0; font-size: 1.2rem; color: var(--marine, #13294b); }
.apercu-piece-compte { margin: 2px 0 0; font-size: .88rem; color: var(--encre-douce, #4a5568); }
.apercu-piece-fermer { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; padding: 6px 8px; border-radius: 8px; color: var(--marine, #13294b); }
.apercu-piece-fermer:hover, .apercu-piece-fermer:focus-visible { background: var(--brume, #eef1f6); }

/* La vue : damier discret (on voit les images transparentes), image adaptée à l'écran ; un clic passe en taille réelle. */
.apercu-piece-vue { position: relative; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 14px;
    background: repeating-conic-gradient(#f1f3f7 0 25%, #fafbfc 0 50%) 0 0 / 22px 22px; }
.apercu-piece-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 2px 14px rgb(10 20 40 / 18%); background: #fff; }
.apercu-piece-vue.zoomable .apercu-piece-image { cursor: zoom-in; }
.apercu-piece-vue.zoom { align-items: flex-start; justify-content: flex-start; }
.apercu-piece-vue.zoom .apercu-piece-image { max-width: none; max-height: none; cursor: zoom-out; }
.apercu-piece-aide { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 999px; font-size: .8rem;
    background: rgb(19 41 75 / 82%); color: #fff; pointer-events: none; }
.apercu-piece-vue:not(.zoomable) .apercu-piece-aide, .apercu-piece-vue.zoom .apercu-piece-aide { display: none; }
.apercu-piece-pdf { padding: 0; }
.apercu-piece-pdf object { width: 100%; height: 100%; border: 0; }
.apercu-piece-vide { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 420px; text-align: center; color: var(--encre-douce, #4a5568); margin: 0; }
.apercu-piece-vide > .bi { font-size: 3rem; color: var(--marine, #13294b); }

.apercu-piece-pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; padding: 12px 18px;
    border-top: 1px solid var(--ligne, #e3e7ee); background: var(--blanc, #fff); }
.apercu-piece-infos { flex: 1 1 320px; min-width: 0; }
.apercu-piece-nom { display: block; margin: 0; }
.apercu-piece-nom > span:first-child { display: block; font-size: .8rem; font-weight: 600; color: var(--encre-douce, #4a5568); margin-bottom: 3px; }
.apercu-piece-nom-champ { display: flex; align-items: center; gap: 4px; }
.apercu-piece-nom input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--ligne-forte, #c7cdd8); border-radius: 8px; font: inherit; }
.apercu-piece-nom input[readonly] { border-color: transparent; background: transparent; padding-left: 0; font-weight: 600; }
.apercu-piece-nom-champ [data-ext] { color: var(--encre-douce, #4a5568); }
.apercu-piece-details { margin: 4px 0 0; font-size: .82rem; color: var(--encre-douce, #4a5568); }
.apercu-piece-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.apercu-piece-actions .bouton { min-height: 44px; }

/* Cellulaire : plein écran, gros boutons en bas, faciles à atteindre du pouce. */
@media (max-width: 700px) {
    .apercu-piece { inset: 0; margin: 0; width: 100%; height: 100%; border-radius: 0; }
    .apercu-piece-vue { padding: 6px; }
    .apercu-piece-actions { width: 100%; }
    .apercu-piece-actions .bouton { flex: 1; justify-content: center; }
}

/* Avis bref après l'ajout (ou si Ctrl+V ne sait pas où joindre). */
.avis-piece { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px); z-index: 2000; max-width: min(560px, 92vw); padding: 10px 16px;
    border-radius: 10px; background: var(--marine, #13294b); color: #fff; font-size: .92rem; box-shadow: 0 8px 28px rgb(10 20 40 / 30%);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.avis-piece.visible { opacity: 1; transform: translate(-50%, 0); }
.avis-piece.avis-piece-ok::before { content: "✓ "; color: var(--jaune, #f5c400); font-weight: 700; }

/* Bouton « Voir » des listes de fichiers. */
.bouton-voir-piece { margin-left: auto; }
.liste-pieces .bouton-voir-piece + .bouton-icone { margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
    .apercu-piece[open] { animation: none; }
    .avis-piece { transition: none; }
}