/* ==========================================================================
   MaButik — pages hors application (connexion, inscription, mot de passe,
   vérification du numéro, choix de boutique, abonnement...)
   Écran partagé : panneau de marque à gauche, formulaire à droite.
   ========================================================================== */
:root {
    --mb-violet: #5148e5; --mb-indigo: #3f3cc9; --mb-nuit: #1e2a8a; --mb-vert: #10b981; --mb-rose: #e11d48;
    --mb-texte: #141a3a; --mb-texte-2: #5b6185; --mb-texte-3: #9399b8; --mb-bord: #e6e8f4; --mb-fond: #f5f6fc;
    --mb-degrade: linear-gradient(135deg, #6d64f5 0%, #5148e5 45%, #3f3cc9 100%);
    --bm-primary: #5148e5; --bm-text-soft: #9399b8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.mb-auth-corps {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--mb-texte);
    background: var(--mb-fond); -webkit-font-smoothing: antialiased; display: block !important; padding: 0 !important;
}
.mb-auth-corps button, .mb-auth-corps input, .mb-auth-corps select, .mb-auth-corps textarea { font-family: inherit; }

.mb-auth { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, 1.05fr); min-height: 100vh; }

/* ---------- Panneau de marque ---------- */
.mb-auth-marque {
    position: sticky; top: 0; height: 100vh; align-self: start;
    position: relative; overflow: hidden; color: #fff; padding: 44px 52px; display: flex; flex-direction: column;
    background: radial-gradient(circle at 15% 10%, #7c74ff 0%, transparent 40%),
                radial-gradient(circle at 90% 85%, rgba(16, 185, 129, .55) 0%, transparent 45%),
                linear-gradient(160deg, #3f3cc9 0%, #1e2a8a 55%, #141a4d 100%);
}
.mb-auth-marque::before {
    content: ''; position: absolute; inset: 0; opacity: .08; pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 26px 26px;
}
.mb-auth-marque > * { position: relative; }
.mb-auth-marque h2 { font-size: 2.45rem; line-height: 1.12; letter-spacing: -0.04em; font-weight: 800; margin: auto 0 14px; max-width: 500px; }
.mb-auth-marque h2 span { background: linear-gradient(90deg, #a5f3d0, #7dd3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mb-auth-marque p.accroche { color: rgba(255, 255, 255, .78); font-size: 1rem; max-width: 450px; line-height: 1.6; margin: 0 0 30px; }
.mb-atouts { display: grid; gap: 12px; max-width: 440px; }
.mb-atout {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(12px);
    animation: mb-flotte 7s ease-in-out infinite;
}
.mb-atout:nth-child(2) { animation-delay: -2.3s; margin-left: 34px; }
.mb-atout:nth-child(3) { animation-delay: -4.6s; margin-left: 12px; }
.mb-atout .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); font-size: 1.1rem; flex-shrink: 0; }
.mb-atout strong { display: block; font-size: .95rem; }
.mb-atout small { color: rgba(255, 255, 255, .72); font-size: .78rem; font-weight: 500; }
@keyframes mb-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mb-auth-marque footer { margin-top: 30px; font-size: .78rem; color: rgba(255, 255, 255, .55); }

/* ---------- Côté formulaire ---------- */
.mb-auth-cote { display: grid; place-items: center; padding: 40px 28px; position: relative; overflow: hidden; }
.mb-auth-cote::before { content: ''; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: rgba(109, 100, 245, .13); filter: blur(80px); top: 8%; right: 6%; pointer-events: none; }
.mb-auth-boite, .mb-auth-corps .bm-auth-card { width: 100%; max-width: 430px; position: relative; background: none !important; box-shadow: none !important; padding: 0 !important; border: none !important; }
.mb-auth-boite.large { max-width: 620px; }
.mb-auth-logo-mobile { display: none; margin-bottom: 22px; }

.mb-auth-badge, .mb-auth-corps .bm-icone {
    display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px;
    background: rgba(16, 185, 129, .12); color: #059669; font-weight: 700; font-size: .78rem; margin: 0 0 4px;
    width: auto; height: auto;
}
.mb-auth-corps .bm-icone { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 18px; font-size: 1.5rem;
    background: var(--mb-degrade); color: #fff; box-shadow: 0 16px 30px -12px rgba(81, 72, 229, .6); margin: 0 0 18px; }
.mb-auth-corps h1, .mb-auth-corps .bm-auth-title, .mb-auth-corps .bm-title {
    font-size: 2rem; letter-spacing: -.04em; margin: 14px 0 6px; font-weight: 800; color: var(--mb-texte); line-height: 1.15;
}
.mb-auth-corps .bm-icone + .bm-auth-title { margin-top: 0; }
.mb-auth-corps .bm-auth-subtitle, .mb-auth-corps .mb-auth-sous {
    color: var(--mb-texte-2); margin: 0 0 26px; font-size: .94rem; line-height: 1.55; text-align: left;
}
.mb-auth-corps .bm-auth-subtitle strong { color: var(--mb-texte); }
.mb-auth-corps .bm-entete { text-align: left; margin-bottom: 0; }

/* Champs */
.mb-auth-corps label { display: block; font-size: .8rem; font-weight: 700; color: var(--mb-texte-2); margin-bottom: 7px; }
.mb-auth-corps .form-check-label { display: inline; margin: 0; font-weight: 600; }
.mb-auth-corps .bm-field-group, .mb-auth-corps .bm-champ { margin-bottom: 16px; }
.mb-saisie { position: relative; }
.mb-saisie > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--mb-texte-3); font-size: 1.05rem; pointer-events: none; transition: color .2s ease; }
.mb-saisie .form-control { padding-left: 44px !important; }
.mb-saisie:focus-within > i { color: var(--mb-violet); }
.mb-auth-corps .form-control, .mb-auth-corps .form-select {
    height: 52px; border-radius: 14px; border: 1.5px solid var(--mb-bord); background: #fff; font-size: .95rem; font-weight: 600;
    color: var(--mb-texte); padding: 0 14px; transition: border-color .2s ease, box-shadow .2s ease;
}
.mb-auth-corps input[type="file"].form-control { padding: 12px 14px; height: auto; }
.mb-auth-corps .form-control::placeholder { color: #b4b8d0; font-weight: 500; }
.mb-auth-corps .form-control:focus, .mb-auth-corps .form-select:focus { border-color: var(--mb-violet); box-shadow: 0 0 0 4px rgba(81, 72, 229, .12); outline: none; }
.mb-auth-corps .form-check-input { width: 1.2em; height: 1.2em; border-radius: 6px; border: 1.5px solid #cfd3e6; }
.mb-auth-corps .form-check-input:checked { background-color: var(--mb-violet); border-color: var(--mb-violet); }
.mb-auth-corps .bm-code, .mb-auth-corps input.bm-code {
    width: 100%; height: 64px; text-align: center; font-size: 1.7rem !important; font-weight: 800; letter-spacing: .45em; padding-left: .45em !important;
    border-radius: 16px; border: 1.5px solid var(--mb-bord); margin-bottom: 14px; color: var(--mb-texte);
}
.mb-auth-corps .bm-code:focus { border-color: var(--mb-violet); box-shadow: 0 0 0 4px rgba(81, 72, 229, .12); outline: none; }
.mb-auth-corps .bm-aide, .mb-auth-corps .bm-field-hint, .mb-auth-corps small:not(.text-danger) { font-size: .76rem; color: var(--mb-texte-3); }
.mb-auth-corps .text-danger { color: var(--mb-rose) !important; font-weight: 600; font-size: .8rem; }
.mb-auth-corps .bm-section-title {
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mb-violet);
    margin: 22px 0 12px; display: flex; align-items: center; gap: 10px;
}
.mb-auth-corps .bm-section-title::after { content: ''; flex: 1; height: 1px; background: var(--mb-bord); }

/* Mot de passe : bouton œil */
.mb-auth-corps .bm-oeil-champ, .mb-auth-corps .bm-mdp-champ { position: relative; }
.mb-auth-corps .bm-oeil-champ .form-control, .mb-auth-corps .bm-mdp-champ .form-control { padding-right: 48px; }
.mb-auth-corps .bm-oeil, .mb-auth-corps .bm-mdp-oeil {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--mb-texte-3);
    font-size: 1.05rem; padding: 6px 8px; border-radius: 10px;
}
.mb-auth-corps .bm-oeil:hover, .mb-auth-corps .bm-mdp-oeil:hover { color: var(--mb-violet); background: rgba(81, 72, 229, .07); }

/* Boutons */
.mb-auth-corps .btn-bm-primary {
    width: 100%; height: 54px; border: none; border-radius: 15px; background: var(--mb-degrade); color: #fff !important; font-weight: 700;
    font-size: .98rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important;
    box-shadow: 0 14px 28px -12px rgba(81, 72, 229, .75); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; padding: 0 18px;
}
.mb-auth-corps .btn-bm-primary::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-100%); transition: transform .6s ease;
}
.mb-auth-corps .btn-bm-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(81, 72, 229, .8); }
.mb-auth-corps .btn-bm-primary:hover::after { transform: translateX(100%); }
.mb-auth-corps .btn-bm-secondaire, .mb-auth-corps .btn-bm-secondary {
    width: 100%; height: 52px; border-radius: 15px; border: 1.5px solid var(--mb-bord); background: #fff; color: var(--mb-texte) !important;
    font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important; padding: 0 16px;
}
.mb-auth-corps .d-flex .btn-bm-secondaire { width: auto; height: 52px; }
.mb-auth-corps .btn-bm-secondaire:hover { border-color: var(--mb-violet); color: var(--mb-violet) !important; }
.mb-auth-corps .btn-bm-lien {
    border: none; background: none; color: var(--mb-violet); font-weight: 700; font-size: .88rem; padding: 6px 0; display: inline-flex; align-items: center; gap: 6px;
}
.mb-auth-corps .btn-bm-lien:disabled { color: var(--mb-texte-3); }
.mb-auth-corps .bm-lien, .mb-auth-corps a.mb-lien { color: var(--mb-violet); font-weight: 700; font-size: .88rem; text-decoration: none; }
.mb-auth-corps .bm-lien:hover { text-decoration: underline; }
.mb-auth-corps .bm-pied, .mb-auth-corps .bm-auth-link { text-align: center; margin-top: 20px; font-size: .9rem; color: var(--mb-texte-2); }
.mb-auth-corps .bm-auth-link a { color: var(--mb-violet); font-weight: 800; text-decoration: none; }
.mb-separateur, .mb-auth-corps .bm-separateur { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--mb-texte-3); font-size: .78rem; font-weight: 600; height: auto; background: none; }
.mb-separateur::before, .mb-separateur::after, .mb-auth-corps .bm-separateur::before, .mb-auth-corps .bm-separateur::after { content: ''; flex: 1; height: 1px; background: #e3e5f2; }
.mb-separateur:empty, .mb-auth-corps .bm-separateur:empty { gap: 0; } /* trait continu quand il n'y a pas de texte */
.mb-confiance { display: flex; justify-content: center; gap: 18px; margin-top: 30px; color: var(--mb-texte-3); font-size: .76rem; font-weight: 600; flex-wrap: wrap; }

/* Messages */
.mb-auth-corps .bm-message, .mb-auth-corps .alert, .mb-auth-corps .bm-alert-success, .mb-auth-corps .bm-alert-error {
    border-radius: 14px; padding: 12px 14px; font-size: .86rem; font-weight: 600; margin-bottom: 18px; border: 1px solid transparent;
}
.mb-auth-corps .bm-message.succes, .mb-auth-corps .bm-alert-success, .mb-auth-corps .alert-success { background: rgba(16, 185, 129, .10); color: #047857; border-color: rgba(16, 185, 129, .25); }
.mb-auth-corps .bm-message.erreur, .mb-auth-corps .alert-danger, .mb-auth-corps .bm-alert-error { background: rgba(225, 29, 72, .07); color: var(--mb-rose); border-color: rgba(225, 29, 72, .2); }
.mb-auth-corps .bm-message.info { background: rgba(81, 72, 229, .07); color: var(--mb-indigo); }
.mb-auth-corps .bm-message.test { background: rgba(245, 158, 11, .12); color: #92400e; text-align: center; }
.mb-auth-corps .bm-message.test strong { font-size: 1.15rem; letter-spacing: .2em; }
.mb-auth-corps .nav-pills { background: #eef0f8; padding: 4px; border-radius: 14px; }
.mb-auth-corps .nav-pills .nav-link { color: var(--mb-texte-2); border-radius: 11px; font-weight: 700; font-size: .86rem; }
.mb-auth-corps .nav-pills .nav-link.active { background: #fff; color: var(--mb-texte); box-shadow: 0 3px 10px rgba(20, 26, 77, .1); }

/* ---------- Téléphone ---------- */
@media (max-width: 991.98px) {
    .mb-auth { grid-template-columns: 1fr; }
    .mb-auth-marque { display: none; }
    .mb-auth-cote { align-items: start; padding: 26px 20px 40px; min-height: 100vh; }
    .mb-auth-cote::before { top: -10%; right: -30%; }
    .mb-auth-logo-mobile { display: block; }
    .mb-auth-corps h1, .mb-auth-corps .bm-auth-title, .mb-auth-corps .bm-title { font-size: 1.65rem; }
}