/* ════════════════════════════════════════════════════════════
   mobile.css — Strive × Diamix Studio
   Responsive mobile-first. S'active uniquement sur ≤768px.
   Le desktop (>768px) est totalement inchangé.
   ════════════════════════════════════════════════════════════ */

/* ── Variables fallback ── */
:root {
  --mob-bg:     #111111;
  --mob-bg3:    #171717;
  --mob-border: rgba(255,255,255,.055);
  --mob-text:   #f0f0eb;
  --mob-text2:  #888888;
  --mob-text3:  #444444;
  --mob-violet: #6c63ff;
  --mob-violet2:#9d97ff;
  --mob-amber:  #f5a623;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAVIGATION v2 — pilule flottante, glassmorphisme, creux animé
   (masquée sur desktop ; affichée ≤768px, cf. media query plus bas)

   Propriétés custom animables : --nx = position horizontale du creux
   (0→100% de la largeur), --nr = rayon du creux (0 = plat → carve).
   @property les rend animables (Chromium/Safari 16.4+) ; sans support,
   le rendu reste correct, seule la transition devient instantanée.
   ══════════════════════════════════════════════════════════ */
@property --nx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --nr { syntax: '<length>';     inherits: true; initial-value: 0px; }

.mobile-nav {
  display: none;                 /* affichée en flex ≤768px (media query existante) */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  justify-content: center;
  align-items: flex-end;
  /* sommet de la pilule (8px + 56px = 64px) aligné sur la marge basse que toutes
     les pages réservent déjà (calc(64px + safe-area)) → aucun recouvrement */
  padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: none; border: none;
  pointer-events: none;          /* les marges transparentes laissent passer les taps */
}

/* Conteneur positionnel (transparent, laisse déborder le cercle relevé) */
.mnav-pill {
  --nr: 0px;
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 56px;
  display: flex;
  align-items: stretch;
  pointer-events: auto;
  transition: --nx .42s cubic-bezier(.4,0,.2,1), --nr .5s cubic-bezier(.34,1.15,.5,1);
}
.mnav-pill.ready { --nr: 33px; }

/* Fond verre en DEUX couches :
   ::before = flou réel, JAMAIS masqué (appliquer un mask sur un élément à
     backdrop-filter le casse sur certains WebView → rendu noir opaque). Cette
     couche garantit qu'on voit à travers / le glassmorphisme, partout.
   ::after  = teinte sombre uniforme. Sans backdrop-filter → aucun conflit.

   ⚠️ Plus de « creux » (masque radial) autour de la pastille active : le trou
   faisait 33px de rayon pour un cercle de 25px, donc il découpait le verre en
   ANNEAU tout autour — sur un fond sombre (l'île), ça se lisait comme un cercle
   noir cerclant la pastille violette. La pastille se pose maintenant à même le
   verre continu. --nx/--nr restent définis (la pastille suit toujours --nx). */
.mnav-bg {
  position: absolute; inset: 0;
  border-radius: 29px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.mnav-bg::before {
  content: ''; position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  background: rgba(255,255,255,.05);
}
.mnav-bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(16,16,22,.4);
}

/* Onglets (icône seule, pas de libellé) */
.mobile-nav-tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  z-index: 1;
}
.mnav-ico-wrap { position: relative; display: inline-flex; }
.mnav-ico {
  width: 23px; height: 23px;
  object-fit: contain;
  opacity: .45;
  transition: opacity .2s, transform .2s;
}
.mobile-nav-tab:active .mnav-ico { transform: scale(.86); }
.mobile-nav-tab.active .mnav-ico { opacity: 0; }   /* l'icône active est reprise dans le cercle relevé */

/* Cercle relevé (couleur phare Strive) portant le logo de la page active */
.mnav-lift {
  position: absolute;
  top: -9px;                       /* posé plus bas : ne dépasse que légèrement */
  left: var(--nx);
  transform: translateX(-50%) translateY(14px) scale(.7);
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #6c63ff;              /* couleur phare Strive, plate — pas de dégradé */
  box-shadow: 0 6px 16px -4px rgba(108,99,255,.6);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  /* le déplacement horizontal est piloté par --nx (var animée via @property) ;
     on ne transitionne ici QUE la montée (transform) et l'apparition (opacity)
     pour éviter un double easing sur left */
  transition: transform .55s cubic-bezier(.34,1.4,.5,1), opacity .35s ease;
}
.mnav-pill.ready .mnav-lift {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  transition-delay: .1s;
}
.mnav-lift-ico { width: 24px; height: 24px; object-fit: contain; }

.mobile-notif-badge {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: #6c63ff;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(108,99,255,.6);
}

/* ══════════════════════════════════════════════════════════
   HAMBURGER BUTTON (injecté dans le topbar)
   ══════════════════════════════════════════════════════════ */

