:root {
  /* Palette précise du design brief */
  --vert: #16A34A;
  --vert-clair: #34D373;    /* haut des dégradés (bouton principal, avatar, hero) */
  --vert-profond: #0F7A37;   /* fond du dégradé + petits textes verts (contraste) */
  --terracotta: #C2703D;
  --terracotta-texte: #A35825; /* même teinte, assombrie pour les petits textes */
  --terracotta-clair: #E5B98F;  /* statut "à venir", plus doux que "en retard" */
  --fond: #EFE7D6;
  --carte: #FFFFFF;
  --gris-fond: #F3F4F6;
  --gris-bordure: #E5E7EB;
  --texte: #1F2937;
  --texte-clair: #6B7280;
  /* Teintes supplémentaires réservées aux avatars clients (variété visuelle
     dans les listes), pas utilisées ailleurs dans l'interface. */
  --avatar-indigo: #6C7BC2;
  --avatar-sarcelle: #4B8E8D;
  --ombre: 31, 41, 55;
  --rayon: 22px;
  --degrade-vert: linear-gradient(135deg, var(--vert-clair) 0%, var(--vert) 55%, var(--vert-profond) 100%);
  --ombre-carte: 0 1px 3px rgba(var(--ombre), 0.05), 0 14px 28px -10px rgba(var(--ombre), 0.13);
}

* { box-sizing: border-box; }

/* ---------- Mouvement ----------
   Les écrans ont déjà une animation d'entrée (voir ecranApparition plus
   bas) ; celles-ci couvrent ce qui manquait encore : les cartes d'une
   liste qui apparaissent en cascade, et un petit "pop" de célébration.
   Se rejouent nativement à chaque display:none → visible, sans JS. */
@keyframes entree-carte {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pop-icone {
  0% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-delay: 0s !important; }
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(560px circle at 12% -8%, rgba(22, 163, 74, 0.08), transparent 60%),
    radial-gradient(480px circle at 100% 0%, rgba(194, 112, 61, 0.05), transparent 55%),
    var(--fond);
  background-repeat: no-repeat;
  color: var(--texte);
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 108px;
}

.entete {
  padding: calc(26px + env(safe-area-inset-top)) 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#app.verrouille .entete {
  display: none;
}
.marque {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bouton-marque {
  border: none;
  background: none;
  padding: 6px;
  margin: -6px;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.bouton-marque:active {
  opacity: 0.6;
  transform: scale(0.96);
}
.marque-logo {
  display: block;
  border-radius: 6px;
}
.marque-texte {
  font-size: 15px;
  font-weight: 700;
  color: var(--texte);
}
.bouton-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--gris-fond);
  color: var(--texte-clair);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
}
.bouton-avatar:active {
  opacity: 0.7;
  transform: scale(0.94);
}
.bouton-avatar.avatar-connecte {
  background: var(--degrade-vert);
  color: white;
  box-shadow: 0 3px 10px -2px rgba(22, 163, 74, 0.45);
}
#avatar-initiale {
  font-size: 16px;
  font-weight: 700;
}
#avatar-point-vert {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vert);
  border: 2px solid var(--fond);
}

