/* ===========================
   Galerie réalisations
=========================== */


.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,240px);

    justify-content:center;

    gap:25px;

    max-width:900px;

    margin:50px auto;

}



/* ===========================
   Cartes projets
=========================== */


.project-card{

    border-radius:16px;

    overflow:hidden;

    cursor:pointer;

    background:#fff;

    box-shadow:0 6px 20px rgba(0,0,0,.12);

    transition:.3s ease;

}


.project-card:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 30px rgba(0,0,0,.18);

}



/* ===========================
   Aperçu miniature
=========================== */


.preview{

    position:relative;

    aspect-ratio:16 / 9;

    overflow:hidden;

}


.preview img{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

}



/* Couche après */

.preview-after{

    position:absolute;

    top:0;

    left:0;

    width:50%;

    height:100%;

    overflow:hidden;

}



/* Ligne séparation */

.preview-divider{

    position:absolute;

    top:0;

    left:50%;

    width:3px;

    height:100%;

    background:white;

    transform:translateX(-50%);

}



/* Titre carte */

.project-card h3{

    margin:0;

    padding:14px;

    text-align:center;

    font-size:1.05rem;

    color:#333;

}



/* ===========================
   Modal
=========================== */


.project-modal-content{

    max-width:1100px;

    width:90%;

}



/* Zone comparaison */

.compare-container{

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#111;

}



/* Image avant */

.compare-before{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

}



/* Masque image après */

.compare-after-wrapper{

    position:absolute;

    top:0;

    left:0;

    width:50%;

    height:100%;

    overflow:hidden;

    z-index:2;

}



/* Image après */

.compare-after-wrapper img{

    position:absolute;

    top:0;

    left:0;

    height:100%;

    width:auto;

    min-width:100%;

    max-width:none;

    object-fit:cover;

}



/* ===========================
   Barre curseur
=========================== */


.compare-divider{

    position:absolute;

    top:0;

    left:50%;

    width:3px;

    height:100%;

    background:white;

    transform:translateX(-50%);

    cursor:ew-resize;

    z-index:5;

}



/* Poignée */

.compare-handle{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:58px;

    height:58px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    box-shadow:

        0 4px 15px rgba(0,0,0,.35);

    cursor:grab;

}



.compare-handle:active{

    cursor:grabbing;

}



/* Flèches */

.arrow{

    font-size:32px;

    line-height:1;

    color:#333;

    font-weight:bold;

}


.arrow.left{

    margin-left:-3px;

}


.arrow.right{

    margin-right:-3px;

}



/* ===========================
   Description
=========================== */


.project-description{

    margin-top:30px;

    line-height:1.7;

}



/* ===========================
   Responsive
=========================== */


@media(max-width:700px){


    .gallery{

        grid-template-columns:1fr;

        max-width:300px;

    }



    .project-card h3{

        font-size:1rem;

    }



    .project-modal-content{

        width:95%;

    }



    .compare-container{

        aspect-ratio:4 / 3;

    }



    .compare-handle{

        width:48px;

        height:48px;

    }



    .arrow{

        font-size:25px;

    }

}

/* ===========================
   Désactivation sélection images
=========================== */

.compare-container,
.compare-container *{

    user-select:none;

    -webkit-user-select:none;

    -moz-user-select:none;

    -ms-user-select:none;

}


.compare-container img{

    pointer-events:none;

}

.project-card img{

    user-select:none;

    -webkit-user-drag:none;

    user-drag:none;

}