/**
 * Bannière d'avis bciti+.
 *
 * Les couleurs proviennent de variables injectées inline depuis les réglages,
 * ce qui permet de personnaliser sans surcharger la feuille de style.
 *
 * Aucune couleur n'est écrite en dur dans les contrôles : tout dérive de
 * `currentColor`, donc d'une couleur de texte déjà choisie pour être lisible
 * sur le fond. Un fond clair comme un fond sombre fonctionnent sans réglage
 * supplémentaire.
 */

.bciti-nb {
	--bciti-nb-bg: #0b5fa5;
	--bciti-nb-text: #ffffff;
	--bciti-nb-accent: #ffd166;
	--bciti-nb-urgent-bg: #b3261e;
	--bciti-nb-urgent-text: #ffffff;
	--bciti-nb-radius: 0px;
	--bciti-nb-max-width: none;

	/* Durées alignées sur banner.js. */
	--bciti-nb-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--bciti-nb-accordion-ms: 280ms;

	position: relative;
	z-index: 9;
	box-sizing: border-box;
	width: 100%;
	font-family: inherit;
	line-height: 1.45;
}

.bciti-nb *,
.bciti-nb *::before,
.bciti-nb *::after {
	box-sizing: border-box;
}

.bciti-nb[hidden],
.bciti-nb__item[hidden],
.bciti-nb__detail[hidden] {
	display: none;
}

/* --- Bloc d'un avis --- */

.bciti-nb__item {
	background-color: var(--bciti-nb-bg);
	color: var(--bciti-nb-text);
	border-radius: var(--bciti-nb-radius);
}

.bciti-nb__item.is-urgent {
	background-color: var(--bciti-nb-urgent-bg);
	color: var(--bciti-nb-urgent-text);
}

/* Conteneur centré : il porte la largeur maximale et les gouttières, alors
   que le fond coloré reste pleine largeur. */
.bciti-nb__inner {
	max-width: var(--bciti-nb-max-width);
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* --- Ligne repliée --- */

.bciti-nb__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0;
}

.bciti-nb__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

/* Toute la zone de texte est cliquable : c'est le seul moyen de déplier sur
   mobile, où le bouton de bascule est masqué. */
.bciti-nb__lead {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.75rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font: inherit;
	color: inherit;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Le titre est un span dans un button : aucune règle de titre ni de
   paragraphe du thème ne peut l'atteindre. */
.bciti-nb .bciti-nb__title {
	display: block;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: normal;
	text-overflow: ellipsis;
	text-transform: none;
	text-shadow: none;
	white-space: nowrap;
	color: inherit;
}

.bciti-nb .bciti-nb__summary {
	display: block;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 400;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
	opacity: 0.7;
}

/* Vue longue : le résumé disparaît, la description le remplace. */
.bciti-nb__item.is-expanded .bciti-nb__summary {
	display: none;
}

/* Sans panneau à déplier, le bloc de texte est un div et non un bouton :
   il ne doit pas se présenter comme cliquable. */
div.bciti-nb__lead {
	cursor: default;
}

/* Affichée seulement si le réglage « Nom de la catégorie » est actif. Elle
   précède le titre sur la même ligne, et passe à la ligne si la place manque. */
.bciti-nb .bciti-nb__category {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.35;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bciti-nb-accent);
}

/* --- Contrôles --- */

.bciti-nb__toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.35;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.bciti-nb__toggle:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.bciti-nb__chevron {
	display: inline-flex;
	transition: transform 200ms var(--bciti-nb-ease);
}

.bciti-nb__toggle[aria-expanded="true"] .bciti-nb__chevron {
	transform: rotate(180deg);
}

/* Filet de séparation : currentColor dilué, donc lisible sur tout fond. La
   première déclaration sert de repli aux navigateurs sans color-mix. */
.bciti-nb__dots {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.125rem;
	padding-left: 0.75rem;
	border-left: 1px solid currentColor;
	border-left-color: color-mix(in srgb, currentColor 20%, transparent);
}

