@charset "UTF-8";
/* Design tokens (Light values). These are base tokens and do not force light theme by default. */
/* stylelint-disable color-no-hex */
:root {
  /* Brand */
  --brand-h: 270; /* violet — aligné avec app.css */
  --brand-s: 75%;
  --brand-l: 55%;
  /* Semantic tokens (light defaults, overridden by dark theme below) */
  --accent: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --bg: hsl(210 20% 98%);
  --surface: #fff;
  --text: hsl(220 22% 15%);
  --text-muted: hsl(220 12% 40%);
  --border: hsl(220 14% 92%);
  /* Radii and shadows */
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-1:
    0 1px 2px hsl(220 40% 2% / 0.04), 0 8px 24px hsl(220 40% 2% / 0.06);
  --shadow-2:
    0 2px 6px hsl(220 40% 2% / 0.05), 0 12px 32px hsl(220 40% 2% / 0.1);
  /* Typography */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, Inter, "Segoe UI", Roboto, Arial;
  /* Navbar on transparent (over imagery) */
  --nav-on-transparent: #fff;
  --nav-on-transparent-muted: rgba(255, 255, 255, 0.75);
  /* On-accent readable text */
  --on-accent: #fff;
  /* Semantic state & elevation tokens */
  --accent-hover: color-mix(in oklab, var(--accent) 90%, black);
  --accent-active: color-mix(in oklab, var(--accent) 80%, black);
  --surface-2: color-mix(in oklab, var(--surface) 92%, var(--text) 8%);
  --surface-3: color-mix(in oklab, var(--surface) 85%, var(--text) 15%);
  --border-strong: color-mix(in oklab, var(--border) 60%, var(--text) 40%);
  --focus-ring: color-mix(in oklab, var(--accent) 35%, transparent);
  /* Status tokens */
  --success: hsl(150 70% 40%);
  --warning: hsl(38 90% 52%);
  --danger: hsl(350 80% 50%);
  --info: hsl(205 80% 55%);
  --on-success: #fff;
  --on-warning: #111;
  --on-danger: #fff;
  --on-info: #fff;
  /* Validation borders */
  --state-invalid-border: color-mix(in oklab, var(--danger) 60%, var(--border));
  --state-valid-border: color-mix(in oklab, var(--success) 60%, var(--border));
}

/* stylelint-enable color-no-hex */
/* Dark theme as default via html without data-theme OR with data-theme="dark" */
html:not([data-theme]),
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: hsl(220 22% 9%);
  --surface: hsl(220 22% 13%);
  --text: hsl(0 0% 98%);
  --text-muted: hsl(220 10% 65%);
  --border: hsl(220 12% 22%);
  --accent: hsl(var(--brand-h) calc(var(--brand-s) - 10%) 62%);
}

/* Explicit light variant (only applied when forced) */
html[data-theme="light"] {
  color-scheme: light;
  --bg: hsl(210 20% 98%);
  --text: hsl(220 22% 15%);
  --text-muted: hsl(220 12% 40%);
  --border: hsl(220 14% 92%);
  --accent: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
}

/* Bridge Bootstrap → tokens : voir assets/css/app.css (chargé après, gagne la cascade) */

/*!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
 * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root,
html[data-theme="light"] {
  --bs-blue: #63b3ed;
  --bs-indigo: #596cff;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #f56565;
  --bs-orange: #ed9017;
  --bs-yellow: #fbd38d;
  --bs-green: #81e6d9;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #525252;
  --bs-gray-dark: #262626;
  --bs-gray-100: #f5f5f5;
  --bs-gray-200: #e5e5e5;
  --bs-gray-300: #d4d4d4;
  --bs-gray-400: #a3a3a3;
  --bs-gray-500: #737373;
  --bs-gray-600: #525252;
  --bs-gray-700: #404040;
  --bs-gray-800: #262626;
  --bs-gray-900: #171717;
  --bs-primary: #ff4d00;
  --bs-secondary: #f2f5f2;
  --bs-success: #84bbad;
  --bs-info: #1a73e8;
  --bs-warning: #ed9017;
  --bs-danger: #f44335;
  --bs-light: #e5e5e5;
  --bs-dark: #262626;
  --bs-white: #fff;
  --bs-dark-blue: #1a237e;
  --bs-primary-rgb: 255, 77, 0;
  --bs-secondary-rgb: 242, 245, 242;
  --bs-success-rgb: 132, 187, 173;
  --bs-info-rgb: 26, 115, 232;
  --bs-warning-rgb: 237, 144, 23;
  --bs-danger-rgb: 244, 67, 53;
  --bs-light-rgb: 229, 229, 229;
  --bs-dark-rgb: 38, 38, 38;
  --bs-white-rgb: 255, 255, 255;
  --bs-dark-blue-rgb: 26, 35, 126;
  --bs-primary-text-emphasis: rgb(102, 30.8, 0);
  --bs-secondary-text-emphasis: rgb(96.8, 98, 96.8);
  --bs-success-text-emphasis: rgb(52.8, 74.8, 69.2);
  --bs-info-text-emphasis: rgb(10.4, 46, 92.8);
  --bs-warning-text-emphasis: rgb(94.8, 57.6, 9.2);
  --bs-danger-text-emphasis: rgb(97.6, 26.8, 21.2);
  --bs-light-text-emphasis: #404040;
  --bs-dark-text-emphasis: #404040;
  --bs-primary-bg-subtle: rgb(255, 219.4, 204);
  --bs-secondary-bg-subtle: rgb(252.4, 253, 252.4);
  --bs-success-bg-subtle: rgb(230.4, 241.4, 238.6);
  --bs-info-bg-subtle: rgb(209.2, 227, 250.4);
  --bs-warning-bg-subtle: rgb(251.4, 232.8, 208.6);
  --bs-danger-bg-subtle: rgb(252.8, 217.4, 214.6);
  --bs-light-bg-subtle: #fafafa;
  --bs-dark-bg-subtle: #a3a3a3;
  --bs-primary-border-subtle: rgb(255, 183.8, 153);
  --bs-secondary-border-subtle: rgb(249.8, 251, 249.8);
  --bs-success-border-subtle: rgb(205.8, 227.8, 222.2);
  --bs-info-border-subtle: rgb(163.4, 199, 245.8);
  --bs-warning-border-subtle: rgb(247.8, 210.6, 162.2);
  --bs-danger-border-subtle: rgb(250.6, 179.8, 174.2);
  --bs-light-border-subtle: #e5e5e5;
  --bs-dark-border-subtle: #737373;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 17, 17, 17;
  --bs-font-sans-serif: Inter, Helvetica, Arial, sans-serif;
  --bs-font-monospace:
    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  --bs-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  );
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #737373;
  --bs-body-color-rgb: 115, 115, 115;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #111111;
  --bs-emphasis-color-rgb: 17, 17, 17;
  --bs-secondary-color: rgba(115, 115, 115, 0.75);
  --bs-secondary-color-rgb: 115, 115, 115;
  --bs-secondary-bg: #e5e5e5;
  --bs-secondary-bg-rgb: 229, 229, 229;
  --bs-tertiary-color: rgba(115, 115, 115, 0.5);
  --bs-tertiary-color-rgb: 115, 115, 115;
  --bs-tertiary-bg: #f5f5f5;
  --bs-tertiary-bg-rgb: 245, 245, 245;
  --bs-heading-color: #262626;
  --bs-link-color: #ff4d00;
  --bs-link-color-rgb: 255, 77, 0;
  --bs-link-decoration: none;
  --bs-link-hover-color: #ff4d00;
  --bs-link-hover-color-rgb: 255, 77, 0;
  --bs-link-hover-decoration: none;
  --bs-code-color: #d63384;
  --bs-highlight-color: #737373;
  --bs-highlight-bg: #fcf8e3;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #d4d4d4;
  --bs-border-color-translucent: rgba(17, 17, 17, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.125rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 0.75rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --bs-box-shadow-sm: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12);
  --bs-box-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(17, 17, 17, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(255, 77, 0, 0.25);
  --bs-form-valid-color: #66d432;
  --bs-form-valid-border-color: #66d432;
  --bs-form-invalid-color: #fd5c70;
  --bs-form-invalid-border-color: #fd5c70;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bs-body-color: #d4d4d4;
  --bs-body-color-rgb: 212, 212, 212;
  --bs-body-bg: #171717;
  --bs-body-bg-rgb: 23, 23, 23;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(212, 212, 212, 0.75);
  --bs-secondary-color-rgb: 212, 212, 212;
  --bs-secondary-bg: #262626;
  --bs-secondary-bg-rgb: 38, 38, 38;
  --bs-tertiary-color: rgba(212, 212, 212, 0.5);
  --bs-tertiary-color-rgb: 212, 212, 212;
  --bs-tertiary-bg: rgb(30.5, 30.5, 30.5);
  --bs-tertiary-bg-rgb: 31, 31, 31;
  --bs-primary-text-emphasis: rgb(255, 148.2, 102);
  --bs-secondary-text-emphasis: rgb(247.2, 249, 247.2);
  --bs-success-text-emphasis: rgb(181.2, 214.2, 205.8);
  --bs-info-text-emphasis: rgb(117.6, 171, 241.2);
  --bs-warning-text-emphasis: rgb(244.2, 188.4, 115.8);
  --bs-danger-text-emphasis: rgb(248.4, 142.2, 133.8);
  --bs-light-text-emphasis: #f5f5f5;
  --bs-dark-text-emphasis: #d4d4d4;
  --bs-primary-bg-subtle: rgb(51, 15.4, 0);
  --bs-secondary-bg-subtle: rgb(48.4, 49, 48.4);
  --bs-success-bg-subtle: rgb(26.4, 37.4, 34.6);
  --bs-info-bg-subtle: rgb(5.2, 23, 46.4);
  --bs-warning-bg-subtle: rgb(47.4, 28.8, 4.6);
  --bs-danger-bg-subtle: rgb(48.8, 13.4, 10.6);
  --bs-light-bg-subtle: #262626;
  --bs-dark-bg-subtle: rgb(27.5, 27.5, 27.5);
  --bs-primary-border-subtle: rgb(153, 46.2, 0);
  --bs-secondary-border-subtle: rgb(145.2, 147, 145.2);
  --bs-success-border-subtle: rgb(79.2, 112.2, 103.8);
  --bs-info-border-subtle: rgb(15.6, 69, 139.2);
  --bs-warning-border-subtle: rgb(142.2, 86.4, 13.8);
  --bs-danger-border-subtle: rgb(146.4, 40.2, 31.8);
  --bs-light-border-subtle: #404040;
  --bs-dark-border-subtle: #262626;
  --bs-heading-color: inherit;
  --bs-link-color: rgb(255, 148.2, 102);
  --bs-link-hover-color: rgb(255, 169.56, 132.6);
  --bs-link-color-rgb: 255, 148, 102;
  --bs-link-hover-color-rgb: 255, 170, 133;
  --bs-code-color: rgb(230.4, 132.6, 181.2);
  --bs-highlight-color: #d4d4d4;
  --bs-highlight-bg: rgb(235.94, 198.34, 132.54);
  --bs-border-color: #404040;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: rgb(134.04, 231, 218.52);
  --bs-form-valid-border-color: rgb(134.04, 231, 218.52);
  --bs-form-invalid-color: rgb(245.4, 107.16, 107.16);
  --bs-form-invalid-border-color: rgb(245.4, 107.16, 107.16);
}

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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(17, 17, 17, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}


h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

h2,
.h2 {
  font-size: calc(1.35rem + 1.2vw);
}
@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 2.25rem;
  }
}

h3,
.h3 {
  font-size: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 1.875rem;
  }
}

h4,
.h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4,
  .h4 {
    font-size: 1.5rem;
  }
}

h5,
.h5 {
  font-size: 1.25rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 2rem;
}

ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

b,
strong {
  font-weight: 700;
}

small,
.small {
  font-size: 0.875em;
}

a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: none;
}
a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
  text-decoration: none;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}


code {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
}

code {
  font-size: 0.875em;
  color: var(--bs-code-color);
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not(
    [type="week"]
  ):not([type="time"])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

[hidden] {
  display: none !important;
}

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}

.figure {
  display: inline-block;
}

.container,
.container-fluid {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  
  .container {
    max-width: 1320px;
  }
}
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

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

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


.gx-0 {
  --bs-gutter-x: 0;
}

.g-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3 {
  --bs-gutter-x: 1rem;
}

.g-3 {
  --bs-gutter-y: 1rem;
}

@media (min-width: 576px) {
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}
@media (min-width: 768px) {
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
}
@media (min-width: 1200px) {
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
}
.table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: #737373;
  --bs-table-bg: transparent;
  --bs-table-border-color: #e5e5e5;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #737373;
  --bs-table-striped-bg: rgba(17, 17, 17, 0.05);
  --bs-table-active-color: #737373;
  --bs-table-active-bg: rgba(17, 17, 17, 0.1);
  --bs-table-hover-color: #737373;
  --bs-table-hover-bg: rgba(17, 17, 17, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: var(
    --bs-table-color-state,
    var(--bs-table-color-type, var(--bs-table-color))
  );
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px
    var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-active {
  --bs-table-color-state: var(--bs-table-active-color);
  --bs-table-bg-state: var(--bs-table-active-bg);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.form-label {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #737373;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #404040;
  appearance: none;
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid #d2d6da;
  border-radius: 0.375rem;
  transition: 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control:focus {
  color: #404040;
  background-color: transparent;
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}
.form-control::-webkit-date-and-time-value {
  min-width: 85px;
  height: 1.5rem;
  margin: 0;
}
.form-control::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
.form-control::placeholder {
  color: #737373;
  opacity: 1;
}
.form-control:disabled {
  background-color: #e5e5e5;
  opacity: 1;
}
.form-control::file-selector-button {
  padding: 0.5rem 0;
  margin: -0.5rem 0;
  margin-inline-end: 0;
  color: #404040;
  background-color: transparent;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: all 0.15s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-secondary-bg);
}

.form-control-lg {
  min-height: unset;
  padding: 0.75rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}
.form-control-lg::file-selector-button {
  padding: 0.75rem 0.75rem;
  margin: -0.75rem -0.75rem;
  margin-inline-end: 0.75rem;
}

textarea.form-control {
  min-height: unset;
}
textarea.form-control-lg {
  min-height: unset;
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #404040;
  appearance: none;
  background-color: transparent;
  background-image:
    var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 16px 12px;
  border: 1px solid #d2d6da;
  border-radius: 0.375rem;
  transition: 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
.form-select:focus {
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}
.form-select[multiple],
.form-select[size]:not([size="1"]) {
  padding-right: 0;
  background-image: none;
}
.form-select:disabled {
  color: #525252;
  background-color: #e5e5e5;
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #404040;
}

[data-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d4d4d4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check {
  display: block;
  min-height: auto;
  padding-left: 1.73em;
  margin-bottom: 0.125rem;
}
.form-check .form-check-input {
  float: left;
  margin-left: -1.73em;
}

.form-check-input {
  --bs-form-check-bg: #fff;
  flex-shrink: 0;
  width: 1.23em;
  height: 1.23em;
  margin-top: 0.135em;
  vertical-align: top;
  appearance: none;
  background-color: var(--bs-form-check-bg);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  print-color-adjust: exact;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    background-position 0.15s ease-in-out,
    opacity 0.15s ease-out,
    box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-check-input {
    transition: none;
  }
}
.form-check-input[type="checkbox"] {
  border-radius: 0.35rem;
}
.form-check-input[type="radio"] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(99%);
}
.form-check-input:focus {
  border-color: none;
  outline: 0;
  box-shadow: none;
}
.form-check-input:checked {
  background-color: transparent;
  border-color: transparent;
}
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: linear-gradient(195deg, #ec407a 0%, #d81b60 100%);
}
.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: linear-gradient(195deg, #ec407a 0%, #d81b60 100%);
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #ff4d00;
  border-color: #ff4d00;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 0.5;
}

.form-switch {
  padding-left: 2.375rem;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: none;
  width: 1.875rem;
  margin-left: -2.375rem;
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  border-radius: 1.875rem;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    background-position 0.15s ease-in-out,
    opacity 0.15s ease-out,
    box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: none;
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: none;
}

[data-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 5;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 5;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #262626;
  text-align: center;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid #d2d6da;
  border-radius: 0.375rem;
}

.input-group:not(.has-validation)
  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
    .form-floating
  ),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group
  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
    .valid-feedback
  ):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(1px * -1);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #66d432;
  padding-right: unset;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3e%3cpath fill='%2366d432' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: #66d432;
  box-shadow: 0 0 0 2px rgba(102, 212, 50, 0.25);
}

.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
  padding-right: unset;
  background-position: top 0.75rem right 0.75rem;
}

.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: #66d432;
}
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3e%3cpath fill='%2366d432' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  padding-right: 1rem;
  background-position:
    right 0 center,
    center right 1rem;
  background-size:
    16px 12px,
    1rem 1rem;
}
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
  border-color: #66d432;
  box-shadow: 0 0 0 2px rgba(102, 212, 50, 0.25);
}

.was-validated .form-check-input:valid,
.form-check-input.is-valid {
  border-color: #66d432;
}
.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: #66d432;
}
.was-validated .form-check-input:valid:focus,
.form-check-input.is-valid:focus {
  box-shadow: 0 0 0 2px rgba(102, 212, 50, 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: #66d432;
}

.was-validated .input-group > .form-control:not(:focus):valid,
.input-group > .form-control:not(:focus).is-valid,
.was-validated .input-group > .form-select:not(:focus):valid,
.input-group > .form-select:not(:focus).is-valid {
  z-index: 3;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #fd5c70;
}

.was-validated :invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-feedback {
  display: block;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #fd5c70;
  padding-right: unset;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fd5c70' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fd5c70' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #fd5c70;
  box-shadow: 0 0 0 2px rgba(253, 92, 112, 0.25);
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-right: unset;
  background-position: top 0.75rem right 0.75rem;
}

.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: #fd5c70;
}
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fd5c70' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fd5c70' stroke='none'/%3e%3c/svg%3e");
  padding-right: 1rem;
  background-position:
    right 0 center,
    center right 1rem;
  background-size:
    16px 12px,
    1rem 1rem;
}
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
  border-color: #fd5c70;
  box-shadow: 0 0 0 2px rgba(253, 92, 112, 0.25);
}

.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
  border-color: #fd5c70;
}
.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
  background-color: #fd5c70;
}
.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 2px rgba(253, 92, 112, 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: #fd5c70;
}

.was-validated .input-group > .form-control:not(:focus):invalid,
.input-group > .form-control:not(:focus).is-invalid,
.was-validated .input-group > .form-select:not(:focus):invalid,
.input-group > .form-select:not(:focus).is-invalid {
  z-index: 4;
}

.btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.25rem;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 0.375rem;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem
    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: all 0.15s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}

:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

:not(.btn-check) + .btn:active:focus-visible,
.btn:first-child:active:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled,
.btn.disabled {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-primary {
  --bs-btn-color: #111111;
  --bs-btn-bg: #ff4d00;
  --bs-btn-border-color: #ff4d00;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: rgb(255, 103.7, 38.25);
  --bs-btn-hover-border-color: rgb(255, 94.8, 25.5);
  --bs-btn-focus-shadow-rgb: 219, 68, 3;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: rgb(255, 112.6, 51);
  --bs-btn-active-border-color: rgb(255, 94.8, 25.5);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #111111;
  --bs-btn-disabled-bg: #ff4d00;
  --bs-btn-disabled-border-color: #ff4d00;
}

.btn-secondary {
  --bs-btn-color: #111111;
  --bs-btn-bg: #f2f5f2;
  --bs-btn-border-color: #f2f5f2;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: rgb(243.95, 246.5, 243.95);
  --bs-btn-hover-border-color: rgb(243.3, 246, 243.3);
  --bs-btn-focus-shadow-rgb: 208, 211, 208;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: rgb(244.6, 247, 244.6);
  --bs-btn-active-border-color: rgb(243.3, 246, 243.3);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #111111;
  --bs-btn-disabled-bg: #f2f5f2;
  --bs-btn-disabled-border-color: #f2f5f2;
}

.btn-success {
  --bs-btn-color: #111111;
  --bs-btn-bg: #84bbad;
  --bs-btn-border-color: #84bbad;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: rgb(150.45, 197.2, 185.3);
  --bs-btn-hover-border-color: rgb(144.3, 193.8, 181.2);
  --bs-btn-focus-shadow-rgb: 115, 162, 150;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: rgb(156.6, 200.6, 189.4);
  --bs-btn-active-border-color: rgb(144.3, 193.8, 181.2);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #111111;
  --bs-btn-disabled-bg: #84bbad;
  --bs-btn-disabled-border-color: #84bbad;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1a73e8;
  --bs-btn-border-color: #1a73e8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(22.1, 97.75, 197.2);
  --bs-btn-hover-border-color: rgb(20.8, 92, 185.6);
  --bs-btn-focus-shadow-rgb: 60, 136, 235;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(20.8, 92, 185.6);
  --bs-btn-active-border-color: rgb(19.5, 86.25, 174);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1a73e8;
  --bs-btn-disabled-border-color: #1a73e8;
}

.btn-warning {
  --bs-btn-color: #111111;
  --bs-btn-bg: #ed9017;
  --bs-btn-border-color: #ed9017;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: rgb(239.7, 160.65, 57.8);
  --bs-btn-hover-border-color: rgb(238.8, 155.1, 46.2);
  --bs-btn-focus-shadow-rgb: 204, 125, 22;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: rgb(240.6, 166.2, 69.4);
  --bs-btn-active-border-color: rgb(238.8, 155.1, 46.2);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #111111;
  --bs-btn-disabled-bg: #ed9017;
  --bs-btn-disabled-border-color: #ed9017;
}

.btn-danger {
  --bs-btn-color: #111111;
  --bs-btn-bg: #f44335;
  --bs-btn-border-color: #f44335;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: rgb(245.65, 95.2, 83.3);
  --bs-btn-hover-border-color: rgb(245.1, 85.8, 73.2);
  --bs-btn-focus-shadow-rgb: 210, 59, 48;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: rgb(246.2, 104.6, 93.4);
  --bs-btn-active-border-color: rgb(245.1, 85.8, 73.2);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #111111;
  --bs-btn-disabled-bg: #f44335;
  --bs-btn-disabled-border-color: #f44335;
}

.btn-outline-primary {
  --bs-btn-color: #ff4d00;
  --bs-btn-border-color: #ff4d00;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: #ff4d00;
  --bs-btn-hover-border-color: #ff4d00;
  --bs-btn-focus-shadow-rgb: 255, 77, 0;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: #ff4d00;
  --bs-btn-active-border-color: #ff4d00;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #ff4d00;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ff4d00;
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #f2f5f2;
  --bs-btn-border-color: #f2f5f2;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: #f2f5f2;
  --bs-btn-hover-border-color: #f2f5f2;
  --bs-btn-focus-shadow-rgb: 242, 245, 242;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: #f2f5f2;
  --bs-btn-active-border-color: #f2f5f2;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #f2f5f2;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f2f5f2;
  --bs-gradient: none;
}

.btn-outline-success {
  --bs-btn-color: #84bbad;
  --bs-btn-border-color: #84bbad;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: #84bbad;
  --bs-btn-hover-border-color: #84bbad;
  --bs-btn-focus-shadow-rgb: 132, 187, 173;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: #84bbad;
  --bs-btn-active-border-color: #84bbad;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #84bbad;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #84bbad;
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: #1a73e8;
  --bs-btn-border-color: #1a73e8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1a73e8;
  --bs-btn-hover-border-color: #1a73e8;
  --bs-btn-focus-shadow-rgb: 26, 115, 232;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1a73e8;
  --bs-btn-active-border-color: #1a73e8;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #1a73e8;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #1a73e8;
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-color: #f44335;
  --bs-btn-border-color: #f44335;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: #f44335;
  --bs-btn-hover-border-color: #f44335;
  --bs-btn-focus-shadow-rgb: 244, 67, 53;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: #f44335;
  --bs-btn-active-border-color: #f44335;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #f44335;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f44335;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #e5e5e5;
  --bs-btn-border-color: #e5e5e5;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: #e5e5e5;
  --bs-btn-hover-border-color: #e5e5e5;
  --bs-btn-focus-shadow-rgb: 229, 229, 229;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: #e5e5e5;
  --bs-btn-active-border-color: #e5e5e5;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #e5e5e5;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #e5e5e5;
  --bs-gradient: none;
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: #ff4d00;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #ff4d00;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #ff4d00;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #525252;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 219, 68, 3;
  text-decoration: none;
}
.btn-link:hover,
.btn-link:focus-visible {
  text-decoration: none;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}

.btn-lg {
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 0.5rem;
}

.btn-sm {
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: 0.5rem;
}

.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}


.dropdown,
.dropdown-center {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 11rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 1.625rem;
  --bs-dropdown-font-size: 0.875rem;
  --bs-dropdown-color: #737373;
  --bs-dropdown-bg: #fff;
  --bs-dropdown-border-color: transparent;
  --bs-dropdown-border-radius: 0.375rem;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-inner-border-radius: 0.375rem;
  --bs-dropdown-divider-bg: transparent;
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --bs-dropdown-link-color: #737373;
  --bs-dropdown-link-hover-color: #262626;
  --bs-dropdown-link-hover-bg: #e5e5e5;
  --bs-dropdown-link-active-color: #737373;
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-disabled-color: #525252;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.3rem;
  --bs-dropdown-header-color: #525252;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}

.dropdown-menu-start {
  --bs-position: start;
}

.dropdown-menu-end {
  --bs-position: end;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
}
@media (min-width: 1400px) {
  .dropdown-menu-xxl-start {
    --bs-position: start;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
  }
}

.dropdown-divider {
  height: 0;
  margin: var(--bs-dropdown-divider-margin-y) 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-dropdown-divider-bg);
  opacity: 1;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled,
.dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: var(--bs-dropdown-header-padding-y)
    var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  color: var(--bs-dropdown-link-color);
}

.dropdown-menu-dark {
  --bs-dropdown-color: #d4d4d4;
  --bs-dropdown-bg: #262626;
  --bs-dropdown-border-color: transparent;
  --bs-dropdown-box-shadow: ;
  --bs-dropdown-link-color: #d4d4d4;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-divider-bg: transparent;
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-active-color: #737373;
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-disabled-color: #737373;
  --bs-dropdown-header-color: #737373;
}

.btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
  z-index: 1;
}

.btn-group {
  border-radius: 0.375rem;
}
.btn-group > :not(.btn-check:first-child) + .btn,
.btn-group > .btn-group:not(:first-child) {
  margin-left: calc(1px * -1);
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child,
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:nth-child(n + 3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
.dropdown-toggle-split::after {
  margin-left: 0;
}

.btn-sm + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-lg + .dropdown-toggle-split {
  padding-right: 1.3125rem;
  padding-left: 1.3125rem;
}

.btn-group .btn:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: #525252;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  background: none;
  border: 0;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover,
.nav-link:focus {
  color: var(--bs-nav-link-hover-color);
}
.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(255, 77, 0, 0.25);
}
.nav-link.disabled,
.nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  --bs-nav-tabs-border-width: 1px;
  --bs-nav-tabs-border-color: #d4d4d4;
  --bs-nav-tabs-border-radius: 0.375rem;
  --bs-nav-tabs-link-hover-border-color: #e5e5e5 #e5e5e5 #d4d4d4;
  --bs-nav-tabs-link-active-color: #404040;
  --bs-nav-tabs-link-active-bg: #fff;
  --bs-nav-tabs-link-active-border-color: #d4d4d4 #d4d4d4 #fff;
  border-bottom: var(--bs-nav-tabs-border-width) solid
    var(--bs-nav-tabs-border-color);
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
  border: var(--bs-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: var(--bs-nav-tabs-link-hover-border-color);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
}
.nav-tabs .dropdown-menu {
  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

.navbar {
  --bs-navbar-padding-x: 0.75rem;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: #262626;
  --bs-navbar-hover-color: rgba(38, 38, 38, 0.7);
  --bs-navbar-disabled-color: rgba(38, 38, 38, 0.3);
  --bs-navbar-active-color: rgba(38, 38, 38, 0.9);
  --bs-navbar-brand-padding-y: 0.40625rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.125rem;
  --bs-navbar-brand-color: rgba(38, 38, 38, 0.9);
  --bs-navbar-brand-hover-color: rgba(38, 38, 38, 0.9);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.125rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23262626' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(38, 38, 38, 0.1);
  --bs-navbar-toggler-border-radius: 0.375rem;
  --bs-navbar-toggler-focus-width: 0.2rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.navbar > .container,
.navbar > .container-fluid {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: var(--bs-navbar-brand-color);
  white-space: nowrap;
}
.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--bs-navbar-brand-hover-color);
}

.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--bs-navbar-active-color);
}
.navbar-nav .dropdown-menu {
  position: static;
}

.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-navbar-color);
}
.navbar-text a,
.navbar-text a:hover,
.navbar-text a:focus {
  color: var(--bs-navbar-active-color);
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: var(--bs-navbar-color);
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  transition: var(--bs-navbar-toggler-transition);
}
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
.navbar-toggler:hover {
  text-decoration: none;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xxl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}
.navbar-expand .offcanvas {
  position: static;
  z-index: auto;
  flex-grow: 1;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  background-color: transparent !important;
  border: 0 !important;
  transform: none !important;
  transition: none;
}
.navbar-expand .offcanvas .offcanvas-header {
  display: none;
}
.navbar-expand .offcanvas .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}

.navbar-dark {
  --bs-navbar-color: rgba(255, 255, 255, 0.85);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="dark"] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: 0;
  --bs-card-border-color: #e5e5e5;
  --bs-card-border-radius: 0.5rem;
  --bs-card-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bs-card-inner-border-radius: 0.5rem;
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: #fff;
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: #fff;
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card {
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius);
}

.card:hover {
  box-shadow: var(--shadow-2);
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}

.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
  color: var(--bs-card-title-color);
}

.breadcrumb {
  --bs-breadcrumb-padding-x: 1rem;
  --bs-breadcrumb-padding-y: 0.5rem;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: #e5e5e5;
  --bs-breadcrumb-border-radius: 0.375rem;
  --bs-breadcrumb-divider-color: #525252;
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: #525252;
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, "/")
    /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: #ff4d00;
  --bs-pagination-bg: #fff;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: #d4d4d4;
  --bs-pagination-border-radius: 0.375rem;
  --bs-pagination-hover-color: #ff4d00;
  --bs-pagination-hover-bg: #e5e5e5;
  --bs-pagination-hover-border-color: #d4d4d4;
  --bs-pagination-focus-color: #ff4d00;
  --bs-pagination-focus-bg: #e5e5e5;
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(255, 77, 0, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #ff4d00;
  --bs-pagination-active-border-color: #ff4d00;
  --bs-pagination-disabled-color: #525252;
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: #d4d4d4;
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid
    var(--bs-pagination-border-color);
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
.page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}
.page-link.active,
.active > .page-link {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}
.page-link.disabled,
.disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}

.page-item:not(:first-child) .page-link {
  margin-left: calc(1px * -1);
}
.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.badge {
  --bs-badge-padding-x: 0.9em;
  --bs-badge-padding-y: 0.55em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: 0.45rem;
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
}
.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: 0 solid var(--bs-alert-border-color);
  --bs-alert-border-radius: 0.375rem;
  --bs-alert-link-color: inherit;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 600;
  color: var(--bs-alert-link-color);
}

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}

.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}

.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}

.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.alert-light {
  --bs-alert-color: var(--bs-light-text-emphasis);
  --bs-alert-bg: var(--bs-light-bg-subtle);
  --bs-alert-border-color: var(--bs-light-border-subtle);
  --bs-alert-link-color: var(--bs-light-text-emphasis);
}

.alert-dark {
  --bs-alert-color: var(--bs-dark-text-emphasis);
  --bs-alert-bg: var(--bs-dark-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-border-subtle);
  --bs-alert-link-color: var(--bs-dark-text-emphasis);
}

.alert-white {
  --bs-alert-color: var(--bs-white-text-emphasis);
  --bs-alert-bg: var(--bs-white-bg-subtle);
  --bs-alert-border-color: var(--bs-white-border-subtle);
  --bs-alert-link-color: var(--bs-white-text-emphasis);
}

.alert-dark-blue {
  --bs-alert-color: var(--bs-dark-blue-text-emphasis);
  --bs-alert-bg: var(--bs-dark-blue-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-blue-border-subtle);
  --bs-alert-link-color: var(--bs-dark-blue-text-emphasis);
}

@keyframes progress-bar-stripes {
  0% {
    background-position-x: 6px;
  }
}

.list-group {
  --bs-list-group-color: inherit;
  --bs-list-group-bg: #fff;
  --bs-list-group-border-color: rgba(17, 17, 17, 0.125);
  --bs-list-group-border-width: 1px;
  --bs-list-group-border-radius: 0.375rem;
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-action-color: #404040;
  --bs-list-group-action-hover-color: #404040;
  --bs-list-group-action-hover-bg: #f5f5f5;
  --bs-list-group-action-active-color: #737373;
  --bs-list-group-action-active-bg: #e5e5e5;
  --bs-list-group-disabled-color: #525252;
  --bs-list-group-disabled-bg: #fff;
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #ff4d00;
  --bs-list-group-active-border-color: #ff4d00;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-list-group-border-radius);
}

.list-group-item-action {
  width: 100%;
  color: var(--bs-list-group-action-color);
  text-align: inherit;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
  color: var(--bs-list-group-action-hover-color);
  text-decoration: none;
  background-color: var(--bs-list-group-action-hover-bg);
}
.list-group-item-action:active {
  color: var(--bs-list-group-action-active-color);
  background-color: var(--bs-list-group-action-active-bg);
}

.list-group-item {
  position: relative;
  display: block;
  padding: var(--bs-list-group-item-padding-y)
    var(--bs-list-group-item-padding-x);
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
  border: var(--bs-list-group-border-width) solid
    var(--bs-list-group-border-color);
}
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item.disabled,
.list-group-item:disabled {
  color: var(--bs-list-group-disabled-color);
  pointer-events: none;
  background-color: var(--bs-list-group-disabled-bg);
}
.list-group-item.active {
  z-index: 2;
  color: var(--bs-list-group-active-color);
  background-color: var(--bs-list-group-active-bg);
  border-color: var(--bs-list-group-active-border-color);
}
.list-group-item + .list-group-item {
  border-top-width: 0;
}
.list-group-item + .list-group-item.active {
  margin-top: calc(-1 * var(--bs-list-group-border-width));
  border-top-width: var(--bs-list-group-border-width);
}
.list-group-flush {
  border-radius: 0;
}
.list-group-flush > .list-group-item {
  border-width: 0 0 var(--bs-list-group-border-width);
}
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.btn-close {
  --bs-btn-close-color: #fff;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.2rem rgba(255, 77, 0, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}
.btn-close:hover {
  color: var(--bs-btn-close-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity);
}
.btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity);
}
.btn-close:disabled,
.btn-close.disabled {
  pointer-events: none;
  user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity);
}

[data-theme="dark"] .btn-close {
  filter: var(--bs-btn-close-white-filter);
}

.toast {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.75rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-toast-bg: rgba(255, 255, 255, 0.85);
  --bs-toast-border-width: 0;
  --bs-toast-border-color: transparent;
  --bs-toast-border-radius: 0.375rem;
  --bs-toast-box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --bs-toast-header-color: #262626;
  --bs-toast-header-bg: rgba(255, 255, 255, 0.85);
  --bs-toast-header-border-color: rgba(0, 0, 0, 0.05);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
}
.toast.showing {
  opacity: 0;
}
.toast:not(.show) {
  display: none;
}

/* Tokenized toasts */
.toast {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.toast-header {
  background: var(--surface-3);
  color: var(--text-muted);
}

/* Toast variants */
.toast-success {
  background: color-mix(in oklab, var(--surface-2) 80%, var(--success) 20%);
  border-color: color-mix(in oklab, var(--border) 70%, var(--success) 30%);
}

.toast-warning {
  background: color-mix(in oklab, var(--surface-2) 80%, var(--warning) 20%);
  border-color: color-mix(in oklab, var(--border) 70%, var(--warning) 30%);
}

.toast-danger {
  background: color-mix(in oklab, var(--surface-2) 80%, var(--danger) 20%);
  border-color: color-mix(in oklab, var(--border) 70%, var(--danger) 30%);
}

.toast-info {
  background: color-mix(in oklab, var(--surface-2) 80%, var(--info) 20%);
  border-color: color-mix(in oklab, var(--border) 70%, var(--info) 30%);
}

.toast .btn-close {
  filter: none;
  opacity: 0.7;
}

.toast .btn-close:hover {
  opacity: 1;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
  color: var(--bs-toast-header-color);
  background-color: var(--bs-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--bs-toast-border-width) solid
    var(--bs-toast-header-border-color);
  border-top-left-radius: calc(
    var(--bs-toast-border-radius) - var(--bs-toast-border-width)
  );
  border-top-right-radius: calc(
    var(--bs-toast-border-radius) - var(--bs-toast-border-width)
  );
}
.toast-header .btn-close {
  margin-right: calc(-0.5 * var(--bs-toast-padding-x));
  margin-left: var(--bs-toast-padding-x);
}

.toast-body {
  padding: var(--bs-toast-padding-x);
  word-wrap: break-word;
}

.modal {
  --bs-modal-zindex: 1050;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: ;
  --bs-modal-bg: #fff;
  --bs-modal-border-color: rgba(17, 17, 17, 0.2);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 0.5rem;
  --bs-modal-box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12);
  --bs-modal-inner-border-radius: calc(0.5rem - 1px);
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: #d4d4d4;
  --bs-modal-header-border-width: 1px;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: #d4d4d4;
  --bs-modal-footer-border-width: 1px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

/* Tokenized modal visuals */
.modal-content {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-2);
}

.modal-backdrop.show {
  background: color-mix(in oklab, var(--text) 60%, transparent);
}

