/* assets/style.css — thème clair minimal */
:root {
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
  --accent: #2563eb;

  /* Layout */
  --max-width: 1800px;
  --page-gutter: 16px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 16px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); }
img.flag { vertical-align: middle; border: 1px solid var(--border); border-radius: 2px; }
.team { display:inline-flex; align-items:center; gap:.35rem; font-weight:600; }

.container { max-width: var(--max-width); margin: 1.5rem auto; padding: 0 1rem; }

/* Layout */
.site-main{max-width:var(--max-width);margin:0 auto;padding-top:1rem;padding-bottom:2.5rem}
.site-footer{max-width:var(--max-width);margin:0 auto}

/* Header (topbar) */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);box-shadow:0 10px 24px rgba(17,24,39,.06)}
.topbar-inner{max-width:var(--max-width);margin:0 auto;position:relative;display:flex;align-items:center;gap:.85rem;justify-content:space-between;padding:.8rem var(--page-gutter)}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--text);text-decoration:none;font-weight:800}
.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#eef2ff,#ecfeff);border:1px solid #c7d2fe}
.brand-title{letter-spacing:.2px}
.nav-toggle{display:none;border:1px solid var(--border);background:#fff;border-radius:12px;width:44px;height:44px;padding:0;cursor:pointer;align-items:center;justify-content:center}
.burger{display:flex;flex-direction:column;gap:4px}
.burger span{display:block;width:20px;height:2px;background:#111827;border-radius:999px}
.nav-links{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.nav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .78rem;border-radius:999px;color:var(--text);font-weight:750;font-size:.95rem;border:1px solid transparent;text-decoration:none;white-space:nowrap}
.nav-link:hover{background:#f3f4f6;text-decoration:none}
.nav-link.active{background:#eef2ff;border-color:#c7d2fe;color:#1d4ed8}
.nav-user{display:flex;align-items:center;gap:.45rem;margin-left:.2rem;padding-left:.2rem}
.nav-user-name{font-weight:700;color:#111827;padding:.3rem .55rem;border-radius:999px;background:#f9fafb;border:1px solid var(--border);white-space:nowrap}
.nav-link.logout{background:#f9fafb;border-color:var(--border)}

@media (max-width: 900px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:calc(100% + .6rem);background:#fff;border:1px solid var(--border);border-radius:14px;padding:.6rem;box-shadow:0 18px 40px rgba(0,0,0,.14)}
  .nav-links.open{display:flex;flex-direction:column;align-items:stretch}
  .nav-user{width:100%;justify-content:space-between;margin-left:0;padding-left:0}
  .nav-link{width:100%;justify-content:space-between}
}

.inline { display: inline; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.card h2, .card h3 { margin-top: 0; }

@media (max-width: 600px){
  .card{padding:.85rem;border-radius:14px}
  .page-header{margin:.75rem 0}
}

/* En-tête + onglets (ex: page Privé) */
.page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin: 1rem 0; }
.page-header h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; }
.page-header p { margin: .35rem 0 0; }
.page-header-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }

.subnav { display:flex; flex-wrap:wrap; gap:.5rem; border-bottom: 1px solid var(--border); padding-bottom: .75rem; margin-bottom: 1rem; }
.subnav a[role="tab"] { display:inline-block; padding:.38rem .7rem; border-radius:999px; border: 1px solid var(--border); background:#f9fafb; color: var(--text); font-weight: 700; font-size: .9rem; text-decoration:none; }
.subnav a[role="tab"].active { background:#eef2ff; border-color:#c7d2fe; color:#1d4ed8; }
.subnav a[role="tab"]:hover { background:#f3f4f6; }

/* Sous-onglets (ex: Groupes -> Équipes / Résultats) */
.subsubnav { display:flex; flex-wrap:wrap; gap:.5rem; margin: 0 0 1rem; }
.subsubnav a { display:inline-block; padding:.34rem .65rem; border-radius:999px; border: 1px solid var(--border); background:#ffffff; color: var(--text); font-weight: 700; font-size: .85rem; text-decoration:none; }
.subsubnav a.active { background:#f0f9ff; border-color:#bae6fd; color:#0369a1; }
.subsubnav a:hover { background:#f9fafb; }


.section-split { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 900px) { .section-split { grid-template-columns: 1fr; } }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Phases finales (admin) : 1 colonne plus tôt pour le confort mobile */
@media (max-width: 900px){
  .ko-admin-split{grid-template-columns:1fr!important}
}

input[type="text"], input[type="number"], input[type="datetime-local"], select {
  width: 100%; padding: .55rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text);
}

select:disabled,
input:disabled{
  background:#e5e7eb;
  color:#6b7280;
  cursor:not-allowed;
}
button, .btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: .55rem .8rem; border-radius: 8px; color: #fff; font-weight: 600; cursor: pointer;
}
button.secondary { background: #f3f4f6; color: var(--text); border-color: #d1d5db; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: .5rem .4rem; border-bottom: 1px solid var(--border); text-align: left; }
.table th { color: var(--muted); font-weight: 600; }

/* Tables compactes (Phases finales admin) */
.table.compact th, .table.compact td{padding:.38rem .35rem}
.table.compact input[type="text"],
.table.compact input[type="number"],
.table.compact input[type="datetime-local"],
.table.compact select{padding:.45rem .5rem;border-radius:10px}

.tag { display:inline-block; padding:.25rem .5rem; border-radius:999px; background:#f3f4f6; color:#111827; font-size:12px; border:1px solid var(--border); }
.notice { padding:.6rem .8rem; border-radius:8px; background:#f9fafb; border:1px solid var(--border); color:#374151; }

.right { text-align:right; }
.center { text-align:center; }

.linklike{background:none;border:none;padding:0;cursor:pointer}
.linklike.danger{color:#c0392b}
.linklike.danger:hover{color:#a93226;text-decoration:underline}
.linklike.small{font-size:.9rem}
.inline{display:inline-block}
.tiny-input{max-width:130px}

/* Boutons "Enregistrer" flottants (Privé) */
.has-floating{padding-bottom:110px}
.floating-actions{
  position:fixed;
  right:calc(24px + env(safe-area-inset-right));
  bottom:calc(24px + env(safe-area-inset-bottom));
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.floating-actions .hint{font-size:.78rem;color:var(--muted);text-align:right}
.floating-actions button{box-shadow:0 10px 30px rgba(0,0,0,.12)}
.floating-actions button.secondary{box-shadow:0 10px 30px rgba(0,0,0,.08)}

@media(max-width:720px){
  .floating-actions{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* Sur mobile : on évite que le bouton flotte sur les champs en bas */
@media(max-width:720px){
  .has-floating{padding-bottom:140px}
  .floating-actions button{padding:.7rem .9rem;border-radius:14px}
}

:root{--page-gutter:16px}
.site-header,.site-main,.site-footer{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
@media(min-width:1280px){:root{--page-gutter:24px}}
.hero h1{margin-bottom:.25rem}
.hero-points{margin:.5rem 0 1rem 1.25rem}
.hero-points li{margin:.15rem 0}
.team-grid{gap:1rem}
.team-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:.9rem 1rem}
.team-role{font-size:.9rem;color:#6b7280}
.team-card .team-name{font-weight:700;font-size:1.05rem}

/* Règles */
.card h3{margin-top:.75rem}
.card ul{margin:.25rem 0 .75rem 1.25rem}
.card ul li{margin:.1rem 0}

/* Bouton supprimer discret */
.btn-ghost{background:transparent;border:1px solid #d3d8e0;color:#3b5bfd;border-radius:8px;padding:.35rem .6rem}
.btn-ghost:hover{background:#eef2ff}
.text-right{text-align:right}
.stack label{display:block;margin-bottom:.35rem}
.stack input, .stack select{width:100%}

/* lien style bouton dans nav */
.linklike{background:none;border:none;color:#3b5bfd;cursor:pointer;padding:0;font:inherit}
.linklike:hover{text-decoration:underline}

.text-right{text-align:right}


/* Admin (Privé) — grille groupes : 3 colonnes dès 1500px */
.admin-groups-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(min-width:1500px){.admin-groups-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.admin-groups-grid{grid-template-columns:1fr}}
.admin-groups-grid .card{margin-bottom:0}
.admin-side{display:flex;flex-direction:column;gap:.35rem;align-items:flex-end}
.admin-side-top{display:flex;gap:.35rem;align-items:center;justify-content:flex-end;width:100%}
.admin-side .ord{width:4.2rem;text-align:center}
.admin-side .dt{width:100%;max-width:14.5rem}
.admin-side .score{display:flex;align-items:center;gap:.35rem}
.admin-side .score input{width:4rem;text-align:center}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;border-radius:999px;border:1px solid var(--border);background:#f9fafb;color:#374151;font-size:.82rem;white-space:nowrap}
.pill.locked{background:#f3f4f6}

/* Pills nav (scrollable on mobile) */
.tabs{display:flex;gap:.5rem;flex-wrap:nowrap;align-items:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav, .subsubnav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar, .subnav::-webkit-scrollbar, .subsubnav::-webkit-scrollbar{display:none}

/* Pronostics / Match cards — 3 colonnes dès 1500px (sinon 2, puis 1 sur mobile) */
.matches-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
/* Desktop : 3 colonnes pour voir un max d'infos */
@media(min-width:1200px){.matches-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.matches-grid{grid-template-columns:1fr}}

.matchcard{padding:.55rem .6rem;border-radius:14px;border:1px solid var(--border);background:#fff}
.matchcard.locked{background:#f3f4f6;opacity:.95}
.matchcard.status-exact{background:#ecfdf5;border-color:#a7f3d0}
.matchcard.status-good{background:#f0fdf4;border-color:#bbf7d0}
.matchcard.status-bad{background:#fef2f2;border-color:#fecaca}

.matchline{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.6rem;align-items:center}
.matchline .team{min-width:0}
.matchline .team:first-child{justify-content:flex-start}
.matchline .team:last-child{justify-content:flex-end;text-align:right}
/* Les noms ne doivent jamais être tronqués (pas d'ellipsis) */
.team-name{font-weight:700;font-size:.98rem;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;hyphens:none}

/* Pour garder une mise en page stable malgré les retours à la ligne */
.matchline .team{min-height:2.6em}

.scorebox{display:flex;align-items:center;gap:.35rem}
.scorebox input{width:3.1rem;text-align:center}
@media(max-width:720px){
  .scorebox input{width:2.6rem;padding:.5rem .4rem}
  .team-name{font-size:.92rem;line-height:1.18}
  .matchline{gap:.45rem}
  .matchline .team{min-height:2.2em}
}

@media(max-width:380px){
  .scorebox input{width:2.35rem;padding:.46rem .35rem}
  .team-name{font-size:.9rem}
}

.matchmeta{margin-top:.4rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.official-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;border-radius:999px;border:1px solid var(--border);background:#f9fafb;color:#374151;font-size:.82rem;white-space:nowrap}
.kickoff-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;border-radius:999px;border:1px solid var(--border);background:#f9fafb;color:#374151;font-size:.82rem;white-space:nowrap}
.kickoff-pill.locked{background:#f3f4f6}
.status-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:.82rem;white-space:nowrap}

/* Inputs disabled look for scores */
.scorebox input:disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed;pointer-events:none}

.matches-stack{display:flex;flex-direction:column;gap:.6rem}

/* Classement — podium */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0 1.25rem}
.podium-slot{border:1px solid var(--border);border-radius:16px;background:#fff;padding:.85rem .9rem;text-align:center}
.podium-slot.first{background:#eef2ff;border-color:#c7d2fe;transform:translateY(-6px)}
.podium-slot.second{background:#f9fafb}
.podium-slot.third{background:#f9fafb}
.podium-rank{width:38px;height:38px;border-radius:12px;margin:0 auto .5rem;display:flex;align-items:center;justify-content:center;font-weight:900;border:1px solid var(--border);background:#fff}
.podium-slot.first .podium-rank{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.podium-name{font-weight:800;font-size:1.05rem;line-height:1.2}
.podium-points{margin-top:.25rem;color:var(--muted);font-weight:700}
/* Podium mobile : compact en 3 colonnes */
@media(max-width:900px){
  .podium{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .podium-slot{padding:.65rem .55rem;border-radius:14px}
  .podium-slot.first{transform:none}
  .podium-rank{width:34px;height:34px;border-radius:12px;margin:0 auto .35rem}
  .podium-name{font-size:.92rem}
  .podium-points{font-size:.82rem}
}

/* Phone : encore plus compact (moins "cartes") */
@media(max-width:600px){
  .podium-slot{padding:.55rem .45rem;border-radius:16px}
  .podium-rank{width:30px;height:30px;border-radius:12px}
  .podium-name{font-size:.85rem}
  .podium-points{font-size:.78rem}
}

/* Pronostics (groupes) — 3 colonnes sur desktop */
.groups-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(min-width:1200px){.groups-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.groups-grid{grid-template-columns:1fr}}