/* Accueil : portrait, navigation vers les pages satellites et menu latéral. */
:root { --hero-service-nav-width: clamp(230px, 23vw, 320px); --spo-infinity-blue: #087fc4; --hero-top-padding: clamp(58px, 7vh, 82px); --hero-bottom-padding: clamp(18px, 2.4vh, 28px); --hero-bottom-actions-reserve: calc(47px + clamp(16px, 2.2vh, 26px)); --hero-brand-width: min(520px, 92vw); --hero-brand-max-height: 140px; --hero-copy-shift: -10px; --hero-copy-min-height: clamp(480px, 60vh, 560px); }
.hero-inner {
	position: relative;
	padding-top: clamp(52px, 6.5vh, 82px);
	padding-bottom: clamp(78px, 9vh, 112px);
}

.hero-content {
	grid-template-columns: minmax(210px, 0.38fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5.2vw, 76px);
	max-width: 1180px;
	margin-inline: auto;
}

.hero-portrait {
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
	width: clamp(172px, 19vw, 248px);
	min-width: 0;
	gap: 18px;
}

.hero-portrait__ring {
	width: 100%;
	padding: 4px;
	background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(44,203,211,.8) 54%, rgba(232,181,44,.84));
	box-shadow: 0 22px 64px rgba(0,0,0,.32), 0 0 0 8px rgba(255,255,255,.06);
}

.hero-portrait__name {
	color: rgba(255,255,255,.82);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-align: center;
	text-transform: uppercase;
}

.hero-portrait__name span {
	color: rgba(255,255,255,.62);
	font-weight: 500;
}

.hero-copy {
	grid-column: 2;
	grid-row: 1;
	justify-items: start;
	gap: 12px;
	min-width: 0;
	text-align: left;
}

.hero-copy .brand-row,
.hero-copy .brand-badges {
	justify-content: flex-start;
}

.hero-copy .hero-title,
.hero-copy .hero-subtitle,
.hero-copy .hero-lead {
	margin-inline: 0;
	text-align: left;
}

.hero-copy .hero-title {
	max-width: 900px;
	font-size: clamp(34px, 4.1vw, 60px);
	line-height: 1.02;
}

.hero-copy .hero-subtitle {
	max-width: 720px;
}

.hero-copy .hero-lead {
	margin-top: 0;
	font-size: clamp(20px, 2vw, 27px);
}

.hero-service-nav {
	display: grid;
	width: min(100%, 760px);
	margin-top: 4px;
	border-top: 1px solid rgba(255,255,255,.28);
}

.hero-service-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 42px;
	align-items: center;
	gap: 18px;
	min-height: 68px;
	padding: 12px 2px;
	border-bottom: 1px solid rgba(255,255,255,.28);
	color: #fff;
	text-decoration: none;
	transition: padding .28s ease, color .28s ease, border-color .28s ease;
}

.hero-service-link:hover,
.hero-service-link:focus-visible {
	padding-inline: 10px;
	border-color: rgba(80,223,226,.9);
	color: #fff;
}


.hero-service-link__copy {
	display: grid;
	gap: 2px;
}

.hero-service-link__title {
	font-size: clamp(16px, 1.45vw, 20px);
	font-weight: 750;
	letter-spacing: -.015em;
}

.hero-service-link__description {
	color: rgba(255,255,255,.7);
	font-size: 13px;
	line-height: 1.4;
}

.hero-service-link__arrow {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border: 1px solid rgba(255,255,255,.72);
	border-radius: 5px;
	transition: transform .6s cubic-bezier(.4,0,.2,1), background-color .55s ease-in-out, border-color .55s ease-in-out;
}

.hero-service-link__arrow svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.hero-service-link:hover .hero-service-link__arrow,
.hero-service-link:focus-visible .hero-service-link__arrow {
	transform: translateX(3px) rotate(45deg);
	border-color: var(--spo-infinity-blue);
	background: var(--spo-infinity-blue);
	color: #fff;
}

.hero-service-link:hover .hero-service-link__arrow svg,
.hero-service-link:focus-visible .hero-service-link__arrow svg {
	transform: rotate(-45deg) translateX(2px);
}

.site-menu-toggle {
	position: absolute;
	top: 24px;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 8px 10px 8px 16px;
	border: 1px solid rgba(255,255,255,.44);
	border-radius: 999px;
	background: rgba(7,20,37,.42);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.site-menu-toggle:hover,
.site-menu-toggle:focus-visible {
	border-color: #50dfe2;
	background: rgba(7,20,37,.78);
}

.site-menu-toggle__icon {
	position: relative;
	display: grid;
	width: 28px;
	height: 28px;
	place-content: center;
	gap: 5px;
	border-radius: 50%;
	background: #50dfe2;
}

.site-menu-toggle__icon span {
	display: block;
	width: 13px;
	height: 1.5px;
	background: #0b1f3b;
	transition: transform .24s ease;
}

.site-menu-toggle[aria-expanded="true"] .site-menu-toggle__icon span:first-child {
	transform: translateY(3.25px) rotate(45deg);
}

.site-menu-toggle[aria-expanded="true"] .site-menu-toggle__icon span:last-child {
	transform: translateY(-3.25px) rotate(-45deg);
}

.site-menu {
	position: fixed;
	inset: 0;
	z-index: 1500;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .5s;
}

.site-menu.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.site-menu__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: rgba(3,12,24,.62);
	opacity: 0;
	cursor: default;
	transition: opacity .38s ease;
}

.site-menu.is-open .site-menu__scrim {
	opacity: 1;
}

.site-menu__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(600px, 52vw);
	height: 100%;
	min-height: 100vh;
	padding: clamp(28px, 4vw, 58px);
	background: #f6f8f7;
	color: #0b1f3b;
	box-shadow: -24px 0 80px rgba(0,0,0,.18);
	transform: translateX(102%);
	transition: transform .48s cubic-bezier(.22,.75,.24,1);
}

.site-menu.is-open .site-menu__panel {
	transform: translateX(0);
}

.site-menu__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.site-menu__close {
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	border: 1px solid rgba(11,31,59,.2);
	border-radius: 50%;
	background: transparent;
	color: #0b1f3b;
	font: inherit;
	cursor: pointer;
	transition: transform .25s ease, background-color .2s ease;
}

.site-menu__close:hover {
	transform: rotate(90deg);
	background: rgba(80,223,226,.22);
}

.site-menu__close span {
	font-size: 30px;
	font-weight: 300;
	line-height: 1;
}

.site-menu__intro {
	max-width: 390px;
	margin: clamp(30px, 6vh, 72px) 0 28px;
	color: rgba(11,31,59,.66);
	font-size: clamp(17px, 2vw, 22px);
	line-height: 1.42;
}

.site-menu__links {
	display: grid;
	border-top: 1px solid rgba(11,31,59,.18);
}

.site-menu__links a {
	display: grid;
	grid-template-columns: 34px minmax(0,1fr) 28px;
	align-items: center;
	gap: 14px;
	min-height: clamp(62px, 8vh, 82px);
	padding: 10px 12px;
	border-bottom: 1px solid rgba(11,31,59,.18);
	border-radius: 3px;
	color: #0b1f3b;
	font-size: clamp(23px, 3vw, 35px);
	font-weight: 650;
	letter-spacing: -.045em;
	line-height: 1.1;
	text-decoration: none;
	transition: padding .25s ease, background-color .25s ease, color .25s ease;
}

.site-menu__links a:hover,
.site-menu__links a:focus-visible,
.site-menu__links a[aria-current="page"] {
	padding-inline: 18px;
	background: #50dfe2;
	color: #0b1f3b;
}

.site-menu__index {
	color: rgba(11,31,59,.48);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
}

.site-menu__arrow {
	justify-self: end;
	font-size: 21px;
	transition: transform .22s ease;
}

.site-menu__links a:hover .site-menu__arrow,
.site-menu__links a:focus-visible .site-menu__arrow {
	transform: translate(3px,-3px);
}

.site-menu__footer {
	display: grid;
	gap: 18px;
	margin-top: auto;
	padding-top: 28px;
	color: rgba(11,31,59,.56);
	font-size: 13px;
}

.site-menu__contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 18px;
	border-radius: 4px;
	background: #0b1f3b;
	color: #fff;
	font-weight: 750;
	text-decoration: none;
	transition: background-color .2s ease;
}

.site-menu__contact:hover {
	background: #19388c;
}

body.menu-open {
	overflow: hidden;
}

@media (max-width: 1020px) {
	.hero-content {
		grid-template-columns: minmax(156px, .28fr) minmax(0, 1fr);
		gap: clamp(22px, 4vw, 42px);
	}
	.hero-portrait {
		width: clamp(148px, 17vw, 180px);
	}
	.hero-copy .hero-title {
		font-size: clamp(34px, 4.5vw, 48px);
	}
}

