/* ============================================================
   Custom wp-login.php styles
   Place in your child theme folder, next to style.css
   Enqueue via login_enqueue_scripts in functions.php
   ============================================================ */

/* Page background to match the soft mockup */
body.login {
    background: #f8f9fc;
}

/* Widen the container (default is 320px) */
#login {
    width: 100%;
    max-width: 906px;
    padding: 6% 16px 0;
}

#login h1 a {
    background-image: url("https://epe-asso.org/wp-content/uploads/2026/05/Group-1000001847-1.png");
    background-size: contain;          /* garde les proportions */
    background-position: center;
    width: 320px;                      /* largeur du conteneur */
    height: 80px;                      /* ajuste à ton logo */
}

/* ===== CARD ===== */
#loginform {
    padding: 90px;
    background: #fff;
    border: 1px solid #eef0f6;
    border-radius: 24px;
    box-shadow: 0 0 0 6px #f4f5fb, 0 10px 40px rgba(15, 23, 42, .06);
}

/* padding reduced on mobile (90px = too tight under ~600px) */
@media (max-width: 600px) {
    #loginform {
        padding: 40px 24px;
    }
}

/* ===== LABELS ===== */
#loginform label {
    display: block;
    margin-bottom: 8px;
    color: #0a2a43;
    font-size: 16px;
    font-weight: 600;
}

/* ===== FIELD SPACING ===== */
#loginform p,
#loginform .user-pass-wrap {
    margin: 0 0 24px;
}

/* ===== INPUTS ===== */
#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
    font-size: 16px;
    color: #0a2a43;
    background: #fff;
    box-shadow: none; /* kills WP's default field shadow */
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* focus visible */
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
    outline: none;
    border-color: #1a7d9c;
    box-shadow: 0 0 0 3px rgba(26, 125, 156, .12);
}

/* placeholder grey */
#loginform input::placeholder {
    color: #94a3b8;
}

/* Hide the show/hide-password eye button (not in design) */
#loginform .wp-pwd button.wp-hide-pw {
    display: none;
}

/* Hide "Remember me" (absent from design) */
#loginform .forgetmenot {
    display: none;
}

/* ===== SUBMIT WRAPPER ===== */
#loginform .submit {
    margin: 8px 0 0;
    text-align: right; /* aligned right */
}

/* ===== BOUTON PENCHE (pill teal + fleche) ===== */
#wp-submit {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 14px 32px;
    background: #1a7d9c;
    border: 1px solid transparent;   /* bordure des le depart -> pas de saut de hauteur */
    border-radius: 18px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
    transform: skew(-14deg);                              /* le penchage */
    transition: background-color .2s ease, border-color .2s ease;
}

/* contenu redresse (contre-skew) */
#wp-submit > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transform: skew(14deg);                               /* annule le penchage */
    color: #fff;                                          /* couleur du texte geree ici */
    transition: color .2s ease;
}

/* fleche via mask -> prend la couleur de background-color */
#wp-submit > span::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: #fff;                               /* couleur de la fleche au repos */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color .2s ease;
}

/* ===== HOVER ===== */
#wp-submit:hover {
    background: #fff;
    border-color: #1a7d9c;           /* on change juste la couleur, pas l'epaisseur */
}
#wp-submit:hover > span {
    color: #1a7d9c;                  /* texte en teal */
}
#wp-submit:hover > span::before {
    background-color: #1a7d9c;       /* fleche en teal */
}

/* ===== "Mot de passe oublie" link (sits below the card) ===== */
#nav,
#backtoblog {
    text-align: left;
}

#nav a,
#backtoblog a {
    color: #94a3b8;
}

/* ===== Hide the default WP logo above the card (optional) ===== */
/* #login h1 { display: none; } */

/* ===== SELECTEUR DE LANGUE ===== */
#language-switcher {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* icone globe */
#language-switcher .dashicons-translation {
    color: #94a3b8;
}

/* le select style comme les inputs */
#language-switcher-locales {
    padding: 8px 12px;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
    font-size: 14px;
    color: #0a2a43;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#language-switcher-locales:focus {
    outline: none;
    border-color: #1a7d9c;
    box-shadow: 0 0 0 3px rgba(26, 125, 156, .12);
}

/* bouton "Modifier" - mini version du bouton teal */
#language-switcher .button {
    padding: 8px 16px;
    background: #1a7d9c;
    border: 1px solid transparent;   /* meme astuce anti-saut */
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#language-switcher .button:hover {
    background: #fff;
    border-color: #1a7d9c;
    color: #1a7d9c;
}