/* ==========================================================================
   AIRH — Pointage · HUD plein écran (esthétique Cockpit)
   ========================================================================== */

#tt-hud {
  --bg: #EDF2F5;
  --bg-deep: #E2EAEF;
  --glass: rgba(255,255,255,.74);
  --glass-strong: rgba(255,255,255,.9);
  --line: rgba(22,60,90,.14);
  --line-soft: rgba(22,60,90,.07);
  --ink-1: #14222C;
  --ink-2: #4E6373;
  --ink-3: #8CA0AD;
  --hivis: #F4640A;
  --scan: rgba(10,166,201,.10);
  --panel-shadow: 0 30px 80px rgba(20,50,75,.22);
  --font-display: "Archivo", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 30% 20%, var(--bg), var(--bg-deep));
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 15px;
}

#tt-hud[data-theme="dark"] {
  --bg: #0A1218;
  --bg-deep: #070D12;
  --glass: rgba(14,24,32,.78);
  --glass-strong: rgba(16,28,38,.92);
  --line: rgba(140,200,235,.22);
  --line-soft: rgba(140,200,235,.09);
  --ink-1: #E8F1F6;
  --ink-2: #93AAB9;
  --ink-3: #54707F;
  --scan: rgba(60,220,255,.07);
  --panel-shadow: 0 30px 80px rgba(0,0,0,.6);
}

#tt-hud *, #tt-hud *::before, #tt-hud *::after { box-sizing: border-box; }
#tt-hud button, #tt-hud select { font-family: inherit; cursor: pointer; }
#tt-hud :focus-visible { outline: 2px solid var(--hivis); outline-offset: 2px; border-radius: 4px; }

#tt-hud .tt-sweep {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 44%, var(--scan) 50%, transparent 56%);
  background-size: 300% 100%;
  animation: tt-sweep 12s linear infinite;
  mix-blend-mode: multiply;
}
#tt-hud[data-theme="dark"] .tt-sweep { mix-blend-mode: screen; }
@keyframes tt-sweep { from { background-position: 120% 0 } to { background-position: -120% 0 } }

/* ---------- BARRE SUPÉRIEURE ---------- */
#tt-hud .tt-hud-header {
  position: relative; z-index: 20; flex: none;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px;
  background: linear-gradient(var(--glass), transparent);
  border-bottom: 1px solid var(--line-soft);
}
#tt-hud .tt-brand { display: flex; align-items: baseline; gap: 10px; }
#tt-hud .tt-rail { width: 34px; height: 8px; position: relative; top: -2px; }
#tt-hud .tt-rail::before, #tt-hud .tt-rail::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink-3);
}
#tt-hud .tt-rail::before { top: 0 } #tt-hud .tt-rail::after { bottom: 0 }
#tt-hud .tt-name {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 18px; letter-spacing: .14em; text-transform: uppercase;
}
#tt-hud .tt-name em { font-style: normal; color: var(--hivis); }
#tt-hud .tt-mode {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px;
  background: var(--glass); backdrop-filter: blur(10px); white-space: nowrap;
}
#tt-hud .tt-spacer { flex: 1 }

#tt-hud .tt-nav {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--glass); backdrop-filter: blur(10px); overflow: hidden;
}
#tt-hud .tt-nav button {
  width: 34px; height: 34px; border: none; background: none; color: var(--ink-2);
  display: grid; place-items: center; transition: background .15s, color .15s;
}
#tt-hud .tt-nav button:hover { background: var(--line-soft); color: var(--ink-1); }
#tt-hud .tt-nav .tt-month {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
  min-width: 168px; text-align: center; padding: 0 6px; color: var(--ink-1); cursor: pointer;
}

#tt-hud .tt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; background: var(--glass); backdrop-filter: blur(10px);
  text-decoration: none; transition: border-color .18s, color .18s, transform .18s;
}
#tt-hud .tt-chip:hover { border-color: var(--hivis); color: var(--ink-1); transform: translateY(-1px); }
#tt-hud select.tt-chip { min-width: 180px; appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
#tt-hud .tt-clock-mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; }
#tt-hud .tt-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(10px); color: var(--ink-2);
  display: grid; place-items: center; font-size: 14px;
  transition: border-color .18s, color .18s, transform .18s;
}
#tt-hud .tt-icon-btn:hover { border-color: var(--hivis); color: var(--ink-1); transform: translateY(-1px); }