.ecran {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@keyframes ecranApparition {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ecran:not(.cache) {
  animation: ecranApparition 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.carte {
  background: var(--carte);
  border-radius: var(--rayon);
  padding: 28px;
  box-shadow: var(--ombre-carte);
}

.etiquette {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texte-clair);
  margin: 0 0 6px;
}

.bandeau-sauvegarde {
  background: var(--gris-fond);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bandeau-sauvegarde-texte {
  font-size: 14px;
  color: var(--texte);
  margin: 0;
  line-height: 1.45;
}
.bandeau-sauvegarde-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bouton-bandeau {
  flex: none;
  min-height: auto;
  padding: 10px 18px;
  font-size: 14px;
}
.lien-bandeau {
  border: none;
  background: none;
  color: var(--texte-clair);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.lien-sauvegarde-bas {
  border: none;
  background: none;
  color: var(--texte-clair);
  font-size: 13px;
  text-align: center;
  text-decoration: underline;
  padding: 4px;
  margin: 0;
  cursor: pointer;
}
#carte-invite-compte:not(.cache) {
  animation: ecranApparition 0.3s ease;
}

/* ---------- Sauvegarde en ligne (compte) ----------
   C'est le vrai moment de bascule vers un futur abonnement payant : ça
   mérite un traitement plus soigné qu'un bandeau gris neutre comme les
   autres notices de l'app (même dégradé/ombre douce que la carte héros,
   pour que ça se sente "premium" plutôt qu'"administratif"). */
.bandeau-sauvegarde-icone {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #E4F9EB, #D6F3E0 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
}
.bandeau-sauvegarde-icone-mini {
  width: 34px;
  height: 34px;
  font-size: 16px;
}
.bandeau-sauvegarde-valorise {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(150deg, #FFFFFF 0%, #FFFFFF 45%, #F0FAF3 100%);
  box-shadow: 0 10px 24px -10px rgba(22, 163, 74, 0.18), 0 2px 6px rgba(var(--ombre), 0.04);
}
.bandeau-sauvegarde-corps {
  flex: 1;
  min-width: 0;
}
.bandeau-sauvegarde-titre {
  font-size: 15px;
  font-weight: 700;
  color: var(--texte);
  margin: 4px 0 4px;
}
.bandeau-sauvegarde-valorise .bandeau-sauvegarde-texte {
  margin: 0 0 12px;
}
.bandeau-sauvegarde-valorise .bandeau-sauvegarde-actions {
  flex-wrap: wrap;
  row-gap: 10px;
}

.carte-sauvegarde-cloud {
  padding: 22px;
}
.entete-sauvegarde-cloud {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.entete-sauvegarde-cloud h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--texte);
}
.liste-avantages-cloud {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.liste-avantages-cloud li {
  font-size: 14px;
  color: var(--texte);
  line-height: 1.4;
  padding-left: 24px;
  position: relative;
}
.liste-avantages-cloud li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--vert);
  font-weight: 700;
}
.entete-valeur-inscription {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -8px 0 4px;
}
.entete-valeur-inscription p {
  margin: 0;
  font-size: 14px;
  color: var(--texte-clair);
  line-height: 1.4;
}

.carte-priorite {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 38px 24px;
  /* Seule carte "point focal" de l'app : un dégradé très doux + une ombre
     légèrement teintée de vert pour qu'elle se détache comme le point
     d'ancrage visuel de l'écran d'accueil. */
  background: linear-gradient(165deg, #FFFFFF 0%, #FFFFFF 55%, #F0FAF3 100%);
  box-shadow: 0 14px 32px rgba(22, 163, 74, 0.1), 0 2px 6px rgba(var(--ombre), 0.04);
}
.carte-priorite::before {
  content: '';
  position: absolute;
  top: -70px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.12), transparent 70%);
  pointer-events: none;
}
.carte-priorite .etiquette-hero {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texte-clair);
  margin: 0 0 8px;
}
.carte-priorite .montant-hero {
  font-size: 52px;
  font-weight: 800;
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--vert-profond);
}
.carte-priorite .texte-hero {
  font-size: 15px;
  font-weight: 500;
  margin: 14px 0 0;
  line-height: 1.5;
  color: var(--texte);
}
.carte-priorite .texte-hero-vide {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  color: var(--texte);
}

.texte-salutation {
  font-size: 14px;
  font-weight: 500;
  color: var(--texte-clair);
  margin: 0 4px -22px;
}

/* Pied de carte des statistiques, à l'intérieur de .carte-priorite : un
   seul point focal fort (le héros au-dessus) plutôt que deux cartes
   blanches de même poids qui se disputaient l'attention. Les stats
   restent lisibles mais clairement secondaires (plus petites, séparées
   par un simple filet, pas leur propre carte/ombre). */
