@charset "UTF-8";
/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
@import "../styles/palettes.css";
/* 60px */
/* 72px */
/* -1.2px */
/* 48px */
/* 57.6px */
/* -0.96px */
/* 40px */
/* 48px */
/* -0.8px */
/* 32px */
/* 38.4px */
/* -0.64px */
/* 24px */
/* 28.8px */
/* -0.48px */
/* 20px */
/* 24px */
/* -0.4px */
/* 12px */
/* 21px */
/* 0.24px */
/* 16px */
/* 25.6px */
/* 0.32px */
/* 20px */
/* 32px */
/* 0.4px */
/* 528px */
/* 240px — ratios spec */
/* 6px — focus dropdown spec */
/* 280px */
/* 16px */
/* 8px */
/* ~336px */
/* 42px — bouton dans carte spec */
/* 12px */
/* 12px */
/* 16px */
/* 24px */
/* 32px — icon 20px + padding */
/* 20px */
/* 448px */
/* 16px */
/* 16px */
/* 24px */
/* 384px */
/* 512px */
/* 672px */
/* 44px touch target */
/* 24px */
/* 24px — slots */
/* 139px — spec Slot */
/* 12px */
/* 415px */
/* 512px */
/* 187px */
/* 576px — media + copy row */
/* 180px — portrait thumb (3:4) */
/* 8px */
/* 12px */
/* 8px */
/* 32px */
/* 12px */
/* burger + drawer below this width */
/* 12px */
/* 8px */
/* 8px */
/* 16px */
/* 2px */
/* 328px */
/* 280px */
/* 240px */
/* 24px */
/* 8px */
/* 12px */
/* 12px */
/* 20px */
/* 4px */
/* 16px */
/* 24px */
/* 48px */
/* 16px */
/* 4px */
/* 328px */
/* 280px — matches $field-width */
/* ~408px — spec HR */
/* 16px */
/* 12px */
/* 12px */
/* 12px */
/* 50px */
/* 20px */
/* 4px */
/* 16px */
/* 8px */
/* 8px */
/* 20px */
/* 44px */
/* 8px */
/* 12px */
/* 48px */
/* 80px */
/* 24px */
/* 640px */
/* 16px */
/* 48px */
/* 12px */
/* 24px */
/* 2px */
/* 4px */
/* 12px */
/* 2px */
/* 20px */
/* 4px */
/* 16px */
/* 12px */
/* 4px */
/* 2px */
/* 20px */
/* 12px */
/* 4px */
/* 4px */
/* 8px */
/* 4px */
/* 6px */
/* 16px */
/* 6px */
/* 5px */
/* 4px */
/* 3px */
/* distance centre → point */
/* 16px — heading → items */
/* 8px */
/* 12px */
/* 4px */
/* 4px */
/* 24px */
/* 16px */
/* 24px */
/* 8px */
/* 12px */
/* 4px */
/* 16px */
/* 16px — same as level-2; .tree__toggle-spacer covers the 24px chevron */
/* 7px */
/* 4px */
/* 24px */
/* 20px */
/* 4px */
/* 256px */
/* 512px */
/* 64px */
/* 128px */
/* 511px */
/* 16px */
/* 20px */
/* 16px */
/* 4px */
/* 24px */
/* 20px */
/* 32px — icon 16px + padding */
/* 16px */
/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
:root {
  --accent-100: #fff4e8;
  --accent-200: #ffe0b8;
  --accent-300: #ffc77a;
  --accent-400: #ffad42;
  --accent-500: #f5921a;
  --accent-600: #d97a12;
  --accent-700: #b36210;
  --accent-800: #874a0c;
  --accent-900: #5c3208;
  --accent-default: var(--accent-500);
  --error-100: #ffeceb;
  --error-200: #ffc4be;
  --error-300: #ff8a7a;
  --error-400: #e85a4a;
  --error-450: #c94438;
  --error-500: #b32d24;
  --error-600: #94231c;
  --error-700: #751b16;
  --error-800: #561410;
  --error-900: #380d0a;
  --error-default: var(--error-500);
  --information-100: #e8f7fc;
  --information-200: #b8e8f8;
  --information-300: #6ecde8;
  --information-400: #2aafd4;
  --information-500: #0d8fb8;
  --information-600: #0a7699;
  --information-700: #085f7a;
  --information-800: #06455a;
  --information-900: #042d3c;
  --information-default: var(--information-500);
  --neutral-100: #faf8f4;
  --neutral-200: #efe9df;
  --neutral-300: #d9d0c4;
  --neutral-400: #b8aea0;
  --neutral-450: #968c80;
  --neutral-500: #5c6478;
  --neutral-600: #4a5162;
  --neutral-700: #3a404f;
  --neutral-800: #2a2f3c;
  --neutral-900: #161a26;
  --neutral-black: #000000;
  --neutral-white: #ffffff;
  --neutral-default: var(--neutral-500);
  --primary-100: #dff6f4;
  --primary-200: #a8e8e2;
  --primary-300: #5ec9be;
  --primary-400: #2ba89c;
  --primary-500: #1a8f84;
  --primary-600: #0f766e;
  --primary-700: #0c5f59;
  --primary-800: #094a46;
  --primary-900: #063532;
  --primary-default: var(--primary-500);
  --success-100: #e5f8e8;
  --success-200: #b8ebc4;
  --success-300: #7ad492;
  --success-400: #42b864;
  --success-500: #1f9a47;
  --success-600: oklch(52% 0.16 142deg);
  --success-650: #1a7a3a;
  --success-700: #156530;
  --success-800: #0e451f;
  --success-900: #082a13;
  --success-default: var(--success-500);
  --warning-100: #fff5e8;
  --warning-200: #ffe2bc;
  --warning-300: #ffc888;
  --warning-400: #ffad52;
  --warning-500: #f08f28;
  --warning-600: #d47820;
  --warning-700: #a85c18;
  --warning-800: #7a4210;
  --warning-900: #4d2a0a;
  --warning-default: var(--warning-500);
  /* Semantic color aliases */
  --color-blue-900: var(--primary-900);
  --color-yellow-100: var(--accent-100);
  --color-yellow-900: var(--accent-900);
  --color-grey-100: var(--neutral-100);
  --color-grey-900: var(--neutral-900);
  --color-azure-100: var(--information-100);
  --color-azure-900: var(--information-900);
}

@supports not (color: oklch(0% 0 0deg)) {
  :root {
    --accent-100: #fff4e8;
    --accent-200: #ffe0b8;
    --accent-300: #ffc77a;
    --accent-400: #ffad42;
    --accent-500: #f5921a;
    --accent-600: #d97a12;
    --accent-700: #b36210;
    --accent-800: #874a0c;
    --accent-900: #5c3208;
    --accent-default: var(--accent-500);
    --error-100: #ffeceb;
    --error-200: #ffc4be;
    --error-300: #ff8a7a;
    --error-400: #e85a4a;
    --error-450: #c94438;
    --error-500: #b32d24;
    --error-600: #94231c;
    --error-700: #751b16;
    --error-800: #561410;
    --error-900: #380d0a;
    --error-default: var(--error-500);
    --information-100: #e8f7fc;
    --information-200: #b8e8f8;
    --information-300: #6ecde8;
    --information-400: #2aafd4;
    --information-500: #0d8fb8;
    --information-600: #0a7699;
    --information-700: #085f7a;
    --information-800: #06455a;
    --information-900: #042d3c;
    --information-default: var(--information-500);
    --neutral-100: #faf8f4;
    --neutral-200: #efe9df;
    --neutral-300: #d9d0c4;
    --neutral-400: #b8aea0;
    --neutral-450: #968c80;
    --neutral-500: #5c6478;
    --neutral-600: #4a5162;
    --neutral-700: #3a404f;
    --neutral-800: #2a2f3c;
    --neutral-900: #161a26;
    --neutral-black: #000000;
    --neutral-white: #ffffff;
    --neutral-default: var(--neutral-500);
    --primary-100: #dff6f4;
    --primary-200: #a8e8e2;
    --primary-300: #5ec9be;
    --primary-400: #2ba89c;
    --primary-500: #1a8f84;
    --primary-600: #0f766e;
    --primary-700: #0c5f59;
    --primary-800: #094a46;
    --primary-900: #063532;
    --primary-default: var(--primary-500);
    --success-100: #e5f8e8;
    --success-200: #b8ebc4;
    --success-300: #7ad492;
    --success-400: #42b864;
    --success-500: #1f9a47;
    --success-650: #1a7a3a;
    --success-700: #156530;
    --success-800: #0e451f;
    --success-900: #082a13;
    --success-default: var(--success-500);
    --warning-100: #fff5e8;
    --warning-200: #ffe2bc;
    --warning-300: #ffc888;
    --warning-400: #ffad52;
    --warning-500: #f08f28;
    --warning-600: #d47820;
    --warning-700: #a85c18;
    --warning-800: #7a4210;
    --warning-900: #4d2a0a;
    --warning-default: var(--warning-500);
  }
}
/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
@font-face {
  font-family: "Zodiak";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Zodiak-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Italic.woff2") format("woff2");
}
:root {
  --font-family-heading: Zodiak, Georgia, Times New Roman, serif;
  --font-family-body: Plus Jakarta Sans, Segoe UI, system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-size-heading-h1: 3.75rem;
  --line-height-heading-h1: 4.5rem;
  --letter-spacing-heading-h1: -0.075rem;
  --font-size-heading-h2: 3rem;
  --line-height-heading-h2: 3.6rem;
  --letter-spacing-heading-h2: -0.06rem;
  --font-size-heading-h3: 2.5rem;
  --line-height-heading-h3: 3rem;
  --letter-spacing-heading-h3: -0.05rem;
  --font-size-heading-h4: 2rem;
  --line-height-heading-h4: 2.4rem;
  --letter-spacing-heading-h4: -0.04rem;
  --font-size-heading-h5: 1.5rem;
  --line-height-heading-h5: 1.8rem;
  --letter-spacing-heading-h5: -0.03rem;
  --font-size-heading-h6: 1.25rem;
  --line-height-heading-h6: 1.5rem;
  --letter-spacing-heading-h6: -0.025rem;
  --font-size-body-small: 0.75rem;
  --line-height-body-small: 1.3125rem;
  --letter-spacing-body-small: 0.015rem;
  --font-size-body-medium: 1rem;
  --line-height-body-medium: 1.6rem;
  --letter-spacing-body-medium: 0.02rem;
  --font-size-body-large: 1.25rem;
  --line-height-body-large: 2rem;
  --letter-spacing-body-large: 0.025rem;
  --font-size-caption: 0.875rem;
  --line-height-caption: 1.53125rem;
  --letter-spacing-caption: 0.0175rem;
}

.heading-h1 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--text-headings);
  font-size: var(--font-size-heading-h1);
  line-height: var(--line-height-heading-h1);
  letter-spacing: var(--letter-spacing-heading-h1);
}

.heading-h2 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--text-headings);
  font-size: var(--font-size-heading-h2);
  line-height: var(--line-height-heading-h2);
  letter-spacing: var(--letter-spacing-heading-h2);
}

.heading-h3 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--text-headings);
  font-size: var(--font-size-heading-h3);
  line-height: var(--line-height-heading-h3);
  letter-spacing: var(--letter-spacing-heading-h3);
}

.heading-h4 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--text-headings);
  font-size: var(--font-size-heading-h4);
  line-height: var(--line-height-heading-h4);
  letter-spacing: var(--letter-spacing-heading-h4);
}

.heading-h5 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--text-headings);
  font-size: var(--font-size-heading-h5);
  line-height: var(--line-height-heading-h5);
  letter-spacing: var(--letter-spacing-heading-h5);
}

.heading-h6 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--text-headings);
  font-size: var(--font-size-heading-h6);
  line-height: var(--line-height-heading-h6);
  letter-spacing: var(--letter-spacing-heading-h6);
}

