/*===================== SECTION FIRST OF WEBSITE ===========================*/

.section-first {
    height: 60vh;
    background: #000000;
    color: white;
    display: flex;
    justify-content: space-between;

}
.section-first span.img-relative {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}
.section-first span.img-relative::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(21 37 62 / 13%) 0%, rgb(0 0 0 / 100%) 102.98%);
    /* ou background: rgba(0, 0, 0, 0.5); selon l'effet voulu */
    z-index: 1;
    transition: all 0.5s ease-in-out;
}
.section-first .img-relative img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    z-index: 0;
    opacity: 0;
    transition: all .5s ease-in-out;
    animation: fadeAnimation 15s infinite;
}
.section-first .img-relative img:nth-child(1) {
    animation-delay: 0s;
}
.section-first .img-relative img:nth-child(2) {
    animation-delay: 5s;
}
.section-first .img-relative img:nth-child(3) {
    animation-delay: 10s;
}

@keyframes fadeAnimation {
    0% { opacity: 0; }
    10% { opacity: 1; }
    33.33% { opacity: 1; }
    43.33% { opacity: 0; }
    100% { opacity: 0; }
}
/* @keyframes fadeAnimation {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
} */

.section-first .content-details {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    position: absolute;
    top: 30vh;
    z-index: 2;
}
.section-first .content-details title {
    display: block;
    font-weight: 700;
    font-family: var(--font-marcellus);
    font-size: var(--h4-size);   
    text-transform: uppercase;
}
.section-first .content-details p ,
.section-first .content-details .descr {
    width: 53vw;
    text-align: center;
    line-height: 2vw;
    font-family: var(--font-name);
    font-size: var(--p-size);
}

/*===================== SECTION TWO OF WEBSITE ===========================*/

.section-list-projects {
    display: flex;
    padding: 3vw 5vw 3vw 5vw;
    gap: 2vw;
    /* width: 100% */
}

.section-list-projects .filter-container {
    /* background: #8b8b8b; */
    /* background: rgba(128, 128, 128, 0.562); */
    background: rgb(255 255 255 / 82%);
    padding: 2vw;
    border-radius: 5px;
    border: 1px solid #ffffff6e;
    width: 42vw;
    /* margin: auto; */
    display: none;
    flex-direction: column;
    gap: 0vw;

    max-height: 0; /* Hauteur initiale */
    overflow: hidden; /* Cache le contenu qui dépasse */
    /* background: #f4f4f4; */
    padding: 0 20px; 
    /* margin-top: 10px; */
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}
.section-list-projects .filter-container.active {
    padding: 1.35vw;
    display: flex;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    /* max-height: 200px; Ajuste selon ton contenu */
}
.section-list-projects h2 {
    color: #000000;
    font-size: var(--h4-size);
    font-family: var(--font-name);
    font-weight: 500;
    margin-bottom: 1vw;
}
.section-list-projects .filter-container .filter-group {
    margin-bottom: 2vw;
}
.section-list-projects .filter-container .filter-group .inputTextPrice {
    border: none;
    outline: none;
    padding: 1vw 1vw;
    width: 100%;
    margin-top: 1vw;
    font-size: var(--h5-size);
    font-family: var(--font-name);
    font-weight: 600;
    color: #000f25;
}
.section-list-projects .filter-container .filter-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5vw;
}
.section-list-projects .filter-container .filter-group label {
    font-weight: 700;
    display: block;
    margin-bottom: 1vw;
    color: black;
    font-size: var(--p-size);
}
.section-list-projects .filter-container .filter-buttons button {
    background: #e0e0e0;
    border: none;
    padding: .9vw 1.2vw;
    margin: 0;
    border-radius: 2vw;
    cursor: pointer;
    text-align: left;
    transition: all .5s ease-in-out;
}
.section-list-projects .filter-container .filter-buttons button.active,
.section-list-projects .filter-container .filter-buttons button:hover {
    background: #6191dd;
    transition: all .5s ease-in-out;
    color: #fff;
}
.section-list-projects .filter-container .filter-buttons a {
    text-decoration: underline !important;
    color: #003281;
    text-decoration: none;
    font-size: 1.52vw;
    display: inline-block;
    font-weight: 500;
    /* margin-top: 5px; */
}
.section-list-projects .filter-container .price-slider {
    width: 100%;
}
.section-list-projects .filter-container .checkbox-group {
    display: flex;
    flex-direction: column;
}
.section-list-projects .filter-container .checkbox-group label {
    margin-bottom: 1.3vw;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 300;
}
.section-list-projects .filter-container .checkbox-group input {
    margin-right: 10px;
}
.section-list-projects .filter-container .apply-btn {
    background: #000f25;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    font-size: var(--p-size);
    border: 1px solid white;
    transition: all .5s ease-in-out;
}
.section-list-projects .filter-container .apply-btn:hover {
    background: transparent;
    border: 1px solid #000f25;
    color: #000f25;
    transition: all .5s ease-in-out;
}

