/* =========================================================
   RUBAN "VENDU" - STYLES POUR LES TABLEAUX VENDUS
   ========================================================= */

/* Conteneur portfolio pour le ruban */
.portfolio {
	position: relative;
	overflow: visible;
}

/* Le figure devient le référent */
.dt-sc-portfolio-container .portfolio figure {
	position: relative;
	overflow: visible; /* Permettre au ruban de dépasser */
}

/* =========================================================
   OPTION 1 : BADGE CIRCULAIRE ÉLÉGANT (RECOMMANDÉ)
   ========================================================= */
.dt-sc-portfolio-container .portfolio .sold-ribbon {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.1;
	text-align: center;
	z-index: 100;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 
	            0 2px 4px rgba(0, 0, 0, 0.3),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2);
	border: 3px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(2px);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dt-sc-portfolio-container .portfolio .sold-ribbon:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 
	            0 3px 6px rgba(0, 0, 0, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Supprimer les pseudo-éléments (non nécessaires pour le badge circulaire) */
.dt-sc-portfolio-container .portfolio .sold-ribbon::before,
.dt-sc-portfolio-container .portfolio .sold-ribbon::after {
	display: none;
}

/* =========================================================
   RESPONSIVE - BADGE CIRCULAIRE
   ========================================================= */

/* Desktop */
@media screen and (min-width: 1025px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		width: 75px;
		height: 75px;
		font-size: 25px;
		top: 20px;
		right: 20px;
	}
}

/* Tablette paysage */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		width: 70px;
		height: 70px;
		font-size: 25px;
		top: 18px;
		right: 18px;
	}
}

/* Tablette portrait */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		width: 120px;
		height: 120px;
		font-size: 40px;
		top: 15px;
		right: 15px;
	}
	
	/* Petits tableaux centrés - ajuster la position */
	.dt-sc-portfolio-container .portfolio.painting-small .sold-ribbon {
		top: 15px;
		right: calc(50% - 265px + 15px); /* Position relative au figure centré */
	}
}

/* Smartphone paysage */
@media screen and (min-width: 481px) and (max-width: 768px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		width: 240px;
		height: 240px;
		font-size: 50px;
		top: 12px;
		right: 12px;
		letter-spacing: 0.3px;
	}
}

/* Smartphone portrait */
@media screen and (max-width: 480px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		width: 120px;
		height: 120px;
		font-size: 40px;
		top: 10px;
		right: 10px;
		letter-spacing: 0.2px;
		border-width: 2px;
	}
}

/* =========================================================
   ALTERNATIVE : Si vous préférez un badge rectangulaire arrondi
   Décommentez cette section et commentez la section "BADGE CIRCULAIRE" ci-dessus
   ========================================================= */

/*
.dt-sc-portfolio-container .portfolio .sold-ribbon {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 8px 16px;
	border-radius: 8px;
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.2;
	z-index: 100;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 
	            0 2px 4px rgba(0, 0, 0, 0.3);
	border: 2px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(2px);
	white-space: nowrap;
}

.dt-sc-portfolio-container .portfolio .sold-ribbon::before,
.dt-sc-portfolio-container .portfolio .sold-ribbon::after {
	display: none;
}

@media screen and (min-width: 1025px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		padding: 10px 20px;
		font-size: 12px;
		top: 20px;
		right: 20px;
	}
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		padding: 8px 16px;
		font-size: 10px;
		top: 15px;
		right: 15px;
	}
	
	.dt-sc-portfolio-container .portfolio.painting-small .sold-ribbon {
		right: calc(50% - 265px + 15px);
	}
}

@media screen and (max-width: 768px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		padding: 6px 14px;
		font-size: 9px;
		top: 12px;
		right: 12px;
	}
}

@media screen and (max-width: 480px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		padding: 5px 12px;
		font-size: 8px;
		top: 10px;
		right: 10px;
	}
}
*/

/* =========================================================
   ALTERNATIVE : Badge avec coin plié (effet papier)
   Décommentez cette section et commentez la section "BADGE CIRCULAIRE" ci-dessus
   ========================================================= */

/*
.dt-sc-portfolio-container .portfolio .sold-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	padding: 12px 20px;
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.2;
	z-index: 100;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
}

.dt-sc-portfolio-container .portfolio .sold-ribbon::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 20px 0;
	border-color: transparent #a93226 transparent transparent;
	z-index: -1;
}

.dt-sc-portfolio-container .portfolio .sold-ribbon::after {
	display: none;
}

@media screen and (min-width: 1025px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		padding: 14px 24px;
		font-size: 12px;
	}
	
	.dt-sc-portfolio-container .portfolio .sold-ribbon::before {
		border-width: 0 24px 24px 0;
	}
}

@media screen and (max-width: 768px) {
	.dt-sc-portfolio-container .portfolio .sold-ribbon {
		padding: 10px 16px;
		font-size: 9px;
	}
	
	.dt-sc-portfolio-container .portfolio .sold-ribbon::before {
		border-width: 0 16px 16px 0;
	}
}
*/