/* ─── Variables (thème Adeiz) ───────────────────────────────── */
:root {
  /* Bleu cyan Adeiz (navbar, accents, focus) — exact : rgb(1,150,199) */
  --teal:        #0196C7;
  --teal-dark:   #017aa3;
  --teal-soft:   #e0f2f9;
  /* Jaune / or Adeiz (boutons d'action) — exact : rgb(241,194,50) */
  --gold:        #F1C232;
  --gold-hover:  #deb22e;
  --white:       #ffffff;
  --bg:          #f7f8fa;   /* fond de page : gris clair */
  --surface:     #ffffff;
  --thead:       #e6eaf0;   /* en-tête de tableau : gris plus foncé que le fond */
  --border:      #e0e3e8;
  --text:        #1a1d23;
  --text-muted:  #6b7280;
  --green:       #5cb85c;
  --nav-h:       48px;
  --prod-sidebar-w: 190px;
  --radius:      4px;
  --shadow:      0 1px 4px rgba(0,0,0,.08);
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ─── Navbar ─────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.navbar-left  { display: flex; align-items: center; gap: 12px; }
.navbar-right { display: flex; align-items: center; gap: 10px; }

.menu-btn {
  background: none; border: none;
  color: var(--white);
  cursor: pointer; padding: 6px;
  border-radius: 4px;
  display: flex; align-items: center;
  transition: background .15s;
}
.menu-btn:hover { background: rgba(255,255,255,.15); }

.brand {
  font-size: 17px; font-weight: 800;
  letter-spacing: .1em; color: var(--white);
  display: flex; align-items: center;
}
.brand-a { color: var(--gold); }
.brand-logo { height: 22px; width: auto; display: block; }

.search-wrapper { position: relative; }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.55); pointer-events: none;
  display: flex; align-items: center;
}
.search-input {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  color: var(--white);
  padding: 5px 12px 5px 32px;
  font-size: 13px; width: 230px;
  outline: none; transition: background .2s;
}
.search-input::placeholder { color: rgba(255,255,255,.5); }
.search-input:focus { background: rgba(255,255,255,.22); }

/* ── Menu déroulant de recherche de navigation ── */
.search-results {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  width: 260px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  padding: 4px;
  z-index: 200;
  max-height: 320px; overflow-y: auto;
}
.search-result {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius);
  font-size: 13px; color: var(--text);
  cursor: pointer; transition: background .1s;
}
.search-result:hover,
.search-result.is-active { background: var(--teal-soft); color: var(--teal-dark); }
.search-result-icon { color: var(--text-muted); flex-shrink: 0; }
.search-result:hover .search-result-icon,
.search-result.is-active .search-result-icon { color: var(--teal); }
.search-empty {
  padding: 12px 10px; font-size: 12px;
  color: var(--text-muted); font-style: italic; text-align: center;
}

/* Ligne de résultat = lien + bouton d'épinglage */
.search-result-row { display: flex; align-items: center; gap: 2px; }
/* `display:flex` prime sur l'attribut [hidden] (UA) : on le rétablit explicitement */
.search-result-row[hidden] { display: none; }
.search-result { flex: 1; min-width: 0; }
.search-result-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-parent { color: var(--text-muted); }
.search-pin {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; background: none; border-radius: 6px;
  cursor: pointer; padding: 0; color: var(--text-muted);
  transition: background .12s, color .12s;
}
.search-pin:hover { background: var(--teal-soft); }
.search-pin.is-pinned { color: var(--teal); }
.search-hint {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; font-size: 11px; color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.search-hint svg { flex-shrink: 0; }

.icon-btn {
  background: none; border: none;
  color: rgba(255,255,255,.85);
  cursor: pointer; padding: 5px;
  border-radius: 4px;
  display: flex; align-items: center;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.15); color: var(--white); }

.nav-separator {
  color: rgba(255,255,255,.35);
  font-size: 16px; font-weight: 300;
  user-select: none;
}

/* ── Notifications (cloche) ── */
.notif-wrapper { position: relative; display: flex; align-items: center; }
.notif-btn { position: relative; }
.notif-badge {
  position: absolute; top: -1px; right: -1px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--gold); color: #3a2f00;
  font-size: 10px; font-weight: 700; line-height: 15px;
  text-align: center; border-radius: 8px;
  box-shadow: 0 0 0 2px var(--teal);
}
.notif-btn.has-unread svg { color: var(--white); }

.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-width: 92vw;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.16);
  z-index: 200; overflow: hidden;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.notif-title { font-size: 13px; font-weight: 600; color: var(--text); }
.notif-markall {
  background: none; border: none; cursor: pointer;
  color: var(--teal); font-size: 11.5px; font-weight: 500; padding: 2px 4px;
  border-radius: 4px; transition: background .12s;
}
.notif-markall:hover { background: var(--teal-soft); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text); cursor: pointer;
  transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--teal-soft); }
