/* style.css - Blackwell & Co. */

/* Base */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    background-color: #E2E8F0;
    /* <-- Gris bleuté plus doux et reposant */
    color: #333333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* En-tête (Logo et Menu) */
header {
    background-color: #0A192F;
    color: white;
    padding: 25px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    /* S'assure que le menu prend bien toute la largeur */
}

.logo {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
}

nav {
    display: flex;
    align-items: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin-left: 30px;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

nav a:hover {
    color: #8892B0;
}

/* Bouton de Connexion (Espace Client) */
.btn-login {
    border: 1px solid white;
    padding: 10px 20px;
    border-radius: 2px;
}

.btn-login:hover {
    background-color: white;
    color: #0A192F;
}

/* Typographie & Boutons génériques */
.btn {
    background-color: white;
    color: #0A192F;
    padding: 15px 35px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    transition: 0.3s;
    border: 1px solid white;
    display: inline-block;
}

.btn:hover {
    background-color: transparent;
    color: white;
}

/* Pied de page */
footer {
    background-color: #060F1C;
    color: #555555;
    text-align: center;
    padding: 30px;
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: auto;
    /* Pousse automatiquement le footer tout en bas */
    width: 100%;
    box-sizing: border-box;
}

/* Bannière de prévention Roleplay */
.rp-disclaimer {
    background-color: #112B4F;
    /* Bleu un peu plus clair pour se fondre dans le thème */
    border-bottom: 2px solid #ff3b30;
    /* Ligne rouge pour alerter */
    color: #ff3b30;
    text-align: center;
    padding: 10px 20px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    box-sizing: border-box;
}

.rp-disclaimer span {
    color: white;
    font-weight: normal;
}

/* Mentions légales discrètes dans le footer */
.mentions-legales {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #112B4F;
    color: #334155;
    /* Gris très sombre pour rester discret */
    font-size: 9px;
    /* Texte minuscule comme sur les vrais contrats */
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: justify;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   STYLE DE L'ESPACE CLIENT (DASHBOARD)
   ========================================= */

.dashboard-body {
    background-color: #F4F7F6;
    /* Gris très clair pour le fond de l'appli */
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    margin: 0;
}

/* Menu latéral sombre */
.sidebar {
    width: 260px;
    background-color: #0A192F;
    color: white;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.20);
    z-index: 10;
}

.sidebar-logo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 50px;
    color: white;
    text-decoration: none;
}

.sidebar-menu a {
    color: #8892B0;
    text-decoration: none;
    padding: 18px 30px;
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    color: white;
    background-color: #112B4F;
    border-left: 4px solid #ffffff;
}

.sidebar-menu .logout {
    margin-top: auto;
    /* Pousse le bouton déconnexion en bas */
    color: #ff4757;
}

.sidebar-menu .logout:hover {
    background-color: rgba(255, 71, 87, 0.1);
    border-left: 4px solid #ff4757;
    color: #ff4757;
}

/* Contenu principal */
.dashboard-content {
    flex: 1;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.dashboard-header h1 {
    margin: 0;
    color: #0A192F;
    font-weight: 300;
    font-size: 28px;
}

.user-profile {
    font-weight: 600;
    color: #0A192F;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Cartes de compte (Soldes) */
.summary-cards {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}

/* Ombre uniforme pour les éléments internes */
.card,
.panel,
.transactions,
.chart-box,
.stock-item {
    background-color: white;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-top: 3px solid #0A192F;
    border-radius: 4px;
}

.service-card {
    background-color: white;
    padding: 50px 40px;
    /* On augmente un peu l'espace intérieur */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-top: 3px solid #0A192F;
    border-radius: 4px;
    flex: 1;
    max-width: 450px;
    /* On passe de 320px à 450px pour que ce soit plus imposant */
    min-width: 300px;
    /* Sécurité pour que ça ne devienne pas trop étroit */
    margin: 0 20px;
    /* Un peu plus d'espace entre les rectangles */
    text-align: center;
    transition: transform 0.3s ease;
}

/* Style de la grille du graphique */
.chart-grid {
    stroke: #eaeaea;
}

.card h3 {
    margin-top: 0;
    font-size: 12px;
    color: #8892B0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card .amount {
    font-size: 36px;
    color: #0A192F;
    font-weight: 300;
    margin: 10px 0;
}

.card .account-number {
    font-size: 12px;
    color: #999;
    letter-spacing: 2px;
}

/* Tableau Historique */
.transactions {
    background-color: white;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    flex: 1;
}

.transactions h2 {
    margin-top: 0;
    font-size: 14px;
    color: #0A192F;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.table-rp {
    width: 100%;
    border-collapse: collapse;
}

.table-rp th,
.table-rp td {
    padding: 15px 10px;
    text-align: left;
    border-bottom: 1px solid #f1f2f6;
}

.table-rp th {
    font-size: 11px;
    color: #8892B0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.table-rp td {
    font-size: 14px;
    color: #333;
}

.text-green {
    color: #2ed573;
    font-weight: bold;
}

.text-red {
    color: #ff4757;
    font-weight: bold;
}

/* =========================================
   STYLE DE LA BOURSE & GRAPHIQUES
   ========================================= */

.bourse-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
    min-height: 60vh;
}

/* Barre de recherche */
.search-bar {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid #ddd;
    background-color: #F8F9FA;
    margin-bottom: 30px;
    outline: none;
    transition: all 0.3s;
    box-sizing: border-box;
}

.search-bar:focus {
    border-bottom: 2px solid #0A192F;
    background-color: white;
}

/* Liste des entreprises */
.stock-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stock-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: white;
    border-left: 4px solid #0A192F;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stock-item:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.stock-info .name {
    font-weight: 600;
    font-size: 18px;
    color: #0A192F;
}

