/* ══════════════════════════════════════════════════════════════════
   style.css — L'APPARENCE DE CORRIGER LE TIR 2.0, DÉFINIE UNE FOIS.

   Partagée par la page des statistiques et par la fiche de match.
   Recopier ces règles dans une deuxième page garantirait qu'elles
   divergent : même règle que pour les colonnes et pour la base.
   ══════════════════════════════════════════════════════════════════ */

  :root{
    --bg:#ffffff; --pan:#f2f4f8; --pan2:#e4e9f2; --bord:#c8d0de;
    --t1:#12192a; --t2:#4a5670; --t3:#7b869b; --accent:#c1272d; --hi:#fdf6d8;
    /* LE BLEU ET LE ROUGE DE CORRIGER LE TIR — repris tels quels de l'original.
       Le bleu dit « au-dessus », le rouge « en dessous ». Ils reviennent dans
       l'effectif, la valeur des joueurs, les cartes de tirs et les barres :
       définis ici une fois, jamais recopiés en dur ailleurs. */
    --pos:#2d6fd0; --neg:#c92a3a;
  }
  html[data-theme="dark"]{
    --bg:#0f1623; --pan:#182036; --pan2:#1f2b45; --bord:#2c3a58;
    --t1:#eef2fc; --t2:#9aabcd; --t3:#66738f; --accent:#ff5a63; --hi:#22304d;
    --pos:#4088f0; --neg:#d6293a;    /* les mêmes, éclaircis pour le fond sombre */
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--t1);overflow:hidden;
       font:13px/1.4 -apple-system,"Segoe UI",system-ui,sans-serif;
       display:flex;flex-direction:column}

  header{padding:7px 12px;border-bottom:1px solid var(--bord);background:var(--pan);
         display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
  h1{margin:0;font-size:15px;font-weight:700;letter-spacing:-.2px;cursor:pointer}
  h1 b{color:var(--accent)}
  .sub{color:var(--t3);font-size:11px}
  .right{margin-left:auto;display:flex;gap:5px;align-items:center}

  button,select,input{font:inherit;background:var(--bg);color:var(--t1);
        border:1px solid var(--bord);border-radius:4px;padding:3px 7px}
  button{cursor:pointer;background:var(--pan)}
  button:hover{border-color:var(--t2)}
  button.on{background:var(--accent);border-color:var(--accent);color:#fff}
  button:disabled,select:disabled{opacity:.45;cursor:default}
  .fld{display:flex;flex-direction:column;gap:2px}
  .fld > span{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--t3)}
  .row{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap}
  .seg{display:flex}
  .seg button[disabled]{opacity:.38;cursor:not-allowed}
  .seg button{border-radius:0;margin-left:-1px}
  .seg button:first-child{border-radius:4px 0 0 4px;margin-left:0}
  .seg button:last-child{border-radius:0 4px 4px 0}

  .bar{flex:none;border-bottom:1px solid var(--bord);background:var(--pan);
       padding:7px 12px;display:flex;flex-direction:column;gap:6px}

  /* bandeau du joueur : n'apparaît que dans sa vue */
  #who{flex:none;display:none;align-items:center;gap:12px;flex-wrap:wrap;
       padding:6px 12px;border-bottom:1px solid var(--bord);background:var(--pan2)}
  body.player #who{display:flex}
  #who h2{margin:0;font-size:15px}
  #who .meta{color:var(--t3);font-size:11px}

  #status{flex:none;padding:3px 12px;font-size:11px;color:var(--t3);
          border-bottom:1px solid var(--bord);background:var(--bg);
          display:flex;align-items:center;gap:12px}
  .pager{display:flex;align-items:center;gap:5px;margin-left:auto}
  .pager button{padding:1px 8px;font-size:11px}
  .pager select{padding:1px 4px;font-size:11px}
  body.player .pager{display:none}

  .wrap{flex:1;overflow:auto;min-height:0}

  /* LA BARRE DE DEFILEMENT HORIZONTALE RESTE VISIBLE, A TOUTE LARGEUR.

     Ces trois lignes n'existaient que dans le bloc `max-width:760px`. Au
     dessus de 760 px on retombait sur la barre du systeme, qui s'efface
     toute seule sur Windows et sur macOS. Felix l'a decrit exactement :
     « quand je reduis la taille de mon ecran la barre qui est en bas
     disparait, donc si tes la dessus tu peux pas bouger gauche a droite a
     part avec les fleches de clavier mais faut vraiment que tu le saches ».

     Un tableau de cinquante colonnes ne se lit QUE lateralement : rien ne
     doit laisser croire qu'il s'arrete au bord de l'ecran. */
  .wrap{scrollbar-width:thin}
  .wrap::-webkit-scrollbar{height:8px;-webkit-appearance:none}
  .wrap::-webkit-scrollbar-thumb{background:var(--t3);border-radius:4px}
  .wrap::-webkit-scrollbar-track{background:transparent}

  /* ══════════════════════════════════════════════════════════════
     SUR TELEPHONE, TOUT DEFILE ENSEMBLE.

     LE PROBLEME, dans les mots de Felix : « les menus qui permettent de
     faire des choix prennent plus que 50% de l'ecran. Si l'ecran est plus
     petit on ne verra pas le tableau du bas. »

     LA CAUSE. Sur ordinateur, la page ne defile PAS : `body` est en
     `overflow:hidden`, la barre de filtres est en `flex:none` (hauteur
     fixe, toujours visible) et c'est `.wrap` qui defile tout seul sous
     elle. C'est excellent sur un grand ecran — les filtres restent sous la
     main pendant qu'on parcourt mille lignes. Sur un telephone, la meme
     regle vole la moitie de l'ecran en permanence, et le tableau n'a plus
     de place pour exister.

     LE CORRECTIF, sous 760 px SEULEMENT : on rend la page entiere
     defilante et on remet la barre dans le flux. On glisse vers le bas,
     les filtres montent et sortent, le tableau prend tout l'ecran. On
     remonte, ils reviennent.

     TROIS DETAILS QUI COMPTENT :
       · `thead th` perd son `position:sticky` vertical — un en-tete colle
         au haut d'un conteneur qui ne defile plus resterait fige au milieu
         de la page. La colonne des noms (`.stick`) garde son collage
         HORIZONTAL, lui : c'est ce qui permet de savoir de qui on lit les
         chiffres quand on glisse vers la droite.
       · `.wrap` garde `overflow-x:auto` : le tableau a cinquante colonnes
         doit toujours defiler lateralement, c'est le seul moyen de le lire.
       · la barre de defilement horizontale reste VISIBLE, sinon rien
         n'indique qu'on peut glisser.

     LE BUREAU NE BOUGE PAS D'UN PIXEL : tout est sous media query.
     ══════════════════════════════════════════════════════════════ */
  @media (max-width:760px){
    html,body{height:auto}
    body{overflow:visible}
    .wrap{flex:none;overflow-x:auto;overflow-y:visible;min-height:0;
          scrollbar-width:thin}
    .wrap::-webkit-scrollbar{height:6px;-webkit-appearance:none}
    .wrap::-webkit-scrollbar-thumb{background:var(--t3);border-radius:3px}
    thead th{position:static}
    thead tr.grp + tr th{top:auto}
    th.stick,td.stick{position:sticky;left:0}
  }

  /* ══════════════════════════════════════════════════════════════
     SOUS 760 px, MAIS AVEC UNE SOURIS : le tableau retrouve son cadre.

     LE BLOC AU-DESSUS EST FAIT POUR LE DOIGT. Toute la page defile
     ensemble, le tableau prend sa hauteur entiere — 2 402 px sur les
     patineurs — et sa barre horizontale se retrouve tout en bas, sous
     l'ecran. Sur un telephone ca ne se voit pas : on fait glisser le
     tableau au doigt, la barre ne sert a rien.

     SUR UN ORDINATEUR DONT ON RETRECIT LA FENETRE, c'est un piege.
     Felix l'a decrit le 19 septembre 2026 : « a partir d'une certaine
     largeur elle disparait, donc si t'es la dessus tu peux pas bouger
     gauche a droite a part avec les fleches de clavier mais faut
     vraiment que tu le saches ». Sans barre et sans doigt, il ne reste
     rien.

     `not (pointer:coarse)` : TOUT SAUF UN ECRAN TACTILE. Un telephone
     rapporte `coarse` et n'est jamais touche par ce bloc. Un navigateur
     trop ancien pour cette requete l'ignore et garde le comportement
     d'avant : aucune regression possible.

     PAS `pointer:fine`, qu'on avait d'abord ecrit. Le 21 septembre 2026,
     le bogue est « revenu » chez Felix sans qu'une ligne ait change : son
     navigateur, sur son ordinateur, rapporte `pointer:none` — ni fin ni
     grossier. La regle ne s'appliquait donc plus, et la barre retombait
     sous l'ecran. Demander « est-ce un doigt ? » plutot que « est-ce une
     souris ? » couvre tout ordinateur, quoi qu'il declare.

     `:has(.wrap)` LIMITE LA PORTEE AUX PAGES DE TABLEAUX, et c'est
     indispensable. `style.css` sert aussi aux fiches, qui utilisent
     `.page` et NON `.wrap`, et dont la mise en page sous 760 px a ete
     corrigee la veille : leur rendre `height:100%` et `overflow:hidden`
     recasserait exactement le defaut qu'on venait de reparer — la
     moitie basse de la fiche restee vide.
     ══════════════════════════════════════════════════════════════ */
  @media (max-width:760px) and (not (pointer:coarse)){
    html:has(.wrap),body:has(.wrap){height:100%}
    body:has(.wrap){overflow:hidden}
    body:has(.wrap) .wrap{flex:1;overflow:auto;min-height:0}
    /* L'en-tete recolle, comme sur un grand ecran : sans lui on perd de
       vue le nom des colonnes des la troisieme ligne. */
    body:has(.wrap) thead th{position:sticky;top:0}
    body:has(.wrap) thead tr.grp + tr th{top:22px}
  }
  /* table-layout:fixed est essentiel : sans lui le navigateur mesure chaque
     cellule et une table de 50 colonnes fige l'onglet au défilement. */
  table{border-collapse:separate;border-spacing:0;table-layout:fixed;
        font-variant-numeric:tabular-nums;font-size:12px}
  th,td{padding:3px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        border-bottom:1px solid var(--bord)}
  .r{text-align:right} .l{text-align:left}
  thead th{position:sticky;top:0;z-index:3;background:var(--pan2);cursor:pointer;
        font-size:10px;font-weight:600;color:var(--t2);
        border-bottom:2px solid var(--bord);user-select:none}
  thead th:hover{color:var(--t1);background:var(--hi)}
  thead tr.grp th{top:0;cursor:default;font-size:10px;letter-spacing:.04em;
        color:var(--t1);background:var(--pan);border-bottom:1px solid var(--bord);
        border-left:1px solid var(--bord)}
  thead tr.grp th:first-child{border-left:0}
  thead tr.grp + tr th{top:22px}
  th.stick,td.stick{position:sticky;left:0;z-index:2;background:var(--bg);
        border-right:1px solid var(--bord)}
  thead th.stick{z-index:4;background:var(--pan2)}
  tbody tr:nth-child(even) td{background:var(--pan)}
  tbody tr:hover td{background:var(--hi)}
  /* `.lnk` habille aussi bien un <span> (joueur, equipe) qu'un vrai <a>
     (la date d'un journal, qui mene a la fiche du match). D'ou le
     `text-decoration:none` : sans lui le lien serait souligne en
     permanence, contrairement aux autres. */
  .lnk{color:var(--t1);cursor:pointer;font-weight:600;text-decoration:none}
  .lnk:hover{color:var(--accent);text-decoration:underline}
  .dim{color:var(--t3)}
  /* Pas de vert ni de rouge : à 50 colonnes ça devient un sapin de Noël. */

  /* ── FICHE DE MATCH ───────────────────────────────────────────── */
  #mt{display:none;border-bottom:1px solid var(--bord);background:var(--pan)}
  body.match #mt{display:block}
  body.match #ctl-saison,body.match #ctl-partie,body.match #ctl-dates{display:none}
  #mt-int{display:flex;align-items:center;gap:22px;padding:10px 14px;flex-wrap:wrap}
  #mt-retour{background:var(--pan2);border:1px solid var(--bord);border-radius:7px;
             color:var(--t1);padding:5px 11px;font:600 12px/1 inherit;cursor:pointer}
  #mt-retour:hover{border-color:var(--accent);color:var(--accent)}
  .mt-eq{display:flex;align-items:center;gap:9px}
  .mt-eq img{width:26px;height:26px;object-fit:contain}
  /* Même traitement que les abrégés de la bande de matchs et que les
     onglets : c'est la seule chose qui faisait paraître l'en-tête d'un match
     étranger au reste du site. Et le pointage quitte la police à chasse fixe
     — c'était la dernière deuxième écriture du projet. */
  .mt-eq b{font:800 15px/1 -apple-system,"Segoe UI",system-ui,sans-serif;
           letter-spacing:.07em;text-transform:uppercase}
  .mt-sc{font:800 22px/1 -apple-system,"Segoe UI",system-ui,sans-serif;
         font-variant-numeric:tabular-nums}
  .mt-vs{color:var(--t3);font-size:12px}
  .mt-fin{color:var(--accent);font-weight:700;font-size:11px;letter-spacing:.06em}
  .mt-date{color:var(--t3);font-size:12px}
  .mt-per{margin-left:auto;display:flex;align-items:center;gap:5px}
  .mt-per span{color:var(--t3);font-size:11px;text-transform:uppercase;
               letter-spacing:.05em;margin-right:3px}
  .mt-per button{background:var(--pan2);border:1px solid var(--bord);border-radius:6px;
                 color:var(--t2);padding:4px 9px;font:600 11.5px/1 inherit;cursor:pointer}
  .mt-per button.on{background:var(--accent);border-color:var(--accent);color:#fff}
  /* les buts, en une ligne qui défile */
  #mt-buts{display:flex;gap:0;overflow-x:auto;border-top:1px solid var(--bord)}
  .but{flex:0 0 auto;padding:6px 12px;border-right:1px solid var(--bord);
       font-size:11.5px;line-height:1.35;white-space:nowrap}
  .but b{font-weight:600}
  .but i{font-style:normal;color:var(--t3)}
  /* la carte de tirs */
  #tirs{display:none;padding:10px 14px;border-bottom:1px solid var(--bord);
        background:var(--pan)}
  body.match.avec-tirs #tirs{display:block}
  #tirs svg{width:100%;max-width:760px;height:auto;display:block;margin:0 auto}
  .rink{fill:var(--bg);stroke:var(--bord);stroke-width:1}
  .rink-l{stroke:var(--bord);stroke-width:.8;fill:none}
  .rink-r{stroke:#c9455288;stroke-width:.8;fill:none}
  .tir{stroke:#fff6;stroke-width:.5}
  .tir-but{stroke:#000a;stroke-width:1.1}
  #tirs-leg{display:flex;gap:16px;justify-content:center;margin-top:6px;
            font-size:11px;color:var(--t3)}
  #tirs-leg i{font-style:normal;display:inline-block;width:9px;height:9px;
              border-radius:50%;margin-right:5px;vertical-align:-1px}

/* Le bouton vers la fiche complète, au bout de la barre du joueur. */
#fiche{margin-left:auto;background:var(--pan2);border:1px solid var(--bord);
       border-radius:6px;color:var(--t1);padding:5px 11px;
       font:600 11.5px/1 inherit;cursor:pointer}
