/* Minimal CSS sans framework. POC viewer web V0.1. */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
    background: #f8fafc;
}
.topbar {
    background: var(--brand, #1e3a8a);
    color: #fff;
    padding: 12px 24px;
    display: flex;
    gap: 24px;
    align-items: center;
}
.topbar a { color: #fff; text-decoration: none; font-weight: 500; }
.topbar a:hover { text-decoration: underline; }
.topbar .brand { font-weight: bold; font-size: 1.1em; }
.topbar .poc {
    background: #f97316;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    margin-left: 6px;
}

main { max-width: 1100px; margin: 0 auto; padding: 24px; }
h1 { margin-top: 0; color: #1e3a8a; }
h2 { color: #1e40af; border-bottom: 2px solid #dbeafe; padding-bottom: 4px; }
p.lede { color: #475569; font-size: 1.05em; }
p.muted { color: #475569; font-size: 0.9em; }
code {
    background: #eef2ff;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: Consolas, Menlo, monospace;
    font-size: 0.95em;
}

.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px 24px;
    margin: 16px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .grid-2 { grid-template-columns: 1fr; }
}

table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; }
th { background: #eef2ff; color: #1e3a8a; font-weight: 600; }
tr:hover td { background: #f9fafb; }

/* Lignes de tableau qui ouvrent un détail au clic : affordance explicite
   (curseur main + surbrillance bleue + barre d'accent à gauche au survol). */
tr.clickable-row { cursor: pointer; transition: background .12s; }
tr.clickable-row:hover td { background: #eff6ff; }
tr.clickable-row:hover td:first-child { box-shadow: inset 3px 0 0 #2563eb; }
/* Chevron « › » discret en fin de ligne, plus marqué au survol. Le padding
   droit réserve la place du chevron (les dernières colonnes sont alignées à
   droite : mesures, fréquence). */
tr.clickable-row > td:last-child { position: relative; padding-right: 26px; }
tr.clickable-row > td:last-child::after {
    content: "›"; position: absolute; right: 9px; top: 50%;
    transform: translateY(-50%); color: #cbd5e1; font-size: 1.1rem;
    font-weight: 700; transition: color .12s; }
tr.clickable-row:hover > td:last-child::after { color: #2563eb; }

form label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: #374151;
}
form input, form select, form textarea {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    margin-top: 4px;
    font-weight: normal;
}
form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30,64,175,.15);
}

.btn, button.btn {
    display: inline-block;
    background: var(--brand, #1e40af);
    color: #fff;
    padding: 8px 18px;
    border-radius: 4px;
    border: 0;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover, button.btn:hover { filter: brightness(0.88); }
.btn-secondary { background: #6b7280; }
.btn-secondary:hover { background: #4b5563; }
.btn-small { padding: 6px 12px; font-size: 0.9em; }

.form-actions { margin-top: 16px; }

.alert {
    padding: 10px 14px;
    border-radius: 4px;
    margin-top: 12px;
    font-weight: 500;
}
.alert.ok {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}
.alert.err {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* V2.30 : pages RSE, audit, catalogue */
.badge {
    display: inline-block;
    background: #1e40af;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1.1em;
}
.hint { color: #475569; font-size: 0.85em; font-style: italic; }
.flash { background: #dcfce7; color: #15803d; border: 1px solid #86efac;
  padding: 8px 12px; border-radius: 6px; margin: .5rem 0; }

/* ── Colonnes redimensionnables / sélectionnables (table-tools.js) ─────────
   .tt-active : table passée en table-layout:fixed avec colgroup. On borne les
   cellules pour qu'un contenu long ne déborde pas sur la colonne voisine quand
   on rétrécit (le texte est tronqué visuellement ; élargir pour tout voir). */
table.tt-active td, table.tt-active th { overflow: hidden; text-overflow: ellipsis; }
/* Colonne masquée : aplatie à 0 (cellule conservée dans le flux → alignement
   colgroup préservé, cf. table-tools.js hideCol). */
table.tt-active .tt-hidden { width: 0 !important; max-width: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  border-left: 0 !important; border-right: 0 !important;
  overflow: hidden !important; white-space: nowrap !important; }
/* Poignée de redimensionnement au bord droit de chaque en-tête. Un séparateur
   gris est TOUJOURS visible (indique que la colonne est redimensionnable), il
   devient bleu et plus épais au survol pour inviter au glissement. */
.tt-resizer { position: absolute; top: 0; right: 0; width: 10px; height: 100%;
  cursor: col-resize; user-select: none; touch-action: none; z-index: 4; }
.tt-resizer::after { content: ""; position: absolute; top: 15%; right: 4px;
  height: 70%; border-right: 2px solid #b6c2d4; transition: border-color .12s, border-width .12s; }
.tt-active thead th:hover .tt-resizer::after,
.tt-resizer:hover::after { border-right: 3px solid var(--brand, #2563eb); }
/* Petit repère « ⋮ » au survol de la poignée pour signaler la prise */
.tt-resizer::before { content: ""; position: absolute; top: 50%; right: 2px;
  width: 6px; height: 14px; transform: translateY(-50%);
  background:
    radial-gradient(circle, var(--brand,#2563eb) 1px, transparent 1.4px) 0 0 / 3px 4px repeat-y,
    radial-gradient(circle, var(--brand,#2563eb) 1px, transparent 1.4px) 3px 0 / 3px 4px repeat-y;
  opacity: 0; transition: opacity .12s; }
.tt-resizer:hover::before { opacity: .8; }
body.tt-resizing { cursor: col-resize; user-select: none; }
body.tt-resizing * { cursor: col-resize !important; }
/* Menu « Colonnes » (afficher/masquer) — même esprit que .depmenu */
.tt-chooser { position: relative; display: inline-block; }
.tt-chooser > summary { list-style: none; cursor: pointer; }
.tt-chooser > summary::-webkit-details-marker { display: none; }
.tt-menu { position: absolute; right: 0; z-index: 30; margin-top: .3rem; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: .55rem .8rem; max-height: 60vh; overflow-y: auto; display: flex;
  flex-direction: column; gap: .3rem; min-width: 220px; }
.tt-menu .chkline { white-space: nowrap; }
.tt-menu .link-action { align-self: flex-start; margin-top: .35rem; }

/* Spinner de chargement réutilisable (calculs AJAX). Taille = 1em (suit le texte),
   couleur = currentColor (suit le libellé). Respecte prefers-reduced-motion. */
.spinner { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em;
  margin-right: .5rem; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }

/* Config valise — tableau éditable (colonnes alignées par construction) */
.helpbox { background: #f0f6ff; border: 1px solid #cfe0ff; border-radius: 8px;
  padding: .6rem .9rem; font-size: .82rem; color: #334155; margin: .5rem 0 1rem; }
.helpbox ul { margin: .3rem 0; padding-left: 1.2rem; }
.cfg-table { width: 100%; }
.cfg-table td, .cfg-table th { vertical-align: middle; padding: 6px 8px; }
.cfg-table tr.off td { color: #9ca3af; }
.cfg-table input[type="text"], .cfg-table select { width: 100%; box-sizing: border-box; }
.cfg-table input.cal { width: 64px; text-align: right; display: inline-block; }
.cfg-table .nowrap { white-space: nowrap; font-size: .85rem; color: #475569; }
.cfg-table .ctr { text-align: center; }
.cfg-table input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: #2563eb; }
.cfg-table .neutre label { display: inline-flex; align-items: center; gap: 2px; margin-left: .5rem; }
.link-btn { background: none; border: none; color: #2563eb; cursor: pointer;
  font-size: .9rem; font-weight: 600; padding: 0; white-space: nowrap; }
.det-row > td { background: #f8fafc; }
.det-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; max-width: 760px; }
.det-grid .full { grid-column: 1 / -1; }
.det-grid label { display: flex; flex-direction: column; font-size: .8rem; color: #475569; gap: 2px; }
.dep-actions { margin-top: 1rem; }
/* Barre d'enregistrement collante en haut de formulaire de config */
.save-bar { position: sticky; top: 0; z-index: 8; background: #fff;
  padding: .5rem 0 .6rem; margin-bottom: .4rem; border-bottom: 1px solid #e5e7eb;
  display: flex; gap: .6rem; align-items: center; }
/* Catalogues (tables éditables) */
.cat-table td { padding: 4px 6px; }
.cat-table input[type="text"] { width: 100%; }
.cat-table input[type="number"] { width: 82px; }
.cat-table input[type="color"] { width: 42px; height: 30px; padding: 1px; display: inline-block; }
.cat-actions { margin: .4rem 0 1.2rem; display: flex; gap: 1.4rem; align-items: center; }
.link-danger { background: none; border: none; color: #dc2626; cursor: pointer; font-size: .95rem; }
/* Formulaire de métadonnées projet — grille compacte multi-colonnes */
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .7rem 1.1rem; max-width: 980px; align-items: end; }
.meta-grid .full { grid-column: 1 / -1; max-width: 760px; }
.meta-grid label { display: flex; flex-direction: column; font-size: .82rem;
  color: #475569; font-weight: 600; gap: 3px; }
.meta-grid input, .meta-grid select, .meta-grid textarea { font-weight: 400; }
.meta-grid textarea { resize: vertical; min-height: 60px; }
.meta-grid label.chkline { flex-direction: row; align-items: center; gap: 7px; font-weight: 500; }
.meta-grid label.chkline input { width: 17px; height: 17px; accent-color: #2563eb; }
/* RSE — sous-sections */
.fs { border: 1px solid #e2e8f0; border-radius: 8px; padding: .4rem 1rem 1rem; margin: 1rem 0; }
.fs > legend { font-weight: 700; color: #1e3a8a; font-size: .95rem; padding: 0 .4rem; }
.g-rows { margin: .6rem 0; display: flex; flex-direction: column; gap: .4rem; max-width: 560px; }
.g-row { display: flex; align-items: center; gap: .6rem; }
.g-row .g-lbl { font-weight: 600; color: #1e3a8a; min-width: 78px; }
.g-row input[type="text"] { flex: 1; }
.g-row .g-pn { width: 86px; display: inline-block; }
.pn-eff { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 6px;
  padding: 6px 10px; color: #1e3a8a; max-width: 560px; }
/* Séquences */
.seq-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: .5rem 0 1rem; }
.seq-opts .chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.seq-opts .chk input { width: 17px; height: 17px; accent-color: #2563eb; }
.seq-opts label:not(.chk) { display: flex; flex-direction: column; font-size: .82rem; color: #475569; font-weight: 600; gap: 3px; }
.seq-opts select { font-weight: 400; min-width: 280px; }
/* « Origine des séquences » sur sa propre ligne : libellé + select alignés */
.seq-origin { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem;
  color: #475569; font-weight: 600; margin: 0 0 1rem; }
.seq-origin select { width: auto; display: inline-block; font-weight: 400; min-width: 280px; margin: 0; }
.seq-table { max-width: 760px; }
.seq-table input[type="color"].seq-color { width: 42px; height: 30px; padding: 1px; display: inline-block; }
.seq-table input[type="datetime-local"] { width: auto; display: inline-block; }
.seq-table td { vertical-align: middle; }
/* Tableaux à colonnes numériques : en-têtes alignés sur les valeurs */
.num-table th.r { text-align: right; }
.num-table th.c { text-align: center; }
.meta { color: #475569; font-size: 0.95em; }
table.kv td:first-child { color: #64748b; width: 60%; }
table.kv td:last-child { text-align: right; font-weight: 600; }
table.cat th { font-size: 0.85em; }
table.cat td { font-family: Consolas, Menlo, monospace; font-size: 0.92em; }
.reco {
    border-left: 4px solid #6b7280;
    padding: 8px 14px;
    margin: 8px 0;
    background: #f9fafb;
    border-radius: 0 4px 4px 0;
}
.reco-warning { border-left-color: #d97706; background: #fef3c7; }
.reco-critical { border-left-color: #dc2626; background: #fef2f2; }
.reco-ok { border-left-color: #16a34a; background: #dcfce7; }
.reco-info { border-left-color: #1e40af; background: #eef2ff; }
details summary { cursor: pointer; font-weight: 600; color: #1e40af; }
details pre {
    background: #1e293b; color: #e2e8f0;
    padding: 12px; border-radius: 4px;
    overflow-x: auto; font-size: 0.85em;
    max-height: 400px;
}
.rse-form .card { margin-bottom: 12px; }

/* === Auth + admin (Phase 2 plateforme) === */
form label { display:block; margin:.6rem 0; font-weight:600; font-size:.9rem; }
form label.checkbox { font-weight:400; display:flex; gap:.4rem; align-items:center; }
form input[type=text], form input[type=email], form input[type=password],
form input[type=number], form input:not([type]) {
  display:block; width:100%; padding:.5rem; margin-top:.25rem;
  border:1px solid #cbd5e1; border-radius:6px; font-size:.95rem; box-sizing:border-box;
}
form fieldset { border:1px solid #e2e8f0; border-radius:8px; margin:1rem 0; padding:.5rem 1rem 1rem; }
form fieldset legend { font-weight:700; padding:0 .4rem; color:#334155; }
form button { background:#2563eb; color:#fff; border:0; padding:.55rem 1.2rem;
  border-radius:6px; font-size:.95rem; cursor:pointer; }
form button:hover { background:#1d4ed8; }
.error { color:#b91c1c; background:#fee2e2; border:1px solid #fecaca;
  padding:.5rem .75rem; border-radius:6px; }
.link-danger { background:none; border:0; color:#b91c1c; cursor:pointer;
  text-decoration:underline; font-size:inherit; padding:0 0 0 .5rem; }
.link-action { background:none; border:0; color:#2563eb; cursor:pointer;
  text-decoration:underline; font-size:inherit; padding:0 .5rem; }

/* === Liste valises / collecte (chunk 5) — large + lisible === */
/* Pages larges (tableaux/dashboards) : remplissent tout l'espace dispo à droite
   du menu (marge droite auto = 0) au lieu d'être bornées à 1500 px → moins de
   défilement horizontal. Pas de débordement (largeur = viewport − menu). */
main.wide { max-width: none; }

/* Barres filtres / actions groupées : éléments EN LIGNE (sinon le width:100%
   global des form select/input empile chaque filtre sur sa propre ligne). */
.filterbar, .toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.6rem 0; }
.filterbar input, .filterbar select, .toolbar input, .toolbar select {
  width:auto; display:inline-block; margin-top:0; }
.filterbar input[type=search] { flex:1 1 280px; min-width:220px; }
.toolbar input[type=number] { width:5rem; }

/* Conteneur à défilement horizontal pour les tables larges (desktop ET mobile) :
   la table scrolle dans la carte au lieu de déborder/casser la mise en page.
   Les colonnes prennent leur largeur de contenu (pas de tassement/troncature) ;
   la table remplit au moins la carte et défile si plus large. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll > table.grid { width: max-content; min-width: 100%; }
.table-scroll select { max-width: none; }

/* Tableau valises : colonnes lisibles, pas de retour à la ligne intempestif */
table.grid td, table.grid th { vertical-align:middle; }
td.nowrap, th.nowrap { white-space:nowrap; }
td.col-actions { white-space:nowrap; text-align:right; }
td.col-actions a, td.col-actions button { margin-left:.5rem; }

/* Badge de statut en ligne / hors ligne (pastille bien visible) */
.status { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  padding:.18rem .6rem; border-radius:999px; font-size:.8rem; font-weight:700;
  line-height:1; }
.status .dot { width:.6rem; height:.6rem; border-radius:50%; display:inline-block; }
.status.online  { background:#dcfce7; color:#15803d; }
.status.online .dot  { background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.20); }
.status.offline { background:#f1f5f9; color:#64748b; }
.status.offline .dot { background:#94a3b8; }
.status.unknown { background:#f1f5f9; color:#94a3b8; }
.status.unknown .dot { background:#cbd5e1; }
/* Ligne d'une valise en ligne : léger liseré vert à gauche */
tr.row-online td:first-child { box-shadow: inset 3px 0 0 #16a34a; }

/* === Barre latérale (navigation V1) === */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 222px;
  background: var(--brand, #1e3a8a); color: #e5e7eb; display: flex; flex-direction: column;
  padding: 12px 0; overflow-y: auto; z-index: 50;
}
.sidebar .brand { color: #fff; font-weight: bold; font-size: 1.05rem;
  padding: 6px 18px 14px; text-decoration: none; display: block; }
.sidebar .brand-logo { max-width: 170px; max-height: 56px; display: block; }
.sidebar .brand .poc { background: #f97316; color: #fff; padding: 1px 6px;
  border-radius: 4px; font-size: .58rem; margin-left: 4px; vertical-align: middle; }
.sidebar .grp { padding: 13px 18px 4px; font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase; color: #93c5fd; }
/* Sous-titre de section (ex. « Accessoires » sous « Parc & location ») : plus discret. */
.sidebar .grp--sub { padding-top: 6px; font-size: .66rem; opacity: .8; }
.sidebar a.nav { display: block; color: #dbeafe; text-decoration: none;
  padding: 9px 18px; font-size: 1rem; border-left: 3px solid transparent; }
.sidebar a.nav:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sidebar a.nav.active { background: rgba(255, 255, 255, .22); color: #fff; font-weight: 600;
  border-left-color: #fff; }
.sidebar a.nav.sub { padding-left: 34px; font-size: .93rem; color: #c7d2fe; }
/* Valise repliable (menu par valise) : en-tête cliquable avec chevron */
.sidebar .ws-valise > summary { cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.sidebar .ws-valise > summary::-webkit-details-marker { display: none; }
.sidebar .ws-valise > summary::after { content: "▸"; font-size: .8em; color: #93c5fd;
  transition: transform .15s ease; margin-left: auto; }
.sidebar .ws-valise[open] > summary::after { transform: rotate(90deg); }
.sidebar .ws-valise > summary:hover { color: #dbeafe; background: rgba(255,255,255,.06); }
/* Équipement (site) sous le nom de la valise — discret, aligné sous le libellé */
.sidebar .ws-valise > .ws-equip { padding: 0 18px 4px 34px; margin-top: -2px;
  font-size: .78rem; color: #93c5fd; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.sidebar .spacer { flex: 1 1 auto; }
/* Foot (Mon compte · Déconnexion) collant en bas : toujours visible même quand
   le menu est long (admin/super admin) — pas besoin de scroller pour se déconnecter. */
.sidebar .foot { position: sticky; bottom: 0; padding: 12px 18px;
  border-top: 1px solid #2c4a9a; background: var(--brand, #1e3a8a);
  font-size: .82rem; color: #cbd5e1; }
.sidebar .foot a { color: #fecaca; }
/* Bouton « Déconnexion » (form POST) stylé comme le lien voisin. */
.sidebar .foot .linklike { background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: #fecaca; text-decoration: underline; cursor: pointer; }
.sidebar .foot .linklike:hover { color: #fff; }
/* Sélecteur de langue : toggle segmenté (pilule), segment actif en blanc.
   Spécificité .sidebar .langsw button > la règle globale `form button`. */
.sidebar .langsw { margin-top: 10px; display: inline-flex; border-radius: 999px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.28); }
.sidebar .langsw button { background: transparent; color: #dbeafe; border: 0;
  padding: 3px 13px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; transition: background .12s, color .12s; }
.sidebar .langsw button + button { border-left: 1px solid rgba(255,255,255,.28); }
.sidebar .langsw button:hover { background: rgba(255,255,255,.14); }
.sidebar .langsw button.on { background: #fff; color: var(--brand, #1e3a8a); }
body.has-sidebar main { margin-left: 222px; }

/* Aide contextuelle : bulle « ? » + popover au clic (cf. help.js) */
.helptip { position: relative; display: inline-flex; vertical-align: middle; }
.help-i { width: 16px; height: 16px; padding: 0; margin-left: .25rem; border: 0;
  border-radius: 50%; background: #cbd5e1; color: #1e293b; font-size: 11px;
  font-weight: 700; line-height: 16px; text-align: center; cursor: pointer; }
.help-i:hover { background: #94a3b8; color: #fff; }
.help-pop { display: none; position: absolute; z-index: 1000; left: 50%; top: calc(100% + 6px);
  transform: translateX(-50%); width: max-content; max-width: 280px; text-align: left;
  background: #0f172a; color: #f1f5f9; font-size: .8rem; font-weight: 400; line-height: 1.35;
  padding: .5rem .65rem; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  white-space: normal; }
.help-pop::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: #0f172a; }
.helptip.open .help-pop { display: block; }
@media (max-width: 820px) {
  .help-pop { position: fixed; left: 50%; top: auto; bottom: 16px; transform: translateX(-50%);
    max-width: 90vw; }
  .help-pop::before { display: none; }
}

/* Bannière d'installation PWA (mobile) */
.pwa-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 10px;
  background: #0f172a; color: #fff; padding: 12px 14px;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, .35); font-size: .92rem;
}
.pwa-banner #pwa-banner-text { flex: 1 1 auto; }
.pwa-banner .pwa-banner-go {
  background: #f59e0b; color: #1e293b; border: 0; border-radius: 6px;
  padding: 8px 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pwa-banner .pwa-banner-x {
  background: rgba(255, 255, 255, .12); border: 0; color: #fff; font-size: 1.1rem;
  cursor: pointer; padding: 6px 12px; border-radius: 6px; line-height: 1;
}
/* Jamais de bannière dans l'app installée (mode standalone) */
@media (display-mode: standalone) { .pwa-banner { display: none !important; } }
@media (display-mode: minimal-ui) { .pwa-banner { display: none !important; } }
/* Menu ouvert → masquer la bannière pour atteindre « Déconnexion » en bas */
body.nav-open .pwa-banner { display: none !important; }
.pwa-install {
  background: #f59e0b; color: #1e293b; border: 0; border-radius: 6px;
  padding: 5px 10px; font-weight: 700; cursor: pointer; font-size: .85rem;
}

/* Barre mobile + menu latéral « off-canvas » (cachés sur desktop) */
.mtopbar { display: none; }
.nav-backdrop { display: none; }
@media (max-width: 820px) {
  .mtopbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 45;
    background: var(--brand, #1e3a8a); color: #fff; padding: 0 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }
  .mtopbar .mtoggle { background: none; border: 0; color: #fff; font-size: 1.7rem;
                      line-height: 1; cursor: pointer; padding: 2px 6px; }
  .mtopbar .mbrand { color: #fff; font-weight: bold; text-decoration: none; font-size: 1.05rem; }
  .mtopbar .mbrand img { max-height: 34px; vertical-align: middle; }

  /* Sidebar = tiroir qui glisse depuis la gauche */
  .sidebar { width: 270px; padding-top: 58px; transform: translateX(-100%);
             transition: transform .25s ease; box-shadow: 2px 0 18px rgba(0, 0, 0, .4); }
  body.nav-open .sidebar { transform: none; }
  body.has-sidebar main { margin-left: 0; padding: 68px 14px 24px; }

  .nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; }
  body:not(.nav-open) .nav-backdrop { display: none; }

  /* Tables larges → défilement horizontal plutôt que débordement */
  main table.grid { display: block; overflow-x: auto; white-space: nowrap; }

  /* ── Pages Mesures / visualisation : compacter pour le téléphone ── */
  h1 { font-size: 1.4rem; line-height: 1.15; }
  h2 { font-size: 1.1rem; }
  .card { padding: 14px; }
  /* Sous-onglets : pleine largeur, plus petits */
  .subtabs { display: flex; width: 100%; gap: .2rem; margin: .5rem 0 .9rem; }
  .subtab { padding: .4rem .6rem; font-size: .82rem; flex: 0 0 auto; }
  /* ── Barres d'outils / contrôles : compactes, groupes empilés proprement ── */
  .toolbar, .ctrlbar { gap: .35rem .7rem; padding: .55rem .7rem; }
  .ck { font-size: .85rem; }
  /* Chaque groupe sur sa ligne : libellé au-dessus, cases dessous */
  .ctrl-group { width: 100%; display: flex; flex-wrap: wrap; align-items: center;
                gap: .3rem .8rem; border-right: 0; border-bottom: 1px solid #eef2f7;
                padding: 0 0 .4rem; }
  .ctrl-group:last-child { border-bottom: 0; padding-bottom: 0; }
  .ctrl-lbl { width: 100%; margin-bottom: 1px; }
  /* cases isolées (enfants directs) ou longues (chkline) : une par ligne */
  .toolbar > .ck, .toolbar > .chkline,
  .ctrlbar > .ck, .ctrlbar > .chkline, .ctrl-group .chkline { width: 100%; }
  .depdrop, .depdrop > summary { width: 100%; }
  .toolbar select, .ctrlbar select, .card select { width: 100% !important; max-width: 100%; min-width: 0 !important; }
  /* Zone de dates COMPACTE : « Du [____] » sur une ligne (au lieu d'empilé/haut) */
  .toolbar label.hint, .ctrlbar label.hint { display: flex; flex-direction: row;
    align-items: center; gap: 6px; width: 100%; margin: 0; font-size: .82rem; }
  .toolbar label.hint input, .ctrlbar label.hint input { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .toolbar .btn, .ctrlbar .btn { flex: 0 0 auto; }
  .toolbar > span[style*="flex:1"], .ctrlbar > span[style*="flex:1"] { display: none; }
  /* Graphes 1 grille -> hauteur réduite ; multi-grilles gèrent leur hauteur en JS */
  #g-chart, #b-pchart, #profchart, #dimchart, .chart-1grid { height: 320px !important; }
  /* Graphes 2 grilles empilées (EA/ER) : garder une hauteur lisible */
  .chart-2grid { height: 520px !important; }

  /* En-têtes de page avec boutons d'action : passer à la ligne */
  .card > div[style*="space-between"] { flex-wrap: wrap; }
  .card > div[style*="space-between"] [style*="nowrap"] { white-space: normal !important; }
  /* Tables d'infos (label | valeur) : valeur à la ligne plutôt que défilement */
  .grid-2 table.grid { display: table; width: 100%; white-space: normal; }
  .grid-2 table.grid td, .grid-2 table.grid th { white-space: normal; word-break: break-word; }
}

/* Badge collecte automatique (synchro auto) */
.status.auto { background:#dbeafe; color:#1e40af; }
.status.auto .dot { background:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.status.off { background:#f1f5f9; color:#94a3b8; }

/* Barre de progression (import .db) */
.progress { background:#e2e8f0; border-radius:999px; height:14px; overflow:hidden; }
.progress .bar { background:var(--brand,#2563eb); height:100%; border-radius:999px;
                 transition:width .4s ease; min-width:2px; }

/* Sous-onglets Mesures — contrôle segmenté (pills) */
.subtabs { display:inline-flex; gap:.25rem; background:#f1f5f9; padding:.3rem;
  border-radius:11px; margin:.7rem 0 1.3rem; flex-wrap:wrap; }
.subtab { padding:.45rem .95rem; font-size:.9rem; border-radius:8px; color:#475569;
  text-decoration:none; line-height:1; display:inline-flex; align-items:center;
  transition:background .15s, color .15s, box-shadow .15s; }
.subtab:not(.off):not(.active):hover { background:#e2e8f0; color:#1e293b; }
.subtab.active { background:#fff; color:var(--brand,#2563eb); font-weight:600;
  box-shadow:0 1px 3px rgba(15,23,42,.14); }
.subtab.off { color:#cbd5e1; cursor:not-allowed; }
.ck { display:inline-flex; align-items:center; gap:.35rem; margin:0; font-size:.9rem; white-space:nowrap; }
.ck input { width:auto; display:inline-block; }
.btn.ghost { background:#f1f5f9; color:#334155; }

/* Sélecteur de départs (Courants) — menu déroulant à cases */
.depdrop { position:relative; }
.depdrop > summary { cursor:pointer; padding:.35rem .6rem; border:1px solid #cbd5e1;
  border-radius:6px; background:#fff; font-size:.9rem; list-style:none; white-space:nowrap; }
.depdrop > summary::-webkit-details-marker { display:none; }
.depmenu { position:absolute; z-index:30; margin-top:.25rem; background:#fff;
  border:1px solid #cbd5e1; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:.5rem .9rem; max-height:340px; overflow-y:auto; display:flex;
  flex-direction:column; gap:.35rem; min-width:max-content; white-space:nowrap; }
.depmenu .ck, .depmenu .chkline { white-space:nowrap; }

/* ── Mesures : barres de contrôle modernes (harmonisées) ───────────────── */
.toolbar, .ctrlbar {
  display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; align-items:center;
  background:#fbfcfe; border:1px solid #e7ecf3; border-radius:12px;
  padding:.7rem .9rem; margin:.6rem 0;
}
.ctrl-group { display:inline-flex; align-items:center; gap:.55rem;
  padding-right:1rem; border-right:1px solid #e7ecf3; }
.ctrl-group:last-child { border-right:0; padding-right:0; }
.ctrl-lbl { font-size:.7rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#94a3b8; }
/* cases & inputs : accent de marque + confort */
.ck { display:inline-flex; align-items:center; gap:.4rem; margin:0;
  font-size:.88rem; white-space:nowrap; color:#334155; cursor:pointer; user-select:none; }
.ck input[type=checkbox] { width:16px; height:16px; accent-color:var(--brand,#2563eb);
  cursor:pointer; margin:0; }
.ck input:disabled { cursor:not-allowed; }
.ck:has(input:disabled) { color:#cbd5e1; cursor:not-allowed; }
.toolbar input, .toolbar select, .ctrlbar input, .ctrlbar select {
  width:auto; display:inline-block; margin-top:0; border:1px solid #cbd5e1;
  border-radius:8px; padding:.35rem .5rem; font-size:.88rem; background:#fff; }
.toolbar input:focus, .ctrlbar input:focus, .ctrlbar select:focus {
  outline:none; border-color:var(--brand,#2563eb); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
/* boutons de barre : compacts et nets */
.ctrlbar .btn, .toolbar .btn { padding:.4rem .85rem; font-size:.88rem; border-radius:8px; }
.ctrlbar .btn.ghost, .toolbar .btn.ghost {
  background:#fff; color:#334155; border:1px solid #cbd5e1; }
.ctrlbar .btn.ghost:hover, .toolbar .btn.ghost:hover { background:#f1f5f9; }

/* Cartes KPI (Qualité tension / Synthèse) */
.kpi-row { display:flex; flex-wrap:wrap; gap:.7rem; margin:.6rem 0 1rem; }
.kpi { flex:1 1 180px; min-width:160px; background:#fff; border:1px solid #e7ecf3;
  border-left:5px solid #9ca3af; border-radius:10px; padding:.55rem .8rem; }
.kpi-t { font-size:.78rem; color:#475569; font-weight:600; line-height:1.2; }
.kpi-v { font-size:1.5rem; font-weight:800; margin:.15rem 0; }
.kpi-s { font-size:.72rem; color:#94a3b8; }

/* Diagnostic Synthèse qualité (points à surveiller) */
ul.diag { list-style:none; padding:0; margin:.3rem 0 1rem; display:flex; flex-direction:column; gap:.3rem; }
ul.diag li { background:#fbfcfe; border:1px solid #e7ecf3; border-radius:8px;
  padding:.4rem .7rem; font-size:.88rem; color:#334155; }

/* Synthèse : diagnostic groupé repliable */
.diag-grp { background:#fbfcfe; border:1px solid #e7ecf3; border-radius:8px;
  padding:.45rem .7rem; margin:.35rem 0; }
.diag-grp > summary { cursor:pointer; font-size:.92rem; color:#334155; list-style:none; }
.diag-grp > summary::-webkit-details-marker { display:none; }
.diag-grp > summary::before { content:'▸ '; color:#94a3b8; }
.diag-grp[open] > summary::before { content:'▾ '; }
.diag-grp ul.diag { margin:.4rem 0 .2rem; }
.diag-grp ul.diag li { background:#fff; }

/* Droits d'accès par onglet (fiches Client/Utilisateur) */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.3rem .9rem; margin:.5rem 0; padding:.6rem .8rem; background:#fbfcfe;
  border:1px solid #e7ecf3; border-radius:8px; }
.feat-grid .chkline { display:flex; align-items:center; gap:.4rem; font-size:.88rem; font-weight:500; }
.feat-grid .chkline input { width:16px; height:16px; accent-color:var(--brand,#2563eb); }

/* Cases à cocher cliquables (style « graphes ») — neutralise le form input{width:100%} global */
label.chkline { display:inline-flex; align-items:center; gap:.45rem; margin:0;
  font-weight:500; color:#334155; cursor:pointer; user-select:none; }
label.chkline input[type=checkbox] { width:16px; height:16px; flex:none; margin:0;
  display:inline-block; accent-color:var(--brand,#2563eb); cursor:pointer; }
label.chkline input:disabled { cursor:not-allowed; }
/* Bloc "Restreindre" : pleine largeur propre, comme une barre de contrôle */
.feat-toggle { display:flex; align-items:center; gap:.5rem; background:#fbfcfe;
  border:1px solid #e7ecf3; border-radius:8px; padding:.55rem .8rem; margin:.5rem 0; }

/* Fraîcheur des données (tableau de bord collecte) : pastille colorée */
.fdot { display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:.4rem; vertical-align:middle; background:#cbd5e1; }
.fdot.ok   { background:#16a34a; }
.fdot.warn { background:#d97706; box-shadow:0 0 0 3px #fde68a55; }
.fdot.crit { background:#dc2626; box-shadow:0 0 0 3px #fecaca77; }
.fdot.off  { background:#cbd5e1; }

/* Pointe / Foisonnement : tableau compact à gauche, graphe à droite */
.pointe-body { display:grid; grid-template-columns:minmax(300px,360px) 1fr;
  gap:1rem; align-items:start; margin-top:.4rem; }
.pointe-body > #chart { height:480px; min-width:0; }
.pointe-tbl { width:auto; margin-top:0; font-size:.9rem; }
.pointe-tbl td, .pointe-tbl th { padding:.3rem .6rem; }
.pointe-tbl tr.sum td { background:#f3f6fa; font-weight:700; }
.pointe-tbl tr.sep td { padding:2px; background:#e5e7eb; }
@media (max-width:980px){ .pointe-body { grid-template-columns:1fr; } }

/* Encadré d'aide (explication d'un onglet) */
.help-box { background:#eef2ff; border:1px solid #c7d2fe; border-radius:6px;
  padding:.5rem .75rem; color:#1e3a8a; font-size:.86rem; margin:.6rem 0; }

/* En-têtes de tableau triables (tableau de bord collecte) */
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover { background:#eef2f7; }
th.sortable::after { content:"\2195"; opacity:.3; margin-left:.3rem; font-size:.8em; }
th.sortable.sort-asc::after  { content:"\2191"; opacity:.9; }
th.sortable.sort-desc::after { content:"\2193"; opacity:.9; }

/* Badges de statut du journal des télérelèves */
.jstat { display:inline-block; padding:.1rem .5rem; border-radius:999px;
  font-size:.78rem; font-weight:600; border:1px solid transparent; }
.jstat.ok            { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.jstat.vide          { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.jstat.hors_ligne    { background:#f1f5f9; color:#64748b; border-color:#e2e8f0; }
.jstat.pas_de_projet { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.jstat.erreur        { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }

/* ═══════════════════════════════════════════════════════════════════════════
   Vague 1 — harmonisation UX (cf. audit 2026-07-18 / docs artifact)
   Ajouts ADDITIFS : n'écrasent aucun composant existant.
   ═══════════════════════════════════════════════════════════════════════════ */

/* a11y — focus clavier visible (l'outline global n'était compensé que sur les inputs).
   :focus-visible ne s'affiche qu'à la navigation clavier, pas au clic souris. */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
.subtab:focus-visible, .sidebar a.nav:focus-visible, .pf-chip:focus-visible,
.link-action:focus-visible, .link-danger:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; border-radius: 4px;
}
/* Sur fond de marque (sidebar), l'outline bleu manque de contraste → blanc. */
.sidebar a.nav:focus-visible, .sidebar .foot a:focus-visible,
.sidebar .langsw button:focus-visible { outline-color: #fff; }

/* Messages/flash unifiés : une base neutre + 4 variantes sémantiques (couleur = sens).
   Remplace la classe .error détournée en bannière « info » par du style inline (18 gabarits). */
.flash { display:block; padding:8px 12px; border-radius:6px; margin:.5rem 0;
  font-weight:500; border:1px solid transparent; background:none; color:inherit; }
.flash--info { background:#dbeafe; border-color:#bfdbfe; color:#1e40af; }
.flash--ok   { background:#dcfce7; border-color:#bbf7d0; color:#15803d; }
.flash--warn { background:#fef3c7; border-color:#fde68a; color:#92400e; }
.flash--err  { background:#fef2f2; border-color:#fca5a5; color:#b91c1c; }

/* Boutons : compléter la famille (fin des overrides inline pour danger/accent). */
.btn-danger { background:#b91c1c; }
.btn-danger:hover { background:#991b1b; }
.btn-accent { background:#e8952f; color:#1a1204; }
.btn-accent:hover { filter:brightness(.94); }

/* Badges de statut : variantes sémantiques (fin des hex en dur inline).
   Complètent .status (online/offline/auto…) déjà présent. */
.status.import   { background:#fef3c7; color:#92400e; }
.status.collecte { background:#dcfce7; color:#15803d; }
.status.encours  { background:#dbeafe; color:#1e40af; }
.status.termine  { background:#f1f5f9; color:#475569; }

/* Contraste — remonter les gris porteurs d'info sous le seuil WCAG AA. */
.kpi-s { color:#64748b; }

/* Indicateur de chargement plein-bloc (avant 1er rendu ECharts sur les pages Mesures).
   Réutilise .spinner ; centré, discret, retiré dès l'affichage du graphe. */
.chart-loading { display:flex; align-items:center; justify-content:center; gap:.5rem;
  color:#64748b; font-size:.9rem; padding:2rem 0; }

/* Fil d'Ariane (pages espace projet) : repérage Mes projets › Projet › Valise › Onglet. */
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  font-size:.85rem; color:#64748b; margin:0 0 1rem; }
.breadcrumb a { color:#475569; text-decoration:none; }
.breadcrumb a:hover { color:var(--brand,#2563eb); text-decoration:underline; }
.breadcrumb .sep { color:#cbd5e1; }
.breadcrumb .crumb.current { color:#1f2937; font-weight:600; }
@media (max-width:820px){ .breadcrumb { margin-top:.2rem; } }

/* Drapeaux pays : police Twemoji auto-hébergée — Windows n'a pas les glyphes emoji drapeaux.
   unicode-range limite la police aux indicateurs régionaux (U+1F1E6–1F1FF). */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/static/fonts/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
}
.flag-emoji { font-family: "Twemoji Country Flags", system-ui, sans-serif; }