/* Composants de structure : page, groupe, ligne, carte, bouton, pastille, états, tableau, icône.
   Le contenu vit dans des surfaces pleines (jamais de verre) ; seule la barre d'outils de la page passe en verre au défilement.
   Règles suivies : reference/design-ipados27.md. Aucune couleur, aucun rayon, aucune taille de texte ici : tout vient de jetons.css. */

/* --- Icône --- */

.tz-icone {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

/* --- Page : barre d'outils, grand titre, contenu ---
   Les marges autour de la page (bords d'écran, barre latérale, zones sûres) sont celles de la zone de contenu de la coque. */

.tz-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-5);
  width: 100%;
  max-width: var(--tz-largeur-contenu);
  margin-inline: auto;
}

/* Un élément qui reçoit le focus n'est pas caché sous la barre d'outils collante. */
.tz-page :where(*) {
  scroll-margin-block-start: calc(var(--tz-cible) + var(--tz-espace-6));
}

.tz-page-sentinelle {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Barre d'outils : transparente au repos, verre fort et flottante dès que le contenu défile dessous. */
.tz-page-outils {
  position: sticky;
  z-index: 10;
  top: var(--tz-espace-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tz-espace-2);
  margin-inline: calc(-1 * var(--tz-espace-1));
  padding: var(--tz-espace-1);
  border: 1px solid transparent;
  border-radius: var(--tz-rayon-xl);
  transition: background-color var(--tz-duree) var(--tz-courbe), border-color var(--tz-duree) var(--tz-courbe), box-shadow var(--tz-duree) var(--tz-courbe);
}

.tz-page-defile .tz-page-outils {
  border-color: var(--tz-verre-bord);
  background: var(--tz-verre-fort);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  box-shadow: var(--tz-verre-ombre);
}

/* Contrôles de barre en monochrome : pas de texte d'accent sur le verre. */
.tz-page-retour {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--tz-espace-1);
  min-height: var(--tz-cible);
  padding: var(--tz-espace-2) var(--tz-espace-4) var(--tz-espace-2) var(--tz-espace-2);
  border-radius: var(--tz-rayon-capsule);
  color: var(--tz-texte);
  text-decoration: none;
  touch-action: manipulation;
  transition: transform var(--tz-duree) var(--tz-courbe), background-color var(--tz-duree) var(--tz-courbe);
}

.tz-page-retour:active {
  background: linear-gradient(var(--tz-neutre-fond), var(--tz-neutre-fond)) var(--tz-surface);
  transform: scale(0.97);
}

.tz-page-titre-court {
  flex: 1 1 0%;
  min-width: 0;
  padding-inline: var(--tz-espace-2);
  overflow: hidden;
  font-size: var(--tz-taille-corps);
  font-weight: 600;
  line-height: 1.29;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tz-duree) var(--tz-courbe), visibility 0s linear var(--tz-duree);
}

.tz-page-defile .tz-page-titre-court {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--tz-duree) var(--tz-courbe), visibility 0s;
}

.tz-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tz-espace-2);
  max-width: 100%;
  margin-inline-start: auto;
}

.tz-page-outils .tz-bouton-simple {
  color: var(--tz-texte);
}

.tz-page-entete {
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-1);
  min-width: 0;
}

.tz-page-outils + .tz-page-entete {
  margin-top: calc(-1 * var(--tz-espace-3));
}

.tz-page-titre {
  font-size: var(--tz-taille-grand-titre);
  font-weight: 700;
  line-height: 1.21;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Le titre reçoit le focus après une navigation pour que la lecture reprenne là : ce n'est pas une commande, pas d'anneau. */
.tz-page-titre:focus {
  outline: none;
}

.tz-page-sous-titre {
  color: var(--tz-texte-2);
  overflow-wrap: anywhere;
}

.tz-page-contenu {
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-5);
  min-width: 0;
}

.tz-page-contenu > * {
  min-width: 0;
}

