*{
    margin: 0;
    padding: 0;
    font-family: var(--police-main-family); 
}
main *{
    box-sizing: border-box;
}
body{
    overflow-x: hidden; /* Permet de rendre impossible le défilement horizontal de la page */
}
input::-ms-reveal,input::-ms-clear { /* Désactive l'oeil de Edge pour le mot de passe */
    display: none;
}

/* Login page */
#login_container{ /* Contient le bloc des formulaires */
    height: 620px; /* Permet de garder le footer en bas de la page */
}
#login_block{ /* Contient les formulaires de connexion et d'inscription */
    width: 100%;
    position: absolute;
    background-position: absolute;
    width: 340px;
    height: 600px;
    position: relative;
    margin: auto;
    top: 10px;
    background: linear-gradient(to right, var(--background-header), var(--background-headband-linear-gradient)); /* Couleur de fond du bloc de formulaire */
    padding: 5px;
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow .5s ease-in-out;
}
#login_block:hover{
    box-shadow: 0 0 11px rgba(255, 251, 251, 0.2);
}
#login_image_block{
    text-align: center;
    margin-bottom: -30px;
}
#login_image{
    width: 50%;
}
#button_container{ /* Bloc contenant les boutons connexion et inscription */
    width: 220px;
    margin-top: 45px;
    margin-bottom: 45px;
    margin-left: auto;
    text-align: center;
    margin-right: auto;
    position: relative;
    box-shadow: 0 0 12px 9px rgba(55, 55, 55, 1);
    border-radius: 12px;
}
#switch_button{ /* Bloc d'animation qui passe de gauche à droite */
    top: 0;
    left: 0;
    position: absolute;
    width: 118px;
    height: 100%;
    border: 2px solid rgba(220, 220, 220, 1);
    /* background: linear-gradient(to right, rgb(179, 26, 26), rgb(133, 22, 20)); */
    border-radius: 12px;
    transition: .5s;
}
.button_form{ /* Classe des deux boutons Connexion et Inscription */
    width: 95px;
    height: 36px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 0px;
    cursor: pointer;
    background: transparent;
    font-family: var(--police-main-family);
    border: 0;
    font-size: 0.8em;
    outline: none;
    position: relative;
    color:var(--police-main-color);
    font-weight: 900;
}
#register_switch{ /* Bouton Inscription */
    padding-left: 5px; /* Marge à gauche */
}
@media only screen /* Prend en compte la version sur téléphone */
    and (min-device-width : 320px)
    and (max-device-width : 1024px){
        #register_switch{ /* Bouton Inscription */
            padding-left: 10px; /* Marge à gauche */
        }
        .button_form{ /* Bouton Inscription */
            font-size: 0.75em; /* Réduit la taille de la police */
        }
}

.form_block{ /* Blocs des champs des deux formulaires */
    position: absolute;
    width: 280px;
    transition: .5s;
    color: var(--police-main-color);
}

/* ========================== Formulaire de connexion ========================== */
#login_form{ /* Formulaire de connexion */
    margin-top: 20px;
    text-align: center;
    left: 30px;
}

/* Messages d'erreur lors de la connexion */
.failed_block{
    padding: 5px; /* Marge intérieur */
    position: absolute;
    border: 2px solid rgba(247, 113, 113, 0.8); /* Bordure rouge autour du message */
    color: rgba(247, 113, 113, 0.8);
    font-size: 1em;
    border-radius: 5px; /* Arrondi du bloc */
	left: 50%;  /* Marge à droite */
	text-align: center;
}
#connection_fail{ /* Message qui s'affiche en cas de problème de connection */
    margin-left: -137px;
	top: -50px; /* Marge au dessus du bloc */
}
#account_blocked{
	margin-left: -120px;
	top: -50px; /* Marge au dessus du bloc */
	width: 230px;
}
#account_blocked_label{
	color: rgba(247, 113, 113, 0.8);
    font-size: 0.9em;
    text-decoration: none;
}
#multi_factor_fail{
    margin-left: -136px;
	top: -45px; /* Marge au dessus du bloc */
}
#ip_connection_fail{
    margin-left: -145px;
	text-align: center;
    width: 290px;
	top: -55px;
}