/* ---------- CORPS ---------- */
#tt-hud .tt-hud-body {
  position: relative; z-index: 10; flex: 1; min-height: 0;
  display: grid; grid-template-columns: 252px minmax(0, 1fr);
  gap: 16px; padding: 16px 20px 0;
}
/* Vue admin : pas de colonne de gauche (chrono retiré), grille pleine largeur */
#tt-hud .tt-hud-body--full { grid-template-columns: minmax(0, 1fr); }
#tt-hud .tt-side {
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
  overflow: auto; padding-bottom: 16px; scrollbar-width: thin;
}
#tt-hud .tt-card {
  background: var(--glass); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  animation: tt-drop .6s ease both; flex: none;
}
@keyframes tt-drop { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
#tt-hud .tt-card-head {
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; text-transform: uppercase;
}
#tt-hud .tt-card-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--hivis); animation: tt-blink 2s infinite; flex: none; }
@keyframes tt-blink { 50% { opacity: .25 } }

/* poste de pointage */
#tt-hud .tt-clockbox { position: relative; }
#tt-hud .tt-clock-inner { padding: 16px 14px 18px; text-align: center; }
#tt-hud .tt-clock-time {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 40px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
#tt-hud .tt-clock-date {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--ink-3); margin-top: 8px; text-transform: uppercase;
}
#tt-hud .tt-clock-status {
  margin-top: 12px; font-size: 12.5px; color: var(--ink-2);
  padding-top: 12px; border-top: 1px solid var(--line-soft);
}
#tt-hud .tt-clock-status strong { color: var(--hivis); }
#tt-hud .tt-clock-worked {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
}
#tt-hud .tt-clock-worked .lbl { color: var(--ink-3); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
#tt-hud .tt-clock-action { margin-top: 16px; display: flex; justify-content: center; }
#tt-hud .tt-action-btn {
  width: 96px; height: 96px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass-strong);
  color: var(--ink-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(20,50,75,.16);
  transition: transform .2s, border-color .2s, color .2s, box-shadow .2s;
}
#tt-hud .tt-action-btn:hover { transform: translateY(-2px); border-color: var(--hivis); color: var(--ink-1); }
#tt-hud .tt-action-btn::after {
  content: ""; position: absolute; width: 118px; height: 118px; border-radius: 50%;
  border: 1px dashed var(--line); animation: tt-spin 22s linear infinite; pointer-events: none;
}
#tt-hud .tt-clock-action { position: relative; }
@keyframes tt-spin { to { transform: rotate(360deg) } }
#tt-hud .tt-action-btn--active {
  border-color: #22c55e; color: #16a34a;
  box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 14%, transparent), 0 10px 26px rgba(20,50,75,.16);
  animation: tt-live 2.6s ease-in-out infinite;
}
@keyframes tt-live { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, #22c55e 6%, transparent), 0 10px 26px rgba(20,50,75,.16) } }

#tt-hud .tt-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); }
#tt-hud .tt-kpi { background: var(--glass-strong); padding: 12px 13px; }
#tt-hud .tt-kpi .v {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 24px; line-height: 1; color: var(--kc, var(--hivis)); font-variant-numeric: tabular-nums;
}
#tt-hud .tt-kpi .l {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em;
  color: var(--ink-3); margin-top: 6px; text-transform: uppercase;
}

#tt-hud .tt-legend { padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
#tt-hud .tt-legend .row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink-2); }
#tt-hud .tt-legend .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ---------- PANNEAU GRILLE ---------- */
#tt-hud .tt-main { display: flex; flex-direction: column; min-height: 0; }
#tt-hud .tt-grid-host { flex: 1; min-height: 0; display: flex; }
#tt-hud .tt-panel {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column;
  background: var(--glass); backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--panel-shadow); overflow: hidden;
}
#tt-hud .tt-corners { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#tt-hud .tt-corners::before, #tt-hud .tt-corners::after,
#tt-hud .tt-corners i::before, #tt-hud .tt-corners i::after {
  content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--hivis);
}
#tt-hud .tt-corners::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 14px 0 0 0 }
#tt-hud .tt-corners::after { top: -1px; right: -1px; border-left: none; border-bottom: none; border-radius: 0 14px 0 0 }
#tt-hud .tt-corners i::before { bottom: -1px; left: -1px; border-right: none; border-top: none; border-radius: 0 0 0 14px }
#tt-hud .tt-corners i::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 14px 0 }

