/* Style de base pour la page de connexion */
/* Ajout de l'image de fond */
body.login {
    background-image: url('image-fond.jpg'); /* Mettez ici le chemin correct vers votre image */
    background-size: cover;
    background-position: center center;
    display: flex; /* Utilisation de Flexbox pour un meilleur contrôle de la disposition */
    justify-content: space-between; /* Espacement entre les éléments */
    align-items: center; /* Centrage vertical des éléments */
    height: 100vh; /* Hauteur totale de la vue */
}

/* Centrer le logo au-dessus du formulaire */
body.login div#login h1 a {
    background-image: url('logo-lja.png'); /* Remplacez par le chemin réel de votre logo */
    background-size: cover; /* Ajustez la taille du logo */
    width: 150%;
    height: 250px;
    margin: -200px -55px -65px;
}

/* Style pour le formulaire de connexion - Aligné à gauche */
body.login div#login form#loginform {
    padding: 26px 24px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.13);
    margin-left: 10%; /* Marge à gauche pour aligner le formulaire */
}

/* Barre de changement de langue - Alignée à droite */
/* Remplacez '.language-bar' par la classe ou l'ID de votre barre de changement de langue */
.language-switcher {
    margin: 0px auto 50% auto;
    padding: 0 0 24px;
    text-align: center;
}

/* Bouton de connexion personnalisé */
body.login div#login form#loginform p.submit input#wp-submit {
    background-color: #f56e28;
    border-color: #f56e28;
    box-shadow: none;
    color: #ffffff;
    text-shadow: none;
    padding: 0 50px;
    height: 40px;
    line-height: 40px;
}

/* Champs de saisie personnalisés */
body.login div#login form#loginform input.input,
body.login div#login form#loginform input#user_login,
body.login div#login form#loginform input#user_pass {
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
}

/* Liens personnalisés */
body.login div#login p#nav a,
body.login div#login p#backtoblog a {
    color: #f56e28;
}

body.login div#login p#nav a:hover,
body.login div#login p#backtoblog a:hover {
    color: #ff8c00;
}

.login #nav {
    margin: 1px 0 0 10px;
}

#backtoblog {
    margin: 1px 0 0 -5px;
    word-wrap: break-word;
}

/* Ajoutez ici d'autres styles personnalisés si nécessaire */

/* Ajoutez ceci à la fin de votre fichier custom-login.css pour les styles mobiles */

@media only screen and (max-width: 768px) {
    /* Ajuster le fond pour les écrans plus petits */
    body.login {
        background-image: url('Fond-tell.jpg'); /* Optionnel: Image de fond différente pour mobile */
    }
    
    /* Réduire et centrer le logo */
    body.login div#login h1 a {
        background-image: url('logo-lja.png');
        width: 100%; /* Ajustez selon la taille de votre logo mobile */
        height: 120px; /* Ajustez selon la hauteur désirée */
        margin: -65% 10% 10% -5%; /* Centrer le logo horizontalement */
        background-size: cover; /* Assurez-vous que le logo est entièrement visible */
    }
    
    /* Style pour le formulaire de connexion - plus compact */
    body.login div#login form#loginform {
        margin: 0px 0px 0px 0px; /* Centrer le formulaire dans la vue */
        padding: 25px;
        width: 80%; /* Faire en sorte que le formulaire utilise plus d'espace écran */
    }

    /* Ajuster la taille et l'espacement des champs de saisie et du bouton */
    body.login div#login form#loginform input.input,
    body.login div#login form#loginform input#user_login,
    body.login div#login form#loginform input#user_pass,
    body.login div#login form#loginform p.submit input#wp-submit {
        width: 100%; /* Utiliser toute la largeur disponible */
        margin-bottom: 10px; /* Plus d'espace entre les champs */
    }

    /* Ajustements des liens */
    body.login div#login p#nav a,
    body.login div#login p#backtoblog a {
        color: #fff; /* Changez selon vos préférences pour une meilleure visibilité sur mobile */
    }

    .language-switcher {
        margin: -40% 25% -175% -90%;
        padding: 0px 0px 0px;
        text-align: center;
    }
}