/**
 * Chantilo — forms (Fluent Forms) and the contact page layout. Loaded on pages that contain a Fluent Form
 * (inc/60-contact.php). Overrides the plugin's default skin with the brand tokens: visible labels, 52 px fields,
 * 3 px focus ring, error and success states, consent checkbox, anti-spam question.
 */

/* ── Contact hero ─────────────────────────────────── */
.ch-hero--contact { background: var(--ch-a5); overflow: hidden; }
.ch-hero--contact .ch-hero__dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(28, 43, 37, .08) 1.2px, transparent 1.3px); background-size: 22px 22px; -webkit-mask: linear-gradient(90deg, transparent 0, #000 60%); mask: linear-gradient(90deg, transparent 0, #000 60%); }
.ch-hero--contact .ch-wrap { position: relative; }
.ch-hero--contact .ch-hero__title { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem); letter-spacing: -.04em; }
.ch-hero--contact .ch-hero__lead p { margin: 0; }
.ch-hero--contact .ch-hero__grid { align-items: center; }
.ch-hero__badge { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 18px; padding: .4rem 1rem .4rem .6rem; border-radius: var(--ch-radius); background: var(--ch-base); box-shadow: inset 0 0 0 1.5px var(--ch-a6); font-family: var(--ch-font-h); font-weight: 700; font-size: .92rem; }
.ch-hero__badge .ch-icon { width: 22px; height: 22px; color: var(--ch-a3); }
.ch-promises { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; padding: 0; }
.ch-promises li { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--ch-font-h); font-weight: 600; }
.ch-promises .ch-icon { width: 22px; height: 22px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: var(--ch-a1); color: var(--ch-contrast); }
.ch-mailcard { position: relative; box-sizing: border-box; max-width: 440px; margin: 0 auto; padding: 28px; background: var(--ch-base); border-radius: 28px; border: 1px solid var(--ch-a6); box-shadow: var(--ch-shadow-lg); }
.ch-mailcard::before { content: ""; position: absolute; inset: 14px -12px -14px 12px; z-index: -1; border-radius: 28px; background: var(--ch-a2); transform: rotate(2.5deg); }
.ch-mailcard > * { margin: 0; }
.ch-mailcard__logo { display: block; width: 76px; margin-bottom: 14px; }
.ch-mailcard__title { font-family: var(--ch-font-h); font-weight: 800; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.02em; }
.ch-mailcard__text { margin-top: 8px !important; color: var(--ch-a4); }
.ch-mailcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px !important; }

/* ── Layout: form card + side panel ───────────────── */
.ch-contact { padding-top: clamp(32px, 4vw, 56px); }
.ch-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ch-formcard { box-sizing: border-box; padding: clamp(22px, 4vw, 40px); background: var(--ch-base); border-radius: 28px; border: 1px solid var(--ch-a6); box-shadow: var(--ch-shadow); scroll-margin-top: 16px; }
.ch-formcard__title { margin: 0; font-weight: 800; }
.ch-formcard__title::after { content: ""; display: block; width: 40px; height: 10px; margin-top: .4em; background: linear-gradient(var(--ch-a1), var(--ch-a1)) left bottom / 100% 2px no-repeat, var(--ch-ticks) left bottom / 100% 7px no-repeat; }
.ch-formcard__req { margin: 10px 0 22px; font-size: .9rem; color: var(--ch-a4); }
.ch-contact__note { margin-top: 14px; padding: 0 6px; font-size: .88rem; line-height: 1.55; color: var(--ch-a4); }
.ch-contact__note p { margin: 0; }
.ch-contact__note a, .ch-side a { color: var(--ch-sapin-text); }
.ch-contact__aside { display: grid; gap: 16px; }
.ch-side { box-sizing: border-box; padding: 22px 24px; border-radius: 24px; background: var(--ch-a2); }
.ch-side > * { margin: 0 0 10px; }
.ch-side > :last-child { margin-bottom: 0; }
.ch-side__title { display: flex; align-items: center; gap: .55rem; font-family: var(--ch-font-h); font-weight: 800; font-size: 1.15rem; line-height: 1.25; }
.ch-side__title .ch-icon { width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--ch-a3); color: var(--ch-base); }
.ch-side ul:not(.ch-side__links) { margin: 0 0 10px; padding-left: 1.2rem; }
.ch-side li { margin: .3rem 0; line-height: 1.5; }
.ch-side li::marker { color: var(--ch-a3); }
.ch-side p { font-size: .95rem; line-height: 1.6; }
.ch-side--next { background: var(--ch-base); border: 1px solid var(--ch-a6); }
.ch-side--links { background: var(--ch-contrast); color: var(--ch-a5); }
.ch-side--links .ch-side__title .ch-icon { background: var(--ch-a1); color: var(--ch-contrast); }
.ch-side__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ch-side__links a { display: flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--ch-a5) !important; font-family: var(--ch-font-h); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: .25em; }
.ch-side__links a:hover { color: var(--ch-a1) !important; }
.ch-side__links .ch-icon { width: 20px; height: 20px; color: var(--ch-on-dark); }
.ch-contact__rest { max-width: 740px; margin: 0 auto; padding-inline: var(--ch-gutter); }