#tt-hud .tt-panel-head {
  flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
}
#tt-hud .tt-panel-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  color: var(--ink-3); text-transform: uppercase;
}
#tt-hud .tt-panel-title b { color: var(--ink-1); font-weight: 700; }

#tt-hud .tt-switch {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em;
  color: var(--ink-2); text-transform: uppercase;
}
#tt-hud .tt-switch input { position: absolute; opacity: 0; pointer-events: none; }
#tt-hud .tt-switch .track {
  width: 30px; height: 16px; border-radius: 99px; background: var(--line);
  position: relative; transition: background .15s; flex: none;
}
#tt-hud .tt-switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--glass-strong); box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .15s;
}
#tt-hud .tt-switch input:checked + .track { background: var(--hivis); }
#tt-hud .tt-switch input:checked + .track::after { transform: translateX(14px); }

#tt-hud .tt-filters { display: flex; gap: 6px; flex-wrap: wrap; }
#tt-hud .pt-grid-filter {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--fc, var(--ink-3)) 55%, transparent);
  background: transparent; color: var(--fc, var(--ink-2));
  transition: background .15s, color .15s, transform .15s;
}
#tt-hud .pt-grid-filter:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--fc, var(--ink-3)) 12%, transparent); }
#tt-hud .pt-grid-filter.is-active {
  background: var(--fc, var(--ink-2)); color: #fff;
  border-color: var(--fc, var(--ink-2));
}
#tt-hud .pt-grid-filter[data-filter="all"].is-active { background: var(--hivis); border-color: var(--hivis); }

/* ---------- TABLEAU ---------- */
#tt-hud .tt-grid-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
#tt-hud table.tt-grid {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 12px; white-space: nowrap;
}
#tt-hud table.tt-grid th, #tt-hud table.tt-grid td {
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
#tt-hud table.tt-grid thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--glass-strong); backdrop-filter: blur(18px);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line);
}
#tt-hud table.tt-grid thead th.tt-num-h { left: 0; z-index: 5; width: 30px; min-width: 30px; }
#tt-hud table.tt-grid thead th.tt-emp-h { left: 30px; z-index: 5; text-align: left; padding-left: 12px; min-width: 165px; }
#tt-hud table.tt-grid thead th.tt-tot-h { right: 0; z-index: 5; min-width: 54px; }
#tt-hud table.tt-grid th.tt-day { min-width: 34px; padding: 6px 3px; cursor: pointer; line-height: 1.3; }
#tt-hud table.tt-grid th.tt-day .d {
  display: block; font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 13px; color: var(--ink-2); letter-spacing: 0;
}
#tt-hud table.tt-grid th.tt-day .w { display: block; font-size: 8.5px; letter-spacing: .1em; opacity: .8; }
#tt-hud table.tt-grid th.tt-day:hover { background: color-mix(in srgb, var(--hivis) 12%, var(--glass-strong)); }
#tt-hud table.tt-grid th.tt-day.we { background: color-mix(in srgb, var(--ink-3) 12%, var(--glass-strong)); }
#tt-hud table.tt-grid th.tt-day.we .d { color: var(--ink-3) }
#tt-hud table.tt-grid th.tt-day.hol .d, #tt-hud table.tt-grid th.tt-day.hol .w { color: #dc2626 }
#tt-hud table.tt-grid th.tt-day.today {
  box-shadow: inset 0 -2px 0 var(--hivis);
  background: color-mix(in srgb, var(--hivis) 12%, var(--glass-strong));
}
#tt-hud table.tt-grid th.tt-day.today .d { color: var(--hivis) }

