/* ============================================================
   CRM Groupe COGEFI Afrique — Styles (mobile-first, premium)
   Palette : vert #008037 / bleu #1E4E8C / or #C9A227
   Polices système uniquement (fonctionnement hors connexion).
   ============================================================ */

:root {
  --vert: #008037;
  --vert-fonce: #006a2e;
  --vert-clair: #e7f4ec;
  --vert-pale: #f3faf6;
  --bleu: #1E4E8C;
  --bleu-clair: #eaf0f8;
  --or: #C9A227;
  --or-clair: #f8f1d9;

  --noir: #14201a;
  --gris-900: #1f2a24;
  --gris-700: #45514b;
  --gris-500: #6b766f;
  --gris-300: #c9d2cc;
  --gris-200: #e3e9e5;
  --gris-100: #f1f4f2;
  --blanc: #ffffff;
  --fond: #f5f7f6;

  /* Code couleur par type d'institution (teintes harmonisées) */
  --t-min: #1E4E8C;  --t-min-bg: #e9f0f9;   /* Ministères — bleu */
  --t-pub: #0E7E87;  --t-pub-bg: #e2f1f2;   /* Entreprises publiques — sarcelle (vert réservé à COGEFI) */
  --t-priv: #8a6d12; --t-priv-bg: #f7f0d6;  /* Entreprises privées — doré */
  --t-int: #6E59A5;  --t-int-bg: #efeafa;   /* Organisations internationales — violet */
  --t-oth: #5b6b63;  --t-oth-bg: #eef1ef;   /* Autres types ajoutés — neutre */

  --ombre-1: 0 1px 3px rgba(20, 32, 26, 0.06), 0 1px 2px rgba(20, 32, 26, 0.04);
  --ombre-2: 0 4px 16px rgba(20, 32, 26, 0.08);
  --ombre-3: 0 12px 32px rgba(20, 32, 26, 0.14);
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;

  --appbar-h: 56px;
  --nav-h: 86px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--fond);
  color: var(--gris-900);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: 16px; }
button { cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Bannière hors connexion ---------- */
.offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--or); color: #3a2e05;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  text-align: center; padding: 6px 12px;
  transform: translateY(-100%); transition: transform .3s ease;
  padding-top: calc(6px + env(safe-area-inset-top));
}
body.is-offline .offline-banner { transform: translateY(0); }

/* ============================================================
   ÉCRAN D'ACCÈS
   ============================================================ */
