/* =========================================================================
   admin.css — app iPhone « Issam Admin » (PWA)
   Typo système iOS, accent or (tokens.css), verre flouté sur les barres,
   les feuilles et la carte d'affluence. Mobile d'abord, une main.
   ========================================================================= */
:root {
  --font-app: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Manrope', system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --gut: 16px;
  --tabbar-h: 56px;
  --nav-h: 44px;

  --bar: rgba(16, 16, 18, 0.72);          /* verre des barres : texte crème ≥ 12:1 */
  --sheet: rgba(24, 24, 27, 0.86);
  --cell: rgba(255, 255, 255, 0.055);
  --cell-press: rgba(255, 255, 255, 0.10);
  --sep: rgba(255, 255, 255, 0.08);
  --hair: rgba(255, 255, 255, 0.12);
  --label-2: #B9B2A5;                       /* 8.6:1 sur --bg */
  --label-3: #938D82;                       /* 5.6:1 sur --bg, légendes */

  --green: #4CC38A; --green-ink: #06140D;
  --orange: #E9A23B; --orange-ink: #1C1204;
  --red-strong: #C23A33;                     /* texte blanc 5.3:1 */
  --red-text: #FF7A70;                       /* rouge sur fond sombre 6.4:1 */
  --gold-text: #E3C88C;

  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --glass-blur: saturate(180%) blur(22px);
}

html, body { height: 100%; overscroll-behavior: none; }
body {
  font-family: var(--font-app);
  font-size: 17px; line-height: 1.35; letter-spacing: -0.01em;
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  overflow: hidden;
}
input, textarea, select { -webkit-user-select: text; user-select: text; font-size: 17px; } /* ≥16px : pas de zoom iOS au focus */
button { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; letter-spacing: inherit; touch-action: manipulation; }
a { text-decoration: none; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.sm { width: 17px; height: 17px; }
.ic.lg { width: 30px; height: 30px; }
[hidden] { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--label-2); }
.small { font-size: 13px; }

/* Fond d'ambiance : donne de la matière au verre */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 85% 0%, rgba(200, 164, 100, 0.16), transparent 70%),
    radial-gradient(50% 35% at 0% 60%, rgba(200, 164, 100, 0.07), transparent 70%),
    var(--bg); }

/* ============================ Écrans ============================ */
.app { position: fixed; inset: 0; }
.screen {
  position: absolute; inset: 0; z-index: 1;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--tabbar-h) + var(--sab) + 32px);
}
.content { padding: 0 calc(var(--gut) + var(--sar)) 0 calc(var(--gut) + var(--sal)); will-change: transform; }
.content.ptr-anim { transition: transform 320ms var(--spring); }

/* Barre de titre (verre qui apparaît au scroll) */
.navbar { position: sticky; top: 0; z-index: 5; padding-top: var(--sat); transition: background 200ms, box-shadow 200ms; }
.navbar::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 200ms; background: var(--bar);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 0.5px 0 var(--hair); }
.screen.scrolled .navbar::before { opacity: 1; }
.navbar-in { position: relative; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 calc(8px + var(--sar)) 0 calc(8px + var(--sal)); }
.nb-title { margin: 0; font-size: 17px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 180ms, transform 180ms; white-space: nowrap; }
.screen.collapsed .nb-title { opacity: 1; transform: none; }
.nb-right { justify-self: end; display: flex; gap: 4px; }
.nb-btn { min-height: 44px; min-width: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--gold-text); font-size: 17px; border-radius: 10px; }
.nb-btn:active { opacity: 0.5; }

