/* Styles du portail client Web UNITÉS EXPRESS — réutilise les variables de
   couleur déjà définies dans /assets/css/site.css (--primary-dark, etc.),
   jamais une palette parallèle. */

.hidden { display: none !important; }

.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--primary-dark) 0%, #0a5c3f 100%);
  padding: 24px 16px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.auth-logo {
  display: block;
  height: 64px;
  margin: 0 auto 10px;
}

.auth-slogan {
  text-align: center;
  color: #5b6b63;
  font-size: 13px;
  margin: 0 0 22px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--primary-light);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px;
  border-radius: 11px;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--primary-dark);
  cursor: pointer;
}

.auth-tab.active {
  background: var(--primary);
  color: #fff;
}

.field { margin-bottom: 16px; }
.field.hidden { display: none; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #5b6b63;
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e0e6e2;
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 15px;
  background: #fafcfb;
}

.field input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}

.phone-input {
  display: flex;
  align-items: center;
  border: 1px solid #e0e6e2;
  border-radius: 14px;
  background: #fafcfb;
  padding: 0 14px;
}

.phone-prefix {
  font-weight: 700;
  color: #5b6b63;
  padding-right: 6px;
}

.phone-input input {
  border: none;
  background: transparent;
  padding: 13px 0;
  flex: 1;
}

.phone-input:focus-within {
  border-color: var(--primary);
  background: #fff;
}

.field-error, .form-error {
  color: #d92d20;
  font-size: 12px;
  margin: 6px 0 0;
}

.form-error {
  background: #fef2f2;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.field-error.hidden, .form-error.hidden { display: none; }

.btn-block { width: 100%; border: 0; cursor: pointer; padding: 14px; border-radius: 14px; font-size: 15px; font-weight: 800; }

.auth-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
}

/* --- Accueil client — reproduction fidèle de home_screen.dart (APK USER) ---
   Palette opérateurs/statuts identique à AppColors (unites_express_user) ;
   --warning/--danger/--neutral n'existaient pas dans site.css (jamais requis
   par le reste du site avant ce portail) — ajoutés ici, valeurs identiques
   à AppColors.warning/danger/neutral, aucune palette parallèle inventée. */
:root {
  --warning: #F59E0B;
  --warning-bg: #FEF3E0;
  --danger: #E5484D;
  --danger-bg: #FCEBEC;
  --neutral: #7C8A83;
  --neutral-bg: #EEF2F0;
}

.home-body { min-height: 100vh; background: var(--primary-lighter); padding-bottom: 84px; }

/* AppBar compacte (Scaffold.appBar), PAS un bandeau plein-largeur coloré.
   Sur PC, la bande reste pleine largeur (même identité) mais son CONTENU
   est recentré à la largeur de l'accueil — sinon le badge points/la cloche
   se retrouveraient à 1000px du nom sur un grand écran, ce qui casserait
   la compacité de l'AppBar Android ("responsive ne signifie pas une
   interface différente"). */
.app-bar {
  background: #fff;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
}
.app-bar-inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.app-bar-greeting { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-bar-hello { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.app-bar-name { font-size: 18px; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.points-pill {
  display: flex; align-items: center; gap: 5px; max-width: 128px;
  padding: 6px 10px; border-radius: 20px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
}
.points-pill-emoji { font-size: 13px; }
.points-pill-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.points-pill-amount { color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; }
.points-pill-label { color: #fff; font-size: 9.5px; font-weight: 600; }

.bell-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary-lighter); color: var(--text-primary); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}

.home-main { max-width: 560px; margin: 0 auto; padding: 14px 16px 24px; }

/* _WelcomeOrRecentCard */
.hero-card {
  display: block; border-radius: 20px; padding: 18px; margin-bottom: 22px; color: #fff;
  text-decoration: none; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-strong) 100%);
}
.hero-card.clickable { cursor: pointer; }
.hero-welcome { display: flex; align-items: center; gap: 12px; }
.hero-welcome-icon { font-size: 26px; }
.hero-welcome-text { font-size: 13px; font-weight: 700; line-height: 1.4; }
.hero-recent-top { display: flex; align-items: center; gap: 12px; }
.hero-recent-label { font-size: 11.5px; color: rgba(255,255,255,0.75); }
.hero-recent-title { font-size: 14.5px; font-weight: 800; margin-top: 1px; }
.hero-recent-footer { display: flex; align-items: center; gap: 2px; margin-top: 12px; font-size: 12.5px; font-weight: 700; }

