@charset "UTF-8";
/* =====================================================================
   UKM Design — pages d'authentification (connexion admin / étudiant,
   mot de passe oublié, réinitialisation). Couche purement visuelle.
   Revenir en arrière : retirer la ligne <link ... ukm-auth.css> des vues.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------
   THÈMES (partagés avec l'espace admin : même choix, clé localStorage
   « ukm-theme », attribut data-ukm-theme sur <html>). Émeraude UKM par défaut.
   --------------------------------------------------------------------- */
html[data-ukm-theme="ocean"] {
    --ukm-green: #0f766e; --ukm-green-2: #14b8a6; --ukm-teal: #4f46e5; --ukm-green-dark: #134e4a;
    --ukm-deep: #0b1f33; --ukm-deep-2: #1d2b45; --ukm-soft: #99f6e4; --ukm-soft-2: #e0f2fe;
    --ukm-bg: #eef3f8;
}
:root,
html[data-ukm-theme="emeraude"] {
    --ukm-green: #0f9d58; --ukm-green-2: #22c55e; --ukm-teal: #0d9394; --ukm-green-dark: #0b5e37;
    --ukm-deep: #07231a; --ukm-deep-2: #0b1b2b; --ukm-soft: #86efac; --ukm-soft-2: #e7fff1;
    --ukm-bg: #f3f7f5;
}
html[data-ukm-theme="royal"] {
    --ukm-green: #6d28d9; --ukm-green-2: #a78bfa; --ukm-teal: #db2777; --ukm-green-dark: #4c1d95;
    --ukm-deep: #1e1b4b; --ukm-deep-2: #2e1065; --ukm-soft: #ddd6fe; --ukm-soft-2: #f5f3ff;
    --ukm-bg: #f5f3fb;
}
html[data-ukm-theme="sahel"] {
    --ukm-green: #c2410c; --ukm-green-2: #fb923c; --ukm-teal: #d97706; --ukm-green-dark: #9a3412;
    --ukm-deep: #2a1a10; --ukm-deep-2: #3d2416; --ukm-soft: #fed7aa; --ukm-soft-2: #fff7ed;
    --ukm-bg: #faf5ef;
}
html[data-ukm-theme="clair"] {
    --ukm-green: #2563eb; --ukm-green-2: #60a5fa; --ukm-teal: #06b6d4; --ukm-green-dark: #1d4ed8;
    --ukm-deep: #0f172a; --ukm-deep-2: #1e3a8a; --ukm-soft: #bfdbfe; --ukm-soft-2: #eff6ff;
    --ukm-bg: #f5f7fb;
}
html[data-ukm-theme="minuit"] {
    --ukm-green: #0891b2; --ukm-green-2: #22d3ee; --ukm-teal: #7c3aed; --ukm-green-dark: #155e75;
    --ukm-deep: #02040a; --ukm-deep-2: #0b1120; --ukm-soft: #a5f3fc; --ukm-soft-2: #ecfeff;
    --ukm-bg: #070b14;
    --ukm-panel-bg: #0f172a; --ukm-panel-line: rgba(148, 163, 184, .18);
    --ukm-ink: #f1f5f9; --ukm-text: #cbd5e1; --ukm-muted: #94a3b8;
    --ukm-glass: rgba(17, 25, 40, .74); --ukm-glass-strong: rgba(11, 17, 30, .9);
    --ukm-glass-border: rgba(148, 163, 184, .16); --ukm-line: rgba(148, 163, 184, .14);
}

:root {
    --ukm-red: #d7263d;
    --ukm-ink: #0f172a;
    --ukm-muted: #5b6b7f;
    --ukm-ease: cubic-bezier(.2, .8, .2, 1);
}

