/* ==========================================================
   SMV Missions - styles communs (navigation, connexion, postuler)
   Chargé après sb-admin-2 : ne surcharge que ce qui est nécessaire.
   ========================================================== */
:root {
    --m-ink: #0f172a;
    --m-text: #334155;
    --m-muted: #64748b;
    --m-line: #e2e8f0;
    --m-bg: #f8fafc;
    --m-primary: #2563eb;
    --m-primary-dark: #1d4ed8;
    --m-primary-soft: #e0e7ff;
    --m-success: #059669;
    --m-success-soft: #ecfdf5;
    --m-danger: #dc2626;
    --m-danger-soft: #fef2f2;
    --m-warning: #b45309;
    --m-warning-soft: #fffbeb;
    --m-radius: 12px;
}

body { font-family: 'Nunito', sans-serif; background-color: var(--m-bg); color: var(--m-text); }

/* ---------- Navigation ---------- */
.m-nav { background: var(--m-ink); padding: .7rem 1.25rem; box-shadow: 0 2px 10px rgba(15, 23, 42, .15); }
.m-nav .navbar-brand { font-weight: 800; letter-spacing: -.2px; display: flex; align-items: center; gap: .55rem; }
/* Logo SMV (image sur fond blanc) posé dans une pastille blanche */
.m-nav .brand-logo {
    display: inline-flex; align-items: center; justify-content: center; background: #fff;
    border-radius: 8px; padding: 3px 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.m-nav .brand-logo img { display: block; height: 40px; width: auto; }
@media (max-width: 420px) { .m-nav .brand-text { display: none; } }
.m-nav .brand-mark {
    width: 30px; height: 30px; border-radius: 8px; background: var(--m-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}
.m-nav .nav-link { color: #cbd5e1 !important; font-weight: 600; font-size: .92rem; padding: .5rem .85rem !important; border-radius: 8px; }
.m-nav .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .06); }
.m-nav .nav-link.active { color: #fff !important; }
.m-nav .btn-login {
    background: var(--m-primary); color: #fff !important; border-radius: 8px; font-weight: 700;
    padding: .5rem 1rem !important; margin-left: .5rem;
}
.m-nav .btn-login:hover { background: var(--m-primary-dark); }
.m-nav .user-pill {
    display: inline-flex; align-items: center; gap: .5rem; color: #fff !important;
    background: rgba(255, 255, 255, .08); border-radius: 999px; padding: .35rem .9rem .35rem .35rem !important; margin-left: .5rem;
}
.m-nav .user-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--m-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; text-transform: uppercase;
}
.m-nav .dropdown-menu { border: none; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .15); padding: .5rem; }
.m-nav .dropdown-item { border-radius: 6px; font-weight: 600; font-size: .9rem; padding: .5rem .75rem; }
@media (max-width: 991px) {
    .m-nav .btn-login, .m-nav .user-pill { margin: .5rem 0 0; display: inline-flex; }
}

