/* Panier, paiement et confirmation.
   À charger APRÈS style.css et categories.css */

.page-paiement {
  width: 100%;
}

.page-paiement h3 {
  margin: 0 0 2vh;
  font-size: 1.1rem;
}

.sr {
  position: absolute;
  left: -9999px;
}

/* Messages */
.msg {
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  margin-bottom: 2vh;
  font-size: 0.85rem;
  line-height: 1.5;
}

.msg.ok {
  background: #e3f5ec;
  color: #14573f;
}

.msg.ko {
  background: #fdeaea;
  color: #8f1d1d;
}

/* Grille panier + récapitulatif */
.panier-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3vw;
  align-items: start;
  margin-bottom: 3vh;
}

.panier-lignes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ligne-panier {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  background: #2b2b2b;
  border-radius: 12px;
  padding: 14px;
}

.ligne-resume {
  grid-template-columns: 90px minmax(0, 1fr) auto;
}

.ligne-image {
  display: block;
  width: 90px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: #424242;
}

.ligne-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ligne-infos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ligne-titre {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

a.ligne-titre:hover {
  text-decoration: underline;
}

.ligne-detail {
  color: #bdbdbd;
  font-size: 0.78rem;
}

.ligne-qte {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}

.ligne-qte input[type="number"] {
  width: 4.2em;
  padding: 8px;
  font-family: inherit;
  color: #ffffff;
  background: #424242;
  border: 1px solid #616161;
  border-radius: 8px;
}

.ligne-fin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.btn-petit {
  font-family: inherit;
  font-size: 0.75rem;
  color: #ffffff;
  background: #616161;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}

.btn-petit:hover {
  background: #757575;
}

.lien-bouton {
  font-family: inherit;
  font-size: 0.78rem;
  color: #bdbdbd;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

.lien-bouton:hover {
  color: #ffffff;
}

/* Récapitulatif */
.resume {
  background: #2b2b2b;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resume-ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.85rem;
}

.resume-ligne.total {
  font-size: 1.1rem;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-large {
  width: 100%;
  text-align: center;
}

button.btn-orange {
  border: none;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.lien-discret {
  color: #bdbdbd;
  font-size: 0.8rem;
  text-align: center;
  text-decoration: none;
}

.lien-discret:hover {
  color: #ffffff;
}

/* Choix du moyen de paiement */
.moyens {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.moyen {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #616161;
  border-radius: 10px;
  cursor: pointer;
}

.moyen:has(input:checked) {
  border-color: #eb7e25;
  background: rgba(235, 126, 37, 0.1);
}

.moyen input {
  margin-top: 4px;
  accent-color: #eb7e25;
}

.moyen span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

.moyen small {
  color: #bdbdbd;
  font-size: 0.72rem;
  line-height: 1.4;
}

.note-securite {
  margin: 0;
  color: #bdbdbd;
  font-size: 0.72rem;
  text-align: center;
}

/* Confirmation */
.confirmation {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 3vh;
}

/* Bouton « Ajouter au panier » de jeu.php */
.form-panier {
  flex: 1;
  display: flex;
  margin: 0;
}

.form-panier .btn-panier {
  width: 100%;
}

/* Tableau admin des commandes */
.table-commandes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.table-commandes th,
.table-commandes td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  vertical-align: top;
}

.statut {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.statut.payee { background: #e3f5ec; color: #14573f; }
.statut.en_attente { background: #fff3cd; color: #7a5b00; }
.statut.annulee,
.statut.echouee { background: #fdeaea; color: #8f1d1d; }

@media (max-width: 800px) {
  .panier-grille {
    grid-template-columns: 1fr;
  }

  .ligne-panier {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .ligne-image {
    width: 70px;
  }
}

/* Formulaire d'adresse de livraison (checkout.php) */
.form-adresse {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #2b2b2b;
  border-radius: 12px;
  padding: 18px;
}

.form-adresse label {
  margin-top: 8px;
  font-size: 0.78rem;
  color: #bdbdbd;
}

.form-adresse input,
.form-adresse select {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  color: #ffffff;
  background: #424242;
  border: 1px solid #616161;
  border-radius: 8px;
}

.form-adresse input:focus,
.form-adresse select:focus {
  border-color: #eb7e25;
  outline: none;
}

.ligne-form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

/* ---------- Livraison et suivi ---------- */
.bandeau-statut {
  background: rgba(235, 126, 37, 0.15);
  border: 1px solid #eb7e25;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 3vh;
  font-weight: 700;
}

.timeline {
  list-style: none;
  margin: 0 0 3vh;
  padding: 0;
}

.etape {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 22px;
  color: #8a8a8a;
}

.etape::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: #424242;
}

.etape:last-child { padding-bottom: 0; }
.etape:last-child::before { display: none; }
.etape.fait::before,
.etape.courante::before { background: #5bd75b; }

.etape strong { display: block; font-size: 0.95rem; }
.etape small { color: #bdbdbd; font-size: 0.75rem; }

.etape.fait,
.etape.courante { color: #ffffff; }

.pastille-etape {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #616161;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 900;
}

.etape.fait .pastille-etape { background: #5bd75b; border-color: #5bd75b; color: #212121; }
.etape.courante .pastille-etape { background: #eb7e25; border-color: #eb7e25; color: #ffffff; }

.suivi-colis {
  background: #2b2b2b;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.suivi-colis p { margin: 0; font-size: 0.85rem; }
.suivi-colis .numero { letter-spacing: 0.05em; word-break: break-all; }

/* Liste des commandes du client */
.liste-commandes { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.carte-commande {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #2b2b2b;
  border-radius: 12px;
  padding: 16px 18px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s;
}

.carte-commande:hover { background: #333333; }
.carte-commande > div { display: flex; flex-direction: column; gap: 6px; }
.carte-commande-fin { align-items: flex-end; text-align: right; }

/* Pastilles d'état (client et admin) */
.etat {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #424242;
  color: #ffffff;
}

.etat.a_preparer, .etat.en_preparation, .etat.en_attente { background: #fff3cd; color: #7a5b00; }
.etat.expediee, .etat.prete_retrait { background: #d6e9ff; color: #0b3d75; }
.etat.livree, .etat.retiree { background: #e3f5ec; color: #14573f; }
.etat.annulee, .etat.echouee { background: #fdeaea; color: #8f1d1d; }

/* Administration des livraisons */
.outils-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 1vh 0 3vh;
}

.outils-admin form { margin: 0; }
a.btn-petit { text-decoration: none; display: inline-block; }

.commande-admin {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  background: #2b2b2b;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  width: 100%;
}

.commande-admin h3 { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; }
.commande-admin p { margin: 6px 0; font-size: 0.85rem; }
.articles-admin { margin: 8px 0; padding-left: 18px; font-size: 0.85rem; }
.adresse-admin { color: #ffffff; line-height: 1.5; }

.commande-form { display: flex; flex-direction: column; gap: 10px; }
.commande-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: #bdbdbd; }
.champs-colis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.commande-form select,
.commande-form input[type="text"] {
  width: 100%;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  color: #ffffff;
  background: #424242;
  border: 1px solid #616161;
  border-radius: 8px;
}

.commande-form button { align-self: flex-start; }

@media (max-width: 800px) {
  .commande-admin { grid-template-columns: 1fr; }
  .carte-commande { flex-direction: column; align-items: flex-start; }
  .carte-commande-fin { align-items: flex-start; text-align: left; }
}


/* Boutons pleine largeur : style.css (chargé après) impose « width: fit-content » à .btn-orange,
   d'où le sélecteur plus précis */
.btn-orange.btn-large {
  width: 100%;
  text-align: center;
}

/* =====================================================================
   RESPONSIVE - panier, paiement, suivi, adresse
   ===================================================================== */
@media (max-width: 1000px) {
  .panier-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .confirmation {
    max-width: none;
  }
}

@media (max-width: 800px) {
  /* Ligne du panier : image + infos, puis quantité + prix */
  .ligne-panier:not(.ligne-resume) {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "img infos"
      "qte fin";
    gap: 12px 14px;
  }

  .ligne-panier:not(.ligne-resume) .ligne-image { grid-area: img; }
  .ligne-panier:not(.ligne-resume) .ligne-infos { grid-area: infos; }
  .ligne-panier:not(.ligne-resume) .ligne-qte { grid-area: qte; }

  .ligne-panier:not(.ligne-resume) .ligne-fin {
    grid-area: fin;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
  }

  /* Récapitulatif de commande (paiement) : image, infos, prix */
  .ligne-resume {
    grid-template-columns: 72px minmax(0, 1fr) auto;
  }

  .ligne-image {
    width: 72px;
  }
}

@media (max-width: 600px) {
  .page-paiement h3 {
    font-size: 1rem;
  }

  .resume {
    padding: 18px;
  }

  .ligne-panier {
    padding: 12px;
  }

  .ligne-form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 16px minimum : évite le zoom automatique des champs sur iPhone */
  .form-adresse input,
  .form-adresse select,
  .ligne-qte input[type="number"] {
    font-size: 1rem;
  }

  .form-adresse {
    padding: 14px;
  }

  .btn-petit {
    min-height: 40px;
    padding: 10px 14px;
  }

  .msg {
    font-size: 0.82rem;
  }

  .carte-commande {
    padding: 14px;
  }

  .bandeau-statut {
    padding: 12px 14px;
    font-size: 0.9rem;
  }

  .suivi-colis .btn-orange {
    width: 100%;
    text-align: center;
  }

  .moyen {
    padding: 12px;
  }
}