@import url("styles/tokens.generated.css");
/* Pages de confiance Tramya : légal, erreurs et maintenance.
 * Toutes les recettes d'interface consomment exclusivement les tokens sémantiques
 * générés par le Design Hub dans styles/tokens.generated.css.
 */

html {
  scroll-padding-block-start: var(--tm-runtime-sticky-offset);
  min-inline-size: var(--tm-semantic-size-popover);
  min-block-size: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--tm-semantic-surface-canvas);
}


body {
  min-block-size: 100dvh;
  margin: 0;
  color: var(--tm-semantic-text-primary);
  background: var(--tm-semantic-surface-canvas);
  font: var(--tm-semantic-type-body);
  -webkit-font-smoothing: antialiased;
}


.tm-skip-link {
  position: fixed;
  inset-block-start: var(--tm-semantic-spacing-stack-md);
  inset-inline-start: var(--tm-semantic-spacing-inline-md);
  z-index: var(--tm-semantic-layer-toast);
  padding: var(--tm-semantic-spacing-stack-sm) var(--tm-semantic-spacing-inline-md);
  color: var(--tm-semantic-action-primary-fg);
  border-radius: var(--tm-semantic-radius-control);
  background: var(--tm-semantic-action-primary-bg);
  font: var(--tm-semantic-type-label);
  text-decoration: none;
  transform: translateY(calc((var(--tm-semantic-size-control-lg) + var(--tm-semantic-spacing-stack-xl)) * -1));
  transition: transform var(--tm-semantic-motion-fast) var(--tm-semantic-motion-ease-out);
}


.tm-skip-link:focus {
  outline: none;
  box-shadow: var(--tm-semantic-shadow-focus);
  transform: translateY(0);
}


.tm-legal-page {
  inline-size: var(--tm-runtime-rail);
  margin-inline: auto;
  padding: var(--tm-runtime-section-space) var(--tm-runtime-page-gutter);
}


.tm-legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--tm-semantic-size-popover), auto);
  align-items: end;
  gap: var(--tm-semantic-spacing-section);
  padding-block-end: var(--tm-semantic-spacing-section);
  border-block-end: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-strong);
}


.tm-legal-hero__copy {
  display: grid;
  gap: var(--tm-semantic-spacing-stack-lg);
  min-inline-size: 0;
}


.tm-legal-hero__eyebrow,
.tm-system-state__code {
  margin: 0;
  color: var(--tm-semantic-text-tertiary);
  font: var(--tm-semantic-type-meta);
  letter-spacing: var(--tm-runtime-tracking-eyebrow);
  text-transform: uppercase;
}


.tm-legal-hero__title {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: 0;
  font-size: var(--tm-runtime-display-xl);
  font-weight: 700;
  line-height: var(--tm-runtime-leading-display);
  letter-spacing: var(--tm-runtime-tracking-display);
  text-wrap: balance;
}


.tm-legal-hero__intro {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: 0;
  color: var(--tm-semantic-text-secondary);
  font-size: var(--tm-runtime-lede);
  line-height: var(--tm-runtime-leading-lede);
}


.tm-legal-index {
  position: sticky;
  inset-block-start: var(--tm-runtime-sticky-offset);
  align-self: start;
  display: grid;
  gap: var(--tm-semantic-spacing-stack-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}


.tm-legal-index__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-semantic-spacing-inline-md);
  min-block-size: var(--tm-semantic-size-touch);
  padding-inline: var(--tm-semantic-spacing-inline-md);
  color: var(--tm-semantic-text-secondary);
  border-block-end: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
  font: var(--tm-semantic-type-label);
  text-decoration: none;
}


.tm-legal-index__link:hover {
  color: var(--tm-semantic-text-primary);
  background: var(--tm-semantic-action-ghost-hover);
}


.tm-legal-index__icon {
  flex: 0 0 auto;
  color: var(--tm-semantic-text-tertiary);
  font-size: var(--tm-semantic-size-icon-sm);
}


.tm-legal-document {
  max-inline-size: var(--tm-semantic-size-reading-max);
  padding-block: var(--tm-semantic-spacing-section) var(--tm-runtime-section-space);
}


