/* ==========================================================================
   Charte IA & PME (template-charte-ia-pme.php).
   Loaded only for that page template (see functions.php), after main.css.

   Same text as the PDF charter, in the MTL connecte visual language: Syne
   uppercase titles + Neue Montreal text (both loaded site-wide), dark pages,
   the brand palette (inc/acf-color-palette.php), square corners, lime
   outlined buttons with the ↗ arrow, and components borrowed from the site:
   FAQ/legal violet hero, À propos numbered rows, Thématiques stat bars,
   Parcours PME lime banner, FAQ form fields and accordions. Print switches the semantic tokens to a light, writable palette.
   Everything is scoped under .ui-charte.
   ========================================================================== */

/* ---- Tokens --------------------------------------------------------------
   Declared on the root too (only on this template) so the print @page rules,
   which inherit from the root element, can use them. */
:root:has(.ui-charte),
.ui-charte {
  /* Primitives — the site palette (main.css, acf-color-palette.php, faq.css). */
  --charte-lime: #c3ff74;
  --charte-yellow: #efff8b;
  --charte-pink: #ffb6ee;
  --charte-sky: #78c6da;
  --charte-violet: #b597e9;
  --charte-violet-shape: #5b3e964f;
  --charte-orange: #ff764a;
  --charte-coral: #ff8a8a;
  --charte-black: #111;
  --charte-ink: #1d2122;
  --charte-grey-950: #161616;
  --charte-grey-900: #1a1a1a;
  --charte-grey-850: #262626;
  --charte-grey-800: #333;
  --charte-grey-700: #575757;
  --charte-grey-500: #8a8a8a;
  --charte-grey-400: #9a9a9a;
  --charte-grey-300: #b0b0b0;
  --charte-grey-250: #c9c9c9;
  --charte-grey-200: #dcdcdc;
  --charte-grey-50: #f5f5f5;
  --charte-white: #fff;

  /* Semantic roles */
  --charte-bg: var(--charte-black);
  --charte-surface: var(--charte-grey-950);
  --charte-fg: var(--charte-white);
  --charte-fg-muted: var(--charte-grey-300);
  --charte-fg-soft: var(--charte-grey-200);
  --charte-fg-subtle: var(--charte-grey-500);
  --charte-label: var(--charte-grey-400);
  --charte-rule: var(--charte-grey-700);
  --charte-border: var(--charte-grey-800);
  --charte-border-soft: var(--charte-grey-850);
  --charte-track: var(--charte-grey-800);
  --charte-accent: var(--charte-lime);
  --charte-accent-ink: var(--charte-lime);
  --charte-accent-hover: var(--charte-yellow);
  --charte-on-accent: var(--charte-black);
  --charte-highlight: var(--charte-yellow);
  --charte-warning: var(--charte-coral);
  --charte-warning-ink: var(--charte-coral);
  --charte-ring: var(--charte-lime);
  --charte-hero-bg: var(--charte-violet);
  --charte-hero-shape: var(--charte-violet-shape);
  --charte-hero-fg: var(--charte-black);
  --charte-hero-fg-soft: var(--charte-ink);

  /* Type — the site's families (main.css :root) */
  --charte-font-display: var(--font-display, 'Syne', sans-serif);
  --charte-font-body: var(--font-body, 'Neue Montreal', sans-serif);
  --charte-fs-hero: clamp(44px, 8.6vw, 128px);
  --charte-fs-figure: clamp(48px, 6vw, 88px);
  --charte-fs-formula: clamp(28px, 4.4vw, 64px);
  --charte-fs-title: clamp(26px, 3.4vw, 44px);
  --charte-fs-banner: clamp(24px, 3vw, 40px);
  --charte-fs-tagline: clamp(20px, 2.4vw, 32px);
  --charte-fs-subtitle: clamp(22px, 2.4vw, 32px);
  --charte-fs-tile-label: clamp(22px, 2.2vw, 32px);
  --charte-fs-num: 36px;
  --charte-fs-row-title: clamp(16px, 1.4vw, 20px);
  --charte-fs-lead: 18px;
  --charte-fs-body: 16px;
  --charte-fs-choice: 15px;
  --charte-fs-small: 14px;
  --charte-fs-label: 13px;
  --charte-fs-micro: 12px;
  --charte-lh-display: 0.92;
  --charte-lh-title: 1.05;
  --charte-lh-body: 1.5;
  --charte-tracking-hero: -2.6px;
  --charte-tracking-display: -1px;
  --charte-tracking-num: -2px;
  --charte-tracking-tight: -0.6px;
  --charte-tracking-caps: 0.6px;
  --charte-tracking-button: 1px;

  /* Space — 4px scale */
  --charte-space-1: 4px;
  --charte-space-2: 8px;
  --charte-space-3: 12px;
  --charte-space-4: 16px;
  --charte-space-5: 20px;
  --charte-space-6: 24px;
  --charte-space-7: 28px;
  --charte-space-8: 32px;
  --charte-space-10: 40px;
  --charte-space-12: 48px;
  --charte-space-14: 56px;
  --charte-space-16: 64px;

  /* Layout — the site's gutters and section rhythm (generique.css) */
  --charte-gutter: clamp(20px, 4vw, 30px);
  --charte-section-pad: clamp(48px, 6.5vw, 110px);
  --charte-col-gap: clamp(20px, 3vw, 44px);
  --charte-num-col: clamp(56px, 7vw, 120px);
  --charte-measure: 75ch;
  --charte-hairline: 1px;
  --charte-rule-strong: 2px;
  --charte-bar: 6px;
  --charte-bar-thick: 8px;
  --charte-dot: 6px;
  --charte-radio: 22px;
  --charte-journey-head: 56px;
  --charte-step-badge: 48px;
  --charte-hero-logo-w: clamp(150px, 16vw, 220px);
  --charte-hero-logo-mtl-w: calc(var(--charte-hero-logo-w) * 1.3); /* same height as the Printemps logo */
  --charte-touch: 44px;
  --charte-nav-h: 48px;
  --charte-nav-marker: 3px;
  --charte-z-nav: 10;
  --charte-duration: 0.2s;
  --charte-radius-pill: 999px;

  /* Print — 900px of layout maps to the printable width; see the print section. */
  --charte-print-zoom: 0.8;
  --charte-print-inset: 13.5mm;
  --charte-print-margin-top: 18mm;
  --charte-print-margin-bottom: 16mm;
  --charte-print-stripe: 5px;
  --charte-print-running-size: 7pt;
  --charte-print-logo-w: 22.5mm;
}

/* Per-component colour. --tone paints fills and bars; --tone-ink is the same
   colour for text, swapped for black in print (see --charte-ink-override). */
.ui-charte-tone--lime {
  --tone: var(--charte-lime);
  --tone-ink: var(--charte-ink-override, var(--charte-lime));
}

.ui-charte-tone--sky {
  --tone: var(--charte-sky);
  --tone-ink: var(--charte-ink-override, var(--charte-sky));
}

.ui-charte-tone--pink {
  --tone: var(--charte-pink);
  --tone-ink: var(--charte-ink-override, var(--charte-pink));
}

.ui-charte-tone--yellow {
  --tone: var(--charte-yellow);
  --tone-ink: var(--charte-ink-override, var(--charte-yellow));
}

.ui-charte-tone--orange {
  --tone: var(--charte-orange);
  --tone-ink: var(--charte-ink-override, var(--charte-orange));
}

