/* ==========================================================
   Correctif FINAL mobile : sous-menus Véhicules | Salles
   Portée limitée : Planning général + Réserver, téléphone/tablette.
   Force réellement les 2 choix côte à côte, même si d'autres CSS
   imposent une colonne.
   ========================================================== */
@media screen and (max-width: 800px){

  body.page-planning_general .menu-cards-france,
  body.page-reserver .menu-cards-france{
    width:100% !important;
    max-width:100% !important;
    padding:10px !important;
    margin:10px 0 16px !important;
    border-radius:16px !important;
    background:#ffffff !important;
    overflow:hidden !important;
  }

  body.page-planning_general .menu-card-grid,
  body.page-reserver .menu-card-grid{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:space-between !important;
    gap:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:none !important;
    grid-auto-flow:column !important;
    overflow:hidden !important;
    border:1px solid #198754 !important;
    border-radius:15px !important;
    background:#198754 !important;
  }

  body.page-planning_general .menu-card-link,
  body.page-reserver .menu-card-link{
    display:flex !important;
    flex:1 1 50% !important;
    width:50% !important;
    min-width:0 !important;
    max-width:50% !important;
    min-height:54px !important;
    height:54px !important;
    padding:8px 6px !important;
    margin:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#198754 !important;
    color:#ffffff !important;
    text-decoration:none !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:row !important;
    gap:5px !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
  }

  body.page-planning_general .menu-card-link:first-child,
  body.page-reserver .menu-card-link:first-child{
    border-right:1px solid rgba(255,255,255,.75) !important;
  }

  body.page-planning_general .menu-card-link:before,
  body.page-reserver .menu-card-link:before{
    display:none !important;
    content:none !important;
  }

  body.page-planning_general .menu-card-link .icon,
  body.page-reserver .menu-card-link .icon{
    display:inline-flex !important;
    flex:0 0 auto !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    font-size:16px !important;
    line-height:1 !important;
    color:#ffffff !important;
  }

  body.page-planning_general .menu-card-link .label,
  body.page-reserver .menu-card-link .label{
    display:block !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:12px !important;
    font-weight:850 !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.page-planning_general .menu-card-link .desc,
  body.page-reserver .menu-card-link .desc{
    display:none !important;
  }

  body.page-planning_general .menu-card-link:hover,
  body.page-planning_general .menu-card-link:focus,
  body.page-reserver .menu-card-link:hover,
  body.page-reserver .menu-card-link:focus{
    background:#146c43 !important;
    color:#ffffff !important;
    transform:none !important;
    outline:none !important;
  }
}

@media screen and (max-width: 360px){
  body.page-planning_general .menu-card-link,
  body.page-reserver .menu-card-link{
    gap:3px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }
  body.page-planning_general .menu-card-link .label,
  body.page-reserver .menu-card-link .label{
    font-size:11px !important;
  }
  body.page-planning_general .menu-card-link .icon,
  body.page-reserver .menu-card-link .icon{
    font-size:15px !important;
  }
}
