/* ==========================================================
   ENSA Marseille - Self Service Password
   Theme IMVT 2026
   ========================================================== */

/* =========================
   Arrière-plan
   ========================= */

html,
body {
    min-height: 100vh;
}

body {

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;

}

/* Voile léger pour améliorer la lisibilité */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background: rgba(255,255,255,0.15);

    pointer-events: none;

    z-index: -1;
}

/* =========================
   Conteneur principal
   ========================= */

.container,
.container-fluid {

    max-width: 1350px;

    margin-top: 15px !important;
    margin-bottom: 15px !important;

    padding: 20px !important;

    background: rgba(255,255,255,0.82);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 20px;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.18);

}

/* =========================
   Logo ENSA
   ========================= */

.logo {

    max-height: 95px !important;

    width: auto !important;

    display: block;

    margin: 5px auto 10px auto !important;

}

/* =========================
   Cartes
   ========================= */

.card {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

}

.card-body {

    padding: 10px !important;

}

/* =========================
   Titre principal
   ========================= */

.title {

    background: rgba(221,240,231,0.95) !important;

    border: 1px solid #a5d8c0 !important;

    border-radius: 16px;

    padding: 18px !important;

    margin-bottom: 20px !important;

}

.title h1 {

    color: #003366;

    font-size: 2.3rem;

    font-weight: 700;

    margin: 0;

}

/* =========================
   Alertes
   ========================= */

.alert {

    border-radius: 12px;

    padding: 14px !important;

    margin-bottom: 14px !important;

    border-width: 1px !important;

}

.alert-success {

    background: rgba(212,237,218,.95);

    border-color: #99d8a6;

    color: #155724;

    font-weight: 600;

}

.alert-info {

    background: rgba(217,237,247,.95);

    border-color: #8dc5ea;

}

.alert-warning {

    background: rgba(255,243,205,.95);

    border-color: #efd899;

}

/* =========================
   Table formulaire
   ========================= */

table {

    width: 100%;

}

table tr {

    background: rgba(221,243,250,.55);

}

table td {

    padding: 10px !important;

}

/* =========================
   Champs de formulaire
   ========================= */

.form-control {

    min-height: 50px;

    border-radius: 12px;

    border: 1px solid #cfd8dc;

    font-size: 1rem;

    box-shadow: none;

}

.form-control:focus {

    border-color: #005ea8;

    box-shadow:
        0 0 0 .20rem rgba(0,94,168,.20);

}

/* =========================
   Icônes Bootstrap
   ========================= */

.input-group-text {

    border-radius: 12px 0 0 12px;

    background: #f8f9fa;

}

/* =========================
   Boutons
   ========================= */

.btn,
.btn-primary {

    background:
        linear-gradient(
            135deg,
            #005ea8,
            #00407a
        ) !important;

    border: none !important;

    border-radius: 12px;

    color: #fff !important;

    font-weight: 600;

    font-size: 1rem;

    min-width: 130px;

    padding: 10px 25px;

    transition: all .2s ease;

}

.btn:hover,
.btn-primary:hover {

    transform: translateY(-1px);

    box-shadow:
        0 6px 15px rgba(0,0,0,0.18);

}

/* =========================
   Menu
   ========================= */

.nav-link {

    font-weight: 500;

}

/* =========================
   Footer
   ========================= */

.footer {

    font-size: 0.90rem;

    opacity: 0.75;

}

/* =========================
   Masquer le footer SSP
   si désiré
   ========================= */

footer {

    opacity: .75;

}

/* =========================
   Responsive Mobile
   ========================= */

@media (max-width: 768px) {

    .logo {

        max-height: 70px !important;

    }

    .title h1 {

        font-size: 1.5rem;

    }

    .container,
    .container-fluid {

        padding: 10px !important;

    }

}