/* Plateforme facturation — variables & composants (mobile-first)
   Identité sobre pro ; nom commercial non figé (config). */

:root {
  --color-brand: #2d6d73;
  --color-brand-dark: #1d4e53;
  --color-brand-soft: #dcefed;
  --color-brand-pale: #eff7f5;
  --color-accent: #b66c42;
  --color-accent-soft: #faeee6;
  --color-text: #25343a;
  --color-title: #183137;
  --color-muted: #607279;
  --color-border: #d4e0df;
  --color-background: #f6f8f7;
  --color-background-soft: #edf3f1;
  --color-surface: #ffffff;
  --color-warning-soft: #fff6df;
  --color-success-soft: #e5f5eb;
  --color-danger: #b42318;
  --color-danger-soft: #fdecea;
  --color-counter-low-text: #8c6f3a;
  --color-counter-low-fill: #c9a46a;
  --color-counter-high-text: #b36b2e;
  --color-counter-high-fill: #c17a3f;
  --color-on-brand: #ffffff;
  --color-brand-typo: #28666c;
  /* Teal logo / wordmark (La facture · accents é et L · encre Caux/ogique) */
  --color-logo-teal: #3c8a96;
  --color-logo-ink: #24535b;
  /* Panneaux CTA inversés (fond sombre + texte clair) — ne pas lier à --color-title */
  --color-panel-inverse: #183137;
  --color-on-panel-inverse: #f6f8f7;
  --section-bg: var(--color-background);
  --surface-on-section: var(--color-surface);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --radius: 0.65rem;
  --radius-lg: 1rem;
  --radius-field: 0.75rem;
  --field-shadow: 0 1px 2px rgba(15, 35, 40, 0.07);
  --shadow: 0 0.5rem 1.4rem rgba(29, 78, 83, 0.08);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max-width: 68rem;
  --header-h: 4.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Jetons du composant partagé admin.ui (admin-ui.css) : alias des variables
     ci-dessus, donc suivent automatiquement le thème sombre. */
  --admin-ui-bg: var(--color-background);
  --admin-ui-surface: var(--color-surface);
  --admin-ui-surface-soft: var(--color-background-soft);
  --admin-ui-border: var(--color-border);
  --admin-ui-text: var(--color-text);
  --admin-ui-title: var(--color-title);
  --admin-ui-muted: var(--color-muted);
  --admin-ui-accent: var(--color-brand);
  --admin-ui-accent-strong: var(--color-brand-dark);
  --admin-ui-accent-pale: var(--color-brand-pale);
  --admin-ui-focus: var(--color-brand);
  --admin-ui-danger: var(--color-danger);
  --admin-ui-danger-soft: var(--color-danger-soft);
  --admin-ui-on-danger: var(--color-on-brand);
  --admin-ui-warn-soft: var(--color-warning-soft);
  --admin-ui-ok-soft: var(--color-brand-pale);
  --admin-ui-info-soft: var(--color-brand-soft);
  --admin-ui-sandbox: var(--color-accent);
  --admin-ui-sandbox-soft: var(--color-accent-soft);
  --admin-ui-backdrop: rgba(15, 35, 40, 0.45);
  --admin-ui-radius: var(--radius);
  --admin-ui-shadow: var(--shadow);
  --admin-ui-topbar-height: 3.5rem;
  --admin-ui-sidebar-width: 15.5rem;
  --admin-ui-content-width: 76rem;

  /* Jetons du composant partagé docs.reader (docs-ui.css) : alias des variables
     ci-dessus, donc suivent automatiquement le thème sombre. */
  --docs-ui-bg: var(--color-background);
  --docs-ui-surface: var(--color-surface);
  --docs-ui-surface-soft: var(--color-background-soft);
  --docs-ui-border: var(--color-border);
  --docs-ui-text: var(--color-text);
  --docs-ui-muted: var(--color-muted);
  --docs-ui-accent: var(--color-brand);
  --docs-ui-accent-strong: var(--color-brand-dark);
  --docs-ui-accent-pale: var(--color-brand-pale);
  --docs-ui-on-accent: var(--color-on-brand);
  --docs-ui-radius: var(--radius);
  --docs-ui-gap: var(--space-5);
  --docs-ui-sticky-offset: var(--space-4);
}

/* Admin : le sommaire docs s’arrête sous la barre supérieure collante. */
.admin-shell {
  --docs-ui-sticky-offset: calc(var(--admin-ui-topbar-height) + var(--space-4));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand: #6eb0e0;
    --color-brand-dark: #9bc9eb;
    --color-brand-soft: #1a2d3d;
    --color-brand-pale: #121f2a;
    --color-accent: #e0a060;
    --color-accent-soft: #3a2c1c;
    --color-text: #e6edf3;
    --color-title: #f4f8fb;
    --color-muted: #9aabba;
    --color-border: #2a3a4a;
    --color-background: #0d141b;
    --color-background-soft: #121b24;
    --color-surface: #16212c;
    --color-on-brand: #0d141b;
    --color-brand-typo: #6eb0e0;
    --color-logo-teal: #6eb8c2;
    --color-logo-ink: #b7d4d9;
    --color-panel-inverse: #12262c;
    --color-on-panel-inverse: #e6edf3;
    --color-warning-soft: #3a3220;
    --color-success-soft: #1a3228;
    --color-danger: #f07070;
    --color-danger-soft: #3a1c1c;
    --color-counter-low-text: #c9a46a;
    --color-counter-low-fill: #8c6f3a;
    --color-counter-high-text: #d4845c;
    --color-counter-high-fill: #b36b2e;
    --shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --color-brand: #6eb0e0;
  --color-brand-dark: #9bc9eb;
  --color-brand-soft: #1a2d3d;
  --color-brand-pale: #121f2a;
  --color-accent: #e0a060;
  --color-accent-soft: #3a2c1c;
  --color-text: #e6edf3;
  --color-title: #f4f8fb;
  --color-muted: #9aabba;
  --color-border: #2a3a4a;
  --color-background: #0d141b;
  --color-background-soft: #121b24;
  --color-surface: #16212c;
  --color-on-brand: #0d141b;
  --color-brand-typo: #6eb0e0;
  --color-logo-teal: #6eb8c2;
  --color-logo-ink: #b7d4d9;
  --color-panel-inverse: #12262c;
  --color-on-panel-inverse: #e6edf3;
  --color-warning-soft: #3a3220;
  --color-success-soft: #1a3228;
  --color-danger: #f07070;
  --color-danger-soft: #3a1c1c;
  --color-counter-low-text: #c9a46a;
  --color-counter-low-fill: #8c6f3a;
  --color-counter-high-text: #d4845c;
  --color-counter-high-fill: #b36b2e;
  --shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
  --color-brand: #2d6d73;
  --color-brand-dark: #1d4e53;
  --color-brand-soft: #dcefed;
  --color-brand-pale: #eff7f5;
  --color-accent: #b66c42;
  --color-accent-soft: #faeee6;
  --color-text: #25343a;
  --color-title: #183137;
  --color-muted: #607279;
  --color-border: #d4e0df;
  --color-background: #f6f8f7;
  --color-background-soft: #edf3f1;
  --color-surface: #ffffff;
  --color-on-brand: #ffffff;
  --color-brand-typo: #28666c;
  --color-logo-teal: #3c8a96;
  --color-logo-ink: #24535b;
  --color-panel-inverse: #183137;
  --color-on-panel-inverse: #f6f8f7;
  --color-counter-low-text: #8c6f3a;
  --color-counter-low-fill: #c9a46a;
  --color-counter-high-text: #b36b2e;
  --color-counter-high-fill: #c17a3f;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.55;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; }
a { color: var(--color-brand-typo); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--color-brand-dark); }

h1, h2, h3 {
  color: var(--color-title);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  font-weight: 700;
}
h1 { font-size: clamp(1.6rem, 4vw, 2.15rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
p { margin: 0 0 var(--space-4); }
.muted { color: var(--color-muted); }
.lead { font-size: 1.1rem; color: var(--color-muted); }

.container {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}
.container--padded {
  padding-top: var(--space-5);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  min-height: var(--header-h);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
}
.site-header__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}
.site-header__space {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  max-width: min(100%, 16rem);
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: right;
}
.site-header__space--link {
  text-decoration: none;
  border-radius: var(--radius);
  padding: 0.3rem 0.4rem;
}
.site-header__space--link:hover {
  background: var(--color-brand-pale);
  color: inherit;
}
.site-header__space-label {
  font-weight: 650;
  color: var(--color-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}
.site-header__space-tag {
  display: inline-flex;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-brand-typo);
  font-weight: 600;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.site-header__context-menu {
  position: relative;
  min-width: 0;
  max-width: min(100%, 15rem);
}
.site-header__context-menu summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-height: 2.4rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  list-style: none;
}
.site-header__context-menu summary::-webkit-details-marker { display: none; }
.site-header__context-menu summary::after {
  content: "⌄";
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.15s var(--ease);
}
.site-header__context-menu[open] summary {
  border-color: var(--color-brand);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--color-brand-pale);
}
.site-header__context-menu[open] summary::after { transform: rotate(180deg); }
.site-header__context-menu summary:focus-visible,
.site-header__context-menu:focus-within summary {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 16%, transparent);
}
.site-header__context-kind {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 650;
  flex-shrink: 0;
}
.site-header__context-popover {
  position: absolute;
  z-index: 70;
  top: calc(100% - 1px);
  right: 0;
  width: max-content;
  min-width: min(17rem, calc(100vw - 2rem));
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.35rem;
  border: 1px solid var(--color-brand);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.site-header__context-popover form { margin: 0; }
.site-header__context-option {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: calc(var(--radius) - 0.15rem);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.site-header__context-option:hover,
.site-header__context-option:focus-visible { background: var(--color-brand-pale); color: var(--color-title); }
.site-header__context-option.is-current { background: var(--color-brand-soft); color: var(--color-title); }
.site-header__context-option small { color: var(--color-muted); font-size: 0.76rem; }
.site-header__context-manage {
  display: block;
  margin: 0.25rem;
  padding: 0.55rem 0.4rem 0.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-brand-typo);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
}
.site-header__context-manage:hover { color: var(--color-brand-dark); }
.site-header__activity-context {
  max-width: min(100%, 14rem);
}
.site-header__activity-context .site-header__space-label {
  max-width: 8.5rem;
}
.site-header__app-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.site-header__search {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.site-header__search input {
  width: clamp(10rem, 18vw, 16rem);
  min-height: 2.5rem;
  padding: 0.35rem 4.1rem 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.8rem;
}
.site-header__search button {
  position: absolute;
  inset-block: 1px;
  right: 1px;
  display: grid;
  place-items: center;
  width: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.site-header__search button:hover { background: var(--color-brand-soft); color: var(--color-brand-typo); }
.site-header__search button svg { display: block; }
.site-header__search input:focus-visible,
.site-header__search button:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-brand) 24%, transparent); outline-offset: 1px; }
.site-header__app-link {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
}
.site-header__app-link:hover,
.site-header__app-link:focus-visible {
  border-color: var(--color-brand);
  background: var(--color-brand-pale);
  color: var(--color-brand-typo);
}
.logout-form {
  display: inline;
  margin: 0;
}
.logout-form button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: inherit;
}
.logout-form button.site-header__app-link {
  padding: 0.35rem 0.65rem;
}
.site-header__signup-cart {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.05rem;
  min-height: 2.5rem;
  max-width: min(100%, 12.5rem);
  padding: 0.25rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, var(--color-border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-brand-pale) 55%, var(--color-surface));
  line-height: 1.15;
  text-align: right;
}
.site-header__signup-cart-plan {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.site-header__signup-cart-fee {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.35rem;
}
.tabs__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.95rem;
}
.tabs__link:hover {
  color: var(--color-brand-typo);
  background: var(--color-brand-soft);
}
.tabs__link.is-active {
  color: var(--color-on-brand);
  background: var(--color-brand);
}
.tabs__count {
  display: inline-flex;
  min-width: 1.4rem;
  justify-content: center;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  color: var(--color-title);
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1.2;
  min-width: 0;
}

.site-logo:hover { color: var(--color-brand-typo); }

.site-logo img {
  width: auto;
  max-width: 2.75rem;
  height: 2.75rem;
  display: block;
  object-fit: contain;
}

/* Header : logo-compact (marge haute dans le SVG pour les ascendantes) */
.site-logo--header img {
  width: auto;
  height: 2.85rem;
  max-width: min(72vw, 14rem);
  max-height: 2.85rem;
}
.site-logo__mobile-mark {
  display: none !important;
}
@media (min-width: 36rem) {
  .site-logo--header img {
    height: 3.35rem;
    max-height: 3.35rem;
    max-width: min(42vw, 16rem);
  }
}
@media (min-width: 48rem) {
  .site-logo--header img {
    height: 3.6rem;
    max-height: 3.6rem;
    max-width: 17.5rem;
  }
}

.site-logo__text {
  display: none;
}
.site-logo__text--hidden,
.site-logo__text[hidden] {
  display: none !important;
}

@media (min-width: 36rem) {
  .site-logo:not(.site-logo--header) .site-logo__text:not(.site-logo__text--hidden):not([hidden]) {
    display: inline;
  }
}

.auth-logo-wrap {
  text-align: center;
  margin: 0 0 var(--space-4);
}

.site-logo--auth {
  justify-content: center;
  margin-bottom: 0;
}

.site-logo--auth .site-logo__text {
  display: none !important;
}

/* Wordmark large (1000×408) — sans texte à côté */
.site-logo--auth img {
  width: auto;
  height: auto;
  max-width: min(100%, 16rem);
  max-height: 5.5rem;
  object-fit: contain;
}
@media (min-width: 36rem) {
  .site-logo--auth img {
    max-width: 18rem;
    max-height: 6.25rem;
  }
}

/* Wordmark « La facture éCauxLogique » — graisses/couleurs calquées sur logo.svg */
@font-face {
  font-family: 'DejaVu Sans';
  src: url('../fonts/DejaVuSans-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans';
  src: url('../fonts/DejaVuSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.site-brand {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem;
  text-decoration: none;
  line-height: 1.2;
  color: inherit;
  white-space: nowrap;
}
.site-footer a.site-brand {
  color: inherit;
  text-decoration: none;
}
.site-brand--footer {
  margin-bottom: var(--space-3);
}
.site-brand__product,
.site-footer .site-brand__product {
  font-family: 'DejaVu Sans', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 200;
  color: var(--color-logo-ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-brand__la {
  font-weight: 200;
  color: var(--color-logo-ink);
}
.site-brand__facture {
  font-weight: 700;
  color: var(--color-logo-ink);
}
.site-brand__mark {
  font-family: 'IndieFlower', cursive;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.2;
}
.site-brand__accent {
  color: var(--color-logo-teal);
}
.site-brand__ink {
  color: var(--color-logo-ink);
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}
.main-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
/* Sur desktop, ignorer l’attribut hidden (réservé au menu mobile) */
@media (min-width: 48.01rem) {
  .main-nav[hidden] {
    display: flex !important;
  }
  /* 50px uniquement entre logo et le bloc des entrées de menu */
  .main-nav {
    margin-left: 50px;
  }
  .main-nav__links a,
  .main-nav__links .logout-form button {
    font-size: 1rem;
  }
}

.main-nav a,
.main-nav .logout-form button {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.main-nav a:hover,
.main-nav a[aria-current="page"],
.main-nav .logout-form button:hover {
  color: var(--color-brand-typo);
}
.main-nav a[aria-current="page"] {
  font-weight: 700;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-left: auto;
  min-width: 0;
  flex-shrink: 1;
}
/* Démo + Souscrire : toujours à droite (visiteurs), juste avant le toggle thème */
.header-actions__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  min-height: 2.5rem;
  cursor: pointer;
}

@media (max-width: 48rem) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .main-nav[hidden] { display: none; }
  .main-nav:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
    gap: var(--space-3);
  }
  .main-nav:not([hidden]) .main-nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .site-header { position: relative; }
  .site-header__inner { flex-wrap: nowrap; }
  /* Le favicon remplace le cartouche de marque sur mobile : les actions restent lisibles. */
  .site-header__brand,
  .site-logo--header {
    flex: 0 0 2.25rem;
  }
  .site-logo--header .site-logo__img {
    display: none !important;
  }
  .site-logo--header .site-logo__mobile-mark {
    display: block !important;
    width: 2.25rem;
    max-width: none;
    height: 2.25rem;
    max-height: none;
  }
  .site-header__space-label { max-width: 7.5rem; }
  .header-actions { gap: var(--space-2); }

  /* Dashboard mobile : une barre d'application dense, sans navigation publique redondante. */
  .page-dashboard {
    --header-h: 3.5rem;
  }
  .page-dashboard .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .page-dashboard .site-header__inner {
    gap: var(--space-2);
  }
  .page-dashboard .site-header__brand,
  .page-dashboard .site-logo--header {
    flex: 0 0 2.25rem;
  }
  .page-dashboard .site-logo--header .site-logo__img {
    display: none !important;
  }
  .page-dashboard .site-logo--header .site-logo__mobile-mark {
    display: block !important;
    width: 2.25rem;
    max-width: none;
    height: 2.25rem;
    max-height: none;
  }
  .page-dashboard .nav-toggle,
  .page-dashboard .main-nav {
    display: none !important;
  }
  .page-dashboard .header-actions {
    gap: var(--space-2);
  }
  .page-dashboard .site-header__space {
    max-width: min(12rem, calc(100vw - 9rem));
  }
  .page-dashboard .site-header__space-label {
    max-width: min(10rem, calc(100vw - 10.5rem));
  }
  .page-dashboard .theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }
  .page-dashboard .site-header__app-actions {
    display: none;
  }
  .page-dashboard .site-header__context-menu {
    max-width: min(10.5rem, calc(100vw - 15rem));
  }
  .page-dashboard .site-header__tenant-context {
    max-width: min(12rem, calc(100vw - 9rem));
  }
  .page-dashboard .site-header__context-menu summary {
    min-height: 2.25rem;
    padding-inline: 0.4rem;
  }
  .page-dashboard .site-header__context-kind {
    display: none;
  }
  .page-dashboard .site-header__context-popover {
    max-width: calc(100vw - 1rem);
  }
}

/* Une session applicative ne mélange pas la navigation publique et les parcours métier. */
@media (min-width: 48rem) {
  .page-dashboard .nav-toggle,
  .page-dashboard .main-nav {
    display: none !important;
  }
}

/* Toggle thème — pattern éCauxLogique (icônes CSS centrées 18×18 dans 44×44) */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-title);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.theme-toggle__icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

