/* ==========================================================================
   funact — barre de navigation et tiroir de menu
   Feuille du seul composant pose par nav.js. Separee de theme.css parce que
   results.html ne charge PAS theme.css : cette page porte ses propres tokens et
   sa propre mise en page, et theme.css y ecraserait le corps, les champs et les
   listes deroulantes de sa barre d'outils. Elle a pourtant besoin du tiroir.

   Ne depend donc que de neuf tokens, tous definis aussi bien par theme.css que
   par results.html : --surface, --surface-2, --ink, --ink-dim, --line,
   --line-strong, --accent, --on-accent, --radius-sm, --shadow-lg. N'en ajouter
   aucun autre sans verifier les deux — c'est exactement l'oubli qui a laisse
   les boutons de langue et de theme sans style sur results.html.
   ========================================================================== */

/* --- Zone sure de l'ecran : encoches et barres systeme ---------------------
   Android 15+ impose le bord-a-bord, et le wrap Capacitor vise le SDK 36 : la
   page est dessinee SOUS l'horloge en haut et SOUS la barre de navigation en
   bas. Le plugin SystemBars de Capacitor replie lui-meme la WebView sous les
   barres — mais seulement pour les pages qui ne demandent PAS viewport-fit=
   cover. Celles qui le demandent (index.html et results.html, pour que leur
   en-tete collante aille jusqu'au bord) recoivent a la place les retraits et
   doivent les consommer elles-memes, sinon le hamburger passe derriere
   l'horloge et le dernier bouton d'une liste derriere la barre du bas.

   Une marge fixe ne peut pas convenir : le retrait vaut 0 sur PC, ~24px sous
   une barre gestuelle, ~48px sous les trois boutons Android, et change encore
   en paysage ou selon l'encoche. On lit donc la valeur reelle, de deux sources
   pour un seul jeton :
     --safe-area-inset-*    injecte par SystemBars (Capacitor le remet a 0
                            quand c'est lui qui replie la vue : jamais de
                            double marge) ;
     env(safe-area-inset-*) le cas d'un vrai navigateur mobile ou d'une PWA.

   Ici plutot que dans theme.css pour la raison donnee en tete de fichier :
   results.html ne charge pas theme.css et a pourtant besoin des deux. */
