/* ============================================
   HORIZON BUDGET v3.3 — CSS Premium Dark
   Fintech · Minimaliste · Émotionnel
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap');

/* ==========================================
   VARIABLES — PALETTE SOMBRE PREMIUM
   ========================================== */
:root {
  /* Noirs & Surfaces sombres */
  --noir:          #0a0f0c;
  --noir-card:     #111814;
  --noir-surface:  #161d19;
  --noir-elevated: #1c2520;
  --noir-border:   #252e29;
  --noir-border2:  #2a342e;

  /* Verts Horizon PME */
  --green-dark:    #1e4d35;
  --green-main:    #2d6a4f;
  --green-mid:     #3d8b65;
  --green-light:   #52a878;
  --green-glow:    #4ade80;
  --green-pale:    rgba(45,106,79,0.15);
  --green-ultra:   rgba(45,106,79,0.08);

  /* Textes */
  --text:          #f0f5f2;
  --text2:         #a8bfb2;
  --text3:         #5a7568;
  --text-muted:    #3d5248;

  /* Statuts */
  --orange:        #f59e0b;
  --orange-bg:     rgba(245,158,11,0.1);
  --orange-border: rgba(245,158,11,0.2);
  --red:           #f87171;
  --red-bg:        rgba(248,113,113,0.1);
  --red-border:    rgba(248,113,113,0.2);
  --green-ok:      #4ade80;
  --green-ok-bg:   rgba(74,222,128,0.1);
  --green-ok-border:rgba(74,222,128,0.2);

  /* Virtuels */
  --pearl:         #94a3b8;
  --pearl-dark:    #cbd5e1;
  --pearl-bg:      rgba(148,163,184,0.08);
  --pearl-border:  rgba(148,163,184,0.15);

  /* Typographies */
  --font-head:     'Playfair Display', serif;
  --font-body:     'DM Sans', sans-serif;

  /* Rayons */
  --radius-sm:     10px;
  --radius-md:     16px;
  --radius-lg:     22px;
  --radius-xl:     30px;

  /* Ombres */
  --shadow-sm:     0 2px 12px rgba(0,0,0,0.3);
  --shadow-md:     0 8px 28px rgba(0,0,0,0.4);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.5);
  --shadow-glow:   0 0 30px rgba(45,106,79,0.2);

  /* Navigation */
  --nav-height:    72px;

  /* Transitions */
  --ease-spring:   cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth:   cubic-bezier(0.4,0,0.2,1);
  --dur-fast:      0.16s;
  --dur-normal:    0.26s;
  --dur-slow:      0.4s;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================
   RESET & BASE
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}
/* Les modales peuvent scroller indépendamment */
.modal {
  overscroll-behavior: contain;
}

body {
  font-family: var(--font-body);
  background: var(--noir);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Autoriser la sélection/saisie dans les champs */
input, textarea, [contenteditable] {
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

/* ==========================================
   APP SHELL
   ========================================== */
#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--noir);
  box-shadow: 0 0 100px rgba(0,0,0,0.8);
}

/* ==========================================
   ÉCRANS + TRANSITIONS
   ========================================== */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(28px);
  transition:
    opacity var(--dur-normal) var(--ease-smooth),
    transform var(--dur-normal) var(--ease-spring);
}

.screen.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  transform: translateX(0);
  z-index: 10;
}

.screen.slide-back {
  transform: translateX(-20px);
  opacity: 0;
}

.screen-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 110px) !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.screen-body::-webkit-scrollbar { display: none; }

/* ==========================================
   STATUS BAR
   ========================================== */
.status-bar {
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 22px 8px;
  font-size: 0.68rem;
  color: var(--text3);
  font-weight: 500;
  flex-shrink: 0;
}

/* ==========================================
   NAVIGATION BAS — DARK PREMIUM
   ========================================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--nav-height);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px env(safe-area-inset-bottom, 10px);
  background: rgba(10,15,12,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--noir-border);
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.55rem;
  color: var(--text3);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-smooth),
    background var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.nav-item.active { color: var(--green-glow); }

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  border-radius: 100px;
  background: var(--green-glow);
  box-shadow: 0 0 8px var(--green-glow);
}

.nav-item:active {
  background: var(--green-ultra);
  transform: scale(0.9);
}

.nav-icon {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.nav-item.active .nav-icon { transform: scale(1.1); }

.nav-add {
  width: 54px;
  height: 54px;
  background: linear-gradient(145deg, var(--green-mid), var(--green-dark));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: white;
  margin-top: -22px;
  box-shadow:
    0 10px 30px rgba(45,106,79,0.5),
    0 0 0 1px rgba(74,222,128,0.1);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast);
}
.nav-add:active {
  transform: scale(0.88);
  box-shadow: 0 4px 14px rgba(45,106,79,0.3);
}

/* ==========================================
   HEADER ÉCRAN
   ========================================== */