#tt-hud table.tt-grid tbody td { height: 32px; padding: 2px 4px; }
#tt-hud table.tt-grid td.tt-num {
  position: sticky; left: 0; z-index: 2; width: 30px; min-width: 30px;
  background: var(--glass-strong); backdrop-filter: blur(18px);
  text-align: center; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3);
}
#tt-hud table.tt-grid td.tt-emp {
  position: sticky; left: 30px; z-index: 2;
  background: var(--glass-strong); backdrop-filter: blur(18px);
  padding: 0 12px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-1);
  border-right: 1px solid var(--line);
}
#tt-hud table.tt-grid tbody tr:hover td.tt-emp { color: var(--hivis); }
#tt-hud table.tt-grid td.tt-cell {
  text-align: center; font-family: var(--font-mono); font-size: 10.5px;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: box-shadow .12s;
}
#tt-hud table.tt-grid td.tt-cell:hover { box-shadow: inset 0 0 0 2px var(--hivis); }
#tt-hud table.tt-grid td.tt-cell.today { box-shadow: inset -1px 0 0 var(--hivis), inset 1px 0 0 var(--hivis); }
#tt-hud table.tt-grid td.tt-tot {
  position: sticky; right: 0; z-index: 2;
  background: var(--glass-strong); backdrop-filter: blur(18px);
  text-align: center; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  color: var(--ink-1); border-left: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
#tt-hud table.tt-grid td.tt-tot.zero { color: var(--ink-3); opacity: .45 }

#tt-hud table.tt-grid tfoot td {
  position: sticky; bottom: 0; z-index: 4;
  background: color-mix(in srgb, var(--hivis) 9%, var(--glass-strong));
  backdrop-filter: blur(18px);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-align: center; color: var(--hivis); height: 30px;
  border-top: 1px solid var(--line);
}
#tt-hud table.tt-grid tfoot td.tt-num { left: 0; z-index: 6; }
#tt-hud table.tt-grid tfoot td.tt-emp {
  left: 30px; z-index: 6; text-align: left; color: var(--hivis);
  letter-spacing: .16em; text-transform: uppercase; font-size: 10px;
}
#tt-hud table.tt-grid tfoot td.tt-tot { right: 0; z-index: 6; color: var(--hivis); font-size: 12px; }
#tt-hud table.tt-grid tfoot td.dim { color: var(--ink-3); opacity: .4 }

#tt-hud .tt-empty {
  padding: 70px 20px; text-align: center; color: var(--ink-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}

/* poste opérateur (non-admin) */
#tt-hud .tt-standby { flex: 1; display: grid; place-items: center; }
#tt-hud .tt-standby-inner { text-align: center; max-width: 380px; color: var(--ink-2); }
#tt-hud .tt-standby-inner .eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em;
  color: var(--hivis); text-transform: uppercase; margin-bottom: 10px;
}

/* ---------- BANDEAU BAS ---------- */
#tt-hud .tt-hud-foot {
  flex: none; position: relative; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--ink-3); text-transform: uppercase;
}
#tt-hud .tt-hud-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; display: inline-block; margin-right: 7px; }
#tt-hud .tt-hud-foot .sep { opacity: .35 }

/* ---------- SCANNER ---------- */
#tt-hud .tt-scanner-overlay {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: color-mix(in srgb, var(--bg-deep) 78%, transparent);
  backdrop-filter: blur(8px);
}
#tt-hud .tt-scanner-card {
  width: min(460px, 100%);
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--panel-shadow); padding: 20px;
}
#tt-hud .tt-scanner-card__header h3 {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 19px; margin: 0 0 6px; color: var(--ink-1);
}
#tt-hud .tt-scanner-card__header p { font-size: 12.5px; color: var(--ink-3); margin: 0 0 14px; }

/* succès pointage */
#tt-hud .tt-success-overlay {
  position: absolute; inset: 0; z-index: 10; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: color-mix(in srgb, #22c55e 16%, var(--glass-strong));
  backdrop-filter: blur(6px); transition: opacity .3s;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ink-1); text-align: center; padding: 16px;
}
#tt-hud .tt-success-overlay__icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #22c55e; color: #fff;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  #tt-hud .tt-hud-body { grid-template-columns: minmax(0, 1fr); }
  #tt-hud .tt-side { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 0; flex: none; }
  #tt-hud .tt-side .tt-card { min-width: 250px; }
}
@media (max-width: 720px) {
  #tt-hud .tt-hud-header { padding: 10px 12px; gap: 8px; }
  #tt-hud .tt-hud-body { padding: 10px 12px 0; }
  #tt-hud .tt-name { font-size: 15px }
  #tt-hud .tt-nav .tt-month { min-width: 120px; font-size: 12px }
}

/* ==========================================================================
   VUE MOBILE DE LA GRILLE — ruban de jours + une ligne par salarié
   (remplace le tableau 31 colonnes sous 640px)
   ========================================================================== */
#tt-hud .tt-mobile { display: flex; flex-direction: column; min-height: 0; }

