/* Tchiden — UI d'après la maquette « TCHIDEN Home (standalone) » :
   Poppins (titres/montants) + Manrope (texte), thème clair/sombre. */

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
/* Outfit 900 : uniquement les grands titres d'écran (13,5 Ko, sous-ensemble
   latin, auto-hébergée — la CSP `font-src 'self'` interdit les CDN). C'est la
   graisse extrême qui donne la densité recherchée ; Poppins 800 assure tout
   le reste, l'impact venant alors de l'interlignage resserré. */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-900.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* Jetons du thème CLAIR (maquette Home, cahier de marque TCHIDEN). */
:root {
  --indigo: #14315C;          /* action principale */
  --primary-ink: #FFFFFF;     /* texte sur action principale */
  --indigo-dark: #0D1F38;
  --indigo-deep: #14315C;     /* gros titres / montants */
  --accent: #5B8FD6;
  --bg: #F8FAFD;
  --card: #FFFFFF;
  --ink: #14315C;
  --muted: #5A729A;
  --faint: #5C749B;      /* 4,54:1 sur --bg — conforme AA (était #8FA3C2 = 2,45:1) */
  --line: #DCE6F5;
  --chip: #EAF0F9;
  --balance-bg: #14315C;
  --balance-label: #9CB6DC;
  --balance-ink: #FFFFFF;
  --balance-btn: #FFFFFF;
  --balance-btn-alt: rgba(255, 255, 255, 0.12);
  --fab-bg: linear-gradient(135deg, #14315C 0%, #21507F 100%);
  --fab-ink: #FFFFFF;
  --fab-shadow: rgba(20, 49, 92, 0.45);
  --green: #0A7F4E;      /* 4,83:1 (était #0c9d61 = 3,34:1) */
  --red: #d92d4a;
  --warn: #8A6800;       /* 4,95:1 (était #b58900 = 3,07:1) */
  --orange: #ff7900;
  --moov: #0093dd;
  --wave: #1dc4ff;
  --radius: 22px;
  --shadow: 0 8px 28px rgba(13, 31, 56, 0.08);
  /* Surfaces « verre dépoli » (glassmorphism) */
  --glass: rgba(255, 255, 255, 0.68);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-line: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 8px 32px rgba(13, 31, 56, 0.1);
}

/* ── Thème sombre « vert pétrole » (2026-07-23) ──
   Le fond navy précédent ne détachait les cartes qu'à 1,09:1 : elles se
   confondaient avec l'arrière-plan et le texte ténu échouait au niveau AA
   (3,25:1). Ici le fond est creusé et le verre remonté à 82 % d'opacité →
   séparation 1,39:1, texte ténu 5,12:1. Le thème CLAIR est inchangé.
   Sémantique des couleurs : action = turquoise, succès = vert franc,
   échec = rose clair (le rouge #d92d4a tombait à 2,83:1 sur ce fond). */
html[data-theme="dark"] {
  --indigo: #5EEAD4;              /* action principale */
  --primary-ink: #04141A;         /* texte posé sur l'action */
  --indigo-dark: #E8F4F7;
  --indigo-deep: #E8F4F7;
  --accent: #5EEAD4;
  --bg: #04141A;
  --card: #123A45;
  --ink: #E8F4F7;
  --muted: #9FC3CD;
  --faint: #7FA6B2;
  --line: #1C4A57;
  --chip: #1C4A57;
  --balance-bg: #123A45;
  --balance-label: #8FB6C2;
  --balance-ink: #E8F4F7;
  --balance-btn: #5EEAD4;
  --balance-btn-alt: rgba(94, 234, 212, 0.16);
  --fab-bg: linear-gradient(135deg, #5EEAD4 0%, #2FA89A 100%);
  --fab-ink: #04141A;
  --fab-shadow: rgba(0, 0, 0, 0.55);
  /* Vert et rouge relevés : lisibles sur le verre pétrole. */
  --green: #4ADE80;
  --red: #FB7185;
  --warn: #FBBF24;       /* ambre clair : lisible sur le pétrole sombre */
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  --glass: rgba(18, 58, 69, 0.82);
  --glass-strong: rgba(18, 58, 69, 0.9);
  --glass-line: rgba(255, 255, 255, 0.11);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s;
}

/* Halo d'ambiance fixe : donne de la matière aux surfaces en verre dépoli. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 440px at 88% -10%, rgba(91, 143, 214, 0.22), transparent 65%),
    radial-gradient(520px 380px at -12% 24%, rgba(255, 121, 0, 0.1), transparent 60%),
    radial-gradient(660px 480px at 50% 115%, rgba(20, 49, 92, 0.14), transparent 65%);
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(620px 440px at 88% -10%, rgba(94, 234, 212, 0.13), transparent 65%),
    radial-gradient(520px 380px at -12% 24%, rgba(255, 121, 0, 0.06), transparent 60%),
    radial-gradient(660px 480px at 50% 115%, rgba(0, 0, 0, 0.45), transparent 65%);
}

/* Surface « verre dépoli » : cartes, KPI, listes, feuilles… */
.card, .kpi, .tx-item, .corridor, .ad-admin, .staff-item, .auth-card, .sheet {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.method-item, .funding-opt, .benef-chip, .chip {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}

h1, h2, h3, .brand-name {
  font-family: 'Poppins', 'Manrope', sans-serif;
}

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }

/* ── Marque : tambour tama, SVG inline (currentColor = couleur du contexte,
      point accent #5B8FD6 fixe — cahier de marque) ── */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 auto; }
.brand-name {
  font-family: 'Poppins', 'Manrope', sans-serif;
  font-weight: 800; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
/* Logo-bouton orange dans l'en-tête : ramène à l'accueil. */
.brand-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--orange); color: #fff;
  border: 0; cursor: pointer; font-family: inherit;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255, 121, 0, 0.35);
  transition: transform 0.1s;
}
.brand-btn:active { transform: scale(0.96); }
/* Le halo pulsé permanent de l'en-tête a été retiré (audit 2026-07-24) : il
   tournait sur TOUS les écrans internes sans transmettre d'information, dans
   le champ de vision d'un utilisateur qui vient faire une tâche. Le logo garde
   son animation sur la seule page de connexion. */
