/* Composants de saisie : champ, recherche, contrôle segmenté, interrupteur, onglets (ui/formulaires.js).
   Couleurs, rayons et tailles de texte viennent des jetons : le clair et le sombre aussi.
   Un élément masqué par l'attribut hidden le reste, même quand la règle du composant pose un display. */

/* ---------- Champ ---------- */

/* align-content : étiré par une grille voisine plus haute, le champ garde ses lignes serrées en haut. */
.tz-champ {
  display: grid;
  align-content: start;
  gap: var(--tz-espace-2);
  min-width: 0;
}

.tz-champ-libelle {
  color: var(--tz-texte);
  font-size: var(--tz-taille-annexe);
  font-weight: 600;
}

.tz-champ-requis {
  color: var(--tz-texte-2);
}

.tz-champ-entree {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--tz-cible);
  margin: 0;
  padding: var(--tz-espace-2) var(--tz-espace-3);
  border: 1px solid var(--tz-separateur-fort);
  border-radius: var(--tz-rayon-m);
  background: var(--tz-neutre-fond);
  color: var(--tz-texte);
  font-family: var(--tz-police);
  font-size: var(--tz-taille-corps); /* 17 px : Safari n'agrandit pas la page à la prise de focus */
  font-weight: 400;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--tz-duree) var(--tz-courbe), box-shadow var(--tz-duree) var(--tz-courbe);
}

.tz-champ-entree::placeholder {
  color: var(--tz-texte-2);
  opacity: 1;
}

/* Safari sur iPad centre la date : on l'aligne comme les autres champs. */
.tz-champ-entree::-webkit-date-and-time-value {
  text-align: start;
}

textarea.tz-champ-entree {
  min-height: calc(var(--tz-cible) * 2.5);
  padding-block: var(--tz-espace-3);
  line-height: 1.4;
  resize: vertical;
}

.tz-champ-selection {
  position: relative;
  display: block;
  min-width: 0;
}

select.tz-champ-entree {
  padding-inline-end: calc(var(--tz-espace-3) * 2 + 18px);
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Chevron de la liste : posé sur le champ, il laisse passer le clic. */
.tz-champ-selection > svg {
  position: absolute;
  inset-inline-end: var(--tz-espace-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--tz-texte-2);
  pointer-events: none;
}

.tz-champ-entree:focus-visible {
  border-color: var(--tz-accent);
  outline: 3px solid var(--tz-focus);
  outline-offset: 1px;
}

.tz-champ-entree[aria-invalid="true"] {
  border-color: var(--tz-rouge);
  box-shadow: inset 0 0 0 1px var(--tz-rouge);
}

.tz-champ-entree:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tz-champ-aide {
  margin: 0;
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-note);
}

.tz-champ-erreur {
  display: flex;
  align-items: flex-start;
  gap: var(--tz-espace-1);
  margin: 0;
  color: var(--tz-rouge-texte);
  font-size: var(--tz-taille-note);
  font-weight: 600;
}

.tz-champ-erreur[hidden] {
  display: none;
}

.tz-champ-erreur > svg {
  flex: none;
}

/* ---------- Recherche ---------- */

.tz-recherche {
  position: relative;
  display: block;
  min-width: 0;
}

/* Le champ est la capsule entière : la loupe et le bouton d'effacement sont posés dessus. */
.tz-recherche-entree {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--tz-cible);
  margin: 0;
  padding-block: 0;
  padding-inline: calc(var(--tz-espace-3) + 18px + var(--tz-espace-2)) var(--tz-cible);
  border: 1px solid var(--tz-verre-bord);
  border-radius: var(--tz-rayon-capsule);
  background: linear-gradient(var(--tz-neutre-fond), var(--tz-neutre-fond)), var(--tz-verre);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  color: var(--tz-texte);
  font-family: var(--tz-police);
  font-size: var(--tz-taille-corps);
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
}

.tz-recherche-entree::placeholder {
  color: var(--tz-texte-2);
  opacity: 1;
}

/* Le bouton d'effacement du navigateur est remplacé par le nôtre, identique partout. */
.tz-recherche-entree::-webkit-search-cancel-button,
.tz-recherche-entree::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.tz-recherche-entree:focus-visible {
  outline: 3px solid var(--tz-focus);
  outline-offset: 1px;
}

.tz-recherche-loupe {
  position: absolute;
  inset-inline-start: var(--tz-espace-3);
  top: 50%;
  display: flex;
  transform: translateY(-50%);
  color: var(--tz-texte-2);
  pointer-events: none;
}

