:root{
  --blue-elite: #1d2b7a;
    --yellow-elite: #f7c843;
    --gray-bg: #f4f6fb;
   --bg:#f4f6f9;
}

/* GLOBAL */

body{
    font-family: 'Roboto', 'Segoe UI', sans-serif;
  margin:0;
font-family:Arial, Helvetica, sans-serif;
background:var(--bg);
}

/* WRAPPER (fond bleu ici) */

.login-wrapper{
  width:100%;

  padding:30px 20px;

  border-radius:16px;

  display:flex;
  justify-content:center;
  align-items:center;
}

/* CARD */

.login-card{
  width:100%;
  max-width:400px;

  background:white;

  padding:30px 25px;

  border-radius:12px;

  box-shadow:0 10px 30px rgba(0,0,0,0.2);

  animation:fadeIn 0.6s ease;
}

/* LOGO */

.login-logo{
  width:90px;
}

/* INPUT */

.form-control{
  border-radius:8px;
  padding:12px;
}

/* BUTTON */

.login-btn{
  background:var(--blue-elite);
  color:white;

  padding:12px;

  border-radius:8px;

  font-weight:600;

  transition:0.3s;
}

.login-btn:hover{
  background:var(--yellow-elite);
}

/* ANIMATION */

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* MOBILE */

@media (max-width:576px){

  body{
    padding:15px;
  }

  .login-wrapper{
    padding:20px 15px;
    border-radius:12px;
  }

  .login-card{
    padding:25px 20px;
    border-radius:10px;
  }

  .login-logo{
    width:65px;
  }

  h4{
    font-size:18px;
  }

  .form-control{
    padding:10px;
    font-size:14px;
  }

  .login-btn{
    padding:10px;
    font-size:14px;
  }

}

.elite-app{
display:flex;
min-height:100vh;
}

/* SIDEBAR */
.elite-sidebar{
width:240px;
background:var(--blue-elite);
color:white;
padding:20px;
display:flex;
flex-direction:column;
transition:0.3s;
position:fixed;
top:0;
left:0;
height:100vh;
z-index:1000;
}

/* LOGO */

.elite-logo{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
margin-bottom:30px;
}

.elite-logo img{
width:40px;
}

/* MENU */

.elite-menu{
flex:1;
}

.elite-menu a{
display:flex;
align-items:center;
gap:12px;
padding:12px;
border-radius:10px;
color:white;
text-decoration:none;
margin-bottom:8px;
transition:0.3s;
font-size:14px;
}

/* HOVER */

.elite-menu a:hover{
background:rgba(255,255,255,0.15);
transform:translateX(4px);
}

/* ACTIVE */

.elite-menu a.active{
background:var(--yellow-elite);
color:#000;
font-weight:600;
}

/* LOGOUT */

.logout-link{
margin-top:auto;
background:rgba(255,255,255,0.1);
}

.logout-link:hover{
background:#ff4d4d;
color:white;
}

/* =========================
MAIN SHIFT
========================= */

.elite-main{
margin-left:240px;
transition:0.3s;
}

/* =========================
TOGGLE BUTTON
========================= */

.elite-menu-toggle{
display:none;
background:none;
border:none;
font-size:24px;
cursor:pointer;
color:#1d2b7a;
}

/* =========================
MOBILE
========================= */

@media(max-width:992px){

/* SIDEBAR HIDDEN */

.elite-sidebar{
transform:translateX(-100%);
}

/* SHOW SIDEBAR */

.elite-sidebar.active{
transform:translateX(0);
}

/* MAIN FULL */

.elite-main{
margin-left:0;
}

/* BUTTON SHOW */

.elite-menu-toggle{
display:block;
}

/* OVERLAY */

.elite-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
z-index:999;
display:none;
}

.elite-overlay.active{
display:block;
}
}

