/*
Theme Name: MD Thème
Template: hello-elementor
Author: Mickaël Doucet
Version: 1.0
Description: Thème enfant du theme Hello 
Text Domain: hello-elementor-child
*/


body {
    margin: 0 !important;
}
.page h1 {
    margin-top: 0;
}
#breadcrumbs a {
    font-size: 16px;
}
a:hover {
    color: #FF6B6B;
}


/* 
START SECTION PORTFOLIO 
*/
.portfolio-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px;
    width: calc(50% - 20px);
    box-sizing: border-box;
}

.portfolio-item .portfolio-image {
    flex-shrink: 0;
    margin-bottom: 10px;
}

.portfolio-item img {
    max-width: 100%;
    height: auto;
    display: block;
}

.portfolio-item.image-align-left .portfolio-content {
    align-self: flex-start;
}

.portfolio-item.image-align-center .portfolio-content {
    align-self: center;
}

.portfolio-item.image-align-right .portfolio-content {
    align-self: flex-end;
}

.portfolio-item .portfolio-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.portfolio-item h3, .portfolio-item p {
    margin: 0;
    padding: 5px 0;
}
/* Container principal */
.portfolio-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.portfolio-image {
	position: relative;
	display: flex; /* contexte sur le parent */
	flex-direction: column; /* direction d'affichage verticale */
	justify-content: center;
	width: 100%;
	overflow: hidden;
}
/* Image à la une */
.portfolio-image .featured-image {
    width: 100%;
    height: auto;
    transition: opacity 0.5s ease; /* Transition douce lors du survol */
    display: block;
}
/* Image à la une 2 (par défaut cachée) */
.portfolio-image .second-featured-image {
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* Afficher l'image à la Une 2 au survol */
.portfolio-image-container:hover .portfolio-image.has-second-featured-image .featured-image {
    opacity: 0; /* Masquer l'image à la une */
}
.portfolio-image-container:hover .portfolio-image.has-second-featured-image .second-featured-image {
    opacity: 1; /* Afficher l'image à la une 2 */
}
.portfolio-image-container:hover .portfolio-image.has-second-featured-image .second-featured-image {
    opacity: 1;
}



@media (max-width: 768px) {
    .portfolio-container {
        flex-direction: column;
    }

    .portfolio-item {
        width: 100%;
    }
}
/* 
END SECTION PORTFOLIO 
*/