:root{
  --bg: #F4EFDF;
  --card: #FBF8EF;
  --ink: #1A1712;
  --ink-soft: #4A453C;
  --forest: #3B5B45;
  --forest-deep: #24382B;
  --clay: #8A6F52;
  --ochre: #CC5B2E;
  --ochre-soft: #F3DCC9;
  --line: #E1D8BF;
  --nav-bg: #1C1712;
  --nav-text: #EFE9DA;
  --radius: 14px;
}
*{ box-sizing: border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}
.display{ font-family:'Bebas Neue', sans-serif; letter-spacing: 0.02em; }
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color: inherit; text-decoration: none; }

header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 40px;
  background: var(--nav-bg);
  position: sticky; top:0; z-index: 10;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:30px; height:30px; }
.brand-mark path{ stroke: var(--nav-text) !important; }
.brand-name{ font-size:20px; color: var(--nav-text); text-transform: uppercase; letter-spacing: 0.04em; }
nav{ display:flex; gap:26px; font-size:12.5px; font-weight:600; color: var(--nav-text); text-transform: uppercase; letter-spacing: 0.05em; align-items:center; }
nav a{ opacity: 0.85; }
nav a:hover{ opacity: 1; color: var(--ochre); }

.nav-item{ position: relative; }
.nav-toggle{
  background:none; border:none; cursor:pointer; font: inherit; color: var(--nav-text);
  text-transform: uppercase; letter-spacing: 0.05em; opacity:0.85; padding:0;
}
.nav-toggle:hover{ opacity:1; color: var(--ochre); }
.dropdown-menu{
  display:none; position:absolute; top: 28px; left: -14px; min-width: 220px;
  background: var(--card); border:1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18); padding: 6px; z-index: 20;
  max-height: 320px; overflow-y:auto;
}
.dropdown-menu.open{ display:block; }
.dropdown-menu a{
  display:block; padding: 9px 12px; border-radius:6px; color: var(--ink); font-size:13px;
  text-transform:none; letter-spacing:normal; font-weight:500; opacity:1;
}
.dropdown-menu a:hover{ background: var(--ochre-soft); color: var(--forest-deep); }

.nav-hamburger{ display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-hamburger span{ width:22px; height:2px; background:var(--nav-text); display:block; border-radius:2px; }

@media (max-width: 860px){
  header{ flex-wrap:wrap; padding: 14px 20px; }
  .nav-hamburger{ display:flex; }
  nav{
    display:none; flex-direction:column; align-items:flex-start; gap:2px;
    width:100%; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.15);
  }
  nav.open{ display:flex; }
  .nav-item{ width:100%; }
  .nav-toggle{ padding:9px 0; width:100%; text-align:left; }
  .dropdown-menu{ position:static; box-shadow:none; border:none; background:transparent; margin:0 0 0 10px; padding:0; max-height:none; }
  .dropdown-menu.open{ display:block; }
  nav > a{ padding:9px 0; width:100%; }

  .hero{ padding: 32px 20px 22px; }
  .hero h1{ font-size: 36px; }
  section.block{ padding: 16px 20px 36px; }
  .top5-grid{ grid-template-columns: 1fr; gap:16px; }
  .cat-grid{ grid-template-columns: 1fr; }
  .progress-caption{ flex-direction:column; align-items:flex-start; gap:4px; }
  .admin-table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .admin-form{ max-width:100%; }
}

.hero{ padding: 56px 40px 32px; max-width: 1240px; margin: 0 auto; }
.hero h1{ font-size: 56px; margin: 0 0 6px; color: var(--forest-deep); }
.hero p.lead{ margin: 0 0 20px; color: var(--ink-soft); font-size: 16px; max-width: 620px; }
.progress-caption{ font-size: 14px; color: var(--ink-soft); display:flex; gap:16px; flex-wrap:wrap; }
.progress-caption strong{ color: var(--forest-deep); font-size: 16px; }

