/* Styles propres à l'application client (lot WP6). Ne consomme que les jetons de shared/tokens.css.
   Préfixes : .shell-* (coquille), .auth-* (connexion), .home-* (accueil), .profile-* (profil). */

/* ---------- Coquille ---------- */
.shell-banner { position: sticky; top: 0; z-index: var(--z-banner); }
.shell-banner .banner { position: static; }
.shell-noscript { padding: var(--space-6); text-align: center; }
.app-bar__title--brand { font-weight: 800; color: var(--color-primary); font-size: var(--text-md); }
.app-bar__title--brand em { font-style: normal; color: var(--color-text-secondary); }
.app-bar__avatar { grid-column: 1; width: var(--tap-min); height: var(--tap-min); display: inline-grid; place-items: center; border-radius: var(--radius-full); }
.app-bar__avatar .avatar { width: 32px; height: 32px; font-size: var(--text-sm); }
.app-bar__action .shell-icon, .app-bar__back .shell-icon { width: 22px; height: 22px; }
.app-bar__action { position: relative; }
.app-bar__dot { position: absolute; top: 11px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg); }
.shell-icon { width: 20px; height: 20px; flex: none; }


/* Feuille basse pilotée par shell.openSheet() */
.sheet[hidden] { display: none; }
.sheet__close { position: absolute; top: var(--space-2); right: var(--space-2); }
.sheet__body > p { margin: 0; }
.sheet__body .field + .field { margin-top: 0; }

/* Erreur bloquante d'écran : motif + référence + WhatsApp */
.shell-error { display: flex; flex-direction: column; gap: var(--space-3); }
.shell-error .btn-row { flex-wrap: wrap; }

