/* ============================================================
   ERP+ : Coquille chrome-card (V1.3)

   Feuille de coquille des surfaces d'authentification (login,
   register, reset-password, activate ; refonte #391, refs #364).
   Porte la coquille carte-centree (chrome minimal : barre logo plus
   carte unique centree sur fond creme) PAR-DESSUS le trio canonique
   erp-tokens.css / erp-typography.css / erp-components.css.

   Doctrine (SKILL) : aucune couleur en dur. Toute couleur passe par
   var(--erp-*) ou color-mix(... var(--erp-*) ...). Tout espacement par
   var(--sp-*), toute police par var(--erp-font-*), tout rayon par
   var(--radius-*). Aucun gradient, aucune ombre hors --shadow-1/2 et
   :focus-visible. Recettes portees du kit
   docs/design/system-v1.3/system/system.css (section 5), les rgba
   litteraux du kit re-exprimes en tokens.
   ============================================================ */

/* ------------------------------------------------------------
   1. Wordmark (typographique, tokenise)
   Identique au wordmark de chrome-marketing.css : les deux coquilles
   ne sont jamais chargees ensemble (marketing vs authentification),
   donc aucun conflit de cascade. Defini ici parce que
   chrome-marketing.css n'est pas charge sur les surfaces d'auth.
   ------------------------------------------------------------ */
.erp-logo {
  font-family: var(--erp-font-serif); font-weight: 500; font-size: 22px;
  letter-spacing: -0.01em; color: var(--erp-marine); line-height: 1;
  display: inline-flex; align-items: baseline; text-decoration: none;
}
.erp-logo .erp-logo__plus { color: var(--erp-terracotta); font-style: italic; padding-left: 1px; }

/* ------------------------------------------------------------
   2. Coquille carte-centree (chrome minimal)
   ------------------------------------------------------------ */
/* box-sizing: border-box pose au socle (erp-components.css, DA16), plus de
   re-declaration ici. */
.chrome-card {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--erp-cream);
}
.chrome-card__bar {
  position: relative; height: 68px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-5); border-bottom: 1px solid var(--erp-marine-line);
}
.chrome-card__back {
  position: absolute; left: var(--sp-5); top: 50%; transform: translateY(-50%);
}
/* align-content et row-gap poses au lot LOT-C-02 (article R186.1) : la zone
   principale porte desormais deux items, la carte puis le filet juridique. Sans
   align-content, les deux rangees automatiques se partagent la hauteur restante
   et le filet derive vers le bas de l'ecran au lieu de se tenir sous la carte.
   Le groupe des deux reste centre, ce qui tient la pose arretee : sous la carte,
   jamais dedans, centre dans la zone principale. */
.chrome-card__main {
  flex: 1; display: grid; place-items: center; align-content: center;
  row-gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-5);
}

/* ------------------------------------------------------------
   3. Carte d'authentification
   Le visuel de la carte (filet terracotta, ombre, radius, bordure
   tokenisee) est porte par .erp-card du socle. .auth-card ne fait que
   contraindre la largeur ; il sert aussi de point d'ancrage au
   bascule de titre cote JS (selecteur `.auth-card h2`).
   ------------------------------------------------------------ */
/* padding sur var(--sp-7) (48px) : capte du prototype system.css .auth-card,
   override le --card-padding (32px) du socle .erp-card pour retrouver la
   proportion portrait. Filet ::before realigne sur le meme retrait. */
.auth-card { width: 100%; max-width: 420px; padding: var(--sp-7); }
.auth-card::before { top: var(--sp-7); }
.auth-card--wide { max-width: 500px; }
.auth-card__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-card__foot {
  margin-top: var(--sp-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  font-family: var(--erp-font-sans); font-size: var(--t-small);
  color: var(--erp-fg-3);
}
.auth-card__section {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--erp-rule);
}

