._page_tcxd8_1 {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-5);
  text-align: center;
  background: var(--surface);
  color: var(--ink);
}

._title_tcxd8_14 {
  font: var(--type-display-m);
  letter-spacing: var(--tracking-display-m);
}

._message_tcxd8_19 {
  max-width: var(--sheet-max);
  color: var(--ink-muted);
}
/* Global base styles. Components style themselves with CSS Modules; every
   value comes from tokens.css (generated: see scripts/build-tokens.mjs). */
/* GENERATED by scripts/build-tokens.mjs from design/creno-design/design-system/tokens.json.
   Do not edit: change tokens.json, then run `yarn tokens`. */

:root {
  color-scheme: light;

  /* Families */
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Schibsted Grotesk", sans-serif;

  /* Type: font shorthand + letter-spacing (font: var(--type-body); letter-spacing: var(--tracking-body)) */
  --type-display-l: 700 40px/40px var(--display); /* One per screen: the club name on the home screen, the score on a result screen. */
  --tracking-display-l: -0.02em;
  --type-display-m: 700 28px/32px var(--display); /* Sheet titles and the court name on the booking sheet. */
  --tracking-display-m: -0.015em;
  --type-display-s: 700 22px/26px var(--display); /* Section headers on the admin console. */
  --tracking-display-s: -0.01em;
  --type-title: 600 20px/26px var(--sans); /* Card titles and the question at the top of each booking step. */
  --tracking-title: -0.01em;
  --type-subtitle: 600 17px/24px var(--sans); /* Member names in the partner list, row titles in the admin table. */
  --tracking-subtitle: normal;
  --type-body: 400 15px/22px var(--sans); /* Default copy. Anything a member reads rather than scans. */
  --tracking-body: normal;
  --type-body-strong: 600 15px/22px var(--sans); /* Button labels and the one value in a row that matters. */
  --tracking-body-strong: normal;
  --type-small: 400 13px/18px var(--sans); /* Helper lines under a field, court surface, cancellation window. */
  --tracking-small: normal;
  --type-label: 700 12px/16px var(--sans); /* Uppercase section labels above a group of controls. Apply text-transform in CSS, not in the copy. */
  --tracking-label: 0.06em;
  --type-caption: 400 12px/16px var(--sans); /* Table captions and legends. Never for anything a member must act on. */
  --tracking-caption: normal;
  --type-time: 600 15px/20px var(--sans); /* Every time in the slot grid. Pair with the .ct-tnum class so the columns line up. */
  --tracking-time: normal;
  --type-time-lg: 700 18px/22px var(--sans); /* The chosen slot on a booking card or confirmation. */
  --tracking-time-lg: normal;
  --type-stat: 700 32px/34px var(--sans); /* One occupancy or token figure on the admin console. Never more than four on a screen. */
  --tracking-stat: -0.02em;

  /* Spacing, radii, control sizes */
  --space-1: 4px; /* Gap between a pip and its neighbour; icon-to-label inside a pill. */
  --space-2: 8px; /* Gutter of the slot grid and of a segmented control. */
  --space-3: 12px; /* Inner padding of small controls; gap between chips. */
  --space-4: 16px; /* Card padding and the gap between stacked rows. */
  --space-5: 20px; /* Horizontal padding of a mobile screen and of a bottom sheet. */
  --space-6: 24px; /* Gap between two blocks inside a step. */
  --space-8: 32px; /* Gap between sections of a screen. */
  --space-10: 40px; /* Space above a sheet's primary action. */
  --space-12: 48px; /* Top of a screen down to its first heading. */
  --space-16: 64px; /* Desktop console column gutter. */
  --radius-xs: 4px; /* Token pips and the occupancy bar. */
  --radius-sm: 8px; /* Slots, table cells, small badges. */
  --radius-md: 12px; /* Buttons, inputs, segmented controls. */
  --radius-lg: 18px; /* Cards, the partner list, the token meter. */
  --radius-xl: 28px; /* The top corners of a bottom sheet. */
  --radius-pill: 999px; /* Status pills, day buttons, avatars. CSS only — never as an SVG rx. */
  --control-sm: 32px; /* Dense rows in the admin console — pointer input only. */
  --control-md: 40px; /* Secondary and inline buttons. */
  --control-lg: 48px; /* The primary action of a step, and every field on mobile. */
  --tap-min: 44px; /* Minimum hit area of anything tappable on mobile, padding included. */
  --slot-h: 44px; /* Height of one slot in the grid — the whole grid is built on it. */
  --sheet-max: 560px; /* Maximum width of a bottom sheet or booking column on a wide screen. */

  /* Colours and shadows — Jour */
  --surface: #faf6f0; /* Page background everywhere. The warm paper tone is the brand's ground; never use pure white as a page. */
  --surface-raised: #ffffff; /* Cards, bottom sheets, free slots, the admin table body. */
  --surface-sunken: #f0e9df; /* The slot grid behind the slots, unavailable slots, table headers, empty states. */
  --overlay: rgba(36,29,22,0.50); /* Scrim behind a bottom sheet or dialog. Never as a text colour. */
  --ink: #241d16; /* Body and heading text on surface, surface-raised and surface-sunken (at least 13.8:1 in both themes). */
  --ink-muted: #6b5d50; /* Secondary text — surface type, slot duration, helper lines — on surface and surface-raised (at least 5.9:1 in both themes). */
  --ink-faint: #8d8073; /* Disabled labels and placeholder text only, on surface and surface-raised. Below 4.5:1 by design: never carry meaning with it alone. */
  --line: #e6dcd0; /* Hairline between rows, card borders, the slot grid's lines. Decorative — not a meaningful boundary on its own. */
  --line-strong: #9d8b76; /* Borders of interactive controls — unselected slots, inputs, secondary buttons — on surface and surface-raised (at least 3.0:1 in both themes — the floor for a control border). */
  --clay: #bd4a22; /* The primary action and the selected slot. One clay fill per screen: the thing the screen exists for. */
  --clay-hover: #9f3d1a; /* Hover and pressed state of a clay fill. */
  --clay-soft: #f8e5db; /* Tinted ground behind clay text or icons — selected day in the date strip, clay badges. */
  --on-clay: #fff8f4; /* Text and icons on a clay or clay-hover fill (4.8:1 light, 5.8:1 dark). Never literal white in the dark theme. */
  --clay-ink: #8f3313; /* Clay-coloured text and icons on surface, surface-raised and clay-soft (at least 6.5:1 in both themes). */
  --court: #12564a; /* Confirmed bookings and your own reservations. The steady, quiet green — an outcome, never an invitation to tap. */
  --court-soft: #dcece8; /* Ground of a confirmed status pill and of slots you already hold. */
  --on-court: #f1fbf8; /* Text and icons on a court fill (8.1:1 light, 5.3:1 dark). */
  --court-ink: #0f4b41; /* Confirmed text on surface, surface-raised and court-soft (at least 6.5:1 in both themes). */
  --token: #855405; /* The guest-token allowance: pips, the meter fill, the cost line on a guest invite. */
  --token-soft: #fbead0; /* Spent or empty token pips, and the ground of the token meter. */
  --token-ink: #6e4504; /* Token counts and their labels on surface, surface-raised and token-soft (at least 7.0:1 in both themes). */
  --danger: #9d1f1f; /* Cancelling a booking and destructive admin actions. Distinguished from clay by depth, never by hue alone — always beside the word Annuler. */
  --danger-soft: #fae2df; /* Ground of a cancelled status pill and of a destructive confirmation sheet. */
  --on-danger: #fff6f4; /* Text and icons on a danger fill (7.5:1 light, 6.8:1 dark). */
  --danger-ink: #8c1b1b; /* Cancellation text on surface, surface-raised and danger-soft (at least 7.3:1 in both themes). */
  --focus: #0b5fb0; /* The keyboard focus ring — a blue that belongs to no other meaning in the product. Solid 2px with a 2px offset; at least 5.3:1 on every surface in both themes. */
  --shadow-sm: 0 1px 2px rgba(36,29,22,0.10); /* A card resting on surface. */
  --shadow-md: 0 4px 16px rgba(36,29,22,0.12); /* A dropdown or the sticky booking bar. */
  --shadow-sheet: 0 -8px 32px rgba(36,29,22,0.18); /* The bottom sheet, cast upward onto the screen behind it. */
}