@media (min-width: 48rem) {
  .tz-page,
  .tz-page-contenu {
    gap: var(--tz-espace-6);
  }
}

/* Fenêtre compacte (moins de 700 px) : dans la barre d'outils, un bouton qui a une icône n'affiche qu'elle.
   Son libellé reste dans la page, lu par les lecteurs d'écran. */
@media (max-width: 699px) {
  .tz-page-outils .tz-bouton-avec-icone {
    width: var(--tz-cible);
    padding: 0;
  }

  .tz-page-outils .tz-bouton-avec-icone .tz-bouton-libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Groupe : liste groupée en encart --- */

.tz-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-2);
  min-width: 0;
}

/* En-tête en casse normale, plus de capitales. */
.tz-groupe-titre {
  padding-inline: var(--tz-espace-4);
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-annexe);
  font-weight: 600;
  line-height: 1.33;
}

.tz-groupe-corps {
  min-width: 0;
  border-radius: var(--tz-rayon-l);
  background-color: var(--tz-surface);
}

.tz-groupe-pied {
  padding-inline: var(--tz-espace-4);
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-note);
  line-height: 1.38;
}

/* Ce qui n'est ni une ligne ni un tableau reçoit la marge d'une ligne (spécificité basse : un composant peut la reprendre). */
.tz-groupe-corps > :where(:not(.tz-ligne, .tz-tableau-cadre)) {
  padding: var(--tz-espace-3) var(--tz-espace-4);
}

/* Filet fin entre deux éléments, inséré après l'icône et en retrait du bord droit ; aucun après le dernier.
   Tracé en image de fond : la couleur de fond d'une ligne survolée ou pressée ne l'efface pas. */
.tz-groupe-corps > * + * {
  background-image: linear-gradient(var(--tz-separateur), var(--tz-separateur));
  background-repeat: no-repeat;
  background-position: var(--tz-ligne-retrait, var(--tz-espace-4)) 0;
  background-size: calc(100% - var(--tz-ligne-retrait, var(--tz-espace-4)) - var(--tz-espace-4)) 1px;
}

/* --- Ligne de liste --- */

.tz-ligne {
  --tz-ligne-icone: 1.75rem;
  --tz-ligne-retrait: var(--tz-espace-4);
  display: flex;
  align-items: center;
  gap: var(--tz-espace-3);
  width: 100%;
  min-height: var(--tz-cible);
  padding: var(--tz-espace-2) var(--tz-espace-4);
  background-color: transparent;
  color: var(--tz-texte);
  text-align: start;
  text-decoration: none;
  transition: background-color var(--tz-duree) var(--tz-courbe);
}

.tz-ligne-avec-icone {
  --tz-ligne-retrait: calc(var(--tz-espace-4) + var(--tz-ligne-icone) + var(--tz-espace-3));
}

.tz-ligne-action {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.tz-ligne-action:active {
  background-color: var(--tz-surface-3);
}

/* L'anneau de focus reste à l'intérieur de la ligne : il suit les coins de l'encart. */
.tz-ligne:focus-visible {
  outline-offset: -3px;
}

.tz-ligne-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--tz-ligne-icone);
  height: var(--tz-ligne-icone);
  color: var(--tz-accent-texte);
}

/* Titre et valeur : côte à côte, la valeur à droite ; faute de place, la valeur passe sous le titre. */
.tz-ligne-corps {
  display: flex;
  flex: 1 1 0%;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--tz-espace-1) / 2) var(--tz-espace-3);
  min-width: 0;
}

.tz-ligne-textes {
  display: flex;
  flex: 1 1 7rem;
  flex-direction: column;
  gap: calc(var(--tz-espace-1) / 2);
  min-width: 0;
}

.tz-ligne-titre,
.tz-ligne-sous-titre {
  overflow-wrap: anywhere;
}

.tz-ligne-sous-titre {
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-annexe);
  line-height: 1.33;
}

