@charset "UTF-8";

/* =============================================================================
   Bibi House · member platform
   Same house as bibihouse.com: the palette is the house's own paints, Fraunces for
   headings and ledes, Archivo for body and interface. No other face, no other accent.
   ============================================================================= */

/* ==== 01 · FONTS ================================================== */

/* Archivo: body and interface. One file serves the weights in use (300 to 500). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/archivo-v25-latin-92895abae7c57c46cedefc6165191735.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces: headlines and ledes. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-v38-latin-regular-d7655564f8e5f34a9f2f86a4cfc6b8f0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-v38-latin-italic-550f5146e89f0f97cdf1e22e59b6e9c8.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}


/* ==== 02 · TOKENS ================================================= */

/* The palette is the house's own, same tokens as the public site. */
:root {
  --c-cream:     #F1EADB;
  --c-cream-2:   #F7F2E7;
  --c-field:     #FCFAF5;
  --c-grey:      #E4E6DA;
  --c-church:    #EDE3CE;
  --c-green:     #2F3B39;
  --c-green-2:   #243030;
  --c-sariette:  #3E4A38;
  --c-versa:     #3E5668;
  --c-armerie:   #9AA686;
  --c-leather:   #A6764D;

  --c-ink:       #1A201E;
  --c-ink-2:     #48504C;
  --c-ink-3:     #5A615D;
  --c-line:      rgba(26, 32, 30, .16);
  --c-line-2:    rgba(26, 32, 30, .08);

  /* States, drawn from the same paints: Vert Armerie for what went well, Croma Leather for what did not. */
  --c-ok-bg:     rgba(154, 166, 134, .3);
  --c-ok-ink:    #34402F;
  --c-warn-bg:   rgba(166, 118, 77, .16);
  --c-warn-ink:  #6E4A2C;
  /* Money owed, and only that: a red outside the house paints, so it cannot be missed (user decision 2026-10-09). */
  --c-alert:     #B42318;
  --c-alert-bg:  rgba(180, 35, 24, .1);

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-0: .8rem;
  --fs-1: .92rem;
  --fs-2: 1.12rem;
  --fs-3: clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
  --fs-4: clamp(1.9rem, 1.55rem + 1.5vw, 2.7rem);

  --gutter: clamp(16px, 4vw, 48px);
  --w-read: 50rem;
  --w-wide: 84rem;
  --nav-h: 68px;
  --tap: 44px;
  --field-h: 50px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow: 0 1px 2px rgba(26, 32, 30, .05), 0 18px 40px -24px rgba(26, 32, 30, .35);
  --t-fast: 160ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}


/* ==== 03 · RESET + BASE =========================================== */

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; background: var(--c-cream); }
body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

svg { display: block; flex: none; }
ul { list-style: none; }
strong { font-weight: 500; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--c-green); color: var(--c-cream); }

:focus-visible {
  outline: 2px solid var(--c-versa);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; top: 8px; left: 8px; z-index: 50;
  padding: 10px 16px;
  color: var(--c-cream); background: var(--c-ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-1);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }


/* ==== 04 · TYPOGRAPHY ============================================= */

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-4); line-height: 1.08; letter-spacing: -.015em; }
h2 { font-size: var(--fs-3); line-height: 1.2; letter-spacing: -.01em; }

/* The italic Fraunces label that opens a section on the public site. */
.eyebrow {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-2);
  line-height: 1.3;
  color: var(--c-ink-3);
  margin-bottom: 10px;
}

.lede {
  font-family: var(--f-display);
  font-size: var(--fs-3);
  line-height: 1.45;
  color: var(--c-ink-2);
  overflow-wrap: anywhere;
}

.hint { font-size: var(--fs-1); line-height: 1.5; color: var(--c-ink-3); overflow-wrap: anywhere; }
.hint--warn { color: var(--c-warn-ink); font-weight: 500; }

.link {
  color: var(--c-versa);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(62, 86, 104, .45);
}
.link:hover { text-decoration-color: currentColor; }

.code { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .01em; overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }


/* ==== 05 · LAYOUT ================================================= */

main { flex: 1 0 auto; width: 100%; }

.wrap {
  width: 100%;
  max-width: calc(var(--w-read) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(40px, 6vw, 72px);
}
.wrap--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }

.page-head { margin-bottom: clamp(24px, 4vw, 36px); }
.page-head .lede { margin-top: 12px; max-width: 40ch; }

.section + .section { margin-top: clamp(16px, 3vw, 24px); }

.panel {
  padding: clamp(20px, 3.2vw, 32px);
  background: var(--c-cream-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.panel h2 { margin-bottom: 16px; }
.panel > .hint { margin-top: 12px; }


/* ==== 06 · NAV ==================================================== */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(241, 234, 219, .95);
  border-bottom: 1px solid var(--c-line);
}
@supports (backdrop-filter: blur(1px)) {
  .nav { background: rgba(241, 234, 219, .84); backdrop-filter: saturate(1.2) blur(10px); }
}
.nav__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand end" "links links";
  align-items: center;
  column-gap: 16px;
  max-width: calc(var(--w-wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 10px var(--gutter) 0;
}
.nav--anon .nav__inner { grid-template-areas: "brand end"; padding-bottom: 10px; }

.brand {
  grid-area: brand;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: var(--tap);
  min-width: 0;
  text-decoration: none;
  line-height: 1;
}
.brand__mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--c-cream);
  background: var(--c-green);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -.03em;
  padding-bottom: 2px;
}
.brand__word {
  display: inline-flex; flex-direction: column; gap: 5px;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--f-display); font-weight: 500;
  font-size: 1.15rem; letter-spacing: -.01em;
}
.brand__sub {
  font-family: var(--f-sans); font-weight: 500;
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.nav__end { grid-area: end; display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.nav__end form { display: contents; }
/* The narrowest phones drop the tagline: the page's eyebrow already says it. */
@media (max-width: 359px) { .brand__sub { display: none; } }

/* Phone: the links become a row of tabs under the brand, all reachable without a menu or a script. */
.nav__links {
  grid-area: links;
  display: flex;
  margin: 6px calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: 0 clamp(6px, 2.4vw, 12px);
  font-size: .95rem;
  color: var(--c-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__links a:hover { color: var(--c-ink); }
.nav__links a[aria-current] { color: var(--c-ink); font-weight: 500; border-bottom-color: var(--c-green); }

@media (min-width: 760px) {
  .nav__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand links end";
    column-gap: 32px;
    padding: 0 var(--gutter);
    min-height: var(--nav-h);
  }
  .nav--anon .nav__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand end"; padding-bottom: 0; }
  .nav__links { margin: 0; padding: 0; gap: 4px; justify-content: flex-end; overflow: visible; align-self: stretch; }
  .nav__links a { flex: 0 0 auto; padding: 0 14px; }
}

/*
 * Language toggle, the same as on bibihouse.com: a pill split in two, the current language filled like the knob of a
 * switch and not actionable (a span), the other one a link (signed out) or the form's only button (members).
 */
.lang-switch {
  --ls-fill: var(--c-green); --ls-on: var(--c-cream);
  display: inline-flex; padding: 2px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .08em;
}
.lang-switch > .lang-switch__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 30px; padding: 0 10px 0 11px;
  border-radius: var(--r-pill);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-switch > button.lang-switch__opt { font: inherit; letter-spacing: inherit; background: transparent; border: 0; cursor: pointer; }
.lang-switch > [aria-current] { background: var(--ls-fill); color: var(--ls-on); }
.lang-switch > a, .lang-switch > button { opacity: .85; }
.lang-switch > a:hover, .lang-switch > button:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
/*
 * The sign out button takes the toggle's height, so the end of the nav is one line: 36px, 44px on phones, where it
 * keeps only its icon and a hidden label so the brand never runs under the toggle.
 */
.nav__end .nav__logout { min-height: 36px; }
@media (max-width: 759px) {
  .lang-switch > .lang-switch__opt { height: 38px; min-width: 34px; padding: 0 8px 0 9px; }
  .nav__end .nav__logout { width: 44px; min-height: 44px; padding: 0; }
  .nav__logout-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* An admin seeing a member's space: a band in Croma Leather's dark shade above the nav, never mistaken for normal chrome. */
.imp { color: var(--c-cream); background: var(--c-warn-ink); }
.imp__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px;
  max-width: calc(var(--w-wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 8px var(--gutter);
}
.imp__text { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.imp__text svg { width: 18px; height: 18px; }
.imp form { display: contents; }
.imp :focus-visible { outline-color: var(--c-cream); }
.btn.imp__back { color: var(--c-ink); background: var(--c-cream); border-color: var(--c-cream); }
.btn.imp__back:hover { background: var(--c-field); border-color: var(--c-field); }


/* ==== 07 · BUTTONS ================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--field-h);
  padding: 0 24px;
  font-family: var(--f-sans); font-weight: 500;
  font-size: 15px; line-height: 1.2; letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  color: var(--c-cream);
  background: var(--c-green);
  border: 1px solid var(--c-green);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { background: var(--c-green-2); border-color: var(--c-green-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: var(--c-green); border-color: var(--c-green); }

/* A "send again" button in its pause (resend.js): kept focusable, so a screen reader still finds it, but inert. */
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; font-variant-numeric: tabular-nums; }
.btn[aria-disabled="true"]:hover { background: var(--c-green); border-color: var(--c-green); }
.btn--ghost[aria-disabled="true"]:hover { background: transparent; border-color: rgba(26, 32, 30, .28); }

.btn--ghost { color: var(--c-ink); background: transparent; border-color: rgba(26, 32, 30, .28); }
.btn--ghost:hover { background: rgba(26, 32, 30, .06); border-color: rgba(26, 32, 30, .45); }
.btn--ghost:disabled:hover { background: transparent; border-color: rgba(26, 32, 30, .28); }

.btn--block { display: flex; width: 100%; }

/* Compact buttons for dense rows (admin tables, device list, nav): 40px tall, the row gap completes the tap area. */
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--sm svg { width: 16px; height: 16px; }

/* A button that reads as a link: secondary actions. */
.btn--text {
  min-height: var(--tap);
  padding: 0 6px;
  color: var(--c-ink-2);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 32, 30, .35);
}
.btn--text:hover { color: var(--c-ink); background: none; text-decoration-color: currentColor; }


/* ==== 08 · FORMS ================================================== */

.field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: .95rem;
  color: var(--c-ink);
}

/* One rule for every text field and select, so they always match side by side. */
input[type="email"], input[type="text"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  display: block;
  width: 100%;
  min-height: var(--field-h);
  padding: 0 16px;
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming in on focus */
  color: var(--c-ink);
  background-color: var(--c-field);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* iOS Safari draws a date input at its own intrinsic width, wider than a phone's card, and centres its value. */
/* A date field drawn like the text fields: the same height, its value on one line at the left, in the page's font, in Safari (macOS and iOS) as in Chrome. */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: var(--field-h); min-height: var(--field-h); padding-top: 0; padding-bottom: 0; line-height: calc(var(--field-h) - 2px); }
input[type="date"]::-webkit-date-and-time-value { min-height: 1.2em; line-height: 1.2; text-align: left; }
input[type="date"]::-webkit-datetime-edit { padding: 0; font: inherit; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
input::placeholder { color: var(--c-ink-3); opacity: .85; }
input:hover, select:hover, textarea:hover { border-color: rgba(26, 32, 30, .32); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--c-versa);
  box-shadow: 0 0 0 3px rgba(62, 86, 104, .24);
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2348504C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* A free answer: the field's look, a few lines high, taller on demand. */
textarea { min-height: 7.5rem; padding: 12px 16px; line-height: 1.5; resize: vertical; }

.form-stack { display: flex; flex-direction: column; gap: 14px; }
/* A field and its button on one line once there is room, both at the same height. */
.inline-form { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 560px) {
  .inline-form { flex-direction: row; align-items: flex-end; }
  .inline-form > .field { flex: 1 1 auto; min-width: 0; }
  .inline-form > .btn { flex: none; }
}


/* ==== 09 · FLASH, PILLS =========================================== */

.flash {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  color: var(--c-ok-ink);
  background: var(--c-ok-bg);
  border: 1px solid rgba(62, 74, 56, .2);
  border-radius: var(--r-md);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.flash svg { width: 20px; height: 20px; margin-top: 2px; }
.flash--warn { color: var(--c-warn-ink); background: var(--c-warn-bg); border-color: rgba(166, 118, 77, .32); }
.flash--info { color: var(--c-ink-2); background: var(--c-cream-2); border-color: var(--c-line); }
/* A flash with an action (a WhatsApp button): the button wraps under the text on phones. */
.flash { flex-wrap: wrap; }
.flash__text { flex: 1 1 16rem; }
.flash .btn { flex: none; margin-top: -4px; }
.flash .btn svg { margin-top: 0; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: var(--fs-0);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--c-ink-2);
  background: var(--c-church);
  border-radius: var(--r-pill);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.pill--ok { color: var(--c-ok-ink); background: var(--c-ok-bg); }
.pill--warn { color: var(--c-warn-ink); background: var(--c-warn-bg); }
/* Not started yet: Bleu Versa, calm, neither good nor bad news. */
.pill--soon { color: var(--c-versa); background: rgba(62, 86, 104, .12); }
.start { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.pill--off { color: var(--c-ink-3); background: rgba(26, 32, 30, .07); }
.pill--admin { color: var(--c-cream); background: var(--c-versa); }
.pill--admin::before { display: none; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }


/* ==== 10 · SIGN IN FLOW =========================================== */

.auth {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px) var(--gutter) clamp(32px, 6vw, 72px);
}
.auth__card {
  width: 100%;
  max-width: 28rem;
  overflow: hidden;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
/* The green cover: the house's RAL 6012 with a few tide lines, felt rather than announced. */
.auth__cover {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 104px;
  padding: 20px 24px;
  color: var(--c-cream);
  background: var(--c-green);
  overflow: hidden;
}
.auth__tide {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 72%;
  color: var(--c-armerie);
  pointer-events: none;
}
.auth__cover-word {
  position: relative;
  display: none;
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.015em;
}
.auth__cover-sub {
  position: relative;
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-2);
  line-height: 1.2;
  color: rgba(241, 234, 219, .88);
}
.auth__body { padding: 28px 24px 32px; }
.auth__body h1 { font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.3rem); }
.auth__body .lede { margin-top: 12px; font-size: 1.12rem; }
.auth__body > form { margin-top: 24px; }
.auth__body > .btn, .auth__body > .auth__actions { margin-top: 24px; }
.auth__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.auth__actions .btn--text { align-self: center; }
/* A state reads in one glance: a big icon, a short headline, the key fact as a pill or a badge. */
.state { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.state h1 { margin-top: 4px; }
.state .lede { margin-top: 0; max-width: 30ch; }
.state__art { width: 120px; height: 96px; margin-bottom: 4px; }
.state__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  color: var(--c-green);
  background: var(--c-church);
  border-radius: 50%;
}
.state__icon svg { width: 30px; height: 30px; }
.state__icon--warn { color: var(--c-warn-ink); background: var(--c-warn-bg); }
.state__label { margin-top: 6px; font-size: var(--fs-0); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); }

.address {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 100%;
  padding: 10px 18px;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--c-ink);
  background: var(--c-church);
  border-radius: var(--r-md);
  overflow-wrap: anywhere;
  text-align: left;
}
.address svg { width: 20px; height: 20px; color: var(--c-ink-2); }
.address--warn { background: var(--c-warn-bg); }
.state .address { margin-top: -4px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--c-ok-ink);
  background: var(--c-ok-bg);
  border-radius: var(--r-pill);
}
.badge svg { width: 16px; height: 16px; }
.badge--warn { color: var(--c-warn-ink); background: var(--c-warn-bg); }

.steps { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; list-style: none; }
.steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--c-field);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  font-weight: 500;
  line-height: 1.35;
}
.steps svg { width: 20px; height: 20px; color: var(--c-ink-3); }
.steps__num {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px;
  font-size: var(--fs-1);
  color: var(--c-cream);
  background: var(--c-green);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}

