@import url("styles/tokens.generated.css");

/* Fondations vitrines (lot A de DESIGN-VITRINES.md).
 * Chargé par les 34 pages publiques qui portent le header : c'est le seul endroit
 * où l'échelle éditoriale et le rail de page sont définis.
 */
:root {
  /* T-01 → T-05 : paliers éditoriaux fluides, au-dessus du palier produit (32px). */
  --tm-runtime-display-xl:clamp(2.75rem,1.6rem + 4.6vw,4.5rem);
  --tm-runtime-display-lg:clamp(2.125rem,1.4rem + 2.8vw,3.25rem);
  --tm-runtime-display-md:clamp(1.5rem,1.15rem + 1.4vw,2rem);
  --tm-runtime-lede:clamp(1.0625rem,1rem + 0.5vw,1.3125rem);
  --tm-runtime-body-lg:1.0625rem;
  --tm-runtime-leading-display:1.06;
  --tm-runtime-leading-title:1.2;
  --tm-runtime-leading-lede:1.5;
  --tm-runtime-leading-body:1.65;
  --tm-runtime-tracking-display:-0.028em;
  --tm-runtime-tracking-eyebrow:0.08em;
  /* T-06 → T-08 : un seul rail. Header, contenu et footer partagent largeur et gouttière.
     Fluide sur grands écrans (fullscreen macOS, 24"+, 27"+) : le contenu s'élargit
     progressivement au lieu de rester en rail 1180px avec de grandes marges noires. */
  --tm-runtime-content-max:clamp(1180px, 88vw, 1600px);
  --tm-runtime-page-gutter:var(--tm-semantic-spacing-inline-lg);
  --tm-runtime-rail:min(var(--tm-runtime-content-max),calc(100% - (var(--tm-semantic-spacing-inline-lg) * 2)));
  /* T-09 : rythme vertical fluide, trois valeurs seulement. */
  --tm-runtime-section-space:clamp(3.5rem,5.5vw,5.5rem);
  --tm-runtime-section-space-lg:clamp(5rem,8vw,8rem);
  --tm-runtime-sticky-offset:calc(var(--tm-semantic-spacing-page) + var(--tm-semantic-spacing-stack-xl));
  /* IM-01 : le bandeau de fin ne bascule plus en dalle blanche au bas d'une page sombre.
   * En clair il reste la surface inversée ; en sombre il devient un panneau surélevé. */
  --tm-runtime-band-surface:var(--tm-semantic-surface-inverse);
  --tm-runtime-band-text:var(--tm-semantic-text-inverse);
}

[data-theme="dark"] {
  --tm-runtime-band-surface:var(--tm-semantic-surface-panel);
  --tm-runtime-band-text:var(--tm-semantic-text-primary);
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --tm-runtime-band-surface:var(--tm-semantic-surface-panel);
    --tm-runtime-band-text:var(--tm-semantic-text-primary);
  }
}

/* T-29 : l'utilitaire est requis par le header sur les 15 pages sans couche de composants. */
.u-visually-hidden { position:absolute; width:var(--tm-semantic-size-visually-hidden); height:var(--tm-semantic-size-visually-hidden); padding:0; margin:calc(var(--tm-semantic-size-visually-hidden) * -1); overflow:hidden; white-space:nowrap; border:0; clip:rect(0,0,0,0); }

