:root{
      --bg:#f7f7fb;--card:#fff;--text:#111827;--muted:#6b7280;--border:#e5e7eb;
      --primary:#0a66c2;--accent:#e24500;--radius:14px
    }
    *{box-sizing:border-box}
    html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    a{color:var(--primary);text-decoration:none}
    a:hover{text-decoration:underline}
    .wrap{padding:16px}
    .breadcrumbs{color:var(--muted);font-size:13px;margin:6px 0 10px}

    header.app{
      display:grid;grid-template-columns:auto 1fr auto auto;
      align-items:center;gap:12px;padding:0 12px;
      background:#ffffffcc;border-bottom:1px solid var(--border);
      position:sticky;top:0;z-index:50;height:64px;
      backdrop-filter:saturate(180%) blur(8px)
    }
    .brand{height:100%;display:flex;align-items:center}
    .brand img{height:100%}
    .nav{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;padding:0 4px}
    .nav a{display:inline-flex;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid transparent;color:#111827;text-decoration:none}
    .nav a.active{background:#eef2ff;border-color:#c7d2fe}
    .session{display:flex;align-items:center;gap:10px;justify-self:end}
    .btn{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 12px;border-radius:10px;
      border:1px solid var(--border);background:#fff;cursor:pointer
    }
    .btn.small{padding:6px 10px;font-size:12px;border-radius:8px}
    .btn.primary{background:var(--primary);border-color:#0a66c2;color:#fff}
    .btn.danger{background:#fff;border-color:#fecaca;color:#991b1b}
    .searchbar{display:flex;gap:8px;align-items:center;justify-self:end}
    .searchbar input{
      width:min(520px,46vw);padding:10px 12px;
      border:1px solid var(--border);border-radius:10px;background:#fff
    }

    .grid{display:grid;grid-template-columns:1.35fr .65fr;gap:12px;align-items:start}
    @media(max-width:1000px){.grid{grid-template-columns:1fr}}
    .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
    .card-header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:#fcfcfe}
    .card-body{padding:16px}
    .right{margin-left:auto}
    .muted{color:var(--muted)}
    .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
    .badge{
      display:inline-flex;align-items:center;gap:6px;
      font-size:12px;padding:4px 8px;border-radius:999px;
      border:1px solid var(--border);background:#fff
    }
    .badge.ok{background:#ecfdf5;border-color:#d1fae5;color:#065f46}
    .badge.warn{background:#fff7ed;border-color:#ffedd5;color:#9a3412}
    .badge.info{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}

    .client-header{gap:14px}
    .client-logo{
      width:42px;height:42px;border-radius:12px;
      display:grid;place-items:center;background:#eef2ff;border:1px solid var(--border)
    }
    .client-meta{display:flex;flex-direction:column}
    .client-title{font-size:20px;font-weight:800}
    .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
    .tag{
      font-size:12px;padding:3px 8px;border-radius:999px;
      background:#eef2ff;color:#1e3a8a;border:1px solid #e2e8f0
    }
    .tag.orange{background:#fff7ed;color:#9a3412;border-color:#ffedd5}
    .tag.green{background:#ecfdf5;color:#065f46;border-color:#d1fae5}

    .tabs{display:flex;gap:8px;flex-wrap:wrap}
    .tab{
      padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;
      cursor:pointer
    }
    .tab.active{background:#eef2ff;border-color:#c7d2fe}
    .pane{margin-top:12px}
    table{width:100%;border-collapse:collapse}
    thead th{
      background:#f8fafc;border-bottom:1px solid var(--border);
      text-align:left;padding:10px;font-size:13px
    }
    tbody td{border-bottom:1px solid var(--border);padding:10px;vertical-align:top}
    tbody tr:hover{background:#fafafa}
    .two-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
    @media(max-width:900px){.two-cols{grid-template-columns:1fr}}
    .side .row{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed #eee}
    .side .row:last-child{border-bottom:0}

    .toast{
      position:fixed;right:16px;bottom:16px;
      background:#111827;color:#fff;border-radius:10px;
      padding:12px 14px;opacity:0;transform:translateY(10px);
      transition:.25s;z-index:80
    }
    .toast.show{opacity:1;transform:translateY(0)}

    /* Modals (maquette) */
    .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100}
    .modal .modal-content{
      background:#fff;border-radius:14px;max-width:720px;margin:80px auto;padding:16px;border:1px solid var(--border)
    }
    .modal .close{float:right;font-size:24px;cursor:pointer;color:#374151}
	/* Onglet Contacts & sites en pleine largeur (sans le bloc Adresse principale interne) */
.pane-wide{max-width:100%}
.stack{display:grid;gap:12px}
.summary{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:10px 12px;margin-bottom:12px;
  border:1px solid var(--border);
  background:#fff;border-radius:12px
}
.pill{
  display:inline-flex;gap:6px;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);background:#f8fafc;
  font-size:12px
}
.pill strong{font-weight:700}
.mini-flags{
  display:inline-flex;
  gap:6px;
  align-items:center;
  margin-left:8px
}

.mini-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--border);
  background:#f8fafc;
  color:#6b7280; /* gris par défaut */
}

/* Par défaut actif → vert pâle */
.mini-flag.on{
  background:#ecfdf5;        /* vert pâle */
  border-color:#a7f3d0;
  color:#065f46;             /* vert foncé lisible */
}
:root{
      --bg:#f7f7fb;--card:#fff;--text:#111827;--muted:#6b7280;
      --border:#e5e7eb;--primary:#0a66c2;--accent:#e24500;--radius:14px
    }
    *{box-sizing:border-box}
    html,body{
      margin:0;background:var(--bg);color:var(--text);
      font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
    }
    a{color:var(--primary);text-decoration:none}
    a:hover{text-decoration:underline}

  .brand{
  height:100%;
  display:flex;
  align-items:center;
}

.brand img{
  height:36px;      /* au lieu de 100% */
  width:auto;
  max-width:180px;
  object-fit:contain;
  display:block;
}
    .nav{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;padding:0 4px}
    .nav a{
      display:inline-flex;align-items:center;padding:8px 10px;
      border-radius:10px;border:1px solid transparent;color:#111827;text-decoration:none
    }
    .nav a.active{background:#eef2ff;border-color:#c7d2fe}
    .session{display:flex;align-items:center;gap:10px;justify-self:end}
    .btn{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 12px;border-radius:10px;
      border:1px solid var(--border);background:#fff;cursor:pointer
    }
    .btn.small{padding:6px 10px;font-size:12px;border-radius:8px}
    .searchbar{display:flex;gap:8px;align-items:center;justify-self:end}
    .searchbar input{
      width:min(520px,46vw);padding:10px 12px;
      border:1px solid var(--border);border-radius:10px;background:#fff
    }

    .wrap{padding:16px}
    .breadcrumbs{color:var(--muted);font-size:13px;margin:6px 0 10px}

    /* KPI */
.kpis{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
}

/* Tablette */
@media(max-width:1100px){
  .kpis{ grid-template-columns:repeat(3, 1fr); }
}

/* Mobile */
@media(max-width:700px){
  .kpis{ grid-template-columns:repeat(2, 1fr); }
}

.kpi{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px; /* un peu plus compact */
}

.kpi small{
  color:var(--muted);
  font-size:11px;
  line-height:1.1;
  display:block;
}

.kpi .val{
  font-size:18px;   /* un poil moins gros */
  font-weight:800;
  margin-top:2px;
  line-height:1.1;
}


    .filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
    .input,select{padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff}

    .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
    .card .card-header{
      display:flex;align-items:center;gap:12px;
      padding:14px 16px;border-bottom:1px solid var(--border);
      background:#fcfcfe
    }
    .card .card-body{padding:16px}

    table{width:100%;border-collapse:collapse}
    thead th{
      position:sticky;top:0;background:#f8fafc;
      border-bottom:1px solid var(--border);font-weight:700;
      text-align:left;padding:10px;font-size:13px
    }
    tbody td{border-bottom:1px solid var(--border);padding:10px;vertical-align:top}
    tbody tr:hover{background:#fafafa}

    .toolbar{display:flex;gap:8px;flex-wrap:wrap}
    .right{margin-left:auto}

    .state{
      font-size:12px;padding:3px 8px;border-radius:999px;
      border:1px solid var(--border);background:#fff
    }
    .state.active{background:#ecfdf5;border-color:#d1fae5}
    .state.inactive{background:#fff7ed;border-color:#ffedd5}
    .state.todo{background:#eef2ff;border-color:#c7d2fe}

    .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
    .tags{display:flex;gap:6px;flex-wrap:wrap}
    .tag{
      font-size:12px;padding:3px 8px;border-radius:999px;
      background:#f8fafc;border:1px solid var(--border);color:#111827
    }

    .toast{
      position:fixed;right:16px;bottom:16px;
      background:#111827;color:#fff;border-radius:10px;
      padding:12px 14px;opacity:0;transform:translateY(10px);
      transition:.25s;z-index:80
    }
    .toast.show{opacity:1;transform:translateY(0)}
	/* --- Wikici-like helpers --- */
.btn.block{
  width:100%;
  justify-content:center;
}

.btn.soft{
  background:#f8fafc;
}

.notice{
  border:1px solid var(--border);
  background:#eef2ff;
  color:#1e3a8a;
  border-radius:12px;
  padding:12px 14px;
}

.notice .title{
  font-weight:800;
  margin-bottom:2px;
}

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

.card-header .muted.right{
  margin-left:auto;
}

/* --- FIX dropdown header : ne pas clipper les sous-menus --- */
header.app { overflow: visible; }

header.app .nav{
  overflow: visible !important;   /* supprime l’ascenseur */
  white-space: normal !important; /* optionnel, évite les effets "ligne unique" */
}

header.app .nav .submenu{
  z-index: 9999;
}
tfoot td { background:#fcfcfe; }