/* ============================================
   05 - À PROPOS (collage photos peinture)
   ============================================ */

.jm-apropos {
    padding: var(--jm-section-y) 0;
    position: relative;
}

.jm-apropos__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 3;
}

.jm-apropos__media {
    position: relative;
    aspect-ratio: 1 / 1;
}

.jm-apropos__media-frame {
    position: absolute;
    top: 0; left: 0;
    width: 78%;
    aspect-ratio: 4 / 5;
    border-radius: var(--jm-radius-lg);
    overflow: hidden;
    box-shadow: var(--jm-shadow-lg);
    border: 8px solid #fff;
    transform: rotate(-3deg);
    transition: transform 0.6s ease;
    z-index: 3;
}
.jm-apropos__media-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.jm-apropos__media:hover .jm-apropos__media-frame { transform: rotate(-1deg) translateY(-6px); }
.jm-apropos__media:hover .jm-apropos__media-frame img { transform: scale(1.05); }

.jm-apropos__media-second {
    position: absolute;
    bottom: 0; right: 0;
    width: 55%;
    aspect-ratio: 4 / 3;
    border-radius: var(--jm-radius-lg);
    overflow: hidden;
    box-shadow: var(--jm-shadow-lg);
    border: 8px solid #fff;
    transform: rotate(5deg);
    transition: transform 0.6s ease;
    z-index: 4;
}
.jm-apropos__media-second img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.jm-apropos__media:hover .jm-apropos__media-second { transform: rotate(3deg) translateY(-4px); }
.jm-apropos__media:hover .jm-apropos__media-second img { transform: scale(1.05); }

.jm-apropos__badge {
    position: absolute;
    top: 30%; right: -10px;
    background: var(--jm-white);
    padding: 20px 26px;
    border-radius: var(--jm-radius);
    box-shadow: var(--jm-shadow-lg);
    text-align: center;
    border-left: 4px solid var(--jm-red);
    z-index: 6;
    transform: rotate(4deg);
    animation: jmBadgeFloat 6s ease-in-out infinite;
}
@keyframes jmBadgeFloat {
    0%, 100% { transform: rotate(4deg) translateY(0); }
    50%      { transform: rotate(4deg) translateY(-10px); }
}
.jm-apropos__badge strong {
    display: block;
    font-family: var(--jm-font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--jm-blue);
    line-height: 1;
}
.jm-apropos__badge span {
    display: block;
    font-size: 0.82rem;
    color: var(--jm-grey-700);
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.jm-apropos__lead {
    font-size: 1.15rem;
    color: var(--jm-grey-900);
    font-weight: 500;
}

.jm-apropos__list {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.jm-apropos__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--jm-font-display);
    font-weight: 600;
    color: var(--jm-black);
}
.jm-apropos__list i {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--jm-gradient);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(10, 42, 124, 0.3);
}