/*
 * Pages du compte dans l'admin. Sans session (layouts/main-login.php) : connexion, mot de passe
 * oublié, nouveau mot de passe, message d'un lien invalide ; connecté (layout principal) :
 * modification du mot de passe, en fin de feuille. Après la feuille commune c2c-ui.css
 * (LoginAsset) : marque de l'en-tête, carte de l'accueil, champs, boutons et alertes de c2c-ui.css.
 * Les vues auth/ sont communes à d'autres apps : leur balisage AdminLTE (.login-box,
 * .login-box-body, titre en h4, pictogrammes glyphicon des champs) est habillé ici sans être retouché.
 * Charte : « Charte graphique admin C2C.md » à la racine du monorepo.
 */

/* ------------------------------------------------------------------ */
/* Page : fond doux, colonne centrée                                  */
/* ------------------------------------------------------------------ */
.login-page.c2c-login {
    background:
        radial-gradient(1100px 420px at 50% -160px, rgba(47, 127, 193, .16) 0%, rgba(47, 127, 193, 0) 70%),
        #f3f6fa;
}
/* centrée en hauteur quand la place le permet ; défile sinon (min-height, pas height) */
.c2c-login__page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 432px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 40px 16px;
}

/* marque : celle de l'en-tête (pictogramme, nom, application en pastille) */
.c2c-login__brand {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0 0 22px;
}
.c2c-login__mark {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}
.c2c-login__name {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--c2c-ink);
}
.c2c-login__app {
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--c2c-blue-soft);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c2c-blue-dark);
}

/* messages flash (layout, entre la marque et la carte) : alertes douces de c2c-ui.css */
.c2c-login__page > .alert {
    margin: 0 0 14px;
}

/* ------------------------------------------------------------------ */
/* Carte                                                              */
/* ------------------------------------------------------------------ */
/* AdminLTE fixe la boîte à 360 px (90 % sous 768 px) : la colonne décide */
.c2c-login .login-box {
    width: auto;
    margin: 0;
}
.c2c-login .login-box-body {
    padding: 28px 28px 24px;
    border: 1px solid var(--c2c-line);
    border-radius: 14px;
    background: #fff;
    color: var(--c2c-text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -18px rgba(16, 24, 40, .25);
}
.c2c-login .login-box-body > :last-child,
.c2c-login .login-box-body form > .form-group:last-child {
    margin-bottom: 0;
}

/* titre (h1 de la connexion, h4 des vues communes) et phrase d'introduction */
.c2c-login__title,
.c2c-login .login-box-body > h4 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--c2c-ink);
}
.c2c-login__lead,
.c2c-login .login-box-body > p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c2c-muted);
}

/* ------------------------------------------------------------------ */
/* Formulaire                                                         */
/* ------------------------------------------------------------------ */
.c2c-login .form-group {
    margin-bottom: 16px;
}
/* champs un peu plus hauts que dans les écrans (cible au doigt) */
.c2c-login .form-control {
    height: 42px;
    padding: 9px 12px;
    font-size: 15px;
}
/* pictogrammes glyphicon des vues communes (enveloppe, cadenas) : le libellé suffit */
.c2c-login .form-control-feedback {
    display: none;
}
.c2c-login .has-feedback .form-control {
    padding-right: 12px;
}
/* tous les champs sont requis : pas d'astérisque rouge (site.css en met une après le libellé) */
.c2c-login div.required label.control-label::after {
    content: none;
}
/* libellés et messages tirés des modèles communs (« votre adresse mail », « login ou utilisateur
   incorrect. ») : majuscule initiale */
.c2c-login .control-label::first-letter,
.c2c-login .help-block::first-letter {
    text-transform: uppercase;
}
/* bloc d'erreur vide : sa marge écartait les champs */
.c2c-login .help-block {
    margin: 6px 0 0;
}
.c2c-login .help-block:empty {
    display: none;
}

