/*
 * ==========================================================================
 * WEB PROPULSE - STYLES D'AUTHENTIFICATION
 * ==========================================================================
 * Styles pour les pages de connexion, inscription et récupération de mot de passe.
 * Requiert : _tokens.css
 * ==========================================================================
 */


/* ==========================================================================
 * LAYOUT PRINCIPAL
 * ==========================================================================
 */

.authentification {
    background-image: url("../../images/app/fond-inscriptionHD.png");
    background-position: center center;
    background-size: cover;
}

.authentification body {
    color: var(--blanc);
    margin: 0;
}

.authentification .premier-plan {
    position: relative;
    z-index: 1;
}

.authentification .container-fluid {
    padding: 80px;
}

.authentification .div-contenu {
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-4xl);
    position: sticky;
    top: 80px;
}


/* ==========================================================================
 * LOGO ET DESCRIPTION
 * ==========================================================================
 */

.authentification .div-logo img {
    height: 60px;
}

.authentification .div-logo > div {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.authentification .div-logo > div img {
    height: 40px;
}

.authentification .div-logo p {
    text-transform: uppercase;
    color: var(--blanc);
}

.authentification .div-description {
    max-width: 660px;
}

.authentification h1,
.authentification h2 {
    color: var(--blanc);
}

.authentification h2 {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-2xl);
    text-transform: uppercase;
}

.authentification h1 {
    font-weight: var(--font-weight-bold);
    font-size: 48px;
}


/* ==========================================================================
 * FORMULAIRE - CONTENEUR
 * ==========================================================================
 */

.authentification .div-formulaire {
    background-color: var(--blanc);
    color: var(--violet);
    width: 100%;
    min-height: calc(100vh - 160px);
    border-radius: var(--radius-2xl);
}

.authentification .div-formulaire a {
    text-decoration: underline;
}


/* ==========================================================================
 * FORMULAIRE - HEADER / ONGLETS
 * ==========================================================================
 */

.authentification .div-formulaire .div-form-header {
    border-bottom: solid var(--border-width) var(--gris-c7);
}

.authentification .div-formulaire .div-form-header .nav {
    margin: 0 var(--spacing-4xl);
    gap: var(--spacing-lg);
}

.authentification .div-formulaire .div-form-header .nav li {
    flex: 1;
}

.authentification .div-formulaire .div-form-header .nav li a {
    display: block;
    width: 100%;
    height: calc(100% - 4px);
    padding: var(--spacing-lg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--gris-c4);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.authentification .div-formulaire .div-form-header .nav li a.active {
    color: var(--bleu);
    cursor: default;
}

.authentification .div-formulaire .div-form-header .nav li:has(a.active) span.bordure-bas {
    background-color: var(--bleu);
}

.authentification .div-formulaire .div-form-header .nav li span.bordure-bas {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}


/* ==========================================================================
 * FORMULAIRE - CONTENU PRINCIPAL
 * ==========================================================================
 */

.authentification .div-formulaire .div-form-main {
    padding: 30px var(--spacing-4xl);
}


/* Message d'information */
.authentification .div-formulaire .div-form-main .div-msg-information {
    background-color: var(--bleu-c6);
    border-radius: var(--radius-md);
    border-left: solid 8px var(--bleu);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-base);
    margin-bottom: var(--spacing-lg);
}

.authentification .div-formulaire .div-form-main .div-msg-information p {
    font-size: var(--font-size-base);
    color: var(--bleu);
    margin: 0;
}

.authentification .div-formulaire .div-form-main .div-msg-information p.titre {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.authentification .div-formulaire .div-form-main .div-msg-information .btn {
    border: solid var(--border-width) var(--bleu);
    border-radius: var(--radius-sm);
    color: var(--bleu);
    text-decoration: none;
    text-transform: uppercase;
}


/* ==========================================================================
 * FORMULAIRE - CHAMPS DE SAISIE
 * ==========================================================================
 */

.authentification .div-formulaire .div-form-main .div-liste-input {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: 30px;
}

.authentification .div-formulaire .div-form-main label {
    font-size: var(--font-size-lg);
    margin: 0;
    margin-bottom: var(--spacing-xs);
}

.authentification .div-formulaire .div-form-main .form-control {
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) 14px !important;
    height: auto;
    background-color: var(--blanc);
    border-radius: var(--radius-md) !important;
    margin: 0;
}

.authentification .div-formulaire .div-form-main .form-control:focus {
    border-color: var(--violet-20p);
    box-shadow: 0 0 0 0.2rem var(--violet-20p);
}

.authentification .div-formulaire .div-form-main .form-group {
    margin: 0;
}


/* ==========================================================================
 * FORMULAIRE - OPTIONS (Se souvenir, Mot de passe oublié)
 * ==========================================================================
 */

.authentification .div-formulaire .div-form-main .div-form-parametres {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-base);
}

.authentification .div-formulaire .div-form-main .div-form-parametres label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    line-height: 1em;
}

.authentification .div-formulaire .div-form-main .div-form-parametres a {
    font-size: var(--font-size-lg);
}

.authentification .div-formulaire .div-form-main .div-form-parametres input {
    width: 18px;
    height: 18px;
    margin-right: var(--spacing-xs);
}


/* ==========================================================================
 * FORMULAIRE - BOUTONS ET LIENS
 * ==========================================================================
 */

.authentification .div-formulaire .div-form-main .div-form-liens .btn {
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) 14px;
    width: 100%;
    margin: var(--spacing-lg) 0 var(--spacing-base);
    border-radius: var(--radius-md) !important;
}

.authentification .div-formulaire .div-form-main .div-form-liens a {
    font-size: var(--font-size-lg);
    margin: auto;
}


/* ==========================================================================
 * FORMULAIRE - CGU
 * ==========================================================================
 */

.authentification .div-formulaire .div-form-main .div-form-cgu {
    text-align: center;
}

.authentification .div-formulaire .div-form-main .div-form-cgu p {
    margin: 0;
}


/* ==========================================================================
 * FORMULAIRE - CHAMP MOT DE PASSE AVEC ICONE
 * ==========================================================================
 */

.authentification .div-formulaire .div-form-main .div-input-form-mdp {
    position: relative;
}

.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone {
    position: absolute;
    right: 14px;
    top: 12.5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone .icone-voir,
.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone.mdp-visible .icone-masquer {
    display: block;
}

.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone .icone-masquer,
.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone.mdp-visible .icone-voir {
    display: none;
}

.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone svg {
    fill: var(--gris-c4);
}