/* /Auth/modal_mobile.css — MOBILE : fenetres de connexion, inscription, code, mot de passe oublie, devkits.
   Chargee APRES modal_login.css et modal_reset_pass.css. Regles :
   - fenetre centree, remontee de 10 % au-dessus du centre exact ;
   - marges laterales de la fenetre = marge basse (22 px) ;
   - tout ce qui doit prendre toute la largeur la prend (champs, boutons, onglets, bandeaux, cases du code). */

@media (max-width: 600px) and (orientation: portrait), (max-width: 1000px) and (orientation: landscape)
{
    /* ---- position : la fenetre est un calque ABSOLU dans la page (il defile avec l'arriere-plan, pas de voile),
            de la hauteur de l'ecran au minimum ; la boite y est centree et remontee de 10 % par la marge basse.
            Si la boite est plus haute que l'ecran, le calque grandit et la page defile (safe center). --------------- */
    #modal-login[style*="block"],
    #modal-login-devkits[style*="block"],
    #modal-forgot[style*="block"],
    #modal-reset[style*="block"],
    #modal-login.show,
    #modal-forgot.show{
    display: flex !important;
    flex-direction: column;
    align-items: safe center;
    justify-content: center;
    /* [18/09] calque ABSOLU couvrant le premier ecran (100dvh) : la boite est centree entre la barre du haut (64 px
       reserves) et la rangee d'icones (74 px). La page entiere defile, barre comprise. Si la boite est plus haute, c'est
       le calque qui defile. */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100svh !important;         /* le premier ecran ; svh comme home.css : stable quand Safari replie ses barres  [18/09] */
    min-height: 0 !important;
    width: auto !important;
    z-index: 50 !important;
    padding: 64px 0 74px 0 !important; /* 54 px de barre du haut + 10 ; 74 px pour la rangee d'icones */
    box-sizing: border-box !important;
    overflow-y: auto;
    background: none !important;
    pointer-events: none;}             /* le calque transparent laisse passer les touches : la barre du haut reste cliquable  [18/09] */

    /* la boite elle-meme reprend les touches */
    #modal-login-show,
    #modal-login-show-devkits,
    #modal-forgot-show,
    #modal-reset-show{
    pointer-events: auto;}

    #modal-login-show,
    #modal-login-show-devkits,
    #modal-forgot-show,
    #modal-reset-show{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 88% !important;
    max-width: 520px;
    margin: 0 auto !important;
    padding: 0 !important;
    flex: 0 0 auto;}

    /* ---- la boite : pleine largeur, le logo reste centre ---------------------------------------------------------- */
    .header-login,
    .header-forgot,
    .header-reset,
    .header-devkits{
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;}

    #window-login,
    #window-login-only-log,
    #window-access-devkits,
    #window-forgot,
    #window-reset{
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;}

    /* ---- formulaires : marges laterales = marge basse ------------------------------------------------------------- */
    #form-login,
    #form-login-devkits,
    #form-register,
    #form-code,
    #form-forgot,
    #form-forgot6,
    #form-reset,
    #form-2fa,
    #form-code-cl{
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-bottom: 22px !important;
    margin: 0 !important;}

    #form-register{ padding-top: 0 !important; }

    /* ---- bandeaux et onglets : memes marges laterales que les formulaires ----------------------------------------- */
    /* Le bandeau sous le logo est bord a bord (il epouse le haut de la boite) ; les onglets restent a 22 px des bords */
    .reg-mode-notice{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;}

    .auth-tabs{
    width: calc(100% - 44px) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;}

    #form-login-block .auth-tabs{ margin-top: 54px !important; }

    /* ---- jamais de bouton ou d'onglet sur deux lignes -------------------------------------------------------------- */
    .auth-tab,
    .valid,
    .valid .btn-label,
    .cbtn{
    white-space: nowrap !important;}

    .auth-tab{
    font-size: 13.5px !important;
    padding: 10px 4px !important;
    letter-spacing: -.01em;}

    /* ---- elements pleine largeur ---------------------------------------------------------------------------------- */
    .field-login,
    .field-login input,
    .field-forgot,
    .field-forgot input,
    .valid,
    #otp-wrapper,
    .reg-status,
    #code-remember{
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: none !important;}

    #otp-wrapper{
    display: flex !important;
    gap: 8px !important;
    justify-content: space-between !important;}

    .otp-cell{
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;}

    .switch-auth{
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 22px;
    padding-right: 22px;}

    /* ---- croix de fermeture dans le coin de la boite --------------------------------------------------------------- */
    #close-login,
    #close-login-devkits,
    #close-forgot,
    #close-reset{
    right: 12px !important;
    top: 8px !important;}
}