/* 2.6.19 : toute l'interface agrandie de 3 % (zoom de la page). Les hauteurs et largeurs en vh / vw sont divisées par ce zoom
 * pour que les fenêtres et les écrans pleine hauteur gardent exactement la taille de l'écran. Changer --zm règle tout d'un coup. */
:root { --zm: 1.03; }
html { zoom: var(--zm); }
/* SikaNet Manager — styles */
:root {
  --teal: #055a6d; --teal-2: #087891; --teal-3: #0fb3cf;
  --brand: #E8184F; --brand-2: #B80F3C;
  --gold: #ffd700; --gold-2: #f2b705;
  --red: #e52b2d; --ok: #22c55e; --warn: #f59e0b;
  --ink: #0b2a31; --muted: #5d7a80; --faint: #93aab0;
  --bg: #eef4f4; --card: #ffffff; --surface: #f5f9f9; --elev: #ffffff;
  --line: rgba(5,90,109,.12); --soft: rgba(5,90,109,.07);
  --accent: var(--teal); --accent-ink: #fff;
  --radius: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 64px;
  --safe-b: var(--sab, env(safe-area-inset-bottom, 0px));
  --safe-t: var(--sat, env(safe-area-inset-top, 0px));
}
:root[data-theme="dark"] {
  --ink: #e6f4f6; --muted: #8fb3ba; --faint: #5f7d84;
  --bg: #04161b; --card: #0a2730; --surface: #0d2f39; --elev: #0f3440;
  --line: rgba(255,255,255,.08); --soft: rgba(255,255,255,.05);
  --accent: #3fd0ea; --accent-ink: #04161b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e6f4f6; --muted: #8fb3ba; --faint: #5f7d84;
    --bg: #04161b; --card: #0a2730; --surface: #0d2f39; --elev: #0f3440;
    --line: rgba(255,255,255,.08); --soft: rgba(255,255,255,.05);
    --accent: #3fd0ea; --accent-ink: #04161b;
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 13.5px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none; user-select: none;
  padding-left: var(--sal, 0px); padding-right: var(--sar, 0px);
}
input, select, textarea, .sel { user-select: text; }
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.hide { display: none !important; }

