/* ===================== v62 : ÉCRAN MOBILE PLEINE SURFACE ===================== */
  @media (max-width:760px){
    body{padding-inline:max(6px, env(safe-area-inset-left,0px)) max(6px, env(safe-area-inset-right,0px)); padding-top:calc(env(safe-area-inset-top,0px) + 6px); padding-bottom:0;}
    #app{gap:10px;}
    .page{gap:10px;}
    .card{padding:12px; border-radius:14px; gap:8px;}
    .topbar{padding:8px 10px; border-radius:16px;}
    .brand-label{font-size:1.12rem;}
    .bell{width:36px; height:36px; border-radius:10px; font-size:1rem;}
    .hud-btns{gap:6px;}
    .hud-stats{gap:4px 8px;}
    .rank-progress{margin-top:6px; height:4px;}
    .page-head{gap:10px; padding:2px 2px 0;}
    .page-head h1{font-size:1.25rem;}
    .page-ic{width:34px; height:34px; border-radius:10px; font-size:1.05rem;}
    .page-head p{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-size:.74rem;}
    .subnav{padding-bottom:6px;}
    .mainnav{padding:2px 4px calc(2px + env(safe-area-inset-bottom,0px));}
    .nav-item{padding:5px 2px 4px; gap:1px; min-height:46px;}
    .nav-ic{font-size:1.1rem;}
    .actionbar{left:0; right:0; bottom:calc(50px + env(safe-area-inset-bottom,0px)); border-radius:14px 14px 0 0; border-left:0; border-right:0; border-bottom:0; padding:5px 8px; gap:6px; box-shadow:0 -6px 18px rgba(0,0,0,.35);}
    .btn-quick{height:44px;}
    #app{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px));}
    #toast-wrap{bottom:calc(114px + env(safe-area-inset-bottom,0px));}
  }
  /* très petits écrans : les 6 indicateurs tiennent sur 2 lignes au lieu de 3 */
  @media (max-width:389px){
    .hud-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
    .hud-val{font-size:.74rem;} .hud-key{font-size:.52rem;}
  }
  /* téléphone tourné : l'en-tête défile, la navigation tient sur une ligne, la barre du bas s'affine */
  @media (max-height:500px) and (orientation:landscape){
    body{padding-inline:max(8px, env(safe-area-inset-left,0px)) max(8px, env(safe-area-inset-right,0px)); padding-top:calc(env(safe-area-inset-top,0px) + 4px);}
    #app{gap:8px;} .page{gap:8px;}
    .topbar{position:static; padding:6px 10px;}
    .brand-label{font-size:1.1rem;} .bell{width:34px; height:34px;}
    .hud-stats{gap:4px 14px;} .rank-next{display:none;}
    .mainnav{flex-wrap:nowrap; overflow-x:auto; margin-top:6px; padding-top:6px;}
    .nav-item{padding:5px 8px; min-width:max-content;}
    .actionbar{padding:4px 8px;}
    .actionbar .btn-primary, #btn-endweek{min-height:40px; padding-block:6px;}
    .btn-quick{height:40px;}
    .page-head p{display:none;} .page-head h1{font-size:1.2rem;} .page-ic{width:30px; height:30px; font-size:1rem;}
    .card{padding:12px;}
  }