.large-title { margin: 2px 0 2px; font-size: 32px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.subtitle { margin: 0 0 18px; color: var(--label-2); font-size: 15px; }
.subtitle:first-letter { text-transform: uppercase; }

/* Tirer pour rafraîchir */
.ptr { position: absolute; left: 0; right: 0; top: calc(var(--sat) + var(--nav-h)); height: 0; display: flex; justify-content: center; z-index: 4; pointer-events: none; }
.ptr-spin { width: 26px; height: 26px; margin-top: 14px; border-radius: 50%; border: 2.5px solid rgba(227, 200, 140, 0.25); border-top-color: var(--gold-2);
  opacity: 0; transform: rotate(calc(var(--p, 0) * 300deg)) scale(calc(0.6 + var(--p, 0) * 0.4)); }
.screen.ptr-pull .ptr-spin { opacity: var(--p, 0); }
.screen.ptr-loading .ptr-spin { opacity: 1; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================ Barre d'onglets ============================ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 4px calc(4px + var(--sar)) var(--sab) calc(4px + var(--sal));
  background: var(--bar); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 -0.5px 0 var(--hair);
}
.tab { height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--label-3); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.tab .ic { width: 26px; height: 26px; stroke-width: 1.8; }
.tab[aria-current="page"] { color: var(--gold-2); }
.tab:active .ic { transform: scale(0.9); }

.fab { position: fixed; z-index: 15; right: calc(18px + var(--sar)); bottom: calc(var(--tabbar-h) + var(--sab) + 18px);
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: #17120A; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.2) inset;
  transition: transform 200ms var(--bounce); }
.fab .ic { width: 30px; height: 30px; stroke-width: 2.4; }
.fab:active { transform: scale(0.92); }

.preview-flag { position: fixed; z-index: 25; top: calc(var(--sat) + 12px); left: calc(12px + var(--sal)); margin: 0;
  padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--orange-ink); background: var(--orange); pointer-events: none; white-space: nowrap; }

/* ============================ Listes iOS (inset grouped) ============================ */
.group-title { margin: 26px 4px 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
.group-title .count { color: var(--label-3); font-weight: 600; font-size: 17px; }
.group-title .gt-action { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--gold-text); min-height: 44px; display: inline-flex; align-items: center; }
.group-head { margin: 24px 16px 6px; font-size: 13px; color: var(--label-3); text-transform: none; }
.group-foot { margin: 6px 16px 0; font-size: 13px; color: var(--label-3); line-height: 1.4; }
.group { position: relative; list-style: none; margin: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--cell); }
.group::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0.5px var(--hair) inset; pointer-events: none; z-index: 3; }
.team-row { display: flex; align-items: center; }
.team-row > .cell { flex: 1; min-width: 0; }
.team-row > .ios-switch { margin-right: 16px; }
.group > li { position: relative; }
.group > li + li::before { content: ''; position: absolute; top: 0; right: 0; left: var(--inset, 16px); height: 0.5px; background: var(--sep); z-index: 2; }
.cell { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--ink); font-size: 17px; }
button.cell, a.cell, label.cell { cursor: pointer; }
button.cell:active, a.cell:active, .cell.pressable:active { background: var(--cell-press); }
.cell-main { flex: 1; min-width: 0; }
.cell-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { display: block; margin-top: 2px; font-size: 14px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-value { color: var(--label-2); font-size: 16px; white-space: nowrap; }
.cell .chev { width: 18px; height: 18px; color: var(--label-3); stroke-width: 2.4; }
.cell-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--gold-2); flex: none; }
.cell-icon .ic { width: 18px; height: 18px; }
.cell.danger { color: var(--red-text); justify-content: center; font-weight: 500; }
.cell.accent { color: var(--gold-text); }
.cell.center { justify-content: center; }
.cell.empty { color: var(--label-2); font-size: 15px; min-height: 64px; line-height: 1.4; }
.hint-line { margin: 14px 4px 0; font-size: 13px; color: var(--label-3); line-height: 1.45; }

