/* Les règles de l'app de Stéphane (gabarit.html), portées sur les jetons du
   squelette. Chargée par la page de l'app seulement ; les resets sont
   bornés à .app, aux boîtes de dialogue et à la barre du comparateur pour
   ne pas toucher les boutons des pages du compte. */
/* :where() garde ces resets à la spécificité d'un élément nu : ils passent
   après ceux de ligne-bleue.css (ordre de chargement) et restent sous
   toute classe de l'app (.btn, .pop input…). */
:where(.app, dialog, .cmpbar), :where(.app, dialog, .cmpbar) *{box-sizing:border-box}
:where(.app, dialog) :is(p, h2, h3){margin:0}
:where(.app, dialog, .cmpbar){font:15px/1.45 Barlow, "Segoe UI", system-ui, sans-serif; color:var(--encre)}
:where(.app, dialog, .cmpbar) button{font:inherit; font-weight:500; font-size:inherit; color:inherit; background:none; border:none; border-radius:0; padding:0; cursor:pointer; line-height:inherit; display:inline-block}
:where(.app, dialog) :is(input, select){font:inherit; color:var(--encre)}
.wrap.app{max-width:1360px; padding:0 20px}
.app-tete{padding-top:6px}
.app .tab-lien{text-decoration:none}
.app .chargement{padding:26px; color:var(--brume)}
.app-pied{color:var(--brume); font-size:13px; padding:26px 0 8px; margin:0}

.tagline{color:var(--brume); margin-top:8px; max-width:66ch}
.maj{color:var(--brume); font-size:12.5px; margin-top:4px}

.app nav.tabs{display:flex; gap:4px; margin-top:20px; border-bottom:1px solid var(--filet); flex-wrap:wrap}
.app nav.tabs button, .app nav.tabs .tab-lien{
  font-family:"Barlow Condensed", Barlow, sans-serif; font-weight:600; font-size:18px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--brume);
  padding:8px 14px 10px; border-bottom:3px solid transparent; margin-bottom:-1px}
.app nav.tabs button[aria-selected="true"]{color:var(--encre); border-bottom-color:var(--epinette)}

/* ---------- filtres ---------- */
.filters{position:sticky; top:0; z-index:20; background:var(--papier);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:14px 0 12px;
  border-bottom:1px solid var(--filet)}
.filters input[type="search"]{
  background:var(--carte); border:1px solid var(--filet); border-radius:8px;
  padding:7px 12px; width:200px}
.filters select{background:var(--carte); border:1px solid var(--filet); border-radius:8px; padding:7px 10px}
.capf{width:104px; background:var(--carte); border:1px solid var(--filet); border-radius:8px; padding:7px 10px;
  font-variant-numeric:tabular-nums}
.chips{display:flex; gap:6px}
.chips button{border:1px solid var(--filet); background:var(--carte); border-radius:999px;
  padding:5px 13px; font-weight:500; color:var(--brume)}
.chips button[aria-pressed="true"]{background:var(--epinette); border-color:var(--epinette);
  color:var(--sur-epinette); font-weight:600}
.btn{border:1px solid var(--filet); background:var(--carte); border-radius:8px; padding:7px 13px; font-weight:500}
/* le cadenas des boutons réservés aux abonnés : signalé, sans allonger le bouton */
.cad{font-size:10px; line-height:1; margin-right:4px; opacity:.7; vertical-align:1px}
/* le jeton des colonnes réservées : un texte fixe, jamais la valeur masquée.
   Plus petit que le chiffre qu'il remplace, donc sans effet sur la hauteur
   de ligne, y compris dans la vue essentielle du téléphone. */
.jeton{display:inline-block; padding:0 2px; border:none; background:none; line-height:1;
  font-size:11px; letter-spacing:1.5px; color:var(--brume); opacity:.5; vertical-align:1px;
  font-variant-numeric:normal}
.jeton:hover{opacity:1; color:var(--epinette)}
.btn:hover, .chips button:hover{border-color:var(--epinette)}
.btn[aria-pressed="true"]{background:var(--rouge-pale); border-color:var(--rouge); color:var(--rouge); font-weight:600}
.spacer{flex:1}
.count{color:var(--brume); font-size:13px}
.draftinfo{font-size:13px; color:var(--brume)}
.draftinfo b{color:var(--encre)}

/* barème */
.bareme{position:relative}
.pop{position:absolute; right:0; top:calc(100% + 8px); z-index:40; background:var(--carte);
  border:1px solid var(--filet); border-radius:12px; box-shadow:var(--ombre); padding:16px; width:270px;
  max-height:70vh; overflow:auto}
.pop h3{font-family:"Barlow Condensed", Barlow, sans-serif; font-size:17px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px}
.pop h4{font-family:"Barlow Condensed", Barlow, sans-serif; font-size:14px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--brume); margin:10px 0 2px}
.pop p{font-size:13px; color:var(--brume); margin-bottom:10px}
.pop label{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 0; font-size:14px}
.pop input{width:64px; background:var(--papier); border:1px solid var(--filet); border-radius:6px;
  padding:4px 8px; text-align:right; font-variant-numeric:tabular-nums}
.pop .reset{color:var(--epinette); font-weight:600; font-size:13px; margin-top:8px; padding:0}

/* ---------- partage ---------- */
.bandeau-partage{display:flex; gap:8px 14px; align-items:center; flex-wrap:wrap; margin-top:16px;
  background:var(--epinette-pale); border:1px solid var(--filet); border-radius:12px; padding:10px 14px}
.bandeau-partage .btxt{font-weight:600; font-size:13.5px}
.bandeau-partage a, .bandeau-partage .lien{color:var(--epinette); font-weight:600; font-size:13.5px;
  padding:0; text-decoration:none; text-align:left}
.bandeau-partage a:hover, .bandeau-partage .lien:hover{text-decoration:underline}
.bandeau-partage .note{color:var(--brume); font-size:13px}
.partchoix{display:flex; flex-direction:column; gap:8px; margin:16px 0 4px}
.partchoix .btn{text-align:left; padding:11px 14px; min-height:44px}
.partlien{width:100%; margin-top:8px; background:var(--papier); border:1px solid var(--filet);
  border-radius:8px; padding:9px 12px; font-size:13px}
.imgapercu{width:100%; height:auto; display:block; border:1px solid var(--filet); border-radius:10px;
  margin:14px 0 4px; background:#F1F4F7}
#imageDlg{width:min(760px, calc(100vw - 24px))}
.imgpied{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.imgpied .btn{min-height:40px}
.btn.plein{background:var(--epinette); border-color:var(--epinette); color:var(--sur-epinette); font-weight:600}

/* ---------- tableau ---------- */
.tablewrap{overflow-x:auto; background:var(--carte); border:1px solid var(--filet);
  border-radius:12px; margin-top:16px}
.app table, .cmpbar table{border-collapse:collapse; width:100%}
.tablewrap table{min-width:1320px}
.app thead th, .cmpbar thead th{font-family:"Barlow Condensed", Barlow, sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--brume); text-align:right;
  padding:11px 9px; border-bottom:1px solid var(--filet); white-space:nowrap; cursor:pointer;
  user-select:none; position:sticky; top:0; background:var(--carte); z-index:5}
.app thead th.txt{text-align:left}
.app thead th[aria-sort]{color:var(--epinette)}
.app thead th[aria-sort="descending"] .arr::after{content:"↓"}
.app thead th[aria-sort="ascending"] .arr::after{content:"↑"}
.app tbody td, .app tfoot td, .cmpbar td{padding:8px 9px; border-bottom:1px solid var(--filet); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.app tbody tr:last-child td{border-bottom:none}
.app tbody tr{cursor:pointer}
.app tbody tr:hover td{background:var(--surface2)}
.app tbody tr.mine td{background:var(--epinette-pale)}
.app td.txt{text-align:left}
.rk{color:var(--brume); width:44px}
.pname{font-weight:600}
.pmeta{color:var(--brume); font-size:12.5px}
.app td.pool{font-weight:700; font-size:15.5px}
.app td .aub{font-weight:600}
.app td .aub.pos{color:var(--good)}
.app td .aub.neg{color:var(--rouge)}
.range{display:inline-flex; align-items:center; gap:7px}
.range .track{position:relative; width:84px; height:5px; border-radius:3px; background:var(--track)}
.range .fill{position:absolute; top:0; height:5px; border-radius:3px; background:var(--epinette); opacity:.45}
.range .dot{position:absolute; top:-2.5px; width:10px; height:10px; border-radius:50%; background:var(--epinette)}
.range .lab{color:var(--brume); font-size:12px}
.addcmp{border:1px solid var(--filet); border-radius:6px; width:26px; height:26px; line-height:1;
  color:var(--brume); font-weight:600}
.addcmp[aria-pressed="true"]{background:var(--epinette); border-color:var(--epinette); color:var(--sur-epinette)}
.dbtn{border:1px solid var(--filet); border-radius:6px; padding:3px 9px; font-size:13px; font-weight:600; color:var(--brume)}
.dbtn.mine[aria-pressed="true"]{background:var(--epinette); border-color:var(--epinette); color:var(--sur-epinette)}
.dbtn.taken[aria-pressed="true"]{background:var(--rouge-pale); border-color:var(--rouge); color:var(--rouge)}
.more{display:block; margin:14px auto 0}
/* l'appel sous le classement du visiteur, même boîte que le bandeau de vente */
.paliergratuit{display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap; margin-top:14px;
  background:var(--carte); border:1px solid var(--filet); border-radius:12px; padding:12px 16px}
.paliergratuit .ptxt{flex:1 1 240px; min-width:0; color:var(--brume); font-size:13.5px}

/* ---------- mon équipe ---------- */
.team{margin-top:16px}
.team .empty{background:var(--carte); border:1px solid var(--filet); border-radius:12px;
  padding:26px; color:var(--brume); max-width:60ch}
.team h2{font-family:"Barlow Condensed", Barlow, sans-serif; font-weight:600; font-size:17px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--brume); margin:18px 0 8px}
.team .note{color:var(--brume); font-size:13.5px; margin-top:10px}
.team tfoot td{font-weight:700; border-top:2px solid var(--epinette); border-bottom:none}
.teamwrap{overflow-x:auto; background:var(--carte); border:1px solid var(--filet); border-radius:12px}
.teamwrap table{min-width:720px}

/* ---------- cartes de pools ---------- */
.poolcards{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.pcard{flex:1 1 170px; max-width:240px; text-align:left; background:var(--carte); border:1px solid var(--filet);
  border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:3px}
.pcard:hover{border-color:var(--epinette)}
.pcard.active{border-color:var(--epinette); box-shadow:inset 0 0 0 1px var(--epinette)}
.pcard.add{align-items:center; justify-content:center; color:var(--brume); border-style:dashed; min-height:76px}
.pcname{font-family:"Barlow Condensed", Barlow, sans-serif; font-weight:700; font-size:17px; letter-spacing:.04em; text-transform:uppercase}
.pcline{color:var(--brume); font-size:12.5px; font-variant-numeric:tabular-nums}
.poolmgmt{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px}
.reglesgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px;
  background:var(--carte); border:1px solid var(--filet); border-radius:12px; padding:16px; margin-top:8px}
.reglesgrid label{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13.5px; padding:3px 0}
.reglesgrid h3{margin:0 0 4px}
input.regle{width:74px; background:var(--papier); border:1px solid var(--filet); border-radius:6px;
  padding:4px 8px; text-align:right; font-variant-numeric:tabular-nums}

/* ---------- fiche ---------- */
dialog{border:none; border-radius:14px; background:var(--carte); color:var(--encre);
  box-shadow:var(--ombre); padding:0; width:min(560px, calc(100vw - 32px)); margin:auto}
dialog::backdrop{background:rgba(10,16,22,.55)}
.fiche{padding:22px 24px 24px}
.fiche .head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.fiche h2{font-family:"Barlow Condensed", Barlow, sans-serif; font-weight:700; font-size:28px;
  letter-spacing:.03em; text-transform:uppercase; line-height:1.05}
.fiche .sub{color:var(--brume); margin-top:3px}
.fiche .close{color:var(--brume); font-size:22px; line-height:1; padding:2px 6px}
.fiche h3{font-family:"Barlow Condensed", Barlow, sans-serif; font-weight:600; font-size:15px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--brume); margin:20px 0 8px}
.hist{width:100%; border-collapse:collapse}
.hist th{font-size:12.5px; font-weight:600; color:var(--brume); text-align:right; padding:4px 8px}
.hist th:first-child{text-align:left}
.hist td{padding:5px 8px; text-align:right; font-variant-numeric:tabular-nums; border-top:1px solid var(--filet)}
.hist td:first-child{text-align:left; color:var(--brume)}
.hist tr.proj td{font-weight:700; border-top:2px solid var(--epinette)}
/* en saison : une vue à la fois, Saison 2026-27 ou Projection de saison */
.vues{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 10px}
.vues .chips{display:flex; gap:6px}
.vues .legende{margin:0}
.app td.rpool{font-weight:700; color:var(--epinette)}
.legende{font-size:13px; color:var(--brume); margin:0 0 8px; white-space:normal}
.hist tr.cur td{background:var(--epinette-pale)}
.hist tr.cur td:first-child{color:var(--epinette); font-weight:600}
.hist .bar.curb{background:var(--epinette)}
.ivl.encours{color:var(--encre)}
.bar{height:7px; border-radius:4px; background:var(--epinette); opacity:.8; margin-top:3px}
.bar.projb{opacity:1}
.ivl{color:var(--brume); font-size:13px; margin-top:10px}
.mchist{display:flex; align-items:flex-end; gap:2px; height:52px; margin-top:12px}
.mchist span{flex:1; background:var(--epinette); opacity:.65; border-radius:2px 2px 0 0; min-height:1px}
.mchist span.med{opacity:1; background:var(--rouge)}
.mclab{display:flex; justify-content:space-between; color:var(--brume); font-size:12px; margin-top:3px}