.body-small {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  color: var(--text-body);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  letter-spacing: var(--letter-spacing-body-small);
}

.body-medium {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  color: var(--text-body);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
}

.body-large {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  color: var(--text-body);
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--letter-spacing-body-large);
}

.body-medium--semibold {
  font-weight: var(--font-weight-semi-bold);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --border-radius-4: 0.25rem;
  --border-radius-8: 0.5rem;
  --border-radius-16: 1rem;
  --border-radius-6: 0.375rem;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-radius-round: 128px;
  --border-primary: var(--neutral-200);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
:root {
  --shadow-color-elevation: oklch(40.3% 0.03 262deg);
  --shadow-color-inset-drop: oklch(61% 0.03 262deg);
  --shadow-inset: 0 1px 0 oklch(61% 0.03 262deg / 0.15), inset 0 2px 2px oklch(0% 0 0deg / 0.1);
  --shadow-xs: 0 1px 2px oklch(40.3% 0.03 262deg / 0.14), 0 1px 1px oklch(40.3% 0.03 262deg / 0.08);
  --shadow-sm: 0 2px 6px oklch(40.3% 0.03 262deg / 0.16), 0 1px 3px oklch(40.3% 0.03 262deg / 0.12);
  --shadow-md: 0 6px 16px oklch(40.3% 0.03 262deg / 0.18), 0 2px 6px oklch(40.3% 0.03 262deg / 0.12);
  --shadow-lg: 0 12px 28px oklch(40.3% 0.03 262deg / 0.22), 0 4px 12px oklch(40.3% 0.03 262deg / 0.14);
  --shadow-xl: 0 20px 48px oklch(40.3% 0.03 262deg / 0.28), 0 8px 20px oklch(40.3% 0.03 262deg / 0.18);
}

[data-theme=dark] {
  --shadow-color-elevation: oklch(0% 0 0);
  --shadow-xs: 0 1px 3px oklch(0% 0 0 / 0.5), 0 1px 2px oklch(0% 0 0 / 0.35);
  --shadow-sm: 0 3px 8px oklch(0% 0 0 / 0.55), 0 2px 4px oklch(0% 0 0 / 0.4);
  --shadow-md: 0 8px 20px oklch(0% 0 0 / 0.6), 0 4px 10px oklch(0% 0 0 / 0.45);
  --shadow-lg: 0 14px 32px oklch(0% 0 0 / 0.68), 0 6px 16px oklch(0% 0 0 / 0.5);
  --shadow-xl: 0 22px 50px oklch(0% 0 0 / 0.78), 0 10px 24px oklch(0% 0 0 / 0.58);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --shadow-color-elevation: oklch(0% 0 0);
    --shadow-xs: 0 1px 3px oklch(0% 0 0 / 0.5), 0 1px 2px oklch(0% 0 0 / 0.35);
    --shadow-sm: 0 3px 8px oklch(0% 0 0 / 0.55), 0 2px 4px oklch(0% 0 0 / 0.4);
    --shadow-md: 0 8px 20px oklch(0% 0 0 / 0.6), 0 4px 10px oklch(0% 0 0 / 0.45);
    --shadow-lg: 0 14px 32px oklch(0% 0 0 / 0.68), 0 6px 16px oklch(0% 0 0 / 0.5);
    --shadow-xl: 0 22px 50px oklch(0% 0 0 / 0.78), 0 10px 24px oklch(0% 0 0 / 0.58);
  }
}
/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
:root {
  color-scheme: light;
  --surface-page: var(--neutral-100);
  --surface-action: var(--primary-600);
  --surface-action-hover: var(--primary-700);
  --surface-disabled: var(--neutral-100);
  --surface-muted: var(--neutral-100);
  --surface-elevated: var(--neutral-white);
  --surface-primary: var(--neutral-white);
  --text-body: var(--neutral-600);
  --text-disabled: var(--neutral-450);
  --text-filled: var(--neutral-900);
  --text-heading: var(--neutral-900);
  --text-headings: var(--neutral-800);
  --text-on-action: var(--neutral-100);
  --text-action: var(--primary-700);
  --text-on-disabled: var(--neutral-700);
  --text-muted: var(--neutral-450);
  --text-inverse: var(--neutral-100);
  --text-information: var(--information-700);
  --text-success: var(--success-700);
  --text-warning: var(--warning-800);
  --text-error: var(--error-700);
  --border-default: var(--border-primary);
  --border-action: var(--primary-default);
  --border-focus: var(--primary-500);
  --border-error: var(--error-500);
  --border-success: var(--success-500);
  --border-active: var(--border-action-hover);
  --border-hover: var(--neutral-400);
  --border-disabled: var(--neutral-300);
  --border-action-hover: var(--primary-600);
  --surface-action-hover-2: var(--primary-100);
  --surface-disabled-selected: var(--neutral-600);
  --surface-error: var(--error-100);
  --border-error-input: var(--error-500);
  --icon-on-action: var(--text-on-action);
  --icon-information: var(--information-500);
  --icon-success: var(--success-650);
  --icon-warning: var(--warning-500);
  --icon-error: var(--error-500);
  --surface-information: var(--information-100);
  --surface-success: var(--success-100);
  --surface-warning: var(--warning-100);
  --text-on-information: var(--information-800);
  --text-on-success: var(--success-800);
  --text-on-warning: var(--warning-900);
  --text-on-error: var(--error-800);
  --border-information: var(--information-300);
  --border-success: var(--success-300);
  --border-warning: var(--warning-300);
  --border-error-soft: var(--error-300);
  --field-width: 17.5rem;
  --field-width-defined: 26.875rem;
  --field-padding-x: 0.75rem;
  --field-padding-y: 0.5rem;
  --field-gap: 0.5rem;
  --field-min-height: 2.75rem;
  --field-icon-size: 1.5rem;
}

[data-theme=dark] {
  color-scheme: dark;
  --surface-page: var(--neutral-900);
  --surface-action: var(--primary-600);
  --surface-action-hover: var(--primary-700);
  --surface-disabled: var(--neutral-800);
  --surface-muted: var(--neutral-800);
  --surface-elevated: var(--neutral-800);
  --surface-primary: var(--neutral-800);
  --text-body: var(--neutral-200);
  --text-disabled: var(--neutral-500);
  --text-filled: var(--neutral-100);
  --text-heading: var(--neutral-100);
  --text-headings: var(--neutral-200);
  --text-on-action: var(--neutral-100);
  --text-action: var(--primary-300);
  --text-on-disabled: var(--neutral-400);
  --text-muted: var(--neutral-400);
  --text-inverse: var(--neutral-900);
  --text-information: var(--information-200);
  --text-success: var(--success-200);
  --text-warning: var(--warning-200);
  --text-error: var(--error-200);
  --border-default: var(--neutral-700);
  --border-action: var(--primary-400);
  --border-focus: var(--primary-300);
  --border-error: var(--error-400);
  --border-success: var(--success-400);
  --border-active: var(--primary-300);
  --border-hover: var(--neutral-500);
  --border-disabled: var(--neutral-700);
  --border-action-hover: var(--primary-300);
  --surface-action-hover-2: var(--primary-900);
  --surface-disabled-selected: var(--neutral-500);
  --surface-error: var(--error-900);
  --border-error-input: var(--error-400);
  --icon-on-action: var(--text-on-action);
  --icon-information: var(--information-300);
  --icon-success: var(--success-300);
  --icon-warning: var(--warning-300);
  --icon-error: var(--error-400);
  --surface-information: var(--information-800);
  --surface-success: var(--success-800);
  --surface-warning: var(--warning-800);
  --text-on-information: var(--information-100);
  --text-on-success: var(--success-100);
  --text-on-warning: var(--warning-100);
  --text-on-error: var(--error-100);
  --border-information: var(--information-700);
  --border-success: var(--success-700);
  --border-warning: var(--warning-700);
  --border-error-soft: var(--error-700);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --surface-page: var(--neutral-900);
    --surface-action: var(--primary-600);
    --surface-action-hover: var(--primary-700);
    --surface-disabled: var(--neutral-800);
    --surface-muted: var(--neutral-800);
    --surface-elevated: var(--neutral-800);
    --surface-primary: var(--neutral-800);
    --text-body: var(--neutral-200);
    --text-disabled: var(--neutral-500);
    --text-filled: var(--neutral-100);
    --text-heading: var(--neutral-100);
    --text-headings: var(--neutral-200);
    --text-on-action: var(--neutral-100);
    --text-action: var(--primary-300);
    --text-on-disabled: var(--neutral-400);
    --text-muted: var(--neutral-400);
    --text-inverse: var(--neutral-900);
    --text-information: var(--information-200);
    --text-success: var(--success-200);
    --text-warning: var(--warning-200);
    --text-error: var(--error-200);
    --border-default: var(--neutral-700);
    --border-action: var(--primary-400);
    --border-focus: var(--primary-300);
    --border-error: var(--error-400);
    --border-success: var(--success-400);
    --border-active: var(--primary-300);
    --border-hover: var(--neutral-500);
    --border-disabled: var(--neutral-700);
    --border-action-hover: var(--primary-300);
    --surface-action-hover-2: var(--primary-900);
    --surface-disabled-selected: var(--neutral-500);
    --surface-error: var(--error-900);
    --border-error-input: var(--error-400);
    --icon-on-action: var(--text-on-action);
    --icon-information: var(--information-300);
    --icon-success: var(--success-300);
    --icon-warning: var(--warning-300);
    --icon-error: var(--error-400);
    --surface-information: var(--information-800);
    --surface-success: var(--success-800);
    --surface-warning: var(--warning-800);
    --text-on-information: var(--information-100);
    --text-on-success: var(--success-100);
    --text-on-warning: var(--warning-100);
    --text-on-error: var(--error-100);
    --border-information: var(--information-700);
    --border-success: var(--success-700);
    --border-warning: var(--warning-700);
    --border-error-soft: var(--error-700);
  }
}
/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/* Component display rules must not cancel the native hidden attribute */
[hidden] {
  display: none !important;
}

:root {
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--primary-400);
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
  --min-touch-target: 44px;
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --a11y-text-on-surface-page: var(--text-body);
  --a11y-text-on-surface-action: var(--text-on-action);
  --a11y-text-on-error: var(--error-100);
  --a11y-text-on-success: var(--success-900);
}

