/* ============================================================
   FORMULAIRES PARTAGÉS
   (page-login, page-account, submit-event-popup, submit-project-popup)
   ============================================================ */

/* ── Champs ───────────────────────────────────────────────── */
.reg-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.reg-field label { font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text); }
.reg-field input,
.reg-field select { font-family: "Archivo", sans-serif; font-size: 13px; color: var(--color-text); border: 1px solid var(--color-border-strong); padding: 9px 10px; background: #fff; outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box; appearance: none; -webkit-appearance: none; }
.reg-field input:focus,
.reg-field select:focus { border-color: var(--color-text); }
.reg-field.is-invalid input,
.reg-field.is-invalid select { border-color: var(--color-error); }
.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.req { color: var(--color-error); }

/* ── Actions ──────────────────────────────────────────────── */
.reg-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
/* Signature CTA commune dans style.css ; ici seul le padding. */
.connexion-btn-submit { padding: 10px 20px; }
.connexion-back { font-family: "Archivo", sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-muted); text-decoration: none; transition: color 0.2s; cursor: pointer; background: none; border: none; padding: 0; }
.connexion-back:hover { color: var(--color-text); }

/* ── Messages ─────────────────────────────────────────────── */
.connexion-message { font-family: "Archivo", sans-serif; font-size: 12px; padding: 8px 0; display: none; }
.connexion-message.is-error { color: var(--color-error); display: block; }
.connexion-message.is-success { color: var(--color-success); display: block; }

/* ── Page connexion ───────────────────────────────────────── */
.connexion-wrapper { max-width: 480px; margin: 60px auto; padding: 0 20px; }
.connexion-title { font-family: "The Bigmouth Regular", sans-serif; font-size: 28px; color: var(--color-text); margin: 0 0 24px; }
.connexion-subtitle { font-family: "Archivo", sans-serif; font-size: 13px; color: var(--color-text); margin: 0 0 20px; }
.connexion-email-row { display: flex; gap: 8px; align-items: stretch; }
.connexion-email-row input { font-family: "Archivo", sans-serif; font-size: 13px; color: var(--color-text); border: 1px solid var(--color-border-strong); padding: 9px 10px; background: #fff; outline: none; transition: border-color 0.2s; flex: 1; }
.connexion-email-row input:focus { border-color: var(--color-text); }
/* Signature CTA commune dans style.css ; ici padding + non-rétrécissement dans la rangée email. */
.connexion-btn-ok { padding: 10px 20px; flex-shrink: 0; }
.connexion-register-hint { font-family: "Archivo", sans-serif; font-size: 12px; color: var(--color-text); margin-top: 16px; }
.connexion-register-hint a { color: var(--color-text); text-decoration: underline; }
.connexion-register-hint a:hover { color: var(--color-main); }
.connexion-sent-text { font-family: "Archivo", sans-serif; font-size: 13px; color: var(--color-text); margin: 0 0 8px; }
.connexion-sent-hint { font-family: "Archivo", sans-serif; font-size: 12px; color: var(--color-muted); margin: 0 0 16px; }
.connexion-resend { font-family: "Archivo", sans-serif; font-size: 12px; color: var(--color-text); text-decoration: underline; cursor: pointer; }
.connexion-resend:hover { color: var(--color-main); }
.connexion-error-banner { font-family: "Archivo", sans-serif; font-size: 12px; color: var(--color-error); margin-bottom: 20px; }
.connexion-error-banner a { color: var(--color-error); text-decoration: underline; }


/* ── Consentement : petite case + phrase sur la même ligne ──────
   Sans ces règles, les génériques .reg-field s'appliquent à la case : `input { width:100% }`
   l'étire sur toute la largeur et `appearance:none` lui retire sa coche, ce qui rejette la
   phrase sur le côté. Et `label { text-transform:uppercase; font-weight:700 }` crierait. */
.reg-consent { margin-top: 4px; }
.reg-consent-label {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.reg-consent-label input[type="checkbox"] {
  width: 15px; height: 15px; flex-shrink: 0; margin: 1px 0 0; padding: 0;
  appearance: auto; -webkit-appearance: auto; accent-color: var(--color-main);
  border: 1px solid var(--color-border-strong); cursor: pointer;
}
.reg-consent-label span {
  font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 400; line-height: 1.5;
  text-transform: none; letter-spacing: 0; color: var(--color-text);
}
.reg-consent.is-invalid .reg-consent-label input[type="checkbox"] { outline: 1px solid var(--color-error); }
/* Texte du consentement en rouge quand invalide (rapatrié de style.css). */
.reg-consent.is-invalid .reg-consent-label { color: var(--color-danger); }

/* ============================================================
   CHAMPS DE PROFIL (templates/account/profile-fields.php)
   Partagés par l'inscription et la page compte — d'où leur place ici, dans la feuille
   chargée par les deux. Le bloc « Structure » n'apparaît que sur le compte.
   ============================================================ */

/* Branches pro / particulier : masquées par défaut, ProfileFieldsModule (core.js) ajoute
   .is-visible sur celle qui correspond. Sans le défaut masqué, les deux branches
   cligneraient au chargement, avant que le JS ne passe.
   Piloté par une CLASSE et non par un style inline : `style.display = ''` effacerait
   l'inline et laisserait la règle ci-dessous remasquer le champ. */
.pf-only-pro,
.pf-only-particulier { display: none; }
.pf-only-pro.is-visible,
.pf-only-particulier.is-visible { display: flex; }

/* ── Structure : entreprise choisie ─────────────────────────── */
.pf-company { position: relative; }
.pf-company-chosen {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-border-strong); padding: 8px 10px; background: #fff;
}
.pf-company-logo {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--color-fill) center/contain no-repeat; border: 1px solid var(--color-border);
}
.pf-company-name { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; flex: 1; min-width: 0; }
.pf-company-clear {
  background: none; border: none; cursor: pointer; padding: 0 4px;
  font-size: 14px; color: var(--color-muted); transition: color 0.2s;
}
.pf-company-clear:hover { color: var(--color-main); background: none; }

