/* ============================================================
   GREENSGIVE — AUTH / WALLET / USER
   Connexion, inscription, mot de passe, profil utilisateur
============================================================ */

/* ── Variables locales (hérite de home.css si chargé ensemble) */
:root {

    /* == FOND DE PAGE et teintes generales ========================= */
    --fond-page:         #f7f9fa;
    --titre:             #1e1e1e;

    /* == AUTH / WALLET / USER ========================= */
    --auth-vert:       #7dbf2cce;
    --auth-vert-hover: #66a21dce;
    --auth-fond:        var(--fond-page);
    --auth-texte:      #1a3d1e;
    --auth-gris:       #6b7280;
    --auth-border:     #d1d5db;
    --auth-radius:     10px;
}


/* ══════════════════════════════════════════════════════════
   POLICES
   (pour éviter les styles hérités indésirables)
══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'EB Garamond', serif;
    color: black    ;
    margin: 0;
}

h1 { font-size: 4.0rem; }

/* ══════════════════════════════════════════════════════════
   MISE EN PAGE GÉNÉRALE
══════════════════════════════════════════════════════════ */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem;
    background: var(--auth-fond, #fffdf8);
}

.auth-page .auth-card { flex-shrink: 0; }

/* ── En-tête logo + nom ──────────────────────────────────── */

.auth-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .25rem;
flex-direction: column;
    justify-content: center;
}

.auth-header-logo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 8px rgba(0,0,0,.15);
    margin: auto 0 auto 0;
    align-content: center;

}

.auth-header-nom {
    font-family: 'EB Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--auth-texte);
    letter-spacing: .05em;
}

/* ── Card principale ─────────────────────────────────────── */

.auth-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.09);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
}

.auth-titre {
    font-family: 'EB Garamond', serif;
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    color: var(--auth-texte);
}

.auth-sous-titre {
    font-size: .9rem;
    color: #666;
    margin: 0 0 1.75rem;
    line-height: 1.5;
}

