/* ============================================================
   TOURNOI DE GESTION — styles communs (thème café)
   Mobile-first, responsive, aucune dépendance externe.
   ============================================================ */
:root {
  --brun: #5d4037;
  --brun-fonce: #3e2723;
  --creme: #faf6f0;
  --carte: #ffffff;
  --ambre: #d97706;
  --ambre-clair: #fef3e2;
  --vert: #2e7d32;
  --vert-clair: #e8f5e9;
  --rouge: #c62828;
  --rouge-clair: #fdecea;
  --bleu: #1565c0;
  --bleu-clair: #e3f2fd;
  --gris: #6b6b6b;
  --bord: #e8e0d5;
  --ombre: 0 2px 10px rgba(93, 64, 55, .08);
  --radius: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--creme);
  color: var(--brun-fonce);
  font-size: 16px;
  line-height: 1.45;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: .4em 0; }
a { color: var(--bleu); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 12px; }
.wrap-narrow { max-width: 640px; margin: 0 auto; padding: 16px; }

/* ---------- En-tête ---------- */
header.app {
  background: linear-gradient(120deg, var(--brun-fonce), var(--brun));
  color: #fff;
  padding: 12px 16px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
header.app .inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
header.app .titre { font-weight: 700; font-size: 1.05rem; }
header.app .sous { opacity: .85; font-size: .8rem; }
header.app .spacer { flex: 1; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.16);
  border-radius: 999px; padding: 4px 12px;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.pill.vert { background: rgba(76,175,80,.35); }
.pill.rouge { background: rgba(244,67,54,.4); }

/* ---------- Cartes / sections ---------- */
.card {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 16px;
  margin: 12px 0;
}
.card h2 { display: flex; align-items: center; gap: 8px; }
.muted { color: var(--gris); font-size: .85rem; }
.small { font-size: .85rem; }
.center { text-align: center; }

/* ---------- Onglets ---------- */
.tabs {
  display: flex; gap: 4px; margin: 12px 0 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 2px solid var(--bord);
}
.tabs button {
  appearance: none; border: none; background: none;
  padding: 10px 14px; font-size: .95rem; font-weight: 600;
  color: var(--gris); cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  font-family: inherit;
}
.tabs button.actif { color: var(--brun-fonce); border-bottom-color: var(--ambre); }
.tab-page { display: none; }
.tab-page.actif { display: block; }

/* ---------- Boutons ---------- */
.btn {
  appearance: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  padding: 12px 20px; border-radius: 12px;
  background: var(--ambre); color: #fff;
  box-shadow: 0 2px 6px rgba(217,119,6,.35);
  transition: transform .05s, filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn:disabled { background: #c9bfb2; box-shadow: none; cursor: not-allowed; }
.btn.secondaire { background: #fff; color: var(--brun-fonce); border: 2px solid var(--bord); box-shadow: none; }
.btn.danger { background: var(--rouge); box-shadow: 0 2px 6px rgba(198,40,40,.3); }
.btn.vert { background: var(--vert); box-shadow: 0 2px 6px rgba(46,125,50,.3); }
.btn.large { width: 100%; padding: 15px; font-size: 1.1rem; }
.btn.mini { padding: 6px 12px; font-size: .85rem; border-radius: 9px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
}
.badge.vert { background: var(--vert-clair); color: var(--vert); }
.badge.rouge { background: var(--rouge-clair); color: var(--rouge); }
.badge.ambre { background: var(--ambre-clair); color: var(--ambre); }
.badge.bleu { background: var(--bleu-clair); color: var(--bleu); }
.badge.gris { background: #eee; color: var(--gris); }

/* ---------- Formulaires ---------- */
label.champ { display: block; margin: 12px 0 4px; font-weight: 600; font-size: .92rem; }
.hint { font-size: .8rem; color: var(--gris); margin: 2px 0 0; }
input[type=text], input[type=number], input[type=password], select {
  width: 100%; padding: 11px 12px; font-size: 1.05rem;
  border: 2px solid var(--bord); border-radius: 10px;
  background: #fff; color: var(--brun-fonce); font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--ambre); }
input.invalide { border-color: var(--rouge); background: var(--rouge-clair); }

/* Champ avec unité et boutons +/- */
.saisie { display: flex; align-items: stretch; gap: 6px; }
.saisie input { text-align: center; font-weight: 700; }
.saisie .pas {
  flex: 0 0 44px; border: 2px solid var(--bord); border-radius: 10px;
  background: #fff; font-size: 1.2rem; font-weight: 700; color: var(--brun);
  cursor: pointer; font-family: inherit;
}
.saisie .pas:active { background: var(--ambre-clair); }

/* ---------- Tableaux ---------- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.donnees { border-collapse: collapse; width: 100%; font-size: .92rem; }
table.donnees th, table.donnees td {
  padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--bord);
  white-space: nowrap;
}
table.donnees th { background: var(--creme); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris); }
table.donnees td:first-child, table.donnees th:first-child { text-align: left; }
table.donnees tr.total td { font-weight: 800; border-top: 2px solid var(--brun); background: var(--ambre-clair); }
table.donnees tr.sous-total td { font-weight: 700; }
.pos { color: var(--vert); font-weight: 700; }
.neg { color: var(--rouge); font-weight: 700; }

/* ---------- Chrono ---------- */
.chrono {
  font-variant-numeric: tabular-nums;
  font-weight: 800; letter-spacing: .02em;
}
.chrono.grand { font-size: 2rem; }

/* ---------- Bandeaux d'alerte ---------- */
.bandeau {
  border-radius: 12px; padding: 12px 14px; margin: 10px 0;
  font-weight: 600; font-size: .95rem;
  display: flex; gap: 10px; align-items: flex-start;
}
.bandeau.info { background: var(--bleu-clair); color: var(--bleu); }
.bandeau.ok { background: var(--vert-clair); color: var(--vert); }
.bandeau.alerte { background: var(--ambre-clair); color: #9a5b00; }
.bandeau.erreur { background: var(--rouge-clair); color: var(--rouge); }

#hors-ligne {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: var(--rouge); color: #fff; padding: 10px 18px;
  border-radius: 999px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  display: none; z-index: 100; font-size: .9rem; white-space: nowrap;
}

/* ---------- Grilles ---------- */
.grille-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.grille-3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.grille-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) {
  .grille-2 { grid-template-columns: 1fr 1fr; }
  .grille-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grille-stats { grid-template-columns: repeat(4, 1fr); }
  h1 { font-size: 1.6rem; }
}
.stat {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 12px;
  padding: 12px; text-align: center;
}
.stat .valeur { font-size: 1.35rem; font-weight: 800; }
.stat .legende { font-size: .78rem; color: var(--gris); margin-top: 2px; }

/* ---------- Barres CSS (mini graphiques) ---------- */
.barre-ligne { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.barre-ligne .nom { flex: 0 0 110px; font-size: .85rem; text-align: right; }
.barre-ligne .barre { flex: 1; height: 20px; background: var(--creme); border-radius: 6px; overflow: hidden; }
.barre-ligne .barre > div { height: 100%; background: var(--ambre); border-radius: 6px; min-width: 2px; transition: width .6s ease; }
.barre-ligne .val { flex: 0 0 76px; font-size: .85rem; font-weight: 700; }

/* ============================================================
   ÉCRAN DE SYNTHÈSE (projection) — thème sombre plein écran
   ============================================================ */
body.ecran {
  background: #17110d;
  color: #f5efe8;
  min-height: 100vh;
}
body.ecran .wrap { max-width: 1500px; }
.ecran-titre {
  text-align: center; padding: 18px 10px 4px;
  font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 800; color: #f0d9b5;
}
.ecran-sous { text-align: center; color: #b7a58e; font-size: clamp(.9rem, 2vw, 1.2rem); }
.ecran-chrono {
  text-align: center; font-variant-numeric: tabular-nums;
  font-size: clamp(4rem, 18vw, 13rem); font-weight: 900; line-height: 1.05;
  color: #ffe1ad; text-shadow: 0 0 60px rgba(255, 180, 60, .25);
}
.ecran-chrono.urgent { color: #ff8a65; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.ecran-etat { text-align: center; font-size: clamp(1rem, 2.5vw, 1.6rem); font-weight: 700; color: #d3c3ab; margin: 6px 0 14px; }
.ecran-validations {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  padding: 8px 16px 20px;
}
.ecran-validations .equipe {
  background: #241a14; border: 2px solid #3a2c22;
  padding: 8px 18px; border-radius: 999px;
  font-size: clamp(.9rem, 2vw, 1.25rem); font-weight: 700; color: #cbb9a2;
}
.ecran-validations .equipe.ok { border-color: #66bb6a; color: #a5d6a7; background: #1b2a1c; }
.ecran-carte {
  background: #221912; border: 1px solid #3a2c22; border-radius: 18px;
  padding: 18px 20px; margin: 12px;
}
.ecran-carte h2 { color: #f0d9b5; font-size: clamp(1.1rem, 2.2vw, 1.6rem); }
.ecran-grille { display: grid; grid-template-columns: 1fr; gap: 4px; max-width: 1500px; margin: 0 auto; }
@media (min-width: 900px) { .ecran-grille { grid-template-columns: 1fr 1fr; } }
.ecran-stat-ligne {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: clamp(1rem, 2vw, 1.35rem); padding: 7px 2px;
  border-bottom: 1px solid #33261c;
}
.ecran-stat-ligne .v { font-weight: 800; color: #ffe1ad; font-variant-numeric: tabular-nums; }

/* Palmarès */
.podium {
  display: flex; align-items: flex-end; justify-content: center; gap: 14px;
  margin: 26px auto 10px; max-width: 900px; padding: 0 10px;
}
.podium .marche {
  flex: 1; text-align: center; border-radius: 14px 14px 0 0; padding: 14px 6px;
  animation: monte .9s ease both;
}
.podium .m1 { background: linear-gradient(180deg, #ffd54f, #b8860b); height: 220px; animation-delay: .9s; }
.podium .m2 { background: linear-gradient(180deg, #cfd8dc, #78909c); height: 160px; animation-delay: .5s; }
.podium .m3 { background: linear-gradient(180deg, #d7a06b, #8d5524); height: 120px; animation-delay: .1s; }
@keyframes monte { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.podium .medaille { font-size: clamp(1.6rem, 4vw, 3rem); }
.podium .nom { font-weight: 900; font-size: clamp(.95rem, 2.4vw, 1.5rem); color: #241a12; }
.podium .score { font-weight: 700; font-size: clamp(.8rem, 1.8vw, 1.1rem); color: #241a12; opacity: .8; }
.classement-final { max-width: 760px; margin: 10px auto 40px; padding: 0 14px; }
.classement-final .ligne {
  display: flex; align-items: center; gap: 12px;
  background: #221912; border: 1px solid #3a2c22; border-radius: 12px;
  padding: 10px 16px; margin: 8px 0;
  font-size: clamp(.95rem, 2vw, 1.3rem);
  animation: apparait .5s ease both;
}
@keyframes apparait { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.classement-final .rang { font-weight: 900; color: #ffe1ad; flex: 0 0 2.2em; }
.classement-final .nom { flex: 1; font-weight: 700; }
.classement-final .val { font-variant-numeric: tabular-nums; font-weight: 800; color: #ffe1ad; }

/* ---------- QR codes (impression possible) ---------- */
.qr-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.qr-carte { text-align: center; border: 2px dashed var(--bord); border-radius: 12px; padding: 14px; background: #fff; }
.qr-carte img { width: 180px; height: 180px; }
.qr-carte .lien { font-size: .72rem; word-break: break-all; color: var(--gris); }
@media print {
  header.app, .tabs, .btn, #hors-ligne, .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}