.tm-legal-document__section-title,
.tm-legal-document h2 {
  margin: var(--tm-semantic-spacing-section) 0 var(--tm-semantic-spacing-stack-md);
  padding-block-start: var(--tm-semantic-spacing-stack-lg);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
  font-size: var(--tm-runtime-display-md);
  font-weight: 650;
  line-height: var(--tm-runtime-leading-title);
  letter-spacing: var(--tm-runtime-tracking-display);
  scroll-margin-block-start: calc(var(--tm-semantic-spacing-page) + var(--tm-semantic-spacing-stack-xl));
}


.tm-legal-document__section-title:first-of-type,
.tm-legal-document h2:first-of-type { margin-block-start: 0; }


.tm-legal-document__subheading,
.tm-legal-document h3 {
  margin: var(--tm-semantic-spacing-stack-xl) 0 var(--tm-semantic-spacing-stack-sm);
  font-size: var(--tm-runtime-body-lg);
  font-weight: 700;
  line-height: var(--tm-runtime-leading-title);
}


.tm-legal-document__paragraph,
.tm-legal-document__item,
.tm-legal-document p,
.tm-legal-document li {
  color: var(--tm-semantic-text-secondary);
  font-size: var(--tm-runtime-body-lg);
  line-height: var(--tm-runtime-leading-body);
}


.tm-legal-document__paragraph,
.tm-legal-document p { margin: 0 0 var(--tm-semantic-spacing-stack-lg); }


.tm-legal-document__list,
.tm-legal-document ul {
  display: grid;
  gap: var(--tm-semantic-spacing-stack-sm);
  margin: 0 0 var(--tm-semantic-spacing-stack-lg);
  padding-inline-start: var(--tm-semantic-spacing-inline-xl);
}


.tm-legal-document__link,
.tm-legal-document a {
  color: var(--tm-semantic-text-primary);
  font-weight: 600;
  text-decoration-color: var(--tm-semantic-action-primary-bg);
  text-decoration-thickness: var(--tm-semantic-border-width-strong);
  text-underline-offset: var(--tm-semantic-spacing-stack-xs);
}


.todo { display:none; }

.show-draft-notes .todo { display:block; }


.tm-legal-document__notice {
  margin: 0 0 var(--tm-semantic-spacing-stack-xl);
  padding: var(--tm-semantic-spacing-stack-lg);
  color: var(--tm-semantic-feedback-warning);
  border: var(--tm-semantic-border-width-default) solid var(--tm-semantic-feedback-warning);
  border-radius: var(--tm-semantic-radius-control);
  background: var(--tm-semantic-feedback-warning-surface);
  font: var(--tm-semantic-type-body-strong);
}


.tm-legal-document__meta {
  margin: var(--tm-semantic-spacing-section) 0 0;
  padding-block-start: var(--tm-semantic-spacing-stack-lg);
  color: var(--tm-semantic-text-tertiary);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-strong);
  font: var(--tm-semantic-type-meta);
}


.tm-legal-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--tm-semantic-spacing-inline-xl);
  inline-size: min(
    calc(var(--tm-semantic-size-content-max) - (var(--tm-semantic-spacing-inline-xl) * 10)),
    calc(100% - (var(--tm-semantic-spacing-inline-xl) * 2))
  );
  margin-inline: auto;
  padding-block: var(--tm-semantic-spacing-stack-xl);
  color: var(--tm-semantic-text-secondary);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-strong);
  font: var(--tm-semantic-type-body);
}


.tm-legal-footer__brand {
  color: var(--tm-semantic-text-primary);
  font: var(--tm-semantic-type-title);
  text-decoration: none;
}


.tm-legal-footer__copy { margin: 0; }


.tm-legal-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tm-semantic-spacing-inline-lg);
}


.tm-legal-footer__link {
  min-block-size: var(--tm-semantic-size-touch);
  display: inline-flex;
  align-items: center;
  color: var(--tm-semantic-text-secondary);
  border-radius: var(--tm-semantic-radius-control);
  font: var(--tm-semantic-type-label);
  text-decoration: none;
}


.tm-legal-footer__link:hover,
.tm-legal-footer__link[aria-current] { color: var(--tm-semantic-text-primary); }


.tm-system-page {
  display: flex;
  flex-direction: column;
}


.tm-system-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--tm-semantic-size-popover), auto);
  align-items: start;
  gap: var(--tm-semantic-spacing-section);
  inline-size: var(--tm-runtime-rail);
  margin-inline: auto;
  padding: var(--tm-runtime-section-space) var(--tm-runtime-page-gutter);
}