.tz-recherche-effacer {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: var(--tz-cible);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--tz-rayon-capsule);
  background: none;
  color: var(--tz-texte-2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--tz-duree) var(--tz-courbe), color var(--tz-duree) var(--tz-courbe);
}

.tz-recherche-effacer[hidden] {
  display: none;
}

.tz-recherche-effacer:active {
  transform: scale(0.97);
  color: var(--tz-texte);
}

.tz-recherche-effacer:focus-visible {
  outline: 3px solid var(--tz-focus);
  outline-offset: -3px;
}

/* ---------- Libellé d'option (segments et onglets) ----------
   Le texte et son gabarit en gras occupent la même case : la largeur est celle du gras, choisi ou non. */

.tz-libelle-stable {
  display: grid;
  min-width: 0;
}

.tz-libelle-stable > span {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tz-libelle-gabarit {
  font-weight: 600;
  visibility: hidden;
}

.tz-segment-pastille,
.tz-onglet-pastille {
  flex: none;
  box-sizing: border-box;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-neutre-fond);
  color: var(--tz-texte);
  font-size: var(--tz-taille-legende);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: center;
}

/* ---------- Contrôle segmenté ----------
   Capsule de verre à colonnes égales. Le curseur est un pseudo-élément qui glisse sous l'option choisie :
   le script pose --tz-segments-nombre et --tz-segments-position. Les boutons font toute la hauteur
   (cible de 44 px) ; le curseur est en retrait d'une marge, capsule dans la capsule. */

.tz-segments {
  --tz-segments-nombre: 1;
  --tz-segments-position: 0;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--tz-verre-bord);
  border-radius: var(--tz-rayon-capsule);
  background: linear-gradient(var(--tz-neutre-fond), var(--tz-neutre-fond)), var(--tz-verre);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
}

.tz-segments::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: var(--tz-espace-1);
  left: var(--tz-espace-1);
  width: calc(100% / var(--tz-segments-nombre) - 2 * var(--tz-espace-1));
  border-radius: var(--tz-rayon-capsule);
  /* Surface pleine relevée d'un reflet : plus claire que la piste en clair comme en sombre. */
  background: linear-gradient(var(--tz-verre-bord), var(--tz-verre-bord)), var(--tz-surface-3);
  box-shadow: var(--tz-ombre-1), inset 0 0 0 1px var(--tz-verre-bord);
  transform: translateX(calc(var(--tz-segments-position) * (100% + 2 * var(--tz-espace-1))));
  transition: transform var(--tz-duree) var(--tz-courbe);
}

.tz-segments-sans-choix::before {
  display: none;
}

.tz-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tz-espace-2);
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--tz-cible);
  margin: 0;
  padding: 0 var(--tz-espace-3);
  border: 0;
  border-radius: var(--tz-rayon-capsule);
  background: none;
  color: var(--tz-texte-2);
  font-family: var(--tz-police);
  font-size: var(--tz-taille-annexe);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--tz-duree) var(--tz-courbe);
}

.tz-segment[aria-checked="true"] {
  color: var(--tz-texte);
  font-weight: 600;
}

.tz-segment > * {
  transition: transform var(--tz-duree) var(--tz-courbe);
}

.tz-segment:active > * {
  transform: scale(0.97);
}

.tz-segment:focus-visible {
  outline: 3px solid var(--tz-focus);
  outline-offset: -3px;
}

/* ---------- Interrupteur ---------- */

.tz-interrupteur {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tz-espace-4);
  box-sizing: border-box;
  min-width: var(--tz-cible);
  min-height: var(--tz-cible);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tz-texte);
  font-family: var(--tz-police);
  font-size: var(--tz-taille-corps);
  font-weight: 400;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tz-interrupteur-libelle {
  min-width: 0;
}

/* 51 × 31 px comme sur iPadOS ; pouce de 27 px en retrait de 2 px.
   Piste éteinte en gris plein : l'état se lit sans la couleur (contraste de 3:1 avec le pouce et avec le fond). */
.tz-interrupteur-piste {
  flex: none;
  box-sizing: border-box;
  display: block;
  width: 51px;
  height: 31px;
  padding: 2px;
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-neutre);
  transition: background-color var(--tz-duree) var(--tz-courbe), transform var(--tz-duree) var(--tz-courbe);
}

.tz-interrupteur-pouce {
  display: block;
  width: 27px;
  height: 27px;
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-sur-accent);
  box-shadow: var(--tz-ombre-1);
  transition: transform var(--tz-duree) var(--tz-courbe);
}