.ui-charte-tone--neutral {
  --tone: var(--charte-grey-500);
  --tone-ink: var(--charte-ink-override, var(--charte-grey-300));
}

/* ---- Base ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html:has(.ui-charte) {
    scroll-behavior: smooth;
  }
}

/* Anchor jumps and keyboard focus land below the site header and the sticky
   section menu instead of underneath them. */
html:has(.ui-charte) {
  scroll-padding-top: calc(var(--header-h, 64px) + var(--charte-nav-h) + var(--charte-hairline));
}

.ui-charte {
  background: var(--charte-bg);
  color: var(--charte-fg);
  font-family: var(--charte-font-body);
  font-size: var(--charte-fs-body);
  font-weight: 500;
  line-height: var(--charte-lh-body);
}

/* The site sets Syne on every heading; components pick their own family. */
.ui-charte :where(h1, h2, h3) {
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.ui-charte :where(ol, ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-charte :where(input, textarea, button) {
  font: inherit;
  color: inherit;
}

.ui-charte :focus-visible {
  outline: var(--charte-rule-strong) solid var(--charte-ring);
  outline-offset: var(--charte-rule-strong);
}

/* Scoped so it wins over component display rules (e.g. .ui-charte-eyebrow). */
.ui-charte .ui-charte-print-only {
  display: none;
}

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

.ui-charte-container {
  padding-inline: var(--charte-gutter);
}

.ui-charte-section {
  padding: var(--charte-section-pad) var(--charte-gutter) 0;
}

.ui-charte-section:last-child {
  padding-bottom: var(--charte-section-pad);
}

/* Section opening rule, inside the gutters as on the generic pages (.hp-event-inner). */
.ui-charte-section > .ui-charte-container {
  padding-inline: 0;
  padding-top: var(--charte-space-6);
  border-top: var(--charte-hairline) solid var(--charte-rule);
}

/* Vertical rhythm inside a section. */
:is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > * + * {
  margin-top: var(--charte-space-6);
}

:is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > .ui-charte-title {
  margin-top: var(--charte-space-4);
}

:is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > .ui-charte-lead + :not(.ui-charte-lead) {
  margin-top: var(--charte-space-12);
}

:is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > .ui-charte-label--spaced {
  margin-top: var(--charte-space-14);
}

:is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > .ui-charte-label--spaced + * {
  margin-top: var(--charte-space-5);
}

:is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > :is(.ui-charte-panel, .ui-charte-callout, .ui-charte-banner, .ui-charte-split, .ui-charte-method, .ui-charte-credits) {
  margin-top: var(--charte-space-12);
}

/* ---- Shared type ---------------------------------------------------------- */
.ui-charte-eyebrow {
  display: block;
  color: var(--charte-accent-ink);
  font-family: var(--charte-font-body);
  font-size: var(--charte-fs-small);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
}

.ui-charte-title {
  max-width: 28ch;
  font-family: var(--charte-font-display);
  font-size: var(--charte-fs-title);
  font-weight: 500;
  line-height: var(--charte-lh-title);
  letter-spacing: var(--charte-tracking-display);
  text-transform: uppercase;
  color: var(--charte-fg);
}

.ui-charte-subtitle {
  font-family: var(--charte-font-display);
  font-size: var(--charte-fs-subtitle);
  font-weight: 500;
  line-height: var(--charte-lh-title);
  letter-spacing: var(--charte-tracking-display);
  text-transform: uppercase;
}

.ui-charte-lead {
  max-width: var(--charte-measure);
  color: var(--charte-fg-muted);
  font-size: var(--charte-fs-lead);
}

:is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > .ui-charte-lead + .ui-charte-lead {
  margin-top: var(--charte-space-4);
}

.ui-charte-text {
  color: var(--charte-fg-muted);
}

.ui-charte :is(.ui-charte-lead, .ui-charte-text) strong {
  color: var(--charte-fg);
  font-weight: 700;
}

.ui-charte-label {
  display: block;
  color: var(--charte-label);
  font-size: var(--charte-fs-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
}

.ui-charte-note {
  max-width: var(--charte-measure);
  color: var(--charte-fg-subtle);
  font-size: var(--charte-fs-small);
}

.ui-charte-dot {
  flex: none;
  display: inline-block;
  width: var(--charte-dot);
  height: var(--charte-dot);
  background: currentColor;
}

/* Inline links read like the site's legal pages: lime, underlined. */
.ui-charte-text a,
.ui-charte-stage-support a {
  color: var(--charte-accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ui-charte-text a:hover,
.ui-charte-stage-support a:hover {
  text-decoration-thickness: 2px;
}

/* ---- Icons: the site's ↗ arrow (header CTA); rotated ↘ for in-page links -- */
.ui-charte-icon {
  flex: none;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  rotate: 90deg;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M12.5 4.27V15H15V0H0v2.5h10.73L0 13.23 1.77 15 12.5 4.27Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M12.5 4.27V15H15V0H0v2.5h10.73L0 13.23 1.77 15 12.5 4.27Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ui-charte-icon--ext {
  width: 11px;
  height: 11px;
  rotate: none;
}

/* ---- Buttons (generique.css .hp-hero-cta, header CTA) -------------------- */
.ui-charte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--charte-space-3);
  min-height: var(--charte-touch);
  padding: var(--charte-space-4) var(--charte-space-6);
  border: var(--charte-hairline) solid var(--charte-accent);
  background: transparent;
  color: var(--charte-accent-ink);
  font-family: var(--charte-font-body);
  font-size: var(--charte-fs-body);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--charte-tracking-button);
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.ui-charte-btn:hover {
  background: var(--charte-accent);
  color: var(--charte-on-accent);
}

.ui-charte-btn--primary {
  background: var(--charte-accent);
  color: var(--charte-on-accent);
}

.ui-charte-btn--primary:hover {
  border-color: var(--charte-accent-hover);
  background: var(--charte-accent-hover);
}

.ui-charte-btn--quiet {
  border-color: var(--charte-rule);
  color: var(--charte-fg);
}

.ui-charte-btn--quiet:hover {
  border-color: var(--charte-fg);
  background: transparent;
  color: var(--charte-fg);
}

/* Black button on a lime banner (Parcours PME). */
.ui-charte-btn--ink {
  border-color: var(--charte-black);
  background: var(--charte-black);
  color: var(--charte-lime);
}

.ui-charte-btn--ink:hover {
  background: var(--charte-ink);
  color: var(--charte-lime);
}

.ui-charte-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--charte-space-4);
}

/* ---- Cover: violet hero (FAQ / legal family) ----------------------------- */
.ui-charte-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(32px, 4vw, 56px);
  background: var(--charte-hero-bg);
  color: var(--charte-hero-fg);
}

/* The MTL chevrons, as in the FAQ hero. */
.ui-charte-hero-bg {
  position: absolute;
  top: 0;
  right: -12%;
  width: auto;
  height: 100%;
  fill: var(--charte-hero-shape);
  pointer-events: none;
}

.ui-charte-hero .ui-charte-container {
  position: relative;
}

.ui-charte-hero :focus-visible {
  outline-color: var(--charte-hero-fg);
}

.ui-charte-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--charte-space-4);
}

.ui-charte-hero-brands {
  display: flex;
  align-items: center;
  gap: var(--charte-space-6);
}

