/* css/contact.css : Nous joindre (points de service + formulaire). Tokens de styles.css seulement. */

/* Points de service */
.points { display: grid; gap: 48px; }
.points-cje { border-top: 2px solid var(--ink); padding-top: 18px; }
.points-cje > h3 { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.6rem; font-variation-settings: "wdth" 72; }
.points-cje > h3::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.points-cje > p { margin: 6px 0 0; color: var(--ink-soft); }
.points-liste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px 32px; }
.point { border-left: 4px solid var(--c); padding: 2px 0 2px 16px; }
.point h4 { margin: 0 0 6px; font-size: 1.1rem; }
.point address { font-style: normal; color: var(--ink-soft); }
.point p { margin: 6px 0 0; color: var(--ink-soft); }
.point a { font-weight: 600; color: var(--ink); }
.point .point-liens { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Formulaire */
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-content: start; }
.contact-large { grid-column: 1 / -1; margin: 0; }
.contact-champ label { display: block; font-weight: 700; margin-bottom: 6px; }
.facultatif { font-weight: 400; color: var(--ink-soft); }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea {
  width: 100%; font: inherit; padding: 10px 12px; border: 2px solid var(--ink-soft); border-radius: 3px; background: #fff; color: var(--ink);
}
.contact-form textarea { resize: vertical; }
.contact-aide { margin: 6px 0 0; font-size: .9rem; color: var(--ink-soft); }
.contact-aide:empty { display: none; }
.contact-consent { display: flex; gap: 10px; align-items: flex-start; }
.contact-consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--spruce); }
.contact-consent label { color: var(--ink-soft); }
.contact-form .button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.contact-piege { position: absolute; left: -9999px; }

@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } }