/*
  fiches.css — L'habillage des fiches de joueur et d'équipe.

  REPRODUIT CELUI DE CORRIGER LE TIR. Les mesures, les tailles et les couleurs
  viennent du site en ligne, pas d'un choix nouveau : ces fiches doivent être
  les MÊMES, pas des cousines.

  LA LIGNE DE MESURE (`.sr`) est la brique de tout. Trois parties côte à côte :

      LIBELLÉ EN PETITES MAJUSCULES  ·  la valeur  ·  [ la barre        rang ]

  Le rang vit DANS la barre, à droite, en blanc sur la couleur. C'est ce qui
  rend la lecture instantanée : l'œil suit la longueur, pas le chiffre.
*/

/* ── L'EN-TÊTE D'UNE CARTE, REPRIS DE CORRIGER LE TIR ────────────
   L'équipe reçoit un ENCADRÉ : coins arrondis, filet, et un dégradé
   bleu-gris qui la détache de la page (son `.thdr`). Son nom porte la
   couleur du club. Le joueur reçoit sa photo dans un carré arrondi de
   96 px cerclé de cette même couleur (son `.phs`) — pas un rond.
   Ce sont ses mesures, relevées dans sa feuille de style. */
.fiche{flex:none;display:flex;align-items:flex-start;gap:18px;
       padding:36px 20px 14px;background:transparent;gap:20px}
/* SUR LA CARTE D'ÉQUIPE, PAS DE MARGE AU-DESSUS. Chez lui, la bulle EST le
   bloc d'en-tête (`.thdr`, marge intérieure 16x18) : rien ne s'ajoute
   au-dessus d'elle. Sur la carte de joueur au contraire, `.phdr` pose 20 px
   avant la photo. D'où deux réglages différents pour deux structures
   différentes — mesuré : sa bulle commence 47 px sous le bandeau, la photo
   d'un joueur 67 px. */
