/* Coque de l'application (coque.js) : barre latérale flottante, barre du haut, zone de contenu, bandeau de démonstration,
   écrans de démarrage (demarrage.js).
   Le contenu vit sur le fond de l'application ; la navigation flotte au-dessus, en verre, détachée des bords.
   Aucune couleur, aucun rayon, aucune taille de texte ici : tout vient de jetons.css.
   Écran étroit : sous 900 px, le seuil de ECRAN_ETROIT dans coque.js. */

/* --- Cadre --- */

.tz-coque {
  --tz-coque-marge: var(--tz-espace-3);                          /* écart entre le verre et les bords */
  --tz-coque-haut: calc(var(--tz-cible) + var(--tz-espace-2));   /* hauteur de la barre du haut */
  --tz-coque-zone-haut: var(--tz-zone-haut);                     /* zone sûre du haut, sauf si le bandeau la prend */
  --tz-coque-degagement: 0px;                                    /* place laissée à la barre du haut quand elle est là */
  --tz-coque-zone-gauche: 0px;                                   /* zone sûre de gauche, quand la barre latérale ne la prend pas */
  --tz-coque-gouttiere: var(--tz-espace-4);                      /* marges latérales du contenu */
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  background: var(--tz-fond);
}

.tz-coque-avec-demo {
  --tz-coque-zone-haut: 0px;
}

.tz-coque-corps {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* --- Bandeau de démonstration : capsule violette discrète, au-dessus de tout le reste --- */

.tz-coque-demo {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: center;
  gap: var(--tz-espace-2);
  max-width: calc(100% - 2 * var(--tz-coque-marge));
  margin: calc(var(--tz-zone-haut) + var(--tz-espace-2)) var(--tz-coque-marge) 0;
  padding: var(--tz-espace-1) var(--tz-espace-4);
  border: 1px solid var(--tz-verre-bord);
  border-radius: var(--tz-rayon-capsule);
  /* La teinte repose sur le verre fort : le texte violet y tient le contraste AA. */
  background: linear-gradient(var(--tz-violet-fond), var(--tz-violet-fond)), var(--tz-verre-fort);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  color: var(--tz-violet-texte);
  font-size: var(--tz-taille-note);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* --- Barre latérale : verre flottant, grands rayons --- */

.tz-barre {
  /* Formes concentriques : les entrées prennent le rayon de la barre moins sa marge (rayon-xl − espace-3). */
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--tz-espace-3);
  width: var(--tz-largeur-barre);
  min-height: 0;
  margin: calc(var(--tz-coque-zone-haut) + var(--tz-coque-marge)) 0 calc(var(--tz-zone-bas) + var(--tz-coque-marge)) calc(var(--tz-zone-gauche) + var(--tz-coque-marge));
  padding: var(--tz-espace-3);
  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);
  transition: margin-left var(--tz-duree-lente) var(--tz-courbe), opacity var(--tz-duree) var(--tz-courbe), visibility 0s;
}

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

.tz-barre-nom {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--tz-taille-titre-2);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* --- Recherche globale et sa liste surgissante --- */

.tz-barre-recherche {
  position: relative;
  flex: none;
}

.tz-barre-surgissant {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--tz-espace-2));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: min(26rem, 60vh);
  max-height: min(26rem, 60dvh);
  padding: calc(var(--tz-rayon-l) - var(--tz-rayon-m));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tz-verre-bord);
  border-radius: var(--tz-rayon-l);
  background: var(--tz-verre-fort);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  box-shadow: var(--tz-verre-ombre);
  transform-origin: top center;
  animation: tz-coque-surgir var(--tz-duree) var(--tz-courbe);
}

.tz-barre-resultats {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tz-barre-resultat {
  display: flex;
  align-items: center;
  gap: var(--tz-espace-3);
  min-height: var(--tz-cible);
  padding: var(--tz-espace-2) var(--tz-espace-3);
  border-radius: var(--tz-rayon-m);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: background-color var(--tz-duree) var(--tz-courbe), transform var(--tz-duree) var(--tz-courbe);
}

/* Le focus reste dans le champ : le résultat choisi au clavier porte l'anneau de focus. */
.tz-barre-resultat[aria-selected="true"] {
  outline: 3px solid var(--tz-focus);
  outline-offset: -3px;
  background: var(--tz-accent-fond);
}

.tz-barre-resultat-icone {
  display: grid;
  flex: none;
  color: var(--tz-texte-2);
}

.tz-barre-resultat-textes {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.tz-barre-resultat-titre {
  font-size: var(--tz-taille-annexe);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.tz-barre-resultat-sous-titre {
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-note);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.tz-barre-resultats-etat {
  padding: var(--tz-espace-3);
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-annexe);
  text-align: center;
}

/* --- Menu : groupes et entrées --- */

.tz-barre-menu {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--tz-espace-4);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tz-barre-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-1);
}

/* Titre de groupe discret : petit, en gris, aligné sur le texte des entrées. */
.tz-barre-groupe-titre {
  padding: 0 var(--tz-espace-3);
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-note);
  font-weight: 600;
  line-height: 1.3;
}