.tm-system-state__copy {
  display: grid;
  justify-items: start;
  gap: var(--tm-semantic-spacing-stack-lg);
}


.tm-system-state__title {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: 0;
  font-size: var(--tm-runtime-display-lg);
  font-weight: 700;
  line-height: var(--tm-runtime-leading-display);
  letter-spacing: var(--tm-runtime-tracking-display);
  text-wrap: balance;
}


.tm-system-state__description {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: 0;
  color: var(--tm-semantic-text-secondary);
  font-size: var(--tm-runtime-lede);
  line-height: var(--tm-runtime-leading-lede);
}


.tm-system-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-semantic-spacing-inline-sm);
}


.tm-system-state__panel,
.tm-maintenance-panel {
  display: grid;
  gap: var(--tm-semantic-spacing-stack-lg);
  padding: var(--tm-semantic-spacing-section);
  color: var(--tm-semantic-text-primary);
  border: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);
  border-radius: var(--tm-semantic-radius-panel);
  background: var(--tm-semantic-surface-panel);
}


.tm-system-state__icon {
  display: grid;
  place-items: center;
  inline-size: var(--tm-semantic-size-touch);
  block-size: var(--tm-semantic-size-touch);
  color: var(--tm-semantic-text-on-accent);
  border-radius: var(--tm-semantic-radius-control);
  background: var(--tm-semantic-action-primary-bg);
  font-size: var(--tm-semantic-size-icon-lg);
}


.tm-system-state__panel-title {
  margin: 0;
  font: var(--tm-semantic-type-title);
}


.tm-system-state__panel-copy {
  margin: 0;
  color: var(--tm-semantic-text-secondary);
  font: var(--tm-semantic-type-body);
}


.tm-system-state__links {
  display: grid;
  gap: var(--tm-semantic-spacing-stack-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}


.tm-system-state__link {
  display: flex;
  align-items: center;
  gap: var(--tm-semantic-spacing-inline-sm);
  min-block-size: var(--tm-semantic-size-touch);
  color: var(--tm-semantic-text-primary);
  border-block-end: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
  border-radius: var(--tm-semantic-radius-control);
  font: var(--tm-semantic-type-label);
  text-decoration: none;
}


.tm-system-state__link:hover { background: var(--tm-semantic-action-ghost-hover); }


.tm-system-state__link-icon {
  flex: 0 0 auto;
  color: var(--tm-semantic-text-tertiary);
  font-size: var(--tm-semantic-size-icon-md);
}


.tm-maintenance-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  inline-size: var(--tm-runtime-rail);
  min-block-size: 100dvh;
  margin-inline: auto;
  padding-inline: var(--tm-runtime-page-gutter);
}


.tm-maintenance-header,
.tm-maintenance-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-semantic-spacing-inline-lg);
  min-block-size: var(--tm-semantic-spacing-page);
  padding-block: var(--tm-semantic-spacing-stack-md);
  border-block-end: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);
}


.tm-maintenance-header__brand {
  display: flex;
  align-items: center;
  gap: var(--tm-semantic-spacing-inline-sm);
  color: var(--tm-semantic-text-primary);
  font: var(--tm-semantic-type-title);
}


.tm-maintenance-header__mark {
  inline-size: var(--tm-semantic-size-control-lg);
  block-size: var(--tm-semantic-size-control-lg);
}


.tm-maintenance-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--tm-semantic-size-popover), auto);
  align-items: center;
  gap: var(--tm-semantic-spacing-section);
  padding-block: var(--tm-semantic-spacing-page);
}


.tm-maintenance-main__copy {
  display: grid;
  gap: var(--tm-semantic-spacing-stack-lg);
}


.tm-maintenance-main__eyebrow {
  margin: 0;
  color: var(--tm-semantic-text-tertiary);
  font: var(--tm-semantic-type-meta);
  text-transform: uppercase;
}


.tm-maintenance-main__title {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: 0;
  font-size: var(--tm-runtime-display-lg);
  font-weight: 700;
  line-height: var(--tm-runtime-leading-display);
  letter-spacing: var(--tm-runtime-tracking-display);
  text-wrap: balance;
}


