@import url("styles/tokens.generated.css");
/* Pages intégrations Tramya.
 * Contrat : composants tm-*, tokens DTCG sémantiques uniquement.
 */

.tm-integrations-page {
  margin: 0;
  color: var(--tm-semantic-text-primary);
  background: var(--tm-semantic-surface-canvas);
  font: var(--tm-semantic-type-body);
}

.tm-integrations-page,
.tm-integrations-page *,
.tm-integrations-page *::before,
.tm-integrations-page *::after {
  box-sizing: border-box;
}

.tm-integrations-page a {
  color: inherit;
}

.tm-integrations-page .tm-button--primary { color: var(--tm-semantic-action-primary-fg); }

.tm-integrations-page .tm-skip-link { color: var(--tm-semantic-action-primary-fg); }

.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);
  border-radius: var(--tm-semantic-radius-control);
  color: var(--tm-semantic-action-primary-fg);
  background: var(--tm-semantic-action-primary-bg);
  font: var(--tm-semantic-type-label);
  transform: translateY(calc((var(--tm-semantic-size-touch) + 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-integrations {
  inline-size: var(--tm-runtime-rail);
  margin-inline: auto;
  padding: var(--tm-semantic-spacing-stack-xl) var(--tm-runtime-page-gutter) var(--tm-semantic-spacing-page);
}

.tm-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tm-semantic-spacing-inline-sm);
  min-block-size: var(--tm-semantic-size-touch);
  color: var(--tm-semantic-text-secondary);
  font: var(--tm-semantic-type-meta);
}

.tm-breadcrumbs a {
  min-block-size: var(--tm-semantic-size-touch);
  display: inline-flex;
  align-items: center;
  color: var(--tm-semantic-text-tertiary);
  text-decoration: none;
}

.tm-breadcrumbs a:hover { color: var(--tm-semantic-text-primary); text-decoration: underline; }

.tm-breadcrumbs i {
  font-size: var(--tm-semantic-size-icon-sm);
}

.tm-integration-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tm-semantic-size-dialog-md)), 1fr));
  gap: var(--tm-semantic-spacing-section);
  align-items: stretch;
  min-block-size: calc(var(--tm-semantic-size-dialog-md) + var(--tm-semantic-spacing-section));
  padding-block: var(--tm-semantic-spacing-section) var(--tm-semantic-spacing-page);
}

.tm-integration-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.tm-eyebrow,
.tm-badge {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tm-semantic-size-control-sm);
  margin: 0;
  padding-inline: var(--tm-semantic-spacing-inline-md);
  border: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-selected);
  border-radius: var(--tm-semantic-radius-status);
  color: var(--tm-semantic-text-primary);
  background: var(--tm-semantic-surface-selected);
  font: var(--tm-semantic-type-meta);
}

.tm-integration-hero h1 {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: var(--tm-semantic-spacing-stack-xl) 0 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);
}

.tm-integration-hero__copy > p:not(.tm-eyebrow) {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: var(--tm-semantic-spacing-stack-lg) 0 0;
  color: var(--tm-semantic-text-secondary);
  font-size: var(--tm-runtime-lede);
  line-height: var(--tm-runtime-leading-lede);
}

.tm-integration-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-semantic-spacing-inline-md);
  margin-block-start: var(--tm-semantic-spacing-stack-xl);
}

.tm-integration-proof {
  display: grid;
  align-content: center;
  gap: var(--tm-semantic-spacing-stack-lg);
  min-inline-size: 0;
  padding: var(--tm-semantic-spacing-section);
  border: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);
  border-radius: var(--tm-semantic-radius-dialog);
  color: var(--tm-semantic-text-primary);
  background: var(--tm-semantic-surface-panel);
  box-shadow: var(--tm-semantic-shadow-raised);
}

.tm-integration-proof > i,
.tm-integration-proof__logo {
  inline-size: var(--tm-semantic-size-control-lg);
  block-size: var(--tm-semantic-size-control-lg);
  color: var(--tm-semantic-text-primary);
  font-size: var(--tm-semantic-size-control-lg);
  object-fit: contain;
}

.tm-integration-proof h2 {
  margin: 0;
  font-size: var(--tm-runtime-display-md);
  font-weight: 650;
  line-height: var(--tm-runtime-leading-title);
  letter-spacing: var(--tm-runtime-tracking-display);
}

.tm-integration-proof > p {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: 0;
  color: var(--tm-semantic-text-secondary);
  font-size: var(--tm-runtime-body-lg);
  line-height: var(--tm-runtime-leading-body);
}