/* Bloc des inputs du formulaire de connexion */
.login_input_block{
    position: relative;
}
.login_input{
    width: 275px;
    height: 45px;
    font-size: 1rem;
    margin-bottom: .15rem;
    letter-spacing: 0.2px;
    background: transparent;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 0 0 3px 3px rgba(55, 55, 55, 1);
    margin-top: 25px;
    border-radius: 5px;
    border: 2px solid rgb(153, 153, 153); /* Couleur des bordures des inputs */
    color: var(--police-main-color); /* Couleur de la police des inputs */
}
.login_input_block label{
    position: absolute;
    margin-top: 38px;
    left: 15px;
    font-size: 1em;
    color: rgb(128, 128, 128);
    pointer-events: none;
    transition: 0.2s;
    pointer-events: none; 
}

.login_input_block input:focus ~ label,
.login_input_block input:not(:placeholder-shown) ~ label,
.login_input_block input:autofill + label,
.login_input_block input:-webkit-autofill,
.login_input_block input:-webkit-autofill:focus{
    left: 15px; /* Marge à gauche du label quand il passe en haut */
    color: var(--police-main-color);
    font-size: 0.8em; /* Taille de la police quand le label passe en haut */
    height: 20px;
    padding-left: 5px;
    padding-right: 5px;
	background-color: var(--background-header);
    margin-top: 18px; /* Position du label en hauteur */
}
#password_input, #password_input_register, #password_input_confirmation{ /* Input du mot de passe */
    letter-spacing: 3px; /* Espacement entre les caractères */
    padding-right: 45px;
}
.login_input_block input:focus{
    outline: solid 1px rgba(220, 220, 220, 1); /* Permet de mettre en surbrillance les inputs lorsqu'ils sont sélectionnés */
    -webkit-outline-radius: 5px;
}

/* Enregistrer la session */
#check_container{
    height: 20px;
    margin-top: 20px;
}
#check_login{
    font-size: 11px;
}
#check_container #checkbox{
    margin-left: 10px;
    width: 10px;
    background-color: rgba(220, 220, 220, 1);
    border: solid 1px rgba(220, 220, 220, 1);
    border-radius: 5px;
    vertical-align: middle;
    cursor: pointer;
}
#check_container #checkbox:checked{
    accent-color: rgb(190, 43, 17);
}

/* Mot de passe oublié */
#password_forgot_link{
    color: var(--police-main-color);
    position: absolute;
    width: 160px;
    font-size: 11px;
    left: 60px;
    top: 200px;
}
#password_forgot_link:hover{
    color: rgba(190, 43, 17, 1);
}

/* Bouton de soumission du formulaire de connexion */
.submit_button{
    width: 85%;
    padding: 10px;
    cursor: pointer;
    display: block;
    margin: auto;
    background: linear-gradient(to right, rgb(179, 26, 26), rgb(133, 22, 20));
    border: 0;
    outline: none;
    border-radius: 12px;
    color: var(--police-main-color);
    font-weight: 900;
    font-family: var(--police-main-family);
}
.submit_button:hover{
    background: linear-gradient(to right, rgb(198, 30, 30), rgb(151, 26, 23));
    box-shadow: inset 2px 2px 2px rgb(80, 5, 5); /* Ombre intérieure */
}
#login_button{
    margin-top: 50px;
}

/* Logo en bas du formulaire de connexion */
#login_form_logo{
    width: 150px;
    margin-top: 30px;
}



/* ========================== Formulaire d'inscription ========================== */
#register_form{ /* Formulaire d'inscription */
    left: 420px;
    margin-top: -35px;
}

/* Bloc des inputs du formulaire d'inscription */
.register_input_block {
    position: relative;
}
.register_input{
    width: 275px;
    height: 45px;
    font-size: 1rem;
    margin-bottom: .15rem;
    letter-spacing: 0.2px;
    background: transparent;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 0 0 3px 3px rgba(55, 55, 55, 1);
    border-radius: 5px;
    margin-top: 15px;
    border: 2px solid rgb(153, 153, 153); /* Couleur des bordures des inputs */
    color: var(--police-main-color); /* Couleur de la police des inputs */
}
.register_input_block input:focus{
    outline: solid 1px rgba(220, 220, 220, 1); /* Permet de mettre en surbrillance les inputs lorsqu'ils sont sélectionnés */
    border-radius: 5px;
}
.register_input_block label{
    position: absolute;
    margin-top: 27px;
    left: 15px;
    font-size: 1rem;
    color: rgb(128, 128, 128);
    pointer-events: none;
    transition: 0.2s;
    pointer-events: none; 
}
.register_input_block input:focus ~ label,
.register_input_block input:not(:placeholder-shown) ~ label{
    left: 15px; /* Marge à gauche du label quand il passe en haut */
    color: var(--police-main-color);
    font-size: .8em; /* Taille de la police quand le label passe en haut */
    height: 20px;
    padding-left: 5px;
    padding-right: 5px;
	background-color: var(--background-header);
    margin-top: 8px; /* Position du label en hauteur */
}
.register_input_block p{
    margin-top: 27px;
}

