/* Foulées Beaujolaises — calendrier de la saison
   Palette et typographie reprises du site du club : turquoise, doré, Poppins. */

:root{
  --ground:#F1F6F7; --surface:#FFFFFF; --surface-2:#F8FBFB;
  --ink:#0E2026; --ink-2:#4E6B72; --ink-3:#7E979D;
  --line:#DCE8EA; --line-strong:#C1D4D8;
  --brand:#09949E; --brand-ink:#05666E; --brand-soft:#E3F2F4; --brand-strong:#06757F;
  --gold:#F8B737; --gold-ink:#8C5F05; --gold-soft:#FDF2DC;
  --ok:#256E43; --warn:#A8460D; --off:#657F85;
  --ok-soft:#E4F1E9; --warn-soft:#FBEADF; --off-soft:#ECF1F2;
  --focus:#05666E; --on-brand:#FFFFFF; --on-gold:#2E2000;
  --shadow:0 1px 2px rgba(14,32,38,.06), 0 8px 24px -16px rgba(14,32,38,.3);
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B1A1F; --surface:#122A31; --surface-2:#173A42;
    --ink:#EAF3F4; --ink-2:#9DB5BB; --ink-3:#728E95;
    --line:#21414A; --line-strong:#2F5760;
    --brand:#34BCC7; --brand-ink:#63D6E0; --brand-soft:#0F343A; --brand-strong:#6FDAE3;
    --gold:#F8B737; --gold-ink:#FFC85C; --gold-soft:#2E2410;
    --ok:#59BE85; --warn:#E0894B; --off:#8FA7AD;
    --ok-soft:#12291D; --warn-soft:#2B1D12; --off-soft:#1B343A;
    --focus:#63D6E0; --on-brand:#04252A; --on-gold:#2E2000;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -16px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#0B1A1F; --surface:#122A31; --surface-2:#173A42;
  --ink:#EAF3F4; --ink-2:#9DB5BB; --ink-3:#728E95;
  --line:#21414A; --line-strong:#2F5760;
  --brand:#34BCC7; --brand-ink:#63D6E0; --brand-soft:#0F343A; --brand-strong:#6FDAE3;
  --gold:#F8B737; --gold-ink:#FFC85C; --gold-soft:#2E2410;
  --ok:#59BE85; --warn:#E0894B; --off:#8FA7AD;
  --ok-soft:#12291D; --warn-soft:#2B1D12; --off-soft:#1B343A;
  --focus:#63D6E0; --on-brand:#04252A; --on-gold:#2E2000;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -16px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:14.5px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0; text-wrap:balance}
a{color:var(--brand-ink)}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:720px; margin:0 auto; padding-inline:16px}

/* ---------- en-tête ---------- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:var(--ground); border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:12px; padding-block:12px 10px}
.brand{min-width:0; flex:1}
.brand h1{
  font-family:"Poppins",system-ui,sans-serif;
  font-weight:700; font-style:italic; font-size:23px; line-height:1.05;
  letter-spacing:-.01em; text-transform:uppercase;
}
.brand .season{
  font-family:"Poppins",system-ui,sans-serif;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:3px; font-weight:500;
}
.iconbtn{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer;
}
.iconbtn:hover{border-color:var(--line-strong)}
.iconbtn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8}

/* ---------- barre d'outils ---------- */
.toolbar{position:sticky; top:calc(env(safe-area-inset-top,0px) + 62px); z-index:29;
  background:var(--ground); border-bottom:1px solid var(--line); padding-block:0 10px}
.tabs{display:flex; gap:2px; padding-top:2px; margin-bottom:10px;
  border-bottom:1px solid var(--line)}
.tab{
  appearance:none; background:none; border:0; cursor:pointer; padding:9px 2px; margin-right:20px;
  font-family:"Poppins",system-ui,sans-serif; font-size:14px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--brand)}
.tabs{border-bottom-width:1px}