/* Nuit, following the system unless the page forces Jour */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --surface: #16130f;
    --surface-raised: #201c17;
    --surface-sunken: #0e0c0a;
    --overlay: rgba(0,0,0,0.66);
    --ink: #f6f1e9;
    --ink-muted: #b0a396;
    --ink-faint: #7d7266;
    --line: #322c25;
    --line-strong: #7a7063;
    --clay: #e07040;
    --clay-hover: #ef8557;
    --clay-soft: #3a2018;
    --on-clay: #1d0f07;
    --clay-ink: #f0a07c;
    --court: #3f9e88;
    --court-soft: #0f2e28;
    --on-court: #062019;
    --court-ink: #63bda7;
    --token: #d9a444;
    --token-soft: #322510;
    --token-ink: #e0b063;
    --danger: #f07a72;
    --danger-soft: #3a1513;
    --on-danger: #2a0a08;
    --danger-ink: #f4958e;
    --focus: #7ab7f2;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.60);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.66);
    --shadow-sheet: 0 -8px 32px rgba(0,0,0,0.72);
  }
}

/* Nuit, forced by the page */
:root[data-theme='dark'] {
  color-scheme: dark;
  --surface: #16130f;
  --surface-raised: #201c17;
  --surface-sunken: #0e0c0a;
  --overlay: rgba(0,0,0,0.66);
  --ink: #f6f1e9;
  --ink-muted: #b0a396;
  --ink-faint: #7d7266;
  --line: #322c25;
  --line-strong: #7a7063;
  --clay: #e07040;
  --clay-hover: #ef8557;
  --clay-soft: #3a2018;
  --on-clay: #1d0f07;
  --clay-ink: #f0a07c;
  --court: #3f9e88;
  --court-soft: #0f2e28;
  --on-court: #062019;
  --court-ink: #63bda7;
  --token: #d9a444;
  --token-soft: #322510;
  --token-ink: #e0b063;
  --danger: #f07a72;
  --danger-soft: #3a1513;
  --on-danger: #2a0a08;
  --danger-ink: #f4958e;
  --focus: #7ab7f2;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.60);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.66);
  --shadow-sheet: 0 -8px 32px rgba(0,0,0,0.72);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--surface);
  color: var(--ink);
  font: var(--type-body);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

