/* Surcouches : menu surgissant, feuille modale, confirmation, annonces (ui/surcouches.js).
   Matière « verre » flottante, détachée des bords. Aucune couleur, aucun rayon, aucune taille de texte ici :
   tout vient de jetons.css. Les boutons des feuilles sont ceux de composants-structure.css. */

/* --- Régions lues par les lecteurs d'écran : jamais visibles (le bandeau visible est .tz-annonce) --- */

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

/* --- Menu surgissant --- */

.tz-menu {
  display: inline-flex;
  vertical-align: middle;
}

/* Position fixe, aux coordonnées calculées par le script (variables). « inset: auto » et « margin: 0 » retirent
   le centrage que le navigateur donne aux éléments popover. */
.tz-menu-liste {
  position: fixed;
  z-index: 1100;
  inset: auto;
  top: var(--tz-menu-haut, 0px);
  left: var(--tz-menu-gauche, 0px);
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: min(14rem, calc(100vw - 2 * var(--tz-espace-2)));
  max-width: min(20rem, calc(100vw - 2 * var(--tz-espace-2)));
  max-height: calc(100vh - 2 * var(--tz-espace-2));
  max-height: calc(100dvh - 2 * var(--tz-espace-2));
  margin: 0;
  /* Formes concentriques : rayon d'une entrée = rayon du menu moins cette marge. */
  padding: calc(var(--tz-rayon-l) - var(--tz-rayon-m));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tz-verre-bord);
  border-radius: var(--tz-rayon-l);
  background: var(--tz-verre);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  box-shadow: var(--tz-verre-ombre);
  color: var(--tz-texte);
  font-family: var(--tz-police);
  font-size: var(--tz-taille-corps);
  transform-origin: top left;
  animation: tz-menu-entree var(--tz-duree) var(--tz-courbe);
}

/* Fermé : l'attribut hidden l'emporte sur « display: flex ». */
.tz-menu-liste[hidden] {
  display: none;
}

/* Le menu grandit depuis le coin qui touche le déclencheur. */
.tz-menu-liste-fin {
  transform-origin: top right;
}

.tz-menu-liste-haut {
  transform-origin: bottom left;
}

.tz-menu-liste-fin.tz-menu-liste-haut {
  transform-origin: bottom right;
}

.tz-menu-entree {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--tz-espace-3);
  width: 100%;
  min-height: var(--tz-cible);
  padding: var(--tz-espace-2) var(--tz-espace-3);
  border-radius: var(--tz-rayon-m);
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: 1.3;
  text-align: start;
  transition: background-color var(--tz-duree) var(--tz-courbe), transform var(--tz-duree) var(--tz-courbe);
}

.tz-menu-entree > .tz-icone {
  flex: none;
  color: var(--tz-texte-2);
}

.tz-menu-libelle {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tz-menu-entree-destructif,
.tz-menu-entree-destructif > .tz-icone {
  color: var(--tz-rouge-texte);
}

/* L'anneau de focus reste à l'intérieur de l'entrée : le menu rogne ce qui dépasse. */
.tz-menu-entree:focus-visible {
  outline-offset: -3px;
  background: var(--tz-neutre-fond);
}

.tz-menu-entree:active {
  background: var(--tz-neutre-fond);
  transform: scale(0.97);
}

.tz-menu-entree-destructif:focus-visible,
.tz-menu-entree-destructif:active {
  background: var(--tz-rouge-fond);
}

@media (hover: hover) {
  .tz-menu-entree:hover {
    background: var(--tz-neutre-fond);
  }

  .tz-menu-entree-destructif:hover {
    background: var(--tz-rouge-fond);
  }
}

/* --- Feuille modale ---
   Le <dialog> couvre l'écran et porte le voile ; le cadre de verre est son enfant. Le voile est peint sur le dialogue
   et non sur ::backdrop, qui n'hérite pas des jetons dans tous les navigateurs.
   Par défaut (écran étroit) : feuille basse, pleine largeur. À partir de 640 px : feuille centrée. */

.tz-feuille {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(var(--tz-espace-6), env(safe-area-inset-top, 0px)) 0 0;
  border: 0;
  overflow: hidden;
  background: var(--tz-voile);
  color: var(--tz-texte);
  font-family: var(--tz-police);
  animation: tz-voile-entree var(--tz-duree) var(--tz-courbe);
}

/* Seulement ouverte : fermée, la règle du navigateur (display: none) doit garder la main. */
.tz-feuille[open] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tz-feuille::backdrop {
  background: transparent;
}

/* Sans élément à qui donner le focus, c'est le dialogue qui le reçoit : pas d'anneau autour de l'écran. */
.tz-feuille:focus,
.tz-feuille:focus-visible {
  outline: none;
}

/* La page ne défile pas sous une feuille ouverte. */
:root:has(.tz-feuille[open]) {
  overflow: hidden;
}

.tz-feuille-cadre {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  overflow: hidden;
  border: 1px solid var(--tz-verre-bord);
  border-bottom: 0;
  border-radius: var(--tz-rayon-xl) var(--tz-rayon-xl) 0 0;
  /* Verre fort : la feuille porte du texte courant et des formulaires, qui doivent rester lisibles (contraste AA)
     quel que soit le contenu resté derrière. */
  background: var(--tz-verre-fort);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  box-shadow: var(--tz-verre-ombre);
  animation: tz-feuille-montee var(--tz-duree-lente) var(--tz-courbe);
}

.tz-feuille-entete {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--tz-espace-3);
  padding: var(--tz-espace-3) var(--tz-espace-3) var(--tz-espace-2) var(--tz-espace-5);
}