.carte-stats-footer {
  position: relative;
  display: flex;
  align-items: stretch;
  text-align: center;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(31, 41, 55, 0.08);
}
.stat-item {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stat-item + .stat-item {
  border-left: 1px solid var(--gris-bordure);
}
.stat-item-cliquable {
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.stat-item-cliquable:active {
  background-color: var(--gris-fond);
  transform: scale(0.97);
}
.stat-valeur {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.1px;
  color: var(--texte);
  /* Un montant long passe sur 2 lignes (le nombre, puis "FCFA") plutôt que
     d'être tronqué avec "…" — testé avec des montants à 6-7 chiffres. */
  overflow-wrap: break-word;
}
.stat-valeur-vert { color: var(--vert-profond); }
.stat-valeur-terracotta { color: var(--terracotta-texte); }
.stat-etiquette {
  font-size: 10px;
  color: var(--texte-clair);
  margin: 3px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-compteur {
  font-size: 14px;
  font-weight: 700;
  color: var(--vert-profond);
  margin: 0 0 2px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.badge-compteur.visible {
  opacity: 1;
}

.section-liste h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--texte);
}
.entete-section-a-relancer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.entete-section-a-relancer h2 {
  margin: 0;
}
.lien-relancer-tous {
  border: none;
  background: none;
  color: var(--vert-profond);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px;
  margin-bottom: 12px;
  white-space: nowrap;
}

/* ---------- Relance groupée ----------
   Impossible techniquement d'envoyer plusieurs messages WhatsApp en un
   seul geste (quitter vers WhatsApp interrompt toujours l'app, sur iOS
   comme sur le web) : ce flux guidé enchaîne les clients un par un, en
   avançant tout seul dès qu'on revient dans l'app après chaque envoi. */
.progression-relance-groupee {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-clair);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 16px;
}
.carte-relance-groupee {
  text-align: center;
}
.ligne-client-relance-groupee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.ligne-client-relance-groupee .nom-client {
  font-size: 19px;
  font-weight: 700;
  color: var(--texte);
}
.carte-relance-groupee .bouton {
  margin-top: 22px;
}
.carte-relance-groupee .lien-bandeau {
  display: block;
  margin: 14px auto 0;
}

.liste-clients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ligne-client {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--carte);
  border-radius: 18px;
  padding: 18px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(var(--ombre), 0.04), 0 8px 20px -8px rgba(var(--ombre), 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  animation: entree-carte 0.32s ease backwards;
}
/* Petite cascade : chaque carte arrive un peu après la précédente, jusqu'à
   un plafond pour ne pas faire attendre sur une longue liste. */
.liste-clients > *:nth-child(1) { animation-delay: 0.02s; }
.liste-clients > *:nth-child(2) { animation-delay: 0.06s; }
.liste-clients > *:nth-child(3) { animation-delay: 0.10s; }
.liste-clients > *:nth-child(4) { animation-delay: 0.14s; }
.liste-clients > *:nth-child(n+5) { animation-delay: 0.18s; }
.ligne-client:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(var(--ombre), 0.03);
}

.pastille {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pastille-rouge { background: var(--terracotta); }
.pastille-orange { background: var(--terracotta-clair); }

/* Cartes teintées : un coup d'œil sur la liste suffit à voir qui est en
   retard (rouge) vs à venir (orange), sans avoir à lire chaque montant. */
.ligne-client-retard {
  background: linear-gradient(135deg, rgba(194, 112, 61, 0.09), var(--carte) 60%);
  border-left: 4px solid var(--terracotta);
}
.ligne-client-a-venir {
  background: linear-gradient(135deg, rgba(229, 185, 143, 0.22), var(--carte) 60%);
  border-left: 4px solid var(--terracotta-clair);
}

/* Avatar rond avec initiale : rend la liste plus humaine et aide à repérer
   un client en un coup d'œil. La couleur est choisie automatiquement (et
   toujours la même) à partir du nom, parmi une palette limitée à la marque. */
.avatar-client {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
}
.avatar-1 { background: var(--vert); }
.avatar-2 { background: var(--terracotta); }
.avatar-3 { background: var(--vert-profond); }
.avatar-4 { background: var(--avatar-indigo); }
.avatar-5 { background: var(--terracotta-texte); }
.avatar-6 { background: var(--avatar-sarcelle); }

.nom-client {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.montant-du {
  font-size: 15px;
  font-weight: 700;
  color: var(--terracotta-texte);
  white-space: nowrap;
}
.montant-a-jour {
  font-size: 13px;
  font-weight: 600;
  color: var(--vert-profond);
  white-space: nowrap;
}

.bouton-whatsapp-ligne {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--degrade-vert);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 3px 8px -2px rgba(22, 163, 74, 0.45);
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.bouton-whatsapp-ligne:active {
  opacity: 0.85;
  transform: scale(0.93);
}

.liste-vide {
  list-style: none;
  color: var(--texte-clair);
  padding: 22px;
  text-align: center;
}

.barre-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--carte);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  box-shadow: 0 -2px 14px rgba(var(--ombre), 0.06);
}