/* Lune (mode clair → inviter au sombre) */
.theme-toggle__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset -5px -2px 0 0 var(--color-title);
}

/* Soleil (mode sombre effectif → inviter au clair) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon::before {
    box-shadow: none;
    background: transparent;
    border: 2px solid var(--color-title);
    border-radius: 50%;
  }
  :root:not([data-theme="light"]) .theme-toggle__icon::after {
    content: "";
    position: absolute;
    inset: -4px;
    background:
      linear-gradient(var(--color-title), var(--color-title)) center top / 2px 4px no-repeat,
      linear-gradient(var(--color-title), var(--color-title)) center bottom / 2px 4px no-repeat,
      linear-gradient(var(--color-title), var(--color-title)) left center / 4px 2px no-repeat,
      linear-gradient(var(--color-title), var(--color-title)) right center / 4px 2px no-repeat,
      linear-gradient(var(--color-title), var(--color-title)) 3px 3px / 3px 2px no-repeat,
      linear-gradient(var(--color-title), var(--color-title)) calc(100% - 3px) 3px / 3px 2px no-repeat,
      linear-gradient(var(--color-title), var(--color-title)) 3px calc(100% - 3px) / 3px 2px no-repeat,
      linear-gradient(var(--color-title), var(--color-title)) calc(100% - 3px) calc(100% - 3px) / 3px 2px no-repeat;
  }
}

:root[data-theme="dark"] .theme-toggle__icon::before {
  box-shadow: none;
  background: transparent;
  border: 2px solid var(--color-title);
  border-radius: 50%;
}

:root[data-theme="dark"] .theme-toggle__icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  background:
    linear-gradient(var(--color-title), var(--color-title)) center top / 2px 4px no-repeat,
    linear-gradient(var(--color-title), var(--color-title)) center bottom / 2px 4px no-repeat,
    linear-gradient(var(--color-title), var(--color-title)) left center / 4px 2px no-repeat,
    linear-gradient(var(--color-title), var(--color-title)) right center / 4px 2px no-repeat,
    linear-gradient(var(--color-title), var(--color-title)) 3px 3px / 3px 2px no-repeat,
    linear-gradient(var(--color-title), var(--color-title)) calc(100% - 3px) 3px / 3px 2px no-repeat,
    linear-gradient(var(--color-title), var(--color-title)) 3px calc(100% - 3px) / 3px 2px no-repeat,
    linear-gradient(var(--color-title), var(--color-title)) calc(100% - 3px) calc(100% - 3px) / 3px 2px no-repeat;
}

:root[data-theme="light"] .theme-toggle__icon::after {
  content: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

/* CTA principal : fond bleu soutenu + texte blanc (lisible clair et sombre) */
.btn-primary {
  background: #1a4f7a;
  color: #ffffff;
}
.btn-primary:hover {
  background: #0f334f;
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary {
    background: #2a6fa8;
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .btn-primary:hover {
    background: #3d7eb0;
    color: #ffffff;
  }
}
:root[data-theme="dark"] .btn-primary {
  background: #2a6fa8;
  color: #ffffff;
}
:root[data-theme="dark"] .btn-primary:hover {
  background: #3d7eb0;
  color: #ffffff;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--color-brand);
  color: var(--color-brand-typo);
}

/* Second CTA (ex. Contact) : fond distinct du primaire */
.btn-accent {
  background: #a8d3fe;
  color: #0f1a24;
  border-color: #8fc4f5;
}
.btn-accent:hover {
  background: #8fc4f5;
  color: #0f1a24;
}
:root[data-theme="dark"] .btn-accent {
  background: #a8d3fe;
  color: #0f1a24;
}
:root[data-theme="dark"] .btn-accent:hover {
  background: #c2e0ff;
  color: #0f1a24;
}

.btn-small {
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.9rem;
}

.main-nav .demo-enter-form--nav,
.header-actions .demo-enter-form--nav {
  display: inline-flex;
  margin: 0;
}
.main-nav .demo-enter-form--nav .hp-field,
.header-actions .demo-enter-form--nav .hp-field {
  display: none;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.form-stack--wide { max-width: 40rem; }
.form-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.form-fieldset legend {
  font-weight: 600;
  padding: 0 var(--space-2);
}
.checkbox-inline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: 500;
}
.checkbox-inline input {
  margin-top: 0.25rem;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.admin-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  background: var(--color-background-soft);
}
.admin-details summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.form-actions--spaced { margin-top: var(--space-4); }

.admin-console-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (min-width: 56rem) {
  .admin-console-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

.admin-pre {
  max-height: 28rem;
  overflow: auto;
  padding: var(--space-3);
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.card--warning {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-soft) 55%, var(--color-surface));
}

/* Bandeau mode admin Production / Bac à sable */
.admin-mode-banner {
  border-bottom: 1px solid var(--color-border);
}
.admin-mode-banner--production {
  background: var(--color-brand-pale);
  color: var(--color-brand-dark);
}
.admin-mode-banner--sandbox {
  background: var(--color-warning-soft);
  color: #73502a;
}
[data-theme="dark"] .admin-mode-banner--production {
  background: #1a2f3d;
  color: #a8d4ef;
}
[data-theme="dark"] .admin-mode-banner--sandbox {
  background: #332a1c;
  color: #e8cea0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-mode-banner--production {
    background: #1a2f3d;
    color: #a8d4ef;
  }
  :root:not([data-theme="light"]) .admin-mode-banner--sandbox {
    background: #332a1c;
    color: #e8cea0;
  }
}
.admin-mode-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.55rem var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.admin-mode-banner__text {
  margin: 0;
  font-size: 0.92rem;
}
.admin-mode-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
}
.admin-mode-toggle__track {
  width: 2.6rem;
  height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 25%, transparent);
  position: relative;
  flex-shrink: 0;
}
.admin-mode-toggle__thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: currentColor;
  transition: transform 0.15s var(--ease);
}
.admin-mode-banner--sandbox .admin-mode-toggle__thumb {
  transform: translateX(1.2rem);
}

.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.data-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  margin: 0;
}

/* Modal générique (admin — suppression compte SuperPDP) */
body.modal-open {
  overflow: hidden;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal[hidden] {
  display: none !important;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 36, 0.55);
  border: 0;
  cursor: pointer;
}
.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.modal__title {
  margin: 0;
  font-size: 1.2rem;
}
.modal__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}
.modal__hint {
  margin: 0;
  font-size: 0.88rem;
}
.modal__form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-2);
}

/* ——— Accueil public ——— */
.home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.75rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(80% 75% at 8% 5%, color-mix(in srgb, var(--color-brand-soft) 72%, transparent), transparent 68%),
    radial-gradient(55% 70% at 100% 18%, color-mix(in srgb, var(--color-accent-soft) 58%, transparent), transparent 72%),
    var(--color-background);
}
.home-hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.home-hero__copy {
  max-width: 42rem;
}
.home-kicker {
  display: inline-flex;
  margin: 0 0 var(--space-3);
  padding: 0.3rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand-pale) 76%, var(--color-surface));
  color: var(--color-brand-typo);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.065em;
  line-height: 1.2;
  text-transform: uppercase;
}
.home-hero h1 {
  max-width: 15ch;
  margin-bottom: var(--space-4);
  font-size: clamp(2.05rem, 6vw, 3.65rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.home-hero__copy .lead {
  max-width: 39rem;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.6;
}
.home-hero__actions {
  margin: var(--space-5) 0 0;
}
.home-hero__text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding-inline: 0.25rem;
  font-weight: 650;
  text-decoration: none;
}
.home-hero__text-link::after {
  content: "→";
  margin-left: 0.45rem;
  transition: transform 0.18s var(--ease);
}
.home-hero__text-link:hover::after {
  transform: translateX(0.2rem);
}
.home-hero__proofs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 600;
}
.home-hero__proofs li::before {
  content: "✓";
  margin-right: 0.4rem;
  color: var(--color-brand-typo);
}
.home-offer {
  position: relative;
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
  border-radius: calc(var(--radius-lg) + 0.35rem);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-brand-pale));
  box-shadow: 0 1.5rem 4rem rgba(29, 78, 83, 0.14);
}
.home-offer::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--color-brand-soft) 40%, transparent);
}
.home-offer__head {
  padding: var(--space-2) var(--space-2) var(--space-4);
}
.home-offer__head h2 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: -0.025em;
}
.home-offer__head p:last-child {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}
.home-offer__eyebrow {
  margin-bottom: 0.35rem;
  color: var(--color-brand-typo);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.home-offer__plans {
  display: grid;
  gap: var(--space-3);
}
.home-offer-plan {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.home-offer-plan--featured {
  border-color: color-mix(in srgb, var(--color-brand) 48%, var(--color-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand-pale) 75%, var(--color-surface)), var(--color-surface));
  box-shadow: inset 3px 0 0 var(--color-brand);
}
.home-offer-plan--premium {
  border-color: color-mix(in srgb, #d4af37 48%, var(--color-border));
  background: linear-gradient(135deg, color-mix(in srgb, #f8ecd2 42%, var(--color-surface)), var(--color-surface));
  box-shadow: inset 3px 0 0 #d4af37;
}
.home-offer-plan__hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.home-offer-plan__hit:hover,
.home-offer-plan__hit:focus-visible {
  outline: none;
}
.home-offer-plan:has(.home-offer-plan__hit:hover),
.home-offer-plan:has(.home-offer-plan__hit:focus-visible) {
  border-color: color-mix(in srgb, var(--color-brand) 55%, var(--color-border));
  box-shadow: 0 0.55rem 1.35rem color-mix(in srgb, var(--color-brand) 14%, transparent);
  transform: translateY(-1px);
}
.home-offer-plan__hit:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.home-offer-plan__identity {
  min-width: 0;
}
.home-offer-plan__title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}
.home-offer-plan__title-line h3 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--color-title);
}
.home-offer-plan__badge {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.045em;
  line-height: 1.35;
  text-transform: uppercase;
}
.home-offer-plan__badge--premium {
  border: 1px solid #b8862e;
  background: linear-gradient(135deg, #f5dfa0, #c9963a);
  color: #302006;
}
.home-offer-plan__audience,
.home-offer-plan__volume,
.home-offer-plan__price,
.home-offer-plan__overage {
  margin: 0;
}
.home-offer-plan__audience {
  margin-top: 0.25rem;
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}
.home-offer-plan__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.55rem 1.25rem;
}
.home-offer-plan__volume,
.home-offer-plan__price {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem;
  line-height: 1.2;
  white-space: nowrap;
}
.home-offer-plan__price strong {
  color: var(--color-title);
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.home-offer-plan__volume strong {
  color: var(--color-title);
  font-size: 1.4rem;
  line-height: 1.1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.home-offer-plan__unit {
  color: var(--color-muted);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}
.home-offer-plan__volume .home-offer-plan__unit {
  font-size: 0.665rem;
}
.home-offer-plan__volume {
  margin-left: auto;
}
.home-offer-plan__overage {
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}
.home-offer-plan__cta {
  color: var(--color-brand-typo);
  font-size: 0.86rem;
  font-weight: 700;
}
.home-offer-plan__cta::after {
  content: " →";
}
.home-offer__footnote,
.home-offer__vat {
  margin: var(--space-3) var(--space-2) 0;
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}
.home-offer__activation {
  margin: var(--space-4) var(--space-2) 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, var(--color-border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-brand-pale) 55%, var(--color-surface));
  color: var(--color-title);
  font-size: 0.95rem;
  line-height: 1.45;
}
.home-offer__activation strong {
  font-size: 1.15rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.home-offer__activation a {
  color: var(--color-brand-typo);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}
.home-offer__vat {
  margin-top: 0.35rem;
}
@media (min-width: 36rem) {
  .home-offer {
    padding: var(--space-5);
  }
  .home-offer-plan__hit {
    grid-template-columns: minmax(0, 1.4fr) auto;
    grid-template-areas:
      "identity metrics"
      "overage cta";
    /*column-gap: var(--space-4);*/
    row-gap: 0.45rem;
    align-items: center;
  }
  .home-offer-plan__identity { grid-area: identity; }
  .home-offer-plan__metrics {
    grid-area: metrics;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
  }
  .home-offer-plan__volume { margin-left: 0; }
  .home-offer-plan__overage {
    grid-area: overage;
    align-self: start;
  }
  .home-offer-plan__cta {
    grid-area: cta;
    justify-self: end;
    align-self: start;
  }
}
@media (min-width: 60rem) {
  .home-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(29rem, 0.98fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.home-section-intro {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}
.home-section-intro h2 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.home-section-intro .lead {
  margin: 0;
}
.home-section-intro--center {
  text-align: center;
}
.home-section-intro--center .home-kicker {
  justify-content: center;
}
.home-included__grid {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-included__grid li {
  position: relative;
  display: grid;
  gap: 0.25rem;
  min-height: 6rem;
  padding: var(--space-4) var(--space-4) var(--space-4) 3.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.home-included__grid li::before {
  content: "✓";
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-brand-soft);
  color: var(--color-brand-typo);
  font-weight: 800;
}
.home-included__grid strong {
  color: var(--color-title);
}
.home-included__grid span {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
@media (min-width: 40rem) {
  .home-included__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .home-included__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-benefits__grid {
  display: grid;
  gap: var(--space-4);
}
.home-benefit-card {
  position: relative;
  min-height: 15rem;
  padding: var(--space-6) var(--space-5) var(--space-5);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) + 0.15rem);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.home-benefit-card::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-brand-soft) 55%, transparent);
}
.home-benefit-card__number {
  display: block;
  margin-bottom: var(--space-5);
  color: var(--color-brand-typo);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.home-benefit-card h3 {
  margin-bottom: var(--space-3);
  font-size: 1.25rem;
}
.home-benefit-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-muted);
}
@media (min-width: 48rem) {
  .home-benefits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-growth__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.home-growth__intro h2 {
  max-width: 18ch;
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.home-growth__cards {
  display: grid;
  gap: var(--space-4);
}
.home-growth-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.home-growth-card--solo {
  border-left: 4px solid var(--color-brand);
}
.home-growth-card--pro {
  border-left: 4px solid #d4af37;
}
.home-growth-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.home-growth-card__head h3 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--color-title);
}
.home-growth-card__price,
.home-growth-card__volume {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  white-space: nowrap;
}
.home-growth-card__price strong,
.home-growth-card__volume strong {
  color: var(--color-title);
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.home-growth-card__price span,
.home-growth-card__volume span {
  color: var(--color-muted);
  font-size: 0.95rem;
  font-weight: 600;
}
.home-growth-card__volume {
  margin: 0 0 var(--space-4);
}
.home-growth-card ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.15rem;
  color: var(--color-muted);
  font-size: 0.92rem;
}
@media (min-width: 52rem) {
  .home-growth__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 7vw, 6rem);
  }
}

.home-compatible__panel {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) + 0.2rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-brand-soft) 58%, var(--color-surface)), var(--color-surface));
  box-shadow: var(--shadow);
}
.home-compatible__hit {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.home-compatible__hit:hover,
.home-compatible__hit:focus-visible { color: inherit; }
.home-compatible__hit:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 0.35rem;
  border-radius: var(--radius-lg);
}
.home-compatible__visual {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #ffffff;
}
.home-compatible__visual img {
  display: block;
  width: min(100%, 20rem);
}
.home-compatible__copy h2 {
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}
.home-compatible__copy p:not(.home-kicker) {
  color: var(--color-muted);
}
.home-compatible__copy a {
  font-weight: 650;
}
.home-compatible__cta {
  display: inline-block;
  color: var(--color-brand-typo);
  font-weight: 750;
}
.home-compatible__cta::after { content: " →"; }
@media (min-width: 48rem) {
  .home-compatible__hit {
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-6);
  }
  .home-compatible__panel { padding: var(--space-6); }
}

.home-final {
  padding-bottom: 0;
}
.home-final__panel {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6) var(--space-5);
  border-radius: calc(var(--radius-lg) + 0.25rem);
  background: var(--color-panel-inverse);
  box-shadow: 0 1.2rem 3rem rgba(24, 49, 55, 0.2);
}
.home-final__panel h2,
.home-final__panel p {
  color: var(--color-on-panel-inverse);
}
.home-final__panel .home-kicker {
  border-color: color-mix(in srgb, var(--color-on-panel-inverse) 20%, transparent);
  background: color-mix(in srgb, var(--color-on-panel-inverse) 10%, transparent);
  color: var(--color-on-panel-inverse);
}
.home-final__panel h2 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.45rem, 4vw, 2rem);
  letter-spacing: -0.02em;
}
.home-final__panel p:last-child {
  margin: 0;
  opacity: 0.82;
}
.home-final__actions {
  margin: 0;
}
.home-final__actions .btn-secondary {
  border-color: color-mix(in srgb, var(--color-on-panel-inverse) 35%, transparent);
}
@media (min-width: 48rem) {
  .home-final__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-8);
  }
  .home-final__actions {
    justify-content: flex-end;
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}