/* Text for screen readers only: out of sight, still read. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Créno's mark (M-91: the logo kit's, design/creno-logo/creno-mark.svg), at
   the mockups' mark size, 24 px here: space-6. The kit's #bd4a22 and
   #fff8f4 are Jour's clay and on-clay; the tokens carry Nuit's. */

._mark_xf745_5 {
  flex-shrink: 0;
  width: var(--space-6);
  height: var(--space-6);
}

._disc_xf745_11 {
  fill: var(--clay);
}

._arc_xf745_15 {
  stroke: var(--on-clay);
}
/* The club console's shell, from Club-tableau-de-bord and Club-formule: a
   252 px sidebar and the page beside it, at 1440 px and down to a laptop.
   The sidebar's width is the design's (no size token is near it); the rest
   snaps to tokens: the 19 px wordmark is display-s, the 36 px Club mark and
   the 40 px links are control-md, 18 px icons space-5, 14 px labels
   body-strong, 12 px lines caption, the 32 px avatar control-sm. The page's
   32 px 40 px padding is space-8 space-10.

   Below 860 px of window (M-60; no design) the console's sidebar is a top
   bar with « Menu », whose panel (the sidebar's sections and footer) opens
   over the page, and the bar stays at the top of the window, under Support
   mode's banner (M-72): see the end of this file. Platform administration's
   shell (AdminLayout) shares these parts without .top nor .collapsible, and
   keeps its sidebar on top. */

._console_1lxas_16 {
  display: flex;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--ink);
}

._sidebar_1lxas_23 {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 252px;
  height: 100dvh;
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  border-right: 1px solid var(--line);
}

._brand_1lxas_37 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  color: var(--ink);
  font: var(--type-display-s);
  letter-spacing: var(--tracking-display-s);
  text-decoration: none;
}

._club_1lxas_48,
._manager_1lxas_49 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
}

._clubMark_1lxas_56 {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-sm);
  background: var(--court);
  color: var(--on-court);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
}

._stack_1lxas_69 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._clubName_1lxas_75,
._managerName_1lxas_76 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._clubName_1lxas_75 {
  font: var(--type-body-strong);
  letter-spacing: var(--tracking-body-strong);
}

._managerName_1lxas_76 {
  font: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-small);
}

._muted_1lxas_93 {
  font: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--ink-muted);
}

._nav_1lxas_99 {
  display: flex;
  flex-direction: column;
}

._navGroup_1lxas_104 {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The design's line between the club's sections and « Réglages du club ». */
._navGroup_1lxas_104 + ._navGroup_1lxas_104::before {
  content: '';
  display: block;
  height: 1px;
  margin: var(--space-3) var(--space-2);
  background: var(--line);
}

._navLink_1lxas_122 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-md);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font: var(--type-body-strong);
  letter-spacing: var(--tracking-body-strong);
  text-decoration: none;

  @media (hover: hover) {
    &:hover {
      color: var(--ink);
    }
  }
}

._current_1lxas_141 {
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}

._navIcon_1lxas_147 {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
}

/* Club-demandes' .count: what waits there (22 px: space-6), in clay. */
._count_1lxas_153 {
  display: inline-grid;
  place-items: center;
  min-width: var(--space-6);
  height: var(--space-6);
  margin-left: auto;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--clay-soft);
  color: var(--clay-ink);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
}

._footer_1lxas_169 {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

._avatar_1lxas_176 {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--control-sm);
  height: var(--control-sm);
  border-radius: var(--radius-pill);
  background: var(--court-soft);
  color: var(--court-ink);
  font: var(--type-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
}

/* No design: a quiet icon button at the end of the Manager's row. */
._signOut_1lxas_191 {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--control-md);
  height: var(--control-md);
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;

  & svg {
    width: var(--space-5);
    height: var(--space-5);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--ink);
    }
  }
}

/* What stays at the top of the window below 860 px (M-72): Support mode's
   banner and the top bar, in one box (see the end of this file). From
   860 px up it is no box of its own: the banner and the sidebar are the
   console's own parts, each sticky, as before. */
._top_1lxas_13 {
  display: contents;
}

/* Support mode (M-19): the banner runs across the top, on a line of its
   own, then the sidebar, sticky right under it, and the page. The banner
   is 48 px (control-lg) in its wide form, more in its compact one, which
   it takes up to 1150 px of banner (M-77): the sidebar sticks under its
   measured height (--console-covered-top, ConsoleLayout), 48 px until
   measured. */