.bouton {
  flex: 1;
  border: none;
  border-radius: 16px;
  padding: 18px 12px;
  font-size: 16px;
  font-weight: 700;
  min-height: 56px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.15s ease;
}
.bouton:active {
  transform: scale(0.97);
  opacity: 0.92;
}
.bouton-principal {
  background: var(--degrade-vert);
  color: white;
  box-shadow: 0 6px 16px -4px rgba(22, 163, 74, 0.4);
}
.bouton-principal:active {
  box-shadow: 0 2px 8px -2px rgba(22, 163, 74, 0.35);
}
.bouton-secondaire {
  background: var(--carte);
  color: var(--texte);
  border: 1.5px solid var(--gris-bordure);
}
.bouton-contour-vert {
  background: var(--carte);
  color: var(--vert);
  border: 1.5px solid var(--vert);
}
/* Le bouton "Relancer" de la fiche client est volontairement discret
   (un seul bouton vert "principal" par écran : Encaisser), mais son icône
   WhatsApp reste verte pour rester reconnaissable. */
#icone-relancer-client {
  color: var(--vert);
  display: inline-flex;
}

.bouton-pleine-largeur {
  width: 100%;
}

.cache {
  display: none !important;
}

.entete-ecran {
  padding: calc(26px + env(safe-area-inset-top)) 16px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.entete-ecran h2 {
  font-size: 19px;
  margin: 0;
}

.bouton-retour {
  border: none;
  background: none;
  color: var(--texte);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.bouton-retour:active {
  opacity: 0.6;
}

.formulaire {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contenu-code-oublie {
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contenu-code-oublie .bouton {
  margin-top: 8px;
  text-decoration: none;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.etiquette-champ {
  font-size: 15px;
  font-weight: 600;
  color: var(--texte);
}

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="number"],
.champ input[type="date"],
.champ input[type="url"],
.champ select {
  font-size: 18px;
  padding: 14px;
  border-radius: 14px;
  border: 1.5px solid var(--gris-bordure);
  background: var(--carte);
  color: var(--texte);
  width: 100%;
  transition: border-color 0.15s ease;
}
.champ select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.champ input:focus,
.champ select:focus {
  outline: none;
  border-color: var(--vert);
}

/* Champ avec badge de validation (ex. lien Wave) : l'input garde toute la
   largeur, le badge se pose par-dessus à droite sans changer la mise en
   page quand il apparaît/disparaît. */
.champ-avec-badge {
  position: relative;
}
.champ-avec-badge input {
  padding-right: 92px;
}
.badge-validation {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--vert-profond);
  background: rgba(22, 163, 74, 0.1);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Petite notification temporaire en bas d'écran (ex. après "Enregistrer") :
   seule confirmation visuelle qu'une action a bien fonctionné. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(100px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(10px);
  background: var(--texte);
  color: white;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 24px -6px rgba(var(--ombre), 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 60;
  max-width: calc(100% - 48px);
  text-align: center;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.aide-champ {
  font-size: 13px;
  color: var(--texte-clair);
  margin: 0;
}

.boutons-rapides {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.bouton-choix {
  flex: 1;
  border: 1.5px solid var(--gris-bordure);
  background: var(--carte);
  color: var(--texte);
  border-radius: 14px;
  padding: 12px 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.bouton-choix-actif {
  border-color: var(--vert);
  background: var(--vert);
  color: white;
}

#etape-choix-client {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bandeau-client-selectionne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gris-fond);
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 16px;
}

.lien-changer {
  border: none;
  background: none;
  color: var(--texte);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}

.ecran-contenu {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.carte-solde {
  text-align: center;
}
.montant-reste {
  font-size: 42px;
  font-weight: 800;
  margin: 4px 0 0;
  color: var(--terracotta);
  letter-spacing: -0.3px;
}
.carte-solde.solde-paye {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(22, 163, 74, 0.03));
}
.carte-solde.solde-paye .montant-reste {
  color: var(--vert-profond);
}
.sous-texte-solde {
  font-size: 14px;
  color: var(--texte-clair);
  margin: 6px 0 0;
}

.barre-progression {
  width: 100%;
  height: 12px;
  background: var(--gris-fond);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 18px;
}
.barre-progression-remplissage {
  height: 100%;
  width: 0%;
  background: var(--degrade-vert);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.boutons-action-fiche {
  display: flex;
  gap: 10px;
}

.bouton-vert {
  background: var(--vert);
  color: white;
}

.bouton-avec-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.section-liste h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--texte);
}

.ligne-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--carte);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(var(--ombre), 0.04), 0 8px 20px -8px rgba(var(--ombre), 0.11);
}
.ligne-detail-haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.ligne-detail-titre {
  font-size: 15px;
  font-weight: 600;
}
.ligne-detail-montant {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.ligne-detail-montant-du { color: var(--terracotta-texte); }
.ligne-detail-montant-paye { color: var(--vert-profond); }
.ligne-detail-sous-texte {
  font-size: 13px;
  color: var(--texte-clair);
  margin: 0;
}
.ligne-detail-sous-texte.ligne-detail-echeance {
  color: var(--vert-profond);
  font-weight: 600;
}

.ligne-detail-cliquable {
  cursor: pointer;
  transition: transform 0.12s ease;
}
.ligne-detail-cliquable:active {
  transform: scale(0.98);
}

.actions-fiche-client {
  display: flex;
  gap: 10px;
  padding: 0 16px 20px;
}
.bouton-action-discrete {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--gris-fond);
  border: none;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-clair);
  cursor: pointer;
}
.bouton-action-discrete.bouton-action-danger {
  color: var(--terracotta-texte);
}

.bouton-danger {
  background: var(--terracotta);
  color: white;
}
.bouton-danger-contour {
  background: var(--carte);
  color: var(--terracotta-texte);
  border: 1.5px solid var(--terracotta-clair);
}

#ecran-confirmation-suppression {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ecran-confirmation-contenu {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}
.icone-confirmation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FBEEE3, #F7E1CE 70%);
  font-size: 42px;
  line-height: 1;
}
.titre-confirmation {
  font-size: 22px;
  font-weight: 800;
  color: var(--texte);
  margin: 14px 0 0;
}
.texte-confirmation {
  color: var(--texte-clair);
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 34px;
}
.boutons-confirmation {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#ecran-victoire {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ecran-victoire-contenu {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}
.icone-victoire {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #E4F9EB, #D6F3E0 70%);
  box-shadow: 0 10px 26px -8px rgba(22, 163, 74, 0.35);
  font-size: 50px;
  line-height: 1;
  animation: pop-icone 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.titre-victoire {
  font-size: 26px;
  font-weight: 800;
  color: var(--vert-profond);
  margin: 10px 0 0;
}
.montant-victoire {
  font-size: 30px;
  font-weight: 800;
  margin: 8px 0 4px;
  color: var(--texte);
}
.sous-texte-victoire {
  color: var(--texte-clair);
  font-size: 15px;
  margin: 0 0 34px;
}
.boutons-victoire {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Écran de verrouillage par code PIN */
#ecran-code-pin {
  flex: 1;
}
.ecran-code-pin-contenu {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 24px;
}
.marque-verrouillage {
  margin-bottom: 30px;
}
.marque-verrouillage .marque-logo {
  width: 36px;
  height: 36px;
}
.marque-verrouillage .marque-texte {
  font-size: 20px;
}
.texte-code-pin {
  font-size: 15px;
  color: var(--texte-clair);
  margin: 0 0 24px;
  text-align: center;
}
.points-code-pin {
  display: flex;
  gap: 18px;
  margin-bottom: 8px;
}
.point-code {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--gris-bordure);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.point-code.point-rempli {
  background: var(--vert);
  border-color: var(--vert);
}
.erreur-code-pin {
  color: var(--terracotta-texte);
  font-size: 14px;
  min-height: 20px;
  margin: 10px 0 6px;
  text-align: center;
}
.clavier-code-pin {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 280px;
  margin-top: auto;
}
.clavier-code-pin.desactive {
  opacity: 0.5;
  pointer-events: none;
}
.touche-code {
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: var(--carte);
  box-shadow: 0 1px 5px rgba(var(--ombre), 0.07);
  font-size: 25px;
  font-weight: 700;
  color: var(--texte);
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease;
}
.touche-code:active {
  background: var(--gris-fond);
  transform: scale(0.94);
}
.touche-code-vide {
  background: transparent;
  box-shadow: none;
  cursor: default;
}
.touche-code-effacer {
  font-size: 19px;
  color: var(--texte-clair);
}
.lien-annuler-code {
  border: none;
  background: none;
  color: var(--texte-clair);
  font-size: 15px;
  text-decoration: underline;
  padding: 16px;
  margin-top: 16px;
  cursor: pointer;
}

/* Section Sécurité (réglages) */
.section-securite {
  padding: 4px 16px 16px;
}
.section-securite h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--texte);
}
#bloc-compte-deconnecte,
#bloc-compte-connecte {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ligne-compte-connecte {
  font-size: 15px;
  margin: 0;
}
.ligne-statut-sync {
  font-size: 13px;
  margin: 6px 0 16px;
  color: var(--texte-clair);
}
.ligne-statut-sync.statut-sync-erreur {
  color: var(--terracotta-texte);
}
.ligne-interrupteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  cursor: pointer;
}
.interrupteur {
  appearance: none;
  -webkit-appearance: none;
  width: 48px;
  height: 28px;
  background: var(--gris-bordure);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.interrupteur::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(var(--ombre), 0.2);
}
.interrupteur:checked {
  background: var(--vert);
}
.interrupteur:checked::before {
  transform: translateX(20px);
}


