/* =========================
   RESET GLOBAL
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================
   STYLE GLOBAL DU SITE
   ========================= */
body {
    font-family: 'Orbitron', sans-serif;
    background: url(image/image2.png) no-repeat center center fixed;
    color: #333;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background: rgba(0,0,0,0.15);
    z-index: 0;
}

h1, h2 {
    color: #333;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

h3, h4 {
    color: #f5f1c0;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

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

.header {
    grid-area: header;
    position: relative;
    z-index: 10;
    width: 100%;
    height: 70px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 20px;
}

.header::after {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(1px);

    z-index: 1;
}

.header * {
    position: relative;
    z-index: 2;
}

/* Partie gauche */
.header-left {
    width: 130px; 
    height: 40px; 
    margin-left: 0; 
    margin-top: 8px;
}

/* Partie droite */
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;              /* l’input prend l’espace disponible */
    max-width: 200px;     /* limite la largeur en grand écran */
    min-width: 120px;     /* évite qu’il devienne trop petit */
    margin-right: 10px;
    transition: all 0.5s ease;
    gap: 20px;
}

/* Barre de recherche */
.header-right input {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

/* Icônes */
.icon {
    position: relative;
    font-size: 20px;
    cursor: pointer;
}

/* Badge notification */
.icon .badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 50%;
}

/* Profil utilisateur */
.profile-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Avatar */
.profile-menu img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

/* Nom utilisateur */
.profile-menu span {
    font-weight: 500;
}

.profile-menu:hover {
    opacity: 0.8;
}

.icon:hover {
    color: var(--primary);
}

/* =========================
   CONTENEUR PRINCIPAL
   ========================= */

.app {
    display: grid;
    grid-template-columns: 235px 1fr;
    grid-template-rows: 70px 1fr;

    grid-template-areas:
        "sidebar header"
        "sidebar content";

    height: 100vh;
}

.content {
    grid-area: content;

    position: relative;

    padding: 0;

    /* LE “CADRE” VISUEL DE L’APP */
    margin: 0;
    border-radius: 0;

    background: #090224;
    backdrop-filter: blur(10px);
    border-top-left-radius: 20px;
    overflow-y: auto;
}

/* =========================
   TABLEAU PREMIUM
   ========================= */

table {
    width: 100%;
    border-collapse: collapse;
    background: #2a2640; /* fond sombre */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
}

/* En-tête */
table thead {
    background: linear-gradient(135deg, #4b2cbf, #6a4bff);
}

table th, 
table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #3c375a;
}

/* Lignes */
table td {
    padding: 12px;
    font-size: 13px;
    color: #f0f3c3;
}

/* Séparateur léger */
table tr {
    border-bottom: 1px solid #f1f1f1;
}

/* Hover */
table tr:hover {
    background: rgba(75, 44, 191, 0.05);
    transition: 0.2s;
}

table th {
  background: #4b2cbf; /* violet principal */
  color: #fff;
  cursor: pointer;
  user-select: none;
}

table th:hover {
  background: #3a21a0;
}

table tr:nth-child(even) {
  background: #242038; /* alternance sombre */
}

table tr:hover {
  background: #3c375a; /* survol plus clair */
}

/* BADGES STATUT */
.badge {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
}

.badge.success {
    background: rgba(40, 199, 111, 0.1);
    color: #28c76f;
}

.badge.pending {
    background: rgba(255, 159, 67, 0.1);
    color: #ff9f43;
}

.badge.rejected {
    background: rgba(234, 84, 85, 0.1);
    color: #ea5455;
}

/* MAIN */
.main {
    padding: 20px;
    background: var(--bg-main);
    min-height: 100vh;
    margin-left: 160px;
}

/* GRID DASHBOARD */
.dashboard {
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-top: 10px;
    margin-left: 5px;
}

/* KPI CARDS */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

/* CARD */
.card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 10px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-left: 10px;
}

