/* Generated from structure/tibius-structure.css — do not edit. */
/*
 * Structure commune de la Galaxie — source.
 *
 * Ce que partagent les interfaces de la Galaxie quelle que soit leur marque :
 * en-tête, navigation, zone compte, pied, mention de version, états, icônes,
 * boutons, champs, dialogue de confirmation, barre d'administration.
 *
 * Trois règles tiennent ce fichier, et la gate test:structure les vérifie :
 *   1. toute classe commence par « tds- » : elle ne peut pas heurter une classe
 *      d'un produit ;
 *   2. aucune couleur n'est écrite ici : tout vient des jetons --tds-*, donc du
 *      thème de la marque servie. La structure est commune, l'identité ne l'est
 *      pas ;
 *   3. aucun nom de marque n'apparaît dans un sélecteur ni dans un contenu.
 *
 * La police n'est pas écrite non plus : chaque bloc hérite celle de la page.
 * La typographie est de l'identité, pas de la structure.
 *
 * Les bascules sont celles des jetons breakpoint.tablet (640px) et
 * breakpoint.desktop (1024px) : une propriété personnalisée ne peut pas servir
 * dans une requête média, la gate compare donc les valeurs.
 *
 * Chaque bloc est déclaré dans structure/structure.json avec l'entrée de
 * grammaire qu'il implémente ; le balisage de référence vit dans
 * structure/examples/.
 */

/* ── Utilitaires ─────────────────────────────────────────────────────────── */

/* Un bloc commun masqué par l'attribut hidden le reste, même s'il pose son
   propre display : sans cela, un produit sans remise à zéro l'afficherait. */
[class^="tds-"][hidden],
[class*=" tds-"][hidden] {
  display: none;
}

.tds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tds-skip-link {
  position: absolute;
  top: var(--tds-space-2);
  left: var(--tds-space-2);
  z-index: 100;
  padding: var(--tds-space-3) var(--tds-space-4);
  border-radius: var(--tds-radius-role-control);
  background: var(--tds-surface-raised);
  color: var(--tds-text-primary);
  font-family: inherit;
  font-weight: var(--tds-font-weight-semibold);
  font-size: var(--tds-font-size-body-small);
  line-height: 1;
  transform: translateY(-200%);
}

/* L'ombre ne vient qu'avec le lien : hors écran, elle déborderait dans le coin. */
.tds-skip-link:focus {
  box-shadow: var(--tds-elevation-medium);
  transform: none;
}

/* Les contrôles communs ne reprennent pas les effets qu'un produit pose sur
   ses éléments nus (« button { … } », « a:hover { … } ») : ombre, déplacement,
   casse, interlettrage. */
.tds-button,
.tds-icon-button,
.tds-nav__link,
.tds-nav__toggle,
.tds-account__signin,
.tds-account__trigger,
.tds-account__item,
.tds-footer a,
.tds-footer button {
  box-shadow: none;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  transform: none;
}

.tds-button:not([aria-pressed="true"]):not([aria-current]):hover,
.tds-button:not([aria-pressed="true"]):not([aria-current]):active,
.tds-icon-button:hover,
.tds-icon-button:active,
.tds-nav__toggle:hover,
.tds-account__signin:hover,
.tds-account__trigger:hover,
.tds-account__item:hover,
.tds-account__item:active,
.tds-footer button:hover {
  box-shadow: none;
  transform: none;
}

.tds-account__item:hover,
.tds-nav__toggle:hover {
  color: inherit;
}

/* ── Icônes ──────────────────────────────────────────────────────────────── */

.tds-icon {
  display: inline-block;
  flex: none;
  width: var(--tds-icon-size-md);
  height: var(--tds-icon-size-md);
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--tds-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tds-icon--sm { width: var(--tds-icon-size-sm); height: var(--tds-icon-size-sm); }
.tds-icon--lg { width: var(--tds-icon-size-lg); height: var(--tds-icon-size-lg); }
.tds-icon--xl { width: var(--tds-icon-size-xl); height: var(--tds-icon-size-xl); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.tds-button,
.tds-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tds-space-2);
  min-height: var(--tds-control-height-md);
  padding: 0 var(--tds-space-4);
  border: var(--tds-border-width-default) solid var(--tds-border-default);
  border-radius: var(--tds-radius-role-control);
  background: var(--tds-action-secondary);
  color: var(--tds-text-primary);
  font-family: inherit;
  font-weight: var(--tds-font-weight-semibold);
  font-size: var(--tds-font-size-body-small);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tds-motion-role-feedback-duration) var(--tds-motion-role-feedback-easing);
}

.tds-button:hover,
.tds-icon-button:hover {
  background: var(--tds-action-secondary-hover);
}

.tds-button--primary {
  border-color: transparent;
  background: var(--tds-brand-action);
  color: var(--tds-brand-on-action);
}

.tds-button--primary:hover { background: var(--tds-brand-action-hover); }
.tds-button--primary:active { background: var(--tds-brand-action-active); }

.tds-button--ghost,
.tds-icon-button {
  border-color: transparent;
  background: transparent;
}

.tds-button--ghost:hover,
.tds-icon-button:hover {
  background: var(--tds-action-ghost-hover);
}

/* Destructif : bordé, jamais en aplat (règle destructive-outline). */
.tds-button--danger,
.tds-icon-button--danger {
  border-color: var(--tds-status-danger);
  background: transparent;
  color: var(--tds-status-danger);
}

.tds-button--danger:hover,
.tds-icon-button--danger:hover {
  background: var(--tds-status-danger-subtle);
}

.tds-button--sm {
  min-height: var(--tds-control-height-sm);
  padding: 0 var(--tds-space-3);
}

.tds-icon-button {
  min-width: var(--tds-control-height-md);
  padding: 0;
}

/* Compact à la souris, pleine cible au doigt. */
@media (pointer: coarse) {
  .tds-button--sm {
    min-height: var(--tds-touch-target-web);
  }
}

