/* ==========================================================================
   GB Announcer — bandeau d'informations défilantes
   --------------------------------------------------------------------------
   HAUTEUR : le bandeau prend la hauteur du message le plus haut. Les messages
   sont empilés dans UNE SEULE cellule de grille (grid-area: 1/1) : ils se
   superposent tout en participant au calcul de hauteur de la ligne.

   CALAGE : le header du thème (.mcm-header-bar) est en position:fixed;top:0 et
   #wrap_all porte un padding-top égal à --mcm-header-h (thème css/header-new.css).
   Le bandeau se glisse AU-DESSUS : il faut décaler le header de --gb-ann-h et
   ajouter cette hauteur au padding de #wrap_all. Comme le bandeau est lui aussi
   en position:fixed, sa hauteur ne peut pas alimenter un calc() : announcer.js
   la mesure et la publie dans --gb-ann-h. La valeur ci-dessous n'est que le
   point de départ (cas courant : une ligne), pour éviter tout saut au premier
   rendu. La classe body `gb-ann-on` n'est posée que si le bandeau s'affiche.
   ========================================================================== */

:root {
	--gb-ann-h: 40px;     /* réécrit par announcer.js avec la hauteur réelle */
	--gb-ann-min-h: 40px; /* hauteur plancher du bandeau */
}

@media (max-width: 480px) {
	:root {
		--gb-ann-h: 34px;
		--gb-ann-min-h: 34px;
	}
}

/* ------- Le bandeau ------- */

.gb-ann {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	min-height: var(--gb-ann-min-h);
	z-index: 1001; /* au-dessus de .mcm-header-bar (1000) */
	background: var(--gb-ann-bg, #1f6b52);
	color: var(--gb-ann-fg, #ffffff);
	font-family: "Comfortaa", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.35;
}

.gb-ann * {
	box-sizing: border-box;
}

body.admin-bar .gb-ann {
	top: 32px;
}

/* Le thème masque la barre WP sous 782px */
@media screen and (max-width: 782px) {
	body.admin-bar .gb-ann {
		top: 0;
	}
}

/* Tous les messages dans la même cellule : superposés, mais la hauteur de la
   ligne reste celle du plus haut d'entre eux. */
.gb-ann__viewport {
	display: grid;
	max-width: 1130px;
	margin: 0 auto;
}

.gb-ann__msg {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease;
	text-align: center;
}

.gb-ann__msg.is-active {
	opacity: 1;
	visibility: visible;
}

/* Contenu enrichi saisi dans l'admin */
.gb-ann__text a {
	color: inherit;
	text-decoration: underline;
}

.gb-ann__text a:hover,
.gb-ann__text a:focus {
	color: inherit;
	text-decoration: none;
}

.gb-ann__text img {
	display: inline-block;
	height: 1.35em;
	width: auto;
	max-width: none;
	vertical-align: -0.25em;
	margin: 0 4px 0 0;
	object-fit: contain;
}

@media (max-width: 480px) {
	.gb-ann {
		font-size: 13px;
	}
	.gb-ann__msg {
		padding: 7px 12px;
	}
}

/* Pas d'animation si l'utilisateur la refuse (le JS ne démarre pas non plus). */
@media (prefers-reduced-motion: reduce) {
	.gb-ann__msg {
		transition: none;
	}
}

/* ------- Calage du header et du contenu ------- */

body.gb-ann-on .mcm-header-bar {
	top: var(--gb-ann-h);
}

body.gb-ann-on.admin-bar .mcm-header-bar {
	top: calc(32px + var(--gb-ann-h));
}

@media screen and (max-width: 782px) {
	body.gb-ann-on.admin-bar .mcm-header-bar {
		top: var(--gb-ann-h);
	}
}

body.gb-ann-on.mcm-new-header-active #wrap_all {
	padding-top: calc(var(--mcm-header-h) + var(--gb-ann-h));
}