.tz-feuille-titre {
  flex: 1;
  min-width: 0;
  font-size: var(--tz-taille-titre-3);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Bouton de fermeture rond : une cible de 44 px, concentrique au coin de la feuille. */
.tz-feuille-fermer {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tz-cible);
  height: var(--tz-cible);
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-neutre-fond);
  color: var(--tz-texte-2);
  transition: background-color var(--tz-duree) var(--tz-courbe), color var(--tz-duree) var(--tz-courbe), transform var(--tz-duree) var(--tz-courbe);
}

.tz-feuille-fermer:active {
  transform: scale(0.97);
  background: var(--tz-surface-3);
}

@media (hover: hover) {
  .tz-feuille-fermer:hover {
    background: var(--tz-surface-3);
    color: var(--tz-texte);
  }
}

.tz-feuille-corps {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--tz-espace-2) var(--tz-espace-5) var(--tz-espace-5);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: var(--tz-taille-corps);
}

.tz-feuille-corps:not(:last-child) {
  padding-bottom: var(--tz-espace-3);
}

/* Sur écran étroit, les boutons se partagent la largeur. */
.tz-feuille-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tz-espace-2);
  padding: var(--tz-espace-3) var(--tz-espace-5) var(--tz-espace-5);
}

.tz-feuille-actions > * {
  flex: 1 1 auto;
}

/* --- Confirmation --- */

/* Pas de bouton de fermeture : l'en-tête reprend la marge du corps. */
.tz-feuille-confirmation .tz-feuille-entete {
  padding: var(--tz-espace-5) var(--tz-espace-5) var(--tz-espace-2);
}

.tz-confirmation {
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-4);
}

.tz-confirmation-message {
  color: var(--tz-texte-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .tz-feuille {
    padding: max(var(--tz-espace-6), env(safe-area-inset-top, 0px)) max(var(--tz-espace-6), env(safe-area-inset-right, 0px)) max(var(--tz-espace-6), env(safe-area-inset-bottom, 0px)) max(var(--tz-espace-6), env(safe-area-inset-left, 0px));
  }

  .tz-feuille[open] {
    align-items: center;
  }

  .tz-feuille-cadre {
    width: min(100%, 35rem);
    padding: 0;
    border-bottom: 1px solid var(--tz-verre-bord);
    border-radius: var(--tz-rayon-xl);
    animation-name: tz-feuille-entree;
    animation-duration: var(--tz-duree);
  }

  .tz-feuille-large .tz-feuille-cadre {
    width: min(100%, 56rem);
  }

  .tz-feuille-confirmation .tz-feuille-cadre {
    width: min(100%, 27rem);
  }

  .tz-feuille-actions > * {
    flex: 0 1 auto;
  }
}

/* --- Annonces : bandeaux brefs en haut de l'écran --- */

/* La pile ne retient pas les appuis : seuls les bandeaux le font. */
.tz-annonces-pile {
  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tz-espace-2);
  padding: calc(env(safe-area-inset-top, 0px) + var(--tz-espace-3)) calc(env(safe-area-inset-right, 0px) + var(--tz-espace-4)) 0 calc(env(safe-area-inset-left, 0px) + var(--tz-espace-4));
  pointer-events: none;
}

.tz-annonce {
  display: flex;
  align-items: center;
  gap: var(--tz-espace-3);
  max-width: min(100%, 36rem);
  min-height: var(--tz-cible);
  padding: var(--tz-espace-3) var(--tz-espace-5) var(--tz-espace-3) var(--tz-espace-4);
  border: 1px solid var(--tz-verre-bord);
  border-radius: var(--tz-rayon-xl);
  background: var(--tz-verre);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  box-shadow: var(--tz-verre-ombre);
  color: var(--tz-texte);
  font-family: var(--tz-police);
  font-size: var(--tz-taille-annexe);
  font-weight: 500;
  line-height: 1.3;
  pointer-events: auto;
}

.tz-annonce-entree {
  animation: tz-annonce-entree var(--tz-duree-lente) var(--tz-courbe);
}

.tz-annonce > .tz-icone {
  flex: none;
  color: var(--tz-accent-texte);
}

.tz-annonce-succes > .tz-icone {
  color: var(--tz-vert-texte);
}

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

.tz-annonce-texte {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- Mouvement --- */

@keyframes tz-menu-entree {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes tz-voile-entree {
  from {
    background-color: transparent;
  }
}

@keyframes tz-feuille-montee {
  from {
    transform: translateY(100%);
  }
}

@keyframes tz-feuille-entree {
  from {
    opacity: 0;
    transform: translateY(var(--tz-espace-3)) scale(0.97);
  }
}

@keyframes tz-annonce-entree {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--tz-espace-5))) scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tz-menu-liste,
  .tz-feuille,
  .tz-feuille-cadre,
  .tz-annonce-entree {
    animation: none;
  }

  .tz-menu-entree:active,
  .tz-feuille-fermer:active {
    transform: none;
  }
}