._withBanner_1lxas_231 {
  flex-wrap: wrap;
  align-content: flex-start;

  & ._sidebar_1lxas_23 {
    top: var(--console-covered-top, var(--control-lg));
    height: calc(100dvh - var(--console-covered-top, var(--control-lg)));
  }

  /* Beside the sidebar whatever its content's width: on lines that wrap,
     a page as wide as its content would go under it. */
  & ._main_1lxas_242 {
    flex-basis: 0;
  }
}

/* The banner (SupportBanner), the whole first line; its words keep to it. */
._bannerLine_1lxas_248 {
  flex: 0 0 100%;
  min-width: 0;
}

._avatarIcon_1lxas_253 {
  width: var(--space-4);
  height: var(--space-4);
}

/* From 860 px up, « Menu » is not there, and its panel is no box of its own:
   the sections and the footer are the sidebar's column, as before M-60. */
._menuButton_1lxas_260 {
  display: none;
}

._panel_1lxas_264 {
  display: contents;
}

._backdrop_1lxas_268 {
  display: none;
}

/* What the page brings into view (an anchor, #a-revoir; what takes focus)
   lands below what sticks at the top of the window (M-72): Support mode's
   banner and, below 860 px, the top bar, whose height ConsoleLayout
   measures into --console-covered-top (unset: nothing sticks over the
   page). On the page's parts only, never the bar's: as the page's scroll
   padding, it would count « Menu » as hidden under the bar, and focusing
   it would scroll the page. Of no specificity (:where), so a part with a
   margin of its own wins, and adds this one to it (Dashboard's panels). */
:where(._main_1lxas_242) * {
  scroll-margin-top: var(--console-covered-top, 0);
}

/* Pages lay themselves out by the width they get (container queries), so
   the same page fits beside the sidebar at 1440 px and on a laptop. */
._main_1lxas_242 {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-10);
  container: console-page / inline-size;
}

/* A request for Support write access waits (M-45): on every page but
   « Accès support », above the page's header, a warning with its link. */
._supportAccessNotice_1lxas_298 {
  flex-shrink: 0;
}

._noticeLink_1lxas_302 {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;

  &:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
}

/* Narrower than a laptop (the console is desktop first): the sidebar goes
   on top, and the page below it, so nothing scrolls sideways. */
@media (width < 860px) {
  ._console_1lxas_16 {
    flex-direction: column;
  }

  ._sidebar_1lxas_23 {
    position: static;
    width: auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  ._main_1lxas_242 {
    padding: var(--space-6) var(--space-5);
  }

  ._withBanner_1lxas_231 {
    flex-wrap: nowrap;

    & ._sidebar_1lxas_23 {
      top: auto;
      height: auto;
    }

    & ._main_1lxas_242 {
      flex-basis: auto;
    }
  }

  /* The banner and the top bar stay at the top of the window as the page
     scrolls (M-72, the user's « Keep it at the top while scrolling »,
     #205): one sticky box, so the bar sits under the banner whatever the
     banner's height (compact below 860 px, M-77, but its state's words may
     still wrap). Above the page, whose <main> is a
     stacking context of its own (a container). The open panel hangs from
     it. ConsoleLayout keeps anchors and what takes focus below it (the
     page's parts' scroll margin, above). */
  ._top_1lxas_13 {
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    flex-shrink: 0;
  }

  /* The club console's top bar (M-60): the Club's mark and name, then
     « Menu », 52 px high (the 44 px button, tap-min, with space-1 above
     and below, as the member area's header). Créno's wordmark is left
     out (the Tableau de bord, its link, is the panel's first). On the
     page's ground, which scrolls under it (M-72); not positioned, so the
     panel hangs from the sticky box, under the banner too. */
  ._collapsible_1lxas_13 {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    overflow: visible;
    padding: var(--space-1) var(--space-3);
    background: var(--surface);

    & ._brand_1lxas_37 {
      display: none;
    }

    & ._club_1lxas_48 {
      flex-grow: 1;
      min-width: 0;
      padding-block: 0;
    }
  }

  /* A secondary button: the control border, its icon and its word. Above
     the backdrop, so a tap on it closes the panel as « Menu ». */
  ._menuButton_1lxas_260 {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding: 0 var(--space-4) 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink);
    font: var(--type-body-strong);
    letter-spacing: var(--tracking-body-strong);
    cursor: pointer;

    & svg {
      width: var(--space-5);
      height: var(--space-5);
    }

    &[aria-expanded='true'] {
      background: var(--surface-raised);
    }

    @media (hover: hover) {
      &:hover {
        background: var(--surface-raised);
      }
    }
  }

  /* The panel drops from the bar over the page (a dropdown: shadow-md), on
     the sidebar's own ground, so its current section reads as it does
     there. It hangs from the sticky box (M-72), right under the bar's own
     line, so it stays there as the page scrolls; taller than what is left
     of the window (a phone held sideways), it scrolls on its own, and
     never the page with it. Under Support mode's banner (z-index 2). Shown
     only while open; nothing animates. */
  ._panel_1lxas_264 {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    gap: var(--space-5);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-md);

    & > * {
      flex-shrink: 0;
    }
  }

  ._open_1lxas_451 {
    display: flex;
  }

  /* While the panel is open, a transparent layer over the page, under the
     panel and « Menu » (both later at the same z-index): a tap there closes
     the panel and reaches nothing behind it. Not a scrim: the page is not
     set aside (a disclosure, not a modal), only kept from the tap. Support
     mode's banner stays above it. Nothing animates. */
  ._backdrop_1lxas_268 {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    background: transparent;
  }
}
/* Platform administration's shell (M-18) is the console's
   (ConsoleLayout.module.css); its own part: the icon where the console shows
   the Club's mark, 20 px (space-5). */