.elite-divider{
height:1px;
background:linear-gradient(
  to right,
  transparent,
  rgba(255,255,255,0.3),
  transparent
);
margin:20px 0;
}
.elite-sidebar{
transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* MAIN */

.elite-main{
flex:1;
padding:20px;
}

/* TOPBAR */

.elite-topbar{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:15px 20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* CARDS */

.elite-card{
background:white;
padding:20px;
border-radius:12px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:0.3s;
}

.elite-card i{
font-size:28px;
margin-bottom:10px;
}

.elite-card h6{
margin:10px 0 5px;
}

.elite-card p{
font-weight:600;
color:#555;
}

.elite-card:hover{
transform:translateY(-5px);
}

/* RESPONSIVE */



.elite-team-logo{
width:80px;
height:80px;
object-fit:cover;
border-radius:12px;
border:2px solid rgba(0,0,0,0.05);
}

.elite-section-title{
font-weight:600;
color:#1d2b7a;
margin-bottom:15px;
display:flex;
align-items:center;
gap:8px;
}

.elite-color-box{
display:flex;
align-items:center;
gap:10px;
font-weight:500;
}

.elite-color-box span{
width:25px;
height:25px;
border-radius:6px;
border:1px solid rgba(0,0,0,0.1);
}

/* Nuances */
.elite-card{
background:white;
border-radius:12px;
padding:20px;
box-shadow:0 8px 20px rgba(0,0,0,0.04);
transition:0.3s;
}

.elite-card:hover{
transform:translateY(-3px);
}

.elite-hero-card{
display:flex;
align-items:center;
gap:20px;
padding:20px;
background:white;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}
.elite-menu-toggle{
  margin-left:auto;
}
.elite-team-logo{
width:70px;
height:70px;
border-radius:10px;
object-fit:cover;
}

.elite-badge{
background:rgba(29,43,122,0.1);
color:#1d2b7a;
padding:5px 10px;
border-radius:8px;
font-size:13px;
}

/* CARD */

.elite-card-clean{
background:white;
border-radius:12px;
overflow:hidden;
border:1px solid rgba(0,0,0,0.05);
}

.elite-card-header{
padding:14px 18px;
font-weight:600;
color:#1d2b7a;
background:rgba(29,43,122,0.05);
border-bottom:1px solid rgba(0,0,0,0.05);
display:flex;
align-items:center;
gap:8px;
}

/* GRID */

.elite-grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
padding:20px;
}

.elite-grid-2 span{
font-size:12px;
color:#777;
}

.elite-grid-2 strong{
display:block;
font-size:14px;
}

/* COLORS */

.elite-color-row{
display:flex;
justify-content:space-around;
padding:20px;
}

.color-box{
width:30px;
height:30px;
border-radius:6px;
display:inline-block;
margin-right:8px;
}

/* STATS */

.elite-stats{
display:flex;
justify-content:space-around;
padding:20px;
text-align:center;
}

.elite-stats h4{
margin:0;
color:#1d2b7a;
}

.elite-stats span{
font-size:13px;
color:#777;

}

.elite-empty-state{
min-height:70vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:20px;
}

/* ICON */

.elite-empty-icon{
font-size:70px;
color:#1d2b7a;
opacity:0.15;
margin-bottom:20px;
}

/* TEXT */

.elite-empty-state h4{
font-weight:600;
margin-bottom:10px;
}

.elite-empty-state p{
max-width:420px;
color:#777;
line-height:1.6;
}

/* =========================
GLOBAL
========================= */

.elite-main{
padding:20px;
}

/* =========================
TOPBAR
========================= */

.elite-topbar h5{
font-weight:600;
color:#1d2b7a;
}

/* =========================
CARD CLEAN
========================= */

.elite-card-clean{
background:#ffffff;
border-radius:12px;
overflow:hidden;
border:1px solid rgba(0,0,0,0.05);
transition:0.3s;
}

.elite-card-clean:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

/* =========================
HEADER CARD
========================= */

.elite-card-header{
padding:14px 18px;
font-weight:600;
color:#1d2b7a;
background:rgba(29,43,122,0.05);
border-bottom:1px solid rgba(0,0,0,0.05);

display:flex;
align-items:center;
gap:10px;
}

/* =========================
BODY
========================= */

.elite-card-body{
padding:20px;
color:#444;
line-height:1.6;
}

/* =========================
LIST
========================= */

.elite-list{
padding-left:18px;
margin:0;
}

.elite-list li{
margin-bottom:8px;
color:#555;
}

/* =========================
LINKS LIST (container)
========================= */

.elite-links-list{
display:flex;
flex-direction:column;
gap:10px;
}

/* =========================
LINKS FIX (BOOTSTRAP OVERRIDE)
========================= */

.elite-link,
.elite-link:visited,
.elite-link:focus{
display:flex;
align-items:center;
justify-content:space-between;

padding:12px 15px;

border-radius:10px;
text-decoration:none !important;

background:rgba(29,43,122,0.05);
color:#1d2b7a !important;

font-weight:500;
transition:0.3s;
cursor:pointer;
}

/* ICON LEFT */

.elite-link span{
display:flex;
align-items:center;
gap:10px;
}

/* ICON RIGHT */

.elite-link i{
font-size:16px;
}

/* HOVER */

.elite-link:hover{
background:rgba(29,43,122,0.1);
transform:translateX(4px);
color:#1d2b7a !important;
text-decoration:none !important;
}

/* =========================
SECTION SPACING
========================= */

.elite-section{
margin-top:25px;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.elite-card-body{
padding:15px;
}

.elite-link{
font-size:14px;
padding:10px 12px;
}

}
.elite-footer{
display:flex;
justify-content:space-between;
align-items:center;

padding:15px 20px;
margin-top:30px;

background:white;
border-radius:10px;

box-shadow:0 5px 15px rgba(0,0,0,0.05);

font-size:14px;
}

/* LEFT */

.elite-footer-left{
display:flex;
align-items:center;
gap:10px;
color:#555;
}

.elite-footer-left img{
width:30px;
}

/* RIGHT */

.elite-footer-right{
display:flex;
gap:15px;
}

.elite-footer-right a{
text-decoration:none;
color:#1d2b7a;
font-weight:500;
transition:0.3s;
}

.elite-footer-right a:hover{
text-decoration:underline;
}

/* =========================
STICKY FOOTER (OPTION PRO)
========================= */

.elite-main{
min-height:100vh;
display:flex;
flex-direction:column;
}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.elite-footer{
flex-direction:column;
gap:10px;
text-align:center;
}

}