.section-row { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; }
.section-title { font-size: 15px; font-weight: 800; color: var(--text-primary); margin: 0; }
.section-link { font-size: 12.5px; font-weight: 700; color: var(--primary-strong); background: none; border: 0; padding: 0; cursor: pointer; }

/* _OperatorCard — logo + nom SEULEMENT, aucun badge de disponibilité
   permanent : le blocage se fait au clic (voir guardOperatorAvailable dans
   ui.js), exactement comme operator_availability.dart. */
.operator-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.operator-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 8px; text-align: center; cursor: pointer;
}
.operator-badge {
  width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 9.5px; box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.operator-badge.orange { background: #F47216; color: #fff; }
.operator-badge.mtn { background: #FFCB05; color: #1A1A1A; }
.operator-badge.moov { background: #0057B8; color: #fff; }
.operator-label { font-size: 12px; font-weight: 700; color: var(--text-primary); }

/* SnackBar — mirrors app_snackbar.dart : n'apparaît qu'au clic sur un
   opérateur indisponible, jamais un état persistant affiché à l'avance. */
.snackbar-host {
  position: fixed; left: 16px; right: 16px; bottom: 86px; z-index: 50;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.snackbar {
  pointer-events: auto; max-width: 480px; width: 100%;
  background: var(--warning-bg); border-left: 4px solid var(--warning); color: #92620A;
  border-radius: 12px; padding: 12px 14px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); animation: snackbar-in 0.2s ease-out;
}
.snackbar b { display: block; font-weight: 800; margin-bottom: 2px; }
@keyframes snackbar-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* _PromoBannerCarousel — PageView animé, flèches + indicateurs, jamais un
   bandeau statique. Masqué entièrement si aucune promo active. */
.promo-carousel { position: relative; height: 96px; border-radius: 18px; overflow: hidden; margin-top: 22px; margin-bottom: 22px; }
.promo-carousel.hidden { display: none; }
.promo-track { display: flex; height: 100%; transition: transform 0.35s cubic-bezier(0.33,1,0.68,1); }
.promo-slide {
  flex: 0 0 100%; height: 100%; box-sizing: border-box; padding: 16px;
  display: flex; align-items: center; gap: 12px; color: #fff;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-strong) 100%);
}
.promo-slide.has-image { padding: 0; align-items: flex-end; background-size: cover; background-position: center; }
.promo-slide-icon {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.promo-slide-text { min-width: 0; }
.promo-slide-title { font-size: 13px; font-weight: 700; }
.promo-slide-subtitle { font-size: 11.5px; font-weight: 600; opacity: 0.85; margin-top: 4px; }
.promo-slide-caption { width: 100%; padding: 20px 14px 12px; background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0)); }
.promo-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  border-radius: 50%; background: rgba(255,255,255,0.25); border: 0; color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.promo-arrow.left { left: 4px; }
.promo-arrow.right { right: 4px; }
.promo-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 2; }
.promo-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.5); transition: width 0.25s, background 0.25s; }
.promo-dot.active { width: 16px; background: rgba(255,255,255,0.95); }

/* "Dernières opérations" — remplace la section "Offres & Pass" fabriquée
   (inexistante sur l'accueil Android) par la vraie liste de commandes. */