.screen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
  flex-shrink: 0;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--noir-card);
  border: 1px solid var(--noir-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--text2);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--dur-fast),
    transform var(--dur-fast) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}
.back-btn:active {
  background: var(--green-pale);
  transform: scale(0.9);
}

.header-title {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

/* ==========================================
   TITRES DE SECTION
   ========================================== */
.section-title {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0 18px;
  margin-bottom: 10px;
  margin-top: 4px;
}

/* ==========================================
   CARDS — DARK GLASSMORPHISM
   ========================================== */
.card {
  background: var(--noir-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--noir-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-glass {
  background: rgba(22,29,25,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--noir-border2);
  box-shadow: var(--shadow-md);
}

.card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--noir-border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,0.05);
}
.card-row:last-child  { border-bottom: none; }
.card-row:active      { background: var(--noir-elevated); }

.row-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.row-info    { flex: 1; min-width: 0; }
.row-label   { font-size: 0.77rem; font-weight: 500; color: var(--text); }
.row-sub     { font-size: 0.62rem; color: var(--text3); margin-top: 2px; }
.row-arrow   { font-size: 0.75rem; color: var(--text3); flex-shrink: 0; }
.row-value   { font-size: 0.75rem; font-weight: 600; color: var(--text2); flex-shrink: 0; }

/* ==========================================
   BADGES
   ========================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.58rem;
  font-weight: 600;
}
.badge-virtual  { background: var(--pearl-bg);    border: 1px solid var(--pearl-border);     color: var(--pearl); }
.badge-fixed    { background: var(--orange-bg);   border: 1px solid var(--orange-border);    color: var(--orange); }
.badge-ok       { background: var(--green-ok-bg); border: 1px solid var(--green-ok-border);  color: var(--green-ok); }
.badge-danger   { background: var(--red-bg);      border: 1px solid var(--red-border);       color: var(--red); }

/* ==========================================
   BARRE DE PROGRESSION
   ========================================== */
.progress-bar {
  height: 4px;
  background: var(--noir-elevated);
  border-radius: 100px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.8s var(--ease-spring);
}

/* ==========================================
   BOUTONS PREMIUM
   ========================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  width: 100%;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast),
    opacity var(--dur-fast);
  letter-spacing: 0.01em;
}
.btn:active { transform: scale(0.95); opacity: 0.88; }

.btn-primary {
  background: linear-gradient(145deg, var(--green-mid), var(--green-dark));
  color: white;
  box-shadow: 0 8px 24px rgba(45,106,79,0.4);
}

.btn-secondary {
  background: var(--noir-card);
  color: var(--text2);
  border: 1px solid var(--noir-border2);
}

.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

/* Bouton Stripe — noir ultra premium */
.btn-stripe {
  background: linear-gradient(135deg, #050a07 0%, #0f1f18 40%, #1e4d35 100%);
  color: white;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(74,222,128,0.1);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(74,222,128,0.08);
}
.btn-stripe::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3s infinite;
}
@keyframes shimmer { 0%{left:-80%} 100%{left:160%} }

/* Bouton Install */
.btn-install {
  background: linear-gradient(135deg, var(--noir-elevated), var(--green-dark));
  color: white;
  border: 1px solid var(--noir-border2);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
}

/* ==========================================
   CHAMPS FORMULAIRE — DARK
   ========================================== */
.field-group {
  padding: 0 16px;
  margin-bottom: 16px;
}

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--noir-card);
  padding: 14px 16px;
  border-bottom: 1px solid var(--noir-border);
  transition: background var(--dur-fast);
}
.field:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.field:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: none; }
.field:only-child  { border-radius: var(--radius-md); border-bottom: none; }
.field:active      { background: var(--noir-elevated); }

.field-label { font-size: 0.6rem; color: var(--text3); margin-bottom: 3px; }
.field-value { font-size: 0.8rem; font-weight: 500; color: var(--text); }
.field-value.empty { color: var(--text3); font-style: italic; }

input[type=text],
input[type=number],
input[type=date] {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px; /* 16px minimum pour éviter le zoom iOS */
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
  color: var(--text);
  width: 100%;
}
input::placeholder { color: var(--text3); }

