/* Portrait natif par défaut ; agrandissement modéré pour la version 3C retenue. */
.contact-photo {
    width: min(100%, 263px);
    aspect-ratio: auto;
    margin: 0 auto;
    border: 0;
    background: none;
}
.contact-photo img {
    display: block;
    width: 100%;
    height: auto;
}
.contact-layout { padding-inline: 6.5vw; }

/* Propositions locales, activées seulement par le paramètre contact-view. */
body.contact-preview > :not(#contact) { display: none !important; }
body.contact-preview { padding-top: 0; }
.contact-preview #contact { min-height: 100vh; padding: 42px 0; }
.contact-preview .contact-layout { padding-top: 32px; }
.contact-hero .form-field input,
.contact-hero .form-field textarea { min-width: 0; }
.contact-preview .form-field label:focus-within { color: var(--paper); }
.contact-hero .contact-form { min-width: 0; }
.contact-map-container { padding-bottom: 30px; }
.contact-map-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 10px 0 20px;
}
.contact-map-heading h3 { font: 400 24px var(--display); color: var(--paper); margin-bottom: 8px; }
.contact-map-heading p { color: var(--paper-dim); font-size: 15px; }
.contact-map {
    display: block;
    width: 100%;
    height: 320px;
    border: 1px solid var(--gold-soft);
    background: var(--ink-soft);
}

/* 1. Le portrait accueille, le formulaire occupe la colonne droite. */
.contact-portrait .contact-layout { grid-template-columns: .8fr 1.2fr; gap: 72px; }
.contact-portrait .contact-form { grid-column: 2; grid-row: 1; }
.contact-portrait .contact-side { grid-column: 1; grid-row: 1; }
.contact-portrait .contact-photo { order: -1; }
.contact-portrait .contact-card { border: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }

/* 2. Coordonnées de saisie par paires, portrait à droite. */
.contact-compact .contact-layout { grid-template-columns: 1.35fr .65fr; gap: 64px; }
.contact-compact .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-compact .form-field:nth-of-type(n+5),
.contact-compact .form-check,
.contact-compact .form-submit { grid-column: 1 / -1; }
.contact-compact .form-submit { justify-self: start; }
.contact-compact .contact-photo { order: -1; }
.contact-compact .contact-card { padding: 18px; }

/* 3. Coordonnées en bandeau, puis portrait et formulaire en regard. */
.contact-bandeau .contact-layout { grid-template-columns: .85fr 1.15fr; gap: 28px 64px; }
.contact-bandeau .contact-side { display: contents; }
.contact-bandeau .contact-side > .contact-phone { grid-column: 1; grid-row: 1; }
.contact-bandeau .contact-side > .contact-location { grid-column: 2; grid-row: 1; }
.contact-bandeau .contact-card { background: var(--ink-soft); }
.contact-bandeau .contact-photo { grid-column: 1; grid-row: 2; align-self: center; }
.contact-bandeau .contact-form { grid-column: 2; grid-row: 2; }

/* Variantes de la proposition 3 : adresse présentée uniquement avec la carte. */
.contact-bandeau .contact-side > .contact-phone {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 24px;
    align-items: center;
}
.contact-bandeau .contact-phone h4 { grid-column: 1; }
.contact-bandeau .contact-phone p { grid-column: 1; }
.contact-bandeau .contact-phone a.phone { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.contact-bandeau-carte .contact-layout { gap: 24px 54px; }
.contact-bandeau-carte .contact-form { grid-row: 2 / 4; }
.contact-bandeau-carte .contact-photo img { width: auto; max-height: 240px; margin: 0 auto; }
.contact-bandeau-carte .contact-map-panel { grid-column: 1; grid-row: 3; min-width: 0; }
.contact-bandeau-carte .contact-map { height: 240px; }
.contact-bandeau-carte .contact-map-heading { gap: 12px; margin-top: 0; }
.contact-bandeau-carte .contact-map-heading .btn-primary { padding: 10px 16px; }
.contact-bandeau-droite .contact-layout { grid-template-columns: 1.15fr .85fr; }
.contact-bandeau-droite .contact-form { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-bandeau-droite .contact-photo { grid-column: 2; width: min(100%, 300px); }
.contact-bandeau-droite .form-field:nth-of-type(n+5),
.contact-bandeau-droite .form-check,
.contact-bandeau-droite .form-submit { grid-column: 1 / -1; }
.contact-bandeau-droite .form-submit { justify-self: start; }

@media (max-width: 900px) {
    .contact-preview #contact { padding: 28px 0; }
    .contact-portrait .contact-layout,
    .contact-compact .contact-layout,
    .contact-bandeau .contact-layout { grid-template-columns: 1fr; gap: 32px; }
    .contact-portrait .contact-form,
    .contact-portrait .contact-side,
    .contact-bandeau .contact-form,
    .contact-bandeau .contact-photo,
    .contact-bandeau .contact-side > .contact-phone,
    .contact-bandeau .contact-side > .contact-location { grid-column: 1; grid-row: auto; }
    .contact-bandeau-carte .contact-map-panel { grid-column: 1; grid-row: auto; }
    .contact-portrait .contact-side { order: -1; }
    .contact-bandeau .contact-side > .contact-phone { order: -3; }
    .contact-bandeau .contact-side > .contact-location { order: -2; }
    .contact-bandeau .contact-photo { order: -1; }
}
@media (max-width: 540px) {
    .contact-compact .contact-form, .contact-bandeau-droite .contact-form { grid-template-columns: 1fr; }
    .contact-bandeau .contact-side > .contact-phone { display: block; }
    .contact-bandeau .contact-phone a.phone { margin-top: 8px; }
}