._markIcon_1am1k_5 {
  width: var(--space-5);
  height: var(--space-5);
}
/* What the console and the member app say back (M-61): an error, a warning,
   a success, or a neutral note. Each kind is a pair of tokens the design
   system documents together (its ground and its ink, at least 6.5:1 in both
   themes), a 1 px edge in its own colour so the notice stands out from the
   page in Jour as in Nuit (4.7:1 or more), and its icon (Notice.tsx).
   Danger red is also
   the colour of destructive buttons: the tokens pair both uses.

   The layout rules are in :where(), so a caller's class (a sticky bar, a
   line in a card) sets its own place, padding and corners whatever the
   order the style sheets load in; the colours are the kind's alone. */

:where(._notice_1ak2p_13) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-md);
  font: var(--type-small);
  letter-spacing: var(--tracking-small);
}

:where(._icon_1ak2p_25) {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  /* Its top on the first line of words (type-small's 18 px line). */
  margin-top: calc(var(--space-1) / 4);
}

:where(._body_1ak2p_33) {
  display: block;
  min-width: 0;
}

:where(div._notice_1ak2p_13) > :where(._body_1ak2p_33) {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* An outcome with a title: Mes réservations' and Réserver's. */
:where(._large_1ak2p_45) {
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  font: var(--type-body);
  letter-spacing: var(--tracking-body);

  & :where(._icon_1ak2p_25) {
    width: var(--space-6);
    height: var(--space-6);
    margin-top: 0;
  }
}

/* The kinds: ground, words and icon, edge. */
._error_1ak2p_60 {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger-ink);
}

/* Amber (M-61's review): clay is the primary action and the selected
   state, and its ink and ground are too close to danger's to tell a
   warning from an error. The Guest-token amber is 7.07:1 in Jour, 7.50:1
   in Nuit. */
._warning_1ak2p_70 {
  border-color: var(--token);
  background: var(--token-soft);
  color: var(--token-ink);
}

._success_1ak2p_76 {
  border-color: var(--court);
  background: var(--court-soft);
  color: var(--court-ink);
}

._info_1ak2p_82 {
  border-color: var(--line);
  background: var(--surface-sunken);
  color: var(--ink);
}
/* The licence's notice at the top of a console page (M-28): it keeps its
   height in the page's column, as Support write access's request does. */
._notice_1t73a_3 {
  flex-shrink: 0;
}

/* « Créno », a mailto: link in the notice's own ink. */
._link_1t73a_8 {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;

  &:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
}
/* A confirmation in the club console (no design): Club-formule's panel as
   a box in the middle of the dimmed page, the console's title type, then
   « Annuler » (the save bar's quiet button) and the action, clay or, for a
   destructive one, danger red.

   Sizes snap to tokens: at most a sheet wide (560 px), 24 px padding
   space-6, 22 px title display-s, 40 px buttons control-md. */

._dialog_190j7_9 {
  width: calc(100% - 2 * var(--space-6));
  max-width: var(--sheet-max);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-md);

  &::backdrop {
    background: var(--overlay);
  }
}