/* ==========================================
   MONTANT (SAISIE)
   ========================================== */
.amount-display {
  text-align: center;
  padding: 22px 18px 16px;
}
.amount-label {
  font-size: 0.6rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.amount-value {
  font-family: var(--font-head);
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.amount-cursor {
  display: inline-block;
  width: 2px;
  height: 36px;
  margin-left: 3px;
  vertical-align: middle;
  animation: blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ==========================================
   PAVÉ NUMÉRIQUE — DARK
   ========================================== */
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 16px 16px;
}
.num-btn {
  background: var(--noir-card);
  border: 1px solid var(--noir-border);
  border-radius: var(--radius-md);
  padding: 17px;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition:
    background var(--dur-fast),
    transform var(--dur-fast) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}
.num-btn:active {
  background: var(--noir-elevated);
  transform: scale(0.92);
}
.num-btn.confirm {
  background: linear-gradient(145deg, var(--green-mid), var(--green-dark));
  border-color: transparent;
  color: white;
  box-shadow: 0 6px 20px rgba(45,106,79,0.5);
}
.num-btn.confirm:active {
  transform: scale(0.9);
  box-shadow: 0 2px 8px rgba(45,106,79,0.25);
}

/* ==========================================
   TOGGLE TYPE — DARK
   ========================================== */
.type-toggle {
  display: flex;
  margin: 0 16px 16px;
  background: var(--noir-card);
  border-radius: var(--radius-md);
  padding: 4px;
  border: 1px solid var(--noir-border);
}
.toggle-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease-smooth);
  color: var(--text3);
}
.toggle-btn.active-debit  { background:var(--red-bg);      color:var(--red);      border:1px solid var(--red-border); }
.toggle-btn.active-credit { background:var(--green-ok-bg); color:var(--green-ok); border:1px solid var(--green-ok-border); }

/* ==========================================
   CHIPS / FILTRES — DARK
   ========================================== */
.chips-row {
  display: flex;
  gap: 7px;
  padding: 0 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips-row::-webkit-scrollbar { display: none; }

.chip {
  padding: 7px 15px;
  border-radius: 100px;
  background: var(--noir-card);
  border: 1px solid var(--noir-border2);
  font-size: 0.68rem;
  white-space: nowrap;
  color: var(--text2);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-smooth);
  font-weight: 500;
}
.chip.active {
  background: var(--green-pale);
  border-color: var(--green-main);
  color: var(--green-glow);
  font-weight: 600;
}
.chip:active { transform: scale(0.94); }

/* ==========================================
   INFO BOX — DARK
   ========================================== */
.info-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--noir-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--noir-border2);
  padding: 12px 14px;
  margin: 0 16px 16px;
}
.info-icon { font-size: 0.95rem; flex-shrink: 0; margin-top: 1px; }
.info-text { font-size: 0.64rem; color: var(--text2); line-height: 1.55; }
.info-text strong { color: var(--green-glow); font-weight: 600; }

/* ==========================================
   TOGGLE PARAMÈTRES — DARK
   ========================================== */
.param-toggle {
  width: 40px;
  height: 23px;
  border-radius: 100px;
  background: var(--green-main);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-normal);
  box-shadow: 0 0 10px rgba(45,106,79,0.3);
}
.param-toggle::after {
  content: '';
  position: absolute;
  right: 3px; top: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transition: right var(--dur-normal) var(--ease-spring), left var(--dur-normal) var(--ease-spring);
}
.param-toggle.off { background: var(--noir-border2); box-shadow: none; }
.param-toggle.off::after { right: auto; left: 3px; }

/* ==========================================
   MODAL — DARK BOTTOM SHEET
   ========================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-smooth);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  position: fixed;
  bottom: 0;
  left: 50%; transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: 480px;
  background: var(--noir-surface);
  border-radius: 30px 30px 0 0;
  border-top: 1px solid var(--noir-border2);
  padding: 20px 0 0;
  z-index: 151;
  transition: transform var(--dur-slow) var(--ease-spring);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  overscroll-behavior: contain;
  pointer-events: none; /* désactivé par défaut, activé par .open */
}
.modal::-webkit-scrollbar { display: none; }
.modal.open { transform: translateX(-50%) translateY(0); }

.modal-handle {
  width: 36px; height: 4px;
  border-radius: 100px;
  background: var(--noir-border2);
  margin: 0 auto 18px;
}