.modal-backdrop {
  --bs-backdrop-zindex: 1040;
  --bs-backdrop-bg: #111111;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid
    var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5)
    calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-modal-header-padding-y))
    calc(-0.5 * var(--bs-modal-header-padding-x))
    calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid
    var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  .modal-sm {
    --bs-modal-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header,
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header,
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header,
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}
.tooltip {
  --bs-tooltip-zindex: 1070;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: 0;
  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: #fff;
  --bs-tooltip-bg: #111111;
  --bs-tooltip-border-radius: 0.375rem;
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  margin: var(--bs-tooltip-margin);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: var(--bs-tooltip-opacity);
}
.tooltip .tooltip-arrow {
  display: block;
  width: var(--bs-tooltip-arrow-width);
  height: var(--bs-tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

/* rtl:begin:ignore */

/* rtl:end:ignore */

/* rtl:begin:ignore */

/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--bs-tooltip-max-width);
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  color: var(--bs-tooltip-color);
  text-align: center;
  background-color: var(--bs-tooltip-bg);
  border-radius: var(--bs-tooltip-border-radius);
}

.popover {
  --bs-popover-zindex: 1060;
  --bs-popover-max-width: 276px;
  --bs-popover-font-size: 0.75rem;
  --bs-popover-bg: #fff;
  --bs-popover-border-width: 0px;
  --bs-popover-border-color: rgba(17, 17, 17, 0.2);
  --bs-popover-border-radius: 0.5rem;
  --bs-popover-inner-border-radius: calc(0.5rem - 0px);
  --bs-popover-box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
  --bs-popover-header-font-size: 1rem;
  --bs-popover-header-color: #262626;
  --bs-popover-header-bg: #e5e5e5;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 1rem;
  --bs-popover-body-color: #737373;
  --bs-popover-arrow-width: 1rem;
  --bs-popover-arrow-height: 0.5rem;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
  z-index: var(--bs-popover-zindex);
  display: block;
  max-width: var(--bs-popover-max-width);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-popover-bg);
  background-clip: padding-box;
  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-radius: var(--bs-popover-border-radius);
}
.popover .popover-arrow {
  display: block;
  width: var(--bs-popover-arrow-width);
  height: var(--bs-popover-arrow-height);
}
.popover .popover-arrow::before,
.popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

/* rtl:begin:ignore */

/* rtl:end:ignore */

/* rtl:begin:ignore */

/* rtl:end:ignore */
.popover-header {
  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
  margin-bottom: 0;
  font-size: var(--bs-popover-header-font-size);
  color: var(--bs-popover-header-color);
  background-color: var(--bs-popover-header-bg);
  border-bottom: var(--bs-popover-border-width) solid
    var(--bs-popover-border-color);
  border-top-left-radius: var(--bs-popover-inner-border-radius);
  border-top-right-radius: var(--bs-popover-inner-border-radius);
}
.popover-header:empty {
  display: none;
}

.popover-body {
  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
  color: var(--bs-popover-body-color);
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
.offcanvas,
.offcanvas-xxl,
.offcanvas-xl,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: var(--bs-body-bg);
  --bs-offcanvas-border-width: 1px;
  --bs-offcanvas-border-color: rgba(17, 17, 17, 0.2);
  --bs-offcanvas-box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: 1.5;
}

@media (max-width: 575.98px) {
  .offcanvas-sm {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-sm {
    transition: none;
  }
}
@media (max-width: 575.98px) {
  .offcanvas-sm.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-sm.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-sm.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-sm.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-sm.showing,
  .offcanvas-sm.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-sm.showing,
  .offcanvas-sm.show {
    visibility: visible;
  }
}
@media (min-width: 576px) {
  .offcanvas-sm {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-sm .offcanvas-header {
    display: none;
  }
  .offcanvas-sm .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 767.98px) {
  .offcanvas-md {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-md {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .offcanvas-md.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-md.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-md.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-md.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-md.showing,
  .offcanvas-md.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-md.showing,
  .offcanvas-md.show {
    visibility: visible;
  }
}
@media (min-width: 768px) {
  .offcanvas-md {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-md .offcanvas-header {
    display: none;
  }
  .offcanvas-md .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 991.98px) {
  .offcanvas-lg {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-lg {
    transition: none;
  }
}
@media (max-width: 991.98px) {
  .offcanvas-lg.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-lg.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-lg.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-lg.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-lg.showing,
  .offcanvas-lg.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-lg.showing,
  .offcanvas-lg.show {
    visibility: visible;
  }
}
@media (min-width: 992px) {
  .offcanvas-lg {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-lg .offcanvas-header {
    display: none;
  }
  .offcanvas-lg .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 1199.98px) {
  .offcanvas-xl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xl {
    transition: none;
  }
}
@media (max-width: 1199.98px) {
  .offcanvas-xl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xl.showing,
  .offcanvas-xl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xl.showing,
  .offcanvas-xl.show {
    visibility: visible;
  }
}
@media (min-width: 1200px) {
  .offcanvas-xl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xl .offcanvas-header {
    display: none;
  }
  .offcanvas-xl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 1399.98px) {
  .offcanvas-xxl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xxl {
    transition: none;
  }
}
@media (max-width: 1399.98px) {
  .offcanvas-xxl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xxl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xxl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xxl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid
      var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xxl.showing,
  .offcanvas-xxl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xxl.showing,
  .offcanvas-xxl.show {
    visibility: visible;
  }
}
@media (min-width: 1400px) {
  .offcanvas-xxl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xxl .offcanvas-header {
    display: none;
  }
  .offcanvas-xxl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  visibility: hidden;
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  transition: var(--bs-offcanvas-transition);
}
@media (prefers-reduced-motion: reduce) {
  .offcanvas {
    transition: none;
  }
}
.offcanvas.offcanvas-start {
  top: 0;
  left: 0;
  width: var(--bs-offcanvas-width);
  border-right: var(--bs-offcanvas-border-width) solid
    var(--bs-offcanvas-border-color);
  transform: translateX(-100%);
}
.offcanvas.offcanvas-end {
  top: 0;
  right: 0;
  width: var(--bs-offcanvas-width);
  border-left: var(--bs-offcanvas-border-width) solid
    var(--bs-offcanvas-border-color);
  transform: translateX(100%);
}
.offcanvas.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-bottom: var(--bs-offcanvas-border-width) solid
    var(--bs-offcanvas-border-color);
  transform: translateY(-100%);
}
.offcanvas.offcanvas-bottom {
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-top: var(--bs-offcanvas-border-width) solid
    var(--bs-offcanvas-border-color);
  transform: translateY(100%);
}
.offcanvas.showing,
.offcanvas.show:not(.hiding) {
  transform: none;
}
.offcanvas.showing,
.offcanvas.show {
  visibility: visible;
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #111111;
}
.offcanvas-backdrop.fade {
  opacity: 0;
}
.offcanvas-backdrop.show {
  opacity: 0.5;
}

.offcanvas-header {
  display: flex;
  align-items: center;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}
.offcanvas-header .btn-close {
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5)
    calc(var(--bs-offcanvas-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-offcanvas-padding-y))
    calc(-0.5 * var(--bs-offcanvas-padding-x))
    calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
}

.offcanvas-title {
  margin-bottom: 0;
  line-height: var(--bs-offcanvas-title-line-height);
}

.offcanvas-body {
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: auto;
}

.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  opacity: 0.5;
}
.placeholder.btn::before {
  display: inline-block;
  content: "";
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}

@keyframes placeholder-wave {
  100% {
    mask-position: -200% 0%;
  }
}

.text-bg-secondary {
  color: #111111 !important;
  background-color: RGBA(
    var(--bs-secondary-rgb),
    var(--bs-bg-opacity, 1)
  ) !important;
}

.text-bg-info {
  color: #fff !important;
  background-color: RGBA(
    var(--bs-info-rgb),
    var(--bs-bg-opacity, 1)
  ) !important;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.align-middle {
  vertical-align: middle !important;
}

.overflow-auto {
  overflow: auto !important;
}

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

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

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

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

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

.shadow-sm {
  box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12) !important;
}

.position-relative {
  position: relative !important;
}

.border {
  border: 1px solid #d4d4d4 !important;
}

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

.border-bottom {
  border-bottom: 1px solid #d4d4d4 !important;
}

.border-0 {
  border-width: 0 !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

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

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

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

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

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

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

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

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

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

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

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

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

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

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

.me-auto {
  margin-right: auto !important;
}

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

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

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

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

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

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

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

.ms-auto {
  margin-left: auto !important;
}

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

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

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

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

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

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

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

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

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

.fs-3 {
  font-size: calc(1.3125rem + 0.75vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.text-end {
  text-align: right !important;
}

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

.text-decoration-none {
  text-decoration: none !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* rtl:begin:remove */

/* rtl:end:remove */
.text-primary {
  color: #ff4d00 !important;
}

.text-warning {
  color: #ed9017 !important;
}

.text-danger {
  color: #f44335 !important;
}

.text-muted {
  color: #525252 !important;
}

.text-reset {
  color: inherit !important;
}

.bg-white {
  background-color: #fff !important;
}

.rounded-3 {
  border-radius: 0.5rem !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media (min-width: 576px) {
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
@media (min-width: 768px) {
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mt-md-0 {
    margin-top: 0 !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
}
@media (min-width: 992px) {
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}
@media (min-width: 1200px) {
  .d-xl-flex {
    display: flex !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
}
@media (min-width: 1400px) {
  .d-xxl-inline {
    display: inline !important;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
}
@media (min-width: 1200px) {
  .fs-3 {
    font-size: 1.875rem !important;
  }
  .fs-4 {
    font-size: 1.5rem !important;
  }
}
:root {
  --body-bg: #ffffff;
  --body-color: #212529;
  --drop-border-color: #6c757d;
  --drop-bg-color: #ffffff;
  --drop-text-color: #495057;
  --drop-border-active: #0dcaf0;
  --drop-bg-highlight: #e9ecef;
}

:is(html:not([data-theme]), html[data-theme="dark"]) {
  --body-bg: #121212;
  --body-color: #e0e0e0;
  --primary-text-emphasis: #bb86fc;
  --secondary-text-emphasis: #03dac6;
  --success-text-emphasis: #4caf50;
  --info-text-emphasis: #2196f3;
  --warning-text-emphasis: #ff9800;
  --danger-text-emphasis: #ff7675;
  --border-color: #333333;
  --link-color: #bb86fc;
  --link-hover-color: #d0a3ff;
  --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
  --nav-tabs-active-bg: #1e1e1e;
  --nav-tabs-active-text: #ffffff;
  --navbar-bg: #0e0e0e;
  --navbar-color: #e0e0e0;
  --navbar-hover-color: #bb86fc;
  --navbar-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  --halo-bg: rgba(187, 134, 252, 0.6);
  --halo-blur: 120px;
  --halo-animation-speed: 8s;
  --primary-bg-subtle: #181818;
  --secondary-bg-subtle: #222222;
  --tertiary-bg-subtle: #2a2a2a;
  --border-color-translucent: rgba(255, 255, 255, 0.1);
  --box-shadow-color: rgba(0, 0, 0, 0.6);
  --danger-bg-subtle: #9a1b1b;
  --icon-info-color: #a991f7;
  --drop-border-color: #bb86fc;
  --drop-bg-color: #1e1e1e;
  --drop-text-color: #e0e0e0;
  --drop-border-active: #0dcaf0;
  --drop-bg-highlight: #333333;
  --tertiary-bg-subtle-hover: rgb(57.3, 57.3, 57.3);
}

/* =============== 🎨 Boutons - Styles généraux =============== */
.btn {
  padding: 10px 15px;
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 500;
  border-radius: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 90px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
  flex: 1 1 auto;
}
.btn:hover {
  transform: scale(1.05);
}
.btn:active {
  transform: scale(0.95);
}
.btn i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* 🎨 Personnalisation des boutons */
.btn-outline-danger {
  color: #ff7675;
  border-color: #ff7675;
}
.btn-outline-danger:hover {
  background: rgba(255, 118, 117, 0.2);
  border-color: rgb(255, 168.6304347826, 168);
}

.btn-outline-success {
  color: #26de81;
  border-color: #26de81;
}
.btn-outline-success:hover {
  background: rgba(38, 222, 129, 0.2);
}

/* =============== 📱 Adaptation mobile =============== */
@media (max-width: 992px) {
  .button-group {
    flex-direction: column;
    align-items: center;
  }
  .btn {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .btn {
    font-size: 0.9rem;
    padding: 8px 12px;
  } /* Mode ultra-compact : ne garder que l’icône si l’espace manque */
  .btn-compact {
    font-size: 0;
    padding: 10px;
  }
  .btn-compact i {
    font-size: 1.4rem;
  }
}
/* 📱 Adaptation aux très petits écrans */
@media (max-width: 500px) {
  .btn {
    font-size: 0.9rem;
    padding: 8px 12px;
  }
  /* Mode ultra-compact : ne garder que l’icône si l’espace manque */
  .btn-compact {
    font-size: 0;
    padding: 10px;
  }
  .btn-compact i {
    font-size: 1.4rem;
  }
}
/* ========================
   Layout structure global
   ======================== */
/* Corps et conteneur principal en flex, plein écran */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Vues principales: occupent l'espace disponible */
[data-view] {
  flex: 1 1 auto;
  min-height: 0;
}

/* Zones scrollables internes (tableaux, panneaux) */

.table-resume,
.tools-section-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Espace constant en bas de l'app */
:root {
  --app-bottom-gap: 16px;
}

main > .container-fluid {
  padding-bottom: calc(var(--app-bottom-gap) + env(safe-area-inset-bottom));
}

/* Onglets: n'afficher que l'actif et à pleine hauteur */
.tab-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tab-content > .tab-pane {
  display: none !important;
}

.tab-content > .tab-pane.active {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

/* Zone texte qui remplit l'espace, outils en bas */
.text-section {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

#textarea,
#textarea2,
#textarea3 {
  flex: 1 1 auto;
  min-height: 0;
}

.tools-section {
  margin-top: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}

:root {
  --bs-body-font-size: clamp(
    1rem,
    1vw + 0.5rem,
    1.3rem
  ); /* Taille de base du texte */
  --bs-line-height: 1.6; /* Espacement du texte */
  --drop-border-color: var(--border);
  --drop-bg-color: var(--bg);
  --drop-text-color: var(--text);
  --drop-border-active: var(--accent);
  --drop-bg-highlight: color-mix(in oklab, var(--accent) 18%, transparent);
  --drop-border-confirm: var(--accent);
  --drop-bg-confirm: color-mix(in oklab, var(--accent) 16%, transparent);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Appliquer ces valeurs au body */
body {
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-line-height);
}

/* Ajuster les titres */

h2,
.h2 {
  font-size: clamp(1.8rem, 4vw, 2rem);
}

h3,
.h3 {
  font-size: clamp(1.5rem, 3.5vw, 1.75rem);
}

p {
  font-size: var(--bs-body-font-size);
}

/* Navbar */
.navbar {
  font-size: clamp(1rem, 2vw, 1.1rem);
}

.navbar-brand {
  font-size: 1.3rem; /* Augmente la taille du logo/titre */
  font-weight: bold; /* Rendre plus visible */
}

.navbar-nav .nav-link {
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 500; /* Rendre les liens plus visibles */
}

/* main */
#phraseBase,
#phraseSujet,
#sujetTest,
#phraseCompl,
#complTestShow,
#textarea3 {
  font-size: clamp(1.3rem, 1rem + 2vw, 2.1rem);
  line-height: 1.75;
  display: inline-block;
  align-items: center;
}

.box {
  display: inline-block;
}

/* Navbar */
/* Conteneur des onglets */
.nav-tabs {
  border-bottom: none;
  display: flex;
  justify-content: space-between;
}

/* Style des boutons */
.nav-tabs .nav-link {
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  background: transparent;
  border: none;
  position: relative;
  transition: all 0.3s ease-in-out;
  border-radius: 6px 6px 0 0;
}

/* Animation de la barre sous l'onglet actif */
.nav-tabs .nav-link::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  transition: width 0.3s ease-in-out;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

/* Animation pour l'onglet actif */
.nav-tabs .nav-link.active::after {
  width: 100%;
}

/* Désactiver l'effet de flou sur les onglets désactivés */
.nav-tabs .nav-link.disabled {
  cursor: not-allowed;
}

/* Responsive - Ajustement sur petits écrans */
@media (max-width: 768px) {
  .nav-tabs .nav-link {
    font-size: 0.8rem;
    padding: 5px 8px;
  }
}
/* Utilities complémentaires (maison) */
.min-w-0 {
  min-width: 0 !important;
}

.resize-none {
  resize: none !important;
}

.max-h-200 {
  max-height: 200px !important;
}

/* Generic links (non-buttons) use accent tokens */
a:not(.btn) {
  color: var(--accent);
}

a:not(.btn):hover {
  color: var(--accent-hover);
}

a:not(.btn):active {
  color: var(--accent-active);
}

/* Strong borders utility */

/* Theme switch bouton
   Consolidated in `assets/css/components.css` to avoid conflicts with
   the compact pill switch implementation. Removing legacy styles here
   prevents the bundle from overriding the app styles on future builds. */
/* Ex-index.html inline styles migrated here */
.pronom-btn {
  width: 100px;
}

.draggable {
  cursor: grab;
  position: relative;
  z-index: 1000;
}

.draggable:active {
  cursor: grabbing;
}

.cestqui {
  font-weight: 500;
  color: var(--text-muted);
}

.qv {
  position: relative;
  overflow: visible !important;
}

#textarea2 {
  overflow: visible !important;
}

/* Skip link accessibility */

/* Desktop corpus switcher */
#desktopNavCenter {
  /* Container behavior to avoid layout shift */
  display: flex;
  gap: 0.5rem;
  min-width: 0; /* allow inner overflow-auto to clamp */
}
#desktopNavCenter .corpus-chip {
  white-space: nowrap;
  max-width: clamp(180px, 22vw, 320px);
  text-overflow: ellipsis;
  overflow: hidden;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}
#desktopNavCenter .corpus-chip.btn-outline-secondary:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}
#desktopNavCenter .corpus-chip.btn-primary {
  font-weight: 600;
}

/* Force-hide the legacy mobile menu on desktop (override navbar-expand-lg) */
@media (min-width: 992px) {
  .navbar .navbar-collapse#navbarContent {
    display: none !important;
  }
}
/* Responsive compacting for corpus chips on tighter widths */
@media (max-width: 1400px) {
  #desktopNavCenter {
    gap: 0.4rem;
  }
  #desktopNavCenter .corpus-chip {
    font-size: 0.95rem;
  }
}
@media (max-width: 1200px) {
  #desktopNavCenter {
    gap: 0.35rem;
  }
  #desktopNavCenter .corpus-chip {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
  }
}
@media (max-width: 1060px) {
  #desktopNavCenter {
    gap: 0.3rem;
  }
  #desktopNavCenter .corpus-chip {
    font-size: 0.85rem;
    padding: 0.25rem 0.55rem;
  }
}
/* Improve horizontal scrolling UX (optional subtle scrollbar) */
#corpusSwitcher {
  overflow-x: auto;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}

/* Right side alignment and compactness */
.navbar .right-sticky {
  flex: 0 0 auto;
  white-space: nowrap;
}

.navbar .right-sticky .nav-link {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.navbar .right-sticky,
.navbar .right-sticky .navbar-nav {
  margin-bottom: 0 !important;
}

/* Navbar toggler (offcanvas) style to match dark menu */
.navbar .navbar-toggler {
  background-color: transparent !important;
  color: var(--nav-on-transparent);
  border-color: color-mix(in oklab, var(--nav-on-transparent) 35%, transparent);
  padding: 0.25rem 0.5rem;
}

.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
  color: var(--nav-on-transparent);
  border-color: color-mix(in oklab, var(--nav-on-transparent) 60%, transparent);
  box-shadow: none;
}

.navbar .navbar-toggler .bi {
  color: currentColor;
}

/* Top mobile navigator */
.top-mobile-nav {
  flex: 0 0 auto !important;
  gap: 0.35rem;
}

.top-mobile-nav .btn {
  padding: 0.2rem 0.5rem;
  flex: 0 0 auto;
  width: auto;
}

.top-mobile-nav #topMobilePhraseLabel {
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.top-mobile-nav .btn {
  border-color: color-mix(in oklab, var(--nav-on-transparent) 35%, transparent);
  color: var(--nav-on-transparent);
}

.top-mobile-nav .btn:hover {
  border-color: color-mix(in oklab, var(--nav-on-transparent) 60%, transparent);
  color: var(--nav-on-transparent);
}

/* Collapse menu: compact chips */
@media (max-width: 991.98px) {
  .navbar .container-fluid {
    position: relative;
  }
  .top-mobile-nav {
    position: absolute;
    left: 50%;
    top: 0.45rem; /* fixed offset from top of navbar */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 1;
  }
  #navbarContent #menu {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    padding: 3rem 0.25rem 0.75rem; /* leave room under the top-mobile-nav */
  }
  #navbarContent #menu .nav-link {
    padding: 0 !important;
  }
  #navbarContent #menu .corpus-chip {
    font-size: 0.9rem;
    padding: 0.25rem 0.6rem;
  }
  #navbarContent #menu .corpus-chip.active,
  #navbarContent #menu .corpus-chip:active {
    color: var(--on-accent);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
  }
}
/* Center the desktop nav block with flex without overlapping */
#desktopNavCenter {
  margin-left: auto;
  margin-right: auto;
  flex: 0 1 auto;
}

/* ---------------*/
/* Boite à outils */
/* ---------------*/
/* Liste des verbes: déplacée dans custom/_components.scss */
@media (max-width: 576px) {
  .col-sm-3 {
    max-height: 200px;
    overflow-y: auto;
  }
  .qv.rc.mh.h-100 {
    height: auto !important;
  }
  .btn {
    padding: 6px 8px; /* Réduit l'espace interne */
    font-size: 14px; /* Réduit la taille du texte */
  }
  .btn i {
    font-size: 16px;
  }
  .button-group {
    height: 51px;
  }
  hr {
    margin: 5px 0; /* Réduit l'espace au-dessus et en dessous */
  }
}
/* Responsive listes: déplacé dans custom/_components.scss */
/* .min-height-180 déplacé dans custom/_components.scss */
/* Partie Sujet */
/* C'est qui */
.cest-qui-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  font-size: 1.2rem;
  text-align: center;
}

/* ========================
   Layout structure global
   ======================== */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* S'assure que le conteneur principal est un flex-column avec min-height:0
   pour que la zone centrale puisse prendre la hauteur restante */
main > .container,
main > .container-fluid {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[data-view] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Dans chaque vue: place la toolbox en dernier et occupe l'espace au-dessus */
[data-view] > .tools-section {
  order: 2;
  flex: 0 0 auto;
}

[data-view] > :not(.tools-section) {
  order: 1;
  flex: 1 1 auto;
  min-height: 0;
}


.table-resume,
.tools-section-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

:root {
  --app-bottom-gap: 16px;
}

.tab-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.tab-content > .tab-pane {
  display: none !important;
}

.tab-content > .tab-pane.active {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

/* Dans les onglets applicatifs, la toolbox est collée en bas avec un espace constant */
.tab-content > .tab-pane .tools-section {
  margin-top: auto;
  margin-bottom: var(--app-bottom-gap);
  position: sticky;
  bottom: var(--app-bottom-gap);
  z-index: 2;
}

/* Force le layout de la vue app: nav d'onglets (haut) + contenu extensible + toolbox collée bas */
[data-view="app"]:not(.d-none) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

[data-view="app"] > .mt-4 {
  flex: 0 0 auto;
}

[data-view="app"] > .tab-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Neutralise les hauteurs fixes dans les onglets applicatifs */
.tab-content > .tab-pane .dvh-100,
.tab-content > .tab-pane .h-100:not(.row) {
  height: auto !important;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.text-section {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

#textarea,
#textarea2,
#textarea3 {
  flex: 1 1 auto;
  min-height: 0;
}

.tools-section {
  /* Pousse la toolbox en bas et garde un espace bas constant */
  margin-top: auto;
  margin-bottom: var(--app-bottom-gap);
  position: sticky;
  bottom: var(--app-bottom-gap);
  z-index: 2;
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Unified focus-visible outline */

/* Elevation + radius helpers */

.radius {
  border-radius: var(--radius);
}

.text-muted {
  color: var(--text-muted) !important;
}

/* ========================
   Composants (styles réutilisables)
   ======================== */
/* Listes de verbes / détecteurs */
.listGauche {
  overflow: hidden; /* Empêche les éléments de dépasser */
  max-width: 100%; /* S’assure que la largeur reste limitée */
  margin: 0;
  padding: 0;
}

.listGauche li {
  display: flex;
  align-items: center;
  padding: 8px;
  margin: 6px 0 0 0;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listGauche li span {
  overflow: hidden;
  text-overflow: ellipsis; /* Ajoute les "..." si le texte est trop long */
  white-space: nowrap; /* Empêche le retour à la ligne */
  max-width: calc(
    100% - 24px
  ); /* Ajuste la largeur pour éviter le dépassement */
}

.listGauche li i {
  flex-shrink: 0; /* Empêche l’icône de rétrécir */
  font-size: 1.2rem;
  color: #ff6b6b;
}

@media (max-width: 576px) {
  .listGauche,
  .listDetecteurs {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
    gap: 8px; /* Espacement entre les éléments */
    padding: 0;
  }
  .listGauche li,
  .listDetecteurs li {
    display: inline-flex; /* Important : affiche les éléments en ligne */
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #ccc; /* Optionnel : bordure pour les séparer */
    border-radius: 5px;
  }
  .eraseVerbLeftList {
    margin-right: 5px; /* Espacement entre l'icône et le texte */
  }
}
/* Hauteur minimale bloc utilitaire */
.min-height-180 {
  min-height: 180px;
}

@media (max-width: 576px) {
  .min-height-180 {
    min-height: unset; /* Supprime la hauteur minimum */
  }
}
/* Effet zoom optionnel pour les cards cliquables */
.card-zoom-hover {
  transition: transform 0.2s ease-in-out;
}

.card-zoom-hover:hover {
  transform: scale(1.03);
}

/* Chevron rotation for collapse toggles */
.collapse-toggle .bi-chevron-down {
  transition: transform 0.2s ease-in-out;
}

.collapse-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* Offcanvas responsive width */
/* Scope largeur responsive à l'offcanvas côté droit uniquement */
.offcanvas.offcanvas-end {
  --bs-offcanvas-width: 90vw; /* mobiles */
}

@media (min-width: 576px) {
  /* sm */
  .offcanvas.offcanvas-end {
    --bs-offcanvas-width: 75vw;
  }
}
@media (min-width: 768px) {
  /* md */
  .offcanvas.offcanvas-end {
    --bs-offcanvas-width: 60vw;
  }
}
@media (min-width: 992px) {
  /* lg */
  .offcanvas.offcanvas-end {
    --bs-offcanvas-width: 50vw;
  }
}
@media (min-width: 1200px) {
  /* xl */
  .offcanvas.offcanvas-end {
    --bs-offcanvas-width: 420px;
  }
}
/* Offcanvas icons inherit text color */
.offcanvas .list-group-item i {
  color: currentColor;
  opacity: 0.9;
  font-size: 1rem;
  line-height: 1;
}

/* Offcanvas: spacing normalization */
.offcanvas .list-group-item {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Focus-visible styles for accessibility */
.offcanvas .list-group-item:focus-visible,
.navbar .nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
  border-radius: 0.375rem;
}

/* Nav tabs: prevent wrapping */
.nav-tabs .nav-link {
  white-space: nowrap;
}

/* Menu divider utility (theme-aware via overrides) */

html[data-theme="light"] .nav-tabs .nav-link {
  color: #555;
}

html[data-theme="light"] .nav-tabs .nav-link.active {
  color: #222;
  font-weight: 600;
}

html[data-theme="light"] .nav-tabs .nav-link:not(.active):hover {
  color: #222;
  background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .nav-tabs .nav-link::after {
  background: #ff5722; /* Couleur de l’indicateur pour le mode clair */
}

html[data-theme="light"] .nav-tabs .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

/* ========================
   ☀️ Mode Light - Offcanvas
   ======================== */
html[data-theme="light"] .offcanvas {
  background-color: #fff;
  color: #212529;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
  border-left: 1px solid rgba(0, 0, 0, 0.075);
}

html[data-theme="light"] .offcanvas .list-group-item {
  background-color: transparent;
  color: inherit;
}

html[data-theme="light"] .offcanvas .list-group-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .offcanvas .offcanvas-header.sticky-top {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Dropdowns + dividers in light */
html[data-theme="light"] .dropdown-menu {
  background-color: #fff;
  color: #212529;
  border: 1px solid rgba(0, 0, 0, 0.075);
}

html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:focus {
  background-color: rgba(0, 0, 0, 0.03);
  color: inherit;
}

html[data-theme="light"] .offcanvas hr {
  border-color: rgba(0, 0, 0, 0.075);
  opacity: 1;
}

.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  background: var(--surface);
}

.card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
  transition:
    box-shadow 0.16s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--accent) 30%, transparent);
}

.navbar {
  backdrop-filter: saturate(1.5) blur(8px);
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.06), transparent);
  border-bottom: 1px solid var(--border);
}

/* ===== app: assets/css/app.css ===== */
/*
  Design Tokens — Guide de palette de couleurs
  https://www.figma.com/file/xyz123/Design-Tokens?node-id=0%3A1&t=abc4567890123456-1
*/

/* Design tokens (CSS only). Light tokens at :root; Dark overrides via data-theme */
:root {
  /* Brand */
  --brand-h: 270; /* violet hue */
  --brand-s: 75%;
  --brand-l: 55%;

  /* Core tokens (light baseline) */
  --accent: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  /* Light palette — Apple-like neutral */
  --bg-light: hsl(220 12% 96%);
  --surface-light: hsl(0 0% 100%);
  --surface-light-2: hsl(220 10% 98%);
  --border-light: hsl(220 12% 88%);
  --border-strong-light: hsl(220 12% 80%);
  --shadow-ink-light: rgba(0, 0, 0, 0.12);
  --shadow-ink-light-2: rgba(0, 0, 0, 0.06);
  /* Generic soft elevation (used across modules) */
  --elev-close: rgba(0, 0, 0, 0.08);
  --elev-ambient: rgba(0, 0, 0, 0.08);

  --bg: hsl(210 20% 98%);
  --surface: #fff;
  --text: hsl(220 22% 15%);
  --text-muted: hsl(220 12% 40%);
  --border: hsl(220 14% 92%);

  /* States & elevation */
  --accent-hover: color-mix(in oklab, var(--accent) 90%, black);
  --accent-active: color-mix(in oklab, var(--accent) 80%, black);
  --on-accent: #fff;
  --surface-2: color-mix(in oklab, var(--surface) 92%, var(--text) 8%);
  --surface-3: color-mix(in oklab, var(--surface) 85%, var(--text) 15%);
  --border-strong: color-mix(in oklab, var(--border) 60%, var(--text) 40%);
  --focus-ring: color-mix(in oklab, var(--accent) 70%, transparent);

  /* Status */
  --success: hsl(150 70% 40%);
  --warning: hsl(38 90% 52%);
  --danger: hsl(350 80% 50%);
  --info: hsl(205 80% 55%);
  --on-success: #fff;
  --on-warning: #111;
  --on-danger: #fff;
  --on-info: #fff;
}

/* Dark = défaut quand aucun data-theme n'est posé */
:is(html:not([data-theme]), html[data-theme="dark"]) {
  color-scheme: dark;

  /* Base surfaces — subtle blue-violet tint (Apple-like premium dark) */
  --bg: hsl(228 8% 17%); /* fond global */
  --surface: hsl(228 6% 21%); /* cartes/panneaux */
  --surface-2: hsl(228 5% 25%); /* survols / surfaces plus hautes */
  --surface-creuse: hsl(228 9% 13%); /* zones en retrait / tracks */
  --border: hsl(228 4% 30%); /* trait standard */
  --border-strong: hsl(228 6% 11%); /* ombres profondes / contours nets */

  /* Typo */
  --text: #eaeaea; /* texte principal */
  --text-muted: #b3b3b3; /* texte secondaire */

  /* Accent (violet) */
  --brand-h: 270;
  --brand-s: 75%;
  --accent: hsl(270, 75%, 75%); /* Violet pastel lumineux */
  --accent-hover: color-mix(in oklab, var(--accent) 92%, white 8%);
  --accent-active: color-mix(in oklab, var(--accent) 88%, black 12%);
  --on-accent: #000000; /* Texte sombre sur violet pastel */

  /* Focus ring */
  --focus-ring: color-mix(in oklab, var(--accent) 65%, transparent);

  /* Sémantique */
  --success: hsl(150, 60%, 55%); /* Vert menthe lumineux */
  --warning: hsl(38, 90%, 52%); /* Orange inchangé */
  --danger: hsl(350, 70%, 65%); /* Rouge corail clair */
  --info: hsl(205, 80%, 65%); /* Bleu clair pastel */
  /* Pastel sur fond sombre → texte sombre pour contraste WCAG 4.5:1 */
  --on-success: #111;
  --on-danger: #111;
  --on-info: #111;

  /* Radius */
  --radius: 16px;

  /* Legacy shadow aliases — base.css components (.card, .modal) utilisent ces tokens.
     On les aliasite vers --elev-* pour rester dans le système d'élévation unifié. */
  --shadow-1: var(--elev-1);
  --shadow-2: var(--elev-2);
}

/* Light explicite */
html[data-theme="light"] {
  color-scheme: light;
  /* Off-white background to reduce glare */
  --bg: var(--bg-light);
  --surface: var(--surface-light);
  --surface-2: var(--surface-light-2);
  --text: hsl(220 22% 15%);
  --text-muted: hsl(220 12% 40%);
  --border: var(--border-light);
  --border-strong: var(--border-strong-light);
  /* Accent violet légèrement plus lumineux qu'en dark (62% vs 75%) pour le fond clair */
  --accent: hsl(270, 75%, 62%);
  --on-accent: #fff;
  --bs-body-bg: var(--bg);
  /* Legacy shadow aliases — alignés sur --elev-* light */
  --shadow-1: var(--elev-1);
  --shadow-2: var(--elev-2);
  /* Couleurs sémantiques désaturées pour le fond clair — évite l'effet "feux tricolores".
     Dark garde ses valeurs vives (pastel sur fond sombre = élégant).
     Light les assombrit légèrement pour que border + tint restent lisibles sans crier. */
  --success: hsl(150, 50%, 34%);
  --warning: hsl(38, 75%, 42%);
  --danger: hsl(350, 60%, 43%);
  --info: hsl(205, 62%, 44%);
}

/* Bridge: map our tokens to Bootstrap css variables */
:root,
html,
html[data-theme="dark"],
html[data-theme="light"] {
  /* Base */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-primary: var(--accent);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: color-mix(in oklab, var(--accent) 85%, black);
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-border-radius: var(--radius, 16px);
  --bs-btn-border-radius: var(--radius, 16px);
  --bs-focus-ring-color: var(--focus-ring);

  /* Tabs */
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-link-hover-border-color: var(--border);
  --bs-nav-tabs-link-active-color: var(--text);
  --bs-nav-tabs-link-active-bg: var(--surface-2);
  --bs-nav-tabs-link-active-border-color: var(--border-strong);

  /* Pagination */
  --bs-pagination-color: var(--text);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-hover-border-color: var(--border-strong);
  --bs-pagination-focus-color: var(--text);
  --bs-pagination-focus-bg: var(--surface-2);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring);
  --bs-pagination-active-color: var(--on-accent);
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);

  /* Breadcrumb */
  --bs-breadcrumb-divider-color: var(--text-muted);
  --bs-breadcrumb-item-active-color: var(--text);

  /* Alerts */
  --bs-alert-color: var(--text);
  --bs-alert-bg: var(--surface-2);
  --bs-alert-border-color: var(--border);

  /* Badges (default) */
  --bs-badge-color: var(--on-accent);
  --bs-badge-bg: var(--accent);
}
/* Token-based component polish (safe defaults) */

/* ===== ELEVATION SYSTEM — Apple-like Soft Depth ===== */
:root {
  /* === Border radii === */
  --neu-radius: 14px;
  --neu-radius-sm: 10px;
  --neu-radius-md: 14px;
  --neu-radius-lg: 18px;
  --neu-radius-xl: 24px;
  --neu-radius-pill: 999px;

  /* === Transitions === */
  --neu-transition-fast: 120ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --neu-transition-default: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --neu-transition-slow: 250ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* === Z-index scale === */
  --z-raised: 1; /* au-dessus du fond / pseudo-éléments */
  --z-float: 2; /* flottant dans un scroll container (cols sticky, modal header) */
  --z-sticky: 3; /* sticky table footers/headers */
  --z-backdrop: 1050; /* modal backdrops */
  --z-modal: 1060; /* modals */
  --z-modal-2: 1065; /* backdrop for stacked modal */
  --z-modal-top: 1070; /* second modal (stacked) */
  --z-toast: 1080; /* toast notifications */
  --z-skip: 9999; /* skip link */

  /* === Utilities === */
  --tbl-sep: 1px;
  --manual-nav-offset: calc(56px + 2 * var(--bs-navbar-padding-y, 0.5rem));
}

@media (min-width: 640px) {
  :root {
    --manual-nav-offset: calc(60px + 2 * var(--bs-navbar-padding-y, 0.5rem));
  }
}
:root,
html[data-theme],
body {
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  :root,
  html[data-theme],
  body {
    transition: none !important;
  }
}

/* color-scheme est géré directement dans les blocs de thème :
   - Dark (défaut) : color-scheme: dark → dans :is(html:not([data-theme]), html[data-theme="dark"])
   - Light explicite : color-scheme: light → dans html[data-theme="light"]
   Pas de media query prefers-color-scheme : iGrammaire est dark par défaut. */

