/* Mon Compte - Structure
---------------------------------------------------------------------- */
main.page-account { padding: 0 15px; }
main.page-account > .account { padding: 0; border: 1px solid #8e7499; border-radius: 3px; overflow: hidden; }
main.page-account > .account > header { position: relative; }
main.page-account > .account > header > h1 { margin: 0; background: #8e7499; color: #fff; font-size: 22px; line-height: 30px; padding: 10px; }

main.page-account .menu-burger {
    display: none;
    position: absolute;
    top: 0;
    right: 0;

    cursor: pointer;

    width: 50px;
    height: 50px;
}
main.page-account .menu-burger > span,
main.page-account .menu-burger > span::after,
main.page-account .menu-burger > span::before {
    position: absolute;
	display: block;
	height: 3px !important;
	width: 30px !important;
	background-color: #f4f4f4 !important;
	content: '';
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
main.page-account .menu-burger > span { top: 22px; right: 12px; }
main.page-account .menu-burger > span::before { top: -10px; }
main.page-account .menu-burger > span::after { bottom: -10px; }

main.page-account > .account.menu-opened .menu-burger > span { transform: rotate(225deg); }
main.page-account > .account.menu-opened .menu-burger > span::before { top: 0; }
main.page-account > .account.menu-opened .menu-burger > span::after { transform: rotate(-90deg); bottom: 0; }

.account-view { display: flex; background: #fbfbfb; }
.account-view > nav.account-menu { background: #8e7499; width: 200px; }
.account-view > nav.account-menu li { font-size: 14px; transition: background-color 0.35s ease; }
.account-view > nav.account-menu li.selected,
.account-view > nav.account-menu li:hover { background: #2c133a; }
.account-view > nav.account-menu a { display: block; padding: 15px;  color: #fff; }
.account-view > .account-panel { flex: 1 1; padding: 15px; min-height: 500px; }
.account-view .container { display: flex; }
.account-view form article { margin-bottom: 10px; }
.account-view form article label > span { display: block; margin-bottom: 5px; }

.account-view > .account-panel .login { max-width: 450px; }
.account-view > .account-panel .password { max-width: 450px; }
.account-view > .account-panel .password input[type="password"] { max-width: 300px; }

@media all and (min-width: 1200px) {
	.account-view > .account-panel .login { padding-right: 80px; }
	.account-view > .account-panel .password { padding-left: 80px; }
}

@media all and (min-width: 600px) {
    .account-view > .account-panel { box-shadow: 5px 5px 15px inset rgba(0, 0, 0, 0.2); }
}

@media all and (max-width: 599px) {
    main.page-account { padding: 0; }
    main.page-account > .account { margin: 0; border-radius: 0; border: none; }
    main.page-account > .account > header > h1 { padding: 10px 60px; }

    main.page-account .menu-burger { display: block; }

    .account-view { display: block; position: relative; }
    .account-view > nav.account-menu { position: absolute; left: -200px; bottom: 0; top: 0; transition: left 0.5s ease; z-index: 100; }
    main.page-account > .account.menu-opened nav.account-menu { left: 0; }

    .account-view .container { flex-direction: column; }
}

/* Mon Compte - Mes Identifiants
---------------------------------------------------------------------- */
.account.ids {}
.account.ids input.password-valid { background: #87ff9c; border: 1px solid #095b17; }
.account.ids input.password-invalid { background: #ff8792; border: 1px solid #770b0b; }