.tm-integration-proof__list {
  display: grid;
  gap: var(--tm-semantic-spacing-stack-sm);
  margin-block-start: var(--tm-semantic-spacing-stack-sm);
}

.tm-integration-proof__list span {
  display: flex;
  align-items: center;
  gap: var(--tm-semantic-spacing-inline-sm);
  min-block-size: var(--tm-semantic-size-control-md);
  padding-block: var(--tm-semantic-spacing-stack-sm);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
  color: var(--tm-semantic-text-primary);
  font: var(--tm-semantic-type-body-strong);
}

.tm-integration-proof__list i {
  flex: 0 0 auto;
  color: var(--tm-semantic-text-primary);
  font-size: var(--tm-semantic-size-icon-md);
}

.tm-integration-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tm-semantic-size-dialog-sm)), 1fr));
  gap: var(--tm-semantic-spacing-section);
  padding-block: var(--tm-semantic-spacing-page);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
}

.tm-integration-section__intro {
  position: sticky;
  inset-block-start: var(--tm-runtime-sticky-offset);
  align-self: start;
}

.tm-integration-section__intro h2,
.tm-integration-faq h2,
.tm-integration-cta h2 {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: var(--tm-semantic-spacing-stack-lg) 0 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);
}

.tm-integration-section__intro > p:not(.tm-eyebrow) {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: var(--tm-semantic-spacing-stack-lg) 0 0;
  color: var(--tm-semantic-text-secondary);
  font-size: var(--tm-runtime-lede);
  line-height: var(--tm-runtime-leading-lede);
}

.tm-integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tm-semantic-size-dialog-sm)), 1fr));
  gap: var(--tm-semantic-spacing-inline-lg);
  min-inline-size: 0;
}

.tm-integration-card {
  display: grid;
  align-content: start;
  gap: var(--tm-semantic-spacing-stack-md);
  min-inline-size: 0;
  padding: var(--tm-semantic-spacing-stack-xl);
  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);
  transition:
    border-color var(--tm-semantic-motion-fast) var(--tm-semantic-motion-ease-out),
    transform var(--tm-semantic-motion-fast) var(--tm-semantic-motion-ease-out),
    box-shadow var(--tm-semantic-motion-fast) var(--tm-semantic-motion-ease-out);
}

a.tm-integration-card {
  text-decoration: none;
}

.tm-integration-card:hover {
  border-color: var(--tm-semantic-border-selected);
  box-shadow: var(--tm-semantic-shadow-raised);
  transform: translateY(calc(var(--tm-semantic-motion-press-offset) * -1));
}

.tm-integration-card:focus-visible,
.tm-integration-faq summary:focus-visible,
.tm-integration-cta a:focus-visible,
.tm-site-footer a:focus-visible {
  outline: none;
  box-shadow: var(--tm-semantic-shadow-focus);
}

.tm-integration-card > i,
.tm-integration-card__icon {
  inline-size: var(--tm-semantic-size-control-lg);
  block-size: var(--tm-semantic-size-control-lg);
  color: var(--tm-semantic-text-primary);
  font-size: var(--tm-semantic-size-control-lg);
  object-fit: contain;
}

.tm-integration-card h3 {
  margin: 0;
  font: var(--tm-semantic-type-title);
}

.tm-integration-card h3 a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tm-semantic-size-touch);
  color: var(--tm-semantic-text-primary);
  text-decoration: none;
}

.tm-integration-card h3 a:hover { text-decoration: underline; 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); }

.tm-integration-card p,
.tm-integration-card li {
  margin: 0;
  color: var(--tm-semantic-text-secondary);
  font-size: var(--tm-runtime-body-lg);
  line-height: var(--tm-runtime-leading-body);
}

.tm-integration-card ul,
.tm-integration-card ol {
  display: grid;
  gap: var(--tm-semantic-spacing-stack-sm);
  margin: 0;
  padding-inline-start: var(--tm-semantic-spacing-inline-xl);
}

.tm-integration-steps {
  counter-reset: integration-step;
  display: grid;
  gap: var(--tm-semantic-spacing-stack-lg);
}

.tm-integration-step {
  counter-increment: integration-step;
  display: grid;
  grid-template-columns: var(--tm-semantic-size-control-lg) minmax(0, 1fr);
  gap: var(--tm-semantic-spacing-inline-lg);
  padding: var(--tm-semantic-spacing-stack-xl);
  border-inline-start: var(--tm-semantic-border-width-strong) solid var(--tm-semantic-border-selected);
  background: var(--tm-semantic-surface-panel);
}

