/* =========================================================================
   BPKL — Thème global (look « Accueil »)
   Tokens sombre/clair + pont vers les variables Bootstrap 5.3 + overrides
   de composants. Chargé après bootstrap.min.css, DataTables et style.css.
   La grille et les utilitaires responsives (.row/.col-*, .d-*) ne sont
   JAMAIS touchés — uniquement couleurs / surfaces / typographie.
   ========================================================================= */

/* ----------------------------------------------------------- 1. Tokens ---- */
:root{
  --bg:#0A0D12; --bg2:#0C1016; --surface:#12171F; --surface2:#171E28; --surface3:#1E2733;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.12);
  --text:#EAEEF4; --text2:#97A2B2; --text3:#646E7C;
  --accent:#3B82F6; --accent-weak:rgba(59,130,246,.14); --accent-line:rgba(59,130,246,.4);
  --cyan:#38BDF8; --good:#34D399; --bad:#F87171; --warn:#FBBF24; --gold:#E5B567;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 18px 40px -24px rgba(0,0,0,.7);
  --grid:rgba(255,255,255,.045);
}
:root[data-theme="light"]{
  --bg:#EEF1F6; --bg2:#E7EBF2; --surface:#FFFFFF; --surface2:#F5F7FA; --surface3:#EDF1F6;
  --border:rgba(15,23,42,.10); --border2:rgba(15,23,42,.16);
  --text:#101822; --text2:#566276; --text3:#8A94A3;
  --accent:#2563EB; --accent-weak:rgba(37,99,235,.10); --accent-line:rgba(37,99,235,.35);
  --cyan:#0891B2; --good:#0E9F6E; --bad:#E5484D; --warn:#C98A00; --gold:#B8862F;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 14px 30px -20px rgba(16,24,40,.18);
  --grid:rgba(15,23,42,.05);
}

/* ------------------------------------------- 2. Pont vers Bootstrap 5.3 ---- */
/* On redéfinit les variables --bs-* en fonction de nos tokens : Bootstrap
   recolore alors cartes/tableaux/modales/dropdowns/formulaires tout seul.   */
