/*
 * contact/estimation — transposition de `.contact` (maquette Les Jolies Clés, page Contact) : grille 5fr / 7fr, explications
 * collées à gauche, carte de formulaire à droite (teinte opposée de la section). Le formulaire est celui de Fluent Forms :
 * on l'habille par les classes `ivy-form-…` que le semis du formulaire pose sur ses champs (légendes de groupes, lignes
 * oui/non, trois listes sur une ligne, cases sur deux colonnes, consentement). Engagement 5 : aucun hexadécimal, valeurs de
 * repli comprises (les glyphes en `data:` écrivent leurs couleurs en rgb()).
 */
.ivy-contact--estimation { padding: clamp( 88px, 10vw, 144px ) max( clamp( 20px, 5vw, 64px ), calc( ( 100% - 1240px ) / 2 ) ); }
.ivy-contact--estimation .ivy-contact__inner { display: grid; grid-template-columns: 5fr 7fr; gap: clamp( 40px, 6vw, 96px ); align-items: start; }

/* --- Explications ------------------------------------------------------------------------------------------------ */
.ivy-contact--estimation .ivy-contact__aside { position: sticky; top: calc( var( --ivy-navbar-h, 88px ) + 40px ); display: grid; gap: 40px; }
.ivy-contact--estimation .ivy-contact__block + .ivy-contact__block { padding-top: 40px; border-top: var( --ivy-block-border-border, 1px solid var( --ivy-line, rgb( 184 151 90 / 45% ) ) ); }
.ivy-contact--estimation .ivy-contact__block-label { display: block; margin-bottom: 12px; color: var( --ivy-block_label-color, var( --ivy-gold-text, rgb( 138 106 51 ) ) ); font-size: var( --ivy-font-label ); font-weight: 600; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; }
.ivy-contact--estimation .ivy-contact__block-title { margin: 0 0 12px; color: var( --ivy-block_title-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); font-weight: 600; line-height: 1.3; }
.ivy-contact--estimation .ivy-contact__block-copy { margin: 0; color: var( --ivy-block_text-color, var( --ivy-muted, rgb( 107 98 82 ) ) ); }
.ivy-contact--estimation .ivy-contact__block-copy + .ivy-contact__block-copy { margin-top: 1em; }
.ivy-contact--estimation .ivy-contact__block-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.ivy-contact--estimation .ivy-contact__block-copy + .ivy-contact__block-list { margin-top: 22px; }
.ivy-contact--estimation .ivy-contact__block-list .ivy-contact__block-item { position: relative; padding-left: 20px; line-height: 1.6; color: var( --ivy-block_item-color, var( --ivy-muted, rgb( 107 98 82 ) ) ); }
.ivy-contact--estimation .ivy-contact__block-list .ivy-contact__block-item::before { content: ''; position: absolute; left: 2px; top: .68em; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var( --ivy-accent, rgb( 184 151 90 ) ); }
.ivy-contact--estimation .ivy-contact__block-note { margin: 16px 0 0; color: var( --ivy-block_note-color, var( --ivy-muted, rgb( 107 98 82 ) ) ); }
.ivy-contact--estimation .ivy-contact__steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ivy-contact--estimation .ivy-contact__step { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; }
.ivy-contact--estimation .ivy-contact__step-number { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var( --ivy-surface, rgb( 251 248 242 ) ); color: var( --ivy-gold-text, rgb( 138 106 51 ) ); font-family: var( --ivy-font-titre, inherit ); font-size: calc( var( --ivy-font-body ) * 1.1 ); line-height: 1; }
.ivy-contact--estimation .ivy-contact__step .ivy-contact__block-item { margin: 0; padding-top: 4px; color: var( --ivy-block_item-color, var( --ivy-muted, rgb( 107 98 82 ) ) ); }