.focus-visible:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
.container {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.container--fluid {
  max-width: none;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -0.75rem;
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-inline: 0.75rem;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 48rem) {
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.gap-0 {
  gap: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.m-5 {
  margin: 2rem !important;
}

.mt-5 {
  margin-top: 2rem !important;
}

.mb-5 {
  margin-bottom: 2rem !important;
}

.p-5 {
  padding: 2rem !important;
}

.gap-5 {
  gap: 2rem !important;
}

.m-6 {
  margin: 3rem !important;
}

.mt-6 {
  margin-top: 3rem !important;
}

.mb-6 {
  margin-bottom: 3rem !important;
}

.p-6 {
  padding: 3rem !important;
}

.gap-6 {
  gap: 3rem !important;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-block {
  display: block !important;
}

.d-none {
  display: none !important;
}

.flex-column {
  flex-direction: column !important;
}

.align-center {
  align-items: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.text-center {
  text-align: center !important;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Utilitaires d'ombre — ombres 2:1959
 */
.shadow-inset {
  box-shadow: var(--shadow-inset);
}

.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-none {
  box-shadow: none !important;
}

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

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  color: var(--text-body);
  background: var(--surface-page);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Icon slots — agnostic sizing for SVG or icon fonts (Phosphor, etc.).
 * PimentCSS does not ship a global icon library.
 */
.btn__icon svg,
.btn__icon .ph,
.btn__icon i[class*=ph-],
.field__icon svg,
.field__icon .ph,
.field__icon i[class*=ph-],
.textarea-field__icon svg,
.textarea-field__icon .ph,
.textarea-field__icon i[class*=ph-],
.tree__toggle-icon svg,
.tree__toggle-icon .ph,
.tree__toggle-icon i[class*=ph-],
.tree__icon svg,
.tree__icon .ph,
.tree__icon i[class*=ph-],
.table__icon svg,
.table__icon .ph,
.table__icon i[class*=ph-],
.alert__icon svg,
.alert__icon .ph,
.alert__icon i[class*=ph-],
.alert__close svg,
.alert__close .ph,
.alert__close i[class*=ph-],
.snackbar__icon svg,
.snackbar__icon .ph,
.snackbar__icon i[class*=ph-],
.snackbar__link-icon svg,
.snackbar__link-icon .ph,
.snackbar__link-icon i[class*=ph-],
.tag__icon svg,
.tag__icon .ph,
.tag__icon i[class*=ph-],
.nav-item__icon svg,
.nav-item__icon .ph,
.nav-item__icon i[class*=ph-],
.link__icon svg,
.link__icon .ph,
.link__icon i[class*=ph-],
.checkbox__icon.ph svg,
.checkbox__icon.ph .ph,
.checkbox__icon.ph i[class*=ph-],
.checkbox__icon svg,
.checkbox__icon .ph,
.checkbox__icon i[class*=ph-],
.menu__item-icon svg,
.menu__item-icon .ph,
.menu__item-icon i[class*=ph-],
.tab__icon svg,
.tab__icon .ph,
.tab__icon i[class*=ph-],
.pagination__item-icon svg,
.pagination__item-icon .ph,
.pagination__item-icon i[class*=ph-],
.carousel__arrow-icon svg,
.carousel__arrow-icon .ph,
.carousel__arrow-icon i[class*=ph-],
.btn-group__icon svg,
.btn-group__icon .ph,
.btn-group__icon i[class*=ph-],
.anchor-item__icon svg,
.anchor-item__icon .ph,
.anchor-item__icon i[class*=ph-],
.breadcrumb__separator svg,
.breadcrumb__separator .ph,
.breadcrumb__separator i[class*=ph-],
.list__indicator-icon svg,
.list__indicator-icon .ph,
.list__indicator-icon i[class*=ph-],
.dropdown__chevron svg,
.dropdown__chevron .ph,
.dropdown__chevron i[class*=ph-] {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1;
}

.pdoc-icon,
.pdoc-anchor__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pdoc-icon svg,
.pdoc-icon .ph,
.pdoc-icon i[class*=ph-],
.pdoc-anchor__icon svg,
.pdoc-anchor__icon .ph,
.pdoc-anchor__icon i[class*=ph-] {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1;
}

.pdoc-anchor__icon {
  width: 24px;
  height: 24px;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.125rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
}

.btn__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.btn--primary {
  background: var(--surface-action);
  color: var(--text-on-action);
  border-color: transparent;
}
.btn--primary:hover, .btn--primary.btn--hover {
  background: var(--surface-action-hover);
}
.btn--primary:active, .btn--primary.btn--active {
  background: var(--primary-700);
}
.btn--primary:focus-visible, .btn--primary.btn--focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.btn--transparent {
  background: transparent;
  color: var(--text-action);
  border-color: transparent;
}
.btn--transparent:hover, .btn--transparent.btn--hover {
  background: var(--surface-muted);
}
.btn--transparent:focus-visible, .btn--transparent.btn--focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.btn--outline {
  background: var(--surface-primary);
  color: var(--text-action);
  border-color: var(--border-action);
}
.btn--outline:hover, .btn--outline.btn--hover {
  background: var(--surface-action-hover-2);
}
.btn--outline:focus-visible, .btn--outline.btn--focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.btn--outline:hover, .btn--outline.btn--hover {
  border-color: var(--primary-600);
}

.btn:disabled,
.btn[aria-disabled=true],
.btn--disabled {
  background: var(--surface-disabled);
  color: var(--text-on-disabled);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--outline:disabled,
.btn--outline[aria-disabled=true] {
  border-color: var(--border-default);
  color: var(--text-disabled);
}

.btn--icon-only {
  padding: 0.75rem;
  min-width: 2.75rem;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Button group — PimentCSS v1
 */
.btn-group {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: 1px solid var(--border-action);
  border-radius: 0.25rem;
  overflow: hidden;
}

.btn-group__item {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-right: 1px solid var(--border-action);
  border-radius: 0;
  background: var(--surface-primary);
  color: var(--text-action);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.btn-group__item:last-child {
  border-right: 0;
}
.btn-group__item:hover:not(:disabled):not([aria-disabled=true]):not(.btn-group__item--selected):not([aria-pressed=true]):not([aria-checked=true]), .btn-group__item.btn-group__item--hover:not(.btn-group__item--selected) {
  background: var(--surface-action-hover-2);
  border-right-color: var(--border-action-hover);
  color: var(--primary-600);
}
.btn-group__item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
  z-index: 1;
}
.btn-group__item--selected, .btn-group__item[aria-pressed=true], .btn-group__item[aria-checked=true] {
  background: var(--surface-action);
  color: var(--text-on-action);
}
.btn-group__item--selected .btn-group__icon, .btn-group__item[aria-pressed=true] .btn-group__icon, .btn-group__item[aria-checked=true] .btn-group__icon {
  color: currentColor;
}
.btn-group__item--selected:hover:not(:disabled):not([aria-disabled=true]), .btn-group__item--selected.btn-group__item--hover, .btn-group__item[aria-pressed=true]:hover:not(:disabled):not([aria-disabled=true]), .btn-group__item[aria-pressed=true].btn-group__item--hover, .btn-group__item[aria-checked=true]:hover:not(:disabled):not([aria-disabled=true]), .btn-group__item[aria-checked=true].btn-group__item--hover {
  background: var(--surface-action-hover);
  border-right-color: var(--border-action-hover);
  color: var(--text-on-action);
}
.btn-group__item:disabled, .btn-group__item[aria-disabled=true], .btn-group__item.btn-group__item--disabled {
  background: var(--surface-disabled);
  border-right-color: var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.btn-group__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
}

.btn-group__label {
  flex-shrink: 0;
}

/* Icon-only */
.btn-group--icon .btn-group__item {
  min-width: 2.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Keyline (HR) — PimentCSS v1
 * Horizontal divider — border-primary 1 / 2 / 4 px
 */
.keyline,
.hr,
hr.hr {
  display: block;
  width: 100%;
  max-width: 25.494375rem;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border-primary);
  background: transparent;
}

/* Higher specificity than hr.hr / .hr base (border-top shorthand) */
.keyline.keyline--2,
.hr.hr--2,
hr.hr.hr--2 {
  border-top-width: 2px;
}

.keyline.keyline--4,
.hr.hr--4,
hr.hr.hr--4 {
  border-top-width: 4px;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Tab — PimentCSS v1
 */
.tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs__separator {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border-primary);
}

/* --- Tab item --- */
.tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.125rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 0.25rem solid transparent;
  border-radius: 0.25rem 0.25rem 0 0;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.tab:hover:not(:disabled):not([aria-disabled=true]):not(.tab--selected):not([aria-selected=true]), .tab.tab--hover:not(.tab--selected):not([aria-selected=true]) {
  background: var(--surface-action-hover-2);
  color: var(--text-action);
}
.tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  z-index: 1;
}
.tab--selected, .tab[aria-selected=true] {
  border-bottom-color: var(--border-action);
  color: var(--text-heading);
  font-weight: var(--font-weight-semi-bold);
}
.tab--selected:hover:not(:disabled):not([aria-disabled=true]), .tab--selected.tab--hover, .tab[aria-selected=true]:hover:not(:disabled):not([aria-disabled=true]), .tab[aria-selected=true].tab--hover {
  background: var(--surface-action-hover-2);
  border-bottom-color: var(--border-action-hover);
  color: var(--text-action);
}
.tab:disabled, .tab[aria-disabled=true], .tab.tab--disabled {
  color: var(--text-on-disabled);
  cursor: not-allowed;
}
.tab:disabled.tab--selected, .tab:disabled[aria-selected=true], .tab[aria-disabled=true].tab--selected, .tab[aria-disabled=true][aria-selected=true], .tab.tab--disabled.tab--selected, .tab.tab--disabled[aria-selected=true] {
  border-bottom-color: var(--border-disabled);
}

.tab__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
}

.tab__label {
  flex-shrink: 0;
}

.tab-panel {
  padding-top: var(--space-4);
}

.tab-panel[hidden] {
  display: none;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Badge — PimentCSS v1
 * Types : Copy (compteur 24px) · Dot (indicateur 8px)
 */
.badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 128px;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semi-bold);
  vertical-align: middle;
}

/* Copy type — 24px circle, numeric label */
.badge--copy {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  letter-spacing: var(--letter-spacing-body-small);
  text-align: center;
}

.badge--copy.badge--default {
  background: var(--surface-action);
  color: var(--text-on-action);
}

.badge--copy.badge--information {
  background: var(--information-700);
  color: var(--information-100);
}

.badge--copy.badge--warning {
  background: var(--warning-800);
  color: var(--warning-100);
}

.badge--copy.badge--error {
  background: var(--error-700);
  color: var(--error-100);
}

.badge--copy.badge--success {
  background: var(--success-700);
  color: var(--success-100);
}

/* Type Dot — pastille 8px */
.badge--dot {
  width: 0.5rem;
  height: 0.5rem;
  min-width: 0.5rem;
  min-height: 0.5rem;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.badge--dot.badge--default {
  background: var(--surface-action);
}

.badge--dot.badge--information {
  background: var(--icon-information);
}

.badge--dot.badge--warning {
  background: var(--icon-warning);
}

.badge--dot.badge--error {
  background: var(--icon-error);
}

.badge--dot.badge--success {
  background: var(--icon-success);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Tags — PimentCSS v1
 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  white-space: nowrap;
  vertical-align: middle;
}

.tag__icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: currentColor;
}

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

/* --- Static tag (optional check icon) --- */
.tag--neutral {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-action);
}

.tag--information {
  background: var(--surface-information);
  border-color: var(--border-information);
  color: var(--text-on-information);
}

.tag--success {
  background: var(--surface-success);
  border-color: var(--border-success);
  color: var(--text-on-success);
}

.tag--warning {
  background: var(--surface-warning);
  border-color: var(--border-warning);
  color: var(--text-on-warning);
}

.tag--error {
  background: var(--surface-error);
  border-color: var(--border-error-soft);
  color: var(--text-on-error);
}

.tag--disabled {
  background: var(--surface-disabled);
  border-color: var(--border-disabled);
  color: var(--text-on-disabled);
}

/* --- Interactive tag (bouton) --- */
button.tag--interactive,
.tag--interactive {
  padding: 0.25rem 0.375rem 0.25rem 0.25rem;
  border-style: dashed;
  border-color: var(--border-action);
  background: var(--surface-primary);
  color: var(--text-action);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
button.tag--interactive:hover:not(:disabled):not(.tag--interactive-selected), button.tag--interactive.tag--hover:not(.tag--interactive-selected),
.tag--interactive:hover:not(:disabled):not(.tag--interactive-selected),
.tag--interactive.tag--hover:not(.tag--interactive-selected) {
  background: var(--surface-action-hover-2);
  border-color: var(--border-action-hover);
  color: var(--border-active);
}
button.tag--interactive.tag--focus,
.tag--interactive.tag--focus {
  outline: 1px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: 0.375rem;
}
button.tag--interactive:focus-visible,
.tag--interactive:focus-visible {
  outline: 1px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: 0.375rem;
}
button.tag--interactive:disabled, button.tag--interactive.tag--disabled,
.tag--interactive:disabled,
.tag--interactive.tag--disabled {
  border-style: solid;
  background: var(--surface-disabled);
  border-color: var(--border-disabled);
  color: var(--text-on-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.tag--interactive-selected {
  border-style: solid;
  background: var(--surface-action);
  color: var(--text-on-action);
}
.tag--interactive-selected .tag__icon--add {
  display: none;
}
.tag--interactive-selected:hover:not(:disabled), .tag--interactive-selected.tag--hover {
  background: var(--surface-action-hover);
  border-color: var(--border-action-hover);
  color: var(--text-on-action);
}
.tag--interactive-selected:disabled, .tag--interactive-selected.tag--disabled {
  background: var(--surface-disabled-selected);
  border-color: var(--border-disabled);
  color: var(--text-on-action);
}

button.tag--interactive {
  font: inherit;
  text-align: inherit;
  appearance: none;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Table — PimentCSS v1
 */
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--font-family-body);
}

/**
 * Scroll container for row tables on narrow viewports (phone / tablet).
 * Keeps semantic <table>; overflow stays inside this region (not the page).
 */
.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.table-scroll .table {
  width: max-content;
  min-width: 100%;
}

.table-scroll .table__text--wrap {
  white-space: normal;
}

/* --- Cellules --- */
.table__cell {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  text-align: left;
  background: var(--surface-primary);
}

.table__cell--border-bottom {
  border-bottom: 1px solid var(--border-primary);
}

.table__cell--border-full {
  border: 1px solid var(--border-primary);
  border-top: 0;
}

.table__cell--heading {
  background: var(--surface-disabled);
}

/* --- Lignes --- */
.table__row--hover,
.table tbody tr:hover {
  background: var(--surface-action-hover-2);
}

.table__row--selected,
.table tbody tr.table__row--selected {
  background: var(--surface-action);
}
.table__row--selected .table__cell,
.table tbody tr.table__row--selected .table__cell {
  background: var(--surface-action);
}
.table__row--selected .table__text,
.table__row--selected .table__text--heading,
.table__row--selected .table__text--underline,
.table__row--selected .table__status-label,
.table tbody tr.table__row--selected .table__text,
.table tbody tr.table__row--selected .table__text--heading,
.table tbody tr.table__row--selected .table__text--underline,
.table tbody tr.table__row--selected .table__status-label {
  color: var(--text-on-action);
}
.table__row--selected .table__status-dot,
.table tbody tr.table__row--selected .table__status-dot {
  background: var(--text-on-action);
}
.table__row--selected .checkbox__control,
.table tbody tr.table__row--selected .checkbox__control {
  border-color: var(--text-on-action);
  background: transparent;
}

/* --- Items (contenu cellule) --- */
.table__item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  padding-block: 0.125rem;
  vertical-align: middle;
}

.table__text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
  white-space: nowrap;
}

.table__text--heading {
  font-weight: var(--font-weight-semi-bold);
}

.table__text--underline {
  text-decoration: underline;
  text-underline-position: from-font;
}

.table__text--wrap {
  white-space: normal;
}

.table__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
}

.table__icons {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.table__status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.table__status-dot {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 128px;
  background: var(--icon-information);
}

.table__status-label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
  white-space: nowrap;
}

/* Checkbox compact dans cellule (16px, lisible avec le composant Checkbox) */
.table__cell .checkbox {
  gap: 0.25rem;
}

.table__cell .checkbox__control {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-width: 2px;
  border-radius: 0.25rem;
}

.table__cell .checkbox__control .checkbox__icon,
.table__cell .checkbox__control .checkbox__icon.ph {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}

.table__cell .checkbox__input {
  width: 1.25rem;
  height: 1.25rem;
}

.table__row--selected .checkbox__input:checked + .checkbox__control,
.table tbody tr.table__row--selected .checkbox__input:checked + .checkbox__control {
  background: var(--surface-primary);
  border-color: var(--text-on-action);
}
.table__row--selected .checkbox__input:checked + .checkbox__control .checkbox__icon,
.table__row--selected .checkbox__input:checked + .checkbox__control .checkbox__icon.ph,
.table tbody tr.table__row--selected .checkbox__input:checked + .checkbox__control .checkbox__icon,
.table tbody tr.table__row--selected .checkbox__input:checked + .checkbox__control .checkbox__icon.ph {
  color: var(--surface-action);
}

/* --- Colonne (stack vertical de cellules) --- */
.table__column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  min-width: 6.6875rem; /* 107px — spec */
}

.table__column .table__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Link — PimentCSS v1
 */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.125rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-action);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.link:hover:not(:disabled):not([aria-disabled=true]), .link.link--hover {
  background: var(--surface-action-hover-2);
  color: var(--primary-600);
}
.link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.link:disabled, .link[aria-disabled=true], .link.link--disabled {
  background: var(--surface-disabled);
  color: var(--text-on-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.link--inline {
  text-decoration: underline;
  text-underline-position: from-font;
}

.link__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
}

.link__label {
  white-space: nowrap;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Breadcrumb — PimentCSS v1
 */
.breadcrumb {
  display: block;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.125rem;
  border-radius: 0.25rem;
  color: var(--text-action);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.breadcrumb__link:hover {
  background: var(--surface-action-hover-2);
  color: var(--primary-600);
}
.breadcrumb__link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.breadcrumb__separator {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
}

.breadcrumb__current {
  padding: 0.125rem;
  color: var(--text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  white-space: nowrap;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Navigation — PimentCSS v1
 * Nav items (in-page / header) + Header navigation
 */
/* --- Item de navigation (anchor / in-page) --- */
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.nav-item:hover:not(:disabled):not([aria-disabled=true]), .nav-item.nav-item--hover {
  color: var(--primary-600);
}
.nav-item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.nav-item--selected, .nav-item[aria-current=page], .nav-item[aria-current=true] {
  color: var(--text-action);
}

.nav-item__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
}

/* Liste horizontale (header) */
.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Neutralise les marges prose (li + li) et aligne chaque lien sur la ligne flex */
}
.nav__list > li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav .nav__list {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Side / in-page navigation (anchor) */
.inpage-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.inpage-nav .nav-item {
  width: 100%;
  justify-content: flex-start;
}

/* --- Header navigation --- */
.header-nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 2rem;
  width: 100%;
  min-height: 3.125rem;
  padding: 0;
}

.header-nav__logo {
  grid-column: 1;
  justify-self: start;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.555625rem; /* ~25px */
  height: 2rem; /* 32px */
  color: var(--text-action);
  text-decoration: none;
}

.header-nav__logo svg,
.header-nav__logo .ph {
  display: block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

/* Desktop: panel children join the grid (logo | nav | actions) */
.header-nav__panel {
  display: contents;
}

.header-nav__nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.header-nav__actions {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
}

.header-nav__toggle {
  display: none;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  min-width: 3.125rem;
  height: 3.125rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-action);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.header-nav__toggle:hover {
  background: var(--surface-action-hover-2);
}
.header-nav__toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.header-nav__toggle .ph {
  font-size: 1.25rem;
}

@media (max-width: 48rem) {
  .header-nav {
    grid-template-columns: auto 1fr auto;
    column-gap: 0.75rem;
  }
  .header-nav .header-nav__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--surface-page);
    border: 1px solid var(--border-default);
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: var(--shadow-sm);
  }
  .header-nav.header-nav--open .header-nav__panel {
    display: flex;
  }
  .header-nav .header-nav__nav {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
  .header-nav .nav__list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .header-nav .nav-item {
    width: 100%;
    justify-content: flex-start;
  }
  .header-nav .header-nav__actions {
    grid-column: auto;
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.5rem;
  }
  .header-nav .header-nav__actions .btn {
    width: 100%;
  }
  .header-nav .header-nav__toggle {
    display: inline-flex;
  }
}
/* Doc / embedded preview: force drawer layout without viewport breakpoint */
.header-nav--compact {
  grid-template-columns: auto 1fr auto;
  column-gap: 0.75rem;
}
.header-nav--compact .header-nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: var(--shadow-sm);
}
.header-nav--compact.header-nav--open .header-nav__panel {
  display: flex;
}
.header-nav--compact .header-nav__nav {
  grid-column: auto;
  justify-self: stretch;
  width: 100%;
}
.header-nav--compact .nav__list {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0;
}
.header-nav--compact .nav-item {
  width: 100%;
  justify-content: flex-start;
}
.header-nav--compact .header-nav__actions {
  grid-column: auto;
  justify-self: stretch;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.5rem;
}
.header-nav--compact .header-nav__actions .btn {
  width: 100%;
}
.header-nav--compact .header-nav__toggle {
  display: inline-flex;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Anchor — In-page nav — PimentCSS v1
 */
.anchor-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anchor-item {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  min-height: 2.75rem;
  padding: 0.5rem 0.5rem;
  border: 0;
  border-left: 1px solid var(--border-primary);
  border-radius: 0;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.anchor-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.anchor-item:hover:not(:disabled):not([aria-disabled=true]), .anchor-item.anchor-item--hover {
  border-left-color: var(--border-action-hover);
  color: var(--text-action);
}
.anchor-item:hover:not(:disabled):not([aria-disabled=true])::before, .anchor-item.anchor-item--hover::before {
  background: var(--surface-action-hover-2);
}
.anchor-item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  z-index: 1;
}
.anchor-item--level-2 {
  margin-inline-start: 0.5rem;
  padding-inline: 0.5rem;
}
.anchor-item--selected, .anchor-item[aria-current=page], .anchor-item[aria-current=true] {
  border-left-width: 0.125rem;
  color: var(--text-action);
  font-weight: var(--font-weight-semi-bold);
}
.anchor-item--selected:hover:not(:disabled):not([aria-disabled=true]), .anchor-item--selected.anchor-item--hover, .anchor-item[aria-current=page]:hover:not(:disabled):not([aria-disabled=true]), .anchor-item[aria-current=page].anchor-item--hover, .anchor-item[aria-current=true]:hover:not(:disabled):not([aria-disabled=true]), .anchor-item[aria-current=true].anchor-item--hover {
  color: var(--text-action);
}

.anchor-item__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
}

.anchor-item__label {
  flex: 0 0 auto;
}

/**
 * Optional: fixed-width sidebar TOC (ellipsis). Default nav grows to fit labels.
 */
.anchor-nav--constrained {
  width: 100%;
  max-width: 8.75rem; /* ~110px — Figma spec when space is limited */
}
.anchor-nav--constrained .anchor-item {
  max-width: 100%;
  overflow: hidden;
}
.anchor-nav--constrained .anchor-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Carousel — PimentCSS v1
 * 48px arrows + horizontal scroll bar
 */
.carousel {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 40rem;
}

/* --- Arrows --- */
.carousel__arrow {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
  border: 2px solid var(--border-action);
  border-radius: var(--border-radius-round);
  background: var(--surface-primary);
  color: var(--text-action);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.carousel__arrow:hover:not(:disabled):not([aria-disabled=true]), .carousel__arrow.carousel__arrow--hover {
  background: var(--surface-action-hover-2);
  border-color: var(--border-action-hover);
}
.carousel__arrow:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 4px;
}
.carousel__arrow:disabled, .carousel__arrow[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.5;
}

.carousel__arrow-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.carousel__arrow--prev .carousel__arrow-icon {
  transform: scaleX(-1);
}

/* --- Scroll bar --- */
.carousel__scrollbar {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  /* content-box: global border-box + 2px height + vertical padding collapsed the track to 0 */
  box-sizing: content-box;
  height: 0.125rem;
  padding: 2px 0;
  cursor: pointer;
  transition: height 150ms cubic-bezier(0.2, 0, 0, 1);
}
.carousel__scrollbar:hover, .carousel__scrollbar.carousel__scrollbar--hover {
  height: 0.25rem;
  padding: 0;
}
.carousel__scrollbar:focus-within .carousel__scrollbar-thumb, .carousel__scrollbar.carousel__scrollbar--focus .carousel__scrollbar-thumb {
  outline: 2px solid var(--border-focus);
  outline-offset: 4px;
}

.carousel__scrollbar-track {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--border-primary);
  border-radius: var(--border-radius-round);
  overflow: visible;
}

.carousel__scrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 37.5%;
  height: 100%;
  min-width: 2rem;
  background: var(--border-action);
  border-radius: var(--border-radius-round);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), height 150ms cubic-bezier(0.2, 0, 0, 1);
}
.carousel__scrollbar:hover .carousel__scrollbar-thumb, .carousel__scrollbar--hover .carousel__scrollbar-thumb {
  background: var(--border-action-hover);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Pagination — PimentCSS v1
 */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pagination__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination__list > li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination__list > li + li {
  margin-top: 0;
}

/* --- Item 44×44 --- */
.pagination__item {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background: var(--surface-primary);
  color: var(--text-action);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.pagination__item:hover:not(:disabled):not([aria-disabled=true]):not(.pagination__item--selected):not([aria-current=page]), .pagination__item.pagination__item--hover:not(.pagination__item--selected):not([aria-current=page]) {
  background: var(--surface-action-hover-2);
  border-color: var(--border-action-hover);
  color: var(--text-action);
}
.pagination__item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.pagination__item--selected, .pagination__item[aria-current=page] {
  background: var(--surface-action);
  border-color: transparent;
  color: var(--text-on-action);
}
.pagination__item--selected:hover:not(:disabled):not([aria-disabled=true]), .pagination__item--selected.pagination__item--hover, .pagination__item[aria-current=page]:hover:not(:disabled):not([aria-disabled=true]), .pagination__item[aria-current=page].pagination__item--hover {
  background: var(--surface-action-hover);
  border-color: var(--border-action-hover);
  color: var(--text-on-action);
}
.pagination__item:disabled, .pagination__item[aria-disabled=true], .pagination__item.pagination__item--disabled {
  background: var(--surface-disabled);
  border-color: transparent;
  color: var(--text-on-disabled);
  cursor: not-allowed;
}

.pagination__item-icon {
  display: block;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: currentColor;
}

.pagination__item--prev .pagination__item-icon {
  transform: scaleX(-1);
}

.pagination__item--next .pagination__item-icon {
  transform: none;
}

/* --- Jumper (type Default) --- */
.pagination__jumper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pagination__jumper-field {
  width: 3rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-primary);
  border-radius: 0.25rem;
  background: var(--surface-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-filled);
  text-align: center;
}
.pagination__jumper-field::placeholder {
  color: var(--text-disabled);
}
.pagination__jumper-field:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-color: var(--border-primary);
}

