/* Ocleiria Toolbox  page de contact */
.container--narrow { max-width:680px; }

.contact { display:flex; flex-direction:column; gap:16px; }
.contact .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact .field { margin:0; }
.contact .field > label { display:block; font-size:.85rem; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.contact input[type="text"], .contact input[type="email"], .contact textarea {
  width:100%; font-family:var(--font-body); font-size:.98rem; padding:11px 13px;
  border:1px solid var(--border-color); background:var(--card-bg); color:var(--text-primary);
  border-radius:var(--radius); transition:var(--transition);
}
.contact textarea { resize:vertical; min-height:150px; line-height:1.5; }
.contact input:focus, .contact textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.contact .actions { display:flex; align-items:center; gap:14px; margin-top:2px; }
.contact .loading { display:inline-flex; align-items:center; gap:8px; color:var(--text-secondary); font-size:.9rem; }
.contact .spinner { width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border-color); border-top-color:var(--accent); animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.contact-ok {
  color:var(--ok); font-size:.95rem; padding:12px 14px; border:1px solid var(--ok);
  border-radius:var(--radius); background:color-mix(in srgb, var(--ok) 8%, transparent);
}
.contact-err {
  color:var(--down); font-size:.9rem; padding:12px 14px; border:1px solid var(--down);
  border-radius:var(--radius); background:color-mix(in srgb, var(--down) 8%, transparent);
}

/* Honeypot : invisible pour l'humain, présent pour les bots */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

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