@media (max-width: 720px) {
	.hero-inner {
		padding-top: 80px;
		padding-bottom: 32px;
	}
	.hero-content {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
	.hero-copy {
		grid-column: 1;
		grid-row: 2;
		justify-items: center;
		width: 100%;
		text-align: center;
	}
	.hero-copy .brand-row,
	.hero-copy .brand-badges {
		justify-content: center;
	}
	.hero-copy .hero-title,
	.hero-copy .hero-subtitle,
	.hero-copy .hero-lead {
		margin-inline: auto;
		text-align: center;
	}
	.hero-copy .hero-title {
		font-size: clamp(31px, 8vw, 43px);
	}
	.hero-copy .hero-subtitle {
		font-size: 15px;
	}
	.hero-portrait {
		grid-column: 1;
		grid-row: 1;
		width: clamp(150px, 42vw, 200px);
	}
	.hero-service-nav {
		text-align: left;
	}
	.hero-service-link {
		grid-template-columns: minmax(0,1fr) 40px;
		gap: 10px;
		min-height: 68px;
	}
	.hero-service-link__description {
		font-size: 12px;
	}
	.site-menu-toggle {
		top: 20px;
		right: 0;
	}
	.site-menu__panel {
		width: 100%;
		min-height: 100svh;
		padding: 24px clamp(22px, 6vw, 36px) max(22px, env(safe-area-inset-bottom));
	}
	.site-menu__intro {
		margin-top: 36px;
	}
}

@media (max-width: 380px) {
	.hero-service-link {
		grid-template-columns: minmax(0,1fr) 36px;
		gap: 8px;
	}
	.hero-service-link__title {
		font-size: 15px;
	}
	.hero-service-link__description {
		font-size: 11px;
	}
	.site-menu__links a {
		font-size: 23px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-menu,
	.site-menu__scrim,
	.site-menu__panel,
	.site-menu__close,
	.site-menu-toggle,
	.site-menu-toggle__icon span,
	.hero-service-link,
	.hero-service-link__arrow,
	.hero-service-link__arrow svg,
	.site-menu__links a,
	.site-menu__arrow {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* Fondu croisé vers le vrai hero de la page ciblée, intégré dans une iframe sans scripts. */
.hero,
.page-hero { position: relative; overflow: hidden; }
.hero-transition-preview {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: #08172a;
	opacity: 0;
	transition: opacity .65s ease-in-out;
	pointer-events: none;
}
.hero-inner,
.page-hero-inner,
.hero-overlay { transition: opacity .65s ease-in-out; }
.hero.is-previewing .hero-inner,
.hero.is-previewing .hero-overlay,
.page-hero.is-previewing .page-hero-inner { opacity: 0; }
.hero.is-previewing .hero-transition-preview,
.page-hero.is-previewing .hero-transition-preview { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.hero-transition-preview,
	.hero-inner,
	.page-hero-inner,
	.hero-overlay { transition: none !important; }
}

/* Nouvelle composition du hero : promesse, portrait et accès courts aux services. */
.hero-content {
	grid-template-columns: minmax(0, 1fr) minmax(124px, 190px) var(--hero-service-nav-width);
	align-items: center;
	gap: clamp(18px, 2.3vw, 34px);
	max-width: 1320px;
}

.hero-copy {
	grid-column: 1;
	grid-row: 1;
}

.hero-portrait {
	grid-column: 2;
	grid-row: 1;
	width: clamp(124px, 14vw, 190px);
	gap: 12px;
}

.hero-copy .hero-title {
	font-size: clamp(34px, 3.5vw, 52px);
}

.hero-service-nav {
	grid-column: 3;
	grid-row: 1;
	width: 100%;
	margin-top: 0;
	border-top: 0;
}

.hero-service-link {
	grid-template-columns: minmax(0, 1fr) 28px;
	gap: 8px;
	min-height: 38px;
	padding: 5px 7px 5px 10px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 8px;
	background: rgba(7,20,37,.2);
}

.hero-service-link + .hero-service-link {
	margin-top: 8px;
}

.hero-service-link__copy {
	gap: 0;
}

.hero-service-link__title {
	font-size: clamp(13px, 1.1vw, 16px);
	line-height: 1.2;
}

.hero-service-link__arrow {
	width: 26px;
	height: 26px;
	border-radius: 4px;
}

.hero-service-link__arrow svg {
	width: 15px;
	height: 15px;
}

@media (max-width: 1000px) {
	.hero-content {
		grid-template-columns: minmax(0, 1fr) minmax(132px, 180px);
		gap: 22px;
	}
	.hero-copy {
		grid-column: 1;
		grid-row: 1;
	}
	.hero-portrait {
		grid-column: 2;
		grid-row: 1;
		width: clamp(124px, 15vw, 166px);
	}
	.hero-service-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.hero-service-link + .hero-service-link {
		margin-top: 0;
	}
}

@media (max-width: 720px) {
	.hero-content {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	.hero-copy {
		grid-column: 1;
		grid-row: 1;
		justify-items: start;
		text-align: left;
	}
	.hero-copy .brand-row,
	.hero-copy .brand-badges {
		justify-content: flex-start;
	}
	.hero-copy .hero-title,
	.hero-copy .hero-subtitle,
	.hero-copy .hero-lead {
		margin-inline: 0;
		text-align: left;
	}
	.hero-copy .hero-title {
		font-size: clamp(30px, 8vw, 42px);
	}
	.hero-portrait {
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		width: clamp(120px, 31vw, 148px);
	}
	.hero-service-nav {
		grid-column: 1;
		grid-row: 3;
		grid-template-columns: minmax(0, 1fr);
		gap: 7px;
	}
	.hero-service-link {
		min-height: 38px;
	}
}

/* Actions principales ancrées dans le hero, au-dessus de la ligne de flottaison. */
.hero-inner {
	min-height: 100svh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--hero-top-padding);
	padding-bottom: var(--hero-bottom-padding);
}
.hero-content { width: 100%; flex: 0 1 auto; }
.hero-copy .brand-badges {
	width: 100%;
	justify-content: center;
	flex-wrap: nowrap;
	gap: clamp(5px, .8vw, 12px);
}
.hero-copy .brand-badges .badge {
	white-space: nowrap;
	font-size: clamp(9px, .72vw, 11px);
	padding-inline: clamp(6px, .75vw, 11px);
}
.hero-bottom-actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-self: center;
	width: min(820px, 100%);
	margin: clamp(16px, 2.2vh, 26px) auto 0;
	border-top: 1px solid rgba(255,255,255,.27);
}
.hero-bottom-action {
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35em;
	padding: 8px clamp(7px, 1.4vw, 18px);
	color: rgba(255,255,255,.82);
	font-size: clamp(12px, 1vw, 14px);
	font-weight: 650;
	text-align: center;
	text-decoration: none;
	transition: color .25s ease, background .25s ease;
}
.hero-bottom-action + .hero-bottom-action { border-left: 1px solid rgba(255,255,255,.18); }
.hero-bottom-action strong { color: #fff; font-weight: 800; }
.hero-bottom-action:hover, .hero-bottom-action:focus-visible {
	color: #fff;
	background: rgba(255,255,255,.08);
	outline: none;
}
@media (max-width: 720px) {
	.hero { min-height: 0; height: auto; max-height: none; overflow: visible; }
	.hero-inner {
		min-height: 0;
		height: auto;
		max-height: none;
		justify-content: flex-start;
		padding-top: max(76px, calc(64px + env(safe-area-inset-top)));
		padding-bottom: max(28px, env(safe-area-inset-bottom));
	}
	.hero-copy .brand-badges { display: none; }
	.hero-bottom-actions { width: 100%; margin-top: 16px; }
	.hero-bottom-action { min-height: 46px; padding: 6px 5px; flex-direction: column; gap: 0; font-size: 11px; }
	.hero-bottom-action:first-child { line-height: 1.2; }
}
@media (max-width: 380px) {
	.hero-bottom-action { font-size: 10px; }
}

/* CTA d’accueil : volet rouge vertical et carré fléché animé. */
.hero-bottom-actions { border: 0; gap: clamp(8px, 1.2vw, 16px); }
.hero-bottom-action {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	justify-content: space-between;
	min-height: 54px;
	padding: 8px 10px 8px 16px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 9px;
	background: rgba(7,10,14,.88);
	color: #fff;
	text-align: left;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	transition: border-color .38s ease, color .38s ease, transform .38s cubic-bezier(.2,.75,.25,1), box-shadow .38s ease;
}
.hero-bottom-action + .hero-bottom-action { border-left: 1px solid rgba(255,255,255,.2); }
.hero-bottom-action::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	content: "";
	background: #d92f32;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .42s cubic-bezier(.2,.75,.25,1);
}
.hero-bottom-action__label { position: relative; z-index: 1; }
.hero-bottom-action__label strong { color: inherit; }
.hero-bottom-action__square {
	position: relative;
	z-index: 1;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.65);
	border-radius: 4px;
	transition: transform .42s cubic-bezier(.2,.75,.25,1), background-color .35s ease, border-color .35s ease;
}
.hero-bottom-action__square svg { width: 18px; height: 18px; }
.hero-bottom-action__square path { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-bottom-action:hover,
.hero-bottom-action:focus-visible,
.hero-bottom-action:active {
	color: #fff;
	border-color: #d92f32;
	background: rgba(7,10,14,.88);
	box-shadow: 0 12px 30px rgba(0,0,0,.26);
	transform: translateY(-2px);
	outline: none;
}
.hero-bottom-action:hover::before,
.hero-bottom-action:focus-visible::before,
.hero-bottom-action:active::before { transform: scaleY(1); }
.hero-bottom-action:hover .hero-bottom-action__square,
.hero-bottom-action:focus-visible .hero-bottom-action__square,
.hero-bottom-action:active .hero-bottom-action__square {
	transform: rotate(90deg);
	background-color: rgba(255,255,255,.1);
	border-color: #fff;
}
.hero-bottom-action:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 720px) {
	.hero-bottom-actions { gap: 7px; }
	.hero-bottom-action { min-height: 62px; flex-direction: row; padding: 7px 6px 7px 9px; font-size: 10.5px; }
	.hero-bottom-action:first-child { line-height: 1.2; }
	.hero-bottom-action__square { flex-basis: 27px; width: 27px; height: 27px; }
	.hero-bottom-action__square svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-bottom-action,
	.hero-bottom-action::before,
	.hero-bottom-action__square { transition-duration: .01ms !important; }
}

/* Le CTA de contact mène au dialogue : sa flèche s’oriente vers le haut. */
.hero-bottom-action--contact:hover .hero-bottom-action__square,
.hero-bottom-action--contact:focus-visible .hero-bottom-action__square,
.hero-bottom-action--contact:active .hero-bottom-action__square { transform: rotate(-90deg); }

/* Volet rouge pour les liens des trois offres ; leur animation existante reste intacte. */
.hero-service-link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-color: rgba(255,255,255,.28);
	transition: padding .55s ease-in-out, color .55s ease-in-out, border-color .55s ease-in-out;
}
.hero-service-link::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	content: "";
	background: #d92f32;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.hero-service-link__copy,
.hero-service-link__arrow { position: relative; z-index: 1; }
.hero-service-link:hover,
.hero-service-link:focus-visible,
.hero-service-link:active {
	border-color: #d92f32;
	color: #fff;
}
.hero-service-link:hover::before,
.hero-service-link:focus-visible::before,
.hero-service-link:active::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
	.hero-service-link::before { transition-duration: .01ms !important; }
}

