/*
 * contact/carnet — porte depuis contact.astro de la maquette de Chez Loeli. Engagement 5 : aucun hexadecimal.
 */
.ivy-contact--carnet { padding-block: clamp( 72px, 9vw, 120px ); background-color: var( --ivy-surface-soft ); background-image: var( --ivy-grain, none ); color: var( --ivy-ink ); }
.ivy-contact--carnet .ivy-contact__inner { display: grid; gap: clamp( 28px, 4vw, 56px ); align-items: start; width: min( 100% - 2 * clamp( 20px, 5vw, 56px ), 1200px ); margin-inline: auto; }
@media ( min-width: 960px ) { .ivy-contact--carnet .ivy-contact__inner { grid-template-columns: minmax( 0, .9fr ) minmax( 0, 1.1fr ); } }
.ivy-contact--carnet .ivy-contact__left { display: grid; gap: 28px; min-width: 0; }
.ivy-contact--carnet .ivy-contact__title { color: var( --ivy-title-color, var( --ivy-ink ) ); position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; margin: 0; }
.ivy-contact--carnet .ivy-contact__rdv { display: grid; gap: 16px; justify-items: start; padding: clamp( 26px, 3.5vw, 40px ); border-radius: var( --ivy-radius-surface, 18px ); background-color: var( --ivy-rdv-background-color, var( --ivy-surface-soft ) ); }
.ivy-contact--carnet .ivy-contact__rdv-eyebrow { margin: 0; color: var( --ivy-rdv_eyebrow-color, var( --ivy-ink ) ); font-size: var( --ivy-font-label ); font-weight: 600; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; }
.ivy-contact--carnet .ivy-contact__rdv-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 11px; margin-inline-end: 12px; vertical-align: -1px; background: var( --ivy-support ); -webkit-mask: var( --ivy-roof-mask ) center / contain no-repeat; mask: var( --ivy-roof-mask ) center / contain no-repeat; }
.ivy-contact--carnet .ivy-contact__panel-eyebrow { margin: 0; color: var( --ivy-panel_eyebrow-color, var( --ivy-ink ) ); font-size: var( --ivy-font-label ); font-weight: 600; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; }
.ivy-contact--carnet .ivy-contact__panel-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 11px; margin-inline-end: 12px; vertical-align: -1px; background: var( --ivy-support ); -webkit-mask: var( --ivy-roof-mask ) center / contain no-repeat; mask: var( --ivy-roof-mask ) center / contain no-repeat; }
.ivy-contact--carnet .ivy-contact__rdv-title, .ivy-contact--carnet .ivy-contact__panel-title { margin: 0; }
.ivy-contact--carnet .ivy-contact__rdv-title { color: var( --ivy-rdv_title-color, var( --ivy-ink ) ); }
.ivy-contact--carnet .ivy-contact__panel-title { color: var( --ivy-panel_title-color, var( --ivy-ink ) ); }
.ivy-contact--carnet .ivy-contact__rdv-text { margin: 0; color: var( --ivy-rdv_text-color, var( --ivy-muted ) ); font-size: var( --ivy-font-body ); }
.ivy-contact--carnet .ivy-contact__help { margin: 0; color: var( --ivy-rdv_help-color, var( --ivy-muted ) ); font-size: var( --ivy-font-h4 ); }
.ivy-contact--carnet .ivy-contact__cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: .85em 1.7em; border: 1.5px solid var( --ivy-cta-border-color, var( --ivy-accent ) ); border-radius: var( --ivy-radius-action, 999px ); font-size: var( --ivy-font-h6 ); font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease; background-color: var( --ivy-cta-background-color, var( --ivy-accent ) ); color: var( --ivy-cta-color, var( --ivy-on-accent ) ); }
.ivy-contact--carnet .ivy-contact__cta:hover { border-color: var( --ivy-line-accent ); background-color: var( --ivy-line-accent ); color: var( --ivy-on-accent ); }
.ivy-contact--carnet .ivy-contact__cta:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.ivy-contact--carnet .ivy-contact__cta::after { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var( --ivy-arrow-mask ) center / contain no-repeat; mask: var( --ivy-arrow-mask ) center / contain no-repeat; transition: transform 200ms ease; }
.ivy-contact--carnet .ivy-contact__cta:hover::after { transform: translateX( 3px ); }
.ivy-contact--carnet .ivy-contact__details { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var( --ivy-line ); }
.ivy-contact--carnet .ivy-contact__details li { display: grid; grid-template-columns: 32px minmax( 0, 1fr ); gap: 16px; padding-block: 18px; border-block-end: 1px solid var( --ivy-line ); }
.ivy-contact--carnet .ivy-contact__icon { display: block; width: var( --ivy-details_icon-size, 28px ); height: var( --ivy-details_icon-size, 28px ); color: var( --ivy-details_icon-color, var( --ivy-ink ) ); }
.ivy-contact--carnet .ivy-contact__icon :is( svg, i ) { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ivy-contact--carnet .ivy-contact__label { margin: 0; color: var( --ivy-details_label-color, var( --ivy-ink ) ); font-family: inherit; font-size: var( --ivy-font-label ); font-weight: 600; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; }
.ivy-contact--carnet .ivy-contact__datum { color: var( --ivy-details_value-color, inherit ); }
.ivy-contact--carnet .ivy-contact__datum :is( a, p ) { margin: 0; font-size: var( --ivy-font-marquee ); font-weight: 500; overflow-wrap: anywhere; }
.ivy-contact--carnet .ivy-contact__datum a { color: var( --ivy-accent ); text-decoration: underline 1px; text-underline-offset: .22em; }
.ivy-contact--carnet .ivy-contact__panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp( 22px, 3vw, 34px ); border: 1px solid var( --ivy-line-soft ); border-radius: var( --ivy-radius-surface, 18px ); background-color: var( --ivy-panel-background-color, var( --ivy-surface ) ); }

