/**
 * Notes de bas de page — front et canevas de l'éditeur.
 *
 * Figma (Articles, nœud 4889:71553) : bulle Accent clair, marge interne 12px, rayon 6px,
 * Rethink Sans 16px / 1.4, lettrage 1 %, texte de 293px (bulle de 317px), sous l'appel et
 * alignée sur son bord droit. Mobile (CDC) : toaster en bas d'écran.
 */

/* Appel de note ------------------------------------------------------------------------------ */

.socialter-note__appel,
.editor-styles-wrapper .socialter-note[data-note] {
	display: inline-block;
	margin: 0 0.125rem;
	padding: 0 0.3125rem;
	border: 0;
	border-radius: 0.25rem;
	background: var(--wp--preset--color--primary-accent, #ddf1ff);
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
	font-family: var(--wp--preset--font-family--primary, "Rethink Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--note, 0.8125rem);
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	vertical-align: 0.15em;
}

.socialter-note__appel {
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.socialter-note__appel:hover,
.socialter-note:has(.socialter-note__bulle:popover-open) .socialter-note__appel {
	background: var(--wp--preset--color--primary-alt, #80caff);
}

.socialter-note__appel:focus-visible {
	outline: 0.125rem solid var(--wp--preset--color--primary, #0083e0);
	outline-offset: 0.125rem;
}

.socialter-note__lecteur {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	margin: -0.0625rem;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Bulle ---------------------------------------------------------------------------------------- */

/* Sans JavaScript : centrée à l'écran (position par défaut d'un popover). */
.socialter-note__bulle {
	box-sizing: border-box;
	width: min(19.8125rem, calc(100vw - 2rem));
	padding: 0.75rem;
	border: 0;
	border-radius: 0.375rem;
	background: var(--wp--preset--color--primary-accent, #ddf1ff);
	color: var(--wp--preset--color--primary-alt-accent, #00264d);
	font-family: var(--wp--preset--font-family--primary, "Rethink Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-align: left;
	text-indent: 0;
	text-transform: none;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Placée sous l'appel par notes.js (coordonnées de la page). */
.socialter-note__bulle.is-placee {
	position: absolute;
	inset: auto;
	margin: 0;
}

.socialter-note__texte {
	display: block;
}

.socialter-note__texte em,
.socialter-note__texte i {
	font-style: italic;
}

.socialter-note__texte strong,
.socialter-note__texte b {
	font-weight: 700;
}

.socialter-note__texte a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	overflow-wrap: anywhere;
}

.socialter-note__fermer {
	display: none;
}

/* Mobile : toaster en bas d'écran ------------------------------------------------------------ */

@media (max-width: 48.8125rem) {
	.socialter-note__bulle {
		position: fixed;
		inset: auto 0 0;
		width: 100%;
		max-width: none;
		max-height: 70vh;
		margin: 0;
		padding: 1.25rem 3.5rem calc(1.5rem + env(safe-area-inset-bottom, 0rem)) 1.125rem;
		overflow-y: auto;
		border-radius: 0.375rem 0.375rem 0 0;
		box-shadow: 0 -0.25rem 1.5rem rgb(0 38 77 / 0.15);
		transform: translateY(0);
		transition:
			transform 0.25s ease,
			overlay 0.25s allow-discrete,
			display 0.25s allow-discrete;
	}

	.socialter-note__bulle:not(:popover-open) {
		transform: translateY(100%);
	}

	@starting-style {
		.socialter-note__bulle:popover-open {
			transform: translateY(100%);
		}
	}

	.socialter-note__fermer {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		border-radius: 0.375rem;
		background: transparent;
		color: inherit;
		cursor: pointer;
	}

	.socialter-note__fermer:focus-visible {
		outline: 0.125rem solid var(--wp--preset--color--primary, #0083e0);
		outline-offset: -0.125rem;
	}

	.socialter-note__fermer svg {
		width: 1.5rem;
		height: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.socialter-note__appel,
	.socialter-note__bulle {
		transition: none;
	}
}

@media print {
	.socialter-note__appel {
		background: none;
		padding: 0;
		vertical-align: super;
	}
}