/* Intranet ASI — coquille : barre latérale, en-tête de page, cartes, listes, calendrier, états, toasts */

/* Coquille */
.app {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100vh; height: 100dvh;
  transition: grid-template-columns var(--duration) var(--ease);
}
.app[data-nav="rail"] { grid-template-columns: var(--nav-rail-w) minmax(0, 1fr); }

.main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: auto;
  background: var(--bg);
}
.page {
  flex: 1; min-height: 0; min-width: 0;
  width: 100%; max-width: none; /* toute la largeur (Antoine, 12 octobre 2026) : grilles et tableaux en profitent ; les textes longs gardent leur propre borne (72ch) */
  padding: var(--space-6) var(--space-8) var(--space-8);
}
.page-wide { max-width: none; }

/* Mode plein (banc de montage) */
.app[data-fullscreen] .main { overflow: hidden; }
.app[data-fullscreen] .page { max-width: none; padding: 0; display: flex; flex-direction: column; }

/* Teinte de catégorie : tout élément porteur de data-cat expose --cat / --cat-soft à ses descendants
   (titres de groupe de la navigation, lien courant, en-tête de page, pastilles). */
[data-cat="rh"] { --cat: var(--cat-rh); --cat-soft: var(--cat-rh-soft); }
[data-cat="production"] { --cat: var(--cat-production); --cat-soft: var(--cat-production-soft); }
[data-cat="fonds"] { --cat: var(--cat-fonds); --cat-soft: var(--cat-fonds-soft); }
[data-cat="compta"] { --cat: var(--cat-compta); --cat-soft: var(--cat-compta-soft); }
[data-cat="admin"] { --cat: var(--cat-admin); --cat-soft: var(--cat-admin-soft); }
[data-cat="marketing"] { --cat: var(--cat-marketing); --cat-soft: var(--cat-marketing-soft); }

/* Teinte de brique : tout élément porteur de data-hue expose --hue à ses descendants */
[data-hue="royal"] { --hue: var(--hue-royal); }
[data-hue="mint"] { --hue: var(--hue-mint); }
[data-hue="gold"] { --hue: var(--hue-gold); }
[data-hue="orange"] { --hue: var(--hue-orange); }
[data-hue="coral"] { --hue: var(--hue-coral); }
[data-hue="sky"] { --hue: var(--hue-sky); }
[data-hue="violet"] { --hue: var(--hue-violet); }
[data-hue="green"] { --hue: var(--hue-green); }
[data-hue="emerald"] { --hue: var(--hue-emerald); }
[data-hue="terracotta"] { --hue: var(--hue-terracotta); }
[data-hue="orchid"] { --hue: var(--hue-orchid); }
[data-hue="indigo"] { --hue: var(--hue-indigo); }
[data-hue="ochre"] { --hue: var(--hue-ochre); }
[data-hue="navy"] { --hue: var(--hue-navy); }
[data-hue="turquoise"] { --hue: var(--hue-turquoise); }
[data-hue="lime"] { --hue: var(--hue-lime); }
[data-hue="pink"] { --hue: var(--hue-pink); }
[data-hue="steel"] { --hue: var(--hue-steel); }
[data-hue="olive"] { --hue: var(--hue-olive); }
[data-hue="slate"] { --hue: var(--hue-slate); }

/* Barre latérale */
.nav {
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
  font-size: 14px;
}
.nav-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-toggle { color: var(--text-2); }
.nav-groups { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-2) 0; }
.nav-group { padding: var(--space-1) var(--space-2); }
.nav-group-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 6px var(--space-2); border: 0; border-radius: var(--radius-s); background: transparent;
  color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.nav-group-head:hover { color: var(--text-2); background: var(--hover); }
.nav-group[data-cat] .nav-group-head { color: var(--cat); }
.nav-group[data-cat] .nav-group-head:hover { color: var(--cat); background: var(--cat-soft); }
.nav-group-head svg { width: 16px; height: 16px; transition: transform var(--duration) var(--ease); }
.nav-group[data-open] .nav-group-head svg { transform: rotate(90deg); }
.nav-group ul { display: none; margin-top: 2px; }
.nav-group[data-open] ul { display: block; animation: rise-in .18s var(--ease-out) both; }
.nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 36px; padding: 0 var(--space-2) 0 10px; border-radius: var(--radius);
  color: var(--text-2); white-space: nowrap; overflow: hidden; position: relative;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.nav-link::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease-out); transform: scaleY(.4); }
.nav-link:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav-link:hover svg { color: var(--text); }
.nav-link[aria-current="page"] { background: var(--blue-light); color: var(--accent); font-weight: 600; }
.nav-link[aria-current="page"]::before { background: var(--accent); transform: none; }
/* Lien courant : fond doux et liseré gauche dans la teinte de sa catégorie */
.nav-group[data-cat] .nav-link[aria-current="page"], .nav-link[data-cat][aria-current="page"] { background: var(--cat-soft); color: var(--cat); }
.nav-group[data-cat] .nav-link[aria-current="page"]::before, .nav-link[data-cat][aria-current="page"]::before { background: var(--cat); }
.nav-link svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--text-muted); transition: color var(--duration) var(--ease), opacity var(--duration) var(--ease), transform var(--duration) var(--ease-out); }
.nav-link[aria-current="page"] svg { color: inherit; }
/* Icônes de briques en couleur (palette Pantone, nav.js `hue`) : posées, un peu voilées au repos, pleines au survol
   et sur la page courante, dont le liseré gauche prend aussi la teinte. */
.nav-link[data-hue] svg { color: var(--hue); opacity: .82; }
.nav-link[data-hue]:hover svg { color: var(--hue); opacity: 1; transform: scale(1.06); }
.nav-link[data-hue][aria-current="page"] svg { color: var(--hue); opacity: 1; }
.nav-link[data-hue][aria-current="page"]::before { background: var(--hue); }
.app[data-nav="rail"] .nav-link[data-hue][aria-current="page"] { box-shadow: inset 0 -2px 0 var(--hue); border-radius: var(--radius) var(--radius) var(--radius-s) var(--radius-s); }
.nav-link span { overflow: hidden; text-overflow: ellipsis; }
.nav-foot { border-top: 1px solid var(--border); padding: var(--space-3) var(--space-2); flex-shrink: 0; }
.nav-user { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-2) var(--space-3); overflow: hidden; }
.nav-user-text { min-width: 0; }
.nav-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand));
  color: var(--on-brand); font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(15, 23, 42, .15);
}
.nav-user-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-user-role { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }
.nav-logout { width: 100%; justify-content: flex-start; }

/* Rail */
.app[data-nav="rail"] .nav-head { padding: 0; justify-content: center; }
.app[data-nav="rail"] .nav-group { padding: var(--space-1) var(--space-2); }
.app[data-nav="rail"] .nav-group-head { display: none; }
.app[data-nav="rail"] .nav-group ul { display: block; }
.app[data-nav="rail"] .nav-group + .nav-group { border-top: 1px solid var(--border); padding-top: var(--space-2); margin-top: var(--space-1); }
.app[data-nav="rail"] .nav-link { justify-content: center; padding: 0; width: 40px; height: 40px; }
.app[data-nav="rail"] .nav-link::before { display: none; }
.app[data-nav="rail"] .nav-group[data-cat] .nav-link[aria-current="page"], .app[data-nav="rail"] .nav-link[data-cat][aria-current="page"] { box-shadow: inset 0 -2px 0 var(--cat); border-radius: var(--radius) var(--radius) var(--radius-s) var(--radius-s); }
.app[data-nav="rail"] .nav-link span { display: none; }
.app[data-nav="rail"] .nav-user { display: none; }
.app[data-nav="rail"] .nav-foot { padding: var(--space-2); }
.app[data-nav="rail"] .nav-logout, .app[data-nav="rail"] .nav-theme { width: 40px; justify-content: center; padding: 0; }
.app[data-nav="rail"] .nav-logout span, .app[data-nav="rail"] .nav-theme span { display: none; }
.nav-theme { display: flex; align-items: center; gap: var(--space-3); width: 100%; justify-content: flex-start; padding: 0 var(--space-4); margin-bottom: 2px; }

/* Barre haute (mobile) */
.topbar { display: none; }
.nav-scrim { display: none; }

/* En-tête de page */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6); flex-wrap: wrap;
}
.page-head h1 { font-size: 27px; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.page-head .page-title { min-width: 0; overflow-wrap: anywhere; }
/* Icône de page : case douce dans la teinte de la section (gris-bleu sans catégorie), un reflet discret */
.page-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cat-soft, var(--muted-soft)) 70%, #fff) 0%, var(--cat-soft, var(--muted-soft)) 100%);
  color: var(--cat, var(--text-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat, var(--text-3)) 18%, transparent), 0 1px 2px rgba(15, 23, 42, .04);
}
html[data-theme="dark"] .page-icon, html[data-workspace="dark"] .page-icon { background: var(--cat-soft, var(--muted-soft)); }
/* …et dans la teinte propre de la brique quand elle en a une (data-hue posé sur l'app par la navigation) */
[data-hue] .page-icon {
  color: var(--hue);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hue) 9%, var(--surface)) 0%, color-mix(in srgb, var(--hue) 20%, var(--surface)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 26%, transparent), 0 1px 2px rgba(15, 23, 42, .04);
}
html[data-theme="dark"] [data-hue] .page-icon, html[data-workspace="dark"] [data-hue] .page-icon { background: color-mix(in srgb, var(--hue) 16%, transparent); }
.page-icon svg { width: 22px; height: 22px; }
.page-head .page-meta { margin-top: var(--space-1); font-size: 14px; color: var(--text-2); max-width: 72ch; }
.page-head[data-cat] .page-meta .tag-source { vertical-align: 1px; }
.head-icon { flex-shrink: 0; color: var(--cat, var(--text-2)); vertical-align: -3px; margin-right: var(--space-2); width: 18px; height: 18px; display: inline-block; }
.card-head h2 .head-icon, .section-head h2 .head-icon { color: var(--text-2); }
.card[data-cat] .card-head h2 .head-icon { color: var(--cat); }
.page-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-2); }
.breadcrumb a { color: var(--text-2); }

/* Sections et cartes */
.section { margin-bottom: var(--space-8); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.section-head h2 { font-size: 18px; }
/* Cartes : apparition en montant, légèrement décalée pour les premières d'une page */
.card { animation: rise-in .26s var(--ease-out) both; }
/* rafraîchissement silencieux d'une page (Workers, Tâches) : pas d'animation d'entrée sur les cartes redessinées */
.is-quiet .card, .page-settled .card { animation: none; }
.card:nth-child(2) { animation-delay: 40ms; } .card:nth-child(3) { animation-delay: 80ms; } .card:nth-child(4) { animation-delay: 120ms; } .card:nth-child(n+5) { animation-delay: 150ms; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-6);
  transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
a.card:hover, button.card:hover, .card.is-clickable:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-1px); text-decoration: none; }
.card + .card { margin-top: var(--space-4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.card-head h2, .card-head h3 { font-size: 16px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.card-grid .card + .card { margin-top: 0; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 13px; color: var(--text-2); }

/* Listes de définitions (fiches) */
.dl { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: 14px; }
.dl dt { color: var(--text-2); }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dl dd:empty::before { content: "—"; color: var(--text-muted); }

/* Listes simples */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: 0; }
.list-item-main { flex: 1; min-width: 0; }
.list-item-title { font-weight: 500; }
.list-item-sub { font-size: 13px; color: var(--text-2); }
.list-item .actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
a.list-item { color: inherit; }
a.list-item:hover { text-decoration: none; background: var(--hover); margin: 0 calc(-1 * var(--space-3)); padding-left: var(--space-3); padding-right: var(--space-3); border-radius: var(--radius); }

/* Barre d'outils de liste (recherche, filtres) */
.toolbar { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.toolbar .field { min-width: 160px; }
.toolbar .field-search { flex: 1; min-width: 200px; max-width: 360px; }
.toolbar .spacer { flex: 1; }
.search { position: relative; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.search .input { padding-left: 32px; }

/* Indicateurs d'état (seulement états significatifs). Point coloré, ou icône quand l'état en a une. */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; --status-color: var(--text-3); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--status-color); flex-shrink: 0; }
.status-ok { --status-color: var(--ok); }
.status-warn { --status-color: var(--warn); }
.status-danger { --status-color: var(--danger); }
.status-info { --status-color: var(--info); }
.status-muted { --status-color: var(--text-muted); }
.status-icon::before { display: none; }
.status-icon svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--status-color); }
.status-pill { padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--muted-soft); color: var(--text); }
.status-pill.status-ok { background: var(--ok-soft); }
.status-pill.status-warn { background: var(--warn-soft); }
.status-pill.status-danger { background: var(--danger-soft); }
.status-pill.status-info { background: var(--info-soft); }
/* État « en cours » : l'arc tourne lentement (jamais sous prefers-reduced-motion) */
.status-job-running svg { animation: spin 1.4s linear infinite; }
.tag { display: inline-block; padding: 1px 7px; border-radius: var(--radius-s); background: var(--surface-3); color: var(--text-2); font-size: 12px; }
.present { color: var(--text); }
.absent { color: var(--text-muted); }

/* Onglets */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); overflow-x: auto; }
.tab {
  position: relative; padding: 9px var(--space-3); border: 0; margin-bottom: -1px; border-radius: var(--radius) var(--radius) 0 0;
  background: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.tab::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); transform: scaleX(0); transition: transform var(--duration-slow) var(--ease-out); }
.tab:hover { color: var(--text); background: var(--hover); }
.tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.tab[aria-selected="true"]::after { transform: none; }

