/*
 * contact/outil — transposition de `.outil`, `.coordonnees` et `.formulaire` (maquette Astro
 * ADJ). Habille le balisage de Fluent Forms (ff-*) et les accroches ivy-form-* documentees
 * dans le gabarit. Engagement 5 : aucun hexadecimal. Le haut reserve la barre flottante
 * (`--ivy-bar-offset`).
 */
.ivy-contact--outil {
	--ivy-page-gutter: clamp( 20px, 5vw, 64px );
	box-sizing: border-box;
	padding: calc( var( --ivy-bar-offset, 82px ) + clamp( 48px, 6vw, 80px ) ) max( var( --ivy-page-gutter ), calc( ( 100% - 1280px ) / 2 ) ) clamp( 80px, 9vw, 120px );
}

.ivy-contact--outil .ivy-contact__inner {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	grid-template-rows: auto 1fr;
	column-gap: clamp( 32px, 5vw, 72px );
	row-gap: 12px;
	align-items: start;
}
.ivy-contact--outil .ivy-contact__intro { display: grid; gap: 18px; }
.ivy-contact--outil .ivy-contact__form { grid-column: 2; grid-row: 1 / span 2; }
.ivy-contact--outil .ivy-contact__details { grid-column: 1; }
.ivy-contact--sans-formulaire .ivy-contact__inner { grid-template-columns: 1fr; }