:root[data-bs-theme="dark"],
:root[data-bs-theme="light"]{
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-emphasis-color:var(--text);
  --bs-secondary-color:var(--text2);
  --bs-tertiary-color:var(--text3);
  --bs-border-color:var(--border);
  --bs-border-color-translucent:var(--border);
  --bs-secondary-bg:var(--surface2);
  --bs-tertiary-bg:var(--surface3);
  --bs-primary:var(--accent);
  --bs-primary-rgb:59,130,246;
  --bs-link-color:var(--accent);
  --bs-link-color-rgb:59,130,246;
  --bs-link-hover-color:var(--accent);
  --bs-heading-color:var(--text);
  --bs-body-font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ------------------------------------------------- 3. Base document ------- */
html,body{background:var(--bg);}
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  font-family:'Archivo',sans-serif;
  color:var(--text);
}
a{color:var(--accent);}
::selection{background:var(--accent);color:#fff;}
:root[data-theme="light"] ::selection{color:#fff;}

/* ------------------------------------------- 4. Overrides de composants --- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  color:var(--text);
}
.card-header,.card-footer{
  background:var(--surface2);
  border-color:var(--border);
  color:var(--text);
  font-family:'Archivo',sans-serif;
  font-weight:700;
}
.card-header:first-child{border-radius:16px 16px 0 0;}
.list-group-item{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}

/* Tableaux — on laisse Bootstrap gérer via les vars, on ne fait que tinter */
.table{
  --bs-table-color:var(--text);
  --bs-table-bg:transparent;
  --bs-table-border-color:var(--border);
  --bs-table-striped-color:var(--text);
  --bs-table-striped-bg:var(--surface2);
  --bs-table-hover-color:var(--text);
  --bs-table-hover-bg:var(--surface3);
}

/* Modales */
.modal-content{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  color:var(--text);
}
.modal-header,.modal-footer{border-color:var(--border);}

/* Dropdowns */
.dropdown-menu{
  --bs-dropdown-bg:var(--surface2);
  --bs-dropdown-border-color:var(--border);
  --bs-dropdown-link-color:var(--text2);
  --bs-dropdown-link-hover-color:var(--text);
  --bs-dropdown-link-hover-bg:var(--surface3);
  --bs-dropdown-link-active-color:#fff;
  --bs-dropdown-link-active-bg:var(--accent);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.dropdown-divider{border-color:var(--border);}

/* Formulaires */
.form-control,.form-select{
  background:var(--surface2);
  border-color:var(--border);
  color:var(--text);
}
.form-control:focus,.form-select:focus{
  background:var(--surface2);
  border-color:var(--accent-line);
  color:var(--text);
  box-shadow:0 0 0 .2rem var(--accent-weak);
}
.form-control::placeholder{color:var(--text3);opacity:1;}
.input-group-text{background:var(--surface3);border-color:var(--border);color:var(--text2);}

/* Boutons neutres / liens */
.btn-primary{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--accent);--bs-btn-hover-border-color:var(--accent);}
.btn-close{filter:var(--bs-btn-close-filter,none);}
:root[data-bs-theme="dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(200%);}
.text-muted,.text-secondary{color:var(--text2) !important;}

/* ------------------------- 5. Re-tinte des utilitaires clairs (sombre) ---- */
/* Catch-all pour le markup existant qui code en dur des classes claires.    */
:root[data-bs-theme="dark"] .bg-white{background-color:var(--surface) !important;color:var(--text);}
:root[data-bs-theme="dark"] .bg-light{background-color:var(--surface2) !important;color:var(--text);}
:root[data-bs-theme="dark"] .text-dark{color:var(--text) !important;}
:root[data-bs-theme="dark"] .text-black{color:var(--text) !important;}
:root[data-bs-theme="dark"] .table-light{--bs-table-bg:var(--surface2);--bs-table-color:var(--text);--bs-table-border-color:var(--border);}
:root[data-bs-theme="dark"] .border{border-color:var(--border) !important;}

/* ----------------------------------------- 6. Classes custom existantes --- */
.text-small{font-size:.85em;}
.fwb{font-weight:700;}
.hidden-col{display:none;}
.logo-equipe{width:10px;}
.highlight{background:#aaf5aa;}
:root[data-bs-theme="dark"] .highlight{background:rgba(52,211,153,.18) !important;}
:root[data-bs-theme="dark"] .highlight td{background:transparent !important;}
/* Surbrillance joueur dans la modale de match (était #e6f4ea en dur) */
:root[data-bs-theme="dark"] .game-stats-highlight,
:root[data-bs-theme="dark"] .game-stats-highlight td{background-color:rgba(52,211,153,.16) !important;}

/* --------------------------------------------- 7. Header verre + nav ------ */
.bpkl-navbar{
  position:sticky;
  top:var(--score-banner-height,0px);
  z-index:1030;
  background:var(--bg);                                   /* repli */
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.bpkl-navbar .navbar-brand{display:flex;align-items:center;gap:11px;}
.bpkl-navbar .nav-link{
  color:var(--text2);
  font-weight:600;
  font-size:14px;
  border-radius:9px;
  padding:8px 13px;
  transition:color .18s ease,background .18s ease;
}
.bpkl-navbar .nav-link:hover,
.bpkl-navbar .nav-link:focus,
.bpkl-navbar .nav-item.show > .nav-link{color:var(--text);background:var(--surface2);}
.bpkl-navbar .navbar-toggler{border-color:var(--border);color:var(--text2);}
.bpkl-navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2397A2B2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Bascule de thème (soleil / lune) */
.bpkl-theme-toggle{
  width:38px;height:38px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .2s ease,border-color .2s ease,transform .18s ease;
}
.bpkl-theme-toggle:hover{color:var(--accent);border-color:var(--accent-line);transform:scale(1.06);}

/* Avatar / initiales */
.bpkl-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--accent-weak);border:1px solid var(--accent-line);
  color:var(--accent);font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
}

footer.container-fluid{color:var(--text3);}

/* Inner de la barre : alignée sur la largeur du contenu (.container ~1320). */
.bpkl-navbar-inner{max-width:1320px;margin:0 auto;padding-left:18px;padding-right:18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}

/* Nav primaire en pilules */
.bpkl-pills{gap:2px;align-items:center;}
.bpkl-pills .nav-link{position:relative;color:var(--text2);font-weight:600;font-size:14px;line-height:1.2;padding:8px 14px;border-radius:10px;transition:color .18s ease,background .18s ease;}
.bpkl-pills .nav-link:hover,
.bpkl-pills .nav-item.show > .nav-link{color:var(--text);background:var(--surface2);}
.bpkl-pills .nav-link.active{color:var(--text);background:var(--accent-weak);}
.bpkl-pills .nav-link.active::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--accent);}
.bpkl-pills .dropdown-toggle::after{color:var(--text3);margin-left:7px;vertical-align:1px;}
.bpkl-participants{max-height:62vh;overflow-y:auto;}

/* Séparateur entre la nav et le cluster contextuel */
.bpkl-divider{width:1px;height:28px;background:var(--border);flex-shrink:0;}
@media (max-width:1199.98px){.bpkl-divider{display:none;}}

/* Recherche */
.bpkl-search{position:relative;display:flex;align-items:center;}
.bpkl-search-btn{position:absolute;left:0;top:0;bottom:0;width:34px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--text3);cursor:pointer;border-radius:10px 0 0 10px;}
.bpkl-search-btn:hover{color:var(--accent);}
.bpkl-search input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px 12px 9px 34px;font-size:13px;width:236px;transition:border-color .18s ease,box-shadow .18s ease,width .2s ease;}
.bpkl-search input::placeholder{color:var(--text3);}
.bpkl-search input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-weak);width:268px;}
@media (max-width:1199.98px){.bpkl-search{width:100%;}.bpkl-search input{width:100%;}.bpkl-search input:focus{width:100%;}}