.card-list {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 40rem) {
  .card-list--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.section {
  padding: var(--space-6) 0;
  background: var(--section-bg);
}
.section:nth-of-type(even) {
  --section-bg: var(--color-background-soft);
}

.site-main { min-height: 55vh; padding-bottom: var(--space-8); }

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-top: var(--space-8);
  color: var(--color-muted);
  font-size: 0.92rem;
}
.site-footer a { color: var(--color-muted); }
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--container-padding, 1rem) var(--space-8);
  text-align: center;
}
.site-footer__brand {
  margin: 0 0 var(--space-4);
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  font-size: 0.875rem;
}
.site-footer__nav a {
  text-decoration: none;
  color: var(--color-muted);
}
.site-footer__nav a:hover {
  color: var(--color-brand, var(--color-text));
}
.site-footer__copyright {
  margin: var(--space-4) 0 0;
  font-size: 0.88rem;
  color: var(--color-text);
  font-weight: 600;
}
.site-footer__credit {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.flash-stack {
  width: min(100% - 2rem, var(--max-width));
  margin: var(--space-4) auto 0;
  display: grid;
  gap: var(--space-2);
}
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.flash--success { background: var(--color-success-soft); }
.flash--error { background: var(--color-danger-soft); color: var(--color-danger); }
.flash--info { background: var(--color-brand-soft); }

.form-stack {
  display: grid;
  gap: var(--space-4);
  max-width: 28rem;
}
.form-stack--compact {
  gap: var(--space-3);
  max-width: none;
}
.form-grid-2 {
  max-width: none;
}
@media (min-width: 40rem) {
  .form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-3);
  }
  .form-field--span-2 { grid-column: 1 / -1; }
}
.invoice-form--dense .form-hint { margin-top: 0.15rem; font-size: 0.8rem; }
.invoice-form--dense .doc-options { margin: var(--space-3) 0; }
.invoice-form--dense .lines-editor { gap: var(--space-2); margin-bottom: var(--space-3); }
.invoice-form--dense .line-row { padding: var(--space-2); gap: var(--space-2); }
.invoice-form-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.lines-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
}
.lines-toolbar h2 { margin: 0; }
.price-entry-toggle { font-weight: 600; font-size: 0.9rem; }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.autosave-status { min-height: 1.2em; font-size: 0.85rem; }
.workflow-leave-banner {
  border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-brand-pale) 60%, var(--color-surface));
  margin-bottom: var(--space-4);
}
.workflow-leave-banner h2 { margin-bottom: var(--space-2); font-size: 1.1rem; }
.workflow-steps--simple {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .workflow-steps--simple {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.workflow-tech-details > summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: var(--space-3);
}
.workflow-tech-details > summary::-webkit-details-marker { display: none; }
.card--info { /* alias soft brand card */ }
.form-field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  align-items: stretch;
}
.form-field label { font-weight: 600; font-size: 0.95rem; }
.form-required {
  color: var(--color-danger, #c62828);
  font-weight: 700;
  margin-left: 0.15em;
}
/* Socle commun des zones de saisie (texte, nombre, date, liste, zone de texte ;
   cases, boutons radio et fichiers ont leur propre rendu). L’aspect — arrondi,
   bordure, relief, focus, flèche des listes — est défini une seule fois ici,
   avec une spécificité nulle (:where) pour que tout style local (filtres
   compacts, barre de recherche, cellules de tableau) continue de primer. */
:where(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]),
  select,
  textarea
) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2.6rem;
  padding: 0.55rem 0.85rem;
  font: inherit;
  line-height: 1.35;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-field);
  box-shadow: var(--field-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
:where(input, select, textarea)::placeholder {
  color: var(--color-muted);
  opacity: 0.75;
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]),
  select,
  textarea
):where(:hover:not(:disabled, :focus)) {
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]),
  select,
  textarea
):where(:focus) {
  outline: 2px solid transparent; /* reste visible en contraste élevé */
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]),
  select,
  textarea
):where(:disabled, [readonly]) {
  color: var(--color-muted);
  background-color: var(--color-background-soft);
  box-shadow: none;
  cursor: not-allowed;
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]),
  select,
  textarea
):where([aria-invalid="true"]) {
  border-color: var(--color-danger);
}
:where(textarea) {
  min-height: 5.5rem;
  resize: vertical;
}
/* Liste déroulante : flèche dessinée en CSS (aucune image, compatible CSP). */
:where(select:not([multiple], [size])) {
  appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 50%, calc(100% - 0.85rem) 50%;
  background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
  background-repeat: no-repeat;
}
:where(select:not([multiple], [size]):disabled) {
  cursor: not-allowed;
}
/* Champs dans une cellule de tableau : gabarit compact. */
:where(td, th) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select) {
  min-height: 2.25rem;
  padding-block: 0.3rem;
  padding-inline: 0.65rem;
  font-size: 0.9rem;
}
:where(td, th) :where(select:not([multiple], [size])) {
  padding-right: 2.1rem;
  background-position: calc(100% - 1rem) 50%, calc(100% - 0.65rem) 50%;
}
:where(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--color-brand);
}
:root[data-theme="dark"] :where(input, select, textarea) { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :where(input, select, textarea) { color-scheme: dark; }
}
/* Libellé qui enveloppe son champ (« Filtre <select> ») : libellé au-dessus,
   champ dessous, au lieu de coller les deux sur la même ligne. */
:where(label:has(> :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="hidden"]))) {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  font-size: 0.9rem;
  font-weight: 600;
}
/* Libellé + champ frères dans un .form-group (recherche, filtres). */
.form-group {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}
.form-group > label { margin: 0; font-size: 0.9rem; font-weight: 600; }
.form-group--wide { grid-column: 1 / -1; }
.form-field input,
.form-field select,
.form-field textarea { width: 100%; }
/* Évite l’étirement vertical des selects/inputs quand la cellule grille
   est plus haute (ex. échéance + chips à côté de « Nature de facturation »). */
.form-field > input,
.form-field > select {
  align-self: start;
  height: 2.6rem;
  min-height: 2.6rem;
}
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* CTA démo one-click (formulaire POST aligné sur les boutons) */
.demo-enter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-3);
  align-items: center;
}
.home-hero__actions.demo-enter-actions {
  /* Un peu plus d’air au retour à la ligne (mobile) */
  gap: var(--space-4) var(--space-4);
}
.demo-enter-form--inline {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}
.demo-enter-form .demo-challenge-field {
  margin-bottom: 0.75rem;
}
.demo-challenge-back {
  margin-top: 1rem;
}

.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
table.data th,
table.data td {
  text-align: left;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
table.data th { color: var(--color-muted); font-weight: 600; font-size: 0.85rem; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--color-brand-soft);
  color: var(--color-brand-typo);
}
.badge--draft { background: var(--color-background-soft); color: var(--color-muted); }
.badge--ready { background: var(--color-brand-soft); color: var(--color-brand-typo); }
.badge--issued, .badge--accepted, .badge--delivered, .badge--paid, .badge--converted {
  background: var(--color-success-soft);
}
.badge--sent, .badge--submitted, .badge--queued_for_pdp, .badge--document_ready, .badge--document_generating {
  background: var(--color-brand-soft);
  color: var(--color-brand-typo);
}
.badge--rejected, .badge--technical_error, .badge--document_generation_failed, .badge--overdue {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.badge--partially_paid, .badge--expired { background: var(--color-warning-soft); }
.badge--unpaid, .badge--written_off { background: var(--color-background-soft); color: var(--color-muted); }
.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.actions-row--compact {
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.card--compact {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.card--compact p { margin: 0; }
.dl-grid {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
@media (min-width: 40rem) {
  .dl-grid { grid-template-columns: 10rem 1fr; }
}
.dl-grid dt { color: var(--color-muted); font-weight: 600; margin: 0; }
.dl-grid dd { margin: 0; }
.doc-lines { width: 100%; }
.table-link { color: inherit; text-decoration: none; font-weight: 600; }
.table-link:hover { color: var(--color-brand-typo); text-decoration: underline; }
.lines-editor { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.lines-editor-list { display: grid; gap: var(--space-3); }
.lines-catalog-picker {
  max-width: 36rem;
}
.lines-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.line-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.line-row.is-dragging {
  opacity: 0.55;
  border-color: var(--color-brand);
}
.line-drag-handle {
  cursor: grab;
  user-select: none;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.4rem 0.25rem;
  min-width: 1.75rem;
  min-height: 2.5rem;
}
.line-drag-handle:active { cursor: grabbing; }
.line-drag-handle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.line-body { min-width: 0; }
.line-fields--item {
  display: grid;
  gap: var(--space-2);
}
.line-fields--tax {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}
.line-fields--tax .form-field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}
.line-fields--tax select,
.line-fields--tax input[type="text"] {
  min-height: 2.5rem;
  width: 100%;
  font-size: 1rem;
}
.line-fields--markdown {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}
.line-field-description textarea { min-height: 5.5rem; resize: vertical; }
.line-markdown-preview {
  min-height: 2.75rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.line-markdown-preview:empty::before { content: "Aperçu du détail"; color: var(--color-text-muted); }
.line-markdown-preview ul { margin: var(--space-1) 0; padding-left: 1.25rem; }
.line-fields--text .line-field-text textarea {
  width: 100%;
  min-height: 3.5rem;
  resize: vertical;
}
.line-discount-pair {
  display: grid;
  grid-template-columns: minmax(3.75rem, 0.8fr) minmax(3rem, 1fr);
  gap: 0.35rem;
  align-items: center;
}
.line-discount-pair select {
  min-height: 2.5rem;
}
/* Colonnes étroites de l’éditeur : marges intérieures réduites pour garder
   la saisie lisible (quantité, remise, TVA). */
.line-fields :where(input, select) { padding-inline: 0.6rem; }
.line-fields select:not([multiple], [size]) {
  padding-right: 1.9rem;
  background-position: calc(100% - 0.95rem) 50%, calc(100% - 0.6rem) 50%;
}
.line-field-line-total .line-total-ht {
  margin: 0;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text);
}
.line-separator-preview {
  margin: 0.5rem 0;
  padding: 0.35rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.9rem;
}
.line-remove {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}
.doc-totals {
  margin-top: var(--space-4);
  margin-left: auto;
  width: min(100%, 18rem);
  display: grid;
  gap: 0.35rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-muted, var(--color-surface));
}
.doc-totals-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-variant-numeric: tabular-nums;
}
.doc-totals-grand {
  margin-top: 0.25rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--color-border);
  font-size: 1.05rem;
}
@media (min-width: 48rem) {
  .line-fields--item {
    grid-template-columns: minmax(0, 2fr) 0.65fr 0.9fr minmax(8.5rem, 1.15fr) 0.65fr 0.9fr;
    align-items: end;
  }
  .line-fields--tax {
    grid-template-columns: minmax(12rem, 0.9fr) 1.6fr;
    align-items: end;
  }
  .line-row {
    align-items: center;
  }
}
@media (min-width: 64rem) {
  .line-fields--item {
    grid-template-columns: minmax(0, 2.2fr) 0.7fr 1fr minmax(9rem, 1.25fr) 0.7fr 0.95fr;
  }
  .line-fields--tax {
    grid-template-columns: minmax(14rem, 0.85fr) 1.8fr;
  }
}
/* Lecture seule : texte libre & séparateurs */
.doc-lines tr.line-text td.doc-line-text {
  font-style: italic;
  color: var(--color-text-muted, var(--color-muted));
}
.doc-lines tr.line-separator td {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.doc-line-hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0.15rem 0;
}
.immutable-notice {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

/* Stats cliquables */
a.stat--link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
a.stat--link:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow);
}
a.stat--link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.stat__action {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-brand-typo);
}
.stat--ok .stat__value { color: var(--color-brand-typo); font-size: 1.25rem; }
.stat--warn .stat__value { color: var(--color-accent); font-size: 1.1rem; }

/* Checklist mise en route */
.checklist-card { margin-top: var(--space-5); }
.checklist-card--collapsible > summary.checklist-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.checklist-card--collapsible > summary.checklist-summary::-webkit-details-marker { display: none; }
.checklist-card--collapsible > summary.checklist-summary::after {
  content: "▼";
  color: var(--color-muted);
  font-size: 0.75rem;
}
.checklist-card--collapsible[open] > summary.checklist-summary::after { content: "▲"; }
.checklist-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
.checklist-header h2 { margin-bottom: var(--space-2); }
.checklist-progress-meta { text-align: right; }

.progress {
  height: 0.55rem;
  background: var(--color-background-soft);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.progress__bar {
  height: 100%;
  width: 0;
  background: var(--color-brand);
  border-radius: 999px;
  transition: width 0.25s var(--ease);
}
.progress--p0 .progress__bar { width: 0%; }
.progress--p5 .progress__bar { width: 5%; }
.progress--p10 .progress__bar { width: 10%; }
.progress--p15 .progress__bar { width: 15%; }
.progress--p20 .progress__bar { width: 20%; }
.progress--p25 .progress__bar { width: 25%; }
.progress--p30 .progress__bar { width: 30%; }
.progress--p35 .progress__bar { width: 35%; }
.progress--p40 .progress__bar { width: 40%; }
.progress--p45 .progress__bar { width: 45%; }
.progress--p50 .progress__bar { width: 50%; }
.progress--p55 .progress__bar { width: 55%; }
.progress--p60 .progress__bar { width: 60%; }
.progress--p65 .progress__bar { width: 65%; }
.progress--p70 .progress__bar { width: 70%; }
.progress--p75 .progress__bar { width: 75%; }
.progress--p80 .progress__bar { width: 80%; }
.progress--p85 .progress__bar { width: 85%; }
.progress--p90 .progress__bar { width: 90%; }
.progress--p95 .progress__bar { width: 95%; }
.progress--p100 .progress__bar { width: 100%; }
.progress__label { margin: var(--space-2) 0 var(--space-4); font-size: 0.9rem; }

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.checklist__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background-soft);
}
.checklist__item--done {
  background: var(--color-success-soft);
  border-color: color-mix(in srgb, var(--color-brand) 25%, var(--color-border));
}
.checklist__item--optional {
  border-style: dashed;
  background: var(--color-surface);
}
.checklist__item--optional .checklist__check {
  color: var(--color-muted);
  border-color: var(--color-muted);
}
.checklist__link {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
  min-height: 3.25rem;
}
.checklist__link:hover {
  background: color-mix(in srgb, var(--color-brand-soft) 50%, transparent);
}
.checklist__link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}
.checklist__check {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-on-brand);
  background: var(--color-surface);
}
.checklist__item--done .checklist__check {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
.checklist__body { display: grid; gap: 0.15rem; min-width: 0; }
.checklist__label { font-weight: 600; }
.checklist__item--done .checklist__label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.85;
}
.checklist__hint { font-size: 0.88rem; }
.checklist__cta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-brand-typo);
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .checklist__link {
    grid-template-columns: 2rem 1fr;
  }
  .checklist__cta {
    grid-column: 2;
  }
}

/* Pages légales publiques */
.legal-page__layout {
  display: grid;
  gap: var(--space-5);
}
.legal-page__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
}
.legal-page__nav a {
  color: var(--color-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.legal-page__nav a:hover,
.legal-page__nav a[aria-current="page"] {
  color: var(--color-brand-typo);
}
.legal-page__nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.legal-page__card {
  max-width: 52rem;
}
.legal-page__meta {
  margin: -0.35rem 0 var(--space-5);
  font-size: 0.88rem;
}
.legal h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: 1.12rem;
  color: var(--color-title);
}
.legal h2:first-of-type {
  margin-top: var(--space-2);
}
.legal p,
.legal li {
  margin-bottom: var(--space-3);
  line-height: 1.55;
}
.legal ul {
  padding-left: 1.25rem;
  margin: 0 0 var(--space-4);
}
.legal-cgv__service {
  margin-top: -0.35rem;
  margin-bottom: var(--space-5);
  color: var(--color-brand-typo);
  font-size: 1.1rem;
  font-weight: 700;
}

/* Solution compatible */
.compatible-hero {
  overflow: hidden;
  padding: clamp(2.25rem, 6vw, 5rem) 0 var(--space-8);
  background: radial-gradient(circle at 83% 12%, color-mix(in srgb, var(--color-brand-soft) 62%, transparent), transparent 32rem), linear-gradient(160deg, var(--color-surface), var(--color-background));
}
.compatible-hero__intro {
  max-width: 52rem;
  margin-bottom: var(--space-6);
  text-align: center;
}
.compatible-hero__intro .home-kicker { display: inline-flex; }
.compatible-hero__intro h1 {
  max-width: 22ch;
  margin: 0 auto var(--space-5);
  font-size: clamp(2rem, 5vw, 3.35rem);
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.compatible-hero__intro .lead { max-width: 43rem; margin: 0 auto; }
.compatible-hero__art {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
  border-radius: calc(var(--radius-lg) + 0.45rem);
  overflow: hidden;
  background: #fbfaf6;
  box-shadow: 0 1.2rem 3.25rem rgba(29, 78, 83, 0.14);
}
.compatible-hero__art img { display: block; width: 100%; }
.compatible-hero__art figcaption {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.78rem;
  text-align: center;
}
.compatible-promises { background: var(--color-surface); }
.compatible-promises__grid { display: grid; gap: var(--space-3); }
.compatible-promises article {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 0.4rem 1.2rem rgba(29, 78, 83, 0.06);
}
.compatible-promises h2 { margin-bottom: var(--space-2); font-size: 1.05rem; }
.compatible-promises p { margin: 0; color: var(--color-muted); font-size: 0.9rem; line-height: 1.5; }
.compatible-promises span {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  margin-bottom: var(--space-3);
  place-items: center;
  border-radius: 0.75rem;
  background: var(--color-brand-pale);
  color: var(--color-brand-typo);
  font-size: 1.5rem;
  font-weight: 800;
}
.compatible-clarity { padding-top: 0; }
.compatible-clarity__panel {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6) var(--space-5);
  border-radius: calc(var(--radius-lg) + 0.25rem);
  background: var(--color-panel-inverse);
  box-shadow: 0 1.2rem 3rem rgba(24, 49, 55, 0.2);
}
.compatible-clarity__panel h2,
.compatible-clarity__panel p { color: var(--color-on-panel-inverse); }
.compatible-clarity__panel h2 { font-size: clamp(1.45rem, 4vw, 2rem); }
.compatible-clarity__panel p:not(.home-kicker) { margin: 0; opacity: 0.86; }
.compatible-clarity__panel .home-kicker {
  border-color: color-mix(in srgb, var(--color-on-panel-inverse) 20%, transparent);
  background: color-mix(in srgb, var(--color-on-panel-inverse) 10%, transparent);
  color: var(--color-on-panel-inverse);
}
.compatible-clarity__panel .btn { justify-self: start; }
@media (min-width: 48rem) {
  .compatible-promises__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compatible-clarity__panel { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-6); }
  .compatible-clarity__panel .btn { justify-self: end; }
}
.site-footer__copyright .site-brand {
  vertical-align: baseline;
}
.site-footer__copyright .site-brand__product,
.site-footer__copyright .ecauxlogique {
  font-size: 1em;
}

