/* Temps mort, la ligue entre amis : l'iPad (5/11, Mathias : « on est pas super responsive sur iPad »).
   Le jeu est réglé pour le téléphone couché (844 x 390) et pour l'ordinateur (1280 à 2560). Une tablette tombe entre les
   deux : de 744 à 1366 de large, de 744 à 1366 de haut, au doigt. Ici seulement ce qui change sur une tablette tactile
   (pointer:coarse, les deux côtés à 700 px au moins) : le téléphone (moins de 700 px d'un côté) et l'ordinateur à la
   souris n'en voient rien. Le voile « Tourne ton téléphone » ne vise plus que les écrans de moins de 700 px de large
   (ligue-tableau.css, ligue-coach.css, ligue.html, ligue-tableau.js, ligue-ui.js) : un iPad debout garde la ligue.
   Toutes les classes d'ici existent déjà : rien de nouveau, seulement leurs tailles sur tablette. */
@media (pointer:coarse) and (min-width:700px) and (min-height:700px) and (max-width:1400px){
  /* le texte : la base du tableau de bord passe de 14 à 16 px (lu à bout de bras, au doigt) */
  .tbx{font-size:16px}
  .tbx .tbfFiche small,.tbx .tbfStyleV i{font-size:max(12px,.79em)}
  /* les petites étiquettes encore sous 12 px à cette taille : 12 px au moins */
  .tbx .tbmPuce.carte small,.tbxClt td.tProch small,.tbx .tbmPV em,.tbx .mcxTag{font-size:12px}
  .tbx .ppK small,.tbx .trTuileL li small,.tbx .trChiffres small,.tbx .trVal small,.tbx .trParcours small,.tbx .trRemis small{font-size:.75rem}
  .tbx .trEtat{font-size:.75rem}
  .tbx .trQui small,.tbx .trDroite small,.tbx .trMatch small,.tbx .trRec small,.tbx .trCoupe small{font-size:.8rem}
  .tbx .b3-pat small{font-size:max(12px,.72em)}
  .tbx .cbNom small{font-size:.75rem}
  .tbx .mcxJT small{font-size:max(12px,.72em)}
  /* les touches au doigt : 44 px */
  .tbx .tbvRes li button,.tbx .tbmJ input,.tbx .tbxMC,.tbx .tbxFicheB.qui,.tbx .tbmEqT,.tbx .tbmLienT,.tbx .tbxFicheB.tbfAdv{min-height:44px}
  .tbx .tbxFicheB.svxClub{position:relative}
  .tbx .tbxFicheB.svxClub::after{content:"";position:absolute;inset:-12px -4px}
  /* le direct */
  .tb .tbScore .edEq{min-height:44px}
  .tb .tbPage{min-height:44px;display:inline-flex;align-items:center}
  .tb .tbBarre .edB,.tb .tbCol .lien{min-height:44px}
  .tb .tbJ thead th,.tb .tbJ .tbBancT th{font-size:.75rem}
  .tb .tbScore .edHeure small,.tb .tbEqN small,.tb .tbCm span{font-size:.75rem}
  .tb .tbJ .edNum{font-size:.75rem}
  .tb .tbJ tbody th{font-size:max(.8rem,1em)}
  .tb .tbJ .n,.tb .tbJ .tbE{font-size:.75rem}
}
/* le direct couché sur tablette : les deux équipes assez larges pour toutes leurs colonnes */
@media (pointer:coarse) and (orientation:landscape) and (min-height:700px) and (max-width:1400px){
  .tbGrille{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr)}
}
/* le direct debout sur tablette : le terrain en haut sur toute la largeur, les deux équipes côte à côte dessous */
@media (pointer:coarse) and (orientation:portrait) and (min-width:700px) and (max-width:1100px){
  .tbGrille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,44%) minmax(0,1fr)}
  .tbGrille>.tbMilieu{grid-column:1 / -1;grid-row:1;border-bottom:1px solid var(--trait)}
  .tbGrille>.tbCol:first-child{grid-column:1;grid-row:2}
  .tbGrille>.tbCol:last-child{grid-column:2;grid-row:2}
}
/* la page d'un match debout sur tablette : trois colonnes de 250 px coupaient les noms et les feuilles de match ; deux
   colonnes côte à côte, la troisième (les effectifs, les feuilles) dessous sur toute la largeur, et la page défile d'un
   bloc (seulement la page d'un match : Mon club porte aussi la classe tbm) */
@media (pointer:coarse) and (orientation:portrait) and (min-width:700px) and (max-width:1100px){
  .tbxEcran.ancien:has(>.tbm:is(.tbmAvant,.tbmApres)){overflow-y:auto;overscroll-behavior:contain}
  .tbxEcran>.tbm:is(.tbmAvant,.tbmApres){flex:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .tbxEcran>.tbm:is(.tbmAvant,.tbmApres)>.tbxCol{overflow:visible;height:auto}
  .tbxEcran>.tbm:is(.tbmAvant,.tbmApres)>.tbxCol:nth-child(n+3){grid-column:1 / -1;border-top:1px solid var(--tt)}
}
/* Composition debout sur tablette : en deux colonnes, la rotation n'avait plus qu'une lettre pour chaque nom ; le
   terrain puis la rotation l'un sous l'autre */
@media (pointer:coarse) and (orientation:portrait) and (min-width:700px) and (max-width:1100px){
  .tbx .tbmDash.vCompo{grid-template-columns:minmax(0,1fr)}
  .tbx .tbmDash.vCompo>.tbmPan{grid-column:auto}
}
/* Composition couchée sur tablette : les deux rangées à hauteur égale écrasaient le terrain sur la note du cinq ; chaque
   panneau prend sa hauteur et la vue défile */
@media (pointer:coarse) and (orientation:landscape) and (min-height:700px) and (max-width:1400px){
  .tbx .tbmVue:has(>.tbmDash.vCompo){overflow:auto}
  .tbx .tbmDash.vCompo{height:auto;grid-auto-rows:auto}
}
/* Mon club debout sur tablette : la vue défile et ses panneaux vont par deux ; un panneau court (le face-à-face à côté
   du prochain match) s'étirait sur la hauteur de son voisin, de grands vides entre ses lignes. Chacun sa hauteur */
@media (pointer:coarse) and (orientation:portrait) and (min-width:700px) and (max-width:1100px){
  .tbx .tbmDash{align-items:start}
}
/* Mercato debout sur une grande tablette (1024 de large) : trois colonnes de 300 px coupaient les noms des joueurs
   (« Ko... ») et laissaient Mouvements presque vide ; comme de 744 à 1000 de large (ligue-mercato.css), un panneau à la
   fois sur toute la largeur, choisi par les onglets */
@media (pointer:coarse) and (orientation:portrait) and (min-width:1001px) and (max-width:1100px){
  .tbx .mcxOnglets{display:flex}
  .tbx .mcxGrille,.tbx .mcxGrille.n1,.tbx .mcxGrille.n2,.tbx .mcxGrille.n3{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}
  .tbx .mcxPan:not(.choisi){display:none}
  .tbx .mcxPT{display:none}
}