/* bureau.css -- LE BUREAU DE « DINERS » (lot DN-08) : D1 (les restos), D2 (la fiche d'un resto), E1 (les transactions), les
 * personnes et les invitations. Charge APRES socle.css (declaree par registre.style_page). Que des var() des jetons : AUCUNE
 * couleur litterale, aucune URL. Le telephone d'abord (390 px : chaque ligne d'une grille devient une carte) ; des 640 px, la
 * grille du bureau. */

.b-page { display: flex; flex-direction: column; gap: var(--dv-px-12); }
.b-pile { display: flex; flex-direction: column; gap: var(--dv-px-12); }

/* ---- les onglets du bureau ---------------------------------------------------------------- */
.b-onglets { display: flex; flex-wrap: wrap; gap: var(--dv-px-6); }
.b-onglet { min-height: var(--m-cible); display: inline-flex; align-items: center; padding: 0 var(--dv-px-16);
  border-radius: var(--dv-px-999); border: 1px solid var(--bordure-forte); background: var(--fond); color: var(--texte);
  font-size: var(--dv-pt-14); font-weight: var(--dv-graisse-600); text-decoration: none; }
.b-onglet--actif { background: var(--primaire); border-color: var(--primaire); color: var(--texte-inverse); }

/* ---- les barres, les titres, les panneaux ------------------------------------------------- */
.b-barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dv-px-8); }
.b-barre > .b-champ { flex: 1 1 var(--m-px-168); width: auto; }
.b-titre { margin: 0; font-size: var(--dv-pt-22); min-width: 0; overflow-wrap: anywhere; }
.b-sous-titre { margin: 0; font-size: var(--dv-pt-16); }
.b-retour { min-width: var(--m-cible); min-height: var(--m-cible); display: inline-flex; align-items: center;
  justify-content: center; color: var(--primaire-fonce); border-radius: var(--dv-px-8); }
.b-panneau { display: flex; flex-direction: column; gap: var(--dv-px-10); padding: var(--dv-px-12); background: var(--fond);
  border: 1px solid var(--bordure); border-radius: var(--m-rayon); min-width: 0; }

/* ---- les formulaires ---------------------------------------------------------------------- */
.b-form { display: flex; flex-direction: column; gap: var(--dv-px-8); margin: 0; min-width: 0; }
.b-form--ligne { flex-direction: row; flex-wrap: wrap; align-items: center; }
.b-form--ligne .b-champ { flex: 1 1 var(--m-px-168); width: auto; min-width: 0; }
.b-form--ligne .btn { width: auto; }
.b-champ { min-height: var(--m-cible); height: auto; }
.b-form--ligne .b-champ--prix, .b-champ--prix { flex: 0 0 var(--m-px-80); width: var(--m-px-80); }
.b-texte { padding: var(--dv-px-8) var(--dv-px-12); resize: vertical; }
.b-etiquette { display: flex; flex-direction: column; gap: var(--dv-px-4); font-size: var(--dv-pt-12);
  font-weight: var(--dv-graisse-600); color: var(--texte-moyen); }
.b-voies-form { display: flex; flex-wrap: wrap; gap: var(--dv-px-4) var(--dv-px-12); margin: 0; padding: var(--dv-px-6) var(--dv-px-12);
  border: 1px solid var(--bordure); border-radius: var(--m-rayon); min-width: 0; }
.b-voies-form legend { padding: 0 var(--dv-px-4); font-size: var(--dv-pt-12); font-weight: var(--dv-graisse-600);
  color: var(--texte-moyen); }
.b-case { display: inline-flex; align-items: center; gap: var(--dv-px-8); min-height: var(--m-cible); font-size: var(--dv-pt-14); }
.b-case input[type="checkbox"] { width: var(--dv-px-20); height: var(--dv-px-20); margin: 0; }
.b-icone { min-width: var(--m-cible); min-height: var(--m-cible); padding: 0; display: inline-flex; align-items: center;
  justify-content: center; background: var(--fond); color: var(--primaire-fonce); border: 1px solid var(--bordure-forte);
  border-radius: var(--m-rayon); text-decoration: none; cursor: pointer; }
.b-icone:hover { background: var(--fond-survol); }
.b-icone[aria-disabled="true"], .btn[aria-disabled="true"] { cursor: default; }

/* ---- les lignes, les voies, les qui -------------------------------------------------------- */
.b-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dv-px-8); margin: 0; min-height: var(--m-cible); min-width: 0; }
.b-ligne--plat .b-nom { flex: 1 1 var(--m-px-168); min-width: 0; overflow-wrap: anywhere; }
.b-meta { color: var(--texte-doux); font-size: var(--dv-pt-12); }
.b-qui { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--dv-px-6); }
.b-qui .ic { width: var(--dv-px-16); height: var(--dv-px-16); color: var(--alerte); }
.b-voies { display: flex; flex-wrap: wrap; gap: var(--dv-px-4) var(--dv-px-10); }
.b-voie { display: inline-flex; align-items: center; gap: var(--dv-px-4); font-size: var(--dv-pt-12); color: var(--texte-moyen); }
.b-voie .ic { width: var(--dv-px-16); height: var(--dv-px-16); }
.b-lien { min-height: var(--m-cible); display: inline-flex; align-items: center; font-weight: var(--dv-graisse-600); }

/* ---- les grilles : des cartes au telephone ------------------------------------------------- */
.b-grille { width: 100%; border-collapse: collapse; background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--m-rayon); font-size: var(--dv-pt-14); }
.b-grille th { padding: var(--dv-px-8) var(--dv-px-12); text-align: left; font-size: var(--dv-pt-12);
  font-weight: var(--dv-graisse-600); color: var(--texte-moyen); background: var(--fond-doux); border-bottom: 1px solid var(--bordure); }
.b-grille td { padding: var(--dv-px-6) var(--dv-px-12); border-bottom: 1px solid var(--bordure-fine); vertical-align: middle; }
.b-num { text-align: right; font-variant-numeric: tabular-nums; }
.b-nouveau { background: var(--alerte-fond); }

@media (max-width: 639px) {
  .b-grille, .b-grille tbody, .b-grille tr, .b-grille td { display: block; width: 100%; }
  .b-grille thead { display: none; }
  .b-grille tr { padding: var(--dv-px-6) 0; border-bottom: 1px solid var(--bordure); }
  .b-grille td { display: flex; align-items: center; justify-content: space-between; gap: var(--dv-px-8);
    border-bottom: 0; text-align: left; min-width: 0; }
  .b-grille td::before { content: attr(data-label); flex: none; font-size: var(--dv-pt-12); color: var(--texte-doux); }
  .b-grille td > * { min-width: 0; }
  .b-grille .b-num { text-align: left; }
}
.b-grille [hidden] { display: none; }

/* ---- l'invitation creee -------------------------------------------------------------------- */
.b-invitation { display: grid; gap: var(--dv-px-6); margin: 0; }
.b-invitation dt { font-size: var(--dv-pt-12); font-weight: var(--dv-graisse-600); color: var(--texte-moyen); }
.b-invitation dd { margin: 0; min-width: 0; }
.b-invitation code { display: block; padding: var(--dv-px-10); background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--m-rayon); overflow-wrap: anywhere; user-select: all; }
.b-nip { font-size: var(--dv-pt-22); font-variant-numeric: tabular-nums; letter-spacing: var(--dv-px-4); }

@media (min-width: 640px) {
  .b-panneau { padding: var(--dv-px-16); }
  .b-form--ligne .b-champ { flex: 1 1 var(--m-px-200); }
}

.b-note { margin: 0; color: var(--sec); }