/* Version web (PWA) sur ordinateur : écran de 1024 px ou plus. Le téléphone garde exactement l'interface de l'application.
 * Disposition de la maquette « variante E » : UN menu à gauche avec des sections dépliantes (la section de la page ouverte est dépliée, ses pages dedans),
 * barre du haut blanche, tableau de bord en deux colonnes, bande Aide · VPN · Alertes à droite, fenêtres au centre.
 * Chargé après app.css ; les règles commencent par #app pour l'emporter sur les retouches d'app.css sans modifier ce fichier.
 * pwa/www/desktop.js construit les morceaux qui n'existent pas dans l'application (sections dépliantes, titre, pastilles, journal des connexions). */
/* Les éléments ajoutés par desktop.js n'existent que sur ordinateur : si la fenêtre est rétrécie (ou tournée) sous 1024 px, ils disparaissent et l'interface du téléphone revient telle quelle. */
.pwa-ttl, .pwa-badges, .pwa-sub, .pwa-set, .pwa-foot, .pwa-journal, .pwa-rsvg, .pwa-rail, .pwa-card, .pwa-pj { display: none; }
@media (min-width: 1024px) {
  :root { --zm: 1; }
  .pwa-ttl, .pwa-sub, .pwa-foot, .pwa-journal, .pwa-rsvg, .pwa-card, .pwa-pj { display: block; }
  #app #view .pwa-done { display: none !important; }

  /* ---- carte à tableau (façon Mikhmon) : en-tête = titre · nombre · bouton ; tableau pleine largeur, lignes compactes ---- */
  .pwa-card { padding: 0; overflow: hidden; max-width: 1180px; }
  .pwa-ch { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .pwa-ch h3 { font-size: 1.02rem; font-weight: 800; color: var(--teal); margin: 0; }
  .pwa-n { font-size: .8rem; font-weight: 700; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 3px 11px; }
  .pwa-sp { flex: 1; }
  .pwa-ch .btn { width: auto; min-width: 0; height: 36px; padding: 0 16px; }
  .pwa-ch .btn .i { margin-right: 6px; }
  .pwa-ov { overflow-x: auto; max-height: 72vh; }
  .pwa-t { width: 100%; border-collapse: collapse; font-size: .9rem; }
  .pwa-t th { position: sticky; top: 0; z-index: 1; background: var(--card); text-align: left; padding: 10px 13px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
  .pwa-t td { padding: 11px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .pwa-t tbody tr { cursor: pointer; }
  .pwa-t tbody tr:nth-child(even) { background: var(--soft); }
  .pwa-t tbody tr:hover { background: rgba(15,179,207,.12); }
  .pwa-t .pwa-nm { font-weight: 800; }
  .pwa-t .pwa-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; }

  /* ---- Hotspot › Générer (fenêtre) : formulaire sur deux colonnes, bouton à sa taille ---- */
  #sheets .sheet:has(#gf) .box { max-width: 820px; }
  #gf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; align-items: start; }
  #gf > .cols2, #gf > .quick, #gf > .note, #gf > .btn, #gf > .f:nth-child(3), #gf > .f:nth-child(8) { grid-column: 1 / -1; }
  #gf > .btn { justify-self: end; width: auto; min-width: 240px; }
  .pwa-t .pwa-r { text-align: right; font-variant-numeric: tabular-nums; }
  .pwa-t td.pwa-nm:has(.pwa-tag) { white-space: normal; min-width: 120px; }
  .pwa-t td.pwa-nm .pwa-tag { margin-top: 3px; }
  .pwa-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--faint); vertical-align: 1px; }
  .pwa-dot.on { background: var(--ok); }
  .pwa-tag { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: .68rem; font-weight: 800; background: var(--soft); color: var(--muted, var(--ink)); }
  .pwa-t .pwa-more td { text-align: center; font-weight: 800; color: var(--accent); cursor: pointer; }
  .pwa-card ~ .fab { display: none; }

  /* ---- PPPoE › Accueil : tableau de bord en deux colonnes, rien n'est retiré (mêmes cartes, mêmes chiffres, mêmes boutons) ---- */
  #ppHome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
  #ppHome .pp-tabrow { grid-column: 1; grid-row: 1; margin: 0; }
  #ppHome .pp-tabs { flex: none; }
  #ppHome .pp-tabs [role=tab] { flex: none; padding: 8px 20px; font-size: .84rem; gap: 7px; }
  #ppHome .pp-band { grid-column: 2; grid-row: 1; justify-self: end; width: auto; padding: 7px 12px; gap: 8px; }
  #ppHome #ppPanel { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; min-width: 0; }
  #ppHome #ppPanel > * { margin: 0; min-width: 0; }
  /* Vue */
  #ppHome #ppPanel > .pp-net2 { grid-column: 1; grid-row: 1; align-self: stretch; padding: 24px 26px; }
  #ppHome #ppPanel > .pp-tr { grid-column: 2; grid-row: 1; align-self: stretch; padding: 20px 22px; }
  #ppHome #ppPanel > .pp-add { grid-column: 1 / -1; grid-row: 2; justify-self: start; width: auto; padding: 11px 24px; }
  #ppHome #ppPanel > .pp-sc { grid-column: 1 / -1; grid-row: 3; gap: 14px; }
  #ppHome .pp-tr .pp-lab { font-size: .86rem; margin-bottom: 8px; }
  #ppHome .pp-net2 .pp-ringw { width: 92px; height: 92px; }
  #ppHome .pp-net2 .pp-ringc b { font-size: 1.1rem; }
  #ppHome .pp-n2h { gap: 18px; }
  #ppHome .pp-n2t b { font-size: 1.2rem; }
  #ppHome .pp-n2t span { font-size: .92rem; }
  /* les deux pastilles sont centrées chacune sur sa colonne : « bientôt » sur « Aujourd'hui », « expirés » sur « Ce mois » */
  #ppHome .pp-n2p { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 20px; }
  #ppHome .pp-pl { flex: none; justify-self: center; padding: 8px 18px; font-size: .86rem; }
  #ppHome #ppPanel > .pwa-pj { grid-column: 1 / -1; grid-row: 3; padding: 0; overflow: hidden; }
  #ppHome #ppPanel > .pp-sc { grid-row: 4; }
  .pwa-pb { font-size: .78rem; font-weight: 800; border-radius: 999px; padding: 4px 12px; }
  .pwa-pb.ok { background: rgba(22,163,74,.13); color: #15803d; } .pwa-pb.bad { background: rgba(229,43,45,.13); color: #b4232f; }
  .pwa-pjb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; padding: 6px 18px 10px; }
  .pwa-pj .pwa-jl { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .pwa-pj .pwa-jl .ju small { font-weight: 600; color: var(--muted); margin-left: 6px; }
  .pwa-pj .pwa-jl.prob { background: rgba(229,43,45,.07); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; border-bottom-color: transparent; }
  .pwa-pj .pwa-jl .js.warn::before { background: #e8930c; } .pwa-pj .pwa-jl .js.bad { color: #b4232f; } .pwa-pj .pwa-jl .js.warn { color: #a86600; }
  #ppHome .pp-vm { margin-top: 22px; padding-top: 18px; }
  #ppHome .pp-vm b { font-size: 1.6rem; }
  #ppHome .pp-vm span { font-size: .72rem; }
  #ppHome .pp-vm small { font-size: .8rem; }
  /* Vue : « Ajouter un abonné » et les quatre raccourcis sur une seule ligne (grille de 20 colonnes : 4 + 4 + 4 + 4 + 4), le journal en dessous */
  #ppHome #ppPanel:has(> .pp-net2) { grid-template-columns: repeat(20, minmax(0, 1fr)); }
  #ppHome #ppPanel:has(> .pp-net2) > .pp-net2 { grid-column: 1 / 11; }
  #ppHome #ppPanel:has(> .pp-net2) > .pp-tr { grid-column: 11 / 21; }
  #ppHome #ppPanel:has(> .pp-net2) > .pp-add { grid-column: 1 / 5; grid-row: 2; justify-self: stretch; width: auto; min-height: 46px; padding: 0 8px; gap: 6px; font-size: .82rem; white-space: nowrap; }
  #ppHome #ppPanel:has(> .pp-net2) > .pp-sc { display: contents; }
  #ppHome #ppPanel:has(> .pp-net2) > .pp-sc > .pp-scb { grid-row: 2; min-height: 46px; padding: 0 6px; gap: 6px; font-size: .84rem; border-radius: 12px; white-space: nowrap; }
  #ppHome #ppPanel:has(> .pp-net2) > .pp-sc > .pp-scb:nth-child(1) { grid-column: 5 / 9; }
  #ppHome #ppPanel:has(> .pp-net2) > .pp-sc > .pp-scb:nth-child(2) { grid-column: 9 / 13; }
  #ppHome #ppPanel:has(> .pp-net2) > .pp-sc > .pp-scb:nth-child(3) { grid-column: 13 / 17; }
  #ppHome #ppPanel:has(> .pp-net2) > .pp-sc > .pp-scb:nth-child(4) { grid-column: 17 / 21; }
  #ppHome #ppPanel:has(> .pp-net2) > .pwa-pj { grid-row: 3; }
  #ppHome .pp-scb { flex-direction: row; justify-content: center; gap: 10px; padding: 16px 10px; font-size: .9rem; }
  #ppHome .pp-scb .i { width: 22px; height: 22px; }
  /* Argent */
  #ppHome #ppPanel > .pp-per { grid-column: 1 / -1; justify-self: start; }
  #ppHome .pp-per button { flex: none; padding: 7px 22px; font-size: .84rem; }
  #ppHome #ppPanel > .pp-sec, #ppHome #ppPanel > .pp-help { grid-column: 1 / -1; }
  #ppHome #ppPanel > .pp-sec { margin-bottom: -8px; }
  #ppHome #ppPanel > .pp-help { margin-top: -10px; }
  #ppHome #ppPanel > .pp-rev { grid-column: 1; padding: 18px 22px; }
  #ppHome #ppPanel > .pp-due { grid-column: 2; align-self: stretch; padding: 16px 22px; }
  #ppHome #ppPanel > .pp-wal { grid-column: 1 / -1; }
  #ppHome .pp-rev .pp-big { font-size: 1.7rem; }
  /* Alertes */
  #ppHome #ppPanel > .pp-als, #ppHome #ppPanel > #ppAls, #ppHome #ppPanel > .pp-help:only-child { grid-column: 1 / -1; }
  #ppHome .pp-als { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Page */
  #ppHome #ppPanel > .banner { grid-column: 1 / -1; }
  #ppHome #ppPanel > .pp-pg { grid-column: 1; grid-row: span 2; padding: 18px 22px; }
  #ppHome #ppPanel:has(> .pp-pg) { grid-template-rows: auto 1fr; }
  #ppHome #ppPanel:has(> .banner):has(> .pp-pg) { grid-template-rows: auto auto 1fr; }
  #ppHome #ppPanel:has(> .pp-pg) > .pp-sec { grid-column: 2; margin: 0 0 -8px; align-self: end; }
  #ppHome #ppPanel:has(> .pp-pg) > .card:not(.pp-pg), #ppHome #ppPanel:has(> .pp-pg) > .note { grid-column: 2; }
  #ppHome #ppPanel:has(> .pp-pg) > .btn { grid-column: 1 / -1; justify-self: start; width: auto; }
  .pwa-badges { display: inline-flex; }
  #app > .nav > .pwa-set { display: flex; }
  .pwa-rail { display: flex; }
  body { font-size: 14.5px; }

  /* ---- la coque : [menu] [contenu] ; le menu hamburger de l'application n'existe plus ici (son contenu est dans les sections du menu) ---- */
  #app:has(> .nav) { display: grid; grid-template-columns: 252px minmax(0, 1fr); grid-template-rows: auto auto 1fr; min-height: 100vh; align-items: start; }
  #app:has(> .nav) > .topbar, #app:has(> .nav) > .tips, #app:has(> .nav) > .view { grid-column: 2; min-width: 0; }
  #app:has(> .nav) > .topbar { grid-row: 1; }
  #app:has(> .nav) > .tips { grid-row: 2; padding: 0 28px; }
  #app:has(> .nav) > .view { grid-row: 3; width: 100%; max-width: 1360px; margin: 0 auto; padding: 24px 28px 48px; }
  #app:has(> .nav) > .dw-panel, #app:has(> .nav) > .dw-ovl, #app .dw-trig { display: none !important; }

  /* ---- menu à gauche ---- */
  #app > .nav { position: sticky; top: 0; left: auto; right: auto; bottom: auto; grid-column: 1; grid-row: 1 / -1; height: 100vh; width: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 1px;
    padding: 74px 12px 14px; background: #055a6d; border: 0; box-shadow: none; z-index: 12; overflow-y: auto; }
  #app > .nav::before { content: "MikAdmin"; position: absolute; top: 18px; left: 18px; height: 38px; padding-left: 48px; line-height: 38px; color: #fff; font-weight: 800; font-size: 1.2rem;
    background: url(/icons/icon-192.png) left center / 38px 38px no-repeat; }
  #app > .nav .nav-bg, #app > .nav .nav-gap { display: none; }
  #app > .nav > button, #app > .nav > button.mid { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; height: auto; padding: 7px 12px; border-radius: 9px;
    color: #f2fafc; font-size: .92rem; font-weight: 700; text-shadow: none; text-align: left; }
  #app > .nav > button:hover { background: rgba(255,255,255,.08); }
  #app > .nav > button.mid { order: -1; }
  #app > .nav > button .i { font-size: 18px; transform: none; }
  #app > .nav > button.on, #app > .nav > button.mid.on { background: rgba(255,255,255,.17); color: #fff; }
  #app > .nav > button.on .i { transform: none; }
  #app > .nav > button.mid .home { position: static; width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; transform: none; color: inherit; display: inline-flex; }
  #app > .nav > button.mid .home::before, #app > .nav > button.mid .home::after { display: none; }
  #app > .nav > button.mid .home .i { font-size: 18px; filter: none; }
  #app > .nav > button .bdg { position: static; margin: 0 0 0 auto; box-shadow: none; }
  #app > .nav > button.lk .lkb { position: static; margin-left: auto; }
  /* flèche des sections : ▸ fermée, ▾ ouverte (Accueil n'a pas de section) */
  #app > .nav > button:not(.mid):not(.pwa-set)::after { content: "\25B8"; margin-left: auto; font-size: .7rem; opacity: .6; }
  #app > .nav > button.on:not(.mid):not(.pwa-set)::after { content: "\25BE"; display: inline; opacity: .9; }
  #app > .nav > button.pwa-set.on::after { display: none; }
  #app > .nav > button.on:not(.mid)::before { display: none; }      /* le petit trait du haut de la barre du téléphone */
  #app #supRow, #app .sup-row { display: none; }      /* la bulle « Service client » de la page Paramètres : sur ordinateur, c'est le bouton Aide de la bande de droite */
  #app > .nav .pwa-set { margin-top: auto; }
  #app > .nav .pwa-foot { padding: 12px 12px 0; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.15); font-size: .74rem; color: #bfe0e6; line-height: 1.45; }
  #app > .nav .pwa-foot b { display: block; color: #fff; font-size: .8rem; }

  /* ---- pages d'une section (menu hamburger de l'application, mis en liste dépliée) ---- */
  #app > .nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
  .pwa-sub { margin: 1px 0 4px 14px; padding-left: 6px; border-left: 1.5px solid rgba(255,255,255,.22); }
  .pwa-menu .dw-sec, .pwa-menu .dw-secbar, .pwa-menu .dw-item.back, .pwa-menu .dw-car, .pwa-menu .dw-fhead .i { display: none; }
  .pwa-menu .dw-grid { display: block; padding: 0; }
  .pwa-menu .dw-folder { margin: 0; }
  .pwa-menu .dw-fhead { padding: 7px 10px 2px; min-height: 0; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.85); gap: 0; }
  .pwa-menu .dw-fbody { padding: 0; max-height: none; overflow: visible; }
  .pwa-menu .dw-item, .pwa-menu .dw-grid .dw-item, .pwa-menu .dw-fbody .dw-item { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; width: 100%; min-height: 0; margin: 0;
    padding: 4px 8px; border-radius: 8px; background: none; border: 0; text-align: left; font-size: .84rem; font-weight: 650; line-height: 1.25; color: #fff; }
  .pwa-menu .dw-item:hover { background: rgba(255,255,255,.09); }
  .pwa-menu .dw-item .i, .pwa-menu .dw-grid .dw-item .i { width: 16px; height: 16px; padding: 0; border-radius: 0; background: none; font-size: 16px; opacity: .85; }
  .pwa-menu .dw-item span, .pwa-menu .dw-grid .dw-item span { flex: 1; min-width: 0; white-space: normal; overflow: visible; text-align: left; color: inherit; }
  .pwa-menu .dw-item.on, .pwa-menu .dw-grid .dw-item.on { background: rgba(255,255,255,.17); color: #fff; border: 0; }
  .pwa-menu .dw-grid .dw-item.on .i { background: none; color: #f2b705; }
  .pwa-menu .dw-grid .dw-item.on span { color: #fff; }
  .pwa-menu .dw-item .cnt { position: static; margin-left: auto; }
  .pwa-menu .dw-item.back, .pwa-menu .dw-grid .dw-item.back { display: none; }
  .pwa-menu .dw-item::before, .pwa-menu .dw-item::after { display: none; }

  /* ---- écrans sans menu d'onglets (VPN et MikPay ouverts seuls) : le menu de la section est posé à gauche, au même style ---- */
  #app:not(:has(> .nav)) > .view { width: 100%; max-width: 860px; margin: 0 auto; padding: 26px 28px 56px; }
  #app:not(:has(> .nav)) > .topbar { padding: 12px 28px; }
  #app:not(:has(> .nav)) > .tips { max-width: 860px; margin: 0 auto; padding: 0 28px; }
  #app:not(:has(> .nav)):has(> .dw-panel .dw-item) { display: grid; grid-template-columns: 252px minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; min-height: 100vh; }
  #app:not(:has(> .nav)):has(> .dw-panel .dw-item) > .topbar, #app:not(:has(> .nav)):has(> .dw-panel .dw-item) > .tips, #app:not(:has(> .nav)):has(> .dw-panel .dw-item) > .view { grid-column: 2; }
  #app:not(:has(> .nav)):has(> .dw-panel .dw-item) > .topbar { grid-row: 1; } #app:not(:has(> .nav)):has(> .dw-panel .dw-item) > .tips { grid-row: 2; width: 100%; }
  #app:not(:has(> .nav)):has(> .dw-panel .dw-item) > .view { grid-row: 3; max-width: 1100px; }
  #app:not(:has(> .nav)) > .dw-ovl, #app:not(:has(> .nav)) .dw-trig { display: none !important; }
  #app:not(:has(> .nav)) > .dw-panel { position: sticky; top: 0; transform: none; grid-column: 1; grid-row: 1 / -1; width: auto; height: 100vh; border-radius: 0; background: #055a6d; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; z-index: 11; padding: 74px 12px 14px; }
  #app:not(:has(> .nav)) > .dw-panel::before { content: "MikAdmin"; position: absolute; top: 18px; left: 18px; height: 38px; padding-left: 48px; line-height: 38px; color: #fff; font-weight: 800; font-size: 1.2rem;
    background: url(/icons/icon-192.png) left center / 38px 38px no-repeat; }
  #app:not(:has(> .nav)) > .dw-panel.dw-c { width: auto; }
  #app:not(:has(> .nav)) > .dw-panel .dw-hd { display: none; }
  #app:not(:has(> .nav)) > .dw-panel:not(:has(.dw-item)) { display: none; }
  #app:not(:has(> .nav)) > .dw-panel .dw-nav { padding: 0; }
  #app:not(:has(> .nav)):not(:has(> .dw-panel .dw-item)) > .view { margin: 0 auto; }

  /* ---- barre du haut blanche (maquette) : titre, routeur, pastilles, thème, changer de routeur ---- */
  #app:has(> .nav) > .topbar { position: sticky; top: 0; padding: 12px 28px; gap: 14px; background: var(--card); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  #app:has(> .nav) > .topbar .tb-ico { background: var(--soft); color: var(--teal); }
  #app:has(> .nav) > .topbar .tb-title { color: var(--ink); font-size: .98rem; }
  #app:has(> .nav) > .topbar .tb-sub { color: var(--muted); }
  #app:has(> .nav) > .topbar .tb-btn { color: var(--ink); }
  #app:has(> .nav) > .topbar .tb-btn:hover { background: var(--soft); }
  #app:has(> .nav) > .topbar .tb-gear, #app:has(> .nav) > .topbar .bell { display: none; }      /* Paramètres est dans le menu, les alertes dans la bande de droite */
  .pwa-ttl { margin: 0 6px 0 0; padding-right: 18px; border-right: 1px solid var(--line); font-size: 1.28rem; font-weight: 800; color: var(--teal); white-space: nowrap; }
  .pwa-badges { margin-left: auto; display: inline-flex; gap: 8px; }
  .pwa-badge { padding: 6px 13px; border-radius: 999px; font-size: .8rem; font-weight: 800; background: rgba(22,163,74,.13); color: #15803d; white-space: nowrap; }
  .pwa-badge.bad { background: rgba(229,43,45,.12); color: #b81e20; }
  :root[data-theme="dark"] .pwa-badge { color: #6ee7a0; } :root[data-theme="dark"] .pwa-badge.bad { color: #ff8a8c; }
  #app:has(> .nav) > .topbar .tb-txt { flex: 0 1 auto; }

  /* ---- bande d'icônes à droite : Aide · VPN · Alertes (pwa/www/desktop.js) ---- */
  .pwa-rail { position: fixed; top: 0; right: 0; bottom: 0; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 84px 0 16px;
    background: var(--card); border-left: 1px solid var(--line); z-index: 15; }
  .pwa-rail[hidden] { display: none; }
  body.has-rail { padding-right: calc(76px + var(--sar, 0px)); }
  .pwa-rail .rb { position: relative; width: 58px; padding: 10px 0 8px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--ink); background: var(--soft); }
  .pwa-rail .rb:hover { background: var(--line); }
  .pwa-rail .rb .i { font-size: 22px; color: var(--accent); }
  .pwa-rail .rb small { font-size: .68rem; font-weight: 800; }
  .pwa-rail .rdot { position: absolute; top: 7px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 2px var(--card); }
  .pwa-rail .rdot.ok { background: var(--ok); } .pwa-rail .rdot.bad { background: var(--red); } .pwa-rail .rdot.off { background: var(--faint); }
  .pwa-rail .rbdg { position: absolute; top: 3px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #e52b2d; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--card); }

  /* ---- discussion avec le service client : une fenêtre à droite, près du bouton Aide ---- */
  .sup { align-items: flex-end; padding: 0 92px 22px 0; }
  .sup-bg { background: rgba(0,0,0,.18); }
  .sup-box { width: 420px; max-width: calc(100% - 24px); height: min(620px, 84vh); border-radius: 20px; }

  /* ---- fenêtres : au centre de l'écran, pas collées en bas ---- */
  #sheets .sheet { align-items: center; }
  #sheets .sheet .box { max-width: 600px; width: calc(100% - 48px); border-radius: 20px; max-height: 88vh; }

  /* ---- pages : ce que le menu de gauche fait déjà n'est pas répété dans la page ---- */
  #view .hs-bar .hs-m { display: none; }      /* Hotspot : « En ligne · Utilisateurs · Générer » (la recherche reste) */
  #view .hs-bar:not(:has(input)) { display: none; }

  /* ---- pages à la façon d'un outil d'ordinateur (Mikhmon) : rien n'est étiré ; boutons à la largeur de leur texte, grandes cartes de largeur limitée, listes en tableaux ---- */
  #view .btn.full { display: inline-flex; width: auto; min-width: 190px; padding-left: 26px; padding-right: 26px; }
  #view .card.pad.wz-card, #view .momo-hero { max-width: 640px; }
  #view .seg { display: inline-flex; width: auto; max-width: 100%; }
  #view .empty { padding: 26px 20px; }
  /* liste des profils : une ligne = icône · nom · détails · prix, colonnes alignées */
  #app #view .card.list:has(> .item[data-act="profileForm"]) { display: block; max-width: 1040px; }
  #app #view .card.list:has(> .item[data-act="profileForm"]) > .item { display: grid; grid-template-columns: 38px minmax(190px, 1.1fr) minmax(0, 2fr) 150px; align-items: center; gap: 0 14px; padding: 9px 18px; border-right: 0; }
  #app #view .card.list:has(> .item[data-act="profileForm"]) > .item:nth-child(even) { background: var(--soft); }
  #app #view .card.list:has(> .item[data-act="profileForm"]) > .item .main { display: contents; }
  #app #view .card.list:has(> .item[data-act="profileForm"]) > .item .t { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app #view .card.list:has(> .item[data-act="profileForm"]) > .item .s { margin: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app #view .card.list:has(> .item[data-act="profileForm"]) > .item .end { text-align: right; }

  /* longues listes (profils, forfaits, routeurs…) : deux colonnes au lieu d'une ligne de 1000 px de large */
  #view > .card.list:has(> .item:nth-child(6)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view > .card.list:has(> .item:nth-child(6)) > .item:nth-child(odd) { border-right: 1px solid var(--line); }
  #view > .card.list:has(> .item:nth-child(6)) > .item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  /* Paramètres : une colonne de lecture confortable, pas des bandeaux de 1000 px */
  #view:has(> .card.mg) { max-width: 880px; }

  /* ---- accueil (maquette) : à gauche 4 cartes, actions rapides, trafic, ce mois-ci ; à droite le routeur avec son dessin, puis le journal des connexions ---- */
  .hm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 10px; align-items: start; }      /* pas d'espace vertical ajouté : seuls les écarts du téléphone (4 à 7 px) restent entre les blocs */
  .hm > * { margin: 0; min-width: 0; }
  .hm > .hm-top { grid-column: 1 / 9; grid-row: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .hm > :nth-child(4) { grid-column: 1 / 9; grid-row: 2; }
  .hm > .hm-acts { grid-column: 1 / 9; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm > :nth-child(6) { grid-column: 1 / 9; grid-row: 4; }
  .hm > .hm-chart { grid-column: 1 / 9; grid-row: 5; }
  .hm > :nth-child(8) { grid-column: 1 / 9; grid-row: 6; }
  .hm > .hm-month { grid-column: 1 / 9; grid-row: 7; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm > .hm-vpn { display: none; }      /* le VPN est dans la bande de droite */
  .hm > .hm-info { grid-column: 9 / 13; grid-row: 1 / span 4; align-self: stretch; margin-bottom: 6px; }
  .hm > .pwa-journal { grid-column: 9 / 13; grid-row: 5 / span 3; align-self: stretch; }
  .hm-info .hm-name, .hm-info .hm-sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .hm > .sec { margin: 5px 2px 4px; }
  .hm > .sec + .hm-chart { margin-top: 2px; }      /* l'application met 6 px par une règle plus précise (« .hm .sec + .card ») : on la surpasse */
  .hm > .grid + .pwa-journal { margin-top: 0; }
  .hm > .card.hm-info { margin-top: 0; }
  .hm .hm-top .stat { padding: 12px 14px; min-height: 80px; }      /* tuiles plus rectangulaires : plus basses, le libellé passe à la ligne au lieu d'être coupé */
  .hm .hm-top .s-ico { width: 30px; height: 30px; font-size: 16px; margin-bottom: 6px; }
  .hm .hm-top .s-val { font-size: 1.7rem; }
  .hm .hm-top .s-lab { font-size: .8rem; line-height: 1.25; margin-top: 0; white-space: normal; overflow-wrap: break-word; }
  .hm .hm-acts .act { min-height: 56px; }
  .hm-info .gauge { flex-wrap: nowrap; align-items: center; gap: 14px; }
  .hm-info .gauge .pwa-rsvg { flex: none; width: 104px; height: 70px; }
  .hm-info .hm-res { margin-top: 12px; grid-template-columns: minmax(0, 1fr); gap: 10px; }      /* colonne plus étroite : Mémoire et Stockage l'un sous l'autre, rien n'est coupé */
  .pwa-journal { padding: 12px 14px; }
  .pwa-journal h3 { font-size: 1rem; font-weight: 800; color: var(--teal); margin-bottom: 4px; }
  .pwa-jl { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
  .pwa-jl:last-child { border-bottom: 0; }
  .pwa-jl .jt { color: var(--muted); font-variant-numeric: tabular-nums; }
  .pwa-jl .ju { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pwa-jl .js { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; }
  .pwa-jl .js::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
  .pwa-jl .js.out::before { background: #9aa9ad; } .pwa-jl .js.bad::before { background: #E8184F; }
  .pwa-jempty { padding: 14px 0 4px; color: var(--muted); font-size: .86rem; }
}

/* écrans de 1024 à 1279 px : la place manque pour deux colonnes de tableau de bord ; tout s'empile, les 4 cartes restent sur une ligne */
@media (min-width: 1024px) and (max-width: 1279px) {
  #app:has(> .nav) { grid-template-columns: 220px minmax(0, 1fr); }
  #app:has(> .nav) > .view { padding: 20px 22px 40px; }
  #app > .nav { padding-left: 8px; padding-right: 8px; }
  .hm { grid-template-columns: minmax(0, 1fr); }
  .hm > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hm > .hm-info { order: 0; }
  .hm .hm-top .s-val { font-size: 1.6rem; }
}