.chipbar{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.chipbar + .chipbar{margin-top:6px}
.chipbar::-webkit-scrollbar{display:none}
.chip{
  flex:none; appearance:none; cursor:pointer; white-space:nowrap;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  border-radius:100px; padding:5px 11px; font-size:13px; font-weight:500;
}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--brand-strong); border-color:var(--brand-strong);
  color:var(--on-brand); font-weight:600}
.chip.prio[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:var(--on-gold)}

.searchrow{display:flex; gap:6px; margin-top:8px}
.searchrow input,.searchrow select{
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r); padding:7px 10px; font-size:14px; min-width:0;
}
.searchrow input{flex:1}
.searchrow input::placeholder{color:var(--ink-3)}

/* ---------- compteur ---------- */
.count{
  font-family:"Poppins",system-ui,sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  padding-block:14px 6px; display:flex; justify-content:space-between; gap:12px; align-items:baseline;
}
.count button{appearance:none;background:none;border:0;cursor:pointer;color:var(--brand-ink);
  font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}

/* ---------- mois ---------- */
.month{
  display:flex; align-items:baseline; gap:10px; padding-block:18px 8px;
}
.month h2{
  font-family:"Poppins",system-ui,sans-serif; font-weight:600;
  font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.month .rule{flex:1; height:1px; background:var(--line)}
.month .n{font-family:"Poppins",system-ui,sans-serif; color:var(--ink-3);
  font-size:13px; font-variant-numeric:tabular-nums}

/* ---------- ligne de course ---------- */
.row{display:flex; gap:12px; padding-block:14px; border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row.is-prio{background:linear-gradient(90deg,var(--gold-soft),transparent 62%);
  margin-inline:-10px; padding-inline:10px; border-radius:6px}
.row.is-next{background:var(--surface); box-shadow:var(--shadow);
  margin-inline:-12px; padding:14px 12px; border-radius:var(--r); border-top:0}
.row.is-past{opacity:.5}

.date{flex:none; width:56px; text-align:center;
  font-family:"Poppins",system-ui,sans-serif; line-height:1}
.date .d{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.date .wd{font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:4px}
.date .mo{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:2px}
.date.vague .d{font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-2); padding-top:6px}

.body{flex:1; min-width:0}
.eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:3px}
.disc{
  font-family:"Poppins",system-ui,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
}
.prio-tag{
  font-family:"Poppins",system-ui,sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink);
  border:1px solid currentColor; border-radius:3px; padding:0 5px;
}
.row h3{font-size:16px; font-weight:600; line-height:1.25; letter-spacing:-.005em}
.meta{color:var(--ink-2); font-size:13.5px; margin-top:3px}
.meta .sep{color:var(--ink-3); padding-inline:5px}
.dists{display:flex; flex-wrap:wrap; gap:4px; margin-top:7px}
.dist{font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink-2);
  background:var(--off-soft); border-radius:4px; padding:2px 6px; white-space:nowrap}
.status{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500;
  border-radius:100px; padding:2px 8px; margin-top:8px}
.status::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.status.ouvert{color:var(--ok); background:var(--ok-soft)}
.status.partiel{color:var(--warn); background:var(--warn-soft)}
.status.complet,.status.inconnu,.status.bientot{color:var(--off); background:var(--off-soft)}
.note{font-size:13px; color:var(--ink-2); margin-top:8px; padding-left:10px;
  border-left:2px solid var(--line-strong)}

/* ---------- actions ---------- */
.actions{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.btn{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--r); padding:7px 12px; font-size:13.5px; font-weight:500;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none;
  min-height:36px;
}
.btn:hover{border-color:var(--line-strong)}
.btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; flex:none}
.btn-primary{background:var(--brand-strong); border-color:var(--brand-strong);
  color:var(--on-brand); font-weight:600}
.btn-primary:hover{filter:brightness(1.08)}
.btn-on{background:var(--ok-soft); border-color:var(--ok); color:var(--ok); font-weight:700}
.btn .n{font-variant-numeric:tabular-nums; opacity:.75}