/* ---------- comparateur ---------- */
.cmpbar{position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--carte);
  border-top:1px solid var(--filet); box-shadow:var(--ombre)}
.cmpbar .inner{max-width:1360px; margin:0 auto; padding:10px 20px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.cmpbar .lbl{font-family:"Barlow Condensed", Barlow, sans-serif; font-weight:600; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--brume)}
.cmpchip{display:inline-flex; align-items:center; gap:8px; background:var(--surface2);
  border-radius:999px; padding:4px 6px 4px 13px; font-weight:600; font-size:14px}
.cmpchip button{color:var(--brume); font-size:15px; line-height:1}
.cmptable{overflow:auto; max-height:min(300px, 40vh); max-width:1360px; margin:0 auto; padding:0 20px 14px}
.cmptable table{min-width:0}
.cmptable th, .cmptable td{padding:6px 12px; font-size:14px}
.cmptable td:first-child, .cmptable th:first-child{text-align:left; color:var(--brume)}
.cmptable .best{color:var(--epinette); font-weight:700}

/* ---------- téléphone ---------- */
/* Les boutons propres au téléphone n'existent pas sur ordinateur. */
.onlymob{display:none}
/* Le barème déplacé dans sa boîte de dialogue perd son habillage de popover. */
#baremeDlg .pop{position:static; width:auto; max-height:none; padding:0;
  border:none; border-radius:0; box-shadow:none; background:none}
#baremeDlg .pop > h3:first-child{display:none}
#baremeDlg .pop label{flex-wrap:wrap}
#baremeDlg .pop label > span{flex:1 1 60%; min-width:0}
#baremeDlg .pop input{min-height:40px; width:82px}
#baremeDlg .dlgpied{display:flex; justify-content:flex-end; margin-top:16px}
/* les liens qui tiennent lieu de bouton dans la boîte « Réservé aux abonnés » */
a.btnlien{text-decoration:none; color:inherit}
a.vbtn.btnlien{color:var(--sur-epinette)}