/* ------------------------------------------------------------
   4. Messages d'etat (erreur / succes)
   Terracotta et marine uniquement (doctrine couleurs, jamais de
   rouge ni de vert). Le display est pilote par le JS de page (toggle
   none/block au submit), donc volontairement non force ici.
   ------------------------------------------------------------ */
.auth-msg {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-1);
  font-family: var(--erp-font-sans); font-size: var(--t-small); line-height: 1.45;
  background: var(--erp-white); border: 1px solid var(--erp-rule-strong);
  border-left: 3px solid var(--erp-marine); margin-bottom: var(--sp-4);
}
.auth-msg--error   { border-left-color: var(--erp-terracotta-dk); color: var(--erp-terracotta-dk); }
.auth-msg--success { border-left-color: var(--erp-marine); color: var(--erp-fg-2); }

/* ------------------------------------------------------------
   5. Section professionnelle (register) : bloc societe et SIRET.
   Filet terracotta (ex-gold), fond creme. Le mecanisme de reveal
   conditionnel (.pro-section / .pro-section.open) est retire en #478 :
   l'inscription est reservee aux profils professionnels, le bloc est
   desormais toujours visible.
   ------------------------------------------------------------ */
.pro-section-inner {
  border-left: 3px solid var(--erp-terracotta);
  background: var(--erp-cream-soft);
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-1) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.pro-section-inner .pro-title {
  font-family: var(--erp-font-sans); font-size: 12px; font-weight: 700;
  color: var(--erp-terracotta-text); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: var(--sp-3);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ------------------------------------------------------------
   6. Indicateur de robustesse du mot de passe (register, reset)
   Decision #391 : l'echelle 4 couleurs rouge->vert du legacy est hors
   palette (ni rouge ni vert en doctrine). Le signal passe par la
   LONGUEUR de remplissage (25/50/75/100 %) plus le label texte. La
   barre est marine, le track neutre. Aucune couleur-par-niveau.
   ------------------------------------------------------------ */
.pwd-strength { margin-top: var(--sp-2); }
.pwd-strength-track {
  height: 4px; background: var(--erp-rule);
  border-radius: var(--radius-1); overflow: hidden;
}
.pwd-strength-bar {
  height: 100%; width: 0; border-radius: var(--radius-1);
  background: var(--erp-marine); transition: width 0.3s ease;
}
.pwd-strength-text {
  font-family: var(--erp-font-sans); font-size: 12px;
  margin-top: 3px; color: var(--erp-fg-3);
}

/* ------------------------------------------------------------
   7. Autocomplete BAN (register, adresse) : la liste deroulante est
   creee par public/js/ban-autocomplete.js, stylee ici en tokens.
   ------------------------------------------------------------ */
.ban-ac-wrapper { position: relative; }
.ban-ac-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--erp-white); border: 1px solid var(--erp-rule-strong);
  border-top: none; border-radius: 0 0 var(--radius-2) var(--radius-2);
  box-shadow: var(--shadow-2); z-index: 1000;
  max-height: 220px; overflow-y: auto; display: none;
}
.ban-ac-list.open { display: block; }
.ban-ac-list .autocomplete-item {
  padding: 9px 12px; cursor: pointer; font-size: 12px;
  border-bottom: 1px solid var(--erp-rule);
  display: flex; align-items: flex-start; gap: 8px;
  transition: background-color 0.1s;
}
.ban-ac-list .autocomplete-item:last-child { border-bottom: none; }
.ban-ac-list .autocomplete-item:hover,
.ban-ac-list .autocomplete-item.highlighted {
  background: color-mix(in srgb, var(--erp-marine) 8%, var(--erp-white));
}
.ban-ac-list .ac-icon { font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.ban-ac-list .ac-main { font-family: var(--erp-font-sans); font-weight: 600; color: var(--erp-fg-1); }
.ban-ac-list .ac-context { font-family: var(--erp-font-sans); font-size: 11px; color: var(--erp-fg-3); }