/* Les douze styles natifs Gutenberg de Vox Libra pour le bloc Image. */
.wp-block-image.is-style-vox-libra-galet-1 img,
.wp-block-image.is-style-vox-libra-galet-2 img,
.wp-block-image.is-style-vox-libra-galet-3 img,
.wp-block-image.is-style-vox-libra-galet-4 img,
.wp-block-image.is-style-vox-libra-galet-5 img,
.wp-block-image.is-style-vox-libra-galet-6 img {
	display: block;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

.wp-block-image.is-style-vox-libra-galet-1 img { -webkit-mask-image: url('masks/pebble-1.svg'); mask-image: url('masks/pebble-1.svg'); }
.wp-block-image.is-style-vox-libra-galet-2 img { -webkit-mask-image: url('masks/pebble-2.svg'); mask-image: url('masks/pebble-2.svg'); }
.wp-block-image.is-style-vox-libra-galet-3 img { -webkit-mask-image: url('masks/pebble-3.svg'); mask-image: url('masks/pebble-3.svg'); }
.wp-block-image.is-style-vox-libra-galet-4 img { -webkit-mask-image: url('masks/pebble-4.svg'); mask-image: url('masks/pebble-4.svg'); }
.wp-block-image.is-style-vox-libra-galet-5 img { -webkit-mask-image: url('masks/pebble-5.svg'); mask-image: url('masks/pebble-5.svg'); }
.wp-block-image.is-style-vox-libra-galet-6 img { -webkit-mask-image: url('masks/pebble-6.svg'); mask-image: url('masks/pebble-6.svg'); }

.wp-block-image.is-style-vox-libra-galet-aquarelle-1 img,
.wp-block-image.is-style-vox-libra-galet-aquarelle-2 img,
.wp-block-image.is-style-vox-libra-galet-aquarelle-3 img,
.wp-block-image.is-style-vox-libra-galet-aquarelle-4 img,
.wp-block-image.is-style-vox-libra-galet-aquarelle-5 img,
.wp-block-image.is-style-vox-libra-galet-aquarelle-6 img {
	display: block;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

.wp-block-image.is-style-vox-libra-galet-aquarelle-1 img { -webkit-mask-image: url('masks/pebble-watercolor-1.svg'); mask-image: url('masks/pebble-watercolor-1.svg'); }
.wp-block-image.is-style-vox-libra-galet-aquarelle-2 img { -webkit-mask-image: url('masks/pebble-watercolor-2.svg'); mask-image: url('masks/pebble-watercolor-2.svg'); }
.wp-block-image.is-style-vox-libra-galet-aquarelle-3 img { -webkit-mask-image: url('masks/pebble-watercolor-3.svg'); mask-image: url('masks/pebble-watercolor-3.svg'); }
.wp-block-image.is-style-vox-libra-galet-aquarelle-4 img { -webkit-mask-image: url('masks/pebble-watercolor-4.svg'); mask-image: url('masks/pebble-watercolor-4.svg'); }
.wp-block-image.is-style-vox-libra-galet-aquarelle-5 img { -webkit-mask-image: url('masks/pebble-watercolor-5.svg'); mask-image: url('masks/pebble-watercolor-5.svg'); }
.wp-block-image.is-style-vox-libra-galet-aquarelle-6 img { -webkit-mask-image: url('masks/pebble-watercolor-6.svg'); mask-image: url('masks/pebble-watercolor-6.svg'); }

/* Annotation éditable, réservée aux images Galet aquarelle. */
.wp-block-image.vl-image-has-annotation {
	position: relative;
	isolation: isolate;
	--vl-annotation-distance: clamp(.4rem, 2.5vw, 1.45rem);
}

.vl-image-annotation {
	position: absolute;
	z-index: 2;
	display: grid;
	gap: .08em;
	width: max-content;
	max-width: min(13rem, 56%);
	margin: 0;
	padding: .05em .16em;
	font-family: "Segoe Print", "Bradley Hand", "Noteworthy", "Apple Chancery", cursive;
	font-size: clamp(1rem, 1.75vw, 1.45rem);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: .01em;
	text-align: center;
	text-wrap: balance;
	/* Le texte reste sélectionnable : ce n'est pas une image ni un pseudo-élément. */
	pointer-events: auto;
}

.vl-image-annotation__text { display: block; }
.vl-image-annotation__stroke { display: block; width: 100%; height: .45em; margin-top: .04em; }
.vl-image-annotation__stroke svg { display: block; width: 100%; height: 100%; overflow: visible; }

.vl-image-annotation-color-violet .vl-image-annotation { color: #76518a; }
.vl-image-annotation-color-orange .vl-image-annotation { color: #ff521b; }
.vl-image-annotation-color-black .vl-image-annotation { color: #111; }
.vl-image-annotation-color-green .vl-image-annotation { color: #7bdcb5; }
.vl-image-annotation__stroke-violet { color: #76518a; }
.vl-image-annotation__stroke-orange { color: #ff521b; }
.vl-image-annotation__stroke-green { color: #7bdcb5; }

.vl-image-annotation-tilt-left .vl-image-annotation { transform: rotate(-3deg); }
.vl-image-annotation-tilt-right .vl-image-annotation { transform: rotate(3deg); }
.vl-image-annotation-tilt-none .vl-image-annotation { transform: none; }

.vl-image-annotation-position-right .vl-image-annotation { top: 50%; left: calc(100% + var(--vl-annotation-distance)); transform-origin: left center; }
.vl-image-annotation-position-left .vl-image-annotation { top: 50%; right: calc(100% + var(--vl-annotation-distance)); transform-origin: right center; }
.vl-image-annotation-position-top-right .vl-image-annotation { bottom: calc(100% + var(--vl-annotation-distance)); left: 61%; transform-origin: left bottom; }
.vl-image-annotation-position-top-left .vl-image-annotation { right: 61%; bottom: calc(100% + var(--vl-annotation-distance)); transform-origin: right bottom; }
.vl-image-annotation-position-bottom-right .vl-image-annotation { top: calc(100% + var(--vl-annotation-distance)); left: 60%; transform-origin: left top; }
.vl-image-annotation-position-bottom-left .vl-image-annotation { top: calc(100% + var(--vl-annotation-distance)); right: 60%; transform-origin: right top; }
.vl-image-annotation-position-right.vl-image-annotation-tilt-left .vl-image-annotation,
.vl-image-annotation-position-left.vl-image-annotation-tilt-left .vl-image-annotation { transform: translateY(-50%) rotate(-3deg); }
.vl-image-annotation-position-right.vl-image-annotation-tilt-right .vl-image-annotation,
.vl-image-annotation-position-left.vl-image-annotation-tilt-right .vl-image-annotation { transform: translateY(-50%) rotate(3deg); }
.vl-image-annotation-position-right.vl-image-annotation-tilt-none .vl-image-annotation,
.vl-image-annotation-position-left.vl-image-annotation-tilt-none .vl-image-annotation { transform: translateY(-50%); }

@media (max-width: 781px) {
	.wp-block-image.vl-image-has-annotation {
		--vl-annotation-distance: .45rem;
	}
	.vl-image-annotation {
		font-size: clamp(.95rem, 2.6vw, 1.2rem);
		max-width: min(10rem, 48%);
	}
}

@media (max-width: 600px) {
	.wp-block-image.vl-image-has-annotation .vl-image-annotation {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		display: inline-grid;
		max-width: calc(100% - .5rem);
		margin: .45rem .25rem 0;
		font-size: 1rem;
	}
	.wp-block-image.vl-image-has-annotation .vl-image-annotation__text { text-align: left; }
	.wp-block-image.vl-image-has-annotation .vl-image-annotation__stroke { width: 88%; }
	.wp-block-image.vl-image-has-annotation.vl-image-annotation-tilt-left .vl-image-annotation { transform: rotate(-2deg); }
	.wp-block-image.vl-image-has-annotation.vl-image-annotation-tilt-right .vl-image-annotation { transform: rotate(2deg); }
	.wp-block-image.vl-image-has-annotation.vl-image-annotation-tilt-none .vl-image-annotation { transform: none; }
}