:root{
    --bordeaux:#770A0F;
    --vert:#3B5F17;
    --vert-clair:#94C93D;
    --bleu:#8ED6EC;
    --jaune:#FEEE5D;

    --card:#ffffff;
    --card-border:#dddddd;

    --text:#2f2f2f;
    --muted:#666666;
    --muted2:#888888;

    --input:#ffffff;
    --input-border:#d9d9d9;

    --focus:rgba(142,214,236,.30);

    --danger:#ffe5e5;
    --danger-border:#ffbdbd;

    --shadow:
        0 20px 60px rgba(0,0,0,.12);

    --radius:30px;
    --radius2:18px;

    --maxw:500px;
}

*{
    box-sizing:border-box;
}

html,
body{
    height:100%;
}

body{
    margin:0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:var(--text);

    background:

        radial-gradient(
            1200px 700px at 15% 20%,
            rgba(142,214,236,.22),
            transparent 60%
        ),

        radial-gradient(
            900px 600px at 85% 25%,
            rgba(148,201,61,.18),
            transparent 55%
        ),

        radial-gradient(
            1000px 600px at 50% 90%,
            rgba(254,238,93,.12),
            transparent 55%
        ),

        linear-gradient(
            135deg,
            #00525F 0%,
            #770A0F 100%
        );

    background-attachment:fixed;

    overflow-x:hidden;
}

/* Motif léger */

body::before{
    content:"";

    position:fixed;

    inset:0;

    opacity:.04;

    pointer-events:none;

    background-image:
        radial-gradient(circle, white 2px, transparent 2px);

    background-size:80px 80px;
}

/* Layout */

.page{
    min-height:100vh;

    display:grid;

    place-items:center;

    padding:24px;
}

/* Carte */

.card{
    width:min(var(--maxw),100%);

    background:rgba(255,255,255,.97);

    border:1px solid rgba(255,255,255,.8);

    border-radius:var(--radius);

    padding:35px;

    box-shadow:var(--shadow);

    backdrop-filter:blur(4px);
}

/* Header */

.brand{
    text-align:center;

    margin-bottom:28px;
}

.logo{
    width:95px;
    height:auto;

    display:block;

    margin:0 auto 18px;
}

.brand-title{
    color:var(--vert);

    font-size:36px;

    font-weight:700;

    line-height:1.15;
}

.brand-subtitle{
    margin-top:10px;

    color:var(--muted);

    font-size:15px;

    line-height:1.5;
}

/* Erreur */

.alert{
    background:var(--danger);

    border:1px solid var(--danger-border);

    border-radius:16px;

    padding:14px;

    margin-bottom:20px;

    color:#8f1010;

    font-size:14px;
}

/* Formulaire */

.form{
    display:grid;
    gap:18px;
}

.field label{
    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:var(--vert);
}

.field input{
    width:100%;

    padding:15px 18px;

    border-radius:var(--radius2);

    border:2px solid var(--input-border);

    background:var(--input);

    color:var(--text);

    outline:none;

    font-size:15px;

    transition:.25s;
}

.field input::placeholder{
    color:#999;
}

.field input:focus{
    border-color:var(--bleu);

    box-shadow:
        0 0 0 5px var(--focus);
}

/* Mot de passe */

.password-wrap{
    display:grid;

    grid-template-columns:1fr auto;

    gap:10px;
}

.toggle{
    border:none;

    background:#ececec;

    color:#444;

    border-radius:16px;

    padding:0 16px;

    cursor:pointer;

    font-weight:600;

    transition:.2s;
}

.toggle:hover{
    background:#e0e0e0;
}

/* Bouton principal */

.submit{
    border:none;

    border-radius:18px;

    padding:16px;

    font-size:16px;

    font-weight:700;

    color:white;

    cursor:pointer;

    background:
        linear-gradient(
            135deg,
            var(--vert),
            var(--vert-clair)
        );

    box-shadow:
        0 10px 25px rgba(59,95,23,.20);

    transition:.25s;
}

.submit:hover{
    transform:translateY(-2px);

    box-shadow:
        0 15px 35px rgba(59,95,23,.25);
}

.submit:active{
    transform:translateY(0);
}

/* Texte */

.hint{
    margin:0;

    text-align:center;

    font-size:13px;

    line-height:1.6;

    color:var(--muted2);
}

/* Footer */

.footer{
    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:20px;

    font-size:12px;

    color:var(--muted2);
}

.footer .dot{
    opacity:.5;
}

/* Choix du compte */

.account-avatar{
    width:90px;
    height:90px;

    margin:10px auto 20px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--vert),
            var(--vert-clair)
        );

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    font-weight:700;
}

.account-name{
    text-align:center;

    font-size:28px;

    font-weight:700;

    color:var(--vert);

    margin-bottom:10px;
}

.account-description{
    text-align:center;

    color:var(--muted);

    line-height:1.6;

    margin-bottom:25px;
}

.secondary-btn{
    display:block;

    text-align:center;

    text-decoration:none !important;

    padding:15px;

    margin-top:12px;

    border-radius:18px;

    border:2px solid rgba(119,10,15,.15);

    background:white;

    color:#770A0F !important;

    font-weight:600;

    transition:.25s;
}

.secondary-btn:hover{
    background:#faf7f7;

    border-color:#770A0F;

    color:#770A0F !important;
}

/* Mobile */

@media(max-width:768px){

    .card{
        padding:28px;
    }

    .brand-title{
        font-size:28px;
    }

    .logo{
        width:80px;
    }

    .account-name{
        font-size:24px;
    }
}