@media (max-width:640px){
    .filters input[type="search"]{width:150px}

  /* premier écran : en-tête resserré, présentation repliée, onglets sur une ligne */
  header.top{padding:16px 0 0}
  .tagline.plie{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
    overflow:hidden; cursor:pointer}
  .maj{margin-top:6px}
  .app nav.tabs{margin-top:12px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .app nav.tabs::-webkit-scrollbar{display:none}
  .app nav.tabs button, .app nav.tabs .tab-lien{flex:0 0 auto; min-height:44px}
  /* la rangée Filtres · Repêchage · Règles du pool tient à 390 px, cadenas compris */
  .filters{padding:10px 0 10px; gap:10px 8px}


  /* cibles tactiles */
  .onlymob{display:inline-block}
  /* les pastilles tiennent une ligne à elles, qui défile plutôt que de déborder */
  .chips{flex:1 1 100%; overflow-x:auto; scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips button{padding:8px 14px; min-height:40px; flex:0 0 auto}
  .btn{padding:9px 13px; min-height:40px}
  .filters input[type="search"], .filters select, .capf{min-height:40px}
  .addcmp{width:36px; height:36px; font-size:17px; position:relative}
  .addcmp::after{content:""; position:absolute; inset:-2px}   /* zone de toucher 40 x 40 */
  .dbtn{min-height:40px; padding:8px 11px}

  /* barre de filtres repliée : recherche, pastilles, Repêchage, Règles, Filtres */
  .filters.replie #team, .filters.replie #capMin, .filters.replie #capMax,
  .filters.replie #csvBtn, .filters.replie #count, .filters.replie #colsBtn,
  .filters.replie .spacer{display:none}
  #fBtn[aria-expanded="true"]{background:var(--epinette-pale); border-color:var(--epinette); color:var(--epinette)}

  /* classement : vue essentielle (#, Joueur, Pts pool, Cap, Aubaine $) */
  .tablewrap table{min-width:0}
  .tablewrap thead th, .tablewrap tbody td{padding:8px 5px}
  .tablewrap .rk{width:24px; min-width:24px; padding-left:3px; padding-right:3px}
  .tablewrap td.txt{white-space:normal}
  /* les en-têtes se replient sur deux lignes plutôt que d'élargir le tableau */
  .tablewrap.ess thead th{white-space:normal; padding:9px 5px}
  .tablewrap.ess [data-c]:not([data-c="n"]):not([data-c="rpool"]):not([data-c="pool"]):not([data-c="cap"]):not([data-c="aubc"]):not([data-c="act"]){display:none}
  /* en saison, les points de la saison prennent la place de l'aubaine (un repère de repêchage) */
  .tablewrap.ess.saison [data-c="aubc"]{display:none}
  /* le soir du repêchage, « Moi » et « Pris » prennent la place de l'aubaine */
  .tablewrap.ess.drf [data-c="aubc"]{display:none}

  /* vue complète : le nom du joueur reste à gauche pendant le défilement latéral */
  .tablewrap.tout table{min-width:1320px}
  .tablewrap.tout .rk, .tablewrap.tout [data-c="n"]{position:sticky; background:var(--carte)}
  .tablewrap.tout .rk{left:0; z-index:4}
  .tablewrap.tout [data-c="n"]{left:var(--rkw, 30px); z-index:4; box-shadow:1px 0 0 var(--filet)}
  .tablewrap.tout thead .rk, .tablewrap.tout thead [data-c="n"]{z-index:7}
  .tablewrap.tout tbody tr.mine .rk, .tablewrap.tout tbody tr.mine [data-c="n"]{background:var(--epinette-pale)}
  .tablewrap.tout tbody tr:hover .rk, .tablewrap.tout tbody tr:hover [data-c="n"]{background:var(--surface2)}

  /* équipes : l'intervalle sort pour laisser Pts projetés et Séries */
  .teamwrap table{min-width:0}
  .teamwrap [data-c="ivl"]{display:none}
  .teamwrap thead th{white-space:normal}
  .teamwrap thead th, .teamwrap tbody td, .teamwrap tfoot td{padding:8px 5px}
  /* Mes pools : vue essentielle — Joueur, Proj., Réels, Hier */
  .teamwrap.ess [data-c="palier"], .teamwrap.ess [data-c="mj"], .teamwrap.ess [data-c="cap"]{display:none}
  .teamwrap.ess td.txt{white-space:normal}

  /* le bouton de partage de la fiche laisse la place au nom du joueur */
  .fiche .head .btn{padding:8px 10px; font-size:13px}

  /* règles du pool : boîte de dialogue plein écran, défilable */
  #baremeDlg{width:calc(100vw - 12px); max-height:calc(100vh - 24px)}
  #baremeDlg .fiche{padding:18px 16px 20px}
}