/* ============================================================
   ASTT / ECETT — Style Sportif & Thème Rouge/Noir/Blanc
   ============================================================ */
:root {
  --rouge: #dc2626;
  --rouge-fonce: #b91c1c;
  --rouge-clair: #fef2f2;
  --noir: #0f172a;
  --noir-doux: #1e293b;
  --fond: #f8fafc;
  --surface: #ffffff;
  --texte: #0f172a;
  --muted: #64748b;
  --bord: #e2e8f0;
  --ok: #16a34a;
  --warn: #d97706;
  --rayon: 14px;
  --ombre: 0 4px 6px -1px rgba(220, 38, 38, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --ombre-carte: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--fond); color:var(--texte); line-height:1.6;
}

h1,h2,h3{color:var(--noir); font-weight:800; letter-spacing:-0.02em}
h1{font-size:1.6rem; margin:.2em 0}
h2{font-size:1.25rem; margin:1.5em 0 .6em; display:flex; align-items:center; gap:8px}
h2::before{content:""; display:inline-block; width:6px; height:20px; background:var(--rouge); border-radius:3px}
a{color:var(--rouge); text-decoration:none}
a:hover{color:var(--rouge-fonce); text-decoration:underline}

.container{max-width:1200px; margin:0 auto; padding:16px 20px 48px}

