:root{--blue:#054585;--deep:#032b57;--ball:#d7e834;--green:#3e8e6a;--line:#fff;--ink:#0b2342;--bg:#eef3fa;--ok:#1e9d5b;--ko:#d6403a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:16px/1.5 "Trebuchet MS","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2{font-family:"Arial Narrow","Franklin Gothic Medium","Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0}
h1{font-size:clamp(2.2rem,8vw,3.4rem)}
h2{font-size:1.5rem}
a{color:inherit}
:focus-visible{outline:3px solid var(--ball);outline-offset:3px}
.btn{font:inherit;font-weight:700;border:0;border-radius:999px;padding:.8rem 1.5rem;background:var(--ball);color:var(--deep);cursor:pointer;min-height:48px}
.btn.ghost{background:transparent;color:inherit;border:2px solid currentColor}
.top{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:var(--blue);color:#fff}
.top img{width:44px;height:44px;border-radius:50%}
.wrap{max-width:460px;margin:0 auto;padding:1.25rem}
.err{color:var(--ko);font-weight:700;min-height:1.5em}

/* Connexion : un court vu de dessus sert de fond */
.login{min-height:100vh;display:grid;place-items:center;padding:1.25rem;color:#fff;
 background:
  linear-gradient(var(--line),var(--line)) 50% 50%/100% 3px no-repeat,
  linear-gradient(var(--line),var(--line)) 0 30%/100% 2px no-repeat,
  linear-gradient(var(--line),var(--line)) 0 70%/100% 2px no-repeat,
  linear-gradient(var(--line),var(--line)) 50% 50%/2px 40% no-repeat,
  var(--blue)}
.login .card{background:var(--deep);padding:2rem;border-radius:18px;width:min(100%,400px);box-shadow:0 20px 50px #0007}
.login img{width:96px;height:96px;border-radius:50%;display:block;margin-bottom:1rem}
.login label{display:block;font-weight:700;margin:1rem 0 .3rem}
.login input{width:100%;font:inherit;padding:.8rem 1rem;border-radius:10px;border:2px solid transparent;background:#fff;color:var(--ink)}
.login .btn{width:100%;margin-top:1.4rem}
.login .err{color:#ffb4b0}

/* Carte membre : le QR est posé au centre d'un court */
.court{background:var(--green);padding:16px;border-radius:14px;margin:1.25rem 0 .5rem}
.court-in{position:relative;aspect-ratio:2/3;display:grid;place-items:center;background:
  linear-gradient(var(--line),var(--line)) 50% 50%/100% 4px no-repeat,
  linear-gradient(var(--line),var(--line)) 0 28%/100% 2px no-repeat,
  linear-gradient(var(--line),var(--line)) 0 72%/100% 2px no-repeat,
  linear-gradient(var(--line),var(--line)) 50% 50%/2px 44% no-repeat,
  linear-gradient(var(--line),var(--line)) 9% 0/2px 100% no-repeat,
  linear-gradient(var(--line),var(--line)) 91% 0/2px 100% no-repeat,
  #2f6fc0;border:3px solid var(--line)}
.tile{background:#fff;padding:12px;border-radius:12px;width:68%;box-shadow:0 8px 24px #0005}
.tile svg{display:block;width:100%;height:auto}
.track{position:relative;height:30px;margin:.25rem 0 1rem}
.track::before{content:"";position:absolute;left:0;right:0;top:14px;height:2px;background:#9fb4d1}
.ball{position:absolute;top:3px;width:24px;height:24px;border-radius:50%;background:var(--ball);box-shadow:inset -3px -3px 0 #0002;transition:left .25s linear}
.hint{color:#4a6285;font-size:.95rem}

/* Scanner coach */
select{font:inherit;width:100%;padding:.8rem;border-radius:10px;border:2px solid var(--blue);background:#fff}
.cam{position:relative;border-radius:16px;overflow:hidden;background:#000;margin:1rem 0;aspect-ratio:1}
.cam video{width:100%;height:100%;object-fit:cover}
.cam::after{content:"";position:absolute;inset:18%;border:3px solid var(--ball);border-radius:14px}
.result{border-radius:14px;padding:1rem 1.25rem;background:#fff;border-left:10px solid #9fb4d1;min-height:84px}
.result.ok{border-color:var(--ok);background:#e6f6ec}
.result.warn{border-color:#e0a21a;background:#fff6dd}
.result.ko{border-color:var(--ko);background:#fdeceb}
.result b{font-size:1.25rem;display:block}
.count{font-weight:700;margin:.5rem 0}

/* Admin : liste des membres */
.wide{max-width:760px}
.bar{display:flex;gap:.75rem;flex-wrap:wrap;margin:1rem 0}
.bar input{flex:1;min-width:180px;font:inherit;padding:.8rem 1rem;border-radius:10px;border:2px solid var(--blue);background:#fff}
.member{display:flex;align-items:center;gap:1rem;justify-content:space-between;flex-wrap:wrap;background:#fff;border-radius:14px;padding:1rem 1.25rem;margin-bottom:.75rem;border-left:10px solid #9fb4d1}
.member.on{border-color:var(--ok)}.member.off{border-color:var(--ko)}.member.sleep{opacity:.6}
.member b{display:block}.member small{color:#4a6285}
.acts{display:flex;gap:.5rem}
.btn.sm{padding:.45rem 1rem;min-height:40px;background:var(--blue);color:#fff}
.btn.sm.ghost{background:transparent;color:var(--blue);border:2px solid var(--blue)}
dialog{border:0;border-radius:18px;padding:1.5rem;width:min(94vw,440px);box-shadow:0 20px 60px #0008}
dialog::backdrop{background:#032b57cc}
dialog label{display:block;font-weight:700;margin:.8rem 0 .25rem}
dialog input,dialog select{width:100%;font:inherit;padding:.65rem .8rem;border-radius:10px;border:2px solid #9fb4d1}
dialog .row{display:flex;gap:.75rem}.row>*{flex:1}
dialog .acts{margin-top:1.2rem;justify-content:flex-end}

/* Réservation : chaque court est un plateau de créneaux */
.days{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0 .75rem}
.day{font:inherit;font-weight:700;border:2px solid var(--blue);background:#fff;color:var(--blue);border-radius:999px;padding:.45rem 1rem;min-height:44px;white-space:nowrap;cursor:pointer}
.day[aria-pressed=true]{background:var(--ball);color:var(--deep);border-color:var(--deep)}
.pitches{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.pitch{background:var(--green);padding:12px;border-radius:14px}
.pitch h3{margin:0 0 .6rem;color:#fff;font:800 1.25rem "Arial Narrow","Helvetica Neue",Arial,sans-serif}
.surface{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;border:3px solid #fff;background:
 linear-gradient(#fff,#fff) 50% 50%/100% 4px no-repeat,linear-gradient(#fff,#fff) 50% 0/2px 100% no-repeat,#2f6fc0}
.slot{font:inherit;font-weight:700;line-height:1.15;border-radius:10px;border:2px solid #fff;min-height:52px;background:#fff;color:var(--deep);cursor:pointer;padding:.2rem}
.slot small{display:block;font-weight:400;font-size:.75rem}
.slot.free:hover{background:var(--ball)}
.slot.taken,.slot.past{background:#0a2f6a99;color:#ffffffc0;border-color:transparent;cursor:default}
.slot.taken.can,.slot.mine{cursor:pointer}
.slot.mine{background:var(--ball);border-color:var(--deep)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.9rem;margin:.5rem 0 1rem}
.toast{min-height:1.5em;font-weight:700}.toast.ko{color:var(--ko)}.toast.ok{color:var(--ok)}
.mine-list .member{border-color:var(--ok)}

/* Cours */
.dayh{font:800 1.15rem "Arial Narrow","Helvetica Neue",Arial,sans-serif;margin:1.5rem 0 .5rem;color:var(--blue)}
.member.full{border-color:#9fb4d1}
.places{display:inline-block;margin-top:.25rem;font-weight:700;font-size:.9rem}
.bar2{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.who{margin:.5rem 0 0;padding:0;list-style:none;width:100%;font-size:.95rem}
.who li{padding:.15rem 0}

/* Paiements et navigation qui passe à la ligne sur petit écran */
.top{flex-wrap:wrap;gap:.5rem}.acts{flex-wrap:wrap}
.sum{font:800 1.6rem "Arial Narrow","Helvetica Neue",Arial,sans-serif;margin:.25rem 0 1rem}
.amt{font-weight:800;white-space:nowrap}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end;margin:1rem 0}
.filters label{display:block;font-size:.85rem;font-weight:700}
.filters input,.filters select{font:inherit;padding:.55rem .7rem;border-radius:10px;border:2px solid var(--blue);background:#fff}

/* Liens-boutons et en-tête compact */
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.top .btn{padding:.4rem .9rem;min-height:38px;font-size:.92rem}
.top .acts{margin-left:auto}