.card--bank {
    display: flex;
    min-height: 140px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-1 {
    background-image: url("image/carte2.png");
}

.card-2 {
    background-image: url("image/carte3.png");
}

.card-3 {
    background-image: url("image/carte4.png");
}

.card-4 {
    background-image: url("image/image3.png");
}

.card--bank::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top left,
        rgba(120,90,255,0.25),
        transparent 60%
    );
    z-index: 1;
    pointer-events: none;
}

/* Contenu AU-DESSUS du glow */
.card--bank > * {
    position: relative;
    z-index: 2;
}

/* Effet glow */
.card::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(75,44,191,0.15));
    top: 0;
    left: 0;
}

.card--bank h2,
.card--bank h3 {
    align-self: flex-end; 
    text-align: right; 
}

.card h3 {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-top: 5px;
    align-items: center;
    margin-bottom: 5px;
    color: #f5f1c0;
}

/* TITRE */
.card h4 {
    font-size: 14px;
    color: #f5f1c0;
    margin-right: 5px;
}

/* VALEUR */
.card h2 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin: 0;
    margin-top: 10px;
   color: #f5f1c0;
}

/* Titre */
.card h1 {
  font-size: 1.6rem;
  color: #b39ddb; /* violet clair */
  margin-bottom: 15px;
}

/* VARIATION */
.card .change {
    font-size: 12px;
    margin-top: 5px;
    color: #f5f1c0;
}

.card p {
    font-size: 20px;
    margin-top: 10px;
    color: #f5f1c0;
}

/* fond */
.chart-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);
}

/* contenu */
.chart-box {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
}
.chart-container {
    position: relative;
    z-index: 2; /* AU-DESSUS du fond */
    flex: 1;
    min-height: 0;
}

.chart-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.chart-box::before,
.chart-box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* petit décor bleu en fond */
.chart-box::before {
    height: 3px;
    top: 0;
    left: 20px;
    right: 20px;
    bottom: auto;

    background: linear-gradient(90deg, #4facfe, #00f2fe);
    border-radius: 10px;
}

.chart-box::after {
    border-radius: 10px;
    height: auto;
    background: radial-gradient(
        rgba(0, 242, 254, 0.08),
        transparent 60%
    );
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    color: #f5f1c0;
}

.chart-header h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin: 0;
}

.badge {
  background: #4f46e5;
  color: white;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 5px 15px rgba(79,70,229,0.3);
}

.chart-controls {
    display: flex;
    gap: 8px;
    margin-left: auto;
    align-items: center;
}

.custom-select {
    position: relative;
    width: 80px;
    font-size: 12px;
}

.select-selected {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    color: #f5f1c0;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}

.select-items {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;

    background: rgba(10, 15, 30, 0.95);
    border: 1px solid #00f5ff;
    border-radius: 8px;

    box-shadow: 0 0 10px #00f5ff;

    display: none;
    z-index: 99;
}

.select-items div {
    padding: 6px;
    cursor: pointer;
}

.select-items div:hover {
    background: rgba(0, 245, 255, 0.2);
}

.chart-controls label h4 {
    font-size: 14px;
    color: #f5f1c0;
    margin-right: 5px;
}

.line-container {
    position: relative;
    width: 100%;
    height: 250px; /* ou 300px selon ton UI */
}

.chart-box canvas {
    flex: 1;              /* prend l’espace dispo */
    width: 100% !important;
    height: auto !important;
    max-height: 240px;
    display: block;
}

canvas {
    width: 100% !important;
    height: 100% !important;
}

.grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.pie-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 220px;
    margin-top: 10px;
}

#pieChart {
    width: 100% !important;
    height: 100% !important;
}

@keyframes pieRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Hover cartes */
.card:hover {
    transform: translateY(-5px);
    transition: 0.3s;
}

/* Scroll propre */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

