/**
 * pacompose - la zone de photo, la fenêtre « Vos photos » et la fenêtre de patience (change 17). Les fenêtres sont celles
 * du thème (Bootstrap 5) ; ce fichier n'habille que ce que le module ajoute.
 */

/* les deux boutons, côte à côte (règle 3) */
.pa-photos-two {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.pa-photos-mention {
    margin-top: .25rem;
}

.pa-photos-mention__name {
    font-weight: 600;
}

/* la vignette d'une photo réutilisée, au balisage de Fine Uploader */
.qq-upload-list li.pa-photos-reused .qq-thumbnail-wrapper img {
    max-width: 160px;
    max-height: 160px;
}

/* la fenêtre « Vos photos » */
.pa-photos-card {
    cursor: pointer;
    transition: box-shadow .15s ease;
}

.pa-photos-card.choisie {
    outline: 2px solid var(--bs-primary, #2a3f8f);
    outline-offset: -2px;
}

.pa-photos-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: .375rem;
    background: #f1ebe0;
}

.pa-photos-new {
    border-style: dashed;
    min-height: 220px;
}

/* la fenêtre de patience (règle 15) : la photo sous un effet par état */
.pa-patience__frame {
    width: 180px;
    height: 180px;
    overflow: hidden;
    border-radius: .5rem;
    background: #f1ebe0;
    position: relative;
}

.pa-patience__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .8s ease, clip-path .6s ease;
}

.pa-patience--1 .pa-patience__photo {
    animation: pa-patience-rise 1.4s ease-out forwards;
}

.pa-patience--2 .pa-patience__photo {
    filter: grayscale(1) contrast(1.6);
}

.pa-patience--3 .pa-patience__photo {
    filter: saturate(1.7) contrast(1.1);
}

.pa-patience--4 .pa-patience__photo {
    animation: pa-patience-sharpen 1.4s ease-out forwards;
}

.pa-patience__steps {
    letter-spacing: .3em;
}

@keyframes pa-patience-rise {
    from {
        clip-path: inset(100% 0 0 0);
        opacity: .4;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes pa-patience-sharpen {
    from {
        filter: blur(6px);
    }
    to {
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pa-patience__photo,
    .pa-patience--1 .pa-patience__photo,
    .pa-patience--4 .pa-patience__photo {
        animation: none;
        transition: none;
    }
}