/* ==========================================================================
   PARTIE 1: STYLES DE BASE ET LAYOUT
   ========================================================================== */

/* -----------------------------------------------------
   1. RESET ET STYLES GLOBAUX
   ----------------------------------------------------- */

body {
    background-color: #000000;
    color: #FFFFFF;
    font-family: 'Press Start 2P', monospace;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 14px;
}

/* Effet scan lines */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 102, 0, 0.03),
        rgba(255, 102, 0, 0.03) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 999;
}

/* -----------------------------------------------------
   2. STRUCTURE PRINCIPALE
   ----------------------------------------------------- */

/* Conteneur fixe (header + menu) */
.fixed-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #000000;
}

/* Conteneur de contenu principal */
.content-container {
    margin-top: 210px;
    padding-bottom: 60px;
}

/* Container principal et modules */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 20px auto;
    padding: 20px;
    border: 2px solid #FF6600;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
    background-color: #000000;
    
}

.content-container .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 20px auto;
    padding: 20px;
    border: 2px solid #FF6600 !important;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.5) !important;
    background-color: #000000;
    min-height: 80vh; /* 80% de la hauteur de l'écran /
    / ou /
    min-height: 600px; / hauteur fixe minimum */
}

/* -----------------------------------------------------
   3. HEADER
   ----------------------------------------------------- */

   header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* This centers items vertically */
    flex-wrap: nowrap;
    margin-bottom: 15px;
    border-bottom: none;
    height: 100px; /* Setting a fixed height for the header */
}

/* Logo */
.logo {
    width: 275px;
    height: 100px !important;;
    /*object-fit: contain;*/
    max-width: 275px;
    flex-shrink: 0;
    margin: 0;
}

/* Organisation du header */
.header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centers content vertically */
    flex-grow: 1;
    padding: 0; /* Remove extra padding */
    margin: 0;
}

/* Titre */
.title {
    color: #FF6600;
    font-size: 1.5em;
    text-align: center;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

/* Horloge */
#time {
    background-color: #220000;
    padding: 5px 10px;
    border: 1px solid #ffffff;
    margin: 0; /* Remove margin-top */
    border-radius: 3px;
    height: 40px; /* Same height as wallet-mini */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -----------------------------------------------------
   4. MENU PRINCIPAL
   ----------------------------------------------------- */

.main-menu {
    background-color: #330000;
    padding: 8px 20px;
    margin-top: -20px;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.menu-item {
    color: #ffffff;
    margin: 5px 10px;
    text-decoration: none;
    display: inline-block;
}

.menu-item:hover, .menu-item:focus {
    color: #FFFFFF;
    text-shadow: 0 0 5px #FF6600;
    outline: none;
}

.menu-item.active {
    color: #FF6600;
    text-shadow: 0 0 5px #FFFFFF;
}

/* Menu hamburger pour mobile */
.menu-hamburger {
    display: none;
    background-color: #330000;
    color: #FF6600;
    border: 2px solid #FF6600;
    padding: 5px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8em;
    cursor: pointer;
    margin: 5px auto;
    width: 130px;
    text-align: center;
}

.menu-hamburger:hover {
    background-color: #550000;
}

/* -----------------------------------------------------
   5. FOOTER
   ----------------------------------------------------- */

footer {
    text-align: center;
    padding: 15px;
    margin-top: 30px;
    font-size: 0.7em;
    border-top: 1px solid #FF6600;
    background-color: #000000;
}

/* -----------------------------------------------------
   6. WALLET MINI   #time {
    background-color: #220000;
    padding: 5px 10px;
    border: 1px solid #ffffff;
    margin-top: 50px;
}
   ----------------------------------------------------- */

.wallet-mini {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 0.6em;
    background-color: #220000;
    padding: 5px 10px;
    border: 1px solid #ffffff;
    border-radius: 3px;
    height: 40px; /* Laisser la hauteur s'adapter aux éléments enfants */
}

.wallet-mini input {
    background-color: #151515;
    border: 1px solid #ffffff;
    color: #FFFFFF;
    padding: 6px 5px;
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1em;
    width: 250px;
    margin-right: 10px;
    height: 30px; /* Hauteur ajustée pour correspondre au bouton raccourci */
    box-sizing: border-box; /* Pour s'assurer que le padding ne s'ajoute pas à la hauteur */
}


.wallet-mini button {
    background-color: #ffffff;
    border: none;
    color: #000000;
    padding: 6px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1em;
    cursor: pointer;
    height: 30px; /* Même hauteur que le bouton raccourci */
    box-sizing: border-box; /* Pour s'assurer que le padding ne s'ajoute pas à la hauteur */
}

.wallet-mini button:hover {
    background-color: #FF6600;
}

#wallet-status-mini {
    margin-left: 10px;
    min-width: 10px;
    font-size: 0.9em;
}


/* ==========================================================================
   PARTIE 2: MODULES ET COMPOSANTS
   ========================================================================== */

/* -----------------------------------------------------
   1. MODULES
   ----------------------------------------------------- */

.module {
    margin-bottom: 30px;
    border: 1px solid #ffffff;
    padding: 15px;
    background-color: #000000;
}

.content-container .module {
    margin-bottom: 30px;
    border: 1px solid #ffffff !important;
    padding: 15px;
    background-color: #000000;
}

.module-header {
    background-color: #330000;
    color: #FF6600;
    padding: 10px;
    margin: -15px -15px 15px -15px;
    font-weight: bold;
    text-align: left;
    padding-left: 12px;
}

/* -----------------------------------------------------
   2. TABLEAUX
   ----------------------------------------------------- */

.retro-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    font-size: 0.85em;
    table-layout: fixed;
}

