:root{
  --bg:#f2f4f8; --text:#0b1020; --muted:#64748b; --layer:#fff; --stroke:#d9dde6;
  --primary:#4f46e5; --radius:8px;
}
:root[data-theme="dark"]{ --bg:#0b1020; --text:#e6e8f0; --muted:#9aa4b2; --layer:#121830; --stroke:#2a3144 }

/* fond */
html,body{height:100%}
body{margin:0; font:16px/1.45 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text)}

/* ===== LANG STACK (top-right) ===== */
.lang-stack{position:fixed; top:16px; right:16px; display:flex; flex-direction:column; align-items:flex-end; z-index:10}
.flag-current{width:34px; height:34px; border-radius:999px; border:1px solid var(--stroke); background:var(--layer); display:grid; place-items:center; cursor:pointer}
.flag-current img{width:18px;height:18px}
.flag-list{display:none; margin-top:6px; background:var(--layer); border:1px solid var(--stroke); border-radius:6px; padding:6px; box-shadow:0 10px 22px rgba(2,6,23,.08)}
.flag-list a{display:block; padding:4px; border-radius:4px}
.flag-list img{width:18px;height:18px; display:block}
.lang-stack:hover .flag-list{display:block}

/* ===== LOGIN PANEL (MOR-like) ===== */
.login-plain{min-height:100vh; display:grid; place-items:center}
.panel{
  width:720px; background:var(--layer); border:1px solid var(--stroke); border-radius:10px;
  box-shadow:0 10px 28px rgba(2,6,23,.08); padding:36px 40px
}
.panel-title{display:flex; align-items:baseline; gap:12px; margin-bottom:18px}
.brand-strong{font-size:34px; font-weight:800; letter-spacing:0.5px}
.brand-sub{font-size:22px; color:var(--muted)}

