/* ============================================================================
   JARVICE mobile - COUCHE LANCEUR A 5 PLACES + FEUILLE DU BAS
   (chargee APRES style.css et lisibilite.css ; ne change aucune couleur).

   Barre du bas : Jarvice, Parler, Projets, Outils, Plus. 5 boutons de largeur
   egale, 56 px de haut, icone 22 px + libelle 12 px, plus aucun defilement
   horizontal. Les autres fenetres (Machine, Maison, Hegemonie, Bots,
   Reglages) montent dans une feuille posee juste au-dessus de la barre.
   ========================================================================== */

/* --- barre ---------------------------------------------------------------- */
.lanceur {
  align-items: flex-start;
  gap: 4px;
  padding: 0 8px var(--sab);
  overflow: visible;                 /* plus de defilement : 5 places fixes */
  scroll-snap-type: none;
}
.lanceur .lance-fenetre {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--lanceur-h); min-height: var(--lanceur-h);
  padding: 4px 2px;
  border-radius: 12px;
  scroll-snap-align: none;
  line-height: 1.1;
}
.lance-icone { width: 22px; height: 22px; flex: none; display: block; }
.lance-nom { font-size: var(--m-petit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lanceur .lance-fenetre { font-size: var(--m-petit); }

/* point d accent sur "Plus" : liaison perdue ou mise a jour disponible */
.lance-point {
  position: absolute; top: 7px; left: calc(50% + 4px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-clair);
  box-shadow: 0 0 0 2px var(--panneau-centre), 0 0 8px var(--glow-accent-fort);
  pointer-events: none;
}

/* --- feuille ---------------------------------------------------------------- */
.feuille-voile {
  position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--lanceur-h) + var(--sab));
  z-index: 910;
  background: rgba(3, 8, 12, .6);
  opacity: 0; transition: opacity .2s ease;
}
.feuille-voile.ouverte { opacity: 1; }

/* accueil : nombre impair de boutons rapides visibles, le dernier prend toute la largeur (app.js : completerRapides) */
.rapide.pleine { grid-column: 1 / -1; }

.feuille {
  position: fixed; left: 0; right: 0; bottom: calc(var(--lanceur-h) + var(--sab));
  z-index: 920;
  max-height: calc(100% - var(--titre-h) - var(--sat) - var(--lanceur-h) - var(--sab) - 16px);
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(8, 24, 36, .97); backdrop-filter: blur(18px);
  border: 1px solid var(--bord); border-bottom: none; border-radius: 14px 14px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(26px);
  transition: opacity .2s ease, transform .22s ease;
}
.feuille.ouverte { opacity: 1; transform: none; }
.feuille:focus { outline: none; }
.feuille-poignee { width: 38px; height: 4px; border-radius: 2px; margin: 8px auto 0; background: var(--muted-3); }
.feuille-titre {
  padding: 10px 16px 8px;
  font-family: var(--mono); font-size: var(--m-petit); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted-2);
}
.feuille-vues { display: flex; flex-direction: column; }
.feuille-libre { padding: 4px 16px 18px; }

.feuille-ligne {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; height: 56px; min-height: 56px; flex: none;
  padding: 0 60px 0 16px; text-align: left;
  background: transparent; color: var(--muted);
  border: none; border-top: 1px solid var(--bord-doux);
  cursor: pointer; transition: background .15s, color .15s;
}
.feuille-ligne:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.feuille-ligne.ouverte { color: var(--accent-clair); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.feuille-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.feuille-nom { font-size: var(--m-base); color: var(--texte); line-height: 1.25; }
.feuille-ligne.ouverte .feuille-nom { color: var(--accent-clair); }
.feuille-desc { font-size: var(--m-petit); color: var(--muted-2); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .feuille, .feuille-voile { transition: none; }
}