/* Awoui — l'app installée, en surimpression des contrôles de fenêtre.
   Feuille chargée par les quatre partials/head.html, avec un attribut media
   qui ne correspond qu'à ce mode : ailleurs, elle ne bloque rien et ne
   s'applique pas. Le manifest le déclare (display_override :
   window-controls-overlay) ; le visiteur l'active depuis la barre de son app,
   Chromium retient son choix. La barre de titre du système disparaît alors,
   l'en-tête Awoui monte jusqu'au bord de la fenêtre, et seuls les boutons de
   la fenêtre restent, dessinés par-dessus dans un coin, sur un fond de la
   couleur theme-color — que js/installer.js aligne sur le thème effectif.
   Feuille séparée, comme langue.css : rien à ajouter aux feuilles partagées,
   et une URL neuve pour le CDN. Le pourquoi : deploy/installer.md. */
@media (display-mode: window-controls-overlay) {

  /* L'en-tête devient la poignée de la fenêtre… */
  .nav { app-region: drag; -webkit-app-region: drag; }

  /* …sauf ce qui se clique : une zone déplaçable ne reçoit aucun clic. */
  .nav a, .nav button, .nav .drop, .nav .lang-drop, .nav .mobile-menu {
    app-region: no-drag; -webkit-app-region: no-drag;
  }

  /* Les boutons de la fenêtre occupent un coin — à droite sous Windows, à
     gauche sous macOS. La barre reste centrée comme la page dessous, mais ne
     s'étend jamais sous eux : sa largeur est bornée des deux côtés, par
     symétrie. env(titlebar-area-*) n'existe que dans ce mode ; les replis
     valent « toute la fenêtre » et rendent alors la formule inerte. 100vw
     compte la barre de défilement : les 24 px en moins l'absorbent. */
  header.nav .nav-in {
    max-width: min(var(--wrap),
                   calc(100vw - 2 * env(titlebar-area-x, 0px) - 24px),
                   calc(2 * (env(titlebar-area-x, 0px) + env(titlebar-area-width, 100vw)) - 100vw - 24px));
  }
}