/* PROTOTYPE JETABLE — styles communs : barre de contrôle du prototype et faux agenda. */

html, body { margin: 0; height: 100%; overflow: hidden; }
#app { height: 100vh; }

/* === Barre de contrôle (hors design évalué) === */
#proto-barre {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2147483000;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 28px); flex-wrap: nowrap; justify-content: center;
  padding: 6px 10px; border-radius: 14px; background: #111; color: #eee;
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 0 2px #fde047;
}
#proto-barre.replie .pb-detail { display: none; }
#proto-barre .pb-detail { display: flex; gap: 10px; flex-wrap: wrap; }
#proto-barre .pb-groupe { display: flex; align-items: center; gap: 3px; }
#proto-barre .pb-titre { color: #fde047; margin-right: 3px; }
#proto-barre .pb-label { padding: 0 8px; white-space: nowrap; }
#proto-barre .pb-label em { color: #aaa; font-style: normal; }
#proto-barre button {
  font: inherit; color: #eee; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 6px;
  padding: 4px 7px; cursor: pointer;
}
#proto-barre button:hover { background: #3a3a3a; }
#proto-barre button.on { background: #fde047; color: #111; border-color: #fde047; }

/* === Faux agenda : simule un site tiers (Doctolib, MonDocteur, Maiia) dans la webview === */
.faux-agenda {
  height: 100%; display: flex; flex-direction: column; background: #fff; color: #1f2937;
  font: 13px/1.3 Arial, Helvetica, sans-serif; overflow: hidden;
}
.fa-barre { color: #fff; padding: 10px 16px; display: flex; gap: 8px; align-items: center; }
.fa-sep { opacity: .5; }
.fa-barre-droite { margin-left: auto; opacity: .9; }
.fa-outils { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.fa-outils button, .fa-outils input { font: inherit; border: 1px solid #d1d5db; background: #fff; border-radius: 3px; padding: 4px 10px; }
.fa-outils input { width: 220px; }
.fa-outils .fa-primaire { margin-left: auto; color: #fff; border: 0; }
.fa-grille { flex: 1; overflow: auto; display: grid; grid-template-columns: 56px repeat(5, 1fr); grid-auto-rows: 44px; }
.fa-entete { position: sticky; top: 0; background: #fff; border-bottom: 2px solid #e5e7eb; font-weight: bold; padding: 8px; z-index: 1; }
.fa-entete.fa-auj { color: #107aca; }
.fa-heure { color: #6b7280; font-size: 11px; padding: 4px; border-bottom: 1px solid #f3f4f6; }
.fa-cellule { border-left: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; padding: 2px; }
.fa-rdv { height: 100%; box-sizing: border-box; background: #eff6ff; border-left: 3px solid #107aca; padding: 2px 5px; font-size: 11px; overflow: hidden; display: flex; flex-direction: column; }
.fa-rdv span { color: #6b7280; }
.fa-bloque { background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 5px, #e5e7eb 5px, #e5e7eb 10px); border-left-color: #9ca3af; color: #6b7280; }
.fa-maintenant { background: #ecfdf5; border-left-color: #10b981; color: #047857; font-weight: bold; }