.modal-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  padding: 0 20px;
  margin-bottom: 18px;
}

/* ==========================================
   TOAST — DARK
   ========================================== */
.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--noir-elevated);
  color: var(--text);
  border: 1px solid var(--noir-border2);
  padding: 11px 24px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  transition:
    opacity var(--dur-normal) var(--ease-smooth),
    transform var(--dur-normal) var(--ease-spring);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================
   ÉTAT VIDE — DARK
   ========================================== */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 52px 28px;
  text-align: center; gap: 12px;
}
.empty-icon  { font-size: 2.4rem; opacity: 0.2; }
.empty-title { font-family: var(--font-head); font-size: 1rem; color: var(--text2); }
.empty-sub   { font-size: 0.72rem; color: var(--text3); line-height: 1.55; max-width: 230px; }

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.animate-in { animation: fadeInUp var(--dur-normal) var(--ease-smooth) forwards; }

@keyframes pulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.6; }
}
.animate-pulse { animation: pulse 2.5s ease-in-out infinite; }

@keyframes spin { to { transform:rotate(360deg); } }
.spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--noir-border2);
  border-top-color: var(--green-main);
  animation: spin 0.8s linear infinite;
  margin: 40px auto;
}

@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 20px rgba(74,222,128,0.15); }
  50%      { box-shadow: 0 0 40px rgba(74,222,128,0.3); }
}

/* ==========================================
   CARTE HERO ACCUEIL — DARK PREMIUM
   ========================================== */
.hero-card {
  margin: 0 16px 14px;
  background: linear-gradient(145deg, #050e09 0%, #0d2318 40%, #1a3d2a 80%, #1e4d35 100%);
  border-radius: 28px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(74,222,128,0.08);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(74,222,128,0.06),
    var(--shadow-glow);
}

/* Orbes décoratifs */
.hero-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,222,128,0.06) 0%, transparent 70%);
}
.hero-card::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -20px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,106,79,0.08) 0%, transparent 70%);
}

/* Texte pédagogique solde */
.hero-pedagogique {
  font-size: 0.58rem;
  color: rgba(74,222,128,0.45);
  line-height: 1.5;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  position: relative;
  z-index: 1;
}

/* ==========================================
   SCORE RING
   ========================================== */
.score-ring-wrap {
  background: var(--noir-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--noir-border);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  margin: 0 16px 14px;
}

/* ==========================================
   CARTE CONSEIL — DARK
   ========================================== */
.conseil-card {
  background: var(--noir-card);
  border: 1px solid var(--noir-border2);
  border-left: 3px solid var(--green-main);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 0 16px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.conseil-icon  { font-size: 1.1rem; flex-shrink: 0; }
.conseil-title { font-size: 0.73rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.conseil-text  { font-size: 0.63rem; color: var(--text2); line-height: 1.5; }

/* ==========================================
   GUIDE DÉMARRAGE — DARK
   ========================================== */
.guide-card {
  background: linear-gradient(145deg, var(--noir-card), var(--noir-elevated));
  border-radius: var(--radius-xl);
  border: 1px solid var(--noir-border2);
  padding: 20px;
  margin: 0 16px 16px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.guide-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,222,128,0.05) 0%, transparent 70%);
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--noir-border);
  cursor: pointer;
  transition: opacity var(--dur-fast);
}
.guide-step:last-child { border-bottom: none; padding-bottom: 0; }
.guide-step:first-child { padding-top: 0; }
.guide-step:active { opacity: 0.7; }

.guide-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green-ultra);
  border: 1px solid var(--green-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--green-glow);
  flex-shrink: 0;
  margin-top: 1px;
}
.guide-step-num.done {
  background: var(--green-ok-bg);
  border-color: var(--green-ok);
  color: var(--green-ok);
}

.guide-step-content { flex: 1; }
.guide-step-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.guide-step-sub {
  font-size: 0.62rem;
  color: var(--text3);
  line-height: 1.4;
}
.guide-step-action {
  font-size: 0.6rem;
  color: var(--green-glow);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 3px;
}

/* ==========================================
   ONGLETS ACCUEIL
   ========================================== */
.accueil-tabs {
  display: flex;
  gap: 7px;
  padding: 0 16px 14px;
  margin-top: -4px;
}
.accueil-tab {
  flex: 1;
  padding: 9px;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease-smooth);
  border: 1px solid var(--noir-border2);
  background: var(--noir-card);
  color: var(--text3);
}
.accueil-tab.active {
  background: var(--green-pale);
  border-color: var(--green-main);
  color: var(--green-glow);
}
.accueil-tab:active { transform: scale(0.96); }

