/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 25 mars 2015, 14:03:13
    Author     : sweffling
*/

/* Style de carte/bouton/champ partage avec la famille "mot de passe oublie"
   -> deplace dans /styles/applicatif/auth-shared.css (une seule source,
   cf commentaire en tete de ce fichier). Il ne reste ici que ce qui est
   propre AU MARKUP de cette page (positionnement absolu centre, layout
   des 2 boutons .btnconteneur). */
#formulaire {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: calc(100vw - 32px);
}

input, select, textarea {
    border: 1px solid #aaa;
    font-size: 12px;
    resize: none;
}

/* Ciblage par IDENTITE et non par position. Les selecteurs positionnels
   (:first-of-type / :nth-of-type) se decalent des que le nombre de <div>
   change dans #formulaire : c'est le cas avec le logo ajoute en tete, et
   surtout sur l'ecran guichet (/authentication/indexGuichet) ou le bloc
   "utilisateur usurpe" insere en plus un <div> espaceur. Les regles
   tombaient alors a cote et le bouton Connexion gardait son float:left
   d'origine, avec le texte d'avertissement qui l'enlacait. */

/* Connexion : action primaire, pleine largeur */
#formulaire .btnconteneur:not(:has([data-id="demandeNouveauMotPasse"])) {
    float: none !important;
    display: block;
    width: 100%;
}

/* Mot de passe oublie : sous le bouton Connexion, aligne a droite */
#formulaire .btnconteneur:has([data-id="demandeNouveauMotPasse"]) {
    float: none !important;
    display: block;
    width: 100%;
    text-align: right;
    margin-top: 12px;
}

/*
*   Closed app style
*/
#content {
    font-size: 18px;
    width: 600px;
    text-align: center;
    margin: 250px auto;
    padding: 20px;
}

/* ==========================================================================
   PEG-4721 — Ecran de connexion responsive mobile.
   Page standalone (index.phtml, pas de layout partage), auparavant #formulaire
   en position:absolute + largeur fixe 330px pensee pour desktop -> deborde/est
   ecrasee sur mobile, sans meta viewport (corrige dans index.phtml). Le
   centrage absolu + les zones de clic >=44px restent valables a toute taille ;
   sous 768px on passe en flux normal (evite tout risque de recouvrement si le
   contenu depasse la hauteur d'un petit ecran, ex. clavier virtuel ouvert).
   ========================================================================== */
@media (max-width: 768px) {
    #formulaire {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        margin: 24px auto;
        width: auto;
        max-width: 400px;
    }
}