.pagination__jumper-suffix {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
  white-space: nowrap;
}

/* --- Results per page (optionnel) --- */
.pagination__results {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pagination__results-label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
  white-space: nowrap;
}

.pagination__results-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pagination__results-select-wrap::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  color: var(--text-body);
}

.pagination__results-select {
  width: 5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem 0.5rem 0.75rem;
  border: 1px solid var(--border-primary);
  border-radius: 0.25rem;
  background-color: var(--surface-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-filled);
  text-align: center;
  cursor: pointer;
  appearance: none;
  color-scheme: light dark;
}
.pagination__results-select option {
  color: var(--text-filled);
  background-color: var(--surface-primary);
}
.pagination__results-select:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
.label {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75rem;
  position: relative;
  font-family: var(--font-family-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--text-headings);
}

.label__text {
  flex-shrink: 0;
}

.label__required {
  position: absolute;
  left: -0.5rem;
  top: 0;
  color: var(--error-500);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.label__optional {
  font-weight: var(--font-weight-regular);
  color: var(--text-disabled);
}

.label__tooltip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5625rem;
  height: 1.5625rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: help;
  color: var(--information-500);
}
.label__tooltip svg,
.label__tooltip img {
  width: 100%;
  height: 100%;
  display: block;
}
.label__tooltip.focus-visible:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 50%;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Pagination — PimentCSS v1
 */
