/* GANGAN PWA — feuille unique. Palette et rayons repris TELS QUELS du thème
   Flutter (app_client/lib/theme/app_theme.dart, valeurs extraites du
   ColorScheme.fromSeed réellement construit — jamais réinterprétés).
   L'app force le thème sombre (themeMode: ThemeMode.dark) : la PWA aussi,
   sans bascule — ce n'est pas une préférence, c'est L'identité du produit. */

:root {
  /* Couleurs de marque (identiques à AppTheme.brand / brandBright / accentOrange) */
  --brand: #1b5e20;
  --brand-bright: #2e9e5b;
  --accent-orange: #f28c28;

  /* ColorScheme sombre — valeurs exactes du thème Flutter (dump du 14/08/2026) */
  --bg: #101512;               /* scaffoldBackgroundColor + AppBar (fondus) */
  --surface: #10140f;
  --surface-container: #1d211b;
  --surface-container-high: #262b23;
  --surface-container-highest: #323630; /* valeur EXACTE du dump (bulle admin) */
  --on-surface: #e0e4db;
  --on-surface-variant: #c2c9bd;
  --outline: #8c9388;
  --outline-variant: #424940;
  --on-primary: #0b390f;       /* texte sur bouton primaire (vert) */
  --primary-container: #245023; /* valeur EXACTE du dump (bulle utilisateur) */
  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  /* Couleurs sémantiques codées en dur dans l'app (pas issues du ColorScheme) */
  --incoming: #1b8a3a;   /* Recevoir, crédit, statut Confirmé, KYC vérifié */
  --outgoing: #2563eb;   /* Envoyer, débit */
  --deposit: #7c3aed;    /* Déposer */
  --withdraw: #ef8c00;   /* Retirer, statut En attente, KYC en cours */
  --danger: #d32f2f;     /* statut Échoué, KYC refusé */
  --neutral-status: #6b7280;

  --r-sm: 14px;   /* boutons, champs — RoundedRectangleBorder(14) */
  --r-md: 16px;   /* tuiles, cartes de contenu */
  --r-lg: 24px;   /* carte de solde, dialogues */
  --navh: 64px;   /* hauteur de la barre de navigation basse */

  /* L'app force ThemeMode.dark : on l'annonce au navigateur. SANS cette
     déclaration, tous les contrôles NATIFS (textarea, select, sélecteurs de
     date, barres de défilement) gardent les couleurs CLAIRES par défaut du
     navigateur — fond blanc sous un texte clair, donc illisible. C'était la
     cause des « messages blanc sur blanc » signalés le 14/08. */
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
/* Filet de sécurité anti-débordement : un <select>/<input> dans une ligne
   flex refuse par défaut de rétrécir sous la largeur de son contenu (option
   la plus longue) et pousse le conteneur hors de l'écran. min-width:0
   l'autorise à rétrécir ; rien ne doit déborder, nulle part. */
input, select, textarea { min-width: 0; max-width: 100%; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--on-surface);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* filet de sécurité final : jamais de défilement horizontal */
}

/* La navigation basse est un chrome persistant (comme le BottomNavigationBar
   de HomeScreen) : #ecran laisse la place en bas pour ne jamais passer sous. */
#ecran {
  flex: 1; display: flex; flex-direction: column;
  padding-bottom: calc(var(--navh) + env(safe-area-inset-bottom));
}
#app.sans-session #ecran { padding-bottom: 0; }
main { flex: 1; padding: 16px; }

/* Icônes SVG inline (icons.js) : la couleur suit le texte environnant */
.icone-svg { display: inline-flex; align-items: center; justify-content: center; color: currentColor; }
.icone-svg svg { display: block; }

/* ---- En-tête d'écran (sous-pages) — barre neutre, pas de bandeau coloré :
   fondue dans le fond, comme l'AppBar par défaut de l'app sur une page
   poussée (titre + retour). L'accueil a SA PROPRE barre (voir accueil.js). ---- */
header.barre {
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
header.barre h1 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.2px; flex: 1; }
header.barre .retour {
  background: none; border: none; color: var(--on-surface);
  cursor: pointer; padding: 6px; display: flex; border-radius: 999px;
}
header.barre .retour:active { background: var(--surface-container); }

/* ---- Formulaires ---- */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; color: var(--on-surface); }
/* textarea INCLUS : sans lui, un <textarea> dans un .champ retombait sur les
   couleurs natives du navigateur (fond clair) — voir color-scheme ci-dessus. */
.champ input, .champ select, .champ textarea {
  width: 100%;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-size: 1.05rem;
  background: var(--surface-container);
  color: var(--on-surface);
}
.champ textarea { resize: vertical; font-size: 1rem; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--on-surface-variant); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--brand-bright); border-color: var(--brand-bright); }
.champ .aide { font-size: 0.8rem; color: var(--on-surface-variant); margin-top: 4px; }