/* Un bouton qui porte un choix en cours (période, vue, filtre) : la graisse et
   l'arête le disent, pas la couleur seule. */
.tds-button[aria-pressed="true"],
.tds-button[aria-current="true"],
.tds-button[aria-current="page"] {
  border-color: var(--tds-text-primary);
  background: var(--tds-surface-sunken);
  font-weight: var(--tds-font-weight-bold);
  box-shadow: inset 0 calc(-1 * var(--tds-border-width-strong)) 0 var(--tds-text-primary);
}

.tds-button:disabled,
.tds-button[aria-disabled="true"],
.tds-icon-button:disabled {
  border-color: transparent;
  background: var(--tds-action-disabled);
  color: var(--tds-action-on-disabled);
  cursor: not-allowed;
}

/* Envoi en cours (règle submit-busy) : posé par le script ou par le produit. */
.tds-button[aria-busy="true"] {
  cursor: progress;
  opacity: var(--tds-state-disabled-opacity);
}

.tds-button:focus-visible,
.tds-icon-button:focus-visible,
.tds-nav__link:focus-visible,
.tds-nav__toggle:focus-visible,
.tds-header__brand:focus-visible,
.tds-account__trigger:focus-visible,
.tds-account__item:focus-visible,
.tds-account__signin:focus-visible,
.tds-footer a:focus-visible,
.tds-footer button:focus-visible,
.tds-admin-bar a:focus-visible,
.tds-breadcrumb__item a:focus-visible,
a.tds-stat:focus-visible,
.tds-notice a:focus-visible,
.tds-page-header__back:focus-visible,
.tds-disclosure__summary:focus-visible,
.tds-state a:focus-visible,
.tds-skip-link:focus-visible {
  outline: var(--tds-focus-width) solid var(--tds-border-focus);
  outline-offset: var(--tds-focus-offset);
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */

/* Les propriétés de boîte sont écrites en entier : une règle d'élément du
   produit (« header { … } », « footer { … } », « nav { … } ») ne doit pas
   déformer un bloc commun. */
.tds-header {
  display: block;
  position: relative;
  z-index: 20;
  max-width: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--tds-border-width-default) solid var(--tds-border-default);
  background: var(--tds-surface-default);
  color: var(--tds-text-primary);
  font-family: inherit;
}

.tds-header__inner {
  display: flex;
  align-items: center;
  gap: var(--tds-space-4);
  min-height: 3.5rem;
  max-width: var(--tds-content-width-standard);
  margin: 0 auto;
  padding: 0 var(--tds-layout-page-gutter-mobile);
}

/* L'en-tête et le pied prennent la largeur que la page déclare pour son
   contenu : standard par défaut, wide quand le contenu l'est. Leurs bords
   s'alignent alors à toutes les largeurs. */
.tds-header--wide .tds-header__inner,
.tds-footer--wide .tds-footer__inner {
  max-width: var(--tds-content-width-wide);
}

.tds-header--sticky {
  position: sticky;
  top: 0;
}

/* Identité de l'application servie : logo et nom viennent du produit. */
.tds-header__brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--tds-space-2);
  min-height: var(--tds-touch-target-web);
  color: inherit;
  font-weight: var(--tds-font-weight-semibold);
  font-size: var(--tds-font-size-body);
  text-decoration: none;
}

.tds-header__brand img,
.tds-header__brand svg {
  display: block;
  width: auto;
  height: var(--tds-lockup-height-sm);
  max-width: 100%;
}

.tds-header__tools {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--tds-space-3);
  min-width: 0;
}

/* La zone compte est toujours la dernière de l'en-tête. */
.tds-header__end {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--tds-space-3);
  margin-left: auto;
}

/* Application plein écran : l'en-tête flotte sur l'espace de travail. */
.tds-header--overlay {
  position: absolute;
  inset: 0 0 auto 0;
  border-bottom: 0;
  background: transparent;
  pointer-events: none;
}

.tds-header--overlay .tds-header__inner > * {
  pointer-events: auto;
}

/* ── Navigation principale ───────────────────────────────────────────────── */

.tds-nav {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
}

.tds-nav__list {
  display: flex;
  align-items: stretch;
  gap: var(--tds-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tds-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--tds-space-2);
  min-height: var(--tds-touch-target-web);
  padding: 0 var(--tds-space-3);
  border-radius: var(--tds-radius-role-control);
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-body-small);
  font-weight: var(--tds-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.tds-nav__link:hover {
  background: var(--tds-action-ghost-hover);
  color: var(--tds-text-primary);
}

/* L'entrée courante est marquée par la graisse ET par une arête (edge-accent) :
   jamais par la couleur seule. */
.tds-nav__link[aria-current] {
  color: var(--tds-text-primary);
  font-weight: var(--tds-font-weight-semibold);
  box-shadow: inset 0 calc(-1 * var(--tds-border-width-accent)) 0 var(--tds-brand-primary);
  border-radius: var(--tds-radius-role-control) var(--tds-radius-role-control) 0 0;
}

.tds-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--tds-space-2);
  min-width: var(--tds-touch-target-web);
  min-height: var(--tds-touch-target-web);
  padding: 0 var(--tds-space-2);
  border: 0;
  border-radius: var(--tds-radius-role-control);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-weight: var(--tds-font-weight-semibold);
  font-size: var(--tds-font-size-body-small);
  line-height: 1;
  cursor: pointer;
}

.tds-nav__toggle:hover {
  background: var(--tds-action-ghost-hover);
}

/*
 * Sous la bascule, la navigation se replie derrière son déclencheur — mais
 * seulement si le script est là pour l'ouvrir (classe tds-js posée sur la
 * racine). Sans script, elle reste dépliée et défile : une panne de script
 * laisse la navigation utilisable.
 */
