/* ouifest app: creation, family space, studio desk, brief, pass, door. White page; the invitation carries the colour. */
:root {
  --bg: #ffffff;
  --soft: #f6f6f7;
  --ink: #111111;
  --ink-2: #45454d;
  --ink-3: #6b6b74;
  --line: #ececef;
  --line-2: #dcdce1;
  --accent: #1e4d40;
  --accent-hover: #163a30;
  --accent-tint: #eaf2ef;
  --on-accent: #ffffff;
  --danger: #b42318; --danger-tint: #fdecea;
  --success: #1e7a4c; --success-tint: #e8f5ee;
  --warning: #8a5a00; --warning-tint: #fff4dc;
  --r-pill: 999px; --r-card: 20px; --r-input: 12px; --r-sm: 10px; --r-phone: 44px;
  --shadow-1: 0 1px 2px rgba(17, 17, 17, .05), 0 1px 1px rgba(17, 17, 17, .03);
  --shadow-2: 0 2px 4px rgba(17, 17, 17, .04), 0 18px 36px -18px rgba(17, 17, 17, .22);
  --shadow-art: 0 32px 64px -32px rgba(17, 17, 17, .45), 0 2px 6px rgba(17, 17, 17, .06);
  --font: "Manrope Variable", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --pad: var(--gutter);
  --top-h: 64px;
  color-scheme: light;
  accent-color: var(--accent);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0; min-height: 100svh;
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.6 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-tint); color: var(--ink); }
input, textarea { caret-color: var(--accent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
[hidden] { display: none !important; }

/* ---------- type ---------- */
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1 { font: 800 clamp(2rem, 1.55rem + 1.6vw, 2.75rem)/1.06 var(--font); letter-spacing: -0.04em; margin: 40px 0 10px; }
h2 { font: 750 1.375rem/1.25 var(--font); letter-spacing: -0.02em; margin: 0 0 8px; }
h3 { font: 700 1.0625rem/1.3 var(--font); letter-spacing: -0.01em; margin: 0 0 4px; }
p { margin: 0 0 12px; }
.lead { font-size: 1.0625rem; color: var(--ink-2); max-width: 60ch; margin-bottom: 24px; }
.small, .meta { font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); font-weight: 500; }
.meta { font-size: 0.9375rem; }
.label { font: 600 0.875rem/1.3 var(--font); color: var(--ink-2); }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header: wordmark, context, language ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--top-h); padding: 10px var(--gutter);
  background: var(--bg);
  box-shadow: 0 1px 0 transparent;
  animation: top-line linear both;
  animation-timeline: scroll(root);
  animation-range: 0 24px;
}
@keyframes top-line { to { box-shadow: 0 1px 0 var(--line); } }
.brand { display: inline-flex; align-items: center; min-height: 44px; font: 800 1.5rem/1 var(--font); letter-spacing: -0.05em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand > span { color: var(--accent); }
.brand:hover { color: var(--ink); }
.top__ctx { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font: 600 0.9375rem/1.2 var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__ctx::before { content: ""; flex: none; width: 1px; height: 20px; background: var(--line-2); }
.top__ctx:empty { display: none; }
.top__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font: 600 0.9375rem var(--font); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.top__link:hover { color: var(--ink); }
.top__link svg { width: 18px; height: 18px; flex: none; }

/* FR / EN: soft track, the chosen language a raised white pill. */
.lang { display: inline-flex; padding: 0; border-radius: var(--r-pill); background: var(--soft); }
.lang button {
  min-height: 44px; min-width: 48px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: transparent; font: 700 0.8125rem/1 var(--font); color: var(--ink-3); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }

/* ---------- page frames ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) 80px; }
.wrap--wide { max-width: 1180px; }
.wrap--narrow { max-width: 480px; }
.page-head { margin: 40px 0 24px; }
.page-head h1 { margin: 0 0 8px; }
.page-head .lead { margin: 0; }

/* ---------- cards ---------- */
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(20px, 3vw, 28px); margin: 0 0 16px; }
.panel > h2:first-child, .panel > .panel__head:first-child { margin-top: 0; }
.panel--deep { background: var(--bg); }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.panel__head h2 { margin: 0; }
.panel > :last-child { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--r-pill);
  font: 650 1rem/1.15 var(--font); letter-spacing: -0.005em; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--soft); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--wine, .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-1); }