/* ---------- Structure ---------- */
#app { min-height: 100%; }
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px;
  padding: calc(12px + var(--safe-t)) 14px 12px; color: #fff;
  background: linear-gradient(135deg, var(--teal-2), var(--teal) 70%, #043f4d);
  box-shadow: 0 6px 20px -12px rgba(0,0,0,.6);
}
.topbar .tb-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 20px; flex-shrink: 0; }
.topbar .tb-txt { flex: 1; min-width: 0; }
.topbar .tb-title { font-weight: 800; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .tb-sub { font-size: .74rem; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.dot.off { background: var(--red); }
.dot.wait { background: var(--gold); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.topbar .tb-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; color: #fff; }
.topbar .tb-btn:active { background: rgba(255,255,255,.15); }
.spin { animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

.view { padding: 14px 14px calc(var(--nav-h) + 24px + var(--safe-b)); max-width: 720px; margin: 0 auto; }
.view.nonav { padding-bottom: 32px; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -18px rgba(0,0,0,.5);
}
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .68rem; font-weight: 700; color: var(--muted); position: relative; }
.nav button .i { font-size: 22px; transition: transform .3s var(--spring); }
.nav button.on { color: var(--accent); }
.nav button.on .i { transform: translateY(-2px) scale(1.08); }
/* 2.6.22 : barre « Néon » : le fond (barre + bosse au centre) est dessiné par .nav-bg, avec une lueur sarcelle ; Accueil au centre dans un bouton sombre lumineux */
.nav { background: transparent; border-top: 0; box-shadow: none; }
.nav-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: drop-shadow(0 -1px 0 var(--line)) drop-shadow(0 -6px 12px rgba(15,179,207,.16)); }
.nav-bg::before { content: ""; position: absolute; inset: 0; background: var(--card); }
.nav-bg::after { content: ""; position: absolute; left: 50%; top: -17px; width: 150px; height: 18px; margin-left: -75px; background: var(--card); clip-path: path("M0 18 C27 18 33 0 75 0 C117 0 123 18 150 18 Z"); }
.nav .nav-gap { flex: 1; }
.nav button.mid { flex: 1.15; justify-content: flex-end; padding-bottom: 5px; }
.nav button.mid .home { position: absolute; left: 50%; top: -19px; width: 42px; height: 42px; margin-left: -21px; border-radius: 50%; display: grid; place-items: center; color: #5fe3f7;
  background: radial-gradient(circle at 50% 30%, #0f3440, #061a1f); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px rgba(63,208,234,.5), 0 0 20px 2px rgba(63,208,234,.38); transition: transform .3s var(--spring), box-shadow .3s; }
.nav button.mid .home .i { font-size: 19px; filter: drop-shadow(0 0 5px rgba(95,227,247,.8)); }
.nav button.mid.on .home { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px rgba(63,208,234,.75), 0 0 26px 4px rgba(63,208,234,.5); }
.nav button.mid.on .i, .nav button.mid:active .i { transform: none; }
.nav button.mid:active .home { transform: scale(.92); }
.nav button.on:not(.mid) { text-shadow: 0 0 10px rgba(15,179,207,.35); }
.topbar .tb-gear.on { color: var(--gold); }

/* ---------- Onglets secondaires ---------- */
.seg { display: flex; gap: 6px; overflow-x: auto; margin: -2px -14px 12px; padding: 2px 14px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex-shrink: 0; padding: 8px 14px; border-radius: 99px; font-size: .84rem; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--line); }
.seg button.on { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.seg button .cnt { margin-left: 5px; padding: 1px 6px; border-radius: 99px; font-size: .7rem; background: var(--soft); }
.seg button.on .cnt { background: rgba(255,255,255,.25); }

/* ---------- Cartes ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 22px -18px rgba(5,40,48,.35); }
.card + .card, .card + .grid, .grid + .card, .grid + .grid, .sec + .card, .card + .sec, .grid + .sec { margin-top: 12px; }
.pad { padding: 14px; }
.sec { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 8px; }
.sec h3 { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sec .link { font-size: .8rem; font-weight: 700; color: var(--accent); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid.g3 { grid-template-columns: 1fr 1fr 1fr; }

.stat { padding: 14px; position: relative; overflow: hidden; }
.stat .s-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; margin-bottom: 10px; color: var(--accent); background: var(--soft); }
.stat .s-val { font-size: 1.45rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.1; }
.stat .s-val small { font-size: .78rem; font-weight: 700; color: var(--muted); margin-left: 3px; }
.stat .s-lab { font-size: .76rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
.stat.hl { color: #fff; border: 0; background: linear-gradient(140deg, var(--teal-2), var(--teal) 65%, #043f4d); }
.stat.hl .s-ico { color: var(--teal); background: var(--gold); }
.stat.hl .s-lab, .stat.hl .s-val small { color: rgba(255,255,255,.8); }
.stat.gold { color: #0b2a31; border: 0; background: linear-gradient(135deg, #fff08a, var(--gold) 45%, var(--gold-2)); }
.stat.gold .s-ico { background: rgba(11,42,49,.1); color: #0b2a31; }
.stat.gold .s-lab, .stat.gold .s-val small { color: rgba(11,42,49,.7); }
.stat[data-act] { cursor: pointer; }
.stat[data-act]:active { transform: scale(.98); }

.bar { height: 7px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--teal-3); transition: width .8s var(--ease); }
.bar.warn i { background: var(--warn); }
.bar.crit i { background: var(--red); }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); font-weight: 600; flex-shrink: 0; }
.kv .v { font-weight: 700; text-align: right; word-break: break-word; }

/* ---------- Listes ---------- */
.tools { display: flex; gap: 8px; margin-bottom: 10px; }
.search { flex: 1; position: relative; }
.search .i { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); font-size: 17px; }
.search input { width: 100%; height: 44px; padding: 0 12px 0 38px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; outline: none; }
.search input:focus { border-color: var(--teal-3); }
.filter { height: 44px; max-width: 42%; padding: 0 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .85rem; }
.chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 -14px 10px; padding: 0 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; padding: 6px 12px; border-radius: 99px; font-size: .78rem; font-weight: 700; color: var(--muted); background: var(--soft); border: 1px solid transparent; }
.chip.on { color: var(--accent); border-color: var(--accent); background: transparent; }

.list { overflow: hidden; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.item:last-child { border-bottom: 0; }
.item:active { background: var(--soft); }
.item .av { position: relative; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; color: var(--accent); background: var(--soft); }
.item .av .st { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--card); background: var(--ok); }
.item .av .st.off { background: var(--faint); }
.item .av.dis { color: var(--faint); }
.item .main { flex: 1; min-width: 0; }
.item .t { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .s { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.item .end { text-align: right; flex-shrink: 0; font-size: .76rem; color: var(--muted); }
.item .end b { display: block; font-size: .86rem; color: var(--ink); }
.tag { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 99px; font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; }
.tag.red { color: var(--red); background: rgba(229,43,45,.12); }
.tag.ok { color: #16a34a; background: rgba(34,197,94,.14); }
.tag.gold { color: #a36b00; background: rgba(242,183,5,.18); }
.tag.blue { color: var(--teal-2); background: rgba(15,179,207,.14); }
:root[data-theme="dark"] .tag.gold { color: var(--gold); }
.more { display: block; width: 100%; padding: 14px; font-weight: 700; color: var(--accent); text-align: center; }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty .i { font-size: 40px; color: var(--faint); margin-bottom: 10px; }
.empty b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }
.errbox { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(229,43,45,.08); border: 1px solid rgba(229,43,45,.25); color: var(--ink); font-size: .88rem; }
.errbox .i { color: var(--red); font-size: 20px; margin-top: 1px; }
.errbox button { margin-top: 8px; font-weight: 800; color: var(--red); }
.skel { height: 64px; border-radius: 14px; margin-bottom: 8px; background: linear-gradient(90deg, var(--soft) 25%, var(--line) 50%, var(--soft) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

.fab { position: fixed; right: 18px; bottom: calc(var(--nav-h) + 18px + var(--safe-b)); z-index: 15; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; color: #0b2a31; background: linear-gradient(135deg, #fff08a, var(--gold) 45%, var(--gold-2)); box-shadow: 0 14px 28px -10px rgba(242,183,5,.9); transition: transform .3s var(--spring); }
.fab:active { transform: scale(.92); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 14px; font-weight: 800; font-size: .92rem; transition: transform .2s var(--spring), opacity .2s; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.full { width: 100%; }
/* 2.4.0 : couleur d'accent de la charte (#E8184F), réservée aux boutons importants (moins de 10 % de l'écran) */
.btn.pri { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 22px -12px rgba(232,24,79,.8); }
.btn.gold { color: #0b2a31; background: linear-gradient(135deg, #fff08a, var(--gold) 45%, var(--gold-2)); box-shadow: 0 10px 22px -12px rgba(242,183,5,.9); }
.btn.ghost { color: var(--ink); background: var(--soft); border: 1px solid var(--line); }
.btn.danger { color: #fff; background: linear-gradient(135deg, #f04446, var(--red)); }
/* 2.5.0 : couleur d'origine (sarcinoise) du bouton « Ouvrir » de la page Gérer les routeurs, distincte du rose de charte */
.btn.teal { color: #fff; background: linear-gradient(135deg, var(--teal-2), var(--teal)); box-shadow: 0 10px 22px -12px rgba(5,90,109,.55); }
.btn.dangerg { color: var(--red); background: rgba(229,43,45,.08); border: 1px solid rgba(229,43,45,.25); }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.btns .wide { grid-column: 1 / -1; }
.acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: var(--soft); font-size: .74rem; font-weight: 700; color: var(--ink); text-align: center; }
.act .i { font-size: 20px; color: var(--accent); }
.act.red .i, .act.red { color: var(--red); }
.act:active { transform: scale(.96); }

/* ---------- Formulaires ---------- */
.f { margin-bottom: 12px; }
.f label { display: block; font-size: .76rem; font-weight: 800; color: var(--muted); margin: 0 2px 5px; letter-spacing: .02em; }
.f .hint { font-size: .72rem; color: var(--faint); margin: 4px 2px 0; }
.f input, .f select, .f textarea {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem; outline: none; -webkit-appearance: none; appearance: none;
}
.f select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.f textarea { height: 90px; padding: 12px 14px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--teal-3); box-shadow: 0 0 0 3px rgba(15,179,207,.15); }
.f .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f .inb { position: relative; }
.f .inb input { padding-right: 48px; }
.f .inb button { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); font-size: 18px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.quick button { padding: 5px 10px; border-radius: 99px; font-size: .74rem; font-weight: 700; color: var(--accent); background: var(--soft); }
.sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); margin-bottom: 12px; }
.sw span { font-size: .9rem; font-weight: 600; }
.sw small { display: block; font-size: .72rem; color: var(--muted); font-weight: 500; }
.sw input { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 99px; background: var(--line); position: relative; flex-shrink: 0; transition: background .25s; }
.sw input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .3s var(--spring); }
.sw input:checked { background: var(--teal-3); }
.sw input:checked::after { transform: translateX(18px); }
.radio { display: grid; gap: 6px; margin-bottom: 12px; }
.radio.h { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.radio label { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface); font-size: .86rem; font-weight: 650; }
.radio input, .f .radio input { accent-color: var(--teal-3); width: 18px; height: 18px; padding: 0; margin: 0; border: 0; box-shadow: none; flex-shrink: 0; -webkit-appearance: radio; appearance: auto; background: none; }
.radio label:has(input:checked) { border-color: var(--teal-3); background: rgba(15,179,207,.08); }

/* ---------- Feuilles (bottom sheets) ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(2,12,15,.55); opacity: 0; transition: opacity .25s; }
.sheet.open { opacity: 1; }
.sheet .box {
  width: 100%; max-width: 720px; max-height: calc(calc(100vh / var(--zm)) - var(--safe-t) - 16px); display: flex; flex-direction: column;
  border-radius: 24px 24px 0 0; background: var(--card); box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  transform: translateY(100%); transition: transform .38s var(--ease);
}
.sheet.open .box { transform: none; }
.sheet .hd { position: relative; display: flex; align-items: center; gap: 10px; padding: 18px 16px 10px; }
.sheet .hd::before { content: ""; position: absolute; left: 50%; top: 7px; margin-left: -20px; width: 40px; height: 4px; border-radius: 99px; background: var(--line); }
.sheet .hd h2 { flex: 1; font-size: 1.08rem; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .hd button { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: var(--soft); }
.sheet .bd { overflow-y: auto; padding: 4px 16px calc(20px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.sheet.center { align-items: center; padding: 20px; }
.sheet.center .box { border-radius: 22px; max-width: 380px; transform: scale(.9); opacity: 0; transition: transform .3s var(--spring), opacity .2s; }
.sheet.center.open .box { transform: none; opacity: 1; }
.dlg { padding: 22px 20px 18px; text-align: center; }
.dlg .d-ico { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--accent); background: var(--soft); }
.dlg .d-ico.red { color: var(--red); background: rgba(229,43,45,.1); }
.dlg h3 { font-size: 1.08rem; }
.dlg p { margin-top: 6px; font-size: .88rem; color: var(--muted); }

.prog { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; margin: 16px 0 8px; }
.prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal-3), var(--ok)); transition: width .3s; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + 16px + var(--safe-b)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { max-width: 440px; padding: 11px 16px; border-radius: 14px; font-size: .86rem; font-weight: 650; color: #fff; background: #0b2a31; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); animation: tin .35s var(--spring); display: flex; gap: 8px; align-items: center; }
.toast.ok { background: #15803d; }
.toast.err { background: #b91c1c; }
.toast.out { opacity: 0; transform: translateY(10px); transition: all .3s; }
@keyframes tin { from { opacity: 0; transform: translateY(16px) scale(.95); } }

/* ---------- Écran routeurs ---------- */
.welcome { padding: calc(20px + var(--safe-t)) 18px 22px; text-align: center; color: #fff; background: linear-gradient(160deg, var(--teal-2), var(--teal) 55%, #032f39); border-radius: 0 0 28px 28px; position: relative; overflow: hidden; }
.welcome::before { content: ""; position: absolute; width: 300px; height: 300px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,215,0,.35), transparent 65%); }
.welcome .logo { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 22px; display: grid; place-items: center; font-size: 36px; color: var(--teal); background: linear-gradient(135deg, #fff08a, var(--gold) 45%, var(--gold-2)); box-shadow: 0 16px 30px -12px rgba(0,0,0,.5); position: relative; }
.welcome h1 { font-size: 1.5rem; font-weight: 850; letter-spacing: -.02em; position: relative; }
.welcome h1 b { color: var(--gold); }
.welcome p { font-size: .88rem; opacity: .85; margin-top: 4px; position: relative; }
.rcard { display: flex; align-items: center; gap: 12px; padding: 14px; }
.rcard .av { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: var(--accent); background: var(--soft); flex-shrink: 0; }
.rcard .main { flex: 1; min-width: 0; }
.rcard .t { font-weight: 800; }
.rcard .s { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard .ib { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); font-size: 18px; }
.note { padding: 12px 14px; border-radius: 14px; font-size: .8rem; color: var(--muted); background: var(--soft); line-height: 1.5; }
.note code, .code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; color: var(--ink); background: var(--soft); padding: 1px 5px; border-radius: 6px; word-break: break-all; }
pre.code { display: block; padding: 10px 12px; margin-top: 8px; white-space: pre-wrap; line-height: 1.5; user-select: text; }

/* ---------- Graphique trafic ---------- */
.chart { width: 100%; height: 130px; display: block; }
.legend { display: flex; gap: 14px; font-size: .8rem; margin-top: 8px; }
.legend span { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.gauge { display: flex; align-items: center; gap: 14px; }
.ring { width: 64px; height: 64px; flex-shrink: 0; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring .t { stroke: var(--soft); }
.ring .v { stroke: var(--teal-3); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .86rem; font-weight: 850; }

.bars-chart { display: flex; align-items: flex-end; gap: 3px; height: 110px; margin-top: 10px; }
.bars-chart div { flex: 1; min-width: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(to top, var(--teal-2), var(--teal-3)); position: relative; }
.bars-chart div.today { background: linear-gradient(to top, var(--gold-2), var(--gold)); }
.bars-x { display: flex; justify-content: space-between; font-size: .66rem; color: var(--faint); margin-top: 4px; }

.log { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem; }
.log .ln { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.log .ln .tm { color: var(--faint); }
.log .ln .tp { color: var(--accent); font-weight: 700; }
.log .ln.err .msg { color: var(--red); }

.batchbar { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: var(--elev); border: 1px solid var(--line); box-shadow: 0 8px 20px -14px rgba(0,0,0,.5); font-size: .82rem; }
.batchbar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batchbar button { padding: 7px 10px; border-radius: 10px; font-weight: 800; font-size: .76rem; background: var(--soft); color: var(--accent); display: flex; gap: 5px; align-items: center; }
.batchbar button.red { color: var(--red); }

@media (min-width: 560px) { .grid.g4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 340px) { .grid { grid-template-columns: 1fr; } }

/* ---------- Langue, outils de l'écran d'accueil ---------- */
.wtools { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.wbtn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; color: #fff; background: rgba(255,255,255,.14); }
.langsw { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.14); }
.langsw button { padding: 6px 13px; border-radius: 99px; font-size: .78rem; font-weight: 800; color: rgba(255,255,255,.8); }
.langsw button.on { color: var(--teal); background: #fff; }
.langsw.alt { background: var(--soft); flex-shrink: 0; }
.langsw.alt button { color: var(--muted); }
.langsw.alt button.on { color: var(--accent-ink); background: var(--accent); }
.welcome .logo { margin-top: 2px; }
.grid > .btn { width: 100%; }

/* ---------- Affichage compact (plus d'informations par écran) ---------- */
.topbar { padding: 9px 12px; }
.topbar .tb-ico, .topbar .tb-btn { width: 34px; height: 34px; font-size: 17px; }
.topbar .tb-title { font-size: .95rem; }
.view { padding-top: 10px; }
.item { padding: 8px 12px; gap: 10px; }
.item .av { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.item .av .st { width: 10px; height: 10px; }
.item .t { font-size: .9rem; }
.item .s { font-size: .72rem; }
.item .end { font-size: .7rem; }
.item .end b { font-size: .8rem; }
.list.dense .item { padding: 7px 11px; }
.list.dense .item .t small { font-size: .68rem; font-weight: 600; font-family: inherit; }
.s.meta { display: flex; gap: 10px; flex-wrap: wrap; white-space: normal; }
.s.meta span { display: inline-flex; align-items: center; gap: 3px; }
.s.meta .i { font-size: 11px; }
.s.meta .lf { color: var(--teal-2); font-weight: 700; }
.s.meta .lf.low { color: var(--red); }
.kv { padding: 8px 0; font-size: .82rem; }
.stat { padding: 12px; }
.stat .s-val { font-size: 1.25rem; }
.stat .s-ico { width: 30px; height: 30px; font-size: 15px; margin-bottom: 8px; }
.search input, .filter { height: 40px; font-size: .84rem; }
.filter.grow { flex: 1; max-width: none; }
.tools + .tools { margin-top: -2px; }
.seg button { padding: 7px 12px; font-size: .78rem; }
.sec { margin: 14px 2px 7px; }
.f input, .f select { height: 44px; font-size: .9rem; }
.btn { height: 44px; font-size: .86rem; }
.nav button { font-size: .64rem; }
.nav button .i { font-size: 20px; }

/* =====================================================================
 * v1.2 — affichage encore plus compact + barre du bas collée en bas
 * ===================================================================== */
/* Android réserve déjà la place des barres système : on ne l'ajoute pas une 2e fois */
:root { --sab: 0px; --sat: 0px; --nav-h: 50px; --radius: 14px; }
body { font-size: 12.5px; line-height: 1.3; }
.view { padding: 8px 10px calc(var(--nav-h) + 14px); }
.topbar { padding: 7px 10px; gap: 8px; }
.topbar .tb-ico, .topbar .tb-btn { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
.topbar .tb-title { font-size: .9rem; }
.topbar .tb-sub { font-size: .66rem; }
.nav button { gap: 1px; font-size: .6rem; }
.nav button .i { font-size: 19px; }
.nav button.on .i { transform: none; }
.seg { margin: 0 -10px 8px; padding: 0 10px; gap: 5px; }
.seg button { padding: 5px 10px; font-size: .72rem; }
.card + .card, .card + .grid, .grid + .card, .grid + .grid, .sec + .card, .card + .sec, .grid + .sec { margin-top: 8px; }
.grid { gap: 7px; }
.pad { padding: 10px; }
.sec { margin: 10px 2px 5px; }
.sec h3 { font-size: .68rem; }
.stat { padding: 9px 10px; }
.stat .s-ico { width: 24px; height: 24px; border-radius: 7px; font-size: 13px; margin-bottom: 5px; }
.stat .s-val { font-size: 1.05rem; }
.stat .s-val small { font-size: .68rem; }
.stat .s-lab { font-size: .66rem; margin-top: 0; }
.ring { width: 48px; height: 48px; }
.ring b { font-size: .72rem; }
.gauge { gap: 10px; }
.bar { height: 5px; margin-top: 5px; }
.chart { height: 90px; }
.legend { font-size: .7rem; margin-top: 4px; }
.item { padding: 6px 10px; gap: 8px; }
.item .av { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.item .av .st { width: 9px; height: 9px; right: -2px; bottom: -2px; }
.item .t { font-size: .84rem; }
.item .s { font-size: .68rem; }
.item .end { font-size: .66rem; }
.item .end b { font-size: .76rem; }
.tag { font-size: .56rem; padding: 1px 5px; }
.kv { padding: 6px 0; font-size: .78rem; }
.tools { gap: 6px; margin-bottom: 7px; }
.search .i { left: 9px; font-size: 14px; }
.search input { height: 34px; padding: 0 8px 0 28px; border-radius: 10px; font-size: .78rem; }
.filter { height: 34px; border-radius: 10px; font-size: .74rem; padding: 0 6px; }
.tools.t3 .search { flex: 1.25; min-width: 0; }
.tools.t3 .filter { flex: 1; min-width: 0; max-width: none; }
.chips { margin: 0 -10px 7px; padding: 0 10px; gap: 5px; }
.chip { padding: 4px 9px; font-size: .7rem; }
.batchbar { padding: 6px 9px; font-size: .74rem; top: 50px; }
.batchbar button { padding: 5px 8px; font-size: .7rem; }
.fab { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; right: 14px; bottom: calc(var(--nav-h) + 12px); }
#toasts { bottom: calc(var(--nav-h) + 10px); }
.toast { font-size: .78rem; padding: 8px 12px; }
.f { margin-bottom: 9px; }
.f label { font-size: .68rem; margin-bottom: 3px; }
.f input, .f select { height: 38px; font-size: .84rem; border-radius: 10px; padding: 0 10px; }
.f .hint { font-size: .66rem; }
.btn { height: 38px; font-size: .8rem; border-radius: 10px; padding: 0 12px; }
.btns { gap: 6px; margin-top: 10px; }
.act { padding: 8px 4px; font-size: .66rem; border-radius: 10px; gap: 4px; }
.act .i { font-size: 17px; }
.acts { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 10px; }
.sw { padding: 8px 10px; margin-bottom: 9px; border-radius: 10px; }
.sw span { font-size: .8rem; }
.radio label { padding: 7px 9px; font-size: .78rem; border-radius: 10px; }
.sheet .hd { padding: 14px 12px 6px; }
.sheet .hd h2 { font-size: .95rem; }
.sheet .bd { padding: 2px 12px 14px; }
.note { font-size: .72rem; padding: 9px 10px; }
.welcome { padding: calc(12px + var(--safe-t)) 14px 14px; border-radius: 0 0 20px 20px; }
.welcome .logo { width: 52px; height: 52px; border-radius: 16px; font-size: 26px; margin-bottom: 8px; }
.welcome h1 { font-size: 1.2rem; }
.welcome p { font-size: .76rem; }
.rcard { padding: 9px 10px; gap: 9px; }
.rcard .av { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
.btn.wa { color: #fff; background: linear-gradient(135deg, #2bd46f, #1ea952); box-shadow: 0 8px 18px -10px rgba(37,211,102,.9); }
.empty { padding: 24px 14px; }
.empty .i { font-size: 30px; }
.bars-chart { height: 80px; }

/* Couleur par serveur hotspot */
.item.srvrow .av { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.stag { display: inline-block; padding: 0 5px; border-radius: 5px; font-size: .58rem; font-weight: 800; color: #fff; background: var(--c); vertical-align: 1px; }
.chip.srv { display: inline-flex; align-items: center; gap: 5px; }
.chip.srv i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.chip.srv.on { color: var(--c); border-color: var(--c); }

/* ---- v1.3 : PPPoE pro ---- */
.hint { font-size: .66rem; color: var(--faint); margin: 4px 2px 6px; }
.c-ok { color: var(--ok) !important; }
.c-gold { color: var(--warn) !important; }
.c-red { color: var(--red) !important; }
.chips.mini { margin: -4px 0 8px; padding: 0; gap: 5px; flex-wrap: wrap; }
.chips.mini .chip { padding: 3px 9px; font-size: .68rem; }
details.adv { margin: 6px 0 8px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; }
details.adv > summary { font-size: .74rem; font-weight: 700; color: var(--muted); cursor: pointer; padding: 3px 0; }
details.adv[open] > summary { margin-bottom: 6px; }
p.note { margin-bottom: 10px; }

/* ---- v1.4 : en ligne séparé par hotspot ---- */
.srvgrp { margin-bottom: 10px; }
.srvh { display: flex; align-items: center; gap: 6px; padding: 2px 4px 5px; font-size: .74rem; }
.srvh i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.srvh b { color: var(--c); text-transform: uppercase; letter-spacing: .04em; }
.srvh span { margin-left: auto; color: var(--muted); font-weight: 600; }
.srvgrp .card { box-shadow: none; }

/* ---- v1.5 ---- */
.stat .s-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.stat .s-row .s-ico { margin-bottom: 0; }
.item .note-t { display: block; font-size: .66rem; color: var(--muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- v1.6 ---- */
#sndl .item { cursor: pointer; }
#sndl .item { display: flex; align-items: center; gap: 10px; }
#sndl .item input { all: revert; width: 18px; height: 18px; accent-color: var(--accent); margin: 0 4px 0 0; flex-shrink: 0; }
#sndl .item .ib { margin-left: auto; }
.btn.wa .i { margin-left: 4px; }

/* ---- v1.6 : WhatsApp écrit en vert ---- */
.note .wa-l { color: #16a34a; font-weight: 800; white-space: nowrap; cursor: pointer; text-decoration: none; }
.note .wa-l .i { width: 1.15em; height: 1.15em; vertical-align: -3px; margin-left: 2px; color: #25d366; }
select.filter:disabled { opacity: .55; }

/* ---- v1.8 : licence ---- */
.lock { min-height: calc(100vh / var(--zm)); padding: calc(var(--safe-t) + 28px) 16px 30px; max-width: 520px; margin: 0 auto; }
.lock > .logo { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; color: var(--teal); background: var(--gold); }
.lock > h1 { text-align: center; font-size: 1.25rem; margin-bottom: 6px; }
.lock > h1 b { color: var(--gold-2); }
.lock > p.muted { text-align: center; font-size: .82rem; line-height: 1.5; }
.lock .card { margin-top: 12px; }
.lock .lk-id { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.lock .lk-id b { font-size: 1.35rem; letter-spacing: .08em; color: var(--accent); }
.lock .lk-id span, .lock .lk-id small { font-size: .7rem; }
.lock .btns .btn.wa { text-decoration: none; }
.spin-big { text-align: center; font-size: 26px; color: var(--accent); margin-top: 20px; }
.lic-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; font-size: .74rem; font-weight: 700; color: var(--teal); background: color-mix(in srgb, var(--teal-3) 14%, transparent); }
.lic-bar.warn { color: #a36b00; background: rgba(242,183,5,.18); }
.lic-bar span { flex: 1; }
.lic-bar a { font-weight: 800; text-decoration: underline; cursor: pointer; }
.gbtn { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 700; gap: 10px; }
:root[data-theme="dark"] .gbtn { background: #fff; color: #1f1f1f; }
.copy { text-align: center; font-size: .7rem; color: var(--faint); margin-top: 6px; letter-spacing: .02em; }

/* ---- v1.9.1 : cloche de notifications ---- */
.wtools .wr { display: flex; gap: 8px; }
.bell { position: relative; }
.bell .bdg { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #e52b2d; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.item.nt.new { background: color-mix(in srgb, var(--gold-2) 12%, transparent); }
.item.nt .s { font-size: .74rem; }

/* ---------- Vente MikPay ---------- */
.banner { padding: 11px 13px; border-radius: 14px; font-weight: 700; font-size: .84rem; margin-bottom: 10px; }
.banner.warn { background: rgba(242,183,5,.16); color: #8a5a00; }
.banner.bad { background: rgba(229,43,45,.1); color: var(--red); }
.banner.good { background: rgba(34,197,94,.13); color: #16a34a; }
:root[data-theme="dark"] .banner.warn { color: #ffd766; }
.banner .btn { display: flex; }
.btn.sm { height: 38px; font-size: .8rem; padding: 0 12px; border-radius: 11px; }
.link { color: var(--accent); font-weight: 700; font-size: .84rem; }
.tag.warn { color: #b45309; background: rgba(245,158,11,.16); }
.momo-hero { text-align: center; margin-bottom: 10px; }
.momo-hero > .i { font-size: 34px; color: var(--teal); background: var(--gold); width: 60px; height: 60px; padding: 13px; border-radius: 18px; margin-bottom: 8px; }
.momo-hero h2 { font-size: 1.05rem; margin-bottom: 4px; }
.momo-hero p { font-size: .84rem; }
.mzone { margin-bottom: 10px; }
.mz-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mz-h .ib { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); font-size: 17px; background: var(--soft); }
.mz-link { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: var(--soft); font-size: .76rem; word-break: break-all; }
.btns3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.btns3 .btn { padding: 0 6px; font-size: .72rem; gap: 4px; }
.mz-plan { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .86rem; }
.mz-plan:last-child { border: 0; }
.mz-plan .ib, .item .ib { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-size: 16px; }
.nav button { min-width: 0; }

/* ---------- Écran d'ouverture (logo animé 2 s) ---------- */
/* Écran de démarrage : fond blanc, logo + « MikAdmin » dessous ; fondu en entrée avec légère mise à l'échelle (95 % → 100 %), 800 ms, sans rebond */
#splash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; place-items: center; background: #fff; transition: opacity .45s ease, visibility .45s; }
#splash.out { opacity: 0; visibility: hidden; }
/* Animation du logo (≈ 1,2 s, sans rebond) : fondu + échelle 90 % → 100 % (0,7 s), puis un reflet qui traverse le logo une seule fois (0,5 s). */
#splash .sp-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#splash .sp-mark { position: relative; width: 132px; height: 132px; border-radius: 34px; overflow: hidden; box-shadow: 0 10px 28px -14px rgba(5,90,109,.35); animation: spLogoIn .7s ease-out both; }
#splash .sp-logo { display: block; width: 100%; height: 100%; }
#splash .sp-mark::after { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); animation: spShine .5s ease-in-out .7s both; }
#splash .sp-name { font-size: 2.24rem; font-weight: 800; letter-spacing: .02em; line-height: 1.1; text-align: center; color: var(--teal, #055a6d); animation: spNameIn .5s ease-out .3s both; }
@keyframes spLogoIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes spShine { from { opacity: 0; transform: translateX(-130%) skewX(-18deg); } 20% { opacity: 1; } 80% { opacity: 1; } to { opacity: 0; transform: translateX(380%) skewX(-18deg); } }
@keyframes spNameIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #splash .sp-mark, #splash .sp-mark::after, #splash .sp-name { animation: none; } #splash .sp-mark::after { display: none; } }
@keyframes spIn { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* ---------- Choix de la version du routeur ---------- */
.vcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vcard { text-align: left; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); }
.vcard b { display: block; font-size: .88rem; }
.vcard small { display: block; font-size: .7rem; color: var(--muted); margin-top: 3px; }
.vcard.on { border-color: var(--gold-2); background: rgba(242,183,5,.13); }
.item .end .up { color: #16a34a; font-weight: 700; }
.item .end .down { color: var(--red); font-weight: 700; }

/* ---------- Code secret (pavé numérique) ---------- */
.pinpad { text-align: center; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 14px 0 8px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); }
.pin-dots i.on { background: var(--accent); border-color: var(--accent); }
.pin-msg { min-height: 20px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.pin-msg.err { color: var(--red); }
.pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 290px; margin: 10px auto 4px; }
.pin-keys button { height: 58px; border-radius: 16px; font-size: 1.35rem; font-weight: 800; color: var(--ink); background: var(--soft); border: 1px solid var(--line); }
.pin-keys button:active { transform: scale(.95); background: var(--line); }
.pin-keys button.alt { font-size: .8rem; background: transparent; border-color: transparent; color: var(--accent); }
.vcard b .i { vertical-align: -3px; margin-right: 2px; }

/* ---------- 2.1.2 : choix de l'agrégateur, lien par forfait, VPN ---------- */
.pm-o { display: block; border: 2px solid var(--line); margin-bottom: 8px; cursor: pointer; }
.pm-o.on { border-color: var(--gold2, #f2b705); background: rgba(242, 183, 5, .12); }
.pm-o b { display: block; margin-bottom: 4px; }
.pm-o span { display: block; font-size: .82rem; line-height: 1.4; }
.mz-pl { display: block; word-break: break-all; font-size: .68rem; margin-top: 2px; }
.mz-plan > span:first-child { min-width: 0; }
.vpn-a { margin-bottom: 10px; }
.vpn-l { margin-top: 10px; border-top: 1px dashed var(--line); }
.vpn-r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .84rem; }
.vpn-r > span { color: var(--muted); flex-shrink: 0; }
.vpn-r > b { text-align: right; word-break: break-all; min-width: 0; }
.vpn-r > b .i { width: 14px; height: 14px; vertical-align: -2px; opacity: .7; }
.banner[data-act] { cursor: pointer; }

/* ================= 2.1.3 ================= */
.btn.green { color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 10px 22px -12px rgba(22,163,74,.9); }

/* Politique de confidentialité */
.priv { font-size: .84rem; line-height: 1.5; }
.priv h4 { font-size: .88rem; margin: 16px 0 4px; }
.priv p { margin: 6px 0; }
.priv ul { margin: 6px 0 6px 18px; display: grid; gap: 4px; }
.plink { display: block; text-align: center; font-size: .74rem; font-weight: 600; color: var(--muted); text-decoration: underline; margin-top: 12px; cursor: pointer; }

/* Pastille sur un onglet de la barre du bas */
.nav button .bdg { position: absolute; top: 6px; left: 50%; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #e52b2d; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--card); }

/* ---- Onglet MikPay : couleur au choix. --mm-1 clair, --mm-2 vif, --mm-3 foncé ---- */
body[data-mm] { --mm-1: #fdba74; --mm-2: #f97316; --mm-3: #c2410c; }
body[data-mm="marque"] { --mm-1: #F57A9C; --mm-2: #E8184F; --mm-3: #B80F3C; }
body[data-mm="bleu"] { --mm-1: #93c5fd; --mm-2: #3b82f6; --mm-3: #1d4ed8; }
body[data-mm="violet"] { --mm-1: #c4b5fd; --mm-2: #8b5cf6; --mm-3: #6d28d9; }
body[data-mm="vert"] { --mm-1: #86efac; --mm-2: #22c55e; --mm-3: #15803d; }
body[data-mm="rose"] { --mm-1: #fda4af; --mm-2: #f43f5e; --mm-3: #be123c; }
body[data-mm="classique"] { --mm-1: #67d9ee; --mm-2: #0fb3cf; --mm-3: #055a6d; }
body[data-mm] { --accent: var(--mm-3); --accent-ink: #fff; --soft: color-mix(in srgb, var(--mm-2) 9%, transparent); }
:root[data-theme="dark"] body[data-mm] { --accent: var(--mm-1); --accent-ink: #15110d; --soft: color-mix(in srgb, var(--mm-1) 10%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-mm] { --accent: var(--mm-1); --accent-ink: #15110d; --soft: color-mix(in srgb, var(--mm-1) 10%, transparent); } }
body[data-mm] .btn.pri { background: linear-gradient(135deg, color-mix(in srgb, var(--mm-2) 55%, var(--mm-3)), var(--mm-3)); box-shadow: 0 10px 22px -12px var(--mm-3); }
body[data-mm] .momo-hero > .i { color: #fff; background: linear-gradient(135deg, var(--mm-2), var(--mm-3)); }
body[data-mm] .stat.hl { background: linear-gradient(140deg, color-mix(in srgb, var(--mm-2) 55%, var(--mm-3)), var(--mm-3)); }
body[data-mm] .stat.hl .s-ico { color: var(--mm-3); background: #fff; }
body[data-mm] .search input:focus { border-color: var(--mm-2); }

.mm-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 16px 16px 14px; margin-bottom: 12px; color: #fff; cursor: default;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mm-2) 60%, var(--mm-3)), var(--mm-3) 72%); box-shadow: 0 18px 30px -20px var(--mm-3); }
.mm-hero[data-act] { cursor: pointer; }
.mm-hero::before, .mm-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.mm-hero::before { right: -46px; top: -58px; width: 180px; height: 180px; background: rgba(255,255,255,.11); }
.mm-hero::after { right: 54px; bottom: -70px; width: 130px; height: 130px; background: rgba(255,255,255,.07); }
.mm-hero > * { position: relative; z-index: 1; }
.mm-h-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; }
.mm-live { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 3px 9px; border-radius: 99px; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.17); }
.mm-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: mmPulse 1.7s infinite; }
@keyframes mmPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.mm-h-val { font-size: 2rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.15; margin-top: 8px; }
.mm-h-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: .82rem; }
.mm-trend { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; font-size: .7rem; font-weight: 800; background: rgba(255,255,255,.18); }
.mm-trend .i { font-size: 12px; }
.mm-h-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mm-hb { display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border-radius: 13px; font-weight: 800; font-size: .86rem; color: var(--mm-3); background: #fff; transition: transform .2s var(--spring); }
.mm-hb.alt { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); }
.mm-hb:active { transform: scale(.97); }

.mm-tile { padding: 12px; min-width: 0; animation: mmIn .5s var(--ease) backwards; }
.mm-grid .mm-tile:nth-child(2) { animation-delay: .05s; } .mm-grid .mm-tile:nth-child(3) { animation-delay: .1s; }
.mm-grid .mm-tile:nth-child(4) { animation-delay: .15s; } .mm-grid .mm-tile:nth-child(5) { animation-delay: .2s; }
@keyframes mmIn { from { opacity: 0; transform: translateY(10px); } }
.mm-ti { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; margin-bottom: 8px; color: var(--accent); background: var(--soft); }
.mm-tv { font-size: 1.18rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.mm-tl { font-size: .74rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.mm-tile.wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.mm-tile.wide .mm-ti { grid-row: span 2; margin-bottom: 0; }

.mm-sel { font-size: .78rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
body[data-mm] .bars-chart div { background: linear-gradient(to top, var(--mm-3), var(--mm-2)); opacity: .5; transform-origin: bottom; cursor: pointer; animation: mmGrow .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 14ms); transition: opacity .2s; }
body[data-mm] .bars-chart div.today { background: linear-gradient(to top, var(--gold-2), var(--gold)); opacity: 1; }
body[data-mm] .bars-chart div.on { opacity: 1; }
body[data-mm] .bars-chart div.on::after { content: ""; position: absolute; left: 50%; top: -8px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent); }
@keyframes mmGrow { from { transform: scaleY(0); } }
.mm-chart .bars-chart { margin-top: 14px; }
.mm-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: .66rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.mm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .74rem; color: var(--muted); }
.mm-foot b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mm-bar { height: 5px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 6px; }
.mm-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--mm-2), var(--mm-3)); transform-origin: left; animation: mmW .8s var(--ease) backwards; }
@keyframes mmW { from { transform: scaleX(0); } }

.mm-notes { border-left: 0; border: 0; border-radius: 16px; box-shadow: 0 2px 8px rgba(11,42,49,.09); margin-bottom: 12px; }
.mm-notes .item { align-items: flex-start; }
.mm-notes .item.new .t { color: var(--accent); }
.mm-x { flex-shrink: 0; width: 32px; height: 32px; margin: -5px -8px 0 0; border-radius: 10px; display: grid; place-items: center; font-size: 15px; color: var(--muted); }
.mm-x:active { background: var(--soft); }

.mm-colors { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--muted); }
.mm-colors div { display: flex; gap: 8px; }
.mm-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--line); transition: transform .2s var(--spring); }
.mm-dot.on { box-shadow: 0 0 0 2px var(--c); transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .mm-tile, .mm-bar i, .mm-live i, body[data-mm] .bars-chart div { animation: none; } }

/* ===== 2.1.4 ===== */
/* VPN : identité verte (onglet, boutons, pastilles) */
body[data-vp] { --accent: #15803d; --accent-ink: #fff; --soft: color-mix(in srgb, #22c55e 10%, transparent); }
:root[data-theme="dark"] body[data-vp] { --accent: #86efac; --accent-ink: #062611; --soft: color-mix(in srgb, #86efac 10%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-vp] { --accent: #86efac; --accent-ink: #062611; --soft: color-mix(in srgb, #86efac 10%, transparent); } }
body[data-vp] .btn.pri { color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 10px 22px -12px rgba(22,163,74,.9); }
body[data-vp] .momo-hero > .i { color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); }
body[data-vp] .stat.hl { background: linear-gradient(140deg, #22c55e, #15803d); }
body[data-vp] .stat.hl .s-ico { color: #15803d; background: #fff; }
body[data-vp] .seg button.on { color: #fff; background: #15803d; }
body[data-vp] .topbar { background: linear-gradient(135deg, #16a34a, #14532d); }
.btn.vghost { color: #15803d; background: rgba(34,197,94,.12); border: 1px solid rgba(22,163,74,.4); }
:root[data-theme="dark"] .btn.vghost { color: #86efac; }

/* Sous-catégories : la catégorie en haut, ses pages en dessous */
.seg.grp { gap: 8px; margin-bottom: 8px; }
.seg.grp button { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 14px; font-size: .86rem; }
.seg.grp button .i { font-size: 16px; }
.seg.sub { margin-bottom: 12px; }
.seg.sub button { padding: 6px 12px; font-size: .78rem; background: transparent; }
.seg.sub button.on { color: var(--accent); background: var(--soft); border-color: var(--accent); }
.view > .sec:first-child { margin-top: 2px; }

/* Entrée d'une page : les blocs montent l'un après l'autre (une fois par changement de page) */
@keyframes vIn { from { opacity: 0; transform: translateY(10px); } }
.view.enter > * { animation: vIn .34s var(--ease) both; }
.view.enter > :nth-child(2) { animation-delay: .04s; } .view.enter > :nth-child(3) { animation-delay: .08s; }
.view.enter > :nth-child(4) { animation-delay: .12s; } .view.enter > :nth-child(5) { animation-delay: .16s; }
.view.enter > :nth-child(n+6) { animation-delay: .2s; }
.view.enter > .fab { animation: none; }
.item, .act, .stat[data-act] { transition: transform .15s var(--ease); }
.item[data-act]:active, .act:active, .stat[data-act]:active { transform: scale(.975); }
.nav button:active .i { transform: scale(.88); }

/* Messages d'aide posés par l'administrateur */
.tips { max-width: 720px; margin: 0 auto; padding: 10px 14px 0; }
.tips:empty { display: none; }
.tips.in { padding: 0; margin-bottom: 8px; }
.tip { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 11px 38px 11px 11px; margin-bottom: 8px; border-radius: 4px 16px 16px 16px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 18px -16px rgba(0,0,0,.5); animation: vIn .3s var(--ease) both; }
.tip-a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, var(--teal-3, #0fb3cf), var(--teal, #055a6d)); }
.tip-b { min-width: 0; font-size: .82rem; line-height: 1.45; }
.tip-b b { display: block; font-size: .84rem; margin-bottom: 2px; }
.tip-b p { color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.tip-x { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; color: var(--faint); }
.tip-x:active { background: var(--soft); }
.tip-w { margin: 8px 2px 4px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }

/* Assistants en 5 étapes */
/* 2.6.19 : bannières « à configurer » (MikPay, PPPoE) réorganisées : icône + titre sur une ligne, texte et bouton sur toute la largeur */
.wz-card { display: block; margin-bottom: 10px; padding: 11px 12px; border: 1px dashed var(--accent); }
.wz-card .wz-h { display: flex; align-items: center; gap: 9px; }
.wz-card .wz-h > .i { font-size: 18px; width: 32px; height: 32px; padding: 7px; border-radius: 10px; flex-shrink: 0; color: var(--accent-ink); background: var(--accent); }
.wz-card .wz-h b { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.25; }
.wz-card p { font-size: .78rem; line-height: 1.35; margin: 6px 0 9px; }
.wz-card .btn { margin: 0; }
.wz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 12px; font-size: .74rem; font-weight: 800; color: var(--muted); }
.wz-dots { display: flex; gap: 5px; flex: 1; }
.wz-dots i { flex: 1; max-width: 46px; height: 5px; border-radius: 99px; background: var(--line); transition: background-color .3s; }
.wz-dots i.done { background: var(--accent); opacity: .45; } .wz-dots i.on { background: var(--accent); }
.wz-t { font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.wz-s { margin: 4px 0 12px; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.wz-b { animation: vIn .28s var(--ease) both; margin-top: 12px; }
.wz-opts { display: grid; gap: 8px; margin-bottom: 12px; }
.wz-o { position: relative; display: block; padding: 12px 12px 12px 42px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface, var(--card)); cursor: pointer; }
.wz-o input { position: absolute; left: 13px; top: 14px; width: 18px; height: 18px; accent-color: var(--accent); }
.wz-o b { display: block; font-size: .9rem; }
.wz-o span { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.wz-o.on { border-color: var(--accent); background: var(--soft); }
.wz-o.off { opacity: .6; cursor: default; }
.wz-p { display: grid; grid-template-columns: 22px 1fr 84px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.wz-p input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.wz-p input:not([type=checkbox]) { height: 44px; min-width: 0; padding: 0 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font: inherit; font-size: .9rem; }
.wz-p em { font-style: normal; font-weight: 800; color: var(--muted); }
.wz-rec, .wz-wg { margin-bottom: 12px; }
.wz-r { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .84rem; }
.wz-r:last-child { border: 0; }
.wz-r span { color: var(--muted); flex-shrink: 0; }
.wz-r b { text-align: right; overflow-wrap: anywhere; }
.wz-wg b { display: block; font-size: .78rem; margin: 2px 0 6px; }
.wz-wg div { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.wz-wg div:last-child { margin-bottom: 0; }
.wz-wg .mono { padding: 3px 8px; border-radius: 8px; font-size: .72rem; background: var(--soft); overflow-wrap: anywhere; }
.vchk { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; font-size: .82rem; font-weight: 700; color: var(--muted); background: var(--soft); }
.banner .i { vertical-align: -3px; }

/* Félicitations (3 secondes) */
.bravo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff; background: linear-gradient(160deg, #0f766e, #14532d 70%); opacity: 0; transition: opacity .3s; overflow: hidden; }
.bravo.on { opacity: 1; }
.bravo-b { position: relative; }
.bravo-i { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; color: #14532d; background: #fde047; box-shadow: 0 0 0 0 rgba(253,224,71,.6); animation: spIn .55s var(--spring) both, brPulse 1.4s .6s ease-out infinite; }
.bravo h2 { font-size: 1.7rem; font-weight: 850; letter-spacing: -.02em; animation: vIn .5s .25s var(--ease) both; }
.bravo p { margin-top: 8px; font-size: 1.05rem; font-weight: 700; opacity: .95; animation: vIn .5s .45s var(--ease) both; }
@keyframes brPulse { to { box-shadow: 0 0 0 26px rgba(253,224,71,0); } }
.bravo-c { position: absolute; inset: 0; pointer-events: none; }
.bravo-c i { position: absolute; top: -12px; left: calc(var(--k) * 7.3% + 2%); width: 9px; height: 15px; border-radius: 3px; background: hsl(calc(var(--k) * 47), 90%, 62%); animation: brFall calc(1.9s + var(--k) * .09s) calc(var(--k) * .11s) linear infinite; }
@keyframes brFall { to { transform: translateY(calc(105vh / var(--zm))) rotate(calc(260deg + var(--k) * 40deg)); } }

@media (prefers-reduced-motion: reduce) { .view.enter > *, .tip, .wz-b, .bravo h2, .bravo p, .bravo-i, .bravo-c i { animation: none; } .bravo-c { display: none; } }

/* 2.1.7 : VPN lié à un routeur, autres routeurs (petite fenêtre), VPN global */
.banner.ok { background: rgba(18,160,90,.12); color: #0b7a45; display: flex; align-items: center; gap: 8px; }
:root[data-theme="dark"] .banner.ok { color: #6fe0a6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner.ok { color: #6fe0a6; } }
.banner.ok .i { width: 18px; height: 18px; flex-shrink: 0; }
.vpn-rid { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.vpn-rid .i { width: 13px; height: 13px; opacity: .7; }
.sec .btn.sm { margin-left: auto; }
.sheet.compact .box { max-height: calc(62vh / var(--zm)); }
.vpn-others .end.vpn-ch { display: flex; gap: 6px; flex-direction: row; align-items: center; }
.vpn-others .item { cursor: default; }
/* 2.1.8 : choix du protocole VPN, script pour le Terminal */
#vpp .item.off { opacity: .55; }
.vscript { white-space: pre-wrap; word-break: break-all; font-size: .74rem; line-height: 1.45; background: var(--soft); color: var(--ink); padding: 10px 12px; border-radius: 12px; max-height: calc(45vh / var(--zm)); overflow: auto; margin: 10px 0; }
.vpn-ver { margin-top: 6px; font-size: .8rem; }
/* 2.1.8 : Hotspot › Réglages */
.hs-cfg { margin-bottom: 12px; }
.hs-cfg .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-cfg .row2 > .f { min-width: 0; }
/* 2.1.8 : remise à zéro, sélection multiple */
.selbar { margin-bottom: 8px; display: flex; justify-content: flex-end; }
.selbar:empty { display: none; }
.selbar .batchbar { width: 100%; margin-bottom: 0; }
.batchbar button.pri { background: var(--accent); color: #fff; }
.batchbar button[disabled] { opacity: .5; }
.item.picked { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.acts .act.hot { color: var(--accent); font-weight: 800; box-shadow: inset 0 0 0 2px var(--accent); }

/* 2.1.8 : PPPoE page d'expiration */
.wz-run { display: flex; align-items: center; gap: 12px; }
.spin-s { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 3px solid var(--soft); border-top-color: var(--accent); animation: rot .8s linear infinite; }
.px-hero p { margin: 8px 0 0; }
.px-link { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.px-adv { margin: 12px 0 6px; } .px-adv summary { cursor: pointer; font-size: .78rem; font-weight: 700; opacity: .7; padding: 6px 2px; } .px-adv[open] summary { margin-bottom: 6px; }
.px-u { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.px-u b { overflow-wrap: anywhere; }
.px-logo { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.px-lg { width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.px-lg img { width: 100%; height: 100%; object-fit: cover; }
.px-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 12px; }
.px-im { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.px-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-im button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; }
.px-im button svg { width: 14px; height: 14px; }
.px-add { aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--line); color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .78rem; font-weight: 700; background: none; }

/* 2.1.8 : Ventes, rapports façon Mikhmon */
.sc-anim > * { animation: scIn .38s var(--ease) both; }
.sc-anim > *:nth-child(2) { animation-delay: 30ms; } .sc-anim > *:nth-child(3) { animation-delay: 60ms; } .sc-anim > *:nth-child(4) { animation-delay: 90ms; } .sc-anim > *:nth-child(5) { animation-delay: 120ms; } .sc-anim > *:nth-child(n+6) { animation-delay: 150ms; }
@keyframes scIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sc-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.sc-nav input, .sc-nav select { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0 10px; font: inherit; font-weight: 700; text-align: center; }
.sc-nav .btn { flex-shrink: 0; width: 40px; padding: 0; height: 40px; }
.sc-dd { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.sc-dd input { flex: 1; min-width: 0; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0 8px; font: inherit; }
.sc-dd span { color: var(--muted); font-weight: 700; }
.sc-title { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; margin: 2px 2px 10px; }
.sc-title b { font-size: 1.02rem; } .sc-title .muted { font-size: .78rem; flex-basis: 100%; }
.sc-cards { margin-bottom: 12px; }
.sc-c { cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease); position: relative; min-width: 0; }
.sc-c:active { transform: scale(.97); }
.sc-c.on { box-shadow: 0 0 0 2px var(--accent), 0 10px 24px -16px rgba(5,40,48,.5); }
.sc-c .s-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-c.sc-p .s-val, .sc-c.sc-b .s-val { font-size: 1.05rem; }
.s-cmp { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-top: 4px; font-size: .74rem; font-variant-numeric: tabular-nums; }
.s-cmp small { opacity: .75; }
.sc-d { font-weight: 800; padding: 1px 6px; border-radius: 99px; background: var(--soft); }
.sc-d.up { color: var(--ok); background: rgba(22,163,74,.13); } .sc-d.down { color: var(--red); background: rgba(229,43,45,.12); }
.stat.hl .sc-d.up { color: #b7f7cd; background: rgba(255,255,255,.14); } .stat.hl .sc-d.down { color: #ffd0d0; background: rgba(255,255,255,.14); }
.stat.gold .sc-d.up { color: #0f6b30; background: rgba(11,42,49,.08); } .stat.gold .sc-d.down { color: #a3171a; background: rgba(11,42,49,.08); }
.sc-chart { margin-bottom: 12px; }
.sc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.sc-head b { font-size: .86rem; min-width: 0; }
.sc-tg { display: inline-flex; background: var(--soft); border-radius: 99px; padding: 3px; flex-shrink: 0; }
.sc-tg button { border: 0; background: none; color: var(--muted); font: inherit; font-size: .74rem; font-weight: 800; padding: 5px 10px; border-radius: 99px; cursor: pointer; }
.sc-tg button.on { background: var(--card); color: var(--accent); box-shadow: 0 2px 6px -3px rgba(0,0,0,.3); }
.sc-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.sc-svg .gl { stroke: var(--line); stroke-dasharray: 3 4; } .sc-svg .ax { stroke: var(--line); }
.sc-svg text { fill: var(--muted); font-size: 9.5px; font-family: inherit; font-variant-numeric: tabular-nums; } .sc-svg text.mx { font-weight: 700; }
.sc-svg .sbar { fill: var(--accent); opacity: .55; transform-box: fill-box; transform-origin: 50% 100%; animation: scBar .55s var(--ease) both; transition: opacity .15s; }
.sc-svg .sbar.on { opacity: 1; fill: var(--gold-2); }
@keyframes scBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sc-svg .ln { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1400; animation: scLn .9s var(--ease) both; }
@keyframes scLn { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
.sc-svg .ar { fill: var(--accent); opacity: .1; }
.sc-svg .dot { fill: var(--card); stroke: var(--accent); stroke-width: 1.6; } .sc-svg .dot.on { fill: var(--gold-2); stroke: var(--gold-2); }
.sc-svg .pl { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .7; }
.sc-svg .hit { fill: transparent; cursor: pointer; }
.sc-lgd { display: flex; gap: 14px; flex-wrap: wrap; font-size: .72rem; color: var(--muted); margin-top: 6px; }
.sc-lgd i { display: inline-block; width: 14px; height: 0; border-top: 3px solid var(--accent); vertical-align: middle; margin-right: 5px; border-radius: 2px; }
.sc-lgd i.prv { border-top: 2px dashed var(--muted); }
.sc-tip { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 8px; padding: 9px 11px; border-radius: 12px; background: var(--soft); font-size: .8rem; min-height: 40px; font-variant-numeric: tabular-nums; }
.sc-tip .btn { margin-left: auto; }
.sc-donut { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sc-ring { width: 128px; height: 128px; flex-shrink: 0; transform: rotate(0deg); animation: scIn .5s var(--ease) both; }
.sc-ring circle[data-prof] { cursor: pointer; transition: stroke-width .15s; } .sc-ring circle[data-prof]:hover { stroke-width: 8; }
.sc-ring-bg { stroke: var(--soft); }
.sc-leg { flex: 1; min-width: 170px; display: grid; gap: 4px; }
.sc-li { display: grid; grid-template-columns: 10px 1fr auto; grid-template-areas: "c n p" ". s s"; column-gap: 8px; align-items: center; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; padding: 5px 6px; border-radius: 10px; cursor: pointer; }
.sc-li:hover:not(:disabled) { background: var(--soft); } .sc-li:disabled { cursor: default; }
.sc-li i { grid-area: c; width: 10px; height: 10px; border-radius: 3px; } .sc-li span { grid-area: n; font-weight: 700; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-li b { grid-area: p; font-size: .84rem; font-variant-numeric: tabular-nums; } .sc-li small { grid-area: s; color: var(--muted); font-size: .72rem; }
.sec .sc-tg { margin-left: auto; }
.sc-sum .item { cursor: pointer; } .sc-sum .item.sc-tot { background: var(--soft); }
.sc-bar { height: 4px; border-radius: 4px; background: var(--soft); margin-top: 5px; overflow: hidden; }
.sc-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; animation: scW .6s var(--ease) both; transform-origin: left; }
@keyframes scW { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.item.sd .sd-x { font-size: .72rem; } .item.sd .sd-c { font-size: .74rem; font-style: italic; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .sc-anim > *, .sc-svg .sbar, .sc-svg .ln, .sc-bar i, .sc-ring { animation: none; } }

/* 2.1.9 : MikPay › Tableau compact, points de vente repliés */
.mm-tt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mm-tt .mm-tl { margin: 0; min-width: 0; }
.mm-tt .mm-ti { width: 28px; height: 28px; margin: 0; font-size: 14px; flex-shrink: 0; }
.mm-tile.wide { display: block; }
.mm-tile.wide .mm-ti { grid-row: auto; }
.mm-tn { font-size: .7rem; color: var(--muted); margin-top: 2px; }
.mm-zs { margin-top: 12px; }
.mm-zs .mm-zt { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; }
.mm-zs .mm-zt .end svg { transition: transform .2s var(--ease); }
.mm-zs.open .mm-zt .end svg { transform: rotate(90deg); }
.mz-c .item { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; }
.mz-c .item .s { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mz-x { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mz-x b { flex: 1; min-width: 0; font-size: 1rem; }
.mz-x > svg:first-child { color: var(--accent); }
.mz-x > svg:last-child { transform: rotate(90deg); color: var(--muted); }
.mzone.mz-o { margin-bottom: 0; }
.mz-plans { margin: 8px 0 12px; }

/* 2.1.9 : Plus › bloc « Routeurs » replié ; sons par type */
.mr-box .mr-h { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; }
.mr-box .mr-h .end svg { transition: transform .2s var(--ease); }
.mr-box.open .mr-h .end svg { transform: rotate(90deg); }
.mr-box .mr-in { border-top: 1px solid var(--line); animation: mmIn .3s var(--ease) both; }
.mr-lk { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }
.snd-t .end { display: flex; align-items: center; gap: 4px; }
.snd-t .snd-n { font-size: .8rem; color: var(--accent); }

/* 2.1.9 : écran du code secret (plein écran, dégradé, grandes touches rondes) */
.sheet.pin { align-items: stretch; background: rgba(2,12,15,.4); }
.sheet.pin .box { max-width: none; height: 100%; max-height: none; border-radius: 0; color: #fff;
  background: radial-gradient(120% 70% at 50% 0%, #0fb3cf 0%, #087891 32%, #055a6d 62%, #04161b 100%); }
.sheet.pin .hd { padding-top: calc(14px + var(--safe-t, 0px)); }
.sheet.pin .hd::before, .sheet.pin .hd h2 { visibility: hidden; }
.sheet.pin .hd button { background: rgba(255,255,255,.14); color: #fff; }
.sheet.pin .bd { display: flex; flex-direction: column; flex: 1; padding-bottom: calc(18px + var(--safe-b)); }
.pinpad { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 0; }
.pin-top { text-align: center; padding: 0 10px; }
.pin-logo { width: 64px; height: 64px; border-radius: 18px; display: block; margin: 0 auto 12px; box-shadow: 0 14px 28px -12px rgba(0,0,0,.6), 0 0 0 3px rgba(255,215,0,.5); }
.pin-title { font-size: 1.28rem; font-weight: 850; letter-spacing: -.01em; text-wrap: balance; }
.pin-sub { font-size: .84rem; opacity: .82; margin-top: 4px; max-width: 300px; }
.sheet.pin .pin-dots { gap: 16px; margin: 22px 0 6px; }
.sheet.pin .pin-dots i { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.7); background: transparent; transition: background .15s, border-color .15s; }
.sheet.pin .pin-dots i.on { background: #ffd700; border-color: #ffd700; animation: pinPop .32s var(--spring) both; }
@keyframes pinPop { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.sheet.pin .pin-dots.bad { animation: pinShake .42s cubic-bezier(.36,.07,.19,.97) both; }
.sheet.pin .pin-dots.bad i { border-color: #ff6b6b; background: rgba(255,107,107,.35); }
.sheet.pin .pin-dots.good i { border-color: #4ade80; background: #4ade80; transform: scale(1.15); transition: transform .25s var(--spring), background .2s; }
@keyframes pinShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
.sheet.pin .pin-msg { color: rgba(255,255,255,.85); min-height: 22px; }
.sheet.pin .pin-msg.err { color: #ffb4b4; }
.sheet.pin .pin-keys { gap: 14px 22px; max-width: 300px; width: 100%; margin: 14px auto 6px; }
.sheet.pin .pin-keys button { width: 74px; height: 74px; justify-self: center; border-radius: 50%; font-size: 1.7rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  transition: transform .12s var(--ease), background .12s; -webkit-tap-highlight-color: transparent; }
.sheet.pin .pin-keys button:active { transform: scale(.9); background: rgba(255,255,255,.3); }
.sheet.pin .pin-keys button.alt { background: transparent; border-color: transparent; font-size: 1.5rem; }
.sheet.pin .pin-keys button.bio svg { width: 34px; height: 34px; color: #ffd700; }
.pin-forgot { margin-top: 10px; background: none; border: 0; color: rgba(255,255,255,.75); font: inherit; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; padding: 8px; }
@media (max-height: 640px) { .sheet.pin .hd { padding-top: calc(8px + var(--safe-t, 0px)); padding-bottom: 0; } .sheet.pin .pin-keys { gap: 8px 18px; margin-top: 8px; } .sheet.pin .pin-keys button { width: 54px; height: 54px; font-size: 1.3rem; } .pin-logo { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 6px; } .pin-title { font-size: 1.1rem; } .sheet.pin .pin-dots { margin: 10px 0 4px; } .pin-forgot { margin-top: 2px; padding: 4px; } }
@media (max-width: 340px) { .sheet.pin .pin-keys { gap: 10px 14px; } .sheet.pin .pin-keys button { width: 62px; height: 62px; } }
@media (prefers-reduced-motion: reduce) { .sheet.pin .pin-dots i.on, .sheet.pin .pin-dots.bad { animation: none; } }

/* 2.2.1 : aperçu avant impression des tickets */
.prv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; font-size: .84rem; }
.prv-bar .ib:disabled { opacity: .35; }
.prv { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; position: relative; }
.prv iframe { width: 794px; height: 1123px; border: 0; background: #fff; transform-origin: 0 0; display: block; pointer-events: none; }

/* 2.2.1 : boutons « Contacter par WhatsApp » de la page VPN */
.vpn-wa { margin-top: 10px; } .vpn-wa .btn { flex: 1; min-width: 0; gap: 8px; color: #128c7e; } .vpn-wa .btn span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.vpn-wa .btn small { font-size: .7rem; font-weight: 600; color: var(--muted); }

/* ===== 2.3.0 : Momo — accueil par groupes, tableau par routeur, cumul, tableau global, retrait ; photos de la page PPPoE ===== */
/* 2.4.0 : tableau Momo — espacement régulier entre les cartes, les textes, les icônes et les chiffres (rien ne se chevauche) */
.mm-c { display: flex; flex-direction: column; gap: 10px; }
.mm-d { display: flex; flex-direction: column; gap: 12px; }
.mm-d > * { margin: 0 !important; min-width: 0; }
.mm-d > .grid { gap: 10px; }
.mm-d .sec { margin: 4px 0 -4px !important; }
.mm-d .mm-hero { margin: 0; }
.mm-d .mm-h-val { overflow-wrap: anywhere; }
.mm-d .mm-h-sub { row-gap: 6px; }
.mm-d .mm-h-btns { gap: 10px; }
.mm-d .mm-tile { min-width: 0; }
.mm-d .item .main { min-width: 0; }
/* 2.4.0 : cartes de chiffres sur une seule ligne : icône, nombre, libellé ; la mention « net » dessous avec son icône */
.mm-tile.mm-line { grid-column: 1 / -1; display: block; padding: 10px 12px; }
.mm-l1 { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.mm-l1 .mm-ti { width: 30px; height: 30px; margin: 0; flex-shrink: 0; font-size: 15px; }
.mm-l1 .mm-tv { flex-shrink: 0; font-size: 1.12rem; margin: 0; line-height: 1.2; }
.mm-l1 .mm-tl { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: clamp(.72rem, calc(3.3vw / var(--zm)), .84rem); }
.mm-line .mm-tn { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-left: 40px; font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-line .mm-tn .i { width: 14px; height: 14px; flex-shrink: 0; color: var(--ok); }
/* routeur choisi */
.mm-rn { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink); } .mm-rn svg { width: 16px; height: 16px; color: var(--accent); } .mm-rn b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-rt { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-rt .chip { font-size: .78rem; }
/* carte « Total de tous les routeurs » */
.mm-cum { padding: 10px 12px; cursor: pointer; border: 0; border-radius: 16px; box-shadow: 0 2px 8px rgba(11,42,49,.09); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; -webkit-tap-highlight-color: transparent; }
.mm-cum:active { transform: scale(.99); }
.mm-cum-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.mm-cum-h .mm-ti { width: 28px; height: 28px; margin: 0; font-size: 14px; flex-shrink: 0; }
.mm-cum-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .mm-cum-t b { font-size: .86rem; } .mm-cum-t small { font-size: .75rem; color: var(--muted); }
.mm-cum-go { color: var(--muted); display: grid; place-items: center; width: 24px; height: 24px; } .mm-cum-go svg { width: 16px; height: 16px; }
.mm-cum-v { font-size: .8rem; color: var(--muted); min-width: 0; } .mm-cum-v b { color: var(--ink); font-size: .95rem; }
.mm-cum-s { display: inline-flex; border-radius: 10px; background: var(--soft); padding: 2px; }
.mm-cum-s button { min-width: 44px; min-height: 34px; padding: 0 10px; border-radius: 8px; font-size: .78rem; font-weight: 800; color: var(--muted); }
.mm-cum-s button.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.mm-cum-r { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .mm-cum-r::-webkit-scrollbar { display: none; }
.mm-cum-r span { flex: 0 0 auto; min-width: 84px; display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-radius: 9px; background: var(--soft); line-height: 1.25; }
.mm-cum-r i { font-style: normal; font-size: .75rem; color: var(--muted); } .mm-cum-r b { font-size: .82rem; } .mm-cum-r small { font-size: .75rem; color: var(--muted); }
/* 2.4.0 : catégories compactes, alignées, sans débordement, avec un bouton Retour (Hotspot, Ventes, Momo) */
.seg.cb, .chips.cb { flex-wrap: wrap; overflow: visible; margin: 0 0 8px; padding: 0; gap: 5px; align-items: center; }
.seg.cb button, .chips.cb .chip { padding: 5px 11px; min-height: 32px; font-size: .78rem; }
.seg.grp.cb button { flex: 0 1 auto; padding: 6px 11px; border-radius: 99px; font-size: .78rem; gap: 5px; }
.seg.grp.cb button .i { font-size: 14px; width: 14px; height: 14px; }
.seg.sub.cb { margin-top: -2px; }
.cb button.cb-back, .seg.grp.cb button.cb-back { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 11px 4px 7px; border-radius: 99px; font-size: .78rem; font-weight: 800; color: var(--accent); background: var(--soft); border: 1px solid var(--accent); flex-shrink: 0; }
.cb-back .i { width: 14px; height: 14px; }
.cb button.cb-back.on { color: var(--accent); }
/* retrait : confirmation du numéro */
.mm-wdc { text-align: center; } .mm-wdn { font-size: 1.5rem; font-weight: 850; letter-spacing: .02em; margin: 6px 0 2px; } .mm-wdm { font-size: .84rem; color: var(--muted); margin-bottom: 10px; }
/* photos de la page d'expiration : progression et messages */
.px-prog { margin: 0 0 10px; } .px-prog .prog { margin: 0 0 4px; } .px-prog small { font-size: .78rem; color: var(--muted); }
.px-msg { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; font-size: .82rem; font-weight: 600; } .px-msg.ok { background: rgba(34,197,94,.14); color: #15803d; } .px-msg.err { background: rgba(229,43,45,.12); color: var(--red); }
.px-im .rp { right: auto; left: 4px; } .px-im button { width: 30px; height: 30px; }
:root[data-theme="dark"] .px-msg.ok { color: #86efac; }
#mmCards { display: flex; flex-direction: column; gap: 12px; }
#mmCards > * { margin: 0 !important; }
#mmCards > .sec { margin: 4px 0 -4px !important; }
.mm-d .mm-hb, .mm-hero .mm-hb { white-space: nowrap; min-width: 0; font-size: clamp(.74rem, calc(3.5vw / var(--zm)), .86rem); padding: 0 8px; }
.mm-d .mm-hb .i { flex-shrink: 0; }
.mm-d .mm-hero { box-shadow: 0 8px 16px -14px var(--mm-3); }
#mmCards { gap: 14px; }
.seg.grp.cb { gap: 4px; margin-bottom: 6px; }
.seg.grp.cb button { padding: 5px 10px; min-height: 30px; }
.seg.sub.cb button { min-height: 30px; padding: 4px 10px; }

/* =====================================================================
 * 2.5.0 — densité réduite sur toute l'application (y compris Hotspot),
 * moins de défilement, cartes alignées, bouton Retour en icône seule,
 * cartes Momo « Total de tickets vendus » / « Chiffre d'affaires » côte à côte
 * ===================================================================== */
body { font-size: 12px; }
.view { padding: 7px 9px calc(var(--nav-h) + 12px); }
.card + .card, .card + .grid, .grid + .card, .grid + .grid, .sec + .card, .card + .sec, .grid + .sec { margin-top: 7px; }
.grid, .mm-grid { gap: 6px; align-items: stretch; }
/* l'espacement entre cartes d'une même grille vient du « gap », jamais de la marge pensée pour l'empilement vertical
   (sinon la 2e carte d'une rangée est poussée vers le bas et s'étire moins que la 1re) */
.grid > .card + .card { margin-top: 0; }
.pad { padding: 9px; }
.sec { margin: 8px 2px 4px; }
.sec h3 { font-size: .64rem; }
.btn { height: 34px; font-size: .78rem; padding: 0 11px; border-radius: 9px; }
.btn.sm { height: 30px; font-size: .74rem; }
.f { margin-bottom: 7px; }
.f label { font-size: .66rem; margin-bottom: 2px; }
.f input, .f select { height: 34px; font-size: .82rem; padding: 0 9px; }
.f textarea { height: 76px; }
.item { padding: 5px 9px; gap: 7px; }
.item .av { width: 26px; height: 26px; font-size: 12px; }
.item .t { font-size: .82rem; }
.item .s { font-size: .66rem; }
.stat { padding: 8px 9px; }
.stat .s-ico { width: 22px; height: 22px; font-size: 12px; margin-bottom: 4px; }
.stat .s-val { font-size: .98rem; }
.stat .s-lab { font-size: .64rem; }
.seg { margin: 0 -9px 7px; padding: 0 9px; gap: 4px; }
.seg button { padding: 4px 9px; font-size: .7rem; }
.chips { margin: 0 -9px 7px; padding: 0 9px; }
.chip { padding: 3px 8px; font-size: .68rem; }
.mm-tile { padding: 9px; }
.mm-ti { width: 26px; height: 26px; font-size: 13px; margin-bottom: 5px; }
.mm-tv { font-size: 1.05rem; }
.mm-tl { font-size: .68rem; }
.btns { gap: 6px; margin-top: 10px; }
.acts { gap: 6px; margin-top: 10px; }
.act { padding: 7px 4px; font-size: .64rem; }
.welcome { padding: calc(10px + var(--safe-t)) 12px 12px; }
.welcome .logo { width: 46px; height: 46px; margin-bottom: 7px; }
.welcome h1 { font-size: 1.1rem; }
.welcome p { font-size: .72rem; }
.rcard { padding: 8px 9px; gap: 8px; }
.rcard .av { width: 30px; height: 30px; font-size: 15px; }

/* Catégories compactes : encore plus denses, alignées sur une ligne, sous-menus en dessous */
.seg.cb, .chips.cb { gap: 4px; }
.seg.cb button, .chips.cb .chip { padding: 4px 10px; min-height: 28px; font-size: .74rem; }
.seg.grp.cb button { padding: 4px 9px; min-height: 28px; font-size: .74rem; }
.seg.sub.cb button { min-height: 26px; padding: 3px 9px; font-size: .72rem; }

/* Bouton Retour : icône seule (sans le mot « Retour »), partout */
.cb-back, .seg.grp.cb button.cb-back { padding: 4px; width: 28px; min-height: 28px; justify-content: center; }
.cb-back .i { width: 15px; height: 15px; margin: 0; }
.mm-hb.back-ic { padding: 0; }


/* Cartes Momo « Total de tickets vendus » et « Chiffre d'affaires » : côte à côte, même taille (annule le plein-largeur de la 2.4.0) */
.mm-tile.mm-line { grid-column: auto; display: flex; flex-direction: column; justify-content: center; padding: 9px 10px; min-width: 0; }
.mm-l1 { gap: 6px; min-width: 0; }
.mm-l1 .mm-ti { width: 24px; height: 24px; font-size: 12px; }
.mm-l1 .mm-tv { font-size: .92rem; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.mm-l1 .mm-tl { font-size: .64rem; }

/* ---------- 2.5.4 : Tiroir latéral translucide (remplace les onglets de catégories en haut de Hotspot / PPPoE / MikPay) ---------- */
.dw-trig { margin-right: -2px; }
.dw-ovl {
  position: fixed; inset: 0; z-index: 45; background: rgba(2,12,15,.55);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s;
}
.dw-ovl.on { opacity: 1; visibility: visible; }
.dw-panel {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 46; width: min(84%, 310px);
  display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(-100%); transition: transform .32s var(--ease);
  background: linear-gradient(165deg, rgba(10,47,57,.86), rgba(3,19,24,.93));
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border-right: 1px solid rgba(255,255,255,.08); border-radius: 0 22px 22px 0;
  box-shadow: 18px 0 46px -22px rgba(0,0,0,.65); color: #eaf7f9;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
}
.dw-panel.on { transform: translateX(0); }
.dw-hd { display: flex; align-items: center; gap: 10px; padding: calc(16px + var(--safe-t, 0px)) 14px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.dw-ico { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 20px; }
.dw-txt { flex: 1; min-width: 0; }
.dw-title { font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-sub { font-size: .72rem; opacity: .78; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; margin-top: 2px; }
.dw-x { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; }
.dw-nav { flex: 1; padding: 10px 10px calc(14px + var(--safe-b, 0px)); }
.dw-sec { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .55; margin: 14px 10px 6px; }
.dw-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; margin-bottom: 2px;
  border-radius: 14px; font-size: .88rem; font-weight: 650; color: rgba(255,255,255,.84); text-align: left;
}
.dw-item .i { font-size: 18px; flex-shrink: 0; }
.dw-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-item.on { color: var(--accent-ink); background: var(--accent); border: 1px solid transparent; }
.dw-item.back { opacity: .82; margin-bottom: 8px; }
.dw-item .cnt { flex: 0 0 auto; padding: 1px 7px; border-radius: 99px; font-size: .68rem; background: rgba(255,255,255,.16); }
.dw-item:active, .dw-fhead:active { background: rgba(255,255,255,.1); }
.dw-folder { margin-bottom: 2px; }
.dw-fhead { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 14px; font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.9); }
.dw-fhead .i:first-child { font-size: 18px; flex-shrink: 0; }
.dw-fhead span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.dw-car { font-size: 14px; flex-shrink: 0; transition: transform .25s var(--ease); opacity: .6; }
.dw-folder.open .dw-car { transform: rotate(90deg); }
.dw-fbody { max-height: 0; overflow: hidden; transition: max-height .28s var(--ease); padding-left: 10px; }
.dw-folder.open .dw-fbody { max-height: 400px; }
.dw-fbody .dw-item { padding: 9px 12px 9px 28px; font-size: .84rem; }
@media (max-width: 340px) { .dw-panel { width: 88%; } }
.mm-line .mm-tn { padding-left: 30px; font-size: .66rem; }

/* ---------- Plus : grandes catégories repliables (fermées par défaut, flèche à droite) ---------- */
.mg { margin-top: 8px; overflow: hidden; }
.mg .mg-h { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; }
.mg .mg-h .end svg { transition: transform .2s var(--ease); }
.mg.open .mg-h .end svg { transform: rotate(90deg); }
.mg .mg-b { display: none; border-top: 1px solid var(--line); }
.mg.open .mg-b { display: block; animation: mmIn .3s var(--ease) both; }

/* ---------- Hotspot : menu latéral compact (style Mikhmon : lignes serrées, petites icônes, sous-menus avec flèche) ---------- */
.dw-panel.dw-c { width: min(70%, 252px); }
.dw-c .dw-hd { padding: calc(10px + var(--safe-t, 0px)) 10px 8px; gap: 8px; }
.dw-c .dw-ico { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
.dw-c .dw-title { font-size: .84rem; }
.dw-c .dw-sub { font-size: .64rem; margin-top: 1px; }
.dw-c .dw-x { width: 26px; height: 26px; border-radius: 8px; }
.dw-c .dw-nav { padding: 6px 6px calc(10px + var(--safe-b, 0px)); }
.dw-c .dw-sec { font-size: .58rem; margin: 8px 8px 3px; }
.dw-c .dw-item, .dw-c .dw-fhead { padding: 6px 9px; gap: 8px; min-height: 34px; font-size: .78rem; border-radius: 9px; margin-bottom: 1px; }
.dw-c .dw-item .i, .dw-c .dw-fhead .i:first-child { font-size: 15px; }
.dw-c .dw-fbody { padding-left: 6px; }
.dw-c .dw-fbody .dw-item { padding: 5px 9px 5px 26px; min-height: 30px; font-size: .74rem; }
.dw-c .dw-item.back { margin-bottom: 4px; }
.dw-c .dw-car { font-size: 12px; }
.dw-c .dw-item .cnt { font-size: .6rem; padding: 0 6px; }

/* Hotspot › Utilisateurs : nombre de tickets en haut, puis une seule ligne (recherche, profil, commentaire, sélectionner) */
.hu-count { display: flex; align-items: center; gap: 6px; margin: 0 2px 6px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.hu-count .i { font-size: 15px; color: var(--accent); }
.hu-count b { font-size: 1.05rem; color: var(--ink); }
.tools.hu-row { flex-wrap: nowrap; gap: 4px; margin-bottom: 6px; align-items: center; }
.hu-row .search { flex: 1.15 1 0; min-width: 0; }
.hu-row .search .i { left: 7px; font-size: 14px; }
.hu-row .search input { height: 34px; padding: 0 4px 0 25px; border-radius: 10px; font-size: .72rem; }
.hu-row .filter { flex: 1 1 0; min-width: 0; max-width: none; height: 34px; padding: 0 3px; border-radius: 10px; font-size: .7rem; text-overflow: ellipsis; }
.hu-row .hu-sel { flex: 0 0 auto; height: 34px; padding: 0 7px; gap: 4px; border-radius: 10px; font-size: .7rem; }
.hu-row .hu-sel .i { font-size: 13px; }
.hu-row .hu-sel.on { color: var(--accent); border-color: var(--accent); }

/* Hotspot › Utilisateurs : présentation « Mikhmon » (barre de menus, boutons d'impression, tableau compact) */
#hbatch .batchbar { flex-wrap: wrap; }
.tk-wrap { overflow: hidden; }
.tk-sc { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tk-sc::-webkit-scrollbar { display: none; height: 0; }
.tk { width: 100%; min-width: 600px; border-collapse: collapse; font-size: .72rem; }
.tk th { padding: 6px 6px; text-align: left; font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); background: var(--soft); white-space: nowrap; border-bottom: 1px solid var(--line); }
.tk th.tk-n { text-align: center; color: var(--ink); font-size: .78rem; }
.tk td { padding: 3px 6px; height: 34px; vertical-align: middle; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tk tr:last-child td { border-bottom: 0; }
.tk tr.dis td { opacity: .55; }
.tk tr.picked td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tk .tk-a { width: 62px; text-align: center; }
.tk-i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; margin: 0 1px; font-size: 14px; color: var(--muted); background: var(--soft); }
.tk-i.red { color: #fff; background: var(--red, #e52b2d); }
.tk-i:active { transform: scale(.92); }
.tk-s { color: var(--muted); }
.tk-on { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--ok, #1db954); }
.tk-nm { font-weight: 800; cursor: pointer; }
.tk-nm .i { font-size: 12px; margin-right: 5px; color: var(--muted); vertical-align: -1px; }
.tk-x { font-style: normal; font-size: .6rem; font-weight: 800; padding: 1px 5px; border-radius: 6px; color: var(--red, #e52b2d); background: rgba(229,43,45,.1); }
.tk-c small { display: block; font-size: .6rem; color: var(--muted); }
.tk td.num { font-variant-numeric: tabular-nums; }
.tk-wrap .more { width: 100%; }

/* Cloche : « Tout supprimer » en haut de la liste, poubelle sous la date de chaque notification */
.nt-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.nt-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.item .nt-x { width: 36px; height: 36px; color: var(--red, #e52b2d); }

/* Plus : version + copyright fixes en bas de l'écran, juste au-dessus de la barre du bas (ne bougent pas) */
.mo-sp { height: 52px; }
.mo-foot { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b, 0px)); z-index: 4; padding: 6px 12px 7px; text-align: center; background: var(--bg); animation: none !important; }
.mo-foot p { margin: 0; font-size: .7rem; line-height: 1.35; }
.mo-foot .copy { margin-top: 1px; font-size: .66rem; }

/* ---------- Ventes : filtres de période sur UNE seule ligne, boutons compacts ---------- */
#sp.chips.cb { flex-wrap: nowrap; overflow: hidden; gap: 4px; }
#sp.chips.cb .chip { flex: 1 1 auto; min-width: 0; padding: 4px 3px; min-height: 28px; font-size: clamp(.56rem, calc(2.9vw / var(--zm)), .72rem); text-align: center; white-space: nowrap; }
#sp.chips.cb .cb-back { flex: 0 0 auto; width: 26px; min-height: 28px; padding: 0; }

/* ---------- Accueil compact (.hm) : mêmes informations, tout (ou presque) sans défiler ---------- */
.hm .sec { margin: 7px 2px 4px; }
.hm .sec h3 { font-size: .62rem; }
.hm .card + .card, .hm .card + .grid, .hm .grid + .card, .hm .grid + .grid, .hm .sec + .card, .hm .card + .sec, .hm .grid + .sec { margin-top: 6px; }
/* 1) les 4 cartes du haut : un peu plus grandes (texte, marges), icône à gauche de la valeur */
.hm .hm-top { gap: 8px; }
.hm .hm-top .stat { padding: 11px 12px; }
.hm .hm-top .s-row { gap: 9px; margin-bottom: 4px; }
.hm .hm-top .s-ico { width: 28px; height: 28px; font-size: 15px; margin-bottom: 0; border-radius: 9px; }
.hm .hm-top .s-val { font-size: 1.28rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm .hm-top .s-val small { font-size: .74rem; }
/* montants de l'accueil : la devise est plus petite que le nombre ; un montant trop long est réduit par fitVals() (app.js), jamais coupé */
.hm .s-val small.cur { font-size: .5em; font-weight: 700; margin-left: 4px; letter-spacing: 0; }
.hm .hm-month .s-val { overflow: hidden; white-space: nowrap; min-width: 0; }
.hm .hm-top .s-val { text-overflow: clip; }
.hm .hm-top .s-lab { font-size: .74rem; line-height: 1.2; }
/* 6) carte « PPPoE en ligne » en #E8184F */
.hm .stat.pp { color: #fff; border: 0; background: #E8184F; }
.hm .stat.pp .s-ico { color: #E8184F; background: #fff; }
.hm .stat.pp .s-lab, .hm .stat.pp .s-val small { color: rgba(255,255,255,.85); }
/* 2) carte d'infos du routeur : réduite au maximum (mémoire et stockage côte à côte) */
.hm .hm-info { padding: 8px 10px; }
.hm .hm-info .gauge { gap: 9px; }
.hm .hm-info .ring { width: 44px; height: 44px; }
.hm .hm-info .ring b { font-size: .69rem; }
.hm .hm-name { font-weight: 800; font-size: .92rem; line-height: 1.15; }
.hm .hm-sub { font-size: .74rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm .hm-sub .i { font-size: 11.5px; vertical-align: -1px; }
.hm .hm-res { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 7px; font-size: .74rem; }
.hm .hm-res > div { min-width: 0; }
.hm .hm-rl { display: flex; justify-content: space-between; gap: 4px; white-space: nowrap; }
.hm .hm-rl b { overflow: hidden; text-overflow: ellipsis; }
.hm .hm-res .bar { height: 5px; margin-top: 3.5px; }
/* bouton VPN puis actions rapides en dessous */
.hm .hm-vpn { margin-top: 7px; min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
.hm .hm-acts { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 0; }
.hm .hm-acts .act { padding: 6px 2px; font-size: .6rem; line-height: 1.15; gap: 3px; border-radius: 9px; }
.hm .hm-acts .act .i { font-size: 16px; }
/* 3) trafic en direct : plus bas, écritures plus petites */
.hm .sec:has(#ifSel) h3 { font-size: .71rem; }
.hm #ifSel { height: 32px; font-size: .83rem; padding-top: 0; padding-bottom: 0; }
.hm .hm-chart { padding: 7px 10px; }
.hm .hm-chart .chart { height: 67px; }
.hm .hm-chart .legend { font-size: .74rem; margin-top: 2.5px; gap: 11.5px; }
/* ce mois-ci */
.hm .hm-month .stat { padding: 7px 10px; }
.hm .hm-month .s-val { font-size: 1rem; }
.hm .hm-month .s-lab { font-size: .64rem; }

/* ---------- MikPay (2.5.4+) : aucun texte coupé — les libellés passent à la ligne au lieu d'être tronqués par « … » ---------- */
body[data-mm] .mm-l1 { flex-wrap: wrap; white-space: normal; row-gap: 3px; }
body[data-mm] .mm-l1 .mm-tv { max-width: none; flex-shrink: 1; min-width: 0; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body[data-mm] .mm-l1 .mm-tl { flex: 1 1 100%; order: 3; overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
body[data-mm] .mm-line .mm-tn { white-space: normal; overflow: visible; text-overflow: clip; padding-left: 0; align-items: flex-start; overflow-wrap: anywhere; }
body[data-mm] .mm-rn b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body[data-mm] .mm-hb, body[data-mm] .mm-d .mm-hb, body[data-mm] .mm-hero .mm-hb { white-space: normal; text-align: center; line-height: 1.15; height: auto; min-height: 42px; padding: 6px 8px; }
body[data-mm] .item .t, body[data-mm] .item .s { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body[data-mm] .mm-tl, body[data-mm] .mm-tn, body[data-mm] .mm-cum-t small { overflow-wrap: anywhere; }
/* Retrait : choix « Uniquement ce routeur » / « Tous les routeurs » — titre et détail l'un sous l'autre, sans texte collé ni coupé */
.mm-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); text-align: left; color: var(--ink); }
.mm-opt .i { font-size: 20px; flex-shrink: 0; color: var(--accent); }
.mm-opt > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-opt b { font-size: .9rem; line-height: 1.25; }
.mm-opt small { font-size: .76rem; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.mm-opt[disabled] { opacity: .5; }
.mm-opt:active { transform: scale(.98); }
/* ---------- Mode dense (2.5.4+) : sur le modèle du tableau compact de la photo « Big Mode » — plus d'informations par écran, texte encore lisible.
 * Mise en forme seulement (tailles, marges, espacements) : aucune fonction, aucun onglet, aucune donnée ne change. ---------- */
html { font-size: 15px; }
:root { --nav-h: 46px; --radius: 12px; }
.topbar { padding: 6px 9px; gap: 7px; }
.topbar .tb-ico, .topbar .tb-btn { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
.nav button { font-size: .6rem; }
.nav button .i { font-size: 18px; }
.view { padding: 6px 8px calc(var(--nav-h) + 10px); }
.pad { padding: 8px; }
.card + .card, .card + .grid, .grid + .card, .grid + .grid, .sec + .card, .card + .sec, .grid + .sec { margin-top: 6px; }
.grid, .mm-grid { gap: 5px; }
.sec { margin: 6px 2px 3px; }
.item { padding: 4px 8px; gap: 7px; }
.item .av { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
.item .t { font-size: .8rem; }
.item .s { font-size: .64rem; margin-top: 0; }
.btn { height: 32px; font-size: .78rem; padding: 0 10px; border-radius: 9px; }
.btn.sm { height: 28px; font-size: .72rem; padding: 0 9px; }
.f { margin-bottom: 8px; }
.f label { font-size: .64rem; margin-bottom: 2px; }
.f input, .f select { height: 32px; font-size: .8rem; padding: 0 8px; border-radius: 9px; }
.search input { height: 32px; font-size: .8rem; }
.filter { height: 32px; font-size: .78rem; }
.chip { padding: 3px 8px; font-size: .66rem; }
.seg button { padding: 5px 10px; font-size: .74rem; }
.tag { font-size: .58rem; }
.tk td { height: 28px; padding: 2px 5px; }
.tk th { padding: 4px 5px; }
.tk-i { width: 24px; height: 24px; font-size: 13px; }
.sheet .box .hd { padding: 10px 12px; }
.sheet .box .bd { padding: 8px 12px 12px; }
.sheet .box .hd h2 { font-size: .95rem; }/* plancher de lisibilité du mode dense : aucun texte sous ≈ 9,6 px */
.tag { font-size: .64rem; }
.tk-c small, .tk th { font-size: .64rem; }
.hm .sec h3, .hm .hm-acts .act { font-size: .66rem; }
.hm .hm-acts .act { font-size: .64rem; }



/* ---------- Hotspot (2.5.5+) : barre collée en haut : recherche compacte + menus rapides Utilisateur · Générer · Profil ---------- */
.hs-bar { position: sticky; top: var(--tb-h, 40px); z-index: 8; display: flex; align-items: center; gap: 5px; margin: -2px -8px 6px; padding: 5px 8px; background: var(--bg); border-bottom: 1px solid var(--line); }
.hs-q { flex: 0 1 78px; min-width: 0; position: relative; transition: flex-basis .2s var(--ease), flex-grow .2s var(--ease); }
.hs-q .i { left: 7px; font-size: 13px; }
.hs-q input { height: 28px; padding: 0 6px 0 24px; border-radius: 9px; font-size: .74rem; }
.hs-q input::placeholder { color: var(--muted); opacity: .9; }
.hs-m { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 6px; border-radius: 9px; font-size: .72rem; font-weight: 800; color: var(--muted); background: var(--soft); border: 1px solid transparent; white-space: nowrap; overflow: hidden; }
.hs-m .i { font-size: 13px; flex-shrink: 0; }
.hs-m span { overflow: hidden; text-overflow: ellipsis; }
.hs-m.on { color: var(--accent); border-color: var(--accent); background: transparent; }
/* au clic : la recherche s'agrandit sur la ligne, les menus se réduisent à leurs icônes */
.hs-bar:focus-within .hs-q { flex: 1 1 100%; }
.hs-bar:focus-within .hs-m { flex: 0 0 auto; padding: 0 8px; }
.hs-bar:focus-within .hs-m span { display: none; }
/* Sélection (Hotspot) : corbeille rouge de suppression sur la même ligne que les autres boutons */
.selbar .batchbar button.red.trash { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; justify-content: center; color: #fff; background: var(--red, #e52b2d); }
.selbar .batchbar button.red.trash .i { font-size: 16px; }
.selbar .batchbar { gap: 5px; padding: 6px 8px; }
.selbar .batchbar b { flex: 1 0 auto; font-size: .72rem; }
.selbar .batchbar button { padding: 5px 6px; font-size: .68rem; gap: 3px; }
.selbar .batchbar button.red.trash { padding: 0; }.selbar .batchbar button { white-space: nowrap; padding: 5px 5px; }
.selbar .batchbar button[data-act=hsSelReset] .i { display: none; }
/* Menu hamburger : bouton « Réglages » en bas, séparé des pages */
.dw-set { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.12); border-radius: 0 0 12px 12px; padding-top: 10px; }
.fs-seg { margin: 0; }
.fs-seg button { flex: 1; text-align: center; }

/* 2.5.7 — accueil PPPoE : cartes « pc » (distinctes du Hotspot), apparition en fondu échelonnée */
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 4px}
.pc{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico lab" "val val";align-items:center;column-gap:8px;row-gap:6px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal-3);border-radius:12px;padding:10px 11px;min-height:70px;
  opacity:0;transform:translateY(6px);animation:pcIn .38s ease-out forwards;animation-delay:calc(var(--i,0)*55ms);transition:transform .15s,border-color .15s}
.pc:active{transform:scale(.98)}
.pc-ico{grid-area:ico;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--soft);color:var(--teal-3)}
.pc-ico .i{width:15px;height:15px}
.pc-lab{grid-area:lab;font-size:.74rem;font-weight:600;color:var(--muted,#8aa);line-height:1.15}
.pc-val{grid-area:val;font-size:1.32rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pc-val small{font-size:.72rem;font-weight:600;opacity:.6;margin-left:3px}
.pc.on{border-left-color:var(--ok)}.pc.on .pc-ico{color:var(--ok)}
.pc.soon{border-left-color:var(--warn)}.pc.soon .pc-ico{color:var(--warn)}
.pc.end{border-left-color:var(--red)}.pc.end .pc-ico{color:var(--red)}
.pc.gold{border-left-color:var(--gold-2)}.pc.gold .pc-ico{color:var(--gold-2)}
.pc.wide{grid-column:1/-1}
.pc-sec{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin:12px 2px 6px}
@keyframes pcIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pc{animation:none;opacity:1;transform:none}}
/* 2.5.7 — VPN : boutons WhatsApp verts « Vendeur certifié » / « Administrateur », libellé court sans débordement */
.vpn-wa .btn.wa{color:#fff;font-weight:700;justify-content:center;gap:8px;padding-left:8px;padding-right:8px}
.vpn-wa .btn.wa .i{margin-left:0;width:20px;height:20px;flex:none}
.vpn-wa .btn.wa span{align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* 2.5.7 — sélecteur de routeur (flèches) : fenêtre centrée au milieu de l'écran, avec son en-tête */
.sheet.mid{align-items:center;padding:20px}
.sheet.mid .box{border-radius:20px;max-width:380px;width:100%;max-height:calc(78vh / var(--zm));transform:scale(.92);opacity:0;transition:transform .28s var(--spring),opacity .2s}
.sheet.mid.open .box{transform:none;opacity:1}
.sheet.mid .hd::before{display:none}

/* 2.5.7 — accueil PPPoE (contenu défilable) : anneau « Réseau global », badges, revenu, ventes ; animations jouées une seule fois */
.pp-a{animation:ppIn .3s ease-out backwards;animation-delay:calc(var(--i,0)*80ms)}
@keyframes ppIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pp-ring{display:flex;align-items:center;gap:14px;padding:12px}
.pp-rg{position:relative;width:112px;height:112px;flex:none}
.pp-rg svg{width:100%;height:100%;transform:rotate(-90deg)}
.pp-rg circle{fill:none;stroke-width:10}
.pp-rt{stroke:var(--soft)}
.pp-rp{stroke:var(--teal-3);stroke-linecap:round;transition:stroke-dashoffset 1s ease-out}
.pp-rc{position:absolute;inset:0;display:grid;place-items:center;font-size:1.35rem}
.pp-rc small{font-size:.7rem;font-weight:600;opacity:.65}
.pp-rt2{min-width:0;flex:1}.pp-rt2 h3{font-size:.95rem;margin:0}
.pp-sub{font-size:.72rem;opacity:.65;margin-top:2px}
.pp-sent{font-size:.84rem;font-weight:600;margin:6px 0 8px;line-height:1.3}
.pp-rb{display:flex;gap:6px;flex-wrap:wrap}
.pp-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.pp-badge{display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:14px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--warn)}
.pp-badge.end{border-left-color:var(--red)}
.pp-bh{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700}
.pp-badge.soon .pp-bh .i{color:var(--warn)}.pp-badge.end .pp-bh .i{color:var(--red)}
.pp-bv{font-size:1.4rem;font-weight:800;line-height:1.1}
.pp-bs{font-size:.7rem;opacity:.65;line-height:1.25;flex:1}
.pp-badge .btn{align-self:flex-start;margin-top:4px}
.pp-badge.pulse{animation:ppIn .3s ease-out backwards,ppPulse 1.4s ease-in-out .5s 1}
.pp-badge.pulse .pp-bv{color:var(--red)}
@keyframes ppPulse{50%{box-shadow:0 0 0 4px rgba(229,43,45,.18)}}
.pp-rev{margin-top:8px;padding:14px;background:linear-gradient(135deg,rgba(255,215,0,.12),rgba(8,120,145,.12))}
.pp-lab{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700}
.pp-lab .i{width:15px;height:15px;opacity:.8}
.pp-big{font-size:1.75rem;font-weight:800;letter-spacing:-.01em;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.pp-card{display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:10px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.pp-val{font-size:1.1rem;font-weight:800}
.pp-none{font-size:.82rem;opacity:.6}
.pp-card,.pp-rev .btn,.pp-badge .btn,.pp-rb .btn{transition:transform .12s ease}
.pp-card:active,.pp-rev .btn:active,.pp-badge .btn:active,.pp-rb .btn:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.pp-a,.pp-badge.pulse{animation:none}.pp-rp{transition:none}}
/* 2.5.7 — accueil PPPoE : débit des clients, retraits compact */
.pp-tr{margin-top:8px;padding:10px 12px}
.pp-trb{margin-top:6px;font-size:.82rem}
.pp-tt{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.pp-tt i{display:block;font-style:normal;font-size:.68rem;opacity:.65}
.pp-tt b{font-size:.95rem;font-variant-numeric:tabular-nums}
.pp-top{margin-top:8px;border-top:1px solid var(--line);padding-top:6px;display:flex;flex-direction:column;gap:3px}
.pp-top div{display:flex;justify-content:space-between;gap:8px;font-size:.76rem}
.pp-top span{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pp-top em{font-style:normal;opacity:.75;white-space:nowrap}
.pp-wd{padding:10px 12px}
/* 2.5.7 — accueil PPPoE COMPACT (surcharge des blocs précédents) : tient sur un écran, peu de défilement */
.pp-ring{padding:8px 10px;gap:10px;border-radius:12px;margin-bottom:0}
.pp-rg{width:62px;height:62px}
.pp-rg circle{stroke-width:11}
.pp-rc{font-size:.95rem}.pp-rc small{font-size:.6rem}
.pp-rt2 h3{font-size:.78rem;font-weight:800;line-height:1.2}
.pp-rt2 h3 small{font-size:.64rem;font-weight:600;opacity:.6}
.pp-sent{font-size:.76rem;margin:2px 0 5px}
.pp-rb{gap:5px}.pp-rb .btn{padding:3px 9px;min-height:26px;font-size:.7rem}
.pp-two{gap:6px;margin-top:6px}
.pp-badge{padding:6px 8px;border-radius:12px;gap:2px}
.pp-bh{display:flex;align-items:center;gap:5px;font-size:.72rem}
.pp-bh .i{width:14px;height:14px;flex:none}
.pp-bh span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-bv{font-size:1rem;line-height:1}
.pp-bh .btn{padding:2px 8px;min-height:24px;font-size:.68rem;margin:0}
.pp-bs{font-size:.64rem;line-height:1.2;flex:0}
.pp-tr{margin-top:6px;padding:7px 10px;border-radius:12px}
.pp-trb{margin-top:3px;font-size:.76rem}
.pp-tt b{font-size:.84rem}.pp-tt i{font-size:.62rem}
.pp-top{margin-top:4px;padding-top:4px;gap:1px}.pp-top div{font-size:.68rem}
.pp-rev{margin-top:6px;padding:8px 10px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pp-big{font-size:1.15rem;margin:1px 0 0}
.pp-lab{font-size:.7rem}.pp-lab .i{width:13px;height:13px}
.pp-rev .btn,.pp-row .btn{padding:3px 10px;min-height:26px;font-size:.7rem;flex:none}
.pp-card{padding:7px 9px;border-radius:12px;gap:1px}
.pp-val{font-size:.95rem}.pp-none{font-size:.74rem}
.pp-sec{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin:8px 2px 4px}
.pp-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:12px}
.pp-rtx{font-size:.76rem;line-height:1.3;min-width:0}
.pp-rtx small{display:block;font-size:.66rem;opacity:.65;margin-top:2px}
/* 2.5.7 — Hotspot › Utilisateur : bouton Filtre, appui long sans sélection de texte */
.hs-m.hs-f{flex:0 0 auto;padding:0 9px}
.hs-bar:focus-within .hs-m.hs-f{padding:0 8px}
table.tk tbody{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.batchbar.sel{flex-wrap:wrap;row-gap:6px}
.hs-bar .hs-q{flex:0 1 60px}
.hs-bar .hs-m{padding:0 5px;font-size:.68rem;gap:3px}

/* 2.5.7 — menu hamburger : fond transparent avec voile léger ; Réglages en sous-menu */
.dw-panel{background:linear-gradient(165deg,rgba(10,47,57,.38),rgba(3,19,24,.46));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dw-ovl{background:rgba(2,12,15,.28)}
.dw-folder.dw-set{margin-top:10px;border-top:1px solid rgba(255,255,255,.12);border-radius:0;padding-top:6px}
.dw-folder.dw-set .dw-fhead{border-radius:12px}

/* 2.5.7 — PPPoE : barre rapide collée (En ligne · Abonnés · Forfaits) */
#pppBar .cnt{margin-left:3px;padding:0 5px;border-radius:99px;font-size:.62rem;background:var(--soft)}

/* 2.5.7 — barres rapides : recherche courte au repos (« Recherche... » complet), agrandie seulement au focus (.srch) ; menus à taille normale */
.hs-bar{gap:4px;padding:4px 6px}
.hs-bar .hs-q{flex:0 0 92px;min-width:0}
.hs-bar .hs-q input{font-size:.7rem;padding:0 4px 0 22px;text-overflow:clip}
.hs-bar .hs-q .i{left:6px}
.hs-bar .hs-m{flex:1 1 0;min-width:30px;padding:0 4px;font-size:.66rem;gap:3px}
.hs-bar:focus-within .hs-q{flex:0 0 92px}
.hs-bar:focus-within .hs-m{flex:1 1 0;padding:0 4px}
.hs-bar:focus-within .hs-m span{display:inline}
.hs-bar.srch .hs-q{flex:1 1 150px}
.hs-bar.srch .hs-m{flex:0 1 auto}
.hs-bar.srch .hs-m span{display:inline}
.hs-bar .hs-m.hs-f{flex:0 0 auto}
/* 2.5.8 — accueil PPPoE « tableau de bord » : double anneau, expirations, revenus + mini-graphiques ; couleurs de l'application */
.pp-net{padding:10px 12px;margin-bottom:0}
.pp-nt{text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.pp-ringw{position:relative;width:150px;height:150px;margin:8px auto 4px}
.pp-ringw svg{width:100%;height:100%;transform:rotate(-90deg)}
.pp-ringw circle{fill:none;stroke-width:9}
.pp-ringw .pp-rt{stroke:var(--soft)}
.pp-ringw .pp-rp{stroke-linecap:round;transition:stroke-dashoffset 1s ease-out}
.pp-ringw .pp-rp.a{stroke:var(--teal-3)}
.pp-ringw .pp-rp.b{stroke:var(--ok)}
.pp-ringc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.pp-bl{display:flex;align-items:center;gap:6px;font:inherit;color:inherit;font-size:.8rem;font-weight:600;background:none}
.pp-bdg{padding:1px 7px;border-radius:7px;font-size:.78rem;color:#fff}
.pp-bdg.ok{background:var(--ok)}.pp-bdg.blue{background:var(--teal-2)}
.pp-net .pp-sent{text-align:center;margin:2px 0 8px}
.pp-exp{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pp-ex{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i m" "b b";gap:4px 6px;align-items:center;padding:7px 8px;border-radius:12px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35)}
.pp-ex.end{background:rgba(229,43,45,.12);border-color:rgba(229,43,45,.4)}
.pp-exi{grid-area:i;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--warn);color:var(--warn)}
.pp-ex.end .pp-exi{border-color:var(--red);color:var(--red)}
.pp-exm{grid-area:m;display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pp-exm span{font-size:.7rem;opacity:.85}.pp-exm b{font-size:1.1rem}
.pp-ex .btn{grid-area:b;justify-self:stretch;min-height:26px;padding:3px 8px;font-size:.68rem}
.pp-ex.pulse{animation:ppPulse 1.4s ease-in-out .6s 1}
.pp-help{font-size:.68rem;opacity:.65;margin:6px 2px 0;text-align:center}
.pp-fee .pp-help{text-align:left}
.pp-sec{margin:10px 2px 5px}
.pp-rev{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,215,0,.45);background:linear-gradient(135deg,rgba(255,215,0,.22),rgba(8,120,145,.14))}
.pp-revi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--gold)}
.pp-rl{flex:1;min-width:0}
.pp-big{font-size:1.35rem}
.pp-sv{display:flex;align-items:flex-end;justify-content:space-between;gap:6px}
.pp-mini{display:flex;align-items:flex-end;gap:2px;height:26px;flex:none}
.pp-mini i{display:block;width:5px;border-radius:2px;background:var(--soft);min-height:3px}
.pp-mini i.cur{background:var(--teal-3)}
.pp-card{border-left:3px solid var(--teal-3);gap:6px;padding:8px 10px}
.pp-val{font-size:1rem}
.pp-fee{padding:8px 10px}
.pp-fh{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pp-opt{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid var(--line)}
.pp-opt b{display:block;font-size:.84rem}.pp-opt small{opacity:.65;font-size:.72rem}
.pp-rad{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative}
.pp-opt.on .pp-rad{border-color:var(--teal-3)}
.pp-opt.on .pp-rad::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--teal-3)}
.pp-row .btn.pri{flex:none}
/* 2.6.4 : Hotspot › Utilisateurs › Filtre en sous-menu sous la barre */
.hs-bar{position:sticky}
.hs-m.hs-f.on,.hs-m.hs-f.open{color:var(--accent);border-color:var(--accent);background:transparent}
.hs-pop{position:absolute;top:100%;left:6px;right:6px;margin-top:4px;max-height:calc(62vh / var(--zm));overflow-y:auto;background:var(--card,var(--bg));border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.28);padding:6px;z-index:9;-webkit-overflow-scrolling:touch}
.hs-pi{display:flex;align-items:center;gap:8px;width:100%;padding:10px;border-radius:10px;font-size:.8rem;font-weight:800;color:var(--text);text-align:left}
.hs-pi .i{font-size:15px;flex:none}
.hs-pi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-pi em{font-style:normal;font-weight:700;color:var(--accent);margin-left:4px}
.hs-pi.on{background:var(--soft)}
.hs-pi.clr{color:var(--muted)}
.hs-pi .hs-car{transition:transform .15s;transform:rotate(90deg)}
.hs-pi.on .hs-car{transform:rotate(-90deg)}
.hs-pl{margin:0 0 4px 12px;padding-left:8px;border-left:2px solid var(--line)}
.hs-pr{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 10px;border-radius:8px;font-size:.78rem;font-weight:700;color:var(--text);text-align:left}
.hs-pr:active,.hs-pi:active{background:var(--soft)}
.hs-pr.sel{color:var(--accent)}
/* 2.6.3+ — VPN : routeur lié (Gmail masqué, fin du n° de série), état « déjà en place / à restaurer », VPN d'un autre routeur */
.vpn-lk{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--soft);font-size:.78rem;line-height:1.35}
.vpn-lk>.i{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--accent)}
.vpn-lk .muted{font-size:.7rem;margin-top:2px}
.vpn-lk b.mono{font-weight:800;color:var(--ink)}
.vpn-here{margin-top:8px}
.vpn-here .banner{margin-bottom:0;display:flex;gap:6px;align-items:center}
.vpn-here .vh-l{display:flex;gap:6px;align-items:center;font-size:.76rem}
.vpn-here .hint{margin-top:6px}
.vpn-move{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.prot-l .tag{display:inline-flex;gap:4px;align-items:center;margin:2px 2px 2px 0}
.prot-l .tag .i{width:12px;height:12px}

/* 2.6.3+ — Écran de maintenance : couleurs du thème (clair / sombre), engrenages qui tournent et clé qui oscille.
 * Le texte défile librement (l'écran garde overflow:auto) ; « réduire les animations » du téléphone fige l'illustration. */
#maint-screen{background:var(--bg);color:var(--ink)}
#maint-screen .mt-in{margin:auto;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center}
#maint-screen .mt-t{font-size:1.15rem;font-weight:800;margin-bottom:8px}
#maint-screen .mt-x{font-size:.95rem;line-height:1.5;white-space:pre-wrap;opacity:.92;max-width:100%;overflow-wrap:anywhere}
#maint-screen .mt-img{max-width:100%;max-height:calc(36vh / var(--zm));border-radius:14px;margin-top:16px;object-fit:contain}
#maint-screen .mt-b{margin-top:20px;padding:12px 22px;border:0;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;font-size:.95rem}
.mt-anim{display:block;width:170px;max-width:calc(60vw / var(--zm));height:auto;margin:0 auto 18px;color:var(--accent);overflow:visible}
.mt-anim .mt-g2{color:var(--teal-3)}
.mt-anim .mt-wr{color:var(--gold-2)}
.mt-anim .mt-hole{fill:var(--bg)}
.mt-anim .mt-g1,.mt-anim .mt-g2{transform-box:fill-box;transform-origin:center;will-change:transform}
.mt-anim .mt-g1{animation:mtSpin 9s linear infinite}
.mt-anim .mt-g2{animation:mtSpin 6s linear infinite reverse}
.mt-anim .mt-wr{transform-box:view-box;transform-origin:143.6px 75.5px;animation:mtWr 2.6s ease-in-out infinite}
@keyframes mtSpin{to{transform:rotate(360deg)}}
@keyframes mtWr{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@media (prefers-reduced-motion: reduce){.mt-anim .mt-g1,.mt-anim .mt-g2,.mt-anim .mt-wr{animation:none}}
/* 2.6.12 — Maintenance d'un onglet ou d'un menu : même écran, mais dans la page (la barre du bas reste utilisable) ; « jusqu'à … » sous le titre.
 * Page cachée : les engrenages s'arrêtent (classe mt-hid posée par app.js). */
#maint-screen .mt-u,.mt-zone .mt-u{font-size:.86rem;font-weight:700;color:var(--accent);margin:-2px 0 10px}
.mt-zone{display:flex;flex-direction:column;text-align:center;padding:28px 12px;min-height:calc(60vh / var(--zm))}
.mt-zone .mt-in{margin:auto;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center}
.mt-zone .mt-t{font-size:1.15rem;font-weight:800;margin-bottom:8px}
.mt-zone .mt-x{font-size:.95rem;line-height:1.5;white-space:pre-wrap;opacity:.92;max-width:100%;overflow-wrap:anywhere}
.mt-zone .mt-img{max-width:100%;max-height:calc(36vh / var(--zm));border-radius:14px;margin-top:16px;object-fit:contain}
.mt-zone .mt-b{margin-top:20px;padding:12px 22px;border:0;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;font-size:.95rem}
html.mt-hid .mt-anim *{animation-play-state:paused}

/* 2.6.6 — Ligne ouverte depuis une notification (ticket, abonné ou vente) : surlignage doux, deux pulsations, puis extinction en fondu
 * (après quelques secondes ou au premier toucher). « Réduire les animations » : surlignage fixe, sans pulsation. */
.nhl{--nhl-c:var(--gold-2);background:rgba(255,215,0,.2)!important;background:color-mix(in srgb,var(--gold) 22%,var(--card))!important;box-shadow:inset 0 0 0 2px var(--nhl-c);border-radius:12px;animation:nhlPulse 1.4s var(--ease) 2;transition:background-color .4s ease,box-shadow .4s ease}
tr.nhl{box-shadow:none;animation:none;border-radius:0}
tr.nhl td{background:rgba(255,215,0,.2)!important;background:color-mix(in srgb,var(--gold) 22%,var(--card))!important;box-shadow:inset 0 2px 0 var(--nhl-c),inset 0 -2px 0 var(--nhl-c);transition:background-color .4s ease}
.nhl.nhl-off,tr.nhl.nhl-off td{background:transparent!important;box-shadow:none;animation:none}
@keyframes nhlPulse{0%,100%{box-shadow:inset 0 0 0 2px var(--nhl-c)}50%{box-shadow:inset 0 0 0 2px var(--nhl-c),0 0 0 6px rgba(255,215,0,.3)}}
@media (prefers-reduced-motion: reduce){.nhl,tr.nhl td{animation:none;transition:none}}

/* 2.6.6 : sous-dossier « Réglage PPPoE » dans le dossier Réglages du tiroir (un niveau d'indentation de plus) */
.dw-folder.dw-sub2 { margin-bottom: 0; }
.dw-folder.dw-sub2 > .dw-fhead { padding: 9px 12px 9px 18px; font-size: .84rem; }
.dw-folder.dw-sub2:not(.open) > .dw-fbody { max-height: 0; }
.dw-folder.dw-sub2.open > .dw-fbody { max-height: 300px; }
.dw-folder.dw-sub2 .dw-fbody .dw-item { padding-left: 40px; }

/* Portefeuille PPPoE autonome : carte « Solde PPPoE » (PPPoE › Accueil) et historique des retraits PPPoE */
.pp-wal { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.pp-wh { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pp-wh .pp-big { margin: 0; }
.pp-wk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pp-wk > div { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); min-width: 0; }
.pp-wk i { font-style: normal; font-size: .68rem; opacity: .7; }
.pp-wk b { font-size: .9rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pp-wal .pp-help { text-align: left; margin: 0; }
.pp-wt { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .65; margin-top: 4px; }
.pp-wr { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.pp-wrm { min-width: 0; font-size: .8rem; }
.pp-wrm small { display: block; font-size: .68rem; opacity: .7; margin-top: 1px; overflow-wrap: anywhere; }
/* 2.6.9+ : aide sous les titres de l'accueil PPPoE (revenu noté sur le routeur / solde reçu en ligne) et carte « À encaisser » */
.pp-help.pp-sh{text-align:left;margin:-2px 2px 6px}
.pp-due{padding:8px 10px}
.pp-due .pp-help{text-align:left;margin-top:2px}
.pp-due .pp-big{margin:0}
/* 2.6.10+ : accueil PPPoE en onglets — bandeau d'état, onglets en segments arrondis, période, alertes, résumé de la page, option « page claire » */
.pp-home{--pp-okc:#15803d;--pp-wc:#b45309;--pp-bc:var(--red);min-width:0}
:root[data-theme="dark"] .pp-home:not(.pp-light){--pp-okc:#6fe0a6;--pp-wc:#ffd766;--pp-bc:#ff7b7c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pp-home:not(.pp-light){--pp-okc:#6fe0a6;--pp-wc:#ffd766;--pp-bc:#ff7b7c}}
.pp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.pp-band{position:relative;display:flex;align-items:center;gap:5px;width:100%;min-width:0;padding:5px 6px;border-radius:12px;background:var(--card);border:1px solid var(--line);font:inherit;color:inherit;text-align:left;cursor:pointer;overflow:hidden}
.pp-pill{display:inline-flex;align-items:center;gap:4px;min-width:0;flex:0 1 auto;padding:2px 7px;border-radius:99px;font-size:.66rem;font-weight:700;background:var(--soft);color:var(--muted)}
.pp-pill i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
.pp-pt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-pill.ok{color:var(--pp-okc);background:rgba(34,197,94,.13)}.pp-pill.ok i{background:var(--ok)}
.pp-pill.warn{color:var(--pp-wc);background:rgba(245,158,11,.16)}.pp-pill.warn i{background:var(--warn)}
.pp-pill.bad{color:var(--pp-bc);background:rgba(229,43,45,.1)}.pp-pill.bad i{background:var(--red)}
.pp-tabrow{display:flex;align-items:center;gap:6px;margin:6px 0}
.pp-tabs{display:flex;flex:1;min-width:0;gap:2px;padding:3px;border-radius:99px;background:var(--soft);border:1px solid var(--line)}
.pp-tabs [role=tab]{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 4px;border-radius:99px;font:inherit;font-size:.74rem;font-weight:700;color:var(--muted);background:none;border:0;cursor:pointer;white-space:nowrap}
.pp-tabs [role=tab] span:not(.pp-sr){min-width:0;overflow:hidden;text-overflow:ellipsis}
.pp-tabs [role=tab] .i{width:14px;height:14px}
.pp-tabs [role=tab][aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.14)}
.pp-tabs [role=tab]:focus-visible,.pp-per button:focus-visible,.pp-band:focus-visible,.pp-thm:focus-visible{outline:2px solid var(--teal-3);outline-offset:1px}
.pp-tbn{min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:.6rem;font-weight:800;display:inline-grid;place-items:center;flex:none;line-height:1}
.pp-tbn.warn{background:var(--warn);color:#3a2500}
@media (max-width:399px){.pp-tabs [role=tab] .i{display:none}}
.pp-thm{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--soft);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.pp-thm .i{width:16px;height:16px}
.pp-per{display:flex;gap:2px;padding:3px;margin:0 0 4px;border-radius:99px;background:var(--soft);border:1px solid var(--line)}
.pp-per button{flex:1 1 0;min-width:0;padding:5px 4px;border-radius:99px;font:inherit;font-size:.72rem;font-weight:700;color:var(--muted);background:none;border:0;cursor:pointer}
.pp-per button.on{background:var(--accent);color:var(--accent-ink)}
.pp-pv .pp-sv{align-items:center}
.pp-fl{font-size:.68rem;opacity:.8;margin-top:2px;overflow-wrap:anywhere}
.pp-add{margin-top:8px}
.pp-sc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.pp-scb{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:8px 2px;border-radius:12px;background:var(--card);border:1px solid var(--line);font:inherit;font-size:.68rem;font-weight:700;color:inherit;cursor:pointer}
.pp-scb .i{width:18px;height:18px;color:var(--teal-3)}
.pp-scb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-scb:active,.pp-band:active{transform:scale(.98)}
.pp-als{display:flex;flex-direction:column;gap:6px}
.pp-al{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border-radius:16px;background:var(--card);border:0;box-shadow:0 2px 8px rgba(11,42,49,.09)}
.pp-ali{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--faint);color:#fff}
.pp-al.bad .pp-ali{background:var(--red)}.pp-al.warn .pp-ali{background:var(--warn)}.pp-al.info .pp-ali{background:var(--teal-2)}
.pp-alm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pp-alm b{font-size:.78rem;line-height:1.25;overflow-wrap:anywhere}.pp-alm small{font-size:.68rem;opacity:.7;overflow-wrap:anywhere}
.pp-al .btn{flex:none}
.pp-ck{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.pp-ckr{display:flex;align-items:flex-start;gap:8px;font-size:.76rem;min-width:0}
.pp-ckr .tag{flex:none;min-width:22px;justify-content:center}
.pp-ckt{min-width:0;overflow-wrap:anywhere}.pp-ckt small{display:block;font-size:.66rem;opacity:.7}
/* option « page claire » (D9) : variables de couleur LOCALES à l'accueil PPPoE, le thème de l'application et les autres pages ne changent pas */
.pp-home.pp-light{--ink:#0b2a31;--muted:#4f6b71;--faint:#7f979d;--bg:#eef4f4;--card:#ffffff;--surface:#f5f9f9;--elev:#ffffff;--line:rgba(5,90,109,.16);--soft:rgba(5,90,109,.07);--accent:var(--teal);--accent-ink:#fff;
  background:var(--bg);color:var(--ink);border-radius:16px;padding:6px;margin:0 -4px}
:root .pp-home.pp-light .tag.gold{color:#a36b00}
:root .pp-home.pp-light .banner.warn{color:#8a5a00}
:root .pp-home.pp-light .banner.ok{color:#0b7a45}
.pp-home.pp-light .card{box-shadow:0 6px 18px -14px rgba(5,40,48,.45)}
@media (prefers-reduced-motion:reduce){.pp-scb:active,.pp-band:active{transform:none}}

/* 2.6.11+ : écran VPN en onglets — animation en tête (tunnel ou globe), onglets Mon VPN · Accès · Forfaits · Achats, cartes d'accès et de forfaits */
.vpn-home{min-width:0}
.vpn-hero{--vt-c:#94a3b8;--vt-ic:var(--muted);text-align:center;padding:10px 10px 12px;margin-bottom:6px;overflow:hidden}
.vpn-hero.vt-on{--vt-c:#22c55e;--vt-ic:#15803d}
.vpn-hero.vt-off{--vt-c:#f59e0b;--vt-ic:#b45309}
.vpn-hero.gl{--vt-c:#22c55e;--vt-ic:#15803d}
:root[data-theme="dark"] .vpn-hero.vt-on,:root[data-theme="dark"] .vpn-hero.gl{--vt-ic:#86efac}
:root[data-theme="dark"] .vpn-hero.vt-off{--vt-ic:#ffd766}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vpn-hero.vt-on,:root:not([data-theme="light"]) .vpn-hero.gl{--vt-ic:#86efac}:root:not([data-theme="light"]) .vpn-hero.vt-off{--vt-ic:#ffd766}}
.vt-svg,.gl-svg{display:block;width:100%;max-width:330px;height:auto;margin:0 auto}
.vt-ln{fill:none;stroke:var(--vt-c);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 7;opacity:.85}
.vpn-hero.vt-on .vt-ln{animation:vtDash 1s linear infinite}
@keyframes vtDash{to{stroke-dashoffset:-9}}
.vt-n>circle{fill:var(--card);stroke:var(--vt-c);stroke-width:2}
.vt-g *{fill:none;stroke:var(--vt-ic);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-pk{fill:var(--vt-c)}
.vt-t{font-size:10px;font-weight:700;fill:var(--muted)}
.vpn-hs{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px;min-width:0}
.vpn-hs b{display:inline-flex;align-items:center;gap:6px;font-size:.95rem}
.vpn-hs b i{width:9px;height:9px;border-radius:50%;background:var(--vt-c);flex:none}
.vpn-hero.vt-on .vpn-hs b{color:var(--vt-ic)}
.vpn-hs .muted{font-size:.76rem;max-width:100%;overflow-wrap:anywhere}
.vpn-io{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin-top:6px;font-size:.72rem;color:var(--muted)}
.vpn-io .i{width:13px;height:13px;color:var(--vt-ic)}
.gl-o{fill:color-mix(in srgb,var(--vt-c) 8%,transparent);stroke:var(--vt-c);stroke-width:2}
.gl-m,.gl-e{fill:none;stroke:var(--vt-c);stroke-width:1.2;opacity:.55}
.gl-l{fill:none;stroke:var(--vt-c);stroke-width:1.6;stroke-dasharray:3 5;opacity:.7;animation:vtDash 1.2s linear infinite}
.gl-p{fill:var(--vt-c)}
.gl-r{fill:none;stroke:var(--vt-c);stroke-width:1.5}
.gl-rt rect{fill:var(--card);stroke:var(--vt-ic);stroke-width:2}
.gl-rt path{fill:none;stroke:var(--vt-ic);stroke-width:2;stroke-linecap:round}
.gl-rt circle{fill:var(--vt-c)}
.vpn-hero.gl h2{margin-top:4px}
.vt-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.vpn-hero .vt-ln,.vpn-hero .gl-l{animation:none}}
.vpn-tabs{margin:6px 0 8px}
.vpn-lnk{display:inline-flex;align-items:center;gap:2px;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--accent);cursor:pointer}
.vpn-lnk .i{width:13px;height:13px}
.vpn-opt{margin-bottom:10px}
.vpn-oh{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:4px}
.vpn-oh .i{width:18px;height:18px;flex:none;color:var(--accent)}
.vpn-oh b{min-width:0;overflow-wrap:anywhere}
.vpn-op{font-size:.78rem;margin-bottom:8px}
.vpn-an{margin-bottom:8px}
.vpn-pls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:4px}
.vpn-pl{position:relative;display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px 9px;border-radius:12px;background:var(--card);border:1.5px solid var(--line)}
.vpn-pl.hi{border-color:var(--accent);box-shadow:0 8px 20px -14px rgba(22,163,74,.8)}
.vpn-pl .muted{font-size:.66rem}
.vpn-pln{font-size:.82rem;overflow-wrap:anywhere}
.vpn-plr{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
.vpn-plp{font-size:.86rem;white-space:nowrap}
.vpn-pl .btn.sm{height:26px;padding:0 9px;font-size:.7rem;flex:none}
.vpn-plb{align-self:flex-start;font-size:.58rem;margin-bottom:1px}
/* « J'ai un code » : premier élément de l'onglet Forfaits, vert vif avec lueur et reflet */
.vpn-cg{display:flex;align-items:center;gap:10px;width:100%;margin:10px 0 0;padding:10px 14px;border-radius:14px;border:0;color:#fff;font:inherit;text-align:left;background:linear-gradient(135deg,#34c759,#12803a);box-shadow:0 8px 20px -8px rgba(22,163,74,.8),0 0 0 3px rgba(34,197,94,.22);position:relative;overflow:hidden;cursor:pointer}
.vpn-cg:active{transform:scale(.98)}
.vpn-cgi{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.vpn-cgi .i{width:20px;height:20px}
.vpn-cgt{flex:1;min-width:0;display:flex;flex-direction:column}
.vpn-cgt b{font-size:.95rem;font-weight:800}.vpn-cgt small{font-size:.68rem;font-weight:600;opacity:.92}
.vpn-cg > .i{width:18px;height:18px;flex:none}
.vpn-cg::after{content:"";position:absolute;top:0;left:-40%;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);animation:vpnShine 3.6s ease-in-out infinite}
@keyframes vpnShine{0%,60%{left:-40%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.vpn-cg::after{animation:none;display:none}}
.vpn-tabs [role=tab]:focus-visible{outline:2px solid var(--teal-3);outline-offset:1px}
.vpn-home .sec h3 .i{width:15px;height:15px;vertical-align:-2px}
@media (max-width:340px){.vpn-pls{grid-template-columns:minmax(0,1fr)}}
/* 2.6.12+ : onglet Ventes, barre façon Mikhmon (Recherche · CSV · Tout / Imprimer · Profil · Supprimer / Jour · Mois · Année) */
.sl-bar{display:grid;gap:6px;margin:0 0 10px}
.sl-row{display:flex;gap:6px;min-width:0}
.sl-b,.sl-s,.sl-q{height:28px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:12px;font-weight:650;min-width:0}
.sl-b{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 10px;flex-shrink:0;white-space:nowrap}
.sl-b .i{width:13px;height:13px;color:var(--muted)}
.sl-b:active{transform:scale(.97)}
.sl-b.on{color:var(--accent);border-color:var(--accent)}
.sl-b.on .i{color:var(--accent)}
.sl-del{color:var(--red);border-color:rgba(229,43,45,.35);background:rgba(229,43,45,.07)}
.sl-del .i{color:var(--red)}
.sl-del.off{opacity:.45}
.sl-s{flex:1 1 0;padding:0 6px;-webkit-appearance:auto;appearance:auto}
.sl-q{flex:1 1 auto;display:flex;align-items:center;gap:5px;padding:0 8px}
.sl-q .i{width:13px;height:13px;color:var(--muted)}
.sl-q input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:12px;outline:none;padding:0}
.sl-q input::-webkit-search-cancel-button{-webkit-appearance:none}
.sl-q:focus-within,.sl-s:focus-visible,.sl-b:focus-visible{border-color:var(--accent);outline:none}
.sl-title{align-items:center}
.sl-title b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-pill{font-size:.74rem;font-weight:800;padding:2px 8px;border-radius:99px;color:var(--accent);background:var(--soft);border:1px solid var(--line);white-space:nowrap}
/* fenêtres centrées : mot à écrire, message */
.dlg .dlg-word{width:100%;height:40px;margin-top:12px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;text-align:center;letter-spacing:.04em}
.dlg .dlg-word:focus{border-color:var(--accent);outline:none}
.dlg .dlg-err{min-height:1em;margin-top:6px;font-size:.8rem;color:var(--red)}
.dlg .dlg-err:empty{margin:0;min-height:0}
.sheet.msg .btns{grid-template-columns:1fr}
.sheet.mid .prog{margin:8px 0 6px}
/* code secret demandé depuis l'onglet Ventes : même écran, en fenêtre au centre */
.sheet.pin.pinmid{align-items:center;padding:16px}
.sheet.pin.pinmid .box{height:auto;max-height:calc(calc(100vh / var(--zm)) - 32px);max-width:360px;border-radius:22px;overflow:auto}
.sheet.pin.pinmid .hd{padding-top:12px}
.sheet.pin.pinmid .bd{padding-bottom:16px}
.sheet.pin.pinmid .pin-keys{gap:10px 18px;margin-top:10px}
.sheet.pin.pinmid .pin-keys button{width:60px;height:60px;font-size:1.4rem}

/* 2.6.13 — Hotspot › Utilisateur : menu puis une ligne Recherche · Profil · Commentaire ; une seule ligne d'actions (compteur · Imprimer · Vendre · CSV · poubelle) */
.hs-bar2{flex-direction:column;align-items:stretch;gap:4px}
.hs-r1,.hs-r2{display:flex;align-items:center;gap:4px;min-width:0}
.hs-bar2 .hs-q{flex:0 0 76px}
.hs-bar2 .hs-q input{height:22px;border-radius:8px;font-size:.64rem;padding:0 4px 0 20px}
.hs-bar2 .hs-q .i{font-size:12px;left:5px}
.hs-bar.srch.hs-bar2 .hs-q{flex:1 1 130px}
.hs-sel{flex:1 1 0;min-width:0;height:22px;padding:0 4px;border-radius:8px;font-size:.62rem;font-weight:700;color:var(--ink);background:var(--soft);border:1px solid transparent;text-overflow:ellipsis}
.hs-bar.srch .hs-sel{flex:0 1 auto;max-width:34%}
/* 2.6.19 : recherche, profil et commentaire de la même longueur (hors saisie : la recherche s'élargit alors comme avant) */
.hs-bar.hs-bar2:not(.srch) .hs-q, .hs-bar.hs-bar2:not(.srch):focus-within .hs-q { flex: 1 1 10px; }
.hs-bar.hs-bar2:not(.srch) .hs-sel { box-sizing: border-box; flex: 1 1 10px; }
.hs-act{display:flex;align-items:center;gap:4px;margin:0 0 6px;flex-wrap:nowrap}
.hs-cnt{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;font-size:.64rem;font-weight:800;color:var(--muted)}
.hs-act button{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 7px;border-radius:8px;font-size:.62rem;font-weight:800;white-space:nowrap;background:var(--soft);color:var(--accent)}
.hs-act button .i{font-size:12px}
.hs-act button.red{color:var(--red);width:26px;padding:0;justify-content:center}
.hs-act button[disabled]{opacity:.45}
/* 2.6.13 — Ventes : lignes Imprimer · Profil · Supprimer et Jour · Mois · Année plus petites que la ligne Recherche · CSV · Tout */
.sl-row:nth-child(n+2) .sl-b,.sl-row:nth-child(n+2) .sl-s{height:22px;border-radius:8px;font-size:10.5px}
.sl-row:nth-child(n+2) .sl-b{padding:0 7px;gap:4px}
.sl-row:nth-child(n+2) .sl-s{padding:0 4px}
.sl-row:nth-child(n+2) .sl-b .i{width:12px;height:12px}
/* 2.6.19 : lignes des filtres des ventes rapprochées */
.sl-bar{gap:3px}
/* 2.6.13 — Ventes détaillées : profil devant le prix */
.sd-end{display:flex;align-items:center;gap:8px}.sd-end b{display:inline}

/* 2.6.13 — Ventes détaillées : lignes serrées, numéro centré, recherche de la section */
.sd2{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:7px;padding:4px 10px;border-top:1px solid var(--line)}
.sd2:first-child{border-top:0}
.sd-n{grid-row:1/3;justify-self:center;min-width:24px;text-align:center;font-size:.64rem;font-weight:800;color:var(--muted);background:var(--soft);border-radius:7px;padding:3px 2px}
.sd-u{font-size:.8rem;font-weight:800;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sd-p{font-size:.8rem;font-weight:800;white-space:nowrap;line-height:1.2}
.sd-r{grid-column:2/4;font-size:.64rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.sd-r b{color:var(--accent);font-weight:800}.sd-r b.blue{color:#2563eb}.sd-r i{font-style:italic;opacity:.8}
.sl-dq{height:26px;margin:0 0 6px}
/* 2.6.13 — Ventes › Résumé : onglets plus petits, une seule ligne par période */
.sec:has(> #ssu){margin-bottom:5px}
#ssu{padding:2px}#ssu button{padding:3px 9px;font-size:.66rem}
.sc-sum .sm-r{display:block;padding:5px 10px}
.sm-l{display:flex;align-items:baseline;gap:6px;min-width:0}
.sm-t{font-size:.76rem;font-weight:800;white-space:nowrap}
.sm-s{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.64rem;color:var(--muted)}
.sm-l b{font-size:.76rem;font-weight:800;white-space:nowrap;color:var(--ink)}
.sm-r .sc-bar{height:3px;margin-top:3px}
.sc-sum .sm-r.sc-tot{padding:6px 10px}
/* 2.6.13 — chargement des pages : routeur dont les voyants clignotent (remplace les barres grises .skel) */
.ldr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:calc(calc(100vh / var(--zm)) - 230px);padding:0 0 30px;color:var(--muted);font-size:.74rem;font-weight:700}
#sheets .ldr{min-height:0;padding:34px 0 24px}
/* 2.6.13 — Accueil : les cartes Hotspot et PPPoE en ligne au même niveau et à la même taille (la règle « .card + .card » descendait la 2e de 6 px) */
.hm .hm-top > .stat.pp{margin-top:0}
.hm .hm-top{align-items:stretch}
/* 2.6.19 : accueil : lignes des 4 cartes rapprochées */
.hm .hm-top{gap:4px 8px}
.hm .hm-top > .stat{margin-top:0}
.hm .hm-top .s-row{margin-bottom:1px}
.hm .hm-top .stat{padding:9px 12px}

/* 2.6.13 — Pays et ville : dernière étape de l'introduction (blanc et rose), ticket qui sort de la fente */
.lieu{position:fixed;inset:0;z-index:9998;background:#fff;color:#0B1B20;display:flex;flex-direction:column;animation:lieuIn .4s cubic-bezier(.22,1,.36,1) both;font-family:inherit}
.lieu.out{animation:lieuOut .3s ease both}
@keyframes lieuIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes lieuOut{to{opacity:0}}
.lieu-in{flex:1;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 90px;-webkit-overflow-scrolling:touch}
.lieu-dots{display:flex;justify-content:center;gap:6px;margin:0 0 14px}
.lieu-dots i{width:8px;height:8px;border-radius:99px;background:#C9D5DA}.lieu-dots i.on{width:26px;background:#E8184F}
.lieu-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;width:40px;height:40px;border:0;background:none;color:#8A9EA7;display:flex;align-items:center;justify-content:center}
.lieu-pin{width:58px;height:58px;border-radius:50%;background:#FDEBF0;color:#E8184F;display:flex;align-items:center;justify-content:center;margin:14px auto 10px;animation:lieuDrop .9s cubic-bezier(.34,1.56,.64,1) both}
.lieu-pin .i{width:28px;height:28px}
@keyframes lieuDrop{0%{transform:translateY(-36px);opacity:0}60%{opacity:1}100%{transform:none}}
.lieu h2{font-size:1.3rem;font-weight:800;text-align:center;margin:0 0 4px}
.lieu-sub{font-size:.82rem;color:#8A9EA7;text-align:center;margin:0 0 14px}
.lieu-fl{font-size:.72rem;font-weight:700;color:#8A9EA7;margin:12px 2px 5px}
.lieu-f{width:100%;min-height:46px;border:1.5px solid #D3DDE1;border-radius:14px;background:#fff;color:#0B1B20;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:inherit;font-size:.95rem;box-sizing:border-box}
.lieu-f.on,.lieu-f:focus-within{border-color:#E8184F}
.lieu-f input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;color:inherit;padding:0;height:44px}
.lieu-ph{color:#9FB0B7}
.lieu-cc{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:18px;border-radius:5px;background:#EEF3F5;font-size:.62rem;font-weight:800;color:#11252C;margin-right:9px}
.lieu-cv{width:16px;height:16px;transform:rotate(90deg);color:#8A9EA7}
.lieu-ok{width:18px;height:18px;color:#1DB954;vertical-align:-3px}
.lieu-det{min-height:0}
.lieu-dt{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:.7rem;font-weight:700;color:#1DB954;background:#E9F9EF;border-radius:99px;padding:3px 10px}
.lieu-dt .i{width:12px;height:12px}
.lieu-box{border:1px solid #EEF3F5;border-radius:14px;margin-top:6px;overflow:hidden;max-height:calc(46vh / var(--zm));overflow-y:auto;background:#fff;box-shadow:0 10px 24px -18px rgba(0,0,0,.4)}
.lieu-gh{font-size:.66rem;font-weight:700;color:#8A9EA7;background:#F6F9FA;padding:6px 12px}
.lieu-li{width:100%;display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border:0;border-top:1px solid #EEF3F5;background:#fff;color:#0B1B20;font:inherit;font-size:.9rem;text-align:left}
.lieu-li.on{background:#FDEBF0}
.lieu-li em{font-style:normal;font-size:.66rem;font-weight:700}.lieu-li em.ok{color:#1DB954}.lieu-li em.soon{color:#E09A00}
.lieu-sg{border:1px solid #D3DDE1;border-radius:14px;margin-top:5px;overflow:hidden;background:#fff}
.lieu-s{width:100%;display:block;text-align:left;padding:11px 14px;border:0;border-top:1px solid #EEF3F5;background:#fff;color:#0B1B20;font:inherit;font-size:.9rem}
.lieu-s:first-child{border-top:0}.lieu-s.oth{color:#8A9EA7;font-size:.82rem}.lieu-s .i{width:13px;height:13px;vertical-align:-2px}
.lieu-slot{height:11px;border-radius:7px;background:#11252C;margin:22px 4px 0;position:relative;z-index:3}
.lieu-tkw{height:132px;overflow:hidden;margin:0 14px;position:relative}
.lieu-tk{position:absolute;left:0;right:0;top:0;background:#FFF6CC;border:1px dashed #E0B800;border-radius:0 0 14px 14px;padding:12px 14px;transform:translateY(-105%)}
.lieu-tk.show{animation:lieuPrint .9s cubic-bezier(.22,1,.36,1) both}
@keyframes lieuPrint{0%{transform:translateY(-105%)}100%{transform:none}}
.lieu-t1{font-size:.7rem;color:#8A9EA7}.lieu-t2{font-size:1.15rem;font-weight:800;margin:3px 0}.lieu-t3{font-size:.74rem;color:#6B5B00}.lieu-t4{font-size:.74rem;font-weight:700;margin-top:6px;color:#0B1B20}
.lieu-go{position:absolute;left:18px;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);min-height:52px;border:0;border-radius:16px;background:#E3EAED;color:#9FB0B7;font:inherit;font-size:1rem;font-weight:800}
.lieu-go.on{background:#E8184F;color:#fff;box-shadow:0 12px 24px -14px rgba(232,24,79,.9);animation:lieuBeat 1.8s ease-in-out infinite}
@keyframes lieuBeat{0%,100%{transform:none}50%{transform:scale(1.025)}}
@media (prefers-reduced-motion: reduce){.lieu,.lieu.out,.lieu-pin,.lieu-tk.show,.lieu-go.on{animation:none}.lieu-tk.show{transform:none}}

.lieu.edit{z-index:40}

/* 2.6.13 — Tirer pour actualiser : routeur sous la barre du haut */
.ptr{position:fixed;left:0;right:0;z-index:6;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding-bottom:8px;pointer-events:none;opacity:0;color:var(--muted);font-size:.72rem;font-weight:700}
.ptr.rel{color:var(--gold-2)}

/* 2.6.13 — Pages « sans connexion » : centrées, illustration animée, nouvel essai automatique */
.offp{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:calc(calc(100vh / var(--zm)) - 230px);padding:0 22px 26px;color:var(--ink)}
.offp.lock{min-height:calc(100vh / var(--zm));padding:calc(env(safe-area-inset-top,0px) + 20px) 22px 26px;box-sizing:border-box}
.offp h2{font-size:1.2rem;font-weight:800;margin:0 0 6px}
.offp p{color:var(--muted);font-size:.84rem;max-width:300px;margin:0}
.offp-rt{position:relative;width:96px;height:34px;border-radius:9px;border:3px solid var(--teal-2,#087891);background:var(--card);display:flex;align-items:center;justify-content:space-evenly;margin:34px 0 14px;box-shadow:0 10px 22px -14px rgba(5,90,109,.8)}
.offp-rt:before,.offp-rt:after{content:"";position:absolute;top:-24px;width:3px;height:24px;border-radius:2px;background:var(--teal-2,#087891)}
.offp-rt:before{left:16px;transform:rotate(-12deg)}.offp-rt:after{right:16px;transform:rotate(12deg)}
.offp-rt i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.offp-rt i:first-child{background:#e52b2d;animation:offBlink 1.4s infinite}
.offp-rt span{position:absolute;right:-26px;top:50%;width:26px;height:3px;border-radius:2px;background:var(--muted);transform-origin:left;animation:offCab 2.4s ease-in-out infinite}
.offp-rt span:after{content:"";position:absolute;right:-6px;top:-4px;width:8px;height:11px;border-radius:2px;background:var(--muted)}
.offp-sv{position:relative;width:70px;margin:30px 0 14px}
.offp-sv div{height:20px;border-radius:7px;border:3px solid var(--teal-2,#087891);background:var(--card);margin-bottom:5px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px}
.offp-sv i{width:7px;height:7px;border-radius:50%;background:var(--line)}.offp-sv div:first-child i{background:#e52b2d;animation:offBlink 1.4s infinite}
.offp-cl{position:relative;width:84px;height:54px;margin:30px 0 14px;color:var(--teal-2,#087891)}
.offp-cl svg{width:84px;height:54px;display:block}.offp-cl svg path{fill:var(--card)}
.offp-cl span{position:absolute;left:8px;right:8px;top:26px;height:3px;border-radius:2px;background:#e52b2d;transform:rotate(-24deg);animation:offBlink 2.4s ease-in-out infinite}
@keyframes offBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes offCab{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(8px) rotate(-14deg)}}
.offp-ck{margin-top:12px;display:grid;gap:6px;text-align:left}
.offp-ck span{display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--muted)}.offp-ck .i{width:14px;height:14px;color:var(--teal-2,#087891);flex:none}
.offp-b{margin-top:18px;min-height:44px;padding:0 28px;border:0;border-radius:14px;background:#E8184F;color:#fff;font:inherit;font-size:.92rem;font-weight:800;display:inline-flex;align-items:center;gap:7px;box-shadow:0 12px 22px -14px rgba(232,24,79,.9)}
.offp-b .i{width:16px;height:16px}
.offp-a{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted)}
.offp-ring{width:18px;height:18px;border-radius:50%;border:3px solid var(--soft);border-top-color:var(--teal-2,#087891);animation:rot 2s linear infinite}
.offp-d{margin-top:12px;max-width:300px;font-size:.68rem;color:var(--faint)}
.offp-d summary{cursor:pointer;list-style:none}.offp-d summary::-webkit-details-marker{display:none}
.offp-d summary:after{content:" ›"}.offp-d[open] summary:after{content:" ˅"}
.offp-d div{margin-top:6px;word-break:break-word;user-select:text}
.offp-id{margin-top:14px;background:var(--card);border-radius:14px;padding:9px 16px;display:flex;flex-direction:column;gap:2px;font-size:.7rem;color:var(--muted)}
.offp-id b{font-size:.98rem;color:var(--ink)}.offp-id small{font-size:.62rem}
.offp-wa{margin-top:12px;font-size:.78rem;font-weight:700;color:var(--teal-2,#087891);display:inline-flex;align-items:center;gap:5px}
.offp-wa .i{width:15px;height:15px}
@media (prefers-reduced-motion: reduce){.offp-rt i,.offp-rt span,.offp-sv i,.offp-cl span,.offp-ring{animation:none}}
/* 2.6.14 — barre du haut : couche d'affichage à part, stable (certaines WebView Android pixellisent / font clignoter la 2e ligne quand l'écran bouge dessous) ; la transparence de la 2e ligne est remplacée par une couleur */
.topbar{isolation:isolate;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.topbar .tb-sub,.topbar .tb-title{-webkit-font-smoothing:antialiased}

/* 2.6.15 — tirer pour actualiser : pas de grand chargement au milieu de la page, seulement le petit routeur du haut ; la page s'estompe le temps du rechargement */
body.ptr-load #view{position:absolute;left:0;right:0;visibility:hidden;pointer-events:none}
.ptr-old{opacity:.5;pointer-events:none;transition:opacity .2s}

/* 2.6.15 — Mon VPN : routeur lié en une ligne, « VPN en place » en une ligne */
.vpn-lk1{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 10px;border-radius:12px;background:var(--soft);font-size:.78rem;min-width:0}
.vpn-lk1>.i{width:15px;height:15px;flex:none;color:var(--accent)}
.vpn-lk1>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpn-i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--muted);background:none;border:0}
.vpn-i .i{width:16px;height:16px}
.vpn-ok1{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:.78rem;color:var(--ok);font-weight:700}
.vpn-ok1 .i{width:15px;height:15px;flex:none}

/* =====================================================================
 * 2.6.22 — bouton Accueil « 3D » : anneau métallique en relief, cœur sombre enfoncé, maison cyan lumineuse, léger éclat en haut.
 * La place du menu (barre + bosse + bouton) est réservée : les pages s'arrêtent au-dessus, rien n'est caché en bas.
 * ===================================================================== */
:root { --nav-up: 26px; }
.nav button.mid .home { top: -19px; width: 42px; height: 42px; margin-left: -21px; color: #5fe3f7;
  background: radial-gradient(circle at 50% 18%, #7a8386 0%, #444b4e 38%, #23282a 70%, #121516 100%);
  box-shadow: 0 0 0 3px var(--card), 0 0 14px 1px rgba(63,208,234,.28), 0 5px 10px -2px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.28), inset 0 -2px 3px rgba(0,0,0,.45); }
.nav button.mid .home::before { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #262d30, #0e1214 78%); box-shadow: inset 0 2px 5px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.12); }
.nav button.mid .home::after { content: ""; position: absolute; left: 9px; right: 9px; top: 2.5px; height: 8px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0)); pointer-events: none; }
.nav button.mid .home .i { position: relative; z-index: 1; font-size: 19px; filter: drop-shadow(0 0 5px rgba(63,208,234,.85)) drop-shadow(0 0 1px rgba(95,227,247,.9)); }
.nav button.mid.on .home { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--card), 0 0 20px 3px rgba(63,208,234,.5), 0 6px 12px -2px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,.45); }
.nav button.mid:active .home { transform: scale(.93); }
.view { padding-bottom: calc(var(--nav-h) + var(--nav-up) + 16px + var(--safe-b)); }
.view.nonav { padding-bottom: 32px; }
#toasts { bottom: calc(var(--nav-h) + var(--nav-up) + 12px + var(--safe-b)); }
.mo-foot { bottom: calc(var(--nav-h) + var(--nav-up) + 4px + var(--safe-b, 0px)); }
.mo-sp { height: 58px; }
/* 2.6.22 : MikPay › Tableau : le bloc des messages, quand il est vide, ne prend plus sa part d'écart (12 px de moins entre le nom du routeur et la carte Solde) */
#mmNotes:empty { display: none; }
/* 2.6.22 : Hotspot › Utilisateur : la ligne d'actions (compteur · Imprimer · Vendre · CSV · poubelle) reste collée en haut, juste sous la barre de recherche,
 * tant qu'elle est affichée (un commentaire choisi ou une sélection en cours) ; quand elle disparaît (#hact vide) elle ne laisse aucune place. Fond plein : les tickets passent derrière. */
#hact:not(:empty) { position: sticky; top: calc(var(--tb-h, 40px) + var(--hsb-h, 0px)); z-index: 7; margin: 0 -8px; padding: 5px 8px 6px; background: var(--bg); border-bottom: 1px solid var(--line); }
#hact .hs-act { margin: 0; }
/* 2.6.23 : choix du protocole du VPN : un gros bouton par protocole (le recommandé, bordé de rose-rouge, en premier ; un protocole absent du serveur est grisé) */
.vpp-b { display: grid; gap: 10px; margin: 6px 0 4px; }
.vpp-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; text-align: left; border-radius: 16px; background: var(--card); border: 2px solid var(--line); box-shadow: 0 6px 16px -12px rgba(11,42,49,.5); transition: transform .15s var(--ease), border-color .2s; }
.vpp-btn:active { transform: scale(.98); }
.vpp-i { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--soft); color: var(--accent); }
.vpp-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vpp-t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 800; font-size: 1rem; color: var(--ink); }
.vpp-s { font-size: .78rem; font-weight: 600; color: var(--muted); line-height: 1.3; }
.vpp-e { flex: none; color: var(--faint); font-size: 18px; }
.vpp-btn.rec { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--card)); }
.vpp-btn.rec .vpp-i { background: linear-gradient(135deg, #F2386A, var(--brand-2)); color: #fff; }
.vpp-btn.off { opacity: .55; }

/* =====================================================================
 * 2.6.23 — barre du bas « encoche » (choisie : version B)
 * La barre est creusée en demi-cercle au centre (coins adoucis) ; le bouton Accueil 3D (56 px) est posé à moitié dans le trou, avec un petit vide autour.
 * Icônes et noms foncés et en gras, « Accueil » sur la même ligne que les autres noms.
 * Le bouton est à l'INVERSE du thème : sombre en thème clair, clair (argenté) en thème sombre.
 * ===================================================================== */
:root { --nav-h: 58px; --nav-up: 44px; }
.nav-bg { filter: drop-shadow(0 -5px 9px rgba(11,42,49,.10)); }
:root[data-theme="dark"] .nav-bg { filter: drop-shadow(0 -5px 9px rgba(0,0,0,.35)); }
.nav-bg::after { display: none; }
.nav-bg::before { border-top: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 28'%3E%3Cpath d='M0 0 C5 0 8 1 9.75 4 A37 37 0 0 0 78.25 4 C80 1 83 0 88 0 Z'/%3E%3C/svg%3E") 50% 0 / 88px 28px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.nav button { justify-content: flex-end; padding-bottom: 11px; gap: 5px; font-size: .7rem; font-weight: 800; color: var(--ink); text-shadow: none; }
.nav button .i { font-size: 22px; stroke-width: 2.3; transform: none !important; filter: none; transition: none; }
.nav button.on { color: var(--accent); text-shadow: none; }
.nav button.on .i { filter: none; }
.nav button.mid { flex: 1.2; padding-bottom: 11px; }
/* bouton 3D sombre (thème clair) : anneau métallique, cœur noir enfoncé, maison cyan lumineuse ; centre 10 px au-dessus du bord de la barre */
.nav button.mid .home { top: -38px; width: 56px; height: 56px; margin-left: -28px; color: #5fe3f7;
  background: radial-gradient(circle at 50% 18%, #7a8386 0%, #444b4e 38%, #23282a 70%, #121516 100%);
  box-shadow: 0 0 0 3px #14171a, 0 7px 14px -3px rgba(0,0,0,.5), 0 0 18px 2px rgba(63,208,234,.16), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 4px rgba(0,0,0,.45); }
.nav button.mid .home::before { inset: 7px; background: radial-gradient(circle at 50% 28%, #262d30, #0e1214 78%); box-shadow: inset 0 3px 7px rgba(0,0,0,.85), inset 0 0 16px rgba(63,208,234,.22), 0 1px 0 rgba(255,255,255,.14); }
.nav button.mid .home::after { left: 20%; right: 20%; top: 5%; height: 18%; background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0)); }
.nav button.mid .home .i { font-size: 22px; stroke-width: 2.1; filter: drop-shadow(0 0 6px rgba(63,208,234,.9)); }
.nav button.mid.on .home { transform: none; box-shadow: 0 0 0 3px #14171a, 0 7px 14px -3px rgba(0,0,0,.5), 0 0 22px 3px rgba(63,208,234,.3), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 4px rgba(0,0,0,.45); }
/* bouton 3D clair (thème sombre) : anneau argenté, cœur blanc nacré, maison sarcelle */
:root[data-theme="dark"] .nav button.mid .home { color: #0a8fa8;
  background: radial-gradient(circle at 50% 18%, #ffffff 0%, #e4e9ec 40%, #c3ccd2 75%, #a9b4bb 100%);
  box-shadow: 0 0 0 2.5px #b9c3c9, 0 7px 14px -4px rgba(0,0,0,.45), 0 0 16px 2px rgba(15,179,207,.14), inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 4px rgba(11,42,49,.18); }
:root[data-theme="dark"] .nav button.mid .home::before { background: radial-gradient(circle at 50% 30%, #ffffff, #eef4f6 70%, #dde6ea 100%); box-shadow: inset 0 3px 6px rgba(11,42,49,.18), inset 0 0 12px rgba(15,179,207,.14), 0 1px 0 rgba(255,255,255,.9); }
:root[data-theme="dark"] .nav button.mid .home::after { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); }
:root[data-theme="dark"] .nav button.mid .home .i { filter: drop-shadow(0 0 4px rgba(15,179,207,.45)); }
:root[data-theme="dark"] .nav button.mid.on .home { box-shadow: 0 0 0 2.5px #b9c3c9, 0 7px 14px -4px rgba(0,0,0,.45), 0 0 20px 3px rgba(15,179,207,.25), inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 4px rgba(11,42,49,.18); }
/* 2.6.23 : Accueil › Ce mois-ci : les deux cartes (Chiffre d'affaires, Tickets vendus) ont la même hauteur (la règle « carte après carte » ajoutait 6 px au-dessus de la seconde) */
.hm .hm-month > .card, .hm .hm-month > .card + .card { margin: 0; }
/* 2.6.23 — barre du bas, étape 1 : textes et couleurs comme en 2.6.20 (police .6rem gras, icônes 18 px, gris-vert au repos, couleur d'accent au choix, en clair et en sombre) ;
   plus de pastille ni de halo : seulement le trait en haut de l'onglet choisi ; bouton Accueil 47 px plus bas */
:root { --nav-up: 34px; }
.nav button { color: var(--muted); font-size: .6rem; font-weight: 700; gap: 1px; padding-bottom: 8px; text-shadow: none; }
.nav button .i { font-size: 18px; stroke-width: 2; filter: none; }
.nav button.on { color: var(--accent); text-shadow: none; }
.nav button.on .i { filter: none; }
.nav button.on:not(.mid)::after { display: none; }
.nav button.on:not(.mid)::before { content: ""; position: absolute; left: 50%; top: 0; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 3px 3px; background: var(--accent); box-shadow: none; }
.nav button.mid.on .lab::after { display: none; }
.nav button.mid .home { top: -26.5px; width: 47px; height: 47px; margin-left: -23.5px; }
.nav button.mid .home::before { inset: 6px; }
.nav button.mid .home .i { font-size: 19px; }
.nav-bg::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cpath d='M0 0 C5 0 7.4 1.2 8.26 4 A32.5 32.5 0 0 0 71.74 4 C72.6 1.2 75 0 80 0 Z'/%3E%3C/svg%3E") 50% 0 / 80px 30px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.nav button.mid.on .home, :root[data-theme="dark"] .nav button.mid.on .home { box-shadow: 0 0 0 3px #14171a, 0 7px 14px -3px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 4px rgba(0,0,0,.45); }
:root[data-theme="dark"] .nav button.mid.on .home { box-shadow: 0 0 0 2.5px #b9c3c9, 0 7px 14px -4px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 4px rgba(11,42,49,.18); }
/* 2.6.23 — barre du bas, étape 2 : toute la bande du menu plus basse (52 px au lieu de 58) et le bouton Accueil plus bas (centre à 1 px au-dessus du bord, avant 3 px) */
:root { --nav-h: 52px; --nav-up: 32px; }
.nav button { padding-bottom: 6px; }
.nav button.mid .home { top: -24.5px; }
.nav-bg::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 32'%3E%3Cpath d='M0 0 C5 0 7.4 1.8 8.26 6 A32.5 32.5 0 0 0 71.74 6 C72.6 1.8 75 0 80 0 Z'/%3E%3C/svg%3E") 50% 0 / 80px 32px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
/* 2.6.23 — barre du bas, étape 3 : les cinq noms sur la même ligne (le bouton Accueil avait un bas de 11 px au lieu de 6 px) */
.nav button.mid { padding-bottom: 6px; }

/* 2.6.24 — choix du protocole VPN : bouton rond devant chaque protocole, rien de choisi d'avance, « Continuer » après le choix */
.vpp-r { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--faint); display: grid; place-items: center; }
.vpp-btn.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.vpp-btn.on .vpp-r { border-color: var(--brand); }
.vpp-btn.on .vpp-r::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); }
.vpp-i { width: 40px; height: 40px; }
.vpp-go { margin-top: 12px; }
.vpp-go[disabled] { background: var(--line); color: var(--muted); box-shadow: none; }

/* 2.6.25 — onglet Accès du VPN : une seule petite carte (nom, accès allumés avec adresse, copier, interrupteur) */
.vpn-sm{padding:8px 10px}
.vpn-sm .f{margin-bottom:4px}.vpn-sm .f input{height:34px;font-size:.84rem}
.vpn-sm .sec{margin:8px 0 2px;padding:0}.vpn-sm .sec h3{font-size:.62rem}
.vpn-sr{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.vpn-sr .m{flex:1;min-width:0;display:flex;flex-direction:column}
.vpn-sr .m b{font-size:.8rem;line-height:1.2}
.vpn-sr .m .mono{font-size:.68rem;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.vpn-sr .m small{font-size:.62rem;color:var(--muted);line-height:1.25}
.vpn-cp{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--accent);display:grid;place-items:center;padding:0;cursor:pointer}
.vpn-cp .i{width:15px;height:15px}
.vpn-sw{flex:none;display:flex;cursor:pointer}
.vpn-sw input{appearance:none;-webkit-appearance:none;width:36px;height:21px;border-radius:99px;background:var(--line);position:relative;margin:0;cursor:pointer;transition:background .2s}
.vpn-sw input::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .2s}
.vpn-sw input:checked{background:var(--ok)}.vpn-sw input:checked::after{transform:translateX(15px)}
.vpn-sw input:disabled{opacity:.5}.vpn-sw input:focus-visible{outline:2px solid var(--teal-3);outline-offset:2px}
.vpn-sb{display:flex;gap:6px;margin-top:8px}.vpn-sb .btn{flex:1;height:30px;font-size:.72rem;padding:0 8px}

/* 2.6.25 — carte « Réseau global » compacte : petit anneau + titre, puis deux pastilles (bientôt · expiré) */
.pp-net2{padding:10px 12px}
.pp-n2h{display:flex;align-items:center;gap:12px}
.pp-net2 .pp-ringw{width:56px;height:56px;margin:0;flex:none;padding:0;background:none;color:inherit}
.pp-net2 .pp-ringw circle{stroke-width:14}
.pp-net2 .pp-ringc{display:flex;align-items:center;justify-content:center}
.pp-net2 .pp-ringc b{font-size:.78rem;font-weight:800}
.pp-n2t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:none;font:inherit;color:inherit;padding:0}
.pp-n2t b{font-size:.92rem}
.pp-n2t span{font-size:.76rem;color:var(--muted);font-weight:600}
.pp-n2p{display:flex;gap:6px;margin-top:9px}
.pp-pl{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:5px 9px;border-radius:99px;font:inherit;font-size:.78rem;font-weight:800;border:1px solid transparent}
.pp-pl .i{width:16px;height:16px;flex:none}
.pp-pl.soon{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4);color:#a86600}
.pp-pl.end{background:rgba(229,43,45,.12);border-color:rgba(229,43,45,.4);color:#b4232f}
.pp-pl.pulse{animation:ppPulse 1.4s ease-in-out .6s 1}
:root[data-theme="dark"] .pp-pl.soon{color:#f5b84a}:root[data-theme="dark"] .pp-pl.end{color:#ff8a92}

/* 2.6.25 — Hotspot › En ligne : download (↓) et upload (↑) côte à côte, sous la durée */
.srvrow .end .ioz{display:flex;gap:9px;justify-content:flex-end;white-space:nowrap}
.srvrow .end .ioz .i{width:13px;height:13px}
.srvrow .end .dn{color:#1aa7bb}.srvrow .end .upc{color:#d98a1c}
:root[data-theme="dark"] .srvrow .end .dn{color:#2ec4d6}:root[data-theme="dark"] .srvrow .end .upc{color:#f0a13a}

/* 2.6.25 — bouton Accueil plus petit (41 px au lieu de 47 px) et plus bas (centre à 3 px SOUS le bord haut de la barre, avant 1 px au-dessus) ; le creux de la barre suit */
.nav button.mid .home { top: -17.5px; width: 41px; height: 41px; margin-left: -20.5px; }
.nav button.mid .home::before { inset: 5px; }
.nav button.mid .home .i { font-size: 17px; }
.nav-bg::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 33'%3E%3Cpath d='M0 0 C5 0 9 1.8 10.65 6 A29.5 29.5 0 0 0 69.35 6 C71 1.8 75 0 80 0 Z'/%3E%3C/svg%3E") 50% 0 / 80px 33px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }

/* 2.6.25 — carte « PPPoE à configurer » plus compacte ; bouton « Ajouter un abonné » un peu plus grand */
.wz-card { padding: 8px 10px; margin-bottom: 8px; }
.wz-card .wz-h > .i { width: 26px; height: 26px; padding: 5px; font-size: 16px; border-radius: 8px; }
.wz-card .wz-h b { font-size: .82rem; }
.wz-card p { font-size: .72rem; line-height: 1.3; margin: 4px 0 7px; }
.wz-card .btn.sm { padding-top: 7px; padding-bottom: 7px; font-size: .8rem; }
.pp-add { font-size: .95rem; padding-top: 12px; padding-bottom: 12px; }

/* 2.6.25 — ventes du jour et du mois dans la carte « Réseau global » */
.pp-vm { display: flex; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.pp-vm button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 0; color: inherit; font: inherit; padding: 0 4px; }
.pp-vm button + button { border-left: 1px solid var(--line); }
.pp-vm span { font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pp-vm b { font-size: 1.02rem; font-weight: 800; color: var(--ink); }
.pp-vm small { font-size: .68rem; color: var(--muted); }

/* 2.6.25 — alertes : pastille ronde pleine, carte sans barre de couleur (partout où la barre existait) */
.pp-ali .i { width: 18px; height: 18px; }
:root[data-theme="dark"] .pp-al, :root[data-theme="dark"] .mm-notes { box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* 2.6.25 — assistant d'assistance : bulle (page Réglages) et fenêtre de discussion */
.sup-fab { position: fixed; right: 14px; bottom: 96px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #E8184F, #b80f3c); box-shadow: 0 6px 16px rgba(184,15,60,.45); }
.sup-fab .i { width: 26px; height: 26px; }
.sup-hi { position: fixed; right: 14px; bottom: 156px; z-index: 40; max-width: 200px; background: var(--card); color: var(--ink); border-radius: 14px 14px 4px 14px; padding: 8px 11px; font-size: .78rem; font-weight: 700; box-shadow: 0 3px 12px rgba(11,42,49,.2); }
.sup { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: flex-end; animation: supIn .22s ease-out; }
.sup.out { opacity: 0; transition: opacity .2s; }
@keyframes supIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sup-bg { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.sup-box { position: relative; height: min(560px, 82vh); display: flex; flex-direction: column; background: var(--bg); border-radius: 20px 20px 0 0; overflow: hidden; box-shadow: 0 -8px 30px rgba(0,0,0,.3); }
.sup-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: #fff; background: linear-gradient(90deg, #0f6f86, #0b4f63); }
.sup-h > div { flex: 1; min-width: 0; } .sup-h b { display: block; font-size: .92rem; } .sup-h small { font-size: .68rem; opacity: .85; }
.sup-av { width: 34px; height: 34px; border-radius: 50%; background: #E8184F; display: grid; place-items: center; flex: none; } .sup-av .i { width: 18px; height: 18px; }
.sup-x { background: none; border: 0; color: #fff; width: 32px; height: 32px; display: grid; place-items: center; } .sup-x .i { width: 20px; height: 20px; }
.sup-m { flex: 1; overflow-y: auto; padding: 10px 12px; }
.sup-b { display: flex; margin: 6px 0; } .sup-b.me { justify-content: flex-end; }
.sup-b span { max-width: 80%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: var(--card); color: var(--ink); font-size: .82rem; line-height: 1.3; box-shadow: 0 1px 4px rgba(11,42,49,.12); overflow-wrap: anywhere; }
.sup-b.me span { border-radius: 14px 14px 4px 14px; color: #fff; background: linear-gradient(135deg, #E8184F, #b80f3c); }
.sup-q { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; } .sup-q[hidden] { display: none; }
.sup-q button { border: 1px solid var(--teal-2, #0fb3cf); color: var(--teal-2, #0a8aa0); background: transparent; border-radius: 99px; padding: 5px 10px; font: inherit; font-size: .74rem; font-weight: 700; }
.sup-f { display: flex; gap: 8px; padding: 9px 10px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.sup-f input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: .85rem; background: var(--bg); color: var(--ink); outline: 0; }
.sup-s { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #E8184F; color: #fff; display: grid; place-items: center; flex: none; } .sup-s .i { width: 20px; height: 20px; }

.lieu-req { color: #E8184F; }
/* 2.6.25 — bulle d'assistance au-dessus du pied de page (version, copyright) ; la page garde de la place en bas */
.sup-fab { bottom: calc(var(--nav-h) + var(--nav-up, 0px) + 58px + var(--safe-b, 0px)); }
.sup-hi { bottom: calc(var(--nav-h) + var(--nav-up, 0px) + 120px + var(--safe-b, 0px)); }
.mo-sp { height: 120px; }

/* 2.6.25 — assistance, bouton n° 5 : salutation à côté de l'avatar, sur la même ligne ; point vert = en ligne, gris = hors ligne */
.sup-fab, .sup-hi { display: none; }
.sup-row { position: fixed; right: 12px; bottom: calc(var(--nav-h) + var(--nav-up, 0px) + 58px + var(--safe-b, 0px)); z-index: 40; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); }
.sup-bb { display: block; max-width: 168px; text-align: left; background: var(--card); border-radius: 16px 16px 4px 16px; padding: 8px 11px; box-shadow: 0 3px 12px rgba(11,42,49,.2); }
.sup-bb b { display: block; font-size: .78rem; line-height: 1.2; } .sup-bb small { display: block; margin-top: 2px; font-size: .68rem; color: var(--muted); line-height: 1.25; }
.sup-ava { position: relative; display: block; width: 52px; height: 52px; border-radius: 50%; flex: none; background: #fff; box-shadow: 0 6px 16px rgba(11,42,49,.28); }
.sup-ava svg, .sup-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sup-ava:not(.on) svg, .sup-ava:not(.on) img { filter: grayscale(1); }
.sup-ava i { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; background: #9aa7ad; }
.sup-ava.on i { background: #22c55e; }
.sup-ava.hd { width: 40px; height: 40px; box-shadow: none; } .sup-ava.hd i { border-color: #0b4f63; }
.sup-h.off { background: linear-gradient(90deg, #5d7078, #43555c); } .sup-h.off .sup-ava.hd i { border-color: #43555c; }
.sup-ava.sm { width: 28px; height: 28px; box-shadow: none; } .sup-ava.sm i { display: none; }
.sup-b { align-items: flex-end; gap: 7px; }

.sup-who { font-size: .64rem; color: var(--muted); margin: 6px 0 -3px 35px; }
.sup-un { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 99px; background: #E8184F; color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.sup-b span.sup-ava { padding: 0; max-width: none; background: #fff; box-shadow: none; border-radius: 50%; flex: none; }
.sup-b span.sup-ava.sm { width: 28px; height: 28px; }

/* 2.6.26 — carte « Total de tous les routeurs » : plus de bande de couleur à gauche (comme les alertes) ; ombre plus marquée en thème sombre */
:root[data-theme="dark"] .mm-cum { box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* 2.6.26 — discussion : bandeau d'erreur visible quand les réponses ne peuvent pas être lues */
.sup-st { margin: 8px 12px 0; padding: 7px 10px; border-radius: 10px; background: #fff3df; color: #8a5a00; font-size: .74rem; line-height: 1.3; }
.sup-st[hidden] { display: none; }
/* 2.6.26 — assistance : aides immédiates (boutons vers le bon écran), « Ça vous a aidé ? », boutons WhatsApp */
.sup-go, .sup-wa, .sup-ok { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.sup-go button { border: 1px solid var(--teal-2, #0fb3cf); color: var(--teal-2, #0a8aa0); background: transparent; border-radius: 99px; padding: 5px 11px; font: inherit; font-size: .74rem; font-weight: 700; }
.sup-wa button { display: inline-flex; align-items: center; gap: 6px; border: 0; color: #fff; background: #25d366; border-radius: 99px; padding: 7px 13px; font: inherit; font-size: .76rem; font-weight: 800; }
.sup-wa button .i { width: 15px; height: 15px; }
.sup-ok { font-size: .72rem; color: var(--muted); } .sup-ok button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 99px; padding: 4px 10px; font: inherit; font-size: .72rem; font-weight: 700; }
.sup-q { gap: 6px; } .sup-q button { font-size: .72rem; }
.sup-b span .sup-go, .sup-b span .sup-wa, .sup-b span .sup-ok { padding: 0; background: none; box-shadow: none; max-width: none; border-radius: 0; }

/* 2.6.26 — Réglages : version et copyright descendus tout près de l'icône Accueil, sans la toucher ; la bulle d'assistance suit */
.mo-foot { bottom: calc(var(--nav-h) + var(--nav-up) + var(--safe-b, 0px)); padding: 4px 12px 1px; }
.mo-sp { height: 100px; }
.sup-row { bottom: calc(var(--nav-h) + var(--nav-up) + 44px + var(--safe-b, 0px)); }

/* 2.6.27 — discussion : photos et messages vocaux (image · champ · micro ; l'avion remplace le micro dès qu'on écrit) */
.sup-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; cursor: pointer; } .sup-ic .i { width: 21px; height: 21px; }
.sup-rec { display: flex; align-items: center; gap: 8px; padding: 9px 10px calc(12px + env(safe-area-inset-bottom)) 14px; background: var(--card); border-top: 1px solid var(--line); }
.sup-rec[hidden], .sup-f[hidden] { display: none; }
.sup-rec > i { width: 10px; height: 10px; border-radius: 50%; background: #E8184F; animation: supBlink 1s infinite; } .sup-rec b { font-size: .9rem; } .sup-rec > span { flex: 1; font-size: .74rem; color: var(--muted); }
.sup-rx { border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 700; padding: 6px 8px; }
@keyframes supBlink { 50% { opacity: .2; } }
.sup-b span .sup-au, .sup-b span .sup-bar, .sup-b span .sup-bar i { padding: 0; max-width: none; box-shadow: none; border-radius: 0; background: none; }
.sup-au { display: flex !important; align-items: center; gap: 8px; width: 180px; }
.sup-pl { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #0fb3cf; color: #fff; flex: none; } .sup-pl .i { width: 15px; height: 15px; }
.sup-b.me .sup-pl { background: #fff; color: #E8184F; }
.sup-b span .sup-bar { flex: 1; height: 4px; border-radius: 4px !important; background: rgba(127,127,127,.35) !important; overflow: hidden; display: block; } .sup-b span .sup-bar i { display: block; height: 100%; width: 0; background: currentColor !important; }
.sup-au small { font-size: .68rem; opacity: .8; }
.sup-pic { display: block; width: 180px; min-height: 110px; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.12); }
.sup-pic img { display: block; width: 100%; height: auto; }
.sup-gone { font-size: .76rem; opacity: .75; }
.sup-zoom { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 14px; } .sup-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* 2.6.27 — marge du bas des pages : la dernière carte s'arrête à 10 px de la barre (avant : 100 px) ; Réglages garde la place de son pied de page */
.view { padding-bottom: calc(var(--nav-h) + 10px + var(--safe-b)); }

/* 2.6.27 — Ventes : recherche globale des tickets vendus (les totaux disparaissent pendant la recherche) */
.sg-card { padding: 0; overflow: hidden; margin-bottom: 8px; }
.sg-ok { display: flex; align-items: center; gap: 10px; padding: 12px; color: #fff; background: linear-gradient(135deg, #16a34a, #15803d); }
.sg-ok > span { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; } .sg-ok .i { width: 20px; height: 20px; }
.sg-ok b { display: block; font-size: 1.05rem; } .sg-ok small { font-size: .74rem; opacity: .9; }
.sg-code { padding: 10px 12px 4px; font-size: 1.25rem; font-weight: 800; }
.sg-kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: .8rem; } .sg-kv span { color: var(--muted); } .sg-kv b { text-align: right; overflow-wrap: anywhere; }
.sg-n { text-align: center; font-size: .72rem; margin: 8px 0 0; }
.sg-av { color: #16a34a !important; background: rgba(22,163,74,.14) !important; } .sg-pf { color: var(--accent); }
.sg-none { text-align: center; padding: 26px 16px; } .sg-none > span { width: 54px; height: 54px; border-radius: 50%; background: rgba(229,43,45,.12); color: #e52b2d; display: inline-grid; place-items: center; margin-bottom: 8px; } .sg-none .i { width: 26px; height: 26px; }
.sg-none b { display: block; font-size: 1.05rem; } .sg-none p { margin: 4px 0 0; font-size: .8rem; }
#sgmain[hidden], #sgres[hidden] { display: none; }

/* 2.6.27 — bande « le réseau a changé » */
.netbar { position: fixed; left: 10px; right: 10px; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 70; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: #ede9fe; color: #5b21b6; font-size: .78rem; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.netbar .i { width: 16px; height: 16px; flex: none; }
:root[data-theme="dark"] .netbar { background: #2e1f5a; color: #ddd6fe; }

/* 2.6.27 — licence terminée : les pages bloquées restent visibles avec un cadenas */
.nav button.lk { opacity: .55; position: relative; }
.nav button.lk .lkb { position: absolute; top: 4px; left: 50%; margin-left: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--card, #fff); color: #e52b2d; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line); }
.nav button.lk .lkb .i { width: 9px; height: 9px; }
.item.lk { opacity: .7; } .item.lk .end .i { width: 16px; height: 16px; color: #e52b2d; }
.lk-box { text-align: center; padding: 8px 4px 16px; } .lk-box b { display: block; font-size: 1.05rem; margin-top: 8px; } .lk-box p { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.lk-ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(229,43,45,.12); color: #e52b2d; display: inline-grid; place-items: center; } .lk-ic .i { width: 26px; height: 26px; }

/* 2.6.27 — chargement « paquets de données » (local · VPN · serveur) et barre rose du « tirer pour actualiser » */
.ldp { display: flex; align-items: center; gap: 7px; }
.ldp-ph { width: 16px; height: 26px; border: 2.5px solid var(--muted); border-radius: 5px; flex: none; }
.ldp-l { position: relative; width: 74px; height: 10px; border-top: 2px dashed var(--line); margin-top: 8px; }
.ldp-l b { position: absolute; top: -6px; left: 0; width: 9px; height: 9px; border-radius: 2px; background: #E8184F; opacity: 0; animation: ldpPk 1.4s linear infinite; will-change: transform, opacity; }
.ldp-l b:nth-child(2) { background: #0fb3cf; animation-delay: .47s; } .ldp-l b:nth-child(3) { background: #f2b705; animation-delay: .94s; }
.ldp .ldp-to { width: 30px; height: 30px; color: #0a7f95; flex: none; } .ldp-srv .ldp-to { color: #E8184F; }
.ldp-vpn .ldp-l { width: 88px; height: 26px; margin-top: 0; border: 0; border-radius: 13px; background: #ede9fe; }
.ldp-vpn .ldp-l b { top: 9px; }
.ldp-lk { width: 30px; height: 30px; margin-left: -20px; border-radius: 50%; background: #7c3aed; color: #fff; display: grid; place-items: center; flex: none; z-index: 1; } .ldp-lk .i { width: 15px; height: 15px; }
@keyframes ldpPk { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(var(--ldp-w, 65px)); opacity: 0; } }
.ldp-vpn .ldp-l b { --ldp-w: 66px; }
.ptr-bar { position: fixed; left: 0; right: 0; height: 3px; z-index: 60; overflow: hidden; background: rgba(232,24,79,.15); pointer-events: none; transition: opacity .35s .1s; }
.ptr-bar i { position: absolute; top: 0; left: 0; width: 35%; height: 100%; background: #E8184F; animation: ptrBar 1.1s ease-in-out infinite; }
.ptr-bar.done i { animation: none; width: 100%; transition: width .25s; }
.ptr-bar.done { opacity: 0; }
@keyframes ptrBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
:root[data-theme="dark"] .ldp-vpn .ldp-l { background: #2e1f5a; }
@media (prefers-reduced-motion: reduce) { .ldp-l b { animation: none; opacity: 1; } .ldp-l b:nth-child(2) { left: 32px; } .ldp-l b:nth-child(3) { left: 62px; } .ptr-bar i { animation: none; width: 60%; } }

/* 2.6.28 — croix de la photo agrandie du support */
.sup-zx { position: absolute; top: calc(14px + var(--safe-t)); right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 1.15rem; }

/* 2.6.28 — Bilan du jour et du mois */
.bl-seg { display: flex; margin: 0 0 10px; } .bl-seg button { flex: 1; }
.bl-hero { border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; background: linear-gradient(135deg, #ffd700, #f2b705); color: #3d2c00; }
.bl-hero small { display: block; font-size: .72rem; font-weight: 700; opacity: .85; } .bl-hero b { display: block; font-size: 1.6rem; font-weight: 800; margin: 2px 0; } .bl-hero div { font-size: .74rem; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bl-card { margin-bottom: 10px; padding: 2px 0; } .bl-r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .bl-r:last-child { border: 0; }
.bl-d { width: 10px; height: 10px; border-radius: 50%; flex: none; } .bl-m { flex: 1; min-width: 0; } .bl-m b { display: block; font-size: .84rem; } .bl-m small { font-size: .7rem; color: var(--muted); } .bl-a { font-weight: 800; font-size: .86rem; }
.bl-bar { height: 5px; border-radius: 3px; background: var(--soft); overflow: hidden; margin-top: 4px; } .bl-bar i { display: block; height: 100%; border-radius: 3px; }

/* 2.6.28 — Vente de tickets express */
.acts .act.vx-btn { position: relative; overflow: visible; font-weight: 800; }
.vx-new { position: absolute; top: -7px; right: -4px; z-index: 1; background: linear-gradient(135deg, #ff4d7a, #E8184F); color: #fff; font-size: .54rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.2); animation: vxSway 2.4s ease-in-out infinite; }
@keyframes vxSway { 0%, 45%, 60%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg) scale(1.08); } 55% { transform: rotate(6deg); } }
.vx-top { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.vx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vx-t { position: relative; background: var(--card); border-radius: 16px; padding: 14px 8px 12px; text-align: center; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 2px; align-items: center; }
.vx-t:active { transform: scale(.97); } .vx-t b { font-size: .9rem; } .vx-t span { font-size: 1.15rem; font-weight: 800; color: var(--brand); } .vx-t small { font-size: .66rem; color: var(--muted); }
.vx-t em { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .54rem; font-weight: 800; background: var(--gold-2); color: #3d2c00; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.vx-q { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0 2px; } .vx-q button { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); font-size: 1.1rem; font-weight: 800; color: var(--ink); } .vx-q b { font-size: .84rem; }
.vx-ok { border-radius: 16px; padding: 14px; margin-bottom: 12px; text-align: center; color: #fff; background: linear-gradient(135deg, #087891, #055a6d); }
.vx-ok small { display: block; font-size: .72rem; opacity: .92; } .vx-code { font-size: 1.9rem; font-weight: 800; letter-spacing: .12em; margin: 4px 0; }
.vx-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .vx-acts .btn { width: 100%; } .vx-wa { background: #16a34a; color: #fff; }
.vx-row { padding: 10px 12px; margin-bottom: 9px; } .vx-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 7px; } .vx-h b { font-size: .86rem; } .vx-h span { font-size: .72rem; color: var(--muted); }
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; } .vx-chips button { padding: 5px 10px; border-radius: 999px; background: var(--soft); font-size: .74rem; font-weight: 700; color: var(--ink); } .vx-chips button.on { background: var(--teal); color: #fff; }
.vx-row input { width: 100%; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem; outline: none; } .vx-row input:focus { border-color: var(--teal-3); box-shadow: 0 0 0 3px rgba(15,179,207,.15); }
@media (prefers-reduced-motion: reduce) { .vx-new { animation: none; } }

/* 2.6.28 — Diagnostic */
.dg-list .dg-r { cursor: default; align-items: flex-start; } .dg-r .s { white-space: normal; line-height: 1.4; }
.dg-ic .i { width: 18px; height: 18px; } .dg-ok .dg-ic { color: #16a34a; background: rgba(22,163,74,.12); } .dg-warn .dg-ic { color: #d97706; background: rgba(245,158,11,.14); }
.dg-bad .dg-ic { color: #e52b2d; background: rgba(229,43,45,.12); } .dg-info .dg-ic { color: var(--muted); } .dg-run .dg-ic { color: var(--teal-3); }
.dg-fix { margin-top: 7px; display: inline-flex; }
.dg-sum { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 14px; margin: 10px 0 2px; font-size: .86rem; }
.dg-sum .i { width: 20px; height: 20px; } .dg-sum.ok { background: rgba(22,163,74,.12); color: #15803d; } .dg-sum.warn { background: rgba(245,158,11,.14); color: #b45309; } .dg-sum.bad { background: rgba(229,43,45,.12); color: #c81e1e; }

/* 2.6.28 — code secret obligatoire, sauvegarde */
.bk-warn { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; margin: 10px 0; background: rgba(232,24,79,.1); color: var(--ink); border: 1px solid rgba(232,24,79,.35); }
.bk-warn > .i { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 1px; } .bk-warn b { display: block; color: var(--brand); font-size: .86rem; } .bk-warn p { margin: 3px 0 0; font-size: .76rem; line-height: 1.4; }
.bk-first { text-align: center; } .bk-first > p { font-size: .82rem; color: var(--muted); margin: 6px 4px 0; line-height: 1.45; } .bk-first .bk-warn { text-align: left; }
.bk-logo { width: 56px; height: 56px; border-radius: 16px; }
.bk-ck { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 4px 2px 12px; font-size: .8rem; font-weight: 700; cursor: pointer; } .bk-ck input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--teal); }

/* 2.6.28 — vente express : forfaits affichés au choix */
.vx-cnt { margin: 0 2px 8px; font-size: .78rem; font-weight: 800; color: var(--teal-2); } .sheet .vx-cnt, .sheet.vx .vx-cnt { color: #7fe3f2; }
.vx-show { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: .78rem; font-weight: 700; cursor: pointer; }
.vx-show input { width: 20px; height: 20px; accent-color: var(--teal); flex: none; }
/* 2.6.28 — clavier du code secret « Nuit et or » : fond bleu nuit uni, touches translucides sans bordure, chiffres fins, points dorés */
.sheet.pin .box { background: linear-gradient(180deg, #0d3038 0%, #0b2a31 45%, #071d22 100%); }
.pin-logo { width: 54px; height: 54px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(242,183,5,.55), 0 12px 26px -12px rgba(0,0,0,.7); }
.pin-title { font-size: 1.15rem; font-weight: 600; letter-spacing: .01em; }
.pin-sub { font-size: .8rem; opacity: .65; }
.sheet.pin .pin-dots { gap: 14px; margin: 24px 0 6px; }
.sheet.pin .pin-dots i { width: 11px; height: 11px; border: 0; background: rgba(255,255,255,.22); }
.sheet.pin .pin-dots i.on { background: #f2b705; border: 0; box-shadow: 0 0 10px rgba(242,183,5,.45); }
.sheet.pin .pin-dots.bad i { background: #ff6b6b; } .sheet.pin .pin-dots.good i { background: #4ade80; }
.sheet.pin .pin-keys button { width: 68px; height: 68px; font-size: 1.6rem; font-weight: 400; background: rgba(255,255,255,.08); border: 0; }
.sheet.pin .pin-keys button:active { background: rgba(242,183,5,.28); }
.sheet.pin .pin-keys button.alt { background: transparent; opacity: .75; font-size: 1.35rem; }
.sheet.pin .pin-keys button.bio svg { color: #f2b705; }
.pin-forgot { color: rgba(255,255,255,.6); text-decoration: none; font-size: .8rem; }

/* 2.6.28 — vente express : cartes « billet », nombre de tickets (pastilles + saisie), progression */
.vx-t.vx-bil { flex-direction: row; align-items: stretch; gap: 0; padding: 0; overflow: hidden; text-align: left; border-radius: 14px; min-height: 84px; }
.vx-bm { flex: 1; min-width: 0; padding: 10px 9px; display: flex; flex-direction: column; justify-content: space-between; gap: 3px; }
.vx-k { font-size: .56rem; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.vx-bil .vx-bm b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-bil .vx-bm small { font-size: .62rem; color: var(--muted); }
.vx-bs { width: 50px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .82rem; font-weight: 800; writing-mode: vertical-rl; transform: rotate(180deg); border-right: 2px dashed rgba(255,255,255,.9); }
.vx-bil em { left: auto; right: 56px; transform: none; top: 4px; }
.vx-qa { margin-top: 14px; } .vx-ql { display: block; font-size: .72rem; font-weight: 800; color: var(--muted); margin: 0 2px 7px; }
.vx-qc { display: flex; gap: 7px; flex-wrap: wrap; } .vx-qc button { padding: 7px 14px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-weight: 800; font-size: .84rem; color: var(--ink); } .vx-qc button.on { background: var(--teal); color: #fff; box-shadow: none; }
.vx-qi { display: flex; align-items: center; gap: 8px; margin-top: 9px; } .vx-qi input { flex: 1; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem; font-weight: 700; outline: none; } .vx-qi input:focus { border-color: var(--teal-3); } .vx-qi span { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.vx-run { padding: 26px 6px; text-align: center; } .vx-run b { font-size: .92rem; } .vx-bar { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; margin-top: 12px; } .vx-bar i { display: block; height: 100%; width: 0; background: var(--teal-3); transition: width .2s; }
.vx-emo { height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: 1rem; padding: 0 4px; margin-right: 6px; }
.vx-h { align-items: center; } .vx-h b { flex: 1; }
.vx-t.vx-bil span { font-size: inherit; font-weight: inherit; color: inherit; }
.vx-t.vx-bil .vx-k { font-size: .56rem; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.vx-t.vx-bil .vx-bs { color: #fff; font-size: .84rem; font-weight: 800; }

/* 2.6.30 — vente express : petites cartes A1 (nom sur une ligne, « … » s'il déborde), fenêtre au-dessus de la barre du bas, réglage en 2 étapes, tutoriel */
/* la fenêtre s'ouvre comme « Générer » : sur tout l'écran, la barre du bas est cachée derrière */
.vx-tb { display: inline-flex; gap: 6px; }
.vx-tiles { gap: 6px; }
.vx-t.vx-c { position: relative; display: block; text-align: left; padding: 7px 9px; min-width: 0; border-radius: 12px; background: #fff; border: 1.5px solid rgba(5,90,109,.13); box-shadow: none; }
.vx-c .vx-n { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-c .vx-p { display: block; font-size: .98rem; font-weight: 800; color: #055a6d; line-height: 1.3; white-space: nowrap; }
.vx-t.vx-c.hot { background: #087891; border-color: #087891; }
.vx-c.hot .vx-n { color: rgba(255,255,255,.9); } .vx-c.hot .vx-p { color: #ffd700; }
.vx-t.vx-c em { top: -7px; left: auto; right: 8px; transform: none; }
.vx-steps { display: flex; gap: 5px; justify-content: center; margin: 0 0 8px; } .vx-steps i { width: 24px; height: 4px; border-radius: 9px; background: rgba(5,90,109,.18); } .vx-steps i.on { background: #087891; }
.vx-h3 { margin: 0; font-size: 1rem; font-weight: 800; } .vx-hint { margin: 3px 2px 8px; }
.vx-sr, .vx-lr { background: #fff; border: 1.5px solid rgba(5,90,109,.12); border-radius: 14px; padding: 8px 10px; margin-bottom: 6px; }
.vx-sr { display: flex; align-items: center; gap: 10px; }
.vx-sr, .vx-sr .vx-sn, .vx-lr, .vx-lr .vx-sn { color: #0b3a44; }
.vx-lr .vx-pz { color: #087891; } .vx-lr .vx-pp label { color: #4a6b72; } .vx-lr .vx-pp input { background: #eef5f4; color: #0b3a44; border-color: rgba(5,90,109,.2); }
:root[data-theme="dark"] .sheet.vx .vx-hint, :root[data-theme="dark"] .sheet.vx .vx-h3 { color: #e6f6f8; } :root[data-theme="dark"] .sheet.vx .vx-hint { color: #b9d6db; }
:root[data-theme="dark"] .sheet.vx .vx-foot .btn.ghost { color: #e6f6f8; border-color: rgba(230,246,248,.35); }
.vx-sn { flex: 1; min-width: 0; font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; } .vx-sn small { display: block; font-size: .7rem; font-weight: 500; color: #4a6b72; }
.vx-sw { width: 44px; height: 26px; border-radius: 99px; background: #c9d6d8; position: relative; flex: none; transition: background .2s; }
.vx-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.vx-sw.on { background: #087891; } .vx-sw.on::after { transform: translateX(18px); }
.vx-l1 { display: flex; align-items: center; gap: 10px; } .vx-l1 select { flex: none; height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: #eef5f4; color: #055a6d; font: inherit; font-size: .84rem; font-weight: 700; }
.vx-pz { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .72rem; font-weight: 700; color: var(--teal-2); } .vx-pz .i { width: 14px; height: 14px; }
.vx-pp { display: none; margin-top: 6px; gap: 8px; } .vx-lr.open .vx-pp { display: grid; }
.vx-pp label { display: grid; gap: 3px; font-size: .7rem; font-weight: 700; color: var(--muted); }
.vx-pp input { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; outline: none; }
.vx-foot { position: sticky; bottom: 0; padding: 8px 0 2px; margin-top: 4px; background: linear-gradient(to top, var(--card) 70%, transparent); }
.vx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vx-help { text-align: center; padding: 6px 4px 2px; } .vx-hn { font-size: .72rem; font-weight: 800; color: var(--muted); }
.vx-hi { width: 56px; height: 56px; margin: 8px auto; border-radius: 18px; display: grid; place-items: center; background: rgba(8,120,145,.12); color: #087891; } .vx-hi .i { width: 28px; height: 28px; }
.vx-help h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; } .vx-help p { margin: 0 6px 12px; font-size: .84rem; color: var(--muted); line-height: 1.45; }
body.vx-open .sheet.center { z-index: 70; }

/* 2.6.30 — Forfaits MikPay : temps limite, validité, prix */
.mp-du { display: grid; grid-template-columns: 1fr 116px; gap: 8px; }
.mp-du input, .mp-du select { min-width: 0; }
.mp-bad .mp-du input, .mp-bad .mp-du select { border-color: #e24b4a; box-shadow: 0 0 0 3px rgba(226,75,74,.14); }
.mp-msg { margin: 2px 0 12px; font-size: .78rem; line-height: 1.4; border-radius: 12px; padding: 0; }
.mp-msg.good { padding: 9px 11px; background: rgba(34,197,94,.12); color: #15803d; }
.mp-msg.bad { padding: 9px 11px; background: rgba(226,75,74,.12); color: #b42323; }
.mp-adv { margin: 0 0 12px; } .mp-adv summary { font-size: .8rem; font-weight: 700; color: var(--teal-2); padding: 6px 2px; cursor: pointer; }
.wz-ph { font-size: .66rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.wz-p { grid-template-columns: 22px 1fr 1fr 1fr auto; }
.wz-p input:not([type=checkbox]) { padding: 0 8px; text-align: center; }
/* interrupteur glissant à la place de la case à cocher (forfaits de l'assistant MikPay) */
.wz-p { grid-template-columns: 40px 1fr 1fr 1fr auto; }
.wz-p input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 38px; height: 22px; border-radius: 99px; background: #c9d6d8; position: relative; cursor: pointer; transition: background .2s; }
.wz-p input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.wz-p input[type=checkbox]:checked { background: var(--teal-2); }
.wz-p input[type=checkbox]:checked::after { transform: translateX(16px); }
/* 2.6.30 — Ajouter N tickets en un geste (MikPay) */
.mpq-i { background: var(--soft); border-radius: 14px; padding: 10px 12px; margin-bottom: 4px; } .mpq-i b { display: block; font-size: .92rem; } .mpq-i small { font-size: .72rem; color: var(--muted); word-break: break-all; }
/* 2.6.30 — fenêtre « Ma page de connexion » : forfaits repris de MikPay */
.mpg-pl { background: var(--soft); border-radius: 14px; padding: 10px 12px; margin: 4px 0 8px; } .mpg-pl b { font-size: .8rem; } .mpg-pl small { display: block; margin-top: 6px; font-size: .7rem; color: var(--muted); line-height: 1.4; }
.mpg-ch { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .mpg-ch span { font-size: .72rem; font-weight: 700; background: var(--card); border-radius: 99px; padding: 3px 9px; }

/* 2.6.30 — compte vendeur : carte de profil, trois chiffres, avatars */
.ac-hero { text-align: center; color: #fff; background: linear-gradient(160deg, #087891, #055a6d); border-radius: 18px; padding: 16px 12px 42px; }
.ac-av { position: relative; display: inline-block; width: 74px; height: 74px; padding: 0; border-radius: 50%; border: 3px solid #ffd700; background: #ffd700; }
.ac-av img, .ac-av svg { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ac-av > span:not(.ac-cm) { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.5rem; font-weight: 800; color: #0b2a31; }
.ac-cm { position: absolute; right: -5px; bottom: -3px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #ffd700; color: #0b2a31; border: 2px solid #055a6d; }
.ac-cm .i { width: 13px; height: 13px; }
.ac-nm { font-size: 1.08rem; font-weight: 800; margin-top: 8px; } .ac-em { font-size: .74rem; opacity: .85; margin-top: 1px; word-break: break-all; }
.ac-pl { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 11px; border-radius: 99px; background: rgba(255,255,255,.18); color: #fff; font-size: .74rem; font-weight: 700; }
.ac-pl .i { width: 13px; height: 13px; }
.ac-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: -28px 8px 4px; position: relative; }
.ac-st div { background: var(--card); border-radius: 14px; text-align: center; padding: 9px 4px; box-shadow: 0 8px 18px -14px rgba(5,60,72,.7); }
.ac-st b { display: block; font-size: .98rem; color: var(--teal); } .ac-st span { font-size: .68rem; color: var(--muted); }
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.av-c { padding: 0; border: 0; border-radius: 50%; overflow: hidden; aspect-ratio: 1; background: none; } .av-c svg { display: block; width: 100%; height: 100%; }
.av-c.on { box-shadow: 0 0 0 3px #ffd700; }

/* 2.6.30 — agrégateurs en cartes : grisés (cadenas) quand ils ne travaillent pas dans le pays du vendeur */
.ag-list { display: grid; gap: 7px; }
.ag-c { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); color: var(--ink); }
.ag-c.on { border-color: var(--teal-2); box-shadow: 0 0 0 1px var(--teal-2); }
.ag-lg { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: rgba(8,120,145,.12); color: var(--teal); }
.ag-t { flex: 1; min-width: 0; } .ag-t b { display: block; font-size: .88rem; } .ag-t small { display: block; font-size: .7rem; color: var(--muted); } .ag-t em { font-style: normal; display: inline-block; padding: 1px 8px; border-radius: 99px; background: #fff3cf; color: #7a5200; font-weight: 700; }
.ag-ic { width: 22px; flex: none; color: var(--teal-2); } .ag-ic .i { width: 18px; height: 18px; }
.ag-c.off { background: var(--soft); opacity: .78; } .ag-c.off .ag-lg { background: rgba(147,170,176,.25); color: var(--muted); } .ag-c.off .ag-t b { color: var(--muted); } .ag-c.off .ag-ic { color: var(--muted); }
/* 2.6.32 — suppression du compte par le client (3 étapes) */
.pd-step { margin: 0 0 6px; } .pd-step small { font-size: .72rem; font-weight: 800; color: var(--teal-2); } .pd-h { margin: 0 0 8px; font-size: 1.02rem; font-weight: 800; }
.pd-money { text-align: center; border: 1.5px solid var(--gold); } .pd-money .num { display: block; font-size: 1.7rem; font-weight: 850; color: var(--gold); } .pd-money p { margin: 6px 0 0; font-size: .84rem; color: var(--ink); line-height: 1.45; }
.pd-in { width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; outline: none; margin-bottom: 4px; }
.pd-in:focus { border-color: var(--teal-3); box-shadow: 0 0 0 3px rgba(15,179,207,.15); }

/* 2.6.32 : menu hamburger — grand titre de l'onglet, tout déplié */
.dw-nav .dw-sec, .dw-c .dw-nav .dw-sec { font-size: 1.44rem; font-weight: 800; letter-spacing: .01em; text-transform: none; opacity: 1; margin: 6px 10px 6px; color: #fff; line-height: 1.15; }
.dw-nav .dw-sec.mp, .dw-c .dw-nav .dw-sec.mp { font-size: 1.6rem; }      /* le menu de MikPay garde sa taille */
.dw-secbar { height: 3px; width: 38px; border-radius: 2px; background: #e0b34a; margin: 0 10px 12px; }
.dw-fhead { cursor: default; }
.dw-folder .dw-fbody, .dw-folder.dw-sub2 .dw-fbody, .dw-folder.dw-sub2:not(.open) > .dw-fbody { max-height: none; overflow: visible; }
.dw-car { display: none; }

/* 2.6.32 : appareils MAC — copier la MAC, noms, onglets */
.cpbtn { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 8px; border-radius: 8px; background: rgba(15,110,126,.12); color: var(--teal, #0f6e7e); vertical-align: middle; }
.cpbtn .i { font-size: 15px; }
.mac-name { font-weight: 800; }
.mac-noname { opacity: .55; font-weight: 600; font-style: italic; }
.mac-tabs { flex-wrap: wrap; }
.mac-tabs .chip b { margin-left: 4px; }

/* 2.6.32 : menu hamburger en ronds façon applications (3 par ligne, nom dessous, élément actif en or) */
.dw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 4px; padding: 2px 0 10px; }
.dw-grid .dw-item, .dw-c .dw-grid .dw-item { position: relative; flex-direction: column; justify-content: flex-start; align-items: center; gap: 6px; width: auto; min-height: 0; margin: 0; padding: 0 2px; background: none; border: 0; border-radius: 12px; text-align: center; font-size: .72rem; font-weight: 650; line-height: 1.2; color: rgba(255,255,255,.9); }
.dw-grid .dw-item .i { box-sizing: border-box; width: 52px; height: 52px; padding: 14px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 24px; transition: background .2s var(--ease), transform .15s var(--ease); }
.dw-grid .dw-item:active .i { transform: scale(.94); }
.dw-grid .dw-item span { flex: none; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.dw-grid .dw-item.on { background: none; color: #fff; }
.dw-grid .dw-item.on .i { background: #e0b34a; color: #0b3a44; }
.dw-grid .dw-item.on span { color: #e0b34a; }
.dw-grid .dw-item:active { background: none; }
.dw-grid .dw-item .cnt { position: absolute; top: -2px; right: calc(50% - 34px); padding: 1px 6px; }

/* 2.6.32 — bulle du support : la tête arrive seule (rebond), une petite animation attire l'œil (balancement + halo), puis la bulle de texte sort ;
   elle se referme toute seule après une dizaine de secondes et il ne reste que la tête */
.sup-row .sup-ava { animation: supPop .5s cubic-bezier(.34, 1.56, .64, 1) both, supWiggle .9s .7s 2; }
.sup-row .sup-ava::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #E8184F; opacity: 0; pointer-events: none; animation: supHalo 1.1s .7s 2; }
.sup-row .sup-bb { transform-origin: right bottom; animation: supBubIn .45s 2.1s both, supBubOut .4s 12.5s forwards; }
@keyframes supPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes supWiggle { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-14deg) scale(1.12); } 40% { transform: rotate(12deg) scale(1.12); } 60% { transform: rotate(-8deg) scale(1.06); } 80% { transform: rotate(5deg) scale(1.02); } }
@keyframes supHalo { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes supBubIn { from { opacity: 0; transform: translateX(14px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes supBubOut { to { opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; margin-right: -8px; transform: scale(.8); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .sup-row .sup-ava { animation: supFade .3s both; }
  .sup-row .sup-ava::before { display: none; }
  .sup-row .sup-bb { animation: supFade .3s 1.5s both, supBubOut .3s 12.5s forwards; }
  @keyframes supFade { from { opacity: 0; } to { opacity: 1; } }
}

/* 2.6.32 — sélection de tickets dans MikPay › Tickets (appui long ou clic droit) */
.mt-bar { flex-wrap: wrap; }
.mt-r.sel { background: rgba(15,143,168,.12); }
.mt-ck { background: none; }
.mt-box { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--muted); color: #fff; }
.mt-box .i { width: 15px; height: 15px; }
.mt-box.on { background: var(--accent); border-color: var(--accent); }
.mt-r { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mt-ck { display: none; } #mtl.selmode .mt-ic { display: none; } #mtl.selmode .mt-ck { display: grid; } #mtl.selmode .end { display: none; }
.mt-box .i { display: none; } .mt-box.on .i { display: block; }

/* 2.6.32 — liste des commentaires (Hotspot › Utilisateur) : lignes de même hauteur, nombre de tickets dans une pastille arrondie, commentaire collé au chiffre, date à droite */
.hs-btn { display: flex; align-items: center; justify-content: space-between; gap: 2px; text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; font-family: inherit; }
.hs-btn .hs-bt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hs-btn .hs-bc { width: 9px; height: 9px; flex: none; transform: rotate(90deg); opacity: .6; }
.hs-btn.on { color: var(--accent); }
.lt-list { display: flex; flex-direction: column; }
.lt-r { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 6px; box-sizing: border-box; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); font: inherit; color: var(--ink); width: 100%; }
.lt-r:first-child { border-top: 0; }
.lt-r:active { background: var(--soft); }
.lt-n { min-width: 38px; height: 26px; padding: 0 8px; box-sizing: border-box; border-radius: 99px; background: rgba(15,143,168,.14); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; flex: none; }
.lt-t { flex: 1; min-width: 0; font-size: .74rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lt-d { font-size: .66rem; color: var(--muted); white-space: nowrap; flex: none; }
.lt-r.on .lt-t { font-weight: 800; color: var(--accent); }
.lt-r.on .lt-n { background: var(--accent); color: #fff; }

/* 2.6.32 — liste des commentaires, version B : pastille du nombre à gauche, commentaire puis date dessous, petit rond de sélection à droite */
.lt-r { height: 54px; gap: 8px; }
.lt-x { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.lt-t { display: block; font-size: .76rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.lt-m { font-size: .64rem; color: var(--muted); white-space: nowrap; line-height: 1.1; }
.lt-rad { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; flex: none; opacity: .7; }
.lt-r.on .lt-rad { border-color: var(--accent); opacity: 1; background: radial-gradient(var(--accent) 42%, transparent 48%); }
.lt-r.on .lt-n { background: rgba(15,143,168,.14); color: var(--accent); }

/* 2.6.32 : la ligne de version (Réglages) fait partie de la page, tout en bas du contenu : elle défile avec le reste et ne recouvre plus les rubriques ni la barre du bas */
.mo-foot { position: static !important; bottom: auto !important; z-index: auto !important; background: none !important; padding: 12px 12px 0 !important; margin-bottom: 64px; }
.mo-sp { height: 8px !important; }

/* 2.6.32 : clavier ouvert = barre du bas, bouton « + » et bulle du support cachés (ils reviennent à la fermeture du clavier) */
.nav, .fab, .sup-row { transition: transform .2s ease, opacity .2s ease; }
body.kb-open .nav { transform: translateY(115%); pointer-events: none; }
body.kb-open .fab, body.kb-open .sup-row { opacity: 0; pointer-events: none; transform: translateY(24px); }