._frame_190j7_24 {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

._title_190j7_31 {
  font: var(--type-display-s);
  letter-spacing: var(--tracking-display-s);
}

._body_190j7_36 {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font: var(--type-body);
  letter-spacing: var(--tracking-body);

  & p,
  & ul {
    margin: 0;
  }

  & ul {
    padding-left: var(--space-5);
  }
}

._actions_190j7_53 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

._cancel_190j7_61,
._primary_190j7_62,
._danger_190j7_63 {
  display: inline-flex;
  align-items: center;
  height: var(--control-md);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  font: var(--type-body-strong);
  letter-spacing: var(--tracking-body-strong);
  white-space: nowrap;
  cursor: pointer;

  &:disabled {
    cursor: default;
  }

  &[aria-busy='true'] {
    cursor: progress;
  }
}

._cancel_190j7_61 {
  background: transparent;
  color: var(--clay-ink);

  &:disabled {
    color: var(--ink-faint);
  }
}

._primary_190j7_62 {
  background: var(--clay);
  color: var(--on-clay);

  @media (hover: hover) {
    &:hover:enabled {
      background: var(--clay-hover);
    }
  }
}

._danger_190j7_63 {
  background: var(--danger);
  color: var(--on-danger);
}

/* Not offered yet (M-20: until the Club's address is typed), not busy. */
._primary_190j7_62:disabled:not([aria-busy='true']),
._danger_190j7_63:disabled:not([aria-busy='true']) {
  background: var(--surface-sunken);
  color: var(--ink-faint);
}
/* The club console's form parts, from Club-formule: panels (fieldsets) with
   a legend, labels over native controls (select, number input with its
   unit), hints, two columns that stack when the page is narrow, and the
   save bar that stays in view. Every console form imports these.

   Sizes snap to tokens: the 17 px legends are subtitle, 13 px labels small
   (600), 12 px hints caption, the 40 px controls control-md, the 6 px label
   gap space-2, the 14 px option padding space-3.

   Colours: one clay fill per screen, the save button. What a form says back
   is a Notice (src/components/Notice, M-61): an error in danger red, a
   warning in clay, a success in court green. A field in error has a danger
   border and its message (.fieldError) danger ink, with its icon. */

._columns_1l6uz_15 {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

._stack_1l6uz_22 {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

._panel_1l6uz_29 {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* A fieldset's legend sits inside its panel, as the design floats it. */
._legend_1l6uz_42,
._panelTitle_1l6uz_43 {
  float: left;
  width: 100%;
  padding: 0;
  font: var(--type-subtitle);
  letter-spacing: var(--tracking-subtitle);
}

._panelHint_1l6uz_51 {
  margin-top: calc(-1 * var(--space-2));
  font: var(--type-small);
  letter-spacing: var(--tracking-small);
  color: var(--ink-muted);
}

._fields_1l6uz_58 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

._label_1l6uz_64 {
  display: block;
  margin-bottom: var(--space-2);
  font: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-small);
}

._hint_1l6uz_72 {
  margin-top: var(--space-2);
  font: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--ink-muted);
}

._select_1l6uz_79 {
  width: 100%;
  height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font: var(--type-body);
  letter-spacing: var(--tracking-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;

  &[aria-invalid='true'] {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
  }
}

/* A line of text (a court's name): Club-formule's .inp. */
._input_1l6uz_98 {
  width: 100%;
  height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font: var(--type-body);
  letter-spacing: var(--tracking-body);

  &[aria-invalid='true'] {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
  }
}

/* Choices as Club-formule's .opt cards: a native radio or checkbox and its
   words, clay once chosen. */
._options_1l6uz_116 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-16) * 2), 1fr));
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;

  & > legend {
    padding: 0;
  }
}

._option_1l6uz_116 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-md);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font: var(--type-body-strong);
  letter-spacing: var(--tracking-body-strong);
  cursor: pointer;

  & input {
    flex-shrink: 0;
    width: var(--space-5);
    height: var(--space-5);
    margin: 0;
    accent-color: var(--clay);
  }

  &:has(:checked) {
    border-color: var(--clay);
    background: var(--clay-soft);
    box-shadow: inset 0 0 0 1px var(--clay);
  }

  /* A choice the form refuses (none of the sports, a court gone): its
     border says so, the message under the group says why. */
  &:has(input[aria-invalid='true']) {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
  }
}

/* A number and its unit: the focus ring goes round both. */
._unit_1l6uz_166 {
  display: flex;
  align-items: center;
  height: var(--control-md);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);

  &:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  &:has(input[aria-invalid='true']) {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
  }

  & input {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    padding: 0 var(--space-3);
    border: 0;
    background: transparent;
    font: var(--type-body);
    letter-spacing: var(--tracking-body);
    font-variant-numeric: tabular-nums;

    &:focus-visible {
      outline: none;
    }
  }
}

._unitName_1l6uz_202 {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 var(--space-3);
  border-left: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-small);
  white-space: nowrap;
}

/* Why a field is refused, under it: danger ink, with WarningCircle. */
._fieldError_1l6uz_13 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-small);
  color: var(--danger-ink);

  & svg {
    flex-shrink: 0;
    width: var(--space-4);
    height: var(--space-4);
  }
}

/* While the form's data loads. */
._loading_1l6uz_235 {
  color: var(--ink-muted);
}

/* The outcome (a Notice) and the save bar stay in view at the bottom of
   the page. */
._saveArea_1l6uz_241 {
  position: sticky;
  bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Club-formule's bar: what the form says, then « Annuler » and the save. */
._saveBar_1l6uz_250 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}

._saveSummary_1l6uz_261 {
  flex-grow: 1;
  min-width: 0;
  font: var(--type-small);
  letter-spacing: var(--tracking-small);
  color: var(--ink-muted);
}

._quiet_1l6uz_269,
._primary_1l6uz_270 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: var(--control-md);
  border: 0;
  font: var(--type-body-strong);
  letter-spacing: var(--tracking-body-strong);
  white-space: nowrap;
  cursor: pointer;
}

._quiet_1l6uz_269 {
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--clay-ink);

  &:disabled {
    color: var(--ink-faint);
    cursor: default;
  }
}

._primary_1l6uz_270 {
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--clay);
  color: var(--on-clay);

  @media (hover: hover) {
    &:hover:enabled {
      background: var(--clay-hover);
    }
  }

  &[aria-busy='true'] {
    cursor: progress;
  }

  /* Unavailable, not busy: the admin site's sign-in and « Changer mon mot de
     passe » while a wait after failures runs (M-49). */
  &:disabled:not([aria-busy='true']) {
    background: var(--surface-sunken);
    color: var(--ink-muted);
    cursor: not-allowed;
  }
}

