body { font-family: Arial, sans-serif; margin:0; padding:0; }
header { background:#007BFF;color:#fff;text-align:center;padding:1rem; display:flex;justify-content:space-between;align-items:center;}
header h1 { margin:0; font-size:1.25rem; flex:1 }
.auth-buttons { margin-left:auto; padding-right:1rem; }
.auth-buttons button { margin-left:.5rem; padding:.4rem .7rem; cursor:pointer; border:none; border-radius:4px }
.login { background: #28a745; color: white }
.logout { background: #dc3545; color: white }
.recharge {background: #2007ff;color:  white}
.recharge:hover {background: #e0a800;}
.balance {background: #2007ff;color: #fff;}
.balance:hover { background: #e0a800; }
main { padding:2rem; text-align:center; margin-bottom: 2rem; /* laisse de la place pour footer */ }
/* footer { background:#f8f9fa;text-align:center;padding:1rem; position:fixed; width:100%; bottom:0; } */
footer {text-align:center; background:#b7d5f3; padding: 0.5rem; font-size:0.9rem;}
.upload-container { border:2px dashed #ccc;padding:2rem;margin:1rem auto; max-width:500px; }
#imagePreview { margin-top:1rem; max-width:100%; max-height:300px; display:none }
.real { color: green; font-weight: bold; font-size: 24px; }
.fake { color: red; font-weight: bold; font-size: 24px; }
.warning-message { color:#FF0000;font-style:italic;font-size:.8rem;margin-top:1rem; }
.button-container { display:flex; justify-content:space-between; margin-top:1rem; }
.real { color: green; font-weight: bold; }
.fake { color: red; font-weight: bold; }
.heatmap-container {margin-top: 1rem; text-align: center;}

#historySection {
  border-top: 2px solid #ddd;
  padding-top: 2rem;
  text-align: center;
}

.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 250px)); /* largeur fixe max 250px */
  justify-content: center;  /* centre la grille */
  gap: 1rem;
  margin: 1rem auto 0;      /* centre horizontalement avec auto */
}


.history-card {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 0.5rem;
  text-align: center;
  background-color: #fafafa;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.history-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

.history-card p {
  margin: 0.3rem 0;
  font-size: 0.9rem;
}

.history-card .model-name {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 1.1em;
  color: #0a84ff;
  font-weight: 600;
  text-transform: uppercase;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 1rem;
}

.pagination button {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.pagination button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

#loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}

.spinner {
  border: 5px solid #f3f3f3; /* gris clair */
  border-top: 5px solid #007bff; /* bleu */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 0.5rem;
}

.loading-text {
  color: #555;
  font-size: 0.95rem;
  margin-top: 0.8rem;
  text-align: center;
}

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


/* --- Cartes des modèles (amélioré) --- */
.model-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5rem 1.8rem;
  max-width: 550px;
  margin: 2rem auto;               /* ← espace entre les cartes */
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}
.model-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.model-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.resnet-title { color: #007bff; }
.patchcore-title { color: #28a745; }
.anomalib-title { color: #ff9800; }

.model-content p {
  margin: 0.4rem 0;
  font-size: 1rem;
}

/* --- Texte principal (Prédiction / Label) --- */
.model-content p:first-child span,
.model-content p[style] {
  font-weight: bold;
  font-size: 1.2rem;         /* ← même taille que "✓ REAL" */
}

/* --- Espacement interne des blocs --- */
.resnet-proba, .heatmap-container {
  margin-top: 0.8rem;
}

.heatmap-img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-top: 0.6rem;
}


/*--- Styles pour les labels principaux --- */
.main-label {
  font-weight: 600;
  font-size: 1.2rem;     /* même taille pour les trois modèles */
  margin-bottom: 0.4rem;
}
.main-label span.real {
  color: green;
  font-weight: 700;
}
.main-label span.fake {
  color: red;
  font-weight: 700;
}


/* Modale solde */
.balance-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.balance-content {
  background: #fff;
  color: #333;
  padding: 30px 50px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  animation: zoomIn 0.25s ease;
}

.balance-content h2 {
  margin-top: 0;
  color: #2c3e50;
  font-size: 1.4rem;
  font-weight: 600;
}

.balance-content .amount {
  font-size: 3rem;
  font-weight: bold;
  color: #27ae60;
  margin: 15px 0;
}

.balance-content .expiry {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 25px;
}

.close-btn {
  background: #3498db;
  border: none;
  color: #fff;
  padding: 10px 25px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}

.close-btn:hover {
  background: #2980b9;
}

@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}




/* Responsive Design */
@media screen and (max-width: 480px) {
  footer {
    font-size: 0.8rem;
    padding: 0.5rem;
    text-align: center;
  }
}