.notif-src {
  flex-shrink: 0; margin-top: 1px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
}
.notif-src.jira    { background: #e4ecfb; color: #2d5bd0; }
.notif-src.redmine { background: #fbe6e0; color: #b8402a; }
.notif-body { min-width: 0; flex: 1; }
.notif-ref  { font-size: 12px; font-weight: 600; color: var(--teal-dark); }
.notif-txt  {
  font-size: 12px; color: var(--text); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-time { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.notif-empty { padding: 22px 12px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

/* Surbrillance de la demande ciblée par une notification (page Tickets) */
@keyframes ticket-focus-pulse {
  0%   { background: var(--gold); }
  100% { background: transparent; }
}
tr.ticket-focus-highlight > td { animation: ticket-focus-pulse 2.4s ease-out; }

.user-info { display: flex; align-items: center; gap: 7px; color: var(--white); font-size: 13px; }
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ─── Page layout ─────────────────────────────────────────────── */
.main-content {
  margin-top: var(--nav-h);
  min-height: calc(100vh - var(--nav-h));
}

/* ════════════════════════════════════════════════════════════════
   LISTE PRODUITS
   ════════════════════════════════════════════════════════════════ */
.list-layout {
  display: flex;
  min-height: calc(100vh - var(--nav-h));
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

.list-sidebar {
  width: 220px; min-width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  display: flex; flex-direction: column;
  gap: 0;
  overflow-y: auto;
}
/* Menu latéral réduit (bouton ☰ de la barre du haut) : cache UNIQUEMENT le
   bloc de navigation épinglée (#sidebar-nav), pas le reste du panneau (les
   pages comme Tickets y affichent aussi leurs propres filtres). */
body.sidebar-collapsed #sidebar-nav { display: none; }

/* Repli complet du panneau de filtres (nav épinglée + filtres) sur les pages
   Tickets uniquement (.tickets-list-layout, cf. enableTicketsSidebarToggle
   dans app.js) — distinct du ☰ ci-dessus qui ne masque que #sidebar-nav.
   Scopé à .tickets-list-layout pour ne rien changer sur les autres pages
   utilisant .list-sidebar (Collaborateurs, Activités, Équipes...). */
.tickets-list-layout { position: relative; }
.tickets-list-layout .list-sidebar {
  transition: width .18s ease, min-width .18s ease, padding .18s ease;
}
.tickets-list-layout.filters-collapsed .list-sidebar {
  width: 0; min-width: 0; padding: 0; border-right: none; overflow: hidden;
}
/* Poignée verticale (pas un bouton flottant) : collée pile sur la bordure
   droite du panneau, jamais en surimpression du contenu — pattern "repli de
   panneau" classique (type VS Code). Suit le bord (`left`) qui recule avec
   le panneau pendant sa transition, jusqu'à se plaquer contre content-area
   une fois replié. */
.tickets-sidebar-toggle {
  position: absolute; top: 50%; left: 220px; z-index: 20;
  transform: translate(-50%, -50%);
  width: 14px; height: 44px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; color: var(--text-muted);
  transition: left .18s ease, color .12s, border-color .12s, background-color .12s;
}
.tickets-sidebar-toggle:hover {
  color: var(--teal, #0196c7); border-color: var(--teal, #0196c7);
  background: var(--teal-soft, #e6f7fb);
}
.tickets-sidebar-toggle svg { width: 8px; height: 8px; transition: transform .18s ease; }
.tickets-list-layout.filters-collapsed .tickets-sidebar-toggle { left: 0; }
.tickets-list-layout.filters-collapsed .tickets-sidebar-toggle svg { transform: rotate(180deg); }

.sidebar-nav {
  display: flex; flex-direction: column;
  gap: 2px; margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: var(--text);
  transition: background .12s, color .12s;
}
.sidebar-nav-item:hover { background: var(--bg); }
.sidebar-nav-item.active { background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; }
/* Réordonnancement des pages épinglées (glisser-déposer) : seule la poignée
   (.ln-drag-handle, façon iOS) est saisissable, pas toute la ligne. */
.sidebar-nav-item.ln-dragging { opacity: .5; }
.sidebar-nav-item.ln-drop-before { box-shadow: inset 0 2px 0 var(--teal); }
.sidebar-nav-item.ln-drop-after { box-shadow: inset 0 -2px 0 var(--teal); }
.ln-drag-handle {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 22px; margin-left: -4px; cursor: grab;
  color: var(--text-muted); opacity: 0; transition: opacity .12s;
}
.sidebar-nav-item:hover .ln-drag-handle { opacity: .6; }
.ln-drag-handle:hover { opacity: 1; }
.ln-drag-handle:active { cursor: grabbing; }
.sidebar-nav-item svg { flex-shrink: 0; }
.sidebar-nav-item .ln-ico { display: inline-flex; flex-shrink: 0; }
.sidebar-nav-item .ln-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bouton « retirer du menu » : discret, visible au survol de la ligne */
.ln-unpin {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; background: none; border-radius: 5px;
  cursor: pointer; padding: 0; color: var(--teal);
  opacity: .55; transition: opacity .12s, background .12s;
}
.sidebar-nav-item:hover .ln-unpin { opacity: .8; }
.ln-unpin:hover,
.ln-unpin:focus-visible { opacity: 1; background: var(--teal-soft); }
.ln-subnav {
  margin: 2px 0 4px 22px; padding-left: 11px;
  border-left: 1.5px solid var(--border);
  display: flex; flex-direction: column; gap: 1px;
}
.sidebar-nav-item.ln-subitem { font-size: 12.5px; padding: 6px 8px; }
.sidebar-nav-empty {
  padding: 14px 10px; font-size: 12px; color: var(--text-muted);
  line-height: 1.5; text-align: center;
}

.sidebar-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sidebar-title.is-collapsible {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; cursor: pointer; user-select: none;
}
.sidebar-title.is-collapsible:hover { color: var(--teal, #0196c7); }
.sidebar-title-chevron {
  display: inline-flex; flex: 0 0 auto;
  transition: transform .15s ease;
}
.sidebar-title.is-collapsed { margin-bottom: 0; }
.sidebar-title.is-collapsed .sidebar-title-chevron { transform: rotate(-90deg); }
/* Puce "Favoris" du bandeau au-dessus du tableau Tickets (pas dans la
   sidebar : repositionnée à la demande, plus visible sans scroll) — zone de
   dépôt (glisser une ligne du tableau dessus) + compteur, poussée à droite du
   bandeau (`margin-left:auto`). Même langage visuel que les autres zones de
   drop de l'app (`.drop-hover`, contour pointillé teal). */
.tickets-favoris-chip {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px; cursor: pointer;
  border: 1.5px dashed var(--border); border-radius: 8px; color: var(--text-muted);
  font-size: 12.5px; white-space: nowrap; align-self: flex-end;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tickets-favoris-chip svg { flex: 0 0 auto; }
.tickets-favoris-chip.drop-hover {
  border-color: var(--teal); background: var(--teal-soft); color: var(--teal-dark);
}
/* Cliquer la puce Favoris révèle/masque les étoiles ★ par ligne (masquées
   par défaut, discrétion visuelle du tableau) — la puce passe en jaune pour
   signaler le mode actif, même code couleur que `.tk-fav-star.is-fav`. */
.tickets-favoris-chip.stars-visible { color: #f5b400; border-color: #f5b400; }
/* Étoile favori sur une ligne du tableau : à côté de la clé/référence,
   masquée par défaut, révélée via `#tickets-page.show-fav-stars` /
   `#tickets-redmine-page.show-fav-stars` (cf. `.tickets-favoris-chip.stars-visible`). */
.tk-fav-star {
  display: none;
  border: 0; background: none; cursor: pointer; padding: 0; line-height: 0;
  color: var(--border); flex: 0 0 auto; font-size: 14px;
}
#tickets-page.show-fav-stars .tk-fav-star,
#tickets-redmine-page.show-fav-stars .tk-fav-star { display: inline-flex; }
/* Bouton SÉPARÉ "n'afficher que mes favoris" (`favUniquement`, combiné en ET
   avec les autres filtres actifs) — juste avant la puce Favoris ci-dessus,
   `margin-left:auto` déplacé ici (au lieu de la puce) pour pousser le groupe
   [bouton + puce] tout à droite du bandeau, puisque le bouton vient
   maintenant en premier dans le DOM. Juste l'étoile, pas un bouton encadré
   (essayé avec le style `.tickets-icon-only-btn` — bordure/fond blanc comme
   le bouton resync — puis simplifié sur retour utilisateur : "juste la
   petite étoile") : zone de clic conservée à 34px (même hauteur que le
   reste du bandeau) mais sans bordure/fond visibles, même code couleur que
   `.tk-fav-star`. */
.tickets-favoris-only-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: auto;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--border); transition: color .15s ease;
}
.tickets-favoris-only-btn:hover { color: #d4a017; }
.tickets-favoris-only-btn[aria-pressed="true"] { color: #f5b400; }
.tk-fav-star:hover { color: #d4a017; }
.tk-fav-star.is-fav { color: #f5b400; }
.is-collapsed-content { display: none !important; }

.sidebar-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }



.sidebar-membres { display: flex; flex-direction: column; gap: 2px; }
.sidebar-membre-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: var(--text);
  background: none; border: none; cursor: pointer; width: 100%; text-align: left;
  font: inherit; transition: background .12s, color .12s;
}
.sidebar-membre-btn:hover { background: var(--bg); }
.sidebar-membre-btn.is-active { background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; }
.sidebar-membre-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.field-group { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; }
.field-input,
.field-select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 13px; color: var(--text);
  background: var(--white);
  outline: none; transition: border-color .15s;
  width: 100%;
}
.field-input:focus, .field-select:focus { border-color: var(--teal); }

.content-area { flex: 1; padding: 20px 24px; overflow-y: auto; overflow-x: hidden; height: 100%; }
.content-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 20px;
}
.page-title-row { display: flex; align-items: center; gap: 10px; }
.content-header-actions { display: flex; align-items: center; gap: 12px; }
.owner-form { margin: 0; }
.owner-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}
.owner-label select {
  font-size: 12px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
/* Combo « Clients » à cases à cocher (page équipe) */
.eq-clients-dd { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.eq-clients-btn {
  font-size: 12px; padding: 5px 8px; max-width: 220px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eq-clients-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 220px;
  max-height: 280px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.13);
  padding: 8px;
}
.eq-clients-opt {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 5px;
  font-size: 13px; color: var(--text); font-weight: 400; cursor: pointer;
}
.eq-clients-opt:hover { background: var(--teal-soft); }
.eq-clients-apply { width: 100%; margin-top: 6px; }
.page-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.badge {
  background: #e5e7eb; color: var(--text-muted);
  font-size: 12px; font-weight: 600;
  padding: 2px 10px; border-radius: 20px;
}

/* ─── Boutons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center;
  gap: 6px; padding: 7px 14px;
  border-radius: var(--radius); border: none;
  font-size: 13px; font-weight: 500;
  letter-spacing: normal; cursor: pointer;
  transition: background-color .25s cubic-bezier(.4,0,.2,1);
  text-transform: uppercase; text-decoration: none;
}
.btn-primary  { background: var(--gold); color: var(--white); }
.btn-primary:hover { background: var(--gold-hover); }
.btn-secondary { background: #e5e7eb; color: #555; }
.btn-secondary:hover { background: #d1d5db; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-danger { background: #fee2e2; color: #b91c1c; }
.btn-danger:hover { background: #fecaca; }
.table-actions { white-space: nowrap; text-align: right; }
.table-actions .btn + form, .table-actions form + .btn { margin-left: 6px; }

/* ─── Tableau ───────────────────────────────────────────────── */
.table-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  box-shadow: var(--shadow);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th {
  background: var(--thead); padding: 10px 14px;
  text-align: left; font-weight: 700; font-size: 11px;
  color: var(--text-muted); letter-spacing: .05em;
  border-bottom: 2px solid var(--border);
  white-space: nowrap; text-transform: uppercase;
  position: sticky; top: 0; z-index: 2;
}
.th-sortable { cursor: pointer; user-select: none; }
.th-sortable:hover { color: var(--teal-dark); }
.th-sortable::after { content: "⇅"; opacity: .3; margin-left: 6px; font-size: 10px; }
.th-sortable.sort-asc::after  { content: "↑"; opacity: 1; color: var(--teal); }
.th-sortable.sort-desc::after { content: "↓"; opacity: 1; color: var(--teal); }
.data-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: #f9fafb; }
.data-table td { padding: 10px 14px; vertical-align: middle; }
.edit-cell { width: 36px; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions form { display: inline; }
.edit-btn { color: var(--teal); display: flex; align-items: center; transition: color .15s; }
.edit-btn:hover { color: var(--teal-dark); }
.code-cell { font-family: monospace; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.empty-state { text-align: center; padding: 40px; color: var(--text-muted); font-style: italic; }

/* Badges de statut */
.status-badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: #eceff1; color: #475569;   /* défaut neutre (statuts non mappés) */
}
/* statuts collaborateur */
.status-actif    { background: #dcfce7; color: #166534; }
.status-en-congé { background: #fef9c3; color: #92400e; }
.status-inactif  { background: #fee2e2; color: #991b1b; }
/* statuts activité */
.status-en-cours   { background: #dbeafe; color: #1d4ed8; }
.status-terminé    { background: #dcfce7; color: #166534; }
.status-en-attente { background: #fef9c3; color: #92400e; }
.status-planifié   { background: #f3e8ff; color: #6d28d9; }

/* Tableau embarqué dans une fiche */
.data-table--embedded { font-size: 12px; }
.data-table--embedded thead th { background: var(--white); }

/* ════════════════════════════════════════════════════════════════
   FICHE PRODUIT — LAYOUT
   ════════════════════════════════════════════════════════════════ */
.prod-layout {
  display: flex;
  min-height: calc(100vh - var(--nav-h));
}

/* ── Sidebar gauche produit ── */
.prod-sidebar {
  width: var(--prod-sidebar-w);
  min-width: var(--prod-sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
}

.prod-sidebar-back {
  background: var(--gold);
  color: var(--white);
  padding: 9px 14px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  transition: background .15s;
  flex-shrink: 0;
}
.prod-sidebar-back:hover { background: var(--gold-hover); }

.prod-sidebar-product {
  padding: 16px 14px;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.prod-image-placeholder {
  width: 58px; height: 58px;
  border-radius: 4px;
  background: #f0f0f0;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.prod-avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
  overflow: hidden; flex-shrink: 0;
}
.prod-avatar img { width: 100%; height: 100%; object-fit: cover; }
.prod-avatar.has-photo { background: none; }
.avatar-form { margin: 0; }
.avatar-btn {
  display: inline-block; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--teal);
  border: 1px solid var(--teal); border-radius: 4px; padding: 3px 10px;
  transition: background .12s, color .12s;
}
.avatar-btn:hover { background: var(--teal); color: var(--white); }
.avatar-del {
  background: none; border: none; cursor: pointer;
  font-size: 10px; color: var(--text-muted); text-decoration: underline; padding: 0;
}
.avatar-del:hover { color: #b91c1c; }
.prod-code { font-size: 13px; font-weight: 600; }

.prod-nav { flex: 1; padding-top: 4px; }
.prod-nav-item {
  display: block; padding: 8px 14px;
  font-size: 13px; color: var(--text);
  cursor: pointer; transition: background .1s, color .1s;
  border-left: 3px solid transparent;
}
.prod-nav-item:hover { background: var(--bg); }
.prod-nav-item.active { color: var(--teal); font-weight: 600; border-left-color: var(--teal); }

/* Section headers in sidebar */
.prod-nav-section { border-top: 1px solid var(--border); }

.prod-nav-section-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer; color: var(--text);
  transition: background .1s;
  border-left: 3px solid transparent;
}
.prod-nav-section-header:hover { background: var(--bg); }

.prod-nav-section.is-active > .prod-nav-section-header {
  border-left-color: var(--gold);
}

.section-label { display: flex; align-items: center; gap: 6px; }
.section-dot {
  width: 16px; height: 16px;
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dot-green  { background: #22c55e; }
.dot-orange { background: #f59e0b; }
.dot-blue   { background: #3b82f6; }
.dot-purple { background: #8b5cf6; }
.dot-red    { background: #ef4444; }
.dot-cyan   { background: var(--teal); }

.prod-nav-sub { padding: 2px 0 6px 0; }
.prod-nav-sub-item {
  display: block; padding: 5px 14px 5px 36px;
  font-size: 12px; color: var(--text-muted);
  cursor: pointer; transition: background .1s, color .1s;
  border-left: 3px solid transparent;
}
.prod-nav-sub-item:hover { background: var(--bg); color: var(--text); }
.prod-nav-sub-item.active { color: var(--teal); font-weight: 600; }

/* ── Zone contenu produit ── */
.prod-content {
  flex: 1; background: var(--bg);
  overflow-x: auto;
  position: relative;
  padding-bottom: 80px;
}

.prod-content-header {
  background: var(--surface);
  padding: 12px 24px;
  display: flex; align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.prod-content-title {
  display: flex; align-items: center;
  gap: 10px; font-size: 15px; font-weight: 600;
}
.back-link {
  color: var(--text-muted);
  display: flex; align-items: center;
  transition: color .15s;
}
.back-link:hover { color: var(--teal); }
.prod-content-id { font-size: 11px; color: var(--text-muted); }

/* ── Sections formulaire produit ── */
.act-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 14px;
}
.act-section > .prod-content-header { position: relative; margin: 0; }
.act-section > .prod-form-section,
.act-section > .act-section-body > .prod-form-section {
  border: none; border-top: 1px solid var(--border);
  border-radius: 0; box-shadow: none; margin: 0;
}
.act-section > .semaine-table-wrapper,
.act-section > .act-section-body > .semaine-table-wrapper {
  padding: 14px 20px 18px;
  background: var(--surface);
}
.act-section-cards { padding: 0 24px; }
.act-section-body { }
.act-section.is-collapsed .act-section-body { display: none; }
.act-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--text-muted);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.act-collapse-btn:hover { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
.act-collapse-btn svg { transition: transform .2s; }
.act-section.is-collapsed .act-collapse-btn svg { transform: rotate(-90deg); }

.prod-form-section {
  background: var(--surface);
  margin: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.prod-form-section-title {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: none;
  letter-spacing: 0; margin-bottom: 14px;
}
.prod-form-section-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 0;
}
.field-hint { font-size: 12px; color: var(--text-muted); }
.pref-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text); cursor: pointer; padding: 4px 0;
}
.pref-check input { width: 16px; height: 16px; accent-color: var(--teal, #0d9488); cursor: pointer; flex-shrink: 0; }
.pref-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 16px;
}
.pref-check-block { padding-top: 16px; border-top: 1px solid var(--border); margin-top: 16px; }
.pref-check-block:first-of-type { padding-top: 0; border-top: none; margin-top: 12px; }
.pref-check-block-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.pref-check-actions { font-size: 12px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.pref-check-actions a { color: var(--teal, #0d9488); text-decoration: none; }
.pref-check-actions a:hover { text-decoration: underline; }

/* ── Champs outlined (style material) ── */
.field-row {
  display: flex; gap: 14px;
  margin-bottom: 14px; align-items: flex-end;
}
.field-row:last-child { margin-bottom: 0; }

.field-outlined {
  position: relative; flex: 1; min-width: 0;
}
.field-outlined > label {
  position: absolute; top: -7px; left: 9px;
  font-size: 10px; color: var(--text-muted);
  background: var(--white); padding: 0 3px;
  pointer-events: none; z-index: 1;
  white-space: nowrap; letter-spacing: .03em;
}
.field-outlined input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 10px;
  font-size: 13px; color: var(--text);
  background: var(--white); outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.field-outlined input:focus { border-color: var(--teal); }

/* Neutralise le fond bleu de l'autofill du navigateur : sinon le label flottant
   (fond blanc) laisse un rectangle blanc disgracieux par-dessus le champ rempli */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* Wrapper pour select avec chevron custom */
.select-wrapper { position: relative; }
.select-wrapper::after {
  content: '';
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  pointer-events: none;
}
.select-wrapper select {
  width: 100%; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 30px 9px 10px;
  font-size: 13px; color: var(--text);
  background: var(--white); outline: none;
  appearance: none; cursor: pointer;
  transition: border-color .15s;
  font-family: inherit;
}
.select-wrapper select:focus { border-color: var(--teal); }
/* le chevron natif est remplacé par celui du combo custom */
.select-wrapper.ad-enhanced::after { display: none; }

/* ════ Combo personnalisé (style Adeiz) ════ */
.ad-select { position: relative; width: 100%; }
.ad-select__native { display: none; }

.ad-select__control {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  padding: 9px 10px;
  font-size: 13px; font-family: inherit; color: var(--text);
  text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.ad-select__control:focus { outline: none; }
/* dans la sidebar de filtres, hauteur alignée sur les inputs */
.field-group .ad-select__control { padding: 6px 10px; }

.ad-select__value {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-select__value.is-placeholder { color: var(--text-muted); }

.ad-select__arrow {
  display: flex; flex-shrink: 0; color: var(--text-muted);
  transition: transform .2s, color .15s;
}
.ad-select__arrow svg { width: 13px; height: 13px; }

/* État ouvert : bordure + label en or (comme Adeiz) */
.ad-select.is-open .ad-select__control {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.ad-select.is-open .ad-select__arrow { transform: rotate(180deg); color: var(--gold); }
.field-outlined.is-open > label { color: var(--gold); }
.field-group.is-open .field-label { color: var(--gold); }

/* Panneau déroulant */
.ad-select__panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  max-height: 240px; overflow-y: auto;
  z-index: 50; padding: 4px 0;
  display: none;
}
.ad-select.is-open .ad-select__panel { display: block; }

.ad-select__option {
  padding: 8px 14px; font-size: 13px; color: var(--text);
  cursor: pointer; transition: background .1s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-select__option:hover { background: #f3f4f6; }
.ad-select__option.is-selected { background: #eceff1; font-weight: 600; }

/* ── Traductions ── */
.btn-add-lang {
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 10px;
  font-size: 12px; color: var(--text-muted);
  cursor: pointer; transition: border-color .15s, color .15s;
  font-family: inherit;
}
.btn-add-lang:hover { border-color: var(--teal); color: var(--teal); }

.lang-badge {
  display: inline-flex; align-items: center; gap: 6px;
}
.lang-code { font-size: 11px; font-weight: 800; color: var(--green); }
.lang-note { font-size: 11px; color: var(--green); font-style: italic; }

/* ── Options ── */
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 0;
}
.option-item {
  display: flex; align-items: center;
  gap: 8px; font-size: 13px;
}

.toggle {
  position: relative; width: 30px; height: 17px;
  flex-shrink: 0; cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: #d1d5db; border-radius: 8px;
  transition: background .2s; cursor: pointer;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 13px; height: 13px;
  left: 2px; top: 2px;
  background: white; border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.toggle input:checked + .toggle-slider { background: var(--teal); }
.toggle input:checked + .toggle-slider::before { transform: translateX(13px); }

/* ── Bouton Enregistrer fixe ── */
.btn-enregistrer {
  position: fixed; bottom: 20px; right: 20px; z-index: 150;
  background: var(--gold); color: white; border: none;
  border-radius: var(--radius); padding: 11px 18px;
  font-size: 13px; font-weight: 500;
  letter-spacing: normal; text-transform: uppercase;
  cursor: pointer; display: flex; align-items: center; gap: 7px;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
  transition: background-color .25s cubic-bezier(.4,0,.2,1);
  font-family: inherit;
}
.btn-enregistrer:hover { background: var(--gold-hover); }

/* ════ Connexions ════ */
.info-box {
  margin: 14px 16px 0;
  background: var(--teal-soft);
  border: 1px solid #b9e4ef;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px; color: #064b5c;
  line-height: 1.5;
}

.service-tag {
  display: inline-block;
  padding: 2px 9px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--white); margin-right: 4px;
}
.service-redmine { background: #b32024; }
.service-jira    { background: #1868db; }
.service-google  { background: #ea4335; }

/* Aligné sur la grille du planning au-dessus : 210px (colonne membre) + jours.
   `.gagenda-list` reprend le padding de `.semaine-table-wrapper` pour que les
   deux grilles démarrent exactement au même endroit horizontalement. */
#google-agenda-section .act-section-body { background: var(--surface); }
.gagenda-list { padding: 14px 20px 18px; }
.gagenda-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.gagenda-spacer { min-width: 0; display: flex; flex-direction: column; }
.gagenda-main { min-width: 0; }

/* Bandeau « lieu de travail » (Bureau/Domicile…) : étiquette (icône + texte)
   suivie d'un trait qui s'étire jusqu'au bout des jours couverts — rendu
   Google Agenda à l'identique. Un jour sans entrée reste un vrai trou (pas de
   trait qui « comble » un jour où il n'y a rien). */
.gagenda-allday-row { display: grid; gap: 4px; margin-bottom: 8px; grid-auto-rows: 18px; }
.gagenda-allday-chip {
  display: flex; align-items: center; min-width: 0; height: 18px;
  text-decoration: none; overflow: hidden;
}
.gagenda-allday-label {
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto; max-width: 100%;
  padding: 1px 7px; height: 18px; border-radius: 9px; font-size: 10.5px; font-weight: 600;
  background: color-mix(in srgb, var(--gc-color, #7986cb) 12%, var(--white, #fff));
  color: var(--text);   /* texte neutre foncé, pas teinté de la couleur du bandeau */
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gagenda-allday-label svg {
  flex: 0 0 auto; width: 9px; height: 9px;
  color: color-mix(in srgb, var(--gc-color, #7986cb) 85%, black);   /* icône bien colorée */
}
.gagenda-allday-line {
  flex: 1 1 auto; height: 2px; margin-left: 5px; min-width: 6px;
  background: color-mix(in srgb, var(--gc-color, #7986cb) 45%, var(--white, #fff));
}
.gagenda-allday-chip:hover .gagenda-allday-label { filter: brightness(.97); }
.gagenda-allday-chip, .gagenda-chip { cursor: grab; }
.gagenda-allday-chip:active, .gagenda-chip:active { cursor: grabbing; }

/* Lieu de travail (Bureau/Domicile…) : couleurs fixes de la palette Google
   Material, indépendantes de --gc-color (jamais de mélange de couleur ici,
   pour matcher exactement le rendu natif de Google Agenda). */
.gagenda-allday-chip.is-lieu .gagenda-allday-label { background: #e4f5fe; color: #3c4043; }
.gagenda-allday-chip.is-lieu .gagenda-allday-label svg { color: #1967d2; }
.gagenda-allday-chip.is-lieu .gagenda-allday-line { background: #aecbfa; }

/* Plage horaire affichée par la grille Google Agenda (paramétrable) — logée
   dans la colonne de gauche (spacer), alignée avec la colonne « nom/charge »
   du Planning de la semaine au-dessus. */
.gagenda-plage-row {
  height: 26px; box-sizing: border-box; flex: 0 0 auto;
  display: flex; align-items: flex-end; padding-bottom: 6px;
}
.gagenda-plage {
  display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-muted);
}
.gagenda-plage label { display: flex; align-items: center; gap: 3px; }
.gagenda-plage input {
  width: 34px; padding: 2px 3px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text); font-size: 10.5px; text-align: center;
}
/* Décale l'axe des heures d'autant que le bandeau « journée entière » au-dessus
   dans la colonne des jours (0 s'il n'y en a pas). */
.gagenda-allday-spacer { flex: 0 0 auto; }

/* Grille horaire (façon Google Agenda) : axe des heures à gauche + colonnes
   des jours, chaque event positionné en absolu selon son heure -> hauteur
   fixe quel que soit le nombre d'events (reste compact, pas d'empilement). */
.gagenda-hour-axis { position: relative; flex: 0 0 auto; }
.gagenda-hour-label {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: 9px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.gagenda-grid { display: grid; gap: 10px; align-items: start; }
.gagenda-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.gagenda-col-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); text-align: center; height: 26px; box-sizing: border-box;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.gagenda-col-head.is-today { color: var(--teal); border-bottom-color: var(--teal); }
.gagenda-col-body { position: relative; border-top: 1px dashed var(--border); }
.gagenda-hour-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--border); opacity: .5; }
.gagenda-chip {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 0; padding: 2px 5px; border-radius: 4px;
  /* Les vraies couleurs Google (via l'API) sont déjà des pastels doux —
     un mélange trop dilué (comme avec l'ancienne palette, plus saturée)
     les rendait presque invisibles. On garde la teinte plus franche. */
  background: color-mix(in srgb, var(--gc-color, #a4bdfc) 30%, var(--white, #fff));
  border-left: 3px solid var(--gc-color, #a4bdfc);
  text-decoration: none; color: var(--text); font-size: 10px; line-height: 1.2;
  overflow: hidden; transition: filter .1s;
}
.gagenda-chip:hover { filter: brightness(.96); z-index: 2; }
.gagenda-chip-heure {
  display: flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; color: color-mix(in srgb, var(--gc-color, #a4bdfc) 80%, black);
}
.gagenda-chip-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Event « Absent du bureau » (type dédié côté Google Agenda) : hachures +
   petite icône, comme le rendu de Google. */
.gagenda-chip.is-absence {
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--gc-color, #e67c73) 26%, var(--white, #fff)) 0 6px,
    color-mix(in srgb, var(--gc-color, #e67c73) 12%, var(--white, #fff)) 6px 12px);
}
.gagenda-chip-absence { width: 10px; height: 10px; flex: 0 0 auto; color: color-mix(in srgb, var(--gc-color, #e67c73) 80%, black); }

.info-box--error {
  background: #fef2f2; border-color: #fecaca; color: #991b1b;
  display: flex; gap: 12px; align-items: center;
}
.info-box--error a { color: #991b1b; font-weight: 600; text-decoration: underline; }

/* Tableau de bord Redmine */
.conn-status { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px #dcfce7; }
.rm-link { color: var(--teal); font-weight: 600; }
.rm-link:hover { text-decoration: underline; }
.rm-more { font-size: 12px; color: var(--text-muted); margin-top: 8px; font-style: italic; }

.progress {
  display: inline-block; vertical-align: middle;
  width: 70px; height: 6px; border-radius: 3px;
  background: #e5e7eb; overflow: hidden; margin-right: 6px;
}
.progress-bar { height: 100%; background: var(--teal); border-radius: 3px; }
.progress-label { font-size: 11px; color: var(--text-muted); }

.icon-del {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px;
  border-radius: 4px; display: inline-flex;
  transition: background .12s, color .12s;
}
.icon-del:hover { background: #fee2e2; color: #991b1b; }

.conn-add-trigger {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.conn-google-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0;
}
.conn-google-row .status-badge { margin-left: 8px; }
.conn-add {
  margin-top: 14px; padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.conn-add-footer {
  display: flex; align-items: center;
  justify-content: space-between; margin-top: 16px;
}

/* ── Édition inline des comptes ── */
.icon-edit {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; margin-right: 2px;
  border-radius: 4px; display: inline-flex;
  transition: background .12s, color .12s;
}
.icon-edit:hover { background: var(--teal-soft); color: var(--teal-dark); }

.conn-table .conn-row { cursor: pointer; transition: background .12s; }
.conn-table .conn-row:hover { background: var(--teal-soft); }
.conn-table .conn-row.is-editing { background: var(--teal-soft); }

.conn-edit-row > td { padding: 0 !important; background: #f8fafc; }
.conn-edit {
  margin: 0; padding: 18px;
  border-top: 2px solid var(--teal);
}
.conn-edit-actions {
  display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap; justify-content: flex-end;
}
.conn-test-result {
  flex-basis: 100%; text-align: right;
  font-size: 12px; font-weight: 500; margin-bottom: 2px;
}
.conn-test-result.is-pending { color: var(--text-muted); }
.conn-test-result.is-ok  { color: #16a34a; }
.conn-test-result.is-err { color: #b32024; }

/* ── Cellules Jira avec icône (type, priorité) ── */
.jira-icon-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.jira-icon { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.due-overdue { color: #b32024; font-weight: 600; }
.due-none { color: var(--text-muted); }

/* ── Cartes de statut Jira (cliquables) ── */
.prod-content .tabfilter { padding: 0 16px; }
.jira-cards {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 18px;
}
.jira-card {
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; cursor: pointer; width: 175px; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.jira-card:hover { box-shadow: var(--shadow); border-color: #cbd5e1; }
.jira-card.is-active {
  border-color: var(--gold); background: #fffdf5;
  box-shadow: inset 0 0 0 1px var(--gold);
}
.jira-card-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 6px;
}
.jira-card-label { font-size: 12px; font-weight: 600; line-height: 1.2; }
.jira-card-count { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; }
.jira-card-only {
  flex: 0 0 auto; cursor: pointer;
  font-size: 10px; font-weight: 500; line-height: 1;
  padding: 3px 7px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--white);
  color: var(--text-muted);
  transition: background .12s, color .12s, border-color .12s;
}
.jira-card-only:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

/* ── Tonalités sémantiques des statuts (cartes + badges) ── */
.jira-card-label.tone-new      { color: #475569; }
.jira-card-label.tone-progress { color: var(--teal-dark); }
.jira-card-label.tone-done     { color: #15803d; }
.jira-card-label.tone-ko       { color: #b32024; }
.jira-card-label.tone-valide   { color: #15803d; }
.jira-card-label.tone-realized { color: #0d9488; }

.status-badge.tone-new      { background: #eceff1; color: #475569; }
.status-badge.tone-progress { background: var(--teal-soft); color: var(--teal-dark); }
.status-badge.tone-done     { background: #dcfce7; color: #15803d; }
.status-badge.tone-ko       { background: #fde8e8; color: #b32024; }
.status-badge.tone-valide   { background: #dcfce7; color: #15803d; }
.status-badge.tone-realized { background: #ccfbf1; color: #0d9488; }

/* ── Barre de filtres Jira ── */
.jira-filterbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.jira-project-wrap { min-width: 240px; }
.jira-project-wrap .ad-select,
.jira-project-wrap select { width: 240px; }
.jira-search {
  flex: 1; min-width: 220px;
  padding: 9px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px;
}
.jira-search:focus { outline: none; border-color: var(--teal); }

/* Onglets de relation (Redmine : Tous / Affectés / Créés) */
.rel-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.js-rel-tab {
  cursor: pointer; padding: 6px 14px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--white); color: var(--text-muted);
  border-radius: 16px; transition: background .12s, color .12s, border-color .12s;
}
.js-rel-tab:hover { border-color: var(--teal); color: var(--teal-dark); }
.js-rel-tab.is-active { background: var(--teal); border-color: var(--teal); color: var(--white); }

/* Badges de relation dans le tableau */
.rel-tag {
  display: inline-block; padding: 1px 8px; border-radius: 12px;
  font-size: 10px; font-weight: 600; white-space: nowrap; margin-right: 4px;
}
.rel-assigned { background: var(--teal-soft); color: var(--teal-dark); }
.rel-author   { background: #f3e8ff; color: #6d28d9; }
.btn-ghost {
  background: none; color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: #e5e7eb; color: #555; }

/* ════ Messages flash ════ */
.flash-stack {
  position: fixed; top: calc(var(--nav-h) + 14px); right: 18px;
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
  animation: flash-in .25s ease;
}
.flash {
  padding: 11px 18px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: var(--white);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  min-width: 220px;
}
.flash-success { background: #16a34a; }
.flash-error   { background: #dc2626; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; } }

/* ════════════════ Équipes ════════════════ */
/* Sélection des membres (formulaire création) */
.member-checks { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.member-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.member-check input { accent-color: var(--teal); }

/* Avatar rond réutilisable */
.equipe-avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  overflow: hidden;
}
.equipe-avatar img { width: 100%; height: 100%; object-fit: cover; }
.equipe-avatar.has-photo { background: none; }
.equipe-avatar--more { background: #94a3b8; }

/* Grille de cartes équipe */
.equipe-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.equipe-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.equipe-card:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.equipe-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.equipe-card-title { font-size: 16px; font-weight: 600; margin: 0; }
.equipe-card-desc { font-size: 13px; color: var(--text-muted); margin: 8px 0 14px; }
.equipe-avatars { display: flex; gap: -4px; margin-top: 12px; }
.equipe-avatars .equipe-avatar { margin-right: -6px; border: 2px solid var(--surface); }
.avatar-cell { width: 42px; padding-right: 0; }
.equipe-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* Liste des membres (détail équipe) */
.member-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 6px; }
.member-row:hover { background: var(--teal-soft); }
.member-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.member-row-info a { text-decoration: none; color: var(--text); font-size: 13px; }
.member-row-role { font-size: 11px; color: var(--text-muted); }
.member-add { border-top: 1px dashed var(--border); padding-top: 14px; }

/* En-tête détail équipe */
.dispo-pill {
  margin-left: 12px; font-size: 12px; font-weight: 600;
  color: var(--teal-dark); background: var(--teal-soft);
  padding: 4px 12px; border-radius: 20px;
}
.equipe-detail-desc { color: var(--text-muted); font-size: 14px; margin: 0 0 18px; }

/* Planning hebdomadaire */
.planning-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
.planning-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.planning-nav { display: flex; gap: 8px; }
.planning-range { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.planning-options { display: flex; gap: 14px; align-items: center; }
.planning-opt {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12px; color: var(--text-muted); user-select: none;
}
.planning-opt input { accent-color: var(--teal); cursor: pointer; }
/* Masquer le panneau de droite (saisie manuelle) */
.planning-layout.hide-panel .manual-entry { display: none; }
.planning-scroll { overflow-x: auto; }
.planning { width: 100%; border-collapse: collapse; table-layout: fixed; }
.planning th, .planning td {
  border: 1px solid var(--border); vertical-align: top;
}
.planning thead th {
  background: #f8fafc; padding: 8px; text-align: center;
  font-size: 11px; color: var(--text-muted);
}
.planning-name-col { width: 220px; text-align: left !important; }
.planning-day-col .planning-day { display: block; font-weight: 600; text-transform: capitalize; color: var(--text); }
.planning-day-col .planning-date { display: block; font-size: 10px; }
.planning th.is-weekend, .planning td.is-weekend { background: #fafafa; }
.planning th.is-today, .planning td.is-today { background: #fffdf5; }
.planning th.is-today { box-shadow: inset 0 -3px 0 var(--gold); }

.planning-member { display: flex; align-items: center; gap: 8px; padding: 6px; }
.planning-member-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.planning-member-info a { text-decoration: none; color: var(--text); font-size: 13px; }
.planning-role { font-size: 11px; color: var(--text-muted); }

.planning-cell { padding: 5px; height: 56px; }
.planning-act {
  font-size: 11px; line-height: 1.25; padding: 4px 6px; margin-bottom: 4px;
  border-radius: 3px; border-left: 3px solid #cbd5e1; background: #f1f5f9;
  color: #334155; cursor: default;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-indispo { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f3f4f6 8px, #f3f4f6 16px); }
.row-indispo .planning-member strong { color: var(--text-muted); }

/* Couleurs par statut d'activité (blocs + légende) */
.st-en-cours    { border-left-color: var(--teal) !important; }
.st-terminé     { border-left-color: #16a34a !important; }
.st-en-attente  { border-left-color: #f59e0b !important; }
.st-planifié    { border-left-color: #6366f1 !important; }
.st-conge       { border-left-color: #a855f7 !important; background: #faf5ff !important; color: #7e22ce !important; font-weight: 600; }

/* Bloc ticket Jira dans le planning */
a.planning-act.jira {
  display: block; text-decoration: none;
  border-left-color: #1868db !important; background: #eef4ff !important; color: #1d4ed8;
}
a.planning-act.jira:hover { background: #dbe7ff !important; }
.planning-act.jira strong { color: #1868db; }

/* Cellule en congé */
.planning-cell.cell-conge { background: #faf5ff; }

.planning-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 12px; height: 12px; border-radius: 2px; background: #f1f5f9; border-left: 3px solid #cbd5e1; }
.legend-dot.st-conge { background: #faf5ff; }
.legend-dot.jira { background: #eef4ff; border-left-color: #1868db; }

/* Panneau d'ajout au planning */
.planning-add-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px; padding: 16px;
  background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius);
}
.planning-add-panel[hidden] { display: none; }
.planning-add-form h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.paf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.paf-grid .paf-wide { grid-column: 1 / -1; }
.paf-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); }
.paf-grid input, .paf-grid select {
  padding: 7px 9px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}
.paf-grid input:focus, .paf-grid select:focus { outline: none; border-color: var(--teal); }
.paf-grid .ad-select { width: 100%; }
@media (max-width: 900px) { .planning-add-panel { grid-template-columns: 1fr; } }

/* ════════════════ Vue Gantt / plan de charge ════════════════ */
.planning-layout { display: flex; align-items: flex-start; gap: 16px; }
.gantt-area {
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px;
}

.gantt { width: 100%; }
/* Jours non travaillés (week-end) : pas de création par clic ; et blocs situés
   sur le week-end masqués quand les week-ends sont cachés (évite le bloc « fantôme »). */
.gantt-cell.is-weekend-cell { cursor: default; }
.gantt.no-weekend .gantt-block.is-weekend-col,
.gantt.no-weekend .gantt-jira-live-stack.is-weekend-col { display: none; }
/* Pastille compacte « colorie le jour » (déplacement, absence…) : petit chip en
   haut de la case, le fond du jour porte la couleur. Cohabite avec les Jira. */
.gantt-block.gantt-dayflag {
  min-height: 0; align-self: start; margin: 2px 3px;
  padding: 1px 8px; font-size: 10px; font-weight: 700;
  border-radius: 999px; line-height: 1.5;
  flex-direction: row; align-items: center;
}
.gantt-block.gantt-dayflag strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-head, .gantt-member { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.gantt-head { border-bottom: 2px solid var(--border); }
.gantt-head-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gantt-day-head {
  text-align: center; padding: 8px 2px; border-right: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted);
}
.gantt-day-head:first-child { border-left: 1px solid var(--border); }
.gantt-day-nom { display: block; font-weight: 600; text-transform: capitalize; color: var(--text); }
.gantt-day-date { display: block; font-size: 10px; }
.gantt-day-head.is-weekend { background: #f0f1f4; }
.gantt-day-head.is-today { background: #fdf8e3; box-shadow: inset 0 -3px 0 var(--gold); }

.gantt-member { border-bottom: 1px solid var(--border); }
.gantt-member:last-child { border-bottom: 0; }
.gantt-member:last-child { border-bottom: none; }
.gantt-name {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 10px 4px; border-right: 1px solid var(--border);
}
.gantt-name-head { display: flex; align-items: center; gap: 8px; }
.gantt-num {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px;
  background: #eef2f7; color: var(--text-muted);
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.gantt-name-info { min-width: 0; display: flex; flex-direction: column; }
.gantt-name-info a { text-decoration: none; color: var(--text); font-size: 13px; }
.gantt-role { font-size: 11px; color: var(--text-muted); }

/* Hauteur d'une « ligne » de planning = 2 h. Une journée (8 h) = 4 lignes. */
.gantt { --gantt-line: 26px; --gantt-gap: 4px; }
/* Chaque case réserve la hauteur d'une journée pleine (4 lignes) */
.gantt-body { position: relative; min-height: calc(var(--gantt-line) * 4 + var(--gantt-gap) * 3 + 16px); }
.gantt-body.drop-hover { outline: 2px dashed var(--teal); outline-offset: -2px; background: rgba(1, 150, 199, .06); }
.gantt-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); z-index: 0; }
.gantt-bg > div { border-right: 1px solid var(--border); }
.gantt-bg > div:first-child { border-left: 1px solid var(--border); }
.gantt-bg > div.is-weekend { background: #f0f1f4; }
.gantt-bg > div.is-today { background: #fffdf2; }
/* Coloration des journées (priorité sur is-today : déclarées après) */
.gantt-bg > div.jour-full  { background: #eaf8f1; }   /* journée pleine (8 h) — vert très clair */
.gantt-bg > div.jour-over  { background: #fef2f2; }   /* surcharge (> 8 h) — rouge très clair */
.gantt-bg > div.jour-ferie { background: #f1f2f4; }   /* jour férié — gris clair */
.gantt-day-head.is-ferie   { background: #f1f2f4; color: var(--text-soft, #6b7280); }

/* Masquer les week-ends : les 2 dernières colonnes (sam/dim) passent à 0 */
.gantt.no-weekend .gantt-head-days,
.gantt.no-weekend .gantt-bg,
.gantt.no-weekend .gantt-cells,
.gantt.no-weekend .gantt-drop,
.gantt.no-weekend .gantt-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) 0 0;
}
.gantt.no-weekend .gantt-day-head.is-weekend,
.gantt.no-weekend .gantt-bg > div.is-weekend { border: 0; padding: 0; overflow: hidden; }

/* Couche de cases cliquables (création) — sous la grille */
.gantt-cells {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.gantt-cell { cursor: pointer; transition: background .1s; }
.gantt-cell:hover { background: rgba(1, 150, 199, .07); }

/* Couche de dépôt (drag'n'drop) — au-dessus, inactive sauf pendant un glisser */
.gantt-drop {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
body.dnd-active .gantt-drop { pointer-events: auto; }
.gantt-drop-cell { transition: background .1s; }
.gantt-drop-cell.drop-hover {
  background: rgba(1, 150, 199, .14);
  outline: 2px dashed var(--teal); outline-offset: -2px;
}

.gantt-grid {
  position: relative; z-index: 2; pointer-events: none;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: var(--gantt-line); grid-auto-flow: row dense;
  row-gap: var(--gantt-gap); padding: 8px 0;
}
.gantt-block { pointer-events: auto; }
.gantt-block {
  margin: 0 3px; padding: 3px 7px; border-radius: 4px;
  border-left: 3px solid #999; overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-start;
  font-size: 11px; line-height: 1.2; cursor: default;
  /* Respecte la hauteur du span (sinon min-height:auto d'un item grille l'agrandit
     à son contenu -> un 2 h paraîtrait aussi haut qu'un 4 h). Le texte déborde =
     tronqué (overflow:hidden). */
  min-height: 0;
}
a.gantt-block { cursor: pointer; }
.gantt-block { position: relative; }
.gantt-block.js-drag-block { cursor: grab; }
.gantt-block.is-editable:hover { filter: brightness(.96); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
/* Le texte occupe la hauteur de la barre (multi-ligne) puis est tronqué (overflow:hidden) */
.gantt-block strong { white-space: normal; overflow-wrap: anywhere; }
/* Clé Jira cliquable -> ouvre le ticket */
.gantt-key-link { color: inherit; text-decoration: none; }
.gantt-key-link:hover { text-decoration: underline; }

/* Poignées de redimensionnement (bords gauche/droite) */
.gantt-handle {
  position: absolute; top: 0; bottom: 0; width: 8px; z-index: 2;
  cursor: ew-resize;
}
.gantt-handle-l { left: -1px; }
.gantt-handle-r { right: -1px; }
.gantt-block.is-editable:hover .gantt-handle::before {
  content: ""; position: absolute; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px; background: rgba(0,0,0,.35);
}
.gantt-handle-l::before { left: 1px; }
.gantt-handle-r::before { right: 1px; }

/* Pendant un déplacement / redimensionnement */
/* Ligne cible pendant un déplacement d'event entre personnes */
.gantt-member.gantt-drag-target .gantt-body {
  background: rgba(1, 150, 199, .12);
  outline: 2px dashed var(--teal); outline-offset: -2px;
}
/* Bloc qui suit le curseur pendant un déplacement (peut changer de ligne) */
.gantt-block.planning-floating {
  pointer-events: none; opacity: .9;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22); cursor: grabbing;
}
body.planning-dragging { user-select: none; cursor: grabbing; }
body.planning-dragging .gantt-block.js-drag-block { cursor: grabbing; }
.gantt-block-sub { font-size: 10px; opacity: .8; white-space: normal; overflow-wrap: anywhere; }
/* Pastille du statut Jira courant sur la barre (backlog / en cours / …) */
.gantt-block-status {
  align-self: flex-start; margin-top: 2px; max-width: 100%;
  font-size: 9px; font-weight: 700; line-height: 1.3;
  padding: 0 5px; border-radius: 8px;
  background: rgba(0, 0, 0, .10); color: rgba(0, 0, 0, .7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Nombre d'heures quotidien, badge en haut à droite de la barre */
.gantt-block-h {
  position: absolute; top: 2px; right: 5px; pointer-events: none;
  font-size: 9px; font-weight: 700; line-height: 1.4;
  padding: 0 4px; border-radius: 3px;
  background: rgba(255, 255, 255, .55); color: rgba(0, 0, 0, .7);
}
.gantt-block strong { padding-right: 26px; }   /* place pour le badge heures */
/* Statut Jira + heures groupés côte à côte, en haut à droite de la barre */
.gantt-block-meta {
  position: absolute; top: 2px; right: 5px; pointer-events: none;
  display: flex; align-items: center; gap: 4px; max-width: calc(100% - 10px);
}
.gantt-block-meta .gantt-block-status { position: static; margin-top: 0; align-self: center; }
.gantt-block-meta .gantt-block-h { position: static; top: auto; right: auto; }

/* Couleurs des barres (et pastilles de légende) */
.bloc-jira        { background: #efe9fb; border-left-color: #8b5cf6; color: #5b21b6; }
.bloc-activite    { background: var(--teal-soft); border-left-color: var(--teal); color: var(--teal-dark); }
.bloc-conge       { background: #dbeafe; border-left-color: #3b82f6; color: #1d4ed8; }
.bloc-maladie     { background: #eef1f5; border-left-color: #94a3b8; color: #475569; }
.bloc-reunion     { background: #dcfce7; border-left-color: #22c55e; color: #15803d; }
.bloc-deplacement { background: #fae8ff; border-left-color: #c026d3; color: #a21caf; }
.bloc-action      { background: #ffedd5; border-left-color: #f97316; color: #c2410c; }
/* Tickets Jira LIVE (affichés via la coche, non épinglés) : teinte fade + bord
   pointillé, pour les distinguer des tickets épinglés (déplaçables). Plusieurs
   tickets le même jour sont regroupés (côté serveur) dans un seul bloc de
   grille .gantt-jira-live-stack, empilés ici en flexbox : chaque carte garde
   sa hauteur naturelle de contenu, sans espace perdu entre deux tickets. */
.gantt-jira-live-stack {
  display: flex; flex-direction: column; gap: 3px;
  align-self: start; pointer-events: auto;
}
.bloc-jira-live {
  background: #f3f2f7; border-left-color: #c3bad9; border-left-style: dashed;
  color: #6d6890;
}
.bloc-jira-live .gantt-block-sub { opacity: .75; }
/* Icône du type Jira dans les barres */
.gantt-block .jira-icon { width: 13px; height: 13px; flex: 0 0 13px; vertical-align: -2px; margin-right: 3px; }

/* Ticket épinglé dont les dates ont été changées dans Jira DEPUIS l'épinglage
   (le planning garde la date fixée initialement) : bordure orange + ⚠. */
.bloc-jira-desync { border-left-color: #f59e0b; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .4); }
.gantt-desync-flag { margin-left: 3px; color: #b45309; }
/* Récurrence dans les popovers d'édition */
.pop-recur { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.pop-recur-end { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pop-recur-end[hidden] { display: none; }   /* sinon display:flex écrase l'attribut hidden */
.pop-recur-input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; width: 100%; box-sizing: border-box; }
/* ════ Onglets page équipe (Planning / Congés) ════ */
.equipe-tabs { display: flex; gap: 4px; margin: 18px 0 4px; border-bottom: 1px solid var(--border); }
.equipe-tab {
  border: 0; background: none; cursor: pointer; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.equipe-tab:hover { color: var(--text); }
.equipe-tab.is-active { color: var(--teal); border-bottom-color: var(--teal); }
.tab-panel[hidden] { display: none; }

/* ════ Vue « Congés » (multi-semaines, lecture seule) ════ */
.cg-toolbar { display: flex; align-items: center; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.cg-nav { display: flex; align-items: center; gap: 8px; }
.cg-label { font-weight: 700; font-size: 14px; min-width: 160px; text-align: center; }
.cg-search { margin-left: auto; min-width: 220px; }
.cg-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
/* Grille étirée sur toute la largeur disponible (pas de largeur figée) : les
   colonnes de jours se répartissent en 1fr sur 100 % de .cg-scroll — plus
   d'espace vide à droite. Le minmax(20px, 1fr) garde une taille lisible et ne
   déclenche le défilement horizontal que si la fenêtre devient trop étroite. */
.cg-grid { width: 100%; }
.cg-head, .cg-row {
  display: grid; grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
}
.cg-head { border-bottom: 1px solid var(--border); background: var(--surface-soft, #f8f9fb); }
.cg-head-name { min-width: 180px; }
.cg-head-weeks, .cg-head-days, .cg-bg, .cg-blocs {
  display: grid; grid-template-columns: repeat(var(--cg-cols), minmax(20px, 1fr));
}
.cg-week-num { padding: 5px 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); border-left: 1px solid var(--border); }
.cg-day-head { padding: 4px 2px; text-align: center; font-size: 10px; border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.cg-day-head.is-weekend { background: #f0f1f4; }
.cg-day-head.is-today { background: #fffdf2; font-weight: 700; }
.cg-day-head.is-ferie { background: #f1f2f4; }
.cg-day-nom { color: var(--text-muted); }
.cg-day-num { font-size: 12px; font-weight: 700; }
.cg-day-ferie { font-size: 8px; color: var(--text-muted); }
.cg-body { display: flex; flex-direction: column; }
.cg-row:last-child { border-bottom: 0; }
.cg-row.is-filtered { display: none; }
.cg-name { min-width: 180px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.cg-name-info { min-width: 0; display: flex; flex-direction: column; }
.cg-name-info a { text-decoration: none; color: var(--text); font-size: 13px; }
.cg-role { font-size: 11px; color: var(--text-muted); }
.cg-lane { position: relative; min-height: 40px; }
.cg-bg {
  position: absolute; inset: 0; z-index: 0;
}
.cg-bg > div { border-left: 1px solid var(--border); }
.cg-bg > div.is-weekend { background: #f0f1f4; }
.cg-bg > div.is-today { background: #fffdf2; }
.cg-bg > div.is-ferie { background: #f1f2f4; }
.cg-blocs {
  position: relative; z-index: 1; padding: 4px 0; row-gap: 2px;
  grid-auto-flow: row dense; align-items: center;
}
/* Barre de congé : couleur pleine et voyante (uniquement dans cette vue —
   le planning Gantt garde la teinte pâle habituelle de .bloc-conge). */
.cg-bloc-conge { background: #2563eb; border-left-color: #1d4ed8; color: #fff; }
.cg-bloc {
  margin: 0 2px; padding: 3px 6px; border-radius: 4px; border-left: 3px solid #999;
  font-size: 11px; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cg-bloc strong { font-weight: 700; }
.cg-bloc-sub { margin-left: 5px; opacity: .8; }

/* ════ Écran Planning (Gantt libre par client) ════ */
.pl-evt-manage { margin-top: 16px; font-size: 12px; }
.pl-evt-manage summary { cursor: pointer; color: var(--text-muted); font-weight: 600; }
.pl-grid { width: 100%; }
.pl-grid .cg-head { grid-template-columns: minmax(0, 1fr); }
.pl-grid .cg-head-name { display: none; }
.pl-lignes { display: flex; flex-direction: column; }
.pl-lane { position: relative; min-height: 40px; border-bottom: 1px solid var(--border); }
.pl-lane:last-child { border-bottom: 0; }
.pl-lane .pl-bg, .pl-lane .pl-blocs, .pl-lane .pl-drop {
  display: grid; grid-template-columns: repeat(var(--cg-cols), minmax(20px, 1fr));
}
/* Grille toujours en jours, mais colonnes bien plus fines en zoom mois/année
   (des centaines de jours) pour éviter un défilement horizontal démesuré. */
.pl-grid[data-zoom="mois"] .cg-head-days, .pl-grid[data-zoom="mois"] .cg-head-weeks,
.pl-grid[data-zoom="mois"] .pl-bg, .pl-grid[data-zoom="mois"] .pl-blocs, .pl-grid[data-zoom="mois"] .pl-drop {
  grid-template-columns: repeat(var(--cg-cols), minmax(4px, 1fr));
}
.pl-grid[data-zoom="annee"] .cg-head-days, .pl-grid[data-zoom="annee"] .cg-head-weeks,
.pl-grid[data-zoom="annee"] .pl-bg, .pl-grid[data-zoom="annee"] .pl-blocs, .pl-grid[data-zoom="annee"] .pl-drop {
  grid-template-columns: repeat(var(--cg-cols), minmax(1.5px, 1fr));
}
.pl-grid[data-zoom="mois"] .pl-bg > div, .pl-grid[data-zoom="annee"] .pl-bg > div,
.pl-grid[data-zoom="mois"] .pl-drop-cell, .pl-grid[data-zoom="annee"] .pl-drop-cell { border-left: 0; }
.pl-bg { position: absolute; inset: 0; z-index: 0; }
.pl-bg > div { border-left: 1px solid var(--border); }
.pl-bg > div.is-weekend { background: #f0f1f4; }
.pl-bg > div.is-today { background: #fffdf2; }
.pl-bg > div.is-ferie { background: #f1f2f4; }
.pl-blocs { position: relative; z-index: 1; padding: 4px 0; }
.pl-drop { position: absolute; inset: 0; z-index: 2; }
.pl-bloc {
  height: 30px; min-height: 30px; max-height: 30px;
  display: flex; flex-direction: row; align-items: center;
}
.pl-bloc strong {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  overflow-wrap: normal; padding-right: 20px;
}
.pl-bloc-del {
  position: absolute; top: 2px; right: 4px; z-index: 2;
  width: 16px; height: 16px; line-height: 16px; text-align: center;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .25); color: #fff;
  font-size: 12px; cursor: pointer; opacity: 0; padding: 0;
}
.pl-bloc:hover .pl-bloc-del { opacity: 1; }
.pl-lane-vide { min-height: 44px; }
/* Ligne survolée pendant un glisser vertical (changement de ligne). */
.pl-lane.pl-lane-target { background: rgba(1, 150, 199, .1); outline: 1px dashed var(--teal); outline-offset: -1px; }
.pl-lane-vide .pl-bg { opacity: .6; }
.pl-drop-cell { border-left: 1px solid var(--border); }
.pl-drop-cell.drop-hover { background: rgba(1, 150, 199, .15); }
.pl-zoom { display: flex; gap: 4px; margin-left: auto; }
.pl-zoom .btn.is-active { background: var(--teal); color: #fff; }

/* Une section par client sélectionné (mode multi-clients) */
.pl-client-section { border-top: 2px solid var(--border); }
.pl-client-section:first-child { border-top: 0; }
.pl-client-head {
  padding: 8px 10px 4px; font-size: 12px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em;
  display: flex; align-items: center; gap: 8px;
}
/* Client hors des clients affectés à l'utilisateur : lecture seule (pas de
   dépose, pas de suppression, pas de renommage — cf. `_peut_modifier_planning_client`). */
.pl-readonly-tag {
  font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: #92400e; background: #fef3c7; border-radius: 4px; padding: 2px 6px;
}
.pl-client-section[data-readonly] .pl-lane-vide { display: none; }
.pl-client-section[data-readonly] .pl-bloc-del { display: none; }
.pl-client-section[data-readonly] .js-pl-drag { cursor: default; }
.pl-client-section[data-readonly] .gantt-handle { display: none; }

/* ════ Onglet Livraison (MEP + tickets Jira rattachés à la main) ════ */
.livraison-client { margin-bottom: 22px; }
.livraison-client-title { margin: 0 0 10px; font-size: 15px; }
.livraison-list { display: flex; flex-direction: column; gap: 10px; }
.livraison-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px;
}
.livraison-card-head { margin-bottom: 8px; font-size: 13px; }
.livraison-jiras { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.livraison-jira-row {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 4px 6px; border-radius: 4px; background: var(--surface-soft, #f8f9fb);
}
.livraison-jira-key { font-weight: 700; }
.livraison-jira-sum { flex: 1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livraison-jira-del-form { display: contents; }
.livraison-add { position: relative; }
.livraison-jira-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 220px; overflow-y: auto;
}
.livraison-jira-result {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.livraison-jira-result:hover { background: var(--surface-soft, #f8f9fb); }
.livraison-jira-result .livraison-jira-sum { color: var(--text-muted); }

/* ════ Liste des tâches (page Activités) ════ */
/* Section « Mes tâches » : pas de bouton « réduire », on peut désactiver le
   overflow:hidden hérité de .act-section (sinon la liste de résultats de
   recherche se retrouve rognée en bas de carte). */
.act-section--taches, #google-agenda-section { overflow: visible; transition: outline .1s, background .1s; }
#google-agenda-section.drop-hover,
.act-section--taches.drop-hover {
  outline: 2px dashed var(--teal); outline-offset: -2px;
  background: rgba(1, 150, 199, .06);
}
/* Poignée dédiée au glisser-déposer d'un bloc du planning vers « Mes tâches »
   (le reste du bloc garde son comportement clic/déplacement habituel). Posée
   EN LIGNE avant le titre (pas en position absolue) pour ne jamais chevaucher
   le texte, quelle que soit sa longueur. */
.gantt-block-title-row { display: flex; align-items: center; gap: 3px; min-width: 0; }
.gantt-block-title-row strong { min-width: 0; }
.gantt-block-drag-tache {
  flex: 0 0 auto; width: 12px; height: 12px; line-height: 12px; text-align: center;
  font-size: 10px; color: rgba(0, 0, 0, .45); cursor: grab;
  border-radius: 3px; background: rgba(255, 255, 255, .55);
}
.gantt-block-drag-tache:hover { background: rgba(0, 0, 0, .12); color: rgba(0, 0, 0, .7); }
.gantt-block-fait {
  flex: 0 0 auto; width: 14px; height: 14px; line-height: 14px; text-align: center;
  font-size: 10px; font-weight: 700; color: #fff; background: #16a34a; border-radius: 50%;
}
.gantt-block.is-tache-faite { opacity: .7; }
.gantt-block.is-tache-faite strong { text-decoration: line-through; }
.tache-header-actions { display: flex; align-items: center; gap: 8px; }
/* Pastille "faites/total" à côté d'un titre de section (page /taches) —
   même style que `.badge` mais un peu plus petite pour tenir sur la ligne
   de titre à côté du nom du client. */
.tache-progress-badge { font-size: 11px; padding: 1px 9px; margin-left: 8px; vertical-align: middle; }
.act-section--taches .act-section-body { background: var(--surface); padding: 18px 20px; }
/* Modale "Nouvelle tâche" : le type (perso/Jira/Redmine) sur sa propre ligne,
   puis le titre juste en dessous en gros — c'est l'information principale,
   il ne doit pas se retrouver écrasé sur la même ligne que le reste. */
.tache-add-form {
  display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.tache-add-row { display: flex; align-items: center; gap: 10px; row-gap: 12px; flex-wrap: wrap; }
.tache-add-row--main { align-items: stretch; }
.tache-add-type { flex: 0 0 200px; width: 200px; }
.tache-add-titre {
  flex: 1 1 100%; width: 100%; font-size: 16px; font-weight: 500; padding: 11px 14px;
}
.tache-add-row--meta .field-input { flex: 0 1 160px; min-width: 140px; }
.tache-jira-search-wrap { position: relative; flex: 1 1 100%; }
.tache-jira-search-wrap .field-input { width: 100%; }
.tache-list { display: flex; flex-direction: column; }
.tache-row {
  border-radius: 4px; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.tache-list .tache-row:last-child { border-bottom: 0; }
.tache-row:hover { background: var(--surface-soft, #f8f9fb); }
.tache-row.is-fait .tache-titre { text-decoration: line-through; color: var(--text-muted); }
.tache-row.is-archive { opacity: .65; }
.tache-table { display: flex; flex-direction: column; }
.tache-row-main {
  display: grid; grid-template-columns: 22px 68px 56px minmax(0, 1fr) 44px 44px 44px 56px auto auto;
  align-items: center; gap: 10px; padding: 10px 8px;
}
/* Colonne "Affecté à" en plus, uniquement sur les tableaux de tâches
   d'équipe (personnel n'a pas de notion d'affectation) — cf. `equipe=True`
   dans les macros `tache_list_header`/`tache_row`. */
.tache-row-main--equipe { grid-template-columns: 22px 68px 56px minmax(0, 1fr) 40px 44px 44px 44px 56px auto auto; }
.tache-row-main > * { justify-self: start; }
.tache-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.tache-list-header {
  padding: 0 8px 8px; border-bottom: 1px solid var(--border);
}
.tache-sort-btn {
  border: 0; background: none; cursor: pointer; padding: 0; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted);
}
.tache-sort-btn:hover { color: var(--teal); }
.tache-sort-btn.is-asc::after { content: " \25B2"; }
.tache-sort-btn.is-desc::after { content: " \25BC"; }
.tache-priorite-picker { position: relative; }
.tache-priorite-btn {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 0; background: none; border-radius: 6px; cursor: pointer;
}
.tache-priorite-btn:hover, .tache-priorite-btn[aria-expanded="true"] { background: var(--surface-soft, #f8f9fb); }
.tache-priorite-aucune  { color: var(--text-muted); }
.tache-priorite-basse   { color: #2563eb; }
.tache-priorite-normale { color: #ca8a04; }
.tache-priorite-haute   { color: #d97706; }
.tache-priorite-urgente { color: #dc2626; }
.tache-priorite-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 140px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column;
}
.tache-priorite-menu[hidden] { display: none; }
.tache-priorite-option {
  display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--text); text-align: left;
}
.tache-priorite-option:hover { background: var(--surface-soft, #f8f9fb); }
.tache-echeance-picker { position: relative; }
.tache-echeance-picker .tache-echeance {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-family: inherit; font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.tache-echeance-picker .tache-echeance:hover { color: var(--teal); }
/* Échéance dépassée -> rouge ; échéance aujourd'hui -> orange (jamais sur une
   tâche déjà faite, cf. macro `_echeance_classe`). */
.tache-echeance.is-echeance-retard { color: #dc2626; }
.tache-echeance.is-echeance-aujourdhui { color: #d97706; }
.tache-echeance-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; display: flex; align-items: center; gap: 6px;
}
.tache-echeance-menu[hidden] { display: none; }
.tache-echeance-menu input[type="date"] { font-size: 12px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 4px; }
.tache-echeance-clear {
  border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 2px 4px;
}
.tache-echeance-clear:hover { color: #dc2626; }
.tache-assigne-picker { position: relative; }
.tache-assigne-btn, .tache-assigne-avatar {
  display: inline-flex; align-items: center;
  border: 0; background: none; cursor: pointer; padding: 0; line-height: 0;
}
.tache-assigne-avatar-sm { width: 22px; height: 22px; font-size: 9px; flex: 0 0 auto; }
.tache-assigne-empty {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--border);
  color: var(--text-muted); font-size: 11px;
}
.tache-assigne-more {
  font-size: 9px; font-weight: 700; color: var(--text-muted); margin-left: 2px; line-height: 1;
}
.tache-assigne-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column;
}
.tache-assigne-menu[hidden] { display: none; }
.tache-assigne-option {
  display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--text); text-align: left;
}
.tache-assigne-option:hover { background: var(--surface-soft, #f8f9fb); }
.tache-assigne-option input[type="checkbox"] { accent-color: var(--teal); }
.tache-check-form { display: contents; }
.tache-check {
  border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1;
  width: 22px; height: 22px; flex: 0 0 auto; color: var(--teal);
}
.tache-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px;
  background: var(--surface-soft, #f8f9fb); color: var(--text-muted); text-transform: uppercase;
}
.tache-badge-jira { background: #efe9fb; color: #5b21b6; }
.tache-badge-redmine { background: #fee2e2; color: #991b1b; }
.tache-ref-col { display: flex; align-items: center; min-width: 0; }
/* Cellule grid "Titre" : le titre lui-même + (optionnel) le badge client
   juste à côté, sur la même ligne — évite d'ajouter une colonne de grille
   dédiée (chaque ligne a son propre `grid-template-columns` fixe, cf. note
   en tête de fichier) puisque cette cellule est déjà la colonne flexible. */
.tache-titre-cell {
  justify-self: stretch; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap;
}
.tache-titre {
  min-width: 0; color: var(--text); text-decoration: none; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.tache-titre:hover { text-decoration: underline; }
/* Poussé à droite de la cellule titre (flexible, `minmax(0,1fr)`) : comme
   cette cellule occupe toujours le même espace entre les colonnes fixes de
   la grille, un `margin-left: auto` aligne le badge sur le même bord droit
   pour toutes les lignes — effet "colonne de tableau" sans ajouter de
   colonne de grille dédiée (cf. note sur `.tache-titre-cell`). */
.tache-client-picker { position: relative; flex: 0 0 auto; margin-left: auto; }
.tache-client-badge {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; background: var(--surface-soft, #f8f9fb);
  color: var(--text-muted); border: 0; cursor: default; white-space: nowrap;
}
button.tache-client-badge { cursor: pointer; }
button.tache-client-badge:hover, button.tache-client-badge[aria-expanded="true"] { color: var(--teal); background: var(--teal-soft); }
/* Client non renseigné : contour pointillé façon "champ vide à compléter",
   pour qu'on remarque que c'est cliquable plutôt qu'une étiquette passive
   (repéré comme source de confusion : "on ne peut pas affecter de client"
   alors que le bouton existait déjà, juste trop discret). */
.tache-client-badge.is-empty {
  background: none; border: 1px dashed var(--border); color: var(--text-muted);
}
button.tache-client-badge.is-empty:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.tache-client-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 160px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column;
}
.tache-client-menu[hidden] { display: none; }
.tache-client-option {
  display: block; width: 100%; border: 0; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--text); text-align: left;
}
.tache-client-option:hover { background: var(--surface-soft, #f8f9fb); }
/* Picker "Équipe" (page /taches uniquement, cf. `equipe_picker` de la macro
   `tache_row`) : transfère une tâche d'équipe vers une autre équipe — même
   style que le picker Client ci-dessus, teinte teal plutôt que neutre pour
   le distinguer au premier coup d'œil (le badge client reste discret par
   défaut, celui-ci porte une info structurante — à quelle équipe appartient
   la tâche — jamais vide contrairement au client). */
.tache-equipe-picker { position: relative; flex: 0 0 auto; }
.tache-equipe-badge {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; background: var(--teal-soft);
  color: var(--teal-dark); border: 0; cursor: default; white-space: nowrap;
}
button.tache-equipe-badge { cursor: pointer; }
button.tache-equipe-badge:hover, button.tache-equipe-badge[aria-expanded="true"] { background: var(--teal); color: #fff; }
.tache-equipe-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 160px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column;
}
.tache-equipe-menu[hidden] { display: none; }
.tache-equipe-option {
  display: block; width: 100%; border: 0; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--text); text-align: left;
}
.tache-equipe-option:hover { background: var(--surface-soft, #f8f9fb); }
.tache-ref {
  font-size: 11px; font-weight: 600; color: var(--teal);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.tache-ref:hover { text-decoration: underline; }
.tache-comment-toggle {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none;
  cursor: pointer; color: var(--text-muted); padding: 2px 4px; border-radius: 4px;
}
.tache-comment-toggle:hover, .tache-comment-toggle.is-on { color: var(--teal); background: var(--teal-soft); }
/* Bulle de commentaires : bleue s'il y en a, verte quand tous sont cochés */
.tache-comment-toggle.has-comments { color: var(--teal); }
.tache-comment-toggle.has-comments:hover { background: var(--teal-soft); }
.tache-comment-toggle.all-done { color: var(--green); }
.tache-comment-toggle.all-done:hover { background: rgba(92, 184, 92, .18); }
.tache-comment-count { font-size: 10px; font-weight: 700; }
.tache-comments[hidden] { display: none; }
.tache-comments {
  padding: 4px 8px 12px 40px; display: flex; flex-direction: column; gap: 8px;
}
.tache-comment-list { display: flex; flex-direction: column; gap: 4px; }
.tache-comment-item { display: flex; flex-direction: column; }
.tache-comment-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tache-comment-row.is-fait .tache-comment-texte { text-decoration: line-through; color: var(--text-muted); }
.tache-comment-texte { flex: 1; min-width: 0; }
.tache-comment-empty { font-size: 12px; color: var(--text-muted); margin: 0; }
/* Détail optionnel d'un commentaire (ex. requête SQL) : masqué par défaut,
   indicateur discret qui se colore dès qu'un détail est renseigné. */
.tache-comment-detail-toggle {
  border: 0; background: none; cursor: pointer; color: var(--text-muted);
  padding: 2px; border-radius: 4px; flex-shrink: 0; display: inline-flex;
}
.tache-comment-detail-toggle:hover { color: var(--teal); background: var(--teal-soft); }
.tache-comment-detail-toggle.has-detail { color: var(--teal); }
.tache-comment-detail[hidden] { display: none; }
.tache-comment-detail { margin: 4px 0 2px 30px; }
.tache-comment-detail-input {
  width: 100%; min-height: 60px; font-size: 12px; font-family: inherit; color: var(--text);
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; resize: vertical;
}
.tache-comment-detail-input:focus { outline: none; border-color: var(--teal); }
.tache-comment-add { display: flex; gap: 8px; }
.tache-comment-add .field-input { flex: 1; font-size: 12px; padding: 5px 10px; }
/* Bref surlignage du bloc visé dans le planning de la semaine, quand on
   clique sur la référence d'une tâche épinglée. */
.gantt-block.is-tache-focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.tache-del-form { display: contents; }
.tache-archives { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--border); }
.tache-archives-titre {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); margin-bottom: 8px;
}
.js-tache-archives-toggle.is-on { background: var(--teal-soft); color: var(--teal); }

/* ════ Saisie des temps Redmine — calendrier mensuel ════ */
.temps-layout { display: flex; gap: 18px; align-items: flex-start; margin: 18px 20px; }
.temps-side { flex: 0 0 290px; display: flex; flex-direction: column; gap: 10px; }
.temps-cal { flex: 1; min-width: 0; }

.temps-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 11px 14px;
}
.temps-card-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; }
.temps-card-subtitle { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.temps-hint { font-size: 11px; color: var(--text-muted); margin: 8px 0 0; }

/* Favoris */
.fav-list { display: flex; flex-direction: column; gap: 6px; }
.fav-item { display: flex; align-items: center; gap: 6px; }
/* Regroupement des favoris par client (repliable) */
.fav-group { display: flex; flex-direction: column; gap: 6px; }
.fav-group-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 2px 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.fav-group-head:hover { color: var(--text); }
.fav-group-chevron { flex-shrink: 0; transition: transform .15s; }
.fav-group.is-collapsed .fav-group-chevron { transform: rotate(-90deg); }
.fav-group-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-group-count { background: var(--bg); border-radius: 10px; padding: 1px 7px; font-size: 10px; }
.fav-group-body { display: flex; flex-direction: column; gap: 6px; }
.fav-group.is-collapsed .fav-group-body { display: none; }
.fav-btn {
  flex: 1; min-width: 0; text-align: center; cursor: pointer; border: none;
  color: #fff; font-size: 12px; font-weight: 600; padding: 8px 10px;
  border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: filter .15s, box-shadow .15s;
}
.fav-btn:hover { filter: brightness(1.05); }
.fav-btn.is-selected { box-shadow: 0 0 0 3px rgba(1, 150, 199, .45); }
.fav-del {
  flex: 0 0 auto; cursor: pointer; border: 1px solid var(--border); background: var(--white);
  color: var(--text-muted); width: 24px; height: 24px; border-radius: 5px; font-size: 15px; line-height: 1;
}
.fav-del:hover { border-color: #ef4444; color: #ef4444; }
.fav-search { margin-top: 10px; position: relative; }
.fav-search input { width: 100%; border: 1px solid var(--border); border-radius: 5px; padding: 7px 9px; font-size: 12px; }
.fav-search input:focus { border-color: var(--teal); outline: none; }
.js-fav-results:not(:empty), .js-create-results:not(:empty) { margin-top: 6px; }

/* Sélection de ticket dans le popover de création */
.create-ticket { margin-bottom: 4px; }
.create-favs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.create-fav { cursor: pointer; border: none; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; }
.create-fav:hover { filter: brightness(1.05); }
.js-create-search { width: 100%; border: 1px solid var(--border); border-radius: 5px; padding: 7px 9px; font-size: 12px; }
.js-create-search:focus { border-color: var(--teal); outline: none; }
.edit-rm-link { font-size: 11px; color: var(--teal); text-decoration: none; font-weight: 600; }
.edit-rm-link:hover { text-decoration: underline; }

/* Légende facturation */
.fact-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.fact-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); }
.fact-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }

/* Répartition (camembert) */
.repart-range { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.repart-range input { border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font-size: 12px; }
.repart-range .btn { padding: 6px 14px; }
.repart-total { text-align: center; font-weight: 600; font-size: 13px; margin: 8px 0; }
.repart-pie {
  width: clamp(96px, 15vh, 170px); height: clamp(96px, 15vh, 170px);
  border-radius: 50%; margin: 0 auto 10px; box-shadow: var(--shadow);
}
.repart-legend { display: flex; flex-direction: column; gap: 4px; }
.repart-leg-item { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.repart-leg-label { flex: 1; }
.repart-leg-val { color: var(--text-muted); font-weight: 600; }

/* Barre d'outils du calendrier */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.cal-nav { display: flex; gap: 6px; align-items: center; }
.cal-nav-btn, .cal-today-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff; border: none; border-radius: 6px;
  font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none;
  height: 34px; padding: 0 10px;
}
.cal-nav-btn { width: 38px; }
.cal-today-btn { font-size: 13px; background: var(--teal-soft); color: var(--teal-dark); }
.cal-nav-btn:hover { background: var(--teal-dark); }
.cal-title { font-size: 18px; font-weight: 700; color: var(--text); }
.cal-tools { display: flex; align-items: center; gap: 14px; }
.cal-views { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.cal-view { padding: 7px 14px; font-size: 13px; cursor: pointer; text-decoration: none; color: var(--text-muted); background: var(--white); }
.cal-view:hover { background: var(--teal-soft); color: var(--teal-dark); }
.cal-view.is-active, .cal-view.is-active:hover { background: var(--teal); color: #fff; font-weight: 600; }

/* Grille calendrier */
.cal-grid { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: #f8fafc; border-bottom: 1px solid var(--border); }
.cal-head-day { padding: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.cal-week:last-child { border-bottom: none; }
.cal-cell { min-height: 118px; border-right: 1px solid var(--border); padding: 4px; cursor: pointer; transition: background .12s; }
.cal-cell:last-child { border-right: none; }
.cal-cell:hover { background: #f6fafd; }
.cal-cell.is-out { background: #fafbfc; }
.cal-cell.is-out .cal-cell-num { color: #cbd5e1; }
.cal-head-day.is-weekend { background: #f0f1f4; }
.cal-cell.is-weekend { background: #f0f1f4; }
.cal-cell.is-today { background: rgba(241, 194, 50, .14); }
/* Complétude de la journée (comme le planning d'équipe) : vert = 8 h pile,
   rouge = dépassement. Placé après is-weekend/is-today pour l'emporter. */
.cal-cell.jour-full { background: #eaf8f1; }
.cal-cell.jour-over { background: #fef2f2; }
.cal-cell-num { text-align: right; font-size: 12px; color: var(--text-muted); padding: 2px 4px; }
.cal-cell.is-today .cal-cell-num {
  display: inline-block; float: right; min-width: 22px; height: 22px; line-height: 22px;
  text-align: center; background: var(--gold); color: #fff; border-radius: 50%; font-weight: 600;
}
/* Masquage des week-ends (toggle) */
.cal-grid.hide-weekend .cal-head,
.cal-grid.hide-weekend .cal-week { grid-template-columns: repeat(5, 1fr); }
.cal-grid.hide-weekend .is-weekend { display: none; }
/* Vue Jour : une seule colonne */
.cal-grid--jour .cal-head, .cal-grid--jour .cal-week { grid-template-columns: 1fr; }

/* Tout le planning tient dans la fenêtre (pas de scroll de page) */
.prod-layout--temps { height: calc(100vh - var(--nav-h)); overflow: hidden; }
/* Masquage de la 1re sidebar (fiche collaborateur) : la colonne favoris récupère la largeur */
.prod-layout--temps.is-aside-hidden .prod-sidebar { display: none; }
.prod-layout--temps.is-aside-hidden .temps-side { flex: 0 0 calc(290px + var(--prod-sidebar-w)); }
.js-temps-aside-toggle svg { transition: transform .15s; }
.prod-layout--temps.is-aside-hidden .js-temps-aside-toggle svg { transform: rotate(180deg); }
.prod-content--temps { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.prod-content--temps .temps-layout { flex: 1; min-height: 0; margin: 14px 16px; overflow: hidden; align-items: stretch; }
.prod-content--temps .temps-side { height: 100%; overflow-y: auto; padding-right: 3px; }
.prod-content--temps .temps-cal { display: flex; flex-direction: column; min-height: 0; }
.prod-content--temps .cal-grid { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.prod-content--temps .cal-head { flex: 0 0 auto; }
.prod-content--temps .cal-week { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
/* La case remplit sa hauteur ; les events se partagent l'espace proportionnellement
   au temps saisi (flex-grow ∝ heures + un « filler » pour les heures non saisies),
   sans scrollbar. */
.prod-content--temps .cal-cell { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* En flex-column, l'élément numéro ne doit pas s'étirer (sinon le rond « aujourd'hui » devient ovale) */
.prod-content--temps .cal-cell-num { align-self: flex-end; }
.prod-content--temps .cal-events { flex: 1 1 auto; min-height: 0; }
.prod-content--temps .cal-event { flex-basis: 0; min-height: 16px; }
.cal-events-filler { flex-shrink: 1; min-height: 0; pointer-events: none; }
.cal-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.cal-events { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; clear: both; }
/* Bloc compact façon planning d'équipe : fond fade + barre latérale = type de
   facturation, badge d'heures, s'ajuste au contenu (aucun scroll). */
.cal-event {
  position: relative;
  padding: 3px 22px 3px 7px; border-radius: 4px;
  border-left: 3px solid #999;
  font-size: 11px; font-weight: 500; line-height: 1.25;
  overflow: hidden; cursor: grab; box-sizing: border-box; flex: 0 0 auto;
}
.cal-event:active { cursor: grabbing; }
.cal-event-h {
  position: absolute; top: 2px; right: 6px; pointer-events: none;
  font-size: 9px; font-weight: 700; opacity: .85;
}
.cal-event-txt {
  min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-event-txt strong { font-weight: 600; }
.cal-event-sub { font-weight: 400; opacity: .8; }
.cal-event-resize {
  position: absolute; top: 0; right: 0; width: 8px; height: 100%;
  cursor: ew-resize; touch-action: none;
}
.cal-event-resize:hover { background: rgba(0, 0, 0, .12); }
.cal-cell.drop-hover { background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--teal); }
.cal-cell.resize-target { background: rgba(241, 194, 50, .18); }
.cal-event.cal-preview { pointer-events: none; opacity: .6; }
.fav-btn { cursor: grab; -webkit-user-drag: element; user-select: none; }
.fav-btn:active { cursor: grabbing; }
body.dnd-active .cal-cell { outline: 1px dashed var(--border); outline-offset: -3px; }
.cal-event-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 3px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
/* Sélecteurs de couleur (favoris + édition) */
.fav-color { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: none; cursor: pointer; }
.edit-color-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.edit-color-row input[type="color"] { width: 40px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }

/* Barre de capacité / charge — logée dans la colonne de gauche (compacte) */
.gantt-cap { cursor: default; padding: 0; }
.gantt-cap-track { height: 6px; background: #eef2f7; border-radius: 5px; overflow: hidden; margin-bottom: 3px; }
.gantt-cap-fill { height: 100%; border-radius: 5px; transition: width .3s; }
.gantt-cap-text { font-size: 11px; font-weight: 600; text-align: left; white-space: nowrap; }

.charge-aide { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.charge-aide summary { cursor: pointer; font-weight: 600; color: var(--teal-dark); }
.charge-aide ul { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 5px; }
.load-ok   { background: #22c55e; color: #15803d; }
.load-high { background: #f59e0b; color: #b45309; }
.load-over { background: #ef4444; color: #b91c1c; }
.gantt-cap-fill.load-ok   { background: #22c55e; }
.gantt-cap-fill.load-high { background: #f59e0b; }
.gantt-cap-fill.load-over { background: #ef4444; }
.gantt-cap-text.load-ok   { background: none; color: #15803d; }
.gantt-cap-text.load-high { background: none; color: #b45309; }
.gantt-cap-text.load-over { background: none; color: #b91c1c; }

/* Pastilles de légende réutilisant les couleurs de barres */
.legend-dot.bloc-jira, .legend-dot.bloc-activite, .legend-dot.bloc-conge,
.legend-dot.bloc-maladie, .legend-dot.bloc-reunion, .legend-dot.bloc-deplacement,
.legend-dot.bloc-action { border-left-width: 3px; border-left-style: solid; }

/* Panneau de saisie manuelle */
.manual-entry {
  flex: 0 0 280px; align-self: stretch;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
.manual-entry-title { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.manual-entry-hint { margin: 0 0 12px; font-size: 12px; color: var(--text-muted); }
.me-types { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.me-type {
  text-align: left; cursor: pointer; padding: 9px 12px; border-radius: 6px;
  border: 1px solid var(--border); border-left-width: 4px;
  font-size: 12px; font-weight: 600; transition: filter .12s, box-shadow .12s;
  -webkit-user-drag: element;   /* Safari : draggable="true" seul ne suffit pas sur un <button> */
}
.me-type:hover { filter: brightness(.97); }
.me-type.is-active { box-shadow: inset 0 0 0 1px currentColor; }

/* Filtre + liste de tickets Jira à glisser (panneau de droite) */
.me-jira-filter {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  padding: 6px 9px; font-size: 12px; font-family: inherit; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.me-jira-filter:focus { outline: none; border-color: var(--teal); }
.me-jira-toggle {
  display: flex; align-items: center; gap: 6px; margin: -2px 0 10px;
  font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none;
}
.me-jira-toggle input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; accent-color: var(--teal); }
.me-jira-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.me-jira-empty { font-size: 12px; color: var(--text-muted); margin: 4px 0; }
/* L'élément grandit en HAUTEUR (le résumé passe à la ligne) ; jamais en largeur */
.me-jira-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; cursor: grab;
  padding: 7px 10px; border: 1px solid var(--border); border-left: 4px solid #8b5cf6;
  border-radius: 6px; background: var(--surface); font-size: 12px;
}
.me-jira-item:hover { filter: brightness(.97); }
.me-jira-item:active { cursor: grabbing; }
.me-jira-item[hidden] { display: none !important; }   /* le filtre doit masquer malgré display:flex */
.me-jira-key { font-weight: 600; color: #5b21b6; flex: 0 0 auto; }
.me-jira-sum {
  flex: 1 1 100%; min-width: 0; color: var(--text-muted);
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.me-form { display: flex; flex-direction: column; gap: 10px; }
.me-field { display: flex; flex-direction: column; gap: 4px; }
.me-field label { font-size: 11px; color: var(--text-muted); }
.me-field input, .me-field select {
  padding: 7px 9px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}
.me-field input:focus, .me-field select:focus { outline: none; border-color: var(--teal); }
.me-field .ad-select { width: 100%; }
.me-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.me-activite { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; }
.me-activite summary { cursor: pointer; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.me-activite .me-form { gap: 10px; }

@media (max-width: 1100px) {
  .planning-layout { flex-direction: column; }
  .manual-entry { flex-basis: auto; width: 100%; }
}

/* Boutons de type draggables */
.js-me-drag { cursor: grab; }
.js-me-drag:active { cursor: grabbing; }

/* Popover d'édition d'une barre du planning */
.planning-pop {
  position: fixed; z-index: 300; width: 340px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 20px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 16px;
}
.planning-pop[hidden] { display: none; }
.planning-pop * { box-sizing: border-box; }
.pop-close {
  position: absolute; top: 6px; right: 10px; border: none; background: none;
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-muted);
}
.pop-close:hover { color: var(--text); }
.pop-form h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.pop-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-muted); margin-bottom: 10px; min-width: 0; }
.pop-field input, .pop-field select {
  width: 100%; min-width: 0; max-width: 100%;
  padding: 7px 9px; font-size: 13px; font-family: inherit; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
}
.pop-field input:focus, .pop-field select:focus { outline: none; border-color: var(--teal); }
.pop-field .ad-select { width: 100%; }
.pop-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.create-heures-hint { font-size: 10px; color: var(--text-muted); font-style: italic; margin-top: 2px; }
.pop-del { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.pop-del-btn { width: 100%; color: #b91c1c; }
.pop-del-btn:hover { background: #fee2e2; }

/* Popover de création : recherche Jira */
#planning-create h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.create-body { margin-bottom: 4px; }

/* Récurrence (type Google Agenda) */
.create-recur { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
/* [hidden] doit toujours masquer, même si .recur-inline impose display:flex */
.create-recur [hidden] { display: none !important; }
.recur-opt { margin-bottom: 10px; }
.recur-inline { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.recur-sub-label { font-size: 11px; color: var(--text-muted); }
.recur-days-btns { display: flex; gap: 5px; margin-top: 5px; }
.recur-day {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer; padding: 0;
}
.recur-day.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }
/* Champs nombre/date/select de la récurrence : même rendu que .pop-field */
.create-recur input[type="number"],
.create-recur input[type="date"],
.create-recur select {
  padding: 7px 9px; font-size: 13px; font-family: inherit; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
}
.create-recur input:focus,
.create-recur select:focus { outline: none; border-color: var(--teal); }
.recur-interval-input { width: 64px; }
.recur-end-input { width: 100%; }
.recur-end .pop-field { margin-bottom: 8px; }
#recur-count-wrap { margin-top: 8px; }
#recur-count-wrap input { width: 72px; }
.jira-results { max-height: 180px; overflow-y: auto; margin-bottom: 8px; }
.jira-result {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; cursor: pointer;
  padding: 7px 9px; font-size: 12px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--white); margin-bottom: 4px;
}
.jira-result:hover { background: var(--teal-soft); border-color: var(--teal); }
.jira-result strong { color: #5b21b6; white-space: nowrap; flex-shrink: 0; }
.jira-result-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.jira-result-info { font-size: 12px; color: var(--text-muted); padding: 4px 2px; }
.jira-chosen {
  font-size: 12px; padding: 8px 10px; margin-bottom: 8px;
  background: #efe9fb; border-radius: 4px; color: #5b21b6;
}
.jira-chosen .jira-icon { vertical-align: middle; margin: 0 4px; }

/* Coche « recherche avancée » dans la popover de création */
.create-jira-adv {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.create-jira-adv input { accent-color: var(--teal); cursor: pointer; }

/* Modale recherche Jira avancée */
.jira-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px;
}
.jira-modal[hidden] { display: none; }
.jira-modal-box {
  background: var(--surface); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  width: 100%; max-width: 1200px; max-height: 90vh; display: flex; flex-direction: column;
}
.jira-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.jira-modal-head h4 { margin: 0; font-size: 15px; }
.jira-modal-search { display: flex; gap: 8px; padding: 14px 18px 6px; flex-shrink: 0; }
.jira-modal-search input {
  flex: 1; padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px;
}
.jira-modal-body { overflow: auto; padding: 8px 18px 18px; }
.jira-modal-results { margin-top: 10px; }
.jira-pick-row:hover { background: var(--teal-soft); }
.is-loading { opacity: .55; transition: opacity .1s; pointer-events: none; }

/* Bandeau discret pendant le calcul en arrière-plan des indicateurs exhaustifs
   (page Tickets) : le tableau et les filtres restent utilisables entre-temps. */
.tickets-indic-spin {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px;
}
.tickets-indic-spin[hidden] { display: none; }   /* sinon display:flex écrase l'attribut hidden */
.tickets-spin-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--teal);
  animation: tickets-spin-rotate .7s linear infinite;
}
@keyframes tickets-spin-rotate { to { transform: rotate(360deg); } }

/* Modale de récap « Mettre à jour Jira » — centrée à l'écran */
.jira-confirm { align-items: center; padding: 16px; }
.jira-confirm-box {
  background: var(--surface); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  width: 100%; max-width: 460px; display: flex; flex-direction: column;
  padding: 18px 20px 16px;
}
.jira-confirm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.jira-confirm-head h4 { margin: 0; font-size: 16px; }
.jira-confirm-head .pop-close { flex-shrink: 0; }
#jira-confirm-key { color: var(--teal); font-weight: 700; }
.jira-confirm-intro { margin: 6px 0 14px; font-size: 13px; color: var(--text-muted); }
.jira-confirm-list { display: flex; flex-direction: column; gap: 8px; }
.jira-confirm-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
}
.jira-confirm-row.is-conflict { border-color: #f3c969; background: #fffaf0; }
.jira-confirm-row input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; }
.jira-confirm-row .jc-bullet { flex-shrink: 0; color: var(--teal); font-weight: 700; line-height: 1.2; }
.jira-confirm-row .jc-label { font-weight: 600; font-size: 13px; display: block; }
.jira-confirm-row .jc-change { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.jira-confirm-row .jc-old { text-decoration: line-through; opacity: .7; }
.jira-confirm-row .jc-new { color: var(--text); font-weight: 600; }
.jira-confirm-row .jc-warn { display: inline-block; margin-top: 3px; margin-left: 8px; font-size: 11px; color: #b45309; }
.jira-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Écran Tickets */
.tickets-topbar { margin: 0 16px 4px; display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
/* Même hauteur pour TOUS les champs/boutons de la barre (retour utilisateur :
   ça ne l'était pas — chaque type de composant a son propre padding par
   défaut ailleurs dans l'app : 6px pour un input/select nu, 9px pour le
   composant `.ad-select__control` qui remplace un <select> en JS, 7px pour
   un `.btn`…). Une hauteur explicite tranche, quel que soit le padding
   interne de chacun (box-sizing: border-box global, donc sans effet de
   bord). Scopé à `.tickets-topbar` : ne touche pas ces mêmes composants
   utilisés ailleurs dans l'app (`.ad-select__control` en particulier, très
   réutilisé). */
.tickets-topbar .field-input,
.tickets-topbar .field-select,
.tickets-topbar .ad-select__control,
.tickets-topbar .tickets-clients-btn,
.tickets-topbar .btn,
.tickets-topbar .tickets-favoris-chip { height: 34px; }
.tickets-sprint-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); max-width: 360px; }
.tickets-sprint-label[hidden] { display: none; }   /* sinon display:flex écrase l'attribut hidden */
/* Combo « Clients » (pages Tickets/Tickets Jira/Tickets Redmine) : remplace
   l'ancien select mono-projet -> plusieurs projets cochés en même temps. */
.tickets-clients-dd { display: flex; flex-direction: column; gap: 4px; position: relative; }
.tickets-clients-label { font-size: 12px; color: var(--text-muted); }
.tickets-clients-btn {
  font-size: 13px; padding: 7px 10px; min-width: 240px; max-width: 420px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Même rythme vertical que les autres groupes du bandeau (`.tickets-clients-dd`,
   `.tickets-sprint-label` : petit label au-dessus, champs en dessous) — sinon,
   avec juste "Filtre" en ligne à côté du select, ce groupe est plus bas que
   ses voisins une fois aligné sur `align-items:flex-end` du bandeau, et
   semblait "décalé" (retour utilisateur). */
.tickets-preset-bar { display: flex; flex-direction: column; gap: 4px; }
.tickets-preset-row { display: flex; align-items: center; gap: 6px; }
.tickets-preset-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tickets-preset-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.tickets-preset-icon-btn { flex-shrink: 0; padding: 7px 9px; }
.tickets-preset-icon-btn[hidden] { display: none; }   /* sinon .btn { display:inline-flex } écrase l'attribut hidden */
/* Bouton "Resynchroniser Excel" : icône seule (le libellé prenait trop de
   place dans le bandeau) — tooltip/aria-label portent le texte complet.
   Icône couleur (façon Google Sheets, cf. capture utilisateur) sur fond
   neutre plutôt qu'un bouton entièrement vert — cohérent avec le reste de la
   barre (gris/blanc), la couleur reste sur l'icône elle-même. */
.tickets-icon-only-btn {
  padding: 0; width: 34px; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
}
.tickets-icon-only-btn:hover { background: var(--surface-soft, #f8f9fb); }
.tickets-icon-only-btn svg { margin: 0 !important; }
/* Bouton "Partager" (toggle avant l'enregistrement d'un nouveau filtre) : état
   actif = fond teal, cohérent avec les autres toggles actifs de l'app. */
#tickets-preset-partage-toggle[aria-pressed="true"],
#tr-preset-partage-toggle[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.ticket-filter-list { display: flex; flex-direction: column; gap: 4px; }
.ticket-filter-empty { font-size: 12px; color: var(--text-muted); padding: 2px 0; }
.ticket-chip {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  padding: 5px 9px; font-size: 12px; color: var(--text);
}
.ticket-chip:hover { border-color: var(--teal); }
.ticket-chip.is-active { background: var(--teal-soft); border-color: var(--teal); font-weight: 600; }
.ticket-chip-count { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ticket-check {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 4px 4px; font-size: 12px; color: var(--text);
}
.ticket-check input { accent-color: var(--teal); }
.ticket-proj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 14px; max-height: 340px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #94a3b8; }
.status-dot.tone-ko { background: #dc2626; }
.status-dot.tone-valide, .status-dot.tone-done { background: #16a34a; }
.status-dot.tone-realized { background: #0d9488; }
.status-dot.tone-progress { background: #2563eb; }
.status-dot.tone-new { background: #94a3b8; }

/* Liste de statuts avec interrupteur (paramètres admin) */
.tickets-options { display: flex; gap: 18px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }

/* Configuration des statuts : badge + segmented control 3 états + ordre */
.statut-cfg-list { display: flex; flex-direction: column; gap: 8px; }
.statut-cfg-row {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.statut-cfg-badge { min-width: 130px; }
.seg-control { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span {
  display: block; padding: 6px 14px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); background: var(--surface); transition: background .12s, color .12s;
  border-right: 1px solid var(--border);
}
.seg:last-child span { border-right: none; }
.seg-principal input:checked + span { background: var(--teal); color: #fff; }
.seg-secondaire input:checked + span { background: var(--gold); color: #3a2f0b; }
.seg-masque input:checked + span { background: #94a3b8; color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: -2px; }
.seg-order { width: 64px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.seg-order[hidden] { display: none; }
.statut-defaut { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); margin-left: auto; cursor: pointer; }
.statut-defaut input { accent-color: var(--teal); }
.statut-couleur { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.statut-couleur input[type=checkbox] { accent-color: var(--teal); }
.statut-col-input { width: 30px; height: 24px; padding: 0; border: 1px solid var(--border, #e5e7eb); border-radius: 5px; background: none; cursor: pointer; }
.statut-col-input:disabled { opacity: .35; cursor: not-allowed; }

.statut-toggle-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;
}
.statut-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.statut-toggle .status-badge { margin-right: auto; }
.statut-toggle .switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.statut-toggle .switch {
  position: relative; flex: 0 0 auto; width: 38px; height: 20px;
  background: #cbd5e1; border-radius: 999px; transition: background .15s;
}
.statut-toggle .switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.statut-toggle .switch-input:checked + .switch { background: var(--teal); }
.statut-toggle .switch-input:checked + .switch::after { transform: translateX(18px); }
.statut-toggle .switch-input:focus-visible + .switch { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── Paramètres > Événements ── */
.evt-jira-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px;
}
.evt-jira-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.evt-jira-name {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Interrupteur (swipe) générique */
.switch { position: relative; display: inline-block; flex: 0 0 auto; width: 38px; height: 20px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .15s;
}
.switch-slider::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.switch input:checked + .switch-slider { background: var(--teal); }
.switch input:checked + .switch-slider::after { transform: translateX(18px); }

.evt-list { display: flex; flex-direction: column; gap: 8px; max-width: 780px; }
.evt-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.evt-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; }
.evt-row .evt-nom { flex: 1 1 110px; min-width: 110px; }
.evt-row .evt-col { flex: 0 0 auto; width: 34px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; background: var(--surface); }
.evt-rec { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.evt-del {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: #dc2626; cursor: pointer;
}
.evt-del:hover { background: #fef2f2; border-color: #fecaca; }

/* ════════════════════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════════════════════ */
.login-body {
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.login-wrap {
  width: 100%; max-width: 420px;
  padding: 24px 16px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  overflow: hidden;
}
.login-header {
  background: var(--teal);
  padding: 28px 32px 22px;
  text-align: center;
}
.login-brand {
  font-size: 26px; font-weight: 800;
  letter-spacing: .12em; color: var(--white);
  margin-bottom: 6px;
}
.login-brand .brand-a { color: var(--gold); }
.login-logo { height: 44px; width: auto; display: inline-block; }
.login-subtitle {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.75); letter-spacing: .04em;
  text-transform: uppercase;
}
.login-form {
  padding: 28px 32px 32px;
  display: flex; flex-direction: column; gap: 0;
}
.btn-login {
  margin-top: 24px;
  background: var(--gold); color: var(--white);
  border: none; border-radius: var(--radius);
  padding: 12px 20px; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px;
  font-family: inherit; width: 100%;
  transition: background .2s;
}
.btn-login:hover { background: var(--gold-hover); }

/* ── SSO Google (page de connexion) ── */
.login-sso { padding: 28px 32px 0; }
.btn-login-google {
  margin-top: 0;
  background: var(--white); color: var(--text);
  border: 1px solid var(--border);
  text-transform: none; letter-spacing: normal;
  font-size: 14px; text-decoration: none;
  gap: 10px;
}
.btn-login-google:hover { background: #f2f4f7; border-color: #cfd4dc; }

/* Repli « Connexion par mot de passe » — porte de secours, volontairement
   discrète mais toujours atteignable. Le <form> qu'il contient porte déjà son
   propre padding (.login-form), d'où l'absence de padding horizontal ici. */
.login-local { padding-top: 20px; }
.login-local > summary {
  list-style: none; cursor: pointer;
  padding: 0 32px 4px; text-align: center;
  font-size: 12px; color: var(--text-muted);
  transition: color .2s;
}
.login-local > summary::-webkit-details-marker { display: none; }
.login-local > summary:hover { color: var(--teal-dark); }
.login-local > summary::after { content: " ▾"; font-size: 10px; }
.login-local[open] > summary::after { content: " ▴"; }
.login-local[open] > summary { color: var(--text); }
.login-local .login-form { padding-top: 8px; }

/* ════ Rôles (badges + navbar) ════ */
.user-role-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 10px;
  display: inline-block;
}
.user-role-badge.role-admin       { background: rgba(255,255,255,.25); color: var(--white); }
.user-role-badge.role-daf         { background: rgba(255,255,255,.20); color: rgba(255,255,255,.9); }
.user-role-badge.role-president   { background: rgba(255,255,255,.20); color: rgba(255,255,255,.9); }
.user-role-badge.role-chef_equipe { background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); }
.user-role-badge.role-employe     { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.user-role-badge.role-externe     { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }

.role-badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.role-badge.role-admin       { background: #e0f2f9; color: #017aa3; }
.role-badge.role-daf         { background: #d1fae5; color: #047857; }
.role-badge.role-president   { background: #fef3c7; color: #b45309; }
.role-badge.role-chef_equipe { background: #f3e8ff; color: #6d28d9; }
.role-badge.role-employe     { background: #fff7ed; color: #c2410c; }
.role-badge.role-externe     { background: #e5e7eb; color: #4b5563; }

/* Panneau d'assignation Directeur financier (Paramètres → Rôles) */
.daf-panel { margin-top: 26px; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); }
.daf-panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.daf-panel-hint { font-size: 12.5px; color: var(--text-muted); flex: 1; min-width: 240px; }
.daf-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.daf-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--bg); border-radius: 8px; font-size: 13px; }
.daf-empty { font-size: 13px; color: var(--text-muted); font-style: italic; margin: 0 0 14px; }
.daf-grant { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 14px; }

/* ════ Paramètres ════ */
.param-role-form {
  display: flex; align-items: center; gap: 8px;
}
.param-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  overflow: hidden; flex-shrink: 0;
}
.param-avatar img { width: 100%; height: 100%; object-fit: cover; }
.param-avatar.has-photo { background: none; }

/* ════ Matrice de permissions ════ */
.perm-matrix th.perm-col,
.perm-matrix td.perm-col {
  text-align: center; width: 130px;
}
.perm-group-row td {
  background: var(--bg);
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 8px 14px;
}
.perm-label { padding-left: 28px !important; font-size: 13px; }
.perm-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: #dcfce7; border-radius: 50%;
  color: #16a34a;
}
.perm-checkbox {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
}
.perm-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.perm-check-ui {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-radius: 4px; background: var(--white);
  transition: background .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center;
}
.perm-checkbox input:checked + .perm-check-ui {
  background: var(--teal); border-color: var(--teal);
}
.perm-checkbox input:checked + .perm-check-ui::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}
.perm-checkbox:hover .perm-check-ui { border-color: var(--teal); }

/* ════════════════════════════════════════════════════════════════
   PAGE ACTIVITÉS — layout pleine largeur
   ════════════════════════════════════════════════════════════════ */
.act-page {
  padding: 16px 24px 32px;
  max-width: 100%;
}

/* ── Barre de contrôle (semaine + filtres) ── */
.act-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.act-toolbar-week-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  padding: 0 4px;
}
.semaine-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
  flex-shrink: 0;
}
.semaine-nav-btn:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}
.act-today-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.act-today-btn:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}
.act-toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}
.act-filter-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}
.act-filter-search {
  position: relative;
  display: flex;
  align-items: center;
}
.act-filter-icon {
  position: absolute;
  left: 8px;
  color: var(--text-muted);
  pointer-events: none;
}
.act-filter-input {
  padding: 5px 10px 5px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  width: 200px;
  transition: border-color .15s, background .15s;
}
.act-filter-input:focus {
  border-color: var(--teal);
  background: var(--white);
}
.act-filter-select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--bg);
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.act-filter-select:focus { border-color: var(--teal); }
.act-filter-select.is-active {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-weight: 600;
}
.act-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.act-filter-clear:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* ── Sections de contenu ── */
.act-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.semaine-table-wrapper {
  margin-bottom: 8px;
  overflow-x: auto;
}
/* La grille (colonnes en `fr`) déborde parfois de 1-2px par arrondi ->
   ascenseur horizontal disgracieux pour un débordement invisible/inutile. */
#plan-gantt-wrapper.semaine-table-wrapper {
  overflow-x: hidden !important;
  scrollbar-width: none;
}
#plan-gantt-wrapper.semaine-table-wrapper::-webkit-scrollbar { display: none; height: 0; }

/* ── Tableau planning ── */
.planning-week-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.planning-week-table thead th {
  background: var(--thead);
  padding: 9px 12px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.planning-week-table thead th:last-child { border-right: none; }
.planning-week-table td { border-right: 1px solid var(--border); }
.planning-week-table td:last-child { border-right: none; }
.pwt-col-membre { width: 180px; min-width: 180px; }
.pwt-col-jour   { min-width: 130px; }
.pwt-col-jour.is-today {
  background: #fdf8e3;
  box-shadow: inset 0 -3px 0 var(--gold);
}

/* Lignes membres */
.planning-week-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.planning-week-table tbody tr:last-child { border-bottom: none; }
.planning-week-table tbody tr:hover { background: #f9fafb; }
.planning-week-table td { padding: 8px 10px; vertical-align: top; }
.pwt-cell.is-today { background: #fffdf2; }

/* Cellule membre */
.pwt-membre-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px !important;
  white-space: nowrap;
}
.pwt-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.pwt-membre-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.pwt-membre-info strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwt-membre-info small {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Puces d'activité */
.act-chip {
  display: block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--teal-soft);
  color: var(--teal-dark);
  text-decoration: none;
  transition: opacity .15s;
  cursor: pointer;
}
.act-chip:last-child { margin-bottom: 0; }
.act-chip:hover { opacity: .78; }
.act-chip-code {
  font-family: monospace;
  font-size: 10px;
  opacity: .7;
  margin-right: 4px;
}
.act-chip--planifié   { background: #f3e8ff; color: #6d28d9; }
.act-chip--en-cours   { background: #dbeafe; color: #1d4ed8; }
.act-chip--en-attente { background: #fef9c3; color: #92400e; }
.act-chip--terminé    { background: #dcfce7; color: #166534; }

/* ════════════════════════════════════════════════════════════════
   TABLEAU JIRA RÉCENTS — page Activités
   ════════════════════════════════════════════════════════════════ */
.jira-time-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.jira-time-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.jira-valeur-input {
  width: 68px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.jira-valeur-input:focus { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-soft); }
.jira-unite-select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 30px 8px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  /* chevron personnalisé pour un rendu homogène entre navigateurs */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.jira-unite-select:focus { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-soft); }
.jira-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.jira-refresh-btn:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-dark);
}
.jira-refresh-btn:disabled { opacity: .5; cursor: not-allowed; }
.jira-date-depuis {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}
.jira-date-depuis strong { color: var(--text); }

/* Tableau */
.jira-table { width: 100%; }
.jira-key-link {
  color: var(--teal-dark);
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
}
.jira-key-link:hover { text-decoration: underline; }

.jira-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 3px;
  background: #e0f2f9;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}

.jira-statut-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: #e5e7eb;
  color: #475569;
  white-space: nowrap;
}
.jira-cat-new      { background: #e0f2f9; color: #017aa3; }
.jira-cat-progress { background: #dbeafe; color: #1d4ed8; }
.jira-cat-done     { background: #dcfce7; color: #15803d; }

.jira-role-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 3px;
  white-space: nowrap;
  background: #f3e8ff;
  color: #6d28d9;
}
.jira-role-assigné  { background: #fef9c3; color: #92400e; }
.jira-role-créateur { background: #f3e8ff; color: #6d28d9; }

.jira-updated {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.jira-erreur { color: #b91c1c !important; }

/* ── Sélecteur de temps OpenSearch-style (popover) ── */
.jdt-picker { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 14px; }

.jdt-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12px; font-family: inherit;
  background: var(--white); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  box-shadow: var(--shadow);
}
.jdt-trigger:hover { border-color: var(--teal); }
.jdt-trigger[aria-expanded="true"] { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-soft); }
.jdt-chevron { transition: transform .15s; flex-shrink: 0; }
.jdt-trigger[aria-expanded="true"] .jdt-chevron { transform: rotate(180deg); }

.jdt-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 200; min-width: 280px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
}
.jdt-tabs {
  display: flex; border-bottom: 1px solid var(--border);
}
.jdt-tab {
  flex: 1; padding: 8px 12px; font-size: 12px; font-weight: 500;
  border: none; background: var(--white); cursor: pointer;
  color: var(--text-muted); transition: background .12s, color .12s;
  font-family: inherit;
}
.jdt-tab + .jdt-tab { border-left: 1px solid var(--border); }
.jdt-tab.active { background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; }

.jdt-panel { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.jdt-panel[hidden] { display: none; }  /* respecte l'attribut hidden malgré le display:flex ci-dessus */
.jdt-inputs { display: flex; gap: 8px; align-items: center; }
.jdt-inputs .jira-valeur-input { width: 72px; flex-shrink: 0; }
.jdt-inputs .jira-unite-select { flex: 1; }
.jdt-date-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.jdt-preview { font-size: 12px; color: var(--text-muted); padding-top: 6px; border-top: 1px solid var(--border); }
.jdt-preview strong { color: var(--text); font-weight: 600; }
.jdt-footer { display: flex; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg); }

.jira-date-input {
  padding: 5px 8px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 12px; font-family: inherit;
  color: var(--text); background: var(--white);
  outline: none; transition: border-color .15s;
}
.jira-date-input:focus { border-color: var(--teal); }

/* ════ Tableau Tickets (en-tête groupé Jira / Redmine / Excel) ════ */
.tickets-table { table-layout: auto; }
.tickets-table thead th {
  text-align: center; vertical-align: middle; white-space: nowrap;
}
/* En-tête sur 2 lignes (groupes + sous-colonnes) : le <thead> ENTIER (les 2
   lignes ensemble) est sticky, pas chaque ligne séparément avec un `top`
   calculé (1ʳᵉ ligne à `top:0`, 2ᵉ à `top:<hauteur de la 1ʳᵉ>`, mesurée en
   JS). Cette 2ᵉ approche fonctionnait géométriquement (0px d'écart mesuré,
   fonds opaques) mais laissait passer un artefact de composition Chrome
   (image furtive d'une ligne défilée dans la « couture » entre les 2 <tr>
   sticky, sur un tableau à beaucoup de lignes — page Suivi ~350 lignes,
   retour utilisateur avec capture d'écran) : deux calques sticky indépendants
   à coordonner, contre un seul avec le <thead> sticky — plus simple et sans
   couture par construction. `position:sticky` sur `thead` est supporté par
   les navigateurs modernes (Chrome 91+, Firefox, Safari 16.4+).
   `--tk-thead1-h` (mesurée par `majHauteurEntete()`, table.js) n'est donc
   plus utilisée mais inoffensive à laisser en place. */
.tickets-table thead { position: sticky; top: 0; z-index: 2; background: var(--white); }
.tickets-table thead th { position: static; }

/* Zone de tableau à hauteur bornée : seule la liste défile, l'en-tête colonnes
   (et tout ce qui est au-dessus : filtres, cartes de synthèse…) reste visible. */
.custom-table-scroll { max-height: 60vh; overflow-y: auto; overflow-x: auto; }
.tickets-table thead th.tk-grp {
  border-left: 1px solid var(--border, #e5e7eb);
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #6b7280;
}
.tickets-table .tk-subhead th {
  font-size: 11px; font-weight: 600; color: #9ca3af; padding-top: 2px; padding-bottom: 6px;
  border-left: 1px solid #f1f3f5;
}
.tickets-table .th-prio { width: 32px; }
.tickets-table td { vertical-align: middle; }
.tickets-table .td-prio, .tickets-table .td-affect { text-align: center; }
.tickets-table .td-affect.js-avatar-pick { cursor: pointer; }
.tickets-table .td-affect.js-avatar-pick:hover .tk-ava { outline: 2px solid var(--teal-soft); }
.tickets-table .td-statut-jira.js-statut-pick { cursor: pointer; }
.tickets-table .td-statut-jira.js-statut-pick:hover .status-badge { outline: 2px solid var(--teal-soft); }
.tickets-table .td-prio .jira-icon { margin: 0; }
.tickets-table .td-dev-jira {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-muted { color: #c0c4cc; }

/* Pastille numéro Redmine */
.rm-pill {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  background: var(--teal-soft); color: var(--teal-dark);
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.rm-pill:hover { background: var(--teal); color: var(--white); }
.btn-mini {
  display: inline-block; padding: 2px 10px; border-radius: 20px; border: 1px solid var(--teal);
  background: none; color: var(--teal-dark); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.btn-mini:hover { background: var(--teal-soft); }
.btn-mini:disabled { opacity: .5; cursor: default; }

/* Avatar mini de l'assigné Jira */
.tk-ava {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  background: #2f3b52; color: #fff; font-size: 10px; font-weight: 700;
}
.tk-ava img { width: 100%; height: 100%; object-fit: cover; }
.tk-ava-empty { background: #eef0f3; color: #b0b6c0; font-weight: 400; }

/* Dates empilées (début / échéance) */
.tk-dates { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.tk-date { font-size: 12px; white-space: nowrap; }
.tk-date::before { content: "📅 "; opacity: .6; }
/* Cohérence des dates Excel vs Jira (ligne par ligne : début / échéance) */
.tk-date-row { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tk-date-row.is-diff .tk-date { color: #b45309; font-weight: 600; }
.tk-date-row.is-ok   .tk-date { color: #15803d; }
.tk-statut-row { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* Flèche « écrire la valeur (date Excel / statut Redmine) dans Jira » */
.tk-date-push {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  color: var(--teal); display: inline-flex; align-items: center; line-height: 1;
}
.tk-date-push svg { display: block; }
.tk-date-push:hover { color: var(--teal-dark); transform: scale(1.15); }
.tk-date-push:disabled { opacity: .4; cursor: default; }

/* ═══ Tableau de bord financier (DAF) ═══════════════════════════════════════ */
.fin-wrap { padding: 22px 26px 40px; max-width: 1400px; margin: 0 auto; --fin-track: #eceef1; }
.fin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.fin-title { font-size: 22px; font-weight: 600; margin: 0; color: var(--text); }
.fin-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; max-width: 620px; }
.fin-period { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fin-presets { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fin-preset { border: 0; background: var(--surface); padding: 7px 12px; font-size: 12.5px; cursor: pointer; color: var(--text-muted); border-right: 1px solid var(--border); }
.fin-preset:last-child { border-right: 0; }
.fin-preset:hover { background: var(--teal-soft); color: var(--teal-dark); }
.fin-preset.is-on { background: var(--teal); color: #fff; }
.fin-date { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.fin-date input { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font-size: 13px; font-family: inherit; color: var(--text); }
.fin-apply { border: 0; background: var(--gold); color: #4a3a05; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.fin-apply:hover { background: var(--gold-hover); }
.fin-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }

.fin-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 18px; }
.fin-filters-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.fin-filter { position: relative; }
.fin-filter-btn { border: 1px solid var(--border); background: var(--bg); border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; color: var(--text); }
.fin-filter.is-active .fin-filter-btn { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-dark); font-weight: 500; }
.fin-cnt { color: var(--teal-dark); font-weight: 600; }
.fin-filter-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 30; min-width: 210px; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.13); padding: 6px; }
.fin-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; border-radius: 6px; cursor: pointer; color: var(--text); }
.fin-opt:hover { background: var(--bg); }
.fin-reset { border: 0; background: none; color: var(--teal-dark); font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.fin-unit-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fin-unit { border: 0; background: var(--surface); padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--text-muted); }
.fin-unit.is-on { background: var(--teal); color: #fff; }
.fin-loading { font-size: 12.5px; color: var(--text-muted); font-style: italic; }

.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.fin-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.fin-kpi-val { font-size: 26px; font-weight: 700; color: var(--teal-dark); line-height: 1.1; }
.fin-kpi-val small { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.fin-kpi-lbl { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

.fin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.fin-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.fin-card-wide { grid-column: 1 / -1; }
.fin-card-title { font-size: 14px; font-weight: 600; margin: 0 0 14px; color: var(--text); }
.fin-empty { color: var(--text-muted); font-style: italic; font-size: 13px; padding: 12px 0; }

.fin-donut-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fin-donut { width: 170px; height: 170px; flex-shrink: 0; }
.fin-donut-total { font-size: 24px; font-weight: 700; fill: var(--text); }
.fin-donut-unit { font-size: 11px; fill: var(--text-muted); }
.fin-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.fin-legend-col { flex-direction: column; flex: 1; margin-top: 0; gap: 8px; }
.fin-leg-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); }
.fin-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.fin-leg-lbl { color: var(--text); }
.fin-leg-val { color: var(--text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }

.fin-bars { display: flex; flex-direction: column; gap: 9px; }
.fin-bars-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 9px 26px; }
.fin-bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; }
.fin-bar-lbl { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-bar-track { background: var(--fin-track); border-radius: 6px; height: 15px; overflow: hidden; }
.fin-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-dark)); border-radius: 6px; }
.fin-bar-val { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.fin-serie { overflow-x: auto; position: relative; }
.fin-serie-svg { display: block; height: 240px; max-width: none; }
.fin-axis { font-size: 9px; fill: var(--text-muted); }
.fin-seg { transition: opacity .12s; cursor: pointer; }
.fin-serie-svg:hover .fin-seg { opacity: .5; }
.fin-serie-svg .fin-seg:hover { opacity: 1; }
.fin-tip { position: absolute; z-index: 40; pointer-events: none; background: #1a1d23; color: #fff; padding: 7px 10px; border-radius: 8px; font-size: 12px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.28); white-space: nowrap; }
.fin-tip b { display: block; font-weight: 600; font-size: 12px; margin-bottom: 1px; }
.fin-tip-sub { display: block; color: #9ca3af; font-size: 11px; margin-top: 2px; }

.fin-table-wrap { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-table th, .fin-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.fin-table th { background: var(--thead); font-weight: 600; color: var(--text); cursor: pointer; }
.fin-table td.num, .fin-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-table tbody tr:hover { background: var(--bg); }

.fin-code-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.fin-cfg-h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.temps-cfg-table .temps-day-col { text-align: center; width: 56px; }
.temps-cfg-table th.temps-day-col { color: var(--text-muted); font-size: 12px; }
.temps-cfg-table .perm-checkbox { justify-content: center; }

/* Éléments cliquables (KPI, segments, barres, lignes) -> popup tickets */
.fin-kpi.is-clickable, .fin-leg-item.is-clickable, .fin-bar-row.is-clickable,
.fin-table tbody tr.is-clickable { cursor: pointer; }
.fin-seg.is-clickable { cursor: pointer; }
.fin-kpi.is-clickable { transition: box-shadow .12s, border-color .12s; }
.fin-kpi.is-clickable:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(1,150,199,.12); }
.fin-leg-item.is-clickable:hover { text-decoration: underline; }
.fin-bar-row.is-clickable:hover .fin-bar-lbl { color: var(--teal-dark); font-weight: 600; }
.fin-name-link { cursor: pointer; }
.fin-name-link:hover { color: var(--teal-dark); text-decoration: underline; font-weight: 600; }
.fin-over-ico { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-right: 6px; border-radius: 50%; background: #dc2626; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; flex-shrink: 0; vertical-align: middle; box-shadow: 0 0 0 2px #fee2e2; animation: fin-over-pulse 1.8s ease-in-out infinite; }
@keyframes fin-over-pulse { 0%,100% { box-shadow: 0 0 0 2px #fee2e2; } 50% { box-shadow: 0 0 0 4px #fecaca; } }
@media (prefers-reduced-motion: reduce) { .fin-over-ico { animation: none; } }

/* Planning d'une personne dans la popup finance */
.fin-plan-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.fin-plan-titre { font-size: 15px; font-weight: 600; color: var(--text); min-width: 160px; text-align: center; }
.fin-plan-nav { border: 1px solid var(--border); background: var(--surface); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text-muted); }
.fin-plan-nav:hover { background: var(--teal-soft); color: var(--teal-dark); }
.fin-modal-body .cal-event--ro { cursor: default; }
.fin-modal-body .cal-cell { cursor: default; }
.fin-table tbody tr.is-clickable:hover { background: var(--teal-soft); }

/* Popup liste des tickets */
.fin-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.fin-modal[hidden] { display: none; }
.fin-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.5); }
.fin-modal-box { position: relative; background: var(--surface); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: min(1000px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.fin-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--border); }
.fin-modal-title { font-size: 17px; font-weight: 600; margin: 0; color: var(--text); }
.fin-modal-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.fin-modal-close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.fin-modal-close:hover { color: var(--text); }
.fin-modal-body { overflow: auto; padding: 8px 22px 20px; }
/* Modale « Nouvelle tâche » : contenu court et fixe, mais la recherche
   Jira/Redmine ouvre un menu déroulant qui doit pouvoir dépasser le cadre du
   formulaire (sinon `overflow: auto` sur .fin-modal-body le tronque). */
#tache-modal .fin-modal-body { overflow: visible; }
.fin-modal-body .data-table { font-size: 13px; }

/* Bouton « œil » (voir le détail) dans les cellules de tickets */
.js-ticket-eye {
  border: 0; background: none; cursor: pointer; padding: 2px;
  margin-left: 5px; color: var(--text-muted); vertical-align: middle;
  line-height: 0; border-radius: 5px; opacity: .55; transition: opacity .12s, color .12s, background .12s;
}
.js-ticket-eye:hover { opacity: 1; color: var(--teal); background: var(--teal-soft); }
.js-ticket-eye:focus-visible { outline: none; opacity: 1; color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }

/* Popup détail ticket (contenu) */
.tk-detail-modal .fin-modal-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-detail-modal .fin-modal-title a { color: var(--teal-dark); text-decoration: none; }
.tk-detail-modal .fin-modal-title a:hover { text-decoration: underline; }
.tk-detail-src {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 5px; color: #fff;
}
.tk-detail-src-jira { background: var(--teal); }
.tk-detail-src-redmine { background: #b8412e; }
.tk-detail-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px; margin: 6px 0 14px;
}
.tk-detail-field { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.tk-detail-label { color: var(--text-muted); flex: 0 0 96px; }
.tk-detail-value { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.tk-detail-icon-value { display: inline-flex; align-items: center; gap: 6px; }
.tk-detail-avatar { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; object-fit: cover; }
.tk-detail-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.tk-detail-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin: 0 0 8px; font-weight: 600; }
.tk-detail-text { font-size: 13px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
/* Champ "Documents" de la grille meta (Spécification / Cahier de recette /
   Doc paramétrage, champs Jira URL customfield_10431/10497/10530) : icônes
   seules (pas de bouton texte), une par type de document, libellé en
   tooltip (`title`). Taille proche d'une ligne de texte normale (22px, pas
   30px) : une icône plus grande que les autres champs de la grille force
   la ligne de grille entière (row auto-height = plus grand item de la
   ligne) à s'agrandir, ce qui décale visuellement le champ voisin de la
   colonne opposée sur cette même ligne (espace en trop au-dessus du champ
   suivant, ex. "Modifié le" quand Documents partage sa ligne avec "Créé
   le" plutôt qu'avec elle). */
.tk-detail-docs { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.tk-detail-doc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); transition: border-color .15s ease, background .15s ease;
}
.tk-detail-doc-icon:hover { border-color: var(--teal); background: var(--teal-soft); }
/* La description Jira est du vrai HTML (rendu par Jira, nettoyé côté serveur
   — cf. `_jira_description_html`, app.py) : espacer paragraphes/listes,
   contenir les images/tableaux dans la largeur de la popup, lisibilité des
   blocs de code. Les commentaires restent du texte brut (`<br>` seulement),
   ces règles ne les affectent pas puisqu'elles ciblent des balises que
   `multi()` ne produit jamais. */
.tk-detail-text p { margin: 0 0 10px; }
.tk-detail-text p:last-child { margin-bottom: 0; }
.tk-detail-text ul, .tk-detail-text ol { margin: 0 0 10px; padding-left: 22px; }
.tk-detail-text li { margin-bottom: 3px; }
.tk-detail-text img { max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; display: block; }
.tk-detail-text pre {
  background: var(--surface-soft, #f8f9fb); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; overflow-x: auto; font-size: 12px; margin: 0 0 10px;
}
.tk-detail-text code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; }
.tk-detail-text pre code { background: none; padding: 0; }
.tk-detail-text :not(pre) > code {
  background: var(--surface-soft, #f8f9fb); padding: 1px 5px; border-radius: 4px;
}
.tk-detail-text blockquote {
  border-left: 3px solid var(--border); margin: 0 0 10px; padding: 2px 0 2px 12px; color: var(--text-muted);
}
.tk-detail-text table { border-collapse: collapse; margin: 0 0 10px; max-width: 100%; display: block; overflow-x: auto; }
.tk-detail-text th, .tk-detail-text td { border: 1px solid var(--border); padding: 4px 8px; font-size: 12.5px; }
.tk-detail-text a { color: var(--teal); }
/* Un vrai contour par commentaire (pas juste un trait gauche + une teinte à
   peine visible, cf. capture utilisateur : ça se lisait comme un seul bloc
   continu) : chaque commentaire est sa propre "carte", séparée des voisines
   par une vraie marge — la teinte alternée n'est qu'un renfort visuel, pas
   l'unique signal de séparation. */
.tk-detail-comment {
  border: 1px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 10px;
  background: var(--surface);
}
.tk-detail-comment:nth-child(even) { background: var(--surface-soft, #eef1f4); }
.tk-detail-comment-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  margin-bottom: 3px; font-size: 12.5px;
}
.tk-detail-comment-head span { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 560px) { .tk-detail-grid { grid-template-columns: 1fr; } }
/* Formulaire de création d'un ticket Redmine depuis un ticket Jira */
.rm-create-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
}
.rm-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-muted); }
.rm-field--full { grid-column: 1 / -1; }
.rm-form-msg { font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius); background: #fef2f2; color: #b91c1c; }
.rm-checkbox-group {
  border: 1px solid var(--border); border-radius: var(--radius);
  max-height: 130px; overflow-y: auto; padding: 6px 10px;
  display: flex; flex-direction: column; gap: 4px; background: var(--surface);
}
.rm-checkbox-group label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); font-weight: 400; }
.rm-checkbox-group label.js-assignee-opt { padding: 4px 6px; border-radius: 5px; }
.rm-checkbox-group label.js-assignee-opt:hover { background: var(--teal-soft); }
.rm-checkbox-group label.js-assignee-opt.is-selected { background: var(--teal-soft); font-weight: 600; }
.rm-checkbox-group label.js-assignee-opt .tk-ava { color: #fff; font-size: 10.5px; }
.rm-checkbox-group label.js-statut-opt { padding: 6px; border-radius: 5px; cursor: pointer; }
.rm-checkbox-group label.js-statut-opt:hover { background: var(--teal-soft); }

/* Constructeur d'ordre de workflow (Paramètres -> Statuts Redmine -> Jira) */
.wf-builder { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.wf-builder-title { font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.wf-builder-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wf-pool {
  display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; background: var(--surface);
}
.wf-pool label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 400; color: var(--text); }
.wf-ordered {
  display: flex; flex-direction: column; gap: 4px; min-height: 40px;
  border: 1px dashed var(--border); border-radius: var(--radius); padding: 8px 10px;
}
.wf-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px;
  background: var(--teal-soft); color: var(--teal-dark); font-size: 12.5px; font-weight: 500;
  cursor: grab;
}
.wf-item.is-dragging { opacity: .5; }
.wf-item-handle { color: var(--text-muted); font-size: 13px; }
.fin-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.fin-th-sort:hover { color: var(--teal-dark); }
.fin-sort-ar { color: var(--teal-dark); font-size: 10px; }
.fin-kpi-ns .fin-kpi-val { color: #94a3b8; }
.fin-kpi-ns { border-style: dashed; }

/* ════ Occupation de l'équipe (vue macro DAF / Président) ════ */
.occ-wrap { padding: 22px 26px 40px; max-width: 1400px; margin: 0 auto; }
.occ-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.occ-title { font-size: 22px; font-weight: 600; margin: 0; color: var(--text); }
.occ-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
.occ-nav { display: flex; align-items: center; gap: 8px; }
.occ-vue-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-right: 6px; }
.occ-vue-btn { border: 0; background: var(--surface); padding: 7px 14px; font-size: 12.5px; cursor: pointer; color: var(--text-muted); text-decoration: none; border-right: 1px solid var(--border); }
.occ-vue-btn:last-child { border-right: 0; }
.occ-vue-btn:hover { background: var(--teal-soft); color: var(--teal-dark); }
.occ-vue-btn.is-on { background: var(--teal); color: #fff; }

.occ-legende { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; font-size: 12px; color: var(--text-muted); }
.occ-legende-item { display: inline-flex; align-items: center; gap: 6px; }
.occ-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.occ-table-wrapper { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.occ-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.occ-table th, .occ-table td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.occ-table thead th { background: var(--surface); color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--border); }
.occ-th-membre, .occ-td-membre { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 3; box-shadow: 1px 0 0 var(--border); }
.occ-membre-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); min-width: 190px; text-align: left; }
.occ-membre-link > span { text-align: left; }
.occ-membre-link strong { display: block; font-size: 13px; text-align: left; }
.occ-membre-poste { display: block; font-size: 11.5px; color: var(--text-muted); text-align: left; }
.occ-cell { font-weight: 600; color: #fff; min-width: 74px; }

.occ-0 { background: #e2e4e8; color: #6b7280; }
.occ-1 { background: #60a5fa; }
.occ-2 { background: #22c55e; }
.occ-3 { background: #f59e0b; }
.occ-4 { background: #ef4444; }
.occ-cell.occ-0 { color: #6b7280; }
.occ-groupe-row td {
  background: var(--bg, #f6f7f9); font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em;
  text-align: left; cursor: pointer; user-select: none;
}
.occ-groupe-row:hover td { background: var(--teal-soft); }
.occ-groupe-head { display: flex; align-items: center; gap: 7px; justify-content: flex-start; }
.occ-groupe-chevron { flex-shrink: 0; transition: transform .15s; }
.occ-groupe-row.is-repliee .occ-groupe-chevron { transform: rotate(-90deg); }
.occ-groupe-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 860px) { .fin-grid { grid-template-columns: 1fr; } }

/* ════ Pôles de l'entreprise (organigramme) ════ */
.pole-new-form { display: flex; align-items: center; gap: 8px; }
.pole-color-input { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; background: none; }

.pole-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 4px; }
.pole-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; border-top: 3px solid var(--pole-color, var(--teal));
}
.pole-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pole-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pole-card-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--text); flex: 1; }
.pole-card-actions { display: flex; align-items: center; gap: 2px; }
.pole-card-actions .icon-btn { width: 24px; height: 24px; }

.pole-edit-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; padding: 10px; background: var(--bg, #f6f7f9); border-radius: var(--radius); }

.pole-desc { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.pole-responsable { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px; background: var(--teal-soft); border-radius: var(--radius); }
.pole-responsable strong { display: block; font-size: 13px; }
.pole-responsable-tag { display: block; font-size: 11px; color: var(--teal-dark); }

.pole-groupe { margin-bottom: 10px; }
.pole-groupe-titre { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 4px; }
.pole-membre-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; gap: 6px; }
.pole-membre-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-size: 13px; }
.pole-membre-retirer {
  border: none; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.pole-membre-retirer:hover { background: #fee2e2; color: #b91c1c; }
.pole-vide { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 10px; }

.pole-add-membre { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

.pole-sans-pole { margin-top: 22px; }
.pole-sans-pole h3 { font-size: 14px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.pole-sans-pole-list { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 8px; }

/* ════ Tableau Suivi (Évolution/Bug + sous-blocs Spec/Recette + liens) ════ */
/* ⚠️ Piste abandonnée : `border-collapse:separate` (au lieu de `collapse`,
   hérité de `.data-table`) a été essayée pour le ghosting de l'en-tête,
   mais AGGRAVE le rendu des séparateurs verticaux (`.suivi-col-divide`) —
   en `collapse`, le moteur GARANTIT que la bordure d'une cellule s'aligne
   pixel pour pixel avec celle de la cellule voisine (une seule bordure
   calculée, partagée) ; en `separate`, chaque `<td>` positionne sa bordure
   indépendamment selon SA PROPRE boîte, sans garantie d'alignement avec la
   ligne du dessus/dessous — la moindre différence de hauteur de contenu
   entre deux lignes (avatar plein vs tiret "—", par ex.) suffit à décaler
   le trait de quelques dixièmes de pixel d'une ligne à l'autre, donnant un
   trait "haché" (retour utilisateur, capture à l'appui) au lieu d'un trait
   continu. Revenu à `collapse` (comportement par défaut de `.data-table`,
   aucune règle à poser). Le vrai fix du ghosting était ailleurs (hauteur de
   ligne uniforme, cf. `.td-libelle` juste en dessous) : `collapse` +
   libellé tronqué = en-tête propre ET traits verticaux continus.
   Libellé tronqué sur 1 ligne (texte complet en tooltip `title`) plutôt que
   multi-lignes libre : évite des lignes de hauteur très variable, corrélées
   en conditions réelles à l'artefact de défilement de l'en-tête sticky
   (bleed-through confirmé être un bug de peinture du moteur — le hit-test
   DOM/CSS était pourtant toujours correct — probablement lié aux lignes
   hautes multi-lignes). */
.suivi-table .td-libelle {
  max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* `contain: paint` sur le conteneur à défilement : indique explicitement au
   moteur de rendu que rien ne doit peindre en dehors de cette boîte,
   éliminant un bleed-through (confirmé en conditions réelles : le hit-test
   DOM était pourtant correct — `elementsFromPoint` donnait bien le <th>
   au-dessus à chaque point vérifié — donc un vrai bug de composition/tuiles
   du moteur, pas un souci de z-index/CSS). Scopé à `#suivi-results` (id du
   conteneur `.custom-table-scroll` propre à cette page). */
#suivi-results { contain: paint; }
.suivi-row-sec { background: #fafbfc; }
/* Connecteur d'arbre à angle droit : tronc vertical planté sous le bouton
   +/− de la ligne principale (`left:22px` = padding cellule 14px + centre du
   bouton/repère 16px de large, 8px), qui descend à travers les lignes
   secondaires (coupé à mi-hauteur sur la dernière) avec un coude horizontal
   (`.suivi-tree-elbow`) vers le bord gauche de l'icône de chaque ligne — pas
   un trait qui traverse l'icône (jugé « moche » sur la 1ʳᵉ version). Le type
   de lien Jira ("relates to"…) n'est plus affiché en texte : `title` natif
   sur la ligne secondaire, visible au survol de la souris. */
.suivi-td-root, .td-tree { position: relative; }
.td-tree { padding-left: 36px !important; }
.suivi-tree-stub, .suivi-tree-line {
  position: absolute; left: 22px; width: 1px; background: var(--border);
}
.suivi-tree-stub { top: calc(50% + 8px); bottom: 0; }
.suivi-tree-line { top: 0; bottom: 0; }
.suivi-tree-line.is-last { bottom: 50%; }
.suivi-tree-elbow {
  position: absolute; left: 22px; top: 50%; width: 14px; height: 1px; background: var(--border);
}
/* Bouton +/− pour déplier les lignes secondaires d'une ligne principale
   (repliées par défaut). `.suivi-toggle-spacer` garde l'alignement des
   clés Jira sur les lignes qui n'ont pas de ticket lié. */
.suivi-toggle, .suivi-toggle-spacer { flex: 0 0 auto; width: 16px; height: 16px; }
.suivi-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--teal); border-radius: 4px; background: var(--white, #fff);
  color: var(--teal-dark); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
}
.suivi-toggle:hover { background: var(--teal-soft); }
/* Colonne Documents (icônes Spécification/Cahier de recette/Doc paramétrage,
   même rendu que la popup détail, `.tk-detail-doc-icon`) : ligne principale
   seulement, cliquables. `nowrap` (pas `wrap`) : au plus 3 icônes, mais un
   retour à la ligne ici casserait la hauteur uniforme des lignes dont
   dépend le fix du ghosting de l'en-tête (cf. `.td-libelle` plus bas) —
   quitte à laisser les icônes déborder plutôt que de risquer une 2ᵉ ligne. */
.td-docs { display: flex; flex-wrap: nowrap; gap: 6px; }
/* Séparateurs verticaux entre groupes de colonnes (Spec / Recette /
   Documents), sur toute la hauteur du tableau (continue sur les lignes
   secondaires via leur cellule colspan). */
.suivi-table .suivi-col-divide { border-left: 1px solid var(--border); }
/* Filtre "assigné" intégré au sous-en-tête Affectation de Spec/Recette. */
.suivi-subfilter {
  display: block; width: 100%; margin-top: 4px; padding: 2px 4px;
  font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: normal;
  border: 1px solid var(--border); border-radius: 4px; background: var(--white);
  color: var(--text-muted); cursor: pointer;
}
/* Colonne "Jira" du sous-bloc Spec/Recette : icône seule, numéro en tooltip
   natif (title) au survol — identifie la fiche sans alourdir le tableau. */
.td-subkey { text-align: center; width: 30px; }
.suivi-subkey { display: inline-flex; }
.suivi-subkey .jira-icon { width: 15px; height: 15px; }
/* Colonnes serrées (retour utilisateur : "Affectation" fait déborder la
   largeur) : padding réduit par rapport à `.data-table` (10px 14px), select
   de filtre resserré, avatar/badges un peu plus compacts. */
.suivi-table thead th { padding: 6px 8px; }
.suivi-table td { padding: 6px 8px; }
.suivi-table .suivi-subfilter { padding: 1px 2px; font-size: 10px; }
.suivi-table .td-affect { width: 34px; }
.suivi-table .tk-ava { width: 22px; height: 22px; font-size: 9px; }