.site-header {
  position:sticky;
  top:calc(var(--tm-semantic-spacing-inline-xs) * 3.5);
  z-index:40;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:calc(var(--tm-semantic-spacing-inline-xs) * 5);
  width:var(--tm-runtime-rail);
  min-height:66px;
  margin:calc(var(--tm-semantic-spacing-inline-xs) * 3.5) auto 0;
  padding:calc(var(--tm-semantic-spacing-inline-xs) * 2) var(--tm-runtime-page-gutter);
  border:1px solid var(--tm-semantic-border-default);
  border-radius:var(--tm-semantic-radius-dialog);
  color:var(--tm-semantic-text-primary);
  background:color-mix(in srgb,var(--tm-semantic-surface-raised) 91%,transparent);
  box-shadow:var(--tm-semantic-shadow-raised);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.site-header .site-brand { display:flex; align-items:center; gap:calc(var(--tm-semantic-spacing-inline-xs) * 2.75); color:var(--tm-semantic-text-primary); font-size:var(--tm-semantic-size-text-body); font-weight:800; letter-spacing:-.045em; text-decoration:none; white-space:nowrap; }
.site-header .thread-mark { display:block; flex:0 0 auto; width:38px; height:38px; background:url('/assets/tramya-mark.svg') center/contain no-repeat; }
.site-header .thread-mark i { display:none; }
.site-nav { display:flex; justify-content:center; gap:calc(var(--tm-semantic-spacing-inline-xs) * 4); min-width:0; }
.site-header .site-nav a { position:relative; padding:calc(var(--tm-semantic-spacing-inline-xs) * 2.5) 0; color:var(--tm-semantic-text-secondary); font-size:var(--tm-semantic-size-text-body); font-weight:700; text-decoration:none; white-space:nowrap; transition:color var(--tm-semantic-motion-standard) var(--tm-semantic-motion-ease-out); }
.site-header .site-nav a::after { position:absolute; right:0; bottom:calc(var(--tm-semantic-spacing-inline-xs) * 0.75); left:0; height:2px; border-radius:var(--tm-semantic-radius-control); background:var(--tm-semantic-action-primary-bg); content:""; opacity:0; transform:scaleX(.35); transition:opacity var(--tm-semantic-motion-standard) var(--tm-semantic-motion-ease-out),transform var(--tm-semantic-motion-standard) var(--tm-semantic-motion-ease-out); }
/* T-24 : le survol ne déplace plus la cible sous le curseur. */
.site-header .site-nav a:hover { color:var(--tm-semantic-text-primary); }
.site-header .site-nav a:hover::after { opacity:1; transform:scaleX(1); }
.site-header .site-nav a[aria-current="page"],.site-header .site-nav a[aria-current="location"] { color:var(--tm-semantic-text-primary); }
.site-header .site-nav a[aria-current]::after { opacity:1; transform:scaleX(1); }
/* T-11 / B1 : contrat de CTA primaire unique — surface accent + texte on-accent,
 * identique au header, au tiroir mobile et aux héros. Aucun couple ne se désynchronise. */
.site-header.tm-site-header .nav-cta { display:inline-flex; align-items:center; gap:calc(var(--tm-semantic-spacing-inline-xs) * 2); min-height:46px; padding:calc(var(--tm-semantic-spacing-inline-xs) * 1.75) calc(var(--tm-semantic-spacing-inline-xs) * 4.25); border:1px solid var(--tm-semantic-action-primary-bg); border-radius:var(--tm-semantic-radius-control); color:var(--tm-semantic-action-primary-fg); background:var(--tm-semantic-action-primary-bg); font-size:var(--tm-semantic-size-text-body); font-weight:800; text-decoration:none; white-space:nowrap; transition:background var(--tm-semantic-motion-standard) var(--tm-semantic-motion-ease-out),box-shadow var(--tm-semantic-motion-standard) var(--tm-semantic-motion-ease-out); }
.site-header.tm-site-header .nav-cta i { display:grid; place-items:center; color:var(--tm-semantic-action-primary-fg); background:transparent; font-size:var(--tm-semantic-size-icon-md); }
/* T-23 : le token porte déjà une ombre complète, il ne se compose pas. */
.site-header.tm-site-header .nav-cta:hover { border-color:var(--tm-semantic-action-primary-hover); background:var(--tm-semantic-action-primary-hover); box-shadow:var(--tm-semantic-shadow-overlay); }
.site-header.tm-site-header .nav-cta:active { border-color:var(--tm-semantic-action-primary-active); background:var(--tm-semantic-action-primary-active); }
.tm-site-header__actions { display:flex; align-items:center; justify-content:flex-end; gap:calc(var(--tm-semantic-spacing-inline-xs) * 2.5); min-width:0; }
.tm-site-header__theme { display:flex; align-items:center; min-height:42px; }
.tm-site-header__theme-select { min-height:42px; padding:0 calc(var(--tm-semantic-spacing-inline-xs) * 2.25); border:1px solid var(--tm-semantic-border-default); border-radius:var(--tm-semantic-radius-control); color:var(--tm-semantic-text-secondary); background:var(--tm-semantic-surface-raised); font:inherit; font-size:var(--tm-semantic-size-text-meta); font-weight:700; cursor:pointer; }
.tm-site-header__theme-select:hover { color:var(--tm-semantic-text-primary); border-color:var(--tm-semantic-border-strong); }
/* T-22 : un seul anneau de focus, celui du design system, sur tout ce qui est focusable. */
.site-header :is(a,button,summary,select,input):focus-visible,.tm-public-site-footer :is(a,button):focus-visible { outline:none; box-shadow:var(--tm-semantic-shadow-focus); }
.site-mobile-nav { display:none; }

@media (max-width:1180px) {
  .site-header { grid-template-columns:auto 1fr; gap:calc(var(--tm-semantic-spacing-inline-xs) * 3); }
  .site-nav { display:none; }
  .tm-site-header__actions { justify-self:end; }
  .site-mobile-nav { position:relative; display:block; justify-self:end; }
  .site-mobile-nav summary { position:relative; z-index:52; display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--tm-semantic-border-strong); border-radius:var(--tm-semantic-radius-panel); color:var(--tm-semantic-text-primary); background:var(--tm-semantic-surface-raised); cursor:pointer; list-style:none; transition:color .25s var(--tm-semantic-motion-ease-out),background .25s var(--tm-semantic-motion-ease-out),transform .25s var(--tm-semantic-motion-ease-out); }
  .site-mobile-nav summary::-webkit-details-marker { display:none; }
  .site-mobile-nav summary i { font-size:var(--tm-semantic-size-text-title); transition:transform .35s var(--tm-semantic-motion-ease-out); }
  .site-mobile-nav[open] summary { color:var(--tm-semantic-surface-raised); background:var(--tm-semantic-text-primary); }
  .site-mobile-nav[open] summary i { transform:rotate(90deg); }
  .site-mobile-nav[open]::before { position:fixed; inset:0; z-index:48; background:color-mix(in srgb,var(--tm-semantic-text-primary) 28%,transparent); content:""; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  .site-mobile-nav nav { position:absolute; top:calc(var(--tm-semantic-spacing-inline-xs) * 13); right:0; z-index:51; display:grid!important; grid-template-columns:minmax(0,1fr); justify-content:stretch!important; gap:calc(var(--tm-semantic-spacing-inline-xs) * 0.75)!important; width:min(340px,calc(100vw - 32px)); min-width:0; max-height:calc(100dvh - 94px); padding:calc(var(--tm-semantic-spacing-inline-xs) * 2.5); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--tm-semantic-border-strong); border-radius:var(--tm-semantic-radius-panel); background:var(--tm-semantic-surface-raised); box-shadow:0 24px 70px color-mix(in srgb,var(--tm-semantic-text-primary) 20%,transparent); transform-origin:top right; }
  .site-mobile-nav nav>a:not(.mobile-nav-action) { display:grid; grid-template-columns:36px 1fr; align-items:center; justify-self:stretch!important; gap:calc(var(--tm-semantic-spacing-inline-xs) * 2.75); width:100%; min-height:48px; padding:calc(var(--tm-semantic-spacing-inline-xs) * 1.5) calc(var(--tm-semantic-spacing-inline-xs) * 2.5); border-radius:var(--tm-semantic-radius-control); color:var(--tm-semantic-text-secondary); font-size:var(--tm-semantic-size-text-meta); font-weight:750; text-decoration:none; transition:color .22s var(--tm-semantic-motion-ease-out),background .22s var(--tm-semantic-motion-ease-out),transform .22s var(--tm-semantic-motion-ease-out); }
  .site-mobile-nav nav>a:not(.mobile-nav-action)>i { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--tm-semantic-border-default); border-radius:var(--tm-semantic-radius-control); color:var(--tm-semantic-text-primary); background:var(--tm-semantic-surface-subtle); font-size:var(--tm-semantic-size-text-body); }
  .site-mobile-nav nav>a:not(.mobile-nav-action):hover,.site-mobile-nav nav>a:not(.mobile-nav-action)[aria-current] { color:var(--tm-semantic-text-primary); background:var(--tm-semantic-surface-subtle); transform:translateX(2px); }
  .site-mobile-nav nav>a:not(.mobile-nav-action)[aria-current]>i { color:var(--tm-semantic-text-on-accent); border-color:var(--tm-semantic-action-primary-bg); background:var(--tm-semantic-action-primary-bg); }
  /* B1 : le CTA du tiroir portait `tm-button--primary` (contrat accent) tout en étant peint
   * en surface inverse. `.tm-marketing .tm-button--primary` (même spécificité, feuille plus
   * tardive) reprenait la couleur du texte : encre sur encre, contraste 1,00 sur 17 pages.
   * Le tiroir applique désormais réellement le contrat accent, comme le CTA du header. */
  .site-mobile-nav .mobile-nav-action { display:flex; align-items:center; justify-content:center; justify-self:stretch!important; gap:calc(var(--tm-semantic-spacing-inline-xs) * 2); width:100%; min-height:48px; margin-top:calc(var(--tm-semantic-spacing-inline-xs) * 1.75); padding:calc(var(--tm-semantic-spacing-inline-xs) * 1.75) calc(var(--tm-semantic-spacing-inline-xs) * 3.75); border:1px solid var(--tm-semantic-action-primary-bg); border-radius:var(--tm-semantic-radius-control); color:var(--tm-semantic-action-primary-fg); background:var(--tm-semantic-action-primary-bg); font-size:var(--tm-semantic-size-text-body); font-weight:800; text-decoration:none; white-space:nowrap; }
  .site-mobile-nav .mobile-nav-action i { display:grid; place-items:center; color:var(--tm-semantic-action-primary-fg); background:transparent; font-size:var(--tm-semantic-size-icon-md); }
  .site-mobile-nav .mobile-nav-action:hover { border-color:var(--tm-semantic-action-primary-hover); background:var(--tm-semantic-action-primary-hover); }
}
@media (max-width:1100px) and (prefers-reduced-motion:no-preference) {
  .site-mobile-nav[open] nav { animation:site-mobile-menu-in .28s var(--tm-semantic-motion-ease-out) both; }
  .site-mobile-nav[open]::before { animation:site-mobile-backdrop-in .2s ease-out both; }
}
@keyframes site-mobile-menu-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes site-mobile-backdrop-in { from { opacity:0; } to { opacity:1; } }
@media (max-width:620px) {
  .site-header { top:calc(var(--tm-semantic-spacing-inline-xs) * 2.25); grid-template-columns:auto 1fr auto; width:var(--tm-runtime-rail); min-height:60px; margin-top:calc(var(--tm-semantic-spacing-inline-xs) * 2.25); padding-inline:calc(var(--tm-semantic-spacing-inline-xs) * 2.5); }
  .tm-site-header__actions { grid-column:2 / -1; }
  .tm-site-header__theme { display:none; }
  .site-header .site-brand>span:last-child { display:inline; }
  /* B2 : cette règle était écrite `.site-header .nav-cta` (0-2-0) et perdait contre
   * `.site-header.tm-site-header .nav-cta` (0-3-0). Le CTA de 224 px restait donc affiché
   * dans une piste de 217 px et recouvrait la marque à 320 px, sur 33 pages.
   * Sous 620 px, l'action de conversion vit dans le tiroir (cf. .mobile-nav-action). */
  .site-header.tm-site-header .nav-cta { display:none; }
}
@media (max-width:480px) { .site-mobile-nav nav { position:fixed; top:calc(var(--tm-semantic-spacing-inline-xs) * 19.5); right:calc(var(--tm-semantic-spacing-inline-xs) * 2.5); left:calc(var(--tm-semantic-spacing-inline-xs) * 2.5); width:auto; max-height:calc(100dvh - (var(--tm-semantic-size-touch) * 2)); } }
/* T-27 : la marque ne clignote plus à travers les points de rupture — le CTA ayant
 * rejoint le tiroir sous 620 px, « Tramya » tient jusqu'à 320 px sur toutes les pages. */