/* Mentions légales (documents métier) */
.legal-mentions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.legal-mentions__title {
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}
.legal-mentions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.legal-mentions__item-title {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}
.legal-mentions__item-body {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.45;
}
.mention-preview { font-size: 0.85rem; margin-top: 0.2rem; }
.row-muted { opacity: 0.65; }
.template-hints { margin: 0; padding-left: 1.1rem; }
.template-hints li { margin-bottom: var(--space-3); }

/* Clés API — affichage one-shot */
.card--highlight {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated, var(--color-surface));
}
.token-once {
  display: block;
  word-break: break-all;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 0.35rem);
  font-size: 0.9rem;
}
.form-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.form-inline-row .form-field {
  flex: 1 1 12rem;
  margin-bottom: 0;
}
.form-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
}
.deposit-notice {
  margin-top: var(--space-3);
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--color-brand, #1a4f7a);
  background: var(--color-brand-soft, #eef5fa);
}
.template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.template-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.template-list__item {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.template-list__main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sortable (glisser-déposer) */
.sortable-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.sortable-item {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: grab;
}
.sortable-item.is-dragging {
  opacity: 0.7;
  border-color: var(--color-brand);
}
.sortable-handle {
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1.2;
  user-select: none;
  padding-top: 0.2rem;
}
.sortable-body { min-width: 0; }
.sortable-meta {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
@media (max-width: 48rem) {
  .sortable-item {
    grid-template-columns: 2rem 1fr;
  }
  .sortable-item .actions-row {
    grid-column: 1 / -1;
  }
}

/* Options document (cases à cocher) */
.doc-options {
  margin: var(--space-5) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.doc-options h2 { font-size: 1.1rem; margin-top: var(--space-4); }
.check-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}
.check-row {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) 0;
  cursor: pointer;
}
.check-row input { margin-top: 0.25rem; }
.check-row--center { align-items: center; }
.check-row--center input { margin-top: 0; }
.check-row__hint { display: block; font-size: 0.85rem; }

.doc-logo-wrap { margin: var(--space-3) 0; }
.doc-logo {
  max-width: 10rem;
  max-height: 5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}
.logo-upload__input,
input[type="file"] {
  width: 100%;
  padding: 0.3rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background-soft);
  color: var(--color-text);
  cursor: pointer;
}
.logo-upload__input:hover,
input[type="file"]:hover { border-color: var(--color-brand); }
.logo-upload__input:focus-visible,
input[type="file"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-brand) 20%, transparent); outline-offset: 2px; }
.logo-upload__input::file-selector-button,
input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: calc(var(--radius) - 0.1rem);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.logo-upload__input::file-selector-button:hover,
input[type="file"]::file-selector-button:hover { background: var(--color-brand-dark); }
.logo-upload__preview {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.logo-upload__preview img {
  width: auto;
  max-width: min(100%, 16rem);
  max-height: 8rem;
  object-fit: contain;
}
.logo-upload__preview figcaption { color: var(--color-muted); font-size: 0.85rem; }

.dash-layout {
  display: grid;
  gap: var(--space-5);
}
.page-dashboard .container {
  width: min(100% - 2rem, 82rem);
}
@media (min-width: 52rem) {
  .dash-layout {
    grid-template-columns: 15rem 1fr;
    align-items: start;
  }
  .dash-layout--no-nav {
    grid-template-columns: 1fr;
  }
}

/* Navigation espace : accès quotidiens et rubriques secondaires dépliables. */
.dash-nav-wrap {
  position: sticky;
  top: calc(var(--header-h) + 0.75rem);
  z-index: 30;
  max-height: calc(100dvh - var(--header-h) - 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dash-nav-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.dash-nav-toggle__hint {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-muted);
}
.dash-nav {
  align-content: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: none;
  gap: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
}
.dash-nav-wrap.is-open .dash-nav {
  display: grid;
}
.dash-nav-group {
  border: 0;
  margin: 0;
  padding: 0;
}
.dash-nav-group__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius);
  user-select: none;
}
.dash-nav-group__summary::-webkit-details-marker,
.dash-nav-create > summary::-webkit-details-marker { display: none; }
.dash-nav-group__summary::after {
  content: '▸';
  margin-left: auto;
  color: var(--color-muted);
}
.dash-nav-group[open] > .dash-nav-group__summary::after { content: '▾'; }
.dash-nav-group.has-active > .dash-nav-group__summary { color: var(--color-brand-typo); }
.dash-nav-group__links {
  display: grid;
  gap: 0.15rem;
  margin: 0.1rem 0 0.4rem 1.15rem;
  padding-left: 0.4rem;
  border-left: 1px solid var(--color-border);
}
.dash-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.48rem 0.65rem;
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 500;
}
.dash-nav-link__label { min-width: 0; overflow-wrap: anywhere; }
.dash-nav-link__count { margin-left: auto; flex: 0 0 auto; }
.dash-nav-link:hover,
.dash-nav-group__summary:hover { background: var(--color-brand-pale); color: var(--color-brand-typo); }
.dash-nav-link.is-active {
  background: var(--color-brand-soft);
  color: var(--color-brand-typo);
  box-shadow: inset 3px 0 var(--color-brand);
  font-weight: 650;
}
.dash-nav-icon,
.dash-nav .dash-list__icon {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.dash-nav-section { padding-bottom: 0.55rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--color-border); }
.dash-nav-section--personal { padding-top: 0.5rem; margin-top: 0.35rem; border-top: 1px solid var(--color-border); border-bottom: 0; }
.dash-nav-section--personal .dash-nav-link { color: var(--color-muted); }
.dash-nav-caption { margin: 0; padding: 0.35rem 0.65rem 0.4rem; color: var(--color-muted); font-size: 0.69rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.dash-nav-create { margin-bottom: 0.35rem; }
.dash-nav-create > summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem; border-radius: var(--radius); background: var(--color-brand); color: var(--color-on-brand); font-size: 0.86rem; font-weight: 600; cursor: pointer; list-style: none; }
.dash-nav-create > summary::after { content: '▾'; margin-left: auto; }
.dash-nav-create__links { display: grid; padding: 0.35rem; margin-top: 0.25rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.dash-nav-create__links a { padding: 0.5rem; border-radius: var(--radius); font-size: 0.85rem; text-decoration: none; color: var(--color-text); }
.dash-nav-create__links a:hover { background: var(--color-brand-soft); color: var(--color-brand-typo); }
.dash-nav-link__count {
  display: inline-flex;
  min-width: 1.35rem;
  justify-content: center;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}
.dash-nav-link.is-active .dash-nav-link__count {
  background: color-mix(in srgb, var(--color-brand) 18%, var(--color-surface));
  border-color: transparent;
  color: var(--color-brand-typo);
}

.activity-scope {
  display: grid;
  gap: .5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .8rem;
}

.activity-scope__choices {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  padding-left: .25rem;
}

/* Navigation mobile de l'espace : les parcours fréquents restent disponibles sans ouvrir un panneau. */
.dash-mobile-nav {
  display: none;
}

/* Desktop : panneau toujours visible, sticky latéral */
@media (min-width: 52rem) {
  .dash-nav-toggle {
    display: none;
  }
  .dash-nav {
    display: grid;
  }
  .dash-nav-wrap {
    /* reste sticky côté gauche */
  }
  .dash-nav-wrap.is-open .dash-nav {
    display: grid;
  }
}
@media (max-width: 51.99rem) {
  .dash-layout {
    gap: var(--space-3);
  }
  .dash-nav-wrap {
    position: sticky;
    top: var(--header-h);
    z-index: 35;
    max-height: none;
    gap: 0;
    margin-inline: -0.15rem;
    background: color-mix(in srgb, var(--color-background) 94%, transparent);
    backdrop-filter: blur(10px);
  }
  .dash-nav-toggle,
  .dash-nav {
    display: none !important;
  }
  .dash-mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 0.35rem 1rem rgba(29, 78, 83, 0.08);
  }
  .dash-mobile-nav--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dash-mobile-nav__link {
    display: flex;
    min-width: 0;
    min-height: 3.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    padding: 0.35rem 0.2rem;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    font-size: 0.64rem;
    font-weight: 650;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .dash-mobile-nav__link:hover,
  .dash-mobile-nav__link.is-active {
    color: var(--color-brand-typo);
    background: var(--color-brand-pale);
    border-bottom-color: var(--color-brand);
  }
  .dash-mobile-nav__link:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
  }
  .dash-mobile-nav__link--create {
    color: var(--color-on-brand);
    background: var(--color-brand);
    border-inline: 1px solid color-mix(in srgb, var(--color-brand-dark) 28%, var(--color-border));
  }
  .dash-mobile-nav__link--create:hover,
  .dash-mobile-nav__link--create.is-active {
    color: var(--color-on-brand);
    background: var(--color-brand-dark);
    border-bottom-color: var(--color-brand-dark);
  }
  .dash-mobile-nav__icon {
    display: block;
    width: 1.22rem;
    height: 1.22rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .dash-mobile-nav__more {
    position: relative;
    min-width: 0;
  }
  .dash-mobile-nav__more > summary {
    list-style: none;
    cursor: pointer;
  }
  .dash-mobile-nav__more > summary::-webkit-details-marker,
  .dash-mobile-nav__more > summary::marker {
    display: none;
    content: none;
  }
  .dash-mobile-nav__more-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.35rem);
    right: 0;
    display: none;
    width: min(20rem, calc(100vw - 2rem));
    max-height: calc(100dvh - var(--header-h) - 5.25rem);
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .dash-mobile-nav__more[open] > .dash-mobile-nav__more-panel {
    display: grid;
  }
  .dash-mobile-nav__more-panel a,
  .dash-mobile-nav__more-panel .dash-mobile-nav__logout {
    display: flex;
    min-width: 0;
    min-height: 2.45rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
  }
  .dash-mobile-nav__more-section {
    display: grid;
    gap: 0.1rem;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }
  .dash-mobile-nav__more-section:last-of-type {
    border-bottom: 0;
  }
  .dash-mobile-nav__more-section h2 {
    margin: 0;
    padding: 0.35rem 0.55rem 0.15rem;
    color: var(--color-muted);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .dash-mobile-nav__more-panel a:hover,
  .dash-mobile-nav__more-panel a[aria-current="page"],
  .dash-mobile-nav__more-panel .dash-mobile-nav__logout:hover {
    color: var(--color-brand-typo);
    background: var(--color-brand-pale);
  }
  .dash-mobile-nav__more-panel b {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: 0.72rem;
  }
  .dash-mobile-nav__logout-form {
    display: block;
    margin-top: 0.1rem;
  }
  .dash-mobile-nav__logout {
    display: flex;
    width: 100%;
    justify-content: center !important;
    margin-top: 0.1rem;
    border: 1px solid var(--color-border);
    color: var(--color-muted) !important;
  }
}
/* Pilotage : analyses identifiables et filtres compacts. */
.reporting-header { margin-bottom: var(--space-3); }
.reporting-header .dash-toolbar { margin-bottom: var(--space-2); }
.reporting-header h1 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.reporting-header__context { margin: 0 0 0.2rem; color: var(--color-muted); font-size: 0.8rem; }
.reporting-header__description { margin: var(--space-2) 0 0; }
.reporting-nav,
.reporting-detail-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); }
.reporting-nav a,
.reporting-detail-nav a { padding: 0.5rem 0.65rem; border-radius: var(--radius); text-decoration: none; font-size: 0.84rem; color: var(--color-muted); }
.reporting-nav a:hover,
.reporting-detail-nav a:hover { background: var(--color-brand-pale); color: var(--color-brand-typo); }
.reporting-nav a[aria-current="page"],
.reporting-detail-nav a[aria-current="page"] { color: var(--color-brand-typo); background: var(--color-brand-soft); font-weight: 650; box-shadow: inset 0 -2px var(--color-brand); }
.reporting-detail-nav { padding-top: 0.4rem; }
.reporting-filters { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); margin-bottom: var(--space-4); }
.reporting-filters__primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--space-2); align-items: end; }
.reporting-filters .form-field { min-width: 0; margin: 0; gap: 0.2rem; }
.reporting-filters label { font-size: 0.78rem; }
.reporting-filters input,
.reporting-filters select { width: 100%; min-width: 0; padding: 0.4rem 0.55rem; min-height: 2.4rem; font-size: 0.85rem; }
.reporting-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 2.4rem; }
.reporting-filters__actions a { font-size: 0.78rem; color: var(--color-muted); }
.reporting-filters__refinements { margin-top: var(--space-2); }
.reporting-filters__refinements > summary { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0; cursor: pointer; color: var(--color-brand-typo); font-size: 0.8rem; list-style: none; }
.reporting-filters__refinements > summary::-webkit-details-marker { display: none; }
.reporting-filters__refinements > summary::after { content: '▸'; margin-left: auto; }
.reporting-filters__refinements[open] > summary::after { content: '▾'; }
.reporting-filters__secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); align-items: end; padding: var(--space-2) 0; }
.reporting-filters__secondary > button { justify-self: start; }
.reporting-filters__applied,
.reporting-filters__dirty { font-size: 0.78rem; margin: 0.5rem 0 0; overflow-wrap: anywhere; color: var(--color-muted); }
.reporting-filters__dirty { color: var(--color-brand-typo); }
@media (max-width: 65rem) {
  .reporting-filters__primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reporting-filters__secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 32rem) {
  .reporting-filters__secondary { grid-template-columns: minmax(0, 1fr); }
  .reporting-filters input,
  .reporting-filters select { font-size: 1rem; }
  .reporting-filters__actions { grid-column: 1 / -1; }
  .reporting-nav a,
  .reporting-detail-nav a { flex: 1 1 8rem; }
}
@media (pointer: coarse) {
  .dash-nav-link,
  .dash-nav-group__summary,
  .reporting-nav a,
  .reporting-detail-nav a,
  .reporting-filters__refinements > summary { min-height: 2.75rem; }
  .site-header__search input { min-height: 2.75rem; }
  .site-header__search button { width: 2.75rem; }
}

.dash-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.dash-toolbar > :only-child {
  margin-bottom: 0;
}
@media (max-width: 51.99rem) {
  .container--padded {
    padding-top: var(--space-3);
  }
  .dash-content {
    min-width: 0;
  }
  .dash-toolbar {
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .dash-toolbar > .actions-row,
  .dash-toolbar > .btn {
    width: 100%;
  }
  .dash-toolbar > .actions-row .btn,
  .dash-toolbar > .btn {
    flex: 1 1 10rem;
  }
  .actions-row--compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .actions-row--compact .btn {
    width: 100%;
  }
}
.stat-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.stat__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-title);
}
.stat__label { color: var(--color-muted); font-size: 0.9rem; }

/* Les listes métier deviennent des cartes lisibles : pas de défilement horizontal à mémoriser. */
@media (max-width: 40rem) {
  .table-wrap:has(.data-table--responsive) {
    overflow: visible;
  }
  table.data-table--responsive,
  table.data.data-table--responsive,
  .data-table--responsive tbody,
  .data-table--responsive tr,
  .data-table--responsive td {
    display: block;
    width: 100%;
  }
  .data-table--responsive thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .data-table--responsive tbody {
    display: grid;
    gap: var(--space-3);
  }
  .data-table--responsive tr {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 0.2rem 0.7rem rgb(29 78 83 / 0.05);
  }
  .data-table--responsive td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    min-height: 2.7rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
    text-align: right;
  }
  .data-table--responsive td:last-child {
    border-bottom: 0;
  }
  .data-table--responsive td::before {
    content: attr(data-label);
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
  }
  .data-table--responsive .data-table__actions-cell {
    grid-template-columns: 1fr;
    justify-items: stretch;
    text-align: left;
  }
  .data-table--responsive .data-table__actions-cell::before {
    display: none;
  }
  .data-table--responsive .data-table__actions-cell .btn,
  .data-table--responsive .data-table__actions-cell .inline-form,
  .data-table--responsive .data-table__actions-cell .inline-form .btn {
    width: 100%;
  }
  .data-table--responsive .actions-row {
    justify-content: stretch;
    margin: 0;
  }
  .data-table--responsive .actions-row .btn,
  .data-table--responsive .actions-row .inline-form {
    flex: 1 1 8rem;
  }
}

/* ——— Page tarifs (cartes premium + comparaison responsive) ——— */
.pricing-hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-5);
  background:
    radial-gradient(120% 80% at 12% -10%, color-mix(in srgb, var(--color-brand-soft) 70%, transparent), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--color-accent-soft) 55%, transparent), transparent 50%),
    var(--color-background);
}
.pricing-hero__inner {
  max-width: 42rem;
}
.pricing-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-3);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand-soft) 75%, var(--color-surface));
  color: var(--color-brand-typo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pricing-hero h1 {
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pricing-hero .lead {
  margin-bottom: var(--space-3);
  font-size: 1.08rem;
}
.pricing-hero__audience {
  margin: 0;
}

.section--pricing-plans {
  padding-top: var(--space-4);
}
.pricing-plans {
  --pricing-plan-rows: 13; /* header + price + 9 critères + note + CTA (badge hors flux) */
  --pricing-plan-criteria: 9;
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
}
@media (min-width: 52rem) {
  .pricing-plans--count-2,
  .pricing-plans--count-3,
  .pricing-plans--count-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: stretch;
  }
  .pricing-plans--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 44rem;
    margin-inline: auto;
  }
  .pricing-plans--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pricing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) + 0.15rem);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pricing-plan:hover {
  border-color: color-mix(in srgb, var(--color-brand) 28%, var(--color-border));
  box-shadow: 0 1rem 2.2rem rgba(29, 78, 83, 0.12);
}
.pricing-plan--featured {
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-brand-pale) 88%, var(--color-surface)) 0%,
      var(--color-surface) 42%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-brand) 18%, transparent),
    0 1.25rem 2.8rem rgba(29, 78, 83, 0.14);
}
@media (min-width: 52rem) {
  .pricing-plan--featured {
    transform: translateY(-0.35rem);
  }
}
.pricing-plan__badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0.35rem 0.85rem rgba(29, 78, 83, 0.18);
}
.pricing-plan__header {
  display: grid;
  gap: 0.35rem;
  text-align: center;
}
.pricing-plan__name {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  color: var(--color-title);
}
.pricing-plan__audience {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.35;
  min-height: 2.5em;
}
.pricing-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.65rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.pricing-plan__amount {
  font-size: clamp(1.65rem, 2.1vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-title);
  line-height: 1;
}
.pricing-plan__unit {
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 500;
}
.pricing-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  flex: 1 1 auto;
}
.pricing-plan__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.42rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  min-height: 2.15rem;
}
.pricing-plan__item:last-child {
  border-bottom: 0;
}
.pricing-plan__item-label {
  color: var(--color-muted);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.25;
}
.pricing-plan__item-value {
  color: var(--color-title);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}