/* === DARK THEME (Default) — Apple-like Elevation === */
:is(html:not([data-theme]), html[data-theme="dark"]) {
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.2);
  --elev-2: 0 4px 10px rgba(0, 0, 0, 0.38), 0 18px 36px rgba(0, 0, 0, 0.22);
  --elev-3: 0 12px 28px rgba(0, 0, 0, 0.45), 0 28px 60px rgba(0, 0, 0, 0.28);
  --surface-tint: rgba(255, 255, 255, 0.03);
  --surface-stroke: rgba(255, 255, 255, 0.06);
  --elev-close: rgba(0, 0, 0, 0.5);
  --elev-ambient: rgba(0, 0, 0, 0.28);

  /* Élévation unique des grands panneaux (ex. .tools-section) : ombre douce
     multi-couches + liseré supérieur. En dark, la profondeur vient surtout de
     l'éclaircissement des fonds (--surface-2/3), l'ombre reste discrète. */
  --shadow-elevated:
    0 1px 3px rgb(0 0 0 / 35%), 0 16px 36px rgb(0 0 0 / 30%),
    inset 0 1px 0 rgb(255 255 255 / 3%);
}

/* === LIGHT THEME — Apple-like Elevation === */
html[data-theme="light"] {
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.08);
  --elev-2: 0 4px 10px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);
  --elev-3: 0 10px 24px rgba(0, 0, 0, 0.14), 0 26px 56px rgba(0, 0, 0, 0.12);
  --surface-tint: rgba(0, 0, 0, 0.02);
  --surface-stroke: rgba(0, 0, 0, 0.06);

  /* En light, l'élévation s'exprime par l'ombre diffuse sur fond clair. */
  --shadow-elevated:
    0 1px 3px rgb(0 0 0 / 6%), 0 14px 30px rgb(0 0 0 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 65%);
}

/* === Responsive border radii === */
@media (max-width: 575.98px) {
  :root {
    --neu-radius-sm: 8px;
    --neu-radius-md: 12px;
    --neu-radius-lg: 14px;
    --neu-radius-xl: 18px;
  }
}

/* ===== CARDS — Neumorphic Elevated Containers ===== */
.card {
  position: relative;
  background: var(--surface);
  border: 0;
  border-radius: var(--neu-radius-lg);
  box-shadow: var(--elev-1);
  overflow: hidden;
  transition:
    box-shadow var(--neu-transition-default),
    transform var(--neu-transition-default),
    background-color var(--neu-transition-default);
}

/* Inner highlight for depth perception */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px var(--surface-stroke),
    inset 0 1px 0 var(--surface-tint);
}

/* Interactive cards: hover lift */
.card:hover:not(.card-static) {
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
}

/* Pressed state for clickable cards */
.card:active:not(.card-static) {
  box-shadow: var(--elev-1);
  transform: translateY(0);
}

/* Static card: no hover effects */

/* ===== INTRO PANEL — Premium Neumorphic Cards ===== */
/* Dark theme intro cards */
:is(html:not([data-theme]), html[data-theme="dark"]) #introPanel .intro-card {
  position: relative;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 35%, transparent);
  border-radius: var(--neu-radius-lg);
  box-shadow: var(--elev-2);
  overflow: hidden;
  transition:
    transform var(--neu-transition-default),
    box-shadow var(--neu-transition-default),
    border-color var(--neu-transition-default);
}

/* No pseudo-element overlay needed in Apple-like style */
:is(html:not([data-theme]), html[data-theme="dark"])
  #introPanel
  .intro-card::before {
  content: none;
}

/* Hover: lift */
:is(html:not([data-theme]), html[data-theme="dark"])
  #introPanel
  .intro-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  box-shadow: var(--elev-3);
}

/* Active/pressed: settle */
:is(html:not([data-theme]), html[data-theme="dark"])
  #introPanel
  .intro-card:active {
  transform: translateY(0);
  box-shadow: var(--elev-1);
}

/* Light theme intro cards — Soft Elevation (premium, realistic) */
html[data-theme="light"] #introPanel .intro-card {
  position: relative;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 18%, transparent);
  border-radius: var(--neu-radius-lg);
  box-shadow:
    0 1px 2px var(--elev-close),
    0 2px 8px var(--elev-ambient);
  overflow: hidden;
  transition:
    transform var(--neu-transition-default),
    box-shadow var(--neu-transition-default),
    border-color var(--neu-transition-default);
}

/* Subtle top highlight — not needed in soft elevation */
html[data-theme="light"] #introPanel .intro-card::before {
  content: none;
}

html[data-theme="light"] #introPanel .intro-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--border) 15%, transparent);
  box-shadow:
    0 2px 4px var(--elev-close),
    0 8px 20px var(--elev-ambient);
}

html[data-theme="light"] #introPanel .intro-card:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px var(--elev-close);
}

html[data-theme="light"] #introPanel .intro-card .card-body {
  background: transparent;
  color: var(--text);
}

html[data-theme="light"] #introPanel .intro-card .card-title {
  color: var(--text);
}
/* Remove forced white body and dark text from markup; use tokens */
:is(html:not([data-theme]), html[data-theme="dark"])
  #introPanel
  .intro-card
  .card-body {
  background: transparent;
  color: var(--text);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  #introPanel
  .intro-card
  .card-title {
  color: var(--text);
}
/* Icônes intro unifiées sur --accent (les 3 entrées sont équivalentes) */
#introPanel .intro-card .card-body i {
  color: var(--accent);
}

/* Accessible focus — clean ring, both themes */
#introPanel .intro-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

/* ===== INTRO PANEL — Layout & Background ===== */
#introPanel {
  /* Desktop defaults (lg ≥ 992px) — TALL & PROMINENT cards */
  --intro-pad: 52px;
  --intro-icon: 80px;
  --intro-title: 30px;
  --intro-gap: 28px;
  --intro-min-height: 320px;

  /* Better vertical centering */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--manual-nav-offset, 70px));
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Keep intro cards equal height without stretching the row to full viewport */
@media (min-width: 768px) {
  #introPanel .intro-card {
    height: var(--intro-min-height);
  }
  #introPanel .intro-card .card-title {
    /* Texte complet — pas de troncature */
    overflow: visible;
    display: block;
  }
}

/* Fond uniforme — même --bg que navbar/body, pas de dégradé parasite */
[data-view="intro"] {
  background: var(--bg);
}

/* Pas de pseudo-élément de halo */
[data-view="intro"]::before {
  content: none;
}

/* Ensure intro cards are above background + enforce minimum height */
#introPanel .intro-card {
  position: relative;
  z-index: var(--z-raised);
  min-height: var(--intro-min-height);
  display: flex;
  flex-direction: column;
}

#introPanel .intro-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--intro-pad);
}
/* xl+ even larger for comfortable desktop */
@media (min-width: 1200px) {
  #introPanel {
    --intro-pad: 64px;
    --intro-icon: 92px;
    --intro-title: 34px;
    --intro-gap: 32px;
    --intro-min-height: 380px;
  }
}
/* xxl+ maximum comfort */
@media (min-width: 1400px) {
  #introPanel {
    --intro-pad: 72px;
    --intro-icon: 100px;
    --intro-title: 38px;
    --intro-gap: 36px;
    --intro-min-height: 420px;
  }
}
/* md (≥768px) and below: medium size */
@media (max-width: 991.98px) {
  #introPanel {
    --intro-pad: 40px;
    --intro-icon: 64px;
    --intro-title: 26px;
    --intro-gap: 22px;
    --intro-min-height: 280px;
  }
}
/* Tablette (768–991px) : cartes plus généreuses pour combler le vide vertical */
@media (min-width: 768px) and (max-width: 991.98px) {
  #introPanel {
    --intro-pad: 48px;
    --intro-icon: 76px;
    --intro-title: 28px;
    --intro-gap: 26px;
    --intro-min-height: 340px;
  }
}
/* xs/sm (<576px): compact — 3 cartes empilées doivent tenir dans le viewport */
@media (max-width: 575.98px) {
  #introPanel {
    --intro-pad: clamp(20px, 4svh, 28px);
    --intro-icon: clamp(44px, 10svh, 58px);
    --intro-title: clamp(20px, 3.5svh, 26px);
    --intro-gap: clamp(12px, 2.5svh, 18px);
    --intro-min-height: clamp(190px, 29svh, 235px);
    /* Sur mobile les 3 cartes empilées débordent souvent le viewport.
       justify-content:center répartit le débordement equally en haut et en bas
       → première carte coupée en haut, dernière collée en bas.
       flex-start + padding résout le problème. */
    justify-content: flex-start;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
}
/* Icon wrapper with refined circular background - premium style */
#introPanel .intro-card .card-body i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--intro-icon) * 1.5);
  height: calc(var(--intro-icon) * 1.5);
  font-size: var(--intro-icon);
  line-height: 1;
  margin-bottom: var(--intro-gap);
  border-radius: 50%;
  /* Subtle gradient background */
  background: radial-gradient(
    ellipse 80% 80% at 30% 30%,
    color-mix(in oklab, currentColor 8%, transparent) 0%,
    color-mix(in oklab, currentColor 4%, transparent) 50%,
    transparent 100%
  );
  /* Refined border + soft inner shadow for depth */
  box-shadow:
    inset 0 1px 1px color-mix(in oklab, white 8%, transparent),
    inset 0 -1px 2px color-mix(in oklab, currentColor 6%, transparent),
    0 0 0 1px color-mix(in oklab, currentColor 12%, transparent);
  /* Thicken icon strokes for more presence */
  -webkit-text-stroke: 0.5px currentColor;
  text-shadow: 0 0 1px currentColor;
  transition:
    box-shadow var(--neu-transition-default),
    transform var(--neu-transition-default),
    background var(--neu-transition-default);
}

/* Icon hover effect: subtle glow expansion */
#introPanel .intro-card:hover .card-body i {
  background: radial-gradient(
    ellipse 90% 90% at 30% 30%,
    color-mix(in oklab, currentColor 12%, transparent) 0%,
    color-mix(in oklab, currentColor 6%, transparent) 50%,
    transparent 100%
  );
  box-shadow:
    inset 0 1px 1px color-mix(in oklab, white 10%, transparent),
    inset 0 -1px 2px color-mix(in oklab, currentColor 8%, transparent),
    0 0 0 1px color-mix(in oklab, currentColor 18%, transparent),
    0 4px 20px -4px color-mix(in oklab, currentColor 20%, transparent);
  transform: scale(1.03);
}

/* Light theme icon adjustments */
html[data-theme="light"] #introPanel .intro-card .card-body i {
  background: radial-gradient(
    ellipse 80% 80% at 30% 30%,
    color-mix(in oklab, currentColor 6%, transparent) 0%,
    color-mix(in oklab, currentColor 3%, transparent) 50%,
    transparent 100%
  );
  box-shadow:
    inset 0 1px 1px color-mix(in oklab, white 12%, transparent),
    inset 0 -1px 2px color-mix(in oklab, currentColor 5%, transparent),
    0 0 0 1px color-mix(in oklab, currentColor 10%, transparent);
  -webkit-text-stroke: 0.4px currentColor;
}

html[data-theme="light"] #introPanel .intro-card:hover .card-body i {
  background: radial-gradient(
    ellipse 90% 90% at 30% 30%,
    color-mix(in oklab, currentColor 10%, transparent) 0%,
    color-mix(in oklab, currentColor 5%, transparent) 50%,
    transparent 100%
  );
  box-shadow:
    inset 0 1px 1px color-mix(in oklab, white 12%, transparent),
    inset 0 -1px 2px color-mix(in oklab, currentColor 6%, transparent),
    0 0 0 1px color-mix(in oklab, currentColor 14%, transparent),
    0 4px 16px -4px color-mix(in oklab, currentColor 18%, transparent);
}

#introPanel .intro-card .card-title {
  font-size: var(--intro-title);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* Reduce vertical spacing between stacked cards only on smaller screens */
@media (max-width: 991.98px) {
  #introPanel .row > [class^="col-"],
  #introPanel .row > [class*=" col-"] {
    margin-bottom: var(--intro-gap);
  }
}
/* Slightly tighter rounding on very small viewports to save space visually */
@media (max-height: 740px) {
  #introPanel .intro-card {
    border-radius: var(--neu-radius-sm);
  }
}

/* ===== BUTTONS — Apple-like Elevation Style ===== */
/* Base button: clean surface with subtle drop shadow */
.btn {
  position: relative;
  /* No background/color override here — let Bootstrap semantic variants (.btn-warning,
     .btn-danger, .btn-info, .btn-success) use their own --bs-btn-bg colors. Only
     .btn-primary and .btn-secondary are explicitly themed below. */
  border-radius: var(--neu-radius-md);
  box-shadow: var(--elev-1);
  /* Reset the legacy base.css flex stretch that inflates button height */
  flex: none;
  min-width: unset;
  overflow: hidden;
  transition:
    box-shadow var(--neu-transition-default),
    transform var(--neu-transition-fast),
    background-color var(--neu-transition-default),
    border-color var(--neu-transition-default),
    color var(--neu-transition-default);
}

/* Hover: lift with stronger shadow */
.btn:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}

/* Active/pressed: flatten */
.btn:active,
.btn.active {
  box-shadow: none;
  transform: translateY(0);
}

/* Focus: clean ring */
.btn:focus-visible {
  outline: none;
  box-shadow:
    var(--elev-1),
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Loading state */

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Primary button: accent fill — Apple style (glow shadow, no neumorphic bump) */
.btn-primary {
  /* Neutralise l'orange baked-in par le Bootstrap compilé (--bs-btn-hover-bg
     etc.), sinon .btn:focus-visible retombe dessus au lieu de l'accent. */
  --bs-btn-bg: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-color: var(--on-accent);
  --bs-btn-active-bg: var(--accent-active);
  background: var(--accent);
  border: 0;
  color: var(--on-accent);
  box-shadow: 0 1px 3px color-mix(in oklab, var(--accent) 30%, transparent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 10px color-mix(in oklab, var(--accent) 40%, transparent);
}

.btn-primary:active,
.btn-primary.active {
  background: var(--accent-active);
  box-shadow: none;
  transform: none;
}

.btn-primary:focus-visible {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

/* Secondary button: subtle surface */
.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--surface-3);
}

/* Semantic solid buttons — restore visual identity overridden by .btn base in legacy CSS */
.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--on-warning, #111);
}
.btn-warning:hover {
  background-color: color-mix(in oklab, var(--warning) 88%, black 12%);
  border-color: color-mix(in oklab, var(--warning) 88%, black 12%);
}
.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--on-danger, #fff);
}
.btn-danger:hover {
  background-color: color-mix(in oklab, var(--danger) 88%, black 12%);
  border-color: color-mix(in oklab, var(--danger) 88%, black 12%);
}
.btn-info {
  background-color: var(--info);
  border-color: var(--info);
  color: var(--on-info, #fff);
}
.btn-info:hover {
  background-color: color-mix(in oklab, var(--info) 88%, black 12%);
  border-color: color-mix(in oklab, var(--info) 88%, black 12%);
}

/* btn-select en light — WCAG AA : hsl(270,75%,56%) = ~5.1:1 avec blanc.
   Les autres btn-info (pronoms, etc.) gardent --accent (62%). */
html[data-theme="light"] .tools-section .btn-info.btn-select,
html[data-theme="light"] #cestqui .btn-info.btn-select,
html[data-theme="light"] .btn-select {
  background-color: hsl(270, 75%, 56%);
  border-color: hsl(270, 75%, 56%);
  color: #fff;
}
html[data-theme="light"] .tools-section .btn-info.btn-select:hover,
html[data-theme="light"] #cestqui .btn-info.btn-select:hover,
html[data-theme="light"] .btn-select:hover {
  background-color: hsl(270, 75%, 48%);
  border-color: hsl(270, 75%, 48%);
  color: #fff;
}
/* Autres btn-info (pronoms, etc.) → accent standard */
html[data-theme="light"] .tools-section .btn-info:not(.btn-select),
html[data-theme="light"] #cestqui .btn-info:not(.btn-select) {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
html[data-theme="light"] .tools-section .btn-info:not(.btn-select):hover,
html[data-theme="light"] #cestqui .btn-info:not(.btn-select):hover {
  background-color: color-mix(in oklab, var(--accent) 88%, black 12%);
  border-color: color-mix(in oklab, var(--accent) 88%, black 12%);
}
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .btn-select,
:is(html:not([data-theme]), html[data-theme="dark"]) #cestqui .btn-select {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .btn-select:hover,
:is(html:not([data-theme]), html[data-theme="dark"])
  #cestqui
  .btn-select:hover {
  background-color: color-mix(in oklab, var(--accent) 92%, white 8%);
  border-color: color-mix(in oklab, var(--accent) 92%, white 8%);
  color: var(--on-accent);
}

.btn-success {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--on-success, #111);
}
.btn-success:hover {
  background-color: color-mix(in oklab, var(--success) 88%, black 12%);
  border-color: color-mix(in oklab, var(--success) 88%, black 12%);
}

/* Dark mode : Bootstrap force color:var(--bs-btn-hover-color) = #000 sur .btn:hover,
   ce qui donne du texte noir sur fond coloré sombre → illisible.
   On corrige : hover légèrement plus clair (white) + texte explicitement réaffirmé. */
:is(html:not([data-theme]), html[data-theme="dark"]) .btn-warning:hover {
  background-color: color-mix(in oklab, var(--warning) 92%, white 8%);
  border-color: color-mix(in oklab, var(--warning) 92%, white 8%);
  color: var(--on-warning);
}
:is(html:not([data-theme]), html[data-theme="dark"]) .btn-danger:hover {
  background-color: color-mix(in oklab, var(--danger) 92%, white 8%);
  border-color: color-mix(in oklab, var(--danger) 92%, white 8%);
  color: var(--on-danger);
}
:is(html:not([data-theme]), html[data-theme="dark"]) .btn-info:hover {
  background-color: color-mix(in oklab, var(--info) 92%, white 8%);
  border-color: color-mix(in oklab, var(--info) 92%, white 8%);
  color: var(--on-info);
}
:is(html:not([data-theme]), html[data-theme="dark"]) .btn-success:hover {
  background-color: color-mix(in oklab, var(--success) 92%, white 8%);
  border-color: color-mix(in oklab, var(--success) 92%, white 8%);
  color: var(--on-success);
}
/* btn-primary hover en dark : idem, réaffirme --on-accent contre Bootstrap */
:is(html:not([data-theme]), html[data-theme="dark"]) .btn-primary:hover {
  color: var(--on-accent);
}

/* Outline variants — override legacy hardcoded hex in base.css */
.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn-outline-success {
  color: var(--success);
  border-color: var(--success);
}
.btn-outline-info {
  color: var(--info);
  border-color: var(--info);
}
.btn-outline-danger:hover {
  background-color: color-mix(in oklab, var(--danger) 12%, transparent);
}
.btn-outline-success:hover {
  background-color: color-mix(in oklab, var(--success) 12%, transparent);
}
.btn-outline-info:hover {
  background-color: color-mix(in oklab, var(--info) 12%, transparent);
}

/* Light theme button adjustments — soft elevation */
html[data-theme="light"] .btn {
  border: 1px solid color-mix(in oklab, var(--border) 20%, transparent);
  box-shadow: 0 1px 2px var(--elev-close);
}

html[data-theme="light"] .btn:hover {
  box-shadow:
    0 1px 3px var(--elev-close),
    0 4px 12px var(--elev-ambient);
}

html[data-theme="light"] .btn-primary {
  border-color: transparent;
  box-shadow:
    0 1px 2px var(--elev-close),
    0 2px 6px var(--elev-ambient);
}

html[data-theme="light"] .btn-primary:hover {
  box-shadow:
    0 2px 4px var(--elev-close),
    0 6px 16px var(--elev-ambient);
}

/* ===== TABLES — Apple-like Containers ===== */

.table-responsive {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 28%, transparent);
  border-radius: var(--neu-radius-md);
  box-shadow: var(--elev-1);
  overflow: hidden;
}

.table {
  color: var(--text);
  background: transparent;
  font-size: clamp(0.92rem, 0.86rem + 0.15vw, 1.08rem);
  line-height: 1.45;
}
.table > :not(caption) > * > * {
  background: transparent;
  border-color: color-mix(in oklab, var(--border) 60%, transparent);
}
.table thead th {
  color: var(--text);
  border-bottom-color: color-mix(in oklab, var(--border) 70%, transparent);
  font-size: clamp(0.98rem, 0.9rem + 0.18vw, 1.18rem);
}
:is(html:not([data-theme]), html[data-theme="dark"]) .table thead th {
  background: color-mix(in oklab, var(--surface-2) 88%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--border) 48%, transparent);
  font-weight: 600;
}
html[data-theme="light"] .table thead th {
  background: var(--surface-2);
  box-shadow: inset 0 -1px 0 var(--border);
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
}
.table-hover > tbody > tr:hover > * {
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
}

.table > :not(caption) > * > .table-active,
.table > :not(caption) > .table-active > * {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--text);
}

.table td,
.table th {
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
}
.table .text-muted {
  color: var(--text-muted);
}

.table :where(a, button, [role="button"], .form-check-input):focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.18rem var(--focus-ring);
  border-radius: 0.35rem;
}

.table-responsive {
  border-radius: var(--neu-radius-sm);
}
.table-responsive > .table {
  margin-bottom: 0;
}

.table th.sortable {
  cursor: pointer;
  position: relative;
  user-select: none;
}
.table th.sortable .caret {
  margin-left: 0.35rem;
  opacity: 0.7;
}
.table th.sortable:hover .caret {
  opacity: 1;
}
:is(html:not([data-theme]), html[data-theme="dark"]) .table th.sortable {
  color: color-mix(in oklab, var(--text) 88%, var(--bg) 12%);
}
html[data-theme="light"] .table th.sortable {
  color: color-mix(in oklab, var(--text) 92%, black 8%);
}

.table tbody tr {
  min-height: 44px;
}
.table td.fit,
.table th.fit {
  width: 1%;
  white-space: nowrap;
}
.table td.nowrap,
.table th.nowrap {
  white-space: nowrap;
}
.table td.wrap,
.table th.wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (prefers-contrast: more) {
  .table-hover > tbody > tr:hover > * {
    background: color-mix(in oklab, var(--surface-2) 80%, transparent);
  }
  .table > :not(caption) > * > .table-active,
  .table > :not(caption) > .table-active > * {
    box-shadow: inset 0 0 0 1px var(--focus-ring);
  }
}

.nav-tabs .nav-link.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes tbl-sheen {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tabs .nav-link::after {
    transition: none !important;
  }
}
.table th[aria-sort="ascending"] .caret {
  transform: rotate(180deg);
  opacity: 1;
}
.table th[aria-sort="descending"] .caret {
  transform: rotate(0deg);
  opacity: 1;
}
.table th[aria-sort] {
  font-weight: 700;
}
/* GLOBAL FOCUS (safe): exclut .btn/.form-control/.form-select/.nav-link/.btn-close pour éviter les doubles anneaux */

/* toolbox → see assets/css/_toolbox.css */

/* ===== MODALES — Apple-like Premium Panels ===== */
.modal-content {
  position: relative;
  background: var(--surface);
  border: 0;
  border-radius: var(--neu-radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Subtle top highlight */
.modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.06);
}

/* Header and footer — header tinted, footer minimal */
.modal-header {
  background: color-mix(in oklab, var(--surface-2) 22%, transparent);
  border: 0;
  padding: 1rem 1.25rem 0.875rem;
}

.modal-footer {
  background: transparent;
  border: 0;
  padding: 0.5rem 1.25rem 0.875rem;
}

/* Backdrop — frosted glass */
.modal-backdrop.show {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.4;
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
}

/* ---- Dark theme modal ---- */
:is(html:not([data-theme]), html[data-theme="dark"]) .modal .modal-content {
  /* Surface plus élevée que la page — on monte d'un cran vers surface-2 */
  background: color-mix(in oklab, var(--surface-2) 70%, var(--surface) 30%);
  color: var(--text);
  /* Bord visible + bande accent en haut */
  border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  border-top: 3px solid var(--accent);
  border-radius: var(--neu-radius-lg);
  /* Ombre forte pour "flotter" au-dessus du backdrop */
  box-shadow:
    0 0 0 0.5px var(--surface-stroke),
    0 32px 80px rgba(0, 0, 0, 0.65),
    0 10px 24px rgba(0, 0, 0, 0.4),
    inset 0 0.5px 0 var(--surface-stroke);
}

:is(html:not([data-theme]), html[data-theme="dark"]) .modal .modal-header {
  /* Légère teinte accent pour identifier la nature de la modale */
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-2) 90%);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 45%, transparent);
}
:is(html:not([data-theme]), html[data-theme="dark"]) .modal .modal-footer {
  background: transparent;
  border: 0;
}

/* Teinte de la bande haute + du header selon le type d'alerte */
:is(html:not([data-theme]), html[data-theme="dark"])
  .modal
  .modal-content[data-modal-type="error"] {
  border-top-color: var(--danger);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .modal
  .modal-content[data-modal-type="warning"] {
  border-top-color: var(--warning);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .modal
  .modal-content[data-modal-type="success"] {
  border-top-color: var(--success);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .modal
  .modal-content[data-modal-type="error"]
  .modal-header {
  background: color-mix(in oklab, var(--danger) 14%, var(--surface-2) 86%);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .modal
  .modal-content[data-modal-type="warning"]
  .modal-header {
  background: color-mix(in oklab, var(--warning) 14%, var(--surface-2) 86%);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .modal
  .modal-content[data-modal-type="success"]
  .modal-header {
  background: color-mix(in oklab, var(--success) 14%, var(--surface-2) 86%);
}

:is(html:not([data-theme]), html[data-theme="dark"]) .modal .btn-close {
  filter: invert(1) !important;
  opacity: 0.72; /* était 0.45 — bien visible sur fond sombre */
}
:is(html:not([data-theme]), html[data-theme="dark"]) .modal .btn-close:hover {
  opacity: 1;
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .modal
  .btn-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: var(--neu-radius-pill);
}

/* ---- Light theme modal ---- */
html[data-theme="light"] .modal .modal-content {
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--border) 28%, transparent);
  border-top: 3px solid var(--accent); /* bande accent — cohérence avec dark */
  border-radius: var(--neu-radius-lg);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] .modal-content::before {
  box-shadow: none;
}

html[data-theme="light"] .modal .modal-header {
  background: color-mix(
    in oklab,
    var(--accent) 6%,
    var(--surface) 94%
  ); /* légère teinte accent */
  border-bottom: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
}
html[data-theme="light"] .modal .modal-footer {
  background: transparent;
  border: 0;
}

/* Teinte de la bande haute + du header selon le type d'alerte */
html[data-theme="light"] .modal .modal-content[data-modal-type="error"] {
  border-top-color: var(--danger);
}
html[data-theme="light"] .modal .modal-content[data-modal-type="warning"] {
  border-top-color: var(--warning);
}
html[data-theme="light"] .modal .modal-content[data-modal-type="success"] {
  border-top-color: var(--success);
}
html[data-theme="light"]
  .modal
  .modal-content[data-modal-type="error"]
  .modal-header {
  background: color-mix(in oklab, var(--danger) 9%, var(--surface) 91%);
}
html[data-theme="light"]
  .modal
  .modal-content[data-modal-type="warning"]
  .modal-header {
  background: color-mix(in oklab, var(--warning) 9%, var(--surface) 91%);
}
html[data-theme="light"]
  .modal
  .modal-content[data-modal-type="success"]
  .modal-header {
  background: color-mix(in oklab, var(--success) 9%, var(--surface) 91%);
}

/* Couleur de l'icône liée aux tokens du thème (pas aux utilitaires
   Bootstrap text-* qui sont redéfinis en hex fixes dans base.css) */
.modal .modal-content[data-modal-type="info"] .modal-icon {
  color: var(--accent);
}
.modal .modal-content[data-modal-type="warning"] .modal-icon {
  color: var(--warning);
}
.modal .modal-content[data-modal-type="error"] .modal-icon {
  color: var(--danger);
}
.modal .modal-content[data-modal-type="success"] .modal-icon {
  color: var(--success);
}

html[data-theme="light"] .modal .btn-close {
  filter: none;
  opacity: 0.4;
}
html[data-theme="light"] .modal .btn-close:hover {
  opacity: 0.85;
}

/* Focus states inside modals */
.modal :where(.btn, .form-control, .form-select):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent);
}

/* ---- Modal typography & layout ---- */
.modal .modal-title {
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 1.05rem;
  color: var(--text);
  opacity: 1;
}

.modal .modal-icon {
  opacity: 1;
  font-size: 1.3em;
}

.modal .modal-body {
  font-size: 0.94rem;
  line-height: 1.6;
  padding: 0.875rem 1.25rem 0.75rem;
  color: color-mix(in oklab, var(--text) 90%, transparent);
}

.modal .modal-footer {
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.5rem 1.25rem 0.875rem;
}

/* ---- Modal buttons — clean Apple style ---- */
/* Touch target ≥44px (WCAG 2.5.5) — la largeur reste compacte, seule la hauteur est garantie */
.modal .modal-footer .btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 5rem;
  min-height: 2.75rem;
  border-radius: 7px;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding: 0.6rem 1rem;
  transition:
    background-color var(--neu-transition-fast),
    color var(--neu-transition-fast),
    box-shadow var(--neu-transition-fast),
    opacity var(--neu-transition-fast),
    transform var(--neu-transition-fast);
}
.modal .modal-footer .btn:active {
  transform: scale(0.98);
}

/* Primary button — accent fill, no heavy gradient */
.modal .modal-footer .btn-primary {
  background: var(--accent);
  border: 0;
  color: var(--on-accent);
  box-shadow: 0 1px 3px color-mix(in oklab, var(--accent) 30%, transparent);
}
.modal .modal-footer .btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 35%, transparent);
}
.modal .modal-footer .btn-primary:active {
  background: var(--accent-active);
  box-shadow: none;
}

/* Secondary button — ghost */
.modal .modal-footer .btn-secondary {
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  color: var(--text);
  box-shadow: none;
}
.modal .modal-footer .btn-secondary:hover {
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  border-color: color-mix(in oklab, var(--border) 45%, transparent);
}

/* Danger button (ex: "Non" d'une confirmation destructrice) — même traitement que primary */
.modal .modal-footer .btn-danger {
  background: var(--danger);
  border: 0;
  color: var(--on-danger);
  box-shadow: 0 1px 3px color-mix(in oklab, var(--danger) 30%, transparent);
}
.modal .modal-footer .btn-danger:hover {
  background: color-mix(in oklab, var(--danger) 85%, black 15%);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--danger) 35%, transparent);
}
.modal .modal-footer .btn-danger:active {
  box-shadow: none;
}

/* Success button (ex: "Oui" d'une confirmation) — même traitement que primary */
.modal .modal-footer .btn-success {
  background: var(--success);
  border: 0;
  color: var(--on-success);
  box-shadow: 0 1px 3px color-mix(in oklab, var(--success) 30%, transparent);
}
.modal .modal-footer .btn-success:hover {
  background: color-mix(in oklab, var(--success) 85%, black 15%);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--success) 35%, transparent);
}
.modal .modal-footer .btn-success:active {
  box-shadow: none;
}

/* Close button — invisible until hover */
.modal .btn-close {
  border-radius: 8px;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  background-size: 0.65rem;
  box-shadow: none;
  border: 0;
  opacity: 0.45;
  transition:
    background-color var(--neu-transition-fast),
    opacity var(--neu-transition-fast);
}
.modal .btn-close:hover {
  background-color: color-mix(in oklab, var(--surface-2) 55%, transparent);
  border-radius: 6px;
  opacity: 0.85;
}

/* ===== TOASTS — Apple-like Notification Cards ===== */
.toast {
  position: relative;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 22%, transparent);
  border-radius: var(--neu-radius-md);
  box-shadow: var(--elev-2);
  overflow: hidden;
}

:is(html:not([data-theme]), html[data-theme="dark"]) .toast {
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--border) 22%, transparent);
  border-radius: var(--neu-radius-md);
  box-shadow: var(--elev-2);
}

:is(html:not([data-theme]), html[data-theme="dark"]) .toast-header {
  background: color-mix(in oklab, var(--surface-2) 90%, transparent);
  color: var(--text);
  border: 0;
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, var(--border) 40%, transparent);
}

html[data-theme="light"] .toast {
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--border) 18%, transparent);
  border-radius: var(--neu-radius-md);
  box-shadow:
    0 1px 2px var(--elev-close),
    0 4px 16px var(--elev-ambient);
}
html[data-theme="light"] .toast-header {
  background: color-mix(in oklab, var(--bg) 30%, var(--surface) 70%);
  border-color: color-mix(in oklab, var(--border) 15%, transparent);
}

@media (max-width: 575.98px) {
  .modal .modal-dialog {
    margin: 0.75rem;
  }
  .modal .modal-content {
    border-radius: var(--neu-radius-lg);
  }
  .toast {
    margin: 0.5rem;
  }
}

.modal .modal-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.modal .modal-header.sticky-top {
  position: sticky;
  z-index: var(--z-float);
}
.modal .modal-header.sticky-top {
  border-bottom: 0;
}

.modal.show {
  z-index: var(--z-modal);
}
.modal-backdrop.show {
  z-index: var(--z-backdrop);
}
.modal + .modal {
  z-index: var(--z-modal-top);
}
.modal + .modal .modal-backdrop.show {
  z-index: var(--z-modal-2);
}
.modal + .modal .modal-dialog {
  margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.show {
    backdrop-filter: none;
  }
}
@supports not (
  (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))
) {
  .modal-backdrop.show {
    backdrop-filter: none;
  }
}

/* Zones: top-right par défaut, variantes top-left/bottom-right/bottom-left */
/* Mobile: éviter collision avec navbar/bars iOS */

.modal :where(.btn-primary, .btn-close):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent);
}

@media print {
  .modal,
  .modal * {
    box-shadow: none;
    filter: none;
    backdrop-filter: none;
  }
  .toast,
  .toast * {
    box-shadow: none;
  }
  .modal-backdrop {
    display: none !important;
  }
  
  .table,
  .table * {
    box-shadow: none;
    filter: none;
    background: white;
    color: black;
  }
  .table thead th {
    background: #f2f2f2;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .table > :not(caption) > * > * {
    border-color: #ccc;
  }
  .table a {
    color: black;
    text-decoration: underline;
  }
}

/* toolbox (dark/light premium overrides) → see assets/css/_toolbox.css */

/* ===== PAGINATION — Neumorphic Page Controls ===== */
.pagination .page-link {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  border-radius: var(--neu-radius-sm);
  box-shadow: none;
  color: var(--text);
  margin: 0 2px;
  transition:
    background-color var(--neu-transition-fast),
    border-color var(--neu-transition-fast);
}

.pagination .page-link:hover,
.pagination .page-link:focus {
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
  border-color: var(--border);
  box-shadow: none;
  transform: none;
  color: var(--text);
}

.pagination .page-link:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.page-item.active .page-link {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 1px 4px color-mix(in oklab, var(--accent) 35%, transparent);
}

.page-item.disabled .page-link {
  opacity: 0.45;
  box-shadow: none;
}

/* Light theme pagination */
html[data-theme="light"] .pagination .page-link {
  border: 1px solid color-mix(in oklab, var(--border) 20%, transparent);
  box-shadow: none;
}

/* ===== BREADCRUMB — Apple-like Path ===== */
.breadcrumb {
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 28%, transparent);
  border-radius: var(--neu-radius-md);
  box-shadow: none;
  padding: 0.75rem 1rem;
  color: var(--text-muted);
}

.breadcrumb-item a {
  color: var(--accent);
}

.breadcrumb-item a:hover {
  color: var(--accent-hover);
}

.breadcrumb-item.active {
  color: var(--text);
}

/* ===== ALERTS ===== */
.alert {
  position: relative;
  background: var(--surface-2);
  border: 1px solid color-mix(in oklab, var(--border) 45%, transparent);
  border-radius: var(--neu-radius-md);
  box-shadow: var(--elev-1);
  color: var(--text);
  overflow: hidden;
  padding-left: 1.25rem;
}

/* Left accent bar for visual hierarchy */
.alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--border-strong);
  border-radius: var(--neu-radius-md) 0 0 var(--neu-radius-md);
}

/* Semantic alert variants */
.alert-info {
  background: color-mix(in oklab, var(--info) 8%, var(--surface-2) 92%);
  color: var(--text);
}
.alert-info::before {
  background: var(--info);
}

.alert-success {
  background: color-mix(in oklab, var(--success) 8%, var(--surface-2) 92%);
  color: var(--text);
}
.alert-success::before {
  background: var(--success);
}

.alert-warning {
  background: color-mix(in oklab, var(--warning) 10%, var(--surface-2) 90%);
  color: var(--text);
}
.alert-warning::before {
  background: var(--warning);
}

.alert-danger {
  background: color-mix(in oklab, var(--danger) 10%, var(--surface-2) 90%);
  color: var(--text);
}
.alert-danger::before {
  background: var(--danger);
}

/* Dismissible alert close button */
.alert .btn-close {
  background: transparent;
  border-radius: 0.5rem;
  box-shadow: none;
}

.alert .btn-close:hover {
  background: color-mix(in oklab, var(--text) 8%, transparent);
}

/* Light theme alerts: soft elevation */
html[data-theme="light"] .alert {
  border: 1px solid color-mix(in oklab, var(--border) 20%, transparent);
  box-shadow: 0 1px 2px var(--elev-close);
}
html[data-theme="light"] .alert::before {
  width: 3px;
  opacity: 0.6;
}
html[data-theme="light"] .alert-warning {
  background: color-mix(in oklab, var(--warning) 6%, var(--surface) 94%);
  border-color: color-mix(in oklab, var(--warning) 20%, transparent);
}
html[data-theme="light"] .alert-info {
  background: color-mix(in oklab, var(--info) 5%, var(--surface) 95%);
  border-color: color-mix(in oklab, var(--info) 18%, transparent);
}
html[data-theme="light"] .alert-success {
  background: color-mix(in oklab, var(--success) 5%, var(--surface) 95%);
  border-color: color-mix(in oklab, var(--success) 18%, transparent);
}
html[data-theme="light"] .alert-danger {
  background: color-mix(in oklab, var(--danger) 5%, var(--surface) 95%);
  border-color: color-mix(in oklab, var(--danger) 18%, transparent);
}