.tz-ligne-valeur {
  flex: 0 1 auto;
  max-width: 100%;
  color: var(--tz-texte-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  text-align: end;
}

.tz-ligne > .tz-pastille {
  flex: none;
}

.tz-ligne-accessoire {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--tz-espace-2);
}

.tz-ligne-chevron {
  display: grid;
  flex: none;
  color: var(--tz-texte-3);
}

/* Premier et dernier élément d'un encart : mêmes coins que lui (fond survolé et anneau de focus épousent la forme). */
.tz-groupe-corps > :first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.tz-groupe-corps > :last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* --- Carte --- */

.tz-carte {
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-3);
  min-width: 0;
  padding: var(--tz-espace-5);
  border-radius: var(--tz-rayon-l);
  background-color: var(--tz-surface);
  box-shadow: var(--tz-ombre-1);
}

.tz-carte-titre {
  font-size: var(--tz-taille-corps);
  font-weight: 600;
  line-height: 1.29;
  overflow-wrap: anywhere;
}

.tz-carte-corps {
  min-width: 0;
}

/* Les actions restent en pied : dans une grille, elles s'alignent d'une carte à l'autre. */
.tz-carte-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tz-espace-2);
  margin-top: auto;
  padding-top: var(--tz-espace-1);
}

/* --- Bouton : capsule de 44 px ---
   plein : aplat d'accent ; teinte : fond léger ; simple : texte seul ; destructif : fond et texte rouges. */

.tz-bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tz-espace-2);
  max-width: 100%;
  min-width: var(--tz-cible);
  min-height: var(--tz-cible);
  padding: var(--tz-espace-2) var(--tz-espace-5);
  border-radius: var(--tz-rayon-capsule);
  background: transparent;
  color: var(--tz-accent-texte);
  font-size: var(--tz-taille-corps);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: transform var(--tz-duree) var(--tz-courbe), box-shadow var(--tz-duree) var(--tz-courbe), background-color var(--tz-duree) var(--tz-courbe);
}

.tz-bouton-plein {
  background: var(--tz-accent);
  color: var(--tz-sur-accent);
}

/* Teinte posée sur la couleur de surface : le contraste du texte reste le même sur le fond gris, une carte ou le verre. */
.tz-bouton-teinte {
  background: linear-gradient(var(--tz-accent-fond), var(--tz-accent-fond)) var(--tz-surface);
  color: var(--tz-accent-texte);
}

.tz-bouton-destructif {
  background: linear-gradient(var(--tz-rouge-fond), var(--tz-rouge-fond)) var(--tz-surface);
  color: var(--tz-rouge-texte);
}

.tz-bouton-petit {
  gap: var(--tz-espace-1);
  min-width: calc(var(--tz-cible) - var(--tz-espace-3));
  min-height: calc(var(--tz-cible) - var(--tz-espace-3));
  padding: var(--tz-espace-1) var(--tz-espace-3);
  font-size: var(--tz-taille-annexe);
}

/* Un petit bouton garde une zone tactile de 44 px. */
.tz-bouton-petit::after {
  content: "";
  position: absolute;
  inset: calc(var(--tz-espace-3) / -2) 0;
}

.tz-bouton-icone {
  width: var(--tz-cible);
  height: var(--tz-cible);
  padding: 0;
}

.tz-bouton-icone.tz-bouton-petit {
  width: calc(var(--tz-cible) - var(--tz-espace-3));
  height: calc(var(--tz-cible) - var(--tz-espace-3));
}

.tz-bouton-icone.tz-bouton-petit::after {
  inset: calc(var(--tz-espace-3) / -2);
}