/* The supplied logo is white; the violet hero needs it black. */
.ui-charte-hero-logo {
  display: block;
  width: var(--charte-hero-logo-w);
  height: auto;
  filter: brightness(0);
}

/* Print-only co-brand (display comes from .ui-charte-print-only). */
.ui-charte-hero-logo-mtl {
  box-sizing: content-box;
  width: var(--charte-hero-logo-mtl-w);
  height: auto;
  padding-left: var(--charte-space-6);
  border-left: var(--charte-hairline) solid var(--charte-hero-fg);
}

.ui-charte-hero-kicker,
.ui-charte-hero-eyebrow,
.ui-charte-hero-edition {
  color: var(--charte-hero-fg-soft);
  font-size: var(--charte-fs-lead);
  font-weight: 500;
  text-transform: uppercase;
}

.ui-charte-hero-eyebrow {
  margin-top: clamp(40px, 7vw, 96px);
}

.ui-charte-hero-title {
  margin-top: var(--charte-space-3);
  font-family: var(--charte-font-display);
  font-size: var(--charte-fs-hero);
  font-weight: 500;
  line-height: var(--charte-lh-display);
  letter-spacing: var(--charte-tracking-hero);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.ui-charte-hero-title > span {
  display: block;
}

.ui-charte-hero-rule {
  height: var(--charte-bar-thick);
  margin-block: clamp(20px, 2.5vw, 28px) clamp(18px, 2vw, 24px);
  background: var(--charte-hero-fg);
}

.ui-charte-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--charte-space-6) var(--charte-space-16);
}

.ui-charte-hero-intro {
  flex: 1 1 520px;
  max-width: 760px;
}

/* Inverse highlight, like "RESPONSABLE" on the À propos page. */
.ui-charte-hero-tagline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--charte-space-1);
  font-family: var(--charte-font-display);
  font-size: var(--charte-fs-tagline);
  font-weight: 500;
  line-height: var(--charte-lh-title);
  letter-spacing: var(--charte-tracking-display);
  text-transform: uppercase;
}

.ui-charte-hero-tagline > span {
  padding: var(--charte-space-1) var(--charte-space-3);
  background: var(--charte-black);
  color: var(--charte-lime);
}

.ui-charte-hero-lead {
  margin-top: var(--charte-space-6);
  color: var(--charte-hero-fg-soft);
  font-size: var(--charte-fs-lead);
}

.ui-charte-hero-audience {
  margin-top: var(--charte-space-3);
  color: var(--charte-hero-fg-soft);
  font-weight: 400;
}

.ui-charte-hero-path {
  margin-top: var(--charte-space-6);
  padding-left: var(--charte-space-4);
  border-left: var(--charte-space-1) solid var(--charte-hero-fg);
  color: var(--charte-hero-fg-soft);
  font-size: var(--charte-fs-small);
}

.ui-charte-hero-path-label {
  margin-bottom: var(--charte-space-1);
  color: var(--charte-hero-fg);
  font-size: var(--charte-fs-label);
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
}

.ui-charte-hero-edition {
  display: inline-flex;
  align-items: center;
  gap: var(--charte-space-3);
  color: var(--charte-hero-fg);
}

/* ---- Section menu: sticky under the site header -------------------------
   One row of tabs, scrollable sideways when it does not fit; the current
   section (aria-current, set by js) gets a marker in its colour. */
.ui-charte-nav {
  position: sticky;
  z-index: var(--charte-z-nav);
  top: var(--header-h, 64px);
  background: var(--charte-bg);
  border-bottom: var(--charte-hairline) solid var(--charte-border);
}

.ui-charte-nav-list {
  position: relative; /* offset parent for the js that scrolls the current tab into view */
  display: flex;
  justify-content: space-between;
  gap: var(--charte-space-1);
  /* Labels line up with the content edge; the links carry the rest of the gutter. */
  padding-inline: calc(var(--charte-gutter) - var(--charte-space-2));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--charte-border) transparent;
}

.ui-charte-nav-list > li {
  flex: none;
}

.ui-charte-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--charte-nav-h);
  padding-inline: var(--charte-space-2);
  color: var(--charte-fg-muted);
  font-size: var(--charte-fs-label);
  letter-spacing: var(--charte-tracking-caps);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.ui-charte-nav-link::after {
  content: '';
  position: absolute;
  right: var(--charte-space-2);
  bottom: 0;
  left: var(--charte-space-2);
  height: var(--charte-nav-marker);
  background: var(--tone);
  transform: scaleX(0);
}

.ui-charte-nav-link:hover,
.ui-charte-nav-link[aria-current] {
  color: var(--charte-fg);
}

.ui-charte-nav-link[aria-current]::after {
  transform: scaleX(1);
}

/* The list clips anything outside it, so the focus ring goes inside. */
.ui-charte-nav-link:focus-visible {
  outline-offset: calc(-1 * var(--charte-rule-strong));
}

@media (prefers-reduced-motion: no-preference) {
  .ui-charte-nav-link {
    transition: color var(--charte-duration);
  }

  .ui-charte-nav-link::after {
    transition: transform var(--charte-duration);
  }
}

/* ---- Annexes: FAQ accordion rows -----------------------------------------
   Heading + button disclosure (aria-expanded, js). Collapsed, the three
   annexes stack as rows between rules; the markup ships them open so they
   stay readable without js, and print always shows them. */
.ui-charte-annex-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--charte-space-4) var(--charte-col-gap);
  width: 100%;
  padding: 0 0 var(--charte-space-6);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.ui-charte-annex-toggle > .ui-charte-eyebrow {
  grid-column: 1;
}

.ui-charte-annex-toggle > .ui-charte-title {
  display: block;
  grid-column: 1;
}

.ui-charte-annex-icon {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: var(--charte-touch);
  height: var(--charte-touch);
  border: var(--charte-hairline) solid var(--charte-accent);
  color: var(--charte-accent-ink);
}

/* Plus sign; the vertical bar folds away when open (minus). */
.ui-charte-annex-icon::before,
.ui-charte-annex-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--charte-space-4);
  height: var(--charte-rule-strong);
  background: currentColor;
  translate: -50% -50%;
}

.ui-charte-annex-icon::after {
  rotate: 90deg;
}

.ui-charte-annex-toggle[aria-expanded='true'] .ui-charte-annex-icon::after {
  scale: 0 1;
}

.ui-charte-annex-toggle:hover .ui-charte-annex-icon {
  background: var(--charte-accent);
  color: var(--charte-on-accent);
}

.ui-charte-annex-toggle:hover > .ui-charte-title {
  color: var(--charte-accent-ink);
}

.ui-charte-section .ui-charte-container > .ui-charte-annex-body {
  margin-top: 0;
}

/* Collapsed rows sit right under each other; an open annex keeps the usual
   section gap before the next one. The last row closes the list. Screen
   only: print opens every annex. */
