/* =========================================================
   DECOFER — boutique.css
   Styles additionnels pour le panier, le tunnel de commande,
   la confirmation et le suivi de devis. Complète style.css
   (variables de couleurs, .btn, .form, .section déjà définies).
   ========================================================= */

.boutique-page {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.2rem 4rem;
}
.boutique-page h1 { margin-bottom: 1.6rem; }
.boutique-subtitle { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 1rem; color: var(--noir); }
.boutique-subtitle em { font-style: normal; color: var(--braise); }
.boutique-lead { margin-bottom: 1.2rem; color: var(--gris); }
.boutique-back-link { margin-top: 1.4rem; margin-bottom: 0; }

/* ---------- Lignes du panier ---------- */
.panier-liste { display: grid; gap: .9rem; margin-bottom: 1.6rem; }
.panier-row {
  display: grid;
  grid-template-columns: 76px 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  background: var(--acier);
  border: 1px solid var(--fumee);
  border-radius: var(--radius);
  padding: .8rem 1rem;
}
.panier-thumb { width: 76px; height: 60px; object-fit: cover; border-radius: calc(var(--radius) - 4px); background: var(--fumee); }
.panier-info { min-width: 0; }
.panier-titre { font-weight: 600; color: var(--noir); }
.panier-prix-unit { color: var(--gris); font-size: .85rem; margin-top: .2rem; }
.panier-qte { display: flex; align-items: center; gap: .5rem; }
.qte-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--fumee);
  background: var(--fond);
  color: var(--noir);
  cursor: pointer;
  font-size: 1rem;
}
.qte-btn:hover { border-color: var(--braise); color: var(--braise); }
.panier-sous-total { color: var(--accent); font-weight: 700; white-space: nowrap; }
.panier-retirer {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--gris);
}
.panier-retirer:hover { color: #c0392b; }

.panier-vide { color: var(--gris); text-align: center; padding: 3rem 1rem; }

.panier-recap {
  border-top: 1px solid var(--fumee);
  padding-top: 1.4rem;
  margin-top: 1.4rem;
}
.panier-total-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 1.6rem;
}
.panier-total-ligne strong { color: var(--accent); }

/* ---------- Choix du mode de paiement ---------- */
.mode-paiement { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
.mode-paiement-option {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  border: 1px solid var(--fumee);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  cursor: pointer;
}
.mode-paiement-option:has(input:checked) { border-color: var(--braise); }
.mode-paiement-option input { margin-top: .3rem; accent-color: var(--braise); }
.mode-paiement-option .mode-paiement-label { font-weight: 600; color: var(--noir); display: block; }
.mode-paiement-option .mode-paiement-hint { color: var(--gris); font-size: .85rem; }

/* ---------- Confirmation ---------- */
.confirmation-box {
  background: var(--acier);
  border: 1px solid var(--fumee);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  line-height: 1.7;
}
.confirmation-statut {
  display: inline-block;
  background: var(--braise);
  color: var(--blanc);
  font-weight: 700;
  padding: .3rem .9rem;
  border-radius: 999px;
  margin-bottom: .8rem;
}

/* ---------- Suivi de devis ---------- */
.suivi-box { line-height: 1.7; }
.suivi-box h2 { margin-bottom: .8rem; }
.devis-statut {
  display: inline-block;
  background: var(--fumee);
  color: var(--accent);
  font-weight: 600;
  padding: .25rem .8rem;
  border-radius: 999px;
  margin-bottom: .8rem;
}
.devis-reponse {
  background: var(--acier);
  border: 1px solid var(--fumee);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin-top: 1rem;
}
.devis-montant {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: .5rem;
}
.suivi-actions { margin-top: 1.6rem; display: grid; gap: 1rem; max-width: 480px; }
.suivi-refuser { justify-self: start; }

#suivi-email-form.form { max-width: 480px; }

@media (max-width: 640px) {
  .panier-row { grid-template-columns: 60px 1fr auto; }
  .panier-thumb { width: 60px; height: 50px; }
  .panier-qte, .panier-sous-total { grid-column: 2 / 4; }
}