/* --- Le formulaire FluentForm, habille (les classes ff-* sont celles de l'extension) --- */
.ivy-contact--carnet .fluentform .ff-el-group { margin: 0; }
.ivy-contact--carnet .fluentform fieldset { display: grid !important; gap: 22px; }
.ivy-contact--carnet .fluentform .ff-t-container { display: flex; flex-wrap: wrap; gap: 22px; }
.ivy-contact--carnet .fluentform .ff-t-container .ff-t-cell { flex: 1 1 14rem !important; min-width: 0; padding: 0 !important; }
.ivy-contact--carnet .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--carnet .fluentform .ff-el-group { padding: 0; }
.ivy-contact--carnet .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--carnet .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--carnet .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--carnet .fluentform .ff-el-input--label.ff-el-is-required label::before { display: none; }
.ivy-contact--carnet .fluentform .ivy-form-sr-label .ff-el-input--label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); }
.ivy-contact--carnet .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--carnet .fluentform textarea.ff-el-form-control { min-height: 120px; resize: vertical; }
.ivy-contact--carnet .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--carnet .fluentform .ff-el-is-error .ff-el-form-control { border-color: var( --ivy-danger ); }
.ivy-contact--carnet .fluentform .ff-el-is-error .text-danger, .ivy-contact--carnet .fluentform .error.text-danger { margin-top: 8px; color: var( --ivy-danger ); font-size: var( --ivy-font-h4 ); font-weight: 500; }
.ivy-contact--carnet .fluentform .ivy-form-choices .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 12px; }
.ivy-contact--carnet .fluentform .ivy-form-choices .ff-el-form-check { margin: 0; }
.ivy-contact--carnet .fluentform .ivy-form-choices .ff-el-input--label { margin-bottom: 0; }
.ivy-contact--carnet .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--carnet .fluentform .ivy-form-choices .ff-el-form-check-input { width: 20px; height: 20px; margin: 0; accent-color: var( --ivy-accent ); }
.ivy-contact--carnet .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--carnet .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--carnet .fluentform .ivy-form-info { margin: 0; color: var( --ivy-muted ); font-size: var( --ivy-font-h4 ); line-height: 1.65; }
.ivy-contact--carnet .fluentform .ivy-form-info a { color: var( --ivy-accent ); text-decoration: underline 1px; text-underline-offset: .22em; }
.ivy-contact--carnet .fluentform .ff_submit_btn_wrapper { margin: 0; }
.ivy-contact--carnet .fluentform .ff-btn-submit { display: inline-flex; 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--carnet .fluentform .ff-btn-submit:hover, .ivy-contact--carnet .fluentform .ff-btn-submit:focus { border-color: var( --ivy-line-accent ); background-color: var( --ivy-line-accent ); color: var( --ivy-on-accent ); }
.ivy-contact--carnet .fluentform .ff-btn-submit:active { transform: translateY( 1px ); }
.ivy-contact--carnet .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 ); }