/* LA LIGNE LOCALE — le retour du geste, dans le Playground.

   POURQUOI ELLE EXISTE. L'artiste a demandé une zone pour les alertes, ailleurs
   que le header, « avec une granularité pour ne pas saturer ». La voix GLOBALE
   (`#avis`, `src/ui/playground.css:113-164`) porte ce qui engage la séance :
   `erreur` et la panne. Ce qui répond à un doigt posé sur un bouton — une
   confirmation, une attente, un avertissement, une information — se dit ici, au
   pied du geste.

   AUCUNE COULEUR N'EST INVENTÉE. Toutes viennent de `src/ui/jetons.css` :
     --filet        jetons.css:25
     --accent       jetons.css:31
     --accent-soft  jetons.css:31
     --doux         jetons.css:30
     --doux2        jetons.css:30
     --e2, --e3     jetons.css:9
     --h-controle   jetons.css:12
     --r2           jetons.css:11
     --t-aide       jetons.css:19
     --ombre        jetons.css:33

   LA POSITION. Panneau OUVERT, la ligne est au pied du panneau, là où sont les
   gestes (`src/ui/controls.js:149-160`, `.barre-pied` `playground.css:78`) :
   même largeur que le panneau (344px, `playground.css:31`). Panneau FERMÉ, la
   galerie occupe le coin bas-gauche (`playground.css:250`) : la ligne remonte
   alors sous la bande du header, à gauche, où rien ne la recouvre. */
.ligne {
  position: fixed;
  left: var(--e3);
  bottom: var(--e3);
  width: calc(344px - var(--e3) * 2);
  max-width: 92vw;
  z-index: 3;
  padding: var(--e2) var(--e3);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r2);
  color: var(--accent);
  font-size: var(--t-aide);
  line-height: 1.45;
  text-wrap: pretty;
  box-shadow: var(--ombre);
  pointer-events: none;
}
.ligne[hidden] { display: none; }

body:not(.barre-ouverte) .ligne {
  bottom: auto;
  top: calc(var(--e3) + var(--h-controle) + var(--e2));
  width: auto;
  max-width: min(56vw, 420px);
}

/* LES QUATRE CLASSES DE LA LIGNE. L'`erreur` n'y vient JAMAIS : elle est portée
   par la voix globale (`playground.css:133-140`), et `zoneDe`
   (`src/app/voix-visibilite.js`) le garantit. */
.ligne.avertissement { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ligne.attente { border-color: var(--filet); color: var(--doux); }
.ligne.confirmation { border-color: var(--accent); color: var(--accent); }
.ligne.information { border-color: var(--filet); color: var(--doux2); }