/* ==========================================
   DATE SEPARATOR — RELEVÉ
   ========================================== */
.date-separator {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 18px 5px;
}

/* ==========================================
   STRIPE LATÉRALE
   ========================================== */
.tx-stripe {
  width: 3px;
  height: 32px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* ==========================================
   EMOJI GRID
   ========================================== */
.emoji-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 14px;
}
.emoji-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--noir-card);
  border: 1px solid var(--noir-border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-spring);
}
.emoji-btn:active { transform: scale(0.86); }
.emoji-btn.sel {
  background: var(--green-pale);
  border-color: var(--green-main);
  box-shadow: 0 0 0 2px rgba(45,106,79,0.2);
  transform: scale(1.06);
}

/* ==========================================
   BADGE MENSUEL
   ========================================== */
.badge-mensuel {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--noir-card);
  border: 1px solid var(--noir-border2);
  min-width: 72px; text-align: center;
}
.badge-mensuel-icon  { font-size: 1.4rem; }
.badge-mensuel-label { font-size: 0.52rem; font-weight: 600; color: var(--text2); line-height: 1.2; }
.badge-mensuel.earned {
  background: var(--green-pale);
  border-color: var(--green-main);
  animation: glowPulse 2.5s ease-in-out infinite;
}
.badge-mensuel.earned .badge-mensuel-label { color: var(--green-glow); }

/* ==========================================
   SECTION STRIPE PREMIUM NOIR
   ========================================== */


/* ==========================================
   ONBOARDING — DARK PREMIUM
   ========================================== */
#screen-onboarding {
  position: fixed;
  inset: 0; z-index: 998;
  background: var(--noir);
  display: none; /* caché par défaut, affiché par JS */
  flex-direction: column;
  overflow: hidden;
}

.onboarding-progress {
  display: flex;
  gap: 5px;
  padding: 16px 20px 0;
  flex-shrink: 0;
}
.onboarding-dot {
  flex: 1; height: 2px;
  border-radius: 100px;
  background: var(--noir-border2);
  transition: background var(--dur-normal);
}
.onboarding-dot.done { background: var(--green-main); }

.onboarding-step {
  display: none; flex: 1;
  flex-direction: column;
  padding: 28px 24px 16px;
  overflow-y: auto;
}
.onboarding-step.active { display: flex; }

.onboarding-emoji  { font-size: 3rem; margin-bottom: 18px; }
.onboarding-title  { font-family:var(--font-head); font-size:1.55rem; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.2; }
.onboarding-sub    { font-size:0.8rem; color:var(--text2); line-height:1.6; margin-bottom:24px; }

.onboarding-input-group {
  background: var(--noir-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--noir-border2);
  overflow: hidden;
  margin-bottom: 14px;
}
.onboarding-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--noir-border);
}
.onboarding-input-row:last-child { border-bottom: none; }
.onboarding-input-row input {
  flex: 1; border: none; outline: none;
  font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 500;
  color: var(--text); background: transparent;
}
.onboarding-input-label {
  font-size: 0.6rem; color: var(--text3);
  white-space: nowrap; min-width: 80px;
}
.onboarding-input-icon { font-size: 1rem; flex-shrink: 0; }

.onboarding-conseil {
  background: var(--green-ultra);
  border: 1px solid rgba(74,222,128,0.12);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.68rem;
  color: var(--green-glow);
  line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start;
}

.onboarding-footer {
  padding: 16px 24px;
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 20px));
  flex-shrink: 0;
  display: flex; gap: 10px;
}

/* ==========================================
   ÉCRAN ACTIVATION — DARK
   ========================================== */
#screen-activation {
  position: fixed; inset: 0; z-index: 999;
  background: var(--noir);
  display: none; /* géré par JS — caché par défaut */
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 24px; text-align: center;
}

.activation-card {
  width: 100%; max-width: 340px;
  background: var(--noir-card);
  border-radius: 24px;
  border: 1px solid var(--noir-border2);
  padding: 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-lg);
}

.activation-input {
  width: 100%;
  border: 1px solid var(--noir-border2);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: 'Courier New', monospace;
  font-size: 1rem; font-weight: 700;
  color: var(--green-glow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  outline: none; text-align: center;
  background: var(--noir-elevated);
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 14px;
}
.activation-input:focus {
  border-color: var(--green-main);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.15);
}
.activation-input.error {
  border-color: var(--red);
  background: var(--red-bg);
  color: var(--red);
}
.activation-input.success {
  border-color: var(--green-ok);
  box-shadow: 0 0 0 3px var(--green-ok-bg);
}

