/* V2.2 - stable menu skin and settings helpers */
:root{
  --v2-nav:#0f172a;
  --v2-nav-2:#111827;
  --v2-nav-line:rgba(226,232,240,.12);
  --v2-nav-text:#e5edf8;
  --v2-nav-muted:#94a3b8;
  --v2-blue:#2563eb;
  --v2-blue-2:#1d4ed8;
  --v2-focus:#93c5fd;
}

body.v2-stable-ready{
  background:#f5f7fb;
}

#appSplash{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  background:var(--pwa-splash-bg,#f4f7fb);
  transition:opacity .24s ease, visibility .24s ease;
}

#appSplash img{
  display:block;
  max-width:min(72vw,380px);
  max-height:min(70vh,380px);
  width:auto;
  height:auto;
  object-fit:contain;
}

body.app-ready #appSplash,
body:not(.app-booting) #appSplash{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.app.v2-stable-shell{
  display:grid!important;
  grid-template-columns:280px minmax(0,1fr);
  min-height:100dvh!important;
  align-items:stretch!important;
}

.app.v2-stable-shell .workspace,
.app.v2-stable-shell .main{
  min-width:0!important;
}

.app.v2-stable-shell .workspace{
  grid-column:2!important;
  min-height:100dvh!important;
  margin-left:0!important;
}

.app.v2-stable-shell > .main{
  grid-column:2!important;
  min-width:0!important;
  margin-left:0!important;
}

.app.v2-stable-shell .v2-stable-side.side{
  grid-column:1!important;
}

.v2-stable-side.side{
  position:sticky!important;
  top:0!important;
  align-self:stretch!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  background:linear-gradient(180deg,var(--v2-nav),var(--v2-nav-2))!important;
  color:var(--v2-nav-text)!important;
  box-shadow:8px 0 26px rgba(15,23,42,.16)!important;
  overflow:hidden!important;
}

.v2-stable-side .side-inner,
.v2-stable-side-inner{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  padding:14px 12px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}

.v2-stable-side .brand{
  position:relative!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  padding:9px!important;
  border:1px solid var(--v2-nav-line)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.055)!important;
}

.v2-stable-side .brand .logo + div{
  min-width:0!important;
  max-width:100%!important;
  line-height:1.1!important;
}

.v2-stable-side .brand .logo + div b,
.v2-stable-side .brand .logo + div strong{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:13px!important;
  line-height:1.12!important;
}

.v2-stable-side .brand .logo + div small{
  display:block!important;
  max-width:100%!important;
  margin-top:2px!important;
  font-size:10px!important;
  line-height:1.15!important;
  white-space:normal!important;
}

.v2-stable-side .brand .logo{
  width:44px!important;
  height:44px!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#0f172a!important;
  overflow:hidden!important;
}

.v2-stable-side .brand img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

.v2-stable-side .brand small,
.v2-stable-side .userbox span{
  color:var(--v2-nav-muted)!important;
}

.v2-stable-collapse{
  display:none!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  box-shadow:none!important;
  transform:none!important;
}

.v2-stable-collapse span,
.v2-stable-mobile-menu span{
  display:block;
  width:16px;
  height:2px;
  margin:3px auto;
  border-radius:99px;
  background:currentColor;
}

.v2-stable-collapse span:before,
.v2-stable-collapse span:after{
  content:"";
  display:block;
  width:16px;
  height:2px;
  border-radius:99px;
  background:currentColor;
  transform:translateY(-6px);
}

.v2-stable-collapse span:after{
  transform:translateY(4px);
}

.v2-stable-collapse:hover{
  background:rgba(255,255,255,.14)!important;
}

.v2-stable-side .userbox{
  display:flex!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid var(--v2-nav-line)!important;
  border-radius:8px!important;
  color:#e5edf8!important;
  margin:0!important;
}

.v2-stable-nav.nav,
.v2-stable-side .nav{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:2px 2px 12px 0!important;
}