@media (max-width: 1023.98px) {
  /* Sans repli (pas de script, ou navigation non repliable), la navigation
     prend sa propre rangée et défile : elle n'est jamais écrasée entre
     l'identité et la zone compte. */
  .tds-header__inner:has(.tds-nav) {
    flex-wrap: wrap;
  }

  .tds-nav {
    order: 3;
    flex: 1 1 100%;
  }

  .tds-js .tds-nav--collapsible {
    order: 0;
    flex: 0 0 auto;
  }

  /* Une navigation de quelques entrées reste sur la ligne de l'en-tête tant
     que la largeur le permet (au-delà de la bascule tablette). */
  .tds-nav--inline {
    order: 0;
    flex: 1 1 auto;
  }

  .tds-nav__list {
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* Un site sans script et à peu d'entrées les laisse passer à la ligne plutôt
     que de les cacher derrière un défilement sans indice. */
  .tds-nav--wrap .tds-nav__list {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .tds-js .tds-nav--collapsible .tds-nav__toggle {
    display: inline-flex;
  }

  .tds-js .tds-nav--collapsible .tds-nav__list {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
    padding: var(--tds-space-2) var(--tds-layout-page-gutter-mobile) var(--tds-space-4);
    border-bottom: var(--tds-border-width-default) solid var(--tds-border-default);
    background: var(--tds-surface-default);
    box-shadow: var(--tds-elevation-medium);
  }

  .tds-js .tds-nav--collapsible[data-tds-open] .tds-nav__list {
    display: flex;
  }

  .tds-js .tds-nav--collapsible .tds-nav__link {
    width: 100%;
  }

  .tds-js .tds-nav--collapsible .tds-nav__link[aria-current] {
    box-shadow: inset var(--tds-border-width-accent) 0 0 var(--tds-brand-primary);
    border-radius: 0 var(--tds-radius-role-control) var(--tds-radius-role-control) 0;
  }
}

/* ── Sous-navigation de l'objet courant ──────────────────────────────────── */

/* Les vues d'un même objet (onglets), ou la navigation propre d'un espace
   d'administration : sous l'en-tête ou sous l'en-tête de page, jamais une
   seconde barre globale. Défile dans son cadre sur écran étroit. */
.tds-subnav {
  display: block;
  margin: 0 0 var(--tds-space-5);
  border-bottom: var(--tds-border-width-default) solid var(--tds-border-default);
  font-family: inherit;
}

.tds-subnav__list {
  display: flex;
  gap: var(--tds-space-1);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.tds-subnav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--tds-space-2);
  min-height: var(--tds-touch-target-web);
  padding: 0 var(--tds-space-3);
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-body-small);
  font-weight: var(--tds-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.tds-subnav__link:hover {
  color: var(--tds-text-primary);
}

.tds-subnav__link[aria-current] {
  color: var(--tds-text-primary);
  font-weight: var(--tds-font-weight-semibold);
  box-shadow: inset 0 calc(-1 * var(--tds-border-width-accent)) 0 var(--tds-brand-primary);
}

.tds-subnav__link:focus-visible {
  outline: var(--tds-focus-width) solid var(--tds-border-focus);
  outline-offset: calc(-1 * var(--tds-focus-width));
}

/* ── Environnement ───────────────────────────────────────────────────────── */

/* Seuls Test et Local se signalent ; la Production ne porte pas de marque. */
.tds-env {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--tds-space-2);
  border: var(--tds-border-width-default) solid var(--tds-border-strong);
  border-radius: var(--tds-radius-role-pill);
  background: var(--tds-surface-sunken);
  color: var(--tds-text-secondary);
  font-family: inherit;
  font-weight: var(--tds-font-weight-semibold);
  font-size: var(--tds-font-size-caption);
  line-height: 1;
  letter-spacing: var(--tds-letter-spacing-label);
  white-space: nowrap;
}

/* Local : pointillé, pour ne pas se lire comme un environnement servi. */
.tds-env--local {
  border-style: dashed;
}

.tds-env--test {
  border-color: var(--tds-status-info);
  background: var(--tds-status-info-subtle);
  color: var(--tds-status-info);
}

/* Un outil qui agit sur plusieurs environnements à la fois (déploiement,
   comparaison de versions) nomme la Production sur l'action elle-même : plein,
   là où Test est bordé. La différence se lit aussi sans la couleur. */
.tds-env--production {
  border-color: var(--tds-text-primary);
  background: var(--tds-text-primary);
  color: var(--tds-surface-default);
}

/* Panneau d'environnement : dans un outil qui montre ou agit sur plusieurs
   environnements, chacun a son panneau, nommé par sa marque. Test avant
   Production, toujours ; la Production porte une arête épaisse et pleine, Test
   une arête fine — la différence se lit sans la couleur. */
.tds-env-panel {
  padding: var(--tds-space-5);
  border: var(--tds-border-width-default) solid var(--tds-border-default);
  border-radius: var(--tds-radius-role-surface);
  background: var(--tds-surface-default);
  color: var(--tds-text-primary);
}

.tds-env-panel--test {
  border-top: var(--tds-border-width-accent) solid var(--tds-status-info);
}

.tds-env-panel--production {
  border: var(--tds-border-width-strong) solid var(--tds-text-primary);
  border-top-width: calc(2 * var(--tds-border-width-accent));
}

.tds-env-panel + .tds-env-panel {
  margin-top: var(--tds-space-5);
}

/* ── Contenu et en-tête de page ──────────────────────────────────────────── */

/* La page déclare sa largeur (règle content-width-declared). */
.tds-content {
  width: 100%;
  max-width: var(--tds-content-width-standard);
  margin: 0 auto;
  padding: var(--tds-space-6) var(--tds-layout-page-gutter-mobile) var(--tds-space-10);
}

.tds-content--reading { max-width: var(--tds-content-width-reading); }
.tds-content--wide { max-width: var(--tds-content-width-wide); }

/* Fil d'Ariane : pour une fiche à plus d'un cran de profondeur. Un seul cran se
   dit par le retour de l'en-tête de page. Le dernier maillon est la page
   courante (aria-current), sans lien. */
.tds-breadcrumb {
  margin: 0 0 var(--tds-space-2);
  color: var(--tds-text-secondary);
  font-family: inherit;
  font-size: var(--tds-font-size-body-small);
}

.tds-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tds-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--tds-control-height-sm);
}