.tz-bouton-libelle {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* État pressé : léger enfoncement ; un bouton sans fond se met aussi en évidence. */
.tz-bouton:active {
  box-shadow: none;
  transform: scale(0.97);
}

.tz-bouton-simple:active {
  background: linear-gradient(var(--tz-neutre-fond), var(--tz-neutre-fond)) var(--tz-surface);
}

.tz-bouton:disabled,
.tz-bouton[aria-disabled="true"] {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
  transform: none;
}

/* --- Pastille : capsule de 22 px, paire -fond / -texte d'un ton --- */

/* Même principe que le bouton teinté : la teinte repose sur la couleur de surface, où le texte tient le contraste AA. */
.tz-pastille {
  --tz-pastille-texte: var(--tz-neutre-texte);
  --tz-pastille-fond: var(--tz-neutre-fond);
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 1.375rem;
  padding: calc(var(--tz-espace-1) / 2) var(--tz-espace-2);
  overflow: hidden;
  border-radius: var(--tz-rayon-capsule);
  background: linear-gradient(var(--tz-pastille-fond), var(--tz-pastille-fond)) var(--tz-surface);
  color: var(--tz-pastille-texte);
  font-size: var(--tz-taille-legende);
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.tz-pastille-bleu {
  --tz-pastille-texte: var(--tz-bleu-texte);
  --tz-pastille-fond: var(--tz-bleu-fond);
}

.tz-pastille-vert {
  --tz-pastille-texte: var(--tz-vert-texte);
  --tz-pastille-fond: var(--tz-vert-fond);
}

.tz-pastille-orange {
  --tz-pastille-texte: var(--tz-orange-texte);
  --tz-pastille-fond: var(--tz-orange-fond);
}

.tz-pastille-rouge {
  --tz-pastille-texte: var(--tz-rouge-texte);
  --tz-pastille-fond: var(--tz-rouge-fond);
}

.tz-pastille-violet {
  --tz-pastille-texte: var(--tz-violet-texte);
  --tz-pastille-fond: var(--tz-violet-fond);
}

/* --- États : vide, attente, erreur --- */

.tz-etat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tz-espace-2);
  min-width: 0;
  padding: var(--tz-espace-8) var(--tz-espace-4);
  text-align: center;
}

.tz-etat-icone {
  display: grid;
  margin-bottom: var(--tz-espace-1);
  color: var(--tz-texte-3);
}

.tz-etat-erreur .tz-etat-icone {
  color: var(--tz-rouge-texte);
}

.tz-etat-titre {
  max-width: 32rem;
  font-size: var(--tz-taille-titre-3);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.tz-etat-texte {
  max-width: 32rem;
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-annexe);
  line-height: 1.33;
}

/* Un message d'erreur est une phrase à lire, pas un titre. */
.tz-etat-erreur .tz-etat-titre {
  font-size: var(--tz-taille-corps);
  line-height: 1.29;
}

.tz-etat-action {
  margin-top: var(--tz-espace-3);
}

.tz-chargement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tz-espace-3);
  padding: var(--tz-espace-8) var(--tz-espace-4);
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-annexe);
  line-height: 1.33;
}

.tz-chargement-roue {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--tz-separateur);
  border-top-color: currentColor;
  border-radius: var(--tz-rayon-capsule);
  animation: tz-chargement-rotation 1s linear infinite;
}

@keyframes tz-chargement-rotation {
  to {
    transform: rotate(1turn);
  }
}

/* --- Tableau dense --- */

/* Le cadre porte le défilement horizontal : la page ne défile jamais de côté. */
.tz-tableau-cadre {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--tz-rayon-l);
  background-color: var(--tz-surface);
}

.tz-groupe-corps > .tz-tableau-cadre {
  border-radius: 0;
  background-color: transparent;
}

.tz-groupe-corps > .tz-tableau-cadre:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.tz-groupe-corps > .tz-tableau-cadre:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Dans une carte, forme concentrique : rayon de la carte moins sa marge, sans descendre sous 4 px. */
.tz-carte .tz-tableau-cadre {
  border-radius: max(var(--tz-espace-1), calc(var(--tz-rayon-l) - var(--tz-espace-5)));
  background-color: transparent;
}