/* Formulaires : marges et aides */
.shell-form { display: flex; flex-direction: column; gap: var(--space-4); }
.shell-form .field__label { font-size: var(--text-base); }
.shell-note { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
.shell-link { color: var(--color-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; min-height: var(--tap-min); display: inline-flex; align-items: center; }
.shell-wordmark { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--color-primary); letter-spacing: -0.02em; }
.shell-wordmark em { font-style: normal; color: var(--color-text-secondary); }

/* ---------- Connexion / inscription ---------- */
.auth-screen { min-height: calc(100dvh - var(--app-bar-h) - var(--space-10)); display: flex; flex-direction: column; gap: var(--space-5); }
.auth-screen__head { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); }
.auth-screen__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); }
.auth-screen__links { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.auth-phone__sent { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.auth-pin { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.auth-pin__hint { min-height: 1.5em; text-align: center; margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.auth-pin__hint.is-error { color: var(--color-danger-text); font-weight: 500; }
.pin-pad__key:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.otp-input__cell:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.otp-input.is-invalid .otp-input__cell { border-color: var(--color-danger); }
.auth-otp__error { text-align: center; color: var(--color-danger-text); font-weight: 500; font-size: var(--text-sm); margin: 0; min-height: 1.5em; }
.auth-otp__dev { text-align: center; }
.auth-biometric { display: flex; flex-direction: column; gap: var(--space-2); }
.auth-biometric__icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary-soft-text); margin: 0 auto; }
.auth-biometric__icon svg { width: 28px; height: 28px; }

/* ---------- Accueil ---------- */
.home-hero { gap: var(--space-2); position: relative; }
.home-hero__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.home-hero__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); margin: 0; }
.home-hero__badge { margin-left: auto; }
.card--primary .home-hero__badge { background: color-mix(in srgb, var(--color-on-primary) 18%, transparent); color: var(--color-on-primary); }
.home-hero__amount { display: flex; align-items: center; gap: var(--space-2); }
.home-hero__amount .hero-amount { margin: 0; }
.home-hero__eye { width: var(--tap-min); height: var(--tap-min); display: inline-grid; place-items: center; border-radius: var(--radius-full); color: inherit; opacity: 0.85; }
.home-hero__eye:hover, .home-hero__eye:focus-visible { background: color-mix(in srgb, var(--color-on-primary) 16%, transparent); opacity: 1; }
.home-hero__eye svg { width: 22px; height: 22px; }
.home-hero__sub { margin: 0; font-size: var(--text-sm); }
.card--primary .skeleton { background: color-mix(in srgb, var(--color-on-primary) 22%, transparent); }
.card--primary .skeleton::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-on-primary) 30%, transparent), transparent); }
.card--primary .alert--danger { color: var(--color-danger-text); }
/* Taux du jour : une ligne dans la carte du solde, détail (référence, écarts) dépliable */
.home-hero__rate { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: var(--text-sm); }
.home-hero__rate summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 32px; border-radius: var(--radius-sm); }
.home-hero__rate summary::-webkit-details-marker { display: none; }
.home-hero__rate summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.home-hero__rate-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); white-space: nowrap; }
.home-hero__rate-line > span { opacity: 0.8; }
.home-hero__rate-line strong { font-weight: 700; }
.home-hero__rate-line > span:first-child { font-weight: 600; }
.home-hero__rate-chevron { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; opacity: 0.8; transition: transform var(--dur-base) var(--ease-standard); }
.home-hero__rate-chevron svg { width: 16px; height: 16px; }
.home-hero__rate[open] .home-hero__rate-chevron { transform: rotate(180deg); }
.home-hero__rate-body { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }
.home-hero__rate-body p { margin: 0; font-size: var(--text-xs); opacity: 0.8; }
.home-hero__rate-kv { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.home-hero__rate-kv > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.home-hero__rate-kv dt { opacity: 0.8; }
.home-hero__rate-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-hero__rate--error { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.home-hero__retry { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; min-height: 32px; }

/* ---------- États vides : illustration au trait, sans pavé de fond ---------- */
.app-empty__art { width: 120px; height: 80px; color: var(--color-text); }
.app-empty__art svg { width: 100%; height: 100%; display: block; }
.app-empty__soft { opacity: 0.4; }
.card > .empty-state { padding-block: var(--space-4); }
.home-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.home-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 72px; padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text); font-weight: 600; font-size: var(--text-sm); text-decoration: none; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.home-action:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
.home-action:disabled, .home-action[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.home-action__icon { width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary-soft-text); }
.home-action__icon svg { width: 20px; height: 20px; }
.home-action__soon { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: 500; }
.home-section { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.home-section .shell-link { min-height: 40px; }
.home-notifs { display: flex; flex-direction: column; gap: var(--space-3); }
.home-notif { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.home-notif__time { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- Profil ---------- */
.profile-identity { display: flex; align-items: center; gap: var(--space-3); }
.profile-identity .avatar { width: 48px; height: 48px; font-size: var(--text-md); }
.profile-identity__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.profile-identity__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); margin: 0; overflow: hidden; text-overflow: ellipsis; }
.profile-identity__phone { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.profile-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
.profile-tier { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-secondary); text-align: center; }
.profile-tier__bar { height: 6px; border-radius: var(--radius-full); background: var(--color-surface-2); }
.profile-tier.is-done .profile-tier__bar { background: var(--color-primary); }
.profile-tier.is-done { color: var(--color-text); font-weight: 600; }
.profile-limit__row { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.profile-limit__row strong { color: var(--color-text); }
.profile-id { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.profile-id .hash { flex: 1; }
.list-item--danger .list-item__title { color: var(--color-danger-text); }
.list-item--danger .list-item__icon { background: var(--color-danger-soft); color: var(--color-danger-text); }
.list-item__end .switch { margin-left: var(--space-2); }
.list-item .switch input:disabled { opacity: 0.5; cursor: not-allowed; }
.list-item--static { cursor: default; }
.list-item--static:hover { background: transparent; }
.profile-foot { text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; padding-bottom: var(--space-4); }
.profile-theme { display: flex; flex-direction: column; gap: var(--space-2); }

/* Mouvement réduit : pas de secousse */
@media (prefers-reduced-motion: reduce) {
  .otp-input.is-invalid, .pin-dots.is-error { animation: none; }
}