/* Fichier: static/css/dashboard.css */
/* ===== DÉFINITION DES VARIABLES DE COULEUR ===== */
:root {
    --primary-blue: #0D3D6F;
    --accent-orange: #F7941D;
    --text-light: #FFFFFF;
    --bg-neutral: #F4F4F7; /* Moins utilisé dans le dashboard sombre */
    --dark-bg-primary: #1a1a2e; /* Fond sombre principal */
    --dark-bg-secondary: #161625; /* Fond sombre cartes/sidebar */
    --dark-text-primary: #e0e0e0; /* Texte clair principal */
    --dark-text-secondary: #a0a0a0; /* Texte clair secondaire */
    --dark-border-color: #2a2a3e; /* Bordures sombres */
    --font-family: Arial, sans-serif;
}

/* Reset et Body */
body.dashboard-body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #1a1a2e; /* Fond sombre principal */
    color: #e0e0e0; /* Texte clair par défaut */
    display: flex; /* Active Flexbox pour la mise en page */
}

/* Layout Principal */
.dashboard-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 250px;
    background-color: #161625; /* Fond sombre sidebar */
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    position: fixed; /* Fixe la sidebar */
    height: 100%;
    left: 0;
    top: 0;
    transition: width 0.3s ease; /* Animation si on veut la réduire plus tard */
}

.sidebar-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
}

.sidebar-header .logo {
    height: 45px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permet au nav de prendre l'espace restant */
}