/* Largeur plancher selon le nombre de colonnes (posé par tableau()) : en dessous, le cadre défile au lieu d'écraser les cellules.
   Jusqu'à trois colonnes, le tableau tient dans 360 px sans défiler. */
.tz-tableau {
  width: 100%;
  min-width: calc(var(--tz-tableau-colonnes, 1) * 7.5rem - 2.5rem);
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--tz-taille-annexe);
  font-variant-numeric: tabular-nums;
  line-height: 1.33;
}

.tz-tableau th,
.tz-tableau td {
  padding: var(--tz-espace-2) var(--tz-espace-3);
  text-align: start;
  vertical-align: middle;
}

.tz-tableau th:first-child,
.tz-tableau td:first-child {
  padding-inline-start: var(--tz-espace-4);
}

.tz-tableau th:last-child,
.tz-tableau td:last-child {
  padding-inline-end: var(--tz-espace-4);
}

.tz-tableau thead th {
  padding-block: var(--tz-espace-3) var(--tz-espace-2);
  border-bottom: 1px solid var(--tz-separateur);
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-note);
  font-weight: 600;
  line-height: 1.38;
  white-space: nowrap;
}

.tz-tableau tbody tr + tr > td {
  border-top: 1px solid var(--tz-separateur);
}

/* Colonnes alignées à droite ou au centre : nombres, dates, codes courts, jamais coupés. */
.tz-tableau .tz-tableau-droite {
  text-align: end;
  white-space: nowrap;
}

.tz-tableau .tz-tableau-centre {
  text-align: center;
  white-space: nowrap;
}

.tz-tableau .tz-tableau-vide {
  padding-block: var(--tz-espace-6);
  color: var(--tz-texte-2);
  text-align: center;
}

/* Lignes cliquables : hauteur d'une cible tactile, fond à la pression. */
.tz-tableau-cliquable tbody td {
  height: var(--tz-cible);
  transition: background-color var(--tz-duree) var(--tz-courbe);
}

.tz-tableau-cliquable tbody tr {
  cursor: pointer;
}

.tz-tableau-cliquable tbody tr:active > td {
  background-color: var(--tz-surface-3);
}

/* Anneau de focus à l'intérieur de la ligne : le cadre défilant ne le coupe pas. */
.tz-tableau-cliquable tbody tr:focus-visible {
  outline-offset: -3px;
}

/* --- Au pointeur (souris, trackpad de l'iPad) : survol discret ---
   Mise en évidence sur ce qui n'a pas de fond, soulèvement sur ce qui en a un ; jamais de zoom. */

@media (any-hover: hover) {
  .tz-page-retour:hover,
  .tz-bouton-simple:hover {
    background: linear-gradient(var(--tz-neutre-fond), var(--tz-neutre-fond)) var(--tz-surface);
  }

  .tz-bouton-plein:hover,
  .tz-bouton-teinte:hover,
  .tz-bouton-destructif:hover {
    box-shadow: var(--tz-ombre-2), inset 0 0 0 1px var(--tz-separateur);
  }

  .tz-bouton:active {
    box-shadow: none;
  }

  .tz-ligne-action:hover {
    background-color: var(--tz-surface-2);
  }

  .tz-ligne-action:active {
    background-color: var(--tz-surface-3);
  }

  .tz-tableau-cliquable tbody tr:hover > td {
    background-color: var(--tz-surface-2);
  }

  .tz-tableau-cliquable tbody tr:active > td {
    background-color: var(--tz-surface-3);
  }
}

/* --- Mouvement réduit : pas d'enfoncement, la roue tourne plus lentement --- */

@media (prefers-reduced-motion: reduce) {
  .tz-bouton:active,
  .tz-page-retour:active {
    transform: none;
  }

  .tz-chargement-roue {
    animation-duration: 2.4s;
  }
}