.orders-list { display: flex; flex-direction: column; gap: 10px; }
.order-tile { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; cursor: pointer; }
.order-tile-badge { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 9px; }
.order-tile-body { flex: 1; min-width: 0; }
.order-tile-title { font-size: 13.5px; font-weight: 800; color: var(--text-primary); }
.order-tile-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.order-tile-date { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.order-tile-end { text-align: right; flex-shrink: 0; }
.order-tile-amount { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.order-tile-amount.success { color: var(--success); }

.status-pill { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 30px; font-size: 12px; font-weight: 700; margin-top: 6px; }
.status-pill.success { background: var(--success-bg); color: var(--success); }
.status-pill.warning { background: var(--warning-bg); color: var(--warning); }
.status-pill.danger  { background: var(--danger-bg); color: var(--danger); }
.status-pill.neutral { background: var(--neutral-bg); color: var(--neutral); }
.status-pill.info    { background: var(--info-bg); color: var(--info); }

.muted { color: var(--text-secondary); font-size: 12.5px; }

/* BottomNavigationBar — 4 destinations, mirrors main_shell.dart. Sur PC,
   même identité visuelle mais contenu centré (pas de barre étirée bord à
   bord sur un très grand écran). */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--border); z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav-inner { max-width: 560px; margin: 0 auto; display: flex; }
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 6px; color: var(--text-faint); text-decoration: none; font-size: 10.5px;
  font-weight: 700; background: none; border: 0; cursor: pointer;
}
.nav-item .nav-icon { font-size: 19px; line-height: 1; }
.nav-item.active { color: var(--primary-strong); }

/* Pages "Bientôt disponible" (Acheter/Historique/Profil/Points) — même
   navigation basse que l'accueil ; en-tête simplifié (titre seul, ces écrans
   n'ont pas encore leur propre AppBar riche côté Android/Web) pour ne pas
   préjuger d'un contenu qui n'existe pas encore. */
.simple-bar {
  background: #fff; padding: 14px 20px; border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 800; color: var(--text-primary); position: sticky; top: 0; z-index: 10;
}
.placeholder-main { max-width: 560px; margin: 0 auto; padding: 60px 24px; text-align: center; }
.placeholder-icon { font-size: 40px; margin-bottom: 12px; }
.placeholder-title { font-size: 16px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.placeholder-text { font-size: 13px; color: var(--text-secondary); }
.placeholder-phone { font-size: 12.5px; color: var(--text-secondary); margin-top: 10px; }
.placeholder-logout {
  margin-top: 22px; border: 0; border-radius: 14px; padding: 12px 22px;
  background: var(--danger-bg); color: var(--danger); font-weight: 800; font-size: 13.5px; cursor: pointer;
}

@media (max-width: 420px) {
  .operator-grid { gap: 6px; }
  .operator-card { padding: 12px 4px; }
}

/* --- Parcours Achat (Étape 5) — reproduit purchase_screen.dart /
   service_select_screen.dart / offer_select_screen.dart /
   pass_beneficiary_screen.dart / payment_method_select_screen.dart /
   payment_screen.dart / credit_sent_screen.dart EXACTEMENT, adapté en
   "étapes" affichées/masquées sur une seule page plutôt qu'en écrans
   séparés (seule adaptation au format navigateur — même logique, mêmes
   champs, même séquence). --- */
.wizard-main { max-width: 560px; margin: 0 auto; padding: 14px 16px 40px; }
.wizard-step.hidden { display: none; }
.wizard-back { background: none; border: 0; color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 0; margin-bottom: 10px; display: flex; align-items: center; gap: 4px; }

.step-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.step-label-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-light); color: var(--primary-strong); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; flex-shrink: 0; }
.step-label-text { font-size: 14px; font-weight: 800; color: var(--text-primary); }

