/* Page « Commander » : formulaire court et confirmation. */
.page--commande .conteneur--etroit { max-width:560px }
.page--commande .page__titre { margin:8px 0 24px }

.panier { list-style:none; margin:0; padding:0; border-top:1px solid var(--trait) }
.panier__ligne { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--trait) }
.panier__photo { flex:none }
.panier__photo img { display:block; width:84px; height:84px; object-fit:contain; background:var(--fond); border-radius:var(--rayon) }
.panier__texte { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--gris) }
.panier__texte strong { font-size:15px; color:var(--encre) }
.panier__retirer { flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-size:12px; color:var(--gris) }
.panier__pied { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin:14px 0 28px; font-size:14px }
.panier__pied a { color:var(--encre); font-weight:700 }

.commande { display:flex; flex-direction:column; gap:18px }
.champ { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; border:0; font-size:13px; font-weight:700; color:var(--encre) }
.champ input[type=text],.champ input[type=tel] {
  width:100%;
  height:52px;
  padding:12px 14px;
  border:1px solid var(--trait);
  border-radius:var(--rayon);
  background:var(--surface);
  color:var(--encre);
  font:400 16px/1.3 var(--texte)
}
.champ input:focus-visible { outline:2px solid var(--encre); outline-offset:2px }
.champ small { font-size:12px; font-weight:400; color:var(--gris) }
.champ legend { padding:0; margin-bottom:8px }
.champ--choix label {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:0 14px;
  margin-bottom:8px;
  border:1px solid var(--trait);
  border-radius:var(--rayon);
  background:var(--surface);
  font-size:15px;
  font-weight:400;
  cursor:pointer
}
.champ--choix input { width:20px; height:20px; accent-color:var(--rouge) }
.commande__piege { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.commande__note { font-size:12px; color:var(--gris); margin:0 }

.commande__erreurs {
  list-style:none;
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid var(--rouge);
  border-radius:var(--rayon);
  background:var(--surface);
  color:var(--rouge-fonce);
  font-size:14px
}
.commande__erreurs li + li { margin-top:6px }

.commande__etape { font-size:16px; line-height:1.5; margin:0 0 20px }
.commande__recap { list-style:none; margin:28px 0 20px; padding:0; border-top:1px solid var(--trait) }
.commande__recap li {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--trait);
  font-size:14px
}
.commande__recap span { color:var(--gris) }
.commande__recap strong { text-align:right }

/* Compte client */
.champ__code { max-width:200px; letter-spacing:.3em }
.champ input[type=password] {
  width:100%;
  height:52px;
  padding:12px 14px;
  border:1px solid var(--trait);
  border-radius:var(--rayon);
  background:var(--surface);
  color:var(--encre);
  font:400 16px/1.3 var(--texte)
}
.champ input::placeholder { letter-spacing:0; color:var(--gris) }
.champ--compte { padding-top:18px; border-top:1px solid var(--trait) }
.champ small a,.commande__note a { color:var(--encre) }
.compte__creation { margin-top:32px; padding-top:20px; border-top:1px solid var(--trait) }
.compte__creation summary { min-height:44px; display:flex; align-items:center; font-size:14px; font-weight:700; cursor:pointer }
.compte__creation .commande { margin-top:16px }
.compte__creer { color:var(--encre) }
.compte__creer:hover { background:var(--surface); border-color:var(--gris); color:var(--encre) }
.compte__titre { font:700 13px/1.3 var(--texte); letter-spacing:.08em; text-transform:uppercase; color:var(--gris); margin:0 0 12px }
.commandes { list-style:none; margin:0 0 28px; padding:0 }
.commandes__ligne { padding:16px; margin-bottom:12px; border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface) }
.commandes__ligne p { margin:0 }
.commandes__tete { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px }
.commandes__date { font-size:12px; color:var(--gris); margin-top:4px !important }
.commandes__paires { list-style:none; margin:12px 0; padding:12px 0; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait); font-size:14px }
.commandes__paires li + li { margin-top:6px }
.commandes__pied { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px }
.commandes__pied a { color:var(--encre) }
.etat { flex:none; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; background:var(--surface-alt); color:var(--encre) }
.etat--cours { background:#fff1c9 }
.etat--fini { background:#d8f0e2; color:#0e4a2b }
.etat--annule { color:var(--gris) }