@media (max-width: 900px) {
     .charts {
        grid-template-columns: 1fr;
    }

    .chart-box {
        height: 280px;
    }
    .grid {
        grid-template-columns: 1fr;
    }

    .main {
        margin-left: 0;
    }

    .auth-box {
        flex-direction: column;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .chart-controls {
        align-self: flex-end;
    }
}

/* NAV TABS */
.tabs {
    position: relative;
    display: flex;
    gap: 10px;
    background: #f1f3ff;
    padding: 8px;
    border-radius: 15px;
    width: fit-content;
}

/* Onglet */
.tab {
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 500;
    color: #555;
    position: relative;
    z-index: 2;
    transition: 0.3s;
}

/* Hover */
.tab:hover {
    color: #4b2cbf;
}

/* Actif */
.tab.active {
    color: #fff;
}

/* INDICATEUR ANIMÉ */
.tab-indicator {
    position: absolute;
    height: 100%;
    width: 0;
    background: linear-gradient(135deg, #4b2cbf, #6a4bff);
    border-radius: 10px;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

/* CONTENEUR */
.tab-container {
    margin-top: 20px;
}

/* CONTENU */
.tab-content {
    display: none;
    opacity: 0;
    transform: translateY(10px);
}

/* ACTIF */
.tab-content.active {
    display: block;
    animation: fadeSlide 0.4s ease forwards;
}

/* ANIMATION */
@keyframes fadeSlide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   SIDEBAR (MENU LATÉRAL)
   ========================= */
.sidebar {
    grid-area: sidebar;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    z-index: 10;
    background: transparent; /* important */
}

.sidebar::after {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(1px);

    z-index: 1;
}

.sidebar * {
    position: relative;
    z-index: 2;
}

.sidebar-logo .brand-logo img {
    width: 130px; 
    height: 40px; 
    margin-left: 10px; 
    margin-top: 10px;
}

/* MENU */
.sidebar-menu {
    list-style: none;
    padding: 0;
}

.sidebar-menu li {
    margin-bottom: 10px;
}

/* LIEN */
.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}

/* ICONES */
.sidebar-menu .icon {
    font-size: 18px;
    width: 25px;
    text-align: center;
}

/* TEXTE */
.sidebar-menu .text {
    font-size: 14px;
}

/* HOVER */
.sidebar-menu a:hover {
    background: rgba(255,255,255,0.1);
}

/* MENU ACTIF */
.sidebar-menu a.active {
    background: #fff;
    color: #4b2cbf;
    font-weight: 600;
}

.sidebar-menu li a.active .icon {
    color: #4b2cbf;
}

/* FOOTER */
.sidebar-footer {
    margin-top: auto;
}

.sidebar-footer a {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
}

/* =========================
   BOUTONS
   ========================= */
button {
    padding: 10px 15px;
    border: none;
    background: #4b2cbf;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}

/* Effet hover */
button:hover {
    background: #37219c;
}

/* =========================
   CHAMPS DE FORMULAIRE
   ========================= */
input, textarea, select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid #ccc;
}

input:checked {
    background: #4b2cbf;
    color: #2f1491;
    accent-color: #2f1491; /* Couleur de la checkbox lorsqu'elle est cochée */
}

/* Override Bootstrap input-group styles pour garder les coins arrondis */
.input-group .form-control,
.auth-card .form-control {
    border-radius: 10px !important;
}

/* Si l'icône est en position absolue, le wrapper doit être positionné */
.input-group {
    position: relative;
}

/* Formulaire global */
form {
    background: #fff;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border-radius: 15px;
    max-width: 400px;
}

/* =========================
   LIENS
   ========================= */
a {
    margin: 10px 0;
    color: #4b2cbf;
    font-weight: bold; /* Remet le gras */
    text-decoration: none; /* Supprime le soulignement */
}

a:hover {
    text-decoration: underline; /* Soulignement au survol */
}

/* =========================
   FLEX UTILITAIRE
   ========================= */
.flex {
    display: flex;
    gap: 10px;
}

/* =========================
   RESPONSIVE (MOBILE)
   ========================= */
@media (max-width: 768px) {
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    .main {
        margin-left: 0;
        padding: 15px;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .header {
        justify-content: flex-start; /* tout pousse vers la gauche */
    }

    .header-right {
        justify-content: flex-start; /* contenu collé à gauche */
        flex: 1;
    }

    .header-right input {
        max-width: 100%; /* occupe toute la largeur disponible */
        margin-right: 0;
    }

}

/* =========================
   CENTRAGE DU LOGO ET DE LA CARTE
   ========================= */
.brand-logo {
    text-align: center; /* Centre le logo horizontalement */
    margin-bottom: 20px; /* Espace sous le logo */
}

.brand-logo img {
    display: block;
    margin: 0 auto; /* Centre l'image horizontalement */
    max-width: 100%;
    height: auto;
}

.auth-form-light {
    margin: 0 auto; /* Centre la carte horizontalement si nécessaire */
    max-width: 400px; /* Limite la largeur pour éviter qu'elle soit trop large */
}

/* Pour un centrage vertical plus robuste sur toute la page */
.content-wrapper {
    min-height: 100vh; /* Assure que le conteneur prend toute la hauteur de l'écran */
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
}

/* Centrage de la boîte d'authentification */
.auth-box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 110vh;
}

/* =========================
   PAGE AUTHENTIFICATION
   ========================= */

.auth-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #eef1ff, #dcdfff);
}

.auth-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(20, 10, 60, 0.6);
    top: 0;
    left: 0;
}