.btn--wine:hover, .btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--ghost { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--danger { background: var(--bg); color: var(--danger); box-shadow: inset 0 0 0 1px #efc4bf; }
.btn--danger:hover { background: var(--danger-tint); color: var(--danger); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn--full { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* A disabled primary still has to be read (« Réessayer à 10:24 »): ink-3 on soft, not a faded green. */
.btn--wine[disabled], .btn--primary[disabled] { opacity: 1; background: var(--soft); color: var(--ink-3); box-shadow: none; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; font: 600 0.9375rem var(--font); color: var(--ink); text-decoration: none; cursor: pointer; }
.link-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.link-btn svg { width: 18px; height: 18px; }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row:has(> .field) { align-items: flex-start; gap: 0 14px; }
.row > .field { flex: 1 1 180px; min-width: 0; }
.row--between { justify-content: space-between; }
.stack { display: grid; gap: 10px; }

/* ---------- form controls ---------- */
.field { display: grid; gap: 8px; align-content: start; margin: 0 0 18px; min-width: 0; }
.field > span { font: 600 0.875rem/1.3 var(--font); color: var(--ink); }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: 400 1rem/1.4 var(--font); color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r-input);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: #c4c4cb; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30, 77, 64, .18); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: var(--soft); color: var(--ink-3); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--accent); box-shadow: none; }
input[type="range"] { min-height: 24px; padding: 0; border: 0; box-shadow: none; }
input[type="date"], input[type="time"] { font-variant-numeric: tabular-nums; }
textarea { min-height: 104px; resize: vertical; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2345454d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
input[type="search"] {
  padding-left: 42px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%236b6b74' stroke-width='1.75'/%3E%3Cpath d='M16 16l4 4' stroke='%236b6b74' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 14px center / 18px;
}
.radios { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.radios legend { font: 600 0.875rem/1.3 var(--font); color: var(--ink); margin-bottom: 8px; padding: 0; }
.radios label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--soft); font: 600 0.9375rem var(--font); color: var(--ink); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.radios label:hover { background: #ededf0; }
.radios label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radios label:has(input:checked) { background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(30, 77, 64, .28); }
.radios label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.radios label:has(input:checked)::before { content: ""; width: 14px; height: 14px; margin-left: -4px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hint { font-size: 0.875rem; color: var(--ink-3); margin: -8px 0 18px; }
.field + .small, .field + .hint { margin-top: -10px; margin-bottom: 18px; }

/* Errors: the field turns red, the message sits under it with an icon. */
.err { display: flex; align-items: flex-start; gap: 8px; color: var(--danger); font-weight: 600; font-size: 0.9375rem; line-height: 1.45; }
.err::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: currentColor; -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat; }
:root { --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/svg%3E"); }
p.err:not(.field-err) { padding: 12px 14px; border-radius: var(--r-input); background: var(--danger-tint); }
.field-err { margin: 0; font-size: 0.875rem; }
[aria-invalid="true"] { border-color: var(--danger) !important; }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .16) !important; }
.hp { position: absolute; left: -9999px; }

/* ---------- figures ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); margin: 16px 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
/* Each cell draws its top and left hairline; the frame clips the outer ones, so a short last row leaves no grey hole. */
.stat { padding: 16px 18px; min-width: 0; margin: -1px 0 0 -1px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat b { display: block; font: 750 1.75rem/1.1 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat span { display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.3; font-weight: 500; color: var(--ink-3); }

.table-wrap { overflow-x: auto; margin: 12px 0 0; }
.data { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.data th, .data td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
.data th:first-child, .data td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.data th:last-child, .data td:last-child { padding-right: 0; }
.data thead th { font: 650 0.8125rem/1.3 var(--font); color: var(--ink-3); vertical-align: bottom; }
.data tbody tr:last-child > * { border-bottom: 0; }
.data td b { font-weight: 700; color: var(--ink); }
.data td small { display: block; font-size: 0.8125rem; color: var(--ink-3); font-weight: 500; }
.data .data__total td { font-weight: 700; color: var(--ink); }

/* ---------- filters ---------- */
.tabs { display: flex; gap: 6px; margin: 4px 0 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
@media (max-width: 640px) { .tabs { mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; } }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 0; background: var(--soft); font: 600 0.875rem var(--font); color: var(--ink-2); cursor: pointer; font-variant-numeric: tabular-nums; transition: background .15s var(--ease), color .15s var(--ease); }
.tabs button:hover { color: var(--ink); background: #ededf0; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li.small { padding: 20px 0; }
.guest { border-top: 1px solid var(--line); padding: 16px 0; display: grid; gap: 4px; }
.guest:first-child { border-top: 0; padding-top: 4px; }
.guest p { margin: 0; }
.guest__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; }
.guest__head h3 { margin: 0; font-size: 1rem; }
.guest__head > span { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.guest__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.guest__actions:empty { display: none; }
.guest .small a { color: var(--ink-2); }

.pill, .badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: var(--r-pill); font: 650 0.78125rem/1 var(--font); white-space: nowrap; background: var(--soft); color: var(--ink-2); }
.pill--approved, .badge--ok { background: var(--success-tint); color: var(--success); }
.pill--pending, .badge--warn { background: var(--warning-tint); color: var(--warning); }
.pill--in { background: var(--success); color: #fff; }
.pill--declined, .pill--no, .badge--bad { background: var(--danger-tint); color: var(--danger); }
.badge--accent { background: var(--accent-tint); color: var(--accent); }
.badge--ok::before, .badge--warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Stage progress: one caption, a quiet segmented bar. */
/* Stage progress: labelled segments, full width; on a phone the caption carries the label. */
.steps { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 20px 0 28px; }
.steps::before { content: attr(data-now); grid-column: 1 / -1; margin-bottom: 8px; font: 600 0.875rem/1.3 var(--font); color: var(--ink-2); }
.steps li { display: grid; gap: 8px; align-content: start; min-width: 0; font: 600 0.8125rem/1.25 var(--font); color: var(--ink-3); }
.steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s var(--ease); }
.steps li.is-done::before, .steps li[aria-current="step"]::before { background: var(--accent); }
.steps li.is-done { color: var(--ink-2); }
.steps li[aria-current="step"] { color: var(--ink); }
.steps li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .steps::before { display: none; } }
@media (max-width: 767px) { .steps li > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* Editor stepper (/creer/, /creer/occasion.html): tappable labelled segments. */
.stepper { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.stepper button {
  display: grid; gap: 10px; align-content: start; min-height: 44px; min-width: 0; padding: 0; text-align: left;
  border: 0; background: none; font: 600 0.8125rem/1.25 var(--font); color: var(--ink-3); cursor: pointer;
}
.stepper button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper button::before { content: ""; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s var(--ease); }
.stepper button.is-done::before, .stepper button[aria-current="step"]::before { background: var(--accent); }
.stepper button.is-done { color: var(--ink-2); }
.stepper button[aria-current="step"] { color: var(--ink); }
.stepper button:disabled { cursor: default; }
.stepper button:not(:disabled):hover { color: var(--ink); }
.stepper b { font-weight: 750; font-variant-numeric: tabular-nums; margin-right: 6px; color: inherit; }
.stepper button[aria-current="step"] b { color: var(--accent); }
@media (max-width: 420px) { .stepper { gap: 8px; } .stepper button { font-size: 0.75rem; } .stepper b { margin-right: 3px; } }

/* Event rows (studio list, account picker). */
.event { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 4px 16px; align-items: center; width: 100%; min-height: 64px; text-decoration: none; color: inherit; border: 0; border-top: 1px solid var(--line); padding: 14px 12px; margin: 0; border-radius: 0; background: none; font: inherit; text-align: left; cursor: pointer; transition: background .15s var(--ease); }
.event:hover { background: var(--soft); color: inherit; }
.event:first-of-type { border-top: 0; }
.event b { font-weight: 700; color: var(--ink); }
.event__when { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; line-height: 1.35; }
.event__go { width: 20px; height: 20px; color: var(--ink-3); }
.event__go svg { width: 20px; height: 20px; display: block; }
.events { margin: 0 -12px; }

.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: var(--ink); color: #fff; padding: 14px 20px; border-radius: 14px; font-weight: 600; line-height: 1.4; text-align: center; z-index: 40; box-shadow: var(--shadow-2); animation: toast-in .25s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

pre.brief { white-space: pre-wrap; font: 400 0.9375rem/1.65 var(--font); color: var(--ink-2); margin: 0; }
pre.brief b { color: var(--ink); font-weight: 650; }

details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; font-weight: 650; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.75px 1.75px 0; transform: translateY(-3px) rotate(45deg); transition: transform .2s var(--ease); }
details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.danger { margin-top: 24px; }
.danger > summary { color: var(--danger); font-size: 0.9375rem; justify-content: flex-start; width: fit-content; }
#login { max-width: 480px; }

.next h2 { margin-bottom: 6px; }
.next p:last-child { margin-bottom: 0; }
progress { display: block; width: 100%; height: 6px; margin: 16px 0 10px; border: 0; border-radius: 3px; background: var(--line); overflow: hidden; appearance: none; -webkit-appearance: none; }
progress::-webkit-progress-bar { background: var(--line); border-radius: 3px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 3px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 3px; }

/* Empty / loading */
.empty { display: grid; justify-items: start; gap: 6px; padding: 8px 0; color: var(--ink-3); }
.skeleton { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--soft), #eeeef1, var(--soft)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- share card ---------- */
.share { display: grid; gap: 12px; }
.share__link { display: block; font: 600 0.9375rem/1.4 var(--font); word-break: break-all; padding: 12px 14px; margin: 0; border-radius: var(--r-input); background: var(--soft); color: var(--ink); font-variant-numeric: tabular-nums; }
.share__qrbox { display: flex; gap: 16px; align-items: center; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.share__qr { width: 120px; flex: none; aspect-ratio: 1; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); padding: 6px; }
.share__qrbox figcaption { display: grid; gap: 4px; }
.share__qrbox a, .guest .small a, .tap { font-weight: 650; display: inline-flex; min-height: 44px; align-items: center; }
.pay-bar { position: sticky; bottom: 0; z-index: 4; margin: 16px calc(-1 * var(--pad)) 0; padding: 14px var(--pad) max(14px, env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -1px 0 var(--line); }
.pay-bar .small, .pay-bar .hint { margin: 10px 0 0; text-align: center; }

/* ---------- cagnotte ---------- */
.cg-h { margin: 28px 0 4px; font-size: 1rem; }
.cg-big { margin: 18px 0 6px; font: 600 1rem var(--font); color: var(--ink-2); }
.cg-big b { font: 800 2.5rem/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; margin-right: 4px; }
.cg-big span { display: block; margin-top: 6px; font-size: 0.875rem; color: var(--ink-3); font-weight: 500; }
.cg-recap { padding: 14px 16px; border-radius: var(--r-input); background: var(--soft); font-weight: 650; font-variant-numeric: tabular-nums; }
.cg-form { display: grid; gap: 2px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--line); }
.cg-form h3 { font-size: 1.0625rem; margin-bottom: 12px; }
.cg-form .radios { gap: 8px; }
#cg-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.cagnotte .guest__head b { font-variant-numeric: tabular-nums; }

/* ---------- dashboard columns (family space, studio event) ---------- */
.dash { display: grid; gap: 0 24px; }
.dash__main, .dash__side { min-width: 0; }
@media (min-width: 1040px) {
  .dash { grid-template-columns: minmax(0, 1fr) 380px; gap: 0 56px; align-items: start; }
  /* Main column: open sections separated by hairlines (cards only in the right rail). */
  .dash__main > .panel { border: 0; border-radius: 0; padding: 32px 0; margin: 0; border-top: 1px solid var(--line); }
  .dash__main > .panel:nth-child(1 of :not([hidden])) { border-top: 0; padding-top: 4px; }
}

@media (max-width: 560px) {
  .top { gap: 8px; }
  /* The context stays; a back link shrinks to its 44px icon. */
  .top__back { justify-content: center; min-width: 44px; padding: 0; }
  .top__back .top__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .brand { font-size: 1.375rem; }
  .top__ctx { font-size: 0.875rem; gap: 8px; }
  .top__ctx::before { height: 16px; }
  h1 { margin-top: 28px; }
  .page-head { margin: 28px 0 20px; }
  .panel { border-radius: 18px; }
  .stat b { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .top { box-shadow: 0 1px 0 var(--line); }
}
@supports not (animation-timeline: scroll()) { .top { box-shadow: 0 1px 0 var(--line); } }

/* Add a guest / paste a list: a disclosure under the list, not a card in a card. */
.addguest { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.addguest > summary { justify-content: flex-start; gap: 10px; font-size: 0.9375rem; color: var(--ink); }
.addguest > summary::after { margin-left: auto; }
.addguest__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); }
.addguest__icon svg { width: 16px; height: 16px; }
.addguest form { margin-top: 14px; }
.addguest .import { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.pin { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.pin::placeholder { letter-spacing: 0.3em; }
.loading-rows { display: grid; gap: 12px; padding: 12px 0; }
.panel.empty h2 { margin-bottom: 6px; }
.data th[scope="row"] { font-weight: 600; color: var(--ink-2); }
.data thead th { text-align: right; }
.data thead th:first-child { text-align: left; }
.data tbody th[scope="row"] { min-width: 9.5rem; }

/* Studio A/B/C table on a phone: one block per metric, variants side by side. */
@media (max-width: 640px) {
  .table-wrap tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .table-wrap tbody tr:last-child { border-bottom: 0; }
  .table-wrap th, .table-wrap td { padding: 0; border: 0; text-align: left; white-space: normal; }
  .table-wrap tbody th { grid-column: 1 / -1; min-width: 0; }
  .table-wrap thead th:first-child { display: none; }
  .table-wrap thead th { text-align: left; }
}
.empty .btn { margin-top: 8px; }
.data thead abbr { text-decoration: none; }
@media (max-width: 640px) {
  .stats { grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); grid-template-columns: none; overflow-x: auto; scrollbar-width: none; }
  .stats::-webkit-scrollbar { display: none; }
  .stat { margin-top: 0; border-top: 0; padding: 14px 14px; }
}

/* Sign-in card (/compte/, signed-out family space). */
.login { padding: 28px; }
.login .err { margin: -4px 0 16px; }
.forgot { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.forgot summary { font-size: 0.9375rem; color: var(--ink-2); }
.forgot p { margin: 4px 0; }
#list .events { margin: 8px -12px 0; }
.cg-form fieldset[aria-invalid="true"] label { box-shadow: inset 0 0 0 1px var(--danger); }
.cg-form .field-err, .cg-form fieldset > .field-err { flex-basis: 100%; margin-top: 4px; }
.legend { margin: 12px 0 0; }