/* ==========================================================================
   LES CACHETS
   --------------------------------------------------------------------------
   Aucune couleur, aucune taille, aucun angle n'est écrit ici : tout arrive en
   variables posées par les réglages. Cette feuille ne décrit que la MÉCANIQUE
   — se placer dans un coin, tourner, se retourner en miroir sur un coin droit.
   C'est ce qui permet de tout changer depuis l'administration sans jamais y
   revenir.

   Les classes sont stables : elles ne changeront pas d'une version à l'autre.
   ========================================================================== */

.mrd-cac-zone {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

/* La zone ne prend la place de rien : c'est le conteneur qui doit être
   positionné. On le pose sans écraser un thème qui l'aurait déjà fait. */
.woocommerce ul.products li.product,
.mrd-env-piece,
.search #search-results-grid .post {
	position: relative;
}

.mrd-cac {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100% - 8px);

	padding: var(--mrd-cac-marge-v, 8px) var(--mrd-cac-marge-h, 14px);
	background: var(--mrd-cac-fond, #EFC79A);
	color: var(--mrd-cac-encre, #1C331C);
	border: var(--mrd-cac-trait, none);
	border-radius: var(--mrd-cac-arrondi, 2px);
	box-shadow: var(--mrd-cac-ombre, none);

	font-size: var(--mrd-cac-taille, 10.5px);
	font-weight: var(--mrd-cac-graisse, 700);
	letter-spacing: var(--mrd-cac-espacement, .08em);
	text-transform: var(--mrd-cac-casse, uppercase);
	line-height: 1.1;
	text-align: center;
	white-space: nowrap;

	pointer-events: none;
}

/* --- Les quatre coins ---------------------------------------------------- */

.mrd-cac--haut-gauche { top: var(--mrd-cac-y, -10px);  left: var(--mrd-cac-x, -12px); }
.mrd-cac--haut-droite { top: var(--mrd-cac-y, -10px);  right: var(--mrd-cac-x, -12px); }
.mrd-cac--bas-gauche  { bottom: var(--mrd-cac-y, -10px); left: var(--mrd-cac-x, -12px); }
.mrd-cac--bas-droite  { bottom: var(--mrd-cac-y, -10px); right: var(--mrd-cac-x, -12px); }

/* --- Le scotch ----------------------------------------------------------- */

/* L'angle est appliqué ici et NULLE PART AILLEURS. Deux `transform` posés en
   ligne s'écraseraient l'un l'autre : c'est pourquoi l'angle arrive en
   variable et non en propriété. */
.mrd-cac--scotch {
	transform: rotate(var(--mrd-cac-angle, -10deg));
}

/* Sur un coin droit, le même angle penche du mauvais côté : on le retourne. */
.mrd-cac--scotch.mrd-cac--haut-droite,
.mrd-cac--scotch.mrd-cac--bas-droite {
	transform: rotate(calc(var(--mrd-cac-angle, -10deg) * -1));
}

.mrd-cac--plat { transform: none; }

/* --- Le reflet ----------------------------------------------------------- */

.mrd-cac--reflet { overflow: hidden; }

.mrd-cac--reflet::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		112deg,
		rgba(255, 255, 255, .5) 0%,
		rgba(255, 255, 255, 0) 34%,
		rgba(0, 0, 0, .06) 74%,
		rgba(0, 0, 0, .1) 100%
	);
}

/* --- Sur un petit écran -------------------------------------------------- */

@media (max-width: 480px) {
	.mrd-cac {
		font-size: calc(var(--mrd-cac-taille, 10.5px) * .9);
		padding: calc(var(--mrd-cac-marge-v, 8px) * .8) calc(var(--mrd-cac-marge-h, 14px) * .8);
	}
}