.bouton {
  display: block;
  width: 100%;
  background: var(--brand-bright);
  color: var(--on-primary);
  border: none;
  border-radius: var(--r-sm);
  padding: 15px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.bouton:disabled { opacity: 0.5; }
.bouton.secondaire {
  background: transparent; color: var(--brand-bright);
  border: 1.5px solid var(--outline);
}
.bouton.danger { background: var(--danger); color: #fff; }
.bouton + .bouton { margin-top: 10px; }

/* ---- PIN ---- */
.pin-points { display: flex; justify-content: center; gap: 14px; margin: 20px 0; }
.pin-points span {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--brand-bright); display: inline-block;
}
.pin-points span.plein { background: var(--brand-bright); }
.pin-pave {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 260px; margin: 0 auto;
}
.pin-pave button {
  font-size: 1.4rem; padding: 14px; border-radius: var(--r-sm);
  border: 1px solid var(--outline-variant); background: var(--surface-container);
  cursor: pointer; color: var(--on-surface);
}
.pin-pave button:active { background: var(--surface-container-high); }

/* ---- Ligne de transaction (parité _TransactionTile du dashboard) ---- */
.tx-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--r-md);
}
button.tx-tile { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tx-tile .tx-icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tx-tile .tx-icon.in { background: color-mix(in srgb, var(--incoming) 12%, transparent); color: var(--incoming); }
.tx-tile .tx-icon.out { background: color-mix(in srgb, var(--outgoing) 12%, transparent); color: var(--outgoing); }
.tx-tile .tx-info { flex: 1; min-width: 0; }
.tx-tile .tx-title { font-weight: 600; font-size: 0.95rem; }
.tx-tile .tx-sub { font-size: 0.82rem; color: var(--on-surface-variant); margin-top: 2px; }
.tx-tile .tx-right { text-align: right; flex-shrink: 0; }
.tx-tile .tx-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-tile .tx-amount.in { color: var(--incoming); }
.tx-tile .tx-amount.out { color: var(--on-surface); }

/* Ancien alias conservé pour les écrans encore non repris (caisse, admin…) */
.ligne-tx {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--outline-variant);
}
.ligne-tx .sens { font-size: 1.2rem; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ligne-tx .sens.credit { background: color-mix(in srgb, var(--incoming) 14%, transparent); color: var(--incoming); }
.ligne-tx .sens.debit { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.ligne-tx .infos { flex: 1; min-width: 0; }
.ligne-tx .titre { font-weight: 600; font-size: 0.95rem; }
.ligne-tx .date { font-size: 0.8rem; color: var(--on-surface-variant); }
.ligne-tx .valeur { font-weight: 700; white-space: nowrap; }
.ligne-tx .valeur.credit { color: var(--incoming); }
.ligne-tx .valeur.debit { color: var(--danger); }

/* ---- Pastille de statut (Confirmé / En attente / Échoué) ---- */
.status-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; margin-top: 4px;
}
.status-pill.confirme { background: color-mix(in srgb, var(--incoming) 13%, transparent); color: var(--incoming); }
.status-pill.attente { background: color-mix(in srgb, var(--withdraw) 13%, transparent); color: var(--withdraw); }
.status-pill.echoue { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.status-pill.autre { background: color-mix(in srgb, var(--neutral-status) 16%, transparent); color: var(--neutral-status); }

/* ---- Messages ---- */
.msg { border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 16px; font-size: 0.95rem; }
.msg.erreur { background: color-mix(in srgb, var(--error-container) 55%, var(--surface)); color: var(--on-error-container); }
.msg.ok { background: color-mix(in srgb, var(--incoming) 16%, transparent); color: var(--incoming); }
.msg.info { background: color-mix(in srgb, var(--accent-orange) 16%, transparent); color: var(--accent-orange); }

/* ---- Écran vert de caisse (persistant) ---- */
.ecran-vert {
  position: fixed; inset: 0; z-index: 100;
  background: var(--incoming);
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 16px;
}
.ecran-vert .coche { font-size: 4rem; }
.ecran-vert .titre-vert { font-size: 1.35rem; font-weight: 600; }
/* Montant TRÈS grand (Dart : 72 px, w900) — lisible à bout de bras, de loin.
   clamp() pour qu'un montant long ne déborde jamais (FittedBox côté Dart). */
.ecran-vert .montant { font-size: clamp(2.6rem, 17vw, 4.5rem); font-weight: 900; line-height: 1.05; }
.ecran-vert .autre-partie { font-size: 1.1rem; font-weight: 600; }
/* Instruction PHYSIQUE en évidence — l'encadré du Dart (blanc 16 %, bordure 45 %). */
.ecran-vert .instruction {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-size: 1.35rem; font-weight: 800;
}
.ecran-vert .bouton { background: #fff; color: var(--incoming); max-width: 320px; font-size: 1.1rem; font-weight: 800; }

/* ---- Scanner ---- */
.scanner { position: relative; border-radius: var(--r-md); overflow: hidden; background: #000; }
.scanner video { width: 100%; display: block; }
.scanner .vise {
  position: absolute; inset: 15%;
  border: 3px solid rgba(255, 255, 255, 0.85); border-radius: var(--r-md);
}

/* ---- QR perso ---- */
.qr-cadre { display: flex; justify-content: center; padding: 16px; }
.qr-cadre img, .qr-cadre canvas {
  width: min(70vw, 280px); height: auto; image-rendering: pixelated;
  border-radius: var(--r-sm); background: #fff; padding: 10px;
}

/* ---- Tontines (tontines_screen.dart) ---- */
/* PilotBadge pleine largeur — encadré ambre */
.bandeau-pilote {
  display: flex; align-items: center; gap: 8px; margin: 12px 0;
  padding: 8px 12px; border-radius: 12px; font-size: 12px;
  background: color-mix(in srgb, #F28C28 12%, transparent);
  border: 1px solid color-mix(in srgb, #F28C28 40%, transparent);
  color: #F28C28;
}
.bandeau-pilote strong { font-weight: 800; }

/* _Empty : icône atténuée puis texte centré */
.etat-vide { text-align: center; padding: 48px 24px; color: var(--on-surface); }
.etat-vide .ico { color: var(--on-surface-variant); margin-bottom: 14px; display: flex; justify-content: center; }

.ligne-carte { display: flex; align-items: center; gap: 8px; }
.ligne-carte .solde { font-size: 1.35rem; font-weight: 600; flex: 1; }
.puce-atteint {
  padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, #1B8A3A 15%, transparent); color: #1B8A3A;
}
/* Jauge standard (LinearProgressIndicator par défaut du thème) */
.jauge { height: 8px; border-radius: 8px; overflow: hidden; background: var(--surface-container-highest); }
.jauge > div { height: 100%; background: var(--brand-bright); }
/* FilledButton.tonal */
.bouton.tonal { background: var(--primary-container); color: var(--on-surface); }

/* FloatingActionButton.extended */
.bouton-flottant {
  position: fixed; right: 16px; z-index: 20;
  bottom: calc(var(--navh) + 16px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px; border: none; border-radius: 16px; cursor: pointer;
  background: var(--brand-bright); color: var(--on-primary);
  font: inherit; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ---- Micro-crédit (credit_screen.dart) ---- */
.puce-etat { padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.separateur-fin { border: none; border-top: 1px solid var(--outline-variant); margin: 11px 0; }
.ligne-echeance { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.85rem; }

/* ---- Comptes : _AccountTile (investment_tab.dart) ----
   Encadré à part entière (surface + bordure outlineVariant 50 %, rayon 18),
   pastille ronde 46 px teintée à 12 % de la couleur de la tuile. */
.tuile-compte {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px; margin-bottom: 12px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--outline-variant);
  color: var(--on-surface); font: inherit;
}
button.tuile-compte { cursor: pointer; }
button.tuile-compte:active { background: var(--surface-container); }
.tuile-rond {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tuile-infos { flex: 1; min-width: 0; }
.tuile-infos .ligne-titre { display: flex; align-items: center; gap: 8px; }
.tuile-infos .titre { font-weight: 700; }
.tuile-infos .sous { font-size: 0.8rem; color: var(--on-surface-variant); margin-top: 2px; }
.tuile-valeur { font-weight: 700; color: var(--brand-bright); flex-shrink: 0; }

/* PilotBadge (compact) — pastille ambre du Dart */
.badge-pilote {
  padding: 2px 8px; border-radius: 20px; flex-shrink: 0;
  background: color-mix(in srgb, #F28C28 15%, transparent);
  color: #F28C28; font-size: 10.5px; font-weight: 800; letter-spacing: 0.2px;
}

/* ---- Épargne (savings_screen.dart) ----
   Carte au dégradé PROPRE à l'épargne — à ne pas confondre avec .carte-solde
   (accueil) : couleurs et rayon repris du Dart. */
.carte-epargne {
  border-radius: 22px; padding: 20px; margin-bottom: 20px;
  background: linear-gradient(135deg, #1B5E20, #2E9E5B); color: #fff;
}
.carte-epargne .libelle { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.carte-epargne .montant { font-size: 30px; font-weight: 800; margin-top: 8px; }
.carte-epargne .objectif { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-top: 8px; }
/* Jauge blanche sur blanc 24 % — celle du Dart, PAS la jauge grise/verte. */
.jauge-claire {
  height: 8px; border-radius: 8px; overflow: hidden; margin-top: 16px;
  background: rgba(255, 255, 255, 0.24);
}
.jauge-claire > div { height: 100%; background: #fff; }

/* Deux boutons côte à côte (Row de deux Expanded) */
.duo-boutons { display: flex; gap: 12px; }
.duo-boutons .bouton { flex: 1; max-width: none; margin: 0; }

/* ---- Détail de tontine groupée (tontine_group_detail_screen.dart) ---- */
.titre-groupe { font-size: 1.35rem; font-weight: 700; margin-top: 16px; }
/* _PotCard : dégradé #1B5E20 → #2E9E5B, « Pot par round » à gauche,
   « N / membre » + fréquence à droite. */
.pot-carte {
  display: flex; align-items: center; gap: 12px;
  border-radius: 20px; padding: 20px; margin-top: 16px; margin-bottom: 20px;
  background: linear-gradient(135deg, #1B5E20, #2E9E5B); color: #fff;
}
.pot-carte .gauche { flex: 1; min-width: 0; }
.pot-carte .libelle { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.pot-carte .montant { font-size: 26px; font-weight: 800; margin-top: 6px; }
.pot-carte .droite { text-align: right; }
.pot-carte .par-membre { font-size: 12.5px; }
.pot-carte .frequence { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-top: 4px; }
/* En-tête « Membres & rotation » + bouton « Inviter » à droite */
.entete-membres { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.entete-membres .lien-action { margin-bottom: 0; padding: 4px 0; }
/* _MemberTile : pastille de position, nom en gras ; la ligne du bénéficiaire
   est teintée et bordée en couleur primaire. */
.membre-tuile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 14px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
}
.membre-tuile.actif {
  background: color-mix(in srgb, var(--brand-bright) 8%, transparent);
  border-color: color-mix(in srgb, var(--brand-bright) 50%, transparent);
}
.membre-tuile .pastille-pos {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand-bright) 15%, transparent);
  color: var(--brand-bright); font-weight: 700;
}
.membre-tuile .nom { flex: 1; min-width: 0; font-weight: 600; }
.membre-tuile .coche { color: #1B8A3A; display: flex; }
.membre-tuile .libelle-benef { color: var(--brand-bright); font-size: 11.5px; font-weight: 700; }

/* Encadré neutre (Container surface + bordure outlineVariant 50 %) */
.encadre, .encadre-info {
  padding: 16px; border-radius: 16px; margin-top: 24px;
  background: var(--surface); border: 1px solid var(--outline-variant);
}
.encadre-info { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; margin-top: 16px; }
.entete-encadre { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--brand-bright); }
.entete-encadre span { color: var(--on-surface); }

/* SegmentedButton (Hebdo / Mensuel) */
.segments { display: flex; margin-top: 12px; border: 1px solid var(--outline); border-radius: 999px; overflow: hidden; }
.segment {
  flex: 1; padding: 9px 12px; border: none; background: none; cursor: pointer;
  color: var(--on-surface); font: inherit;
}
.segment.actif { background: var(--primary-container); font-weight: 600; }

/* Tourniquet d'attente (CircularProgressIndicator) : anneau qui tourne,
   affiché pendant qu'un suivi est en cours. */
.attente-tourniquet {
  width: 36px; height: 36px; margin: 20px auto 12px;
  border: 3px solid var(--surface-container-highest);
  border-top-color: var(--brand-bright);
  border-radius: 50%;
  animation: tourniquet 0.9s linear infinite;
}
@keyframes tourniquet { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .attente-tourniquet { animation-duration: 3s; }
}

/* Suffixe dans un champ (InputDecoration.suffixText — « XOF ») : le suffixe
   est DANS la bordure du champ, pas à côté. */
.champ-suffixe { position: relative; display: flex; align-items: center; }
.champ-suffixe input { padding-right: 56px; }
.champ-suffixe > span {
  position: absolute; right: 14px; pointer-events: none;
  color: var(--on-surface-variant); font-size: 1rem;
}

/* ---- Initiation de caisse : choix de méthode (parité _MethodOption) ----
   Carte sélectionnable — bordure 1 px atténuée au repos, 2 px teintée quand
   elle est choisie, avec un fond primaire à 6 % comme le Dart. */
.sous-titre-section { font-size: 1.05rem; font-weight: 600; margin: 24px 0 10px; }
.option-methode {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px; margin-bottom: 10px; cursor: pointer;
  border: 1px solid var(--outline-variant); border-radius: 14px;
  background: none; color: var(--on-surface); font: inherit;
}
.option-methode.actif {
  border: 2px solid var(--brand-bright); padding: 13px; /* compense la bordure */
  background: color-mix(in srgb, var(--brand-bright) 6%, transparent);
}
.option-methode .ico { color: var(--outline); display: flex; flex-shrink: 0; }
.option-methode.actif .ico { color: var(--brand-bright); }
.option-methode .txt { flex: 1; min-width: 0; }
.option-methode .txt .titre { font-weight: 700; font-size: 0.95rem; }
.option-methode .txt .sous { font-size: 0.85rem; color: var(--on-surface-variant); margin-top: 2px; }
.option-methode .radio {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--outline);
}
.option-methode.actif .radio {
  border-color: var(--brand-bright);
  box-shadow: inset 0 0 0 4px var(--brand-bright);
}

/* Pastille ronde teintée à 12 % dans une ligne (cartes de contact de
   l'assistance — parité CircleAvatar de _ContactCard). Le background et la
   couleur viennent du style inline de l'appelant. */
.ligne-tx .rond {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Lien d'action discret (parité TextButton.icon — « Tout retirer ») */
.lien-action {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--brand-bright); font-weight: 600; padding: 8px 0; margin-bottom: 8px;
}

/* ---- Récapitulatif montant/frais ---- */
.recap { background: var(--surface-container); border-radius: var(--r-sm); padding: 14px; margin-bottom: 16px; }
.recap .ligne { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.95rem; }
.recap .ligne.total { font-weight: 700; border-top: 1px solid var(--outline-variant); margin-top: 6px; padding-top: 10px; }

/* ---- Invitation iOS « Ajouter à l'écran d'accueil » ---- */
/* Bandeau d'installation persistant (Android : bouton prompt natif ; iOS :
   mini-guide Partager). Carte FIXE au-dessus de la barre de navigation —
   jamais une modale : l'app reste utilisable derrière. */
.bandeau-install {
  position: fixed; left: 12px; right: 12px; z-index: 50;
  bottom: calc(var(--navh) + 12px + env(safe-area-inset-bottom));
  max-width: 456px; margin: 0 auto;
  background: var(--surface-container); border: 1px solid var(--outline-variant);
  border-radius: var(--r-md); padding: 16px; color: var(--on-surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.bandeau-install .fermer { position: absolute; top: 6px; right: 10px; background: none; border: none;
  font-size: 1.3rem; color: var(--on-surface-variant); cursor: pointer; }
.bandeau-install ol { margin: 10px 0 0 20px; font-size: 0.9rem; }
.bandeau-install .icone-partage,
.bandeau-install .icone-partage svg {
  display: inline-block; vertical-align: -3px; width: 18px; height: 18px;
}
.bandeau-install .actions { display: flex; gap: 10px; margin-top: 12px; }
.bandeau-install .actions .bouton { margin: 0; width: auto; flex: 1; padding: 10px 12px; }

/* ---- Cartes génériques (contenu d'écran, grilles P3..P6) ---- */
.carte {
  margin-bottom: 16px; background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--r-md); padding: 16px;
}
.carte-titre {
  font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.carte-ico {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.carte-ico.vert { background: color-mix(in srgb, var(--incoming) 14%, transparent); color: var(--incoming); }
.carte-ico.orange { background: color-mix(in srgb, var(--withdraw) 14%, transparent); color: var(--withdraw); }
.carte-ico.rouge { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* Ligne cliquable avec chevron à droite */
.ligne-cliquable {
  display: flex; align-items: center; width: 100%; background: none; border: none;
  border-bottom: 1px solid var(--outline-variant);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  position: relative; padding: 10px 24px 10px 0;
}
.ligne-cliquable::after {
  content: ""; position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background: var(--on-surface-variant);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M9.5 5.5 16 12l-6.5 6.5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M9.5 5.5 16 12l-6.5 6.5"/></svg>') center / contain no-repeat;
}
.ligne-cliquable:active { background: var(--surface-container); }

/* Cadre désactivé (espèces pour un non-marchand, etc.) — visible, jamais masqué */
.cadre-attenue { opacity: 0.42; }

/* ---- Opérations — grands cadres (parité EXACTE _BigActionTile de
   merchant_cash_screen.dart) : titre sur sa propre ligne, description en
   dessous en couleur discrète, padding généreux, coins arrondis. La couleur
   par cadre (fond 10 %, bordure 35 %, titre plein) vient d'un style en
   ligne — un jeu par tuile serait 8 classes pour une seule valeur. ---- */
.grille-cadres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cadre-action {
  height: 150px; padding: 16px; border-radius: 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: left; cursor: pointer; font: inherit;
}
.cadre-action .rangee-haut { display: flex; align-items: flex-start; justify-content: space-between; }
.cadre-action .rond {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.cadre-action .titre {
  font-weight: 700; font-size: 1rem; margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cadre-action .sous-titre {
  font-size: 0.8rem; color: var(--on-surface-variant); white-space: pre-line; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 1100px) {
  .grille-cadres { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Bulles de chat (parité EXACTE _Bubble de support_chat_screen.dart) :
   admin à gauche sur surfaceContainerHighest, moi à droite sur
   primaryContainer — valeurs du dump, jamais un gris/vert clair inventé. ---- */
.bulle-ligne { display: flex; margin: 4px 0; }
.bulle-ligne.admin { justify-content: flex-start; }
.bulle-ligne.moi { justify-content: flex-end; }
.bulle { max-width: 78%; padding: 10px 14px; border-radius: 16px; overflow-wrap: anywhere; }
.bulle.admin { background: var(--surface-container-highest); }
.bulle.moi { background: var(--primary-container); }
.bulle .titre { font-weight: 700; margin-bottom: 4px; }
.bulle .corps { white-space: pre-wrap; }
.bulle .expediteur { font-size: 0.72rem; color: var(--outline); margin-top: 4px; }
.compositeur {
  display: flex; gap: 8px; align-items: flex-end; margin-top: 10px;
}
.compositeur textarea {
  flex: 1; resize: none; border: 1px solid var(--outline-variant);
  border-radius: var(--r-sm); padding: 10px 14px; font-size: 1rem;
  background: var(--surface-container); color: var(--on-surface);
}
.compositeur textarea::placeholder { color: var(--on-surface-variant); }
.compositeur textarea:focus { outline: 2px solid var(--brand-bright); border-color: var(--brand-bright); }
.compositeur button {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: none;
  background: var(--brand-bright); color: var(--on-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.compositeur button:disabled { opacity: 0.6; }

/* ---- Pastille numérique (compteurs) ---- */
.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--danger); color: #fff;
  font-size: 0.8rem; font-weight: 700;
}

/* ---- Onglets simples (tontines, finance admin…) ---- */
.onglets { display: flex; gap: 8px; margin-bottom: 16px; }
.onglets button {
  flex: 1; padding: 10px; border-radius: var(--r-sm);
  border: 1px solid var(--outline-variant); background: var(--surface);
  font: inherit; font-weight: 600; color: var(--on-surface-variant); cursor: pointer;
}
.onglets button.actif {
  background: color-mix(in srgb, var(--brand-bright) 16%, transparent);
  color: var(--brand-bright); border-color: var(--brand-bright);
}

/* ---- Verrouillage de session ---- */
.verrou {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); color: var(--on-surface);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 8px;
}
.verrou .marque { color: var(--brand-bright); font-weight: 800; }

/* ================================================================
   PARAMÈTRES — fidèle à settings_screen.dart : carte d'identité en
   dégradé, 4 sections dépliables (<details> natif — fermées par défaut,
   comme ExpansionTile), interrupteurs et groupes radio.
   ================================================================ */
.carte-identite {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 20px; border-radius: 22px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--brand), var(--brand-bright));
  color: #fff; cursor: pointer; border: none; text-align: left;
}
.carte-identite .avatar-grand {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700;
}
.carte-identite .identite-textes { flex: 1; min-width: 0; }
.carte-identite .nom {
  font-weight: 700; font-size: 1.05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carte-identite .badge-role {
  display: inline-block; margin-top: 6px; padding: 3px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.18);
  font-size: 0.75rem; font-weight: 600;
}
.carte-identite .chevron-blanc { color: rgba(255, 255, 255, 0.7); flex-shrink: 0; }

.section-param {
  background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden;
}
.section-param summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
}
.section-param summary::-webkit-details-marker { display: none; }
.section-param summary .rond-section {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in srgb, var(--brand-bright) 12%, transparent);
  color: var(--brand-bright);
  display: flex; align-items: center; justify-content: center;
}
.section-param summary .textes-section { flex: 1; min-width: 0; }
.section-param summary .titre-section { font-weight: 700; font-size: 0.98rem; }
.section-param summary .sous-section {
  font-size: 0.8rem; color: var(--on-surface-variant);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.section-param summary .chevron-section { color: var(--on-surface-variant); flex-shrink: 0; transition: transform 0.15s; }
.section-param[open] summary .chevron-section { transform: rotate(90deg); }
.section-param .contenu-section { border-top: 1px solid var(--outline-variant); padding-bottom: 6px; }
.sous-entete-param {
  padding: 12px 16px 4px; font-size: 0.85rem; font-weight: 700; color: var(--brand-bright);
}
.note-param {
  margin: 10px 16px 4px; padding: 10px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-orange) 12%, transparent);
  color: var(--on-surface-variant); font-size: 0.78rem; line-height: 1.4;
}

/* Ligne de réglage (icône + texte + interrupteur), et ligne cliquable simple */
.ligne-reglage {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
}
.ligne-reglage .icone-reglage { color: var(--on-surface-variant); flex-shrink: 0; }
.ligne-reglage .textes-reglage { flex: 1; min-width: 0; }
.ligne-reglage .titre-reglage { font-weight: 600; font-size: 0.92rem; }
.ligne-reglage .sous-reglage { font-size: 0.78rem; color: var(--on-surface-variant); margin-top: 2px; line-height: 1.35; }
.ligne-reglage.desactivee { opacity: 0.5; }

/* Ligne cliquable avec chevron, alignée sur le même rythme que .ligne-reglage
   (Mon profil, Mon QR code, Bloquer ma carte…) */
.ligne-param-cliquable {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 10px 16px; background: none; border: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ligne-param-cliquable:active { background: var(--surface-container); }
.ligne-param-cliquable .chevron-param { color: var(--on-surface-variant); flex-shrink: 0; margin-left: auto; }

.commutateur { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.commutateur input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.commutateur .piste { position: absolute; inset: 0; background: var(--outline-variant); border-radius: 999px; transition: background 0.15s; pointer-events: none; }
.commutateur .piste::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform 0.15s;
}
.commutateur input:checked + .piste { background: var(--brand-bright); }
.commutateur input:checked + .piste::after { transform: translateX(18px); }

/* Groupe radio (parité RadioListTile) */
.ligne-radio {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 10px 16px; background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
}
.ligne-radio .pastille-radio {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--outline); position: relative;
}
.ligne-radio.coche .pastille-radio { border-color: var(--brand-bright); }
.ligne-radio.coche .pastille-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand-bright);
}
.ligne-radio .titre-radio { font-weight: 600; font-size: 0.92rem; }
.ligne-radio .sous-radio { font-size: 0.78rem; color: var(--on-surface-variant); margin-top: 3px; line-height: 1.4; }

/* ================================================================
   ACCUEIL — fidèle à dashboard_screen.dart (barre propre à l'écran,
   recherche, carte de solde en dégradé, actions rapides, transactions).
   ================================================================ */
.accueil-barre {
  display: flex; align-items: center; gap: 6px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 6px;
}
.avatar-init {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer;
}
.accueil-titre { font-weight: 800; letter-spacing: -0.3px; margin-left: 8px; flex: 1; }
.accueil-icone-btn {
  background: none; border: none; color: var(--on-surface); cursor: pointer;
  padding: 8px; border-radius: 50%; position: relative; display: flex;
}
.accueil-icone-btn:active { background: var(--surface-container); }
.badge-notif {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px;
  padding: 0 3px; border-radius: 50%; background: var(--error);
  color: var(--on-error-container); font-size: 0.62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.chip-kyc {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  background: color-mix(in srgb, var(--incoming) 14%, transparent);
  color: var(--incoming);
  border: 1px solid color-mix(in srgb, var(--incoming) 40%, transparent);
}
.chip-kyc.attente { background: color-mix(in srgb, var(--withdraw) 14%, transparent); color: var(--withdraw); border-color: color-mix(in srgb, var(--withdraw) 40%, transparent); }
.chip-kyc.refuse { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.chip-kyc.aucun { background: color-mix(in srgb, var(--neutral-status) 16%, transparent); color: var(--on-surface-variant); border-color: var(--outline-variant); }

.search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; margin: 8px 16px 16px;
  background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--r-sm); color: var(--on-surface-variant);
  font-size: 0.88rem; cursor: pointer; text-align: left; width: calc(100% - 32px);
}

.carte-solde {
  margin: 0 16px 16px; padding: 24px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand), var(--brand-bright));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent);
  color: #fff;
}
.carte-solde .ligne-haut { display: flex; align-items: center; justify-content: space-between; }
.carte-solde .libelle-grp { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); font-weight: 500; }
.carte-solde .oeil { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; padding: 4px; display: flex; }
.carte-solde .recharger {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.18); border: none; border-radius: 999px;
  color: #fff; font-size: 0.78rem; font-weight: 700; padding: 6px 12px; cursor: pointer;
}
.carte-solde .montant { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.5px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.carte-solde .sous-titre { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin-top: 4px; }
.bandeau-negatif {
  margin: 0 16px 16px; display: flex; gap: 10px; align-items: flex-start;
  background: color-mix(in srgb, var(--error-container) 55%, var(--surface));
  color: var(--on-error-container);
  border-radius: var(--r-sm); padding: 12px 14px; font-size: 0.85rem;
}

.actions-rapides { display: flex; margin: 0 16px 20px; }
.action-rapide {
  flex: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px;
}
.action-rapide .rond {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.action-rapide span.libelle { font-size: 0.72rem; font-weight: 600; color: var(--on-surface); }

.kyc-banniere {
  margin: 0 16px 20px; padding: 16px; border-radius: var(--r-md);
  display: flex; gap: 14px; align-items: flex-start; cursor: pointer; border: none; text-align: left; width: calc(100% - 32px);
}
.kyc-banniere .rond {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.kyc-banniere .titre { font-weight: 700; font-size: 0.98rem; }
.kyc-banniere .texte { font-size: 0.85rem; color: var(--on-surface); opacity: 0.85; margin-top: 3px; }
.kyc-banniere .action { margin-top: 10px; display: inline-block; font-weight: 700; font-size: 0.85rem; }

.section-entete { display: flex; align-items: center; margin: 0 16px 12px; }
.section-entete h2 { font-size: 1rem; font-weight: 700; flex: 1; }
.section-entete .voir-tout { background: none; border: none; color: var(--brand-bright); font-weight: 700; font-size: 0.88rem; cursor: pointer; }

.liste-tx { margin: 0 16px; }
.tx-vide {
  margin: 0 16px; padding: 36px 16px; text-align: center;
  background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--r-md);
  color: var(--on-surface-variant);
}

/* Sur mobile, l'ACCUEIL masque les opérations au-delà de 5 (10 chargées :
   le desktop les montre toutes — même donnée, aucune requête en plus).
   Portée VOLONTAIREMENT limitée à .accueil : la même classe .liste-tx sert
   aussi aux résultats de recherche, que l'app affiche TOUS — une règle
   globale les tronquait silencieusement à 5 sur téléphone (audit 17/08). */
@media (max-width: 767.98px) {
  .accueil .liste-tx .tx-tile:nth-child(n + 6) { display: none; }
}

/* ---- Boîte de dialogue centrée (parité AlertDialog, rayon 24) ---- */
.fond-dialogue {
  position: fixed; inset: 0; z-index: 160;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.dialogue {
  width: 100%; max-width: 380px;
  background: var(--surface-container); border-radius: var(--r-lg);
  padding: 24px;
}
.dialogue-titre { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; }
.dialogue-texte { font-size: 0.92rem; color: var(--on-surface-variant); line-height: 1.5; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dialogue-btn {
  background: none; border: none; color: var(--brand-bright);
  font-weight: 700; font-size: 0.92rem; padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer;
}
.dialogue-btn:active { background: var(--surface-container-high); }
.dialogue-btn.fort { background: var(--brand-bright); color: var(--on-primary); }
.dialogue-btn.fort.danger { background: var(--danger); color: #fff; }

/* ---- Feuille de choix (bottom sheet) — Déposer/Retirer, etc. ---- */
.fond-feuille {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.feuille {
  width: 100%; max-width: 480px;
  background: var(--surface-container);
  border-radius: 20px 20px 0 0;
  padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
  max-height: 80vh; overflow-y: auto;
}
.feuille .poignee { width: 36px; height: 4px; border-radius: 999px; background: var(--outline-variant); margin: 8px auto 12px; }
.feuille .entete { padding: 4px 20px 12px; }
.feuille .entete .titre { font-size: 1.05rem; font-weight: 700; }
.feuille .entete .sous { font-size: 0.85rem; color: var(--on-surface-variant); margin-top: 2px; }
.feuille .option {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: none; padding: 12px 20px; cursor: pointer;
  text-align: left; font: inherit; color: var(--on-surface);
}
.feuille .option:active { background: var(--surface-container-high); }
.feuille .option .rond {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.feuille .option .txt-titre { font-weight: 600; font-size: 0.95rem; }
.feuille .option .txt-sous { font-size: 0.78rem; color: var(--on-surface-variant); }
.feuille .separateur { height: 1px; background: var(--outline-variant); margin: 4px 0; }

/* ---- Navigation basse — 5 onglets, persistante (mobile ET desktop : même
   conception, jamais de barre latérale inventée) ---- */
#basnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: center;
  background: var(--surface);
  border-top: 1px solid var(--outline-variant);
  padding-bottom: env(safe-area-inset-bottom);
}
#basnav .rangee {
  display: flex; width: 100%; max-width: 640px; height: var(--navh);
}
#basnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--on-surface-variant);
}
#basnav a .lbl { font-size: 0.68rem; font-weight: 600; }
#basnav a.actif { color: var(--brand-bright); }
#app.sans-session #basnav { display: none; }

/* ============================================================
   ≥ 768 px — MÊME conception, plein écran : cartes plus larges,
   densité augmentée. Pas de colonne étroite, pas de barre latérale.
   ============================================================ */
@media (min-width: 768px) {
  /* 1320px : nettement plus large que la v1 (1080px laissait trop de vide
     sur les grands écrans), mais toujours une largeur de lecture confortable
     — pas un texte étiré sur 2000 px. */
  #ecran { max-width: 1320px; margin: 0 auto; width: 100%; }
  main { padding: 24px 32px; }
  header.barre { padding: 24px 32px 8px; }

  .accueil-barre { padding: 20px 32px 4px; }
  .search-bar, .carte-solde, .bandeau-negatif, .actions-rapides,
  .kyc-banniere, .section-entete, .liste-tx, .tx-vide { margin-left: 32px; margin-right: 32px; }
  .search-bar { width: calc(100% - 64px); }
  .kyc-banniere { width: calc(100% - 64px); }

  .carte-solde { padding: 32px; }
  .carte-solde .montant { font-size: 3rem; }

  .actions-rapides { max-width: 420px; }

  /* Formulaires et boutons isolés : largeur de lecture confortable, JAMAIS
     étirés sur toute la largeur du conteneur élargi. Les grilles/listes
     (.grille-cadres, .liste-tx, tableaux admin…) n'ont pas cette classe :
     elles utilisent pleinement l'espace, c'est le but de l'élargissement. */
  .champ, .recap, .bouton { max-width: 480px; }

  /* Historique : deux colonnes pour la densité sur grand écran */
  .liste-tx { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .liste-tx .tx-tile { margin-bottom: 0; }

  #basnav .rangee { max-width: 720px; }

  .qr-cadre img, .qr-cadre canvas { width: 300px; }
  /* Grand écran : le clamp() plafonne déjà, on garde la pleine taille Dart. */
  .ecran-vert .montant { font-size: 4.5rem; }
}

/* ---- Toast (parité SnackBar : flottant, transitoire) ---- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--navh) + 16px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px);
  background: var(--surface-container-highest); color: var(--on-surface);
  padding: 12px 18px; border-radius: 12px; font-size: 0.88rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); z-index: 180;
  text-align: center;
}

/* ---- Divers ---- */
.centre { text-align: center; }
.discret { color: var(--on-surface-variant); font-size: 0.85rem; }
.espace { height: 16px; }
.chargement { text-align: center; padding: 32px; color: var(--on-surface-variant); }
a.lien { color: var(--brand-bright); }
.cache { display: none !important; }
.uniquement-mobile { }
@media (min-width: 768px) { .uniquement-mobile { display: none !important; } }

/* CheckboxListTile en ligne (case + libellé cliquable) */
.case-ligne { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; cursor: pointer; }
.case-ligne input { width: 20px; height: 20px; flex-shrink: 0; }

/* _CopyableValue (clés API) : libellé, valeur sélectionnable, bouton copier */
.valeur-copiable {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-container); border: 1px solid var(--outline-variant);
}
.valeur-copiable .libelle { font-size: 0.78rem; color: var(--on-surface-variant); }
.valeur-copiable .valeur {
  margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem; word-break: break-all; user-select: all;
}

/* ---- Mon profil (profile_screen.dart) ---- */
.profil-entete { text-align: center; padding: 24px 0; }
.avatar-grand {
  width: 88px; height: 88px; margin: 0 auto; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700;
}
.profil-entete .nom { margin-top: 16px; font-size: 1.4rem; font-weight: 700; }
.puce-role {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
/* ListTile simple (sans encadré) : le Dart sépare par des Divider */
.tuile-liste {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 14px 4px; background: none; border: none;
  color: var(--on-surface); font: inherit; text-align: left;
}
button.tuile-liste { cursor: pointer; }
.tuile-liste .tuile-infos .titre { font-weight: 500; }
.tuile-liste .tuile-infos .sous { font-size: 0.85rem; color: var(--on-surface-variant); margin-top: 2px; }

/* « Mon QR » : carte BLANCHE (le QR doit rester lisible par tout scanneur) */
.qr-blanc {
  background: #fff; border-radius: var(--r-lg); padding: 20px;
  display: flex; flex-direction: column; align-items: center;
}
.qr-blanc img { width: min(78vw, 280px); height: auto; image-rendering: pixelated; }
.qr-blanc .nom-qr { margin-top: 16px; color: #000; font-size: 22px; font-weight: 700; text-align: center; }

/* ---- Gains d'agent (agent_earnings_screen.dart) ---- */
.trio-periodes { display: flex; gap: 8px; margin-top: 16px; }
.tuile-periode {
  flex: 1; min-width: 0; padding: 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--outline-variant);
}
.tuile-periode .libelle { font-size: 0.75rem; color: var(--on-surface-variant); }
.tuile-periode .montant { font-weight: 700; margin-top: 4px; font-size: 0.95rem; }
.encadre-astuce {
  display: flex; gap: 12px; align-items: center; margin-top: 16px;
  padding: 12px; border-radius: var(--r-md); font-size: 0.85rem;
  background: color-mix(in srgb, #1B8A3A 8%, transparent); color: var(--on-surface);
}
.encadre-astuce > .icone-svg { color: #1B8A3A; flex-shrink: 0; }

/* ---- Recevoir (receive_money_screen.dart) ---- */
/* Carte du numéro : dégradé de marque, ombre portée, numéro en très grand */
.carte-numero {
  padding: 32px 24px; border-radius: 24px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-bright));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent);
}
.carte-numero .ico { display: flex; justify-content: center; }
.carte-numero .nom { margin-top: 12px; font-size: 16px; font-weight: 600; }
.carte-numero .numero { margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: 0.5px; }
/* Séparateur « ou par QR » */
.ou-separateur {
  display: flex; align-items: center; gap: 12px; margin: 24px 0 16px;
  color: var(--on-surface-variant); font-size: 0.85rem;
}
.ou-separateur::before, .ou-separateur::after {
  content: ""; flex: 1; border-top: 1px solid var(--outline-variant);
}

/* ---- Accueil PUBLIC (racine, visiteur inconnu — ecrans/bienvenue.js) :
   centré, sobre, deux boutons, deux liens. Mêmes briques que la connexion. ---- */
.bienvenue { text-align: center; padding-top: 32px; }
.bienvenue-logo { margin: 0 auto 14px; border-radius: 18px; }
.bienvenue h1 { font-size: 1.7rem; letter-spacing: .08em; margin-bottom: 12px; }
.bienvenue-accroche { font-size: 1.05rem; margin-bottom: 8px; }
.bienvenue-detail { color: var(--on-surface-variant); font-size: .95rem; margin-bottom: 24px; }
.bienvenue .bouton { max-width: 360px; margin-left: auto; margin-right: auto; }
.bienvenue-liens { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: .95rem; color: var(--outline); }
.bienvenue-liens a { color: var(--brand-bright); text-decoration: none; }
.bienvenue-liens a:hover, .bienvenue-liens a:focus-visible { text-decoration: underline; }

/* ---- Pied des écrans PUBLICS (connexion, inscription) : crédit discret du
   réalisateur du site — gris neutre, jamais la couleur de marque. Placé sous
   <main> (flex: 1) : toujours en bas de l'écran. ---- */
.pied-credit {
  margin-top: 24px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--outline-variant);
  text-align: center;
  font-size: 12.5px;
}
.pied-credit a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--outline); text-decoration: none;
}
.pied-credit a:hover, .pied-credit a:focus-visible { color: var(--on-surface-variant); text-decoration: underline; }
.pied-credit img { height: 22px; width: auto; display: block; border-radius: 4px; }