.continue { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--c-ink-2); }
.continue svg { width: 22px; height: 22px; color: var(--c-green); }
.spinner { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth__lede { display: flex; align-items: flex-start; gap: 10px; }
.auth__lede svg { width: 22px; height: 22px; margin-top: 3px; color: var(--c-ink-3); }

.auth__more {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line-2);
}
.auth__more .hint { text-align: center; }
.auth__more .btn--text { align-self: center; }

@media (min-width: 900px) {
  .auth__card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    max-width: 58rem;
    min-height: 30rem;
  }
  .auth__cover { padding: 36px; justify-content: space-between; min-height: 0; }
  .auth__tide { height: 46%; }
  .auth__cover-word { display: block; }
  .auth__body { display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; }
  .auth__body > * { width: 100%; }
}


/* ==== 11 · MEMBER AREA ============================================ */

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  min-width: 0;
}
.card__label { font-family: var(--f-sans); font-size: var(--fs-0); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); }
.card__value { font-family: var(--f-display); font-size: 2.3rem; line-height: 1.05; letter-spacing: -.015em; }
.card__text { color: var(--c-ink-2); overflow-wrap: anywhere; }
.card__foot { margin-top: auto; padding-top: 10px; }
.card__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 6px;
  color: var(--c-green);
  background: var(--c-church);
  border-radius: 50%;
}
.card__icon svg { width: 22px; height: 22px; }
.card--feature .card__icon { color: var(--c-cream); background: rgba(241, 234, 219, .14); }
.card--span { grid-column: 1 / -1; }
.card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (min-width: 640px) {
  .card--row { flex-direction: row; align-items: center; gap: 20px; }
  .card--row .card__icon { margin-bottom: 0; }
  .card--row .card__body { flex: 1; }
}
.card--feature { color: var(--c-cream); background: var(--c-green); border-color: var(--c-green); }
.card--feature .card__label, .card--feature .card__text { color: rgba(241, 234, 219, .82); }
.card--feature .card__value, .card--feature h2 { color: var(--c-cream); }
.card--feature .btn { color: var(--c-green); background: var(--c-cream); border-color: var(--c-cream); }
.card--feature .btn:hover { background: #fff; border-color: #fff; }
.card--link { color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.card--link:hover { border-color: var(--c-line); transform: translateY(-1px); }
.card--link h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card--link h2 svg { width: 20px; height: 20px; color: var(--c-ink-3); transition: transform var(--t-fast) var(--ease); }
.card--link:hover h2 svg { transform: translateX(3px); }

/*
 * A mandate that awaits the member's signature: the first card, in the warm tones of a warning (not red), with the
 * button under the text on phones and beside it from 640px.
 */
.card--mandate { background: #F6E9D8; border-color: rgba(166, 118, 77, .45); }
/* The same reminder on every other member page: a slim band under the top bar, until the mandate is signed. */
.mandatebar { background: #F6E9D8; border-bottom: 1px solid rgba(166, 118, 77, .45); }
.mandatebar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  max-width: calc(var(--w-wide) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter);
}
.mandatebar__text { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--c-warn-ink); }
.mandatebar__text svg { flex: none; width: 18px; height: 18px; }
.mandatebar__more { color: var(--c-ink-2); }
@media (max-width: 559px) { .mandatebar__more { display: none; } .mandatebar .btn { flex: 1 1 auto; } }
.card--mandate .card__icon { color: var(--c-warn-ink); background: rgba(166, 118, 77, .18); }
.card--mandate .card__text { color: var(--c-ink); }
.card--mandate .btn, .card--arrival .btn { align-self: stretch; margin-top: 8px; }
.card__hint { font-size: var(--fs-1); color: var(--c-warn-ink); }
@media (min-width: 640px) {
  .card--mandate .btn, .card--arrival .btn { align-self: center; flex: none; margin-top: 0; }
}
/* Before the first day of the contract: the date, the wait, and a word to the house to come earlier. */
.card--arrival .card__icon { color: var(--c-green); background: rgba(45, 68, 60, .1); }

/* The Flex pause: its banner (home and plan pages), the plan page, the Sport and Wi-Fi cards that wait, the pause form. */
.card--pause { background: var(--c-warn-bg); border-color: rgba(166, 118, 77, .3); }
.card--pause .card__icon { color: var(--c-warn-ink); background: rgba(166, 118, 77, .18); }
.card--pause .card__text { color: var(--c-ink); }
.card--pause form { align-self: stretch; margin-top: 8px; }
@media (min-width: 640px) { .card--pause form { align-self: center; flex: none; margin-top: 0; } }
@media (max-width: 639px) { .card--pause form .btn { width: 100%; } }
.card--waiting { opacity: .55; }
/* a pause not possible yet: no shadow, no hover, dashed edge, muted title, a calendar instead of the arrow */
.card--soon { background: transparent; border: 1px dashed var(--c-line); box-shadow: none; cursor: default; }
.card--soon h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--c-ink-3); }
.card--soon h2 svg { width: 20px; height: 20px; flex: none; }
.card--feature.card--link h2 svg { color: rgba(241, 234, 219, .8); }
.card--feature .card__warn { color: var(--c-cream); }
.backlink { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: var(--fs-1); color: var(--c-ink-2); text-decoration: none; }
.backlink svg { width: 16px; height: 16px; transform: rotate(180deg); }
.backlink:hover { color: var(--c-ink); }
.plan-page { display: flex; flex-direction: column; gap: 16px; max-width: 40rem; }
.plan__facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--c-line-2); }
.plan__facts div:first-child { padding-top: 0; }
.plan__facts div:last-child { padding-bottom: 0; border-bottom: 0; }
.plan__facts dt { color: var(--c-ink-3); }
.plan__facts dd { font-weight: 500; text-align: right; }
.plan__away { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.perks { display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; }
.perks li { display: flex; align-items: flex-start; gap: 10px; }
.perks li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; font-size: .8rem; font-weight: 600; color: var(--c-ok-ink); background: var(--c-ok-bg); border-radius: 50%; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--r-lg); cursor: pointer; }
.option:has(input:checked) { padding: 13px; border: 2px solid var(--c-green); }
.option:has(input:focus-visible) { outline: 2px solid var(--c-versa); outline-offset: 3px; }
.option__dot { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--c-ink-3); border-radius: 50%; }
.option:has(input:checked) .option__dot { border: 6px solid var(--c-green); }
.option__body { display: flex; flex-direction: column; gap: 2px; }
.option__name { font-weight: 600; }
.option__back { font-size: var(--fs-1); color: var(--c-ink-3); }

/* A discreet warning inside a card: an unpaid invoice on the home screen. */
.card__warn { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; font-size: var(--fs-1); font-weight: 500; color: var(--c-warn-ink); }
.card__warn svg { width: 16px; height: 16px; margin-top: 3px; }

/* The Wi-Fi card: the network, then the password in a monospace box that stays selectable without JavaScript. */
.wifi { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.wifi dt { font-size: var(--fs-0); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); }
.wifi dd { margin-top: 2px; font-weight: 500; overflow-wrap: anywhere; }
.wifi__secret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* The door code, read once and typed on the keypad: large, in fixed-width digits. */
.door__code { margin: 4px 0 8px; font-family: var(--f-mono); font-size: 2rem; letter-spacing: .12em; color: var(--c-ink); }
/* /admin/porte: two quiet lines per code, a tag for its state, the actions inside. */
.door__new > summary { list-style: none; cursor: pointer; width: fit-content; }
.door__new > summary::-webkit-details-marker { display: none; }
.door__new[open] > summary { margin-bottom: 12px; }
.door__form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.door__days { display: flex; flex-wrap: wrap; gap: 8px 14px; border: 0; padding: 0; margin: 0; }
.door__days legend { width: 100%; margin-bottom: 4px; }
.door__hours > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.door__list { list-style: none; padding: 0; margin: 0; }
.door__list > li { border-top: 1px solid var(--c-line-2); }
.door__list > li:first-child { border-top: 0; }
.door__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; }
.door__row::-webkit-details-marker { display: none; }
.door__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.door__detail { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 0 14px; }
.door__reveal > summary { list-style: none; cursor: pointer; }
.door__reveal > summary::-webkit-details-marker { display: none; }
.wifi__password {
  padding: 6px 12px;
  font-family: var(--f-mono);
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--c-ink);
  background: var(--c-church);
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

