/* IlikoCar — optimisation mobile de l'espace client
   Scopé à body.client-space pour ne pas impacter loueur/admin/public. */
.clientMobileNav{display:none}
.clientBookingCards{display:none}

@media (max-width: 860px){
  body.client-space{
    background:#f6f8fb !important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important;
    overflow-x:hidden !important;
  }
  body.client-space main{width:100%;overflow-x:hidden}
  body.client-space .section{padding:0 !important}
  body.client-space .wrap,
  body.client-space .wrap.dashShell{padding-left:0 !important;padding-right:0 !important;max-width:none !important;width:100% !important}

  /* Sidebar desktop masquée : navigation basse mobile. */
  body.client-space .dashPro .dashSide,
  body.client-space .dashLayout > .dashSide,
  body.client-space .dashShell > .dashLayout > .dashSide,
  body.client-space .dashSide[aria-label="Menu client"]{
    display:none !important;
  }
  body.client-space .dashApp,
  body.client-space .dashShell,
  body.client-space .wrap.dashShell,
  body.client-space .dashLayout{
    display:block !important;
    min-height:auto !important;
    grid-template-columns:1fr !important;
  }
  body.client-space .dashWorkspace,
  body.client-space .dashMain,
  body.client-space .dashShell > .dashLayout > .dashMain,
  body.client-space .wrap.dashShell > .dashLayout > .dashMain{
    padding:14px 14px calc(128px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    width:100% !important;
    display:grid !important;
    gap:14px !important;
  }

  /* Header mobile. */
  body.client-space .dashTopbar,
  body.client-space .dashHeader,
  body.client-space .wrap.dashShell > .dashHeader{
    position:sticky;
    top:0;
    z-index:40;
    margin:0 !important;
    padding:14px 14px 10px !important;
    border-bottom:1px solid rgba(15,23,42,.08);
    background:rgba(246,248,251,.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  body.client-space .dashTopLeft{align-items:flex-start !important;gap:10px !important}
  body.client-space .dashMenuButton{display:none !important}
  body.client-space .dashTitle,
  body.client-space .dashHeader h1{
    font-size:24px !important;
    line-height:1.08 !important;
    letter-spacing:-.04em !important;
    margin:0 !important;
  }
  body.client-space .dashSubtitle,
  body.client-space .dashHeader .sub{
    font-size:13px !important;
    line-height:1.35 !important;
    margin-top:4px !important;
    max-width:100% !important;
  }
  body.client-space .kicker{font-size:11px !important;margin-bottom:6px !important}
  body.client-space .dashTopActions{display:none !important}
  body.client-space .dashHeaderActions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    overflow:visible !important;
    width:100% !important;
  }
  body.client-space .dashHeaderActions .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    padding:10px 12px !important;
    border-radius:999px !important;
    font-size:13px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    justify-content:center !important;
  }

  /* Surfaces / KPI / cards. */
  body.client-space .dashSurface{display:grid !important;gap:14px !important}
  body.client-space .dashSplit,
  body.client-space .dashTwo,
  body.client-space .dashCardGrid,
  body.client-space .dashGrid,
  body.client-space .kpiGrid,
  body.client-space .contractGrid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  body.client-space .dashPanel,
  body.client-space .dashPro .dashPanel{
    border-radius:20px !important;
    padding:14px !important;
    box-shadow:0 10px 26px rgba(15,23,42,.055) !important;
  }
  body.client-space .panelTitle{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    margin-bottom:12px !important;
  }
  body.client-space .panelTitle strong{font-size:15px !important}
  body.client-space .panelTitle span{font-size:11.5px !important}
  body.client-space .panelTitle > a,
  body.client-space .panelTitle .btn{width:100% !important;justify-content:center !important}

  body.client-space .dashMetrics{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  body.client-space .dashMetric{
    min-height:112px !important;
    padding:14px !important;
    border-radius:20px !important;
    gap:8px !important;
  }
  body.client-space .dashMetricIcon{width:38px !important;height:38px !important;border-radius:15px !important}
  body.client-space .dashMetricTitle{font-size:12px !important;line-height:1.25 !important}
  body.client-space .dashMetricValue{font-size:22px !important}
  body.client-space .dashMetricHint{font-size:11.5px !important;line-height:1.25 !important}

  /* Hero client : image au-dessus, actions propres. */
  body.client-space .dashHero{
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:14px !important;
    border-radius:22px !important;
  }
  body.client-space .dashHeroImg{
    width:100% !important;
    height:150px !important;
    border-radius:18px !important;
    object-fit:cover !important;
  }
  body.client-space .dashHeroTitle{font-size:23px !important;line-height:1.08 !important}
  body.client-space .dashHeroMeta{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:12px !important;
  }
  body.client-space .dashHeroMetaItem{
    border-left:0 !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    background:#f8fafc !important;
    border:1px solid rgba(15,23,42,.07) !important;
  }
  body.client-space .dashHero div[style*="display:flex"]{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  body.client-space .dashHero .btn{width:100% !important;justify-content:center !important}

  /* Étapes / lignes d'info. */
  body.client-space .dashStep,
  body.client-space .rowItem,
  body.client-space .dashActivityItem{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:flex-start !important;
    padding:14px !important;
  }
  body.client-space .dashStep .btn,
  body.client-space .rowItem .btn,
  body.client-space .dashActivityItem .btn{width:100% !important;justify-content:center !important}
  body.client-space .dashPaymentSplit{grid-template-columns:1fr !important;gap:12px !important}
  body.client-space .dashProgress{width:112px !important;height:112px !important}

  /* Tables : pas de débordement global. */
  body.client-space .tableWrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:18px !important;
    max-width:100% !important;
  }
  body.client-space .tableWrap::-webkit-scrollbar{height:0}
  body.client-space .table{min-width:720px !important}
  body.client-space .table th,
  body.client-space .table td{padding:10px !important;font-size:12.5px !important}

  /* Dashboard : cartes mobiles à la place du tableau récent. */
  body.client-space .clientDesktopTable{display:none !important}
  body.client-space .clientBookingCards{
    display:grid !important;
    gap:12px !important;
  }
  body.client-space .clientBookingCard,
  body.client-space .mCard{
    background:#fff !important;
    border:1px solid rgba(15,23,42,.10) !important;
    border-radius:18px !important;
    padding:14px !important;
    box-shadow:0 10px 26px rgba(15,23,42,.055) !important;
    display:grid !important;
    gap:12px !important;
  }
  body.client-space .clientBookingHead{
    display:grid !important;
    gap:10px !important;
  }
  body.client-space .clientBookingHead .dashBadge{justify-self:flex-start !important}
  body.client-space .clientBookingMeta,
  body.client-space .mRows{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  body.client-space .clientBookingMeta div,
  body.client-space .mRow{
    background:#f8fafc !important;
    border:1px solid rgba(15,23,42,.07) !important;
    border-radius:14px !important;
    padding:10px 12px !important;
    display:grid !important;
    gap:4px !important;
  }
  body.client-space .clientBookingMeta span,
  body.client-space .mKey{
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    color:#64748b !important;
  }
  body.client-space .clientBookingMeta strong,
  body.client-space .mVal{
    font-size:13px !important;
    line-height:1.4 !important;
    color:#0f172a !important;
    font-weight:900 !important;
  }
  body.client-space .clientBookingMeta small{font-size:12px !important;color:#64748b !important;font-weight:700 !important}
  body.client-space .clientBookingCard > .btn,
  body.client-space .mActions .btn,
  body.client-space .mActions span.btn{
    width:100% !important;
    justify-content:center !important;
    min-height:40px !important;
  }
  body.client-space .mList{display:grid !important;gap:12px !important}
  body.client-space .mCardLink{text-decoration:none !important;color:inherit !important;display:grid !important;gap:12px !important}
  body.client-space .mCardTop{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:8px !important}
  body.client-space .mCardTitle{font-size:14px !important;font-weight:1000 !important;color:#0f172a !important}
  body.client-space .mCardSub{font-size:13px !important;color:#64748b !important;font-weight:800 !important}
  body.client-space .mBadge{border-radius:999px !important;background:#f1f5f9 !important;padding:6px 10px !important;font-size:11px !important;font-weight:900 !important;color:#475569 !important;white-space:nowrap !important}
  body.client-space .mActions{display:grid !important;grid-template-columns:1fr !important;gap:8px !important}
  body.client-space .mHideOnMobile{display:none !important}

  /* Formulaires client : une colonne et champs lisibles. */
  body.client-space .formGrid,
  body.client-space .filtersGrid,
  body.client-space .grid2,
  body.client-space .grid3,
  body.client-space .dashPanel form > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
  body.client-space .input,
  body.client-space select.input,
  body.client-space textarea.input{
    font-size:16px !important;
    min-height:44px !important;
  }
  body.client-space .dashPanel form > div[style*="display:flex"]{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  body.client-space .dashPanel form .btn,
  body.client-space .dashPanel form button{
    width:100% !important;
    justify-content:center !important;
  }

  /* Navigation basse client. */
  .clientMobileNav{
    position:fixed;
    left:14px;
    right:14px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:999;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    padding:8px;
    border-radius:24px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 44px rgba(15,23,42,.18);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .clientMobileNavItem{
    min-width:0;
    min-height:52px;
    border-radius:18px;
    color:#64748b;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-weight:900;
    font-size:10.5px;
    line-height:1;
    letter-spacing:-.02em;
  }
  .clientMobileNavItem svg{width:20px;height:20px;stroke-width:2}
  .clientMobileNavItem.active{
    color:#3730A3;
    background:#EEF0FE;
  }
  .clientMobileNavLabel{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (min-width: 861px){
  .clientBookingCards{display:none !important}
}

@media (max-width: 420px){
  body.client-space .dashHeaderActions,
  body.client-space .dashMetrics{
    grid-template-columns:1fr !important;
  }
  .clientMobileNav{left:8px;right:8px;padding:7px;border-radius:21px}
  .clientMobileNavItem{min-height:50px;font-size:9.5px;border-radius:15px}
}

/* Barre client sur la page publique de recherche mobile. */
@media (max-width: 860px){
  body.client-mobile-public{
    padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important;
    overflow-x:hidden !important;
  }
  body.client-mobile-public .searchPage{
    padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important;
  }
  body.client-mobile-public footer{
    padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  }
}


/* Barre client sur les pages publiques du tunnel client : véhicule, réservation, paiement. */
@media (max-width: 860px){
  body.client-mobile-public{
    padding-bottom:calc(118px + env(safe-area-inset-bottom)) !important;
    overflow-x:hidden !important;
  }
  body.client-mobile-public .vehiclePage,
  body.client-mobile-public .bookingPage,
  body.client-mobile-public .checkoutPage,
  body.client-mobile-public main{
    padding-bottom:calc(126px + env(safe-area-inset-bottom)) !important;
  }
  body.client-mobile-public .vehiclePage.section{
    padding-bottom:calc(126px + env(safe-area-inset-bottom)) !important;
  }
  body.client-mobile-public .vehicleHeadActions{
    display:grid !important;
    grid-template-columns:1fr 1.35fr !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  body.client-mobile-public .vehicleHeadActions .btn{
    width:100% !important;
    min-width:0 !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }
}
@media (max-width: 420px){
  body.client-mobile-public .vehicleHeadActions{
    grid-template-columns:1fr !important;
  }
}


/* Correctif : ces barres/règles mobiles ne doivent pas s'appliquer sur PC avec souris/trackpad. */
@media (hover:hover) and (pointer:fine){
  body.bo-theme{
    padding-bottom:0 !important;
    overflow-x:auto !important;
  }
  body.bo-theme .adminMobileNav,
  body.bo-theme .clientMobileNav,
  body.bo-theme .loueurMobileNav{
    display:none !important;
  }
}


/* Correctif tableau de bord client mobile — carte prochaine location */
@media (max-width: 860px){
  body.client-space,
  body.client-space .dashPro,
  body.client-space .dashApp,
  body.client-space .dashWorkspace,
  body.client-space .dashSurface{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  body.client-space .dashWorkspace{
    padding-bottom:calc(168px + env(safe-area-inset-bottom)) !important;
  }

  body.client-space .dashRoleClient .dashHeroNext{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:18px !important;
    border-radius:22px !important;
    margin:0 0 14px !important;
  }

  body.client-space .dashRoleClient .dashHeroNext > div{
    min-width:0 !important;
  }

  body.client-space .dashRoleClient .dashHeroNext h2{
    font-size:23px !important;
    line-height:1.08 !important;
    margin:8px 0 6px !important;
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .lessorLine{
    font-size:15px !important;
    line-height:1.3 !important;
    overflow-wrap:anywhere !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .meta{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
    margin-top:16px !important;
    width:100% !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .meta > div{
    min-width:0 !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .meta b{
    font-size:15px !important;
    line-height:1.2 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .meta span{
    font-size:11px !important;
    line-height:1.25 !important;
    display:block !important;
    margin-top:4px !important;
    white-space:normal !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .cd{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    justify-self:stretch !important;
    padding:14px 12px !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .cd b{
    font-size:28px !important;
    line-height:1.05 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .cd span{
    display:block !important;
    margin-top:6px !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.25 !important;
  }
}

@media (max-width: 390px){
  body.client-space .dashRoleClient .dashHeroNext{
    padding:16px !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .meta{
    grid-template-columns:1fr 1fr !important;
  }

  body.client-space .dashRoleClient .dashHeroNext .meta > div:last-child{
    grid-column:1 / -1 !important;
  }
}