.fiche.eq{align-items:flex-start;padding-top:16px;padding-bottom:18px}
/* L'encadré lui-même : posé autour du contenu, pas autour de la barre. */
.fbox{flex:1;display:flex;align-items:flex-start;gap:20px;min-width:0;
      padding:16px 18px;border-radius:14px;border:1px solid #b0bdd4;
      background:linear-gradient(165deg,#c2cedf 0%,#d0dbea 50%,#dde6f2 100%)}
html[data-theme="dark"] .fbox{border-color:#2c3a58;
      background:linear-gradient(165deg,#1a2338 0%,#1d2740 50%,#222e4c 100%)}
.fbox img.logo{width:64px;height:64px;object-fit:contain;flex:none;
       filter:drop-shadow(0 1px 3px rgba(15,30,55,.22))}
.fiche img{display:block}
.mugc{flex:none;width:96px;height:96px;border-radius:12px;padding:0;
      border:2px solid #d6dfef;background:#fff;overflow:hidden}
.mugc img{width:100%;height:100%;object-fit:cover}
.fid{min-width:0;flex:1}
.fiche h1{margin:0;font:600 32px/1.08 inherit;letter-spacing:-.025em}
.fiche .sous{color:var(--t2);margin-top:6px;display:flex;flex-wrap:wrap;
       align-items:center;gap:0 14px;font:400 13px/1.4 inherit}
.fiche .sous span{display:inline-flex;align-items:center;gap:6px}
.fiche .sous .fel{width:17px;height:17px;object-fit:contain}
.fiche .sous .fsep{color:var(--t3)}
.fiche .droite{margin-left:auto;display:flex;align-items:center;gap:10px;
       align-self:center}
/* LE CHOIX DE SAISON EST UNE PASTILLE, comme celles du bandeau. Il gardait
   l'aspect brut d'un `select` — 27 px de haut, coins à 4 px, graisse 400 —
   à un centimètre de commandes de 40 px aux coins à 10 px. Trois écarts
   visibles d'un coup d'œil, sur le seul élément que l'oeil compare
   naturellement avec le haut de la page.
   Ce sont exactement les mesures de `.clt-sel` et de `.clt-saison select` :
   le sélecteur ne change donc pas d'aspect en montant dans le bandeau sur
   écran étroit — il ne fait que changer de place. */
.fiche .droite select{background-color:#edf2fb;border:1px solid #d6dfef;
       color:#1a2740;padding:8px 32px 8px 12px;border-radius:10px;
       min-height:40px;min-width:110px;
       font:500 13px/1.2 -apple-system,"Segoe UI",system-ui,sans-serif;
       -webkit-appearance:none;appearance:none;cursor:pointer;
       background-repeat:no-repeat;background-position:right 10px center;
       background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7fa1' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.fiche .droite select:hover{background-color:#e3ebf8}
/* ATTENTION — CE BLOC NE DÉCIDE NI DE LA PHOTO NI DU NOM. La section
   « Le nom, en grand », plus bas dans ce fichier, redéfinit `.mugc`,
   `.fiche h1` et leur version téléphone SANS media query pour les deux
   premières : à spécificité égale, c'est la dernière écrite qui gagne.
   Régler la taille ici ne fait donc rien du tout — j'y ai perdu un essai.
   Tout ce qui touche la photo et le nom se règle dans ce bloc-là. */
@media(max-width:640px){
  .fiche{padding:16px 14px 14px;gap:14px}
  .fbox{padding:12px 14px;gap:13px}
  .fiche .sous{font-size:12px;gap:2px 11px;margin-top:6px}
}

/* ── LA BARRE D'ONGLETS ────────────────────────────────────────────
   ELLE ÉTAIT UN BLOC GRIS. Un aplat `--pan2` sur toute la largeur pesait
   plus lourd que la fiche qu'il annonçait, et ce gris n'existe nulle part
   ailleurs dans l'en-tête du site.

   Elle est maintenant ENCADRÉE plutôt que remplie : deux filets, dessus et
   dessous, dans le bleu de la barre de menu de CLT (`.clt-nav` :
   filet #d6dfef, texte #425b84) — le milieu reste blanc. Les couleurs sont
   écrites en dur EXPRÈS : elles ne valent que par leur accord avec cette
   barre-là, qui les porte elle aussi en dur dans `entete.css`. Les changer
   ici sans les changer là ferait diverger les deux.

   L'écriture passe de 11,5 à 13,5 px : c'est le sommaire de la fiche, il se
   lit d'un coup d'œil et non à la loupe. */
.ong{flex:none;display:flex;gap:2px;padding:0 20px;overflow-x:auto;
     background:var(--bg);
     border-top:2px solid #d6dfef;border-bottom:2px solid #d6dfef}
.ong button{background:none;border:0;border-bottom:3px solid transparent;
     padding:12px 15px;font:800 13.5px/1 inherit;letter-spacing:.05em;
     text-transform:uppercase;color:#425b84;cursor:pointer;white-space:nowrap}
.ong button:hover{color:#1a2740}
.ong button.on{color:#1a2740;border-bottom-color:var(--accent)}
@media(max-width:640px){
  .ong{padding:0 12px}
  .ong button{padding:10px 10px;font-size:12px}
}

/* LA PLACE DE LA BARRE DE DÉFILEMENT EST RÉSERVÉE. Sans ça, dessiner le
   premier nuage allongeait la page, la barre apparaissait, et le second
   canvas se retrouvait mesuré 8 px plus étroit que le premier — deux
   graphiques censés être identiques, dont un légèrement comprimé.
   `entete.css` fait déjà ça pour `html` ; ici c'est `.page` qui défile. */
.page{flex:1;overflow:auto;min-height:0;padding:16px 20px 40px;
      scrollbar-gutter:stable}

/* ══════════════════════════════════════════════════════════════════════
   SOUS 760 PX, `.page` NE DOIT PLUS ETRE LE CONTENEUR QUI DEFILE.
   Bogue trouve par Felix le 18 septembre : en reduisant la fenetre, la
   fiche d'une equipe, celle d'un joueur, le glossaire et les cartes
   affichaient leur en-tete puis PLUS RIEN — le contenu ecrase dans un
   centimetre avec sa propre barre de defilement, et le bas de l'ecran vide.

   LA CAUSE etait dans `style.css`, ecrite pour la page des TABLEAUX :
       @media (max-width:760px){ html,body{height:auto} body{overflow:visible} }
   Elle s'applique a toutes les pages. Or `.page` a `flex:1`, donc une base de
   zero : dans un conteneur dont la hauteur devient `auto`, il n'y a plus
   d'espace libre a distribuer et `.page` recoit ZERO hauteur. Son
   `overflow:auto` fabriquait alors la petite barre, et le `body` ne faisait
   plus que la hauteur de ses enfants rigides — d'ou le vide en dessous.

   Les tableaux et l'accueil y echappaient : ils ne chargent pas ce fichier,
   donc leur `.page` n'a pas de `flex:1`.

   Ici on rend simplement `.page` a sa nature de bloc : il grandit avec son
   contenu et c'est le document qui defile, exactement ce que `style.css`
   avait deja prevu pour le body.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .page{flex:none;overflow:visible;min-height:0;scrollbar-gutter:auto}
}

/* ── la ligne de mesure ─────────────────────────────────────────── */
.sr{display:flex;align-items:center;padding:4px 0;font-size:13px}
.sl{width:270px;min-width:180px;color:var(--t2);text-transform:uppercase;
    font-size:10.5px;font-weight:500;letter-spacing:.5px}
.sv{width:78px;text-align:right;font-weight:600;font-size:12px;
    padding-right:10px;font-variant-numeric:tabular-nums}
.wp{color:var(--pos)} .wn{color:var(--neg)}
.sbc{flex:1;height:21px;background:var(--pan2);border:1px solid var(--bord);
     border-radius:4px;position:relative;overflow:hidden}
.sb{height:100%;border-radius:3px;min-width:2px;transition:width .5s ease}
.sp{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    font-size:10.5px;font-weight:700;color:var(--t1);
    font-variant-numeric:tabular-nums}

/* ── les sections ───────────────────────────────────────────────── */
/* UNE SECTION N'EST PAS UN PANNEAU. Corriger le tir pose un titre souligné
   puis ses lignes, à même la page — rien d'autre (`.ssec{margin-bottom:24px}`).
   Enfermer chaque section dans un cadre gris découpait la fiche en blocs qui
   se disputaient l'attention ; sans eux, l'œil descend d'un titre à l'autre. */
.ssec{margin-bottom:26px}
/* LES MESURES DE CORRIGER LE TIR, REPRISES : titre de section à 15 px,
   gras, en majuscules, souligné d'un trait de 2 px ; le sous-titre à 13 px
   en gris. Ce n'est pas un choix nouveau — ce sont les valeurs de l'ancien
   site, qui aérait mieux ses fiches que ne le faisait la 2.0. */
.sst{font:700 15px/1.2 -apple-system,"Segoe UI",system-ui,sans-serif;
     letter-spacing:.5px;text-transform:uppercase;color:var(--t1);
     padding:6px 0;margin-bottom:8px;border-bottom:2px solid var(--bord);
     display:flex;justify-content:space-between;align-items:baseline}
.sst .rk{font:600 10px/1 inherit;letter-spacing:.06em;text-transform:uppercase;
     color:var(--t3)}
/* Un mot de liaison DANS un titre de section. Les titres sont en majuscules,
   mais « 2025-26 (82 GP FOR MTL) » met la même emphase sur « FOR » que sur
   l'équipe. En minuscules, l'oeil saute par-dessus, ce qu'on veut. */
.sst .lc{text-transform:lowercase}

/* ── la carte de contribution ───────────────────────────────────── */

/* Trois colonnes, pas six : à 210 px le libellé d'une mesure se casse en
   trois lignes et la carte devient illisible. L'ancien site tenait ses
   libellés sur une ou deux lignes — c'est ça qu'on cherche. */


/* Dans une carte de contribution, les colonnes sont étroites : le libellé
   doit rétrécir, sinon la barre disparaît. */



/* `.dnote` — L'ENCADRÉ GRIS DE BAS DE PAGE, RETIRÉ PARTOUT.
   Chaque onglet finissait par un pavé gris qui expliquait ce qu'on venait de
   regarder. Personne ne lit une explication APRÈS s'être fait sa propre idée
   des chiffres. Toutes ces notes sont remontées sous le titre de leur
   section, en `.leg`, sur le modèle de l'onglet Impact : même couleur, même
   taille, brèves, et lues AVANT les chiffres.
   La règle est supprimée volontairement — si une note réapparaît un jour en
   bas d'un onglet, elle doit être un `.leg` en haut. */

/* ── les tableaux de fiche ──────────────────────────────────────── */
.ptw{overflow-x:auto}
/* LARGEUR NATURELLE, PAS FIXE. `style.css` impose `table-layout:fixed` à
   toutes les tables — indispensable pour le grand tableau de statistiques,
   qui a des centaines de colonnes et que le navigateur ne doit pas mesurer
   une à une. Mais sous ce mode, une colonne SANS largeur déclarée reçoit
   exactement la même part que les autres : le rang était donc aussi large
   que « Wins cont. », d'où le trou entre lui et le nom.
   Les tables de fiche sont petites : elles peuvent se mesurer. */
table.pt{width:100%;table-layout:auto;border-collapse:separate;
         border-spacing:0;font-size:12px;font-variant-numeric:tabular-nums}
table.pt th{font-size:10px;font-weight:600;color:var(--t2);text-align:left;
            padding:5px 8px;border-bottom:2px solid var(--bord);white-space:nowrap}
table.pt th.nm,table.pt td.nm{text-align:right}
table.pt td{padding:4px 8px;border-bottom:1px solid var(--bord);white-space:nowrap}
table.pt tbody tr:hover td{background:var(--hi)}
table.pt td.ck{cursor:pointer;font-weight:600}
table.pt td.ck:hover{color:var(--accent)}
.stitle{font:700 13px/1.2 -apple-system,"Segoe UI",system-ui,sans-serif;
        letter-spacing:1.8px;text-transform:uppercase;color:var(--t3);
        margin:20px 0 14px;
        padding-bottom:8px;border-bottom:1px solid var(--bord)}

/* ── profondeur, cartes de tirs ─────────────────────────────────── */
.dtt{font:600 11px/1 inherit;letter-spacing:.06em;text-transform:uppercase;
     color:var(--t2);margin:12px 0 7px}
.dps{display:flex;flex-wrap:wrap;gap:6px}
.dch{display:inline-flex;align-items:center;gap:7px;background:var(--pan2);
     border:1px solid var(--bord);border-radius:15px;padding:5px 11px;
     font-size:12px;cursor:pointer}
.dch:hover{border-color:var(--accent)}
.dch .dw{font-variant-numeric:tabular-nums;color:var(--pos);font-weight:600}
.dch .dw.neg{color:var(--neg)}

.smbox{margin-bottom:26px}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:18px}

/* ── LES CARTES DE TIRS D'UNE ÉQUIPE ───────────────────────────────
   DEUX COLONNES FIXES, toujours : attaque à gauche, défense à droite, sous
   un titre qui dit de quel régime de jeu il s'agit. C'est la disposition de
   Corriger le tir 1.0. Une grille `auto-fit` mettait les quatre cartes en
   ligne, en carré ou en colonne selon la largeur de la fenêtre — et à deux
   colonnes elle pouvait poser l'attaque à forces égales à côté de l'attaque
   en avantage numérique, deux choses qui ne se comparent pas.
   Sous 560 px on retombe à une colonne : deux patinoires côte à côte sur un
   téléphone ne se lisent plus. */
/* ELLES PRENNENT TOUTE LA LARGEUR, SANS PLAFOND.
   MESURÉ sur corrigerletir.com dans une fenêtre de 2552 px : ses patinoires
   d'équipe y font 1135 px CHACUNE. Le `max-width:580px` que j'avais relevé
   dans sa feuille de style ne s'applique qu'à sa classe `.rink`, que les
   cartes d'équipe n'utilisent pas — les siennes n'ont pour tout style qu'un
   `width:100%`. Un plafond à 1240 px laissait donc, sur un écran large,
   exactement le blanc dont il fallait se débarrasser.
   Les patinoires du JOUEUR passent par la même grille, pour la même raison. */
.tmaps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px}
.tmapt{font:500 12px/1.2 inherit;color:var(--t2);text-align:center;
       margin-bottom:5px}
.sst.sst2{margin-top:22px}
/* La légende des couleurs : celle de 1.0, plus petite et plus serrée que la
   note d'une section, parce qu'elle se lit d'un coup et se relit peu. */
.leghm{font-size:10.5px;margin:4px 0 10px}
@media(max-width:560px){ .tmaps{grid-template-columns:1fr} }
.carte h3{margin:0 0 6px;font:600 12px/1 inherit;color:var(--t2)}
.leg{color:var(--t3);font-size:11.5px;margin-bottom:12px;line-height:1.6}
.vide{color:var(--t3);font-size:12.5px;padding:24px;text-align:center}

@media (max-width:700px){
  .sl{width:150px;min-width:110px;font-size:9.5px}
  .sv{width:58px;font-size:11px}
  
}

/* ══════════════════════════════════════════════════════════════════
   IMPACT — le nuage nommé, deux graphiques côte à côte
   ══════════════════════════════════════════════════════════════════ */
/* DEUX COLONNES SEULEMENT S'IL Y A LA PLACE POUR DEUX VRAIS NUAGES.
   À `minmax(300px,1fr)` la grille passait à deux colonnes dès 640 px, ce qui
   donnait deux carrés de 300 px où quarante étiquettes se marchaient dessus.
   En dessous de 1100 px on empile : un grand nuage vaut mieux que deux
   illisibles. C'est ce que fait le site en ligne, qui ne les met jamais
   côte à côte. */
.impg{display:grid;gap:22px;
      grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr))}
.impt{font:700 11px/1 -apple-system,"Segoe UI",system-ui,sans-serif;
      letter-spacing:.07em;text-transform:uppercase;color:var(--t2);margin:0 0 8px}
.impw{display:flex;justify-content:center}
/* `height:auto` compte : le JS pose une hauteur en pixels sur le canvas, et
   sans cette ligne un canvas trop large serait comprimé en LARGEUR seulement
   — donc écrasé et flou. C'est exactement ce qui arrivait sur téléphone. */
.impw canvas{display:block;border-radius:6px;max-width:100%;height:auto}
.imph{margin-top:10px;min-height:19px}

/* ══════════════════════════════════════════════════════════════════
   VALEUR DES JOUEURS — la règle graduée et ses bandes de rôle
   ══════════════════════════════════════════════════════════════════ */
.pvr{position:relative;margin:10px 0 4px}
.pvbs{position:absolute;inset:0;border-radius:5px;overflow:hidden;
      border:1px solid var(--bord)}
.pvb{position:absolute;top:0;bottom:0;border-right:1px solid var(--bord)}
.pvb:last-child{border-right:0}
.pvbl{position:absolute;top:5px;left:50%;transform:translateX(-50%);
      white-space:nowrap;font:700 9px/1 -apple-system,"Segoe UI",sans-serif;
      letter-spacing:.06em;text-transform:uppercase;color:var(--t2);opacity:.85}
.pvps{position:absolute;left:0;right:0;top:26px}
.pvp{position:absolute;display:flex;align-items:center;
     gap:6px;white-space:nowrap;background:var(--bg);border:1px solid;
     border-left-width:3px;border-radius:4px;padding:3px 7px;cursor:pointer;
     font:600 10px/1 -apple-system,"Segoe UI",system-ui,sans-serif}
.pvp:hover{background:var(--pan2)}
.pvp b{font-variant-numeric:tabular-nums;font-weight:700}
.pvax{display:flex;justify-content:space-between;gap:10px;
      font:11px/1 -apple-system,"Segoe UI",sans-serif;color:var(--t3);
      margin-bottom:16px}
.pvax span:nth-child(2){font-style:italic}

/* ══════════════════════════════════════════════════════════════════
   LE CHOIX D'UNE CARTE — la grille d'équipes et de joueurs
   ══════════════════════════════════════════════════════════════════ */
.cgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
     gap:8px;margin:8px 0 18px}
.cgc{display:flex;align-items:center;gap:10px;padding:8px 11px;
     background:var(--pan);border:1px solid var(--bord);border-radius:6px;
     text-decoration:none;color:inherit;min-width:0}
.cgc:hover{background:var(--pan2);border-color:var(--accent)}
.cgc img{width:30px;height:30px;object-fit:contain;flex:none}
.cgc.cgj img{border-radius:50%;background:var(--pan2)}
.cgn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
     font:600 12px/1.2 inherit}
.cga{flex:none;font:800 10px/1 -apple-system,"Segoe UI",system-ui,sans-serif;
     letter-spacing:.06em}
.cch{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.cq{min-width:220px;flex:1}
@media(max-width:640px){.cgr{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* Sur un téléphone, cinq paliers de 80 px avec des puces de 90 px ne peuvent
   pas cohabiter : les noms se chevauchent et la règle ment. On lui donne sa
   largeur minimale et on la fait défiler — mieux vaut glisser du doigt que
   lire trois noms empilés au même endroit. */
@media(max-width:760px){
  .pvw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pvw > *{min-width:680px}
  .pvp{font-size:9.5px;padding:3px 5px;gap:4px}
  .pvbl{font-size:8px}
}

/* ── Le nom, en grand, comme sur Corriger le tir ─────────────────
   Une carte se reconnaît à son nom. À 26 px il se perdait au milieu de la
   ligne d'état civil ; l'ancien site le posait bien plus gros, et c'est ce
   qui donnait à la fiche son air de carte plutôt que de tableau. */
/* AUX MESURES DU SITE EN LIGNE, EXACTEMENT. Nos titres étaient plus gros
   que les siens (39 et 42 px contre 30 et 26) et la photo plus grande
   (108 contre 96) : plus gros ne veut pas dire pareil.
   La graisse est 600 — sa règle `.thdr h1,.phi h1{font-weight:600}`, écrite
   plus bas dans sa feuille, écrase le 800 déclaré au-dessus. */
/* EN LEXEND, comme chez lui. Tout son site est en Lexend (`body{font-family:
   'Lexend'}`), donc son nom de joueur et sa ligne d'état civil aussi. On ne
   l'étend PAS aux tableaux ni aux barres de mesure : les données restent
   dans la police du système, qui aligne mieux les chiffres. Lexend habille
   ce qui nomme — le titre du site, le nom d'un joueur, celui d'une équipe. */
.fiche h1,.fiche .sous{font-family:'Lexend',-apple-system,"Segoe UI",system-ui,sans-serif}
/* 34 px, un cran AU-DESSUS du site en ligne (30). C'est une préférence de
   Félix, pas un écart involontaire : sur une carte, le nom est ce qu'on
   vient lire en premier. */
.fiche h1{font-size:34px;line-height:1.1;font-weight:600;letter-spacing:-.02em}
.fiche.eq h1{font-size:26px;font-weight:600;letter-spacing:-.02em}
.fbox img.logo{width:68px;height:68px}
.mugc{width:96px;height:96px}
/* Plus de bouton « Back » : l'en-tête commence au bord gauche, comme chez
   lui. Le retour se fait par le navigateur, et « Home » vit dans la barre. */
.fiche{padding-left:20px}

/* ── Le menu déroulant des onglets, sur écran étroit ─────────────
   Cinq onglets ne tiennent pas sur un téléphone : ils débordaient sans dire
   qu'il en restait. Corriger le tir les remplace par un menu pleine largeur. */
.ongsel{display:none}
@media(max-width:760px){
  .ong{display:none}
  .ongsel{display:block;width:calc(100% - 24px);margin:10px 12px 4px;
          padding:12px 40px 12px 13px;border-radius:10px;
          border:1px solid var(--bord);background-color:var(--pan);
          color:var(--t1);min-height:46px;cursor:pointer;
          font:700 14px/1 -apple-system,"Segoe UI",system-ui,sans-serif;
          -webkit-appearance:none;appearance:none;background-repeat:no-repeat;
          background-position:right 13px center;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7fa1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
  /* MESURÉ sur le site en ligne à 430 px : la carte d'identité y occupe
     ~20 % de l'écran, ici 12 %. Il ne réduit JAMAIS la photo sous 96 px —
     il resserre l'espacement, pas le sujet. Le nom et la photo sont ce
     qu'on vient voir ; c'est le reste qui cède. */
  .fiche h1{font-size:27px}
  .fiche.eq h1{font-size:27px}
  .fbox img.logo{width:56px;height:56px}
  .mugc{width:92px;height:92px}
}
@media(max-width:420px){
  .fiche h1{font-size:24px}
  .fiche.eq h1{font-size:24px}
  .mugc{width:80px;height:80px}
  .fiche{gap:12px}
}

/* ── LES TROIS TABLES DE L'EFFECTIF S'ALIGNENT ENTRE ELLES ───────
   Attaquants, défenseurs et gardiens ont les mêmes sept colonnes, mais en
   `table-layout:auto` chacune se répartissait selon SON propre contenu : un
   nom long chez les attaquants décalait toute la table, et les chiffres ne
   tombaient pas en face de ceux des défenseurs. Sur un écran étroit les
   colonnes se serrent à leur minimum et finissent par coïncider — d'où le
   fait que le défaut ne se voyait QUE sur écran large.
   On ne fixe les largeurs qu'au-dessus de 760 px : en dessous, le
   comportement actuel est déjà bon et le nom a besoin de tout l'espace. */
@media(min-width:761px){
  table.pt.eff{table-layout:fixed}
  table.pt.eff th:first-child,table.pt.eff td:first-child{width:5%}
  table.pt.eff th:nth-child(2),table.pt.eff td:nth-child(2){width:35%;
       overflow:hidden;text-overflow:ellipsis}
  table.pt.eff th:nth-child(n+3),table.pt.eff td:nth-child(n+3){width:12%}
}

/* ── L'effectif : la largeur va au nom ───────────────────────────
   Le rang tient en deux chiffres et la position en une lettre. Laissées
   libres, elles prenaient autant de place que le nom, et sur un téléphone
   il ne restait de « Juraj Slafkovský » que « Juraj ». */
/* AUCUNE LARGEUR IMPOSÉE. Fixer les colonnes de chiffres et laisser le nom
   en `auto` lui donnait TOUT le reste — 695 px sur un grand écran — et les
   chiffres se retrouvaient collés au bord droit, séparés du nom par un trou.
   Le tableau se répartit tout seul selon son contenu, comme avant ; c'est
   le nom qu'on raccourcit sur un écran étroit, pas la table qu'on force. */
/* Pas d'`overflow:hidden` ici : sur une cellule de tableau il autorise la
   colonne à se réduire à zéro, et la colonne de reste ci-dessous, qui
   demande 100 %, avalait alors TOUT le tableau — l'effectif s'affichait
   vide. Les cellules gardent leur `white-space:nowrap` et imposent donc
   leur largeur minimale ; le reste va dans la dernière colonne. */
/* LE TABLEAU REMPLIT LA LARGEUR, ET LE SURPLUS SE RÉPARTIT SELON LE CONTENU.
   Trois essais avant de trouver la bonne combinaison :
     · `table-layout:fixed` (hérité de style.css) donne à chaque colonne
       EXACTEMENT la même part — le rang était aussi large que « Wins cont. »,
       d'où le trou entre lui et le nom ;
     · une colonne de reste renvoyait tout le mou à droite : huit cents
       pixels de rayures sur rien ;
     · une largeur collée au contenu laissait un petit tableau perdu dans
       une page vide.
   Avec `table-layout:auto` ET `width:100%`, le navigateur répartit le
   surplus PROPORTIONNELLEMENT à ce que chaque colonne contient : le nom, qui
   est le plus long, en prend le plus, et les chiffres s'aèrent un peu. */

table.pt th:first-child,table.pt td:first-child{text-align:right;
       padding-right:10px;padding-left:2px;color:var(--t3)}
/* La position n'apparaît à côté du nom que sur téléphone, quand sa colonne
   a disparu. */
/* Deux noms dans la même cellule : le complet sur un écran large, le nom de
   famille sur un téléphone. À 385 px, « Juraj Slafkovský » ne tenait dans
   aucune colonne raisonnable — mais « Slafkovský » oui, et c'est le mot qui
   identifie le joueur. */
table.pt .ncourt{display:none}
table.pt .posm{font-style:normal;font-weight:600;color:var(--t3);
               margin-left:7px;font-size:10px}
@media(max-width:760px){
  table.pt{font-size:11.5px}
  table.pt th,table.pt td{padding:4px 4px}
  table.pt th{font-size:9px}
  table.pt .nlong{display:none}
  table.pt .ncourt{display:inline}
  table.pt .posm{margin-left:5px;font-size:9.5px}
}

/* L'infobulle du nuage d'impact : le nom, puis les deux paires de taux. */
.imph b{display:block;color:var(--t1);font-size:12.5px;margin-bottom:2px}
.imph .impd{display:block;font-variant-numeric:tabular-nums}

/* ── LES COÉQUIPIERS ───────────────────────────────────────────────
   Trois blocs de trois colonnes — ensemble, le joueur sans lui, lui sans
   le joueur — plus l'impact. La disposition est celle de Corriger le tir
   1.0 : même ordre, mêmes titres, même en-tête sur deux étages. */
.wtab{overflow-x:auto}
table.pt.wowy{min-width:720px}
table.pt.wowy th{text-align:right}
table.pt.wowy th:first-child{text-align:left}
/* LA COLONNE DE GAUCHE EST UN NOM, PAS UN RANG. `table.pt th:first-child`
   met la première colonne en gris pâle parce que dans les tableaux
   d'effectif elle porte le rang. Ici elle porte le coéquipier : l'en-tête
   « Teammate » sortait plus effacé que les neuf autres, et le premier
   « TOI » de la deuxième rangée avec lui — deux cellules décolorées au
   milieu d'un en-tête uniforme. */
table.pt.wowy th{color:var(--t2)}
table.pt.wowy th.grp{text-align:center;border-bottom:1px solid var(--bord);
                     font-weight:700;color:var(--t1)}
/* Le corps du tableau prend la couleur du texte du site, comme partout
   ailleurs : il était en gris clair, ce qui le faisait paraître désactivé
   à côté des autres onglets. */
table.pt.wowy td{text-align:right;font-variant-numeric:tabular-nums;
                 color:var(--t1)}
table.pt.wowy td:first-child{text-align:left;white-space:nowrap;font-weight:600}
/* `.wnote` et `.wglos` ont disparu : la note d'introduction et le glossaire
   de bas de tableau sont fondus dans une seule `.leg` placée sous le titre,
   comme dans tous les autres onglets. */


/* ── EN-TÊTES TRIABLES DU TABLEAU RAPM ─────────────────────────────────────
   `table.pt` sert aussi au tableau de l'effectif, qui ne se trie PAS : le
   curseur et le survol ne sont donc pas posés sur `th` mais sur la classe
   `tri`, que seul le RAPM pose. Rien ne change pour les autres tableaux. */
table.pt th.tri{cursor:pointer;user-select:none}
table.pt th.tri:hover{color:var(--t1)}