/* La composition du hero reprend la grille, les marges et les espaces de l’accueil. */
.page-hero {
	min-height: 100dvh;
	/* Keep an over-height hero anchored to the top instead of centering it
     outside the viewport and clipping the logo and heading. */
	align-items: start;
}

.page-hero-inner.satellite-hero-inner {
	width: min(var(--container), calc(100% - 32px));
	min-height: 100dvh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	align-items: stretch;
	gap: 14px;
	padding: clamp(52px, 6.5vh, 82px) 0 clamp(78px, 9vh, 112px);
	text-align: left;
}

.satellite-hero-main {
	width: 100%;
	max-width: 1420px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(124px, 190px) var(
			--hero-service-nav-width
		);
	align-items: center;
	gap: clamp(18px, 2.3vw, 34px);
}

.satellite-hero-copy {
	display: grid;
	grid-column: 1;
	grid-row: 1;
	justify-items: start;
	gap: clamp(12px, 1.8vh, 20px);
	min-width: 0;
	min-height: var(--hero-copy-min-height);
}

.satellite-hero-copy > .page-brand {
	display: flex;
	justify-self: center;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0 0 10px;
}

.satellite-hero-copy > .page-brand .logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--hero-brand-width);
	max-width: min(420px, 92vw);
	height: auto;
	margin: 0 auto;
}

.satellite-hero-copy > .page-brand .logo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--hero-brand-max-height);
	object-fit: contain;
}

.satellite-hero-copy .page-kicker {
	margin: 0;
}
.satellite-hero-copy h1 {
	max-width: 18ch;
	margin: 0;
}
.satellite-hero-copy .page-hero-lead,
.satellite-hero-copy .page-hero-text {
	max-width: 66ch;
	margin: 0;
}

.hero-service-column {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-self: center;
	gap: 10px;
	min-width: 0;
}

.satellite-service-nav,
.payment-service-nav {
	width: 100%;
	max-width: none;
	margin: 0;
}

.satellite-service-nav {
	grid-column: auto;
	grid-row: auto;
}
.page-hero-inner.satellite-hero-inner > .site-menu-toggle {
	right: 0;
}

@media (min-width: 1001px) {
	.satellite-hero-main {
		gap: clamp(24px, 2.8vw, 40px);
	}
}

/* La navigation de facturation occupe la même colonne droite que les CTA satellites. */
@media (min-width: 1001px) {
	.satellite-hero-main > .payment-service-nav {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		width: 100%;
		margin: 0 -15mm 0 0;
	}
}

@media (min-width: 1201px) {
	.page-hero-inner.satellite-hero-inner {
		width: min(
			calc(var(--container) + clamp(32px, 4vw, 56px)),
			calc(100% - 32px)
		);
	}
	.satellite-hero-copy {
		transform: translateX(var(--hero-copy-shift));
	}
	/* La colonne entière est déplacée par hero-navigation.css afin de garder
     les bulles exactement alignées sous les CTA sur toutes les pages. */
	.page-hero-inner.satellite-hero-inner > .site-menu-toggle {
		right: clamp(0px, 2vw, 28px);
	}
}

