/**
 * Travomi — contact page (templates/page-contact.html, inc/55-contact.php). Loaded on /contact/ only.
 * Hero status panel · intro · two columns (form card | side panel) · Fluent Form (fields, labels, consent, anti-spam
 * question, focus, errors, success) · FAQ. The page texts come from scripts/pages/setup-pages.php.
 */

/* ── Hero ─────────────────────────────────────────── */
.tv-phero--contact { background: var(--tv-dots), linear-gradient(180deg, var(--tv-a2) 0%, var(--tv-a5) 100%); padding-bottom: 56px; }
.tv-phero--contact .tv-phero__text .tv-catchip { margin-bottom: 16px; }
.tv-phero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.tv-cpanel { box-sizing: border-box; padding: 22px 20px; border-radius: var(--tv-radius-big); background: var(--tv-contrast); color: #fff; box-shadow: var(--tv-shadow-strong); position: relative; overflow: hidden; }
.tv-cpanel::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 5px; border-radius: 0 0 5px 5px; background: var(--tv-split); }
.tv-cpanel__head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--tv-head); font-weight: 800; font-size: 1.1rem; }
.tv-cpanel__mark { width: 32px; height: 32px; }
.tv-cpanel__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tv-cpanel__list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--tv-panel); box-shadow: inset 0 0 0 1px var(--tv-panel-line); font-size: .9rem; line-height: 1.45; color: var(--tv-on-dark-soft); }
.tv-cpanel__list strong { display: block; color: #fff; font-family: var(--tv-head); font-weight: 700; font-size: .98rem; }
.tv-chero2__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(174, 185, 255, .16); color: var(--tv-a1); }
.tv-chero2__icon .tv-icon { width: 20px; height: 20px; }