.brand-btn .brand-mark { width: 24px; height: 24px; }
.brand-btn .brand-name {
  font-family: 'Poppins', 'Manrope', sans-serif;
  font-weight: 800; font-size: 0.92rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Logo centré, agrandi et ORANGE sur la page de connexion. */
.auth-logo { flex-direction: column; gap: 12px; color: var(--orange); }
.auth-logo .brand-mark { width: 84px; height: 84px; }
.auth-logo .brand-name { font-size: 1.9rem; color: #fff; }

/* `.flashy` ne porte plus d'animation : elle entrait en concurrence avec
   logo-basculer/logo-halo posées plus bas sur le MÊME élément (deux
   déclarations `animation`, la dernière écrasait la première). Le halo de la
   page de connexion vit désormais dans un seul endroit, la couche finition. */
.flashy .brand-mark { border-radius: 22px; }

/* ── Écran d'authentification : tout tient sur un écran, centré ── */
#screen-auth {
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(160deg, #0D1F38 0%, #14315C 55%, #0D1F38 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}
.auth-inner {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.auth-card {
  color: var(--ink);
  border-radius: 24px; padding: 22px 22px 24px;
  width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
/* Sur le fond navy de la connexion, le verre doit rester bien lisible. */
#screen-auth .auth-card { background: rgba(255, 255, 255, 0.92); }
html[data-theme="dark"] #screen-auth .auth-card { background: rgba(22, 40, 63, 0.92); }
.auth-switch {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--muted); font-weight: 600; font-size: 0.82rem;
  /* 18 px de haut : trop fin pour un pouce. On élargit la zone touchable à
     44 px sans déplacer le texte (le rembourrage est repris en marge). */
  margin: 1px auto 0; display: block; padding: 13px 12px; min-height: 44px;
}
.auth-switch:hover { color: var(--indigo); }

/* ── Onglets ── */
.tabs { display: flex; background: var(--bg); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.tab {
  flex: 1; border: 0; background: transparent; padding: 12px 10px;
  min-height: 44px;   /* seuil tactile */
  border-radius: 999px; font-weight: 700; font-size: 0.9rem;
  color: var(--muted); cursor: pointer; font-family: inherit;
}
.tab.active { background: var(--indigo); color: var(--primary-ink); box-shadow: 0 3px 10px rgba(20,49,92,0.35); }
.tabs.small .tab { font-size: 0.82rem; padding: 12px 6px; }

/* ── Formulaires ── */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
label { font-size: 0.82rem; font-weight: 600; color: var(--muted); display: block; }
input {
  width: 100%; margin-top: 6px;
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 1rem; font-family: inherit; color: var(--ink); background: var(--card);
  transition: border-color 0.15s;
}
input:focus { outline: none; border-color: var(--indigo); }
.phone-field { display: flex; align-items: stretch; margin-top: 6px; }
.phone-field .prefix {
  display: grid; place-items: center; padding: 0 12px;
  background: var(--bg); border: 1.5px solid var(--line);
  font-weight: 700; font-size: 0.92rem; color: var(--muted); white-space: nowrap;
}
.phone-field .prefix:first-child { border-right: 0; border-radius: 12px 0 0 12px; }
.phone-field .prefix:last-child { border-left: 0; border-radius: 0 12px 12px 0; }
.phone-field input { margin-top: 0; border-radius: 0 12px 12px 0; }
.phone-field input:first-child { border-radius: 12px 0 0 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; }
.form-error { color: var(--red); font-size: 0.85rem; font-weight: 600; min-height: 1em; }

/* ── Boutons ── */
.btn {
  border: 0; border-radius: 999px; padding: 14px 22px;
  font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--indigo); color: var(--primary-ink); box-shadow: 0 6px 18px rgba(20,49,92,0.35); }
.btn-primary:disabled { opacity: 0.55; cursor: wait; }
.btn-lg { width: 100%; padding: 16px; font-size: 1.05rem; }
.btn-outline { background: transparent; color: var(--indigo); border: 1.5px solid var(--indigo); }
.btn-ghost { background: transparent; border: 0; color: var(--muted); font-weight: 600; cursor: pointer; font-family: inherit; font-size: 0.85rem; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* ── Structure de l'app ── */
.app-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid var(--glass-line);
}
.header-right { display: flex; align-items: center; gap: 10px; }
.user-chip {
  background: var(--bg); padding: 6px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; color: var(--indigo-dark);
}
/* Marge basse : la barre de navigation est fixe et le bouton flèche déborde
   au-dessus d'elle. Mesuré : 77px de barre + 25px de débordement = 102px
   réellement masqués, alors que la marge n'était que de 96px — le bouton
   « Continuer » passait sous la flèche (chevauchement de 46px).
   `env()` en plus : la barre grandit du même montant sur les téléphones à
   encoche, donc la marge doit suivre. */
#main { max-width: 520px; margin: 0 auto; padding: 20px 18px calc(124px + env(safe-area-inset-bottom)); }
.app-screen h2 { font-size: 1.35rem; margin-bottom: 14px; letter-spacing: -0.01em; }
.hello { font-size: 1.25rem; }
.section-title { font-size: 1rem; margin: 22px 0 10px; }

.card {
  border-radius: var(--radius);
  padding: 20px; margin-top: 14px;
}

/* ── Accueil (maquette Home) ── */
.home-top { display: flex; align-items: center; justify-content: space-between; }
.home-greet { font-size: 0.85rem; color: var(--muted); }
.home-name { font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.home-icons { display: flex; align-items: center; gap: 10px; }
.icon-chip {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--chip); color: var(--ink);
  display: grid; place-items: center; position: relative;
}
.icon-chip .dot {
  position: absolute; top: 6px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg);
}
.avatar-chip {
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--indigo); color: var(--primary-ink);
  display: grid; place-items: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
}

.balance-card {
  background: var(--balance-bg); border-radius: 22px; padding: 22px;
  display: flex; flex-direction: column; gap: 14px; margin-top: 16px;
  box-shadow: var(--shadow);
}
.balance-head { display: flex; align-items: center; justify-content: space-between; }
.balance-label {
  font-size: 0.78rem; color: var(--balance-label); font-weight: 600; letter-spacing: 0.03em;
  display: flex; align-items: center; gap: 8px;
}
.demo-pill {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--balance-btn-alt); color: var(--balance-label);
  padding: 2px 8px; border-radius: 999px;
}
.eye-btn { background: none; border: 0; cursor: pointer; padding: 4px; display: flex; color: var(--balance-label); }
.balance-amount { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 800; color: var(--balance-ink); }
.balance-actions { display: flex; gap: 10px; margin-top: 4px; }
.balance-actions button {
  flex: 1; height: 42px; border-radius: 14px; border: 0; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 0.85rem; font-weight: 700;
}
.balance-actions .b-main { background: var(--balance-btn); color: var(--balance-bg); }
html[data-theme="dark"] .balance-actions .b-main { color: #04141A; }
.balance-actions .b-alt { background: var(--balance-btn-alt); color: var(--balance-ink); }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.quick-btn {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.quick-btn .q-icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--chip); border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--indigo);
  box-shadow: 0 3px 8px rgba(13,31,56,0.10);
  transition: transform 0.1s, box-shadow 0.12s;
}
.quick-btn:active .q-icon { transform: translateY(1px); box-shadow: 0 1px 4px rgba(13,31,56,0.12); }
.quick-btn .q-label { font-size: 0.72rem; color: var(--muted); font-weight: 700; }

