/* ==========================================================================
   Inscription : l ordre des champs, et l habillage des deux nouveaux.

   POURQUOI UNE FEUILLE PLUTOT QU UNE RETOUCHE DU HTML.

   Le coeur de WordPress declenche `register_form` APRES le champ e-mail : tout
   champ ajoute par une extension atterrit donc forcement sous lui. La civilite,
   elle, doit se lire en premier. acces-client resout le meme probleme pour son
   bloc prenom/nom par une expression reguliere appliquee au HTML du formulaire.
   On ne refait PAS cela : empiler une seconde passe d expression reguliere sur
   la sienne est exactement la construction qui a deja casse une fois ici.

   L ordre est donc purement visuel. Le HTML n est pas touche, l ordre de
   tabulation suit le flux, et les deux passes du fournisseur continuent de
   trouver ce qu elles cherchent.

   CONSEQUENCE A CONNAITRE : si une future version d acces-client pose son
   propre `display` sur #registerform, cette regle cesse de s appliquer et les
   champs reviennent a l ordre du document, soit civilite et telephone sous le
   mot de passe. Le formulaire reste alors entierement utilisable, simplement
   moins bien range. C est une degradation, jamais une panne.
   ========================================================================== */

body.login-action-register #registerform{
	display:flex;
	flex-direction:column;
}

/* Tout ce qui n est pas nomme ci-dessous passe en fin de liste plutot qu en
   tete : `order` vaut 0 par defaut, ce qui ferait remonter en premier un
   element oublie, et notamment le champ cache `redirect_to`. */
body.login-action-register #registerform > *{order:50}

/* L ordre voulu : civilite, prenom, nom, e-mail, telephone, puis les deux
   champs de mot de passe. Prenom et nom vivent dans un meme bloc chez le
   fournisseur et restent donc solidaires, ce qui tombe bien : ils se suivent. */
body.login-action-register #registerform > .ielp-ins-civilite   {order:1}
body.login-action-register #registerform > .ac-name-fields      {order:2}
body.login-action-register #registerform > .ac-register-email-wrap{order:3}
body.login-action-register #registerform > .ielp-ins-telephone  {order:4}
body.login-action-register #registerform > .ac-password-fields  {order:5}
body.login-action-register #registerform > p.submit             {order:6}
body.login-action-register #registerform > .ac-legal-text       {order:7}

/* Le paragraphe du champ « Identifiant ».

   Le fournisseur masque l etiquette et le champ, mais laisse le <p> qui les
   entoure. En flux normal il se reduit a ses marges et ne se voit pas ; devenu
   element de flex, il garde ses marges et ouvre un blanc. On le masque donc
   entierement. L identifiant continue d etre soumis : il est rempli depuis
   l adresse e-mail par le filtre `pre_user_login` du fournisseur, et un champ
   masque est envoye comme un autre. */
body.login-action-register #registerform > p:first-of-type{display:none}

/* --------------------------------------------------------------------------
   Les deux champs ajoutes.

   Ils reprennent `.ac-field-wrap` du fournisseur, donc l etiquette flottante et
   les bordures sont deja fournies. Il ne reste ici que ce qui manque : la
   hauteur du menu deroulant, alignee sur celle des champs texte voisins, et le
   chevron, puisqu un `select` n en herite aucun.
   -------------------------------------------------------------------------- */

body.login form .ielp-ins-civilite,
body.login form .ielp-ins-telephone{
	margin:8px 0;
}

body.login form .ielp-ins-civilite select{
	width:100%;
	/*
	 * max-width EST LA DECLARATION QUI COMPTE ICI, pas width.
	 *
	 * Le corps de la page d identification porte la classe `wp-core-ui`, et la
	 * feuille d administration du coeur, wp-admin/css/forms.css, y pose
	 * « .wp-core-ui select { max-width: 25rem } ». 25rem font 400 pixels, pour
	 * une colonne de formulaire large de 546. Le menu deroulant s arretait donc
	 * a 400 et laissait un vide a sa droite, alors meme que width valait 100%.
	 * Une largeur ne franchit jamais une largeur maximale : il faut lever la
	 * seconde, ce que la premiere ne fait pas toute seule.
	 */
	max-width:none;
	height:56px;
	padding:22px 40px 6px 14px;
	border:1px solid #E0E0E9;
	border-radius:8px;
	background:#fff;
	font-size:15px;
	line-height:1.3;
	color:inherit;
	appearance:none;
	-webkit-appearance:none;
	/* Le chevron, en SVG encode : aucune requete, aucun fichier a livrer. */
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 14px center;
	background-size:18px 18px;
}

body.login form .ielp-ins-civilite select:focus{
	border-color:#F18815;
	outline:none;
}

/* L etiquette flottante du fournisseur se leve quand le champ a une valeur ou
   recoit le focus. Un `select` n a pas de `:placeholder-shown` : on le traite
   donc a part, en le considerant toujours « rempli », son etiquette restant
   haute en permanence. Sans cela elle recouvrirait la valeur choisie. */
body.login form .ielp-ins-civilite label{
	transform:translateY(0);
	font-size:12px;
	opacity:1;
}