.tz-barre-liste {
  display: flex;
  flex-direction: column;
  gap: calc(var(--tz-espace-1) / 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tz-barre-entree {
  display: flex;
  align-items: center;
  gap: var(--tz-espace-3);
  min-height: var(--tz-cible);
  padding: var(--tz-espace-2) var(--tz-espace-3);
  border-radius: calc(var(--tz-rayon-xl) - var(--tz-espace-3));
  color: var(--tz-texte);
  font-size: var(--tz-taille-corps);
  line-height: 1.25;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: background-color var(--tz-duree) var(--tz-courbe), transform var(--tz-duree) var(--tz-courbe);
}

.tz-barre-entree > .tz-icone {
  color: var(--tz-accent-texte);
}

.tz-barre-entree-titre {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Entrée active : la graisse dit la position, la teinte légère la confirme. */
.tz-barre-entree[aria-current="page"] {
  background: var(--tz-accent-fond);
  color: var(--tz-accent-texte);
  font-weight: 600;
}

/* L'anneau de focus reste à l'intérieur : la liste qui défile rognerait ce qui dépasse. */
.tz-barre-entree:focus-visible,
.tz-barre-compte-bouton:focus-visible {
  outline-offset: -3px;
}

.tz-barre-pastille {
  flex: none;
  min-width: calc(var(--tz-espace-5) + var(--tz-espace-1));
  padding: calc(var(--tz-espace-1) / 2) var(--tz-espace-2);
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-accent);
  color: var(--tz-sur-accent);
  font-size: var(--tz-taille-note);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: center;
}

/* --- Compte, en bas de la barre --- */

/* Séparateur fin, en retrait des bords de la barre (il ne court que sur la largeur du contenu). */
.tz-barre-compte {
  flex: none;
  padding-top: var(--tz-espace-2);
  border-top: 1px solid var(--tz-separateur);
}

.tz-barre-compte > .tz-menu {
  display: flex;
  width: 100%;
}

.tz-barre-compte-bouton {
  display: flex;
  align-items: center;
  gap: var(--tz-espace-3);
  width: 100%;
  min-height: calc(var(--tz-cible) + var(--tz-espace-2));
  padding: var(--tz-espace-2) var(--tz-espace-3) var(--tz-espace-2) var(--tz-espace-2);
  border-radius: calc(var(--tz-rayon-xl) - var(--tz-espace-3));
  color: var(--tz-texte);
  text-align: start;
  touch-action: manipulation;
  transition: background-color var(--tz-duree) var(--tz-courbe), transform var(--tz-duree) var(--tz-courbe);
}

.tz-barre-compte-bouton > .tz-icone {
  color: var(--tz-texte-2);
}

.tz-barre-compte-bouton[aria-expanded="true"] {
  background: var(--tz-neutre-fond);
}

.tz-barre-compte-embleme {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--tz-cible) - var(--tz-espace-2));
  height: calc(var(--tz-cible) - var(--tz-espace-2));
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-neutre-fond);
  color: var(--tz-texte-2);
}