.activation-error {
  font-size: 0.7rem; color: var(--red);
  margin-bottom: 12px; display: none;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: 10px; padding: 8px 12px;
}

/* ==========================================
   SUCCESS OVERLAY
   ========================================== */
.success-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--noir);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.success-overlay.show { opacity: 1; pointer-events: all; }

@keyframes successPop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.success-checkmark {
  font-size: 4.5rem;
  margin-bottom: 18px;
  animation: successPop 0.5s var(--ease-spring) forwards;
}

/* ==========================================
   INSTALL MODAL
   ========================================== */
.platform-tabs {
  display: flex; gap: 6px; margin-bottom: 16px;
}
.platform-tab {
  flex: 1; padding: 10px;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.74rem; font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--noir-border2);
  background: var(--noir-card);
  color: var(--text3);
  transition: all var(--dur-fast);
}
.platform-tab.active {
  background: var(--green-pale);
  border-color: var(--green-main);
  color: var(--green-glow);
}

/* ==========================================
   RESPONSIVE DESKTOP
   ========================================== */
@media (min-width: 480px) {
  #app {
    border-radius: 44px;
    margin-top: 20px;
    height: calc(100vh - 40px);
    height: calc(100dvh - 40px);
    box-shadow: 0 0 120px rgba(0,0,0,0.6);
  }
  .bottom-nav { border-radius: 0 0 44px 44px; }
}

/* ============================================
   HORIZON BUDGET v3.3
   Couleurs pastels enveloppes/dépenses/recettes
   Nouvelles modales : dépassement, cagnotte actions, clôture
   ============================================ */

/* ==========================================
   VARIABLES PASTELS — Enveloppes & Transactions
   ========================================== */
:root {
  /* Pastels enveloppes */
  --pastel-vert:        #a7d2bf;
  --pastel-vert-bg:     rgba(167,210,191,0.10);
  --pastel-vert-border: rgba(167,210,191,0.22);

  --pastel-bleu:        #a7c3e6;
  --pastel-bleu-bg:     rgba(167,195,230,0.10);
  --pastel-bleu-border: rgba(167,195,230,0.22);

  --pastel-saumon:        #dcc0a5;
  --pastel-saumon-bg:     rgba(220,185,165,0.10);
  --pastel-saumon-border: rgba(220,185,165,0.22);

  --pastel-mauve:        #c3b9e6;
  --pastel-mauve-bg:     rgba(195,185,230,0.10);
  --pastel-mauve-border: rgba(195,185,230,0.22);

  /* Cagnottes — violet/indigo premium */
  --cagnotte-1:        #a796e6;
  --cagnotte-1-bg:     rgba(167,150,230,0.10);
  --cagnotte-1-border: rgba(167,150,230,0.22);
  --cagnotte-2:        #8c78dc;
  --cagnotte-2-bg:     rgba(140,120,220,0.10);
  --cagnotte-3:        #baaaf0;
  --cagnotte-3-bg:     rgba(190,170,240,0.10);
  --cagnotte-4:        #7864c8;
  --cagnotte-4-bg:     rgba(120,100,200,0.10);
}

/* ==========================================
   RELEVÉ — indicateur couleur type transaction
   ========================================== */
/* Recettes : vert pastel */
.tx-recette .row-value,
.tx-recette .tx-stripe { color: var(--pastel-vert); background: var(--pastel-vert); }

/* Charges fixes : saumon pastel */
.tx-fixe .row-value,
.tx-fixe .tx-stripe   { color: var(--pastel-saumon); background: var(--pastel-saumon); }

/* Charges variables : bleu pastel */
.tx-variable .row-value,
.tx-variable .tx-stripe { color: var(--pastel-bleu); background: var(--pastel-bleu); }

/* ==========================================
   LÉGENDE RAPPROCHEMENT
   ========================================== */
.legende-rapprochement {
  display: flex;
  gap: 10px;
  padding: 6px 16px 10px;
  flex-wrap: wrap;
}
.legende-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  color: var(--text3);
}

/* ==========================================
   MODAL DÉPASSEMENT ENVELOPPE
   ========================================== */
#modal-depassement {
  border-top: 3px solid var(--pastel-saumon);
}

/* ==========================================
   ÉCRAN CAGNOTTE — Boutons action
   ========================================== */