.tds-breadcrumb__item + .tds-breadcrumb__item::before {
  content: "›";
  margin: 0 var(--tds-space-2);
  color: var(--tds-text-muted);
}

.tds-breadcrumb__item a {
  color: inherit;
}

.tds-breadcrumb__item a:hover {
  color: var(--tds-text-primary);
}

.tds-breadcrumb__item [aria-current] {
  color: var(--tds-text-primary);
  font-weight: var(--tds-font-weight-medium);
}

/* Un écran nomme ce qu'il montre, à la même place partout ; ses actions vivent
   ici. Le retour vers le parent précède le titre. */
.tds-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tds-space-3) var(--tds-space-6);
  margin: 0 0 var(--tds-space-6);
  color: var(--tds-text-primary);
  font-family: inherit;
}

.tds-page-header__main {
  flex: 1 1 18rem;
  min-width: 0;
}

.tds-page-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--tds-space-1);
  min-height: var(--tds-touch-target-web);
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-body-small);
  font-weight: var(--tds-font-weight-medium);
  text-decoration: none;
}

.tds-page-header__back:hover {
  color: var(--tds-text-primary);
  text-decoration: underline;
}

.tds-page-header__title {
  margin: 0;
  font-size: var(--tds-font-size-heading3);
  font-weight: var(--tds-font-weight-semibold);
  line-height: var(--tds-line-height-heading);
  letter-spacing: var(--tds-letter-spacing-tight);
  overflow-wrap: anywhere;
}

/* Une phrase au plus. */
.tds-page-header__lead {
  max-width: var(--tds-content-width-reading);
  margin: var(--tds-space-1) 0 0;
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-body);
  line-height: var(--tds-line-height-body);
}

.tds-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tds-space-3);
}

/* ── Badge d'état ────────────────────────────────────────────────────────── */

/* Un même concept porte toujours le même ton, et le ton n'est jamais seul : le
   badge porte un mot. Il n'est pas cliquable. */
.tds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tds-space-1);
  min-height: 1.5rem;
  padding: 0 var(--tds-space-2);
  border: var(--tds-border-width-default) solid var(--tds-border-strong);
  border-radius: var(--tds-radius-role-pill);
  background: var(--tds-surface-sunken);
  color: var(--tds-text-secondary);
  font-family: inherit;
  font-weight: var(--tds-font-weight-semibold);
  font-size: var(--tds-font-size-caption);
  line-height: 1;
  white-space: nowrap;
}

.tds-badge--success { border-color: var(--tds-status-success); background: var(--tds-status-success-subtle); color: var(--tds-status-success); }
.tds-badge--warning { border-color: var(--tds-status-warning); background: var(--tds-status-warning-subtle); color: var(--tds-status-warning); }
.tds-badge--danger { border-color: var(--tds-status-danger); background: var(--tds-status-danger-subtle); color: var(--tds-status-danger); }
.tds-badge--accent { border-color: var(--tds-brand-link); background: var(--tds-brand-subtle); color: var(--tds-brand-link); }
.tds-badge--info { border-color: var(--tds-status-info); background: var(--tds-status-info-subtle); color: var(--tds-status-info); }

/* ── Détails à la demande ────────────────────────────────────────────────── */

/* « Détails », « Comment ça marche », « D'où vient cette information » : ce qui
   ne sert pas la décision reste replié. Élément details natif. */
.tds-disclosure {
  margin-top: var(--tds-space-4);
  border-top: var(--tds-border-width-default) solid var(--tds-border-default);
  color: var(--tds-text-primary);
  font-family: inherit;
}

.tds-disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--tds-space-2);
  min-height: var(--tds-touch-target-web);
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-body-small);
  font-weight: var(--tds-font-weight-semibold);
  list-style: none;
  cursor: pointer;
}

.tds-disclosure__summary::-webkit-details-marker {
  display: none;
}

.tds-disclosure__summary::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: var(--tds-border-width-strong) solid currentColor;
  border-bottom: var(--tds-border-width-strong) solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--tds-motion-role-state-change-duration) var(--tds-motion-role-state-change-easing);
}

.tds-disclosure[open] > .tds-disclosure__summary::before {
  transform: rotate(45deg);
}

/* Pliage d'un contenu principal (un groupe de lignes, une section) : le résumé
   pèse comme un titre. */
.tds-disclosure--group > .tds-disclosure__summary {
  color: var(--tds-text-primary);
  font-size: var(--tds-font-size-body);
}

.tds-disclosure__summary:hover {
  color: var(--tds-text-primary);
}

/* Le contenu replié garde sa propre typographie : une table ou une fiche s'y
   lit comme ailleurs. */
.tds-disclosure__body {
  padding: 0 0 var(--tds-space-4);
}

/* ── Zone compte ─────────────────────────────────────────────────────────── */

.tds-account {
  position: relative;
  font-family: inherit;
}