/* Message de prévention */
#password_input_register:focus ~ #master_password_message{ /* Paragraphe de prévention sur l'oubli du mot de passe */
    color: rgba(247, 113, 113, 1); /* Couleur du texte lorsque l'input est séléctionné */
}
#password_input_register:focus ~ img{ /* image oubli du mot de passe */
    filter: invert(25%) sepia(83%) saturate(3291%) hue-rotate(1deg) brightness(84%) contrast(48%);
}
#warning_password_img{ /* Image du point d'exclamation du message de prévention */
    display: flex;
    height: 20px;
    border-radius: 50%;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(105%) contrast(101%);
    position: absolute;
    margin-top: 10px;
}
#master_password_message{ /* Paragraphe de prévention sur l'oubli du mot de passe */
    position: relative;
    color: var(--police-main-color);
    font-size: 0.6em;
    margin-left: 25px;
    margin-right: 20px;
    top: -17px;
}

/* Solidité du mot de passe */
#strength_border_block{ /* Représente le bloc des 4 barres */
	display: flex; /* Permet d'aligner en ligne les 4 barres */
	justify-content: center; /* Centre les barres dans le bloc */
}
.strength_border{ /* Bordures */
	border-top: solid rgba(247, 113, 113, 0.9) 2px; /* Couleur de base des barres */
	width: 55px; /* Largeur absolue des barres */
}
#strength_first_border, #strength_second_border, #strength_third_border{ /* Trois premières barres */
	margin-right: 17px; /* Marge à gauche */
}

/* Prérequis pour le mot de passe maitre */
#security_field{
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -144px;
    top: -122px;
    background: linear-gradient(to right, var(--background-header), var(--background-headband-linear-gradient));
    width: 284px;
    height: 124px;
}
#password_input_register:focus ~ #security_field{ /* Bloc contenant les prérequis du mot de passe maitre */
    display: block;
}
.security_inline{/* Texte et image true et false */
	display: flex; /* Permet d'aligner le texte avec les images */
	padding-left: 2px; /* Marge intérieur */
	padding-right: 2px; /* Marge intérieur */
}
.label_security_block{ /* Texte de chaque prérequis */
	margin-left: 7px;
    margin-top: 2px;
	color: var(--police-main-color);
	font-size: 0.8em;
	font-family: var(--police-main-family);
}
#false_block{ /* Image false */
	position: relative; /* Position relative par rapport au texte */
	bottom: 1px; /* Marge en dessous */
	margin-right: 5px; /* Marge à gauche */
}
.false{ /* Ajuste la taille des images false */
	width: 20px; /* Taille absolue de l'image false */
}
#true_block{ /* Image true */
	position: relative; /* Position relative par rapport à l'image false */
	bottom: 1px; /* Marge en dessous */
	margin-left: -5px; /* Marge à gauche */
}
.true{ /* Ajuste la taille des images true */
	padding: 2px; /* Marge intérieur */
	width: 20px; /* Taille absolue de l'image true */
}

/* Affichage du mot de passe */
.display_password_button_block img{
    height: 15px;
    position: absolute;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(105%) contrast(101%);
    cursor: pointer;
    right: 15px;
}
#login_display_password{ /* Bouton d'affichage du mot de passe maitre */
    top: 112px;
}
#register_display_password{ /* Bouton d'affichage du mot de passe maitre */
    top: 30px;
}
#confirmation_display_password{
    top: 267px;
}
.display_password_button:hover{
    cursor: pointer;
}

/* Indice du mot de passe */
#hint_message{ /* Paragraphe d'explication de l'indice */
    position: relative;
    color: var(--police-main-color);
    font-size: 0.6em;
    margin-left: 25px;
    margin-right: 20px;
    top: -15px;
}

/* Bouton de soumission du formulaire d'inscription */
#register_button{ /* Bouton Inscription */
    margin-top: 5px;
}