.v2-stable-nav details,
.v2-stable-side .nav details{
  border:1px solid var(--v2-nav-line)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.035)!important;
  margin:0!important;
  padding:5px!important;
  overflow:hidden!important;
}

.v2-stable-nav details[open],
.v2-stable-side .nav details[open]{
  background:rgba(255,255,255,.055)!important;
}

.v2-stable-nav summary,
.v2-stable-side .nav summary{
  color:#cbd5e1!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  padding:8px 9px!important;
  border-radius:7px!important;
  list-style:none!important;
}

.v2-stable-nav summary::-webkit-details-marker,
.v2-stable-side .nav summary::-webkit-details-marker{
  display:none!important;
}

.v2-stable-nav details button,
.v2-stable-side .nav details button{
  margin-left:10px!important;
  width:calc(100% - 10px)!important;
  position:relative!important;
}

.v2-stable-nav details button:before,
.v2-stable-side .nav details button:before{
  content:"";
  position:absolute;
  left:-8px;
  top:9px;
  bottom:9px;
  width:1px;
  background:rgba(148,163,184,.32);
}

.v2-stable-nav button,
.v2-stable-side .nav button{
  position:relative!important;
  min-height:39px!important;
  border-radius:8px!important;
  padding:0 10px!important;
  color:var(--v2-nav-text)!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  justify-content:flex-start!important;
  text-align:left!important;
  gap:9px!important;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease!important;
}

.v2-stable-nav button:hover,
.v2-stable-side .nav button:hover{
  background:rgba(255,255,255,.09)!important;
  box-shadow:none!important;
  transform:none!important;
}

.v2-stable-nav button.active,
.v2-stable-nav button.v2-active,
.v2-stable-side .nav button.active,
.v2-stable-side .nav button.v2-active{
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-blue-2))!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(37,99,235,.22)!important;
}

.v2-stable-nav button.active:after,
.v2-stable-nav button.v2-active:after,
.v2-stable-side .nav button.active:after,
.v2-stable-side .nav button.v2-active:after{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:99px;
  background:#bfdbfe;
}

.v2-stable-mobile-menu{
  display:none!important;
  position:fixed;
  left:12px;
  top:12px;
  z-index:120;
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border-radius:10px!important;
  border:1px solid #dbeafe!important;
  background:#eef5ff!important;
  color:#1d4ed8!important;
  box-shadow:0 12px 24px rgba(15,23,42,.14)!important;
}

body.v2-menu-collapsed .app.v2-stable-shell{
  grid-template-columns:76px minmax(0,1fr)!important;
}

body.v2-menu-collapsed .v2-stable-side.side{
  width:76px!important;
}

body.v2-menu-collapsed .v2-stable-side .side-inner{
  padding:10px 8px!important;
}

body.v2-menu-collapsed .v2-stable-side .brand{
  grid-template-columns:34px 26px!important;
  gap:4px!important;
  justify-content:center!important;
  padding:5px!important;
}

body.v2-menu-collapsed .v2-stable-side .brand .logo{
  width:34px!important;
  height:34px!important;
}

body.v2-menu-collapsed .v2-stable-collapse{
  width:26px!important;
  height:30px!important;
  min-width:26px!important;
}

body.v2-menu-collapsed .v2-stable-side .brand div:not(.logo),
body.v2-menu-collapsed .v2-stable-side .brand small,
body.v2-menu-collapsed .v2-stable-side .userbox,
body.v2-menu-collapsed .v2-stable-side summary{
  display:none!important;
}

body.v2-menu-collapsed .v2-stable-side .nav details{
  display:contents!important;
}

body.v2-menu-collapsed .v2-stable-side .nav button{
  width:44px!important;
  height:42px!important;
  min-height:42px!important;
  margin:0 auto!important;
  padding:0!important;
  justify-content:center!important;
  font-size:0!important;
}

body.v2-menu-collapsed .v2-stable-side .nav button span:not(.nav-ico),
body.v2-menu-collapsed .v2-stable-side .nav button .nav-label{
  display:none!important;
}

.v2-setting-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.v2-list-manager{
  display:grid;
  gap:10px;
}

