/* Calendrier (gestionnaire) + portail utilisateur - s'appuie sur tokens.css
   et components.css (cartes, boutons, onglets, modales). */

:root {
  --cal-demande: #FF9800;
  --cal-demande-light: #FFF3E0;
  --cal-ok: #4CAF50;
  --cal-ok-light: #E8F5E9;
  --cal-bad: #F44336;
  --cal-bad-light: #FDECEA;
  --cal-grey: #9E9E9E;
  --cal-grey-light: #F2F2F2;
  --cal-row-h: 64px;
  --cal-label-w: 190px;
}

.page.page--wide { max-width: 1480px; }

/* --- Barre d'alertes en haut de page -------------------------------------- */
.cal-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 18px; }
.cal-strip-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px;
  font-size: 0.84rem; font-weight: 600; border: 1px solid var(--border); background: var(--card-bg);
  cursor: pointer; color: var(--text);
}
.cal-strip-item.is-high { background: var(--cal-bad-light); border-color: #F5C2C0; color: #9B1C1C; }
.cal-strip-item.is-warn { background: var(--cal-demande-light); border-color: #FFD8A8; color: #8A4B00; }
.cal-strip-item.is-ok { background: var(--cal-ok-light); border-color: #C8E6C9; color: #1B5E20; cursor: default; }

.nav-badge {
  display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; margin-left: 4px;
  background: var(--status-intrus); color: #fff; font-size: 11px; font-weight: 800; align-items: center; justify-content: center;
}

/* --- Barre d'outils du planning ------------------------------------------- */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-toolbar .spacer { flex: 1; }
.cal-toolbar input[type=date], .cal-toolbar select, .cal-input, .cal-form input, .cal-form select, .cal-form textarea {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text); font-size: 0.86rem; font-family: inherit;
}
.cal-date-label { font-weight: 700; font-size: 0.95rem; min-width: 200px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.76rem; color: var(--text-muted); margin: 0 0 10px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }

/* --- Frise ---------------------------------------------------------------- */
.tl { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tl-scroll { overflow-x: auto; overflow-y: hidden; position: relative; }
.tl-scroll:focus-visible { outline: 3px solid var(--action); outline-offset: -3px; }
.tl-inner { position: relative; }
.tl-head { display: flex; position: sticky; top: 0; z-index: 4; background: var(--card-bg); border-bottom: 1px solid var(--border); }
.tl-corner {
  width: var(--cal-label-w); flex-shrink: 0; position: sticky; left: 0; z-index: 5; background: var(--card-bg);
  border-right: 1px solid var(--border); padding: 10px 14px; font-size: 0.76rem; font-weight: 700; color: var(--text-muted);
  display: flex; align-items: flex-end;
}
.tl-head-axis { position: relative; }
.tl-days { position: relative; height: 26px; border-bottom: 1px solid var(--border); }
.tl-day { position: absolute; top: 0; height: 26px; line-height: 26px; padding-left: 8px; font-size: 0.78rem; font-weight: 700; border-left: 2px solid #D5D5D5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-day.is-closed { color: var(--text-muted); }
.tl-closed-label { font-weight: 500; }
.tl-hours { position: relative; height: 26px; }
.tl-hour { position: absolute; top: 0; height: 26px; line-height: 26px; padding-left: 4px; font-size: 0.72rem; color: var(--text-muted); border-left: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.tl-body { position: relative; }
.tl-row { display: flex; border-bottom: 1px solid var(--border); min-height: var(--cal-row-h); }
.tl-row:last-of-type { border-bottom: none; }
.tl-label {
  width: var(--cal-label-w); flex-shrink: 0; position: sticky; left: 0; z-index: 3; background: var(--card-bg);
  border-right: 1px solid var(--border); padding: 10px 14px; border-left: 4px solid var(--room-color, var(--action));
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.tl-room-name { font-weight: 700; font-size: 0.88rem; line-height: 1.2; }
.tl-room-meta { font-size: 0.74rem; color: var(--text-muted); display: flex; gap: 8px; align-items: center; }
.tl-live { background: var(--action-light); color: #006978; font-weight: 700; border-radius: 8px; padding: 1px 7px; }
.tl-track {
  position: relative; cursor: copy;
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--px-h, 90px) - 1px), #F4F4F4 calc(var(--px-h, 90px) - 1px), #F4F4F4 var(--px-h, 90px));
}
.tl-portal .tl-track { cursor: default; }
.tl-closed { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #F6F6F6 0 6px, #EFEFEF 6px 12px); }
.tl-window { position: absolute; top: 4px; bottom: 4px; background: #E9F7EF; border: 1px dashed #A5D6A7; border-radius: 8px; }
.tl-free {
  position: absolute; top: 6px; bottom: 6px; background: #E9F7EF; border: 1px dashed #66BB6A; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; padding: 0 8px; overflow: hidden;
  font-size: 0.72rem; color: #2E7D32; font-weight: 700; white-space: nowrap;
}
.tl-free:hover, .tl-free:focus-visible { background: #D7F0DE; outline: 2px solid #43A047; outline-offset: 0; }
.tl-buffer { position: absolute; top: 10px; bottom: 10px; background: repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 4px, transparent 4px 8px); border-radius: 6px; }
.tl-booking {
  position: absolute; top: 6px; bottom: 6px; border-radius: 10px; padding: 4px 8px 4px 6px; display: flex; align-items: center; gap: 7px;
  overflow: hidden; cursor: pointer; background: #fff; border: 1.5px solid var(--room-color, var(--action));
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); z-index: 1; min-width: 6px;
}
.tl-booking::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--room-color, var(--action)); }
.tl-booking:hover, .tl-booking:focus-visible { box-shadow: 0 3px 10px rgba(0,0,0,0.16); z-index: 2; outline: none; }
.tl-booking:focus-visible { outline: 3px solid var(--action); }
.tl-booking.st-confirme { background: color-mix(in srgb, var(--room-color, #00BCD4) 12%, #fff); }
.tl-booking.st-demande { border-style: dashed; border-color: var(--cal-demande); background: var(--cal-demande-light); }
.tl-booking.st-demande::before { background: var(--cal-demande); }
.tl-booking.st-termine { background: #F7F7F7; border-color: #CFCFCF; }
.tl-booking.st-termine::before { background: #BDBDBD; }
.tl-booking.st-annule, .tl-booking.st-libere { background: repeating-linear-gradient(135deg, #FAFAFA 0 6px, #F0F0F0 6px 12px); border-color: #D6D6D6; opacity: 0.8; }
.tl-booking.st-annule .tl-b-title, .tl-booking.st-libere .tl-b-title { text-decoration: line-through; color: var(--text-muted); }
.tl-booking.st-annule::before, .tl-booking.st-libere::before { background: #D6D6D6; }
.tl-booking.st-occupe { background: #EEEEEE; border-color: #D0D0D0; cursor: default; color: var(--text-muted); justify-content: center; }
.tl-booking.st-occupe::before { background: #BDBDBD; }
.tl-lead { flex-shrink: 0; display: inline-flex; border-radius: 50%; margin-left: 2px; }
.tl-lead[role=button] { cursor: pointer; }
.tl-lead[role=button]:hover img, .tl-lead[role=button]:focus-visible img, .tl-lead[role=button]:focus-visible .cal-avatar { box-shadow: 0 0 0 3px var(--action); }
.tl-b-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-b-title { font-weight: 700; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-b-sub { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; display: flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.tl-count { font-weight: 800; color: var(--text); background: rgba(255,255,255,0.8); border-radius: 6px; padding: 0 5px; border: 1px solid var(--border); }
.tl-count--ok { color: #1B5E20; border-color: #A5D6A7; background: var(--cal-ok-light); }
.tl-count--under { color: #8A4B00; border-color: #FFCC80; background: var(--cal-demande-light); }
.tl-count--over { color: #9B1C1C; border-color: #EF9A9A; background: var(--cal-bad-light); }
.tl-count.is-live::before { content: "● "; color: var(--cal-bad); font-size: 0.6rem; vertical-align: 1px; }
.tl-ot { color: #9B1C1C; font-weight: 700; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #E53935; z-index: 6; pointer-events: none; transition: left 1s linear; }
.tl-now-label { position: absolute; top: -1px; left: 4px; background: #E53935; color: #fff; font-size: 0.66rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.tl-empty { padding: 36px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

/* --- Avatars / pastilles --------------------------------------------------- */
.cal-avatar { border-radius: 50%; object-fit: cover; display: inline-block; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); background: #fff; }
.cal-avatar--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--action-light); color: #006978; font-weight: 800; }
.cal-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.st-demande.cal-pill { background: var(--cal-demande-light); color: #8A4B00; }
.st-confirme.cal-pill { background: var(--cal-ok-light); color: #1B5E20; }
.st-refuse.cal-pill, .st-annule.cal-pill { background: var(--cal-grey-light); color: #555; }
.st-libere.cal-pill { background: var(--cal-grey-light); color: #555; }
.st-termine.cal-pill { background: #ECEFF1; color: #37474F; }
.pay-no.cal-pill { background: var(--cal-bad-light); color: #9B1C1C; }
.pay-part.cal-pill { background: var(--cal-demande-light); color: #8A4B00; }
.pay-ok.cal-pill { background: var(--cal-ok-light); color: #1B5E20; }
.pay-none.cal-pill { background: var(--cal-grey-light); color: #555; }
.sev-high.cal-pill { background: var(--cal-bad-light); color: #9B1C1C; }
.sev-warning.cal-pill { background: var(--cal-demande-light); color: #8A4B00; }
.sev-info.cal-pill { background: var(--action-light); color: #006978; }

/* --- Formulaires ---------------------------------------------------------- */
.cal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.cal-form .full { grid-column: 1 / -1; }
.cal-form label, .cal-field > label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 5px; }
.cal-form input:not([type=checkbox]):not([type=radio]), .cal-form select, .cal-form textarea { width: 100%; }
.cal-form textarea { min-height: 70px; resize: vertical; }
.cal-form .hint, .hint { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.cal-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-inline > * { flex: 1; min-width: 0; }
.cal-inline > .shrink { flex: 0 0 auto; }
.cal-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500 !important; }
.cal-check input { width: auto !important; }
@media (max-width: 640px) { .cal-form { grid-template-columns: 1fr; } }

.needs-list { display: flex; flex-direction: column; gap: 6px; }
.need-row { display: grid; grid-template-columns: auto 1fr 90px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.need-row.is-on { border-color: var(--action); background: #F5FDFE; }
.need-row .need-name { font-weight: 700; font-size: 0.85rem; }
.need-row .need-meta { font-size: 0.74rem; color: var(--text-muted); }
.need-row .need-meta.is-late { color: #B71C1C; font-weight: 700; }
.need-row input[type=number] { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 16px; background: var(--action-light); color: #006978; font-size: 0.78rem; font-weight: 600; }
.chip button { background: none; border: none; cursor: pointer; color: inherit; font-size: 0.9rem; line-height: 1; padding: 0 2px; }

.issues { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; }
.issue { font-size: 0.8rem; padding: 7px 10px; border-radius: 8px; background: var(--cal-grey-light); line-height: 1.4; }
.issue--error { background: var(--cal-bad-light); color: #9B1C1C; }
.issue--warn { background: var(--cal-demande-light); color: #8A4B00; }
.issue-ok { color: #1B5E20; font-size: 0.82rem; margin: 8px 0 0; }

.cal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.cal-actions .left { margin-right: auto; }
.cal-confirm-body { font-size: 0.9rem; line-height: 1.5; }

/* --- Modales larges et onglets internes ----------------------------------- */
.modal-box.wide { max-width: 940px; }
.modal-box.medium { max-width: 720px; }
.mtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.mtab { border: none; background: none; padding: 9px 14px; font-weight: 700; font-size: 0.84rem; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.mtab.active { color: var(--action); border-bottom-color: var(--action); }
.mpanel { display: none; }
.mpanel.active { display: block; }
.booking-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.booking-head .bh-main { flex: 1; min-width: 200px; }
.booking-head .bh-title { font-weight: 800; font-size: 1.05rem; }
.booking-head .bh-sub { color: var(--text-muted); font-size: 0.84rem; margin-top: 2px; }

/* --- Tableaux / cartes ------------------------------------------------------ */
.table-scroll { overflow-x: auto; }
.cal-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.cal-table th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.cal-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cal-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-table tfoot td { border-bottom: none; padding: 5px 10px; }
.cal-table tfoot tr.total td { font-weight: 800; border-top: 1px solid var(--border); }
.cal-table tr.clickable { cursor: pointer; }
.cal-table tr.clickable:hover td { background: #FAFAFA; }
.muted { color: var(--text-muted); }

.cal-card { padding: 16px 18px; }
.cal-card + .cal-card { margin-top: 12px; }
.cal-card h3 { margin: 0 0 10px; font-size: 0.98rem; }
.cal-card h4 { margin: 14px 0 8px; font-size: 0.86rem; }
.card-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.card-row .grow { flex: 1; min-width: 200px; }
.card-list { display: flex; flex-direction: column; gap: 10px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 0.85rem; }
.kv dt { color: var(--text-muted); font-weight: 600; }
.kv dd { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.stat .stat-label { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }
.stat .stat-value { font-size: 1.25rem; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }

.alert-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-left: 4px solid var(--border); }
.alert-card.sev-high { border-left-color: var(--cal-bad); }
.alert-card.sev-warning { border-left-color: var(--cal-demande); }
.alert-card.sev-info { border-left-color: var(--action); }
.alert-card .ac-main { flex: 1; min-width: 0; }
.alert-card .ac-title { font-weight: 700; font-size: 0.9rem; }
.alert-card .ac-msg { font-size: 0.84rem; margin-top: 4px; line-height: 1.45; }
.alert-card .ac-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; }
.alert-card .ac-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.alert-card.is-closed { opacity: 0.65; }

.shop-group { padding: 14px 16px; }
.shop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.shop-total { font-weight: 800; font-size: 1rem; }
.shop-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 0.84rem; }
.shop-item .late { color: #B71C1C; font-weight: 700; }
.shop-item.done { opacity: 0.55; }

.room-card { padding: 16px 18px; border-left: 5px solid var(--room-color, var(--action)); }
.room-card .rc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.room-card .rc-name { font-weight: 800; font-size: 1rem; flex: 1; }
.room-card .rc-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; }
.room-card .rc-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.line-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; }
.line-row .grow { flex: 1; }
.live-big { font-size: 1.4rem; font-weight: 800; color: #006978; }

/* Tracage d'une ligne de comptage sur l'image camera */
.line-canvas-wrap { position: relative; width: 100%; background: #0B0F14; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.line-canvas-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.line-canvas-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.line-step { font-size: 0.85rem; font-weight: 600; margin: 10px 0; padding: 8px 12px; background: var(--action-light); color: #006978; border-radius: 8px; }

/* Fiche contact principal */
.lead-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.lead-head img, .lead-head .cal-avatar { width: 84px; height: 84px; }
.lead-head .lh-name { font-weight: 800; font-size: 1.15rem; }
.lead-head .lh-sub { font-size: 0.84rem; color: var(--text-muted); margin-top: 3px; }
.lead-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .lead-grid { grid-template-columns: 1fr; } }
.sig-ok { color: #1B5E20; font-weight: 700; }
.contact-links { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.contact-links a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; overflow-wrap: anywhere; }
.contact-links a:hover { color: var(--action, #00838F); }
.contact-missing { color: #9B1C1C; font-weight: 700; }
.sig-no { color: #9B1C1C; font-weight: 700; }

/* Reglages du lieu */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }
.hours-grid { display: grid; grid-template-columns: 90px auto 1fr 1fr; gap: 6px 10px; align-items: center; font-size: 0.84rem; }
.hours-grid input[type=time] { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); }
.edit-rows { display: flex; flex-direction: column; gap: 6px; }
.edit-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.edit-row input, .edit-row select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); font-size: 0.82rem; min-width: 0; }
.edit-row .w-name { flex: 2; min-width: 120px; }
.edit-row .w-num { width: 90px; }
.edit-row .x { background: var(--status-intrus-light); color: var(--status-intrus); border: none; border-radius: 6px; padding: 6px 9px; cursor: pointer; font-weight: 700; }
.cal-savebar { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.cal-savebar .glass-card { padding: 10px 14px; display: flex; gap: 10px; align-items: center; }

/* Toasts */
.cal-toast-host { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10000; display: flex; flex-direction: column; gap: 8px; }
.cal-toast { background: #263238; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 0.86rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,0.2); transition: opacity 0.4s, transform 0.4s; max-width: 360px; }
.cal-toast--error { background: #B71C1C; }
.cal-toast.out { opacity: 0; transform: translateY(8px); }

/* Vue « aujourd'hui » (kiosque) */
.today-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.today-card { padding: 16px 18px; border-left: 6px solid var(--room-color, var(--action)); display: flex; gap: 14px; align-items: center; }
.today-card.is-now { box-shadow: 0 0 0 2px var(--cal-ok), var(--shadow); }
.today-card.is-done { opacity: 0.55; }
.today-card .tc-time { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.today-card .tc-title { font-weight: 700; font-size: 1rem; margin-top: 2px; }
.today-card .tc-room { font-size: 0.9rem; color: #006978; font-weight: 700; margin-top: 4px; }
.today-card .tc-lead { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

/* Portail utilisateur */
.portal-topbar { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 12px; }
.portal-topbar .brand { font-weight: 800; display: flex; align-items: center; gap: 9px; font-size: 0.95rem; }
.portal-topbar .brand img { height: 28px; }
.portal-topbar .spacer { flex: 1; }
.portal-user { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 600; }
.login-card { max-width: 400px; margin: 60px auto; padding: 28px 30px; }
.login-card h1 { margin-bottom: 6px; }
.login-card .cal-field { margin-bottom: 14px; }
.login-card input { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); font-size: 0.95rem; }
.login-error { color: #9B1C1C; font-size: 0.85rem; margin-top: 10px; min-height: 1.2em; }
.login-ok { color: var(--status-connu); font-size: 0.88rem; font-weight: 600; margin-top: 10px; }
.login-check { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); cursor: pointer; }
.login-check[hidden] { display: none; }
.login-check input, .login-card .login-check input { width: auto; padding: 0; margin-top: 2px; flex: none; }
.login-check a { color: var(--action); }
.login-card [hidden] { display: none; }
.conditions-box { white-space: pre-wrap; background: #FAFAFA; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 0.82rem; max-height: 220px; overflow-y: auto; line-height: 1.5; }
.notice { font-size: 0.82rem; padding: 8px 12px; background: var(--action-light); color: #004D57; border-radius: 8px; margin-top: 6px; line-height: 1.45; }
.notice.signalement { background: var(--cal-demande-light); color: #8A4B00; }

@media (max-width: 600px) {
  :root { --cal-label-w: 120px; }
  .tl-corner, .tl-label { padding: 8px 10px; }
  .cal-date-label { min-width: 0; width: 100%; }
}
.lead-grid > .cal-card + .cal-card, .settings-grid > .cal-card + .cal-card { margin-top: 0; }

/* Materiel (voir cal_materiel.js) */
.mt-item .tl-b-title { font-size: 0.78rem; }
.tl-booking.rt-out { background: #E3F2FD; border-color: #1E88E5; }
.tl-booking.rt-late { background: #FFEBEE; border-color: #E53935; }
.cal-pill.rt-out { background: #E3F2FD; color: #1565C0; }
.cal-pill.rt-late { background: #FFEBEE; color: #C62828; }
.mt-peak { font-weight: 800; }
.mt-peak.is-full { color: #C62828; }
.mt-cat { font-size: 0.9rem; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.mt-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
#rfItems .need-row { grid-template-columns: auto 1fr 90px; }

/* Espace utilisateur : barre du haut (voir portail.html) et occupation des
   salles en ce moment (libre / occupée, sans dire par qui) */
.portal-bar { gap: 12px; }
.portal-bar .spacer { flex: 1; }
.portal-space-label { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }
.portal-switch[hidden] { display: none; }
.portal-bar .space-switch { margin: 0; align-self: center; }
.portal-bar .space-switch a { padding: 6px 12px; font-size: 0.78rem; }
.now-strip { margin: 4px 0 18px; }
.now-title { margin: 0 0 10px; font-size: 0.95rem; }
.now-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.now-room { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); }
.now-dot { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; }
.now-room.is-free .now-dot { background: #43A047; box-shadow: 0 0 0 4px #E8F5E9; }
.now-room.is-busy .now-dot { background: #9E9E9E; box-shadow: 0 0 0 4px #EEEEEE; }
.now-name { font-weight: 700; font-size: 0.9rem; }
.now-state { font-size: 0.8rem; color: var(--text-muted); }
.now-room.is-free .now-state { color: #2E7D32; font-weight: 700; }
.now-state small { font-weight: 500; color: var(--text-muted); }

@media (max-width: 720px) {
  .portal-bar { flex-wrap: wrap; padding-bottom: 8px; row-gap: 6px; }
  .portal-bar .brand span, .portal-space-label { display: none; }
  .portal-bar { flex-wrap: nowrap; padding-bottom: 0; gap: 8px; }
  .portal-bar .brand { margin-right: 0; }
  .portal-bar .brand img { height: 26px; }
  .portal-bar .space-switch { margin: 0; align-self: center; }
  .portal-bar .space-switch a { padding: 6px 10px; font-size: 0.76rem; }
  .portal-bar .portal-user { font-size: 0.8rem; }
  .portal-bar .portal-user .pu-name { display: none; }
  .portal-bar #logoutBtn { padding: 7px 10px; font-size: 0.76rem; white-space: nowrap; }
  .portal-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .portal-tabs .tab-btn { white-space: nowrap; }
  .now-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .now-list { grid-template-columns: 1fr; } .portal-bar { padding-left: 10px; padding-right: 10px; gap: 5px; } .portal-bar .space-switch a { padding: 6px 8px; } }

/* --- Projets (suivi de projet & "Tout a la fois") ----------------------------- */
.tl--wide { --cal-label-w: 260px; }
@media (max-width: 640px) { .tl--wide { --cal-label-w: 150px; } }
.tl--wide .tl-label { padding: 8px 10px; }
.tl-row .tl-track.pj-track { cursor: default; }

.pj-section { position: sticky; left: 0; padding: 6px 14px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); background: #FAFAFA; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); z-index: 3; }
.pj-section span { position: sticky; left: 14px; }
.pj-overlay-wrap { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.pj-overlay { position: relative; height: 100%; }
.pj-we { position: absolute; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.028); }
.pj-today { position: absolute; top: 0; bottom: 0; background: rgba(0, 188, 212, 0.08); }
.tl-hour.pj-we-head { color: #9A9A9A; }

/* temps restant */
.pj-remain { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0;
  background: var(--cal-ok-light); color: #1B5E20; }
.pj-remain--soon, .pj-remain--today { background: var(--cal-demande-light); color: #8A4B00; }
.pj-remain--late { background: var(--cal-bad-light); color: #9B1C1C; }
.pj-remain--done, .pj-remain--none { background: var(--cal-grey-light); color: #555; }

/* ligne projet */
.pj-name { display: flex; align-items: center; gap: 4px; }
.pj-caret { border: none; background: none; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 2px 4px; border-radius: 6px; color: var(--text-muted); }
.pj-caret:hover { background: var(--cal-grey-light); color: var(--text); }
.pj-link { border: none; background: none; padding: 0; margin-left: auto; font: inherit; font-size: 0.74rem; font-weight: 700; color: var(--action); cursor: pointer; }
.pj-link:hover { text-decoration: underline; }
.pj-row.is-open > .tl-label { background: #F4FCFD; }
.tl-booking.pj-bar { background: color-mix(in srgb, var(--room-color) 13%, #fff); cursor: pointer; gap: 8px; }
.tl-booking.pj-bar--late { border-color: var(--cal-bad); background: var(--cal-bad-light); }
.tl-booking.pj-bar--done { background: #F4F4F4; border-color: #CFCFCF; color: var(--text-muted); }
.tl-booking.pj-bar--done::before { background: #BDBDBD; }
.tl-booking.pj-bar--open { border-style: dashed; }
.pj-bar .tl-b-text { flex: 1; }
.pj-bar .pj-remain, .pj-task .pj-remain { margin-left: auto; }
.pj-fill { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--room-color); opacity: 0.55; pointer-events: none; }
.tl-booking.pj-cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-booking.pj-cut-l::before { display: none; }
.tl-booking.pj-cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dotted; }

/* taches */
.pj-trow > .tl-label { padding-left: 22px; background: #FCFCFC; }
.pj-tl-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pj-tl-top input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
.pj-num { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--action-light); color: #006978; font-size: 0.7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pj-ttitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.82rem; }
.pj-ttitle.is-done { text-decoration: line-through; color: var(--text-muted); }
.pj-tl-ctl { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.pj-tl-ctl .pj-remain { margin-left: auto; }
.pj-ico { border: none; background: none; cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }
.pj-ico:hover:not(:disabled) { background: var(--cal-grey-light); color: var(--text); }
.pj-ico:disabled { opacity: 0.3; cursor: default; }
.pj-ico--del:hover:not(:disabled) { background: var(--cal-bad-light); color: #9B1C1C; }
.pj-ico:focus-visible, .pj-caret:focus-visible, .pj-link:focus-visible { outline: 3px solid var(--action); }
.tl-booking.pj-task { background: color-mix(in srgb, var(--room-color) 8%, #fff); border-style: solid; gap: 8px; }
.tl-booking.pj-task--en_cours { background: color-mix(in srgb, var(--room-color) 20%, #fff); }
.tl-booking.pj-task--fait { background: #F4F4F4; border-color: #CFCFCF; color: var(--text-muted); }
.tl-booking.pj-task--fait::before { background: #BDBDBD; }
.tl-booking.pj-task--fait .tl-b-title { text-decoration: line-through; }
.tl-booking.pj-task--bloque { border-color: var(--cal-bad); background: repeating-linear-gradient(135deg, var(--cal-bad-light) 0 6px, #fff 6px 12px); }
.tl-booking.pj-task--late { border-color: var(--cal-bad); }
.pj-task .tl-b-text { flex: 1; }
.pj-nobody { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed #BDBDBD; color: #9E9E9E; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; }

/* ajout rapide d'une tache */
.pj-addrow > .tl-label { padding-left: 22px; background: #FCFCFC; }
.pj-addrow { min-height: 52px; }
.pj-track--add { display: flex; align-items: center; }
.pj-addform { position: sticky; left: var(--cal-label-w); z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; max-width: min(760px, 90vw); }
.pj-addform input[name=title] { flex: 1 1 200px; min-width: 150px; }
.pj-addform select { max-width: 190px; }

/* barres compactes de la vue d'ensemble */
.tl-booking.pj-mini { padding: 2px 6px 2px 8px; border-radius: 7px; top: 5px; bottom: 5px; }
.tl-booking.pj-mini .tl-b-title { font-size: 0.7rem; }
.tl-booking.mt-item.pj-mini { bottom: auto; }

/* fiche projet */
.pj-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.pj-head-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--room-color); flex-shrink: 0; }
#projectBackdrop .glass-card.cal-card { margin-bottom: 12px; }
#projectBackdrop .cal-card h4 { margin: 0 0 12px; }
.pj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-chip { display: inline-flex !important; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 20px; font-size: 0.82rem !important; font-weight: 600 !important; cursor: pointer; background: #fff; margin: 0 !important; }
.pj-chip input { width: auto !important; accent-color: var(--action); }
.pj-chip:has(input:checked) { background: var(--action-light); border-color: var(--action); color: #006978; }
.pj-chip:focus-within { outline: 3px solid var(--action); outline-offset: 1px; }
.pj-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pj-pct { display: inline-flex; align-items: center; gap: 4px; }
.pj-pct input { width: 80px !important; }
.pj-table input:not([type=checkbox]), .pj-table textarea, .pj-emails, .pj-addform input, .pj-addform select {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 0.84rem; background: #fff; color: var(--text); }
.pj-table input:not([type=checkbox]), .pj-table textarea { width: 100%; min-width: 110px; }
.pj-table textarea { resize: vertical; }
.pj-table tr.is-late td { background: #FFFAFA; }
.pj-late { color: #9B1C1C; font-weight: 700; margin: 2px 0 0; }
.pj-emails { width: 100%; min-height: 360px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.5; resize: vertical; }
.pj-save { font-size: 0.8rem; color: var(--text-muted); }
.pj-save--saved { color: #1B5E20; font-weight: 700; }
.pj-save--error, .pj-save--new-error { color: #9B1C1C; font-weight: 700; }
.pj-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pj-foot .spacer { flex: 1; }
.pj-toolbar-note { font-size: 0.76rem; color: var(--text-muted); }

/* onglets : 11 entrees, une seule ligne (defilement horizontal si l'ecran est etroit) */
#calTabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
#calTabs .tab-btn { white-space: nowrap; flex-shrink: 0; padding: 12px 11px; font-size: 0.85rem; }
.pj-bar .tl-b-text, .pj-task .tl-b-text { min-width: 0; overflow: hidden; }
.pj-table .pj-chips { flex-wrap: nowrap; }
.pj-table td:first-child input { min-width: 190px; }

/* priorite des projets : poignee, rang, glisser-deposer */
.pj-grip { display: inline-flex; align-items: center; justify-content: center; width: 14px; margin-right: 2px; cursor: grab; color: var(--text-muted); font-size: 0.95rem; line-height: 1; user-select: none; opacity: 0.55; }
.pj-grip:hover { opacity: 1; color: var(--text); }
.pj-grip:active { cursor: grabbing; }
.pj-rank { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 4px; margin-right: 4px; border-radius: 9px; background: var(--action-light); color: #006978; font-size: 0.68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pj-row .tl-room-meta .pj-ico { padding: 0 5px; }
.pj-row .tl-room-meta .pj-link { margin-left: auto; margin-right: 2px; }
.pj-dragging { opacity: 0.45; }
.tl-row.pj-drop-before { box-shadow: 0 -3px 0 0 var(--action) inset, 0 -3px 0 0 var(--action); }
.tl-row.pj-drop-after { box-shadow: 0 3px 0 0 var(--action) inset, 0 3px 0 0 var(--action); }
@media (pointer: coarse) { .pj-grip { display: none; } }

/* --- Projets : jalons, poignees, glisser, dependances, charge, fiche --- */
.pj-ms { position: absolute; bottom: 10px; z-index: 4; width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: pointer; font-size: 23px; line-height: 26px; text-align: center; color: #607D8B; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; transition: transform 0.12s; }
.pj-ms--done { color: #2E7D32; }
.pj-ms--soon { color: #EF6C00; }
.pj-ms--late { color: #C62828; }
.pj-ms:hover { transform: scale(1.22); }
.pj-ms:focus-visible { outline: 3px solid var(--action); border-radius: 6px; }
.pj-h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 3; touch-action: none; }
.pj-h--l { left: -2px; } .pj-h--r { right: -2px; }
.pj-h::after { content: ""; position: absolute; top: 28%; bottom: 28%; left: 3px; width: 2px; border-radius: 2px; background: currentColor; opacity: 0; }
.tl-booking:hover > .pj-h::after, .pj-bar-dragging > .pj-h::after { opacity: 0.45; }
.pj-cut-l > .pj-h--l, .pj-cut-r > .pj-h--r { display: none; }
[data-bar] { touch-action: pan-y; }
[data-bar]:not(.pj-bar-dragging) { cursor: grab; }
.pj-bar-dragging { cursor: grabbing !important; opacity: 0.85; box-shadow: 0 6px 18px rgba(0,0,0,0.22); z-index: 6; transition: none; }
.pj-dragtip { position: fixed; z-index: 9999; background: #263238; color: #fff; font-size: 0.76rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap; }
.pj-undo { position: fixed; left: 18px; bottom: 18px; z-index: 9000; display: flex; align-items: center; gap: 12px; background: #263238; color: #fff; padding: 8px 8px 8px 16px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); font-size: 0.86rem; }
.pj-undo[hidden] { display: none; }
.pj-undo .btn { padding: 6px 12px; }
.tl-booking.pj-task--blocked { border-style: dashed; }
.pj-over { position: absolute; top: 0; bottom: 0; background: rgba(229, 57, 53, 0.16); pointer-events: auto; z-index: 0; }
.pj-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pj-prow > .tl-label { background: #FAFAFF; }
.pj-head-actions { margin-left: auto; display: inline-flex; gap: 12px; }
.pj-linkchips, .pj-linkbtns, .pj-sharebox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.pj-linkchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--action-light); font-size: 0.8rem; }
.pj-linkchip.is-warn { background: var(--cal-demande-light); color: #8A4B00; }
.pj-linkchip.is-bad { background: var(--cal-bad-light); color: #9B1C1C; }
.pj-sharebox[hidden] { display: none; }
.pj-sharebox input { flex: 1 1 240px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--page-bg); color: var(--text); font-size: 0.82rem; }
.pj-docrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); }
.pj-docrow:first-of-type { border-top: none; }
.pj-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed var(--border); border-radius: 12px; cursor: pointer; text-align: center; color: var(--text-muted); }
.pj-drop.is-over, .pj-drop:hover { border-color: var(--action); background: var(--action-light); color: var(--text); }
.pj-drop small { font-size: 0.72rem; }
.pj-files { list-style: none; margin: 12px 0 0; padding: 0; }
.pj-files li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pj-files li:last-child { border-bottom: none; }
.pj-files .grow, .pj-hrow .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pj-file-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--page-bg); }
.pj-file-ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--page-bg); border-radius: 8px; }
.pj-hday { margin: 14px 0 4px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.pj-hrow { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.pj-htime { flex-shrink: 0; width: 44px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pj-pick { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.pj-tplrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 640px) { .pj-head-actions { margin-left: 0; width: 100%; } }

/* barre de projet : titre en haut, losanges des jalons dans la partie basse */
.tl-booking.pj-bar { align-items: flex-start; padding-top: 9px; }
/* tableau des taches (fiche et espace utilisateur) */
.pjt-table td { vertical-align: top; }
.pjt-table .pjt-n { width: 34px; }
.pjt-title input[data-tf=title] { font-weight: 700; }
.pjt-needs { margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); }
.pjt-table select, .pjt-table input[type=date] { min-width: 130px; }
.pjt-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pjt-struck { text-decoration: line-through; color: var(--text-muted); }
.pjt-table tr.is-done td { opacity: 0.75; }
.pjt-table tr.is-late td:nth-child(5) input { border-color: var(--cal-bad); color: #9B1C1C; }
.pjt-deps summary { cursor: pointer; font-size: 0.82rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; list-style: none; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--page-bg); }
.pjt-deps[open] summary { border-color: var(--action); }
.pjt-deplist { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 180px; overflow-y: auto; }
.pjt-actions { white-space: nowrap; }
.pjt-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.pjt-add input[name=title] { flex: 2 1 220px; min-width: 0; }
.pjt-add select, .pjt-add input[type=date] { flex: 1 1 150px; }
.pj-part { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pj-part .grow { flex: 1; min-width: 140px; font-weight: 600; }
.pj-part select { min-width: 190px; }
.pj-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--cal-grey-light); color: #555; font-size: 0.7rem; font-weight: 700; margin-left: 6px; }

/* --- Espace utilisateur : onglet Projets --- */
.pjp-card { padding: 16px 18px; cursor: pointer; border-left: 5px solid var(--room-color, var(--action)); }
.pjp-card:hover { box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12)); }
.pjp-card:focus-visible { outline: 3px solid var(--action); }
.pjp-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pjp-name { font-weight: 800; font-size: 1.02rem; }
.pjp-role { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; background: var(--cal-grey-light); color: #555; }
.pjp-role--head { background: #FFF3CD; color: #7A5B00; }
.pjp-role--edit { background: var(--action-light); color: #006978; }
.pjp-track { position: relative; height: 74px; margin: 12px 0 4px; }
.pjp-track--open { display: flex; align-items: center; }
.pjp-bar { position: absolute; left: 0; right: 0; top: 2px; height: 52px; border-radius: 10px; border: 1.5px solid var(--room-color); background: color-mix(in srgb, var(--room-color) 10%, #fff); overflow: hidden; }
.pjp-bar.pj-bar--late { border-color: var(--cal-bad); background: var(--cal-bad-light); }
.pjp-bar.pj-bar--soon, .pjp-bar.pj-bar--today { border-color: #FF9800; }
.pjp-elapsed { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--room-color) 28%, transparent); }
.pjp-today { position: absolute; top: -2px; height: 60px; width: 2px; background: #E53935; z-index: 2; }
.pjp-ms { bottom: 22px; }
.pjp-d { position: absolute; bottom: -2px; font-size: 0.68rem; color: var(--text-muted); }
.pjp-d--l { left: 0; } .pjp-d--r { right: 0; }
.pjp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 0.82rem; color: var(--text-muted); }
.pjp-avatars { display: inline-flex; gap: 4px; }
.pjp-meter { height: 10px; border-radius: 6px; background: var(--cal-grey-light); overflow: hidden; }
.pjp-meter i { display: block; height: 100%; background: var(--action); }
.pp-modal { max-width: 1100px; }

/* Chrono des taches */
.pjt-time-cell { white-space: nowrap; min-width: 150px; }
.pjt-time-cell > .pjt-chrono { vertical-align: middle; margin-right: 4px; }
.pjt-chrono.is-on { background: #c0392b; color: #fff; border-color: #c0392b; }
.pjt-time { display: inline-block; vertical-align: middle; white-space: normal; }
.pjt-time > summary { cursor: pointer; list-style: none; white-space: nowrap; }
.pjt-run { font-variant-numeric: tabular-nums; color: #c0392b; font-weight: 600; }
.pjt-timebox { margin-top: 6px; min-width: 240px; display: grid; gap: 6px; }
.pjt-entries { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; max-height: 160px; overflow: auto; }
.pjt-addtime { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pjt-addtime input[data-tnote] { flex: 1 1 100px; min-width: 0; }
.pjt-totals { margin: 8px 0 0; }

.pj-tl-ctl .pjt-clock { font-variant-numeric: tabular-nums; font-size: .78rem; padding: 1px 6px; border-radius: 10px; background: rgba(127,127,127,.18); white-space: nowrap; }
.pjt-clock.is-run { background: #c0392b; color: #fff; font-weight: 600; animation: pjtPulse 1.6s ease-in-out infinite; }
.pj-trow.is-running .pj-tl-top { box-shadow: inset 3px 0 0 #c0392b; }
.pj-trow.is-running .pj-task { outline: 2px solid #c0392b; outline-offset: -2px; }
.pjt-chrono.is-on { animation: pjtPulse 1.6s ease-in-out infinite; }
@keyframes pjtPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pjt-clock.is-run, .pjt-chrono.is-on { animation: none; } }
.pjt-track { display: flex; gap: 6px; align-items: flex-start; }
.pjt-addtime input[type=time] { width: 6.5em; }
.tl-work-title { padding: 6px 10px; font-size: .8rem; opacity: .75; border-top: 1px solid rgba(127,127,127,.3); }
.tl-work-row .tl-work { position: absolute; top: 8px; bottom: 8px; border-radius: 4px; opacity: .9; min-width: 3px; }
.tl-work-row .tl-work.is-running { outline: 2px solid #c0392b; animation: pjtPulse 1.6s ease-in-out infinite; }
.pj-remain--ongoing { background: rgba(0,188,212,.15); color: #00838f; }

/* Tache a suivi du temps : la barre garde la duree totale en pale, seuls les jours travailles sont pleins (bande du bas) */
.tl-booking.pj-task--span { border-style: dashed; background: color-mix(in srgb, var(--room-color) 5%, #fff); opacity: .9; }
.tl-booking.pj-task--span .tl-b-text { align-self: flex-start; padding-top: 2px; }
.tl-booking.pj-worked { background: var(--room-color); border: 0; border-radius: 4px; color: #fff; font-size: .72rem; font-weight: 600; padding: 0 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; z-index: 3; }
.tl-booking.pj-worked::before { display: none; }
.tl-booking.pj-worked.is-run { outline: 2px solid #c0392b; animation: pjtPulse 1.6s ease-in-out infinite; }
.tl-booking.pj-task--span .tl-b-sub { display: none; }
.pjp-mini { margin: 0 0 8px 42px; padding-left: 16px; }

/* Horaires prevus (creneaux) et notes des taches */
.tl-work-row .tl-work.is-planned { opacity: .55; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); border: 1px dashed rgba(0,0,0,.45); }
.pjt-plan summary, .pjt-notes summary { cursor: pointer; font-size: .85rem; }
.pjt-note { list-style: none; margin: 4px 0; padding: 4px 6px; border-left: 3px solid rgba(127,127,127,.4); }
.pjt-note-text { white-space: pre-wrap; word-break: break-word; }
.pjt-addtime textarea { width: 100%; min-width: 12em; }
.pj-task.pj-task--open { border-style: dashed; border-right-style: none; }
.pjt-table td input[data-tf="continuous"] { margin-right: 2px; }