/*
 * PPS Link · coque du téléphone (Housame, 29/10 : « revois le sujet proprement »). Une seule source pour les tailles, chargée après app.css.
 * - La coque (#app) est un bloc normal de la hauteur de l'écran (100dvh), pas un conteneur fixe à la taille de la fenêtre : iOS 26.0 laissait
 *   une bande vide en bas sous les conteneurs fixes de cette taille (corrigé par Apple en 26.1, évité ici dans tous les cas).
 * - Coque en colonne flexible (Housame, 29/10 : « que ça s'adapte à l'écran, pas de valeur fixe ») : la page prend la place libre, la
 *   barre du bas se pose dessous ; rien n'est calculé en pixels. La zone du geste d'accueil (safe-area) n'est comptée qu'une fois (--bas), la barre d'état une fois (--haut).
 * - App de l'écran d'accueil sur iPhone : la page commence sous la barre d'état (apple-mobile-web-app-status-bar-style = default, index.html ;
 *   couleur = theme-color, suivie par theme.js). Avec « black-translucent », iOS 26 et 27 donnaient une fenêtre plus courte de la hauteur de
 *   la barre d'état et une bande vide en bas (mesuré le 29/10 : écran 956, fenêtre 894). iOS fige ce réglage à l'ajout de l'icône.
 * - Clavier ouvert (classe « clavier », ecran-mobile.js) : la coque prend la hauteur visible (--vvh), la barre du bas se retire et la zone
 *   d'écriture se pose sur le clavier. Rien d'autre ne bouge pendant la frappe.
 */
@media (max-width:760px){
  html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
  body{position:static;width:100%}
  /* La coque est une colonne flexible : la page prend toute la place libre, la barre se pose en dessous. Aucune hauteur calculée :
     tout suit l'écran (100dvh), la barre d'état (safe-area du haut) et la zone du geste d'accueil (safe-area du bas). */
  .app,.app.no-detail{position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0;overflow:hidden;padding:env(safe-area-inset-top,0px) 0 0}
  .app[hidden]{display:none!important}
  .app>.col,.app.plein .col.main{position:relative;flex:1 1 auto;min-height:0;height:auto;top:auto;bottom:auto}
  .rail{position:relative;order:99;flex:none;left:auto;right:auto;bottom:auto;margin:6px 12px calc(10px + env(safe-area-inset-bottom,0px));z-index:20}
  .clavier .app{height:var(--vvh,100dvh)}
  .clavier .rail{display:none}
}

/* Application installée sur l'ordinateur (Windows, macOS) : plus de barre de titre (Housame, 29/10 : « en plein écran », « qu'elle s'affiche
   seulement quand je passe la souris en haut »). La page occupe toute la fenêtre ; une fine bande en haut, invisible, se déploie au survol
   (nom de l'app, et poignée pour déplacer la fenêtre). Les boutons réduire / agrandir / fermer sont dessinés par le système et restent
   visibles en haut à droite : l'en-tête de la dernière colonne leur laisse leur place. Ailleurs (navigateur, téléphone), rien ne change. */
.barre-titre{display:none}
@media (display-mode: window-controls-overlay){
  :root{--wco-droite:calc(100vw - env(titlebar-area-x,0px) - env(titlebar-area-width,100vw))}
  .barre-titre{display:flex;align-items:center;position:fixed;top:0;left:env(titlebar-area-x,0px);width:env(titlebar-area-width,100%);height:6px;overflow:hidden;
    padding-left:12px;font-size:12px;color:var(--muted);background:var(--bg);opacity:0;-webkit-app-region:drag;app-region:drag;z-index:90;user-select:none;
    transition:height .15s ease .2s,opacity .15s ease .2s;box-shadow:0 1px 0 var(--line)}
  .barre-titre:hover{height:env(titlebar-area-height,32px);opacity:1;transition-delay:.1s}
  .app,.app.no-detail{height:100vh}
  .col.detail > .head,.app.no-detail .col.main > .head,.app.plein .col.main > .head,.app.sans-detail .col.main > .head{padding-right:calc(var(--wco-droite) + 12px)}
}