@media (prefers-reduced-transparency:reduce) { .site-header { background:var(--tm-semantic-surface-raised); backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media (prefers-reduced-motion:reduce) { .site-header * { transition:none!important; } }

/* ------------------------------------------------------------------------
 * Canonical public footer (injecté par site-header.js)
 * Structure : 4 colonnes desktop → 2 tablette → 1 mobile.
 * Tokens semantic-only pour respecter le theme toggle (light/dark/system).
 * ------------------------------------------------------------------------ */
.tm-canonical-footer {
  margin-top:var(--tm-semantic-spacing-section);
  padding:0;
  color:var(--tm-semantic-text-primary);
  background:var(--tm-semantic-surface-subtle,var(--tm-semantic-surface-panel));
  border-top:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);
  font:var(--tm-semantic-type-body);
  box-sizing:border-box;
}
.tm-canonical-footer *,
.tm-canonical-footer *::before,
.tm-canonical-footer *::after {
  box-sizing:border-box;
}
.tm-canonical-footer__inner {
  display:grid;
  gap:var(--tm-semantic-spacing-stack-xl);
  width:var(--tm-runtime-rail);
  max-width:var(--tm-runtime-content-max);
  margin:0 auto;
  padding:calc(var(--tm-semantic-spacing-inline-xs) * 12) var(--tm-runtime-page-gutter) calc(var(--tm-semantic-spacing-inline-xs) * 6);
}
.tm-canonical-footer__grid {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:var(--tm-semantic-spacing-stack-xl) var(--tm-semantic-spacing-inline-lg);
  align-items:start;
}
.tm-canonical-footer__brand { display:grid; gap:var(--tm-semantic-spacing-stack-sm); align-content:start; }
.tm-canonical-footer__brand-link {
  display:inline-flex; align-items:center; gap:calc(var(--tm-semantic-spacing-inline-xs) * 2.5);
  width:max-content;
  color:var(--tm-semantic-text-primary);
  font-size:calc(var(--tm-semantic-size-text-body) * 1.1);
  font-weight:800; letter-spacing:-.03em; text-decoration:none;
}
.tm-canonical-footer__wordmark { font:inherit; }
.tm-canonical-footer__mark { display:block; width:32px; height:32px; flex:0 0 auto; }
.tm-canonical-footer__pitch {
  margin:0;
  max-width:34ch;
  color:var(--tm-semantic-text-secondary);
  font-size:var(--tm-semantic-size-text-body);
  line-height:1.55;
}
.tm-canonical-footer__badges {
  display:flex; flex-wrap:wrap; gap:calc(var(--tm-semantic-spacing-inline-xs) * 2);
  margin:calc(var(--tm-semantic-spacing-inline-xs) * 1.5) 0 0; padding:0;
  list-style:none;
}
.tm-canonical-footer__badges li {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border:1px solid var(--tm-semantic-border-default);
  border-radius:999px;
  color:var(--tm-semantic-text-secondary);
  background:var(--tm-semantic-surface-raised,transparent);
  font-size:var(--tm-semantic-size-text-meta);
  font-weight:600;
}
.tm-canonical-footer__badges i { font-size:var(--tm-semantic-size-icon-sm,14px); }

.tm-canonical-footer__col { min-width:0; display:grid; gap:calc(var(--tm-semantic-spacing-inline-xs) * 2.5); }
.tm-canonical-footer__title {
  margin:0;
  color:var(--tm-semantic-text-primary);
  font-size:var(--tm-semantic-size-text-meta);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.tm-canonical-footer__col ul { display:grid; gap:calc(var(--tm-semantic-spacing-inline-xs) * 1.5); margin:0; padding:0; list-style:none; }
.tm-canonical-footer__col a {
  display:inline-block;
  color:var(--tm-semantic-text-secondary);
  font-size:var(--tm-semantic-size-text-body);
  font-weight:500;
  text-decoration:none;
  transition:color .2s var(--tm-semantic-motion-ease-out,ease-out);
}
.tm-canonical-footer__col a:hover,.tm-canonical-footer__col a:focus-visible {
  color:var(--tm-semantic-text-primary);
}
.tm-canonical-footer__col a[aria-current="page"] { color:var(--tm-semantic-text-primary); font-weight:700; }

.tm-canonical-footer__bottom {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--tm-semantic-spacing-stack-sm) var(--tm-semantic-spacing-inline-md);
  padding-top:calc(var(--tm-semantic-spacing-inline-xs) * 4);
  border-top:1px solid var(--tm-semantic-border-default);
}
.tm-canonical-footer__copy {
  margin:0;
  /* Contraste WCAG AA : text-secondary est plus foncé que text-tertiary
     (fix audit a11y 2026-08-05, tertiary trop clair sur fond canvas). */
  color:var(--tm-semantic-text-secondary,#3D4642);
  font-size:var(--tm-semantic-size-text-meta);
}
.tm-canonical-footer__meta { display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--tm-semantic-spacing-inline-xs) * 2.25); }
.tm-canonical-footer__meta-link {
  color:var(--tm-semantic-text-secondary);
  font-size:var(--tm-semantic-size-text-meta);
  text-decoration:none;
  transition:color .2s var(--tm-semantic-motion-ease-out,ease-out);
}
.tm-canonical-footer__meta-link:hover { color:var(--tm-semantic-text-primary); }
.tm-canonical-footer__lang {
  padding:3px 8px;
  border:1px solid var(--tm-semantic-border-default);
  border-radius:6px;
  color:var(--tm-semantic-text-secondary);
  font-size:var(--tm-semantic-size-text-meta);
  font-weight:600; letter-spacing:.04em;
}
.tm-canonical-footer__social {
  display:inline-grid; place-items:center;
  width:32px; height:32px;
  border:1px solid var(--tm-semantic-border-default);
  border-radius:8px;
  color:var(--tm-semantic-text-secondary);
  text-decoration:none;
  transition:color .2s var(--tm-semantic-motion-ease-out,ease-out),border-color .2s var(--tm-semantic-motion-ease-out,ease-out),background .2s var(--tm-semantic-motion-ease-out,ease-out);
}
.tm-canonical-footer__social:hover,.tm-canonical-footer__social:focus-visible {
  color:var(--tm-semantic-text-primary);
  border-color:var(--tm-semantic-text-primary);
  background:var(--tm-semantic-surface-raised,transparent);
}
.tm-canonical-footer__social i { font-size:16px; }