.tds-account__signin {
  display: inline-flex;
  align-items: center;
  min-height: var(--tds-touch-target-web);
  padding: 0 var(--tds-space-4);
  border: var(--tds-border-width-default) solid var(--tds-border-default);
  border-radius: var(--tds-radius-role-control);
  background: var(--tds-action-secondary);
  color: var(--tds-text-primary);
  font-size: var(--tds-font-size-body-small);
  font-weight: var(--tds-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.tds-account__signin:hover {
  background: var(--tds-action-secondary-hover);
}

.tds-account__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--tds-space-2);
  min-height: var(--tds-touch-target-web);
  padding: 0 var(--tds-space-2);
  border-radius: var(--tds-radius-role-pill);
  color: inherit;
  font-size: var(--tds-font-size-body-small);
  font-weight: var(--tds-font-weight-medium);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.tds-account__trigger::-webkit-details-marker {
  display: none;
}

.tds-account__trigger:hover,
.tds-account[open] > .tds-account__trigger {
  background: var(--tds-action-ghost-hover);
}

/* Initiales du nom affiché : aucune image inventée, aucune couleur de marque. */
.tds-account__avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--tds-border-width-default) solid var(--tds-border-strong);
  border-radius: var(--tds-radius-full);
  background: var(--tds-surface-sunken);
  color: var(--tds-text-primary);
  font-size: var(--tds-font-size-caption);
  font-weight: var(--tds-font-weight-semibold);
  text-transform: uppercase;
}

.tds-account__name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tds-account__menu {
  position: absolute;
  top: calc(100% + var(--tds-space-2));
  right: 0;
  z-index: 40;
  min-width: 15rem;
  max-width: min(20rem, calc(100vw - 2 * var(--tds-layout-page-gutter-mobile)));
  padding: var(--tds-space-2);
  border: var(--tds-border-width-default) solid var(--tds-border-default);
  border-radius: var(--tds-radius-role-surface);
  background: var(--tds-surface-raised);
  color: var(--tds-text-primary);
  box-shadow: var(--tds-elevation-medium);
}

/* Compte actif, rappelé en tête du menu ouvert. */
.tds-account__identity {
  margin: 0 0 var(--tds-space-2);
  padding: var(--tds-space-2) var(--tds-space-3) var(--tds-space-3);
  border-bottom: var(--tds-border-width-default) solid var(--tds-border-default);
  font-size: var(--tds-font-size-body-small);
  overflow-wrap: anywhere;
}

.tds-account__identity strong {
  display: block;
  font-weight: var(--tds-font-weight-semibold);
}

.tds-account__identity span {
  color: var(--tds-text-secondary);
}

.tds-account__group {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tds-account__group + .tds-account__group {
  margin-top: var(--tds-space-2);
  padding-top: var(--tds-space-2);
  border-top: var(--tds-border-width-default) solid var(--tds-border-default);
}

.tds-account__group form {
  margin: 0;
}

.tds-account__item {
  display: flex;
  align-items: center;
  gap: var(--tds-space-3);
  width: 100%;
  min-height: var(--tds-touch-target-web);
  justify-content: flex-start;
  padding: 0 var(--tds-space-3);
  border: 0;
  border-radius: var(--tds-radius-role-control);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-weight: var(--tds-font-weight-medium);
  font-size: var(--tds-font-size-body-small);
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.tds-account__item:hover {
  background: var(--tds-action-ghost-hover);
}

.tds-account__item .tds-icon {
  color: var(--tds-text-secondary);
}

@media (max-width: 639.98px) {
  .tds-nav--inline {
    order: 3;
    flex: 1 1 100%;
  }

  /* Sur téléphone le déclencheur de navigation se réduit à son icône ; son
     libellé reste son nom accessible. */
  .tds-nav__toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* Quand l'identité porte un symbole et que l'en-tête loge une navigation, le
     nom écrit à côté se retire sur téléphone : il reste lu, et l'en-tête tient
     sur une ligne. Sans navigation (écran de connexion, page isolée), le nom
     reste affiché. */
  .tds-header__inner:has(.tds-nav) .tds-header__brand img + span,
  .tds-header__inner:has(.tds-nav) .tds-header__brand svg + span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* La barre d'administration tient sur une ligne : le compte y est déjà
     nommé par la zone compte. */
  .tds-admin-bar__account {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* Sur téléphone le nom se lit dans le menu ouvert ; l'avatar reste. */
  .tds-account__trigger .tds-account__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ── Barre d'administration ──────────────────────────────────────────────── */

/* Dit « vous êtes en Administration », nomme le compte actif, ramène à
   l'application. Jamais rendue pour un compte qui n'y a pas droit. */
.tds-admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tds-space-2) var(--tds-space-4);
  min-height: 2.5rem;
  padding: var(--tds-space-2) var(--tds-layout-page-gutter-mobile);
  border-bottom: var(--tds-border-width-default) solid var(--tds-border-strong);
  background: var(--tds-surface-sunken);
  color: var(--tds-text-primary);
  font-family: inherit;
  font-weight: var(--tds-font-weight-medium);
  font-size: var(--tds-font-size-body-small);
  line-height: 1.3;
}

.tds-admin-bar__label {
  display: inline-flex;
  align-items: center;
  gap: var(--tds-space-2);
  font-weight: var(--tds-font-weight-semibold);
}

.tds-admin-bar__account {
  color: var(--tds-text-secondary);
}

.tds-admin-bar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--tds-space-1);
  min-height: var(--tds-touch-target-web);
  margin-left: auto;
  color: inherit;
}

/* ── Pied ────────────────────────────────────────────────────────────────── */

.tds-footer {
  display: block;
  max-width: none;
  margin: auto 0 0;
  padding: 0;
  border-top: var(--tds-border-width-default) solid var(--tds-border-default);
  color: var(--tds-text-secondary);
  font-family: inherit;
  font-weight: var(--tds-font-weight-regular);
  font-size: var(--tds-font-size-body-small);
  line-height: var(--tds-line-height-body);
}

.tds-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--tds-space-5);
  max-width: var(--tds-content-width-standard);
  margin: 0 auto;
  padding: var(--tds-space-2) var(--tds-layout-page-gutter-mobile);
}

.tds-footer__identity {
  color: var(--tds-text-primary);
  font-weight: var(--tds-font-weight-semibold);
}