/* ===== BADGES ===== */
.badge {
  border: 0;
  border-radius: var(--neu-radius-pill);
  box-shadow: var(--elev-1);
  position: relative;
}

/* Primary badge */

/* Outline badge variant */

.badge-outline {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: none;
}

/* Semantic badges */

/* Light theme badges: soft elevation */
html[data-theme="light"] .badge {
  box-shadow: 0 1px 2px var(--elev-close);
}

/* ========== Global spacing scale ========== */
/* Échelle d'espacement responsive (clamp).
   Seul --space-2 est actuellement utilisé. Étendre au fur et à mesure. */
:root {
  --space-2: clamp(8px, 1.4vw, 10px); /* 8–10px — sm */
}

/* Touch-friendly targets and smooth transitions */
.btn,
[role="button"] {
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius, 16px);
  transition:
    background-color var(--neu-transition-default),
    color var(--neu-transition-default),
    border-color var(--neu-transition-default),
    box-shadow var(--neu-transition-default),
    transform var(--neu-transition-default);
  -webkit-tap-highlight-color: transparent;
}

/* ===== OUTLINE BUTTONS ===== */
.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  box-shadow: none;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}

.btn-outline-primary:active {
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  box-shadow: none;
  transform: translateY(0);
}

.btn-outline-primary:focus-visible {
  box-shadow:
    var(--elev-1),
    0 0 0 0.2rem var(--focus-ring);
}

/* Light theme: outline-primary needs a tinted background to stand out on white surfaces */
html[data-theme="light"] .btn-outline-primary {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  box-shadow:
    0 1px 3px color-mix(in oklab, var(--accent) 15%, transparent),
    0 0 0 1.5px color-mix(in oklab, var(--accent) 50%, transparent);
}
html[data-theme="light"] .btn-outline-primary:hover,
html[data-theme="light"] .btn-outline-primary:focus-visible {
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  box-shadow:
    0 2px 6px color-mix(in oklab, var(--accent) 20%, transparent),
    0 0 0 1.5px var(--accent);
}

/* ========== Semantic outline variants — refined ghost buttons ========== */
.btn-outline-info,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-secondary {
  background: transparent;
  border-radius: var(--neu-radius-sm);
  font-weight: 500;
  transition:
    color var(--neu-transition-default),
    background-color var(--neu-transition-default),
    border-color var(--neu-transition-default),
    box-shadow var(--neu-transition-default);
}

.btn-outline-info {
  color: var(--info);
  border: 1px solid color-mix(in oklab, var(--info) 40%, transparent);
  background: color-mix(in oklab, var(--info) 6%, transparent);
  box-shadow: none;
}
.btn-outline-success {
  color: var(--success);
  border: 1px solid color-mix(in oklab, var(--success) 40%, transparent);
  background: color-mix(in oklab, var(--success) 6%, transparent);
  box-shadow: none;
}
.btn-outline-danger {
  color: var(--danger);
  border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent);
  background: color-mix(in oklab, var(--danger) 6%, transparent);
  box-shadow: none;
}

.btn-outline-info:hover,
.btn-outline-info:focus-visible {
  color: var(--info);
  background: color-mix(in oklab, var(--info) 14%, transparent);
  border-color: color-mix(in oklab, var(--info) 55%, transparent);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--info) 15%, transparent);
}
.btn-outline-success:hover,
.btn-outline-success:focus-visible {
  color: var(--success);
  background: color-mix(in oklab, var(--success) 14%, transparent);
  border-color: color-mix(in oklab, var(--success) 55%, transparent);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--success) 15%, transparent);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
  color: var(--danger);
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  border-color: color-mix(in oklab, var(--danger) 55%, transparent);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--danger) 15%, transparent);
}

.btn-outline-info:active,
.btn-outline-success:active,
.btn-outline-danger:active {
  transform: scale(0.98);
  box-shadow: none;
}

/* Light theme: slightly adjusted outline buttons */
html[data-theme="light"] .btn-outline-info {
  border: 1px solid color-mix(in oklab, var(--info) 30%, transparent);
  background: color-mix(in oklab, var(--info) 4%, transparent);
  box-shadow: none;
  color: var(--info);
}
html[data-theme="light"] .btn-outline-success {
  border: 1px solid color-mix(in oklab, var(--success) 30%, transparent);
  background: color-mix(in oklab, var(--success) 4%, transparent);
  box-shadow: none;
  color: var(--success);
}
html[data-theme="light"] .btn-outline-danger {
  border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
  background: color-mix(in oklab, var(--danger) 4%, transparent);
  box-shadow: none;
  color: var(--danger);
}
html[data-theme="light"]
  :where(
    .btn-outline-info,
    .btn-outline-success,
    .btn-outline-danger
  ):hover {
  box-shadow: 0 1px 4px color-mix(in oklab, currentColor 10%, transparent);
}
html[data-theme="light"]
  :where(
    .btn-outline-info,
    .btn-outline-success,
    .btn-outline-danger
  ):active {
  box-shadow: none;
}

/* Boutons Aide (btn-outline-secondary) — contour WCAG 3:1 en light
   !important nécessaire pour l'accessibilité : Bootstrap + cascade multi-règles résistent */
html[data-theme="light"] .btn.btn-outline-secondary {
  border-color: hsl(220, 10%, 52%) !important;
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
}
html[data-theme="light"] .btn-outline-secondary:hover {
  border-color: var(--text-muted);
  color: var(--text);
  background: color-mix(in oklab, var(--text) 5%, transparent);
  box-shadow: none;
}

/* ===== FORM INPUTS ===== */
.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(
    [type="button"]
  ),
textarea {
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 35%, transparent);
  border-radius: var(--neu-radius-md);
  box-shadow: none;
  color: var(--text);
  transition:
    border-color var(--neu-transition-default),
    box-shadow var(--neu-transition-default),
    background-color var(--neu-transition-default);
}

/* Focus */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--accent) 20%, transparent);
}

/* Disabled state */
.form-control:disabled,
.form-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Validation states */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: color-mix(in oklab, var(--danger) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger) 25%, transparent);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: color-mix(in oklab, var(--success) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--success) 25%, transparent);
}

/* Light theme: clean inputs */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 35%, transparent);
  box-shadow: none;
}

html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-control:focus-visible,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .form-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--accent) 18%, transparent);
}

/* Placeholder styling */
.form-control::placeholder {
  color: color-mix(in oklab, var(--text) 50%, var(--bg) 50%);
  opacity: 0.85;
}

/* ===== CHECKBOXES & RADIOS — Neumorphic Toggle Style ===== */
.form-check-input {
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  border-radius: 0.35em;
  box-shadow: none;
  cursor: pointer;
  transition:
    border-color var(--neu-transition-default),
    box-shadow var(--neu-transition-default),
    background-color var(--neu-transition-default);
  position: relative;
}

/* Radio: circular */
.form-check-input[type="radio"] {
  border-radius: 50%;
}

/* Hover state */
.form-check-input:hover {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
}

/* Checked state */
.form-check-input:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--elev-1);
}

/* Checkmark indicator */
.form-check-input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.35em;
  height: 0.6em;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Radio dot */
.form-check-input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.4em;
  height: 0.4em;
  background: var(--on-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Focus state */
.form-check-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.form-check-input:checked:focus-visible {
  box-shadow:
    var(--elev-1),
    0 0 0 0.2rem var(--focus-ring);
}

/* Disabled */
.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Light theme checkboxes */
html[data-theme="light"] .form-check-input {
  border: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
  box-shadow: none;
}

html[data-theme="light"] .form-check-input:checked {
  box-shadow: none;
}

/* Simple responsive cards grid helper */

/* Breakpoints: tablet and desktop */
@media (min-width: 640px) {
  .btn,
  button {
    padding: 0.65rem 1rem;
  }
}
@media (min-width: 1024px) {
  .btn,
  button {
    padding: 0.7rem 1.05rem;
  }
}

/* Disable hover-only effects on touch devices (prevents flicker) */
@media (hover: none) {
  .btn:hover {
    background: inherit;
    color: inherit;
  }
}

/* ========== NAVBAR — proportions & anti-overlap (safe, HTML-agnostic) ========== */
/* Ensure both themes apply their bg token to main surfaces */
html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] [data-view],
:is(html:not([data-theme]), html[data-theme="dark"]) body,
:is(html:not([data-theme]), html[data-theme="dark"]) main,
:is(html:not([data-theme]), html[data-theme="dark"]) [data-view] {
  background-color: var(--bg);
}
html[data-theme="light"] .halo-bg {
  display: none !important;
}
.navbar .container,
.navbar .container-fluid {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
}

/* Keep everything on one line, allow the center to shrink gracefully */
.navbar .container,
.navbar .container-fluid {
  flex-wrap: nowrap;
  min-width: 0; /* enables ellipsis */
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

/* Left zone (brand / back) sticks to the left */
.navbar .navbar-brand,
.navbar .nav-left {
  flex: 0 0 auto;
  margin: 0;
  line-height: 1;
}

/* Center title: takes remaining space, truncates if too long */
.navbar .navbar-title,
.navbar .title,
.navbar .navbar-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(16px, 2.4vw, 18px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right zone (next / burger / actions) sticks to the right */
.navbar .navbar-actions,
.navbar .actions,
.navbar .navbar-toggler,
.navbar .ms-auto {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Controls sizing: consistent, touch-friendly without looking bulky */
/* ===== NAVBAR — Apple-like ghost buttons ===== */
/* Les boutons navbar sont plats/fantômes — pas d'élévation, pas de fond visible */
.navbar .btn,
.navbar .navbar-toggler {
  height: 44px; /* WCAG 2.5.5 : min 44px touch target */
  min-height: 44px;
  padding: 0.45rem 0.65rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Ghost : override du .btn global */
  background: transparent;
  box-shadow: none;
  border: none;
  transition:
    background-color var(--neu-transition-fast),
    color var(--neu-transition-fast);
}
.navbar .btn:hover,
.navbar .navbar-toggler:hover {
  background: color-mix(in oklab, var(--text) 9%, transparent);
  box-shadow: none;
  transform: none;
}
.navbar .btn:active,
.navbar .navbar-toggler:active {
  background: color-mix(in oklab, var(--text) 16%, transparent);
  box-shadow: none;
  transform: none;
}
.navbar .btn:focus-visible,
.navbar .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.navbar .navbar-toggler {
  width: 40px;
  padding: 0;
}

/* Reduce nav-link paddings to avoid collision with neighbors */
.navbar .nav-link {
  padding: 0.4rem 0.6rem;
}

/* Brand color — do not use accent in dark */
.navbar .navbar-brand {
  color: var(--navbar-color, var(--text));
  text-decoration: none;
  /* WCAG 2.5.5 : zone de clic ≥ 44px */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus-visible {
  color: var(--navbar-hover-color, var(--text));
}

/* Navbar links/icons — keep neutral in dark (override generic link accent) */
.navbar a.nav-link,
.navbar .nav-link {
  color: var(--navbar-color, var(--text));
}
.navbar a.nav-link:hover,
.navbar a.nav-link:focus-visible,
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: color-mix(in oklab, var(--text) 92%, white 8%);
}
/* Ensure icons follow the link color; exclude buttons */

.navbar .nav-link .bi,
.navbar .navbar-toggler .bi {
  color: currentColor;
}

/* ===== NAVBAR — Neumorphic Navigation Links ===== */
.navbar .nav-link {
  background: transparent;
  border: 0;
  border-radius: var(--neu-radius-sm);
  box-shadow: none;
  transition:
    background-color var(--neu-transition-default),
    box-shadow var(--neu-transition-default),
    color var(--neu-transition-default),
    transform var(--neu-transition-fast);
}

/* Active: solid accent pill — Apple-like (both themes) */
.navbar .nav-link.active {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid color-mix(in oklab, var(--accent) 75%, black 25%);
  box-shadow: var(--elev-1);
}

/* Inactive: flat */
.navbar .nav-link:not(.active) {
  box-shadow: none;
}

/* Hover states */
.navbar .nav-link:not(.active):hover,
.navbar .nav-link:not(.active):focus-visible {
  box-shadow: none;
}

.navbar .nav-link.active:hover,
.navbar .nav-link.active:focus-visible {
  background: var(--accent-hover);
  border-color: color-mix(in oklab, var(--accent-hover) 75%, black 25%);
  box-shadow: var(--elev-2);
}

#desktopNavCenter {
  position: relative;
  min-height: clamp(42px, 4.2vw, 54px);
}

#desktopNavCenter .view-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.95rem, 0.88rem + 0.22vw, 1.15rem);
  letter-spacing: 0.015em;
  color: var(--text);
  text-transform: none;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity var(--neu-transition-default);
}

#desktopNavCenter .view-title:not(.d-none) {
  opacity: 0.9;
}

/* Offcanvas (apply on desktop too) */
:is(html:not([data-theme]), html[data-theme="dark"]) .offcanvas .btn-close {
  filter: none;
  opacity: 0.9;
}
.offcanvas {
  --bs-offcanvas-width: min(92vw, 440px);
  --bs-offcanvas-bg: var(--surface);
  --bs-offcanvas-color: var(--text);
  --bs-offcanvas-title-color: var(--text);
  box-shadow:
    -8px 0 32px rgba(0, 0, 0, 0.45),
    -2px 0 8px rgba(0, 0, 0, 0.25);
}
.offcanvas .offcanvas-title {
  color: var(--text);
}
.offcanvas .offcanvas-header.sticky-top {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.offcanvas .list-group-item {
  background: transparent;
  border: 0;
  color: var(--text);
}
.offcanvas .list-group-item:hover,
.offcanvas .list-group-item:focus {
  background: var(--surface-2);
  color: var(--text);
}
.offcanvas a {
  color: var(--text);
  text-decoration: none;
}
.offcanvas a:hover,
.offcanvas a:focus-visible {
  color: var(--text);
}
.offcanvas .list-group-item .bi {
  color: currentColor;
  opacity: 0.9;
}
/* Backdrop polish: subtle blur + tuned opacity */
.offcanvas-backdrop {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  backdrop-filter: saturate(1.05) blur(3px);
}

/* Desktop offcanvas header — larger title, finer separator, refined close btn */
@media (min-width: 992px) {
  .offcanvas .offcanvas-header.sticky-top {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem; /* éloigne la croix du bord droit */
    min-height: 72px;
    border-bottom-color: color-mix(in oklab, var(--border) 50%, transparent);
  }
  .offcanvas .offcanvas-title {
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
  }
  .offcanvas .btn-close {
    width: 20px;
    height: 20px;
    padding: 0;
    opacity: 0.6;
  }
  .offcanvas .btn-close:hover {
    opacity: 0.8;
  }
}

/* Light theme: ensure close icon isn’t white */
html[data-theme="light"] .offcanvas .btn-close {
  filter: none;
  opacity: 0.7;
  /* Forcer une icône plus sombre en thème clair (remplace l'icône blanche Bootstrap) */
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23151515' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* Tablet & Desktop refinements */
@media (min-width: 640px) {
  .navbar {
    min-height: 60px;
  }
  .navbar .btn,
  .navbar .navbar-toggler {
    height: 44px; /* WCAG 2.5.5 */
    min-height: 44px;
  }
  .navbar .navbar-title,
  .navbar .title,
  .navbar .navbar-text {
    font-size: clamp(17px, 2vw, 20px);
  }
}
@media (min-width: 1024px) {
  .navbar .btn,
  .navbar .navbar-toggler {
    height: 44px;
    min-height: 44px;
  }
  .navbar .navbar-title,
  .navbar .title,
  .navbar .navbar-text {
    font-size: 20px;
  }
}

/* Desktop settings menu icon (hamburger) — larger + aligned (Bootstrap lg ≥992px) */
@media (min-width: 992px) {
  /* New offcanvas trigger (current desktop hamburger) */
  #navbarContentDroite .nav-link[data-bs-toggle="offcanvas"] .bi-list {
    font-size: 1.8em; /* larger for proportion */
    line-height: 1;
    display: block; /* allow perfect centering inside flex link */
  }
  #navbarContentDroite .nav-link[data-bs-toggle="offcanvas"] .caret {
    margin-left: 0.25rem;
  }
  #navbarContentDroite .nav-link[data-bs-toggle="offcanvas"] {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  /* Align right-sticky nav items vertically with brand */
  .navbar .right-sticky > .nav-item {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .navbar .right-sticky .nav-link {
    display: inline-flex;
    align-items: center;
    height: 44px; /* match .navbar control height */
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1; /* avoid baseline drift */
  }
}

/* Mobile: remove border around the offcanvas hamburger */
@media (max-width: 991.98px) {
  /* Force grid layout for mobile navbar: left | center | right (top row),
     with collapse spanning full width on the next row. Ensures brand stays
     top-left, phrase label centered, hamburger top-right when the collapse opens. */
  .navbar > .container-fluid {
    display: grid;
    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
    align-items: center;
    column-gap: 0.5rem;
  }
  .navbar > .container-fluid > .mobile-left {
    grid-column: 1;
  }
  .navbar > .container-fluid > .mobile-center {
    grid-column: 2;
    justify-self: center;
  }
  .navbar > .container-fluid > .mobile-right {
    grid-column: 3;
    justify-self: end;
  }
  .navbar > .container-fluid > #navbarContent {
    grid-column: 1 / -1;
  }
  .navbar .navbar-toggler {
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .navbar .navbar-toggler:hover,
  .navbar .navbar-toggler:focus {
    box-shadow: none;
  }

  /* Compact mobile navbar: reduce overall height and control sizes */
  .navbar .container,
  .navbar .container-fluid {
    min-height: 50px;
  }

  /* Shrink top mobile navigator controls */
  .navbar .top-mobile-nav {
    gap: 0.25rem;
  }
  .navbar .top-mobile-nav .btn.btn-sm {
    height: 32px;
    min-height: 32px;
    padding: 0.1rem 0.35rem;
    line-height: 1.05;
    width: 32px; /* reserve equal width for chevrons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .navbar .top-mobile-nav .btn.btn-sm i {
    font-size: 0.9rem;
    line-height: 1;
  }
  #topMobilePhraseLabel {
    font-size: 0.85rem;
    line-height: 1;
  }

  /* Mobile hamburger icon size */
  .navbar .navbar-toggler .bi {
    font-size: 1.8rem;
    line-height: 1;
  }

  /* Remove borders on chevron buttons (prev/next) */
  #topMobilePrevPhrase,
  #topMobileNextPhrase {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit; /* use navbar text color */
  }
  #topMobilePrevPhrase:hover,
  #topMobilePrevPhrase:focus,
  #topMobileNextPhrase:hover,
  #topMobileNextPhrase:focus {
    box-shadow: none;
    background: transparent;
  }

  /* Ensure offcanvas close button is light in dark theme (no black X) */
  :is(html:not([data-theme]), html[data-theme="dark"]) .offcanvas .btn-close {
    filter: none; /* keep SVG white as defined */
    opacity: 0.9;
  }
  :is(html:not([data-theme]), html[data-theme="dark"])
    .offcanvas
    .btn-close:hover {
    opacity: 1;
  }

  /* Improve readability of offcanvas title ("Menu") in dark */
  :is(html:not([data-theme]), html[data-theme="dark"])
    .offcanvas
    .offcanvas-title {
    color: var(--text);
    opacity: 0.96;
    text-shadow: none;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  /* Offcanvas width and header polish (mobile) */
  .offcanvas {
    --bs-offcanvas-width: min(92vw, 420px);
  }
  .offcanvas .offcanvas-header.sticky-top {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--border);
  }

  /* Comfortable, readable items */
  .offcanvas .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    color: var(--text);
    background: transparent;
    border: 0; /* no underlines between items */
  }
  .offcanvas .list-group-item + .list-group-item {
    border-top: 0;
  }
  .offcanvas .list-group-item:hover,
  .offcanvas .list-group-item:focus {
    background: var(--surface-2);
    outline: none;
  }
  .offcanvas .list-group-item .bi {
    font-size: 1.12rem;
    opacity: 0.9;
  }

  /* Section headers */
  .offcanvas .dropdown-header {
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.06em;
    opacity: 0.95;
  }
  .offcanvas hr {
    border-color: color-mix(in oklab, var(--border) 50%, transparent);
    opacity: 0.55;
  }

  /* (Retiré) Styles de chevrons pour sections repliables dans l'offcanvas */
}

/* ========== NAVBAR — anti-overlap for adjacent controls ========== */
/* Ensure adjacent controls don't collapse like a .btn-group inside navbar */
.navbar .btn,
.navbar .navbar-toggler {
  position: relative;
  flex-shrink: 0; /* never shrink into each other */
}

/* Cancel Bootstrap's adjacent button collapse when not in a real .btn-group */
.navbar .btn + .btn,
.navbar .btn + .navbar-toggler,
.navbar .navbar-toggler + .btn,
.navbar .navbar-toggler + .navbar-toggler {
  margin-left: 0.5rem; /* explicit gap */
}

/* If wrapped in a .btn-group, break the -1px collapsing margins */
.navbar .btn-group > .btn + .btn,
.navbar .btn-group > .btn + .btn-group,
.navbar .btn-group > .btn-group + .btn,
.navbar .btn-group > .btn-group + .btn-group {
  margin-left: 0.5rem;
}

/* Keep rounded corners independent (avoid visual merging) */
.navbar .btn,
.navbar .btn:focus,
.navbar .btn:hover,
.navbar .navbar-toggler {
  border-radius: 0.75rem;
  z-index: 1; /* prevent outline overlap */
}

/* Provide a minimum right padding in the container to avoid clipping against edge */
.navbar .container,
.navbar .container-fluid {
  padding-right: max(var(--space-2), 0.75rem);
}

/* ========== NAVBAR — minimal safe spacing (does not alter collapse/offcanvas) ========== */
.navbar .navbar-toggler + .btn,
.navbar .btn + .navbar-toggler,
.navbar .btn + .btn {
  margin-left: 0.5rem;
}

/* ========== NAVBAR RIGHT — neutralize neumorphic on right-side links ========== */
/* Keep the raised effect only for center "Phrase" chips; right links stay flat */
:is(html:not([data-theme]), html[data-theme="dark"])
  #navbarContentDroite
  .nav-link,
:is(html:not([data-theme]), html[data-theme="dark"]) .navbar-actions .nav-link {
  background: transparent;
  box-shadow: none;
}
:is(html:not([data-theme]), html[data-theme="dark"])
  #navbarContentDroite
  .nav-link.active,
:is(html:not([data-theme]), html[data-theme="dark"])
  .navbar-actions
  .nav-link.active {
  background: transparent;
  box-shadow: none;
  color: var(--navbar-color, var(--text));
}

/* ========== Opt-out: compact/special controls (theme toggle) ========== */
/* Do NOT force tall min-height or padding on custom switches/toggles */

.theme-checkbox {
  min-height: 0;
  height: auto;
  padding: 0;
  line-height: 1;
  border-radius: var(--neu-radius-pill); /* keep pill shape without inflating */
}

/* Cancel the global outline ring for the theme switch and use a lighter one */
.theme-checkbox:focus,
.theme-checkbox:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
  border-radius: var(--neu-radius-pill);
}

/* ========== Theme checkbox: route focus to pill, avoid long bar ========== */
/* (Removed nested input focus overrides and :has() focus routing to keep the input compact and self-contained) */

/* Compact pill switch as the input itself */
input.theme-checkbox {
  appearance: none;
  display: inline-block;
  width: 48px;
  height: 24px;
  min-height: 0; /* prevent stretching from global input rules */
  border-radius: var(--neu-radius-pill);
  background: var(--surface-2);
  position: relative;
  cursor: pointer;
  transition:
    background-color 0.2s,
    box-shadow 0.2s;
}
input.theme-checkbox::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s;
}
input.theme-checkbox:checked::before {
  /* Override dist/app.purged.css which moves knob via `left:` */
  left: 2px;
  transform: translateX(24px);
}
input.theme-checkbox:checked {
  background: var(--accent);
}
input.theme-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* Navbar sizing variant for the compact switch */
.navbar input.theme-checkbox {
  width: 44px;
  height: 22px;
}
.navbar input.theme-checkbox::before {
  width: 18px;
  height: 18px;
}
.navbar input.theme-checkbox:checked::before {
  left: 2px;
  transform: translateX(22px);
}

/* ========== Corpus chips (phrase buttons) — subtler borders ========== */
/* Base thinner border */
.navbar .corpus-chip {
  --bs-btn-border-width: 0.5px;
  border-width: 0.5px;
}
/* Tone down border color for both desktop and mobile chips */

#desktopNavCenter .corpus-chip.btn-outline-secondary,
#navbarContent #menu .corpus-chip.btn-outline-secondary {
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-color: var(--text);
  border-color: color-mix(in oklab, var(--border) 80%, transparent);
}
/* Softer hover (avoid bright white, especially in dark) */

#desktopNavCenter .corpus-chip.btn-outline-secondary:hover,
#navbarContent #menu .corpus-chip.btn-outline-secondary:hover {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

/* Primary corpus chips — use accent violet */
#desktopNavCenter .corpus-chip.btn-outline-primary,
#navbarContent #menu .corpus-chip.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  color: var(--accent);
  border-color: var(--accent);
}
#desktopNavCenter .corpus-chip.btn-outline-primary:hover,
#navbarContent #menu .corpus-chip.btn-outline-primary:hover {
  background-color: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Filled primary chips (if used) */
#desktopNavCenter .corpus-chip.btn-primary,
#navbarContent #menu .corpus-chip.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
#desktopNavCenter .corpus-chip.btn-primary:hover,
#navbarContent #menu .corpus-chip.btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ========== CORPUS SWITCHER — active relief (violet) & inactive creux ========== */
#corpusSwitcher .corpus-chip {
  border: 0; /* prefer shadow strokes */
  border-radius: var(--neu-radius-sm);
  background: transparent;
  color: var(--text);
  transition:
    background-color var(--neu-transition-default),
    box-shadow var(--neu-transition-default),
    color var(--neu-transition-default),
    transform var(--neu-transition-fast);
  position: relative;
  z-index: 0; /* allow pseudo-elements/filters without being under neighbors */
}

/* Allow raised shadows to render outside the row; keep horizontal scroll */
#corpusSwitcher {
  overflow: visible;
  padding-top: 6px;
  padding-bottom: 6px;
  max-width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Active chip — Apple-like filled accent pill */
#corpusSwitcher .corpus-chip.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid color-mix(in oklab, var(--accent) 75%, black 25%);
  border-radius: var(--neu-radius-sm);
  box-shadow:
    var(--elev-1),
    0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
  transform: none;
}
#corpusSwitcher .corpus-chip.btn-primary:hover {
  background: var(--accent-hover);
  border-color: color-mix(in oklab, var(--accent-hover) 75%, black 25%);
  box-shadow:
    var(--elev-2),
    0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
  transform: translateY(-1px);
}
#corpusSwitcher .corpus-chip.btn-primary::before {
  content: none;
}

#corpusSwitcher .corpus-chip.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    var(--elev-1),
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}
#corpusSwitcher .corpus-chip.btn-outline-secondary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

/* Inactive chips — ghost/outline style */
#corpusSwitcher .corpus-chip.btn-outline-secondary {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  box-shadow: none;
}
#corpusSwitcher .corpus-chip.btn-outline-secondary:hover {
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  border-color: var(--border);
  box-shadow: var(--elev-1);
}

/* ===== Accessibility: respect reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none;
  }
}

@media (max-height: 700px) {
  .min-vh-100.justify-content-center {
    justify-content: flex-start;
  }
}

#editionForm {
  box-sizing: border-box;
  flex: 1 0 auto;
  min-height: calc(100vh - var(--manual-nav-offset, 0px));
  --edit-panel-bg: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
  --edit-panel-border: color-mix(in oklab, var(--border) 42%, transparent);
  --edit-input-bg: color-mix(in oklab, var(--surface) 86%, var(--bg) 14%);
  --edit-input-border: color-mix(in oklab, var(--border) 58%, transparent);
  --edit-input-ring: var(--focus-ring);
  --edit-action-shadow: var(--elev-1);
  --edit-action-shadow-hover: var(--elev-2);
}

#editionForm textarea.form-control {
  color: color-mix(in oklab, var(--text) 92%, black 8%);
  font-size: 1.12rem;
  line-height: 1.6;
}
:is(html:not([data-theme]), html[data-theme="dark"])
  #editionForm
  textarea.form-control {
  color: color-mix(in oklab, var(--text) 92%, white 8%);
}
#editionForm textarea.form-control::placeholder {
  font-size: 1.12rem;
  color: color-mix(in oklab, var(--text) 72%, var(--bg) 28%);
  opacity: 1;
}

/* ===== Edition Form — cohesive premium surface (both themes) ===== */
#editionForm > #form {
  flex: 0 0 auto;
  width: min(100%, 980px);
  background: var(--edit-panel-bg);
  border: 1px solid var(--edit-panel-border);
  box-shadow: var(--elev-2);
  border-radius: var(--neu-radius-xl);
  backdrop-filter: saturate(110%);
}

#editionForm > #form .card-body {
  padding: clamp(1rem, 1.2vw + 0.7rem, 1.6rem);
  background: transparent;
}

#editionForm textarea.form-control {
  background: var(--edit-input-bg);
  border: 1px solid var(--edit-input-border);
  border-radius: var(--neu-radius-md);
  box-shadow:
    inset 0 1px 0 var(--surface-tint),
    inset 0 0 0 1px color-mix(in oklab, var(--surface-stroke) 45%, transparent);
  transition:
    border-color var(--neu-transition-default),
    box-shadow var(--neu-transition-default),
    background-color var(--neu-transition-default);
}

#editionForm textarea.form-control:hover {
  border-color: color-mix(
    in oklab,
    var(--edit-input-border) 70%,
    var(--text) 30%
  );
}

#editionForm textarea.form-control:focus,
#editionForm textarea.form-control:focus-visible {
  background: color-mix(in oklab, var(--edit-input-bg) 84%, var(--surface) 16%);
  border-color: color-mix(
    in oklab,
    var(--accent) 42%,
    var(--edit-input-border) 58%
  );
  box-shadow:
    0 0 0 0.16rem var(--edit-input-ring),
    inset 0 1px 0 var(--surface-tint);
}

#editionForm .btn-group .btn,
#editionForm #validManuel {
  border-radius: var(--neu-radius-sm);
  box-shadow: var(--edit-action-shadow);
  transition:
    transform var(--neu-transition-fast),
    box-shadow var(--neu-transition-default),
    filter var(--neu-transition-default);
}

#editionForm .btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#editionForm .btn-group .btn {
  min-height: 2.9rem;
  padding: 0.62rem 1.2rem;
  border-radius: var(--neu-radius-sm);
  font-weight: 600;
}

#editionForm .btn-group .btn:hover,
#editionForm #validManuel:hover {
  transform: translateY(-1px);
  box-shadow: var(--edit-action-shadow-hover);
}

#editionForm .btn-group .btn:active,
#editionForm #validManuel:active {
  transform: translateY(0);
  box-shadow: var(--edit-action-shadow);
}

#editionForm .btn-group .btn:focus-visible,
#editionForm #validManuel:focus-visible {
  box-shadow:
    0 0 0 0.16rem var(--focus-ring),
    var(--edit-action-shadow-hover);
}

/* Primary soft for edition submit action */
#editionForm #validManuel {
  background: color-mix(in oklab, var(--accent) 48%, var(--surface) 52%);
  border: 1px solid color-mix(in oklab, var(--accent) 54%, var(--border) 46%);
  color: color-mix(in oklab, var(--on-accent) 92%, var(--text) 8%);
}

#editionForm #validManuel:hover {
  background: color-mix(in oklab, var(--accent) 58%, var(--surface) 42%);
}

:is(html:not([data-theme]), html[data-theme="dark"]) #editionForm #validManuel {
  background: color-mix(in oklab, var(--accent) 42%, var(--surface) 58%);
  border-color: color-mix(in oklab, var(--accent) 48%, var(--border) 52%);
}

html[data-theme="light"] #editionForm #validManuel {
  background: color-mix(in oklab, var(--accent) 40%, var(--surface) 60%);
  border-color: color-mix(in oklab, var(--accent) 62%, var(--border) 38%);
  /* Texte plus sombre pour atteindre WCAG AA (≥ 4.5:1) sur fond lavande clair */
  color: color-mix(in oklab, var(--accent) 72%, black 28%);
}

html[data-theme="light"] #editionForm #validManuel:hover {
  background: color-mix(in oklab, var(--accent) 48%, var(--surface) 52%);
  color: color-mix(in oklab, var(--accent) 76%, black 24%);
}

html[data-theme="light"] #editionForm #validManuel .bi {
  color: currentColor;
}

:is(html:not([data-theme]), html[data-theme="dark"]) #editionForm {
  --edit-panel-bg: color-mix(in oklab, var(--surface) 86%, var(--bg) 14%);
  --edit-panel-border: color-mix(in oklab, var(--border) 36%, transparent);
  --edit-input-bg: color-mix(in oklab, var(--surface) 82%, black 18%);
  --edit-input-border: color-mix(in oklab, var(--border) 44%, transparent);
}

html[data-theme="light"] #editionForm {
  --edit-panel-bg: color-mix(in oklab, var(--surface) 95%, var(--bg) 5%);
  --edit-panel-border: color-mix(in oklab, var(--border) 60%, transparent);
  --edit-input-bg: color-mix(in oklab, var(--surface) 90%, var(--bg) 10%);
  --edit-input-border: color-mix(in oklab, var(--border) 72%, transparent);
}

/* ===== Corpus Code Form ===== */
#corpusCodeView {
  --corpus-code-max: clamp(320px, 40vw, 420px);
  min-height: max(60vh, calc(100dvh - var(--manual-nav-offset, 0px)));
  display: grid;
  grid-auto-rows: max-content;
  justify-items: center;
  align-content: center;
  gap: clamp(18px, 5vh, 36px);
  padding-top: clamp(16px, 3vh, 32px);
  padding-bottom: clamp(16px, 3vh, 32px);
}

#corpusCodeView .corpus-code-shell {
  width: min(100%, var(--corpus-code-max));
  display: flex;
  justify-content: center;
  padding-top: 0;
}
#corpusCodeView .corpus-code-card {
  /* Structure only — visuals (background, border, shadow) handled by _corpus-code-view.css */
  width: 100%;
  padding: clamp(16px, 3vw, 22px);
  border-radius: 24px;
  transition:
    transform var(--neu-transition-default),
    box-shadow var(--neu-transition-slow);
}
#corpusCodeView .card-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 16px);
  text-align: left;
  background: transparent;
  border-radius: var(--neu-radius-lg);
  padding: clamp(14px, 2.5vw, 20px);
  box-shadow: none;
}
#corpusCodeView .corpus-code-header {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.5rem;
}
#corpusCodeView .corpus-code-header h2 {
  text-align: center;
  margin: 0;
  width: 100%;
  padding-inline: 3.25rem 0.75rem;
  box-sizing: border-box;
  overflow-wrap: normal;
  word-break: normal;
}
#corpusCodeView form {
  width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vw, 16px);
  align-items: center;
  margin-inline: auto;
}
#corpusCodeView .corpus-code-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
#corpusCodeView .corpus-code-field .invalid-feedback {
  text-align: center;
}
#corpusCodeView .form-control-lg {
  /* Structure only — border, background, focus ring in _corpus-code-view.css */
  min-height: 3.25rem;
  text-align: center;
}
#corpusCodeView .corpus-code-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0;
}
#corpusCodeView .corpus-code-actions .btn-lg {
  min-width: clamp(120px, 16vw, 180px);
}

#corpusCodeView .corpus-code-back {
  /* Structure — visuals (background, border, color, shadow) in _corpus-code-view.css */
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  width: auto;
  max-width: none;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--neu-radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.3rem;
  transition:
    transform 0.16s ease,
    box-shadow 0.18s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

#corpusCodeView .corpus-code-back-label {
  line-height: 1;
  display: none;
}

#corpusCodeView .corpus-code-back i {
  font-size: 0.98rem;
  line-height: 1;
}

@media (max-width: 576px) {
  #corpusCodeView {
    gap: clamp(24px, 8vh, 42px);
  }
  #corpusCodeView .corpus-code-shell {
    padding-top: 0;
    width: min(100%, 90vw);
  }
  #corpusCodeView .corpus-code-header {
    /* Ligne horizontale : [←] [titre centré] [spacer] */
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
  }
  /* Spacer droit = largeur du bouton → titre parfaitement centré */
  #corpusCodeView .corpus-code-header::after {
    content: "";
    flex: 0 0 2.25rem;
    height: 1px;
  }
  #corpusCodeView .corpus-code-header h2 {
    order: unset;
    flex: 1;
    padding-inline: 0.25rem;
    font-size: clamp(0.95rem, 4vw, 1.15rem);
  }
  #corpusCodeView .corpus-code-back {
    position: static;
    transform: none;
    order: unset;
    flex: 0 0 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    font-size: 0.9rem;
  }
  #corpusCodeView .corpus-code-back-label {
    display: none;
  }
  #corpusCodeView .corpus-code-shell {
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 4vh, 24px);
  }
  #corpusCodeView .corpus-code-card {
    width: min(100%, 92vw);
  }
}

@supports (min-height: 100dvh) {
  #editionForm {
    min-height: calc(100dvh - var(--manual-nav-offset, 0px));
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  #editionForm .btn-group {
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #editionForm .btn-group .btn {
    flex: 1 1 50%;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  #editionForm .btn-group {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #editionForm .btn-group .btn {
    flex: 1 1 50%;
    justify-content: center;
  }

  #editionForm {
    min-height: auto;
    justify-content: center;
    flex: 1 0 auto;
  }

  @supports (min-height: 100dvh) {
    #editionForm {
      min-height: auto;
    }
  }
}

