/* ==========================================================================
   Section Fait main - split layout : grid 2x2 de photos atelier à gauche,
   contenu (titre + 4 promesses) à droite.
   Reproduction de A_FaitMain (design_handoff_museaux/direction-a.jsx).
   ========================================================================== */

.mdm-fait-main {
    padding: 90px var(--m-page-padding);
    position: relative;
}

.mdm-fait-main__inner {
    max-width: var(--m-container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Blob mint en arrière-plan à gauche */
.mdm-fait-main__blob {
    position: absolute;
    left: -60px;
    top: 120px;
    width: 300px;
    height: 300px;
    background: var(--m-mint);
    opacity: .3;
    filter: blur(60px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* - Colonne gauche : grid 2x2 photos atelier - */
.mdm-fait-main__visuals {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mdm-fait-main__visual {
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: var(--m-paper-shadow);
    margin: 0;
}

.mdm-fait-main__visual:nth-child(1) { transform: rotate(-1.5deg); }
.mdm-fait-main__visual:nth-child(2) { transform: rotate(1deg); }
.mdm-fait-main__visual:nth-child(3) { transform: rotate(-.5deg); }
.mdm-fait-main__visual:nth-child(4) { transform: rotate(2deg); }

.mdm-fait-main__visual-img-wrap {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 2px;
}

.mdm-fait-main__visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9) brightness(1.05);
    display: block;
}

.mdm-fait-main__visual-label {
    display: block;
    font-family: var(--m-font-hand);
    font-size: 18px;
    text-align: center;
    margin-top: 6px;
    color: var(--m-ink);
}


/* - Colonne droite : copy + promesses - */
.mdm-fait-main__copy {
    position: relative;
    z-index: 2;
}

.mdm-fait-main__eyebrow {
    display: block;
    font-family: var(--m-font-hand);
    font-size: 22px;
    color: var(--m-gold);
    margin-bottom: 6px;
}

.mdm-fait-main__title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 3vw + 1rem, 3.375rem); /* 32 → 54px */
    color: var(--m-ink);
    margin: 0 0 24px;
    line-height: 1.05;
}

.mdm-fait-main__lead {
    font-family: var(--m-font-body);
    font-size: 16px;
    color: var(--m-ink-2);
    line-height: 1.7;
    margin: 0 0 28px;
}

/* - Liste des 4 promesses - */
.mdm-fait-main__promises {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.mdm-fait-main__promise {
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: var(--m-font-body);
    font-size: 15px;
    color: var(--m-ink);
}

.mdm-fait-main__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--m-mint);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* - Lien « découvrir le processus complet → » - */
.mdm-fait-main__more {
    font-family: var(--m-font-body);
    font-size: 14px;
    color: var(--m-ink);
    border-bottom: 1.5px solid var(--m-gold);
    padding-bottom: 3px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: color var(--m-fast) var(--m-ease);
}

.mdm-fait-main__more:hover { color: var(--m-gold); }

/* - Responsive - */
@media (max-width: 900px) {
    .mdm-fait-main { padding: var(--m-space-xl) var(--m-space); }
    .mdm-fait-main__inner { grid-template-columns: 1fr; gap: 40px; }
    .mdm-fait-main__title { text-align: left; }
}