.tz-interrupteur[aria-checked="true"] .tz-interrupteur-piste {
  background: var(--tz-vert);
}

.tz-interrupteur[aria-checked="true"] .tz-interrupteur-pouce {
  transform: translateX(20px);
}

.tz-interrupteur:active:not(:disabled) .tz-interrupteur-piste {
  transform: scale(0.97);
}

.tz-interrupteur:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Le focus se montre autour de la piste, pas autour du libellé. */
.tz-interrupteur:focus-visible {
  outline: none;
}

.tz-interrupteur:focus-visible .tz-interrupteur-piste {
  outline: 3px solid var(--tz-focus);
  outline-offset: 2px;
}

/* ---------- Case à cocher ----------
   L'entrée native reste dans le flux (lue par les lecteurs d'écran, prise au clavier) mais invisible ;
   la boîte dessinée prend son état par :checked. Toute l'étiquette est la cible (44 px de haut). */
.tz-case {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--tz-espace-3);
  min-height: var(--tz-cible);
  min-width: var(--tz-cible);
  color: var(--tz-texte);
  font-size: var(--tz-taille-corps);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tz-case-entree {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.tz-case-boite {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid var(--tz-neutre);
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-surface);
  color: transparent;
  transition: background-color var(--tz-duree) var(--tz-courbe), border-color var(--tz-duree) var(--tz-courbe);
}

.tz-case-entree:checked + .tz-case-boite {
  border-color: var(--tz-accent);
  background: var(--tz-accent);
  color: var(--tz-sur-accent);
}

.tz-case-entree:focus-visible + .tz-case-boite {
  outline: 3px solid var(--tz-focus);
  outline-offset: 2px;
}

.tz-case-libelle {
  min-width: 0;
}

.tz-case-desactivee {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Onglets ----------
   Barre de verre flottante en capsule, qui défile en largeur quand les onglets ne tiennent pas.
   position: relative sert de repère au script qui amène l'onglet actif dans la partie visible. */

.tz-onglets {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--tz-espace-4);
  scrollbar-width: none;
  border: 1px solid var(--tz-verre-bord);
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-verre);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  box-shadow: var(--tz-verre-ombre);
}

.tz-onglets::-webkit-scrollbar {
  display: none;
}

.tz-onglet {
  position: relative;
  isolation: isolate;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--tz-espace-2);
  box-sizing: border-box;
  min-height: var(--tz-cible);
  margin: 0;
  padding: 0 var(--tz-espace-4);
  border: 0;
  border-radius: var(--tz-rayon-capsule);
  background: none;
  color: var(--tz-texte-2);
  font-family: var(--tz-police);
  font-size: var(--tz-taille-annexe);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--tz-duree) var(--tz-courbe), transform var(--tz-duree) var(--tz-courbe);
}

/* Fond de l'onglet actif : capsule en retrait d'une marge dans la barre. */
.tz-onglet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--tz-espace-1);
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-accent-fond);
  opacity: 0;
  transition: opacity var(--tz-duree) var(--tz-courbe);
}

.tz-onglet[aria-selected="true"] {
  color: var(--tz-accent-texte);
  font-weight: 600;
}

.tz-onglet[aria-selected="true"]::before {
  opacity: 1;
}

.tz-onglet:active {
  transform: scale(0.97);
}

/* La barre rogne ce qui dépasse : le contour de focus se dessine vers l'intérieur. */
.tz-onglet:focus-visible {
  outline: 3px solid var(--tz-focus);
  outline-offset: -3px;
}

/* ---------- Pointeur et contraste renforcé ---------- */

@media (hover: hover) {
  .tz-champ-entree:hover:not(:disabled, :focus-visible, [aria-invalid="true"]) {
    border-color: var(--tz-neutre);
  }

  .tz-recherche-effacer:hover,
  .tz-segment:hover,
  .tz-onglet:hover:not([aria-selected="true"]) {
    color: var(--tz-texte);
  }
}

@media (prefers-contrast: more) {
  .tz-champ-entree,
  .tz-recherche-entree,
  .tz-segments,
  .tz-onglets {
    border-color: var(--tz-texte);
  }

  .tz-segments::before {
    box-shadow: inset 0 0 0 2px var(--tz-texte);
  }

  .tz-onglet[aria-selected="true"]::before {
    box-shadow: inset 0 0 0 2px var(--tz-accent-texte);
  }
}