@media screen {
  .ui-charte-annex:has([aria-expanded='false']) + .ui-charte-annex {
    padding-top: 0;
  }

  .ui-charte-annex:last-child:has([aria-expanded='false']) > .ui-charte-container {
    border-bottom: var(--charte-hairline) solid var(--charte-rule);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ui-charte-annex-icon,
  .ui-charte-annex-icon::after,
  .ui-charte-annex-toggle > .ui-charte-title {
    transition: background var(--charte-duration), color var(--charte-duration), scale var(--charte-duration);
  }
}

/* ---- Sommaire: À propos numbered rows, as links --------------------------- */
.ui-charte-summary > .is-group-start {
  margin-top: var(--charte-space-6);
}

.ui-charte-summary-row {
  display: grid;
  grid-template-columns: var(--charte-num-col) minmax(0, 1fr) minmax(0, 0.9fr) auto;
  align-items: baseline;
  gap: var(--charte-space-4) var(--charte-col-gap);
  padding: clamp(18px, 2vw, 28px) var(--charte-space-3);
  border-top: var(--charte-hairline) solid var(--charte-rule);
  color: var(--charte-fg);
  text-decoration: none;
}

.ui-charte-summary > li:last-child > .ui-charte-summary-row,
.ui-charte-summary > li:has(+ .is-group-start) > .ui-charte-summary-row {
  border-bottom: var(--charte-hairline) solid var(--charte-rule);
}

.ui-charte-summary-row.is-highlight {
  background: var(--charte-surface);
}

.ui-charte-summary-num,
.ui-charte-row-num,
.ui-charte-library-num {
  font-family: var(--charte-font-display);
  font-size: var(--charte-fs-num);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: var(--charte-tracking-num);
  color: var(--tone-ink);
}

.ui-charte-summary-title,
.ui-charte-row-title {
  font-family: var(--charte-font-display);
  font-size: var(--charte-fs-row-title);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: var(--charte-tracking-tight);
  text-transform: uppercase;
  color: var(--charte-fg);
}

.ui-charte-summary-text {
  color: var(--charte-fg-muted);
}

.ui-charte-summary-row .ui-charte-icon {
  align-self: center;
  color: var(--tone-ink);
}

.ui-charte-summary-row:hover {
  background: var(--tone);
}

.ui-charte-summary-row:hover > * {
  color: var(--charte-black);
}

/* ---- Callouts & panels ---------------------------------------------------- */
/* Programmation intro: a coloured bar on the left. */
.ui-charte-callout {
  max-width: var(--charte-measure);
  padding: var(--charte-space-1) 0 var(--charte-space-1) var(--charte-space-6);
  border-left: var(--charte-space-1) solid var(--tone);
}

.ui-charte-callout .ui-charte-eyebrow,
.ui-charte-outline .ui-charte-eyebrow,
.ui-charte-credit .ui-charte-eyebrow {
  color: var(--tone-ink);
}

.ui-charte-callout > p:not(.ui-charte-eyebrow) {
  margin-top: var(--charte-space-3);
  color: var(--charte-fg-soft);
  font-size: var(--charte-fs-lead);
}

/* Principles: dark panel with the site's 8px accent bar. */
.ui-charte-panel {
  padding: clamp(24px, 3vw, 40px);
  border-left: var(--charte-bar-thick) solid var(--charte-accent);
  background: var(--charte-surface);
}

.ui-charte-panel > p:not(.ui-charte-eyebrow) {
  max-width: var(--charte-measure);
  margin-top: var(--charte-space-4);
  color: var(--charte-fg);
  font-size: var(--charte-fs-lead);
}

:is(.ui-charte-callout, .ui-charte-panel) > p:first-child {
  margin-top: 0;
}

/* Mise en contexte: the questions, in two columns as in the PDF (4 + 3);
   the template sets --charte-questions-rows to half the questions. */
.ui-charte-questions {
  display: grid;
  grid-template-rows: repeat(var(--charte-questions-rows, 4), auto);
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--charte-space-4) var(--charte-col-gap);
  margin-top: var(--charte-space-5);
}

.ui-charte-questions > li {
  display: flex;
  align-items: baseline;
  gap: var(--charte-space-3);
  color: var(--charte-fg);
}

.ui-charte-questions .ui-charte-dot {
  color: var(--tone);
  translate: 0 -0.15em;
}

.ui-charte-outline {
  padding: clamp(24px, 3vw, 36px);
  border: var(--charte-hairline) solid var(--tone);
}

.ui-charte-outline > .ui-charte-text {
  max-width: var(--charte-measure);
  margin-top: var(--charte-space-4);
  font-size: var(--charte-fs-lead);
}

.ui-charte-flag {
  padding: var(--charte-space-1) 0 var(--charte-space-1) var(--charte-space-4);
  border-left: var(--charte-space-1) solid var(--charte-highlight);
  color: var(--charte-fg);
}

/* Split: heading left, copy right (À propos section heads). */
.ui-charte-split {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: var(--charte-space-4) var(--charte-col-gap);
  padding-top: var(--charte-space-6);
  border-top: var(--charte-hairline) solid var(--charte-rule);
}

.ui-charte-split-title {
  font-family: var(--charte-font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--charte-tracking-display);
  text-transform: uppercase;
}

.ui-charte-split .ui-charte-text {
  max-width: var(--charte-measure);
  font-size: var(--charte-fs-lead);
}

.ui-charte-split-body > * + * {
  margin-top: var(--charte-space-5);
}

.ui-charte-split-body > .ui-charte-btn + .ui-charte-text {
  margin-top: var(--charte-space-8);
}

/* ---- La démarche: stats (Thématiques bars) -------------------------------- */
.ui-charte-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--charte-space-10) var(--charte-col-gap);
}

.ui-charte-stat {
  display: flex;
  flex-direction: column;
  padding-top: var(--charte-space-5);
  border-top: var(--charte-bar) solid var(--tone);
}

.ui-charte-stat-value {
  color: var(--tone-ink);
  font-size: var(--charte-fs-figure);
  line-height: 1;
  letter-spacing: var(--charte-tracking-num);
}

.ui-charte-stat-label {
  margin-top: var(--charte-space-4);
  color: var(--charte-label);
  font-size: var(--charte-fs-label);
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
}

.ui-charte-stat-title {
  margin-top: var(--charte-space-2);
  margin-bottom: var(--charte-space-6);
  font-size: var(--charte-fs-lead);
  line-height: 1.3;
}

.ui-charte-stat-bar {
  height: 4px;
  margin-top: auto;
  background: var(--charte-track);
}

.ui-charte-stat-bar > span {
  display: block;
  height: 100%;
  background: var(--tone);
}

.ui-charte-stat-scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--charte-space-2);
  color: var(--charte-fg-subtle);
  font-size: var(--charte-fs-micro);
}

.ui-charte-method {
  max-width: var(--charte-measure);
  padding-top: var(--charte-space-4);
  border-top: var(--charte-hairline) solid var(--charte-accent);
}

.ui-charte-method > .ui-charte-note {
  margin-top: var(--charte-space-3);
}

/* ---- Numbered rows: réflexes, Annexe B (À propos .ui-apropos-eco-row) ----- */
/* One segment per réflexe (--charte-segments, set by the template). */
.ui-charte-segments {
  display: grid;
  grid-template-columns: repeat(var(--charte-segments, 5), minmax(0, 1fr));
  gap: var(--charte-space-2);
}

.ui-charte-segments > span {
  height: var(--charte-bar);
  background: var(--tone);
}

.ui-charte-row {
  display: grid;
  grid-template-columns: var(--charte-num-col) minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--charte-space-4) var(--charte-col-gap);
  padding: clamp(22px, 2.6vw, 36px) 0 clamp(22px, 2.6vw, 36px) var(--charte-space-3);
  border-top: var(--charte-hairline) solid var(--charte-rule);
}