/* Subtle layout polish and motion tuning */

:where(.btn, .card, .dropdown-menu, .nav-link, .form-control) {
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
:where( h2, h3, h4, h5, .btn, .nav-link, .badge) {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Ensure dropdowns/modals use token surfaces */
:where(.card, .dropdown-menu, .modal-content) {
  box-shadow: var(--elev-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 16px);
}
:where(.card:hover) {
  box-shadow: var(--elev-2);
}

/* Buttons (primary) */
:where(.btn-primary) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
:where(.btn-primary:hover) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
:where(.btn-primary:active, .btn-primary.active) {
  background: var(--accent-active);
  border-color: var(--accent-active);
}

/* Tables */
:where(.table thead th) {
  border-bottom-color: var(--border-strong);
}
:where(.table-hover tbody tr:hover) {
  background: var(--surface-2);
}
:where(.table-striped tbody tr:nth-of-type(odd)) {
  background: var(--surface-2);
}
:where(.table-active) {
  background: var(--surface-3);
}

/* Focus */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* Final theme overrides to ensure light background takes effect regardless of bundle order */

/* Light theme tokens mapping — uses the palette tokens from :root */
html[data-theme="light"] {
  --bg: var(--bg-light);
  --bs-body-bg: var(--bg);
}

/* Force surfaces to render on the light background */
html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] .container,
html[data-theme="light"] .container-fluid,
html[data-theme="light"] [data-view] {
  background: var(--bg);
  background-color: var(--bg);
}

/* No halo in light */
html[data-theme="light"] .halo-bg {
  display: none !important;
}

/* UI state visibility rules (idempotent) */
body.state-no-analyses .needs-analyses {
  display: none !important;
}
body.state-editing .needs-not-editing {
  display: none !important;
}
/* Intro visibility */
body.state-intro .needs-no-intro {
  display: none !important;
}
/* Mode visibility */
body.state-mode-corpus .needs-mode-manual {
  display: none !important;
}
body.state-mode-manual .needs-mode-corpus {
  display: none !important;
}

/* Subtle affordance on brand (hover/focus) */
.navbar .navbar-brand.backToIntro {
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}
.navbar .navbar-brand.backToIntro:hover,
.navbar .navbar-brand.backToIntro:focus-visible {
  text-shadow: none;
  color: inherit;
  outline: none;
  opacity: 0.92; /* feedback léger et moderne */
}
@media (prefers-reduced-motion: reduce) {
  .navbar .navbar-brand.backToIntro {
    transition: none;
  }
}

/* Mobile navbar layout (Bootstrap-only). Backup of prior grid layout kept below as comment. */
@media (max-width: 991.98px) {
  /* Backup (previous custom grid layout):
  .navbar .container-fluid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: .5rem; }
  .navbar .nav-left { grid-column: 1; }
  .navbar .top-mobile-nav { grid-column: 2; justify-self: center; }
  .navbar .navbar-nav.d-xl-none { grid-column: 3; justify-self: end; }
  */
  /* Activate grid on the navbar container to center middle area between side blocks */
  .navbar > .container-fluid {
    display: grid;
    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
    align-items: center;
    column-gap: 0.5rem;
  }
  .navbar > .container-fluid > .mobile-left {
    grid-column: 1;
  }
  .navbar > .container-fluid > .mobile-center {
    grid-column: 2;
    justify-self: center;
  }
  .navbar > .container-fluid > .mobile-right {
    grid-column: 3;
    justify-self: end;
  }
  /* Ensure the collapse row spans the full width below */
  .navbar > .container-fluid > #navbarContent {
    grid-column: 1 / -1;
  }
  .top-mobile-nav .newPhraseLink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bs-light);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .top-mobile-nav .newPhraseLink:hover {
    text-decoration: underline;
  }
  .top-mobile-nav .newPhraseLink:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 0.25rem;
  }
  /* Make chevrons slightly smaller and tighter */
  .top-mobile-nav .btn.btn-sm {
    padding: 0.15rem 0.4rem;
    line-height: 1.1;
  }
  .top-mobile-nav .btn i {
    font-size: 0.95rem;
  }
  /* Add spacing between center controls and collapse content */
  .navbar-collapse#navbarContent {
    margin-top: 0.2rem;
    /* Stretch the collapse to full viewport width */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding-left: 0;
    padding-right: 0;
    /* Shared side padding as a CSS var for children */
    --collapse-side: clamp(0.5rem, 4vw, 1.25rem);
  }
  .mobile-center {
    padding-bottom: 0.15rem;
  }
  /* Brand sizing now handled by Bootstrap display + fs utilities.
     Backup of previous font-size override: .navbar .navbar-brand { font-size: 1.1rem; } */
}
/* Mobile collapse menu: phrases take full window width (only here) */
@media (max-width: 991.98px) {
  /* One column grid spanning the viewport width */
  #navbarContent #menu {
    /* Neutralize Bootstrap row/col gutters and layout */
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem; /* slightly tighter spacing between buttons */
    /* Leave a smaller room under the top-mobile-nav */
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: var(--collapse-side);
    padding-right: var(--collapse-side);
    width: 100vw;
    box-sizing: border-box;
    margin: 0 auto;
  }
  /* Remove col padding so buttons can truly span viewport width */
  #navbarContent #menu > .phraseSelect.col {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  /* Full-viewport-width buttons centered */
  #navbarContent #menu .phraseSelect .btn {
    display: block;
    width: calc(100vw - 2 * var(--collapse-side));
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
    text-align: center;
  }
  #navbarContent #menu .phraseSelect {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /* Full-width buttons for phrases only in the collapse */
  #navbarContent #menu .phraseSelect .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 360px) {
  .top-mobile-nav .btn i {
    font-size: 0.88rem;
  }
}
@media (max-width: 420px) {
  .nav-left {
    gap: 0.4rem;
  }
  .top-mobile-nav .newPhraseLink {
    font-size: 0.98rem;
  }
}

/* Desktop navbar layout: left | center | right using grid to truly center the middle block */
@media (min-width: 992px) {
  .navbar > .container-fluid {
    display: grid;
    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
    align-items: center;
    column-gap: 0.75rem;
  }
  .navbar > .container-fluid > .nav-left {
    grid-column: 1;
  }
  .navbar > .container-fluid > #desktopNavCenter {
    grid-column: 2;
    justify-self: center;
  }
  .navbar > .container-fluid > #navbarContentDroite {
    grid-column: 3;
    justify-self: end;
  }
}

/* Intro cards centering handled via Bootstrap grid (no custom CSS) */

/* =====================================================================
   NEUMORPHISM PREMIUM — Animations & Accessibility Enhancements
   ===================================================================== */

/* ===== MICRO-INTERACTIONS — Subtle tactile feedback ===== */
@keyframes neu-press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes neu-lift {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Focus ring pulse for keyboard navigation */
@keyframes focus-ring-pulse {
  0%,
  100% {
    box-shadow:
      var(--elev-1),
      0 0 0 0.2rem var(--focus-ring);
  }
  50% {
    box-shadow:
      var(--elev-1),
      0 0 0 0.28rem color-mix(in oklab, var(--focus-ring) 55%, transparent);
  }
}

/* Apply pulse only on keyboard focus, not mouse click */
.btn:focus-visible:not(:active),
.form-control:focus-visible:not(:active),
.form-check-input:focus-visible:not(:active) {
  animation: focus-ring-pulse 1.8s ease-in-out infinite;
}

/* ===== REDUCED MOTION — Respect user preferences ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  .btn:focus-visible,
  .form-control:focus-visible,
  .form-check-input:focus-visible {
    animation: none;
  }
}

/* ===== HIGH CONTRAST MODE — Enhanced visibility ===== */
@media (prefers-contrast: more) {
  /* Add borders for clearer definition */
  .btn,
  .card,
  .form-control,
  .form-select,
  .badge,
  .alert,
  .modal-content,
  .toast {
    border: 2px solid var(--border-strong);
  }

  /* Stronger focus rings */

  /* Higher contrast for text */
  .text-muted {
    color: color-mix(in oklab, var(--text) 75%, var(--bg) 25%);
  }
}

/* ===== GLOBAL FOCUS VISIBILITY — Clear keyboard navigation ===== */

/* ===== SKIP LINK — Keyboard navigation aid ===== */

/* ===== DISABLED STATES — Clear visual distinction ===== */

.disabled,
[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(15%);
  pointer-events: none;
}

/* ===== LOADING STATES — Skeleton shimmer ===== */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ===== SMOOTH THEME TRANSITIONS ===== */
html,
html[data-theme],
body,
.card,
.btn,
.modal-content,
.alert,
.badge,
.toast,
.navbar {
  transition:
    color var(--neu-transition-slow, 250ms) ease,
    background-color var(--neu-transition-slow, 250ms) ease,
    border-color var(--neu-transition-slow, 250ms) ease,
    box-shadow var(--neu-transition-default, 180ms) ease;
}

/* ===== PRINT STYLES — Clean output ===== */
@media print {
  *,
  *::before,
  *::after {
    box-shadow: none;
    text-shadow: none;
  }

  .btn,
  .card,
  .modal-content,
  .alert {
    border: 1px solid #ccc;
  }

  .navbar,
  .offcanvas,
  .modal-backdrop {
    display: none !important;
  }
}

/* ===========================
   Premium Neo (opt-in scope)
   Toggle by adding .neo-premium on #introPanel
   =========================== */

#introPanel.neo-premium {
  /* Tokens actifs (utilisés par les règles ci-dessous) */
  --neo-surface-1: #20242b;
  --neo-dark: rgba(0, 0, 0, 0.45);
  --neo-light: rgba(255, 255, 255, 0.06);
  --neo-inner: rgba(255, 255, 255, 0.05);
  --neo-radius: 18px;
}

/* Thème sombre : fond uniforme = même --bg que navbar/body, pas de dégradé particulier */
:is(html:not([data-theme]), html[data-theme="dark"]) #introPanel.neo-premium {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}

/* Thème clair : idem, laisse [data-view="intro"] et le body gérer le fond */
html[data-theme="light"] #introPanel.neo-premium {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}

/* Dark only: noise texture overlay */
:is(html:not([data-theme]), html[data-theme="dark"])
  #introPanel.neo-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' stitchTiles='stitch'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)' opacity='0.03'/>\
</svg>");
  mix-blend-mode: soft-light;
  z-index: 0;
}
html[data-theme="light"] #introPanel.neo-premium::before {
  content: none;
}

#introPanel.neo-premium .neo-card {
  position: relative;
  background: var(--neo-surface-1);
  border-radius: var(--neo-radius);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    12px 12px 24px var(--neo-dark),
    -8px -8px 18px var(--neo-light);
  overflow: hidden;
  z-index: var(--z-raised);
}

#introPanel.neo-premium .neo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

#introPanel.neo-premium .neo-card:hover {
  transform: translateY(-4px);
  box-shadow:
    16px 16px 32px rgba(0, 0, 0, 0.55),
    -10px -10px 22px rgba(255, 255, 255, 0.07);
}

#introPanel.neo-premium .neo-card .card-body {
  background: transparent;
  color: #e6e6e6;
}

#introPanel.neo-premium .neo-card .card-title {
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: none;
  color: #f0f0f0;
}

#introPanel.neo-premium .neo-card .card-body {
  font-weight: 450;
  line-height: 1.25;
}

#introPanel.neo-premium .neo-card .card-title {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
}

#introPanel.neo-premium .neo-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.08),
    transparent 60%
  );
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.05),
    0 10px 20px var(--neo-dark);
  color: #dfe7ff;
}

/* Toutes les icônes d'intro unifiées sur --accent (violet système) */
#introPanel.neo-premium .neo-icon.neo-blue,
#introPanel.neo-premium .neo-icon.neo-green,
#introPanel.neo-premium .neo-icon.neo-violet {
  color: var(--accent);
  box-shadow: 0 0 24px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* ===========================
   Navbar Theme Toggle — token-based (both themes)
   =========================== */
.navbar .theme-checkbox,
.navbar input.theme-checkbox {
  width: 52px;
  height: 26px;
  border-radius: var(--neu-radius-pill);
  background: color-mix(in oklab, var(--surface-2) 85%, var(--bg) 15%);
  border: 1px solid var(--surface-stroke);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--border) 35%, transparent),
    var(--elev-1);
}

.navbar input.theme-checkbox::before {
  width: 22px;
  height: 22px;
  top: 1px;
  left: 1px;
  background: color-mix(in oklab, var(--surface) 88%, white 12%);
  border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  box-shadow:
    0 2px 7px color-mix(in oklab, var(--text) 30%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 70%, transparent);
}

.navbar input.theme-checkbox::after {
  content: "☾";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: var(--neu-radius-pill);
  font-size: 12px;
  line-height: 1;
  color: color-mix(in oklab, var(--text) 82%, white 18%);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 45%, transparent);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.navbar input.theme-checkbox:checked {
  background: color-mix(in oklab, var(--accent) 80%, var(--surface) 20%);
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border) 45%);
  box-shadow: var(--elev-1);
}

.navbar input.theme-checkbox:checked::before {
  transform: translateX(26px);
}

.navbar input.theme-checkbox:checked::after {
  content: "☀";
  left: 6px;
  right: auto;
  color: color-mix(in oklab, var(--text) 88%, white 12%);
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .navbar
  input.theme-checkbox::before {
  background: color-mix(in oklab, var(--surface) 76%, white 24%);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 2px 8px var(--neo-dark),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .navbar
  input.theme-checkbox::after {
  color: rgba(247, 248, 252, 0.96);
  background: rgba(0, 0, 0, 0.26);
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .navbar input.theme-checkbox::before {
  background: color-mix(in oklab, var(--surface) 94%, white 6%);
  border-color: rgba(20, 28, 40, 0.2);
  box-shadow:
    0 1px 5px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .navbar input.theme-checkbox::after {
  color: rgba(20, 28, 40, 0.78);
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(0, 0, 0, 0.12);
  text-shadow: none;
}

.navbar input.theme-checkbox:focus-visible {
  box-shadow:
    0 0 0 2px var(--focus-ring),
    0 0 0 5px color-mix(in oklab, var(--focus-ring) 60%, transparent),
    var(--elev-1);
}

/* Burger premium */
.navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--neu-radius-sm);
  padding: 0.4rem 0.55rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(0, 0, 0, 0.2)
  );
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.05),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

.navbar .navbar-toggler:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(94, 199, 178, 0.4),
    0 0 0 5px rgba(94, 199, 178, 0.15);
}

.navbar .navbar-toggler-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  opacity: 0.9;
}

/* ===========================
   Navbar Tone (both themes)
   =========================== */
.navbar {
  background: var(--bg);
  border-bottom: 1px solid color-mix(in oklab, var(--bg) 88%, white 12%);
}

/* ===========================
   Light Theme — Premium Navbar (soft elevation)
   =========================== */
html[data-theme="light"] .navbar {
  background: var(--bg);
  border-bottom: none;
  box-shadow:
    0 1px 2px var(--elev-close),
    0 2px 8px var(--elev-ambient);
}

/* Hamburger — subtle pill with hover feedback */
html[data-theme="light"] .navbar .navbar-toggler {
  border: 1px solid var(--border);
  border-radius: var(--neu-radius-sm);
  background: var(--surface-2);
  box-shadow: none;
  color: var(--text);
  transition:
    background var(--neu-transition-default),
    box-shadow var(--neu-transition-default),
    transform var(--neu-transition-fast);
}

html[data-theme="light"] .navbar .navbar-toggler:hover,
html[data-theme="light"] .navbar .navbar-toggler:focus-visible {
  background: var(--surface);
  box-shadow: none;
  transform: translateY(-1px);
}

html[data-theme="light"] .navbar .navbar-toggler:active {
  transform: translateY(0);
  box-shadow: none;
}

html[data-theme="light"] .navbar .navbar-toggler-icon {
  filter: none;
  opacity: 0.85;
}

/* newPhraseLink uses --bs-light (near-white) which disappears on light bg */
html[data-theme="light"] .top-mobile-nav .newPhraseLink {
  color: var(--text);
}

/* ===========================
   Global Semantic Buttons
   Apple-like hierarchy — redéfinition des variables Bootstrap
   (--bs-btn-* lues par .btn, pas besoin de)
   =========================== */
.btn-warning:not(.btn-outline-warning) {
  --bs-btn-bg: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
  --bs-btn-border-color: color-mix(in oklab, var(--border) 72%, transparent);
  --bs-btn-color: var(--text);
  --bs-btn-hover-bg: color-mix(in oklab, var(--surface) 86%, var(--bg) 14%);
  --bs-btn-hover-border-color: color-mix(
    in oklab,
    var(--border) 72%,
    transparent
  );
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-color: var(--text);
  box-shadow: var(--elev-1);
}

.btn-danger:not(.btn-outline-danger) {
  --bs-btn-bg: color-mix(in oklab, var(--danger) 85%, white 15%);
  --bs-btn-border-color: color-mix(in oklab, var(--danger) 70%, black 30%);
  --bs-btn-color: var(--on-danger);
  --bs-btn-hover-bg: color-mix(in oklab, var(--danger) 92%, black 8%);
  --bs-btn-hover-border-color: color-mix(
    in oklab,
    var(--danger) 70%,
    black 30%
  );
  --bs-btn-hover-color: var(--on-danger);
  --bs-btn-active-color: var(--on-danger);
  box-shadow: var(--elev-1);
}

.btn-info:not(.btn-outline-info) {
  --bs-btn-bg: var(--info);
  --bs-btn-border-color: color-mix(in oklab, var(--info) 72%, black 28%);
  --bs-btn-color: var(--on-info, #fff);
  --bs-btn-hover-bg: color-mix(in oklab, var(--info) 88%, black 12%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--info) 72%, black 28%);
  --bs-btn-hover-color: var(--on-info, #fff);
  --bs-btn-active-color: var(--on-info, #fff);
  box-shadow: var(--elev-1);
}

.btn-success:not(.btn-outline-success) {
  --bs-btn-bg: color-mix(in oklab, var(--success) 85%, white 15%);
  --bs-btn-border-color: color-mix(in oklab, var(--success) 70%, black 30%);
  --bs-btn-color: var(--on-success);
  --bs-btn-hover-bg: color-mix(in oklab, var(--success) 92%, black 8%);
  --bs-btn-hover-border-color: color-mix(
    in oklab,
    var(--success) 70%,
    black 30%
  );
  --bs-btn-hover-color: var(--on-success);
  --bs-btn-active-color: var(--on-success);
  box-shadow: var(--elev-1);
}

:where(
    .btn-warning:not(.btn-outline-warning),
    .btn-danger:not(.btn-outline-danger),
    .btn-info:not(.btn-outline-info),
    .btn-success:not(.btn-outline-success)
  )
  .bi {
  color: currentColor;
}

/* Dark theme : fills légèrement plus sombres pour meilleur rendu */
:is(html:not([data-theme]), html[data-theme="dark"])
  .btn-warning:not(.btn-outline-warning) {
  --bs-btn-bg: color-mix(in oklab, var(--surface) 84%, black 16%);
  --bs-btn-border-color: color-mix(in oklab, var(--border) 48%, transparent);
  --bs-btn-color: color-mix(in oklab, var(--text) 92%, white 8%);
  --bs-btn-hover-color: color-mix(in oklab, var(--text) 92%, white 8%);
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .btn-danger:not(.btn-outline-danger) {
  --bs-btn-bg: color-mix(in oklab, var(--danger) 80%, black 20%);
  --bs-btn-border-color: color-mix(in oklab, var(--danger) 60%, black 40%);
  --bs-btn-color: var(--on-danger);
  --bs-btn-hover-color: var(--on-danger);
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .btn-success:not(.btn-outline-success) {
  --bs-btn-bg: color-mix(in oklab, var(--success) 80%, black 20%);
  --bs-btn-border-color: color-mix(in oklab, var(--success) 60%, black 40%);
  --bs-btn-color: var(--on-success);
  --bs-btn-hover-color: var(--on-success);
}

/* ===========================
   Global Navbar Apple-like
   Unified style across all views
   =========================== */
.navbar {
  border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  box-shadow: none;
}

.navbar .nav-link.active {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--text);
  box-shadow: none;
  border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  transform: none;
}

/* Chip actif — accent solide, même style dark et light (comme Safari active tab) */
#desktopNavCenter .corpus-chip.btn-primary,
#navbarContent #menu .corpus-chip.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid color-mix(in oklab, var(--accent) 75%, black 25%);
  box-shadow: 0 1px 3px color-mix(in oklab, var(--accent) 28%, transparent);
}

#desktopNavCenter .corpus-chip.btn-primary:hover,
#navbarContent #menu .corpus-chip.btn-primary:hover {
  background: var(--accent-hover);
  border-color: color-mix(in oklab, var(--accent-hover) 75%, black 25%);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 35%, transparent);
}

#desktopNavCenter .corpus-chip.btn-primary:focus-visible,
#navbarContent #menu .corpus-chip.btn-primary:focus-visible {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

.navbar input.theme-checkbox {
  box-shadow: var(--elev-1);
}

.navbar input.theme-checkbox::before {
  box-shadow:
    0 1px 4px color-mix(in oklab, var(--text) 22%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 55%, transparent);
}

.navbar .navbar-toggler {
  background: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
  border: 1px solid color-mix(in oklab, var(--border) 65%, transparent);
  box-shadow: none;
}

/* ===== toolbox: assets/css/_toolbox.css ===== */
/* ============================================================
   TOOLBOX — styles du composant .tools-section
   Importé après app.css dans le build (build-css-bundle.mjs)
============================================================ */

/* ========== TOOLBOX TABS — Apple segmented control ========== */
/* Rail container */
.tools-section .nav-tabs {
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 25%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 25%, transparent);
  border-radius: var(--neu-radius-sm);
  padding: 3px;
  gap: 2px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

/* All tabs — pill shape */
.tools-section .nav-tabs .nav-link {
  color: color-mix(in oklab, var(--text) 55%, transparent);
  background: transparent;
  border: 0;
  border-radius: var(--neu-radius-sm);
  margin-bottom: 0;
  padding: 0.35rem 0.85rem;
  font-weight: 500;
  font-size: var(--ts-fs-sm);
  letter-spacing: 0.01em;
  box-shadow: none;
  transition:
    color var(--neu-transition-default),
    background-color var(--neu-transition-default),
    box-shadow var(--neu-transition-default);
}
.tools-section .nav-tabs .nav-link:hover {
  color: color-mix(in oklab, var(--text) 75%, transparent);
  background: color-mix(in oklab, var(--surface) 30%, transparent);
  filter: none;
}

/* Active tab — elevated pill */
.tools-section .nav-tabs .nav-link.active {
  position: relative;
  color: var(--text);
  background: var(--surface);
  border-radius: var(--neu-radius-sm);
  border: 0;
  box-shadow: var(--elev-1);
  transform: none;
  z-index: 1;
}
/* Kill the old accent underline pseudo-element */
.tools-section .nav-tabs .nav-link.active::after {
  content: none;
}

/* Tab content — no hairline borders, container handles it */
.tools-section .tab-content {
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Inactive tabs — clean ghost */
.tools-section .nav-tabs .nav-link:not(.active)::after {
  content: none;
}
.tools-section .nav-tabs .nav-link.disabled {
  color: color-mix(in oklab, var(--text) 30%, transparent);
  opacity: 0.6;
}
.tools-section .nav-tabs .nav-link:not(.active) {
  background: transparent;
  border-radius: var(--neu-radius-sm);
  color: color-mix(in oklab, var(--text) 55%, transparent);
  box-shadow: none;
}
.tools-section .nav-tabs .nav-link:not(.active):hover {
  color: color-mix(in oklab, var(--text) 75%, transparent);
  background: color-mix(in oklab, var(--surface) 30%, transparent);
  box-shadow: none;
}

/* ========== GLOBAL TABS — neutral dark variant (remove white backgrounds) ========== */
/* In dark mode (default), ensure general nav-tabs don't show white active bg */
html:not([data-theme]),
html[data-theme="dark"] {
  /* Keep tab strip subtle and theme-aligned */
  --tabs-border-color: var(--border);
}
html:not([data-theme]) .nav-tabs,
html[data-theme="dark"] .nav-tabs {
  background: transparent;
  border-bottom-color: var(--tabs-border-color);
}
html:not([data-theme]) .nav-tabs .nav-link,
html[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text);
  background: transparent;
}
html:not([data-theme]) .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:hover {
  background: transparent;
}
html:not([data-theme]) .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--text);
  background: transparent; /* remove Bootstrap's white */
}

.nav-tabs .nav-link:focus-visible:not(.disabled) {
  outline: none;
  box-shadow: 0 0 0 0.18rem var(--focus-ring);
  border-radius: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .nav-tabs .nav-link:focus-visible {
    transition: none !important;
  }
}
html[data-theme="light"] .nav-tabs .nav-link:focus-visible:not(.disabled) {
  box-shadow: 0 0 0 0.18rem var(--focus-ring); /* utilise le token — 35% en light, 45% en dark */
}

@media (max-width: 420px) {
  html[data-theme="light"] .tools-section,
  html[data-theme="light"] .tools-section .qv,
  html[data-theme="light"] .tools-section .rc,
  html[data-theme="light"] .tools-section .mh {
    box-shadow:
      0 1px 2px var(--elev-close),
      0 3px 8px var(--elev-ambient);
  }
}

/* Light theme: inner tab rail — plus de contraste sur fond clair */
html[data-theme="light"] .tools-section .nav-tabs {
  background: color-mix(in oklab, var(--surface-2) 75%, transparent);
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
}

/* Light theme: lists — fond surface-2 plus visible pour créer la hiérarchie */
html[data-theme="light"] .tools-section .listVerb,
html[data-theme="light"] .tools-section .listDetecteurs,
html[data-theme="light"] .tools-section .listPrincipal {
  background: color-mix(in oklab, var(--surface-2) 80%, transparent);
  border-color: color-mix(in oklab, var(--border) 40%, transparent);
}

/* Alertes toolbox — plus compactes et moins Bootstrap-ish (Apple-like, les deux thèmes) */
.tools-section .alert {
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  font-size: 0.82rem;
  box-shadow: none;
}

/* Dark-only: make INACTIVE general tabs more muted (grayer) */
html:not([data-theme]) .nav-tabs .nav-link:not(.active):not(.disabled),
html[data-theme="dark"] .nav-tabs .nav-link:not(.active):not(.disabled) {
  /* More muted than text-muted: blend text with bg */
  color: color-mix(in oklab, var(--text) 35%, var(--bg) 65%);
}
html:not([data-theme]) .nav-tabs .nav-link:not(.active):not(.disabled):hover,
html[data-theme="dark"] .nav-tabs .nav-link:not(.active):not(.disabled):hover {
  /* Slightly brighter on hover, still subtle */
  color: color-mix(in oklab, var(--text) 50%, var(--bg) 50%);
}

/* Dark-only: centered violet underline with fading ends under ACTIVE tab */
html:not([data-theme]) .nav-tabs .nav-link,
html[data-theme="dark"] .nav-tabs .nav-link {
  position: relative; /* anchor for the underline */
}
html:not([data-theme]) .nav-tabs .nav-link::after,
html[data-theme="dark"] .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px; /* aligns with tab strip border */
  height: 2px;
  width: 0; /* grows only on active */
  background: var(--accent); /* violet */
  /* fade both ends */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 22px,
    #000 calc(100% - 22px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 22px,
    #000 calc(100% - 22px),
    transparent
  );
  box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 55%, transparent);
  transition: width var(--neu-transition-slow);
  pointer-events: none;
  z-index: 2;
}
html:not([data-theme]) .nav-tabs .nav-link.active::after,
html[data-theme="dark"] .nav-tabs .nav-link.active::after {
  width: 100%; /* centered full-width with fading edges */
}

/* Light theme: override legacy #ff5722 underline from base.css — use accent token */
html[data-theme="light"] .nav-tabs .nav-link {
  position: relative;
}
html[data-theme="light"] .nav-tabs .nav-link::after {
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Light theme: fix hardcoded hover colors from base.css */
html[data-theme="light"] .nav-tabs .nav-link:not(.active):not(.disabled):hover {
  color: var(--text);
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
}

/* Dark-only: prevent clicking INACTIVE general tabs (but allow toolbox tabs) */
html:not([data-theme]) .nav-tabs .nav-link:not(.active),
html[data-theme="dark"] .nav-tabs .nav-link:not(.active) {
  pointer-events: auto;
  cursor: pointer;
}
/* Re-enable interactions inside toolbox */
.tools-section .nav-tabs .nav-link {
  pointer-events: auto;
  cursor: pointer;
}

/* =====================================================
   #generalTabs-nav — Progress stepper pill
   Remplace le style Bootstrap nav-tabs par un segmented
   control Apple cohérent avec les toolbox tabs.
   Aucun changement HTML/JS requis.
====================================================== */

/* Rail — compact, lecture seule, discret */
#generalTabs-nav {
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  border-radius: var(--neu-radius-sm);
  padding: 2px;
  gap: 2px;
}

/* Toutes les étapes — reset Bootstrap + style discret */
#generalTabs-nav .nav-link {
  pointer-events: none;
  cursor: default;
  background: transparent;
  border: 0;
  border-radius: calc(var(--neu-radius-sm) - 1px);
  margin-bottom: 0;
  padding: 0.28rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
}

/* Supprime l'underline ::after hérité des nav-tabs généraux */
#generalTabs-nav .nav-link::after {
  display: none !important;
}

/* Numéro d'étape — petit badge circulaire */
#generalTabs-nav .nav-link .numberTab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
}

/* Étapes passées (disabled visible) — muted avec légère teinte accent */
#generalTabs-nav .nav-link.disabled {
  opacity: 1; /* override Bootstrap 0.5 */
  color: color-mix(in oklab, var(--accent) 55%, var(--text-muted));
}
#generalTabs-nav .nav-link.disabled .numberTab {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: color-mix(in oklab, var(--accent) 75%, var(--text-muted));
}

/* Étape active — teinté accent, pas rempli (indicateur passif) */
#generalTabs-nav .nav-link.active {
  background: color-mix(in oklab, var(--accent) 13%, transparent);
  color: var(--accent);
  font-weight: 600;
  box-shadow: none;
}
#generalTabs-nav .nav-link.active .numberTab {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent);
}

/* Light : step actif — fond plus opaque pour contraste sur fond clair */
html[data-theme="light"] #generalTabs-nav .nav-link.active {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
}
html[data-theme="light"] #generalTabs-nav .nav-link.active .numberTab {
  background: color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Bouton de progression ("Suite") — pas de retour à la ligne */
.tools-section .btn-outline-success.btn-compact {
  white-space: nowrap;
  font-size: calc(var(--card-fs, 1rem) * 0.88);
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

/* Petites résolutions / colonnes étroites : le label ne doit plus toucher les bords
   du bouton — on réduit la taille de police plutôt que le padding pour garder
   la marge intérieure visible. Plage étendue à 767.98px car la colonne passe en
   col-sm-3 (25% de largeur) dès 576px, ce qui la rend plus étroite qu'en xs. */
@media (max-width: 767.98px) {
  .tools-section .btn-outline-success.btn-compact {
    font-size: calc(var(--card-fs, 1rem) * 0.74);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Sous-texte sous le bouton "Suite" grisé : la raison du grisage reste
   toujours visible (un tooltip au survol serait invisible au tactile).
   Élément .gate-hint créé/mis à jour par modules/btnGate.js ; placé sous le
   bouton, en fin de colonne — son apparition ne décale aucun contrôle. */
.tools-section .gate-hint {
  margin: 0.4rem 0 0;
  font-size: calc(var(--card-fs, 1rem) * 0.72);
  line-height: 1.3;
  color: var(--text-muted);
  text-align: center;
}

/* Mobile : font-size réduite pour que les labels courts tiennent sans déborder */
@media (max-width: 575.98px) {
  #generalTabs-nav .nav-link {
    font-size: 0.68rem;
    padding: 0.22rem 0.3rem;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
}

/* Mobile: n'afficher que l'étape courante des onglets généraux (indicateur) */
@media (max-width: 575.98px) {
  #generalTabs-nav .nav-item {
    display: none;
    flex: 1 1 100%;
    max-width: 100%;
  }
  #generalTabs-nav .nav-item.is-current-step {
    display: flex;
  }
  #generalTabs-nav .nav-link {
    pointer-events: none;
    cursor: default;
  }

  /* Empêche la phrase de déborder vers le HAUT dans la zone des onglets généraux.
     Sur mobile, .tools-section prend ~591px sur 676px disponibles, laissant seulement
     53px pour .text-section. La phrase fait 77px → débordement de 11px vers le haut.
     Fix : aligner en flex-start + min-height suffisant + autoriser tools-section à rétrécir. */
  #tabs-1 .text-section {
    min-height: 90px;
  }
  #tabs-1 .tools-section {
    flex-shrink: 1;
  }
  #tabs-1 .text-section .qv.rc {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* À mobile, les col-sm-3/col-sm-6 s'empilent verticalement (chacun 100% largeur).
     La contrainte h-100 héritée du dvh-100 parent compresse les panneaux internes,
     causant des boutons qui débordent et se chevauchent entre colonnes.
     Fix : libérer la hauteur sur la ligne de grille et les panneaux qv/rc/mh. */
  .tools-section .row.h-100 {
    height: auto !important;
  }
  .tools-section .col-sm-3 > .qv,
  .tools-section .col-sm-6 > .qv {
    height: auto !important;
    flex: 0 0 auto;
  }
  /* Neutralise les règles legacy de base.css @media(max-width:576px) :
     .col-sm-3 { max-height:200px; overflow-y:auto } → coupe les boutons
     .button-group { height:51px } → groupe trop petit pour 3 boutons */
  .tools-section .col-sm-3 {
    max-height: none !important;
    overflow-y: visible !important;
  }
  /* Prevent button-groups from being flex-squashed inside a column panel */
  .tools-section .button-group {
    flex-shrink: 0;
    height: auto !important;
  }
}

@media (max-width: 767.98px) {
  /* Toolbox small screens: stack action buttons vertically without overlap.
     flex-wrap:nowrap !important is critical — a later desktop rule
     (.tools-section .button-group.row) sets flex-wrap:wrap and has the same
     specificity; !important lets the mobile rule win in the cascade. */
  .tools-section .button-group.row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 0.75rem;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  .tools-section .button-group.row > * {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  #verbeDec .col-sm-3 > .qv {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    row-gap: 1rem;
  }
  #verbeDec #allVerb-btn {
    margin-top: 0;
    position: relative;
    z-index: 1;
    grid-row: 2;
  }
}

/* ========== TOOLBOX — apply surfaces so panels stand out from global bg ========== */
.tools-section {
  color: var(--text);
}
.tools-section .tools-section-panel {
  background: transparent;
}

/* Main panel cards inside toolbox (qv/rc/mh) — LIGHT — soft elevation (single source of truth) */
html[data-theme="light"] .tools-section .qv,
html[data-theme="light"] .tools-section .rc,
html[data-theme="light"] .tools-section .mh {
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--border) 18%, transparent);
  border-radius: var(--neu-radius-lg);
  box-shadow:
    0 1px 2px var(--elev-close),
    0 2px 8px var(--elev-ambient);
  overflow: hidden;
  transition:
    transform var(--neu-transition-fast),
    box-shadow var(--neu-transition-fast);
}
html[data-theme="light"] .tools-section .qv:hover,
html[data-theme="light"] .tools-section .rc:hover,
html[data-theme="light"] .tools-section .mh:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px var(--elev-close),
    0 8px 20px var(--elev-ambient);
}
html[data-theme="light"] .tools-section .qv:active,
html[data-theme="light"] .tools-section .rc:active,
html[data-theme="light"] .tools-section .mh:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px var(--elev-close);
}

/* Main panel cards inside toolbox (qv/rc/mh) — DARK — border subtil pour délimiter les panels */
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .qv,
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .rc,
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .mh {
  border: 1px solid color-mix(in oklab, var(--border) 25%, transparent);
  border-radius: var(--neu-radius-lg);
}

/* Sub-areas: titles and lists */
.tools-section .left-title {
  color: var(--text);
  opacity: 0.88;
}
.tools-section .listVerb,
.tools-section .listDetecteurs,
.tools-section .listPrincipal {
  background: transparent;
  border-top: none;
}

/* Neutralise the Bootstrap row gutter so the button pair fills the full available width.
   The Bootstrap .row with g-3 adds ~10px padding on the row itself + 8px padding on each col,
   eating ~35px out of the available space. We replace this with a plain gap. */
.tools-section .button-group {
  /* Reset Bootstrap row gutter — !important nécessaire : Bootstrap .row>.* et .g-3
     ont leurs propres règles qui survivent à --bs-gutter-x: 0 dans certains contextes */
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Use CSS gap for spacing instead */
  gap: 0.5rem;
  width: 100%;
}
.tools-section .button-group > .col,
.tools-section .button-group > :not(.btn) {
  /* Force suppression du col-padding Bootstrap quel que soit le contexte.
     :not(.btn) évite d'écraser le padding des boutons enfants directs. */
  padding: 0 !important;
  flex: 1 1 0;
  min-width: 0;
}
/* Les boutons directs dans un .button-group héritent du flex sans perdre leur padding */
.tools-section .button-group > .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ========== TOOLBOX — full-height columns with filled panels ========== */
/* Ensure the row actually stretches its children */
.tools-section .tab-pane .row.h-100 {
  align-items: stretch;
}

