:root {
    --ff: 'Bebas Neue', cursive;
    --bg: #ffffff; --dark: #000000; --orange: #f47920;
    --red: #cc0000; --green-ci: #009a44; --blue: #0033cc;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family: var(--ff); background:var(--bg); color:var(--dark); letter-spacing:1px; }
  h1,h2,h3 { font-family: var(--ff); letter-spacing:3px; text-transform:uppercase; }
  button { cursor:pointer; font-family: var(--ff); letter-spacing:2px; text-transform:uppercase; background:var(--bg); }
  input, select, textarea { font-family: var(--ff); }
  input[type="password"] { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing:normal; }

  /* LOGIN */
  #login-screen {
    height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column;
    gap:clamp(10px, 2vh, 20px); background:var(--bg);
  }
  #login-screen h1 { font-size:clamp(24px, 4vh, 32px); color:var(--blue); letter-spacing:6px; }
  #login-form { display:flex; flex-direction:column; gap:clamp(8px, 1.5vh, 12px); width:min(80vw, 280px); }
  #login-form input {
    padding:clamp(8px, 1.5vh, 12px); border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); border-radius:clamp(5px, 1.2vh, 8px); font-size:clamp(13px, 2vh, 15px);
    background:var(--bg); color:var(--dark);
  }
  #login-form button {
    padding:clamp(8px, 1.5vh, 12px); background:var(--bg); border:clamp(1.5px, 0.3vh, 2px) solid var(--blue); color:var(--blue);
    border-radius:clamp(5px, 1.2vh, 8px); font-weight:bold;
  }
  #login-error { color:var(--red); font-size:clamp(12px, 1.8vh, 14px); text-align:center; min-height:clamp(14px, 2.2vh, 18px); }

  /* APP LAYOUT — fond toujours blanc, topbar comprise */
  #app { display:none; height:100vh; flex-direction:column; }
  #app.visible { display:flex; }
  #admin-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:clamp(10px, 1.6vh, 14px) clamp(14px, 2.5vw, 20px); background:var(--bg);
    border-bottom:clamp(1.5px, 0.3vh, 2px) solid var(--dark); flex-shrink:0;
  }
  #admin-topbar .brand { font-size:clamp(15px, 2vh, 18px); letter-spacing:3px; color:var(--orange); }
  #admin-topbar .who { font-size:clamp(10px, 1.4vh, 12px); color:var(--dark); }
  .admin-home-btn--logout { border-color:var(--red); color:var(--red); }
  .admin-home-btn--logout:hover { border-color:var(--red); color:var(--red); }
  #main { flex:1; overflow-y:auto; padding:clamp(16px, 3vh, 28px); background:var(--bg); }
  .admin-hidden-init { display:none; }
  .admin-mb-14 { margin-bottom:clamp(10px, 1.8vh, 14px); }
  .admin-mt-8 { margin-top:clamp(8px, 1.6vh, 12px); }
  .admin-toolbar-col { flex-direction:column; align-items:stretch; gap:clamp(8px, 1.6vh, 12px); }
  .admin-notif-textarea { font-family:inherit; font-size:clamp(13px,1.8vh,15px); padding:clamp(8px,1.4vh,12px); border:clamp(1.5px,0.3vh,2px) solid var(--dark); border-radius:clamp(5px,1.2vh,8px); }
  .admin-mt-16 { margin-top:clamp(12px, 2.4vh, 16px); }
  .admin-h3-margin { margin:clamp(12px, 2.4vh, 16px) 0 clamp(6px, 1.2vh, 8px); }
  .admin-h3-margin-lg { margin:clamp(16px, 3vh, 22px) 0 clamp(8px, 1.6vh, 12px); }
  .admin-mb-8 { margin-bottom:clamp(6px, 1.2vh, 8px); }
  #main h2 { font-size:clamp(18px, 2.6vh, 24px); margin-bottom:clamp(12px, 2vh, 18px); color:var(--dark); }
  .admin-back-btn {
    display:flex; align-items:center; gap:clamp(6px, 1vh, 10px); cursor:pointer;
    font-size:clamp(12px, 1.6vh, 14px); color:var(--dark); background:#ffffff;
    border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); border-radius:clamp(5px, 1.2vh, 8px);
    padding:clamp(8px, 1.4vh, 12px) clamp(14px, 2vh, 18px); margin-bottom:clamp(14px, 2.4vh, 20px);
    width:fit-content;
  }
  .admin-home-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(140px,20vw,180px), 1fr));
    gap:clamp(12px, 2vh, 18px);
  }
  .admin-home-btn {
    background:#ffffff; border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); border-radius:clamp(8px, 1.6vh, 12px);
    padding:clamp(18px, 3vh, 26px) clamp(12px, 2vw, 16px); cursor:pointer; text-align:center;
    font-size:clamp(13px, 1.8vh, 16px); letter-spacing:2px; color:var(--dark);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(6px, 1.2vh, 10px);
    transition:border-color 0.15s, color 0.15s;
  }
  .admin-home-btn:hover { border-color:var(--orange); color:var(--orange); }
  #joueurs-filtres button.filtre-active { background:#ffffff; color:var(--orange); border-color:var(--orange); }

  .kpi-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(140px, 18vw, 190px), 1fr)); gap:clamp(8px, 1.5vh, 14px); margin-bottom:clamp(16px, 3vh, 26px); }
  .kpi-card { border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); border-radius:clamp(6px, 1.4vh, 10px); padding:clamp(10px, 1.8vh, 16px); background:var(--bg); }
  .kpi-card .val { font-size:clamp(20px, 3vh, 26px); font-weight:bold; color:var(--blue); }
  .kpi-card .lbl { font-size:clamp(10px, 1.3vh, 12px); letter-spacing:1px; color:var(--dark); margin-top:clamp(2px, 0.5vh, 6px); }

  .toolbar { display:flex; gap:clamp(6px, 1vh, 10px); margin-bottom:clamp(10px, 1.8vh, 16px); flex-wrap:wrap; align-items:center; }
  .toolbar input { padding:clamp(6px, 1.2vh, 10px); border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); border-radius:clamp(4px, 1vh, 6px); font-size:clamp(12px, 1.6vh, 14px); min-width:min(50vw, 200px); background:var(--bg); color:var(--dark); }
  .toolbar button { padding:clamp(6px, 1.2vh, 10px) clamp(10px, 1.8vh, 16px); border:clamp(1.5px, 0.3vh, 2px) solid var(--blue); background:var(--bg); color:var(--blue); border-radius:clamp(4px, 1vh, 6px); font-size:clamp(11px, 1.4vh, 13px); }
  .toolbar button.danger { border-color:var(--red); color:var(--red); }
  .toolbar button.ok { border-color:var(--green-ci); color:var(--green-ci); }

  table { width:100%; border-collapse:collapse; font-size:clamp(12px, 1.6vh, 14px); }
  th, td { padding:clamp(6px, 1.2vh, 10px) clamp(8px, 1.4vh, 12px); text-align:left; border-bottom:clamp(1.5px, 0.3vh, 2px) solid var(--dark); }
  th { font-size:clamp(10px, 1.3vh, 12px); letter-spacing:1px; text-transform:uppercase; color:var(--dark); border-bottom:clamp(2px, 0.4vh, 3px) solid var(--dark); }
  .badge { display:inline-block; padding:clamp(2px, 0.4vh, 4px) clamp(6px, 1vh, 10px); border-radius:clamp(6px, 1.4vh, 10px); font-size:clamp(10px, 1.3vh, 12px); font-weight:bold; background:var(--bg); border:clamp(1.5px, 0.3vh, 2px) solid; }
  .badge.ok { color:var(--green-ci); border-color:var(--green-ci); }
  .badge.no { color:var(--red); border-color:var(--red); }
  .badge.pending { color:var(--orange); border-color:var(--orange); }
  .row-actions { display:flex; gap:clamp(4px, 0.8vh, 8px); flex-wrap:wrap; }
  .row-actions button { padding:clamp(3px, 0.6vh, 6px) clamp(8px, 1.2vh, 12px); font-size:clamp(10px, 1.3vh, 12px); border-radius:clamp(3px, 0.8vh, 5px); border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); background:var(--bg); color:var(--dark); }

  .empty { color:var(--dark); font-style:normal; padding:clamp(14px, 2.4vh, 22px); text-align:center; }
  .loading { color:var(--dark); padding:clamp(14px, 2.4vh, 22px); text-align:center; }

  .panel-section { display:none; }
  .panel-section.active { display:block; }

  .modal-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:100;
  }
  .modal-overlay.visible { display:flex; }
  .modal-box { background:var(--bg); border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); border-radius:clamp(6px, 1.4vh, 10px); padding:clamp(14px, 2.4vh, 22px); width:min(85vw, 320px); }
  .modal-box h3 { margin-bottom:clamp(8px, 1.4vh, 14px); font-size:clamp(15px, 2vh, 18px); }
  .modal-box input, .modal-box select, .modal-box textarea { width:100%; padding:clamp(6px, 1.2vh, 10px); margin-bottom:clamp(8px, 1.2vh, 12px); border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); border-radius:clamp(4px, 1vh, 6px); font-size:clamp(12px, 1.6vh, 14px); background:var(--bg); color:var(--dark); }
  .modal-box .modal-actions { display:flex; gap:clamp(6px, 1vh, 10px); justify-content:flex-end; }
  .modal-box button { padding:clamp(6px, 1.2vh, 10px) clamp(10px, 1.8vh, 16px); border-radius:clamp(4px, 1vh, 6px); font-size:clamp(11px, 1.4vh, 13px); border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); }

  .toast {
    position:fixed; bottom:clamp(14px, 2.4vh, 22px); right:clamp(14px, 2.4vh, 22px); padding:clamp(10px, 1.6vh, 16px) clamp(14px, 2.2vh, 20px);
    border-radius:clamp(5px, 1.2vh, 8px); background:#ffffff; border:clamp(1.5px, 0.3vh, 2px) solid var(--dark); color:var(--dark); font-family:var(--ff); letter-spacing:1px;
    font-size:clamp(12px, 1.6vh, 14px); z-index:200; display:none;
  }
  .toast.ok { border-color:var(--green-ci); color:var(--green-ci); }
  .toast.err { border-color:var(--red); color:var(--red); }