/* Version téléphone (≤ 820 px) : menu en tiroir, barre du bas, une colonne, tableaux défilants, fenêtres plein écran. */
.tabbar, .nav-backdrop { display: none; }
@media (max-width: 820px) {
  :root { --top-h: 56px; --side-w: 0px; --tab-h: 62px; }
  html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  /* barre du haut compacte */
  .topbar { padding: 0 8px; gap: 6px; padding-top: env(safe-area-inset-top, 0px); height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); }
  .topbar .brand small, .topbar [data-act=back], .topbar .centre-switch, .topbar a[href="#/atelier"], .user-menu span, .user-menu > svg { display: none; }
  .topbar .brand img { height: 30px; }
  .topbar-streak { left: 0; top: calc(var(--top-h) + env(safe-area-inset-top, 0px) - 2px); }
  .lang-btn { height: 34px; padding: 0 10px; }
  .icon-btn-dark, .user-menu { min-width: 38px; min-height: 38px; }
  .mentor-fab { margin: 0 2px; width: 38px; height: 38px; }
  .dropdown { right: 0; left: auto; }
  /* menu latéral = tiroir */
  .sidebar { top: 0; bottom: 0; width: min(84vw, 320px); padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 70; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 8px 0 30px rgba(0, 0, 0, .5); }
  html[dir=rtl] .sidebar { left: auto; right: 0; transform: translateX(105%); box-shadow: -8px 0 30px rgba(0, 0, 0, .5); }
  html.nav-open .sidebar { transform: none; }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(6, 12, 22, .6); opacity: 0; pointer-events: none; transition: opacity .2s; }
  html.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  html.nav-open body { overflow: hidden; }
  .nav-link { min-height: 44px; font-size: 15px; }
  .nav-link span, .nav-count, .nav-cat-title, .nav-legend { display: revert; }
  .nav-link { justify-content: flex-start; padding: 0 14px; }
  .nav-link span { display: inline; }
  .nav-cat-title { display: block; }
  .nav-legend { display: block; }
  /* contenu pleine largeur */
  .main, html[dir=rtl] .main { margin: calc(var(--top-h) + env(safe-area-inset-top, 0px)) 0 0 0; border-radius: 0; box-shadow: none; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 8px); min-height: 100vh; }
  /* Safari iPhone (iOS 26) : quand la page entière défile, la barre d'adresse se replie et les éléments « fixed »
     (barre du haut, barre du bas) se décalent (barre du haut cachée, bande blanche sous la barre du bas).
     Dans l'ERP, la page ne défile plus : seul le contenu (.main) défile, entre les deux barres. */
  html:has(.tabbar), html:has(.tabbar) body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  html:has(.tabbar) .main, html[dir=rtl]:has(.tabbar) .main { position: fixed; left: 0; right: 0; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    margin: 0; min-height: 0; padding-bottom: 8px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .page-pad { padding: 12px 12px 20px; }
  .list-head { padding: 12px 12px 8px; }
  .row-between { flex-wrap: wrap; gap: 8px; }
  .h2-lg { font-size: 22px; }
  /* barre du bas */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: #0f1b2f; border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 -6px 20px rgba(0, 0, 0, .3); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: #aab4c5; font: 600 11px 'Barlow', 'Tajawal', sans-serif; text-decoration: none; cursor: pointer; min-width: 0; }
  .tabbar svg { color: currentColor; }
  .tabbar a.on { color: #fff; box-shadow: inset 0 3px 0 #e3222a; background: rgba(227, 34, 42, .16); }
  /* grilles → une colonne */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .card { border-radius: 10px; }
  .g-card { padding: 14px !important; gap: 12px !important; }
  /* tableaux : défilement horizontal */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .table th, .table td { white-space: nowrap; }
  .table td.strong, .table td:first-child { white-space: normal; min-width: 110px; }
  /* onglets et barres d'outils défilants */
  .utabs, .fin-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .utab { flex: none; }
  .toolbar, .filters { flex-wrap: wrap; }
  /* fenêtres plein écran */
  .modal-back { padding: 0; align-items: flex-start; }
  .modal, .modal.wide { width: 100%; max-width: 100%; min-height: 100%; height: auto; border-radius: 0; display: flex; flex-direction: column; flex: 0 0 auto; }
  .modal > form, .modal-body { flex: 1; }
  /* formulaires : pas de zoom iOS, cibles de 44 px */
  input, select, textarea { font-size: 16px !important; }
  .input, .field-box, select.input { min-height: 44px; }
  .btn { min-height: 44px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  /* flottants au-dessus de la barre du bas */
  .toasts { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 10px) !important; }
  #rdv-alerts { top: calc(var(--top-h) + 8px) !important; }
  .rl-split { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .brand { display: none; }
}
@media (max-width: 820px) {
  .hero { height: 116px; } /* scène animée conservée sur mobile, en plus compact */
  .hero .strip { width: 78%; height: 32px; }
  .hero h1 { height: 32px; bottom: 0; font-size: 19px; }
  .banner { height: 56px; } .banner h1 { left: 14px; font-size: 20px; }
  .kpis .card, .kpi { padding: 10px !important; }
}
@media (max-width: 820px) {
  .list-head select, .list-head .input, .list-head .field-box, .list-head .search { width: 100%; max-width: 100%; }
  .list-head .btn-red { width: 100%; justify-content: center; }
}

/* Carnet d'entretien : pas de canvas animé ni de hauteur pilotée par le contenu sur mobile (bug d'agrandissement sans fin sur iPhone) */
@media (max-width: 820px) { .cp-dust { display: none !important; } .cp-hero { height: auto; max-height: none; } .cp-aurora, .cp-grid { animation: none !important; } }