/* =========================================================================
   Tunnel de commande (/commande/) : ce que site/js/commande.js met en
   scene par-dessus la coquille de site/commande.template.html.

   Cette feuille ne redefinit rien de style.css. Elle reutilise `.panneau`,
   `.champ`, `.bouton` et `.titre-carte` tels quels, et n'habille que ce qui
   est propre au tunnel : le fil des etapes, les lignes du panier, la liste des
   modes de livraison, la colonne de recapitulatif, la zone de paiement.

   Elle est chargee sur toutes les pages, comme les autres feuilles du site,
   mais tout y est prefixe par `.commande` : sur une page qui n'est pas le
   tunnel, aucune de ces regles ne s'applique.

   Aucune couleur en dur, hors les deux tons de statut : les variables viennent
   de style.css, sinon le theme sombre se casse.
   ========================================================================= */

.commande [hidden] { display: none !important; }

.commande .commande-attente {
  color: var(--texte-leger);
  font-size: 0.9rem;
}

.commande .commande-intro {
  color: var(--texte-doux);
  font-size: 0.95rem;
  margin: 0 0 1.1rem;
}

.commande .commande-note {
  color: var(--texte-doux);
  font-size: 0.87rem;
  margin: 0.6rem 0 0;
}

.commande .commande-liens {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

/* Message d'erreur du tunnel. Meme forme que `.compte .message` de style.css,
   redite ici parce que celle-la est portee par la classe `.compte`. */
.commande .message {
  margin: 0 0 1.2rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--magenta);
  background: var(--fond-alt);
  font-size: 0.9rem;
  color: var(--texte);
}

.commande .message.info,
.commande .message.succes {
  border-left-color: var(--texte-leger);
}

/* Ce que le client doit lire avant de cliquer : un manque de configuration,
   pas une erreur de sa part. Ton neutre, pas alarmant. */
.commande .commande-alerte {
  margin: 0 0 1rem;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--texte-leger);
  background: var(--fond-alt);
  font-size: 0.92rem;
  color: var(--texte);
}

/* ------------------------------------------------------------ Fil d'etapes */
/* Cinq puces numerotees. Le rang courant est marque, les rangs franchis sont
   estompes : le client doit voir ou il en est sans compter. Sur telephone la
   liste passe en defilement horizontal plutot qu'en cinq lignes empilees, qui
   pousseraient le formulaire hors de l'ecran. */

.commande .commande-etapes {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.commande .commande-etapes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 auto;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border-bottom: 3px solid var(--bordure);
  color: var(--texte-leger);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.commande .commande-etapes .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.commande .commande-etapes li.faite {
  color: var(--texte-doux);
  border-bottom-color: var(--texte-leger);
}

.commande .commande-etapes li.courante {
  color: var(--magenta);
  border-bottom-color: var(--magenta);
  font-weight: 700;
}

.commande .commande-etapes li.courante .num {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}

@media (max-width: 640px) {
  .commande .commande-etapes .nom { display: none; }
  .commande .commande-etapes li { flex: 0 0 auto; padding: 0.5rem 0.6rem; }
}

/* ----------------------------------------------------------- Deux colonnes */
/* Le recapitulatif reste visible pendant tout le tunnel : c'est lui qui evite
   la surprise au moment de payer. Il se colle en haut sur grand ecran, et
   repasse sous le formulaire en dessous de 900 px. */

.commande .commande-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gouttiere);
  align-items: start;
}

@media (max-width: 900px) {
  .commande .commande-colonnes { grid-template-columns: minmax(0, 1fr); }
}

.commande .commande-etape { margin-bottom: 1.5rem; }

.commande .commande-resume { position: sticky; top: 1rem; }

@media (max-width: 900px) {
  .commande .commande-resume { position: static; }
}

.commande .commande-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

/* -------------------------------------------------------- Grille d'adresse */

.commande .commande-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.1rem;
}

.commande .commande-grille .champ-large { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .commande .commande-grille { grid-template-columns: minmax(0, 1fr); }
}

.commande textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 0.95rem;
  resize: vertical;
}

.commande textarea:focus {
  outline: 2px solid var(--magenta);
  outline-offset: 1px;
}

.commande .champ-case {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.2rem 0;
  font-size: 0.92rem;
  color: var(--texte-doux);
}