/**
 * Input fields — PimentCSS v1
 */
.field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 17.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: 0.25rem;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.field::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  pointer-events: none;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.field--defined {
  max-width: none;
}

.field__input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-filled);
}
.field__input::placeholder {
  color: var(--text-disabled);
}
.field__input:focus {
  outline: none;
}

select.field__input {
  appearance: none;
  cursor: pointer;
  width: 100%;
  text-overflow: ellipsis;
}

.field:has(select.field__input) {
  padding-right: 2.75rem;
}
.field:has(select.field__input)::before {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  transform: translateY(-50%);
  pointer-events: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.field__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-body);
}
.field__icon svg {
  width: 100%;
  height: 100%;
}

.field--active {
  border-color: var(--border-action-hover);
}

.field--hover,
.field:not(.field--disabled):not(.field--error):not(.field--success):hover {
  border-color: var(--border-hover);
}

.field:focus-within,
.field--focus {
  border-color: var(--border-action-hover);
}
.field:focus-within::after,
.field--focus::after {
  border-color: var(--border-focus);
}

.field--error {
  border-color: var(--border-error);
}
.field--error:focus-within::after {
  border-color: var(--error-400);
}

.field--success {
  border-color: var(--border-success);
}

.field--disabled,
.field:has(.field__input:disabled) {
  background: var(--surface-muted);
  border-color: var(--border-default);
  cursor: not-allowed;
}
.field--disabled .field__input,
.field:has(.field__input:disabled) .field__input {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.field--disabled .field__icon,
.field:has(.field__input:disabled) .field__icon {
  color: var(--text-disabled);
}

.input {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4px — spec Input */
  max-width: 17.5rem;
}

.input--defined {
  max-width: 26.875rem;
}

.input__hint {
  margin: 0;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--text-body);
}

.input__hint--error {
  color: var(--text-error);
}

.input__hint--success {
  color: var(--text-success);
}

.password-toggle {
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--font-family-body);
  font-size: 0.875rem;
  font-weight: var(--font-weight-semi-bold);
  color: var(--primary-500);
  cursor: pointer;
}
.password-toggle:hover {
  color: var(--primary-600);
}
.password-toggle.focus-visible:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.field-group {
  display: flex;
  align-items: stretch;
  max-width: 26.875rem;
  border: 1px solid var(--border-default);
  border-radius: 0.25rem;
  overflow: hidden;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.field-group--hover,
.field-group:hover:not(:has(:disabled)) {
  border-color: var(--border-action-hover);
}

.field-group__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-disabled);
  border: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-disabled);
  white-space: nowrap;
}
.field-group__tab svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.field-group__tab--pre {
  border-right: 1px solid var(--border-default);
}

.field-group__tab--post {
  border-left: 1px solid var(--border-default);
}

.field-group__tab--active {
  background: var(--surface-action);
  color: var(--text-on-action);
  border-color: var(--surface-action);
}

.field-group__tab:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.field-group .field {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
}
.field-group .field::after {
  display: none;
}

.field-group .field:focus-within {
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--border-action-hover);
}

.field-group--focus,
.field-group:focus-within {
  border-color: var(--border-action-hover);
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Textarea — PimentCSS v1
 */
.textarea-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 32rem;
}

.textarea-wrap__hint {
  margin: 0;
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
}

.textarea-wrap__count {
  margin: 0;
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  color: var(--text-body);
}

.textarea-field {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  min-height: 8.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: 0.25rem;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.textarea-field::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  pointer-events: none;
}

.textarea {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  min-height: 6.5rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-filled);
  resize: vertical;
}
.textarea::placeholder {
  color: var(--text-disabled);
}
.textarea:focus {
  outline: none;
}

.textarea-field__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-body);
}
.textarea-field__icon svg {
  width: 100%;
  height: 100%;
}

.textarea-field:focus-within {
  border-color: var(--border-action-hover);
}
.textarea-field:focus-within::after {
  border-color: var(--border-focus);
}

.textarea-field__resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 11px;
  pointer-events: none;
  opacity: 0.45;
  background: linear-gradient(135deg, transparent 0 45%, var(--neutral-450) 45% 50%, transparent 50% 55%, var(--neutral-450) 55% 60%, transparent 60% 100%);
}

.textarea:disabled,
.textarea-field:has(.textarea:disabled) {
  background: var(--surface-muted);
  cursor: not-allowed;
}
.textarea:disabled .textarea,
.textarea-field:has(.textarea:disabled) .textarea {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.textarea--error,
.textarea-field--error {
  border-color: var(--border-error);
}

.textarea--success,
.textarea-field--success {
  border-color: var(--border-success);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Form — PimentCSS v1
 * Bloc formulaire : titre h4 + champs + actions
 */
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 20.5rem;
  padding: 1.5rem;
  background: var(--surface-primary);
  border-radius: 0.5rem;
  box-sizing: border-box;
}

.form__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-heading-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-h4);
  letter-spacing: var(--letter-spacing-heading-h4);
  color: var(--text-headings);
}

.form__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.form__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  max-width: 17.5rem;
}

.form__field .label {
  width: 100%;
}

.form__field .field {
  max-width: 100%;
  width: 100%;
}

.form__field .textarea {
  max-width: 100%;
  width: 100%;
}

.form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: none;
}

.form__fieldset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  max-width: 17.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.form__fieldset legend {
  margin-bottom: 0.25rem;
  padding: 0;
}

.form__radio {
  width: 100%;
  max-width: none;
}

.form__field .input__hint {
  width: 100%;
  margin: 0;
}

.form__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.form__actions .btn {
  width: 100%;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Alerts — inline feedback + optional dialog overlay
 */
.alert {
  --alert-accent: var(--icon-information);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  box-sizing: border-box;
}
.alert[hidden] {
  display: none !important;
}

.alert__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  color: var(--alert-accent);
}

.alert__content {
  flex: 1 1 auto;
  min-width: 0;
}

.alert__title {
  margin: 0 0 0.25rem;
  font-weight: var(--font-weight-semi-bold);
}

.alert__body {
  margin: 0;
}

.alert__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.alert__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  align-self: flex-start;
}
.alert__close .ph,
.alert__close i[class*=ph-] {
  font-size: 1.25rem !important;
  width: 1.25rem;
  height: 1.25rem;
}
.alert__close:hover {
  color: var(--text-body);
  background: rgba(0, 0, 0, 0.06);
}
.alert__close:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.alert--information {
  --alert-accent: var(--icon-information);
  background: var(--surface-information);
  color: var(--text-on-information);
  border-color: var(--border-information);
}

.alert--success {
  --alert-accent: var(--icon-success);
  background: var(--surface-success);
  color: var(--text-on-success);
  border-color: var(--border-success);
}

.alert--warning {
  --alert-accent: var(--icon-warning);
  background: var(--surface-warning);
  color: var(--text-on-warning);
  border-color: var(--border-warning);
}

.alert--error {
  --alert-accent: var(--icon-error);
  background: var(--surface-error);
  color: var(--text-on-error);
  border-color: var(--border-error-soft);
}

.alert--dismissible {
  position: relative;
  padding-inline-end: 3.25rem;
}
.alert--dismissible .alert__close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  margin: 0;
}

@media (max-width: 30rem) {
  .alert--dismissible.alert--with-icon {
    flex-wrap: wrap;
    padding-inline-end: 1rem;
  }
  .alert--dismissible.alert--with-icon .alert__close {
    position: static;
    margin: 0 0 0 auto;
  }
}
/* Dialog overlay (blocking alert) */
.alert-dialog {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}
.alert-dialog[hidden] {
  display: none !important;
}

.alert-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 26, 38, 0.55);
  cursor: pointer;
}

.alert-dialog__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 28rem;
  max-height: min(90vh, 32rem);
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  box-sizing: border-box;
}
.alert-dialog__panel .alert {
  margin: 0;
}

.alert-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

body.alert-dialog-open {
  overflow: hidden;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Modals — general-purpose dialog overlay (WAI-ARIA dialog pattern)
 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}
.modal[hidden] {
  display: none !important;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 26, 38, 0.55);
  cursor: pointer;
}

.modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 32rem;
  max-height: min(90vh, 40rem);
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
  background: var(--surface-primary);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  box-sizing: border-box;
}
.modal__panel :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

.modal--sm .modal__panel {
  max-width: 24rem;
}

.modal--lg .modal__panel {
  max-width: 42rem;
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 1.5rem;
  padding-block-end: 1rem;
  border-bottom: 1px solid var(--border-default);
}

.modal__title {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-end: 0.5rem;
}

.modal__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.75rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
}
.modal__close:hover {
  background: var(--surface-muted);
  color: var(--text-heading);
}
.modal__close:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.5rem;
  overflow-y: auto;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  color: var(--text-body);
}

.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border-default);
  background: var(--surface-muted);
}

body.modal-open {
  overflow: hidden;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Cards — PimentCSS v1
 */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  padding: 1.5rem;
  /* Avoid stacking slot gap + heading margins (common in doc/CMS prose) */
}
.card :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

.card--elevated {
  background: var(--surface-elevated);
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}

.card--copy {
  max-width: 25.9375rem;
}

.card--newsletter {
  max-width: 32rem;
}

.card--blank {
  max-width: 11.6875rem;
}

.card--horizontal {
  max-width: 36rem;
}

.card__slots {
  display: flex;
  flex-flow: column nowrap;
  gap: 0;
  align-items: stretch;
  width: 100%;
}

.card__slots > * + * {
  margin-block-start: 1.5rem;
}

/* Tighter rhythm between media and copy; keep $slot-gap before actions */
.card__slots > .card__media + .copy-block,
.card__slots > .card__media + .card__content {
  margin-block-start: 0.75rem;
}

.card .copy-block__text {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  letter-spacing: var(--letter-spacing-body-small);
}

.card__media {
  width: 100%;
  max-width: none;
  border-radius: 0.5rem;
  /* Standalone .media caps at 15rem; cards use full slot width */
}
.card__media.media {
  max-width: none;
}

.card__content {
  display: flex;
  flex-flow: column nowrap;
  gap: 1.5rem;
  align-items: stretch;
  min-width: 0;
}

.card--horizontal .card__slots {
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 1.5rem;
}

.card--horizontal .card__slots > * + * {
  margin-block-start: 0;
  margin-inline-start: 0;
}

.card--horizontal .card__media {
  flex: 0 0 auto;
  width: 11.25rem;
  max-width: 40%;
  align-self: stretch;
}

.card--horizontal .card__media.media--3-4 {
  width: 11.25rem;
  max-width: 11.25rem;
}

.card--horizontal .card__content {
  flex: 1 1 auto;
  justify-content: center;
}

.card .btn {
  align-self: flex-start;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  gap: 0.5rem;
}

.card .btn__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.card__header,
.card__body,
.card__footer {
  padding: 1.5rem;
}

.card--elevated .card__header,
.card--elevated .card__body,
.card--elevated .card__footer {
  padding: 1.5rem;
}

.card--elevated .card__header {
  border-bottom: 1px solid var(--border-default);
  font-weight: var(--font-weight-semi-bold);
  color: var(--text-heading);
}

.card--elevated .card__footer {
  border-top: 1px solid var(--border-default);
  background: var(--surface-muted);
}

.card--elevated {
  padding: 0;
  overflow: hidden;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Slot placeholder — (Slots layouts)
 */
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 8.6875rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  flex-shrink: 0;
  background: var(--surface-action-hover-2);
  border: 1px dashed var(--border-action);
  border-radius: 0.25rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-action);
  text-align: center;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Slots layouts — (Column / Row)
 */
.slots-layout {
  display: flex;
  gap: 1.5rem;
}

/* « Column »: slots side by side (1–6 columns) */
.slots-layout--column {
  flex-flow: row nowrap;
  align-items: flex-start;
}

.slots-layout--column > .slot,
.slots-layout--column > * {
  flex-shrink: 0;
}

/* « Row »: stacked slots (1–6 rows) */
.slots-layout--row {
  flex-flow: column nowrap;
  align-items: stretch;
  width: 8.6875rem;
  max-width: 100%;
}

.slots-layout--row > .slot,
.slots-layout--row > * {
  width: 100%;
}

/* Variante pleine largeur (cartes, conteneurs) */
.slots-layout--row.slots-layout--fluid {
  width: 100%;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Copy block — spec Placeholder 2:1770
 */
.copy-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 33rem;
}

.copy-block--center {
  align-items: center;
  text-align: center;
}

.copy-block__text {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Image / ratios — spec Placeholder 2:1778
 */
.media {
  position: relative;
  display: block;
  width: 100%;
  max-width: 15rem;
  overflow: hidden;
}
.media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--1-1 {
  aspect-ratio: 1/1;
}

.media--8-5 {
  aspect-ratio: 8/5;
}

.media--3-4 {
  aspect-ratio: 3/4;
  max-width: 11.25rem; /* 180px — spec */
}

.media--3-2 {
  aspect-ratio: 3/2;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Menu — PimentCSS v1
 * Items + liste scrollable + variantes caret (None | Dropdown | Left)
 */
.menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--border-primary);
  background: var(--surface-primary);
  color: var(--text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.menu__item:last-child {
  border-bottom: 0;
}
.menu__item:hover:not(:disabled):not(.menu__item--selected), .menu__item.menu__item--hover:not(.menu__item--selected) {
  background: var(--surface-action-hover-2);
  border-bottom-color: var(--border-action-hover);
}
.menu__item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  z-index: 1;
}
.menu__item--selected, .menu__item[aria-selected=true] {
  background: var(--surface-action);
  color: var(--text-on-action);
  border-bottom-color: transparent;
}
.menu__item--selected:hover:not(:disabled), .menu__item--selected.menu__item--hover, .menu__item[aria-selected=true]:hover:not(:disabled), .menu__item[aria-selected=true].menu__item--hover {
  background: var(--surface-action-hover);
}
.menu__item:disabled, .menu__item.menu__item--disabled {
  background: var(--surface-disabled);
  color: var(--text-on-disabled);
  border-bottom-color: var(--border-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.menu__item:disabled.menu__item--selected, .menu__item:disabled[aria-selected=true], .menu__item.menu__item--disabled.menu__item--selected, .menu__item.menu__item--disabled[aria-selected=true] {
  background: var(--surface-disabled-selected);
  color: var(--text-on-action);
}

.menu__item-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: inherit;
}

.menu__item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.menu__item-label {
  flex: 1 1 0;
  min-width: 0;
}

.menu {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 17.5rem;
  border: 1px solid var(--border-primary);
  border-radius: 0.25rem;
  background: var(--surface-primary);
  overflow: hidden;
  position: relative;
}

.menu__list {
  flex: 1 1 0;
  min-width: 0;
  max-height: 21rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.menu__list::-webkit-scrollbar {
  width: 6px;
}

.menu__list::-webkit-scrollbar-thumb {
  background: var(--border-disabled);
  border-radius: 50px;
  min-height: 3rem;
}

.menu--caret::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 9px solid var(--border-primary);
  pointer-events: none;
}

.menu--caret::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 8px solid var(--surface-primary);
  pointer-events: none;
}

.menu--caret-left::before {
  left: 1.1rem;
  transform: none;
}

.menu--caret-left::after {
  left: calc(1.1rem + 1px);
  transform: none;
}

.menu--rail .menu__list {
  overflow: hidden;
}
.menu--rail .menu__rail {
  flex-shrink: 0;
  display: flex;
  padding: 0.5rem;
  background: var(--surface-primary);
}
.menu--rail .menu__rail-thumb {
  width: 6px;
  height: 3rem;
  border-radius: 50px;
  background: var(--border-disabled);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Dropdown — PimentCSS v1
 * Label + hint + field trigger + menu panel
 */
.dropdown {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  max-width: 17.5rem;
  position: relative;
}

.dropdown__hint {
  margin: 0;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--text-body);
}

.dropdown__trigger {
  position: relative;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.dropdown__value {
  flex: 1 1 0;
  min-width: 0;
  color: var(--text-body);
}

.dropdown__value--filled {
  color: var(--text-filled);
}

.dropdown__chevron {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-body);
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
}

.dropdown__chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dropdown--open .dropdown__trigger,
.dropdown__trigger[aria-expanded=true] {
  border-color: var(--border-action-hover);
}

.dropdown--open .dropdown__trigger::after,
.dropdown__trigger[aria-expanded=true]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--border-focus);
  border-radius: 0.375rem;
  pointer-events: none;
}

.dropdown--open .dropdown__chevron,
.dropdown__trigger[aria-expanded=true] .dropdown__chevron {
  transform: rotate(180deg);
}

.dropdown__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 100;
  display: none;
}

.dropdown--open .dropdown__panel,
.dropdown__trigger[aria-expanded=true] + .dropdown__panel {
  display: block;
}

.dropdown__panel .menu {
  max-width: none;
  box-shadow: var(--shadow-md);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Autocomplete — PimentCSS v1
 * Label + hint + champ avec clear + bouton recherche + liste (menu rail)
 */
.autocomplete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  max-width: 20.5rem;
  position: relative;
}

.autocomplete__hint {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--neutral-500);
}

.autocomplete__control {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--border-primary);
  border-radius: 0.25rem;
  overflow: hidden;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.autocomplete:hover:not(:has(:disabled)) .autocomplete__control,
.autocomplete__control--hover {
  border-color: var(--border-action-hover);
}

.autocomplete--open .autocomplete__control,
.autocomplete__control:focus-within {
  border-color: var(--border-action-hover);
}

.autocomplete--open .autocomplete__control::after,
.autocomplete__control:focus-within::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--border-focus);
  border-radius: 0.375rem;
  pointer-events: none;
  z-index: 2;
}

.autocomplete__field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 17.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-primary);
  border-right: 1px solid var(--border-primary);
}

.autocomplete__input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-filled);
}
.autocomplete__input::-webkit-search-cancel-button, .autocomplete__input::-webkit-search-decoration {
  appearance: none;
  display: none;
}
.autocomplete__input::placeholder {
  color: var(--text-disabled);
}
.autocomplete__input:focus {
  outline: none;
}

/* Shown only after a list selection (see autocomplete--has-value + JS) */
.autocomplete__clear {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
}
.autocomplete__clear:hover {
  color: var(--text-action);
}
.autocomplete__clear:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.autocomplete--has-value .autocomplete__clear {
  display: inline-flex;
}

.autocomplete__clear svg {
  width: 100%;
  height: 100%;
  display: block;
}

.autocomplete__panel .menu__item-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  text-align: left;
}

.autocomplete__panel .menu__item-title {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
}

.autocomplete__panel .menu__item-desc {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-small);
  color: var(--text-muted);
}

.autocomplete__panel .menu__item--selected .menu__item-desc,
.autocomplete__panel .menu__item[aria-selected=true] .menu__item-desc {
  color: inherit;
  opacity: 0.9;
}

.autocomplete__search {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: var(--surface-action);
  color: var(--text-on-action);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.autocomplete__search:hover {
  background: var(--surface-action-hover);
}
.autocomplete__search:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.autocomplete__search svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.autocomplete__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
}

.autocomplete--open .autocomplete__panel {
  display: block;
}

.autocomplete__panel .menu {
  max-width: none;
  width: 100%;
  box-shadow: var(--shadow-md);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Date picker — PimentCSS v1
 * Day (.calendar-day), calendar (.calendar), picker (.date-picker)
 */
.calendar-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background: var(--surface-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.calendar-day:hover:not(:disabled):not(.calendar-day--blank) {
  background: var(--surface-action-hover-2);
  color: var(--text-action-hover);
}
.calendar-day:focus-visible {
  outline: none;
}
.calendar-day:focus-visible::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--border-focus);
  border-radius: 0.375rem;
  pointer-events: none;
}

