/* Leers Tennis Club – appli de réservation. Pensée d'abord pour le téléphone. */
:root {
  --navy: #1B3A5C;
  --navy-deep: #12283F;
  --green: #8EB754;
  --green-soft: #E4F0D3;
  --green-ink: #2F4D0E;
  --amber-soft: #FFF1DC;
  --amber-ink: #6B3F00;
  --red-soft: #FBE4E1;
  --red-ink: #7A1C12;
  --paper: #F7F7F2;
  --card: #FFFFFF;
  --line: #DDE1DA;
  --line-strong: #AEB6AA;
  --muted: #55606E;
  --taken: #E4E6E1;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
}
.shell {
  max-width: 560px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
.page-login .shell { padding-bottom: 0; }

h1, h2, .big, .time, .hour, .kicker { font-family: var(--display); }
h1 { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
p { margin: 0; }
a { color: var(--navy); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.ok { color: var(--green-ink); }
.todo { color: var(--amber-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* En-tête */
.top {
  background: var(--navy);
  color: #fff;
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #B9DB8B; }
.back {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #5C7896; border-radius: 50%;
  color: #fff; text-decoration: none; font-size: 28px; line-height: 1; padding-bottom: 4px;
}
.banner { display: block; width: 100%; height: 190px; object-fit: cover; object-position: 20% 50%; }

.pad { padding: 20px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* Messages */
.flash, .notice {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  display: flex; flex-direction: column; gap: 2px;
}
.flash { margin: 12px 20px 0; font-weight: 600; }
.pad > .flash, .stack > .flash { margin: 0; }
.notice { margin: 12px 12px 0; text-decoration: none; }
.pad .notice, .card .notice { margin: 0; }
.notice.tight { margin-top: 12px; font-weight: 600; }
.flash-ok, .notice-ok { background: var(--green-soft); color: var(--green-ink); }
.flash-warn, .notice-warn { background: var(--amber-soft); color: var(--amber-ink); }
.flash-error { background: var(--red-soft); color: var(--red-ink); }
.notice-info { background: #E3ECF5; color: var(--navy); font-weight: 600; }

/* Formulaires */
.field { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 14px; font-weight: 600; }
input[type=text], input[type=password], input[type=date] {
  height: 52px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: #fff; color: var(--navy);
  font: inherit; font-size: 17px;
}
input:focus-visible, a:focus-visible, button:focus-visible, .choice input:focus-visible + label {
  outline: 3px solid var(--green); outline-offset: 2px;
}
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 0 22px;
  border-radius: 26px; border: none;
  font: inherit; font-size: 17px; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--green); color: var(--navy-deep); }
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--line-strong); }
.btn-small { width: auto; min-height: 44px; font-size: 15px; background: var(--navy); color: #fff; }

/* Cartes */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
}
.card.empty { align-items: stretch; gap: 16px; text-align: center; padding: 28px 20px; }
.recap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card.recap { flex-direction: row; align-items: center; }
.big { font-size: 30px; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.time { font-size: 24px; font-weight: 600; white-space: nowrap; }
.players { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.players li { display: flex; justify-content: space-between; gap: 12px; }
.players span { font-weight: 600; }
.facts { margin: 8px 0 0; display: flex; flex-direction: column; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 12px; }
.steps li { counter-increment: step; display: flex; gap: 14px; align-items: flex-start; }
.steps li::before {
  content: counter(step);
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}

/* Choix adhérent / invité */
.choice { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.choice input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.choice-tab {
  grid-row: 1; height: 48px; display: flex; align-items: center; justify-content: center;
  background: #E9ECE6; font-size: 15px; cursor: pointer;
  border-radius: 10px;
}
.choice input:checked + .choice-tab { background: var(--navy); color: #fff; }
.panel { grid-column: 1 / -1; display: none; flex-direction: column; gap: 14px; margin-top: 20px; }
#mode-member:checked ~ .panel-member, #mode-guest:checked ~ .panel-guest { display: flex; }

/* Planning */
.daybar { background: #fff; border-bottom: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.week { display: flex; gap: 4px; align-items: stretch; }
.day, .week-nav {
  flex: 1; min-width: 0; height: 56px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; font-size: 12px; font-weight: 500;
}
.day strong { font-family: var(--display); font-size: 22px; line-height: 1; }
.day[aria-current] { background: var(--navy); color: #fff; }
.week-nav { flex: 0 0 32px; font-size: 26px; padding-bottom: 4px; }
.week-nav.is-off { color: #C3C9BF; }
.jump { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jump label { font-size: 16px; }
.jump input[type=date] { height: 44px; font-size: 15px; padding: 0 10px; }
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #E9ECE6; }
.segmented a {
  flex: 1; height: 44px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 15px; font-weight: 600;
}
.segmented a[aria-current] { background: var(--navy); color: #fff; }

.grid { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 6px; }
.grid-row { display: grid; grid-template-columns: 36px 1fr 1fr; gap: 6px; align-items: center; }
.grid-head { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding-bottom: 2px; }
.hour { font-size: 18px; font-weight: 600; color: var(--muted); }
.slot {
  min-height: 52px; padding: 4px 6px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none;
  border: 1.5px solid transparent; overflow-wrap: anywhere;
}
.slot-free { background: #fff; border-color: #C3C9BF; color: var(--navy); }
.slot-free:hover { border-color: var(--navy); }
/* Réservé par des adhérents : fond vert, texte bleu. Réservé par le club (cours, compétition…) : fond bleu, texte vert. */
.slot-booked { background: var(--green); color: var(--navy-deep); }
.slot-blocked { background: var(--navy); color: #B9DB8B; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 10px 16px 0; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid transparent; }
.legend .l-free { background: #fff; border-color: #C3C9BF; }
.legend .l-booked { background: var(--green); }
.legend .l-blocked { background: var(--navy); }
.slot-past { background: transparent; color: #7B8490; font-weight: 500; border-color: var(--line); border-style: dashed; }
.rule { padding: 8px 16px 20px; font-size: 13px; color: var(--muted); }
.grid-head small, .tabs .brand { display: none; }
/* Sur téléphone, une seule zone à la fois (intérieur ou extérieur). */
.zone-int .z-ext, .zone-ext .z-int { display: none; }

/* Navigation du bas */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto;
  display: flex; background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs a {
  flex: 1; height: 60px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 15px; font-weight: 600; color: var(--muted);
  border-top: 3px solid transparent;
}
.tabs a[aria-current] { color: var(--navy); border-top-color: var(--green); }

/* Administration : plus large, pensée aussi pour l'ordinateur */
.is-admin .shell, .is-admin .tabs { max-width: 960px; }
.subnav { display: flex; gap: 4px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.subnav a { height: 44px; padding: 0 16px; border-radius: 9px; display: flex; align-items: center; text-decoration: none; font-weight: 600; font-size: 15px; }
.subnav a[aria-current] { background: var(--navy); color: #fff; }
.backlink { font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.search { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.search .field { flex: 1 1 140px; }
.search .grow { flex: 3 1 220px; }
.search input, .search select, .fiche input, .fiche select { height: 46px; font-size: 16px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--navy); font-family: inherit; width: 100%; }
.search .btn-small { height: 46px; border-radius: 23px; padding: 0 22px; border: none; font-weight: 600; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-auto { width: auto; min-height: 46px; font-size: 16px; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; }
th { text-align: left; padding: 12px 14px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
td { padding: 4px 14px; border-top: 1px solid #E6E9E3; height: 48px; }
td a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
td a:hover { text-decoration: underline; }
.code { font-family: var(--display); font-size: 18px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-right: 4px; }
.pill-ok { background: var(--green-soft); color: var(--green-ink); }
.pill-warn { background: var(--amber-soft); color: var(--amber-ink); }
.pill-off { background: var(--taken); color: #3F4853; }
.pill-admin { background: var(--navy); color: #fff; }
.pill-coach { background: var(--green-soft); color: var(--green-ink); }
.fiche { display: flex; flex-direction: column; gap: 16px; }
.fiche .card { gap: 14px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; }
.check input, .radios input { width: 20px; height: 20px; flex-shrink: 0; padding: 0; }
.radios { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.radios legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.radios label { display: flex; align-items: center; gap: 8px; min-height: 46px; font-weight: 500; font-size: 16px; }
.notice.row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.notice.row .btn-small { border: none; border-radius: 22px; padding: 0 18px; font-weight: 600; cursor: pointer; }
.sticky { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom)); background: var(--paper); padding: 12px 0; }
.rule-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.rule-row label { font-size: 16px; font-weight: 500; flex: 1 1 240px; }
.with-unit { display: flex; align-items: center; gap: 8px; }
.fiche .with-unit input { width: 110px; }
.pill-plain { background: #E3ECF5; color: var(--navy); }
.linklike { background: none; border: none; padding: 0; min-height: 44px; font: inherit; font-weight: 600; color: var(--navy); text-decoration: underline; cursor: pointer; align-self: flex-start; }
.plain { margin: 8px 0; padding-left: 18px; }
.table-wrap.flat { border: none; border-radius: 0; }
.subnav { flex-wrap: wrap; }
.tick { width: 44px; }
.tick input { width: 22px; height: 22px; }
.renewbar { position: sticky; top: 0; z-index: 2; box-shadow: 0 2px 8px rgba(27, 58, 92, .12); }

/* Borne du club : grand écran tactile, lu debout à un mètre. */
body.borne { background: var(--navy-deep); color: #fff; min-height: 100vh; display: flex; flex-direction: column; }
.borne-top { padding: 24px 40px 8px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.borne-back { color: #fff; text-decoration: none; font-weight: 700; font-size: 22px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 40px; padding: 14px 28px; white-space: nowrap; }
.borne-top h1 { font-size: clamp(30px, 3.7vw, 58px); }
.borne-top .kicker { color: var(--green); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.borne-main { flex: 1; display: grid; grid-template-columns: minmax(280px, 42vh) 1fr; gap: 40px; padding: 16px 40px 24px; align-items: start; }
.borne-main.is-stale .qr { opacity: .15; }
.borne-main.is-stale::before { content: "Connexion perdue. Le QR code revient dès que l'internet du club est rétabli."; grid-column: 1 / -1; background: var(--amber-soft); color: var(--amber-ink); padding: 14px 18px; border-radius: 12px; font-weight: 600; font-size: 20px; }
.borne-qr .qr { background: #fff; border-radius: 20px; padding: 10px; }
.borne-qr .qr svg { display: block; width: 100%; height: auto; }
.borne-qr ol { margin: 20px 0 0; padding-left: 26px; font-size: 20px; line-height: 1.45; }
.borne-list h2 { font-size: 26px; color: var(--green); margin-bottom: 14px; }
.borne-empty { font-size: 22px; opacity: .8; }
.match { display: flex; gap: 24px; align-items: center; background: #fff; color: var(--navy); border-radius: 14px; padding: 14px 20px; margin-bottom: 12px; }
.match.is-lost { opacity: .6; }
.match .when { display: flex; flex-direction: column; min-width: 130px; font-family: var(--display); text-transform: uppercase; }
.match .when strong { font-size: 30px; line-height: 1; }
.match .when span { font-size: 22px; color: var(--muted); }
.match ul { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 22px; }
.match li { display: flex; justify-content: space-between; gap: 16px; }
.match em { font-style: normal; font-weight: 700; font-size: 18px; padding: 2px 12px; border-radius: 20px; white-space: nowrap; }
.match em.ok { background: var(--green-soft); color: var(--green-ink); }
.match em.todo { background: var(--amber-soft); color: var(--amber-ink); }
.match em.lost { background: var(--red-soft); color: var(--red-ink); }
.borne-flash { margin: 8px 40px 0; padding: 18px 24px; border-radius: 14px; font-size: 26px; font-weight: 700; }
.borne-manual { margin: 0 40px 28px; background: rgba(255, 255, 255, .08); border-radius: 14px; }
.borne-manual summary { cursor: pointer; padding: 18px 24px; font-size: 22px; font-weight: 700; min-height: 60px; }
.borne-manual form { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding: 0 24px 22px; }
.borne-fields { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; }
.keypad { display: grid; grid-template-columns: repeat(3, 96px); gap: 10px; }
.keypad button { min-height: 68px; border: 0; border-radius: 12px; background: #fff; color: var(--navy); font: 700 28px var(--display); cursor: pointer; touch-action: manipulation; }
.keypad button[data-key=clear] { font-size: 17px; }
.keypad button:active { background: var(--green); }
.borne-manual label { color: #fff; }
.borne-manual input[type=text], .borne-manual input[type=password] { font-size: 24px; min-height: 60px; }
.borne-manual .btn { min-height: 60px; font-size: 20px; padding: 0 28px; }
.borne-setup { max-width: 640px; margin: 24px 40px; display: flex; flex-direction: column; gap: 16px; font-size: 18px; }
.borne-setup a { color: #fff; }
.borne-setup .muted { color: #C5CFDA; }
@media (max-width: 800px) {
  .borne-main { grid-template-columns: 1fr; }
  .borne-qr .qr { max-width: 340px; }
}

/* Accueil de la borne : deux grands choix. */
.borne-home { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 24px 40px; align-items: stretch; }
.tile { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 46vh; padding: 40px; border-radius: 28px; background: #fff; color: var(--navy); text-decoration: none; }
.tile strong { font-family: var(--display); font-size: clamp(38px, 4.6vw, 68px); line-height: 1.02; text-transform: uppercase; }
.tile span { font-size: 22px; color: var(--muted); }
.tile-green { background: var(--green); color: var(--navy-deep); }
.tile-green span { color: var(--navy-deep); }
.tile:active { transform: scale(.985); }
.borne-foot { padding: 0 40px 28px; font-size: 22px; color: #C5CFDA; }
.borne-login { padding: 24px 40px; }
.borne-login { display: flex; justify-content: center; }
.borne-login form { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; align-items: flex-start; width: 100%; max-width: 900px; }
.borne-login .borne-fields { flex: 0 1 400px; }
.borne-login label { color: #fff; font-size: 20px; }
.borne-login input[type=text], .borne-login input[type=password] { font-size: 28px; min-height: 68px; }
.borne-login .btn { min-height: 68px; font-size: 22px; padding: 0 36px; }
.borne-login .muted { color: #C5CFDA; }
@media (max-width: 800px) { .borne-home { grid-template-columns: 1fr; } }

/* Pages de réservation affichées sur l'écran du club : plus grandes, et un bouton pour terminer. */
body.on-borne { zoom: 1.35; }
.on-borne .shell, .on-borne .tabs { max-width: 720px; }
.on-borne .tabs a.quit { background: var(--navy); color: #fff; }
.on-borne .keypad { margin-top: 12px; grid-template-columns: repeat(3, 1fr); }
.on-borne .keypad button { background: var(--card); border: 1.5px solid var(--line-strong); min-height: 60px; }
.idle { position: fixed; left: 0; right: 0; top: 0; z-index: 20; background: var(--amber-soft); color: var(--amber-ink); font-weight: 700; padding: 14px 20px; text-align: center; }
.borne-login .keypad { grid-template-columns: repeat(3, 124px); gap: 12px; }
.borne-login .keypad button { min-height: 88px; font-size: 34px; }
.borne-login .keypad button[data-key=clear] { font-size: 19px; }

/* Accueil de la borne avec les annonces du club : annonces à gauche, les deux boutons à droite. */
.borne-home.has-slides { grid-template-columns: 1.55fr 1fr; }
.borne-home .tiles { display: contents; }
.borne-home.has-slides .tiles { display: flex; flex-direction: column; gap: 24px; }
.has-slides .tile { flex: 1; min-height: 0; padding: 32px; }
.has-slides .tile strong { font-size: clamp(32px, 3.4vw, 52px); }
.slides { position: relative; min-height: 56vh; border-radius: 28px; overflow: hidden; background: #0B1B2C; }
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .6s; }
.slide.is-on { opacity: 1; visibility: visible; }
.slide img, .slide video, .slide .yt { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #0B1B2C; }
.slide .yt { position: relative; }
.slide .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.slide .yt .shield { position: absolute; inset: 0; } /* empêche de sortir de la borne en touchant la vidéo */
.slide-text { padding: 22px 28px 44px; background: #fff; color: var(--navy); }
.slide-text h2 { font-size: clamp(28px, 3vw, 44px); margin-bottom: 6px; }
.slide-text p { font-size: 22px; line-height: 1.4; }
.slide-none { justify-content: center; }
.slide-none .slide-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.slide-none .slide-text h2 { font-size: clamp(40px, 4.4vw, 68px); margin-bottom: 16px; }
.slide-none .slide-text p { font-size: 28px; }
.dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 10px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(120, 130, 145, .5); }
.dots i.is-on { background: var(--green); }
@media (max-width: 800px) { .borne-home.has-slides { grid-template-columns: 1fr; } }

/* Administration de l'écran du club */
.slide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.slide-list li { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.slide-list li.is-hidden { opacity: .55; }
.slide-list .thumb { width: 96px; height: 64px; border-radius: 8px; background: var(--taken); object-fit: cover; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.slide-list .what { flex: 1; min-width: 0; }
.slide-list .what strong, .slide-list .what span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slide-list form { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.slide-list button { min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--navy); font: 600 14px var(--body); cursor: pointer; }
.slide-list button.danger { color: var(--red-ink); border-color: #E3B4AE; }
.fiche textarea { width: 100%; min-height: 96px; font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 8px; color: var(--navy); }

/* Annonces reprises du site : étiquette au-dessus du titre, et agenda du mois. */
.slide-kicker { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green-ink); margin-bottom: 8px; }
.slide-calendar .slide-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 48px; }
.slide-calendar .slide-text h2 { font-size: clamp(40px, 4.4vw, 68px); margin-bottom: 20px; }
.agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.agenda li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.agenda strong { font-size: clamp(22px, 2.2vw, 30px); }
.agenda span { flex: none; margin-left: auto; font-size: clamp(18px, 1.8vw, 24px); color: var(--muted); text-align: right; white-space: nowrap; }
.agenda strong { text-wrap: balance; }
.slide-calendar .slide-text, .slide-none .slide-text { padding-bottom: 60px; overflow: hidden; }

/* Blocage des créneaux : emploi du temps par jour et liste de périodes. */
.week-table { display: flex; flex-direction: column; }
.week-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.week-row.is-all { border-top: 0; background: var(--paper); border-radius: 8px; padding: 10px 12px; margin-bottom: 4px; }
.week-row > strong { flex: 0 0 120px; }
.week-slots { flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.week-slot { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); }
.fiche .week-slot select { width: auto; min-width: 74px; }
.periods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.period { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color: var(--muted); }
.period span { display: inline-flex; align-items: center; gap: 8px; }
.fiche .period input { width: auto; }

/* Photos et vidéos de l'accueil : plein cadre, avec l'adresse du site dessous. */
.slide-image img, .slide-video video { object-fit: cover; }
.slide-site { background: #fff; color: var(--navy); padding: 18px 28px 40px; font-size: clamp(18px, 1.9vw, 26px); text-align: center; }
.slide-site strong { font-family: var(--display); font-size: 1.25em; letter-spacing: .5px; }
.borne-home ~ .borne-foot { padding-top: 0; }

/* ------------------------------------------------------------------
   Ordinateur : pages adhérents plus larges, menu en haut, les quatre courts côte à côte.
   L'écran tactile du club (on-borne) garde sa propre mise en page.
   ------------------------------------------------------------------ */
@media (min-width: 900px) {
  body:not(.on-borne):not(.is-admin) .shell { max-width: 1120px; padding-bottom: 32px; }
  body:not(.on-borne) .tabs {
    position: sticky; top: 0; z-index: 10; order: -2;
    max-width: none; margin: 0; padding: 0 24px; gap: 4px; align-items: center;
    border-top: 0; border-bottom: 1px solid var(--line);
  }
  body:not(.on-borne) .tabs .brand { display: block; margin-right: auto; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); }
  body:not(.on-borne) .tabs a { flex: 0 0 auto; height: 64px; padding: 0 18px; font-size: 16px; border-top: 0; border-bottom: 3px solid transparent; }
  body:not(.on-borne) .tabs a[aria-current] { border-bottom-color: var(--green); }
  body:not(.on-borne) .tabs a:hover { color: var(--navy); }
  body:not(.on-borne) .flash { order: -1; }
  body:not(.on-borne).is-admin .shell { padding-bottom: 32px; }

  body:not(.on-borne):not(.is-admin) .top { padding: 28px 32px 24px; }
  body:not(.on-borne):not(.is-admin) .top h1 { font-size: 40px; }
  body:not(.on-borne):not(.is-admin) .flash { margin: 16px 32px 0; }
  body:not(.on-borne):not(.is-admin) .notice { margin: 16px 32px 0; }
  body:not(.on-borne):not(.is-admin) .pad .notice, body:not(.on-borne):not(.is-admin) .card .notice { margin: 0; }

  /* Planning : semaine, date et quatre courts sur une même vue */
  body:not(.on-borne) .daybar { flex-direction: row; align-items: center; gap: 24px; padding: 16px 32px; }
  body:not(.on-borne) .daybar .week { flex: 1 1 auto; max-width: 620px; }
  body:not(.on-borne) .daybar .jump { flex: 1 1 auto; justify-content: flex-end; gap: 16px; }
  body:not(.on-borne) .segmented { display: none; }
  body:not(.on-borne) .legend { justify-content: flex-start; padding: 16px 32px 0; font-size: 14px; }
  body:not(.on-borne) .grid { padding: 20px 32px 8px; gap: 8px; }
  body:not(.on-borne) .grid-row { grid-template-columns: 56px repeat(4, 1fr); gap: 8px; }
  body:not(.on-borne) .grid .slot.z-int, body:not(.on-borne) .grid .slot.z-ext { display: flex; }
  body:not(.on-borne) .rules .rule { display: block; }
  body:not(.on-borne) .grid-head span { display: block; }
  body:not(.on-borne) .grid-head .z-int, body:not(.on-borne) .grid-head .z-ext { display: block; }
  body:not(.on-borne) .grid-head small { display: inline; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; font-size: 13px; }
  body:not(.on-borne) .slot { min-height: 48px; font-size: 15px; }
  body:not(.on-borne) .hour { font-size: 20px; }
  body:not(.on-borne) .rules { display: flex; gap: 32px; padding: 8px 32px 0; }
  body:not(.on-borne) .rules .rule { padding: 0; font-size: 14px; flex: 1; }

  /* Réserver, Ma partie, Mon compte : une colonne confortable au centre */
  body:not(.on-borne).page-book .pad, body:not(.on-borne).page-mine .pad, body:not(.on-borne).page-account .pad {
    width: 100%; max-width: 680px; margin: 0 auto; padding: 32px 20px; flex: 0 0 auto;
  }
  body:not(.on-borne).page-book .card, body:not(.on-borne).page-mine .card, body:not(.on-borne).page-account .card { padding: 24px 28px; }
  body:not(.on-borne).page-book .btn, body:not(.on-borne).page-mine .btn { max-width: 420px; margin-inline: auto; }

  /* Connexion : une carte au centre de l'écran */
  body.page-login { background: var(--navy-deep); }
  .page-login .shell { max-width: 480px; min-height: 0; margin: 7vh auto; border-radius: 18px; overflow: hidden; background: var(--paper); }
  .page-login .banner { height: auto; }
  .page-login .pad { padding: 28px 36px 36px; }
}

/* ------------------------------------------------------------------
   Administration sur téléphone : sous-menu qui défile sur une ligne, tableaux transformés en fiches.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: 0 0 auto; white-space: nowrap; padding: 0 14px; }
  .is-admin .top h1 { font-size: 28px; }

  .is-admin table { min-width: 0; display: block; }
  .is-admin thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .is-admin tbody { display: block; }
  .is-admin tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 10px 14px; border-top: 1px solid #E6E9E3; }
  .is-admin tbody tr:first-child { border-top: 0; }
  .is-admin td { display: block; height: auto; padding: 0; border: 0; min-width: 0; }
  .is-admin td:empty { display: none; }
  .is-admin td[data-label]::before { content: attr(data-label) " : "; color: var(--muted); font-size: 13px; }
  .is-admin td.is-wide { flex: 1 1 100%; }
  .is-admin td:last-child:has(form, .pill) { margin-left: auto; }
  .is-admin .table-wrap.flat tr { padding-inline: 0; }
  .is-admin .card { padding: 16px; }
  .is-admin .actions .btn-auto { flex: 1 1 auto; }
  .slide-list li { flex-wrap: wrap; }
  .slide-list form { flex: 1 1 100%; justify-content: flex-start; }
  .rule-row { flex-wrap: wrap; }
}
@media (min-width: 900px) {
  body:not(.on-borne).is-admin .shell { max-width: 1120px; }
  body:not(.on-borne).is-admin .top { padding: 28px 32px 24px; }
  body:not(.on-borne).is-admin .top h1 { font-size: 40px; }
  body:not(.on-borne).is-admin .subnav { padding: 10px 28px; }
  body:not(.on-borne).is-admin .pad { padding: 24px 32px; }
}

.sep { width: 100%; border: 0; border-top: 2px solid var(--line); margin: 4px 0; }

/* Nom du partenaire confirmé pendant la saisie de son code carte. */
.partner-name { margin: 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.partner-name.is-ok { background: var(--green-soft); color: var(--green-ink); }
.partner-name.is-bad { background: var(--amber-soft); color: var(--amber-ink); }
/* Logo du club en haut à droite de l'accueil de l'écran. */
.borne-logo { height: clamp(72px, 9vw, 120px); width: auto; flex: none; }
.page-login .btn-outline { margin-top: -8px; }
.borne-logo { background: #fff; border-radius: 22px; padding: 8px; box-sizing: content-box; }

/* Import depuis Elindo */
.import-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.import-sum div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--navy); }
.import-sum b { display: block; font-family: var(--display); font-size: 30px; line-height: 1; }
@media (max-width: 700px) { .import-sum { grid-template-columns: repeat(2, 1fr); } }
#import { display: flex; flex-direction: column; gap: 12px; }
#import .pill { white-space: nowrap; }