/* ============================================================================
   REKOV — 06 · Diagnostic gratuit
   ----------------------------------------------------------------------------
   Le formulaire devient une PIÈCE : un panneau posé sur le papier de la
   section, avec sa tête, sa référence et son pied. Trois champs seulement
   (brief §3) — la densité vient du soin, pas du nombre de questions.
============================================================================ */

/* ---- Colonne de gauche ---- */
.ct-next {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 2px solid var(--fg);
  padding-top: 0.9rem;
}
.ct-next__k {
  display: block; margin-bottom: 0.5rem;
  font-family: var(--fm); font-size: 0.5rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.ct-step {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 0 clamp(0.9rem, 2vw, 1.6rem);
  padding: 0.85rem 0; border-bottom: 1px solid var(--rule);
  font-size: 0.875rem; line-height: 1.55; color: var(--fg-2);
  align-items: baseline;
}
/* Le repère est temporel, pas ordinal : ce qui rassure ici n'est pas le rang
   de l'étape mais le délai. */
.ct-step b {
  font-family: var(--fm); font-weight: 400;
  font-size: 0.5rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg);
}

/* ---- Le panneau ---- */
.form {
  background: var(--blanc);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--fg);
  padding: 0;
}
.form__hd {
  display: flex; align-items: baseline;
  padding: clamp(0.9rem, 1.8vw, 1.2rem) clamp(1.1rem, 2.4vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
}
.form__t {
  font-family: var(--fm); font-size: 0.5625rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg);
}
.form__body { padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1.1rem, 2.4vw, 1.9rem); }

/* ---- Les champs ----
   Encadrés, pas soulignés : un filet inférieur seul ne dit pas où finit la
   zone de frappe, et sur un fond blanc il se lit comme une ligne de cahier.
   Le cadre complet donne une cible franche — rayon 0, comme tout le reste. */
.field + .field { margin-top: clamp(1.1rem, 2.2vw, 1.5rem); }
.field label {
  display: flex; align-items: baseline; gap: 0.5em;
  font-family: var(--fm); font-weight: 400; font-size: 0.5rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2);
  margin-bottom: 0.5rem;
}
.field label i {
  font-style: normal; opacity: 0.7; letter-spacing: 0.1em;
}
.form .field input {
  width: 100%; display: block;
  background: var(--clair-2);
  border: 1px solid var(--rule);
  padding: 0 0.9rem;
  min-height: 52px;
  font-family: inherit; font-size: 0.9375rem; font-weight: 500;
  color: var(--fg);
  transition: border-color var(--t-med) var(--ease),
              background-color var(--t-med) var(--ease);
}
.form .field input::placeholder { color: var(--fg-2); opacity: 0.6; font-weight: 400; }
.form .field input:hover { border-color: var(--fg-2); }
/* Le focus se voit à deux signes : le cadre passe à l'accent et le fond
   s'éclaircit. Un seul des deux serait discutable en plein soleil. */
.form .field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--blanc);
}
.field__hint { display: block; margin-top: 0.5rem; font-size: 0.72rem; line-height: 1.5; color: var(--fg-2); }

/* ---- Le récapitulatif d'estimation ----
   Il n'apparaît qu'une fois l'estimation utilisée : un bloc vide qui annonce
   « aucun critère » n'apporte rien et occupe la place. */
.form__recap {
  margin-top: clamp(1.1rem, 2.2vw, 1.5rem);
  border-left: 2px solid var(--accent);
  padding: 0.6rem 0 0.6rem 0.9rem;
  display: none;
}
.form__recap.is-on { display: block; }
.form__recap__k {
  display: block; margin-bottom: 0.25rem;
  font-family: var(--fm); font-size: 0.4375rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.form__recap .small { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--fg-2); }

/* ---- Le pied ---- */
.form__foot {
  margin-top: 0;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.9rem) clamp(1.2rem, 2.4vw, 1.8rem);
  border-top: 1px solid var(--rule);
  background: var(--clair-2);
}
.form__legal { margin: 1rem 0 0; font-size: 0.6875rem; line-height: 1.55; color: var(--fg-2); }
.form__status:empty { display: none; }

@media (max-width: 620px) {
  .ct-step { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}

/* ---- La voie téléphonique ----
   Un cartouche : encadré au filet, intitulé posé à cheval sur le bord
   supérieur — la légende d'un cadre de plan. C'est délibérément PAS un second
   CTA : le socle l'interdit et le formulaire reste l'action principale. Le
   cartouche donne au numéro une présence propre sans emprunter ni l'aplat ni
   la forme du bouton primaire, donc sans diviser l'intention.

   L'intitulé masque le filet derrière lui en peignant le fond de section :
   c'est ce qui lui donne l'air d'être posé DANS le trait plutôt qu'au-dessus.
   Il tire donc sa couleur de --bg, jamais d'une valeur littérale — sinon il
   trancherait dès que la section change de registre. */
.tel {
  position: relative;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--rule);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.4rem) clamp(0.9rem, 1.8vw, 1.2rem);
}
.tel__k {
  position: absolute; top: 0; left: clamp(1rem, 2vw, 1.4rem);
  transform: translateY(-50%);
  background: var(--bg); padding: 0 0.6em;
  font-family: var(--fm); font-size: 0.5rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2);
}
.tel__n {
  font-weight: 800; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem);
  letter-spacing: -0.02em; color: var(--fg);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-med) var(--ease);
}
.tel__n:hover { color: var(--accent); }