.calendar-day--selected {
  background: var(--surface-action);
  color: var(--text-on-action);
  border-color: transparent;
}
.calendar-day--selected:hover:not(:disabled) {
  background: var(--surface-action-hover);
  color: var(--text-on-action);
}

.calendar-day--current:not(.calendar-day--selected) {
  border-color: var(--border-action);
}

.calendar-day--disabled {
  background: var(--surface-disabled);
  color: var(--icon-on-disabled);
  cursor: not-allowed;
}
.calendar-day--disabled:hover {
  background: var(--surface-disabled);
  color: var(--icon-on-disabled);
}

.calendar-day--selected.calendar-day--disabled {
  background: var(--surface-disabled-selected);
  color: var(--text-on-action);
}

.calendar-day--blank {
  visibility: hidden;
  pointer-events: none;
  cursor: default;
  border-color: transparent;
  background: transparent;
}

.calendar-day--hover:not(:disabled):not(.calendar-day--blank) {
  background: var(--surface-action-hover-2);
  color: var(--text-action-hover);
}

.calendar-day--selected.calendar-day--hover:not(:disabled) {
  background: var(--surface-action-hover);
  color: var(--text-on-action);
}

.calendar-day--focus::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--border-focus);
  border-radius: 0.375rem;
  pointer-events: none;
}

.calendar-day--weekday {
  cursor: default;
  font-weight: var(--font-weight-regular);
}
.calendar-day--weekday:hover {
  background: var(--surface-primary);
  color: var(--text-body);
}
.calendar-day--weekday:focus-visible::after, .calendar-day--weekday.calendar-day--focus::after {
  display: none;
}

.calendar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  max-width: 15rem;
  padding: 0.75rem;
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: 0.25rem;
}

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.calendar__nav-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-action);
  cursor: pointer;
}
.calendar__nav svg {
  width: 100%;
  height: 100%;
}
.calendar__nav:hover {
  color: var(--text-action-hover);
}
.calendar__nav.focus-visible:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 0.25rem;
}

.calendar__month {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-action);
  text-align: center;
  white-space: nowrap;
}

.calendar__weekdays,
.calendar__week {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.calendar__weeks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.date-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  max-width: 15rem;
  position: relative;
}

.date-picker__hint {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--neutral-500);
}

.date-picker__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.date-picker__control {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  width: 100%;
}

.date-picker__control .label {
  width: 100%;
}

.date-picker .field-group {
  width: 100%;
  max-width: 100%;
  border-color: var(--border-primary);
}

.date-picker .field-group .field {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  border-radius: 0;
}

.date-picker__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-left: 1px solid var(--border-primary);
  border-radius: 0;
  background: var(--surface-action);
  color: var(--text-on-action);
  cursor: pointer;
}
.date-picker__trigger svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.date-picker__trigger:hover {
  background: var(--surface-action-hover);
}
.date-picker__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.date-picker__trigger.focus-visible:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-offset));
  z-index: 1;
}

.calendar__nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--text-disabled);
}

.date-picker__panel {
  display: none;
  width: 100%;
}

.date-picker--open .date-picker__panel {
  display: block;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Checkbox — PimentCSS v1
 * Types: Default | Selected | Indeterminate
 * États: Default | Focus | Hover | Disabled | Error
 */
/* 24px */
.checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
}

.checkbox__input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  z-index: 1;
}

.checkbox__control {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--border-primary);
  border-radius: 0.25rem;
  background: var(--surface-primary);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.checkbox__icon {
  display: none;
  width: 100%;
  height: 100%;
  color: var(--text-on-action);
}

.checkbox__icon svg,
.checkbox__icon.ph,
.checkbox__icon .ph {
  width: 100%;
  height: 100%;
  display: block;
  font-size: 1.125rem;
  line-height: 1;
}

.checkbox__input:checked + .checkbox__control {
  background: var(--surface-action);
  border-color: var(--border-action);
}
.checkbox__input:checked + .checkbox__control .checkbox__icon--check {
  display: block;
}

.checkbox__input:indeterminate + .checkbox__control {
  background: var(--surface-action);
  border-color: var(--border-action);
}
.checkbox__input:indeterminate + .checkbox__control .checkbox__icon--minus {
  display: block;
  width: 1rem;
  height: 1rem;
}

.checkbox:hover:not(:has(:disabled)) .checkbox__input:not(:checked):not(:indeterminate) + .checkbox__control,
.checkbox__control--hover:not(.checkbox__control--checked) {
  background: var(--surface-action-hover-2);
  border-color: var(--border-action-hover);
}

.checkbox:hover:not(:has(:disabled)) .checkbox__input:checked + .checkbox__control,
.checkbox:hover:not(:has(:disabled)) .checkbox__input:indeterminate + .checkbox__control,
.checkbox__control--hover.checkbox__control--checked {
  background: var(--surface-action-hover);
  border-color: var(--border-action-hover);
}

.checkbox__input:focus-visible + .checkbox__control::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--border-focus);
  border-radius: 0.5rem;
  pointer-events: none;
}

.checkbox__control--focus::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--border-focus);
  border-radius: 0.5rem;
  pointer-events: none;
}

.checkbox__input:disabled + .checkbox__control,
.checkbox__control--disabled {
  background: var(--surface-disabled);
  border-color: var(--border-disabled);
  cursor: not-allowed;
}

.checkbox:has(:disabled) {
  cursor: not-allowed;
  color: var(--text-on-disabled);
}

/* Compact checkbox in table cells (dense data grid) */
.table__item.checkbox {
  min-height: 0;
}

.checkbox__input:disabled:checked + .checkbox__control .checkbox__icon,
.checkbox__input:disabled:indeterminate + .checkbox__control .checkbox__icon {
  color: var(--text-on-disabled);
}

.checkbox--error .checkbox__control,
.checkbox__control--error {
  background: var(--surface-error);
  border-color: var(--border-error-input);
}

.checkbox--error .checkbox__input:checked + .checkbox__control .checkbox__icon,
.checkbox--error .checkbox__input:indeterminate + .checkbox__control .checkbox__icon {
  color: var(--error-700);
}

.checkbox__control--checked {
  background: var(--surface-action);
  border-color: var(--border-action);
}
.checkbox__control--checked .checkbox__icon--check {
  display: block;
}

.checkbox__control--indeterminate {
  background: var(--surface-action);
  border-color: var(--border-action);
}
.checkbox__control--indeterminate .checkbox__icon--minus {
  display: block;
  width: 1rem;
  height: 1rem;
}
.checkbox__control--indeterminate.checkbox__control--error {
  background: var(--surface-error);
  border-color: var(--border-error-input);
}
.checkbox__control--indeterminate.checkbox__control--error .checkbox__icon--minus {
  color: var(--error-700);
}

.checkbox__control--checked.checkbox__control--error {
  background: var(--surface-error);
  border-color: var(--border-error-input);
}
.checkbox__control--checked.checkbox__control--error .checkbox__icon--check {
  color: var(--error-700);
}

.checkbox__text--pill {
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.checkbox__input:checked ~ .checkbox__text--pill {
  background: var(--surface-action);
  color: var(--text-on-action);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Radio — PimentCSS v1
 * Types: Active (checked) | Inactive
 * États: Default | Focus | Hover | Disabled
 */
.radio {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
}

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

.radio__control {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--border-primary);
  border-radius: var(--border-radius-round);
  background: var(--surface-primary);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.radio__dot {
  display: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--border-radius-round);
  background: var(--text-on-action);
}

.radio__input:checked + .radio__control {
  background: var(--surface-action);
  border-color: var(--border-action);
}
.radio__input:checked + .radio__control .radio__dot {
  display: block;
}

.radio:hover:not(:has(:disabled)) .radio__input:not(:checked) + .radio__control,
.radio__control--hover:not(.radio__control--checked) {
  background: var(--surface-action-hover-2);
  border-color: var(--border-action-hover);
}

.radio:hover:not(:has(:disabled)) .radio__input:checked + .radio__control,
.radio__control--hover.radio__control--checked {
  background: var(--surface-action-hover);
  border-color: var(--border-action-hover);
}

.radio__input:focus-visible + .radio__control::before,
.radio__control--focus::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border-focus);
  border-radius: var(--border-radius-round);
  pointer-events: none;
}

.radio__input:disabled + .radio__control,
.radio__control--disabled {
  background: var(--surface-disabled);
  border-color: var(--border-disabled);
}

.radio:has(:disabled) {
  cursor: not-allowed;
  color: var(--text-on-disabled);
}

.radio__input:disabled:checked + .radio__control .radio__dot {
  background: var(--text-on-disabled);
}

.radio__text--pill {
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
}

.radio__input:checked ~ .radio__text--pill {
  background: var(--surface-action);
  color: var(--text-on-action);
}

.radio__control--checked {
  background: var(--surface-action);
  border-color: var(--border-action);
}
.radio__control--checked .radio__dot {
  display: block;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Switch — PimentCSS v1
 * Types: Active (on) | Inactive (off)
 * États: Default | Focus | Hover | Disabled
 */
/* 48px */
/* 26px */
/* 24px */
/* 20px */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
}

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

.switch__control {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  width: 3rem;
  height: 1.625rem;
  padding: 2px;
  border: 1px solid var(--border-action);
  border-radius: var(--border-radius-round);
  background: var(--surface-primary);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.switch__knob {
  width: 1.5rem;
  height: 1.25rem;
  border-radius: var(--border-radius-round);
  background: var(--surface-action);
  box-shadow: 0 1px 2px oklch(0% 0 0deg / 0.12);
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.switch__input:checked + .switch__control {
  background: var(--surface-action);
  border-color: var(--border-action);
  justify-content: flex-end;
}
.switch__input:checked + .switch__control .switch__knob {
  background: var(--surface-primary);
}

.switch:hover:not(:has(:disabled)) .switch__input:not(:checked) + .switch__control,
.switch__control--hover:not(.switch__control--on) {
  background: var(--surface-action-hover-2);
  border-color: var(--border-action-hover);
}

.switch:hover:not(:has(:disabled)) .switch__input:checked + .switch__control,
.switch__control--hover.switch__control--on {
  background: var(--surface-action-hover);
  border-color: var(--border-action-hover);
}

.switch__input:focus-visible + .switch__control::after,
.switch__control--focus::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--border-focus);
  border-radius: var(--border-radius-round);
  pointer-events: none;
}

.switch__input:disabled + .switch__control,
.switch__control--disabled {
  background: var(--surface-disabled);
  border-color: var(--border-disabled);
  cursor: not-allowed;
}
.switch__input:disabled + .switch__control .switch__knob,
.switch__control--disabled .switch__knob {
  background: var(--border-disabled);
}

.switch:has(:disabled) {
  cursor: not-allowed;
  color: var(--text-on-disabled);
}

.switch__control--on {
  background: var(--surface-action);
  border-color: var(--border-action);
  justify-content: flex-end;
}
.switch__control--on .switch__knob {
  background: var(--surface-primary);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Theme toggle — light / dark mode control (place in nav, header, settings)
 */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-round);
  background: var(--surface-muted);
}

.theme-toggle__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--min-touch-target, 2.75rem);
  min-height: var(--min-touch-target, 2.75rem);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--border-radius-round);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
}

.theme-toggle__option:hover {
  color: var(--text-body);
  background: var(--surface-action-hover-2);
}

.theme-toggle__option:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

.theme-toggle__option.is-active,
.theme-toggle__option[aria-pressed=true] {
  background: var(--surface-primary);
  color: var(--text-action);
  box-shadow: var(--shadow-xs);
}

.theme-toggle__icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.theme-toggle__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.theme-toggle__label {
  margin-left: var(--space-2);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-medium);
}

/* Compact: icons only (header / toolbar) */
.theme-toggle--compact .theme-toggle__option {
  min-width: var(--min-touch-target, 2.75rem);
  min-height: var(--min-touch-target, 2.75rem);
  padding: 0;
}

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

