/* =========================================================
   BRAND NEW DAY — formulaires

   La premiere maquette ne comportait aucun formulaire : elle n'offrait qu'un
   lien mailto:. Ce fichier a donc fourni les regles manquantes, en reprenant
   les variables, les rayons et les rythmes de bnd-site.css — qui est la
   transposition fidele de la maquette et ne doit pas etre modifie. Charge
   apres lui depuis inc/assets.php.

   La maquette revue (charte V.2026.05) apporte sa propre famille .cf-* /
   .cform : une carte claire sur le fond cobalt de .final, avec un etat de
   succes .cform.sent pilote cote client. Elle ne couvre en revanche ni la
   zone de statut annoncee aux lecteurs d'ecran, ni les messages d'erreur par
   champ, ni le champ leurre, ni les textes d'aide — c'est-a-dire tout le
   repli sans JavaScript. Les regles ci-dessous restent donc necessaires, et
   .form-status, .form-error, .form-hint, .form-opt, .form-trap, .form-actions
   et .form-legal servent en outre le formulaire du Content Club
   (sections/waitlist-form.php), que la maquette ne decrit pas.

   Les couleurs par defaut sont celles du texte sur fond sombre (--d-tx,
   --d-2, --d-hair) : elles conviennent aux formulaires poses directement sur
   le cobalt de .final. Un formulaire place dans une carte .cform, elle
   claire, demandera de les revoir.
   ========================================================= */

/* ---------- grille : formulaire + colonne de contact direct ---------- */
.form-grid {
  position: relative; /* passe au-dessus de .final-bg, comme .final-cta */
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- carte du formulaire ---------- */
.form-card {
  position: relative; /* contient le champ leurre, sorti du flux */
  background: rgba(243, 238, 227, 0.05);
  border: 1px solid var(--d-hair);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 620px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.form-row .form-field {
  margin-top: 0;
}

.form-row + .form-field {
  margin-top: 18px;
}

/* ---------- etiquettes ----------
   Toujours visibles : un placeholder disparait des la saisie et n'est pas
   restitue de maniere fiable par les lecteurs d'ecran. */
.form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-2);
}

.form-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--d-3);
}

/* ---------- champs ---------- */
.form-control {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--d-tx);
  background: rgba(6, 13, 31, 0.45);
  border: 1px solid var(--d-hair-2);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  transition: border-color .18s ease, background .18s ease;
}

.form-control::placeholder {
  color: var(--d-3);
}

.form-control:hover {
  border-color: rgba(243, 238, 227, 0.36);
}

.form-control:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-color: var(--yellow);
  background: rgba(6, 13, 31, 0.65);
}

textarea.form-control {
  resize: vertical;
  min-height: 132px;
  line-height: 1.5;
}

/* Le champ signale en erreur par le serveur, et celui que le navigateur
   refuse une fois qu'il a ete quitte. :user-invalid plutot que :invalid :
   un champ requis encore vide ne doit pas rougir avant toute saisie. */
.form-control[aria-invalid='true'],
.form-control:user-invalid {
  border-color: var(--plasma);
}

/* ---------- messages d'aide et d'erreur ---------- */
.form-hint,
.form-error {
  font-size: 13px;
  line-height: 1.45;
}

.form-hint {
  color: var(--d-3);
}

.form-error {
  color: var(--plasma);
  font-weight: 600;
}

/* ---------- zone de statut (role="status") ----------
   L'element existe toujours dans le HTML : une region live ajoutee au moment
   de l'annonce n'est pas lue de maniere fiable. Tant qu'aucun message n'a ete
   pose, il n'a ni cadre ni marge et ne genere aucune ligne — il n'occupe donc
   aucune place. Le cadre n'apparait qu'avec l'attribut data-tone, pose par le
   serveur (repli sans JavaScript) ou par assets/bnd-site.js.
   :empty ne conviendrait pas : PHP laisse une ligne blanche dans l'element,
   et un nœud de texte, meme vide de sens, suffit a le rendre non vide. */
.form-status[data-tone] {
  display: block;
  border-radius: var(--r-sm);
  border: 1px solid var(--d-hair-2);
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--d-tx);
}

/* Le formulaire de contact de la maquette revue est une carte claire, alors que
   ces styles ont ete ecrits pour un formulaire pose sur le cobalt sombre de
   .final. Sans cette surcharge, le message de statut serait creme sur creme.
   Le formulaire du Content Club, lui, reste sur fond sombre : la regle est donc
   portee par .cform, pas appliquee globalement. */
.cform .form-status[data-tone] {
  color: var(--ink);
  border-color: var(--hair-2);
}

.form-status[data-tone='ok'] {
  border-color: var(--yellow);
  background: rgba(255, 224, 0, 0.12);
}

.form-status[data-tone='error'] {
  border-color: var(--plasma);
  background: rgba(255, 46, 99, 0.12);
}

/* ---------- pied du formulaire ---------- */
.form-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.form-actions .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.form-legal {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--d-3);
  max-width: 34ch;
}

/* ---------- champ leurre ----------
   Masque par le conteneur, jamais par un display:none pose sur le <input>
   lui-meme : ce motif-la est reconnu par les robots un peu serieux, alors
   qu'un champ sorti du flux reste, pour eux, un champ ordinaire.
   Il conserve son etiquette et reste hors de la tabulation. */
.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ---------- colonne de contact direct ---------- */
.form-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-top: 8px;
}

.form-aside-lead {
  font-weight: 800;
  font-size: clamp(19px, 1.6vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--d-tx);
}

.form-aside-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--d-2);
  max-width: 32ch;
}