/* Rubrique TOP-BAR : toutes les règles spécifiques top-bar. */

.em-section--top-bar {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
}

:root {
	--em-sticky-top-bar-offset: 112px;
	--em-section-scroll-offset: calc(var(--em-sticky-top-bar-offset) + 24px);
}

html {
	scroll-padding-top: var(--em-section-scroll-offset);
}

#hero,
#hero-slider,
#stream,
#social,
#video,
#release,
#cta,
#about,
#contact,
#footer,
.em-section,
.em-landing-section,
.em-site-section {
	scroll-margin-top: var(--em-section-scroll-offset);
}

.em-section--top-bar > .em-rubrique {
	overflow: visible;
	background-color: var(--em-rubrique-bg, #0f172a);
	color: var(--em-rubrique-text, #e2e8f0);
	padding: var(--em-rubrique-pt, 40px) var(--em-rubrique-pr, 180px) var(--em-rubrique-pb, 40px) var(--em-rubrique-pl, 180px);
	font-family: var(--em-rubrique-font, "Archivo Black", system-ui, sans-serif);
}

.em-section--top-bar .em-rubrique__field--join_the_journey,
.em-section--top-bar .em-rubrique__field--stream_share {
	margin: 0;
}

body.admin-bar .em-section--top-bar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .em-section--top-bar {
		top: 46px;
	}
}

@media (max-width: 760px) {
	.em-section--top-bar > .em-rubrique {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		align-items: start;
		column-gap: 12px;
		row-gap: 4px;
		padding-top: 18px;
		padding-bottom: 18px;
		padding-left: 18px;
		padding-right: 14px;
	}

	.em-section--top-bar > .em-rubrique > .em-rubrique__row {
		display: contents !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.em-section--top-bar > .em-rubrique > .em-rubrique__row > .em-rubrique__col {
		display: none;
	}

	.em-section--top-bar > .em-rubrique > .em-rubrique__row > .em-rubrique__col:has(.em-rubrique__imgwrap),
	.em-section--top-bar > .em-rubrique > .em-rubrique__row > .em-rubrique__col:has(.em-rubrique__image) {
		display: block;
		grid-column: 1;
		grid-row: 1 / span 2;
		justify-self: start;
		align-self: start;
		margin: 0;
		text-align: left !important;
	}

	.em-section--top-bar > .em-rubrique > .em-rubrique__row > .em-rubrique__col:has(.em-rubrique__texticon),
	.em-section--top-bar > .em-rubrique > .em-rubrique__row > .em-rubrique__col:has(.em-rubrique__field--stream_share) {
		display: block;
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		margin: 0;
		text-align: right;
	}

	.em-section--top-bar > .em-rubrique > .em-rubrique__row > .em-rubrique__col:has(.top-bar-platform-link) {
		display: block;
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		align-self: start;
		margin: 0;
		text-align: right;
	}

	.em-section--top-bar > .em-rubrique .em-rubrique__imgwrap .em-rubrique__image,
	.em-section--top-bar > .em-rubrique .em-rubrique__col:has(.em-rubrique__image) > .em-rubrique__image,
	.em-section--top-bar > .em-rubrique .em-rubrique__col:has(.em-rubrique__image) .em-rubrique__link--media > .em-rubrique__image {
		width: 108px;
		max-width: 108px;
		height: auto;
	}

	.em-section--top-bar > .em-rubrique .em-rubrique__col:has(.em-rubrique__imgwrap) .em-rubrique__link--media,
	.em-section--top-bar > .em-rubrique .em-rubrique__col:has(.em-rubrique__image) .em-rubrique__link--media {
		justify-content: flex-start;
	}

	.em-section--top-bar > .em-rubrique .em-rubrique__texticon,
	.em-section--top-bar > .em-rubrique .em-rubrique__field--stream_share,
	.em-section--top-bar > .em-rubrique .em-rubrique__field--stream_share .em-rubrique__link {
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		gap: 6px;
		white-space: nowrap;
		line-height: 1.2;
	}

	.em-section--top-bar > .em-rubrique .em-rubrique__texticon {
		margin: 0;
		padding-right: 6px;
	}

	.em-section--top-bar > .em-rubrique .em-rubrique__texticon .em-rubrique__field {
		margin: 0;
		font-size: .90rem;
		font-weight: 500;
		line-height: 1.2;
	}

	.em-section--top-bar > .em-rubrique .em-rubrique__texticon .em-rubrique__link {
		margin: 0;
	}

	.em-section--top-bar > .em-rubrique .em-rubrique__texticon .em-rubrique__texticon-icon {
		width: 15px;
		height: 15px;
		font-size: 15px;
		line-height: 15px;
	}

	.em-section--top-bar > .em-rubrique .top-bar-platform-link .em-rubrique__icon {
		font-size: 22px;
		line-height: 22px;
		margin: 0 6px;
	}

	.em-section--top-bar > .em-rubrique .em-rubrique__col:has(.top-bar-platform-link)::after {
		content: none;
	}
}