/* Crafty Pastilles — styles partagés boutique + aperçu admin */

.cpast[hidden] {
	display: none !important;
}

.cpast {
	position: absolute;
	z-index: var(--cpast-z, 9);
	pointer-events: none;
	font-size: var(--cpast-fs, 14px);
	line-height: 1.1;
	text-align: center;
	box-sizing: border-box;
}

.cpast *,
.cpast *::before,
.cpast *::after {
	box-sizing: border-box;
}

.cpast--ctx-loop {
	font-size: calc(var(--cpast-fs, 14px) * var(--cpast-ls, .75));
}

@media (max-width: 768px) {
	.cpast--ctx-single {
		font-size: calc(var(--cpast-fs, 14px) * var(--cpast-ms, .8));
	}
	.cpast--ctx-loop {
		font-size: calc(var(--cpast-fs, 14px) * var(--cpast-ls, .75) * var(--cpast-ms, .8));
	}
}

/* Position */
.cpast--v-t { top: var(--cpast-y, 12px); }
.cpast--v-b { bottom: var(--cpast-y, 12px); }
.cpast--h-l { left: var(--cpast-x, 12px); }
.cpast--h-r { right: var(--cpast-x, 12px); }
.cpast--h-c { left: 50%; transform: translateX(-50%); }

