.okm-mobile-nav{display:none}
@media(max-width:700px){
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .okm-mobile-nav{
    position:fixed;z-index:9999;left:0;right:0;bottom:0;height:64px;
    padding:5px 7px calc(5px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
    background:rgba(255,255,255,.98);border-top:1px solid #dce5ee;
    box-shadow:0 -7px 25px rgba(5,35,67,.10);backdrop-filter:blur(12px)
  }
  .okm-mnav-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none!important;color:#66788a!important;font-weight:800;min-width:0}
  .okm-mnav-item span{display:grid;place-items:center;width:29px;height:27px;font-size:24px;line-height:1;font-family:Arial,sans-serif}
  .okm-mnav-item small{font-size:9px;line-height:1.15}
  .okm-mnav-item.active{color:#087ff5!important}
  .okm-mnav-main span{width:39px;height:39px;margin-top:-20px;border-radius:50%;background:#087ff5;color:#fff;font-size:28px;box-shadow:0 5px 15px rgba(8,127,245,.3)}
  .okm-mnav-main small{margin-top:2px}
  .okm-mnav-badge{position:absolute;top:0;right:20%;min-width:17px;height:17px;padding:0 4px;border-radius:20px;background:#ff2934;color:#fff;display:grid;place-items:center;font-size:9px;border:2px solid #fff}
  .header nav{display:none!important}
}
@media(display-mode:standalone){
  .header{padding-top:env(safe-area-inset-top)}
}

@media(max-width:700px){
  .header{
    min-height:66px!important;
    padding:8px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    background:#fff!important;
  }
  .header .brand{margin:0!important;transform:none!important}
  .header .brand>div{font-size:25px!important;line-height:1!important}
  .header .brand small{font-size:7px!important;letter-spacing:2.2px!important;margin-top:5px!important}
  .header .account{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important}
  .header .account .solid[href="logout.php"]{display:none!important}
  .header .account .outline[href="dashboard.php"]{
    width:40px!important;height:40px!important;padding:0!important;
    border-radius:50%!important;font-size:0!important;display:grid!important;place-items:center!important;
  }
  .header .account .outline[href="dashboard.php"]::before{
    content:"👤";font-size:18px;line-height:1
  }
  .notification-bell{margin:0!important;width:40px!important;height:40px!important;border-radius:50%!important}
}

@media(max-width:700px){
 .okm-mnav-item span svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .okm-mnav-item:first-child span svg path{fill:none}
 .okm-mnav-main span svg{width:24px;height:24px;stroke:#fff;stroke-width:2.2}
}


/* ===== OKMatch PWA V3 : finitions mobile ===== */
@media(max-width:700px){
  html{
    background:#fff;
    overflow-x:hidden;
  }
  body{
    margin:0!important;
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
    padding-top:0!important;
    padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;
  }

  /* Header identique sur toutes les pages, sous la zone système Android/iOS */
  .header{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:100vw!important;
    min-height:66px!important;
    height:66px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:8px 14px!important;
    transform:none!important;
    overflow:visible!important;
    z-index:1000!important;
  }

  .header .brand{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    flex:0 1 auto!important;
    max-width:58vw!important;
  }

  .header .brand>div{
    white-space:nowrap!important;
  }

  .header .account{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    flex:0 0 auto!important;
  }

  /* Certains écrans avaient leur premier bloc qui remontait sous le header */
  body > main,
  body > .page,
  body > .wrap,
  body > .container{
    position:relative;
    top:auto!important;
    margin-top:0;
  }

  /* Barre du bas : stable, sans décalage pendant le scroll */
  .okm-mobile-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:100vw!important;
    height:66px!important;
    box-sizing:content-box!important;
    margin:0!important;
    transform:none!important;
    z-index:2147483000!important;
    padding:4px 5px calc(4px + env(safe-area-inset-bottom))!important;
  }

  .okm-mnav-item{
    height:58px!important;
  }

  .okm-mnav-main span{
    margin-top:-18px!important;
  }

  /* Les gros panneaux/formulaires restent dans l'écran sur mobile */
  form, .card, .panel, .profile-card, .space-card{
    max-width:100%;
    box-sizing:border-box;
  }

  img, svg{
    max-width:100%;
  }
}

/* En mode réellement installé, respecter la safe-area sans pousser le contenu sous le système */
@media(max-width:700px) and (display-mode:standalone){
  .header{
    padding-top:8px!important;
  }
}


/* OKMatch V5 - Mes matchs */
@media(max-width:700px){
 .okm-match-badge{right:14%!important;top:-1px!important;background:#ff2934!important}
 .okm-mnav-item small{white-space:nowrap}
}