/* pz-commander.css — Flux de commande en ligne (commander.php). Thème four, mobile-first. */

/* La page commande vit dans le thème FOUR (sombre, séduction). Le fond sombre vient
   de la classe canonique .pz-scene-dark (sur la <section>), pas d'un override maison.
   ATTENTION : dans pz-theme.css les tokens --pz-bg-section / --pz-cream sont CLAIRS
   (ivoire). On REMAPPE donc localement, sous .pz-cmd, les surfaces/textes vers les
   tokens INK (sombres) pour que les cartes du flux (panier/checkout/suivi) soient
   four et contrastées. Un seul endroit à régler. */
.pz-cmd {
  --pz-bg-section: var(--pz-ink-2);   /* surfaces cartes -> noir chaud */
  --pz-bg-darker:  var(--pz-ink-3);   /* champs / pastilles -> noir café */
  --pz-cream:      var(--pz-ivory);   /* "cream" utilisé comme TEXTE -> ivoire clair */
  --pz-border:     rgba(201, 161, 74, 0.18);
  --pz-border-light: rgba(237, 224, 196, 0.16);
  --pz-text-light:   #cdb5a0;
  --pz-text-lighter: #9c9081;
}
/* Contenu au-dessus du glow .pz-scene-dark::before */
.pz-cmd__section > .container { position: relative; z-index: 1; }
.pz-cmd__section { padding-top: 2rem; padding-bottom: 3rem; }
.pz-cmd__wrap { max-width: 1100px; }
.pz-cmd__h2 {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--pz-cream);
  margin: 0 0 1rem;
}
.pz-cmd__lead { color: var(--pz-text-light); margin: 0 0 1.5rem; line-height: 1.6; }

/* ── Robinet fermé (silence à 0, jamais d'erreur brute) ───────────── */
.pz-cmd__closed {
  text-align: center; max-width: 520px; margin: 3rem auto; padding: 2.5rem 1.5rem;
  background: var(--pz-bg-section); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg);
}
.pz-cmd__closed-icon { font-size: 3rem; opacity: .85; margin-bottom: .5rem; }
.pz-cmd__closed-title { font-family: 'Playfair Display', serif; color: var(--pz-cream); font-size: 1.4rem; margin: 0 0 .75rem; }
.pz-cmd__closed-sub { color: var(--pz-text-light); line-height: 1.6; margin: 0 0 1.5rem; }

/* ── Grille panier ────────────────────────────────────────────────── */
.pz-cmd__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.pz-cmd__menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pz-cmd__remaining {
  font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--pz-gold); background: var(--pz-gold-glow); padding: .25rem .7rem; border-radius: 999px;
}

.pz-cmd__pizzas { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.pz-cmd-pizza {
  display: flex; gap: 1rem; padding: .85rem; background: var(--pz-bg-section);
  border: 1px solid var(--pz-border); border-radius: var(--pz-radius-md);
  transition: border-color .2s ease, transform .15s ease;
}
.pz-cmd-pizza:hover { border-color: var(--pz-gold-dark); }
.pz-cmd-pizza.is-moment { border-color: var(--pz-gold); box-shadow: var(--pz-shadow-gold); }
.pz-cmd-pizza__img {
  width: 76px; height: 76px; flex: 0 0 76px; object-fit: cover; border-radius: var(--pz-radius-sm);
  background: var(--pz-bg-darker);
}
.pz-cmd-pizza__img--none { display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.pz-cmd-pizza__body { flex: 1; min-width: 0; }
.pz-cmd-pizza__name { font-weight: 700; color: var(--pz-cream); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pz-cmd-pizza__tag {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pz-bg-darker); background: var(--pz-gold); padding: .12rem .5rem; border-radius: 999px;
}
.pz-cmd-pizza__ingr { font-size: .82rem; color: var(--pz-text-light); margin: .25rem 0 .6rem; line-height: 1.4; }
.pz-cmd-pizza__sizes { display: flex; gap: .5rem; flex-wrap: wrap; }
.pz-cmd-pizza__add {
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--pz-cream);
  background: var(--pz-bg-darker); border: 1px solid var(--pz-border-light);
  padding: .45rem .8rem; border-radius: 999px; transition: all .15s ease;
}
.pz-cmd-pizza__add span { color: var(--pz-gold); font-weight: 700; }
.pz-cmd-pizza__add:hover { background: var(--pz-red); border-color: var(--pz-red); transform: translateY(-1px); }
.pz-cmd-pizza__add:hover span { color: var(--pz-cream); }
.pz-cmd-pizza__add:active { transform: scale(.96); }

/* ── Panier ───────────────────────────────────────────────────────── */
.pz-cmd__cart {
  background: var(--pz-bg-section); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg); padding: 1.25rem;
}
.pz-cmd__cart.is-pulse { animation: pzCartPulse .4s ease; }
@keyframes pzCartPulse { 0% { box-shadow: 0 0 0 0 var(--pz-gold-glow); } 100% { box-shadow: 0 0 0 12px transparent; } }
.pz-cmd__cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pz-cmd__cart-line { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: center; }
.pz-cmd__cart-info { display: flex; flex-direction: column; min-width: 0; }
.pz-cmd__cart-name { color: var(--pz-cream); font-weight: 600; font-size: .9rem; }
.pz-cmd__cart-size { font-size: .72rem; color: var(--pz-text-lighter); text-transform: uppercase; letter-spacing: .03em; }
.pz-cmd__cart-price { color: var(--pz-gold); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.pz-cmd__qty { display: inline-flex; align-items: center; gap: .35rem; }
.pz-cmd__qty button {
  cursor: pointer; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--pz-border-light);
  background: var(--pz-bg-darker); color: var(--pz-cream); font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.pz-cmd__qty button:hover { background: var(--pz-red); border-color: var(--pz-red); }
.pz-cmd__qty span { min-width: 1.2rem; text-align: center; color: var(--pz-cream); font-weight: 600; }
.pz-cmd__cart-empty { color: var(--pz-text-lighter); font-size: .88rem; padding: .5rem 0 1rem; text-align: center; }
.pz-cmd__cart-foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pz-border); }
.pz-cmd__cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .9rem; }
.pz-cmd__cart-total span { color: var(--pz-text-light); }
.pz-cmd__cart-total strong { color: var(--pz-gold); font-size: 1.35rem; font-family: 'Playfair Display', serif; }
.pz-cmd__validate { width: 100%; }
.pz-cmd__validate:disabled { opacity: .45; cursor: not-allowed; }