.login {
  position: fixed; inset: 0; z-index: 300;
  background: linear-gradient(165deg, #04331b 0%, var(--vert-fonce) 45%, var(--vert) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center; color: #fff;
}
.login::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 15%, rgba(201,162,39,.18), transparent 45%);
  pointer-events: none;
}
.login-inner { position: relative; width: 100%; max-width: 380px; animation: rise .6s ease both; }
.login-logo {
  width: 134px; height: 134px; margin: 0 auto 26px; border-radius: 28px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.24);
}
.login-logo img { width: 100%; height: 100%; object-fit: contain; }
.login-eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; opacity: .8; margin-bottom: 10px; }
.login-title { font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.login-sub { font-size: 14px; opacity: .82; margin-top: 6px; margin-bottom: 34px; }
.login-field { position: relative; margin-bottom: 16px; }
.login-input {
  width: 100%; text-align: center; letter-spacing: .5em; font-size: 22px; font-weight: 700;
  padding: 18px 16px; border-radius: var(--r-m); border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #fff;
}
.login-input::placeholder { color: rgba(255,255,255,.55); letter-spacing: .3em; font-weight: 500; }
.login-input:focus { outline: none; border-color: var(--or); background: rgba(255,255,255,.16); }
.login-btn {
  width: 100%; padding: 17px; border-radius: var(--r-m); background: var(--or); color: #3a2e05;
  font-size: 16px; font-weight: 800; letter-spacing: .04em; box-shadow: var(--ombre-2);
  transition: transform .15s ease, filter .15s ease;
}
.login-btn:active { transform: scale(.985); filter: brightness(1.05); }
.login-error { min-height: 20px; margin-top: 14px; font-size: 13px; color: #ffd9d4; font-weight: 600; }
.login-hint { margin-top: 22px; font-size: 12px; opacity: .6; }

/* ============================================================
   COQUILLE APPLICATION
   ============================================================ */
.app { display: none; min-height: 100vh; }
body.authed .app { display: block; }
body.authed .login { display: none; }

/* App bar */
.appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: calc(var(--appbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--vert); color: #fff;
  display: flex; align-items: center; gap: 10px; padding-left: 14px; padding-right: 10px;
  box-shadow: var(--ombre-2);
}
.appbar-logo { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 3px; }
.appbar-logo img { width: 100%; height: 100%; object-fit: contain; }
.appbar-btn {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .15s ease;
}
.appbar-btn:active { background: rgba(255,255,255,.16); }
.appbar-btn svg { width: 24px; height: 24px; }
.appbar-btn[hidden] { display: none; }
.appbar-title {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; flex-direction: column; line-height: 1.15; cursor: pointer;
}
.appbar-title small, .appbar-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.appbar-title small { font-size: 10px; font-weight: 500; opacity: .8; letter-spacing: .1em; text-transform: uppercase; }
.appbar-btn.refresh.spin svg { animation: spin .7s linear infinite; }
/* Pastille de notifications sur la cloche */
.appbar-btn { position: relative; }
.notif-dot { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e02023; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--vert); box-sizing: content-box; }
.notif-dot[hidden] { display: none; }
.notif-item { display: flex; align-items: center; gap: 10px; }
.notif-item .body { flex: 1; min-width: 0; }

/* Bandeau d'informations (annonce, fermable) */
.user-pick { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.user-btn { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: var(--r-m); background: var(--blanc); border: 1px solid var(--gris-200); box-shadow: var(--ombre-1); text-align: left; }
.user-btn:active { transform: scale(.99); }
.user-btn:hover { border-color: var(--vert); }
.user-ava { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--vert); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.user-meta { display: flex; flex-direction: column; }
.user-nom { font-weight: 700; font-size: 15px; }
.user-fil { font-size: 12px; color: var(--gris-500); }

.infobar { display: flex; align-items: center; gap: 9px; background: var(--bleu-clair); color: var(--bleu); border: 1px solid #cfe0f2; border-radius: var(--r-m); padding: 11px 12px 11px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.infobar svg { width: 17px; height: 17px; flex-shrink: 0; }
.infobar span { flex: 1; min-width: 0; }
.infobar-x { width: 26px; height: 26px; border-radius: 7px; color: var(--bleu); font-size: 20px; line-height: 1; flex-shrink: 0; }
.infobar-x:active { background: rgba(30,78,140,.1); }

/* Navigation par cartes (carrés) */
.nav {
  position: fixed; left: 0; right: 0; z-index: 110;
  top: calc(var(--appbar-h) + env(safe-area-inset-top));
  height: var(--nav-h);
  background: var(--blanc); border-bottom: 1px solid var(--gris-200);
  display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-card {
  flex: 0 0 auto; width: 70px; border-radius: var(--r-m);
  background: var(--gris-100); border: 1px solid var(--gris-200);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 4px; color: var(--gris-500);
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav-card svg { width: 22px; height: 22px; }
.nav-card span { font-size: 10px; font-weight: 600; letter-spacing: .01em; text-align: center; line-height: 1.1; width: 100%; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.nav-card:active { transform: scale(.95); }
.nav-card.active {
  background: var(--vert); color: #fff; border-color: var(--vert);
  box-shadow: 0 6px 16px rgba(0,128,55,.32);
}

/* Zone de contenu */
.main {
  padding: 16px 16px calc(40px + env(safe-area-inset-bottom));
  padding-top: calc(var(--appbar-h) + var(--nav-h) + env(safe-area-inset-top) + 16px);
  max-width: 720px; margin: 0 auto; min-height: 100vh;
}

/* ---------- Composants génériques ---------- */
.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-500); margin: 22px 4px 12px; }
.section-title:first-child { margin-top: 4px; }

.card {
  width: 100%; text-align: left;
  background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--r-m);
  box-shadow: var(--ombre-1); padding: 16px; margin-bottom: 12px;
}
.card.tap { transition: transform .12s ease, box-shadow .2s ease; }
.card.tap:active { transform: scale(.99); box-shadow: var(--ombre-2); }

.row { display: flex; align-items: center; gap: 12px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muted { color: var(--gris-500); }
.small { font-size: 13px; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }

/* Pastille / avatar institution-pays */
.flag {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  background: var(--vert-clair); color: var(--vert-fonce);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: .02em;
}
.flag.bleu { background: var(--bleu-clair); color: var(--bleu); }
.flag.or { background: var(--or-clair); color: #8a6d12; }
.flag svg { width: 22px; height: 22px; }
.btn-ghost svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Badges / chips */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 999px; background: var(--gris-100); color: var(--gris-700);
  border: 1px solid var(--gris-200); white-space: nowrap;
}
.badge.vert { background: var(--vert-clair); color: var(--vert-fonce); border-color: transparent; }
.badge.bleu { background: var(--bleu-clair); color: var(--bleu); border-color: transparent; }
.badge.or { background: var(--or-clair); color: #8a6d12; border-color: transparent; }
.badge.gris { background: var(--gris-100); color: var(--gris-700); }
.badge.alert { background: #fdeceb; color: #b3261e; border-color: transparent; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge svg { width: 13px; height: 13px; }

/* Code couleur par type (pastille .flag + badge + pastille légende) */
.flag.t-min { background: var(--t-min-bg); color: var(--t-min); }
.flag.t-pub { background: var(--t-pub-bg); color: var(--t-pub); }
.flag.t-priv { background: var(--t-priv-bg); color: var(--t-priv); }
.flag.t-int { background: var(--t-int-bg); color: var(--t-int); }
.flag.t-oth { background: var(--t-oth-bg); color: var(--t-oth); }
.badge.t-oth { background: var(--t-oth-bg); color: var(--t-oth); border-color: transparent; }
.t-edge.t-oth { border-left-color: var(--t-oth); }
.legend-dot.t-oth { background: var(--t-oth); }
.badge.t-min { background: var(--t-min-bg); color: var(--t-min); border-color: transparent; }
.badge.t-pub { background: var(--t-pub-bg); color: var(--t-pub); border-color: transparent; }
.badge.t-priv { background: var(--t-priv-bg); color: var(--t-priv); border-color: transparent; }
.badge.t-int { background: var(--t-int-bg); color: var(--t-int); border-color: transparent; }

/* Légende des codes couleur */
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 14px; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--r-m); box-shadow: var(--ombre-1); margin-bottom: 14px; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--gris-700); }
.legend-dot { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }
.legend-dot.t-min { background: var(--t-min); } .legend-dot.t-pub { background: var(--t-pub); }
.legend-dot.t-priv { background: var(--t-priv); } .legend-dot.t-int { background: var(--t-int); }

/* Code institution discret (haut-droite de la carte) */
.inst-card { position: relative; }
.inst-code { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 700; color: var(--gris-500); letter-spacing: .02em; }

/* Liseré couleur gauche selon le type */
.t-edge { border-left: 4px solid var(--gris-200); }
.t-edge.t-min { border-left-color: var(--t-min); }
.t-edge.t-pub { border-left-color: var(--t-pub); }
.t-edge.t-priv { border-left-color: var(--t-priv); }
.t-edge.t-int { border-left-color: var(--t-int); }

/* Statistiques (tableau de bord) */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  min-width: 0;
  background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--r-m);
  padding: 16px; box-shadow: var(--ombre-1); position: relative; overflow: hidden;
}
.stat .lbl { overflow: hidden; text-overflow: ellipsis; }
.stat::after {
  content: ""; position: absolute; right: -10px; bottom: -10px; width: 64px; height: 64px;
  border-radius: 50%; background: var(--vert-clair); opacity: .5;
}
.stat .num { font-size: 30px; font-weight: 800; color: var(--vert); letter-spacing: -.02em; position: relative; }
.stat .lbl { font-size: 12px; color: var(--gris-500); font-weight: 600; margin-top: 2px; position: relative; }
.stat.bleu .num { color: var(--bleu); } .stat.bleu::after { background: var(--bleu-clair); }
.stat.or .num { color: #8a6d12; } .stat.or::after { background: var(--or-clair); }

/* Barre de recherche + filtres */
.toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
.search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--r-m);
  padding: 0 12px; box-shadow: var(--ombre-1);
}
.search svg { width: 18px; height: 18px; color: var(--gris-500); flex-shrink: 0; }
.search input { flex: 1; border: none; background: none; padding: 13px 0; outline: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--blanc); border: 1px solid var(--gris-200); color: var(--gris-700);
  transition: background .2s, color .2s, border-color .2s;
}
.chip.active { background: var(--vert); color: #fff; border-color: var(--vert); }

/* Liste item */
.list-item { display: flex; align-items: center; gap: 12px; }
.list-item .body { flex: 1; min-width: 0; }
.body .name { display: block; }
.body .sub { display: block; margin-top: 2px; }
.list-item .name { display: block; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .sub { display: block; font-size: 13px; color: var(--gris-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chev { color: var(--gris-300); flex-shrink: 0; }
.chev svg { width: 20px; height: 20px; }

/* Fiche : champ */
.field { padding: 12px 0; border-bottom: 1px solid var(--gris-100); }
.field:last-child { border-bottom: none; }
.field .k { font-size: 12px; font-weight: 600; color: var(--gris-500); text-transform: uppercase; letter-spacing: .04em; }
.field .v { font-size: 15px; font-weight: 500; margin-top: 3px; }
.field input, .field select, .field textarea {
  width: 100%; margin-top: 6px; padding: 12px; border: 1px solid var(--gris-300);
  border-radius: var(--r-s); background: var(--blanc); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-clair); }

/* Timeline historique */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--gris-200); }
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item::before { content: ""; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--vert); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--gris-200); }
.tl-item .when { font-size: 12px; color: var(--gris-500); font-weight: 600; }
.tl-item .what { font-weight: 600; margin-top: 2px; }
.tl-item .who { font-size: 13px; color: var(--gris-500); }

