/* Temps mort, la ligue entre amis : Mon club en tableau de bord (tb-club.js vueClubOnglets ; ligue-ui.js vueTactique,
   vueCompo, barreFeuille). Mathias, 4/11 au soir : « plus minimaliste, avec plus d'onglets, façon Football Manager »,
   « rends tout sans scroll, dashboard ! », puis « je trouve le tableau de bord encore nul : fais un audit, comprends, et
   fais un truc vraiment parfait ». Refait le 5/11 après l'audit (des panneaux vides aux deux tiers, des hauteurs qui ne
   se répondent pas, aucun poste, l'orange partout) : chaque onglet remplit l'écran. Les panneaux ont la même hauteur ; à
   l'intérieur, ce qui se répète (les joueurs, les postes, les options, les lignes du classement) se partage la hauteur,
   et seul le corps d'un panneau défile s'il manque vraiment de place (un téléphone couché). L'orange ne marque plus que
   ce qui est choisi ; le vert et le rouge, ce qui tient ou pas. Au téléphone en portrait (la page d'avant, #app), les
   panneaux s'empilent. Un fichier à part (pas ligue-tableau.css) : un téléphone qui garde un ancien style en mémoire ne
   peut pas l'appliquer à cet écran. */
.tbm:not(.tbxCols){--tp:#0b1016;--tp2:#111922;--tt:#1a2430;--tt2:#2a3644;--orange:#ff7a1a;--vert:#2fd27a;--rouge:#ff3d55;--blanc:#f3f5f8;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;height:100%}
.tbmOnglets{flex:none;display:flex;justify-content:flex-start;gap:.2em;overflow-x:auto;scrollbar-width:none;padding:0 .75em;background:#000;border-bottom:1px solid var(--tt2)}
.tbmOnglets::-webkit-scrollbar{display:none}
.tbmOnglets button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:46px;padding:0 1.4em;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--texte3);font:700 1em/1 var(--titre);text-transform:uppercase;letter-spacing:.07em;cursor:pointer}
.tbmOnglets button:hover{color:var(--texte)}
.tbmOnglets button[aria-current="page"]{color:var(--blanc);border-bottom-color:var(--orange)}
.tbmOnglets button:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
.tbmPt{display:inline-block;width:.45em;height:.45em;border-radius:50%;background:var(--orange)}
.tbmVue{flex:1 1 auto;min-height:0;overflow:hidden;padding:.75em}

