/* =========================================================
   Balsamiq – header double univers (chargé sur tout le site)
   Logo actif : en couleur. Logo inactif : noir passé en gris
   (vert / rouge conservés), retour à la couleur au survol.
   ========================================================= */

.header-area .bl-universes {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: 0 1 auto;
	min-width: 0;
}

.header-area .bl-logo {
	position: relative;
	display: block;
	line-height: 0;
	flex: none;
}

/* Les deux logos à la même largeur que le logo actuel du site */
.header-area .bl-logo img {
	width: 180px; /* 300px - 40 % */
	max-height: none;
	height: auto;
}

.header-area .bl-sep {
	flex: none;
	width: 1.5px;
	height: 44px;
	background: #151515;
	opacity: .85;
}

/* --- Logo inactif : version grise au repos, couleur au survol --- */
.header-area .bl-logo .bl-grey {
	display: none;
}
.header-area .bl-logo.is-inactive .bl-grey {
	display: block;
	transition: opacity .3s ease;
}
.header-area .bl-logo.is-inactive .logo-dark,
.header-area .bl-logo.is-inactive .logo-light {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity .3s ease;
}
.header-area .bl-logo.is-inactive:hover .logo-dark,
.header-area .bl-logo.is-inactive:hover .logo-light,
.header-area .bl-logo.is-inactive:focus-visible .logo-dark,
.header-area .bl-logo.is-inactive:focus-visible .logo-light {
	opacity: 1;
}
.header-area .bl-logo.is-inactive:hover .bl-grey,
.header-area .bl-logo.is-inactive:focus-visible .bl-grey {
	opacity: 0;
}

/* --- Page Live : header blanc dès le haut de page, logos foncés --- */
.bl-is-live .header-area {
	background-color: #fff;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); /* même ombre que le header sticky */
}
.bl-is-live .header-area .logo-dark {
	display: block;
}
.bl-is-live .header-area .logo-light {
	display: none;
}

/* --- Responsive (mêmes paliers que le thème) --- */
@media only screen and (max-width: 1199.98px) {
	.header-area .bl-logo img { width: 150px; } /* 250px - 40 % */
	.header-area .bl-sep { height: 38px; }
}
@media only screen and (max-width: 992.98px) {
	.header-area .bl-universes { gap: 18px; }
	.header-area .bl-logo img { width: 150px; }
	.header-area .bl-sep { height: 40px; }
}
@media only screen and (max-width: 575.98px) {
	.header-area .bl-universes { gap: 12px; }
	.header-area .bl-logo img { width: 118px; }
	.header-area .bl-sep { height: 32px; }
}


/* --- Page Live : voyant ON AIR en haut à droite --- */
.bl-is-live .header-area .bl-onair {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex: none;
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1;
	color: #6A6365;
}
.bl-is-live .header-area .bl-onair i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #E3120B;
	box-shadow: 0 0 0 4px #FCEDEC;
	animation: bl-onair 2s ease-in-out infinite;
}
@keyframes bl-onair { 50% { opacity: .35; } }
@media only screen and (max-width: 575.98px) {
	.bl-is-live .header-area .bl-onair span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bl-is-live .header-area .bl-onair i { animation: none; }
}


/* --- Accueil : l'espace vide WPBakery de 120 px en haut de page était calé sur
   l'ancien header (logo de 100 px). On l'aligne sur la hauteur du nouveau header
   pour supprimer la bande blanche au-dessus de la vidéo. --- */
@media only screen and (min-width: 1200px) {
	.home .page-container > .vc_row:first-child .wpb_wrapper > .vc_empty_space:first-child {
		height: 91px !important; /* 15 + 61 (logo 180 px) + 15 */
	}
}
@media only screen and (min-width: 993px) and (max-width: 1199.98px) {
	.home .page-container > .vc_row:first-child .wpb_wrapper > .vc_empty_space:first-child {
		height: 81px !important; /* 15 + 51 (logo 150 px) + 15 */
	}
}