.tds-footer__identity small {
  display: block;
  color: var(--tds-text-secondary);
  font-size: inherit;
  font-weight: var(--tds-font-weight-regular);
}

.tds-footer__links,
.tds-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--tds-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tds-footer a,
.tds-footer button {
  display: inline-flex;
  align-items: center;
  gap: var(--tds-space-1);
  min-height: var(--tds-touch-target-web);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tds-border-strong);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Un lien dans la ligne d'attribution est un lien de texte, pas une entrée du
   pied : il garde la hauteur de sa ligne. */
.tds-footer__identity small a {
  display: inline;
  min-height: 0;
}

.tds-footer a:hover,
.tds-footer button:hover {
  color: var(--tds-text-primary);
  text-decoration-color: currentColor;
}

/* L'emplacement du signalement reste dans le balisage et ne prend aucune place
   tant que le SDK n'y a rien posé. */
.tds-footer [data-tibius-report]:empty {
  display: none;
}

.tds-footer__version {
  display: inline-flex;
  align-items: center;
  min-height: var(--tds-touch-target-web);
  color: var(--tds-text-muted);
}

.tds-footer__identity {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--tds-touch-target-web);
}

@media (min-width: 640px) {
  .tds-footer__inner {
    padding-inline: var(--tds-layout-page-gutter-tablet);
  }

  .tds-footer__version {
    margin-left: auto;
  }

  .tds-header__inner {
    padding-inline: var(--tds-layout-page-gutter-tablet);
  }

  .tds-admin-bar {
    padding-inline: var(--tds-layout-page-gutter-tablet);
  }

  .tds-content {
    padding-inline: var(--tds-layout-page-gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .tds-footer__inner,
  .tds-header__inner {
    padding-inline: var(--tds-layout-page-gutter-desktop);
  }

  .tds-admin-bar {
    padding-inline: var(--tds-layout-page-gutter-desktop);
  }

  .tds-content {
    padding-inline: var(--tds-layout-page-gutter-desktop);
  }
}

/* Écran de connexion, façade : identification et assistance, centrées. */
.tds-footer--minimal {
  border-top: 0;
  text-align: center;
}

.tds-footer--minimal .tds-footer__inner {
  align-items: center;
  justify-content: center;
}

.tds-footer--minimal .tds-footer__links,
.tds-footer--minimal .tds-footer__legal {
  justify-content: center;
}

.tds-footer--minimal .tds-footer__version {
  margin-left: 0;
}

/* ── Mention de version ──────────────────────────────────────────────────── */

/* Toujours dans cet ordre : version, commit court, environnement. */
.tds-version {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--tds-space-2);
  font-size: var(--tds-font-size-body-small);
  font-variant-numeric: tabular-nums;
}

.tds-version__number {
  font-weight: var(--tds-font-weight-medium);
}

.tds-version__commit {
  font-family: var(--tds-font-family-mono);
  font-size: 0.92em;
}

.tds-version__commit::before,
.tds-version__env::before,
.tds-version__build::before {
  content: "·";
  margin-right: var(--tds-space-2);
}

@media (max-width: 639.98px) {
  /* Sur téléphone, commit et build se replient ; version et environnement restent. */
  .tds-version__commit,
  .tds-version__build {
    display: none;
  }
}

/* ── Cartes et notices ───────────────────────────────────────────────────── */

.tds-card {
  padding: var(--tds-space-5);
  border: var(--tds-border-width-default) solid var(--tds-border-default);
  border-radius: var(--tds-radius-role-surface);
  background: var(--tds-surface-default);
  color: var(--tds-text-primary);
}

.tds-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--tds-space-3);
  padding: var(--tds-space-3) var(--tds-space-4);
  border: var(--tds-border-width-default) solid var(--tds-border-default);
  border-left-width: var(--tds-border-width-accent);
  border-radius: var(--tds-radius-role-control);
  background: var(--tds-surface-default);
  color: var(--tds-text-primary);
  font-family: inherit;
  font-weight: var(--tds-font-weight-regular);
  font-size: var(--tds-font-size-body-small);
  line-height: var(--tds-line-height-body);
}

.tds-notice > .tds-icon {
  margin-top: 0.1em;
}

/* Un lien dans une notice prend l'encre du texte et se reconnaît à son
   soulignement : l'encre de lien de la marque ne tient pas sur tous les fonds. */
.tds-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.tds-card + .tds-card,
.tds-notice + .tds-card,
.tds-card + .tds-notice {
  margin-top: var(--tds-space-4);
}

.tds-notice + .tds-notice {
  margin-top: var(--tds-space-3);
}

.tds-notice--info { border-color: var(--tds-status-info); background: var(--tds-status-info-subtle); }
.tds-notice--success { border-color: var(--tds-status-success); background: var(--tds-status-success-subtle); }
.tds-notice--warning { border-color: var(--tds-status-warning); background: var(--tds-status-warning-subtle); }
.tds-notice--danger { border-color: var(--tds-status-danger); background: var(--tds-status-danger-subtle); }

.tds-notice--info > .tds-icon { color: var(--tds-status-info); }
.tds-notice--success > .tds-icon { color: var(--tds-status-success); }
.tds-notice--warning > .tds-icon { color: var(--tds-status-warning); }
.tds-notice--danger > .tds-icon { color: var(--tds-status-danger); }

/* ── Résumé chiffré et filtres ───────────────────────────────────────────── */

/* L'état d'un outil en quelques chiffres, avant toute table : ce qui
   fonctionne, ce qui attend, ce qui échoue, ce qui exige une intervention.
   Chaque chiffre porte son mot ; le ton ne vient qu'en plus, par une arête. */