/* ---------- panneaux ---------- */
.panel{margin-top:10px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:11px 12px}
.panel h4{
  font-family:"Poppins",system-ui,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px;
}
.people{display:flex; flex-wrap:wrap; gap:5px}
.going{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:9px}
.going-lbl{font-family:"Poppins",system-ui,sans-serif; font-size:11px;
  font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  margin-right:2px}
.person{font-size:13px; background:var(--surface); border:1px solid var(--line);
  border-radius:100px; padding:3px 9px}
.person.me{border-color:var(--ok); color:var(--ok); font-weight:700}
.empty{font-size:13px; color:var(--ink-3); font-style:italic}

.lift{display:flex; gap:9px; padding-block:9px; border-top:1px solid var(--line)}
.lift:first-of-type{border-top:0; padding-top:0}
.lift .kind{
  flex:none; font-family:"Poppins",system-ui,sans-serif; font-size:10px;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:2px 6px;
  border-radius:4px; height:fit-content; margin-top:2px;
}
.lift .kind.offre{color:var(--ok); background:var(--ok-soft)}
.lift .kind.demande{color:var(--brand-ink); background:var(--brand-soft)}
.lift .who{font-weight:700; font-size:14px}
.lift .det{font-size:13px; color:var(--ink-2)}
.lift .del{margin-left:auto; appearance:none; background:none; border:0; cursor:pointer;
  color:var(--ink-3); font-size:12px; text-decoration:underline; align-self:flex-start}

.form{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--line-strong)}
.form input,.form select{background:var(--surface); border:1px solid var(--line);
  color:var(--ink); border-radius:8px; padding:7px 9px; font-size:13.5px; min-width:0}
.form input::placeholder{color:var(--ink-3)}
.form .grow{flex:1 1 130px}
.form .sm{width:74px}

/* ---------- identité ---------- */
.me-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; margin-top:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); font-size:13.5px}
.me-bar strong{font-weight:700}
.me-bar button{appearance:none;background:none;border:0;cursor:pointer;
  color:var(--brand-ink); text-decoration:underline; font-size:13.5px; padding:0}

/* ---------- bannières et pied ---------- */
.banner{
  background:var(--brand-soft); border:1px solid var(--brand); color:var(--ink);
  border-radius:var(--r); padding:11px 13px; margin-top:14px; font-size:13.5px;
}
.banner strong{color:var(--brand-ink)}
.subscribe{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px 13px; margin-top:16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); font-size:13.5px}
.subscribe .lbl{font-weight:700; flex:1 1 100%}
footer{color:var(--ink-3); font-size:12.5px; padding-block:26px 34px; text-align:center}
footer a{color:var(--ink-3)}

/* ---------- boîte de dialogue prénom ---------- */
.overlay{position:fixed; inset:0; background:rgba(20,18,19,.55); z-index:60;
  display:grid; place-items:center; padding:16px}
.dialog{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px; width:100%; max-width:340px; box-shadow:var(--shadow)}
.dialog h3{font-size:17px; margin-bottom:5px}
.dialog p{font-size:13.5px; color:var(--ink-2); margin:0 0 12px}
.dialog input{width:100%; background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--ink); border-radius:8px; padding:9px 11px; font-size:15px}
.dialog .row2{display:flex; gap:8px; margin-top:12px; justify-content:flex-end}

@media (max-width:420px){
  .brand h1{font-size:20px}
  .row h3{font-size:15px}
  .date{width:50px}
  .date .d{font-size:23px}
}

[hidden]{display:none!important}
.chipbar select{
  flex:none; background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  border-radius:100px; padding:5px 9px; font-size:13px; font-weight:500; cursor:pointer;
}
.chipbar .divider{flex:none; width:1px; background:var(--line); margin-inline:3px}

footer .devise{
  display:block; font-style:italic; font-weight:700; font-size:14px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--brand-ink);
  margin-bottom:8px;
}