/* 📱 Optimisation mobile EasyPOS */
@media (max-width: 768px) {
  header img {
    height: 4rem !important; /* logo plus petit sur mobile */
  }
  header .container {
    flex-direction: column;
    gap: .5rem;
  }
  .text-lg {
    font-size: 1rem !important;
  }
  .text-2xl {
    font-size: 1.25rem !important;
  }
  .text-xl {
    font-size: 1.125rem !important;
  }
  main.container {
    padding: 1rem !important;
  }
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important; /* les deux terminaux s’empilent */
  }
  .card {
    margin-bottom: 1rem !important;
  }
  button#btn-checkout {
    font-size: 1.125rem !important;
    padding: 1rem !important;
  }
  footer {
    font-size: .875rem !important;
  }
}

/* ✅ Correction contraste boutons Achat/Location */
.tab { transition: all 0.2s ease-in-out; }
.tab:not(.bg-\[color\:var\(--brand\)\]) { color: #1f4bc9 !important; border-color: #1f4bc9 !important; }
.tab.bg-\[color\:var\(--brand\)\] { color: white !important; }

/* ✅ Correctif visibilité boutons Achat / Location */
#tab-location {
  color: #1f4bc9 !important; /* texte bleu lisible */
  border-color: #1f4bc9 !important;
}
#tab-achat {
  color: white !important;
}
#tab-location.bg-\[color\:var\(--brand\)\],
#tab-achat.bg-\[color\:var\(--brand\)\] {
  color: white !important; /* quand sélectionné → texte blanc */
}

/* ✅ Correctif global des boutons Achat / Location */
#tab-achat, #tab-location {
  display: inline-block !important;
  color: #1f4bc9 !important;          /* texte bleu par défaut */
  background-color: white !important; /* fond blanc par défaut */
  border: 2px solid #1f4bc9 !important;
  border-radius: 0.75rem !important;
  min-width: 120px;
  text-align: center;
  transition: all 0.2s ease-in-out;
}
#tab-achat.bg-\[color\:var\(--brand\)\],
#tab-location.bg-\[color\:var\(--brand\)\] {
  background-color: #1f4bc9 !important; /* fond bleu actif */
  color: white !important;              /* texte blanc actif */
  border-color: #1f4bc9 !important;
}

/* 💫 Effet hover / focus pour boutons d'onglets */
.tab { transition: all .2s ease-in-out; }
@media (hover:hover){
  #tab-achat:hover, #tab-location:hover {
    filter: brightness(0.97);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(31,75,201,.12);
  }
}
.tab:active { transform: translateY(0); }

/* ✅ Contraste & états actifs déjà gérés plus haut */