.tds-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--tds-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tds-stat {
  display: grid;
  gap: var(--tds-space-1);
  padding: var(--tds-space-4);
  border: var(--tds-border-width-default) solid var(--tds-border-default);
  border-left: var(--tds-border-width-accent) solid var(--tds-border-strong);
  border-radius: var(--tds-radius-role-surface);
  background: var(--tds-surface-default);
  color: var(--tds-text-primary);
  font-family: inherit;
  text-decoration: none;
}

.tds-stat__value {
  font-size: var(--tds-font-size-heading3);
  font-weight: var(--tds-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--tds-line-height-tight);
}

.tds-stat__label {
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-body-small);
  font-weight: var(--tds-font-weight-medium);
}

.tds-stat__note {
  color: var(--tds-text-muted);
  font-size: var(--tds-font-size-caption);
  line-height: 1.4;
}

.tds-stat--success { border-left-color: var(--tds-status-success); }
.tds-stat--warning { border-left-color: var(--tds-status-warning); }
.tds-stat--danger { border-left-color: var(--tds-status-danger); }
.tds-stat--info { border-left-color: var(--tds-status-info); }

/* Trois filtres visibles au plus ; les autres derrière « Plus de filtres »
   (tds-disclosure). Les actions ferment la rangée. */
.tds-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tds-space-3) var(--tds-space-4);
  margin: 0 0 var(--tds-space-4);
  font-family: inherit;
}

.tds-filters > .tds-field {
  flex: 1 1 12rem;
  min-width: 0;
}

.tds-filters > .tds-disclosure {
  flex: 1 1 100%;
  margin-top: 0;
}

.tds-filters__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tds-space-3);
}

/* ── Table et fiche ──────────────────────────────────────────────────────── */

/* Une table réellement tabulaire défile DANS son cadre : le document ne défile
   jamais horizontalement, et aucune colonne n'est masquée pour tenir. */
.tds-table-frame {
  /* Conteneur positionné : un libellé masqué (tds-visually-hidden) d'une cellule
     hors écran reste dans le cadre au lieu d'élargir le document. */
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  border: var(--tds-border-width-default) solid var(--tds-border-default);
  border-radius: var(--tds-radius-role-surface);
  background: var(--tds-surface-default);
}

.tds-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--tds-text-primary);
  font-family: inherit;
  font-size: var(--tds-font-size-body-small);
  line-height: 1.4;
  text-align: left;
}

.tds-table th,
.tds-table td {
  color: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  padding: var(--tds-space-3) var(--tds-space-4);
  border-bottom: var(--tds-border-width-default) solid var(--tds-border-default);
  vertical-align: top;
}

.tds-table thead th {
  background: var(--tds-surface-sunken);
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-label);
  font-weight: var(--tds-font-weight-semibold);
  white-space: nowrap;
}

.tds-table tbody th {
  font-weight: var(--tds-font-weight-semibold);
}

.tds-table tbody tr:last-child > * {
  border-bottom: 0;
}

.tds-table__num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.tds-table__actions {
  text-align: right;
  white-space: nowrap;
}

/* Une date, un identifiant, une durée : une cellule qui ne se coupe pas. */
.tds-table__nowrap {
  white-space: nowrap;
}

/* Dans une carte déjà bordée, le cadre ne double pas la bordure. */
.tds-table-frame--plain {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tds-table--dense th,
.tds-table--dense td {
  padding: var(--tds-space-2) var(--tds-space-3);
}

/* Fiche : des paires libellé / valeur, en liste de définitions. */
.tds-kv {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--tds-space-2) var(--tds-space-4);
  margin: 0;
  color: var(--tds-text-primary);
  font-family: inherit;
  font-size: var(--tds-font-size-body-small);
  line-height: 1.4;
}

.tds-kv__key {
  color: var(--tds-text-secondary);
}

.tds-kv__value {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 639.98px) {
  .tds-kv {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tds-kv__value {
    margin-bottom: var(--tds-space-3);
  }
}

/* ── États ───────────────────────────────────────────────────────────────── */

/* Vide, chargement, erreur, succès, indisponible, accès refusé : même anatomie
   — icône, titre, une phrase, une action. La tonalité ne porte jamais seule le
   sens : l'icône et le titre le disent aussi. */
.tds-state {
  display: grid;
  justify-items: center;
  gap: var(--tds-space-3);
  max-width: var(--tds-content-width-reading);
  margin: 0 auto;
  padding: var(--tds-space-10) var(--tds-space-4);
  color: var(--tds-text-primary);
  font-family: inherit;
  text-align: center;
}

.tds-state__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--tds-radius-full);
  background: var(--tds-surface-sunken);
  color: var(--tds-text-secondary);
}

.tds-state__title {
  margin: 0;
  font-size: var(--tds-font-size-body-large);
  font-weight: var(--tds-font-weight-semibold);
  line-height: var(--tds-line-height-heading);
}

.tds-state__text {
  margin: 0;
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-body-small);
  line-height: var(--tds-line-height-body);
}

.tds-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tds-space-3);
  margin-top: var(--tds-space-2);
}

/* Référence technique d'une erreur : lisible pour être recopiée, discrète. */
.tds-state__reference {
  color: var(--tds-text-muted);
  font: var(--tds-font-size-caption) / 1.4 var(--tds-font-family-mono);
}

.tds-state--empty .tds-state__icon { background: var(--tds-surface-sunken); color: var(--tds-text-muted); }
.tds-state--not-found .tds-state__icon { background: var(--tds-surface-sunken); color: var(--tds-text-muted); }
.tds-state--loading { padding-block: var(--tds-space-8); }
.tds-state--error .tds-state__icon { background: var(--tds-status-danger-subtle); color: var(--tds-status-danger); }
.tds-state--success .tds-state__icon { background: var(--tds-status-success-subtle); color: var(--tds-status-success); }
.tds-state--unavailable .tds-state__icon { background: var(--tds-status-warning-subtle); color: var(--tds-status-warning); }
.tds-state--denied .tds-state__icon { background: var(--tds-status-info-subtle); color: var(--tds-status-info); }