/* Forme de base */
.cpast__b {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .2em;
	background: var(--cpast-bg, #f4a7b9);
	color: var(--cpast-fg, #fff);
	font-weight: 700;
	box-shadow: 0 .25em .7em rgba(0, 0, 0, .12);
}

.cpast__i {
	display: block;
	line-height: 0;
}

.cpast__i svg {
	display: block;
	width: 1.45em;
	height: 1.45em;
	fill: currentColor;
}

.cpast__txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .15em;
}

.cpast__t {
	text-transform: uppercase;
	letter-spacing: .05em;
}

.cpast__s {
	font-size: .78em;
	font-weight: 500;
	letter-spacing: .01em;
}

/* Formes rondes : le JS fixe le diamètre (cercle circonscrit au texte).
   Sans JS, repli : le cercle suit la largeur du contenu. */
.cpast--m-rond .cpast__b,
.cpast--m-tampon .cpast__b,
.cpast--m-etoile .cpast__b {
	width: max-content;
	height: auto;
	aspect-ratio: 1 / 1;
}

.cpast--m-rond .cpast__b.is-fitted,
.cpast--m-tampon .cpast__b.is-fitted,
.cpast--m-etoile .cpast__b.is-fitted {
	min-width: 0;
	padding: 0;
	aspect-ratio: auto;
}

.cpast .cpast__b.is-measuring {
	width: max-content !important;
	height: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	aspect-ratio: auto !important;
}

.cpast--m-rond .cpast__txt,
.cpast--m-tampon .cpast__txt,
.cpast--m-etoile .cpast__txt {
	max-width: 8em;
	text-align: center;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/* Rond */
.cpast--m-rond .cpast__b {
	min-width: 6.4em;
	padding: var(--cpast-pad, 8px);
	border-radius: 50%;
	transform: rotate(-8deg);
}

/* Étiquette arrondie */
.cpast--m-etiquette .cpast__b {
	flex-direction: row;
	gap: .5em;
	padding: calc(var(--cpast-pad, 8px) * .6) calc(var(--cpast-pad, 8px) * 1.4);
	border-radius: 999px;
	white-space: nowrap;
}

.cpast--m-etiquette .cpast__txt {
	align-items: flex-start;
}

/* Bulle */
.cpast--m-bulle .cpast__b {
	flex-direction: row;
	gap: .5em;
	padding: calc(var(--cpast-pad, 8px) * .7) calc(var(--cpast-pad, 8px) * 1.4);
	border-radius: 1em;
	white-space: nowrap;
}

.cpast--m-bulle .cpast__txt {
	align-items: flex-start;
}

.cpast--m-bulle .cpast__b::after {
	content: "";
	position: absolute;
	left: 1.3em;
	bottom: -.55em;
	border-left: .55em solid transparent;
	border-right: .55em solid transparent;
	border-top: .6em solid var(--cpast-bg, #f4a7b9);
}

.cpast--m-bulle.cpast--h-r .cpast__b::after { left: auto; right: 1.3em; }
.cpast--m-bulle.cpast--h-c .cpast__b::after { left: 50%; margin-left: -.55em; }

.cpast--m-bulle.cpast--v-b .cpast__b::after {
	bottom: auto;
	top: -.55em;
	border-top: 0;
	border-bottom: .6em solid var(--cpast-bg, #f4a7b9);
}

/* Étoile / macaron */
.cpast--m-etoile .cpast__b {
	min-width: 7em;
	padding: calc(var(--cpast-pad, 8px) * 1.6);
	transform: rotate(-10deg);
	box-shadow: none;
	clip-path: polygon(50% 0%, 59.1% 10%, 71.7% 5%, 75.6% 17.9%, 89.1% 18.8%, 86.9% 32.2%, 98.7% 38.9%, 91% 50%, 98.7% 61.1%, 86.9% 67.8%, 89.1% 81.2%, 75.6% 82.1%, 71.7% 95%, 59.1% 90%, 50% 100%, 40.9% 90%, 28.3% 95%, 24.4% 82.1%, 10.9% 81.2%, 13.1% 67.8%, 1.3% 61.1%, 9% 50%, 1.3% 38.9%, 13.1% 32.2%, 10.9% 18.8%, 24.4% 17.9%, 28.3% 5%, 40.9% 10%);
}

.cpast--m-etoile .cpast__a {
	filter: drop-shadow(0 .2em .4em rgba(0, 0, 0, .14));
}

/* Tampon */
.cpast--m-tampon .cpast__b {
	min-width: 6.6em;
	padding: calc(var(--cpast-pad, 8px) * 1.3);
	border-radius: 50%;
	outline: .12em dashed var(--cpast-fg, #fff);
	outline-offset: -.45em;
	transform: rotate(-12deg);
}

.cpast--m-tampon .cpast__t {
	letter-spacing: .1em;
}

/* Bandeau pleine largeur */
.cpast--m-bandeau {
	left: 0;
	right: 0;
	transform: none;
}

.cpast--m-bandeau .cpast__b {
	flex-direction: row;
	gap: .6em;
	width: 100%;
	padding: calc(var(--cpast-pad, 8px) * .7) calc(var(--cpast-pad, 8px) * 1.4);
	box-shadow: none;
}

.cpast--m-bandeau .cpast__txt {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: .2em .6em;
	align-items: baseline;
}

/* Ruban d'angle (coins uniquement) */
.cpast--m-ruban {
	width: 11em;
	height: 11em;
	overflow: hidden;
}

.cpast--m-ruban .cpast__a {
	position: absolute;
	inset: 0;
}

.cpast--m-ruban .cpast__s {
	display: none; /* le ruban n'affiche que le texte principal */
}

.cpast--m-ruban .cpast__b {
	position: absolute;
	top: 2.9em;
	left: -3.5em;
	width: 16em;
	white-space: nowrap;
	flex-direction: row;
	gap: .35em;
	padding: calc(var(--cpast-pad, 8px) * .5) 0;
	transform: rotate(-45deg);
}

.cpast--m-ruban .cpast__txt {
	font-size: .9em;
	flex-direction: row;
	gap: .35em;
	align-items: baseline;
}

.cpast--m-ruban .cpast__i svg {
	width: 1.15em;
	height: 1.15em;
}

.cpast--m-ruban.cpast--h-r .cpast__b {
	left: auto;
	right: -3.5em;
	transform: rotate(45deg);
}

.cpast--m-ruban.cpast--v-b .cpast__b {
	top: auto;
	bottom: 2.9em;
	transform: rotate(45deg);
}

.cpast--m-ruban.cpast--v-b.cpast--h-r .cpast__b {
	transform: rotate(-45deg);
}

/* Taille fixe des formes rondes (sinon le JS l'ajuste au texte) */
.cpast--m-rond .cpast__b[data-fixed],
.cpast--m-tampon .cpast__b[data-fixed],
.cpast--m-etoile .cpast__b[data-fixed] {
	padding: 0;
}

/* Icône seule (vignettes) — survolable pour afficher le texte (title) */
.cpast--m-icone {
	pointer-events: auto;
}

.cpast--m-icone .cpast__b {
	width: 2.8em;
	height: 2.8em;
	padding: 0;
	border-radius: 50%;
}

.cpast--m-icone .cpast__i svg {
	width: 1.5em;
	height: 1.5em;
}

/* Animations */
.cpast--a-pulse .cpast__a {
	animation: cpast-pulse 2.4s ease-in-out infinite;
}

.cpast--a-balance .cpast__a {
	animation: cpast-balance 3s ease-in-out infinite;
	transform-origin: 50% 0;
}

@keyframes cpast-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.07); }
}

@keyframes cpast-balance {
	0%, 100% { transform: rotate(-4deg); }
	50% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cpast__a {
		animation: none !important;
	}
}