/* 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; } }

/* v1.87.2 : changer de centre depuis le téléphone (menu + avatar) — masqué sur ordinateur (sélecteur dans la barre du haut) */
.m-centre { display: none; }
@media (max-width: 820px) {
  .m-centre { display: flex; flex-direction: column; gap: 6px; }
  .m-centre > span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
  .m-centre select { width: 100%; min-height: 44px; font-size: 15px; border-radius: 8px; padding: 8px 10px; }
  .m-centre b { font-size: 15px; }
  .nav-centre { margin: 0 4px 14px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #c4ccd8; }
  .nav-centre select { background: #14223b; color: #fff; border: 1px solid rgba(255,255,255,.25); }
  .nav-centre b { color: #fff; }
  .dd-centre { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; color: var(--muted); }
  .dd-centre select { background: #fff; color: var(--text); border: 1px solid var(--line); }
  html[data-theme="dark"] .dd-centre select { background: #141d2c; color: var(--text); }
}

/* v1.98.x — téléphone : aucun bloc ne dépasse la largeur de l'écran. #page (.main) masque le débordement horizontal :
   les grilles et colonnes flexibles doivent pouvoir rétrécir (min-width: 0), les rangées de boutons passent à la ligne
   et seuls les tableaux larges défilent, dans leur propre cadre. */
@media (max-width: 820px) {
  #page .card, #page section, #page .stack, #page .field, #page .tab-panel,
  #page .grid-2 > *, #page .grid-3 > *, #page .grid-4 > *, #page .row-between > * { min-width: 0; }
  #page .row { flex-wrap: wrap; }
  #page .row-between > .row { justify-content: flex-start; }
  #page .table-wrap, #page .tbl-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #page pre, #page code { white-space: pre-wrap; overflow-wrap: anywhere; }
  #page img, #page canvas, #page video { max-width: 100%; }
  #page .badge, #page .pill { white-space: normal; max-width: 100%; }
  /* diagnostic : grille de points puis panne / photos, l'une sous l'autre */
  #page .dg-split { flex-direction: column; margin: 0 12px 16px !important; }
  #page .dg-split > section { padding: 14px !important; border-right: 0 !important; }
  #page .dg-split > .dg-main { border-bottom: 1px solid var(--line); }
  #page .dg-actions { padding: 0 12px 16px !important; }
  #page .dg-actions .btn { flex: 1 1 100%; justify-content: center; }
  /* contrôle qualité : liste puis fiche */
  #page .qc-split { grid-template-columns: minmax(0, 1fr) !important; }
}
/* planning : l'axe des heures et les couloirs défilent ensemble dans leur cadre */
@media (max-width: 820px) {
  #page .gantt { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 16px; }
  #page .gantt > .g-hours, #page .gantt > .g-row { min-width: 640px; }
}

/* v1.98.45 : compte et déconnexion sur téléphone (maquette « Compte et déconnexion — téléphone ») */
.dd-grip, .dd-head, .dd-backdrop, .nav-account, .dd-confirm { display: none; }
html.dd-open .topbar { z-index: 1300; } /* menu du compte devant la barre du bas et les bandeaux de rendez-vous (ordinateur aussi) */
@media (max-width: 820px) {
  .topbar .tb-scan { display: none; } /* place gagnée : la recherche par photo reste dans la recherche */
  html.dd-open .dd-backdrop { display: block; position: fixed; inset: 0; z-index: 1290; background: rgba(8, 14, 26, .55); }
  #user-dd:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1300; min-width: 0; max-height: 88vh; overflow-y: auto;
    border-radius: 18px 18px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .5);
    display: flex; flex-direction: column; gap: 2px; animation: dd-up .22s ease-out; }
  @keyframes dd-up { from { transform: translateY(100%); } to { transform: none; } }
  #user-dd .dd-grip { display: block; align-self: center; width: 44px; height: 5px; border-radius: 3px; background: #d9dee7; margin-bottom: 8px; }
  #user-dd .dd-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; border-bottom: 1px solid #edf0f4; }
  #user-dd .dd-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
  #user-dd .dd-head b { display: block; font-size: 17px; } #user-dd .dd-head small { font-size: 13px; color: var(--muted, #5b6578); }
  #user-dd .who { display: none; }
  #user-dd > a, #user-dd > button { min-height: 52px; font-size: 15.5px; border-bottom: 1px solid #edf0f4; border-radius: 0; }
  #user-dd .dd-size { min-height: 58px; } #user-dd .dd-size button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  #user-dd > .dd-logout { margin-top: 12px; min-height: 52px; border: 0; border-radius: 12px; background: #e11d24; color: #fff; font-weight: 700; justify-content: center; }
  #user-dd > .dd-logout[hidden] { display: none; }
  #user-dd .dd-confirm:not([hidden]) { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; border-radius: 12px; background: #fff3f3; border: 1px solid #f3b3b5; padding: 12px; color: #14223b; }
  #user-dd .dd-confirm b { font-size: 15px; }
  #user-dd .dd-confirm div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #user-dd .dd-confirm button { min-height: 48px; border-radius: 10px; border: 1px solid #c9d1dd; background: #fff; font-weight: 600; font-size: 15px; justify-content: center; }
  #user-dd .dd-confirm .yes { border: 0; background: #e11d24; color: #fff; font-weight: 700; }
  .sidebar .nav-account { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 4px 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .sidebar .nav-account img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
  .sidebar .nav-account b { display: block; color: #fff; font-size: 14px; } .sidebar .nav-account small { color: #9fb0c8; font-size: 12px; }
  .sidebar .nav-account button { flex: 1 1 100%; min-height: 48px; border-radius: 10px; border: 1px solid rgba(255, 107, 112, .6); background: transparent; color: #ff8a8e; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
}
html[data-theme="dark"] #user-dd .dd-head, html[data-theme="dark"] #user-dd > a, html[data-theme="dark"] #user-dd > button:not(.dd-logout) { border-color: rgba(255, 255, 255, .08); }