.facts dt { font-size: var(--fs-0); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); }
.facts dd { margin-top: 4px; font-size: 1.1rem; overflow-wrap: anywhere; }

/* The member's details: what Qonto holds, then the form behind a summary button, opened without a script. */
.coords__lede { margin: -8px 0 18px; }
.coords { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 16px 24px; }
.coords dt { font-size: var(--fs-0); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); }
.coords dd { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; overflow-wrap: anywhere; }
.coords dd.muted { color: var(--c-ink-3); }
.edit { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-line-2); }
.edit > summary { list-style: none; width: fit-content; }
.edit > summary::-webkit-details-marker { display: none; }
.edit[open] > summary { display: none; }
.details-form { display: flex; flex-direction: column; gap: 18px; }
.details-form > .flash { margin: 0; }
.fieldset { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset > legend { padding: 0; margin-bottom: 4px; font-family: var(--f-display); font-size: var(--fs-2); }
/* One column that never grows past its container: an "auto" track would widen to an input's intrinsic width (iOS dates). */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.field-row > * { min-width: 0; }
.field-row--phone { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); align-items: start; }
@media (min-width: 560px) {
  .field-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row--zip { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
}
.field__error { margin-top: 6px; font-size: var(--fs-1); font-weight: 500; color: var(--c-warn-ink); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--c-warn-ink); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* Signed-in devices: one row per session, the current one marked. */
.devices li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--c-line-2);
}
.devices li:first-child { border-top: 0; padding-top: 0; }
.devices form { display: contents; }
.device { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 14rem; }
.device__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--c-ink-2);
  background: var(--c-church);
}
.device__icon svg { width: 20px; height: 20px; }
.device__text { min-width: 0; }
.device__name { font-weight: 500; overflow-wrap: anywhere; }
.device__meta { font-size: var(--fs-1); color: var(--c-ink-3); }
/* Past four devices, this one and the two latest show; the rest open from the summary below the list, without a script. */
.devices:has(~ .devices__more:not([open])) > .device--more { display: none; }
.devices__more { margin-top: 6px; }
.devices__all { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-line-2); }


/* ==== 12 · ADMIN ================================================== */

.subnav {
  display: flex; gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 4px;
  overflow-x: auto;
  background: rgba(26, 32, 30, .06);
  border-radius: var(--r-pill);
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: 0 16px;
  font-size: .95rem;
  white-space: nowrap;
  color: var(--c-ink-2);
  text-decoration: none;
  border-radius: var(--r-pill);
}
.subnav a:hover { color: var(--c-ink); background: rgba(26, 32, 30, .05); }
.subnav a[aria-current] { color: var(--c-ink); background: var(--c-cream-2); box-shadow: 0 1px 2px rgba(26, 32, 30, .14); font-weight: 500; }
/* Phone: the tabs share the full width and wrap rather than hide one behind a scroll. */
@media (max-width: 559px) {
  .subnav { width: 100%; flex-wrap: wrap; overflow: visible; border-radius: var(--r-md); }
  .subnav a { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: .9rem; border-radius: var(--r-sm); }
}

/* The members' tabs: the same pills, smaller, each with its count. */
.subnav--tabs { margin-bottom: 16px; }
.subnav--tabs a { min-height: 34px; padding: 0 12px; font-size: .9rem; gap: 6px; }
.subnav__count { font-size: .8rem; color: var(--c-ink-3); }
.subnav a[aria-current] .subnav__count { color: var(--c-ink-2); }
/* A red dot with a count on a tab that needs attention (Sécurité: something overdue or due within 30 days). */
.subnav__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; font-size: .72rem; font-weight: 600; line-height: 1; color: #fff; background: var(--c-alert); border-radius: var(--r-pill); }

/* The confirmation page of a delete: the question, what goes, then the two choices side by side. */
.delete-confirm p { margin: 0 0 12px; }
.delete-confirm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }

.page-head--admin { margin-bottom: 16px; }

.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
}
.toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media (min-width: 760px) {
  .toolbar { grid-template-columns: minmax(12rem, 18rem) minmax(12rem, 26rem) auto; align-items: end; justify-content: start; }
}

/* Tables: a framed, scrollable block on wide screens, each row stacked as a card on phones. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  /* Scroll affordance: a soft shadow shows on the side that still hides columns. */
  background:
    linear-gradient(to right, var(--c-cream-2) 30%, rgba(247, 242, 231, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--c-cream-2) 30%, rgba(247, 242, 231, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(26, 32, 30, .18), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(26, 32, 30, .18), transparent) right center / 14px 100% no-repeat scroll,
    var(--c-cream-2);
}
.table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.table th, .table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.table thead th {
  font-size: var(--fs-0); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink-3);
  background: rgba(237, 227, 206, .7);
  border-bottom: 1px solid var(--c-line);
}
.table tbody tr { border-top: 1px solid var(--c-line-2); }
.table tbody tr:first-child { border-top: 0; }
.table tbody tr:nth-child(even) { background: rgba(237, 227, 206, .3); }
.table tbody tr:hover { background: rgba(237, 227, 206, .6); }
.table tr.is-archived .who__name { color: var(--c-ink-3); }
.table .nowrap { white-space: nowrap; }
.table .detail { overflow-wrap: anywhere; min-width: 14rem; font-size: var(--fs-1); color: var(--c-ink-2); }
.table .muted { color: var(--c-ink-3); }

.who { display: flex; flex-direction: column; gap: 2px; min-width: 13rem; max-width: 24rem; }
.who__name { font-weight: 500; color: var(--c-ink); overflow-wrap: anywhere; }
.who__line { font-size: var(--fs-1); color: var(--c-ink-3); overflow-wrap: anywhere; }

.row-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-form select { width: auto; min-width: 7.5rem; min-height: 40px; padding: 0 36px 0 12px; border-radius: var(--r-sm); background-position: right 12px center; font-size: 15px; }
.table .code { white-space: nowrap; overflow-wrap: normal; }
.table .td--name { min-width: 10rem; overflow-wrap: anywhere; }
@media (min-width: 1100px) {
  .row-form { flex-wrap: nowrap; }
  .row-actions { flex-wrap: nowrap; }
}
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.row-actions form { display: contents; }
.row-actions .btn--text { min-height: 40px; }

/* A compact external link: an icon and a short label, in place of a long raw id. */
.ext-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  white-space: nowrap;
  color: var(--c-versa);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(62, 86, 104, .4);
}
.ext-link svg { width: 16px; height: 16px; }
.ext-link:hover { text-decoration-color: currentColor; }

@media (max-width: 759px) {
  .table-wrap { overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .table tbody { display: flex; flex-direction: column; gap: 12px; }
  .table tbody tr, .table tbody tr:first-child {
    padding: 4px 16px 8px;
    background: var(--c-cream-2);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
  }
  .table tbody tr:nth-child(even), .table tbody tr:hover { background: var(--c-cream-2); }
  .table td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--c-line-2);
  }
  .table td:first-child { border-top: 0; }
  .table td::before {
    content: attr(data-label);
    font-size: var(--fs-0); font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-ink-3);
  }
  .table td.td--lead, .table td.td--bare { display: block; }
  .table td.td--stack { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .table td.td--lead { padding-top: 12px; }
  .table td.td--lead::before, .table td.td--bare::before { display: none; }
  .table td.td--opt:empty { display: none; }
  .table .nowrap { white-space: normal; }
  .table .detail, .table .td--name, .who { min-width: 0; max-width: none; }
  .table .code { white-space: normal; overflow-wrap: anywhere; }
  .row-form select { flex: 1 1 7rem; }
  .row-form .btn, .row-actions .btn:not(.btn--text) { flex: 1 1 auto; }
}

/*
 * The members table never scrolls sideways and reads in one pass: every cell holds one line, so every row has the same
 * height; the rest sits in a title or in the detail row a click on the row (or on the name, its button) opens. States
 * are coloured dots, plans are badges, row actions are small icon buttons. Each member is a tbody (its row, then its
 * detail row): the zebra and the lines go by member. Below 1360px, where the seven columns no longer fit, each
 * member becomes a card, its details opening inside it.
 */
.table-wrap--fit { overflow-x: visible; background: var(--c-cream-2); }
.table--members th, .table--members td { padding: 14px 12px; vertical-align: middle; white-space: nowrap; }
.table--members th.th--num, .table--members td.td--num { text-align: right; }
/* The line between members is drawn, not a border: a collapsed border would share its pixel unevenly between rows. */
.table--members tbody + tbody > tr:first-child > td { box-shadow: inset 0 1px 0 var(--c-line-2); }
.table--members tbody + tbody > tr.has-unpaid > td:first-child { box-shadow: inset 4px 0 0 var(--c-alert), inset 0 1px 0 var(--c-line-2); }
.table.table--members tbody tr, .table.table--members tbody tr:nth-child(even), .table.table--members tbody tr:hover { border-top: 0; background: none; }
.table--members tbody:nth-of-type(even) { background: rgba(237, 227, 206, .3); }
.table--members tbody:hover { background: rgba(237, 227, 206, .6); }
/* An open member, its row and its details, reads as one block. */
.table--members tbody:has(> tr.is-expanded) { background: rgba(237, 227, 206, .8); }
.table--members tbody > tr:not(.row-details) { cursor: pointer; }
/*
 * Groups: active members, inactive ones (no invoice scheduled, or archived), admins, each group under a slightly
 * stronger line. An inactive member reads muted, its dots grey, except what it owes: that stays red.
 */
