.header-section{
    min-height: 100vh; /* hauteur = écran visible */
    width: 100%;
    
    background-image: url('/images/villa-header.jpg');
    
    background-size: cover;  
    background-position: center;  
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;

    
    .header-titre-div{
    display: flex;
    flex-direction: column;
    padding-top: clamp(30px, 10vh, 10px);
    .title {
        display: flex;
        flex-direction: column;
        line-height: 1;
    }
    

    .title span {
        display: block;
    }
    }
    .header-fleche-div{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: clamp(24px, 5vh, 64px);
        img{
            width: 40px;
            height: auto;
            transform: rotate(90deg);
        }
    }
}
.annonces-section{
    display: flex;
    flex-direction: column;
    gap: 40px;

    .card-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    
    .card{
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        .card-image img {
            width: 100%;
            object-fit: cover;
        }
        .card-info{
            padding: var(--padding-card);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            span p{
                font-family: var(--font-body);
                font-weight: var(--font-weight-normal);
            }
            .price{
                font-family: var(--font-body);
                font-weight: var(--font-weight-normal);
                font-size: var(--font-size-h4);
                color: var(--color-secondary);
            }
        }
    }
}
}

/*ADMIN*/

.admin-card-section{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    .admin-card-grid{
        background-color: white;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);

        padding: var(--spacing-30) var(--spacing-20);
        .admin-card-div{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: var(--gap);
            margin-bottom: var(--gap-large);
            

            .admin-card-titre{
                display: flex;
                gap: var(--gap);
                align-items: center;
            }
        }
        .admin-card{
            display: flex;
            justify-content: space-between;
            padding: var(--spacing-10) 0;
            margin-bottom: var(--spacing-20);
            .admin-actions{
                display: flex;
                gap: var(--spacing-5);
            }
        }
    }
}