/* Version: 31-05-2026-16-39 */
.thumbnail {
	overflow: visible;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	box-sizing: border-box;
	position: relative;
	top: 0;
	/* transition: all .1s ease-in; */
}

/* Mode TUILES - Bordure et arrondi sur .thumbnail-tile */
.thumbnail-tile {
	overflow: visible;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	box-sizing: border-box;
	position: relative;
	top: 0;
	transition: transform 0.2s, filter 0.18s;
}

.thumbnail article {
	padding: 20px;
}

.thumbnail p {
	flex:1;
}

.thumbnail .thumb,
.thumbnail-tile .thumb {
	position: relative;
	padding-bottom: 60%;
	background-size: cover;
	background-position: center center;
	transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
	filter: brightness(100%);
}

/* Mode TUILES - Arrondi du thumb pour suivre le parent si thumb-border est sur le parent */


.thumbnail .thumb::after,
.thumbnail-tile .thumb::after {
	position: absolute;
	bottom: 0;
	content: "¶";
	height: 100%;
	width: 100%;
	font-size: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: var(--thumbnail-hover-effect, 0.2s linear);
	color: var(--portfolios-text-main-color, var(--modules-white));
}

.thumbnail:hover .thumb::after,
.thumbnail-tile:hover .thumb::after {
	bottom: 0px;
	opacity: 1;
	box-shadow: var(--thumbnail-hover-effect, none);
}

.thumbnail .article-blog-infos,
.thumbnail-tile .article-blog-infos {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
	color: var(--portfolios-text-main-color, #222);
}

.thumbnail h4, .thumbnail div, .thumbnail-tile h4, .thumbnail-tile div {
	color: var(--portfolios-text-main-color, #222);
}

.thumbnail h5,
.thumbnail-tile h5 {
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 10px;
	color: var(--portfolios-text-main-color, #222);
}