.table--members tbody.is-group-start > tr:first-child > td { box-shadow: inset 0 2px 0 var(--c-line); }
.table--members tbody.is-group-start > tr.has-unpaid > td:first-child { box-shadow: inset 4px 0 0 var(--c-alert), inset 0 2px 0 var(--c-line); }
.table--members tbody.is-inactive > tr:not(.row-details) > td,
.table--members tbody.is-inactive > tr:not(.row-details) .row-toggle,
.table--members tbody.is-inactive > tr:not(.row-details) .dot { color: var(--c-ink-3); font-weight: 400; }
.table--members tbody.is-inactive > tr:not(.row-details) .dot::before { background: rgba(26, 32, 30, .3); }
/* The plan as a badge: Fixe filled green, Flex outlined blue. Fill and colour both differ, so either tells them apart. */
.plan {
  display: inline-flex; align-items: center; padding: 0 9px;
  font-size: var(--fs-0); font-weight: 600; line-height: 1.5; letter-spacing: .02em;
  border: 1px solid transparent; border-radius: 999px;
}
.plan--fixe { color: var(--c-cream); background: var(--c-sariette); border-color: var(--c-sariette); }
.plan--flex { color: var(--c-versa); background: transparent; border-color: var(--c-versa); }
.table--members tbody.is-inactive > tr:not(.row-details) .plan--fixe { color: var(--c-cream-2); background: rgba(26, 32, 30, .35); border-color: transparent; }
.table--members tbody.is-inactive > tr:not(.row-details) .plan--flex { color: var(--c-ink-3); border-color: rgba(26, 32, 30, .3); }
.cell__row { display: flex; align-items: center; gap: 8px; }
/* Two lines in a cell: the fact, then in small what comes with it (how long until the day, the reminder buttons), lined up with the text after the dot. */
.cell__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cell__sub { display: flex; align-items: center; gap: 4px; height: 22px; padding-left: 15px; font-size: var(--fs-0); color: var(--c-ink-3); }
.cell__sub form { display: contents; }
.cell__sub .icon-btn { width: 26px; height: 22px; }
.cell__sub .icon-btn:first-child { margin-left: -6px; }
.cell__sub .icon-btn svg { width: 14px; height: 14px; }
/* In the table every member's line has the height of a two-line cell, second line or not. */
@media (min-width: 1360px) {
  .table--members tbody > tr:not(.row-details) > td { height: 74px; }
}
/* In the cards, room enough for buttons a finger can hit. */
@media (max-width: 1359px) {
  .cell__sub { height: auto; gap: 8px; margin-top: 4px; }
  .cell__sub .icon-btn { width: 36px; height: 36px; }
  .cell__sub .icon-btn:first-child { margin-left: -4px; }
  .cell__sub .icon-btn svg { width: 16px; height: 16px; }
}
/* Icon buttons inside a line keep the line's height, so every row stays level. */
.cell__row .icon-btn { width: 30px; height: 30px; margin: -5px 0; }
.cell__row .icon-btn svg { width: 15px; height: 15px; }
/* A fixed line height: tags and the unpaid pill never make one member's line taller than another's. */
.table--members .who__name { display: flex; align-items: center; gap: 8px; min-width: 0; height: 24px; }
/* The name opens the details: a button that looks like the name, underlined on hover and focus only. */
.row-toggle {
  min-width: 0; max-width: 16rem; padding: 0;
  font: inherit; font-weight: 500; color: inherit; text-align: left;
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-toggle:hover, .row-toggle:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.who__qonto { display: inline-flex; flex: none; color: var(--c-versa); }
.who__qonto svg { width: 15px; height: 15px; }
.tag { flex: none; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-0); font-weight: 500; color: var(--c-ink-2); background: rgba(26, 32, 30, .08); }
.tag--admin { color: var(--c-cream); background: var(--c-versa); }
/* Same weight as an admin, in the house's green: staff, but another role. */
.tag--sport { color: var(--c-cream); background: var(--c-sariette); }
/* the overall rating of the feedback survey: text, so it never reads as the Google review star beside it */
.tag--grade { display: inline-flex; align-items: center; gap: 4px; color: var(--c-ink); background: rgba(26, 32, 30, .08); text-decoration: none; }
.tag--grade svg { width: 15px; height: 15px; }
/* from red (1) to green (5); 3 keeps the plain tag */
.tag--grade-1 { color: var(--c-alert); background: var(--c-alert-bg); }
.tag--grade-2 { color: var(--c-warn-ink); background: var(--c-warn-bg); }
.tag--grade-4, .tag--grade-5 { color: var(--c-ok-ink); background: var(--c-ok-bg); }
.tag--grade:hover { filter: brightness(.95); }
/* A paid place, on the payer ("2 places payées") and on the holder ("Payée par ..."): Bleu Versa, tinted. */
.tag--seat { color: var(--c-versa); background: rgba(62, 86, 104, .12); }
/* What a member owes, on the name's line: the count and the delay are in its title, the detail row says it all. */
.pill-unpaid { flex: none; padding: 0 8px; line-height: 1.4; border-radius: 999px; font-size: var(--fs-0); font-weight: 700; color: var(--c-alert); background: var(--c-alert-bg); border: 1px solid var(--c-alert); }
/* A next invoice that does not match the plan: a warning sign at the end of the line, explained in its title. */
.mark-warn { display: inline-flex; flex: none; color: #C47A2C; }
.mark-warn svg { width: 16px; height: 16px; }
/* A state as a coloured dot and plain words: lines up with the text around it. */
.dot { display: inline-flex; align-items: baseline; gap: 7px; font-size: var(--fs-1); line-height: 1.35; font-weight: 500; }
.dot::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.dot--ok { color: var(--c-ok-ink); }
.dot--ok::before { background: #4E8A3E; }
.dot--soon { color: var(--c-versa); }
.dot--warn { color: var(--c-warn-ink); }
.dot--warn::before { background: #C47A2C; }
.dot--off { color: var(--c-ink-3); font-weight: 400; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; padding: 0;
  color: var(--c-ink-2); background: transparent;
  border: 1px solid rgba(26, 32, 30, .2); border-radius: 50%;
  cursor: pointer;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { color: var(--c-ink); background: rgba(26, 32, 30, .06); border-color: rgba(26, 32, 30, .4); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn:disabled:hover { background: transparent; border-color: rgba(26, 32, 30, .2); }
.cell__row form, .icon-actions form { display: contents; }
/* As tall as its buttons even when there is none (an admin's row): every row keeps the same height. */
.icon-actions { display: flex; justify-content: flex-end; gap: 8px; min-height: 34px; }
.td--actions { width: 1%; }
/* The Google review in the actions: the outline star asks, its badge counts the asks so far; the filled star, in the soft green of a done thing, says it is left. */
.review-ask { position: relative; }
.review-ask__count {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  color: var(--c-cream); background: var(--c-leather);
}
/* The details' Google review line: the state and its notes, then one row of actions, the main one a button, the other a quiet link. */
.review-line__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.review-line__actions form { display: contents; }
.link-btn { padding: 0; font: inherit; font-size: 13px; background: none; border: 0; cursor: pointer; }
.icon-btn.review-done, .icon-btn.review-done:hover { color: var(--c-ok-ink); background: var(--c-ok-bg); border-color: transparent; cursor: default; }
.plan-form { display: flex; align-items: center; gap: 6px; }
.plan-form select { min-height: 34px; padding: 0 28px 0 10px; font-size: var(--fs-1); }
.btn--xs { min-height: 34px; padding: 0 12px; font-size: 13px; }

/* The detail row: label and value pairs in two groups, contact then follow-up, on as many columns as fit. */
.table--members tr.row-details[hidden] { display: none; }
.table--members td.td--details { padding: 0 12px 16px; white-space: normal; }
.table tr.has-unpaid + .row-details > td { box-shadow: inset 4px 0 0 var(--c-alert); }
.details { display: grid; gap: 16px; padding: 16px 18px; background: var(--c-field); border: 1px solid var(--c-line-2); border-radius: var(--r-md); }
.details__group + .details__group { padding-top: 14px; border-top: 1px solid var(--c-line-2); }
.details__title { margin: 0 0 8px; font-size: var(--fs-0); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.details__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 12px 24px; margin: 0; }
.details__pair { min-width: 0; }
.details__pair dt { font-size: var(--fs-0); color: var(--c-ink-3); }
.details__pair dd { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 2px 0 0; font-size: var(--fs-1); color: var(--c-ink); overflow-wrap: anywhere; user-select: text; }
.details__pair dd.unpaid { display: inline-flex; }
.details__warn { color: var(--c-warn-ink); font-weight: 500; }
.seat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.seat-list__line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 0; }
.seat-list__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.seat-form { margin-top: 12px; }
.seat-form__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; align-items: end; }

/*
 * Paid places: a holder's tbody follows its payer's and reads as its child. The connector is an elbow drawn with borders,
 * the payer's stub and the holder's trunk join them; the holder's rows carry a faint Versa tint and a left rule.
 * Table layout from 1360px, card layout below (the card is the tbody, so the elbow sits in the margin left of it).
 */
.table--members tbody.is-holder, .table--members tbody.is-holder:nth-of-type(even) { background: rgba(62, 86, 104, .06); }
/* A holder's row is the widest (its indent, its "Payée par" tag): where the table runs short of room, the tag drops to a second line. */
.table--members tbody.is-holder .who__name { flex-wrap: wrap; height: auto; row-gap: 4px; min-height: 24px; }
.table--members tbody.is-holder:hover { background: rgba(62, 86, 104, .1); }
@media (min-width: 1360px) {
  .table--members tbody.is-holder > tr:first-child > td:first-child { box-shadow: inset 3px 0 0 rgba(62, 86, 104, .35), inset 0 1px 0 var(--c-line-2); }
  .table--members tbody.is-holder > tr.has-unpaid:first-child > td:first-child { box-shadow: inset 4px 0 0 var(--c-alert), inset 0 1px 0 var(--c-line-2); }
  .table--members tbody.is-holder > tr:not(.row-details) > td.td--lead { position: relative; padding-left: 44px; }
  .table--members tbody.is-holder > tr:not(.row-details) > td.td--lead::before {
    content: ""; position: absolute; left: 22px; top: 0; width: 14px; height: 50%;
    border-left: 2px solid rgba(62, 86, 104, .45); border-bottom: 2px solid rgba(62, 86, 104, .45); border-bottom-left-radius: 8px;
  }
  .table--members tbody.is-holder:has(+ tbody.is-holder) > tr:not(.row-details) > td.td--lead::after {
    content: ""; position: absolute; left: 22px; top: 50%; bottom: 0; border-left: 2px solid rgba(62, 86, 104, .45);
  }
  .table--members tbody.is-payer > tr:not(.row-details) > td.td--lead { position: relative; }
  .table--members tbody.is-payer > tr:not(.row-details) > td.td--lead::after {
    content: ""; position: absolute; left: 22px; top: calc(50% + 14px); bottom: 0; border-left: 2px solid rgba(62, 86, 104, .45);
  }
  .table--members tbody.is-holder > tr.row-details > td { box-shadow: inset 3px 0 0 rgba(62, 86, 104, .35); }
  .table--members tbody.is-holder > tr.has-unpaid + .row-details > td { box-shadow: inset 4px 0 0 var(--c-alert); }
}

@media (max-width: 1359px) {
  .table-wrap--fit { background: none; border: 0; border-radius: 0; box-shadow: none; }
  .table.table--members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: start; gap: 12px; width: 100%; }
  .table--members thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  /* The card is the member's tbody: its detail row opens inside it. */
  .table--members tbody, .table--members thead + tbody, .table--members tbody:nth-of-type(even), .table--members tbody:hover {
    display: block; position: relative; min-width: 0;
    padding: 4px 16px 8px;
    background: var(--c-cream-2);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
  }
  /* A holder's card is indented under its payer's, on its own line, with the elbow drawn in the margin; what follows a family starts a new line. */
  .table--members tbody.is-payer, .table--members tbody.is-holder, .table--members tbody.is-holder + tbody:not(.is-holder) { grid-column-start: 1; }
  .table--members tbody.is-holder { margin-left: 24px; }
  .table--members tbody.is-holder .row-toggle { max-width: 100%; }
  .table--members tbody.is-holder, .table--members tbody.is-holder:hover, .table--members tbody.is-holder:nth-of-type(even) {
    background: linear-gradient(rgba(62, 86, 104, .06), rgba(62, 86, 104, .06)), var(--c-cream-2);
  }
  .table--members tbody.is-holder::before {
    content: ""; position: absolute; left: -20px; top: -12px; width: 16px; height: 40px;
    border-left: 2px solid rgba(62, 86, 104, .45); border-bottom: 2px solid rgba(62, 86, 104, .45); border-bottom-left-radius: 8px;
  }
  .table--members tbody.is-holder:has(+ tbody.is-holder)::after {
    content: ""; position: absolute; left: -20px; top: 28px; bottom: -12px; border-left: 2px solid rgba(62, 86, 104, .45);
  }
  .table--members tbody:has(> tr.is-expanded) { background: var(--c-field); }
  .table--members tbody:has(> tr.has-unpaid) { border-color: var(--c-alert); box-shadow: inset 4px 0 0 var(--c-alert), var(--shadow); }
  .table.table--members tbody tr, .table.table--members tbody tr:first-child, .table.table--members tbody tr:nth-child(even), .table.table--members tbody tr:hover {
    display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  /* The card carries the lines and the red edge: none on the cells. A new group starts a new line of cards. */
  .table--members tbody.is-group-start { grid-column-start: 1; margin-top: 12px; }
  .table--members tbody + tbody > tr:first-child > td, .table--members tbody + tbody > tr.has-unpaid > td:first-child,
  .table--members tbody.is-group-start > tr:first-child > td, .table--members tbody.is-group-start > tr.has-unpaid > td:first-child,
  .table.table--members tr.has-unpaid > td:first-child, .table.table--members tr.has-unpaid + .row-details > td { box-shadow: none; }
  .table--members td {
    display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 12px;
    width: 100%; min-height: 46px; padding: 10px 0; border-top: 1px solid var(--c-line-2);
  }
  .table--members td:first-child { border-top: 0; }
  .table--members td::before {
    content: attr(data-label); white-space: normal;
    font-size: var(--fs-0); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3);
  }
  .table.table--members td.td--num { text-align: left; }
  .table--members td.td--lead { display: block; padding: 14px 48px 12px 0; }
  .table--members td.td--lead::before, .table--members td.td--bare::before, .table--members td.td--details::before { display: none; }
  /* The action (sign in as the member) sits in the card's top right corner, next to the name. */
  .table--members td.td--actions { position: absolute; top: 9px; right: 16px; width: auto; min-height: 0; padding: 0; border: 0; }
  .table--members td.td--details { display: block; padding: 12px 0 8px; }
  .details { padding: 0; background: none; border: 0; border-radius: 0; }
  .details__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
  .table--members .plan { justify-self: start; }
  /* A seat holder's empty mandate and invoice cells are left out of the card. */
  .table--members tr.is-seat-holder > td:nth-child(4), .table--members tr.is-seat-holder > td:nth-child(5) { display: none; }
}
/* On phones a label sits above its value: the longest line (an invoice, its date and its delay) keeps the card's width. */
@media (max-width: 479px) {
  .table--members td { grid-template-columns: minmax(0, 1fr); gap: 2px; min-height: 68px; }
  .table--members td.td--lead { min-height: 0; }
}
/* Words only the phone list shows. */
.list-only { display: none; }
/*
 * On phones a list, not cards, and no buttons: per member the name and the plan, then in small the mandate and the start
 * in words, and a chevron. A tap opens the details, which hold the actions (with words) and the rest.
 */
@media (max-width: 759px) {
  .table.table--members { display: block; }
  .table--members tbody, .table--members thead + tbody, .table--members tbody:nth-of-type(even), .table--members tbody:hover,
  .table--members tbody.is-holder, .table--members tbody.is-holder:hover, .table--members tbody.is-holder:nth-of-type(even) {
    margin: 0; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--c-line-2); border-radius: 0; box-shadow: none;
  }
  .table--members tbody.is-group-start { margin-top: 0; border-top: 2px solid var(--c-line); }
  .table--members tbody:has(> tr.is-expanded) { background: var(--c-field); }
  .table--members tbody:has(> tr.has-unpaid) { border-color: var(--c-line-2); box-shadow: inset 3px 0 0 var(--c-alert); }
  .table--members tbody.is-holder::before, .table--members tbody.is-holder::after { display: none; }
  .table.table--members tbody > tr:not(.row-details) {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto 14px; grid-template-areas: "name name plan chev" "mandate start start chev";
    align-items: center; column-gap: 6px; row-gap: 3px; padding: 12px 6px 12px 8px;
  }
  /* A seat holder has no mandate of their own: the start takes the whole second line. */
  .table--members tbody > tr.is-seat-holder > td:nth-child(3) { grid-area: 2 / 1 / 3 / 4; }
  .table--members tbody.is-holder > tr:not(.row-details) { padding-left: 26px; }
  .table--members tbody > tr:not(.row-details) > td { display: block; width: auto; height: auto; min-height: 0; padding: 0; border: 0; }
  .table--members tbody > tr:not(.row-details) > td::before { display: none; }
  .table--members tbody > tr:not(.row-details) > td.td--lead { grid-area: name; padding: 0; min-width: 0; }
  .table--members tbody > tr:not(.row-details) > td:nth-child(2) { grid-area: plan; justify-self: end; }
  .table--members tbody > tr:not(.row-details) > td:nth-child(2) .muted { display: none; }
  .table--members tbody > tr:not(.row-details) > td:nth-child(3) { grid-area: start; min-width: 0; }
  .table--members tbody > tr:not(.row-details) > td:nth-child(4) { grid-area: mandate; }
  .table--members tbody > tr:not(.row-details) > td:nth-child(5), .table--members tbody > tr:not(.row-details) > td.td--actions { display: none; }
  /* The second line: the mandate's dot and word, then the start in words, small and quiet. */
  .table--members td:nth-child(3) > :not(.list-only), .table--members .cell__sub { display: none; }
  .table--members .list-only { display: inline; }
  .table--members .list-start { font-size: var(--fs-0); color: var(--c-ink-3); }
  .table--members tr:not(.is-seat-holder) .list-start::before { content: "· "; }
  .table--members td:nth-child(4) .dot { font-size: var(--fs-0); }
  /* The chevron says a tap opens the line; it turns once open. */
  .table--members tbody > tr:not(.row-details)::after {
    content: ""; grid-area: chev; justify-self: center; width: 8px; height: 8px;
    border-right: 2px solid var(--c-ink-3); border-bottom: 2px solid var(--c-ink-3); transform: rotate(-45deg);
  }
  .table--members tbody > tr.is-expanded::after { transform: rotate(45deg); }
  .table--members tr.row-details > td.td--details { display: block; padding: 0 8px 14px; border: 0; }
  .table--members .details__actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .table--members .details__actions form { display: contents; }
}

/* Money columns line up on their decimals on wide screens; on phones the amount sits with its label like any value. */
@media (min-width: 760px) { .table th.th--num, .table td.td--num { text-align: right; } }
.invoice__number { font-weight: 500; }
/* Invoices on wide screens: every cell on one middle line, the status pill level with its date, the download button at the right edge. */
@media (min-width: 760px) {
  .table--invoices td { vertical-align: middle; }
  .table--invoices .pills { align-items: center; }
  .table--invoices td.td--bare { text-align: right; }
}
.invoice__pending { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-1); color: var(--c-ink-3); }
/* Billing column: next invoice, paid, unpaid, one short line each. */
.billing { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.billing__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.unpaid { display: inline-flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 10px; color: var(--c-alert); background: var(--c-alert-bg); border: 1px solid var(--c-alert); }
.unpaid__amount { font-size: var(--fs-2); font-weight: 700; }
.unpaid__line { font-size: var(--fs-0); font-weight: 600; }
.table tr.has-unpaid > td:first-child { box-shadow: inset 4px 0 0 var(--c-alert); }

/* Actions on the whole table, above it on the right. */
.bulk-actions { display: flex; justify-content: flex-end; margin-bottom: 16px; }
@media (max-width: 759px) { .bulk-actions .btn { flex: 1 1 auto; } }

/* The members screen's key figures: a strip of small tiles, each as wide as its figure, MRR first in the house green. */
.kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.kpi {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
}
.kpi dt { font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.kpi dd { margin: 0; font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; line-height: 1.1; color: var(--c-ink); white-space: nowrap; }
.kpi dd small { font-family: var(--f-sans); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--c-ink-3); }
.kpi--lead dd { color: var(--c-green); }
/* A plan's seats: taken out of the capacity, a thin bar filled in the house green, then how many are free. */
.kpi--seats { min-width: 110px; }
.kpi .kpi__seats { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; font-family: var(--f-sans); font-size: 12px; color: var(--c-ink-3); }
.kpi__bar { display: block; width: 100%; height: 4px; border-radius: 2px; overflow: hidden; fill: var(--c-line); }
.kpi__bar .kpi__fill { fill: var(--c-green); }
/* Phones: MRR and ARR side by side, then the active count and the two plans' seats three across. */
@media (max-width: 559px) {
  .kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpi { grid-column: span 2; min-width: 0; }
  .kpi:nth-child(-n+2) { grid-column: span 3; }
}

/* A one-line pointer above a table, quieter than a flash. */
.notice {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: var(--fs-1);
  color: var(--c-ink-2);
}
.notice svg { width: 18px; height: 18px; color: var(--c-ink-3); }
.notice--warn, .notice--warn svg { color: var(--c-warn-ink); }

.panel.empty { box-shadow: none; }

/* Sync screen */
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.status__when { color: var(--c-ink-2); }
.message {
  margin-top: 14px;
  padding: 12px 14px;
  font-family: var(--f-mono);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--c-warn-ink);
  background: var(--c-warn-bg);
  border-radius: var(--r-md);
  overflow-wrap: anywhere;
}
.message--info { color: var(--c-ink-2); background: rgba(26, 32, 30, .05); }
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  overflow: hidden;
  background: var(--c-line-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 14px 16px; background: var(--c-cream-2); }