/* Laid out by the width the page gets beside the sidebar. */
@container console-page (width < 760px) {
  ._columns_1l6uz_15 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container console-page (width < 520px) {
  ._fields_1l6uz_58 {
    grid-template-columns: minmax(0, 1fr);
  }

  ._saveBar_1l6uz_250 {
    flex-wrap: wrap;
  }
}
/* Support mode (M-19; no design: the console's own parts). The banner
   runs across the top of the console, sticky, in ink on the page's colour
   reversed, so it never reads as the Club's own: 48 px high (control-lg),
   14 px words (body-strong, small), its one action outlined. Its buttons'
   focus ring is in the band's words' colour (M-77): the focus blue is
   about 2.5:1 on ink in Jour and 1.9:1 in Nuit, the page's ground
   reversed at least 13.8:1. The note on a page whose decisions stay the
   Managers' is a console notice.

   Its form follows its own width (M-77), not the window's: the band is a
   container (support-banner), and its line (.bar) is the wide form below
   while all of it fits, the compact one (see the end of this file) once
   it would not. 1150 px is where the wide form's longest state fits, with
   a long email: « Lecture seule » and « Demander l’accès en écriture »
   (102 and 206 px; the write access ending in another year, « … jusqu’au
   29 novembre 2027 à 06:03 », is 295 px) beside the title (166 px), a
   34-character email (226 px), « jusqu’à 07:03 » (79 px) and « Quitter le
   mode support » (197 px): 1134 px in all, measured in Schibsted Grotesk.
   A longer email is cut short (its title says it whole); the words never
   run under the next part (.text clips). compactBanner.ts's
   COMPACT_BANNER_BELOW is the same number, for what the CSS cannot switch
   (the buttons' titles, the short date). */

._banner_185lo_24 {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink);
  color: var(--surface);
  container: support-banner / inline-size;
}

/* The wide form (M-19, M-45): one line, 48 px. */
._bar_185lo_11 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--control-lg);
  padding: 0 var(--space-6);
}

._mark_185lo_42 {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
}

._text_185lo_20 {
  display: flex;
  flex-grow: 1;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  overflow: hidden;
  margin: 0;
  font: var(--type-small);
  letter-spacing: var(--tracking-small);
  white-space: nowrap;
}

._title_185lo_61 {
  font: var(--type-body-strong);
  letter-spacing: var(--tracking-body-strong);
}

._email_185lo_66 {
  overflow: hidden;
  text-overflow: ellipsis;
}

._until_185lo_71 {
  flex-shrink: 0;
}

/* What Support mode may do (M-45): « Lecture seule » or « Demande
   envoyée, en attente » as an outlined pill, then « Demander l’accès en
   écriture », the banner's one filled button; or the write access's end,
   in words. At the end, beside the way out (.text grows). */
._access_185lo_79 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font: var(--type-small);
  letter-spacing: var(--tracking-small);
  white-space: nowrap;
}

._pill_185lo_90 {
  display: inline-flex;
  align-items: center;
  height: var(--space-6);
  padding: 0 var(--space-3);
  border: 1px solid var(--surface);
  border-radius: var(--radius-pill);
  font: var(--type-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-caption);
}

._writable_185lo_102 {
  font-weight: 600;
}

._ask_185lo_106 {
  display: inline-flex;
  align-items: center;
  height: var(--control-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--surface);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-small);
  cursor: pointer;

  &:focus-visible {
    outline: 2px solid var(--surface);
    outline-offset: 2px;
  }

  @media (hover: hover) {
    &:hover {
      background: transparent;
      color: var(--surface);
    }
  }
}

/* « Demander l’accès en écriture »'s icon: in the compact form only,
   where the button is the icon alone (its words are its name). */
._askIcon_185lo_135 {
  display: none;
}

/* The hours asked for, in the request's dialog: a number and its unit. */
._hours_185lo_140 {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: var(--sheet-max);
}

._leave_185lo_147 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--surface);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--surface);
  font: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-small);
  cursor: pointer;

  & svg {
    width: var(--space-4);
    height: var(--space-4);
  }

  &:focus-visible {
    outline: 2px solid var(--surface);
    outline-offset: 2px;
  }

  @media (hover: hover) {
    &:hover {
      background: var(--surface);
      color: var(--ink);
    }
  }

  &:disabled {
    cursor: progress;
  }
}

/* « Entrée en mode support » and « La session de support a pris fin », at
   the Club's address: ClubNotFound's page. */
._page_185lo_187 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 100dvh;
  padding: var(--space-6) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
}

._icon_185lo_200 {
  width: var(--control-lg);
  height: var(--control-lg);
  color: var(--ink-muted);
}

._pageTitle_185lo_206 {
  margin: 0;
  font: var(--type-display-m);
  letter-spacing: var(--tracking-display-m);
}

._message_185lo_212 {
  max-width: var(--sheet-max);
  margin: 0;
  color: var(--ink-muted);
}

._back_185lo_218 {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  background: var(--clay);
  color: var(--on-clay);
  font: var(--type-body-strong);
  letter-spacing: var(--tracking-body-strong);
  text-decoration: none;

  @media (hover: hover) {
    &:hover {
      background: var(--clay-hover);
    }
  }
}