/* États */
.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-2); font-size: 14px; max-width: 46ch; margin: 0 auto; text-wrap: balance; }
.empty .btn { margin-top: var(--space-4); }
.empty .empty-icon {
  display: block; margin: 0 auto var(--space-4); width: 56px; height: 56px; padding: 15px; border-radius: 50%; color: var(--text-muted);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--surface) 70%, var(--surface-2)), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(15, 23, 42, .04);
}
.error-state { padding: var(--space-4); border-radius: var(--radius); background: var(--danger-soft); border-left: 2px solid var(--danger); font-size: 14px; }
.error-state .btn { margin-top: var(--space-3); }
.forbidden { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-2); }

/* Toasts */
.toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: 50; max-width: 360px; }
.toast {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-l);
  background: var(--surface); box-shadow: var(--shadow-lg); color: var(--text); border: 1px solid var(--border);
  font-size: 14px; border-left-width: 3px; line-height: 1.4;
  animation: toast-in var(--duration-slow) var(--ease-out);
}
.toast-ok { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--danger); }
.toast-warn { border-left-color: var(--warn); }
.toast-info { border-left-color: var(--info); }
.toast { display: flex; align-items: center; gap: var(--space-3); }
.toast-action { margin-left: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.nav-badge, .badge-count { transition: transform .2s var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Calendrier mensuel */
.cal-nav { display: flex; align-items: center; gap: var(--space-2); }
.cal-nav h2 { min-width: 180px; text-align: center; font-size: 17px; text-transform: capitalize; }
.cal-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-height: calc(100vh - 200px); }
.cal { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.cal th, .cal td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; }
.cal thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-2); font-weight: 500; height: 44px; min-width: 32px; text-align: center; line-height: 1.1; }
.cal thead th small { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.cal th.cal-name, .cal td.cal-name { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding: 0 var(--space-3); white-space: nowrap; min-width: 160px; font-weight: 500; }
.cal thead th.cal-name { z-index: 3; background: var(--surface-2); }
.cal td { height: 36px; min-width: 32px; }
/* Une ligne sur deux légèrement teintée pour suivre un collaborateur sur tout le mois ; les week-ends,
   la colonne du jour et le nom (colonne figée) reprennent la même teinte par-dessus leur fond. */
.cal tbody tr:nth-child(even) td { background: var(--surface-2); }
.cal tbody tr:nth-child(even) td.cal-name { background: var(--surface-2); }
/* Week-ends et fériés : fond nettement plus sombre/clair que la grille et hachures fines, lisibles dans les deux
   thèmes (signalement 80 : « voir un peu mieux ressortir les weekends »). */
.cal .off { background-color: color-mix(in srgb, var(--text) 5%, var(--surface)); background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text) 5%, transparent) 6px 7px); }
.cal tbody tr:nth-child(even) td.off { background-color: color-mix(in srgb, var(--text) 7%, var(--surface)); }
.cal thead th.off { color: var(--text-muted); background-color: color-mix(in srgb, var(--text) 7%, var(--surface-2)); }
html[data-theme="dark"] .cal .off { background-color: color-mix(in srgb, var(--text) 7%, var(--surface)); background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text) 7%, transparent) 6px 7px); }
html[data-theme="dark"] .cal tbody tr:nth-child(even) td.off { background-color: color-mix(in srgb, var(--text) 9%, var(--surface)); }
html[data-theme="dark"] .cal thead th.off { background-color: color-mix(in srgb, var(--text) 9%, var(--surface-2)); }
.cal th.today { color: var(--text); background: var(--blue-light); box-shadow: inset 0 -2px 0 var(--accent); }
/* Colonne du jour : repérable sur toutes les lignes pour voir d'un coup d'œil qui est là */
.cal td.pre, .cal td.post, .cal-legend i.pre { background-image: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--warn, #d97706) 30%, transparent) 4px 6px); }
.cal td.off.pre, .cal td.off.post { background-image: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--warn, #d97706) 18%, transparent) 4px 6px); }
.cal-legend i.pre { background-color: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.cal-name-note { display: block; font-weight: 400; font-size: 11px; color: var(--warn, #d97706); }
.cal td.today { background: var(--blue-light); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.cal td.today.off { background-color: color-mix(in srgb, var(--blue-light) 60%, color-mix(in srgb, var(--text) 5%, var(--surface))); }
.cal-cell { position: relative; display: flex; height: 100%; min-height: 35px; }
.cal-half { flex: 1; }
/* Type d'absence : sa couleur (--abs, fournie par le référentiel) en fond doux + liseré, abréviation en texte.
   Sans couleur connue, la marque. */
.cal-abs, .cal-full {
  --abs: var(--brand);
  background: color-mix(in srgb, var(--abs) 28%, var(--surface));
  box-shadow: inset 0 -3px 0 var(--abs);
  color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
}
.cal-full { flex: 1; }
.cal-half.cal-abs:first-child { border-right: 1px solid var(--surface); }
.cal-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); font-size: 13px; color: var(--text-2); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i {
  --abs: var(--brand);
  display: inline-block; width: 16px; height: 14px; border-radius: 2px;
  background: color-mix(in srgb, var(--abs) 28%, var(--surface)); box-shadow: inset 0 -2px 0 var(--abs);
  font-style: normal; font-size: 8px; font-weight: 600; color: var(--text); text-align: center; line-height: 13px;
}
.cal-legend i.off { background-color: color-mix(in srgb, var(--text) 5%, var(--surface)); background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text) 5%, transparent) 6px 7px); border: 1px solid var(--border); box-shadow: none; }
.cal-legend i.half { background: linear-gradient(90deg, color-mix(in srgb, var(--abs) 28%, var(--surface)) 50%, var(--surface) 50%); border: 1px solid var(--border); box-shadow: none; }

/* Tableau de bord */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); align-items: start; }
.shortcuts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.day-list { display: flex; flex-direction: column; gap: var(--space-3); }
.day-list-day { font-size: 13px; color: var(--text-2); font-weight: 500; text-transform: capitalize; }
.day-list ul { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.day-list li { display: flex; justify-content: space-between; gap: var(--space-3); }

/* Fonds documentaire */
.fonds { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.date-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 260px); overflow: auto; }
.date-list button {
  text-align: left; padding: 6px var(--space-3); border: 0; border-radius: var(--radius-s);
  background: none; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.date-list button:hover { background: var(--hover); color: var(--text); }
.date-list button[aria-current="true"] { background: var(--blue-light); color: var(--accent); font-weight: 600; }
.channel-group { margin-bottom: var(--space-6); }
.channel-group h3 { font-size: 14px; color: var(--text-2); margin-bottom: var(--space-2); letter-spacing: .04em; }

/* Tâches */
.job-progress { display: flex; align-items: center; gap: var(--space-2); min-width: 140px; }
.job-progress .bar { flex: 1; }
.job-progress span.pct { font-size: 12px; color: var(--text-2); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* Connexion */
.login {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6);
  background: var(--bg);
  background-image: radial-gradient(60% 50% at 20% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%), radial-gradient(50% 45% at 100% 100%, color-mix(in srgb, var(--cat-production) 8%, transparent), transparent 70%);
}
.login-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-8) var(--space-6); animation: dialog-in var(--duration-slow) var(--ease-out); }
.login-card h1 { font-size: 20px; margin-bottom: var(--space-6); }
.login-card .login-sub { color: var(--text-2); font-size: 14px; margin-bottom: var(--space-6); }
.login-card .form-actions { justify-content: space-between; align-items: center; }
.login-foot { margin-top: var(--space-6); font-size: 14px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-strong); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* Mot de passe temporaire (affichage unique) */
.secret { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); font-family: var(--mono); font-size: 15px; user-select: all; }
.secret code { flex: 1; word-break: break-all; }

/* Aide inline (à la demande) */
details.help { font-size: 13px; color: var(--text-2); }
details.help summary { cursor: pointer; }

/* Responsive : tiroir sous 900 px */
@media (max-width: 899px) {
  /* Sur téléphone, c'est le document qui défile (pas une zone interne) : la capture d'écran « Pleine page » d'iOS
     reprend alors toute la page (Antoine, 21 octobre 2026) ; la barre du haut reste collée en haut. */
  .app, .app[data-nav="rail"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px auto; height: auto; min-height: 100vh; min-height: 100dvh; }
  .main { overflow: visible; min-height: calc(100dvh - 48px); }
  .topbar {
    display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2);
    background: var(--surface); border-bottom: 1px solid var(--border); font-weight: 600;
    position: sticky; top: 0; z-index: 30;
  }
  .app[data-fullscreen] .topbar { display: none; }
  .app[data-fullscreen] { grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; }
  .app[data-fullscreen] .main { overflow: hidden; min-height: 0; }
  .nav {
    position: fixed; inset: 0 auto 0 0; width: min(var(--nav-w), 85vw); z-index: 40;
    transform: translateX(-100%); transition: transform var(--duration) var(--ease);
  }
  .app[data-drawer] .nav { transform: none; }
  .app[data-drawer] .nav-scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 39; }
  .app[data-nav="rail"] .nav-head { padding: 0 var(--space-2) 0 var(--space-4); justify-content: space-between; }
  .app[data-nav="rail"] .nav-group-head { display: flex; }
  .app[data-nav="rail"] .nav-group ul { display: none; }
  .app[data-nav="rail"] .nav-group[data-open] ul { display: block; animation: rise-in .18s var(--ease-out) both; }
  .app[data-nav="rail"] .nav-link { justify-content: flex-start; padding: 0 var(--space-2); width: auto; height: auto; }
  .app[data-nav="rail"] .nav-link span, .app[data-nav="rail"] .nav-logout span, .app[data-nav="rail"] .nav-user { display: block; }
  .app[data-nav="rail"] .nav-logout { width: 100%; justify-content: flex-start; padding: 0 var(--space-4); }
  .nav-toggle { display: none; }
  .page { padding: var(--space-4); }
  .page-head h1 { font-size: 22px; }
  .fonds { grid-template-columns: minmax(0, 1fr); }
  .date-list { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .dl { grid-template-columns: 1fr; gap: var(--space-1); }
  .dl dt { margin-top: var(--space-2); }
  .table-wrap { max-height: none; }
  .cal-wrap { max-height: none; }
  .toasts { left: var(--space-4); right: var(--space-4); max-width: none; }
}

/* Compléments des pages */
.cell-icon { display: inline-flex; align-items: center; gap: 6px; }
.cell-icon svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-2); }
.file-flags { display: inline-flex; gap: var(--space-3); font-size: 13px; }
.file-flags .absent { text-decoration: line-through; }
.toolbar .check { min-height: 36px; }
.json { display: block; max-width: 420px; max-height: 96px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
textarea.input.mono { font-family: var(--mono); font-size: 13px; }
.refresh-note { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.refresh-note.is-error { color: var(--danger); }
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); align-items: start; }
.fiche .card + .card { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 899px) { .fiche { grid-template-columns: minmax(0, 1fr); } }

/* Marque « arrêt sur images » (charte officielle) */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); white-space: nowrap; overflow: hidden; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; font-size: 14px; line-height: 0;
  color: var(--on-brand); background: var(--brand); border-radius: var(--radius-s);
}
.brand-mark::before, .brand-mark::after { content: ''; display: block; height: 1em; width: 0.36175em; background: currentColor; }
.brand-mark::before { margin-right: 0.24078em; }
.brand-title { font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: -.03em; text-transform: lowercase; line-height: 1.1; }
.brand-title .accent { color: var(--accent); font-weight: 900; }
.app[data-nav="rail"] .brand { display: none; }
.login-card .brand { margin-bottom: var(--space-4); }
.login-card .brand-mark { width: 38px; height: 38px; font-size: 18px; }
.login-card .brand-title { font-size: 19px; }
.page-head h1, .section-head h2, .card-head h2, .card-head h3 { font-family: var(--font-heading); }
@media (max-width: 899px) { .app[data-nav="rail"] .brand { display: inline-flex; } }

/* Transition clair ↔ sombre à l'entrée et à la sortie de l'éditeur de montage.
   Les couleurs de la coquille s'interpolent ; la page sortante s'efface ; la barre garde son état (ouverte ou rail, au choix de la personne). */
html { background: var(--bg); transition: background-color 420ms var(--ease); }
.nav, .main, .topbar, body {
  transition: background-color 420ms var(--ease), border-color 420ms var(--ease), color 420ms var(--ease);
}
.nav { view-transition-name: asi-nav; }
.main { view-transition-name: asi-main; position: relative; } /* repère des éléments en absolu (légendes réservées aux lecteurs d'écran…) : sinon ils allongent le document et la page défile dans le vide */
::view-transition-old(asi-main) { animation: asi-page-out 260ms var(--ease) both; }
::view-transition-new(asi-main) { animation: asi-page-in 360ms 80ms var(--ease) both; }
::view-transition-old(asi-nav), ::view-transition-new(asi-nav) { animation-duration: 420ms; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; }
@keyframes asi-page-out { to { opacity: 0; transform: scale(.985); } }
@keyframes asi-page-in { from { opacity: 0; transform: scale(1.01); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Tags contrôlés et fonctions uniques (collaborateurs) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) 6px; align-items: center; }
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2);
  font-size: 12px; line-height: 18px; white-space: nowrap;
}
/* Teintes des tags : fonctions uniques = marque, contrats = sarcelle, métiers = violet ; les autres restent gris. */
.tag-office { background: var(--cat-rh-soft); color: var(--cat-rh); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-rh) 25%, transparent); }
.tag-contrat { background: var(--cat-fonds-soft); color: var(--cat-fonds); }
.tag-metier { background: var(--cat-production-soft); color: var(--cat-production); }
.tag-cat-rh { background: var(--cat-rh-soft); color: var(--cat-rh); }
.tag-cat-production { background: var(--cat-production-soft); color: var(--cat-production); }
.tag-cat-fonds { background: var(--cat-fonds-soft); color: var(--cat-fonds); }
.tag-cat-compta { background: var(--cat-compta-soft); color: var(--cat-compta); }
.tag-cat-admin { background: var(--cat-admin-soft); color: var(--cat-admin); }
.tag-icon { display: inline-flex; align-items: center; gap: 4px; padding-left: 6px; }
.tag-icon svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Type de fichier : icône dans une case teintée par catégorie (vidéo = marque, image = sarcelle,
   son = ambre, PDF = violet, texte = gris-bleu, montage = accent, lien et autre = neutre). */
