:root {
  --rouge: #c00000;
  --bleu: #1f3864;
  --orange: #e8890c;
  --orange-bg: #fff2cc;
  --vert: #2e7d32;
  --vert-bg: #e2efda;
  --rouge-bg: #fde8e8;
  --gris: #6b7280;
  --bord: #e5e7eb;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f6f7f9; color: #1f2937; font-size: 15px;
}
main { max-width: 1180px; margin: 0 auto; padding: 16px; }
a { color: var(--bleu); }
h1 { font-size: 1.35rem; margin: 8px 0 14px; color: var(--bleu); }
h2 { font-size: 1.05rem; margin: 18px 0 8px; color: var(--bleu); }

/* ---- Nav ---- */
.topnav {
  background: var(--bleu); color: #fff; display: flex; align-items: center;
  flex-wrap: wrap; padding: 0 14px; position: sticky; top: 0; z-index: 10;
}
.topnav .brand a { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem; padding: 12px 0; display: inline-block; }
.navlinks { display: flex; flex-wrap: wrap; margin-left: auto; align-items: center; }
.navlinks a { color: #dbe4f3; text-decoration: none; padding: 12px 10px; font-size: .92rem; }
.navlinks a:hover { color: #fff; }
.navlinks a.logout { color: #f3b6b6; }
.navtoggle, .navburger { display: none; }
@media (max-width: 860px) {
  .navburger { display: block; margin-left: auto; cursor: pointer; font-size: 1.4rem; padding: 10px; }
  .navlinks { display: none; width: 100%; flex-direction: column; align-items: stretch; }
  .navtoggle:checked ~ .navlinks { display: flex; }
  .navlinks a { border-top: 1px solid rgba(255,255,255,.12); }
}

/* ---- Flash ---- */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: .93rem; }
.flash-ok { background: var(--vert-bg); color: #1b5e20; border: 1px solid #b7dcb5; }
.flash-error { background: var(--rouge-bg); color: #9b1c1c; border: 1px solid #f3b6b6; }

/* ---- Cards & tables ---- */
.card { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th { background: var(--bleu); color: #fff; text-align: left; padding: 8px 10px; font-size: .85rem; white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid var(--bord); vertical-align: top; font-size: .9rem; }
tr:hover td { background: #f3f6fb; }
/* Ligne entière cliquable (liste des matchs) — la date n'est plus soulignée */
tr[data-href] { cursor: pointer; }
a.lien-match { text-decoration: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--bord); border-radius: 10px; }
/* Liste des matchs : seul le corps du tableau défile, l'en-tête reste visible.
   La hauteur exacte (2 × 8 lignes) est ajustée en JS ; valeur de repli ci-dessous. */
.table-scroll { max-height: 42rem; overflow-y: auto; }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; }

/* Séparateur de semaine : trait épais avant le 1er match d'une nouvelle semaine */
tr.new-week td { border-top: 3px solid var(--bleu); }

/* ---- Remarques (texte libre, tous utilisateurs) ---- */
.remarque-form { display: flex; gap: 4px; align-items: center; min-width: 180px; }
.remarque-input { padding: 5px 8px; font-size: .85rem; border-color: #dfe4ea; }
.remarque-input:focus { border-color: var(--bleu); outline: none; }
.remarque-input.saving { opacity: .6; }
.remarque-input.saved { border-color: var(--vert); background: var(--vert-bg); }
.remarque-input.save-error { border-color: var(--rouge); background: var(--rouge-bg); }
.remarque-ok { padding: 5px 9px; font-size: .82rem; }
/* Le bouton ✓ ne sert qu'au repli sans JavaScript */
.js .remarque-ok { display: none; }

/* ---- Badges ---- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge-propose { background: var(--orange-bg); color: #92600a; border: 1px solid #edc86d; }
.badge-confirme { background: var(--vert-bg); color: #1b5e20; border: 1px solid #9ccc9a; }
.badge-refuse { background: var(--rouge-bg); color: #9b1c1c; border: 1px solid #f3b6b6; }
.badge-attente { background: #eef0f3; color: var(--gris); border: 1px dashed #c3c8d0; }
.badge-dom { background: var(--vert-bg); color: #1b5e20; }
.badge-ext { background: var(--orange-bg); color: #92600a; }
.badge-conflit { background: var(--rouge-bg); color: #9b1c1c; border: 1px solid #f3b6b6; }

/* ---- Forms ---- */
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #cbd2dc; border-radius: 8px;
  font-size: .95rem; background: #fff;
}
label { font-size: .88rem; font-weight: 600; color: #374151; display: block; margin: 10px 0 4px; }
.checkline { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: .92rem; }
.checkline input { width: auto; }
button, .btn {
  background: var(--bleu); color: #fff; border: 0; border-radius: 8px;
  padding: 9px 16px; font-size: .93rem; cursor: pointer; text-decoration: none;
  display: inline-block; font-weight: 600;
}
button:hover, .btn:hover { filter: brightness(1.15); }
.btn-rouge { background: var(--rouge); }
.btn-vert { background: var(--vert); }
.btn-orange { background: var(--orange); }
.btn-ghost { background: #eef0f3; color: var(--bleu); }
.btn-justif { padding: 9px 18px; }
.spinner { display: inline-block; width: 16px; height: 16px; margin: 0 8px; vertical-align: middle;
  border: 2px solid #cbd5e1; border-top-color: var(--bleu); border-radius: 50%;
  animation: spin .8s linear infinite; }
.spinner[hidden], .spinner-texte[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-sm { padding: 5px 10px; font-size: .84rem; }
form.inline { display: inline; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }

/* ---- Liste des matchs sur mobile : une carte par match, plus de défilement
        horizontal ni de hauteur figée (la page défile normalement) ---- */
@media (max-width: 760px) {
  .table-scroll { max-height: none !important; overflow: visible; border: 0; border-radius: 0; }
  .table-scroll table { background: transparent; }
  .table-scroll thead { display: none; }
  .table-scroll tbody, .table-scroll tr, .table-scroll td { display: block; }
  .table-scroll tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    background: #fff; border: 1px solid var(--bord); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px;
  }
  /* Le trait de changement de semaine passe sur la carte, pas sur chaque cellule */
  .table-scroll tr.new-week { border-top: 3px solid var(--bleu); }
  .table-scroll tr.new-week td { border-top: 0; }
  .table-scroll tr:hover td { background: transparent; }
  .table-scroll td { border: 0; padding: 0; font-size: .92rem; }
  .table-scroll td.vide { display: none; }        /* colonnes sans contenu utile */
  .c-jour, .c-date, .c-heure { font-weight: 600; color: var(--bleu); }
  .c-competition { width: 100%; color: var(--gris); font-size: .84rem; }
  .c-match { width: 100%; }
  .c-remarque { width: 100%; margin-top: 4px; }
  .filtres form { width: 100%; }
  .filtres select { flex: 1 1 100%; }
}

/* ---- Filtres ---- */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filtres select { width: auto; }
.filtres .spacer { flex: 1; }
.filtre-mes { margin: 0; padding: 7px 12px; border: 1px solid #cbd2dc; border-radius: 8px;
  background: #fff; white-space: nowrap; }
.muted { color: var(--gris); font-size: .86rem; }
.conflit-list { background: var(--rouge-bg); border: 1px solid #f3b6b6; border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: .88rem; color: #7f1d1d; }
.warn-list { background: var(--orange-bg); border: 1px solid #edc86d; border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: .88rem; color: #92600a; }

/* ---- Login ---- */
.login-box { max-width: 380px; margin: 60px auto; }
.login-box .card { padding: 24px; }
.login-title { text-align: center; color: var(--rouge); font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
.login-sub { text-align: center; color: var(--gris); margin-bottom: 18px; font-size: .9rem; }

/* Carte « Pour démarrer » escamotable (chevron) */
details.demarrage { padding: 0; }
details.demarrage > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer;
  list-style: none; user-select: none; border-radius: 10px;
}
details.demarrage > summary::-webkit-details-marker { display: none; }
details.demarrage > summary:hover { background: #f3f6fb; }
details.demarrage > summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }
details.demarrage .demarrage-titre { font-weight: 600; color: var(--bleu); font-size: 1.05rem; }
details.demarrage .chevron {
  margin-left: auto; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
details.demarrage[open] .chevron { transform: rotate(-135deg) translate(-2px, -2px); }
details.demarrage[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.demarrage > ul { padding: 0 16px 12px !important; }