.stats dt { font-size: var(--fs-1); color: var(--c-ink-3); }
.stats dd { font-family: var(--f-display); font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sync-run { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.empty { display: flex; align-items: center; gap: 14px; color: var(--c-ink-2); }
@media (min-width: 1000px) { .stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.billing__skipped { margin-top: 14px; }
.oauth { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-line-2); }
.oauth h3 { margin-bottom: 10px; font-size: var(--fs-2); }
.oauth .sync-run { margin-top: 16px; }
.empty svg { width: 22px; height: 22px; color: var(--c-ink-3); }

/* ==== 13 · FOOTER ================================================= */

.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px;
  padding: 20px var(--gutter) 28px;
  font-size: var(--fs-1);
  color: var(--c-ink-3);
  border-top: 1px solid var(--c-line-2);
}
.footer a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--c-ink-2);
  text-underline-offset: 3px; text-decoration-color: var(--c-line);
}
.footer a:hover { color: var(--c-ink); text-decoration-color: currentColor; }

/* ==== 14 · JOIN ==================================================== */

/* The public join form after the address: short steps on one small panel each, where it stands shown above. */
.join .hint { margin-top: -4px; }
.join .field > .hint { margin-top: 6px; }
.join .field-row { align-items: start; }
.join .field, .call .field { min-width: 0; }
/* The proven address on the first step: shown, not typed again, with the way back to the first page. */
.join__label { margin-bottom: 8px; font-weight: 500; font-size: .95rem; }
.join__email { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 1.05rem; overflow-wrap: anywhere; }
.join__email .link { font-size: var(--fs-1); }
.join__submit { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.join__submit .flash { margin: 0; }
.join__submit .hint { margin-top: 0; text-align: center; }
.join__actions { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 560px) { .join__actions { flex-direction: row-reverse; } .join__actions .btn { flex: 1 1 0; } }

/* Where the step stands: one thin segment per step, the ones reached in green. */
.progress { display: flex; gap: 4px; margin: 10px 0 18px; }
.progress span { flex: 1 1 0; height: 4px; border-radius: var(--r-pill); background: var(--c-line); }
.progress span.is-done { background: var(--c-green); }

/* The last step's summary: a line per answer, the way back to its step on the right. */
.recap { margin-bottom: 16px; padding-top: 8px; padding-bottom: 8px; }
.recap__row { padding: 12px 0; }
.recap__row + .recap__row { border-top: 1px solid var(--c-line-2); }
.recap dt { font-size: var(--fs-0); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); }
.recap dd { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 2px; }
.recap__value { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.recap__more { font-size: var(--fs-1); color: var(--c-ink-3); }
.recap dd .link { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); margin: -12px 0; font-size: var(--fs-1); }