.v2-list-row{
  display:grid;
  grid-template-columns:minmax(100px,.8fr) minmax(160px,1.3fr) auto auto;
  gap:8px;
  align-items:center;
  padding:10px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
}

.v2-list-row input[type="checkbox"]{
  width:auto;
}

.v2-list-actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
}

.v2-pwa-assets{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.v2-asset-card{
  display:grid!important;
  grid-template-columns:104px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:start!important;
}

.v2-asset-preview{
  width:104px!important;
  aspect-ratio:1!important;
  border:1px solid #dbe5f0!important;
  border-radius:8px!important;
  background:#f8fafc!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}

.v2-asset-preview img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  padding:8px!important;
}

.v2-asset-empty{
  padding:8px!important;
  color:#64748b!important;
  font-size:11px!important;
  line-height:1.2!important;
  text-align:center!important;
}

.v2-asset-body{
  min-width:0!important;
}

.v2-asset-meta{
  display:block;
  margin:0 0 6px;
  color:#64748b;
  font-size:11px;
  line-height:1.25;
}

.v23-completion-tree{
  display:grid;
  gap:10px;
}

.v23-completion-group{
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  overflow:hidden;
}

.v23-completion-group summary{
  cursor:pointer;
  padding:10px 12px;
  font-weight:800;
  color:#0f172a;
  background:#f8fafc;
  border-bottom:1px solid #e5edf6;
}

.v23-completion-rows{
  display:grid;
  grid-template-columns:repeat(2,minmax(260px,1fr));
  gap:8px;
  padding:10px;
}

.v23-completion-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:7px 9px;
  border:1px solid #e2e8f0;
  border-radius:7px;
  background:#f8fafc;
  font-weight:700;
  color:#172033;
}

.v23-completion-row input{
  flex:0 0 auto;
  width:auto!important;
  min-width:16px!important;
  height:16px!important;
}

.v23-completion-row span{
  flex:1 1 auto;
  min-width:0;
  line-height:1.25;
}

.v23-completion-row.is-disabled{
  opacity:.55;
}

.rpi-footer-copy a,
.login-copy a{
  color:inherit!important;
  text-decoration:underline!important;
  text-underline-offset:2px!important;
}

.v2-stable-side .rpi-footer-copy,
.v2-stable-side-inner .rpi-footer-copy{
  flex:0 0 auto!important;
  margin-top:auto!important;
  margin-bottom:18px!important;
  padding:10px 10px 18px!important;
  color:rgba(219,234,254,.74)!important;
  font-size:10px!important;
  line-height:1.35!important;
}

body.v2-menu-collapsed .v2-stable-side .rpi-footer-copy{
  display:none!important;
}

/* V2.18 - navigation moderne inspiree du mockup fourni */
.app.v2-stable-shell .v2-stable-side.side{
  background:transparent!important;
  box-shadow:none!important;
  padding:12px!important;
}

.v2-stable-side .side-inner,
.v2-stable-side-inner{
  height:calc(100dvh - 24px)!important;
  min-height:calc(100dvh - 24px)!important;
  max-height:calc(100dvh - 24px)!important;
  padding:14px 12px 16px!important;
  gap:12px!important;
  border:1px solid rgba(148,163,184,.22)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(59,130,246,.22),transparent 34%),
    linear-gradient(180deg,#0b1424 0%,#0d1828 48%,#08111f 100%)!important;
  box-shadow:0 24px 52px rgba(15,23,42,.28)!important;
}

.v2-stable-side .brand{
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:11px!important;
  padding:10px 11px!important;
  border:0!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
}

.v2-stable-side .brand .logo{
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 12px 24px rgba(0,0,0,.22)!important;
}

.v2-stable-side .brand .logo + div b,
.v2-stable-side .brand .logo + div strong{
  font-size:15px!important;
  line-height:1.08!important;
  letter-spacing:0!important;
}

.v2-stable-side .brand .logo + div small{
  color:#aebbd0!important;
  font-size:11px!important;
  line-height:1.2!important;
}

