.cbg { --cbg-maxw: 1200px; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1c2b2b; max-width: none; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.cbg *, .cbg *::before, .cbg *::after { box-sizing: border-box; } body.cbg-fullwidth { overflow-x: hidden; overflow-x: clip; }
body.cbg-fullwidth #primary { float: none; width: auto; max-width: none; }
body.cbg-fullwidth #secondary { display: none; }
body.cbg-fullwidth .cbg { width: auto; max-width: var(--cbg-maxw); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.cbg h1 { background: #0B3B3C; color: #fff; margin: 0 0 4px; padding: 14px 18px; border-radius: 8px; font-size: 22px; }
.cbg h1 small { display: block; font-size: 13px; font-weight: normal; opacity: .85; margin-top: 2px; }
.cbg .note-demo { background: #fff8d6; border: 1px solid #e3cf5a; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin: 12px 0; }
.cbg .resume { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cbg .resume span { background: #eef3f3; border: 1px solid #cfdcdc; border-radius: 20px; padding: 5px 12px; font-size: 13.5px; }
.cbg .resume b { color: #0B3B3C; }
.cbg .legende { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 10px 0 14px; font-size: 14px; }
.cbg .legende .chip { display: inline-block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,.3); vertical-align: -3px; margin-right: 5px; }
.cbg .st-solde { background: #d43a2f; }
.cbg .st-ajour { background: #FFD814; }
.cbg .st-libre { background: #2e9e4f; }
.cbg .st-maint { background: #8d9499; }
.cbg .onglets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cbg .onglets button { border: 2px solid #0B3B3C; background: #fff; color: #0B3B3C; padding: 8px 16px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; }
.cbg .onglets button.actif { background: #0B3B3C; color: #fff; }
.cbg .zone { display: flex; gap: 18px; align-items: flex-start; justify-content: center; } .cbg .carte-wrap { flex: 0 0 auto; width: min(700px, calc(100% - 438px)); }
.cbg .carte-wrap:has(> .carte.rdc), .cbg .carte-wrap:has(> .carte.etage) { width: min(700px, calc(75vh * 77 / 153), calc(100% - 438px)); }
.cbg .carte-wrap:has(> .carte.ext) { width: min(700px, calc(75vh * 152 / 196), calc(100% - 438px)); }
.cbg .carte { position: relative; width: 100%; max-width: none; margin: 0 auto; background: #f7f9f9; border: 2px solid #0B3B3C; border-radius: 6px; container-type: inline-size; }
.cbg .carte.ext { max-width: none; }
.cbg .bloc { position: absolute; border: 1px solid rgba(0,0,0,.35); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2.6cqw; line-height: 1; color: #fff; cursor: pointer; padding: 0; overflow: hidden; }
.cbg .carte.rdc .bloc, .cbg .carte.etage .bloc { font-size: 3.4cqw; }
.cbg .bloc.st-ajour { color: #1c2b2b; }
.cbg .bloc.sel { outline: 3px solid #0B3B3C; outline-offset: 1px; z-index: 3; }
.cbg .bloc:hover { filter: brightness(1.12); }
.cbg .ctx { position: absolute; border: 1px dashed rgba(11,59,60,.35); background: rgba(11,59,60,.06); color: #0B3B3C; display: flex; align-items: center; justify-content: center; font-size: 2.2cqw; text-align: center; border-radius: 3px; padding: 2px; }
.cbg .ctx-bat { position: absolute; border: 2px solid rgba(11,59,60,.4); border-radius: 4px; }
.cbg .ctx-bat span { position: absolute; top: 2px; left: 6px; font-size: 12px; font-weight: 700; color: #0B3B3C; }
.cbg .panneau { flex: 0 1 400px; min-width: 300px; max-width: 420px; background: #fff; border: 1px solid #cfdcdc; border-radius: 8px; padding: 16px; position: sticky; top: 12px; }
.cbg .panneau h2 { margin: 0 0 2px; font-size: 20px; color: #0B3B3C; }
.cbg .panneau .sous { color: #5a6b6b; font-size: 13.5px; margin-bottom: 10px; }
.cbg .badge { display: inline-block; border-radius: 12px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; border: 1px solid rgba(0,0,0,.25); color: #fff; }
.cbg .badge.st-ajour { color: #1c2b2b; }
.cbg .panneau label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 3px; }
.cbg .panneau input, .cbg .panneau select, .cbg .panneau textarea { width: 100%; padding: 8px; border: 1px solid #b9c6c6; border-radius: 5px; font-size: 14.5px; background: #fff; }
.cbg .panneau .rangee { display: flex; gap: 10px; }
.cbg .panneau .rangee > div { flex: 1; }
.cbg .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cbg button.btn { background: #0B3B3C; color: #fff; border: none; border-radius: 6px; padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.cbg button.btn.jaune { background: #FFD814; color: #0B3B3C; }
.cbg button.btn.rouge { background: #d43a2f; }
.cbg button.btn.gris { background: #6c757d; }
.cbg .vide { color: #5a6b6b; font-style: italic; padding: 22px 6px; text-align: center; }
.cbg .recherche { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 10px; }
.cbg .recherche input, .cbg .recherche select { padding: 9px; border: 1px solid #b9c6c6; border-radius: 6px; font-size: 15px; }
.cbg .recherche input { flex: 1 1 220px; }
.cbg h2.liste-titre { color: #0B3B3C; font-size: 19px; margin: 18px 0 4px; }
.cbg table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.cbg th, .cbg td { border: 1px solid #d7e0e0; padding: 7px 9px; text-align: left; }
.cbg th { background: #0B3B3C; color: #fff; }
.cbg tbody tr { cursor: pointer; }
.cbg tbody tr:hover { background: #eef3f3; }
.cbg td .point { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); margin-right: 6px; vertical-align: -1px; }
.cbg .toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #0B3B3C; color: #fff; padding: 11px 18px; border-radius: 8px; font-size: 14.5px; box-shadow: 0 4px 18px rgba(0,0,0,.25); z-index: 99; display: none; max-width: 92vw; text-align: center; }
.cbg .porte { max-width: 420px; margin: 40px auto; background: #fff; border: 1px solid #cfdcdc; border-radius: 10px; padding: 24px; }
.cbg .porte h2 { color: #0B3B3C; margin-top: 0; }
.cbg .porte input { width: 100%; padding: 10px; border: 1px solid #b9c6c6; border-radius: 6px; font-size: 15px; margin: 6px 0 12px; }
.cbg .porte button { width: 100%; } .cbg.cbg-acces { display: flex; justify-content: center; }
.cbg.cbg-acces .porte { flex: 0 1 420px; width: 100%; margin-left: 0; margin-right: 0; }
.cbg .err { background: #fdecea; border: 1px solid #d43a2f; color: #8f231b; border-radius: 6px; padding: 9px 12px; font-size: 14px; margin-bottom: 12px; }
.cbg .quitter { text-align: right; font-size: 13px; margin-top: 6px; } .cbg .prix-note { font-size: 13.5px; color: #5a6b6b; margin: 4px 0 10px; max-width: 1120px; }
.cbg table.prix-table { max-width: 1120px; }
.cbg .prix-table td.prix-pi2, .cbg .prix-table td.prix-pot, .cbg .prix-table td.prix-unites { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cbg .prix-table tfoot td { font-weight: 700; background: #eef3f3; color: #0B3B3C; }
.cbg .prix-table tr.prix-special td { background: #f7f9f9; }
.cbg .prix-badge-hors { display: inline-block; background: #8d9499; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; vertical-align: 2px; margin-left: 6px; }
.cbg .prix-table td.nom { font-weight: 600; color: #0B3B3C; }
.cbg .prix-table tbody tr { cursor: default; }
.cbg .prix-table tbody tr:hover { background: transparent; }
.cbg .prix-table input.prix-in, .cbg .prix-table input.prix-in-garage { width: 110px; padding: 7px; border: 1px solid #b9c6c6; border-radius: 5px; font-size: 14.5px; background: #fff; }
.cbg .prix-journal { background: #eef3f3; border: 1px solid #cfdcdc; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-top: 14px; max-width: 900px; }
.cbg .prix-journal b { color: #0B3B3C; }
.cbg .prix-journal ul { margin: 6px 0 2px; padding-left: 18px; }
.cbg .prix-journal li { margin: 3px 0; }
@media (max-width: 860px) {
.cbg .zone { flex-direction: column; }
.cbg .panneau { position: static; width: 100%; max-width: none; } .cbg .carte-wrap { width: min(100%, 700px); margin: 0 auto; }
.cbg .carte-wrap:has(> .carte.rdc), .cbg .carte-wrap:has(> .carte.etage) { width: min(100%, 700px, calc(75vh * 77 / 153)); }
.cbg .carte-wrap:has(> .carte.ext) { width: min(100%, 700px, calc(75vh * 152 / 196)); }
.cbg table { font-size: 13px; }
.cbg th.c-mob, .cbg td.c-mob { display: none; }
}