@media (max-width:960px) {
  .tm-canonical-footer__grid { grid-template-columns:1fr 1fr; }
  .tm-canonical-footer__brand { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .tm-canonical-footer__inner { padding:calc(var(--tm-semantic-spacing-inline-xs) * 8) var(--tm-runtime-page-gutter) calc(var(--tm-semantic-spacing-inline-xs) * 5); gap:var(--tm-semantic-spacing-stack-lg); }
  .tm-canonical-footer__grid { grid-template-columns:1fr; gap:var(--tm-semantic-spacing-stack-lg); }
  .tm-canonical-footer__bottom { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { .tm-canonical-footer * { transition:none!important; } }

/* App shell: contrat semantic-only, étape 3 du redesign. */
.tm-app-shell {
  display:grid;
  grid-template-columns:var(--tm-semantic-size-sidebar) minmax(0,1fr);
  min-block-size:100dvh;
  color:var(--tm-semantic-text-primary);
  background:var(--tm-semantic-surface-canvas);
  transition:none;
}

body.tm-component-root { color:var(--tm-semantic-text-primary); background:var(--tm-semantic-surface-canvas); }

.tm-app-shell__sidebar {
  position:sticky;
  inset-block-start:0;
  z-index:var(--tm-semantic-layer-sticky);
  display:grid;
  grid-template-rows:auto minmax(0,3fr) minmax(calc(var(--tm-semantic-size-control-lg) * 6),2fr) auto;
  gap:var(--tm-semantic-spacing-stack-xs);
  block-size:100dvh;
  min-inline-size:0;
  padding:var(--tm-semantic-spacing-stack-xl) var(--tm-semantic-spacing-inline-lg);
  overflow:visible;
  color:var(--tm-semantic-text-primary);
  border-inline-end:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
  background:var(--tm-semantic-surface-panel);
}
.tm-app-shell__sidebar::after { display:none; }

.tm-app-shell__sidebar-toggle {
  position:absolute;
  inset-block-start:var(--tm-semantic-spacing-stack-xl);
  inset-inline-end:calc(var(--tm-semantic-size-control-sm) / -2);
  z-index:var(--tm-semantic-layer-dropdown);
  display:grid;
  place-items:center;
  inline-size:var(--tm-semantic-size-control-sm);
  block-size:var(--tm-semantic-size-control-sm);
  padding:0;
  color:var(--tm-semantic-action-secondary-fg);
  border:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);
  border-radius:var(--tm-semantic-radius-control);
  background:var(--tm-semantic-action-secondary-bg);
  box-shadow:var(--tm-semantic-shadow-raised);
}

.tm-app-shell__sidebar-toggle:hover { background:var(--tm-semantic-action-secondary-hover); }
.tm-app-shell__sidebar-toggle:active { background:var(--tm-semantic-action-secondary-active); transform:translateY(var(--tm-semantic-motion-press-offset)); }
.tm-app-shell__sidebar-toggle i { font-size:var(--tm-semantic-size-icon-md); }

.tm-app-shell__brand {
  display:flex;
  align-items:center;
  gap:var(--tm-semantic-spacing-inline-md);
  min-block-size:var(--tm-semantic-size-control-lg);
  margin:0 0 var(--tm-semantic-spacing-stack-lg);
  color:var(--tm-semantic-text-primary);
  text-decoration:none;
}

.tm-app-shell__brand-mark {
  flex:0 0 var(--tm-semantic-size-control-lg);
  inline-size:var(--tm-semantic-size-control-lg);
  block-size:var(--tm-semantic-size-control-lg);
  border:0;
  border-radius:var(--tm-semantic-radius-panel);
  background:url('/assets/tramya-mark.svg') center/contain no-repeat;
  box-shadow:none;
}

.tm-app-shell__brand-copy { display:grid; min-inline-size:0; gap:var(--tm-semantic-spacing-stack-xxs); }
.tm-app-shell__brand-copy strong { font:var(--tm-semantic-type-title); letter-spacing:-.03em; }
.tm-app-shell__brand-copy small { overflow:hidden; color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); text-overflow:ellipsis; white-space:nowrap; }
.tm-app-shell__navigation { min-block-size:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--tm-semantic-border-default) transparent; }
.tm-app-shell__projects { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; min-block-size:0; padding-block-start:var(--tm-semantic-spacing-stack-sm); border-block-start:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle); }
.tm-app-shell__footer { display:grid; gap:var(--tm-semantic-spacing-stack-sm); padding-block-start:var(--tm-semantic-spacing-stack-sm); border-block-start:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle); }
.tm-app-shell__section-label { margin:var(--tm-semantic-spacing-stack-sm) var(--tm-semantic-spacing-inline-md) var(--tm-semantic-spacing-stack-xs); color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); letter-spacing:.08em; text-transform:uppercase; }
.tm-app-shell__section-label--projects { margin-block-start:0; }
.tm-app-shell__nav,.tm-app-shell__project-list { display:grid; gap:var(--tm-semantic-spacing-stack-xs); min-inline-size:0; }

.tm-app-shell__nav-item,
.tm-app-shell__project-list button,
.tm-app-shell__new-project {
  display:grid;
  grid-template-columns:var(--tm-semantic-size-control-sm) minmax(0,1fr) auto;
  align-items:center;
  gap:var(--tm-semantic-spacing-inline-sm);
  inline-size:100%;
  min-block-size:var(--tm-semantic-size-control-lg);
  padding:var(--tm-semantic-spacing-stack-xs) var(--tm-semantic-spacing-inline-sm);
  overflow:hidden;
  color:var(--tm-semantic-action-ghost-fg);
  border:0;
  border-radius:var(--tm-semantic-radius-control);
  background:transparent;
  font:var(--tm-semantic-type-label);
  text-align:start;
  transition:color var(--tm-semantic-motion-fast) var(--tm-semantic-motion-ease-out),background var(--tm-semantic-motion-fast) var(--tm-semantic-motion-ease-out),transform var(--tm-semantic-motion-fast) var(--tm-semantic-motion-ease-out);
}