/* The compact form (M-77; no design), wherever the wide one would not fit
   (a phone, a tablet, a narrow laptop window): two lines, nothing past the
   screen's edge. The shield, then the administrator's email (cut short,
   whole in its title) and when the session ends, what Support mode may do
   under them, and the two buttons as icons beside both (tap-min, their
   words their name). The title « Mode support · Créno » leads the first
   line where the banner has room for it (600 px), and is for screen
   readers only on a phone (visually-hidden's rule, inside the banner, its
   containing block). 54 px high on a phone, 58 px with its title; the
   write access's end in another year wraps on a third line on a phone
   narrower than about 380 px (62 px). */
@container support-banner (width < 1150px) {
  ._bar_185lo_11 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      'mark who ask leave'
      'mark state ask leave';
    align-items: center;
    gap: 0;
    height: auto;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  }

  ._mark_185lo_42 {
    grid-area: mark;
    margin-right: var(--space-3);
  }

  ._text_185lo_20 {
    grid-area: who;
    align-self: end;
    gap: var(--space-2);
  }

  /* Its parts are the banner's own: the state on the second line, the
     button with the other. */
  ._access_185lo_79 {
    display: contents;
  }

  ._pill_185lo_90,
  ._writable_185lo_102 {
    grid-area: state;
    justify-self: start;
    align-self: start;
    max-width: 100%;
    margin-top: var(--space-1);
  }

  /* The write access's end, in words, its month short (« 24 nov. »,
     SupportBanner), at the pills' size: one line on a phone; on two even
     lines if it must still wrap (a year's end, a narrower phone), never
     past the edge. */
  ._writable_185lo_102 {
    font: var(--type-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-caption);
    white-space: normal;
    text-wrap: balance;
  }

  ._ask_185lo_106,
  ._leave_185lo_147 {
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    margin-left: var(--space-1);
    padding: 0;

    & svg {
      width: var(--space-5);
      height: var(--space-5);
    }
  }

  ._ask_185lo_106 {
    grid-area: ask;
  }

  ._leave_185lo_147 {
    grid-area: leave;
  }

  ._askIcon_185lo_135 {
    display: block;
  }

  ._words_185lo_325 {
    display: none;
  }
}

/* A phone: the title for screen readers only (the band and its shield say
   it on screen). */
@container support-banner (width < 600px) {
  ._title_185lo_61 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* « Accès réservé aux responsables » (no design): ClubNotFound's centred
   page, with an icon, the member area as the way on and sign-out beside it.
   No clay fill: nothing here is the screen's purpose to act on. */

._page_1gbgm_5 {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-5);
  text-align: center;
}

._icon_1gbgm_16 {
  width: var(--control-md);
  height: var(--control-md);
  color: var(--ink-muted);
}

._title_1gbgm_22 {
  font: var(--type-display-m);
  letter-spacing: var(--tracking-display-m);
}

._message_1gbgm_27 {
  max-width: var(--sheet-max);
  color: var(--ink-muted);
}

._actions_1gbgm_32 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

._memberArea_1gbgm_40,
._signOut_1gbgm_41 {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font: var(--type-body-strong);
  letter-spacing: var(--tracking-body-strong);
  text-decoration: none;
  cursor: pointer;
}

._memberArea_1gbgm_40 {
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
}

._signOut_1gbgm_41 {
  border: 0;
  background: transparent;
  color: var(--clay-ink);
}
/* The member area's frame, from Reserver-calendrier and Mes-reservations:
   header (Club, member, avatar) and the « Réserver / Mes réservations »
   switch. Off-token sizes snap to tokens (PRD §6): the 56 px header is a
   44 px button with space-1 above and below, the 26 px mark 24 px, the
   36 px avatar 40 px, the 34 px switch 44 px (touch target). */

._screen_1qg2k_7 {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: var(--sheet-max);
  margin: 0 auto;
  background: var(--surface);
  color: var(--ink);
}

._header_1qg2k_17 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-5);
  border-bottom: 1px solid var(--line);
}

._who_1qg2k_25 {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

._club_1qg2k_32 {
  overflow: hidden;
  font: var(--type-body-strong);
  letter-spacing: var(--tracking-body-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

._member_1qg2k_40 {
  overflow: hidden;
  font: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

._avatar_1qg2k_49 {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-pill);
  background: var(--court-soft);
  color: var(--court-ink);
  font: var(--type-small);
  font-weight: 700;
  letter-spacing: var(--tracking-small);
}

/* No design: quiet icon buttons beside the avatar (sign-out, and the club
   console for a Manager). */
._iconButton_1qg2k_65 {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;

  & svg {
    width: var(--space-5);
    height: var(--space-5);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--ink);
    }
  }
}

._main_1qg2k_90 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5) 0;
}

._nav_1qg2k_98 {
  align-self: flex-start;
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}

._navLink_1qg2k_107 {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font: var(--type-small);
  font-weight: 700;
  letter-spacing: var(--tracking-small);
  text-decoration: none;
}

._navLinkActive_1qg2k_120 {
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}