.commande .champ-case input { margin-top: 0.3rem; }

/* --------------------------------------------------------- Lignes du panier */

.commande .commande-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.commande .commande-ligne {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--bordure);
  margin: 0;
}

.commande .commande-ligne:last-child { border-bottom: 0; }

.commande .commande-ligne-corps { min-width: 0; flex: 1 1 auto; }

.commande .commande-ligne-nom {
  margin: 0 0 0.25rem;
  font-family: var(--titre);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--texte);
}

.commande .commande-ligne-detail {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

/* Un article devenu indisponible bloque la commande : il doit se voir tout de
   suite, pas au moment ou le serveur refuse la conversion. */
.commande .commande-ligne-alerte {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--magenta);
}

.commande .commande-ligne-chiffres {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.commande .commande-ligne-quantite {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texte-leger);
}

.commande .commande-ligne-quantite input {
  width: 4.2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  text-align: right;
}

.commande .commande-ligne-prix {
  margin: 0;
  font-family: var(--titre);
  font-size: 1.1rem;
  color: var(--magenta);
  font-variant-numeric: tabular-nums;
}

.commande .commande-ligne-retirer {
  border: 0;
  background: none;
  padding: 0;
  color: var(--texte-leger);
  font-family: var(--corps);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

.commande .commande-ligne-retirer:hover { color: var(--magenta); }

@media (max-width: 560px) {
  .commande .commande-ligne { flex-direction: column; gap: 0.7rem; }
  .commande .commande-ligne-chiffres { align-items: flex-start; }
}

/* ------------------------------------------------------ Modes de livraison */

.commande .commande-mode {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.7rem;
  border: 1px solid var(--bordure);
  background: var(--fond);
  cursor: pointer;
  transition: border-color 0.15s;
}

.commande .commande-mode:hover { border-color: var(--magenta); }

.commande .commande-mode:has(input:checked) {
  border-color: var(--magenta);
  background: var(--fond-alt);
}

/* Repli pour les navigateurs sans `:has` : la puce cochee suffit a lire le
   choix, seul le cadre colore manque. */
.commande .commande-mode input { margin-top: 0.3rem; }

.commande .commande-mode.indisponible {
  opacity: 0.55;
  cursor: not-allowed;
}

.commande .commande-mode-corps {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.commande .commande-mode-nom {
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 500;
  color: var(--texte);
}

.commande .commande-mode-detail {
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.commande .commande-mode-alerte {
  font-size: 0.85rem;
  color: var(--magenta);
}

.commande .commande-mode-prix {
  flex: 0 0 auto;
  font-family: var(--titre);
  font-size: 1rem;
  color: var(--magenta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------------------------------- Recapitulatif */

.commande .commande-totaux {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}

.commande .commande-totaux li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  margin: 0;
  font-size: 0.92rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.commande .commande-totaux li.total-remise span:last-child { color: var(--magenta); }

.commande .commande-totaux li.total-final {
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--titre);
  font-size: 1.2rem;
  color: var(--texte);
}

.commande .commande-totaux li.total-final span:last-child { color: var(--magenta); }

.commande .commande-promo {
  padding-top: 1.1rem;
  border-top: 1px solid var(--bordure);
}

.commande .commande-promo label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
}

.commande .commande-promo-ligne {
  display: flex;
  gap: 0.5rem;
}

.commande .commande-promo-ligne input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  text-transform: uppercase;
}

.commande .commande-promo-ligne input:focus {
  outline: 2px solid var(--magenta);
  outline-offset: 1px;
}

.commande .commande-promo-ligne .bouton {
  flex: 0 0 auto;
  padding: 0.6rem 0.9rem;
  font-size: 0.82rem;
}

/* --------------------------------------------------------------- Paiement */

.commande .commande-paypal {
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--bordure);
}

/* Le SDK de PayPal dessine ses boutons dans une iframe de largeur fixe si on
   ne lui donne pas de contrainte : ce conteneur la lui donne. */
.commande #boutons-paypal {
  max-width: 420px;
  margin-top: 1rem;
}

/* ----------------------------------------------------------- Confirmation */

.commande .commande-reference {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.commande .commande-reference strong {
  font-family: var(--titre);
  font-size: 1.25rem;
  color: var(--magenta);
  letter-spacing: 0.02em;
}