/* The join form's first steps: a field or two on one small panel. */
.call-wrap { max-width: calc(32rem + 2 * var(--gutter)); }
.call__submit { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.call__submit .hint { text-align: center; }
/* The code from the email: big, centred, its digits spaced, so it reads like the email shows it. */
.code-input { font-size: 1.9rem; font-weight: 600; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .4em; }
.code-more { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px; }
.code-more .btn--text { align-self: center; }

/* Status and plan as pills: the radio is hidden but stays focusable and keyboard-operable. */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices--stack { flex-direction: column; align-items: stretch; }
.choice {
  position: relative; display: inline-flex; align-items: center;
  min-height: var(--field-h); padding: 10px 20px;
  font-weight: 500; line-height: 1.35;
  background: var(--c-field);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.choices--stack .choice { border-radius: var(--r-md); }
.choice:hover { border-color: rgba(26, 32, 30, .32); }
.choice:has(input:checked) { color: var(--c-cream); background: var(--c-green); border-color: var(--c-green); }
.choice:has(input:focus-visible) { outline: 2px solid var(--c-versa); outline-offset: 3px; }

/* The plans of the join form: one card each, side by side when there is room; the chosen one turns green with its tick. */
.plans { display: grid; gap: 10px; }
@media (min-width: 560px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 16px 18px; text-align: left;
  background: var(--c-field);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.plan-card:hover { border-color: rgba(26, 32, 30, .32); }
.plan-card:has(input:checked) { color: var(--c-cream); background: var(--c-green); border-color: var(--c-green); }
.plan-card:has(input:focus-visible) { outline: 2px solid var(--c-versa); outline-offset: 3px; }
.plan-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-card__name { font-family: var(--f-display); font-size: var(--fs-3); line-height: 1.1; }
.plan-card__check { display: grid; place-items: center; width: 22px; height: 22px; color: transparent; border: 1px solid var(--c-line); border-radius: 50%; }
.plan-card__check svg { width: 14px; height: 14px; }
.plan-card:has(input:checked) .plan-card__check { color: var(--c-green); background: var(--c-cream); border-color: var(--c-cream); }
.plan-card__desc { font-size: var(--fs-1); line-height: 1.4; color: var(--c-ink-2); }
.plan-card:has(input:checked) .plan-card__desc, .plan-card:has(input:checked) .plan-card__unit, .plan-card:has(input:checked) .plan-card__ttc { color: rgba(241, 234, 219, .82); }
.plan-card__price { margin-top: auto; padding-top: 8px; font-family: var(--f-display); font-size: 1.55rem; line-height: 1.1; }
.plan-card__unit { font-family: var(--f-sans); font-size: var(--fs-1); color: var(--c-ink-3); }
.plan-card__ttc { font-size: var(--fs-0); color: var(--c-ink-3); }

/* A day to choose (day.js): quick choices as pills or a field showing the day chosen, then a calendar drawn like the fields. */
.day { display: flex; flex-direction: column; gap: 10px; }
.day .choice { font: inherit; font-weight: 500; color: inherit; }
.choice[aria-pressed="true"] { color: var(--c-cream); background: var(--c-green); border-color: var(--c-green); }
.day__chosen { margin: 0; }
.day__chosen:empty { display: none; }
.day__field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: var(--field-h); padding: 0 16px;
  font: inherit; text-align: left; color: var(--c-ink);
  background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.day__field:hover, .day__field[aria-expanded="true"] { border-color: rgba(26, 32, 30, .45); }
.day__field[aria-invalid="true"] { border-color: var(--c-warn-ink); }
.day__field svg { flex: none; width: 20px; height: 20px; color: var(--c-ink-3); }
.day__value--empty { color: var(--c-ink-3); }
.cal { padding: 12px 14px 14px; background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal__month { font-family: var(--f-display); font-size: var(--fs-2); text-transform: capitalize; }
.cal__nav { display: grid; place-items: center; width: 36px; height: 36px; font: inherit; font-size: 1.3rem; line-height: 1; color: var(--c-ink); background: transparent; border: 1px solid var(--c-line); border-radius: 50%; cursor: pointer; }
.cal__nav:hover { background: var(--c-church); }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__nav:disabled:hover { background: transparent; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; justify-items: center; margin-top: 10px; }
.cal__wd { padding: 4px 0; font-size: var(--fs-0); font-weight: 500; letter-spacing: .06em; text-align: center; text-transform: uppercase; color: var(--c-ink-3); }
.cal__day { display: grid; place-items: center; width: 100%; max-width: 44px; aspect-ratio: 1; min-width: 0; font: inherit; font-weight: 500; color: var(--c-ink); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.cal__day:hover { background: var(--c-church); }
.cal__day--today { box-shadow: inset 0 0 0 1px var(--c-line); }
.cal__day[aria-pressed="true"] { color: var(--c-cream); background: var(--c-green); }
.cal__day:disabled { color: var(--c-ink-3); opacity: .35; cursor: default; }
.cal__day:disabled:hover { background: transparent; }
.cal__day:focus-visible, .cal__nav:focus-visible, .day__field:focus-visible, .day .choice:focus-visible { outline: 2px solid var(--c-versa); outline-offset: 2px; }

/* A tick box and its sentence, the box aligned with the first line. */
.check-group { display: flex; flex-direction: column; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; line-height: 1.5; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--c-green); cursor: pointer; }
.check-group .field__error { margin-left: 34px; }
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--c-warn-ink); outline-offset: 2px; }

/* The honeypot: out of sight for everyone, a robot still sees the field. */
.hp { position: absolute; left: -10000px; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .spinner { animation-duration: 2.4s; }
}


/* ==== SPORTS ====================================================== */

.page-head__more { margin-top: 16px; }
.section-title { margin-bottom: 12px; }
.section-foot { margin-top: 16px; }

/* The member's booking: a dark ticket with the tide drawn across it. */
.ticket {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr; gap: 18px clamp(18px, 3vw, 32px); align-items: start;
  padding: clamp(22px, 3.4vw, 34px);
  color: var(--c-cream); background: var(--c-green); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.ticket--waiting { background: var(--c-versa); }
.ticket__tide { position: absolute; z-index: -1; right: -4%; bottom: -6%; width: 70%; height: 70%; color: var(--c-armerie); opacity: .55; }
.ticket__date { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; padding: 10px 12px 12px; border: 1px solid rgba(241, 234, 219, .28); border-radius: var(--r-md); }
.ticket__num { font-family: var(--f-display); font-weight: 300; font-size: 3rem; line-height: 1; }
.ticket__words { display: flex; flex-direction: column; align-items: center; margin-top: 4px; font-size: var(--fs-0); line-height: 1.35; color: rgba(241, 234, 219, .8); }
.ticket__body { min-width: 0; }
.ticket__state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-1); color: rgba(241, 234, 219, .82); }
.ticket__pill { padding: 1px 10px; border-radius: var(--r-pill); font-size: var(--fs-0); font-weight: 500; color: var(--c-green); background: var(--c-cream); }
.ticket__name { margin-top: 6px; font-size: var(--fs-4); line-height: 1.05; color: var(--c-cream); overflow-wrap: anywhere; }
.ticket__detail { margin-top: 6px; font-family: var(--f-display); font-style: italic; color: rgba(241, 234, 219, .85); }
.ticket__meta { margin-top: 10px; font-size: var(--fs-2); }
.ticket__calendar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.btn.ticket__ghost { color: var(--c-cream); background: transparent; border-color: rgba(241, 234, 219, .5); }
.btn.ticket__ghost:hover { background: rgba(241, 234, 219, .12); border-color: var(--c-cream); }
/* Cancelling lives on the ticket's stub, under a perforation notched into both edges, apart from everything else.
   The notches are the page's cream showing through; the ticket's overflow clips each disc to a half. Leather, lightened
   for the dark ground, marks the one action that undoes something (red stays for money owed). */
.ticket__stub { grid-column: -2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 8px; padding-top: 22px; }
.ticket__stub::before {
  content: ""; position: absolute; align-self: flex-start; left: -11px; right: -11px; height: 22px; margin-top: -33px;
  background:
    radial-gradient(circle at 11px 50%, var(--c-cream) 10.5px, transparent 11px) no-repeat,
    radial-gradient(circle at calc(100% - 11px) 50%, var(--c-cream) 10.5px, transparent 11px) no-repeat,
    repeating-linear-gradient(90deg, rgba(241, 234, 219, .3) 0 6px, transparent 6px 12px) center / 100% 2px no-repeat;
}
.ticket__hint { flex: 1 1 26ch; max-width: 46ch; font-size: var(--fs-1); line-height: 1.5; color: rgba(241, 234, 219, .78); }
.ticket__stub form { margin: 0; }
.btn.ticket__cancel { color: #E6C6A4; background: transparent; border-color: rgba(230, 198, 164, .55); }
.btn.ticket__cancel:hover { color: #E6C6A4; background: rgba(230, 198, 164, .12); border-color: #E6C6A4; }
.ticket :focus-visible { outline-color: var(--c-cream); }
@media (max-width: 479px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket__date { flex-direction: row; align-items: baseline; justify-self: start; gap: 10px; min-width: 0; padding: 6px 14px 8px; }
  .ticket__num { font-size: 2.2rem; }
  .ticket__words { flex-direction: row; gap: 5px; margin-top: 0; font-size: var(--fs-1); }
}

/* The agenda: a rail of dates, the sessions of each day beside it. */
.sessions-title { margin-bottom: 4px; }
.ticket + .section { margin-top: clamp(28px, 4vw, 40px); }
.sessions-note { margin-bottom: 4px; }
.agenda { margin-top: 18px; }
.agenda__day { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 18px; }
.agenda__day + .agenda__day { margin-top: 18px; border-top: 1px solid var(--c-line); }
.agenda__date { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-sans); font-weight: 400; letter-spacing: 0; }
.agenda__num { font-family: var(--f-display); font-weight: 300; font-size: 2.6rem; line-height: .9; color: var(--c-green); font-variant-numeric: lining-nums; }
.agenda__words { display: flex; gap: 6px; font-size: var(--fs-1); color: var(--c-ink-2); }
.agenda__words span:first-child { font-weight: 500; color: var(--c-ink); }
@media (min-width: 720px) {
  .agenda__day { grid-template-columns: 7.5rem 1fr; gap: 24px; padding-top: 24px; }
  .agenda__day + .agenda__day { margin-top: 24px; }
  .agenda__date { position: sticky; top: 20px; align-self: start; flex-direction: column; gap: 6px; }
  .agenda__num { font-size: 3.4rem; }
  .agenda__words { flex-direction: column; gap: 0; line-height: 1.4; }
}

.sessions { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.session {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 12px 16px; align-items: start;
  padding: 16px clamp(16px, 2.4vw, 22px);
  background: var(--c-cream-2); border: 1px solid var(--c-line-2); border-radius: var(--r-md);
}
.session.is-mine { background: var(--c-field); border-color: var(--c-green); box-shadow: inset 4px 0 0 var(--c-green); }
.session__time { display: flex; flex-direction: column; line-height: 1.15; }
.session__start { font-family: var(--f-display); font-size: var(--fs-3); color: var(--c-ink); }
.session__end { font-size: var(--fs-0); color: var(--c-ink-3); }
.session__main { min-width: 0; }
.session__name { font-family: var(--f-display); font-size: var(--fs-3); line-height: 1.2; color: var(--c-ink); overflow-wrap: anywhere; }
.session__detail { margin-top: 2px; font-size: var(--fs-1); color: var(--c-ink-2); }
.session__host { margin-top: 4px; font-size: var(--fs-1); color: var(--c-ink-3); }
/* What the club writes of the activity on Shaker: its line, then the longer text behind a disclosure. */
.session__about { margin-top: 4px; font-size: var(--fs-1); color: var(--c-ink-2); max-width: 60ch; }
.session__more { margin-top: 8px; }
/* The text column opens and closes the text (sessions.js); the time and the button do not. */
.session:has(.session__more) { transition: border-color .15s ease; }
.session__main:has(.session__more) { cursor: pointer; }
.session:has(.session__main:hover .session__more) { border-color: var(--c-line); }
/* The button turns over on hover: the click books, it does not open the text. */
.session__side .btn:not(.btn--ghost):hover, .confirm .btn:hover { color: var(--c-green); background: var(--c-cream-2); border-color: var(--c-green); }
.session__more > summary, .devices__more > summary {
  display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  font-size: var(--fs-0); font-weight: 500; color: var(--c-sariette); border-radius: 4px;
}
.session__more > summary::-webkit-details-marker, .devices__more > summary::-webkit-details-marker { display: none; }
/* A chevron drawn in the text's colour: down when closed, up when open. */
.session__more > summary::before, .devices__more > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.session__more[open] > summary::before, .devices__more[open] > summary::before { transform: translateY(1px) rotate(-135deg); }
.session__more > summary:hover > span, .devices__more > summary:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.session__more-close, .session__more[open] .session__more-open, .devices__more-close, .devices__more[open] .devices__more-open { display: none; }
.session__more[open] .session__more-close, .devices__more[open] .devices__more-close { display: inline; }
/* The longer text: set off by a rule in the house green, one paragraph per block. */
.session__text {
  margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--c-armerie); max-width: 62ch;
  font-size: var(--fs-1); line-height: 1.6; color: var(--c-ink-2);
}
.session__text > p { white-space: pre-line; }
.session__text > p + p { margin-top: .65em; }
@media (prefers-reduced-motion: no-preference) {
  .session__more[open] .session__text { animation: session-text .22s ease-out; }
}
@keyframes session-text { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .session__more > summary::before, .devices__more > summary::before, .session:has(.session__more) { transition: none; } }
.session__side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
/* Members are told whether a session is full, never how many places are left. */
.session__full { font-size: var(--fs-0); font-weight: 500; color: var(--c-warn-ink); }
@media (min-width: 640px) {
  .session { grid-template-columns: 4.75rem 1fr auto; align-items: center; }
  .session__side { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
  /* A member's row grows when its text opens: the time and the button stay level with the name. */
  .session:not(.session--admin) { align-items: start; }
  .session:not(.session--admin) .session__side { justify-content: flex-start; }
}

/* A yes/no and its button on one line, in the members screen. */
.agenda__more { display: flex; justify-content: center; margin-top: clamp(24px, 4vw, 36px); }
.agenda__more a[aria-busy="true"] { opacity: .6; pointer-events: none; }
.agenda__day { position: relative; }
/* The landing point of "Voir plus", out of the grid, high enough for the bar above. */
.agenda__anchor { position: absolute; top: -90px; left: 0; width: 1px; height: 1px; }
.agenda__date:focus { outline: none; }

/* The sports admin's page: one quiet bar for the settings, then the agenda, each session's places edited where they are counted. */
/* The settings, folded: they rarely change, and the bookings come first. */
.sports-settings { margin-top: 18px; background: var(--c-cream-2); border: 1px solid var(--c-line-2); border-radius: var(--r-lg); }
.sports-settings > summary { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; cursor: pointer; list-style: none; }
.sports-settings > summary::-webkit-details-marker { display: none; }
.sports-settings > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; align-self: center; border-right: 1.6px solid var(--c-ink-2); border-bottom: 1.6px solid var(--c-ink-2); transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.sports-settings[open] > summary::after { transform: rotate(-135deg); }
.sports-settings__title { font-weight: 500; color: var(--c-ink); }
.sports-settings__meta { font-size: var(--fs-1); color: var(--c-ink-3); }
.sports-settings[open] .sports-settings__meta { visibility: hidden; }
.sports-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 4px 18px 16px; }
.sports-bar__label { font-size: var(--fs-1); font-weight: 500; color: var(--c-ink); }
.sports-bar__sync { display: flex; align-items: center; gap: 10px; }
.sports-bar__when { font-size: var(--fs-1); color: var(--c-ink-3); }
.sports-bar__when.is-warn { color: var(--c-warn-ink); font-weight: 500; }
.sports-bar__offered { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--c-line-2); font-size: var(--fs-0); color: var(--c-ink-3); }
.sports-bar__offered svg { flex: none; width: 15px; height: 15px; }
/* The confirmation asked before booking or cancelling a session (confirm.js). */
.confirm { width: min(28rem, calc(100% - 2 * var(--gutter))); margin: auto; padding: 0; color: var(--c-ink); background: var(--c-cream-2); border: 1px solid var(--c-line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.confirm::backdrop { background: rgba(26, 32, 30, .45); }
.confirm__box { padding: clamp(20px, 4vw, 28px); }
.confirm__text { margin-top: 10px; }
.confirm__hint { margin-top: 8px; font-size: var(--fs-1); color: var(--c-ink-3); white-space: pre-line; }
/* What the dialog announces first and big, the early return's discount, with the text right under it. */
.confirm__lead { margin-top: 12px; padding: 10px 14px; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.15; color: var(--c-ok-ink); background: var(--c-ok-bg); border-radius: var(--r-md); }
.confirm__lead:not([hidden]) + .confirm__text { margin-top: 8px; }
.confirm__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 18px; margin-top: 22px; }
/* The dialog opens on its title (read first, no ring on a button); Tab then reaches Retour and the confirm button. */
.confirm__title:focus { outline: none; }
/* Retour backs out quietly: a word, not a second button competing with the confirm one. */
.confirm__back {
  min-height: var(--field-h); padding: 0 6px; font: inherit; font-size: 15px; font-weight: 500; color: var(--c-ink-2);
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.confirm__back:hover { color: var(--c-ink); text-decoration-color: currentColor; }
.stepper-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (max-width: 559px) {
  .page-head--sports { margin-bottom: 16px; }
  .page-head--sports h1 { font-size: 1.9rem; }
  .page-head--sports .lede, .page-head--sports .eyebrow { display: none; }
  .sports-settings > summary { padding: 11px 14px; }
  .sports-bar { padding: 2px 14px 14px; }
  .session--admin { padding: 14px; gap: 10px 12px; }
  .session--admin .stepper__btn { width: 30px; height: 30px; }
  .session--admin .stepper__value { min-width: 2.8rem; font-size: var(--fs-2); }
}

.stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--r-pill); }
.stepper__btn {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  font: inherit; font-size: 1.2rem; line-height: 1; color: var(--c-green); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.stepper__btn:hover:not(:disabled) { color: var(--c-cream); background: var(--c-green); }
.stepper__btn:disabled { color: var(--c-ink-3); opacity: .35; cursor: not-allowed; }
.stepper__value { min-width: 3.4rem; padding: 0 4px; text-align: center; font-family: var(--f-display); font-size: var(--fs-3); line-height: 1; color: var(--c-ink); }
.saved { font-size: var(--fs-0); font-weight: 500; color: var(--c-ok-ink); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.saved.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .saved, .stepper__btn { transition: none; } }

.session--admin .session__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.session--admin.is-canceled { opacity: .62; }
.session--admin.is-canceled .session__name > span:first-child { text-decoration: line-through; text-decoration-thickness: 1px; }
.session--admin.is-full { border-color: var(--c-sariette); }
.cap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cap--static { flex-direction: row; gap: 3px; font-family: var(--f-display); font-size: var(--fs-3); color: var(--c-ink-3); }
.cap__sep { margin: 0 3px; color: var(--c-ink-3); font-weight: 300; }
.cap__own { color: var(--c-versa); }
.cap__reset { padding: 0; font: inherit; font-size: var(--fs-0); color: var(--c-ink-2); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(26, 32, 30, .35); text-underline-offset: 3px; }
.cap__reset:hover { color: var(--c-ink); }
.session.is-full .stepper__value strong { color: var(--c-sariette); }
@media (max-width: 639px) { .cap { align-items: flex-start; } }

/* Who is booked, as names; who waits, in order, each with the button that lets them in. */
.people { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.person { padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-1); color: var(--c-ok-ink); background: var(--c-ok-bg); }
.person--accepted { box-shadow: inset 0 0 0 1px var(--c-sariette); }
.line { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-line); }
.line__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-1); color: var(--c-ink-2); }
.line__pos { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-0); font-weight: 500; color: var(--c-warn-ink); background: var(--c-warn-bg); }
.line__name { color: var(--c-ink); }