/* --- La carte du formulaire ---------------------------------------------------------------------------------------- */
.ivy-contact--estimation .ivy-contact__card { padding: clamp( 28px, 4vw, 56px ); background: var( --ivy-card-background-color, var( --ivy-surface, rgb( 251 248 242 ) ) ); border-radius: var( --ivy-radius-surface, 4px ); }
.ivy-contact--estimation .ivy-contact__note { margin: 14px 0 0; color: var( --ivy-note-color, var( --ivy-muted, rgb( 107 98 82 ) ) ); line-height: 1.6; }
.ivy-contact--estimation .ivy-contact__form { color: var( --ivy-form-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); }
.ivy-contact--estimation .ivy-contact__form .frm-fluent-form { display: block; }
.ivy-contact--estimation .ivy-contact__form .ff-el-group { margin: 0 0 18px; }
.ivy-contact--estimation .ivy-contact__form .ff-el-group:last-child { margin-bottom: 0; }
.ivy-contact--estimation .ivy-contact__form .ff-el-group::before,
.ivy-contact--estimation .ivy-contact__form .ff-el-group::after { content: none; }

/* Légendes de groupes : un filet et 36 px d'air avant le deuxième et le troisième. */
.ivy-contact--estimation .ivy-contact__form .ivy-form-legende { margin: 0; padding-bottom: 4px; font-size: calc( var( --ivy-font-label ) * 14 / 13 ); color: var( --ivy-gold-text, rgb( 138 106 51 ) ); font-weight: 600; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-aide { margin: 12px 0 0; color: var( --ivy-muted, rgb( 107 98 82 ) ); font-size: calc( var( --ivy-font-body ) * 17 / 16 ); line-height: 1.7; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-groupe-debut ~ .ivy-form-groupe-debut { margin-top: 40px; padding-top: 36px; border-top: 1px solid var( --ivy-line, rgb( 184 151 90 / 45% ) ); }
.ivy-contact--estimation .ivy-contact__form .ivy-form-groupe-debut { margin-bottom: 18px; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-sous-groupe .ff-el-input--label label { margin-bottom: 12px; }

/* Libellés et champs. */
.ivy-contact--estimation .ivy-contact__form .ff-el-input--label label { display: block; margin: 0 0 8px; color: var( --ivy-ink, rgb( 58 50 38 ) ); font-size: calc( var( --ivy-font-body ) * .95 ); font-weight: 500; line-height: 1.5; }
.ivy-contact--estimation .ivy-contact__form .ff-el-is-required.asterisk-right label::after { content: ' *'; color: var( --ivy-gold-text, rgb( 138 106 51 ) ); }
.ivy-contact--estimation .ivy-contact__form .ff-el-form-control { display: block; box-sizing: border-box; inline-size: 100%; min-block-size: 52px; padding: 12px 16px; background: var( --ivy-surface-sunk, rgb( 238 230 216 ) ); border: 1px solid transparent; border-radius: var( --ivy-radius-surface, 4px ); box-shadow: none; color: var( --ivy-ink, rgb( 58 50 38 ) ); font: inherit; font-size: var( --ivy-font-body ); line-height: 1.5; transition: border-color 200ms cubic-bezier( .2, .7, .2, 1 ), background-color 200ms cubic-bezier( .2, .7, .2, 1 ); appearance: none; }
.ivy-contact--estimation .ivy-contact__form select.ff-el-form-control { padding-right: 40px; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(184,160,106)' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E" ); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.ivy-contact--estimation .ivy-contact__form textarea.ff-el-form-control { resize: vertical; }
.ivy-contact--estimation .ivy-contact__form .ff-el-form-control::placeholder { color: var( --ivy-muted, rgb( 107 98 82 ) ); opacity: .7; }
.ivy-contact--estimation .ivy-contact__form .ff-el-form-control:focus { outline: none; border-color: var( --ivy-accent, rgb( 184 151 90 ) ); background: var( --ivy-surface, rgb( 251 248 242 ) ); }
.ivy-contact--estimation .ivy-contact__form .ff-el-is-error .ff-el-form-control { border-color: var( --ivy-danger, rgb( 160 83 58 ) ); }
.ivy-contact--estimation .ivy-contact__form .error.text-danger { margin-top: 6px; color: var( --ivy-danger, rgb( 160 83 58 ) ); font-size: calc( var( --ivy-font-body ) * .9 ); line-height: 1.5; }

/* Trois listes sur une ligne (type, chambres, couchages). */
.ivy-contact--estimation .ivy-contact__form .ff-t-container.ivy-form-trois { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 14px; margin: 0 0 18px; }
.ivy-contact--estimation .ivy-contact__form .ff-t-container.ivy-form-trois > .ff-t-cell { inline-size: auto; padding: 0; }
.ivy-contact--estimation .ivy-contact__form .ff-t-container.ivy-form-trois .ff-el-group { margin-bottom: 0; }

/* Pastilles oui / non et choix uniques. */
.ivy-contact--estimation .ivy-contact__form .ff-el-form-check { display: block; margin: 0; padding: 0; }
.ivy-contact--estimation .ivy-contact__form .ff-el-input--label { display: block; margin: 0; padding: 0; }
.ivy-contact--estimation .ivy-contact__form .ff-el-input--content { display: block; }
.ivy-contact--estimation .ivy-contact__form .ff-el-form-check .ff-el-form-check-label { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; }
.ivy-contact--estimation .ivy-contact__form .ff-el-form-check .ff-el-form-check-input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-ouinon .ff-el-input--content,
.ivy-contact--estimation .ivy-contact__form .ivy-form-sous-groupe:not( .ivy-form-cases ) .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 8px; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-ouinon.ff-el-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 0; }
.ivy-contact--estimation .ivy-contact__form .ff-t-container.ivy-form-trois + .ivy-form-ouinon.ff-el-group { margin-top: 24px; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-ouinon .ff-el-input--label label { margin: 0; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-ouinon .ff-el-input--label { flex: 1 1 auto; min-inline-size: 0; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-ouinon .ff-el-input--content { flex: none; flex-wrap: nowrap; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-ouinon .ff-el-input--label { margin: 0; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-ouinon .ff-el-form-check-label span,
.ivy-contact--estimation .ivy-contact__form .ivy-form-sous-groupe:not( .ivy-form-cases ) .ff-el-form-check-label span { display: grid; place-items: center; min-inline-size: 64px; min-block-size: 44px; padding: 0 16px; border: 1px solid var( --ivy-line, rgb( 184 151 90 / 45% ) ); border-radius: var( --ivy-radius-surface, 4px ); font-size: calc( var( --ivy-font-body ) * 17 / 16 ); line-height: 1.5; transition: background-color 200ms cubic-bezier( .2, .7, .2, 1 ), border-color 200ms cubic-bezier( .2, .7, .2, 1 ); }
.ivy-contact--estimation .ivy-contact__form .ivy-form-ouinon .ff-el-form-check-input:checked + span,
.ivy-contact--estimation .ivy-contact__form .ivy-form-sous-groupe:not( .ivy-form-cases ) .ff-el-form-check-input:checked + span { background: var( --ivy-accent, rgb( 184 151 90 ) ); border-color: var( --ivy-accent, rgb( 184 151 90 ) ); color: var( --ivy-on-accent, rgb( 37 29 23 ) ); }
.ivy-contact--estimation .ivy-contact__form .ivy-form-annonce { margin-top: 14px; }

/* Cases à cocher sur deux colonnes. */
.ivy-contact--estimation .ivy-contact__form .ivy-form-cases .ff-el-input--content { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px 20px; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-cases .ff-el-form-check-label span { position: relative; display: block; padding: 10px 0 10px 34px; font-size: calc( var( --ivy-font-body ) * 17 / 16 ); line-height: 1.5; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-cases .ff-el-form-check-label span::before { content: ''; position: absolute; left: 0; top: 11px; inline-size: 20px; block-size: 20px; border: 1px solid var( --ivy-accent, rgb( 184 151 90 ) ); border-radius: var( --ivy-radius-action, 3px ); background: var( --ivy-surface, rgb( 251 248 242 ) ) center / 14px no-repeat; transition: background-color 200ms cubic-bezier( .2, .7, .2, 1 ); }
.ivy-contact--estimation .ivy-contact__form .ivy-form-cases .ff-el-form-check-input:checked + span::before { background-color: var( --ivy-accent, rgb( 184 151 90 ) ); background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(37,29,23)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E" ); }
.ivy-contact--estimation .ivy-contact__form .ivy-form-cases-radio .ff-el-form-check-label span::before { border-radius: 50%; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-cases-radio .ff-el-form-check-input:checked + span::before { background-image: none; box-shadow: inset 0 0 0 4px var( --ivy-surface, rgb( 251 248 242 ) ); }
.ivy-contact--estimation .ivy-contact__form .ff-el-form-check-input:focus-visible + span { outline: 2px solid var( --ivy-ink, rgb( 58 50 38 ) ); outline-offset: 2px; }

/* Consentement et envoi. */
.ivy-contact--estimation .ivy-contact__form .ivy-form-consentement { margin-top: 40px; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-consentement .ff-el-form-check .ff_tc_label { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-consentement .ff_tc_checkbox { position: absolute; left: 0; top: 11px; inline-size: 20px; block-size: 20px; border: 1px solid var( --ivy-accent, rgb( 184 151 90 ) ); border-radius: var( --ivy-radius-action, 3px ); background: var( --ivy-surface, rgb( 251 248 242 ) ) center / 14px no-repeat; transition: background-color 200ms cubic-bezier( .2, .7, .2, 1 ); }
.ivy-contact--estimation .ivy-contact__form .ivy-form-consentement .ff_tc_checkbox:has( input:checked ) { background-color: var( --ivy-accent, rgb( 184 151 90 ) ); background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(37,29,23)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E" ); }
.ivy-contact--estimation .ivy-contact__form .ivy-form-consentement .ff_tc_checkbox .ff-el-form-check-input { inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-consentement .ff_t_c { padding: 10px 0 10px 34px; color: var( --ivy-muted, rgb( 107 98 82 ) ); font-size: calc( var( --ivy-font-body ) * 17 / 16 ); line-height: 1.5; }
.ivy-contact--estimation .ivy-contact__form .ivy-form-consentement a { color: inherit; text-decoration: underline; }
.ivy-contact--estimation .ivy-contact__form .ff-el-form-check .ff-el-form-check-label { color: var( --ivy-muted, rgb( 107 98 82 ) ); }
.ivy-contact--estimation .ivy-contact__form .ivy-form-envoi { margin: 40px 0 0; }
.ivy-contact--estimation .ivy-contact__form .ff-btn-submit { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-block-size: 52px; padding: 14px 30px; background: var( --ivy-accent, rgb( 184 151 90 ) ); border: 1px solid var( --ivy-accent, rgb( 184 151 90 ) ); border-radius: var( --ivy-radius-action, 4px ); box-shadow: none; color: var( --ivy-on-accent, rgb( 37 29 23 ) ); font: inherit; font-size: calc( var( --ivy-font-body ) * .875 ); font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color 250ms cubic-bezier( .2, .7, .2, 1 ), border-color 250ms cubic-bezier( .2, .7, .2, 1 ); }
.ivy-contact--estimation .ivy-contact__form .ff-btn-submit:hover,
.ivy-contact--estimation .ivy-contact__form .ff-btn-submit:focus { background: var( --ivy-gold-dark, rgb( 163 132 74 ) ); border-color: var( --ivy-gold-dark, rgb( 163 132 74 ) ); color: var( --ivy-on-accent, rgb( 37 29 23 ) ); }
.ivy-contact--estimation .ivy-contact__form .ff-message-success { display: grid; justify-items: center; gap: 20px; margin: 0; padding: 48px 8px; border: 0; background: transparent; color: var( --ivy-ink, rgb( 58 50 38 ) ); font-family: var( --ivy-font-titre, inherit ); font-size: var( --ivy-font-lead ); line-height: 1.5; text-align: center; }

@media ( max-width: 899px ) {
	.ivy-contact--estimation .ivy-contact__inner { grid-template-columns: minmax( 0, 1fr ); }
	.ivy-contact--estimation .ivy-contact__aside { position: static; order: 2; }
	.ivy-contact--estimation .ivy-contact__card { order: 1; }
}
@media ( max-width: 599px ) {
	.ivy-contact--estimation .ivy-contact__form .ff-t-container.ivy-form-trois,
	.ivy-contact--estimation .ivy-contact__form .ivy-form-cases .ff-el-input--content { grid-template-columns: minmax( 0, 1fr ); }
	.ivy-contact--estimation .ivy-contact__card { margin-inline: calc( clamp( 20px, 5vw, 64px ) * -.5 ); }
	.ivy-contact--estimation .ivy-contact__form .ff-btn-submit { inline-size: 100%; letter-spacing: .08em; padding-inline: 16px; }
}
