:root {
  --navy: #1d3766; --orange-marque: #f47a20; --gris: #444545;
  --fond: #f4f6fa; --carte: #fff; --texte: #1f2937; --doux: #6b7280; --bord: #e5e7eb;
  --libre: #16a34a; --occupee: #2563eb; --adeb: #f97316; --nondeb: #dc2626;
  --rayon: 10px;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Poppins, system-ui, sans-serif; background: var(--fond); color: var(--texte); font-size: 14px; }
button, select, input { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 8px; padding: 8px 14px; background: var(--navy); color: #fff; }
button.second { background: #e8ecf4; color: var(--navy); }
button.danger { background: var(--nondeb); }
button:disabled { opacity: .5; cursor: default; }
input, select { border: 1px solid var(--bord); border-radius: 8px; padding: 7px 10px; background: #fff; color: var(--texte); }
a { color: var(--navy); }

header { background: var(--navy); color: #fff; display: flex; align-items: center; gap: 14px; padding: 10px 16px; flex-wrap: wrap; }
header .marque { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 6px; }
header .marque i { width: 8px; height: 8px; background: var(--orange-marque); border-radius: 50%; display: inline-block; }
header .espace { flex: 1; }
header select { background: #fff; }
nav { display: flex; gap: 4px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--bord); overflow-x: auto; }
nav button { background: none; color: var(--doux); border-radius: 0; padding: 12px 14px; border-bottom: 3px solid transparent; white-space: nowrap; }
nav button.actif { color: var(--navy); border-bottom-color: var(--orange-marque); font-weight: 600; }
main { padding: 16px; max-width: 1400px; margin: 0 auto; }
/* en-tête et onglets alignés sur la même colonne centrée que le contenu */
header, nav { padding-left: max(16px, calc((100% - 1400px) / 2 + 16px)); padding-right: max(16px, calc((100% - 1400px) / 2 + 16px)); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 14px; }
.kpi b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--doux); font-size: 12px; }

.alertes { margin-bottom: 14px; display: grid; gap: 8px; }
.alerte { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: var(--rayon); padding: 10px 14px;
  display: flex; align-items: center; gap: 12px; animation: clignote 1.2s infinite; }
.alerte .espace { flex: 1; }
.avert { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: var(--rayon); padding: 10px 14px; margin-bottom: 14px; }

.salle { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.table { border-radius: var(--rayon); padding: 12px; color: #fff; min-height: 104px; display: flex; flex-direction: column; gap: 4px; }
.table h3 { margin: 0; font-size: 18px; display: flex; justify-content: space-between; }
.table .lib { font-size: 12px; opacity: .9; }
.table .ch { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.table .meta { font-size: 12px; opacity: .9; margin-top: auto; }
.LIBRE { background: var(--libre); } .OCCUPEE { background: var(--occupee); }
.A_DEBARRASSER { background: var(--adeb); } .NON_DEBARRASSEE { background: var(--nondeb); animation: clignote 1s infinite; }
@keyframes clignote { 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) { .alerte, .NON_DEBARRASSEE { animation: none; } }

.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; margin-bottom: 14px; }
.bloc h2 { font-size: 15px; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bloc h2 small { color: var(--doux); font-weight: 400; font-size: 12px; }
.fil { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.fil li { padding: 7px 0; border-bottom: 1px solid var(--bord); display: flex; gap: 10px; align-items: baseline; }
.fil time { color: var(--doux); font-variant-numeric: tabular-nums; font-size: 12px; min-width: 62px; }
.pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.frame img { max-width: 100%; max-height: 60vh; margin: 0 auto; border-radius: 8px; display: block; background: #ddd; }

table.liste { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--bord); }
table.liste th { color: var(--doux); font-weight: 500; font-size: 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.calib { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.toile { background: #111; border-radius: 8px; overflow: hidden; display: flex; justify-content: center; align-items: center;
  height: calc(100vh - 150px); min-height: 280px; }
/* l'image tient entière dans l'écran, centrée, sans déformation (le canvas garde son ratio comme une image) */
.toile canvas { display: block; max-width: 100%; max-height: 100%; cursor: crosshair; touch-action: none; }
.zones-liste { display: grid; gap: 8px; }
.zones-liste .z { display: flex; gap: 6px; align-items: center; }
.zones-liste .z input { width: 0; flex: 1; }
.zones-liste .z input.n { flex: none; width: 56px; }
.aide { color: var(--doux); font-size: 12px; line-height: 1.5; }

.params { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.params label { display: grid; gap: 4px; }
.params label span { font-size: 12px; color: var(--doux); }
.lien { word-break: break-all; font-size: 12px; background: #f3f4f6; padding: 8px; border-radius: 6px; }
.rangee { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.connexion { max-width: 360px; margin: 12vh auto; display: grid; gap: 10px; }
.erreur { color: var(--nondeb); font-size: 13px; }
.vide { color: var(--doux); text-align: center; padding: 30px 0; }

@media (max-width: 900px) {
  .salle, .calib { grid-template-columns: 1fr; }
  .toile { height: auto; max-height: 70vh; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* analyse photo */
.bouton-fichier { background: var(--navy); color: #fff; border-radius: 8px; padding: 10px 16px; cursor: pointer; font-weight: 500; }
.photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.photo img { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; border-radius: 8px; cursor: zoom-in; }
.photo h3 { font-size: 14px; margin: 14px 0 6px; }
.photo h3:first-child { margin-top: 0; }
.photo ul { margin: 0; padding-left: 18px; line-height: 1.55; }
.photo .resume { font-size: 15px; line-height: 1.5; margin: 0; }
.note { display: inline-block; font-weight: 600; border-radius: 99px; padding: 2px 10px; color: #fff; font-size: 13px; }
.badge-src { font-size: 11px; color: var(--doux); }
.en-cours { color: var(--doux); padding: 24px; text-align: center; }
@media (max-width: 900px) { .photo { grid-template-columns: 1fr; } }