#fiche:hover{border-color:var(--accent);color:var(--accent)}

/* `hidden` doit gagner sur `display:flex` : sans ça, les onglets du
   joueur restaient visibles sur le journal d'une équipe. */
[hidden]{display:none !important}

/* Les largeurs sur écran étroit ne sont PAS ici. Avec `table-layout:fixed`
   la largeur vient du <col> et le navigateur ignore `max-width` sur la
   cellule — les règles qui se trouvaient ici n'avaient aucun effet. Le
   resserrement se fait dans `colonnes.js`, fonction `largeur()`. La
   troncature avec les points de suspension, elle, vient bien d'ici : voir
   `th,td{overflow:hidden;text-overflow:ellipsis}` plus haut. */

/* Le bandeau de cette page ne porte plus le logo ni « Home » : ils sont dans
   la barre commune au-dessus. Il ne reste que le sélecteur de vue, poussé à
   droite. */
header .sub{margin-right:auto}

/* Le logo aux couleurs de CLT : « le tir » en cramoisi, comme à l'accueil.
   Et un bouton pour revenir à la page d'entrée. */
header h1 b{color:var(--accent)}
.accueil{display:inline-flex;align-items:center;border:1px solid var(--bord);
         border-radius:6px;background:var(--pan2);color:var(--t1);
         text-decoration:none;font:600 11.5px/1 inherit;padding:6px 11px;
         margin-right:10px;flex:none}
.accueil:hover{border-color:var(--accent);color:var(--accent)}