/* « Rester connecté » et « Mot de passe oublié ? » sur une ligne, avant le bouton */
.c2c-login__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    margin: -2px 0 20px;
}
.c2c-login__options .form-group,
.c2c-login__options .checkbox {
    margin: 0;
}
.c2c-login__options .checkbox label {
    font-size: 13.5px;
    color: var(--c2c-text);
}
.c2c-login input[type="checkbox"] {
    accent-color: var(--c2c-blue);
}
.c2c-login__forgot {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c2c-blue-dark);
}
.c2c-login__forgot:hover,
.c2c-login__forgot:focus {
    color: var(--c2c-blue);
    text-decoration: underline;
}

/* bouton principal sur toute la largeur de la carte (« Envoyer » des vues communes compris) */
.c2c-login .login-box-body .btn-primary {
    display: block;
    width: 100%;
    height: 42px;
    padding: 9px 16px;
    font-size: 15px;
}

/* ------------------------------------------------------------------ */
/* Message (lien invalide ou expiré) : contenu de la carte, sans      */
/* encadré, pastille d'icône à la couleur de l'état                   */
/* ------------------------------------------------------------------ */
/* AdminLTE colore les alertes en !important, c2c-ui.css aussi : plus spécifique ici */
.c2c-login .login-box-body > .alert {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c2c-text) !important;
}
.c2c-login .login-box-body > .alert > h4 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--c2c-ink);
}
.c2c-login .login-box-body > .alert > h4::before {
    content: "\f05a"; /* fa-info-circle */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 14px;
    border-radius: 12px;
    background: #eaf2fb;
    font: normal normal normal 20px/1 FontAwesome;
    color: #2f7fc1;
}
.c2c-login .login-box-body > .alert-warning > h4::before {
    content: "\f071"; /* fa-exclamation-triangle */
    background: #fff1e0;
    color: #d9730d;
}
.c2c-login .login-box-body > .alert-danger > h4::before {
    content: "\f071";
    background: #fdecea;
    color: #d92d20;
}
.c2c-login .login-box-body > .alert-success > h4::before {
    content: "\f00c"; /* fa-check */
    background: #e7f6ee;
    color: #12a150;
}

/* ------------------------------------------------------------------ */
/* Sous la carte : retour à la connexion, version, branche            */
/* ------------------------------------------------------------------ */
.c2c-login__back,
.c2c-login__footer {
    margin: 16px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--c2c-muted);
}
.c2c-login__footer + .c2c-login__footer {
    margin-top: 8px;
}
.c2c-login__back a,
.c2c-login__footer a {
    font-weight: 600;
    color: var(--c2c-blue-dark);
}
.c2c-login__back a:hover,
.c2c-login__back a:focus,
.c2c-login__footer a:hover,
.c2c-login__footer a:focus {
    color: var(--c2c-blue);
    text-decoration: underline;
}
.c2c-login__back .fa {
    margin-right: 4px;
}
/* branche git, hors production : pilule orange discrète (alerte jaune pleine largeur avant) */
.c2c-login__branch {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid #fbe1a9;
    border-radius: 99px;
    background: #fffaeb;
    font-size: 12px;
    color: #93370d;
}

/* ------------------------------------------------------------------ */
/* Modification du mot de passe (connecté, auth/changePassword.php,   */
/* racine .c2c-ui dans l'admin seulement)                             */
/* ------------------------------------------------------------------ */
/* trois champs : un encart étroit plutôt que toute la largeur */
.c2c-ui.change-own-password .box {
    max-width: 560px;
}
/* libellés et messages du modèle commun (« mot de passe actuel », « mot de passe incorrect ») :
   majuscule initiale */
.c2c-ui.change-own-password .control-label::first-letter,
.c2c-ui.change-own-password .help-block::first-letter {
    text-transform: uppercase;
}
/* en erreur, le message prend la place de la précision (« 8 caractères au moins. »), qu'il redit */
.c2c-ui.change-own-password .has-error .help-block:not(.help-block-error) {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Téléphone                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 480px) {
    .c2c-login__page {
        justify-content: flex-start;
        padding: 28px 16px;
    }
    .c2c-login__brand {
        margin-bottom: 18px;
    }
    .c2c-login .login-box-body {
        padding: 22px 18px 20px;
    }
    /* 16 px : Safari sur iPhone ne zoome plus sur le champ */
    .c2c-login .form-control {
        font-size: 16px;
    }
}