/* ── Content layout ───────────────────────────────── */
.tv-article--contact { padding-top: 8px; }
.tv-contact-content > * { max-width: none; }
.tv-contact-content > p:first-child { max-width: 760px; margin: 0 0 28px; font-size: 1.1rem; color: var(--tv-a4); }
.tv-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.tv-contact > * { margin: 0 !important; }
.tv-contact h2 { margin-top: 0; padding-top: 18px; }
.tv-contact__form { position: relative; box-sizing: border-box; padding: 26px 20px 22px; border-radius: var(--tv-radius-big); background: #fff; box-shadow: var(--tv-shadow); overflow: hidden; }
.tv-contact__form::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--tv-split); }
.tv-contact__form > h2::before { display: none; }
.tv-contact__form > h2 { padding-top: 0; margin-bottom: 18px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.tv-contact__form > p:last-child { margin: 18px 0 0; font-size: .88rem; line-height: 1.55; color: var(--tv-a4); }
.tv-contact__form > p:last-child em { font-style: normal; }
.tv-contact__aside { box-sizing: border-box; padding: 24px 20px; border-radius: var(--tv-radius-big); background: var(--tv-a2); }
.tv-contact__aside > h2 { font-size: 1.3rem; margin-bottom: 12px; }
.tv-contact__aside > h2 ~ h2 { margin-top: 28px; }
.tv-contact__aside > ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tv-contact__aside > ul li { position: relative; margin: 0; padding: 12px 14px 12px 46px; border-radius: 14px; background: #fff; font-size: .95rem; line-height: 1.45; }
.tv-contact__aside > ul li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--tv-contrast) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEB9FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.tv-contact__aside > ul + p { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 4px 0 0 var(--tv-a1); font-size: .92rem; }
.tv-contact__aside > p { font-size: .95rem; }
.tv-contact__aside > p:last-child { margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed rgba(23, 26, 61, .18); font-family: var(--tv-head); font-weight: 600; }

/* ── Fluent Form ──────────────────────────────────── */
.tv-contact .fluentform .ff-el-group { margin-bottom: 18px; }
.tv-contact .fluentform .ff-el-input--label { margin-bottom: 6px; }
.tv-contact .fluentform .ff-el-input--label label { font-family: var(--tv-head); font-weight: 700; font-size: .98rem; color: var(--tv-contrast); }
.tv-contact .fluentform .ff-el-is-required.asterisk-right label::after { color: var(--tv-vermillon-text); margin-left: 4px; }
.tv-contact .fluentform .ff-el-form-control {
	box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--tv-a6); border-radius: 12px;
	background: #fff; color: var(--tv-contrast); font: 400 1.0625rem/1.4 var(--wp--preset--font-family--body, "Onest", Arial, sans-serif);
	box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.tv-contact .fluentform .ff-el-form-control::placeholder { color: #7B7F98; opacity: 1; }
.tv-contact .fluentform .ff-el-form-control:hover { border-color: #CFCBDD; }
.tv-contact .fluentform .ff-el-form-control:focus { border-color: var(--tv-contrast); outline: none; box-shadow: 0 0 0 3px rgba(242, 84, 45, .35); }
.tv-contact .fluentform textarea.ff-el-form-control { min-height: 170px; resize: vertical; }
.tv-contact .fluentform select.ff-el-form-control { padding-right: 44px; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171A3D' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 14px center / 20px no-repeat; }
.tv-contact .fluentform .ff-el-help-message { margin-top: 6px; font-size: .86rem; color: var(--tv-a4); font-style: normal; }
/* Consent */
.tv-contact .fluentform .ff-el-group:has(.ff-el-tc) { padding: 14px 16px; border-radius: 14px; background: var(--tv-a5); box-shadow: inset 0 0 0 1px var(--tv-a6); }
.tv-contact .fluentform .ff-el-tc { display: flex; gap: 12px; align-items: flex-start; }
.tv-contact .fluentform .ff-el-tc label { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: .92rem; line-height: 1.5; color: var(--tv-contrast); cursor: pointer; }
.tv-contact .fluentform .ff_tc_checkbox { flex: none; padding-top: 1px; }
.tv-contact .fluentform input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--tv-contrast); cursor: pointer; }
.tv-contact .fluentform .ff_t_c a { color: var(--tv-pervenche-text); }
/* Anti-spam question (field printed by the mu-plugin tv-form-antispam.php): same look as the other fields */
.tv-contact .fluentform .tv-captcha { display: block; text-align: left; }
.tv-contact .fluentform .tv-captcha .ff-el-input--label { display: block; float: none; width: auto; margin: 0 0 6px; padding: 0; text-align: left; }
.tv-contact .fluentform .tv-captcha .ff-el-input--label label { display: inline; text-align: left; }
.tv-contact .fluentform .tv-captcha .ff-el-input--content { display: block; float: none; width: 100%; margin: 0; text-align: left; }
.tv-contact .fluentform .tv-captcha .ff-el-input--content::after { content: "Écrivez le résultat en chiffres : cette question nous protège des robots."; display: block; margin-top: 6px; font-size: .86rem; color: var(--tv-a4); }
.tv-contact .fluentform .tv-captcha.ff-el-is-error .ff-el-input--content::after { display: none; }
.tv-contact .fluentform .tv-captcha .ff-el-form-control { width: 100%; max-width: none; text-align: left; }

/* Submit */
.tv-contact .fluentform .ff_submit_btn_wrapper { margin: 22px 0 0; }
.tv-contact .fluentform .ff-btn-submit, .tv-contact .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 180px; padding: 0 28px; border: 0; border-radius: var(--tv-radius);
	background: var(--tv-contrast) !important; color: #fff !important; font: 700 1.05rem/1 var(--tv-head); cursor: pointer; opacity: 1; box-shadow: none; transition: background-color .15s ease, color .15s ease;
}
.tv-contact .fluentform .ff-btn-submit:hover { background: var(--tv-a3) !important; color: var(--tv-contrast) !important; }
.tv-contact .fluentform .ff-btn-submit:focus-visible { outline: 3px solid var(--tv-a3); outline-offset: 2px; }
.tv-contact .fluentform .ff-btn-submit[disabled], .tv-contact .fluentform .ff-working .ff-btn-submit { opacity: .7; cursor: progress; }
/* Errors */
.tv-contact .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--tv-vermillon-text); background: #FFF8F5; }
.tv-contact .fluentform .ff-el-is-error .ff-el-form-control:focus { box-shadow: 0 0 0 3px rgba(189, 52, 18, .25); }
.tv-contact .fluentform .error, .tv-contact .fluentform .text-danger { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--tv-vermillon-text) !important; font-size: .88rem; font-weight: 600; }
.tv-contact .fluentform .error::before, .tv-contact .fluentform .text-danger::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--tv-vermillon-text); color: #fff; font-size: .72rem; font-weight: 800; }
.tv-contact .ff-errors-in-stack { margin-top: 12px; }
.tv-contact .ff-errors-in-stack .error { padding: 10px 12px; border-radius: 12px; background: var(--tv-braise); }
/* Success */
.tv-contact .ff-message-success { position: relative; margin: 0; padding: 20px 20px 20px 64px; border: 0; border-radius: 18px; background: var(--tv-a2); color: var(--tv-contrast); box-shadow: inset 0 0 0 1px var(--tv-a1); font-size: 1rem; line-height: 1.55; }
.tv-contact .ff-message-success::before { content: ""; position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; border-radius: 50%; background: var(--tv-contrast) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEB9FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tv-contact .ff-message-success p { margin: 0; }

/* ── FAQ ──────────────────────────────────────────── */
.tv-contact__faq { max-width: 860px; margin: 64px auto 0 !important; }
.tv-contact__faq > h2 { text-align: center; margin: 0 0 24px; padding-top: 22px; }
.tv-contact__faq > h2::before { left: 50%; margin-left: -20px; }
.tv-contact__faq > h3 { position: relative; margin: 12px 0 0 !important; padding: 18px 22px 6px 58px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -1px 0 var(--tv-a6), -1px 0 0 var(--tv-a6), 1px 0 0 var(--tv-a6); font-size: 1.08rem; line-height: 1.35; }
.tv-contact__faq > h3::before { content: "?"; position: absolute; left: 18px; top: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tv-a2); color: var(--tv-pervenche-text); font-size: .95rem; font-weight: 800; }
.tv-contact__faq > h3 + p { margin: 0 !important; padding: 0 22px 18px 58px; border-radius: 0 0 16px 16px; background: #fff; box-shadow: 0 1px 0 var(--tv-a6), -1px 0 0 var(--tv-a6), 1px 0 0 var(--tv-a6), 0 10px 24px rgba(23, 26, 61, .05); color: var(--tv-a4); font-size: .98rem; }

/* ── Breakpoints ──────────────────────────────────── */
@media (min-width: 600px) {
	.tv-cpanel { padding: 26px 24px; }
	.tv-contact__form { padding: 32px 30px 28px; }
	.tv-contact__aside { padding: 28px 26px; }
}
@media (min-width: 1024px) {
	.tv-phero--contact .tv-phero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
	.tv-contact { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; }
	.tv-contact__form { padding: 40px 40px 34px; }
	.tv-contact__aside { position: sticky; top: 24px; }
	.tv-contact .fluentform .ff-t-container { gap: 16px; }
}
@media (min-width: 1440px) {
	.tv-contact { gap: 48px; }
}