.retro-table th {
    background-color: #330000;
    color: #FF6600;
    text-align: left;
    padding: 8px;
    padding-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.retro-table tr:nth-child(odd) {
    background-color: #1A1A1A;
}

.retro-table tr:nth-child(even) {
    background-color: #222222;
}

.retro-table td {
    padding: 8px;
    border-bottom: 1px solid #333333;
    text-align: left;
    padding-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Largeurs spécifiques pour chaque colonne */
.retro-table th[data-col="team"],
.retro-table td:nth-child(1) {
    width: 25%; /* Colonne TEAMS */
}

.retro-table th[data-col="competition"],
.retro-table td:nth-child(2) {
    width: 30%; /* Colonne COMPETITIONS */
}

.retro-table th[data-col="ranking"],
.retro-table td:nth-child(3) {
    width: 15%; /* Colonne RANK - plus étroite */
}

.retro-table th[data-col="record"],
.retro-table td:nth-child(4) {
    width: 15%; /* Colonne RECORDS */
}

.retro-table th[data-col="form"],
.retro-table td:nth-child(5) {
    width: 15%; /* Colonne FORM */
}

/* Styles pour les résultats des matchs */
.retro-table .win {
    color: #00FF00;
}

.retro-table .loss {
    color: #ff0303;
}

.retro-table .draw {
    color: #009dff;
}

/* -----------------------------------------------------
   3. LOADING ET INDICATEURS
   ----------------------------------------------------- */

.loading {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading-indicator {
    text-align: center;
    padding: 20px;
    color: #FF6600;
    animation: blink 1s infinite;
}

.loading #teams-table {
    display: none;
}

.loaded #teams-loading {
    display: none;
}

/* -----------------------------------------------------
   4. FORMULAIRES ET CONTRÔLES
   ----------------------------------------------------- */

/* Sélecteur d'intervalle */
.interval-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    background-color: #220000;
    padding: 8px;
    border: 1px solid #ffffff;
}

.interval-button {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #FF6600;
    padding: 5px 10px;
    margin: 0 5px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7em;
    cursor: pointer;
}

.interval-button:hover {
    background-color: #330000;
}