.sidebar-nav .nav-item {
    color: #a0a0a0; /* Couleur texte liens */
    text-decoration: none;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-nav .nav-item i {
    margin-right: 15px;
    width: 20px; /* Aligne les icônes */
    text-align: center;
}

.sidebar-nav .nav-item:hover {
    background-color: #2a2a3e;
    color: #ffffff;
}

.sidebar-nav .nav-item.active {
    background-color: #0d6efd; /* Couleur active (peut être ajustée) */
    color: #ffffff;
    font-weight: bold;
    border-left: 4px solid #ffffff;
    padding-left: 21px; /* Compense la bordure */
}

/* ===== MAIN CONTENT AREA ===== */
.main-content-area {
    flex-grow: 1; /* Prend tout l'espace restant */
    margin-left: 250px; /* Espace pour la sidebar fixe */
    display: flex;
    flex-direction: column;
}

/* ===== TOP BAR ===== */
.top-bar {
    background-color: #161625;
    padding: 15px 30px;
    display: flex; /* Active Flexbox */
    justify-content: space-between; /* Pousse les éléments aux extrémités */
    align-items: center; /* Centre verticalement */
    border-bottom: 1px solid #2a2a3e;
    position: sticky;
    top: 0;
    z-index: 10;
}


.menu-toggle { /* Sera utile pour le responsive */
    display: none;
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 20px;
    cursor: pointer;
}

.top-bar-actions {
    display: flex;
    align-items: center;
}


.icon-button {
    background: none;
    border: none;
    color: #a0a0a0;
    font-size: 18px;
    margin-right: 20px;
    cursor: pointer;
}
.icon-button:hover {
    color: #ffffff;
}

.profile-button {
    background: none;
    border: none;
    color: #e0e0e0;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.profile-button .avatar {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

/* Styles du dropdown (hérités de base.html mais ajustés si besoin) */
.top-bar .dropdown {
    position: relative;
}
.top-bar .dropdown-content {
    background-color: #2a2a3e; /* Fond sombre dropdown */
    border: 1px solid #3a3a4e;
    min-width: 180px;
    /* Ajustements potentiels pour la position */
}
.top-bar .dropdown-content a {
    color: #e0e0e0; /* Texte clair liens dropdown */
    padding: 10px 15px;
}
.top-bar .dropdown-content a:hover {
    background-color: #3a3a4e;
    color: #ffffff;
}

/* ===== PAGE CONTENT ===== */
.page-content {
    padding: 30px;
    flex-grow: 1; /* Prend l'espace vertical restant */
}

/* Bannière d'accueil */
.welcome-banner {
    background: linear-gradient(90deg, #e91e63, #9c27b0); /* Dégradé rose/violet */
    padding: 25px 30px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 30px;
}
.welcome-banner .banner-text h3 {
    margin: 0 0 5px 0;
    font-size: 20px;
}
.welcome-banner .banner-text p {
    margin: 0;
    opacity: 0.9;
    font-size: 14px;
}
.welcome-banner img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 20px;
}
.welcome-banner .btn {
    background-color: white;
    color: #e91e63;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

/* Cartes Statistiques */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background-color: #161625; /* Fond des cartes */
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    font-size: 18px;
    color: white;
}
.stat-icon.green { background-color: #28a745; }
.stat-icon.blue { background-color: #0d6efd; }
.stat-icon.purple { background-color: #6f42c1; }
.stat-icon.orange { background-color: #fd7e14; }

.stat-value {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.2;
}
.stat-label {
    font-size: 13px;
    color: #a0a0a0;
}

/* Cartes de Statut */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.status-card {
    background-color: #161625;
    padding: 25px;
    border-radius: 10px;
}
.status-card h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #a0a0a0;
    font-weight: normal;
}
.status-value {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 5px;
}
.status-value.highlight {
    color: #0d6efd; /* Met en valeur le rang */
}
.status-label {
    font-size: 13px;
    color: #a0a0a0;
}
.status-label i {
    margin-right: 5px;
}
/* ===== STYLES POUR LA PAGE NETWORK ===== */


.network-page .page-title {
    color: #ffffff;
    margin-bottom: 30px;
    font-size: 24px;
}

.network-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.team-card {
    background-color: var(--accent-orange); /* Orange OthSkill*/
    color: white;
    padding: 25px;
    border-radius: 15px; /* Coins arrondis */
    text-align: center;
}

.team-card h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
}

.team-card p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
}

.network-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}

.stat-circle {
    background-color: var(--accent-orange); /* Orange OthSkill*/
    color: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 15px rgba(247, 148, 29, 0.4); /* Ombre orange */
}

.total-circle, .bonus-circle {
    width: 200px;
    height: 200px;
    padding: 20px;
}

.list-view-circle {
    width: 100px;
    height: 100px;
    background-color: var(--accent-orange); /* Peut être une autre couleur si souhaité */
}

.circle-label {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    opacity: 0.9;
}

.circle-value {
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
}
.bonus-circle .circle-value small {
    font-size: 20px;
    font-weight: normal;
    margin-left: 5px;
}


.btn-circle {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 10px; /* Espace cliquable */
    text-transform: uppercase;
}

/* Ajustements pour le template de base dashboard (anticipation) */
.page-title { /* Style commun pour les titres de page */
     color: #ffffff;
    margin-bottom: 30px;
    font-size: 24px;
}
/* ===== STYLES POUR LES MESSAGES D'ALERTE DANS LE DASHBOARD ===== */
.page-content .messages .alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: white;
}

.page-content .messages .alert.success {
    background-color: #4CAF50; /* Vert */
}

.page-content .messages .alert.error {
    background-color: #f44336; /* Rouge */
}

.page-content .messages .alert.info {
    background-color: #2196F3; /* Bleu */
}

.page-content .messages .alert.warning {
    background-color: #ff9800; /* Orange */
}
/* ===== STYLES POUR LA PAGE WALLET ===== */

.wallet-page .page-title {
    color: #ffffff;
    margin-bottom: 30px;
    font-size: 24px;
}

/* Cartes Stats Wallet */
.wallet-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.wallet-stat-card {
    padding: 15px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    color: white;
}
.balance-card { background-color: #d4edda; color: #155724;} /* Vert pâle */
.network-profit-card { background-color: #f8d7da; color: #721c24;} /* Rouge pâle */
.market-profit-card { background-color: #cce5ff; color: #004085;} /* Bleu pâle */

.wallet-stat-card .w-stat-icon {
    font-size: 20px;
    margin-right: 15px;
    /* Styles spécifiques par carte si nécessaire */
    .balance-card & { color: #155724; }
    .network-profit-card & { color: #721c24; }
    .market-profit-card & { color: #004085; }
}
.w-stat-value {
    font-size: 20px;
    font-weight: bold;
}
.w-stat-label {
    font-size: 13px;
    opacity: 0.8;
}

/* Carte Principale Wallet */
/* Carte Principale Wallet */
.wallet-main-card {
    /* LIGNE CORRIGÉE ICI : */
    background: url("../images/ui/wallet-bg.jpg") center center/cover no-repeat; 
    /* Alternative : Dégradé */
    /* background: linear-gradient(45deg, #2a2a3e, #161625); */
    padding: 30px;
    border-radius: 15px;
    position: relative; 
    color: white;
    min-height: 220px; 
    display: flex;
    flex-direction: column; 
    justify-content: space-between; /* Ajuste si besoin après correction de la structure verticale */
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Tu devras trouver une image de fond cool et la mettre dans static/images/ui/wallet-bg.jpg */

.wallet-user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.wallet-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid white;
}
.wallet-username {
    font-weight: bold;
    font-size: 16px;
}

.wallet-balance-info {
    text-align: center;
    margin-bottom: 20px;
}
.usdt-icon {
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
}
.wallet-balance-amount {
    font-size: 36px;
    font-weight: bold;
}

.wallet-address {
    background-color: rgba(0,0,0,0.3);
    padding: 8px 15px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 14px;
    text-align: center;
    word-break: break-all; /* Coupe l'adresse si trop longue */
}

.wallet-vip-badge {
    position: absolute;
    top: 20px;
    right: 20px;
}
.vip-badge {
    background-color: gold;
    color: black;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

/* Boutons d'action Wallet */
.wallet-actions {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    margin-bottom: 30px;
}
.btn-wallet {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.btn-wallet:hover { opacity: 0.9; }

.btn-wallet.transfer { background: linear-gradient(45deg, #ec407a, #d81b60); } /* Rose */
.btn-wallet.transactions { background: linear-gradient(45deg, #ab47bc, #8e24aa); } /* Violet */
.btn-wallet.withdraw { background: linear-gradient(45deg, #42a5f5, #1e88e5); } /* Bleu */

/* Styles Historique Transactions */
.transaction-history h3 {
    color: #e0e0e0;
    margin-bottom: 15px;
    font-size: 18px;
}
/* Les classes .amount-positive et .amount-negative sont déjà définies */
/* ===== AJUSTEMENTS POUR LA CARTE WALLET PRINCIPALE ===== */

/* Conteneur pour le haut de la carte (avatar et solde) */
.wallet-card-top {
    display: flex; /* Active Flexbox */
    justify-content: space-between; /* Place les deux groupes aux extrémités */
    align-items: center; /* Centre verticalement */
    margin-bottom: 25px; /* Espace avant l'adresse */
}

/* Style pour le groupe avatar/nom (déjà existant, mais on s'assure qu'il est bon) */
.wallet-user-info {
    display: flex;
    align-items: center;
    margin-bottom: 0; /* On retire la marge du bas car gérée par wallet-card-top */
}
.wallet-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid white;
}
.wallet-username {
    font-weight: bold;
    font-size: 16px;
    color: white; /* Assure la couleur */
}

/* Style pour le groupe icône/solde (modifié) */
.wallet-balance-info {
    text-align: right; /* Aligne le texte à droite */
    margin-bottom: 0; /* On retire la marge */
}
.usdt-icon {
    height: 35px; /* Taille de l'icône */
    vertical-align: middle;
    margin-right: 10px;
}
.wallet-balance-amount {
    font-size: 28px; /* Taille du solde légèrement réduite */
    font-weight: bold;
    color: white; /* Assure la couleur */
    vertical-align: middle;
}

/* On ajuste la position du badge VIP s'il existe */
.wallet-vip-badge {
    position: absolute;
    top: 20px;
    right: 20px;
}
.vip-badge {
    background-color: gold;
    color: black;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

/* L'adresse Wallet (on peut la centrer si on préfère) */
.wallet-address {
    background-color: rgba(0,0,0,0.3);
    padding: 8px 15px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 14px;
    text-align: center;
    word-break: break-all;
    margin-top: auto; /* Pousse l'adresse vers le bas si la carte s'agrandit */
}
/* ===== AJUSTEMENTS FINAUX POUR LA CARTE WALLET PRINCIPALE ===== */

/* Conteneur principal de la carte */
.wallet-main-card {
    /* ... (styles existants : background, padding, border-radius, etc.) ... */
    position: relative; /* Nécessaire pour positionner l'icône USDT et le badge VIP */
    min-height: 220px; /* Légère augmentation de hauteur si besoin */
    display: flex;
    flex-direction: column; /* Organise les sections verticalement */
}

/* Conteneur pour le haut de la carte (avatar/nom) */
.wallet-card-top {
    display: flex;
    justify-content: flex-start; /* Aligne l'avatar à gauche */
    align-items: center;
    /* On retire la justification space-between */
    margin-bottom: 10px; /* Réduit l'espace avant le solde */
}

/* Infos utilisateur (avatar/nom) */
.wallet-user-info {
    display: flex;
    align-items: center;
}
.wallet-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid white;
}
.wallet-username {
    font-weight: bold;
    font-size: 16px;
    color: white;
}

/* Conteneur pour l'icône USDT (Positionnement absolu) */
.wallet-usdt-icon-container {
    position: absolute; /* Positionnement par rapport à wallet-main-card */
    top: 30px; /* Même padding que la carte */
    right: 30px; /* Même padding que la carte */
    width: 45px; /* Même taille que l'avatar */
    height: 45px; /* Même taille que l'avatar */
    border-radius: 50%; /* Cercle */
    overflow: hidden; /* Cache les coins de l'image si elle n'est pas carrée */
    border: 2px solid white; /* Optionnel : même bordure que l'avatar */
    background-color: rgba(255, 255, 255, 0.1); /* Optionnel : léger fond si l'icône a de la transparence */
}
.usdt-icon {
    display: block; /* Empêche les espaces indésirables */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit le cercle */
}

/* Solde au centre */
.wallet-balance-info {
    text-align: center;
    margin: 20px 0; /* Ajoute de l'espace vertical autour du solde */
}
.wallet-balance-amount {
    font-size: 36px;
    font-weight: bold;
    color: white;
}

/* Adresse en bas */
.wallet-address {
    background-color: rgba(0,0,0,0.3);
    padding: 8px 15px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 14px;
    text-align: center;
    word-break: break-all;
    margin-top: auto; /* Pousse l'adresse en bas */
}

/* Badge VIP (positionnement ajusté si besoin) */
.wallet-vip-badge {
    position: absolute;
    bottom: 20px; /* Position en bas à droite */
    right: 20px;
    top: auto; /* Annule le positionnement en haut */
}
.vip-badge {
    background-color: gold;
    color: black;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}
/* ===== STYLES POUR LES PAGES ACADEMY ===== */



.page-header { /* Style pour l'en-tête de page (titre, boutons retour...) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

/* --- Liste des Cours --- */
.course-list-page .page-title {
    color: #ffffff;
    font-size: 24px;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.course-card {
    background-color: #161625; /* Fond sombre des cartes */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.course-card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.course-card-content {
    padding: 20px;
    flex-grow: 1; /* Pousse le bouton vers le bas */
    display: flex;
    flex-direction: column;
}

.course-card-content h4 {
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: 18px;
}

.course-card-content p {
    color: #a0a0a0;
    font-size: 14px;
    line-height: 1.5;
    flex-grow: 1; /* Prend l'espace avant le bouton */
    margin-bottom: 15px;
}

.btn-gradient { /* Style pour les boutons dégradés */
    background: linear-gradient(45deg, #8e24aa, #ec407a); /* Violet à Rose */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

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

.see-all-link {
    text-align: center;
    margin-top: 30px;
}
.see-all-link a {
    color: #a0a0a0;
    text-decoration: none;
    font-weight: bold;
}
.see-all-link a:hover {
    color: #ffffff;
}
/* --- Détail du Cours (Liste des Modules) --- */

.course-detail-page .page-title {
    color: #ffffff;
    font-size: 24px;
}
.back-link { /* Style pour le bouton BACK > */
    color: #a0a0a0;
    text-decoration: none;
    font-weight: bold;
}
.back-link:hover { color: #ffffff; }

.course-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #161625;
    padding: 15px 25px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.professor-info {
    display: flex;
    align-items: center;
    color: #e0e0e0;
}

.professor-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.course-title-header {
    color: #e0e0e0;
    font-size: 18px;
    font-weight: bold;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px; /* Espace avant la barre de progression */
}

.module-card { /* Similaire à course-card */
    background-color: #161625;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.module-card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.module-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center; /* Centre le contenu */
}

.module-card-content h4 {
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: 18px;
}

.module-card-content p {
    color: #a0a0a0;
    font-size: 14px;
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 15px;
}

.btn-gradient-red { /* Style pour les boutons rouges */
    background: linear-gradient(45deg, #ec407a, #f44336); /* Rose à Rouge */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.btn-gradient-red:hover { opacity: 0.9; }


/* Barre de progression */
.progress-section {
    background-color: #161625;
    padding: 15px 25px;
    border-radius: 10px;
    text-align: center;
    color: #a0a0a0;
}
.progress-section span {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}
.progress-bar-container {
    width: 100%;
    max-width: 400px; /* Limite la largeur */
    height: 10px;
    background-color: #3a3a4e; /* Fond de la barre */
    border-radius: 5px;
    overflow: hidden;
    margin: auto; /* Centre la barre */
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #8e24aa, #ec407a); /* Dégradé violet/rose */
    border-radius: 5px;
    width: 0%; /* La largeur sera définie en ligne */
}
/* --- Détail du Module (Liste des Leçons) --- */

.module-detail-page .page-title {
    color: #ffffff;
    font-size: 24px;
}

.lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Cartes un peu plus larges */
    gap: 25px;
}

.lesson-card {
    background-color: #161625;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.lesson-video-link { /* Conteneur pour l'image et l'icône play */
    position: relative;
    display: block; /* Important pour que le positionnement absolu fonctionne */
}

.lesson-card-video-placeholder img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-top-left-radius: 15px; /* Arrondir seulement le haut */
    border-top-right-radius: 15px;
}

.play-icon { /* Icône Play superposée */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 50%;
    pointer-events: none; /* Empêche l'icône de bloquer le clic sur le lien */
    transition: color 0.2s ease;
}
.lesson-video-link:hover .play-icon {
    color: rgba(255, 255, 255, 1);
}


.lesson-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.lesson-card-content h4 {
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: 16px;
}

.lesson-card-content p {
    color: #a0a0a0;
    font-size: 14px;
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 20px;
}

.lesson-actions {
    display: flex;
    justify-content: space-around; /* Espace équitablement les boutons */
    align-items: center;
    margin-top: auto; /* Pousse les boutons en bas */
    padding-top: 15px; /* Espace au-dessus des boutons */
    border-top: 1px solid #2a2a3e; /* Ligne de séparation */
}

.btn-lesson-action {
    background: none;
    border: none;
    color: #a0a0a0;
    cursor: pointer;
    display: flex;
    flex-direction: column; /* Icône au-dessus du texte */
    align-items: center;
    font-size: 12px;
    padding: 5px;
    transition: color 0.2s ease;
}
.btn-lesson-action:hover {
    color: #ffffff;
}
.btn-lesson-action img {
    height: 30px; /* Taille des icônes */
    margin-bottom: 5px;
}
/* ===== STYLES POUR LA GESTION MARKETPLACE DANS DASHBOARD ===== */

/* --- Page d'accueil Gestion (my_products.html) --- */
.market-management-page .page-title { margin-bottom: 20px; }

.management-banner {
    background: linear-gradient(90deg, #6f42c1, #ab47bc); /* Dégradé violet */
    padding: 20px 30px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 30px;
}
.management-banner .banner-text h3 { margin: 0 0 5px 0; font-size: 18px; }
.management-banner .banner-text p { margin: 0; opacity: 0.9; font-size: 14px;}
.management-banner img { height: 50px; width: 50px; border-radius: 50%; object-fit: cover; margin: 0 15px;}
.management-banner .btn { background-color: white; color: #6f42c1; padding: 8px 18px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 14px;}

.management-actions {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}
.management-actions .btn {
    flex: 1; /* Prend la moitié de l'espace */
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    color: white;
    transition: opacity 0.2s ease;
}
.management-actions .btn:hover { opacity: 0.9; }
.btn-publish { background-color: #28a745; } /* Vert */
.btn-my-products { background-color: #dc3545; } /* Rouge */

.orders-section h3 {
    color: #e0e0e0;
    margin-bottom: 5px;
    font-size: 20px;
}
.section-subtitle {
    color: #a0a0a0;
    margin-bottom: 20px;
    font-size: 14px;
}
.table-container {
    background-color: #161625;
    padding: 20px;
    border-radius: 10px;
    overflow-x: auto; /* Permet le défilement horizontal si la table est trop large */
}
.orders-table, .products-table {
    width: 100%;
    border-collapse: collapse;
    color: #e0e0e0;
    font-size: 14px;
}
.orders-table th, .products-table th {
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid #2a2a3e;
    color: #a0a0a0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
}
.orders-table td, .products-table td {
    padding: 15px;
    border-bottom: 1px solid #2a2a3e;
    vertical-align: middle;
}
.empty-table {
    text-align: center;
    color: #a0a0a0;
    padding: 30px !important;
}

/* --- Page Liste Mes Produits (list_my_products.html) --- */
.product-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
}
.action-buttons button {
    padding: 6px 12px;
    font-size: 12px;
    margin-right: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
}
.btn-edit { background-color: #0d6efd; } /* Bleu */
.btn-delete { background-color: #dc3545; } /* Rouge */
.btn-approve { background-color: #198754; } /* Vert */

/* --- Page Formulaire Ajout (add_product_form.html) --- */
.add-product-page .page-title { margin-bottom: 20px; }
.form-container-box {
    background-color: #161625;
    padding: 30px;
    border-radius: 10px;
}
.form-container-box form p {
    margin-bottom: 20px;
}
.form-container-box form label {
    display: block;
    color: #a0a0a0;
    margin-bottom: 8px;
    font-weight: bold;
}
.form-container-box form input[type="text"],
.form-container-box form input[type="number"],
.form-container-box form textarea,
.form-container-box form input[type="file"] {
    width: 100%;
    padding: 12px;
    background-color: #2a2a3e;
    border: 1px solid #3a3a4e;
    color: #e0e0e0;
    border-radius: 5px;
    box-sizing: border-box;
}
.form-container-box form input[type="file"] {
    padding: 8px; /* Ajustement pour l'input file */
}
.form-container-box form textarea {
    min-height: 100px;
    resize: vertical;
}
.form-container-box button[type="submit"] {
    display: inline-block; /* Pour que le bouton ne prenne pas toute la largeur */
    margin-top: 10px;
}
/* --- Ajustements pour l'intégration vidéo dans module_detail.html --- */

.lesson-card-video {
    width: 100%;
    /* La hauteur est définie directement dans l'iframe pour cet affichage type miniature */
    /* Assure que le haut de la vidéo a les coins arrondis */
    overflow: hidden; /* Nécessaire pour appliquer le border-radius à l'iframe */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #000; /* Fond noir si la vidéo met du temps à charger */
}

/* Retire les styles du lien vidéo et de l'icône play qui ne sont plus utilisés */
/* Tu peux supprimer les blocs .lesson-video-link et .play-icon si tu le souhaites */
/* .lesson-video-link { ... } */
/* .play-icon { ... } */

/* Ajustement potentiel sur le contenu si nécessaire */
.lesson-card-content h4 {
    margin-top: 5px; /* Petit ajustement si besoin */
}
/* --- Styles mis à jour pour les actions des leçons --- */

.lesson-actions {
    display: flex;
    justify-content: space-around; /* Espace équitablement */
    align-items: flex-start; /* Aligne les éléments en haut */
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #2a2a3e;
}

.lesson-action-link {
    display: flex; /* Utilise flexbox pour l'alignement interne */
    flex-direction: column; /* Icône au-dessus du texte */
    align-items: center; /* Centre horizontalement */
    text-decoration: none; /* Retire le soulignement du lien */
    color: #a0a0a0; /* Couleur du texte */
    font-size: 12px;
    text-align: center; /* Centre le texte */
    transition: color 0.2s ease;
    width: 60px; /* Donne une largeur fixe pour l'alignement */
}
.lesson-action-link:hover {
    color: #ffffff; /* Change la couleur au survol */
}

.action-icon-circle {
    width: 45px; /* Taille du cercle */
    height: 45px; /* Taille du cercle */
    border-radius: 50%; /* Rend le conteneur rond */
    background-color: #2a2a3e; /* Couleur de fond du cercle */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px; /* Espace entre l'icône et le texte */
    overflow: hidden; /* Cache les bords de l'image si elle n'est pas ronde */
    border: 1px solid #3a3a4e; /* Optionnel : petite bordure */
}

.action-icon-circle img {
    height: 25px; /* Taille de l'icône à l'intérieur du cercle */
    width: auto; /* Garde les proportions */
    /* Aucun margin-bottom nécessaire ici */
}

/* Retire les anciens styles pour .btn-lesson-action si tu veux nettoyer */
/* .btn-lesson-action { ... } */
/* .btn-lesson-action img { ... } */
/* Style pour le bouton Offer Service */
.btn-offer-service { 
    background-color: var(--accent-orange); /* Orange OthSkill*/
    /* Assure la cohérence avec les autres boutons */
    flex: 1; 
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    color: white;
    transition: opacity 0.2s ease;
}
/* ===== STYLES POUR LA PAGE MARKETPLACE (product_list.html) ===== */

.market-page .page-title {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 24px;
    background-color: #161625; /* Fond sombre pour le titre */
    padding: 15px 20px;
    border-radius: 8px;
    display: inline-block; /* Pour que le fond ne prenne pas toute la largeur */
}

/* Barre de Filtres */
.filter-bar {
    background-color: #2a2a3e; /* Fond légèrement plus clair */
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
}

.search-input, .category-select {
    padding: 10px 15px;
    border: 1px solid #3a3a4e;
    background-color: #161625;
    color: #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
}
.search-input { flex-grow: 1; } /* Prend plus de place */
.category-select { min-width: 180px; }

/* Grille des Produits/Services */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Cartes un peu plus petites */
    gap: 25px;
}

.item-card {
    background-color: #161625; /* Fond sombre carte */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    border: 1px solid #3a3a4e; /* Bordure subtile */
}

.item-card-image {
    position: relative; /* Pour positionner le bouton coeur */
    height: 180px; /* Hauteur fixe pour l'image */
}
.item-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}
.favorite-btn:hover { background-color: rgba(0, 0, 0, 0.6); }
/* Pour Font Awesome 6, utiliser .fa-regular pour coeur vide, .fa-solid pour coeur plein */
.favorite-btn i.fa-heart { font-family: 'Font Awesome 6 Free'; font-weight: 400; } /* Coeur vide par défaut */
/* .favorite-btn.active i.fa-heart { font-weight: 900; color: red; } */ /* Style si favori */


.item-card-info {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between; /* Nom à gauche, prix à droite */
    align-items: center;
}
.item-name {
    color: #e0e0e0;
    font-weight: bold;
    font-size: 15px;
    white-space: nowrap; /* Empêche le retour à la ligne */
    overflow: hidden; /* Cache le débordement */
    text-overflow: ellipsis; /* Ajoute "..." si trop long */
    margin-right: 10px;
}
.item-price {
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
}

.item-card-footer {
    padding: 10px 15px 15px 15px;
    border-top: 1px solid #2a2a3e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Pousse le footer en bas */
}
.item-rating {
    font-size: 12px;
    color: #ffca28; /* Jaune pour les étoiles */
}
.rating-count { color: #a0a0a0; }

.btn-view {
    background-color: var(--accent-orange);
    color: white;
    padding: 6px 14px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.btn-view:hover { opacity: 0.9; }
/* ===== STYLES POUR LA PAGE DÉTAIL PRODUIT/SERVICE ===== */

    /* Styles généraux si besoin */


.detail-back-link {
    display: inline-block; /* Pour appliquer la marge */
    margin-bottom: 20px;
    color: #a0a0a0;
    text-decoration: none;
    font-weight: bold;
}
.detail-back-link:hover { color: #ffffff; }

.detail-card {
    background-color: #161625; /* Fond sombre de la carte */
    border-radius: 10px;
    padding: 30px;
    display: flex;
    gap: 30px; /* Espace entre image et infos */
    margin-bottom: 30px; /* Espace avant la section affilié */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.detail-image-section {
    flex: 1; /* Prend environ 40-50% de la largeur */
    max-width: 45%;
}
.detail-image-section img {
    width: 100%;
    height: auto; /* Garde les proportions */
    border-radius: 8px;
    display: block; /* Empêche les espaces indésirables */
}

.detail-info-section {
    flex: 1.5; /* Prend un peu plus de place */
    color: #e0e0e0;
}
.detail-info-section h2 {
    color: #ffffff;
    font-size: 28px;
    margin: 0 0 10px 0;
}
.seller-info {
    font-size: 14px;
    color: #a0a0a0;
    margin-bottom: 20px;
}
.seller-info strong { color: #e0e0e0; }

.detail-price {
    font-size: 28px;
    font-weight: bold;
    color: #ffffff; /* Blanc pour le prix */
    margin-bottom: 25px;
}

.detail-info-section h4 {
    color: #a0a0a0;
    font-size: 16px;
    margin: 25px 0 10px 0;
    text-transform: uppercase;
    font-weight: bold;
}
.detail-description {
    line-height: 1.6;
    color: #c0c0c0;
    margin-bottom: 30px;
}

.detail-actions {
    display: flex;
    gap: 15px; /* Espace entre les boutons */
    margin-top: 30px;
}
.detail-actions .btn {
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    border: none;
}
.detail-actions .btn:hover { opacity: 0.9; }

.btn-buy-now {
    background-color: var(--accent-orange); /* Orange OthSkill*/
    color: white;
}
.btn-chat-seller {
    background-color: #3a3a4e; /* Gris foncé */
    color: #e0e0e0;
    border: 1px solid #555; /* Bordure subtile */
}

/* Ajustements pour la section affiliation sur cette page */
.detail-affiliate {
    background-color: #161625; /* Fond sombre */
    border-radius: 10px;
    padding: 25px;
    text-align: left; /* Aligne le texte à gauche */
    margin-top: 30px; /* Espace après la carte principale */
}
.detail-affiliate h3 {
    color: #ffffff;
    font-size: 18px;
    margin: 0 0 10px 0;
}
.detail-affiliate p {
    color: #a0a0a0;
    font-size: 14px;
    margin-bottom: 15px;
}
    /* Styles déjà définis, on peut les ajuster si besoin */
  /* ===== STYLES POUR LE MENU DÉROULANT UTILISATEUR (HEADER) ===== */
.user-dropdown {
    position: relative;
    display: inline-block; 
    margin-left: 20px;
}

.user-dropdown .dropdown-toggle { /* C'est le bouton */
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    padding: 8px 15px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.user-dropdown .dropdown-toggle:hover {
    background-color: #2a2a3e;
}

.profile-pic-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--dark-border-color);
}

.user-dropdown .dropdown-toggle .fas.fa-chevron-down {
    font-size: 12px;
    margin-left: 5px;
}

/* --- RÈGLE IMPORTANTE POUR CACHER PAR DÉFAUT (Nom corrigé) --- */
.user-dropdown .dropdown-content { /* Nom corrigé ici */
    display: none; 
    position: absolute;
    right: 0;
    background-color: var(--dark-bg-secondary);
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    border-radius: 8px;
    z-index: 1000; 
    overflow: hidden; 
    margin-top: 10px;
}
/* --- FIN RÈGLE IMPORTANTE --- */

/* Règle pour afficher (Nom corrigé) */
.user-dropdown .dropdown-content.show { /* Nom corrigé ici */
    display: block; 
}

/* Styles pour les liens dans le menu (Nom corrigé) */
.user-dropdown .dropdown-content .dropdown-item { /* Nom corrigé ici */
    color: var(--dark-text-primary);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.user-dropdown .dropdown-content .dropdown-item:hover { /* Nom corrigé ici */
    background-color: #3a3a4e;
}
/* ===== STYLES POUR LA PAGE D'ÉDITION DE PROFIL ===== */
.edit-profile-page .form-container-box {
    background-color: var(--dark-bg-secondary);
    padding: 30px;
    border-radius: 10px;
    max-width: 600px; /* Limite la largeur du formulaire */
    margin: 0 auto; /* Centre le formulaire */
}

.profile-pic-preview {
    text-align: center;
    margin-bottom: 30px;
}
.large-profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-orange);
    margin-bottom: 15px;
}
.btn-upload-pic {
    background-color: var(--primary-blue);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block; /* Pour qu'il ne prenne pas toute la largeur */
    font-size: 14px;
    transition: background-color 0.2s ease;
}
.btn-upload-pic:hover { background-color: #0c335a; }

/* Cache l'input file par défaut et le stylise via le label */
.form-control-file {
    display: none;
}

.edit-profile-page label {
    display: block;
    margin-bottom: 8px;
    margin-top: 20px;
    color: var(--dark-text-primary);
    font-weight: bold;
}

.edit-profile-page input[type="text"],
.edit-profile-page textarea {
    width: calc(100% - 20px); /* Ajuste pour le padding */
    padding: 10px;
    border: 1px solid var(--dark-border-color);
    border-radius: 5px;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
    font-size: 15px;
}
.edit-profile-page textarea {
    resize: vertical; /* Permet de redimensionner verticalement */
    min-height: 80px;
}

.edit-profile-page input[type="text"]::placeholder,
.edit-profile-page textarea::placeholder {
    color: var(--dark-text-secondary);
    opacity: 0.7;
}

.edit-profile-page .btn-gradient {
    width: auto; /* Bouton pas pleine largeur */
    padding: 12px 25px;
    font-size: 16px;
    margin-top: 30px;
    display: block; /* Pour qu'il prenne sa propre ligne */
    margin-left: auto; /* Centre le bouton si le parent a text-align: center */
    margin-right: auto;
}
/* ===== STYLES POUR LA MESSAGERIE ===== */

.messaging-page .page-title {
    color: #ffffff; margin-bottom: 20px; font-size: 24px;
}
.messaging-page .back-link { color: #a0a0a0; text-decoration: none; font-weight: bold; }
.messaging-page .back-link:hover { color: #ffffff; }


/* --- Boîte de Réception (inbox.html) --- */
.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.conversation-item-link { text-decoration: none; }

.conversation-item {
    background-color: #161625;
    border: 1px solid #2a2a3e;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
}
.conversation-item:hover { background-color: #2a2a3e; }

.conversation-item.unread { border-left: 4px solid var(--accent-orange); } /* Indicateur non lu */
.conversation-item.unread .last-message { font-weight: bold; color: #e0e0e0; }

.conversation-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}
.conversation-details {
    flex-grow: 1;
}
.conversation-partner {
    color: #e0e0e0;
    font-weight: bold;
    font-size: 15px;
    display: block;
    margin-bottom: 3px;
}
.last-message {
    color: #a0a0a0;
    font-size: 14px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px; /* Limite la largeur du texte */
}
.conversation-time {
    color: #a0a0a0;
    font-size: 12px;
    white-space: nowrap;
    margin-left: 15px;
}

/* --- Détail Conversation (conversation_detail.html) --- */
.message-list-container {
    background-color: #161625;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    height: 60vh; /* Hauteur fixe pour la zone de chat */
    display: flex; /* Pour que la liste prenne toute la hauteur */
}

.message-list {
    flex-grow: 1; /* Prend toute la hauteur disponible */
    overflow-y: auto; /* Active le défilement vertical */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message-bubble {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 15px;
    position: relative;
    word-wrap: break-word; /* Coupe les mots longs */
}
.message-bubble.sent {
    background-color: #0d6efd; /* Bleu pour les messages envoyés */
    color: white;
    margin-left: auto; /* Aligne à droite */
    border-bottom-right-radius: 5px; /* Petite pointe */
}
.message-bubble.received {
    background-color: #3a3a4e; /* Gris foncé pour les messages reçus */
    color: #e0e0e0;
    margin-right: auto; /* Aligne à gauche */
    border-bottom-left-radius: 5px; /* Petite pointe */
}

.message-content {
    margin: 0 0 5px 0;
    font-size: 15px;
}
.message-timestamp {
    font-size: 11px;
    opacity: 0.7;
    display: block;
    text-align: right;
}
.message-bubble.received .message-timestamp { text-align: left; }

.empty-conversation {
    color: #a0a0a0;
    text-align: center;
    margin: auto; /* Centre verticalement */
}


/* Formulaire d'envoi */
.message-send-form {
    display: flex;
    gap: 10px;
    margin-top: 15px; /* Espace après la liste */
}
.message-send-form textarea {
    flex-grow: 1;
    padding: 12px;
    background-color: #2a2a3e;
    border: 1px solid #3a3a4e;
    color: #e0e0e0;
    border-radius: 8px;
    resize: none; /* Empêche le redimensionnement */
    min-height: 40px; /* Hauteur minimale */
    font-family: var(--font-family);
    font-size: 15px;
}
.btn-send {
    background-color: var(--accent-orange);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0 20px; /* Ajuste le padding */
    cursor: pointer;
    font-size: 16px;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-send:hover { opacity: 0.9; }
/* Style pour le bouton My Services */
.btn-my-services { 
    background-color: #6f42c1; /* Violet (ou une autre couleur) */
    /* Assure la cohérence avec les autres boutons */
    flex: 1; 
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    color: white;
    transition: opacity 0.2s ease;
}
.btn-my-services:hover { opacity: 0.9; }
/* ===== STYLES POUR LA PAGE PROFIL VENDEUR ===== */


    /* Styles généraux si besoin */


.profile-header-card {
    background-color: var(--dark-bg-secondary); /* Fond sombre */
    padding: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.profile-pic-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-orange);
}

.profile-header-info {
    flex-grow: 1; /* Prend l'espace disponible */
    color: var(--dark-text-primary);
}
.profile-header-info h2 {
    margin: 0 0 5px 0;
    font-size: 26px;
    color: #ffffff;
}
.profile-username {
    color: var(--dark-text-secondary);
    font-size: 15px;
    margin-bottom: 10px;
}
/* Style pour un badge VIP si ajouté plus tard
.vip-badge-profile { ... } */

.contact-seller-btn {
    background-color: var(--accent-orange);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap; /* Empêche le retour à la ligne */
}

.profile-section {
    background-color: var(--dark-bg-secondary);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
}
.profile-section h3 {
    color: #ffffff;
    font-size: 20px;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dark-border-color);
}
.profile-section p {
    color: var(--dark-text-secondary);
    line-height: 1.7;
}

/* Ajustement pour la grille d'items sur la page profil */
.profile-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Cartes un peu plus petites */
    gap: 20px;
}
.profile-items-grid .item-card-info {
    padding: 8px 12px; /* Padding réduit */
}
.profile-items-grid .item-name { font-size: 14px; }
.profile-items-grid .item-price { font-size: 15px; }
.profile-items-grid .item-card-footer { padding: 8px 12px; }
.profile-items-grid .btn-small { padding: 5px 10px; font-size: 12px; }
/* Style pour le bouton Profil Vendeur */
.btn-view-profile {
    background-color: #6c757d; /* Gris */
    color: white;
    border: 1px solid #5a6268;
    /* Copie les autres styles de .detail-actions .btn */
    padding: 12px 25px; text-decoration: none; font-weight: bold; border-radius: 8px; font-size: 16px; text-align: center; cursor: pointer; transition: opacity 0.2s ease;
}
.btn-view-profile:hover { opacity: 0.9; }
/* --- Styles pour la liste des catégories (Free Lessons) --- */
.category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.category-link-item {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid var(--dark-border-color);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.category-link-item:hover {
    background-color: #2a2a3e;
    transform: translateY(-3px); /* Effet de surélévation */
    color: #ffffff;
}
/* ===== STYLES POUR LA LISTE NETWORK DÉTAILLÉE ===== */

.network-list-page .page-title {
    color: #ffffff; margin-bottom: 20px; font-size: 24px;
}

/* Container de la table */
.network-list-page .table-container {
    background-color: #161625;
    padding: 20px;
    border-radius: 10px;
    overflow-x: auto;
    margin-bottom: 25px; /* Espace avant la pagination */
}

/* Table */
.network-table {
    width: 100%;
    border-collapse: collapse;
    color: #e0e0e0;
    font-size: 14px;
    min-width: 600px; /* Empêche la table de trop se compresser */
}
.network-table th {
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid #3a3a4e; /* Bordure plus marquée pour l'en-tête */
    color: #a0a0a0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
}
.network-table td {
    padding: 15px;
    border-bottom: 1px solid #2a2a3e;
    vertical-align: middle;
}

/* Style spécifique pour le nom d'utilisateur cliquable */
.member-link {
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease;
}
.member-link.active { color: #4CAF50; } /* Vert si actif */
.member-link.inactive { color: #f44336; } /* Rouge si inactif */
.member-link:hover { text-decoration: underline; }


/* Statut de souscription */
.status-active {
    color: #4CAF50; /* Vert */
    font-weight: bold;
}
.status-inactive {
    color: #f44336; /* Rouge */
    font-weight: bold;
}


/* Pagination */
.pagination {
    text-align: center;
    margin-top: 25px;
    color: #a0a0a0;
    font-size: 14px;
}
.pagination .step-links a {
    color: #0d6efd; /* Bleu */
    text-decoration: none;
    margin: 0 5px;
}
.pagination .step-links a:hover {
    text-decoration: underline;
}
.pagination .current {
    margin: 0 10px;
    font-weight: bold;
    color: #e0e0e0;
}
/* ===== STYLES POUR LA FENÊTRE MODALE ===== */

/* L'arrière-plan semi-transparent */
.modal {
    display: none; /* Caché par défaut */
    position: fixed; /* Reste en place */
    z-index: 1001; /* Au-dessus de tout */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permet de scroller si le contenu dépasse */
    background-color: rgba(0,0,0,0.6); /* Noir semi-transparent */
}

/* La boîte de la modale */
.modal-content {
    background-color: #161625; /* Fond sombre */
    color: #e0e0e0;
    margin: 10% auto; /* Centré */
    padding: 30px;
    border: 1px solid #3a3a4e;
    width: 80%; 
    max-width: 500px; 
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    z-index: 1002; /* <-- AJOUTÉ ICI (supérieur à .modal) */
}

/* Le bouton de fermeture (X) */
.close-btn {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close-btn:hover,
.close-btn:focus {
    color: #fff;
    text-decoration: none;
}

.modal-content h2 {
    margin: 0 0 25px 0;
    color: #ffffff;
    font-size: 22px;
    text-align: center;
}

/* Styles pour le formulaire dans la modale */
.modal-content .form-group {
    margin-bottom: 20px;
}
.modal-content label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #a0a0a0;
}
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content select {
    width: 100%;
    padding: 12px;
    background-color: #2a2a3e;
    border: 1px solid #3a3a4e;
    color: #e0e0e0;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 15px;
}


/* Boutons d'action de la modale */
.modal-actions {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end; /* Aligne les boutons à droite */
    gap: 10px;
}
.modal-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.modal-actions button:hover { opacity: 0.9; }

.btn-close {
    background-color: #6c757d; /* Gris */
    color: white;
}
.btn-confirm-withdraw {
    background-color: #0d6efd; /* Bleu */
    color: white;
}
/* Style spécifique pour le bouton Send du transfert */
.btn-confirm-transfer {
    background-color: #0d6efd; /* Bleu */
    color: white;
    /* Copie les autres styles de .modal-actions button si besoin */
    padding: 10px 20px; border: none; border-radius: 5px; font-size: 15px; font-weight: bold; cursor: pointer; transition: opacity 0.2s ease;
}
.btn-confirm-transfer:hover { opacity: 0.9; }
/* ===== STYLES POUR L'HISTORIQUE TRANSACTIONS ===== */

.transaction-history-page .pagination { margin-top: 30px; /* Espace augmenté */ }
/* ===== STYLES POUR LES PAGES D'AUTHENTIFICATION (Register/Login - main.css) ===== */

/* Conteneur principal centré */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh; /* Prend la hauteur de l'écran moins le header/footer */
    padding: 40px 20px;
    background-color: var(--bg-neutral); /* Fond gris clair */
}

/* Boîte du formulaire */
.auth-form-box {
    background-color: #ffffff; /* Fond blanc */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px; /* Largeur max du formulaire */
    text-align: center;
}

.auth-form-box h2 {
    color: var(--primary-blue); /* Bleu OthSkill*/
    margin: 0 0 15px 0;
    font-size: 24px;
}
.sponsor-info {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}
.sponsor-error {
    font-size: 14px;
    color: #dc3545; /* Rouge erreur */
    margin-bottom: 20px;
    font-weight: bold;
}

.auth-hr {
    border: 0;
    height: 1px;
    background-color: #eee;
    margin: 20px 0;
}


/* Styles pour les champs du formulaire */
.form-group-auth {
    margin-bottom: 20px;
    text-align: left; /* Aligne label et input à gauche */
}
.form-group-auth label {
    display: flex;
    align-items: center;
    color: #555;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
}
.form-group-auth label i {
    margin-right: 8px;
    color: var(--primary-blue); /* Icônes en bleu */
    width: 15px; /* Pour alignement */
}

.form-group-auth input[type="text"],
.form-group-auth input[type="email"],
.form-group-auth input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 15px;
}
.form-group-auth input:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 5px rgba(13, 61, 111, 0.3);
}

.form-help-text {
    display: block;
    font-size: 12px;
    color: #777;
    margin-top: 5px;
}
.form-error {
    color: #dc3545; /* Rouge erreur */
    font-size: 12px;
    margin-top: 5px;
    font-weight: bold;
}

/* Bouton S'inscrire / Se Connecter */
.btn-auth-submit {
    background-color: var(--accent-orange); /* Orange OthSkill*/
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%; /* Prend toute la largeur */
    margin-top: 10px;
}
.btn-auth-submit:hover {
    background-color: #e68a00; /* Orange plus foncé */
}

/* Lien pour changer de formulaire (Login <-> Register) */
.auth-switch {
    margin-top: 25px;
    font-size: 14px;
    color: #555;
}
.auth-switch a {
    color: var(--primary-blue);
    font-weight: bold;
    text-decoration: none;
}
.auth-switch a:hover {
    text-decoration: underline;
}

/* Ajustements spécifiques si besoin pour le body de la page register */
.register-page-body main {
    padding-top: 20px; /* Espace sous le header */
    padding-bottom: 20px; /* Espace au-dessus du footer */
}
/* ===== AJOUTS CSS POUR FICHIERS MESSAGERIE ===== */

/* Formulaire d'envoi mis à jour */
.message-send-form {
    display: flex;
    gap: 10px;
    align-items: center; /* Centre les éléments verticalement */
}
.message-send-form textarea {
    flex-grow: 1;
    /* ... (styles textarea existants) ... */
}


/* Style du bouton "Attacher" */
.btn-attach-file {
    background-color: #3a3a4e;
    color: #a0a0a0;
    border: none;
    border-radius: 50%; /* Rond */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease;
}
.btn-attach-file:hover {
    background-color: #4a4a5e;
    color: #ffffff;
}
/* Cache le <input type="file"> par défaut */
#file_upload_input {
    display: none;
}


/* Affichage des images dans les bulles */
.message-image {
    max-width: 100%; /* S'assure que l'image ne dépasse pas la bulle */
    border-radius: 10px; /* Coins arrondis */
    margin-bottom: 5px; /* Espace avant le texte (s'il y en a) */
    display: block;
}

/* Affichage des liens de fichier (PDF, etc.) */
.message-file-link {
    display: block;
    background-color: rgba(0,0,0,0.15); /* Fond légèrement plus sombre */
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: #e0e0e0;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
    transition: background-color 0.2s ease;
}
.message-file-link:hover {
    background-color: rgba(0,0,0,0.3);
}
.message-file-link i {
    margin-right: 8px; /* Espace pour l'icône de fichier */
}

/* Ajuste le padding de la bulle si elle ne contient que du texte */
.message-content {
    margin: 0; /* Réinitialise la marge */
}
.message-bubble.sent .message-content,
.message-bubble.received .message-content {
    /* Garde le padding si du texte est présent */
    padding: 0; /* Le padding est maintenant sur la bulle */
}

/* Ajuste le padding des bulles si elles contiennent un fichier ET du texte */
.message-bubble img + .message-content,
.message-bubble a + .message-content {
    margin-top: 10px; /* Espace entre le fichier et le texte */
}
/* ===== MISE À JOUR PAGE GESTION MARKETPLACE ===== */

/* Grille de 4 boutons (remplace .management-actions) */
.management-actions-grid4 {
    display: grid;
    /* Crée 4 colonnes sur grand écran, 2 sur tablette, 1 sur mobile */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px;
    margin-bottom: 40px;
}

/* Style générique pour ces 4 boutons */
.management-actions-grid4 .btn {
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    color: white;
    transition: opacity 0.2s ease;
    display: block; /* S'assure qu'ils remplissent l'espace de la grille */
}
.management-actions-grid4 .btn:hover { opacity: 0.9; }

/* Couleurs (existantes, sauf la nouvelle) */
.btn-publish { background-color: #28a745; } /* Vert */
.btn-my-products { background-color: #dc3545; } /* Rouge */
.btn-offer-service { background-color: var(--accent-orange); } /* Orange */
.btn-my-services { background-color: #6f42c1; } /* Violet (Nouveau) */


/* NOUVEAUX STYLES pour "Mes achats" / "Mes ventes" */
.order-toggle-buttons {
    display: flex;
    justify-content: center; /* Centre les boutons */
    gap: 20px; /* Espace entre les boutons */
    margin-top: 20px;
}

.btn-order-toggle {
    background-color: #dc3545; /* Rouge (comme l'image) */
    color: white;
    padding: 12px 30px; /* Assez larges */
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.btn-order-toggle:hover { opacity: 0.9; }

/* CACHE l'ancienne table sur cette page spécifique */
.market-management-page .orders-section .table-container {
    display: none !important;
}
/* ===== STYLES POUR STATUTS (Mes Achats) ===== */
.status-payee, .status-en_cours_livraison {
    color: #ffca28; /* Jaune/Orange */
    font-weight: bold;
}
.status-terminee {
    color: #4CAF50; /* Vert */
    font-weight: bold;
}
.status-litige, .status-annulee {
    color: #f44336; /* Rouge */
    font-weight: bold;
}
.status-en_attente_paiement, .status-en_attente_verification {
    color: #a0a0a0; /* Gris */
    font-style: italic;
}

/* Ajuste les boutons Reçu/Litige */
.action-buttons .btn-approve {
    background-color: #198754; /* Vert */
    color: white;
    padding: 6px 12px;
    font-size: 12px;
    margin-right: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
/* ===== STYLES POUR STATUTS (Mes Ventes) ===== */
/* Statut "En attente..." (pour le vendeur) */
.status-active {
    color: #4CAF50; /* Vert */
    font-weight: bold;
}
.status-inactive {
    color: #f44336; /* Rouge */
    font-weight: bold;
}
/* Statut "Payée" (pour l'acheteur) */
.status-payee, .status-en_attente_reception {
    color: #ffca28; /* Jaune/Orange */
    font-weight: bold;
}
/* ===== STYLES POUR LES APPELS À L'ACTION VIP ===== */

/* Style pour le lien VIP dans le dropdown */
.dropdown-content .dropdown-item.vip-link {
    background-color: var(--accent-orange);
    color: white;
    font-weight: bold;
    text-align: center;
}
.dropdown-content .dropdown-item.vip-link:hover {
    background-color: #e68a00; /* Orange plus foncé */
    color: white;
}

/* Style pour la carte "Devenir VIP" */
.status-card.cta-card {
    background-color: #2a2a3e; /* Fond plus sombre pour attirer l'œil */
    border: 1px dashed var(--accent-orange);
    text-decoration: none; /* Retire le soulignement du lien */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.status-card.cta-card:hover {
    background-color: #3a3a4e;
    border-color: #ffca28; /* Change la couleur de la bordure au survol */
}
.status-card.cta-card h4 {
    color: #e0e0e0;
}
.status-card.cta-card .status-value.highlight {
    color: var(--accent-orange); /* Texte orange */
    font-size: 18px; /* Ajuste la taille si besoin */
}
.status-card.cta-card .status-label i {
    color: var(--accent-orange); /* Icône orange */
}
/* ===== STYLES POUR LES NOTIFICATIONS ===== */

.notification-dropdown {
    position: relative;
    display: inline-block;
    margin-right: 15px; /* Espace avant le profil */
}

.notification-btn {
    position: relative; /* Pour positionner le badge */
    /* background: none; border: none; color: #a0a0a0; font-size: 18px; cursor: pointer; */
    /* Utilise les styles .icon-button existants */
}
.notification-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #dc3545; /* Rouge */
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 3px 6px;
    line-height: 1;
}

/* La liste déroulante des notifications */
.notification-content {
    display: none; /* Caché par défaut */
    position: absolute;
    right: 0;
    margin-top: 10px;
    background-color: var(--dark-bg-secondary);
    min-width: 300px; /* Plus large que le menu profil */
    max-width: 350px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    border-radius: 8px;
    z-index: 1000;
    overflow: hidden;
    border: 1px solid var(--dark-border-color);
}
.notification-content.show {
    display: block; /* Affiché par JS */
}

.notification-header {
    padding: 12px 16px;
    font-weight: bold;
    color: #ffffff;
    border-bottom: 1px solid var(--dark-border-color);
}
.notification-list {
    max-height: 400px; /* Limite la hauteur */
    overflow-y: auto;
}

.notification-item {
    padding: 12px 16px;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #2a2a3e;
    transition: background-color 0.2s ease;
}
.notification-item:hover {
    background-color: #3a3a4e;
}
.notification-item.empty {
    text-align: center;
    color: #a0a0a0;
}
.notification-item p {
    color: #e0e0e0;
    font-size: 14px;
    margin: 0 0 5px 0;
    line-height: 1.4;
}
.notification-item small {
    color: #a0a0a0;
    font-size: 12px;
}
/* ===== STYLES POUR SIDEBAR RESPONSIVE/RÉDUCTIBLE ===== */

/* --- Styles pour le bouton Burger --- */
.menu-toggle {
    display: none; /* Caché par défaut sur grand écran */
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 20px;
    cursor: pointer;
    margin-right: 15px; /* Espace avant les icônes d'action */
}
.menu-toggle:hover {
    color: #ffffff;
}

/* --- Styles pour les petits écrans (ex: < 1000px) --- */
@media (max-width: 1000px) {

    .menu-toggle {
        display: block; /* Affiche le bouton burger */
    }

    .sidebar {
        /* Masque la sidebar par défaut */
        position: fixed; /* Reste fixe à l'écran */
        left: -250px; /* La déplace hors de l'écran */
        z-index: 1000; /* Passe au-dessus du contenu */
        transition: left 0.3s ease-in-out; /* Animation de glissement */
    }

    .main-content-area {
        margin-left: 0; /* Le contenu principal prend toute la largeur */
    }

    /* --- Styles pour l'état "OUVERT" (quand JS ajoute la classe) --- */

    .sidebar.is-open {
        left: 0; /* Fait réapparaître la sidebar */
    }

    /* Optionnel: ajoute une ombre sur le contenu principal quand le menu est ouvert */
    /* .main-content-area.sidebar-is-open { ... } */
}