/* Interface mobile « application » (≤ 820 px). Même charte que le bureau : bleu #203A7C, Poppins, Inter, cartes arrondies. */
@media (max-width: 820px) {
  body.m-shell { background: #F8F9FC; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.m-shell.m-sheet-open { overflow: hidden; }

  /* ——— En-tête : salutation à gauche, actions rondes à droite ——— */
  .m-shell .topbar { position: sticky; top: 0; z-index: 800; background: rgba(248, 249, 252, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 0; box-shadow: none; }
  .m-shell .topbar-inner { padding: 14px 16px 10px; gap: 10px; align-items: center; }
  .m-shell .community-switcher-wrap { position: absolute; left: 16px; top: 64px; width: 0; height: 0; overflow: visible; }
  .m-shell .community-switcher { display: none; }
  .m-shell .community-switcher-menu { position: fixed; left: 16px; right: 16px; top: 70px; z-index: 2500; max-height: 60vh; overflow: auto; border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .22); }
  .m-greet { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; text-align: left; padding: 0; }
  .m-av { flex: none; width: 46px; height: 46px; border-radius: 16px; background: #203A7C center / cover; color: #fff; display: grid; place-items: center; font: 700 15px/1 'Poppins', sans-serif; }
  .m-greet-t { min-width: 0; display: flex; flex-direction: column; }
  .m-greet-t b { font: 600 17px/1.2 'Poppins', sans-serif; letter-spacing: -0.02em; color: #22202B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-greet-t small { margin-top: 2px; font: 500 13px/1.2 'Inter', sans-serif; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 4px; }
  .m-shell .topbar-actions { gap: 8px; margin-left: auto; flex: none; }
  .m-shell .topbar-actions [data-lang-switcher], .m-shell .topbar-actions .lang-switcher, .m-shell .topbar-actions .user-avatar { display: none !important; }
  .m-shell .icon-btn, .m-shell .search-bar:not(.open) { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; background: #fff; border: 1px solid #EEF0F5; box-shadow: 0 4px 14px rgba(32, 58, 124, .06); display: grid; place-items: center; padding: 0; margin: 0; }
  .m-shell .search-bar:not(.open) { flex: none; }
  .m-shell .search-bar:not(.open) input { display: none; }
  .m-shell .search-bar.open { position: fixed; left: 12px; right: 12px; top: 10px; width: auto; height: 52px; padding: 0 18px; border-radius: 999px; z-index: 2600; background: #fff; box-shadow: 0 10px 34px rgba(0, 0, 0, .2); display: flex; align-items: center; gap: 10px; }
  .m-shell .search-bar.open input { display: block; flex: 1; }
  .m-shell .search-bar.open .search-panel { position: fixed; left: 12px; right: 12px; top: 70px; min-width: 0; max-height: 70vh; }
  .m-shell .inbox-panel { position: fixed !important; left: 12px !important; right: 12px !important; top: 70px !important; width: auto !important; max-height: 70vh; border-radius: 20px; }

  /* Les onglets du haut laissent la place à la barre du bas */
  .m-shell .tabs-wrap { display: none; }
  .m-shell .main, .m-shell .main.layout-with-sidebar { padding: 4px 16px 24px; }
  .m-shell .main.layout-with-sidebar .sidebar { display: none; }
  .m-pagetitle { font: 600 26px/1.15 'Poppins', sans-serif; letter-spacing: -0.03em; color: #22202B; margin: 6px 0 16px; }
  .m-pagetitle:empty { display: none; }

  /* ——— Carte de progression (bleu de la marque) ——— */
  .m-hero { background: linear-gradient(135deg, #203A7C 0%, #2b3f86 55%, #493781 100%); color: #fff; border-radius: 26px; padding: 20px 22px 20px; box-shadow: 0 18px 40px -20px rgba(32, 58, 124, .7); margin: 4px 0 18px; }
  .m-hero-top { display: flex; align-items: center; gap: 10px; font: 500 14px/1 'Inter', sans-serif; color: rgba(255, 255, 255, .85); }
  .m-hero-ico { width: 26px; height: 26px; border-radius: 9px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
  .m-hero-link { margin-left: auto; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; }
  .m-hero-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
  .m-hero-main strong { font: 700 44px/1 'Poppins', sans-serif; letter-spacing: -0.04em; }
  .m-hero-unit { font: 500 16px/1 'Inter', sans-serif; color: rgba(255, 255, 255, .75); }
  .mh-pill { margin-left: auto; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 600 12.5px/1 'Inter', sans-serif; white-space: nowrap; }
  .m-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .2); margin-top: 18px; overflow: hidden; }
  .m-bar i { display: block; height: 100%; border-radius: 4px; background: #fff; transition: width .6s cubic-bezier(.16, 1, .3, 1); }
  .m-hero-foot { display: flex; justify-content: space-between; margin-top: 10px; font: 500 13px/1 'Inter', sans-serif; color: rgba(255, 255, 255, .8); }

  /* ——— Raccourcis ronds ——— */
  .m-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
  .m-actions button { display: flex; flex-direction: column; align-items: center; gap: 9px; font: 500 12.5px/1.2 'Inter', sans-serif; color: #4B5563; padding: 0; }
  .m-actions button span { width: 58px; height: 58px; border-radius: 20px; background: #fff; border: 1px solid #EEF0F5; box-shadow: 0 6px 18px rgba(32, 58, 124, .07); display: grid; place-items: center; color: #203A7C; }
  .m-actions button:active span { transform: scale(.96); }
  .m-section { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 12px; }
  .m-section h3 { font: 600 19px/1.2 'Poppins', sans-serif; letter-spacing: -0.02em; color: #22202B; }
  .m-link { display: inline-flex; align-items: center; gap: 5px; font: 600 13.5px/1 'Inter', sans-serif; color: #203A7C; }

  /* ——— Cartes arrondies ——— */
  .m-shell .post-card, .m-shell .classroom-card, .m-shell .cr-card, .m-shell .member-card, .m-shell .event-card, .m-shell .ev-card, .m-shell .calendar-card, .m-shell .lb-board, .m-shell .lb-earn, .m-shell .ab-card, .m-shell .composer, .m-shell #onboarding-card > * { border-radius: 22px; border: 1px solid #EEF0F5; box-shadow: 0 8px 24px -14px rgba(32, 58, 124, .25); }
  .m-shell .composer { background: #fff; margin-bottom: 16px; }
  .m-shell .post-card { margin-bottom: 14px; }

  /* Pastilles de filtre : pilules défilantes */
  .m-shell .filter-pills, .m-shell .members-pills, .m-shell .lb-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .m-shell .filter-pills::-webkit-scrollbar, .m-shell .members-pills::-webkit-scrollbar { display: none; }
  .m-shell .mh-pill-tab, .m-shell .f-pill, .m-shell .mh-pill.status, .m-shell .lb-tab { border-radius: 999px; }

  /* ——— Barre d'onglets du bas ——— */
  .m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: 1fr 1fr 78px 1fr 1fr; align-items: end; padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -10px 34px rgba(32, 58, 124, .12); }
  .m-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 4px; font: 500 11.5px/1 'Inter', sans-serif; color: #9CA3AF; min-height: 52px; }
  .m-tab .ic { width: 23px; height: 23px; }
  .m-tab.active { color: #203A7C; font-weight: 700; }
  .m-fab { width: 62px; height: 62px; border-radius: 50%; background: #203A7C; color: #fff; display: grid; place-items: center; margin: -34px auto 4px; border: 5px solid #fff; box-shadow: 0 12px 26px rgba(32, 58, 124, .45); transition: transform .2s; }
  .m-fab:active { transform: scale(.94); }

  /* ——— Feuille « Plus » ——— */
  .m-sheet { position: fixed; inset: 0; z-index: 2000; }
  .m-sheet[hidden] { display: none; }
  .m-sheet-bd { position: absolute; inset: 0; background: rgba(17, 24, 39, .45); }
  .m-sheet-body { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 28px 28px 0 0; padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); animation: msheet .28s cubic-bezier(.16, 1, .3, 1); }
  @keyframes msheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .m-grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: #E5E7EB; margin: 0 auto 18px; }
  .m-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
  .m-sheet-grid button { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 12.5px/1.2 'Inter', sans-serif; color: #4B5563; text-align: center; padding: 0; }
  .m-sheet-grid button span { width: 56px; height: 56px; border-radius: 18px; background: #F3F5FB; display: grid; place-items: center; color: #203A7C; }
  .m-sheet-lang { display: flex; justify-content: center; margin-top: 22px; }

  /* Les fenêtres et la barre d'onglets : les fenêtres passent devant */
  .modal-backdrop { z-index: 3000; }
}

@media (max-width: 380px) {
  .m-hero-main strong { font-size: 38px; }
  .m-actions button span { width: 52px; height: 52px; border-radius: 18px; }
}