:root {
  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

/* --- Barre de navigation ---------------------------------------------------
   Posee par nav.js en tete de .card. Le retour nomme a gauche, le menu a
   droite ; le <h1> de la page reste juste en dessous et forme le second
   maillon du fil. Voir l'en-tete de nav.js pour le pourquoi de ce decoupage.

   Les marges negatives font mordre la barre sur le padding de 32px de la
   carte : la zone tactile du retour et celle du menu vont alors jusqu'au bord
   de la carte, la ou le pouce les cherche, sans que le trait du bas ne
   s'arrete a 32px des cotes. */
.app-bar {
  display:flex; align-items:center; gap:12px;
  margin:-32px -32px 16px; padding:6px 20px; min-height:44px;
  border-bottom:1px solid var(--line);
}
/* La barre reste en place meme sans retour a afficher (vue racine de app.html,
   ou showMenu appelle setBack(null)) : la page ne saute pas d'une vue a
   l'autre. C'est [hidden] sur l'ancre, pas le retrait de l'ancre.

   Le menu est le PREMIER element de la barre (voir mount dans nav.js) : a
   gauche, du meme cote que le tiroir qu'il ouvre. La fleche vient apres lui.
   Aucune marge automatique n'intervient plus — c'est l'ordre du document qui
   place les deux, et il ne depend pas du nombre d'elements visibles. */
.app-bar[hidden], .app-bar-back[hidden], .app-bar-menu[hidden] { display:none; }

.app-bar-back {
  display:inline-flex; align-items:center; gap:6px; min-width:0;
  /* 44px de haut avec le min-height de la barre : la cible tactile tient la
     recommandation, sans que le libelle ait l'air espace. */
  padding:10px 8px 10px 0; margin-left:-4px;
  color:var(--ink-dim); text-decoration:none; font-size:.85rem; cursor:pointer;
}
.app-bar-back:hover { color:var(--ink); }
.app-bar-arrow { flex:none; font-size:1rem; line-height:1; }
/* Un nom d'evenement peut etre long : il se coupe proprement plutot que de
   pousser le menu hors de la carte. C'est le seul endroit du fil ou l'on
   tronque, et il reste lisible parce qu'il est seul sur sa moitie de ligne. */
.app-bar-back-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.app-bar-menu {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin:0 2px 0 -8px; padding:0;
  border:none; border-radius:var(--radius-sm); background:transparent;
  color:var(--ink-dim); cursor:pointer;
}
.app-bar-menu:hover { background:var(--surface-2); color:var(--ink); }

/* --- Tiroir de navigation --------------------------------------------------
   Un <dialog> natif, comme la boite de confirmation (voir confirm.js) : le
   navigateur fournit le piege a focus, la fermeture a Echap, l'inertie du
   document derriere pour les lecteurs d'ecran, et la couche superieure qui
   passe au-dessus des cartes MapLibre.

   Le dialog occupe tout l'ecran et sert de zone de clic-pour-fermer ; c'est
   .nav-panel qui est le tiroir visible, colle a droite. */
.nav-drawer {
  width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
  margin:0; padding:0; border:none; background:transparent;
  /* Sort par la GAUCHE, comme le rail dont il est le pendant sur les pages qui
     n'en ont pas, et comme le bouton qui l'ouvre. */
  justify-content:flex-start;
}
/* Le display est porte par [open], JAMAIS par .nav-drawer seul. Une regle
   d'auteur bat toujours celle du navigateur, quelle que soit la specificite :
   un `display:flex` pose sur la classe ecraserait `dialog:not([open])
   { display:none }` de la feuille UA, et le tiroir resterait affiche en plein
   ecran une fois ferme. C'est le piege classique du <dialog> stylé.
   L'ancre est a droite : le panneau sort du bord ou se trouve le bouton. */
.nav-drawer[open] { display:flex; }

/* --- Le tiroir glisse, dans les DEUX sens ----------------------------------
   Il entrait par un decalage de 12px en fondu, et sortait sans rien : un
   panneau qui s'evapore la ou il devrait repartir par le bord est le genre de
   detail qu'on ne sait pas nommer mais qui fait "site web". Un tiroir natif
   parcourt toute sa largeur a l'aller comme au retour, et le pouce qui l'a
   ouvert doit pouvoir le regarder repartir d'ou il est venu.

   La sortie est plus courte que l'entree (voir les jetons dans motion.css) :
   ce qui arrive se suit des yeux, ce qui part n'a plus a etre lu.

   COMMENT ON ANIME LA FERMETURE D'UN <dialog>, qui est tout sauf evident :
   a l'appel de close(), le navigateur repasse l'element a display:none et le
   sort de la couche superieure immediatement — l'element a donc deja disparu
   quand la transition devrait commencer. Les deux proprietes discretes
   (display et overlay) doivent etre explicitement transitionnees en
   allow-discrete pour qu'il reste visible le temps de partir. Symetriquement,
   @starting-style donne a l'ouverture un etat de depart, sans quoi il n'y a
   rien a interpoler depuis et le panneau apparaitrait deja en place.

   Un navigateur qui ignore ces regles (Firefox ne transitionne pas overlay)
   retrouve exactement le comportement precedent : apparition et disparition
   seches. Rien ne casse, la jointure est seulement moins soignee.

   nav.js retarde le retrait du <dialog> du DOM jusqu'a la fin de cette
   transition — l'enlever a l'evenement close, comme il le faisait, couperait
   l'animation a sa premiere image. */
.nav-drawer {
  transition:
    display var(--dur-exit, 150ms) allow-discrete,
    overlay var(--dur-exit, 150ms) allow-discrete;
}
.nav-drawer::backdrop {
  background:rgba(16,16,28,0);
  transition:
    background-color var(--dur-exit, 150ms) ease,
    display var(--dur-exit, 150ms) allow-discrete,
    overlay var(--dur-exit, 150ms) allow-discrete;
}
.nav-drawer[open]::backdrop { background:rgba(16,16,28,.45); }

.nav-panel {
  transform:translateX(-100%);
  transition:transform var(--dur-exit, 150ms) var(--ease-emphasized, cubic-bezier(.32,.72,0,1));
}
.nav-drawer[open] .nav-panel {
  transform:none;
  transition-duration:var(--dur-enter, 220ms);
}

@starting-style {
  .nav-drawer[open]::backdrop { background:rgba(16,16,28,0); }
  .nav-drawer[open] .nav-panel { transform:translateX(-100%); }
}

/* Le mouvement disparait, la fonction reste : le tiroir s'ouvre et se ferme
   sechement, ce qui est precisement ce qu'on demande ici. */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer::backdrop, .nav-panel { transition:none; }
  .nav-panel { transform:none; }
}