.pricing-plan__item--on .pricing-plan__item-value {
  color: var(--color-brand-typo);
}
.pricing-plan__item--on .pricing-plan__item-value::before {
  content: "✓ ";
  font-weight: 700;
}
.pricing-plan__item--off .pricing-plan__item-value {
  color: var(--color-muted);
  font-weight: 500;
  opacity: 0.75;
}
.pricing-plan__item--value .pricing-plan__item-value {
  font-weight: 700;
}
.pricing-plan__note-slot {
  min-height: 2.4rem;
  display: flex;
  align-items: flex-start;
}
.pricing-plan__note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}
.pricing-plan--premium {
  border-color: color-mix(in srgb, #d4af37 52%, var(--color-border));
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, #f8ecd2 82%, var(--color-surface)) 0%,
      var(--color-surface) 48%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, #d4af37 28%, transparent),
    0 1.15rem 2.6rem rgba(166, 124, 42, 0.16);
}
.pricing-plan__badge--premium {
  background:
    linear-gradient(
      135deg,
      #fff1c2 0%,
      #f0d078 22%,
      #d4a84b 48%,
      #b8862e 68%,
      #e8c56a 86%,
      #c9963a 100%
    );
  color: #3a2808;
  border: 1px solid color-mix(in srgb, #fff6d0 55%, #a67c2a);
  box-shadow:
    0 0 0 1px rgba(184, 134, 46, 0.28),
    0 0.35rem 1rem rgba(184, 134, 46, 0.38),
    0 0 1.1rem rgba(232, 197, 106, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(120, 80, 20, 0.18);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(255, 244, 210, 0.35);
}
:root[data-theme="dark"] .pricing-plan--premium {
  border-color: color-mix(in srgb, #e0c089 42%, var(--color-border));
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, #e0c089 14%, var(--color-surface)) 0%,
      var(--color-surface) 48%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, #e0c089 24%, transparent),
    0 1.15rem 2.6rem rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .pricing-plan__badge--premium {
  background:
    linear-gradient(
      135deg,
      #f6e2a0 0%,
      #e0c089 28%,
      #c9a227 55%,
      #e8c56a 82%,
      #b8862e 100%
    );
  color: #2a1c06;
  border-color: color-mix(in srgb, #fff1c2 40%, #c9a227);
  box-shadow:
    0 0 0 1px rgba(224, 192, 137, 0.35),
    0 0.4rem 1.1rem rgba(201, 162, 39, 0.4),
    0 0 1.2rem rgba(232, 197, 106, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing-plan--premium {
    border-color: color-mix(in srgb, #e0c089 42%, var(--color-border));
    background:
      linear-gradient(
        165deg,
        color-mix(in srgb, #e0c089 14%, var(--color-surface)) 0%,
        var(--color-surface) 48%
      );
    box-shadow:
      0 0 0 1px color-mix(in srgb, #e0c089 24%, transparent),
      0 1.15rem 2.6rem rgba(0, 0, 0, 0.35);
  }
  :root:not([data-theme="light"]) .pricing-plan__badge--premium {
    background:
      linear-gradient(
        135deg,
        #f6e2a0 0%,
        #e0c089 28%,
        #c9a227 55%,
        #e8c56a 82%,
        #b8862e 100%
      );
    color: #2a1c06;
    border-color: color-mix(in srgb, #fff1c2 40%, #c9a227);
    box-shadow:
      0 0 0 1px rgba(224, 192, 137, 0.35),
      0 0.4rem 1.1rem rgba(201, 162, 39, 0.4),
      0 0 1.2rem rgba(232, 197, 106, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}
.btn-premium {
  background: linear-gradient(180deg, #f3df96 0%, #d4a84b 48%, #b8862e 100%);
  color: #2f2108;
  border-color: color-mix(in srgb, #a67c2a 70%, #6a4a12);
  box-shadow:
    0 0.35rem 0.9rem rgba(184, 134, 46, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-premium:hover {
  background: linear-gradient(180deg, #f8e9b0 0%, #e0b85a 45%, #c9963a 100%);
  color: #241806;
}
.pricing-compare__plan-head--premium {
  background: color-mix(in srgb, #f3e2a8 35%, transparent);
  box-shadow: inset 0 3px 0 #d4af37;
}
.pricing-compare__plan-tag--premium {
  color: #8a6a1f;
}
:root[data-theme="dark"] .pricing-compare__plan-head--premium {
  background: color-mix(in srgb, #e0c089 12%, transparent);
  box-shadow: inset 0 3px 0 #e0c089;
}
:root[data-theme="dark"] .pricing-compare__plan-tag--premium {
  color: #e0c089;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing-compare__plan-head--premium {
    background: color-mix(in srgb, #e0c089 12%, transparent);
    box-shadow: inset 0 3px 0 #e0c089;
  }
  :root:not([data-theme="light"]) .pricing-compare__plan-tag--premium {
    color: #e0c089;
  }
}
.pricing-compare__value--premium {
  background: color-mix(in srgb, #f3e2a8 22%, transparent);
}
:root[data-theme="dark"] .pricing-compare__value--premium {
  background: color-mix(in srgb, #e0c089 8%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing-compare__value--premium {
    background: color-mix(in srgb, #e0c089 8%, transparent);
  }
}
.pricing-plan__cta {
  margin: auto 0 0;
  padding-top: var(--space-2);
}
.pricing-plan__cta .btn {
  width: 100%;
}
@media (max-width: 51.99rem) {
  .pricing-plan--featured {
    margin-top: var(--space-4);
  }
}

/* Alignement strict des mêmes critères d’une carte à l’autre (desktop) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 52rem) {
    .pricing-plans--count-2,
    .pricing-plans--count-3,
    .pricing-plans--count-4 {
      grid-template-rows: repeat(var(--pricing-plan-rows), auto);
      align-items: stretch;
    }
    .pricing-plan {
      display: grid;
      grid-row: span var(--pricing-plan-rows);
      grid-template-rows: subgrid;
      gap: 0;
      row-gap: 0;
    }
    .pricing-plan__header,
    .pricing-plan__price,
    .pricing-plan__note-slot,
    .pricing-plan__cta {
      margin: 0;
    }
    .pricing-plan__badge {
      /* Reste sur la bordure supérieure, hors sous-grille */
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .pricing-plan__header {
      padding-bottom: var(--space-3);
    }
    .pricing-plan__price {
      margin-bottom: var(--space-2);
    }
    .pricing-plan__list {
      display: grid;
      grid-row: span var(--pricing-plan-criteria);
      grid-template-rows: subgrid;
      gap: 0;
      flex: unset;
    }
    .pricing-plan__note-slot {
      min-height: 0;
      padding-top: var(--space-3);
      padding-bottom: var(--space-2);
    }
    .pricing-plan__cta {
      margin: 0;
      padding-top: var(--space-2);
      align-self: end;
    }
    .pricing-plan--featured {
      transform: none;
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-brand) 22%, transparent),
        0 1.25rem 2.8rem rgba(29, 78, 83, 0.14);
    }
  }
}

.pricing-volume-note {
  margin-top: var(--space-5);
  margin-bottom: 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.45;
}
.pricing-vat-note {
  margin-top: var(--space-2);
  margin-bottom: 0;
  text-align: center;
  font-size: 0.92rem;
}

.section--pricing-included {
  --section-bg: var(--color-background-soft);
}
.pricing-included {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) + 0.1rem);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
@media (min-width: 48rem) {
  .pricing-included {
    grid-template-columns: minmax(14rem, 0.9fr) minmax(0, 1.4fr);
    align-items: center;
    padding: var(--space-6);
  }
}
.pricing-included__intro h2 {
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
}
.pricing-included__intro p {
  margin: 0;
}
.pricing-included__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 30rem) {
  .pricing-included__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pricing-included__grid li {
  position: relative;
  padding: 0.75rem 0.85rem 0.75rem 2.2rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-brand-pale) 65%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-brand) 12%, var(--color-border));
  font-size: 0.94rem;
  line-height: 1.35;
}
.pricing-included__grid li::before {
  content: "✓";
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  color: var(--color-brand-typo);
  font-weight: 700;
}

.pricing-compare-head {
  max-width: 40rem;
  margin-bottom: var(--space-5);
}
.pricing-compare-head h2 {
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
}
.pricing-compare-head p {
  margin: 0;
}

.pricing-compare {
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) + 0.1rem);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pricing-compare__header,
.pricing-compare__row,
.pricing-compare__group {
  display: grid;
  gap: 0;
}
.pricing-compare--cols-2 .pricing-compare__header,
.pricing-compare--cols-2 .pricing-compare__row {
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}
.pricing-compare--cols-3 .pricing-compare__header,
.pricing-compare--cols-3 .pricing-compare__row {
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
}
.pricing-compare--cols-4 .pricing-compare__header,
.pricing-compare--cols-4 .pricing-compare__row {
  grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, 1fr));
}
.pricing-compare__group {
  grid-template-columns: 1fr;
}
.pricing-compare__corner,
.pricing-compare__plan-head,
.pricing-compare__feature,
.pricing-compare__value,
.pricing-compare__group-label {
  padding: 0.9rem 1rem;
}
.pricing-compare__header {
  background: color-mix(in srgb, var(--color-background-soft) 70%, var(--color-surface));
  border-bottom: 1px solid var(--color-border);
}
.pricing-compare__corner {
  font-weight: 600;
  color: var(--color-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pricing-compare__plan-head {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  text-align: center;
  color: var(--color-title);
  font-weight: 700;
}
.pricing-compare__plan-head--featured {
  background: color-mix(in srgb, var(--color-brand-soft) 45%, transparent);
  box-shadow: inset 0 3px 0 var(--color-brand);
}
.pricing-compare__plan-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-typo);
}
.pricing-compare__row {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
.pricing-compare__row:last-child {
  border-bottom: 0;
}
.pricing-compare__row--price .pricing-compare__feature,
.pricing-compare__row--price .pricing-compare__value {
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
  background: color-mix(in srgb, var(--color-brand-pale) 55%, var(--color-surface));
}
.pricing-compare__feature {
  font-weight: 600;
  color: var(--color-title);
  text-align: left;
}
.pricing-compare__value {
  text-align: center;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.35;
}
.pricing-compare__value--featured {
  background: color-mix(in srgb, var(--color-brand-pale) 40%, transparent);
}
.pricing-compare__row--price .pricing-compare__value--featured {
  background: color-mix(in srgb, var(--color-brand-soft) 35%, var(--color-brand-pale));
}
.pricing-compare__price {
  display: inline;
  font-size: 1.15rem;
  color: var(--color-title);
}
.pricing-compare__period {
  display: inline;
  margin-left: 0.15rem;
  color: var(--color-muted);
  font-size: 0.85rem;
}
.pricing-compare__hint {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.pricing-compare__group-label {
  background: color-mix(in srgb, var(--color-background-soft) 85%, var(--color-surface));
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.pricing-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  font-weight: 700;
}
.pricing-mark--yes {
  color: var(--color-brand-typo);
}
.pricing-mark--no {
  color: var(--color-muted);
  opacity: 0.75;
}
.pricing-compare__footnote {
  margin: var(--space-4) 0 0;
  font-size: 0.9rem;
}

/* Mobile : matrice conservée. Les trois formules restent comparables d'un seul regard. */
@media (max-width: 51.99rem) {
  .section--pricing-compare .container {
    width: min(100% - 1rem, var(--max-width));
  }
  .pricing-compare--cols-2 .pricing-compare__header,
  .pricing-compare--cols-2 .pricing-compare__row,
  .pricing-compare--cols-3 .pricing-compare__header,
  .pricing-compare--cols-3 .pricing-compare__row,
  .pricing-compare--cols-4 .pricing-compare__header,
  .pricing-compare--cols-4 .pricing-compare__row {
    grid-template-columns: minmax(5.4rem, 1.25fr) repeat(3, minmax(0, 1fr));
  }
  .pricing-compare--cols-2 .pricing-compare__header,
  .pricing-compare--cols-2 .pricing-compare__row {
    grid-template-columns: minmax(6rem, 1.35fr) repeat(2, minmax(0, 1fr));
  }
  .pricing-compare__corner,
  .pricing-compare__plan-head,
  .pricing-compare__feature {
    padding: 0.55rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.2;
  }
  .pricing-compare__plan-head {
    gap: 0.15rem;
    font-size: 0.78rem;
  }
  .pricing-compare__corner {
    font-size: 0.64rem;
    letter-spacing: 0.04em;
  }
  .pricing-compare__plan-tag {
    font-size: 0.56rem;
    letter-spacing: 0.025em;
  }
  .pricing-compare__value {
    display: block;
    padding: 0.55rem 0.25rem;
    font-size: 0.76rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .pricing-compare__value--featured {
    box-shadow: inset 2px 0 0 var(--color-brand);
  }
  .pricing-compare__group {
    padding: 0;
  }
  .pricing-compare__group-label {
    padding: 0.55rem 0.65rem;
    font-size: 0.66rem;
  }
  .pricing-compare__row--price .pricing-compare__feature,
  .pricing-compare__row--price .pricing-compare__value {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
  .pricing-compare__price { font-size: 0.95rem; }
  .pricing-compare__period {
    display: block;
    margin: 0.1rem 0 0;
    font-size: 0.64rem;
  }
  .pricing-compare__hint {
    display: none;
  }
}

.pricing-extras {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 48rem) {
  .pricing-extras {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
  }
}
.pricing-activation h2,
.pricing-reassure h2 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.pricing-activation__fees {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.pricing-activation__fees p {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-brand-pale) 70%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-brand) 10%, var(--color-border));
}
.pricing-reassure__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}
.pricing-reassure__actions .btn {
  flex: 1 1 10rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing-plan--featured {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-brand-soft) 55%, var(--color-surface)) 0%,
        var(--color-surface) 48%
      );
  }
}
:root[data-theme="dark"] .pricing-plan--featured {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-brand-soft) 55%, var(--color-surface)) 0%,
      var(--color-surface) 48%
    );
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--space-4);
}
.auth-card {
  width: min(100%, 26rem);
}
.auth-card:focus,
.auth-card:focus-visible {
  outline: none;
}
.page-auth--signup .auth-page {
  place-items: start center;
  min-height: calc(100vh - var(--header-h));
  padding-top: var(--space-4);
}
.page-auth--signup .auth-card {
  width: min(100%, 42rem);
}
.signup-flow {
  display: grid;
  gap: var(--space-4);
}
.signup-scroll {
  display: grid;
  gap: var(--space-4);
}
.signup-plan-activation {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}
.signup-continue {
  scroll-margin-top: 1rem;
}
.signup-continue:focus,
.signup-continue:focus-visible {
  outline: none;
}
.field-error {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--color-danger);
}
.form-field--error input,
.form-field--error select,
.form-field--error textarea,
.signup-choice.is-invalid {
  border-color: var(--color-danger);
}
.signup-continue__title {
  margin: 0 0 var(--space-3);
  font-size: 1.15rem;
}
.signup-hero__intro {
  text-align: center;
  margin: 0 0 var(--space-5);
}
.signup-hero__intro h1 {
  margin-bottom: var(--space-2);
}
.signup-split {
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
}
@media (min-width: 720px) {
  .signup-split {
    grid-template-columns: 1.15fr 0.95fr;
    gap: var(--space-5);
  }
}
.signup-split__panel {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.signup-split__panel h2 {
  margin-top: 0;
  font-size: 1.15rem;
}
.signup-split__panel--demo {
  background: color-mix(in srgb, var(--color-brand-pale) 55%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-brand) 22%, var(--color-border));
}
.signup-demo-points {
  margin: 0 0 var(--space-4);
  padding-left: 1.15rem;
  color: var(--color-muted);
  font-size: 0.92rem;
}
.signup-demo-points li {
  margin-bottom: 0.35rem;
}
.signup-split__foot {
  margin-top: auto;
  padding-top: var(--space-4);
}
.signup-demo-form {
  margin-top: auto;
}
.signup-plan-picker {
  margin: var(--space-4) 0 0;
}
.signup-plan-picker--hero {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.signup-plan-picker--form {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-brand-pale) 55%, var(--color-surface));
  text-align: center;
}
.signup-plan-picker__label {
  margin: 0 0 var(--space-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.signup-plan-picker__segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
  border-radius: calc(var(--radius) + 0.2rem);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-brand-pale));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.signup-plan-chip {
  position: relative;
  display: block;
  margin: 0;
  padding: 0.7rem 0.75rem 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.signup-plan-chip:hover {
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-brand-pale));
  border-color: color-mix(in srgb, var(--color-brand) 16%, var(--color-border));
}
.signup-plan-chip.is-selected,
.signup-plan-chip:has(.signup-plan-chip__input:checked) {
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}
.signup-plan-chip:focus-visible,
.signup-plan-chip:has(.signup-plan-chip__input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
  outline-offset: 1px;
}
.signup-plan-chip__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.signup-plan-chip__body {
  display: grid;
  gap: 0.15rem;
  justify-items: center;
}
.signup-plan-chip__name {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
}
.signup-plan-chip__price {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--color-text);
}
.signup-plan-chip__period {
  font-weight: 500;
  color: var(--color-muted);
  font-size: 0.82em;
}
.signup-plan-chip__volume {
  margin-top: 0.1rem;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-muted);
}
@media (max-width: 35.99rem) {
  .signup-plan-chip {
    padding: 0.55rem 0.35rem 0.5rem;
  }
  .signup-plan-chip__name {
    font-size: 0.88rem;
  }
  .signup-plan-chip__price {
    font-size: 0.8rem;
  }
  .signup-plan-chip__volume {
    font-size: 0.66rem;
  }
}
.signup-plan-chip.is-selected .signup-plan-chip__volume,
.signup-plan-chip:has(.signup-plan-chip__input:checked) .signup-plan-chip__volume {
  color: var(--color-brand-typo);
}
.signup-plan-chip__badge {
  margin-top: 0.15rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand-pale) 80%, var(--color-surface));
}
.signup-plan-chip.is-selected .signup-plan-chip__badge,
.signup-plan-chip:has(.signup-plan-chip__input:checked) .signup-plan-chip__badge {
  color: #fff;
  background: var(--color-brand);
}
.signup-plan-picker__join {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.55rem 0 0.15rem;
  line-height: 1;
}
.signup-plan-picker__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand-pale) 70%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, var(--color-border));
}
.signup-plan-picker__activation {
  margin: var(--space-2) 0 0;
  text-align: left;
}
.signup-plan-picker__activation p {
  margin: 0;
}
.signup-plan-picker__activation p + p {
  margin-top: 0.35rem;
  font-size: 0.82rem;
}
.signup-plan-picker__activation a {
  white-space: nowrap;
}
.signup-plan-picker__compare-wrap {
  margin: 0.45rem 0 0;
}
.signup-plan-picker__compare {
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.signup-company-preview {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.signup-company-preview__siren {
  margin: 0 0 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: baseline;
}
.signup-company-preview__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
}
.signup-section-title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}
.signup-fe-check {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-brand-pale) 35%, var(--color-surface));
}
.signup-fe-check__status {
  margin: 0 0 0.35rem;
}
.signup-fe-check__alert {
  margin: 0.5rem 0;
  font-weight: 650;
}
.signup-stub-banner {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-warning, #b45309) 35%, var(--color-border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-warning, #b45309) 12%, var(--color-surface));
  font-size: 0.9rem;
}
.signup-stub-banner code {
  font-size: 0.85em;
}
.signup-company-preview__meta {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}
.signup-address {
  display: grid;
  gap: 0.15rem;
  margin: 0.35rem 0 0;
}
.signup-address__street,
.signup-address__locality {
  margin: 0;
  display: block;
}
.signup-siret-picker,
.signup-officer-picker {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
  min-inline-size: 0;
}
.signup-siret-picker legend,
.signup-officer-picker legend {
  padding: 0;
  margin: 0 0 0.45rem;
  font-weight: 650;
}
.signup-siret-picker__legend {
  display: block;
  max-width: 100%;
  line-height: 1.35;
}
.signup-siret-picker__legend .site-brand {
  display: inline-flex;
  vertical-align: baseline;
  gap: 0.2em;
  margin-left: 0.15em;
  font-size: 0.95em;
}
.signup-siret-picker__legend .site-brand__product,
.signup-siret-picker__legend .site-brand__mark {
  font-size: 1em;
}
@media (min-width: 40rem) {
  .signup-siret-picker__legend {
    white-space: nowrap;
  }
  .signup-siret-picker__legend .site-brand {
    white-space: nowrap;
  }
}
.signup-siret-picker__actions {
  margin: 0 0 0.55rem;
}
.signup-siret-extra {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.signup-siret-extra__title {
  margin: 0 0 var(--space-2);
  font-size: 0.98rem;
  font-weight: 650;
}
.signup-siret-extra__table {
  display: grid;
  gap: 0.4rem;
}
.signup-siret-extra__head,
.signup-siret-extra__row {
  display: grid;
  /* Colonne SIRET = largeur du compose ; le libellé prend le reste dès que possible. */
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}
.signup-siret-extra__col--siret {
  width: max-content;
  max-width: 100%;
}
.signup-siret-extra__head {
  padding: 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.signup-siret-extra__row {
  padding: 0.45rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-brand-pale));
}
.signup-siret-compose {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  width: max-content;
  max-width: 100%;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) - 0.1rem);
  background: var(--color-surface);
}
.signup-siret-compose__siren {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  user-select: none;
}
/* Spécificité > .form-field input { width:100% } ; content-box pour que
   le padding ne mange pas les 5 chiffres (sinon ~1 caractère visible). */