/* Dans un panneau, une carte, une ligne de tableau : à gauche, sans marge. */
.tds-state--inline {
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-content: center;
  gap: var(--tds-space-1) var(--tds-space-3);
  max-width: none;
  margin: 0;
  padding: var(--tds-space-4);
  text-align: left;
}

.tds-state--inline .tds-state__icon {
  grid-row: span 3;
  width: 2.25rem;
  height: 2.25rem;
}

.tds-state--inline .tds-state__actions {
  justify-content: flex-start;
}

.tds-spinner {
  width: var(--tds-icon-size-lg);
  height: var(--tds-icon-size-lg);
  border: var(--tds-border-width-strong) solid var(--tds-border-strong);
  border-top-color: var(--tds-text-primary);
  border-radius: var(--tds-radius-full);
  animation: tds-spin 0.9s linear infinite;
}

@keyframes tds-spin {
  to { transform: rotate(360deg); }
}

/* ── Champs et actions de formulaire ─────────────────────────────────────── */

/* Ordre fixe : libellé, aide, contrôle, erreur. L'aide précède le contrôle. */
.tds-field {
  display: grid;
  gap: var(--tds-space-1);
  font-family: inherit;
}

.tds-field__label {
  color: var(--tds-text-primary);
  font-size: var(--tds-font-size-body-small);
  font-weight: var(--tds-font-weight-semibold);
}

.tds-field__optional {
  color: var(--tds-text-muted);
  font-weight: var(--tds-font-weight-regular);
}

.tds-field__hint {
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-label);
  line-height: 1.4;
}

.tds-field__control {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tds-control-height-md);
  padding: var(--tds-space-2) var(--tds-space-3);
  border: var(--tds-border-width-default) solid var(--tds-border-strong);
  border-radius: var(--tds-radius-role-control);
  background: var(--tds-surface-default);
  color: var(--tds-text-primary);
  font-family: inherit;
  font-weight: var(--tds-font-weight-regular);
  font-size: var(--tds-font-size-body);
  line-height: 1.4;
}

.tds-field__control:focus-visible {
  outline: var(--tds-focus-width) solid var(--tds-border-focus);
  outline-offset: 0;
  border-color: var(--tds-border-focus);
}

.tds-field__control:disabled {
  background: var(--tds-action-disabled);
  color: var(--tds-action-on-disabled);
}

/* Un contrôle court (date, nombre, code) ne s'étire pas sur toute la largeur. */
.tds-field--compact .tds-field__control {
  width: auto;
  max-width: 100%;
  justify-self: start;
}

.tds-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--tds-space-1);
  color: var(--tds-status-danger);
  font-size: var(--tds-font-size-label);
  font-weight: var(--tds-font-weight-medium);
  line-height: 1.4;
}

.tds-field--invalid .tds-field__control,
.tds-field__control[aria-invalid="true"] {
  border-color: var(--tds-status-danger);
  border-width: var(--tds-border-width-strong);
}

/* Case à cocher, bouton radio : le libellé entier est la cible, l'aide suit. */
.tds-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--tds-space-3);
  min-height: var(--tds-touch-target-web);
  padding: var(--tds-space-2) 0;
  color: var(--tds-text-primary);
  font-family: inherit;
  font-size: var(--tds-font-size-body-small);
  line-height: 1.4;
  cursor: pointer;
}

.tds-check__input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--tds-brand-action);
}

.tds-check__label {
  font-weight: var(--tds-font-weight-medium);
}

.tds-check__hint {
  grid-column: 2;
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-label);
}

.tds-check__input:focus-visible {
  outline: var(--tds-focus-width) solid var(--tds-border-focus);
  outline-offset: var(--tds-focus-offset);
}

/* L'action principale en premier dans le DOM ; une action destructive à l'écart. */
.tds-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tds-space-3);
}

.tds-form-actions__aside {
  margin-left: auto;
}

@media (max-width: 639.98px) {
  .tds-form-actions > .tds-button {
    flex: 1 1 100%;
  }

  .tds-form-actions__aside {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

/* ── Dialogue de confirmation ────────────────────────────────────────────── */

/* Remplace confirm() : un <dialog> natif, ouvert par showModal(), qui garde le
   focus et se ferme à Échap. Feuille en bas sur téléphone. */
.tds-dialog {
  width: min(30rem, calc(100vw - 2 * var(--tds-space-4)));
  max-height: calc(100vh - 2 * var(--tds-space-4));
  padding: var(--tds-space-6);
  border: var(--tds-border-width-default) solid var(--tds-border-default);
  border-radius: var(--tds-radius-role-surface);
  background: var(--tds-surface-raised);
  color: var(--tds-text-primary);
  font-family: inherit;
  box-shadow: var(--tds-elevation-high);
}

.tds-dialog::backdrop {
  background: var(--tds-surface-scrim);
}

.tds-dialog__title {
  margin: 0 0 var(--tds-space-2);
  font-size: var(--tds-font-size-heading4);
  font-weight: var(--tds-font-weight-semibold);
  line-height: var(--tds-line-height-heading);
}

.tds-dialog__text {
  margin: 0;
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-body-small);
  line-height: var(--tds-line-height-body);
}

.tds-dialog__text p {
  margin: 0 0 var(--tds-space-2);
}

.tds-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tds-space-3);
  margin-top: var(--tds-space-6);
}

@media (max-width: 639.98px) {
  .tds-dialog {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: var(--tds-radius-role-surface) var(--tds-radius-role-surface) 0 0;
  }

  .tds-dialog__actions > .tds-button {
    flex: 1 1 100%;
  }
}

/* ── Mouvement ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tds-spinner {
    animation-duration: 2.4s;
  }

  .tds-button,
  .tds-icon-button {
    transition: none;
  }

  .tds-disclosure__summary::before {
    transition: none;
  }
}