.tm-integration-step::before {
  content: counter(integration-step);
  display: grid;
  place-items: center;
  inline-size: var(--tm-semantic-size-control-lg);
  block-size: var(--tm-semantic-size-control-lg);
  border-radius: var(--tm-semantic-radius-circular);
  color: var(--tm-semantic-text-on-accent);
  background: var(--tm-semantic-action-primary-bg);
  font: var(--tm-semantic-type-data);
}

.tm-integration-step h3 {
  margin: 0;
  font: var(--tm-semantic-type-title);
}

.tm-integration-step p {
  margin: var(--tm-semantic-spacing-stack-sm) 0 0;
  color: var(--tm-semantic-text-secondary);
}

.tm-integration-section:has(.tm-integration-table-wrap) { grid-template-columns: 1fr; }
.tm-integration-table-wrap {
  grid-column: 1 / -1;
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  border-radius: 24px;
  border: 1px solid rgba(15,17,21,.06);
  box-shadow: 0 10px 40px -12px rgba(15,17,21,.12), 0 2px 8px -2px rgba(15,17,21,.06);
  overflow: hidden;
  background: var(--tm-semantic-surface-raised);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tm-integration-table-wrap { border-color: rgba(255,255,255,.08); background: var(--tm-semantic-surface-panel); }
}

.tm-integration-table {
  inline-size: 100%;
  border-collapse: collapse;
  font: var(--tm-semantic-type-body);
}

.tm-integration-table th,
.tm-integration-table td {
  min-inline-size: var(--tm-semantic-size-dialog-sm);
  padding: 16px 20px;
  border-block-end: 1px solid rgba(15,17,21,.05);
  text-align: start;
  vertical-align: top;
}

.tm-integration-table th {
  color: var(--tm-semantic-text-primary);
  background: var(--tm-semantic-surface-subtle);
  font: var(--tm-semantic-type-label);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tm-integration-table th,
  :root:not([data-theme]) .tm-integration-table td { border-block-end-color: rgba(255,255,255,.08); }
}

.tm-integration-table td {
  color: var(--tm-semantic-text-secondary);
}

.tm-integration-table tr:last-child td {
  border-block-end: 0;
}

.tm-integration-table code,
.tm-integration-card code {
  color: var(--tm-semantic-text-primary);
  font: var(--tm-semantic-type-code);
  overflow-wrap: anywhere;
}

.tm-integration-faq {
  padding-block: var(--tm-semantic-spacing-page);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
}

.tm-integration-faq h2 {
  margin-block-start: 0;
  margin-block-end: var(--tm-semantic-spacing-stack-xl);
}

.tm-integration-faq details {
  border: 1px solid rgba(15,17,21,.06);
  border-radius: 20px;
  background: var(--tm-semantic-surface-raised);
  box-shadow: 0 4px 20px -8px rgba(15,17,21,.08);
  padding: 6px 24px;
  margin-block-end: 12px;
}

.tm-integration-faq details:last-child {
  margin-block-end: 0;
}

.tm-integration-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-semantic-spacing-inline-lg);
  min-block-size: var(--tm-semantic-size-touch);
  padding-block: 20px;
  font: var(--tm-semantic-type-title);
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tm-integration-faq details { border-color: rgba(255,255,255,.08); background: var(--tm-semantic-surface-panel); }
}

.tm-integration-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--tm-semantic-text-secondary);
  font: var(--tm-semantic-type-title);
}

.tm-integration-faq details[open] summary::after {
  content: "−";
}

.tm-integration-faq details p {
  max-inline-size: var(--tm-semantic-size-reading-max);
  margin: 0 0 var(--tm-semantic-spacing-stack-xl);
  color: var(--tm-semantic-text-secondary);
}

.tm-integration-cta {
  margin-block: var(--tm-semantic-spacing-section);
  padding: var(--tm-semantic-spacing-section);
  border: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
  border-radius: var(--tm-semantic-radius-dialog);
  color: var(--tm-runtime-band-text);
  background: var(--tm-runtime-band-surface);
}

.tm-integration-cta h2 {
  margin-block-start: 0;
}

/* IN-04 / IN-05 : un seul bloc inversé par page ; le bandeau intermédiaire reste clair. */
.tm-integration-cta--plain {
  color: var(--tm-semantic-text-primary);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
  border-radius: 0;
  background: transparent;
}

