/* Contact : composants propres à la page (mise en page 2 colonnes, canaux, confirmation). */
[hidden] { display: none !important; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-side .h3 { margin-bottom: 18px; }
.contact-side .h3 em, .contact-ok .h3 em, .contact-main .h3 em { font-style: italic; color: var(--violet); }
.contact-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-channels .card { display: block; height: 100%; }
.contact-channels .card-title { overflow-wrap: anywhere; }
.contact-intro { margin: 6px 0 22px; }
.contact-ok { padding: clamp(28px, 4vw, 48px); background: var(--ok-tint); border-color: transparent; box-shadow: inset 3px 0 0 var(--ok); }
.contact-ok:focus { outline: none; }
.contact-ok:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.contact-ok .k { color: var(--ok); }
.contact-ok .cta-row { margin-top: 22px; }
.contact-main .note:focus { outline: 2px solid var(--violet); outline-offset: 2px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-main { order: -1; } }