:root {
    --ukm-auth-card: rgba(255, 255, 255, .66);
    --ukm-auth-border: rgba(255, 255, 255, .85);
    --ukm-auth-input: rgba(255, 255, 255, .85);
    --ukm-auth-input-focus: #fff;
}
html[data-ukm-theme="minuit"] {
    --ukm-auth-card: rgba(17, 25, 40, .78);
    --ukm-auth-border: rgba(148, 163, 184, .18);
    --ukm-auth-input: rgba(2, 6, 23, .55);
    --ukm-auth-input-focus: rgba(2, 6, 23, .8);
    color-scheme: dark;
}
html[data-ukm-theme="minuit"] input[type="text"],
html[data-ukm-theme="minuit"] input[type="password"],
html[data-ukm-theme="minuit"] input[type="email"],
html[data-ukm-theme="minuit"] .loginbg .form-control { color: #e2e8f0; border-color: rgba(148, 163, 184, .2) !important; }

html, body { min-height: 100%; }
body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ukm-muted);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    background-color: var(--ukm-bg);
    background-image:
        radial-gradient(50vw 50vw at 0% 0%, color-mix(in srgb, var(--ukm-green) 22%, transparent), transparent 60%),
        radial-gradient(40vw 40vw at 30% 100%, color-mix(in srgb, var(--ukm-teal) 18%, transparent), transparent 60%),
        radial-gradient(30vw 30vw at 38% 40%, rgba(215, 38, 61, .08), transparent 60%);
    background-attachment: fixed;
}
::selection { background: var(--ukm-green); color: #fff; }
a, a:hover, a:focus { color: var(--ukm-green); }

/* ---------- Colonne formulaire (carte verre) ---------- */
.loginbg {
    position: relative;
    margin: 6vh auto;
    max-width: 420px;
    padding: 36px 34px 30px;
    border-radius: 24px;
    background: var(--ukm-auth-card);
    border: 1px solid var(--ukm-auth-border);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04), 0 30px 60px -20px rgba(15, 23, 42, .28);
    animation: ukmAuthIn .6s var(--ukm-ease) both;
}
.loginbg::before {
    content: "";
    position: absolute;
    left: 34px; right: 34px; top: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--ukm-green), var(--ukm-teal) 55%, var(--ukm-red));
}
@keyframes ukmAuthIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.form-top, .form-bottom { padding-left: 0; padding-right: 0; background: transparent; text-align: center; }
.form-top { padding-bottom: 6px; }
.form-top-left { float: none; padding-top: 0; }
.logowidth img {
    height: 88px !important;
    width: 88px !important;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: 4px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 14px 30px -10px color-mix(in srgb, var(--ukm-green) 55%, transparent);
}
.form-bottom { text-align: left; padding-top: 8px; }
.form-bottom h3.font-white,
.font-white {
    color: var(--ukm-ink);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: center;
    margin: 6px 0 22px;
}
.form-bottom h3.font-white::after {
    content: "Université Kankou Moussa · Espace numérique";
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ukm-muted);
}

/* Champs */
input[type="text"],
input[type="password"],
input[type="email"],
textarea, textarea.form-control,
.loginbg .form-control {
    height: 50px;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    background: var(--ukm-auth-input) !important;
    color: var(--ukm-ink);
    font-size: 14.5px;
    padding-left: 18px;
    padding-right: 44px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .2s var(--ukm-ease), box-shadow .2s var(--ukm-ease), background-color .2s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus, .loginbg .form-control:focus {
    border-color: var(--ukm-green) !important;
    background: var(--ukm-auth-input-focus) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ukm-green) 15%, transparent);
    outline: 0;
}
.form-control::placeholder { color: #94a3b8; }
.form-control-feedback { color: #94a3b8; height: 50px; line-height: 50px; width: 46px; }
.has-feedback:focus-within .form-control-feedback { color: var(--ukm-green); }
.loginbg .form-group { margin-bottom: 16px; }

/* Bouton */
.form-bottom form button.btn,
.loginbg button.btn,
.loginbg button[type="submit"] {
    width: 100%;
    height: 52px;
    line-height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--ukm-green), var(--ukm-teal));
    box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--ukm-green) 75%, transparent);
    transition: transform .2s var(--ukm-ease), box-shadow .2s var(--ukm-ease), filter .2s;
}
.form-bottom form button.btn:hover,
.loginbg button.btn:hover,
.loginbg button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--ukm-green), var(--ukm-teal));
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--ukm-green) 85%, transparent);
}
.form-bottom form button.btn:active { transform: translateY(0); }

a.forgot {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--ukm-muted);
    font-size: 13px;
    font-weight: 600;
}
a.forgot:hover { color: var(--ukm-green); text-decoration: none; }
a.forgot:after { display: none; }

.loginbg .alert { border-radius: 12px; border: 0; font-size: 13px; }
.loginbg .text-danger { color: var(--ukm-red); font-size: 12.5px; }
#captcha_image img { border-radius: 10px; }