.tm-integration-cta--plain .tm-integration-cta__links a {
  color: var(--tm-semantic-text-primary);
  border-color: var(--tm-semantic-border-default);
}

.tm-integration-cta--plain .tm-integration-cta__links a:hover {
  border-color: var(--tm-semantic-border-selected);
  color: var(--tm-semantic-text-primary);
}

.tm-integration-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-semantic-spacing-inline-sm);
  margin-block-start: var(--tm-semantic-spacing-stack-xl);
}

.tm-integration-cta__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tm-semantic-size-touch);
  padding-inline: var(--tm-semantic-spacing-inline-lg);
  border: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-strong);
  border-radius: var(--tm-semantic-radius-control);
  color: var(--tm-runtime-band-text);
  font: var(--tm-semantic-type-label);
  text-decoration: none;
  white-space: nowrap;
}

.tm-integration-cta__links a:hover {
  border-color: var(--tm-semantic-border-selected);
  color: var(--tm-semantic-action-primary-bg);
}

.tm-integration-cta__links .tm-button--primary,
.tm-integration-cta__links .tm-button--primary:hover {
  color: var(--tm-semantic-action-primary-fg);
  border-color: var(--tm-semantic-action-primary-bg);
  background: var(--tm-semantic-action-primary-bg);
}

.tm-site-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tm-semantic-size-popover)), 1fr));
  gap: var(--tm-semantic-spacing-stack-xl);
  align-items: end;
  inline-size: var(--tm-runtime-rail);
  margin-inline: auto;
  padding: var(--tm-semantic-spacing-stack-xl) var(--tm-runtime-page-gutter) var(--tm-semantic-spacing-section);
  border-block-start: var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
}

.tm-site-footer strong {
  font: var(--tm-semantic-type-title);
}

.tm-site-footer p {
  margin: var(--tm-semantic-spacing-stack-sm) 0 0;
  color: var(--tm-semantic-text-secondary);
}

.tm-site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--tm-semantic-spacing-inline-lg);
}

.tm-site-footer a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tm-semantic-size-touch);
  color: var(--tm-semantic-text-secondary);
  font: var(--tm-semantic-type-label);
  text-underline-offset: var(--tm-semantic-spacing-stack-xs);
}

@media (max-width: 900px) {
  .tm-integration-section__intro { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-skip-link,
  .tm-integration-card {
    transition: none;
  }
}

/* Itération 2 — table sans scroll, FAQ cards nettoyée, cards agents avec icônes. */
.tm-integration-table-wrap { overflow-x: visible; overflow: hidden; }
.tm-integration-table { table-layout: auto; }
.tm-integration-table th,
.tm-integration-table td {
  min-inline-size: 0;
  padding: 14px 16px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.tm-integration-faq details { border-color: transparent; }
.tm-integration-faq details[open] { box-shadow: 0 14px 44px -14px rgba(15,17,21,.18), 0 4px 12px -4px rgba(15,17,21,.08); }

/* Task 14 — Cards agents dans .tm-integration-cta--plain */
.tm-integration-cta--plain .tm-integration-cta__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .tm-integration-cta--plain .tm-integration-cta__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tm-integration-cta--plain .tm-integration-cta__links { grid-template-columns: 1fr; }
}
.tm-integration-cta--plain .tm-integration-cta__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 0;
  min-height: 64px;
  padding: 16px 20px;
  border: 1px solid rgba(15,17,21,.06);
  border-radius: 16px;
  background: var(--tm-semantic-surface-raised);
  box-shadow: 0 4px 20px -8px rgba(15,17,21,.08), 0 1px 3px rgba(15,17,21,.04);
  color: var(--tm-semantic-text-primary);
  font-weight: 700;
  text-decoration: none;
  white-space: normal;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tm-integration-cta--plain .tm-integration-cta__links a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(15,17,21,.14), 0 2px 6px rgba(15,17,21,.06);
  border-color: rgba(15,17,21,.1);
}
.tm-integration-cta--plain .tm-integration-cta__links a i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(212,183,46,.14);
  color: #7A6600;
  font-size: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tm-integration-cta--plain .tm-integration-cta__links a { border-color: rgba(255,255,255,.08); background: var(--tm-semantic-surface-panel); }
  :root:not([data-theme]) .tm-integration-cta--plain .tm-integration-cta__links a i { background: rgba(212,183,46,.20); color: #F4D960; }
}