/* ==========================================================
   PAGE PARTICIPER — formulaire bénévole et contact (participer.html, merci.html)
   ========================================================== */

/* ---------- Mise en page ---------- */
.join { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-6); align-items: start; }
.join__privacy { margin-top: var(--space-4); padding: var(--space-3); background: var(--orange-50); border-left: 3px solid var(--navy-900); }
.join__privacy h3 { font-size: 1rem; margin-bottom: .4rem; }
.join__privacy p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 900px) { .join { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- Formulaire ---------- */
.vol-form { background: var(--white); padding: var(--space-4); box-shadow: var(--shadow); border-top: 4px solid var(--filet); }
.vol-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field--full { grid-column: 1 / -1; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--navy-900); margin-bottom: .4rem; }
.field label em { font-style: normal; font-weight: 500; font-size: .75rem; color: var(--accent-text); margin-left: .35rem; }
.field input {
  width: 100%; min-height: 48px; padding: .75rem .9rem; font: 500 1rem var(--font); color: var(--ink);
  background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: var(--radius);
  transition: border-color .2s, background .2s;
}
.field input:focus { outline: none; border-color: var(--navy-900); background: var(--white); box-shadow: 0 0 0 3px rgba(6, 43, 102, .12); }
.vol-form__hint { font-size: var(--fs-sm); color: var(--muted); margin: var(--space-2) 0 0; }
.vol-form__error { margin: var(--space-2) 0 0; padding: .7rem .9rem; background: #FDECEF; color: var(--red-700); font-weight: 600; font-size: var(--fs-sm); border-left: 3px solid var(--red-600); }
.vol-form__consent { display: flex; gap: .75rem; align-items: flex-start; margin: var(--space-3) 0; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.vol-form__consent input { width: 20px; height: 20px; flex: none; margin-top: .15rem; accent-color: var(--navy-900); }
.vol-form .btn { width: 100%; }
@media (max-width: 560px) { .vol-form { padding: var(--space-3); } .vol-form__grid { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-wa { margin-bottom: var(--space-4); white-space: normal; text-align: center; line-height: 1.4; }

/* ---------- Page merci ---------- */
.thanks { padding-block: clamp(5rem, 4rem + 6vw, 9rem); }
.thanks .signature { margin-bottom: var(--space-3); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }