/*
 * Bandeaux d'information (MillV2\Announcements\Banners). Structure hors couche ; apparence dans @layer millv2-blocks (le CSS du thème l'emporte).
 *
 * Variables : --millv2-banner-max (largeur du contenu, 1200px), --millv2-banner-inline (marge latérale : remplace le calcul par
 *   --millv2-banner-max, pour s'aligner sur la grille du thème), --millv2-banner-bg / --millv2-banner-color (toutes les couleurs),
 *   --millv2-banner-info-bg|color, --millv2-banner-warning-bg|color, --millv2-banner-alert-bg|color (par statut),
 *   --millv2-banner-link (lien), --millv2-banner-dots (points du slider), --millv2-banner-icon-bg (pastille de l'icône).
 * Classes : .millv2-banners > .millv2-banner.is-info|is-warning|is-alert > .millv2-banner__icon, __body (__title, __text, __link : le lien suit le texte).
 */
.millv2-banners[hidden],
.millv2-banners__reopen[hidden] {
	display: none !important;
}

.millv2-banners {
	/* Marge latérale qui centre le contenu dans --millv2-banner-max ; la croix, les points et le texte s'y alignent. Un thème à grille fluide
	   la remplace par la sienne avec --millv2-banner-inline (ex. la marge de son en-tête). */
	--_inline: var(--millv2-banner-inline, max(1rem, calc((100% - var(--millv2-banner-max, 1200px)) / 2)));

	position: relative;
	width: 100%;
}

.millv2-banner {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 1rem;
	/* à droite : la place de la croix (2.75rem) */
	padding: 0.75rem calc(var(--_inline) + 3rem) 0.75rem var(--_inline);
	box-sizing: border-box;
}

.millv2-banner__body {
	flex: 1 1 0;
	min-width: 0;
}

.millv2-banner__title {
	display: block;
}

.millv2-banner__icon {
	flex: 0 0 auto;
}

/* Croix : au-dessus de la zone, à droite */
.millv2-banners__close {
	position: absolute;
	top: 0.5rem;
	right: calc(var(--_inline) - 0.5rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

/* Plusieurs informations : une à la fois (fondu) ; les points sont dans la barre, à gauche de la croix */
.millv2-banners__slider.is-layout-slider {
	margin: 0;
	--millv2-slider-accent: var(--millv2-banner-dots, currentColor);
	/* largeur des points : 24px chacun + 4px d'écart */
	--_dots: calc(var(--n, 2) * 28px);

	.millv2-slider__slide .millv2-banner {
		padding-right: calc(var(--_inline) + 3rem + var(--_dots));
	}

	.millv2-slider__dots {
		position: absolute;
		top: 50%;
		right: calc(var(--_inline) + 2.5rem);
		left: auto;
		transform: translateY(-50%);
		margin: 0;
		flex-wrap: nowrap;
	}
}

/* Petit écran : les points passent sous le texte, la place qu'ils prenaient est rendue */
@media (max-width: 767px) {
	.millv2-banners__slider.is-layout-slider {
		.millv2-slider__slide .millv2-banner {
			padding-right: calc(var(--_inline) + 3rem);
			padding-bottom: 2rem;
		}

		.millv2-slider__dots {
			top: auto;
			right: 0;
			bottom: 0.25rem;
			left: 0;
			transform: none;
			justify-content: center;
		}
	}
}

/*
 * Bouton « Revoir » (absent par défaut : announcements.reopen dans project.php) : une pastille, dont le libellé se déploie au survol et au focus.
 * Le plugin ne le positionne pas : il est écrit juste après les bandeaux, dans le flux ; le thème le place (fixed, dans le header…).
 */
.millv2-banners__reopen {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem;
	border: 2px solid currentcolor;
	border-radius: 2rem;
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;

	&::before {
		content: 'i';
		display: grid;
		place-items: center;
		width: 1.75rem;
		height: 1.75rem;
		font: italic 700 1.125rem/1 Georgia, serif;
	}
}

.millv2-banners__reopen-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.millv2-banners__reopen:hover .millv2-banners__reopen-label,
.millv2-banners__reopen:focus-visible .millv2-banners__reopen-label {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0.5rem 0 0;
	overflow: visible;
	clip-path: none;
}

@layer millv2-blocks {
	.millv2-banner {
		--_bg: var(--millv2-banner-info-bg, var(--millv2-banner-bg, #e6f0fb));
		--_color: var(--millv2-banner-info-color, var(--millv2-banner-color, #0d2b4a));

		background-color: var(--_bg);
		color: var(--_color);
		font-size: 0.9375rem;
		line-height: 1.35;

		&.is-warning {
			--_bg: var(--millv2-banner-warning-bg, var(--millv2-banner-bg, #fff3cd));
			--_color: var(--millv2-banner-warning-color, var(--millv2-banner-color, #3f2f00));
		}

		&.is-alert {
			--_bg: var(--millv2-banner-alert-bg, var(--millv2-banner-bg, #fbe3e3));
			--_color: var(--millv2-banner-alert-color, var(--millv2-banner-color, #5a1010));
		}
	}

	/*
	 * La croix et les points sont posés sur un bandeau : ils prennent la couleur de son texte, pas celle du site (qui peut être claire sur un
	 * site sombre). La croix suit le premier bandeau de la zone (une alerte, sinon l'information affichée), les points l'information affichée.
	 */
	.millv2-banners,
	.millv2-banners__slider {
		color: var(--millv2-banner-info-color, var(--millv2-banner-color, #0d2b4a));
	}

	.millv2-banners:has(> .millv2-banner.is-warning:first-child, > section:first-child > .millv2-banner.is-warning, > section:first-child .millv2-slider__slide.is-active > .millv2-banner.is-warning),
	.millv2-banners__slider:has(.millv2-slider__slide.is-active > .millv2-banner.is-warning) {
		color: var(--millv2-banner-warning-color, var(--millv2-banner-color, #3f2f00));
	}

	.millv2-banners:has(> .millv2-banner.is-alert:first-child) {
		color: var(--millv2-banner-alert-color, var(--millv2-banner-color, #5a1010));
	}

	.millv2-banner__title {
		font-weight: 700;
	}

	.millv2-banner__link {
		margin-left: 0.25em;
		color: var(--millv2-banner-link, inherit);
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.millv2-banner__link:hover {
		text-decoration-thickness: 3px;
	}

	.millv2-banner__icon {
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		background-color: var(--millv2-banner-icon-bg, rgb(0 0 0 / 8%));
		font-size: 1.25rem;
	}

	.millv2-banners__close:focus-visible,
	.millv2-banners__reopen:focus-visible,
	.millv2-banner__link:focus-visible {
		outline: 3px solid currentcolor;
		outline-offset: 2px;
	}

	.millv2-banners__reopen {
		background-color: var(--millv2-banner-info-bg, var(--millv2-banner-bg, #e6f0fb));
		color: var(--millv2-banner-info-color, var(--millv2-banner-color, #0d2b4a));
		box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
	}
}