/* ── FAQ cards ────────────────────────────────────── */
.ch-contact-faq .ch-head__title { margin-bottom: 24px; }
.ch-qa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ch-qa > p { margin: 0; }
.ch-qa__item { box-sizing: border-box; padding: 20px 22px; border-radius: 22px; background: var(--ch-a5); border: 1px solid var(--ch-a6); }
.ch-qa__item h3 { display: flex; gap: .6rem; margin: 0 0 8px; font-size: 1.12rem; line-height: 1.3; }
.ch-qa__item h3::before { content: "?"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ch-a1); font-size: 1rem; font-weight: 800; }
.ch-qa__item p { margin: 0; padding-left: calc(28px + .6rem); color: var(--ch-contrast); font-size: .97rem; }
.ch-qa__item a { color: var(--ch-sapin-text); }

/* ── Fluent Forms skin ────────────────────────────── */
.ch-main .fluentform .ff-el-group { margin-bottom: 20px; }
.ch-main .fluentform .ff-el-input--label { margin-bottom: 6px; }
.ch-main .fluentform .ff-el-input--label label { font-family: var(--ch-font-h); font-weight: 700; font-size: 1rem; color: var(--ch-contrast); }
.ch-main .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { content: " *"; color: var(--ch-a3); margin-left: 2px; }
.ch-main .fluentform .ff-el-form-control {
	box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 18px; border: 2px solid var(--ch-a6); border-radius: 16px;
	background: var(--ch-base); color: var(--ch-contrast); font-family: var(--wp--preset--font-family--body); font-size: 1rem; line-height: 1.5; box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ch-main .fluentform textarea.ff-el-form-control { min-height: 168px; resize: vertical; }
.ch-main .fluentform select.ff-el-form-control {
	-webkit-appearance: none; appearance: none; padding-right: 48px; cursor: pointer;
	background: linear-gradient(45deg, transparent 50%, var(--ch-contrast) 50%) calc(100% - 24px) 50% / 7px 7px no-repeat, linear-gradient(135deg, var(--ch-contrast) 50%, transparent 50%) calc(100% - 17px) 50% / 7px 7px no-repeat, var(--ch-base);
}
.ch-main .fluentform .ff-el-form-control::placeholder { color: var(--ch-a4); opacity: 1; }
.ch-main .fluentform .ff-el-form-control:hover { border-color: var(--ch-dots); }
.ch-main .fluentform .ff-el-form-control:focus { border-color: var(--ch-contrast); outline: 3px solid var(--ch-focus); outline-offset: 2px; box-shadow: none; }
.ch-main .fluentform .ff-el-help-message { margin-top: 6px; font-size: .88rem; font-style: normal; color: var(--ch-a4); }
/* Consent checkbox: big tick box, text beside it. */
.ch-main .fluentform .ff-el-tc { margin: 4px 0 0; }
.ch-main .fluentform .ff_tc_label { display: flex !important; align-items: flex-start; gap: 12px; cursor: pointer; font-size: .95rem; line-height: 1.5; }
.ch-main .fluentform .ff_tc_checkbox { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -4px -10px -11px; }
.ch-main .fluentform .ff-el-tc, .ch-main .fluentform .ff-el-tc .ff_tc_label, .ch-main .fluentform .ff-el-is-error .ff_tc_label { color: var(--ch-contrast) !important; }
.ch-main .fluentform .ff-el-is-error .ff-el-form-check-input { outline: 2px solid var(--ch-error); outline-offset: 2px; }
.ch-main .fluentform .ff-el-form-check-input { width: 22px; height: 22px; margin: 0; accent-color: var(--ch-a3); cursor: pointer; }
.ch-main .fluentform .ff_t_c a { color: var(--ch-sapin-text); }
/* Anti-spam question: a small dashed « fiche ticket ». */
.ch-main .fluentform .ch-captcha { padding: 16px 18px; border-radius: 18px; border: 2px dashed var(--ch-a6); background: var(--ch-a5); }
.ch-main .fluentform .ch-captcha .ff-el-input--label { text-align: left; }
.ch-main .fluentform .ch-captcha .ff-el-input--content { width: 100%; }
.ch-main .fluentform .ch-captcha .ff-el-form-control { width: 100%; max-width: none; background: var(--ch-base); }
/* Errors and success. */
.ch-main .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--ch-error); background-color: var(--ch-error-bg); }
.ch-main .fluentform .ff-el-is-error .text-danger, .ch-main .fluentform .error.text-danger { margin-top: 6px; color: var(--ch-error); font-size: .9rem; font-weight: 600; }
.ch-main .ff-errors-in-stack { margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; background: var(--ch-error-bg); color: var(--ch-error); border: 1.5px solid var(--ch-error-line); }
.ch-main .ff-message-success {
	margin: 0; padding: 22px 24px 22px 64px; position: relative; border: 0 !important; border-radius: 20px; background: var(--ch-a2) !important;
	color: var(--ch-contrast); font-size: 1.02rem; line-height: 1.55; box-shadow: none !important;
}
.ch-main .ff-message-success::before { content: ""; position: absolute; left: 22px; top: 22px; width: 28px; height: 28px; border-radius: 50%; background: var(--ch-a3); -webkit-mask: none; }
.ch-main .ff-message-success::after { content: ""; position: absolute; left: 31px; top: 28px; width: 8px; height: 13px; border: solid var(--ch-base); border-width: 0 3px 3px 0; transform: rotate(45deg); }
/* Submit. */
.ch-main .fluentform .ff_submit_btn_wrapper { margin: 8px 0 0; }
.ch-main .fluentform .ff-btn-submit {
	display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.8rem; border: 0; border-radius: var(--ch-radius);
	background: var(--ch-a3) !important; color: var(--ch-base) !important; font-family: var(--ch-font-h); font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: none; opacity: 1;
}
.ch-main .fluentform .ff-btn-submit:hover { background: var(--ch-contrast) !important; }
.ch-main .fluentform .ff-btn-submit:focus-visible { outline: 3px solid var(--ch-focus); outline-offset: 2px; }
.ch-main .fluentform .ff-btn-submit.disabled, .ch-main .fluentform .ff-working .ff-btn-submit { opacity: .7; cursor: progress; }

@media (min-width: 600px) {
	.ch-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ch-hero--contact .ch-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 56px; }
	.ch-contact__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; }
	.ch-contact__aside { position: sticky; top: 24px; }
	.ch-mailcard { margin-right: 12px; }
}