.ftype {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
  min-width: 28px; height: 24px; padding: 0 5px; border-radius: var(--radius-s);
  background: var(--muted-soft); color: var(--text-2); font-size: 12px; white-space: nowrap;
}
.ftype svg { width: 16px; height: 16px; }
.ftype-video { background: var(--cat-rh-soft); color: var(--cat-rh); }
.ftype-image { background: var(--cat-fonds-soft); color: var(--cat-fonds); }
.ftype-audio { background: var(--cat-compta-soft); color: var(--cat-compta); }
.ftype-pdf { background: var(--cat-production-soft); color: var(--cat-production); }
.ftype-text { background: var(--cat-admin-soft); color: var(--cat-admin); }
.ftype-nle { background: var(--blue-subtle); color: var(--accent-strong); }
.ftype-folder { background: transparent; color: var(--accent); }
.ftype-link { background: transparent; color: var(--text-2); }
.page-meta-tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.tag-choices { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); border: 0; padding: 0; margin: 0; min-width: 0; }
.tag-choices .check { min-height: 32px; }
.offices-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline;
  margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: 13px; color: var(--text-2);
}
.offices-bar .offices-label { color: var(--text-muted); }
.offices-bar .offices-item a { color: var(--text); font-weight: 500; }
.offices-bar .offices-sep { color: var(--text-3); }

/* Page Système : supervision en direct (préfixe .sys-) */
.sys-head-actions { display: flex; align-items: center; gap: var(--space-4); }
.sys-stamp { font-size: 13px; color: var(--text-muted); }
.sys-stamp.is-stale { color: var(--warn-text); }
.sys-tile-label svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: var(--cat-admin); }
.sys-machine b { font-weight: 600; color: var(--text); }
.sys-uptime { white-space: nowrap; }
.sys-na { color: var(--text-muted); font-style: italic; text-decoration: underline dotted; text-decoration-color: var(--border-strong); cursor: help; }
.sys-card-note:empty { display: none; }
.sys-card-note { font-size: 13px; }

.sys-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.sys-tile {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-sm);
}
.sys-tile-label { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-tile-unit { color: var(--text-muted); }
.sys-tile-value { font-family: var(--font-heading); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-tile-value.sys-na { font-family: var(--font); font-size: 15px; font-weight: 400; line-height: 28.8px; }
.sys-tile-sub { font-size: 12px; color: var(--text-muted); min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-tile-sub.sys-na { font-style: normal; text-decoration: none; cursor: default; }
.sys-tile-sub:empty::before { content: " "; white-space: pre; }

.sys-spark { display: block; width: 100%; height: 36px; margin: 4px 0 2px; fill: none; stroke: none; overflow: visible; }
.sys-spark-area { fill: var(--accent); fill-opacity: .1; stroke: none; }
.sys-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sys-spark-line-2 { stroke: var(--text-3); }
.sys-spark-cell { width: 160px; }
.sys-spark-cell .sys-spark { height: 28px; margin: 0; min-width: 120px; }
.sys-spark-swatch-1 { background: var(--accent); }
.sys-spark-swatch-2 { background: var(--text-3); }

.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); align-items: start; }
.sys-grid .card + .card { margin-top: 0; }
.sys-card .card-body { display: flex; flex-direction: column; gap: var(--space-3); }
.sys-hint { font-size: 13px; color: var(--text-muted); }
.sys-dl { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); }
.sys-dl dd { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* Processeur : un bloc par cœur */
.sys-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-2) var(--space-3); }
.sys-core { display: flex; flex-direction: column; gap: 4px; }
.sys-core-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sys-core-name { font-weight: 500; }
.sys-load-head { font-size: 14px; font-weight: 500; }
.sys-load-head .sys-hint { font-weight: 400; }

/* Mémoire : barre segmentée et légende */
.sys-segbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-3); }
.sys-seg { display: block; height: 100%; transition: width var(--duration) var(--ease); }
.sys-seg-used { background: var(--accent); }
.sys-seg-compressed { background: var(--warn); }
.sys-seg-inactive { background: var(--blue-subtle); }
.sys-seg-free { background: transparent; }
.sys-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-1) var(--space-3); font-size: 13px; }
.sys-legend-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sys-legend-label { color: var(--text-2); }
.sys-legend-item > span:last-child { margin-left: auto; white-space: nowrap; }
.sys-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; font-style: normal; vertical-align: middle; }
.sys-swatch.sys-seg-free { background: var(--surface-3); }

/* Disques */
.sys-disks { display: flex; flex-direction: column; gap: var(--space-3); }
.sys-disk { display: flex; flex-direction: column; gap: 4px; }
.sys-disk-head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; flex-wrap: wrap; }
.sys-disk-name { font-weight: 500; }

/* Services */
.sys-svc { display: grid; grid-template-columns: 140px auto; gap: 2px var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.sys-svc:last-of-type { border-bottom: 0; }
.sys-svc-name { font-weight: 500; }
.sys-svc .meta { grid-column: 2; overflow-wrap: anywhere; }
.sys-svc .meta:empty { display: none; }
.sys-self { font-weight: 500; }

/* Cache */
.sys-cache { display: flex; flex-direction: column; gap: 6px; }
.sys-cache-line { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; }

@media (max-width: 899px) {
  .sys-grid { grid-template-columns: minmax(0, 1fr); }
  .sys-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-svc { grid-template-columns: 1fr; }
  .sys-svc .meta { grid-column: 1; }
  .sys-dl { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .sys-seg { transition: none; } }

/* Carte « Compte Google » de la page Système. */
.sys-google { display: flex; flex-direction: column; gap: var(--space-3); }
.sys-google code { font-size: 13px; overflow-wrap: anywhere; }
.sys-google-scopes { margin: 0; padding-left: var(--space-4); }
.sys-google-scopes.is-missing { color: var(--text-3); }
.sys-google .is-warn { color: var(--warn-text); }
.sys-google details summary { cursor: pointer; color: var(--text-2); font-size: 14px; margin-bottom: var(--space-3); }

/* Page Exports : tâches en cours puis fichiers produits. */
.exports-running { display: flex; flex-direction: column; gap: var(--space-2); }
.exports-running .job-progress { display: flex; align-items: center; gap: var(--space-3); }
.exports-running .job-progress .progress { flex: 1; }
.exports-name { display: inline-flex; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }

/* ---------- Outils de post-production (traduction, son, audio des progs) ---------- */
.tools-dialog { display: flex; flex-direction: column; gap: var(--space-3); min-width: min(520px, 80vw); }
.tools-status:empty, .tools-existing:empty { display: none; }
.tools-progress { display: flex; flex-direction: column; gap: var(--space-1); }
.tools-result { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tools-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.tools-list li { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.tools-options { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.eac3-bar { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--space-4); }
.eac3-bar .field { min-width: 180px; margin: 0; }
.eac3-summary { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 14px; color: var(--text-2); margin: var(--space-3) 0; }
.eac3-report { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; }
.eac3-report li { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }

/* Justificatifs d'absence : pastilles dans la liste, lecteur privé. */
.abs-docs { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.abs-doc { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; font: inherit; }
.abs-doc-add { font-size: 13px; }
.abs-doc-view { display: flex; flex-direction: column; gap: var(--space-2); min-width: min(800px, 90vw); }
.abs-doc-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-3); }
.abs-doc-img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius); }

/* Notifications : cloche dans la navigation, panneau, historique. */
.notif { position: relative; margin-left: auto; }
.notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text-2); cursor: pointer; }
.notif-bell:hover { background: var(--hover); color: var(--text); }
.notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notif-badge[hidden] { display: none; }
.notif-panel { position: fixed; z-index: 60; width: min(380px, 90vw); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-lg); animation: dialog-in var(--duration-slow) var(--ease-out); }
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.notif-head-actions { display: flex; gap: 2px; }
.notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: var(--space-2) var(--space-3); border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.notif-item:hover { background: var(--hover); }
.notif-item.is-unread .notif-title { font-weight: 600; }
.notif-body { font-size: 13px; color: var(--text-2); }
.notif-time { font-size: 12px; color: var(--text-3); }
.notif-empty { padding: var(--space-3); }
.notif-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: var(--space-2); vertical-align: middle; }
.notif-history .list-item { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }

/* Comptes rendus de réunion. */
.minutes-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(min(100%, 300px), 2fr); gap: var(--space-4); align-items: start; }
.minutes-editor textarea { font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.minutes-preview { font-family: var(--font-serif, Merriweather, Georgia, serif); line-height: 1.6; }
.minutes-preview h2, .minutes-preview h3 { margin: var(--space-3) 0 var(--space-1); }
.minutes-signers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.minutes-hash { overflow-wrap: anywhere; margin-top: var(--space-3); }
@media (max-width: 900px) { .minutes-grid { grid-template-columns: minmax(0, 1fr); } }

/* Système → Sauvegardes. */
.sys-backups { display: flex; flex-direction: column; gap: var(--space-3); }
.sys-backups-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; font-size: 13px; }
.sys-backups-dl dt { color: var(--text-2); }
.sys-backups-dl dd { margin: 0; overflow-wrap: anywhere; }
.sys-backups-table td, .sys-backups-table th { font-size: 13px; vertical-align: top; }
.sys-backups-table tr.is-danger td { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.sys-backups-deletions summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
.sys-backups-deletions .direct-key { display: grid; gap: 4px; }
.direct-thumb { display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-2); }
.direct-key .secret { margin-bottom: var(--space-2); }
.list-plain { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

/* Indisponibilité (V-11) : hachurée, pour la distinguer d'une absence comptable. */
.cal-full.cal-indispo, .cal-abs.cal-indispo, .cal-legend i.cal-indispo {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--abs) 30%, var(--surface)) 0 4px, var(--surface) 4px 8px);
  box-shadow: inset 0 -3px 0 var(--abs);
}

/* Catalogue des émissions. */
.cat-title { margin: 0 0 var(--space-2); font-size: 16px; }
.cat-summary { margin: 0 0 var(--space-2); line-height: 1.55; }
.cat-summary.cat-compact { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cat-guests { margin: var(--space-2) 0; font-size: 13px; }
.cat-topics { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--space-2) 0; }
.cat-topics .tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, var(--hover)); border: 1px solid var(--border); }
.cat-foot { margin-top: var(--space-2); font-size: 12px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); }
.cat-item { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.cat-head { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }

/* Markdown partagé (wiki, aide, comptes rendus). */
.md { line-height: 1.6; }
.md h2 { font-size: 20px; margin: var(--space-5) 0 var(--space-2); }
.md h3 { font-size: 16px; margin: var(--space-4) 0 var(--space-2); }
.md h4 { font-size: 14px; margin: var(--space-3) 0 var(--space-1); }
.md p { margin: 0 0 var(--space-3); }
.md ul, .md ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.md li { margin: 2px 0; }
.md blockquote { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--accent); background: var(--hover); border-radius: 0 var(--radius) var(--radius) 0; }
.md blockquote p:last-child { margin: 0; }
.md pre { margin: 0 0 var(--space-3); padding: var(--space-3); background: var(--surface-2, var(--hover)); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; font-size: 13px; }
.md code { font-family: var(--mono); font-size: 0.92em; background: var(--hover); padding: 1px 5px; border-radius: 4px; }
.md pre code { background: none; padding: 0; }
.md .md-img { max-width: 100%; border-radius: var(--radius); }
.md .md-table { margin-bottom: var(--space-3); }
.md kbd, .md code.kbd { font-family: var(--mono); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface); }
.md-wikilink { text-decoration: underline dotted; }