/* Desktop : panier en colonne sticky à droite */
@media (min-width: 860px) {
  .pz-cmd__grid { grid-template-columns: 1fr 340px; align-items: start; }
  .pz-cmd__cart { position: sticky; top: 90px; }
}

/* ── Écrans auth / profil / checkout ──────────────────────────────── */
.pz-cmd__screen { animation: pzFade .3s ease; }
@keyframes pzFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pz-cmd__back {
  cursor: pointer; background: none; border: none; color: var(--pz-text-light);
  font: inherit; font-size: .9rem; padding: 0; margin-bottom: 1.25rem;
}
.pz-cmd__back:hover { color: var(--pz-gold); }
.pz-cmd__tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.pz-cmd__tab {
  cursor: pointer; flex: 1; font: inherit; font-weight: 600; color: var(--pz-text-light);
  background: var(--pz-bg-section); border: 1px solid var(--pz-border);
  padding: .7rem; border-radius: var(--pz-radius-sm); transition: all .15s ease;
}
.pz-cmd__tab.is-on { color: var(--pz-bg-darker); background: var(--pz-gold); border-color: var(--pz-gold); }

.pz-cmd__form { max-width: 460px; display: grid; gap: 1rem; }
.pz-cmd__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pz-cmd__form label { display: flex; flex-direction: column; gap: .35rem; color: var(--pz-text-light); font-size: .88rem; }
.pz-cmd__form input[type="email"], .pz-cmd__form input[type="password"],
.pz-cmd__form input[type="text"], .pz-cmd__form input[type="tel"] {
  font: inherit; padding: .7rem .85rem; border-radius: var(--pz-radius-sm);
  border: 1px solid var(--pz-border-light); background: var(--pz-bg-darker); color: var(--pz-cream);
}
.pz-cmd__form input:focus { outline: none; border-color: var(--pz-gold); }
.pz-cmd__check { flex-direction: row !important; align-items: center; gap: .5rem; cursor: pointer; }
.pz-cmd__check input { width: auto; }
.pz-cmd__form-err {
  color: var(--pz-cream); background: var(--pz-red-dark); border: 1px solid var(--pz-red);
  padding: .6rem .85rem; border-radius: var(--pz-radius-sm); font-size: .88rem;
}

/* Wizard étapes profil */
.pz-cmd__step {
  background: var(--pz-bg-section); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-md); padding: 1.1rem;
}
.pz-cmd__step-title { font-weight: 700; color: var(--pz-cream); margin-bottom: .35rem; }
.pz-cmd__step-sub { font-size: .85rem; color: var(--pz-text-light); margin: 0 0 .8rem; line-height: 1.5; }
.pz-cmd__step input[type="tel"] {
  font: inherit; width: 100%; padding: .7rem .85rem; border-radius: var(--pz-radius-sm);
  border: 1px solid var(--pz-border-light); background: var(--pz-bg-darker); color: var(--pz-cream);
}
.pz-cmd__photo { cursor: pointer; display: flex; align-items: center; gap: 1rem; }
.pz-cmd__photo-preview {
  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; background: var(--pz-bg-darker) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 2px dashed var(--pz-border-light);
}
.pz-cmd__photo-preview.has-photo { border-style: solid; border-color: var(--pz-gold); }
.pz-cmd__photo-label { color: var(--pz-gold); font-weight: 600; }

