/**
 * AppUI — "Article + Formulaire" layout (appui:contact-form)
 * Two columns: article text left, ConvertForms card right (stacks on mobile).
 * Self-contained tokens (display/body fonts are loaded globally for everyone),
 * so it works in both the guest and logged-in contexts.
 */
.pdc-page {
    --pdc-ink: #0e1320;
    --pdc-muted: #5b6472;
    --pdc-line: #e7e3da;
    --pdc-surface: #ffffff;
    --pdc-soft: #f3f1ea;
    --pdc-blue: #2563eb;
    --pdc-radius: 28px;
    --pdc-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --pdc-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

    color: var(--pdc-ink);
    font-family: var(--pdc-body);
}

.pdc-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 20px 90px;
}

.pdc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 992px) {
    .pdc-grid {
        grid-template-columns: minmax(0, 1fr) 440px;
        gap: 56px;
        align-items: start;
    }
    .pdc-aside {
        position: sticky;
        top: 100px;
    }
}

/* Article column */
.pdc-title {
    font-family: var(--pdc-display);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.04em;
    font-weight: 700;
    margin: 0 0 1.5rem;
}

.pdc-body {
    color: var(--pdc-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.pdc-body h2,
.pdc-body h3,
.pdc-body h4 {
    font-family: var(--pdc-display);
    color: var(--pdc-ink);
    letter-spacing: -.02em;
    margin: 2rem 0 .8rem;
}

.pdc-body p { margin: 0 0 1.1rem; }
.pdc-body img { max-width: 100%; height: auto; border-radius: 14px; }
.pdc-body a { color: var(--pdc-blue); }

/* Form card */
.pdc-card {
    background: var(--pdc-surface);
    border: 1px solid var(--pdc-line);
    border-radius: var(--pdc-radius);
    padding: 38px 34px;
    box-shadow: 0 18px 50px rgba(13, 20, 36, .07);
}

.pdc-card-title {
    font-family: var(--pdc-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0 0 .6rem;
}

.pdc-card-intro {
    color: var(--pdc-muted);
    line-height: 1.65;
    margin: 0 0 1.4rem;
}

.pdc-note {
    color: var(--pdc-muted);
    background: var(--pdc-soft);
    border: 1px dashed var(--pdc-line);
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    margin: 0;
    text-align: center;
}

@media (max-width: 767px) {
    .pdc-wrap { padding: 36px 16px 60px; }
    .pdc-card { padding: 26px 22px; }
}