/* ============================================================
   CommunityHub - VUE TÉLÉPHONE
   ------------------------------------------------------------
   Tout est sous « body.mobile-ui » : la classe est posée par app.js
   (automatiquement sur un écran étroit si le système est activé dans
   Paramètres du site, ou forcée depuis le bouton d'aperçu pour le dev).
   Rien ne s'applique tant que la classe n'est pas là → zéro risque
   pour l'affichage bureau.
   ============================================================ */

body.mobile-ui { overflow-x: hidden; }
body.mobile-ui * { -webkit-tap-highlight-color: rgba(255,255,255,.08); }
/* Aucun élément ne doit pouvoir élargir la page */
body.mobile-ui img, body.mobile-ui video, body.mobile-ui canvas, body.mobile-ui svg { max-width: 100%; height: auto; }
/* Les rangées en flex (souvent en style inline dans ce projet) passent à la ligne */
body.mobile-ui [style*="display:flex"]:not(.mob-nowrap),
body.mobile-ui [style*="display: flex"]:not(.mob-nowrap) { flex-wrap: wrap; }

/* ── BARRE DU HAUT + TIROIR DE NAVIGATION ───────────────────── */
body.mobile-ui nav { height: 54px; padding: 0 8px; gap: 8px; }
body.mobile-ui .nav-logo { font-size: 16px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-ui .nav-right { gap: 6px; }
body.mobile-ui .nav-username { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
body.mobile-ui .nav-grade { font-size: 10px; }
body.mobile-ui .nav-user > div:last-child { display: none; }      /* nom + grade : place gardée pour l'avatar */
body.mobile-ui .nav-gift span { display: none; }                   /* le cadeau garde son 🎁 seul */
body.mobile-ui .page { padding-top: 54px; }

/* Bouton hamburger (injecté par app.js) */
.mob-burger { display: none; }
body.mobile-ui .mob-burger {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  font-size: 18px; cursor: pointer; padding: 0;
}
body.mobile-ui .mob-burger:active { background: var(--bg4); }

/* Le menu devient un tiroir qui glisse depuis la gauche */
body.mobile-ui .nav-links {
  position: fixed; top: 54px; left: 0; bottom: 0; z-index: 150;
  width: min(80vw, 300px); margin: 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  flex-direction: column; gap: 4px; align-items: stretch;
  background: var(--bg2); border-right: 1px solid var(--border);
  transform: translateX(-102%); transition: transform .22s ease; overflow-y: auto;
  box-shadow: 0 0 30px rgba(0,0,0,.5);
}
body.mobile-ui.nav-open .nav-links { transform: none; }
body.mobile-ui .nav-link { width: 100%; text-align: left; padding: 13px 14px; font-size: 15px; border-radius: 10px; }
/* Voile derrière le tiroir */
.mob-scrim { display: none; }
body.mobile-ui.nav-open .mob-scrim {
  display: block; position: fixed; inset: 54px 0 0 0; z-index: 140; background: rgba(0,0,0,.5);
}

/* ── CONTENU ────────────────────────────────────────────────── */
body.mobile-ui .container,
body.mobile-ui .settings-content,
body.mobile-ui .projet-detail-content,
body.mobile-ui .comm-layout,
body.mobile-ui .projet-layout,
body.mobile-ui .profile-layout { padding: 14px 12px !important; }
body.mobile-ui h1 { font-size: 22px !important; }
body.mobile-ui h2, body.mobile-ui .settings-content h2, body.mobile-ui .projet-detail-content h2 { font-size: 19px !important; }
body.mobile-ui h3 { font-size: 16px !important; }

/* ── LES DEUX COLONNES (projet / paramètres) → onglets défilants ── */
body.mobile-ui .projet-detail-layout,
body.mobile-ui .settings-layout { display: block; min-height: 0; }
body.mobile-ui .projet-detail-sidebar,
body.mobile-ui .settings-sidebar {
  display: block;                      /* sinon la colonne flex étire tout sur la largeur */
  width: auto; flex-shrink: 1; padding: 8px 10px; border-right: none;
  border-bottom: 1px solid var(--border); position: sticky; top: 54px; z-index: 80;
}
body.mobile-ui .settings-sidebar h4 { display: none; }
body.mobile-ui .projet-detail-sidebar .divider { display: none; }
body.mobile-ui .projet-detail-sidebar > .btn { width: auto !important; display: inline-flex; vertical-align: middle; margin: 0 8px 6px 0 !important; }
body.mobile-ui .projet-detail-name { display: inline-block; font-size: 15px; margin: 0 8px 6px 0; }
body.mobile-ui .projet-detail-status { display: inline-block; font-size: 11px; }
body.mobile-ui .projet-detail-nav,
body.mobile-ui .settings-sidebar {
  display: flex !important; flex-direction: row; gap: 6px; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
}
body.mobile-ui .projet-detail-nav::-webkit-scrollbar,
body.mobile-ui .settings-sidebar::-webkit-scrollbar { display: none; }
body.mobile-ui .projet-detail-nav-item,
body.mobile-ui .settings-nav-item {
  flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg3);
}
body.mobile-ui .projet-detail-nav-item.active,
body.mobile-ui .settings-nav-item.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── GRILLES : une seule colonne ─────────────────────────────── */
body.mobile-ui .comm-grid,
body.mobile-ui .projet-grid,
body.mobile-ui .projet-overview-grid,
body.mobile-ui .quota-grid,
body.mobile-ui .qb-grid,
body.mobile-ui .act-guilds,
body.mobile-ui .act-profiles,
body.mobile-ui .act-channels,
body.mobile-ui .act-srcs,
body.mobile-ui .dossier-form-grid,
body.mobile-ui .dossier-members-grid,
body.mobile-ui .carto-fgrid,
body.mobile-ui .gallery-grid { grid-template-columns: 1fr !important; }
/* Les petites vignettes restent à deux par ligne */
body.mobile-ui .act-kpis,
body.mobile-ui .color-grid,
body.mobile-ui .emoji-grid,
body.mobile-ui .perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* ── TABLEAUX : défilement horizontal au doigt ───────────────── */
body.mobile-ui .act-table-wrap,
body.mobile-ui .presence-table-wrap,
body.mobile-ui .table-wrap,
body.mobile-ui .dispo-tableau-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.mobile-ui table {
  display: block; width: max-content; max-width: none;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
body.mobile-ui table th, body.mobile-ui table td { white-space: nowrap; }
/* Les tableaux déjà placés dans un conteneur qui défile gardent leur mise en page
   (sinon on casse leurs colonnes collantes : nom du membre, en-tête…) */
body.mobile-ui .act-table-wrap table,
body.mobile-ui .presence-table-wrap table,
body.mobile-ui .table-wrap table,
body.mobile-ui [style*="overflow-x:auto"] > table,
body.mobile-ui [style*="overflow-x: auto"] > table { display: table; width: auto; overflow: visible; }
/* Beaucoup de tableaux (effectif, dispo, banque…) sont enveloppés par un style en ligne */
body.mobile-ui [style*="overflow-x:auto"],
body.mobile-ui [style*="overflow-x: auto"] { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* ── LES GROS TABLEAUX DU PROJET (présence, effectif, dispo, banque) ─────
   Colonne « nom » collante à gauche pour ne pas perdre le fil, densité réduite,
   et un défilement horizontal franc au doigt. */
body.mobile-ui .presence-table-wrap,
body.mobile-ui .banque-recap-section {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  max-width: 100%;
}
body.mobile-ui .presence-table, body.mobile-ui .effectif-table,
body.mobile-ui .dispo-tableau, body.mobile-ui .banque-recap-table { font-size: 11.5px; }
body.mobile-ui .presence-name-col, body.mobile-ui .presence-name-cell { min-width: 104px; max-width: 104px; font-size: 11.5px; padding: 4px 6px; }
body.mobile-ui .presence-member-name { font-size: 11.5px; line-height: 1.2; white-space: normal; }
body.mobile-ui .presence-grade-col, body.mobile-ui .presence-grade-cell { display: none; }   /* le grade repasse au bureau */
body.mobile-ui .presence-day-col { min-width: 40px; }
body.mobile-ui .presence-cell-label { font-size: 10px; }
body.mobile-ui .presence-table th, body.mobile-ui .presence-table td { padding: 4px 3px; }
body.mobile-ui .presence-day-date { font-size: 9px; }
body.mobile-ui .effectif-table th, body.mobile-ui .effectif-table td { padding: 5px 6px; font-size: 11.5px; }
body.mobile-ui .effectif-table th:first-child, body.mobile-ui .effectif-table td:first-child {
  min-width: 112px !important; max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.mobile-ui .effectif-table th { min-width: 84px !important; }
body.mobile-ui .effectif-input, body.mobile-ui .effectif-select { width: 118px !important; min-width: 0 !important; padding: 6px 8px; }
body.mobile-ui .dispo-tableau th, body.mobile-ui .dispo-tableau td { padding: 3px 0; }
body.mobile-ui .dispo-att-name, body.mobile-ui .dispo-att-name-th { position: sticky; left: 0; z-index: 3; background: var(--bg3); min-width: 86px; max-width: 86px; font-size: 11px; }
body.mobile-ui .dispo-hour-cell, body.mobile-ui .dispo-hour-header { min-width: 22px; font-size: 9px; }
body.mobile-ui .banque-recap-th-name, body.mobile-ui .banque-recap-td:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg2); }
body.mobile-ui .banque-recap-table th, body.mobile-ui .banque-recap-table td { padding: 5px 6px; }
/* En-têtes de semaine / barres d'actions de ces pages */
body.mobile-ui .presence-week-nav, body.mobile-ui .presence-header-actions,
body.mobile-ui .presence-section-header, body.mobile-ui .presence-legend { flex-wrap: wrap; gap: 6px; }
body.mobile-ui .presence-week-label { font-size: 14px; }
body.mobile-ui .presence-legend { font-size: 11px; }

/* ── BANQUE ─────────────────────────────────────────────────── */
body.mobile-ui .banque-item-row { flex-wrap: wrap; gap: 6px; padding: 8px; }
body.mobile-ui .banque-item-name { font-size: 13px; }
body.mobile-ui .banque-item-desc { font-size: 11px; width: 100%; }
body.mobile-ui .banque-qty-input { width: 72px !important; }
body.mobile-ui .banque-move-select { max-width: 100% !important; }
body.mobile-ui .banque-cat-header, body.mobile-ui .banque-subcat-header,
body.mobile-ui .banque-config-cat-header, body.mobile-ui .banque-config-subcat-header { flex-wrap: wrap; gap: 6px; }
body.mobile-ui .banque-my-card { padding: 12px; }

/* ── DOSSIERS ───────────────────────────────────────────────── */
body.mobile-ui .dossier-members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.mobile-ui .dossier-member-card { padding: 8px; }
body.mobile-ui .dossier-member-name { font-size: 12px; }
body.mobile-ui .dossier-warn-card, body.mobile-ui .dossier-note-card { padding: 10px; }
body.mobile-ui .dossier-warn-top, body.mobile-ui .dossier-recruit-row { flex-wrap: wrap; gap: 6px; }
body.mobile-ui .dossier-recruit-label { width: 100%; }
body.mobile-ui .dossier-section { padding: 12px; }

/* ── CONVOCATIONS ───────────────────────────────────────────── */
body.mobile-ui .convoc-mrow { flex-wrap: wrap; gap: 6px; }

/* ── CARTOGRAPHIE : la carte prend l'écran, le panneau passe dessous ── */
body.mobile-ui .carto { height: auto; min-height: 0; }
body.mobile-ui .carto-body { flex-direction: column; }
body.mobile-ui .carto-grid { min-height: 60vh; }
body.mobile-ui .carto-panel { width: auto; max-height: 40vh; }
body.mobile-ui .carto-hud, body.mobile-ui .carto-panel-btns { flex-wrap: wrap; gap: 4px; }

/* ── FORMULAIRES ET BOUTONS (cibles tactiles) ────────────────── */
body.mobile-ui input, body.mobile-ui select, body.mobile-ui textarea,
body.mobile-ui .form-input { font-size: 16px !important; }   /* < 16px = zoom automatique sur iOS */
body.mobile-ui .form-input { padding: 10px 12px; }
body.mobile-ui .btn { min-height: 40px; padding: 9px 14px; }
body.mobile-ui .btn-sm { min-height: 34px; padding: 7px 11px; font-size: 13px; }
body.mobile-ui .toggle { transform: scale(1.1); transform-origin: left center; }
body.mobile-ui .form-field { margin-bottom: 14px; }
body.mobile-ui [style*="max-width"] { max-width: 100% !important; }

/* ── MODALES : feuille qui remonte du bas ────────────────────── */
body.mobile-ui .modal-overlay { padding: 0; align-items: flex-end; }
body.mobile-ui .modal {
  width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh;
  border-radius: 16px 16px 0 0; border-bottom: none;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  animation: mobSheetUp .22s ease-out;
}
@keyframes mobSheetUp { from { transform: translateY(24px); opacity: .6 } to { transform: none; opacity: 1 } }
body.mobile-ui .modal h3 { font-size: 17px; margin-bottom: 14px; padding-right: 30px; }
body.mobile-ui .modal-footer {
  position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); z-index: 2;
  margin: 14px -14px calc(-16px - env(safe-area-inset-bottom));
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg2); border-top: 1px solid var(--border); flex-wrap: wrap;
}
body.mobile-ui .modal-footer .btn { flex: 1 1 130px; justify-content: center; }