.act-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 12px; }
.act-head h3 { font-size: 0.95rem; font-weight: 700; }
.act-head button { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.act-list { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.act-item { display: flex; align-items: center; gap: 12px; }
button.act-item {
  width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit; font-size: inherit;
}
button.act-item .act-amount, button.act-item .act-status { text-align: right; }
.act-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--chip); color: var(--ink);
  display: grid; place-items: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.85rem;
}
.act-avatar.in { color: var(--accent); }
.act-body { flex: 1; min-width: 0; }
.act-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.act-meta { font-size: 0.75rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-amount { font-family: 'Poppins', sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.act-amount.in { color: var(--accent); }
.act-status { font-size: 0.68rem; font-weight: 700; text-align: right; }
.act-status.SUCCESS { color: var(--green); }
.act-status.PENDING { color: var(--warn); }
.act-status.FAILED { color: var(--red); }

/* ── Publicités en rotation (accueil) ── */
.ads-carousel { margin-top: 16px; }
.ads-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 12px; scrollbar-width: none; -ms-overflow-style: none;
  border-radius: 20px;
}
.ads-track::-webkit-scrollbar { display: none; }
.ad-slide {
  scroll-snap-align: center; flex: 0 0 100%;
  min-height: 150px; border-radius: 20px; overflow: hidden;
  position: relative; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px; box-shadow: var(--shadow);
  background-size: cover; background-position: center;
}
.ad-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.ad-slide.no-img::after { background: none; }
.ad-slide .ad-tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(255,255,255,0.22); padding: 3px 9px; border-radius: 999px;
}
.ad-slide .ad-title { position: relative; z-index: 1; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.15rem; }
.ad-slide .ad-sub { position: relative; z-index: 1; font-size: 0.85rem; opacity: 0.92; margin-top: 2px; }
.ads-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.ads-dots .dot-i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: 0; padding: 0; cursor: pointer;
}
.ads-dots .dot-i.on { background: var(--indigo); width: 18px; border-radius: 4px; }
.ads-empty {
  /* Enfant d'une piste en flex : sans cette base, il se rétractait à la
     largeur de son texte et laissait un cadre pointillé décalé à gauche,
     visiblement plus étroit que tout le reste de la page. */
  flex: 1 0 100%;
  min-height: 110px; border-radius: 20px; border: 1.5px dashed var(--line);
  display: grid; place-items: center; color: var(--faint); font-size: 0.85rem; text-align: center; padding: 16px;
}

/* ── Étapes d'envoi ── */
.steps { display: flex; align-items: center; margin-bottom: 20px; }
.step-dot {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 800;
  background: var(--line); color: var(--muted);
}
.step-dot.active { background: var(--indigo); color: var(--primary-ink); }
.step-dot.done { background: var(--green); color: var(--primary-ink); }
.step-bar { flex: 1; height: 3px; background: var(--line); margin: 0 6px; border-radius: 2px; }
.send-step { display: flex; flex-direction: column; gap: 14px; }
.field-label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }

.funding-options { display: flex; flex-direction: column; gap: 10px; }
.funding-opt {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--line); border-radius: 16px;
  padding: 14px; cursor: pointer; font-family: inherit; font-size: 0.95rem; text-align: left;
  color: var(--ink);
}
.funding-opt.active { border-color: var(--indigo); box-shadow: 0 4px 14px rgba(20,49,92,0.15); }
.fo-icon { font-size: 1.3rem; }
.fo-name { font-weight: 700; flex: 1; }
.fo-fee { font-size: 0.78rem; color: var(--muted); font-weight: 600; }

/* ── Destinataires enregistrés (carnet d'adresses, étape 2) ── */
.benef-list {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.benef-list::-webkit-scrollbar { display: none; }
.benef-chip {
  display: flex; align-items: center; flex: 0 0 auto;
  border: 1.5px solid var(--line); border-radius: 18px; padding: 8px 6px 8px 10px;
  box-shadow: var(--glass-shadow);
}
.benef-chip.active { border-color: var(--indigo); }
.benef-pick {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--ink);
}
.benef-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.75rem;
  background: var(--indigo);
}
.benef-avatar.ORANGE { background: var(--orange); }
.benef-avatar.MOOV { background: var(--moov); }
.benef-avatar.WAVE { background: var(--wave); }
.benef-info b { display: block; font-size: 0.82rem; white-space: nowrap; }
.benef-info small { display: block; color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
.benef-del {
  background: none; border: 0; cursor: pointer; color: var(--faint);
  font-size: 0.85rem; padding: 4px 7px; margin-left: 2px;
}
.benef-del:hover { color: var(--red); }

.net-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.net-pill {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 8px 14px 8px 8px; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit;
  color: var(--muted);
}
.net-pill img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.net-pill.active.net-orange { border-color: var(--orange); color: var(--orange); background: #fff4e8; }
.net-pill.active.net-moov { border-color: var(--moov); color: var(--moov); background: #e8f6fd; }
.net-pill.active.net-wave { border-color: #0aa3d8; color: #0aa3d8; background: #e8f9ff; }

/* ── Moyens de paiement ── */
.method-picker { display: flex; flex-direction: column; gap: 10px; }
.method-item {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--line); border-radius: 16px;
  padding: 14px; cursor: pointer; font-family: inherit; font-size: 0.92rem; text-align: left; width: 100%;
  color: var(--ink);
}
.method-item.active { border-color: var(--indigo); box-shadow: 0 4px 14px rgba(20,49,92,0.15); }
.method-picker.static .method-item { cursor: default; }
/* Tuiles blanches des marques de paiement (Visa / Mastercard / PayPal) :
   fond blanc dans les deux thèmes — exigence de contraste des chartes. */
.pay-chip {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 28px; border-radius: 7px;
  background: #fff; border: 1px solid rgba(13, 31, 56, 0.14);
  box-shadow: 0 1px 3px rgba(13, 31, 56, 0.12);
  vertical-align: middle;
}
.pay-chip svg { width: 78%; height: 78%; display: block; }
.pay-chip-sm { width: 34px; height: 22px; border-radius: 5px; }
.fo-brands { display: inline-flex; gap: 6px; align-items: center; }
.mi-icon { width: 48px; height: 30px; }
.mi-label { font-weight: 700; flex: 1; }
.mi-sub { font-size: 0.75rem; color: var(--muted); display: block; font-weight: 500; }
.mi-delete { background: none; border: 0; color: var(--red); font-size: 1.05rem; cursor: pointer; padding: 4px 8px; }
.method-empty { color: var(--muted); font-size: 0.88rem; padding: 8px 2px; }

/* ── Récapitulatif / reçu ── */
.review { margin-top: 0; }
.review .row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 0.93rem; }
.review .row span:first-child { color: var(--muted); }
.review .row span:last-child { font-weight: 700; text-align: right; }
.review .row.total { border-top: 1.5px dashed var(--line); margin-top: 6px; padding-top: 12px; font-size: 1.05rem; }
.review .row.total span:last-child { color: var(--indigo-dark); }

.receipt { text-align: center; padding: 20px 0; }
.receipt .big-check {
  width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 2.2rem; color: var(--primary-ink);
}
.receipt .big-check.ok { background: var(--green); }
.receipt .big-check.ko { background: var(--red); }
.receipt h2 { margin-bottom: 6px; }
.receipt .ref { font-family: ui-monospace, monospace; background: var(--bg); display: inline-block; padding: 6px 14px; border-radius: 8px; font-weight: 700; margin: 10px 0; }
.receipt .detail { color: var(--muted); font-size: 0.92rem; line-height: 1.7; }

/* ── Liste de transferts ── */
.tx-list { display: flex; flex-direction: column; gap: 10px; }
.tx-item {
  border-radius: 18px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
/* Les opérations du client sont des boutons (ouvrent le reçu détaillé). */
button.tx-item {
  width: 100%; cursor: pointer; font-family: inherit;
  text-align: left; color: inherit; font-size: inherit;
}
button.tx-item:active { transform: scale(0.99); }
/* Logo du réseau destinataire (Orange Money / Moov / Wave). */
.tx-net {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  object-fit: cover; background: #fff;
  border: 1px solid rgba(13, 31, 56, 0.12);
  box-shadow: 0 1px 3px rgba(13, 31, 56, 0.12);
}
.tx-body { flex: 1; min-width: 0; }
.tx-name { font-weight: 700; font-size: 0.93rem; }
.tx-sub { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-right { text-align: right; }
.tx-amount { font-weight: 800; font-size: 0.95rem; }
.tx-status { font-size: 0.72rem; font-weight: 700; }
.tx-status.SUCCESS { color: var(--green); }
.tx-status.PENDING { color: var(--warn); }
.tx-status.FAILED { color: var(--red); }
.tx-empty { color: var(--muted); font-size: 0.9rem; background: var(--card); border-radius: 14px; padding: 18px; text-align: center; }

/* ── Navigation basse (maquette : 4 onglets + bouton Envoyer central) ── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1px solid var(--glass-line);
  padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
  max-width: 100%;
}
.nav-btn {
  flex: 1; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 0.66rem; font-weight: 600; color: var(--faint); padding: 4px 0;
}
.nav-btn svg { stroke: currentColor; }
.nav-btn.active { color: var(--ink); }
.nav-gap { width: 64px; flex: 0 0 auto; }
.fab-wrap {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%); z-index: 11;
  text-align: center;
}
.fab {
  width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
  background: var(--fab-bg); color: var(--fab-ink);
  border: 4px solid var(--card);
  box-shadow: 0 10px 22px -6px var(--fab-shadow);
  display: grid; place-items: center;
}
.fab-label { font-size: 0.66rem; font-weight: 700; color: var(--ink); margin-top: 4px; }

/* ── Profil ── */
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 6px; }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--indigo); color: var(--primary-ink);
  display: grid; place-items: center;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.5rem;
}
.profile-name { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.15rem; }
.profile-rows { margin-top: 6px; padding: 6px 20px; }
.profile-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.profile-row:last-child { border-bottom: 0; }
.profile-row .p-label { color: var(--muted); font-weight: 600; }
.profile-row .p-value { font-weight: 700; text-align: right; }
.theme-controls { display: flex; align-items: center; gap: 10px; }
.theme-controls .chip-auto { padding: 5px 12px; font-size: 0.72rem; }
.switch {
  width: 40px; height: 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--line); position: relative; transition: background 0.15s; flex: 0 0 auto;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left 0.15s;
}
.switch.on { background: var(--indigo); }
.switch.on::after { left: 21px; }
.btn-danger { background: none; border: 1.5px solid var(--red); color: var(--red); }
.logout-btn { margin-top: 16px; }

