/* Charte du site Kinesis Coworking (public/css/style.css de l'app coworking) :
   Bebas Neue (titres), IBM Plex Sans (texte), IBM Plex Mono (labels),
   noir #0A0A0A, fond #F7F6F3, rouge #B3241C en petit accent. */

:root{
  --bg:#FFFFFF; --surface:#F7F6F3; --surface-2:#EFEEE9; --border:#E1DFDA;
  --ink:#0A0A0A; --ink-dim:#3A3938; --orange:#C9622E; --red:#B3241C; --green:#1E8E3E;
  --text:#111111; --muted:#6E6D68;
  --open:#6E6D68; /* jauge Open space : se distingue du Studio (noir) par la luminosité */
  --mono:'IBM Plex Mono', monospace; --sans:'IBM Plex Sans', sans-serif; --display:'Bebas Neue', sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--surface); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
button{ font-family:inherit; }
[hidden]{ display:none !important; }

/* ---------- En-tête ---------- */
.nav{ position:sticky; top:0; z-index:40; background:var(--ink); color:#FFFFFF; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#FFFFFF; }
.brand img{ width:32px; height:32px; border-radius:6px; object-fit:contain; }
.brand-name{ font-family:var(--display); font-size:24px; letter-spacing:1.5px; line-height:1; display:flex; flex-direction:column; gap:4px; }
.brand-name::after{ content:""; width:22px; height:3px; background:var(--red); }
.brand-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.6); }
.nav-right{ display:flex; align-items:center; gap:8px; }
.nav-link{ white-space:nowrap; font-family:var(--mono); font-size:12px; font-weight:500; color:rgba(255,255,255,0.92); text-decoration:none; border:1px solid rgba(255,255,255,0.22); border-radius:20px; padding:8px 14px; min-height:36px; display:inline-flex; align-items:center; background:transparent; cursor:pointer; }
.nav-link:hover{ border-color:#FFFFFF; }
.brand-tag{ white-space:nowrap; }
@media (max-width:400px){ .brand-tag{ display:none; } }

.wrap{ max-width:640px; margin:0 auto; padding:20px 16px 110px; }
.wrap.wide{ max-width:1080px; }
.page-title{ font-family:var(--display); font-size:34px; letter-spacing:0.4px; margin:4px 0 4px; line-height:1.05; }
.page-sub{ color:var(--muted); margin:0 0 18px; }
.section-title{ font-family:var(--display); font-size:24px; letter-spacing:0.3px; margin:26px 0 10px; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }

/* ---------- Barre d'onglets mobile (patient) ---------- */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--bg); border-top:1px solid var(--border); display:flex; padding:6px 8px calc(10px + env(safe-area-inset-bottom)); }
.tabbar a{ flex:1; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:var(--muted); font-size:12px; font-weight:500; }
.tabbar a.active{ color:var(--ink); font-weight:700; }
.tabbar a.active svg{ stroke:var(--ink); }
.tabbar svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Sélecteurs ---------- */
.days{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; }
.days::-webkit-scrollbar{ display:none; }
.day{ flex:0 0 auto; min-width:62px; min-height:72px; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; position:relative; padding:6px 10px 12px; }
.day .d-label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); }
.day .d-num{ font-family:var(--display); font-size:26px; line-height:1; }
.day .d-month{ font-size:11px; color:var(--muted); }
.day.active{ background:var(--ink); border-color:var(--ink); color:#FFFFFF; }
.day.active .d-label, .day.active .d-month{ color:rgba(255,255,255,0.7); }
.day.active::after{ content:""; position:absolute; bottom:5px; width:16px; height:3px; background:var(--red); }

.seg{ display:flex; gap:4px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:4px; margin:12px 0 4px; }
.seg button{ flex:1; min-height:40px; border:none; background:transparent; color:var(--muted); font-weight:600; font-size:13.5px; border-radius:7px; cursor:pointer; }
.seg button.active{ background:var(--ink); color:#FFFFFF; }

.list-head{ display:flex; justify-content:space-between; align-items:baseline; margin:16px 0 10px; }
.list-head h2{ font-family:var(--display); font-size:24px; margin:0; letter-spacing:0.3px; }
.list-head span{ color:var(--muted); font-size:13px; }

/* ---------- Cartes ---------- */
.card{ background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:16px; }
.card + .card{ margin-top:12px; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.class-card{ display:block; padding:0; overflow:hidden; text-decoration:none; color:var(--text); transition:border-color .12s; }
.class-main{ display:flex; gap:14px; padding:14px 16px 16px; }
.class-photo{ position:relative; height:132px; background:var(--ink); }
.class-photo img, .class-photo .photo-fallback{ width:100%; height:100%; object-fit:cover; display:block; }
.class-photo .intensity{ position:absolute; left:10px; bottom:10px; background:rgba(10,10,10,0.78); color:#FFFFFF; padding:4px 9px; border-radius:20px; }
.class-photo .intensity i{ background:rgba(255,255,255,0.3); }
.class-photo .intensity i.on{ background:#FFFFFF; }
.photo-fallback{ display:flex; align-items:center; justify-content:center; background:var(--ink); color:rgba(255,255,255,0.85); font-family:var(--display); font-size:30px; letter-spacing:1px; }
.intensity{ display:inline-flex; align-items:center; gap:3px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; }
.intensity i{ width:5px; height:12px; border-radius:1px; background:var(--border); display:inline-block; }
.intensity i.on{ background:var(--ink); }
.intensity i:last-of-type{ margin-right:6px; }
.hero-photo{ height:min(42vh, 300px); background:var(--ink); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.prose p{ margin:0 0 12px; color:var(--ink-dim); line-height:1.6; }
.details{ margin-top:6px; display:flex; flex-direction:column; gap:16px; }
.detail h3{ font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:0.3px; margin:0 0 4px; }
.detail p{ margin:0; color:var(--ink-dim); line-height:1.55; }
.checks{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.checks li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-dim); }
.checks svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; fill:none; stroke:var(--green); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.with-thumb{ display:flex; gap:12px; align-items:flex-start; }
.thumb{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.thumb.photo-fallback{ font-size:14px; }
.class-card:hover{ border-color:var(--ink); }
.class-time{ width:52px; flex-shrink:0; }
.class-time b{ display:block; font-family:var(--display); font-size:22px; font-weight:400; line-height:1; }
.class-time span{ font-size:12.5px; color:var(--muted); }
.class-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.class-name{ font-weight:700; font-size:16px; }
.meta{ font-size:13px; color:var(--muted); }

.room{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.room.studio{ background:var(--ink); color:#FFFFFF; }
.room.open{ background:var(--surface-2); color:var(--ink-dim); border:1px solid var(--border); }

.gauge{ position:relative; height:6px; background:var(--surface-2); border-radius:3px; }
.gauge .fill{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--ink); }
.gauge.open .fill{ background:var(--open); }
.gauge .min{ position:absolute; top:-4px; width:2px; height:14px; background:var(--red); }

.badge{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; padding:4px 9px; border-radius:20px; white-space:nowrap; }
.badge.ok{ background:rgba(30,142,62,0.12); color:var(--green); }
.badge.wait{ background:rgba(201,98,46,0.12); color:#9A4A20; }
.badge.full{ background:var(--surface-2); color:var(--muted); }
.badge.ko{ background:rgba(179,36,28,0.1); color:var(--red); }
.badge.mine{ background:var(--ink); color:#FFFFFF; }

/* ---------- Boutons et champs ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; border-radius:10px; border:1px solid var(--ink); background:var(--ink); color:#FFFFFF; font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }
.btn.block{ width:100%; }
.btn.ghost{ background:var(--bg); color:var(--ink); border-color:var(--border); }
.btn.ghost:hover{ border-color:var(--ink); }
.btn.sm{ min-height:40px; font-size:13.5px; padding:0 14px; border-radius:8px; }
.btn.danger{ background:var(--bg); color:var(--red); border-color:rgba(179,36,28,0.4); }
.link-btn{ background:none; border:none; padding:0; color:var(--ink); text-decoration:underline; cursor:pointer; font-size:inherit; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:13.5px; font-weight:600; }
.field .hint{ font-size:12.5px; color:var(--muted); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=month], select, textarea{
  width:100%; min-height:48px; border:1px solid var(--border); border-radius:10px; padding:0 14px; font-family:var(--sans); font-size:16px; background:var(--bg); color:var(--text); }
textarea{ padding:12px 14px; min-height:90px; resize:vertical; }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--ink); outline-offset:1px; }
.code-input{ font-family:var(--mono); font-size:26px !important; letter-spacing:10px; text-align:center; }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:14px; margin-bottom:12px; cursor:pointer; }
.check input{ width:22px; height:22px; margin:0; flex-shrink:0; accent-color:var(--ink); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:420px){ .grid2{ grid-template-columns:1fr; } }

.alert{ border-radius:12px; padding:12px 14px; font-size:14px; margin:12px 0; border:1px solid var(--border); background:var(--bg); }
.alert.error{ border-color:rgba(179,36,28,0.35); background:rgba(179,36,28,0.06); color:#8E1C16; }
.alert.success{ border-color:rgba(30,142,62,0.35); background:rgba(30,142,62,0.07); color:#16672D; }
.alert.info{ background:var(--surface-2); }

.empty{ text-align:center; color:var(--muted); padding:36px 16px; }
.empty b{ display:block; font-family:var(--display); font-size:22px; color:var(--text); font-weight:400; margin-bottom:4px; }

/* ---------- Détail du cours ---------- */
.hero{ background:var(--ink); color:#FFFFFF; padding:18px 16px 26px; }
.hero-inner{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.back{ width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,0.12); display:inline-flex; align-items:center; justify-content:center; color:#FFFFFF; text-decoration:none; }
.back svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hero h1{ font-family:var(--display); font-size:44px; font-weight:400; letter-spacing:0.5px; margin:0; line-height:1; }
.hero .bar{ width:28px; height:3px; background:var(--red); }
.hero .eyebrow{ color:rgba(255,255,255,0.65); }
.info-list{ padding:4px 16px; }
.info-item{ display:flex; align-items:center; gap:12px; min-height:56px; border-bottom:1px solid var(--surface-2); }
.info-item:last-child{ border-bottom:none; }
.info-item svg{ width:20px; height:20px; fill:none; stroke:var(--muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.info-item small{ display:block; font-size:12.5px; color:var(--muted); }
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:41; background:var(--bg); border-top:1px solid var(--border); padding:14px 16px calc(16px + env(safe-area-inset-bottom)); }
.sticky-cta-inner{ max-width:640px; margin:0 auto; display:flex; align-items:center; gap:16px; }
.price{ font-family:var(--display); font-size:30px; line-height:1; }

.plans{ display:flex; flex-direction:column; gap:10px; }
.plan{ display:flex; align-items:center; gap:14px; min-height:68px; text-align:left; border:2px solid var(--border); border-radius:12px; background:var(--bg); padding:12px 14px; cursor:pointer; color:var(--text); width:100%; }
.plan.active{ border-color:var(--ink); }
.plan:disabled{ opacity:0.5; cursor:not-allowed; }
.plan .radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.plan.active .radio{ border-color:var(--ink); }
.plan.active .radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--ink); }
.plan .p-body{ flex:1; display:flex; flex-direction:column; gap:2px; }
.plan .p-name{ font-weight:600; }
.plan .p-detail{ font-size:12.5px; color:var(--muted); }
.plan .p-price{ font-family:var(--display); font-size:22px; white-space:nowrap; }

/* ---------- Réservations ---------- */
.qr-card{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.qr-card img{ width:220px; height:220px; image-rendering:pixelated; border:1px solid var(--border); border-radius:10px; padding:8px; background:#FFFFFF; }
.qr-card .wallet-link img{ width:auto; height:44px; display:block; border:none; padding:0; border-radius:0; background:none; }
.kpis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.kpi b{ display:block; font-family:var(--display); font-size:28px; font-weight:400; line-height:1.05; }
.kpi span{ font-size:12.5px; color:var(--muted); }

/* ---------- Espace coach / admin ---------- */
.hero-coach{ background:var(--ink); color:#FFFFFF; padding:22px 16px 26px; }
.hero-coach .hero-inner{ max-width:1080px; }
.hero-coach .big{ font-family:var(--display); font-size:46px; line-height:1; }
.hero-coach .muted{ color:rgba(255,255,255,0.65); font-size:13.5px; }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); margin-right:8px; vertical-align:middle; }
.cols{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:860px){ .cols{ grid-template-columns:1fr; } }
.subnav{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 18px; }
.subnav button{ border:1px solid var(--border); background:var(--bg); color:var(--muted); font-weight:600; font-size:13px; padding:9px 16px; border-radius:20px; cursor:pointer; min-height:40px; }
.subnav button.active{ background:var(--ink); color:#FFFFFF; border-color:var(--ink); }
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
table{ border-collapse:collapse; width:100%; font-size:13.5px; }
th, td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--surface-2); vertical-align:middle; }
th{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted); font-weight:500; background:var(--surface); white-space:nowrap; }
tr:last-child td{ border-bottom:none; }
td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.actions{ display:flex; gap:6px; flex-wrap:wrap; }
.feed{ display:flex; gap:8px; }
.feed input{ font-family:var(--mono); font-size:12px; }

.modal{ position:fixed; inset:0; background:rgba(10,10,10,0.55); display:flex; align-items:flex-end; justify-content:center; z-index:60; padding:16px; }
.modal-box{ background:var(--bg); border-radius:16px; width:100%; max-width:520px; max-height:85vh; overflow-y:auto; padding:22px; }
.modal-box h2{ font-family:var(--display); font-size:26px; font-weight:400; margin:0 0 12px; }
@media (min-width:640px){ .modal{ align-items:center; } }

.toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:var(--ink); color:#FFFFFF; padding:12px 18px; border-radius:10px; font-size:14px; z-index:70; max-width:calc(100% - 32px); box-shadow:0 6px 20px rgba(0,0,0,0.2); }
.legal h2{ font-family:var(--display); font-size:24px; font-weight:400; margin:24px 0 6px; }
.legal p, .legal li{ color:var(--ink-dim); }

.type-form{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; }
.type-photo{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.type-photo-img{ width:220px; height:150px; object-fit:cover; border-radius:10px; }
.type-form .field label{ display:flex; flex-direction:column; gap:6px; }
@media (max-width:640px){ .type-form{ grid-template-columns:1fr; } .type-photo-img{ width:100%; } }