.tm-app-shell__nav-item:hover,
.tm-app-shell__project-list button:hover,
.tm-app-shell__new-project:hover { color:var(--tm-semantic-text-primary); background:var(--tm-semantic-action-ghost-hover); }
.tm-app-shell__nav-item:active,.tm-app-shell__project-list button:active,.tm-app-shell__new-project:active { background:var(--tm-semantic-action-ghost-active); transform:translateY(var(--tm-semantic-motion-press-offset)); }
.tm-app-shell__nav-item.active,.tm-app-shell__nav-item.is-active,.tm-app-shell__nav-item[aria-current="page"] { color:var(--tm-semantic-text-primary); background:var(--tm-semantic-surface-selected); }
.tm-app-shell__nav-icon { display:grid; place-items:center; inline-size:var(--tm-semantic-size-control-sm); block-size:var(--tm-semantic-size-control-sm); color:currentColor; border:0; border-radius:var(--tm-semantic-radius-control); background:transparent; }
.tm-app-shell__nav-icon i { font-size:var(--tm-semantic-size-icon-md); }
.tm-app-shell__nav-label { overflow:hidden; font:inherit; text-overflow:ellipsis; white-space:nowrap; }

.tm-app-shell__project-filter {
  inline-size:100%;
  min-block-size:var(--tm-semantic-size-control-md);
  margin:0 0 var(--tm-semantic-spacing-stack-xs);
  padding:0 var(--tm-semantic-spacing-inline-md);
  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-control);
  background:var(--tm-semantic-surface-canvas);
  font:var(--tm-semantic-type-body);
}

.tm-app-shell__project-filter::placeholder { color:var(--tm-semantic-text-placeholder); }
.tm-app-shell__project-list { min-block-size:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--tm-semantic-border-default) transparent; }
.tm-app-shell__project-list button { grid-template-columns:var(--tm-semantic-size-control-sm) minmax(0,1fr) auto; }
.tm-app-shell__project-list .side-project-icon { display:grid; place-items:center; inline-size:var(--tm-semantic-size-control-sm); block-size:var(--tm-semantic-size-control-sm); overflow:hidden; color:var(--tm-semantic-text-primary); border-radius:var(--tm-semantic-radius-control); background:var(--tm-semantic-surface-subtle); font:var(--tm-semantic-type-meta); }
.tm-app-shell__project-list .side-project-icon img { inline-size:100%; block-size:100%; object-fit:cover; }
.tm-app-shell__project-list button>span:not(.side-project-icon) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-app-shell__project-list button small { color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); }
.tm-app-shell__project-list button.active { color:var(--tm-semantic-text-primary); background:var(--tm-semantic-surface-selected); }
.tm-app-shell__new-project { grid-template-columns:var(--tm-semantic-size-control-sm) minmax(0,1fr); flex:0 0 auto; margin:0; }
.tm-app-shell__new-project i { justify-self:center; font-size:var(--tm-semantic-size-icon-md); }

.tm-app-shell__plan {
  display:grid;
  gap:var(--tm-semantic-spacing-stack-xxs);
  inline-size:100%;
  min-block-size:var(--tm-semantic-size-control-lg);
  margin:0;
  padding:var(--tm-semantic-spacing-stack-sm) var(--tm-semantic-spacing-inline-md);
  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-control);
  background:var(--tm-semantic-action-secondary-bg);
  text-align:start;
}
.tm-app-shell__support { display:grid; grid-template-columns:var(--tm-semantic-size-control-sm) minmax(0,1fr); align-items:center; gap:var(--tm-semantic-spacing-inline-sm); inline-size:100%; min-block-size:var(--tm-semantic-size-control-lg); margin:0; padding:var(--tm-semantic-spacing-stack-xs) var(--tm-semantic-spacing-inline-sm); color:var(--tm-semantic-action-secondary-fg); border:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default); border-radius:var(--tm-semantic-radius-control); background:var(--tm-semantic-action-secondary-bg); font:var(--tm-semantic-type-label); text-align:start; }
.tm-app-shell__support:hover { background:var(--tm-semantic-action-secondary-hover); }
.tm-app-shell__support:active { background:var(--tm-semantic-action-secondary-active); transform:translateY(var(--tm-semantic-motion-press-offset)); }
.tm-app-shell__support i { justify-self:center; font-size:var(--tm-semantic-size-icon-md); }
.tm-app-shell__support span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-app-shell__plan span { color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.08em; }
.tm-app-shell__plan b { display:flex; align-items:center; justify-content:space-between; gap:calc(var(--tm-semantic-spacing-inline-sm) * 1.5); color:var(--tm-semantic-text-primary); font:var(--tm-semantic-type-label); font-weight:600; }
.tm-app-shell__plan b i { flex:0 0 auto; font-size:var(--tm-semantic-size-icon-sm); opacity:.7; }
.tm-app-shell__plan:hover { background:var(--tm-semantic-action-secondary-hover); }

.tm-app-shell__main {
  inline-size:100%;
  min-inline-size:0;
  max-inline-size:calc(var(--tm-semantic-size-content-max) + (var(--tm-semantic-spacing-inline-xl) * 2));
  margin-inline:auto;
  padding:0 var(--tm-semantic-spacing-inline-xl) var(--tm-semantic-spacing-page);
}

.tm-page-header {
  position:sticky;
  inset-block-start:0;
  z-index:var(--tm-semantic-layer-sticky);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(var(--tm-semantic-size-popover),auto) auto;
  align-items:center;
  gap:var(--tm-semantic-spacing-inline-lg);
  min-block-size:calc(var(--tm-semantic-spacing-page) + var(--tm-semantic-spacing-stack-sm));
  margin:0 0 var(--tm-semantic-spacing-stack-xl);
  padding-block:var(--tm-semantic-spacing-stack-sm);
  border-block-end:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle);
  background:var(--tm-semantic-surface-canvas);
}
.tm-page-header::after { display:none; }
.tm-page-header__menu { display:none; }
.tm-page-header__title { min-inline-size:0; }
.tm-page-header__context { margin:0; color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); letter-spacing:.08em; text-transform:uppercase; }
.tm-page-header__title h1 { margin:var(--tm-semantic-spacing-stack-xxs) 0 0; overflow:hidden; color:var(--tm-semantic-text-primary); font:var(--tm-semantic-type-title); letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.tm-page-header__project { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--tm-semantic-spacing-inline-sm); min-inline-size:0; color:var(--tm-semantic-text-secondary); font:var(--tm-semantic-type-meta); }
.tm-page-header__project select { inline-size:100%; min-inline-size:0; min-block-size:var(--tm-semantic-size-control-md); padding-inline:var(--tm-semantic-spacing-inline-md); 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-control); background:var(--tm-semantic-surface-panel); font:var(--tm-semantic-type-body); text-overflow:ellipsis; }
.tm-page-header__actions { display:flex; align-items:center; gap:var(--tm-semantic-spacing-inline-sm); min-inline-size:0; }

.tm-page-header__connection {
  display:flex;
  align-items:center;
  gap:var(--tm-semantic-spacing-inline-sm);
  min-inline-size:0;
  min-block-size:var(--tm-semantic-size-control-lg);
  padding:var(--tm-semantic-spacing-stack-xs) var(--tm-semantic-spacing-inline-md);
  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-control);
  background:var(--tm-semantic-surface-panel);
}
.tm-page-header__connection>span { inline-size:var(--tm-semantic-spacing-inline-sm); block-size:var(--tm-semantic-spacing-inline-sm); flex:0 0 auto; margin:0; border-radius:var(--tm-semantic-radius-circular); background:var(--tm-semantic-feedback-success); }
.tm-page-header__connection.error>span { background:var(--tm-semantic-feedback-danger); }
.tm-page-header__connection b,.tm-page-header__connection small { display:block; white-space:nowrap; }
.tm-page-header__connection b { font:var(--tm-semantic-type-label); }
.tm-page-header__connection small { color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); }