.ui-charte-row:last-child {
  border-bottom: var(--charte-hairline) solid var(--charte-rule);
}

.ui-charte-row-body > .ui-charte-text {
  font-size: var(--charte-fs-lead);
}

.ui-charte-row-body > * + * {
  margin-top: var(--charte-space-4);
}

.ui-charte-avoid {
  display: flex;
  align-items: baseline;
  gap: var(--charte-space-3);
  color: var(--charte-warning-ink);
}

.ui-charte-avoid > .ui-charte-dot {
  background: var(--charte-warning);
  translate: 0 -2px;
}

/* ---- Six-step flows (Passer à l'action, Annexe A) ----------------------- */
/* DOM order is 01→06; the grid snakes it in two columns, as in the PDF, so
   the connectors read as one path: 01→02 ↓ 04←03 ↓ 05→06 (one column with
   ↓ only on phones). Each row is one colour pair. --flow-arrow-y is the
   height of horizontal connectors: the card's head row. */
.ui-charte-flow {
  --flow-gap-x: clamp(48px, 5vw, 72px);
  --flow-gap-y: var(--charte-space-12);
  --flow-inset: var(--charte-space-2);
  --flow-arrow-y: 50%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    's1 s2'
    's4 s3'
    's5 s6';
  gap: var(--flow-gap-y) var(--flow-gap-x);
}

.ui-charte-flow > :nth-child(1) { grid-area: s1; }
.ui-charte-flow > :nth-child(2) { grid-area: s2; }
.ui-charte-flow > :nth-child(3) { grid-area: s3; }
.ui-charte-flow > :nth-child(4) { grid-area: s4; }
.ui-charte-flow > :nth-child(5) { grid-area: s5; }
.ui-charte-flow > :nth-child(6) { grid-area: s6; }

.ui-charte-flow > li {
  position: relative;
}

/* Connector: a 2px line and a head, drawn left→right then turned per layout.
   It stops --flow-inset short of both cards so it reads as a link. */
.ui-charte-flow-arrow {
  position: absolute;
  height: 14px;
  color: var(--tone-ink);
  pointer-events: none;
}

.ui-charte-flow-arrow::before,
.ui-charte-flow-arrow::after {
  content: '';
  position: absolute;
  background: currentColor;
}

.ui-charte-flow-arrow::before {
  top: 6px;
  left: 0;
  right: 10px;
  height: var(--charte-rule-strong);
}

.ui-charte-flow-arrow::after {
  top: 0;
  right: 0;
  width: 12px;
  height: 14px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.ui-charte-flow > :is(:nth-child(1), :nth-child(5)) > .ui-charte-flow-arrow {
  top: var(--flow-arrow-y);
  right: auto;
  left: calc(100% + var(--flow-inset));
  width: calc(var(--flow-gap-x) - 2 * var(--flow-inset));
  transform: translateY(-50%);
  transform-origin: 50% 50%;
}

.ui-charte-flow > :nth-child(3) > .ui-charte-flow-arrow {
  top: var(--flow-arrow-y);
  right: calc(100% + var(--flow-inset));
  left: auto;
  width: calc(var(--flow-gap-x) - 2 * var(--flow-inset));
  transform: translateY(-50%) scaleX(-1);
  transform-origin: 50% 50%;
}

/* Down: pivots on its start point, from mid-bottom of a card to the next one. */
.ui-charte-flow > :is(:nth-child(2), :nth-child(4)) > .ui-charte-flow-arrow {
  top: calc(100% + var(--flow-inset));
  right: auto;
  left: 50%;
  width: calc(var(--flow-gap-y) - 2 * var(--flow-inset));
  transform: translateY(-50%) rotate(90deg);
  transform-origin: 0 50%;
}

/* ---- Passer à l'action: steps ---------------------------------------------- */
.ui-charte-steps {
  --flow-arrow-y: calc(var(--charte-space-6) + var(--charte-step-badge) / 2);
}

.ui-charte-step {
  padding: var(--charte-space-6);
  border: var(--charte-hairline) solid var(--charte-border);
  background: var(--charte-surface);
}

.ui-charte-step-head {
  display: flex;
  align-items: center;
  gap: var(--charte-space-4);
  min-height: var(--charte-step-badge);
  font-family: var(--charte-font-display);
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: var(--charte-tracking-tight);
  text-transform: uppercase;
}

.ui-charte-step-num {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--charte-step-badge);
  height: var(--charte-step-badge);
  background: var(--tone);
  color: var(--charte-black);
  font-size: 22px;
  letter-spacing: var(--charte-tracking-display);
}

/* Copy aligned with the title, under the badge column. */
.ui-charte-step > .ui-charte-text {
  margin-top: var(--charte-space-3);
  padding-left: calc(var(--charte-step-badge) + var(--charte-space-4));
}

/* ---- Mesurer: time chart ------------------------------------------------ */
.ui-charte-timechart {
  display: flex;
  flex-direction: column;
  gap: var(--charte-space-10);
  margin: 0;
}

.ui-charte-timechart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--charte-space-4);
  margin-bottom: var(--charte-space-3);
}

.ui-charte-timechart-head > span:last-child {
  color: var(--charte-fg-muted);
  font-size: var(--charte-fs-small);
}

.ui-charte-timechart-bar {
  display: flex;
  min-height: 64px;
}

.ui-charte-timechart-bar--full {
  align-items: center;
  min-height: 48px;
  padding-inline: var(--charte-space-6);
  background: var(--charte-fg);
  color: var(--charte-bg);
  font-size: var(--charte-fs-small);
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
}

.ui-charte-timechart-seg {
  display: flex;
  flex-basis: 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: var(--tone);
  color: var(--charte-black);
  font-size: var(--charte-fs-small);
}

.ui-charte-timechart-seg--gain {
  border: var(--charte-rule-strong) solid var(--tone);
  background: repeating-linear-gradient(118deg, transparent 0 11px, var(--tone) 11px 12px);
}

.ui-charte-timechart-seg--gain > span {
  padding: var(--charte-space-1) var(--charte-space-3);
  background: var(--tone);
}

.ui-charte-timechart-legend {
  display: flex;
  margin-top: var(--charte-space-3);
}

.ui-charte-timechart-legend > span {
  flex-basis: 0;
  min-width: 0;
  padding: 0 var(--charte-space-4) 0 var(--charte-space-3);
  border-left: var(--charte-rule-strong) solid var(--tone);
  color: var(--charte-fg-muted);
  font-size: var(--charte-fs-small);
  line-height: 1.35;
}

.ui-charte-formula {
  padding-top: var(--charte-space-6);
  border-top: var(--charte-hairline) solid var(--charte-rule);
}

.ui-charte-formula-equation {
  font-family: var(--charte-font-display);
  font-size: var(--charte-fs-formula);
  line-height: 1;
  letter-spacing: var(--charte-tracking-display);
  text-transform: uppercase;
}

.ui-charte-formula-equation > span {
  color: var(--charte-accent-ink);
}

.ui-charte-formula > .ui-charte-eyebrow + .ui-charte-formula-equation {
  margin-top: var(--charte-space-4);
}

.ui-charte-formula > .ui-charte-text {
  max-width: var(--charte-measure);
  margin-top: var(--charte-space-5);
  font-size: var(--charte-fs-lead);
}

