/**
 * HKWebProduction Banner - styles front-office
 *
 * Convention de nommage BEM avec préfixe "hkwp-banner" pour éviter
 * toute collision avec les styles du thème ou d'autres extensions.
 */

/* Conteneur principal : fixé tout en haut du site, au-dessus du menu.
   z-index 9999 : au-dessus du header (1000) mais sous l'overlay de recherche (10000).
   La police est héritée du contexte (font-family: inherit) : la bannière
   s'harmonise automatiquement avec la police du thème, sans dépendance. */
.hkwp-banner {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: .2px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}

/* Zone interne centrée avec largeur maximale. */
.hkwp-banner__inner {
	max-width: 1280px;
	/* aligné sur --jdb-container du thème */
	margin: 0 auto;
	padding: 11px 52px 11px 24px;
	/* Espace à droite réservé au bouton fermer. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	position: relative;
	border-bottom: solid 1px white;
}

.hkwp-banner__message {
	flex: 0 1 auto;
}

/* Les liens héritent de la couleur du texte et restent soulignés (lisibilité). */
.hkwp-banner__message a {
	color: inherit;
	text-decoration: underline;
}

.hkwp-banner__message a:hover,
.hkwp-banner__message a:focus {
	text-decoration: none;
}

/* Bouton de fermeture, positionné à droite de la bannière.
   Cible tactile de 40px (confort mobile, recommandation WCAG 2.5.5). */
.hkwp-banner__close {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--jdb-ease, .25s ease);
}

.hkwp-banner__close:hover {
	background: rgba(0, 0, 0, 0.15);
}

/* Focus visible au clavier : essentiel pour l'accessibilité (RGAA/WCAG). */
.hkwp-banner__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* État masqué appliqué par le JS après fermeture par le visiteur. */
.hkwp-banner.hkwp-banner--hidden {
	display: none;
}

/* ==========================================================================
   RESPONSIVE
   Breakpoints alignés sur le thème JDB Secrets (767px mobile, 480px petit mobile).
   La hauteur réelle est mesurée en JS (--hkwp-banner-h), donc le menu se
   décale correctement même si le message passe sur plusieurs lignes.
   ========================================================================== */

/* Mobile (< 768px) */
@media (max-width: 767px) {
	.hkwp-banner {
		font-size: 13.5px;
		line-height: 1.35;
	}

	.hkwp-banner__inner {
		padding: 10px 46px 10px 16px;
		gap: 8px;
	}

	.hkwp-banner__close {
		right: 6px;
		width: 38px;
		height: 38px;
		font-size: 24px;
	}
}

/* Petit mobile (< 480px) */
@media (max-width: 479px) {
	.hkwp-banner {
		font-size: 13px;
	}

	.hkwp-banner__inner {
		padding: 9px 42px 9px 12px;
	}
}

/* Respect de la préférence "animations réduites" (RGAA / WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
	.hkwp-banner__close {
		transition: none;
	}
}