/* Make the three main columns behave as flex containers so their child panels can grow */
.tools-section .col-sm-3,
.tools-section .col-sm-6 {
  display: flex;
  min-width: 0;
  /* Ancrer le contenu en haut — override Bootstrap align-items-center/justify-content-center
     qui créent un grand espace vide en haut sur grands écrans (centrage vertical dans col h-100) */
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Left: selected verbs panel should fill the entire column */
.tools-section #verbSection {
  display: flex;
  min-width: 0;
}
.tools-section #verbSection > .qv {
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
  /* Force le contenu au haut du panneau — sans ça, le titre et la liste
     peuvent se répartir sur toute la hauteur (espace vide entre eux). */
  justify-content: flex-start;
  align-content: flex-start;
}
/* Le titre et la liste ne doivent pas grandir pour remplir la hauteur */
.tools-section #verbSection .left-title {
  flex: 0 0 auto;
  margin-bottom: 0.25rem; /* réduit le margin-bottom générique de 0.5rem */
}
.tools-section #verbSection .listVerb {
  flex: 0 0 auto;
  margin-top: 0; /* annule le 0.6rem de la règle adjacent-sibling */
}

/* Center: instruction/call-to-action panel fills the middle column */
.tools-section .col-sm-6 > .qv {
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
}

/* Right: button stack column keeps its panel full height */
.tools-section .col-sm-3 > .qv {
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
}

/* Apply the token-based surface styling directly on these full-height panels (LIGHT only) */
html[data-theme="light"] .tools-section #verbSection > .qv,
html[data-theme="light"] .tools-section #detectSection > .qv,
html[data-theme="light"] .tools-section .col-sm-6 > .qv,
html[data-theme="light"] .tools-section .col-sm-3 > .qv {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 18%, transparent);
  border-radius: 0.75rem;
  box-shadow:
    0 1px 2px var(--elev-close),
    0 2px 8px var(--elev-ambient);
}

/* Ensure inner cards can shrink/grow within flex columns */
.tools-section .qv {
  min-width: 0;
}

/* When detect section is visible, also enforce full height */
.tools-section #detectSection {
  display: flex;
}

/* ===== HOTFIX: override dist rule that forces height:auto in tab panes ===== */
.tools-section .tab-content > .tab-pane {
  display: flex;
}
.tools-section .tab-content > .tab-pane .dvh-100,
.tools-section .tab-content > .tab-pane .h-100:not(.row) {
  height: 100%; /* override app.purged.css */
  min-height: 100%; /* ensure stretch */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ========== TOOLBOX — modern depth & embedding (mobile-like, token-based) ========== */
/* Overall rhythm inside the toolbox */
.tools-section {
  --ts-gap: clamp(10px, 1.4vw, 14px);
  /* Typographie — échelle interne cohérente */
  --ts-fs-sm: 0.8rem; /* onglets, éléments compacts modérés */
  --ts-fs-xs: 0.85rem; /* boutons compacts, texte panel */
  --ts-fs-badge: 0.8em; /* badges (em = relatif au parent) */
  --ts-fs-icon: 1.05em; /* icônes dans boutons */
}
.tools-section .row {
  row-gap: var(--ts-gap);
}

/* (Light panels moved to single block above — see "Main panel cards inside toolbox") */
/* Kill neumorphic ::before/::after overlays in light theme */
html[data-theme="light"] .tools-section .qv::before,
html[data-theme="light"] .tools-section .rc::before,
html[data-theme="light"] .tools-section .mh::before {
  background: none;
  box-shadow: none;
}
html[data-theme="light"] .tools-section .qv::after,
html[data-theme="light"] .tools-section .rc::after,
html[data-theme="light"] .tools-section .mh::after {
  content: none;
}

/* Embedded header label inside panels (left-title) — Apple section label */
.tools-section .left-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0;
  margin-bottom: 0.45rem;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 22%, transparent);
  box-shadow: none;
  /* Apple-style section label: small-caps, muted, tracking */
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.tools-section .left-title .bi {
  opacity: 0.6;
  font-size: 1em;
}

/* Lists inside panels: subtle track for selection areas */
.tools-section .listVerb,
.tools-section .listDetecteurs,
.tools-section .listPrincipal {
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 20%, transparent);
  border-radius: var(--neu-radius-sm);
  padding: 0.5rem 0.6rem;
  min-height: 2.5rem;
  box-shadow: none;
  /* Focus keyboard : indique qu'un élément de la liste a le focus */
  transition: box-shadow var(--neu-transition-fast);
}
.tools-section .listVerb:focus-within,
.tools-section .listDetecteurs:focus-within,
.tools-section .listPrincipal:focus-within {
  box-shadow: 0 0 0 0.18rem var(--focus-ring);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border) 60%);
}

.tools-section .listDetecteurs {
  margin: 0;
  padding-left: 0.6rem;
  list-style: none;
}

.tools-section .listPrincipal {
  margin: 0;
  padding-left: 0.6rem;
  list-style: none;
}

.tools-section .listDetecteurs li {
  display: flex;
  align-items: center;
  margin: 0.4rem 0 0 0;
  padding: 0.5rem;
  font-size: calc(var(--card-fs, 1rem) * 0.88);
  line-height: 1.25;
  border-radius: var(--neu-radius-sm);
  list-style: none;
  background-color: color-mix(in oklab, var(--surface-2) 56%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tools-section .listPrincipal li {
  list-style: none;
}

.tools-section .listDetecteurs li:first-child {
  margin-top: 0;
}

.tools-section .listDetecteurs li span {
  font-size: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide empty list items (no ghost bar when nothing selected) */
.tools-section .listGauche li:empty,
.tools-section .listDetecteurs li:empty,
.tools-section .listPrincipal li:empty {
  display: none;
}

/* Trash icons in selection lists — red + spacing from text */
.tools-section .eraseVerbLeftList,
.tools-section .eraseDetecteurLeftList,
.tools-section .eraseComplLeftList {
  color: var(--danger);
  margin-right: 0.5rem;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--neu-transition-fast);
}
.tools-section .eraseVerbLeftList:hover,
.tools-section .eraseDetecteurLeftList:hover,
.tools-section .eraseComplLeftList:hover {
  opacity: 1;
}

/* CTA area (center column) — highlight action button container subtly */
.tools-section .btn-select {
  border-radius: var(--neu-radius-md);
  transition:
    transform var(--neu-transition-fast),
    box-shadow var(--neu-transition-default),
    background-color var(--neu-transition-default);
}

.tools-section .btn-select:active:not(:disabled) {
  transform: scale(0.95);
}

/* Question validation buttons (Oui/Non, etc.) displayed side-by-side in a flex row.
   base.css sets @media(max-width:992px) .btn { width:100% } which forces each button
   to fill the container — two 100%-wide buttons side by side cause severe overflow.
   Fix: restore auto sizing + equal flex share so both fit in the available width. */
.boutonQuestionSujet > .btn,
.boutonQuestionPronCompl > .btn,
.boutonQuestionSupCompl > .btn,
.boutonQuestionCompl > .btn,
.boutonQuestionDepCompl > .btn,
#complementBoxValidation .contentCenter .d-flex > .btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
  }
  70% {
    box-shadow: 0 0 0 12px color-mix(in oklab, var(--accent) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.tools-section .d-flex.justify-content-center {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Right column button stack — isolate groups with translucent backdrop */
.tools-section .button-group.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.tools-section .button-group {
  margin-bottom: 0.25rem;
}
.tools-section .button-group .btn {
  flex: 1 1 auto;
}

/* Panel inner padding for breathing room */
.tools-section .qv,
.tools-section .rc,
.tools-section .mh {
  padding: 0.9rem;
}
@media (min-width: 768px) {
  .tools-section .qv,
  .tools-section .rc,
  .tools-section .mh {
    padding: 1rem 1.1rem;
  }
}

/* Tab strip separation from panels */
.tools-section .tools-section-panel {
  margin-top: 0;
}

/* ========== TOOLBOX — dashboard-inspired polish (cards, tabs, actions) ========== */

/* 1) Tab underline with gentle glow (dashboard feel) */

/* 2) Panel cadence: tighten vertical spacing between stacked elements */
.tools-section
  .qv
  > :where(.alert, .left-title, .button-group, .d-flex, ul, p)
  + :where(.alert, .left-title, .button-group, .d-flex, ul, p) {
  margin-top: 0.6rem;
}

/* 3) Right column: make the button stack feel like a floating card */
.tools-section .button-group {
  padding: 0.6rem;
}

/* 4) Alert card inside center panel — fond plat cohérent dark & light */
.tools-section .qv .alert {
  border: none;
  border-radius: var(--neu-radius-sm);
  /* Fond plat : léger tint de surface — identique dark et light */
  background-image: none;
  background-color: color-mix(
    in oklab,
    var(--warning-bg, var(--surface-2)) 60%,
    transparent
  );
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, var(--border) 35%, transparent);
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-wrap: anywhere;
  /* responsive text sizing aligned with card scale */
  font-size: calc(var(--card-fs, 1rem) * 0.98);
  line-height: 1.5;
}
/* Toolbox: avoid Bootstrap's extra right padding for .alert-dismissible
   which shrinks text line-length when no close button is present */
.tools-section .alert-dismissible {
  padding-right: 1rem;
}
.tools-section .qv .alert .bi {
  opacity: 0.95;
}
/* scale icon a touch with text within alerts */
.tools-section .qv .alert .bi,
.tools-section .rc .alert .bi,
.tools-section .mh .alert .bi {
  font-size: var(--ts-fs-icon);
}

/* Apply the same responsive sizing to alerts in any toolbox card */
.tools-section .rc .alert,
.tools-section .mh .alert {
  font-size: calc(var(--card-fs, 1rem) * 0.98);
  line-height: 1.5;
}

/* 5) Primary action area: create a subtle footer base for the CTA */
.tools-section .qv .d-flex.justify-content-center {
  background: color-mix(in oklab, var(--surface) 88%, black 12%);
  border-radius: var(--neu-radius-sm);
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, var(--border) 50%, transparent);
  padding: 0.6rem;
}

/* Center test area (suppression/deplacement/pronominalisation/validation/resume) */
/* La colonne centrale (.col-sm-6.central9.rc.qv.mh) doit être flex
   pour que .contentCenter puisse remplir la hauteur avec flex:1 1 auto */
.tools-section
  #complementTestTabsContent
  > .tab-pane
  > .row
  > .col-sm-6.central9 {
  display: flex;
  flex-direction: column;
}
.tools-section #complementTestTabsContent .contentCenter {
  /* Layout container uniquement — le panel .qv parent est la seule surface visible */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.75rem;
  color: var(--text);
}

.tools-section
  #complementTestTabsContent
  .contentCenter
  :is(h5, p, .dialogueSupp, .dialogueDep, .dialoguePron) {
  color: var(--text);
}

/* Left selected-group chip: slightly smaller text */
.tools-section
  #complementTestTabsContent
  .groupeSelectionnePourSupprimer.alert.alert-warning {
  font-size: calc(var(--card-fs, 1rem) * 0.88);
  line-height: 1.35;
}

/* ===================================================================
   Resume UL — liste Supprimable / Déplaçable / Pronominalisable
   Le JS toggle label-default / label-success / label-danger sur les
   spans .supressionLI, .deplacementLI, .pronominalisableLI.
   Bootstrap 5 ne fournit plus ces classes Bootstrap 3 — on les recrée
   ici en tokens design-system.
   =================================================================== */

/* La colonne gauche (col-sm-3 colLeft) est aussi la carte — elle doit clipper
   son contenu pour éviter que "Pronominalisable :" (~130px) + badge (~50px)
   déborde visuellement dans la carte centrale à 768-850px de viewport.
   overflow:clip coupe sans créer de scroll container (contrairement à hidden). */
.tools-section #complementTestTabsContent .col-sm-3.colLeft {
  overflow: clip;
}

/* .colLeft cumule .col-sm-3 (display:flex, cf. règle générique ligne ~555)
   ET .qv (le "panneau") sur le même élément, contrairement aux autres
   colonnes où .qv est un enfant séparé stretché via `.col-sm-3 > .qv`.
   Sans stretch explicite, son unique enfant .boxComplementSelection reste
   en shrink-to-fit (flex-basis auto) au lieu de remplir la largeur du
   panneau — d'où l'alerte et la liste resumeUL trop étroites. */
.tools-section
  #complementTestTabsContent
  .col-sm-3.colLeft
  > .boxComplementSelection {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* Supprime les puces et le retrait par défaut du <ul> */
.tools-section #complementTestTabsContent .resumeUL {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Icône main stray (outside <li>) — masquée : redondante et mal positionnée */
.tools-section #complementTestTabsContent .resumeUL > i {
  display: none;
}

/* Chaque ligne : flex label+colon <-> badge, toujours sur une seule ligne.
   .li-label regroupe le texte et le ":" pour qu'ils ne se séparent pas ;
   min-width:0 + ellipsis l'empêchent de pousser le badge à la ligne. */
.tools-section #complementTestTabsContent .resumeUL li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--neu-radius-sm, 8px);
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  font-size: calc(var(--card-fs, 1rem) * 0.88);
  line-height: 1.3;
}

/* Label + colon : unité indivisible, colon ne flotte plus */
.tools-section #complementTestTabsContent .resumeUL li .li-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Base badge — commun aux trois états */
.tools-section #complementTestTabsContent .label {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: var(--ts-fs-badge);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

/* État neutre : "À voir"/"À tester" — pastille à contour, fond transparent,
   pour se distinguer nettement des états "Oui"/"Non" une fois testés
   plutôt que de ressembler à un champ désactivé. */
.tools-section #complementTestTabsContent .label-default {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  font-weight: 500;
}

/* État OUI — utilise nos tokens thématiques, pas les couleurs BS hardcodées */
.tools-section #complementTestTabsContent .label-success {
  background: color-mix(in oklab, var(--success) 14%, transparent);
  color: color-mix(in oklab, var(--success) 90%, var(--text));
  border: 1px solid color-mix(in oklab, var(--success) 35%, transparent);
}

/* État NON — utilise nos tokens thématiques, pas les couleurs BS hardcodées */
.tools-section #complementTestTabsContent .label-danger {
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  color: color-mix(in oklab, var(--danger) 90%, var(--text));
  border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
}

/* .aide-recap — reprend le widget resumeUL dans la modale d'aide (volet
   Grammaire) pour que l'élève reconnaisse immédiatement le tableau
   récapitulatif de la colonne de gauche de la toolbox. Règles dupliquées
   (et non comma-jointes aux règles .tools-section ci-dessus) pour éviter
   les alertes stylelint no-descending-specificity liées au mélange de
   sélecteurs id+classe et classe simple dans un même bloc. Pas de contexte
   @container colLeft ici, donc pas d'abréviation lbl-abbr ; la ligne active
   (celle du test en cours) est mise en avant comme selBold. */
.aide-recap {
  margin: 0.75rem 0 0.5rem;
}

.aide-recap .resumeUL {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.aide-recap .resumeUL > i {
  display: none;
}

.aide-recap .resumeUL li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--neu-radius-sm, 8px);
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  font-size: calc(var(--card-fs, 1rem) * 0.88);
  line-height: 1.3;
}

.aide-recap .resumeUL li .li-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.aide-recap .label {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: var(--ts-fs-badge);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

.aide-recap .label-default {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  font-weight: 500;
}

.aide-recap .label-success {
  background: color-mix(in oklab, var(--success) 14%, transparent);
  color: color-mix(in oklab, var(--success) 90%, var(--text));
  border: 1px solid color-mix(in oklab, var(--success) 35%, transparent);
}

.aide-recap .label-danger {
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  color: color-mix(in oklab, var(--danger) 90%, var(--text));
  border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
}

.aide-recap .resumeUL li.selBold {
  border: 1px solid var(--accent);
}

.aide-recap .resumeUL li.selBold .li-label {
  font-weight: 700;
  color: var(--text);
}

/* .aide-recap-table — tableau CV/CP transposé : une ligne par test
   (Supprimable/Déplaçable/Pronominalisable), une colonne par conclusion
   (CV/CP), pour que la lecture verticale d'une colonne (ex. Oui/Oui/Non)
   corresponde exactement à l'ordre du résumé de la toolbox. */
.aide-recap-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.35rem;
  margin: 0.75rem 0 0.5rem;
  font-size: calc(var(--card-fs, 1rem) * 0.92);
}
.aide-recap-table th,
.aide-recap-table td {
  padding: 0.35rem 0.6rem;
  text-align: center;
}
.aide-recap-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--ts-fs-xs);
}
.aide-recap-table td:first-child,
.aide-recap-table th:first-child {
  text-align: left;
  color: var(--text);
  font-weight: 500;
}
.aide-recap-table tbody tr {
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
}
.aide-recap-table tbody tr td:first-child {
  border-radius: var(--neu-radius-sm, 8px) 0 0 var(--neu-radius-sm, 8px);
}
.aide-recap-table tbody tr td:last-child {
  border-radius: 0 var(--neu-radius-sm, 8px) var(--neu-radius-sm, 8px) 0;
}

/* .questionSujet — centrage vertical dans le panneau .qv */
#cestqui .col-sm-9 > .qv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#cestqui .qv .questionSujet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* Suppression validation question: align with toolbox typography/layout */
.tools-section #complementTestTabsContent #suppInnerValidation h5 {
  font-size: calc(var(--card-fs, 1rem) * 1.08);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.tools-section
  #complementTestTabsContent
  #suppInnerValidation
  .boutonQuestionSupCompl {
  /* Groupeur de boutons — layout seul, pas de surface supplémentaire */
  background: transparent;
  border: none;
  padding: 0;
  gap: 0.75rem;
  flex-wrap: nowrap; /* Oui/Non toujours côte à côte */
}
.tools-section
  #complementTestTabsContent
  #suppInnerValidation
  .boutonQuestionSupCompl
  .suppTest {
  min-width: 0;
  padding: 0.3rem 0.6rem;
  font-size: var(--ts-fs-xs);
}

.tools-section #complementTestTabsContent #pronInnerValidationQuestion {
  margin-top: 0.45rem;
}
.tools-section #complementTestTabsContent #pronInnerValidationQuestion h5 {
  font-size: calc(var(--card-fs, 1rem) * 1);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.9rem;
}
.tools-section
  #complementTestTabsContent
  #pronInnerValidationQuestion
  .text-center {
  margin-bottom: 0;
  padding: 0.15rem 0.2rem;
}
/* === Inter-card gap pour tous les onglets Suppression / Déplacement /
       Pronominalisation / Validation / Résumé.
   Problème : les colonnes col-sm-3/6 SONT les cartes (rc/qv/mh posés
   directement sur le div.col). Le padding Bootstrap devient du padding
   INTERNE à chaque carte, pas de l'espace ENTRE les cartes.
   Solution : column-gap crée un vrai intervalle entre les flex items
   (les cartes), et on réduit chaque largeur de (2 gaps / 3 cols = 0.5rem)
   pour que le total reste 100 %.
   On annule aussi le margin négatif Bootstrap (-0.5rem) qui était prévu
   pour compenser le padding-gutter des colonnes. */
@media (min-width: 576px) {
  .tools-section #complementTestTabsContent > .tab-pane > .row {
    flex-wrap: nowrap;
    column-gap: 0.75rem;
    margin-left: 0;
    margin-right: 0;
  }
  /* Colonne gauche (col = carte) */
  .tools-section
    #complementTestTabsContent
    > .tab-pane
    > .row
    > .col-sm-3.colLeft {
    flex: 0 0 calc(25% - 0.5rem);
    max-width: calc(25% - 0.5rem);
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  /* Colonne centrale (col = carte) */
  .tools-section
    #complementTestTabsContent
    > .tab-pane
    > .row
    > .col-sm-6.central9 {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  /* Colonne droite (col wrapper, carte en enfant) :
     la carte enfant a déjà son padding interne. */
  .tools-section
    #complementTestTabsContent
    > .tab-pane
    > .row
    > .col-sm-3:not(.colLeft) {
    flex: 0 0 calc(25% - 0.5rem);
    max-width: calc(25% - 0.5rem);
    padding-left: 0;
    padding-right: 0;
  }
}
.tools-section
  #complementTestTabsContent
  #pronInnerValidationQuestion
  .boutonQuestionPronCompl {
  background: color-mix(in oklab, var(--surface-2) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 38%, transparent);
  border-radius: var(--neu-radius-sm);
  padding: 0.45rem;
  gap: 0.55rem;
  flex-wrap: nowrap; /* Oui/Non toujours côte à côte */
}
.tools-section
  #complementTestTabsContent
  #pronInnerValidationQuestion
  .boutonQuestionPronCompl
  .pronTest {
  min-width: 0;
  padding: 0.3rem 0.6rem;
  font-size: var(--ts-fs-xs);
}

/* 5b) Grille de pronoms — compacte et responsive
   Le JS set display:flex inline → on force grid avec !important */
.tools-section #complementTestTabsContent #pronBouton {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}
.tools-section #complementTestTabsContent #pronBouton .pronom-btn {
  padding: 0.25rem 0.4rem;
  font-size: var(--ts-fs-xs);
  line-height: 1.2;
  border-radius: var(--neu-radius-sm);
  white-space: nowrap;
  width: 100%;
}
/* COI (lui, leur, en, y) → teinte warning/jaune */
.tools-section #complementTestTabsContent #pronBouton .pronom-btn.COI {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--on-warning); /* token — lisible sur fond warning dark & light */
}
@media (max-width: 575px) {
  .tools-section #complementTestTabsContent #pronBouton {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 6) Left column — container query pour labels adaptatifs */
.tools-section #complementTestTabsContent .col-sm-3.colLeft {
  container-type: inline-size;
  container-name: colLeft;
}

/* Par défaut : texte complet visible, abrégé masqué */
.tools-section #complementTestTabsContent .resumeUL .lbl-full {
  display: inline;
}
.tools-section #complementTestTabsContent .resumeUL .lbl-abbr {
  display: none;
}

/* Quand la colonne est étroite (≤ 270px) : on bascule sur l'abrégé.
   "Pronominalisable : À voir" ~ 230px — le seuil 270px prévient tout débordement
   et couvre jusqu'à ~1080px de viewport en layout 3 colonnes. */
@container colLeft (max-width: 270px) {
  .resumeUL .lbl-full {
    display: none;
  }
  .resumeUL .lbl-abbr {
    display: inline;
  }
}

.tools-section .left-selection {
  box-shadow: none;
  border-radius: var(--neu-radius-sm);
  padding: 0.5rem 0.6rem;
}

/* 7) Micro contrast — no longer needed (panels use border + soft elevation) */

/* ========== TOOLBOX — Dark container Apple-like ========== */
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section {
  border-radius: var(--neu-radius);
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  box-shadow: var(--elev-2);
}
html[data-theme="light"] .tools-section {
  border-radius: var(--neu-radius);
  background: var(--surface);
  border: none;
  box-shadow:
    0 1px 3px var(--elev-close),
    0 4px 16px var(--elev-ambient);
}

/* ========== TOOLBOX (dark) — clarify inner areas inside cards ========== */
/* Header label inside cards */
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .left-title {
  background: transparent;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  box-shadow: none;
}
html[data-theme="light"] .tools-section .left-title {
  background: transparent;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 20%, transparent);
  box-shadow: none;
}

/* Lists/selection areas */
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .listVerb,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .listDetecteurs,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .listPrincipal {
  background: color-mix(in oklab, var(--surface-2) 30%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 25%, transparent);
  border-radius: var(--neu-radius-sm);
  box-shadow: none;
}
html[data-theme="light"] .tools-section .listVerb,
html[data-theme="light"] .tools-section .listDetecteurs,
html[data-theme="light"] .tools-section .listPrincipal {
  background: color-mix(in oklab, var(--bg) 40%, var(--surface) 60%);
  border: 1px solid color-mix(in oklab, var(--border) 18%, transparent);
  border-radius: var(--neu-radius-sm);
  box-shadow: none;
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .qv
  .alert-instructions,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .rc
  .alert-instructions {
  background: color-mix(in oklab, var(--surface-2) 92%, transparent);
  border: 0;
  border-radius: var(--neu-radius-sm);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--border) 42%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .form-control {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 35%, transparent);
  border-radius: 0.75rem;
  box-shadow: none;
  color: var(--text);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .form-control:focus,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .form-control:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--accent) 20%, transparent);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.form-control, .form-select):disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  border-color: color-mix(
    in oklab,
    var(--border) 15%,
    transparent
  ); /* bordure à peine visible */
  color: color-mix(
    in oklab,
    var(--text) 40%,
    transparent
  ); /* texte très atténué */
}
html[data-theme="light"]
  .tools-section
  :is(.form-control, .form-select):disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  border-color: color-mix(in oklab, var(--border) 20%, transparent);
  color: color-mix(in oklab, var(--text) 45%, transparent);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .form-control.is-invalid {
  border-color: color-mix(in oklab, var(--danger) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger) 25%, transparent);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .form-control.is-valid {
  border-color: color-mix(in oklab, var(--success) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--success) 25%, transparent);
}

html[data-theme="light"] .tools-section .form-control {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  border-radius: 0.75rem;
  color: var(--text);
  box-shadow: none;
}
html[data-theme="light"] .tools-section .form-control:focus,
html[data-theme="light"] .tools-section .form-control:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--accent) 20%, transparent);
}

.tools-section .form-control::placeholder {
  color: color-mix(in oklab, var(--text) 48%, var(--bg) 52%);
  opacity: 0.9;
}

.tools-section input.form-control:-webkit-autofill,
.tools-section textarea.form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 9999px var(--surface) inset;
}
html[data-theme="light"] .tools-section input.form-control:-webkit-autofill,
html[data-theme="light"] .tools-section textarea.form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: inset 0 1px 2px var(--elev-close);
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .form-select {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 35%, transparent);
  border-radius: 0.75rem;
  color: var(--text);
  box-shadow: none;
}
html[data-theme="light"] .tools-section .form-select {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  border-radius: 0.75rem;
  color: var(--text);
  box-shadow: none;
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :where(.form-control, .form-select):focus,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :where(.form-control, .form-select):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--accent) 20%, transparent);
}
html[data-theme="light"]
  .tools-section
  :where(.form-control, .form-select):focus,
html[data-theme="light"]
  .tools-section
  :where(.form-control, .form-select):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--accent) 30%, transparent);
}

/* CTA base area */
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .qv
  .d-flex.justify-content-center {
  background: color-mix(in oklab, var(--surface-2) 88%, transparent);
  border-radius: var(--neu-radius-sm);
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, var(--border) 42%, transparent);
}

/* ========== TOOLBOX — responsive type scaling inside cards ========== */
/* Establish each card as a container so cqw units reflect its width */
.tools-section .qv,
.tools-section .rc,
.tools-section .mh {
  container-type: inline-size;
}

/* Base font-size scales with viewport and container width, with safe caps */
.tools-section .qv,
.tools-section .rc,
.tools-section .mh {
  --card-fs: clamp(0.95rem, 0.7rem + 0.28vw + 0.18cqw, 1.12rem);
  font-size: var(--card-fs);
  line-height: 1.45;
}

/* Slightly larger for embedded headers inside cards */
/* ========== TOOLBOX — button typography alignment ========== */
/* Make buttons center their content precisely and scale with the card */
.tools-section .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: calc(var(--card-fs, 1rem) * 0.98);
  line-height: 1; /* prevent tall line boxes that cause "floating" */
  min-height: 42px;
}
/* Compact variant: slightly tighter without hurting tap targets.
   Applies to ALL .btn-compact in the toolbox (inside or outside .button-group)
   so that all action buttons in a group share the same height.
   white-space:normal allows multi-word labels (e.g. "Retour découpage") to wrap
   in narrow columns without being clipped by overflow:hidden from .btn. */
.tools-section .btn-compact {
  padding: 0.45rem 1.5rem;
  min-height: 44px;
  font-size: calc(var(--card-fs, 1rem) * 0.96);
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  height: auto;
}
/* Icons scale and align with text inside toolbox buttons */
.tools-section .btn .bi {
  font-size: var(--ts-fs-icon);
  line-height: 1;
}

/* === Apple-like buttons — TEST (remplace neumorphique) === */
.tools-section .btn[role] {
  border: 1px solid var(--border);
  border-radius: var(--neu-radius-sm);
  background: var(--surface-2);
  box-shadow: var(--elev-1);
  transition:
    transform var(--neu-transition-fast),
    box-shadow var(--neu-transition-default),
    background-color var(--neu-transition-default),
    border-color var(--neu-transition-default);
}

.tools-section .btn[role]:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--surface-2) 88%, var(--text) 12%);
  border-color: var(--border-strong);
  box-shadow: var(--elev-2);
}

.tools-section .btn[role]:active {
  transform: translateY(0);
  box-shadow: none;
  background: color-mix(in oklab, var(--surface-2) 82%, var(--text) 18%);
}

.tools-section .btn-outline-primary {
  border: 1px solid color-mix(in oklab, var(--accent) 55%, var(--border) 45%);
  border-radius: var(--neu-radius-sm);
  background: transparent;
  color: var(--accent);
  box-shadow: var(--elev-1);
  transition:
    transform var(--neu-transition-fast),
    box-shadow var(--neu-transition-default),
    background-color var(--neu-transition-default),
    border-color var(--neu-transition-default),
    color var(--neu-transition-default);
}

.tools-section .btn-outline-primary:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-color: var(--accent);
  box-shadow: var(--elev-2);
}

.tools-section .btn-outline-primary:active {
  transform: translateY(0);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  box-shadow: none;
}
.tools-section .btn-outline-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tools-section .btn-outline-primary:disabled {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none;
}

html[data-theme="light"] .tools-section .btn-outline-primary {
  background: transparent;
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  box-shadow: none;
}
html[data-theme="light"] .tools-section .btn-outline-primary:hover {
  background: color-mix(in oklab, var(--accent) 8%, var(--surface) 92%);
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
  color: var(--accent);
}
html[data-theme="light"] .tools-section .btn-outline-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.18rem var(--focus-ring); /* token — cohérent avec dark */
}

@media (prefers-contrast: more) {
  .tools-section .form-control::placeholder {
    color: color-mix(in oklab, var(--text) 70%, var(--bg) 30%);
  }
  :is(html:not([data-theme]), html[data-theme="dark"])
    .tools-section
    :where(.form-control, .form-select):focus,
  :is(html:not([data-theme]), html[data-theme="dark"])
    .tools-section
    .btn-outline-primary:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.22rem
      color-mix(in oklab, var(--accent) 30%, transparent);
  }
  html[data-theme="light"]
    .tools-section
    :where(.form-control, .form-select):focus,
  html[data-theme="light"] .tools-section .btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.24rem
      color-mix(in oklab, var(--accent) 40%, transparent);
  }
}

/* ========== TOOLBOX — Card borders aligned with dark neumorphism ========== */
/* Subtle dual-tone inner strokes to outline cards without heavy shadows */
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .qv,
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .rc,
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .mh {
  position: relative;
  border-radius: var(
    --neu-radius-sm
  ); /* slightly smaller than container for inset feel */
}

/* (Light panels: single block at "Main panel cards" above) */

/* Dark theme ::before/::after strokes — kept for dark only */
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .qv::before,
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .rc::before,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .mh::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--border) 58%, transparent),
    inset 0 1px 0 var(--surface-stroke),
    inset 1px 0 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(0, 0, 0, 0.48);
}

:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .qv::after,
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .rc::after,
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .mh::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 1px;
  height: 1px;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.22);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 14px,
    #000 calc(100% - 14px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 14px,
    #000 calc(100% - 14px),
    transparent
  );
  pointer-events: none;
}

/* ========== TOOLBOX — Dark Apple-like premium overrides ========== */
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section {
  --ts-surface: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
  --ts-surface-soft: color-mix(in oklab, var(--surface-2) 76%, var(--bg) 24%);
  --ts-surface-rail: color-mix(
    in oklab,
    var(--surface-creuse) 84%,
    var(--bg) 16%
  );
  --ts-border: color-mix(in oklab, var(--border) 56%, transparent);
  --ts-border-strong: color-mix(in oklab, var(--border) 74%, transparent);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--bg) 74%, var(--surface) 26%);
  box-shadow: var(--shadow-elevated);
}

/* Dark theme — segmented control rail */
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .nav-tabs {
  background: color-mix(
    in oklab,
    var(--surface-creuse, var(--bg)) 60%,
    transparent
  );
  border: 1px solid color-mix(in oklab, var(--border) 35%, transparent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .nav-tabs
  .nav-link:not(.active) {
  color: color-mix(in oklab, var(--text) 52%, var(--bg) 48%);
  box-shadow: none;
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .nav-tabs
  .nav-link:not(.active):hover {
  color: color-mix(in oklab, var(--text) 70%, var(--bg) 30%);
  box-shadow: none;
  background: color-mix(in oklab, var(--surface-2) 28%, transparent);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .nav-tabs
  .nav-link.active {
  background: color-mix(in oklab, var(--surface-2) 56%, transparent);
  border: 0;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.15);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .tab-content {
  border: 0;
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.qv, .rc, .mh) {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--neu-radius-md);
  box-shadow: var(--elev-1); /* consolidé — remplace --ts-shadow-1 */
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.qv, .rc, .mh):hover {
  box-shadow: var(--elev-2); /* consolidé — remplace --ts-shadow-2 */
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.qv, .rc, .mh)::before,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.qv, .rc, .mh)::after {
  content: none;
  box-shadow: none;
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .left-title {
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  box-shadow: none;
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.listVerb, .listDetecteurs, .listPrincipal, .left-selection) {
  background: color-mix(in oklab, var(--surface-2) 28%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 22%, transparent);
  border-radius: var(--neu-radius-sm);
  box-shadow: none;
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.qv, .rc)
  .alert-instructions,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .qv
  .d-flex.justify-content-center {
  background: var(--ts-surface-soft);
  border: 1px solid color-mix(in oklab, var(--border) 46%, transparent);
  box-shadow: none;
}

:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.form-control, .form-select) {
  background: var(--ts-surface-rail);
  border: 1px solid var(--ts-border);
  border-radius: 0.8rem;
  box-shadow: none;
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.form-control, .form-select):focus,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.form-control, .form-select):focus-visible {
  border-color: var(--ts-border-strong);
  box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--accent) 34%, transparent);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  input.form-control:-webkit-autofill,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  textarea.form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px var(--ts-surface-rail) inset !important;
}

/* Dark theme: use toolbox surface tokens for button backgrounds
   (shadows + hover transforms come from the base Apple-like rules above) */
:is(html:not([data-theme]), html[data-theme="dark"]) .tools-section .btn[role] {
  background: var(--ts-surface-soft);
  border: 1px solid var(--ts-border);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .btn-outline-primary {
  color: color-mix(in oklab, var(--accent) 86%, white 14%);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--ts-border) 55%);
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .btn[role]:focus-visible,
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  .btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--accent) 30%, transparent);
}

/* ========== TOOLBOX — Light Apple-like premium overrides ========== */
html[data-theme="light"] .tools-section {
  --tsl-surface: color-mix(in oklab, var(--surface) 94%, var(--bg) 6%);
  --tsl-surface-soft: color-mix(
    in oklab,
    var(--surface-light-2, var(--surface-2)) 88%,
    var(--bg) 12%
  );
  --tsl-surface-rail: color-mix(in oklab, var(--bg) 58%, var(--surface) 42%);
  --tsl-border: color-mix(in oklab, var(--border) 54%, transparent);
  --tsl-border-strong: color-mix(
    in oklab,
    var(--border-strong) 56%,
    var(--border) 44%
  );
  border: 1px solid var(--tsl-border);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--bg) 78%, var(--surface) 22%);
  box-shadow: var(--shadow-elevated);
}

/* Light theme — segmented control rail */
html[data-theme="light"] .tools-section .nav-tabs {
  background: color-mix(in oklab, var(--bg) 70%, var(--border) 30%);
  border: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .tools-section .nav-tabs .nav-link:not(.active) {
  color: color-mix(in oklab, var(--text) 55%, var(--bg) 45%);
  box-shadow: none;
}
html[data-theme="light"] .tools-section .nav-tabs .nav-link:not(.active):hover {
  color: color-mix(in oklab, var(--text) 78%, var(--bg) 22%);
  box-shadow: none;
  background: color-mix(in oklab, var(--surface) 50%, transparent);
}
html[data-theme="light"] .tools-section .nav-tabs .nav-link.active {
  background: var(--surface);
  border: 0;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .tools-section .tab-content {
  border: 0;
}

html[data-theme="light"] .tools-section :is(.qv, .rc, .mh) {
  background: var(--tsl-surface);
  border: 1px solid var(--tsl-border);
  border-radius: var(--neu-radius-md);
  box-shadow: var(--elev-1); /* consolidé — remplace --tsl-shadow-1 */
}
html[data-theme="light"] .tools-section :is(.qv, .rc, .mh):hover {
  box-shadow: var(--elev-2); /* consolidé — remplace --tsl-shadow-2 */
}
html[data-theme="light"] .tools-section :is(.qv, .rc, .mh)::before,
html[data-theme="light"] .tools-section :is(.qv, .rc, .mh)::after {
  content: none;
  box-shadow: none;
}

html[data-theme="light"] .tools-section .left-title {
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 22%, transparent);
  box-shadow: none;
}

html[data-theme="light"]
  .tools-section
  :is(.listVerb, .listDetecteurs, .listPrincipal, .left-selection) {
  background: color-mix(in oklab, var(--bg) 40%, var(--surface) 60%);
  border: 1px solid color-mix(in oklab, var(--border) 18%, transparent);
  border-radius: var(--neu-radius-sm);
  box-shadow: none;
}

html[data-theme="light"] .tools-section :is(.qv, .rc) .alert-instructions,
html[data-theme="light"] .tools-section .qv .d-flex.justify-content-center {
  background: var(--tsl-surface-soft);
  border: 1px solid color-mix(in oklab, var(--border) 32%, transparent);
  box-shadow: none;
}

html[data-theme="light"] .tools-section :is(.form-control, .form-select) {
  background: var(--tsl-surface-rail);
  border: 1px solid color-mix(in oklab, var(--border) 46%, transparent);
  border-radius: 0.8rem;
  box-shadow: none;
}
html[data-theme="light"] .tools-section :is(.form-control, .form-select):focus,
html[data-theme="light"]
  .tools-section
  :is(.form-control, .form-select):focus-visible {
  border-color: var(--tsl-border-strong);
  box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--accent) 26%, transparent);
}
html[data-theme="light"] .tools-section input.form-control:-webkit-autofill,
html[data-theme="light"] .tools-section textarea.form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px var(--tsl-surface-rail) inset !important;
}

