body { font-family: 'Segoe UI', Tahoma, sans-serif; background:#0f1419; color:#e6e6e6; margin:0; }
.container { max-width:1200px; margin:auto; padding:20px; }
h1 { text-align:center; color:#f0c674; }
input { width: 100%; max-width: 100%; box-sizing: border-box; display: block; margin: 15px auto; padding: 10px; background: #1f2933; border: 1px solid #333; border-radius: 6px; color: #fff; font-size: 1rem; }

.group { margin-bottom:15px; background:#1b222c; border-radius:8px; overflow:hidden; }
.group-header { padding:12px 16px; background:#222b36; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; }
.group-header:hover { background:#2c3948; }
.group-header span { font-weight:bold; }
.group-content { display:none; padding:10px; }
.group.open .group-content { display:block; }

table { width:100%; border-collapse:collapse; margin-bottom:20px; }
th, td { padding:8px; border-bottom:1px solid #333; }
th { color:#f0c674; }
tr:hover { background:#243447; }
.favorite { cursor:pointer; text-align:center; }

#loaderOverlay { position:fixed; inset:0; background:rgba(15,20,25,0.95); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9999; }
#loaderOverlay.hidden { display:none; }
.spinner { width:60px; height:60px; border:6px solid #333; border-top:6px solid #f0c674; border-radius:50%; animation:spin 1s linear infinite; margin-bottom:15px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* NOUVEAU : fond rouge pour profit négatif */
.negative-profit { background:#8b0000 !important; color:#fff; }

/* IMAGE ITEM */
.item-cell { display:flex; align-items:center; gap:8px; }
.item-cell img { width:32px; height:32px; object-fit:contain; background:#1f2933; border:1px solid #333; border-radius:4px; }

/* PROGRESS BAR */
#progressBox { width:280px; margin-top:12px; text-align:center; font-size:13px; color:#e6e6e6; }
.progress { width:100%; height:8px; background:#1f2933; border:1px solid #333; border-radius:4px; overflow:hidden; }
.progress-bar { height:100%; width:0%; background:#f0c674; transition:width 0.25s linear; }

/* MESSAGE */
.progress-text { margin-top:6px; opacity:0.8; }

/* MINI-LOADER FIXE EN BAS-DROITE */
#miniLoader { position: fixed; bottom: 15px; right: 15px; padding: 8px 12px; background: rgba(15,20,25,0.85); border-radius: 25px; display: flex; align-items: center; gap: 8px; z-index: 9998; font-size: 0.85rem; color: #e6e6e6; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
#miniLoader .spinner-small { width: 18px; height: 18px; border: 3px solid #333; border-top: 3px solid #f0c674; border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; }
#miniLoader span { white-space: nowrap; } /* texte sur une seule ligne */
#miniLoader.hidden { display: none; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* LIGHTBOX */
#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; z-index: 1000; }
#lightbox img { max-width: 100%; max-height: 100%; border: 1px solid #fff; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.5); object-fit: contain; }
#lightbox span { position: absolute; top: 20px; right: 30px; font-size: 40px; color: #fff; cursor: pointer; z-index: 1001; }
.hidden { display: none !important; }

/* ======================== MOBILE FRIENDLY ======================== */
body { font-family: 'Segoe UI', Tahoma, sans-serif; background:#0f1419; color:#e6e6e6; margin:0; }
.container { max-width:1200px; margin:auto; padding:15px; }
h1 { text-align:center; color:#f0c674; font-size:1.5rem; }
input { width:100%; max-width:400px; display:block; margin:15px auto; padding:10px; background:#1f2933; border:1px solid #333; border-radius:6px; color:#fff; font-size:1rem; }

/* GROUPES */
.group { margin-bottom:15px; background:#1b222c; border-radius:8px; overflow:hidden; }
.group-header { padding:12px 16px; background:#222b36; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; font-size:0.95rem; }
.group-header:hover { background:#2c3948; }
.group-header span { font-weight:bold; }
.group-content { display:none; padding:10px; overflow-x:auto; } /* scroll horizontal pour mobile */
.group.open .group-content { display:block; }

/* TABLEAUX */
table { width:100%; border-collapse:collapse; margin-bottom:20px; font-size:0.85rem; min-width:800px; } /* min-width pour scroll sur mobile */
th, td { padding:6px; border-bottom:1px solid #333; text-align:left; }
th { color:#f0c674; }
tr:hover { background:#243447; }
.favorite { cursor:pointer; text-align:center; }

/* LOADER */
#loaderOverlay { position:fixed; inset:0; background:rgba(15,20,25,0.95); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9999; }
#loaderOverlay.hidden { display:none; }
.spinner { width:50px; height:50px; border:5px solid #333; border-top:5px solid #f0c674; border-radius:50%; animation:spin 1s linear infinite; margin-bottom:15px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* PROFIT NEGATIF */
.negative-profit { background:#8b0000 !important; color:#fff; }

/* IMAGE ITEM */
.item-cell { display:flex; align-items:center; gap:6px; }
.item-cell img { width:28px; height:28px; object-fit:contain; background:#1f2933; border:1px solid #333; border-radius:4px; }

/* PROGRESS BAR */
#progressBox { width:90%; max-width:280px; margin-top:12px; text-align:center; font-size:13px; color:#e6e6e6; }
.progress { width:100%; height:8px; background:#1f2933; border:1px solid #333; border-radius:4px; overflow:hidden; }
.progress-bar { height:100%; width:0%; background:#f0c674; transition:width 0.25s linear; }

/* MESSAGE */
.progress-text { margin-top:6px; opacity:0.8; }

/* MEDIA QUERIES POUR PETITS ECRANS */
@media (max-width:768px) {
  h1 { font-size:1.3rem; }
  table { font-size:0.75rem; }
  th, td { padding:4px; }
  .item-cell img { width:24px; height:24px; }
}
@media (max-width:480px) {
  h1 { font-size:1.1rem; }
  table { font-size:0.7rem; min-width:700px; } /* toujours scrollable */
  .item-cell img { width:20px; height:20px; }
}