/* ── Formulaire ──────────────────────────────────────────── */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-field label {
    font-size: .8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.auth-field input {
    padding: 10px 14px;
    border: 1.5px solid var(--auth-border);
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: border-color .15s;
}

.auth-field input:focus {
    border-color: var(--auth-vert);
    box-shadow: 0 0 0 3px rgba(46,204,113,.15);
}

/* ── Messages ────────────────────────────────────────────── */

.auth-erreur {
    font-size: .8rem;
    color: #dc2626;
}

.auth-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: .6rem .9rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.auth-succes {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .875rem;
    margin-bottom: 1rem;
    text-align: left;
}

/* ── Boutons ─────────────────────────────────────────────── */

.auth-btn {
    display: block;
    margin-top: .5rem;
    padding: 12px;
    background: var(--auth-vert);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
    width: 100%;
}
.auth-btn:hover { background: var(--auth-vert-hover); }

.auth-btn-secondaire {
    display: block;
    padding: 11px;
    background: transparent;
    color: var(--auth-vert);
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid var(--auth-vert);
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.auth-btn-secondaire:hover {
    background: var(--auth-vert);
    color: #fff;
}

.auth-lien-retour {
    display: inline-block;
    margin-top: 1.25rem;
    font-size: .85rem;
    color: var(--auth-gris);
    text-decoration: none;
}
.auth-lien-retour:hover { color: #374151; }

/* ── Séparateur "ou" ─────────────────────────────────────── */

.auth-separateur {
    text-align: center;
    font-size: .8rem;
    color: #9ca3af;
    margin: .75rem 0;
    position: relative;
}
.auth-separateur::before,
.auth-separateur::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: #e5e7eb;
}
.auth-separateur::before { left: 0; }
.auth-separateur::after  { right: 0; }

/* ══════════════════════════════════════════════════════════
   PLANS D'ABONNEMENT (page inscription)
══════════════════════════════════════════════════════════ */

.auth-plans {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: .5rem 0 1rem;
    text-align: left;
}

.auth-plan-card {
    position: relative;
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    padding: 1rem 1rem .85rem;
}

.auth-plan-nom {
    font-weight: 700;
    font-size: 1rem;
    color: var(--auth-texte);
    margin-bottom: 3px;
}

.auth-plan-limites {
    font-size: .78rem;
    color: var(--auth-gris);
    margin-bottom: .65rem;
    line-height: 1.4;
}

.auth-btn--plan {
    display: block;
    padding: 8px;
    font-size: .85rem;
    font-weight: 700;
    border-radius: 7px;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
}

/* Essai gratuit — vert d'eau */
.auth-plan-card--essai {
    border: 2px solid #4db6ac;
    background: linear-gradient(135deg, #e0f5f2 0%, #f0fdf9 100%);
}
.auth-plan-essai-label {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: #4db6ac;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.auth-plan-card--essai .auth-plan-nom    { color: #1a5f58; }
.auth-plan-card--essai .auth-plan-limites{ color: #2e8b82; }
.auth-btn--essai {
    display: block;
    padding: 10px;
    background: #4db6ac;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
    margin-top: .5rem;
    width: 100%;
}
.auth-btn--essai:hover { background: #359e94; }

/* Adhérent classique — kaki chaud */
.plan--classique {
    border: 2px solid #8d7b5e;
    background: linear-gradient(135deg, #f5ede0 0%, #fdf8f2 100%);
}
.plan--classique .auth-plan-nom    { color: #5c4a2a; }
.plan--classique .auth-plan-limites{ color: #7a6040; }
.plan--classique .auth-btn--plan {
    background: #8d7b5e;
    color: #fff;
}
.plan--classique .auth-btn--plan:hover { background: #6e5e45; }

/* Adhérent groupe — bordeaux */
.plan--groupe {
    border: 2px solid #7b2d42;
    background: linear-gradient(135deg, #f5e8ec 0%, #fdf2f5 100%);
}
.plan--groupe .auth-plan-nom    { color: #5a1e30; }
.plan--groupe .auth-plan-limites{ color: #8a3a50; }
.plan--groupe .auth-btn--plan {
    background: #7b2d42;
    color: #fff;
}
.plan--groupe .auth-btn--plan:hover { background: #5e1e30; }

/* Adhérent partenaire — bleu marine */
.plan--partenaire {
    border: 2px solid #1a3a5c;
    background: linear-gradient(135deg, #e4edf5 0%, #f2f6fb 100%);
}
.plan--partenaire .auth-plan-nom    { color: #0f2540; }
.plan--partenaire .auth-plan-limites{ color: #2a4e72; }
.plan--partenaire .auth-btn--plan {
    background: #1a3a5c;
    color: #fff;
}
.plan--partenaire .auth-btn--plan:hover { background: #0f2540; }

/* ══════════════════════════════════════════════════════════
   FOOTER DES PAGES AUTH
══════════════════════════════════════════════════════════ */

.auth-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
    background: rgba(255,255,255,.6);
    border-radius: var(--auth-radius);
    width: 100%;
    max-width: 480px;
}

.auth-footer-nav {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.auth-footer-lien {
    font-size: .82rem;
    color: var(--auth-gris);
    text-decoration: none;
}
.auth-footer-lien:hover { color: #374151; }

.auth-footer-sep {
    color: #d1d5db;
    font-size: .8rem;
}

.auth-footer-langues a {
    font-size: 1.3rem;
    text-decoration: none;
    margin-left: 4px;
    opacity: .85;
    transition: opacity .15s;
}
.auth-footer-langues a:hover { opacity: 1; }

/* ── Profil — plan actuel ───────────────────────────────── */
.profil-plan-actuel {
    background: #f0faf8;
    border: 1px solid #b2dfdb;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
    text-align: center;
}

.profil-plan-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    margin-bottom: .3rem;
}

.profil-plan-nom {
    font-size: 1.15rem;
    font-weight: 700;
    color: #2d6a4f;
    margin-bottom: .3rem;
}

.profil-plan-expiration {
    font-size: .85rem;
    color: #555;
}

/* Plans désactivés sur le profil */
.auth-btn--plan[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* ── Profil — liens admin ───────────────────────────────── */
.profil-admin-liens {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: .5rem 0 1rem;
    width: 100%;
}

.profil-admin-lien {
    display: block;
    width: 100%;
    padding: .75rem 1.1rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    color: #1e293b;
    font-size: .9rem;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, color .15s;
}

.profil-admin-lien:hover {
    background: #f0fdf4;
    border-color: #4db6ac;
    color: #1a5f58;
}