/* doc-project | public/assets/css/contact.css | compose une page contact chaleureuse, informative et simple à remplir sur mobile */
.contact-hero { position: relative; overflow: hidden; padding-block: 3.5rem 2rem; text-align: center; }
.contact-hero::before { position: absolute; z-index: -1; inset: -8rem auto auto 50%; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, var(--blush), transparent 68%); content: ""; transform: translateX(-50%); }
.contact-hero h1 { margin: .4rem 0 .8rem; }
.contact-hero p { max-width: 38rem; margin-inline: auto; color: var(--ink-soft); }
.contact-layout { display: grid; gap: 1.2rem; padding-bottom: 5rem; }
.contact-form, .contact-details { border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; padding: clamp(1.2rem, 4vw, 2.2rem); box-shadow: var(--shadow-sm); }
.contact-form h2, .contact-details h2 { margin-bottom: 1.2rem; }
.contact-form .button { margin-top: .4rem; }
.contact-details { position: relative; overflow: hidden; align-content: start; }
.contact-details dl { display: grid; gap: .8rem; margin: 0; }
.contact-details dl div { border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
.contact-details dt { color: var(--ink-soft); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.contact-details dd { margin: .2rem 0 0; font-weight: 750; }
.contact-details .notice { margin-top: 1.2rem; }
.contact-decoration { display: grid; min-height: 10rem; place-items: center; margin-top: 1.5rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--wine-dark), var(--rose)); color: white; }
.contact-decoration .icon { width: 4rem; height: 4rem; opacity: .85; }
@media (min-width: 860px) { .contact-layout { grid-template-columns: 1.25fr .75fr; gap: 2rem; } .contact-details { position: sticky; top: 8.5rem; } }