.form-field .signup-siret-compose__suffix {
  box-sizing: content-box;
  flex: 0 0 auto;
  /* 5 chiffres + letter-spacing entre eux */
  width: calc(5ch + 0.4em);
  min-width: calc(5ch + 0.4em);
  max-width: calc(5ch + 0.4em);
  margin: 0;
  padding: 0.25rem 0.35rem;
  border: 0;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--color-brand-pale) 35%, var(--color-surface));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-align: center;
}
.form-field .signup-siret-compose__suffix::placeholder {
  font-weight: 400;
  color: var(--color-muted);
  opacity: 0.85;
}
.form-field .signup-siret-compose__suffix:focus {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
  outline-offset: 1px;
}
.signup-siret-extra__label {
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.55rem;
  font-size: 0.9rem;
}
@media (max-width: 35.99rem) {
  .signup-siret-extra__head,
  .signup-siret-extra__row {
    gap: 0.4rem;
  }
  .signup-siret-extra__label {
    padding: 0.35rem 0.45rem;
    font-size: 0.85rem;
  }
}
.signup-choice-list {
  display: grid;
  gap: 0.45rem;
}
.signup-choice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, var(--color-border));
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}
.signup-choice-list .signup-choice,
.signup-siret-picker .signup-choice,
.signup-officer-picker .signup-choice {
  margin: 0;
}
.signup-choice.is-locked {
  cursor: default;
}
.signup-choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand) 25%, transparent);
}
.signup-choice > input[type="checkbox"],
.signup-choice > input[type="radio"] {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--color-brand);
}
.signup-choice__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}
.signup-choice__title {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.signup-choice__badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand-pale) 80%, var(--color-surface));
}
.signup-locked-value {
  margin: 0;
  font-weight: 650;
}
.password-field {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.password-field input {
  flex: 1 1 auto;
  min-width: 0;
}
.password-field__toggle {
  flex: 0 0 auto;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-brand-pale) 45%, var(--color-surface));
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}
.password-field__toggle:hover {
  border-color: color-mix(in srgb, var(--color-brand) 30%, var(--color-border));
}
.password-field__toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-brand) 40%, var(--color-border));
}
.form-hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
}
.form-label-text {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 650;
}
.signup-payment-note {
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
}
.signup-billing-banner h2 {
  margin-top: 0;
}

.contact-email,
.contact-phone { cursor: pointer; }
.contact-phone-link { color: inherit; text-decoration: none; }

.contact-page { max-width: 40rem; }
.contact-errors {
  margin: 0;
  padding-left: 1.2rem;
}
.contact-form { margin: var(--space-5) 0; }
.required { color: var(--color-danger); }
.btn-block { width: 100%; }
.form-consent .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
  font-weight: 400;
}
.form-consent .checkbox-label input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  margin: 0.15rem 0 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--color-brand);
}
.form-note { margin-top: 0; }
.char-counter { margin-top: 0.25rem; }
.char-counter .counter-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-bottom: 0.15rem;
}
.char-counter .counter-count {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.char-counter .counter-min { font-size: 0.72rem; }
.char-counter .counter-bar {
  height: 3px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.char-counter .counter-fill {
  height: 100%;
  background: var(--color-brand);
  width: 0;
}
.char-counter .counter-fill-p0 { width: 0%; }
.char-counter .counter-fill-p5 { width: 5%; }
.char-counter .counter-fill-p10 { width: 10%; }
.char-counter .counter-fill-p15 { width: 15%; }
.char-counter .counter-fill-p20 { width: 20%; }
.char-counter .counter-fill-p25 { width: 25%; }
.char-counter .counter-fill-p30 { width: 30%; }
.char-counter .counter-fill-p35 { width: 35%; }
.char-counter .counter-fill-p40 { width: 40%; }
.char-counter .counter-fill-p45 { width: 45%; }
.char-counter .counter-fill-p50 { width: 50%; }
.char-counter .counter-fill-p55 { width: 55%; }
.char-counter .counter-fill-p60 { width: 60%; }
.char-counter .counter-fill-p65 { width: 65%; }
.char-counter .counter-fill-p70 { width: 70%; }
.char-counter .counter-fill-p75 { width: 75%; }
.char-counter .counter-fill-p80 { width: 80%; }
.char-counter .counter-fill-p85 { width: 85%; }
.char-counter .counter-fill-p90 { width: 90%; }
.char-counter .counter-fill-p95 { width: 95%; }
.char-counter .counter-fill-p100 { width: 100%; }
.char-counter.is-below-min .counter-count { color: var(--color-counter-low-text); }
.char-counter.is-below-min .counter-fill { background: var(--color-counter-low-fill); }
.char-counter.is-near-max .counter-count { color: var(--color-counter-high-text); }
.char-counter.is-near-max .counter-fill { background: var(--color-counter-high-fill); }
@media (prefers-reduced-motion: reduce) {
  .char-counter .counter-fill { transition: none; }
}
.contact-direct {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.contact-direct h2 { font-size: 1.1rem; }
.contact-direct p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.demo-banner {
  background: var(--color-brand-soft);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.demo-banner--urgent {
  background: var(--color-warning-soft);
}
.demo-banner--assist {
  background: var(--color-accent-soft);
}
/* Présence et co-navigation d’assistance (ADM-10, support.presence_cobrowse). */
.assist-cobrowse--publisher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}
.assist-presence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.9rem;
}
.assist-presence::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-muted);
}
.assist-presence--online::before { background: var(--color-brand); }
.assist-cobrowse__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  cursor: pointer;
}
.assist-presence-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.assist-cobrowse__note { font-size: 0.85rem; color: var(--color-muted); }
.assist-cobrowse__viewer {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-soft);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}
.assist-cobrowse__page { font-size: 0.9rem; }
.assist-cobrowse__member-page { font-size: 0.9rem; font-weight: 600; }
.assist-cobrowse-target {
  outline: 2px dashed var(--color-accent);
  outline-offset: 2px;
}
.assist-cobrowse-target--focus { outline-style: solid; }
.assist-cobrowse__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 61;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-accent);
  border-radius: 50% 50% 50% 0;
  background: var(--color-accent-soft);
  pointer-events: none;
  transition: transform 0.2s linear;
}
.assist-cobrowse__viewer[hidden],
.assist-cobrowse__viewer [hidden],
.assist-cobrowse__cursor[hidden],
.assist-cobrowse__note[hidden],
.assist-cobrowse__member-page[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .assist-cobrowse__cursor { transition: none; }
}
.demo-banner__text {
  margin: 0;
  font-size: 0.95rem;
}
.demo-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.demo-banner__form { margin: 0; }
.inline-form { display: inline; margin: 0; }

/* Marque éCauxLogique (crédits footer) */
@font-face {
  font-family: 'IndieFlower';
  src: url('../fonts/IndieFlower-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.ecauxlogique {
  font-family: 'IndieFlower', cursive;
  color: var(--color-logo-ink);
  font-size: 1.15em;
  font-weight: bold;
  line-height: 1.4;
  white-space: nowrap;
}

.eca-first,
.eca-mid,
.eca-cap,
.eca-end {
  font-family: inherit;
  color: inherit;
}

.eca-first {
  position: relative;
  top: -0.15em;
  color: var(--color-logo-teal);
}

.eca-mid {
  position: relative;
  bottom: -0.15em;
}

.eca-cap {
  color: var(--color-logo-teal);
}

.ecauxlogique-link {
  text-decoration: none;
  color: inherit;
}

.ecauxlogique-link:hover .ecauxlogique,
.ecauxlogique-link:focus-visible .ecauxlogique {
  color: var(--color-brand-dark, var(--color-brand-typo));
}

.ecauxlogique-link:focus-visible {
  outline: 2px solid var(--color-brand, var(--color-logo-teal));
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.site-brand:hover .site-brand__product,
.site-brand:focus-visible .site-brand__product,
.site-brand:hover .site-brand__la,
.site-brand:focus-visible .site-brand__la,
.site-brand:hover .site-brand__facture,
.site-brand:focus-visible .site-brand__facture,
.site-brand:hover .site-brand__accent,
.site-brand:focus-visible .site-brand__accent,
.site-brand:hover .site-brand__ink,
.site-brand:focus-visible .site-brand__ink {
  color: color-mix(in srgb, var(--color-logo-ink) 82%, #000);
}
.site-brand:hover .eca-first,
.site-brand:focus-visible .eca-first,
.site-brand:hover .eca-cap,
.site-brand:focus-visible .eca-cap {
  color: color-mix(in srgb, var(--color-logo-teal) 82%, #000);
}
.site-brand:focus-visible {
  outline: 2px solid var(--color-logo-teal);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.site-logo--text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
  color: inherit;
}

/* Spécificité > .site-logo img { display:block } — sinon les 2 logos côte à côte en mode clair */
.site-logo img.site-logo__img--dark { display: none; }
html[data-theme="dark"] .site-logo--has-dark img.site-logo__img--light { display: none; }
html[data-theme="dark"] .site-logo--has-dark img.site-logo__img--dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .site-logo--has-dark img.site-logo__img--light { display: none; }
  html:not([data-theme="light"]) .site-logo--has-dark img.site-logo__img--dark { display: block; }
}

.site-brand__tagline {
  font-weight: 400;
  color: var(--color-text);
  font-size: 0.95rem;
}
.site-logo--footer {
  display: inline;
  max-width: none;
  text-decoration: none;
  color: inherit;
  line-height: 1.45;
}
.site-logo--footer .site-brand--text,
.site-logo--footer .site-brand__product,
.site-logo--footer .site-brand__tagline {
  display: inline;
}

.maintenance__main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: var(--color-background-soft);
}
.maintenance__card {
  max-width: 28rem;
  width: 100%;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, var(--radius));
  box-shadow: var(--shadow, none);
  text-align: center;
}
.maintenance__card--bootstrap {
  max-width: 32rem;
  text-align: left;
}
.maintenance__brand {
  margin: 0 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.maintenance__brand .site-logo,
.maintenance__brand .site-logo--static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  max-width: 100%;
}
.maintenance__brand .site-logo img {
  width: min(100%, 18rem);
  max-width: 100%;
  height: auto;
  max-height: 5.5rem;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}
.maintenance__brand-text {
  margin: 0 0 var(--space-5);
  font-size: 1.35rem;
  font-weight: 650;
  color: var(--color-brand-typo);
}
.maintenance__title {
  margin: 0 0 var(--space-4);
  font-size: 1.25rem;
}
.maintenance__message {
  margin: 0;
  color: var(--color-muted);
  white-space: pre-line;
}
.maintenance__credit {
  margin: var(--space-5) 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.form-errors {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  background: var(--color-danger-soft, #fde8e8);
  color: var(--color-danger, #b00020);
  border-radius: var(--radius);
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  transform: translateY(-150%);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: var(--color-title);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--color-accent); }
.bootstrap-form {
  margin-top: var(--space-5);
}
.bootstrap-form__sep {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}
.bootstrap-form__submit {
  margin-top: var(--space-4);
  width: 100%;
}

.numbering-preview {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-background-soft);
  border-radius: var(--radius);
  border: 1px dashed var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* === Lot E — Maintenance UX + Installation console === */
.maint-panel { margin: var(--space-4) 0; }
.maint-guidance {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-warning-soft);
  color: var(--color-text);
  font-size: 0.9rem;
}
.maint-error {
  color: var(--color-danger);
  margin: 0 0 var(--space-3);
}
.maint-steps {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.maint-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-2) 0;
}
.maint-step__mark {
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-background);
  position: relative;
}
.maint-step--running .maint-step__mark {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}
.maint-step--ok .maint-step__mark {
  border-color: #1f7a4d;
  background: #1f7a4d;
}
.maint-step--ok .maint-step__mark::after {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.08rem;
  width: 0.32rem;
  height: 0.62rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.maint-step--fail .maint-step__mark {
  border-color: var(--color-danger);
  background: var(--color-danger);
}
.maint-step--fail .maint-step__mark::before,
.maint-step--fail .maint-step__mark::after {
  content: "";
  position: absolute;
  left: 0.52rem;
  top: 0.22rem;
  width: 2px;
  height: 0.75rem;
  background: #fff;
}
.maint-step--fail .maint-step__mark::before { transform: rotate(45deg); }
.maint-step--fail .maint-step__mark::after { transform: rotate(-45deg); }
.maint-step__body { display: grid; gap: 0.15rem; }
.maint-step__label { font-weight: 600; }
.maint-step__detail { color: var(--color-muted); font-size: 0.875rem; }
.maint-ready {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  font-weight: 650;
}
.maint-ready__icon {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-border);
  position: relative;
}
.maint-ready.is-on .maint-ready__icon {
  background: #1f7a4d;
}
.maint-ready.is-on .maint-ready__icon::after {
  content: "";
  position: absolute;
  left: 0.52rem;
  top: 0.28rem;
  width: 0.38rem;
  height: 0.72rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.maintenance__message { white-space: pre-line; }

/* === Lot E — Installation console === */

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.btn-danger:hover {
  filter: brightness(0.92);
  color: #fff;
}
.btn-warning {
  background: var(--color-accent);
  color: #0f1a24;
  border-color: var(--color-accent);
}
.btn-warning:hover {
  filter: brightness(0.95);
  color: #0f1a24;
}
.btn-success {
  background: #1f7a45;
  color: #fff;
  border-color: #1f7a45;
}
.btn-success:hover {
  background: #176338;
  color: #fff;
}
:root[data-theme="dark"] .btn-success {
  background: #2f9a5c;
  color: #fff;
}
.action-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.75rem 0; }
.admin-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.admin-table th, .admin-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.admin-table__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.form-section__help, .form-hint { color: var(--color-muted); font-size: 0.9rem; }
.form-hint--warning { color: var(--color-accent); }
.form--inline { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.75rem 0; }
.form-actions { margin-top: 1rem; }
.form-group { margin: 0.75rem 0; }
.form-label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.form-input { width: 100%; max-width: 32rem; }
.form-checkbox { display: flex; gap: 0.5rem; align-items: flex-start; }
.install-check-link { text-decoration: none; }
.install-check-link:hover { text-decoration: underline; }
.php-check-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.php-check-badge--ok { background: var(--color-success-soft); color: #1f7a45; }
.php-check-badge--warn { background: var(--color-warning-soft); color: #8c6f3a; }
.php-check-badge--fail { background: var(--color-danger-soft); color: var(--color-danger); }
.php-check-row--fail { background: color-mix(in srgb, var(--color-danger-soft) 55%, transparent); }
.php-check-row--warn { background: color-mix(in srgb, var(--color-warning-soft) 55%, transparent); }
.php-check-summary__card--fail { border-color: var(--color-danger); }
.php-check-summary__card--warn { border-color: var(--color-accent); }

.admin-kpi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3, 1rem);
  margin: 0 0 var(--space-5, 2rem);
}