/* ── ACCUEIL / COMMUNAUTÉ / PROFIL ──────────────────────────── */
body.mobile-ui .comm-search-row { flex-direction: column; align-items: stretch; gap: 8px; }
body.mobile-ui .comm-search-wrap,
body.mobile-ui .comm-grade-select { width: 100%; max-width: none; }
body.mobile-ui .home-canvas { padding: 10px !important; }
body.mobile-ui .home-edit-bar { top: 54px; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
body.mobile-ui .edit-mode-toggle { bottom: calc(14px + env(safe-area-inset-bottom)); right: 14px; }

/* ── MODULE ACTIVITÉ ────────────────────────────────────────── */
body.mobile-ui .act-tools { flex-wrap: wrap; gap: 8px; }
body.mobile-ui .act-tools .form-input { flex: 1 1 100%; max-width: none !important; }
body.mobile-ui .act-modal { max-width: none; }
body.mobile-ui .act-mtabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
body.mobile-ui .act-mtabs .btn { flex: 0 0 auto; }
body.mobile-ui .act-mstats { gap: 6px 10px; font-size: 12px; }

/* ── QUÊTES ─────────────────────────────────────────────────── */
body.mobile-ui .qb-card { padding: 14px 12px; }
body.mobile-ui .qb-title { font-size: 15px; }
body.mobile-ui .qb-foot { flex-wrap: wrap; gap: 6px; }
body.mobile-ui .qb-retry-pick select { min-width: 0; width: 100%; }
body.mobile-ui .qb-retry-pick .btn { width: 100%; }

/* ── PRÉSENCE / QUOTA / DISPO : en-têtes collants plus compacts ── */
body.mobile-ui .presence-table th, body.mobile-ui .presence-table td,
body.mobile-ui .effectif-table th, body.mobile-ui .effectif-table td,
body.mobile-ui .act-table th, body.mobile-ui .act-table td { padding: 7px 8px; font-size: 12.5px; }

/* ── DIVERS ─────────────────────────────────────────────────── */
body.mobile-ui .pagination { flex-wrap: wrap; gap: 6px; }
body.mobile-ui .toast, body.mobile-ui #toast { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: none; }
body.mobile-ui .save-indicator { bottom: calc(10px + env(safe-area-inset-bottom)); right: 10px; }

/* Aperçu forcé sur un grand écran (bouton de dev) : on cadre le site
   comme un téléphone pour voir le rendu réel. */
body.mobile-ui.mob-preview { max-width: 430px; margin: 0 auto; box-shadow: 0 0 0 1px var(--border2); min-height: 100vh; }
body.mobile-ui.mob-preview nav { max-width: 430px; left: 50%; transform: translateX(-50%); }
body.mobile-ui.mob-preview .nav-links { left: 50%; margin-left: -215px; }

/* ── BANNIÈRE VIP (page Quêtes) ──────────────────────────────
   Elle est bâtie pour un grand écran : écusson 206 px, colonnes à
   min-width 380/280 px, fanion et filigranes qui débordent du cadre.
   Sur téléphone tout est ramené dans la largeur, en colonnes empilées. */
body.mobile-ui .qb-vip {
  margin: 4px 0 16px; padding: 14px 12px 16px; gap: 12px;
  overflow: hidden;                       /* plus rien ne sort du parchemin */
  border-width: 2px;
}
body.mobile-ui .qb-vip::before { inset: 6px; }
body.mobile-ui .qb-vip > .qb-cnr { display: none; }            /* équerres d'angle : elles débordaient */
body.mobile-ui .qb-vip > .qb-orn { width: 30px; height: 30px; }
body.mobile-ui .qb-vip > .qb-orn-tl { top: 6px; left: 6px; }
body.mobile-ui .qb-vip > .qb-orn-tr { top: 6px; right: 6px; }
body.mobile-ui .qb-vip > .qb-orn-bl { bottom: 6px; left: 6px; }
body.mobile-ui .qb-vip > .qb-orn-br { bottom: 6px; right: 6px; }
body.mobile-ui .qb-vip-pennant { display: none; }              /* le fanion masquait le titre */
/* Les trois colonnes s'empilent */
body.mobile-ui .qb-vip-left,
body.mobile-ui .qb-vip-right,
body.mobile-ui .qb-vip-mid { flex: 1 1 100%; min-width: 0; }
body.mobile-ui .qb-vip-left { gap: 10px; align-items: flex-start; }
body.mobile-ui .qb-vip-right { padding: 10px 12px; }
body.mobile-ui .qb-vip-info { flex: 1 1 150px; min-width: 0; }
/* Écusson et textes à l'échelle du téléphone */
body.mobile-ui .qb-vip-shield { width: 104px; height: 118px; margin-left: 0; }
body.mobile-ui .qb-vip-lbl { font-size: 10px; letter-spacing: 1px; }
body.mobile-ui .qb-vip-name, body.mobile-ui .qb-vip-name.none { font-size: 30px; }
body.mobile-ui .qb-vip-tag { font-size: 12px; margin-top: 6px; }
body.mobile-ui .qb-vip-flames { font-size: 13.5px; white-space: normal; }
/* Barre de flammes : le brasero débordait à gauche (-52 px) */
body.mobile-ui .qb-vip-bar { margin: 26px 0 0 30px; height: 28px; }
body.mobile-ui .qb-vip-brazier { left: -36px; width: 42px; height: 42px; }
body.mobile-ui .qb-vip-val { font-size: 13px; }
body.mobile-ui .qb-vip-pct { font-size: 12px; }
/* Bloc « VIP actif » + bouton d'activation */
body.mobile-ui .qb-vip-act { margin-top: 10px; }
body.mobile-ui .qb-vip-act-btn { align-self: stretch; font-size: 12.5px; letter-spacing: .6px; gap: 8px; padding: 8px 10px; }
/* Coffre de série : centré sous le reste */
body.mobile-ui .qb-vip-mid { flex-basis: 100%; padding: 4px 0 0; }
body.mobile-ui .qb-streak-chest { width: 120px; height: 110px; margin: 4px auto 0; }
body.mobile-ui .qb-streak-tap { right: 4px; top: -2px; font-size: 9px; }
/* Cadeau quotidien / boutique dans le panneau de droite */
body.mobile-ui .qb-gift { width: 100%; flex-wrap: wrap; }
body.mobile-ui .qb-vip-rhead { flex-wrap: wrap; gap: 6px; }
body.mobile-ui .qb-vip-arrow { transform: scale(.85); }

/* ── FENÊTRES AVEC LISTE (scoreboard, logs…) ─────────────────
   Ces modales fixent leur hauteur en style inline (84/86 vh). Sur iOS, 1 vh =
   hauteur SANS la barre d'outils Safari → le bas de la feuille (et son bouton
   Fermer) passait sous la barre. On impose la hauteur dynamique. */
body.mobile-ui .modal { max-height: 92dvh !important; }

/* Scoreboard des flammes : une ligne = médaille, avatar, nom, ✅, 🔥 ; le total obtenu passe dessous */
body.mobile-ui .qb-score-row { gap: 7px !important; padding: 6px 8px !important; margin-bottom: 5px !important; }
body.mobile-ui .qb-score-medal { width: 22px !important; font-size: 13px !important; }
body.mobile-ui .qb-score-av { width: 26px !important; height: 26px !important; flex: 0 0 26px; }
body.mobile-ui .qb-score-name { font-size: 12.5px !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-ui .qb-score-done { font-size: 10.5px !important; }
body.mobile-ui .qb-score-bal { font-size: 14px; }
body.mobile-ui .qb-score-earned { order: 9; width: 100%; margin: -2px 0 0 29px; font-size: 10.5px !important; opacity: .8; }

/* Logs de quêtes : icône + libellé sur la 1re ligne avec le montant, date sur la 2e */
body.mobile-ui .qb-log-row { gap: 8px !important; padding: 6px 8px !important; align-items: flex-start !important; }
body.mobile-ui .qb-log-ico { flex: 0 0 18px; width: 18px !important; font-size: 13px; line-height: 1.5; }
body.mobile-ui .qb-log-main { flex: 1 1 120px; }
body.mobile-ui .qb-log-main > div { white-space: normal !important; font-size: 12px !important; line-height: 1.35; }
body.mobile-ui .qb-log-amt { font-size: 13px; }
body.mobile-ui .qb-log-when { order: 9; width: 100%; margin: 1px 0 0 26px; font-size: 10.5px !important; }