/* Suivi des appels – feuille de style.
   Un seul élément fort : le bandeau noir « appel en cours » sur la fiche. Le reste est sobre. */
:root {
  --paper: #eef0ec;
  --panel: #ffffff;
  --ink: #1b2226;
  --muted: #5b676c;
  --line: #d3d9d5;
  --accent: #c9324a;        /* rouge du logo ADDE */
  --accent-dark: #a7283c;
  --accent-ink: #ffffff;
  --logo-grey: #8a8a8a;
  --title-grey: #5e5e5e;
  --danger: #a33a2f;
  --ok-bg: #e3f1ea; --ok-ink: #1d5a44;
  --warn-bg: #fbeedb; --warn-ink: #7a4a0b;
  --err-bg: #f9e2de; --err-ink: #7d2418;
  --journee-bg: #dcefe8; --journee-ink: #1a5a48;
  --astreinte-bg: #f7e3c6; --astreinte-ink: #7a4305;
  --jour-bg: #f6efc9; --jour-ink: #6b5508;
  --nuit-bg: #dfe1f3; --nuit-ink: #313a7a;
  --radius: 6px;
  --page-width: none; /* la page prend toute la largeur de la fenêtre, quel que soit l'écran */
  --font: "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--paper); }
body { margin: 0; line-height: 1.45; }
a { color: var(--accent); }
h1 { font-size: 1.45rem; font-weight: 600; margin: 0 0 .9rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .7rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .4rem; }
p { margin: .4rem 0 .8rem; }
code { background: var(--paper); padding: .05em .35em; border-radius: 3px; font-size: .92em; }
small { color: var(--muted); font-size: .82rem; }
.muted { color: var(--muted); }
.small-text { font-size: .82rem; }
.plain { padding-left: 1.1rem; margin: .3rem 0; }

/* ---- barre de navigation */
.topbar { display: flex; align-items: stretch; gap: 0; min-height: 68px; padding: 0 1.5rem; background: var(--panel); border-bottom: 3px solid var(--accent); flex-wrap: wrap; }
.brand { display: flex; align-items: center; padding-right: 1.4rem; }
.brand-logo { height: 54px; width: auto; display: block; }
.app-title { display: flex; align-items: center; gap: .9rem; padding: 0 1.4rem; border-left: 1px solid var(--line); min-width: 27rem; box-sizing: border-box; }
.app-title span { font-size: 1rem; letter-spacing: .26em; text-transform: uppercase; color: var(--title-grey); white-space: nowrap; }
.app-icon { width: 36px; height: 36px; fill: var(--accent); }
.app-icon .bridge { stroke: var(--accent); }
.app-icon .dot { fill: var(--logo-grey); }
.app-icon .hole { fill: var(--panel); }
.app-icon .disc { stroke: var(--panel); }
.mainnav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; margin-left: 1.4rem; align-items: stretch; }
.mainnav a { display: flex; align-items: center; color: var(--ink); text-decoration: none; padding: 0 1rem; border-bottom: 3px solid transparent; margin-bottom: -3px; font-weight: 500; font-size: 1.2rem; }
.mainnav a:hover { color: var(--accent); }
.mainnav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }
.userbox { display: flex; align-items: center; gap: .75rem; }
@media (max-width: 900px) { .topbar { padding: .4rem 1rem; gap: .6rem; } .brand-logo { height: 40px; } .app-title { border-left: 0; padding: 0; min-width: 0; } .app-title span { font-size: .85rem; } .mainnav { margin-left: 0; flex-basis: 100%; } .mainnav a { padding: .4rem .6rem; } }
.userbox a { color: var(--ink); text-decoration: none; font-weight: 500; }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.subnav { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; margin: -.3rem 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.subnav a { color: var(--ink); text-decoration: none; padding: .25rem .55rem; border-radius: var(--radius); border: 1px solid transparent; }
.subnav a:hover { border-color: var(--line); }
.subnav a[aria-current="page"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.subnav-group { color: var(--muted); padding-left: .5rem; border-left: 1px solid var(--line); }
.dropdown { position: relative; }
.dropdown summary { list-style: none; cursor: pointer; color: var(--ink); padding: .25rem .55rem; border-radius: var(--radius); border: 1px solid transparent; user-select: none; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary:hover { border-color: var(--line); }
.dropdown summary[aria-current="page"], .dropdown[open] summary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.dropdown .caret { font-size: .75rem; margin-left: .15rem; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 14rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(27, 34, 38, .12); padding: .3rem; display: flex; flex-direction: column; }
.dropdown-menu a { padding: .4rem .7rem; border-radius: 4px; color: var(--ink); text-decoration: none; border: 0; }
.dropdown-menu a:hover { background: var(--paper); }
.dropdown-menu a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---- mise en page */
.container { max-width: var(--page-width); margin: 0 auto; padding: 1.25rem 1.5rem 2rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.panel.narrow { max-width: 440px; margin: 2rem auto; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin: 2.5rem auto 0; }
.login-brand img { height: 90px; width: auto; }
.login-brand .app-title { border-left: 0; padding: 0; }
.login-brand .app-title span { font-size: 1.1rem; }
.login-brand + .panel.narrow { margin-top: 1rem; }
.columns { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.columns > .panel { flex: 1 1 320px; }
.columns > .panel.grow { flex: 3 1 480px; }
.grid-2, .grid-3 { display: grid; gap: .8rem 1rem; margin-bottom: .6rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-ticket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .8rem 1rem; margin-bottom: .6rem; }
.stack { display: flex; flex-direction: column; gap: .8rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; margin: 1rem 0; }
.tile { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; color: var(--ink); text-decoration: none; }
.tile:hover { border-color: var(--accent); }
.tile strong { font-size: 1.4rem; margin-right: .3rem; }
.tile span { display: block; color: var(--muted); font-size: .85rem; margin-top: .3rem; }
@media (max-width: 760px) {
  .grid-3, .grid-2, .grid-ticket { grid-template-columns: 1fr; }
  .container { padding: .9rem; }
}

/* ---- champs */
.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.field label, .field > label, fieldset legend { font-size: .85rem; font-weight: 600; color: var(--muted); }
input, select, textarea, output.computed { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .55rem; width: 100%; min-width: 0; }
input[readonly] { background: var(--paper); color: var(--muted); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
output.computed { display: block; font-variant-numeric: tabular-nums; font-weight: 600; }
.with-btn { display: flex; gap: .4rem; }
.with-btn input { flex: 1; }
.with-btn .btn { white-space: nowrap; }
fieldset { border: 0; padding: 0; margin: 0 0 .6rem; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .4rem 0 .6rem; }
.check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.check input { width: auto; margin: 0; }
.inline { display: inline; }
.inline-form { display: flex; gap: .4rem; margin-bottom: .8rem; }
.inline-form input { flex: 1; }
table.data td select { width: auto; padding: .25rem .4rem; }
table.data td input { padding: .3rem .45rem; }

/* ---- boutons */
.btn { display: inline-block; font: inherit; font-weight: 500; padding: .45rem .9rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none; line-height: 1.3; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-dark); color: var(--accent-ink); }
.btn.small { padding: .25rem .6rem; font-size: .85rem; }
.btn.big { padding: .7rem 1.6rem; font-size: 1.05rem; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); }
.actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.actions.full { flex-basis: 100%; }
.actions-inline { flex-direction: row; align-items: flex-end; gap: .4rem; }
td.actions { white-space: nowrap; }
/* Une cellule de tableau reste une cellule : la règle générique .actions (flex) cassait l'alignement des colonnes. */
table td.actions, table th.actions { display: table-cell; vertical-align: middle; }
table td.actions > * + * { margin-left: .3rem; }
td.actions .btn + .inline, td.actions .inline + .inline { margin-left: .3rem; }

/* ---- messages */
.alert { border-radius: var(--radius); padding: .6rem .85rem; margin: 0 0 1rem; border: 1px solid transparent; }
.alert ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.alert.success { background: var(--ok-bg); color: var(--ok-ink); }
.alert.warning { background: var(--warn-bg); color: var(--warn-ink); }
.alert.error, .alert.message { background: var(--err-bg); color: var(--err-ink); }
.tag { display: inline-block; font-size: .72rem; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); margin-left: .2rem; vertical-align: middle; }

/* ---- badges journée/astreinte, jour/nuit */
.badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--paper); color: var(--muted); vertical-align: middle; }
.badge[data-value="journee"] { background: var(--journee-bg); color: var(--journee-ink); }
.badge[data-value="astreinte"] { background: var(--astreinte-bg); color: var(--astreinte-ink); }
.badge[data-value="jour"] { background: var(--jour-bg); color: var(--jour-ink); }
.badge[data-value="nuit"] { background: var(--nuit-bg); color: var(--nuit-ink); }

/* ---- fiche d'appel : bandeau « en cours » */
.call-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.call-head h1 { margin: 0; }
.live { display: flex; align-items: center; gap: .6rem; background: var(--ink); color: #fff; padding: .45rem .9rem; border-radius: var(--radius); }
.live-clock { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; min-width: 4.2ch; }
.live .badge { font-size: .8rem; }
.live .badge[data-value=""] { background: rgba(255,255,255,.15); color: #fff; }

/* ---- tableaux */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; background: var(--panel); font-size: var(--table-font, .92rem); }
table.data th, table.data td { text-align: left; padding: .45rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { font-size: calc(var(--table-font, .92rem) * .87); color: var(--muted); font-weight: 600; background: var(--paper); position: sticky; top: 0; }
table.data tfoot th, table.data tfoot td { font-weight: 600; background: var(--paper); }
table.data tr.inactive td { color: var(--muted); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data.compact td { padding: .3rem .5rem; }
table.calls td { white-space: nowrap; }
table.calls td:nth-child(7) { white-space: normal; min-width: 180px; }
table.pivot thead tr:first-child th:not([rowspan]) { text-align: center; }
table.pivot th[scope="row"] { white-space: nowrap; }
.cell3 span { display: block; line-height: 1.25; }
.cell3 .c-count { font-weight: 600; }
.cell3 .c-dur { color: var(--ink); font-size: .85rem; }
.cell3 .c-adm { color: var(--muted); font-size: .8rem; }
.pagination { display: flex; gap: .8rem; align-items: center; margin-top: 1rem; }

/* ---- filtres et indicateurs */
.filters { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: flex-end; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .9rem; }
.filters .field { flex: 1 1 140px; max-width: 220px; }
.filters .actions-inline { flex: 1 1 auto; max-width: none; }
.summary { margin: 0 0 .8rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; }
.kpi strong { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-size: .85rem; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .mainnav a { transition: background-color .12s, border-color .12s, color .12s; }
}

/* ---- plages horaires par jour */
table.ranges input[type="time"] { width: 9.5em; }
table.ranges th[scope="row"] { white-space: nowrap; }

/* ---- pied de page et journal des versions */
.footer { max-width: var(--page-width); margin: 0 auto; padding: 0 1.25rem 1.5rem; color: var(--muted); font-size: .8rem; }
.release { margin-bottom: 1.1rem; }
.release h2 { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.release h2 small { font-weight: 400; }
.release h3 { margin: .5rem 0 .2rem; color: var(--muted); font-size: .85rem; }
.release ul { margin: 0 0 .3rem; padding-left: 1.2rem; }
.release.current { border-left: 3px solid var(--accent); padding-left: .9rem; }

/* ---- formulaire d'ajout de site (six champs sur une ligne) */
.site-form { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) auto; gap: .8rem 1rem; align-items: end; }
.site-form .actions-inline { flex-direction: row; }
table.sites td input[type="date"] { width: 10.5em; }
table.sites td input[name="site_code"] { width: 8em; }
table.sites td input.narrow { width: 5em; }
table.sites tr.expired td input, table.sites tr.expired td select { color: var(--muted); }
@media (max-width: 1100px) { .site-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- écran de référence 2408 × 1506 : texte plus grand, fiche d'appel tenant sans défilement */
@media (min-width: 2000px) {
  html { font-size: 16px; }
  .topbar { min-height: 80px; }
  .brand-logo { height: 64px; }
  .app-icon { width: 42px; height: 42px; }
  .container { padding: 1.5rem 2rem 2rem; }
  .call-form .panel { padding: 1.2rem 1.5rem; }
  .call-form .grid-3 { gap: 1rem 1.6rem; }
  .call-form textarea { min-height: 5.5rem; }
  .live-clock { font-size: 1.9rem; }
  .btn.big { font-size: 1.15rem; padding: .8rem 2rem; }
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  table.data { font-size: var(--table-font, 1rem); }
}

/* ---- cadre INFO du site (bas de la fiche d'appel) */
.panel.info { border-left: 4px solid var(--accent); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem 1.2rem; margin: 0; }
.info-grid dt { font-size: .8rem; font-weight: 600; color: var(--muted); }
.info-grid dd { margin: .1rem 0 0; font-size: 1.05rem; font-weight: 500; }

/* ---- adresses IP dans le cadre Info site */
.addresses { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.addresses h3 { margin: .3rem 0 .4rem; }
.addresses-columns { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.addresses-columns > div { flex: 1 1 420px; }
table.ip-table { width: auto; min-width: 100%; }
table.ip-table td { padding: .3rem .55rem; vertical-align: middle; }
table.ip-table tbody tr:nth-child(even) td { background: var(--paper); }
table.ip-table tbody tr.ip-key td { background: #e3effa; font-weight: 600; }
table.ip-table tbody tr.ip-key td:first-child { box-shadow: inset 3px 0 0 #1f6fb2; }
table.ip-table code { font-size: 1rem; }
table.ip-table td.actions .btn + .btn { margin-left: .3rem; }

/* ---- mise à jour */
.release-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .6rem; }

/* ---- ping */
.addresses-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.addresses-head h3 { margin: .3rem 0 .4rem; }
/* boutons « Ping tout » / « SNMP tout » dans l'en-tête, centrés au-dessus des boutons Ping / SNMP de chaque ligne (même largeur) */
.ip-table th.ping-head { white-space: nowrap; }
.ip-table .ping-col-btn { min-width: 6rem; justify-content: center; text-align: center; }
table.ip-table td.ping { white-space: nowrap; }
.ping-state { display: inline-block; min-width: 4.5em; font-size: .8rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; vertical-align: middle; }
.ping-state.ok { background: var(--ok-bg); color: var(--ok-ink); }
.ping-state.ko { background: var(--err-bg); color: var(--err-ink); }
.ping-state.pending { background: var(--paper); color: var(--muted); }

/* ---- profils et droits */
table.profiles { width: auto; min-width: 60%; }
table.profiles th.perm-label { text-align: left; font-weight: 500; white-space: normal; min-width: 22rem; }
table.profiles th.profile-col, table.profiles td.profile-col { text-align: center; min-width: 11rem; vertical-align: top; }
table.profiles .profile-name { font-size: 1rem; font-weight: 600; color: var(--ink); }
/* En-tête des profils fixé en haut de l'écran au défilement vertical (le conteneur ne doit pas faire défiler) */
.profiles-wrap { overflow: visible; }
table.profiles thead th { position: sticky; top: 0; z-index: 3; background: var(--paper); box-shadow: inset 0 -2px 0 var(--line); }
table.profiles tr.group-row th { background: var(--paper); color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; padding-top: .6rem; }
table.profiles td.perm { text-align: center; font-size: 1.05rem; font-weight: 600; }
table.profiles td.perm.yes { color: var(--ok-ink); background: var(--ok-bg); }
table.profiles td.perm.no { color: var(--line); }
table.profiles tfoot td { background: var(--panel); padding-top: .6rem; text-align: center; }
table.profiles tfoot td .btn + .inline { margin-left: .3rem; }
.perm-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; margin-bottom: 1rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.perm-group legend { padding: 0 .3rem; }

/* ---- maintenance */
.badge[data-value="a_planifier"] { background: var(--warn-bg); color: var(--warn-ink); }
.badge[data-value="planifiee"] { background: var(--nuit-bg); color: var(--nuit-ink); }
.badge[data-value="realisee"] { background: var(--ok-bg); color: var(--ok-ink); }
.badge[data-value="annulee"] { background: var(--paper); color: var(--muted); text-decoration: line-through; }
.badge[data-value="due-late"] { background: var(--err-bg); color: var(--err-ink); }
.badge[data-value="due-soon"] { background: var(--warn-bg); color: var(--warn-ink); }
.badge[data-value="due-ok"] { background: var(--ok-bg); color: var(--ok-ink); }
table.due tr.due-late td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
table.due tr.due-soon td:first-child { box-shadow: inset 3px 0 0 #b5651d; }
table.maint td { white-space: nowrap; }
table.maint td:nth-child(2) { white-space: normal; min-width: 200px; }
.pill-late { display: inline-block; margin-left: .3rem; padding: 0 .5rem; border-radius: 999px; background: var(--err-bg); color: var(--err-ink); font-size: .78rem; font-weight: 600; }
.kpi.kpi-alert { border-color: var(--danger); } .kpi.kpi-alert strong { color: var(--danger); }
.kpi.kpi-warn { border-color: #b5651d; } .kpi.kpi-warn strong { color: #b5651d; }

/* ---- menus déroulants de la barre principale */
.mainnav .navdrop { display: flex; align-items: stretch; }
.mainnav .navdrop summary { display: flex; align-items: center; padding: 0 .9rem; border: 0; border-bottom: 3px solid transparent; margin-bottom: -3px; border-radius: 0; color: var(--ink); font-weight: 400; }
.mainnav .navdrop summary:hover { color: var(--accent); border-color: transparent; }
.mainnav .navdrop summary[aria-current="page"], .mainnav .navdrop[open] summary { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.mainnav .navdrop .dropdown-menu { top: calc(100% + 3px); min-width: 16rem; }
@media (max-width: 900px) { .mainnav .navdrop summary { padding: .4rem .6rem; } }

/* ---- barre de sous-menu (proposition A) */
.subbar { display: flex; align-items: stretch; gap: .15rem; min-height: 46px; padding: 0 1.5rem; background: #f6f7f4; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.subbar a, .subbar .dropdown summary { display: flex; align-items: center; padding: 0 .9rem; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 0; font-weight: 400; font-size: 1.07rem; }
.subbar a:hover, .subbar .dropdown summary:hover { color: var(--accent); border-color: transparent; }
.subbar a[aria-current="page"], .subbar .dropdown summary[aria-current="page"], .subbar .dropdown[open] summary { border-bottom-color: var(--accent); color: var(--accent); }
.subbar .dropdown { display: flex; align-items: stretch; }
.subbar .dropdown-menu { top: calc(100% + 1px); }
.subbar .dropdown-menu a { display: block; padding: .4rem .7rem; border: 0; margin: 0; }
.subbar .dropdown-menu a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-radius: 4px; }
@media (max-width: 900px) { .subbar { padding: 0 1rem; } .subbar a, .subbar .dropdown summary { padding: .5rem .6rem; } }
@media (min-width: 2000px) { .subbar { min-height: 50px; } }

/* ---- accueil de l'administration (proposition A) */
.admin-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi.kpi-ok strong { color: var(--ok-ink); }
.admin-group { margin-bottom: 1.1rem; }
.admin-group h2 { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .5rem; }
.admin-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.admin-card { display: flex; gap: .8rem; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; color: var(--ink); text-decoration: none; }
.admin-card:hover { border-color: var(--accent); }
.admin-card-icon { flex: 0 0 auto; color: var(--accent); margin-top: .1rem; }
.admin-card-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-card-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.admin-card-body strong { font-size: 1.05rem; }
.admin-card-desc { color: var(--muted); font-size: .88rem; }
.admin-card-meta { font-size: .88rem; margin-top: .3rem; }
.admin-card-meta.warn { color: var(--warn-ink); font-weight: 600; }
.admin-card-meta.err { color: var(--err-ink); font-weight: 600; }
@media (max-width: 1100px) { .admin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- base de données des sites : tableau large et fiche */
.sites-wrap { max-height: calc(100vh - 290px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table.sites-sheet { width: max-content; min-width: 100%; }
table.sites-sheet th, table.sites-sheet td { white-space: nowrap; }
table.sites-sheet thead th { position: sticky; top: 0; z-index: 2; }
table.sites-sheet thead tr.group-head th { top: 0; height: 2.4rem; padding: 0 .6rem; line-height: 2.4rem; box-sizing: border-box; text-align: center; background: var(--ink); color: #fff; letter-spacing: .08em; font-size: .78rem; }
table.sites-sheet thead tr.group-head th.fixed-head { position: sticky; left: 0; z-index: 5; text-align: left; }
table.sites-sheet thead tr.group-head th:empty { background: var(--paper); }
table.sites-sheet thead tr:nth-child(2) th { top: var(--head1, 2.4rem); }
table.sites-sheet thead tr.filter-row th { top: var(--head2, 4.6rem); padding: .25rem .35rem; background: var(--panel); border-bottom: 2px solid var(--line); }
table.sites-sheet thead tr.filter-row th.sticky-1, table.sites-sheet thead tr.filter-row th.sticky-2, table.sites-sheet thead tr.filter-row th.sticky-3, table.sites-sheet thead tr.filter-row th.sticky-4, table.sites-sheet thead tr.filter-row th.sticky-5 { z-index: 4; background: var(--panel); }
table.sites-sheet thead tr.filter-row th.sticky-3 input, table.sites-sheet thead tr.filter-row th.sticky-4 input { min-width: 0; }
table.sites-sheet thead tr.filter-row input, table.sites-sheet thead tr.filter-row select { width: 100%; min-width: 7em; padding: .25rem .4rem; font-size: calc(var(--table-font, .92rem) * .92); }
.filter-cell { display: flex; gap: .2rem; align-items: center; position: relative; }
.filter-cell input { flex: 1 1 auto; min-width: 5.5em; }
.filter-list-btn { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: .2rem .4rem; font-size: .8rem; cursor: pointer; color: var(--muted); }
.filter-list-btn:hover, .filter-list-btn.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
table.sites-sheet thead tr.filter-row th { overflow: visible; }
.filter-popover { position: fixed; z-index: 60; width: 18rem; max-height: 22rem; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(27, 34, 38, .18); padding: .5rem; text-align: left; font-weight: 400; white-space: normal; }
.filter-popover-head input { width: 100%; }
.filter-popover-tools { font-size: .8rem; margin: .4rem 0; color: var(--muted); }
.filter-popover-list { overflow: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; padding: .2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-popover-list label { font-size: .88rem; }
.filter-popover-list label[hidden] { display: none; }
.filter-popover-foot { padding-top: .5rem; display: flex; gap: .4rem; }
table.sites-sheet .sticky-1, table.sites-sheet .sticky-2, table.sites-sheet .sticky-3, table.sites-sheet .sticky-4, table.sites-sheet .sticky-5 { position: sticky; z-index: 3; background: var(--panel); }
/* Positions calculées par le script d'après les largeurs réelles des colonnes (--left-2 à --left-4). */
table.sites-sheet .sticky-1 { left: 0; }
table.sites-sheet .sticky-2 { left: var(--left-2, 10rem); }
table.sites-sheet .sticky-3 { left: var(--left-3, 28rem); }
table.sites-sheet .sticky-4 { left: var(--left-4, 35rem); }
table.sites-sheet .sticky-5 { left: var(--left-5, 42rem); }
table.sites-sheet.pinned-left .sticky-5 { box-shadow: inset -2px 0 0 var(--line), 4px 0 8px -4px rgba(27, 34, 38, .25); }
table.sites-sheet td.sticky-1, table.sites-sheet th.sticky-1 { min-width: 10rem; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; }
table.sites-sheet td.sticky-2, table.sites-sheet th.sticky-2 { min-width: 18rem; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; }
table.sites-sheet td.sticky-3, table.sites-sheet th.sticky-3 { min-width: 7rem; max-width: 7rem; }
table.sites-sheet td.sticky-4, table.sites-sheet th.sticky-4 { min-width: 7rem; max-width: 7rem; }
table.sites-sheet td.sticky-5, table.sites-sheet th.sticky-5 { min-width: 9rem; }
table.sites-sheet thead tr:nth-child(2) th.sticky-1, table.sites-sheet thead tr:nth-child(2) th.sticky-2, table.sites-sheet thead tr:nth-child(2) th.sticky-3, table.sites-sheet thead tr:nth-child(2) th.sticky-4, table.sites-sheet thead tr:nth-child(2) th.sticky-5 { z-index: 4; background: var(--paper); }
table.sites-sheet tr.expired td { color: var(--muted); }
table.sites-sheet td.late { color: var(--err-ink); font-weight: 600; }
.inline-form.compact { margin: 0; gap: .4rem; }
.inline-form.compact input[type="search"] { min-width: 16rem; }
.sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem 1rem; }
.years-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.year-field .with-btn input[type="date"] { flex: 0 0 11em; }
@media (max-width: 1100px) { .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- base de données des sites : sections repliables, chacune avec sa couleur */
:root { --sec-info-bg: #d9ecf2; --sec-info-ink: #1d4b5c; --sec-info-cell: #f1f8fa;
        --sec-contact-bg: #f6d9dd; --sec-contact-ink: #7a2331; --sec-contact-cell: #fcf1f3;
        --sec-contrat-bg: #e6dcf0; --sec-contrat-ink: #4a2f6e; --sec-contrat-cell: #f6f2fa;
        --sec-planif-bg: #f3e3c3; --sec-planif-ink: #6b4708; --sec-planif-cell: #fbf6ec;
        --sec-suivi-bg: #d8ecda; --sec-suivi-ink: #1f5a2d; --sec-suivi-cell: #f1f8f2; }
table.sites-sheet th.sec-head { text-align: center; border-left: 2px solid var(--panel); }
table.sites-sheet th.sec-head .linkbtn { text-decoration: none; font-weight: 700; letter-spacing: .08em; font-size: .85rem; line-height: 1; }
table.sites-sheet th.sec-head.folded .caret { display: inline-block; transform: rotate(-90deg); }
table.sites-sheet th.sec-head.folded { min-width: 2.6rem; }
table.sites-sheet th.sec-head.folded .linkbtn { font-size: .7rem; letter-spacing: .04em; }
table.sites-sheet th.sec-head[data-section="info"], .toggle-section[data-section="info"] { background: var(--sec-info-bg); color: var(--sec-info-ink); }
table.sites-sheet th.sec-head[data-section="info"] .linkbtn { color: var(--sec-info-ink); }
table.sites-sheet th.sec-info { background: var(--sec-info-bg); color: var(--sec-info-ink); }
table.sites-sheet td.sec-info { background: var(--sec-info-cell); }
table.sites-sheet th.sec-head[data-section="contrat"], .toggle-section[data-section="contrat"] { background: var(--sec-contrat-bg); color: var(--sec-contrat-ink); }
table.sites-sheet th.sec-head[data-section="contrat"] .linkbtn { color: var(--sec-contrat-ink); }
table.sites-sheet th.sec-contrat { background: var(--sec-contrat-bg); color: var(--sec-contrat-ink); }
table.sites-sheet td.sec-contrat { background: var(--sec-contrat-cell); }
table.sites-sheet th.sec-head[data-section="planif"], .toggle-section[data-section="planif"] { background: var(--sec-planif-bg); color: var(--sec-planif-ink); }
table.sites-sheet th.sec-head[data-section="planif"] .linkbtn { color: var(--sec-planif-ink); }
table.sites-sheet th.sec-planif { background: var(--sec-planif-bg); color: var(--sec-planif-ink); }
table.sites-sheet td.sec-planif { background: var(--sec-planif-cell); }
table.sites-sheet th.sec-head[data-section="suivi"], .toggle-section[data-section="suivi"] { background: var(--sec-suivi-bg); color: var(--sec-suivi-ink); }
table.sites-sheet th.sec-head[data-section="suivi"] .linkbtn { color: var(--sec-suivi-ink); }
table.sites-sheet th.sec-suivi { background: var(--sec-suivi-bg); color: var(--sec-suivi-ink); }
table.sites-sheet td.sec-suivi { background: var(--sec-suivi-cell); }
table.sites-sheet td.bool-yes { color: var(--ok-ink); font-weight: 700; text-align: center; }
table.sites-sheet th.year-start, table.sites-sheet td.year-start { border-left: 2px solid var(--sec-suivi-ink); }
table.sites-sheet tr.filter-row th.year-start { border-left: 2px solid var(--sec-suivi-ink); }
.years-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; border: 0; padding: 0; margin: 0; }
.year-block { display: flex; flex-direction: column; gap: .3rem; background: var(--sec-suivi-cell); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem; }
.year-block strong { color: var(--sec-suivi-ink); }
.section-toggles { margin-left: .5rem; }
.section-toggles .btn { margin-left: .25rem; border-color: transparent; font-weight: 600; }
.section-toggles .btn.off { opacity: .55; text-decoration: line-through; }

/* ---- tri par colonne */
table.sites-sheet thead tr:nth-child(2) th.sortable { cursor: pointer; user-select: none; }
table.sites-sheet thead tr:nth-child(2) th.sortable:hover { color: var(--accent); }
table.sites-sheet thead tr:nth-child(2) th.sortable::after { content: "↕"; opacity: .35; margin-left: .3rem; font-size: .8em; }
table.sites-sheet thead tr:nth-child(2) th.sorted-asc::after { content: "↑"; opacity: 1; }
table.sites-sheet thead tr:nth-child(2) th.sorted-desc::after { content: "↓"; opacity: 1; }

/* ---- champs calculés automatiquement : grisés */
output.computed { background: var(--paper); color: var(--muted); border-style: dashed; }
table.sites-sheet td.computed-cell { color: var(--muted); background: var(--paper) !important; font-style: italic; }
table.sites-sheet th.computed-head { font-style: italic; }
table.data td.center { text-align: center; }

/* ---- salles d'un site */
.rooms-table td input[type="text"], .rooms-table td input:not([type]) { width: 100%; }
.rooms-table th.center, .rooms-table td.center { text-align: center; }
.narrow-input { width: 5em !important; }
.rooms-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.rooms-list li { padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; }
.rooms-list li.maint { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.rooms-list li.nomaint { color: var(--muted); }
.auto-mark { font-size: .68rem; font-style: normal; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 .35rem; vertical-align: middle; }
.badge[data-value="zone-A"] { background: var(--sec-info-bg); color: var(--sec-info-ink); }
.badge[data-value="zone-B"] { background: var(--sec-contrat-bg); color: var(--sec-contrat-ink); }
.badge[data-value="zone-C"] { background: var(--sec-planif-bg); color: var(--sec-planif-ink); }
.badge[data-value="zone-Toutes"] { background: var(--ink); color: #fff; }
table.rooms-contract { --left-2: 10rem; --left-3: 28rem; --left-4: 37rem; }
table.rooms-contract td.sticky-3, table.rooms-contract th.sticky-3 { min-width: 9rem; max-width: 9rem; }
table.rooms-contract td.sticky-4, table.rooms-contract th.sticky-4 { min-width: 12rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
table.rooms-contract td.sec-planif input[type="date"] { width: 10.5em; }

/* ---- inventaire */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.parc-search input[type="search"] { min-width: 28rem; }
table.parc-table th[scope="row"] { white-space: nowrap; font-size: 1rem; }
/* palettes des sections de l'inventaire (une par type de système, en boucle) */
.pal-0 { --pal-bg: #d9ecf2; --pal-ink: #1d4b5c; --pal-cell: #f1f8fa; }
.pal-1 { --pal-bg: #e6dcf0; --pal-ink: #4a2f6e; --pal-cell: #f6f2fa; }
.pal-2 { --pal-bg: #f3e3c3; --pal-ink: #6b4708; --pal-cell: #fbf6ec; }
.pal-3 { --pal-bg: #d8ecda; --pal-ink: #1f5a2d; --pal-cell: #f1f8f2; }
.pal-4 { --pal-bg: #f6d9dd; --pal-ink: #7a2331; --pal-cell: #fcf1f3; }
.pal-5 { --pal-bg: #e1e4e8; --pal-ink: #2f3a44; --pal-cell: #f4f5f7; }
.cell-pal-0 { background: #f1f8fa; } .cell-pal-1 { background: #f6f2fa; } .cell-pal-2 { background: #fbf6ec; }
.cell-pal-3 { background: #f1f8f2; } .cell-pal-4 { background: #fcf1f3; } .cell-pal-5 { background: #f4f5f7; }
table.parc-table th[class*="pal-"], .toggle-section[class*="pal-"] { background: var(--pal-bg); color: var(--pal-ink); }
table.parc-table th.sec-head[class*="pal-"] .linkbtn { color: var(--pal-ink); }
table.parc-table th.sys-start, table.parc-table td.sys-start { border-left: 2px solid var(--line); }
table.parc-table td.sticky-1, table.parc-table th.sticky-1 { min-width: 8rem; max-width: 12rem; }
table.parc-table td.sticky-2, table.parc-table th.sticky-2 { min-width: 9rem; max-width: 9rem; }
table.parc-table { --left-2: 8rem; }
table.parc-edit td input { width: 100%; min-width: 8rem; }
.system-block h2 { display: inline-block; background: var(--pal-bg); color: var(--pal-ink); padding: .15rem .6rem; border-radius: 4px; letter-spacing: .06em; font-size: .9rem; }
.system-block { border-left: 4px solid var(--pal-bg); }
.field-row-custom td { background: var(--paper); }

/* ---- date planifiée pendant les vacances scolaires du site */
td.in-holiday, table.sites-sheet td.in-holiday { background: #fde3bf !important; color: #7a4a0b; font-weight: 600; box-shadow: inset 3px 0 0 #d9822b; }
.holiday-mark { display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px; background: #d9822b; color: #fff; font-size: .7rem; font-weight: 600; font-style: normal; vertical-align: middle; }
.holiday-mark[hidden] { display: none; }
small.holiday-warning { color: #7a4a0b; font-weight: 600; }

/* ---- enregistrement groupé */
.batch-bar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .7rem; margin-bottom: .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
tr.row-dirty > td:first-child, tr.row-dirty > th:first-child, tr.row-dirty td.sticky-1 { box-shadow: inset 4px 0 0 var(--accent); }
.is-dirty { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type="checkbox"].is-dirty { outline-offset: 2px; }

/* ---- notification de modifications non enregistrées */
dialog.leave-dialog { border: 0; border-radius: var(--radius); padding: 1.3rem 1.5rem; max-width: 30rem; box-shadow: 0 18px 50px rgba(27, 34, 38, .3); border-top: 4px solid var(--accent); }
dialog.leave-dialog::backdrop { background: rgba(27, 34, 38, .45); }
dialog.leave-dialog h2 { margin: 0 0 .5rem; color: var(--accent); }
dialog.leave-dialog .leave-text { margin: 0 0 1rem; }
dialog.leave-dialog .actions { justify-content: center; text-align: center; }
dialog.leave-dialog .actions .btn { text-align: center; }
dialog.leave-dialog .btn[hidden] { display: none; }

/* ---- menus déroulants : chaque entrée sur une seule ligne, largeur selon l'entrée la plus longue */
.dropdown-menu { width: max-content; max-width: 90vw; }
.dropdown-menu a { white-space: nowrap; }
.subbar .dropdown summary { white-space: nowrap; }

/* ---- listes de suggestions (remplacent l'affichage natif des datalists) */
.suggest-panel { position: fixed; z-index: 70; max-height: calc(15 * 2.15em); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 26px rgba(27, 34, 38, .18); font-size: 1rem; padding: .2rem 0; max-width: min(40rem, 90vw); }
.suggest-panel[hidden] { display: none; }
.suggest-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .35rem .7rem; line-height: 1.45; cursor: pointer; white-space: nowrap; }
.suggest-item.active { background: var(--accent); color: var(--accent-ink); }
.suggest-item .suggest-label { color: var(--muted); font-size: .9em; }
.suggest-item.active .suggest-label { color: var(--accent-ink); opacity: .85; }

/* ---- synthèse d'astreinte */
.oncall-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi.kpi-warn strong { color: var(--warn-ink); }
table.oncall-table tfoot th { background: var(--paper); border-top: 2px solid var(--line); }
@media print { .filters, .call-head .actions, .topbar, .subbar, .footer, .mainnav { display: none !important; } }

/* pastilles grand format (synthèse d'astreinte) : même style que les badges Jour / Nuit de la liste des appels */
.badge.big { font-size: 1rem; padding: .2rem .8rem; }
.oncall-kpis .kpi { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.oncall-kpis .kpi strong { font-size: 1.25rem; }
table.oncall-table td.center, table.oncall-table th.center { text-align: center; }

/* appel sans durée (heure de fin non renseignée) : pastille rouge */
.badge.badge-missing { background: var(--err-bg, #f8dcdc); color: var(--err-ink, #9b1c1c); border: 1px solid currentColor; }

/* ---- bloc « Fichier d'exemple » des pages d'import */
.example-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; margin: .4rem 0 .8rem; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper); }
.example-box p { margin: .2rem 0 0; }
.example-columns summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.tag.warn { background: var(--warn-bg, #fbecd3); color: var(--warn-ink, #7a4a0b); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- journaux du serveur */
.log-level { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; background: var(--paper); color: var(--muted); }
.log-level[data-level="WARNING"] { background: var(--warn-bg, #fbecd3); color: var(--warn-ink, #7a4a0b); }
.log-level[data-level="ERROR"], .log-level[data-level="CRITICAL"] { background: var(--err-bg); color: var(--err-ink); }
table.logs-table tr[data-level="ERROR"] td, table.logs-table tr[data-level="CRITICAL"] td { background: #fdf3f1; }
table.logs-table td.log-message { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; white-space: pre-wrap; word-break: break-word; }
table.logs-table td.log-message pre { margin: .3rem 0 0; font-size: .8rem; white-space: pre-wrap; background: var(--paper); padding: .4rem .5rem; border-radius: 4px; }
table.logs-table .nowrap { white-space: nowrap; }

/* ---- commentaire complet d'un appel */
.comment-line { display: flex; align-items: center; gap: .35rem; width: 24rem; max-width: 100%; }
/* aperçu coupé à la largeur (et non au nombre de caractères) : toutes les lignes ont la même longueur, « … » aligné */
.comment-preview { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-dots { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 0 .55rem; line-height: 1.4; font-weight: 700; color: var(--muted); cursor: pointer; }
.btn-dots:hover, .btn-dots:focus-visible { border-color: var(--accent); color: var(--accent); }
.comment-bubble { position: fixed; z-index: 65; width: min(26rem, 90vw); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 34, 38, .22); padding: .7rem .85rem .6rem; --arrow-x: 24px; }
.comment-bubble[hidden] { display: none; }
.comment-bubble::before { content: ""; position: absolute; top: -7px; left: calc(var(--arrow-x) - 7px); width: 12px; height: 12px; background: var(--panel); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.comment-bubble.above::before { top: auto; bottom: -7px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.comment-bubble-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.comment-bubble-close { border: 0; background: transparent; font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .1rem; }
.comment-bubble-close:hover { color: var(--accent); }
.comment-bubble .comment-meta { margin: .15rem 0 .45rem; }
.comment-bubble .comment-body { white-space: pre-wrap; word-break: break-word; max-height: 16rem; overflow: auto; line-height: 1.45; font-size: .95rem; }
.comment-bubble-actions { margin-top: .5rem; font-size: .85rem; color: var(--muted); }
.btn-dots[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* ---- listes déroulantes à la même taille que les champs (Safari ignorait marges et hauteur des <select> natifs) */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, output.computed { box-sizing: border-box; min-height: 2.45rem; line-height: 1.3; }
select:not([multiple]):not([size]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b676c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: .75rem auto;
}
select:disabled { opacity: .6; cursor: not-allowed; }
/* versions compactes (tableaux, filtres) : même hauteur que les champs compacts voisins */
table.data td input:not([type="checkbox"]):not([type="radio"]), table.data td select,
table.sites-sheet thead tr.filter-row input, table.sites-sheet thead tr.filter-row select { min-height: 2rem; }
table.data td select:not([multiple]):not([size]), table.sites-sheet thead tr.filter-row select { padding-right: 1.7rem; background-position: right .5rem center; }

/* ---- menu principal et sous-menu figés en haut de l'écran */
:root { --chrome-h: 115px; }
.app-chrome { position: sticky; top: 0; z-index: 50; background: var(--panel); box-shadow: 0 2px 6px rgba(27, 34, 38, .06); }
html { scroll-padding-top: calc(var(--chrome-h) + .5rem); }
/* les éléments déjà collés en haut de page se placent sous le menu */
.batch-bar { top: var(--chrome-h); }
table.profiles thead th { top: var(--chrome-h); }
@media print { .app-chrome { position: static; box-shadow: none; } }
table.sites-sheet td.nearest-sector { font-weight: 700; font-style: normal; color: var(--sec-info-ink); }

/* ---- tableau de données des sites : texte centré dans toutes les colonnes */
table.sites-main th, table.sites-main td, table.sites-main td.num, table.sites-main th.num,
table.sites-main thead tr.group-head th.fixed-head { text-align: center; }
table.sites-main td.sticky-1, table.sites-main td.sticky-2 { text-overflow: ellipsis; }

/* ---- salles sous contrat : case « Confirmation » à taille confortable */
table.rooms-contract input[type="checkbox"] { width: 1.35rem; height: 1.35rem; cursor: pointer; accent-color: var(--accent); vertical-align: middle; }
table.rooms-contract td.center { text-align: center; }

/* ---- salles sous contrat : contenu centré verticalement dans chaque cellule (champs, cases et textes alignés) */
table.rooms-contract th, table.rooms-contract td { vertical-align: middle; }
table.rooms-contract td input, table.rooms-contract td .holiday-mark, table.rooms-contract td .auto-mark { vertical-align: middle; }

/* ---- tableau de bord maintenances : suivi hebdomadaire (présentation de l'ancien classeur) */
table.weekly-board { border-collapse: collapse; font-size: .9rem; min-width: 100%; }
table.weekly-board th, table.weekly-board td { border: 1px solid #c9cfcb; padding: .3rem .55rem; text-align: center; white-space: nowrap; }
table.weekly-board .wb-label { text-align: left; position: sticky; left: 0; z-index: 2; background: var(--panel); min-width: 16rem; }
table.weekly-board .wb-left { font-weight: 700; color: #1f5a2d; background: #e3f1e4; min-width: 6rem; }
table.weekly-board thead th { background: #e3f1e4; font-weight: 600; }
table.weekly-board thead .wb-month th { background: #eef0ec; }
table.weekly-board .wb-holiday th.wb-on { background: #f7cfd5; color: #7a2331; }
table.weekly-board td.wb-hol { background-image: linear-gradient(rgba(247, 207, 213, .35), rgba(247, 207, 213, .35)); }
table.weekly-board tr.wb-head th, table.weekly-board tr.wb-head td { font-weight: 700; }
table.weekly-board tbody.wb-block { border-top: 3px solid #1b2226; }
.wb-classic tr.wb-head th, .wb-classic tr.wb-head td { background: #4a4f54; color: #ffd84d; }
.wb-classic tr.wb-sub th, .wb-classic tr.wb-sub-hc th { background: #fdeccb; color: #8a4b0b; }
.wb-classic tr.wb-sub td, .wb-classic tr.wb-sub-hc td:not(.wb-left) { background-color: #fff8e6; }
.wb-dolby tr.wb-head th, .wb-dolby tr.wb-head td { background: #f3e9a6; color: #5c4a00; }
.wb-dolby tr.wb-sub th { background: #fbf4cf; color: #6b4708; }
.wb-dolby tr.wb-sub td:not(.wb-left) { background-color: #fffbe8; }
.wb-remaining tr.wb-head th, .wb-remaining tr.wb-head td { background: #8fd0e8; color: #0f3c4c; }
.wb-remaining tr.wb-sub th, .wb-remaining tr.wb-sub td:not(.wb-left) { background: #e2f3f9; color: #1d4b5c; }
.wb-planning tr.wb-head th, .wb-planning tr.wb-head td { background: #cf8fd6; color: #3a0f40; }
.wb-planning tr.wb-sub th, .wb-planning tr.wb-sub td:not(.wb-left) { background: #f1e0f3; color: #4a2f6e; }
.wb-planning tr.wb-planif th { background: #fde7dd; color: #c2410c; font-weight: 600; padding-left: 1.6rem; }
.wb-planning tr.wb-planif td:not(.wb-left) { background: #fdf1ea; font-size: .82rem; }

/* ---- suivi hebdomadaire : chiffres cliquables et bulle de détail */
table.weekly-board .wb-num { font: inherit; color: inherit; background: none; border: 0; padding: 0 .1rem; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
table.weekly-board .wb-num:hover, table.weekly-board .wb-num.open { color: var(--accent); text-decoration-style: solid; }
.wb-bubble { width: min(40rem, 94vw); }
.wb-bubble table td:nth-child(2) { white-space: nowrap; }
.wb-bubble .wb-bubble-total { margin: .45rem 0 0; font-weight: 600; font-size: .85rem; }
.wb-bubble .wb-bubble-body { max-height: 18rem; overflow: auto; margin-top: .4rem; }
.wb-bubble table { width: 100%; font-size: .85rem; }
.wb-bubble table th { position: sticky; top: 0; background: var(--paper); }
td.warn-text { color: var(--warn-ink, #7a4a0b); font-weight: 700; }

/* ---- bons d'intervention (pensé pour le téléphone) */
.app-icon .clip { stroke: var(--panel); stroke-width: 1.6; }
.app-icon .sign { fill: none; stroke: var(--panel); stroke-width: 1.8; stroke-linecap: round; }
.bi-form { max-width: 46rem; }
.bi-form .field input, .bi-form .field textarea, .bi-form .field select { font-size: 1.05rem; }
.bi-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.bi-check { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 1.05rem; cursor: pointer; }
.bi-check input { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); }
.bi-check:has(input:checked) { border-color: var(--accent); background: #fbe9ec; }
.bi-level[hidden] { display: none; }
.bi-segment { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bi-segment input { position: absolute; opacity: 0; pointer-events: none; }
.bi-segment span { display: inline-block; padding: .55rem 1.3rem; font-weight: 600; cursor: pointer; }
.bi-segment input:checked + span { background: var(--accent); color: var(--accent-ink); }
.bi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
.input-with-button { display: flex; gap: .4rem; }
.input-with-button input { flex: 1; }
.bi-actions { flex-wrap: wrap; }
.btn.big { padding: .8rem 1.3rem; font-size: 1.05rem; }
.bi-text { white-space: pre-wrap; background: var(--paper); padding: .6rem .7rem; border-radius: 4px; }
.bi-smileys { border: 0; padding: 0; margin: 0 0 .8rem; }
.bi-smileys legend { font-weight: 600; margin-bottom: .5rem; }
.bi-smileys label { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; margin-right: .6rem; cursor: pointer; }
.bi-smileys input { position: absolute; opacity: 0; pointer-events: none; }
.bi-smileys .smiley { font-size: 2.4rem; line-height: 1; padding: .35rem; border-radius: 50%; border: 2px solid transparent; filter: grayscale(.8); opacity: .65; }
.bi-smileys input:checked + .smiley { filter: none; opacity: 1; border-color: var(--accent); background: #fbe9ec; }
.bi-smileys .smiley-label { font-size: .75rem; color: var(--muted); max-width: 5.5rem; text-align: center; }
.sig-pad { position: relative; border: 2px dashed var(--line); border-radius: var(--radius); background: #fff; touch-action: none; }
.sig-pad canvas { display: block; width: 100%; height: 190px; cursor: crosshair; touch-action: none; }
.sig-pad .sig-clear { position: absolute; top: .4rem; right: .4rem; }
.sig-pad .sig-hint { position: absolute; left: .7rem; bottom: .5rem; color: var(--muted); font-size: .85rem; pointer-events: none; }
.sig-pad.signed { border-style: solid; border-color: #1b2a4a; }
.sig-pad.signed .sig-hint { display: none; }
.sig-pad.disabled { opacity: .35; pointer-events: none; }
.bi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .8rem; }
.bi-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .25rem; border-left: 4px solid var(--line); }
.bi-card.draft { border-left-color: var(--err-ink); }
.bi-card.signed { border-left-color: var(--ok-ink); }
.bi-card header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.bi-card p { margin: 0; }
.bi-card .bi-site { font-weight: 600; }
.bi-card .bi-report { color: var(--muted); font-size: .9rem; }
.bi-card .actions { margin-top: .4rem; flex-wrap: wrap; }
.badge.badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
@media (max-width: 600px) {
  .bi-actions .btn { flex: 1 1 100%; text-align: center; }
  .bi-smileys label { margin-right: .2rem; }
}

/* ---- téléphone à l'horizontale (écran peu haut) : le menu ne reste pas figé non plus, il occuperait la moitié de
   l'écran ; la mise en page reste celle d'un écran large */
@media (max-height: 520px) and (orientation: landscape) {
  .app-chrome { position: static; box-shadow: none; }
  :root { --chrome-h: 0px !important; }
}

/* ---- téléphone : le menu ne reste pas figé (il occuperait un tiers de l'écran) */
@media (max-width: 700px) {
  .app-chrome { position: static; box-shadow: none; }
  :root { --chrome-h: 0px !important; }
  .topbar { padding: 0 .8rem; }
  .topbar .app-title { min-width: 0; border-left: 0; padding: 0 .4rem; }
  .topbar .app-title span { letter-spacing: .14em; font-size: .85rem; white-space: normal; }
  .mainnav { flex-wrap: wrap; }
  .mainnav a { padding: .35rem .55rem; font-size: 1.02rem; }
  .subbar { overflow-x: auto; flex-wrap: nowrap; }
  main.container { padding-left: .7rem; padding-right: .7rem; }
}
.bi-form .check { display: flex; align-items: flex-start; gap: .6rem; }
.bi-form .check input[type="checkbox"] { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; accent-color: var(--accent); margin-top: .1rem; }

/* ---- liste des bons d'intervention en tableau */
table.bi-table td, table.bi-table th { white-space: nowrap; vertical-align: middle; }
table.bi-table tr.bi-draft td.sticky-1 { box-shadow: inset 4px 0 0 var(--err-ink); }
table.bi-table td.sticky-1, table.bi-table th.sticky-1 { min-width: 9rem; }

/* ---- bon d'intervention : niveau N1 / N2 / PM juste sous la case Maintenance */
.bi-types { align-items: start; grid-template-columns: minmax(0, 28rem); }  /* cases empilées comme sur la feuille papier */
.bi-type-cell { display: flex; flex-direction: column; gap: .4rem; }
.bi-type-cell .bi-level { margin: 0 0 0 .3rem; }
.bi-type-cell .bi-segment { display: flex; width: 100%; }
.bi-type-cell .bi-segment label { flex: 1 1 0; text-align: center; }
.bi-type-cell .bi-segment span { display: block; padding: .5rem .4rem; }

/* ---- bon d'intervention : « Maintenance » avec N1 / N2 / PM dessous, en dernière position */
.bi-check-maintenance { flex-direction: column; align-items: flex-start; gap: .55rem; cursor: default; }
.bi-check-maintenance .bi-check-main { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.bi-check-maintenance .bi-check-main input { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); }
.bi-check-maintenance:has(#type-maintenance:checked) { border-color: var(--accent); background: #fbe9ec; }
.bi-check-maintenance .bi-segment { margin-left: 2rem; background: var(--panel); }
.bi-segment.off { opacity: .45; }
table.sites-sheet th.sec-head[data-section="contact"], .toggle-section[data-section="contact"] { background: var(--sec-contact-bg); color: var(--sec-contact-ink); }
table.sites-sheet th.sec-head[data-section="contact"] .linkbtn { color: var(--sec-contact-ink); }
table.sites-sheet th.sec-contact { background: var(--sec-contact-bg); color: var(--sec-contact-ink); }
table.sites-sheet td.sec-contact { background: var(--sec-contact-cell); }
table.sites-sheet td.sec-contact a { color: inherit; }

/* ---- cases à cocher : taille confortable et couleur de l'application partout (fiche site, salles, listes, profils…) */
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); cursor: pointer; vertical-align: middle; flex: 0 0 auto; }
label.check { display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; }
.site-sheet-form .field label.check { font-size: 1rem; font-weight: 400; }
.site-sheet-form input[type="checkbox"], .bi-form input[type="checkbox"], table.data input[type="checkbox"] { width: 1.55rem; height: 1.55rem; }
.rooms-table td.center input[type="checkbox"] { width: 1.55rem; height: 1.55rem; }
.drafts-panel { border-left: 4px solid var(--err-ink); }
.drafts-panel h2 { display: flex; align-items: center; gap: .5rem; }

/* ---- salles sous contrat : pas de décalage quand une date est planifiée */
table.rooms-contract td.sec-planif { white-space: nowrap; }
.holiday-mark.planning-mark.is-off { visibility: hidden; }            /* place réservée : la colonne ne s'élargit pas */
table.rooms-contract td.in-holiday { box-shadow: none; }               /* le surlignage reste dans la cellule */
table.rooms-contract input.is-dirty { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }  /* repère dans le champ, jamais rogné */
table.rooms-contract input[type="checkbox"].is-dirty { box-shadow: 0 0 0 2px var(--accent); border-radius: 3px; }
table.rooms-contract .mail-planning { white-space: nowrap; }
.duration-input { width: 7rem; }
.rooms-list .room-duration { font-size: .78rem; opacity: .8; margin-left: .2rem; }
table.rooms-contract td.durations-cell { white-space: normal; min-width: 11rem; max-width: 20rem; }

/* ---- salles sous contrat : texte centré dans toutes les colonnes (en-têtes compris) */
table.rooms-contract th, table.rooms-contract td, table.rooms-contract td.num, table.rooms-contract th.num,
table.rooms-contract thead tr.group-head th.fixed-head, table.rooms-contract td.durations-cell { text-align: center; }
table.rooms-contract td.sec-planif input[type="date"] { margin: 0 auto; }

/* ---- inventaire : les bandeaux de type de système gardent leur couleur claire (le style sombre des en-têtes de
   groupe l'emportait : texte foncé sur fond noir, illisible) */
table.parc-table thead tr.group-head th.sec-head[class*="pal-"] { background: var(--pal-bg); color: var(--pal-ink); }
table.parc-table thead tr.group-head th.sec-head[class*="pal-"] .linkbtn { color: var(--pal-ink); font-weight: 700; }
table.parc-table .edit-col { width: 1%; white-space: nowrap; text-align: center; }

/* ---- inventaire : largeurs des colonnes fixes (le texte « Sous maintenance » débordait sur la colonne suivante) */
table.parc-table th.edit-col, table.parc-table td.edit-col { min-width: 6.5rem; max-width: 6.5rem; width: 6.5rem; }
table.parc-table th.col-room, table.parc-table td.col-room { min-width: 7rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.parc-table th.col-maint, table.parc-table td.col-maint { min-width: 10.5rem; max-width: 10.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.parc-table td, table.parc-table th { vertical-align: middle; }
table.parc-table td.edit-col { border-bottom: 1px solid var(--line); }
.system-block.readonly-block input { background: var(--paper); color: var(--muted); }
table.parc-table th.col-site, table.parc-table td.col-site { min-width: 9rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- « Toutes les salles » : bouton-case à cocher */
.btn.toggle-all { display: inline-flex; align-items: center; gap: .45rem; }
.btn.toggle-all .box { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border: 1.5px solid currentColor; border-radius: 3px; font-size: .8rem; line-height: 1; }
.btn.toggle-all.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.toggle-all.on .box { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); }

/* ---- inventaire : régie centrale */
.seg-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg-switch a { padding: .45rem 1rem; text-decoration: none; color: var(--ink); }
.seg-switch a.on { background: var(--accent); color: var(--accent-ink); }
table.parc-table tr.regie-row td { background: #eef0ec; font-weight: 600; border-top: 2px solid #1b2226; }
table.parc-table tr.regie-row td.eq-stack { font-weight: 400; }
table.parc-table td.eq-stack div { padding: .1rem 0; border-bottom: 1px dashed var(--line); white-space: nowrap; }
table.parc-table td.eq-stack div:last-child { border-bottom: 0; }
table.parc-table tr.group-collapsed { display: none !important; }
table.parc-table .group-toggle { font-size: 1rem; padding: 0 .2rem; }
.central-items input { min-width: 8rem; }
.dropdown .dropdown-group { display: block; padding: .45rem .9rem .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); }
.dropdown .dropdown-group:first-child { border-top: 0; }
h1 .h1-context { font-weight: 500; }
table.parc-table.hide-empty-regies tr.regie-row.regie-empty { display: none; }

/* L'attribut hidden l'emporte toujours (les boutons .btn imposaient leur affichage : « Effacer les filtres »
   restait visible sans filtre actif) */
[hidden] { display: none !important; }

/* ---- inventaire : audio */
table.audio-lines tr.audio-main td { background: #eef0ec; font-weight: 600; border-top: 2px solid #c9cfcb; }
table.audio-lines tr.audio-sub td.col-line { color: var(--muted); font-weight: 600; }
table.audio-lines tr.audio-sub.parent-hidden { display: none !important; }
.qty-pill { display: inline-block; min-width: 1.5rem; padding: 0 .35rem; margin-right: .35rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: .78rem; font-weight: 700; text-align: center; }
table.parc-table th.col-line, table.parc-table td.col-line { min-width: 4.5rem; }
.audio-grid input.qty-input { width: 3.2rem; text-align: center; }
.audio-grid input.model-input { min-width: 8.5rem; }
.audio-grid th[scope="row"] { text-align: left; }
.grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
table.audio-lines tr.audio-main td.col-maint { font-weight: 400; }
table.audio-table td.qty-col { text-align: center; }
table.regie-table tr.audio-main td { border-top: 2px solid #c9cfcb; }
table.regie-table tr.audio-sub.parent-hidden { display: none !important; }
.options-cell textarea { min-width: 14rem; font-size: .85rem; }
.options-cell.options-off textarea, .options-cell.options-off .options-catalogue { opacity: .35; }
select.field-select { min-width: 9rem; }

/* ---- audio : une couleur par canal (fiche de saisie et présentation ligne) */
.audio-grid th.ch-head, .audio-grid th.ch-sub { background: var(--pal-bg); color: var(--pal-ink); text-align: center; }
.audio-grid th.ch-head { font-weight: 700; border-left: 2px solid #fff; }
.audio-grid th.ch-sub { font-size: .78rem; font-weight: 600; }
.audio-grid td.ch-first, .audio-grid th.ch-sub:nth-child(even) { border-left: 2px solid #fff; }
.audio-grid td { padding: .35rem .4rem; }
.inventory-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.inventory-links span.btn[aria-current="page"] { cursor: default; }

/* ---- bons d'intervention : texte centré dans toutes les colonnes */
table.bi-table th, table.bi-table td, table.bi-table td.num, table.bi-table thead tr.group-head th.fixed-head { text-align: center; }
table.bi-table td.actions { justify-content: center; }

/* ---- Préférences › Mail */
.mail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .mail-grid { grid-template-columns: 1fr; } }
textarea.mail-body { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; line-height: 1.45; }
.mail-preview { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; background: #fff; }
.mail-preview pre { white-space: pre-wrap; font-family: inherit; font-size: .9rem; margin: .4rem 0 0; }
.mail-vars td:first-child { white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }

/* ---- fiche du site : cadres à la suite */
.site-head h1 { margin-bottom: .2rem; }
.site-subtitle { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.site-frame { margin-bottom: 1rem; }
.site-frame h3 { font-size: .95rem; margin: .2rem 0 .5rem; color: var(--muted); text-transform: none; }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.2rem 2rem; align-items: start; }
table.history td { vertical-align: middle; }

/* ---- fiche du site : tableau de bord */
.site-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; margin: .4rem 0 1rem; }
.site-kpis .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .1rem; }
.site-kpis .kpi-label { font-size: .8rem; color: var(--muted); }
.site-kpis .kpi-value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.site-kpis .kpi-sub { font-size: .8rem; color: var(--muted); }
.site-kpis .kpi-sub.ok { color: #2e7d4f; font-weight: 600; }
.site-kpis .kpi-sub.warn { color: #a5641b; font-weight: 600; }
.site-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .site-cards { grid-template-columns: 1fr; } }
.site-card { margin: 0; }
.site-card h2 { font-size: 1rem; margin: 0 0 .6rem; }
dl.card-rows { margin: 0; }
dl.card-rows > div { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
dl.card-rows > div:last-child { border-bottom: 0; }
dl.card-rows dt { color: var(--muted); font-size: .88rem; }
dl.card-rows dd { margin: 0; overflow-wrap: anywhere; }
.room-chips { list-style: none; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.room-chips li { font-size: .85rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.room-chips li.maint { background: #e6f3ea; border-color: #b9dcc4; color: #1f5c38; }
.card-links { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 0; }
.site-cards .site-card.wide { grid-column: 1 / -1; }
.site-cards .site-card.wide dl.card-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 900px) { .site-cards .site-card.wide dl.card-rows { grid-template-columns: 1fr; } }

/* ---- fiche du site : modification (vue A) */
.site-sheet-form fieldset.sheet-grid { border: 0; padding: 0; margin: 0 0 .4rem; display: grid; gap: .2rem 1rem; }
.site-sheet-form fieldset.sheet-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-sheet-form fieldset.sheet-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .site-sheet-form fieldset.sheet-grid.cols-3, .site-sheet-form fieldset.sheet-grid.cols-2 { grid-template-columns: 1fr; } }
.site-sheet-form fieldset.contacts-fieldset { border: 0; padding: 0; margin: 0; }
.contacts-table th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
.contacts-table input { width: 100%; min-width: 0; }
.dur-chips { display: inline-flex; gap: .25rem; margin-left: .35rem; vertical-align: middle; }
.chip-btn { font-size: .75rem; padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; }
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.save-bar { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap;
            margin-top: 1rem; padding: .6rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 -4px 14px rgba(0,0,0,.06); }
/* ---- secteur et temps de trajet d'un site */
.travel-box { margin-top: .6rem; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: 8px; }
.travel-box .travel-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.travel-box .travel-head h3 { margin: 0; font-size: .95rem; }
.travel-box .travel-msg { font-size: .85rem; }
.travel-box .travel-msg.error { color: #a1263a; }
.travel-box .travel-msg.ok { color: #2e7d4f; }
.save-bar .save-state { color: var(--muted); font-size: .9rem; }
.save-bar .save-state.dirty { color: #a5641b; font-weight: 600; }
.save-bar .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.site-sheet-form .rooms-table td input.duration-input { width: 6rem !important; min-width: 0; display: inline-block; }
.site-sheet-form .rooms-table td:nth-child(3) { white-space: nowrap; }
.site-sheet-form .rooms-table { width: 100%; }
.travel-box .travel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 900px) { .travel-box .travel-grid { grid-template-columns: 1fr; } }
.travel-box dl.travel-rows { margin: 0; }
.travel-box dl.travel-rows > div { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.travel-box dl.travel-rows > div:last-child { border-bottom: 0; }
.travel-box dl.travel-rows dt { color: var(--muted); font-size: .88rem; }
.travel-box dl.travel-rows dd { margin: 0; }
.travel-box .travel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 900px) { .travel-box .travel-grid { grid-template-columns: 1fr; } }
.travel-box dl.travel-rows { margin: 0; }
.travel-box dl.travel-rows > div { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.travel-box dl.travel-rows > div:last-child { border-bottom: 0; }
.travel-box dl.travel-rows dt { color: var(--muted); font-size: .88rem; }
.travel-box dl.travel-rows dd { margin: 0; }

/* ---- champs uniques : doublons */
.dup-panel { border-left: 4px solid #d9a441; background: #fff8e8; }
.dup-panel h2 { font-size: 1rem; margin: 0 0 .4rem; color: #8a5a00; }
.dup-list { margin: 0; padding-left: 1.2rem; }
.dup-list li { margin: .15rem 0; }
.dup-list code { background: #fff; border: 1px solid #ecd9a8; border-radius: 4px; padding: 0 .3rem; }
table.parc-table td.dup-cell { background: #fff3d6 !important; }
.dup-mark { color: #b06a00; cursor: help; }

/* ---- équipements : déplacement, stock */
.eq-tools { float: right; font-weight: 400; font-size: .85rem; display: inline-flex; gap: .5rem; align-items: center; }
code.eq-code { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 0 .35rem; font-size: .8rem; }
.move-options { display: grid; gap: .5rem; margin-bottom: .8rem; }
.move-options .check { font-weight: 600; }
.move-sub { margin: 0 0 .6rem 1.9rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem 1rem; }
.move-sub .check { font-weight: 400; grid-column: 1 / -1; }
.move-sub.off { display: none; }
.site-kpis .kpi-value.small { font-size: 1.1rem; }
a.eq-link { font-size: .75rem; text-decoration: none; margin-left: .3rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; }
a.eq-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---- sélecteur d'équipement (appels, bons) : une ligne — salle · recherche · retenu */
.equipment-picker .picker-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: .6rem 1rem; align-items: start; }
@media (max-width: 800px) { .equipment-picker .picker-row { grid-template-columns: 1fr; } }
.equipment-picker .picker-current { display: flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: .3rem .6rem; border: 1px dashed var(--line); border-radius: 8px; background: var(--paper); }
.equipment-picker .picker-current.empty .picker-label { color: var(--muted); }
.equipment-picker .picker-search-field { position: relative; }
.equipment-picker .picker-results { list-style: none; margin: .25rem 0 0; padding: .2rem 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-height: 14rem; overflow: auto; position: absolute; left: 0; right: 0; z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.equipment-picker .picker-results li { padding: .2rem .6rem; }
.equipment-picker .picker-results .linkbtn { text-align: left; width: 100%; }
/* ---- recherche dans l'inventaire */
.subbar-search { margin-left: auto; display: flex; align-items: center; gap: .3rem; padding: .4rem 0; }
.subbar-search input { width: 16rem; max-width: 40vw; height: 2rem; font-size: .9rem; }
.search-filters { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .6rem; }
.search-filters .chip-btn { text-decoration: none; color: var(--ink); }
.search-filters .chip-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.badge.kind-stock { background: #fff3d6; color: #8a5a00; }
.badge.kind-sorti { background: #fde2e4; color: #8a1c2c; }
.warn-text { color: #a5641b; font-weight: 600; }
.info-grid > div.info-wide, dl > div.info-wide { grid-column: 1 / -1; }
.call-form dl.info-grid.info-equipment { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
@media (min-width: 1000px) {
  .call-form dl.info-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }  /* contrat : une seule ligne */
  .call-form dl.info-grid.info-equipment { grid-template-columns: repeat(5, minmax(0, 1fr)); }  /* équipement : une seule ligne */
}
.info-grid dd.info-missing { color: #a1263a; background: #fde2e4; border-radius: 6px; padding: .1rem .4rem; display: inline-block; }
.info-grid dd.info-expired { color: #a5641b; background: #fff3d6; border-radius: 6px; padding: .1rem .4rem; display: inline-block; }

/* ---- Sites › Carte */
.map-filters { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) auto; gap: .6rem 1rem; align-items: end; }
@media (max-width: 1000px) { .map-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.map-count { align-self: center; }
#sites-map, #tickets-map { height: 70vh; min-height: 420px; border-radius: 10px; border: 1px solid var(--line); }
.map-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .6rem 0 .3rem; font-size: .85rem; }
.map-legend .legend-item i { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.agency-label { font-weight: 600; font-size: .75rem; }
.map-missing { columns: 3; column-gap: 2rem; margin: .5rem 0 0; }
@media (max-width: 900px) { .map-missing { columns: 1; } }
.leaflet-popup-content { font-size: .9rem; line-height: 1.35; }
/* plein écran de la carte */
.map-fullscreen { width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 16px; cursor: pointer; background: #fff; border: 2px solid rgba(0,0,0,.2); border-radius: 4px; padding: 0; }
.map-fullscreen:hover { background: #f4f4f4; }
.map-panel.is-fullscreen { background: var(--paper); padding: .6rem; display: flex; flex-direction: column; }
.map-panel.is-fullscreen #sites-map { flex: 1 1 auto; height: auto; min-height: 0; }
.map-panel.is-fullscreen > p { margin: .3rem 0 0; }
.map-panel:fullscreen { width: 100vw; height: 100vh; }
code.api-key { font-size: 1rem; padding: .2rem .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; user-select: all; }
pre.api-sample { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; font-size: .85rem; overflow-x: auto; }

/* ---- Tickets */
.ticket-states { margin-bottom: .6rem; }
.badge.state-ouvert { background: #e3effa; color: #1f4f8a; }
.badge.state-attente { background: #fff3d6; color: #8a5a00; }
.badge.state-resolu { background: #e6f3ea; color: #1f5c38; }
.badge.state-ferme { background: #ececec; color: #555; }
.badge.prio-critique { background: #fde2e4; color: #8a1c2c; font-weight: 700; }
.badge.prio-haute { background: #fde9d9; color: #8a3b00; }
.badge.prio-basse { background: #f1f1f1; color: #666; }
tr.ticket-closed td { color: var(--muted); }
td.late { color: #a1263a; font-weight: 600; }
.ticket-states-bar form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ticket-states-bar .state-comment { flex: 1 1 14rem; min-width: 10rem; }
.ticket-description { white-space: pre-wrap; margin: 0; }
.ticket-feed { list-style: none; margin: 0 0 1rem; padding: 0; }
.ticket-feed li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.ticket-feed li:last-child { border-bottom: 0; }
.ticket-feed .feed-tag { font-size: .8rem; color: var(--muted); }
.ticket-feed .feed-public .feed-tag { color: #1f5c38; }
.ticket-feed .feed-text { white-space: pre-wrap; margin-top: .15rem; }
.ticket-feed .feed-etat .feed-text, .ticket-feed .feed-lien .feed-text, .ticket-feed .feed-creation .feed-text { color: var(--muted); font-size: .92rem; }
.attach-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
@media (max-width: 700px) { .ticket-feed li { grid-template-columns: 1fr; } }
.call-head h1 .btn.small { margin-left: .6rem; vertical-align: middle; font-weight: 500; }
.stats-table td.num, .stats-table th.num { text-align: right; white-space: nowrap; }
.stats-table .bar-cell { width: 8rem; padding-left: 0; }
.stat-bar { display: block; height: .55rem; background: #c9ddf3; border-radius: 3px; min-width: 2px; }
.stats-details { margin-top: .6rem; }
.stats-details summary { cursor: pointer; color: var(--muted); font-size: .9rem; }

/* ---- fiche de ticket en deux colonnes */
.ticket-cols { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start;
  height: calc(100vh - 10.5rem); min-height: 24rem; }
.ticket-side, .ticket-main { max-height: 100%; overflow-y: auto; padding-right: .2rem; scrollbar-width: thin; }
.ticket-pinned { position: sticky; top: 0; z-index: 3; background: var(--paper); padding-bottom: .2rem; }
.ticket-pinned .ticket-description { max-height: 9rem; overflow-y: auto; }
.side-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.side-pair > div { padding: .45rem 0; }
@media (max-width: 1000px) { .ticket-cols { grid-template-columns: 1fr; height: auto; } .ticket-side, .ticket-main { max-height: none; overflow: visible; } .ticket-pinned { position: static; } }
.ticket-side .panel, .ticket-main .panel { margin: 0 0 1rem; }
.ticket-side h2 { font-size: 1rem; margin: 0 0 .5rem; }
dl.side-rows { margin: 0; }
dl.side-rows > div { padding: .45rem 0; border-bottom: 1px solid var(--line); }
dl.side-rows > div:last-child { border-bottom: 0; }
dl.side-rows dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
dl.side-rows dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.state-form { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.state-form .state-comment { width: 12rem; }
/* en-tête du ticket : boutons d'état, commentaire, Modifier et Retour alignés et de même hauteur */
.ticket-head-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ticket-head-actions .btn, .ticket-head-actions .state-comment { height: 2.4rem; box-sizing: border-box; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 .9rem; font-size: .95rem; line-height: 1; margin: 0; }
.ticket-head-actions .state-comment { padding: 0 .7rem; justify-content: flex-start; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { padding: .25rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.link-list li:last-child { border-bottom: 0; }
.attach-form select { width: 100%; }
.att-list { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; }
.att-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; padding: .15rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); text-decoration: none; color: var(--ink); }
.att-chip:hover { border-color: var(--accent); }
.att-del { margin-left: -.2rem; }
.att-del .linkbtn { color: var(--muted); font-size: .8rem; }
.dropzone { display: block; border: 2px dashed var(--line); border-radius: 10px; padding: .7rem .9rem; cursor: pointer; background: var(--paper); font-size: .92rem; }
.dropzone.over { border-color: var(--accent); background: #fff5f6; }
.dropzone input[type="file"] { display: none; }
.dropzone-list { display: block; margin-top: .3rem; font-size: .85rem; color: var(--ink); }

/* ---- éditeur de texte enrichi (Quill) */
.rich-editor .ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; background: var(--paper); border-color: var(--line); }
.rich-editor .ql-container.ql-snow { border-radius: 0 0 8px 8px; border-color: var(--line); font-family: inherit; font-size: 1rem; background: #fff; height: auto; }
.rich-editor .ql-editor { line-height: 1.45; }
.rich-editor .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.rich-editor .ql-snow .ql-picker.ql-font { width: 9rem; }
.rich-editor .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "Police"; }
.rich-editor .ql-snow .ql-picker.ql-font [data-value="Arial"]::before { content: "Arial"; font-family: Arial, sans-serif; }
.rich-editor .ql-snow .ql-picker.ql-font [data-value="Verdana"]::before { content: "Verdana"; font-family: Verdana, sans-serif; }
.rich-editor .ql-snow .ql-picker.ql-font [data-value="Georgia"]::before { content: "Georgia"; font-family: Georgia, serif; }
.rich-editor .ql-snow .ql-picker.ql-font [data-value="Times New Roman"]::before { content: "Times"; font-family: "Times New Roman", serif; }
.rich-editor .ql-snow .ql-picker.ql-font [data-value="Courier New"]::before { content: "Courier"; font-family: "Courier New", monospace; }
.rich-editor .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "Taille"; }
.rich-editor .ql-snow .ql-picker.ql-size [data-value="12px"]::before { content: "Petit"; }
.rich-editor .ql-snow .ql-picker.ql-size [data-value="14px"]::before { content: "Normal"; }
.rich-editor .ql-snow .ql-picker.ql-size [data-value="18px"]::before { content: "Grand"; }
.rich-editor .ql-snow .ql-picker.ql-size [data-value="24px"]::before { content: "Très grand"; }
.ql-snow .ql-tooltip { z-index: 30; }
.rich-content li[data-list="bullet"] { list-style: disc; }
.rich-content li[data-list="ordered"] { list-style: decimal; }
.rich-content ul, .rich-content ol { margin: .3rem 0 .3rem 1.2rem; }
.rich-content p { margin: 0 0 .3rem; }
.ticket-description.rich-content { white-space: normal; }
.ticket-feed .feed-text.rich-content { white-space: normal; }
.ticket-feed .entry-edit { margin-top: .3rem; }

/* ---- avatars, compte */
img.avatar { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--line); }
img.avatar-lg { width: 4.5rem; height: 4.5rem; }
img.avatar-sm { width: 1.4rem; height: 1.4rem; margin-right: .3rem; }
.userlink { display: inline-flex; align-items: center; gap: .4rem; }
.account-avatar { display: flex; gap: 1rem; align-items: center; }
.writing-color .inline-form { align-items: center; gap: .8rem; }
.writing-preview { font-size: 1rem; }
.ticket-feed .feed-meta { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); column-gap: .45rem; align-items: start; }
.ticket-feed .feed-meta img.avatar { width: 1.8rem; height: 1.8rem; grid-row: span 2; }
.ticket-feed .feed-meta strong, .ticket-feed .feed-meta .muted { grid-column: 2; }
.ticket-feed .feed-meta br { display: none; }
.writing-color input[type="color"] { width: 3.2rem; height: 2.2rem; padding: .1rem; }
.state-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.priority-form { margin-left: .4rem; }
.priority-form select { font-size: .85rem; height: 1.8rem; padding: 0 .3rem; }

/* ---- en-tête : identifiant + profil */
.topbar .userbox { display: flex; flex-direction: row; align-items: center; gap: .9rem; flex-wrap: nowrap; }
.useridentity { display: inline-flex; flex-direction: column; line-height: 1.15; }
.userlogin { font-weight: 600; }
.userprofile { font-size: .78rem; }
.profile-switch { margin: 0; }
.profile-switch select { font-size: .78rem; padding: 0 .2rem; height: 1.4rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); max-width: 11rem; }
.profiles-form { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.profiles-more .checks { display: flex; flex-direction: column; gap: .15rem; margin-top: .2rem; }
.contracts-table input[type="number"], .contracts-table input[type="text"] { width: 6rem; }
.contracts-table input[type="date"] { width: 9.5rem; }
.contracts-table select { max-width: 11rem; }
.contracts-table td.contract-end { white-space: nowrap; }
tr.contract-expired td { color: var(--muted); }
.info-contracts { margin: .3rem 0 .4rem; font-size: .9rem; }
.info-contracts td.info-expired { color: #a5641b; }

/* ---- fiche du ticket : Description et Nouveau suivi sur une ligne (écrans 13 pouces compris) */
.pinned-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .8rem; align-items: stretch; margin-bottom: 1rem; }
.pinned-row > .panel { margin: 0; display: flex; flex-direction: column; min-height: 0; padding: .7rem .9rem; }
.pinned-row > .pinned-desc { max-height: 16.5rem; }
.pinned-row .followup-form > * { flex-shrink: 0; }
.pinned-row > .panel:only-child { grid-column: 1 / -1; }
.pinned-row h2 { font-size: 1rem; margin: 0 0 .4rem; }
.pinned-row .pinned-desc .ticket-description { flex: 1 1 auto; max-height: none; overflow-y: auto; }
.pinned-row .pinned-desc .att-list { flex: 0 0 auto; }
.pinned-row .followup-form { gap: .4rem; flex: 1 1 auto; min-height: 0; }
.pinned-row .followup-form .field { margin: 0; }
.pinned-row .rich-editor .ql-editor { min-height: 3.6rem; max-height: 7.5rem; overflow-y: auto; padding: .4rem .6rem; }
.pinned-row .rich-area { min-height: 0 !important; }
.pinned-row .rich-editor .ql-toolbar.ql-snow { padding: 3px 4px; }
.pinned-row .rich-editor .ql-toolbar .ql-formats { margin-right: 6px; }
.pinned-row .rich-editor .ql-snow .ql-picker.ql-font { width: 6.6rem; }
.pinned-row .rich-editor .ql-snow .ql-picker.ql-size { width: 5.6rem; }
.pinned-row .rich-editor .ql-toolbar button { width: 24px; padding: 3px 4px; }
.pinned-row .dropzone { padding: .25rem .6rem; font-size: .85rem; border-width: 1px; }
.pinned-row .followup-form .actions { flex-wrap: nowrap; gap: .6rem; justify-content: space-between; align-items: center; }
.pinned-row .public-check { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .4rem; align-items: center; line-height: 1.2; min-width: 0; }
.pinned-row .public-check input { grid-row: span 2; margin: 0; }
.pinned-row .public-hint { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
@media (max-width: 1500px) { .ticket-cols { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); } }
@media (max-width: 1100px) { .pinned-row { grid-template-columns: 1fr; } .pinned-row > .pinned-desc { max-height: 10rem; } }

/* ---- prêts de matériel */
.badge.loan-badge { background: #fff3d6; color: #8a5a00; }
.badge.loan-late { background: #fde2e4; color: #8a1c2c; font-weight: 600; }
.badge.loan-ok { background: #e6f3ea; color: #1f5c38; }
.loan-row { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.loan-row:last-of-type { border-bottom: 0; }
.loan-row.loan-done { opacity: .75; }
.loan-row form.inline { display: block; margin-top: .25rem; }
.loan-add { margin-top: .5rem; }
.loan-add > summary { list-style: none; display: inline-block; }
.loan-add > summary::-webkit-details-marker { display: none; }
.loan-add[open] > summary { margin-bottom: .5rem; }
.loan-add select { width: 100%; }

/* ---- vérification avant résolution */
.check-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.check-list > li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.check-list > li:last-child { border-bottom: 0; }
.check-list .check-mark { font-weight: 700; font-size: 1.05rem; text-align: center; }
.check-list li.ok .check-mark { color: #1f5c38; }
.check-list li.ko .check-mark { color: #a1263a; }
.check-list li.warn .check-mark { color: #a5641b; }
.check-list li.neutral .check-mark { color: var(--muted); }
.check-list .exception { margin-top: .4rem; padding: .5rem .6rem; border: 1px dashed #d79aa4; border-radius: 8px; }
.check-list .exception textarea { width: 100%; margin-top: .3rem; }
.check-list .bl-choice { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .35rem; }
.att-chip .bl-tag, .bl-tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: 0 .3rem; border-radius: 4px; background: #1f6fb2; color: #fff; }
.att-bl-toggle .linkbtn { font-size: .72rem; color: var(--muted); }
.attachment-kind { display: flex; gap: .8rem; align-items: center; font-size: .85rem; }

/* ---- fenêtre de vérification avant résolution */
dialog.resolve-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); border: 0; border-radius: 14px; padding: 1.1rem 1.3rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25); background: var(--panel); color: var(--ink); overflow-y: auto; }
dialog.resolve-dialog::backdrop { background: rgba(20, 24, 26, .45); }
.resolve-dialog .dialog-head { display: flex; justify-content: space-between; align-items: center; }
.resolve-dialog .dialog-head h2 { margin: 0; font-size: 1.15rem; }
.resolve-dialog .dialog-head .dialog-close { font-size: 1.1rem; color: var(--muted); }
.resolve-dialog .check-list { margin-bottom: .6rem; }
.contracts-table td.contract-file { font-size: .85rem; }
.contracts-table td.contract-file input[type="file"] { width: 11rem; font-size: .8rem; }
.doc-list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.doc-list li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.doc-list li:last-child { border-bottom: 0; }
.doc-form { flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---- Aide */
.help-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 990; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; font-size: 1.25rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.help-fab:hover { background: var(--accent-dark); }
.help-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; width: min(30rem, 92vw); background: var(--panel);
  box-shadow: -10px 0 30px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.help-panel[hidden] { display: none; }
.help-panel-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.help-panel-body { flex: 1 1 auto; overflow-y: auto; padding: .8rem 1rem; }
.help-panel-foot { padding: .7rem 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.help-body h1 { font-size: 1.35rem; } .help-body h2 { font-size: 1.12rem; margin-top: 1.4rem; } .help-body h3 { font-size: 1rem; margin-top: 1rem; }
.help-body p, .help-body li { line-height: 1.55; max-width: 60rem; }
.help-body code { font-size: .9em; }
.help-body .help-note { background: #e3effa; border-left: 3px solid #1f6fb2; padding: .5rem .7rem; border-radius: 6px; }
.help-layout { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.help-toc { position: sticky; top: .5rem; }
.help-toc ul { list-style: none; margin: 0; padding: 0; } .help-toc li { padding: .15rem 0; }
.help-toc li.level-3 { padding-left: .9rem; font-size: .9rem; }
.help-search { display: flex; gap: .4rem; } .help-search input { flex: 1 1 auto; }
.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; }
.help-cards a.card { display: block; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-decoration: none; color: var(--ink); }
.help-cards a.card:hover { border-color: var(--accent); }
.help-cards .card small { color: var(--muted); display: block; margin-top: .2rem; }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; } }
@media print { .help-fab, .help-panel { display: none !important; } }
.help-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.help-grid > .panel:first-child { grid-column: 1; grid-row: 1; }
.help-grid > .help-procedures-panel { grid-column: 1; grid-row: 2; }
.help-grid > .panel:not(:first-child):not(.help-procedures-panel) { grid-column: 2; grid-row: 1 / span 2; }
.help-grid ul.help-toc { list-style: disc; padding-left: 1.2rem; position: static; }
.help-grid ul.help-toc li { padding: .25rem 0; }
@media (max-width: 1000px) { .help-grid { grid-template-columns: 1fr; } .help-grid > .panel:first-child { grid-row: auto; } }
/* bouton « ? » : dans la barre du sous-menu, à droite (loin des barres d'enregistrement du bas) */
.help-fab.help-fab-top { position: static; width: 2rem; height: 2rem; font-size: 1rem; box-shadow: none; border: 1px solid var(--line);
  background: var(--panel); color: var(--accent); align-self: center; margin-left: .6rem; flex: 0 0 auto; }
.help-fab.help-fab-top:hover { background: var(--accent); color: #fff; }
.help-fab-slot { display: flex; justify-content: flex-end; padding: .5rem 1.1rem 0; }
.map-ticket-list { margin: .35rem 0 0; padding-left: 1rem; max-height: 14rem; overflow-y: auto; }
.map-ticket-list li { margin-bottom: .3rem; }
.proc-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.proc-list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.proc-list li:last-child { border-bottom: 0; }

/* ---- Outils › BOSS SHARP */
.boss-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .9rem; }
.boss-tabs a { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--panel); font-size: .92rem; }
.boss-tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.boss-cols { display: grid; grid-template-columns: minmax(22rem, 38rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.boss-form h2 { font-size: 1rem; margin: .8rem 0 .3rem; } .boss-form h2:first-child { margin-top: 0; }
.boss-form .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .7rem; }
.boss-form .actions { margin-top: 1rem; flex-wrap: wrap; }
.boss-save { margin-top: .8rem; } .boss-save > summary { list-style: none; display: inline-block; } .boss-save[open] > summary { margin-bottom: .6rem; }
.boss-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: .8rem; align-items: start; }
.boss-results .panel { margin: 0; } .boss-results h2 { font-size: 1.02rem; margin: 0 0 .4rem; } .boss-results h3 { font-size: .95rem; margin: .7rem 0 .3rem; }
.boss-kv { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; margin: 0; }
.boss-kv dt { color: var(--muted); font-size: .8rem; } .boss-kv dd { margin: 0; font-weight: 600; }
.boss-big { font-size: 1.35rem; font-weight: 700; margin: .1rem 0 .5rem; }
.badge.boss-ok { background: #e6f3ea; color: #1f5c38; } .badge.boss-ko { background: #fde2e4; color: #8a1c2c; }
.boss-results.loading { opacity: .55; transition: opacity .15s; }
table.boss-grid th { white-space: nowrap; }
@media (max-width: 1200px) { .boss-cols { grid-template-columns: 1fr; } }
.boss-results .badge { white-space: nowrap; }
/* BOSS SHARP : Cinéma sur toute la largeur, puis les cadres de saisie, puis les résultats */
.boss-form { display: block; }
.boss-form .panel { margin: 0; }
.boss-cinema { margin-bottom: .8rem !important; }
.boss-cinema-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .9rem; }
.boss-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .8rem; margin-bottom: .8rem; align-items: start; }
.boss-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem; }
.boss-inputs h2, .boss-cinema h2 { font-size: 1rem; margin: 0 0 .5rem; }
@media (max-width: 700px) { .boss-cinema-fields, .boss-fields { grid-template-columns: 1fr; } }
.boss-results { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
@media (min-width: 760px) { .boss-results .boss-wide { grid-column: span 2; } }
.boss-results table.data { font-size: .9rem; }
.boss-results table.data th, .boss-results table.data td { padding: .3rem .45rem; }
.boss-results table.data td { white-space: nowrap; }
.boss-results table.data thead th { white-space: normal; line-height: 1.2; }
.boss-results .panel { min-width: 0; overflow-x: auto; }
.field-values .pos-input { width: 3.5rem; } .field-values td input[name^="value_"] { width: 100%; min-width: 14rem; }
.field-values tr.inactive input[name^="value_"] { color: var(--muted); text-decoration: line-through; }
.badge.pair-warn { background: #fff3d6; color: #8a5a00; margin-left: .3rem; }
.families-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: start; }
.family-block { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.family-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .2rem .6rem; margin-top: .3rem; }
.family-members .other-family { color: var(--muted); }
.compat-grid th { white-space: nowrap; }
@media (max-width: 1100px) { .families-cols { grid-template-columns: 1fr; } }
.csv-import .import-form { margin: .6rem 0 .3rem; gap: .6rem; align-items: center; }
.badge.on-call-badge { background: #fff3d6; color: #8a5a00; font-weight: 600; }
.on-call-row { display: flex; align-items: center; gap: .6rem; min-height: 2.2rem; }
.on-call-chips { margin-bottom: .6rem; }
.ok-text { color: #1f5c38; font-weight: 600; }
.report-table td, .report-table th { white-space: nowrap; }
.raw-table td { white-space: nowrap; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }
.report-link h3 { font-size: .98rem; margin: .8rem 0 .3rem; }
/* Types de systèmes › Champs : barre d'enregistrement figée en bas, comme les tickets */
form.sticky-bottom { position: sticky; bottom: 0; z-index: 20; margin-top: .8rem; }
.batch-bar.save-bar { position: static; margin: 0; justify-content: space-between; }
/* Types de systèmes : en-têtes de colonnes figés sous le menu */
table.sticky-head thead th { position: sticky; top: var(--chrome-h); z-index: 6; box-shadow: 0 1px 0 var(--line); }
.compat-wrap { overflow: visible; }
.orphan-box { margin: .6rem 0 .4rem; }
.orphan-badge { font-size: .72rem; margin: .1rem .15rem .1rem 0; }
/* colonnes figées du tableau complet des rapports : N° · Date (étroite) · Site (large, « … » si trop long) · Salle */
table.sites-sheet.reports-sheet:not(.contracts-sheet) td.sticky-1, table.sites-sheet.reports-sheet:not(.contracts-sheet) th.sticky-1 { min-width: 7.5rem; max-width: 7.5rem; }
table.sites-sheet.reports-sheet:not(.contracts-sheet) td.sticky-2, table.sites-sheet.reports-sheet:not(.contracts-sheet) th.sticky-2 { min-width: 6.6rem; max-width: 6.6rem; }
table.sites-sheet.reports-sheet:not(.contracts-sheet) td.sticky-3, table.sites-sheet.reports-sheet:not(.contracts-sheet) th.sticky-3 { min-width: 16rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.sites-sheet.reports-sheet:not(.contracts-sheet) td.sticky-4, table.sites-sheet.reports-sheet:not(.contracts-sheet) th.sticky-4 { min-width: 4.5rem; max-width: 4.5rem; }
table.sites-sheet.reports-sheet:not(.contracts-sheet) thead tr.filter-row th input { min-width: 0; width: 100%; }
/* Rapports › Tableau complet : sections colorées comme l'inventaire */
table.reports-sheet th[class*="pal-"] { background: var(--pal-bg); color: var(--pal-ink); }
table.reports-sheet th.sec-head[class*="pal-"] .linkbtn { color: var(--pal-ink); }
table.reports-sheet thead tr.group-head th.sec-head[class*="pal-"] { background: var(--pal-bg); color: var(--pal-ink); }
table.reports-sheet thead tr.group-head th.sec-head[class*="pal-"] .linkbtn { color: var(--pal-ink); }
table.reports-sheet th.sys-start, table.reports-sheet td.sys-start { border-left: 2px solid var(--line); }
.pdf-upload { display: inline-flex; gap: .4rem; align-items: center; margin-left: .5rem; }
.pdf-upload input[type="file"] { max-width: 15rem; font-size: .82rem; }
/* Appels : état du contrat du site à la date de l'appel */
.badge.contract-actif { background: #e6f3ea; color: #1f5c38; } .badge.contract-echu { background: #fde2e4; color: #8a1c2c; }
.badge.contract-futur { background: #fff3d6; color: #8a5a00; } .badge.contract-aucun, .badge.contract-inconnu { background: #eceff1; color: #5b676c; }
.contract-cell { white-space: nowrap; }
/* Contrats : compteur d'interventions incluses */
.quota-bar { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: #e3e6e8; overflow: hidden; vertical-align: middle; margin-right: .4rem; }
.quota-bar i { display: block; height: 100%; background: #2f8f55; } .quota-bar.quota-full i { background: #c98a00; } .quota-bar.quota-over i { background: #c9324a; }
.contract-counter { white-space: nowrap; } .contract-counted { margin-top: .6rem; } .contract-counted summary { cursor: pointer; }
/* Bon d'intervention : prise en charge */
.coverage-field { grid-column: 1 / -1; flex-basis: 100%; min-width: 0; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg-item { padding: .35rem .7rem; border-right: 1px solid var(--line); cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; font-size: .92rem; }
.seg-item:last-child { border-right: 0; } .seg-item:has(input:checked) { background: #fde8ec; color: var(--accent); font-weight: 600; }
.coverage-contract { margin-top: .5rem; } .coverage-contract select { max-width: 100%; }
.coverage-info { margin-top: .4rem; padding: .45rem .7rem; border-radius: 8px; font-size: .9rem; }
.coverage-info.ok { background: #e6f3ea; color: #1f5c38; border: 1px solid #bfe0c9; } .coverage-info.warn { background: #fff3d6; color: #8a5a00; border: 1px solid #f0d49a; }
.badge.list-bubble { white-space: nowrap; font-weight: 600; } .bubble-cell { white-space: nowrap; } .bubble-cell input[type=color] { width: 2.2rem; height: 1.6rem; padding: 0; vertical-align: middle; }
/* Appels : tableau type tableur */
.calls-sheet td.comment-cell { max-width: 26rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calls-sheet td.comment-cell .comment-preview { display: inline-block; max-width: 23rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; color: var(--muted); }
.calls-sheet td.actions { white-space: nowrap; }
/* Appels : colonnes figées Technicien, Date, Heure, Groupe, Site ; Fin, Durée, Admin au plus juste ; le commentaire prend le reste */
table.sites-sheet.calls-sheet th, table.sites-sheet.calls-sheet td { width: 1%; white-space: nowrap; }
table.sites-sheet.calls-sheet th.col-comment, table.sites-sheet.calls-sheet td.col-comment { width: auto; }
table.sites-sheet.calls-sheet th.sticky-1, table.sites-sheet.calls-sheet td.sticky-1 { min-width: 7.5rem; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
table.sites-sheet.calls-sheet th.sticky-2, table.sites-sheet.calls-sheet td.sticky-2 { min-width: 6.4rem; max-width: 6.4rem; }
table.sites-sheet.calls-sheet th.sticky-3, table.sites-sheet.calls-sheet td.sticky-3 { min-width: 4.2rem; max-width: 4.2rem; }
table.sites-sheet.calls-sheet th.sticky-4, table.sites-sheet.calls-sheet td.sticky-4 { min-width: 6rem; max-width: 6rem; overflow: hidden; text-overflow: ellipsis; }
table.sites-sheet.calls-sheet th.sticky-5, table.sites-sheet.calls-sheet td.sticky-5 { min-width: 11rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.sites-sheet.calls-sheet th.col-time, table.sites-sheet.calls-sheet td.col-time { min-width: 3.6rem; max-width: 3.6rem; }
table.sites-sheet.calls-sheet th.col-min, table.sites-sheet.calls-sheet td.col-min { min-width: 4.6rem; max-width: 4.6rem; }
table.sites-sheet.calls-sheet thead tr.filter-row th input { min-width: 0; width: 100%; }
table.sites-sheet.calls-sheet thead tr.filter-row th { padding-left: .2rem; padding-right: .2rem; }
form.per-page-form { display: inline-flex; margin: 0 0 0 .6rem; vertical-align: middle; }
form.per-page-form label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: normal; color: var(--ink); }
form.per-page-form select { display: inline-block; width: auto; min-width: 0; padding: .1rem 1.6rem .1rem .4rem; margin: 0; }
.calls-sheet tr.filter-row input, .calls-sheet tr.filter-row select { min-width: 0; width: 100%; box-sizing: border-box; }
.calls-sheet th.sec-duree, .calls-sheet td.sec-duree { min-width: 5rem; }
table.sites-sheet.calls-sheet thead tr.calls-nogroup { display: none; }
/* Appels : lignes alternées (aussi dans les colonnes figées) et survol */
/* Lignes alternées, dans tous les tableaux (table.data) : voile posé par-dessus la couleur de la cellule, pour que les
   teintes de section et les cellules signalées restent visibles ; ligne survolée surlignée. */
table.data.zebra > tbody > tr.alt > td { background-image: linear-gradient(rgba(27, 34, 38, .05), rgba(27, 34, 38, .05)); }
table.data.zebra > tbody > tr:hover > td { background-image: linear-gradient(rgba(42, 111, 176, .10), rgba(42, 111, 176, .10)); }
/* Page d'accueil */
.home-head { margin-bottom: 1rem; } .home-head h1 { margin: 0; } .home-head p { margin: .2rem 0 0; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.home-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; min-height: 9.5rem; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.home-tile:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.home-tile-head { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.home-tile-head .home-icon { width: 2.6rem; height: 2.6rem; flex: none; }
.home-tile-name { font-size: 1.15rem; font-weight: 700; }
.home-tile-desc { margin: 0; color: var(--muted); font-size: .9rem; }
.home-stats { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.home-stat { font-size: .82rem; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; }
a.home-stat:hover { border-color: var(--accent); }
.home-stat.tone-o { background: #fff3d6; color: #8a5a00; border-color: #f0d49a; } .home-stat.tone-r { background: #fde2e4; color: #8a1c2c; border-color: #f2b8c0; }
.home-stat.tone-g { background: #e6f3ea; color: #1f5c38; border-color: #bfe0c9; }
.home-links { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .85rem; } .home-links a { text-decoration: none; }
.home-links a:hover { text-decoration: underline; }
/* Stats Appels */
.stats-filters .chips-row, .chips-row { display: inline-flex; gap: .3rem; flex-wrap: wrap; vertical-align: middle; }
.chips-row .chip-btn { cursor: pointer; font: inherit; font-size: .82rem; text-decoration: none; color: var(--ink); padding: .15rem .6rem; }
.chips-row .chip-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
form.filters.stats-filters > .field.period-field { flex: 0 0 100%; width: 100%; max-width: none; } .stats-filters .period-field .chips-row { margin-top: .15rem; }
.filters .field.site-multi { min-width: 16rem; flex: 1 1 18rem; max-width: 30rem; }
.site-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem .3rem; background: var(--panel); }
.site-chips input { border: 0; flex: 1; min-width: 9rem; padding: .25rem .3rem; outline: none; background: transparent; }
.site-chip { display: inline-flex; align-items: center; gap: .3rem; background: #fde8ec; color: var(--accent); border-radius: 999px; padding: .1rem .2rem .1rem .6rem; font-size: .85rem; font-weight: 600; }
.site-chip a { text-decoration: none; color: inherit; padding: 0 .35rem; border-radius: 999px; } .site-chip a:hover { background: rgba(0,0,0,.08); }
.stats-kpis .kpi { position: relative; } .delta { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.delta.up { color: #1f5c38; } .delta.down { color: #8a1c2c; }
.stats-compare { margin: -.3rem 0 1rem; }
.stats-grid { display: grid; gap: 1rem; margin-bottom: 1rem; } .stats-grid.two { grid-template-columns: 3fr 2fr; } .stats-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stats-grid.two, .stats-grid.three { grid-template-columns: 1fr; } }
.stats-grid .panel h2 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.05rem; }
.stats-site h3 { font-size: .9rem; color: var(--muted); margin: 0 0 .4rem; }
.stats-site { border: 1.5px dashed var(--accent); }
.evo { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; align-items: end; height: 12rem; border-bottom: 1px solid var(--line); padding-top: .3rem; }
.evo-bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-decoration: none; border-radius: 3px 3px 0 0; }
.evo-bar:hover { background: rgba(42, 111, 176, .08); }
.evo-bar i { display: block; width: 100%; } .evo-bar i:first-child { border-radius: 3px 3px 0 0; }
.evo-j, .sw.evo-j { background: #7fa7cf; } .evo-a, .sw.evo-a { background: #c9324a; }
.evo-labels { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; font-size: .7rem; color: var(--muted); text-align: center; margin-top: .2rem; }
.legend { display: flex; gap: .9rem; flex-wrap: wrap; margin: .5rem 0 0; } .sw { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.heat { display: grid; grid-template-columns: 2.2rem repeat(24, minmax(0, 1fr)); gap: 2px; font-size: .7rem; color: var(--muted); align-items: center; }
.heat-c { display: block; height: 1.35rem; border-radius: 3px; background: rgba(201, 50, 74, calc(.06 + var(--v) * .94)); }
.heat-h { text-align: left; } .heat-d { font-weight: 600; }
.hb { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) 2.6rem; gap: .5rem; align-items: center; margin: .3rem 0; font-size: .88rem; }
.hb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; } a.hb-label:hover { color: var(--accent); text-decoration: underline; }
.hb-track { height: .75rem; border-radius: 999px; background: #eceff1; overflow: hidden; display: block; }
.hb-track > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.hb-track.stacked { display: flex; background: transparent; } .hb-track.stacked > i { border-radius: 0; height: 100%; }
.hb-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cell-journee-jour, .hb-track.stacked > i.cell-journee-jour { background: #7fa7cf; } .cell-journee-nuit, .hb-track.stacked > i.cell-journee-nuit { background: #3d5f86; }
.cell-astreinte-jour, .hb-track.stacked > i.cell-astreinte-jour { background: #c9324a; } .cell-astreinte-nuit, .hb-track.stacked > i.cell-astreinte-nuit { background: #7a1e2e; }
.stats-details { margin-top: .5rem; } .stats-details > summary { cursor: pointer; padding: .5rem 0; }
/* SNMP */
.snmp-results { margin: .5rem 0; } .snmp-table td { vertical-align: top; }
.badge.snmp-ok { background: #e6f3ea; color: #1f5c38; } .badge.snmp-warn { background: #fff3d6; color: #8a5a00; }
.badge.snmp-alert { background: #fde2e4; color: #8a1c2c; } .badge.snmp-unknown { background: #eceff1; color: #5b676c; }
#pick-list table td { vertical-align: top; } #snmp-test-out { background: var(--paper); padding: .5rem; border-radius: 6px; white-space: pre-wrap; }
tr.snmp-detail > td { padding-top: .1rem; border-top: 0; } tr.snmp-detail .badge { margin: .1rem .15rem .1rem 0; }