/* ==================== */
/* INDEX.CSS — Hover sur les projets */
/* ==================== */
.project-item {
position: relative;
overflow: hidden;
}
.project-item a {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
}
.project-item a img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.project-item a:hover img {
transform: scale(1.05);
}
.project-item a .photo-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 10;
}
.project-item a:hover .photo-overlay {
opacity: 1;
visibility: visible;
}
.view-button {
padding: 16px 42px;
border: 3px solid #ffffff;
border-radius: 999px;
color: #ffffff;
font-size: 20px;
font-weight: 500;
background: transparent;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.view-button:hover {
background: #ffffff;
color: #000000;
}

/* Cache les 4eme et 5eme projets sur ordi/tablette uniquement */
.project-item.desktop-hide-last-two {
display: none;
}

@media (max-width: 768px) {
.projects-grid {
display: flex !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 10px !important;
padding-bottom: 5px;
    }
.projects-grid::-webkit-scrollbar {
display: none;
    }
.projects-grid .project-item {
flex: 0 0 calc(50% - 5px);
scroll-snap-align: start;
    }
.project-item.hide-mobile {
display: none !important;
    }
.desktop-only {
display: none !important;
    }
.project-item.desktop-hide-last-two {
display: block;
    }
.project-item a .view-button {
font-size: 13px !important;
padding: 10px 20px !important;
border-width: 2px !important;
    }
}
@media (max-width: 480px) {
.projects-grid {
display: flex !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 8px !important;
padding-bottom: 5px;
    }
.projects-grid::-webkit-scrollbar {
display: none;
    }
.projects-grid .project-item {
flex: 0 0 calc(50% - 4px);
scroll-snap-align: start;
    }
.project-item.hide-mobile {
display: none !important;
    }
.project-item.desktop-hide-last-two {
display: block;
    }
.project-item a .view-button {
font-size: 12px !important;
padding: 8px 16px !important;
border-width: 2px !important;
    }
}