/* The "check your email" screen: one sentence, the address in it, and the way to ask again. */
.state--quiet .state__art { width: 72px; height: auto; }
.state--quiet .state__text { max-width: 36ch; margin: 10px auto 0; font-size: var(--fs-2); line-height: 1.5; color: var(--c-ink-2); text-align: center; }
.state__email { color: var(--c-ink); font-weight: 500; overflow-wrap: anywhere; }
.state--quiet ~ .auth__more > form { align-self: center; }

/* Safety: "À faire" (a list of actions by date), "C'est fait" sheets, and the register as a book. */
.safety-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.safety-bar .subnav--tabs { margin-bottom: 0; }
.lang-note { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 400; letter-spacing: .02em; color: var(--c-ink-2); background: var(--c-line-2); vertical-align: middle; }

.todo-hero { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px 20px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--c-green); color: var(--c-cream-2); }
.todo-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.todo-ring__track { stroke: rgba(247, 242, 231, .18); }
.todo-ring__fill { stroke: var(--c-armerie); }
.todo-hero__count { display: flex; flex-direction: column; margin: 0; line-height: 1.15; }
.todo-hero__count strong { font-size: 1.35rem; font-weight: 600; }
.todo-hero__count span { font-size: var(--fs-0); opacity: .75; }
.todo-hero__title { margin: 0; font-family: var(--f-display); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.2; }
.todo-hero__sub { margin: 6px 0 0; font-size: var(--fs-1); opacity: .8; }
@media (max-width: 560px) { .todo-hero { grid-template-columns: auto 1fr; } .todo-hero__text { grid-column: 1 / -1; } }

.todo-group { margin-top: clamp(22px, 4vw, 32px); }
.todo-group__title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; font-family: var(--f-sans); font-size: var(--fs-0); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); }
.todo-group__count { letter-spacing: 0; }
.todo-group__hint { margin: -4px 0 10px; font-size: var(--fs-1); color: var(--c-ink-2); }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; background: var(--c-field); border: 1px solid var(--c-line-2); border-radius: 14px; }
.todo-row--late { border-color: rgba(180, 35, 24, .35); }
.todo-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; }
.todo-ico svg { width: 20px; height: 20px; }
.todo-ico--safety { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.todo-ico--accessibility { background: rgba(62, 86, 104, .14); color: var(--c-versa); }
.todo-ico--insurance { background: var(--c-ok-bg); color: var(--c-ok-ink); }
.todo-ico--reminder { background: var(--c-grey); color: var(--c-ink-2); }
.todo-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
a.todo-row__main:hover .todo-row__title > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.todo-row__title { font-weight: 600; }
.todo-row__hint { font-size: var(--fs-1); color: var(--c-ink-3); }
.todo-due { flex: none; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-0); font-weight: 500; white-space: nowrap; background: var(--c-warn-bg); color: var(--c-warn-ink); }
.todo-due--late { background: var(--c-alert-bg); color: var(--c-alert); }
.todo-due--ok { background: var(--c-ok-bg); color: var(--c-ok-ink); }
.todo-row .btn, .todo-row .inline-form { flex: none; }
@media (max-width: 560px) {
  .todo-row { flex-wrap: wrap; }
  .todo-row__main { flex-basis: calc(100% - 52px); }
  .todo-row .todo-due { margin-left: 52px; }
  .todo-row .btn, .todo-row .inline-form { margin-left: auto; }
}
.todo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: clamp(24px, 4vw, 36px); }

/* A line with a chevron that opens what it hides (the rest of a group, "Pourquoi ?", "Modifier"), without a script. */
.disclosure { margin-top: clamp(16px, 3vw, 24px); }
.disclosure > summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px; list-style: none; cursor: pointer;
  font-weight: 500; color: var(--c-sariette); border-radius: 4px;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.disclosure[open] > summary::before { transform: translateY(1px) rotate(-135deg); }
.disclosure > summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.disclosure > .sheet { margin-top: 12px; }