/* ---------- Topbar & Logo Club ---------- */
.topbar{
  background:var(--noir); color:#fff; box-shadow:0 4px 20px rgba(0,0,0,.2);
  position:sticky; top:0; z-index:100; border-bottom:3px solid var(--rouge);
}
.barre{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 20px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; font-weight:800; font-size:1.15rem}
.brand img{height:40px; width:auto; border-radius:6px; background:#fff; padding:2px; object-fit:contain}
.nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.nav a{
  color:#e2e8f0; text-decoration:none; padding:8px 14px; border-radius:8px;
  font-weight:600; font-size:.92rem; transition:all .2s ease;
}
.nav a:hover{background:rgba(220,38,38,.2); color:#fff}
.burger{display:none; background:none; border:0; cursor:pointer; padding:6px}
.burger span{display:block; width:24px; height:3px; background:#fff; border-radius:2px; margin:5px 0}

/* ---------- Cartes et grilles sportives ---------- */
.card{
  background:var(--surface); border:1px solid var(--bord); border-radius:var(--rayon);
  box-shadow:var(--ombre-carte); padding:18px 20px; transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 25px -5px rgba(220,38,38,.12)}
.card-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:1.05rem; margin-bottom:12px; padding-bottom:10px; border-bottom:2px solid var(--fond);
}
.carton-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.grille-journees{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grille-admin{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.carte-journee{text-decoration:none; color:inherit; display:block}
.carte-journee:hover{border-color:var(--rouge)}

.entete{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin:14px 0 24px}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.actions-bar{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:24px 0 10px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--bord); background:var(--surface);
  color:var(--texte); padding:9px 16px; border-radius:10px; cursor:pointer; text-decoration:none;
  font-weight:600; font-size:.9rem; transition:all .2s ease;
}
.btn:hover{border-color:var(--rouge); color:var(--rouge); background:var(--rouge-clair)}
.btn-primary{background:var(--rouge); border-color:var(--rouge); color:#fff; box-shadow:0 4px 12px rgba(220,38,38,.3)}
.btn-primary:hover{background:var(--rouge-fonce); color:#fff; border-color:var(--rouge-fonce)}
.btn-danger{background:#dc2626; border-color:#dc2626; color:#fff}
.btn-danger:hover{opacity:.9; color:#fff}
.btn-ghost{background:transparent}
.btn-sm{padding:5px 10px; font-size:.82rem}
.btn-large{padding:12px 24px; font-size:1.05rem}
.btn-pleine{width:100%; justify-content:center}

/* ---------- Formulaires & Saisie ---------- */
.field{margin-bottom:12px}
.field label{display:block; font-weight:700; font-size:.86rem; margin-bottom:5px; color:var(--noir)}
.field input,.field select,.field textarea,textarea,input[type=search].plein,.entree-courte{
  width:100%; padding:10px 12px; border:2px solid var(--bord); border-radius:10px; font:inherit; background:#fff;
  transition:border-color .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus,textarea:focus,input:focus{
  outline:none; border-color:var(--rouge); box-shadow:0 0 0 4px rgba(220,38,38,.1)
}
.slot{
  width:100%; padding:9px 12px; margin-bottom:8px; border:2px solid var(--bord); border-radius:10px;
  font:inherit; background:#fff; font-weight:600; transition:border-color .2s;
}
.slot:focus{border-color:var(--rouge); outline:none}
.form-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.centre-forme{max-width:440px; margin:30px auto}

/* ---------- Tableaux & Matrices ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--bord); border-radius:var(--rayon); background:#fff; box-shadow:var(--ombre)}
.table{width:100%; border-collapse:collapse; font-size:.92rem; min-width:600px}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--bord); text-align:center; white-space:nowrap}
.table th{background:var(--noir); color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em}
.table tbody tr:hover{background:var(--rouge-clair)}
.table .gauche{text-align:left}
.table .a-droite{text-align:right}
.col-actuelle{background:#fee2e2 !important; font-weight:800; color:var(--rouge-fonce)}
.cell-joue{background:#f0fdf4; font-weight:700; color:#166534}
.cell-brule{background:#fef2f2; color:#dc2626; font-weight:900}

/* ---------- Badges Divisions (Couleur par niveau) ---------- */
.badge{display:inline-block; background:#e2e8f0; color:#334155; border-radius:999px; padding:3px 10px; font-size:.78rem; font-weight:800}
.badge-ok{background:#dcfce7; color:#166534}
.badge-warn{background:#fef3c7; color:#92400e}
.badge-err{background:#fee2e2; color:#dc2626}
.badge-role-a{background:#fee2e2; color:#991b1b}
.badge-role-c{background:#dbeafe; color:#1e40af}

/* Badge divisions sportives (R2, D1, D3, D4) */
.badge-div-r2{background:#7f1d1d; color:#fee2e2}
.badge-div-d1{background:#991b1b; color:#fee2e2}
.badge-div-d3{background:#1e293b; color:#e2e8f0}
.badge-div-d4{background:#475569; color:#f1f5f9}

/* ---------- Chips & Stats ---------- */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0}
.chip{
  border:2px solid var(--bord); background:#fff; border-radius:999px; padding:7px 16px;
  cursor:pointer; font-weight:700; font-size:.9rem; transition:all .2s;
}
.chip:hover{border-color:var(--rouge); color:var(--rouge)}
.chip-actif{background:var(--rouge); border-color:var(--rouge); color:#fff; box-shadow:0 4px 12px rgba(220,38,38,.3)}
.chip-close{color:var(--muted)}

.stat-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin:18px 0 28px}
.stat{
  background:var(--surface); border:1px solid var(--bord); border-radius:var(--rayon);
  padding:18px; text-align:center; box-shadow:var(--ombre); position:relative; overflow:hidden;
}
.stat::after{content:""; position:absolute; bottom:0; left:0; right:0; height:4px; background:var(--rouge)}
.stat strong{display:block; font-size:2rem; color:var(--rouge); font-weight:900}
.stat span{color:var(--muted); font-size:.88rem; font-weight:600}

/* ---------- Listes joueurs & Alertes ---------- */
.liste-joueurs{list-style:none; margin:0; padding:0}
.liste-joueurs li{
  padding:8px 10px; border-bottom:1px solid var(--fond); display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-weight:600;
}
.liste-joueurs li:nth-child(even){background:#fafafa}
.liste-joueurs li:last-child{border-bottom:0}

.alert{padding:14px 16px; border-radius:12px; margin:14px 0; font-size:.95rem; border:1px solid transparent; font-weight:600}
.alert-error{background:#fef2f2; border-color:#fecaca; color:#b91c1c}
.alert-ok, .alert-success {background:#f0fdf4; border-color:#bbf7d0; color:#166534}
.alert-warn {background:#fffbeb; border-color:#fde68a; color:#92400e}
.alert-info {background:#eff6ff; border-color:#bfdbfe; color:#1e40af}

.pied{text-align:center; color:var(--muted); font-size:.88rem; padding:36px 16px 60px}

/* ---------- Pass équipes FFTT ---------- */
.pass-code{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--noir); color:#fff; border-radius:var(--rayon);
  padding:16px 18px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.4rem; font-weight:800; letter-spacing:.08em;
}
.pass-code .bouton-copier{color:#fff; border-color:rgba(255,255,255,.35); flex:none}
.pass-code .bouton-copier:hover{border-color:#fff; background:rgba(255,255,255,.12); color:#fff}
.pass-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.05em}

/* ---------- Mobile & Responsive ---------- */
@media (max-width:859px){
  .burger{display:block}
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--noir);
    flex-direction:column; border-top:2px solid var(--rouge); box-shadow:0 12px 24px rgba(0,0,0,.3);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.08); width:100%; border-radius:0}
}
@media (max-width:899px){
  .matrix-block{display:none}
}
@media print{
  .no-print,.topbar,.pied{display:none !important}
  body{background:#fff}
  .card{border:1px solid #999; box-shadow:none}
}