/* Styles des écrans Acheter / Vendre (lot WP7). Ne consomme que les jetons de shared/tokens.css ;
   les composants viennent de shared/components.css, ce fichier n'ajoute que la mise en page propre
   au flux en 3 étapes (préfixe .trade-). Testé en clair et en sombre : aucune couleur en dur. */

/* La section vit dans <main id="screens"> ; si la coquille (WP6) ne pose pas .app-shell__main, on
   garantit la gouttière de 16 px nous-mêmes sans la doubler. */
main:not(.app-shell__main) > [data-screen="trade"]:not([hidden]) {
  padding: var(--space-4) var(--app-gutter);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}

/* Les trois étapes masquent la navigation basse (DESIGN-GUIDE § 4 « Nav basse ») : règle purement CSS,
   sans écrire hors de la section. */
.app-shell:has([data-screen="trade"]:not([hidden])) .bottom-nav { display: none; }

/* Colonne pleine hauteur : le bouton principal reste en bas, atteignable au pouce. */
.trade-screen {
  min-height: calc(100dvh - var(--app-bar-h) - var(--space-8) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.trade-spacer { flex: 1 1 var(--space-4); }
.trade-cta { display: flex; flex-direction: column; gap: var(--space-2); }
.trade-cta .btn { min-height: var(--control-h); }
.trade-section-title { margin: 0 0 var(--space-2); }

/* Puce informative (solde) : non cliquable, même gabarit que les puces */
.trade-chip--static { pointer-events: none; border-style: dashed; color: var(--color-text-secondary); background: transparent; }

/* ---------- Écran A : saisie ---------- */
.amount-input__value { min-width: 0; }
.amount-input__converted:empty { display: none; }

/* Opérateur sélectionné : bord épais + pastille cochée (surcharge de components.css). Les couleurs suivent
   --color-primary, donc noir en clair et blanc en sombre, sans règle propre au thème. */
.trade-screen[data-trade="amount"] { gap: var(--space-4); }
.operator-picker .operator { gap: var(--space-1); padding-right: var(--space-6); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.operator-picker .operator.is-selected,
.operator-picker .operator[aria-checked="true"] {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary), var(--shadow-sm);
}
.operator-picker .operator:not(.is-selected) .operator__name { color: var(--color-text-secondary); }
.operator__check {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 20px; height: 20px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  border: 1.5px solid var(--color-border-strong); color: transparent; background: transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-base) var(--ease-standard);
}
.operator__check svg { width: 12px; height: 12px; }
.operator.is-selected .operator__check,
.operator[aria-checked="true"] .operator__check { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); animation: trade-pop var(--dur-base) var(--ease-standard); }
.operator.is-down .operator__check { display: none; }
@keyframes trade-pop { from { transform: scale(0.6); } to { transform: scale(1); } }

/* Limite restante + palier suivant : puce compacte sur sa propre ligne, jamais coupée en deux. */
.trade-limit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.trade-limit[hidden] { display: none; }
.trade-limit__text { margin: 0; }
.trade-limit__pill {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text); font-weight: 600; font-size: var(--text-xs); text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.trade-limit__pill:hover { border-color: var(--color-border-strong); }
.trade-limit__pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Raison du bouton inactif, juste sous lui */
.trade-cta__hint { margin: 0; text-align: center; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.trade-cta__hint[hidden] { display: none; }

/* Transition entre les étapes : fondu + glissement court, vers l'avant ou l'arrière */
[data-screen="trade"].trade-enter { animation: trade-step-in var(--dur-slow) var(--ease-out); }
[data-screen="trade"].trade-enter[data-trade-dir="back"] { animation-name: trade-step-back; }
@keyframes trade-step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes trade-step-back { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* ---------- Écran B : récapitulatif ---------- */
.trade-recap { gap: var(--space-2); align-items: center; }
.trade-recap__rate { justify-content: center; }
.trade-recap__hero { transition: opacity var(--dur-base) var(--ease-standard); }
.trade-recap__hero.is-stale { opacity: 0.55; text-decoration: line-through; text-decoration-color: var(--color-text-muted); text-decoration-thickness: 2px; }
/* Nouveau prix après « Actualiser » : la différence est surlignée, jamais exécutée en silence. */
.trade-recap.is-changed { border-color: var(--color-warning); background: var(--color-warning-soft); }
.trade-recap.is-changed .trade-recap__hero { color: var(--color-warning-text); animation: trade-flash var(--dur-slow) var(--ease-standard) 2; }
@keyframes trade-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.accordion__body .kv dt .text-xs { color: var(--color-text-muted); }
.accordion__body .kv dd { color: var(--color-text); }

/* ---------- Écran C : paiement ---------- */
.trade-payin { gap: var(--space-3); }
.trade-payin__amount { font-size: var(--text-base); }
.trade-payin .ref { white-space: nowrap; }
.trade-steps { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--space-1); }
.trade-steps li::marker { color: var(--color-primary); font-weight: 700; }
.trade-deadline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.trade-deadline__value { color: var(--color-text); font-family: var(--font-display); font-size: var(--text-xl); }
.trade-deadline__over { display: none; color: var(--color-warning-text); font-size: var(--text-sm); }
.trade-deadline.is-over .trade-deadline__value { color: var(--color-warning-text); }
.trade-deadline.is-over .trade-deadline__over { display: inline; }
.trade-success { padding: var(--space-4) 0 var(--space-2); }
.trade-success .hero-amount { color: var(--color-success-text); }
/* Succès : le cercle puis la coche se dessinent une fois */
.trade-success__tick { width: 56px; height: 56px; margin: 0 auto; color: var(--color-success); }
.trade-success__ring, .trade-success__check { stroke-dasharray: 100; stroke-dashoffset: 0; }
.trade-success__ring { animation: trade-draw var(--dur-slow) var(--ease-out) backwards; transform: rotate(-90deg); transform-origin: center; transform-box: fill-box; }
.trade-success__check { animation: trade-draw var(--dur-slow) var(--ease-out) var(--dur-base) backwards; }
@keyframes trade-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Feuilles basses : les champs à 48 px et le piège de focus viennent de components.css ; on aligne la
   zone d'actions sur la largeur de l'app. */
.sheet--trade .sheet__body .field { gap: var(--space-1); }
.sheet--trade .sheet__body .field__error { display: none; }
.sheet--trade .sheet__body .field.is-invalid .field__error { display: block; }

/* Zoom 200 % / petits écrans : le stepper garde ses trois colonnes, les libellés peuvent passer à la ligne */
@media (max-width: 359px) {
  .stepper__label { flex-wrap: wrap; }
  .trade-deadline__value { font-size: var(--text-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .trade-recap.is-changed .trade-recap__hero { animation: none; }
  [data-screen="trade"].trade-enter,
  .operator .operator__check,
  .trade-success__ring,
  .trade-success__check { animation: none; }
}