/* MaPièce Auto — style minimal (charte orange #E8450A) */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  margin: 0; background: #f4f5f7; color: #222;
}
header {
  background: #E8450A; color: #fff; padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
header h1 { margin: 0; font-size: 20px; }
header a { color: #fff; text-decoration: none; font-weight: 600; }
header a:hover { text-decoration: underline; }

.card {
  background: #fff; border-radius: 8px; padding: 18px 22px;
  margin: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.card h2 { margin-top: 0; font-size: 18px; color: #E8450A; }
.card h3 { font-size: 15px; }

.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 10px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
input, select {
  padding: 7px 9px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; min-width: 130px;
}
button {
  background: #E8450A; color: #fff; border: 0; border-radius: 5px;
  padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
}
button:hover { background: #c93a08; }
button.secondary { background: #555; }

table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; }
th, td { border-bottom: 1px solid #e5e5e5; padding: 7px 9px; text-align: left; }
th { background: #fafafa; font-size: 12px; text-transform: uppercase; color: #666; }
td input[type="number"] { width: 70px; }

code { background: #f0f0f0; color: #222; padding: 1px 5px; border-radius: 3px; font-size: 13px; }
.muted { color: #888; font-size: 13px; }
.ok { color: #1a7f37; font-size: 14px; }
.ko { color: #c62828; font-size: 14px; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; color: #fff;
  background: #999;
}
.badge.pending_payment { background: #b58a00; }
.badge.preparing { background: #1565c0; }
.badge.shipped { background: #1a7f37; }
.badge.delivered { background: #14532d; }
.badge.canceled { background: #8a1c1c; }
.badge.dispute { background: #6b21a8; }
.badge.unknown { background: #555; }
/* Statuts de la boîte d'envoi e-mail (T-17). Classes distinctes de celles des
   commandes : « queued » n'est pas « pending_payment », et les confondre ferait
   croire à un paiement en attente. */
.badge.queued { background: #b58a00; }
.badge.sent { background: #1a7f37; }
.badge.failed { background: #8a1c1c; }
.badge.purged { background: #555; }
/* Aperçu d'un message : texte brut, jamais du HTML interprété (IC-8). */
.email-preview {
  background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px; padding: 12px;
  font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0;
}
#quote ul { font-size: 14px; }

/* Focus clavier visible partout : le contour par défaut disparaissait sous la
   couleur de fond orange des boutons (accessibilité, navigation sans souris). */
:focus-visible {
  outline: 3px solid #0b57d0; outline-offset: 2px; border-radius: 4px;
}

/* --- Panier : scission, surcoût, retrait (RM-PAN-04/05) --- */
.shipments { font-size: 14px; margin: 8px 0; padding-left: 20px; }
.split-warning { font-weight: 600; }
.split-surcharge { font-size: 14px; margin: 6px 0; }
.removable-advice { font-size: 14px; margin: 6px 0; }
.removable-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.substitution {
  display: block; margin-top: 3px; font-size: 13px; color: #8a4b00; font-style: normal;
}

/* --- Consigne (T-77) : thème clair, pendant de vitrine.css (thème sombre) ---
   Ces classes sont rendues par `catalog-view.js` et `cart-view.js`, partagés par
   la boutique page unique (style.css) et la vitrine (vitrine.css). Sans ces
   règles, la mention de consigne s'affichait sans aucun style sur `/`. */
.deposit-notice { font-size: 13px; color: #555; margin: 2px 0 10px; }
.deposit { font-size: 12px; color: #555; }
.deposit-total { margin-top: 4px; }

/* --- Régularisation de stock (T-76) --- */
/* Le bloc d'actions est en retrait sous la ligne d'expédition : il n'appartient
   pas à la ligne courante, il la traite. */
.stock-reconcile { margin: 6px 0 10px 12px; align-items: end; }
#stock-banner {
  border-left: 4px solid #b58a00; background: #fff8e1; color: #6b5200;
  padding: 10px 14px; margin: 10px 0; font-size: 14px; border-radius: 4px;
}
#stock-banner:empty { display: none; }

/* --- Suivi : ligne annulée --- */
/* Le barré et la couleur ne portent PAS l'information à eux seuls : la cellule
   « État de la ligne » écrit « Annulé — ne sera pas livré » (WCAG 1.4.1). */
tr.line-canceled td { text-decoration: line-through; opacity: .75; }
tr.line-canceled td:last-child { text-decoration: none; opacity: 1; }
.partial-notice {
  border-left: 4px solid #c62828; background: #fdecea; color: #8a1c1c;
  padding: 10px 14px; margin: 10px 0; font-size: 14px; border-radius: 4px;
}
.order-status { font-size: 15px; }
.legal-notice { font-size: 13px; color: #555; margin-top: 10px; }

/* --- Connexion au back-office (T-12) --- */
/* Colonne étroite et centrée : l'écran ne porte que deux champs, l'étaler sur
   toute la largeur donnerait un formulaire illisible. */
.login-card { max-width: 560px; margin: 48px auto; }
.login-card .row { align-items: end; }
.login-card input { min-width: 220px; }
#login-code { min-width: 120px; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
#login-error:empty { display: none; }
header nav button { margin-left: 12px; }

/* --- Mode démonstration (recette locale uniquement, SEC2-05/SEC2-13) ---
   Ces règles remplacent les attributs de style en ligne et le `cssText` posé en
   JavaScript, qui imposaient `style-src 'unsafe-inline'` dans la CSP. */
.demo-banner {
  position: fixed; bottom: 18px; left: 18px; z-index: 9;
  background: #E8450A; color: #fff; padding: 10px 18px; border-radius: 6px;
  font-weight: 700; font-size: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
/* Bouton « Commander » ARMÉ par un lien de démonstration : il attend un clic
   humain — un lien ne passe jamais commande tout seul. */
.demo-armed {
  outline: 3px solid #0b57d0; outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(11, 87, 208, .18);
}
.demo-armed-notice { font-weight: 600; margin: 8px 0; }