.stock-info .ticker {
    font-size: 12px;
    color: #8892B0;
    margin-left: 8px;
}

.stock-value {
    text-align: right;
}

.stock-value .price {
    font-size: 18px;
    font-weight: 600;
}

.trend-up {
    color: #2ed573;
    font-size: 14px;
    font-weight: bold;
}

.trend-down {
    color: #ff4757;
    font-size: 14px;
    font-weight: bold;
}

/* Page Graphique (Action) */
.chart-box {
    background: white;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border-top: 3px solid #0A192F;
    margin-top: 20px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.chart-header h1 {
    margin: 0;
    color: #0A192F;
    font-size: 28px;
}

.chart-header .current-price {
    font-size: 32px;
    font-weight: 300;
    text-align: right;
}

/* Le graphique lui-même */
.chart-visual {
    width: 100%;
    height: 300px;
    background: #FAFAFA;
    border: 1px solid #eee;
    position: relative;
    margin-bottom: 30px;
}

/* Boutons Acheter/Vendre */
.trade-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.btn-buy {
    background-color: #2ed573;
    color: white;
    padding: 12px 30px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-sell {
    background-color: #ff4757;
    color: white;
    padding: 12px 30px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-buy:hover {
    background-color: #27ae60;
}

.btn-sell:hover {
    background-color: #c0392b;
}

/* =========================================
   STYLE DU PORTAIL CONSEILLER (BACK-OFFICE)
   ========================================= */

.advisor-body {
    background-color: #E2E8F0;
    /* Gris industriel, ambiance logiciel de travail */
    margin: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Barre de navigation supérieure sécurisée */
.advisor-topbar {
    background-color: #060F1C;
    color: white;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #8892B0;
}

.advisor-topbar .brand {
    font-weight: 700;
    letter-spacing: 2px;
    color: white;
    text-decoration: none;
    font-size: 18px;
    text-transform: uppercase;
}

.advisor-topbar .brand span {
    color: #ff4757;
    /* Mention STAFF en rouge pour le RP */
    font-size: 10px;
    vertical-align: super;
    margin-left: 8px;
    border: 1px solid #ff4757;
    padding: 2px 4px;
}

.advisor-tools {
    display: flex;
    gap: 15px;
    align-items: center;
}

.advisor-tools a {
    color: #8892B0;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 15px;
    transition: 0.3s;
}

.advisor-tools a:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

.advisor-profile {
    border-left: 1px solid #333;
    padding-left: 15px;
    margin-left: 10px;
    font-size: 13px;
    color: white;
}

/* Espace de travail (Grille) */
.advisor-workspace {
    padding: 30px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Deux colonnes : Zone principale à gauche, Alertes à droite */
    gap: 30px;
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.panel {
    background: white;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
    border-top: 3px solid #0A192F;
    margin-bottom: 30px;
}

.panel h2 {
    margin-top: 0;
    font-size: 16px;
    color: #0A192F;
    text-transform: uppercase;
    border-bottom: 2px solid #f1f2f6;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

/* Boutons d'action rapides pour les employés */
.staff-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-staff {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    color: #0A192F;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-staff:hover {
    background-color: #0A192F;
    color: white;
    border-color: #0A192F;
}

/* Liste des requêtes entrantes (Contact) */
.request-item {
    padding: 15px;
    border-left: 3px solid #f39c12;
    /* Orange pour "En attente" */
    background-color: #fffaf0;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.5;
}

.request-item.urgent {
    border-left-color: #ff4757;
    background-color: #fff0f1;
}

.request-item strong {
    display: block;
    color: #0A192F;
    margin-bottom: 5px;
    font-size: 14px;
}

.request-item .time {
    color: #999;
    font-size: 11px;
    float: right;
}

.search-client {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
}

.search-client:focus {
    border-color: #0A192F;
}

/* =========================================
   MODE SOMBRE, MESSAGERIE & SWITCH ROND
   ========================================= */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    /* Écarte bien le mail, le bouton et l'espace client */
    margin-left: 30px;
}

/* Le bouton rond (Switch) */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #8892B0;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #0A192F;
    border: 1px solid #555;
}

input:checked+.slider:before {
    transform: translateX(20px);
}

/* Icône de Messagerie */
.mail-icon {
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 20px;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
}

.mail-icon:hover {
    transform: scale(1.1);
}

.mail-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background-color: #ff4757;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #0A192F;
}

/* Couleurs appliquées quand le Mode Sombre est actif */
body.dark-mode {
    background-color: #060F1C;
    color: #e2e8f0;
}

body.dark-mode .services,
body.dark-mode .bourse-container,
body.dark-mode .login-container {
    background-color: transparent;
}

body.dark-mode .service-card,
body.dark-mode .login-box,
body.dark-mode .chart-box,
body.dark-mode .stock-item,
body.dark-mode .contact-container,
body.dark-mode .panel,
body.dark-mode .transactions,
body.dark-mode .card {
    background-color: #0A192F;
    border-color: #8892B0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .service-card h3,
body.dark-mode .stock-info .name,
body.dark-mode .login-box h2 {
    color: #ffffff;
}

body.dark-mode p,
body.dark-mode .service-card p,
body.dark-mode .input-group label,
body.dark-mode .table-rp td {
    color: #8892B0;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .search-bar {
    background-color: #112B4F;
    color: white;
    border-color: #334155;
}

/* =========================================
   BOUTON SWITCH (MODE SOMBRE)
   ========================================= */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    margin-right: 20px;
}

/* Masquer la case à cocher par défaut */
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Le fond du switch */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #8892B0;
    transition: 0.4s;
    border-radius: 34px;
}

/* Le rond du switch */
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* Couleurs quand c'est activé */
input:checked+.slider {
    background-color: #0c9400;
    /* Rouge Blackwell */
}

input:checked+.slider:before {
    transform: translateX(22px);
}

/* =========================================
   COULEURS DU MODE SOMBRE
   ========================================= */
body.dark-mode,
body.dark-mode .dashboard-body,
body.dark-mode .advisor-body {
    background-color: #0d1117;
    /* Fond général sombre */
    color: #c9d1d9;
}

/* Assombrir les conteneurs blancs (Cartes, Tableaux, Espace Client) */
body.dark-mode .service-card,
body.dark-mode .services,
body.dark-mode .card,
body.dark-mode .transactions,
body.dark-mode .stock-item,
body.dark-mode .chart-box,
body.dark-mode .login-box,
body.dark-mode .contact-container,
body.dark-mode .panel {
    background-color: #161b22;
    border-top-color: #8892B0;
    color: #c9d1d9;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

/* Adapter les textes foncés pour qu'ils soient lisibles */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .card .amount,
body.dark-mode .stock-info .name,
body.dark-mode .table-rp td {
    color: #ffffff;
}

/* Adapter les champs de saisie */
body.dark-mode .search-bar,
body.dark-mode .search-client,
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    background-color: #0d1117;
    color: white;
    border-color: #30363d;
}

/* Pousse le conteneur du footer vers le bas */
#footer-container {
    margin-top: auto;
    width: 100%;
}

/* --- MODE SOMBRE : DASHBOARD & CONSEILLER --- */

/* Fond des pages spécifiques */
body.dark-mode.dashboard-body,
body.dark-mode.advisor-body {
    background-color: #0d1117 !important;
}

/* Sidebar du Dashboard */
body.dark-mode .sidebar {
    background-color: #161b22;
    border-right: 1px solid #30363d;
}

body.dark-mode .sidebar-menu a {
    color: #8892B0;
}

body.dark-mode .sidebar-menu a.active,
body.dark-mode .sidebar-menu a:hover {
    background-color: #21262d;
    color: white;
}

/* Topbar du mode Conseiller */
body.dark-mode .advisor-topbar {
    background-color: #161b22;
    border-bottom: 1px solid #30363d;
}

/* Panneaux (Panels) et Tableaux */
body.dark-mode .panel,
body.dark-mode .dashboard-content,
body.dark-mode .workspace-main .panel {
    background-color: #161b22;
    color: #c9d1d9;
}

body.dark-mode .table-rp,
body.dark-mode .table-rp th {
    background-color: #21262d;
    color: white;
    border-color: #30363d;
}

body.dark-mode .table-rp td {
    border-color: #30363d;
    color: #8892B0;
}

/* Items de requêtes (Espace Conseiller) */
body.dark-mode .request-item {
    background-color: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

body.dark-mode .request-item p {
    color: #8892B0 !important;
}

/* Application du mode sombre sur les composants spécifiques */
body.dark-mode.dashboard-body,
body.dark-mode.advisor-body {
    background-color: #0d1117 !important;
}

body.dark-mode .sidebar {
    background-color: #060F1C;
    border-right: 1px solid #112B4F;
}

body.dark-mode .panel,
body.dark-mode .card,
body.dark-mode .request-item {
    background-color: #161b22;
    color: #ffffff;
    border-color: #30363d;
}

body.dark-mode .advisor-topbar {
    background-color: #060F1C;
    border-bottom: 3px solid #112B4F;
}

/* On s'assure que les boutons de la sidebar restent visibles */
body.dark-mode .sidebar-menu a:not(.logout) {
    color: #8892B0;
}

/* =========================================
   ÉTAPE 4 : LISIBILITÉ & GRAPHIQUE
   ========================================= */

/* 1. Correction des titres qui restent sombres en mode sombre */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode .dashboard-header h1,
body.dark-mode .user-profile,
body.dark-mode .card .amount,
body.dark-mode .panel h2,
body.dark-mode .advisor-topbar .brand,
body.dark-mode .service-text h2 {
    color: #ffffff !important;
}

/* 2. Grille du graphique en sombre */
body.dark-mode .chart-grid {
    stroke: #334155;
}

/* 3. Remplissage du graphique (opacité du vert) */
body.dark-mode polygon {
    fill: rgba(46, 213, 115, 0.2);
}

/* Amélioration de la visibilité des statistiques sur l'accueil */
#stats-banque .amount {
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

body.dark-mode #stats-banque .service-card p {
    color: #8892B0 !important;
}

/* Style pour l'organigramme */
.advisor-workspace .panel {
    border-left: none;
    border-top: 4px solid #0A192F;
}

/* Force la couleur du montant des cartes de services en blanc (Mode Sombre) */
body.dark-mode .service-card .amount {
    color: #ffffff !important;
}

/* Correction de la section Communauté en mode sombre */
body.dark-mode .community-stats {
    background-color: transparent !important;
}

body.dark-mode .community-stats h2 {
    color: #ffffff !important;
}

/* =========================================
   STYLE DU CLUB CASINO
   ========================================= */
.casino-container {
    max-width: 1100px;
    margin: 50px auto;
    padding: 0 20px;
}

.casino-grid {
    display: grid;
    /* Crée des colonnes automatiques qui s'adaptent à l'écran */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.casino-card {
    background-color: white;
    padding: 40px 20px;
    text-align: center;
    text-decoration: none;
    color: #0A192F;
    border-top: 4px solid #ffd700;
    /* Bordure Or */
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    transition: all 0.3s ease;
    display: block;
}

.casino-card:hover {
    transform: translateY(-10px);
    /* Fait "sauter" la carte vers le haut */
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.2);
    /* Ombre dorée */
}

.casino-card .icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.casino-card h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.casino-card p {
    margin: 0;
    color: #8892B0;
    font-size: 14px;
}

.casino-panel {
    text-align: center;
    border-left: 4px solid #ffd700;
}

/* --- Mode Sombre Spécifique au Casino --- */
body.dark-mode .casino-card {
    background-color: #161b22;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .casino-card h3 {
    color: #ffffff;
}

/* =========================================
   BANNIÈRE LOTO (PAGE D'ACCUEIL)
   ========================================= */
.loto-banner {
    max-width: 960px;
    margin: 20px auto 50px auto;
    /* Centre la bannière et ajoute de l'espace en bas */
    background: linear-gradient(135deg, #0A192F 0%, #112B4F 100%);
    color: white;
    padding: 40px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #ffd700;
    /* Bordure dorée Blackwell */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.loto-banner .loto-title {
    display: block;
    font-size: 14px;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.loto-banner .loto-amount {
    font-size: 54px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    /* Police style ticket/banque */
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    /* Léger halo doré autour du texte */
    margin: 10px 0;
}

.loto-banner p {
    color: #8892B0;
    font-size: 14px;
    margin-bottom: 25px;
}

/* Bouton doré spécifique pour le loto */
.btn-gold {
    background-color: transparent;
    color: #ffd700;
    border: 1px solid #ffd700;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    transition: 0.3s;
    display: inline-block;
}

.btn-gold:hover {
    background-color: #ffd700;
    color: #0A192F;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* --- FIX NAVIGATION & LISIBILITÉ --- */

/* 1. On tue définitivement les flèches des inputs sans erreur */
/* Suppression des flèches et harmonisation des champs nombre */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

input[type="number"] {
    appearance: textfield !important;
    /* Version Standard */
    -moz-appearance: textfield !important;
    /* Version Firefox */
}

/* 2. On nettoie les barres de défilement des historiques */
div[style*="overflow-y: auto"] {
    scrollbar-width: thin;
    scrollbar-color: #8892B0 rgba(0, 0, 0, 0.05);
    padding-right: 15px !important;
}

div[style*="overflow-y: auto"]::-webkit-scrollbar {
    width: 6px;
}

div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
    background-color: #8892B0;
    border-radius: 10px;
}

/* 3. Fix Contraste Light Mode (Pour que ça ne soit pas illisible) */
body:not(.dark-mode) .panel {
    background: #ffffff !important;
    color: #0A192F !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

body:not(.dark-mode) input,
body:not(.dark-mode) select {
    background: #fdfdfd !important;
    color: #0A192F !important;
    border: 1px solid #ccd1d9 !important;
}

/* --- STYLE DES HISTORIQUES --- */
div[style*="overflow-y: auto"] {
    scrollbar-width: thin;
    scrollbar-color: #8892B0 rgba(0, 0, 0, 0.05);
    padding-right: 15px !important;
    /* Évite que le texte soit coupé à droite */
}

div[style*="overflow-y: auto"]::-webkit-scrollbar {
    width: 6px;
}

div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
}

div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
    background-color: #8892B0;
    border-radius: 10px;
}

/* =========================================
   ✨ DESIGN CASINO VIP (LOGIQUE DRY) ✨
   ========================================= */

/* Fond global Casino : Fixé à l'écran, ne se coupe jamais en scrollant ! */
.casino-wrapper {
    background: radial-gradient(circle at top, #0f2040 0%, #0a192f 40%, #02050a 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: white;
    padding-bottom: 50px;
}

.casino-hero {
    text-align: center;
    padding: 60px 20px 40px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    background: rgba(10, 25, 47, 0.4);
}

.casino-layout {
    max-width: 1600px;
    margin: 40px auto 0;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 40px;
}

/* Grille des jeux : Flexbox blindé pour 3 cartes par ligne */
.games-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.game-card {
    /* Le secret pour forcer 3 cartes : 33.333% de l'espace MOINS la marge */
    flex: 0 0 calc(33.333% - 17px);
    max-width: calc(33.333% - 17px);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(136, 146, 176, 0.2);
    border-radius: 12px;
    padding: 35px 15px;
    text-align: center;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.game-card:hover {
    transform: translateY(-8px);
    border-color: #ffd700;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.1);
}

.game-card.disabled {
    filter: grayscale(0.8);
    opacity: 0.7;
    border-color: rgba(255, 255, 255, 0.05);
    cursor: default;
}
.game-card.disabled:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.05); }

.badge-soon {
    position: absolute; top: 15px; right: -30px;
    background: #ff4757; color: white;
    font-size: 10px; font-weight: bold; padding: 5px 30px;
    transform: rotate(45deg); text-transform: uppercase;
}

/* Widgets Latéraux (Mon Coffre, Loto, Paris) */
.sidebar-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    padding: 25px; margin-bottom: 30px;
    backdrop-filter: blur(5px);
}

.sidebar-title {
    color: #ffd700; font-size: 14px; text-transform: uppercase; letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,215,0,0.2);
    padding-bottom: 12px; margin-top: 0; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: space-between;
}

/* Animations et listes */
.ticker-container { height: 280px; overflow: hidden; position: relative; }
.ticker-list { animation: scrollTicker 20s linear infinite; }
.ticker-list:hover { animation-play-state: paused; }
@keyframes scrollTicker { 0% { transform: translateY(0%); } 100% { transform: translateY(-50%); } }

.winner-item {
    background: rgba(255,255,255,0.05);
    padding: 15px; border-radius: 8px; margin-bottom: 12px;
    font-size: 13px; display: flex; justify-content: space-between; align-items: center;
    border-left: 3px solid #2ecc71;
}

.bet-item {
    background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; margin-bottom: 12px;
    font-size: 13px; border: 1px solid rgba(255,255,255,0.05);
}
.bet-timer { color: #e67e22; font-family: monospace; font-size: 14px; font-weight: bold; background: rgba(230,126,34,0.1); padding: 3px 8px; border-radius: 4px;}

/* Remplace .intro par la classe de ta première section */
.intro, header#accueil, section.landing-page {
    /* Force la hauteur exacte de la fenêtre visible */
    height: 100vh !important; 
    min-height: 100vh;
    
    /* Supprime les marges qui pourraient décaler le tout */
    margin: 0;
    padding: 0;
    
    /* Assure que le contenu est bien centré ou disposé sans dépasser */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden; /* Coupe tout ce qui dépasse */
}

/* S'assure que le body ne crée pas de marges invisibles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

/* --- 1. HERO (CORRECTIF HAUTEUR & TEXTE) --- */
.hero-layer {
    position: relative; /* On arrête le fixed qui casse tout */
    width: 100%;
    height: 100vh; /* Prend tout l'écran, point final */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #02050a;
    overflow: hidden;
    z-index: 1;
}

#particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Derrière le texte */
}

.hero-content {
    position: relative;
    z-index: 10; /* Devant le canvas */
    padding: 0 20px;
    max-width: 1100px;
    opacity: 1 !important; /* Force la visibilité */
    transform: none !important; /* Annule les conflits d'animation */
}

/* Titre invisible corrigé */
.hero-title {
    font-size: 80px; /* Un peu plus petit pour éviter de casser sur petit écran */
    font-weight: 900;
    margin: 0;
    line-height: 1.1;
    color: #ffffff !important; /* BLANC FORCÉ */
    text-transform: uppercase;
    text-shadow: 0 10px 30px rgba(0,0,0,0.8);
    position: relative;
}

.hero-subtitle {
    font-size: 20px;
    color: #8892b0 !important; /* Gris clair bleuté */
    margin: 20px auto 40px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

/* --- 2. CONTENU QUI SUIT (Plus de marge bizarre) --- */
.scroll-content {
    position: relative;
    z-index: 20;
    background: #f4f7f6; /* Couleur de fond de ta page 2 */
    /* Pas de margin-top, ça se met naturellement en dessous */
}
body.dark-mode .scroll-content { background: #0a0e14; }

/* --- 3. NOUVEAUX WIDGETS (DESIGN ÉPURÉ) --- */
.info-embeds {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: -50px; /* Remonte légèrement sur le Hero */
    padding-bottom: 50px;
    position: relative;
    z-index: 30;
}

.info-card {
    background: rgba(10, 25, 47, 0.85); /* Fond sombre semi-transparent */
    backdrop-filter: blur(10px); /* Effet flou derrière */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 25px;
    border-radius: 8px; /* Coins moins arrondis, plus pro */
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.info-card:hover { transform: translateY(-5px); border-color: #ffd700; }

/* Texte des widgets */
.info-text { text-align: left; }
.info-text strong { 
    display: block; 
    color: #ffffff; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    opacity: 0.7;
    margin-bottom: 2px;
}
.info-text span { 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: 700; 
}

/* Pastille verte banque */
.status-dot {
    width: 8px; height: 8px; background: #2ecc71; border-radius: 50%;
    box-shadow: 0 0 10px #2ecc71;
}

/* --- CURSEUR LUXE (MODERNE) --- */
body { cursor: none !important; } /* On cache la souris par défaut */
a, button, input, select, .clickable { cursor: none !important; }

#cursor-dot {
    width: 6px; height: 6px; background-color: #ffd700;
    position: fixed; top: 0; left: 0; border-radius: 50%;
    z-index: 999999; pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

#cursor-ring {
    width: 40px; height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: fixed; top: 0; left: 0; border-radius: 50%;
    z-index: 999998; pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, border-color 0.2s, background-color 0.2s;
    transition-timing-function: ease-out; /* Fluidité */
}

/* État Actif (Click) */
body.is-clicking #cursor-ring {
    width: 30px; height: 30px; border-color: #ffd700; border-width: 2px;
}

/* État Hover (Survol) */
body.is-hovering #cursor-ring {
    width: 60px; height: 60px;
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
}

/* ========================================================
   PAGE CONTACT - CANAL SÉCURISÉ (THEMES & FLUX CONTINU)
   ======================================================== */

/* 1. Fond par défaut (Light Mode : Gris-bleu contrasté) */
.animated-contact-bg {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 20px 40px 20px;
    background-color: #cbd5e1; 
    background: radial-gradient(circle at center, #d5d8db 100%, #000000 0%);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.3s ease;
}

/* Fond en Dark Mode (Le bleu de la banque) */
body.dark-mode .animated-contact-bg {
    background-color: #02050a;
    background: radial-gradient(circle at center, #0a192f 100%, #02050a 40%);
}

/* 2. Le titre au-dessus de la boîte */
.modern-page-header {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}

.modern-page-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 4px;
    color: #0A192F; /* Texte sombre en Light Mode */
    margin-bottom: 10px;
    transition: color 0.3s;
}

body.dark-mode .modern-page-header h1 {
    color: #ffffff; /* Texte blanc en Dark Mode */
}

.modern-page-header p { color: #5d6d7e; font-size: 15px; }
body.dark-mode .modern-page-header p { color: #8892B0; }

/* 3. La boîte du terminal */
.contact-layout {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
    width: 100%;
    max-width: 1000px;
}

/* 4. Panneaux (Plus transparents pour voir les cubes passer) */
.contact-info-panel, .contact-form-panel {
    backdrop-filter: blur(2px); /* Flou réduit pour mieux voir les cubes */
    border-radius: 12px;
    transition: background 0.3s, border 0.3s, box-shadow 0.3s;
}

/* Couleurs Light Mode */
.contact-info-panel {
    background: rgba(255, 255, 255, 0.15); /* Transparence doublée */
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: fit-content;
}
.contact-form-panel {
    background: rgba(255, 255, 255, 0.2); /* Transparence doublée */
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 35px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* CORRECTION : Force le formulaire de contact à s'empiler de haut en bas */
.contact-form-panel form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Couleurs Dark Mode */
body.dark-mode .contact-info-panel {
    background: rgba(10, 25, 47, 0.35); /* Transparence augmentée */
    border: 1px solid rgba(255, 215, 0, 0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
body.dark-mode .contact-form-panel {
    background: rgba(2, 5, 10, 0.45); /* Transparence augmentée */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

/* Textes dans les panneaux */
.info-block h3 { color: #d4af37; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; margin-top: 0; }
body.dark-mode .info-block h3 { color: #ffd700; }

.info-block p { color: #2c3e50; font-size: 13px; line-height: 1.6; margin: 0; }
body.dark-mode .info-block p { color: #b0b8c4; }

/* Inputs du formulaire */
.contact-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.35); /* Transparence augmentée */
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #333;
    padding: 15px 18px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
body.dark-mode .contact-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.contact-input:focus { border-color: #ffd700; outline: none; background: rgba(255, 215, 0, 0.05); }
textarea.contact-input { resize: vertical; min-height: 120px; }

select.contact-input option { background: #ffffff; color: #333; }
body.dark-mode select.contact-input option { background: #0A192F; color: white; }

@media (max-width: 850px) { 
    .contact-layout { grid-template-columns: 1fr; }
    .animated-contact-bg { padding-top: 120px; }
}

/* --- PARTICULES FLOTTANTES (Cubes jaunes) --- */
.floating-data {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; z-index: 1; pointer-events: none;
}
.floating-data li {
    position: absolute; display: block; list-style: none;
    width: 20px; height: 20px;
    background: rgba(255, 215, 0, 0.15); /* Jaune Blackwell */
    border: 1px solid rgba(255, 215, 0, 0.3);
    animation: floatUp 25s linear infinite;
    bottom: -150px; border-radius: 4px;
}

/* ASTUCE : Les délais NÉGATIFS permettent aux cubes d'être DÉJÀ en haut au chargement de la page ! */
.floating-data li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: -5s; }
.floating-data li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: -12s; animation-duration: 12s; }
.floating-data li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: -2s; }
.floating-data li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: -18s; animation-duration: 18s; }
.floating-data li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: -8s; }
.floating-data li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: -15s; }
.floating-data li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: -22s; }
.floating-data li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: -7s; animation-duration: 45s; }
.floating-data li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: -20s; animation-duration: 35s; }
.floating-data li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: -3s; animation-duration: 11s; }

@keyframes floatUp {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-1200px) rotate(720deg); opacity: 0; }
}

/* ========================================================
   ANIMATIONS ET ERREURS FORMULAIRE
   ======================================================== */

/* Champ manquant en rouge */
.input-error {
    border-color: #ff4757 !important;
    background: rgba(255, 71, 87, 0.05) !important;
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.2) !important;
}

/* Animation de secousse (Shake) */
.shake-error {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
    40%, 60% { transform: translate3d(8px, 0, 0); }
}

/* ========================================================
   PORTAIL STAFF & DASHBOARD (3 COLONNES & DISCORD UI)
   ======================================================== */

/* 1. Animation Premium Mesh (Ne casse plus le footer) */
.premium-mesh-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 0; /* Reste bien au fond */
    background: linear-gradient(120deg, #f0f4f8, #e2e8f0, #ffffff, #d5e0ec);
    background-size: 300% 300%;
    animation: meshGradient 12s ease-in-out infinite;
}

body.dark-mode .premium-mesh-bg {
    background: linear-gradient(120deg, #02050a, #0a192f, #050a14, #112240);
}

@keyframes meshGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.staff-bg {
    position: relative;
    flex: 1;
    padding-top: 130px;
    padding-bottom: 80px;
}

/* 2. Mise en page à 3 Colonnes */
.modern-page-header { position: relative; z-index: 10; text-align: center; margin-bottom: 40px; }
.modern-page-header h1 { color: #0A192F; font-size: 28px; letter-spacing: 4px; margin-bottom: 10px; }
body.dark-mode .modern-page-header h1 { color: white; }

.staff-layout {
    display: grid;
    grid-template-columns: 280px minmax(400px, 800px) 280px;
    justify-content: center;
    gap: 30px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

@media (max-width: 1200px) { .staff-layout { grid-template-columns: 1fr; } }

/* 3. Panneaux en Verre (Et fond du Coffre transparent) */
.staff-panel {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px; padding: 25px; margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

body.dark-mode .staff-panel {
    background: rgba(10, 25, 47, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.15);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.staff-panel h2 {
    color: #0A192F; margin-top: 0; margin-bottom: 20px; font-size: 14px;
    text-transform: uppercase; letter-spacing: 2px; font-weight: bold;
    border-bottom: 2px solid rgba(0,0,0,0.1); padding-bottom: 10px;
}
body.dark-mode .staff-panel h2 { color: #ffffff; border-bottom-color: rgba(255,255,255,0.1); }

/* Grille stats */
.staff-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.stat-card { background: rgba(255, 255, 255, 0.8); padding: 15px; border-radius: 8px; border-left: 4px solid transparent; }
body.dark-mode .stat-card { background: rgba(0, 0, 0, 0.4); }
.stat-title { font-size: 10px; color: #555; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 5px; }
body.dark-mode .stat-title { color: #8892B0; }

/* 4. SCROLL iPHONE STYLE (Force l'affichage malgré le header.js) */
.table-scroll-container, .discord-scroll-container {
    scrollbar-width: thin; /* Pour Firefox */
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
body.dark-mode .table-scroll-container, body.dark-mode .discord-scroll-container {
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.table-scroll-container { max-height: 350px; overflow-y: auto; padding-right: 5px; border-radius: 6px; }
.discord-scroll-container { max-height: 550px; overflow-y: auto; padding-right: 5px; }

/* Annule le "display:none !important" de ton header.js */
.table-scroll-container::-webkit-scrollbar, 
.discord-scroll-container::-webkit-scrollbar { 
    display: block !important; 
    width: 5px !important; 
    height: 5px !important; 
}
.table-scroll-container::-webkit-scrollbar-track, .discord-scroll-container::-webkit-scrollbar-track { background: transparent !important; }
.table-scroll-container::-webkit-scrollbar-thumb, .discord-scroll-container::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2) !important; border-radius: 10px !important; }
body.dark-mode .table-scroll-container::-webkit-scrollbar-thumb, body.dark-mode .discord-scroll-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2) !important; }

.staff-table { width: 100%; border-collapse: collapse; font-size: 13px; color: #333; }
body.dark-mode .staff-table { color: #ccc; }
.staff-table th { text-align: left; padding: 12px; border-bottom: 2px solid rgba(0,0,0,0.1); position: sticky; top: 0; background: #f0f4f8; z-index: 2; }
body.dark-mode .staff-table th { border-bottom-color: rgba(255,255,255,0.1); background: #071324; }
.staff-table td { padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.05); }
body.dark-mode .staff-table td { border-bottom-color: rgba(255,255,255,0.05); }

/* 5. LISTE CITOYENS (DESIGN DISCORD + AVATARS IMAGES) */
.search-discord {
    width: 100%; padding: 10px 12px; border-radius: 4px; border: none;
    background: rgba(0,0,0,0.05); color: #333; margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif; font-size: 12px; outline: none;
    box-sizing: border-box;
}
body.dark-mode .search-discord { background: rgba(0,0,0,0.3); color: white; }
.search-discord:focus { outline: 1px solid #ffd700; }

.discord-user {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: 6px;
    cursor: pointer; transition: 0.1s;
    margin-bottom: 2px; text-decoration: none;
}
.discord-user:hover { background: rgba(0,0,0,0.05); }
body.dark-mode .discord-user:hover { background: rgba(255,255,255,0.05); }

/* CORRECTION DE LA PHOTO DE PROFIL */
.discord-avatar {
    width: 35px; height: 35px; border-radius: 50%;
    position: relative; flex-shrink: 0; background: transparent;
}
.discord-avatar img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.discord-status {
    position: absolute; bottom: -2px; right: -2px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid #e2e8f0;
}
body.dark-mode .discord-status { border-color: #0d1424; }

.discord-info { display: flex; flex-direction: column; overflow: hidden; }
.discord-name { font-size: 14px; font-weight: bold; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dark-mode .discord-name { color: #eee; }
.discord-role { font-size: 11px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 6. Sauvetage du Footer (Passe par-dessus l'animation) */
#footer-container {
    position: relative;
    z-index: 10;
}

/* ========================================================
   PAGE SERVICES (REFONTE LUXE & ANIMATION COMPLEXE)
   ======================================================== */

/* 1. Fond animé complexe : Orbes lumineuses sous verre */
.blackwell-luxury-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #02050a; /* Fond extrêmement sombre */
    z-index: 0;
    overflow: hidden;
}

.luxury-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px); /* Crée l'effet de nuage lumineux */
    opacity: 0.4;
    animation: floatOrb 20s infinite alternate ease-in-out;
}

/* 3 orbes de tailles et couleurs différentes qui se croisent */
.orb-1 { width: 50vw; height: 50vw; background: #ffd700; top: -10%; left: -10%; animation-delay: 0s; }
.orb-2 { width: 60vw; height: 60vw; background: #0a192f; bottom: -20%; right: -10%; animation-delay: -5s; animation-duration: 25s; }
.orb-3 { width: 40vw; height: 40vw; background: #112B4F; top: 40%; left: 40%; animation-delay: -10s; animation-duration: 30s; }

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(8vw, 15vh) scale(1.2); }
}

.services-wrapper {
    position: relative;
    z-index: 10;
    padding: 130px 20px 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 2. Grille et Cartes redésignées pour le luxe absolu */
.services-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
    margin-top: 60px;
}

.service-luxe-card {
    background: rgba(10, 25, 47, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 4px; /* Design plus carré, plus sérieux */
    padding: 40px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Ligne dorée animée au survol */
.service-luxe-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 3px;
    background: #ffd700; transition: width 0.4s ease;
}

.service-luxe-card:hover {
    transform: translateY(-8px);
    background: rgba(10, 25, 47, 0.9);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.service-luxe-card:hover::after { width: 100%; }

.service-icon-luxe {
    font-size: 36px;
    margin-bottom: 25px;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.service-luxe-card h2 {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

.service-luxe-card p {
    color: #8892B0;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

.btn-luxe {
    align-self: flex-start;
    color: #ffd700;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 10px 20px;
    border-radius: 2px;
    transition: 0.3s;
}

.service-luxe-card:hover .btn-luxe {
    background: #ffd700; color: #02050a;
}

#particles-js {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important; /* DOIT ABSOLUMENT ÊTRE NÉGATIF */
    background-color: #02050a;
    pointer-events: none;
}

/* Désactive l'ancien fond orbes */
.blackwell-luxury-bg {
    display: none !important;
}

/* Conteneur principal propre */
.services-wrapper {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    pointer-events: auto;
}

/* Titre "Gestion de Patrimoine" */
.modern-page-header {
    margin-top: 0 !important;
    margin-bottom: 50px;
}

/* =========================================
   CORRECTION DES MODALS EN MODE SOMBRE
   ========================================= */

body.dark-mode #modal-creation > div,
body.dark-mode #modal-gerer-staff > div,
body.dark-mode #modal-edit > div {
    background: #161b22 !important;
    border-top-color: #8892B0 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode #modal-creation h2,
body.dark-mode #modal-gerer-staff h2,
body.dark-mode #modal-edit h2 {
    color: #ffffff !important;
}

body.dark-mode #modal-creation label,
body.dark-mode #modal-gerer-staff label,
body.dark-mode #modal-edit label {
    color: #8892B0 !important;
}

body.dark-mode #modal-creation input,
body.dark-mode #modal-gerer-staff input,
body.dark-mode #modal-creation select,
body.dark-mode #modal-gerer-staff select,
body.dark-mode #modal-edit input,
body.dark-mode #modal-edit select {
    background-color: #0d1117 !important;
    color: #ffffff !important;
    border-color: #30363d !important;
}

/* Options de la liste déroulante */
body.dark-mode #modal-gerer-staff select option {
    background-color: #0d1117 !important;
    color: #ffffff !important;
}

/* Le bouton "Annuler" (qui était gris clair) */
body.dark-mode #modal-creation button[type="button"],
body.dark-mode #modal-gerer-staff button[type="button"],
body.dark-mode #modal-edit button[type="button"] {
    background: #21262d !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}