.nav-panel {
  display:flex; flex-direction:column; gap:4px;
  width:min(320px, 86vw); height:100%; overflow-y:auto;
  /* Le tiroir fait toute la hauteur de l'ecran : sur telephone sa croix se
     cale sinon derriere l'horloge, et la deconnexion — poussee tout en bas par
     .nav-foot — derriere la barre de navigation. */
  padding:calc(16px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));
  background:var(--surface); border-right:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}

/* La croix passe a gauche avec le reste : elle ferme un panneau qui sort de ce
   cote-la, et le pouce qui vient d'appuyer sur le hamburger est deja la.
   row-reverse plutot que de reordonner le JS — l'ordre du DOM garde la croix
   apres l'adresse du compte, ce qui est le bon ordre de lecture. */
.nav-head { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:12px; min-height:36px; }
/* L'adresse du compte, pas son prenom : c'est elle qui identifie la session, et
   sur un telephone partage entre benevoles c'est la seule chose a verifier
   avant de toucher a quoi que ce soit. */
.nav-who { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-dim); font-size:.78rem; }
.nav-close {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-left:-8px; padding:0;
  border:none; border-radius:var(--radius-sm); background:transparent;
  color:var(--ink-dim); cursor:pointer;
}
.nav-close:hover { background:var(--surface-2); color:var(--ink); }

.nav-links { display:flex; flex-direction:column; margin-top:8px; }
.nav-item {
  display:block; width:100%; padding:12px 10px; margin:0 -10px;
  border:none; border-radius:var(--radius-sm); background:transparent;
  color:var(--ink); font-family:inherit; font-size:.95rem; font-weight:600;
  text-align:left; text-decoration:none; cursor:pointer;
}
.nav-item:hover { background:var(--surface-2); }
.nav-item-quiet { color:var(--ink-dim); font-weight:400; font-size:.85rem; }
.nav-item-quiet:hover { color:var(--ink); }

.nav-section-title {
  margin:20px 0 8px; color:var(--ink-dim);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
/* --- Selecteurs langue et theme -------------------------------------------
   Memes classes pour les deux : l'usager choisit son theme exactement comme il
   choisit sa langue, donc les deux controles doivent se ressembler. Poses par
   i18n.js et theme.js (renderSwitcher), qui fixent eux-memes ces classes.

   Ici plutot que dans theme.css parce que le tiroir les affiche, et que
   results.html a le tiroir sans avoir theme.css. Leurs deux autres
   consommateurs — settings.html et login.html — chargent donc aussi cette
   feuille, pour une seule definition partout. */
.switch { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.switch-btn {
  padding:6px 8px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--surface); color:var(--ink-dim);
  font-family:inherit; font-size:.78rem; cursor:pointer;
}
.switch-btn:hover { border-color:var(--line-strong); color:var(--ink); }
.switch-btn.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
/* Dans le tiroir, la marge basse de .switch — calibree pour un formulaire — est
   de trop : les titres de section suffisent a aerer. */
.nav-panel .switch { margin-bottom:0; }

/* La deconnexion est poussee en bas du tiroir : c'est la seule entree qu'on ne
   veut pas voir sous le pouce au moment d'en viser une autre. */
.nav-foot { margin-top:auto; padding-top:20px; }

/* La barre suit la mise a plat de la carte sur mobile (voir le bloc
   correspondant dans theme.css, qui retire marge, coins et ombre sous 560px et
   ramene le padding de .card de 32 a 16px) : sans ca elle deborderait de la
   carte au lieu de s'arreter a ses bords. Les deux valeurs vont ensemble.
   Sans theme.css — results.html — aucune .card n'existe, et cette regle ne
   designe rien. */
@media (max-width: 560px) {
  .app-bar { margin:-16px -16px 14px; padding:6px 8px; }
}