/**
 * stella-sold-out.css
 *
 * Ruban "COMPLET" centré sur la diagonale du module (coin haut-gauche
 * <-> coin bas-droit), à TOUTES les tailles d'écran.
 *
 * Géométrie (angle + largeur) pilotée dynamiquement par stella-sold-out.js
 * via ResizeObserver : se recalcule tout seul au moindre changement de
 * dimensions du module (redimensionnement fenêtre, rotation mobile, etc.).
 * Pas de breakpoint CSS : le clamp() gère la lisibilité du texte à toute taille.
 */

.stella-sold-out {
	position: relative;
	overflow: hidden;
}

.stella-sold-out::before {
	content: "COMPLET — 2026/27";
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center center;
	width: var(--ribbon-width, 700px); /*900px*/
	transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 10deg));
	background: #FF4300; /* Spritz */
	color: #FFF3DE; /* Crème */
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700; /*700*/
	text-align: center;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	z-index: 10;
	pointer-events: none;

	/* Typo proportionnelle à la largeur réelle du ruban : rétrécit tout seul
	   sur un module étroit, sans avoir besoin de bloc @media séparé. */
	font-size: clamp(11px, calc(var(--ribbon-width, 900px) * 0.25), 40px); /*0.25 -> 0.025 et 26 -> 40px*/
	padding: clamp(5px, calc(var(--ribbon-width, 900px) * 0.14), 30px) 0; /*900px -> 200px ; 0.14 -> 0.014 et 30 -> 14px*/
	letter-spacing: clamp(0.5px, calc(var(--ribbon-width, 900px) * 0.004), 4px);
}