/* Contact (maquettes p52-54) : panneau sombre à gauche, tunnel en étapes à droite ; empilés sur mobile. */
.contact {
    padding-block: var(--space-12) var(--section-padding);
}
.contact__grid {
    display: grid;
    gap: var(--space-8);
    align-items: start;
}
@media (min-width: 960px) {
    .contact__grid {
        grid-template-columns: 5fr 7fr;
        gap: var(--space-16);
    }
}

.contact-intro {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-8);
    border-radius: var(--radius-panel);
    background-color: var(--nuit);
    color: var(--color-on-dark);
}
.contact-intro h1 {
    margin: 0;
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
}
.contact-intro__text {
    margin: 0;
    color: color-mix(in srgb, var(--papier) 82%, transparent);
}
.contact-intro__steps {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.contact-intro__steps li {
    display: flex;
    gap: var(--space-3);
}
.contact-intro__steps .label {
    color: var(--orange);
}
.contact-intro__steps strong {
    display: block;
}
.contact-intro__note {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--papier) 20%, transparent);
    color: color-mix(in srgb, var(--papier) 82%, transparent);
    font-size: 0.875rem;
}
.contact-intro__note .icon {
    flex: none;
    color: var(--orange);
}

/* Barre de progression : un segment par étape. */
.contact-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}
.contact-progress__bar {
    height: 4px;
    border-radius: var(--radius-pill);
    background-color: var(--color-border-subtle);
}
.contact-progress__bar.is-done {
    background-color: var(--orange);
}
.contact-progress__label {
    margin: var(--space-3) 0 var(--space-6);
    color: var(--color-text-muted);
}

.contact-step {
    display: grid;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    border: 0;
}
/* Un fieldset ne se met pas en grille de façon fiable (légende à part) : espacements explicites. */
fieldset.contact-step {
    display: block;
}
.contact-step > legend {
    padding: 0;
}
.contact-step__title {
    margin: 0;
    font-size: var(--fs-h3);
}
fieldset.contact-step .contact-step__title {
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
}
.contact-step__intro {
    margin: var(--space-2) 0 var(--space-6);
    color: var(--color-text-muted);
}
fieldset.contact-step > .field__error {
    margin: calc(var(--space-6) * -1 + var(--space-2)) 0 var(--space-4);
}
.contact-topics {
    display: grid;
    gap: var(--space-3);
}
@media (min-width: 560px) {
    .contact-topics {
        grid-template-columns: 1fr 1fr;
    }
}
.contact-topics .choice {
    min-height: 64px;
    font-weight: 500;
}
.contact-topics .icon {
    flex: none;
    color: var(--color-text-accent);
}

.contact-question {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
}
.contact-question > legend {
    padding: 0;
    margin-bottom: var(--space-3);
}
.contact-question__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.contact-question .choice--chip:has(input:checked) {
    color: var(--espresso);
}

.contact-attached {
    margin: 0;
}
.contact-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
}

/* Champ piège anti-spam : hors écran, jamais atteint au clavier. */
.contact-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contact-consent {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.contact-errors {
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-left: 4px solid var(--color-error);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
}
.contact-errors p {
    margin: 0 0 var(--space-2);
    font-weight: 600;
}
.contact-errors ul {
    margin: 0;
    padding-left: var(--space-6);
}
.contact-errors a {
    color: var(--color-error);
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
}
.contact-actions .btn {
    margin-left: auto;
}
.contact-actions button.link-action {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}
/* Le header est collant : un élément focalisé ne doit pas passer dessous. */
.contact-form [tabindex="-1"] {
    scroll-margin-top: 120px;
}

.contact-done {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    padding: var(--space-8);
    border-radius: var(--radius-panel);
    background-color: var(--color-surface);
}
.contact-done h2 {
    margin: 0;
    font-size: var(--fs-h3);
}
.contact-done p {
    margin: 0;
    color: var(--color-text-muted);
}
.contact-done__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--sauge) 18%, #FFFFFF);
    color: var(--sauge);
}