/* ══════════════════════════════════════════════════════════════════════════
   CSS de l'onglet « portail » — habillage suite (variables --bf-*)
   Tout est préfixé .pt- pour rester local à cet onglet.
   ══════════════════════════════════════════════════════════════════════════ */

.pt-panels { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.pt-panel { flex: 1; min-width: 260px; margin-bottom: 0; }
.pt-h {
  font-family: var(--bf-titre); font-size: 1rem; color: var(--bf-brun);
  font-weight: 700; margin: 0 0 6px;
}
.pt-help { font-size: .82rem; color: var(--bf-texte-doux); margin: 0 0 14px; line-height: 1.5; }

.pt-ctrl { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.pt-ctrl label { font-size: .82rem; color: var(--bf-texte-doux); font-weight: 700; }
.pt-row { display: flex; align-items: center; gap: 10px; }
.pt-row input[type=range] { flex: 1; accent-color: var(--bf-accent); }
.pt-val {
  background: var(--bf-creme-clair); border: 1px solid var(--bf-bord);
  border-radius: 8px; padding: 3px 10px; font-weight: 700;
  color: var(--bf-accent); font-size: .95rem; min-width: 54px; text-align: center;
}
.pt-unit { font-size: .78rem; color: var(--bf-texte-pale); white-space: nowrap; }

.pt-shapes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pt-shape-btn {
  padding: 8px 15px; border: 2px solid var(--bf-bord); border-radius: 999px;
  cursor: pointer; background: var(--bf-carte); font-size: .82rem;
  color: var(--bf-texte-doux); font-family: inherit; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.pt-shape-btn:hover { border-color: var(--bf-accent); }
.pt-shape-btn.active { background: var(--bf-accent); border-color: var(--bf-accent); color: #fff; }
.pt-desc { font-size: .84rem; color: var(--bf-texte-doux); margin: 10px 0 0; line-height: 1.55; }

.pt-infobar {
  background: var(--bf-carte); border: 1px solid var(--bf-bord-doux);
  border-radius: 12px; padding: 12px 18px; display: flex; flex-wrap: wrap;
  gap: 22px; font-size: .86rem; margin-bottom: 14px; align-items: center;
  color: var(--bf-texte-doux);
}
.pt-infobar b { color: var(--bf-accent); }

.pt-canvas {
  display: block; width: 100%; max-width: 1000px; margin: 0 auto 14px;
  border-radius: 12px; box-shadow: 0 2px 10px var(--bf-ombre);
  background: var(--bf-carte); border: 1px solid var(--bf-bord-doux);
}

.pt-table {
  width: 100%; border-collapse: collapse; background: var(--bf-carte);
  border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px var(--bf-ombre);
  font-size: .82rem;
}
.pt-table th {
  background: var(--bf-brun); color: var(--bf-creme);
  padding: 10px 6px; text-align: center; font-family: var(--bf-titre); font-weight: 700;
}
.pt-table td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--bf-bord-doux); color: var(--bf-texte); }
.pt-table tr:nth-child(even) td { background: var(--bf-creme-clair); }
.pt-table tr.pt-hl td { background: color-mix(in srgb, var(--bf-accent) 14%, var(--bf-carte)) !important; font-weight: 700; }
.pt-badge { font-size: .68rem; padding: 1px 8px; border-radius: 10px; margin-left: 5px; }
.pt-bc { background: color-mix(in srgb, var(--bf-olive) 25%, transparent); color: var(--bf-olive-fonce); }
.pt-bs { background: color-mix(in srgb, var(--bf-rouge) 18%, transparent); color: var(--bf-rouge); }

@media (max-width: 600px) {
  .pt-infobar { gap: 12px; font-size: .8rem; }
}