/* ── Verrou PIN (réouverture) ── */
.lock-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: linear-gradient(160deg, #0D1F38 0%, #14315C 55%, #0D1F38 100%);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lock-box {
  width: 100%; max-width: 340px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lock-box h3 { color: #fff; font-size: 1.15rem; }
.lock-box .muted { color: rgba(255,255,255,0.75); }
.lock-box input {
  text-align: center; letter-spacing: 0.5em; font-size: 1.4rem; font-weight: 700;
  max-width: 180px; background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25);
}
.lock-box .btn-lg { width: 100%; }
.lock-box .btn-ghost { color: rgba(255,255,255,0.75); }
.lock-box .form-error { color: #ffb3c0; }

/* ── Feuille « bientôt disponible » ── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40; background: rgba(13, 31, 56, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  border-radius: 28px 28px 0 0; padding: 28px 24px 40px;
  width: 100%; max-width: 520px; text-align: center;
}
/* Feuille reçu détaillé : contenu aligné à gauche, titre centré. */
.sheet-left { text-align: left; }
.sheet-left h3 { text-align: center; margin-bottom: 12px; }
.sheet-left .btn-row { margin-top: 18px; }
.sheet .s-icon { font-size: 2rem; margin-bottom: 10px; }
.sheet h3 { margin-bottom: 8px; }
.sheet p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 18px; }

/* ── Administration ── */
.admin-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin-bottom: 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.atab {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  padding: 9px 13px; border-radius: 10px; font-weight: 700; font-size: 0.8rem;
  color: var(--muted); white-space: nowrap;
}
.atab.active { background: var(--card); color: var(--indigo); box-shadow: 0 2px 8px rgba(13,31,56,0.12); }
.admin-pane { display: flex; flex-direction: column; gap: 16px; }
.admin-pane .card { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.check-row input { width: auto; margin: 0; }
.color-input { height: 46px; padding: 4px; cursor: pointer; }
.ad-visual-tabs .tabs.small { margin-top: 6px; margin-bottom: 0; }

/* Liste des publicités (admin) */
.ads-admin-list, .staff-list { display: flex; flex-direction: column; gap: 10px; }
.ad-admin {
  border-radius: 18px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.ad-admin .ad-thumb {
  width: 48px; height: 48px; border-radius: 10px; flex: 0 0 auto;
  background-size: cover; background-position: center;
}
.ad-admin .ad-info { flex: 1; min-width: 0; }
.ad-admin .ad-info b { display: block; font-size: 0.9rem; }
.ad-admin .ad-info small { color: var(--muted); font-size: 0.75rem; }
.ad-admin .ad-price { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.82rem; color: var(--green); white-space: nowrap; }
.ad-admin .ad-off { color: var(--faint); }
.ad-admin-actions { display: flex; gap: 6px; }
.ad-admin-actions button { background: none; border: 0; cursor: pointer; font-size: 1rem; padding: 4px; }
.pill-badge {
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}
.pill-badge.on { background: #e7f7ef; color: var(--green); }
.pill-badge.off { background: var(--chip); color: var(--muted); }

/* Liste du personnel (admin) */
.staff-item {
  border-radius: 18px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.staff-item .st-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: var(--indigo); color: var(--primary-ink);
  display: grid; place-items: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.8rem;
}
.staff-item .st-info { flex: 1; min-width: 0; }
.staff-item .st-info b { font-size: 0.9rem; }
.staff-item .st-info small { display: block; color: var(--muted); font-size: 0.75rem; }
.st-role { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--chip); color: var(--indigo); }
.st-role.ADMIN { background: #fff1e6; color: var(--orange); }
.range-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.range-bar label { flex: 1; min-width: 120px; }
.range-bar input[type="date"] { padding: 10px 10px; }
.range-presets { display: flex; gap: 6px; }
.chip {
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-weight: 700; font-size: 0.8rem; cursor: pointer;
  font-family: inherit; color: var(--muted);
}
.chip.active { border-color: var(--indigo); color: var(--indigo); background: var(--chip); }

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi { border-radius: 18px; padding: 14px; }
.kpi .kpi-label { font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi .kpi-value { font-family: 'Poppins', sans-serif; font-size: 1.15rem; font-weight: 800; margin-top: 4px; color: var(--indigo-deep); line-height: 1.15; word-break: break-word; }
.kpi.bad .kpi-value { color: var(--red); }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.chart .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.chart .bar { width: 100%; max-width: 38px; background: var(--indigo); border-radius: 6px 6px 0 0; min-height: 3px; }
.chart .bar-label { font-size: 0.62rem; color: var(--muted); white-space: nowrap; overflow: hidden; max-width: 100%; }
.chart-empty { color: var(--muted); font-size: 0.88rem; }

.corridor-list { display: flex; flex-direction: column; gap: 8px; }
.corridor {
  border-radius: 16px; padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.88rem;
}
.corridor .c-route { display: flex; align-items: center; gap: 6px; }
.corridor .c-route { font-weight: 700; }
.corridor .c-nums { color: var(--muted); font-size: 0.8rem; text-align: right; white-space: nowrap; }

.fee-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; align-items: end; }
.fee-row .fee-name {
  font-weight: 700; font-size: 0.9rem; padding-bottom: 13px;
  display: flex; align-items: center; gap: 7px;
}
.fee-row .pay-chip { width: 36px; height: 23px; border-radius: 5px; }
.form-ok { color: var(--green); font-size: 0.85rem; font-weight: 600; min-height: 1em; }

.gateway-form h3 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; }
.gw-status {
  font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.gw-status.on { background: #e7f7ef; color: var(--green); border-color: var(--green); }
select {
  width: 100%; margin-top: 6px; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 1rem; font-family: inherit; color: var(--ink); background: var(--card);
}
select:focus { outline: none; border-color: var(--indigo); }

.tx-sub .ref-mono { font-family: ui-monospace, monospace; }

/* ── PIN oublié / dépannage ── */
a.btn { display: block; text-align: center; text-decoration: none; }
.reset-code-big {
  font-family: ui-monospace, monospace; font-size: 1.25rem; letter-spacing: 0.12em;
  color: var(--indigo); white-space: nowrap;
}
.st-key { color: var(--indigo); }

@media (min-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 640px) {
  .auth-hero h1 { font-size: 2.4rem; }
  #screen-auth { justify-content: center; }
  .auth-card { border-radius: 26px; margin: 20px auto 40px; }
  .bottom-nav { max-width: 520px; left: 50%; transform: translateX(-50%); border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0; }
}

/* Ajustements thème sombre */
html[data-theme="dark"] .net-pill.active.net-orange,
html[data-theme="dark"] .net-pill.active.net-moov,
html[data-theme="dark"] .net-pill.active.net-wave { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .user-chip { color: var(--ink); }
html[data-theme="dark"] .kpi .kpi-value { color: var(--ink); }
html[data-theme="dark"] .switch::after { background: #04141A; }

/* ═══════════════ Console d'exploitation (tableau de bord admin) ═══════════════
   Même langage « liquid glass » que le reste de l'app, en version console :
   tuiles KPI teintées par famille, pastilles d'icônes, reflet glossy, ombres
   colorées, chiffres tabulaires. Aligné sur le tableau de bord TAKANA Ops.
   Teintes : --tx = accent, --tbg = voile de fond assorti. */
.t-indigo { --tx: #14315C; --tbg: rgba(20, 49, 92, 0.10); }
.t-bleu   { --tx: #2F6FD8; --tbg: rgba(47, 111, 216, 0.10); }
.t-vert   { --tx: #0C9D61; --tbg: rgba(12, 157, 97, 0.10); }
.t-orange { --tx: #E8540E; --tbg: rgba(232, 84, 14, 0.10); }
.t-violet { --tx: #7C5CD6; --tbg: rgba(124, 92, 214, 0.10); }
.t-cyan   { --tx: #0E8FA8; --tbg: rgba(14, 143, 168, 0.10); }
.t-rouge  { --tx: #D92D4A; --tbg: rgba(217, 45, 74, 0.10); }

/* Tuiles KPI : verre teinté, reflet supérieur, ombre portée colorée */
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.kpi {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  border-radius: 20px; padding: 14px 15px;
  background: linear-gradient(155deg, var(--kpi-top, rgba(255, 255, 255, 0.94)) 0%, var(--tbg, var(--glass)) 100%);
  border: 1px solid color-mix(in srgb, var(--tx, #14315C) 14%, var(--glass-line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 12px 26px -8px color-mix(in srgb, var(--tx, #14315C) 26%, transparent);
  transition: transform 0.18s, box-shadow 0.18s;
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 16px 32px -8px color-mix(in srgb, var(--tx, #14315C) 36%, transparent);
}
.kpi::after {                                   /* reflet « glossy » */
  content: ''; position: absolute; inset: 0 0 58% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
}
.kpi .kpi-ic {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: grid; place-items: center; font-size: 19px; border-radius: 13px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tx, #14315C) 20%, #fff),
    color-mix(in srgb, var(--tx, #14315C) 8%, #fff));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
              0 4px 10px -3px color-mix(in srgb, var(--tx, #14315C) 45%, transparent);
}
.kpi .kpi-body { min-width: 0; }
.kpi .kpi-value {
  font-size: 1.28rem; margin-top: 1px;
  color: var(--tx, var(--indigo-deep));
  font-variant-numeric: tabular-nums;
}
.kpi.bad .kpi-value { color: var(--tx); }

/* Pastille d'icône devant les titres de section */
.ic-h {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 10px;
  margin-right: 9px; font-size: 15px; vertical-align: -8px;
  background: var(--tbg, rgba(20, 49, 92, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
              0 3px 8px -2px color-mix(in srgb, var(--tx, #14315C) 32%, transparent);
}

/* Cartes de la console : bordure lumineuse un peu plus marquée */
.admin-pane .card, .admin-pane .corridor, .admin-pane .ad-admin, .admin-pane .staff-item {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--glass-shadow);
}
.admin-pane .corridor, .admin-pane .ad-admin, .admin-pane .staff-item { transition: transform 0.16s, box-shadow 0.16s; }
.admin-pane .corridor:hover, .admin-pane .ad-admin:hover, .admin-pane .staff-item:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 28px rgba(13, 31, 56, 0.13);
}
.admin-pane .corridor .c-nums, .admin-pane table { font-variant-numeric: tabular-nums; }

/* Onglets segmentés : actif en verre indigo plein */
.atab.active {
  background: linear-gradient(135deg, #14315C 0%, #21507F 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(20, 49, 92, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Histogramme : barres en dégradé avec reflet */
.chart .bar {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #21507F 0%, #14315C 100%);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 6px 14px -4px rgba(20, 49, 92, 0.45);
}
.chart .bar::after {
  content: ''; position: absolute; inset: 0 50% 0 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
}

/* Pastille de statut des passerelles : verre teinté */
.gw-status {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), var(--glass));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.gw-status.on {
  background: linear-gradient(160deg, rgba(12, 157, 97, 0.16), rgba(12, 157, 97, 0.07));
  color: var(--green); border-color: rgba(12, 157, 97, 0.5);
}

/* Thème sombre : le reflet blanc devient un liseré discret */
html[data-theme="dark"] .kpi::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)); }
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .admin-pane .card,
html[data-theme="dark"] .admin-pane .corridor,
html[data-theme="dark"] .admin-pane .ad-admin,
html[data-theme="dark"] .admin-pane .staff-item {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--glass-shadow);
}
html[data-theme="dark"] .kpi:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              0 16px 32px -8px color-mix(in srgb, var(--tx, #5EEAD4) 42%, transparent);
}
html[data-theme="dark"] .kpi .kpi-ic {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tx, #5EEAD4) 38%, transparent),
    color-mix(in srgb, var(--tx, #5EEAD4) 14%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* Sur fond pétrole, les teintes de la console doivent être déjà claires :
   on remplace les accents sombres du thème clair par leurs versions vives,
   et la valeur du KPI prend directement la teinte (plus de color-mix). */
html[data-theme="dark"] .t-indigo { --tx: #8AB6E6; --tbg: rgba(138, 182, 230, 0.10); }
html[data-theme="dark"] .t-bleu   { --tx: #6FA8F5; --tbg: rgba(111, 168, 245, 0.10); }
html[data-theme="dark"] .t-vert   { --tx: #4ADE80; --tbg: rgba(74, 222, 128, 0.10); }
html[data-theme="dark"] .t-orange { --tx: #FF9A4D; --tbg: rgba(255, 154, 77, 0.10); }
html[data-theme="dark"] .t-violet { --tx: #B49BFF; --tbg: rgba(180, 155, 255, 0.10); }
html[data-theme="dark"] .t-cyan   { --tx: #5EEAD4; --tbg: rgba(94, 234, 212, 0.10); }
html[data-theme="dark"] .t-rouge  { --tx: #FB7185; --tbg: rgba(251, 113, 133, 0.10); }
html[data-theme="dark"] .kpi .kpi-value { color: var(--tx, var(--ink)); }
html[data-theme="dark"] .ic-h { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .atab.active { background: linear-gradient(135deg, #5EEAD4 0%, #2FA89A 100%); color: #04141A; }
html[data-theme="dark"] .chart .bar { background: linear-gradient(180deg, #5EEAD4 0%, #2FA89A 100%); }

/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
  .kpi, .admin-pane .corridor, .admin-pane .ad-admin, .admin-pane .staff-item { transition: none; }
  .kpi:hover, .admin-pane .corridor:hover, .admin-pane .ad-admin:hover, .admin-pane .staff-item:hover { transform: none; }
}
/* Titres de passerelle : conteneur flex, la pastille n'a pas besoin de marge. */
.gateway-form h3 .ic-h { margin-right: 0; }
/* Sommet des tuiles KPI : blanc franc en clair, verre sombre en sombre. */
html[data-theme="dark"] .kpi { --kpi-top: rgba(22, 40, 63, 0.86); }
/* Pastille de statut en thème sombre : verre sombre, pas un jeton blanc. */
html[data-theme="dark"] .gw-status {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .gw-status.on {
  background: linear-gradient(160deg, rgba(12, 157, 97, 0.30), rgba(12, 157, 97, 0.14));
  color: #6ee7b0; border-color: rgba(12, 157, 97, 0.55);
}

/* Écran de connexion en thème sombre : même dégradé, décliné en pétrole —
   sinon on se connecte sur un fond navy pour atterrir dans une app verte. */
html[data-theme="dark"] #screen-auth {
  background: linear-gradient(160deg, #04141A 0%, #0F3540 55%, #04141A 100%);
}

/* Badges d'annonce : l'état RÉEL côté client, pas seulement le drapeau actif. */
.pill-badge.exp { background: #fdecee; color: var(--red); }
.pill-badge.prog { background: #e8f1fd; color: #2F6FD8; }
html[data-theme="dark"] .pill-badge.on { background: rgba(74, 222, 128, 0.16); }
html[data-theme="dark"] .pill-badge.exp { background: rgba(251, 113, 133, 0.16); }
html[data-theme="dark"] .pill-badge.prog { background: rgba(111, 168, 245, 0.16); color: #6FA8F5; }

/* ═══════════════ Niveau de finition « Oumistore » (2026-07-24) ═══════════════
   Repris de oumistore.com : typographie audacieuse à interlignage resserré,
   titres bicolores, cartes flottantes, révélations au défilement. PAS leur
   identité verte — l'accent est l'orange du tama, couleur de la marque.
   Relevé sur leur site : titres en graisse 900 avec un interlignage INFÉRIEUR
   à la taille du texte (60px/54px), cartes à rayon 24px, révélations de 600ms
   en cubic-bezier(.5,0,0,1). Échelle ici volontairement plus mesurée : on
   affiche des montants d'argent, pas une page de vente. */

/* ── Titres : Outfit 900, interlignage 0,95, chasse resserrée ── */
.app-screen h2, .auth-title {
  font-family: 'Outfit', 'Poppins', sans-serif;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.app-screen h2 { font-size: 1.75rem; margin-bottom: 16px; }
/* Titre de la connexion : volontairement plus petit que les titres d'écran.
   Il est déjà précédé du logo et du mot TCHIDEN — trois éléments forts
   empilés saturaient le haut de page et repoussaient le formulaire. */
.auth-title { font-size: 1.35rem; text-align: center; margin: 4px 0 18px; color: #fff; }
/* Le mot mis en avant dans un titre bicolore. */
.t-accent { color: var(--orange); }

/* Titres de section : même famille de traitement, un cran en dessous. */
.section-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800; font-size: 1.05rem;
  line-height: 1.1; letter-spacing: -0.015em;
}
/* Prénom sur l'accueil : c'est le titre de l'écran, il doit peser. */
.home-name {
  font-family: 'Outfit', 'Poppins', sans-serif;
  font-weight: 900; font-size: 1.6rem;
  line-height: 0.95; letter-spacing: -0.025em;
}
/* Montants : Poppins conservé (chiffres plus lisibles qu'en Outfit 900). */
.balance-amount, .amount-big { letter-spacing: -0.02em; }

/* ── Cartes flottantes : rayon plus généreux, ombre en deux couches ──
   Une ombre courte et dense donne le contact, une longue et diffuse donne
   l'altitude : c'est ce qui fait « flotter » plutôt que « coller ». */
.card, .auth-card, .kpi, .tx-item, .corridor, .ad-admin, .staff-item, .method-item {
  border-radius: 24px;
}
.card, .auth-card {
  box-shadow: 0 2px 6px rgba(13, 31, 56, 0.05), 0 18px 40px -14px rgba(13, 31, 56, 0.18);
}
html[data-theme="dark"] .card, html[data-theme="dark"] .auth-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}

/* ── Révélations au défilement (IntersectionObserver dans app.js) ──
   Une seule fois par élément : réapparaître à chaque remontée serait pénible
   dans une app utilisée plusieurs fois par semaine. */
/* Entrée de liste — la règle qui compte : on n'anime QUE le déplacement,
   jamais l'opacité. Vérifié en conditions réelles : quand l'onglet n'est pas
   au premier plan (`document.hidden`), l'IntersectionObserver ne se déclenche
   pas ; avec une opacité à 0 le contenu restait invisible INDÉFINIMENT — un
   historique de transferts vide, sur une app d'argent. Ici, si la révélation
   n'a jamais lieu, l'élément est simplement 10 px plus bas : lisible.
   Durée ramenée de 600 à 220 ms (budget produit : 150-250 ms). */
.rv { transform: translateY(10px); }
.rv-in {
  transform: none;
  transition: transform 0.22s cubic-bezier(0.5, 0, 0, 1);
}

/* ── Logo de la page de connexion : deux mouvements superposés ──
   Le halo respirant et la bascule utilisent tous deux `transform` : les poser
   sur le MÊME élément ferait que l'un écrase l'autre. Le conteneur porte donc
   la respiration verticale, la marque porte la bascule. */
.auth-logo { animation: logo-float 3.4s ease-in-out infinite; }
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* « Tomber et se relever » : le tama bascule sur sa base puis se redresse en
   oscillant, comme un objet lesté qu'on pousse. Pivot en bas au centre —
   c'est ce point d'appui qui rend la chute crédible plutôt que giratoire.
   Long temps mort (0 → 55 %) : le mouvement surprend au lieu de lasser. */
.auth-logo .brand-mark {
  transform-origin: 50% 92%;
  animation: logo-basculer 5.2s cubic-bezier(0.5, 0, 0, 1) infinite,
             logo-halo 3.4s ease-in-out infinite;
}
@keyframes logo-basculer {
  0%, 55%   { transform: rotate(0deg); }
  64%       { transform: rotate(-17deg); }   /* la chute */
  73%       { transform: rotate(11deg); }    /* le rebond */
  81%       { transform: rotate(-6deg); }
  89%       { transform: rotate(3deg); }
  95%, 100% { transform: rotate(0deg); }     /* retour d'aplomb */
}
@keyframes logo-halo {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 121, 0, 0.5)); }
  50%      { filter: drop-shadow(0 12px 18px rgba(255, 121, 0, 0.45)); }
}

/* ── Bouton principal (la flèche) : anneau pulsé + flèche qui avance ──
   L'anneau est un pseudo-élément dessous : il ne perturbe ni la taille du
   bouton ni la zone tactile. */
.fab { position: relative; transition: transform 0.18s cubic-bezier(0.5, 0, 0, 1); }
/* Plus d'anneau pulsé ni de flèche qui s'efface : sur le bouton d'action
   principal, une icône qui disparaît toutes les 2,8 s est un défaut, pas un
   effet. La motion se déclenche maintenant au contact. */
.fab svg { transition: transform 0.18s cubic-bezier(0.5, 0, 0, 1); }
.fab:active svg { transform: translateX(4px); }
.fab:hover { transform: translateY(-2px); }
.fab:active { transform: scale(0.94); }

/* Accessibilité : rien ne bouge si l'utilisateur refuse les animations. */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-in { transform: none; transition: none; }
  .auth-logo, .auth-logo .brand-mark { animation: none; }
  .fab, .fab svg { transition: none; }
}

/* ═══════════ Corrections issues de l'audit design (2026-07-24) ═══════════ */

/* Assistant d'envoi : la barre basse et le bouton flèche disparaissent.
   Mesuré avant : à l'ouverture de l'étape 1 sans défilement, le bouton
   « Continuer » était recouvert de 46px par le FAB. Augmenter la marge basse
   ne réglait le cas qu'une fois défilé jusqu'en bas. On est déjà DANS la
   tâche « envoyer » : une navigation qui propose d'envoyer est du bruit, et
   le logo de l'en-tête reste la sortie de secours. */
#app.tache-en-cours .bottom-nav { display: none; }
#app.tache-en-cours #main { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

/* Squelettes de chargement : une liste vide ne doit jamais ressembler à
   « vous n'avez rien ». Dimensions calquées sur .tx-item pour éviter le saut
   de mise en page à l'arrivée des vraies données. */
.skel-list { display: flex; flex-direction: column; gap: 10px; }
.skel-row {
  height: 68px; border-radius: 24px;
  background: linear-gradient(100deg, var(--chip) 30%, var(--glass-strong) 50%, var(--chip) 70%);
  background-size: 300% 100%;
  animation: skel-glisse 1.2s ease-in-out infinite;
}
@keyframes skel-glisse {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel-row { animation: none; background: var(--chip); }
}

/* ── Motion fonctionnelle : elle transmet un état, pas de la décoration ──
   L'audit relevait qu'aucune transition n'existait aux trois endroits où
   elle porte du sens : le changement d'écran, l'ouverture d'une feuille et
   la confirmation d'un succès. Budget produit : 150-250 ms. */

/* Changement d'écran : une montée courte dit d'où l'on vient. Sans elle, la
   navigation était une coupe sèche suivie d'un saut de défilement. */
.app-screen:not(.hidden) { animation: ecran-entre 0.2s cubic-bezier(0.5, 0, 0, 1) both; }
@keyframes ecran-entre {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Feuille modale : elle monte du bas, comme le geste qui l'appelle. C'était
   le seul endroit du produit où la motion transmettait vraiment un état, et
   le panneau apparaissait instantanément. */
.sheet-backdrop:not(.hidden) { animation: voile-entre 0.18s ease-out both; }
.sheet-backdrop:not(.hidden) .sheet { animation: feuille-monte 0.26s cubic-bezier(0.5, 0, 0, 1) both; }
@keyframes voile-entre { from { opacity: 0; } to { opacity: 1; } }
@keyframes feuille-monte {
  from { transform: translateY(14%); }
  to   { transform: none; }
}

/* Succès : le ✓ se pose. C'est le sommet du parcours et il était strictement
   immobile — l'app ponctuait l'échec (vibration) sans ponctuer la réussite. */
.receipt .big-check.ok { animation: check-pose 0.42s cubic-bezier(0.34, 1.4, 0.5, 1) both; }
@keyframes check-pose {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .app-screen:not(.hidden),
  .sheet-backdrop:not(.hidden),
  .sheet-backdrop:not(.hidden) .sheet,
  .receipt .big-check.ok { animation: none; }
}

/* ── Défauts mesurés lors de l'audit du 2026-07-24 ── */

/* Placeholders : aucune règle n'existait, donc couleur navigateur par défaut
   — mesuré 2,65:1 sur les champs en thème sombre. */
::placeholder { color: var(--faint); opacity: 1; }

/* Focus clavier : `input:focus` et `select:focus` faisaient `outline: none`
   et ne laissaient qu'une bordure de 1,5px ; aucune règle `:focus-visible`
   n'existait dans le projet. On rétablit un anneau net, à la couleur
   d'action, uniquement pour la navigation clavier (pas au clic souris). */
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}

/* Cibles tactiles : 20 contrôles mesurés sous 44px de hauteur. On élargit la
   zone de contact SANS changer l'apparence, via un pseudo-élément centré —
   la mise en page reste identique, le doigt a de la marge. */
.icon-chip, .avatar-chip, .switch, .btn-ghost, .auth-switch,
.chip-auto, .act-head button, .atab { position: relative; }
.icon-chip::after, .avatar-chip::after, .switch::after, .btn-ghost::after,
.auth-switch::after, .chip-auto::after, .act-head button::after, .atab::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; min-width: 44px; height: 44px;
  pointer-events: auto;
}
/* Le commutateur du thème a déjà un ::after décoratif (la pastille) : sa
   zone tactile passe donc par un agrandissement direct. */
.switch::after { content: none; }
.switch { min-height: 44px; padding: 11px 0; background-clip: content-box; }

/* Référence de transfert dans l'admin : elle débordait de 209px hors d'un
   parent en `overflow-x: hidden` — donc invisible à l'écran, alors que c'est
   l'identifiant qu'un client cite au téléphone. Elle passe à la ligne. */
.tx-sub { white-space: normal; }
.tx-sub .ref-mono { user-select: all; word-break: break-all; }

/* ── Moments clés du parcours (audit 2026-07-24) ── */

/* PIN refusé : le champ se signale visuellement, en plus du message. */
.champ-faux { border-color: var(--red) !important; animation: secousse 0.4s ease-in-out; }
@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.recours { font-size: 0.86rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.lien-inline {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--indigo); font-weight: 700; text-decoration: underline;
}

/* Reçu : de paragraphe centré à vrai reçu, lignes alignées. */
.recu-lignes { text-align: left; margin: 16px 0 4px; }
.recu-l {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 0.92rem; color: var(--muted);
}
.recu-l b { color: var(--ink); font-weight: 700; text-align: right; }
.recu-l.total { border-bottom: 0; padding-top: 12px; }
.recu-l.total b { font-family: 'Poppins', sans-serif; font-size: 1.05rem; color: var(--indigo-deep); }

/* Référence copiable : c'est ce que le client cite au support. */
/* `.receipt .ref` (2 classes) l'emportait sur `.ref-copie` (1 classe) et
   réimposait `display: inline-block` : l'espacement flex ne s'appliquait pas
   et l'indicateur « copier » restait collé à la référence. */
.receipt .ref-copie {
  border: 1px dashed var(--line); cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; color: var(--ink);
}
.receipt .ref-copie .ref-ind {
  font-family: 'Manrope', sans-serif; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--indigo);
}
.receipt .big-check.attente { background: var(--warn); }
#btn-renvoyer { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) { .champ-faux { animation: none; } }

/* Encart « transfert en cours » : le statut PENDING n'était qu'un mot ambre,
   sans explication ni recours, alors que c'est le moment où l'utilisateur se
   demande où est son argent. */
.encart-attente {
  text-align: left; font-size: 0.86rem; line-height: 1.6;
  color: var(--muted); background: var(--chip);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 14px;
}
.encart-attente b { display: block; color: var(--ink); font-size: 0.95rem; margin-bottom: 6px; }
.encart-attente strong { color: var(--ink); }

/* ═══════════ Adaptation tablette et ordinateur (2026-07-25) ═══════════
   L'app était dessinée pour le téléphone et le restait à 1280px : une
   colonne de 520px perdue au milieu de l'écran, barre de navigation
   flottante en bas, et surtout une console d'exploitation comprimée à deux
   colonnes de tuiles là où l'écran en offrait six. L'adaptation est
   STRUCTURELLE (la navigation change de forme, les grilles changent de
   nombre de colonnes) et non typographique : les tailles de texte ne
   bougent pas, c'est la mise en page qui s'ouvre. */

/* ── Tablette : plus de largeur utile, la navigation basse reste (tactile) ── */
@media (min-width: 640px) {
  #main { max-width: 680px; padding-left: 28px; padding-right: 28px; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { gap: 16px; }
  /* Les listes respirent : l'espace gagné va aux marges internes. */
  .tx-item, .method-item, .ad-admin, .staff-item { padding: 16px 18px; }
}

/* ── Ordinateur : la barre du bas devient un rail latéral ──
   C'est la convention de la plateforme : sur un écran large et sans doigt,
   une barre d'onglets collée en bas est un vestige de téléphone. Le rail
   reprend les mêmes boutons, sans changer une ligne de HTML. */
@media (min-width: 1024px) {
  .bottom-nav {
    top: 0; bottom: 0; right: auto; width: 232px;
    flex-direction: column; justify-content: flex-start;
    gap: 4px; padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
    border-top: 0; border-right: 1px solid var(--glass-line);
    max-width: none; left: 0; transform: none; border-radius: 0;
  }
  .nav-btn {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: 14px; width: 100%; padding: 12px 14px; border-radius: 14px;
    font-size: 0.92rem; font-weight: 700;
  }
  .nav-btn.active { background: var(--chip); color: var(--indigo); }
  .nav-btn:hover { background: var(--chip); }
  .nav-gap { display: none; }

  /* Le bouton d'envoi rejoint le haut du rail : il redevient une action
     nommée plutôt qu'une pastille flottante sans étiquette. */
  .fab-wrap {
    position: static; transform: none; order: -1;
    width: 100%; margin-bottom: 14px; text-align: left;
  }
  .fab {
    width: 100%; height: auto; border-radius: 14px; border: 0;
    padding: 13px 16px; justify-items: start;
    grid-auto-flow: column; justify-content: flex-start; gap: 12px;
  }
  .fab::after { content: 'Envoyer'; font-family: inherit; font-weight: 800; font-size: 0.95rem; }
  .fab-label { display: none; }

  /* Le contenu se décale du rail et s'élargit. Deux largeurs distinctes :
     le client reste en colonne lisible (on y remplit des formulaires), la
     console admin prend la place disponible (on y lit des tableaux). */
  /* Le décalage suit le rail RÉEL : le personnel n'a pas de navigation
     cliente (`.bottom-nav.hidden`), et l'assistant d'envoi la masque. Sans
     ce sélecteur, un espace vide de 232px subsistait à gauche du logo alors
     qu'aucun rail n'était affiché. */
  #main { max-width: 720px; padding-bottom: 40px; }
  #app:has(.bottom-nav:not(.hidden)) #main { margin-left: 232px; }
  #app:has(.bottom-nav:not(.hidden)) .app-header { padding-left: 260px; }
  #app.admin-large #main { max-width: 1120px; }
  #app.tache-en-cours .bottom-nav { display: none; }

  /* Console : la largeur sert à voir plus de choses à la fois. Grille
     auto-ajustée plutôt qu'un nombre fixe de colonnes — à six, les tuiles
     tombaient à 155px et « 235 000 F » se coupait en deux lignes. */
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
  .corridor-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .admin-pane .gateway-form { max-width: 560px; }
  .chart { height: 200px; }
}

/* ── Grand écran : on cesse d'élargir le texte, on centre ── */
@media (min-width: 1440px) {
  #app.admin-large #main { max-width: 1280px; }
}

/* ── Iconographie Phosphor (remplace les emoji, audit design 2026-07-26) ──
   Les emoji ne sont pas une iconographie : leur dessin change d'un système à
   l'autre, ils ne suivent pas la couleur du texte, et ils sonnent clavier
   plutôt que console financière. Le sprite est inliné en tête de page. */
.sprite { display: none; }
.ic {
  width: 1em; height: 1em; flex: 0 0 auto;
  fill: currentColor; vertical-align: -0.14em;
}
/* Les pastilles de titre et les tuiles KPI dimensionnent leur icône. */
.ic-h .ic { width: 1.05em; height: 1.05em; vertical-align: -0.18em; }
.kpi-ic .ic { width: 1.3em; height: 1.3em; }
.fo-icon .ic, .fee-name .ic { width: 1.15em; height: 1.15em; }
.s-icon .ic { width: 1em; height: 1em; }
/* Boutons d'action sans texte : l'icône porte tout le poids visuel. */
.mi-delete .ic, [data-edit] .ic, [data-delad] .ic { width: 1.15em; height: 1.15em; }