/* ---------- Colonne image ---------- */
.text-wrap {
    background-color: var(--ukm-green-dark);
    border-radius: 0;
    overflow: hidden;
}
.text-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(7, 17, 31, .05) 0%, color-mix(in srgb, var(--ukm-green-dark) 18%, transparent) 55%, rgba(7, 17, 31, .78) 100%);
}
.text-wrap::after {
    content: "« L’Homme ne peut être libre que par son savoir »";
    position: absolute !important;
    left: 50%;
    bottom: 6vh;
    top: auto !important;
    width: min(90%, 640px) !important;
    height: auto !important;
    transform: translateX(-50%);
    z-index: 1 !important;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(15px, 1.6vw, 20px);
    font-weight: 600;
    font-style: italic;
    letter-spacing: .01em;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}
.bg-shadow-remove:after { background: transparent; }
.h3 {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(20px, 2.2vw, 28px);
}
.loginright {
    border-radius: 20px;
    padding: 2rem 2.2rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
}
.loginright h4 { color: #fff; font-weight: 700; font-size: 16px; }
.loginright p { color: rgba(255, 255, 255, .85); word-break: normal; }
a.more { color: var(--ukm-soft); font-weight: 600; }
.logdivider { background: rgba(255, 255, 255, .22); }

/* Écrans « mot de passe oublié / réinitialisation » */
.bgwhite, .shadow_bg {
    border-radius: 24px;
    background: var(--ukm-auth-card);
    border: 1px solid var(--ukm-auth-border);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .28);
}

/* ---------- Responsive ---------- */

/* ---------- Sélecteur de thèmes (bouton flottant + panneau) ---------- */
.ukm-tp-fab {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 2999;
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 16px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--ukm-green), var(--ukm-teal));
    box-shadow: 0 14px 30px -12px var(--ukm-green);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s;
}
.ukm-tp-fab:hover { transform: translateY(-2px) rotate(-8deg); filter: brightness(1.08); }
.ukm-tp-fab:focus-visible { outline: 3px solid var(--ukm-soft); outline-offset: 3px; }
@keyframes ukmRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ukm-tp {
    --ukm-card-solid: var(--ukm-panel-bg, #fff);
    --ukm-text: var(--ukm-ink);
    --ukm-line: var(--ukm-panel-line, rgba(15, 23, 42, .1));
    position: fixed;
    z-index: 3000;
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 16px;
    border-radius: 20px;
    background: var(--ukm-card-solid, #fff);
    color: var(--ukm-text, #0f172a);
    border: 1px solid var(--ukm-card-border, rgba(15, 23, 42, .08));
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .45);
    font-family: var(--ukm-font, "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif);
    animation: ukmRise .25s cubic-bezier(.2, .8, .2, 1) both;
}
.ukm-tp[hidden] { display: none !important; }
.ukm-tp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; }
.ukm-tp__close { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--ukm-muted, #64748b); cursor: pointer; }
.ukm-tp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ukm-tp__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 8px 10px;
    border-radius: 14px;
    border: 1.5px solid var(--ukm-line, rgba(15, 23, 42, .08));
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s;
}
.ukm-tp__card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .5); }
.ukm-tp__card[aria-pressed="true"] { border-color: var(--ukm-brand, var(--ukm-green)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ukm-brand, var(--ukm-green)) 20%, transparent); }
.ukm-tp__preview {
    position: relative;
    display: block;
    width: 100%;
    height: 62px;
    margin-bottom: 6px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef2f7;
    border: 1px solid rgba(15, 23, 42, .06);
}
.ukm-tp__preview i { position: absolute; left: 0; top: 0; bottom: 0; width: 28%; background: var(--a); }
.ukm-tp__preview b { position: absolute; left: 34%; right: 6%; top: 10px; height: 16px; border-radius: 5px; background: linear-gradient(115deg, var(--b), var(--c)); }
.ukm-tp__preview em { position: absolute; left: 34%; right: 40%; top: 34px; height: 16px; border-radius: 5px; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .12); }
.ukm-tp__name { font-weight: 700; font-size: 13.5px; }
.ukm-tp__desc { font-size: 11.5px; color: var(--ukm-muted, #64748b); }
.ukm-tp__note { margin: 12px 2px 0; font-size: 11.5px; color: var(--ukm-muted, #64748b); }


@media (max-width: 991px) {
    .loginbg { margin: 5vh auto; }
}
@media (max-width: 767px) {
    .loginbg { margin: 24px 16px; padding: 28px 22px 24px; }
    .text-wrap { height: auto; min-height: 60vh; padding: 40px 16px 90px; }
    .loginright { padding: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}