/* Contact : deux moyens d’échanger, une photo du lieu. */
.page-contact { min-height: 100svh; display: flex; flex-direction: column; }
.contact-page { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 90px); padding: 75px 8vw 90px; background: var(--ink); color: var(--paper); }
.contact-copy { min-width: 0; }
.contact-page h1 { font: clamp(42px, 4.7vw, 70px)/1.14 "Anton", Impact, sans-serif; letter-spacing: -.015em; margin: 24px 0 30px; }
.contact-page h1 span { color: var(--yellow); }
.contact-intro { max-width: 570px; font-size: 22px; line-height: 1.5; }
.contact-methods { margin-top: 35px; display: grid; gap: 28px; }
.contact-methods h2 { font-size: 16px; font-weight: 800; letter-spacing: .1em; margin-bottom: 10px; }
.contact-email { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(21px, 2vw, 27px); font-weight: 700; color: var(--yellow); text-decoration: underline; text-underline-offset: 5px; overflow-wrap: anywhere; }
.contact-whatsapp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding-top: 28px; border-top: 1px solid #777572; }
.contact-whatsapp p { font-size: 20px; }
.contact-whatsapp .qr-note { font-size: 16px; margin-top: 10px; color: var(--paper); }
.contact-qr { margin: 0; text-align: center; }
.contact-qr img { width: 96px; height: 96px; padding: 8px; background: var(--paper); }
.contact-qr figcaption { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.contact-photo { margin: 0; position: relative; border: 3px solid var(--paper); box-shadow: 9px 9px 0 var(--yellow); }
.contact-photo img { width: 100%; height: auto; }
.contact-photo figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 8px 12px; background: var(--ink); color: var(--yellow); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
@media (max-width: 900px) { .contact-page { grid-template-columns: 1fr; padding: 60px 6vw 75px; gap: 50px; } .contact-photo { max-width: 650px; } }
@media (max-width: 560px) { .contact-page { padding: 45px 24px 65px; } .contact-page h1 { font-size: 10.5vw; } .contact-intro { font-size: 20px; } .contact-whatsapp { gap: 14px; } .contact-qr img { width: 80px; height: 80px; } }

.contact-qr { max-width: 144px; }
.contact-qr img { width: 144px; height: 144px; padding: 0; background: #fff; }
.contact-qr a { display: block; }
@media (max-width: 560px) { .contact-qr { max-width: 112px; } .contact-qr img { width: 112px; height: 112px; } }