.bciti-nb__dot {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 1rem;
	height: 1.25rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.bciti-nb__dot::before {
	content: "";
	display: block;
	width: 0.25rem;
	height: 0.25rem;
	background: currentColor;
	background: color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 50%;
	transition: width 150ms var(--bciti-nb-ease), height 150ms var(--bciti-nb-ease), background-color 150ms var(--bciti-nb-ease);
}

.bciti-nb__dot:hover::before {
	background: color-mix(in srgb, currentColor 60%, transparent);
}

.bciti-nb__dot[aria-current="true"]::before {
	width: 0.375rem;
	height: 0.375rem;
	background: currentColor;
}

.bciti-nb__dismiss {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	font-family: inherit;
	font-size: 1.35rem;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.bciti-nb__dismiss:hover {
	background: color-mix(in srgb, currentColor 18%, transparent);
}

/* Conservés pour les templates surchargés qui affichent encore des flèches. */
.bciti-nb__arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	font-family: inherit;
	font-size: 1.25rem;
	line-height: 1;
	color: inherit;
	background: color-mix(in srgb, currentColor 14%, transparent);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.bciti-nb__arrow:hover {
	background: color-mix(in srgb, currentColor 28%, transparent);
}

.bciti-nb__counter {
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0.9;
}

/* Focus visible garanti quel que soit le thème. */
.bciti-nb button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- Panneau déplié --- */

/* max-height est piloté en JS, à partir de la hauteur réelle du contenu : une
   valeur fixe tronquerait une description longue. */
.bciti-nb__detail {
	overflow: hidden;
	font-size: 0.875rem;
	line-height: 1.625;
	border-top: 1px solid currentColor;
	border-top-color: color-mix(in srgb, currentColor 20%, transparent);
	transition: max-height var(--bciti-nb-accordion-ms) var(--bciti-nb-ease);
}

/* Le rembourrage est porté par un enfant : animer max-height sur un élément
   qui a lui-même du padding laisserait une bande visible à l'état replié. */
.bciti-nb__detail-inner {
	padding: 0.75rem 0 1rem;
	opacity: 0.8;
}

.bciti-nb__detail p {
	margin: 0 0 0.5em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* La portée de l'avis ferme le panneau, en retrait : c'est une note, pas du
   contenu. */
.bciti-nb__period {
	margin: 0.5rem 0 0;
	font-size: inherit;
	opacity: 0.75;
}

/* Sous-titres issus des h1…h6 de la description, convertis côté serveur.
   Même corps que le texte, simplement mis en gras — comme dans une infolettre
   rendue en web. */
.bciti-nb .bciti-nb__subhead,
.bciti-nb .bciti-nb__detail h1,
.bciti-nb .bciti-nb__detail h2,
.bciti-nb .bciti-nb__detail h3,
.bciti-nb .bciti-nb__detail h4,
.bciti-nb .bciti-nb__detail h5,
.bciti-nb .bciti-nb__detail h6 {
	margin: 0.9em 0 0.25em;
	padding: 0;
	font-family: inherit;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	color: inherit;
}

.bciti-nb__detail ul,
.bciti-nb__detail ol {
	margin: 0 0 0.5em;
	padding-left: 1.4em;
}

.bciti-nb__detail li {
	margin: 0 0 0.15em;
	font-size: inherit;
}

.bciti-nb__detail img {
	max-width: 100%;
	height: auto;
}

.bciti-nb__detail-inner > :first-child {
	margin-top: 0;
}

.bciti-nb__detail-inner > :last-child {
	margin-bottom: 0;
}

.bciti-nb__detail a {
	color: inherit;
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.bciti-nb__detail,
	.bciti-nb__chevron,
	.bciti-nb__dot::before {
		transition: none;
	}
}

/* --- Responsive --- */

@media (min-width: 1024px) {
	.bciti-nb__inner {
		padding: 0 2.5rem;
	}
}

/* Sous ce seuil, le résumé et le bouton de bascule disparaissent : la ligne
   ne tient plus qu'un titre, et c'est lui qui devient la zone de dépliage. */
@media (max-width: 639px) {
	.bciti-nb .bciti-nb__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		white-space: normal;
	}

	.bciti-nb .bciti-nb__summary,
	.bciti-nb__toggle {
		display: none;
	}
}

/* Au-delà, le titre n'est plus une commande à lui seul : le bouton de
   bascule est visible et porte l'action. */
@media (min-width: 640px) {
	.bciti-nb__lead {
		cursor: default;
	}
}

/* --- Impression --- */

@media print {
	.bciti-nb__dots,
	.bciti-nb__arrow,
	.bciti-nb__dismiss,
	.bciti-nb__toggle {
		display: none;
	}

	.bciti-nb__item {
		color: #000;
		background: none;
		border: 1px solid #000;
	}

	.bciti-nb__item[hidden],
	.bciti-nb__detail[hidden] {
		display: block;
	}
}