@media (min-width: 480px) {
  .admin-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .admin-kpi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-kpi.php-check-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.admin-kpi__card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-3, 1rem) var(--space-4, 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background-soft);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.admin-kpi__card:hover {
  border-color: var(--color-brand);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.admin-kpi__card:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.admin-kpi__card--static {
  cursor: default;
}

.admin-kpi__card--static:hover {
  border-color: var(--color-border);
  box-shadow: none;
}

.admin-kpi__value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-brand-dark);
}

.admin-kpi__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-title);
}

.admin-kpi__hint {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.php-check-summary__card--fail {
  border-color: var(--color-error-border);
}

.php-check-summary__card--warn {
  border-color: var(--color-accent);
}

.php-check-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.php-check-meta li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.php-check-meta li span:first-child {
  color: var(--color-muted);
  font-weight: 600;
}

.php-check-actions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.php-check-actions__list > li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: flex-start;
  padding: var(--space-3, 1rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background-soft, var(--color-background));
}

.php-check-actions__list > li p {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.php-check-row--fail {
  background: var(--color-error-soft);
}

.php-check-row--warn {
  background: var(--color-warning-soft);
}

.php-check-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.php-check-badge--ok {
  background: var(--color-success-soft);
  color: #1f7a45;
  border: 1px solid #1f7a45;
}

.php-check-badge--warn {
  background: var(--color-warning-soft);
  color: #8c6f3a;
  border: 1px solid var(--color-accent);
}

.php-check-badge--fail {
  background: var(--color-error-soft);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
}

.admin-table code {
  font-size: 0.8125rem;
  word-break: break-word;
}

.admin-section .form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 1rem);
}

.admin-table .form--inline {
  margin: 0;
}

.php-check-summary__card--warn {
  border-color: var(--color-warning-border, var(--color-border));
}

.form-hint--warning {
  color: var(--color-warning-text, var(--color-text));
}

.install-check-link {
  color: inherit;
  text-decoration: none;
}

.install-check-link:hover,
.install-check-link:focus-visible {
  color: var(--color-brand-dark);
  text-decoration: underline;
}


.install-tabs__panel,
#install-public,
#install-checks {
  scroll-margin-top: 5.5rem;
}

#install-public:target,
#install-checks:target,
#install-etat:target,
#install-database:target,
#install-env:target,
#install-cron:target,
#install-shield:target {
  outline: 2px solid var(--color-brand-pale);
  outline-offset: 0.5rem;
}

.install-tabs {
  margin-top: var(--space-4, 1.5rem);
}

.install-tabs__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.install-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 1rem);
}

.install-tabs__tab {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  cursor: pointer;
  background: var(--color-background);
}

#install-tab-etat:checked ~ .install-tabs__nav .install-tabs__tab[for="install-tab-etat"],
#install-tab-database:checked ~ .install-tabs__nav .install-tabs__tab[for="install-tab-database"],
#install-tab-env:checked ~ .install-tabs__nav .install-tabs__tab[for="install-tab-env"],
#install-tab-cron:checked ~ .install-tabs__nav .install-tabs__tab[for="install-tab-cron"] {
  background: var(--color-brand-pale);
  border-color: var(--color-brand);
  color: var(--color-brand-dark);
  font-weight: 600;
}

.install-tabs__panel {
  display: none;
}

#install-tab-etat:checked ~ .install-tabs__panel--etat,
#install-tab-database:checked ~ .install-tabs__panel--database,
#install-tab-env:checked ~ .install-tabs__panel--env,
#install-tab-cron:checked ~ .install-tabs__panel--cron {
  display: block;
}

.install-shield-blob {
  display: block;
  width: 100%;
  max-width: 40rem;
  min-height: 8rem;
  margin: 0 0 var(--space-3, 1rem);
  padding: var(--space-2, 0.5rem);
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.4;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background);
  color: var(--color-text);
}

.install-env-secret {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.install-env-secret .form-input {
  flex: 1 1 12rem;
  min-width: 0;
}

.secret-preview {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 0.875rem;
  color: var(--color-text-muted, var(--color-text));
}

.secret-preview code {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  word-break: break-all;
}

.install-env-secret-status {
  font-weight: 600;
  color: var(--color-success, var(--color-text));
}

.install-env-secret-status--empty {
  color: var(--color-warning, var(--color-text-muted, var(--color-text)));
  font-weight: 600;
}

.install-env-group {
  margin: 0 0 var(--space-3, 1rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background);
}

.install-env-group__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.install-env-group__summary::-webkit-details-marker {
  display: none;
}

.install-env-group__summary::before {
  content: '▸';
  color: var(--color-text);
  opacity: 0.55;
  font-size: 0.75rem;
  line-height: 1;
}

.install-env-group[open] > .install-env-group__summary::before {
  content: '▾';
}

.install-env-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.install-env-group--ok > .install-env-group__summary .install-env-group__icon {
  background: var(--color-success-soft);
  color: #1f7a45;
  border: 1px solid #1f7a45;
}

.install-env-group--ok > .install-env-group__summary .install-env-group__icon::before {
  content: '✓';
}

.install-env-group--todo > .install-env-group__summary .install-env-group__icon {
  background: var(--color-warning-soft);
  color: #8c6f3a;
  border: 1px solid var(--color-accent);
}

.install-env-group--todo > .install-env-group__summary .install-env-group__icon::before {
  content: '!';
}

.install-env-group--idle > .install-env-group__summary .install-env-group__icon {
  background: var(--color-background-soft);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

.install-env-group--idle > .install-env-group__summary .install-env-group__icon::before {
  content: '–';
}

.install-env-group__title {
  flex: 1 1 auto;
  min-width: 0;
}

.install-env-group__badge {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
  opacity: 0.7;
}

.install-env-group--todo > .install-env-group__summary .install-env-group__badge {
  color: #8c6f3a;
}

.install-env-group--idle > .install-env-group__summary .install-env-group__badge {
  color: var(--color-muted);
  opacity: 1;
}

.install-env-group__body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--color-border);
}

.install-env-smtp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-2, 0.5rem);
}
.install-env-group--todo > .install-env-group__summary .install-env-group__badge {
  color: #8c6f3a;
}

.install-env-group--idle > .install-env-group__summary .install-env-group__badge {
  color: var(--color-muted);
  opacity: 1;
}

.install-env-group__body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--color-border);
}

.install-env-smtp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-2, 0.5rem);
}

.install-db-provision {
  margin: 0 0 var(--space-4, 1.5rem);
  padding: var(--space-3, 1rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background);
}
/* Étapes documentaires : état écrit, jamais transmis par la couleur seule. */
.workflow-steps { padding-left: 1.5rem; }
.workflow-step { margin-block: 1rem; border-inline-start: 4px solid var(--color-border); }
.workflow-step h2 { font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.workflow-step--done { border-inline-start-color: #228349; }
.workflow-step--blocked { border-inline-start-color: #c45c26; }
.workflow-step--active { border-inline-start-color: var(--color-brand); }
/* Bac à sable : teinte de marque + fond de page seulement (pas les conteneurs). */
body[data-workspace-environment="sandbox"],
body[data-admin-work-mode="sandbox"] {
  --color-brand: #846337;
  --color-brand-dark: #644823;
  --color-brand-soft: #eadcc4;
  --color-brand-pale: #f7f1e7;
  background: #efe0d1;
}
html[data-theme="dark"] body[data-workspace-environment="sandbox"],
html[data-theme="dark"] body[data-admin-work-mode="sandbox"] {
  --color-brand: #d8b67d;
  --color-brand-dark: #ead0a5;
  --color-brand-soft: #493c28;
  --color-brand-pale: #29251e;
  background: #2c261e;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body[data-workspace-environment="sandbox"],
  html:not([data-theme="light"]) body[data-admin-work-mode="sandbox"] {
    --color-brand: #d8b67d;
    --color-brand-dark: #ead0a5;
    --color-brand-soft: #493c28;
    --color-brand-pale: #29251e;
    background: #2c261e;
  }
}

/* Assistant raccordement (/app/raccordement) */
.page-raccordement .raccordement-progress {
  margin: 0 0 var(--space-5);
  overflow-x: auto;
}
.raccordement-progress__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  min-width: min(100%, 40rem);
}
.raccordement-progress__item {
  flex: 1 1 0;
  min-width: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}
.raccordement-progress__index {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 700;
  font-size: 0.75rem;
}
.raccordement-progress__item--current {
  color: var(--color-text);
  font-weight: 600;
}
.raccordement-progress__item--current .raccordement-progress__index {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand-typo);
}
.raccordement-progress__item--done .raccordement-progress__index {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}
.raccordement-recap {
  margin: var(--space-4) 0;
}
.raccordement-recap__title {
  margin-top: 0;
  font-size: 1.05rem;
}
.raccordement-recap__lines {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}
.raccordement-recap__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
}
.raccordement-recap__line--note {
  color: var(--color-muted);
  font-size: 0.9rem;
  border-bottom: none;
}
.raccordement-recap__due {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  font-size: 1.05rem;
}
.raccordement-recap__next { margin: 0.4rem 0 0; }
.raccordement-plans {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.raccordement-plans__option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}
.raccordement-plans__option:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-pale);
}
.raccordement-estabs {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.raccordement-estabs__item {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.raccordement-dl {
  display: grid;
  grid-template-columns: minmax(7rem, 30%) 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 var(--space-4);
}
.raccordement-dl dt { color: var(--color-muted); margin: 0; }
.raccordement-dl dd { margin: 0; }
.raccordement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}
.badge--platform_enrolment.badge--active,
.badge--platform_enrolment.badge--commercially_confirmed { background: var(--color-brand-soft); color: var(--color-brand-typo); }
.badge--platform_enrolment.badge--awaiting_payment,
.badge--platform_enrolment.badge--awaiting_payment_method,
.badge--platform_enrolment.badge--enrolment_pending { background: var(--color-warning-soft); }
.badge--platform_enrolment.badge--payment_failed,
.badge--platform_enrolment.badge--enrolment_failed { background: var(--color-danger-soft, #f8d7da); color: var(--color-danger, #842029); }

/* OAuth consent (inter-SaaS) */
.page-oauth .auth-card.oauth-consent {
  width: min(100%, 32rem);
}
.oauth-consent .oauth-scope-list {
  margin: 0;
  padding-left: 1.2rem;
}
.oauth-consent .choice-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0.35rem 0;
}
.oauth-consent .label-like {
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.form-actions--split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-4);
}

/* Tiers — filtres et formulaire */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.filter-tabs__link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface);
  font-size: 0.95rem;
}
.filter-tabs__link:hover,
.filter-tabs__link:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.filter-tabs__link.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.card-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}
.party-lookup-form {
  margin-bottom: 0;
}
.party-type-choices {
  margin-bottom: var(--space-2);
}

.invoice-duplicate-list {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
}
.invoice-duplicate-list li {
  margin-bottom: var(--space-2);
}