/* Un peu plus d’air entre le texte, le portrait et la navigation de services. */
@media (min-width: 1001px) {
	.hero-content {
		gap: clamp(24px, 2.8vw, 40px);
		max-width: 1380px;
	}
}

/* Menu SPoDigital : palette neutre relevée par les accents du symbole infini. */
.site-menu__scrim { background: rgba(23,27,25,.66); }
.site-menu__panel {
	background: #f7f7f2;
	color: #252b29;
	box-shadow: -24px 0 80px rgba(13,18,16,.2);
}
.site-menu__topline { color: #414945; }
.site-menu__close { border-color: rgba(37,43,41,.22); color: #252b29; }
.site-menu__close:hover,
.site-menu__close:focus-visible { background: rgba(217,47,50,.11); color: #bd292f; }
.site-menu__intro { color: rgba(37,43,41,.66); }
.site-menu__links {
	grid-template-columns: minmax(0,1fr);
	border-top-color: rgba(37,43,41,.17);
}
.site-menu__links a {
	grid-template-columns: minmax(0,1fr) 28px;
	border-bottom-color: rgba(37,43,41,.17);
	border-left: 4px solid transparent;
	color: #252b29;
}
.site-menu__links a:hover,
.site-menu__links a:focus-visible {
	padding-inline: 18px;
	border-left-color: #d92f32;
	background: rgba(217,47,50,.09);
	color: #b82a30;
}
.site-menu__links a[aria-current="page"] {
	padding-inline: 18px;
	border-left-color: #2f946c;
	background: rgba(47,148,108,.12);
	color: #246f52;
}
.site-menu__links a[aria-current="page"]:hover,
.site-menu__links a[aria-current="page"]:focus-visible {
	border-left-color: #d92f32;
	background: rgba(217,47,50,.09);
	color: #b82a30;
}
.site-menu__arrow { color: #df7b43; }
.site-menu__links a:hover .site-menu__arrow,
.site-menu__links a:focus-visible .site-menu__arrow { color: #bd292f; }
.site-menu__footer { color: rgba(37,43,41,.6); }
.site-menu__contact {
	background: #282d2b;
	color: #fff;
	transition: background-color .3s ease, transform .3s ease;
}
.site-menu__contact:hover,
.site-menu__contact:focus-visible {
	background: #d92f32;
	transform: translateY(-1px);
}

/* Le rond du bouton Menu reprend le rouge-orangé du symbole infini. */
.site-menu-toggle {
	border-color: rgba(255,255,255,.52);
	background: rgba(25,29,27,.55);
}
.site-menu-toggle:hover,
.site-menu-toggle:focus-visible {
	border-color: #f0784b;
	background: rgba(25,29,27,.82);
}
.site-menu-toggle__icon { background: #e45b43; }
.site-menu-toggle__icon span { background: #fff; }

/* Respiration desktop : texte légèrement à gauche, portrait et liens décalés à droite. */
@media (min-width: 1201px) {
	.hero-content {
		width: calc(100% + clamp(32px, 4vw, 56px));
		max-width: 1420px;
		gap: clamp(34px, 3.5vw, 48px);
	}
	.hero-copy { transform: translateX(var(--hero-copy-shift)); }
	.hero-portrait { transform: translateX(9px); }
	/* Déplace ensemble les CTA et leurs deux bulles de contact. */
	.hero-service-column { transform: translateX(18px); }
}

/* Mobile et petits écrans : le logo commence sous la zone réservée au bouton Menu. */
@media (max-width: 900px) {
	/* Garde la place du menu, sans repousser inutilement le hero vers le bas. */
	.hero-inner { padding-top: max(72px, calc(60px + env(safe-area-inset-top))) !important; }
	.hero .brand-row { margin-top: 0 !important; }
	.hero .brand-row .logo { margin: 0 auto 10px !important; }
}

@media (max-width: 900px) {
	.hero .brand-row .logo {
		width: min(440px, 100%) !important;
		max-width: 100% !important;
	}
}

/* Pendant l’aperçu, le CTA survolé reste fixe devant le hero de destination. */
.hero-transition-anchor {
	position: absolute !important;
	z-index: 7 !important;
	margin: 0 !important;
	padding-inline: 10px !important;
	border-color: #d92f32 !important;
	color: #fff !important;
	cursor: default;
	pointer-events: none;
}
.hero-transition-anchor::before { transform: scaleY(1) !important; }
.hero-transition-anchor .hero-service-link__arrow {
	transform: translateX(3px) rotate(45deg);
	border-color: var(--spo-infinity-blue) !important;
	background: var(--spo-infinity-blue) !important;
	color: #fff !important;
}
.hero-transition-anchor .hero-service-link__arrow svg {
	transform: rotate(-45deg) translateX(2px);
}
.hero-transition-anchor { opacity: 0; transition: opacity .48s ease; }
.hero.is-previewing .hero-transition-anchor,
.page-hero.is-previewing .hero-transition-anchor { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.hero-transition-anchor { transition: none !important; }
}

/* Le bouton Menu reste visible au même point pendant l’aperçu du hero cible. */
.hero-menu-transition-anchor {
  position: absolute !important;
  z-index: 6 !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity .48s ease;
}
.hero.is-previewing .hero-menu-transition-anchor,
.page-hero.is-previewing .hero-menu-transition-anchor { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-menu-transition-anchor { transition: none !important; } }


/* Colonne des CTA et accès circulaires de contact, commune à tous les heros. */
.hero-service-column {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 10px;
  min-width: 0;
}
.hero-contact-tools { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:8px; width:100%; min-height:0; }
.hero-contact-item { position:relative; display:block; align-self:stretch; width:100%; min-width:0; min-height:46px; }
.hero-contact-button {
  position:absolute; z-index:2; top:0; left:0;
  flex:0 0 46px; width:46px; height:46px; display:grid; place-items:center; padding:0;
  border:1px solid rgba(255,255,255,.58); border-radius:50%; color:#fff; background:#087fc4;
  box-shadow:0 5px 16px rgba(0,0,0,.2); cursor:pointer;
  transition:filter .22s ease, box-shadow .22s ease;
}
.hero-contact-button--phone { background:#e76545; }
.hero-contact-item.is-open .hero-contact-button { left:0; }
.hero-contact-button svg { width:21px; height:21px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hero-contact-button:hover { transform:none; filter:brightness(1.08); box-shadow:0 8px 20px rgba(0,0,0,.25); }
.hero-contact-button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.hero-contact-output {
  box-sizing:border-box; position:absolute; z-index:1; top:0; left:0; right:auto; width:max-content; min-width:min(100%,230px); max-width:min(320px,100%); min-height:46px; display:flex; align-items:center;
  padding:8px 12px 8px 58px; border:1px solid rgba(255,255,255,.65); border-radius:24px;
  background:rgba(247,247,242,.97); color:#18232a; font-size:10px; font-weight:700;
  white-space:nowrap; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.2);
  opacity:0; clip-path:inset(0 100% 0 0); pointer-events:none;
  transition:opacity .16s ease, clip-path .34s cubic-bezier(.2,.75,.25,1);
}
.hero-contact-item.is-open .hero-contact-output { opacity:1; clip-path:inset(0 0 0 0); pointer-events:auto; }
.hero-contact-output[hidden] { display:none; }
.hero-contact-output a { display:block; max-width:100%; color:inherit; text-decoration:none; white-space:nowrap; letter-spacing:-.015em; opacity:0; transform:translateX(-10px); transition:opacity .2s ease .08s, transform .3s cubic-bezier(.2,.75,.25,1) .08s; }
.hero-contact-item.is-open .hero-contact-output a { opacity:1; transform:translateX(0); }
.hero-contact-output a:hover { text-decoration:underline; }
.hero-contact-output a:focus-visible { outline:2px solid #087fc4; outline-offset:2px; }
@media (max-width:1000px) { .hero-service-column { grid-column:1/-1; grid-row:2; } }
@media (max-width:720px) {
  .hero-service-column { grid-column:1; grid-row:3; }
  .hero-contact-output { font-size:10px; }
  .hero-contact-button { flex-basis:44px; width:44px; height:44px; }
  .hero-contact-item.is-open .hero-contact-button { left:0; }
}
@media (prefers-reduced-motion:reduce) { .hero-contact-button, .hero-contact-output, .hero-contact-output a { transition-duration:.01ms !important; } }

@media (max-width:720px) {
  .hero-contact-output a { transition-delay: 0s; }
  .hero-service-link__copy,
  .hero-bottom-action__label { min-width:0; overflow-wrap:anywhere; text-wrap:balance; }
}

/* Accueil mobile : conserver les deux accès directs visibles sans écraser le contenu. */
@media (max-width:720px) {
  header.hero .hero-inner {
    padding-top: max(66px, calc(54px + env(safe-area-inset-top)));
    padding-bottom: max(26px, env(safe-area-inset-bottom));
  }
  header.hero .hero-content { gap: 10px; }
  header.hero .hero-copy { gap: 8px; }
  header.hero .hero-copy .hero-title {
    font-size: clamp(29px, 7.5vw, 35px);
    line-height: 1.02;
    text-wrap: balance;
  }
  header.hero .hero-copy .hero-subtitle {
    font-size: 14px;
    line-height: 1.42;
  }
  header.hero .hero-copy .hero-lead {
    font-size: 18px;
    line-height: 1.15;
  }
  header.hero .hero-portrait {
    width: min(132px, 36vw);
    gap: 0;
  }
  /* En mobile, CTA et contacts repartent du même axe gauche que le texte. */
  header.hero .hero-service-column {
    grid-row: 2;
    justify-self: start;
    align-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
  }
  header.hero .hero-portrait { grid-row: 3; }
  header.hero .hero-portrait__name { display: none; }
  header.hero .hero-service-column { gap: 6px; }
  header.hero .hero-service-nav {
    width: 100%;
    max-width: none;
    gap: 6px;
  }
  header.hero .hero-contact-tools {
    width: 100%;
    align-items: stretch;
    gap: 5px;
  }
  header.hero .hero-contact-item { width: 100%; }
  /* Donne au courriel toute la largeur utile sur l’accueil mobile. */
  header.hero .hero-contact-output {
    width: min(100%, 360px);
    min-width: 0;
    max-width: 100%;
    padding-right: 14px;
    font-size: clamp(9px, 2.7vw, 10px);
    letter-spacing: -.025em;
  }
  header.hero .hero-bottom-action__label {
    overflow-wrap: normal;
    text-wrap: balance;
  }
}

@media (min-width:721px) {
  .hero-copy { min-height:var(--hero-copy-min-height); }
}
@media (min-width:721px) and (max-height:760px) {
  :root { --hero-copy-min-height:clamp(420px,64vh,500px); }
}
@media (max-width:720px) {
  .hero-copy { min-height:0; }
}


@media (min-width: 1001px) {
  .hero-inner.container,
  .page-hero-inner.satellite-hero-inner {
    box-sizing: border-box;
    width: min(calc(var(--container) + clamp(32px, 4vw, 56px)), calc(100% - 32px));
  }
  .hero-content { width: 100%; }
  .hero-service-column {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 4;
    width: var(--hero-service-nav-width);
    gap: 18px;
    transform: translateY(-50%);
  }
}
@media (min-width: 1201px) {
  .hero-service-column { transform: translate(18px, -50%); }
}

/* La source garde toute sa colonne de navigation et ses bulles pendant le fondu. */
.hero-service-area-transition-anchor {
  position: absolute !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity .48s ease;
}
.hero.is-previewing .hero-service-area-transition-anchor,
.page-hero.is-previewing .hero-service-area-transition-anchor { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-service-area-transition-anchor { transition: none !important; }
}

/* Une marge visible sépare les CTA des accès e-mail et téléphone. */
.hero-service-column { gap: 18px; }
@media (max-width: 720px) {
  header.hero .hero-service-column { gap: 18px !important; }
  header.hero .hero-service-nav { gap: 10px; }
  header.hero .hero-service-link { min-height: 46px; box-sizing: border-box; }
  header.hero .hero-service-link + .hero-service-link { margin-top: 0; }
}

.hero-service-column { gap: 24px !important; }
.hero-service-nav,
.satellite-service-nav,
.payment-service-nav {
  column-gap: 12px !important;
  row-gap: 12px !important;
}
.hero-service-link + .hero-service-link,
.satellite-service-nav .hero-service-link + .hero-service-link {
  margin-top: 0 !important;
}
.hero-contact-tools { gap: 12px !important; }

/* Accueil mobile : faire tenir les accès directs et le portrait dans le premier écran. */
@media (max-width: 720px) {
	header.hero .hero-inner {
		padding-top: max(72px, calc(60px + env(safe-area-inset-top))) !important;
		padding-bottom: max(20px, env(safe-area-inset-bottom));
	}
	header.hero .hero-content { gap: 8px; }
	header.hero .hero-copy { gap: 6px; }
	header.hero .hero-copy .brand-row .logo {
		width: min(360px, 86vw) !important;
		margin-bottom: 0 !important;
	}
	header.hero .brand-row .logo img { max-height: 70px !important; }
	header.hero .hero-copy .hero-title {
		font-size: clamp(28px, 6.8vw, 32px);
		line-height: 1.02;
	}
	header.hero .hero-copy .hero-subtitle {
		font-size: 13px;
		line-height: 1.32;
	}
	header.hero .hero-copy .hero-lead {
		font-size: 16px;
		line-height: 1.08;
	}
	header.hero .hero-service-nav { row-gap: 7px !important; }
	header.hero .hero-service-link { min-height: 44px; }
	header.hero .hero-contact-tools { gap: 8px !important; }
	header.hero .hero-contact-item { min-height: 44px; }
	header.hero .hero-portrait { width: min(124px, 32vw); }
}

/* Les CTA de l’accueil reprennent l’alignement gauche des pages satellites. */
header.hero .hero-service-link,
header.hero .hero-service-link__copy { text-align: left; }
header.hero .hero-service-link__copy { justify-items: start; }

/* La sortie du survol est un vrai fondu : les repères restent le temps de l’animation. */
.hero-transition-preview,
.hero-inner,
.page-hero-inner,
.hero-overlay { transition: opacity .65s ease-in-out !important; }
.hero-transition-anchor,
.hero-service-area-transition-anchor,
.hero-menu-transition-anchor {
	transition: opacity .65s ease-in-out !important;
}
.hero-transition-anchor--entering,
.hero-transition-anchor--leaving { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-transition-preview,
  .hero-inner,
  .page-hero-inner,
  .hero-overlay,
  .hero-transition-anchor,
  .hero-service-area-transition-anchor,
  .hero-menu-transition-anchor {
    transition: none !important;
  }
}