/* Switch variant (reuses switch track semantics) */
.theme-toggle--switch {
  padding: 0;
  border: 0;
  background: transparent;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-small);
  color: var(--text-body);
}

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

.theme-toggle--switch .theme-toggle__track {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  width: 3rem;
  height: 1.625rem;
  padding: 2px;
  border: 1px solid var(--border-action);
  border-radius: var(--border-radius-round);
  background: var(--surface-primary);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.theme-toggle--switch .theme-toggle__knob {
  width: 1.5rem;
  height: 1.25rem;
  border-radius: var(--border-radius-round);
  background: var(--surface-action);
  box-shadow: 0 1px 2px oklch(0% 0 0deg / 0.12);
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
}

.theme-toggle--switch .theme-toggle__input:checked + .theme-toggle__track {
  background: var(--surface-action);
  border-color: var(--border-action);
  justify-content: flex-end;
}
.theme-toggle--switch .theme-toggle__input:checked + .theme-toggle__track .theme-toggle__knob {
  background: var(--surface-primary);
}

.theme-toggle--switch:hover:not(:has(:disabled)) .theme-toggle__input:not(:checked) + .theme-toggle__track {
  background: var(--surface-action-hover-2);
  border-color: var(--border-action-hover);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Progress — PimentCSS v1
 */
.progress {
  display: block;
  width: 100%;
  max-width: 16rem;
  height: 4px;
  overflow: hidden;
  background: var(--surface-disabled);
  border-radius: var(--border-radius-round);
}

.progress--sm {
  height: 2px;
}

.progress__fill {
  display: block;
  height: 100%;
  min-width: 0;
  background: var(--surface-action);
  border-radius: var(--border-radius-round);
  transition: width 250ms cubic-bezier(0.2, 0, 0, 1);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  max-width: 32rem;
}

.progress-bar__label {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-action);
}

.progress-bar--sm .progress {
  height: 2px;
}

.progress-bar--md .progress {
  height: 4px;
}

.progress-circle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
}

.progress-circle--sm {
  width: 4rem;
  height: 4rem;
}

.progress-circle__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-circle__track,
.progress-circle__fill {
  fill: none;
  stroke-linecap: butt;
}

.progress-circle__track {
  stroke: var(--surface-disabled);
}

.progress-circle__fill {
  stroke: var(--surface-action);
  transition: stroke-dasharray 250ms cubic-bezier(0.2, 0, 0, 1);
}

.progress-circle--sm .progress-circle__track,
.progress-circle--sm .progress-circle__fill {
  stroke-width: 4px;
}

.progress-circle--md .progress-circle__track,
.progress-circle--md .progress-circle__fill,
.progress-circle:not(.progress-circle--sm) .progress-circle__track,
.progress-circle:not(.progress-circle--sm) .progress-circle__fill {
  stroke-width: 6px;
}

.progress-circle__label {
  position: absolute;
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  color: var(--text-action);
  text-align: center;
  line-height: 1;
  pointer-events: none;
}

.progress-circle--sm .progress-circle__label {
  font-size: var(--font-size-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
}

.progress-circle--md .progress-circle__label,
.progress-circle:not(.progress-circle--sm) .progress-circle__label {
  font-size: var(--font-size-body-large);
  letter-spacing: var(--letter-spacing-body-large);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Snackbar — PimentCSS v1
 */
.snackbar {
  --snackbar-accent: var(--text-action);
  --snackbar-progress-fill: var(--surface-action);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 31.9375rem;
  padding: 1.25rem 1rem calc(1.25rem + 2px);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-family-body);
  overflow: hidden;
}

.snackbar--brand {
  --snackbar-accent: var(--text-action);
  --snackbar-progress-fill: var(--surface-action);
}

.snackbar--information {
  --snackbar-accent: var(--text-information);
  --snackbar-progress-fill: var(--icon-information);
}

.snackbar--success {
  --snackbar-accent: var(--text-success);
  --snackbar-progress-fill: var(--icon-success);
}

.snackbar--warning {
  --snackbar-accent: var(--text-warning);
  --snackbar-progress-fill: var(--icon-warning);
}

.snackbar--error {
  --snackbar-accent: var(--text-error);
  --snackbar-progress-fill: var(--icon-error);
}

.snackbar__main {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.snackbar__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--snackbar-accent);
}
.snackbar__icon svg,
.snackbar__icon .ph {
  width: 100%;
  height: 100%;
  font-size: inherit;
}

.snackbar__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.snackbar__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.snackbar__title {
  margin: 0;
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--letter-spacing-body-large);
  color: var(--snackbar-accent);
}

.snackbar__description {
  margin: 0;
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
}

.snackbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  align-self: flex-start;
  padding: 2px;
  border: 0;
  border-radius: 0.25rem;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--snackbar-accent);
  text-decoration: none;
  cursor: pointer;
}
.snackbar__link:hover .snackbar__link-label {
  text-decoration: underline;
}

.snackbar__link-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
  text-decoration: none;
}
.snackbar__link-icon svg,
.snackbar__link-icon .ph,
.snackbar__link-icon i[class*=ph-] {
  width: 100%;
  height: 100%;
  font-size: 1.25rem;
}

.snackbar__link-label {
  white-space: nowrap;
}

.snackbar__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.snackbar__close svg,
.snackbar__close .ph {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}
.snackbar__close:hover {
  color: var(--text-body);
  background: var(--surface-muted);
}
.snackbar__close:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.snackbar__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: none;
  border-radius: 0;
}
.snackbar__progress .progress__fill {
  background: var(--snackbar-progress-fill);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Tree — PimentCSS v1
 */
.tree {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 9.375rem; /* 150px — composant spec */
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree__group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tree__group[hidden] {
  display: none !important;
}

.tree__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem;
  border-radius: 0.25rem;
}
.tree__row:focus-within {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.tree__row--level-2 {
  padding-inline: 1rem 0.25rem;
}

.tree__row--level-3 {
  gap: 0.75rem;
  padding-block: 0.4375rem;
  padding-inline: 1rem 0.25rem;
}

/* Expand/collapse button (Indicator spec) */
.tree__toggle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 128px;
  background: var(--surface-primary);
  color: var(--text-action);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.tree__toggle:hover, .tree__toggle.tree__toggle--hover {
  background: var(--surface-action-hover-2);
}
.tree__toggle:focus-visible, .tree__toggle.tree__toggle--focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  z-index: 1;
}

.tree__toggle-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
}

.tree__toggle--open .tree__toggle-icon {
  transform: rotate(90deg);
}

.tree__toggle-spacer {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
}

/* Label link + icon */
.tree__content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  min-width: 0;
  min-height: 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-body-medium);
  text-align: left;
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.tree__content:hover, .tree__content.tree__content--hover {
  color: var(--text-body);
}
.tree__content:focus-visible, .tree__content.tree__content--focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 0.25rem;
}

.tree__icon {
  display: flex;
  flex: 0 0 1.25rem;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 0;
  color: inherit;
}
.tree__icon .ph {
  font-size: 1rem;
}

.tree__label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree__row--selected .tree__content,
.tree__content[aria-current=true] {
  color: var(--text-action);
}
.tree__row--selected .tree__content:hover, .tree__row--selected .tree__content.tree__content--hover,
.tree__content[aria-current=true]:hover,
.tree__content[aria-current=true].tree__content--hover {
  color: var(--border-active);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * List — PimentCSS v1
 */
.list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list__heading {
  margin: 0;
}

.list__items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* 24px indicator — Process (number) or Icon */
.list__indicator {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  border-radius: 128px;
  background: var(--surface-action-hover-2);
  color: var(--primary-600);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  text-align: center;
}

.list__indicator-icon {
  display: block;
  width: 1rem;
  height: 1rem;
  color: inherit;
}

.list__indicator .ph {
  font-size: 1rem;
}

.list__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding-block: 0.25rem;
}

.list__title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-heading-h6);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-heading-h6);
  letter-spacing: var(--letter-spacing-heading-h6);
  color: var(--text-headings);
}

.list__description {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Loader — PimentCSS v1
 * 8 points en orbite — Primary / Secondary × 24–48px
 */
@keyframes -loader-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
.loader {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  color: var(--surface-action);
}
.loader--primary {
  color: var(--surface-action);
}
.loader--secondary {
  color: var(--neutral-400);
}
.loader--48 {
  width: 3rem;
  height: 3rem;
  --loader-orbit: 0.5625rem;
  --loader-dot: 0.375rem;
}
.loader--48 .loader__dot {
  width: 0.375rem;
  height: 0.375rem;
  margin: calc(-0.5 * 0.375rem);
}
.loader--40 {
  width: 2.5rem;
  height: 2.5rem;
  --loader-orbit: 0.46875rem;
  --loader-dot: 0.3125rem;
}
.loader--40 .loader__dot {
  width: 0.3125rem;
  height: 0.3125rem;
  margin: calc(-0.5 * 0.3125rem);
}
.loader--32 {
  width: 2rem;
  height: 2rem;
  --loader-orbit: 0.375rem;
  --loader-dot: 0.25rem;
}
.loader--32 .loader__dot {
  width: 0.25rem;
  height: 0.25rem;
  margin: calc(-0.5 * 0.25rem);
}
.loader--24 {
  width: 1.5rem;
  height: 1.5rem;
  --loader-orbit: 0.28125rem;
  --loader-dot: 0.1875rem;
}
.loader--24 .loader__dot {
  width: 0.1875rem;
  height: 0.1875rem;
  margin: calc(-0.5 * 0.1875rem);
}

.loader__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 128px;
  background: currentColor;
  animation: -loader-pulse 1.2s cubic-bezier(0.2, 0, 0, 1) infinite;
}
.loader__dot:nth-child(1) {
  transform: rotate(0deg) translateY(calc(-1 * var(--loader-orbit)));
  animation-delay: 0s;
}
.loader__dot:nth-child(2) {
  transform: rotate(45deg) translateY(calc(-1 * var(--loader-orbit)));
  animation-delay: 0.15s;
}
.loader__dot:nth-child(3) {
  transform: rotate(90deg) translateY(calc(-1 * var(--loader-orbit)));
  animation-delay: 0.3s;
}
.loader__dot:nth-child(4) {
  transform: rotate(135deg) translateY(calc(-1 * var(--loader-orbit)));
  animation-delay: 0.45s;
}
.loader__dot:nth-child(5) {
  transform: rotate(180deg) translateY(calc(-1 * var(--loader-orbit)));
  animation-delay: 0.6s;
}
.loader__dot:nth-child(6) {
  transform: rotate(225deg) translateY(calc(-1 * var(--loader-orbit)));
  animation-delay: 0.75s;
}
.loader__dot:nth-child(7) {
  transform: rotate(270deg) translateY(calc(-1 * var(--loader-orbit)));
  animation-delay: 0.9s;
}
.loader__dot:nth-child(8) {
  transform: rotate(315deg) translateY(calc(-1 * var(--loader-orbit)));
  animation-delay: 1.05s;
}

/*! PimentCSS v1 — Webmonster.tech × numera11y — https://piment.webmonster.tech */
/**
 * Depth demos — (doc only)
 */
.depth-inset-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  background: var(--neutral-700);
  border-radius: 0.5rem;
}

.depth-inset-item {
  width: 12rem;
  height: 12rem;
  border-radius: 0.5rem;
  background: var(--neutral-900);
  box-shadow: var(--shadow-inset);
}

.depth-elevation-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
}

.depth-elevation-item {
  width: 12rem;
  height: 12rem;
  border-radius: 0.5rem;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
}

.depth-spec {
  margin: 0;
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  color: var(--text-body);
  font-family: ui-monospace, "Cascadia Code", monospace;
}

.depth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.depth-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.depth-card__label {
  margin: 0;
  font-weight: var(--font-weight-semi-bold);
  color: var(--text-body);
}