.invoice-dup-alerts {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.invoice-dup-alert {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-accent-soft));
}
.invoice-dup-alert__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.invoice-dup-alert__severity {
  font-size: 0.92rem;
}
.invoice-dup-alert__dismiss {
  margin: 0;
}
.invoice-dup-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.invoice-dup-compare th,
.invoice-dup-compare td {
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.invoice-dup-compare thead th {
  font-weight: 600;
  background: color-mix(in srgb, var(--color-background-soft) 70%, transparent);
}
.invoice-dup-compare tbody th[scope="row"] {
  width: 8.5rem;
  color: var(--color-muted);
  font-weight: 600;
  white-space: nowrap;
}
.invoice-dup-compare__col {
  min-width: 7rem;
}
.invoice-dup-compare__cell-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.invoice-dup-compare__col:hover,
.invoice-dup-compare thead .invoice-dup-compare__col:hover a,
.invoice-dup-compare__cell-link:hover {
  color: var(--color-accent);
}
.invoice-dup-compare thead .invoice-dup-compare__col a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
[data-theme="dark"] .invoice-dup-alert {
  background: color-mix(in srgb, var(--color-surface) 82%, var(--color-accent-soft));
}
@media (max-width: 40rem) {
  .invoice-dup-compare tbody th[scope="row"] {
    white-space: normal;
    width: auto;
  }
}

/* Listes dashboard compactes — COMMON RULES §6.9 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dash-list {
  display: grid;
  gap: var(--space-sm, 0.5rem);
}
.dash-list__toolbar {
  position: sticky;
  top: 0.5rem;
  z-index: 8;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 2.5rem;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.75rem);
  background: color-mix(in srgb, var(--color-surface, #fff) 94%, transparent);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
  backdrop-filter: blur(10px);
}
/* Filtres d’une liste (statut, recherche, bouton) : une ligne qui se replie. */
.dash-list-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.dash-list-filters > label { flex: 1 1 12rem; min-width: 0; }
.dash-list-filters > button { flex: 0 0 auto; }
.dash-list__search-icon {
  display: grid;
  place-items: center;
  color: var(--color-muted);
}
.dash-list__icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.dash-list__search-input,
.dash-list__search-input:focus {
  min-width: 0;
  height: 2.5rem;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
}
.dash-list__search-input::placeholder {
  color: var(--color-muted);
}
.dash-list__menu {
  position: relative;
}
.dash-list__menu summary,
.dash-list__options,
.dash-list__add {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background, #fff);
  color: var(--color-brand-dark, var(--color-brand-typo, #24535b));
  cursor: pointer;
  list-style: none;
  text-decoration: none;
}
.dash-list__menu summary::-webkit-details-marker,
.dash-list__menu summary::marker {
  display: none;
  content: '';
}
.dash-list__menu summary:hover,
.dash-list__menu[open] summary,
.dash-list__options:hover,
.dash-list__options:focus-visible,
.dash-list__add:hover,
.dash-list__add:focus-visible {
  border-color: var(--color-brand, var(--color-accent));
  background: var(--color-brand-pale, var(--color-brand-soft));
}
.dash-list__menu-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 12;
  display: grid;
  min-width: 11rem;
  max-height: min(70vh, 24rem);
  overflow: auto;
  padding: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}
.dash-list__menu-label {
  margin: 0.35rem 0.35rem 0.15rem;
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dash-list__menu-panel a {
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm, 0.35rem);
  color: var(--color-text);
  font-size: 0.875rem;
  text-decoration: none;
}
.dash-list__menu-panel a:hover,
.dash-list__menu-panel a.is-active {
  background: var(--color-brand-pale, var(--color-brand-soft));
  color: var(--color-brand-dark, var(--color-brand-typo));
  font-weight: 700;
}
.dash-list__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.dash-list__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-text);
  font-size: 0.875rem;
  text-decoration: none;
}
.dash-list__tab b {
  font-weight: 700;
  color: var(--color-muted);
}
.dash-list__tab.is-active {
  border-color: var(--color-brand, var(--color-accent));
  background: var(--color-brand-pale, var(--color-brand-soft));
  color: var(--color-brand-dark, var(--color-brand-typo));
  font-weight: 700;
}
.dash-list__empty {
  margin: 0;
  padding: var(--space-lg, 1.25rem);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg, 0.75rem);
  color: var(--color-muted);
  text-align: center;
}
.dash-list__items {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-list__items--embedded {
  margin-top: 0.35rem;
}
.dash-list__section-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.dash-list__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface, #fff);
  overflow: hidden;
}
.dash-list__item--draft {
  border-color: color-mix(in srgb, var(--color-muted) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-background-soft) 70%, var(--color-surface, #fff));
}
.dash-list__item--ok {
  border-color: color-mix(in srgb, var(--color-success, #2f9e64) 36%, var(--color-border));
  background: color-mix(in srgb, var(--color-success-soft, #e6f6ec) 62%, var(--color-surface, #fff));
}
.dash-list__item--info {
  border-color: color-mix(in srgb, var(--color-brand, #3c8a96) 30%, var(--color-border));
  background: color-mix(in srgb, var(--color-brand-pale, var(--color-brand-soft)) 55%, var(--color-surface, #fff));
}
.dash-list__item--warn {
  border-color: color-mix(in srgb, var(--color-warning-text, #8c6f3a) 30%, var(--color-border));
  background: color-mix(in srgb, var(--color-warning-soft) 58%, var(--color-surface, #fff));
}
.dash-list__item--danger {
  border-color: color-mix(in srgb, var(--color-danger, #842029) 34%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger-soft, #f8d7da) 58%, var(--color-surface, #fff));
}
.dash-list__item--muted {
  border-color: color-mix(in srgb, var(--color-muted) 26%, var(--color-border));
  background: var(--color-background-soft);
  filter: grayscale(0.55);
  opacity: 0.78;
}
.dash-list__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.45rem 0.6rem;
  color: inherit;
  text-decoration: none;
}
.dash-list__link:hover,
.dash-list__link:focus-visible {
  background: color-mix(in srgb, var(--color-background-soft) 70%, transparent);
}
.dash-list__primary {
  display: grid;
  min-width: 0;
  gap: 0.05rem;
}
.dash-list__headline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.dash-list__headline strong,
.dash-list__primary strong,
.dash-list__primary small,
.dash-list__aside small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-list__headline strong {
  min-width: 0;
}
.dash-list__mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
}
.dash-list__mark--credit-partial {
  color: var(--color-counter-low-text, #8c6f3a);
  background: color-mix(in srgb, var(--color-warning-soft) 82%, var(--color-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--color-counter-low-text, #8c6f3a) 28%, transparent);
}
.dash-list__mark--credit-total {
  color: var(--color-brand-typo);
  background: color-mix(in srgb, var(--color-brand-pale, var(--color-brand-soft)) 78%, var(--color-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent);
}
.dash-list__primary small {
  color: var(--color-muted);
  font-size: 0.75rem;
}
.dash-list__aside {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.dash-list__amount {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-list__chevron {
  color: var(--color-muted);
  font-size: 1.35rem;
  line-height: 1;
}
.global-search { display: grid; gap: var(--space-4); }
.global-search__form { display: grid; gap: var(--space-3); }
.global-search__form .form-grid { margin: 0; }
.global-search__form .form-group { margin: 0; }
@media (min-width: 48rem) {
  .global-search__form .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.global-search__saved { display: grid; gap: var(--space-3); }
.global-search__saved h2 { margin: 0; font-size: 1rem; }
.global-search__saved p { margin: 0; }
.global-search__views { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.global-search__views li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.4rem 0.25rem 0.6rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-background-soft); }
.global-search__views a { color: var(--color-brand-typo); font-weight: 700; text-decoration: none; }
.global-search__views small { color: var(--color-muted); }
.global-search__views form { margin: 0; }
.link-button { border: 0; background: transparent; color: var(--color-muted); cursor: pointer; font: inherit; font-size: 0.75rem; text-decoration: underline; }
.global-search__save-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; align-items: end; }
.global-search__save-form label { font-size: 0.82rem; font-weight: 700; }
.global-search__count { margin: 0; color: var(--color-muted); font-size: 0.9rem; }
.global-search__kind { width: fit-content; padding: 0.1rem 0.42rem; border-radius: 999px; background: var(--color-brand-pale); color: var(--color-brand-typo); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.global-search__pagination { display: flex; justify-content: space-between; gap: var(--space-2); }
.bulk-campaigns-form { display: grid; gap: var(--space-3); }
.bulk-campaigns-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
@media (min-width: 46rem) {
  .global-search__save-form { grid-template-columns: minmax(12rem, 1fr) auto auto auto; }
  .global-search__save-form label[for="search-view-name"] { grid-column: 1 / -1; }
  .global-search__save-form label[for="search-view-visibility"] { grid-column: 2; grid-row: 2; align-self: center; }
  .global-search__save-form #search-view-visibility { grid-column: 3; grid-row: 2; }
  .global-search__save-form .btn { grid-column: 4; grid-row: 2; }
}
@media (min-width: 768px) {
  .dash-list__toolbar {
    top: 0.75rem;
  }
}

/* --- Options avancées (progressive disclosure) --- */
.expert-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-title);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  flex-shrink: 0;
}

.expert-toggle__label {
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expert-toggle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.expert-toggle[aria-pressed="true"],
html[data-expert="1"] .expert-toggle {
  background: var(--color-brand-pale);
  border-color: var(--color-brand);
  color: var(--color-brand-dark);
}

html:not([data-expert="1"]) .expert-only:not(.expert-revealed) {
  display: none;
}

.expert-ineligible {
  display: none;
}

html[data-expert="1"] .expert-discover,
html[data-expert="1"] .expert-reveal-hint {
  display: none;
}

html[data-expert="1"] .simple-only {
  display: none;
}

/* Délégations collaborateurs : la période reste lisible et éditable sans alourdir la table. */
.member-access-window {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background-soft);
}
.member-access-window legend {
  padding: 0 var(--space-2);
  font-weight: 650;
}
.member-access-window__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.member-access-window--compact {
  display: inline-block;
  padding: 0;
  background: transparent;
}
.member-access-window--compact > summary {
  min-height: 2rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-title);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.member-access-window--compact > summary::-webkit-details-marker,
.member-access-window--compact > summary::marker { display: none; }
.member-access-window--compact > summary::after { content: "⌄"; margin-left: 0.4rem; color: var(--color-muted); }
.member-access-window--compact[open] > summary { margin-bottom: var(--space-2); }
.member-access-window__form {
  min-width: 16rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 0.4rem 1.1rem rgb(29 78 83 / 0.12);
}
.member-access-window__form .member-access-window__fields { grid-template-columns: 1fr; }
@media (max-width: 35rem) {
  .member-access-window__fields { grid-template-columns: 1fr; }
  .member-access-window--compact,
  .member-access-window--compact > summary { width: 100%; }
  .member-access-window__form { min-width: 0; }
}

.expert-reveal-hint {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.expert-discover {
  margin-top: var(--space-3);
}

@media (max-width: 47.99rem) {
  .page-dashboard .expert-toggle {
    width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
  }
  .page-dashboard .expert-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .page-dashboard .expert-toggle::before {
    content: "⚙";
    font-size: 1.1rem;
    line-height: 1;
  }
}

/* L23 — encours / relances */
.card-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 48rem) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kv-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}
.kv-list dt {
  color: var(--color-muted);
  font-weight: 500;
}
.kv-list dd {
  margin: 0;
}
.support-thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.support-thread__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.support-thread__item p {
  margin: 0 0 0.35rem;
}
.support-thread__item--member {
  background: var(--color-background-soft);
}
.closure-summary {
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
}
.closure-summary dd {
  margin-bottom: 0.5rem;
}
@media (min-width: 48rem) {
  .closure-summary {
    grid-template-columns: minmax(12rem, auto) 1fr;
  }
}
.form-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 48rem) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mail-preview {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--color-background-soft);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  max-height: 16rem;
  overflow: auto;
}
.step-list {
  margin: 0;
  padding-left: 1.25rem;
}
.step-list li {
  margin-bottom: 0.75rem;
}
.dash-list__item--overdue .dash-list__link,
.dash-list__item--collection .dash-list__link {
  border-left: 3px solid var(--color-danger, #842029);
}
.dash-list__item--disputed .dash-list__link,
.dash-list__item--promised .dash-list__link {
  border-left: 3px solid var(--color-warning, #997404);
}
.dash-list__item--partial .dash-list__link {
  border-left: 3px solid var(--color-brand, #0b6e4f);
}
.auth-alternative {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
  text-align: center;
}
.auth-alternative .btn { width: 100%; }
.form-message { min-height: 1.2rem; margin: 0; color: var(--color-muted); font-size: .9rem; }
.form-message--error { color: var(--color-danger); }
.passkey-list { margin-top: 1rem; }
.passkey-list .dash-list__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.passkey-list .muted { display: block; font-size: .85rem; margin-top: .2rem; }

/* ——— Présentation documentaire : galerie de modèles, éditeur et aperçu en direct ——— */
.cmp-panel {
  display: grid;
  gap: var(--space-5);
}
.cmp-intro h2 { margin: 0 0 var(--space-1); }
.cmp-intro p { margin: 0; max-width: 46rem; }

.cmp-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}
.cmp-card {
  position: relative;
  display: grid;
  align-content: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cmp-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--color-brand);
}
.cmp-card.is-selected {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px var(--color-brand);
}
.cmp-card.is-selected .cmp-thumb::after {
  content: "Affiché";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cmp-thumb {
  position: relative;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.cmp-thumb__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 794px;
  height: 1123px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
  background: #fff;
}
.cmp-card__body {
  display: grid;
  gap: 0.3rem;
  padding: var(--space-3);
}
.cmp-card__link {
  color: var(--color-title);
  font-weight: 700;
  text-decoration: none;
}
.cmp-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.cmp-card__link:focus-visible { outline: 3px solid var(--color-brand); outline-offset: -3px; border-radius: var(--radius-lg); }
.cmp-card__name { font-weight: 700; color: var(--color-title); }
.cmp-card__meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--color-muted);
}
.cmp-card__meta span { margin-left: 0.2rem; }
.cmp-card__tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.cmp-card__tags:empty { display: none; }
.cmp-card--new {
  border-style: dashed;
  background: var(--color-brand-pale);
}
.cmp-new {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.4rem;
  min-height: 100%;
  padding: var(--space-5) var(--space-3);
  text-align: center;
  text-decoration: none;
  font-size: 0.85rem;
}
.cmp-new__plus {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 1.8rem;
  line-height: 1;
}
.cmp-swatch {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}
.cmp-swatch circle {
  stroke: var(--color-border);
  stroke-width: 1;
}
.cmp-swatch--half + .cmp-swatch--half { margin-left: -0.45rem; }

.cmp-editor {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
.cmp-editor__form { display: grid; gap: var(--space-4); min-width: 0; }
.cmp-preview { order: -1; }
@media (min-width: 64rem) {
  .cmp-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
  .cmp-preview {
    order: 0;
    position: sticky;
    top: calc(var(--header-h) + 0.75rem);
  }
}
.cmp-group {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.cmp-group > legend {
  padding: 0 0.4rem;
  font-weight: 700;
  color: var(--color-title);
}
.cmp-group > .form-hint, .cmp-group > .muted { margin: 0; }
.cmp-scope > summary { cursor: pointer; font-weight: 700; color: var(--color-title); }
.cmp-scope[open] > summary { margin-bottom: var(--space-3); }

.cmp-styles {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.cmp-style {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.cmp-style:hover { border-color: var(--color-brand); }
.cmp-style:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-pale);
  box-shadow: 0 0 0 1px var(--color-brand);
}
.cmp-style input { margin-top: 0.2rem; accent-color: var(--color-brand); }
.cmp-style__body { display: grid; gap: 0.15rem; font-size: 0.85rem; }
.cmp-style__body strong { color: var(--color-title); font-size: 0.95rem; }

.cmp-palettes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.cmp-palettes__label { font-size: 0.85rem; color: var(--color-muted); margin-right: 0.25rem; }
.cmp-palette {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  cursor: pointer;
  transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.cmp-palette:hover, .cmp-palette:focus-visible { border-color: var(--color-brand); box-shadow: 0 0 0 2px var(--color-brand-soft); }
.cmp-palette .cmp-swatch { width: 1.4rem; height: 1.4rem; }

.cmp-color {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 7.25rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0 0;
  border-top: 1px dashed var(--color-border);
}
.cmp-color__picker {
  -webkit-appearance: none;
  appearance: none;
  width: 3.1rem;
  height: 3.1rem;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: 0.9rem;
  background: none;
  box-shadow: var(--field-shadow);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.cmp-color__picker:hover { border-color: var(--color-brand); }
.cmp-color__picker:focus-visible { outline: 3px solid var(--color-brand-soft); border-color: var(--color-brand); }
.cmp-color__picker::-webkit-color-swatch-wrapper { padding: 0; }
.cmp-color__picker::-webkit-color-swatch { border: 0; border-radius: 0.65rem; }
.cmp-color__picker::-moz-color-swatch { border: 0; border-radius: 0.65rem; }
.cmp-color__text { display: grid; gap: 0.1rem; min-width: 0; font-size: 0.82rem; }
.cmp-color__text label { font-weight: 700; font-size: 0.95rem; color: var(--color-title); }
.cmp-color__warn { color: var(--color-danger); font-weight: 600; }
.cmp-color__hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  text-align: center;
  min-width: 0;
}
.cmp-color__hex.is-invalid { border-color: var(--color-danger); }

.cmp-range { display: grid; gap: 0.3rem; }
.cmp-range label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.cmp-range output { font-variant-numeric: tabular-nums; color: var(--color-brand-typo); font-weight: 700; }
.cmp-range input[type="range"] { width: 100%; accent-color: var(--color-brand); }

.cmp-toggles {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.cmp-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.cmp-toggle:hover { border-color: var(--color-brand); }
.cmp-toggle:has(input:checked) { background: var(--color-brand-pale); border-color: var(--color-brand); }
.cmp-toggle input { accent-color: var(--color-brand); }

.cmp-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 -0.35rem 1rem rgba(15, 35, 40, 0.08);
}
.cmp-dirty { font-weight: 600; color: var(--color-accent); }
.cmp-secondary { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.cmp-preview {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background-soft);
}
.cmp-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cmp-preview__bar .muted { margin-left: 0.4rem; font-size: 0.85rem; }
.cmp-preview__identity { margin: 0; }
.cmp-preview__hint { margin: 0; font-size: 0.85rem; }
.cmp-stage {
  position: relative;
  min-height: 16rem;
  max-height: calc(100vh - 14rem);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0.4rem 1.4rem rgba(15, 35, 40, 0.2);
}
.cmp-paper {
  position: absolute;
  top: 0;
  left: 0;
  width: 794px;
  height: 1123px;
  transform-origin: 0 0;
  background: #fff;
}
.cmp-paper::after {
  /* Repère de saut de page : un filet tous les 1123 px (hauteur A4 à 96 dpi). */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 1121px, #d97757 1121px, #d97757 1123px);
  opacity: 0.55;
}
.cmp-paper[data-pages="1"]::after { display: none; }
.cmp-paper__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  transition: opacity 0.2s var(--ease);
}
.cmp-paper.is-loading .cmp-paper__frame { opacity: 0.45; }

.cmp-zoom {
  width: min(96vw, 58rem);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
}
.cmp-zoom::backdrop { background: rgba(10, 20, 25, 0.65); }
.cmp-zoom__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.cmp-zoom__stage {
  position: relative;
  overflow: auto;
  max-height: calc(94vh - 3.6rem);
  background: var(--color-background-soft);
}
@media (max-width: 40rem) {
  .cmp-color { grid-template-columns: auto minmax(0, 1fr); }
  .cmp-color__hex { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-card, .cmp-card:hover { transition: none; transform: none; }
}

/* Lignes de tableau ouvrant un détail (tr[data-row-href]). */
tr[data-row-href] { cursor: pointer; }
tr[data-row-href]:hover td { background: var(--color-brand-pale); }

/* Admin → E-mails : détail d’un message du journal local. */
.admin-mail__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.admin-mail__meta dt { font-weight: 600; }
.admin-mail__meta dd { margin: 0; overflow-wrap: anywhere; }
.admin-mail__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

/* COM-06 — actions d’abonnement (résilier, conserver, changer de formule) */
.subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-3);
}
.subscription-actions .btn { flex: 0 1 auto; }
@media (max-width: 480px) {
    .subscription-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ADM-UX-03 : accueil plateforme compact. */
.admin-home-todo { list-style: none; padding: 0; margin: 0; }
.admin-home-todo li + li { border-top: 1px solid var(--color-border); }
.admin-home-todo a { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .65rem .25rem; }
.admin-home-todo a span { flex: 1 1 18rem; }
.admin-home-status { font-size: .875rem; line-height: 1.7; }

/* ADM-UX-05 : tâche cron cPanel (champs séparés, commande seule à copier). */
.scheduler-cron { display: grid; gap: var(--space-3); margin-block: var(--space-3); }
.scheduler-cron__intro { margin: 0; }
.scheduler-cron__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-2); margin: 0; }
.scheduler-cron__field { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); background: var(--color-background-soft); }
.scheduler-cron__field--common { grid-column: 1 / -1; }
.scheduler-cron__field dt { font-size: .75rem; color: var(--color-muted); }
.scheduler-cron__field dd { margin: 0; font-weight: 600; }
.scheduler-cron__label { font-weight: 600; }
.scheduler-cron__copy { display: flex; gap: var(--space-2); align-items: stretch; }
.scheduler-cron__command { flex: 1 1 auto; min-width: 0; resize: none; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; }
.scheduler-cron__copy .btn { align-self: flex-start; }
.scheduler-cron__issues { margin: 0; color: var(--color-danger); }
.scheduler-state { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.scheduler-tasks .form-hint { display: block; }
@media (max-width: 480px) {
  .scheduler-cron__copy { flex-direction: column; }
}

/* ADM-UX-05 : accueil groupé par objectif. */
.admin-home-goals { display: grid; gap: var(--space-4); }
.admin-home-goal__count { display: inline-flex; min-width: 1.75rem; justify-content: center; margin-inline-start: var(--space-2); padding: 0 .5rem; border-radius: 999px; background: var(--color-background-soft); font-size: .8rem; font-weight: 600; }
.admin-home-goal__done { margin: 0; color: var(--color-muted); }
.admin-home-goal__list { list-style: none; padding: 0; margin: 0; }
.admin-home-goal__item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-1) var(--space-3); align-items: start; padding: var(--space-3) 0; }
.admin-home-goal__item + .admin-home-goal__item { border-top: 1px solid var(--color-border); }
.admin-home-goal__dot { width: .65rem; height: .65rem; margin-top: .4rem; border-radius: 50%; background: var(--color-muted); }
.admin-home-goal__item--danger .admin-home-goal__dot { background: var(--color-danger); }
.admin-home-goal__item--warn .admin-home-goal__dot { background: var(--color-accent); }
.admin-home-goal__text { display: grid; gap: .15rem; min-width: 0; }
.admin-home-goal__title { font-weight: 600; color: var(--color-title); }
.admin-home-goal__action { margin: 0; }
.admin-home-goal__detail { margin: 0; font-size: .85rem; color: var(--color-muted); }
.admin-home-goal__item .scheduler-cron { grid-column: 2 / -1; margin-block: 0; }
.admin-home-goal__testing > summary { cursor: pointer; font-weight: 600; padding: var(--space-3) var(--space-4); }
.admin-home-goal__testing[open] > summary { border-bottom: 1px solid var(--color-border); }
.admin-home-goal__testing .admin-home-goal__list, .admin-home-goal__testing > p { padding-inline: var(--space-4); }
@media (max-width: 600px) {
  .admin-home-goal__item { grid-template-columns: auto 1fr; }
  .admin-home-goal__item > .btn { grid-column: 2; justify-self: start; }
}