.tm-theme-picker,.tm-account-menu { position:relative; }
.tm-theme-picker__menu,.tm-account-menu__content {
  position:absolute;
  inset-block-start:calc(100% + var(--tm-semantic-spacing-stack-sm));
  inset-inline-end:0;
  z-index:var(--tm-semantic-layer-dropdown);
  display:grid;
  gap:var(--tm-semantic-spacing-stack-xs);
  inline-size:var(--tm-semantic-size-popover);
  padding:var(--tm-semantic-spacing-stack-sm);
  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-raised);
  box-shadow:var(--tm-semantic-shadow-overlay);
}
.tm-theme-picker__menu[hidden],.tm-account-menu__content[hidden] { display:none; }
.tm-theme-picker__option { display:grid; grid-template-columns:var(--tm-semantic-size-control-sm) minmax(0,1fr); align-items:center; gap:var(--tm-semantic-spacing-inline-sm); min-block-size:var(--tm-semantic-size-control-lg); padding:var(--tm-semantic-spacing-stack-xs) var(--tm-semantic-spacing-inline-sm); color:var(--tm-semantic-text-primary); border:0; border-radius:var(--tm-semantic-radius-control); background:transparent; text-align:start; }
.tm-theme-picker__option:hover,.tm-theme-picker__option[aria-checked="true"] { background:var(--tm-semantic-action-ghost-hover); }
.tm-theme-picker__option>i { justify-self:center; font-size:var(--tm-semantic-size-icon-md); }
.tm-theme-picker__option span { display:grid; }
.tm-theme-picker__option b { font:var(--tm-semantic-type-label); }
.tm-theme-picker__option small { color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); }

.tm-account-menu__trigger { display:flex; align-items:center; gap:var(--tm-semantic-spacing-inline-sm); min-block-size:var(--tm-semantic-size-control-lg); padding:var(--tm-semantic-spacing-stack-xs) var(--tm-semantic-spacing-inline-sm); 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-control); background:var(--tm-semantic-surface-panel); }
.tm-account-menu__trigger:hover,.tm-account-menu__trigger[aria-expanded="true"] { background:var(--tm-semantic-action-secondary-hover); }
.tm-account-menu__avatar { display:grid; place-items:center; inline-size:var(--tm-semantic-size-control-sm); block-size:var(--tm-semantic-size-control-sm); flex:0 0 auto; color:var(--tm-semantic-text-on-accent); border-radius:var(--tm-semantic-radius-control); background:var(--tm-semantic-action-primary-bg); font:var(--tm-semantic-type-label); }
.tm-account-menu__copy { display:grid; min-inline-size:0; text-align:start; }
.tm-account-menu__copy b { max-inline-size:var(--tm-semantic-size-popover); overflow:hidden; font:var(--tm-semantic-type-label); text-overflow:ellipsis; white-space:nowrap; }
.tm-account-menu__copy small { color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); }
.tm-account-menu__content { inline-size:var(--tm-semantic-size-popover); }
.tm-account-menu__identity { display:grid; gap:var(--tm-semantic-spacing-stack-xxs); padding:var(--tm-semantic-spacing-stack-sm); border-block-end:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle); }
.tm-account-menu__identity b { font:var(--tm-semantic-type-label); }
.tm-account-menu__identity small { color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); }
.tm-account-menu__content a,.tm-account-menu__content button { display:flex; align-items:center; gap:var(--tm-semantic-spacing-inline-sm); min-block-size:var(--tm-semantic-size-control-lg); padding:var(--tm-semantic-spacing-stack-xs) var(--tm-semantic-spacing-inline-sm); color:var(--tm-semantic-text-primary); border:0; border-radius:var(--tm-semantic-radius-control); background:transparent; font:var(--tm-semantic-type-label); text-align:start; text-decoration:none; }
.tm-account-menu__content a:hover,.tm-account-menu__content button:hover { background:var(--tm-semantic-action-ghost-hover); }
.tm-account-menu__content button[data-authenticated="false"] { color:var(--tm-semantic-text-primary); }

.tm-bottom-nav { display:none; }
.tm-drawer { display:none; }

@media (min-width:80rem) {
  .tm-app-shell.is-collapsed { grid-template-columns:calc(var(--tm-semantic-size-control-lg) + var(--tm-semantic-spacing-inline-xl) + var(--tm-semantic-spacing-inline-xs)) minmax(0,1fr); }
  .tm-app-shell.is-collapsed .tm-app-shell__sidebar { align-items:stretch; padding-inline:0; }
  .tm-app-shell.is-collapsed .tm-app-shell__nav-item { margin-inline:auto; }
  .tm-app-shell.is-collapsed .tm-app-shell__brand { justify-content:center; margin-inline:0; }
  .tm-app-shell.is-collapsed .tm-app-shell__brand-copy,
  .tm-app-shell.is-collapsed .tm-app-shell__section-label,
  .tm-app-shell.is-collapsed .tm-app-shell__project-filter,
  .tm-app-shell.is-collapsed .tm-app-shell__project-list,
  .tm-app-shell.is-collapsed .tm-app-shell__new-project .new-project-label,
  .tm-app-shell.is-collapsed .tm-app-shell__plan,
  .tm-app-shell.is-collapsed .tm-app-shell__support span { display:none; }
  .tm-app-shell.is-collapsed .tm-app-shell__sidebar { grid-template-rows:auto minmax(0,1fr) auto auto; }
  .tm-app-shell.is-collapsed .tm-app-shell__navigation { inline-size:100%; }
  .tm-app-shell.is-collapsed .tm-app-shell__projects { display:grid; grid-template-rows:1fr; inline-size:100%; padding-block-start:var(--tm-semantic-spacing-stack-sm); }
  .tm-app-shell.is-collapsed .tm-app-shell__footer { justify-items:center; inline-size:100%; }
  .tm-app-shell.is-collapsed .tm-app-shell__nav { justify-items:center; inline-size:100%; }
  .tm-app-shell.is-collapsed .tm-app-shell__nav-item,
  .tm-app-shell.is-collapsed .tm-app-shell__new-project { grid-template-columns:var(--tm-semantic-size-control-lg); justify-content:center; inline-size:var(--tm-semantic-size-control-lg); padding:0; }
  .tm-app-shell.is-collapsed .tm-app-shell__new-project { justify-self:center; margin:0; }
  .tm-app-shell.is-collapsed .tm-app-shell__support { grid-template-columns:var(--tm-semantic-size-control-lg); justify-content:center; inline-size:var(--tm-semantic-size-control-lg); min-block-size:var(--tm-semantic-size-control-lg); padding:0; }
  .tm-app-shell.is-collapsed .tm-app-shell__nav-label { position:absolute; inline-size:var(--tm-semantic-size-visually-hidden); block-size:var(--tm-semantic-size-visually-hidden); margin:calc(var(--tm-semantic-size-visually-hidden) * -1); overflow:hidden; clip:rect(0,0,0,0); }
}