@media (max-width: 1000px) {
	.page-hero-inner.satellite-hero-inner {
		width: min(var(--container), calc(100% - 32px));
		min-height: 100dvh;
	}
	.satellite-hero-main {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
	.satellite-hero-copy {
		min-height: var(--hero-copy-min-height);
	}
	.hero-service-column {
		grid-column: 1;
		grid-row: auto;
	}
	.satellite-service-nav,
	.payment-service-nav {
		grid-column: 1;
		grid-row: auto;
	}
	.satellite-hero-main > .payment-service-nav {
		grid-column: 1;
		grid-row: auto;
	}
	.satellite-service-nav {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.payment-service-nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.satellite-service-nav .hero-service-link + .hero-service-link {
		margin-top: 0;
	}
	.hero-contact-tools {
		align-items: flex-start;
	}
}

@media (max-width: 720px) {
	.page-hero {
		min-height: 0;
		height: auto;
		max-height: none;
		overflow: visible;
	}
	.page-hero-inner.satellite-hero-inner {
		min-height: 0;
		height: auto;
		max-height: none;
		gap: 12px;
		padding: max(82px, calc(64px + env(safe-area-inset-top))) 0
			max(24px, env(safe-area-inset-bottom));
	}
	.satellite-hero-main {
		gap: 14px;
	}
	.satellite-hero-copy {
		gap: 9px;
		min-height: 0;
	}
	.satellite-hero-copy > .page-brand {
		width: 100%;
	}
	.satellite-hero-copy > .page-brand .logo {
		width: min(440px, 100%);
		max-width: 100%;
		margin: 0 auto 6px;
	}
	.satellite-hero-copy > .page-brand .logo img {
		max-height: 120px;
	}
	.satellite-hero-copy h1 {
		max-width: none;
		font-size: clamp(30px, 7.6vw, 44px);
		line-height: 1.05;
		text-wrap: balance;
	}
	.satellite-service-nav {
		grid-template-columns: minmax(0, 1fr);
		gap: 5px;
	}
	.payment-service-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.satellite-service-nav .hero-service-link {
		min-height: 38px;
	}
	.hero-service-column {
		width: 100%;
		gap: 6px;
	}
	.hero-service-link {
		padding: 4px 6px 4px 9px;
	}
	.hero-contact-tools {
		align-items: stretch;
		gap: 6px;
	}
	.hero-contact-item {
		width: 100%;
	}
	.hero-contact-output {
		max-width: 100%;
		font-size: 10px;
	}
	.satellite-bottom-actions {
		gap: 5px;
		margin-top: 10px;
	}
	.satellite-bottom-actions .hero-bottom-action {
		min-height: 54px;
		gap: 4px;
		padding: 6px;
		font-size: clamp(9px, 2.8vw, 10.5px);
	}
	.satellite-bottom-actions .hero-bottom-action__label {
		min-width: 0;
		overflow-wrap: normal;
		text-wrap: balance;
	}
	.satellite-bottom-actions .hero-bottom-action__square {
		flex-basis: 24px;
		width: 24px;
		height: 24px;
	}
	.site-menu-toggle {
		top: 20px;
		right: 0;
	}
}

@media (max-width: 360px) {
	.page-hero-inner.satellite-hero-inner {
		width: min(var(--container), calc(100% - 24px));
		padding-top: max(78px, calc(60px + env(safe-area-inset-top)));
	}
	.satellite-hero-copy h1 {
		font-size: clamp(29px, 8vw, 32px);
	}
	.satellite-bottom-actions .hero-bottom-action {
		padding-inline: 4px;
	}
	.satellite-bottom-actions .hero-bottom-action__square {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
	}
}

@media (max-height: 760px) and (min-width: 721px) {
	.satellite-hero-copy {
		min-height: clamp(420px, 64vh, 500px);
	}
	.satellite-hero-copy > .page-brand .logo img {
		max-height: 110px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.satellite-service-nav .hero-service-link,
	.satellite-service-nav .hero-service-link__arrow,
	.satellite-service-nav .hero-service-link__arrow svg,
	.hero-contact-button {
		transition-duration: 0.01ms !important;
	}
}


@media (max-width: 720px) {
  .hero-service-column { gap: 18px !important; }
  .satellite-service-nav { gap: 10px; }
  .satellite-service-nav .hero-service-link { min-height: 46px; }
  .satellite-service-nav .hero-service-link + .hero-service-link { margin-top: 0; }
  .payment-service-nav { gap: 10px; }
  .payment-service-nav .hero-service-link { min-height: 46px; }
  .hero-contact-tools { gap: 8px; }
}

/* Audit 48h mobile : remonter les bulles et garder les trois CTA respirants en bas. */
@media (max-width: 720px) {
	.page-hero--audit .page-hero-inner.satellite-hero-inner {
		padding-top: max(72px, calc(60px + env(safe-area-inset-top)));
		padding-bottom: max(18px, env(safe-area-inset-bottom));
		gap: 8px;
	}
	.page-hero--audit .satellite-hero-main { gap: 10px; }
	.page-hero--audit .satellite-hero-copy { gap: 6px; }
	.page-hero--audit .satellite-hero-copy > .page-brand { margin-bottom: 2px; }
	.page-hero--audit .satellite-hero-copy > .page-brand .logo img { max-height: 78px; }
	.page-hero--audit .satellite-hero-copy .page-kicker { padding: 6px 10px; }
	.page-hero--audit .satellite-hero-copy h1 {
		font-size: clamp(28px, 7vw, 34px);
		line-height: 1;
	}
	.page-hero--audit .satellite-hero-copy .page-hero-lead {
		font-size: 15px;
		line-height: 1.32;
	}
	.page-hero--audit .satellite-hero-copy .page-hero-text {
		font-size: 14px;
		line-height: 1.34;
	}
	.page-hero--audit .hero-service-column { gap: 8px !important; }
	.page-hero--audit .satellite-service-nav { row-gap: 7px !important; }
	.page-hero--audit .satellite-service-nav .hero-service-link { min-height: 46px; }
	.page-hero--audit .hero-contact-tools { gap: 7px !important; }
	.page-hero--audit .hero-contact-item { min-height: 44px; }
	/* La ligne de CTA commence 20 px plus bas que dans la référence initiale. */
	.page-hero--audit .satellite-bottom-actions { margin-top: 30px; }
}