/* Pages d'accès vendeur (inscription, connexion, code, mot de passe, invitation) affichées DANS le site : en-tête et pied
   de page d'OGEBOO, bannière en arrière-plan, carte centrale. Complète vendor-auth.css (styles des champs et boutons). */
.vendor-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 56px 16px 72px;
    min-height: 62vh;
    background:
        linear-gradient(180deg, rgba(11, 27, 52, .78) 0%, rgba(11, 27, 52, .62) 45%, rgba(11, 27, 52, .86) 100%),
        url('../images/banniere.webp') center / cover no-repeat;
    background-color: #0B1B34;
    color: #fff;
}
.vendor-stage-inner { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 20px; }

/* Introduction au-dessus de la carte */
.vendor-intro { text-align: center; }
.vendor-intro h1 { margin: 0 0 10px; font-family: var(--font-heading, 'Playfair Display', serif); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; color: #fff; }
.vendor-intro h1 span { color: #E2C170; }
.vendor-intro p { margin: 0 auto; max-width: 440px; color: rgba(255, 255, 255, .88); }
.vendor-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.vendor-perks li { padding: 6px 12px; border: 1px solid rgba(226, 193, 112, .55); border-radius: 999px; background: rgba(11, 27, 52, .45); color: #f3e7c3; font-size: .85rem; }

/* Carte */
.vendor-stage .vendor-card {
    margin: 0;
    padding: 28px 22px;
    border: 0;
    border-top: 4px solid var(--v-gold, #C9A24B);
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.vendor-stage .vendor-card h1 { font-family: var(--font-heading, 'Playfair Display', serif); font-size: 1.55rem; margin: 0 0 8px; color: #0B1B34; }
.vendor-stage .vendor-card input { transition: border-color .15s, box-shadow .15s; }
.vendor-stage .vendor-card input:focus { box-shadow: 0 0 0 3px rgba(201, 162, 75, .28); outline: none; }
.vendor-stage .vendor-btn { background: linear-gradient(135deg, #C9A24B, #E2C170); color: #0B1B34; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(201, 162, 75, .35); transition: transform .15s, box-shadow .15s; }
.vendor-stage .vendor-btn:hover, .vendor-stage .vendor-btn:focus-visible { background: linear-gradient(135deg, #b8913b, #d6b25c); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(201, 162, 75, .45); }
.vendor-stage .vendor-flash { width: 100%; max-width: 520px; margin: 0; }

/* Deux colonnes pour les champs courts sur grand écran (inscription) */
@media (min-width: 640px) {
    .vendor-stage { padding: 72px 24px 96px; }
    .vendor-stage .vendor-card { padding: 34px 36px; }
}

/* ==========================================================================
   Écran compact : les pages d'accès vendeur tiennent dans la hauteur de l'écran
   (sans pied de page ni défilement vertical sur un écran courant).
   Le contenu est centré dans la zone sous le header ; sur un écran vraiment trop
   bas, la page peut encore défiler plutôt que de rogner le formulaire.
   ========================================================================== */
.vendor-stage {
    justify-content: center;
    gap: 14px;
    min-height: calc(100vh - var(--site-header-height, 66px) - var(--safe-area-top, 0px));
    padding: 16px 16px;
    box-sizing: border-box;
}

@supports (height: 100dvh) {
    .vendor-stage {
        min-height: calc(100dvh - var(--site-header-height, 66px) - var(--safe-area-top, 0px));
    }
}

.vendor-stage-inner {
    gap: 14px;
}

.vendor-intro h1 {
    margin-bottom: 6px;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
}

.vendor-intro p {
    font-size: 0.92rem;
}

.vendor-perks {
    margin-top: 10px;
}

.vendor-perks li {
    padding: 3px 10px;
    font-size: 0.78rem;
}

.vendor-stage .vendor-card {
    padding: 20px 22px;
}

.vendor-stage .vendor-card h1 {
    font-size: 1.3rem;
}

.vendor-stage .vendor-lead {
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.vendor-stage .vendor-card label {
    margin: 8px 0 4px;
    font-size: 0.85rem;
}

.vendor-stage .vendor-card input {
    padding: 9px 12px;
}

.vendor-stage .vendor-btn {
    margin-top: 14px;
    padding: 11px;
}

.vendor-stage .vendor-alt {
    margin-top: 10px;
}

/* Inscription : champs courts sur deux colonnes dès qu'il y a la place */
.vendor-form-grid {
    display: grid;
    gap: 0 14px;
    grid-template-columns: minmax(0, 1fr);
}

.vendor-stage-inner:has(.vendor-card--compact) {
    max-width: 720px;
}

@media (min-width: 700px) {
    .vendor-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Écrans peu hauts : on retire ce qui n'est pas indispensable pour rester sans défilement */
@media (max-height: 820px) {
    .vendor-perks,
    .vendor-intro p {
        display: none;
    }
}

@media (max-height: 640px) {
    .vendor-stage .vendor-lead {
        display: none;
    }
}

/* Téléphones : on garde le titre et le formulaire, le reste est masqué pour éviter tout défilement */
@media (max-width: 600px) {
    .vendor-perks,
    .vendor-intro p,
    .vendor-stage .vendor-lead {
        display: none;
    }

    .vendor-stage .vendor-card {
        padding: 18px 16px;
    }
}

/* Très petits téléphones (≈ 640 px de haut) : on resserre encore le formulaire */
@media (max-width: 600px) and (max-height: 700px) {
    .vendor-stage {
        padding-top: 8px;
        padding-bottom: 8px;
        gap: 8px;
    }

    .vendor-intro h1 {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .vendor-stage .vendor-card {
        padding: 12px 14px;
    }

    .vendor-stage .vendor-card h1 {
        font-size: 1.15rem;
        margin-bottom: 2px;
    }

    .vendor-stage .vendor-card label {
        margin: 5px 0 3px;
    }

    .vendor-stage .vendor-card input {
        padding: 7px 10px;
    }

    .vendor-stage .vendor-hint {
        display: none;
    }

    .vendor-stage .vendor-btn {
        margin-top: 10px;
        padding: 9px;
    }
}

/* Connexion rapide (développement local uniquement, voir DevVendorService) */
.vendor-dev-quick {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #c9c3b2;
    text-align: center;
}

.vendor-dev-quick-btn {
    width: 100%;
    padding: 10px;
    border: 1.5px dashed #7a5e1c;
    border-radius: 10px;
    background: #fff8e1;
    color: #5c4510;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.vendor-dev-quick-btn:hover,
.vendor-dev-quick-btn:focus-visible {
    background: #ffefb3;
}

.vendor-dev-quick-hint {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: #6b7280;
}

/* Inscription : indicatif du pays + numéro sur la même ligne */
.vendor-phone {
    display: flex;
    gap: 6px;
}

.vendor-phone select {
    flex: 0 0 7.6rem;
    width: 7.6rem;
    min-width: 0;
    padding: 9px 6px 9px 10px;
    border: 1px solid #c9c3b2;
    border-radius: 10px;
    background: #fff;
    color: #1b2230;
    font: inherit;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    cursor: pointer;
}

.vendor-phone select:focus {
    outline: none;
    border-color: #C9A24B;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.28);
}

.vendor-phone input {
    flex: 1 1 auto;
    min-width: 0;
}

.vendor-upper {
    text-transform: uppercase;
}

.vendor-upper::placeholder {
    text-transform: none;
}