.tm-app-shell :is(button,a,input,select):focus-visible,
.tm-bottom-nav button:focus-visible,
.tm-drawer :is(button,select):focus-visible {
  outline:var(--tm-semantic-border-width-strong) solid var(--tm-semantic-focus-ring);
  outline-offset:var(--tm-semantic-border-width-strong);
  box-shadow:var(--tm-semantic-shadow-focus);
}

@media (min-width:64rem) and (max-width:79.999rem) {
  .tm-app-shell { grid-template-columns:calc(var(--tm-semantic-size-control-lg) + var(--tm-semantic-spacing-inline-xl) + var(--tm-semantic-spacing-inline-xs)) minmax(0,1fr); }
  .tm-app-shell__sidebar { align-items:stretch; padding-inline:var(--tm-semantic-spacing-inline-md); }
  .tm-app-shell__sidebar-toggle { display:none; }
  .tm-app-shell__brand { justify-content:center; margin-inline:0; }
  .tm-app-shell__brand-copy,.tm-app-shell__section-label,.tm-app-shell__project-filter,.tm-app-shell__project-list,.tm-app-shell__new-project .new-project-label,.tm-app-shell__plan,.tm-app-shell__support span { display:none; }
  .tm-app-shell__sidebar { grid-template-rows:auto minmax(0,1fr) auto auto; }
  .tm-app-shell__navigation { inline-size:100%; }
  .tm-app-shell__projects { display:grid; grid-template-rows:1fr; inline-size:100%; padding-block-start:var(--tm-semantic-spacing-stack-sm); }
  .tm-app-shell__footer { justify-items:center; inline-size:100%; }
  .tm-app-shell__nav { justify-items:center; inline-size:100%; }
  .tm-app-shell__nav-item,
  .tm-app-shell__new-project { grid-template-columns:var(--tm-semantic-size-control-lg); justify-content:center; inline-size:var(--tm-semantic-size-control-lg); padding:0; }
  .tm-app-shell__new-project { justify-self:center; margin:0; }
  .tm-app-shell__support { grid-template-columns:var(--tm-semantic-size-control-lg); justify-content:center; inline-size:var(--tm-semantic-size-control-lg); min-block-size:var(--tm-semantic-size-control-lg); padding:0; }
  .tm-app-shell__nav-label { position:absolute; inline-size:var(--tm-semantic-size-visually-hidden); block-size:var(--tm-semantic-size-visually-hidden); margin:calc(var(--tm-semantic-size-visually-hidden) * -1); overflow:hidden; clip:rect(0,0,0,0); }
}

@media (max-width:63.999rem) {
  .tm-app-shell { display:block; }
  .tm-app-shell__sidebar { display:none; }
  .tm-app-shell__main { max-inline-size:var(--tm-semantic-size-content-max); }
  .tm-page-header { grid-template-columns:var(--tm-semantic-size-control-lg) minmax(0,1fr) minmax(var(--tm-semantic-size-popover),auto) auto; }
  .tm-page-header__menu { display:grid; }
  .tm-account-menu__copy,.tm-account-menu__trigger>i { display:none; }
  .tm-account-menu__trigger { padding:var(--tm-semantic-spacing-stack-xs); }
  .tm-drawer {
    position:fixed;
    inset:0 auto 0 0;
    z-index:var(--tm-semantic-layer-overlay);
    display:block;
    inline-size:min(100%,calc(var(--tm-semantic-size-popover) + var(--tm-semantic-spacing-inline-xl)));
    max-inline-size:none;
    block-size:100dvh;
    max-block-size:none;
    padding:0;
    margin:0;
    color:var(--tm-semantic-text-primary);
    border:0;
    border-inline-end:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);
    background:var(--tm-semantic-surface-panel);
    box-shadow:var(--tm-semantic-shadow-overlay);
  }
  .tm-drawer:not([open]) { display:none; }
  .tm-drawer::backdrop { background:var(--tm-semantic-surface-scrim); }
  .tm-drawer__surface { display:flex; flex-direction:column; gap:var(--tm-semantic-spacing-stack-lg); block-size:100%; padding:var(--tm-semantic-spacing-stack-xl); overflow:auto; overscroll-behavior:contain; }
  .tm-drawer__header { display:flex; align-items:center; justify-content:space-between; min-block-size:var(--tm-semantic-size-control-lg); padding:0; margin:0; border:0; }
  .tm-drawer__eyebrow { margin:0; color:var(--tm-semantic-text-tertiary); font:var(--tm-semantic-type-meta); text-transform:uppercase; }
  .tm-drawer__header h2 { margin:0; color:var(--tm-semantic-text-primary); font:var(--tm-semantic-type-title); }
  .tm-drawer__section,.tm-drawer__preferences { display:grid; gap:var(--tm-semantic-spacing-stack-sm); }
  .tm-drawer__project { display:grid; gap:var(--tm-semantic-spacing-stack-xs); color:var(--tm-semantic-text-secondary); font:var(--tm-semantic-type-label); }
  .tm-drawer__project select { inline-size:100%; min-block-size:var(--tm-semantic-size-control-lg); padding-inline:var(--tm-semantic-spacing-inline-md); 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-control); background:var(--tm-semantic-surface-canvas); font:var(--tm-semantic-type-body); }
  .tm-drawer__project-action { inline-size:100%; }
  .tm-drawer__nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--tm-semantic-spacing-stack-sm); }
  .tm-drawer__nav-item,.tm-drawer__account-link { display:flex; align-items:center; gap:var(--tm-semantic-spacing-inline-sm); min-block-size:var(--tm-semantic-size-control-lg); padding:var(--tm-semantic-spacing-stack-sm) var(--tm-semantic-spacing-inline-md); color:var(--tm-semantic-action-ghost-fg); border:0; border-radius:var(--tm-semantic-radius-control); background:transparent; font:var(--tm-semantic-type-label); text-align:start; }
  .tm-drawer__nav-item:hover,.tm-drawer__account-link:hover { color:var(--tm-semantic-text-primary); background:var(--tm-semantic-action-ghost-hover); }
  .tm-drawer__nav-item.active,.tm-drawer__nav-item[aria-current="page"] { color:var(--tm-semantic-text-primary); background:var(--tm-semantic-surface-selected); }
  .tm-drawer__nav-item i,.tm-drawer__account-link i { flex:0 0 auto; font-size:var(--tm-semantic-size-icon-md); }
  .tm-drawer__preferences { padding-block-start:var(--tm-semantic-spacing-stack-md); border-block-start:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle); }
  .tm-drawer__preferences h3 { margin:0; color:var(--tm-semantic-text-primary); font:var(--tm-semantic-type-label); }
  .tm-theme-picker__group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--tm-semantic-spacing-inline-sm); }
  .tm-theme-picker__choice { display:grid; place-items:center; gap:var(--tm-semantic-spacing-stack-xs); min-block-size:calc(var(--tm-semantic-size-control-lg) + var(--tm-semantic-spacing-stack-xl)); padding:var(--tm-semantic-spacing-stack-sm); color:var(--tm-semantic-action-ghost-fg); border:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default); border-radius:var(--tm-semantic-radius-control); background:var(--tm-semantic-surface-canvas); font:var(--tm-semantic-type-meta); }
  .tm-theme-picker__choice.is-active,.tm-theme-picker__choice[aria-checked="true"] { color:var(--tm-semantic-text-primary); border-color:var(--tm-semantic-border-selected); background:var(--tm-semantic-surface-selected); }
  .tm-theme-picker__choice i { font-size:var(--tm-semantic-size-icon-md); }
  .tm-drawer__account { display:grid; gap:var(--tm-semantic-spacing-stack-xs); margin-block-start:auto; padding-block-start:var(--tm-semantic-spacing-stack-md); border-block-start:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-subtle); }
}