.ivy-contact--outil .ivy-contact__eyebrow {
	display: block;
	margin-bottom: 14px;
	color: var( --ivy-eyebrow-color, var( --ivy-accent-text, var( --ivy-accent, currentcolor ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ivy-contact--outil .ivy-contact__title { margin: 0; color: var( --ivy-title-color, var( --ivy-accent, currentcolor ) ); font-family: var( --ivy-font-titre, inherit ); font-weight: 400; line-height: 1.12; }
.ivy-contact--outil .ivy-contact__text { color: var( --ivy-text-color, var( --ivy-ink, currentcolor ) ); }
.ivy-contact--outil .ivy-contact__text p { margin: 0; font-size: inherit; }

/* Les coordonnees : des lignes a filet, le repere au-dessus de la valeur. */
.ivy-contact--outil .ivy-contact__details { display: grid; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var( --ivy-line, currentcolor ); }
.ivy-contact--outil .ivy-contact__detail { display: grid; gap: 2px; margin: 0; padding: 16px 0; border-bottom: 1px solid var( --ivy-line, currentcolor ); }
.ivy-contact--outil .ivy-contact__detail-label {
	color: var( --ivy-detail_label-color, var( --ivy-accent-text, currentcolor ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.ivy-contact--outil .ivy-contact__detail-value {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var( --ivy-detail_value-color, var( --ivy-accent, currentcolor ) );
	font-family: var( --ivy-font-titre, inherit );
	font-size: var( --ivy-font-h4 );
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	-webkit-text-stroke: var( --ivy-title-stroke, 0 ) currentcolor;
	paint-order: stroke fill;
}
.ivy-contact--outil strong.ivy-contact__detail-value { min-height: 0; display: block; }
.ivy-contact--outil a.ivy-contact__detail-value:hover { color: var( --ivy-accent-text, currentcolor ); }

/* La carte du formulaire et ses etapes. */
.ivy-contact--outil .ivy-contact__form {
	display: grid;
	gap: 22px;
	padding: clamp( 24px, 3.4vw, 48px );
	border-radius: var( --ivy-radius-surface, 22px );
	background: var( --ivy-surface, rgb( 255 255 255 ) );
	color: var( --ivy-form-color, var( --ivy-ink, currentcolor ) );
}
.ivy-contact--outil .ivy-contact__steps { display: grid; gap: 22px; }
.ivy-contact--outil .ivy-contact__step-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; color: var( --ivy-step_label-color, var( --ivy-muted, currentcolor ) ); font-size: var( --ivy-font-body ); line-height: 1.6; }
.ivy-contact--outil .ivy-contact__progress { display: block; height: 3px; overflow: hidden; border-radius: calc( var( --ivy-radius-surface, 22px ) / 7 ); background: var( --ivy-line, currentcolor ); }
.ivy-contact--outil .ivy-contact__progress-bar { display: block; width: calc( var( --ivy-steps-progress, 0 ) * 100% ); height: 100%; background: var( --ivy-support, currentcolor ); transition: width 320ms cubic-bezier( .22, 1, .36, 1 ); }
.ivy-contact--outil .ivy-contact__form:not( .is-stepped ) :is( .ivy-contact__steps, .ivy-contact__step-actions ) { display: none; }
.ivy-contact--outil .ivy-contact__form.is-stepped form fieldset > :not( .is-current ):not( legend ) { display: none; }
.ivy-contact--outil .ivy-contact__form.is-first .ivy-contact__step-prev,
.ivy-contact--outil .ivy-contact__form.is-last .ivy-contact__step-next { display: none; }

/*
 * Etape par etape, le panneau aplatit le formulaire (display: contents) pour que
 * « Retour » et le bouton d'envoi de l'extension se rangent sur une meme ligne.
 */
.ivy-contact--outil .ivy-contact__form.is-stepped { display: flex; flex-wrap: wrap; gap: 16px 12px; }
.ivy-contact--outil .ivy-contact__form.is-stepped .ivy-contact__steps { margin-bottom: 6px; }
.ivy-contact--outil .ivy-contact__form.is-stepped > *,
.ivy-contact--outil .ivy-contact__form.is-stepped form fieldset > * { flex: 1 0 100%; }
.ivy-contact--outil .ivy-contact__form.is-stepped :is( .fluentform, form, form fieldset ) { display: contents; }
.ivy-contact--outil .ivy-contact__step-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.ivy-contact--outil .ivy-contact__form.is-stepped .ivy-contact__step-actions { flex: 1 1 0; order: 1; margin-top: 6px; }
.ivy-contact--outil .ivy-contact__form.is-stepped form fieldset > .ff_submit_btn_wrapper { flex: 0 0 auto; order: 2; margin-top: 6px; }
.ivy-contact--outil .ivy-contact__form.is-stepped .ff-el-group { margin-bottom: 0; }
/* Le titre lu par les lecteurs d'ecran (legend) sort du flux : sinon il fait une ligne de plus dans la colonne aplatie. */
.ivy-contact--outil .ivy-contact__form.is-stepped form fieldset > legend { position: absolute; }
/* Retour a gauche, Continuer ou l'envoi a droite ; sans Retour (premiere etape), le bouton reste a droite. */
.ivy-contact--outil .ivy-contact__step-next { margin-left: auto; }
.ivy-contact--outil .ivy-contact__form.is-stepped form fieldset > .ff_submit_btn_wrapper { margin-left: auto; }

/* Les boutons : capsule pleine (Continuer, envoi), capsule au trait (Retour). */
.ivy-contact--outil :is( .ivy-contact__step-next, .ivy-contact__step-prev ),
.ivy-contact--outil .ivy-contact__form .ff-btn.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var( --ivy-radius-action, 999px );
	background: var( --ivy-accent, currentcolor );
	color: var( --ivy-on-accent, rgb( 255 255 255 ) );
	font-family: inherit;
	font-size: var( --ivy-font-body );
	font-weight: 500;
	line-height: 1.6;
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms cubic-bezier( .22, 1, .36, 1 );
}
.ivy-contact--outil .ivy-contact__step-next:hover,
.ivy-contact--outil .ivy-contact__form .ff-btn.ff-btn-submit:hover { background: var( --ivy-line-accent, currentcolor ); }
.ivy-contact--outil :is( .ivy-contact__step-next, .ivy-contact__step-prev, .ff-btn-submit ):active { transform: scale( .98 ); }
.ivy-contact--outil .ivy-contact__step-prev { border: 1px solid var( --ivy-line, currentcolor ); background: transparent; color: var( --ivy-accent, currentcolor ); }
.ivy-contact--outil .ivy-contact__step-prev:hover { background: transparent; }
.ivy-contact--outil :is( .ivy-contact__step-next, .ivy-contact__step-prev, .ff-btn-submit ):focus-visible { outline: 2px solid var( --ivy-accent, currentcolor ); outline-offset: 3px; }

/* Le formulaire de l'extension. */
.ivy-contact--outil .ivy-contact__form .ff-el-group { margin-bottom: 16px; }
.ivy-contact--outil .ivy-contact__form .ff_submit_btn_wrapper { margin: 0; }
.ivy-contact--outil .ivy-contact__form .ff-el-input--label { margin-bottom: 6px; padding: 0; }
.ivy-contact--outil .ivy-contact__form .ff-el-input--label label { display: block; color: var( --ivy-field_label-color, var( --ivy-accent, currentcolor ) ); font-size: var( --ivy-font-body ); font-weight: 600; line-height: 1.6; }
.ivy-contact--outil .ivy-contact__form .ivy-form-question > .ff-el-input--label { margin-bottom: 16px; }
.ivy-contact--outil .ivy-contact__form .ivy-form-question > .ff-el-input--label > * {
	display: block;
	margin: 0;
	color: var( --ivy-question-color, var( --ivy-accent, currentcolor ) );
	font-family: var( --ivy-font-titre, inherit );
	font-size: var( --ivy-font-h3 );
	font-weight: 400;
	line-height: 1.25;
	-webkit-text-stroke: var( --ivy-title-stroke, 0 ) currentcolor;
	paint-order: stroke fill;
}
/* Un titre de formulaire sans champ derriere (« Ecrire a… ») : l'ecart de la maquette est celui de la grille du formulaire (22 px), pas celui d'une question d'etape. */
.ivy-contact--outil .ivy-contact__form .ivy-form-title > .ff-el-input--label { margin-bottom: 6px; }
.ivy-contact--outil .ivy-contact__form .ivy-form-title > .ff-el-input--label > * { line-height: 1.12; }
.ivy-contact--outil .ivy-contact__form a { color: inherit; }
.ivy-contact--outil .ivy-contact__form .ivy-form-help { margin: 0 0 16px; color: var( --ivy-muted, currentcolor ); }
.ivy-contact--outil .ivy-contact__form .ivy-form-sr-label > .ff-el-input--label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap; }

.ivy-contact--outil .ivy-contact__form :is( .ivy-form-tiles, .ivy-form-list ) .ff-el-input--content { display: grid; gap: 10px; }
.ivy-contact--outil .ivy-contact__form .ivy-form-tiles .ff-el-input--content { grid-template-columns: repeat( 2, 1fr ); }
.ivy-contact--outil .ivy-contact__form .ivy-form-list-2 .ff-el-input--content { grid-template-columns: 1fr 1fr; }
.ivy-contact--outil .ivy-contact__form :is( .ivy-form-tiles, .ivy-form-list ) .ff-el-form-check { display: flex; margin: 0; }
.ivy-contact--outil .ivy-contact__form :is( .ivy-form-tiles, .ivy-form-list ) .ff-el-form-check-label {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var( --ivy-line, currentcolor );
	border-radius: calc( var( --ivy-radius-surface, 22px ) * 14 / 22 );
	background: var( --ivy-surface, rgb( 255 255 255 ) );
	color: var( --ivy-choice-color, var( --ivy-accent, currentcolor ) );
	font-size: var( --ivy-font-body );
	font-weight: 600;
	line-height: 1.6;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.ivy-contact--outil .ivy-contact__form .ivy-form-tiles .ff-el-form-check-label:has( input:checked ),
.ivy-contact--outil .ivy-contact__form .ivy-form-list .ff-el-form-check-label:has( input:checked ) { border-color: var( --ivy-accent, currentcolor ); background: var( --ivy-surface-soft, transparent ); }
/* Le rond de la tuile : la case native est remplacee, bordure pleine quand elle est cochee. */
.ivy-contact--outil .ivy-contact__form :is( .ivy-form-tiles, .ivy-form-list ) .ff-el-form-check-input {
	appearance: none;
	flex: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var( --ivy-line, currentcolor );
	border-radius: 50%;
	background: var( --ivy-surface, rgb( 255 255 255 ) );
}
.ivy-contact--outil .ivy-contact__form :is( .ivy-form-tiles, .ivy-form-list ) .ff-el-form-check-input:checked { border: 5px solid var( --ivy-accent, currentcolor ); }
.ivy-contact--outil .ivy-contact__form :is( .ivy-form-tiles, .ivy-form-list ) .ff-el-form-check-label:has( input:focus-visible ) { outline: 2px solid var( --ivy-accent, currentcolor ); outline-offset: 2px; }
.ivy-contact--outil .ivy-contact__form .ff-el-group.is-invalid .ff-el-form-check-label,
.ivy-contact--outil .ivy-contact__form .ff-el-group.is-invalid .ff-el-form-control { border-color: var( --ivy-danger, currentcolor ); }

.ivy-contact--outil .ivy-contact__form .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var( --ivy-line, currentcolor );
	border-radius: calc( var( --ivy-radius-surface, 22px ) * 14 / 22 );
	background: var( --ivy-surface, rgb( 255 255 255 ) );
	color: var( --ivy-accent, currentcolor );
	font: inherit;
	line-height: 1.5;
}
.ivy-contact--outil .ivy-contact__form textarea.ff-el-form-control { min-height: 140px; resize: vertical; }
.ivy-contact--outil .ivy-contact__form .ff-el-form-control:focus { border-color: var( --ivy-support, currentcolor ); box-shadow: 0 0 0 3px color-mix( in srgb, var( --ivy-support, currentcolor ) 18%, transparent ); outline: none; }
.ivy-contact--outil .ivy-contact__form .ff-t-container { gap: 16px; }
.ivy-contact--outil .ivy-contact__form .ff-el-form-check-label:has( .ff_gdpr_field ),
.ivy-contact--outil .ivy-contact__form .ff-el-tc { display: flex; gap: 12px; align-items: flex-start; color: var( --ivy-consent-color, var( --ivy-muted, currentcolor ) ); font-size: var( --ivy-font-body ); line-height: 1.6; }
.ivy-contact--outil .ivy-contact__form :is( input.ff_gdpr_field, .ff-el-tc input ) { width: 20px; height: 20px; top: 0; margin: 2px 0 0; accent-color: var( --ivy-accent, currentcolor ); }

@media ( max-width: 960px ) {
	.ivy-contact--outil .ivy-contact__inner { grid-template-columns: 1fr; row-gap: 20px; }
	.ivy-contact--outil .ivy-contact__form { grid-column: auto; grid-row: auto; margin-top: 20px; }
}
@media ( max-width: 560px ) {
	.ivy-contact--outil .ivy-contact__form .ivy-form-tiles .ff-el-input--content,
	.ivy-contact--outil .ivy-contact__form .ivy-form-list-2 .ff-el-input--content { grid-template-columns: 1fr; }
	.ivy-contact--outil .ivy-contact__step-actions .ivy-contact__step-button { flex: 1; }
}
@media ( prefers-reduced-motion: reduce ) {
	.ivy-contact--outil .ivy-contact__progress-bar { transition: none; }
}