/*
 * contact/guide — porte depuis GuideGratuit.astro de la maquette de Chez Loeli. Engagement 5 : aucun hexadecimal.
 */
.ivy-contact--guide { padding-block: clamp( 72px, 9vw, 120px ); background-color: var( --ivy-surface-soft ); background-image: var( --ivy-grain, none ); color: var( --ivy-ink ); }
.ivy-contact--guide .ivy-contact__card { display: grid; gap: 20px 28px; align-items: center; padding: clamp( 24px, 3.5vw, 40px ); border: 1px solid var( --ivy-line ); border-radius: var( --ivy-radius-surface, 18px ); background-color: var( --ivy-card-background-color, var( --ivy-surface ) ); width: min( 100% - 2 * clamp( 20px, 5vw, 56px ), 1200px ); margin-inline: auto; }
@media ( min-width: 900px ) { .ivy-contact--guide .ivy-contact__card { grid-template-columns: auto minmax( 0, 1.2fr ) minmax( 0, 1fr ); } }
.ivy-contact--guide .ivy-contact__disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background-color: var( --ivy-icon-background-color, var( --ivy-surface-soft ) ); color: var( --ivy-icon-color, var( --ivy-ink ) ); }
.ivy-contact--guide .ivy-contact__disc :is( svg, i ) { display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ivy-contact--guide .ivy-contact__guide-title { margin: 0 0 6px; color: var( --ivy-title-color, var( --ivy-ink ) ); }
.ivy-contact--guide .ivy-contact__guide-text { color: var( --ivy-text-color, var( --ivy-muted ) ); }
.ivy-contact--guide .ivy-contact__guide-text > * { margin: 0; font-size: var( --ivy-font-body ); }
.ivy-contact--guide .ivy-contact__form { min-width: 0; }

/* --- Le formulaire FluentForm, habille (les classes ff-* sont celles de l'extension) --- */
.ivy-contact--guide .fluentform .ff-el-group { margin: 0; }
.ivy-contact--guide .fluentform fieldset { display: grid !important; gap: 12px; }
.ivy-contact--guide .fluentform .ff-t-container { display: flex; flex-wrap: wrap; gap: 12px; }
.ivy-contact--guide .fluentform .ff-t-container .ff-t-cell { flex: 1 1 14rem !important; min-width: 0; padding: 0 !important; }
.ivy-contact--guide .fluentform .ff-el-input--label { display: block; margin: 0 0 8px; padding: 0; font-size: var( --ivy-font-h5 ); line-height: 1.65; }
.ivy-contact--guide .fluentform .ff-el-group { padding: 0; }
.ivy-contact--guide .fluentform .ff-el-input--label label { display: block; margin: 0; padding: 0; color: var( --ivy-ink ); font-size: var( --ivy-font-h5 ); font-weight: 600; line-height: 1.65; }
.ivy-contact--guide .fluentform .ff-el-input--label.ff-el-is-required label::after { content: 'obligatoire'; margin-inline-start: 6px; color: var( --ivy-muted ); font-size: var( --ivy-font-label ); font-weight: 400; }
.ivy-contact--guide .fluentform .ff-el-input--label:not( .ff-el-is-required ) label::after { content: 'facultatif'; margin-inline-start: 6px; color: var( --ivy-muted ); font-size: var( --ivy-font-label ); font-weight: 400; }
.ivy-contact--guide .fluentform .ff-el-input--label.ff-el-is-required label::before { display: none; }
.ivy-contact--guide .fluentform .ivy-form-sr-label .ff-el-input--label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); }
.ivy-contact--guide .fluentform .ff-el-form-control { box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var( --ivy-muted ); border-radius: calc( var( --ivy-radius-surface, 18px ) * 12 / 18 ); background-color: rgb( 255 255 255 ); color: var( --ivy-ink ); font: inherit; box-shadow: none; }
.ivy-contact--guide .fluentform textarea.ff-el-form-control { min-height: 120px; resize: vertical; }
.ivy-contact--guide .fluentform .ff-el-form-control:focus { border-color: var( --ivy-line-accent ); outline: 3px solid var( --ivy-line-accent ); outline-offset: 2px; background-color: rgb( 255 255 255 ); color: var( --ivy-ink ); box-shadow: none; }
.ivy-contact--guide .fluentform .ff-el-is-error .ff-el-form-control { border-color: var( --ivy-danger ); }
.ivy-contact--guide .fluentform .ff-el-is-error .text-danger, .ivy-contact--guide .fluentform .error.text-danger { margin-top: 8px; color: var( --ivy-danger ); font-size: var( --ivy-font-h4 ); font-weight: 500; }
.ivy-contact--guide .fluentform .ivy-form-choices .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 12px; }
.ivy-contact--guide .fluentform .ivy-form-choices .ff-el-form-check { margin: 0; }
.ivy-contact--guide .fluentform .ivy-form-choices .ff-el-input--label { margin-bottom: 0; }
.ivy-contact--guide .fluentform .ivy-form-choices .ff-el-form-check-label { display: inline-flex; align-items: center; gap: 10px; font-size: var( --ivy-font-h5 ); line-height: 1.65; min-height: 52px; margin: 0; padding: 0 20px; border: 1.5px solid var( --ivy-muted ); border-radius: calc( var( --ivy-radius-surface, 18px ) * 12 / 18 ); background-color: rgb( 255 255 255 ); font-weight: 500; cursor: pointer; }
.ivy-contact--guide .fluentform .ivy-form-choices .ff-el-form-check-input { width: 20px; height: 20px; margin: 0; accent-color: var( --ivy-accent ); }
.ivy-contact--guide .fluentform .ivy-form-choices .ff-el-form-check-label:has( input:checked ) { border-color: var( --ivy-accent ); background-color: var( --ivy-surface-soft ); }
.ivy-contact--guide .fluentform .ivy-form-choices .ff-el-form-check-label:has( input:focus-visible ) { outline: 3px solid var( --ivy-line-accent ); outline-offset: 2px; }
.ivy-contact--guide .fluentform .ivy-form-info { margin: 0; color: var( --ivy-muted ); font-size: var( --ivy-font-h4 ); line-height: 1.65; }
.ivy-contact--guide .fluentform .ivy-form-info a { color: var( --ivy-accent ); text-decoration: underline 1px; text-underline-offset: .22em; }
.ivy-contact--guide .fluentform .ff_submit_btn_wrapper { margin: 0; }
.ivy-contact--guide .fluentform .ff-btn-submit { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; min-height: 52px; padding: .85em 1.7em; border: 1.5px solid var( --ivy-accent ); border-radius: var( --ivy-radius-action, 999px ); background-color: var( --ivy-accent ); color: var( --ivy-on-accent ); font-family: inherit; font-size: var( --ivy-font-h6 ); font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease; }
.ivy-contact--guide .fluentform .ff-btn-submit:hover, .ivy-contact--guide .fluentform .ff-btn-submit:focus { border-color: var( --ivy-line-accent ); background-color: var( --ivy-line-accent ); color: var( --ivy-on-accent ); }
.ivy-contact--guide .fluentform .ff-btn-submit:active { transform: translateY( 1px ); }
.ivy-contact--guide .ff-message-success { margin: 0; padding: 16px 20px; border: 1.5px solid var( --ivy-accent ); border-radius: calc( var( --ivy-radius-surface, 18px ) * 12 / 18 ); background-color: var( --ivy-surface-soft ); color: var( --ivy-ink ); }