/* ---- le tableau de bord : des panneaux de même hauteur */
.tbmDash{height:100%;display:grid;gap:.75em;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.tbmDash.un{grid-template-columns:minmax(0,1fr)}
.tbmDash.vCompo{grid-template-columns:minmax(0,4.6fr) minmax(0,4.4fr) minmax(0,3fr)}
.tbmDash.vTactique{grid-template-columns:minmax(0,3.6fr) minmax(0,4.6fr) minmax(0,3.4fr)}
.tbmDash.vMatch{grid-template-columns:minmax(0,4.4fr) minmax(0,4fr) minmax(0,3.6fr)}
.tbmDash.vClub{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.tbmVue .tbmCol{min-height:0;min-width:0;display:flex;flex-direction:column;gap:.75em}
.tbmVue .tbmCol>.tbmPan.nu{flex:none}
.tbmVue .tbmCol>.tbmPan.pReglages{flex:1 1 auto}
.tbmPan{min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--tp);border:1px solid var(--tt);border-radius:4px;overflow:hidden}
.tbmT{flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:.8em;margin:0;padding:.7em .95em;border-bottom:1px solid var(--tt);font:700 .92em/1.1 var(--titre);text-transform:uppercase;letter-spacing:.08em;color:var(--texte2)}
.tbmT>span:first-child{color:var(--blanc)}
.tbmT small{font:600 .85em var(--lecture);text-transform:none;letter-spacing:0;color:var(--texte3)}
.tbmMeta{font:500 .88em/1.2 var(--lecture);text-transform:none;letter-spacing:0;color:var(--texte3);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbmCorps{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;padding:.85em .95em;scrollbar-width:thin}
.tbmPan.nu{background:transparent;border:0;border-radius:0}
.tbmPan.nu>.tbmCorps{padding:0;gap:.75em}
.tbmPan.nu>.tbmCorps>section,.tbmPan.nu>.tbmCorps>div{margin-top:0}
.tbmNote{margin:.7em 0 0;font-size:.85em;line-height:1.4;color:var(--texte3)}
.tbm [aria-disabled="true"]{opacity:.5}

/* ---- la tactique : trois stratégies, trois groupes de cartes, onze plans ; chacun prend sa part de la hauteur */
.tbmOpts{flex:1 1 auto;display:flex;flex-direction:column;gap:.6em}
.tbmOpt{flex:1 1 0;min-height:6.5em;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.45em;padding:.9em 1.1em;text-align:left;border:1px solid var(--tt2);border-radius:4px;background:var(--tp2);color:var(--texte);font:inherit;cursor:pointer}
.tbmOpt b{font:800 1.45em/1 var(--titre);text-transform:uppercase;letter-spacing:.02em}
.tbmOpt span{font-size:.95em;line-height:1.4;color:var(--texte2)}
.tbmOpt small{font:700 .8em/1.2 var(--titre);text-transform:uppercase;letter-spacing:.06em;color:var(--texte3)}
.tbmOpt:hover{border-color:var(--texte3)}
.tbmOpt.choisi{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 10%,var(--tp2));box-shadow:inset 4px 0 0 var(--orange)}
.tbmOpt.choisi b{color:var(--orange)}
.tbmGroupe{flex:1 1 0;min-height:7em;display:flex;flex-direction:column;justify-content:center;gap:.7em;padding:.4em 0}
.tbmGroupe+.tbmGroupe{border-top:1px solid var(--tt)}
.tbmGTete{display:flex;align-items:baseline;gap:.8em;min-width:0}
.tbmGT{flex:none;font:800 1.15em/1 var(--titre);text-transform:uppercase;letter-spacing:.06em;color:var(--blanc)}
.tbmPuces{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5em,1fr));gap:.45em}
.tbmPuce{display:inline-flex;align-items:center;justify-content:center;min-height:3.1em;padding:.35em .6em;border:1px solid var(--tt2);border-radius:4px;background:var(--tp2);color:var(--texte);font:700 .95em/1.15 var(--titre);text-transform:uppercase;letter-spacing:.03em;text-align:center;cursor:pointer}
.tbmPuce:hover{border-color:var(--texte3)}
.tbmPuce.choisi{border-color:var(--orange);background:var(--orange);color:#140800}
.tbmPuce.carte{flex-direction:column;align-items:flex-start;justify-content:center;gap:.3em;min-height:4.6em;padding:.55em .7em;text-align:left}
.tbmPuce.carte b{font:800 1.02em/1.05 var(--titre);text-transform:uppercase;letter-spacing:.03em}
.tbmPuce.carte small{font:500 .78em/1.3 var(--lecture);text-transform:none;letter-spacing:0;color:var(--texte3)}
.tbmPuce.carte.choisi small{color:#2a1300}
.tbmGD{font:800 1.15em/1 var(--titre);text-transform:uppercase;letter-spacing:.04em;color:var(--orange)}
.tbmPuce:disabled{opacity:.45}
.tbmPlans{flex:1 1 auto;display:grid;grid-auto-rows:minmax(3.2em,1fr);gap:.4em}
.tbmPlan{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.2em;min-height:3.2em;padding:.35em .8em;text-align:left;border:1px solid var(--tt2);border-radius:4px;background:var(--tp2);color:var(--texte);font:inherit;cursor:pointer;min-width:0}
.tbmPlan b{font:800 1em/1.1 var(--titre);text-transform:uppercase;letter-spacing:.03em}
.tbmPlan small{font-size:.8em;line-height:1.25;color:var(--texte3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tbmPlan:hover{border-color:var(--texte3)}
.tbmPlan.choisi{border-color:var(--orange);box-shadow:inset 4px 0 0 var(--orange);background:color-mix(in srgb,var(--orange) 10%,var(--tp2))}
.tbmPlan.choisi b{color:var(--orange)}
.tbmOpt:focus-visible,.tbmPuce:focus-visible,.tbmPlan:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---- la composition : le terrain, la rotation, les postes */
.tbmTerrainZone{flex:1 1 auto;min-height:0;display:flex}
.tbmTerrainBox{flex:1 1 auto;width:100%;min-height:12em;container-type:size;display:flex;align-items:center;justify-content:center}
.tbmTerrain{position:relative;aspect-ratio:500/470;height:min(100cqh,calc(100cqw * .94));max-width:100%;border-radius:6px;background:radial-gradient(120% 90% at 50% 100%,#24180f 0%,#17110b 55%,#0f0b07 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tbmCourt{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,236,214,.2);stroke-width:2}
.tbmPion{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.35em;width:max-content;max-width:34%;text-align:center;pointer-events:none}
.tbmPion .num{display:grid;place-items:center;width:clamp(2.4em,7cqh,3.6em);height:clamp(2.4em,7cqh,3.6em);border-radius:50%;background:var(--orange);color:#140800;font:800 1.35em/1 var(--titre);box-shadow:0 0 0 4px rgba(255,122,26,.18)}
.tbmPion>span{display:flex;flex-direction:column;align-items:center;gap:.15em;padding:.25em .55em;border-radius:4px;background:rgba(5,8,12,.78)}
.tbmPion>span b{font:800 1.05em/1.05 var(--titre);text-transform:uppercase;letter-spacing:.02em;color:var(--blanc);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tbmPion>span small{font-size:.82em;color:var(--texte2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbmPion>span small i{font-style:normal;font-weight:700;color:var(--blanc)}
.tbmPion em{font:700 .78em/1.1 var(--titre);font-style:normal;text-transform:uppercase;letter-spacing:.05em;color:var(--orange)}
.tbmPion.hors .num{background:transparent;color:var(--orange);border:2px dashed var(--orange);box-shadow:none}
.tbmPion.vide .num{background:transparent;color:var(--texte3);border:2px dashed var(--tt2);box-shadow:none}
.tbmPion.vide>span small{color:var(--texte3)}
.tbmVue .tbmNotes{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em;margin-top:.85em;padding-top:.85em;border-top:1px solid var(--tt)}
.tbmVue .tbmNotes span{display:flex;flex-direction:column;gap:.25em;min-width:0}
.tbmVue .tbmNotes small{font:700 .78em/1 var(--titre);text-transform:uppercase;letter-spacing:.07em;color:var(--texte3)}
.tbmVue .tbmNotes b{font:800 2em/1 var(--titre);font-variant-numeric:tabular-nums;color:var(--blanc)}
.tbmVue .tbmNotes b i{font-size:.5em;font-style:normal;color:var(--texte3);margin-left:.1em}
.tbmVue .tbmNotes b.ok{color:var(--vert)}.tbmVue .tbmNotes b.ko{color:var(--orange)}
.tbmListe{flex:1 1 auto;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tbmJ{flex:1 1 0;min-height:48px;display:grid;grid-template-columns:2.7em 3.3em minmax(0,1fr) minmax(5em,34%) 2.4em;align-items:center;column-gap:.65em;border-top:1px solid var(--tt)}
.tbmJ:first-child{border-top:0}
.tbmJ.tit+.tbmJ:not(.tit){border-top:2px solid var(--tt2)}
.tbmTit{width:2.6em;height:2.6em;min-width:44px;min-height:44px;border-radius:50%;border:1px dashed var(--tt2);background:transparent;color:var(--texte3);font:800 1.1em var(--titre);cursor:pointer;padding:0}
.tbmJ.tit .tbmTit{border:0;background:var(--orange);color:#140800}
.tbmTit:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.tbmPo{display:inline-grid;place-items:center;height:1.9em;border:1px solid var(--tt2);border-radius:3px;font:800 .98em/1 var(--titre);letter-spacing:.02em;color:var(--texte);font-variant-numeric:tabular-nums}
.tbmNom{min-width:0;display:flex;flex-direction:column;gap:.15em}
.tbmNom b{font:700 1.02em/1.15 var(--lecture);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--blanc)}
.tbmNom small{font-size:.8em;color:var(--texte3)}
.tbmJ input[type=range]{width:100%;min-height:36px;margin:0;accent-color:var(--orange);touch-action:none}
.tbmMin{font:800 1.35em/1 var(--titre);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--blanc)}
.tbmJ.zero .tbmNom b,.tbmJ.zero .tbmMin,.tbmJ.zero .tbmPo{color:var(--texte3)}
.tbmPostesZone{flex:1 1 auto;display:flex;flex-direction:column}
.tbmPostes{flex:1 1 auto;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6em}
.tbmPostes li{flex:1 1 0;min-height:3.4em;display:grid;grid-template-columns:5.6em minmax(0,1fr) 4.2em;align-items:center;column-gap:.7em}
.tbmPN{display:flex;align-items:baseline;gap:.45em;min-width:0}
.tbmPN b{font:800 1.9em/1 var(--titre);color:var(--blanc)}
.tbmPN small{font:700 .78em/1.1 var(--titre);text-transform:uppercase;letter-spacing:.05em;color:var(--texte3)}
.tbmPB{position:relative;display:flex;height:min(4.2em,78%);min-height:2em;background:var(--tt);border-radius:3px;overflow:hidden}
.tbmPB i{flex:none;width:var(--w);min-width:0;display:flex;align-items:center;padding:0 .45em;background:#2c3a4a;border-right:2px solid var(--tp);font-style:normal}
.tbmPB i:first-child{background:#3d5068}
.tbmPB i span{font:700 .8em/1 var(--titre);text-transform:uppercase;letter-spacing:.03em;color:var(--blanc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbmPV{display:flex;flex-direction:column;align-items:flex-end;gap:.1em;font-variant-numeric:tabular-nums}
.tbmPV b{font:800 1.6em/1 var(--titre);color:var(--vert)}
.tbmPV small{font-size:.75em;color:var(--texte3)}
.tbmPV em{font:700 .72em/1 var(--titre);font-style:normal;text-transform:uppercase;letter-spacing:.04em}
.tbmPostes li.court .tbmPV b,.tbmPostes li.court .tbmPV em{color:var(--orange)}
/* (5/11, Mathias : « ne mets pas en rouge les minutes si j'en mets trop ») un poste trop servi n'est pas une faute : neutre */
.tbmPostes li.trop .tbmPV b{color:var(--blanc)}.tbmPostes li.trop .tbmPV em{color:var(--texte3)}

/* ---- ta feuille en bref (l'onglet Match) */
.tbmResume{display:flex;flex-direction:column;min-height:0;background:var(--tp);border:1px solid var(--tt);border-radius:4px}
.tbmResume ol{flex:1 1 auto;list-style:none;margin:0;padding:.4em .95em;display:flex;flex-direction:column}
.tbmResume li{flex:1 1 0;min-height:1.9em;display:grid;grid-template-columns:1.8em minmax(0,1fr) 3em 2.4em;align-items:center;gap:.5em;border-top:1px solid var(--tt)}
.tbmResume li:first-child{border-top:0}
.tbmResume li.tit+li:not(.tit){border-top:2px solid var(--tt2)}
.tbmResume .k{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--orange);color:#140800;font:800 .9em var(--titre)}
.tbmResume li:not(.tit) .k{background:none}
.tbmResume span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--texte)}
.tbmResume small{font:700 .85em var(--titre);color:var(--texte3);text-align:center}
.tbmResume .m{font:800 1.15em var(--titre);text-align:right;font-variant-numeric:tabular-nums;color:var(--blanc)}
.tbmResume .tbmT{align-items:center}
.tbmResume .tbmMeta{flex:1 1 auto}
.tbmLienT{flex:none;min-height:36px;padding:0 .8em;border:1px solid var(--tt2);border-radius:4px;background:transparent;color:var(--blanc);font:700 .9em var(--titre);text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.tbmLienT:hover{border-color:var(--orange)}
.tbmLienT:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* ---- le match : l'affiche, le face-à-face et le rapport remplissent leur colonne */
.tbmPan.pAffiche>.tbmCorps>.tbxAffiche,.tbmPan.pFace>.tbmCorps>.tbxFace{flex:1 1 auto;display:flex;flex-direction:column;margin:0;border-radius:4px}
.tbmPan.pAffiche .tbxCoup{flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:.5em;margin:.6em}
.tbmPan.pAffiche .tbxCompte{font-size:clamp(3.2em,9vh,6.4em)}
.tbmPan.pAffiche .tbxCamp{min-height:6em}
.tbmPan.pAffiche .tbxCampT b{font-size:1.5em}
.tbmPan.pAffiche .tbxBilans{font-size:1.1em}
/* (6/11, l'épure) le face-à-face ne s'étire plus sur toute la colonne : ses lignes serrées, en haut */
.tbmPan.pFace>.tbmCorps>.tbxFace{flex:none;justify-content:flex-start;gap:.15em;padding-bottom:.7em}
.tbmPan.pFace .tbxFF{flex:none;min-height:2.4em;font-size:1em}
.tbmPan.pRapport>.tbmCorps>*{flex:none}
.tbmPan.pRapport>.tbmCorps>.tbmResume{flex:1 1 auto}

/* ---- l'effectif : le tableau prend toute la hauteur */
.tbmPan.pEffectif>.tbmCorps{gap:0}
.tbmPan.pEffectif>.tbmCorps>[data-k^="effectif-"]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.tbmPan.pEffectif .tbxDefile{flex:1 1 auto;min-height:0}
.tbmPan.pEffectif .tbxEff{height:100%;font-size:1em}
.tbmPan.pEffectif .tbxEff tbody th b{font-size:1.08em}
.tbmPan.pEffectif .tbxPo{min-width:2.6em;text-align:center}

/* ---- le club : l'identité, le classement (ses lignes se partagent la hauteur), la ligue, ce téléphone */
.tbmPan.pIdent>.tbmCorps{justify-content:flex-start}
.tbmPan.pClassement .tbxBref{flex:1 1 auto;display:flex;flex-direction:column}
.tbmPan.pClassement .tbxBref li{flex:1 1 0;min-height:2.4em}
.tbmPan.pReglages .tbmCorps{gap:.8em}
.tbmPan.pReglages .tbxPrevenir>*,.tbmPan.pReglages .tbxTel{margin-top:0}

/* ---- la barre d'enregistrement de la feuille */
.tbmBarre{flex:none;position:sticky;bottom:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:.6em;padding:.55em 1em calc(.55em + env(safe-area-inset-bottom));background:#000;border-top:2px solid var(--orange)}
.tbmBarre span{flex:1 1 12em;font-size:.95em;color:var(--blanc)}
.tbmBarre .bt{min-height:44px}
/* ---- le classement : les stats de chaque club (5/11, « rajoute des stats », d'après Flashscore) */
.tbxClt td.tSt{color:var(--texte2,#aab4c0);font-weight:600}
.tbxClt td.tSerie{font-style:normal}
.tbxClt td.tProch{white-space:nowrap;font:700 .95em var(--titre,inherit)}
.tbxClt td.tProch small{margin-left:.3em;font:600 .78em var(--lecture,inherit);color:var(--texte3,#8a96a3)}
/* ---- le banc du direct : la note du moment de chacun et celle des deux cinq (5/11) */
.cjv{margin-left:.35em;font:800 .85em var(--titre,inherit);font-variant-numeric:tabular-nums;color:var(--texte2,#aab4c0)}
.cjNotes{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.2rem;margin:.2rem 0 .7rem;padding:.55rem .75rem;border-left:3px solid var(--orange,#ff7a1a);background:rgba(255,255,255,.03)}
.cjNotes span{font:700 .85rem var(--titre,inherit);text-transform:uppercase;letter-spacing:.05em;color:var(--texte3,#8a96a3)}
.cjNotes b{margin-left:.35em;font:800 1.35rem/1 var(--titre,inherit);font-variant-numeric:tabular-nums;color:var(--blanc,#f3f5f8)}
.cjNotes small{flex:1 1 100%;font-size:.82rem;color:var(--texte3,#8a96a3)}
/* ---- le banc du direct : qui fait les changements */
.tbmQui{margin:.2rem 0 .7rem;padding:.55rem .75rem;border-left:3px solid var(--tt2,#2a3644);font-size:.92rem;line-height:1.4}
.tbmQui.moi{border-left-color:var(--orange,#ff7a1a)}
.tbmQui .lien{min-height:44px}

/* ---- un écran plus bas que large ou étroit (un portable, un téléphone couché) : deux colonnes, la vue défile */
@media (max-width:1280px){.tbmDash.vCompo{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.tbmDash.vCompo>.tbmPan:last-child{grid-column:1/-1}.tbmDash.vCompo{grid-auto-rows:minmax(0,1fr)}}
@media (max-width:1000px),(max-height:620px){.tbmVue{overflow:auto}.tbmDash,.tbmDash.vCompo,.tbmDash.vTactique,.tbmDash.vMatch,.tbmDash.vClub{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}.tbmDash.un{grid-template-columns:minmax(0,1fr)}.tbmCorps{overflow:visible}.tbmTerrainBox{height:22em;flex:none}.tbmOpt{flex:none}.tbmGroupe{flex:none}.tbmJ{flex:none;min-height:52px}.tbmPostes li{flex:none}}
/* hors du tableau de bord (le téléphone en portrait, la page d'avant) : les panneaux s'empilent, la barre au-dessus du menu */
html:not(.tbxOn) .tbm{height:auto}
html:not(.tbxOn) .tbmVue{overflow:visible;padding:.75rem 0 1rem}
html:not(.tbxOn) .tbmOnglets{padding:0}
html:not(.tbxOn) .tbmOnglets button{flex:1 0 auto;padding:0 .9em}
html:not(.tbxOn) .tbmDash,html:not(.tbxOn) .tbmDash.vCompo,html:not(.tbxOn) .tbmDash.vTactique,html:not(.tbxOn) .tbmDash.vMatch,html:not(.tbxOn) .tbmDash.vClub{height:auto;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
html:not(.tbxOn) .tbmCorps{overflow:visible}
html:not(.tbxOn) .tbmTerrainBox{height:min(92vw,26em);flex:none}
html:not(.tbxOn) .tbmOpt,html:not(.tbxOn) .tbmGroupe,html:not(.tbxOn) .tbmPostes li{flex:none}
html:not(.tbxOn) .tbmJ{flex:none;min-height:56px}
@media (max-width:899px){html:not(.tbxOn) .tbm .tbmBarre{bottom:calc(4.4rem + env(safe-area-inset-bottom))}}
@media (max-width:520px){.tbmJ{grid-template-columns:2.7em 3em minmax(0,1fr) auto;grid-template-areas:"tit po nom min" "tit range range range"}.tbmTit{grid-area:tit}.tbmPo{grid-area:po}.tbmNom{grid-area:nom}.tbmMin{grid-area:min}.tbmJ input[type=range]{grid-area:range}.tbmPostes li{grid-template-columns:4.6em minmax(0,1fr) 3.6em}}
/* (10/11) le voile « Tourne ton téléphone » (4/11 au soir) est retiré de la ligue : au téléphone droit, elle se lit en une
   colonne (ligue-droit.css). Ses règles figeaient aussi la page debout (html et body sans défilement). */
/* (5/11, contrôle général) le classement au téléphone couché : depuis les colonnes de tm-55, la colonne des clubs (largeur
   100 %, max-width 0) s'écrasait et les noms passaient sur les chiffres ; elle garde sa place, le tableau défile sur le
   côté dans son cadre (.tbxTable). La force au moteur, comme les chiffres. */
.tbxClt tbody th{min-width:10.5em;overflow:hidden}
.tbxClt td.tFo{font-weight:800}
/* (5/11, contrôle général) les règles de Mon club sont rangées sous .tbmVue (et .tbm hors de la page d'un match) : la page
   d'un match fini emploie aussi .tbm, .tbmCol et .tbmNotes (tb-match.js) ; depuis tm-50, ses trois colonnes s'empilaient
   et ses blocs se coupaient, en 2560 comme au téléphone. */
/* (5/11) la force au moteur du classement, aussi en discret */
.tbxClt td.tFo,.tbxClt td.tFo.plus,.tbxClt td.tFo.moins{font-weight:500;color:var(--texte3,#8a96a3)}
.tbfForce b,.tbfForce b.plus,.tbfForce b.moins{font-size:1.1em !important;font-weight:600 !important;font-style:normal;color:var(--texte3,#8a96a3) !important}
/* (5/11) le triangle des stratégies */
.stTri{display:block;font-style:normal;font-size:.82em;color:var(--orange,#ff7a1a);margin-top:.25em}
.stTriNote{margin:.5em 0 0;font-size:.85em;line-height:1.4;color:var(--texte2,#aab4c0)}
/* (5/11) le code coach : le bandeau du spectateur et le code dans Mon club */
.ccx p{margin:0 0 .5rem}
.ccxRang{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.ccxRang input{flex:1 1 11rem;min-width:0;min-height:44px;padding:0 .7rem;font:700 1.05rem var(--titre,inherit);letter-spacing:.12em;text-transform:uppercase;background:#0b1118;color:#fff;border:1px solid var(--tt,#2a3644)}
.ccxRang .bt{min-height:44px}
.ccxMien{margin:.6rem 0 .2rem}
.ccxMien b{font:700 1.25rem var(--titre,inherit);letter-spacing:.14em;color:var(--orange,#ff7a1a)}
.ccxErr{margin:.2rem 0 .4rem;color:#ffb3b3;font-weight:600}
/* (6/11, l'épure) l'onglet Tactique : le plan à l'ancienne replié sous le plan choisi, l'avis de la feuille en une ligne */
.tbmPan.pPlanAncien .tbxReplie{margin-top:0;border-top:0}
.tbmPan.pPlanAncien .tbxRpC{padding-top:.3em}
.tbmPan.pPlanAncien .tbxRpR b{color:var(--orange)}
.avis.ko.court{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .6em;font-size:.9em}
.avis.ko.court .tbmLienT{margin-left:auto}
/* (6/11, l'épure) l'onglet Club : la patte et les réglages du téléphone repliés ; au téléphone couché, les panneaux
   gardent leur hauteur (le classement en bref ne s'étire plus sur la hauteur de la colonne voisine) */
.tbmPan.pIdent .tbxReplie{margin-top:.5em}
.pReglagesR .tbxRpC>*:first-child{margin-top:0}
@media (max-width:1000px),(max-height:620px){
  .tbx .tbmDash{align-items:start}
  .tbmPan.pClassement .tbxBref li{flex:none}
}
/* ---- (6/11, lisible) la Tactique et la Composition : ce qui est choisi d'un coup d'œil, un choix en une touche, les
   explications repliées ou en petit. Le bandeau en haut (sur toute la largeur) dit ce qui est choisi et ce qui reste à faire. */
.tbmDash.vTactique,.tbmDash.vCompo{grid-template-rows:auto}
.tbmBandeau{grid-column:1/-1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1.6em;padding:.55em .95em;background:var(--tp);border:1px solid var(--tt);border-radius:4px}
.tbmChoix{display:flex;flex-wrap:wrap;gap:.35em 1.8em;margin:0}
.tbmChoix>div{display:flex;flex-direction:column;gap:.2em;min-width:0}
.tbmChoix dt{font:700 max(12px,.74em)/1 var(--titre);text-transform:uppercase;letter-spacing:.08em;color:var(--texte3)}
.tbmChoix dd{margin:0;font:800 1.12em/1.1 var(--titre);text-transform:uppercase;letter-spacing:.02em;color:var(--blanc);white-space:nowrap}
.tbmChoix>div:first-child dd{color:var(--orange)}
.tbmChoix em{font:600 max(12px,.68em) var(--lecture);font-style:normal;text-transform:none;letter-spacing:0;color:var(--orange)}
.tbmBandeau>.avis{flex:1 1 22em;margin:0}
.tbmBandeau>.avis:not(.court){flex-basis:100%;padding:.45em .8em;font-size:.92em;line-height:1.4}
.tbmEtat{margin:0;flex:1 1 auto;font:600 .98em/1.3 var(--lecture);color:var(--texte)}
.tbmVue .tbmBandeau .tbmNotes{display:flex;gap:1.6em;margin:0;padding:0;border:0}
.tbmVue .tbmBandeau .tbmNotes b{font-size:1.55em}
.tbmVue .tbmNotes small{font-size:max(12px,.74em)}
/* la stratégie : trois touches, la choisie en orange ; son explication dessous (au téléphone) */
.tbmOpts{flex:none}
.tbmOpt{flex:none;min-height:44px}
.tbmOpt .stTri{font-size:max(12px,.82em)}
.tbmOpt small,.tbmPuce.carte small,.tbmPlan small{font-size:max(12px,.8em)}
.tbmStD{display:flex;flex-direction:column;gap:.35em;margin:.7em 0 0;padding:.1em 0 .1em .8em;border-left:3px solid var(--orange)}
.tbmStD span{font-size:.95em;line-height:1.4;color:var(--texte)}
.tbmStD small,.tbmStA small{font:700 max(12px,.76em)/1.3 var(--titre);text-transform:uppercase;letter-spacing:.05em;color:var(--texte3)}
.tbmStA{display:flex;flex-direction:column;gap:.25em;margin:0 0 .8em}
.tbmStA b{font:800 1em/1.1 var(--titre);text-transform:uppercase;color:var(--blanc)}
.tbmStA span{font-size:.92em;line-height:1.4;color:var(--texte2)}
/* les cartes : la choisie et ce qu'elle fait dans la ligne du groupe, les touches en dessous, en haut du panneau */
.tbmGroupe{flex:none;min-height:0;justify-content:flex-start;padding:.7em 0}
.tbmGroupe:first-child{padding-top:0}
.tbmGTete{flex-wrap:wrap;row-gap:.25em}
.tbmGX{flex:1 1 14em;min-width:0;font-size:max(12px,.88em);line-height:1.35;color:var(--texte2)}
.tbmLexT{margin:.6em 0 .3em;font:800 max(12px,.8em)/1 var(--titre);text-transform:uppercase;letter-spacing:.08em;color:var(--orange)}
.tbmLex{display:grid;gap:.3em;margin:0}
.tbmLex>div{display:grid;grid-template-columns:minmax(7.5em,32%) minmax(0,1fr);gap:.8em;align-items:baseline}
.tbmLex dt{font:700 .9em/1.2 var(--titre);text-transform:uppercase;letter-spacing:.03em;color:var(--blanc)}
.tbmLex dd{margin:0;font-size:.92em;line-height:1.35;color:var(--texte2)}
.tbmPan.pCartes .tbxReplie,.tbmPan.pStrat .tbxReplie{margin-top:.5em}
/* la composition : la ligne d'un joueur ne s'étire plus sur la hauteur ; ses touches à 44 px */
.tbmJ{flex:1 1 0;max-height:4.4em}
.tbmJ input[type=range]{min-height:44px}
.tbmLienT{min-height:44px}
.tbmNom>.tbxFiche{padding-block:12px;margin-block:-12px}
.tbmNom small,.tbmNom small .b3-ad,.tbmPion>span small,.tbmPB i span,.tbmPN small,.tbmPV small,.tbmPV em,.tbmMeta{font-size:max(12px,.8em)}
.tbmPion em{font-size:max(12px,.78em)}
/* au téléphone couché (et sur un écran bas) : le bandeau, puis la stratégie et le plan à gauche, les cartes à droite ;
   dans la Composition, la rotation sur toute la largeur (le geste), puis le terrain et les postes côte à côte */
@media (max-width:1000px),(max-height:620px){
  .tbx .tbmDash.vTactique{grid-template-areas:"b b" "s c" "p c";align-items:start}
  .tbmDash.vTactique>.tbmBandeau{grid-area:b}
  .tbmDash.vTactique>.pStrat{grid-area:s}
  .tbmDash.vTactique>.pCartes{grid-area:c}
  .tbmDash.vTactique>.pPlanAncien{grid-area:p}
  .tbmOpt{flex-direction:row;align-items:center;justify-content:space-between;gap:.3em .8em;flex-wrap:wrap;padding:.5em .8em}
  .tbmOpt b{font-size:1.15em}
  .tbmOpt .stTri{margin:0;text-align:right}
  .tbmPuces{grid-template-columns:repeat(auto-fill,minmax(7.4em,1fr))}
  .tbmPuce.carte{min-height:44px;padding:.4em .6em}
  .tbmPlan small{white-space:normal}
  .tbx .tbmDash.vCompo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"b b" "r r" "t po";align-items:start}
  .tbmDash.vCompo>.tbmBandeau{grid-area:b}
  .tbmDash.vCompo>.pRotation{grid-area:r}
  .tbmDash.vCompo>.pTerrain{grid-area:t}
  .tbmDash.vCompo>.pPostes{grid-area:po}
  .tbmDash.vCompo>.tbmPan:last-child{grid-column:auto}
  .tbmTerrainBox{height:17em}
  .tbmJ{max-height:none}
}
/* un iPad debout (une seule colonne, ligue-ipad.css) : le bandeau, la rotation, le terrain, les postes l'un sous l'autre */
@media (pointer:coarse) and (orientation:portrait) and (min-width:700px) and (max-width:1000px){
  .tbx .tbmVue .tbmDash.vCompo{grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "r" "t" "po"}
}
/* l'avis court dans le bandeau : la touche « La reposer » à droite, le texte autour (une ou deux lignes) */
.tbmBandeau>.avis.court{display:block;padding:.4em .8em;line-height:1.35}
.tbmBandeau>.avis.court::after{content:"";display:block;clear:both}
.tbmBandeau>.avis.court .tbmLienT{float:right;margin:-.1em 0 0 .9em}
.tbmLienT{font-size:max(12px,.9em)}
.tbmVue .stTriNote{font-size:max(12px,.85em)}
.tbmVue .tbmNotes b i{font-size:max(12px,.5em)}
.tbmNom>.tbxFiche{padding-block:13px;margin-block:-13px}
@media (max-width:1000px),(max-height:620px){
  .tbx .tbmDash.vTactique{grid-template-rows:auto auto 1fr}
}
/* la Composition : les trois chiffres d'abord, l'état de la feuille à côté, sur la même ligne */
.tbmBandeau>#fmNotes{order:-1;flex:none}
.tbmBandeau>.tbmEtat{flex:1 1 14em;font-size:.92em;color:var(--texte2)}
.tbmEtat{text-wrap:balance}
/* sur grand écran, chaque panneau de la Tactique prend la hauteur de son contenu (plus de grands vides dans des cadres
   étirés) ; les postes de la Composition ne s'étirent plus */
.tbmDash.vTactique{align-items:start}
.tbmDash.vTactique>.tbmPan{max-height:100%}
.tbmPostes{justify-content:flex-start}
.tbmPostes li{max-height:5.2em}
/* (6/11) le déménagement vers tempsmort.altilink.eu */
.avis.demenage{border-left-color:#3ddc97}
.avis.demenage p{margin:0 0 .5rem}
.avis.demenage .bt{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.avis.demenage .lien{min-height:44px}