@charset "utf-8";

/* ================================================================
   1. VARIABLES CSS & RESET
   ================================================================ */

:root {
    --sidebar-width: 16rem;
    --sidebar-gap:   0rem;
}

*,
*::before,
*::after {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

*:focus {
    box-shadow: none    !important;
    outline:    none    !important;
}


/* ================================================================
   2. SCROLLBAR PERSONNALISÉE
   ================================================================ */

*::-webkit-scrollbar {
    width:  8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background:    #0b0e18;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(245, 111, 69, 0.6);
    border-radius:    4px;
    border:           2px solid #0b0e18;
    transition:       background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #F56F45;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 111, 69, 0.6) #0b0e18;
}

*::-moz-scrollbar-thumb:hover {
    background-color: #F56F45;
}


/* ================================================================
   3. POLICES (Nunito)
   ================================================================ */

@font-face {
    font-family:   'Nunito';
    src:           url('/fonts/nunito/Nunito-Regular.ttf') format('truetype');
    font-weight:   400;
    font-style:    normal;
    font-display:  swap;
}

@font-face {
    font-family:   'Nunito';
    src:           url('/fonts/nunito/Nunito-SemiBold.ttf') format('truetype');
    font-weight:   600;
    font-style:    normal;
    font-display:  swap;
}

@font-face {
    font-family:   'Nunito';
    src:           url('/fonts/nunito/Nunito-Bold.ttf') format('truetype');
    font-weight:   700;
    font-style:    normal;
    font-display:  swap;
}

@font-face {
    font-family:   'Nunito';
    src:           url('/fonts/nunito/Nunito-ExtraBold.ttf') format('truetype');
    font-weight:   800;
    font-style:    normal;
    font-display:  swap;
}


/* ================================================================
   4. TYPOGRAPHIE & TAILLES DE BASE
   ================================================================ */

html {
    font-size:             16px;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 768px) {
    html { font-size: 18px; }
}

@media (min-width: 1024px) {
    html { font-size: 18px; }
}


/* ================================================================
   5. LAYOUT GLOBAL
   ================================================================ */

body,
html {
    font-family:      'Nunito', sans-serif;
    font-weight:      400;
    background-color: #071424;
    line-height:      1.5;
    margin:           0;
    padding:          0;
    color:            #FFFFFF;
    min-height:       100dvh;
}
/* ================================================================
   LOGIN PORTAL
   Étend style.css (variables, reset, typographie, scrollbar)
   ================================================================ */

/* ----------------------------------------------------------------
   Scène : centre la carte à l'écran, porte le glow d'ambiance
   ---------------------------------------------------------------- */

.login-scene {
    position:        relative;
    min-height:      100dvh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1.5rem;
    overflow:        hidden;
}

.login-glow {
    position:      absolute;
    top:           50%;
    left:          50%;
    width:         42rem;
    height:        42rem;
    background:    radial-gradient(circle, rgba(245, 111, 69, 0.16) 0%, rgba(245, 111, 69, 0) 70%);
    transform:     translate(-50%, -50%);
    pointer-events: none;
}

/* ----------------------------------------------------------------
   Carte de connexion
   ---------------------------------------------------------------- */

.login-card {
    position:         relative;
    z-index:          1;
    width:            100%;
    max-width:        24rem;
    background-color: #0b0e18;
    border:           1px solid rgba(255, 255, 255, 0.06);
    border-radius:    1.3rem;
    padding:          2.25rem 2rem;
    box-shadow:       0 1.5rem 3rem rgba(0, 0, 0, 0.35);
}

.login-mark {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            8rem;
    height:           5rem;
    margin:           0 auto 1.25rem;
    background-color: #0f1626;
    border-radius:    0.9rem;
    overflow:         hidden;
    padding: 1rem;
}

.login-mark img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

.login-title {
    font-size:     1.15rem;
    font-weight:   800;
    line-height:   1.3;
    letter-spacing: 0.02em;
    text-align:    center;
    max-width:     100%;
    overflow-wrap: break-word;
    margin-bottom: 0.35rem;
}

.login-subtitle {
    font-size:     0.9rem;
    font-weight:   400;
    color:         rgba(255, 255, 255, 0.55);
    text-align:    center;
    max-width:     100%;
    overflow-wrap: break-word;
    margin-bottom: 1.75rem;
}

/* ----------------------------------------------------------------
   Formulaire
   ---------------------------------------------------------------- */

.login-form {
    display:       flex;
    flex-direction: column;
    gap:           1.1rem;
}

.field {
    display:       flex;
    flex-direction: column;
    gap:           0.4rem;
}

.field label {
    font-size:   0.8rem;
    font-weight: 600;
    color:       rgba(255, 255, 255, 0.75);
}

.field input[type="text"],
.field input[type="password"] {
    width:            100%;
    padding:          0.7rem 0.9rem;
    font-family:      'Nunito', sans-serif;
    font-size:        0.95rem;
    font-weight:      400;
    color:            #FFFFFF;
    background-color: #0f1626;
    border:           1px solid rgba(255, 255, 255, 0.08);
    border-radius:    0.8rem;
    transition:       border-color 0.2s ease, background-color 0.2s ease;
}

.field input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.field input:focus {
    border-color:     #F56F45;
    background-color: #10192c;
}

.field input:-webkit-autofill {
    -webkit-text-fill-color: #FFFFFF;
    -webkit-box-shadow:      0 0 0px 1000px #0f1626 inset;
    transition:              background-color 9999s ease-in-out 0s;
}

/* ----------------------------------------------------------------
   Bouton "Se connecter" (spécification fournie)
   ---------------------------------------------------------------- */

.btn-global {
    padding:          0.55rem 1rem;
    font-size:        1rem;
    font-family:      'Nunito', sans-serif;
    font-weight:      700;
    border-radius:    1.3rem;
    color:            #fff;
    border:           none;
    cursor:           pointer;
    display:          inline-flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              0.625rem;
    transition:       background-color 0.2s, transform 0.1s;
    text-decoration:  none;
    background-color: #F56F45;
    width:            100%;
    margin-top:       0.5rem;
}

.btn-global:hover {
    background-color: #e15f37;
}

.btn-global:active {
    transform: scale(0.98);
}

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

@media (max-width: 420px) {
    .login-card {
        padding: 1.75rem 1.5rem;
    }
}