/* ─── Grille 5 blocs ─────────────────────────────── */
:root{
    --vh-top:13.5vh;   /* hauteur B1+B2          */
    --vh-bot:13.5vh;   /* hauteur B5             */
}

/* ===== Bandeau haut (B1+B2) ======================= */
.row-top{
    display:flex;
    width:100vw;
    height:var(--vh-top);
    background:#1798CB;            /* bleu Alpes-éco */
}

/* B1 : logo */
.bloc-b1{
    flex:0 0 30%;      /* ~40 % largeur */
    display:flex;
    align-items:center;
    padding-left:2vw;
}
.bloc-b1 img{height:80%;}          /* 65 % → 80 % */

/* B2 : drapeaux */
.bloc-b2{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0.8vw;
    padding-right:2vw;
}
.bloc-b2 img{
    width:32px; height:32px;       /* 26 px → 32 px */
    border-radius:50%;
    cursor:pointer;
    transition:transform .2s;
}
.bloc-b2 img:hover{transform:scale(1.15);}

/* ===== Zone centrale (B3+B4) ====================== */
.row-main{
    display:flex;
    height:calc(100vh - var(--vh-top) - var(--vh-bot));
}

/* B3 : mascottes */
.bloc-b3{
    flex:0 0 50%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2vh 0;
}
.bloc-b3 img{
    width:80%;                     /* 90 % → 80 %  */
    height:auto;
    object-fit:contain;
}

/* B4 : conteneur formulaire */
.bloc-b4{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2rem;
}

/* -------- Titre du formulaire ---------- */
.login-title{
    font-family:"Century Gothic",sans-serif;
    font-size:2.2rem;
    font-weight:700;
    color:#1D6295;                 /* couleur modules */
    margin-bottom:1.2rem;
    text-align:center;
}

/* Formulaire de connexion */
.login-form{
    width:80%;
    max-width:420px;
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    font-family:"Century Gothic",sans-serif;
}
.login-form label{
    display:flex;
    flex-direction:column;
    font-size:1rem;
    color:#546382;
}
.login-form input{
    width:100%;                    /* plein large   */
    padding:0.6rem 0.8rem;
    border:2px solid #cfd8dc;
    border-radius:6px;
    font-size:1rem;
}
.login-form input:focus{
    outline:none;
    border-color:#1798CB;
}
.row-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.95rem;
}
.remember{display:flex;gap:0.3rem;align-items:center;}
.forgot{color:#1D6295;text-decoration:none;}
.forgot:hover{text-decoration:underline;}
.login-form button{
    margin-top:1rem;
    padding:0.8rem;
    background:#1798CB;
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:1.1rem;
    cursor:pointer;
    box-shadow:0 4px 8px rgba(0,0,0,0.15);
    transition:transform .15s;
}
.login-form button:hover{transform:translateY(-2px);}

/* ===== Pied de page (B5) ========================== */
.bloc-b5{
    height:var(--vh-bot);
    background:#1798CB;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:"Century Gothic",sans-serif;
    font-size:2.2rem;              /* 1.8 rem → 2.2 rem */
}