/* ============================================================
   auth.css — La Maisonnette
   Group sheet for:
   · index.html / admin_login.php   (.auth-page > .form-container)
   · pending / noemail / rongpassword / usernem / afterregister
     (.message-page)
   ============================================================ */

/* ---- shared backdrop ---- */
.auth-page, .message-page {
    background-color: var(--bg);
    background-image: url(../background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    min-height: 100vh;
}

/* ============================================================
   Login / register forms
   ============================================================ */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 14px;
}

.form-container {
    width: min(410px, 94vw);
    background: rgba(28, 28, 28, 0.93);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 24px;
}

.form-container h2 {
    text-align: center;
    margin-bottom: 16px;
    color: var(--accent);
}
.form-container h2:not(:first-of-type) { margin-top: 30px; }

.form-container label {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
}

.form-container input {
    margin-top: 6px;
}

.form-container button {
    margin-top: 18px;
    width: 100%;
}

/* admin login extras */
.gb { text-align: center; margin-top: 14px; }
.gb a { color: var(--muted); font-size: 14px; }
.gb a:hover { color: var(--accent); }
.error {
    margin-top: 12px;
    text-align: center;
    color: #ff7070;
    font-weight: bold;
}

/* ============================================================
   Message / error pages
   ============================================================ */
.message-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px 20px;
    text-align: center;
}

.message-page img {
    max-width: min(430px, 86vw);
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.message-page p {
    font-size: clamp(17px, 2.2vw, 21px);
    color: var(--text);
    max-width: 34em;
}

/* "wrong password" page: TOI / SITEWEB / mot de passe incorrect */
#p1 {
    font-size: clamp(30px, 5vw, 46px);
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--text);
}
#p2 {
    font-size: clamp(22px, 3.6vw, 32px);
    font-weight: bold;
    letter-spacing: 4px;
    color: var(--muted);
}
#p3 {
    color: var(--accent-hover);
    font-weight: bold;
}

/* retour link pill */
.message-page a[href="index.html"],
.message-page a[href="homepage.php"] {
    display: inline-block;
    padding: 9px 26px;
    border: 2px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    transition: background 0.15s ease, color 0.15s ease;
}
.message-page a[href="index.html"]:hover,
.message-page a[href="homepage.php"]:hover {
    background: var(--accent);
    color: #101010;
}