.mobile-hamburger {
  display: none;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,.055));
  color: var(--text2, #888888);
  font-size: 17px;
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
  margin-right: 4px;
}
.mobile-hamburger:active { background: rgba(255,255,255,.06); color: var(--text, #f0f0eb); }

/* ══════════════════════════════════════════════════════════
   SIDEBAR OVERLAY (backdrop)
   ══════════════════════════════════════════════════════════ */

.mobile-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1100;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mobile-sidebar-overlay.open { display: block; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR PANEL — dock d'icônes groupées par famille (identique
   au dock desktop de js/sidebar.js : mêmes classes .dock-group /
   .dock-item / .dock-tooltip, dégradé plein hauteur, tooltips)
   ══════════════════════════════════════════════════════════ */

.mobile-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: min(96px, 30vw);
  height: 100dvh;
  background: #0f0f10;
  border-right: 1px solid rgba(255,255,255,.05);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 24px rgba(0,0,0,.5);
}
.mobile-sidebar.open { transform: translateX(0); }

/* Logo */
.mobile-sidebar-logowrap {
  padding: 18px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mobile-sidebar-logo-link { display: flex; }
.mobile-sidebar-logoimg {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(108,99,255,.55));
}

/* Colonne de familles (scrollable) */
.mobile-sidebar-nav {
  flex: 1;
  padding: 4px 8px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.mobile-sidebar-nav::-webkit-scrollbar { width: 0; }

/* ── Dock : pill de famille + icônes (mêmes classes que le dock desktop,
   toujours scopées sous .mobile-sidebar / .sidebar pour ne jamais laisser
   l'ordre d'injection des <style> décider quelle taille gagne) ── */
.mobile-sidebar .dock-group {
  /* Même dégradé de marque très léger sur le composant que le dock desktop
     (--tint interpolée violet → ambre selon la position, posée par JS). */
  background:
    linear-gradient(180deg, rgba(var(--tint,108,99,255),.11), rgba(var(--tint,108,99,255),.02)),
    rgba(20,20,22,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 22px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.mobile-sidebar .dock-item {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  width: 100%; height: 46px;
  border-radius: 14px;
  cursor: pointer; text-decoration: none;
  transition: background .15s;
  transform-origin: center;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.mobile-sidebar .dock-item:active { background: rgba(255,255,255,.1); }
.mobile-sidebar .dock-item.active { background: rgba(108,99,255,.20); }
.mobile-sidebar .dock-item.active::after {
  content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--violet, #6c63ff);
}
.mobile-sidebar .dock-item img { width: 21px; height: 21px; object-fit: contain; opacity: .6; transition: opacity .15s; display: block; pointer-events: none; }
.mobile-sidebar .dock-item.active img { opacity: 1; }
.mobile-sidebar .dock-notif-badge {
  position: absolute; top: 4px; right: 8px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 8px; background: var(--violet, #6c63ff); color: #fff;
  font-size: 8px; font-weight: 800; line-height: 14px; text-align: center;
  pointer-events: none; font-family: 'Geist', sans-serif;
}
/* Tooltips désactivés sur tactile (pas de hover) — ne pas toucher .dock-tooltip
   globalement, sinon ça casse aussi le tooltip du dock desktop (même classe) */
.mobile-sidebar .dock-tooltip { display: none; }

/* ── Page Île : sidebar mobile en glassmorphisme (immersion) ── */
.mobile-sidebar--glass { background: transparent; }
.mobile-sidebar--glass .dock-group {
  background:
    linear-gradient(180deg, rgba(var(--tint,108,99,255),.16), rgba(var(--tint,108,99,255),.05)),
    rgba(20,20,26,.30);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-color: rgba(255,255,255,.14);
}


/* ══════════════════════════════════════════════════════════════════
   CHANNELS SLIDE-IN OVERLAY (index.html)
   ══════════════════════════════════════════════════════════════════ */

.mobile-channels-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 840;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-channels-overlay.open { display: block; }
/* Voile allégé pour le panneau en verre de la communauté (voir js/mobile.js) */
.mobile-channels-overlay--glass { background: rgba(0,0,0,.28); }

.mobile-channels-btn {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.055));
  background: transparent;
  color: var(--text2, #888888);
  font-family: 'Geist', sans-serif;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-channels-btn:active {
  background: rgba(255,255,255,.06);
  color: var(--text, #f0f0eb);
}

/* Variante icône seule (communauté). La variante textuelle reste utilisée
   par les cénacles — ne pas fusionner les deux. */
.mobile-channels-btn--icon {
  width: 32px; height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
}
.mobile-channels-btn--icon img {
  width: 17px; height: 17px;
  object-fit: contain;
  opacity: .75;
  pointer-events: none;
}
.mobile-channels-btn--icon:active img { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   DM PAGE — topbar mobile injecté par JS
   ══════════════════════════════════════════════════════════════════ */

.mobile-dm-topbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 52px;
  flex-shrink: 0;
  background: var(--bg2, #111111);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.055));
  z-index: 10;
}
.mobile-dm-topbar-title {
  font-family: 'Geist', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--text, #f0f0eb);
  flex: 1;
}

.mobile-dm-back {
  display: none;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,.055));
  color: var(--text2, #888888);
  font-size: 15px;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
  margin-right: 4px;
}
.mobile-dm-back:active {
  background: rgba(255,255,255,.06);
  color: var(--text, #f0f0eb);
}

/* Strip catégories mobile — cachée par défaut sur desktop */
.mob-cats-strip { display: none; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — s'applique UNIQUEMENT sur ≤768px
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Montrer les éléments mobiles ── */
  .mobile-nav       { display: flex; }
  .mobile-hamburger { display: flex; }

  /* ── Masquer la sidebar desktop ── */
  .sidebar { display: none !important; }

  /* ── Viewport fix iOS (dvh = dynamic viewport height) ── */
  html { height: 100dvh; }
  body {
    height: 100dvh !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Topbar : ajustements mobile ── */
  .topbar { padding: 0 12px !important; gap: 8px !important; }
  .topbar-sub { display: none !important; }
  .member-pill { display: none !important; }

  /* ── ÉLAN EN HAUT À DROITE : dépouillé, identique sur TOUTES les pages ──
     Sur mobile il ne reste que le logo Élan et le chiffre, en blanc. Plus de
     carte ambre, plus de chiffre ambre, plus de libellé ni de point clignotant.

     Pourquoi ici et pas page par page : chaque page a écrit sa propre variante
     du bandeau (.elan-pill, .elan-topbar-pill, .elan-val, .elan-pill-val,
     .elan-topbar-val…). Les lister une fois dans cette feuille — chargée par
     toutes les pages — évite 19 éditions qui divergeraient au premier ajout.
     Les !important sont indispensables : mobile.css est chargé APRÈS le <style>
     de chaque page, mais celui-ci utilise parfois lui aussi !important.

     Le chiffre suit var(--text) plutôt que #fff : blanc sur le thème d'origine,
     et lisible sur un thème clair (§17). Le logo est ramené au monochrome par
     brightness(0) invert(1), inversé en thème clair pour la même raison. */
  .elan-topbar-label, .elan-label, .elan-lbl,
  .elan-dot, .elan-pill-dot, .elan-topbar-dot { display: none !important; }
  .elan-logo-img { display: block !important; }
  .elan-topbar-pill, .elan-pill {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
  }
  .elan-val, .elan-pill-val, .elan-topbar-val {
    color: var(--text, #fff) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  .elan-pill img, .elan-topbar-pill img,
  .elan-icon, .elan-ico-inline, .elan-logo-img {
    filter: brightness(0) invert(1) !important;
    mix-blend-mode: normal !important;
    opacity: .95;
  }
  html[data-theme-scheme="light"] :where(.elan-pill, .elan-topbar-pill) img,
  html[data-theme-scheme="light"] :where(.elan-icon, .elan-ico-inline, .elan-logo-img) {
    filter: brightness(0) !important;
  }

  /* ── Topbar mobile : header épuré ────────────────────────────────────
     Sur mobile, le header ne garde que le NOM de la page + l'Élan. On retire :
       · le badge Niveau (XP) et le pill Cristaux — tous deux injectés
         globalement par js/auth.js (_initCrystalUI) dans chaque .topbar-right,
         donc les masquer ici suffit pour toute l'app : rien à faire page par page ;
       · le logo de page placé avant le titre (.topbar-page-logo) — redondant
         avec l'icône de l'onglet actif déjà mise en avant par la nav du bas.
     Ces trois éléments restent évidemment visibles sur PC.
     Référence de rendu : tracker.html.                                    */
  .level-topbar-pill,
  .crystal-pill,
  .topbar-page-logo { display: none !important; }

  /* ── Layout principal : plein écran ── */
  .main { width: 100% !important; min-width: 0 !important; overflow: hidden !important; }

  /* ══ INDEX.HTML (chat communauté) ══ */
  .content { flex-direction: column !important; overflow: hidden !important; }

  /* ── Channels : panneau glissant depuis la gauche, en verre ──
     Il ne colle plus au bord : marge sur les 4 côtés + coins arrondis, et un
     fond translucide flouté qui laisse deviner le fil de discussion derrière.
     `translateX(-108%)` (et non -100%) tient compte de la marge gauche, sinon
     une lisière du panneau resterait visible à l'état fermé. */
  .channels {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    left: 8px !important;
    width: min(232px, 80vw) !important;
    height: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 850 !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(30,30,38,.72), rgba(16,16,20,.78)) !important;
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.10) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-108%);
    transition: transform .32s cubic-bezier(.32,.72,0,1), opacity .2s ease;
    opacity: 0;
    padding: 6px 8px 10px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.55);
  }
  .channels.mobile-open { transform: translateX(0) !important; opacity: 1; }
  /* Le salon actif doit rester lisible sur du verre, plus contrasté qu'à plat */
  .channels .ch-item.active { background: rgba(255,255,255,.14) !important; }

  /* En thème CLAIR, le verre sombre avalerait le texte : on le retourne.
     (Même raisonnement que le dock — cf. css/themes/light-base.css) */
  html[data-theme-scheme="light"] .channels {
    background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(248,246,250,.86)) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
  }
  html[data-theme-scheme="light"] .channels .ch-item.active { background: rgba(0,0,0,.07) !important; }
  html[data-theme-scheme="light"] .channels .ch-item:active   { background: rgba(0,0,0,.05); }
  .mobile-channels-btn { display: flex; }

  .chat {
    flex: 1 !important; min-width: 0 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
  }
  .messages {
    flex: 1 !important; overflow-y: auto !important;
    min-height: 0 !important;
    padding-bottom: 90px !important;
  }
  .input-wrap {
    position: fixed !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important; right: 0 !important;
    z-index: 100 !important;
  }
  /* ── Sidebar membres (+ sessions Pomodoro) : tiroir depuis la DROITE ──
     Elle n'était pas affichée du tout sur mobile, alors qu'aucune autre entrée
     n'y menait. Elle devient un panneau glissant, ouvert soit par le bouton de
     la topbar, soit par un balayage depuis le bord droit de l'écran (geste
     câblé dans index.html). La largeur est forcée ici : .collapsed (l'état
     replié du bureau) met width:0 et neutraliserait le tiroir. */
  .members-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; right: 0 !important; left: auto !important;
    width: min(288px, 86vw) !important;
    min-width: 0 !important;
    height: 100dvh !important;
    z-index: 850 !important;
    background: var(--bg2, #111111) !important;
    border-left: 1px solid var(--border, rgba(255,255,255,.055)) !important;
    box-shadow: -4px 0 20px rgba(0,0,0,.4);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    padding-bottom: 72px !important;
  }
  .members-sidebar.mobile-open { transform: translateX(0) !important; }
  /* Bouton de la topbar : conservé sur mobile, c'est le seul repère visible
     vers le panneau (le balayage, lui, ne s'annonce pas). */
  .topbar-members-btn { display: flex !important; }
  .mobile-members-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 845;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .mobile-members-overlay.open { display: block; }
  /* Chat doit occuper tout l'espace vertical restant */
  .chat {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* ══ PAGES OUTILS (.page-body) ══ */
  .page-body {
    flex-direction: column !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 72px !important;
  }
  .center, .focus-zone {
    flex: none !important; overflow: visible !important;
    height: auto !important; min-height: 200px;
    width: 100% !important; min-width: 0 !important;
  }
  .habits-scroll, .tasks-area, .todos-wrap,
  .sport-scroll, .finance-scroll, .profil-scroll, .classement-scroll {
    overflow: visible !important; height: auto !important;
    flex: none !important; max-height: none !important;
  }
  .panel-right {
    width: 100% !important; min-width: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--border, rgba(255,255,255,.055)) !important;
    height: auto !important; overflow: visible !important;
    max-height: none !important; flex: none !important;
    padding: 16px !important;
  }

  /* ── Médias ── */
  .attach-img, .attach-gif, .attach-video { max-width: 100% !important; width: 100%; }

  /* ── Poll + voters modal : plein écran sur mobile ── */
  .poll-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh !important;
  }
  .poll-modal-overlay { align-items: flex-end !important; }
  .voters-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 78dvh !important;
  }

  /* ── Poll dans le feed : full width ── */
  .poll-card { max-width: 100% !important; }

  /* ── Topbar ──
     (le bouton membres reste visible : il ouvre le tiroir de droite, voir plus haut) */
  .member-pill { display: none !important; }

  /* ── Modaux ── */
  .modal, .modal-box {
    width: calc(100vw - 32px) !important; max-width: none !important;
    margin: auto 16px !important; border-radius: 16px !important;
  }

  /* ── Stats ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-row  { flex-wrap: wrap !important; }

  /* ── Action bars ── */
  .action-bar { padding: 10px 16px !important; flex-wrap: wrap; gap: 8px !important; }

  /* ── Padding sections ── */
  .habits-scroll { padding: 0 16px 16px !important; }
  .tasks-area    { padding: 12px 16px !important; }
  /* .view-tabs padding handled in cenacle section */
  .topbar-name   { font-size: 13px !important; }

  /* ── Toast : centré sans sidebar ── */
  .toast {
    left: 50% !important;
    transform: translateX(-50%) translateY(12px) !important;
  }
  .toast.show {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* ── Tables ── */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Boutons touch-friendly ── */
  .btn-add { min-height: 40px !important; }

  /* ── Canvas ── */
  .canvas-wrap, .canvas-container, #canvas-container, #formations-canvas {
    touch-action: pan-x pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ══ CÉNACLES ══ */
  /* Cache le panel droit stats (redondant) */
  .panel-right { display: none !important; }

  /* Toolbar : 1 seule ligne scrollable = tabs + boutons côte à côte */
  .toolbar {
    overflow-x: auto !important;
    overflow-y: visible !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.055)) !important;
  }
  .toolbar::-webkit-scrollbar { display: none; }

  /* Tabs : pilules individuelles */
  .view-tabs {
    display: flex !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  .vtab {
    flex-shrink: 0 !important;
    font-size: 11.5px !important;
    padding: 6px 13px !important;
    border-radius: 8px !important;
    background: var(--bg3, #171717) !important;
    border: 1px solid var(--border, rgba(255,255,255,.055)) !important;
    color: var(--text3, #444444) !important;
  }
  .vtab.active {
    background: var(--bg5, #252525) !important;
    color: var(--text, #f0f0eb) !important;
    border-color: var(--border2, rgba(255,255,255,.095)) !important;
  }

  /* Boutons Inviter/Gérer séparés par une barre verticale */
  .toolbar-right {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 6px !important;
    margin-left: 4px !important;
    padding-left: 10px !important;
    border-left: 1px solid var(--border, rgba(255,255,255,.055)) !important;
  }
  .btn-ghost {
    font-size: 11.5px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    min-height: 34px !important;
  }
  .btn-create {
    font-size: 11.5px !important;
    padding: 7px 14px !important;
    white-space: nowrap !important;
    min-height: 34px !important;
  }

  /* Hero */
  .my-cenacle-hero { border-radius: 12px !important; min-height: auto !important; }
  .hero-content { padding: 14px 14px 10px !important; gap: 12px !important; }
  .hero-emblem { width: 50px !important; height: 50px !important; font-size: 22px !important; border-radius: 12px !important; }
  .hero-name { font-size: 16px !important; margin-bottom: 4px !important; }
  .hero-desc { font-size: 11.5px !important; margin-bottom: 8px !important; }
  .hero-actions {
    position: relative !important;
    bottom: auto !important; right: auto !important;
    padding: 4px 14px 14px !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .hero-btn { font-size: 12px !important; padding: 8px 16px !important; }

  /* Stats membres : 2 colonnes */
  .group-stats-bar { grid-template-columns: repeat(2, 1fr) !important; }

  /* Scroll area : flex pour que messages-layout puisse remplir la hauteur */
  .scroll-area {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Onglet Messages du cénacle ── */
  .messages-layout {
    flex: 1 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    height: auto !important;
  }
  /* Sidebar salons : masquée par défaut, slide-in au clic */
  .channels-sidebar {
    display: none !important;
  }
  .channels-sidebar.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: min(220px, 82vw) !important;
    height: 100dvh !important;
    z-index: 850 !important;
    background: var(--bg2, #111111) !important;
    border-right: 1px solid var(--border, rgba(255,255,255,.055)) !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 16px 8px !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.4) !important;
  }
  .messages-main {
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }
  .messages-list {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 80px !important;
  }
  /* Input fixé au-dessus de la bottom nav */
  .msg-input-row {
    position: fixed !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important; right: 0 !important;
    z-index: 100 !important;
    background: var(--bg, #0a0a0a) !important;
    border-top: 1px solid var(--border, rgba(255,255,255,.055)) !important;
  }

  /* ── Onglet Explorer / Objectifs / Journal ── */
  .discover-grid { grid-template-columns: 1fr !important; }
  .obj-grid { grid-template-columns: 1fr !important; }
  .je-sections { grid-template-columns: 1fr !important; }
  .filter-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  .filter-chip { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* ══ BATAILLE ══ */
  .arena-content { padding: 14px 14px !important; }
  .vs-layout { gap: 6px !important; }
  .fighter-card { padding: 10px 11px !important; border-radius: 11px !important; }
  .fighter-top { gap: 8px !important; margin-bottom: 8px !important; }
  .fighter-av { width: 36px !important; height: 36px !important; font-size: 13px !important; }
  .fighter-name { font-size: 12px !important; }
  .fighter-score { font-size: 22px !important; }
  .fighter-score-unit { font-size: 9.5px !important; margin-bottom: 6px !important; }
  .vs-text { font-size: 18px !important; }
  .battle-feed { margin-top: 12px !important; }
  .feed-item { font-size: 11px !important; padding: 6px 8px !important; }
  .battle-arena { border-radius: 14px !important; }

  /* ── Pomodoro ── */
  .focus-zone { align-items: center; }

  /* ── Profil page ── */
  .page-body.profil-body { padding-bottom: 72px !important; }

  /* Titres TCG : 4 colonnes sur mobile */
  .tcg-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .tcg-card { padding: 10px 6px 8px !important; min-height: 110px !important; }
  .tcg-icon { font-size: 24px !important; margin-bottom: 5px !important; }
  .tcg-name { font-size: 9px !important; }
  .tcg-type { font-size: 7px !important; }
  .tcg-rarity-badge { font-size: 6.5px !important; padding: 1px 4px !important; }

  /* Élan card stats : 4 colonnes compactes sur mobile */
  .elan-stats-row {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    justify-content: stretch !important;
  }
  .elan-stat { padding: 10px 6px !important; }
  .elan-stat-val { font-size: 16px !important; }
  .elan-stat-lbl { font-size: 8px !important; }

  /* ══ CLASSEMENT ══ */

  /* Topbar : masquer le compteur membres */
  #member-count { display: none !important; }

  /* Period tabs : scrollable, padding réduit */
  .period-bar {
    padding: 12px 12px 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
  }
  .period-bar::-webkit-scrollbar { display: none; }
  .period-tab {
    flex-shrink: 0 !important;
    padding: 6px 14px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  /* Podium section : marges réduites — le cadre (.podium-frame) gère sa propre
     largeur/hauteur, on ne touche plus au padding ici (ça décalerait les avatars
     superposés à l'image, qui sont positionnés en % par rapport au cadre) */
  .podium-section {
    margin: 12px 12px 0 !important;
  }
  .podium-frame { border-radius: 14px 14px 0 0 !important; }
  .podium-separator { margin: 0 12px !important; }
  .ranking-section  { padding: 0 12px 40px !important; }
  .cenacle-section  { padding: 0 12px 48px !important; }

  /* Podium — nom légèrement réduit sur mobile (l'avatar s'adapte déjà tout
     seul via les % + plafonds px définis dans classement.html) */
  .podium-name  { font-size: 11px !important; max-width: 80px !important; }
  .crown { font-size: 17px !important; top: -17px !important; }

  /* Tableau classement : masquer tendance + rang (trop large) */
  .rh-trend, .row-trend { display: none !important; }
  .rh-rank,  .row-rank  { display: none !important; }
  .ranking-header { padding: 8px 10px !important; }
  .rank-row  { padding: 8px 10px !important; }
  .rh-pos, .row-pos { width: 30px !important; font-size: 12px !important; }
  .row-av   { width: 32px !important; height: 32px !important; font-size: 12px !important; }
  .rh-score, .row-score { width: 72px !important; }
  .row-score { font-size: 12px !important; font-weight: 700 !important; }
  .row-name { font-size: 12px !important; }
  .row-sub  { font-size: 9px !important; }

  /* Classement cénacles */
  .cenacle-elan { width: 80px !important; font-size: 12px !important; }
  .cenacle-members { display: none !important; }

  /* ══ CANVAS (canvas.html) ══
     Déplacé dans canvas.html (bloc <style> placé APRÈS ce fichier).
     Raison : la page dépendait de cette feuille pour des règles vitales
     (position des compteurs, mini-carte masquée, bouton +). Servie depuis
     un cache périmée, elle laissait l'écran mobile cassé alors que le HTML
     était à jour. Un seul propriétaire par page, et il est dans la page. */


  /* ══ DM PAGE ══ */
  body.dm-page {
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  .mobile-dm-topbar { display: flex; }
  .mobile-dm-back   { display: flex; }

  body.dm-page .sidebar { display: none !important; }

  body.dm-page .dm-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 0 !important;
  }

  /* Panel conversations : slide-in depuis la gauche */
  body.dm-page .dm-list {
    position: fixed !important;
    top: 52px !important; left: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 52px - 64px) !important;
    height: calc(100dvh - 52px - 64px - env(safe-area-inset-bottom, 0px)) !important;
    z-index: 800 !important;
    background: var(--bg2, #111111) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    border-right: none !important;
    flex-shrink: 0 !important;
  }
  body.dm-page .dm-list.mobile-open {
    transform: translateX(0) !important;
  }

  /* Zone chat : plein écran */
  body.dm-page .dm-chat {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.dm-page #dm-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
    padding-bottom: 160px !important;
  }

  /* Input fixé au-dessus de la bottom nav */
  body.dm-page .dm-input-wrap {
    position: fixed !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important; right: 0 !important;
    z-index: 100 !important;
    background: var(--bg2, #111111) !important;
    border-top: 1px solid var(--border, rgba(255,255,255,.055)) !important;
  }

  /* Tête du chat (avec le bouton retour) */
  body.dm-page #dm-chat-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.055)) !important;
    flex-shrink: 0 !important;
  }

  /* ══ POMODORO ══ */

  /* Tabs : wrapper aligné à gauche (le centrage clippe la 1re tab quand ça déborde) */
  body.pomo-page .page-body > div > div:first-child {
    padding: 8px 0 0 !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  /* Tabs : scrollables horizontalement, sans clipping des extrémités */
  body.pomo-page .mode-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    padding: 4px 12px !important;
    scroll-padding: 12px !important;
  }
  body.pomo-page .mode-tabs::-webkit-scrollbar { display: none; }
  body.pomo-page .mode-tab {
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 11.5px !important;
  }
  body.pomo-page .mode-tab-ico { width: 14px !important; height: 14px !important; }

  /* Topbar pomo : jamais de débordement (logo + Élan + bouton Config) */
  body.pomo-page .topbar-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.pomo-page .topbar-right {
    flex-shrink: 0 !important;
    gap: 7px !important;
    min-width: 0 !important;
  }
  body.pomo-page .pomo-config-btn { flex-shrink: 0 !important; }

  /* Fond ambiant (courbes) + cendres dorées : couvrir TOUT l'espace du Pomodoro.
     Le masque de fondu des bords (utile pour le seam avec le panneau de droite en
     desktop) laissait une zone noire en bas sur mobile — ici le panneau est un
     bottom-sheet, donc aucun seam à masquer : on retire le masque et on force le
     canvas à remplir toute la focus-zone. */
  body.pomo-page .ambient-bg {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    inset: 0 !important;
  }
  body.pomo-page .ambient-canvas,
  body.pomo-page #forge-embers {
    width: 100% !important;
    height: 100% !important;
    inset: 0 !important;
  }

  /* Timer plus petit */
  .timer-wrap {
    width: min(230px, 64vw) !important;
    height: min(230px, 64vw) !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
  }
  .timer-wrap.break-mode .timer-display { font-size: 46px !important; letter-spacing: -3px !important; }
  .timer-display { font-size: 42px !important; }
  /* Chrono grand et centré même en session (cristal retiré du centre) */
  .timer-wrap.running:not(.break-mode) .timer-display { font-size: 42px !important; letter-spacing: -3px !important; }

  /* Vue principale : timer centré + info en bas (via margin auto) */
  #view-pomodoro {
    justify-content: flex-start !important;
    padding: 0 12px 12px !important;
    overflow-y: auto !important;
    gap: 0 !important;
  }
  /* Série → auto margin pour "pousser" le bloc timer vers le centre */
  .streak-badge {
    margin-top: auto !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }
  .timer-controls { margin-bottom: 0 !important; flex-shrink: 0 !important; }

  /* Session tags → auto margin pour "pousser" l'info en bas */
  .session-tags {
    margin-top: auto !important;
    padding-top: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 5px !important;
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
  }
  .session-tag { font-size: 10px !important; padding: 3px 8px !important; }
  .btn-focus { flex-shrink: 0 !important; margin-bottom: 2px !important; font-size: 11.5px !important; }

  /* Focus mode : cacher la bottom nav */
  body.focus-mode .mobile-nav { display: none !important; }
  /* Bouton quitter : dans le flux (pas fixed), centré, entre controls et session info */
  body.focus-mode .btn-focus-exit {
    position: static !important;
    display: flex !important;
    align-self: center !important;
    margin: 14px auto 0 !important;
    width: fit-content !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* Panel config → bottom sheet (transform contrôlé par JS) */
  #panel-right {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: 100% !important;
    max-height: 72dvh !important;
    min-width: unset !important;
    border-left: none !important;
    border-top: 1px solid var(--border, rgba(255,255,255,.055)) !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 850 !important;
    overflow-y: auto !important;
  }
  .pomo-panel-handle {
    width: 36px; height: 4px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .pomo-config-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(108,99,255,.1);
    border: 1px solid rgba(108,99,255,.25);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11px;
    font-weight: 600;
    color: var(--violet2, #9d97ff);
    cursor: pointer;
    font-family: 'Geist', sans-serif;
    white-space: nowrap;
  }

  /* Vue Statistiques */
  #view-stats-inline {
    padding: 14px 12px 80px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  /* Wrapper intérieur : ne dépasse pas le viewport */
  #pomo-stats-inner {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* KPI grid : force 2 colonnes */
  .stats-kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .stats-kpi { min-width: 0 !important; box-sizing: border-box !important; }
  /* Header titre + period-tabs : colonne sur mobile */
  #pomo-stats-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  /* Period tabs : scrollable */
  .stats-period-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .stats-period-tabs::-webkit-scrollbar { display: none; }
  .stats-period-tab { flex-shrink: 0 !important; }
  /* Grilles */
  .stats-charts-grid { grid-template-columns: 1fr !important; }
  .stats-records   { grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; width: 100% !important; }
  .stats-record    { padding: 10px 6px !important; min-width: 0 !important; box-sizing: border-box !important; }
  .stats-record-icon { font-size: 18px !important; }
  .stats-record-val  { font-size: 15px !important; }
  .stats-record-lbl  { font-size: 9px !important; }
  /* Catégorie stats dans Focus Todo stats */
  .cat-stats-grid  { grid-template-columns: 1fr !important; }

  /* Vue Focus Todo */
  #view-todo-focus {
    padding: 14px 16px 80px !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  #view-todo-focus > div {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Tâches dans la liste focus */
  #ftodo-list > * {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* ══ TODO ══ */
  .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  /* Chaque rangée défile INDÉPENDAMMENT.
     La règle générique `.toolbar { overflow-x:auto }` (plus haut dans ce même
     media query) n'était pas annulée ici : la barre entière était donc un seul
     rail horizontal, et faire glisser les onglets emportait les catégories et
     les boutons avec eux. On coupe le défilement de la barre et on le rend à
     chaque rangée ; `overscroll-behavior-x:contain` empêche le geste de
     « déborder » sur le parent une fois la rangée arrivée en bout.
     Scopé à la page To-Do : les autres pages gardent la barre d'un seul tenant. */
  html[data-page="todo.html"] .toolbar {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  html[data-page="todo.html"] .toolbar-row,
  html[data-page="todo.html"] .view-tabs,
  html[data-page="todo.html"] .filter-group,
  html[data-page="todo.html"] .mob-todo-actions {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  html[data-page="todo.html"] .toolbar-row::-webkit-scrollbar,
  html[data-page="todo.html"] .view-tabs::-webkit-scrollbar,
  html[data-page="todo.html"] .filter-group::-webkit-scrollbar,
  html[data-page="todo.html"] .mob-todo-actions::-webkit-scrollbar { display: none; }

  .view-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .view-tabs::-webkit-scrollbar { display: none; }
  #btn-hide-done,
  #btn-order,
  #btn-eis { display: none !important; }
  .filter-group {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .filter-group::-webkit-scrollbar { display: none; }
  .toolbar-right {
    display: none !important;
  }
  .btn-add-task {
    display: none !important;
  }
  .tasks-area { padding: 10px 12px 100px !important; }
  .task-actions {
    display: none !important;
  }
  /* FAB + more btn visible on mobile */
  .todo-fab { display: flex !important; }
  .task-more-btn { display: flex !important; }
  /* Hide desktop-only task elements */
  .task-order,
  .task-check,
  .task-elan { display: none !important; }
  .task-desc { display: none !important; }
  .badge-urgent,
  .badge-important,
  .badge-normal,
  .badge-optional { display: none !important; }
  .task-main {
    padding: 13px 10px 13px 14px !important;
    gap: 8px !important;
  }
  .eis-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }
  #elan-popup-container { right: 12px !important; }
  .field-row { grid-template-columns: 1fr !important; }

  /* ══ SPORT ══ */

  /* Toolbar : scrollable horizontal (5 tabs + bouton) */
  body.sport-page .toolbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    align-items: center !important;
  }
  body.sport-page .toolbar::-webkit-scrollbar { display: none; }
  body.sport-page .view-tab {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
  }
  body.sport-page .toolbar-right {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
  body.sport-page .btn-new-session {
    font-size: 11px !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
  }

  /* Scroll area sport : block, pas flex */
  body.sport-page .scroll-area {
    padding: 14px 12px 80px !important;
    overflow-y: visible !important;
    display: block !important;
  }

  /* Grille exercices : 2 colonnes sur mobile */
  .exo-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .exo-card { padding: 10px 9px !important; }
  .exo-emoji { font-size: 20px !important; margin-bottom: 6px !important; }

  /* Grille Records personnels (Progression) */
  .prog-pr-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Grille KPI Stats : 2 colonnes */
  .sport-stats-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Exercice selector (Progression) : scrollable horizontalement */
  .graph-exo-selector {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .graph-exo-selector::-webkit-scrollbar { display: none; }
  .graph-exo-btn { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* Planning : liste verticale */
  .week-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 4px !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
  }

  /* Streak banner : compact */
  body.sport-page .streak-banner {
    padding: 12px 14px !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  body.sport-page .streak-num { font-size: 28px !important; }

  /* Session card : header qui wrap si besoin */
  body.sport-page .session-header { gap: 8px !important; flex-wrap: wrap !important; }
  body.sport-page .session-date-badge { font-size: 10px !important; padding: 4px 8px !important; }
  body.sport-page .session-title { font-size: 12px !important; }
  body.sport-page .session-meta { font-size: 9.5px !important; }
  body.sport-page .session-elan { font-size: 10.5px !important; padding: 3px 8px !important; }

  /* Barre séance active */
  body.sport-page .active-session-bar {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  body.sport-page .asb-btn { font-size: 10.5px !important; padding: 5px 10px !important; }

  /* ── Journal : streak compact + boutons d'action ── */
  body.sport-page .streak-banner {
    margin-bottom: 10px !important;
    padding: 14px 12px !important;
    gap: 8px !important;
  }
  body.sport-page .streak-num { font-size: 26px !important; }
  body.sport-page .mob-action-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }

  /* ── Progression : 4 PR cards par ligne ── */
  body.sport-page .prog-pr-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  body.sport-page .prog-pr-grid > div {
    padding: 8px 6px !important;
  }
  body.sport-page .prog-pr-grid > div > div:first-child {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }
  body.sport-page .prog-pr-grid > div > div:nth-child(2) {
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.sport-page .prog-pr-grid > div > div:nth-child(3) {
    display: none !important;
  }
  body.sport-page .prog-pr-grid > div > div:last-child {
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  body.sport-page .prog-pr-grid > div > div:last-child > div > div:nth-child(1) {
    font-size: 7px !important;
    letter-spacing: 0 !important;
  }
  body.sport-page .prog-pr-grid > div > div:last-child > div > div:nth-child(2) {
    font-size: 13px !important;
    line-height: 1.1 !important;
  }
  body.sport-page .prog-pr-grid > div > div:last-child > div > div:nth-child(3) {
    display: none !important;
  }

  /* ── Planning : chaque jour = ligne horizontale ── */
  body.sport-page .day-col {
    flex-direction: row !important;
    align-items: center !important;
    min-height: auto !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    gap: 8px !important;
  }
  body.sport-page .day-label {
    min-width: 34px !important;
    width: 34px !important;
    font-size: 10px !important;
    letter-spacing: 0.3px !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  body.sport-page .day-col .day-plan-badge {
    flex: 1 !important;
    font-size: 10.5px !important;
    padding: 5px 8px !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: var(--sdim) !important;
    color: var(--sport2) !important;
    border-color: rgba(108,99,255,.25) !important;
    height: auto !important;
    border-radius: 7px !important;
  }
  body.sport-page .day-col .btn-plan-start {
    flex-shrink: 0 !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
    width: auto !important;
    margin-bottom: 0 !important;
  }
  body.sport-page .day-col .day-rest {
    flex: 1 !important;
    text-align: left !important;
    font-size: 11px !important;
    margin: 0 !important;
  }
  body.sport-page .day-col .day-add-btn {
    margin: 0 !important;
    margin-left: auto !important;
    font-size: 18px !important;
    opacity: 0.5 !important;
  }
  body.sport-page .notif-time-wrap {
    display: none !important;
  }

  /* ── Biographe (ex-« Corps ») ──────────────────────────────────────────
     Les règles mobiles de cette vue vivent DANS sport.html, avec le reste du
     responsive de la page (§20/§27/§31/§33/§35) : servie depuis un cache
     périmé, cette feuille partagée laisserait l'écran cassé alors que le HTML
     est à jour. Les anciennes règles `.body-viz-v2` / `.body-img-png` /
     `.muscle-info-card` ont été retirées avec le markup qu'elles visaient. */

  /* ── Stats : équilibre + volume en colonne ── */
  body.sport-page .stats-bal-vol {
    grid-template-columns: 1fr !important;
  }

  /* ══ BIBLIO ══ */

  /* Layout global : page-body en colonne */
  body.biblio-page .page-body {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Cacher le panel droit (stats Élan) */
  body.biblio-page .right-panel {
    display: none !important;
  }

  /* ─── Étagères → strip horizontal scrollable ─── */
  body.biblio-page .shelves-panel {
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.055)) !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    height: auto !important;
  }
  body.biblio-page .sp-header {
    display: none !important;
  }
  body.biblio-page .shelves-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    flex: 1 !important;
    align-items: center !important;
  }
  body.biblio-page .shelves-list::-webkit-scrollbar { display: none; }
  body.biblio-page .shelf-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    background: var(--bg3, #171717) !important;
    border: 1px solid var(--border, rgba(255,255,255,.055)) !important;
  }
  body.biblio-page .shelf-item.active {
    background: var(--vdim, rgba(108,99,255,.13)) !important;
    border-color: var(--violet, #6c63ff) !important;
    color: var(--violet2, #9d97ff) !important;
  }
  body.biblio-page .shelf-item::before { display: none !important; }
  body.biblio-page .shelf-sep { display: none !important; }
  /* Bouton "+" nouvelle étagère : pill à la fin */
  body.biblio-page .shelves-panel::after {
    content: '+';
    flex-shrink: 0;
    margin-right: 12px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--vdim, rgba(108,99,255,.13));
    border: 1px solid rgba(108,99,255,.3);
    color: var(--violet2, #9d97ff);
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  /* ─── Books panel : full width ─── */
  body.biblio-page .books-panel {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* ─── Toolbar livres : 2 lignes ─── */
  body.biblio-page .books-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    align-items: center !important;
  }
  /* Ligne 1 : search (flex:1) + btn-upload */
  body.biblio-page .bt-search {
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 1 !important;
  }
  body.biblio-page .btn-upload {
    order: 2 !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 7px 12px !important;
  }
  /* Ligne 2 : filter-tabs pleine largeur */
  body.biblio-page .filter-tabs {
    order: 3 !important;
    width: 100% !important;
    flex: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    gap: 4px !important;
  }
  body.biblio-page .filter-tabs::-webkit-scrollbar { display: none; }
  body.biblio-page .ftab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 5px 11px !important;
    font-size: 10.5px !important;
    border-radius: 20px !important;
    background: var(--bg3, #171717) !important;
    border: 1px solid var(--border, rgba(255,255,255,.055)) !important;
  }
  body.biblio-page .ftab.active {
    background: var(--vdim, rgba(108,99,255,.13)) !important;
    border-color: var(--violet, #6c63ff) !important;
    color: var(--violet2, #9d97ff) !important;
  }
  /* Cacher view-toggle et btn-new-folder */
  body.biblio-page .view-toggle,
  body.biblio-page .btn-new-folder {
    display: none !important;
  }

  /* ─── Grille livres : 2 colonnes ─── */
  body.biblio-page .books-scroll {
    overflow-y: visible !important;
    padding: 12px 10px 80px !important;
  }
  body.biblio-page .books-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  body.biblio-page .book-card {
    padding: 12px 10px !important;
  }
  body.biblio-page .book-cover {
    width: 100% !important;
    height: 90px !important;
    margin-bottom: 8px !important;
    /* La carte est en padding sur mobile : la couverture est détachée des bords,
       elle porte donc un rayon plein et non le rayon haut de la vue bureau. */
    border-radius: 10px !important;
  }
  /* Sans survol possible, ni le dock ni la barre d'actions de ligne ne sont
     atteignables au doigt : les deux cèdent la place au bouton « ⋮ », qui
     ouvre la feuille d'actions (cibles de 52px, actions libellées). */
  body.biblio-page .book-actions-dock,
  body.biblio-page .book-row-actions {
    display: none !important;
  }
  body.biblio-page .book-more {
    display: flex !important;
  }
  body.biblio-page .book-title {
    font-size: 11px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  body.biblio-page .book-meta {
    font-size: 9.5px !important;
  }
  /* Masquer section titre de liste (header "X documents") */
  body.biblio-page .shelf-section-header {
    font-size: 10.5px !important;
    padding: 0 0 6px !important;
  }

  /* ─── Reader overlay mobile ─── */
  body.biblio-page .reader-notes {
    display: none !important;
  }
  body.biblio-page .reader-header {
    padding: 0 12px !important;
    gap: 8px !important;
    height: 50px !important;
  }
  body.biblio-page .reader-back span { display: none !important; }
  body.biblio-page .reader-title {
    font-size: 12px !important;
  }
  body.biblio-page .reader-prog-wrap {
    gap: 6px !important;
  }
  body.biblio-page .reader-prog-track {
    width: 70px !important;
  }
  body.biblio-page .reader-elan-badge {
    font-size: 10.5px !important;
    padding: 4px 8px !important;
  }
  body.biblio-page .reader-toolbar {
    gap: 3px !important;
  }
  body.biblio-page .reader-tool {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  body.biblio-page .reader-doc {
    padding: 20px 14px !important;
  }
  body.biblio-page .doc-page {
    padding: 24px 18px !important;
  }
  body.biblio-page .pdf-canvas-wrap {
    padding: 8px !important;
  }
  body.biblio-page .pdf-arrow {
    width: 28px !important;
    font-size: 32px !important;
  }

  /* ── PDF scroll mode ── */
  body.biblio-page .pdf-all-scroll {
    -webkit-overflow-scrolling: touch !important;
  }
  body.biblio-page #pdf-pages-container {
    padding: 8px !important;
    gap: 8px !important;
  }
  body.biblio-page #pdf-pages-container > div {
    width: calc(100vw - 16px) !important;
    max-width: 700px !important;
  }
  body.biblio-page #pdf-pages-container .pdf-page-container,
  body.biblio-page #pdf-pages-container canvas {
    width: 100% !important;
    height: auto !important;
  }

  /* ── Bouton surlignage mobile ── */
  body.biblio-page .mob-hl-toggle {
    display: flex !important;
  }

  /* ── DOCX reader sur mobile ── */
  body.biblio-page .docx-topbar {
    gap: 8px !important;
    padding: 0 12px !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 42px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  body.biblio-page .docx-title-label {
    font-size: 11px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  body.biblio-page .docx-resume-btn {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
  body.biblio-page .docx-dl-btn {
    font-size: 10px !important;
    padding: 4px 9px !important;
  }
  body.biblio-page .docx-scroll {
    padding: 20px 16px !important;
  }
  body.biblio-page .docx-body {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
  body.biblio-page #docx-end-zone {
    padding: 20px 0 40px !important;
  }
  body.biblio-page .docx-complete-btn {
    padding: 12px 24px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
  body.biblio-page #pdf-end-zone {
    padding: 20px 0 50px !important;
  }

  /* ══ FINANCE ══ */

  /* Topbar : cacher le badge "données privées" */
  body.finance-page .private-badge {
    display: none !important;
  }

  /* Onglets : scrollable horizontal */
  body.finance-page .page-tabs {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 0 8px !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.finance-page .page-tabs::-webkit-scrollbar { display: none; }
  body.finance-page .page-tab {
    flex-shrink: 0 !important;
    font-size: 11.5px !important;
    padding: 11px 14px !important;
    white-space: nowrap !important;
  }

  /* Contenu : padding mobile + bottom nav */
  body.finance-page .page-content {
    padding: 14px 12px 80px !important;
  }

  /* ─── Hero card Patrimoine ─── */
  body.finance-page .hero-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px 18px !important;
    margin-bottom: 14px !important;
  }
  body.finance-page .hero-left {
    width: 100% !important;
  }
  body.finance-page .hero-amount {
    font-size: 36px !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 4px !important;
  }
  body.finance-page .hero-label {
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }
  body.finance-page .hero-split {
    gap: 14px !important;
  }
  body.finance-page .hsi-val {
    font-size: 15px !important;
  }
  body.finance-page .hsi-lbl {
    font-size: 9px !important;
  }
  /* Donut centré en dessous */
  body.finance-page .hero-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  body.finance-page .donut-wrap {
    width: 120px !important;
    height: 120px !important;
  }
  body.finance-page .donut-wrap canvas {
    width: 120px !important;
    height: 120px !important;
  }
  body.finance-page .donut-center-val {
    font-size: 13px !important;
  }

  /* ─── Graphique évolution ─── */
  body.finance-page .chart-card {
    padding: 16px 14px !important;
    margin-bottom: 14px !important;
  }
  body.finance-page .chart-card-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  body.finance-page .cch-title {
    font-size: 13px !important;
  }
  body.finance-page .cch-amount {
    font-size: 22px !important;
    letter-spacing: -0.5px !important;
  }
  body.finance-page .cch-delta {
    font-size: 11px !important;
  }
  body.finance-page .period-tabs {
    gap: 4px !important;
  }
  body.finance-page .ptab {
    padding: 5px 10px !important;
    font-size: 10.5px !important;
  }
  body.finance-page .chart-canvas-wrap {
    height: 160px !important;
  }

  /* ─── Grille comptes : 2 colonnes ─── */
  body.finance-page .grid-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  body.finance-page .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.finance-page .account-card {
    padding: 13px 12px !important;
  }
  body.finance-page .acc-amount {
    font-size: 18px !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 2px !important;
  }
  body.finance-page .acc-name {
    font-size: 11.5px !important;
  }
  body.finance-page .acc-add-card {
    min-height: 100px !important;
  }

  /* ─── Section headers ─── */
  body.finance-page .sec-hdr {
    margin-bottom: 10px !important;
  }

  /* ─── Stratégie (Répartition) ─── */
  body.finance-page .repartition-card {
    padding: 16px 14px !important;
  }
  body.finance-page .rep-total-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  body.finance-page .rep-income-input {
    width: 120px !important;
    font-size: 16px !important;
  }
  body.finance-page .rep-rule {
    gap: 6px !important;
  }
  body.finance-page .rep-pct-input {
    width: 52px !important;
  }
  body.finance-page .rep-amount-result {
    font-size: 11.5px !important;
    min-width: 52px !important;
  }

  /* ─── Projection (Simulation) ─── */
  body.finance-page .sim-card {
    padding: 16px 14px !important;
  }
  body.finance-page .sim-controls {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  body.finance-page .sim-results {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  body.finance-page .sim-res-val {
    font-size: 14px !important;
  }
  body.finance-page .sim-res-lbl {
    font-size: 8.5px !important;
  }
  body.finance-page .sim-chart-wrap {
    height: 120px !important;
  }

  /* ─── Mouvements (Transactions) ─── */
  body.finance-page .tx-card {
    padding: 14px 12px !important;
  }
  body.finance-page .tx-name {
    font-size: 12px !important;
  }
  body.finance-page .tx-amount {
    font-size: 13px !important;
  }

  /* ══ MIROIR ══
     La page miroir.html a été fusionnée dans canvas.html (mode « Idées »).
     Ses règles mobiles vivent désormais DANS canvas.html, avec le reste du
     canvas — un seul propriétaire par page (§20). Rien à remettre ici. */

  /* ══════════════════════════════════════════════════════════════════
     RESSOURCES — mobile
     Principe : le HAUT DE PAGE COÛTE CHER. Sur 360×780, chaque rangée
     d'outils mangée en haut est une carte de moins à l'écran. On tient
     donc tout le pilotage en DEUX rangées compactes (recherche+partager,
     puis un rail unique type+catégorie), et le tri part dans un menu.
     ══════════════════════════════════════════════════════════════════ */

  /* Layout global */
  body.ressources-page .page-body {
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body.ressources-page .cats-panel { display: none !important; }
  body.ressources-page .feed-wrap {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* ── RANGÉE 1 : recherche + partager, sur la MÊME ligne ── */
  body.ressources-page .search-bar {
    padding: 8px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    border-bottom: none !important;
  }
  body.ressources-page .search-input-wrap { min-width: 0 !important; flex: 1 !important; }
  body.ressources-page .search-input {
    padding: 8px 10px 8px 30px !important;
    font-size: 12.5px !important;
  }
  /* Les filtres de type quittent la barre : ils rejoignent le rail unique
     ci-dessous, rendu par le JS dans .mob-cats-strip. */
  body.ressources-page .filters { display: none !important; }
  /* La bascule reste accessible : la masquer bloquerait quelqu'un dont la
     préférence enregistrée est « grille ». Réduite à deux pastilles. */
  body.ressources-page .view-toggle { flex-shrink: 0 !important; }
  body.ressources-page .vt-btn { padding: 5px 7px !important; }
  body.ressources-page .vt-btn .ico { width: 15px !important; height: 15px !important; }
  /* Bouton Partager réduit à son icône : le mot « Partager » coûtait une
     demi-largeur d'écran pour une action déjà évidente. */
  body.ressources-page .btn-share {
    padding: 0 !important;
    width: 38px !important; height: 38px !important;
    border-radius: 11px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;          /* masque le libellé, garde l'icône */
  }
  body.ressources-page .btn-share .ico { width: 18px !important; height: 18px !important; }

  /* ── RANGÉE 2 : un seul rail horizontal (types + catégories) ── */
  body.ressources-page .mob-cats-strip {
    display: flex !important;
    gap: 6px !important;
    padding: 0 12px 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    flex-shrink: 0 !important;
  }
  body.ressources-page .mob-cats-strip::-webkit-scrollbar { display: none; }
  body.ressources-page .mob-cat-chip {
    display: inline-flex !important;
    align-items: center !important;      /* aligne l'icône avec son libellé */
    gap: 5px !important;
    flex-shrink: 0 !important;
    padding: 6px 11px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    background: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    color: var(--text3) !important;
    white-space: nowrap !important;
    font-family: 'Geist', sans-serif !important;
  }
  body.ressources-page .mob-cat-chip.active {
    background: rgba(108,99,255,.14) !important;
    border-color: var(--violet, #6c63ff) !important;
    color: var(--violet2, #9d97ff) !important;
  }
  /* Les pastilles d'icône : centrées sur la ligne de texte, pas décalées. */
  body.ressources-page .mob-cat-chip .cat-chip-ico {
    width: 16px !important; height: 16px !important;
    border-radius: 5px !important;
    vertical-align: baseline !important;
  }
  body.ressources-page .mob-cat-chip .cat-chip-ico img { width: 10px !important; height: 10px !important; }
  body.ressources-page .mob-cat-chip .ico {
    width: 12px !important; height: 12px !important;
    vertical-align: baseline !important;
  }
  /* Séparateur entre le groupe « types » et le groupe « catégories ». */
  body.ressources-page .mob-strip-sep {
    flex-shrink: 0 !important;
    width: 1px !important;
    align-self: stretch !important;
    background: var(--border2) !important;
    margin: 2px 3px !important;
  }

  /* ── ZONE DE DÉFILEMENT ──
     LE CONTENU PASSE SOUS LA BARRE DE NAVIGATION.
     La nav mobile est une PILULE FLOTTANTE (56 px de haut, marges
     transparentes, `pointer-events:none`) : elle ne remplit pas la bande
     que toutes les pages réservent en `body{padding-bottom:64px+encoche}`.
     Sur une page de catalogue, cette bande n'est donc que du noir — une
     centaine de pixels de hauteur utile perdus à chaque écran.
     On rend la réserve à la page et on la reporte en padding INTERNE de la
     liste : le contenu occupe tout l'écran et glisse sous la pilule, tout
     en pouvant défiler assez loin pour que la dernière carte la dépasse. */
  body.ressources-page { padding-bottom: 0 !important; }
  body.ressources-page .scroll-area {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.ressources-page .feed {
    overflow-y: visible !important;
    padding: 0 12px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.ressources-page .shelves {
    padding: 0 0 calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.ressources-page .tagfilter-row { padding: 8px 12px 0 !important; margin-top: 0 !important; }

  /* ── TRI : plus de rangée collante ──
     Elle « surgissait » au défilement et laissait voir le contenu par
     transparence dans l'espace entre l'en-tête et la liste. Sur mobile
     le tri devient un bouton compact posé en haut de la zone, qui défile
     avec le reste : plus de surgissement, plus de trou. */
  body.ressources-page .sort-row {
    position: static !important;
    padding: 10px 12px 6px !important;
    gap: 5px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
  }
  body.ressources-page .sort-row::-webkit-scrollbar { display: none; }
  body.ressources-page .sort-tab {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 5px 11px !important;
  }

  /* ── TOP DU MOIS ──
     Pas d'accordéon (aucun survol au doigt) et surtout : le titre passe
     SOUS l'image. Superposé, il devenait illisible sur une miniature
     chargée et masquait le sujet de la vignette. */
  body.ressources-page .hero { margin: 10px 12px 2px !important; }
  body.ressources-page .hero-head { margin-bottom: 8px !important; }
  body.ressources-page .hero-sub  { display: none !important; }
  body.ressources-page .hero-strip {
    flex-direction: column !important;
    height: auto !important;
    gap: 10px !important;
  }
  body.ressources-page .hero-panel,
  body.ressources-page .hero-strip:hover .hero-panel,
  body.ressources-page .hero-strip .hero-panel:hover {
    flex: none !important;
    height: auto !important;
    box-shadow: none !important;
    background: var(--bg3) !important;
    border-radius: 13px !important;
    overflow: hidden !important;
  }
  /* L'image reprend sa place dans le flux : le corps se pose dessous. */
  body.ressources-page .hero-panel .cover-wrap {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }
  body.ressources-page .hero-panel .cover-wrap::after {
    background: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 45%) !important;
  }
  body.ressources-page .hero-body,
  body.ressources-page .hero-strip:hover .hero-panel .hero-body {
    position: relative !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    padding: 10px 12px 11px !important;
  }
  body.ressources-page .hero-title,
  body.ressources-page .hero-panel:nth-child(1) .hero-title,
  body.ressources-page .hero-strip:hover .hero-panel:nth-child(1) .hero-title,
  body.ressources-page .hero-strip .hero-panel:hover .hero-title {
    font-size: 13px !important;
    color: var(--text) !important;
    text-shadow: none !important;
    -webkit-line-clamp: 2 !important;
  }
  /* Sans survol, rien ne révélerait les chips : elles restent visibles. */
  body.ressources-page .hero-meta,
  body.ressources-page .hero-strip:hover .hero-panel .hero-meta,
  body.ressources-page .hero-strip .hero-panel:hover .hero-meta {
    opacity: 1 !important;
    transform: none !important;
    margin-top: 7px !important;
    gap: 5px !important;
  }
  /* Sur fond de carte (et non plus sur image), les chips reprennent le
     style neutre du reste de la page. */
  body.ressources-page .hero-chip {
    background: rgba(255,255,255,.06) !important;
    color: var(--text2) !important;
    backdrop-filter: none !important;
  }
  body.ressources-page .hero-rank { top: 9px !important; left: 9px !important; }

  /* ── ÉTAGÈRES ── */
  body.ressources-page .shelf { margin-bottom: 16px !important; }
  body.ressources-page .shelf-head { padding: 0 12px 7px !important; gap: 7px !important; }
  body.ressources-page .shelf-ico { width: 22px !important; height: 22px !important; }
  body.ressources-page .shelf-ico .ico { width: 12px !important; height: 12px !important; }
  body.ressources-page .shelf-title { font-size: 12.5px !important; }
  body.ressources-page .shelf-nav { display: none !important; }
  body.ressources-page .shelf-all { opacity: 1 !important; transform: none !important; }
  body.ressources-page .shelf-track {
    padding: 2px 12px 4px !important;
    gap: 8px !important;
    overscroll-behavior-x: contain !important;
  }
  body.ressources-page .sh-card { flex-basis: 164px !important; width: 164px !important; }
  body.ressources-page .sh-card.is-portrait { flex-basis: 118px !important; width: 118px !important; }
  body.ressources-page .sh-title { font-size: 11.5px !important; min-height: 30px !important; }

  /* ── GRILLE ── */
  body.ressources-page .feed-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding-top: 8px !important;
  }
  /* Les actions propriétaire sont toujours visibles (pas de survol au
     doigt), mais discrètes : elles ne doivent pas rivaliser avec le titre. */
  body.ressources-page .card-owner-actions { display: flex !important; padding-top: 7px !important; }

  /* ── MODAUX : plein écran, et surtout ACTIONS ATTEIGNABLES ──
     Le pied de page passait sous la barre de navigation : le bouton
     « Publier » était invisible et intouchable. Les modaux réservent donc
     la hauteur de la nav (+ l'encoche) en bas. */
  body.ressources-page .overlay { align-items: flex-end !important; }
  body.ressources-page #add-overlay .modal,
  body.ressources-page #report-overlay .modal,
  body.ressources-page #cat-overlay .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 20px 16px calc(22px + 64px + env(safe-area-inset-bottom)) !important;
    max-height: calc(92vh - env(safe-area-inset-bottom)) !important;
  }
  body.ressources-page .detail-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(94vh - env(safe-area-inset-bottom)) !important;
    border-radius: 18px 18px 0 0 !important;
  }
  /* Le pied du détail reste collé en bas, au-dessus de la nav. */
  body.ressources-page .detail-footer {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 14px calc(10px + 64px + env(safe-area-inset-bottom)) !important;
  }
  body.ressources-page .btn-action {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 9px 10px !important;
    font-size: 11.5px !important;
  }
  body.ressources-page .btn-report { margin-left: 0 !important; flex: 1 1 100% !important; justify-content: center !important; }
  body.ressources-page .detail-body { padding: 14px 16px !important; }
  body.ressources-page .detail-hero .cover-wrap { aspect-ratio: 16/9 !important; }
  body.ressources-page .detail-hero .detail-title-text { font-size: 16px !important; }
  body.ressources-page .detail-hero-body { padding: 0 16px 12px !important; }

  /* Bandeau de référencement : 5 cellules ne tiennent pas sur 360 px. */
  body.ressources-page .rank-strip { gap: 5px !important; }
  body.ressources-page .rk { min-width: 0 !important; flex: 1 1 30% !important; padding: 8px 9px !important; }
  body.ressources-page .rk-val { font-size: 13px !important; }

  /* Créateur : le bouton passe sous le nom plutôt que de le comprimer. */
  body.ressources-page .yt-creator { flex-wrap: wrap !important; }
  body.ressources-page .yt-sub { width: 100% !important; justify-content: center !important; }

  /* Sources : la rangée de vote passe à la ligne plutôt que de déborder. */
  body.ressources-page .src-foot  { gap: 6px !important; }
  body.ressources-page .src-admin { margin-left: 0 !important; width: 100% !important; }

  /* Sélecteurs du formulaire */
  body.ressources-page .cover-picker { flex-direction: column !important; }
  body.ressources-page .cover-prev { width: 100% !important; }
  body.ressources-page .src-row { flex-wrap: wrap !important; }
  body.ressources-page .src-row .src-url,
  body.ressources-page .src-row .src-lbl { flex: 1 1 100% !important; }

  body.ressources-page .toast { bottom: calc(16px + 64px + env(safe-area-inset-bottom)) !important; }
  body.ressources-page .toast.show { transform: translateX(-50%) translateY(0) !important; }

  /* ══ FORMATIONS ══ */

  /* Topbar : scrollable horizontal */
  body.formations-page .topbar {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    padding: 0 10px !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.formations-page .topbar::-webkit-scrollbar { display: none; }
  body.formations-page .tb-label {
    flex-shrink: 0 !important;
    font-size: 11px !important;
  }
  body.formations-page .vis-group {
    flex-shrink: 0 !important;
  }
  body.formations-page .vis-btn {
    font-size: 9px !important;
    padding: 3px 7px !important;
    white-space: nowrap !important;
  }
  body.formations-page .search-area {
    flex-shrink: 0 !important;
  }
  body.formations-page .search-wrap {
    width: 130px !important;
  }
  body.formations-page .search-input {
    font-size: 10px !important;
    padding: 5px 8px 5px 24px !important;
  }
  body.formations-page .filter-toggle {
    font-size: 9.5px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
  }
  /* Le padding revient à 0 : le bandeau Élan est dépouillé sur mobile (voir le
     bloc « ÉLAN EN HAUT À DROITE » plus haut) — en remettre ici recréerait un
     décalage visible par rapport aux autres pages. */
  body.formations-page .elan-pill {
    flex-shrink: 0 !important;
  }
  body.formations-page .tb-sep {
    display: none !important;
  }

  /* Canvas : désactiver les gestes navigateur */
  body.formations-page #cw {
    touch-action: none !important;
  }

  /* Focus card : au-dessus de la bottom nav, pleine largeur */
  body.formations-page #fc {
    bottom: 76px !important;
    width: calc(100vw - 20px) !important;
    max-width: 380px !important;
  }

  /* Puits modal : bottom sheet sur mobile */
  body.formations-page #pm {
    align-items: flex-end !important;
  }
  body.formations-page .pmc {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 78vh !important;
    overflow-y: auto !important;
    animation: pm-up-mob .32s cubic-bezier(.22,1,.36,1) forwards !important;
  }
  @keyframes pm-up-mob {
    0% { opacity:0; transform: translateY(60px); }
    100% { opacity:1; transform: translateY(0); }
  }
  body.formations-page .pm-trees {
    max-height: 200px !important;
  }

  /* Zoom indicator */
  body.formations-page #zh {
    bottom: 76px !important;
  }

  /* ══ PROFIL — bannière scroll avec le contenu sur mobile ══ */
  body.profil-page .main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.profil-page .page-body {
    overflow-y: visible !important;
    flex: none !important;
    min-height: 0 !important;
  }
  body.profil-page .profil-scroll {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex: none !important;
  }

  /* ══ TRACKER HABITUDES ══ */
  /* FAB visible, btn-add-habit caché */
  .hab-fab { display: flex !important; }
  #btn-add-habit { display: none !important; }
  /* Liste habitudes avec padding pour FAB */
  #habits-list { padding-bottom: 90px !important; }

  /* ══ CETTE SEMAINE — grille responsive ══ */
  /* habits-scroll padding réduit pour gagner de l'espace */
  #view-week { padding-left: 8px !important; padding-right: 8px !important; }
  /* Grille : colonne nom réduite, cellules compactes */
  .week-header { grid-template-columns: 82px repeat(7, 1fr) !important; gap: 3px !important; }
  .week-row    { grid-template-columns: 82px repeat(7, 1fr) !important; gap: 3px !important; }
  .week-row-name { font-size: 10px !important; padding-right: 4px !important; gap: 4px !important; }
  .week-row-name > span:first-child { font-size: 13px !important; }
  .week-streak { font-size: 8px !important; padding: 1px 3px !important; }
  .week-hday   { font-size: 9px !important; }
  .week-hday > div:last-child { font-size: 12px !important; font-weight: 800 !important; }
  .week-dot {
    width:  26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }
  /* Stats habitudes : grille 2 cols */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ══ POMODORO — HISTORIQUE DES CRISTAUX ══ */
  #view-history {
    padding: 14px 14px 80px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  #view-history > div { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }
  .crystal-item { width: 78px !important; }
  .crystal-img-wrap { width: 52px !important; height: 52px !important; }
  .crystal-drawer {
    left: 0 !important; right: 0 !important; width: 100% !important;
    top: auto !important; bottom: 0 !important;
    max-height: 80dvh !important;
    border-left: none !important;
    border-top: 1px solid var(--border, rgba(255,255,255,.055)) !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%) !important;
  }
  .crystal-drawer.open { transform: translateY(0) !important; }

  /* ══ POMODORO COOP ══ */
  #view-coop { padding: 14px 12px 80px !important; overflow-x: hidden !important; box-sizing: border-box !important; }
  #view-coop > div { max-width: 100% !important; width: 100% !important; }
  .coop-cards { grid-template-columns: 1fr !important; }
  .coop-main { grid-template-columns: 1fr !important; }
  .coop-timer { font-size: 52px !important; }
  .coop-chat { height: 340px !important; }
}