.panel-form{width:540px; margin:0 auto}
.line{display:flex; align-items:center; gap:10px; margin:12px 0}
.line .ico{width:26px; text-align:center; color:#6b7280}
.line input{
  flex:1; height:44px; padding:0 12px; border-radius:6px;
  border:1px solid #cbd5e1; background:#eef2ff; color:var(--text); font-size:15.5px
}
.line input:focus{outline:2px solid #93c5fd}

.under{display:flex; justify-content:flex-end; margin:4px 0 14px}
.link{color:#2563eb; text-decoration:underline}

.btn-outline{
  display:block; width:140px; margin:0 auto; height:40px; border-radius:6px;
  background:#fff; color:#111827; border:2px solid #111827; font-weight:700; letter-spacing:.3px; cursor:pointer
}
.btn-outline:hover{background:#111827; color:#fff}

.panel-copy{margin-top:22px; text-align:center; color:var(--muted); font-size:12px}

/* ===== App shell (dashboard) – inchangé sauf variables ===== */
.app{display:grid; grid-template-columns:240px 1fr; min-height:100vh}
.sidebar{background:#f6f7fb; border-right:1px solid var(--stroke); padding:16px}
:root[data-theme="dark"] .sidebar{background:#0f1530}
.sb-brand{width:42px;height:42px;border-radius:10px;background:linear-gradient(45deg,#4f46e5,#a3e635);display:grid;place-items:center;color:#0b1020;font-weight:800;margin-bottom:16px}
.sb-nav{display:grid; gap:6px}
.sb-link{display:block; color:var(--text); padding:10px 12px; border-radius:8px; border:1px solid transparent}
.sb-link:hover{border-color:var(--stroke); background:#eef2ff55}
.content{display:grid; grid-template-rows:auto 1fr}
.topbar{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--stroke); background:#fff}
:root[data-theme="dark"] .topbar{background:#0b142a}
.page{padding:20px}
.card.kpi{background:#fff; border:1px solid var(--stroke); border-radius:10px; padding:16px; box-shadow:0 8px 20px rgba(2,6,23,.06)}
.grid-kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.kpi .kpi-label{color:var(--muted); font-size:12px}
.kpi .kpi-value{font-size:22px; font-weight:800; margin-top:6px}

/* login : bloc logo centré */
.panel-logo{display:grid; justify-items:center; margin-bottom:14px}
.panel-logo img{width:88px; height:88px; border-radius:18px; box-shadow:0 8px 20px rgba(79,70,229,.18)}

/* ====== header brand & controls ====== */
.page-h{margin:4px 0 12px}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 18px; border-bottom:1px solid var(--stroke); background:#fff}
.brandbar{display:flex; align-items:center; gap:10px}
.brandlogo{width:32px;height:32px;border-radius:8px}
.brandname{font-weight:800; letter-spacing:.3px}

.controls{display:flex; align-items:center; gap:10px}
.filters input{width:420px; max-width:42vw; background:#fff; border:1px solid var(--stroke); border-radius:8px; padding:10px 12px}
.daterange input{width:220px; background:#fff; border:1px solid var(--stroke); border-radius:8px; padding:10px 12px}
.lang-flags{display:flex; gap:6px}
.flag-btn{display:grid; place-items:center; width:30px; height:30px; border-radius:999px; border:1px solid var(--stroke); background:#fff; opacity:.75}
.flag-btn.is-active{opacity:1; border-color:#111827}
.flag-btn img{width:16px; height:16px}

/* ====== KPI row ====== */
.grid-kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px}
.card{background:#fff; border:1px solid var(--stroke); border-radius:10px; padding:14px; box-shadow:0 8px 18px rgba(2,6,23,.06)}
.kpi .kpi-label{color:#64748b; font-size:12px}
.kpi .kpi-value{font-size:22px; font-weight:800; margin-top:6px}

/* ====== analytics row ====== */
.grid-analytics{display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-top:14px}
.card-h{font-weight:700; color:#64748b; margin-bottom:8px}
.chart-placeholder, .map-placeholder{height:280px; display:grid; place-items:center; color:#9aa4b2; border:1px dashed var(--stroke); border-radius:10px}

/* ====== status row ====== */
.grid-status{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px}
.donut{display:grid; place-items:center; gap:8px}
.donut .ring{
  width:120px; height:120px; border-radius:999px;
  background:
    radial-gradient(closest-side, #fff 72%, transparent 73% 100%),
    conic-gradient(#ef4444 calc(var(--p)*1%), #e5e7eb 0);
  border:1px solid var(--stroke);
}
.donut .lab{text-align:center; color:#64748b}

.card-mini .barlist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.card-mini .barlist li{display:flex; justify-content:space-between; align-items:center; border-bottom:1px dashed var(--stroke); padding:6px 0}
.card-mini .barlist li:last-child{border-bottom:0}

/* ====== table ====== */
.table-card{margin-top:14px}
.table-h{font-weight:700; margin-bottom:8px}
.table.like{display:grid; gap:8px}
.table.like .row{display:grid; grid-template-columns:2fr 1fr 2fr 1fr; gap:10px; align-items:center; padding:10px; border:1px solid var(--stroke); border-radius:8px}
.table.like .c1{font-weight:600}
.prog{height:10px; background:#e5e7eb; border-radius:8px; position:relative; overflow:hidden}
.prog-bar{position:absolute; inset:0; width:calc(var(--x)*1%); background:#10b981}

/* ====== shell ====== */
.app{display:grid; grid-template-columns:240px 1fr; min-height:100vh}
.sidebar{background:#f6f7fb; border-right:1px solid var(--stroke); padding:16px}
.sb-brand{width:42px;height:42px;border-radius:10px;background:linear-gradient(45deg,#4f46e5,#a3e635);display:grid;place-items:center;color:#0b1020;font-weight:800;margin-bottom:16px}
.sb-nav{display:grid; gap:6px}
.sb-link{display:block; color:#111827; padding:10px 12px; border-radius:8px; border:1px solid transparent}
.sb-link:hover{border-color:var(--stroke); background:#eef2ff55}

@media (max-width:1200px){
  .grid-analytics{grid-template-columns:1fr}
  .grid-status{grid-template-columns:repeat(2,1fr)}
}

/* ===== Lang menu compact en topbar ===== */
.topbar-lang{position:relative; display:flex; align-items:center}
.topbar-lang .flag-current{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--stroke);
  background:#fff; display:grid; place-items:center; cursor:pointer
}
.topbar-lang .flag-current img{width:18px;height:18px}
.topbar-lang .flag-list{
  position:absolute; right:0; top:calc(100% + 6px); display:none;
  background:#fff; border:1px solid var(--stroke); border-radius:8px; padding:6px;
  box-shadow:0 12px 24px rgba(2,6,23,.12); z-index:30
}
.topbar-lang .flag-list a{display:block; padding:4px; border-radius:6px}
.topbar-lang .flag-list img{width:18px;height:18px; display:block}
.topbar-lang:hover .flag-list{display:block}

/* ===== Bouton Logout (power) ===== */
.btn-ghost.power{
  border:1px solid var(--stroke); background:#fff; color:#111827;
  padding:6px 8px; border-radius:8px; font-weight:700; line-height:1; text-decoration:none
}
.btn-ghost.power:hover{background:#111827; color:#fff}

/* ====== Palette dark adoucie (dim) ====== */
:root[data-theme="dark"]{
  --bg:#0e1325;         /* fond moins noir, plus bleu nuit */
  --layer:#151c2f;      /* cartes */
  --text:#e7eaf4;
  --muted:#a0acc2;
  --stroke:#2a3655;     /* bordures adoucies */
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .sidebar{ background:var(--layer) }
:root[data-theme="dark"] .table.like .row,
:root[data-theme="dark"] .filters input,
:root[data-theme="dark"] .daterange input{ background:var(--layer); border-color:var(--stroke) }
:root[data-theme="dark"] .chart-placeholder,
:root[data-theme="dark"] .map-placeholder{ color:#8a95ac; border-color:var(--stroke) }

/* ombres un peu plus douces */
.card{ box-shadow:0 8px 18px rgba(2,6,23,.06) }
:root[data-theme="dark"] .card{ box-shadow:0 10px 28px rgba(2,6,23,.22) }

/* ====== Menu langues compact (topbar et login) ====== */
.lang-stack{position:relative; display:flex; align-items:center; z-index:50}
.lang-stack .flag-current{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--stroke);
  background:#fff; display:grid; place-items:center; cursor:pointer
}
:root[data-theme="dark"] .lang-stack .flag-current{ background:var(--layer) }
.lang-stack .flag-current img{width:18px;height:18px}

.lang-stack .flag-list{
  position:absolute; right:0; top:calc(100% + 6px);
  display:none; background:#fff; border:1px solid var(--stroke);
  border-radius:10px; padding:6px; min-width:44px;
  box-shadow:0 12px 24px rgba(2,6,23,.12)
}
:root[data-theme="dark"] .lang-stack .flag-list{ background:var(--layer) }
.lang-stack .flag-list a{display:block; padding:4px; border-radius:6px}
.lang-stack .flag-list img{width:18px;height:18px; display:block}

.lang-stack.open .flag-list{ display:block }      /* ouverture par JS */
.lang-stack:hover .flag-list{ display:block }     /* support hover si souhaité */

/* ====== Bouton Logout (déjà ajouté, on durcit un peu le hover) ====== */
.btn-ghost.power{ transition:background .15s ease, color .15s ease, border-color .15s ease }
.btn-ghost.power:hover{ border-color:#111827 }

/* ====== Placeholders chart/map moins “dashed” en dark ====== */
.chart-placeholder, .map-placeholder{
  border-style:dashed; border-width:1px; border-color:var(--stroke);
  background-image: radial-gradient(ellipse at center, rgba(2,6,23,.03), rgba(2,6,23,0));
}

/* donuts: couleurs plus douces */
.donut .ring{
  background:
    radial-gradient(closest-side, var(--layer, #fff) 72%, transparent 73% 100%),
    conic-gradient(#ef4444 calc(var(--p)*1%), #e5e7eb 0);
}
:root[data-theme="dark"] .donut .ring{
  background:
    radial-gradient(closest-side, var(--layer) 72%, transparent 73% 100%),
    conic-gradient(#ef4444 calc(var(--p)*1%), #31405f 0);
}

/* ===== base claire (cohérent login) ===== */
:root{
  --bg:#f7f8fb; --layer:#ffffff; --text:#0f172a; --muted:#64748b; --stroke:#e5e7eb;
}
body{background:var(--bg); color:var(--text)}

/* ===== login: menu langues fixe ===== */
.lang-stack.fixed{position:fixed; top:110px; right:18px; z-index:100}
.lang-stack .flag-current{
  width:34px;height:34px;border-radius:999px;border:1px solid var(--stroke);
  background:#fff; display:grid; place-items:center; cursor:pointer
}
.lang-stack .flag-current img{width:18px;height:18px}
.lang-stack .flag-list{
  position:absolute; right:0; top:calc(100% + 6px); display:none;
  background:#fff; border:1px solid var(--stroke); border-radius:10px; padding:6px;
  box-shadow:0 12px 24px rgba(2,6,23,.12)
}
.lang-stack.open .flag-list{display:block}
.lang-stack .flag-list a{display:block; padding:4px; border-radius:6px}
.lang-stack .flag-list img{width:18px;height:18px}

/* topbar version (mêmes règles) */
.topbar-lang{position:relative}

/* ===== bouton ===== */
.btn-ghost.small{border:1px solid var(--stroke); background:#fff; padding:6px 8px; border-radius:8px}
.btn-ghost.power{border:1px solid var(--stroke); background:#fff; padding:6px 8px; border-radius:8px}

/* ===== app shell & collapse ===== */
.app{display:grid; grid-template-columns:240px 1fr; min-height:100vh}
.app.is-collapsed{grid-template-columns:0 1fr}
.sidebar{background:#fff; border-right:1px solid var(--stroke); padding:16px; overflow:auto}
.app.is-collapsed .sidebar{width:0; padding:0; border:0; overflow:hidden}
.content{background:var(--bg)}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 18px; border-bottom:1px solid var(--stroke); background:#fff}
.brandbar{display:flex; align-items:center; gap:10px}
.brandlogo{width:32px;height:32px;border-radius:8px}
.brandname{font-weight:800}
.controls{display:flex; align-items:center; gap:10px}
.filters input,.daterange input{background:#fff; border:1px solid var(--stroke); border-radius:8px; padding:10px 12px}
.filters input{width:420px; max-width:42vw}
.daterange input{width:220px}

/* ===== cards / kpi / charts etc. (déjà propre) ===== */
.card{background:var(--layer); border:1px solid var(--stroke); border-radius:10px; padding:14px; box-shadow:0 8px 18px rgba(2,6,23,.06)}
.chart-placeholder,.map-placeholder{height:280px; display:grid; place-items:center; color:#9aa4b2; border:1px dashed var(--stroke); border-radius:10px}

/* === Lang menus: ouvert AU SURVOL, avec "pont" anti-gap, et login top-left === */

/* position fixe (login) */
.lang-stack.fixed{position:fixed; top:18px; right:18px; z-index:100}
.lang-stack.fixed.left{left:18px; right:auto}

/* bouton + liste */
.lang-stack{position:relative; display:flex; align-items:center}
.lang-stack .flag-current{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--stroke);
  background:#fff; display:grid; place-items:center; cursor:pointer
}
.lang-stack .flag-current img{width:18px;height:18px}
.lang-stack .flag-list{
  position:absolute; right:0; top:calc(100% + 4px);
  display:none; background:#fff; border:1px solid var(--stroke);
  border-radius:10px; padding:6px; min-width:44px;
  box-shadow:0 12px 24px rgba(2,6,23,.12)
}
.lang-stack .flag-list a{display:block; padding:4px; border-radius:6px}
.lang-stack .flag-list img{width:18px;height:18px; display:block}

/* OUVERTURE au survol (flag OU liste) */
.lang-stack:hover .flag-list{display:block}

/* "Pont" invisible entre le bouton et la liste pour éviter la fermeture
   quand on déplace la souris de l’un à l’autre */
.lang-stack::before{
  content:""; position:absolute; right:0; top:100%;
  width:46px; height:8px; /* couvre le petit espace */
}
.topbar-lang::before{ right:0 }        /* version dans la topbar */
.lang-stack.fixed::before{ right:auto; left:0 } /* version login gauche */

/* Forcer un z-index au-dessus de la topbar / cartes */
.topbar .lang-stack{z-index:40}
/* login – flag en haut-gauche */
.lang-stack.fixed.left{ top:14px; left:14px; right:auto }
/* topbar – aligner parfaitement le sélecteur de langue */
.topbar .controls{ display:flex; align-items:center; gap:10px }
.topbar .lang-stack{ display:flex; align-items:center; margin:0 4px }
.topbar .lang-stack .flag-current{
  width:38px; height:38px;           /* même hauteur que les inputs */
  border-radius:8px;                  /* même rayon que les champs */
}
.topbar .filters input,
.topbar .daterange input{ height:38px }  /* force la même hauteur partout */

/* Logo unique partout */
.brandlogo{ width:28px; height:28px; border-radius:8px; display:block }
.sidebar .sb-brand .brandlogo{ width:32px; height:32px; border-radius:10px }

/* Petit ajustement d’alignement dans la topbar */
.brandbar{ display:flex; align-items:center; gap:10px }
/* login – flag en haut-droite */
.lang-stack.fixed.right{ top:14px; right:14px; left:auto }
/* topbar – aligner et caler le drapeau entre date range et power */
.topbar .controls{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }
.topbar .filters input{ width:420px; max-width:42vw; height:38px }
.topbar .daterange input{ width:220px; height:38px }

/* le drapeau a la même hauteur que les champs, juste après date range */
.topbar .lang-stack{ position:relative; display:flex; align-items:center; margin:0 4px }
.topbar .lang-stack .flag-current{
  width:38px; height:38px; border-radius:8px; border:1px solid var(--stroke); background:#fff
}
.topbar .lang-stack .flag-current img{ width:18px; height:18px }

/* menu langues: ouverture AU SURVOL et pont anti-gap (pas de clignotement) */
.topbar .lang-stack .flag-list{
  position:absolute; right:0; top:calc(100% + 4px); display:none;
  background:#fff; border:1px solid var(--stroke); border-radius:10px; padding:6px;
  box-shadow:0 12px 24px rgba(2,6,23,.12); min-width:44px; z-index:50
}
.topbar .lang-stack:hover .flag-list{ display:block }
.topbar .lang-stack::before{ content:""; position:absolute; right:0; top:100%; width:46px; height:8px }
/* topbar – aligner et caler le drapeau entre date range et power */
.topbar .controls{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }
.topbar .filters input{ width:420px; max-width:42vw; height:38px }
.topbar .daterange input{ width:220px; height:38px }

/* le drapeau a la même hauteur que les champs, juste après date range */
.topbar .lang-stack{ position:relative; display:flex; align-items:center; margin:0 4px }
.topbar .lang-stack .flag-current{
  width:38px; height:38px; border-radius:8px; border:1px solid var(--stroke); background:#fff
}
.topbar .lang-stack .flag-current img{ width:18px; height:18px }

/* menu langues: ouverture AU SURVOL et pont anti-gap (pas de clignotement) */
.topbar .lang-stack .flag-list{
  position:absolute; right:0; top:calc(100% + 4px); display:none;
  background:#fff; border:1px solid var(--stroke); border-radius:10px; padding:6px;
  box-shadow:0 12px 24px rgba(2,6,23,.12); min-width:44px; z-index:50
}
.topbar .lang-stack:hover .flag-list{ display:block }
.topbar .lang-stack::before{ content:""; position:absolute; right:0; top:100%; width:46px; height:8px }
/* --- fige le bouton langue de la topbar (pas de décalage) --- */
.topbar .controls{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }

.topbar .lang-stack{
  position:relative;
  width:42px;           /* réserve l'espace => plus de mouvement */
  min-width:42px;
  height:38px;          /* aligné sur les champs */
  display:flex; align-items:center; justify-content:center;
  margin:0 4px;
}

.topbar .lang-stack .flag-current{
  width:38px; height:38px; border-radius:8px;
  border:1px solid var(--stroke); background:#fff;
  display:grid; place-items:center; /* centre l’icône */
}
.topbar .lang-stack .flag-current img{ width:18px; height:18px }

/* menu au survol, absolument positionné => ne prend aucun espace */
.topbar .lang-stack .flag-list{
  position:absolute; right:-2px; top:calc(100% + 6px);
  display:none; background:#fff; border:1px solid var(--stroke);
  border-radius:10px; padding:6px; box-shadow:0 12px 24px rgba(2,6,23,.12);
  min-width:44px; z-index:100;
}
.topbar .lang-stack:hover .flag-list{ display:block }

/* pont anti-gap pour éviter le clignotement au passage souris */
.topbar .lang-stack::before{
  content:""; position:absolute; right:0; top:100%; width:46px; height:10px;
}
/* ===== Topbar: alignement parfait filtres / date / langue / power ===== */
.topbar .controls{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
}

/* Champs (mêmes hauteurs partout) */
.topbar .filters input,
.topbar .daterange input{
  height:36px; line-height:36px;
  border-radius:10px;
}

/* Largeur du Date range (éviter l’aspect “trop large”) */
.topbar .daterange input{ width:200px }

/* Bouton langue: même hauteur, espace réservé (plus de mouvement) */
.topbar .lang-stack{
  position:relative;
  width:40px; min-width:40px; height:36px;
  display:flex; align-items:center; justify-content:center;
  margin:0 6px; align-self:center;      /* centrage vertical garanti */
  transform: translateY(-1px);          /* 1px de micro-ajustement visuel */
}

.topbar .lang-stack .flag-current{
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--stroke); background:#fff;
  display:grid; place-items:center;
}
.topbar .lang-stack .flag-current img{ width:18px; height:18px }

/* Menu langues: ne prend aucun espace, reste au survol, pas de clignotement */
.topbar .lang-stack .flag-list{
  position:absolute; right:-2px; top:calc(100% + 6px);
  display:none; background:#fff; border:1px solid var(--stroke);
  border-radius:10px; padding:6px; min-width:44px; z-index:100;
  box-shadow:0 12px 24px rgba(2,6,23,.12);
}
.topbar .lang-stack:hover .flag-list{ display:block }

/* Pont anti-gap pour le survol */
.topbar .lang-stack::before{
  content:""; position:absolute; right:0; top:100%; width:46px; height:10px;
}
/* ====== Topbar: même hauteur et alignement strict ====== */
:root{ --ctl-h:40px; }                /* hauteur unique pour tous les contrôles */

.topbar .controls{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
}

/* Champs texte + date = même hauteur */
.topbar .filters input,
.topbar .daterange input{
  height:var(--ctl-h);
  line-height:var(--ctl-h);
  border-radius:10px;
}

/* Drapeau : espace réservé + centrage parfait (ne bouge plus) */
.topbar .lang-stack{
  position:relative;
  width:calc(var(--ctl-h) + 2px);      /* réserve l'espace */
  min-width:calc(var(--ctl-h) + 2px);
  height:var(--ctl-h);
  display:flex; align-items:center; justify-content:center;
  margin:0 6px; align-self:center;
}
.topbar .lang-stack .flag-current{
  width:var(--ctl-h); height:var(--ctl-h);
  border-radius:8px; border:1px solid var(--stroke);
  background:#fff; display:grid; place-items:center;
}
.topbar .lang-stack .flag-current img{ width:18px; height:18px }

/* Menu langues : hors flux (ne prend pas de place), reste au survol */
.topbar .lang-stack .flag-list{
  position:absolute; right:-2px; top:calc(100% + 6px);
  display:none; background:#fff; border:1px solid var(--stroke);
  border-radius:10px; padding:6px; min-width:44px; z-index:100;
  box-shadow:0 12px 24px rgba(2,6,23,.12);
}
.topbar .lang-stack:hover .flag-list{ display:block }

/* Pont anti-gap pour éviter le clignotement */
.topbar .lang-stack::before{
  content:""; position:absolute; right:0; top:100%; width:46px; height:10px;
}

/* Power: même taille, même alignement (si classe présente) */
.topbar .btn-power,
.topbar .power,
.topbar button[title*="Power"]{
  width:var(--ctl-h); height:var(--ctl-h);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
}
/* ====== Topbar: unifier Enter filter, Date range, Lang & Power ====== */
:root{ --ctl-h:38px; --ctl-r:10px; }

/* conteneur horizontal */
.topbar .controls{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap }

/* même look pour les 2 inputs ------------------------------------------ */
.topbar .filters input,
.topbar .filters .form-control,
.topbar .daterange input,
.topbar .daterange .form-control{
  height:var(--ctl-h); line-height:var(--ctl-h);
  padding:0 12px;
  border:1px solid var(--stroke);
  border-radius:var(--ctl-r);
  background:#fff; box-shadow:none; outline:none;
}

/* largeur raisonnable du Date range pour matcher l’aperçu */
.topbar .daterange input,
.topbar .daterange .form-control{ width:220px }

/* bouton langue : même taille qu’un input, placé entre date & power ----- */
.topbar .lang-stack{
  position:relative;
  width:var(--ctl-h); min-width:var(--ctl-h); height:var(--ctl-h);
  display:flex; align-items:center; justify-content:center;
  margin:0 4px; align-self:center;   /* parfait alignement vertical */
}
.topbar .lang-stack .flag-current{
  width:100%; height:100%;
  border:1px solid var(--stroke); border-radius:var(--ctl-r);
  background:#fff; display:grid; place-items:center;
}
.topbar .lang-stack .flag-current img{ width:18px; height:18px }

/* menu langues : hors flux, reste ouvert au survol, pas de “gap” */
.topbar .lang-stack .flag-list{
  position:absolute; right:-2px; top:calc(100% + 6px);
  display:none; background:#fff; border:1px solid var(--stroke);
  border-radius:10px; padding:6px; min-width:44px; z-index:100;
  box-shadow:0 12px 24px rgba(2,6,23,.12);
}
.topbar .lang-stack:hover .flag-list{ display:block }
.topbar .lang-stack::before{ content:""; position:absolute; right:0; top:100%; width:46px; height:10px }

/* bouton power : même gabarit ------------------------------------------ */
.topbar .btn-power,
.topbar .power,
.topbar button[title*="Power"]{
  width:var(--ctl-h); height:var(--ctl-h);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--ctl-r);
}
/* Ordonner explicitement les éléments de la topbar */
.topbar .filters     { order: 10; }
.topbar .daterange   { order: 20; }
.topbar .lang-stack  { order: 21; }
.topbar .btn-power,
.topbar .power,
.topbar button[title*="Power"] { order: 22; }

/* Remonter très légèrement le drapeau pour l’aligner au pixel */
.topbar .lang-stack{
  transform: translateY(-3px);  /* ajuste si besoin: -2px / -3px */
  margin-left:6px; margin-right:6px;
}
/* fine-tuning: remonter un peu le drapeau et le décaler légèrement à droite */
.topbar .controls .lang-stack{
  transform: translateY(-6px);   /* -5 / -6 px selon ton écran */
  margin-left:12px;              /* rapproche du bouton power (à droite) */
  margin-right:4px;              /* petit coussin avant le power */
}
/* fine-tuning: remonter un peu le drapeau et le décaler légèrement à droite */
.topbar .controls .lang-stack{
  transform: translateY(-6px);   /* -5 / -6 px selon ton écran */
  margin-left:20px;              /* rapproche du bouton power (à droite) */ 
  margin-right:8px;              /* petit coussin avant le power */ 
}
/* fine-tuning: remonter un peu le drapeau et le décaler légèrement à droite */
.topbar .controls .lang-stack{
  transform: translateY(-6px);   /* -5 / -6 px selon ton écran */
  margin-left:12px;              /* rapproche du bouton power (à droite) */
  margin-right:4px;              /* petit coussin avant le power */
}

/* --- SwitchSMS: aligner l'icône "account" sur le bouton power --- */
.btn-ico-square{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;width:36px;border-radius:10px;padding:0;margin:0 6px;
}
.btn-ico-square img{height:16px;width:16px;display:block}
.btn-ico-square{display:inline-flex;align-items:center;justify-content:center;height:36px;width:36px;border-radius:10px;padding:0;margin:0 6px}
.btn-ico-square img{height:16px;width:16px;display:block}
.btn-ico-square{display:inline-flex;align-items:center;justify-content:center;height:36px;width:36px;border-radius:10px;padding:0;margin:0 6px}
.btn-ico-square img{height:16px;width:16px;display:block}

/* --- Forgot inline (login) --- */
.login-plain .forgot-inline{
  margin-top:12px; padding-top:12px; border-top:1px solid #eee;
}
.login-plain .forgot-inline .btn-outline{
  margin-top:2px;
}

/* --- Bouton icône carré (compte) --- */
.btn-ico-square{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;width:36px;border-radius:10px;padding:0;margin:0 6px;
}
.btn-ico-square img{height:16px;width:16px;display:block}

/* Forgot inline: même largeur/rythme que les champs login */
.login-plain .forgot-inline{
  margin-top:12px; padding-top:12px; border-top:1px solid #eee;
}
.login-plain .forgot-inline .line{ margin-bottom:10px; }
.login-plain .forgot-inline .btn-outline{ margin-top:2px; }
/* --- Harmonisation login --- */
.login-plain .panel-form,
.login-plain .forgot-inline{
  max-width:420px; width:100%;
  margin-left:auto; margin-right:auto;
}
.login-plain .panel-form .line input,
.login-plain .forgot-inline .line input{
  width:100%;
}
.login-plain .panel-form #signinBtn{
  width:100%;
}
/* --- Topbar: alignement & tailles identiques --- */
.topbar .controls{ display:flex; align-items:center; gap:8px; }

.topbar .topbar-lang .flag-current{
  height:36px; width:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.topbar .topbar-lang img{ height:16px; width:16px; display:block; }

/* icône compte (déjà ajouté en .btn-ico-square) */
.topbar .btn-ico-square{
  height:36px; width:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0; margin:0;
}

/* bouton power au même format */
.topbar .btn-ghost.power{
  height:36px; width:36px; line-height:36px; text-align:center;
  border-radius:10px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ==== TOPBAR : aligner drapeau, compte et power (même taille) ==== */
.topbar .controls{display:flex;align-items:center;gap:8px}
.topbar .controls .flag-current,
.topbar .controls .btn-ico-square,
.topbar .controls .btn-ghost.power{
  height:36px;width:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin:0;
}
.topbar .controls .flag-current img{height:18px;width:18px;display:block}

/* ==== LOGIN : mêmes largeurs / rendu homogène ==== */
.login-plain .panel{max-width:520px}
.login-plain .panel-form .line{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.login-plain .panel-form .line .ico{width:20px;text-align:center}
.login-plain .panel-form .line input{width:100%}
/* SIGN IN plein largeur */

/* Bloc "Forgot" intégré, même style que le formulaire */
.login-plain .forgot-inline{margin-top:12px;padding-top:12px;border-top:1px solid #eee}
.login-plain .forgot-inline .panel-form{padding-top:0;margin:0}
.login-plain .forgot-inline .panel-form .btn-outline{width:100%}
/* ==== Login: champs et bouton même dimensions ==== */
.login-plain .panel{max-width:540px}
.login-plain .panel-form .line{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.login-plain .panel-form .line .ico{width:20px;text-align:center;opacity:.85}

/* même hauteur/arrondis pour tous les inputs et boutons du bloc login + forgot */
.login-plain .panel-form input[type="text"],
.login-plain .panel-form input[type="password"],
.login-plain .forgot-inline input[type="text"],
.login-plain .panel-form .btn-outline,
.login-plain .forgot-inline .btn-outline{
  height:42px; line-height:42px; border-radius:10px; width:100%;
}

/* Bloc Forgot intégré sous le bouton, même style que le form */
.login-plain .forgot-inline{
  margin-top:12px; padding-top:12px; border-top:1px solid #e9edf3;
}
/* ==== Topbar: alignement et tailles homogènes ==== */
.topbar .controls{display:flex;align-items:center;gap:8px}
.topbar .controls .flag-current,
.topbar .controls .btn-ico-square,
.topbar .controls .btn-ghost.power{
  width:36px;height:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin:0;
}
.topbar .controls .flag-current img{width:18px;height:18px;display:block}
.topbar .controls .btn-ghost.power{font-size:16px;line-height:1}
/* Hotfix: empêcher les drapeaux de s’étirer */
.lang-stack .flag-current,
.lang-stack .flag-list a { display:inline-flex; align-items:center; justify-content:center; }

.lang-stack .flag-current img,
.lang-stack .flag-list img {
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  display:block;
}

/* Bouton du drapeau en haut à droite (login) */
.lang-stack.fixed.right .flag-current{
  width:36px; height:36px; border-radius:10px; padding:0;
}
/* --- Flags: taille fixe, pas d'agrandissement --- */
.lang-stack .flag-current,
.lang-stack .flag-list a { display:inline-flex; align-items:center; justify-content:center; }
.lang-stack .flag-current img,
.lang-stack .flag-list img {
  width:20px !important; height:20px !important;
  max-width:20px !important; max-height:20px !important; display:block;
}
/* Bouton du drapeau (login) */
.lang-stack.fixed.right .flag-current{ width:36px; height:36px; border-radius:10px; padding:0; }
/* ===== Login: panneau centré, logo taille maîtrisée, champs homogènes ===== */
.login-plain{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.login-plain .panel{width:100%; max-width:520px; margin:0 auto;}
.login-plain .panel-logo{text-align:center; margin-bottom:14px;}
.login-plain .panel-logo img{height:72px; width:auto; max-width:72px; display:inline-block;}
.login-plain .panel-form .line{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.login-plain .panel-form .line .ico{width:20px; text-align:center;}
.login-plain .panel-form .line input{flex:1;}     /* mêmes largeurs pour user/pass */
.login-plain .panel-form .btn-outline{width:100%;}/* bouton SIGN IN pleine largeur */

/* Forgot inline sous le formulaire, aligné */
.login-plain .forgot-inline{margin-top:12px; padding-top:12px; border-top:1px solid #eee;}
.login-plain .forgot-inline .panel-form{padding:0; margin:0;}
.login-plain .forgot-inline .panel-form .btn-outline{width:100%;}

/* ===== Topbar: drapeau, compte, power même taille & alignés ===== */
.topbar .controls{display:flex; align-items:center; gap:8px;}
.topbar .controls .flag-current,
.topbar .controls .btn-ico-square,
.topbar .controls .btn-ghost.power{
  height:36px; width:36px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0;
}
.topbar .controls .btn-ghost.power{font-size:18px; line-height:1;}
.topbar .controls .btn-ico-square img{height:16px; width:16px; display:block;}

/* ==== TOPBAR : aligner drapeau, compte et power (même taille) ==== */
.topbar .controls{display:flex;align-items:center;gap:8px}
.topbar .controls .flag-current,
.topbar .controls .btn-ico-square,
.topbar .controls .btn-ghost.power{
  height:36px;width:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin:0;
}
.topbar .controls .flag-current img{height:18px;width:18px;display:block}

/* ==== LOGIN : mêmes largeurs / rendu homogène ==== */
.login-plain .panel{max-width:520px}
.login-plain .panel-form .line{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.login-plain .panel-form .line .ico{width:20px;text-align:center}
.login-plain .panel-form .line input{width:100%}
.login-plain .panel-form .btn-outline{width:100%} /* SIGN IN plein largeur */

/* Bloc "Forgot" intégré, même style que le formulaire */
.login-plain .forgot-inline{margin-top:12px;padding-top:12px;border-top:1px solid #eee}
.login-plain .forgot-inline .panel-form{padding-top:0;margin:0}
.login-plain .forgot-inline .panel-form .btn-outline{width:100%}

/* Corrige la largeur des boutons SIGN IN et RESET */
#signinBtn, #resetBtn {
  width: auto !important;
  min-width: 140px !important;
  max-width: 200px;
  margin: 12px auto !important;
  display: block;
}

/* Réaligner parfaitement le drapeau de langue avec 👤 et ⏻ */
.topbar .lang-stack {
  transform: translateY(0px) !important;
  margin-top: 0 !important;
}
.topbar .lang-stack .flag-current {
  height: 36px !important;
  width: 36px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}