section.block{ max-width: 1240px; margin: 0 auto; padding: 20px 40px 56px; }
.block-head{ display:flex; align-items:baseline; gap:14px; margin-bottom: 18px; }
.block-head h2{ font-size: 30px; margin:0; color: var(--forest-deep); }
.block-head .note{ font-size: 11px; color: var(--ochre); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.top5-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px){ .top5-grid{ grid-template-columns: 1fr; } }
.top5-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.top5-card .cat-tag{
  display:flex; align-items:center; gap:8px; padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight:600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--forest-deep);
}
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.h{ background: var(--forest); }
.dot.f{ background: var(--ochre); }

.row5{ display:flex; align-items:center; gap:14px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.row5:last-child{ border-bottom: none; }
.row5.rank-1{ background: var(--ochre-soft); }
.badge{
  width: 28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600;
  background: var(--forest); color: #fff;
}
.row5.rank-1 .badge{ background: var(--ochre); }
.row5 .name{ flex:1; font-size:15px; font-weight:500; }
.row5 .pts{ font-size:15px; font-weight:600; color: var(--forest-deep); white-space:nowrap; }
.row5 .pts small{ font-weight:400; color: var(--ink-soft); font-size:11px; margin-left:3px;}

.cat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .cat-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .cat-grid{ grid-template-columns: 1fr;} }
.cat-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.cat-card h3{ margin: 0 0 12px; font-size: 15px; color: var(--forest-deep); display:flex; align-items:center; gap:8px; }
.cat-card h3 .code{
  font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600;
  background: var(--forest-deep); color:#fff; padding: 2px 7px; border-radius: 6px;
}
.sex-col{ margin-bottom: 12px; }
.sex-col:last-child{ margin-bottom:0; }
.sex-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color: var(--clay); margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.mini-row{ display:flex; align-items:center; gap:8px; font-size:13px; padding: 3px 0; }
.mini-rank{ width:16px; color: var(--ink-soft); font-family:'JetBrains Mono', monospace; font-size:12px; }
.mini-name{ flex:1; }
.mini-pts{ font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--forest-deep); font-weight:600; }
.empty{ font-size:12px; color: var(--ink-soft); font-style: italic; }
.count-pill{
  font-size:11px; font-family:'JetBrains Mono', monospace; font-weight:400;
  color: var(--clay); background: rgba(138,111,82,0.14);
  padding: 2px 8px; border-radius: 20px; margin-left: 8px; white-space: nowrap;
}
.mini-count{ font-size:10px; font-family:'JetBrains Mono', monospace; color: var(--clay); margin-left:4px; }

footer{ text-align:center; padding: 30px 20px 50px; font-size:12px; color: var(--ink-soft); }

.banniere{ width:100%; max-height:280px; object-fit:cover; display:block; }
.encart{
  background: var(--ochre-soft); border-left: 4px solid var(--ochre); border-radius: 8px;
  padding: 14px 18px; margin: 0 0 24px; font-size:14px; color: var(--forest-deep); max-width: 760px;
  white-space: pre-line;
}

/* ---- Admin / Gestion ---- */
.admin-form{ display:flex; flex-direction:column; gap:14px; max-width: 480px; }
.admin-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color: var(--ink-soft); font-weight:500; }
.admin-form input[type=text], .admin-form input[type=password], .admin-form input[type=file]{
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family:'Inter',sans-serif; font-size:14px;
  background: var(--card);
}
.btn-primary{
  align-self:flex-start; padding: 11px 26px; border: 1.5px solid var(--forest-deep); border-radius: 4px;
  background: transparent; color: var(--forest-deep); font-size:12.5px; font-weight:700; cursor:pointer;
  text-transform: uppercase; letter-spacing: 0.06em; transition: all 0.15s;
}
.btn-primary:hover{ background: var(--forest-deep); color:#fff; }
.flash{
  padding: 12px 16px; border-radius: 8px; background: var(--ochre-soft); color: var(--forest-deep);
  font-size: 14px; margin-bottom: 18px; max-width: 620px;
}
.admin-table{ width:100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.admin-table th, .admin-table td{ padding: 10px 16px; text-align:left; font-size: 13px; border-bottom: 1px solid var(--line); }
.admin-table th{ background: var(--ochre-soft); color: var(--forest-deep); text-transform:uppercase; font-size:11px; letter-spacing:0.05em; }
.admin-table tr:last-child td{ border-bottom:none; }