.cagnotte-actions {
  display: flex;
  gap: 10px;
  padding: 0 16px 16px;
}
.cagnotte-btn-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-spring);
  border: none;
}
.cagnotte-btn-action:active { transform: scale(0.95); opacity: 0.85; }

.cagnotte-btn-ajout {
  background: var(--pastel-vert-bg);
  border: 1px solid var(--pastel-vert-border);
  color: var(--pastel-vert);
}
.cagnotte-btn-retrait {
  background: var(--pastel-saumon-bg);
  border: 1px solid var(--pastel-saumon-border);
  color: var(--pastel-saumon);
}

/* ==========================================
   STATISTIQUES — Légende graphique
   ========================================== */
.stats-legende-rec { background: var(--pastel-vert); }
.stats-legende-dep { background: var(--pastel-bleu); }

/* ==========================================
   CHARGES VARIABLES — Style dédié
   ========================================== */
.cv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 0.6rem;
  font-weight: 600;
  background: var(--pastel-bleu-bg);
  border: 1px solid var(--pastel-bleu-border);
  color: var(--pastel-bleu);
}

/* ==========================================
   SAISIE — Chips charges variables rapides
   ========================================== */
#saisie-cv-rapides {
  display: flex;
  gap: 7px;
  padding: 0 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
#saisie-cv-rapides::-webkit-scrollbar { display: none; }

/* ==========================================
   PARAMÈTRES — Bouton clôture de mois
   ========================================== */
.cloture-btn-card {
  margin: 0 16px 16px;
  background: linear-gradient(145deg, rgba(220,185,165,0.08), rgba(220,185,165,0.04));
  border-radius: var(--radius-lg);
  border: 1px solid var(--pastel-saumon-border);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.cloture-btn-card:active { transform: scale(0.98); opacity: 0.85; }

/* ==========================================
   MODAL CLÔTURE
   ========================================== */
#modal-cloture {
  border-top: 3px solid var(--pastel-saumon);
}
.cloture-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--noir-border);
  font-size: 0.73rem;
}
.cloture-detail-row:last-child { border-bottom: none; }
.cloture-detail-label { color: var(--text2); }
.cloture-detail-value { font-weight: 600; color: var(--text); }
.cloture-detail-value.ok { color: var(--pastel-vert); }
.cloture-detail-value.warn { color: var(--pastel-saumon); }

/* ==========================================
   NAVIGATION MOIS — Relevé
   ========================================== */
.mois-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 0;
}
.mois-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--noir-card);
  border: 1px solid var(--noir-border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text2);
  transition: all var(--dur-fast);
  flex-shrink: 0;
}
.mois-nav-btn:active { background: var(--pastel-vert-bg); border-color: var(--pastel-vert-border); transform: scale(0.92); }
.mois-nav-label {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
}

/* ==========================================
   CAGNOTTES — Design violet/indigo
   ========================================== */

/* Hero card cagnotte */
.cagnotte-hero {
  margin: 0 16px 10px;
  background: linear-gradient(145deg, rgba(167,150,230,0.12), rgba(120,100,200,0.06));
  border-radius: 22px;
  border: 1px solid rgba(167,150,230,0.2);
  padding: 20px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(167,150,230,0.08);
}

/* Bouton ajout cagnotte */
.cagnotte-btn-ajout-detail {
  background: rgba(167,150,230,0.1);
  border: 1px solid rgba(167,150,230,0.2);
  color: var(--cagnotte-1);
}
.cagnotte-btn-retrait-detail {
  background: rgba(220,185,165,0.1);
  border: 1px solid rgba(220,185,165,0.2);
  color: var(--pastel-saumon);
}

/* Info box cagnotte */
.info-box-cagnotte {
  border-left: 3px solid rgba(167,150,230,0.4);
  background: rgba(167,150,230,0.04);
}

/* Row icon cagnotte */
.cagnotte-row-icon {
  background: rgba(167,150,230,0.12);
  border: 1px solid rgba(167,150,230,0.2);
}

/* Progress bar cagnotte */
.cagnotte-progress-fill {
  background: var(--cagnotte-1);
  box-shadow: 0 0 8px rgba(167,150,230,0.3);
}

/* Badge cagnotte dans relevé */
.badge-cagnotte {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 0.5rem;
  font-weight: 600;
  background: rgba(167,150,230,0.12);
  border: 1px solid rgba(167,150,230,0.2);
  color: var(--cagnotte-1);
}

