/* PicSous — feuille de style de la PWA.
   Reprend les tokens de app/qml/components/ThemePalette.qml pour que le
   téléphone et le PC se ressemblent : neutres anthracite/ivoire, un seul
   accent doré, et la règle maison « pas de vert » sauf pour les entrées. */

:root {
  --accent:       #C8A24B;
  --accent-mat:   #A8853A;
  --accent-texte: #1A1A17;

  --fond:         #F6F6F3;
  --surface:      #FFFFFF;
  --surface-alt:  #ECEBE6;
  --texte:        #1B1C1F;
  --texte-doux:   #6B6E76;
  --bordure:      #E2E1DB;

  --danger:       #D9534F;
  --entree:       #3FA76A;

  --rayon:        14px;
  --marge:        20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:        #131417;
    --surface:     #1B1D22;
    --surface-alt: #23262D;
    --texte:       #ECEDEF;
    --texte-doux:  #9A9CA3;
    --bordure:     #2D3038;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Pas de flash gris au tap : on gère nous-mêmes le retour visuel. */
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* Les marges de sécurité iOS (encoche, barre d'accueil) s'ajoutent au padding
   plutôt que d'être subies. */
body {
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

.vue { display: none; min-height: 100%; }
/* `position: relative` : ancre le bouton flottant de l'écran Situation. */
.vue.active { display: flex; flex-direction: column; position: relative; }

/* ─────────────────────────── Connexion ─────────────────────────── */

.centre {
  margin: auto;
  padding: var(--marge);
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.marque {
  margin: 0 0 6px;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.marque::first-letter { color: var(--accent); }

.sous-titre { margin: 0 0 28px; color: var(--texte-doux); font-size: 0.95rem; }

form { display: flex; flex-direction: column; gap: 10px; text-align: left; }

label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

input {
  /* 16px minimum : en dessous, iOS zoome automatiquement à la mise au point. */
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  width: 100%;
  transition: border-color 0.15s;
}
input:focus { outline: none; border-color: var(--accent); }

button { font-family: inherit; cursor: pointer; }

.principal {
  margin-top: 6px;
  padding: 15px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-texte);
  background: var(--accent);
  border: none;
  border-radius: var(--rayon);
  transition: background 0.15s, transform 0.1s;
}
.principal:active { background: var(--accent-mat); transform: scale(0.985); }
.principal:disabled { opacity: 0.5; }

.lien {
  margin-top: 18px;
  background: none;
  border: none;
  color: var(--texte-doux);
  font-size: 0.9rem;
  text-decoration: underline;
  padding: 8px;
}

.note { margin-top: 22px; font-size: 0.82rem; color: var(--texte-doux); line-height: 1.5; }

.erreur {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 0.88rem;
  text-align: left;
  line-height: 1.45;
}

/* ─────────────────────────── Situation ─────────────────────────── */

.entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 28px var(--marge) 20px;
}

.etiquette {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.montant-geant {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.etiquette-secondaire {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.icone {
  flex: none;
  width: 42px; height: 42px;
  font-size: 1.2rem;
  color: var(--texte-doux);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 50%;
  transition: transform 0.4s;
}
.icone:active { transform: rotate(180deg); }
.icone.tourne { animation: tourne 0.8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

.comptes {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px var(--marge) var(--marge);
}

.compte {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.compte-emoji {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 1.3rem;
  background: var(--surface-alt);
  border-radius: 10px;
}

.compte-infos { flex: 1; min-width: 0; }

.compte-nom {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compte-type {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--texte-doux);
  text-transform: capitalize;
}

.compte-montant {
  flex: none;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.compte-montant.negatif { color: var(--danger); }

.compte-projete {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--texte-doux);
}

.vide { margin: 40px 0; text-align: center; color: var(--texte-doux); }

.pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--marge) 20px;
  border-top: 1px solid var(--bordure);
}

.etat { margin: 0; font-size: 0.76rem; color: var(--texte-doux); }
.etat.hors-ligne { color: var(--accent); }
.pied .lien { margin: 0; }

/* ─────────────────────────── Dépenses récentes ─────────────────────────── */

.defilant { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.bloc { padding: 8px var(--marge) 90px; }   /* place pour le bouton flottant */

.titre-bloc {
  margin: 8px 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.recentes { display: flex; flex-direction: column; gap: 1px; }

.recente {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  color: inherit;
  font: inherit;
  text-align: left;
}
.recente:first-child { border-radius: var(--rayon) var(--rayon) 0 0; }
.recente:last-child  { border-radius: 0 0 var(--rayon) var(--rayon); }
.recente:only-child  { border-radius: var(--rayon); }
.recente + .recente  { border-top: none; }
.recente:active { background: var(--surface-alt); }

.recente-infos { flex: 1; min-width: 0; }
.recente-libelle {
  margin: 0; font-size: 0.95rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recente-detail { margin: 2px 0 0; font-size: 0.75rem; color: var(--texte-doux); }
.recente-montant {
  flex: none; font-weight: 600; font-variant-numeric: tabular-nums;
}
.recente-montant.depense   { color: var(--danger); }
.recente-montant.entree    { color: var(--entree); }
/* Un virement ne fait ni entrer ni sortir d'argent du patrimoine : il reste
   dans la couleur du texte, sans signe. */
.recente-montant.mouvement { color: var(--texte-doux); }

/* Une ligne prévue n'est pas encore arrivée : elle s'affiche en retrait. */
.recente.prevu .recente-libelle,
.recente.prevu .recente-montant { opacity: 0.62; }

/* Les virements ne s'éditent pas depuis le téléphone (ils portent des
   répartitions d'épargne) : pas de retour tactile qui suggérerait le contraire. */
.recente:disabled { opacity: 1; }
.recente:disabled:active { background: var(--surface); }

.charger-plus {
  margin-top: 10px;
  padding: 13px;
  width: 100%;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texte-doux);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.charger-plus:active { background: var(--surface-alt); }

/* Bouton flottant : atteignable au pouce, c'est le geste le plus fréquent. */
.flottant {
  position: absolute;
  right: var(--marge);
  bottom: calc(72px + env(safe-area-inset-bottom));
  width: 58px; height: 58px;
  font-size: 2rem; line-height: 1;
  color: var(--accent-texte);
  background: var(--accent);
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.1s;
}
.flottant:active { transform: scale(0.93); background: var(--accent-mat); }

/* ─────────────────────────── Saisie ─────────────────────────── */

#vue-saisie.active { padding-bottom: 12px; }

.entete-saisie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--marge) 6px;
}
.titre-saisie { font-weight: 600; font-size: 0.95rem; }
.entete-saisie .lien { margin: 0; text-decoration: none; }
.lien.danger { color: var(--danger); }

.montant-saisie {
  margin: 10px 0 4px;
  text-align: center;
  font-size: 3rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.segments {
  display: flex;
  gap: 6px;
  margin: 6px var(--marge) 10px;
  padding: 4px;
  background: var(--surface-alt);
  border-radius: 12px;
}
.segment {
  flex: 1;
  padding: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texte-doux);
  background: none;
  border: none;
  border-radius: 9px;
}
.segment.actif { color: var(--texte); background: var(--surface); }

.champs-saisie {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 var(--marge);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}

.ligne-champ {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface);
}
.ligne-champ + .ligne-champ { border-top: 1px solid var(--bordure); }
.ligne-champ > span {
  flex: none; width: 84px;
  font-size: 0.85rem; color: var(--texte-doux);
}
.ligne-champ select,
.ligne-champ input {
  flex: 1; min-width: 0;
  padding: 0; margin: 0;
  font-size: 16px;                 /* en dessous, iOS zoome à la mise au point */
  color: var(--texte);
  background: none;
  border: none;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
}
.ligne-champ select:focus,
.ligne-champ input:focus { outline: none; }

.pave {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px var(--marge) 10px;
}
.pave button {
  padding: 15px 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  transition: background 0.1s;
}
.pave button:active { background: var(--surface-alt); }
.pave .secondaire { color: var(--texte-doux); }

.principal.large {
  margin: 0 var(--marge);
  width: calc(100% - 2 * var(--marge));
}

#erreur-saisie { margin: 12px var(--marge) 0; }

/* ─────────────────────────── Chargement ─────────────────────────── */

.chargement {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--fond) 70%, transparent);
  z-index: 10;
}

/* ⚠️ Indispensable. L'attribut `hidden` vaut `display: none` dans la feuille
   du navigateur, mais TOUTE règle d'auteur définissant `display` l'emporte sur
   lui — le `display: grid` ci-dessus suffisait donc à rendre le voile visible
   en permanence. Comme il couvre l'écran entier, il interceptait aussi les
   clics : plus moyen de saisir quoi que ce soit. */
.chargement[hidden] { display: none; }

.rotor {
  width: 30px; height: 30px;
  border: 3px solid var(--bordure);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tourne 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}