/* Cluster contextuel (saison / thème / admin / compte) */
.bpkl-cluster{gap:0;align-items:center;}

/* Pilule de contexte « Saison » (sélecteur, pas une page) */
.bpkl-season{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:6px 12px;transition:border-color .18s ease,background .18s ease;}
.bpkl-season:hover,.bpkl-season[aria-expanded="true"]{border-color:var(--accent-line);background:var(--surface3);}
.bpkl-season-text{display:flex;flex-direction:column;line-height:1;gap:3px;}
.bpkl-season-eyebrow{font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);font-weight:700;}
.bpkl-season-value{font-family:'Archivo',sans-serif;font-size:13px;font-weight:800;color:var(--text);}
.bpkl-season svg{color:var(--text3);flex-shrink:0;}

/* Boutons-icônes (thème, admin) */
.bpkl-iconbtn{width:38px;height:38px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:color .2s ease,border-color .2s ease,transform .18s ease;}
.bpkl-iconbtn:hover{color:var(--accent);border-color:var(--accent-line);transform:scale(1.05);}
.bpkl-iconbtn.dropdown-toggle::after{display:none;}

/* Menu utilisateur (avatar) */
.bpkl-usermenu .nav-link{padding:0;border:0;background:none;}
.bpkl-usermenu .nav-link::after{display:none;}
.bpkl-usermenu .bpkl-avatar{transition:transform .18s ease,box-shadow .2s ease;}
.bpkl-usermenu .nav-link:hover .bpkl-avatar,
.bpkl-usermenu.show .bpkl-avatar{transform:scale(1.06);box-shadow:0 0 0 3px var(--accent-weak);}
.bpkl-usermenu .dropdown-menu{min-width:232px;}
.bpkl-menuhead .name{font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;color:var(--text);}
.bpkl-menuhead .email{font-size:12px;color:var(--text3);margin-top:1px;}

/* Repli mobile : aérer le menu déplié */
@media (max-width:1199.98px){
  .bpkl-pills{gap:2px;padding:10px 0;}
  .bpkl-cluster{gap:10px;padding-top:6px;flex-wrap:wrap;}
}

/* Accessibilité : focus clavier visible sur les contrôles personnalisés */
.bpkl-iconbtn:focus-visible,
.bpkl-season:focus-visible,
.bpkl-search-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.bpkl-usermenu .nav-link:focus-visible .bpkl-avatar{outline:2px solid var(--accent);outline-offset:2px;}

/* Keyframes décoratives réutilisables (hero d'équipe, etc.) */
@keyframes bpklAurora{0%{transform:translate(0,0) scale(1)}100%{transform:translate(46px,26px) scale(1.18)}}
@keyframes bpklAurora2{0%{transform:translate(0,0) scale(1.12)}100%{transform:translate(-34px,-18px) scale(1)}}
@keyframes bpklFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bpklRingpulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}

/* ============================ Page « Mon équipe » ============================ */
/* Reveal + lift léger sur toutes les cartes de la page. */
.bpkl-myteam .card{animation:bpklRise .5s cubic-bezier(.2,.7,.2,1) both;transition:box-shadow .25s ease,border-color .25s ease;}
.bpkl-myteam .card:hover{box-shadow:0 18px 36px -22px rgba(0,0,0,.7);border-color:var(--border2);}
.bpkl-myteam .card-header{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.2px;}