/* ==========================================
   FIX CLIQUABILITÉ MOBILE GLOBALE
   ========================================== */
[onclick],
button,
.btn,
.card-row,
.nav-item,
.nav-add,
.num-btn,
.chip,
.tab,
.accueil-tab,
.emoji-btn,
.platform-tab,
.guide-step,
.cagnotte-btn-action,
.modal-handle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,0.04);
  cursor: pointer;
}

/* Les modales doivent avoir pointer-events:auto quand ouvertes */
.modal.open {
  pointer-events: auto;
}
.modal.open * {
  pointer-events: auto;
}

/* Les inputs dans les modales doivent toujours être accessibles */
.modal input,
.modal textarea,
.modal select {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  touch-action: manipulation;
  font-size: 16px !important; /* Empêche le zoom iOS sur focus */
}

/* Fix iOS : empêcher le zoom sur les inputs */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
textarea {
  font-size: 16px !important;
  touch-action: manipulation;
}

/* Les éléments avec display:none ou opacity:0 ne doivent pas capturer les events */
.modal-overlay:not(.open) {
  pointer-events: none !important;
}
.modal:not(.open) {
  pointer-events: none !important;
}
.screen:not(.active) {
  pointer-events: none !important;
}

/* Nav add button */
.nav-add {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Fix : masquer les écrans intermédiaires quand l'app est active */
#app[style*="display: block"] ~ #screen-activation,
#app[style*="display:block"] ~ #screen-activation {
  display: none !important;
}

/* ── Fix iOS : font-size minimum 16px sur tous les champs ── */
input, textarea, select {
  font-size: 16px !important;
  touch-action: manipulation;
}

/* ── iOS Safari — compatibilité tactile ── */

/* Tout élément cliquable doit être tappable */
[onclick],
[data-action],
button,
a {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* #app visible et cliquable */
#app {
  pointer-events: auto;
  visibility: visible;
}





/* Modales fermées — ne pas capter */
.modal:not(.open) {
  pointer-events: none !important;
}
.modal-overlay:not(.open) {
  pointer-events: none !important;
}

/* success-overlay — capter seulement si visible */
#success-overlay:not(.show):not([style*="display: flex"]):not([style*="display:flex"]) {
  pointer-events: none !important;
}

/* version-badge — jamais bloquant */
#version-badge {
  pointer-events: none !important;
}

/* update-banner — cliquable */
#update-banner {
  pointer-events: auto;
}

/* Nav items — tappables */
.nav-item,
.nav-add {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

/* Boutons génériques */
.btn,
.card-row,
.accueil-tab,
.back-btn,
.chip,
.filter-chip,
.num-btn,
.toggle-btn {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}


  .screen.active {
    display: flex !important;
  }
  .screen-body {
    min-height: calc(100dvh - var(--nav-height));
  }
}

/* ── Anti-spinners — saisie propre mobile ── */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
input[inputmode="decimal"],
input[data-montant],
.montant-input {
  font-size: 16px;
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

/* ── Mobile — fix écran noir ── */
@media (max-width: 768px) {

  html, body {
    height: 100%;
    overflow: hidden;
  }

  #app {
    height: 100dvh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    max-width: 480px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--noir) !important;
  }

  .screen {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100dvh;
    background: var(--noir);
  }

  .screen.active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    transform: translateX(0) !important;
  }

  .screen-body {
    flex: 1 1 auto !important;
    min-height: calc(100dvh - 72px) !important;
    max-height: calc(100dvh - 0px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 20px)) !important;
    -webkit-overflow-scrolling: touch;
  }

  .bottom-nav {
    display: flex !important;
    z-index: 999 !important;
  }

  /* Onboarding footer visible sur mobile */
  .onboarding-footer {
    padding-bottom: max(36px, env(safe-area-inset-bottom, 20px));
  }
}

/* ── Safe-area par écran ── */
#screen-parametres .screen-body,
#screen-saisie .screen-body,
#screen-accueil .screen-body,
#screen-cagnottesList .screen-body,
#screen-budgetsVirtuels .screen-body,
#screen-chargesFixes .screen-body,
#screen-chargesVariables .screen-body {
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 130px) !important;
}

.bottom-nav {
  height: calc(var(--nav-height) + var(--safe-bottom)) !important;
  padding-bottom: var(--safe-bottom) !important;
  z-index: 999 !important;
}

/* ── Boutons en bas de modale — safe-area iPhone ── */
.modal .btn:last-child,
.modal > div:last-child {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}