/* ===========================================================================
   W.O.L.F. — Formulaire de contact / brief B2B (T8).
   Charge APRÈS wolf-components.css (qui porte déjà .wolf-input/.wolf-select/
   .wolf-textarea/.wolf-label/.wolf-error). Ici : mise en page UNE COLONNE,
   regroupements <fieldset>, cartes à cocher, récapitulatif d'erreurs, note de
   confidentialité, panneau d'accusé de réception. Zéro couleur en dur : tout
   passe par les tokens (clair/sombre gérés automatiquement).
   ======================================================================== */

/* Colonne de lecture confortable : une seule colonne, ~62ch. */
.wolf-container--narrow { max-width: 46rem; margin-inline: auto; }

.wolf-hero--form .wolf-hero__lead { max-width: 60ch; }
.wolf-promise {
  list-style: none;
  margin: var(--wolf-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wolf-space-2);
}

/* ---- Note « champs requis » + récapitulatif d'erreurs -------------------- */
.wolf-form__required-note {
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text-subtle);
}
.wolf-form__summary {
  margin-bottom: var(--wolf-space-8);
  padding: var(--wolf-space-4) var(--wolf-space-5);
  background: var(--wolf-color-danger-soft);
  border: var(--wolf-border-hairline) solid var(--wolf-color-danger);
  border-radius: var(--wolf-radius-lg);
}
.wolf-form__summary-title {
  font-weight: var(--wolf-weight-semibold);
  color: var(--wolf-color-danger);
  margin: 0 0 var(--wolf-space-2);
}
.wolf-form__summary-list { margin: 0; padding-inline-start: var(--wolf-space-5); }
.wolf-form__summary-list a { color: var(--wolf-color-danger); }

/* ---- Structure du formulaire : une question par ligne ------------------- */
.wolf-form { display: flex; flex-direction: column; gap: var(--wolf-space-10); }

.wolf-fieldset {
  border: 0;
  border-top: var(--wolf-border-hairline) solid var(--wolf-color-border);
  margin: 0;
  padding: var(--wolf-space-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--wolf-space-5);
}
.wolf-legend {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--wolf-tracking-wider);
  color: var(--wolf-color-accent-text);
  padding: 0;
}

/* ---- Cartes à cocher (type de besoin) — cliquables en entier ------------- */
.wolf-checkcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--wolf-space-3);
}
.wolf-checkcard {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--wolf-space-3);
  padding: var(--wolf-space-4);
  background: var(--wolf-color-field-bg);
  border: var(--wolf-border-hairline) solid var(--wolf-color-field-border);
  border-radius: var(--wolf-radius-md);
  cursor: pointer;
  transition: border-color var(--wolf-duration-fast) var(--wolf-ease),
              background var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-checkcard:hover { border-color: var(--wolf-color-border-strong); }
/* Case native masquée (mais focusable) — état porté par la carte. */
.wolf-checkcard input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.wolf-checkcard__box {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.15rem;
  /* Case vide : sa bordure est le seul repère → contraste composant ≥ 3:1
     (WCAG 1.4.11). On s'aligne sur --wolf-color-field-border (≥ 3.8:1). */
  border: var(--wolf-border-thick) solid var(--wolf-color-field-border);
  border-radius: var(--wolf-radius-sm);
  background: var(--wolf-color-bg);
  transition: border-color var(--wolf-duration-fast) var(--wolf-ease),
              background var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-checkcard__box::after {
  content: "";
  display: block;
  width: 0.35rem; height: 0.7rem;
  margin: 0.05rem auto 0;
  border: solid var(--wolf-color-accent-contrast);
  border-width: 0 var(--wolf-border-thick) var(--wolf-border-thick) 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-checkcard input:checked ~ .wolf-checkcard__box {
  background: var(--wolf-color-accent);
  border-color: var(--wolf-color-accent);
}
.wolf-checkcard input:checked ~ .wolf-checkcard__box::after { transform: rotate(45deg) scale(1); }
.wolf-checkcard:has(input:checked) {
  border-color: var(--wolf-color-accent);
  background: var(--wolf-color-accent-soft);
}
.wolf-checkcard:has(input:focus-visible) {
  outline: none;
  border-color: var(--wolf-color-focus);
  box-shadow: 0 0 0 3px var(--wolf-color-focus-halo);
}
.wolf-checkcard__text { display: flex; flex-direction: column; gap: 0.15rem; }
.wolf-checkcard__title { font-weight: var(--wolf-weight-medium); color: var(--wolf-color-text); }
.wolf-checkcard__desc  { font-size: var(--wolf-text-xs); color: var(--wolf-color-text-subtle); line-height: 1.4; }

/* Repli si :has() indisponible — la carte reste utilisable, sans surbrillance. */
@supports not selector(:has(*)) {
  .wolf-checkcard input { position: static; opacity: 1; width: auto; height: auto; }
  .wolf-checkcard__box { display: none; }
}

/* ---- Compteur de caractères (activé par JS) ----------------------------- */
.wolf-help { display: flex; justify-content: space-between; gap: var(--wolf-space-4); }
.wolf-counter { font-variant-numeric: tabular-nums; color: var(--wolf-color-text-subtle); white-space: nowrap; }

/* ---- Consentement RGPD -------------------------------------------------- */
.wolf-consent__label {
  display: flex;
  align-items: flex-start;
  gap: var(--wolf-space-3);
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text-muted);
  cursor: pointer;
}
.wolf-consent__label input {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--wolf-color-accent);
}
.wolf-consent a { color: var(--wolf-color-accent-text); text-underline-offset: 2px; }

/* ---- Actions + réassurance ---------------------------------------------- */
.wolf-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wolf-space-4) var(--wolf-space-6);
}
.wolf-form__reassure { font-size: var(--wolf-text-sm); color: var(--wolf-color-text-subtle); margin: 0; }

/* ---- Note de confidentialité -------------------------------------------- */
.wolf-privacy {
  margin-top: var(--wolf-space-12);
  padding: var(--wolf-space-6);
  background: var(--wolf-color-surface);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border-subtle);
  border-radius: var(--wolf-radius-lg);
}
.wolf-privacy__list {
  margin: var(--wolf-space-3) 0 0;
  padding-inline-start: var(--wolf-space-5);
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--wolf-space-2);
}

/* ---- Accusé de réception ------------------------------------------------ */
.wolf-sent { text-align: center; }
.wolf-sent .wolf-hero__actions { justify-content: center; margin-top: var(--wolf-space-6); }
.wolf-sent:focus-visible { outline: none; }

/* ---- Honeypot : hors écran (PAS display:none — plus de bots le remplissent) */
.wolf-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 560px) {
  .wolf-checkcards { grid-template-columns: 1fr; }
  .wolf-form__actions { flex-direction: column; align-items: stretch; }
  .wolf-form__actions .wolf-btn { width: 100%; }
}