/* Contact uses the same editorial identity on Parents and Pro. */
.contact-page {
    --contact-accent: var(--mpb-color-bordeaux);
    --contact-section-space: var(--mpb-section-space);
    --contact-ink: var(--mpb-color-encre);
    --contact-copy: var(--mpb-color-texte);
    --contact-line: var(--mpb-color-trait);
    background: var(--mpb-color-fond);
    color: var(--contact-copy);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
    padding-bottom: var(--contact-section-space);
}
.contact-page .container,
.contact-page .contact-pro-hero-inner { box-sizing: border-box; margin-inline: auto; max-width: 1240px; padding-inline: 64px; width: 100%; }
.contact-page .contact-page-hero-band,
.contact-page .contact-pro-hero { background: var(--mpb-color-fond-poudre); background-image: none; border: 0; }
.contact-page .contact-page-hero { align-items: center; border: 0; gap: 64px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-block: var(--contact-section-space); }
.contact-page.contact-page-professional .contact-pro-hero { margin: 0; padding: var(--contact-section-space) 0; }
.contact-page .contact-pro-hero-inner { align-items: center; display: grid; gap: 64px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.contact-page :is(.contact-page-hero,.contact-pro-hero) h1 { color: var(--contact-ink); font-family: var(--font-body); font-size: var(--mpb-font-size-hero); font-weight: 200; letter-spacing: normal; line-height: 1.18; margin: 0; text-wrap: pretty; }
.contact-page .eyebrow,
.contact-page.contact-page-professional .contact-pro-hero .eyebrow { color: var(--contact-accent); font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .16em; line-height: 16px; }
.contact-page .contact-page-lead,
.contact-page.contact-page-professional .contact-pro-hero .contact-page-lead { border: 0; color: var(--contact-copy); font-size: 19px; font-weight: 300; line-height: 1.7; margin: 0; max-width: none; padding: 0; }
.contact-page .contact-page-layout { gap: 64px; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); padding-top: var(--contact-section-space); }
.contact-page .contact-page-accent { background: var(--mpb-color-bordeaux); height: 1px; width: 56px; }
.contact-page .contact-founders { display: block; height: auto; justify-self: center; max-width: 260px; width: 100%; }
.contact-page :is(.contact-page-context,.contact-form-heading,.contact-success) h2 { color: var(--contact-ink); font-family: var(--font-body); font-size: 20px; font-weight: 600; letter-spacing: normal; line-height: 1.3; }
.contact-page .contact-page-context > p:not(.eyebrow),
.contact-page .contact-form-heading > p:not(.eyebrow),
.contact-page .contact-success > p:not(.eyebrow) { color: var(--contact-copy); font-size: 17px; font-weight: 300; line-height: 1.65; }
.contact-page .contact-topic-list,
.contact-page .contact-topic-list li { border-color: var(--contact-line); }
.contact-page .contact-topic-list span { color: var(--contact-accent); font-size: 20px; font-weight: 200; }
.contact-page .contact-topic-list strong { color: var(--contact-ink); font-size: 15px; font-weight: 600; line-height: 1.6; }
.contact-page .contact-context-link,
.contact-page .contact-context-link span { color: var(--contact-accent); font-size: 15px; font-weight: 600; gap: 12px; line-height: 1.6; min-height: 44px; }
.contact-page .contact-context-link-label { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.contact-page .contact-form-shell { background: var(--mpb-color-fond); border: 1px solid var(--contact-line); border-radius: 18px; box-shadow: none; margin: 0; min-width: 0; padding: 32px; width: 100%; }
.contact-page .contact-form-heading,
.contact-page .contact-form-submit { border-color: var(--contact-line); }
.contact-page .contact-form-field label,
.contact-page .contact-form-consent > label { color: var(--contact-ink); font-size: 15px; font-weight: 600; line-height: 1.6; }
.contact-page .contact-form-field :is(input,select,textarea) { background: var(--mpb-color-fond); border: 1px solid var(--contact-line); box-shadow: none; color: var(--contact-ink); font-family: inherit; font-size: 17px; font-weight: 300; line-height: 1.65; min-width: 0; }
.contact-page .contact-form-field :is(input,textarea)::placeholder { color: var(--contact-copy); font-size: inherit; font-weight: 300; opacity: 1; }
.contact-page .contact-form-field :is(input,select,textarea):focus { border-color: var(--contact-accent); box-shadow: none; outline: 2px solid var(--contact-accent); outline-offset: 3px; }
.contact-page .contact-form-consent input[type="checkbox"] { accent-color: var(--contact-accent); }
.contact-page .contact-form-consent > label { color: var(--contact-copy); font-weight: 300; }
.contact-page .contact-form-submit p { color: var(--mpb-color-texte-discret); font-size: 13px; font-weight: 300; line-height: 1.5; }
.contact-page .contact-form-submit :is(.button-accent,.button-accent:hover),
.contact-page .contact-success .button { align-items: center; background: var(--contact-accent); border: 0; border-radius: 999px; box-shadow: none; color: var(--mpb-color-sur-bordeaux); display: inline-flex; font-family: inherit; font-size: 13px; font-weight: 600; gap: 12px; justify-content: center; letter-spacing: .07em; line-height: 16px; max-width: 100%; min-height: 52px; min-width: 0; padding: 17px 24px; text-transform: uppercase; white-space: normal; }
.contact-page .contact-success .button-secondary { background: var(--mpb-color-gris-bouton); color: var(--contact-ink); }
.contact-page .contact-form-alert { background: var(--mpb-color-fond-poudre); border: 1px solid var(--contact-line); color: var(--contact-accent); }
.contact-page .contact-form-alert :is(strong,p),
.contact-page :is(.contact-form-field,.contact-form-consent) ul,
.contact-page .team-contact-form > ul { color: var(--contact-accent); font-size: 15px; line-height: 1.6; }
.contact-page .contact-form-field:has([aria-invalid="true"]) :is(input,select,textarea) { border-color: var(--contact-accent); }
.contact-page .contact-success > span { background: var(--mpb-color-sauge); border: 0; color: var(--contact-accent); }
.contact-page :is(a,button):focus-visible { outline: 2px solid var(--contact-accent); outline-offset: 4px; }

@media (max-width: 1000px) {
    .contact-page .contact-page-layout,
    .contact-page .contact-page-hero,
    .contact-page .contact-pro-hero-inner { grid-template-columns: minmax(0,1fr); }
    .contact-page .contact-page-hero,
    .contact-page .contact-pro-hero-inner { gap: 24px; }
}
@media (max-width: 767px) {
    .contact-page { --contact-section-space: 72px; }
    .contact-page .container,
    .contact-page .contact-pro-hero-inner { padding-inline: 24px; }
    .contact-page :is(.contact-page-hero,.contact-pro-hero) h1 { font-size: clamp(32px, 7.5vw, 44px); }
    .contact-page .contact-form-shell { border: 0; border-top: 1px solid var(--contact-line); border-radius: 0; padding: 32px 0 0; }
    .contact-page .contact-form-grid { grid-template-columns: minmax(0,1fr); }
    .contact-page .contact-form-field :is(input,select,textarea) { font-size: 16px; }
    .contact-page .contact-form-submit { align-items: stretch; flex-direction: column; }
}
@media (max-width: 360px) {
    .contact-page :is(.contact-page-hero,.contact-pro-hero) h1 { font-size: clamp(32px, 7.5vw, 44px); }
}