.v2-stable-nav.nav,
.v2-stable-side .nav{
  gap:4px!important;
  padding:2px 2px 10px!important;
  scrollbar-width:thin!important;
}

.v2-stable-nav details,
.v2-stable-side .nav details{
  border:0!important;
  border-top:1px solid rgba(148,163,184,.18)!important;
  border-radius:0!important;
  background:transparent!important;
  margin:7px 2px 0!important;
  padding:8px 0 0!important;
}

.v2-stable-nav details:first-child,
.v2-stable-side .nav details:first-child{
  border-top:0!important;
  margin-top:0!important;
  padding-top:0!important;
}

.v2-stable-nav details[open],
.v2-stable-side .nav details[open]{
  background:transparent!important;
}

.v2-stable-nav summary,
.v2-stable-side .nav summary{
  min-height:24px!important;
  margin:0 0 4px!important;
  padding:2px 8px!important;
  border-radius:8px!important;
  color:#9cafc7!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.075em!important;
}

.v2-stable-nav .group-dot,
.v2-stable-side .nav .group-dot{
  display:none!important;
}

.v2-stable-nav details button,
.v2-stable-side .nav details button{
  margin-left:0!important;
  width:100%!important;
}

.v2-stable-nav details button:before,
.v2-stable-side .nav details button:before{
  display:none!important;
}

.v2-stable-nav button,
.v2-stable-side .nav button{
  min-height:44px!important;
  height:44px!important;
  margin:2px 0!important;
  padding:0 10px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  color:#eaf1fb!important;
  font-size:14px!important;
  font-weight:850!important;
  gap:10px!important;
}

.v2-stable-nav button:hover,
.v2-stable-side .nav button:hover{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.08)!important;
}