html[data-theme="light"] .tools-section .btn[role],
html[data-theme="light"] .tools-section .btn-outline-primary {
  background: var(--tsl-surface-soft);
  border: 1px solid color-mix(in oklab, var(--border) 42%, transparent);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 6px 14px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .tools-section .btn-outline-primary {
  color: color-mix(in oklab, var(--accent) 82%, black 18%);
}
html[data-theme="light"] .tools-section .btn[role]:hover,
html[data-theme="light"] .tools-section .btn-outline-primary:hover {
  background: color-mix(in oklab, var(--surface-2) 64%, var(--accent) 36%);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border) 60%);
  box-shadow: var(--elev-2); /* token — symétrique avec dark */
}
html[data-theme="light"] .tools-section .btn[role]:active,
html[data-theme="light"] .tools-section .btn-outline-primary:active {
  transform: translateY(1px);
  box-shadow: var(--elev-1); /* token — symétrique avec dark */
}
html[data-theme="light"] .tools-section .btn[role]:focus-visible,
html[data-theme="light"] .tools-section .btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.18rem var(--focus-ring); /* token — cohérent avec dark */
}

/* ========== TOOLBOX — aplat "grouped inset" (une seule élévation) ========== */
/* Modèle iOS/macOS : le panneau d'étape (.tools-section) porte seul l'ombre
   (--shadow-elevated, décliné light/dark dans app.css). Les cartes internes
   sont des surfaces plates : fond légèrement différencié + bordure hairline,
   jamais d'ombre propre ni de lift au survol — trois niveaux d'ombres
   imbriquées créaient du bruit sans hiérarchie. */
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.qv, .rc, .mh),
:is(html:not([data-theme]), html[data-theme="dark"])
  .tools-section
  :is(.qv, .rc, .mh):hover {
  box-shadow: none;
}

html[data-theme="light"] .tools-section :is(.qv, .rc, .mh),
html[data-theme="light"] .tools-section :is(.qv, .rc, .mh):hover,
html[data-theme="light"] .tools-section :is(.qv, .rc, .mh):active {
  transform: none;
  box-shadow: none;
}

/* ========== TOOLBOX — état vide des listes/champs de gauche ==========
   Les listes gardent toujours un premier <li> vide (rempli à la première
   coupe) : l'état vide est donc « un seul enfant li vide » ou une liste sans
   enfant. Le texte vient de data-empty-hint posé sur l'élément (index.html).
   Même règle pour le <p> "Vous avez sélectionné :" (vide tant qu'aucun
   groupe complément n'est sélectionné). */
.tools-section ul[data-empty-hint]:empty::before,
.tools-section ul[data-empty-hint]:has(> li:only-child:empty)::before,
.tools-section p[data-empty-hint]:empty::before {
  content: attr(data-empty-hint);
  display: block;
  padding: 0.35rem 0.15rem;
  color: var(--text-muted);
  font-size: calc(var(--card-fs, 1rem) * 0.78);
  font-style: italic;
  line-height: 1.35;
}

/* p[data-empty-hint] est aussi .alert.alert-warning : app.css lui donne déjà
   un ::before absolu (barre d'accent 4px, cf. .alert::before) sur le même
   pseudo-élément. Notre ::before gagne sur `content` (spécificité plus
   forte) mais hérite silencieusement de `position/width/background` de
   cette barre — le texte du hint se retrouvait donc écrasé dans une bande
   de 4px. On neutralise explicitement la géométrie de la barre ici. */
.tools-section p[data-empty-hint].alert:empty::before {
  position: static;
  width: auto;
  background: none;
  border-radius: 0;
}

/* ===== corpus-code-view: assets/css/_corpus-code-view.css ===== */
/* ============================================================
   CORPUS CODE VIEW — composant #corpusCodeView (bloc Apple-like)
   Extrait de app.css — voir build-css-bundle.mjs
============================================================ */

/* ===========================
   CorpusCodeView Apple-like
   =========================== */
#corpusCodeView {
  --ccv-surface: color-mix(in oklab, var(--surface) 94%, var(--bg) 6%);
  --ccv-border: color-mix(in oklab, var(--border) 64%, transparent);
  --ccv-input-bg: color-mix(in oklab, var(--surface-2) 84%, transparent);
}

:is(html:not([data-theme]), html[data-theme="dark"]) #corpusCodeView {
  --ccv-surface: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
  --ccv-border: color-mix(in oklab, var(--border) 42%, transparent);
  --ccv-input-bg: color-mix(in oklab, var(--surface-2) 65%, var(--bg) 35%);
}

#corpusCodeView .corpus-code-card {
  background: var(--ccv-surface);
  border: 1px solid var(--ccv-border);
  box-shadow: var(--elev-1);
}

#corpusCodeView .corpus-code-shell:hover .corpus-code-card,
#corpusCodeView .corpus-code-card:focus-within {
  transform: none;
  box-shadow: var(--elev-2);
}

#corpusCodeView .form-control-lg {
  background: var(--ccv-input-bg);
  border: 1px solid var(--ccv-border);
  box-shadow: none;
}

#corpusCodeView .form-control-lg:focus,
#corpusCodeView .form-control-lg:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 36%, var(--ccv-border) 64%);
  box-shadow: 0 0 0 0.16rem
    color-mix(in oklab, var(--focus-ring) 82%, transparent);
}

#corpusCodeView .corpus-code-back {
  background: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
  border: 1px solid var(--ccv-border);
  box-shadow: none;
  color: color-mix(in oklab, var(--text) 92%, transparent);
}

#corpusCodeView .corpus-code-back:hover,
#corpusCodeView .corpus-code-back:focus-visible,
#corpusCodeView .corpus-code-back:active {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--ccv-border) 60%);
  background: color-mix(in oklab, var(--surface) 82%, var(--accent) 18%);
}

#corpusCodeView .corpus-code-back:hover,
#corpusCodeView .corpus-code-back:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

#corpusCodeView .corpus-code-back:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (max-width: 576px) {
  #corpusCodeView .corpus-code-back:hover,
  #corpusCodeView .corpus-code-back:focus-visible {
    transform: translateY(-1px);
  }

  #corpusCodeView .corpus-code-back:active {
    transform: translateY(0);
  }
}

:is(html:not([data-theme]), html[data-theme="dark"]) #corpusCodeView h2 {
  color: var(--bs-light);
}

/* ===== cestqui: assets/css/_cestqui.css ===== */
/* ============================================================
   CESTQUI + DROP ZONE — composant .cest-qui-container, #cestqui, .droppable-item
   Extrait de app.css — voir build-css-bundle.mjs
============================================================ */

/* ===========================
   Tokens locaux
   =========================== */
:root {
  /* Couleur dorée spécifique aux verbes secondaires / accents pédagogiques.
     Utilise --warning (hsl 38 90% 52%) comme base amber/or. */
  --cestqui-gold: var(--warning);
}

/* ===========================
   Phrases Table
   =========================== */
#phrasesCompletes {
  --pt-surface: color-mix(in oklab, var(--surface) 94%, var(--bg) 6%);
  --pt-surface-soft: color-mix(in oklab, var(--surface-2) 82%, transparent);
  --pt-border: color-mix(in oklab, var(--border) 64%, transparent);
}

:is(html:not([data-theme]), html[data-theme="dark"]) #phrasesCompletes {
  --pt-surface: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%);
  --pt-surface-soft: color-mix(in oklab, var(--surface-2) 70%, black 30%);
  --pt-border: color-mix(in oklab, var(--border) 52%, transparent);
}

#phrasesCompletes > .tableBox {
  /* Override [data-view] > :not(.tools-section) { flex: 1 1 auto } */
  --tb-radius: clamp(16px, 2.8vw, 24px);
  flex: 0 0 auto;
  width: min(100%, 1280px);
  max-width: calc(100vw - clamp(1.5rem, 4vw, 4rem));
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--tb-radius);
  box-shadow: var(--elev-1);
  isolation: isolate;
}

#phrasesCompletes .table-resume {
  background: transparent;
  font-size: 1.08rem;
  /* clip-path : seule technique qui clippe vraiment les backgrounds de tableau
     y compris position:sticky — overflow:hidden/clip ne fonctionne pas sur les tables */
  clip-path: inset(0 round calc(var(--tb-radius) - 1px));
}

#phrasesCompletes .table-responsive {
  background: var(--pt-surface-soft);
  border-bottom: 1px solid var(--pt-border);
  /* Arrondit les coins inférieurs internes : clippe la jonction table/footer */
  clip-path: inset(
    0 0 0 0 round 0 0 calc(var(--tb-radius) - 4px) calc(var(--tb-radius) - 4px)
  );
}

#phrasesCompletes .table {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

/* Header: label-style typography */
#phrasesCompletes .table thead th {
  background: color-mix(in oklab, var(--pt-surface) 92%, var(--accent) 8%);
  border-bottom: 1px solid var(--pt-border);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 1rem 1.1rem;
  white-space: nowrap;
}

/* Coins header — fonctionne grâce à border-collapse:separate */
#phrasesCompletes .table thead th:first-child {
  border-top-left-radius: calc(var(--tb-radius) - 1px);
}
#phrasesCompletes .table thead th:last-child {
  border-top-right-radius: calc(var(--tb-radius) - 1px);
}

/* Cells */
#phrasesCompletes .table td {
  padding: 0.85rem 1.1rem;
  border-color: color-mix(in oklab, var(--pt-border) 60%, transparent);
  vertical-align: middle;
}

/* Number column: muted row label */
#phrasesCompletes .table td:first-child {
  width: 3rem;
  min-width: 3rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Completed row: accent number */
#phrasesCompletes
  .table
  tbody
  tr:has(td[class*="tablePhrase"]:not(:empty))
  td:first-child {
  color: var(--accent);
  font-weight: 600;
}

/* Cellule d'analyse — line-height agrandi pour absorber les labels dans l'interligne */
#phrasesCompletes .table tbody td[class*="tablePhrase"] {
  vertical-align: top;
  padding-bottom: 0.75rem;
  font-size: 1.18rem;
  line-height: 2.4;
}

/* Empty analysis cell placeholder */
#phrasesCompletes .table tbody td[class*="tablePhrase"]:empty::before {
  content: "—";
  color: var(--text-muted);
  opacity: 0.4;
}

/* Row hover */
#phrasesCompletes .table tbody tr:hover td {
  background: color-mix(in oklab, var(--accent) 7%, transparent);
}

/* ---- Couleurs grammaticales dans le tableau récapitulatif ---- */

/* Crochets rouges du sujet */
#phrasesCompletes .sujetCrochet {
  color: var(--danger);
  font-weight: 600;
}

/* Pronom sujet inséré */
#phrasesCompletes .pronomSujetInsere {
  color: var(--danger);
  font-weight: 700;
}

/* .box du JS — empile l'élément grammatical et son libellé centré.
   Exclut .resumeBox : ce dernier doit rester inline/baseline pour s'aligner
   avec le texte brut environnant (voir règle .resumeBox plus bas). */
#phrasesCompletes .box:not(.resumeBox),
#phrasesCompletes .table tbody td[class*="tablePhrase"] .box:not(.resumeBox) {
  display: inline-block;
  position: relative;
  /* Reset du line-height hérité : la boîte ne mesure que le texte (pas 2.4em) */
  line-height: 1.3;
  vertical-align: baseline;
  padding: 0 0.1em;
  margin: 0;
}
#phraseCompl > .box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.5em;
  vertical-align: top;
}

/* Éléments grammaticaux — inline-block + position relative pour ::after */
#phrasesCompletes .verbePrincipal,
#phrasesCompletes .sujetVerbePrincipal,
#phrasesCompletes .verbeSecondaire,
#phrasesCompletes .groupeVerbal,
#phrasesCompletes .groupePhrase {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  line-height: 1.15;
}

/* Hauteur normalisée : border + padding identiques sur tous les éléments
   pour que tous les ::after tombent à la même ordonnée */
#phrasesCompletes .sujetVerbePrincipal {
  padding: 0.1em 0;
  border: 1px solid transparent;
  border-radius: 0.3em;
  color: var(
    --text
  ); /* adaptatif : clair en thème sombre, sombre en thème clair */
}

/* Verbe principal — encadré rouge */
#phrasesCompletes .verbePrincipal {
  color: var(--text);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--danger) 22%, var(--surface-2) 78%) 0%,
    color-mix(in oklab, var(--danger) 30%, var(--surface-2) 70%) 100%
  );
  border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--border) 60%);
  border-radius: 0.3em;
  padding: 0.1em 0.4em;
  box-shadow: 0 2px 6px color-mix(in oklab, var(--danger) 15%, transparent);
}

/* Complément de verbe — bleu */
#phrasesCompletes .groupeVerbal,
#phraseCompl > .box > .groupeVerbal {
  color: color-mix(in oklab, var(--info) 90%, var(--text) 10%);
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* Pendant la validation (avant wrapping) — CV en bleu */
#phraseCompl .complSelectionne.valDone.groupeVerbal {
  color: color-mix(in oklab, var(--info) 90%, var(--text) 10%);
}

/* Une fois wrappé dans .box (résumé) → masquer le ::after CV/CP */
#phraseCompl .box .complSelectionne.valDone.groupeVerbal::after,
#phraseCompl .box .complSelectionne.valDone.groupePhrase::after {
  display: none;
}

/* Complément de phrase — vert */
#phrasesCompletes .groupePhrase,
#phraseCompl > .box > .groupePhrase {
  color: color-mix(in oklab, var(--success) 90%, var(--text) 10%);
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* Pendant la validation (avant wrapping) — CP en vert */
#phraseCompl .complSelectionne.valDone.groupePhrase {
  color: color-mix(in oklab, var(--success) 90%, var(--text) 10%);
}

/* Verbe secondaire — orange, même hauteur que verbePrincipal */
#phrasesCompletes .verbeSecondaire {
  background: color-mix(in oklab, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--warning) 45%, var(--border) 55%);
  border-radius: 0.3em;
  padding: 0.1em 0.4em;
  color: color-mix(in oklab, var(--warning) 85%, var(--text) 15%);
}

/* Détecteur de verbe secondaire — souligné en pointillés */
#phrasesCompletes .detecteurSelectionne {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
  color: color-mix(in oklab, var(--cestqui-gold) 88%, var(--text) 12%);
}

/* Les libellés sont rendus par les .subBox du JS dans la vue finale */
#phrasesCompletes
  :is(
    .verbePrincipal,
    .sujetVerbePrincipal,
    .groupeVerbal,
    .groupePhrase
  )::after {
  content: none;
}

/* Label sous la boîte (verbePrincipal isolé ou groupe resumeBox) — source
   unique de positionnement/typo pour tous les .subBox de la vue récap */
#phrasesCompletes .subBox {
  position: absolute;
  top: calc(100% + 0.9em);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: max-content;
  margin: 0;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.88;
  pointer-events: none;
}

#phraseCompl > .box > .subBox {
  display: block;
  width: max-content;
  margin-top: 0.72em;
  margin-inline: auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.88;
}

#phrasesCompletes .subBox-danger,
#phraseCompl > .box > .subBox-danger {
  color: var(--danger);
}

#phrasesCompletes .subBox-info,
#phraseCompl > .box > .subBox-info {
  color: color-mix(in oklab, var(--info) 90%, var(--text) 10%);
}

#phrasesCompletes .subBox-success,
#phraseCompl > .box > .subBox-success {
  color: color-mix(in oklab, var(--success) 90%, var(--text) 10%);
}

#phrasesCompletes .box:has(.verbePrincipal) > .subBox,
#phrasesCompletes .box:has(.sujetVerbePrincipal) > .subBox,
#phraseCompl > .box:has(.verbePrincipal) > .subBox,
#phraseCompl > .box:has(.sujetVerbePrincipal) > .subBox {
  color: var(--danger);
}

#phrasesCompletes .box:has(.groupeVerbal) > .subBox,
#phraseCompl > .box:has(.groupeVerbal) > .subBox {
  color: color-mix(in oklab, var(--info) 90%, var(--text) 10%);
}

#phrasesCompletes .box:has(.groupePhrase) > .subBox,
#phraseCompl > .box:has(.groupePhrase) > .subBox {
  color: color-mix(in oklab, var(--success) 90%, var(--text) 10%);
}

/* Boîtes Sujet / Compléments dans #phraseCompl (validation finale) — variante
   adaptative : reste en flux inline (pas de inline-flex column) pour laisser
   le groupe interne wrapper normalement si trop long. Label "centré dessous"
   par défaut (voir validation.js, adjustAdaptiveComplementLabels) ou "en
   flux après le groupe" si celui-ci a cassé sur plusieurs lignes (classe
   box-wrapped). Le verbe principal garde l'ancien comportement (atomique). */
#phraseCompl > .box.box-adaptive {
  display: inline;
  position: relative;
  vertical-align: baseline;
  margin-bottom: 0;
}

#phraseCompl > .box.box-adaptive > .subBox {
  position: absolute;
  top: calc(100% + 0.7em);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: max-content;
  margin: 0;
  white-space: nowrap;
}

#phraseCompl > .box.box-adaptive.box-wrapped > .subBox {
  position: relative;
  top: 0.5em;
  left: auto;
  transform: none;
  display: inline;
  margin-left: 0.4em;
  vertical-align: baseline;
}

#phrasesCompletes .resumeBox {
  display: inline;
  /* relative : nécessaire comme contexte de positionnement pour son .subBox
     (top: 100%, voir règle .subBox) — static casserait l'ancrage du label */
  position: relative;
  padding-bottom: 0;
  margin-bottom: 0;
  vertical-align: baseline;
}

#phrasesCompletes .resumeBox > .verbePrincipal,
#phrasesCompletes .resumeBox > .sujetVerbePrincipal {
  display: inline;
}

#phrasesCompletes .resumeBox.resumeBox-danger > .subBox {
  color: var(--danger);
}

/* Groupe sujet trop long pour rester sur une ligne (voir openGrammaire.js,
   adjustAdaptiveLabels) : le label sort du positionnement absolu et reprend
   le flux normal du texte, juste après le crochet fermant ']' — il atterrit
   ainsi sur la ligne où le groupe se termine, jamais dupliqué. */
#phrasesCompletes .resumeBox-adaptive.resumeBox-wrapped > .subBox {
  /* relative + top : décale visuellement le label sous la ligne de base du
     texte (sans affecter le flux) — signale que ce n'est pas un mot de la
     phrase mais une annotation d'analyse, comme le label "centré dessous" */
  position: relative;
  top: 0.5em;
  display: inline;
  left: auto;
  transform: none;
  margin-left: 0.4em;
  vertical-align: baseline;
}

/* Crochets neutres des compléments génériques */
#phrasesCompletes .crochets {
  color: var(--text-muted);
}

#phraseCompl .crochets {
  color: color-mix(in oklab, var(--accent) 70%, var(--text) 30%);
  font-weight: 700;
  font-style: italic;
  border: 1px dashed color-mix(in oklab, var(--accent) 50%, var(--border) 50%);
  border-radius: 0.32em;
  padding: 0.03em 0.2em;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

#phraseCompl .pronomComplInsere {
  color: color-mix(in oklab, var(--accent) 78%, white 22%);
  font-weight: 700;
}

#phraseCompl .pronomComplInsere:empty {
  color: inherit;
}

#phraseCompl .sujetVerbePrincipal {
  cursor: not-allowed;
  user-select: none;
  -webkit-user-select: none;
}

#phraseCompl .complSelectionne.suppDone.colorGreen,
#phraseCompl .complSelectionne.depDone.colorGreen {
  color: color-mix(in oklab, var(--success) 90%, var(--text) 10%);
  opacity: 0.72;
}

#phraseCompl .complSelectionne.suppDone.colorRed,
#phraseCompl .complSelectionne.depDone.colorRed {
  color: color-mix(in oklab, var(--danger) 90%, var(--text) 10%);
  opacity: 0.72;
}

/* Thème clair : supprimer l'atténuation d'opacité — lisibilité vidéo-projecteur */
html[data-theme="light"] #phraseCompl .complSelectionne.suppDone.colorGreen,
html[data-theme="light"] #phraseCompl .complSelectionne.depDone.colorGreen {
  color: color-mix(in oklab, var(--success) 100%, black 0%);
  opacity: 1;
}
html[data-theme="light"] #phraseCompl .complSelectionne.suppDone.colorRed,
html[data-theme="light"] #phraseCompl .complSelectionne.depDone.colorRed {
  color: color-mix(in oklab, var(--danger) 100%, black 0%);
  opacity: 1;
}

#phrasesCompletes #footerAnalyse {
  background: var(--pt-surface);
  padding: 1rem 1.25rem;
}

/* Conserve les styles verbes/detecteurs sur phraseBase, phraseSujet, sujetTest et phraseCompl */
/* Sélecteurs explicites (pas de :is() imbriqués) : PurgeCSS perd la règle sinon */
#phraseBase .verbeSelectionne,
#phraseBase .verbeSecondaire,
#phraseBase .verbePrincipal,
#phraseSujet .verbeSelectionne,
#phraseSujet .verbeSecondaire,
#phraseSujet .verbePrincipal,
#sujetTest .verbeSelectionne,
#sujetTest .verbeSecondaire,
#sujetTest .verbePrincipal,
#phraseCompl .verbeSelectionne,
#phraseCompl .verbeSecondaire,
#phraseCompl .verbePrincipal {
  background-color: color-mix(in oklab, var(--info) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--info) 40%, transparent);
  border-radius: 0.42em;
  padding: 0.12em 0.22em;
  transition: background-color var(--neu-transition-fast);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

:is(#phraseBase, #phraseSujet, #sujetTest, #phraseCompl)
  .verbeSelectionne.pointer {
  cursor: pointer;
}
:is(#phraseBase, #phraseSujet, #sujetTest, #phraseCompl)
  .verbeSelectionne.pointer:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 0.2em;
}

:is(#phraseBase, #phraseSujet, #sujetTest, #phraseCompl) .verbePrincipal {
  color: var(--danger);
  font-weight: 700;
  background: color-mix(in oklab, var(--danger) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 10%, transparent),
    0 2px 8px color-mix(in oklab, var(--danger) 20%, transparent);
}

:is(#phraseBase, #phraseSujet, #sujetTest, #phraseCompl) .verbeSecondaire {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: color-mix(in oklab, var(--cestqui-gold) 88%, var(--text) 12%);
  font-weight: 500;
  padding: 0;
}

:is(#phraseSujet, #phraseCompl) .sujetCrochet {
  color: var(--danger);
}

:is(#phraseSujet, #phraseCompl) .pronomSujetInsere {
  color: var(--danger);
  font-weight: 700;
}

#sujetTest .cestIn,
#sujetTest .queIn,
#complTestShow .cestIn,
#complTestShow .queIn {
  color: color-mix(in oklab, var(--warning) 88%, var(--text) 12%);
  font-weight: 700;
}

#complTestShow #selectComplToTry {
  color: inherit;
  font-weight: 700;
}

#complTestShow #sujetCompl {
  color: inherit;
  font-weight: inherit;
}

#complTestShow #verbeCompl {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--danger) 22%, var(--surface-2) 78%) 0%,
    color-mix(in oklab, var(--danger) 30%, var(--surface-2) 70%) 100%
  );
  border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--border) 60%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 20%, transparent),
    0 3px 10px color-mix(in oklab, var(--danger) 18%, transparent);
  border-radius: 0.42em;
  padding: 0.12em 0.22em;
  font-weight: 700;
}

#complTestShow #resteComplCV,
#complTestShow #resteComplCP {
  color: inherit;
}

#complTestShow #resteComplCP .complSelectionne {
  color: inherit;
  font-weight: inherit;
}

/* Curseurs compléments: pointer au survol, grab pendant le drag */
#phraseCompl
  :is(
    .selectionComplProv,
    .complSelectionne,
    .groupeComplProvisoire,
    .draggableComp,
    .complementChoisi
  ) {
  cursor: pointer;
}
#phraseCompl
  :is(
    .selectionComplProv,
    .complSelectionne,
    .groupeComplProvisoire,
    .draggableComp,
    .complementChoisi
  ):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 0.2em;
}

#phraseCompl :is(.draggableComp, .draggableMoveCompl, [draggable="true"]) {
  cursor: grab;
}

#phraseCompl .complSelectionne.selectedCompl {
  background: color-mix(in oklab, var(--accent) 26%, transparent);
  border: 2px solid color-mix(in oklab, var(--accent) 72%, var(--border) 28%);
  border-radius: 0.38em;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent),
    0 4px 14px color-mix(in oklab, var(--accent) 24%, transparent);
  padding: 0.04em 0.18em;
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#phraseCompl .complSelectionne.suppDone[data-supp-label] {
  position: relative;
  /* inline (pas inline-block) : un groupe trop long pour la ligne wrappe
     normalement en place au lieu de sauter tout entier à la ligne suivante
     (voir tests.js, adjustTestLabelWrap, et testLabelWrapped plus bas). */
  display: inline;
}

#phraseCompl .complSelectionne.suppDone[data-supp-label]::after {
  content: attr(data-supp-label);
  position: absolute;
  top: calc(100% + 0.55em);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: normal;
  max-width: 100%;
  text-align: center;
  opacity: 0.9;
  pointer-events: none;
}

/* Groupe ayant cassé sur plusieurs lignes : le label sort de l'absolu et
   reprend le flux juste après le texte, légèrement décalé vers le bas pour
   signaler qu'il s'agit d'une annotation et non d'un mot de la phrase. */
#phraseCompl
  .complSelectionne.suppDone[data-supp-label].testLabelWrapped::after {
  position: relative;
  top: 0.5em;
  left: auto;
  transform: none;
  display: inline;
  white-space: nowrap;
  margin-left: 0.4em;
}

#phraseCompl .complSelectionne.suppDone.suppLabelGreen::after {
  color: color-mix(in oklab, var(--success) 90%, var(--text) 10%);
}

#phraseCompl .complSelectionne.suppDone.suppLabelRed::after {
  color: color-mix(in oklab, var(--danger) 90%, var(--text) 10%);
}

/* Thème clair : label pleine couleur, sans opacity réduite */
html[data-theme="light"]
  #phraseCompl
  .complSelectionne.suppDone.suppLabelGreen::after {
  color: var(--success);
  opacity: 1;
}
html[data-theme="light"]
  #phraseCompl
  .complSelectionne.suppDone.suppLabelRed::after {
  color: var(--danger);
  opacity: 1;
}

#phraseCompl .complSelectionne.depDone[data-dep-label] {
  position: relative;
  display: inline;
}

#phraseCompl .complSelectionne.depDone.depLabelGreen::after {
  content: attr(data-dep-label);
  position: absolute;
  top: calc(100% + 0.35em);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: normal;
  max-width: 100%;
  text-align: center;
  opacity: 0.9;
  pointer-events: none;
  color: color-mix(in oklab, var(--success) 90%, var(--text) 10%);
}

#phraseCompl .complSelectionne.depDone.depLabelRed::after {
  content: attr(data-dep-label);
  position: absolute;
  top: calc(100% + 0.55em);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: normal;
  max-width: 100%;
  text-align: center;
  opacity: 0.9;
  pointer-events: none;
  color: color-mix(in oklab, var(--danger) 90%, var(--text) 10%);
}

#phraseCompl .complSelectionne.depDone.depLabelGreen.testLabelWrapped::after,
#phraseCompl .complSelectionne.depDone.depLabelRed.testLabelWrapped::after {
  position: relative;
  top: 0.5em;
  left: auto;
  transform: none;
  display: inline;
  white-space: nowrap;
  margin-left: 0.4em;
}

#phraseCompl .complSelectionne.pronDone[data-pron-label] {
  position: relative;
  display: inline;
}

#phraseCompl .complSelectionne.pronDone.pronLabelGreen::after {
  content: attr(data-pron-label);
  position: absolute;
  top: calc(100% + 0.35em);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: normal;
  max-width: 100%;
  text-align: center;
  opacity: 0.9;
  pointer-events: none;
  color: color-mix(in oklab, var(--success) 90%, var(--text) 10%);
}

#phraseCompl .complSelectionne.pronDone.pronLabelRed::after {
  content: attr(data-pron-label);
  position: absolute;
  top: calc(100% + 0.55em);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: normal;
  max-width: 100%;
  text-align: center;
  opacity: 0.9;
  pointer-events: none;
  color: color-mix(in oklab, var(--danger) 90%, var(--text) 10%);
}

#phraseCompl .complSelectionne.pronDone.pronLabelGreen.testLabelWrapped::after,
#phraseCompl .complSelectionne.pronDone.pronLabelRed.testLabelWrapped::after {
  position: relative;
  top: 0.5em;
  left: auto;
  transform: none;
  display: inline;
  white-space: nowrap;
  margin-left: 0.4em;
}

/* ---- Sub-labels CV / CP pendant la validation ---- */
#phraseCompl .complSelectionne.valDone {
  position: relative;
  display: inline-block;
}

#phraseCompl .complSelectionne.valDone.groupeVerbal::after {
  content: "CV";
  position: absolute;
  top: calc(100% + 0.35em);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  opacity: 0.9;
  pointer-events: none;
  color: color-mix(in oklab, var(--bs-info) 90%, var(--text) 10%);
}

#phraseCompl .complSelectionne.valDone.groupePhrase::after {
  content: "CP";
  position: absolute;
  top: calc(100% + 0.35em);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  opacity: 0.9;
  pointer-events: none;
  color: color-mix(in oklab, var(--success) 90%, var(--text) 10%);
}

#phraseCompl
  :is(.is-dragging, .complementChoisi:active, .complMoveChoisi:active) {
  cursor: grabbing;
}

html.is-dragging,
body.is-dragging,
body.is-dragging * {
  cursor: grabbing;
}

:is(#phraseBase, #phraseSujet, #sujetTest, #phraseCompl) .detecteurSelectionne {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
  color: color-mix(in oklab, var(--cestqui-gold) 88%, var(--text) 12%);
  cursor: pointer;
}

/* Au survol d'un detecteur, le verbe sélectionné immédiatement après se distingue.
   background à 45% (au lieu de 34%) pour que le teinte or reste lisible face
   au fond sombre, sans écraser la couleur de texte du verbe. */
:is(#phraseBase, #phraseSujet, #phraseCompl)
  .detecteurSelectionne:hover
  + .verbeSelectionne {
  background-color: color-mix(in oklab, var(--cestqui-gold) 45%, transparent);
  border-color: color-mix(in oklab, var(--cestqui-gold) 55%, transparent);
}

/* =====================================================================
   CESTQUI — Zone de construction « C'est [sujet] Qui [verbe] »
   ===================================================================== */

/* Conteneur principal — carte subtile */
.cest-qui-container {
  padding: 1.25rem 1.5rem;
  background: color-mix(in oklab, var(--surface-2) 35%, var(--surface) 65%);
  border-radius: var(--neu-radius-md);
  border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--border) 30%, transparent);
}

/* "C'est" et "Qui" — mots structurels */
.cestqui {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Wrapper flex du drop zone */
.droppable-container {
  flex: 1 1 180px;
  min-width: 160px;
}

/* ---- Drop zone — état initial (vide) ---- */
.droppable-item {
  position: relative;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 1.125rem;
  border-radius: var(--neu-radius-sm);
  border: 2px dashed color-mix(in oklab, var(--warning) 38%, transparent);
  background: color-mix(in oklab, var(--warning) 5%, transparent);
  color: color-mix(in oklab, var(--text) 40%, transparent);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: default;
  user-select: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

/* Icône fléchée dans le placeholder */
.droppable-item > .bi-arrow-right-circle {
  font-size: 1.1em;
  opacity: 0.45;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  flex-shrink: 0;
}

/* ---- État survol lors du glisser (.border ajouté par le système) ---- */
:is(#droppable, #droppableComplement).border {
  border: 2px solid color-mix(in oklab, var(--warning) 85%, transparent);
  background: color-mix(in oklab, var(--warning) 10%, transparent);
  color: var(--text);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--warning) 16%, transparent),
    0 6px 20px color-mix(in oklab, var(--warning) 14%, transparent);
  transform: scale(1.015);
}

:is(#droppable, #droppableComplement).border > .bi-arrow-right-circle {
  opacity: 0.85;
  transform: translateX(3px);
}

/* Slot de depot (deplacement complement) */
#droppableComplementMove {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--neu-radius-pill);
  border: 2px dashed color-mix(in oklab, var(--warning) 54%, transparent);
  background: color-mix(in oklab, var(--warning) 8%, transparent);
  color: color-mix(in oklab, var(--text) 68%, transparent);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.22s ease,
    transform 0.15s ease;
  animation: drop-move-pulse 1.8s ease-in-out infinite;
}

#droppableComplementMove .bi {
  opacity: 0.8;
}

#droppableComplementMove.border {
  border-style: solid;
  border-color: color-mix(in oklab, var(--warning) 84%, transparent);
  background: color-mix(in oklab, var(--warning) 14%, transparent);
  color: var(--text);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--warning) 18%, transparent),
    0 8px 20px color-mix(in oklab, var(--warning) 16%, transparent);
  transform: translateY(-1px) scale(1.02);
  animation: none;
}

#droppableComplementMove.activeDropped {
  border-color: transparent;
  background: transparent;
  color: var(--accent); /* seul marqueur : texte violet gras */
  font-weight: 700;
  box-shadow: none;
  animation: none;
  padding-inline: 0; /* supprime le padding de la "pill" pour ne pas laisser d'espace vide */
}

#virgule {
  color: var(--text);
  font-size: 1.25em;
  font-weight: 700;
  padding-inline: 0.3rem;
  letter-spacing: -0.01em;
}

@keyframes drop-move-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--warning) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in oklab, var(--warning) 15%, transparent);
  }
}

/* ---- État rempli — sujet déposé ---- */
.droppable-item.activeDropped,
.droppable-item.sujet {
  border: 1.5px solid color-mix(in oklab, var(--warning) 50%, transparent);
  border-style: solid;
  background: color-mix(in oklab, var(--warning) 9%, var(--surface) 91%);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--warning) 10%, transparent),
    0 3px 12px color-mix(in oklab, var(--warning) 10%, transparent);
}

/* Masquer l'icône une fois rempli */
.droppable-item.activeDropped > .bi-arrow-right-circle,
.droppable-item.sujet > .bi-arrow-right-circle {
  display: none;
}

/* Partie entre crochets dans le sujet — italic orangé */
.sujetItalique {
  font-style: italic;
  color: color-mix(in oklab, var(--warning) 70%, var(--text) 30%);
}