/* ── Checkout ─────────────────────────────────────────────────────── */
.pz-cmd__recap { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; max-width: 520px; }
.pz-cmd__recap li { display: flex; justify-content: space-between; color: var(--pz-text-light); padding: .5rem 0; border-bottom: 1px solid var(--pz-border); }
.pz-cmd__recap li span:last-child { color: var(--pz-gold); font-weight: 700; }
.pz-cmd__recap em { color: var(--pz-text-lighter); font-style: normal; font-size: .85rem; }
.pz-cmd__recap-total { display: flex; justify-content: space-between; max-width: 520px; margin-bottom: 1.5rem; }
.pz-cmd__recap-total strong { color: var(--pz-gold); font-size: 1.3rem; font-family: 'Playfair Display', serif; }
.pz-cmd__pay { max-width: 520px; margin-bottom: 1.25rem; }
.pz-cmd__pay-title { font-weight: 700; color: var(--pz-cream); margin-bottom: .6rem; }
.pz-cmd__pay-methods { display: grid; gap: .5rem; }
.pz-cmd__pay-method {
  cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
  background: var(--pz-bg-section); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-sm);
  color: var(--pz-cream); transition: border-color .15s ease;
}
.pz-cmd__pay-method:hover { border-color: var(--pz-gold-dark); }
.pz-cmd__pay-none { color: var(--pz-text-light); font-size: .88rem; }
.pz-cmd__allergie { max-width: 520px; margin-bottom: .6rem; }
.pz-cmd__allergie-prec {
  font: inherit; max-width: 520px; width: 100%; padding: .7rem .85rem; margin-bottom: 1rem;
  border-radius: var(--pz-radius-sm); border: 1px solid var(--pz-border-light);
  background: var(--pz-bg-darker); color: var(--pz-cream);
}
.pz-cmd__confirm { max-width: 520px; width: 100%; }

/* ── Suivi ────────────────────────────────────────────────────────── */
.pz-cmd__screen[data-screen="track"] { text-align: center; max-width: 560px; margin: 0 auto; }
.pz-cmd__track-icon { font-size: 3.2rem; margin-bottom: .5rem; }
.pz-cmd__track-ticket { color: var(--pz-text-lighter); font-size: .8rem; letter-spacing: .05em; margin-bottom: 1.25rem; }
.pz-cmd__track-lines { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; text-align: left; }
.pz-cmd__track-line {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--pz-bg-section); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm); padding: .7rem .9rem; color: var(--pz-cream);
}
.pz-cmd__track-line em { color: var(--pz-text-lighter); font-style: normal; font-size: .82rem; }
.pz-cmd__track-badge { font-size: .78rem; font-weight: 700; color: var(--pz-gold); white-space: nowrap; }
.pz-cmd__track-line.is-validee .pz-cmd__track-badge,
.pz-cmd__track-line.is-en_preparation .pz-cmd__track-badge { color: var(--pz-cream); }
.pz-cmd__track-line.is-prete { border-color: var(--pz-gold); box-shadow: var(--pz-shadow-gold); }
.pz-cmd__track-line.is-prete .pz-cmd__track-badge { color: var(--pz-gold); }
.pz-cmd__track-line.is-refusee, .pz-cmd__track-line.is-annulee { opacity: .6; }

/* ── Paiement Stripe (écran 4b, pivot A83) ────────────────────────── */
.pz-cmd__screen[data-screen="payment"] { max-width: 560px; margin: 0 auto; }
.pz-cmd__pay-summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--pz-bg-section); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm); padding: .8rem 1rem; margin-bottom: 1.25rem;
  color: var(--pz-text-light); font-size: .9rem;
}
.pz-cmd__pay-summary strong { color: var(--pz-gold); font-family: 'Playfair Display', serif; font-size: 1.15rem; }
.pz-cmd__stripe-box {
  background: var(--pz-bg-section); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg); padding: 1.1rem; margin-bottom: 1.25rem;
  min-height: 220px; /* réserve l'espace du Payment Element (anti-CLS) */
}
.pz-cmd__paybtn { max-width: 560px; width: 100%; min-height: 52px; /* tap target généreux */ }
.pz-cmd__pay-secure {
  margin-top: .9rem; text-align: center; color: var(--pz-text-lighter);
  font-size: .78rem; line-height: 1.5;
}