/*
 * Ce que l'appli ajoute a la charte de la page web (charte.css, generee
 * depuis src/ par tools/generer-appli.js). Rien ici ne redefinit la charte :
 * couleurs, boutons, encadres, grille des souhaits, carte de score, tableaux
 * et fiche du jeu viennent tous de la page.
 */

/* L'encoche et la barre d'etat des telephones. */
body { padding-top: env(safe-area-inset-top); padding-bottom: calc(32px + env(safe-area-inset-bottom)); }

/* Six menus au lieu des quatre de la page : ils passent sur deux lignes. */
.onglets.appli { flex-wrap: wrap; }
.onglets.appli .onglet { flex: 1 1 28%; }

/* Les champs de saisie, a l'image de #filtre (styleGrilleSouhaits_). */
.champ, input[type=number] {
  display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 4px 0 8px;
  border: 1px solid rgba(128,128,128,.5); border-radius: 8px; font: inherit;
  background: transparent; color: inherit;
}
.btn.outil div.sous { margin: 2px 0 0; }

/* Les listes des onglets modo (presence, membre, bons...) : une ligne, un geste. */
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; font-size: .9rem;
  padding: 8px 0; border-bottom: 1px solid rgba(128,128,128,.2); }
.ligne span { flex: 1 1 60%; }
.ligne button { width: auto; margin: 0; padding: 8px 12px; }
.ligne input[type=range] { flex: 1 1 40%; }
button.petit { width: auto; display: inline-block; margin: 4px 6px 4px 0; padding: 7px 12px; font-size: .85rem; }

/* Saisie du butin : la grille de la page modo, un champ sous chaque objet. */
.grille .carte input { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 6px; text-align: center;
  border: 1px solid rgba(128,128,128,.5); border-radius: 6px; background: transparent; color: inherit; font: inherit; }

/* Barres des criteres (classement modo detaille, simulateur). */
.part { margin: 6px 0; font-size: .85rem; }
.barre { height: 7px; border-radius: 99px; background: rgba(128,128,128,.22); overflow: hidden; margin-top: 3px; }
.barre span { display: block; height: 100%; border-radius: 99px; background: var(--violet-clair); }
.rang-sim { font-size: 1.1rem; font-weight: 700; }