/* ---------- Ruban des jours ---------- */
#tt-hud .tt-days {
  flex: none; display: flex; gap: 6px; padding: 10px 12px;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
  border-bottom: 1px solid var(--line-soft);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
#tt-hud .tt-days::-webkit-scrollbar { display: none; }
#tt-hud .tt-day-btn {
  flex: 0 0 auto; width: 46px; padding: 8px 0 7px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--glass); color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
#tt-hud .tt-day-btn .w {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
#tt-hud .tt-day-btn .d {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 17px; line-height: 1;
}
#tt-hud .tt-day-btn .dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
#tt-hud .tt-day-btn .dot.on { background: #22c55e; }
#tt-hud .tt-day-btn.we { background: color-mix(in srgb, var(--ink-3) 10%, transparent); }
#tt-hud .tt-day-btn.hol { border-color: color-mix(in srgb, #dc2626 45%, transparent); }
#tt-hud .tt-day-btn.hol .d { color: #dc2626; }
#tt-hud .tt-day-btn.today .d { color: var(--hivis); }
#tt-hud .tt-day-btn.today { border-color: color-mix(in srgb, var(--hivis) 45%, transparent); }
#tt-hud .tt-day-btn.on {
  background: var(--hivis); border-color: var(--hivis); transform: translateY(-1px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--hivis) 35%, transparent);
}
#tt-hud .tt-day-btn.on .d, #tt-hud .tt-day-btn.on .w { color: #fff; }
#tt-hud .tt-day-btn.on .dot.on { background: #fff; }

/* ---------- Bandeau du jour ---------- */
#tt-hud .tt-mhead {
  flex: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
}
#tt-hud .tt-mhead-date {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 15px; color: var(--ink-1); text-transform: capitalize;
}
#tt-hud .tt-mhead-sum {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
#tt-hud .tt-mhead-sum b { color: var(--ink-1); }

/* ---------- Lignes salarié ---------- */
#tt-hud .tt-mlist { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
#tt-hud .tt-mrow {
  flex: 0 0 auto; min-height: 58px;
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 13px 11px 16px; position: relative;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--glass-strong); color: var(--ink-1);
  transition: transform .12s, border-color .12s;
}
#tt-hud .tt-mrow::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--rc);
}
#tt-hud .tt-mrow:active { transform: scale(.985); border-color: var(--rc); }
#tt-hud .tt-mrow-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#tt-hud .tt-mrow-name {
  font-weight: 700; font-size: 13.5px; color: var(--ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tt-hud .tt-mrow-sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tt-hud .tt-mrow-val {
  flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--rc);
  padding: 5px 10px; border-radius: 7px;
  background: color-mix(in srgb, var(--rc) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent);
}

/* ==========================================================================
   MOBILE — la page défile, pas la liste
   La liste se déroule en entier : aucun ascenseur interne, le doigt fait
   défiler l'écran comme n'importe quelle page.
   ========================================================================== */
@media (max-width: 639px) {
  /* le corps devient le seul conteneur qui défile */
  #tt-hud .tt-hud-body {
    display: block;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #tt-hud .tt-main, #tt-hud .tt-grid-host { display: block; flex: none; min-height: 0; height: auto; }

  /* le panneau s'étire à la hauteur de son contenu */
  #tt-hud .tt-mobile, #tt-hud .tt-panel {
    flex: none; height: auto; min-height: 0; overflow: visible;
  }
  /* plus aucun ascenseur interne : la liste se déroule complètement */
  #tt-hud .tt-mlist {
    flex: none; height: auto; max-height: none;
    overflow: visible; min-height: 0;
  }

  /* le ruban des jours et le bandeau restent accessibles pendant le défilement */
  #tt-hud .tt-mobile .tt-days {
    position: sticky; top: 0; z-index: 8;
    background: var(--glass-strong); backdrop-filter: blur(18px);
    border-radius: 14px 14px 0 0;
  }
  #tt-hud .tt-mobile .tt-mhead {
    position: sticky; top: 62px; z-index: 7;
    background: var(--glass-strong); backdrop-filter: blur(18px);
  }
  /* les coins réticule ne doivent pas suivre le contenu qui s'allonge */
  #tt-hud .tt-mobile .tt-corners { display: none; }

  /* espace en bas pour dégager la dernière ligne de la navigation */
  #tt-hud .tt-mlist { padding-bottom: 18px; }
}