.auth-box {
    position: relative;
    z-index: 2;
}

/* Bandeau titre en haut */
.auth-header {
    position: absolute;
    top: 30px;
    left: 40px;
    font-size: 20px;
    font-weight: bold;
    color: #4b2cbf;
}

/* Conteneur des deux cartes */
.auth-box {
    position: relative;
    z-index: 2;
}

/* Carte login/register */
.auth-card {
    background: linear-gradient(145deg, #8b6cf0, #6a4bff);
    padding: 30px;
    border-radius: 24px;
    width: 450px !important;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Bordures pour simuler l'éclairage 3D */
    border-top: 3px solid rgba(255, 255, 255, 0.5);
    border-left: 3px solid rgba(255, 255, 255, 0.35);
    border-right: 3px solid #4b2cbf;
    border-bottom: 3px solid #4b2cbf;
    
    /* Ombres pour créer l'épaisseur 3D */
    box-shadow:
        /* Lueur extérieure néon */
        0 0 20px rgba(107, 70, 255, 0.6),
        0 0 40px rgba(107, 70, 255, 0.4),
        /* Épaisseur du bloc (face droite et bas) */
        1px 1px 0 #5a3fd6,
        2px 2px 0 #5a3fd6,
        3px 3px 0 #5a3fd6,
        4px 4px 0 #5a3fd6,
        5px 5px 0 #5a3fd6,
        6px 6px 0 #5a3fd6,
        7px 7px 0 #5a3fd6,
        8px 8px 0 #5a3fd6,
        9px 9px 0 #5a3fd6,
        10px 10px 0 #5a3fd6,
        11px 11px 0 #5a3fd6,
        12px 12px 0 #5a3fd6,
        13px 13px 0 #5a3fd6,
        14px 14px 0 #5a3fd6,
        15px 15px 0 #5a3fd6,
        16px 16px 0 #5a3fd6,
        /* Ombre portée au sol */
        20px 20px 40px rgba(0, 0, 0, 0.5),
        30px 30px 60px rgba(0, 0, 0, 0.3);
}

/* Effet au survol - soulèvement */
.auth-card:hover {
    transform: translate(-4px, -4px);
    box-shadow:
        0 0 30px rgba(107, 70, 255, 0.7),
        0 0 60px rgba(107, 70, 255, 0.5),
        1px 1px 0 #5a3fd6,
        2px 2px 0 #5a3fd6,
        3px 3px 0 #5a3fd6,
        4px 4px 0 #5a3fd6,
        5px 5px 0 #5a3fd6,
        6px 6px 0 #5a3fd6,
        7px 7px 0 #5a3fd6,
        8px 8px 0 #5a3fd6,
        9px 9px 0 #5a3fd6,
        10px 10px 0 #5a3fd6,
        11px 11px 0 #5a3fd6,
        12px 12px 0 #5a3fd6,
        13px 13px 0 #5a3fd6,
        14px 14px 0 #5a3fd6,
        15px 15px 0 #5a3fd6,
        16px 16px 0 #5a3fd6,
        25px 25px 50px rgba(0, 0, 0, 0.55),
        40px 40px 70px rgba(0, 0, 0, 0.35);
}

/* Logo */
 
.auth-card .brand-logo img {
    width: 150px; /* L'image ne dépasse jamais la largeur de son conteneur */
    height: auto;    /* Garde les proportions de l'image */
    display: block;  /* Évite les espaces indésirables sous l'image */
}

/* Titre */
.auth-card h2 {
    margin-bottom: 10px;
}

/* Sous-texte */
.auth-card p {
    font-size: 14px;
    color: #0a0101;
    margin-bottom: 20px;
}

/* Champs */
.auth-card input {
    text-align: left;
}

/* Bouton principal */
.auth-btn {
    width: 100%;
    background: linear-gradient(135deg, #2e0f9e, #6a4bff);
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    border: none;
    margin-top: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.auth-btn:hover {
    opacity: 0.9;
}

/* Liens bas */
.auth-footer {
    margin-top: 15px;
    font-size: 14px;
}

.auth-footer a {
    color: #4b2cbf;
    font-weight: bold;
}

/* Checkbox ligne */
.auth-options {
    display: flex;
    justify-content: space-between; 
    gap: 5px; /* Petit espace entre les éléments pour prendre moins d'espace total */
    font-size: 13px;
    margin-top: 0;
}

.auth-options label {
    display: flex;
    align-items: center; /* Aligne verticalement la checkbox et le texte */
    white-space: nowrap; /* Empêche le texte "Se souvenir" de se casser */
    gap: 3px; /* Très petit espace entre la checkbox et le texte */
}

/* =========================
   MODULE TRANSFERT PERSONNALISÉ
   ========================= */

.transfer-container, .transfer-container .content {
    background: transparent;
    box-shadow: var(--shadow);
    position: relative;
    grid-area: content;
    padding: 0;
    margin: 0;
    border-top-left-radius: 20px;
    overflow-y: auto;
}

.transfer-container .content .card-transfer p {
    font-size: 40px;
    color: #f5f1c0;
    margin-bottom: 20px;
    text-align: left;
}

.card-transfer{
    background: url(image/image2.png);
    border-radius: 20px;
    padding: 70px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card-transfer h2 {
    font-size: 22px;
    color: #f5f1c0;
   
}

/* Étapes */
.transfer-steps {
    display: flex;
    justify-content: space-between; /* premier à gauche, dernier à droite, milieu centré */
    position: relative;
    margin: 30px auto;
    max-width: 600px;
}

/* Ligne reliant les cercles */
.transfer-steps::before {
    content: "";
    position: absolute;
    top: 20px; /* aligné au centre vertical des cercles */
    left: 0;
    width: 100%;
    height: 3px;
    background: #f0f3c3;
    z-index: 0;
}

/* Étape */
.transfer-steps .step {
    text-align: center;
    position: relative;
    z-index: 1; /* au-dessus de la ligne */
    flex: 0 0 50%; /* chaque step garde sa taille */
    left: -137px; /* décale légèrement pour mieux aligner avec la ligne */
}

/* Cercle */
.transfer-steps .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f3c3;
    color: #4b2cbf;
    font-weight: bold;
    font-size: 16px;
    margin: 0 auto 8px auto;
    transition: 0.3s;
}

/* Label */
.transfer-steps .label {
    font-size: 13px;
    font-weight: 600;
    color: #f0f3c3;
}

/* Actif */
.transfer-steps .step.active .circle {
    background: linear-gradient(135deg, #2e0f9e, #6a4bff);
    color: #f0f3c3;
    box-shadow: 0 4px 12px rgba(75,44,191,0.3);
}

.transfer-steps .step.active .label {
    color: #4b2cbf;
}


/* Formulaire */

.card-form {
   background: var(--bg-card);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    z-index: 1; /* contenu au-dessus */
}

.card-form::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(75,44,191,0.30));
    z-index: 0; /* décor derrière */
}

.card-form > * {
    position: relative;
    z-index: 2;
}

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

.card-form .transfer-form {
    background: rgba(75,44,191,0.05);
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    z-index: 1;
}

.transfer-form label {
    display: block;
    margin-top: 15px;
    font-weight: 600;
    color: #f0f3c3;
}

.transfer-form .form-control {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    transition: border-color 0.3s;
}

.transfer-form .form-control:focus {
    border-color: #4b2cbf;
    outline: none;
}

/* Bouton */
.transfer-btn {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #2e0f9e, #6a4bff);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.transfer-btn:hover {
    opacity: 0.9;
}

/* Encadré d’informations */
.card.transfer-info {
    margin-top: 20px;
    background: rgba(75,44,191,0.05);
    border: 1px solid #ddd;
    border-radius: 12px;
    align-self: flex-start; 
}

.card.transfer-info h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #4b2cbf;
}

.info-list {
    list-style: disc;
    padding-left: 10px;
    color: #f0f3c3;
}

.info-list li {
    display: flex;
    align-items: center; /* aligne verticalement icône + texte */
    gap: 8px;            /* espace entre icône et texte */
    margin-bottom: 10px;
    font-size: 15px;
}

.info-list li i {
    color: #f0f3c3; /* couleur de l’icône */
    font-size: 18px;
}

/* =========================
   PAGE TRANSACTIONS
   ========================= */

.transact-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 10px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-left: 10px;
}