/* Pastilles de statut */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, 0.08); color: var(--label-2); }
.pill.st-confirmed { background: rgba(200, 164, 100, 0.16); color: var(--gold-2); }
.pill.st-arrived, .pill.st-in_chair { background: rgba(76, 195, 138, 0.16); color: #7EE0B0; }
.pill.st-done { background: rgba(255, 255, 255, 0.08); color: var(--label-2); }
.pill.st-cancelled { background: rgba(255, 122, 112, 0.14); color: var(--red-text); }
.pill.st-noshow { background: rgba(233, 162, 59, 0.16); color: #F3C27A; }
.pill.st-waiting { background: rgba(233, 162, 59, 0.16); color: #F3C27A; }
.pill.late { background: rgba(255, 122, 112, 0.14); color: var(--red-text); }
/* Numéro bloqué pour la réservation en ligne (après un « Absent ») */
.pill.blocked { background: rgba(255, 122, 112, 0.14); color: var(--red-text); padding: 0 7px 0 5px; }
.pill.blocked .ic { width: 13px; height: 13px; }
.pill.blocked + .pill { margin-left: -6px; }                                  /* les deux pastilles restent groupées (gap de .cell) */
.cell-icon.blocked { color: var(--red-text); background: rgba(255, 122, 112, 0.14); }
.sheet-hero .blocked-line { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.sw[data-kind="blocked"] .sw-act-r, .sw-act-r .b-unblock { background: var(--green); color: var(--green-ink); } /* débloquer : action positive */

/* Ligne de RDV / client */
.rdv-time { width: 52px; flex: none; text-align: left; }
.rdv-time b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rdv-time small { display: block; font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.row-done .cell-title, .row-done .rdv-time b { color: var(--label-2); }
.row-cancelled .cell-title { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); color: var(--label-2); }

/* Avatar */
.avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c, #C8A464) 70%, white 10%), color-mix(in srgb, var(--c, #C8A464) 45%, black)); color: #fff; font-weight: 700; font-size: 16px; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.xl { width: 96px; height: 96px; font-size: 32px; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }

/* ============================ Lignes glissables ============================ */
.sw { position: relative; overflow: hidden; touch-action: pan-y; }
.sw-fg { position: relative; z-index: 1; background: #141416; transform: translateX(0); }
.sw-fg.anim { transition: transform 300ms var(--spring); }
.sw-fg.anim-bounce { transition: transform 340ms var(--bounce); }
.sw-act { position: absolute; top: 0; bottom: 0; display: flex; align-items: stretch; z-index: 0; }
.sw-act-l { left: 0; right: 0; justify-content: flex-start; background: var(--green); color: var(--green-ink); }
.sw-act-l.to-done { background: #3E8EDB; color: #fff; }                      /* Terminé : bleu iOS, blanc 4.6:1 */
.sw-act-l .sw-lab { display: flex; align-items: center; gap: 8px; padding: 0 22px; font-weight: 700; font-size: 16px; transform: scale(0.85); opacity: 0.6; transition: transform 160ms var(--bounce), opacity 160ms; }
.sw.arm-r .sw-act-l .sw-lab { transform: scale(1.08); opacity: 1; }
.sw-act-r { right: 0; left: 0; justify-content: flex-end; background: var(--red-strong); }
.sw-act-r button { min-width: 86px; padding: 0 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 600; color: #fff; }
.sw-act-r .b-noshow { background: #B76E12; }                                  /* blanc 4.6:1 */
.sw-act-r .b-cancel, .sw-act-r .b-remove { background: var(--red-strong); }
.sw.arm-full .sw-act-r .b-noshow { min-width: 0; width: 0; padding: 0; overflow: hidden; }
.sw.arm-full .sw-act-r button:last-child { flex: 1; align-items: flex-start; padding-left: 24px; }
.sw-act-r button { transition: min-width 200ms var(--spring), width 200ms var(--spring); }

/* ============================ Aujourd'hui ============================ */
.live-card {
  position: relative; border-radius: 26px; padding: 18px 16px 16px; overflow: hidden;
  background: linear-gradient(160deg, rgba(200, 164, 100, 0.20), rgba(255, 255, 255, 0.04) 55%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 0 0.5px rgba(227, 200, 140, 0.35) inset, 0 20px 50px rgba(0, 0, 0, 0.35);
}
.lc-label { margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--label-2); }
.lc-row { display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; gap: 8px; margin-top: 6px; }
.lc-count { margin: 0; text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
.lc-count strong { font-size: 76px; font-weight: 700; letter-spacing: -0.04em; display: inline-block; }
.lc-count strong.bump { animation: bump 320ms var(--bounce); }
.lc-count span { font-size: 26px; font-weight: 600; color: var(--label-2); margin-left: 4px; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.lc-btn { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; transition: transform 160ms var(--bounce), background 160ms; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.lc-btn .ic { width: 34px; height: 34px; stroke-width: 2.6; }
.lc-btn.minus { background: rgba(255, 255, 255, 0.10); color: var(--ink); box-shadow: 0 0 0 0.5px var(--hair) inset; }
.lc-btn.plus { background: var(--gold); color: #17120A; box-shadow: 0 8px 24px rgba(200, 164, 100, 0.35); }
.lc-btn:active, .lc-btn.pressing { transform: scale(0.9); }
.lc-btn:disabled { opacity: 0.35; }
.lc-btn.plus.longpress { animation: lp 450ms linear; }
@keyframes lp { to { box-shadow: 0 0 0 10px rgba(200, 164, 100, 0); } from { box-shadow: 0 0 0 0 rgba(200, 164, 100, 0.6); } }
.gauge { height: 6px; margin: 16px 6px 0; border-radius: 99px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.gauge i { display: block; height: 100%; width: 100%; transform-origin: left; background: var(--gold-2); border-radius: inherit; transition: transform 350ms var(--spring); }
.gauge.lvl-chargé i { background: var(--orange); }
.gauge.lvl-complet i { background: var(--red-text); }
.lc-meta { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.lc-more { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 12px; font-size: 15px; color: var(--gold-text); }

.ios-switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 51px; height: 31px; border-radius: 99px; margin: 0;
  background: rgba(120, 120, 128, 0.36); transition: background 220ms; cursor: pointer; }
.ios-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.04); transition: transform 260ms var(--spring); }
.ios-switch:checked { background: var(--green); }
.ios-switch:checked::after { transform: translateX(20px); }
.ios-switch.big { width: 60px; height: 36px; }
.ios-switch.big::after { width: 32px; height: 32px; }
.ios-switch.big:checked::after { transform: translateX(24px); }
.ios-switch:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.visitor-preview { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 0 0.5px var(--hair) inset; width: 100%; }
.vp-label { display: block; font-size: 12px; color: var(--label-3); margin-bottom: 6px; }
.vp-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.vp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(76, 195, 138, 0.18); }
.vp-dot.modéré { background: var(--gold-2); box-shadow: 0 0 0 4px rgba(227, 200, 140, 0.18); }
.vp-dot.chargé { background: var(--orange); box-shadow: 0 0 0 4px rgba(233, 162, 59, 0.18); }
.vp-dot.complet, .vp-dot.fermé { background: var(--red-text); box-shadow: 0 0 0 4px rgba(255, 122, 112, 0.18); }
.vp-text { margin: 4px 0 0; font-size: 14px; color: var(--label-2); }
.vp-off { font-size: 14px; color: var(--label-2); }

/* ============================ Agenda ============================ */
.daystrip { display: flex; gap: 8px; overflow-x: auto; margin: 4px calc(-1 * var(--gut)) 0; padding: 4px var(--gut) 10px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.daystrip::-webkit-scrollbar { display: none; }
.day { flex: none; width: 54px; height: 70px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; scroll-snap-align: center;
  background: var(--cell); box-shadow: 0 0 0 0.5px var(--hair) inset; color: var(--ink); }
.day small { font-size: 12px; color: var(--label-2); text-transform: capitalize; }
.day b { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.day i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.day.has i { background: var(--gold-2); }
.day.closed b { color: var(--label-3); }
.day.today small { color: var(--gold-2); font-weight: 700; }
.day[aria-pressed="true"] { background: var(--gold); color: #17120A; box-shadow: none; }
.day[aria-pressed="true"] small { color: #3A2C12; }
.day[aria-pressed="true"] i { background: #17120A; }
.agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 4px; }
.agenda-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.agenda-head h2::first-letter { text-transform: uppercase; }
.agenda-head p { margin: 2px 0 0; font-size: 14px; color: var(--label-2); }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 10px; background: rgba(118, 118, 128, 0.24); flex: none; }
.seg button { min-height: 34px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); }
.hour-label { margin: 18px 4px 6px; font-size: 13px; font-weight: 600; color: var(--label-3); font-variant-numeric: tabular-nums; }
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; margin: 14px calc(-1 * var(--gut)) 0; padding: 0 var(--gut) 8px; scrollbar-width: none; }
.cols::-webkit-scrollbar { display: none; }
.col-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; font-weight: 600; font-size: 15px; }
.col-card { width: 100%; display: block; margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: var(--cell); box-shadow: inset 3px 0 0 var(--c, var(--gold)), 0 0 0 0.5px var(--hair) inset; }
.col-card:active { background: var(--cell-press); }
.col-card b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--label-2); font-weight: 600; }
.col-card span { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-card small { display: block; font-size: 13px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-card.row-cancelled span, .col-card.row-noshow span { text-decoration: line-through; color: var(--label-2); }
.col-empty { font-size: 14px; color: var(--label-3); padding: 8px 2px; }

/* ============================ Feuilles (bottom sheets) ============================ */
.sheets { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 320ms var(--spring); pointer-events: auto; }
.backdrop.in { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - var(--sat) - 12px);
  display: flex; flex-direction: column; pointer-events: auto;
  border-radius: 16px 16px 0 0;
  background: var(--sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 -0.5px 0 var(--hair), 0 -20px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(100%); transition: transform 380ms var(--spring);
  outline: none;
}
.sheet.in { transform: translateY(0); }
.sheet.dragging { transition: none; }
.sheet.tall { height: calc(100% - var(--sat) - 12px); }
.sheet-grab { flex: none; touch-action: none; cursor: grab; padding-top: 6px; }
.sheet-grab::before { content: ''; display: block; width: 38px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.28); margin: 0 auto; }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; padding: 0 8px; }
.sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; text-align: center; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-head .nb-btn:last-child { justify-self: end; font-weight: 600; }
.sheet-head .nb-btn:disabled { color: var(--label-3); }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gut) calc(24px + var(--sab)); -webkit-overflow-scrolling: touch; }

/* Action sheet iOS */
.asheet { position: absolute; left: 8px; right: 8px; bottom: calc(8px + var(--sab)); pointer-events: auto; transform: translateY(calc(100% + 20px)); transition: transform 360ms var(--spring); }
.asheet.in { transform: none; }
.as-group { border-radius: 14px; overflow: hidden; background: var(--sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 0 0 0.5px var(--hair) inset; }
.as-head { padding: 14px 16px; text-align: center; color: var(--label-2); font-size: 13px; line-height: 1.4; }
.as-head strong { display: block; font-size: 14px; color: var(--label-2); margin-bottom: 2px; }
.as-btn { display: flex; width: 100%; min-height: 57px; align-items: center; justify-content: center; gap: 10px; font-size: 20px; color: var(--gold-text); border-top: 0.5px solid var(--sep); }
.as-btn:active { background: var(--cell-press); }
.as-btn.destructive { color: var(--red-text); }
.as-cancel { margin-top: 8px; font-weight: 600; border-top: 0; }

/* Contenus de feuille */
.sheet-hero { text-align: center; padding: 6px 0 14px; }
.sheet-hero h3 { margin: 8px 0 2px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sheet-hero p { margin: 0; color: var(--label-2); font-size: 15px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 4px; }
.quick > * { min-height: 64px; border-radius: 14px; background: var(--cell); box-shadow: 0 0 0 0.5px var(--hair) inset; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--gold-text); font-size: 12px; font-weight: 600; }
.quick > *:active { background: var(--cell-press); }
.quick > [aria-disabled="true"] { color: var(--label-3); pointer-events: none; }
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.status-grid button { min-height: 52px; border-radius: 12px; background: var(--cell); box-shadow: 0 0 0 0.5px var(--hair) inset; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.status-grid button[aria-pressed="true"] { background: var(--gold); color: #17120A; box-shadow: none; }
.status-grid button:active { transform: scale(0.97); }

.big-btn { width: 100%; min-height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 600; margin-top: 14px; }
.big-btn.gold { background: var(--gold); color: #17120A; }
.big-btn.glass { background: var(--cell); color: var(--ink); box-shadow: 0 0 0 0.5px var(--hair) inset; }
.big-btn.danger { background: rgba(255, 122, 112, 0.12); color: var(--red-text); }
.big-btn:active { transform: scale(0.98); opacity: 0.85; }
.big-btn:disabled { opacity: 0.45; }
.big-btn .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }

/* Champs */
.form-group { list-style: none; margin: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--cell); box-shadow: 0 0 0 0.5px var(--hair) inset; }
.form-group > li { position: relative; }
.form-group > li + li::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--sep); }
.field { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 16px; }
.field > label, .field > .lab { width: 104px; flex: none; color: var(--ink); font-size: 16px; }
.field input, .field select, .field textarea, .field-stack input, .field-stack textarea {
  flex: 1; min-width: 0; width: 100%; min-height: 48px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 17px; padding: 0; }
.field select { -webkit-appearance: none; appearance: none; color: var(--label-2); text-align: right; direction: rtl; }
.field select option { direction: ltr; }
.field input::placeholder, textarea::placeholder { color: var(--label-3); }
.field input[type="time"] { flex: none; width: auto; min-width: 84px; text-align: right; color: var(--gold-text); }
.field-stack { padding: 10px 16px; }
.field-stack label { display: block; font-size: 13px; color: var(--label-2); margin-bottom: 2px; }
.field-stack textarea { min-height: 84px; resize: none; line-height: 1.4; padding-top: 4px; }
.auth input[aria-invalid="true"], .field input[aria-invalid="true"] { color: var(--red-text); }
.form-error { margin: 10px 4px 0; min-height: 0; color: var(--red-text); font-size: 15px; }
.form-error:empty { display: none; }
.form-ok { margin: 10px 4px 0; color: #7EE0B0; font-size: 15px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 6px; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 0 16px; border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; background: var(--cell); box-shadow: 0 0 0 0.5px var(--hair) inset; font-size: 15px; font-weight: 600; color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--gold); color: #17120A; box-shadow: none; }
.chip small { font-weight: 500; opacity: 0.8; }
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot { min-height: 48px; border-radius: 12px; background: var(--cell); box-shadow: 0 0 0 0.5px var(--hair) inset; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.slot[aria-pressed="true"] { background: var(--gold); color: #17120A; }
.slot:active { transform: scale(0.95); }
.sec-label { margin: 18px 4px 8px; font-size: 13px; font-weight: 600; color: var(--label-3); }
.steps { display: flex; justify-content: center; gap: 6px; margin: 0 0 12px; }
.steps i { width: 24px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); }
.steps i.on { background: var(--gold-2); }
.svc-pick { width: 100%; }

.photo-pick { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 18px; }
.photo-pick .row { display: flex; gap: 8px; }
.photo-pick label { min-height: 40px; padding: 0 14px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; background: var(--cell); color: var(--gold-text); font-size: 15px; font-weight: 600; box-shadow: 0 0 0 0.5px var(--hair) inset; cursor: pointer; }
.photo-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.code-input { font-family: ui-monospace, 'SF Mono', Menlo, monospace !important; letter-spacing: 0.35em; text-transform: uppercase; text-align: center; font-size: 26px !important; }

/* Tutoriel « Sur l'écran d'accueil » */
.tuto { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tuto li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--cell); box-shadow: 0 0 0 0.5px var(--hair) inset; font-size: 16px; }
.tuto .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #17120A; font-size: 14px; font-weight: 700; flex: none; }
.tuto .mock { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.10); color: #4AA3FF; font-size: 14px; font-weight: 600; white-space: nowrap; }
.tuto .mock.light { color: var(--ink); }
.note-box { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(200, 164, 100, 0.10); box-shadow: 0 0 0 0.5px rgba(227, 200, 140, 0.3) inset; font-size: 14px; color: var(--ink); line-height: 1.45; }
.note-box.warn { background: rgba(233, 162, 59, 0.10); box-shadow: 0 0 0 0.5px rgba(233, 162, 59, 0.35) inset; }
details.dev { margin-top: 14px; border-radius: 14px; background: var(--cell); box-shadow: 0 0 0 0.5px var(--hair) inset; }
details.dev summary { min-height: 50px; display: flex; align-items: center; padding: 0 16px; font-size: 15px; color: var(--label-2); cursor: pointer; list-style: none; }
details.dev summary::-webkit-details-marker { display: none; }
details.dev[open] summary { border-bottom: 0.5px solid var(--sep); }
details.dev .dev-body { padding: 4px 0 14px; }
details.dev .dev-body .big-btn { width: calc(100% - 32px); margin: 12px 16px 0; }
.skeleton { height: 50px; border-radius: 14px; background: linear-gradient(90deg, var(--cell), rgba(255, 255, 255, 0.10), var(--cell)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.kv { display: flex; justify-content: space-between; gap: 12px; }

/* ============================ Toast, bannière ============================ */
.toast { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + var(--sab) + 12px);
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 6px 6px 16px; border-radius: 16px;
  background: rgba(44, 44, 48, 0.88); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 0 0.5px var(--hair) inset, 0 12px 40px rgba(0, 0, 0, 0.5);
  font-size: 15px; transform: translateY(20px); opacity: 0; transition: transform 300ms var(--spring), opacity 200ms; }
.toast.in { transform: none; opacity: 1; }
.toast.err { background: rgba(80, 26, 24, 0.92); }
.toast p { margin: 0; flex: 1; min-width: 0; }
.toast button { min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--gold-2); font-weight: 700; font-size: 15px; }
.toast button:active { background: rgba(255, 255, 255, 0.08); }
.toast .bar { position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(227, 200, 140, 0.5); transform-origin: left; }
body.sheet-open .toast { bottom: calc(var(--sab) + 12px); }

.banner { position: fixed; z-index: 70; left: 8px; right: 8px; top: calc(var(--sat) + 8px);
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; text-align: left; width: calc(100% - 16px);
  background: rgba(36, 36, 40, 0.86); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 0 0.5px var(--hair) inset, 0 16px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(calc(-100% - 20px)); transition: transform 420ms var(--spring); touch-action: none; }
.banner.in { transform: none; }
.banner img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.banner .b-main { flex: 1; min-width: 0; }
.banner .b-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--label-2); }
.banner strong { display: block; font-size: 15px; margin-top: 1px; }
.banner .b-text { display: block; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================ Authentification ============================ */
.auth { position: fixed; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 24px) 20px calc(var(--sab) + 24px);
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(200, 164, 100, 0.18), transparent 70%),
    var(--bg); }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { display: block; width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 20px; box-shadow: 0 12px 40px rgba(200, 164, 100, 0.25), 0 0 0 0.5px rgba(227, 200, 140, 0.4); }
.auth h1 { margin: 0; text-align: center; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.auth .lead { margin: 6px 0 24px; text-align: center; color: var(--label-2); font-size: 15px; line-height: 1.45; }
.auth .form-group { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.auth .field > label { width: 108px; }
.auth-links { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 18px; }
.link-btn { min-height: 44px; padding: 0 12px; color: var(--gold-text); font-size: 16px; }
.link-btn.dim { color: var(--label-2); font-size: 15px; }
.auth-done { text-align: center; }
.auth-done .big-ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(76, 195, 138, 0.15); color: #7EE0B0; }
.auth-done .big-ic .ic { width: 30px; height: 30px; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; }

/* ============================ Capacité (tap sur « / 10 ») ============================ */
.lc-count .lc-cap { font-size: 26px; font-weight: 600; color: var(--label-2); margin-left: 4px; min-height: 44px; padding: 0 6px; border-radius: 10px;
  text-decoration: underline dotted rgba(227, 200, 140, 0.55); text-underline-offset: 6px; text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; vertical-align: baseline; }
.lc-count .lc-cap:active { background: var(--cell-press); }
.lc-count .lc-cap:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.stepper { display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; gap: 8px; margin: 18px 0 6px; }
.stp-val { text-align: center; font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }

/* ============================ Rendez-vous en ligne ============================ */
.bk-card {
  position: relative; margin-top: 14px; border-radius: 22px; padding: 6px 6px 4px; overflow: hidden;
  background: linear-gradient(160deg, rgba(76, 195, 138, 0.14), rgba(255, 255, 255, 0.04) 60%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 0 0.5px rgba(76, 195, 138, 0.35) inset, 0 14px 36px rgba(0, 0, 0, 0.3);
  --st: var(--green);
}
.bk-card.st-off { background: linear-gradient(160deg, rgba(255, 122, 112, 0.18), rgba(255, 255, 255, 0.04) 60%); box-shadow: 0 0 0 0.5px rgba(255, 122, 112, 0.45) inset, 0 14px 36px rgba(0, 0, 0, 0.3); --st: var(--red-text); }
.bk-card.st-pause { background: linear-gradient(160deg, rgba(233, 162, 59, 0.2), rgba(255, 255, 255, 0.04) 60%); box-shadow: 0 0 0 0.5px rgba(233, 162, 59, 0.45) inset, 0 14px 36px rgba(0, 0, 0, 0.3); --st: var(--orange); }
.bk-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 10px; cursor: pointer; }
.bk-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--gold-2); flex: none; }
.bk-ic .ic { width: 22px; height: 22px; }
.bk-title { display: block; font-size: 17px; font-weight: 600; }
.bk-state { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 20px; font-weight: 700; color: var(--st); letter-spacing: -0.01em; }
.bk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 22%, transparent); flex: none; }
.bk-sub { margin: 0 10px 2px; font-size: 14px; color: var(--label-2); line-height: 1.4; }
.bk-more { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 10px; font-size: 15px; color: var(--gold-text); }
.bk-more .chev { width: 16px; height: 16px; stroke-width: 2.4; color: var(--label-3); }

.counter { display: block; margin-top: 4px; text-align: right; font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.counter.full { color: var(--orange); }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-pair .big-btn { font-size: 16px; }
.icon-btn { width: 44px; height: 44px; margin-right: -8px; border-radius: 12px; display: grid; place-items: center; color: var(--red-text); flex: none; }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn:active { background: rgba(255, 122, 112, 0.14); }
.field input[type="date"] { text-align: right; color: var(--gold-text); color-scheme: dark; }

@media (min-width: 700px) {
  .content { max-width: 680px; margin: 0 auto; }
  .sheet { left: 50%; right: auto; width: 600px; margin-left: -300px; }
  .asheet { left: 50%; right: auto; width: 420px; margin-left: -210px; }
  .toast { left: 50%; right: auto; width: 440px; margin-left: -220px; }
  .slot-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .asheet, .toast, .banner, .backdrop, .sw-fg.anim, .sw-fg.anim-bounce, .content.ptr-anim { transition-duration: 1ms !important; }
  .lc-count strong.bump, .ptr-spin, .skeleton { animation: none !important; }
}
.cell-title.wrap, .cell-sub.wrap { white-space: normal; }