/* ════════════════════════════════════════════════════════════════════
   Win'Event — pages/contact.css
   NB : --error est un état SYSTÈME (accessibilité), hors palette de marque.
   ════════════════════════════════════════════════════════════════════ */
@layer pages {
  :root { --error: #a3341f; } /* terracotta sombre, AA sur craie — usage : messages d'erreur */

  .contact-layout { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
  @media (min-width: 880px) { .contact-layout { grid-template-columns: 1.15fr 0.85fr; } }

  /* ── Formulaire ────────────────────────────────────────────────── */
  .form {
    background: #fff;
    border: 1px solid var(--line-chalk);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    box-shadow: var(--shadow-1);
  }
  .form-grid { display: grid; gap: 1.2rem; }
  @media (min-width: 560px) { .form-grid { grid-template-columns: 1fr 1fr; } }
  .field { display: grid; gap: 0.4rem; }
  .field--full { grid-column: 1 / -1; }
  .field > label {
    font-family: var(--font-body); font-weight: 500;
    font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--graphite);
  }
  .field .req { color: var(--bronze); }
  .field .hint { font-size: var(--fs-small); color: var(--on-chalk-mut); text-transform: none; letter-spacing: 0; }

  .input, .select, .textarea {
    width: 100%;
    /* 16px minimum → pas de zoom iOS */
    font-size: max(16px, 1rem);
    font-family: var(--font-body);
    color: var(--graphite);
    background: var(--chalk);
    border: 1px solid var(--line-chalk);
    border-radius: var(--r-md);
    padding: 0.8rem 0.95rem;
    min-height: 48px;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
  }
  .textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
  .input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201,162,39,.25);
  }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(163,52,31,.14);
  }
  .field-error {
    display: block; min-height: 1.1em;
    font-size: var(--fs-small); color: var(--error);
  }
  .field-error:not(:empty)::before { content: "⚠ "; }

  /* Case de consentement RGPD */
  .consent { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
  .consent input { width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; accent-color: var(--bronze); }
  .consent label { font-size: var(--fs-small); color: var(--on-chalk-mut); line-height: 1.5; text-transform: none; letter-spacing: 0; }
  .consent a { color: var(--bronze); }

  .form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0.5rem; }
  .form .btn--primary { border-color: var(--bronze); color: var(--bronze); }
  .submit[data-busy="true"] { opacity: 0.7; cursor: progress; }

  /* Honeypot : masqué en CSS (pas type=hidden), hors flux et hors focus */
  .hp {
    position: absolute !important;
    left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
  }

  /* Statut d'envoi */
  .form-status {
    grid-column: 1 / -1;
    margin-top: 0.5rem; padding: 0; border-radius: var(--r-md);
    font-size: var(--fs-body);
  }
  .form-status:not(:empty) { padding: 0.9rem 1.1rem; }
  .form-status--success { background: rgba(138,107,31,.1); border: 1px solid var(--bronze); color: var(--graphite); }
  .form-status--error { background: rgba(163,52,31,.08); border: 1px solid var(--error); color: var(--error); }

  /* ── Aside coordonnées ─────────────────────────────────────────── */
  .contact-aside { display: grid; gap: 1.5rem; align-content: start; }
  .contact-card {
    padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
    border: 1px solid var(--line-chalk);
    border-radius: var(--r-lg);
    background: var(--chalk-2);
  }
  .contact-card h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
  .contact-card ul { list-style: none; padding: 0; display: grid; gap: 1rem; }
  .contact-card a, .contact-card li { display: flex; align-items: center; gap: 0.75rem; color: var(--graphite); }
  .contact-card a:hover { color: var(--bronze); }
  .contact-card svg { width: 20px; height: 20px; color: var(--bronze); flex: none; }
  .contact-note { font-size: var(--fs-small); color: var(--on-chalk-mut); }
}