.interval-button.active {
    background-color: #FF6600;
    color: #000000;
}

/* Boutons d'action */
.action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.rewards-button {
    background-color: #333333;
    color: #FF6600;
    border: 1px solid #FF6600;
    padding: 8px 15px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.rewards-button:hover {
    background-color: #FF6600;
    color: #000000;
}

.rewards-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* -----------------------------------------------------
   5. SYSTÈME DE CARTES
   ----------------------------------------------------- */

.card {
    background-color: #222;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin-bottom: 1rem;
}

.card-header {
    background: linear-gradient(to right, #550000, #330000);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
}

.card-header h3 {
    margin: 0;
    color: #FF6600;
    font-size: 1rem;
}

.card-body {
    padding: 1rem;
}

.card-footer {
    background-color: #1a1a1a;
    padding: 0.75rem 1rem;
    border-top: 1px solid #333;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

/* Badge system */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-league {
    background-color: #0066cc;
    color: white;
}

.badge-cup {
    background-color: #993399;
    color: white;
}

.badge-alert {
    background-color: #cc0000;
    color: white;
}

/* -----------------------------------------------------
   6. STATISTIQUES ET BOXES
   ----------------------------------------------------- */

.stat-box {
    background-color: #292929;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.stat-label {
    font-size: 0.7rem;
    color: #aaa;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 0.9rem;
    font-weight: bold;
}

.stat-value.positive {
    color: #00cc00;
}

.stat-value.negative {
    color: #ff6633;
}

.stat-value.neutral {
    color: #3399ff;
}

/* -----------------------------------------------------
   7. RÉSUMÉS ET SECTIONS
   ----------------------------------------------------- */

.global-summary {
    background: linear-gradient(to right, #330000, #440000);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #FF6600;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.summary-item {
    background-color: #222;
    padding: 0.75rem;
    border-radius: 0.25rem;
}

.summary-label {
    font-size: 0.7rem;
    color: #aaa;
    margin-bottom: 0.25rem;
}

.summary-value {
    font-size: 1rem;
    font-weight: bold;
}

.total-box {
    border: 2px solid #FF6600;
}

/* Sections de contenu */
.section {
    display: block;
    width: 100%;
}

.section.hidden {
    display: none;
}

/* Texte de placeholder pour les sections vides */
.placeholder-text {
    text-align: center;
    color: #666666;
    padding: 30px;
    font-style: italic;
}

/* ==========================================================================
   PARTIE 3: COMPOSANTS SPÉCIFIQUES
   ========================================================================== */

/* -----------------------------------------------------
   1. STYLES POUR LES COUPES ET TOURNOIS
   ----------------------------------------------------- */

/* Styles pour les lignes de coupe */
.cup-row {
    background-color: #111111 !important;
}

.cup-indicator {
    color: #FF6600 !important;
    font-size: 14px;
    text-align: center !important;
    padding-left: 20px !important;
}

/* Styles pour les différents stades de la coupe */
.cup-winner, 
.cup-final, 
.cup-semifinal, 
.cup-quarterfinal, 
.cup-group, 
.cup-pending {
    color: #FF6600 !important;
}

/* Assurez-vous que les lignes de coupe sont légèrement en retrait */
.cup-row td:first-child {
    padding-left: 15px;
}

/* S'assurer que l'indicateur de coupe (le point •) est orange */
.cup-indicator {
    color: #FF6600 !important;
}

/* S'assurer que le nom de la coupe est en orange */
.cup-row td:nth-child(2) {
    color: #FF6600 !important;
}

/* S'assurer que le stade de la coupe (Round of 16, etc.) est en orange */
.cup-row td:nth-child(3),
.cup-row td[colspan="4"] {
    color: #FF6600 !important;
}

/* Mise à jour pour les numéros de groupe */
.cup-group {
    color: white !important; /* Forcer la couleur blanche */
    text-align: left !important; /* Aligner le texte à gauche */
    padding-left: 12px !important; /* Respecter le padding existant */
}

/* Styles pour les résultats des matchs */
.form-letter {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: left;
    margin: 0 2px;
    font-weight: bold;
    border-radius: 2px;
}

.form-W {
    color: #00FF00;
    text-shadow: 0 0 2px #008800;
}

.form-D {
    color: #FFFFFF;
    text-shadow: 0 0 2px #888888;
}

.form-L {
    color: #FF6600;
    text-shadow: 0 0 2px #FF6600;
}

/* -----------------------------------------------------
   2. SYSTÈME DE RÉCOMPENSES
   ----------------------------------------------------- */

/* Styles pour les contrôles de la page rewards */
.rewards-controls {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Styles pour le résumé */
.rewards-summary {
    background-color: #220000;
    color: #00FF00;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #FF6600;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
}

/* Styles pour la table des rewards */
.table-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #333333;
    margin-bottom: 15px;
}

.rewards-modal td[data-type="club"],
.rewards-modal td[data-type="competition"] {
    cursor: pointer;
    text-decoration: underline;
    color: #FF6600;
}

.rewards-modal td[data-type="club"]:hover,
.rewards-modal td[data-type="competition"]:hover {
    color: #FFFFFF;
}

/* Style pour les lignes de résumé dans le tableau */
tr.summary-row {
    background-color: #330000 !important;
    color: #FFFFFF;
    font-weight: bold;
}

tr.summary-row td {
    border-top: 2px solid #FF6600;
    border-bottom: 2px solid #FF6600;
}

tr.empty-row {
    height: 10px;
    background-color: transparent !important;
}

tr.empty-row td {
    border: none;
}

tr.global-row {
    background-color: #660000 !important;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.1em;
}

tr.global-row td {
    border-top: 2px solid #FFFF00;
    border-bottom: 2px solid #FFFF00;
}

/* Styles pour les lignes de club supplémentaires */
.retro-table tr:not(.club-first-row):not(.summary-row):not(.empty-row):not(.global-row) td:first-child {
    border-right: none;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Amélioration des lignes de total */
.retro-table tr.summary-row td:nth-child(2) {
    font-weight: bold;
    color: #FF6600;
}

/* -----------------------------------------------------
   3. SYSTÈME DE PROGRESSION DES JOUEURS
   ----------------------------------------------------- */

/* Styles pour les progressions */
.gain-positive {
    color: #00FF00;
}

.gain-neutral {
    color: #FFFFFF;
}

.gain-negative {
    color: #FF6600;
}

/* Styles pour les détails des progressions */
.progression-detail {
    display: inline-block;
    margin-right: 5px;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 0.8em;
}

/* Couleurs par attribut */
.progression-pace {
    color: #FF5252;
    border-left: 2px solid #FF5252;
}

.progression-shooting {
    color: #4CAF50;
    border-left: 2px solid #4CAF50;
}

.progression-passing {
    color: #2196F3;
    border-left: 2px solid #2196F3;
}

.progression-dribbling {
    color: #FF9800;
    border-left: 2px solid #FF9800;
}

.progression-defense {
    color: #9C27B0;
    border-left: 2px solid #9C27B0;
}

.progression-physical {
    color: #607D8B;
    border-left: 2px solid #607D8B;
}

.progression-goalkeeping {
    color: #FFEB3B;
    border-left: 2px solid #FFEB3B;
}

.progression-overall {
    color: #FFFFFF;
    border-left: 2px solid #FFFFFF;
    font-weight: bold;
}

/* Conteneur pour les gains */
.gains-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Styles pour le gain OVR */
.ovr-gain {
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Styles pour le gain d'attributs */
.attr-gain {
    font-size: 0.85em;
    padding: 1px 4px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Renforcer la visibilité des gains positifs */
.ovr-gain.gain-positive {
    background-color: rgba(0, 100, 0, 0.3);
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}

.attr-gain.gain-positive {
    background-color: rgba(0, 100, 0, 0.2);
}

/* Styles pour la légende des attributs */
.attributes-legend {
    background-color: rgba(51, 0, 0, 0.7);
    border: 1px solid #FF6600;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 15px;
}

.legend-title {
    color: #FF6600;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.legend-items .progression-detail {
    margin: 3px;
    font-size: 0.75em;
    padding: 3px 6px;
}

/* Animation subtile pour attirer l'attention sur la légende */
@keyframes legend-highlight {
    0% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.2); }
    50% { box-shadow: 0 0 10px 3px rgba(255, 102, 0, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.2); }
}

.attributes-legend {
    animation: legend-highlight 3s ease-in-out 1;
}

/* -----------------------------------------------------
   4. MODALS ET POPUPS
   ----------------------------------------------------- */

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: auto;
}

.modal-content {
    background-color: #151515;
    margin: 5% auto;
    padding: 20px;
    border: 2px solid #FF6600;
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 10px #FF6600;
}

.close-modal {
    color: #FF6600;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover {
    color: #FFFFFF;
}

.details-content {
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    font-size: 12px;
    overflow-x: auto;
    padding: 10px;
    background-color: #222222;
    border: 1px solid #555555;
    color: #FFFFFF;
    height: 60vh;
    overflow-y: auto;
}

/* Coloration des textes spécifiques dans les détails */
.details-content .club-header {
    color: #FF6600;
    font-weight: bold;
}

.details-content .section-header {
    color: #00FFFF;
}

.details-content .positive {
    color: #00FF00;
}

.details-content .negative {
    color: #FF0000;
}

.details-content .summary {
    color: #FFFF00;
    font-weight: bold;
}

.details-content .separator {
    color: #666666;
}

/* Styles SweetAlert2 ultra-spécifiques */
.swal2-popup {
    background-color: #000000 !important;
    border: 3px solid #FF6600 !important;
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase !important;
}

.swal2-title {
    color: #FF6600 !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 1.2em !important;
}

.swal2-content {
    color: #FFFFFF !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 0.9em !important;
}

.swal2-confirm {
    background-color: #FF6600 !important;
    color: #000000 !important;
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase !important;
    border: none !important;
}

.swal2-confirm:hover {
    background-color: #FF8833 !important;
}

/* Style pour l'effet pixelisé */
.swal2-popup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 102, 0, 0.03),
        rgba(255, 102, 0, 0.03) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 1;
}


/* ==========================================================================
   PARTIE 4: MEDIA QUERIES ET RESPONSIVE DESIGN
   ========================================================================== */

/* -----------------------------------------------------
   1. ÉCRANS DE TAILLE MOYENNE (< 900px)
   ----------------------------------------------------- */

@media screen and (max-width: 900px) {
    /* Réduire l'espace occupé par le header */
    .content-container {
        margin-top: 200px;
    }
    
    /* Masquer l'horloge sur les écrans moyens et petits */
    #time {
        display: none;
    }
    
    /* Réduire la taille du logo */
    .logo {
        width: 120px;
        height: 120px;
    }
    
    /* Ajuster le menu */
    .main-menu {
        padding: 8px 10px;
        margin-top: 0;
    }
    
    .menu-item {
        font-size: 0.8em;
        margin: 3px 6px;
    }
}

/* -----------------------------------------------------
   2. ÉCRANS MOBILES PORTRAIT (< 768px)
   ----------------------------------------------------- */

@media screen and (max-width: 768px) {
    /* Conteneur principal */
    .content-container {
        margin-top: 180px;
    }
    
    /* Ajustements de l'en-tête */
    header {
        padding: 5px;
        flex-direction: column;
        align-items: center;
    }
    
    .logo {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
    
    .header-center {
        padding-top: 10px;
        margin-bottom: 0;
    }
    
    .title {
        font-size: 1.2em;
    }
    
    /* Afficher le bouton hamburger */
    .menu-hamburger {
        display: block;
    }
    
    /* Cacher le menu par défaut */
    .main-menu {
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 5px;
        position: absolute;
        width: 100%;
        background-color: #330000;
        z-index: 1001;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    }
    
    /* Afficher le menu quand la classe 'show' est ajoutée */
    .main-menu.show {
        display: flex;
    }
    
    /* Ajuster les containers */
    .container, .content-container .container {
        width: 98%;
        padding: 10px 5px;
        margin: 10px auto;
    }
    
    /* Ajuster le mini wallet */
    .wallet-mini {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .wallet-mini input {
        width: 150px;
        margin-bottom: 5px;
    }
    
    /* Ajuster les tableaux */
    .retro-table {
        font-size: 0.7em;
    }
    
    .retro-table th, .retro-table td {
        padding: 5px 3px;
        word-break: break-word;
    }
    
    /* Ajuster les boutons d'intervalle */
    .interval-button {
        font-size: 0.6em;
        padding: 4px 6px;
    }
    
    /* Optimiser l'affichage des détails de progression */
    .progression-detail {
        font-size: 0.7em;
        padding: 1px 3px;
        margin-right: 2px;
    }
    
    /* Ajuster les modules pour éviter les débordements */
    .module {
        padding: 10px;
        overflow: hidden;
    }
    
    .module-header {
        margin: -10px -10px 10px -10px;
        padding: 8px;
    }
    
    /* Réduire la taille globale du texte */
    body {
        font-size: 12px;
    }
    
    /* Adapter les légendes pour mobile */
    .legend-title {
        font-size: 0.8em;
    }
    
    .legend-items {
        gap: 4px;
    }
    
    .legend-items .progression-detail {
        font-size: 0.65em;
        padding: 2px 4px;
    }
    
    /* Styles pour le menu mobile */
    .main-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 999;
        padding: 10px 0;
        border-bottom: 2px solid #ff6600;
    }
    
    .main-menu.show {
        display: flex;
    }
    
    .main-menu a {
        padding: 15px;
        border-bottom: 1px solid #333;
        text-align: center;
    }
    
    .main-menu a:last-child {
        border-bottom: none;
    }
    
    /* Styles pour le dropdown manager */
    #manager-dropdown, #search-manager-input {
        font-size: 0.6em;
    }
    
    /* Ajustements pour la recherche manager */
    .wallet-mini {
        flex-direction: column;
        align-items: stretch;
    }
    
    .wallet-mini input, .wallet-mini button {
        width: 120%;
        margin: 5px 0;
    }
}

/* -----------------------------------------------------
   3. PETITS ÉCRANS MOBILES (< 480px)
   ----------------------------------------------------- */

@media screen and (max-width: 480px) {
    /* Réduire encore plus la marge supérieure */
    .content-container {
        margin-top: 160px;
    }
    
    /* Organisation en grille du header pour petits écrans */
    header {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "logo"
            "center";
        text-align: center;
        padding: 5px;
    }
    
    .logo {
        grid-area: logo;
        width: 80px;
        height: 80px;
    }
    
    .header-center {
        grid-area: center;
        width: 100%;
    }
    
    .title {
        font-size: 1em;
    }
    
    /* Optimiser le mini wallet pour très petits écrans */
    .wallet-mini {
        flex-direction: column;
        width: 90%;
        max-width: 250px;
        margin: 5px auto 0;
    }
    
    .wallet-mini input {
        width: 100%;
        font-size: 0.7em;
    }
    
    .wallet-mini button {
        margin-top: 5px;
    }
    
    /* Menu compact */
    .main-menu {
        justify-content: center;
    }
    
    .menu-item {
        font-size: 0.7em;
        margin: 2px 4px;
    }
    
    /* Tableaux très compacts */
    .retro-table {
        font-size: 0.58em;
    }
    
    .retro-table th,
    .retro-table td {
        padding: 4px 2px;
    }
    
    /* Ajuster les boutons d'action */
    .action-buttons {
        flex-direction: column;
        gap: 5px;
        align-items: center;
    }
    
    .rewards-button {
        width: 100%;
        max-width: 200px;
        margin-bottom: 5px;
    }
    
    /* Ajuster les gains et attributs */
    .gains-container {
        gap: 2px;
    }
    
    .ovr-gain, .attr-gain {
        font-size: 0.7em;
        padding: 1px 2px;
    }
    
    /* Réduire l'espacment dans le sélecteur d'intervalle */
    .interval-selector {
        flex-wrap: wrap;
        padding: 5px;
    }
    
    .interval-button {
        margin: 2px;
        font-size: 0.6em;
        padding: 3px 5px;
    }
    
    /* Réduire la taille des cartes */
    .card-header h3 {
        font-size: 0.8rem;
    }
    
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -----------------------------------------------------
   4. ORIENTATION PAYSAGE POUR LES TÉLÉPHONES
   ----------------------------------------------------- */

@media screen and (max-width: 900px) and (orientation: landscape) {
    /* Header plus compact */
    .content-container {
        margin-top: 130px;
    }
    
    header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        height: 70px;
        padding: 0 5px;
    }
    
    .logo {
        width: 60px;
        height: 60px;
        margin-right: 10px;
    }
    
    .header-center {
        padding-top: 0;
        margin: 0;
        align-items: flex-start;
    }
    
    .title {
        margin-bottom: 2px;
        font-size: 0.9em;
    }
    
    /* Wallet compact */
    .wallet-mini {
        margin-top: 3px;
    }
    
    /* Menu horizontal */
    .main-menu {
        padding: 3px 5px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        margin: 0;
    }
    
    .menu-item {
        flex-shrink: 0;
        font-size: 0.7em;
        white-space: nowrap;
        margin: 0 5px;
    }
    
    /* Modules avec scroll horizontal */
    .module {
        overflow-x: auto;
        padding: 10px;
    }
    
    .module-header {
        position: sticky;
        left: 0;
        margin: -10px -10px 10px -10px;
    }
    
    /* Tableaux avec scroll horizontal */
    .retro-table {
        min-width: 100%;
        white-space: nowrap;
    }
}

/* -----------------------------------------------------
   5. REGROUPEMENT D'ANIMATIONS ET TRANSITIONS
   ----------------------------------------------------- */

/* Animation fadeIn pour le dropdown manager */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#manager-dropdown {
    animation: fadeIn 0.2s;
}