.operator-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.operator-pick { background: #fff; border: 1.6px solid var(--border); border-radius: 14px; padding: 14px 6px; text-align: center; cursor: pointer; }
.operator-pick.selected { border-color: var(--primary-strong); background: var(--primary-lighter); }
.operator-pick-label { font-size: 11.5px; font-weight: 700; margin-top: 6px; }
.operator-pick-check { font-size: 12px; color: var(--primary-strong); margin-top: 3px; }

.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.amount-pick { background: #fff; border: 1.6px solid var(--border); border-radius: 14px; padding: 14px 6px; text-align: center; cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--text-primary); white-space: pre-line; }
.amount-pick.selected { border-color: var(--primary-strong); background: var(--primary-light); color: var(--primary-strong); }

.service-list, .offer-pick-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.service-tile, .offer-pick-card, .category-card {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px; cursor: pointer;
}
.service-tile-emoji { font-size: 20px; }
.service-tile-label { flex: 1; font-size: 14px; font-weight: 700; }
.chevron { color: var(--text-faint); font-size: 16px; }

.category-hero { background: var(--primary-lighter); border-radius: 18px; padding: 20px; text-align: center; margin-bottom: 16px; }
.category-hero-badge { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 10px; color: #fff; }
.category-hero-title { font-size: 16px; font-weight: 900; }
.category-grid { display: flex; flex-direction: column; gap: 10px; }
.category-card-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.category-card-body { flex: 1; min-width: 0; }
.category-card-name { font-size: 14px; font-weight: 800; }
.category-card-subtitle { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.category-header-back { display: flex; align-items: center; gap: 10px; background: var(--primary-lighter); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; cursor: pointer; border: 0; width: 100%; text-align: left; }
.category-header-back-text { flex: 1; font-weight: 800; font-size: 13.5px; color: var(--text-primary); }

.offer-pick-name { font-size: 14px; font-weight: 800; }
.offer-pick-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.offer-pick-card { justify-content: space-between; }

.offer-recap { background: var(--primary-lighter); border-radius: 16px; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.offer-recap-name { font-size: 14px; font-weight: 800; }
.offer-recap-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.offer-recap-price { font-size: 16px; font-weight: 900; color: var(--primary-strong); white-space: nowrap; }

.recap-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin: 16px 0; }
.recap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.recap-row-label { color: var(--text-secondary); font-weight: 600; }
.recap-row-value { font-weight: 800; color: var(--text-primary); text-align: right; }
.recap-row.emphasize .recap-row-label { font-size: 14px; color: var(--text-primary); font-weight: 800; }
.recap-row.emphasize .recap-row-value { font-size: 16px; color: var(--primary-strong); }
.recap-divider { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }

.payment-method-list { display: flex; flex-direction: column; gap: 10px; }
.payment-method-tile { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 14px; cursor: pointer; }
.payment-method-logo { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.payment-method-title { font-size: 14.5px; font-weight: 800; }
.payment-method-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.secure-banner { display: flex; align-items: flex-start; gap: 10px; background: var(--primary-light); border-radius: 14px; padding: 12px 14px; margin-top: 16px; }
.secure-banner-title { font-size: 12.5px; font-weight: 800; color: var(--primary-strong); }
.secure-banner-text { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }

.chosen-method-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 14px; margin-bottom: 16px; }

.points-choice { display: flex; gap: 10px; margin-bottom: 12px; }
.choice-btn { flex: 1; background: #fff; border: 1.6px solid var(--border); border-radius: 14px; padding: 12px 10px; text-align: center; cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--text-secondary); }
.choice-btn.selected { border-color: var(--primary-strong); background: var(--primary-light); color: var(--primary-strong); }
.points-box { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 14px; margin-bottom: 16px; }
.points-box-head { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.points-box-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.4; }
.points-input-row { display: flex; gap: 10px; }
.points-input-row input { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.points-input-row button { border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 0 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--primary-strong); }
.points-error { color: var(--danger); font-size: 11.5px; font-weight: 600; margin-top: 8px; }

.info-banner { display: flex; align-items: flex-start; gap: 8px; background: var(--info-bg); border-radius: 14px; padding: 12px 14px; margin-top: 16px; font-size: 12px; color: var(--info); font-weight: 600; line-height: 1.4; }
.error-banner { display: flex; align-items: flex-start; gap: 8px; background: var(--danger-bg); border-radius: 10px; padding: 10px 12px; margin-top: 12px; font-size: 12.5px; color: var(--danger); font-weight: 600; }

.wizard-cta { width: 100%; border: 0; border-radius: 14px; padding: 15px; font-size: 14.5px; font-weight: 800; cursor: pointer; background: var(--primary); color: #fff; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.wizard-cta:disabled { opacity: 0.5; cursor: not-allowed; }
.wizard-cta-outline { width: 100%; border: 1px solid var(--border); background: #fff; color: var(--text-primary); border-radius: 14px; padding: 13px; font-size: 13.5px; font-weight: 700; cursor: pointer; margin-top: 10px; }
.wizard-secure-note { text-align: center; font-size: 11.5px; color: var(--text-secondary); font-weight: 600; margin-top: 16px; }

.loading-row { text-align: center; padding: 24px; color: var(--text-secondary); font-size: 13px; }

/* --- Page de statut (status/index.html) — reproduit credit_sent_screen.dart --- */
.status-body { min-height: 100vh; background: var(--primary-lighter); }
.status-main { max-width: 480px; margin: 0 auto; padding: 36px 24px; text-align: center; }
.status-icon-circle { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 46px; margin: 0 auto 20px; }
.status-title { font-size: 20px; font-weight: 900; margin-bottom: 8px; }
.status-amount { font-size: 24px; font-weight: 900; color: var(--primary-strong); margin-bottom: 6px; }
.status-message { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }

/* --- Historique (Étape 7) — reproduit history_screen.dart / order_detail_screen.dart --- */
.history-main { max-width: 560px; margin: 0 auto; padding: 14px 16px 90px; }
.history-tile { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 10px; cursor: pointer; }
.history-tile-top { display: flex; align-items: center; gap: 12px; }
.history-tile-body { flex: 1; min-width: 0; }
.history-tile-title { font-size: 13.5px; font-weight: 800; color: var(--text-primary); }
.history-tile-phone { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.history-tile-date { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.history-tile-amount { font-size: 13px; font-weight: 800; color: var(--text-primary); flex-shrink: 0; }
.history-tile-amount.success { color: var(--success); }
.history-tile-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.history-tile-pills { display: flex; gap: 6px; }
.history-tile-ref { font-size: 10.5px; color: var(--text-faint); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.detail-hero { border-radius: 20px; padding: 18px; text-align: center; color: #fff; margin-bottom: 16px; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-strong) 100%); }
.detail-hero-amount { font-size: 24px; font-weight: 900; margin: 10px 0 4px; }
.detail-hero-title { font-size: 12.5px; opacity: 0.8; margin-bottom: 12px; }

.detail-row-group { padding: 7px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.detail-row-group-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

.countdown-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--warning-bg); color: var(--warning); border-radius: 30px; padding: 10px 14px; font-size: 12.5px; font-weight: 800; margin: 18px auto 12px; }
.countdown-wrap { text-align: center; }

.claim-prompt, .claim-status { border-radius: 14px; padding: 14px; margin-top: 16px; display: flex; align-items: flex-start; gap: 8px; }
.claim-prompt { background: var(--warning-bg); flex-direction: column; align-items: stretch; }
.claim-prompt-head { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 800; color: var(--warning); margin-bottom: 10px; }
.claim-status.success { background: var(--success-bg); }
.claim-status.danger { background: var(--danger-bg); }
.claim-status.info { background: var(--info-bg); }
.claim-status-title { font-size: 13px; font-weight: 800; }
.claim-status-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.modal-overlay.hidden { display: none; }
.modal-sheet { background: #fff; border-radius: 24px 24px 0 0; padding: 20px 20px 28px; width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; }
.modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 16px; }
.modal-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.modal-subtitle { font-size: 12px; color: var(--text-secondary); margin-bottom: 16px; }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.modal-field select, .modal-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px; padding: 12px; font-size: 14px; font-family: inherit; background: #fafcfb; }
.modal-field textarea { resize: vertical; min-height: 80px; }

.share-receipt-btn { width: 100%; border: 1px solid var(--border); background: #fff; color: var(--text-primary); border-radius: 14px; padding: 13px; font-size: 13.5px; font-weight: 700; cursor: pointer; margin-top: 20px; }

/* --- Points & Parrainage (Étape 8) — reproduit loyalty_screen.dart / referral_screen.dart --- */
.points-subnav { display: flex; gap: 8px; background: var(--primary-lighter); border-radius: 14px; padding: 4px; margin-bottom: 18px; }
.points-subnav-btn { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 11px; font-weight: 800; font-size: 13px; color: var(--primary-dark); cursor: pointer; }
.points-subnav-btn.active { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.points-panel.hidden { display: none; }

.points-hero-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.points-hero-label { color: rgba(255,255,255,0.85); font-size: 12.5px; font-weight: 700; margin-top: 14px; }
.points-hero-balance { color: #fff; font-size: 28px; font-weight: 900; margin-top: 2px; }
.points-hero-sub { color: rgba(255,255,255,0.85); font-size: 12.5px; font-weight: 700; margin-top: 10px; }

.earn-method-tile { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.earn-method-tile.clickable { cursor: pointer; }
.earn-method-emoji { font-size: 22px; }
.earn-method-title { font-size: 13.5px; font-weight: 800; }
.earn-method-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.35; }

.progress-bar-track { height: 8px; background: var(--divider); border-radius: 8px; overflow: hidden; margin: 10px 0; }
.progress-bar-fill { height: 100%; background: var(--primary-strong); border-radius: 8px; transition: width 0.3s; }

.loyalty-tx-tile, .referee-tile { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.loyalty-tx-emoji { font-size: 18px; }
.loyalty-tx-title { font-size: 13px; font-weight: 700; }
.loyalty-tx-date { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.loyalty-tx-amount { font-size: 13.5px; font-weight: 800; margin-left: auto; }
.loyalty-tx-amount.success { color: var(--success); }
.loyalty-tx-amount.danger { color: var(--danger); }

.referral-code-box { flex: 1; background: rgba(255,255,255,0.14); border-radius: 12px; padding: 12px 14px; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 3px; display: flex; align-items: center; min-height: 20px; }
.referral-code-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.referral-copy-btn { background: rgba(255,255,255,0.14); border: 0; color: #fff; width: 42px; height: 42px; border-radius: 12px; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.referee-tile-sub { font-size: 12px; color: var(--success); font-weight: 700; margin-top: 2px; }

.empty-card { background: var(--surface-muted, #F7FAF8); border-radius: 16px; padding: 20px; text-align: center; color: var(--text-secondary); font-size: 12.5px; }

/* --- Profil / Compte (Étape 9) — reproduit profile_screen.dart et les
   sous-écrans statiques (CGU, Politique de confidentialité, À propos, Aide,
   numéro non modifiable) + le flux de demande de suppression de compte
   (security_screen.dart > _PrivacyGroup, sans le reste de l'écran Sécurité,
   propre à l'appareil mobile et hors périmètre Web). --- */
.profile-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px; margin-bottom: 20px; }
.profile-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex-shrink: 0; }
.profile-name { font-size: 15.5px; font-weight: 800; color: var(--text-primary); }
.profile-phone { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

.profile-tile-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.profile-tile { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; cursor: pointer; text-decoration: none; width: 100%; box-sizing: border-box; text-align: left; font: inherit; }
.profile-tile:disabled, .profile-tile.disabled { opacity: 0.55; cursor: default; }
.profile-tile-emoji { font-size: 19px; }
.profile-tile-label { flex: 1; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.profile-tile-trailing { font-size: 11.5px; color: var(--text-secondary); font-weight: 600; }
.profile-tile.danger .profile-tile-label { color: var(--danger); }

.notif-tile { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 10px; cursor: pointer; }
.notif-tile.unread { background: var(--primary-lighter); }
.notif-tile-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.notif-tile-icon.info { background: var(--info-bg); }
.notif-tile-icon.success { background: var(--success-bg); }
.notif-tile-icon.danger { background: var(--danger-bg); }
.notif-tile-icon.warning { background: var(--warning-bg); }
.notif-tile-body { flex: 1; min-width: 0; }
.notif-tile-title { font-size: 13.5px; color: var(--text-primary); }
.notif-tile.unread .notif-tile-title { font-weight: 800; }
.notif-tile-text { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.notif-tile-date { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

.legal-main { max-width: 560px; margin: 0 auto; padding: 14px 16px 40px; }
.legal-text { font-size: 13px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; }

/* --- Audit UI (polish) ---------------------------------------------------
   1) site.css définit globalement `a:hover { text-decoration: underline; }`
      pour les vrais liens texte (nav marketing, footer, "Retour au site").
      Cette règle (spécificité élément+pseudo-classe) gagne contre une
      simple classe de composant comme `.hero-card{text-decoration:none}`
      (spécificité classe seule) : au survol/tap, le soulignement réapparaît
      malgré le `text-decoration:none` déjà posé. Sur mobile, un tap déclenche
      et "colle" l'état :hover — d'où l'impression de lien souligné au clic.
      Corrigé UNIQUEMENT pour les <a> de l'app Champion stylés comme
      bouton/carte/tuile (jamais comme texte) ; les vrais liens texte
      (ex. "← Retour au site" sur /app/login/) ne sont pas dans cette
      liste et gardent volontairement le soulignement au survol. */
.nav-item, .nav-item:hover, .nav-item:active, .nav-item:focus, .nav-item:visited,
.hero-card, .hero-card:hover, .hero-card:active, .hero-card:focus, .hero-card:visited,
.section-link, .section-link:hover, .section-link:active, .section-link:focus, .section-link:visited,
.order-tile, .order-tile:hover, .order-tile:active, .order-tile:focus, .order-tile:visited,
.wizard-back, .wizard-back:hover, .wizard-back:active, .wizard-back:focus, .wizard-back:visited,
.profile-tile, .profile-tile:hover, .profile-tile:active, .profile-tile:focus, .profile-tile:visited {
  text-decoration: none;
}

/* 2) Aucune carte/tuile cliquable n'avait de retour visuel au tap (ni
      <a>, ni <div> avec un simple addEventListener('click', ...)) : rien
      ne confirmait visuellement la pression avant que la navigation ou le
      changement d'état n'arrive. Ajouté uniformément, purement visuel —
      aucun gestionnaire de clic n'est modifié. */
.operator-card, .operator-pick, .amount-pick, .service-tile, .category-card,
.offer-pick-card, .payment-method-tile, .choice-btn, .history-tile,
.order-tile, .profile-tile, .earn-method-tile.clickable, .notif-tile {
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.operator-card:active, .operator-pick:active, .amount-pick:active,
.service-tile:active, .category-card:active, .offer-pick-card:active,
.payment-method-tile:active, .choice-btn:active, .history-tile:active,
.order-tile:active, .profile-tile:active, .earn-method-tile.clickable:active,
.notif-tile:active {
  transform: scale(0.98);
  background-color: var(--primary-lighter);
}

.hero-card { transition: opacity 0.12s ease; }
.hero-card:active { opacity: 0.88; }

.nav-item, .wizard-back, .section-link {
  transition: opacity 0.12s ease;
}
.nav-item:active, .wizard-back:active, .section-link:active {
  opacity: 0.6;
}

/* 3) États focus clavier visibles — uniquement sur les éléments déjà
      focusables nativement (<a>/<button> réels). Les cartes en <div>
      cliquables (opérateurs, montants, moyens de paiement, etc.) ne sont
      pas focusables au clavier (ni tabindex ni gestion Entrée/Espace) :
      en ajouter un relèverait d'un changement de comportement, pas d'un
      simple polish visuel — signalé dans le rapport plutôt que corrigé
      ici sans autorisation. */
.nav-item:focus-visible, .wizard-back:focus-visible, .section-link:focus-visible,
.hero-card:focus-visible, .profile-tile:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 4) Même constat pour les vrais <button> (CTA principaux/secondaires,
      onglets, copie du code de parrainage) : aucun n'avait de retour de
      pression, au-delà de l'effet navigateur par défaut (quasi invisible
      sur un fond coloré personnalisé). Ajouté uniformément ; les styles
      :disabled existants ne sont pas touchés. */
.wizard-cta, .wizard-cta-outline, .auth-tab, .points-subnav-btn,
.btn-block, .referral-copy-btn, .share-receipt-btn {
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.wizard-cta:not(:disabled):active, .wizard-cta-outline:active, .auth-tab:active,
.points-subnav-btn:active, .btn-block:active, .referral-copy-btn:active,
.share-receipt-btn:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* 5) Accessibilité clavier — cartes/tuiles <div> rendues focusables par
      makeKeyboardClickable() (ui.js) : tabindex="0" + Entrée/Espace
      déclenchent le même click() que la souris. Focus visible cohérent
      avec le reste du site (même style que les <a>/<button> ci-dessus). */
.operator-card:focus-visible, .operator-pick:focus-visible, .amount-pick:focus-visible,
.service-tile:focus-visible, .category-card:focus-visible, .offer-pick-card:focus-visible,
.payment-method-tile:focus-visible, .choice-btn:focus-visible, .history-tile:focus-visible,
.earn-method-tile.clickable:focus-visible, .notif-tile:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 2px;
}