/* Barre de recherche et filtre */
.transact-card > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;              /* l’input prend l’espace disponible */
    max-width: 350px;     /* limite la largeur en grand écran */
    min-width: 120px;     /* évite qu’il devienne trop petit */
    margin-right: 10px;
    transition: all 0.5s ease;
    gap: 10px;
    margin-bottom: 15px;
    position: relative;
}

/* Titre */
.transact-card h1 {
  font-size: 1.6rem;
  color: #b39ddb; /* violet clair */
  margin-bottom: 15px;
}

/* VARIATION */
.transact-card .change {
    font-size: 12px;
    margin-top: 5px;
    color: #f5f1c0;
}

.transact-card p {
    font-size: 20px;
    margin-top: 10px;
    color: #f5f1c0;
}

/* Hover cartes */
.transact-card:hover {
    transform: translateY(-5px);
}

/* Scroll propre */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.positive { color: var(--success); }
.negative { color: var(--danger); }

#searchInput {
  padding: 8px 12px;
  border: 1px solid #4b2cbf;
  border-radius: 6px;
  position: center;
  font-size: auto;
  background: #2a2640;
  color: #e0e0e0;
}

#searchInput:focus {
  border-color: #b39ddb;
  outline: none;
}

.sort-btn {
  background: #4b2cbf;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: auto;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: center;
}

.sort-btn .label {
    font-size: 13px;
    font-weight: 600;
    color: #f0f3c3;
}

.sort-btn:hover {
  background: #3a21a0;
}

.dialog-overlay {
  display: none; /* caché par défaut */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

.dialog-box {
  background: #2a2640;
  color: #e0e0e0;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.dialog-box h2 {
  margin-bottom: 15px;
  color: #b39ddb;
}

.dialog-box label {
  display: block;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}

.dialog-box label:hover {
  background: #3c375a;
}

/* Tableau */
#transactionsTable {
  width: 100%;
  border-collapse: collapse;
  background: #2a2640; /* fond sombre */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

#transactionsTable th, 
#transactionsTable td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #3c375a;
}

#transactionsTable th {
  background: #4b2cbf; /* violet principal */
  color: #fff;
  cursor: pointer;
  user-select: none;
}

#transactionsTable th:hover {
  background: #3a21a0;
}

#transactionsTable tr:nth-child(even) {
  background: #242038; /* alternance sombre */
}

#transactionsTable tr:hover {
  background: #3c375a; /* survol plus clair */
}

/* Statut validé */
#transactionsTable td:last-child {
  font-weight: 600;
  color: #81c784; /* vert doux sur fond sombre */
}