/* Styles propres à la page Contact (s'ajoute à about.css) */
.org-name {
    text-align: center; margin: 0 0 5px; font-size: 18px; font-weight: bold;
    color: #C2540A;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 25px;
}
.contact-card { display: flex; flex-direction: column; align-items: center; }
.contact-card .icon { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.contact-card .detail { font-weight: bold; margin: 0 0 4px; overflow-wrap: anywhere; }
.contact-card .muted { color: #555; font-size: 14px; margin: 0 0 15px; }
.contact-card .btn { margin: auto 0 0; }

.split.top { align-items: start; }

.contact-form { display: grid; gap: 18px; margin-top: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: bold; font-size: 14px; }
.field input, .field select, .field textarea {
    font: inherit; padding: 10px 12px; border: 1px solid #aaa; border-radius: 5px; background: #fff; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary-blue); }
.consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; }
.consent input { width: auto; margin-top: 5px; }
.submit { border: none; cursor: pointer; font-size: 16px; margin: 0; align-self: flex-start; }
.form-status { margin: 12px 0 0; padding: 12px; background: #e8f1fd; border-left: 4px solid var(--primary-blue); }

.map { width: 100%; height: 380px; border: 0; border-radius: 8px; background: #dde5f2; }
.map-addr { margin: 10px 0 0; font-size: 14px; color: #555; }

.cta .btn { margin: 5px; }

/* Photo du bandeau de la page */
.page-hero { --hero-img: url('img3.jpeg'); --hero-pos: center 72%; }