/* ── Structure : recherche ──────────────────────────────────── */
.pf-company-picker { position: relative; }
.pf-company-results {
  position: absolute; top: 100%; left: 0; width: 100%; z-index: 100;
  background: #fff; border: 2px solid var(--color-text); border-top: none;
  max-height: 220px; overflow-y: auto;
  /* Bordure noire + ombre : même exigence de visibilité que le champ lieu (.plf-results). */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.pf-company-results:empty { display: none; }
.pf-company-result {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
  border-bottom: 1px solid var(--color-border); transition: background 0.15s;
}
.pf-company-result:last-child { border-bottom: none; }
.pf-company-result:hover { background: var(--color-fill); }
.pf-company-result-txt { display: flex; flex-direction: column; min-width: 0; }
.pf-company-result-txt strong { font-family: "Archivo", sans-serif; font-size: 13px; }
.pf-company-result-txt em {
  font-family: "Archivo", sans-serif; font-size: 11px; font-style: normal; color: var(--color-muted);
}
.pf-company-none,
.pf-company-searching { padding: 10px; font-family: "Archivo", sans-serif; font-size: 12px; color: var(--color-text); }
.pf-company-searching { font-weight: 700; }

.pf-company-hint {
  font-family: "Archivo", sans-serif; font-size: 11px; color: var(--color-muted);
  margin: 6px 0 0; text-transform: none; letter-spacing: 0;
}
.pf-company-create {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: "Archivo", sans-serif; font-size: 11px; color: var(--color-text);
  text-decoration: underline; transition: color 0.2s;
}
.pf-company-create:hover { color: var(--color-main); background: none; }

/* ── Champ lieu (templates/account/place-field.php) ────────────
   Ville choisie dans une liste, pays déduit. Même grammaire visuelle que le sélecteur
   de structure ci-dessus : état « choisi » compact, ou recherche + liste déroulante. */
.plf-field { position: relative; }
.plf-chosen {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-border-strong); padding: 9px 10px; background: #fff;
}
.plf-chosen-label { font-family: "Archivo", sans-serif; font-size: 13px; flex: 1; min-width: 0; }
.plf-clear {
  background: none; border: none; cursor: pointer; padding: 0 4px;
  font-size: 14px; color: var(--color-muted); transition: color 0.2s;
}
.plf-clear:hover { color: var(--color-main); background: none; }

.plf-picker { position: relative; }
.plf-results {
  position: absolute; top: 100%; left: 0; width: 100%; z-index: 100;
  background: #fff; border: 2px solid var(--color-text); border-top: none;
  max-height: 220px; overflow-y: auto;
  /* Bordure noire + ombre portée : le menu doit être NETTEMENT visible, sinon la personne
     tape sa ville et passe au champ suivant sans comprendre qu'il faut choisir dans la liste. */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.plf-results:empty { display: none; }
.plf-result {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; cursor: pointer;
  border-bottom: 1px solid var(--color-border); transition: background 0.15s;
}
.plf-result:last-child { border-bottom: none; }
.plf-result:hover { background: var(--color-fill); }
.plf-result strong { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; }
.plf-result em {
  font-family: "Archivo", sans-serif; font-size: 11px; font-style: normal; color: var(--color-muted);
}
.plf-none, .plf-searching {
  padding: 10px; font-family: "Archivo", sans-serif; font-size: 12px; color: var(--color-text);
}
/* « Recherche… » en noir et gras : signal clair que la liste va se remplir — patientez et choisissez. */
.plf-searching { font-weight: 700; }
/* La valeur postée vit dans un input caché : sans cette règle, un lieu manquant marquerait
   en rouge un champ invisible et la personne ne verrait rien. */
.plf-field.is-invalid .plf-search { border-color: var(--color-error); }