/* ============================================================================
   PHOTOS À VALIDER — /app/photos-a-valider (2026-10-01)
   Sa feuille : les .pav-* ne servent qu'ici. Une carte par proposition : l'actuelle et la
   proposée côte à côte, puis Valider / Refuser. Aucune couleur en dur.
   ========================================================================= */

.pav-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pav-carte {
    display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px;
    background: var(--et-surface); border: 1px solid var(--et-hairline);
}
.pav-tete { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; }
.pav-tete-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.pav-nom { font-size: 16px; color: var(--et-ink); overflow-wrap: anywhere; }
.pav-sous { font-size: 13px; color: var(--et-muted); }
.pav-code { margin-right: 6px; font-family: var(--et-font-mono); font-weight: 600; color: var(--et-form-blue-d); }
.pav-premiere { white-space: nowrap; }
.pav-photos { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 8px; }
.pav-photo { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.pav-photo > img, .pav-sans {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    border: 1px solid var(--et-hairline); background: var(--et-surface-2);
}
.pav-photo.est-absente > .pav-sans { border-style: dashed; border-color: var(--et-bord-champ); background: var(--et-surface); }
.pav-photo.est-proposee > img, .pav-photo.est-proposee > .pav-sans { border: 2px solid var(--et-form-blue); }
.pav-sans { display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--et-muted); }
.pav-photo > figcaption { font-size: 13px; color: var(--et-muted); text-align: center; }
.pav-photo.est-proposee > figcaption { color: var(--et-ink); font-weight: 600; }
.pav-fleche { justify-self: center; font-size: 18px; color: var(--et-muted); }
.pav-gestes { display: flex; gap: 8px; }
.pav-gestes > .mx-btn { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pav-valider { border-color: var(--et-form-blue); color: var(--et-form-blue-d); }

.pav-motifs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pav-motif {
    min-height: 44px; padding: 0 12px; border: 1px solid var(--et-form-border); border-radius: 0;
    background: var(--et-surface); font: inherit; font-size: 13px; color: var(--et-ink); cursor: pointer;
}
.pav-motif.est-actif { border-color: var(--et-form-blue); background: var(--et-tint); color: var(--et-form-blue-d); font-weight: 600; }

@media (max-width: 1024px) {
    .pav-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pav-grille { grid-template-columns: minmax(0, 1fr); }
}