/* ===========================================================================
   style-login-mobile.css
   Rend LISIBLES sur téléphone les pages publiques bâties sur la mise en page
   historique (tableau figé à 960 px + formulaire à colonnes fixes) :
       index.aspx                      (identification)
       utilisateur_lost_password.aspx  (mot de passe oublié)

   RÈGLE : tout est enfermé dans @media (max-width:700px).
   -> Sur ordinateur, RIEN ne change : l'affichage reste identique à avant.
   -> Sur téléphone, la page passe en présentation verticale, sans zoom ni
      défilement horizontal.

   Le !important est nécessaire : les contrôles ASP.NET rendent leurs largeurs
   en style="width:300px" (style en ligne), qu'une règle normale ne peut pas
   surcharger.
   =========================================================================== */

@media (max-width: 700px) {

    /* --- Sortir des largeurs figées ------------------------------------- */
    table {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Colonnes de marge décoratives : inutiles et voleuses de place */
    .Page_Gauche,
    .Page_Droite {
        display: none !important;
    }

    /* Le logo s'adapte au lieu de déborder */
    img[src*="logo"] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- Contenu -------------------------------------------------------- */
    .Content_Simple {
        padding: 12px !important;
        display: block !important;
    }

    /* --- Formulaire : libellés AU-DESSUS des champs ---------------------- */
    /* Le tableau .Tab_Formulaire devient une pile de blocs.               */
    .Tab_Formulaire,
    .Tab_Formulaire tbody,
    .Tab_Formulaire tr,
    .Tab_Formulaire td {
        display: block !important;
        width: auto !important;
        height: auto !important;
    }

    .Tab_Formulaire td {
        padding: 3px 0 !important;
        text-align: left !important;
    }

    /* Un peu d'air entre deux champs */
    .Tab_Formulaire tr {
        margin-bottom: 10px !important;
    }

    /* Champs de saisie : pleine largeur, 16 px pour empêcher le zoom
       automatique d'iOS au focus */
    .Tab_Formulaire input[type="text"],
    .Tab_Formulaire input[type="password"],
    .Tab_Formulaire input[type="email"],
    .Tab_Formulaire select,
    .Tab_Formulaire textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 11px !important;
    }

    /* Boutons : cible tactile confortable, pleine largeur */
    .Tab_Formulaire input[type="submit"],
    .Tab_Formulaire input[type="button"] {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 13px 0 !important;
        margin-top: 6px !important;
    }

    /* Cases à cocher : garder leur taille naturelle, mais plus grandes */
    .Tab_Formulaire input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        vertical-align: -3px;
    }

    /* Liens (mot de passe oublié…) : cible tactile suffisante */
    .Tab_Formulaire a {
        display: inline-block;
        padding: 8px 0;
        font-size: 14px;
    }

    /* Titre / message d'erreur bien visibles */
    .Navigation {
        font-size: 17px !important;
    }

    .Erreur {
        display: block;
        margin: 8px 0;
        font-size: 14px;
    }
}