.v2-stable-nav button.active,
.v2-stable-nav button.v2-active,
.v2-stable-side .nav button.active,
.v2-stable-side .nav button.v2-active{
  background:linear-gradient(135deg,#2f72f3,#1d4ed8)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 14px 28px rgba(37,99,235,.36)!important;
}

.v2-stable-nav button.active:after,
.v2-stable-nav button.v2-active:after,
.v2-stable-side .nav button.active:after,
.v2-stable-side .nav button.v2-active:after{
  left:auto!important;
  right:11px!important;
  top:50%!important;
  bottom:auto!important;
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:#dbeafe!important;
  transform:translateY(-50%)!important;
}

.v2-stable-side .nav .nav-label{
  min-width:0!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.v2-stable-side .nav .nav-ico,
.v2-stable-side .nav .v217-nav-icon{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  flex:0 0 32px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.055)!important;
  color:#cbd5e1!important;
  font-size:0!important;
}

.v2-stable-side .nav .v217-nav-icon svg{
  width:19px!important;
  height:19px!important;
  display:block!important;
  fill:currentColor!important;
}

.v2-stable-side .nav button[data-p="dashboard"] .v217-nav-icon{color:#60a5fa!important}
.v2-stable-side .nav button[data-p="service_am"] .v217-nav-icon{color:#fbbf24!important}
.v2-stable-side .nav button[data-p="service_cantine"] .v217-nav-icon{color:#e5e7eb!important}
.v2-stable-side .nav button[data-p="service_pm"] .v217-nav-icon{color:#fde68a!important}
.v2-stable-side .nav button[data-p="service_mercredi"] .v217-nav-icon{color:#fb923c!important}
.v2-stable-side .nav button[data-p="service_alsh"] .v217-nav-icon{color:#4ade80!important}
.v2-stable-side .nav button[data-p="families"] .v217-nav-icon{color:#cbd5e1!important}
.v2-stable-side .nav button[data-p="children"] .v217-nav-icon{color:#e5e7eb!important}
.v2-stable-side .nav button[data-p="parent_reservations"] .v217-nav-icon{color:#93c5fd!important}
.v2-stable-side .nav button[data-p="parent_documents"] .v217-nav-icon{color:#e5e7eb!important}
.v2-stable-side .nav button[data-p="parent_rgpd"] .v217-nav-icon{color:#86efac!important}
.v2-stable-side .nav button[data-p="billing"] .v217-nav-icon,
.v2-stable-side .nav button[data-p="tariffs"] .v217-nav-icon{color:#86efac!important}
.v2-stable-side .nav button[data-p="users"] .v217-nav-icon{color:#c4b5fd!important}
.v2-stable-side .nav button[data-p="settings"] .v217-nav-icon{color:#e5e7eb!important}
.v2-stable-side .nav button[data-p="stats"] .v217-nav-icon{color:#fca5a5!important}

.v2-stable-side .nav button.active .v217-nav-icon,
.v2-stable-side .nav button.v2-active .v217-nav-icon{
  color:#fff!important;
  background:rgba(255,255,255,.14)!important;
}

.rpi-footer-contact{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:5px!important;
  color:#bfdbfe!important;
  font-weight:900!important;
  text-decoration:none!important;
}

.login-copy .rpi-footer-contact{
  color:#1d4ed8!important;
}

.rpi-footer-contact:hover,
.login-copy .rpi-footer-contact:hover{
  text-decoration:underline!important;
}

.rpi-footer-contact-group{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  margin-top:5px!important;
  font-weight:900!important;
}

.rpi-footer-contact-group>span{
  color:inherit!important;
}

.rpi-footer-contact-group .rpi-footer-contact{
  margin-top:0!important;
}

body.v2-menu-collapsed .v2-stable-side .side-inner{
  padding:10px 8px!important;
  border-radius:18px!important;
}

body.v2-menu-collapsed .v2-stable-side .brand{
  grid-template-columns:42px!important;
  justify-content:center!important;
  padding:8px!important;
}

body.v2-menu-collapsed .v2-stable-side .brand .logo{
  width:42px!important;
  height:42px!important;
}

body.v2-menu-collapsed .v2-stable-side .nav button{
  width:46px!important;
  height:46px!important;
  min-height:46px!important;
  border-radius:14px!important;
}

body.v2-menu-collapsed .v2-stable-side .nav .nav-ico,
body.v2-menu-collapsed .v2-stable-side .nav .v217-nav-icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  flex-basis:34px!important;
}

.v216-backup-pane{
  display:grid;
  gap:14px;
}

.v216-backup-head,
.v216-backup-section>header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.v216-backup-head h2,
.v216-backup-section h3{
  margin:0 0 4px!important;
}

.v216-backup-head p,
.v216-backup-section header span{
  color:#64748b;
  font-size:12px;
  font-weight:800;
}

.v216-backup-status{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.v216-backup-section{
  border:1px solid #dfe7f1;
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}

.v216-backup-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:10px;
}

.v216-backup-form{
  display:grid;
  grid-template-columns:minmax(260px,1.2fr) minmax(180px,.7fr) minmax(180px,.7fr);
  gap:12px;
  align-items:start;
}

.v216-backup-section .table-wrap{
  margin-top:10px;
  max-height:320px;
  overflow:auto;
}

.v216-backup-section table th{
  top:0;
  z-index:2;
}

.v216-backup-auto .hint{
  margin:10px 0 0!important;
}

.v216-backup-pane .v213-backup-times{
  margin-top:2px;
}

.v216-backup-pane .v213-time-list label{
  grid-template-columns:90px 120px auto;
}

button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--v2-focus)!important;
  outline-offset:2px!important;
}

@media(max-width:980px){
  body.v2-menu-open,
  body.menu-open{
    overflow:hidden!important;
  }

  .app.v2-stable-shell,
  body.v2-menu-collapsed .app.v2-stable-shell{
    grid-template-columns:1fr!important;
  }

  .app.v2-stable-shell .workspace{
    min-height:100dvh!important;
    width:100%!important;
  }

  .v2-stable-side.side{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:286px!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    z-index:110!important;
    transform:translateX(-104%)!important;
    transition:transform .22s ease!important;
  }

  body.v2-menu-open .v2-stable-side.side,
  body.menu-open .v2-stable-side.side{
    transform:translateX(0)!important;
  }

  body.v2-menu-open:before,
  body.menu-open:before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    z-index:100;
  }

  .v2-stable-mobile-menu{
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
  }

  .main{
    padding-top:16px!important;
  }

  body.v2-menu-collapsed .v2-stable-side .brand div:not(.logo),
  body.v2-menu-collapsed .v2-stable-side summary{
    display:block!important;
  }

  body.v2-menu-collapsed .v2-stable-side .nav details{
    display:block!important;
  }

  body.v2-menu-collapsed .v2-stable-side .nav button{
    width:100%!important;
    font-size:inherit!important;
    justify-content:flex-start!important;
    padding:0 10px!important;
  }

  .v2-setting-grid,
  .v2-pwa-assets,
  .v2-asset-card,
  .v2-list-row,
  .v23-completion-rows,
  .v216-backup-status,
  .v216-backup-actions,
  .v216-backup-form{
    grid-template-columns:1fr;
  }

  .v216-backup-head,
  .v216-backup-section>header{
    display:grid;
    gap:4px;
  }

  .v216-backup-section{
    padding:12px;
    border-radius:14px;
  }

  .v216-backup-section .table-wrap{
    max-height:none;
  }

  .v216-backup-pane .v213-time-list label{
    grid-template-columns:1fr!important;
  }
}

@media(min-width:981px){
  .app.v2-stable-shell,
  .app.v11.v2-stable-shell{
    display:grid!important;
    grid-template-columns:280px minmax(0,1fr)!important;
    align-items:stretch!important;
  }

  .app.v2-stable-shell .workspace,
  .app.v2-stable-shell > .main{
    grid-column:2!important;
    min-width:0!important;
    width:100%!important;
    margin-left:0!important;
  }

  .app.v2-stable-shell .workspace{
    padding-top:72px!important;
  }

  .app.v2-stable-shell .topbar{
    position:fixed!important;
    top:0!important;
    left:280px!important;
    right:0!important;
    width:auto!important;
    height:72px!important;
    min-height:72px!important;
    margin:0!important;
    z-index:75!important;
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid #dfe7f1!important;
    box-shadow:0 8px 24px rgba(15,23,42,.06)!important;
    backdrop-filter:blur(14px)!important;
  }

  body:has(.modal-back.show) .app.v2-stable-shell .topbar{
    z-index:1!important;
  }

  .v2-stable-side.side{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:280px!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    z-index:70!important;
  }

  .topbar-title .hamb,
  #menuToggle,
  #menuToggleV1243{
    display:none!important;
  }
}

@media(max-width:980px){
  .topbar-title .hamb,
  #menuToggleV1243.v2-mobile-hamb{
    display:inline-flex!important;
  }
}

/* V2.19 - ajustements mobile apres nouvelle navigation */
@media(max-width:980px){
  html,
  body,
  #app{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .app.v2-stable-shell,
  body.v2-menu-collapsed .app.v2-stable-shell{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:block!important;
  }

  .app.v2-stable-shell .workspace,
  .app.v2-stable-shell > .main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  .app.v2-stable-shell .topbar{
    position:sticky!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:80!important;
  }

  .main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:12px!important;
  }

  .top{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:10px!important;
  }

  .top .btnrow,
  .top > .btnrow{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(138px,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }

  .top .btnrow button,
  .top > button{
    min-width:0!important;
    width:100%!important;
    min-height:38px!important;
    padding:8px 10px!important;
    white-space:normal!important;
    line-height:1.15!important;
  }

  .v2-stable-side.side{
    width:min(286px,86vw)!important;
    padding:10px!important;
  }

  .v2-stable-side .side-inner,
  .v2-stable-side-inner{
    height:calc(100dvh - 20px)!important;
    min-height:calc(100dvh - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:18px!important;
  }
}

@media(max-width:540px){
  .top .btnrow,
  .top > .btnrow{
    grid-template-columns:1fr!important;
  }

  .top h1{
    font-size:20px!important;
  }
}