.tm-maintenance-main__lead {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: 0;
  color: var(--tm-semantic-text-secondary);
  font: var(--tm-semantic-type-body);
}


.tm-maintenance-panel {
  border-color: var(--tm-semantic-border-selected);
  background: var(--tm-semantic-surface-selected);
}


.tm-maintenance-panel__title {
  margin: 0;
  font: var(--tm-semantic-type-title);
}


.tm-maintenance-panel__copy {
  margin: 0;
  color: var(--tm-semantic-text-secondary);
  font: var(--tm-semantic-type-body);
}


.tm-maintenance-panel__list {
  display: grid;
  gap: var(--tm-semantic-spacing-stack-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}


.tm-maintenance-panel__item {
  display: flex;
  align-items: flex-start;
  gap: var(--tm-semantic-spacing-inline-sm);
  padding-block: var(--tm-semantic-spacing-stack-sm);
  border-block-end: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
  font: var(--tm-semantic-type-body-strong);
}


.tm-maintenance-panel__item-icon {
  flex: 0 0 auto;
  color: var(--tm-semantic-feedback-success);
  font-size: var(--tm-semantic-size-icon-md);
}


.tm-maintenance-panel__details {
  padding-block-start: var(--tm-semantic-spacing-stack-md);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);
}


.tm-maintenance-panel__summary {
  inline-size: max-content;
  min-block-size: var(--tm-semantic-size-touch);
  display: flex;
  align-items: center;
  color: var(--tm-semantic-text-primary);
  border-radius: var(--tm-semantic-radius-control);
  font: var(--tm-semantic-type-label);
  cursor: pointer;
}


.tm-maintenance-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tm-semantic-spacing-stack-md);
  padding-block-start: var(--tm-semantic-spacing-stack-md);
}


.tm-maintenance-form__field,
.tm-maintenance-form__status { grid-column: 1 / -1; }


.tm-maintenance-form__status {
  min-block-size: var(--tm-semantic-size-skeleton-line);
  margin: 0;
  color: var(--tm-semantic-text-secondary);
  font: var(--tm-semantic-type-meta);
}


.tm-maintenance-form__status.is-error { color: var(--tm-semantic-feedback-danger); }


.tm-maintenance-footer {
  align-self: end;
  color: var(--tm-semantic-text-secondary);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);
  border-block-end: 0;
  font: var(--tm-semantic-type-meta);
}


.tm-maintenance-footer__link {
  min-block-size: var(--tm-semantic-size-touch);
  display: inline-flex;
  align-items: center;
  color: var(--tm-semantic-text-secondary);
  border-radius: var(--tm-semantic-radius-control);
}


@media (max-width: 68rem) {
  
  
  
  
  
  
  
  
  
}


@media (max-width: 47.999rem) {
  
  .tm-legal-page,
  .tm-system-state,
  .tm-legal-footer,
  .tm-maintenance-page {
    inline-size: 100%;
    padding-inline: var(--tm-semantic-spacing-inline-lg);
  }
  .tm-legal-index { position: static; }
  
  
  .tm-legal-page { padding-block: var(--tm-semantic-spacing-section); }
  .tm-legal-hero,
  .tm-system-state,
  .tm-maintenance-main {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--tm-semantic-spacing-stack-xl);
  }
  .tm-legal-document { padding-block-start: var(--tm-semantic-spacing-stack-xl); }
  .tm-system-state {
    min-block-size: auto;
    padding-block: var(--tm-semantic-spacing-section);
  }
  .tm-system-state__panel,
  .tm-maintenance-panel { padding: var(--tm-semantic-spacing-stack-xl); }
  .tm-legal-footer { grid-template-columns: minmax(0, 1fr); }
  .tm-legal-footer__nav { justify-content: flex-start; }
  .tm-maintenance-main { padding-block: var(--tm-semantic-spacing-section); }
  .tm-maintenance-form { grid-template-columns: minmax(0, 1fr); }
  .tm-maintenance-form__submit { inline-size: 100%; }
}


@media (max-width: 40rem) {
  
  .tm-maintenance-header,
  .tm-maintenance-footer { align-items: flex-start; flex-direction: column; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tm-skip-link,
  
}

/* ER-03 / MA-04 : plus de filet orphelin sous le dernier élément d'une liste. */
.tm-legal-index__link:last-child,
.tm-system-state__link:last-child { border-block-end: 0; }