/* LISTE DES PROJETS */

.section-list-projects .list-projects {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    width: 100%;
}
.section-list-projects .list-projects .head-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-list-projects .list-projects .head-content span.text {
    font-size: var(--h6-size);
    text-transform: uppercase;
    color: white;
}
.section-list-projects .list-projects .head-content span.btn-action {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 1vw 2vw;
    width: fit-content;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    border: 1px solid #000000;
    transition: all .5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.section-list-projects .list-projects .head-content span.btn-action i {
    font-size: 1vw;
    color: #000000;
}
.section-list-projects .list-projects .content-main .list-images {
    /* padding: 4vw 5vw; */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2vw 0;
}

.list-images .one-img {
    display: flex;
    position: relative;
    flex-direction: column;
    border-radius: 15px;
    /* width: auto; */
    width: 21vw;
}
.list-images .one-img figure {
    width: 21vw;
    height: 15vw;
    position: relative;
    overflow: hidden;
    transition: all .5s ease-in-out;
}
.list-images .one-img figure::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 15px;
    height: 100%;
    opacity: 1;
    transition: all .5s ease-in-out;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.list-images .one-img figure img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
    transition: all .5s ease-in-out;
}
.list-images .one-img:hover figure {
    transform: scale(1.05); /* L'image grandit légèrement */
    transition: all .5s ease-in-out;
}

.list-images .one-img .details {
    position: absolute;
    bottom: 0;
    margin-bottom: 1.5vw;
    padding: 0 .8vw;
    color: white;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.list-images .one-img .details .left {
    display: flex;
    flex-direction: column;
    gap: .8vw;
}
.list-images .one-img .details .name {
    font-size: var(--p-size);
    font-family: var(--font-name);
    font-weight: bold;
}

.list-images .one-img .details .icon-chevron {
    font-size: 1vw;
    opacity: 0;
    transform: translateY(-2vw);
    transition: all .5s ease-in-out;
}
.list-images .one-img:hover .details .icon-chevron {
    opacity: 1;
    transform: translateY(0);
    transition: all .5s ease-in-out;
}

/*===================== RESPONSIVE OF SECTIONS__WEBSITE ===========================*/

@media (max-width:768px) {
    
    .section-first .content-details title {
        font-size: 8vw;
        text-align: center;
    }
    .section-first .content-details p, .section-first .content-details .descr {
        width: 89vw;
        text-align: center;
        line-height: 5vw;
        font-weight: 100;
        font-size: 3.5vw;
    }
    .section-first .content-details {
        gap: 4vw;
        top: 28vh;
        z-index: 2;
    }

    .section-list-projects {
        padding: 6vw 5vw 7vw 5vw;
        position: relative;
    }
    .list-images .one-img {
        width: 100%;
    }
    .list-images .one-img figure {
        width: 100%;
        height: 54vw;
    }
    .list-images .one-img .details {
        bottom: 0;
        margin-bottom: 1.5vw;
        padding: 2vw 3.8vw;
    }
    
    .list-images .one-img .details .name {
        font-size: 23px;
        font-weight: 300;
    }
    .list-images .one-img .details .town {
        font-size: 12px;
    }
    .list-images .one-img .details .icon-chevron {
        font-size: 5vw;
    }
    .section-list-projects .list-projects {
        gap: 6vw;
        width: 100%;
    }
    .section-list-projects .list-projects .head-content span.text {
        font-size: 4vw;
        color: white;
    }

    .section-list-projects .list-projects .head-content span.btn-action {
        padding: 2vw 4vw;
        width: fit-content;
        border-radius: 5px;
        font-size: 15px;
        text-transform: uppercase;
    }
    .section-list-projects .list-projects .head-content span.btn-action i {
        font-size: 5vw;
    }
    .section-list-projects .list-projects .content-main .list-images {
        gap: 6vw 0;
    }
    .section-list-projects .filter-container {
        background: rgb(255 255 255);
        padding: 2vw;
        border-radius: 5px;
        border: 1px solid #ffffff6e;
        position: absolute;
        width: 90vw;
        top: 21vw;
        z-index: 2;
        display: none;
        flex-direction: column;
        gap: 2vw;
    }
    .section-list-projects h2 {
        color: #000000;
        font-size: 8vw;
    }
    .section-list-projects .filter-container .filter-group label {
        font-weight: 700;
        margin-bottom: 2vw;
        padding-bottom: 0vw;
        font-size: 18px;
    }
    .section-list-projects .filter-container .filter-group label hr {
        margin-top: 1.5vw;
    }
    .section-list-projects .filter-container .filter-buttons {
        gap: 1.5vw;
    }
    .section-list-projects .filter-container .filter-buttons button {
        background: #e0e0e0;
        border: none;
        padding: 2.9vw 6.2vw;
    }

}