/* Accent coloré par position (dégradé + liseré). :has() — dégradation gracieuse. */
.bpkl-myteam .card:has(#myteam-card-attaquants) > .card-header{border-left:3px solid var(--accent);background:linear-gradient(90deg,var(--accent-weak),var(--surface2) 62%);}
.bpkl-myteam .card:has(#myteam-card-defenseurs) > .card-header{border-left:3px solid var(--cyan);background:linear-gradient(90deg,rgba(56,189,248,.13),var(--surface2) 62%);}
.bpkl-myteam .card:has(#myteam-card-gardiens) > .card-header{border-left:3px solid var(--warn);background:linear-gradient(90deg,rgba(251,191,36,.13),var(--surface2) 62%);}

/* Pastille de position dans les lignes (chip coloré sur la cellule Position). */
.bpkl-myteam #myteam-card-attaquants tbody td:nth-child(5),
.bpkl-myteam #myteam-card-defenseurs tbody td:nth-child(5),
.bpkl-myteam #myteam-card-gardiens tbody td:nth-child(5){font-weight:700;font-family:'Archivo',sans-serif;}
.bpkl-myteam #myteam-card-attaquants tbody td:nth-child(5){color:var(--accent);}
.bpkl-myteam #myteam-card-defenseurs tbody td:nth-child(5){color:var(--cyan);}
.bpkl-myteam #myteam-card-gardiens tbody td:nth-child(5){color:var(--warn);}

/* Colonnes de salaire : chiffres tabulaires, dernière colonne (année courante) en évidence. */
.bpkl-myteam .myteam-table td.myteam-salary-col,
.bpkl-myteam .myteam-table th.myteam-salary-col{font-variant-numeric:tabular-nums;}

/* Pages « Résultats » / « Joueurs » / « Fiche joueur » : reveal + lift sur les cartes. */
.bpkl-standing .card,.bpkl-players .card,.bpkl-playerdetails .card{animation:bpklRise .5s cubic-bezier(.2,.7,.2,1) both;transition:box-shadow .25s ease,border-color .25s ease;border-radius:16px;}
.bpkl-standing .card:hover,.bpkl-players .card:hover,.bpkl-playerdetails .card:hover{box-shadow:0 18px 36px -22px rgba(0,0,0,.7);border-color:var(--border2);}
.bpkl-standing .card-header,.bpkl-players .card-header,.bpkl-playerdetails .card-header{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.2px;}

/* Traitement visuel des tableaux (fiches / résultats) */
.bpkl-playerdetails table thead th,
.bpkl-standing table thead th{
  font-family:'Archivo',sans-serif;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  font-weight:700;color:var(--text3);background:var(--surface2);
  border-bottom:1px solid var(--border2);
}
.bpkl-playerdetails table tbody td,
.bpkl-standing table tbody td{border-color:var(--border);}
.bpkl-playerdetails table tbody tr:hover td,
.bpkl-standing table tbody tr:hover td{background:var(--surface3) !important;}
/* Ligne « Total » mise en valeur */
.bpkl-playerdetails table tbody tr:last-child td{border-top:1px solid var(--border2);}
.bpkl-playerdetails table tbody tr:last-child td strong{color:var(--text);}
/* Lien vers la fiche d'équipe : plus dark-on-dark */
.teamstats-link{color:var(--accent) !important;}
.teamstats-link:hover{color:var(--accent) !important;text-decoration:underline !important;}

/* Hero d'équipe + tuiles */
.bpkl-mt-hero{animation:bpklRise .5s cubic-bezier(.2,.7,.2,1) both;}
.bpkl-mt-action{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text2);font-weight:600;font-size:13px;transition:color .2s ease,border-color .2s ease,transform .18s ease;}
.bpkl-mt-action:hover{color:var(--accent);border-color:var(--accent-line);transform:translateY(-1px);}
.bpkl-mt-action i{font-size:15px;}
.bpkl-mt-kpis{animation:bpklRise .55s cubic-bezier(.2,.7,.2,1) both;}
.bpkl-mt-kpi{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 19px;box-shadow:var(--shadow);transition:box-shadow .25s ease,border-color .25s ease;}
.bpkl-mt-kpi:hover{box-shadow:0 18px 36px -22px rgba(0,0,0,.7);border-color:var(--border2);}
.bpkl-mt-kpi .lbl{font-size:10.5px;letter-spacing:1.4px;color:var(--text3);text-transform:uppercase;font-weight:700;}
.bpkl-mt-kpi .val{font-family:'Archivo',sans-serif;font-weight:900;font-size:25px;margin-top:9px;letter-spacing:-.5px;font-variant-numeric:tabular-nums;}
.bpkl-mt-kpi .sub{font-size:12px;color:var(--text2);margin-top:6px;}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ----------------------------------------------------- 8. Animations ------ */
@keyframes bpklRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
[data-reveal]{animation:bpklRise .5s cubic-bezier(.2,.7,.2,1) both;}
.card-hover{transition:box-shadow .25s ease,border-color .25s ease;}
.card-hover:hover{box-shadow:0 18px 36px -22px rgba(0,0,0,.7);border-color:var(--border2);}

/* ------------------------------------------ 9. DataTables (mode sombre) ---- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{color:var(--text2);}
.dataTables_wrapper .dataTables_paginate .paginate_button{color:var(--text2) !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important;
}