/* Wiki. */
.wiki-index .toolbar, .aide-grid .toolbar { margin-bottom: var(--space-3); }
.wiki-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-4); align-items: start; }
.wiki-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wiki-list li { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.wiki-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.wiki-link { font-weight: 600; }
.wiki-snippet { margin-top: 2px; }
.wiki-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-4); align-items: start; }
.wiki-article { padding: var(--space-5) var(--space-6); font-size: 15px; }
.wiki-article .md h2:first-child { margin-top: 0; }
.wiki-side { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.wiki-toc { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.wiki-toc li.lvl-3 { padding-left: var(--space-3); }
.wiki-toc a { display: block; padding: 2px 0; color: var(--text-2); }
.wiki-toc a:hover { color: var(--text); }
.wiki-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.wiki-editor textarea { font-family: var(--mono); font-size: 13px; line-height: 1.5; min-height: 60vh; }
.wiki-preview { max-height: 75vh; overflow: auto; }
.ml { margin-left: var(--space-2); }
@media (max-width: 1100px) { .wiki-edit-grid { grid-template-columns: minmax(0, 1fr); } .wiki-preview { max-height: none; } }
@media (max-width: 899px) { .wiki-grid, .wiki-cols { grid-template-columns: minmax(0, 1fr); } .wiki-side { position: static; } .wiki-article { padding: var(--space-4); } }

/* Aide. */
.aide-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.aide-nav { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.aide-nav a { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--radius); color: var(--text-2); font-size: 13.5px; }
.aide-nav a:hover { background: var(--hover); color: var(--text); }
.aide-nav a.is-current { background: var(--hover); color: var(--text); font-weight: 600; }
.aide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.aide-card { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); color: inherit; text-decoration: none; }
.aide-card:hover { background: var(--hover); }
.aide-card-head { display: flex; align-items: center; gap: var(--space-2); }
.aide-toc { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); font-size: 13px; }
.aide-toc a { color: var(--text-2); padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; }
.aide-pager { display: flex; justify-content: space-between; gap: var(--space-2); }
@media (max-width: 899px) { .aide-grid { grid-template-columns: minmax(0, 1fr); } .aide-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md ul ul { list-style: circle; }

/* Téléphone : barres d'actions et champs en ligne passent à la ligne, dialogues plein écran. */
@media (max-width: 699px) {
  .page-actions, .toolbar, .field-row, .form-actions { flex-wrap: wrap; }
  .page-head { flex-wrap: wrap; gap: var(--space-2); }
  .page-head .page-actions { width: 100%; }
  .page-head .page-actions .btn { flex: 1 1 auto; justify-content: center; }
  dialog.dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .card { padding: var(--space-3); }
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .btn, button.btn { min-height: 40px; }
  input, select, textarea { font-size: 16px; } /* évite le zoom automatique d'iOS */
}

/* Calendrier de republication. */
.repub-list { display: flex; flex-direction: column; gap: var(--space-4); }
.repub-day { display: flex; flex-direction: column; gap: var(--space-3); }
.repub-item { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--space-2); }
.repub-item.is-muted { opacity: .6; }
.repub-item-head { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; align-items: flex-start; }
.repub-summary { margin: 0; font-size: 14px; }
.params-grille { max-height: 280px; margin: var(--space-2) 0; }
.compta-anomalies { border-color: color-mix(in srgb, var(--warn, #d97706) 50%, var(--border)); }

/* Fiche d'entrée, pièces, photo. */
.fiche-span { grid-column: 1 / -1; }
.fiche-flow { display: contents; } /* conteneur chargé à part dont les cartes se rangent dans la grille .fiche */
.fiche-photo-box { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.fiche-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--hover); }
.fiche-photo-empty { display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--text-3); }
.fiche-files { display: flex; flex-direction: column; }
.fiche-file-kind { display: grid; grid-template-columns: 18px minmax(120px, 0.9fr) minmax(0, 1.5fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 3px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.fiche-file-kind:last-child { border-bottom: 0; }
.fiche-file-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); }
.fiche-file-kind.is-ok .fiche-file-dot { background: var(--ok, #16a34a); border-color: var(--ok, #16a34a); color: #fff; }
.fiche-file-kind.is-missing .fiche-file-dot { border-color: var(--warn, #d97706); background: color-mix(in srgb, var(--warn, #d97706) 18%, transparent); }
.fiche-file-label { font-weight: 600; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.fiche-file-req { font-weight: 400; font-size: 11px; color: var(--warn, #d97706); }
.fiche-file-docs { display: flex; flex-direction: column; min-width: 0; }
.fiche-file { display: flex; align-items: center; gap: 2px; min-width: 0; }
.fiche-file a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fiche-file .btn { opacity: .55; } .fiche-file:hover .btn { opacity: 1; }
.fiche-file-act { justify-self: end; }

/* Inscription en sept étapes. */
.login-card-wide { max-width: 720px; width: min(720px, 96vw); }
.onb-steps { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--space-2); font-size: 12px; color: var(--text-3); }
.onb-steps li { display: inline-flex; align-items: center; gap: 4px; }
.onb-num { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); font-size: 11px; }
.onb-steps li.is-current { color: var(--text); font-weight: 600; }
.onb-steps li.is-current .onb-num { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.onb-steps li.is-done { color: var(--text-2); }
.onb-steps li.is-done .onb-num { background: var(--hover); }
.onb-h2 { font-size: 16px; margin: 0 0 var(--space-3); }
.onb-nav { justify-content: space-between; }
.onb-recap { font-size: 13px; }
.onb-recap h3 { font-size: 13px; margin: var(--space-3) 0 var(--space-1); }
@media (max-width: 699px) { .onb-steps .onb-title { display: none; } .onb-steps li.is-current .onb-title { display: inline; } }

/* Coffre des accès médias. */
.vault-list { display: flex; flex-direction: column; }
.vault-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.vault-row:last-child { border-bottom: 0; }
.vault-main { min-width: 0; flex: 1 1 320px; }
.vault-title { font-weight: 600; }
.vault-actions { display: flex; align-items: center; gap: 2px; }
.vault-secret { min-width: 120px; font-size: 13px; }
.vault-secret-row { display: flex; align-items: flex-end; gap: var(--space-2); }
.vault-secret-row .field { flex: 1 1 auto; }
.vault-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.vault-fieldset legend { font-size: 12px; color: var(--text-2); padding: 0 4px; }

/* Droits d'accès. */
.rights-table th.rights-col { text-align: center; padding: var(--space-2) 6px; font-weight: 500; }
.rights-head { display: inline-flex; align-items: center; gap: 4px; }
.rights-name { min-width: 180px; }
.rights-cell { text-align: center; }
.rights-cell.is-role input { accent-color: var(--text-3); }
.rights-cell.is-override { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rights-legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); vertical-align: middle; }
.rights-legend.is-role { background: var(--text-3); }
.rights-legend.is-override { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* Debug : liste de contrôle. */
.debug-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.debug-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.debug-item:last-child { border-bottom: 0; }
.debug-item.is-ok .debug-label { color: var(--text-2); }
.debug-check input { width: 18px; height: 18px; margin-top: 3px; }
.debug-main { flex: 1 1 auto; min-width: 0; }
.debug-label { font-weight: 600; }
.debug-note { margin-top: 4px; color: var(--danger); font-size: 13px; }
.debug-group { margin-bottom: var(--space-3); }
.debug-group-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: var(--space-2) 0; }
.debug-how { font-size: 12.5px; }
.debug-actions { flex: 0 0 auto; }
.card.is-collapsed .card-body { padding-top: 0; }
.vote-list { display: flex; flex-direction: column; gap: var(--space-3); }
.vote { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.vote.is-closed { background: var(--surface-2, var(--bg-2)); }
.vote-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.vote-options { display: flex; flex-direction: column; gap: 4px; margin: var(--space-1) 0; }
.vote-option { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.vote-results { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vote-results li { display: grid; grid-template-columns: minmax(80px, 1fr) 3fr auto; gap: var(--space-2); align-items: center; }
.vote-bar { display: block; height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.vote-fill { display: block; height: 100%; background: var(--accent, var(--primary)); }
.minutes-agenda { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.sig-drop { border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--space-3); text-align: center; color: var(--text-2); cursor: pointer; }
.sig-drop.is-over, .sig-drop:focus-visible { border-color: var(--accent, var(--primary)); color: var(--text); outline: none; }
.sig-files { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sig-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 8px; text-decoration: none; color: inherit; max-width: 100%; }
.sig-thumb { height: 56px; max-width: 120px; object-fit: cover; border-radius: 4px; }
.sig-body { white-space: pre-wrap; margin: var(--space-2) 0; }
.sig-answer { background: var(--surface-2, var(--bg-2)); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.sig-bundle { max-height: 50vh; overflow: auto; font-size: 12px; white-space: pre-wrap; background: var(--surface-2, var(--bg-2)); padding: var(--space-3); border-radius: var(--radius); }
.sig-card.is-fait, .sig-card.is-ecarte { opacity: .7; }
.capture-btn { opacity: .55; }
.capture-btn:hover, .capture-btn:focus-visible { opacity: 1; }
.app[data-nav="rail"] .capture-btn { display: none; }
.sig-shot { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.sig-shot-row { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.sig-shot-row .sig-thumb { height: 72px; max-width: 160px; }
.tag-sens { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-strong); font-size: 11px; margin-left: 6px; vertical-align: middle; }
/* Notifications : les lignes sont des boutons ; texte à gauche, pleine largeur */
.notif-item { width: 100%; text-align: left; justify-content: flex-start; align-items: flex-start; }
.notif-item .list-item-main { text-align: left; }
/* Aide : marges intérieures de l'article et de la table des matières */
.card.aide-article { padding: var(--space-4) var(--space-5); }
.aide-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.aide-toc a { font-size: 12.5px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); }
/* Droits : briques en lignes, comptes en colonnes */
.rights-table th.rights-col { vertical-align: bottom; text-align: center; min-width: 96px; padding: var(--space-2); white-space: normal; line-height: 1.25; writing-mode: horizontal-tb; transform: none; }
.rights-table th.rights-col .meta { font-weight: 400; white-space: nowrap; }
/* signalement 127 (26 octobre 2026) : « je ne vois ni le droit ni la personne » — la grille défilait dans la page, les
   en-têtes (personnes) partaient en haut et la colonne des briques partait à gauche. Le cadre devient le défileur
   (hauteur de l'écran), les noms de comptes restent collés en haut, les briques collées à gauche, et la ligne + la
   colonne survolées sont surlignées ; une légende au-dessus dit « brique · personne · état » sous le pointeur. */
.table-wrap.table-auto.rights-wrap { max-height: calc(100vh - 230px); overflow: auto; }
.rights-table th.rights-name, .rights-table th.rights-name .meta { white-space: normal; }
.rights-table th.rights-name { max-width: 300px; }
.rights-table thead th { position: sticky; top: 0; background: var(--surface-2, var(--bg)); z-index: 2; }
.rights-table thead th.rights-name { left: 0; z-index: 3; }
.rights-table tbody th.rights-name { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.rights-table th.rights-col .rights-account { font-weight: 600; }
.rights-table th.rights-name { min-width: 220px; }
.rights-table tbody tr:hover > th, .rights-table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.rights-table .is-col-hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.rights-table thead th.is-col-hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2, var(--bg))); }
.rights-table tbody tr:hover > td.is-col-hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.rights-table td.rights-cell input { width: 18px; height: 18px; cursor: pointer; }
.rights-focus { min-height: 1.4em; margin: var(--space-2) 0; font-size: 13px; color: var(--text-2); }
.rights-focus strong { color: var(--text); }
.rights-head { display: inline-flex; align-items: center; gap: 6px; }
.rights-table td.rights-cell { text-align: center; }
/* Calendrier : bandeau du jour */
.cal-today { margin-bottom: var(--space-3); }
.cal-today-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cal-today-indispo { text-decoration: underline dotted; }

.nav-head { overflow: hidden; }
.nav-head .brand { min-width: 0; }
.nav-head .brand-title { overflow: hidden; text-overflow: ellipsis; }
.actus-list { display: flex; flex-direction: column; gap: var(--space-2); }
.actu { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.actu.is-medias { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.actu-head { display: flex; align-items: center; gap: var(--space-2); }
.actu-emissions { margin: var(--space-1) 0 0; padding-left: var(--space-4); }

/* Sauvegardes : actions par instantané, liste des fichiers d'un instantané */
.sys-backups-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.sys-backups-table tr.is-warn td:first-child { color: var(--warn); font-weight: 600; }
.sys-restore-list { max-height: 50vh; overflow: auto; }
.sys-restore-files li { font-size: 12px; font-family: var(--mono); overflow-wrap: anywhere; }
.btn.is-danger { color: var(--danger); }

/* Comptes rendus : champ heure avec bouton « sans heure » */
.minutes-time { display: flex; align-items: flex-end; gap: 4px; min-width: 0; }
.minutes-time .field { flex: 1; min-width: 0; }
.minutes-time .btn { margin-bottom: 2px; }

/* Calendrier : case d'absence cliquable pour les RH et le président */
.cal-cell.is-link { cursor: pointer; }
.cal-cell.is-link:hover .cal-full, .cal-cell.is-link:hover .cal-half.cal-abs { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Absence en modification : pièces déjà jointes */
.abs-form-doclist li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; padding: 2px 0; }

/* Assistant : demande, étapes de l'agent, sélection à valider */
.assistant { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.assistant-form { display: flex; align-items: flex-start; gap: var(--space-2); }
.assistant-mark { color: var(--accent); padding-top: 8px; }
.assistant-input { flex: 1; min-width: 0; resize: vertical; min-height: 40px; }
.assistant-hint.is-warn { color: var(--warn); }
.assistant-out:empty { display: none; }
.assistant-out { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.assistant-run-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.assistant-prompt { font-weight: 500; overflow-wrap: anywhere; }
.assistant-steps { margin: 0; padding-left: 1.4em; font-size: 13px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.assistant-steps li.is-running { list-style: none; margin-left: -1.4em; display: flex; align-items: center; gap: 6px; }
.assistant-step-tool { font-weight: 600; color: var(--text); }
.assistant-answer { margin: 0; padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius); border-left: 3px solid var(--accent); }
.assistant-passages { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); max-height: 52vh; overflow: auto; }
.assistant-passage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-2) var(--space-3); }
.assistant-passage + .assistant-passage { border-top: 1px solid var(--border); }
.assistant-passage.is-off { opacity: .45; }
.assistant-passage-meta { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.assistant-passage-text { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.assistant-proposal { display: flex; flex-direction: column; gap: var(--space-2); }
.assistant-create { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 170px auto; gap: var(--space-3); align-items: end; }
.assistant-create-go { display: flex; align-items: center; gap: var(--space-3); padding-bottom: 2px; }
.assistant-total { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.assistant-created { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3); background: var(--ok-soft, var(--surface-2)); border-radius: var(--radius); }
@media (max-width: 900px) { .assistant-create { grid-template-columns: 1fr; } }
/* Réglages de l'assistant (Système) */
.assistant-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); align-items: end; }

/* Assistant transversal : bouton discret dans l'en-tête de navigation, tiroir à droite, non modal */
.assistant-btn { opacity: .6; }
.assistant-btn:hover, .assistant-btn:focus-visible { opacity: 1; color: var(--accent); }
.app[data-nav="rail"] .assistant-btn { display: none; }
.assistant-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); z-index: 45; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(15, 23, 42, .14); }
.assistant-drawer[hidden] { display: none; }
.assistant-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.assistant-drawer-head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 15px; font-weight: 600; color: var(--accent); }
.assistant-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-3) var(--space-4); }
.assistant-in-drawer { display: flex; flex-direction: column; gap: var(--space-2); }
.assistant-in-drawer .assistant-form { flex-direction: column; align-items: stretch; }
.assistant-in-drawer .assistant-mark { display: none; }
.assistant-in-drawer .assistant-input { min-height: 76px; }
.assistant-in-drawer .assistant-form .btn { align-self: flex-end; }
.assistant-in-drawer .assistant-passages { max-height: none; }
.assistant-in-drawer .assistant-passage { grid-template-columns: auto minmax(0, 1fr); }
.assistant-in-drawer .assistant-passage > .btn { grid-column: 2; justify-self: start; }
.assistant-in-drawer .assistant-create { grid-template-columns: 1fr; }
/* Écran large : la page se resserre pour laisser le tiroir à côté d'elle plutôt que par-dessus. */
@media (min-width: 1500px) { body.has-assistant .app { padding-right: 520px; } }
.assistant-allbar { display: flex; align-items: center; gap: var(--space-2); }
.assistant-allbar-spacer { flex: 1; }

/* Liens publics (dialogue) */
.share-made .secret { margin: var(--space-2) 0; }
.share-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 60vh; overflow: auto; }
.share-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
.share-row.is-off { opacity: .6; }
.share-row-main { flex: 1 1 auto; min-width: 0; } .share-row-title { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.share-row-url code { font-size: 12px; overflow-wrap: anywhere; }
.share-row-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Admin › Tâches : workers (autres Mac qui encodent) */
.workers-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.workers-strip[hidden] { display: none; }
.worker-card { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 220px; }
.worker-card.is-ok { border-color: var(--ok, #2e9e5b); }
.worker-card.is-off { opacity: .85; }
.pill-worker { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.4; background: var(--accent-soft, rgba(37,99,235,.12)); color: var(--accent, #2563eb); font-size: 12px; font-weight: 500; }

/* Admin › Workers */
.wk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.wk-more { padding: 8px 0 2px; text-align: center; }
.wk-activity td:nth-child(4) { white-space: nowrap; }
.wk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.wk-grid .card + .card { margin-top: 0; }
.wk-card .card-body { display: flex; flex-direction: column; gap: 10px; }
.wk-ai-jobs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wk-ai-job { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wk-slots { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.wk-slots-cells { display: flex; gap: 4px; }
.wk-slot { width: 22px; height: 10px; border-radius: 3px; background: var(--border); }
.wk-slot.is-busy { background: var(--accent, #2563eb); }
.wk-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wk-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.wk-checks li { display: grid; grid-template-columns: 16px minmax(0, auto) 1fr; gap: 8px; align-items: baseline; }
.wk-checks li.is-ok svg { color: var(--ok, #2e9e5b); } .wk-checks li.is-ko svg { color: var(--warn-text, #b7791f); }
.wk-check-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.wk-actions .is-danger { color: var(--danger); }
.wk-policies { display: flex; flex-direction: column; gap: 6px; }
.wk-policy { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.wk-policy.is-on { border-color: var(--accent, #2563eb); background: var(--accent-soft, rgba(37,99,235,.08)); }
.wk-guide-body ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.wk-cmd { margin: 6px 0; padding: 8px 10px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; white-space: pre-wrap; }
.wk-probe { margin-top: 8px; }
.wk-bench { padding: 6px 0; }

/* Comptabilité › Piges */
.pg-month { min-width: 160px; text-align: center; font-size: 16px; }
.pg-banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.pg-banner.is-locked { border-color: var(--ok, #2e9e5b); }
.pg-banner svg { flex: 0 0 auto; margin-top: 2px; }
.pg-table .pg-num { width: 68px; text-align: right; }
.pg-table .pg-adj { width: 84px; }
.pg-table .pg-dates { width: 150px; }
.pg-table .pg-comment { width: 220px; }
.pg-table td.num, .pg-table th.num { text-align: right; white-space: nowrap; }
.pg-table .pg-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-table tr.is-paid td:first-child { border-left: 3px solid var(--ok, #2e9e5b); }
.pg-name { font-weight: 600; } .pg-name.is-off { color: var(--text-muted); text-decoration: line-through; }
.pg-hist { margin-left: 4px; color: var(--warn-text, #b7791f); cursor: help; }
.pg-recap p { margin: 0 0 6px; }
.pg-forfait-wrap { display: inline-flex; align-items: center; gap: 2px; }
.pg-forfait-wrap .pg-forfait { width: 88px; }
.pg-forfait-wrap.is-forced .pg-forfait { border-color: var(--warn-text, #b7791f); font-weight: 600; }
.pg-forfait-wrap .pg-reset[hidden] { display: none; }
/* Piges : choix d'une personne et vue téléphone en fiches */
.pg-pick { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.pg-pick-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.pg-pick-item:hover, .pg-pick-item:focus-visible { border-color: var(--accent, #2563eb); }
.pg-pick-item.is-off .pg-name { color: var(--text-muted); }
@media (max-width: 900px) {
  .pg-wrap { overflow: visible; }
  .pg-table, .pg-table tbody, .pg-table tr, .pg-table td { display: block; width: 100%; }
  .pg-table thead { display: none; }
  .pg-table tfoot { display: block; } .pg-table tfoot tr { display: flex; flex-wrap: wrap; gap: 6px 14px; } .pg-table tfoot th { display: inline; border: 0; padding: 4px 0; }
  .pg-table tfoot th:empty { display: none; }
  .pg-table tbody tr { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; background: var(--surface); position: relative; }
  .pg-table tbody tr.is-paid { border-left: 3px solid var(--ok, #2e9e5b); }
  .pg-table td { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 0; border: 0 !important; text-align: left !important; }
  .pg-table td[data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; }
  .pg-table td.pg-cell-name { display: block; padding-right: 40px; margin-bottom: 4px; }
  .pg-table td.pg-cell-anc { display: none; }
  .pg-table td.pg-cell-actions { position: absolute; top: 6px; right: 6px; width: auto; display: block; padding: 0; }
  .pg-table td.pg-total { font-size: 16px; }
  .pg-table .pg-num, .pg-table .pg-forfait-wrap .pg-forfait { width: 100px; }
  .pg-table .pg-dates, .pg-table .pg-comment { width: 100%; }
  .pg-month { min-width: 0; }
}

/* Direction › Finances */
.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.fin-kpi { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.fin-kpi.is-ok { border-left: 4px solid var(--ok, #2e9e5b); } .fin-kpi.is-warn { border-left: 4px solid var(--warn-text, #b7791f); } .fin-kpi.is-danger { border-left: 4px solid var(--danger, #c0392b); } .fin-kpi.is-accent { border-left: 4px solid var(--accent, #2563eb); }
.fin-kpi-label { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.fin-kpi-value { font-size: 24px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.fin-help { color: var(--text-muted); cursor: help; display: inline-flex; }
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); align-items: start; }
.fin-grid .card + .card { margin-top: 0; }
.fin-chart svg { display: block; max-width: 100%; height: auto; }
.fin-alerts { display: flex; flex-direction: column; gap: 6px; }
.fin-alert { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.fin-alert.is-danger { border-color: var(--danger, #c0392b); } .fin-alert.is-warn { border-color: var(--warn-text, #b7791f); }
.fin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; align-items: end; }
.fin-hires { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.fin-hire { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.fin-notes { margin: 8px 0 0; padding-left: 20px; font-size: 14px; } .fin-notes li { margin-bottom: 4px; }
.fin-answer { margin-top: 10px; } .fin-answer-text { padding: 12px 14px; border-left: 3px solid var(--accent, #2563eb); background: var(--surface-2, var(--surface)); border-radius: var(--radius); }
.fin-answer-text p { margin: 0 0 8px; }
.fin-gloss dt { font-weight: 600; margin-top: 10px; } .fin-gloss dd { margin: 2px 0 0; color: var(--text-2); }
.is-danger { color: var(--danger, #c0392b); }
/* Finances › Embauche : grille régulière, champs masqués selon le contrat */
.fin-form-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.fin-form-grid .field[hidden] { display: none; }
.fin-form-hint { margin: 10px 0 0; }
.fin-line-label { font-weight: 600; }
.fin-notebox { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--warn-text, #b7791f); border-radius: var(--radius); background: var(--surface); }
.fin-notebox ul { margin: 0; padding-left: 18px; font-size: 14px; } .fin-notebox li { margin-bottom: 4px; }
.fin-notebox svg { flex: 0 0 auto; margin-top: 3px; color: var(--warn-text, #b7791f); }
.is-ok { color: var(--ok, #2e9e5b); }

/* ---- Émission › Fichiers : nom sur une ligne, actions en icônes ---- */
.em-file { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.em-file-name { display: block; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-file-actions { display: inline-flex; gap: 4px; white-space: nowrap; }

/* ---- Collaborateurs › fusion de doublons ---- */
.merge-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.merge-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface-2, transparent); }
@media (max-width: 700px) { .merge-pair { grid-template-columns: 1fr; } }

/* Signalement : le dialogue s'efface le temps de la capture d'écran */
.dialog.is-capturing { visibility: hidden; }
.dialog.is-capturing::backdrop { opacity: 0; }

/* ---- Admin › Tâches : onglet Crons et historique ---- */
.crons-table td { vertical-align: top; }
.cron-desc { max-width: 46ch; }
.cron-next.is-window { color: var(--ok, #2fb37a); }
.cron-worker select { min-width: 11ch; }
.jobs-broken { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border: 1px solid color-mix(in srgb, var(--warn, #d97706) 40%, transparent); border-radius: var(--radius); background: var(--warn-soft, rgba(217,119,6,.08)); }
.jobs-broken-title { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-2); font-size: 14px; }
.jobs-history summary { cursor: pointer; color: var(--text-2); margin: var(--space-3) 0 var(--space-2); }

.cron-sched { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cron-num .input { width: 6ch; padding: 2px 6px; }
.cron-sched input[type=time].input { width: auto; padding: 2px 6px; }
/* Fonds › Radios : tranche encore en cours d'écriture */
tr.is-recording td { color: var(--text-muted); }
tr.is-recording svg { animation: spin 1.4s linear infinite; }

/* Lecteur du fonds, média sans image : moteur du Visuel audio sur le logo de la station */
.audio-visual { position: absolute; inset: 0; overflow: hidden; background: #0b0e14; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.audio-visual-canvas { width: 100%; height: 100%; object-fit: contain; }

/* Direct (ATEM) */
.direct-player { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.direct-player video { width: 100%; height: 100%; display: block; background: #000; }
/* media-chrome : habillage sobre, couleurs de l'intranet, barre qui s'efface */
.direct-mc { width: 100%; height: 100%; display: block; aspect-ratio: 16 / 9; font-family: inherit;
  --media-primary-color: #fff; --media-secondary-color: transparent; --media-text-color: #fff;
  --media-control-background: transparent; --media-control-hover-background: rgba(255,255,255,.14);
  --media-control-padding: 8px; --media-icon-color: #fff; --media-range-track-height: 3px; --media-range-thumb-height: 10px; --media-range-thumb-width: 10px;
  --media-range-bar-color: var(--accent, #2563eb); --media-range-track-background: rgba(255,255,255,.3); --media-font-size: 13px; }
.direct-mc[hidden] { display: none; }
.direct-mc media-control-bar { width: 100%; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); padding: 12px 6px 4px; }
.direct-mc .direct-mc-spacer { flex: 1; }
.direct-mc media-volume-range { width: 90px; }
.direct-mc media-live-button { --media-live-button-indicator-color: #e5484d; --media-live-button-icon-color: #aaa; font-weight: 600; letter-spacing: .04em; }
.direct-mc media-live-button[mediapaused], .direct-mc media-live-button:not([mediatimeislive]) { --media-live-button-indicator-color: #777; }
.direct-mc media-loading-indicator { --media-icon-color: #fff; }
.direct-player .direct-idle { position: absolute; inset: 0; display: grid; place-items: center; color: #bbb; font-size: 14px; text-align: center; padding: 16px; }
.direct-live { display: inline-flex; align-items: center; gap: 6px; }
.direct-live::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,.6); animation: direct-pulse 1.4s ease-out infinite; }
@keyframes direct-pulse { to { box-shadow: 0 0 0 8px rgba(229,72,77,0); } }
.direct-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .direct-grid { grid-template-columns: 1fr; } }
.direct-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.direct-kv code { user-select: all; }
.direct-bar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.direct-bar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 var(--space-1); }
.direct-main { display: none; } /* ancienne mise en page (avant le 15 octobre 2026) */
@media (max-width: 900px) { .direct-main { grid-template-columns: 1fr; } }
.direct-infos { display: grid; gap: var(--space-2); align-content: start; }
.direct-title-input { font-weight: 600; font-size: 15px; }
.direct-thumb-box { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius); overflow: hidden; }
.direct-thumb-box:disabled { cursor: default; }
.direct-thumb-box .direct-thumb { max-width: none; margin: 0; }
.direct-thumb-empty { display: grid; place-items: center; gap: 4px; aspect-ratio: 16 / 9; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); font-size: 13px; }
.direct-copies { font-size: 12px; }
select.input.direct-scn-select { width: auto; min-width: 180px; }
.bd-today { color: var(--accent); }
.img-cut { display: grid; gap: var(--space-2); }
.img-cut-preview { width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius); background: #111; cursor: crosshair; touch-action: none; display: block; }
.img-cut-options, .img-cut-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.img-cut-options .field { margin: 0; min-width: 260px; }
.img-cut-size { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.img-cut-size input[type=range] { width: 140px; }
.img-cut-val { min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.impersonation-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 8px 16px; background: #e5484d; color: #fff; font-size: 13px; }
.impersonation-banner .btn { background: #fff; color: #e5484d; border-color: #fff; }
/* Bandeau HEVC : le navigateur ne décode pas la vidéo (accélération matérielle décochée) → image noire partout */
.hevc-banner { position: fixed; left: 0; right: 0; top: 0; z-index: 900; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 8px 16px; background: #b45309; color: #fff; font-size: 13px; line-height: 1.3; }
.hevc-banner .btn { background: #fff; color: #b45309; border-color: #fff; flex-shrink: 0; }
body.has-hevc-banner .app { padding-top: 38px; }
.nle-black-warning { margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius); background: color-mix(in srgb, #b45309 14%, var(--surface)); border: 1px solid color-mix(in srgb, #b45309 50%, transparent); font-size: 13px; }
.nle-black-warning[hidden] { display: none; }
body.is-impersonating .app { padding-bottom: 44px; }
.direct-acc { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 6px 0; }
.direct-acc .status-pill { display: inline-flex; align-items: center; gap: 2px; }
.direct-scn-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-left: 8px; white-space: nowrap; }
.direct-thumb-box .direct-thumb[hidden], .direct-thumb-empty[hidden] { display: none; }
.direct-embed { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.direct-player video[hidden], .direct-player .direct-embed[hidden], .direct-player .direct-idle[hidden] { display: none; }
/* le message d'attente ne doit jamais intercepter la souris : sinon les commandes du lecteur ne voient aucun survol */
.direct-player .direct-idle { pointer-events: none; }
.direct-rec-badge { animation: direct-pulse-text 1.4s ease-in-out infinite; }
@keyframes direct-pulse-text { 50% { opacity: .55; } }
.direct-rec-btn { background: #e5484d; border-color: #e5484d; color: #fff; }
.direct-rec-btn:hover { background: #d13b40; border-color: #d13b40; }
.direct-dest { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.direct-dest a { color: var(--muted); display: inline-flex; }
.direct-rec-title { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.direct-rec-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.direct-rec-meta .mono { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12px; }
.direct-key { display: grid; gap: 4px; }
.direct-thumb { display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-2); }
.direct-key .secret { margin-bottom: var(--space-2); }
.list-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* Vers les émissions (emissionFromMedia.js) : aperçu pour poser l'entrée et la sortie */
.em-from-video { width: 100%; max-height: 42vh; background: #000; border-radius: var(--radius); }
.em-from .em-steps { margin: 4px 0 0; }
.em-from-thumb { display: flex; align-items: center; gap: 10px; }
.em-from-thumb img { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: #000; }
.direct-elapsed { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 4px; }
.fonds-notes { list-style: none; margin: 0; padding: 0; }
.fonds-note { display: flex; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 6px 4px; cursor: pointer; color: inherit; font: inherit; }
.fonds-note:hover { background: var(--surface-2); }

/* Page Direct, mise en page du 15 octobre 2026 : scène à gauche (état, lecteur borné en hauteur, source repliée),
   régie et infos à droite, notes et enregistrements en dessous. */
.direct-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(100%, 320px), 400px); gap: var(--space-4); align-items: start; max-width: 1680px; }
.direct-stage { display: grid; gap: var(--space-2); min-width: 0; }
.direct-stage .direct-player { width: min(100%, calc(60vh * 16 / 9)); aspect-ratio: 16 / 9; }
.direct-side { display: grid; gap: var(--space-4); align-content: start; }
.direct-side .card-body { display: grid; gap: var(--space-2); }
@media (max-width: 1100px) { .direct-layout { grid-template-columns: 1fr; } .direct-stage .direct-player { width: 100%; } }
.direct-source { font-size: 13px; color: var(--text-2); }
.direct-source summary { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.direct-source[open] { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.direct-source .direct-kv { margin: 8px 0; }
.direct-dests { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.direct-dest-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 4px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.direct-dest-row:last-child { border-bottom: 0; }
.direct-dest-row.is-running { background: color-mix(in srgb, var(--success, #16a34a) 8%, transparent); border-radius: 4px; }
.direct-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); display: inline-block; }
.direct-dot.is-on { background: #16a34a; box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 25%, transparent); }
.direct-dot.is-wait { background: #d97706; }
.direct-dest-meta { font-size: 12px; color: var(--text-2); text-align: right; }
.direct-dest-meta .status-pill, .direct-dest-meta .status { font-size: 11px; }
.direct-side .direct-infos .direct-thumb-box { max-width: 220px; }
.direct-side .direct-thumb { max-width: 220px; }
.direct-copies { font-size: 12px; gap: 2px; }
.direct-lower .direct-stage .direct-player.is-idle { width: min(100%, calc(42vh * 16 / 9)); }
.direct-stage .direct-player.is-idle .direct-idle { font-size: 13px; }
.direct-stage .card { margin-top: var(--space-2); }

/* Direct › Enregistrements : liste sous le lecteur */
.direct-card-recs .card-body { gap: 4px; }
.direct-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.direct-rec-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 4px; border-radius: 6px; }
.direct-rec-row:hover { background: var(--surface-2); }
.direct-rec-thumbbox { display: grid; place-items: center; width: 72px; height: 40px; border-radius: 4px; background: #000; color: #888; overflow: hidden; }
.direct-rec-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.direct-rec-body { min-width: 0; display: grid; gap: 2px; }
.direct-rec-title { display: flex; align-items: center; gap: 4px; font-weight: 600; min-width: 0; }
.direct-rec-title a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-rec-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.direct-rec-actions { display: inline-flex; gap: 0; }
.direct-stage .card { margin-top: var(--space-2); }
.abs-form-delete { margin-right: auto; }

/* Direct › Notes : journal horodaté dans la colonne de régie (qui, quoi, quand) */
.direct-card-notes .card-body { gap: 6px; }
.direct-note-count { font-size: 12px; }
.direct-note-bar { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
.direct-note-tc-now { min-width: 58px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); font-size: 13px; text-align: center; }
.direct-note-tc-now:empty { display: none; }
.direct-note-input { width: 100%; }
.direct-notes { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; display: grid; gap: 2px; }
.direct-note { display: grid; grid-template-columns: 58px 1fr; grid-template-areas: 'tc who' 'tc text' 'tc clock'; column-gap: 10px; row-gap: 2px; padding: 8px 6px; border-radius: 6px; border-bottom: 1px solid var(--border); font-size: 13px; position: relative; }
.direct-note:last-child { border-bottom: 0; }
.direct-note:hover { background: var(--surface-2); }
.direct-note.is-empty { grid-template-columns: 1fr; grid-template-areas: 'text'; }
.direct-note-tc { grid-area: tc; font-weight: 700; font-size: 14px; color: var(--accent, #2563eb); align-self: start; padding-top: 1px; }
.direct-note-who { grid-area: who; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.direct-note-avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--accent, #2563eb); color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; }
.direct-note.is-mine .direct-note-avatar { background: #16a34a; }
.direct-note-text { grid-area: text; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
.direct-note-clock { grid-area: clock; font-size: 11px; }
.direct-note-actions { position: absolute; top: 4px; right: 4px; display: inline-flex; visibility: hidden; }
.direct-note:hover .direct-note-actions, .direct-note:focus-within .direct-note-actions { visibility: visible; }

/* Workers : jauges système (processeur, mémoire, disque) et courbe d'une heure */
.wk-stats { display: grid; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.wk-gauge { display: grid; gap: 3px; }
.wk-gauge-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.wk-gauge-head span:first-child { min-width: 78px; font-weight: 600; }
.wk-gauge-head .meta { margin-left: auto; font-size: 11.5px; }
.wk-gauge-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.wk-gauge-fill { height: 100%; background: var(--accent, #2563eb); border-radius: 3px; transition: width .4s ease; }
.wk-gauge.is-warm .wk-gauge-fill { background: #d97706; }
.wk-gauge.is-hot .wk-gauge-fill { background: #e5484d; }
.wk-spark { width: 100%; height: 28px; display: block; }
.wk-spark-line { fill: none; stroke: var(--accent, #2563eb); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wk-spark-area { fill: color-mix(in srgb, var(--accent, #2563eb) 14%, transparent); }
.wk-gauge.is-warm .wk-spark-line { stroke: #d97706; } .wk-gauge.is-hot .wk-spark-line { stroke: #e5484d; }
.em-up-bar { display: grid; grid-template-columns: 1fr 48px; gap: 10px; align-items: center; }
.em-up-pct { text-align: right; font-weight: 600; }
.em-up-line { font-size: 13px; }
.contrat-options { margin: var(--space-2) 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.contrat-options summary { cursor: pointer; font-weight: 600; }
.contrat-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }

/* Relecture assistée d'un contrat (tunnel de questions) */
.contrat-review-dlg .dialog-body { min-height: 260px; }
.contrat-review-summary { font-size: 15px; line-height: 1.5; padding: 10px 12px; border-left: 3px solid var(--accent, #2563eb); background: var(--bg-soft, rgba(37, 99, 235, .06)); border-radius: var(--radius); }
.contrat-review-list li, .contrat-review-recap li { cursor: pointer; padding: 4px 0; }
.contrat-review-list li.is-answered strong::after { content: ' ✓'; color: var(--ok, #16a34a); }
.contrat-review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.contrat-review-q h3, .contrat-review-recap h3, .contrat-review-done h3 { margin: 4px 0 8px; }
.contrat-review-question { margin: 12px 0 4px; }
.contrat-review-q .radio-group { display: grid; gap: 6px; }
.contrat-review-q .radio-group .check { align-items: flex-start; }
.contrat-review-q textarea { width: 100%; margin-top: 8px; }

/* Signature et tampon du compte */
.sig-card { display: grid; gap: var(--space-3); }
.sig-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; }
.sig-head { margin-bottom: 6px; }
.sig-preview { background: repeating-conic-gradient(var(--border) 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: var(--radius); padding: 10px; display: flex; justify-content: center; }
.sig-preview img { max-height: 90px; max-width: 100%; }
.contrat-sign { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--space-2) 0; }

/* Points à compléter d'un contrat : édition sur la ligne */
.contrat-warn li.is-editable { cursor: pointer; border-radius: 4px; padding: 1px 4px; margin-left: -4px; }
.contrat-warn li.is-editable:hover, .contrat-warn li.is-editable:focus-visible { background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent); outline: none; }
.contrat-warn li.is-editable svg { opacity: .55; vertical-align: -2px; }
.contrat-warn li.contrat-warn-edit { list-style: none; margin: 4px 0 6px -16px; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.contrat-warn li.contrat-warn-edit .field { flex: 1 1 260px; margin: 0; }
.contrat-warn-edit-actions { display: flex; gap: 6px; padding-bottom: 2px; }

/* Fiche d'un collaborateur : bandeau, groupes de cartes colorés (catégories des jetons), documents côte à côte */
.emp-hero { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border);
  background: linear-gradient(120deg, var(--cat-rh-soft) 0%, color-mix(in srgb, var(--cat-production-soft) 60%, var(--surface)) 55%, var(--surface) 100%); }
.emp-hero .fiche-photo { width: 84px; height: 84px; }
.emp-hero .fiche-photo-box { gap: var(--space-2); }
.emp-hero .fiche-photo-box > .meta { display: none; }
.emp-hero-main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.emp-hero-line { font-size: 15px; font-weight: 600; }
.emp-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.emp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); }
.emp-chip.is-ok { color: var(--ok, #16a34a); border-color: color-mix(in srgb, var(--ok, #16a34a) 40%, transparent); }
.emp-chip.is-warn { color: var(--warn, #d97706); border-color: color-mix(in srgb, var(--warn, #d97706) 45%, transparent); background: color-mix(in srgb, var(--warn, #d97706) 10%, var(--surface)); }
.emp-chip.is-info { color: var(--cat-rh); border-color: color-mix(in srgb, var(--cat-rh) 40%, transparent); }
.emp-hero-facts { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.emp-fact { display: flex; flex-direction: column; } .emp-fact span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); } .emp-fact strong { font-size: 14px; }
.emp-group { margin: var(--space-4) 0 var(--space-2); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.emp-group::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); align-items: start; }
.emp-grid-docs { grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); }
@media (max-width: 1000px) { .emp-grid-docs, .emp-grid { grid-template-columns: minmax(0, 1fr); } }
.emp-card[data-cat] { border-top: 3px solid var(--cat); }
.emp-card[data-cat] > .card-head { background: linear-gradient(180deg, var(--cat-soft), transparent); }
.emp-card[data-cat] > .card-head .head-icon { color: var(--cat); }
.emp-grid > .card, .emp-grid > .card + .card { margin-top: 0; }
.emp-card .dl + .dl { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.emp-card .dl { font-size: 13px; gap: 3px var(--space-4); grid-template-columns: minmax(130px, 190px) 1fr; }
.emp-card .dl dd:empty::before { content: '—'; color: var(--text-3); }
.emp-card > .card-body { padding-top: var(--space-2); }

/* Avatars des collaborateurs (photo ou initiales colorées) et lignes alternées des tableaux (signalements 99 et 100) */
.avatar { width: var(--av, 24px); height: var(--av, 24px); border-radius: 50%; object-fit: cover; flex: none; display: inline-block; vertical-align: middle; background: var(--surface-2); box-shadow: 0 0 0 1px var(--border); }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--av, 24px) * .42); font-weight: 700; letter-spacing: .02em;
  color: hsl(var(--av-h, 210) 55% 32%); background: hsl(var(--av-h, 210) 70% 90%); box-shadow: none; }
html[data-theme="dark"] .avatar-initials, html[data-workspace="dark"] .avatar-initials { color: hsl(var(--av-h, 210) 70% 80%); background: hsl(var(--av-h, 210) 35% 24%); }
.person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.person > span, .person > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.person { color: inherit; text-decoration: none; } a.person:hover > span, a.person:hover > strong { color: var(--accent); text-decoration: underline; }
.cal th.cal-name .person { gap: 7px; }
.table tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--text) 3.5%, var(--surface)); }
.table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

/* Bandeau « L'intranet a été mis à jour » */
.update-bar { position: fixed; left: 50%; bottom: var(--space-4); transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 10px 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,.25); font-size: 13px; font-weight: 600; }
.contrat-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 5px; }
.contrat-meta .person { gap: 6px; line-height: 1; }

.contrat-missing { display: grid; gap: var(--space-2); padding: 10px 12px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--warn, #d97706) 50%, transparent); background: color-mix(in srgb, var(--warn, #d97706) 8%, var(--surface)); }

/* Test de connexion (page Direct) */
.nettest { display: grid; gap: 8px; }
.nettest-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.nettest-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.nettest-val.is-ok { color: var(--ok, #16a34a); } .nettest-val.is-warn { color: var(--warn, #d97706); } .nettest-val.is-danger { color: var(--danger, #e5484d); }
.nettest-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.nettest-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.nettest-verdict { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); }
.nettest-verdict.is-ok { border-color: color-mix(in srgb, var(--ok, #16a34a) 50%, transparent); background: color-mix(in srgb, var(--ok, #16a34a) 8%, var(--surface)); }
.nettest-verdict.is-warn { border-color: color-mix(in srgb, var(--warn, #d97706) 50%, transparent); background: color-mix(in srgb, var(--warn, #d97706) 8%, var(--surface)); }
.nettest-verdict.is-danger { border-color: color-mix(in srgb, var(--danger, #e5484d) 50%, transparent); background: color-mix(in srgb, var(--danger, #e5484d) 8%, var(--surface)); }
.nettest-verdict ul { margin: 0 0 0 18px; }

/* Diagnostic de connexion : onglets, débits, chiffres clés, courbes */
.nt-context { display: grid; gap: 4px; }
.nt-ctx-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.nt-warn { color: var(--warn, #d97706); font-size: 13px; margin: 0; }
.nt-tabs, .nt-rates, .nt-route { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nt-tab, .nt-rate { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.nt-tab.is-active, .nt-rate.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.nt-rate:disabled { opacity: .45; cursor: not-allowed; }
.nt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.nt-kpi { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.nt-kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); }
.nt-kpi strong { font-size: 18px; font-variant-numeric: tabular-nums; } .nt-kpi small { font-size: 11px; color: var(--text-3); }
.nt-live { display: grid; gap: 8px; }
.nt-chart { width: 100%; height: 120px; background: var(--surface-2); border-radius: var(--radius); }
.nt-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.nt-line.is-rate { stroke: var(--accent); } .nt-line.is-lat { stroke: #d97706; }
.nt-ref { stroke: var(--ok, #16a34a); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.nt-axis { font-size: 10px; fill: var(--text-3); }
.nt-legend { display: flex; gap: 14px; font-size: 11px; color: var(--text-3); }
.nt-legend .is-rate::before, .nt-legend .is-lat::before, .nt-legend .is-ref::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 5px; vertical-align: middle; background: var(--accent); }
.nt-legend .is-lat::before { background: #d97706; } .nt-legend .is-ref::before { background: var(--ok, #16a34a); }
.nettest-verdict li.is-danger { color: var(--danger, #e5484d); } .nettest-verdict li.is-warn { color: var(--warn, #d97706); }
.nt-steps { margin: 0 0 0 18px; font-size: 13px; } .nt-steps li.is-ok { color: var(--ok, #16a34a); } .nt-steps li.is-warn { color: var(--warn, #d97706); } .nt-steps li.is-danger { color: var(--danger, #e5484d); }
.nt-profiles { border-collapse: collapse; font-size: 13px; margin: 4px 0; } .nt-profiles td { padding: 3px 14px 3px 0; } .nt-profiles tr.is-ok td:last-child { color: var(--ok, #16a34a); font-weight: 600; } .nt-profiles tr.is-no td { color: var(--text-3); }

.nettest-verdict.is-info { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.nettest-verdict .spinner { width: 16px; height: 16px; }
.nt-headline { font-size: 17px; }
.nettest-verdict p { margin: 0; }

/* Diagnostic détaillé : statistiques, journal, courbes ; Administration › Diagnostics */
.nt-chart-wrap { position: relative; } .nt-chart-wrap .nt-axis { position: absolute; top: 4px; left: 6px; font-size: 10px; color: var(--text-3); pointer-events: none; }
.nt-line.is-gap { stroke: #e5484d; } .nt-legend .is-gap::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 5px; vertical-align: middle; background: #e5484d; }
.nt-details { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; } .nt-details > summary { cursor: pointer; font-weight: 600; }
.nt-details[open] > summary { margin-bottom: 8px; }
.nt-stats { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.nt-stats th, .nt-stats td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: right; } .nt-stats tbody th { text-align: left; font-weight: 500; }
.nt-log { max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 8px; }
.nt-log table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.nt-log th { position: sticky; top: 0; background: var(--surface-2); text-align: right; padding: 4px 8px; font-weight: 600; } .nt-log td { text-align: right; padding: 2px 8px; border-bottom: 1px solid var(--border); }
.nt-log tr.is-warn td { color: var(--warn, #d97706); } .nt-log tr.is-danger td { color: var(--danger, #e5484d); font-weight: 600; }
.diag-grid { margin: var(--space-3) 0; }

/* Analyse par l'IA d'un diagnostic de connexion */
.nt-analysis { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); margin: var(--space-3) 0; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.nt-analysis.is-danger { border-color: color-mix(in srgb, var(--danger, #e5484d) 45%, transparent); } .nt-analysis.is-ok { border-color: color-mix(in srgb, var(--ok, #16a34a) 45%, transparent); }
.nt-ana-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nt-ana-verdict { font-weight: 600; font-size: 15px; margin: 0; } .nt-analysis p { margin: 0; }
.nt-ana-block ul { margin: 2px 0 0 18px; } .nt-ana-block strong { font-size: 13px; }

/* Administration › Performances */
.perf { display: grid; gap: 12px; }
.perf-ranges { display: inline-flex; gap: 4px; margin-right: 8px; }
.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.perf-grid > .card { margin: 0; }
.perf-sql { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.perf-bar { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: var(--accent); opacity: .6; max-width: 120px; }
.perf-details td { background: var(--surface-2); font-size: 13px; }
.perf-details ul { margin: 4px 0 0 18px; }
.table tr:has(+ .perf-details) td { border-bottom: none; }

/* Mobile et tablette : la page ne se déplace jamais horizontalement (Antoine, 17 octobre 2026). Ce qui est plus large que
   l'écran (tableau plat, calendrier, grille) défile dans son propre cadre ; tout le reste se replie. */
@media (max-width: 899px) {
  .main { overflow-x: clip; } /* clip, pas hidden : hidden referait de main une zone de défilement (capture « Pleine page » iOS) */
  .page, .card, .card-body, .section, .table-wrap, .cal-wrap, .nt-chart-wrap, .tabs { max-width: 100%; min-width: 0; }
  .table-wrap, .cal-wrap, .tabs, .sys-backups, .nt-log, .nt-stats, .nt-details { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .card > *, .card-body > * { min-width: 0; }
  pre, code, .mono { overflow-wrap: anywhere; }
  pre { white-space: pre-wrap; }
  img, svg:not(.icon), video, canvas, iframe { max-width: 100%; }
  .table-wrap:not(.table-flat) .table td { overflow-wrap: anywhere; }
  /* tableaux posés sans cadre (.table-wrap) : ils défilent eux-mêmes */
  .card table.table:not(.table-wrap table), .page > table.table { display: block; overflow-x: auto; max-width: 100%; }
  .cal-nav { flex-wrap: wrap; }
  .cal-nav h2 { min-width: 0; flex: 1 1 auto; }
}
@media (max-width: 699px) {
  .page { padding: var(--space-4) var(--space-3) var(--space-6); }
  .table-wrap:not(.table-flat) .table td { grid-template-columns: 88px minmax(0, 1fr); }
  .nt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-ranges { flex-wrap: wrap; }
}

/* Libellés selon la largeur : .only-wide (grand écran) / .only-narrow (téléphone). */
.only-narrow { display: none; }
@media (max-width: 699px) {
  .only-wide { display: none; }
  .only-narrow { display: inline; }
  .cal-today-inner .page-actions { flex-wrap: nowrap; width: 100%; }
  .cal-today-inner .page-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}

/* Tableau de bord : raccourcis en tête, personnalisables. */
.dash-shortcuts { margin-bottom: var(--space-4); }
.dash-shortcuts .shortcuts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dash-shortcuts .shortcuts .btn { flex: 0 1 auto; }
.shortcuts-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-1) var(--space-3); }
.shortcuts-pick-group { grid-column: 1 / -1; margin-top: var(--space-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
@media (max-width: 699px) {
  .dash-shortcuts .shortcuts .btn { flex: 1 1 calc(50% - var(--space-2)); min-width: 0; justify-content: center; }
}
.dash-shortcuts .shortcuts .btn > svg { flex: 0 0 auto; }
.dash-shortcuts .shortcuts .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Couleur partout (Antoine, 17 octobre 2026) : la teinte de la brique (--hue, posée par la navigation sur la coque, ou par
   data-hue sur une carte) colore les cases d'icône des cartes et sections, le liseré haut des cartes, les onglets actifs,
   les états vides, les icônes des boutons, les en-têtes de tableaux, les indicateurs et les raccourcis. */
:root { --tint: var(--hue, var(--cat, var(--accent))); }
[data-hue], [data-cat] { --tint: var(--hue, var(--cat, var(--accent))); }
.card { border-top: 3px solid color-mix(in srgb, var(--tint) 55%, transparent); }
.card-head h2 { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.card-head h2 .head-icon, .section-head h2 .head-icon {
  color: var(--tint); margin-right: 0; width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 8px; vertical-align: middle;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 8%, var(--surface)) 0%, color-mix(in srgb, var(--tint) 18%, var(--surface)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 24%, transparent);
}
.section-head h2 { display: flex; align-items: center; gap: var(--space-2); }
.tab[aria-selected="true"] { color: var(--tint); }
.tab::after { background: var(--tint); }
.empty .empty-icon { color: var(--tint); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tint) 6%, var(--surface)), color-mix(in srgb, var(--tint) 16%, var(--surface))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 22%, transparent); }
.btn-secondary > svg, .btn-ghost > svg { color: var(--tint); }
.btn-ghost:hover { color: var(--tint); }
.table thead th { background: color-mix(in srgb, var(--tint) 7%, var(--surface-2)); }
.table-wrap:not(.table-flat) .table td::before { color: color-mix(in srgb, var(--tint) 70%, var(--text-2)); }
.nt-kpi strong { color: var(--tint); }
.perf-bar { background: var(--tint); }
.day-list-day, .list-item-sub strong { color: var(--tint); }
.bd-today { color: var(--tint); }
.btn.shortcut { border-color: color-mix(in srgb, var(--tint) 32%, var(--border)); background: color-mix(in srgb, var(--tint) 5%, var(--surface)); }
.btn.shortcut:hover { background: color-mix(in srgb, var(--tint) 14%, var(--surface)); border-color: color-mix(in srgb, var(--tint) 55%, var(--border)); }
.btn.shortcut > svg { color: var(--tint); }
.card-head .page-actions .btn-ghost { color: var(--tint); }
.dialog .dialog-head h2 { color: var(--tint); }
html[data-workspace="dark"] .card { border-top-color: transparent; } /* l'éditeur de montage garde sa sobriété */

/* Anniversaires dans le calendrier : bougie dans la case du jour. */
.cal td { position: relative; }
.cal td.bday { background: color-mix(in srgb, var(--hue-pink) 12%, var(--surface)); }
.cal td.bday.off { background: color-mix(in srgb, var(--hue-pink) 10%, var(--surface-2)); }
.cal-bday { position: absolute; top: 2px; right: 2px; line-height: 0; color: var(--hue-pink); pointer-events: none; z-index: 1; }
.cal-bday svg { width: 13px; height: 13px; }

/* Droits d'accès, vue étroite : une ligne par brique. */
.rights-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.rights-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.rights-item-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rights-item .rights-head svg { color: var(--tint); }
.rights-item > input { flex: none; width: 24px; height: 24px; accent-color: var(--accent); }
.rights-item.is-role > input { accent-color: var(--text-3); }
.rights-item.is-override { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.rights-item-state { font-size: 12px; }

/* Choix du jour (fonds, presse) sur téléphone : une rangée de puces qui défile, le jour choisi ramené en vue. */
@media (max-width: 699px) {
  .date-list { flex-direction: row; flex-wrap: nowrap; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .date-list button { flex: none; white-space: nowrap; scroll-snap-align: center; border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; background: var(--surface); }
  .date-list button[aria-current="true"] { border-color: color-mix(in srgb, var(--tint) 50%, var(--border)); background: color-mix(in srgb, var(--tint) 12%, var(--surface)); color: var(--tint); }
}

/* Tableaux empilés (téléphone) : pas de colonne d'étiquette vide ; une ligne sans aucune étiquette se replie en une
   rangée compacte (horaire, badge, nom, durée…) au lieu d'une ligne par cellule (Antoine, 17 octobre 2026). */
@media (max-width: 699px) {
  .table-wrap:not(.table-flat) .table td:not([data-label]), .table-wrap:not(.table-flat) .table td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .table-wrap:not(.table-flat) .table td:not([data-label])::before { content: none; }
  .table-wrap:not(.table-flat) .table tr:not(:has(td[data-label]:not([data-label=""]))) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
  .table-wrap:not(.table-flat) .table tr:not(:has(td[data-label]:not([data-label=""]))) td { display: block; padding: 2px 0; }
  .table-wrap:not(.table-flat) .table tr:not(:has(td[data-label]:not([data-label=""]))) td:empty { display: none; }
  .table-wrap:not(.table-flat) .table tr:not(:has(td[data-label]:not([data-label=""]))) td.actions { width: 100%; justify-content: flex-start; padding-top: var(--space-1); }
  .empty { padding: var(--space-4) var(--space-3); }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
  .field-row > .field { min-width: 0; }
  .field-row > .field input, .field-row > .field select { width: 100%; }
}

/* Lecteur sur téléphone : simple par défaut (lecture, ±10 s, position) ; « Outils » déplie les commandes de montage. */
/* `!important` : nle.css (chargé après) pose `display: inline-flex` sur `.nle-btn.nle-btn-sm` à spécificité égale, ce qui
   faisait réapparaître « Outils » sur grand écran (Antoine, 3 nov. 2026). */
.player .player-simple { display: none !important; }
@media (max-width: 699px) {
  .player .player-simple { display: inline-flex !important; }
  .player:not(.is-pro) .player-pro { display: none !important; }
  .player .nle-monitor-bar { flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-2); }
  .player .nle-transport { gap: var(--space-2); }
  .player .nle-transport .nle-btn { min-width: 44px; min-height: 44px; }
  .player .player-tools { margin-left: auto; }
  .player .player-tools[aria-pressed="true"] { color: var(--tint); }
  .player .player-marks { gap: var(--space-2); }
  .player .player-tc-field { width: 96px; }
}
@media (max-width: 699px) { .player .player-tools { flex-basis: 100%; justify-content: center; margin: 0; } }

/* Upload vidéo (PeerTube) */
.ptu-form { display: grid; gap: var(--space-3); }
.ptu-drop { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 2px dashed color-mix(in srgb, var(--tint) 45%, var(--border)); border-radius: var(--radius-l); background: color-mix(in srgb, var(--tint) 4%, var(--surface)); cursor: pointer; transition: background .15s, border-color .15s; }
.ptu-drop svg { grid-row: 1 / 3; color: var(--tint); }
.ptu-drop strong { font-size: 14px; }
.ptu-drop-name { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.ptu-drop.is-over, .ptu-drop:hover { background: color-mix(in srgb, var(--tint) 10%, var(--surface)); border-color: var(--tint); }
.ptu-drop.has-file { border-style: solid; }
.ptu-drop.has-file .ptu-drop-name { color: var(--text); font-weight: 500; }
.ptu-drop.is-missing { border-color: var(--danger, #e5484d); }
.ptu-drop-video { padding: var(--space-5) var(--space-4); }
.ptu-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ptu-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); }
.ptu-progress { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.ptu-progress[hidden] { display: none; }
.ptu-step { display: grid; gap: 4px; }
.ptu-step-head { display: flex; justify-content: space-between; font-size: 13px; }
.ptu-bar { height: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.ptu-bar > span { display: block; height: 100%; background: var(--tint); transition: width .3s; }
.ptu-log { max-height: 200px; overflow: auto; font-size: 12px; white-space: pre-wrap; }

/* Recadrage du master (page émission, sous la découpe d'un passage) : même carte, séparé par un filet */
.em-trim { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.em-trim-title { margin: 0; font-size: 0.95rem; font-weight: 600; }

/* Fonds documentaire : sélecteur de corpus (chaînes multiples, exclusion, créneau, corpus enregistrés) */
.fonds-corpus-field .btn { min-height: 36px; justify-content: flex-start; max-width: 260px; }
.fonds-corpus-field .btn.is-active { border-color: var(--accent); color: var(--accent); }
.fonds-corpus-presets { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.fonds-corpus-presets .field { flex: 1; min-width: 200px; }
.fonds-corpus-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.fonds-corpus-group { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); background: color-mix(in srgb, var(--tint, var(--accent)) 5%, transparent); }
.fonds-corpus-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 4px; }
.fonds-corpus-group-head h4 { margin: 0; font-size: 0.9rem; }
.fonds-corpus-group-actions { display: flex; gap: 2px; }
.fonds-corpus-checks { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
.fonds-corpus-checks .check { min-height: 28px; }
.fonds-corpus-hours { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.fonds-corpus-hours .field { flex: 1; min-width: 140px; }
.fonds-corpus-save { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.fonds-corpus-save .field { flex: 1; min-width: 200px; }
.fonds-corpus-note { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-3); }

/* Direct : canaux (22 octobre 2026) — barre d'onglets au-dessus du lecteur, un bouton par canal */
.direct-channels { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--space-3); }
.direct-chan { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.direct-chan:hover { background: var(--surface-2); }
.direct-chan.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.direct-chan.is-live .direct-chan-name { font-weight: 700; }
.direct-chan-name { white-space: nowrap; }
.direct-chan-title { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-chan-tag { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); display: inline-flex; align-items: center; }
.direct-chan-tag.is-rec { background: #e5484d; color: #fff; font-weight: 700; }
.direct-chan-hint { margin-left: auto; }
.direct-chan-current { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* Capture d'image du lecteur (frame-capture.js, signalements 119/121/122, 26 octobre 2026) */
.cap-body { display: grid; grid-template-columns: minmax(280px, 1.4fr) minmax(240px, 1fr); gap: var(--space-4); align-items: start; min-width: min(860px, 90vw); }
@media (max-width: 760px) { .cap-body { grid-template-columns: 1fr; min-width: 0; } }
.cap-preview { width: 100%; height: auto; border-radius: var(--radius); background: #000; box-shadow: var(--shadow-sm); }
.cap-side { display: flex; flex-direction: column; gap: var(--space-3); }
.cap-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cap-explorer { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius); }
.cap-explorer .label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.direct-chan-list { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-2); }
.direct-chan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 6px 10px; background: var(--surface-2); border-radius: var(--radius); }
.direct-chan-buffer { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.direct-key-srt { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius); }

/* Système › Assistant : sous-titre de la section « Sommaires de presse » (28 octobre 2026) */
.sys-subtitle { font-size: 14px; font-weight: 600; margin: var(--space-4) 0 var(--space-2); color: var(--text-2); }

/* ---------- Tableau de bord › carte Technique (30 octobre 2026) ---------- */
.dash-tech { margin-bottom: var(--space-4); }
.dash-tech.is-alert .card-head h2 .head-icon { color: var(--warn); }
.tech { display: grid; gap: var(--space-4); }
.tech-h { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: var(--space-1) 0 calc(-1 * var(--space-2)); }
.tech-stamp { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tech-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); white-space: nowrap; }
.tech-chip.is-live { background: var(--ok-soft); color: var(--ok-text); }
.tech-chip.is-warm { background: var(--warn-soft); color: var(--warn-text); }
.tech-chip.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.tech-chip.is-hot { background: var(--danger-soft); color: var(--danger-text); }

/* Activité : tuiles */
.tech-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-3); }
.tech-kpi { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-l); background: var(--surface-2); border: 1px solid var(--border); position: relative; overflow: hidden; min-width: 0; }
.tech-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--hue, var(--accent)); opacity: .9; }
.tech-kpi-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--hue, var(--accent)); background: color-mix(in srgb, var(--hue, var(--accent)) 14%, transparent); }
.tech-kpi-body { min-width: 0; display: grid; gap: 1px; }
.tech-kpi-val { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tech-kpi-label { font-size: 13px; color: var(--text-2); }
.tech-kpi-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tech-kpi.is-warn .tech-kpi-sub { color: var(--warn-text); }
.tech-kpi.is-live .tech-kpi-ic { animation: tech-pulse 2.4s ease-in-out infinite; }
@keyframes tech-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hue, var(--accent)) 35%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }

/* Machines */
.tech-machines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-3); }
.tech-m { display: grid; gap: 10px; padding: 12px 14px 10px; border-radius: var(--radius-l); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.tech-m.is-off { opacity: .75; }
.tech-m-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tech-m-head strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech-role { margin-left: auto; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.tech-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--text-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-3) 18%, transparent); }
.tech-dot.is-ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.tech-dot.is-warm { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.tech-dot.is-hot { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.tech-m-body { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; }
.tech-m-bars { display: grid; gap: 8px; min-width: 0; }
.tech-m-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; }
.tech-m-foot .meta { margin-left: auto; white-space: nowrap; }
.tech-m-gpu { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Anneau */
.tech-ring { --ring: var(--ok); --p: 0; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 9%, transparent) 0); transition: --p .5s ease; }
.tech-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface-2); }
.tech-ring-in { position: relative; display: grid; text-align: center; line-height: 1.05; }
.tech-ring-in strong { font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tech-ring-in span { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.tech-ring.is-warm { --ring: var(--warn); }
.tech-ring.is-hot { --ring: var(--danger); }

/* Barres */
.tech-bar { --fill: var(--accent); display: grid; gap: 3px; min-width: 0; }
.tech-bar.is-warm, .tech-vol.is-warm { --fill: var(--warn); }
.tech-bar.is-hot, .tech-vol.is-hot { --fill: var(--danger); }
.tech-bar-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-2); }
.tech-bar-val { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-bar-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.tech-bar-fill { height: 100%; border-radius: 3px; background: var(--fill, var(--accent)); transition: width .5s ease; }

/* Courbe */
.tech-spark { --line: var(--accent); width: 100%; height: 34px; display: block; border-radius: var(--radius-s); }
.tech-spark-empty { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 0 2px, transparent 2px 6px); opacity: .6; }
.tech-spark.is-warm { --line: var(--warn); } .tech-spark.is-hot { --line: var(--danger); }
.tech-spark-line { fill: none; stroke: var(--line); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tech-spark-area { fill: color-mix(in srgb, var(--line) 14%, transparent); }

/* Stockage */
.tech-volumes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); }
.tech-vol { --fill: var(--accent); display: grid; gap: 6px; padding: 10px 14px; border-radius: var(--radius-l); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.tech-vol.is-off { opacity: .7; }
.tech-vol-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; }
.tech-vol-head strong { white-space: nowrap; }
.tech-vol-txt { margin-left: auto; color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-vol-pct { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tech-vol.is-hot .tech-vol-pct { color: var(--danger-text); } .tech-vol.is-warm .tech-vol-pct { color: var(--warn-text); }

@media (max-width: 899px) {
  .tech-kpi-val { font-size: 21px; }
  .tech-m-body { grid-template-columns: 64px minmax(0, 1fr); }
  .tech-ring { width: 64px; height: 64px; } .tech-ring::before { inset: 6px; } .tech-ring-in strong { font-size: 13px; }
  .tech-vol-txt { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .tech-kpi.is-live .tech-kpi-ic { animation: none; } .tech-bar-fill, .tech-ring { transition: none; } }
.tech-m-gpu-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.tech-m-gpu-ic { display: inline-flex; color: var(--text-3); }

/* ---------- Tableau de bord › carte Rapatriement des progs (30 octobre 2026) ---------- */
.dash-progs { margin-bottom: var(--space-4); }
.dash-progs.is-alert .card-head h2 .head-icon { color: var(--warn); }
.pg { display: grid; gap: var(--space-4); }
.pg-head { display: grid; gap: 10px; }
.pg-seg { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: color-mix(in srgb, var(--text) 9%, transparent); }
.pg-seg > div { height: 100%; min-width: 2px; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); }
.pg-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.pg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); }
.pg-kpi { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--radius-l); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.pg-kpi strong { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; }
.pg-kpi span { font-size: 12.5px; color: var(--text-2); }
.pg-kpi.is-warn strong { color: var(--warn-text); }
.pg-note { margin: 0; line-height: 1.45; }
.pg-workers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); }
.pg-w { display: grid; gap: 6px; padding: 10px 14px; border-radius: var(--radius-l); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.pg-w.is-off { opacity: .7; }
.pg-w-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pg-w-head strong { white-space: nowrap; }
.pg-w-gpu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-w-hb { margin-left: auto; white-space: nowrap; }
.pg-w-file { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-w-foot { font-size: 12px; }
.pg-recents { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pg-recent { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.pg-recent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pg-recent .meta { margin-left: auto; white-space: nowrap; }

/* Sauvegardes : problèmes en cours et contrôles de la vérification (30 octobre 2026) */
.sys-backups-health { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: 6px; }
.sys-backups-health li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: var(--radius); background: var(--warn-soft); }
.sys-backups-health li.is-error { background: var(--danger-soft); }
.sys-backups-checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.sys-backups-checks li { display: flex; align-items: baseline; gap: 6px; }
.sys-backups-checks li.is-ko { color: var(--danger-text); }

/* Tableau de bord › Réunion rapide (agenda Workspace), 2 novembre 2026 */
.dash-reunion { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-reunion-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-end; }
.dash-reunion-row > .field { flex: 1 1 220px; margin: 0; }
.dash-reunion-when > .dash-reunion-date { flex: 1 1 160px; }
.dash-reunion-when > .dash-reunion-time { flex: 0 1 120px; }
.dash-reunion-when > .dash-reunion-dur { flex: 0 1 120px; }
.dash-reunion-label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--space-1); }
.dash-reunion-all { margin-bottom: 4px; }
.dash-reunion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px var(--space-3); }
.dash-reunion-foot { justify-content: space-between; align-items: center; }
.dash-reunion-note { min-height: 1.4em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Signalements : réponse à l'auteur (5 novembre 2026) */
.sig-answer-text { margin: 4px 0 0; white-space: pre-wrap; }
.sig-card.is-target { outline: 2px solid var(--accent); outline-offset: 2px; }