/* Boutons de connexion */
button.btnConnecter[data-theme] {
   border: 1px solid transparent;
   display: inline-block;
   font-size: 13px;
   line-height: 38px;
   margin: 0;
   outline: none;
   padding: 0 16px 0 16px;
   position: relative;
   text-align: center;
   vertical-align: top;
   white-space: nowrap;
   -webkit-appearance: none;
   margin-right: 12px;
}

button.btnConnecter[data-theme="sombre"] {
   background-color: #0073cf;
   border-color: #0073cf;
   color: #fff;
}

button.btnConnecter[data-theme="sombre"][data-couleur="anthracite"] {
   background-color: #37424a;
   border-color: #37424a;
}

button.btnConnecter[data-theme="clair"] {
   background-color: #fff;
   border-color: #0073cf;
   color: #0073cf;
}

button.btnConnecter[data-theme="clair"][data-couleur="anthracite"] {
   border-color: #37424a;
   color: #37424a;
}

button.btnConnecter[data-theme] > span {
   display: inline-block;
}

/* Hover et focus */
button.btnConnecter[data-theme]:focus {
   outline: none;
}

button.btnConnecter[data-theme]::after {
   background-color: currentColor;
   border-radius: inherit;
   box-sizing: border-box;
   content: '';
   display: inline-block;
   height: calc(100% + 2px);
   opacity: 0;
   position: absolute;
   left: -1px;
   top: -1px;
   -moz-transition: opacity .2s ease;
   -o-transition: opacity .2s ease;
   -webkit-transition: opacity .2s;
   transition: opacity .2s ease;
   width: calc(100% + 2px);
}

button.btnConnecter[data-theme="sombre"]:hover::after {
   opacity: .2;
}

button.btnConnecter[data-theme="sombre"]:focus::after {
   opacity: .3;
}

button.btnConnecter[data-theme="clair"]:hover::after {
   opacity: .1;
}

button.btnConnecter[data-theme="clair"]:focus::after {
   opacity: .2;
}

/* Inactif */
button.btnConnecter[data-theme][disabled] {
   cursor: default;
   opacity: .6;
   pointer-events: none;
}

/* Boutons secondaires sur la page de connexion de Regard */
button.btnSecondaire {
   background-color: #fff;
   border: 1px solid #0073cf;
   color: #0073cf;
   font-size: 13px;
   line-height: 38px;
   padding: 0 16px 0 16px;
}

.donnees {
   border-spacing: 0 5px;
}

.donnee label, .donnee input {
   height: 30px;
}

.donnee input {
   border: 1px solid #ccc;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   padding: 0 5px;
   width: 200px;
}

.donnee input:focus {
   border-color: #666;
   outline: none;
}

.avecIcon {
   background-color: #ccc;
   background-image: url(../img/iconLogin.png);
   background-repeat: no-repeat;
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
   height: 100% !important;
   width: 30px;
}

.avecIcon > span {
   display: none;
}

.utilisateur {
   background-position: 1px -37px;
}

.motPasse {
   background-position: 1px 0;
}