/* =====================================================================
   POSEIDON — Couche MOBILE (glassmorphisme)
   Active uniquement sur petits écrans : le rendu desktop reste intact.
   ===================================================================== */
@media (max-width: 820px) {

  :root {
    --m-header-h: calc(54px + env(safe-area-inset-top, 0px));
    --m-tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  html, body {
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
  }

  /* ── Barre supérieure : header verre ──────────────────────────────── */
  .topbar {
    height: var(--m-header-h) !important;
    padding: env(safe-area-inset-top, 0px) 14px 0 14px !important;
    background: rgba(20, 22, 38, 0.55) !important;
    backdrop-filter: blur(28px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  }
  .topbar-sep { display: none !important; }
  .topbar-char { display: none !important; }
  .topbar-logo { transform: scale(1.05); }
  /* Raccourci Personnalisation (engrenage) retiré du header sur mobile
     → reste accessible via le menu de la photo de profil */
  .topbar-btn { display: none !important; }
  .topbar-avatar { width: 36px !important; height: 36px !important; }

  /* ── Bureau → écran d'accueil scrollable ──────────────────────────── */
  .desktop {
    top: var(--m-header-h) !important;
    bottom: var(--m-tabbar-h) !important;
    left: 0 !important; right: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 26px !important;
  }
  .desktop-icons {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 4px !important;
    align-content: start;
  }
  .desk-icon {
    width: auto !important;
    padding: 16px 8px !important;
    gap: 10px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 8px 26px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
  }
  .desk-icon:hover { transform: none; background: rgba(255,255,255,0.07) !important; }
  .desk-icon:active:not(.desk-icon-locked) { transform: scale(0.94); background: rgba(255,255,255,0.13) !important; }
  .icon-img { width: 56px !important; height: 56px !important; border-radius: 17px !important; }
  .desk-icon span {
    font-size: 11.5px !important; font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7) !important;
  }

  /* ── Fenêtres → feuilles plein écran ──────────────────────────────── */
  #wins { inset: 0 !important; }
  .win {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: var(--m-header-h) !important;
    bottom: var(--m-tabbar-h) !important;
    width: 100vw !important;
    height: auto !important;
    min-width: 0 !important; min-height: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    border: none !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5) !important;
    background: rgba(14, 16, 28, 0.92) !important;
    backdrop-filter: blur(34px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.6) !important;
    transform: none !important;
    animation: m-sheet-up .26s cubic-bezier(.22,1,.36,1);
  }
  @keyframes m-sheet-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }

  .win-tb {
    height: 52px !important;
    padding: 0 10px !important;
    background: rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    cursor: default !important;
    gap: 6px !important;
  }
  /* Pastilles → bouton retour à gauche, gros et tactile */
  .win-dots { order: 0; }
  .win-dot.dot-min, .win-dot.dot-max { display: none !important; }
  .win-dot.dot-close {
    width: 38px !important; height: 38px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    color: transparent !important;
  }
  .win-dot.dot-close::before {
    content: '‹';
    font-size: 26px; font-weight: 700;
    color: #fff;
  }
  .win-dot.dot-close:hover { transform: none; filter: none; }
  .win-dot.dot-close:active { background: rgba(255,255,255,0.16) !important; }
  .win-title {
    font-size: 15px !important; font-weight: 700 !important;
    color: #fff !important; letter-spacing: .3px;
  }
  .win-resize { display: none !important; }
  .win-body {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom,0px)) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── Barre du bas → tab bar verre ─────────────────────────────────── */
  .taskbar {
    height: var(--m-tabbar-h) !important;
    padding: 0 16px env(safe-area-inset-bottom, 0px) !important;
    background: rgba(20, 22, 38, 0.6) !important;
    backdrop-filter: blur(28px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    justify-content: center !important;
  }
  /* Pas de liste de fenêtres, pas d'heure : Démarrer centré */
  .tb-apps, .tb-sep, .tb-show-desktop, .tb-tray, .tray-clock { display: none !important; }
  .tb-start {
    width: auto !important; padding: 0 26px !important; height: 42px !important;
    border-radius: 21px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
  }

  /* ── Widgets bureau : masqués sur mobile ──────────────────────────── */
  .desktop-widget { display: none !important; }

  /* ── Marque POSEIDON lisible sur le header verre ──────────────────── */
  .topbar-logo {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7) !important;
  }

  /* ── Apps plein écran : empiler les colonnes au lieu de les écraser ── */
  .win-body > div[style*="margin:-12px -14px"],
  .win-body > div[style*="margin: -12px -14px"] {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
    margin: 0 !important;
  }
  .win-body > div[style*="margin:-12px -14px"] > div[style*="flex-shrink:0"],
  .win-body > div[style*="margin: -12px -14px"] > div[style*="flex-shrink:0"] {
    width: 100% !important;
    flex-shrink: 0 !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  /* Listes/sidebars internes : hauteur raisonnable, pas d'écrasement */
  .win-body > div[style*="-12px -14px"] [id$="-list"],
  .win-body > div[style*="-12px -14px"] [id$="-sidebar"] {
    max-height: 38vh !important;
  }

  /* ── Menu démarrer → panneau verre plein écran ────────────────────── */
  /* IMPORTANT : ne PAS forcer `display` ici — la visibilité est pilotée
     par le JS (style inline display:none/flex). On ne fait que la mise
     en forme + le positionnement quand il est ouvert. */
  .start-menu {
    position: fixed !important;
    inset: var(--m-header-h) 0 var(--m-tabbar-h) 0 !important;
    width: auto !important; height: auto !important;
    max-height: none !important;
    border-radius: 22px 22px 0 0 !important;
    background: rgba(16, 18, 32, 0.94) !important;
    backdrop-filter: blur(34px) saturate(1.7) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.7) !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* Layout flex appliqué UNIQUEMENT quand le JS l'a ouvert (display:block inline) */
  .start-menu[style*="display: block"],
  .start-menu[style*="display:block"] { display: flex !important; }
  .sm-body { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; flex-direction: column !important; gap: 14px !important; }
  .sm-apps {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border-right: none !important;
    max-height: none !important;
  }
  /* Label de section + raccourcis : texte clair sur le fond verre sombre */
  .sm-section-label { color: rgba(255,255,255,0.55) !important; }
  .sm-shortcut-btn {
    padding: 14px 14px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
  }
  .sm-shortcut-btn:active { background: rgba(255,255,255,0.12) !important; }
  .sm-shortcut-icon { width: 42px !important; height: 42px !important; }
  .sm-shortcut-title { font-size: 14px !important; color: #fff !important; }
  .sm-shortcut-sub { font-size: 11px !important; color: rgba(255,255,255,0.5) !important; }
  .sm-shortcut-arrow { color: rgba(255,255,255,0.4) !important; }
  /* Personnalisation + Déconnexion retirés du menu démarrer sur mobile
     → restent accessibles via le menu de la photo de profil */
  .sm-right { display: none !important; }

  /* ── Menu compte (clic photo de profil) ──────────────────────────── */
  .account-menu {
    position: fixed !important;
    top: var(--m-header-h) !important;
    right: 10px !important; left: auto !important;
    width: min(82vw, 320px) !important;
    border-radius: 16px !important;
    background: rgba(18, 20, 34, 0.96) !important;
    backdrop-filter: blur(30px) saturate(1.7) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.7) !important;
    padding: 6px !important;
  }
  /* Texte clair sur le fond verre sombre (sinon sombre sur sombre) */
  .account-menu .menu-char-name { color: #fff !important; font-weight: 700 !important; }
  .account-menu .menu-item {
    color: rgba(255,255,255,0.92) !important;
    padding: 13px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
  .account-menu .menu-item:hover,
  .account-menu .menu-item:active { background: rgba(255,255,255,0.10) !important; color: #fff !important; }
  .account-menu .menu-item[style*="e11d48"] { color: #fca5a5 !important; }
  .account-menu .menu-item[style*="e11d48"]:hover,
  .account-menu .menu-item[style*="e11d48"]:active { background: rgba(244,63,94,0.16) !important; color: #fca5a5 !important; }
  .account-menu .menu-sep { background: rgba(255,255,255,0.12) !important; }

  /* ── "Nouveau mail" : panneau de composition adapté au téléphone ──── */
  /* (NE PAS toucher `display` : c'est piloté par le JS) */
  #mw-compose {
    width: 100% !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    max-height: 88% !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.55) !important;
  }
  #mw-compose-body { min-height: 120px !important; }

  /* ── Confort tactile : formulaires & boutons ──────────────────────── */
  .win-body input, .win-body select, .win-body textarea,
  input[type=text], input[type=password], input[type=number],
  input[type=date], input[type=time], input[type=url], select, textarea {
    font-size: 16px !important;   /* empêche le zoom auto iOS */
  }
  .win-body button, .btn, .btn-primary, .btn-secondary {
    min-height: 40px;
  }
  /* Grilles internes des apps : on repasse en colonne */
  .form-grid, .form-row { grid-template-columns: 1fr !important; display: block !important; }
  .form-grid > * , .form-row > * { width: 100% !important; box-sizing: border-box; margin-bottom: 8px; }

  /* Overlays/modals génériques créés par les apps → tiennent à l'écran */
  [style*="position:fixed"][style*="inset:0"] > div,
  [style*="position: fixed"][style*="inset: 0"] > div {
    max-width: 94vw !important;
    max-height: 86vh !important;
    overflow: auto !important;
  }

  /* ── Écran de connexion (lock screen) ─────────────────────────────── */
  .lg-stage { gap: 22px !important; padding: 16px !important; }
  .lg-clock-time { font-size: 56px !important; letter-spacing: -1px !important; }
  .lg-clock-date { font-size: 11px !important; letter-spacing: 2px !important; }
  .lg-panel { max-width: 92vw !important; padding: 20px !important; }
  .lg-topbar, .lg-statusbar { padding-left: 16px !important; padding-right: 16px !important; }
  .lg-topbar-status { display: none !important; }

  /* ── Boot ─────────────────────────────────────────────────────────── */
  #screen-boot .boot-bar { width: 70vw !important; }
}

/* Très petits écrans : 2 colonnes d'apps */
@media (max-width: 380px) {
  .desktop-icons { grid-template-columns: repeat(2, 1fr) !important; }
}