/*
 * Images accessibles du plugin (millv2_image() et blocs Image) : pastille de crédit et ratio.
 * L'apparence est dans une couche : le CSS du thème l'emporte toujours. Variables :
 *   --millv2-credit-bg, --millv2-credit-color, --millv2-credit-size (25px), --millv2-credit-symbol (taille du ©, 16px),
 *   --millv2-credit-offset (10px)
 */

/* Structure : la pastille se place sur l'image, la figure sert de repère */
.millv2-figure,
.has-credits {
	position: relative;
}

/* Format imposé (option ratio) : l'image remplit la figure, recadrée */
.millv2-figure.has-ratio {
	overflow: hidden;
}

.millv2-figure.has-ratio > img,
.millv2-figure.has-ratio > a {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.millv2-figure.has-ratio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@layer millv2-blocks {
	/* Texte réservé aux lecteurs d'écran (le thème fournit aussi .sr-only) */
	.sr-only {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* <figure> sans les marges du navigateur (40 px à gauche et à droite) */
	.millv2-figure {
		margin: 0;
	}

	/* La légende qui ne porte que le libellé et le crédit n'a pas d'apparence propre */
	.millv2-credit-caption {
		margin: 0;
		padding: 0;
	}

	/* Pastille © : se déploie en nom du crédit au survol et au focus (le texte reste dans la page : il est lu par les lecteurs d'écran) */
	.credits {
		position: absolute;
		top: var(--millv2-credit-offset, 10px);
		right: var(--millv2-credit-offset, 10px);
		z-index: 5;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: var(--millv2-credit-size, 25px);
		max-width: var(--millv2-credit-size, 25px);
		padding: 0;
		overflow: hidden;
		border-radius: 999px;
		background: var(--millv2-credit-bg, #fff);
		color: var(--millv2-credit-color, #1d1d1b);
		font-size: 0;
		line-height: 1;
		white-space: nowrap;
		transition: max-width 0.2s ease;
	}

	.credits::before {
		content: '©';
		flex: 0 0 var(--millv2-credit-size, 25px);
		width: var(--millv2-credit-size, 25px);
		font-family: Arial, Helvetica, sans-serif;
		font-size: var(--millv2-credit-symbol, 16px);
		font-weight: 400;
		line-height: var(--millv2-credit-size, 25px);
		text-align: center;
	}

	.credits:hover,
	.credits:focus,
	.credits:focus-visible {
		max-width: min(90vw, 60ch);
		padding: 0 12px;
		font-size: 0.8125rem;
	}

	.credits:hover::before,
	.credits:focus::before,
	.credits:focus-visible::before {
		display: none;
	}

	.credits:focus-visible {
		outline: 2px solid var(--millv2-credit-color, #1d1d1b);
		outline-offset: 2px;
	}

	@media (prefers-reduced-motion: reduce) {
		.credits {
			transition: none;
		}
	}
}

/*
 * Lightbox natif de WordPress : le pictogramme « agrandir » est retiré, la photo elle-même est cliquable (curseur « loupe »).
 * Le bouton reste dans la page pour le clavier et les lecteurs d'écran : il n'apparaît qu'au focus (en bas à droite,
 * pour ne pas recouvrir le crédit, toujours en haut à droite).
 */
.wp-lightbox-container .lightbox-trigger {
	opacity: 0 !important;
	pointer-events: none !important;
}

.wp-lightbox-container .lightbox-trigger:focus-visible {
	top: auto !important;
	bottom: 16px !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}