/* Verbe extrait après "Qui" */
.verbeExtrait {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* ---- Thème light — ajustements ---- */
html[data-theme="light"] .cest-qui-container {
  background: color-mix(in oklab, var(--surface-2) 30%, white 70%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] .droppable-item {
  border-color: color-mix(in oklab, var(--warning) 45%, transparent);
  background: color-mix(in oklab, var(--warning) 6%, white 94%);
}

html[data-theme="light"] :is(#droppable, #droppableComplement).border {
  background: color-mix(in oklab, var(--warning) 12%, white 88%);
}

html[data-theme="light"] .droppable-item.activeDropped,
html[data-theme="light"] .droppable-item.sujet {
  background: color-mix(in oklab, var(--warning) 10%, white 90%);
}

/* ===========================
   Accessibilité — mouvement réduit
   =========================== */
@media (prefers-reduced-motion: reduce) {
  :is(#phraseBase, #phraseSujet, #sujetTest, #phraseCompl) .verbeSelectionne,
  .droppable-item,
  .droppable-item > .bi-arrow-right-circle,
  #droppableComplementMove {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== content-search-table: assets/css/_content-search-table.css ===== */
/* ===========================
   ContentSearchTable — Corpus Search view
   Layout, table, pager, filters + Apple-like theming
   =========================== */

/* ===== Corpus Search (contentSearchTable view) ===== */
.contentSearchTable {
  flex: 1 1 0;
  min-height: 0;
}
.contentSearchTable.search-container {
  width: clamp(980px, 90vw, 1320px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* Fill viewport below navbar — content scrolls internally */
  height: calc(100dvh - var(--manual-nav-offset, 70px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Flex chain: container → row → col → ajaxContent → card → card-body → table */
.contentSearchTable > .row {
  flex: 1 1 0;
  min-height: 0;
}
.contentSearchTable > .row > [class*="col"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.contentSearchTable .ajaxContent {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 32px);
  flex: 1 1 0;
  min-height: 0;
}
.contentSearchTable .search-header {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  --search-control-radius: 999px;
  --search-control-min-h: clamp(2.8rem, 2vw + 1.8rem, 3.15rem);
}
.contentSearchTable .search-back-button {
  flex: 0 0 auto;
  border: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
  background: transparent;
  color: var(--text);
  border-radius: var(--search-control-radius);
  min-height: var(--search-control-min-h);
  padding: clamp(0.5rem, 0.95vw, 0.7rem) clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 500;
  font-size: clamp(0.92rem, 0.88rem + 0.12vw, 1.02rem);
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 10px);
  box-shadow: none;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.contentSearchTable .search-back-button i {
  font-size: 1.05em;
  transform: translateX(0);
  transition: transform var(--neu-transition-default);
}
.contentSearchTable .search-controls {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(1000px, 78vw, 1280px);
  flex: 1 1 auto;
  max-width: 100%;
  margin: 0;
  min-width: 0;
  --filter-toggle-gap: clamp(0.5rem, 4vw, 2.6rem);
  padding-right: calc(
    var(--filter-toggle-width, clamp(2.6rem, 2.6vw + 1.6rem, 3.1rem)) +
      var(--filter-toggle-gap)
  );
}
.contentSearchTable .search-controls .input-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contentSearchTable .search-controls .input-icon-wrapper .bi-search {
  position: absolute;
  left: clamp(1.1rem, 2.5vw, 1.35rem);
  font-size: 1.15rem;
  color: var(--accent);
  pointer-events: none;
}
.contentSearchTable .corpus-search-input {
  min-height: var(--search-control-min-h);
  max-width: clamp(240px, 60vw, 420px);
  background: color-mix(in oklab, var(--surface-2) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
  border-radius: var(--search-control-radius);
  color: var(--text);
  /* !important nécessaire : app.css a un sélecteur input:not(...) ×4 à spécificité 0,4,1
     qui écrase notre 0,2,0 malgré le chargement ultérieur. */
  padding-left: clamp(3.6rem, 6vw, 4rem) !important;
  padding-right: clamp(1rem, 2.6vw, 1.4rem) !important;
  text-align: left;
  box-shadow: none;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}
.contentSearchTable .corpus-search-input:focus,
.contentSearchTable .corpus-search-input:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border) 60%);
  box-shadow: 0 0 0 0.16rem
    color-mix(in oklab, var(--focus-ring) 80%, transparent);
  outline: none;
}
.contentSearchTable .corpus-search-input::placeholder {
  color: color-mix(in oklab, var(--text) 68%, var(--surface-2) 32%);
  opacity: 1;
}
.contentSearchTable .corpus-search-input:focus::placeholder,
.contentSearchTable .corpus-search-input:focus-visible::placeholder {
  color: transparent;
}
.contentSearchTable .corpus-filter-options {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.8vw, 18px);
}
.contentSearchTable .corpus-filter-options[hidden] {
  display: none !important;
}
.contentSearchTable .corpus-filter-toggle {
  min-height: var(--search-control-min-h);
  border: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
  background: transparent;
  color: var(--text);
  padding: clamp(0.5rem, 0.95vw, 0.7rem) clamp(1.2rem, 2.8vw, 1.75rem);
  border-radius: var(--search-control-radius);
  font-weight: 500;
  font-size: clamp(0.94rem, 0.9rem + 0.12vw, 1.05rem);
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 10px);
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.contentSearchTable .corpus-filter-toggle.is-open {
  background: color-mix(in oklab, var(--accent) 45%, var(--surface-2) 55%);
  color: var(--on-accent);
  border-color: color-mix(in oklab, var(--accent) 65%, var(--border) 35%);
  padding: 0;
  width: clamp(2.6rem, 2.6vw + 1.6rem, 3.1rem);
  height: clamp(2.6rem, 2.6vw + 1.6rem, 3.1rem);
  border-radius: var(--neu-radius-pill);
}
.contentSearchTable .corpus-filter-toggle .bi {
  font-size: 1.1em;
}
.contentSearchTable .search-controls .corpus-filter-toggle {
  position: absolute;
  top: 50%;
  right: var(--filter-toggle-gap, clamp(0.5rem, 4vw, 2.6rem));
  transform: translateY(-50%);
}
.contentSearchTable .corpus-filter-btn {
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background: color-mix(in oklab, var(--surface-2) 82%, transparent);
  color: color-mix(in oklab, var(--text) 90%, var(--surface-2) 10%);
  padding: clamp(0.45rem, 0.9vw, 0.6rem) clamp(1.1rem, 2.6vw, 1.5rem);
  border-radius: var(--neu-radius-pill);
  font-weight: 600;
  font-size: clamp(0.92rem, 0.88rem + 0.12vw, 1.02rem);
  line-height: 1.1;
  box-shadow: var(--elev-1);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.contentSearchTable .corpus-filter-btn.is-active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: color-mix(in oklab, var(--accent) 75%, black 25%);
  box-shadow:
    var(--elev-1),
    0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

@media (max-width: 575.98px) {
  .contentSearchTable .search-header {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .contentSearchTable .search-back-button {
    min-height: auto;
    padding: 0.55rem 0.82rem;
    margin-top: 2px;
  }
  .contentSearchTable .search-back-button span {
    display: none;
  }
  .contentSearchTable .search-controls {
    flex-direction: column;
    gap: clamp(12px, 4vw, 18px);
    padding-right: 0;
  }
  .contentSearchTable .search-controls .corpus-filter-toggle {
    position: static;
    transform: none;
  }
  .contentSearchTable .corpus-filter-btn {
    flex: 1 1 100%;
    width: 100%;
  }
  .contentSearchTable .corpus-filter-toggle {
    width: clamp(200px, 80vw, 320px);
    justify-content: center;
  }
  .contentSearchTable .corpus-filter-toggle.is-open {
    width: clamp(2.6rem, 12vw, 3.2rem);
  }
}
.contentSearchTable .search-card {
  border-radius: clamp(18px, 3vw, 24px);
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  box-shadow: none;
  overflow: hidden;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
:is(html:not([data-theme]), html[data-theme="dark"])
  .contentSearchTable
  .search-card {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 25%, transparent);
  box-shadow: var(--elev-1);
}
.contentSearchTable .card-body {
  padding: clamp(1.05rem, 2.2vw, 1.6rem);
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* ===== Table premium Apple-like ===== */
.contentSearchTable #corpusSearchTable {
  --corpus-density: 1;
  --corpus-row-height: auto;
  --corpus-title-lines: 3;
  border-radius: var(--radius);
  background: color-mix(
    in oklab,
    var(--surface-creuse, var(--bg)) 50%,
    var(--surface) 50%
  );
  overflow: auto;
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--border) 20%, transparent);
  flex: 1 1 0;
  min-height: 0;
  font-size: inherit;
}
.contentSearchTable #corpusSearchTable table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: calc(
    clamp(0.9rem, 0.82rem + 0.25vw, 1.05rem) * var(--corpus-density)
  );
}
/* Headers: uppercase, spaced, très muted */
.contentSearchTable #corpusSearchTable th {
  padding: calc(clamp(0.5rem, 0.42rem + 0.25vw, 0.7rem) * var(--corpus-density))
    calc(clamp(0.6rem, 0.46rem + 0.45vw, 0.98rem) * var(--corpus-density));
  font-size: clamp(0.72rem, 0.65rem + 0.2vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
}
/* Rows: dividers + rail d'accent latent */
.contentSearchTable #corpusSearchTable tbody tr {
  height: var(--corpus-row-height);
  cursor: pointer;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 45%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--accent) 15%, transparent);
  transition: box-shadow var(--neu-transition-default);
}
.contentSearchTable #corpusSearchTable tbody tr:last-child {
  border-bottom: none;
}
/* Zébrures : paire légère, impaire bien marquée */
.contentSearchTable #corpusSearchTable tbody tr:nth-of-type(even) > * {
  background: color-mix(in oklab, var(--surface-2) 30%, transparent);
}
.contentSearchTable #corpusSearchTable tbody tr:nth-of-type(odd) {
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--accent) 45%, transparent);
}
.contentSearchTable #corpusSearchTable tbody tr:nth-of-type(odd) > * {
  background: color-mix(in oklab, var(--surface-2) 62%, transparent);
}
/* Hover / focus : accent plein + fond marqué */
.contentSearchTable #corpusSearchTable tbody tr:hover,
.contentSearchTable #corpusSearchTable tbody tr:focus-within {
  box-shadow: inset 3px 0 0 var(--accent);
}
.contentSearchTable #corpusSearchTable tbody tr:hover > * {
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-2) 90%);
}
.contentSearchTable #corpusSearchTable tbody tr:focus-within > * {
  background: color-mix(in oklab, var(--accent) 14%, var(--surface-2) 86%);
}
/* Cells */
.contentSearchTable #corpusSearchTable td {
  padding: calc(clamp(0.65rem, 0.52rem + 0.4vw, 1rem) * var(--corpus-density))
    calc(clamp(0.6rem, 0.46rem + 0.45vw, 0.98rem) * var(--corpus-density));
  white-space: normal;
  word-break: break-word;
  vertical-align: middle;
}
/* Col 1: numéro badge monospace */
.contentSearchTable #corpusSearchTable .id_Num_Tableau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: calc(
    clamp(0.78rem, 0.72rem + 0.18vw, 0.9rem) * var(--corpus-density)
  );
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface-2) 88%);
  color: var(--accent);
  border-radius: 6px;
  padding: 0.2em 0.6em;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
/* Col 2: lien corpus — élément primaire */
.contentSearchTable #corpusSearchTable td:nth-child(2) > a.searchedCorpus {
  color: color-mix(in oklab, var(--accent) 80%, var(--text) 20%);
  font-weight: 700;
  font-size: calc(
    clamp(0.97rem, 0.88rem + 0.28vw, 1.12rem) * var(--corpus-density)
  );
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--corpus-title-lines);
  overflow: hidden;
  transition: color var(--neu-transition-fast);
}
/* Tags pills: Notion + Classe */
.contentSearchTable #corpusSearchTable .corpus-tag {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--neu-radius-pill);
  padding: 0.18em 0.7em;
  font-size: calc(
    clamp(0.78rem, 0.72rem + 0.18vw, 0.9rem) * var(--corpus-density)
  );
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
}
.contentSearchTable #corpusSearchTable .corpus-tag--notion {
  background: color-mix(in oklab, var(--accent) 13%, var(--surface-2) 87%);
  color: color-mix(in oklab, var(--accent) 88%, var(--text) 12%);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
}
.contentSearchTable #corpusSearchTable .corpus-tag--classe {
  background: color-mix(in oklab, var(--border) 28%, var(--surface-2) 72%);
  color: var(--text-muted);
  border: 1px solid color-mix(in oklab, var(--border) 32%, transparent);
}
/* Méta secondaire: Thème, Auteur, Établissement */
.contentSearchTable #corpusSearchTable .corpus-meta {
  font-size: calc(
    clamp(0.82rem, 0.76rem + 0.18vw, 0.94rem) * var(--corpus-density)
  );
  color: var(--text-muted);
  font-weight: 400;
}
/* Empty state */
.contentSearchTable #corpusSearchTable:empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: color-mix(in oklab, var(--text) 68%, var(--surface-2) 32%);
  font-style: italic;
}
/* Sort icons */
.contentSearchTable #corpusSearchTable th[data-state-sort] {
  cursor: pointer;
}
/* Desktop: largeurs de colonnes */
@media (min-width: 576px) {
  .contentSearchTable #corpusSearchTable th:nth-child(1),
  .contentSearchTable #corpusSearchTable td:nth-child(1) {
    width: 7%;
    white-space: nowrap;
  }
  .contentSearchTable #corpusSearchTable th:nth-child(2),
  .contentSearchTable #corpusSearchTable td:nth-child(2) {
    width: 30%;
  }
  .contentSearchTable #corpusSearchTable th:nth-child(3),
  .contentSearchTable #corpusSearchTable td:nth-child(3),
  .contentSearchTable #corpusSearchTable th:nth-child(5),
  .contentSearchTable #corpusSearchTable td:nth-child(5) {
    width: 13%;
  }
  .contentSearchTable #corpusSearchTable th:nth-child(4),
  .contentSearchTable #corpusSearchTable td:nth-child(4),
  .contentSearchTable #corpusSearchTable th:nth-child(6),
  .contentSearchTable #corpusSearchTable td:nth-child(6),
  .contentSearchTable #corpusSearchTable th:nth-child(7),
  .contentSearchTable #corpusSearchTable td:nth-child(7) {
    width: 12%;
  }
  .contentSearchTable #corpusSearchTable .corpus-row-toggle {
    display: none;
  }
}
.contentSearchTable #corpusSearchPager nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0;
  row-gap: clamp(10px, 2.2vw, 16px);
  margin-top: clamp(1rem, 2.6vw, 1.6rem);
}
.contentSearchTable #corpusSearchPager .pages {
  display: inline-flex;
  align-items: center;
  gap: clamp(1px, 0.35vw, 4px);
  margin-left: clamp(4px, 0.7vw, 8px);
  margin-right: clamp(4px, 0.7vw, 8px);
}
.contentSearchTable #corpusSearchPager .pages button,
.contentSearchTable #corpusSearchPager > nav > button {
  border: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
  background: transparent;
  border-radius: 8px;
  padding: clamp(0.24rem, 0.65vw, 0.34rem) clamp(0.38rem, 0.82vw, 0.5rem);
  color: var(--text);
  font-size: clamp(0.88rem, 0.82rem + 0.14vw, 0.98rem);
  line-height: 1.15;
  box-shadow: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.16s ease;
}
.contentSearchTable #corpusSearchPager .pages button[aria-current="page"] {
  background: color-mix(in oklab, var(--accent) 30%, var(--surface-2) 70%);
  color: var(--on-accent);
  cursor: default;
}
.contentSearchTable #corpusSearchPager .pages button:not([aria-current]) {
  cursor: pointer;
}
.contentSearchTable #corpusSearchPager .pages button:not([aria-current]):hover,
.contentSearchTable #corpusSearchPager > nav > button:hover {
  transform: none;
  background: color-mix(in oklab, var(--surface) 12%, transparent);
  box-shadow: none;
}
.contentSearchTable #corpusSearchPager .pages button:disabled,
.contentSearchTable #corpusSearchPager > nav > button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.contentSearchTable #corpusSearchPager .page-size {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 0.9vw, 8px);
  color: color-mix(in oklab, var(--text) 90%, var(--surface-2) 10%);
  font-size: clamp(0.86rem, 0.81rem + 0.12vw, 0.94rem);
  margin-left: auto;
}
.contentSearchTable #corpusSearchPager .page-size select {
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
  background: transparent;
  padding: clamp(0.28rem, 0.8vw, 0.38rem) clamp(0.78rem, 1.5vw, 1rem);
  color: var(--text);
  font-size: clamp(0.9rem, 0.84rem + 0.1vw, 0.98rem);
  line-height: 1.15;
  box-shadow: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right 12px center,
    right 6px center;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}
.contentSearchTable #corpusSearchPager .page-size select:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border) 60%);
  box-shadow: 0 0 0 0.16rem
    color-mix(in oklab, var(--focus-ring) 78%, transparent);
}
.contentSearchTable #corpusSearchPager .info {
  font-size: clamp(0.88rem, 0.82rem + 0.16vw, 1rem);
  line-height: 1.2;
  color: color-mix(in oklab, var(--text) 92%, var(--surface-2) 8%);
  margin-left: clamp(12px, 2.4vw, 18px);
}

/* Large screens: wider card, légèrement plus de padding */
@media (min-width: 1500px) {
  .contentSearchTable.search-container .search-card {
    width: clamp(1060px, 86vw, 1440px);
  }
  .contentSearchTable #corpusSearchTable td,
  .contentSearchTable #corpusSearchTable th {
    padding: clamp(0.65rem, 0.55rem + 0.3vw, 0.98rem)
      clamp(0.7rem, 0.6rem + 0.4vw, 1.1rem);
  }
}

.contentSearchTable .btn-outline-info {
  border-width: 1.5px;
  box-shadow: var(--elev-1);
}
.contentSearchTable .btn-outline-info:hover,
.contentSearchTable .btn-outline-info:focus-visible {
  box-shadow: var(--elev-2);
}

@media (max-width: 575.98px) {
  .contentSearchTable {
    padding-left: clamp(14px, 4vw, 18px);
    padding-right: clamp(14px, 4vw, 18px);
  }
  .contentSearchTable .search-controls,
  .contentSearchTable #corpusFilterBar {
    margin-bottom: clamp(0.5rem, 2.6vw, 0.85rem);
  }
  .contentSearchTable .search-controls {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    --filter-toggle-gap: 0;
    gap: clamp(0.7rem, 3.2vw, 1rem);
  }
  .contentSearchTable .search-controls .input-icon-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contentSearchTable .search-controls .corpus-filter-toggle {
    position: static;
    align-self: flex-end;
    width: auto;
    max-width: clamp(180px, 48vw, 230px);
    transform: none;
    margin: 0;
    padding: clamp(0.45rem, 2.8vw, 0.6rem) clamp(1rem, 4.2vw, 1.35rem);
    font-size: clamp(0.88rem, 0.82rem + 0.12vw, 0.98rem);
    min-height: auto;
    background: transparent;
    color: var(--text);
    border: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
    box-shadow: none;
  }
  .contentSearchTable .search-controls .corpus-filter-toggle.is-open {
    width: auto;
    max-width: clamp(180px, 48vw, 230px);
    transform: none;
    height: auto;
    padding: clamp(0.45rem, 2.8vw, 0.6rem) clamp(1rem, 4.2vw, 1.35rem);
    border-radius: var(--neu-radius-pill);
    background: color-mix(in oklab, var(--accent) 15%, transparent);
    color: var(--text);
    border-color: color-mix(in oklab, var(--accent) 40%, var(--border) 60%);
    box-shadow: none;
  }
  .contentSearchTable .corpus-search-input {
    width: 100%;
    max-width: 100%;
  }
  .contentSearchTable .corpus-filter-options {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(10px, 3vw, 14px);
    margin-top: clamp(0.4rem, 2.2vw, 0.7rem);
    width: 100%;
    padding-inline: clamp(0.2rem, 2vw, 0.6rem);
  }
  .contentSearchTable .corpus-filter-btn {
    width: 100%;
  }
  .contentSearchTable .search-card {
    border-radius: var(--radius);
  }
  .contentSearchTable.search-container,
  .contentSearchTable.search-container .search-card {
    width: 100%;
    max-width: 100%;
  }
  .contentSearchTable #corpusSearchPager nav {
    justify-content: center;
    column-gap: clamp(10px, 4vw, 16px);
    row-gap: clamp(8px, 3vw, 14px);
  }
  .contentSearchTable #corpusSearchPager .page-size {
    width: 100%;
    justify-content: center;
  }
  .contentSearchTable #corpusSearchPager .page-size select {
    width: clamp(160px, 65vw, 220px);
  }
  .contentSearchTable .card-body {
    padding: clamp(1rem, 4vw, 1.3rem);
    font-size: clamp(0.94rem, 0.84rem + 0.26vw, 1.1rem);
  }
  /* ===== Table → Card layout mobile ===== */
  .contentSearchTable #corpusSearchTable table,
  .contentSearchTable #corpusSearchTable tbody {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 3.5vw, 14px);
  }
  .contentSearchTable #corpusSearchTable thead {
    display: none;
  }
  /* Chaque ligne = une card */
  .contentSearchTable #corpusSearchTable tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: clamp(14px, 4vw, 18px) clamp(14px, 4.5vw, 20px);
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid color-mix(in oklab, var(--border) 28%, transparent);
    border-left: 3px solid transparent;
    box-shadow: 0 1px 6px color-mix(in oklab, black 10%, transparent);
    cursor: pointer;
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }
  :is(html:not([data-theme]), html[data-theme="dark"])
    .contentSearchTable
    #corpusSearchTable
    tbody
    tr {
    box-shadow: 0 2px 10px color-mix(in oklab, black 24%, transparent);
  }
  .contentSearchTable #corpusSearchTable tbody tr:hover,
  .contentSearchTable #corpusSearchTable tbody tr:focus-within {
    border-left-color: var(--accent);
    box-shadow: 0 4px 16px color-mix(in oklab, var(--accent) 14%, black 10%);
  }
  .contentSearchTable #corpusSearchTable tbody tr > * {
    background: transparent;
  }
  /* Reset td */
  .contentSearchTable #corpusSearchTable td {
    display: block;
    width: auto;
    padding: 0;
    white-space: normal;
    word-break: break-word;
    vertical-align: initial;
  }
  /* Col 2 (Nom) — en premier, pleine largeur */
  .contentSearchTable #corpusSearchTable td:nth-child(2) {
    order: 0;
    width: 100%;
    margin-bottom: 4px;
  }
  .contentSearchTable #corpusSearchTable td:nth-child(2) > a.searchedCorpus {
    font-size: clamp(0.98rem, 0.9rem + 0.22vw, 1.1rem);
    line-height: 1.3;
    display: block;
  }
  /* Col 1 (Num badge) — 2ème, inline */
  .contentSearchTable #corpusSearchTable td:nth-child(1) {
    order: 1;
    width: auto;
  }
  /* Col 5 (Notion tag) — inline après badge */
  .contentSearchTable #corpusSearchTable td:nth-child(5) {
    order: 2;
    width: auto;
  }
  /* Col 3 (Classe tag) — inline après notion */
  .contentSearchTable #corpusSearchTable td:nth-child(3) {
    order: 3;
    width: auto;
  }
  /* Col 4,6,7 — méta secondaire */
  .contentSearchTable #corpusSearchTable td:nth-child(4),
  .contentSearchTable #corpusSearchTable td:nth-child(6),
  .contentSearchTable #corpusSearchTable td:nth-child(7) {
    order: 5;
    width: auto;
  }
  .contentSearchTable #corpusSearchTable .corpus-row-toggle {
    display: none;
  }
}
.contentSearchTable.search-container .search-card {
  width: clamp(940px, 86vw, 1280px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================
   Apple-like theming
   Custom properties + low-noise overrides (light/dark)
   =========================== */
.contentSearchTable {
  --cs-surface: color-mix(in oklab, var(--surface) 94%, var(--bg) 6%);
  --cs-surface-soft: color-mix(in oklab, var(--surface-2) 82%, transparent);
  --cs-border: color-mix(in oklab, var(--border) 64%, transparent);
  --cs-border-strong: color-mix(in oklab, var(--border) 78%, transparent);
  --cs-text-soft: color-mix(in oklab, var(--text) 86%, var(--bg) 14%);
  --cs-focus: color-mix(in oklab, var(--focus-ring) 82%, transparent);
}

:is(html:not([data-theme]), html[data-theme="dark"]) .contentSearchTable {
  --cs-surface: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
  --cs-surface-soft: color-mix(in oklab, var(--surface-2) 60%, var(--bg) 40%);
  --cs-border: color-mix(in oklab, var(--border) 42%, transparent);
  --cs-border-strong: color-mix(in oklab, var(--border) 55%, transparent);
}

.contentSearchTable .search-card {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  box-shadow: var(--elev-1);
  border-radius: clamp(16px, 2.6vw, 22px);
}

.contentSearchTable .corpus-search-input {
  background: color-mix(in oklab, var(--surface) 6%, var(--bg) 94%);
  border: 1px solid var(--cs-border);
  color: var(--cs-text-soft);
  box-shadow: none;
}

.contentSearchTable .corpus-search-input:focus,
.contentSearchTable .corpus-search-input:focus-visible {
  background: color-mix(in oklab, var(--surface) 12%, var(--bg) 88%);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--cs-border) 60%);
  box-shadow: 0 0 0 0.16rem var(--cs-focus);
}

.contentSearchTable .corpus-filter-toggle {
  background: transparent;
  border: 1px solid var(--cs-border);
  box-shadow: none;
  font-weight: 500;
}
.contentSearchTable .corpus-filter-btn {
  background: transparent;
  border: 1px solid var(--cs-border);
  box-shadow: none;
}

.contentSearchTable .corpus-filter-toggle.is-open,
.contentSearchTable .corpus-filter-btn.is-active {
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--cs-border) 60%);
  color: var(--text);
  box-shadow: none;
}

.contentSearchTable #corpusSearchTable {
  background: var(--cs-surface-soft);
  border: 1px solid var(--cs-border);
  box-shadow: none;
}

.contentSearchTable #corpusSearchPager .pages button,
.contentSearchTable #corpusSearchPager > nav > button,
.contentSearchTable #corpusSearchPager .page-size select {
  background: var(--cs-surface-soft);
  border: 1px solid var(--cs-border);
  box-shadow: none;
}

.contentSearchTable #corpusSearchPager .pages button:not([aria-current]):hover,
.contentSearchTable #corpusSearchPager > nav > button:hover {
  box-shadow: none;
  transform: translateY(0);
}

.contentSearchTable #corpusSearchPager .pages button[aria-current="page"] {
  background: color-mix(in oklab, var(--accent) 24%, var(--cs-surface) 76%);
  border-color: color-mix(in oklab, var(--accent) 52%, var(--cs-border) 48%);
  color: var(--text);
}

/* ===========================
   Accessibilité — mouvement réduit
   =========================== */
@media (prefers-reduced-motion: reduce) {
  .contentSearchTable .search-back-button,
  .contentSearchTable .search-back-button i,
  .contentSearchTable .corpus-search-input,
  .contentSearchTable .corpus-filter-toggle,
  .contentSearchTable .corpus-filter-btn,
  .contentSearchTable #corpusSearchTable tbody tr,
  .contentSearchTable #corpusSearchPager .pages button,
  .contentSearchTable #corpusSearchPager > nav > button {
    transition: none !important;
    animation: none !important;
  }
}

.contentSearchTable .btn-outline-info {
  box-shadow: none;
  border-width: 1px;
}

/* ===== phrase-lock: assets/css/_phrase-lock.css ===== */
/* Phrase verrouillée : une phrase marquée "terminée" (corpus arrêté à
   une étape) est figée quand on la rouvre, quel que soit le chemin de
   retour (croix de la modale, récapitulatif, onglet Phrase). Les boutons
   "Refaire" restent actifs pour permettre de reprendre l'analyse. */

#generalTabsContent.is-locked {
  opacity: 0.6;
  pointer-events: none;
}

#generalTabsContent.is-locked .erraseSujet-btn,
#generalTabsContent.is-locked #effacerVerbeTab1,
#generalTabsContent.is-locked #effacerVerbePrincipal,
#generalTabsContent.is-locked #effacerVerbSection,
#generalTabsContent.is-locked .erraseGpComp-btn,
#generalTabsContent.is-locked .erraseGpComp2-btn {
  opacity: 1;
  pointer-events: auto;
}

.phraseLockedBanner {
  align-items: center;
  gap: 0.75rem;
  border-color: var(--warning);
  flex-wrap: wrap;
  overflow: visible;
  height: auto;
  margin-top: 1rem;
}

.phraseLockedBanner-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 576px) {
  .phraseLockedBanner-actions {
    width: auto;
  }
}

/* Menu des phrases : distinction visuelle légère des phrases déjà
   analysées (marquées "terminées"), pour situer sa progression d'un
   coup d'oeil sans que ça lise comme un état d'action (pas de vert vif
   ni de bordure). Simple pastille discrète, faible opacité. */
.corpus-chip.phrase-done {
  position: relative;
}

.corpus-chip.phrase-done::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: var(--text-muted);
  opacity: 0.7;
}

.corpus-chip.phrase-done.active::after,
.corpus-chip.phrase-done.btn-primary::after {
  background-color: var(--on-accent);
  opacity: 0.6;
}

/* ===== coachmark: assets/css/_coachmark.css ===== */
/* Coachmark : tutoriel gestuel contextuel (Verbe, Sujet, Complément).
   Uniquement des tokens existants (--surface, --accent, --border, --text)
   pour rester theme-aware dark/light sans aucune couleur en dur. */

.coachmark-overlay {
  position: fixed;
  inset: 0;
  z-index: 1055; /* au-dessus de la navbar/offcanvas Bootstrap */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgb(0 0 0 / 55%);
  animation: coachmark-fade-in 0.2s ease;
}

@keyframes coachmark-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.coachmark-card {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  background-color: var(--surface-2);
  box-shadow: 0 12px 40px rgb(0 0 0 / 35%);
}

.coachmark-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background-color: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Onglets « Démonstration | Grammaire » — contrôle segmenté façon iOS/macOS :
   piste en creux, segment actif détaché sur la surface de la carte. */
.coachmark-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1rem;
  padding: 0.25rem;
  border-radius: 999px;
  background-color: color-mix(in oklab, var(--surface) 70%, var(--surface-2));
  border: 1px solid var(--border);
}

.coachmark-tab {
  flex: 1 1 0;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.coachmark-tab:hover {
  color: var(--text);
}

.coachmark-tab[aria-selected="true"] {
  background-color: var(--surface-3);
  color: var(--accent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}

.coachmark-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Volet « Grammaire » : texte de référence de la notion (AIDE_CONTENT),
   mêmes conventions typographiques que l'ancien popover d'aide. */
.coachmark-grammar-body {
  color: var(--text);
  font-size: 0.95rem;
}

.coachmark-grammar-body p:last-child {
  margin-bottom: 0;
}

.coachmark-grammar-body ul {
  margin-bottom: 0.5rem;
  padding-left: 1.2em;
}

.coachmark-grammar-body ul li::marker {
  color: var(--accent);
}

.coachmark-grammar-body strong {
  color: var(--accent);
}

.coachmark-grammar-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.coachmark-grammar-body th {
  background: color-mix(in oklab, var(--accent) 18%, var(--surface-2) 82%);
}

.coachmark-grammar-body th,
.coachmark-grammar-body td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
}

.coachmark-dismiss {
  display: block;
  width: 100%;
  margin-top: 1rem;
}

.coachmark-help-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.coachmark-help-toggle .form-check-label {
  color: inherit;
  cursor: pointer;
}

/* Switch dédié, plus visible que le style neumorphique global (trop discret
   sur le fond var(--surface-2) de la carte) : piste + curseur explicites. */
.coachmark-help-toggle .form-check-input {
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border-radius: 999px;
  background-color: var(--surface-3);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

.coachmark-help-toggle .form-check-input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.15rem;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: var(--text-muted);
  transition:
    left 0.2s ease,
    background-color 0.2s ease;
}

.coachmark-help-toggle .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Neutralise explicitement le chevron de coche global
   (.form-check-input[type="checkbox"]:checked::before dans app.css, même
   spécificité, chargé avant ce partiel) : sans ce reset, ses propriétés
   propres (border, transform, width/height) restent visibles en plus du
   curseur rond défini ici. */
.coachmark-help-toggle .form-check-input:checked::before {
  top: 50%;
  left: 1.4rem;
  width: 1.1rem;
  height: 1.1rem;
  border: none;
  transform: translateY(-50%);

  /* var(--surface), pas var(--on-accent) : ce dernier est un token de
     contraste texte-sur-accent (noir en dark, l'accent y étant un violet
     pastel clair), pas une couleur de curseur — donnait un rond noir. */
  background-color: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .coachmark-help-toggle .form-check-input::before {
    transition: none;
  }
}

.coachmark-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.coachmark-close:hover,
.coachmark-close:focus-visible {
  color: var(--text);
}

.coachmark-title {
  margin: 0 2.25rem 0.25rem 0;
  font-weight: 600;
  color: var(--text);
}

.coachmark-instruction {
  margin: 0 2.25rem 0.75rem 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.coachmark-demo-container {
  border-radius: 0.5rem;
  background-color: var(--surface);
  padding: 0.75rem 1rem;
}

.coachmark-stage {
  position: relative;
  min-height: 3.5rem;
}

.coachmark-beat {
  position: relative;
}

.coachmark-demo-sentence,
.coachmark-demo-result {
  margin: 0;
  color: var(--text);
}

/* Isole un mot ajouté/changé dans la phrase (chip déposé, pronom substitué)
   pour qu'il se distingue immédiatement du reste du texte. */
.coachmark-highlight-word {
  color: var(--accent);
  font-weight: 600;
}

/* ---- Curseur factice ---- */
.coachmark-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
  margin-left: -0.45rem;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.4s ease;
}

.coachmark-cursor.coachmark-visible {
  opacity: 1;
}

/* ---- Beat "select" ---- */
.coachmark-target-word {
  border-radius: 0.25rem;
  padding: 0 0.15em;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.coachmark-target-word.coachmark-selecting {
  background-color: color-mix(in oklab, var(--accent) 25%, transparent);
}

.coachmark-target-word.coachmark-selected {
  background-color: color-mix(in oklab, var(--accent) 40%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.coachmark-fake-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.4rem;
  background-color: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.15s ease;
  pointer-events: none;
}

.coachmark-fake-btn.coachmark-visible {
  opacity: 1;
}

.coachmark-fake-btn.coachmark-pressed {
  transform: scale(0.94);
  background-color: var(--accent);
  color: var(--surface);
}

/* ---- Beat "click" ---- */
.coachmark-word-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.coachmark-word-btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background-color: var(--surface-2);
  color: var(--text);
  font-size: 0.95rem;
  transition:
    background-color 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.25s ease;
  pointer-events: none;
}

.coachmark-word-btn.coachmark-pressed {
  transform: scale(0.94);
}

.coachmark-word-btn.coachmark-active {
  background-color: color-mix(in oklab, var(--accent) 35%, var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--accent);
}

.coachmark-demo-result {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.coachmark-demo-result.coachmark-visible {
  opacity: 1;
}

/* ---- Beat "dragdrop" ---- */
.coachmark-beat-dragdrop {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.coachmark-chip {
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: var(--surface-2);
  color: var(--text);
  font-size: 0.9rem;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.4s ease;
}

.coachmark-chip.coachmark-visible {
  opacity: 1;
}

.coachmark-chip.coachmark-dragging {
  transform: translateY(0.5rem) scale(1.05);
  box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
}

.coachmark-chip.coachmark-dropped {
  opacity: 0;
}

.coachmark-dropzone {
  margin: 0;
  padding: 0.4rem 0.6rem;
  border: 1px dashed var(--border-strong);
  border-radius: 0.4rem;
  color: var(--text-muted);
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}

.coachmark-dropzone.coachmark-drop-active {
  border-color: var(--accent);
}

.coachmark-dropzone.coachmark-dropped {
  border-style: solid;
  border-color: var(--accent);
  color: var(--text);
}

/* ---- Beat "hover" ----
   Réutilise .detecteurSelectionne / .verbeSelectionne (déjà stylées et
   theme-aware dans _cestqui.css). Comme une démo scriptée ne peut pas
   déclencher un vrai :hover, on mime le même effet visuel via une classe
   (mêmes valeurs, même token --cestqui-gold) plutôt que le sélecteur
   :hover + adjacent-sibling utilisé en production. */
.coachmark-fake-word {
  cursor: default;
}

.detecteurSelectionne.coachmark-fake-hover + .verbeSelectionne {
  background-color: color-mix(in oklab, var(--cestqui-gold) 45%, transparent);
  border-color: color-mix(in oklab, var(--cestqui-gold) 55%, transparent);
}

/* ---- Beat "click-sentence" ----
   .detecteurSelectionne / .verbeSelectionne ne sont stylées qu'à l'intérieur
   de #phraseBase/#phraseSujet/#sujetTest/#phraseCompl dans _cestqui.css (voir
   commentaire "Conserve les styles verbes/detecteurs..."). La zone de démo du
   coachmark n'est aucun de ces conteneurs : on redéclare ici les mêmes
   valeurs pour .coachmark-fake-word, sans dupliquer les tokens. */
.coachmark-beat-click-sentence .detecteurSelectionne.coachmark-fake-word {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
  color: color-mix(in oklab, var(--cestqui-gold) 88%, var(--text) 12%);
}

.coachmark-beat-click-sentence .verbeSelectionne.coachmark-fake-word {
  display: inline-block;
  background-color: color-mix(in oklab, var(--info) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--info) 40%, transparent);
  border-radius: 0.42em;
  padding: 0.12em 0.22em;
  transition:
    background-color 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.25s ease;
}

.coachmark-beat-click-sentence .coachmark-clickable-word {
  cursor: default;
}

.coachmark-beat-click-sentence .coachmark-clickable-word.coachmark-pressed {
  transform: scale(0.94);
}

.coachmark-beat-click-sentence .coachmark-clickable-word.coachmark-active {
  background-color: color-mix(in oklab, var(--accent) 35%, var(--info) 20%);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ---- Beat "complement-suppression" ----
   Reprend les codes visuels réels du découpage complément déjà fait (sujet
   entre crochets rouges, verbe principal encadré rouge, complément encadré
   violet, remplacement par "[...]" violet) — scoped ici car ces classes ne
   sont stylées que dans #phraseBase/#phraseCompl/#phrasesCompletes dans
   _cestqui.css. */
.coachmark-beat-complement-suppression .sujetCrochet {
  color: var(--danger);
  font-weight: 600;
}

.coachmark-beat-complement-suppression .verbePrincipal {
  display: inline-block;
  color: var(--text);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--danger) 22%, var(--surface-2) 78%) 0%,
    color-mix(in oklab, var(--danger) 30%, var(--surface-2) 70%) 100%
  );
  border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--border) 60%);
  border-radius: 0.3em;
  padding: 0.1em 0.4em;
}

.coachmark-beat-complement-suppression .complSelectionne.selectedCompl {
  display: inline-block;
  background: color-mix(in oklab, var(--accent) 26%, transparent);
  border: 2px solid color-mix(in oklab, var(--accent) 72%, var(--border) 28%);
  border-radius: 0.38em;
  padding: 0.04em 0.18em;
  font-weight: 700;
  cursor: default;
  transition: transform 0.15s ease;
}

.coachmark-beat-complement-suppression
  .complSelectionne.selectedCompl.coachmark-pressed {
  transform: scale(0.94);
}

.coachmark-beat-complement-suppression .crochets {
  color: color-mix(in oklab, var(--accent) 70%, var(--text) 30%);
  font-weight: 700;
  font-style: italic;
  border: 1px dashed color-mix(in oklab, var(--accent) 50%, var(--border) 50%);
  border-radius: 0.32em;
  padding: 0.03em 0.2em;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .coachmark-overlay {
    animation: none;
  }

  .coachmark-card,
  .coachmark-cursor,
  .coachmark-target-word,
  .coachmark-fake-btn,
  .coachmark-word-btn,
  .coachmark-demo-result,
  .coachmark-chip,
  .coachmark-dropzone {
    transition: none !important;
  }
}

@media (width <= 575.98px) {
  .coachmark-card {
    padding: 0.75rem 1rem;
  }

  .coachmark-word-list {
    gap: 0.35rem;
  }
}

/* ===== inline-help: assets/css/_inlineHelp.css ===== */
/* Bannières d'aide en ligne (jaunes) : icône ampoule cliquable qui rouvre la
   démonstration coachmark de la sous-étape. Tokens existants uniquement. */

.inline-help-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.inline-help-toggle:hover,
.inline-help-toggle:focus-visible {
  color: var(--accent);
}

.inline-help-toggle-active {
  color: var(--accent);
}

.inline-help-text {
  vertical-align: middle;
}