@media (max-width:47.999rem) {
  .tm-app-shell__main { padding:0 var(--tm-semantic-spacing-inline-lg) calc(var(--tm-semantic-spacing-page) + var(--tm-semantic-spacing-stack-xl) + env(safe-area-inset-bottom)); }
  .tm-page-header { position:sticky; grid-template-columns:minmax(0,1fr) auto; gap:var(--tm-semantic-spacing-inline-sm); min-block-size:var(--tm-semantic-spacing-page); margin-block-end:var(--tm-semantic-spacing-stack-lg); padding-block:var(--tm-semantic-spacing-stack-sm); }
  .tm-page-header__menu,.tm-page-header__actions .tm-theme-picker,.tm-page-header__actions .tm-account-menu { display:none; }
  .tm-page-header__title { grid-column:1; grid-row:1; }
  .tm-page-header__project { grid-column:1/-1; grid-row:2; }
  .tm-page-header__project>span { position:absolute; inline-size:var(--tm-semantic-size-visually-hidden); block-size:var(--tm-semantic-size-visually-hidden); margin:calc(var(--tm-semantic-size-visually-hidden) * -1); overflow:hidden; clip:rect(0,0,0,0); }
  .tm-page-header__actions { grid-column:2; grid-row:1; }
  .tm-page-header__connection { inline-size:var(--tm-semantic-size-control-lg); min-inline-size:var(--tm-semantic-size-control-lg); padding:0; justify-content:center; }
  .tm-page-header__connection>div { display:none; }
  .tm-bottom-nav { position:fixed; inset:auto 0 0; z-index:var(--tm-semantic-layer-sticky); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-block-size:calc(var(--tm-semantic-spacing-page) + env(safe-area-inset-bottom)); padding:var(--tm-semantic-spacing-stack-xs) var(--tm-semantic-spacing-inline-xs) env(safe-area-inset-bottom); border-block-start:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default); background:var(--tm-semantic-surface-raised); box-shadow:var(--tm-semantic-shadow-overlay); }
  .tm-bottom-nav__item { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; place-items:center; align-content:center; gap:var(--tm-semantic-spacing-stack-xxs); min-inline-size:0; min-block-size:var(--tm-semantic-size-touch); padding:var(--tm-semantic-spacing-stack-xxs) 0; color:var(--tm-semantic-action-ghost-fg); border:0; border-radius:var(--tm-semantic-radius-control); background:transparent; font:var(--tm-semantic-type-meta); }
  .tm-bottom-nav__item:hover { color:var(--tm-semantic-text-primary); background:var(--tm-semantic-action-ghost-hover); }
  .tm-bottom-nav__item.active,.tm-bottom-nav__item[aria-current="page"] { color:var(--tm-semantic-text-primary); background:var(--tm-semantic-surface-selected); }
  .tm-bottom-nav__item i { font-size:var(--tm-semantic-size-icon-lg); }
  .tm-bottom-nav__item span { max-inline-size:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tm-drawer { inset:auto 0 0; inline-size:100%; block-size:auto; max-block-size:calc(100dvh - var(--tm-semantic-spacing-page)); border:0; border-block-start:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default); border-radius:var(--tm-semantic-radius-dialog) var(--tm-semantic-radius-dialog) 0 0; }
  .tm-drawer__surface { max-block-size:calc(100dvh - var(--tm-semantic-spacing-page)); padding:var(--tm-semantic-spacing-stack-lg) var(--tm-semantic-spacing-inline-lg) calc(var(--tm-semantic-spacing-stack-lg) + env(safe-area-inset-bottom)); }
  .tm-drawer[data-drawer-mode="more"] [data-drawer-section="projects"] { display:none; }
  .tm-drawer[data-drawer-mode="projects"] [data-drawer-section="navigation"],.tm-drawer[data-drawer-mode="projects"] [data-drawer-section="preferences"],.tm-drawer[data-drawer-mode="projects"] [data-drawer-section="account"] { display:none; }
}

@media (max-width:22rem) {
  .tm-app-shell__main { padding-inline:var(--tm-semantic-spacing-inline-md); }
  .tm-drawer__nav { grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce) {
  .tm-app-shell__nav-item,.tm-app-shell__project-list button,.tm-app-shell__new-project { transition-duration:0ms; }
}

/* User feedback : masquer les fils d'Ariane, sans valeur ajoutée sur des pages
   qui ont déjà une nav claire dans le header + un titre en gros. */
.breadcrumbs,
.tm-breadcrumbs,
nav.breadcrumbs,
nav.tm-breadcrumbs,
nav[aria-label="Fil d'Ariane"],
nav[aria-label="Fil d’Ariane"] { display: none !important; }

/* Consentement analytics : cette feuille est chargée directement par le site
   public. Le composant reste donc fiable après la génération Astro. */
.tm-cookie-consent {
  position:fixed;
  inset:auto 0 0;
  z-index:var(--tm-semantic-layer-overlay);
  padding:0;
  background:transparent;
}

.tm-cookie-consent__panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--tm-semantic-spacing-inline-xl);
  inline-size:100%;
  padding:var(--tm-semantic-spacing-inline-lg) max(var(--tm-semantic-spacing-inline-xl),calc((100% - var(--tm-runtime-content-max)) / 2));
  border-block-start:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);
  color:var(--tm-semantic-text-primary);
  background:var(--tm-semantic-surface-panel);
  box-shadow:var(--tm-semantic-shadow-raised);
}

.tm-cookie-consent__content { max-inline-size:var(--tm-semantic-size-reading-max); }
.tm-cookie-consent__eyebrow {
  margin:0 0 var(--tm-semantic-spacing-stack-xs);
  color:var(--tm-semantic-text-tertiary);
  font:var(--tm-semantic-type-meta);
  letter-spacing:var(--tm-runtime-tracking-eyebrow);
  text-transform:uppercase;
}

.tm-cookie-consent__title { margin:0; font:var(--tm-semantic-type-title); }
.tm-cookie-consent__copy { margin:var(--tm-semantic-spacing-stack-sm) 0 0; color:var(--tm-semantic-text-secondary); font:var(--tm-semantic-type-body); }
.tm-cookie-consent__copy a { color:var(--tm-semantic-text-link); }
.tm-cookie-consent__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--tm-semantic-spacing-inline-sm); }

@media (max-width:47.999rem) {
  .tm-cookie-consent__panel { grid-template-columns:minmax(0,1fr); gap:var(--tm-semantic-spacing-stack-md); padding:var(--tm-semantic-spacing-inline-lg); }
  .tm-cookie-consent__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tm-cookie-consent__actions .tm-button { inline-size:100%; }
}