.sheet-wrap { max-width: 620px; }
.sheet-wrap--wide { max-width: 760px; }
.sheet-back { display: inline-flex; gap: 6px; margin: 0 0 14px; font-size: var(--fs-1); color: var(--c-ink-2); text-decoration: none; }
.sheet-back:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.sheet { padding: clamp(20px, 4vw, 30px); background: var(--c-field); border: 1px solid var(--c-line-2); border-radius: 20px; box-shadow: 0 10px 30px rgba(26, 32, 30, .08); }
.sheet + .sheet { margin-top: 16px; }
.sheet--plain { box-shadow: none; }
.sheet__head { display: flex; align-items: flex-start; gap: 14px; }
.sheet__eyebrow { margin: 0 0 4px; font-size: var(--fs-0); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-sariette); }
.sheet__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; }
.sheet__lede { margin: 6px 0 0; color: var(--c-ink-2); }
.sheet__h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; }
.sheet__form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.sheet .flash { margin: 16px 0 0; }
.sheet__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.sheet__next { margin: 0; max-width: 30ch; font-size: var(--fs-1); color: var(--c-ink-3); }
.sheet-wrap > .flash { margin-bottom: 14px; }
.field__label, .seg legend { display: block; margin-bottom: 8px; padding: 0; font-weight: 500; font-size: .95rem; color: var(--c-ink); }
.seg { min-width: 0; margin: 0; padding: 0; border: 0; }
.seg__options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.seg__options--wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.seg__option { position: relative; }
.seg__option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg__option span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 10px; text-align: center; font-size: var(--fs-1); background: var(--c-cream-2); border: 1px solid var(--c-line); border-radius: var(--r-md); transition: background-color var(--t-fast) var(--ease); }
.seg__option input:checked + span { color: var(--c-cream-2); font-weight: 500; background: var(--c-green); border-color: var(--c-green); }
.seg__option input:focus-visible + span { outline: 2px solid var(--c-versa); outline-offset: 2px; }
.drop, .field label.drop { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 14px; text-align: center; color: var(--c-ink-2); border: 1.5px dashed var(--c-line); border-radius: var(--r-md); cursor: pointer; }
.drop svg { flex: none; width: 18px; height: 18px; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:hover, .drop:focus-within { color: var(--c-ink); border-color: var(--c-sariette); }
.drop--sm { min-height: 48px; }
.file-list { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.file-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.file-list .link svg, .book-entry__files svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.file-add { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.file-add .drop { flex: 1 1 14rem; }
.facts-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; padding: 0; list-style: none; }
.facts-line li { padding: 4px 10px; font-size: var(--fs-0); color: var(--c-ink-2); background: var(--c-cream); border-radius: var(--r-pill); }
.facts-line .facts-line__warn { color: var(--c-alert); background: var(--c-alert-bg); }
.why p { margin: 6px 0 0; font-size: var(--fs-1); color: var(--c-ink-2); }
.archive-form { margin-top: 10px; }

.book { overflow: hidden; background: var(--c-field); border: 1px solid var(--c-line-2); border-radius: 20px; }
.book__cover { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; padding: clamp(20px, 4vw, 28px); border-bottom: 1px solid var(--c-line-2); }
.book__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2rem); }
.book__sub { margin: 6px 0 0; font-size: var(--fs-1); color: var(--c-ink-3); }
.book__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.book__chapter { padding: 18px clamp(20px, 4vw, 28px); border-bottom: 1px solid var(--c-line-2); }
.book__chapter:last-child { border-bottom: 0; }
.book__chapter-title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-sans); font-size: var(--fs-2); font-weight: 600; }
.book__num { display: grid; place-items: center; width: 26px; height: 26px; font-size: var(--fs-0); color: var(--c-cream-2); background: var(--c-green); border-radius: 50%; }
.book__empty { margin: 8px 0 0 36px; font-size: var(--fs-1); color: var(--c-ink-3); }
.book-entries { display: grid; gap: 12px; margin: 10px 0 0; padding: 0 0 0 36px; list-style: none; }
.sheet .book-entries { padding-left: 0; }
.book-entry__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.book-entry__date { font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.book-entry__who { font-size: var(--fs-1); color: var(--c-ink-3); }
.book-entry__note { margin: 2px 0 0; font-size: var(--fs-1); color: var(--c-ink-2); }
.book-entry__files { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; font-size: var(--fs-1); }

@media print {
  .nav, .subnav, .footer, .flash, .safety-bar, .page-head, .book__actions { display: none !important; }
  .book { border: 0; border-radius: 0; }
  .book-entry { break-inside: avoid; }
  .book a { color: inherit; text-decoration: none; }
}
.book-entry__files a, .file-list a { display: inline-flex; align-items: center; gap: 4px; }
.book-entry__files svg, .file-list .link svg { margin-right: 0; }
/* ==== MEMBERS' FEEDBACK =========================================== */

/* The home card: the answer button, and "Pas maintenant" as a quiet text button on the dark card. */
.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
@media (min-width: 640px) { .card__actions { flex: none; margin-top: 0; } }
.card--feedback .card__hint { color: rgba(241, 234, 219, .82); }
.card--feedback .btn.btn--text, .card--feedback .btn.btn--text:hover, .card--feedback .btn.btn--text:disabled:hover {
  color: rgba(241, 234, 219, .82); background: none; border-color: transparent; text-decoration-color: rgba(241, 234, 219, .45);
}
.card--feedback .btn.btn--text:hover { color: var(--c-cream); text-decoration-color: currentColor; }

/* The survey: one question after the other, each legend or label in the headings' face. */
.survey { display: flex; flex-direction: column; gap: 28px; }
.survey .field > label { font-family: var(--f-display); font-size: var(--fs-2); font-weight: 400; }
.req { color: var(--c-warn-ink); }
.survey__submit { display: flex; flex-direction: column; gap: 10px; }

/* The rating: five stars, the chosen one and those before it filled. The radios stay focusable and keyboard-operable. */
.stars { display: flex; gap: 4px; }
.star { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--c-ink-3); cursor: pointer; }
.star svg { width: 34px; height: 34px; fill: transparent; transition: fill var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.star:hover { color: var(--c-ink); }
.star:has(input:checked), .star:has(~ .star input:checked) { color: var(--c-leather); }
.star:has(input:checked) svg, .star:has(~ .star input:checked) svg { fill: currentColor; }
.star:has(input:focus-visible) { outline: 2px solid var(--c-versa); outline-offset: 2px; }
.stars[aria-invalid="true"] .star { color: var(--c-warn-ink); }

/* The 0 to 10 scale: two rows on a phone, one line from 560px; its two ends under it. */
.scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 560px) { .scale { grid-template-columns: repeat(11, minmax(0, 1fr)); } }
.scale__opt {
  display: grid; place-items: center; min-height: var(--tap);
  font-weight: 500; background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--r-sm); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.scale__opt:hover { border-color: rgba(26, 32, 30, .32); }
.scale__opt:has(input:checked) { color: var(--c-cream); background: var(--c-green); border-color: var(--c-green); }
.scale__opt:has(input:focus-visible) { outline: 2px solid var(--c-versa); outline-offset: 2px; }
.scale[aria-invalid="true"] .scale__opt { border-color: var(--c-warn-ink); }
.scale__ends { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-1); color: var(--c-ink-3); }

/* Admin: four figures in a row on wide screens, two by two below. */
@media (min-width: 640px) { .stats--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stats--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feedback__base { margin-top: 12px; }
.feedback__sub { margin: 24px 0 12px; font-size: var(--fs-2); font-weight: 400; }
.feedback__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 12px; }
@media (max-width: 559px) { .feedback__actions > form, .feedback__actions > .btn { flex: 1 1 100%; } .feedback__actions .btn { width: 100%; } }

/* What they like most: one bar per choice, the most ticked first. */
.likes { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.likes__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; }
.likes__count { font-size: var(--fs-1); color: var(--c-ink-3); white-space: nowrap; }
.kpi__bar.likes__bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; }

/* The answers, the latest first. */
.answers { list-style: none; display: flex; flex-direction: column; }
.answer { padding: 18px 0; border-top: 1px solid var(--c-line-2); }
.answer:first-child { padding-top: 0; border-top: 0; }
.answer:last-child { padding-bottom: 0; }
.answer__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 10px; }
.answer__when { font-size: var(--fs-1); color: var(--c-ink-3); }
.answer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.answer__grid dt { font-size: var(--fs-0); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); }
.answer__grid dd { margin: 2px 0 0; }
.answer__wide { grid-column: 1 / -1; }
.answer__text { white-space: pre-line; overflow-wrap: anywhere; }

/* ==== The members' directory ======================================= */

/* One line per person; their links end the line, or go under the name when the screen is narrow. */
.directory li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--c-line-2);
}
.directory li:first-child { border-top: 0; padding-top: 0; }
.directory li:last-child { padding-bottom: 0; }
.entry { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 14rem; }
.entry__avatar {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-family: var(--f-display); font-size: var(--fs-2); letter-spacing: .02em;
  color: var(--c-cream); background: var(--c-sariette);
}
.entry__text { min-width: 0; }
.entry__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 500; overflow-wrap: anywhere; }
.entry__meta { font-size: var(--fs-1); color: var(--c-ink-3); overflow-wrap: anywhere; }
.entry__links { display: flex; flex-wrap: wrap; gap: 6px; }
.entry__links .icon-btn { width: 40px; height: 40px; text-decoration: none; }
.entry__links .icon-btn svg { width: 18px; height: 18px; }
.card--profile .btn { align-self: flex-start; }
/* "Visible par les membres": one switch per piece of the entry, on when the members see it. */
.visible { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.visible legend { padding: 0; margin-bottom: 2px; font-weight: 600; }
.switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--c-line-2); cursor: pointer; line-height: 1.4; }
.switch:last-child { border-bottom: 1px solid var(--c-line-2); }
.switch__label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.switch__label svg { flex: none; width: 18px; height: 18px; color: var(--c-ink-3); }
.switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.switch__track { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--c-grey); transition: background .15s; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(26, 32, 30, .25); transition: transform .15s; }
.switch input:checked + .switch__track { background: var(--c-green); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--c-versa); outline-offset: 2px; }
.switch:has(input:disabled) { opacity: .5; cursor: default; }
/* On a phone the reader's own line keeps its button under the name, lined up with it. */
@media (max-width: 559px) {
  .directory .entry { flex-basis: 100%; }
  .directory li > .btn, .directory .entry__links { margin-left: 58px; }
}
.entry__photo { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--c-church); }
/* The member's own photo on the account page, with its buttons. */
.photo { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.photo__img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--c-church); }
.photo__initials {
  display: grid; place-items: center; flex: none;
  width: 72px; height: 72px;
  border-radius: 50%;
  font-family: var(--f-display); font-size: var(--fs-3); letter-spacing: .02em;
  color: var(--c-cream); background: var(--c-sariette);
}
.photo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.photo__form { display: flex; align-items: center; gap: 8px; }
.photo__pick { cursor: pointer; }
.photo__pick:focus-within { outline: 2px solid var(--c-versa); outline-offset: 2px; }
.details__actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tag--soon { color: var(--c-versa); background: rgba(62, 86, 104, .12); }
.details__title { margin-bottom: 8px; font-family: var(--f-display); font-size: var(--fs-2); }
.details .edit { margin-top: 10px; }
.details .details-form { margin-top: 12px; max-width: 32rem; }
.details .pills { margin-bottom: 8px; }
.details .hint--warn { margin-bottom: 4px; }
button.pill { font: inherit; font-size: var(--fs-0); cursor: pointer; border: 0; }
button.pill:hover { filter: brightness(.95); }

/* The admin's entry panel: a card of its own, the opening button stays and reads "Fermer" while it is open. */
.edit--panel { margin-top: 0; padding-top: 0; border-top: 0; }
.edit--panel > summary:focus-visible { position: static; width: auto; height: auto; margin: 0; clip: auto; }
.entry-panel { margin-top: 10px; padding: 18px 20px 20px; background: var(--c-cream-2); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.entry-panel .details-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; max-width: none; margin-top: 0; }
.entry-panel .details-form > .hint, .entry-panel .details-form > .visible, .entry-panel .details-form > .form-actions { grid-column: 1 / -1; }
@media (max-width: 759px) { .entry-panel { padding: 14px; } .entry-panel .details-form { grid-template-columns: minmax(0, 1fr); } }
/* The member's photo in the admin's list, a click changes it. */
.who__photo-form { display: contents; }
.who__photo { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--c-church); }
.who__photo img { width: 32px; height: 32px; object-fit: cover; display: block; }
.who__photo-empty { font-family: var(--f-display); font-size: 12px; letter-spacing: .02em; color: var(--c-ink-2); }
.who__photo:hover, .who__photo:focus-within { outline: 2px solid var(--c-versa); outline-offset: 1px; }
.table--members .who__name { height: 32px; }
.entry-panel__redo { grid-column: 1 / -1; margin: -4px 0 2px; }