/* ---------- Message de relance personnalisable (1.0.1) ---------- */
.champ-message textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid #e2e2dc; border-radius: 14px; background: #fff; resize: vertical; line-height: 1.4; }
.variables-message { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.variable-chip { font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 999px; border: 1px solid #c9e6d3; background: #eaf7ef; color: #0f7d38; cursor: pointer; }
.etiquette-apercu { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #6b7280; margin: 6px 0 6px; }
.apercu-message { white-space: pre-wrap; background: #d9fdd3; border-radius: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.4; margin: 0 0 12px; overflow-wrap: anywhere; }
.actions-message { display: grid; gap: 8px; margin-bottom: 16px; }
.section-liens-legaux { display: grid; gap: 6px; justify-items: start; }

/* Bilan de la relance groupée (1.0.1) */
.detail-victoire { margin: 0 0 18px; color: #4b5563; line-height: 1.4; text-align: center; }
.detail-victoire:empty { display: none; }


/* ---------- Onboarding (1.0.2) : présentation avant le premier usage ---------- */
#ecran-onboarding { min-height: calc(100dvh - 70px); display: flex; flex-direction: column; padding: 0; }
.onb-haut { display: flex; justify-content: flex-end; padding: 6px 12px 0; min-height: 34px; }
.onb-piste { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.onb-piste::-webkit-scrollbar { display: none; }
.onb-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 24px 16px; gap: 10px; overflow-y: auto; }
.onb-icone { font-size: 72px; margin: 0; line-height: 1; }
.onb-titre { font-size: 26px; line-height: 1.2; margin: 6px 0 0; color: #0f3d22; }
.onb-texte { margin: 0; max-width: 360px; font-size: 16px; line-height: 1.5; color: #4b5563; }
.onb-formulaire { width: 100%; max-width: 380px; text-align: left; margin-top: 8px; }
.onb-bas { padding: 8px 20px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.onb-points { display: flex; justify-content: center; gap: 8px; }
.onb-point { width: 8px; height: 8px; border-radius: 50%; background: #cfd6cf; transition: all .2s; }
.onb-point.actif { width: 22px; border-radius: 99px; background: #16a34a; }