/* =========================================================
   Maquette de fenêtre de navigateur (hvl-mc-window)
   ========================================================= */

.hvl-mcwin {
	--mcwin-surface: var(--e-global-color-blanc, #fff);
	--mcwin-bar: var(--e-global-color-brume_100, #eef4f8);
	--mcwin-line: var(--e-global-color-brume_200, #dde7ef);
	--mcwin-media: var(--e-global-color-azur_50, #eef8fd);
	--mcwin-ink: var(--e-global-color-text, #14161d);
	--mcwin-mute: var(--e-global-color-gris, #6a6f7d);
	--mcwin-brand: var(--e-global-color-primary, #08739f);
	--mcwin-radius: 14px;
	overflow: hidden;
	border-radius: var(--mcwin-radius) var(--mcwin-radius) 0 0;
	text-align: left;
	background: var(--mcwin-surface);
}

.hvl-mcwin__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--mcwin-line);
	background: var(--mcwin-bar);
}

.hvl-mcwin__bar i {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 99px;
	background: var(--mcwin-line);
}

.hvl-mcwin__url {
	margin-left: 8px;
	overflow: hidden;
	border-radius: 6px;
	padding: 3px 10px;
	font-family: var(--e-global-typography-text-font-family, "Karla"), sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--mcwin-mute);
	background: var(--mcwin-surface);
}

.hvl-mcwin__url b {
	font-weight: 700;
	color: var(--mcwin-brand);
}

.hvl-mcwin__body {
	display: grid;
	gap: 10px;
	padding: 18px 18px 24px;
}

.hvl-mcwin__nav {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hvl-mcwin__brand {
	font-family: var(--e-global-typography-display-font-family, "Rubik"), sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--mcwin-ink);
}

.hvl-mcwin__menu {
	margin-left: auto;
	font-family: var(--e-global-typography-text-font-family, "Karla"), sans-serif;
	font-size: 12px;
	color: var(--mcwin-mute);
}

.hvl-mcwin__langs {
	display: flex;
	flex: none;
	gap: 4px;
}

.hvl-mcwin__langs span {
	border-radius: 6px;
	padding: 2px 7px;
	font-family: var(--e-global-typography-text-font-family, "Karla"), sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--mcwin-mute);
	background: var(--mcwin-bar);
}

.hvl-mcwin__langs span.is-on {
	color: var(--mcwin-surface);
	background: var(--mcwin-ink);
}

.hvl-mcwin__title {
	display: block;
	margin-top: 6px;
	font-family: var(--e-global-typography-display-font-family, "Rubik"), sans-serif;
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: var(--mcwin-ink);
}

.hvl-mcwin__text {
	display: block;
	font-family: var(--e-global-typography-text-font-family, "Karla"), sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mcwin-mute);
}

.hvl-mcwin__media {
	display: block;
	height: 92px;
	border-radius: 10px;
	background: var(--mcwin-media);
}

.hvl-mcwin__btn {
	justify-self: start;
	border-radius: 8px;
	padding: 8px 14px;
	font-family: var(--e-global-typography-text-font-family, "Karla"), sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--mcwin-surface);
	background: var(--mcwin-ink);
}

@media (max-width: 479px) {
	.hvl-mcwin__menu {
		display: none;
	}

	.hvl-mcwin__langs {
		margin-left: auto;
	}
}

/* =========================================================
   Modificateurs d’utilitaires partagés qui manquent encore
   dans havvenlab.css / pill-tabs.css. Chargés avec ce widget,
   présent sur la même page que les blocs concernés.
   ========================================================= */

/* Les utilitaires de colonnes calculent la largeur avec un gutter fixe
   (16px pour hvl-cols-3, 48px pour hvl-cols-2/band, 56px pour l’aside).
   Ce modificateur les aligne sur le gap réellement réglé sur le conteneur. */
.e-con.hvl-cols-sync,
.hvl-cols-sync {
	--hvl-cols-gap: var(--column-gap, 16px);
}

/* Bande en deux colonnes 55 / 45 (maquette : minmax(0,1.1fr) minmax(0,0.9fr)). */
.e-con.hvl-cols-band.hvl-cols-band--55 > .e-con:first-child {
	--width: calc((100% - var(--hvl-cols-gap, 48px)) * 0.55);
	width: var(--width);
}

.e-con.hvl-cols-band.hvl-cols-band--55 > .e-con:last-child {
	--width: calc((100% - var(--hvl-cols-gap, 48px)) * 0.45);
	width: var(--width);
}

@media (max-width: 899px) {
	.e-con.hvl-cols-band.hvl-cols-band--55 > .e-con:first-child,
	.e-con.hvl-cols-band.hvl-cols-band--55 > .e-con:last-child {
		--width: 100%;
	}
}

/* hvl-cols-aside place la colonne latérale en haut ; ici elle doit être
   centrée verticalement en face du titre (maquette : align-items: center). */
.e-con.hvl-cols-aside.hvl-cols-aside--center > .e-con:last-child,
.hvl-cols-aside.hvl-cols-aside--center > *:last-child {
	align-self: center;
}

@media (max-width: 899px) {
	.e-con.hvl-cols-aside.hvl-cols-aside--center > .e-con:last-child,
	.hvl-cols-aside.hvl-cols-aside--center > *:last-child {
		align-self: stretch;
	}
}

/* Onglets pastille posés sur un panneau azur profond. */
.hvl-pill-tabs.hvl-pill-tabs--deep {
	--hvl-pill-strip: rgba(255, 255, 255, 0.1);
	--hvl-pill-ink: var(--e-global-color-blanc, #fff);
	--hvl-pill-active-bg: var(--e-global-color-blanc, #fff);
	--hvl-pill-active-ink: var(--e-global-color-azur_deep, #032838);
}