#manager-dropdown .dropdown-item {
    transition: background-color 0.2s;
}

/* Transitions générales */
.menu-item, .rewards-button, .interval-button, .close-modal {
    transition: all 0.2s ease-in-out;
}

.card, .modal-content {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge, .stat-box, .progression-detail {
    transition: background-color 0.2s;
}

/* ==========================================================================
   PARTIE 5: VARIABLES CSS ET ORGANISATION
   ========================================================================== */

/* -----------------------------------------------------
   1. VARIABLES CSS (CUSTOM PROPERTIES)
   ----------------------------------------------------- */

:root {
    /* Couleurs principales */
    --color-background: #000000;
    --color-text: #FFFFFF;
    --color-accent: #FF6600;
    --color-accent-hover: #FF8833;
    --color-secondary: #330000;
    --color-secondary-dark: #220000;
    --color-secondary-light: #550000;
    
    /* Couleurs sémantiques */
    --color-positive: #00FF00;
    --color-negative: #FF0000;
    --color-neutral: #FFFFFF;
    --color-info: #00FFFF;
    --color-warning: #FFFF00;
    
    /* Couleurs de table */
    --color-table-row-odd: #1A1A1A;
    --color-table-row-even: #222222;
    --color-table-header: #330000;
    --color-table-border: #333333;
    
    /* Espacement */
    --spacing-xs: 3px;
    --spacing-sm: 5px;
    --spacing-md: 10px;
    --spacing-lg: 15px;
    --spacing-xl: 20px;
    --spacing-xxl: 30px;
    
    /* Typographie */
    --font-size-xs: 0.6em;
    --font-size-sm: 0.7em;
    --font-size-md: 0.85em;
    --font-size-lg: 1em;
    --font-size-xl: 1.2em;
    --font-size-xxl: 1.5em;
    
    /* Effets */
    --border-radius-sm: 2px;
    --border-radius-md: 3px;
    --border-radius-lg: 5px;
    --box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
    --transition-speed: 0.2s;
    
    /* Z-index */
    --z-index-base: 1;
    --z-index-header: 1000;
    --z-index-menu: 1001;
    --z-index-modal: 1100;
    --z-index-scanlines: 999;
}

/* -----------------------------------------------------
   2. COMMENT UTILISER LES VARIABLES CSS
   ----------------------------------------------------- */

/*
Ce fichier contient des variables CSS (custom properties) qui peuvent
être utilisées dans tout le projet pour maintenir une cohérence visuelle
et faciliter les modifications globales.

Exemple d'utilisation:

.element {
    background-color: var(--color-background);
    color: var(--color-text);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-speed) ease;
}

.element:hover {
    background-color: var(--color-accent);
}

Pour l'implémentation, vous pouvez remplacer les valeurs codées en dur
par les variables correspondantes progressivement dans tout le projet.
*/

/* -----------------------------------------------------
   3. INSTRUCTIONS D'ORGANISATION
   ----------------------------------------------------- */

/*
COMMENT STRUCTURER VOTRE CSS:

1. Incluez les 5 fichiers CSS dans votre HTML dans cet ordre:
   - styles-base.css (Partie 1)
   - styles-components.css (Partie 2)
   - styles-specific.css (Partie 3)
   - styles-responsive.css (Partie 4)
   - styles-variables.css (Partie 5)

2. Vous pouvez alternativement combiner tous les fichiers en un seul
   en conservant l'ordre des sections.

3. Pour ajouter de nouveaux styles:
   - Identifiez la section appropriée
   - Ajoutez vos styles en respectant le format existant
   - Commentez vos ajouts si nécessaire

4. Utilisez les variables CSS pour maintenir la cohérence
   
5. En cas de conflit de styles, ajoutez des spécificités plutôt
   que d'utiliser !important

6. Pour des composants complexes, créez des sous-sections dédiées
   avec des commentaires clairs
*/

/* -----------------------------------------------------
   4. MISE EN ŒUVRE PROGRESSIVE
   ----------------------------------------------------- */

/*
PLAN D'IMPLÉMENTATION:

Phase 1: Remplacer les couleurs par des variables
- Identifier toutes les couleurs principales
- Créer des variables pour chacune
- Remplacer les occurrences

Phase 2: Standardiser l'espacement
- Remplacer les marges et paddings par des variables
- Assurer la cohérence des espacements

Phase 3: Optimiser les media queries
- Créer des variables pour les breakpoints
- Standardiser les règles responsive

Phase 4: Nettoyer et optimiser
- Supprimer les styles redondants
- Vérifier la compatibilité navigateur
- Optimiser pour les performances
*/

/* -----------------------------------------------------
   5. ACCESSIBILITÉ ET PERFORMANCE
   ----------------------------------------------------- */

/*
BONNES PRATIQUES:

Accessibilité:
- Assurer un contraste suffisant pour le texte
- Utiliser des tailles de police relatives (em, rem)
- Prévoir des états focus visibles pour les éléments interactifs

Performance:
- Limiter l'utilisation des propriétés coûteuses (box-shadow, transforms)
- Préférer les transitions sur opacity et transform
- Éviter les animations sur des propriétés qui déclenchent des reflows
- Utiliser will-change avec parcimonie pour les animations complexes

Compatibilité:
- Tester sur différents navigateurs
- Fournir des fallbacks pour les fonctionnalités avancées
- Utiliser des préfixes vendeurs si nécessaire (via autoprefixer)
*/