.tz-barre-compte-textes {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.tz-barre-compte-email {
  overflow: hidden;
  font-size: var(--tz-taille-annexe);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tz-barre-compte-role {
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-note);
  line-height: 1.3;
}

/* --- Zone de contenu et barre du haut --- */

.tz-coque-zone {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Barre du haut : capsule de verre posée sur le contenu, qui défile dessous. Visible sur écran étroit,
   ou quand la barre latérale est repliée. Verre fort : le titre reste lisible quel que soit le contenu dessous. */
.tz-coque-haut {
  position: absolute;
  z-index: 10;
  top: calc(var(--tz-coque-zone-haut) + var(--tz-coque-marge));
  right: calc(var(--tz-zone-droite) + var(--tz-coque-marge));
  left: calc(var(--tz-zone-gauche) + var(--tz-coque-marge));
  display: none;
  align-items: center;
  gap: var(--tz-espace-2);
  height: var(--tz-coque-haut);
  padding: 0 var(--tz-espace-5) 0 var(--tz-espace-1);
  border: 1px solid var(--tz-verre-bord);
  border-radius: var(--tz-rayon-capsule);
  background: var(--tz-verre-fort);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  box-shadow: var(--tz-verre-ombre);
}

.tz-coque-haut-titre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--tz-taille-corps);
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le contenu défile dans sa zone ; ses marges tiennent compte des bords, des zones sûres et de la barre du haut. */
.tz-contenu {
  flex: 1 1 auto;
  min-height: 0;
  padding:
    calc(var(--tz-coque-zone-haut) + var(--tz-coque-degagement) + var(--tz-espace-6))
    calc(var(--tz-zone-droite) + var(--tz-coque-gouttiere))
    calc(var(--tz-zone-bas) + var(--tz-espace-7))
    calc(var(--tz-coque-zone-gauche) + var(--tz-coque-gouttiere));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  /* Un élément qui reçoit le focus ne se cache pas sous la barre du haut. */
  scroll-padding-top: calc(var(--tz-coque-zone-haut) + var(--tz-coque-degagement) + var(--tz-espace-3));
}

/* Le contenu ne reçoit le focus que par script (aucun titre dans la page) : pas d'anneau autour de l'écran entier. */
.tz-contenu:focus,
.tz-contenu:focus-visible {
  outline: none;
}

.tz-contenu-cadre {
  width: 100%;
  max-width: var(--tz-largeur-contenu);
  margin-inline: auto;
}

.tz-coque-voile {
  display: none;
}

/* --- Écrans de démarrage : attente et erreur, centrés --- */

.tz-demarrage {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  min-height: 0;
  padding: calc(var(--tz-zone-haut) + var(--tz-espace-6)) calc(var(--tz-zone-droite) + var(--tz-espace-4)) calc(var(--tz-zone-bas) + var(--tz-espace-6)) calc(var(--tz-zone-gauche) + var(--tz-espace-4));
}

.tz-demarrage:focus,
.tz-demarrage:focus-visible,
.tz-demarrage .tz-etat-titre:focus {
  outline: none;
}

/* --- Largeurs --- */

@media (min-width: 600px) {
  .tz-coque {
    --tz-coque-gouttiere: var(--tz-espace-6);
  }
}

@media (min-width: 1200px) {
  .tz-coque {
    --tz-coque-gouttiere: var(--tz-espace-7);
  }
}

/* Écran large, barre repliée : elle glisse hors de l'écran, la barre du haut prend le relais. */
@media (min-width: 900px) {
  .tz-coque-repliee {
    --tz-coque-degagement: calc(var(--tz-coque-marge) + var(--tz-coque-haut));
    --tz-coque-zone-gauche: var(--tz-zone-gauche);
  }

  .tz-coque-repliee .tz-barre {
    margin-left: calc(-1 * var(--tz-largeur-barre));
    opacity: 0;
    visibility: hidden;
    transition: margin-left var(--tz-duree-lente) var(--tz-courbe), opacity var(--tz-duree) var(--tz-courbe), visibility 0s var(--tz-duree-lente);
  }

  .tz-coque-repliee .tz-coque-haut {
    display: flex;
  }
}

/* Écran étroit (iPad en écran partagé, téléphone) : la barre latérale devient un tiroir posé sur un voile. */
@media (max-width: 899.98px) {
  .tz-coque {
    --tz-coque-degagement: calc(var(--tz-coque-marge) + var(--tz-coque-haut));
    --tz-coque-zone-gauche: var(--tz-zone-gauche);
  }

  .tz-coque-haut {
    display: flex;
  }

  .tz-barre {
    position: absolute;
    z-index: 30;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(var(--tz-largeur-barre), calc(100% - var(--tz-zone-gauche) - 2 * var(--tz-coque-marge) - var(--tz-cible)));
    background: var(--tz-verre-fort);
    visibility: hidden;
    transform: translateX(calc(-100% - var(--tz-zone-gauche) - 2 * var(--tz-coque-marge)));
    transition: transform var(--tz-duree-lente) var(--tz-courbe), visibility 0s var(--tz-duree-lente);
  }

  .tz-coque-tiroir-ouvert .tz-barre {
    visibility: visible;
    transform: none;
    transition: transform var(--tz-duree-lente) var(--tz-courbe), visibility 0s;
  }

  .tz-coque-voile {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: block;
    background: var(--tz-voile);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tz-duree) var(--tz-courbe), visibility 0s var(--tz-duree);
  }

  .tz-coque-tiroir-ouvert .tz-coque-voile {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--tz-duree) var(--tz-courbe), visibility 0s;
  }
}

/* --- Toucher et pointeur --- */

.tz-barre-entree:active,
.tz-barre-resultat:active,
.tz-barre-compte-bouton:active {
  background: var(--tz-neutre-fond);
  transform: scale(0.97);
}

@media (hover: hover) {
  .tz-barre-entree:hover,
  .tz-barre-resultat:hover,
  .tz-barre-compte-bouton:hover {
    background: var(--tz-neutre-fond);
  }

  .tz-barre-entree[aria-current="page"]:hover,
  .tz-barre-resultat[aria-selected="true"]:hover {
    background: var(--tz-accent-fond);
  }
}

/* --- Préférences d'accessibilité --- */

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

@media (prefers-reduced-motion: reduce) {
  .tz-barre-surgissant {
    animation: none;
  }

  .tz-barre-entree:active,
  .tz-barre-resultat:active,
  .tz-barre-compte-bouton:active {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .tz-barre,
  .tz-coque-haut,
  .tz-barre-surgissant,
  .tz-coque-demo {
    border-color: var(--tz-separateur-fort);
  }

  .tz-barre-entree[aria-current="page"] {
    box-shadow: inset 0 0 0 2px var(--tz-accent-texte);
  }
}

/* Couleurs imposées par le système : les fonds disparaissent, l'entrée active garde un contour. */
@media (forced-colors: active) {
  .tz-barre-entree[aria-current="page"] {
    outline: 2px solid;
    outline-offset: -2px;
  }
}