/* ==========================================================================
   vm-mot-de-passe.css - parcours de connexion et champs mot de passe
   --------------------------------------------------------------------------
   Renomme depuis connexion.css le 11/09/2026 : le fichier sert desormais
   sept pages, pas seulement la connexion.

   Charge via $donneesSupplementairesHeader par connexion.php,
   form-nouveau-mot-de-passe.php et enregistrement.php ; via un <link> pose
   par profiles-header.php et bo-profiles-headerNEW.php pour les pages du
   back-office (Header.php n'y est pas modifiable).

   Script associe : js/vm-mot-de-passe.js. Aucun hex : tokens de vm-tokens.css.
   ========================================================================== */

/* ---- connexion.php : bascule connexion / mot de passe oublie ----
   Sans JavaScript : le lien "Mot de passe oublie ?" pointe vers #mdp-oublie,
   la pseudo-classe :target affiche ce bloc et masque la connexion. Apres une
   erreur, le formulaire (action="#mdp-oublie") ramene sur le meme etat. */
.vm-cx-reinit { display: none; }

.vm-cx:has(#mdp-oublie:target) #bloc-connexion { display: none; }
.vm-cx:has(#mdp-oublie:target) #mdp-oublie     { display: block; }

/* Ancre sous la barre de navigation fixe */
#mdp-oublie,
#bloc-connexion { scroll-margin-top: var(--vm-header-offset); }

.vm-cx-reinit__titre {
  color: var(--vm-bleu);
  font-weight: var(--vm-fw-bold);
  font-size: var(--vm-fs-lg);
  margin: 0 0 var(--vm-space-3);
}

.vm-cx-reinit__retour { margin-top: var(--vm-space-4); }

/* Badge reCAPTCHA "inline" centre sous le bouton */
.vm-cx-captcha {
  display: flex;
  justify-content: center;
  margin-top: var(--vm-space-4);
}

/* ---- Controles visuels du mot de passe (form-nouveau-mot-de-passe.php,
   enregistrement.php, registerAjax10.php) ----
   .main devant : bat .main ul (couleur, marge) de custom.css. */
.main .vm-mdp-criteres {
  list-style: none;
  text-align: left;
  padding-left: 0;
  margin: var(--vm-space-2) 0 0;
  color: var(--vm-text);
  font-size: var(--vm-fs-sm);
}

.main .vm-mdp-criteres li,
.vm-mdp-accord {
  display: flex;
  align-items: center;
  gap: var(--vm-space-2);
  margin: 0 0 var(--vm-space-1);
}

.vm-mdp-accord {
  justify-content: flex-start;
  text-align: left;
  font-size: var(--vm-fs-sm);
  color: var(--vm-text);
  margin-top: var(--vm-space-2);
}

/* Icones : cercle vide en attente, coche verte quand le critere est rempli.
   La forme change avec la couleur : l'etat ne repose pas sur la couleur seule. */
.vm-mdp-ico { width: 1.1em; height: 1.1em; flex: none; }
.vm-mdp-ico--attente { color: var(--vm-gris-bord); }
.vm-mdp-ico--ok      { color: var(--vm-vert); display: none; }
.vm-mdp-ico--ok path { stroke: var(--vm-blanc); }

.is-ok > .vm-mdp-ico--attente { display: none; }
.is-ok > .vm-mdp-ico--ok      { display: inline-block; }

/* ---- Bouton "afficher le mot de passe" (form-nouveau-mot-de-passe.php,
   enregistrement.php, registerAjax10.php) ----
   Bouton pose dans le champ, a droite. Specificite renforcee : doit passer
   devant les regles d'input de .vm-form (custom.css). */
.vm-mdp-champ { position: relative; }

.vm-mdp-champ input[type="password"],
.vm-mdp-champ input[type="text"],
.vm-form .vm-mdp-champ input[type="password"],
.vm-form .vm-mdp-champ input[type="text"] {
  padding-right: 3rem;
  width: 100%;
}

.vm-mdp-oeil {
  position: absolute;
  top: 50%;
  right: var(--vm-space-1);
  transform: translateY(-50%);
  width: 44px;                 /* cible tactile minimale */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vm-bleu);
  cursor: pointer;
  border-radius: var(--vm-radius-sm);
}

.vm-mdp-oeil:focus-visible {
  outline: 2px solid var(--vm-bleu);
  outline-offset: 2px;
}

.vm-mdp-oeil__ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vm-mdp-oeil__ico--cacher { display: none; }
.vm-mdp-oeil.is-visible .vm-mdp-oeil__ico--voir   { display: none; }
.vm-mdp-oeil.is-visible .vm-mdp-oeil__ico--cacher { display: inline-block; }

/* Edge affiche son propre oeil dans les champs mot de passe : un seul suffit */
.vm-mdp-champ input::-ms-reveal { display: none; }

/* ---- Aide et message d'erreur des champs mot de passe ---- */
.vm-mdp-aide {
  margin: var(--vm-space-1) 0 0;
  font-size: var(--vm-fs-xs);
  color: var(--vm-text-muted);
  text-align: left;
}

.vm-mdp-erreur {
  margin: var(--vm-space-2) 0 0;
  font-size: var(--vm-fs-sm);
  font-weight: var(--vm-fw-semi);
  color: var(--vm-rose);
  text-align: left;
}

.vm-mdp-erreur:empty { display: none; }

/* ---- Back-office ----
   Les pages du back-office heritent des styles de pro-custom.css et de
   backoffice.css. Deux points a neutraliser pour que le bouton oeil se pose
   correctement dans le champ. */
.bo-card .vm-mdp-champ,
.col-xl-4-5 .vm-mdp-champ { margin-bottom: 0; }

.bo-card .vm-mdp-criteres,
.col-xl-4-5 .vm-mdp-criteres { margin-bottom: var(--vm-space-2); }