/* Actions (fiche institution) : grille tactile */
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.action-btn {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--r-m);
  font-weight: 600; font-size: 14px; box-shadow: var(--ombre-1);
  transition: transform .12s ease, border-color .2s;
}
.action-btn { min-width: 0; }
.action-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-btn.wide span { white-space: normal; }
.action-btn svg { width: 20px; height: 20px; color: var(--vert); flex-shrink: 0; }
.action-btn:active { transform: scale(.97); border-color: var(--vert); }
.action-btn.danger svg { color: #b3261e; }
.action-btn.danger { color: #b3261e; }
.action-btn.wide { grid-column: 1 / -1; }

/* Bouton primaire pleine largeur (pouce) */
.btn-primary {
  width: 100%; padding: 16px; border-radius: var(--r-m); background: var(--vert); color: #fff;
  font-weight: 700; font-size: 16px; box-shadow: 0 6px 16px rgba(0,128,55,.28);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease;
}
.btn-primary:active { transform: scale(.985); }
.btn-primary svg { width: 20px; height: 20px; }
.btn-ghost { width: 100%; padding: 14px; border-radius: var(--r-m); border: 1px solid var(--gris-300); background: var(--blanc); font-weight: 600; }

/* Cases à cocher (tags / filiales) */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check {
  min-width: 0;
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px solid var(--gris-200); border-radius: var(--r-s); background: var(--blanc);
  font-size: 14px; font-weight: 500; text-align: left; line-height: 1.25;
}
.check .box {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--gris-300);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.check .box svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.check.on { border-color: var(--vert); background: var(--vert-pale); }
.check.on .box { background: var(--vert); border-color: var(--vert); }
.check.on .box svg { opacity: 1; }

/* États : chargement (squelette) */
.skeleton { padding-top: 4px; }
.sk {
  background: linear-gradient(90deg, var(--gris-100) 25%, var(--gris-200) 37%, var(--gris-100) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
  border-radius: var(--r-s); height: 64px; margin-bottom: 12px;
}
.sk.short { width: 60%; height: 16px; margin-bottom: 10px; }

/* État vide / erreur */
.empty { text-align: center; padding: 48px 20px; color: var(--gris-500); }
.empty svg { width: 48px; height: 48px; color: var(--gris-300); margin-bottom: 12px; }
.empty .t { font-weight: 700; color: var(--gris-700); }
.empty .d { font-size: 14px; margin-top: 4px; }

/* Filigrane décoratif léger */
.watermark { position: relative; overflow: hidden; }
.watermark > .wm {
  position: absolute; right: -14px; top: -10px; width: 96px; height: 96px;
  color: var(--vert); opacity: .05; pointer-events: none;
}

/* Toast / info simulé */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--gris-900); color: #fff; padding: 12px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: var(--ombre-3); z-index: 400;
  opacity: 0; transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Modale (centrée, fermeture facile) */
.modal-ov {
  position: fixed; inset: 0; z-index: 350; background: rgba(20,32,26,.5);
  display: none; align-items: flex-end; justify-content: center; padding: 0;
}
.modal-ov.open { display: flex; animation: fade .2s ease; }
.modal {
  background: #fff; width: 100%; max-width: 520px;
  border-radius: var(--r-l) var(--r-l) 0 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: var(--ombre-3); animation: sheet .28s cubic-bezier(.16,1,.3,1);
  max-height: 88vh; overflow-y: auto;
}
.modal-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--gris-300); margin: 8px auto 14px; }
.modal h3 { font-size: 18px; font-weight: 800; }
.modal p { color: var(--gris-700); margin-top: 8px; font-size: 15px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions button { flex: 1; }

/* Sur ordinateur : modale centrée (au lieu du tiroir collé en bas) */
@media (min-width: 760px) {
  .modal-ov { align-items: center; padding: 24px; }
  .modal { border-radius: var(--r-l); max-height: 86vh; animation: rise .22s cubic-bezier(.16,1,.3,1); }
  .modal-grip { display: none; }
}

/* Note simulation */
.sim-note {
  font-size: 12px; color: var(--gris-500); background: var(--gris-100);
  border-left: 3px solid var(--or); padding: 10px 12px; border-radius: 8px; margin-top: 14px;
}
.sim-note svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; flex-shrink: 0; }
.check .box svg { width: 14px; height: 14px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- Colonnes (mobile : empilé / desktop : côte à côte) ---------- */
.cols { display: grid; gap: 16px; }
.cols-2, .cols-3 { grid-template-columns: 1fr; }
.cols > div { min-width: 0; }

/* ---------- Réseau : barre premium (Pays / Institutions / Contacts) ---------- */
.reseau-nav { display: flex; gap: 6px; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: 16px; padding: 6px; box-shadow: var(--ombre-1); margin-bottom: 18px; }
.rn-pill { flex: 1; padding: 13px 10px; border-radius: 11px; font-weight: 700; font-size: 14px; color: var(--gris-700); letter-spacing: .01em; transition: background .2s, color .2s, box-shadow .25s, transform .15s; }
.rn-pill:active { transform: scale(.98); }
.rn-pill.active { background: linear-gradient(135deg, #0aa551, var(--vert-fonce)); color: #fff; box-shadow: 0 8px 20px rgba(0,128,55,.34); }

/* ---------- Barre Retour (sous le menu principal, collante) ---------- */
.backbar {
  position: sticky; z-index: 90;
  top: calc(var(--appbar-h) + var(--nav-h) + env(safe-area-inset-top) + 6px);
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 14px; padding: 9px 15px; border-radius: 11px;
  background: var(--blanc); border: 1px solid var(--gris-200); box-shadow: var(--ombre-1);
  font-weight: 700; font-size: 13px; color: var(--gris-700);
}
.backbar svg { width: 18px; height: 18px; }
.backbar:active { transform: scale(.97); }

/* ---------- Module Réseau : mise en page latérale ---------- */
.rs-nav { display: flex; gap: 6px; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: 14px; padding: 6px; box-shadow: var(--ombre-1); }
.rs-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 10px; font-weight: 700; font-size: 12px; color: var(--gris-700); transition: background .2s, color .2s, box-shadow .2s; }
.rs-link svg { width: 20px; height: 20px; }
.rs-link.active { background: linear-gradient(135deg, #0aa551, var(--vert-fonce)); color: #fff; box-shadow: 0 6px 16px rgba(0,128,55,.3); }
.rs-exports { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rs-exports .export-bar { margin: 0; }
.reseau-side { margin-bottom: 16px; }

@media (min-width: 1080px) {
  .reseau-layout { display: grid; grid-template-columns: 232px 1fr; gap: 26px; align-items: start; }
  .reseau-side { position: sticky; top: calc(var(--appbar-h) + var(--nav-h) + env(safe-area-inset-top) + 6px); margin-bottom: 0; }
  .rs-nav { flex-direction: column; gap: 4px; }
  .rs-link { flex-direction: row; justify-content: flex-start; gap: 11px; font-size: 14px; padding: 13px 15px; }
  .rs-exports { flex-direction: column; margin-top: 14px; }
  .rs-exports .export-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .rs-exports .export-bar .muted { margin: 0 0 2px; }
  .rs-exports .exp { width: 100%; justify-content: center; }
}

/* ---------- Bas de barre latérale : scan carte de visite + résumé ---------- */
.rs-extra { margin-top: 14px; }
.rs-scan {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 12px; font-weight: 700; font-size: 13px;
  color: #fff; background: linear-gradient(135deg, #2f6bb5, var(--bleu));
  box-shadow: 0 6px 16px rgba(30,78,140,.28);
}
.rs-scan svg { width: 18px; height: 18px; }
.rs-scan:active { transform: scale(.98); }
/* Panorama (mini tableau de bord du Réseau, dans la barre latérale) */
.rs-panorama { margin-top: 14px; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--r-m); box-shadow: var(--ombre-1); padding: 14px; }
.rs-pano-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-500); margin-bottom: 12px; }
.rs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-stats div { display: flex; flex-direction: column; gap: 1px; }
.rs-stats b { font-size: 24px; font-weight: 800; color: var(--vert); line-height: 1; }
.rs-stats div:nth-child(2) b { color: var(--bleu); }
.rs-stats div:nth-child(3) b { color: var(--or); }
.rs-stats div:nth-child(4) b { color: var(--t-int); }
.rs-stats span { font-size: 11px; color: var(--gris-500); font-weight: 600; }
.rs-chart-title { font-size: 11px; font-weight: 700; color: var(--gris-500); margin: 16px 0 8px; }
.rs-spark { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.rs-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
.rs-bar i { width: 100%; max-width: 12px; background: linear-gradient(180deg, #0aa551, var(--vert-fonce)); border-radius: 3px 3px 0 0; display: block; }
.rs-bar em { font-size: 8px; color: var(--gris-300); font-style: normal; }

/* Bannières du scan carte de visite */
.dup-warn { margin-top: 12px; padding: 11px 13px; border-radius: 10px; background: #fdeecb; color: #8a5a00; font-size: 13px; font-weight: 600; border-left: 3px solid var(--or); }
.dup-warn svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.ok-new { margin-top: 12px; padding: 11px 13px; border-radius: 10px; background: var(--vert-clair); color: var(--vert-fonce); font-size: 13px; font-weight: 600; border-left: 3px solid var(--vert); }
.ok-new svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }

/* ---------- Barre d'export Excel / PDF ---------- */
.export-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 2px 14px; }
.export-bar .muted { margin-right: auto; }
.exp { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 10px; background: var(--vert-clair); color: var(--vert-fonce); border: 1px solid transparent; }
.exp:active { transform: scale(.97); }
.exp svg { width: 16px; height: 16px; }
.toggle-actifs { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris-700); margin: 0 4px 4px; font-weight: 600; }
.toggle-actifs input { width: 18px; height: 18px; accent-color: var(--vert); }

/* ---------- Réseau : grille des pays ---------- */
.grid-pays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
@media (min-width: 680px) { .grid-pays { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1080px) { .grid-pays { grid-template-columns: repeat(6, 1fr); gap: 22px 16px; } }
.pays-item { display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: none; padding: 4px 2px; }
.pays-tile {
  width: 100%; max-width: 150px; aspect-ratio: 1 / 1;
  border-radius: 24px; background: var(--blanc); border: 1px solid var(--gris-200);
  box-shadow: 0 8px 22px rgba(20,32,26,0.09), 0 1px 2px rgba(20,32,26,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 62px; line-height: 1;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s;
}
.pays-item:hover .pays-tile { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,128,55,0.18); border-color: var(--vert); }
.pays-item:active .pays-tile { transform: scale(.95); }
.pays-tile.special { background: var(--bleu-clair); color: var(--bleu); font-size: 0; }
.pays-tile.special svg { width: 34px; height: 34px; }
.pays-nom { font-weight: 700; font-size: 13px; line-height: 1.15; text-align: center; color: var(--gris-900); }
.pays-n { font-size: 11px; color: var(--gris-500); }

/* En-tête de section avec action à droite */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 4px 12px; }
.section-head:first-child { margin-top: 4px; }
.btn-add { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 9px 14px; border-radius: 10px; background: var(--vert); color: #fff; font-weight: 700; font-size: 13px; box-shadow: 0 4px 12px rgba(0,128,55,.25); }
.btn-add svg { width: 16px; height: 16px; }
.btn-add:active { transform: scale(.97); }

/* ---------- Réseau : cartes de type d'institution ---------- */
.grid-types { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 680px) { .grid-types { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grid-types { grid-template-columns: repeat(4, 1fr); } }
.type-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--r-m); box-shadow: var(--ombre-1); transition: transform .12s, border-color .2s; }
.type-card:active { transform: scale(.98); } .type-card:hover { border-color: var(--vert); }
.type-card .body { flex: 1; min-width: 0; }
.type-card .name { font-size: 13.5px; line-height: 1.2; font-weight: 700; }
.type-card .sub { font-size: 11.5px; margin-top: 7px; color: var(--gris-500); }
.type-card .flag svg { width: 20px; height: 20px; }

/* ---------- Réseau : grille d'institutions ---------- */
.grid-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 680px) { .grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.inst-card { display: flex; flex-direction: column; align-items: stretch; padding: 18px 16px 16px; }
.inst-card .ic-head { display: flex; gap: 11px; padding-right: 56px; }
.inst-card .name {
  font-size: 13.5px; line-height: 1.25; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inst-card .sub { font-size: 12px; margin-top: 3px; }
.inst-card .ic-type { margin-top: auto; padding-top: 14px; }

/* ---------- Cartes contact (dans la fiche institution) ---------- */
.contact-card { display: flex; flex-direction: column; }
.contact-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.contact-head .body { flex: 1; min-width: 0; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.contact-actions button { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 8px; background: var(--gris-100); color: var(--gris-700); border: 1px solid var(--gris-200); }
.contact-actions button svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ============ Veille & Vérification ============ */
.veille-principe { display: flex; align-items: center; gap: 12px; border-left: 3px solid var(--or); }
.veille-principe .body { display: flex; flex-direction: column; }

/* Importer une source : grille de cartes-type */
.src-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.src-type { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 78px;
  padding: 10px 6px; border-radius: var(--r-m); background: var(--blanc); border: 1px solid var(--gris-200); color: var(--gris-700);
  font-size: 11px; font-weight: 600; text-align: center; transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease; }
.src-type svg { width: 22px; height: 22px; color: var(--vert); }
.src-type:hover { border-color: var(--vert); box-shadow: var(--ombre-1); }
.src-type:active { transform: scale(.96); }

/* Sources importées */
.src-list { padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--vert-pale); border-color: var(--vert-clair); }
.src-logo { border-radius: 4px; flex: 0 0 auto; }

/* Installation sur l'écran d'accueil (pop-up multi-appareils) */
.install-card { border: 1px solid var(--gris-200); border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 10px; }
.install-card.primary { border-color: var(--vert); background: var(--vert-pale); }
.install-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.install-head svg { width: 18px; height: 18px; color: var(--vert); flex: 0 0 auto; }
.install-card ol { margin: 0; padding-left: 20px; }
.install-card li { font-size: 13px; color: var(--gris-700); margin: 5px 0; line-height: 1.35; }

/* Codes d'accès (Paramètres, administrateur) */
.code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.code-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; letter-spacing: 2px; color: var(--vert-fonce); }
.code-edit { flex: 0 0 auto; font-size: 12px; padding: 6px 10px; }
.code-edit svg { width: 14px; height: 14px; }
.src-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--r-s); }
.src-row + .src-row { border-top: 1px solid var(--gris-100); }
.src-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.src-row .name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-row .sub { font-size: 12px; color: var(--gris-500); }

/* Pastilles de statut */
.statut-pill { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sp-ok { background: var(--vert-clair); color: var(--vert-fonce); }
.sp-warn { background: var(--or-clair); color: #8a6d12; }
.sp-wait { background: var(--bleu-clair); color: var(--bleu); }
.sp-info { background: #e2f1f2; color: #0E7E87; }
.sp-err { background: #fdeceb; color: #b3261e; }
.sp-gris { background: var(--gris-100); color: var(--gris-700); }

/* File de validation : compteurs cliquables */
.vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vc-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 96px;
  padding: 14px; border-radius: var(--r-m); background: var(--blanc); border: 1px solid var(--gris-200); border-left: 4px solid var(--vc, var(--gris-300));
  text-align: left; transition: transform .12s ease, box-shadow .2s ease; }
.vc-card:hover { box-shadow: var(--ombre-2); }
.vc-card:active { transform: scale(.97); }
.vc-card .vc-ic { position: absolute; top: 12px; right: 12px; opacity: .55; }
.vc-card .vc-ic svg { width: 20px; height: 20px; color: var(--vc, var(--gris-500)); }
.vc-n { font-size: 30px; font-weight: 800; line-height: 1; color: var(--vc, var(--gris-900)); }
.vc-l { font-size: 12px; font-weight: 600; color: var(--gris-700); }
.vc-card.vc-empty { opacity: .55; }
.vc-card.vc-empty .vc-n { color: var(--gris-300); }
.vc-or { --vc: var(--or); } .vc-bleu { --vc: var(--bleu); } .vc-violet { --vc: #6E59A5; }
.vc-gris { --vc: var(--gris-500); } .vc-sarcelle { --vc: #0E7E87; } .vc-vert { --vc: var(--vert); }

/* Listes & fiche d'un item dans les modales */
.vlist { margin-top: 12px; max-height: 60vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.vi-meta { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.vi-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vi-actions button { flex: 1 1 calc(50% - 8px); min-width: 130px; }

/* Import : zone de dépôt + lignes détectées */
.import-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  margin-top: 12px; padding: 22px; border: 2px dashed var(--gris-300); border-radius: var(--r-m); color: var(--gris-700); }
.import-drop svg { width: 30px; height: 30px; color: var(--vert); }
.imp-line { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--r-s); border: 1px solid var(--gris-200); margin-bottom: 6px; cursor: pointer; }
.imp-line input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--vert); }
.imp-line .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.imp-line .name { font-weight: 600; font-size: 14px; }
.imp-line .sub { font-size: 12px; color: var(--gris-500); }

@media (min-width: 760px) {
  .vc-grid { grid-template-columns: repeat(3, 1fr); }
  .src-types { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
.contact-actions button:active { background: var(--gris-200); }
.contact-actions button.danger { background: #fdeceb; color: #b3261e; border-color: transparent; }
.grp-title { font-weight: 700; font-size: 13px; color: var(--vert-fonce); background: var(--vert-clair); display: inline-block; padding: 5px 12px; border-radius: 999px; margin: 16px 4px 10px; }

/* Badge de visibilité (qui voit la zone) */
.vis-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 3px 9px; border-radius: 999px; vertical-align: middle; }
.vis-tag .vis-dot { width: 7px; height: 7px; border-radius: 50%; }
.vis-tag.filiales { background: var(--vert-clair); color: var(--vert-fonce); } .vis-tag.filiales .vis-dot { background: var(--vert); }
.vis-tag.groupe { background: var(--gris-100); color: var(--gris-500); } .vis-tag.groupe .vis-dot { background: var(--gris-300); }

/* Encadré Relation COGEFI : léger fond vert pour distinguer la zone */
.rel-card { background: var(--vert-pale); border-color: #cfe8d8; }
.rel-card textarea, .rel-card select, .rel-card input { background: #fff; }
.rel-card .field { border-bottom-color: rgba(0,128,55,.10); }

/* ---------- Badges relationnels (multi-sélection) ---------- */
.rel-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.badge-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--blanc); color: var(--gris-700); border: 1px solid var(--gris-200); }
.badge-chip:active { transform: scale(.97); }
.badge-chip.on { background: var(--bleu-clair); color: var(--bleu); border-color: var(--bleu); }
.badge-chip.add { color: var(--vert-fonce); border-style: dashed; }
.badge-chip.add svg { width: 13px; height: 13px; }

/* ---------- Statut financier : bannière visible + chips colorés ---------- */
.fin-banner { display: inline-flex; align-items: center; gap: 9px; margin: 2px 4px 6px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: .01em; }
.fin-banner .fin-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.fin-banner.c-vert { background: var(--vert-clair); color: var(--vert-fonce); } .fin-banner.c-vert .fin-dot { background: var(--vert); }
.fin-banner.c-or { background: var(--or-clair); color: #8a6d12; } .fin-banner.c-or .fin-dot { background: var(--or); }
.fin-banner.c-alert { background: #fdeceb; color: #b3261e; } .fin-banner.c-alert .fin-dot { background: #b3261e; }
.fin-banner.c-gris { background: var(--gris-100); color: var(--gris-700); } .fin-banner.c-gris .fin-dot { background: var(--gris-300); }

.fin-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.fin-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--blanc); color: var(--gris-700); border: 1px solid var(--gris-200); }
.fin-chip .fin-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gris-300); flex-shrink: 0; }
.fin-chip.c-vert .fin-dot { background: var(--vert); } .fin-chip.c-or .fin-dot { background: var(--or); } .fin-chip.c-alert .fin-dot { background: #b3261e; }
.fin-chip:active { transform: scale(.97); }
.fin-chip.on.c-vert { background: var(--vert-clair); color: var(--vert-fonce); border-color: var(--vert); }
.fin-chip.on.c-or { background: var(--or-clair); color: #8a6d12; border-color: var(--or); }
.fin-chip.on.c-alert { background: #fdeceb; color: #b3261e; border-color: #b3261e; }

/* ---------- Activité Groupe : schéma de flux + tableau par filiale ---------- */
.flux { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 4px 0 14px; }
.flux-fil { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: var(--bleu-clair); color: var(--bleu); }
.flux-arrow { color: var(--gris-300); display: inline-flex; }
.flux-arrow svg { width: 18px; height: 18px; }
.flux-out { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: var(--vert-clair); color: var(--vert-fonce); display: inline-flex; align-items: center; gap: 5px; }
.flux-out svg { width: 14px; height: 14px; }

.fil-table { display: flex; flex-direction: column; }
.fil-row { display: grid; grid-template-columns: 1.3fr 0.6fr 1fr 1fr; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--gris-100); font-size: 13px; }
.fil-row:last-child { border-bottom: none; }
.fil-row.fil-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-500); font-weight: 700; }
.fil-row span:not(.fil-name):not(:first-child) { text-align: right; }
.fil-name { font-weight: 700; }
.fil-row .impaye { color: #b3261e; font-weight: 700; }
.fil-dot2 { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: middle; }

/* Logo de filiale (écran Filiales) */
.fil-logo { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: #fff; border: 1px solid var(--gris-200); display: flex; align-items: center; justify-content: center; padding: 5px; }
.fil-logo img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Fiche contact : en-tête photo + identité ---------- */
.ct-header { display: flex; align-items: center; gap: 16px; }
.ct-photo { width: 92px; height: 92px; flex-shrink: 0; border-radius: 16px; background: var(--bleu-clair); color: var(--bleu); border: none; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ct-photo svg { width: 40px; height: 40px; }
.ct-photo img { width: 100%; height: 100%; object-fit: cover; }
.ct-photo-edit { position: absolute; right: 5px; bottom: 5px; width: 24px; height: 24px; border-radius: 50%; background: var(--vert); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--ombre-1); }
.ct-photo-edit svg { width: 13px; height: 13px; }
.ct-photo:active { transform: scale(.98); }
.ct-id { flex: 1; min-width: 0; }
.ct-name { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.ct-fn { color: var(--vert-fonce); font-weight: 600; font-size: 14px; margin-top: 2px; }
.ct-inst { color: var(--gris-500); font-size: 13px; margin-top: 1px; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ct-act { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 11px; font-weight: 700; font-size: 13px; background: var(--gris-100); color: var(--gris-700); border: 1px solid var(--gris-200); }
.ct-act svg { width: 17px; height: 17px; }
.ct-act:active { transform: scale(.98); }
.ct-act.wa { background: #e8f8ef; color: #128C7E; border-color: transparent; }
.ct-act.mail { background: var(--bleu-clair); color: var(--bleu); border-color: transparent; }

/* Carte de visite générée (aperçu) */
.bizcard { display: flex; max-width: 360px; height: 200px; margin: 12px auto; border: 1px solid var(--gris-200); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre-2); }
.bizcard-band { width: 56px; background: linear-gradient(160deg, #0a9d49, var(--vert-fonce)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; font-family: Georgia, serif; }
.bizcard-body { flex: 1; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.bizcard-name { font-weight: 800; font-size: 18px; color: var(--noir); }
.bizcard-fn { color: var(--vert); font-weight: 600; font-size: 13px; margin-top: 4px; }
.bizcard-inst { color: var(--gris-700); font-size: 13px; margin-top: 3px; }
.bizcard-co { color: var(--gris-500); font-size: 12px; margin-top: 12px; line-height: 1.6; }

/* ---------- Carte de visite / photo ---------- */
.cdv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cdv-box { border: 1.5px dashed var(--gris-300); border-radius: var(--r-s); min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--gris-300); }
.cdv-box svg { width: 28px; height: 28px; }
.cdv-box.has-img { padding: 0; border-style: solid; border-color: var(--gris-200); overflow: hidden; }
.cdv-box.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Aperçu de la carte photographiée dans la modale */
.cv-shot { width: 100%; max-height: 180px; object-fit: contain; border-radius: 10px; border: 1px solid var(--gris-200); background: var(--gris-100); margin-bottom: 6px; }

/* ---------- Mini-graphiques (sans librairie, hors connexion) ---------- */
.chart { display: flex; flex-direction: column; gap: 11px; }
.chart-row { display: flex; align-items: center; gap: 10px; }
.chart-lbl { width: 116px; flex-shrink: 0; font-size: 13px; color: var(--gris-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-bar { flex: 1; height: 10px; background: var(--gris-100); border-radius: 999px; overflow: hidden; }
.chart-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--vert), var(--vert-fonce)); border-radius: 999px; transition: width .5s ease; }
.chart-fill.bleu { background: linear-gradient(90deg, #2f6bb5, var(--bleu)); }
.chart-val { width: 34px; text-align: right; font-weight: 700; font-size: 13px; color: var(--gris-900); }
.rank-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--gris-100); }
.rank-item:last-child { border-bottom: none; }
.rank-num { width: 24px; height: 24px; border-radius: 7px; background: var(--vert-clair); color: var(--vert-fonce); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Tablette ---------- */
@media (min-width: 760px) {
  .main { max-width: 960px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /* Onglets répartis sur toute la largeur */
  .nav { overflow-x: visible; }
  .nav-card { flex: 1 1 0; width: auto; min-width: 0; }
  .nav-card span { font-size: 11px; }
  .cols-2 { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- Desktop / Mac : pleine largeur, multi-colonnes ---------- */
@media (min-width: 1080px) {
  .main {
    max-width: 1320px;
    padding-left: 36px; padding-right: 36px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .cols-2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .action-grid { grid-template-columns: repeat(4, 1fr); }
  /* La grille des KPI occupe toute la largeur */
  .dash-kpi { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
}
@media (min-width: 1480px) {
  .main { max-width: 1480px; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
}