/* forms.css — formulaire de contact, lien retour, footer. */

/* Pas de padding ici : ça décalerait le <h1> par rapport à #app (88px/16px
   de padding, déjà appliqués à toutes les pages) — même logique que
   .cart-page (shop.css) : seul max-width + margin:auto, le <h1> de chaque
   page reste à la même position quel que soit son wrapper. */
.contact-page {
    max-width: 760px;
    margin: 0 auto;
}

.contact-page .contact-form {
    margin-top: 18px
}

.contact-form {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Le seul <p> direct de .contact-page en dehors de .page-header/.contact-form
   est la ligne "Or directly via email" — centrée pour matcher le formulaire
   juste au-dessus. */
.contact-page > p {
    text-align: center;
}

.form-row {
    display: flex;
    gap: 12px
}

.form-row input {
    flex: 1
}

input,
textarea,
button {
    font: inherit
}

input,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 10px
}

textarea {
    resize: none
}

button {
    background: #000;
    color: #fff;
    padding: 10px 16px;
    border: 0;
    cursor: pointer
}

/* Back link */
.back-link {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    position: fixed;
    background: #fff;
    padding: 10px;
    z-index: 40
}

/* Footer styling and social links */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding: 14px 0;
    width: 100%;
    margin-top: auto;
}

.site-footer .social-links a {
    text-decoration: none;
    color: var(--accent);
    padding: 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-footer .social-links svg {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}