/*
 * contact/escale — la carte sombre porte la suite et le contact direct ; elle
 * colle pendant qu'on remplit le formulaire. Aplat : fond plein, sans image.
 */

.ivy-contact--escale {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding: clamp( 56px, 8vw, 120px ) clamp( 20px, 4vw, 40px );
	color: var( --ivy-ink, rgb( 17 17 17 ) );
}

.ivy-contact--escale .ivy-contact__header { display: grid; gap: 18px; margin-bottom: clamp( 32px, 5vw, 56px ); }

.ivy-contact--escale .ivy-contact__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var( --ivy-eyebrow-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ivy-contact--escale .ivy-contact__icon { display: inline-flex; flex: none; align-items: center; color: var( --ivy-icon-color, var( --ivy-accent, rgb( 17 17 17 ) ) ); }
.ivy-contact--escale .ivy-contact__icon :is( svg, i ) { flex: none; width: 14px; height: 14px; font-size: 14px; }

.ivy-contact--escale .ivy-contact__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); }

.ivy-contact--escale .ivy-contact__grid {
	display: grid;
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
	align-items: start;
	gap: clamp( 24px, 4vw, 56px );
}

.ivy-contact--escale .ivy-contact__side {
	position: sticky;
	top: 108px;
	display: grid;
	gap: 28px;
	padding: clamp( 28px, 3.2vw, 44px );
	border-radius: var( --ivy-radius-surface, 0 );
	background: var( --ivy-panel-background-color, var( --ivy-deep, rgb( 17 17 17 ) ) );
	color: var( --ivy-on-deep-muted, rgb( 220 220 220 ) );
}

.ivy-contact--escale .ivy-contact__side-heading {
	margin: 0;
	font-weight: 400;
	color: var( --ivy-panel_heading-color, var( --ivy-on-deep, rgb( 255 255 255 ) ) );
	font-family: var( --e-global-typography-primary-font-family, inherit );
}

.ivy-contact--escale .ivy-contact__steps { position: relative; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: ivy-etape; }

/* Le fil pointille qui relie les reperes. */
.ivy-contact--escale .ivy-contact__steps::before {
	content: "";
	position: absolute;
	top: 18px;
	bottom: 18px;
	left: 17px;
	border-left: 1px dashed color-mix( in srgb, var( --ivy-on-deep, rgb( 255 255 255 ) ) 40%, transparent );
}

.ivy-contact--escale .ivy-contact__step { position: relative; display: grid; grid-template-columns: 36px minmax( 0, 1fr ); gap: 16px; }

.ivy-contact--escale .ivy-contact__mark {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var( --ivy-item_marker-background-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
	color: var( --ivy-item_marker-color, var( --ivy-on-accent, rgb( 255 255 255 ) ) );
}

.ivy-contact--escale .ivy-contact__mark :is( svg, i ) { width: 15px; height: 15px; }

.ivy-contact--escale .ivy-contact__step-title {
	margin: 6px 0 0;
	color: var( --ivy-item_title-color, var( --ivy-on-deep, rgb( 255 255 255 ) ) );
	font-weight: 600;
	line-height: 1.35;
}

.ivy-contact--escale .ivy-contact__step { counter-increment: ivy-etape; }
/* Le numero de l'etape, dessine : le titre ne porte que son texte. */
.ivy-contact--escale .ivy-contact__step-title::before { content: counter( ivy-etape ) ". "; font-variant-numeric: tabular-nums; }
.ivy-contact--escale .ivy-contact__step-text { margin: 6px 0 0; color: var( --ivy-item_text-color, var( --ivy-on-deep-muted, rgb( 220 220 220 ) ) ); }

.ivy-contact--escale .ivy-contact__direct { display: grid; gap: 8px; padding-top: 24px; border-top: 1px solid color-mix( in srgb, var( --ivy-on-deep, rgb( 255 255 255 ) ) 18%, transparent ); }
.ivy-contact--escale .ivy-contact__reassurance { margin: 0; color: var( --ivy-reassurance-color, var( --ivy-on-deep-muted, rgb( 220 220 220 ) ) ); }
.ivy-contact--escale .ivy-contact__details { display: grid; gap: 4px; font-style: normal; color: var( --ivy-contact-color, var( --ivy-on-deep, rgb( 255 255 255 ) ) ); }
.ivy-contact--escale .ivy-contact__details a { color: inherit; text-decoration: none; }
.ivy-contact--escale .ivy-contact__phone { font-family: var( --e-global-typography-primary-font-family, inherit ); font-size: var( --ivy-font-lead ); font-variant-numeric: tabular-nums lining-nums; }
.ivy-contact--escale .ivy-contact__text { color: var( --ivy-text-color, var( --ivy-on-deep-muted, rgb( 220 220 220 ) ) ); font-size: var( --ivy-font-label ); }
.ivy-contact--escale .ivy-contact__text a { color: var( --ivy-on-deep, rgb( 255 255 255 ) ); }
.ivy-contact--escale .ivy-contact__text > :first-child { margin-top: 0; }
.ivy-contact--escale .ivy-contact__text > :last-child { margin-bottom: 0; }

.ivy-contact--escale .ivy-contact__form {
	padding: clamp( 24px, 3vw, 40px );
	border-radius: var( --ivy-radius-surface, 0 );
	background: var( --ivy-form-background-color, var( --ivy-surface, rgb( 255 255 255 ) ) );
	color: var( --ivy-form-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
}

@media ( max-width: 1000px ) {
	.ivy-contact--escale .ivy-contact__grid { grid-template-columns: minmax( 0, 1fr ); }
	.ivy-contact--escale .ivy-contact__side { position: static; order: 2; }
}