/* Homepage colour blocks, edge to edge. */
.ui-charte-usages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-charte-usage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--charte-space-8);
  min-height: 220px;
  padding: var(--charte-space-5);
  background: var(--tone);
  color: var(--charte-black);
}

.ui-charte-usage-title {
  font-size: var(--charte-fs-tile-label);
  line-height: 1.1;
}

/* ---- Protéger -------------------------------------------------------------- */
/* Subgrid keeps both header bars the same height when one label wraps. */
.ui-charte-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0 var(--charte-space-5);
}

.ui-charte-duo-card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  border: var(--charte-hairline) solid var(--charte-border);
}

.ui-charte-duo-head {
  display: flex;
  align-items: center;
  padding: var(--charte-space-3) var(--charte-space-5);
  background: var(--tone);
  color: var(--charte-black);
  font-size: var(--charte-fs-label);
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
}

.ui-charte-duo-card > .ui-charte-text {
  padding: var(--charte-space-6) var(--charte-space-5) var(--charte-space-7);
  font-size: var(--charte-fs-lead);
}

.ui-charte-incident {
  display: grid;
  grid-template-columns: 118fr 226fr 182fr;
  gap: var(--charte-space-3);
}

.ui-charte-incident > li {
  padding: var(--charte-space-4) var(--charte-space-5) var(--charte-space-5);
  border-top: var(--charte-space-1) solid var(--tone);
  background: var(--charte-surface);
  line-height: 1.35;
}

/* ---- Grille pratique (FAQ search field / list language) ------------------ */
.ui-charte-grid > * + * {
  margin-top: var(--charte-space-3);
}

.ui-charte-grid > :is(.ui-charte-field-row, .ui-charte-note) {
  margin-top: var(--charte-space-6);
}

.ui-charte-grid > .ui-charte-subtitle {
  margin-top: var(--charte-space-14);
  margin-bottom: var(--charte-space-2);
}

.ui-charte-grid > .ui-charte-actions {
  margin-top: var(--charte-space-6);
}

.ui-charte-field > .ui-charte-label {
  margin-bottom: var(--charte-space-3);
}

.ui-charte-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--charte-space-6);
}

.ui-charte-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--charte-space-3) var(--charte-space-5);
  border: var(--charte-hairline) solid var(--charte-border);
  border-radius: 0;
  background: var(--charte-bg);
  color: var(--charte-fg);
  color-scheme: dark;
}

.ui-charte-input:focus {
  border-color: var(--charte-ring);
}

.ui-charte-input--note {
  min-height: 64px;
  background: var(--charte-surface);
  resize: vertical;
}

.ui-charte-point {
  min-width: 0;
  margin-inline: 0;
  padding: var(--charte-space-5);
  border: var(--charte-hairline) solid var(--charte-border-soft);
}

/* Floating the legend lets it sit inside the fieldset box like a normal row. */
.ui-charte-point-question {
  float: left;
  display: flex;
  align-items: baseline;
  gap: var(--charte-space-5);
  width: 100%;
  padding: 0;
  line-height: 1.35;
}

.ui-charte-point-question + * {
  clear: both;
}

.ui-charte-point-num {
  flex: none;
  min-width: 36px;
  color: var(--charte-accent-ink);
  font-family: var(--charte-font-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--charte-tracking-tight);
}

.ui-charte-point-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
  gap: 0 var(--charte-space-3);
  padding-top: var(--charte-space-2);
  padding-left: 56px;
}

.ui-charte-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--charte-space-3);
  min-height: var(--charte-touch);
  color: var(--tone-ink);
  font-size: var(--charte-fs-choice);
  cursor: pointer;
}

.ui-charte-choice.is-strong {
  font-weight: 700;
}

.ui-charte-choice > input {
  display: grid;
  flex: none;
  place-content: center;
  width: var(--charte-radio);
  height: var(--charte-radio);
  margin: 0;
  border: 1.5px solid var(--tone-ink);
  border-radius: 50%;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.ui-charte-choice > input::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tone-ink);
  transform: scale(0);
}

.ui-charte-choice > input:checked::before {
  transform: scale(1);
}

.ui-charte-point-note {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: var(--charte-space-4);
  margin-top: var(--charte-space-2);
}

.ui-charte-point-note > label {
  padding-top: var(--charte-space-2);
  color: var(--charte-label);
  font-size: var(--charte-fs-micro);
  line-height: 1.3;
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
}

/* ---- Écosystème ----------------------------------------------------------- */
.ui-charte-ecosystem-row {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: var(--charte-space-3) var(--charte-col-gap);
  padding: var(--charte-space-6) 0 var(--charte-space-6) var(--charte-space-3);
  border-top: var(--charte-hairline) solid var(--charte-rule);
}

.ui-charte-ecosystem-row:last-child {
  border-bottom: var(--charte-hairline) solid var(--charte-rule);
}

.ui-charte-ecosystem-title {
  font-family: var(--charte-font-display);
  font-size: var(--charte-fs-row-title);
  line-height: 1.08;
  letter-spacing: var(--charte-tracking-tight);
  text-transform: uppercase;
}

.ui-charte-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--charte-space-2);
  margin-top: var(--charte-space-4);
}

/* Pill tags: the homepage's only rounded element. */
.ui-charte-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--charte-space-2);
  min-height: 36px;
  padding: var(--charte-space-1) var(--charte-space-4);
  border: var(--charte-hairline) solid var(--tone);
  border-radius: var(--charte-radius-pill);
  color: var(--charte-fg);
  font-size: var(--charte-fs-small);
  text-decoration: none;
}

a.ui-charte-chip:hover {
  background: var(--tone);
  color: var(--charte-on-accent);
}

/* The key: same pills, filled, above the rows. */
.ui-charte-ecosystem-key .ui-charte-chip {
  background: var(--tone);
  color: var(--charte-on-accent);
  font-size: var(--charte-fs-label);
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
}

/* Parcours PME closing banner. */
.ui-charte-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--charte-space-6);
  padding: clamp(28px, 3.5vw, 48px) clamp(20px, 2.8vw, 40px);
  background: var(--charte-lime);
  color: var(--charte-black);
}

.ui-charte-banner-title {
  max-width: 24ch;
  font-family: var(--charte-font-display);
  font-size: var(--charte-fs-banner);
  line-height: var(--charte-lh-title);
  letter-spacing: var(--charte-tracking-display);
  text-transform: uppercase;
}

/* ---- Fondements & crédits ------------------------------------------------- */
.ui-charte-credits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--charte-space-10) var(--charte-col-gap);
}

.ui-charte-credit {
  padding-top: var(--charte-space-5);
  border-top: var(--charte-bar) solid var(--tone);
}

.ui-charte-credit > .ui-charte-text {
  max-width: 60ch;
  margin-top: var(--charte-space-3);
}

.ui-charte-signoff {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--charte-space-2) var(--charte-space-6);
  max-width: none;
}

.ui-charte-signoff > a {
  color: var(--charte-accent-ink);
  text-decoration: none;
}

.ui-charte-signoff > a:hover {
  text-decoration: underline;
}

/* ---- Annexe A: journey ------------------------------------------------------ */
.ui-charte-journey {
  --flow-gap-y: var(--charte-space-10);
  --flow-arrow-y: calc(var(--charte-journey-head) / 2);
}

.ui-charte-stage {
  display: flex;
  flex-direction: column;
  border: var(--charte-hairline) solid var(--charte-border);
}

