/*
  signin.css -- charte graphique de l'espace client (signin.php)

  Reprend l'apparence de la modale de connexion in-page (regles .vdli-* de
  rdv_v4.css) : carte blanche arrondie, libelle au-dessus du champ, champ et
  bouton pleine largeur, vert #4CAF50 en couleur d'action.

  Feuille separee et non reutilisation de rdv_v4.css : ce dernier definit aussi
  .hidden{display:none}, .visible, #regForm, .step, .tab_rdv et .loader, qui
  entreraient en collision avec le theme WordPress sur cette page.

  Ne style QUE le markup produit par signin.php. Les en-tetes d'accordeon
  (.accordion-toggle) restent ceux du theme parent u-design.
*/

/* --- titre de page ------------------------------------------------------- */

.vdsi-page-title {
  max-width: 460px;
  margin: 0 auto 4px;
  font-size: 22px;
  line-height: 1.2em;
  color: #333;
  text-align: center;
}
.vdsi-page-sub {
  max-width: 460px;
  margin: 0 auto 16px;
  color: #666;
  font-size: 14px;
  line-height: 1.35em;
  text-align: center;
}

/* --- onglets ------------------------------------------------------------- */
/* Meme principe que .vdli-tabs dans la modale : un seul panneau visible,
   accent vert sur l'onglet actif. Remplace les accordeons du theme parent. */

.vdsi-tabs {
  display: flex;
  max-width: 460px;
  margin: 0 auto 16px;
  border-bottom: 1px solid #ddd;
}
.vdsi-tab {
  flex: 1;
  margin-bottom: -1px;
  padding: 10px 4px;
  border: none;
  border-bottom: 3px solid transparent;
  /* le theme arrondit tous les <button> : sans cela le soulignement de l'onglet
     actif boucle aux extremites. */
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  color: #777;
  cursor: pointer;
}
.vdsi-tab:hover { color: #333; }
.vdsi-tab-on {
  color: #04803a;
  font-weight: bold;
  border-bottom-color: #04B431;
}

/* --- carte d'un panneau de connexion ------------------------------------ */

.vdsi-card {
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  width: 100%;
  /* La zone de contenu fait ~860px : un champ pleine largeur y serait demesure.
     460px reprend les proportions de la modale. */
  max-width: 460px;
  margin: 0 auto 10px;
  padding: 24px 22px 18px;
  color: #333;
  text-align: center;
}

.vdsi-title {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.2em;
  color: #333;
}
.vdsi-sub {
  display: block;
  margin: 0 0 16px;
  color: #666;
  font-size: 14px;
  line-height: 1.35em;
}

/* --- champs -------------------------------------------------------------- */

.vdsi-label {
  display: block;
  margin: 0 0 6px;
  text-align: center;
}

/* font-family: inherit -- sans quoi les champs restent en Arial alors que la
   page est en Nunito (un input n'herite pas de la police du document). */
.vdsi-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 0.45em 0.5em;
  font-family: inherit;
  font-size: 18px;
  border: 1px solid gray;
  border-radius: 4px;
}

.vdsi-code {
  display: block;
  width: 170px;
  margin: 6px auto 14px;
  padding: 0.35em 0.2em;
  font-family: inherit;
  font-size: 1.4em;
  text-align: center;
  letter-spacing: 0.25em;
  border: 1px solid gray;
  border-radius: 4px;
}

.vdsi-check {
  display: block;
  margin: 0 0 14px;
  font-size: 15px;
  color: #555;
}
.vdsi-check input { margin-right: 6px; }

/* --- boutons ------------------------------------------------------------- */

.vdsi-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 13px 10px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 20px;
  color: #fff;
  background-color: #4CAF50;
  cursor: pointer;
}
.vdsi-btn:hover { background-color: #429646; }

.vdsi-link {
  display: inline-block;
  margin: 0;
  padding: 4px 2px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: #2593B8;
  text-decoration: underline;
  cursor: pointer;
}

/* --- pied de carte ------------------------------------------------------- */

.vdsi-foot {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #666;
}

/* --- messages ------------------------------------------------------------ */
/* .info / .warning / .erroneous / .success + .msg-box-icon viennent du theme. */

.vdsi-msg {
  max-width: 460px;
  margin: 0 auto 10px;
  text-align: left;
}

/* --- telephone international (bloc SMS) ---------------------------------- */
/* Remplace le <style> qui etait inline dans signin.php. */

.vdsi-card .iti {
  width: 100%;
  /* Le wrapper .iti englobe le champ : c'est lui qui doit porter la marge basse,
     sinon le bouton vient coller au champ telephone. */
  margin: 0 0 14px;
  text-align: left;
}
.vdsi-card .iti .vdsi-input { margin-bottom: 0; }
#portable { padding: 0.4em 0.5em; }

/* --- oeil du mot de passe ------------------------------------------------ */
/* Le champ est pleine largeur : l'icone se superpose a droite plutot que
   d'etre tiree par une marge negative. */

/* display:block indispensable : un <span> inline contenant un input display:block
   voit sa boite inline decoupee, et le bloc conteneur de l'icone positionnee en
   absolu devient alors le PREMIER fragment de cette boite -- ce que les moteurs
   ne resolvent pas tous pareil (l'icone peut atterrir au milieu du champ).
   En bloc, le conteneur est sans ambiguite le wrapper lui-meme. */
.vdsi-pwd-wrap { display: block; position: relative; }
.vdsi-pwd-wrap .vdsi-input { padding-right: 40px; }
.vdsi-pwd-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -7px;
  color: #888;
  cursor: pointer;
}

/* --- mobile -------------------------------------------------------------- */

@media (max-width: 520px) {
  .vdsi-card { padding: 18px 14px 14px; }
  .vdsi-title, .vdsi-page-title { font-size: 20px; }
  /* Trois onglets dans 355px : on resserre plutot que de laisser deborder. */
  .vdsi-tab { padding: 10px 2px; font-size: 14px; }
  .vdsi-tab i { display: none; }
}