/* =========================================================================
   Charte graphique commune — Bowling (index.html / listing.html / calendrier.html)
   Variables, reset, header/navigation, boutons, champs de recherche et pied
   de page partagés par les trois pages. Chaque page garde son propre <style>
   pour ses composants spécifiques (panneau détail joueur, calendrier, cartes
   d'accueil…) et peut surcharger une règle d'ici si besoin (son <style> est
   chargé après ce fichier dans le <head>, donc il l'emporte en cas de conflit).
   ========================================================================= */

:root{
  --bg:#12141c;
  --panel:#1c2030;
  --panel-alt:#242a3d;
  --panel-raised:#2b3148;
  --border:#333a55;
  --amber:#f5a524;
  --amber-dim:#8a6425;
  --red:#d6524a;
  --cream:#f3efe4;
  --muted:#8b92a8;
  --muted-dim:#5c6482;
  --radius:10px;
  --content-max:1320px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 15% -10%, rgba(245,165,36,0.08), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(214,82,74,0.06), transparent 35%),
    var(--bg);
  color:var(--cream);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:inherit;}
::selection{background:var(--amber);color:#1c1200;}

/* ---------- Header ---------- */
header{
  padding:28px 24px 22px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.header-inner{
  max-width:var(--content-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.pin-icon{width:34px;height:34px;flex:none;}
.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-right:auto;
}
.brand .eyebrow{
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
}
.brand h1{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:26px;
  letter-spacing:.01em;
  margin:0;
  text-transform:uppercase;
}

.import-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.import-btn{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:14px;
  font-weight:600;
  color:#1c1200;
  background:linear-gradient(180deg,#ffc164,var(--amber));
  border:none;
  padding:12px 20px;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 2px 0 var(--amber-dim), 0 8px 20px -8px rgba(245,165,36,0.6);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.import-btn:hover{transform:translateY(-1px);}
.import-btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--amber-dim);}
.import-btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px;}
.import-btn.secondary{
  color:var(--amber);
  background:transparent;
  border:1px solid var(--amber);
  box-shadow:none;
}
.import-btn.secondary:hover{background:rgba(245,165,36,0.1);}
.import-btn.secondary:active{transform:translateY(1px);}
.import-btn.ghost{
  color:var(--muted);
  background:transparent;
  border:1px solid var(--border);
  box-shadow:none;
}
.import-btn.ghost:hover{border-color:var(--muted);color:var(--cream);}
#fileInput{display:none;}

.repo-select{
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:var(--cream);
  background:var(--panel-alt);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 14px;
  cursor:pointer;
  min-width:200px;
  max-width:280px;
}
.repo-select:disabled{opacity:.55;cursor:default;}
.repo-select:focus-visible{outline:2px solid var(--amber);outline-offset:1px;}

.file-status{
  font-family:'Space Mono',monospace;
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
  max-width:var(--content-max);
  margin-left:auto;margin-right:auto;
}
.file-status.ok{color:#8fd19e;}
.file-status.err{color:var(--red);}

/* ---------- Layout ---------- */
main{
  max-width:var(--content-max);
  margin:0 auto;
  padding:28px 24px 60px;
  width:100%;
}

/* ---------- Champs de recherche / filtres ---------- */
.search-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.search-field{
  flex:1;
  min-width:220px;
  position:relative;
}
.search-field-narrow{
  flex:0 1 200px;
  min-width:170px;
}
.search-field-btn{
  flex:0 1 200px;
  min-width:170px;
}
.search-field-label-spacer{
  display:block;
  font-size:11px;
  margin-bottom:6px;
  visibility:hidden;
}
.reset-filters-btn{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:13px;
  font-weight:600;
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  cursor:pointer;
  transition:border-color .12s ease, color .12s ease;
}
.reset-filters-btn:hover{border-color:var(--amber);color:var(--amber);}
.reset-filters-btn:focus-visible{outline:2px solid var(--amber);outline-offset:1px;}
.search-field label{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.search-field input,
.search-field select{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--cream);
  padding:12px 14px;
  border-radius:8px;
  font-size:15px;
  font-family:'Inter',sans-serif;
  cursor:pointer;
}
.search-field input:disabled,
.search-field select:disabled{cursor:default;opacity:.6;}
.search-field input::placeholder{color:var(--muted-dim);}
.search-field input:focus-visible,
.search-field select:focus-visible{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber);}

/* ---------- Pied de page ---------- */
.page-credit{
  text-align:center;
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--muted-dim);
  padding:0 24px 28px;
}

/* ---------- Petits écrans (commun aux 3 pages) ---------- */
@media (max-width:480px){
  header{padding:20px 16px 16px;}
  .brand h1{font-size:21px;}
  .pin-icon{width:28px;height:28px;}
  main{padding:20px 16px 48px;}
  .import-btn{font-size:13px;padding:11px 16px;}
  .search-field input{padding:11px 12px;font-size:14px;}
}