.ui-charte-stage-head {
  display: flex;
  align-items: baseline;
  min-height: var(--charte-journey-head);
  gap: var(--charte-space-4);
  padding: var(--charte-space-4) var(--charte-space-5);
  background: var(--tone);
  color: var(--charte-black);
  font-family: var(--charte-font-display);
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: var(--charte-tracking-tight);
  text-transform: uppercase;
}

.ui-charte-stage-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--charte-space-5);
}

.ui-charte-stage-deliverable {
  margin-top: var(--charte-space-3);
  color: var(--charte-fg-muted);
}

.ui-charte-stage-support {
  margin-top: var(--charte-space-1);
  margin-bottom: var(--charte-space-6);
  color: var(--charte-fg-subtle);
  font-size: var(--charte-fs-small);
}

.ui-charte-stage-decision {
  display: flex;
  align-items: center;
  gap: var(--charte-space-3);
  margin-top: auto;
  padding-top: var(--charte-space-4);
  border-top: var(--charte-hairline) solid var(--charte-border);
  color: var(--tone-ink);
  font-size: var(--charte-fs-label);
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
}

/* ---- Annexe B: resource rows ---------------------------------------------- */
.ui-charte-row--resource .ui-charte-btn {
  font-size: var(--charte-fs-small);
}

/* ---- Annexe C: library (FAQ rows, À propos hover) ------------------------- */
.ui-charte-library-item {
  display: grid;
  grid-template-columns: var(--charte-num-col) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--charte-space-3) var(--charte-col-gap);
  padding: var(--charte-space-5) var(--charte-space-5) var(--charte-space-5) var(--charte-space-3);
  border-top: var(--charte-hairline) solid var(--charte-rule);
  color: var(--charte-fg);
  text-decoration: none;
}

.ui-charte-library > li:last-child > .ui-charte-library-item {
  border-bottom: var(--charte-hairline) solid var(--charte-rule);
}

.ui-charte-library-body {
  display: flex;
  flex-direction: column;
  gap: var(--charte-space-1);
}

.ui-charte-library-title {
  font-size: var(--charte-fs-lead);
  line-height: 1.3;
}

.ui-charte-library-text {
  color: var(--charte-fg-muted);
  font-size: var(--charte-fs-small);
}

.ui-charte-library-tag {
  padding: var(--charte-space-1) var(--charte-space-3);
  border: var(--charte-hairline) solid var(--tone);
  border-radius: var(--charte-radius-pill);
  color: var(--tone-ink);
  font-size: var(--charte-fs-micro);
  letter-spacing: var(--charte-tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.ui-charte-library-item .ui-charte-icon {
  color: var(--tone-ink);
}

.ui-charte-library-item:hover {
  background: var(--tone);
}

.ui-charte-library-item:hover :is(.ui-charte-library-num, .ui-charte-library-title, .ui-charte-library-text, .ui-charte-library-tag, .ui-charte-icon) {
  border-color: var(--charte-black);
  color: var(--charte-black);
}

/* ---- Mobile --------------------------------------------------------------- */
@media screen and (max-width: 680px) {
  .ui-charte {
    --charte-num-col: 44px;
    --charte-fs-num: 28px;
  }

  .ui-charte-hero-bg {
    right: -40%;
  }

  .ui-charte-stats,
  .ui-charte-usages,
  .ui-charte-incident,
  .ui-charte-field-row,
  .ui-charte-credits,
  .ui-charte-split,
  .ui-charte-ecosystem-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-charte-usage {
    min-height: 160px;
  }

  .ui-charte-flow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 's1' 's2' 's3' 's4' 's5' 's6';
  }

  /* :nth-child(n) matches the base direction rules' specificity so this wins. */
  .ui-charte-flow > :nth-child(n) > .ui-charte-flow-arrow {
    top: calc(100% + var(--flow-inset));
    right: auto;
    left: 50%;
    width: calc(var(--flow-gap-y) - 2 * var(--flow-inset));
    transform: translateY(-50%) rotate(90deg);
    transform-origin: 0 50%;
  }

  .ui-charte-step > .ui-charte-text {
    padding-left: 0;
  }

  .ui-charte-duo {
    display: flex;
    flex-direction: column;
    gap: var(--charte-space-4);
  }

  .ui-charte-duo-card {
    display: block;
  }

  /* Rows: number | title, with the copy under the title. */
  .ui-charte-summary-row {
    grid-template-columns: var(--charte-num-col) minmax(0, 1fr) auto;
  }

  .ui-charte-summary-text {
    grid-column: 2 / 3;
  }

  .ui-charte-summary-row .ui-charte-icon {
    grid-column: 3;
    grid-row: 1;
  }

  .ui-charte-row {
    grid-template-columns: var(--charte-num-col) minmax(0, 1fr);
  }

  .ui-charte-row-body {
    grid-column: 2;
  }

  .ui-charte-library-item {
    grid-template-columns: var(--charte-num-col) minmax(0, 1fr) auto;
  }

  .ui-charte-library-tag {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .ui-charte-library-item .ui-charte-icon {
    grid-column: 3;
    grid-row: 1;
  }

  /* Legend labels no longer fit under each segment: list them instead. */
  .ui-charte-timechart-legend {
    flex-direction: column;
    gap: var(--charte-space-2);
  }

  .ui-charte-timechart-legend > span {
    display: flex;
    align-items: baseline;
    gap: var(--charte-space-2);
    padding: 0;
    border-left: 0;
  }

  .ui-charte-questions {
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .ui-charte-timechart-legend > span::before {
    content: '';
    flex: none;
    width: 10px;
    height: 10px;
    background: var(--tone);
  }

  .ui-charte-point {
    padding: var(--charte-space-4);
  }

  .ui-charte-point-question {
    gap: var(--charte-space-3);
  }

  .ui-charte-point-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--charte-space-5);
    padding-left: 0;
  }

  .ui-charte-point-note {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--charte-space-2);
  }
}

/* ---- Print ----------------------------------------------------------------
   Same structure as the PDF page frame (stripe, running header/footer, one
   section per sheet, cover page), in a light palette so the grid can be
   filled in by hand: the semantic tokens are redefined, components unchanged.
   Ctrl+P prints the whole charter; the grid's print button adds
   .is-printing-charte-grid (js/charte-ia-pme.js) to print the grid alone, on
   three sheets as in the PDF. Running header/footer use page-margin boxes
   (Chromium); other browsers print the same layout without them. */
@page {
  margin: var(--charte-print-margin-top) 0 var(--charte-print-margin-bottom);
  background: var(--charte-bg);
  color: var(--charte-fg-subtle);
  font-family: var(--charte-font-body);
  font-size: var(--charte-print-running-size);
  font-weight: 500;
  letter-spacing: var(--charte-tracking-caps);

  @top-left {
    content: 'IA & PME / CHARTE PRATIQUE';
    /* The fixed stripe only covers the page area: margin boxes extend it. */
    border-left: var(--charte-print-stripe) solid var(--charte-accent);
    padding-left: var(--charte-print-inset);
    padding-bottom: 5mm;
    vertical-align: bottom;
  }

  @bottom-left {
    content: counter(page, decimal-leading-zero) ' / ' counter(pages, decimal-leading-zero);
    border-left: var(--charte-print-stripe) solid var(--charte-accent);
    padding-left: var(--charte-print-inset);
    padding-top: 6mm;
    vertical-align: top;
  }

  /* Margin boxes only take generated content, so the logo is a background. */
  @bottom-right {
    content: '';
    width: calc(var(--charte-print-logo-w) + var(--charte-print-inset));
    padding-top: 6mm;
    padding-right: var(--charte-print-inset);
    background: url('../assets/charte-ia-pme/logo-mtl-connecte.svg') right top / contain no-repeat content-box;
  }
}

