/* ========================================================================== */
/* BB2020 — Affichage smartphone                                              */
/* Chargé APRES style.css. Toutes les règles sont limitées aux petits écrans. */
/* Le rendu PC (>= 851 px) reste inchangé.                                    */
/* ========================================================================== */

.bb-mobile-menu-toggle,
.bb-mobile-nav-backdrop{
  display:none;
}

@media screen and (max-width:850px), screen and (max-width:1000px) and (pointer:coarse){
  :root{
    --bb-mobile-header-height:78px;
    --bb-mobile-gutter:10px;
  }

  html{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    background-attachment:scroll !important;
  }

  body.bb-mobile-nav-open{
    overflow:hidden !important;
  }

  /* ---------------------------------------------------------------------- */
  /* Header compact et bouton de menu                                       */
  /* ---------------------------------------------------------------------- */
  header{
    box-sizing:border-box !important;
    position:sticky !important;
    top:0 !important;
    left:0 !important;
    z-index:5200 !important;
    width:100% !important;
    height:var(--bb-mobile-header-height) !important;
    min-height:var(--bb-mobile-header-height) !important;
    margin:0 !important;
    padding:9px 64px 8px 14px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:left !important;
    overflow:hidden !important;
    background-position:center !important;
    background-size:100% 100% !important;
    box-shadow:0 7px 22px rgba(0,0,0,.72) !important;
  }

  header h1{
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    font-size:25px !important;
    line-height:1 !important;
    letter-spacing:.2px !important;
    text-align:left !important;
    white-space:nowrap !important;
  }

  header .bb-subtitle,
  .bb-subtitle{
    width:auto !important;
    max-width:100% !important;
    margin:6px 0 0 !important;
    font-size:10px !important;
    line-height:1.1 !important;
    letter-spacing:2.4px !important;
    text-align:left !important;
    white-space:nowrap !important;
  }

  .bb-mobile-menu-toggle{
    position:absolute !important;
    right:12px !important;
    top:50% !important;
    z-index:5300 !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    margin:0 !important;
    padding:0 !important;
    transform:translateY(-50%) !important;
    align-items:center !important;
    justify-content:center !important;
    color:#ffe7a0 !important;
    font-size:25px !important;
    line-height:1 !important;
    text-indent:0 !important;
    text-transform:none !important;
    border:1px solid rgba(236,198,112,.72) !important;
    border-radius:4px !important;
    background:linear-gradient(180deg,#845b28,#64180f 56%,#210805) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 14px rgba(0,0,0,.55) !important;
  }

  body.bb-has-mobile-nav .bb-mobile-menu-toggle{
    display:flex !important;
  }

  .bb-mobile-menu-toggle:hover,
  .bb-mobile-menu-toggle:focus{
    filter:brightness(1.12) !important;
    transform:translateY(-50%) !important;
  }

  .bb-mobile-menu-toggle .bb-mobile-menu-icon{
    display:block;
    width:24px;
    height:18px;
    position:relative;
  }

  .bb-mobile-menu-toggle .bb-mobile-menu-icon::before,
  .bb-mobile-menu-toggle .bb-mobile-menu-icon::after,
  .bb-mobile-menu-toggle .bb-mobile-menu-icon span{
    content:"";
    position:absolute;
    left:0;
    width:24px;
    height:2px;
    border-radius:2px;
    background:#ffe7a0;
    box-shadow:0 1px 0 #000;
    transition:transform .18s ease,top .18s ease,opacity .18s ease;
  }
  .bb-mobile-menu-toggle .bb-mobile-menu-icon::before{top:0;}
  .bb-mobile-menu-toggle .bb-mobile-menu-icon span{top:8px;}
  .bb-mobile-menu-toggle .bb-mobile-menu-icon::after{top:16px;}
  body.bb-mobile-nav-open .bb-mobile-menu-toggle .bb-mobile-menu-icon::before{top:8px;transform:rotate(45deg);}
  body.bb-mobile-nav-open .bb-mobile-menu-toggle .bb-mobile-menu-icon span{opacity:0;}
  body.bb-mobile-nav-open .bb-mobile-menu-toggle .bb-mobile-menu-icon::after{top:8px;transform:rotate(-45deg);}

  /* ---------------------------------------------------------------------- */
  /* Structure principale : plus de colonne fixe sur smartphone             */
  /* ---------------------------------------------------------------------- */
  main,
  .page-public-home main,
  .page-public main{
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:calc(100vh - var(--bb-mobile-header-height)) !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  .bb-content{
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:14px var(--bb-mobile-gutter) 42px !important;
    overflow-x:hidden !important;
    background:rgba(0,0,0,.12) !important;
  }

  footer{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:12px 10px !important;
    font-size:12px !important;
  }

  /* ---------------------------------------------------------------------- */
  /* NAV coach/admin ET NAV publique : tiroir latéral                       */
  /* ---------------------------------------------------------------------- */
  main > nav:not(.bb-team-tabs),
  nav:not(.bb-team-tabs),
  .page-public-home nav.bb-public-nav,
  .page-public nav.bb-public-nav{
    box-sizing:border-box !important;
    position:fixed !important;
    left:0 !important;
    top:var(--bb-mobile-header-height) !important;
    bottom:0 !important;
    z-index:5100 !important;
    display:block !important;
    width:min(86vw,320px) !important;
    max-width:320px !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:18px 14px 28px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-104%) !important;
    transition:transform .22s ease,visibility .22s ease !important;
    border:10px solid transparent !important;
    border-image-source:url('../assets/style3/fond_navfin.png') !important;
    border-image-slice:90 fill !important;
    border-image-width:10px !important;
    border-image-repeat:stretch !important;
    background-color:#060504 !important;
    background-image:
      linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.62)),
      url('../assets/style3/nav_stone_fill.png') !important;
    background-repeat:no-repeat,repeat !important;
    background-position:center top,center top !important;
    background-size:100% 100%,260px 260px !important;
    box-shadow:16px 0 34px rgba(0,0,0,.78),inset 0 0 26px rgba(0,0,0,.62) !important;
  }

  body.bb-mobile-nav-open main > nav:not(.bb-team-tabs),
  body.bb-mobile-nav-open nav:not(.bb-team-tabs),
  body.page-public-home.bb-mobile-nav-open nav.bb-public-nav,
  body.page-public.bb-mobile-nav-open nav.bb-public-nav{
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(0) !important;
  }

  main > nav:not(.bb-team-tabs) ul,
  nav:not(.bb-team-tabs) ul,
  .page-public-home nav.bb-public-nav ul,
  .page-public nav.bb-public-nav ul{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  main > nav:not(.bb-team-tabs) li,
  nav:not(.bb-team-tabs) li,
  .page-public-home nav.bb-public-nav li,
  .page-public nav.bb-public-nav li{
    display:block !important;
    width:100% !important;
    margin:6px 0 !important;
    padding:0 !important;
  }

  main > nav:not(.bb-team-tabs) a,
  nav:not(.bb-team-tabs) a,
  .page-public-home nav.bb-public-nav a,
  .page-public nav.bb-public-nav a{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:50px !important;
    margin:0 !important;
    padding:10px 14px 10px 41px !important;
    white-space:normal !important;
    font-size:14px !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:rgba(243,217,142,.16);
  }

  .page-public-home nav.bb-public-nav .bb-public-nav-separator,
  .page-public nav.bb-public-nav .bb-public-nav-separator{
    margin-top:14px !important;
    padding:0 !important;
    border:0 !important;
  }

  .bb-mobile-nav-backdrop{
    position:fixed !important;
    inset:var(--bb-mobile-header-height) 0 0 0 !important;
    z-index:5000 !important;
    background:rgba(0,0,0,.72) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  body.bb-mobile-nav-open .bb-mobile-nav-backdrop{
    display:block !important;
  }

  /* ---------------------------------------------------------------------- */
  /* Typographie et contrôles tactiles                                      */
  /* ---------------------------------------------------------------------- */
  h2{
    font-size:24px !important;
    line-height:1.15 !important;
    letter-spacing:1px !important;
    overflow-wrap:anywhere;
  }
  h3{
    margin:18px 0 10px !important;
    padding:10px 11px !important;
    font-size:18px !important;
    line-height:1.2 !important;
    letter-spacing:.5px !important;
    overflow-wrap:anywhere;
  }
  h4{overflow-wrap:anywhere;}
  p,li,td,th,label{line-height:1.38;}
  img{max-width:100%;height:auto;}
  pre,code{max-width:100%;overflow-x:auto;}

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea{
    box-sizing:border-box !important;
    max-width:100% !important;
    min-height:42px;
    font-size:16px !important;
  }
  textarea{width:100% !important;}
  input[type="checkbox"],input[type="radio"]{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
  }
  button,
  input[type="submit"],
  input[type="button"],
  a.btn,
  a.button,
  a.action{
    min-height:44px !important;
    max-width:100%;
    touch-action:manipulation;
  }
  .bb-content form{max-width:100% !important;}
  .bb-content form[style*="display:flex"],
  .bb-content [style*="display:flex"]{
    max-width:100%;
    flex-wrap:wrap !important;
  }

  /* Tâches de début de match : supprime le faux minimum PC de 420 px. */
  .page-rapport-match [style*="min-width:420px"]{
    min-width:0 !important;
    width:auto !important;
    flex:1 1 230px !important;
  }
  .page-rapport-match [data-tache-debut]{
    flex:0 0 22px !important;
  }

  /* ---------------------------------------------------------------------- */
  /* Tableaux : défilement HORIZONTAL local plutôt que toute la page         */
  /* Le JS entoure automatiquement les tableaux non déjà enveloppés.         */
  /* ---------------------------------------------------------------------- */
  .bb-mobile-table-scroll{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 16px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    border-radius:5px;
    scrollbar-width:thin;
    scrollbar-color:#9b6d32 #0b0805;
  }
  .bb-mobile-table-scroll > table{
    width:100% !important;
    max-width:none !important;
    min-width:var(--bb-mobile-table-min,100%) !important;
    margin:0 !important;
  }
  .bb-mobile-table-scroll th,
  .bb-mobile-table-scroll td{
    padding:7px 8px !important;
    font-size:12px !important;
  }
  .bb-mobile-table-scroll th{white-space:nowrap !important;}

  /* Les wrappers déjà prévus par le site restent eux-mêmes scrollables. */
  .bb-season-table-wrap,
  .bb-public-table-wrap,
  .bb-weather-table-wrap,
  .page-gerer-equipe .bb-team-tab-panel,
  .page-calendrier .calendrier-journee{
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  /* ---------------------------------------------------------------------- */
  /* Gérer équipe / fiches d'équipe                                         */
  /* ---------------------------------------------------------------------- */
  .page-gerer-equipe .bb-team-page{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
  .page-gerer-equipe .bb-team-hero{
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:12px !important;
  }
  .page-gerer-equipe .bb-team-logo-card{
    width:112px !important;
    height:112px !important;
    margin:0 auto !important;
  }
  .page-gerer-equipe .bb-team-logo-card img{
    max-width:94px !important;
    max-height:94px !important;
  }
  .page-gerer-equipe .bb-team-hero-content{text-align:center;}
  .page-gerer-equipe .bb-team-hero h2{
    padding:10px 8px !important;
    font-size:24px !important;
    letter-spacing:1px !important;
  }
  .page-gerer-equipe .bb-team-quickstats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .page-gerer-equipe .bb-team-quickstats span{
    min-width:0 !important;
    min-height:52px !important;
    padding:9px !important;
    text-align:left;
  }
  .page-gerer-equipe .bb-team-info-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:12px 0 16px !important;
  }
  .page-gerer-equipe .bb-team-info-grid>p,
  .page-gerer-equipe .bb-team-info-grid>form,
  .page-gerer-equipe .bb-team-info-grid>div{
    min-width:0 !important;
    min-height:0 !important;
    padding:11px !important;
  }
  .page-gerer-equipe .bb-team-tabs{
    display:flex !important;
    width:100% !important;
    gap:4px !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }
  .page-gerer-equipe .bb-team-tab{
    flex:0 0 auto !important;
    min-height:46px !important;
    padding:10px 14px !important;
    font-size:13px !important;
  }
  .page-gerer-equipe .bb-team-tab-panel{
    margin-top:6px !important;
    padding:8px !important;
  }

  /* Listes Équipes de la saison : carte verticale lisible. */
  .page-equipes-saison-lecture .bb-season-list-link{
    grid-template-columns:64px minmax(0,1fr) !important;
    gap:8px 10px !important;
    padding:10px !important;
  }
  .page-equipes-saison-lecture .bb-season-list-logo{
    grid-row:1 / span 3;
    width:58px !important;
    height:58px !important;
  }
  .page-equipes-saison-lecture .bb-season-list-main,
  .page-equipes-saison-lecture .bb-season-list-coach,
  .page-equipes-saison-lecture .bb-season-list-meta{
    min-width:0 !important;
  }
  .page-equipes-saison-lecture .bb-season-list-action{
    grid-column:1/-1 !important;
    justify-self:stretch !important;
    text-align:center !important;
  }

  /* ---------------------------------------------------------------------- */
  /* Accueil et pages publiques                                             */
  /* ---------------------------------------------------------------------- */
  .page-public-home .bb-public-shell,
  .page-public .bb-public-shell{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:9px var(--bb-mobile-gutter) 36px !important;
  }
  .bb-public-topbar{
    position:static !important;
    margin-bottom:9px !important;
    padding:9px 10px !important;
  }
  .bb-public-brand{
    justify-content:flex-start !important;
    margin:0 !important;
    font-size:13px !important;
  }
  .bb-score-strip{margin-bottom:10px !important;}
  .bb-score-chip{min-width:250px !important;}
  .bb-public-hero{
    grid-template-columns:1fr !important;
    gap:14px !important;
    margin-bottom:12px !important;
    padding:20px 16px !important;
  }
  .bb-public-hero h2{font-size:37px !important;}
  .bb-public-hero-status{font-size:16px !important;}
  .bb-public-hero-actions > a{
    flex:1 1 140px;
    min-height:44px;
  }
  .bb-public-season-meter{padding:15px !important;}
  .bb-public-main-grid,
  .bb-public-match-grid,
  .bb-public-competition-grid,
  .bb-public-leaders-grid{
    grid-template-columns:1fr !important;
  }
  .bb-public-club-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .bb-public-page-head{
    margin-bottom:10px !important;
    padding:18px 14px !important;
  }
  .bb-public-page-head h2{font-size:27px !important;}
  .bb-public-calendar-match{
    grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr) !important;
    gap:6px !important;
    padding:9px 6px !important;
  }
  .bb-public-calendar-date,
  .bb-public-calendar-action{grid-column:1/-1 !important;text-align:center !important;}
  .bb-public-calendar-team img{width:30px !important;height:30px !important;flex-basis:30px !important;}
  .bb-public-calendar-team strong{font-size:10px !important;overflow-wrap:anywhere;}
  .bb-public-match-scoreboard{
    grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr) !important;
    gap:7px !important;
  }
  .bb-public-match-side img{width:54px !important;height:54px !important;}
  .bb-public-match-side strong{font-size:12px !important;overflow-wrap:anywhere;}
  .bb-public-final-score b{font-size:25px !important;}

  /* ---------------------------------------------------------------------- */
  /* Dashboard coach                                                       */
  /* ---------------------------------------------------------------------- */
  .page-coach-dashboard .bb-dashboard-stats{grid-template-columns:1fr !important;}
  .page-coach-dashboard .bb-dashboard-panel{padding:9px !important;}
  .page-coach-dashboard .bb-dashboard-hero h2{font-size:24px !important;}

  /* ---------------------------------------------------------------------- */
  /* Pages de match : marges compactes, actions plus tactiles               */
  /* ---------------------------------------------------------------------- */
  .page-rapport-match .liens,
  .page-rapport-match .msg,
  .lbba-alert{
    max-width:100% !important;
    overflow-wrap:anywhere;
  }
  .page-rapport-match form > p[style*="text-align:center"],
  .bb-content > p[style*="text-align:center"]{
    line-height:1.8 !important;
  }

  /* Evite que les très longues actions restent minuscules. */
  .bb-content td button,
  .bb-content td input[type="submit"]{
    min-height:38px !important;
    padding:7px 9px !important;
  }
}

@media screen and (max-width:480px){
  header h1{font-size:22px !important;}
  header .bb-subtitle,.bb-subtitle{font-size:9px !important;letter-spacing:1.8px !important;}
  .page-gerer-equipe .bb-team-quickstats{grid-template-columns:1fr !important;}
  .bb-public-club-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .bb-public-hero h2{font-size:32px !important;}
  .bb-public-meter-number{font-size:38px !important;}
}

/* Cabalvision — emblème compact dans le header smartphone. */
@media screen and (max-width:850px), screen and (max-width:1000px) and (pointer:coarse){
  header h1.bb-site-title{
    width:calc(100% - 50px) !important;
    height:100% !important;
    margin:0 !important;
    padding:3px 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
  }
  header .bb-site-logo{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:66px !important;
    max-height:66px !important;
    object-fit:contain !important;
  }
}