/*
 * Habillage MB Jardin : décors dessinés propres au client (chargé après compositions.css).
 *
 * Les dessins sont des masques remplis avec une couleur de la palette : ils suivent l'habillage.
 */

/* Feuille au trait dans la carte « Depuis ». */
.kit-presentation__carte::before {
	content: "";
	position: absolute;
	top: clamp(28px, 3.5vw, 44px);
	right: clamp(28px, 3.5vw, 44px);
	z-index: -1;
	width: clamp(110px, 12vw, 150px);
	aspect-ratio: 3 / 2;
	background-color: var(--wp--preset--color--principale);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 100' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M6 92C22 34 82 4 146 8 128 66 70 98 6 92Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 100' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M6 92C22 34 82 4 146 8 128 66 70 98 6 92Z'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

/* Plante au trait dans la carte des pages service, tant qu'aucune photo n'est fournie. */
.kit-entete-service__visuel:not(:has(img[src]))::before {
	content: "";
	position: absolute;
	top: 14%;
	left: 50%;
	z-index: -1;
	width: min(60%, 320px);
	aspect-ratio: 400 / 260;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M200 250V85M200 175C100 175 65 110 75 50 140 45 195 100 200 175ZM200 135C270 135 330 80 325 20 255 15 205 65 200 135Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M200 250V85M200 175C100 175 65 110 75 50 140 45 195 100 200 175ZM200 135C270 135 330 80 325 20 255 15 205 65 200 135Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateX(-50%);
	pointer-events: none;
}