@page charte-cover {
  margin: 0;
  background: var(--charte-hero-bg);

  @top-left { content: none; }
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}

@media print {
  :root:has(.ui-charte),
  .ui-charte {
    --charte-bg: var(--charte-white);
    --charte-surface: var(--charte-grey-50);
    --charte-fg: var(--charte-black);
    --charte-fg-muted: var(--charte-ink);
    --charte-fg-soft: var(--charte-ink);
    --charte-fg-subtle: var(--charte-grey-700);
    --charte-label: var(--charte-grey-700);
    --charte-rule: var(--charte-grey-250);
    --charte-border: var(--charte-grey-250);
    --charte-border-soft: var(--charte-grey-250);
    --charte-track: var(--charte-grey-250);
    --charte-accent-ink: var(--charte-black);
    --charte-warning-ink: var(--charte-black);
    --charte-ink-override: var(--charte-black);
  }

  html:has(.ui-charte) {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* The site paints html/body in near-black (main.css) and pads body for its
     fixed mobile header (tablet.css); @page paints and frames the sheet. */
  html:has(.ui-charte),
  body:has(.ui-charte) {
    padding-top: 0 !important;
    background: none !important;
  }

  /* Only the charter: no site chrome, cookie banner or popups. */
  body:has(.ui-charte) > :not(main),
  main:has(> .ui-charte) > :not(.ui-charte),
  .ui-charte-nav,
  .ui-charte-grid-nav,
  .ui-charte-screen-only {
    display: none !important;
  }

  /* In-page navigation means nothing on paper. */
  .ui-charte a.ui-charte-btn[href^="#"],
  .ui-charte button.ui-charte-btn {
    display: none !important;
  }

  /* Accent stripe on every sheet (above the cover's violet hero). */
  body:has(.ui-charte)::before {
    content: '';
    position: fixed;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--charte-print-stripe);
    background: var(--charte-accent);
  }

  .ui-charte {
    zoom: var(--charte-print-zoom);
    background: none;
  }

  .ui-charte-hero .ui-charte-container,
  .ui-charte-section {
    padding-inline: calc(var(--charte-print-inset) / var(--charte-print-zoom));
  }

  .ui-charte-cover {
    page: charte-cover;
  }

  /* The hero is the whole cover sheet (a hair short, so it never spills onto a
     second sheet); the edition line sits at the bottom. */
  .ui-charte-hero {
    display: flex;
    min-height: calc((100vh - 2mm) / var(--charte-print-zoom));
  }

  .ui-charte-hero .ui-charte-container {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .ui-charte-hero-meta {
    margin-top: auto;
  }

  .ui-charte-section {
    padding-top: 0;
    break-before: page;
  }

  .ui-charte-section:last-child {
    padding-bottom: 0;
  }

  .ui-charte-section > .ui-charte-container {
    padding-top: 0;
    border-top: 0;
  }

  .ui-charte-input {
    color-scheme: light;
  }

  .ui-charte-eyebrow,
  .ui-charte-title,
  .ui-charte-subtitle,
  .ui-charte-label {
    break-after: avoid;
  }

  .ui-charte-point,
  .ui-charte-row,
  .ui-charte-step,
  .ui-charte-stage,
  .ui-charte-stat,
  .ui-charte-split,
  .ui-charte-panel,
  .ui-charte-banner,
  .ui-charte-library-item,
  .ui-charte-ecosystem-row,
  .ui-charte-summary-row {
    break-inside: avoid;
  }

  /* Tighter vertical rhythm so each PDF page fits one sheet. */
  .ui-charte {
    --charte-section-pad: 0;
    --charte-num-col: 72px;
  }

  :is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > .ui-charte-lead + :not(.ui-charte-lead),
  :is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > :is(.ui-charte-panel, .ui-charte-callout, .ui-charte-banner, .ui-charte-split, .ui-charte-method, .ui-charte-credits) {
    margin-top: var(--charte-space-8);
  }

  :is(.ui-charte-section .ui-charte-container, .ui-charte-annex-body) > .ui-charte-label--spaced {
    margin-top: var(--charte-space-10);
  }

  .ui-charte-summary-row,
  .ui-charte-row,
  .ui-charte-ecosystem-row {
    padding-block: var(--charte-space-3);
  }

  /* A tone outline barely shows on white paper: chips print filled, and
     smaller so the écosystème keeps to one sheet. */
  .ui-charte-chip {
    min-height: 0;
    padding: 2px var(--charte-space-3);
    background: var(--tone);
    color: var(--charte-black);
  }

  .ui-charte-chips {
    gap: var(--charte-space-1) var(--charte-space-2);
    margin-top: var(--charte-space-2);
  }

  .ui-charte-ecosystem-row {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  }

  /* Mesurer the same on Letter. */
  .ui-charte-usage {
    min-height: 110px;
  }

  #charte-mesurer .ui-charte-panel {
    padding-block: var(--charte-space-4);
  }

  /* Annexe A in two columns: compact cards so it stays on one sheet. */
  .ui-charte-journey {
    --charte-journey-head: 44px;
    --flow-gap-y: var(--charte-space-7);
  }

  .ui-charte-stage-head {
    padding-block: var(--charte-space-2);
  }

  .ui-charte-stage-body {
    padding: var(--charte-space-3) var(--charte-space-5) var(--charte-space-4);
  }

  .ui-charte-stage-deliverable {
    margin-top: var(--charte-space-2);
  }

  .ui-charte-stage-support {
    margin-bottom: var(--charte-space-3);
  }

  .ui-charte-stage-decision {
    padding-top: var(--charte-space-2);
  }

  .ui-charte .ui-charte-print-only {
    display: revert;
  }

  .ui-charte-annex-body[hidden] {
    display: block;
    content-visibility: visible;
  }

  .ui-charte-annex-icon {
    display: none;
  }

  /* Grid: each group on its own sheet (01–04, 05–09, 10–14), as in the PDF. */
  .ui-charte-grid > .ui-charte-print-only {
    margin-top: 0;
    break-before: page;
  }

  .ui-charte-grid > .ui-charte-subtitle {
    margin-top: var(--charte-space-4);
    margin-bottom: var(--charte-space-6);
    font-size: var(--charte-fs-title);
  }

  .ui-charte-point {
    padding: var(--charte-space-3) var(--charte-space-5) var(--charte-space-4);
  }

  .ui-charte-choice {
    min-height: var(--charte-space-8);
  }

  .ui-charte-input--note {
    height: 58px;
    min-height: 0;
    padding: var(--charte-space-2) var(--charte-space-3);
    overflow: hidden;
    background: var(--charte-bg);
    font-size: var(--charte-fs-small);
    resize: none;
  }

  .ui-charte-input::-webkit-calendar-picker-indicator {
    display: none;
  }

  .is-printing-charte-grid .ui-charte > :not(#charte-grille) {
    display: none;
  }

  .is-printing-charte-grid #charte-grille {
    break-before: auto;
  }
}