/* ---------- Pied de page ---------- */
.m-footer { background: #fff; border-top: 1px solid var(--m-line); padding: 1.5rem 0; margin-top: 3rem; }

/* ---------- Page de connexion ---------- */
.auth-wrap { min-height: calc(100vh - 140px); display: flex; align-items: center; padding: 2.5rem 16px; }
.auth-card { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 23, 42, .10); background: #fff; }
.auth-side {
    background: linear-gradient(160deg, rgba(15, 23, 42, .92), rgba(37, 99, 235, .88)), url('../img/header.png') center / cover;
    color: #fff; padding: 3rem 2.5rem; height: 100%;
}
.auth-side h2 { font-weight: 800; font-size: 1.7rem; line-height: 1.25; }
.auth-side ul { list-style: none; padding: 0; margin: 2rem 0 0; }
.auth-side li { display: flex; gap: .75rem; margin-bottom: 1.1rem; color: #e2e8f0; }
.auth-side li i { color: #93c5fd; margin-top: .2rem; width: 18px; text-align: center; }
.auth-form { padding: 3rem 2.5rem; }
.auth-form h1 { font-weight: 800; color: var(--m-ink); font-size: 1.6rem; }
@media (max-width: 575px) { .auth-form, .auth-side { padding: 2rem 1.25rem; } }

.academy-hint {
    display: flex; gap: .75rem; align-items: flex-start; background: var(--m-primary-soft); color: #3730a3;
    border-radius: 10px; padding: .9rem 1rem; font-size: .92rem; margin-bottom: 1.5rem;
}
.academy-hint i { margin-top: .15rem; }

/* ---------- Formulaires ---------- */
.m-form label { font-weight: 700; color: #475569; font-size: .92rem; margin-bottom: .4rem; }
.m-form .form-control { border-radius: 8px; border: 1px solid var(--m-line); padding: 12px 15px; height: auto; font-size: 1rem; color: var(--m-text); }
.m-form .form-control:focus { border-color: var(--m-primary); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }
.m-form .input-icon { position: relative; }
.m-form .input-icon > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.m-form .input-icon > .form-control { padding-left: 42px; }
.m-form .toggle-pass {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: none;
    color: #94a3b8; padding: 6px 8px; cursor: pointer;
}
.m-form .toggle-pass:hover { color: var(--m-text); }

.btn-m {
    background: var(--m-primary); color: #fff; border-radius: 8px; padding: 14px; font-weight: 700; font-size: 1.05rem;
    border: none; width: 100%; box-shadow: 0 4px 10px rgba(37, 99, 235, .2); transition: all .2s;
}
.btn-m:hover { background: var(--m-primary-dark); color: #fff; transform: translateY(-1px); }
.btn-m:disabled { background: #94a3b8; box-shadow: none; transform: none; cursor: not-allowed; }

/* ---------- Postuler ---------- */
.m-card { border: none; border-radius: var(--m-radius); box-shadow: 0 4px 20px rgba(0, 0, 0, .05); background: #fff; overflow: hidden; }
.m-card + .m-card { margin-top: 1.5rem; }
.m-card-title { font-weight: 800; color: var(--m-ink); font-size: 1.05rem; margin-bottom: 1rem; }

.badge-soft {
    background-color: var(--m-primary-soft); color: #4338ca; padding: 6px 12px; border-radius: 6px;
    font-weight: 700; font-size: .8rem; display: inline-block;
}
.mission-summary { padding: 1.75rem; border-bottom: 1px solid var(--m-line); background: linear-gradient(rgba(255,255,255,.9), rgba(248,250,252,.96)), url('../img/header.png') center / cover; }
.mission-summary h2 { font-weight: 800; color: var(--m-ink); font-size: 1.35rem; margin: .75rem 0 1rem; }
.mission-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--m-muted); font-weight: 600; font-size: .92rem; }
.mission-meta i { width: 16px; }

.identity { display: flex; align-items: center; gap: 1rem; }
.identity .avatar-lg {
    width: 52px; height: 52px; border-radius: 50%; background: var(--m-primary); color: #fff; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; text-transform: uppercase;
}
.identity .who { font-weight: 800; color: var(--m-ink); font-size: 1.05rem; }
.identity .mail { color: var(--m-muted); font-size: .9rem; word-break: break-all; }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem 0; border-top: 1px solid #f1f5f9; }
.check-list li:first-child { border-top: none; }
.check-list .ic { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; }
.check-list .ok .ic { background: var(--m-success-soft); color: var(--m-success); }
.check-list .ko .ic { background: var(--m-danger-soft); color: var(--m-danger); }
.check-list .wait .ic { background: var(--m-warning-soft); color: var(--m-warning); }
.check-list .lbl { font-weight: 700; color: var(--m-ink); }
.check-list .sub { color: var(--m-muted); font-size: .88rem; }

.m-alert { border: none; border-radius: 10px; padding: 1rem 1.1rem; display: flex; gap: .75rem; align-items: flex-start; }
.m-alert > i { margin-top: .2rem; }
.m-alert.success { background: var(--m-success-soft); color: #065f46; }
.m-alert.danger { background: var(--m-danger-soft); color: #991b1b; }
.m-alert.warning { background: var(--m-warning-soft); color: #92400e; }
.m-alert.info { background: var(--m-primary-soft); color: #3730a3; }
.m-alert a:not(.btn) { color: inherit; font-weight: 700; text-decoration: underline; }

/* ---------- Bouton "Rejoindre le réseau" (appel à l'action) ---------- */
.btn-join {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff !important; font-weight: 800;
    border-radius: 8px; padding: .7rem 1.6rem; text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(249, 115, 22, .45); transition: transform .15s ease, box-shadow .15s ease;
    animation: join-pulse 2.4s ease-in-out infinite;
}
.btn-join::after {
    content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg); animation: join-shine 3.2s ease-in-out infinite;
}
.btn-join:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px rgba(249, 115, 22, .55); color: #fff !important; }
@keyframes join-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(249, 115, 22, .45), 0 0 0 0 rgba(249, 115, 22, .5); }
    50% { box-shadow: 0 6px 18px rgba(249, 115, 22, .45), 0 0 0 8px rgba(249, 115, 22, 0); }
}
@keyframes join-shine { 0%, 60% { left: -75%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .btn-join, .btn-join::after { animation: none; } }

/* Dans la barre de navigation */
.m-nav .nav-link.btn-join { padding: .5rem 1.1rem !important; margin-left: .5rem; font-size: .92rem; }
.m-nav .nav-link.btn-join:hover { background: linear-gradient(135deg, #f59e0b, #f97316); }
.m-nav .nav-link.btn-join, .m-nav .nav-link.btn-join:hover, .m-nav .btn-join-mobile { color: #fff !important; }
@media (max-width: 991px) { .m-nav .nav-link.btn-join { margin: .5rem 0 0; display: inline-flex; } }

/* Encadré d'appel (connexion, fiche mission) */
.join-cta {
    background: #fff7ed; border: 2px dashed #fdba74; border-radius: var(--m-radius);
    padding: 1.1rem 1rem; text-align: center;
}
.join-cta-text { font-weight: 800; color: #9a3412; font-size: 1.05rem; margin-bottom: .7rem; }
/* Version mobile : visible à côté du menu hamburger */
.btn-join-mobile { padding: .45rem .9rem; font-size: .82rem; }
@media (max-width: 380px) { .btn-join-mobile { padding: .4rem .7rem; font-size: .75rem; } }

/* ---------- Animation des boutons de connexion (bleu) ----------
   Même effet que "Rejoindre le réseau" : halo qui pulse + reflet. */
.btn-anim { position: relative; overflow: hidden; animation: login-pulse 2.4s ease-in-out infinite; }
.btn-anim::after {
    content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; pointer-events: none;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: skewX(-20deg); animation: join-shine 3.2s ease-in-out infinite;
}
@keyframes login-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .55); }
    50% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn-anim, .btn-anim::after { animation: none; } }